:root {
  --forest: #063d2a;
  --forest-deep: #022f20;
  --cream: #f5ecdc;
  --cream-light: #fbf7ee;
  --paper: #efe2ca;
  --gold: #bd861f;
  --gold-light: #ddba69;
  --ink: #15372a;
  --muted: #5f675f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream-light); color: var(--ink); font-family: Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
main { overflow: hidden; }

.site-header {
  position: sticky; top: 0; z-index: 50; height: 96px; padding: 0 clamp(24px, 5vw, 74px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 36px;
  background: rgba(251,247,238,.94); border-bottom: 1px solid rgba(189,134,31,.5); backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; width: fit-content; }
.brand img { width: 62px; height: 62px; border-radius: 50%; }
.brand span { display: flex; flex-direction: column; }
.brand strong { font-family: Georgia, serif; font-size: 23px; font-weight: 500; line-height: .95; }
.brand small { margin-top: 5px; font-family: Georgia, serif; font-size: 12px; }
nav { display: flex; gap: clamp(18px, 3vw, 44px); font-size: 14px; }
nav a { position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -8px; height: 1px; background: var(--gold); transition: right .25s; }
nav a:hover::after { right: 0; }
.site-header > .button { justify-self: end; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 48px; padding: 0 24px; border: 1px solid var(--gold); background: var(--forest); color: #fff8e9; font-family: Georgia, serif; font-size: 16px; box-shadow: inset 0 0 0 2px rgba(221,186,105,.22); cursor: pointer; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); background: #075338; }
.button-small { min-height: 42px; padding: 0 25px; }
.text-link { display: inline-flex; gap: 16px; width: fit-content; padding-bottom: 7px; border-bottom: 1px solid var(--gold); font-family: Georgia, serif; }

.hero { min-height: 680px; display: grid; grid-template-columns: minmax(320px, .83fr) 1.17fr; background: radial-gradient(circle at 68% 46%, #fffdf8 0, #f7efdf 34%, #eee0c8 100%); }
.hero-copy { padding: clamp(78px, 9vw, 138px) 7vw 72px; position: relative; z-index: 2; }
.eyebrow { margin: 0 0 20px; color: var(--gold); font-size: 12px; font-weight: 650; letter-spacing: .24em; text-transform: uppercase; }
.hero h1, h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.035em; }
.hero h1 { max-width: 560px; font-size: clamp(66px, 7vw, 112px); line-height: .88; }
.lead { max-width: 470px; margin: 32px 0; font-family: Georgia, serif; font-size: clamp(18px, 2vw, 24px); line-height: 1.5; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 30px; }
.hero-product { position: relative; min-height: 680px; overflow: hidden; background: #e5d0ad; }
.hero-product > img { width: 100%; height: 100%; min-height: 680px; object-fit: cover; object-position: 100% center; }

.product-box { position: relative; z-index: 3; width: min(42vw, 400px); aspect-ratio: .83; margin-right: -24px; transform: rotateY(4deg); filter: drop-shadow(0 24px 22px rgba(42,36,21,.2)); }
.box-front { position: absolute; inset: 0; padding: 8% 8% 6%; display: flex; flex-direction: column; align-items: center; border: 3px solid var(--forest); outline: 10px solid #d7b879; outline-offset: -18px; background: linear-gradient(135deg, #dbc18f, #f4e6c8 48%, #d7b57b); }
.box-front::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(6,61,42,.7); }
.box-front img { width: 75%; aspect-ratio: 1; object-fit: contain; margin: auto; border-radius: 50%; }
.box-front strong { position: relative; z-index: 2; font-family: Georgia, serif; font-size: clamp(15px, 1.7vw, 25px); }
.box-front span { position: relative; z-index: 2; margin-top: 8px; font-size: 12px; }
.box-side { position: absolute; z-index: -1; top: 18px; bottom: 14px; left: -42px; width: 46px; border: 2px solid var(--forest); transform: skewY(-22deg); transform-origin: right; background: repeating-linear-gradient(90deg,#c6a868 0 5px,#dfc38d 5px 8px); }

.product-jar { --jar-width: 290px; position: relative; z-index: 5; width: var(--jar-width); filter: drop-shadow(0 24px 20px rgba(42,36,21,.25)); }
.jar-lid { position: relative; z-index: 3; height: calc(var(--jar-width) * .21); border: 2px solid #a5a4a0; border-radius: 28px 28px 15px 15px; background: linear-gradient(#f4f3ef 0%, #b9bab7 34%, #fafafa 53%, #9c9d9b 86%, #e9e8e4 100%); box-shadow: inset 0 -8px 5px rgba(0,0,0,.1); overflow: hidden; }
.jar-lid span { position: relative; display: inline-block; width: 3px; height: 100%; margin-left: 13%; background: rgba(94,96,94,.26); }
.jar-glass { position: relative; height: calc(var(--jar-width) * .65); margin: -7px 7px 0; border: 4px solid rgba(177,182,174,.7); border-radius: 18px 18px 38px 38px; background: linear-gradient(90deg,rgba(255,255,255,.75),rgba(218,220,209,.35) 12%,rgba(255,255,255,.55) 48%,rgba(184,188,179,.4) 91%,rgba(255,255,255,.8)); overflow: hidden; }
.jar-cream { position: absolute; inset: 8px; border-radius: 12px 12px 30px 30px; background: linear-gradient(120deg,#f7f0df,#dfd2b3); }
.jar-label { position: absolute; z-index: 2; left: 4px; right: 4px; top: 23%; bottom: 6%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5px 8px; border-top: 2px solid var(--forest); border-bottom: 2px solid var(--forest); background: linear-gradient(90deg,#ead7b2,#fff1d4 50%,#e5cda2); }
.jar-label img { height: 74%; width: auto; border-radius: 50%; object-fit: contain; }
.jar-label strong { font-family: Georgia, serif; font-size: calc(var(--jar-width) * .046); white-space: nowrap; }
.hero-jar { --jar-width: min(29vw, 315px); margin-bottom: -6px; }
.botanical-shadow { position: absolute; z-index: 0; width: 320px; height: 500px; right: 3%; bottom: 15%; opacity: .13; border: 5px solid var(--forest); border-width: 0 0 0 5px; border-radius: 100% 0; transform: rotate(-18deg); }
.botanical-shadow::before, .botanical-shadow::after { content: ""; position: absolute; width: 120px; height: 48px; border: 4px solid var(--forest); border-radius: 100%; }
.botanical-shadow::before { left: -112px; top: 145px; transform: rotate(28deg); }
.botanical-shadow::after { left: -90px; top: 265px; transform: rotate(-25deg); }
.botanical-shadow-two { transform: rotate(12deg) scale(.68); right: 24%; bottom: 6%; }

.qualities { min-height: 118px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(189,134,31,.4); border-bottom: 1px solid rgba(189,134,31,.4); background: #fbf5e9; padding: 25px 5vw; }
.qualities > div { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; align-content: center; padding: 0 24px; border-right: 1px solid rgba(189,134,31,.38); }
.qualities > div:last-child { border-right: 0; }
.quality-icon { grid-row: 1 / 3; align-self: center; width: 56px; height: 56px; object-fit: contain; }
.qualities strong { font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
.qualities small { margin-top: 4px; color: var(--muted); }

.sizes-section { min-height: 600px; display: grid; grid-template-columns: .55fr 1.45fr; padding: 90px 7vw 60px; background: linear-gradient(90deg,#f5ecdc,#fffaf0); }
.section-copy { padding-top: 30px; }
.section-copy h2, .cbg-copy h2, .story-copy h2, .origin-copy h2, .contact-section h2 { font-size: clamp(46px, 5vw, 78px); line-height: .98; }
.section-copy > p:last-child { max-width: 220px; font-size: 16px; line-height: 1.7; }
.gold-rule { display: block; width: 58px; height: 2px; margin: 30px 0; background: var(--gold); }
.sizes-display { display: flex; align-items: center; justify-content: center; min-width: 0; }
.sizes-photo { width: 100%; margin: 0; }
.sizes-photo img { width: 100%; border-radius: 2px; box-shadow: 0 26px 60px rgba(61,48,27,.12); }
.sizes-photo figcaption { display: grid; grid-template-columns: repeat(3,1fr); padding: 18px 7% 0; font-family: Georgia, serif; font-size: 18px; text-align: center; }
.size-item { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 24px; font-family: Georgia, serif; font-size: 18px; }
.jar-small { --jar-width: clamp(122px, 14vw, 190px); }
.jar-medium { --jar-width: clamp(150px, 18vw, 240px); }
.jar-large { --jar-width: clamp(176px, 22vw, 290px); }

.cbg-section { min-height: 620px; display: grid; grid-template-columns: 1fr 1fr; }
.cbg-art { position: relative; overflow: hidden; background: #123c29; }
.cbg-art img { width: 100%; height: 100%; min-height: 620px; object-fit: cover; object-position: 45% center; }
.halo { position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid rgba(221,186,105,.6); border-radius: 50%; box-shadow: 0 0 0 40px rgba(221,186,105,.05),0 0 0 80px rgba(221,186,105,.04); }
.cbg-copy { display: flex; flex-direction: column; justify-content: center; padding: 80px 9vw; background: #f8f1e5; }
.cbg-copy > p:not(.eyebrow) { max-width: 560px; margin: 28px 0; font-size: 17px; line-height: 1.75; }

.story-section { min-height: 560px; display: grid; grid-template-columns: 1.1fr .9fr; background: var(--forest); color: #fff8e9; }
.story-copy { align-self: center; padding: 90px 7vw; }
.story-copy h2 { max-width: 700px; }
.story-copy > p:last-child { max-width: 620px; margin-top: 28px; color: rgba(255,248,233,.75); font-size: 18px; line-height: 1.75; }
.story-mark { display: grid; place-items: center; padding: 60px; background: linear-gradient(145deg,rgba(255,255,255,.02),rgba(221,186,105,.14)); }
.story-mark img { width: min(78%, 420px); border-radius: 50%; box-shadow: 0 30px 60px rgba(0,0,0,.28); }

.origin-section { min-height: 570px; display: grid; grid-template-columns: 1.1fr .9fr; background: #f6ecdc; }
.origin-landscape { position: relative; overflow: hidden; background: #4f6b43; }
.origin-landscape img { width: 100%; height: 100%; min-height: 570px; object-fit: cover; object-position: center; }
.origin-landscape > span { position: absolute; left: 35px; bottom: 30px; color: #fff; font-size: 12px; letter-spacing: .26em; text-shadow: 0 2px 15px rgba(0,0,0,.55); }
.sun { position: absolute; top: 15%; left: 18%; width: 130px; height: 130px; border-radius: 50%; background: #dfae4b; box-shadow: 0 0 80px #f1cd7a; }
.field { position: absolute; left: -15%; width: 130%; height: 32%; bottom: -3%; border-radius: 50% 50% 0 0; transform: rotate(-6deg); }
.field-one { background: #153f2d; }
.field-two { bottom: 5%; left: 5%; background: #345b38; transform: rotate(8deg); }
.field-three { bottom: 13%; left: -8%; background: #73905d; transform: rotate(-4deg); }
.origin-copy { display: flex; flex-direction: column; justify-content: center; padding: 80px 7vw; }
.origin-copy > p:last-child { max-width: 520px; font-size: 17px; line-height: 1.75; }

.contact-section { padding: 85px 7vw 70px; text-align: center; background: #fffaf1; }
.contact-section > p:not(.eyebrow) { margin: 18px auto 30px; color: var(--muted); }
.subscribe { max-width: 700px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; border: 1px solid var(--gold); background: white; }
.subscribe input { width: 100%; min-width: 0; padding: 0 20px; border: 0; outline: 0; background: transparent; font-size: 15px; }
.subscribe .button { border-width: 0 0 0 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

footer { min-height: 130px; padding: 25px 6vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; border-top: 1px solid rgba(189,134,31,.5); background: #f3eadc; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 65px; height: 65px; border-radius: 50%; }
.footer-brand span { display: flex; flex-direction: column; gap: 5px; }
.footer-brand strong { font-family: Georgia, serif; font-size: 19px; font-weight: 400; }
.footer-brand small { color: var(--muted); }
.footer-address { font-size: 13px; }
.support-logos { justify-self: end; display: flex; align-items: center; gap: 26px; }
.support-logos img:first-child { width: 150px; height: auto; object-fit: contain; transform: none; }
.support-logos img:last-child { width: 150px; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; height: 82px; }
  .brand img { width: 52px; height: 52px; }
  nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 20px; }
  .hero-product, .hero-product > img { min-height: 540px; }
  .qualities { grid-template-columns: 1fr 1fr; }
  .qualities > div:nth-child(2) { border-right: 0; }
  .qualities > div { padding: 18px; }
  .sizes-section { grid-template-columns: 1fr; }
  .section-copy { text-align: center; }
  .section-copy .gold-rule { margin-inline: auto; }
  .section-copy > p:last-child { margin-inline: auto; }
  .cbg-section, .origin-section { grid-template-columns: 1fr; }
  .cbg-art, .origin-landscape { min-height: 460px; }
  .story-section { grid-template-columns: 1fr; }
  .story-mark { padding-top: 0; }
  footer { grid-template-columns: 1fr 1fr; }
  .footer-address { display: none; }
}

@media (max-width: 640px) {
  .site-header { padding: 0 18px; }
  .brand strong { font-size: 18px; }
  .brand small { font-size: 10px; }
  .site-header > .button { display: none; }
  .hero { min-height: 0; }
  .hero-copy { padding: 68px 24px 24px; }
  .hero h1 { font-size: 62px; }
  .lead { font-size: 18px; }
  .hero-product, .hero-product > img { min-height: 430px; }
  .qualities { grid-template-columns: 1fr; padding: 12px 20px; }
  .qualities > div { border-right: 0; border-bottom: 1px solid rgba(189,134,31,.3); }
  .qualities > div:last-child { border-bottom: 0; }
  .sizes-section { padding: 70px 18px 48px; }
  .sizes-photo figcaption { font-size: 14px; padding-top: 12px; }
  .cbg-art, .origin-landscape { min-height: 360px; }
  .cbg-copy, .story-copy, .origin-copy { padding: 64px 24px; }
  .story-mark { padding: 20px 45px 60px; }
  .contact-section { padding: 65px 20px; }
  .subscribe { grid-template-columns: 1fr; border: 0; gap: 10px; background: transparent; }
  .subscribe input { min-height: 52px; border: 1px solid var(--gold); background: #fff; }
  .subscribe .button { border: 1px solid var(--gold); }
  footer { grid-template-columns: 1fr; text-align: center; }
  .footer-brand, .support-logos { justify-self: center; }
  .support-logos { flex-wrap: wrap; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }