:root{
  --oat:#f5efe4;
  --sand:#eadfcd;
  --mist:#e2e7da;
  --sage:#8b9a77;
  --moss:#4b5739;
  --deep:#2b3223;
  --clay:#b8714f;
  --clay-ink:#8e4e31;
  --ink:#2b3223;
  --soft:#5f6655;
  --line:#d9cfbd;
  --gutter:clamp(16px,4vw,56px);
  --max:1240px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Karla",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --breath:10s;   /* 4 s in, 6 s out */
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--deep)}
body{margin:0;background:var(--oat);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:300;font-optical-sizing:auto}
h2{font-size:clamp(40px,5.4vw,76px);line-height:1.02;letter-spacing:-.015em}
h2 em{font-style:italic;color:var(--clay-ink)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--moss);margin:0 0 18px}
.eyebrow::before{content:"";width:22px;height:22px;border-radius:58% 42% 50% 50% / 50% 55% 45% 50%;background:var(--sage);opacity:.55}
.lead{color:var(--soft);font-size:19px;max-width:56ch;margin:0}
section{padding:clamp(72px,10vw,140px) 0;position:relative}

/* banner + header */
.sample{background:var(--deep);color:var(--oat);text-align:center;font-size:13px;padding:8px 16px;letter-spacing:.02em}
.sample b{color:#e6b597}
.top{position:absolute;left:0;right:0;top:auto;z-index:40;padding-top:18px}
.top .wrap{display:flex;align-items:center;gap:24px;justify-content:space-between}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--deep);font-family:var(--serif);font-size:24px;font-style:italic;font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.logo svg{flex:none}
.nav ul{list-style:none;margin:0;padding:6px;display:flex;gap:4px;background:rgba(245,239,228,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px}
.nav a{display:block;text-decoration:none;font-size:15px;font-weight:500;color:var(--deep);padding:8px 14px;border-radius:999px;white-space:nowrap;transition:background .4s ease}
.nav a:hover{background:var(--sand)}
.search{display:flex;align-items:center;gap:6px;background:rgba(245,239,228,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:999px;padding:5px 5px 5px 16px;min-width:0}
.search input{border:0;background:transparent;font:inherit;font-size:15px;color:var(--deep);width:170px;min-width:0;outline:none}
.search input::placeholder{color:#7b7f70}
.search button{border:0;width:36px;height:36px;border-radius:50%;background:var(--moss);color:var(--oat);display:grid;place-items:center;cursor:pointer;flex:none}
.search button svg{width:16px;height:16px}

/* ================= HERO: sky & mist -> sun -> heading -> near hills cut-out -> mist veil ================= */
.hero{--p:0;position:relative;height:clamp(600px,94vh,900px);overflow:hidden;background:#dfe3d2;isolation:isolate;padding:0}
.hero .layer{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero .bg{z-index:1;transform:scale(calc(1.04 + var(--p) * .08));transform-origin:50% 40%}
.hero .sun{position:absolute;z-index:2;left:50%;top:14%;width:clamp(240px,34vw,500px);aspect-ratio:1;border-radius:50%;
  translate:-50% calc(var(--p) * 70%);
  background:radial-gradient(circle,rgba(255,236,200,.95) 0%,rgba(255,226,180,.55) 35%,rgba(255,220,170,0) 70%);
  animation:breathe var(--breath) ease-in-out infinite}
.hero h1{position:absolute;z-index:3;left:0;right:0;top:clamp(104px,13%,130px);text-align:center;
  font-size:clamp(64px,10.6vw,176px);line-height:.88;font-weight:300;letter-spacing:-.03em;color:#fffaf0;
  text-shadow:0 2px 18px rgba(90,70,30,.35),0 6px 60px rgba(120,90,40,.3);transform:translateY(calc(var(--p) * 55%))}
.hero h1>span{display:block}
.hero h1>.l2{font-style:italic;font-weight:300}
.hero .inner{display:inline-block;animation:breathe var(--breath) ease-in-out infinite;transform-origin:50% 70%}
.hero .fg{z-index:4;transform:translateY(calc(var(--p) * -9%));filter:drop-shadow(0 -10px 30px rgba(60,70,40,.15))}
.hero .veil{position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(180deg,rgba(245,239,228,0) 40%,rgba(245,239,228,.5) 78%,var(--oat) 100%);opacity:calc(.75 + var(--p) * .5)}
.hero .intro{position:absolute;z-index:6;left:0;right:0;bottom:clamp(36px,7%,70px);text-align:center;padding:0 var(--gutter)}
.hero .intro p{margin:0 auto;max-width:40ch;font-size:clamp(17px,1.5vw,20px);color:var(--deep)}
.hero .intro small{display:block;margin-top:14px;font-size:12px;color:var(--soft)}
.wd{display:inline-block;white-space:nowrap}
.ch{display:inline-block;animation:rise 1.6s cubic-bezier(.2,.8,.2,1) both,drift 9s ease-in-out infinite;animation-delay:calc(var(--i) * 90ms + .3s),calc(var(--i) * 300ms + 2.4s)}
@keyframes rise{from{opacity:0;transform:translateY(60%);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes drift{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes breathe{0%,100%{scale:1}40%{scale:1.035}}

/* breathing guide */
.breath{padding:clamp(40px,6vw,80px) 0 clamp(72px,9vw,120px)}
.breath .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.orb{position:relative;width:min(100%,420px);aspect-ratio:1;margin:0 auto;display:grid;place-items:center}
.orb .b1,.orb .b2{position:absolute;inset:8%;border-radius:47% 53% 55% 45% / 52% 44% 56% 48%;animation:inhale var(--breath) ease-in-out infinite,morph 18s ease-in-out infinite}
.orb .b1{background:var(--sage);opacity:.35}
.orb .b2{inset:20%;background:var(--moss);opacity:.9;animation-delay:.3s,-6s}
.orb .cue{position:relative;z-index:2;color:var(--oat);font-family:var(--serif);font-style:italic;font-size:clamp(24px,2.4vw,32px);height:1.3em;width:9em;text-align:center}
.orb .cue span{position:absolute;inset:0;opacity:0}
.orb .cue .in{animation:cueIn var(--breath) ease-in-out infinite}
.orb .cue .out{animation:cueOut var(--breath) ease-in-out infinite}
@keyframes inhale{0%,100%{transform:scale(.78)}40%{transform:scale(1)}}
@keyframes morph{0%,100%{border-radius:47% 53% 55% 45% / 52% 44% 56% 48%}33%{border-radius:56% 44% 42% 58% / 45% 58% 42% 55%}66%{border-radius:42% 58% 50% 50% / 58% 46% 54% 42%}}
@keyframes cueIn{0%,36%{opacity:1}42%,96%{opacity:0}100%{opacity:1}}
@keyframes cueOut{0%,38%{opacity:0}44%,94%{opacity:1}100%{opacity:0}}
.breath .count{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.breath .count span{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;color:var(--soft);background:#fbf7f0}

/* wave divider */
.wave{display:block;width:100%;height:clamp(40px,6vw,90px);color:var(--mist)}

/* start here */
.start{background:var(--mist)}
.start .head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:56px}
.pebble{background:var(--oat);border-radius:46px 46px 46px 12px;padding:30px 28px 32px;position:relative;overflow:hidden}
.pebble:nth-child(2){border-radius:46px 12px 46px 46px;transform:translateY(28px)}
.pebble:nth-child(3){border-radius:12px 46px 46px 46px}
.pebble .ic{width:58px;height:58px;margin-bottom:22px}
.pebble h3{font-size:30px;line-height:1.1;margin-bottom:8px}
.pebble h3 small{display:block;font-family:var(--sans);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--clay-ink);margin-top:6px;font-weight:600}
.pebble p{margin:0;color:var(--soft)}
.src{font-size:13px;color:#7c8172;margin-top:56px}
.src a{color:var(--moss)}

/* paths */
.paths .head{text-align:center;max-width:820px;margin:0 auto}
.paths .head .lead{margin:22px auto 0}
.stones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:60px}
.stone{text-align:center;padding:40px 22px 34px;border-radius:50% 50% 46% 54% / 38% 42% 58% 62%;background:var(--sand);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.stone:nth-child(2){background:#e6d2bf;border-radius:46% 54% 52% 48% / 44% 36% 64% 56%}
.stone:nth-child(3){background:#dfe2cf;border-radius:52% 48% 50% 50% / 36% 44% 56% 64%}
.stone:nth-child(4){background:#e9dcc2;border-radius:48% 52% 54% 46% / 42% 40% 60% 58%}
.stone:hover{transform:translateY(-8px) rotate(-1deg)}
.stone b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(30px,2.8vw,40px);line-height:1;margin-bottom:6px}
.stone i{display:block;font-style:normal;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--clay-ink);font-weight:600;margin-bottom:12px}
.stone p{margin:0;color:var(--soft);font-size:15px}

/* page plan (what you'll find) */
.plan{background:var(--deep);color:var(--oat);overflow:hidden}
.plan h2 em{color:#e6b597}
.plan .lead{color:#c7c9b9}
.plan-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.plan .eyebrow{color:#c9d0b6}
.garden{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:26px;margin-top:64px}
.tile{display:block;text-decoration:none;color:inherit}
.tile figure{margin:0;overflow:hidden;background:#3a4230}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{transform:scale(1.06)}
.tile h3{font-size:30px;line-height:1.1;margin:18px 0 6px}
.tile p{margin:0;color:#c7c9b9;font-size:15px;max-width:40ch}
.tile .path{display:inline-block;margin-top:10px;font-size:13px;color:#e6b597}
.t1{grid-column:1 / span 5}.t1 figure{height:440px;border-radius:220px 220px 32px 32px}
.t2{grid-column:6 / span 3;margin-top:90px}.t2 figure{height:320px;border-radius:50%}
.t3{grid-column:9 / span 4}.t3 figure{height:380px;border-radius:32px 160px 32px 160px}
.t4{grid-column:1 / span 4}.t4 figure{height:300px;border-radius:150px 32px 150px 32px}
.t5{grid-column:5 / span 4}.t5 figure{height:300px;border-radius:32px 32px 150px 150px}
.t6{grid-column:9 / span 4}.t6 figure{height:300px;border-radius:46% 54% 50% 50% / 55% 45% 55% 45%;animation:morph 22s ease-in-out infinite}
.more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px}
.more a{display:block;text-decoration:none;border:1px solid #4a5340;border-radius:28px;padding:20px 22px;transition:background .5s ease,border-color .5s ease}
.more a:hover{background:#353d2b;border-color:#6b7556}
.more b{display:block;font-family:var(--serif);font-weight:400;font-size:22px}
.more span{font-size:14px;color:#b9bcab}

/* research + safety */
.care .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);margin-top:48px}
.leaf-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.leaf-list li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;background:#fbf7f0;border-radius:24px;padding:16px 20px}
.leaf-list svg{width:30px;height:30px;margin-top:2px}
.leaf-list b{display:block;font-weight:600}
.leaf-list span{color:var(--soft);font-size:15px}
.safety{background:var(--clay);color:#fff8ef;border-radius:48px 48px 48px 14px;padding:clamp(28px,4vw,48px)}
.safety h3{font-size:clamp(30px,3vw,42px);line-height:1.08;margin-bottom:16px}
.safety ul{margin:0;padding:0 0 0 20px;display:grid;gap:10px}
.safety li::marker{color:#ffd9c2}
.safety p{margin:18px 0 0;font-size:14px;color:#ffe5d4}

/* FAQ */
.faq{background:var(--sand)}
.faq .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px)}
details{background:var(--oat);border-radius:26px;margin-bottom:12px;transition:background .4s ease}
details[open]{background:#fbf7f0}
summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 34px;gap:14px;align-items:center;padding:20px 24px;font-size:18px;font-weight:600}
summary::-webkit-details-marker{display:none}
summary i{width:34px;height:34px;border-radius:50%;background:var(--sand);position:relative;transition:background .4s ease,transform .6s ease}
summary i::before,summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--moss);transform:translate(-50%,-50%)}
summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .5s ease}
details[open] summary i{background:var(--sage);transform:rotate(180deg)}
details[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
details p{margin:0;padding:0 24px 22px;color:var(--soft)}

/* footer */
footer{background:var(--deep);color:#d6d8c9;padding:clamp(64px,8vw,104px) 0 28px;border-radius:56px 56px 0 0;margin-top:-56px;position:relative;z-index:2}
.f-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.f-top h2{color:var(--oat)}
.f-top h2 em{color:#e6b597}
.news{display:flex;gap:6px;background:#3a4230;border-radius:999px;padding:6px;max-width:480px}
.news input{flex:1;min-width:0;border:0;background:transparent;color:var(--oat);font:inherit;padding:10px 16px;outline:none}
.news input::placeholder{color:#9da38f}
.news button{border:0;border-radius:999px;background:var(--clay);color:#fff;font:inherit;font-weight:600;padding:10px 20px;cursor:not-allowed}
.note{font-size:13px;color:#9da38f;margin-top:8px}
.f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:64px;padding-top:32px;border-top:1px solid #434b37}
footer h4{margin:0 0 12px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#9da38f;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer a{text-decoration:none;color:#eef0e4}
footer a:hover{color:#e6b597}
.f-src{margin-top:44px;font-size:13px;line-height:1.7;color:#9da38f}
.f-src a{color:#c5cab5;word-break:break-all}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;font-size:13px;color:#9da38f}
.legal b{color:#e6b597}

/* slow reveals (breathing pace) */
.rv{opacity:0;translate:0 30px;transition:opacity 1.6s cubic-bezier(.25,.6,.2,1),translate 1.6s cubic-bezier(.25,.6,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;translate:0 0}
.pebble:nth-child(2).rv.in{translate:0 0}

/* responsive */
@media (max-width:1100px){
  .top .wrap{flex-wrap:wrap}
  .nav{order:3;width:100%;overflow-x:auto;scrollbar-width:none}.nav::-webkit-scrollbar{display:none}
  .nav ul{display:inline-flex}
}
@media (max-width:900px){
  .breath .wrap,.start .head,.plan-head,.care .grid2,.faq .wrap,.f-top{grid-template-columns:minmax(0,1fr)}
  .trio{grid-template-columns:minmax(0,1fr)}.pebble:nth-child(2){transform:none}
  .stones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t1,.t3{grid-column:span 6}.t2{grid-column:span 6;margin-top:0}.t4,.t5,.t6{grid-column:span 6}
  .t1 figure,.t3 figure{height:360px}
  .more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  :root{--gutter:16px}
  body{font-size:16px}
  .top{padding-top:12px}
  .logo{font-size:21px}
  .search{flex:1;max-width:190px}.search input{width:100%}
  .nav a{font-size:14px;padding:7px 12px}
  .hero{height:clamp(600px,90vh,760px)}
  .hero .layer{object-position:42% 40%}
  .hero h1{top:150px;font-size:clamp(72px,24vw,110px)}
  .hero .sun{top:150px;width:300px}
  .stones{grid-template-columns:minmax(0,1fr)}
  .stone{border-radius:44% 56% 48% 52% / 30% 34% 66% 70%}
  .t1,.t2,.t3,.t4,.t5,.t6{grid-column:1 / -1}
  .t1 figure,.t3 figure{height:320px}.t2 figure{height:300px;width:300px;margin:0 auto}
  .t4 figure,.t5 figure,.t6 figure{height:260px}
  .more{grid-template-columns:minmax(0,1fr)}
  summary{font-size:16px;padding:18px 18px}
  details p{padding:0 18px 20px}
  .f-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  footer{border-radius:36px 36px 0 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;translate:none}
  .hero .bg,.hero .fg,.hero h1{transform:none!important}
  .hero .sun{translate:-50% 0!important}
  .orb .cue .in{opacity:1}.orb .cue .out{opacity:0}
}