/* Self-hosted (not loaded from Google's CDN — see CHANGELOG.md for why): only the "latin"
   unicode-range subset is kept, matching what a Google-served version would actually send an
   English-language visitor's browser anyway. DM Sans and Playfair Display (normal) are variable
   fonts — several font-weight declarations below intentionally point at the same file. */
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-mono-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/dm-sans-variable.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/dm-sans-variable.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/dm-sans-variable.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/dm-sans-variable.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/playfair-display-italic-variable.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/playfair-display-normal-variable.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/playfair-display-normal-variable.woff2') format('woff2'); }

:root {
  --ink: #153c31;
  --forest: #0b2b22;
  --leaf: #32654c;
  --lime: #d9eb9c;
  --cream: #f7f4ea;
  --sand: #e8dfcb;
  --rust: #d95c31;
  --rust-dark: #b8481f;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --container: 1240px;
  --edge: max(1.5rem, calc((100vw - var(--container)) / 2));
  --header-h: 76px;
  --header-h-mobile: 64px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 26px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* overflow-x:hidden on both html and body, not just body: with only body set, an ancestor
   walk like scrollIntoView({inline:'start'}) on a nested carousel can occasionally scroll
   the *document* horizontally instead of (or as well as) the intended inner scroll
   container, since html's own overflow-x is otherwise left at its default "visible". */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
body { margin: 0; background: radial-gradient(ellipse at 83% -10%, rgba(206,231,219,.85), transparent 37%), radial-gradient(ellipse at 8% 38%, rgba(244,213,198,.36), transparent 33%), var(--cream); color: var(--ink); font-family: var(--sans); overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; -webkit-appearance: none; appearance: none; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .035; 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='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; background: rgba(21,60,49,.08); }
.scroll-progress span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--leaf), var(--rust)); transition: width .1s linear; }
.section { position: relative; }
.section-padded { padding: clamp(3.25rem, 6.5vw, 5.75rem) var(--edge); }
.sr-only, .hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.site-header { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--edge); border-bottom: 1px solid rgba(255,255,255,.82); position: fixed; z-index: 20; top: 0; left: 0; right: 0; background: linear-gradient(115deg, rgba(255,255,255,.93), rgba(234,246,235,.75) 52%, rgba(247,224,211,.6)); box-shadow: 0 10px 28px -10px rgba(11,43,34,.18), inset 0 1px 0 rgba(255,255,255,.85); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font: 700 .96rem/1 var(--sans); letter-spacing: .07em; }
.brand > span:last-child > span { display: block; color: var(--leaf); letter-spacing: .14em; font-size: .58rem; margin-top: .16rem; }
.brand-copy { opacity: .7; letter-spacing: 0; }
.brand-mark { width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font: 600 1.3rem/1 var(--serif); color: var(--rust); box-shadow: 0 3px 10px rgba(217,92,49,.24); }
.site-menu { display: flex; gap: 2rem; align-items: center; font: 500 .76rem var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.site-menu a { position: relative; padding: .4rem 0; }
.site-menu a::after { content: ""; position: absolute; height: 1px; left: 0; right: 0; bottom: 0; background: var(--rust); transform: scaleX(0); transform-origin: right; transition: transform .3s ease; }
.site-menu a:hover::after, .site-menu a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.site-menu a.active { color: var(--rust); }
.site-menu a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-item { position: relative; display: flex; align-items: center; }
/* .submenu-wrap starts flush (top:100%) against the trigger and its own box is sized by
   the submenu card inside it, so the pointer stays over a *descendant* of .nav-item the
   whole way from the "Products" link to the dropdown — including through the visual gap,
   which lives here as padding, not as empty space outside the hoverable area. Splitting the
   hover/position wrapper from the visible card (rather than putting the gap on .submenu
   itself) is what stops the dropdown collapsing before the pointer reaches it. */
.submenu-wrap { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s; z-index: 25; }
.nav-item:hover .submenu-wrap, .nav-item:focus-within .submenu-wrap { opacity: 1; visibility: visible; pointer-events: auto; }
/* Selecting a family force-closes the dropdown even while the pointer is still resting on
   it (script.js removes this class again once "Products" is hovered/focused next). */
.nav-item.submenu-closing .submenu-wrap { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.submenu { min-width: 220px; margin: 0; padding: .6rem; list-style: none; border-radius: var(--radius-m); background: linear-gradient(150deg, #fffdf7, #edf4e9); box-shadow: 0 20px 40px -16px rgba(11,43,34,.4), inset 0 1px 0 rgba(255,255,255,.9); transform: translateY(-6px); transition: transform .2s ease; }
.nav-item:hover .submenu, .nav-item:focus-within .submenu { transform: translateY(0); }
.submenu li + li { margin-top: .15rem; }
.submenu a { display: block; padding: .5rem .7rem; border-radius: var(--radius-s); color: var(--ink); font: 500 .74rem var(--sans); text-transform: none; letter-spacing: 0; transition: background .2s, color .2s; }
.submenu a::after { content: none; }
.submenu a:hover, .submenu a:focus-visible { background: var(--sand); color: var(--rust-dark); }
.submenu-note { padding: .5rem .7rem; font: 500 .66rem var(--mono); text-transform: none; letter-spacing: .02em; color: #8a988e; }
.menu-toggle { display: none; background: transparent; border: 0; padding: .6rem 0 .6rem .6rem; width: 42px; }
.menu-toggle i { display: block; height: 1px; margin: 5px 0; background: var(--ink); transition: transform .25s ease; }

.hero { min-height: 100vh; min-height: 100svh; padding: var(--header-h) var(--edge) 0; display: grid; grid-template-columns: 1fr .96fr; align-items: center; gap: 2vw; overflow: hidden; }
.hero-copy { padding: 3rem 1rem 4rem 0; z-index: 2; max-width: 600px; }
.eyebrow, .section-label { font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--leaf); }
.eyebrow span { width: 28px; height: 1px; background: var(--rust); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.045em; }
h1 { font-size: clamp(2.4rem, 4.6vw, 4.8rem); line-height: 1; margin: 1.1rem 0 1.4rem; }
h1 em, h2 em { font-weight: 600; color: var(--rust); font-style: italic; }
.intro { max-width: 420px; color: #426456; font-size: 1.05rem; line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 2.2rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 1.4rem; padding: 1rem 1.4rem; border: 1px solid transparent; border-radius: var(--radius-s); position: relative; isolation: isolate; font-size: .78rem; font-weight: 600; letter-spacing: .03em; transition: transform .25s ease, box-shadow .25s ease, background .3s ease; }
.button:hover, .button:focus-visible { transform: translateY(-3px); }
.button b, .text-link b { font-size: 1rem; line-height: .6; font-weight: 400; }
.button-dark { color: var(--cream); background: linear-gradient(140deg, #2d6a4f, #0a271f); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 28px -12px rgba(11,43,34,.5); }
.button-dark:hover, .button-dark:focus-visible { background: linear-gradient(140deg, var(--rust), #a8441f); box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 14px 30px -10px rgba(217,92,49,.46); }
.text-link { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; border-bottom: 1px solid var(--ink); padding-bottom: .3rem; transition: color .2s ease, border-color .2s ease; }
.text-link:hover, .text-link:focus-visible { color: var(--rust); border-color: var(--rust); }

.hero-art { align-self: center; position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-l); background: #9bbd79; aspect-ratio: 4 / 3; box-shadow: 0 26px 52px -18px rgba(11,43,34,.38); }
.hero-art::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(122deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.02) 30%, transparent 55%, rgba(255,216,194,.12) 100%); }
.sun { position: absolute; width: min(27vw, 340px); aspect-ratio: 1; border-radius: 50%; top: 12%; right: 21%; background: #f2d46a; box-shadow: 0 0 0 26px rgba(242,212,106,.14); }
.hill { position: absolute; border-radius: 50% 50% 0 0; bottom: -17%; }
.hill-back { width: 100%; height: 55%; right: -21%; background: #618b55; }
.hill-front { width: 105%; height: 44%; left: -30%; background: #315d41; }
.palm { position: absolute; z-index: 1; transform-origin: bottom; }
.palm .trunk { display: block; height: 230px; width: 17px; border-radius: 70% 70% 0 0; background: #613d26; transform: rotate(-10deg); transform-origin: bottom; }
.palm .leaves, .palm .leaves::before, .palm .leaves::after { position: absolute; width: 170px; height: 28px; border-radius: 100% 0 100% 0; background: #194634; content: ""; transform-origin: left center; }
.palm .leaves { top: -8px; left: 3px; transform: rotate(-38deg); }
.palm .leaves::before { transform: rotate(76deg); }
.palm .leaves::after { transform: rotate(140deg); }
.palm-one { bottom: 11%; left: 20%; transform: scale(1.1); }
.palm-two { bottom: 12%; right: 6%; transform: scale(.58) rotate(10deg); }
.hero-art p { position: absolute; bottom: 1.6rem; left: 1.6rem; z-index: 2; color: var(--cream); font: 500 .62rem/1.5 var(--mono); letter-spacing: .12em; }
.scroll-cue { position: absolute; z-index: 3; left: var(--edge); bottom: 1.6rem; display: flex; align-items: center; gap: .6rem; font: .65rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #426456; }
.scroll-cue span { font-size: 1rem; color: var(--rust); }

.about { background: linear-gradient(135deg, rgba(255,255,255,.4), rgba(225,239,221,.36)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.section-label { color: var(--leaf); display: flex; gap: 1rem; align-items: center; }
.section-label span { color: var(--rust); }
.about-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 10%; margin: 1.6rem 0 3.5rem; }
.about h2 { font-size: clamp(2.6rem, 4.4vw, 4.8rem); line-height: .98; margin-bottom: 0; }
.products h2 { font-size: clamp(1.5rem, 2.4vw, 2.4rem); line-height: 1.15; margin: 0; white-space: nowrap; }
.contact h2 { font-size: clamp(1.9rem, 3.2vw, 3.2rem); line-height: 1.02; margin-bottom: 0; }
.about-copy { align-self: end; }
.about-copy p { line-height: 1.72; color: #436455; }
.about-copy .lead { font-size: 1.2rem; color: var(--ink); line-height: 1.55; }
.about-copy .text-link { margin-top: .5rem; }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(21,60,49,.18); }
.principles article { padding: 1.4rem 2rem 1rem 0; border-right: 1px solid rgba(21,60,49,.18); }
.principles article + article { padding-left: 2rem; }
.principles article:last-child { border-right: 0; }
.principles span { font: .66rem var(--mono); color: var(--rust); }
.principles h3 { font-size: 1.4rem; margin: 2.4rem 0 .5rem; }
.principles p { max-width: 250px; color: #456758; line-height: 1.55; font-size: .87rem; }

.products { background: radial-gradient(ellipse at 84% 3%, rgba(112,169,130,.7), transparent 29%), radial-gradient(ellipse at 13% 95%, rgba(196,99,70,.22), transparent 33%), linear-gradient(135deg, #114633, #092a22 66%); color: var(--cream); overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); padding-top: clamp(1.25rem, 2.4vw, 2rem); padding-bottom: clamp(1.25rem, 2.4vw, 2rem); }
.products .section-label { color: #d1e7ac; }
.products-heading { display: grid; grid-template-columns: .7fr 2fr; gap: 2rem; align-items: end; margin-bottom: clamp(1rem, 2vw, 1.6rem); }
.products-nav-group { display: flex; flex-direction: row; align-items: center; gap: 1.1rem; }
.product-index-label { color: #c3d5c0; font: .68rem var(--mono); letter-spacing: .08em; }
.product-index-label b { color: var(--lime); font-weight: 400; }
.product-pagination { display: flex; align-items: center; gap: .6rem; }
/* .carousel-button (family switcher) and .gallery-nav (photo prev/next) share one glow
   treatment so the two nav-button types look and behave the same everywhere in Products. */
.carousel-button, .gallery-nav { border: 1px solid rgba(217,92,49,.65); color: var(--cream); background: rgba(217,92,49,.2); box-shadow: 0 0 0 1px rgba(217,92,49,.1), 0 0 16px -1px rgba(217,92,49,.65); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.carousel-button:hover, .carousel-button:focus-visible,
.gallery-nav:hover, .gallery-nav:focus-visible { color: var(--forest); background: var(--lime); border-color: var(--lime); box-shadow: 0 0 0 1px rgba(217,235,156,.15), 0 0 20px -1px rgba(217,235,156,.85); }
.carousel-button { height: 34px; width: 34px; border-radius: 50%; font-size: 1rem; }
.carousel-button:hover, .carousel-button:focus-visible { transform: scale(1.06); }

.product-track { display: flex; gap: 1.8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 1rem; }
.product-track::-webkit-scrollbar { display: none; }
/* align-items:start, not center: now that .gallery-stage can grow as tall as it is wide
   (see its own comment above), it's frequently taller than the text column, and centering
   left equal empty gaps above and below the text — start keeps both columns flush with the
   card's top edge instead, the same way an image and its caption normally align. */
.product-card { min-width: min(100%, 1200px); display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; align-items: start; scroll-snap-align: start; border-radius: var(--radius-l); padding: 2.1rem; background: linear-gradient(135deg, #fffdf7, #edf4e9 52%, #f2ded4); color: var(--ink); box-shadow: 0 24px 56px -20px rgba(11,43,34,.36), inset 0 1px 0 rgba(255,255,255,.9); }
/* A container for .gallery-stage's own cqw unit below — lets the stage cap its height
   against its *own rendered width*, not just viewport size (see .gallery-stage). */
.product-gallery { display: flex; flex-direction: column; gap: .7rem; container-type: inline-size; }
/* height grows with the viewport (svh) so the frame fills spare vertical room on tall
   windows, but .product-card's width stops growing past 1200px — so on a wide *and* tall
   monitor, svh alone would keep stretching the frame into a tall, narrow strip long after
   its width has plateaued. The 100cqw term caps height at the stage's own rendered width
   (via container query units, keyed to .product-gallery above), so it can grow taller than
   it is wide only up to square, never into a distorted sliver. Layered like the svh
   fallback below: a browser without container-query support simply never reaches the third,
   most-refined declaration and keeps the second. */
.gallery-stage { position: relative; height: min(48vw, 60vh); height: min(48vw, 60svh); height: min(48vw, 60svh, 100cqw); min-height: 320px; overflow: hidden; border-radius: var(--radius-m); background: #406b49; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 10px 26px -10px rgba(21,60,49,.35); }
.gloriosa-card .gallery-stage { background: linear-gradient(140deg, #d8e6ba, #70a07b 72%, #c87863); }
.coconut-card .gallery-stage { background: linear-gradient(140deg, #d8e7ac, #7e9f65 72%, #b77a58); }
.gallery-scroll { display: flex; height: 100%; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gallery-scroll::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 100%; height: 100%; width: 100%; object-fit: cover; object-position: center; scroll-snap-align: start; filter: saturate(1.05) contrast(1.03); }
.gallery-count { position: absolute; top: .7rem; right: .7rem; padding: .4rem .55rem; border-radius: var(--radius-s); color: #fff; background: rgba(15,61,43,.66); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); font: .58rem var(--mono); letter-spacing: .08em; }
.gallery-caption { position: absolute; left: .9rem; bottom: .7rem; right: .9rem; margin: 0; color: #fff; font: 600 .78rem var(--sans); text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.gallery-empty { position: absolute; inset: 0; padding: 1.6rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .35rem; text-align: center; background: linear-gradient(135deg, #4c7560, #1d4938); color: #e5f0c5; }
.gallery-empty span { font: 2.1rem/.8 var(--serif); }
.gallery-empty strong { font: 600 1.3rem var(--serif); }
.gallery-empty small { max-width: 190px; font-size: .72rem; line-height: 1.5; color: #c4d7b4; }
.gallery-nav { position: absolute; top: 50%; z-index: 3; height: 34px; width: 34px; border-radius: 50%; font-size: 1rem; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.gallery-nav:hover, .gallery-nav:focus-visible { transform: translateY(-50%) scale(1.06); }
.gallery-nav-prev { left: .6rem; }
.gallery-nav-next { right: .6rem; }
/* Stretched to match the (often taller) gallery column's height, with its own content
   flowed as a column so the "Ask about…" link can be pinned to the bottom via margin-top:
   auto below — rather than leaving a plain dead gap under the text when the frame is
   taller than the text needs, the layout reads as "content at top, action at bottom". */
.product-detail { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.product-detail > .text-link { margin-top: auto; padding-top: 1rem; }
.product-number { font: .65rem var(--mono); letter-spacing: .1em; color: var(--rust); text-transform: uppercase; }
.product-detail h3 { font-size: clamp(1.9rem, 2.8vw, 2.8rem); line-height: .95; margin: .35rem 0 .5rem; }
.product-detail > p:not(.product-number) { max-width: 430px; font-size: .92rem; line-height: 1.42; color: #426355; }
.safety-note { margin: .5rem 0 0; padding: .45rem .65rem; max-width: 430px; border-left: 2px solid var(--rust); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: rgba(217,92,49,.07); color: #7d442d; font-size: .71rem; line-height: 1.35; }
.subproduct-list { list-style: none; margin: .7rem 0; padding: 0; border-top: 1px solid rgba(21,60,49,.2); }
.subproduct-list li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(21,60,49,.2); }
.subproduct-name { font-size: .88rem; color: var(--ink); }
.subproduct-desc { color: #60766c; font-size: .74rem; text-align: right; }

.supply { min-height: 120px; display: grid; place-items: center; overflow: hidden; background: var(--lime); padding: 1.4rem var(--edge); }
.supply-line { font: clamp(.85rem, 1.7vw, 1.55rem)/1.4 var(--serif); text-align: center; margin: 0; letter-spacing: -.01em; max-width: 1100px; white-space: nowrap; }
.supply-line em { color: var(--rust); font-style: italic; }
.supply-line span { color: var(--leaf); font: .45em var(--sans); vertical-align: middle; margin: 0 .22em; }

.contact { background: radial-gradient(ellipse at 86% 12%, rgba(255,255,255,.55), transparent 29%), linear-gradient(135deg, #efe0cf, #e2ecd5 58%, #eed4ca); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; }
.contact-intro > p { max-width: 380px; color: #496456; line-height: 1.6; font-size: .92rem; margin-top: 1rem; }
.contact-direct { display: grid; gap: 1rem; margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid rgba(21,60,49,.18); font-size: .88rem; }
.contact-direct > div span { display: block; font: 500 .65rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--leaf); margin-bottom: .3rem; }
.contact-direct a, .contact-direct address { font-weight: 600; font-style: normal; transition: color .2s; }
.contact-direct a:hover, .contact-direct a:focus-visible { color: var(--rust); }

/* Phone / WhatsApp: one row per number (region badge + number + call/WhatsApp icon
   buttons). .phone-region overrides the uppercase-mono label styling meant for the
   "Email"/"Phone / WhatsApp" field labels above, which .contact-direct > div span would
   otherwise also apply to it as a descendant span. */
.phone-list { display: grid; gap: .5rem; }
.phone-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .6rem; }
.contact-direct .phone-region { display: inline-block; font: 600 .72rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--sand); padding: .15rem .55rem; border-radius: 999px; margin-bottom: 0; }
.phone-actions { display: inline-flex; gap: .4rem; margin-left: auto; }
.contact-direct .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(21,60,49,.18); color: var(--leaf); flex: none; transition: color .2s, background-color .2s, border-color .2s; }
.contact-direct .icon-btn svg { width: 16px; height: 16px; display: block; }
.contact-direct .icon-btn:hover, .contact-direct .icon-btn:focus-visible { background: var(--lime); border-color: var(--leaf); color: var(--rust); }
.contact-form { padding-top: .2rem; }
.form-required-note { margin: 0 0 .7rem; color: #6d8577; font: .68rem var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.required-mark { color: var(--rust); margin-left: .2em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.contact-form label { display: block; margin-bottom: .9rem; font: .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #486454; }
.contact-form input, .contact-form textarea { display: block; width: 100%; margin-top: .45rem; padding: .45rem 0; border: 0; border-bottom: 1px solid rgba(21,60,49,.38); outline: 0; background: transparent; color: var(--ink); font: 500 .92rem var(--sans); text-transform: none; letter-spacing: normal; resize: vertical; transition: border-color .2s, box-shadow .2s; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--rust); box-shadow: 0 6px 14px -10px rgba(217,92,49,.6); }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #85978a; }
.contact-form input:user-invalid, .contact-form textarea:user-invalid { border-color: var(--rust-dark); }
.contact-form input:user-valid, .contact-form textarea:user-valid { border-color: #5c8a6e; }
.field-error { display: block; min-height: 1em; margin-top: .35rem; font: .68rem var(--mono); color: var(--rust-dark); text-transform: none; letter-spacing: normal; }
.field-error:empty { margin-top: 0; min-height: 0; }
.interest-field { border: 0; padding: 0; margin: 0 0 .9rem; }
.interest-field legend { padding: 0; margin-bottom: .55rem; font: .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #486454; }
.chip-select { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip { position: relative; display: inline-flex; align-items: center; margin: 0; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span { padding: .5rem .9rem; border-radius: 999px; border: 1px solid rgba(21,60,49,.32); background: rgba(255,255,255,.5); color: #37503f; font: 500 .76rem var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.chip input:focus-visible + span { outline: 2px solid var(--rust); outline-offset: 2px; }
.chip:hover span { border-color: var(--rust); }
.interest-field .field-error { margin-top: .6rem; }
.form-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.2rem; align-items: center; margin-top: .3rem; }
.form-footer p, .form-status { margin: 0; color: #557063; font-size: .72rem; line-height: 1.4; }
.form-status { min-height: 1.2em; margin-top: .5rem; color: #557063; }
.form-status.is-error { color: var(--rust-dark); }
.form-status.is-success { color: var(--leaf); }
.button[disabled] { opacity: .6; cursor: progress; transform: none; }

.site-footer { background: linear-gradient(135deg, #123b2e, #08241d); color: #e4edcc; padding: 2rem var(--edge); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 1rem; box-shadow: 0 -14px 34px -18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08); }
.site-footer .brand-mark { color: var(--lime); }
.site-footer .brand > span:last-child > span { color: #aec887; }
.site-footer p { margin: 0; font: .65rem var(--mono); letter-spacing: .04em; color: #b8c8ae; }
.site-footer p:nth-child(2) { text-align: center; }
.site-footer p:nth-child(3) { text-align: right; }
.site-version { color: var(--lime); }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.25,1); }
.reveal.in-view { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: var(--header-h); }
  .hero-copy { padding: 3rem 0 3rem; max-width: none; }
  .scroll-cue { position: static; margin-top: 1rem; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .products-heading { grid-template-columns: 1fr; gap: .6rem; align-items: start; }
  .about-grid { margin-bottom: 4rem; }
  .product-card { grid-template-columns: 1fr; gap: 1.8rem; padding: 1.6rem; }
}

@media (max-width: 760px) {
  :root { --header-h: var(--header-h-mobile); }
  /* backdrop-filter makes .site-header a containing block for its position:fixed
     .site-menu descendant, shrinking the fullscreen mobile overlay down to the header's
     own box instead of the viewport — drop it at this breakpoint so the overlay works. */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* Higher than .site-menu's z-index (15): the toggle sits *behind* the fullscreen nav
     overlay otherwise, once open — it's still there and still clickable-if-you-could-see-it,
     but visually hidden, leaving no obvious way to close the menu without picking a link. */
  .menu-toggle { display: block; z-index: 16; }
  .site-menu { position: fixed; inset: 0; padding: 6rem 8vw 2rem; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem; background: var(--forest); color: var(--cream); font: 600 2.1rem var(--serif); transform: translateX(100%); transition: transform .35s ease; z-index: 15; overflow-y: auto; }
  .site-menu a::after { background: var(--lime); }
  .site-menu.open { transform: none; }
  .nav-item { flex-direction: column; align-items: flex-start; width: 100%; }
  /* transform:translateX(-50%) from the base rule still applies to a position:static box —
     transform isn't gated by positioning scheme — so left unreset it shifted the whole
     submenu (and its text) left by half its own width, clipping it off the screen edge. */
  .submenu-wrap { position: static; transform: none; padding-top: 0; opacity: 1; visibility: visible; pointer-events: auto; }
  .submenu { position: static; transform: none; box-shadow: none; background: transparent; margin-top: .7rem; padding: 0 0 0 1.3rem; min-width: 0; }
  .submenu a { color: var(--cream); font: 500 1.1rem var(--sans); padding: .35rem 0; }
  .submenu a:hover, .submenu a:focus-visible { background: transparent; color: var(--lime); }
  .submenu-note { color: rgba(228,237,204,.55); padding: .35rem 0; }
  .menu-toggle[aria-expanded="true"] i { background: var(--cream); }
  .menu-toggle[aria-expanded="true"] i:first-of-type { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i:last-of-type { transform: translateY(-3px) rotate(-45deg); }
  .hero { min-height: auto; }
  .hero-art .sun { width: 48vw; }
  .principles { grid-template-columns: 1fr; }
  .principles article, .principles article + article { border-right: 0; border-bottom: 1px solid rgba(21,60,49,.18); padding: 1.4rem 0; }
  .principles article:last-child { border-bottom: 0; }
  .principles h3 { margin-top: 1.2rem; }
  .carousel-button, .gallery-nav { height: 38px; width: 38px; font-size: 1.05rem; }
  /* 90% of .product-track's own (already edge-padded) width, not 90vw of the raw viewport —
     90vw ignores the section's horizontal padding entirely, so the card needed more room
     than was actually available and overflowed off the right edge, growing worse the
     narrower the screen: shrinking/asymmetric outer margin, a clipped rounded corner, and
     clipped text, since the whole card (image and text alike) sat shifted rightward. */
  .product-card { min-width: 90%; }
  .products h2 { white-space: normal; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-footer { align-items: flex-start; flex-direction: column; }
  .site-footer { grid-template-columns: 1fr; padding: 2rem 7vw; gap: .6rem; }
  .site-footer p:nth-child(2), .site-footer p:nth-child(3) { text-align: left; }
  .section-padded { padding: 3rem 7vw; }
  .supply-line { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .site-menu, .button, .scroll-progress span { transition: none; }
}