/* ---------- Meridian tokens ---------- */
:root{
  --ivory:#FAF6F3;
  --greige:#F3ECE7;
  --rose:#C9A6A1;
  --aubergine:#4B3B47;
  --sage:#AEBEB0;
  --champagne:#C8AE8C;
  --charcoal:#4A4341;
  --muted:#8A7F7B;
  --white:#ffffff;
  --serif:"Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:"Inter", "Mulish", "Nunito Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --maxw:1180px;
  --gutter:clamp(20px, 4vw, 48px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  color:var(--charcoal);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--aubergine);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
p{margin:0 0 1em}

/* ---------- Typography ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  color:var(--aubergine);
  letter-spacing:-0.01em;
  line-height:1.15;
  margin:0 0 0.5em;
}
h1{font-size:clamp(2.4rem, 5.2vw, 4rem);font-weight:500}
h2{font-size:clamp(1.9rem, 3.6vw, 2.85rem)}
h3{font-size:clamp(1.35rem, 2.2vw, 1.7rem)}
h4{font-size:1.1rem}
.eyebrow{
  font-family:var(--sans);
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
  margin:0 0 1rem;
  display:inline-block;
}
.lead{font-size:1.12rem;color:var(--charcoal);max-width:62ch}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:820px;margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(64px, 9vw, 112px) 0}
.section-greige{background:var(--greige)}
.section-ivory{background:var(--ivory)}
.section-sage{background:var(--sage);color:#2d2d2a}
.section-sage h2,.section-sage h3{color:var(--aubergine)}
.section-sage .eyebrow{color:#3f4a40}
.section-aubergine{background:var(--aubergine);color:var(--ivory)}
.section-aubergine h2,.section-aubergine h3,.section-aubergine .eyebrow{color:var(--ivory)}
.section-aubergine .eyebrow{color:#d8c9c5}

.rule{height:1px;background:var(--champagne);opacity:.55;border:0;margin:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:500;
  font-size:0.97rem;
  letter-spacing:0.02em;
  padding:14px 26px;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
  line-height:1.2;
}
.btn-primary{
  background:var(--aubergine);
  color:var(--white);
}
.btn-primary:hover{background:#3a2d37;text-decoration:none;transform:translateY(-1px);color:var(--white)}
.btn-outline{
  background:transparent;
  color:var(--aubergine);
  border-color:var(--aubergine);
}
.btn-outline:hover{background:var(--aubergine);color:var(--white);text-decoration:none}
.btn-ghost{
  background:transparent;
  color:var(--ivory);
  border-color:rgba(250,246,243,.55);
}
.btn-ghost:hover{background:var(--ivory);color:var(--aubergine);text-decoration:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:1.5rem}
.btn-row.center{justify-content:center}
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-weight:500;
  color:var(--aubergine);
  border-bottom:1px solid var(--rose);
  padding-bottom:2px;
}
.link-arrow:hover{text-decoration:none;border-bottom-color:var(--aubergine)}
.link-arrow::after{content:"→";transition:transform .2s ease}
.link-arrow:hover::after{transform:translateX(3px)}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,246,243,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(200,174,140,.35);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;
}
.brand{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-name{
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--aubergine);
  letter-spacing:0.01em;
  font-weight:500;
}
.brand-tag{
  font-family:var(--sans);
  font-size:0.66rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:4px;
}
.nav-links{
  display:flex;align-items:center;gap:30px;
  list-style:none;margin:0;padding:0;
}
.nav-links a{
  font-size:0.93rem;
  color:var(--charcoal);
  font-weight:400;
  letter-spacing:0.01em;
}
.nav-links a:hover{color:var(--aubergine);text-decoration:none}
.nav-links a.current{color:var(--aubergine);border-bottom:1px solid var(--rose);padding-bottom:2px}
/* nav CTA: button color must win over the generic .nav-links a rule */
.nav-links a.btn-primary{color:var(--white)}
.nav-links a.btn-primary:hover{color:var(--white);background:#3a2d37;text-decoration:none}
.nav-links a.btn-outline{color:var(--aubergine)}
.nav-links a.btn-outline:hover{color:var(--white)}
.nav-cta{margin-left:6px}
.menu-toggle{display:none;background:none;border:0;font-size:1.4rem;color:var(--aubergine);cursor:pointer}

/* ---------- Hero ---------- */
.hero{
  padding:clamp(70px, 9vw, 120px) 0 clamp(60px, 8vw, 100px);
  background:
    radial-gradient(ellipse at 85% 10%, rgba(201,166,161,.18), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(174,190,176,.16), transparent 55%),
    var(--ivory);
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px, 5vw, 72px);align-items:center;
}
.hero h1{margin-top:.25rem}
.hero .sub{
  font-size:clamp(1.05rem, 1.6vw, 1.22rem);
  color:var(--charcoal);
  max-width:54ch;
  margin-bottom:1.75rem;
}
figure.hero-visual{margin:0}
.hero-visual{
  position:relative;
  aspect-ratio: 4 / 5;
  border-radius:3px;
  overflow:hidden;
  background:var(--greige);
  box-shadow:0 30px 60px -30px rgba(75,59,71,.25);
  margin:0;
}
.hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-visual::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 45%, rgba(75,59,71,.42) 100%);
  pointer-events:none;
}
.hero-visual .caption{
  position:absolute; left:24px; bottom:20px; z-index:1;
  color:var(--ivory);
  font-family:var(--serif);
  font-size:1.1rem;
  letter-spacing:.02em;
  text-shadow:0 1px 12px rgba(75,59,71,.35);
}
/* Gradient fallback when no photo */
.hero-visual.placeholder{
  background:
    linear-gradient(135deg, rgba(75,59,71,.05), rgba(201,166,161,.18)),
    linear-gradient(160deg, var(--greige), #e6dcd5);
}
.hero-visual.placeholder::after{
  background:linear-gradient(90deg, transparent, var(--rose), transparent);
  inset:auto 8% 18%;
  height:1px;
}
.hero-visual.placeholder.sage{
  background:
    linear-gradient(135deg, rgba(75,59,71,.04), rgba(174,190,176,.25)),
    linear-gradient(160deg, #d4ddd5, var(--sage));
}
.hero-visual.placeholder.rose{
  background:
    linear-gradient(135deg, rgba(75,59,71,.05), rgba(201,166,161,.25)),
    linear-gradient(160deg, #eedcd9, var(--rose));
}
.brand-logo{
  display:block;
  height:48px;
  width:auto;
}
.footer-brand .brand-logo{
  height:52px;
  margin-bottom:8px;
}

/* ---------- Intro band ---------- */
.intro-band{text-align:center}
.intro-band p{
  font-family:var(--serif);
  font-size:clamp(1.35rem, 2.3vw, 1.8rem);
  color:var(--aubergine);
  font-weight:400;
  max-width:34ch;
  margin:0 auto;
  line-height:1.4;
}
.intro-prose p{
  font-size:clamp(1.05rem, 1.6vw, 1.2rem);
  color:var(--charcoal);
  max-width:60ch;
  margin-left:auto;margin-right:auto;
  text-align:center;
  line-height:1.6;
}

/* ---------- Cards grid (3/4 up) ---------- */
.section-head{max-width:62ch;margin-bottom:clamp(36px, 5vw, 56px)}
.section-head.center{text-align:center;margin-left:auto;margin-right:auto}
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2.6vw, 30px);
}
.cards.four{grid-template-columns:repeat(4, 1fr)}
.card{
  background:var(--ivory);
  border:1px solid rgba(200,174,140,.4);
  padding:clamp(28px, 3vw, 38px);
  border-radius:3px;
  display:flex;flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.section-greige .card{background:var(--white)}
.card:hover{transform:translateY(-3px);box-shadow:0 24px 40px -28px rgba(75,59,71,.3);border-color:var(--rose)}
.card-mark{
  width:38px;height:1px;background:var(--rose);margin-bottom:18px;
}
.card-num{
  font-family:var(--serif);
  font-size:1.2rem;
  color:var(--rose);
  margin-bottom:8px;
  display:block;
  letter-spacing:.05em;
}
.card h3{margin-bottom:.55em;font-size:1.4rem}
.card p{color:var(--charcoal);margin-bottom:0}

/* ---------- Tip cards (Weight Mgmt) ---------- */
.tips{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(20px, 2.6vw, 32px);
}
.tip{
  background:var(--white);
  border:1px solid rgba(200,174,140,.4);
  padding:clamp(28px, 3vw, 38px);
  border-radius:3px;
}
.tip h3{font-size:1.35rem;margin-bottom:.45em}
.tip p{color:var(--charcoal)}
.tip .link-arrow{margin-top:8px}

/* ---------- Teaser / two-up ---------- */
.teaser{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(32px, 5vw, 72px);
  align-items:center;
}
.teaser.reverse{grid-template-columns:1fr 1.05fr}
.teaser.reverse .teaser-text{order:2}
.teaser.reverse .teaser-visual{order:1}
.teaser-visual{
  position:relative;
  aspect-ratio: 5 / 4;
  border-radius:3px;
  background:linear-gradient(140deg, var(--greige), #ece1d8);
  overflow:hidden;
}
.teaser-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.teaser-visual:has(img)::after{display:none}
.teaser-visual.sage{background:linear-gradient(140deg, #cdd6cd, var(--sage))}
.teaser-visual.rose{background:linear-gradient(140deg, #e8d5d2, var(--rose))}
.teaser-visual::after{
  content:"";
  position:absolute;left:10%;right:10%;top:48%;height:1px;
  background:linear-gradient(90deg, transparent, rgba(75,59,71,.35), transparent);
}

/* ---------- Holistic band (sage) ---------- */
.holistic{text-align:center}
.holistic h2{max-width:24ch;margin-left:auto;margin-right:auto}
.holistic p{
  max-width:58ch;margin-left:auto;margin-right:auto;
  color:#2d3a2f;
  font-size:1.08rem;
}

/* ---------- Reassurance band (rose, soft) ---------- */
.reassure{
  background:#efd9d4;
  text-align:center;
}
.reassure p{
  font-family:var(--serif);
  font-size:clamp(1.4rem, 2.6vw, 1.95rem);
  color:var(--aubergine);
  max-width:32ch;
  margin:0 auto;
  line-height:1.4;
}

/* ---------- Trust strip ---------- */
.trust{
  background:var(--greige);
  padding:32px 0;
  border-top:1px solid rgba(200,174,140,.4);
  border-bottom:1px solid rgba(200,174,140,.4);
}
.trust-row{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(18px, 3vw, 44px);
  font-family:var(--sans);
  font-size:0.85rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.trust-row span{display:inline-flex;align-items:center}
.trust-row span + span::before{
  content:"·";
  margin-right:clamp(18px, 3vw, 44px);
  color:var(--rose);
}

/* ---------- Footer CTA ---------- */
.footer-cta{text-align:center}
.footer-cta h2{margin-bottom:.4em;max-width:24ch;margin-left:auto;margin-right:auto}
.footer-cta p{max-width:48ch;margin-left:auto;margin-right:auto;color:#e6dcd8}

/* ---------- About page ---------- */
.pull-quote{
  font-family:var(--serif);
  font-size:clamp(1.6rem, 3vw, 2.4rem);
  color:var(--aubergine);
  line-height:1.35;
  text-align:center;
  max-width:22ch;
  margin:0 auto clamp(40px, 6vw, 64px);
  position:relative;
}
.pull-quote::before,.pull-quote::after{
  content:"";
  display:block;
  width:46px;height:1px;
  background:var(--rose);
  margin:18px auto;
}
.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(36px, 5vw, 56px);
  max-width:760px;
  margin:0 auto;
}
.about-block h3{
  font-family:var(--sans);
  font-size:0.78rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--rose);
  font-weight:500;
  margin:0 0 .8em;
}
.about-block p{
  font-family:var(--serif);
  font-size:clamp(1.15rem, 1.8vw, 1.4rem);
  color:var(--charcoal);
  line-height:1.5;
  margin:0;
}
.about-visual{
  display:block;
  width:100%;
  aspect-ratio: 16 / 9;
  object-fit:cover;
  border-radius:3px;
  margin:clamp(40px, 6vw, 64px) auto 0;
  max-width:920px;
  box-shadow:0 24px 48px -28px rgba(75,59,71,.28);
}

/* ---------- Contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(36px, 5vw, 64px);
  align-items:start;
}
.form{
  background:var(--white);
  border:1px solid rgba(200,174,140,.4);
  padding:clamp(28px, 3.5vw, 44px);
  border-radius:3px;
}
.form label{
  display:block;
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 .4em;
  font-weight:500;
}
.form .field{margin-bottom:18px}
.form input,.form select,.form textarea{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:var(--charcoal);
  background:var(--ivory);
  border:1px solid rgba(200,174,140,.5);
  border-radius:2px;
  padding:12px 14px;
  transition:border-color .15s ease, background .15s ease;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;
  border-color:var(--aubergine);
  background:var(--white);
}
.form textarea{min-height:120px;resize:vertical}
.contact-side h3{font-size:1.3rem;margin-bottom:.4em}
.contact-side ul{list-style:none;padding:0;margin:0 0 1.4em}
.contact-side li{margin-bottom:8px;color:var(--charcoal)}
.contact-note{
  background:var(--greige);
  border-left:2px solid var(--rose);
  padding:18px 22px;
  border-radius:2px;
  font-size:0.97rem;
  color:var(--charcoal);
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--aubergine);
  color:#e1d7d3;
  padding:56px 0 32px;
  font-size:0.9rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(4, 1fr);
  gap:36px;
  align-items:start;
}
.footer-regulation{
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:0.88rem;
  color:#c8bdb9;
  text-align:center;
  line-height:1.5;
}
.footer-regulation a{color:var(--rose)}
.footer-regulation a:hover{color:var(--ivory)}
.thanksdoc-embed{padding:clamp(40px,6vw,72px) 0}
.thanksdoc-embed-note{
  text-align:center;
  max-width:52ch;
  margin:0 auto 1.25rem;
  font-size:0.95rem;
}
.iframe-wrap{
  background:var(--white);
  border:1px solid rgba(200,174,140,.45);
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 20px 40px -28px rgba(75,59,71,.2);
}
.iframe-wrap iframe{
  display:block;
  width:100%;
  height:min(78vh, 920px);
  min-height:560px;
  border:0;
}
.site-footer h4{
  font-family:var(--sans);
  font-size:0.78rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--rose);
  font-weight:500;
  margin:0 0 14px;
}
.site-footer a{color:#e1d7d3}
.site-footer a:hover{color:var(--white)}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.footer-brand .brand-name{color:var(--ivory)}
.footer-brand .brand-tag{color:var(--rose)}
.footer-brand p{margin-top:14px;max-width:34ch;color:#c8bdb9}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  margin-top:44px;padding-top:22px;
  padding-right:10rem;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  font-size:0.82rem;color:#b6aba6;
}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:60;
  background:var(--aubergine);
  color:var(--white);
  padding:12px 18px;
  border-radius:999px;
  font-size:0.88rem;
  letter-spacing:.02em;
  box-shadow:0 14px 30px -12px rgba(75,59,71,.5);
}
.wa-float:hover{background:#3a2d37;text-decoration:none;color:var(--white)}

/* ---------- Mobile ---------- */
@media (max-width: 880px){
  .hero-grid,.teaser,.teaser.reverse,.contact-grid{grid-template-columns:1fr}
  .teaser.reverse .teaser-text{order:1}
  .teaser.reverse .teaser-visual{order:2}
  .cards,.cards.four,.tips{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:flex-start;gap:0;
    background:var(--ivory);
    border-bottom:1px solid rgba(200,174,140,.4);
    padding:14px var(--gutter) 22px;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%;padding:10px 0;border-bottom:1px solid rgba(200,174,140,.25)}
  .nav-cta{margin-left:0;margin-top:8px}
  .menu-toggle{display:inline-flex}
}
@media (max-width: 520px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    padding-right:0;
    padding-bottom:4.5rem;
  }
  .hero-visual{aspect-ratio:5/4}
}
