/* =====================================================================
   Nefeli's Nature — stylesheet
   Sections: variables · base · nav · hero · features · philosophy ·
   atmosphere · products · faq · contact · footer · back-to-top · responsive
   ===================================================================== */

:root{
  --ivory:#F6F1E4;
  --ivory-2:#EFE8D6;
  --olive:#37541F;
  --olive-deep:#213716;
  --sage:#6FAF3F;
  --sage-soft:#8FBE66;
  --rust:#A6683D;
  --ink:#2A2A20;
  --cloud:#FFFEFB;
  --line: rgba(42,42,32,0.14);
  --shadow-soft: 0 18px 44px rgba(55,84,31,0.18);
  --header-h: 72px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ivory);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-tap-highlight-color:rgba(111,175,63,0.18);
}
h1,h2,h3,.display{
  font-family:'Fraunces', serif;
  font-weight:500;
  letter-spacing:-0.01em;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

/* keep anchored sections clear of the sticky header */
:target{scroll-margin-top:calc(var(--header-h) + 12px);}

/* ---------- SCROLL REVEAL ---------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.reveal.in{opacity:1; transform:none;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1 !important; transform:none !important;}
}

/* ---------- CLOUD SIGNATURE ---------- */
.cloud-divider{
  width:100%;
  height:80px;
  position:relative;
  overflow:hidden;
}
.cloud-divider svg{width:100%; height:100%; display:block;}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,241,228,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
nav.wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
  min-height:var(--header-h);
}
.brand{
  font-family:'Fraunces', serif;
  font-size:1.3rem;
  font-weight:600;
  display:flex; align-items:center; gap:12px;
  color:var(--olive-deep);
}
.brand .mark{
  width:38px; height:38px; flex:none;
  border-radius:50%;
  background:#fff;
  padding:3px;
  box-shadow:0 2px 8px rgba(60,74,45,0.14);
  object-fit:contain;
}
.navlinks{display:flex; gap:34px; font-size:0.92rem; letter-spacing:0.02em;}
.navlinks a{position:relative; padding:4px 0; color:var(--olive-deep);}
.navlinks a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--rust); transition:width .3s ease;
}
.navlinks a:hover::after{width:100%;}
.navlinks a:focus-visible, .btn:focus-visible{outline:2px solid var(--rust); outline-offset:3px;}

/* hamburger toggle — hidden on desktop */
.nav-toggle{
  display:none;
  width:44px; height:44px; flex:none;
  background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{
  width:22px; height:2px; background:var(--olive-deep); border-radius:2px;
  transition:transform .3s ease, opacity .25s ease;
}
.nav-toggle:focus-visible{outline:2px solid var(--rust); outline-offset:2px; border-radius:8px;}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  padding:96px 0 84px;
  overflow:hidden;
}
.hero .wrap{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
}
.hero-cloud-bg{
  position:absolute; top:-60px; right:-120px; width:560px; height:560px;
  opacity:0.5; z-index:1;
}
.eyebrow{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:0.22em;
  color:var(--rust); font-weight:600; margin-bottom:22px; display:block;
}
.hero h1{
  font-size:clamp(2.5rem, 5.2vw, 4.3rem);
  max-width:11.5ch;
  color:var(--olive-deep);
  line-height:1.05;
}
.hero h1 em{
  font-style:italic; font-weight:300; color:var(--rust);
}
.hero p.lede{
  max-width:46ch;
  font-size:1.13rem;
  margin-top:24px;
  color:#43462f;
}
.hero-actions{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}

