/* =========================================================
   CHARLINE COACHING · SHARED STYLES
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  /* warm neutrals */
  --bg:        #FAF6EE;
  --bg-soft:   #F0E7D8;
  --bg-deep:   #E9DCC4;
  --ink:       #1A1410;
  --body:      #3A332A;
  --muted:     #6E5E4E;
  --rule:      #D8C4A1;
  /* gold (kept) */
  --gold:      #B89478;
  --gold-d:    #8B6F47;
  /* OLIVE (accent) */
  --olive:     #2F4A3D;
  --olive-d:   #1F3328;
  --olive-l:   #3D4E3F;
  --olive-50:  rgba(47, 74, 61, .08);
  --olive-12:  rgba(47, 74, 61, .12);
  /* type */
  --serif: 'Cormorant Garamond', 'Georgia', serif;
  --sans:  'Inter', system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--body);
  background:var(--bg);
  font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--olive); color:var(--bg);}

/* ---------- LAYOUT ---------- */
.container{max-width:1180px; margin:0 auto; padding:0 28px;}
.narrow{max-width:780px; margin:0 auto;}
section{padding:120px 0; position:relative;}
@media (max-width:720px){ section{padding:80px 0;} }

/* ---------- TYPE ---------- */
.eyebrow{
  font-family:var(--sans); font-weight:500;
  text-transform:uppercase; letter-spacing:.28em;
  font-size:11px; color:var(--olive);
  margin-bottom:22px;
}
h1, h2, h3, h4{
  font-family:var(--serif); color:var(--ink);
  font-weight:500; letter-spacing:-.01em;
}
h1{font-size:clamp(38px, 6vw, 76px); line-height:1.04;}
h2{font-size:clamp(30px, 4.4vw, 50px); line-height:1.12; margin-bottom:24px;}
h3{font-size:clamp(22px, 2.4vw, 28px); line-height:1.25; margin-bottom:14px;}
h4{font-size:20px; line-height:1.3; margin-bottom:8px;}
p{margin-bottom:18px;}
p:last-child{margin-bottom:0;}
em.italic{font-family:var(--serif); font-style:italic; font-size:1.06em;}
.accent-olive{color:var(--olive); font-style:italic;}
.accent-gold{color:var(--gold-d); font-style:italic;}

.rule{
  width:60px; height:1px;
  background:var(--olive);
  margin:0 auto 28px;
}
.rule.left{margin-left:0;}
.rule.gold{background:var(--gold);}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 36px;
  font-family:var(--sans); font-weight:500;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  background:var(--olive); color:#fff;
  border:1px solid var(--olive);
  transition:all .35s ease;
  cursor:pointer;
}
.btn:hover{background:var(--olive-d); border-color:var(--olive-d); transform:translateY(-1px);}
.btn.outline{background:transparent; color:var(--ink); border-color:var(--ink);}
.btn.outline:hover{background:var(--ink); color:#fff;}
.btn.ink{background:var(--ink); border-color:var(--ink);}
.btn.ink:hover{background:var(--olive); border-color:var(--olive);}
.btn .arrow{transition:transform .3s ease;}
.btn:hover .arrow{transform:translateX(4px);}

/* ---------- NAV ---------- */
nav{
  position:sticky; top:0; z-index:50;
  background:rgba(250,246,238,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 28px; max-width:1180px; margin:0 auto;
}
.logo{
  font-family:var(--serif); font-size:24px; font-weight:600;
  color:var(--ink); letter-spacing:.02em;
}
.logo span{color:var(--olive); font-style:italic; font-weight:400;}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--body); transition:color .2s; position:relative;
}
.nav-links a:hover{color:var(--olive);}
.nav-links a.active{color:var(--olive);}
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px;
  height:1px; background:var(--olive);
}
.nav-cta{
  padding:10px 22px; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; background:var(--olive); color:#fff !important;
  transition:background .3s;
}
.nav-cta:hover{background:var(--olive-d) !important;}
.nav-cta.active::after{display:none;}
@media (max-width:820px){ .nav-links a:not(.nav-cta){display:none;} }

