.hero { position: relative; isolation: isolate; overflow: hidden; padding: 3.5rem 0 0; background: linear-gradient(118deg, #f7f9f4 0%, #f3f6ed 50%, #edf2e8 100%); }
.hero-layout { position: relative; z-index: 2; display: grid; min-height: 570px; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 4rem; padding-bottom: 4.2rem; }
.hero-copy { padding-block: 1.2rem; }
.hero-copy .eyebrow { margin-bottom: 1.8rem; }
.hero h1 { max-width: 660px; margin-bottom: 1.45rem; font-size: clamp(3.5rem, 6.2vw, 5.65rem); }
.hero-lede { max-width: 500px; margin-bottom: 2rem; font-size: 1rem; line-height: 1.85; }
.button-row { display: flex; align-items: center; gap: 1.7rem; }
.hero-note { display: flex; align-items: center; gap: .85rem; margin-top: 3.7rem; }
.note-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--gold-300); border-radius: 50%; color: var(--gold-600); font-size: 1.2rem; }
.hero-note strong, .hero-note small { display: block; }
.hero-note strong { color: var(--green-900); font-size: .68rem; }
.hero-note small { margin-top: .18rem; color: var(--muted); font-size: .62rem; }
.hero-art { position: relative; width: min(100%, 540px); justify-self: end; padding: 1.4rem 1rem 1rem 0; }
.hero-art::before { position: absolute; z-index: 0; inset: 2rem 0 .2rem 1.8rem; border: 1px solid rgba(165,240,189,.5); border-radius: 26px; background: rgba(165,240,189,.07); content: ''; }
.hero-image-frame { position: relative; z-index: 1; overflow: hidden; aspect-ratio: .94; border: 4px solid rgba(255,255,255,.92); border-radius: 22px; background: #e1e9db; box-shadow: 0 28px 80px rgba(0,20,10,.32); }
.hero-image-frame::before { position: absolute; z-index: 1; inset: 38% 0 0; background: linear-gradient(180deg,transparent,rgba(4,33,19,.78)); content: ''; pointer-events: none; }
.hero-image-frame::after { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.55); border-radius: inherit; content: ''; pointer-events: none; }
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s ease; }
.hero-image-frame:hover img { transform: scale(1.035); }
.hero-art-kicker { position: absolute; z-index: 3; top: 2rem; left: -.9rem; display: inline-flex; align-items: center; gap: .55rem; padding: .7rem .9rem; border: 1px solid rgba(255,255,255,.58); color: var(--green-950); background: #fff; box-shadow: 0 10px 28px rgba(0,20,10,.18); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hero-art-kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-700); box-shadow: 0 0 0 4px var(--green-100); }
.image-label { position: absolute; z-index: 2; right: 1.2rem; bottom: 1.1rem; left: 1.2rem; display: flex; align-items: center; gap: .75rem; color: #fff; }
.image-label > i { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255,255,255,.56); border-radius: 50%; color: var(--gold-300); font-size: 1rem; font-style: normal; }
.image-label strong, .image-label small { display: block; }
.image-label strong { font-family: var(--display-font); font-size: 1.15rem; font-weight: 500; }
.image-label small { margin-top: .1rem; color: rgba(255,255,255,.78); font-size: .59rem; letter-spacing: .06em; }
.hero-art-seal { position: absolute; z-index: 2; top: 17%; right: -1.3rem; display: flex; width: 92px; height: 92px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; color: var(--green-950); background: var(--gold-300); box-shadow: 0 12px 34px rgba(0,20,10,.2); font-size: .43rem; font-weight: 700; letter-spacing: .12em; transform: rotate(9deg); }
.hero-art-seal b { color: var(--green-800); font-size: 1.15rem; font-weight: 500; line-height: 1.2; }
.hero-bottom { display: flex; min-height: 55px; align-items: center; gap: 1.2rem; border-top: 1px solid rgba(37,76,54,.13); color: #6c766d; font-size: .61rem; }
.hero-bottom a { color: var(--green-800); }
.hero-bottom a span { margin-left: .35rem; color: var(--gold-600); }
.hero-bottom-rule { flex: 1; height: 1px; background: rgba(37,76,54,.13); }
.intro-section { background: #fff; }
.intro-grid { display: grid; grid-template-columns: .6fr 1.6fr 1fr; align-items: start; gap: 2.8rem; }
.section-index { display: flex; align-items: center; gap: .65rem; padding-top: .45rem; color: var(--muted); font-size: .62rem; }
.section-index > span:first-child { color: var(--gold-600); font-weight: 700; }
.index-rule { width: 30px; height: 1px; background: var(--gold-300); }
.intro-heading h2 { max-width: 530px; margin: 0; }
.intro-body { padding-top: 2.3rem; }
.intro-body p { margin-bottom: 1.3rem; font-size: .87rem; line-height: 1.85; }
.category-section { padding-block: var(--space-section); background: var(--paper); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.6rem; }
.section-heading h2 { margin: 0; }
.section-heading > .text-link { margin-bottom: .5rem; }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.category-card { position: relative; isolation: isolate; display: flex; min-height: 290px; flex-direction: column; overflow: hidden; padding: 1.5rem; border: 1px solid rgba(52,87,57,.1); background-color: #344b36; background-position: center; background-size: cover; color: #fff; transition: transform .3s var(--ease), box-shadow .3s ease; }
.category-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-soft); }
.category-card::before { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg,rgba(15,35,21,.28),rgba(15,35,21,.12) 35%,rgba(15,35,21,.82)); content: ''; }
.category-card::after { position: absolute; z-index: -1; right: -40px; bottom: -80px; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; content: ''; }
.category-mango { background-image: url('/assets/images/home/mango.webp'); }
.category-spice { background-image: url('/assets/images/home/cinomon.webp'); }
.category-coconut { background-image: url('/assets/images/home/coconet.webp'); }
.category-greens { background-image: url('/assets/images/home/all-plant.webp'); }
.category-number { position: relative; z-index: 1; color: rgba(255,255,255,.88); font-size: .55rem; font-weight: 700; letter-spacing: .13em; }
.category-card h3 { position: relative; z-index: 1; margin-bottom: .55rem; color: #fff; font-family: var(--display-font); font-size: 1.45rem; font-weight: 500; }
.category-card p { position: relative; z-index: 1; max-width: 230px; margin-bottom: 0; color: rgba(255,255,255,.88); font-size: .72rem; line-height: 1.65; }
.card-arrow { position: absolute; right: 1.25rem; bottom: 1.2rem; color: var(--green-800); font-size: 1.1rem; }
.category-card .card-arrow { z-index: 1; color: #fff; }
.feature-band { position: relative; overflow: hidden; color: white; background: var(--green-800); }
.feature-band::before { position: absolute; top: -140px; right: -80px; width: 580px; height: 580px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; content: ''; }
.feature-band::after { position: absolute; top: -80px; right: -20px; width: 460px; height: 460px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; content: ''; }
.feature-layout { position: relative; z-index: 1; display: grid; min-height: 395px; grid-template-columns: 1fr 2fr .8fr; align-items: center; gap: 4rem; padding-block: 4.5rem; }
.feature-mark { position: relative; display: grid; width: min(100%, 225px); aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; color: white; font-family: var(--display-font); font-size: 9rem; line-height: 1; }
.feature-mark::before { position: absolute; inset: 15px; border: 1px solid rgba(218,201,159,.62); border-radius: 50%; content: ''; }
.feature-mark i { position: absolute; top: 18px; right: 30px; color: var(--gold-300); font-size: 1.7rem; font-style: normal; }
.feature-copy .eyebrow { color: var(--gold-300); }
.feature-copy h2 { max-width: 530px; margin-bottom: 1rem; color: white; }
.feature-copy h2 em { color: #d4dfcf; }
.feature-copy p:not(.eyebrow) { max-width: 510px; margin-bottom: 1.7rem; color: rgba(255,255,255,.73); font-size: .87rem; line-height: 1.8; }
.feature-aside { display: flex; align-items: center; gap: .75rem; justify-self: end; color: rgba(255,255,255,.78); font-family: var(--display-font); font-size: .9rem; font-style: italic; line-height: 1.45; }
.aside-number { align-self: flex-start; color: var(--gold-300); font-family: var(--body-font); font-size: .65rem; font-style: normal; font-weight: 700; }
.aside-line { width: 27px; height: 1px; background: var(--gold-300); }
.approach-section { background: #fff; }
.approach-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 7rem; }
.approach-left h2 { margin-bottom: 1.1rem; }
.approach-left > p:not(.eyebrow) { max-width: 430px; margin-bottom: 1.4rem; font-size: .85rem; line-height: 1.85; }
.approach-steps { border-top: 1px solid var(--line); }
.approach-step { display: grid; grid-template-columns: 40px 1fr 24px; align-items: start; gap: .8rem; padding: 1.35rem .2rem; border-bottom: 1px solid var(--line); }
.approach-step > span:first-child { padding-top: .18rem; color: var(--gold-600); font-size: .65rem; font-weight: 700; }
.approach-step h3 { margin-bottom: .35rem; font-size: .92rem; }
.approach-step p { max-width: 420px; margin-bottom: 0; font-size: .74rem; line-height: 1.65; }
.step-mark { color: var(--green-700); font-size: .85rem; transition: transform .2s ease; }
.approach-step:hover .step-mark { transform: translate(2px,-2px); }
.home-cta { padding-block: 2.2rem; background: var(--green-100); }
.home-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.home-cta .eyebrow { margin-bottom: .45rem; }
.home-cta h2 { margin-bottom: 0; font-size: clamp(1.8rem,3vw,2.45rem); }
.cta-spark { color: var(--gold-600); font-size: 2.2rem; }
.focus-section { position: relative; overflow: hidden; background: linear-gradient(130deg, #edf8ef, #f8fcf9); }
.focus-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.4rem; }
.focus-heading h2 { margin-bottom: 0; }
.focus-heading > p { max-width: 390px; margin-bottom: .25rem; font-size: .84rem; }
.focus-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.focus-card { position: relative; display: flex; min-height: 255px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 1.4rem; border: 1px solid var(--line); background: rgba(255,255,255,.88); box-shadow: 0 12px 32px rgba(8,45,28,.05); transition: transform .3s var(--ease), border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.focus-card::after { position: absolute; right: -48px; bottom: -78px; width: 170px; height: 170px; border: 1px solid rgba(8,116,61,.16); border-radius: 50%; content: ''; transition: transform .45s var(--ease); }
.focus-card:hover, .focus-card:focus-visible { transform: translateY(-5px); border-color: var(--green-500); background: #fff; box-shadow: var(--shadow-soft); }
.focus-card:hover::after, .focus-card:focus-visible::after { transform: scale(1.16); }
.focus-card-top, .focus-card-copy, .focus-card-link { position: relative; z-index: 1; }
.focus-card-top { display: flex; align-items: center; justify-content: space-between; color: var(--green-700); font-size: .58rem; font-weight: 700; letter-spacing: .12em; }
.focus-card-top i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--green-200); border-radius: 50%; color: var(--green-700); background: var(--green-100); font-size: 1.2rem; font-style: normal; }
.focus-card-copy { display: flex; flex-direction: column; gap: .55rem; margin-block: 1.5rem; }
.focus-card-copy strong { color: var(--green-950); font-family: var(--display-font); font-size: clamp(1.25rem,2vw,1.65rem); font-weight: 500; }
.focus-card-copy > span { max-width: 290px; color: var(--muted); font-size: .75rem; line-height: 1.7; }
.focus-card-link { display: flex; align-items: center; justify-content: space-between; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--green-800); font-size: .67rem; font-weight: 700; }
.focus-card-link b { color: var(--gold-600); font-size: .95rem; font-weight: 400; transition: transform .25s var(--ease); }
.focus-card:hover .focus-card-link b, .focus-card:focus-visible .focus-card-link b { transform: translate(3px,-3px); }
@media (max-width: 980px) {
  .hero-layout { min-height: 520px; gap: 2rem; }
  .hero h1 { font-size: clamp(3.2rem, 7vw, 4.8rem); }
  .intro-grid { grid-template-columns: .4fr 1.4fr 1fr; gap: 1.3rem; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .category-card { min-height: 250px; }
  .feature-layout { grid-template-columns: .75fr 1.8fr; gap: 2rem; }
  .feature-mark { width: 180px; font-size: 7rem; }
  .feature-aside { display: none; }
  .approach-grid { gap: 3rem; }
  .focus-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .focus-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hero-layout {
    min-height: 0;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 1.3rem;
    padding-bottom: 2rem;
  }
  .hero-art {
    width: min(88%, 390px);
    justify-self: center;
  }
}
@media (max-width: 640px) {
  .hero { padding-top: 1.8rem; }
  .hero-copy { padding-top: .6rem; }
  .hero-copy .eyebrow { margin-bottom: 1.25rem; font-size: .61rem; }
  .hero h1 { margin-bottom: 1rem; font-size: clamp(3rem, 13vw, 4.2rem); }
  .hero-lede { margin-bottom: 1.4rem; font-size: .88rem; }
  .button-row { flex-wrap: wrap; gap: 1.2rem; }
  .hero-note { margin-top: 1.7rem; }
  .hero-art { padding: .5rem .3rem 1.2rem; }
  .hero-art::before { inset: 1.1rem -.15rem .5rem 1.05rem; border-radius: 20px; }
  .hero-image-frame { aspect-ratio: .94; border-radius: 18px; }
  .hero-art-kicker { top: 1.5rem; left: -.45rem; padding: .58rem .7rem; font-size: .49rem; }
  .hero-art-seal { top: 18%; right: -.6rem; width: 72px; height: 72px; font-size: .35rem; }
  .image-label { right: .8rem; bottom: .85rem; left: .8rem; gap: .55rem; }
  .image-label > i { width: 32px; height: 32px; }
  .image-label strong { font-size: 1rem; }
  .image-label small { font-size: .52rem; }
  .hero-bottom { gap: .7rem; font-size: .53rem; }
  .hero-bottom > span:first-child { max-width: 52%; }
  .hero-bottom-rule { display: none; }
  .intro-grid { grid-template-columns: 1fr; gap: .9rem; }
  .section-index { margin-bottom: .2rem; }
  .intro-body { padding-top: 0; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .category-grid { gap: .65rem; }
  .category-card { min-height: 230px; padding: 1rem; }
  .category-number { font-size: .47rem; }
  .category-card h3 { font-size: 1.2rem; }
  .category-card p { font-size: .65rem; }
  .card-arrow { right: .8rem; bottom: .65rem; }
  .feature-layout { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 3.5rem; }
  .feature-mark { display: none; }
  .approach-grid { grid-template-columns: 1fr; gap: 2.3rem; }
  .approach-step { grid-template-columns: 30px 1fr 20px; }
  .home-cta-inner { align-items: flex-start; flex-wrap: wrap; gap: 1rem; }
  .home-cta .cta-spark { display: none; }
  .home-cta-inner > div { width: 100%; }
  .focus-heading { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .focus-grid { grid-template-columns: 1fr; gap: .7rem; }
  .focus-card:last-child { grid-column: auto; }
  .focus-card { min-height: 220px; padding: 1.15rem; }
}

.feature-mark img { width: 70%; height: 70%; object-fit: contain; }