/* Tokens come from theme.json presets; the fallbacks keep the page right if global styles are missing */
:root{
  --white:var(--wp--preset--color--white,#fbfcf8);    /* base    */
  --mist:var(--wp--preset--color--mist,#eef3ea);      /* surface */
  --sage:var(--wp--preset--color--sage,#c9d8c1);      /* tint    */
  --leaf:var(--wp--preset--color--leaf,#2f6b3f);      /* primary */
  --forest:var(--wp--preset--color--forest,#14291c);  /* ink     */
  --sprout:var(--wp--preset--color--sprout,#c6e46f);  /* accent: new growth */
  --muted:var(--wp--preset--color--muted,#4d5e52);
  --radius:20px;          /* cards */
  --pill:999px;           /* interactive */
  --pad:clamp(1.25rem,5vw,3rem);
  --ease:cubic-bezier(.16,1,.3,1);
  --display:var(--wp--preset--font-family--display,"Cabinet Grotesk",system-ui,sans-serif);
  --body:var(--wp--preset--font-family--body,"Satoshi",system-ui,sans-serif);
}
*{box-sizing:border-box;margin:0}
html{background:var(--white);color:var(--forest);font-family:var(--body);-webkit-font-smoothing:antialiased}
body{overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--leaf);outline-offset:3px;border-radius:6px}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:var(--pad)}

/* Grain overlay: fixed, pointer-events none (never on scrolling layers) */
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;height:52px;padding:0 1.5rem;border-radius:var(--pill);
  font-weight:700;font-size:1rem;white-space:nowrap;transition:transform .4s var(--ease),background .3s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--forest);color:var(--white)}
.btn-primary .ic{display:grid;place-items:center;width:30px;height:30px;margin-right:-.9rem;border-radius:50%;background:var(--sprout);color:var(--forest);transition:transform .5s var(--ease)}
.btn-primary:hover .ic{transform:rotate(-45deg)}
.btn-cta{justify-content:center;width:100%}
.btn-kitchen{background:var(--forest);color:var(--white)}
.btn-home{background:var(--sprout);color:var(--forest)}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:50;height:64px;display:flex;align-items:center}
.nav .wrap{width:100%;display:flex;align-items:center;justify-content:space-between}
.nav::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--white) 78%,transparent);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);opacity:0;transition:opacity .4s}
.nav.scrolled::before{opacity:1}
.logo{position:relative;display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:800;font-size:1.25rem;letter-spacing:-.02em}
.logo i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--leaf);color:var(--sprout);font-size:1.1rem}
.nav-links{display:none;gap:2rem;font-weight:500}
.nav-right{position:relative;display:flex;gap:.5rem;align-items:center}
.icon-btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:1.35rem}
.icon-btn:hover{background:var(--mist)}
@media (min-width:1024px){.nav-links{display:flex;position:relative}.menu-toggle{display:none}}

/* Full-screen mobile menu */
.menu{position:fixed;inset:0;z-index:60;background:var(--forest);color:var(--white);padding:96px var(--pad) 2rem;display:flex;flex-direction:column;justify-content:space-between;clip-path:circle(0% at calc(100% - 44px) 32px);visibility:hidden}
.menu a.big{display:block;font-family:var(--display);font-weight:700;font-size:clamp(2.5rem,12vw,4rem);line-height:1.08;letter-spacing:-.03em;overflow:hidden}
.menu a.big span{display:inline-block}
.menu .close{position:absolute;top:10px;right:calc(var(--pad) - 6px);color:var(--white)}
.menu .meta{display:flex;gap:1rem;color:var(--sage)}

/* ---------- Hero ---------- */
.hero{overflow-x:clip;min-height:100dvh;padding-top:84px;display:grid;align-content:start;gap:1.75rem;position:relative}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(3rem,13.5vw,6.5rem);line-height:.95;letter-spacing:-.045em}
.hero h1 em{font-style:normal;color:var(--leaf)}
.hero p{font-size:1.125rem;line-height:1.55;color:var(--muted);max-width:34ch}
.hero .ctas{display:flex;flex-wrap:wrap;gap:.75rem}
#heroCtas{display:grid;grid-template-columns:1fr;gap:.6rem}
@media(min-width:600px){#heroCtas{grid-template-columns:1fr 1fr;max-width:460px}}
.hero-art{position:relative;height:min(58vh,560px);margin-top:.25rem}
.arch{position:absolute;inset:0 6% 0 6%;border-radius:999px 999px var(--radius) var(--radius);overflow:hidden;background:var(--mist)}
.arch img{width:100%;height:118%;object-fit:cover;object-position:50% 70%}
.leaf{position:absolute;pointer-events:none;filter:drop-shadow(0 18px 24px rgb(20 41 28 / .18));will-change:transform}
.leaf.l1{width:62%;left:-12%;bottom:-2%;top:auto;rotate:-4deg}
.leaf.l2{width:34%;right:-6%;top:4%;bottom:auto;rotate:10deg}
.badge{position:absolute;left:0;bottom:12%;display:flex;align-items:center;gap:.6rem;padding:.6rem .9rem .6rem .6rem;border-radius:var(--pill);background:var(--white);box-shadow:0 10px 30px rgb(20 41 28 / .12);font-weight:500;font-size:.9rem}
.badge i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sprout);font-size:1.1rem}
@media (min-width:900px){
  .hero{grid-template-columns:1.05fr .95fr;align-content:center;align-items:center;gap:3rem;padding-top:64px}
  .hero-art{height:min(78vh,720px)}
}