/* framed hero product image */
.hero-media{position:relative; z-index:2;}
.hero-media .frame{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  aspect-ratio:4/5;
  background:var(--ivory-2);
}
.hero-media .badge{
  position:absolute; left:-18px; bottom:26px;
  background:var(--cloud);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 20px;
  box-shadow:var(--shadow-soft);
  display:flex; align-items:center; gap:12px;
}
.hero-media .badge b{
  font-family:'Fraunces', serif; font-size:1.5rem; color:var(--olive-deep); line-height:1;
}
.hero-media .badge span{font-size:0.76rem; color:#54573f; line-height:1.3; max-width:12ch;}

/* hero carousel */
.carousel{position:absolute; inset:0;}
.carousel img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0;
  transition:opacity .9s ease, transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.carousel img.active{opacity:1;}
.hero-media:hover .carousel img.active{transform:scale(1.04);}
.carousel-dots{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:3;
}
.carousel-dots button{
  width:9px; height:9px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,0.55); cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,0.25);
  transition:background .25s ease, transform .25s ease;
}
.carousel-dots button:hover{background:rgba(255,255,255,0.85);}
.carousel-dots button.active{background:#fff; transform:scale(1.25);}
.carousel-dots button:focus-visible{outline:2px solid var(--rust); outline-offset:2px;}

.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:100px;
  font-size:0.92rem;
  font-weight:500;
  letter-spacing:0.01em;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn-primary{background:var(--olive-deep); color:var(--ivory);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(42,51,32,0.25);}
.btn-ghost{border:1px solid var(--olive-deep); color:var(--olive-deep);}
.btn-ghost:hover{background:var(--olive-deep); color:var(--ivory);}

.puff{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0));
  filter:blur(1px);
  animation:drift 14s ease-in-out infinite;
  z-index:1;
}
@keyframes drift{
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(-14px);}
}

/* ---------- LOTUS ACCENTS (echo the logo flower) ---------- */
.lotus{display:block; pointer-events:none;}
.hero .lotus{position:absolute; z-index:1;}
.hero .lotus-1{width:58px; height:58px; top:132px; left:3%; opacity:0.55; animation:sway 9s ease-in-out infinite;}
.hero .lotus-2{width:36px; height:36px; bottom:64px; right:5%; opacity:0.45; animation:sway 11s ease-in-out infinite reverse;}
@keyframes sway{
  0%,100%{transform:translateY(0) rotate(-5deg);}
  50%{transform:translateY(-12px) rotate(5deg);}
}
.lotus-deco{
  position:absolute; right:-46px; bottom:-56px;
  width:290px; height:290px; opacity:0.13; z-index:1;
  transform:rotate(-12deg);
}
.foot-lotus{width:36px; height:36px; margin:0 auto 12px;}

/* ---------- TRUST / BENEFITS ROW ---------- */
.features{padding:52px 0 8px;}
.features .wrap{display:grid; grid-template-columns:repeat(4, 1fr); gap:22px;}
.feature{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px;
  padding:22px 16px;
}
.feature .ic{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(111,175,63,0.14);
  color:var(--olive);
}
.feature .ic svg{width:26px; height:26px;}
.feature b{font-family:'Fraunces', serif; font-weight:600; font-size:1rem; color:var(--olive-deep);}
.feature span{font-size:0.82rem; color:#54573f; max-width:18ch;}

/* ---------- PHILOSOPHY STRIP ---------- */
.philosophy{background:var(--olive-deep); color:var(--ivory-2); padding:64px 0; position:relative; overflow:hidden;}
.philosophy .wrap{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; position:relative; z-index:2;}
.philosophy h2{
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  color:var(--ivory); font-weight:400; font-style:italic;
}
.philosophy .stat-row{display:flex; gap:40px; margin-top:6px; flex-wrap:wrap;}
.philosophy .stat b{display:block; font-family:'Fraunces', serif; font-size:2rem; color:var(--sage);}
.philosophy .stat span{font-size:0.85rem; opacity:0.75;}
.philosophy p{opacity:0.85; font-size:1rem;}

/* ---------- ATMOSPHERE BAND ---------- */
.atmos{
  position:relative;
  min-height:clamp(300px, 46vw, 480px);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
}
.atmos img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  object-position:center 42%;
}
.atmos::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(42,51,32,0.35), rgba(42,51,32,0.62));
}
.atmos .wrap{position:relative; z-index:2; color:var(--ivory);}
.atmos p.q{
  font-family:'Fraunces', serif; font-style:italic; font-weight:400;
  font-size:clamp(1.5rem, 3.4vw, 2.4rem);
  line-height:1.25; max-width:20ch; margin:0 auto;
  text-shadow:0 2px 20px rgba(0,0,0,0.25);
}
.atmos span.sig{
  display:block; margin-top:22px;
  font-size:0.78rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ivory-2); opacity:0.85;
}

