:root{
  --sage:#fbfdfc;
  --deep:#1f4b3e;
  --mid:#2d6b57;
  --text:#1a2a24;
  --pill-bg: rgba(255,255,255,.68);
  --pill-outline: rgba(255,255,255,.85);
  --shadow: 0 10px 24px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: Inter, "Segoe UI","Helvetica Neue", Arial, sans-serif;color:var(--text);background:var(--sage);}
img{max-width:100%;display:block}
a{color:var(--mid);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1200px,92%);margin-inline:auto}
.site-header{background:#fff;position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(0,0,0,.05)}
.header-inner{display:grid;grid-template-columns:1fr auto; align-items: end; padding:.6rem 0 .2rem}
.brand{display:flex;align-items:flex-start;gap:.75rem}
.brand img{height:128px; width:auto;}
.header-cta{text-align:right;font-size:1.08rem;color:var(--deep)}
.header-cta a{color:var(--deep);font-weight:600}
.navbar{display:flex;gap:.5rem;justify-content:flex-end;padding:.4rem 0 .8rem align-items:flex-end; margin-top:.4rem;}
.navbar a{padding:.5rem .9rem;border:1px solid rgba(31,75,62,.25);border-radius:999px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.navbar a:hover{background:var(--sage)}
.hero{position:relative;min-height:64vh;display:flex;align-items:center;overflow:hidden;background:var(--sage)}
.hero.is-small{min-height:46vh}
.hero::before{content:"";position:absolute;inset:0; background:linear-gradient(90deg, rgba(0,0,0,.46), rgba(0,0,0,.28) 35%, rgba(0,0,0,.18) 70%, rgba(0,0,0,0));}
.hero .hero-bg{position:absolute;inset:0; background-size:cover;background-position:center right 20%; transform:scale(1.02);}
.hero .overlay{position:relative;z-index:2}



.stack{display:flex;flex-direction:column; gap:1rem; max-width:46rem}
.stack.right{margin-left:auto; align-items:flex-end; text-align:right}
.stack.left{align-items:flex-start; text-align:left}
.pill{display:flex;align-items:center;gap:.6rem; padding:.7rem 1rem;border-radius:999px;background:var(--pill-bg);backdrop-filter: blur(2px); border:1px solid rgba(255,255,255,.5); box-shadow:var(--shadow)}
.pill.thin{padding:.55rem .9rem; background:transparent; color:#fff;border:1.1px solid var(--pill-outline)}
.pill .diamond{width:.6rem;height:.6rem;background:var(--mid); transform:rotate(45deg); border-radius:2px; flex: 0 0 auto;}
.section{padding:4rem 0; background:var(--sage)}
.section.tight{padding-top:2.5rem}
.section h2{font-size:2.25rem;line-height:1.15;color:var(--deep);margin:.2rem 0 1rem}
.lead{color:var(--deep);opacity:.9}
.card{background:rgba(255,255,255,.9); border:1px solid rgba(0,0,0,.06); border-radius:16px; box-shadow: var(--shadow); padding:1.1rem 1.25rem}
.card.ghost{background:rgba(255,255,255,0.65);}
.center{text-align:center}
.buttons{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-top:1rem}
.btn{padding:.65rem 1.05rem;border-radius:999px;border:1px solid rgba(31,75,62,.25);}
.btn.primary{background:var(--deep);color:#fff;border-color:transparent}
.btn.ghost{background:#fff}
.footer{padding:2.2rem 0;color:#375a4e; text-align:center; font-size:.95rem;border-top:1px solid rgba(0,0,0,.05);background:var(--sage)}
.mt-0{margin-top:0}
.center-text{text-align:center}
.grid-2{display:grid;grid-template-columns: 1fr 1fr; gap:1.25rem}
@media(max-width:960px){
  .grid-2{grid-template-columns:1fr;}
  .hero::before{background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.1) 55%, rgba(0,0,0,0));}
  .stack.right, .stack.left{align-items:flex-start; text-align:left; margin-left:0}
}


/* === AJI custom updates (2025-10-14) === */



.pill{border-radius:12px !important; background:rgba(255,255,255,0.6) !important; padding:.7rem 1rem; border:1px solid rgba(255,255,255,.9)}
.pill .diamond{border-radius:3px;}
.pill.thin{display:inline-block; width:fit-content; white-space:nowrap;}

.section ul{padding-left:1.2rem}
.section li{margin: .25rem 0 .35rem}
.section li::marker{ color: var(--mid); font-weight: 800; }






.pill.thin{
  display:inline-block;
  width:fit-content;
  white-space:nowrap;
  border-radius:999px !important;
  background:transparent !important;
  border:1px solid var(--pill-outline);
  padding:.5rem .9rem !important;
}

.providers-list .card{
  width:100%;
  box-shadow:none !important;
  border:1px solid transparent !important;
}
.providers-list .card.ghost{
  background: rgba(255,255,255,.55) !important;
}

.section h2{ font-weight: 700; }

.mt-4{ margin-top: 2rem !important; }





.pill{ padding:.7rem 1rem !important; }

.home-page 

.card.philosophy{ font-size:1.12rem; line-height:1.75; }

.providers-list .card{ width:100%; box-shadow:none !important; border:1px solid transparent !important; }
.providers-list .card.ghost{ background: rgba(255,255,255,.5) !important; }

.role{ display:block; font-style:normal; margin-top:.6rem; color: var(--deep); }

.mt-5{ margin-top: 3rem !important; }

/* Lighter hero overlay on specific pages */


.resources-page .section h2{ font-weight:700 !important; }

/* === AJI updates v4 (2025-10-14) === */
.hero h1,
.section h2 {
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 2.25rem !important; /* match 'Our Philosophy' heading size */
  line-height: 1.15 !important;
}

.hero .sub,
.lead {
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 1.2rem !important;   /* increased subheadline size */
  line-height: 1.55 !important;
}

.home-page .hero .sub{ margin-top:.2rem !important; margin-bottom:1.2rem !important; }

.pill{
  background: rgba(255,255,255,.6) !important;
  border: 1px solid rgba(255,255,255,.6) !important; /* outline matches bg */
  border-radius: 12px !important;
  padding: .7rem 1rem !important;
}

.home-statement{
  font-size: 1.3rem;
  line-height: 1.65;
  margin-top: .25rem;
}

.card.philosophy{ font-size:1.18rem; line-height:1.85; text-align:center; }

.providers-list{ gap:1rem; }
.providers-list .card{ width:100%; box-shadow:none !important; border:1px solid transparent !important; }
.providers-list .card.ghost{ background: rgba(255,255,255,.5) !important; }

.role{ display:block; font-style:normal; margin-top:.75rem; color: var(--deep); }

.mt-5{ margin-top: 3rem !important; }

.resources-page .section h2{ font-weight:700 !important; }

.resources-page .hero::before,
.contact-page .hero::before{
  background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.08) 55%, rgba(0,0,0,0)) !important;
}

/* v5 header spacing */
.site-header .navbar{ margin-top:.75rem !important; }

/* v5 home spacing */
.home-page .hero h1{ margin-bottom:.2rem !important; }
.home-page .hero .sub{ margin-top:.15rem !important; }

/* v5 pill outline matches background */
.pill{ background:rgba(255,255,255,.6) !important; border:1px solid rgba(255,255,255,.6) !important; }

.home-statement{ font-style: italic; font-size:1.32rem; line-height:1.7; margin-top:.2rem !important; }

/* v5 providers full width */
.providers-list{ gap:1rem; }
.providers-list .card{ width:100%; box-shadow:none !important; border:1px solid transparent !important; margin-left:0 !important; margin-right:0 !important; }
.providers-list .card > div{ width:100%; }

/* v5 providers hero spacing */
.providers-page .hero h1{ margin-bottom:.25rem !important; }
.providers-page .hero .sub{ margin-top:.15rem !important; }

.extra-space{ margin-bottom:1.2rem !important; }

/* v5 resources hero & spacing */
.resources-page .hero h1{ margin-bottom:.25rem !important; }
.resources-page .hero .sub{ margin-top:.15rem !important; }
.resources-page .section h2{ font-weight:700 !important; }
.resources-page .hero::before{ background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.05) 55%, rgba(0,0,0,0)) !important; }

/* v5 contact hero & spacing */
.contact-page .hero h1{ margin-bottom:.25rem !important; }
.contact-page .hero .sub{ margin-top:.15rem !important; white-space:normal !important; max-width:44rem; }
.contact-page .hero::before{ background:linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.05) 55%, rgba(0,0,0,0)) !important; }

/* v6 home spacing */
.home-page .hero .sub{ margin-bottom:.4rem !important; } /* decrease space below subheadline */
.home-page .container.center h2.mt-0{ margin-top:1.3rem !important; } /* increase space above 'Our Specialty' */

/* v6 about providers layout */
.about-page .section.tight{ padding-top:2.2rem !important; } /* less space above 'Our Providers' */
.providers-list{ max-width:none !important; }
.providers-list.stack{ max-width:none !important; }
.providers-list .card{ width:100%; }
.providers-list .card > div{ width:100%; }

/* v6 providers page spacing */
.providers-page .extra-space{ height:1.6rem; }

/* v6 resources hero */
.resources-page .hero h1{ margin-bottom:.2rem !important; }
.resources-page .hero .sub{ margin-top:.1rem !important; }
.resources-page .hero::before{ background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.03) 55%, rgba(0,0,0,0)) !important; }

/* v6 contact hero */
.contact-page .hero h1{ margin-bottom:.2rem !important; }
.contact-page .hero .sub{ white-space:normal !important; word-wrap:break-word; overflow-wrap:anywhere; max-width:36rem; }
.contact-page .hero::before{ background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.03) 55%, rgba(0,0,0,0)) !important; }

/* v7 home pills transparency & airiness */
.home-page .pill{
  background: rgba(255,255,255,.45) !important;
  border: 1px solid rgba(255,255,255,.45) !important;
  border-radius: 14px !important;
  padding: .8rem 1.05rem !important;
}

/* v7 about spacing under philosophy */
.about-page .card.philosophy{
  margin-bottom: .8rem !important;
}

/* v7 resources hero readability */
.resources-page .hero h1,
.resources-page .hero .sub{
  color:#fff !important;
  text-shadow: 0 1px 10px rgba(0,0,0,.12);
}
.resources-page .hero::before{
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02) 55%, rgba(0,0,0,0)) !important;
}

/* v8 fixes */
/* Home hero vertical spacing tighter */
.home-page .hero .stack{ gap:.45rem !important; }
.home-page .hero .stack .stack{ gap:.45rem !important; }

/* Told-you pills: airy & more transparent, but ONLY for non-thin pills */
.home-page .pill:not(.thin){
  background: rgba(255,255,255,.42) !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 14px !important;
  padding: .75rem 1rem !important;
}

/* RESTORE the 'We provide other solutions.' pill look */
.home-page .pill.thin{
  display:inline-block !important;
  width:fit-content !important;
  white-space:nowrap !important;
  border-radius:999px !important;
  background: transparent !important;
  border: 1px solid var(--pill-outline) !important;
  padding:.5rem .9rem !important;
}

/* Providers headshots larger (override inline) */
.about-page .providers-list img{
  width: 260px !important;
  height: 260px !important;
  object-fit: cover;
}

/* v9 tighten gap between 'Our Philosophy' and 'Our Providers' */
.about-page .card.philosophy{
  margin-bottom: 0.25rem !important;
}

/* v10 philosophy spacing and provider layout */
.about-page .card.philosophy{
  margin-bottom: 0.1rem !important;
}

/* Provider headshots: round, equal size, aligned left with bio text */
.about-page .providers-list .card{
  display: flex !important;
  align-items: flex-start;
  gap: 1.2rem;
  flex-wrap: nowrap;
}
.about-page .providers-list .card img{
  width: 160px !important;
  height: 160px !important;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0;
}
.about-page .providers-list .card div{
  flex: 1 1 auto;
}

/* v11 told-you pill height adjustment */
.home-page .pill:not(.thin){
  padding: 0.4rem 1rem !important; /* shorter height, same side spacing */
  line-height: 1.2 !important;
}

/* v12 told-you pill spacing & shape */
.home-page .pill:not(.thin){
  margin: 0.4rem !important;         /* increased space between pills */
  border-radius: 8px !important;     /* rectangular with slightly rounded corners */
}

/* v13 told-you pills: more transparent rectangles */
/* Applies to non-thin pills (the "We provide other solutions." pill remains oval) */
.home-page .pill:not(.thin){
  background: rgba(255,255,255,.3) !important;  /* more transparent */
  border: 1px solid rgba(255,255,255,.3) !important;
  border-radius: 8px !important;                /* rectangular with soft corners */
  margin: 0.4rem !important;
  padding: 0.45rem 1rem !important;
}

/* v14 tighten told-you pill spacing & enlarge provider headshots */

/* Reduce space between told-you question pill cards */
.home-page .pill:not(.thin){
  margin: 0.2rem !important;  /* tighter spacing */
}

/* Increase provider headshot size */
.about-page .providers-list .card img{
  width: 190px !important;
  height: 190px !important;
  border-radius: 50% !important;
  object-fit: cover;
}


/* === Mobile refinements (max-width: 640px) — desktop unchanged === */
@media (max-width: 640px){
  html, body{ font-size: 16px; }
  .container{ width:min(96%, 700px); }

  /* Header: give breathing room and wrap nav nicely */
  .site-header .header-inner{ grid-template-columns: 1fr; gap:.4rem; padding:.5rem 0 .35rem; }
  .site-header .brand img{ height: 54px; }
  .navbar{ display:flex; flex-wrap:wrap; gap:.55rem .9rem; margin-top:.25rem; }
  .navbar a{ padding:.2rem .1rem; }

  /* Hero: reduce height & vertical gaps; keep content readable */
  .hero{ min-height: 56vh; }
  .hero .overlay{ padding: 2.2rem 0; }
  .hero h1{ font-size: 1.9rem; line-height:1.15; margin: 0 0 .15rem; }
  .hero .sub{ font-size: 1.05rem; margin-top:.1rem; margin-bottom:.5rem; }

  /* Pills: tighter height; maintain spacing rhythm; thin pill remains oval */
  .pill:not(.thin){ padding:.42rem .8rem; margin:.15rem .2rem; border-radius:10px; }
  .pill .diamond{ width:.5rem; height:.5rem; }
  .pill.thin{ padding:.45rem .85rem; }

  /* Home statement + section spacing */
  .home-statement{ font-size:1.05rem; line-height:1.55; margin-top:.2rem; }
  .section{ padding: 2.6rem 0; }
  .section.tight{ padding-top: 1.6rem; }

  /* About: stack provider cards cleanly; size avatars for mobile; align left */
  .providers-list .card{ display:flex; align-items:flex-start; gap:.9rem; }
  .providers-list .card img{ width: 128px; height:128px; border-radius:50%; object-fit:cover; }
  .providers-list .card h3{ font-size:1.05rem; line-height:1.2; margin:.1rem 0; }
  .role{ margin-top:.5rem; }
  .card.philosophy{ font-size:1.05rem; line-height:1.65; margin-bottom:.4rem; }

  /* Providers page: keep featured card narrow enough for easy reading */
  .providers-page .card{ padding: .95rem 1rem; }

  /* Resources/Contact hero text legibility */
  .resources-page .hero::before,
  .contact-page .hero::before{
    background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.05) 55%, rgba(0,0,0,0));
  }
  .resources-page .hero .sub,
  .contact-page .hero .sub{ font-size:1.02rem; }

  /* Contact: keep map responsive */
  #map img, #map iframe{ width:100% !important; height:auto; border-radius:16px; }
}



/* === Mobile refinements (header & provider layout) === */
@media (max-width: 640px){
  /* Smaller "Call to Schedule..." text and no-wrap phone number */
  .site-header .header-cta{ font-size:.95rem; line-height:1.2; }
  .site-header .header-cta a[href^="tel"]{ white-space:nowrap; }

  /* Provider bios stacked under headshot for full-width reading */
  .providers-list .card{ flex-direction: column; align-items:flex-start; }
  .providers-list .card img{ margin-bottom:.6rem; }
  .providers-list .card > div{ width:100%; }
}







/* v16 mobile menu fix (desktop defaults) */
.mobile-menu{ display:none; } /* hidden on desktop */
.navbar{ display:flex; }



@media (max-width: 640px){
  /* Show mobile menu, hide desktop nav */
  .mobile-menu{ display:flex; justify-content:flex-end; margin-top:.25rem; position:relative; }
  .navbar{ display:none !important; }

  /* Menu button (hamburger) */
  .mobile-menu .menu-toggle{
    appearance:none; border:1px solid rgba(0,0,0,.15); background:#fff;
    padding:.4rem .6rem; border-radius:10px; font-size:.95rem;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
  }

  /* Sage-tinted dropdown (slightly darker than page bg) */
  .mobile-menu .menu-panel{
    position:absolute; right:0; top:calc(100% + .4rem);
    background:#e7f2ee; /* slightly darker sage */
    border:1px solid rgba(0,0,0,.12); border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.12);
    padding:.4rem; min-width: 220px; display:none;
  }
  .mobile-menu .menu-panel a{
    display:block; padding:.55rem .7rem; border-radius:8px; color:#12231d; text-decoration:none;
  }
  .mobile-menu .menu-panel a:hover{ background:rgba(0,0,0,.04); }

  /* Instant open (no animation) */
  .mobile-menu .menu-panel{ transition:none; }
  .mobile-menu.open .menu-panel{ display:block; }

  /* Providers & Contact hero text white on mobile */
  .providers-page .hero h1,
  .providers-page .hero .sub,
  .contact-page .hero h1,
  .contact-page .hero .sub{
    color:#fff !important;
    text-shadow:0 1px 8px rgba(0,0,0,.22);
  }

  /* Header tweaks retained */
  .site-header .header-cta{ font-size:.95rem; line-height:1.2; }
  .site-header .header-cta a[href^="tel"]{ white-space:nowrap; }
}



/* === Mobile-only: white headings on Home; provider stack on About === */
@media (max-width: 640px){
  /* Home hero text white for readability */
  .home-page .hero h1,
  .home-page .hero .sub{
    color:#fff !important;
    text-shadow:0 1px 8px rgba(0,0,0,.22);
  }

  /* About: stack headshot, name, title above bio */
  .about-page .providers-list .card{ 
    display:flex; 
    flex-direction: column; 
    align-items:flex-start; 
  }
  .about-page .providers-list .card img{ 
    width: 128px; 
    height:128px; 
    border-radius:50%; 
    object-fit:cover; 
    margin-bottom:.5rem;
  }
  .about-page .providers-list .card h3{ 
    margin:.15rem 0 0; 
  }
  .about-page .providers-list .card .role{ 
    margin-top:.35rem; 
    margin-bottom:.75rem; /* extra space between title and bio */
  }
}



/* === Mobile-only refinements: centered header, told-you text white, provider stack, perf === */
@media (max-width: 640px){
  /* Header: center logo and CTA on all pages; keep menu right-aligned */
  .site-header .header-inner{
    display:flex;
    flex-direction: column;
    align-items: center;
    text-align:center;
    gap:.35rem;
  }
  .site-header .brand{ display:block; margin: 0 auto; }
  .site-header .brand img{ height: 56px; }
  .site-header .header-cta{ font-size:.95rem; line-height:1.2; text-align:center; }
  .site-header .header-cta a[href^="tel"]{ white-space:nowrap; }
  .mobile-menu{ align-self:flex-end; }

  /* Home: told-you cards text white for readability */
  .home-page .pill:not(.thin),
  .home-page .pill:not(.thin) *{
    color:#fff !important;
    text-shadow: 0 1px 6px rgba(0,0,0,.25);
  }

  /* About: fully stack providers (image -> name -> title -> bio) */
  .about-page .providers-list .card{ 
    /* keep card full-width, but layout handled by inner wrapper */
    width:100%;
  }
  /* inner wrapper that currently has inline display:flex on desktop */
  .about-page .providers-list .card > div{
    display:block !important;
  }
  .about-page .providers-list .card img{
    display:block; width:144px; height:144px; border-radius:50%; object-fit:cover;
    margin: 0 0 .5rem 0;
  }
  .about-page .providers-list .card h3{ margin:.1rem 0 0; }
  .about-page .providers-list .card .role{ margin-top:.3rem; margin-bottom:.75rem; }

  /* Performance: reduce initial paint work on large sections */
  .section{ content-visibility:auto; contain-intrinsic-size: 600px; }
}



/* === Mobile-only adjustments (final pass) === */
@media (max-width: 640px){
  /* Center the mobile menu button in the header */
  .mobile-menu{ align-self:center; justify-content:center; }

  /* About: smaller headshots; enforce stacked layout with full-width bio */
  .about-page .providers-list .card{ display:block !important; }
  .about-page .providers-list .card img{
    width:120px; height:120px; border-radius:50%; object-fit:cover;
    display:block; margin: 0 0 .45rem 0;
  }
  .about-page .providers-list .card h3{ margin:.1rem 0 0; }
  .about-page .providers-list .card .role{ margin-top:.28rem; margin-bottom:.7rem; }
  .about-page .providers-list .card > div{ width:100%; } /* bio spans full width under name/title */

  /* Home: told-you pill cards slightly whiter bg + darker text */
  .home-page .pill:not(.thin){
    background: rgba(255,255,255,.62) !important;
    border: 1px solid rgba(255,255,255,.62) !important;
  }
  .home-page .pill:not(.thin), 
  .home-page .pill:not(.thin) *{
    color: var(--deep) !important;
    text-shadow: none !important;
  }
}



/* === Mobile-only: robust provider stack fix (no body class dependency) === */
@media (max-width: 640px){
  /* Force the two-column provider grid to stack vertically */
  .providers-list .card .grid-2{ display:block !important; }
  .providers-list .card .grid-2 > div{ width:100% !important; }
  /* Headshot, name, title above bio; left-align content that was centered */
  .providers-list .card .center{ text-align:left !important; }
  .providers-list .card img{
    width:120px !important; height:120px !important; border-radius:50% !important; object-fit:cover;
    display:block; margin:0 0 .5rem 0 !important;
  }
  .providers-list .card h3{ margin:.2rem 0 0 !important; }
  .providers-list .card .role{ margin-top:.25rem !important; margin-bottom:.7rem !important; }
}



/* === Mobile-only: FORCE stacked provider layout + compact headshots + readable bio width === */
@media (max-width: 640px){
  /* Remove any width caps that cause skinny columns */
  .providers-list, .providers-list .stack{ max-width:none !important; }

  /* Force any two-column provider grid to a single column */
  .providers-list .grid-2{ display:block !important; }
  .providers-list .grid-2 > div{ width:100% !important; }

  /* Ensure the provider card itself doesn't use side-by-side flex */
  .providers-list .card{ display:block !important; text-align:left !important; }

  /* Headshot smaller and above text */
  .providers-list .card img{
    width:104px !important; height:104px !important;
    border-radius:50% !important; object-fit:cover;
    display:block; margin:0 0 .6rem 0 !important; float:none !important;
  }

  /* Name and title spacing */
  .providers-list .card h3{ margin:.1rem 0 0 !important; }
  .providers-list .card .role{ margin-top:.3rem !important; margin-bottom:.75rem !important; }

  /* Bio text takes full width under the headshot + name + title */
  /* Target the second column (if present) or the last content block as bio */
  .providers-list .grid-2 > div:nth-child(2),
  .providers-list .card > div:last-child{
    width:100% !important;
    max-width: 68ch;     /* readable measure */
    font-size: 1rem;
    line-height: 1.6;
  }
}



/* Mobile ombre background override */

@media(max-width:640px){
  body{
    background: linear-gradient(180deg, #ffffff 0%, #d9efe6 100%) !important;
    color: #1a2a24 !important;
  }
  .section, .hero, .footer, header{
    background: transparent !important;
  }
}


/* Mobile-only: remove hero background images & disable sticky header */
@media(max-width:640px){
  /* Remove hero background photos on all pages */
  .hero .hero-bg{
    display:none !important;
  }
  .hero{
    min-height:auto !important;
    padding:2.5rem 0 2rem !important;
    background:transparent !important;
  }

  /* Ensure page-specific heroes don't reintroduce background */
  .home-page .hero,
  .about-page .hero,
  .providers-page .hero,
  .resources-page .hero,
  .contact-page .hero{
    background:transparent !important;
  }

  /* Turn off sticky header on mobile */
  .site-header{
    position:static !important;
    top:auto !important;
  }
}


/* v18 mobile header + background refinement */
@media(max-width:640px){
  /* Sleek, subtle gradient background for all pages */
  body{
    background: linear-gradient(180deg, #f9fcfa 0%, #fbfdfc 40%, #edf3f0 100%) !important;
    color: #1a2a24 !important;
  }

  /* Keep main content blocks transparent so gradient shows through */
  .section,
  .hero,
  .footer{
    background: transparent !important;
  }

  /* Solid, non-see-through sticky header on mobile */
  header,
  .site-header{
    background:#ffffff !important;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
  }

  .site-header{
    position:sticky !important;
    top:0;
    z-index:60;
  }

  /* Ensure mobile dropdown menu sits above page text and is clickable */
  .mobile-menu{
    z-index:70;
  }
  .mobile-menu .menu-panel{
    z-index:100 !important;
  }
}

/* v19 Mobile Option A – "Soft Clinical" design */
@media (max-width:640px){

  /* Overall background: clean clinic gradient */
  body{
    background: linear-gradient(
      180deg,
      #fdfefc 0%,
      #f6faf7 42%,
      #e7f1ec 100%
    ) !important;
    color:#10261e !important;
  }

  /* Remove solid blocks so gradient shows; sections become cards */
  .section,
  .hero,
  .footer{
    background:transparent !important;
  }

  /* HERO – soft card instead of photo */
  .hero{
    min-height:auto !important;
    padding:2.2rem 0 2.1rem !important;
  }

  .hero .overlay{
    padding-inline:1rem;
  }

  /* Main hero content sits in a raised card */
  .hero .overlay .stack{
    background:#ffffff;
    border-radius:18px;
    box-shadow:0 10px 26px rgba(0,0,0,.06);
    padding:1.4rem 1.4rem 1.6rem;
    max-width:100%;
  }

  .hero h1{
    font-size:1.6rem;
    line-height:1.25;
    color:#10261e;
    margin-bottom:.4rem !important;
  }

  .hero .sub{
    font-size:1.02rem;
    color:#3a4f46;
    margin-bottom:1.05rem !important;
  }

  /* Pills -> clean checklist-style cards */
  .home-page .pill{
    background:#ffffff;
    border-radius:14px;
    border:1px solid rgba(31,75,62,.18);
    box-shadow:0 4px 10px rgba(0,0,0,.03);
    padding:.65rem .8rem;
    gap:.4rem;
    align-items:flex-start;
    justify-content:flex-start;
    color:#12231d;
  }

  /* Remove the diamond icon for a cleaner look */
  .home-page .pill .diamond{
    display:none !important;
  }

  /* Thin pill becomes subtle supporting text */
  .home-page .pill.thin{
    border-style:dashed;
    border-color:rgba(31,75,62,.25);
    background:rgba(255,255,255,.9);
    font-size:.96rem;
  }

  /* Section cards on mobile */
  .section .container{
    background:#ffffff;
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    padding:1.5rem 1.4rem 1.7rem;
    margin-inline:1rem;
  }

  /* Avoid double rounding on very small sections */
  .section.tight .container{
    padding:1.3rem 1.3rem 1.4rem;
  }

  /* Provider cards – app-like profile layout */
  .about-page .providers-list .card{
    background:#ffffff;
    border-radius:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
    padding:1.3rem 1.4rem 1.5rem;
    margin:0 1rem 1.4rem;
  }

  .about-page .providers-list .card > div{
    display:block !important;
    width:100%;
  }

  .about-page .providers-list .card img{
    width:118px !important;
    height:118px !important;
    border-radius:50% !important;
    object-fit:cover;
    display:block;
    margin:0 auto .65rem auto !important;
    float:none !important;
    box-shadow:0 4px 10px rgba(0,0,0,.10);
  }

  .about-page .providers-list .card h3{
    text-align:center;
    margin:.15rem 0 0 !important;
    color:#16372b;
  }

  .about-page .providers-list .card .role{
    text-align:center;
    margin-top:.25rem !important;
    margin-bottom:.75rem !important;
    color:#49635a;
    font-size:.98rem;
  }

  .about-page .providers-list .card p{
    text-align:left;
    font-size:1rem;
    line-height:1.65;
    color:#23352f;
  }

  /* Other pages' content cards also float on the gradient */
  .providers-page .section .container,
  .resources-page .section .container,
  .contact-page .section .container{
    background:#ffffff;
  }

  /* Keep header solid and clean on mobile */
  header,
  .site-header{
    background:#ffffff !important;
    box-shadow:0 2px 6px rgba(0,0,0,.06);
  }
}

/* v20 mobile hero readability + remove gray tint */
@media (max-width:640px){
  /* Make hero background on mobile very light and flat */
  .hero::before{
    background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,252,250,0.98)) !important;
  }

  /* Ensure hero text uses dark brand color, no glow */
  .home-page .hero h1,
  .home-page .hero .sub,
  .providers-page .hero h1,
  .providers-page .hero .sub,
  .resources-page .hero h1,
  .resources-page .hero .sub,
  .contact-page .hero h1,
  .contact-page .hero .sub{
    color:#10261e !important;
    text-shadow:none !important;
  }
}

/* v22 mobile visual enhancements – softer hero photo + more interesting cards */
@media (max-width:640px){

  /* Bring hero photos back in a soft, non-busy way */
  .hero .hero-bg{
    display:block !important;
    opacity:0.35;
    filter:blur(1.2px);
    transform:scale(1.06);
    background-position:center top;
  }

  /* White veil over the hero image so text always wins */
  .hero::before{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.98),
      rgba(255,255,255,0.99) 45%,
      rgba(255,255,255,0.94) 100%
    ) !important;
  }

  /* Section containers: from plain boxes to soft gradient cards with an accent */
  .section .container{
    background: linear-gradient(
      135deg,
      #ffffff 0%,
      #f7fbf8 45%,
      #edf5f0 100%
    );
    border-radius:18px;
    box-shadow:0 10px 24px rgba(0,0,0,0.06);
    border:1px solid rgba(31,75,62,0.06);
    position:relative;
    overflow:hidden;
  }

  .section .container::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg, #2d6b57, #8cb4a3);
    opacity:0.8;
  }

  /* Avoid card-within-card look for very small/tight sections */
  .section.tight .container{
    box-shadow:0 6px 16px rgba(0,0,0,0.05);
    border-radius:16px;
  }

  /* Home-page pills: more visual interest */
  .home-page .pill{
    background: linear-gradient(135deg, #ffffff 0%, #f3faf6 100%);
    border-radius:18px;
    border:1px solid rgba(31,75,62,0.18);
    box-shadow:0 8px 20px rgba(0,0,0,0.05);
  }

  /* Reintroduce the icon as a soft circular dot with halo */
  .home-page .pill .diamond{
    display:inline-block !important;
    width:.55rem;
    height:.55rem;
    border-radius:999px;
    background:var(--mid);
    box-shadow:0 0 0 3px rgba(45,107,87,0.13);
    flex:0 0 auto;
    margin-top:.25rem;
  }

  /* Buttons: a bit more depth and richness */
  .btn.primary{
    background:linear-gradient(135deg, var(--deep), #15382c);
    box-shadow:0 8px 18px rgba(0,0,0,0.2);
    border-color:transparent;
  }

  .btn.ghost{
    background:#ffffff;
    border-color:rgba(31,75,62,0.25);
  }
}

/* v23 mobile – align feel with desktop (simpler cards & classic hero) */
@media (max-width:640px){

  /* Use same soft sage background + text color as desktop */
  body{
    background: var(--sage) !important;
    color: var(--text) !important;
  }

  .section{
    background: var(--sage) !important;
  }

  /* Let container behave like desktop: no extra card styling */
  .section .container{
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    margin-inline:auto !important;
    position:static !important;
    overflow:visible !important;
  }
  .section .container::before{
    content:none !important;
  }

  /* HERO – closer to desktop look */
  .hero{
    background: var(--sage) !important;
    min-height: 60vh;
    padding: 3rem 0 3rem !important;
  }

  .hero .hero-bg{
    display:block !important;
    opacity:1 !important;
    filter:none !important;
    transform:scale(1.02) !important;
  }

  /* Slightly softened desktop-style overlay for readability */
  .hero::before{
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.40),
      rgba(0,0,0,0.20) 40%%,
      rgba(0,0,0,0.04) 70%%,
      rgba(0,0,0,0) 100%%
    ) !important;
  }

  /* Hero content no longer in its own white card */
  .hero .overlay{
    padding-inline: 0 !important;
  }
  .hero .overlay .stack{
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width:46rem;
  }

  /* Hero text closer to desktop style */
  .home-page .hero h1,
  .home-page .hero .sub,
  .providers-page .hero h1,
  .providers-page .hero .sub,
  .resources-page .hero h1,
  .resources-page .hero .sub,
  .contact-page .hero h1,
  .contact-page .hero .sub{
    color:#ffffff !important;
    text-shadow:0 1px 8px rgba(0,0,0,0.45) !important;
  }

  /* Pills – reuse desktop styling, just allow full width on mobile */
  .home-page .pill{
    border-radius:12px !important;
    box-shadow: var(--shadow);
    background: var(--pill-bg);
  }

  .home-page .pill .diamond{
    display:inline-block !important;
    width:.6rem;
    height:.6rem;
    background:var(--mid);
    transform:rotate(45deg);
    border-radius:2px;
    box-shadow:none;
    flex:0 0 auto;
  }

  /* Buttons – match desktop feel */
  .btn.primary{
    background: var(--deep) !important;
    box-shadow:none !important;
    border-color:transparent !important;
  }
  .btn.ghost{
    background:#ffffff !important;
    border-color:rgba(31,75,62,0.25) !important;
  }
}

/* v24 mobile – hybrid of v22 cards + v23 warmth */
@media (max-width:640px){

  /* Warm sage base like desktop */
  body{
    background: var(--sage) !important;
    color: var(--text) !important;
  }
  .section{
    background: var(--sage) !important;
  }

  /* Hero: keep card + photo from v22 but let more image show through */
  .hero{
    min-height:auto !important;
    padding:2.4rem 0 2.2rem !important;
    background:transparent !important;
  }

  .hero .hero-bg{
    display:block !important;
    opacity:0.55;              /* more visible photo than v22 */
    filter:blur(0.9px);        /* still soft, not busy */
    transform:scale(1.06);
    background-position:center top;
  }

  /* Softer white veil – slightly more transparent than v22 */
  .hero::before{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.92),
      rgba(255,255,255,0.94) 45%%,
      rgba(255,255,255,0.88) 100%%
    ) !important;
  }

  .hero .overlay{
    padding-inline:1rem;
  }

  .hero .overlay .stack{
    background: rgba(255,255,255,0.96);
    border-radius:18px;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    padding:1.4rem 1.4rem 1.6rem;
    max-width:100%;
  }

  /* Slightly smaller heading so "Restoring Confidence." is more likely to stay on one line */
  .home-page .hero h1{
    font-size:1.5rem;
    line-height:1.25;
  }

  .hero h1{
    color:#10261e !important;
    text-shadow:none !important;
    margin-bottom:.4rem !important;
  }

  .hero .sub{
    font-size:1.02rem;
    color:#3a4f46;
    margin-bottom:1.05rem !important;
  }

  /* Re-apply v22 card styling for sections */
  .section .container{
    background: linear-gradient(
      135deg,
      #ffffff 0%%,
      #f7fbf8 45%%,
      #edf5f0 100%%
    ) !important;
    border-radius:18px !important;
    box-shadow:0 10px 24px rgba(0,0,0,0.06) !important;
    border:1px solid rgba(31,75,62,0.06) !important;
    position:relative !important;
    overflow:hidden !important;
    padding:1.5rem 1.4rem 1.7rem !important;
    margin-inline:1rem !important;
  }

  .section .container::before{
    content:"" !important;
    position:absolute;
    left:0;
    top:0;
    width:100%%;
    height:3px;
    background:linear-gradient(90deg, #2d6b57, #8cb4a3);
    opacity:0.8;
  }

  .section.tight .container{
    box-shadow:0 6px 16px rgba(0,0,0,0.05) !important;
    border-radius:16px !important;
    padding:1.3rem 1.3rem 1.4rem !important;
  }

  /* v22 pill styling */
  .home-page .pill{
    background: linear-gradient(135deg, #ffffff 0%%, #f3faf6 100%%) !important;
    border-radius:18px !important;
    border:1px solid rgba(31,75,62,0.18) !important;
    box-shadow:0 8px 20px rgba(0,0,0,0.05) !important;
  }

  .home-page .pill .diamond{
    display:inline-block !important;
    width:.55rem;
    height:.55rem;
    border-radius:999px;
    background:var(--mid);
    box-shadow:0 0 0 3px rgba(45,107,87,0.13);
    flex:0 0 auto;
    margin-top:.25rem;
  }

  /* Buttons: keep a little depth from v22 but not too glossy */
  .btn.primary{
    background:linear-gradient(135deg, var(--deep), #15382c) !important;
    box-shadow:0 6px 16px rgba(0,0,0,0.16) !important;
    border-color:transparent !important;
  }

  .btn.ghost{
    background:#ffffff !important;
    border-color:rgba(31,75,62,0.25) !important;
  }
}

/* v24.1 mobile – zoomed-out look on top of v24 hybrid */
@media (max-width:640px){

  /* Slightly smaller global type for a calmer, zoomed-out feel */
  body{
    font-size:0.95rem !important;
  }

  /* Darken all hero overlay text on every page */
  .hero h1{
    color:#0d2019 !important;    /* deep green/charcoal */
    font-weight:700 !important;
    margin-bottom:.4rem !important;
  }

  .hero .sub{
    color:#1f3a31 !important;    /* darker sage/charcoal */
    font-size:0.96rem !important;
    margin-bottom:1rem !important;
  }

  /* Home page: keep headline slightly larger but not overwhelming */
  .home-page .hero h1{
    font-size:1.4rem !important;
    line-height:1.25 !important;
  }

  /* Increase opacity of the white veil over hero photos (more readability, keep warmth) */
  .hero::before{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.97),
      rgba(255,255,255,0.99) 45%%,
      rgba(255,255,255,0.93) 100%%
    ) !important;
  }

  /* Keep hero cards from v24 but slightly slimmer with zoomed-out padding */
  .hero{
    min-height:auto !important;
    padding:2.2rem 0 2rem !important;
  }

  .hero .overlay{
    padding-inline:1rem !important;
  }

  .hero .overlay .stack{
    padding:1.2rem 1.1rem 1.3rem !important;
    border-radius:16px !important;
    box-shadow:0 8px 20px rgba(0,0,0,0.07) !important;
    max-width:100% !important;
  }

  /* Center ALL section cards below hero and give them a lighter, zoomed-out presence */
  .section .container{
    margin-left:auto !important;
    margin-right:auto !important;
    max-width:92%% !important;
    padding:1.1rem 1rem 1.25rem !important;
    border-radius:14px !important;
    box-shadow:0 5px 16px rgba(0,0,0,0.05) !important;
  }

  .section .container::before{
    height:2px !important;
    opacity:0.7 !important;
  }

  /* Buttons: keep full-width presence but slightly shorter */
  .btn{
    padding:.55rem .95rem !important;
  }

  .btn.primary{
    min-height:42px !important;
  }
}

/* v24.2 mobile – stronger fade on hero photos, dark overlay text, tighter zoom-out */
@media (max-width:640px){

  /* Further zoomed-out base text */
  body{
    font-size:0.9rem !important;
  }

  /* Darken ALL hero overlay text on every page with higher specificity */
  .home-page .hero h1,
  .providers-page .hero h1,
  .resources-page .hero h1,
  .contact-page .hero h1{
    color:#0b2019 !important;
    font-weight:700 !important;
  }

  .home-page .hero .sub,
  .providers-page .hero .sub,
  .resources-page .hero .sub,
  .contact-page .hero .sub{
    color:#1f3a31 !important;
  }

  /* Also darken generic hero body text that sits over the photo */
  .hero p{
    color:#23362f !important;
  }

  /* Home page hero: slightly smaller than before so it's calmer, but still strong */
  .home-page .hero h1{
    font-size:1.3rem !important;
    line-height:1.25 !important;
  }

  /* Make hero photos much lighter so faces don't overwhelm the text */
  .hero::before{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,0.985),
      rgba(255,255,255,0.998) 40%%,
      rgba(255,255,255,0.98) 100%%
    ) !important;
  }

  .hero .hero-bg{
    opacity:0.25 !important;
    filter:blur(1px) !important;
    transform:scale(1.05) !important;
    background-position:center top;
  }

  .hero{
    min-height:auto !important;
    padding:2rem 0 1.8rem !important;
  }

  /* Remove any faint hero cards; just text on the faded photo */
  .hero .overlay{
    padding-inline:0 !important;
  }
  .hero .overlay .stack{
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    max-width:92%% !important;        /* align with section card width */
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .hero .overlay .stack::before{
    content:none !important;
  }

  /* Center and slim section cards below hero (kept from v24.1, but slightly narrower) */
  .section .container{
    margin-left:auto !important;
    margin-right:auto !important;
    max-width:90%% !important;
    padding:1rem 0.9rem 1.15rem !important;
    border-radius:14px !important;
    box-shadow:0 4px 14px rgba(0,0,0,0.045) !important;
  }

  .section .container::before{
    height:2px !important;
    opacity:0.7 !important;
  }

  /* Home-page pills a bit smaller/less in-your-face */
  .home-page .pill{
    padding:.5rem .7rem !important;
    font-size:0.9rem !important;
    border-radius:16px !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.04) !important;
  }

  /* Buttons: full-width but shorter */
  .btn{
    padding:.5rem .9rem !important;
  }
  .btn.primary{
    min-height:40px !important;
  }
}

/* v24.3 mobile – stronger zoom-out on hero, restore slightly larger body text */
@media (max-width:640px){

  /* Let body/content be a bit larger again */
  body{
    font-size:0.95rem !important;
  }

  /* Scale down hero typography more than the rest */
  .home-page .hero h1{
    font-size:1.2rem !important;
    line-height:1.22 !important;
  }

  .providers-page .hero h1,
  .resources-page .hero h1,
  .contact-page .hero h1{
    font-size:1.15rem !important;
    line-height:1.22 !important;
  }

  .home-page .hero .sub,
  .providers-page .hero .sub,
  .resources-page .hero .sub,
  .contact-page .hero .sub{
    font-size:0.9rem !important;
  }

  /* Tighten hero vertical space so more of the page shows at once */
  .hero{
    padding:1.6rem 0 1.4rem !important;
  }

  /* Keep hero text width aligned with cards below */
  .hero .overlay .stack{
    max-width:90% !important;
  }

  /* Slightly reduce hero background zoom so image itself feels more "zoomed out" */
  .hero .hero-bg{
    transform:scale(1.02) !important;
  }
}

/* v24.4 mobile – correct hierarchy, warmer overlay, hero-focused emphasis */
@media (max-width:640px){

  /* Body text slightly smaller than hero text, but not tiny */
  body{
    font-size:0.95rem !important;
  }

  /* === HERO TYPOGRAPHY HIERARCHY === */

  /* Home hero: primary headline */
  .home-page .hero h1{
    font-size:1.55rem !important;   /* Option A-1: polished but strong */
    line-height:1.25 !important;
    color:#0b2019 !important;
    font-weight:700 !important;
  }

  /* Other page heroes: slightly smaller than home, but still above section text */
  .providers-page .hero h1,
  .resources-page .hero h1,
  .contact-page .hero h1{
    font-size:1.45rem !important;
    line-height:1.25 !important;
    color:#0b2019 !important;
    font-weight:700 !important;
  }

  /* Hero subheadlines – larger than body text below, but below H1 */
  .home-page .hero .sub,
  .providers-page .hero .sub,
  .resources-page .hero .sub,
  .contact-page .hero .sub{
    font-size:1.05rem !important;
    line-height:1.4 !important;
    color:#0b2019 !important;        /* match section text color */
  }

  /* Any hero body copy over the image */
  .hero p{
    color:#0b2019 !important;        /* same as section body text */
  }

  /* Section headings below hero slightly smaller than hero H1s */
  .section .container h2,
  .section .container h3{
    font-size:1.35rem !important;    /* just under hero H1 */
    line-height:1.3 !important;
  }

  /* === HERO OVERLAY: WARMER & LESS OPAQUE (Option B - W2) === */
  .hero::before{
    background: linear-gradient(
      180deg,
      rgba(255,245,235,0.88),
      rgba(255,245,235,0.9) 45%,
      rgba(255,245,235,0.86) 100%
    ) !important;
  }

  .hero .hero-bg{
    opacity:0.32 !important;          /* a bit more image visible than v24.3, but still soft */
    filter:blur(0.8px) !important;
    transform:scale(1.03) !important;
    background-position:center top;
  }

  /* Hero vertical sizing – keep zoomed-out but not cramped */
  .hero{
    padding:1.8rem 0 1.6rem !important;
  }

  /* Match hero text margins to section card margins */
  .hero .overlay{
    padding-inline:0 !important;
  }
  .hero .overlay .stack{
    max-width:90% !important;          /* align with sections */
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:1rem !important;
    padding-right:1rem !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
  .hero .overlay .stack::before{
    content:none !important;
  }

  /* === SECTION CARDS (already zoomed-out, keep hierarchy under hero) === */
  .section .container{
    margin-left:auto !important;
    margin-right:auto !important;
    max-width:90% !important;
    padding:1rem 0.9rem 1.15rem !important;
    border-radius:14px !important;
    box-shadow:0 4px 14px rgba(0,0,0,0.045) !important;
  }

  /* === "We provide other solutions." pill emphasis (Option C - P1) === */
  .home-page .pill.thin{
    display:block !important;
    max-width:19rem;
    margin:1rem auto 0 auto !important;
    text-align:center !important;
    font-size:1rem !important;        /* larger than other pills */
    font-weight:600 !important;
    background:linear-gradient(135deg,#ffffff 0%,#f6ece2 100%) !important;
    border-width:1.5px !important;
    border-color:rgba(11,32,25,0.6) !important;
    box-shadow:0 10px 26px rgba(0,0,0,0.24) !important;
    border-radius:999px !important;
  }

  /* Other pills: slightly smaller so thin pill reads as focal */
  .home-page .pill:not(.thin){
    font-size:0.9rem !important;
    padding:.5rem .7rem !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.04) !important;
  }
}

/* v24.5 mobile & global – tighter margins, stronger hero hierarchy on subpages,
   less gap after solutions pill, sticky header & larger logo */

@media (max-width:640px){

  /* Tighter horizontal padding so text isn't so far from the edges */
  .hero .overlay .stack{
    max-width:94% !important;
    padding-left:0.65rem !important;
    padding-right:0.65rem !important;
  }

  .section .container{
    max-width:94% !important;
    padding:0.85rem 0.65rem 1rem !important;
  }

  /* Home hero: reduce gap after "We provide other solutions." pill */
  .home-page .pill.thin{
    margin:0.75rem auto 0.35rem auto !important;
  }
  .home-page .hero{
    padding-bottom:1.2rem !important;
  }

  /* Providers / Resources / Contact: make hero H1 & sub clearly larger than section text */
  .providers-page .hero h1,
  .resources-page .hero h1,
  .contact-page .hero h1{
    font-size:1.6rem !important;
    line-height:1.25 !important;
  }

  .providers-page .hero .sub,
  .resources-page .hero .sub,
  .contact-page .hero .sub{
    font-size:1.1rem !important;
    line-height:1.4 !important;
  }

  .providers-page .section .container h2,
  .providers-page .section .container h3,
  .resources-page .section .container h2,
  .resources-page .section .container h3,
  .contact-page .section .container h2,
  .contact-page .section .container h3{
    font-size:1.25rem !important;
  }
}

/* Global header tweaks – ensure sticky & slightly larger logo */
.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:80 !important;
}

.site-header .brand img{
  height:64px !important;
}

/* v24.6 mobile – stronger headline pop, tighter margins again,
   vertical centering for pill/button cards, and fix text hierarchy under h2s */

@media (max-width:640px){

  /* Even tighter side margins on mobile */
  .hero .overlay .stack{
    max-width:96% !important;
    padding-left:0.5rem !important;
    padding-right:0.5rem !important;
  }

  .section .container{
    max-width:96% !important;
    padding:0.75rem 0.5rem 0.9rem !important;
  }

  /* Headlines "pop" more */
  .hero h1{
    font-weight:800 !important;
    letter-spacing:0.01em !important;
    text-shadow:0 2px 8px rgba(0,0,0,0.10) !important;
  }

  .section .container h2,
  .section .container h3{
    font-weight:700 !important;
    letter-spacing:0.01em !important;
  }

  /* Ensure hero subheadlines stay larger than body/lead text */
  .hero .sub{
    font-size:1.12rem !important;
    line-height:1.45 !important;
  }

  /* Body/lead text under headings smaller than subheadlines */
  .lead,
  .section .container p{
    font-size:0.95rem !important;
    line-height:1.55 !important;
  }

  /* Collaborative Services / Our Specialty paragraphs use the above sizes
     via .lead / p, so they'll now sit below hero subheads in hierarchy. */

  /* Vertically center text in pill-style buttons & button groups */
  .pill,
  .buttons .btn,
  .btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

/* v24.7 mobile – Option A: white hero headlines with localized gradient,
   slightly narrower margins again, and left-aligned "Told you..." pills */

@media (max-width:640px){

  /* Narrower margins on all mobile content */
  .hero .overlay .stack{
    max-width:97% !important;
    padding-left:0.4rem !important;
    padding-right:0.4rem !important;
  }

  .section .container{
    max-width:97% !important;
    padding:0.6rem 0.4rem 0.85rem !important;
  }

  /* White hero text with localized soft gradient halo behind it */
  .hero .overlay .stack{
    position:relative !important;
    z-index:1;
  }

  .hero .overlay .stack::before{
    content:"" !important;
    position:absolute;
    inset:-0.7rem -0.55rem;
    background:linear-gradient(
      135deg,
      rgba(5,20,16,0.70),
      rgba(5,20,16,0.25)
    );
    border-radius:22px;
    z-index:-1;
    opacity:0.9;
  }

  .hero h1,
  .hero .sub,
  .hero p{
    color:#ffffff !important;
  }

  .hero h1{
    font-weight:800 !important;
    letter-spacing:0.01em !important;
    text-shadow:0 3px 10px rgba(0,0,0,0.45) !important;
  }

  .hero .sub,
  .hero p{
    text-shadow:0 2px 6px rgba(0,0,0,0.35) !important;
  }

  /* Left-align the "Told you..." pills but keep other solution pill centered */
  .home-page .pill:not(.thin){
    justify-content:flex-start !important;
    text-align:left !important;
  }

  .home-page .pill.thin{
    justify-content:center !important;
    text-align:center !important;
  }
}

/* v24.8 mobile – remove large halo card, keep white hero text + shadow only */

@media (max-width:640px){

  /* Remove the big rounded "card" effect around the hero stack */
  .hero .overlay .stack::before{
    content:none !important;
    background:none !important;
  }

  /* Make hero headline + subheadline white and readable without a card */
  .hero .overlay .left h1,
  .hero .overlay .left .sub{
    color:#ffffff !important;
    text-shadow:0 3px 10px rgba(0,0,0,0.55) !important;
  }

  .hero .overlay .left p{
    color:#fdfdfd !important;
    text-shadow:0 2px 7px rgba(0,0,0,0.45) !important;
  }
}

/* v24.9 mobile hero darkening + right text white + reduce space below solutions */

@media (max-width:640px){

  /* Medium subtle dark overlay */
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.24);
    z-index:0;
  }
  .hero img{
    position:relative;
    z-index:-1;
  }

  /* Right aligned hero text white */
  .hero .overlay .right h1,
  .hero .overlay .right .sub{
    color:#ffffff !important;
    text-shadow:0 3px 10px rgba(0,0,0,0.55) !important;
  }
  .hero .overlay .right p{
    color:#fdfdfd !important;
    text-shadow:0 2px 7px rgba(0,0,0,0.45) !important;
  }

  /* Reduce space after "We provide other solutions." pill */
  .home-page .pill.thin{
    margin-bottom:0.6rem !important;
  }
}

/* v24.10 mobile spacing tweaks – option B */

/* Move hero headline up and tighten pills so "We provide other solutions." is above the fold */
@media (max-width:640px){

  /* Pull hero content up a bit */
  .hero .overlay{
    padding-top:0.9rem !important;
    padding-bottom:0.9rem !important;
  }

  .hero .overlay .stack{
    margin-top:0.15rem !important;
  }

  .hero .overlay .left h1,
  .hero .overlay .right h1{
    margin-top:0.1rem !important;
    margin-bottom:0.3rem !important;
  }

  .hero .overlay .left .sub,
  .hero .overlay .right .sub{
    margin-bottom:0.45rem !important;
  }

  /* Home hero pills: tighter vertical spacing */
  .home-page .pill{
    margin-top:0.22rem !important;
    margin-bottom:0.22rem !important;
  }

  /* Keep "We provide other solutions." pill close to the ones above it */
  .home-page .pill.thin{
    margin-top:0.35rem !important;
    margin-bottom:0.45rem !important;
  }
}


/* v24.15 – darker mobile hero overlay & more balanced hero heights */
@media (max-width: 640px){
  /* Let content define height instead of fixed viewport fraction */
  .hero,
  .hero.is-small{
    min-height: 0;
  }

  /* Tighten vertical padding so hero doesn't fill the whole screen */
  .hero .overlay{
    padding-top: 1.05rem;
    padding-bottom: 1.8rem;
  }

  /* Home hero specific tweaks so "We provide other solutions" fits on first view */
  .home-page .hero .stack{
    gap: 0.3rem;
  }
  .home-page .hero .stack .pill{
    margin-bottom: 0.25rem;
  }
  .home-page .hero .stack .pill.thin{
    margin-top: 0.25rem;
  }
}

/* v24.11 mobile – darker hero, shorter heroes, tighter home hero pills */
@media (max-width:640px){

  /* Darken hero images more so white text stands out */
  .hero::before{
    background: rgba(0,0,0,0.24) !important;
  }

  /* Normalize hero heights across pages & avoid full-screen feel */
  .hero{
    min-height:auto !important;
    padding:1.4rem 0 1.4rem !important;
  }

  /* Home hero just a bit tighter so next section starts to peek in */
  .home-page .hero{
    padding-bottom:1.1rem !important;
  }

  /* Consistent, smaller vertical padding for hero content */
  .hero .overlay{
    padding-top:0.8rem !important;
    padding-bottom:0.8rem !important;
  }

  .hero .overlay .stack{
    margin-top:0 !important;
  }

  /* Home hero pills: tighter gaps so "We provide other solutions." can fit */
  .home-page .pill{
    margin-top:0.15rem !important;
    margin-bottom:0.15rem !important;
  }

  .home-page .pill.thin{
    margin-top:0.25rem !important;
    margin-bottom:0.35rem !important;
  }
}

/* v24.12 mobile – sharper, darker heroes + per-page spacing refinements */
@media (max-width:640px){

  /* 1) Make hero images darker and less fuzzy (less "white wash") */
  .hero::before{
    background: rgba(0,0,0,0.26) !important; /* slightly darker, no pale veil */
  }

  .hero .hero-bg{
    opacity:0.5 !important;          /* image shows through more clearly */
    filter:blur(0.2px) !important;   /* reduce fuzziness */
    transform:scale(1.02) !important;
  }

  /* 2) Balance hero vertical space across Providers / Resources / Contact */
  .providers-page .hero,
  .resources-page .hero,
  .contact-page .hero{
    padding-top:1.6rem !important;
    padding-bottom:1.6rem !important;
  }

  /* Keep home hero slightly shorter so next section can peek in */
  .home-page .hero{
    padding-top:1.4rem !important;
    padding-bottom:1.2rem !important;
  }

  /* 3) Providers page – less space above "Collaborative Services" */
  .providers-page .section:first-of-type{
    padding-top:1.1rem !important;
  }

  /* 4) Home page – make "The Atrophic Jaw Institute..." statement larger again */
  .home-statement{
    font-size:1.15rem !important;
    line-height:1.6 !important;
  }

  /* 5) About page – less space above "Our Providers" and above Mark Auble card */
  .about-page .section.tight{
    padding-top:1.0rem !important;   /* pull "Our Providers" closer to the card above */
  }

  .about-page .providers-list{
    gap:0.6rem !important;           /* tighten space between provider cards, esp. above Mark */
  }
}

/* v24.13 mobile – reduce white haze; increase hero height for resources/contact */

/* MOBILE ONLY */
@media (max-width:640px){

  /* 1. Reduce white haze (global) */
  .hero::before{
    background: rgba(0,0,0,0.22) !important; /* slightly lighter than v24.12 */
  }
  .hero .hero-bg{
    opacity:0.58 !important;     /* reduce haze, more image visible */
    filter:blur(0.1px) !important;
  }

  /* 2. Extra reduction of haze on Providers, Resources, Contact */
  .providers-page .hero::before,
  .resources-page .hero::before,
  .contact-page .hero::before{
    background: rgba(0,0,0,0.18) !important; /* even less haze */
  }
  .providers-page .hero .hero-bg,
  .resources-page .hero .hero-bg,
  .contact-page .hero .hero-bg{
    opacity:0.65 !important; /* clearer image */
    filter:blur(0px) !important;
  }

  /* 3. Normalize hero image height: match Resources + Contact to Providers */
  .providers-page .hero{
    padding-top:1.55rem !important;
    padding-bottom:1.55rem !important;
  }
  .resources-page .hero,
  .contact-page .hero{
    padding-top:1.55rem !important;
    padding-bottom:1.55rem !important;
  }

  /* 4. Home stays slightly shorter so next section peeks through */
  .home-page .hero{
    padding-top:1.35rem !important;
    padding-bottom:1.15rem !important;
  }
}