@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&display=swap');

:root {
  color-scheme: light;
  --forest: #23392e;
  --forest-deep: #172a22;
  --leaf: #536e48;
  --sage: #d8dfcb;
  --paper: #f4f1e8;
  --cream: #eae7d9;
  --gold: #e7b85f;
  --coral: #d8785c;
  --ink: #26372d;
  --muted: #687067;
  --display: 'Playfair Display', Georgia, serif;
  --body: 'DM Sans', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }
::selection { color: var(--forest-deep); background: var(--gold); }

.site-header { position: absolute; z-index: 5; top: 0; left: 0; display: flex; width: 100%; height: 88px; align-items: center; justify-content: space-between; padding: 0 7.4%; color: white; border-bottom: 1px solid rgb(255 255 255 / 22%); }
.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: 70px; height: 70px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: clamp(22px, 3.5vw, 52px); font-size: 12px; }
.site-nav a { transition: color 180ms ease; }
.site-nav a:hover { color: var(--gold); }
.site-nav .nav-visit { display: inline-flex; align-items: center; gap: 14px; border: 1px solid rgb(255 255 255 / 55%); padding: 10px 15px; }
.nav-visit span { font-size: 16px; }
.menu-toggle { display: none; }

.hero { position: relative; display: flex; min-height: min(780px, 100svh); align-items: center; overflow: hidden; color: white; background: var(--forest); }
.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center 57%; }
.hero-shade { background: linear-gradient(90deg, rgb(19 35 27 / 82%) 0%, rgb(24 41 30 / 62%) 42%, rgb(27 44 33 / 8%) 100%), linear-gradient(0deg, rgb(16 33 25 / 28%), transparent 42%); }
.hero-content { position: relative; z-index: 1; width: min(650px, 86%); margin: 67px 0 0 13.4%; animation: rise-in 700ms ease both; }
.eyebrow { margin: 0 0 18px; color: var(--leaf); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.eyebrow-light { color: #e4c887; }
.eyebrow-light span { display: inline-block; width: 21px; height: 1px; margin: 0 9px 3px 0; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin: 0 0 19px; font-family: var(--display); font-size: clamp(58px, 7.6vw, 102px); font-weight: 500; letter-spacing: 0; line-height: .98; }
.hero h1 em, h2 em { color: var(--gold); font-weight: 500; }
.hero-copy { max-width: 390px; margin-bottom: 30px; color: rgb(255 255 255 / 85%); font-size: 15px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 27px; padding: 0 19px; font-size: 11px; font-weight: 700; transition: background 180ms ease, color 180ms ease, transform 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button-gold { color: var(--forest-deep); background: var(--gold); }
.button-gold:hover { background: #f1ca78; }
.button span { font-size: 16px; }
.hero-caption { position: absolute; bottom: 32px; left: 7.4%; display: flex; gap: 22px; color: rgb(255 255 255 / 68%); font-size: 9px; letter-spacing: 1px; }

.section-pad { padding: 120px 13.4%; }
.intro { display: grid; grid-template-columns: 1fr 2.1fr 1.25fr; gap: 6%; align-items: start; background: var(--paper); }
.intro-kicker { display: flex; flex-direction: column; gap: 19px; color: var(--leaf); font-size: 9px; font-weight: 700; letter-spacing: 1.1px; }
.section-number { display: grid; width: 35px; aspect-ratio: 1; place-items: center; border: 1px solid #bdc7b6; border-radius: 50%; color: var(--forest); font-family: var(--display); font-size: 15px; font-weight: 500; letter-spacing: 0; }
h2 { margin-bottom: 22px; font-family: var(--display); font-size: clamp(38px, 4.3vw, 58px); font-weight: 500; letter-spacing: 0; line-height: 1.1; }
.intro h2 { margin-bottom: 20px; }
.intro h2 em, .section-heading h2 em { color: var(--leaf); }
.intro-copy { max-width: 510px; margin-bottom: 22px; color: #586157; font-size: 15px; }
.text-link { display: inline-flex; gap: 13px; align-items: center; border-bottom: 1px solid #8a9782; padding: 0 0 5px; font-size: 11px; font-weight: 700; }
.text-link span { color: var(--coral); font-size: 16px; }
.intro-note { align-self: end; padding: 48px 0 1px; color: #647066; font-family: var(--display); font-size: 18px; line-height: 1.55; }
.note-line { display: block; width: 38px; height: 2px; margin-bottom: 22px; background: var(--coral); }
.note-signature { color: var(--leaf); font-size: 14px; font-style: italic; }

.harvest { padding-top: 95px; padding-bottom: 125px; background: var(--cream); }
.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 42px; }
.section-heading h2 { margin-bottom: 0; }
.section-aside { max-width: 250px; margin: 0 2% 6px 30px; color: #62695f; font-size: 13px; }
.produce-grid { display: grid; grid-template-columns: 1.15fr .85fr 1fr; grid-template-rows: 290px 255px; gap: 15px; }
.produce-card { position: relative; overflow: hidden; background: #b3b99f; color: white; }
.produce-card::after { position: absolute; inset: 0; content: ''; background: linear-gradient(0deg, rgb(22 34 27 / 83%), transparent 62%); }
.produce-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.produce-card:hover img { transform: scale(1.035); }
.produce-large { grid-column: 1 / 3; }
.produce-mushroom { grid-column: 3; grid-row: 1 / 3; }
.produce-dairy { grid-column: 1; grid-row: 2; }
.card-label { position: absolute; z-index: 1; right: 24px; bottom: 20px; left: 24px; }
.card-label > span { color: #e4ca8c; font-size: 9px; font-weight: 700; letter-spacing: 1px; }
.card-label h3 { margin: 6px 0 2px; font-family: var(--display); font-size: 24px; font-weight: 500; line-height: 1.2; }
.card-label p { max-width: 330px; margin: 0; color: rgb(255 255 255 / 82%); font-size: 11px; line-height: 1.55; }
.produce-dairy { background: #bbc39e; }
.produce-dairy::after { background: linear-gradient(0deg, rgb(22 34 27 / 86%), transparent 69%); }
.packed-note { position: relative; display: flex; grid-column: 2; grid-row: 2; flex-direction: column; justify-content: center; padding: 25px 30px; background: #e4b75d; }
.packed-stamp { position: absolute; top: 18px; right: 21px; display: grid; width: 38px; aspect-ratio: 1; place-items: center; border: 1px solid rgb(35 57 46 / 55%); border-radius: 50%; color: var(--forest); font-family: var(--display); font-size: 10px; line-height: 1.05; text-align: center; }
.packed-note .eyebrow { margin-bottom: 8px; color: #536047; font-size: 8px; }
.packed-note h3 { margin: 0 0 10px; color: var(--forest); font-family: var(--display); font-size: 27px; font-weight: 500; line-height: 1.06; }
.packed-note > p:not(.eyebrow) { max-width: 230px; margin: 0; color: #425142; font-size: 10px; line-height: 1.55; }
.packed-foot { margin-top: 17px; color: #586346; font-size: 8px; font-weight: 700; letter-spacing: .8px; }

.farm-share { display: grid; min-height: 690px; grid-template-columns: 1fr 1fr; color: white; background: var(--forest); }
.share-image-wrap { position: relative; min-height: 610px; overflow: hidden; }
.share-image-wrap::after { position: absolute; inset: 0; content: ''; background: linear-gradient(0deg, rgb(19 38 28 / 40%), transparent 50%); }
.share-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.image-tag { position: absolute; z-index: 1; bottom: 32px; left: 13%; color: white; font-size: 9px; font-weight: 700; letter-spacing: 1.2px; }
.share-copy { align-self: center; max-width: 590px; padding: 86px 12% 85px 12%; }
.share-copy h2 { margin-bottom: 18px; font-size: clamp(40px, 4.2vw, 56px); }
.share-copy > p:not(.eyebrow):not(.small-print) { max-width: 440px; margin-bottom: 26px; color: rgb(255 255 255 / 75%); font-size: 13px; }
.share-points { margin-bottom: 25px; }
.share-points > div { display: flex; gap: 16px; align-items: start; border-top: 1px solid rgb(255 255 255 / 20%); padding: 12px 0 10px; }
.share-points > div > span { padding-top: 1px; color: var(--gold); font-size: 9px; }
.share-points p { margin: 0; color: rgb(255 255 255 / 67%); font-size: 10px; line-height: 1.5; }
.share-points b { color: white; font-size: 11px; }
.button-outline { border: 1px solid rgb(255 255 255 / 58%); color: white; }
.button-outline:hover { color: var(--forest); background: white; }
.small-print { margin: 13px 0 0; color: rgb(255 255 255 / 52%); font-size: 9px; line-height: 1.5; }

.principles { display: grid; grid-template-columns: .8fr 1.3fr; gap: 13%; background: var(--paper); }
.principles-top h2 { font-size: clamp(35px, 3.5vw, 48px); }
.principle-list article { display: grid; grid-template-columns: 40px 1fr 20px; gap: 12px; align-items: start; border-top: 1px solid #cbd0c2; padding: 20px 0; }
.principle-list article > span { padding-top: 3px; color: var(--coral); font-size: 9px; }
.principle-list h3 { margin-bottom: 5px; font-family: var(--display); font-size: 21px; font-weight: 500; line-height: 1.25; }
.principle-list p { max-width: 450px; margin: 0; color: #687067; font-size: 11px; }
.principle-list article > b { color: var(--leaf); font-size: 16px; font-weight: 400; }

.visit { position: relative; display: grid; min-height: 505px; grid-template-columns: 1.3fr .7fr; overflow: hidden; color: white; background: var(--leaf); }
.visit-copy { align-self: center; padding: 75px 13.4%; }
.visit-copy h2 { margin-bottom: 16px; font-size: clamp(47px, 5.8vw, 76px); }
.visit-copy > p:not(.eyebrow):not(.visit-detail) { max-width: 435px; margin-bottom: 23px; color: rgb(255 255 255 / 82%); font-size: 13px; }
.visit-detail { margin: 20px 0 0; color: rgb(255 255 255 / 70%); font-size: 10px; line-height: 1.6; }
.button-whatsapp { margin-top: 27px; color: white; background: #168c56; }
.button-whatsapp:hover { background: #117448; }
.whatsapp-note { margin: 9px 0 0; color: rgb(255 255 255 / 70%); font-size: 10px; }
.visit-side { position: relative; display: grid; min-height: 505px; place-items: center; overflow: hidden; background: #657d51; }
.visit-side::before, .visit-side::after { position: absolute; inset: 10% -25%; border: 1px solid rgb(255 255 255 / 17%); border-radius: 50%; content: ''; transform: rotate(-22deg); }
.visit-side::after { inset: 23% -15%; transform: rotate(23deg); }
.visit-ring { position: absolute; width: min(29vw, 330px); aspect-ratio: 1; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; }
.visit-logo { z-index: 1; display: block; width: min(68%, 250px); aspect-ratio: 1; object-fit: contain; }
.visit-side-note { position: absolute; bottom: 34px; left: 10%; color: rgb(255 255 255 / 72%); font-size: 8px; letter-spacing: 1px; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px 25px; align-items: center; padding: 26px 7.4% 20px; color: white; background: var(--forest-deep); }
.footer-brand .brand-logo { width: 54px; height: 54px; }
.site-footer > p { margin: 0; color: rgb(255 255 255 / 56%); font-size: 10px; }
.back-top { display: inline-flex; gap: 12px; justify-self: end; align-items: center; color: rgb(255 255 255 / 75%); font-size: 10px; }
.back-top span { color: var(--gold); font-size: 16px; }
.copyright { grid-column: 1 / -1; border-top: 1px solid rgb(255 255 255 / 15%); padding-top: 14px; color: rgb(255 255 255 / 43%); font-size: 8px; letter-spacing: .6px; }

@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (max-width: 900px) {
  .site-header { height: 76px; padding: 0 6%; }
  .site-nav { gap: 20px; font-size: 11px; }
  .section-pad { padding: 88px 8%; }
  .intro { grid-template-columns: .6fr 1.7fr 1fr; gap: 4%; }
  .produce-grid { grid-template-rows: 255px 235px; }
  .card-label { right: 17px; bottom: 15px; left: 17px; }
  .share-copy { padding-right: 9%; padding-left: 9%; }
  .principles { gap: 7%; }
  .visit-copy { padding-right: 8%; padding-left: 8%; }
}
@media (max-width: 680px) {
  body { font-size: 14px; }
  .site-header { height: 68px; padding: 0 22px; }
  .brand-logo { width: 58px; height: 58px; }
  .menu-toggle { display: flex; width: 42px; height: 42px; flex-direction: column; justify-content: center; gap: 6px; align-items: center; border: 1px solid rgb(255 255 255 / 55%); color: white; background: transparent; cursor: pointer; }
  .menu-toggle span { width: 17px; height: 1px; background: currentColor; transition: transform 180ms ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .site-nav { position: absolute; top: 67px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 9px 22px 18px; color: white; background: var(--forest-deep); }
  .site-nav.is-open { display: flex; }
  .site-nav > a { border-bottom: 1px solid rgb(255 255 255 / 15%); padding: 13px 0; }
  .site-nav .nav-visit { justify-content: space-between; border: 0; padding: 13px 0 0; }
  .hero { min-height: 710px; min-height: 100svh; }
  .hero-image { object-position: 59% center; }
  .hero-shade { background: linear-gradient(90deg, rgb(19 35 27 / 76%), rgb(24 41 30 / 25%)), linear-gradient(0deg, rgb(16 33 25 / 30%), transparent 50%); }
  .hero-content { width: auto; margin: 72px 25px 0; }
  .hero h1 { font-size: clamp(56px, 15vw, 78px); }
  .hero-copy { max-width: 330px; font-size: 13px; }
  .hero-caption { bottom: 25px; left: 23px; gap: 12px; font-size: 8px; }
  .hero-index { right: 23px; bottom: 25px; }
  .section-pad { padding: 75px 25px; }
  .intro { grid-template-columns: 1fr; gap: 28px; }
  .intro-kicker { flex-direction: row; align-items: center; gap: 12px; }
  .section-number { width: 30px; }
  .intro-main { max-width: 490px; }
  h2 { font-size: 42px; }
  .intro-note { max-width: 400px; padding: 8px 0 0 20px; font-size: 17px; }
  .note-line { margin-bottom: 14px; }
  .harvest { padding-top: 72px; padding-bottom: 78px; }
  .section-heading { display: block; margin-bottom: 28px; }
  .section-aside { max-width: 300px; margin: 17px 0 0; }
  .produce-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 245px 225px 230px; gap: 10px; }
  .produce-large { grid-column: 1 / 3; grid-row: 1; }
  .produce-mushroom { grid-column: 2; grid-row: 2; }
  .produce-dairy { grid-column: 1; grid-row: 2; }
  .packed-note { grid-column: 1 / 3; grid-row: 3; padding: 24px; }
  .card-label { right: 13px; bottom: 12px; left: 13px; }
  .card-label h3 { font-size: 20px; }
  .card-label p { font-size: 9px; }
  .packed-note h3 { font-size: 26px; }
  .farm-share { grid-template-columns: 1fr; }
  .share-image-wrap { min-height: 340px; height: 60vw; max-height: 460px; }
  .image-tag { bottom: 22px; left: 25px; }
  .share-copy { max-width: none; padding: 65px 25px 70px; }
  .share-copy h2 { font-size: 45px; }
  .principles { grid-template-columns: 1fr; gap: 15px; }
  .principles-top h2 { font-size: 40px; }
  .principle-list article { grid-template-columns: 30px 1fr 17px; gap: 8px; }
  .principle-list h3 { font-size: 19px; }
  .visit { grid-template-columns: 1fr; }
  .visit-copy { padding: 70px 25px 60px; }
  .visit-side { min-height: 330px; }
  .visit-ring { width: 235px; }
  .visit-logo { width: min(62%, 220px); }
  .visit-coord { top: 14%; right: 15%; }
  .site-footer { grid-template-columns: 1fr auto; gap: 13px; padding: 24px 23px 17px; }
  .site-footer > p { grid-column: 1 / -1; grid-row: 2; }
  .back-top { grid-column: 2; grid-row: 1; }
  .copyright { grid-row: 3; }
}