/* ═══════════════════════════════════════════
   NourishYou  |  Shared Stylesheet
   Light, airy, feminine wellness aesthetic
   ═══════════════════════════════════════════ */

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font:inherit}
input,select,textarea{font:inherit}
ul{list-style:none}

/* VARIABLES */
:root{
  --coral:      #E8735A;
  --coral-dark: #D05A42;
  --coral-lt:   #F4A77A;
  --peach:      #EBB4A0;
  --peach-lt:   #FBDCC8;
  --peach-pale: #FEF4EF;
  --sage:       #A8BFA3;
  --sage-dark:  #7A9A74;
  --sage-lt:    #C8D9C4;
  --sage-pale:  #EEF4ED;
  --lav:        #C786D6;
  --lav-lt:     #DDB3E8;
  --lav-pale:   #F5E8FA;
  --cream:      #F5EDE6;
  --cream-dark: #E8DDD4;
  --bg:         #FAF9F7;
  --white:      #FFFFFF;
  --ink:        #2D2A2E;
  --ink-mid:    #6B5E5A;
  --ink-lt:     #9A8A82;
  --gold:       #C8A068;
  --serif:  'Playfair Display',Georgia,serif;
  --script: 'Dancing Script',cursive;
  --sans:   'Lato',sans-serif;
  --sp:     clamp(60px,8vw,96px);
  --sp-sm:  clamp(40px,5vw,60px);
  --r-pill: 50px;
  --r-card: 20px;
  --r-lg:   28px;
  --r-xl:   36px;
  --sh-xs:  0 1px 6px rgba(45,42,46,.06);
  --sh-sm:  0 2px 14px rgba(45,42,46,.08);
  --sh-md:  0 8px 32px rgba(45,42,46,.11);
  --sh-lg:  0 20px 56px rgba(45,42,46,.14);
}

/* BASE */
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ── NAV ──────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:110px;
  background:rgba(250,249,247,.94);
  backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:border-color .3s,box-shadow .3s;
  padding:0 clamp(20px,5vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav.scrolled{border-color:var(--cream-dark);box-shadow:0 2px 20px rgba(45,42,46,.07)}

.nav-logo{display:flex;align-items:center;flex-shrink:0;gap:0}
.nav-logo-img{height:100px;width:auto;max-width:220px;object-fit:contain}
.nav-logo-text{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink)}
.nav-logo-text span{color:var(--coral)}

.nav-links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.nav-link{font-size:14px;font-weight:700;color:var(--ink-mid);padding:7px 13px;border-radius:var(--r-pill);transition:color .2s,background .2s;white-space:nowrap}
.nav-link:hover{color:var(--coral);background:var(--peach-pale)}
.nav-link.active{color:var(--coral)}

.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* Hamburger */
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.nav-drawer{
  display:none;position:fixed;
  top:110px;left:0;right:0;
  background:var(--bg);
  border-bottom:1px solid var(--cream-dark);
  box-shadow:var(--sh-md);
  padding:16px clamp(20px,5vw,56px) 24px;
  z-index:199;
  flex-direction:column;gap:2px;
}
.nav-drawer.open{display:flex}
.nav-drawer .nav-link{font-size:15px;padding:12px 16px;border-radius:14px}
.nav-drawer-cta{margin-top:12px;display:flex}
.nav-drawer-cta .btn{width:100%;justify-content:center}

@media(max-width:820px){
  .nav-links{display:none}
  .nav-right .btn{display:none}
  .nav-toggle{display:flex}
}

/* ── BUTTONS ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-size:14px;font-weight:700;
  letter-spacing:.03em;padding:13px 28px;
  border-radius:var(--r-pill);transition:all .22s ease;
  cursor:pointer;border:2px solid transparent;white-space:nowrap;
}
.btn-primary{background:var(--coral);color:#fff;border-color:var(--coral);box-shadow:0 4px 16px rgba(232,115,90,.28)}
.btn-primary:hover{background:var(--coral-dark);border-color:var(--coral-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(208,90,66,.32)}
.btn-outline{background:transparent;color:var(--coral);border-color:var(--coral)}
.btn-outline:hover{background:var(--peach-pale);transform:translateY(-2px)}
.btn-soft{background:var(--peach-pale);color:var(--coral-dark);border-color:var(--peach-lt)}
.btn-soft:hover{background:var(--peach-lt);transform:translateY(-2px)}
.btn-sage{background:var(--sage-pale);color:var(--sage-dark);border-color:var(--sage-lt)}
.btn-sage:hover{background:var(--sage-lt);transform:translateY(-2px)}
.btn-white{background:var(--white);color:var(--coral);border-color:var(--white);box-shadow:var(--sh-sm)}
.btn-white:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-lg{font-size:15px;padding:15px 38px}
.btn-sm{font-size:13px;padding:9px 20px}
.btn-block{width:100%;justify-content:center}

/* ── TYPOGRAPHY ──────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--sage-dark);
}
.eyebrow::before{content:'';width:18px;height:1.5px;background:currentColor;flex-shrink:0}
.section-title{
  font-family:var(--serif);
  font-size:clamp(24px,4vw,42px);
  font-weight:500;line-height:1.18;color:var(--ink);
}
.section-title em{font-style:italic;color:var(--coral)}
.section-body{font-size:16.5px;font-weight:300;line-height:1.9;color:var(--ink-mid);max-width:560px}
.soft-rule{width:36px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--peach),var(--coral-lt));margin:14px 0}
.soft-rule.center{margin-left:auto;margin-right:auto}
.script{font-family:var(--script);font-size:clamp(38px,6.5vw,68px);color:var(--peach);line-height:1.05}

/* ── LAYOUT ──────────────────────────────── */
.wrap{padding:var(--sp) clamp(20px,5vw,64px)}
.wrap-sm{padding:var(--sp-sm) clamp(20px,5vw,64px)}
.container{max-width:1100px;margin:0 auto}
.container-sm{max-width:720px;margin:0 auto}
.container-xs{max-width:540px;margin:0 auto}
.pt-nav{padding-top:110px}

/* Section backgrounds */
.s-white{background:var(--white)}
.s-bg{background:var(--bg)}
.s-cream{background:var(--cream)}
.s-sage{background:var(--sage-pale)}
.s-peach{background:var(--peach-pale)}

/* ── CARDS ───────────────────────────────── */
.card{
  background:var(--white);border-radius:var(--r-card);
  border:1px solid var(--cream-dark);padding:26px 22px;
  box-shadow:var(--sh-xs);transition:transform .3s,box-shadow .3s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.card-top-coral{border-top:3px solid var(--coral)}
.card-top-sage{border-top:3px solid var(--sage-dark)}
.card-top-lav{border-top:3px solid var(--lav)}
.icon-box{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;flex-shrink:0}
.ib-coral{background:var(--peach-pale)}
.ib-sage{background:var(--sage-pale)}
.ib-lav{background:var(--lav-pale)}

/* ── BADGES ──────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:5px 13px;border-radius:var(--r-pill)}
.badge-coral{background:var(--peach-pale);color:var(--coral-dark)}
.badge-sage{background:var(--sage-pale);color:var(--sage-dark)}
.badge-lav{background:var(--lav-pale);color:var(--lav)}
.badge-cream{background:var(--cream);color:var(--ink-mid);border:1px solid var(--cream-dark)}

/* ── FORMS ───────────────────────────────── */
.form-field{display:flex;flex-direction:column;gap:7px}
.form-label{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:.02em}
.form-input,.form-select,.form-textarea{
  width:100%;padding:13px 16px;
  background:var(--white);border:1.5px solid var(--cream-dark);
  border-radius:12px;font-size:14px;color:var(--ink);
  transition:border-color .2s,box-shadow .2s;outline:none;appearance:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--coral);box-shadow:0 0 0 3px rgba(232,115,90,.1)
}
.form-textarea{resize:vertical;min-height:110px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}

.toggle-group{display:flex;background:var(--cream);border-radius:var(--r-pill);padding:3px;gap:2px;width:fit-content}
.toggle-opt{padding:7px 17px;border-radius:var(--r-pill);font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;color:var(--ink-mid)}
.toggle-opt.active{background:var(--white);color:var(--coral);box-shadow:var(--sh-xs)}

/* Step progress */
.step-bar{display:flex;align-items:center;margin-bottom:34px;max-width:460px}
.step-dot{width:31px;height:31px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;transition:all .3s;background:var(--cream);color:var(--ink-lt);border:2px solid var(--cream-dark)}
.step-dot.active{background:var(--coral);color:#fff;border-color:var(--coral);box-shadow:0 4px 12px rgba(232,115,90,.3)}
.step-dot.done{background:var(--sage-dark);color:#fff;border-color:var(--sage-dark)}
.step-line{flex:1;height:2px;background:var(--cream-dark);transition:background .3s}
.step-line.done{background:var(--sage-dark)}

/* ── FEATURE ROWS ────────────────────────── */
.feat-row{
  display:grid;grid-template-columns:1fr 1fr;gap:72px;
  align-items:center;max-width:1100px;margin:0 auto;
  padding:var(--sp) clamp(20px,5vw,64px);
}
.feat-row+.feat-row{border-top:1px solid var(--cream-dark)}
.feat-row.flip{direction:rtl}
.feat-row.flip>*{direction:ltr}
.feat-photo{border-radius:var(--r-xl);overflow:hidden;position:relative}
.feat-photo img{width:100%;height:360px;object-fit:cover;display:block;transition:transform .5s ease}
.feat-photo:hover img{transform:scale(1.04)}
.feat-photo-badge{
  position:absolute;bottom:16px;left:16px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
  border-radius:12px;padding:10px 15px;box-shadow:var(--sh-sm);
}
.fpb-val{font-family:var(--serif);font-size:22px;font-weight:700;color:var(--coral);line-height:1}
.fpb-lbl{font-size:10px;color:var(--ink-mid)}
.feat-list{list-style:none;margin:14px 0 24px;display:flex;flex-direction:column;gap:9px}
.feat-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-mid);line-height:1.6}
.feat-list li::before{content:'✓';color:var(--sage-dark);font-weight:700;flex-shrink:0;margin-top:2px}
@media(max-width:900px){.feat-row{grid-template-columns:1fr;gap:26px}.feat-row.flip{direction:ltr}.feat-photo img{height:260px}}

/* ── REVEAL ANIMATIONS ───────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}
.r1{transition-delay:.08s}.r2{transition-delay:.16s}.r3{transition-delay:.24s}
.r4{transition-delay:.32s}.r5{transition-delay:.40s}

/* ── FOOTER ──────────────────────────────── */
footer{background:var(--ink);color:rgba(250,249,247,.6);padding:clamp(48px,6vw,72px) clamp(20px,5vw,64px) 32px}
.footer-inner{max-width:1100px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(250,249,247,.08);margin-bottom:26px}
.footer-brand-name{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--bg);margin-bottom:8px}
.footer-brand-name span{color:var(--peach)}
.footer-brand p{font-size:13px;line-height:1.8;color:rgba(250,249,247,.4);max-width:220px;margin-top:4px}
.footer-col h4{font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(250,249,247,.55);margin-bottom:14px}
.footer-col a{display:block;font-size:13px;color:rgba(250,249,247,.45);margin-bottom:10px;transition:color .2s}
.footer-col a:hover{color:var(--peach)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.footer-bottom p{font-size:11px;color:rgba(250,249,247,.55)}
.footer-socials{display:flex;gap:8px}
.footer-socials a{width:33px;height:33px;border-radius:50%;background:rgba(250,249,247,.06);border:1px solid rgba(250,249,247,.1);display:flex;align-items:center;justify-content:center;font-size:13px;transition:background .2s}
.footer-socials a:hover{background:rgba(232,115,90,.3)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;text-align:center}}

/* ── FAQ ─────────────────────────────────── */
.faq-item{border-bottom:1px solid var(--cream-dark)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:17px 0;cursor:pointer;font-family:var(--serif);font-size:16px;font-weight:500;color:var(--ink);background:none;border:none;text-align:left;gap:12px}
.faq-q::after{content:'+';font-family:var(--sans);font-size:22px;color:var(--coral);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-item.open .faq-a{max-height:300px}
.faq-a p{font-size:14px;color:var(--ink-mid);line-height:1.85;padding-bottom:18px}
.faq-a a{color:var(--coral);font-weight:700}

/* ── MOBILE CTA ──────────────────────────── */
.mob-cta{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:90;display:none;box-shadow:0 8px 28px rgba(232,115,90,.4)}
@media(max-width:640px){.mob-cta{display:inline-flex}}

/* ── SHARED NAV JS SNIPPET ───────────────── */
/* (included in each page's <script>) */
