@charset "utf-8";
/* CSS Document */ 

    /* =========================
       FAST SINGLE-FILE STYLES
       ========================= */

    :root{
      --purple:#702277;
      --green:#2E7D32;
      --bg:#ffffff;
      --ink:#111111;
      --muted:#444;
      --soft:#f6f3f8;
      --border: rgba(17,17,17,0.12);
      --shadow: 0 10px 30px rgba(0,0,0,0.10);
      --radius: 16px;
      --header-offset: 86px; /* anchor offset for sticky header */
    }
 
/* Link defaults (readable + clearly links) */
a { color: var(--purple); }
a:hover { text-decoration: underline; }

/* Nav links remain dark */
.nav a { color: var(--ink); text-decoration: none; }
.nav a:hover { text-decoration: none; }

/* Keep header/nav on one line until the mobile breakpoint */
.nav{ 
  flex: 1 1 auto;
  justify-content: flex-end;
}


/* Buttons control their own colors */
.btn { color: inherit; text-decoration: none; }


	  
	  
    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; scroll-padding-top: var(--header-offset); }

    /* Offset in-page anchors so the sticky header doesn’t cover section titles */
    [id]{ scroll-margin-top: var(--header-offset); }
    #top{ scroll-margin-top: 0; }

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: var(--bg);
      color: var(--ink);
      line-height: 1.5;
    }
    img{ max-width:100%; height:auto; display:block; }

    .container{
      width: 92%;
      max-width: 1120px;
      margin: 0 auto;
    }

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

    /* =========================
       HEADER
       ========================= */

    .site-header{
      position: sticky;
      top:0;
      z-index: 100;
      background:#fff;
      border-bottom: 1px solid var(--border);
    }
    .header-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      padding: 12px 0;
    }

    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      text-decoration:none;
      color: var(--ink);
      min-width: 240px;
    }
    .brand-mark{
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: radial-gradient(circle at 30% 30%, rgba(112,34,119,0.35), rgba(112,34,119,1));
      box-shadow: 0 8px 18px rgba(112,34,119,0.25);
      flex: 0 0 auto;
    }
    .brand-text strong{ display:block; font-size: 0.98rem; letter-spacing:0.2px; }
    .brand-sub{ display:block; font-size: 0.82rem; color: var(--muted); }

    .nav{
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .nav a{
      text-decoration:none;
      color: var(--ink);
      font-size: 0.95rem;
      padding: 8px 10px;
      border-radius: 10px;
      white-space:nowrap;
    }
    .nav a:hover{
      background: rgba(112,34,119,0.08);
      color: var(--purple);
    }

    .nav-toggle{
      display:none;
      border:1px solid var(--border);
      background:#fff;
      border-radius: 12px;
      padding:10px 12px;
    }
    .burger{
      display:block;
      width:20px;
      height:2px;
      background: var(--ink);
      position:relative;
    }
    .burger:before,.burger:after{
      content:"";
      position:absolute;
      left:0;
      width:20px;
      height:2px;
      background: var(--ink);
    }
    .burger:before{ top:-6px; }
    .burger:after{ top:6px; }

/* Bear logo sizing in header */
.brand-logo{
  width: 44px;
  height: 44px;
  border-radius: 12px;     /* optional: soften edges */
  object-fit: contain;
  flex: 0 0 44px;
}

/* Ensure brand stays tidy and prevents wrapping weirdness */
.brand{
  gap: 12px;
  min-width: 260px;        /* adjust if needed */
}

/* If a browser tries to wrap the nav, this helps */
.header-inner{
  flex-wrap: nowrap;
}


    /* =========================
       BUTTONS
       ========================= */

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid transparent;
      text-decoration:none;
      font-weight: 650;
      font-size: 0.96rem;
      gap: 8px;
    }
    .btn-small{ padding: 9px 12px; border-radius: 12px; font-size: 0.92rem; }

    .btn-primary{
      background: var(--purple);
      color:#fff;                 /* WHITE TEXT (readable) */
      border-color: rgba(112,34,119,0.6);
    }
    .btn-primary:hover{ filter: brightness(0.96); }

    .btn-outline{
      background:#fff;
      color: var(--purple);
      border-color: rgba(112,34,119,0.35);
    }
    .btn-outline:hover{ background: rgba(112,34,119,0.07); }

    .cta-row{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      margin-top: 14px;
    }

.cta-row{
  align-items: center;
}
.cta-row p{
  margin: 10px 0 0 0;
  flex-basis: 100%;
}


    /* =========================
       HERO
       ========================= */

    .hero{
      background: linear-gradient(180deg, rgba(112,34,119,0.08), rgba(46,125,50,0.06));
      border-bottom: 1px solid var(--border);
    }
    .hero-inner{
      display:grid;
      grid-template-columns: 66% 34%;
      gap: 24px;
      padding: 46px 0;
    }
    .kicker{
      margin:0 0 10px 0;
      font-weight: 750;
      color: var(--green);
      letter-spacing:0.4px;
      text-transform:uppercase;
      font-size: 13px;
    }
    .hero h1{
      margin:0 0 10px 0;
      font-size: 2.2rem;
      line-height: 1.12;
    }
    .lead{
      margin: 0 0 18px 0;
      font-size: 1.05rem;
      color: var(--muted);
      max-width: 62ch;
    }
    .note{
      margin-top: 14px;
      color: var(--muted);
      font-size: 0.92rem;
    }
    .note a{ color: var(--purple); text-decoration:none; }
    .note a:hover{ text-decoration: underline; }

  /* removed this
     .hero-card{
      background:#fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 18px;
      align-self:start;
    } */

.hero h1{
  font-size: clamp(2.0rem, 3vw, 2.6rem);
}
.hero-card{
  border: 1px solid rgba(112,34,119,0.14);
}

.hero{
  background: linear-gradient(180deg, rgba(112,34,119,0.10), rgba(46,125,50,0.06));
}


    .card-title{ margin:0 0 10px 0; font-size: 1.05rem; }
    .checklist{ margin:0; padding-left: 18px; color: var(--muted); }
    .mini-cta{ margin-top: 10px; }

    /* =========================
       SECTIONS
       ========================= */

/* Typography & spacing polish */
.section h2{
  letter-spacing: 0.2px;
}
.section-lead{
  font-size: 1.02rem;
  line-height: 1.6;
}

/* Give cards a stronger “premium” feel */
.card{
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.10);
}




    .section{ padding: 54px 0; }
    .section-alt{
      background: linear-gradient(180deg, var(--soft), #fff);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .section h2{ margin:0 0 10px 0; font-size: 1.65rem; }
    .section-lead{ margin: 0 0 20px 0; color: var(--muted); max-width: 72ch; }

    .grid3{
      display: grid;
      grid-template-columns: 33.333% 33.333% 33.333%;
      gap: 16px;
    }
    .grid2{
      display: grid;
      grid-template-columns: 50% 50%;
      gap: 16px;
    }
    .card{
      background:#fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: 0 10px 22px rgba(0,0,0,0.06);
    }
    .card h3{ margin:0 0 8px 0; font-size: 1.12rem; }
    .card p{ margin:0 0 12px 0; color: var(--muted); }

    .about{
      display: grid;
      grid-template-columns: 62.5% 37.5%;
      gap: 18px;
      align-items: flex-start;
    }
    .about-card{
      background: linear-gradient(180deg, rgba(46,125,50,0.08), rgba(112,34,119,0.06));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
    }

/* =========================
   DR. BEVERLY BIO PHOTO (GOLD CIRCLE)
   ========================= */

.bio-wrap{
  display:flex;
  gap: 16px;
  align-items:flex-start;
}

.bio-photo{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  border: 6px solid #C9A24D; /* GOLD RING */
  overflow:hidden;
  flex: 0 0 auto;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.15),
    inset 0 0 0 1px rgba(255,255,255,0.35);
  background:#fff;
}

.bio-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

@media (max-width: 900px){
  :root{ --header-offset: 74px; }

  .bio-wrap{
    flex-direction:column;
    align-items:flex-start;
  }
  .bio-photo{
    width: 110px;
    height: 110px;
  }
}


/* Quick Links inside the ABOUT card (do not use footer colors) */
.about-card .footer-links a{
  color: var(--purple) !important;
}

.about-card .footer-links a:visited{
  color: var(--purple) !important;
}


/* Ensure About card content sits above any accidental overlays */
.about-card{
  position: relative;
  z-index: 2;
}


.about-card .footer-links a:hover,
.about-card .footer-links a:focus{
  color: #111 !important;
  text-decoration: underline;
}




    /* =========================
       FOOTER (ADBO.COM STYLE)
       ========================= */

footer p, footer li { line-height: 1.55; }



    footer{
      background-color: #301334;
      color: #FFFFFF;
      padding: 30px 16px;
      margin-top: 40px;
    }
    .footer-inner{
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      font-size: 0.9rem;
    }
    .footer-inner > div{ flex: 1 1 200px; }
    .footer-inner h4{
      font-family: "Playfair Display", "Times New Roman", serif;
      font-size: 1rem;
      margin-bottom: 10px;
    }
    .footer-links{ list-style: none; padding-left:0; margin:0; }
    .footer-links li{ margin-bottom: 4px; }
    .footer-links a{ color: #F0E9FF; font-size: 0.9rem; text-decoration:none; }
    .footer-links a:hover{ text-decoration: underline; }

    .footer-bottom{
      text-align: center;
      margin-top: 16px;
      font-size: 0.8rem;
      color: #CCCCCC;
    }

    /* =========================
       RESPONSIVE
       ========================= */

    @media (max-width: 900px){
      .hero-inner{ grid-template-columns: 100%; }
      .grid3{ grid-template-columns: 100%; }
      .grid2{ grid-template-columns: 100%; }
      .about{ grid-template-columns: 100%; }

      .nav-toggle{ display:inline-flex; }

      .nav{
        position:absolute;
        top: 64px;
        right: 4vw;
        background:#fff;
        border: 1px solid var(--border);
        border-radius: 14px;
        box-shadow: var(--shadow);
        padding: 10px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        min-width: 230px;
      }
      .nav.open{ display:flex; }
      .nav a{ padding: 10px 12px; }
    }
	  
	  .btn-primary,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:active {
  color: #ffffff !important;
}
	  
	  /* Fix header "Get the APP" button hover turning white */
.site-header .btn-primary:hover,
.site-header .btn-primary:focus {
  background: var(--purple);
  color: #ffffff !important;
}

.section-alt{
  background: linear-gradient(180deg, rgba(112,34,119,0.06), rgba(46,125,50,0.04));
  border-top: 1px solid rgba(0,0,0,0.08);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Allow subtitle to wrap gracefully without forcing nav below */
.brand-sub{
  display: block;
  white-space: normal;
  line-height: 1.2;
}



/* Force footer links to be visible */
footer a,
footer a:visited{
  color: #F0E9FF !important;
}

footer a:hover,
footer a:focus{
  color: #FFFFFF !important;
  text-decoration: underline;
}

 


/* =========================
   FOOTER TOC LIST SUPPORT
   ========================= */
footer ol.footer-links{
  list-style: decimal;
  padding-left: 18px;
}
footer ol.footer-links li{
  margin-bottom: 4px;
}

/* =========================
   BIO TEXT POLISH
   ========================= */
.bio-text h3{
  margin: 0 0 6px 0;
}


/* fix back to top issue – normalized */
.back-to-top {
  margin: 2rem 0 3rem;
  text-align: left;
  font-size: 0.95rem;
  clear: both;
}

.back-to-top a {
  color: #702277;
  text-decoration: none;
  font-weight: 500;
}

.back-to-top a:hover {
  text-decoration: underline;
}




.back-to-top{margin:2rem 0 3rem; text-align:left; font-size:0.95rem;}