/* ---------- HERO ---------- */
.hero{
  padding:90px 0 60px;
  background:
    radial-gradient(ellipse at 80% 20%, #F0E7D8 0%, transparent 60%),
    radial-gradient(ellipse at 10% 90%, #E9DCC4 0%, transparent 50%),
    var(--bg);
}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:center;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:50px;} }
.hero h1 .accent{font-style:italic; color:var(--olive);}
.hero .sub{
  font-size:18px; color:var(--muted); margin:32px 0 12px;
  max-width:540px; line-height:1.7;
}
.hero .micro{
  font-family:var(--serif); font-style:italic; font-size:18px;
  color:var(--olive); margin-bottom:40px;
  letter-spacing:.01em;
}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.hero-image{
  aspect-ratio:4/5;
  background:
    linear-gradient(135deg, #E9DCC4 0%, #D8C4A1 50%, #B89478 100%);
  border-radius:2px;
  position:relative; overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(47, 74, 61, .35);
}
.hero-image::after{
  content:"Replace with hero photo of Charline";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; color:rgba(255,255,255,.7);
  font-size:14px; padding:20px; text-align:center;
}

/* ---------- TRUST STRIP ---------- */
.trust-strip{
  padding:26px 0;
  background:var(--bg);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.trust-inner{
  display:flex; gap:42px; justify-content:center; align-items:center;
  flex-wrap:wrap;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.trust-inner span{display:inline-flex; align-items:center; gap:42px;}
.trust-inner span::after{
  content:"·"; color:var(--olive); font-size:18px;
}
.trust-inner span:last-child::after{content:"";}
@media (max-width:720px){
  .trust-inner{gap:18px;}
  .trust-inner span{gap:18px;}
}

/* ---------- PAIN ---------- */
.pain{ background:var(--bg-soft); }
.pain .narrow{text-align:center;}
.pain p{font-size:19px; line-height:1.8; color:var(--body);}
.pain .pull{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(24px, 3vw, 32px); line-height:1.4;
  color:var(--olive); margin:48px auto 0;
  max-width:680px;
}

/* ---------- WHY THIS WORKS ---------- */
.why-head{text-align:center; margin-bottom:80px;}
.why-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:48px 60px;
  max-width:1080px; margin:0 auto;
}
@media (max-width:820px){ .why-grid{grid-template-columns:repeat(2, 1fr); gap:40px;} }
@media (max-width:520px){ .why-grid{grid-template-columns:1fr;} }
.why-item{ text-align:left; }
.why-icon{
  width:46px; height:46px;
  border:1px solid var(--olive);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
  background:var(--olive-50);
  transition:.4s;
}
.why-item:hover .why-icon{background:var(--olive);}
.why-item:hover .why-icon svg{stroke:#fff;}
.why-icon svg{width:22px; height:22px; stroke:var(--olive); fill:none; stroke-width:1.5; transition:stroke .4s;}
.why-item h4{
  font-family:var(--serif); font-size:22px;
  margin-bottom:10px; color:var(--ink);
}
.why-item p{
  font-size:15px; color:var(--muted); line-height:1.7; margin:0;
}

/* ---------- ABOUT (split layout) ---------- */
.about-grid{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center;
}
@media (max-width:900px){ .about-grid{grid-template-columns:1fr; gap:50px;} }
.about-image{
  aspect-ratio:4/5;
  background:linear-gradient(160deg, #F0E7D8 0%, #C9A87C 100%);
  position:relative; overflow:hidden;
}
.about-image::after{
  content:"Replace with portrait of Charline";
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-style:italic; color:rgba(255,255,255,.75);
  font-size:14px; padding:20px; text-align:center;
}
.credentials{
  margin-top:32px; padding-top:32px;
  border-top:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;
  font-size:14px;
}
.credentials div{display:flex; align-items:flex-start; gap:10px;}
.credentials div::before{
  content:"●"; color:var(--olive); font-size:8px; line-height:1.7; flex-shrink:0;
}

/* ---------- METHOD ---------- */
.method{ background:var(--bg-soft); }
.method-head{text-align:center; margin-bottom:80px;}
.phases{display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;}
@media (max-width:900px){ .phases{grid-template-columns:1fr;} }
.phase{
  background:var(--bg);
  padding:48px 36px;
  border:1px solid var(--rule);
  transition:.4s;
  position:relative;
}
.phase:hover{
  transform:translateY(-4px);
  box-shadow:0 30px 60px -30px rgba(47, 74, 61, .3);
  border-color:var(--olive);
}
.phase .num{
  font-family:var(--serif); font-style:italic;
  font-size:14px; color:var(--olive);
  letter-spacing:.2em; margin-bottom:20px;
}
.phase h3{margin-bottom:18px;}
.phase p{font-size:15px; line-height:1.7; color:var(--body);}

/* ---------- HORMONE POSITIONING ---------- */
.hormone{
  background:var(--bg);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.hormone-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:80px; align-items:center;
}
@media (max-width:900px){ .hormone-grid{grid-template-columns:1fr; gap:48px;} }
.hormone h2 span{color:var(--olive); font-style:italic;}
.hormone-list{
  list-style:none;
  background:var(--bg-soft);
  padding:48px 44px;
  border-left:2px solid var(--olive);
}
.hormone-list li{
  padding:16px 0; font-family:var(--serif); font-size:20px; color:var(--ink);
  border-bottom:1px solid var(--rule);
  display:flex; align-items:center; gap:14px;
}
.hormone-list li:last-child{border-bottom:none;}
.hormone-list li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--olive); flex-shrink:0;
}

/* ---------- PROGRAMS ---------- */
.programs{ background:var(--bg-soft); }
.programs-head{text-align:center; margin-bottom:70px;}
.program-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
}
@media (max-width:900px){ .program-grid{grid-template-columns:1fr; gap:24px;} }
.program{
  background:var(--bg);
  padding:50px 38px 44px;
  border:1px solid var(--rule);
  display:flex; flex-direction:column;
  transition:.4s;
  position:relative;
}
.program:hover{
  transform:translateY(-6px);
  box-shadow:0 35px 60px -30px rgba(47, 74, 61, .35);
  border-color:var(--olive);
}
.program.featured{
  border:1px solid var(--olive);
  background:linear-gradient(180deg, var(--bg) 0%, #F4ECDA 100%);
  transform:scale(1.02);
}
.program.featured::before{
  content:"Most Chosen";
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--olive); color:#fff;
  padding:6px 18px; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; font-weight:500;
}
.program-num{
  font-family:var(--serif); font-style:italic; color:var(--olive);
  font-size:13px; letter-spacing:.22em; margin-bottom:18px;
}
.program h3{
  font-size:32px; margin-bottom:8px;
  letter-spacing:.02em;
}
.program-duration{
  font-family:var(--serif); font-style:italic;
  color:var(--muted); font-size:18px; margin-bottom:20px;
}
.program-tagline{
  font-size:15px; color:var(--body); margin-bottom:30px;
  line-height:1.65;
}
.program-includes{
  list-style:none; padding-top:24px;
  border-top:1px solid var(--rule);
  margin-bottom:34px;
  flex-grow:1;
}
.program-includes li{
  padding:10px 0;
  font-size:14px; color:var(--body);
  display:flex; gap:12px; align-items:flex-start;
}
.program-includes li::before{
  content:"\2713";
  color:var(--olive); font-weight:600; flex-shrink:0;
}
.program .btn{
  width:100%; justify-content:center;
  background:transparent; color:var(--olive); border-color:var(--olive);
}
.program .btn:hover{background:var(--olive); color:#fff;}
.program.featured .btn{background:var(--olive); color:#fff;}
.program.featured .btn:hover{background:var(--olive-d);}

/* ---------- RESULTS / SOCIAL PROOF ---------- */
.results-head{text-align:center; margin-bottom:70px;}
.testi-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
  margin-bottom:80px;
}
@media (max-width:900px){ .testi-grid{grid-template-columns:1fr;} }
.testi{
  background:var(--bg-soft);
  padding:40px 36px;
  border-left:2px solid var(--olive);
  display:flex; flex-direction:column;
}
.testi-quote{
  font-family:var(--serif); font-style:italic;
  font-size:19px; line-height:1.5; color:var(--ink);
  margin-bottom:28px; flex-grow:1;
}
.testi-quote::before{
  content:"\201C";
  font-size:48px; color:var(--olive); line-height:0;
  display:block; margin-bottom:18px;
}
.testi-meta{
  display:flex; align-items:center; gap:14px;
  padding-top:22px; border-top:1px solid var(--rule);
}
.testi-avatar{
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold) 0%, var(--olive) 100%);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:var(--serif); font-size:18px; font-weight:500;
  flex-shrink:0;
}
.testi-name{
  font-family:var(--serif); font-size:17px; color:var(--ink); font-weight:500;
}
.testi-loc{
  font-size:12px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.16em;
  margin-top:2px;
}
.ba-strip{ text-align:center; }
.ba-strip h4{
  font-family:var(--serif); font-style:italic;
  font-size:22px; color:var(--olive); margin-bottom:32px;
}
.ba-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:18px;
}
@media (max-width:720px){ .ba-grid{grid-template-columns:repeat(2, 1fr);} }
.ba{
  aspect-ratio:3/4;
  background:linear-gradient(135deg, #E9DCC4 0%, #B89478 50%, #2F4A3D 100%);
  position:relative; overflow:hidden;
}
.ba::after{
  content:attr(data-label);
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.85);
  font-family:var(--serif); font-style:italic; font-size:13px;
  text-align:center; padding:14px;
}