/* ---------- Growth (pinned scrub) ---------- */
.grow{position:relative;height:100dvh;overflow:hidden;background:var(--forest);color:var(--white)}
.grow-inner{height:100%;display:grid;grid-template-rows:auto 1fr auto;gap:1rem;padding:88px var(--pad) 2rem;max-width:1320px;margin:auto}
.grow h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,8vw,4rem);line-height:1;letter-spacing:-.035em;max-width:14ch}
.stage{position:relative;border-radius:var(--radius);overflow:hidden}
.stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stage img:not(:first-child){opacity:0}
.steps{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.steps ol{list-style:none;padding:0;display:flex;gap:1.25rem;font-family:var(--display);font-weight:700;font-size:1.25rem}
.steps li{opacity:.3;transition:opacity .4s}
.steps li.on{opacity:1;color:var(--sprout)}
.steps p{color:var(--sage);max-width:24ch;font-size:.95rem;line-height:1.5;text-align:right}
.stem{position:absolute;right:calc(var(--pad) - 4px);top:96px;bottom:96px;width:28px;z-index:2;overflow:visible}
@media (min-width:900px){.grow-inner{grid-template-columns:1fr 1.4fr;grid-template-rows:1fr auto;column-gap:4rem}.grow h2{align-self:center}.stage{grid-row:1/3;grid-column:2}.steps{flex-direction:column;align-items:flex-start}.steps p{text-align:left}}

/* ---------- Product rail (horizontal pan) ---------- */
.rail{position:relative;overflow:hidden;background:var(--white)}
.rail-head{padding-block:5rem 1.5rem}
.rail-head h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,8vw,3.75rem);line-height:1;letter-spacing:-.035em}
.track{display:flex;gap:1rem;padding:0 var(--pad) 4rem;width:max-content}
.card{width:min(78vw,340px);flex:none}
.card .ph{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--mist)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.card:hover .ph img{transform:scale(1.05)}
.card h3{margin-top:1rem;font-family:var(--display);font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.card .latin{color:var(--muted);font-style:italic;font-size:.95rem}
.card .row{display:flex;justify-content:space-between;align-items:center;margin-top:.75rem}
.needs{display:flex;gap:.4rem}
.needs span{display:inline-flex;align-items:center;gap:.3rem;height:30px;padding:0 .7rem;border-radius:var(--pill);background:var(--mist);font-size:.85rem;font-weight:500}
.wa{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--leaf);color:var(--white);font-size:1.3rem;transition:transform .4s var(--ease)}
.wa:active{transform:scale(.92)}

/* ---------- Care stack (sticky) ---------- */
.care{padding:5rem 0 3rem;background:var(--mist)}
.care h2{font-family:var(--display);font-weight:700;font-size:clamp(2rem,8vw,3.75rem);line-height:1;letter-spacing:-.035em;margin-bottom:2rem;max-width:12ch}
.stack-card{position:sticky;top:calc(84px + var(--i) * 14px);min-height:62vh;margin-bottom:1.25rem;border-radius:28px;padding:1.75rem;display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:1rem;overflow:hidden;transform-origin:50% 0;box-shadow:0 -10px 40px rgb(20 41 28 / .08)}
.stack-card .ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgb(255 255 255 / .55);font-size:1.7rem}
.stack-card h3{font-family:var(--display);font-weight:800;font-size:clamp(2.5rem,11vw,5rem);letter-spacing:-.04em;line-height:1}
.stack-card p{font-size:1.05rem;line-height:1.55;max-width:36ch;align-self:end}
.stack-card img{position:absolute;right:-12%;top:-6%;width:62%;opacity:.9;pointer-events:none}
.c1{background:var(--sprout)}
.c2{background:var(--sage)}
.c3{background:var(--white)}
.c4{background:var(--forest);color:var(--white)}
.c4 .ic{background:rgb(255 255 255 / .12)}