/* ---------- PRODUCTS ---------- */
.products{padding:100px 0 60px;}
.section-head{max-width:60ch; margin-bottom:56px;}
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(2rem, 4vw, 2.8rem); color:var(--olive-deep);}

.category{margin-bottom:84px;}
.category:last-child{margin-bottom:0;}
.category-head{
  display:flex; align-items:baseline; gap:18px; margin-bottom:34px;
  border-bottom:1px solid var(--line); padding-bottom:18px;
}
.category-head .num{
  font-family:'Fraunces', serif; font-style:italic; color:var(--rust); font-size:1.1rem;
}
.category-head h3{font-size:1.7rem; color:var(--olive-deep);}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:26px;
}
.card{
  background:var(--cloud);
  border-radius:22px;
  border:1px solid var(--line);
  overflow:hidden;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  position:relative;
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:transparent;}
.card-media{position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--ivory-2);}
.card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card-media img{transform:scale(1.06);}
/* image-less card: soft botanical placeholder */
.card-media.plain{
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 20%, #F1ECDC 0%, #E4DDC8 100%);
}
.card-media.plain svg{width:64px; height:64px; color:var(--sage); opacity:0.9;}

.card-body{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1;}
/* mythological name — small italic label above the product name */
.card-myth{
  display:block; font-family:'Fraunces', serif; font-style:italic;
  font-weight:600; font-size:0.98rem; letter-spacing:0.01em;
  color:var(--rust); margin-bottom:3px; line-height:1.2;
}
.card h4{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.14rem;
  color:var(--olive-deep); margin-bottom:9px; line-height:1.25;
}
/* discreet product code under the name */
.card-code{
  display:inline-block; margin:-3px 0 10px;
  font-size:0.7rem; font-weight:600; letter-spacing:0.09em;
  color:#a7a992;
}
.card p{font-size:0.92rem; color:#54573f;}

/* available sizes / bottles — small pills under the description */
.card-sizes{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px;}
.card-sizes .size{
  font-size:0.76rem; font-weight:600; letter-spacing:0.01em;
  color:var(--olive); background:rgba(111,175,63,0.12);
  border:1px solid rgba(111,175,63,0.28);
  padding:3px 11px; border-radius:100px;
}

/* subtle usage-instructions link — keeps qualities the focus */
.card-guide{
  margin-top:auto; align-self:center;
  background:none; border:0; padding:16px 0 0; cursor:pointer;
  font-family:'Inter', sans-serif; font-weight:600; font-size:0.84rem;
  letter-spacing:0.01em; color:var(--olive);
  display:inline-flex; align-items:center; gap:7px;
  transition:gap .25s ease, color .25s ease;
}
.card-guide:hover{gap:11px; color:var(--rust);}
.card-guide:focus-visible{outline:2px solid var(--rust); outline-offset:3px; border-radius:4px;}
.card-guide svg{width:15px; height:15px;}

/* ---------- USAGE QUICK-VIEW PANEL ---------- */
.guide-overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(33,55,22,0.42);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.guide-overlay.open{opacity:1; visibility:visible;}
.guide-sheet{
  position:relative;
  width:100%; max-width:520px; max-height:88vh; max-height:88dvh; overflow-y:auto;
  background:var(--cloud);
  border-radius:24px 24px 0 0;
  padding:32px 28px calc(34px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 44px rgba(33,55,22,0.28);
  transform:translateY(26px);
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
}
.guide-overlay.open .guide-sheet{transform:none;}
.guide-close{
  position:sticky; top:0; float:right; z-index:3;
  margin:-8px -6px -30px auto;   /* pin without reserving a full row */
  width:38px; height:38px; border-radius:50%;
  border:0; cursor:pointer;
  background:var(--ivory-2); color:var(--olive-deep);
  font-size:1.45rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(33,55,22,0.18);
  transition:background .25s ease;
}
.guide-close:hover{background:#e4dcc6;}
.guide-close:focus-visible{outline:2px solid var(--rust); outline-offset:2px;}
.guide-eyebrow{
  font-size:0.74rem; text-transform:uppercase; letter-spacing:0.2em;
  color:var(--rust); font-weight:600;
}
.guide-myth{
  display:block; font-family:'Fraunces', serif; font-style:italic;
  font-weight:600; font-size:1.12rem; letter-spacing:0.01em;
  color:var(--rust); margin:8px 44px 0 0; line-height:1.2;
}
.guide-sheet h3{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.5rem;
  color:var(--olive-deep); margin:6px 44px 12px 0;
}
.guide-myth + h3{margin-top:2px;}
.guide-code{
  display:inline-block; margin:-6px 0 14px;
  font-size:0.74rem; font-weight:600; letter-spacing:0.09em;
  color:#a7a992;
}
.guide-desc{
  font-size:0.96rem; color:#54573f; line-height:1.55;
  margin:0 0 6px;
}
.guide-row{display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-top:1px solid var(--line);}
.guide-ic{
  flex:none; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(111,175,63,0.14); color:var(--olive);
}
.guide-ic svg{width:22px; height:22px;}
.guide-row b{display:block; font-family:'Fraunces', serif; font-weight:600; color:var(--olive-deep); font-size:1rem; margin-bottom:3px;}
.guide-row p{font-size:0.95rem; color:#54573f;}
.guide-sizes{display:flex; flex-wrap:wrap; gap:7px; margin-top:5px;}
.guide-sizes .size{
  font-size:0.8rem; font-weight:600;
  color:var(--olive); background:rgba(111,175,63,0.12);
  border:1px solid rgba(111,175,63,0.28);
  padding:3px 12px; border-radius:100px;
}
@media (min-width:640px){
  .guide-overlay{align-items:center; padding:24px;}
  .guide-sheet{border-radius:24px;}
}

/* ---------- MYTH-NAME TIP (why this name?) ---------- */
/* the myth label becomes a tappable trigger when the product has a mythTip */
.myth-tip-btn{
  background:none; border:0; padding:0; cursor:pointer; text-align:left;
}
.myth-tip-btn::after{
  content:"i";
  display:inline-block; width:13px; height:13px; margin-left:6px;
  border-radius:50%; border:1px solid rgba(166,104,61,0.6);
  font:600 9px/11px 'Inter', sans-serif;
  text-align:center; vertical-align:2px; opacity:0.85;
}
.myth-tip-btn[aria-expanded="true"]::after,
.myth-tip-btn:hover::after{
  background:var(--rust); border-color:var(--rust); color:var(--cloud);
}
/* the floating bubble itself (positioned by initMythTips) */
.myth-tip{
  position:fixed; z-index:120;
  max-width:min(300px, calc(100vw - 24px));
  padding:11px 14px; border-radius:12px;
  background:var(--olive-deep); color:var(--ivory);
  font-size:0.86rem; line-height:1.55;
  box-shadow:0 12px 30px rgba(33,55,22,0.35);
}
/* the tip shown as a small "why this name" callout inside the usage panel,
   tied by colour to the rust myth name above it */
.guide-mythtip{
  font-size:0.88rem; font-style:italic; color:#6b5140;
  line-height:1.55; margin:8px 0 14px; padding:9px 14px;
  border-left:2px solid var(--rust);
  background:rgba(166,104,61,0.07); border-radius:0 8px 8px 0;
}

/* ---------- SKIN-CONCERN GUIDE (interactive picker) ---------- */
.guide{padding:96px 0 12px;}
.guide .section-head{margin-bottom:34px;}
.guide-intro{margin-top:14px; font-size:1.02rem; color:#43462f; max-width:52ch;}

/* selectable concern chips */
.concern-chips{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px;}
.chip{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px; border-radius:100px; cursor:pointer;
  background:var(--cloud); border:1px solid var(--line);
  font-family:'Inter', sans-serif; font-size:0.92rem; font-weight:500; color:var(--olive-deep);
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}
.chip svg{width:18px; height:18px; color:var(--sage); transition:color .25s ease;}
.chip:hover{border-color:var(--sage-soft); transform:translateY(-1px);}
.chip:focus-visible{outline:2px solid var(--rust); outline-offset:3px;}
.chip.active{background:var(--olive-deep); border-color:var(--olive-deep); color:var(--ivory);}
.chip.active svg{color:var(--sage);}

/* the "recommended for you" result panel */
.concern-result{
  display:grid; grid-template-columns:minmax(0,240px) 1fr; gap:32px; align-items:center;
  background:var(--cloud); border:1px solid var(--line); border-radius:24px;
  padding:24px; box-shadow:var(--shadow-soft);
}
.cr-media{border-radius:18px; overflow:hidden; aspect-ratio:1/1; background:var(--ivory-2);}
.cr-media img{width:100%; height:100%; object-fit:cover;}
.cr-media.plain{
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 30% 20%, #F1ECDC 0%, #E4DDC8 100%);
}
.cr-media.plain svg{width:70px; height:70px; color:var(--sage); opacity:0.9;}
.cr-body{padding:6px 8px 6px 0;}
.cr-eyebrow{
  font-size:0.74rem; text-transform:uppercase; letter-spacing:0.18em;
  color:var(--rust); font-weight:600;
}
.cr-myth{
  display:block; font-family:'Fraunces', serif; font-style:italic;
  font-weight:600; font-size:1.16rem; letter-spacing:0.01em;
  color:var(--rust); margin:9px 0 0; line-height:1.2;
}
.cr-body h3{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.5rem;
  color:var(--olive-deep); margin:8px 0 10px; line-height:1.2;
}
.cr-myth + h3{margin-top:2px;}
.cr-body p{font-size:0.96rem; color:#54573f; margin-bottom:22px; max-width:48ch;}
.cr-cta{border:0; display:inline-flex; align-items:center;}
.cr-cta svg{width:16px; height:16px; margin-left:8px;}

/* soft cross-fade when the selection changes */
.concern-result.swap{animation:crSwap .45s ease;}
@keyframes crSwap{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

@media (max-width:640px){
  .concern-result{grid-template-columns:1fr; gap:18px; text-align:center; padding:20px;}
  .cr-media{max-width:220px; margin:0 auto;}
  .cr-body{padding:0;}
  .cr-body p{margin-left:auto; margin-right:auto;}
}

/* ---------- FAQ ---------- */
.faq{padding:88px 0 96px;}
.faq .section-head{margin-bottom:40px;}
.faq-list{max-width:760px;}
.faq details{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--cloud);
  padding:4px 22px;
  margin-bottom:14px;
  transition:box-shadow .3s ease, border-color .3s ease;
}
.faq details[open]{box-shadow:var(--shadow-soft); border-color:transparent;}
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 0;
  font-family:'Fraunces', serif; font-weight:600; font-size:1.06rem; color:var(--olive-deep);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .plus{flex:none; width:24px; height:24px; position:relative; transition:transform .3s ease;}
.faq summary .plus::before, .faq summary .plus::after{
  content:''; position:absolute; top:50%; left:50%;
  width:13px; height:2px; background:var(--sage); border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq summary .plus::after{transform:translate(-50%,-50%) rotate(90deg); transition:transform .3s ease;}
.faq details[open] summary .plus::after{transform:translate(-50%,-50%) rotate(0deg);}
.faq details p{padding:0 0 20px; font-size:0.95rem; color:#54573f; max-width:64ch;}
.faq details p a{color:var(--rust); text-decoration:underline; text-underline-offset:2px;}

/* ---------- CONTACT ---------- */
.contact{background:var(--ivory-2); padding:100px 0 90px; position:relative; overflow:hidden;}
.contact .wrap{position:relative; z-index:2; text-align:center; max-width:640px;}
.contact h2{font-size:clamp(2rem,4vw,2.8rem); color:var(--olive-deep); margin-bottom:20px;}
.contact p{font-size:1.05rem; color:#43462f; margin-bottom:38px;}
/* contact form (posts to a Google Form) */
.cform{max-width:560px; margin:0 auto; text-align:left;}
.cform-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.cfield{display:block; margin-bottom:16px;}
.cfield > span{
  display:block; font-size:0.82rem; font-weight:600; letter-spacing:0.01em;
  color:var(--olive-deep); margin-bottom:7px;
}
.cform input, .cform select, .cform textarea{
  width:100%; font-family:'Inter', sans-serif; font-size:0.95rem; color:var(--ink);
  background:var(--cloud); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cform textarea{resize:vertical; min-height:112px;}
.cform input::placeholder, .cform textarea::placeholder{color:#9a9c86;}
.cform input:focus, .cform select:focus, .cform textarea:focus{
  outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(111,175,63,0.18);
}
.cform-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.cform-foot{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:14px;}
.cform-submit{border:0; display:inline-flex; align-items:center; cursor:pointer;}
.cform-submit svg{width:16px; height:16px; margin-left:8px;}
.cform-submit:disabled{opacity:0.6; cursor:default; transform:none;}
.cform-status{font-size:0.88rem; color:#54573f; margin:0;}
.cform-status.err{color:var(--rust);}
.cfield .req{color:var(--rust); font-style:normal; margin-left:3px;}
.cform-note{font-size:0.76rem; color:#8a8c70; margin:14px 0 0;}
.cform-note .req{color:var(--rust); font-style:normal;}
.cform-privacy{
  display:flex; align-items:flex-start; gap:8px;
  font-size:0.76rem; line-height:1.5; color:#8a8c70; margin:8px 0 0;
}
.cform-privacy svg{width:15px; height:15px; flex:none; margin-top:1px; color:var(--sage);}
.cform-privacy b{font-weight:600; color:#6b6e52;}
.cform-privacy a{color:var(--olive); font-weight:600; text-decoration:underline; text-underline-offset:2px;}
.cform-privacy a:hover{color:var(--rust);}
.cform-done{
  max-width:560px; margin:0 auto; text-align:center;
  background:var(--cloud); border:1px solid var(--line); border-radius:18px;
  padding:32px 24px; box-shadow:var(--shadow-soft);
}
.cform-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; margin-bottom:12px;
  background:rgba(111,175,63,0.16); color:var(--olive); font-size:1.4rem;
}
.cform-done b{
  display:block; font-family:'Fraunces', serif; font-size:1.3rem;
  color:var(--olive-deep); margin-bottom:6px;
}
.cform-done p{color:#54573f; margin:0;}
.contact-or{
  margin:30px 0 18px; font-size:0.85rem; letter-spacing:0.02em;
  color:#8a8c70;
}

.contact-links{display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
.contact-links a{
  display:flex; align-items:center; gap:10px;
  background:var(--cloud); border:1px solid var(--line);
  padding:14px 26px; border-radius:100px; font-size:0.95rem;
  transition:transform .25s ease, box-shadow .25s ease;
}
.contact-links a:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(60,74,45,0.14);}
.contact-links svg{width:18px; height:18px; color:var(--rust);}
.contact-cards{display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; margin-top:48px;}
.contact-cards figure{margin:0;}
.contact-cards .ph{
  display:block; position:relative; overflow:hidden; border-radius:20px;
  border:1px solid var(--line); box-shadow:var(--shadow-soft);
}
.contact-cards img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
.contact-cards figure:hover img{transform:scale(1.04);}
.contact-cards figcaption{
  margin-top:12px; font-size:0.86rem; color:#54573f;
  font-family:'Fraunces', serif; font-style:italic;
}

footer{padding:32px 0; text-align:center; font-size:0.82rem; color:#6b6e52;}
footer .foot-brand{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:8px;}
footer .foot-brand img{width:30px; height:30px; border-radius:50%; background:#fff; padding:2px;}
footer .foot-links{margin-top:10px;}
footer .foot-links a{
  color:var(--olive); text-decoration:underline; text-underline-offset:2px;
  transition:color .2s ease;
}
footer .foot-links a:hover{color:var(--rust);}

/* ---------- LEGAL PAGES (privacy policy) ---------- */
.legal{padding-top:52px; padding-bottom:84px; max-width:780px;}
.legal-back{
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.88rem; font-weight:500; color:var(--olive); margin-bottom:26px;
}
.legal-back svg{width:16px; height:16px;}
.legal-back:hover{color:var(--rust);}
.legal h1{font-size:clamp(2rem, 4vw, 2.6rem); color:var(--olive-deep); margin-bottom:8px;}
.legal-updated{font-size:0.85rem; color:#8a8c70; margin-bottom:30px;}
.legal h2{
  font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem;
  color:var(--olive-deep); margin:34px 0 10px;
}
.legal p, .legal li{font-size:0.96rem; color:#43462f; line-height:1.7;}
.legal ul{margin:8px 0 8px 22px;}
.legal li{margin-bottom:6px;}
.legal a{color:var(--rust); text-decoration:underline; text-underline-offset:2px;}
.legal strong{color:var(--olive-deep);}

/* ---------- BACK TO TOP ---------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:48px; height:48px; border-radius:50%;
  background:var(--olive-deep); color:var(--ivory);
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(33,55,22,0.32);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s ease, background .25s ease;
}
.to-top.show{opacity:1; visibility:visible; transform:none;}
.to-top:hover{background:var(--olive);}
.to-top:focus-visible{outline:2px solid var(--rust); outline-offset:3px;}
.to-top svg{width:22px; height:22px;}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:960px){
  .features .wrap{gap:12px;}
}

/* tablet / large phone */
@media (max-width:860px){
  /* 16px prevents iOS Safari from auto-zooming when a field is focused */
  .cform input, .cform select, .cform textarea{font-size:16px;}
  .hero .wrap{grid-template-columns:1fr; gap:40px;}
  .hero-copy{text-align:center;}
  .hero h1{max-width:none;}
  .hero p.lede{max-width:52ch; margin-left:auto; margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-media{max-width:420px; margin:0 auto; width:100%;}
  .philosophy .wrap{grid-template-columns:1fr; gap:26px;}
}

/* phones — collapse nav to a hamburger */
@media (max-width:760px){
  .nav-toggle{display:flex;}
  .brand span.name{font-size:1.15rem;}

  .navlinks{
    position:absolute; top:calc(100% + 8px); left:12px; right:12px;
    flex-direction:column; gap:0;
    background:#f9f5eb;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border:2px solid rgba(42,42,32,0.5);
    border-radius:16px;
    padding:6px 22px 12px;
    box-shadow:0 20px 44px rgba(33,55,22,0.28), 0 3px 10px rgba(33,55,22,0.18);
    max-height:0; overflow:hidden; opacity:0; visibility:hidden;
    transition:max-height .35s ease, opacity .3s ease, visibility .3s ease;
  }
  .navlinks.open{max-height:70vh; opacity:1; visibility:visible;}
  .navlinks a{
    padding:15px 2px; width:100%; font-size:1.02rem;
    border-bottom:1px solid var(--line);
  }
  .navlinks a:last-child{border-bottom:0;}
  .navlinks a::after{display:none;}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .hero{padding:64px 0 52px;}
  .hero .wrap{gap:34px;}
  .hero-cloud-bg{width:340px; height:340px; top:-20px; right:-140px;}

  .features{padding:40px 0 4px;}
  .features .wrap{grid-template-columns:repeat(2, 1fr); gap:6px;}
  .feature{padding:18px 10px;}

  .guide{padding:64px 0 8px;}
  .products{padding:72px 0 44px;}
  .category{margin-bottom:60px;}
  .section-head{margin-bottom:40px;}

  .faq{padding:60px 0 68px;}
  .contact{padding:72px 0 68px;}
  .atmos{min-height:340px;}
}

/* small phones */
@media (max-width:520px){
  .wrap{padding:0 20px;}
  .navlinks{padding:6px 20px 14px;}

  .hero{padding:52px 0 44px;}
  .hero h1{font-size:clamp(2.1rem, 8.5vw, 2.9rem);}
  .hero p.lede{font-size:1.05rem;}
  .hero-actions{gap:12px;}
  .hero-actions .btn{flex:1 1 auto; text-align:center;}
  .hero-media{max-width:340px;}
  .hero-media .badge{left:8px; bottom:12px; padding:11px 15px;}
  .hero-media .badge b{font-size:1.25rem;}

  .features .wrap{grid-template-columns:1fr 1fr;}
  .philosophy{padding:48px 0;}
  .philosophy .stat-row{gap:26px;}

  .category-head h3{font-size:1.4rem;}
  .grid{gap:18px;}
  .card-media{aspect-ratio:4/3;}

  .faq details{padding:2px 18px;}
  .faq summary{font-size:0.98rem; padding:16px 0;}

  .contact-cards{grid-template-columns:1fr; gap:18px;}
  .cform-row{grid-template-columns:1fr; gap:0;}
  .cform-foot{flex-direction:column; align-items:stretch; gap:12px; text-align:center;}
  .cform-submit{justify-content:center;}
  .to-top{right:16px; bottom:16px; width:44px; height:44px;}
}