:root {
  --ink: #173f38;
  --ink-deep: #102f2a;
  --gold: #a98943;
  --gold-bright: #d9b767;
  --cream: #f7f3e9;
  --paper: #fffdf8;
  --muted: #65756e;
  --line: rgba(23, 63, 56, .16);
  --shadow: 0 22px 60px rgba(18, 46, 40, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink-deep); background: var(--paper); font-family: "IBM Plex Sans Thai", sans-serif; font-size: 16px; line-height: 1.65; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .7rem 1rem; background: var(--ink); color: white; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.site-header { position: fixed; z-index: 50; inset: 0 0 auto 0; height: 86px; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 2rem; padding: 0 clamp(1.2rem, 4vw, 4.5rem); background: rgba(255,253,248,.92); border-bottom: 1px solid rgba(23,63,56,.1); backdrop-filter: blur(14px); }
.brand img { width: 160px; max-height: 72px; object-fit: contain; mix-blend-mode: multiply; }
.site-nav { display: flex; justify-content: center; gap: clamp(1rem, 2.4vw, 2.5rem); font-size: .9rem; }
.site-nav a { position: relative; padding: 2rem 0 1.65rem; color: #3e554e; }
.site-nav a::after { content: ""; position: absolute; height: 2px; inset: auto 50% 1.3rem; background: var(--gold); transition: inset .25s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.active::after { inset-inline: 0; }
.header-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 46px; border-radius: 999px; font-weight: 500; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.header-cta { padding: 0 1.2rem; background: var(--ink); color: white; font-size: .88rem; }
.header-cta:hover, .button:hover { transform: translateY(-2px); }
.menu-toggle { display: none; border: 0; background: transparent; }
.hero { position: relative; min-height: min(850px, 100svh); padding: 150px clamp(1.4rem, 7vw, 8rem) 80px; display: grid; grid-template-columns: minmax(0, 680px) 1fr; align-content: center; overflow: hidden; color: white; background: #173f38; }
.hero-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 76% 35%, rgba(217,183,103,.18), transparent 28%), linear-gradient(105deg, rgba(16,47,42,.99) 0%, rgba(16,47,42,.9) 42%, rgba(16,47,42,.2) 73%, rgba(16,47,42,.52) 100%), url("assets/optimized/farm-aerial-1672.webp") center / cover no-repeat; }
.hero-backdrop::before { content: ""; position: absolute; width: 44vw; aspect-ratio: 1; right: 7vw; top: 20%; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.035), 0 0 0 140px rgba(255,255,255,.025); }
.hero-content { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 1.1rem; text-transform: uppercase; letter-spacing: .2em; font-size: .76rem; color: var(--gold-bright); }
h1 { margin: 0; font-family: "Prata", "Times New Roman", serif; font-size: clamp(3.2rem, 6vw, 6.8rem); line-height: 1.08; font-weight: 400; letter-spacing: -.04em; }
h1 em { color: var(--gold-bright); font-style: italic; font-family: "IBM Plex Sans Thai", sans-serif; font-size: .68em; font-weight: 300; letter-spacing: -.025em; }
.hero-lead { max-width: 600px; margin: 2rem 0 0; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.35vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.button { padding: .78rem 1.3rem; border: 1px solid rgba(255,255,255,.36); }
.button-primary { background: var(--gold-bright); color: var(--ink-deep); border-color: var(--gold-bright); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.button-ghost { color: white; }
.hero-note { position: absolute; z-index: 2; right: clamp(2rem, 7vw, 8rem); bottom: 9rem; width: 270px; padding: 1rem 0 1rem 4.5rem; border-top: 1px solid rgba(255,255,255,.4); }
.hero-note p { margin: 0; font-family: "Prata", serif; font-size: .9rem; line-height: 1.7; color: rgba(255,255,255,.78); }
.note-mark { position: absolute; left: 0; top: .7rem; font-family: "Prata", serif; font-size: 3rem; color: var(--gold-bright); }
.hero-index { position: absolute; right: 2rem; top: 45%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .7rem; font-family: "Prata", serif; }
.visual-note { position: absolute; z-index: 2; right: 2rem; bottom: 1rem; padding: .25rem .55rem; background: rgba(16,47,42,.68); color: rgba(255,255,255,.72); font-size: .7rem; letter-spacing: .05em; }
.hero-index i { display: block; width: 1px; height: 70px; background: rgba(255,255,255,.4); }
.principles { display: grid; grid-template-columns: .9fr repeat(4, 1fr); gap: 0; padding: 0 clamp(1.4rem, 7vw, 8rem); background: var(--cream); border-bottom: 1px solid var(--line); }
.principles > * { margin: 0; padding: 1.7rem 1.5rem; border-right: 1px solid var(--line); }
.principles > p { padding-left: 0; align-self: center; color: var(--gold); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }
.principles div { display: grid; grid-template-columns: auto 1fr; gap: 0 .8rem; }
.principles span { grid-row: span 2; color: var(--gold); font-family: "Prata", serif; }
.principles strong { font-weight: 500; }
.principles small { color: var(--muted); }
.section { padding: clamp(5rem, 9vw, 9rem) clamp(1.4rem, 7vw, 8rem); }
.section-heading { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.5rem 6rem; align-items: end; }
.section-heading .eyebrow { grid-column: 1 / -1; }
.section-heading > p:last-child { margin: 0 0 .75rem; color: var(--muted); font-size: 1.05rem; }
.eyebrow.dark { color: var(--gold); }
.eyebrow.light { color: var(--gold-bright); }
h2 { margin: 0; font-family: "Prata", "Times New Roman", serif; font-size: clamp(2.4rem, 4.6vw, 5rem); line-height: 1.17; font-weight: 400; letter-spacing: -.035em; }
h2 em { color: var(--gold); font-family: "IBM Plex Sans Thai", sans-serif; font-size: .73em; font-weight: 300; }
.evidence { background: var(--paper); }
.evidence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 4rem; background: var(--line); border: 1px solid var(--line); }
.evidence-card { position: relative; min-height: 350px; padding: 2rem 1.6rem; background: var(--paper); overflow: hidden; }
.evidence-card::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: var(--accent); }
.accent-water { --accent: #2d97c5; }.accent-leaf { --accent: #58a842; }.accent-gold { --accent: #d3a20d; }.accent-coral { --accent: #dc6122; }
.card-no { color: var(--gold); font-family: "Prata", serif; }
.status { position: absolute; right: 1rem; top: 1rem; padding: .28rem .6rem; border-radius: 999px; background: #f1eee5; color: #6e6a61; font-size: .72rem; }
.evidence-card h3 { margin: 5rem 0 .8rem; font-family: "Prata", serif; font-size: 1.55rem; font-weight: 400; }
.evidence-card p { color: var(--muted); }
.evidence-card small { position: absolute; bottom: 1.8rem; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.evidence-note { display: grid; grid-template-columns: .4fr 1fr; gap: 2rem; margin: 2rem 0 0 auto; max-width: 760px; padding: 1.4rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.evidence-note strong { color: var(--gold); }.evidence-note p { margin: 0; }
.story { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 760px; background: var(--cream); }
.image-frame { position: relative; overflow: hidden; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; }
.image-frame[data-label]::before { content: attr(data-label); position: absolute; z-index: 4; right: .8rem; top: .8rem; padding: .25rem .55rem; background: rgba(16,47,42,.72); color: rgba(255,255,255,.82); font-size: .7rem; letter-spacing: .04em; }
.story-image { min-height: 680px; }
.image-label { position: absolute; left: 1.5rem; bottom: 1.5rem; padding: .55rem .8rem; background: rgba(255,253,248,.9); color: var(--ink); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.story-copy { align-self: center; padding: clamp(4rem, 8vw, 8rem); }
.story-copy .lead { margin: 1.7rem 0 2.6rem; color: var(--muted); font-size: 1.1rem; }
.story-list > div { display: grid; grid-template-columns: 3.2rem 1fr; padding: 1.2rem 0; border-top: 1px solid var(--line); }
.story-list b { color: var(--gold); font-family: "Prata", serif; font-weight: 400; }
.story-list span { display: grid; gap: .25rem; }.story-list strong { font-weight: 500; }.story-list small { color: var(--muted); font-size: .88rem; }
.science { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(3rem, 7vw, 8rem); background: var(--ink-deep); color: white; }
.science-copy > p:not(.eyebrow) { color: rgba(255,255,255,.72); max-width: 720px; font-size: 1.05rem; }
.science h2 em { color: var(--gold-bright); }
.science-topics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.18); }
.science-topics article { padding: 1.5rem 1.2rem 0 0; }
.science-topics span { color: var(--gold-bright); font-size: .8rem; }
.science-topics h3 { min-height: 3rem; font-family: "Prata", serif; font-size: 1rem; font-weight: 400; }
.science-topics p { color: rgba(255,255,255,.6); font-size: .86rem; }
.science-image { min-height: 610px; border-radius: 50% 50% 0 0; }
.dark-frame::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(16,47,42,.88)); }
.science-image blockquote { position: absolute; z-index: 2; inset: auto 2rem 2rem; margin: 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.45); font-size: 1.1rem; }
.sustainability { display: grid; grid-template-columns: 1fr .72fr; gap: 4rem 8rem; align-items: center; background: #f6f8f2; }
.sustain-intro > p:last-child { max-width: 760px; color: var(--muted); }
.cycle { position: relative; justify-self: center; width: min(34vw, 430px); aspect-ratio: 1; border: 1px solid rgba(23,63,56,.2); border-radius: 50%; }
.cycle::before, .cycle::after { content: ""; position: absolute; inset: 14%; border: 1px solid rgba(23,63,56,.15); border-radius: 50%; }.cycle::after { inset: 30%; }
.cycle-center { position: absolute; inset: 34%; display: grid; place-content: center; text-align: center; z-index: 2; }.cycle-center strong { font-family: "Prata", serif; font-weight: 400; }.cycle-center span { color: var(--gold); }
.cycle-item { position: absolute; z-index: 2; width: 90px; height: 90px; display: grid; place-content: center; text-align: center; border-radius: 50%; color: white; box-shadow: var(--shadow); }
.cycle-item b { font: 400 .8rem "Prata", serif; opacity: .75; }.cycle-item span { font-size: .85rem; }
.item-1 { top: -20px; left: calc(50% - 45px); background: #2d97c5; }.item-2 { right: -20px; top: calc(50% - 45px); background: #58a842; }.item-3 { bottom: -20px; left: calc(50% - 45px); background: #d3a20d; }.item-4 { left: -20px; top: calc(50% - 45px); background: #dc6122; }
.commitments { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.commitments article { position: relative; padding: 2rem 2rem 0 4.5rem; border-right: 1px solid var(--line); }.commitments article:last-child { border-right: 0; }
.commitments span { position: absolute; left: 0; top: 1.7rem; display: grid; width: 3rem; height: 3rem; place-content: center; border: 1px solid var(--gold); border-radius: 50%; font-family: "Prata", serif; color: var(--gold); }
.commitments h3 { font-family: "Prata", serif; font-weight: 400; }.commitments p { color: var(--muted); }
.technology { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 740px; background: var(--ink); color: white; }
.tech-visual { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50%, rgba(217,183,103,.13), transparent 55%), #0d2925; }
.tech-rings { position: absolute; width: 600px; aspect-ratio: 1; }.tech-rings i { position: absolute; inset: 0; border: 1px solid rgba(217,183,103,.18); border-radius: 50%; }.tech-rings i:nth-child(2) { inset: 15%; }.tech-rings i:nth-child(3) { inset: 30%; }
.tech-screen { position: relative; z-index: 2; width: min(84%, 620px); padding: 2rem; border: 1px solid rgba(217,183,103,.42); background: rgba(16,47,42,.78); box-shadow: 0 30px 80px rgba(0,0,0,.35); backdrop-filter: blur(10px); transform: perspective(900px) rotateY(5deg) rotateX(2deg); }
.tech-screen > span { color: var(--gold-bright); font-size: .75rem; letter-spacing: .18em; }.tech-screen > strong { display: block; margin: 2rem 0 3rem; font-family: "Prata", serif; font-size: clamp(1.15rem, 2vw, 2rem); font-weight: 400; }.tech-screen > strong i { color: var(--gold-bright); font-style: normal; }.tech-screen > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }.tech-screen b { padding: .75rem; border-top: 1px solid rgba(255,255,255,.22); font-size: .78rem; font-weight: 400; }
.tech-copy { align-self: center; padding: clamp(4rem, 8vw, 8rem); }.tech-copy h2 em { color: var(--gold-bright); }.tech-copy > p:not(.eyebrow) { color: rgba(255,255,255,.68); }
.tech-copy ul { margin: 2rem 0 0; padding: 0; list-style: none; }.tech-copy li { display: grid; grid-template-columns: 2.5rem 1fr; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.17); color: rgba(255,255,255,.8); }.tech-copy li span { color: var(--gold-bright); font-family: "Prata", serif; }
.partners { display: grid; grid-template-columns: .8fr 1.2fr; gap: 5rem; background: var(--paper); }.partners-copy > p { max-width: 740px; margin-top: 4rem; color: var(--muted); font-size: 1.05rem; }
.partner-path { display: flex; align-items: center; gap: 1rem; margin: 3rem 0; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.partner-path span { flex: 1; display: grid; gap: .4rem; }.partner-path b { color: var(--gold); font: 400 .8rem "Prata", serif; }.partner-path i { color: var(--gold); font-style: normal; }
.text-link { display: inline-flex; gap: .7rem; align-items: center; padding-bottom: .4rem; border-bottom: 1px solid var(--gold); color: var(--gold); }
.shrimp-feature { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 570px; background: #dce8df; }.shrimp-image { min-height: 570px; }.shrimp-quote { display: grid; place-content: center; padding: 4rem; background: var(--cream); }.shrimp-quote p { margin: 0; font-family: "Prata", serif; font-size: clamp(2rem, 3.5vw, 4rem); line-height: 1.35; }.shrimp-quote small { margin-top: 2rem; color: var(--gold); letter-spacing: .08em; text-transform: uppercase; }
.faq { display: grid; grid-template-columns: .78fr 1.22fr; gap: 5rem; background: var(--cream); }.faq-list details { border-top: 1px solid var(--line); }.faq-list details:last-child { border-bottom: 1px solid var(--line); }.faq-list summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; cursor: pointer; font-size: 1.05rem; list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary span { color: var(--gold); font-size: 1.3rem; transition: transform .2s; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { margin: 0; padding: 0 3rem 1.5rem 0; color: var(--muted); }
.contact { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; padding: clamp(5rem, 9vw, 9rem) clamp(1.4rem, 7vw, 8rem); background: var(--ink-deep); color: white; }.contact h2 em { color: var(--gold-bright); }.contact-copy > p:last-child { color: rgba(255,255,255,.65); max-width: 620px; }
.contact-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem; align-self: center; }.field { display: grid; gap: .5rem; }.field.full, .form-action.full { grid-column: 1 / -1; }.field label { color: rgba(255,255,255,.76); font-size: .88rem; }.field input, .field select, .field textarea { width: 100%; padding: .9rem 1rem; color: white; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22); border-radius: 0; outline: none; }.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.4); }.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-bright); box-shadow: 0 0 0 3px rgba(217,183,103,.15); }.field select option { color: var(--ink); }.button-gold { border: 0; background: var(--gold-bright); color: var(--ink-deep); padding-inline: 1.4rem; }.form-action { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }.form-status { margin: 0; color: var(--gold-bright); font-size: .9rem; }
footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; padding: 2rem clamp(1.4rem, 7vw, 8rem); background: var(--paper); border-top: 1px solid var(--line); }.footer-brand { display: flex; align-items: center; gap: 1rem; }.footer-brand img { width: 110px; mix-blend-mode: multiply; }.footer-brand p { margin: 0; color: var(--gold); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }footer nav { display: flex; gap: 1.3rem; font-size: .82rem; }.footer-note { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; color: var(--muted); font-size: .8rem; }.footer-note a { display: grid; width: 42px; height: 42px; place-content: center; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); }
@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; height: 76px; }
  .header-cta { display: none; }
  .menu-toggle { display: grid; gap: 5px; width: 46px; height: 46px; place-content: center; }
  .menu-toggle span:not(.sr-only) { display: block; width: 22px; height: 2px; background: var(--ink); }
  .site-nav { position: fixed; inset: 76px 0 auto; display: none; flex-direction: column; gap: 0; padding: .7rem 1.4rem 1.3rem; background: var(--paper); box-shadow: var(--shadow); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .75rem 0; }
  .site-nav a::after { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 125px; }
  .hero-note { right: 1.5rem; bottom: 3rem; }
  .hero-index { display: none; }
  .principles { grid-template-columns: repeat(2, 1fr); padding-inline: 1.4rem; }
  .principles > p { grid-column: 1 / -1; border-right: 0; }
  .section-heading, .story, .science, .sustainability, .technology, .partners, .shrimp-feature, .faq, .contact { grid-template-columns: 1fr; }
  .evidence-grid { grid-template-columns: repeat(2, 1fr); }
  .story-copy, .tech-copy { padding: 4rem 1.8rem; }
  .story-image, .science-image, .shrimp-image { min-height: 520px; }
  .science-image { width: min(100%, 620px); justify-self: center; }
  .cycle { width: min(76vw, 420px); margin-block: 2rem; }
  .partners-copy > p { margin-top: 0; }
  .partner-path { flex-wrap: wrap; }.partner-path span { flex-basis: 40%; }.partner-path i { display: none; }
  .contact-form { max-width: 760px; }
  footer { grid-template-columns: 1fr; } footer nav { flex-wrap: wrap; } .footer-note { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .site-header { padding-inline: 1rem; }
  .brand img { width: 128px; }
  .hero { min-height: 760px; padding: 118px 1.25rem 190px; }
  .hero-backdrop::before { width: 85vw; right: -20vw; top: 44%; }
  h1 { font-size: clamp(2.75rem, 14vw, 4.3rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-note { left: 1.25rem; right: 1.25rem; bottom: 2rem; width: auto; }
  .principles { grid-template-columns: 1fr; }
  .principles > p { grid-column: auto; }
  .principles > * { border-right: 0; border-bottom: 1px solid var(--line); }
  .section { padding: 4.5rem 1.25rem; }
  .section-heading { gap: 1.2rem; }
  .evidence-grid { grid-template-columns: 1fr; margin-top: 2.5rem; }
  .evidence-card { min-height: 310px; }
  .evidence-note { grid-template-columns: 1fr; gap: .5rem; }
  .story-image, .science-image, .shrimp-image { min-height: 410px; }
  .science { padding-inline: 1.25rem; }
  .science-topics, .commitments { grid-template-columns: 1fr; }
  .science-topics article, .commitments article { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .commitments article { border-color: var(--line); }
  .cycle-item { width: 72px; height: 72px; }.item-1 { left: calc(50% - 36px); }.item-2 { top: calc(50% - 36px); }.item-3 { left: calc(50% - 36px); }.item-4 { top: calc(50% - 36px); }
  .tech-visual { min-height: 500px; }.tech-screen { padding: 1.25rem; }.tech-screen > div { grid-template-columns: 1fr; }.tech-screen > strong { margin-bottom: 1.5rem; }.tech-rings { width: 460px; }
  .partner-path { display: grid; }.partner-path span { grid-template-columns: 2rem 1fr; }
  .shrimp-quote { padding: 3rem 1.25rem; }
  .contact { padding: 4.5rem 1.25rem; }.contact-form { grid-template-columns: 1fr; }.field { grid-column: 1 / -1; }
  footer { padding: 2rem 1.25rem; } footer nav { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }