@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Open+Sans:wght@300;400;500&display=swap");

:root{
  --grad-a:#e07a8a;
  --grad-b:#fde8b0;
  --grad-c:#e07a8a;

  --brand:#be185d;
  --bg:#fffdf8;

  /* Fonts */
  --font-heading: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.brand-title,
.gradient-title{
  font-family: var(--font-heading);
}

*{box-sizing:border-box}
html, body{
  margin: 0;
  padding: 0;
}
body{
  font-family: var(--font-body);
  background: var(--bg);
  color: #2b2b2b;
  overflow-x: hidden;
}
/* Gradient text */
.gradient-title{
  font-weight:800;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Softer text color sitewide */
body{ color: #2b2b2b; }

/* Better reading rhythm inside the card */
.subpage-card p, .subpage-card li{
  line-height: 1.6;
  font-size: 1rem;
}

/* Make paragraph spacing nicer */
.subpage-card p{ margin: 0 0 12px; }

/* Make lists breathe */
.health-bullets li{ margin: 6px 0; }

/* Give section divider a nicer look */
.subpage-divider{
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 18px 0 22px;
}

/* Subtle emphasis boxes for key lines */
.callout{
  background: rgba(253, 186, 116, 0.18);     /* soft orange fill */
  border: 1px solid rgba(253, 186, 116, 0.55); /* orange border */
  border-radius: 12px;
  padding: 12px 14px;
  margin: 14px 0;
}

/* Confirmation / Status banner */
.status-banner{
  max-width: 900px;
  margin: 18px auto 20px;
  padding: 16px 18px;
  border: 2px solid var(--brand); /* pink outline */
  border-radius: 16px;
  background: #fff3f7;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.status-banner .status-title{
  margin: 0 0 6px;
  font-weight: 800;
  font-family: var(--font-heading);
  display: flex;
  gap: 10px;
  align-items: center;
}

.status-banner .status-title i{
  color: var(--brand);
}


/* Buttons */
.gradient-button{
  background:#fca5a5;color:var(--brand);
  padding:.75rem 1.5rem;font-weight:700;border:0;border-radius:6px;
  display:inline-block;text-decoration:none;cursor:pointer;
}
.gradient-button:hover{opacity:.95}

/* Layout helpers */
.container-wide{max-width:1200px;margin:0 auto;padding:0 2rem}
.section-narrow{max-width:900px;margin:3rem auto;padding:2rem}
.center{text-align:center}.mt-1{margin-top:1rem}

/* ---------- Topbar (shared across pages) ---------- */
/* FORCE sticky header */
/* Always-sticky header (fixed) */
.topbar{
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  z-index: 2000 !important;
  background: #fff !important;
}
/* Push the page content down so it doesn't hide under the fixed header */
body{
  padding-top: 86px; /* adjust if header height changes */
}


.topbar-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: .6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.topbar-inner{ padding-left: 60px; }


/* Same font as site */
.menu, .menu *{
  font-family: inherit;
}

/* Overlay (click off to close) */
.menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 5000;
}
.menu-overlay.active{
  opacity: 1;
  pointer-events: auto;
}

/* Slide-out Menu */
.menu{
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,.12);
  padding: 14px 16px;
  z-index: 6000;

  /* slide behavior */
  transform: translateX(-110%);
  transition: transform .25s ease;
  display: block; /* IMPORTANT: do not use display:none */
}
.menu.active{ transform: translateX(0); }

/* Close button */
.menu-close{
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 10px 8px;
  margin: 2px 0 10px;
  font-weight: 800;
  color: var(--brand);
  cursor: pointer;
}

/* Menu links */
.menu a{
  display: block;
  padding: 10px 8px;
  margin: 6px 0;
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
  border-radius: 10px;
  transition: background .15s ease, transform .15s ease;
}

/* Hover highlight (orange callout tone) */
.menu a:hover{
  background: rgba(253, 186, 116, 0.22);
  transform: translateX(2px);
}

/* ===== FORCE HAMBURGER LOOK + POSITION (paste at bottom) ===== */
.menu-toggle{
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  padding: 6px 8px;
  font-size: 28px;
  line-height: 1;
  color: var(--brand);
  cursor: pointer;
  z-index: 6500;
}


.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:60px}
.brand-title{margin:0}
.topbar-divider{
  height:6px;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c));
}

/* Gradient header option (use class topbar-gradient) */
.topbar-gradient{
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));
  border-bottom: 1px solid rgba(255,255,255,0.55);
}

/* ---------- Intro (About + image) ---------- */
.intro-section{display:flex;align-items:center;justify-content:space-between;gap:2rem}
/* Align intro text with first card column */
.intro-text{
  padding-left: 2rem; /* same as .grid padding */
}

.intro-image{
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.intro-photo{
  width: 90%;
  height: auto;
  max-width: clamp(220px, 20vw, 280px);
  border-radius: 12px;
  display:block;
}


.gradient-frame{
  border:4px solid transparent;border-radius:12px;
  background-image:linear-gradient(#fff,#fff),
                   linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c));
  background-origin:border-box;background-clip:padding-box,border-box;
}
@media(max-width:768px){
  .intro-section{flex-direction:column;text-align:center}
  .intro-image{justify-content:center}
}


/* Nice, legible brand in the top bar */
.brand-logo{ height: clamp(40px, 6vw, 60px); }
.brand-title{ font-size: clamp(18px, 2.2vw, 28px); }


/* ---------- Service cards ---------- */
.grid{display:grid;grid-template-columns:1fr;gap:2rem;padding:2rem}
@media(min-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}

.service-box{
  text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:4px solid transparent;border-radius:12px;padding:30px;background:#fff;
  background-image:linear-gradient(#fff,#fff),
                   linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c));
  background-origin:border-box;background-clip:padding-box,border-box;
}
.service-box a{color:inherit;text-decoration:none;transition:all .3s ease}
.service-box a:hover{color:var(--brand);text-shadow:0 1px 4px rgba(252,163,163,.5)}
.service-box:hover{box-shadow:0 0 10px rgba(252,163,163,.35);transform:translateY(-2px)}
/*.img-placeholder{height:130px;background:#ddd;border-radius:.75rem;margin-bottom:1rem}*/

/* Contact card tweaks shared across pages */
.contact-card{max-width:700px;margin:4rem auto 0}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.contact-form input,.contact-form textarea{
  padding:.75rem;border-radius:6px;border:1px solid #ccc
}

/* === Testimonials: gradient framed card === */

.testimonial-card{
  border-radius: 16px;
  padding: 18px 20px;

  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c)) border-box;

  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}




/* ---------- Footer (shared) ---------- */
.footer-gradient{
  margin-top:2rem;text-align:center;color:var(--brand);
  padding:1.25rem 1rem;
  background:linear-gradient(90deg,var(--grad-a),var(--grad-b),var(--grad-c));
}

/* Subpage card layout */
.subpage-main{
  padding: 32px 16px 48px;
  display: flex;
  justify-content: center;
}

/* Card with gradient border */
.subpage-card{
  width: 100%;
  max-width: 1100px;
  border: 4px solid transparent;
  border-radius: 18px;
  padding: 28px;

  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c));
  background-origin: border-box;
  background-clip: padding-box, border-box;

  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
}

@media (max-width: 900px){
  .subpage-grid{ grid-template-columns: 1fr; }
}

.subpage-h2{ margin: 0 0 10px; font-size: 1.35rem; font-weight: 800; }
.subpage-h3{ margin: 18px 0 8px; font-size: 1.05rem; font-weight: 800; }

.subpage-divider{
  border: none;
  height: 1px;
  background: rgba(0,0,0,0.10);
  margin: 22px 0;
}

.health-bullets{ margin: 8px 0 0 18px; padding: 0; line-height: 1.55; }

.fineprint{ font-size: 0.92rem; opacity: 0.85; }



/* Simple image frame (no gradient border) */
.image-frame{
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 10px;
}
/* Keep the two-column layout stable */
.subpage-grid{
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 28px;
  align-items: start;
}

/* Image should sit at the top of the right column */
/* Remove any border/box and control the size */
.subpage-image img{
  display:block;
  width: 100%;
  max-width: 320px;
  height:auto;
  border: 0;
  outline: none;
  box-shadow: none;
  border-radius: 14px;
  margin-left: auto;
}

/* ===== INDEX INTRO: match subpage typography ===== */
.intro-text p,
.intro-text li{
  line-height: 1.6;
  font-size: 1rem;
  margin: 0 0 12px;
}

/* ===== INDEX INTRO: align text with card content edge ===== */
/* Card content starts after border (4px) + padding (~30px) ≈ 34px */
@media (min-width: 768px){
  .intro-text{
    padding-left: 34px;
  }
}

/* Optional: keep the intro text from running too wide near the image */
@media (min-width: 768px){
  .intro-text{
    max-width: 62ch; /* keeps a clean readable line length */
  }
}
/* Space below header before intro section */
.intro-section{
  margin-top: 2.5rem;
}

@media (max-width: 768px){
  .intro-section{
    margin-top: 2rem;
  }
}
/* =========================
   BLOG PAGE
   (paste at very bottom)
========================= */

.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* Main spacing */
.blog-main{
  padding: 28px 16px 48px;
}

/* Hero area (no big gradients, matches your pale background) */
.blog-hero{
  max-width: 1200px;
  margin: 0 auto 18px;
  padding: 18px 18px 0;
}

.blog-hero-inner{
  max-width: 1100px;
  margin: 0 auto;
}

.blog-title{
  margin: 0 0 8px;
  font-size: clamp(22px, 2.4vw, 34px);
}

.blog-subtitle{
  margin: 0 0 16px;
  color: #2b2b2b;
  opacity: 0.9;
  line-height: 1.6;
}

/* Search */
.blog-search{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  margin: 12px 0 0;
}

.blog-search input[type="search"]{
  flex: 1;
  min-width: 240px;
  padding: .75rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.14);
  background: #fff;
}

/* Card wrapper (matches subpage card vibe) */
.blog-card{
  max-width: 1100px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.10);
}

/* 2-column layout */
.blog-grid{
  display:grid;
  grid-template-columns: 1.6fr 0.7fr;
  gap: 22px;
  align-items:start;
}

@media (max-width: 900px){
  .blog-grid{ grid-template-columns: 1fr; }
}

/* Post cards */
.post-card{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 16px 16px 14px;
  margin: 0 0 14px;
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}

.post-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

.post-link{
  display:block;
  color: inherit;
  text-decoration:none;
}

.post-title{
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 900;
}

.post-meta{
  margin: 0 0 10px;
  font-size: .92rem;
  opacity: .75;
}

.post-excerpt{
  margin: 0 0 10px;
  line-height: 1.6;
}

.post-cta{
  font-weight: 900;
  color: var(--brand);
}

/* Sidebar */
.sidebar-box{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.08);
  padding: 14px;
  background: #fff;
  margin: 0 0 14px;
}

.sidebar-title{
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 900;
}

.sidebar-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-list li{ margin: 8px 0; }

.sidebar-list a{
  text-decoration:none;
  font-weight: 800;
  color: var(--brand);
  border-radius: 10px;
  padding: 6px 8px;
  display:inline-block;
  transition: background .15s ease;
}

.sidebar-list a:hover{
  background: rgba(253, 186, 116, 0.22); /* matches your callout tone */
}

/* Pagination */
.blog-pagination{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
  margin-top: 12px;
}

.page-btn{
  text-decoration:none;
  font-weight: 900;
  color: var(--brand);
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
}

.page-btn:hover{
  background: rgba(253, 186, 116, 0.18);
}

.page-btn.is-disabled{
  opacity: .45;
  pointer-events:none;
}

.page-indicator{
  font-weight: 800;
  opacity: .8;
}

html, body{
  overflow-x: hidden;
  overflow-y: visible;
  height: auto;
}