/* ---------- TRANSFORMATION promise ---------- */
.transform{
  background:var(--olive-d); color:#E9DCC4;
  text-align:center;
}
.transform h2{color:var(--bg);}
.transform .eyebrow{color:var(--gold);}
.transform .rule{background:var(--gold);}
.transform-list{
  list-style:none; max-width:620px; margin:50px auto 0;
  text-align:left;
}
.transform-list li{
  padding:22px 0; font-size:18px; line-height:1.6;
  border-bottom:1px solid rgba(217, 196, 161, .2);
  display:flex; gap:20px; align-items:flex-start;
  color:#E9DCC4;
}
.transform-list li::before{
  content:"\2726"; color:var(--gold); font-size:14px;
  margin-top:6px; flex-shrink:0;
}
.transform .pull{
  font-family:var(--serif); font-style:italic;
  font-size:24px; margin:60px auto 0; max-width:600px;
  color:#E9DCC4;
}

/* ---------- ACCORDIONS ---------- */
details{
  border-bottom:1px solid var(--rule);
  padding:28px 0; transition:.3s;
}
details summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  font-family:var(--serif); font-size:clamp(19px, 2vw, 23px);
  color:var(--ink); font-weight:500;
}
details summary::-webkit-details-marker{display:none;}
details summary::after{
  content:"+";
  font-family:var(--serif); font-size:28px;
  color:var(--olive); transition:.3s;
  flex-shrink:0;
}
details[open] summary::after{ transform:rotate(45deg); }
details p{
  margin-top:18px; color:var(--muted); font-size:16px; line-height:1.75;
  max-width:760px;
}

/* ---------- FINAL CTA banner ---------- */
.final-cta{
  background:var(--bg-deep);
  text-align:center;
  padding:120px 0;
}
@media (max-width:720px){ .final-cta{padding:80px 0;} }
.final-cta h2{ font-size:clamp(34px, 5vw, 60px); }
.final-cta h2 span{color:var(--olive); font-style:italic;}
.final-cta p{
  font-family:var(--serif); font-style:italic;
  font-size:20px; color:var(--muted);
  margin:20px auto 40px; max-width:560px;
}

/* ---------- PAGE HEADER (used on About + Apply) ---------- */
.page-hero{
  padding:100px 0 70px;
  background:
    radial-gradient(ellipse at 80% 20%, #F0E7D8 0%, transparent 60%),
    radial-gradient(ellipse at 10% 90%, #E9DCC4 0%, transparent 50%),
    var(--bg);
  text-align:center;
  border-bottom:1px solid var(--rule);
}
.page-hero h1{
  font-size:clamp(40px, 6vw, 68px);
  margin-bottom:18px;
}
.page-hero h1 span{color:var(--olive); font-style:italic;}
.page-hero .lead{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(18px, 2vw, 22px);
  color:var(--muted); max-width:620px; margin:0 auto;
}

/* ---------- APPLY (form) ---------- */
.apply{
  background:var(--bg);
  text-align:left;
}
.apply-head{text-align:center; margin-bottom:60px;}
form{
  max-width:720px; margin:0 auto;
  background:var(--bg-soft); padding:60px 50px;
  border:1px solid var(--rule);
}
@media (max-width:600px){ form{padding:40px 24px;} }
.field{margin-bottom:28px;}
label{
  display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--olive); margin-bottom:10px; font-weight:500;
}
.req{color:var(--olive);}
input, select, textarea{
  width:100%; padding:14px 0;
  border:none; border-bottom:1px solid var(--rule);
  background:transparent;
  font-family:var(--sans); font-size:16px; color:var(--ink);
  outline:none; transition:border-color .2s;
}
input:focus, select:focus, textarea:focus{border-bottom-color:var(--olive);}
textarea{resize:vertical; min-height:90px; padding-top:16px;}
.row{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media (max-width:520px){ .row{grid-template-columns:1fr;} }
.submit-row{margin-top:40px; text-align:center;}
.submit-row p{font-size:13px; color:var(--muted); margin-top:18px;}

/* ---------- WHAT HAPPENS NEXT (apply page) ---------- */
.next-steps{
  background:var(--bg-soft);
}
.steps-head{text-align:center; margin-bottom:60px;}
.steps-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:36px;
}
@media (max-width:820px){ .steps-grid{grid-template-columns:1fr;} }
.step{
  text-align:center; padding:30px 24px;
}
.step-num{
  font-family:var(--serif); font-style:italic;
  font-size:60px; color:var(--olive);
  line-height:1; margin-bottom:16px;
  display:block;
}
.step h4{
  font-family:var(--serif); font-size:22px;
  margin-bottom:10px; color:var(--ink);
}
.step p{
  font-size:15px; color:var(--muted); line-height:1.65; margin:0;
}

/* ---------- FOOTER ---------- */
footer{
  background:var(--ink); color:#C9B998;
  padding:60px 0 30px; text-align:center;
}
footer .logo{color:#FAF6EE;}
footer .logo span{color:var(--gold);}
.foot-tag{
  margin-top:14px; font-family:var(--serif); font-style:italic; color:#C9B998;
}
.foot-links{
  display:flex; gap:32px; justify-content:center; margin:30px 0;
  flex-wrap:wrap;
}
.foot-links a{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:#C9B998; transition:color .2s;
}
.foot-links a:hover{color:var(--gold);}
.copyright{
  font-size:12px; color:#6E5E4E;
  padding-top:30px; border-top:1px solid rgba(184,148,120,.15);
  margin-top:30px;
}

/* ---------- FLOAT WHATSAPP ---------- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:var(--olive); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(47, 74, 61, .4);
  transition:.3s;
}
.wa-float:hover{transform:scale(1.08); background:var(--olive-d);}
.wa-float svg{width:26px; height:26px;}

/* ---------- SCROLL-IN ANIMATION ---------- */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s ease, transform .9s ease;
}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none;}
}