@font-face {
  font-family: "Anna Serif";
  src: url("../fonts/annaprasana-serif.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Anna Serif";
  src: url("../fonts/annaprasana-serif-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Anna Sans";
  src: url("../fonts/annaprasana-sans.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Anna Sans";
  src: url("../fonts/annaprasana-sans-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --cream: #f7f0e3;
  --cream-soft: #fcf8ef;
  --paper: #efe2cb;
  --brown: #3b1d0d;
  --brown-soft: #74442c;
  --orange: #ef6d19;
  --orange-deep: #cf4e0a;
  --green: #38572e;
  --gold: #c7942d;
  --plum: #5b335d;
  --line: rgba(59, 29, 13, 0.17);
  --serif: "Anna Serif", Georgia, serif;
  --sans: "Anna Sans", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--cream-soft);
}

body {
  margin: 0;
  color: var(--brown);
  background: var(--cream-soft);
  font-family: var(--sans);
  overflow-x: hidden;
}

body.menu-is-open {
  overflow: hidden;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

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

.grain {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E");
}

.site-header {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  right: 0;
  height: 104px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 clamp(28px, 5vw, 84px);
  border-bottom: 1px solid transparent;
  transition: height 0.45s ease, background 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

.site-header.is-scrolled {
  height: 78px;
  background: rgba(252, 248, 239, 0.91);
  border-color: var(--line);
  box-shadow: 0 12px 50px rgba(77, 40, 16, 0.06);
  backdrop-filter: blur(18px);
}

.brand {
  width: clamp(190px, 15vw, 245px);
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.desktop-nav button,
.footer-meta button {
  position: relative;
  border: 0;
  background: transparent;
  padding: 10px 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.desktop-nav button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 4px;
  height: 1px;
  background: var(--orange);
  transition: right 0.35s ease;
}

.desktop-nav button:hover::after {
  right: 0;
}

.header-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--brown);
  border-radius: 100px;
  background: transparent;
  padding: 12px 17px 12px 21px;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.header-cta:hover {
  color: white;
  background: var(--brown);
  transform: translateY(-2px);
}

.header-cta svg,
.primary-button svg,
.mobile-notify svg,
.email-field button svg,
.scroll-cue svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-toggle,
.mobile-menu {
  display: none;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(420px, 0.92fr) minmax(540px, 1.08fr);
  align-items: center;
  gap: clamp(30px, 5vw, 90px);
  padding: 140px clamp(30px, 7vw, 122px) 90px;
  background:
    radial-gradient(circle at 87% 18%, rgba(239, 109, 25, 0.15), transparent 29%),
    radial-gradient(circle at 1% 88%, rgba(56, 87, 46, 0.1), transparent 26%),
    linear-gradient(115deg, #fcf8ef 0%, #f6ead8 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 49.92%, rgba(59,29,13,0.08) 50%, transparent 50.08%);
}

.hero-orbit {
  position: absolute;
  border: 1px solid rgba(199, 148, 45, 0.26);
  border-radius: 50%;
  pointer-events: none;
}

.orbit-one {
  width: 760px;
  height: 760px;
  top: -480px;
  right: -170px;
  animation: orbit 22s linear infinite;
}

.orbit-two {
  width: 430px;
  height: 430px;
  bottom: -280px;
  left: -120px;
  animation: orbit 17s linear infinite reverse;
}

.hero-copy {
  position: relative;
  z-index: 3;
  padding-top: 20px;
}

.eyebrow,
.section-index {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--brown-soft);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 34px;
  height: 1px;
  background: var(--orange);
}

.hero h1,
.manifesto h2,
.collection h2,
.ingredients h2,
.notify h2 {
  margin: 28px 0 24px;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.055em;
}

.hero h1 {
  max-width: 760px;
  font-size: clamp(64px, 7.15vw, 124px);
}

h1 em,
h2 em {
  color: var(--orange);
  font-style: italic;
  font-weight: 400;
}

.hero-intro {
  max-width: 560px;
  margin: 0;
  color: rgba(59, 29, 13, 0.72);
  font-size: clamp(16px, 1.18vw, 20px);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-top: 40px;
}

.primary-button {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 17px;
  border: 0;
  border-radius: 100px;
  color: white;
  background: var(--orange-deep);
  box-shadow: 0 18px 45px rgba(207, 78, 10, 0.22);
  padding: 17px 22px 17px 28px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.primary-button::before {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -70%;
  width: 32%;
  background: rgba(255,255,255,0.28);
  transform: rotate(22deg);
  transition: left 0.7s ease;
}

.primary-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 56px rgba(207, 78, 10, 0.29);
}

.primary-button:hover::before {
  left: 125%;
}

.text-button {
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 12px 0 8px;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.text-button span {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.text-button:hover {
  color: var(--orange-deep);
  border-color: var(--orange);
}

.text-button:hover span {
  transform: translate(3px, 3px);
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 58px;
  color: rgba(59, 29, 13, 0.58);
  font-size: 11px;
  letter-spacing: 0.13em;
  line-height: 1.55;
  text-transform: uppercase;
}

.hero-note p {
  margin: 0;
}

.hero-note strong {
  color: var(--brown);
  font-weight: 700;
}

.pulse-dot {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}

.pulse-dot::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid var(--green);
  border-radius: 50%;
  animation: pulse 2.1s ease-out infinite;
}

.hero-visual {
  position: relative;
  z-index: 2;
  justify-self: center;
  width: min(100%, 720px);
  height: min(72vw, 750px);
  max-height: 75svh;
  min-height: 570px;
}

.arch-frame {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  width: 78%;
  height: 92%;
  overflow: hidden;
  border-radius: 52% 52% 7px 7px / 28% 28% 7px 7px;
  box-shadow: 0 35px 75px rgba(65, 33, 13, 0.18);
}

.arch-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.14), transparent 40%, rgba(59,29,13,0.11));
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: slowZoom 15s ease-in-out infinite alternate;
}

.arch-shine {
  position: absolute;
  z-index: 2;
  top: -40%;
  left: -70%;
  width: 40%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
  transform: rotate(15deg);
  animation: archShine 7.5s ease-in-out infinite 2s;
}

.product-float {
  position: absolute;
  z-index: 4;
  left: 0;
  bottom: 0;
  width: 47%;
  filter: drop-shadow(0 30px 28px rgba(50, 23, 8, 0.24));
  animation: productFloat 6s ease-in-out infinite;
}

.product-float img {
  width: 100%;
}

.ingredient-chip {
  position: absolute;
  z-index: 5;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: 3px;
  color: white;
  background: rgba(59, 29, 13, 0.72);
  box-shadow: 0 16px 38px rgba(35, 17, 8, 0.16);
  backdrop-filter: blur(12px);
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.chip-one {
  top: 20%;
  left: 7%;
  padding: 13px 16px;
  animation: chipFloat 5.4s ease-in-out infinite;
}

.chip-one span {
  margin-right: 6px;
  color: #f9c765;
  font-family: var(--serif);
  font-size: 22px;
}

.chip-two {
  right: -4%;
  bottom: 16%;
  padding: 15px 18px;
  animation: chipFloat 5.4s ease-in-out infinite -2.1s;
}

.floating-grain {
  position: absolute;
  z-index: 3;
  width: 11px;
  height: 25px;
  border-radius: 90% 10% 90% 10%;
  background: var(--gold);
  box-shadow: 0 3px 8px rgba(59, 29, 13, 0.16);
  animation: grainDrift 7s ease-in-out infinite;
}

.g1 { top: 9%; left: 12%; transform: rotate(35deg); }
.g2 { top: 51%; right: -3%; transform: rotate(80deg); animation-delay: -2s; }
.g3 { bottom: 4%; right: 25%; transform: rotate(120deg); animation-delay: -4s; }
.g4 { top: 35%; left: -3%; transform: rotate(165deg); animation-delay: -5s; }

.scroll-cue {
  position: absolute;
  z-index: 5;
  bottom: 31px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: rgba(59,29,13,0.58);
  cursor: pointer;
}

.scroll-cue svg {
  width: 22px;
  height: 22px;
  animation: scrollBounce 1.8s ease-in-out infinite;
}

.scroll-cue span {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  display: none;
}

.hero-enter {
  opacity: 0;
  transform: translateY(32px);
  animation: enter 1s cubic-bezier(.2,.75,.25,1) forwards;
  animation-fill-mode: both;
}

.delay-1 { animation-delay: .15s; }
.delay-2 { animation-delay: .28s; }
.delay-3 { animation-delay: .45s; }
.delay-4 { animation-delay: .62s; }
.delay-5 { animation-delay: .78s; }

.marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.14);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.75);
  background: var(--green);
  padding: 16px 0;
  white-space: nowrap;
}

.marquee div {
  width: max-content;
  font-family: var(--serif);
  font-size: 14px;
  letter-spacing: 0.13em;
  animation: marquee 28s linear infinite;
}

.marquee i {
  margin: 0 28px;
  color: #e4bc63;
  font-style: normal;
}

.manifesto {
  position: relative;
  background: var(--green);
  color: #fffaf0;
}

.manifesto-inner {
  position: relative;
  max-width: 1500px;
  min-height: 1030px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.83fr 1.17fr;
  grid-template-rows: auto 1fr;
  column-gap: clamp(45px, 7vw, 125px);
  padding: 130px clamp(30px, 7vw, 110px) 150px;
}

.manifesto-inner::before {
  content: "";
  position: absolute;
  width: 580px;
  height: 580px;
  left: -190px;
  top: 180px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 50%;
}

.manifesto .section-index {
  grid-column: 1 / -1;
  color: rgba(255,255,255,0.56);
  margin-bottom: 80px;
}

.manifesto-copy {
  align-self: start;
}

.leaf-mark {
  width: 58px;
  fill: none;
  stroke: #d7aa4e;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.manifesto h2,
.collection h2,
.ingredients h2,
.notify h2 {
  font-size: clamp(50px, 5.2vw, 88px);
}

.manifesto h2 {
  margin-top: 22px;
  letter-spacing: -0.045em;
}

.manifesto h2 em {
  color: #e6bc67;
}

.manifesto-copy > p {
  max-width: 575px;
  margin-top: 40px;
  color: rgba(255,255,255,0.7);
  font-size: clamp(16px, 1.2vw, 20px);
  line-height: 1.8;
}

.story-image {
  position: relative;
  align-self: center;
  margin: 0;
  transform: rotate(1.8deg);
}

.story-image::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px 18px 18px -14px;
  border: 1px solid rgba(226,183,91,0.43);
}

.story-image img {
  width: 100%;
  max-height: 690px;
  object-fit: cover;
  box-shadow: 0 35px 85px rgba(14,26,11,0.3);
}

.story-image figcaption {
  position: absolute;
  left: -38px;
  bottom: 42px;
  width: 270px;
  background: #f8f0df;
  color: var(--brown);
  box-shadow: 0 18px 45px rgba(18,29,13,0.2);
  padding: 20px 24px;
}

.story-image figcaption span,
.art-label span {
  display: block;
  color: var(--orange-deep);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.story-image figcaption strong,
.art-label strong {
  display: block;
  margin-top: 7px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.25;
}

.story-statement {
  position: absolute;
  left: clamp(30px, 7vw, 110px);
  bottom: 106px;
  width: 33%;
  border-left: 1px solid rgba(226,183,91,0.55);
  padding-left: 28px;
}

.story-statement span {
  color: #e6bc67;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.story-statement p {
  margin: 15px 0 0;
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 29px);
  line-height: 1.35;
}

.collection {
  padding: 145px clamp(30px, 7vw, 110px) 160px;
  background:
    radial-gradient(circle at 86% 20%, rgba(199,148,45,0.13), transparent 25%),
    var(--cream-soft);
}

.collection-heading {
  max-width: 1500px;
  margin: 0 auto 90px;
  display: grid;
  grid-template-columns: 0.52fr 1.48fr;
  align-items: end;
}

.collection-heading .section-index {
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 10px;
}

.collection h2 {
  margin: 0;
}

.collection-heading > p {
  max-width: 570px;
  margin: 26px 0 0;
  color: rgba(59,29,13,0.65);
  font-size: 17px;
  line-height: 1.7;
}

.product-stage {
  max-width: 1500px;
  min-height: 720px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  overflow: hidden;
  border: 1px solid var(--line);
  background: white;
  box-shadow: 0 40px 100px rgba(69, 34, 12, 0.09);
}

.product-stage-visual {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #eee2c9;
  transition: background 0.7s ease;
}

.product-stage-visual.tone-orange { background: linear-gradient(140deg, #f4c174 0%, #e87220 100%); }
.product-stage-visual.tone-plum { background: linear-gradient(140deg, #e4cde4 0%, #875586 100%); }
.product-stage-visual.tone-earth { background: linear-gradient(140deg, #e6c294 0%, #8b5132 100%); }
.product-stage-visual.tone-green { background: linear-gradient(140deg, #d7dda7 0%, #5e8438 100%); }
.product-stage-visual.tone-gold { background: linear-gradient(140deg, #f5daa0 0%, #d9a51e 100%); }

.giant-number {
  position: absolute;
  top: -45px;
  left: 28px;
  color: rgba(255,255,255,0.23);
  font-family: var(--serif);
  font-size: 240px;
  line-height: 1;
}

.product-stage-visual img {
  position: relative;
  z-index: 3;
  width: min(70%, 560px);
  max-height: 610px;
  object-fit: contain;
  filter: drop-shadow(0 36px 32px rgba(52, 24, 8, 0.26));
  animation: productSwitch .8s cubic-bezier(.2,.75,.25,1) both;
}

.tone-plum img,
.tone-earth img,
.tone-green img {
  width: min(66%, 510px);
  border-radius: 48% 48% 4px 4px / 18% 18% 4px 4px;
  box-shadow: 0 35px 70px rgba(52,24,8,0.24);
  filter: none;
}

.stage-rings {
  position: absolute;
  width: 590px;
  height: 590px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
}

.stage-rings::before,
.stage-rings::after {
  content: "";
  position: absolute;
  inset: 55px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
}

.stage-rings::after { inset: 110px; }

.product-stage-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(50px, 6vw, 100px);
}

.product-kicker {
  color: var(--orange-deep);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.product-stage-copy h3 {
  margin: 18px 0 16px;
  font-family: var(--serif);
  font-size: clamp(45px, 4.1vw, 72px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}

.product-stage-copy > p {
  max-width: 420px;
  margin: 0;
  color: rgba(59,29,13,0.65);
  font-size: 16px;
  line-height: 1.7;
}

.product-pager {
  margin-top: 56px;
  border-top: 1px solid var(--line);
}

.product-pager button {
  width: 100%;
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 16px 0;
  text-align: left;
  color: rgba(59,29,13,0.5);
  font-size: 13px;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: color 0.3s ease, padding 0.3s ease;
}

.product-pager button span {
  font-size: 9px;
  letter-spacing: 0.18em;
}

.product-pager button:hover,
.product-pager button.active {
  color: var(--brown);
  padding-left: 10px;
}

.product-pager button.active::after {
  content: "→";
  justify-self: end;
  color: var(--orange);
}

.ingredients {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 920px;
  background: #eadbc1;
}

.ingredients-art {
  position: relative;
  overflow: hidden;
}

.ingredients-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(48, 20, 8, 0.34));
}

.ingredients-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s ease;
}

.ingredients-art:hover img {
  transform: scale(1.035);
}

.art-label {
  position: absolute;
  z-index: 2;
  left: 50px;
  bottom: 46px;
  color: white;
}

.art-label span {
  color: #ffd488;
}

.art-label strong {
  font-size: 28px;
}

.ingredients-copy {
  align-self: center;
  padding: 100px clamp(48px, 7vw, 118px);
}

.ingredients h2 {
  margin: 30px 0 30px;
}

.ingredients-lead {
  max-width: 590px;
  margin: 0;
  color: rgba(59,29,13,0.65);
  font-size: 17px;
  line-height: 1.75;
}

.promise-list {
  margin-top: 60px;
  border-top: 1px solid var(--line);
}

.promise-list article {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
}

.promise-list article > span {
  color: var(--orange-deep);
  font-size: 10px;
  letter-spacing: 0.15em;
  padding-top: 5px;
}

.promise-list h3 {
  margin: 0 0 7px;
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 400;
}

.promise-list p {
  max-width: 490px;
  margin: 0;
  color: rgba(59,29,13,0.6);
  font-size: 14px;
  line-height: 1.65;
}

.values {
  display: grid;
  grid-template-columns: 0.48fr 1.52fr;
  gap: 70px;
  padding: 135px clamp(30px, 7vw, 110px);
  background: var(--cream-soft);
}

.value-intro {
  padding-right: 35px;
}

.mini-mark {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-family: var(--serif);
  font-size: 38px;
}

.value-intro p {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: 25px;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.value-grid article {
  min-height: 250px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 36px;
  transition: color .4s ease, background .4s ease, transform .4s ease;
}

.value-grid article:hover {
  color: white;
  background: var(--orange-deep);
  transform: translateY(-5px);
}

.value-grid article > span {
  font-size: 10px;
  letter-spacing: .16em;
}

.value-grid h3 {
  margin: 56px 0 12px;
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 400;
}

.value-grid p {
  margin: 0;
  color: rgba(59,29,13,.6);
  font-size: 14px;
  line-height: 1.65;
  transition: color .4s ease;
}

.value-grid article:hover p {
  color: rgba(255,255,255,.75);
}

.notify {
  position: relative;
  min-height: 800px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  align-items: center;
  gap: 60px;
  padding: 120px clamp(30px, 8vw, 140px);
  color: white;
  background:
    radial-gradient(circle at 75% 30%, rgba(255,208,108,.23), transparent 25%),
    linear-gradient(120deg, #d9570d 0%, #ed7c1d 58%, #d9901a 100%);
}

.notify::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  right: -130px;
  bottom: -280px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  box-shadow: 0 0 0 65px rgba(255,255,255,.05), 0 0 0 130px rgba(255,255,255,.035);
}

.notify-glow {
  position: absolute;
  width: 230px;
  height: 230px;
  top: 10%;
  left: 46%;
  border-radius: 50%;
  background: rgba(255,227,161,.24);
  filter: blur(50px);
  animation: glow 4s ease-in-out infinite;
}

.section-index.light {
  color: rgba(255,255,255,.65);
}

.notify-copy {
  position: relative;
  z-index: 2;
}

.notify h2 {
  margin-top: 27px;
}

.notify h2 em {
  color: #ffe2a4;
}

.notify-copy > p {
  max-width: 580px;
  color: rgba(255,255,255,.78);
  font-size: 17px;
  line-height: 1.75;
}

.notify form {
  max-width: 610px;
  margin-top: 46px;
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notify label {
  display: block;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.email-field {
  display: grid;
  grid-template-columns: 1fr 58px;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.62);
}

.email-field input {
  width: 100%;
  border: 0;
  background: transparent;
  color: white;
  padding: 15px 0 17px;
  font-family: var(--serif);
  font-size: 28px;
}

.email-field input::placeholder {
  color: rgba(255,255,255,.45);
}

.email-field button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: var(--orange-deep);
  background: #fff7e8;
  cursor: pointer;
  transition: transform .35s ease, background .35s ease;
}

.email-field button:hover {
  transform: rotate(-12deg) scale(1.06);
  background: white;
}

.email-field button:disabled {
  cursor: wait;
  opacity: .68;
}

.notify small {
  display: block;
  margin-top: 14px;
  color: rgba(255,255,255,.54);
  font-size: 10px;
  letter-spacing: .08em;
}

.success-message {
  max-width: 600px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 44px;
  border-top: 1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding: 22px 0;
  animation: enter .6s ease both;
}

.success-message > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 50%;
}

.success-message strong {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
}

.notify-visual {
  position: relative;
  z-index: 2;
  height: 600px;
}

.notify-visual img {
  position: absolute;
  z-index: 3;
  width: min(88%, 520px);
  right: 0;
  bottom: -20px;
  filter: drop-shadow(0 42px 35px rgba(95,35,4,.3));
  animation: productFloat 6s ease-in-out infinite -1.6s;
}

.sun-seal {
  position: absolute;
  z-index: 4;
  top: 18px;
  right: 0;
  width: 145px;
  height: 145px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.6);
  border-radius: 50%;
  color: white;
  background: rgba(142,56,8,.19);
  backdrop-filter: blur(8px);
  animation: sealSpin 20s linear infinite;
}

.sun-seal span,
.sun-seal i {
  font-size: 9px;
  letter-spacing: .24em;
  font-style: normal;
}

.sun-seal strong {
  margin: 2px 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
}

.line-art {
  position: absolute;
  left: 2%;
  top: 26%;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(255,255,255,.21);
  border-radius: 50%;
}

.line-art::before,
.line-art::after {
  content: "";
  position: absolute;
  inset: 35px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
}

.line-art::after { inset: 70px; }

footer {
  padding: 75px clamp(30px, 7vw, 110px) 32px;
  text-align: center;
  background: #f8f0e0;
}

footer > img {
  width: min(360px, 74vw);
  margin: 0 auto;
}

footer > p {
  margin: 23px 0 68px;
  color: var(--brown-soft);
  font-family: var(--serif);
  font-size: 21px;
}

.footer-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--line);
  padding-top: 25px;
  color: rgba(59,29,13,.53);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.footer-meta span:first-child { text-align: left; }
.footer-meta button { justify-self: end; color: rgba(59,29,13,.62); }

[data-reveal] {
  opacity: 1;
  transform: translateY(0);
}

body.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity .9s cubic-bezier(.2,.75,.25,1), transform .9s cubic-bezier(.2,.75,.25,1);
}

body.reveal-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.value-grid article:nth-child(2),
.promise-list article:nth-child(2) { transition-delay: .1s; }
.value-grid article:nth-child(3),
.promise-list article:nth-child(3) { transition-delay: .2s; }
.value-grid article:nth-child(4) { transition-delay: .3s; }

@keyframes enter { to { opacity: 1; transform: translateY(0); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes slowZoom { to { transform: scale(1.16); } }
@keyframes archShine { 0%, 25% { left: -70%; } 55%, 100% { left: 130%; } }
@keyframes productFloat { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-13px) rotate(1deg); } }
@keyframes chipFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes grainDrift { 0%,100% { margin-top: 0; } 50% { margin-top: -22px; } }
@keyframes scrollBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes productSwitch { from { opacity: 0; transform: translateY(35px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes glow { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes sealSpin { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(7deg); } }

@media (max-width: 1180px) {
  .desktop-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto auto; gap: 18px; }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    padding: 0 11px;
    cursor: pointer;
  }
  .menu-toggle span { width: 100%; height: 1px; background: var(--brown); transition: transform .35s ease; }
  .menu-toggle.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: rgba(248,240,224,.98);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-15px);
    transition: opacity .4s ease, transform .4s ease;
  }
  .mobile-menu.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .mobile-menu > button {
    border: 0;
    background: transparent;
    font-family: var(--serif);
    font-size: 42px;
    cursor: pointer;
  }
  .mobile-menu .mobile-notify {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
    border: 1px solid var(--brown);
    border-radius: 50px;
    padding: 14px 22px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .hero { grid-template-columns: .9fr 1.1fr; padding-left: 55px; padding-right: 45px; }
  .hero h1 { font-size: clamp(64px, 8.2vw, 96px); }
  .hero-visual { min-height: 520px; }
  .manifesto-inner { min-height: 900px; }
  .product-stage { grid-template-columns: 1.1fr .9fr; }
  .values { grid-template-columns: 1fr; }
  .value-intro { display: flex; align-items: center; gap: 23px; }
  .value-intro p { margin: 0; }
}

@media (max-width: 820px) {
  .site-header { height: 82px; padding: 0 22px; }
  .site-header.is-scrolled { height: 70px; }
  .brand { width: 182px; }
  .header-cta { display: none; }
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 52px;
    padding: 138px 24px 90px;
  }
  .hero::before { display: none; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(58px, 17vw, 88px); margin-top: 23px; }
  .hero-intro { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 30px; }
  .hero-note { margin-top: 35px; }
  .hero-visual { width: 100%; height: 580px; min-height: 0; max-height: none; }
  .arch-frame { width: 83%; right: -7%; }
  .product-float { width: 48%; left: -2%; }
  .chip-one { left: 0; }
  .chip-two { right: 0; bottom: 10%; }
  .scroll-cue { display: none; }
  .manifesto-inner {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 85px 24px 110px;
  }
  .manifesto .section-index { margin-bottom: 50px; }
  .manifesto-copy > p { margin-bottom: 60px; }
  .story-image figcaption { left: 16px; bottom: 20px; width: 235px; }
  .story-statement { position: static; width: 100%; margin-top: 65px; }
  .collection { padding: 95px 24px 100px; }
  .collection-heading { grid-template-columns: 1fr; margin-bottom: 50px; }
  .collection-heading .section-index { grid-row: auto; margin-bottom: 42px; }
  .product-stage { min-height: 0; grid-template-columns: 1fr; }
  .product-stage-visual { min-height: 570px; }
  .product-stage-copy { padding: 50px 30px 60px; }
  .ingredients { grid-template-columns: 1fr; }
  .ingredients-art { height: 690px; }
  .ingredients-copy { padding: 90px 24px; }
  .values { gap: 45px; padding: 95px 24px; }
  .value-grid { grid-template-columns: 1fr; }
  .value-grid article { min-height: 220px; }
  .notify { min-height: 0; grid-template-columns: 1fr; padding: 95px 24px 70px; }
  .notify-visual { height: 520px; }
  .notify-visual img { width: min(85%, 480px); left: 50%; right: auto; transform: translateX(-50%); animation: none; }
  .sun-seal { right: 2%; }
  footer { padding: 65px 24px 28px; }
  .footer-meta { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .footer-meta span:first-child { text-align: center; }
  .footer-meta button { justify-self: center; }
}

@media (max-width: 480px) {
  .brand { width: 165px; }
  .mobile-menu > button { font-size: 35px; }
  .hero h1 { font-size: 56px; }
  .hero-visual { height: 480px; }
  .arch-frame { height: 91%; }
  .product-float { width: 50%; }
  .ingredient-chip { font-size: 8px; }
  .chip-one { top: 15%; padding: 9px 10px; }
  .chip-one span { font-size: 18px; }
  .chip-two { padding: 10px 11px; }
  .manifesto h2, .collection h2, .ingredients h2, .notify h2 { font-size: 43px; }
  .story-image figcaption { position: static; width: 100%; }
  .product-stage-visual { min-height: 460px; }
  .product-stage-visual img { width: 77%; max-height: 390px; }
  .tone-plum img, .tone-earth img, .tone-green img { width: 72%; }
  .giant-number { font-size: 160px; }
  .ingredients-art { height: 520px; }
  .value-grid h3 { margin-top: 38px; }
  .notify-visual { height: 420px; }
  .sun-seal { width: 115px; height: 115px; }
  .email-field input { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}