/* ---------- Marquee (the only one on the page) ---------- */
.marquee{overflow:hidden;padding:1.25rem 0;background:var(--leaf);color:var(--white)}
.marquee .m-track{display:flex;width:max-content;gap:2.5rem;font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,6vw,2.5rem);letter-spacing:-.02em;white-space:nowrap}
.marquee span{display:inline-flex;align-items:center;gap:2.5rem}
.marquee i{color:var(--sprout)}

/* ---------- Quote ---------- */
.quote{padding-block:5rem;display:grid;gap:2rem}
.quote blockquote{font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,7vw,3.25rem);line-height:1.08;letter-spacing:-.03em;max-width:22ch}
.quote .who{display:flex;align-items:center;gap:.9rem}
.quote .who img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.quote .who b{display:block}
.quote .who small{color:var(--muted)}
.quote .ph{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3}
.quote .ph img{width:100%;height:120%;object-fit:cover}
@media (min-width:900px){.quote{grid-template-columns:1.2fr 1fr;align-items:center;gap:4rem}}

/* ---------- Footer CTA ---------- */
.foot{background:var(--forest);color:var(--white);padding:4.5rem 0 2rem;border-radius:32px 32px 0 0}
.foot h2{font-family:var(--display);font-weight:800;font-size:clamp(2.5rem,11vw,6rem);line-height:.95;letter-spacing:-.045em}
.form{margin-top:2rem;display:grid;gap:.5rem;max-width:460px}
.form label{font-weight:500;color:var(--sage)}
.form input{width:100%;height:52px;border-radius:var(--pill);border:1.5px solid rgb(255 255 255 / .28);background:rgb(255 255 255 / .06);color:var(--white);padding:0 1.25rem;font:inherit}
.form input::placeholder{color:rgb(255 255 255 / .62)}
.form input:focus{outline:none;border-color:var(--sprout)}
.form small{color:rgb(255 255 255 / .7)}
.form .btn{background:var(--sprout);color:var(--forest)}
.foot-links{margin-top:4rem;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;color:var(--sage)}
.foot-links b{display:block;color:var(--white);margin-bottom:.5rem}
.foot-links a{display:block;padding:.2rem 0}
.fine{margin-top:3rem;display:flex;justify-content:space-between;color:rgb(255 255 255 / .55);font-size:.85rem}
@media (min-width:900px){.foot-links{grid-template-columns:repeat(4,1fr)}}

/* Reveal helper (GSAP sets the from-state; without JS content is visible) */
@media (prefers-reduced-motion:reduce){.leaf{display:none}}

/* ---- Theme additions (not in the mockup) ---- */

/* Inline Phosphor SVG icons: <i class="icon"><svg/></i>, sized by font-size like the icon font was */
.icon{display:inline-grid;place-items:center;font-style:normal;line-height:1;flex:none}
.icon svg{width:1em;height:1em;display:block}

.skip-link{position:absolute;left:1rem;top:-100px;z-index:100;padding:.75rem 1rem;border-radius:var(--pill);background:var(--forest);color:var(--white)}
.skip-link:focus{top:1rem}

/* WordPress admin bar pushes the fixed nav down */
.admin-bar .nav{top:32px}
@media (max-width:782px){.admin-bar .nav{top:46px}}

/* Inner pages: solid nav, room under it */
.lh-inner .nav::before{opacity:1}
.site-main{padding-block:calc(64px + 3rem) 5rem;min-height:60vh}
.prose{max-width:760px}
.prose > * + *{margin-top:1em}
.entry-title{font-family:var(--display);font-weight:800;font-size:clamp(2.25rem,9vw,4rem);line-height:1;letter-spacing:-.04em;margin-bottom:1.5rem}
.prose a{color:var(--leaf);text-decoration:underline;text-underline-offset:.2em}
.prose h2,.prose h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.1}

/* Tasting form: hidden honeypot and status line */
.form .hp{position:absolute;left:-9999px}
.form small[data-state="sent"]{color:var(--sprout)}
.form small[data-state="error"]{color:#ffb4a8}

/* WooCommerce (catalog mode): light touch until the shop is designed in Phase 2 */
.woocommerce .product_title,.woocommerce-products-header__title{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--display);font-weight:700;font-size:1.25rem}
.woocommerce ul.products li.product img,.woocommerce div.product div.images img{border-radius:var(--radius)}
.lh-latin{color:var(--muted);font-style:italic;margin:-.5rem 0 1rem}
.lh-product-ctas{display:grid;gap:.6rem;margin:1.5rem 0;max-width:420px}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
.menu .close:hover{background:rgb(255 255 255 / .12)}