/* =====================================================
   CMHC  —  Certified Metabolic Health Coach page
   Brand palette:  gold #C88A2A  /  dark #111
   Path: /assets/css/cmhc.css
   ===================================================== */

.cmhc-page { background:#fff; }

/* ---------- shared heading ---------- */
.cmhc-mini-label {
    display:inline-block;
    background:rgba(204,135,43,0.10);
    color:#C88A2A;
    font-size:12px; font-weight:600; letter-spacing:2px;
    padding:6px 14px; border-radius:20px;
    text-transform:uppercase; margin-bottom:18px;
}
.cmhc-section-title {
    font-size:32px; font-weight:600; color:#0e0e0e; line-height:1.2; margin:0 0 14px;
}
.cmhc-section-sub { font-size:16px; line-height:1.7; color:#666; margin:0; }

/* ---------- HERO ---------- */
.cmhc-hero {
    position:relative;
    padding:150px 0 90px;
    background:linear-gradient(135deg, #141414 0%, #262017 60%, #3a2c14 100%);
    color:#fff; overflow:hidden;
}
.cmhc-hero::after {
    content:""; position:absolute; right:-120px; top:-120px;
    width:420px; height:420px; border-radius:50%;
    background:radial-gradient(circle, rgba(204,135,43,0.35) 0%, rgba(204,135,43,0) 70%);
}
.cmhc-hero .container { position:relative; z-index:2; }
.cmhc-hero-inner { max-width:720px; }
.cmhc-hero .cmhc-mini-label { background:rgba(204,135,43,0.18); color:#f0c88a; }
.cmhc-hero h1 {
    font-size:46px; font-weight:700; line-height:1.12; margin:0 0 20px;
}
.cmhc-hero h1 span { color:#C88A2A; }
.cmhc-hero p { font-size:18px; line-height:1.7; color:rgba(255,255,255,0.82); margin:0 0 30px; max-width:640px; }

.cmhc-hero-img {
    margin-top:40px; width:100%; max-height:380px; object-fit:cover;
    border-radius:20px; border:1px solid rgba(255,255,255,0.12);
}

/* ---------- WHAT IS CMHC ---------- */
.cmhc-what { padding:80px 0; }
.cmhc-what .cmhc-body { font-size:17px; line-height:1.85; color:#444; }
.cmhc-what .cmhc-body p { margin:0 0 20px; }
.cmhc-what-card {
    background:#faf7f2; border:1px solid rgba(204,135,43,0.18);
    border-radius:20px; padding:40px;
}

/* ---------- PATHWAY ---------- */
.cmhc-pathway { padding:80px 0; background:#faf9f7; }
.cmhc-pathway .head { text-align:center; max-width:760px; margin:0 auto 54px; }

.cmhc-steps {
    display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
@media (max-width:992px){ .cmhc-steps{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .cmhc-steps{ grid-template-columns:1fr; } }

.cmhc-step {
    position:relative; background:#fff; border:1px solid #eee;
    border-radius:18px; padding:30px 24px 26px;
    box-shadow:0 4px 18px rgba(0,0,0,0.04);
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.cmhc-step:hover {
    transform:translateY(-6px);
    box-shadow:0 14px 34px rgba(204,135,43,0.18);
    border-color:rgba(204,135,43,0.35);
}
.cmhc-step .num {
    width:46px; height:46px; border-radius:12px;
    background:linear-gradient(135deg,#C88A2A 0%,#a0641e 100%);
    color:#fff; font-weight:700; font-size:18px;
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.cmhc-step h5 { font-size:17px; font-weight:600; color:#111; margin:0 0 10px; }
.cmhc-step p  { font-size:14px; line-height:1.6; color:#666; margin:0; }

/* ---------- BENEFITS ---------- */
.cmhc-benefits { padding:80px 0; }
.cmhc-benefits .head { text-align:center; max-width:720px; margin:0 auto 50px; }
.cmhc-benefit-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:22px; max-width:900px; margin:0 auto;
}
@media (max-width:640px){ .cmhc-benefit-grid{ grid-template-columns:1fr; } }
.cmhc-benefit {
    display:flex; gap:16px; align-items:flex-start;
    background:#fff; border:1px solid #eee; border-radius:16px; padding:24px;
    transition:border-color .3s ease, box-shadow .3s ease;
}
.cmhc-benefit:hover { border-color:rgba(204,135,43,0.35); box-shadow:0 10px 26px rgba(204,135,43,0.12); }
.cmhc-benefit .tick {
    flex-shrink:0; width:38px; height:38px; border-radius:10px;
    background:rgba(204,135,43,0.10); color:#C88A2A;
    display:flex; align-items:center; justify-content:center; font-size:16px;
}
.cmhc-benefit h6 { font-size:16px; font-weight:600; color:#111; margin:0 0 6px; }
.cmhc-benefit p  { font-size:14px; line-height:1.6; color:#666; margin:0; }

/* ---------- CTA ---------- */
.cmhc-cta { padding:70px 0 90px; }
.cmhc-cta-box {
    max-width:900px; margin:0 auto; text-align:center;
    background:linear-gradient(135deg,#161616 0%,#2a2a2a 100%);
    border-radius:24px; padding:60px 40px; color:#fff; position:relative; overflow:hidden;
}
.cmhc-cta-box::after {
    content:""; position:absolute; left:-100px; bottom:-100px;
    width:340px; height:340px; border-radius:50%;
    background:radial-gradient(circle, rgba(204,135,43,0.25) 0%, rgba(204,135,43,0) 70%);
}
.cmhc-cta-box > * { position:relative; z-index:2; }
.cmhc-cta-box h2 { font-size:32px; font-weight:700; margin:0 0 14px; }
.cmhc-cta-box p  { font-size:17px; line-height:1.7; color:rgba(255,255,255,0.82); margin:0 auto 30px; max-width:620px; }

/* ---------- Homepage teaser ---------- */
.cmhc-teaser { padding:0 0 70px; }
.cmhc-teaser-box {
    display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
    background:linear-gradient(135deg,#161616 0%,#2a2a2a 100%);
    border-radius:22px; padding:46px 48px; color:#fff; position:relative; overflow:hidden;
}
.cmhc-teaser-box::after {
    content:""; position:absolute; right:-90px; top:-90px;
    width:300px; height:300px; border-radius:50%;
    background:radial-gradient(circle, rgba(204,135,43,0.28) 0%, rgba(204,135,43,0) 70%);
}
.cmhc-teaser-box > * { position:relative; z-index:2; }
.cmhc-teaser-text { max-width:640px; }
.cmhc-teaser-text .cmhc-mini-label { background:rgba(204,135,43,0.18); color:#f0c88a; }
.cmhc-teaser-text h3 { font-size:28px; font-weight:700; margin:0 0 12px; line-height:1.25; }
.cmhc-teaser-text p  { font-size:16px; line-height:1.7; color:rgba(255,255,255,0.82); margin:0; }

@media (max-width:768px){
    .cmhc-hero h1 { font-size:34px; }
    .cmhc-hero { padding:120px 0 70px; }
    .cmhc-section-title, .cmhc-cta-box h2 { font-size:26px; }
    .cmhc-teaser-box { padding:34px 28px; }
}