:root{
  --navy: #091c2e;
  --cream: #f8f4ee;
  --gold: #bb9457;
  --ink: #1b2430;
  --ff-sans: 'EB Garamond', Garamond, serif;
  --ff-serif: 'EB Garamond', Garamond, serif;
  --ff-script: 'Whispering Signature','EB Garamond', serif;
}

/* Embedded brand script fonts */
@font-face{
  font-family:'Whispering Signature';
  src:url('fonts/WhisperingSignature.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Priestacy';
  src:url('fonts/Priestacy.otf') format('opentype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);background:var(--cream);font-family:var(--ff-sans);line-height:1.6}

a{color:inherit;text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 20px}
.btn{display:inline-block;padding:12px 20px;border-radius:28px;background:var(--gold);color:#fff;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.15)}
.btn.ghost{background:transparent;border:2px solid #fff;color:#fff}

/* Header / nav */
.site-header{position:sticky;top:0;z-index:20;background:var(--navy);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand img{height:40px;width:auto;border-radius:8px}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{color:#e9eef6;opacity:.95}
.nav-links a.active, .nav-links a:hover{color:#fff}
.nav-cta .btn{background:var(--gold)}

/* Hero */
.hero{position:relative;min-height:72vh;display:grid;place-items:center;background:url('assets/hero.webp') center/cover no-repeat}
.hero::after{content:none;}
.hero-inner{position:relative;z-index:2;text-align:center;color:#fff;padding:80px 16px}
.hero .kicker{font-family:var(--ff-serif);font-size:1.1rem;letter-spacing:.12em;text-transform:uppercase;opacity:.9}
.hero .title-script{font-family:var(--ff-script);font-size:clamp(40px,7.2vw,84px);line-height:1.05;margin:.2em 0 .4em}
.hero .buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Sections */
.section{padding:72px 0}
.section-title{font-family:var(--ff-serif);font-size:clamp(28px,4vw,40px);margin:0 0 24px;color:var(--navy)}
.section-title.script{font-family:var(--ff-script);font-weight:400;font-size:clamp(34px,6vw,64px)}

/* Grid tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.06);padding:22px}
.card h3{margin:0 0 8px;font-family:var(--ff-serif);font-size:22px;color:var(--navy)}
.card p{margin:0;opacity:.85}

/* Testimonials carousel */
.testimonial{text-align:center;max-width:800px;margin:0 auto}
.testimonial .quote{font-size:1.15rem;font-family:var(--ff-serif)}
.testimonial .name{margin-top:8px;font-weight:600;color:var(--navy)}
.dots{display:flex;gap:8px;justify-content:center;margin-top:16px}
.dots button{width:10px;height:10px;border-radius:999px;border:none;background:#cfd6df;cursor:pointer}
.dots button.active{background:var(--navy)}

/* Footer */
.site-footer{background:#0e2236;color:#e7edf3;padding:40px 0;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
small, .muted{opacity:.85}

/* Simple responsive */
@media (max-width:720px){
  .nav-links{gap:16px;font-size:.95rem}
}


/* Hero Carousel */
.hero-carousel{position:relative;height:58vh;min-height:360px;max-height:720px;overflow:hidden;background:#0f1b24;}
.hero-carousel .slides{display:flex;height:100%;transition:transform .8s ease;}
.hero-carousel .slide{background-size:cover;background-position:center;filter:brightness(.78);}
.hero-carousel .nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.14);color:#fff;
  width:44px;height:52px;border-radius:999px;cursor:pointer;backdrop-filter:blur(4px);}
.hero-carousel .nav:hover{background:rgba(255,255,255,.28)}
.hero-carousel .prev{left:18px}
.hero-carousel .next{right:18px}
@media (max-width:768px){
  .hero-carousel{height:46vh;min-height:280px}
}


/* Hero Carousel Safe Fix (minimal, appended) */
.hero-carousel .slides{position:relative;width:100%;height:100%;overflow:hidden}
.hero-carousel .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.hero-carousel .slide.active{opacity:1}


/* === Luxe footer typography (Whispering headings, EB Garamond text) === */
.site-footer h4{
  font-family: 'Whispering Signature','EB Garamond',serif;
  font-weight: 400;
  font-size: clamp(28px,3.2vw,38px);
  line-height: 1.1;
  letter-spacing: 0.3px;
  margin: 0 0 8px 0;
}
.site-footer p,
.site-footer .muted,
.site-footer li,
.site-footer address{
  font-family: 'EB Garamond', serif;
  font-weight: 400;
  font-size: clamp(16px,1.1vw,19px);
  line-height: 1.6;
  color: rgba(255,255,255,.88);
}
.site-footer .footer-grid{
  gap: 10px 32px;
}
.site-footer{
  letter-spacing: 0.2px;
}


/* Ensure one-line site name and more spacing */
.site-footer h4:first-child{
  white-space: nowrap;
  margin-bottom: 18px;
}


/* === Consistent luxe headings & body text === */
.section-title{
  font-family: "Whispering Signature","EB Garamond",serif;
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.2px;
  text-align: center;
  margin: 0 0 20px 0;
}
.section p, .section li, .card p{
  font-family: "EB Garamond", serif;
  font-weight: 400;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.7;
}

/* Default card headings remain readable in Garamond */
.card h3{
  font-family: "EB Garamond", serif;
  font-weight: 600;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.3;
  margin-top: 0;
}

/* Contact page: make its card headings script for a softer feel */
.page-contact .card h3{
  font-family: "Whispering Signature","EB Garamond",serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.1;
}


/* === Nav brand in EB Garamond for readability === */
.nav .brand span{
  font-family: "EB Garamond", serif;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* === Footer column spacing & breathing room === */
.site-footer .footer-grid{
  gap: 16px 96px; /* more horizontal space between left (site) and right (contact) columns */
}

/* Keep site name on one line with extra space below */
.site-footer h4:first-child{
  white-space: nowrap;
  margin-bottom: 22px;
}

/* Vertical bio cards */
.bio-stack{ display:grid; grid-template-columns:1fr; gap:22px; }
.bio-card{ background:#fff; border-radius:18px; padding:22px 24px; box-shadow:0 8px 30px rgba(3,24,38,.14); border:4px solid #0d1b2a; }
.bio-card h3{ font-family:"EB Garamond",serif; font-weight:700; font-size:clamp(20px,1.8vw,26px); margin:0 0 8px; color:#0d1b2a; }
.bio-card .eyebrow{ font-family:"EB Garamond",serif; font-weight:500; color:#8aa2b5; margin-bottom:10px; }
.bio-card p{ font-family:"EB Garamond",serif; font-size:clamp(16px,1.1vw,18px); line-height:1.7; color:#1d2a35; }
.bio-card .quote{ font-style:italic; color:#3b4b58; }


/* Three-column bio layout */
.bio-stack {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .bio-stack {
    grid-template-columns: 1fr; /* stack vertically on smaller screens */
  }
}


/* Equal height for bio cards */
.bio-stack {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}

.bio-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* Align eyebrow (subtitle) baselines across bios */
.bio-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.bio-card h3 {
  margin-bottom: 6px;
}
.bio-card .eyebrow {
  min-height: 24px; /* reserve space so all eyebrow lines align */
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.bio-card p {
  flex-grow: 1;
}
.bio-card .quote {
  margin-top: 12px;
}


/* Align quotes to the bottom across the row */
.bio-card {
  display: flex;
  flex-direction: column;
}
.bio-card .quote{
  margin-top: auto; /* push quotes to the bottom for consistent alignment */
}


/* Equal-height service cards */
.tiles{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}
@media (max-width: 900px){
  .tiles{ grid-template-columns: 1fr; }
}
.card{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.card h3{
  margin: 0 0 8px 0;
}
.card p{
  margin: 0;
}


/* Option A: 2-column layout with better readability */
.tiles{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
}
@media (max-width: 800px){
  .tiles{ grid-template-columns: 1fr; }
}
.card{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  line-height: 1.8;
}
.card h3{
  font-size: 1.25rem;
  margin: 0 0 12px 0;
  color: #0d1b2a;
}
.card p{
  margin: 0;
  font-size: 1rem;
  color: #1d2a35;
}


/* Uniform 2-column services, equal-height rows, extra vertical spacing */
.tiles{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 36px 28px; /* row gap, column gap */
  align-items: stretch; /* make each grid cell match tallest in the row */
}
.card{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (max-width: 800px){
  .tiles{ grid-template-columns: 1fr; gap: 22px; }
}


/* Uniform service card style across all sections */
.section.container .tiles .card{
  background: #ffffff;
  border: none;
  border-radius: 22px;
  padding: 28px 32px;
  box-shadow: 0 18px 45px rgba(13,27,42,0.08), 0 6px 18px rgba(13,27,42,0.06);
}
.section.container .tiles .card h3{
  font-family: "EB Garamond", serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.2px;
}
.section.container .tiles .card p{
  font-family: "EB Garamond", serif;
  font-weight: 400;
}


/* PATCH: make the "Welcome" heading light on the navy section only */
#welcome .section-title.script {
  color: #f7f4ee !important; /* cream */
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.06);
}


/* Hide any small 'kicker' line on Gift Cards & Contact (e.g., stray '' text) */
body.giftcards .kicker,
body.contact .kicker { display:none !important; }


/* OVERRIDE: remove stray '' pseudo-element text */
h1::after,
h2::after,
.page-header::after,
.section-title::after {
  content: none !important;
}


/* Emblem logo styling (global) */
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand .brand-mark { height:52px; width:auto; border-radius:8px; display:block;  border-radius:50%;}
.brand span { font-family: 'EB Garamond', serif; font-weight:700; font-size:1.4rem; letter-spacing:0.02em; color:#f3efe7; }


/* Modal (white theme) */
.modal-open { overflow:hidden; }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:1000; }
.modal-backdrop[aria-hidden="false"]{ display:flex; }
.modal-box { background:#fff; color:#0a1a2f; max-width:520px; width:calc(100% - 2rem); padding:1.25rem 1.5rem; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.5); position:relative; }
.modal-box h3{ font-family:'EB Garamond', serif; font-size:1.5rem; margin:0 0 .5rem; color:#0a1a2f; }
.modal-box p{ margin:.5rem 0; line-height:1.55; }
.modal-box a{ color:#0a1a2f; text-decoration:underline; }
.modal-close{ position:absolute; right:.75rem; top:.5rem; background:transparent; border:0; color:#0a1a2f; font-size:1.5rem; cursor:pointer; }

/* Uniform gold buttons (header & hero) */
.hero .buttons .btn,
.hero .buttons .btn.ghost,
.nav-cta .btn{
  background-color:#c9a44c !important; border-color:#c9a44c !important; color:#fff !important;
}
.hero .buttons .btn:hover,
.hero .buttons .btn.ghost:hover,
.nav-cta .btn:hover{
  background-color:#b58935 !important; border-color:#b58935 !important; color:#fff !important;
}

/* Bio quote styling (EB Garamond italic, softer color) */
.bio-quote{ font-style:italic; color:#465360; margin:0.75rem 0 0; line-height:1.6; }


/* White modal theme */
.modal-open { overflow:hidden; }
.modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:1000; }
.modal-backdrop[aria-hidden="false"]{ display:flex; }
.modal-box { background:#fff; color:#0a1a2f; max-width:520px; width:calc(100% - 2rem); padding:1.25rem 1.5rem; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.5); position:relative; }
.modal-box h3{ font-family:'EB Garamond', serif; font-size:1.5rem; margin:0 0 .5rem; color:#0a1a2f; }
.modal-box p{ margin:.5rem 0; line-height:1.55; }
.modal-box a{ color:#0a1a2f; text-decoration:underline; }
.modal-close{ position:absolute; right:.75rem; top:.5rem; background:transparent; border:0; color:#0a1a2f; font-size:1.5rem; cursor:pointer; }

/* Uniform gold buttons everywhere */
a.btn, .btn, .btn.ghost, a.btn.ghost {
  background-color:#c9a44c !important;
  border-color:#c9a44c !important;
  color:#fff !important;
}
a.btn:hover, .btn:hover, .btn.ghost:hover, a.btn.ghost:hover {
  background-color:#b58935 !important;
  border-color:#b58935 !important;
  color:#fff !important;
}

/* About: center the 'Why Families Choose Us' list and remove stray bullets */
#why + ul{list-style:none; padding-left:0; max-width:58ch; margin:16px auto 0; text-align:center}
#why + ul li{margin:10px 0}

/* Contact: prevent phone numbers breaking */
.tel{white-space:nowrap}

/* Center the "Why Families Choose Us" heading with the text below it */
#why{ text-align:center; max-width:58ch; margin:0 auto; }

.note-appointment{margin:8px 0 0}

/* v30 Gift Cards elegance */
.gift-intro{
  max-width: 48rem;
  margin: 0 auto 1.25rem auto;
  text-align: center;
}
.gift-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 40px;
  align-items: start;
  justify-items: center;
  margin-top: 8px;
}
.gift-block{
  text-align: center;
  line-height: 1.7;
}
/* Phones/tablet: stack gracefully */
@media (max-width: 900px){
  .gift-grid{ grid-template-columns: 1fr; gap: 22px; }
}

/* v31 Gift Cards refined */
.gift-intro{
  max-width: 48rem;
  margin: 0 auto 1.25rem auto;
  text-align: center;
}
.gift-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 48px;
  align-items: start;
  justify-items: center;
  margin-top: 8px;
}
.gift-block{
  text-align: center;
  line-height: 1.7;
}
.gift-block h3{
  font-family:'EB Garamond', Garamond, serif;
  font-weight: 600;
  letter-spacing: .02em;
  margin: 4px 0 10px;
}
.gift-block p{
  margin: 6px 0;
}
@media (max-width: 900px){
  .gift-grid{ grid-template-columns: 1fr; gap: 18px; }
}

/* v32 Gift Cards typography refinements */
.gift-intro{
  max-width: 44rem;         /* narrower line length for elegance */
  margin: 0 auto 1.25rem;
  text-align: center;
  line-height: 1.7;
  text-wrap: balance;       /* modern browsers: nicer line breaks */
  font-size: 1.12rem;
}
.gift-intro .intro-break{ display: none; }
@media (min-width: 900px){
  .gift-intro .intro-break{ display: inline; }
}
.gift-grid{
  grid-template-columns: 1fr 1fr;
  gap: 24px 56px;           /* add a little breathing room between columns */
}
.gift-block{
  text-align: center;
  max-width: 36rem;         /* keep paragraphs from stretching too wide */
}
.gift-block h3{
  font-family: 'EB Garamond', Garamond, serif;
  font-weight: 500;         /* softer than bold */
  font-size: 1.28rem;       /* close to body size for calm hierarchy */
  letter-spacing: .01em;
  margin: 2px 0 8px;
  text-wrap: balance;
}
.gift-block p{
  margin: 6px 0;
  font-size: 1.12rem;       /* unify paragraph sizes */
  line-height: 1.75;
}
@media (max-width: 900px){
  .gift-grid{ grid-template-columns: 1fr; gap: 18px; }
  .gift-intro{ font-size: 1.08rem; }
  .gift-block p{ font-size: 1.06rem; }
}

/* v33 Gift Cards: larger intro + Sunday line break */
.gift-intro{ font-size: 1.25rem; }
@media (min-width: 900px){
  .gift-intro{ font-size: 1.35rem; }
}

/* v34 Gift Cards: final polish */
.gift-intro{
  max-width: 42rem;
  margin: 0 auto 1.1rem;
  text-align: center;
  line-height: 1.6;
  text-wrap: balance;
  font-size: 1.15rem;
}
.gift-intro .intro-break{ display: none; }
@media (min-width: 980px){
  .gift-intro{ font-size: 1.4rem; }           /* larger on desktop */
  .gift-intro .intro-break{ display: inline; }/* true 2-line lockup */
}
.gift-grid{ gap: 22px 54px; }
.gift-block{ text-align: center; max-width: 34rem; }
.gift-block h3{
  font-family: 'EB Garamond', Garamond, serif;
  font-weight: 500;        /* softer heading */
  font-size: 1.18rem;      /* closer to body for calmer hierarchy */
  letter-spacing: .01em;
  margin: 0 0 6px;
}
.gift-block p{
  margin: 6px 0;
  font-size: 1.18rem;      /* unify paragraph size */
  line-height: 1.72;
}
@media (max-width: 900px){
  .gift-intro{ font-size: 1.1rem; }
  .gift-block p{ font-size: 1.08rem; }
}

/* v35: footer Sunday line & gift heading soften */
.gift-block h3{ font-weight: 400; font-size: 1.12rem; }

/* v37: unify Gift Cards typography (intro same size as body) */
.gift-intro{ font-size: 1.18rem !important; }
@media (min-width: 980px){
  .gift-intro{ font-size: 1.18rem !important; }
}

/* v38: unify bio 'years' meta line */
.bio-card .bio-years{
  color: #8a97a6;          /* soft slate like other cards */
  font-family: 'EB Garamond', Garamond, serif;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 4px 0 14px;
  font-weight: 400;
}

/* v38: calm gift intro single-paragraph */
.gift-intro{
  max-width: 48rem;
  margin: 0 auto 1.25rem;
  text-align: center;
  line-height: 1.7;
  text-wrap: balance;
  font-size: 1.18rem !important;
}

/* v39 Gift: Elegant Split */
.gift-intro{
  max-width: 40rem;
  margin: 0 auto 1.5rem;
  text-align: center;
  line-height: 1.65;
  text-wrap: balance;
  font-size: 1.2rem !important;
  letter-spacing: .01em;
}
.gift-grid{
  grid-template-columns: 1fr 1fr;
  gap: 20px 56px;
  align-items: start;
  justify-items: center;
}
.gift-block{
  text-align: center;
  max-width: 34rem;
  padding: 0 8px;
}
.gift-block + .gift-block{
  border-left: 1px solid rgba(10, 34, 47, 0.18);
  padding-left: 32px;
}
.gift-block h3{
  font-family: 'EB Garamond', Garamond, serif;
  font-weight: 500;
  font-size: 1.14rem;
  margin: 0 0 8px;
}
.gift-block p{ margin: 6px 0; font-size: 1.18rem; line-height: 1.72; }
@media (max-width: 900px){
  .gift-grid{ grid-template-columns: 1fr; gap: 18px; }
  .gift-block + .gift-block{ border-left: none; padding-left: 0; }
  .gift-intro{ font-size: 1.12rem !important; }
}

/* v40 Gift Option C: Stacked & Minimal */
.gift-stack{
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.gift-stack .gift-intro{
  max-width: 48rem;
  margin: 0 auto 1.25rem;
  line-height: 1.7;
  text-wrap: balance;
  font-size: 1.2rem !important;
}
.gift-section h3{
  font-family: 'EB Garamond', Garamond, serif;
  font-weight: 500;
  font-size: 1.14rem;
  letter-spacing: .01em;
  margin: 2px 0 10px;
}
.gift-section p{
  margin: 6px 0;
  font-size: 1.18rem;
  line-height: 1.72;
}
.gift-divider{
  width: 56%;
  height: 1px;
  margin: 14px auto 18px;
  background: rgba(10, 34, 47, 0.14);
  border-radius: 1px;
}
@media (max-width: 700px){
  .gift-stack{ max-width: 92%; }
  .gift-stack .gift-intro{ font-size: 1.12rem !important; }
  .gift-section p{ font-size: 1.06rem; }
}

/* v41 ClinicSense modal fixes */
/* Scope all rules to the booking overlay root so the rest of the site is untouched. 
   The root container is the element we attach around the ClinicSense embed. */
#booking-overlay, #cs-embed, .clinicsense-embed, .vms-booking-modal {
  --cs-scrollbar: 14px;
}

/* 1) Hide the *inner* ClinicSense close X inside their header; keep our outer close */
#booking-overlay .cs-close, 
#booking-overlay [class*="modal"] [class*="close"],
#cs-embed .cs-close, 
#cs-embed [class*="modal"] [class*="close"] {
  display: none !important;
}

/* 2) Make the vertical scrollbar thick enough to grab */
#booking-overlay [class*="body"], 
#booking-overlay [class*="scroll"], 
#cs-embed [class*="body"], 
#cs-embed [class*="scroll"] {
  scrollbar-width: auto;              /* Firefox */
}
#booking-overlay [class*="body"]::-webkit-scrollbar,
#booking-overlay [class*="scroll"]::-webkit-scrollbar,
#cs-embed [class*="body"]::-webkit-scrollbar,
#cs-embed [class*="scroll"]::-webkit-scrollbar{
  width: var(--cs-scrollbar);
}
#booking-overlay [class*="body"]::-webkit-scrollbar-thumb,
#booking-overlay [class*="scroll"]::-webkit-scrollbar-thumb,
#cs-embed [class*="body"]::-webkit-scrollbar-thumb,
#cs-embed [class*="scroll"]::-webkit-scrollbar-thumb {
  background: rgba(22, 105, 152, .8);
  border-radius: 10px;
  border: 3px solid rgba(255,255,255,.65);
}

/* 3) Pull content up and keep CTA visible without needing to hunt for it */
#booking-overlay [class*="content"], 
#booking-overlay [class*="body"], 
#cs-embed [class*="content"], 
#cs-embed [class*="body"] {
  padding-bottom: 12px !important;    /* trim extra space */
  max-height: calc(100vh - 180px) !important;
  overflow-y: auto !important;
}

/* Sticky footer for the CTA button (when their markup provides a footer area) */
#booking-overlay [class*="footer"], 
#cs-embed [class*="footer"] {
  position: sticky !important;
  bottom: 0;
  background: #fff;
  padding: 12px 16px !important;
  box-shadow: 0 -10px 20px rgba(0,0,0,.08);
  z-index: 2;
}

/* Make the CTA button sit tight to the footer */
#booking-overlay [class*="footer"] button, 
#cs-embed [class*="footer"] button {
  margin-top: 0 !important;
}

/* If their layout doesn't have a distinct footer, nudge the button itself */
#booking-overlay button[class*="book"],
#cs-embed button[class*="book"] {
  margin-top: 8px !important;
}


/* === Mobile Enhancements Patch v1 (2025-09-08) === */

/* Prevent accidental horizontal scroll from wide banners/carousels */
html, body { overflow-x: hidden; }

/* Fluid, more readable typography system */
:root {
  --step--1: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --step-0: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --step-2: clamp(1.5rem, 1.3rem + 1.2vw, 2rem);
}
body {
  font-size: var(--step-0);
  line-height: 1.65;
  text-wrap: pretty;
}

/* Ensure images and media scale inside the viewport */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Containers get side padding on small screens */
.container { padding-left: 1rem; padding-right: 1rem; }
@media (min-width: 960px){
  .container { padding-left: 0; padding-right: 0; }
}

/* HERO / BANNERS */
.hero, .hero-carousel, .hero-carousel .slides, .hero-carousel .slides > * {
  max-width: 100vw;
}
.hero, .hero-carousel {
  overflow: hidden;
}

/* NAV: Hamburger on small screens */
.nav-toggle {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.25);
  background: transparent;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}
.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  margin: 3px 0;
  border-radius: 1px;
  transition: transform .25s ease, opacity .25s ease;
}

/* Mobile layout for nav */
@media (max-width: 900px){
  .nav { height: 64px; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav-links,
  body.menu-open .nav-cta {
    display: flex;
  }
  .nav-links#primary-navigation {
    position: fixed;
    inset: 64px 0 0 0;
    background: var(--navy);
    flex-direction: column;
    gap: 0;
    padding: 8px 16px 24px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .nav-links#primary-navigation li { margin: 0; }
  .nav-links#primary-navigation a {
    display: block;
    padding: 14px 8px;
    font-size: 1.05rem;
    color: #fff;
  }
  .nav-cta {
    position: fixed;
    right: 16px;
    top: 12px;
  }
  .nav-cta .btn { padding: 10px 14px; font-size: 0.98rem; }
  /* Toggle animation into an 'X' */
  body.menu-open .nav-toggle .bar:nth-child(1){ transform: translateY(5px) rotate(45deg); }
  body.menu-open .nav-toggle .bar:nth-child(2){ opacity: 0; }
  body.menu-open .nav-toggle .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }
}

/* Tiles & cards stack nicely on phones */
@media (max-width: 900px){
  .tiles { display: grid; grid-template-columns: 1fr !important; gap: 16px; }
  .card { padding: 16px; }
}

/* Bio "Liquid Mode" readability */
.bio-stack { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.bio-card p { max-width: 70ch; }
@media (max-width: 1100px){ .bio-stack { grid-template-columns: 1fr; } }
@media (max-width: 900px){
  .bio-card { font-size: var(--step-0); line-height: 1.75; }
  .bio-card h3 { font-size: clamp(1.25rem, 1.1rem + 1vw, 1.6rem); line-height: 1.25; }
  .bio-card .eyebrow { font-size: clamp(0.95rem, 0.9rem + .5vw, 1.1rem); letter-spacing: .06em; }
  .bio-card p { font-size: clamp(1.02rem, 0.98rem + .7vw, 1.2rem); }
  .bio-card { padding: 16px; background: rgba(9,28,46,0.02); border-radius: 10px; }
}

/* ClinicSense / booking embeds scale to screen */
.clinicsense-embed iframe,
#booking-overlay iframe,
.vms-booking-modal iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: min(80vh, 860px) !important;
}
/* Modal width becomes edge-to-edge on small screens if using CSS vars */
@media (max-width: 900px){
  :root{ --cs-modal-width: calc(100vw - 24px) !important; }
}

/* Forms & long text blocks */
.section, main, .content { max-width: 1200px; margin-inline: auto; }
@media (max-width: 900px){
  .content, .section { padding-left: 1rem; padding-right: 1rem; }
  p, li { max-width: 70ch; }
}

/* Buttons & tappable areas */
@media (max-width: 900px){
  .btn { min-height: 44px; padding: 12px 18px; }
  a, button { -webkit-tap-highlight-color: rgba(187,148,87,.25); }
}

/* Utility to clamp any rogue elements exceeding viewport */
@media (max-width: 900px){
  [style*="width:"] { max-width: 100% !important; }
}

/* === Home Floating Book Now (mobile) === */
.floating-book-now { display: none; }
@media (max-width: 900px){
  .home .floating-book-now{
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 120;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    font-size: 1.02rem;
    font-weight: 600;
    background: var(--gold);
    color: #0b1a28;
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    text-decoration: none;
  }
  /* Hide the floater when the menu is open to prevent double CTAs */
  body.menu-open .floating-book-now{
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px);
    transition: opacity .2s ease, transform .2s ease;
  }
}


/* Accessibility helper: screen-reader-only text */
.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;}


/* === Grid fixes (desktop) ====================================== */
@media (min-width: 768px){
  .bio-stack{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px){
  .bio-stack{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ensure cards fill tracks cleanly */
.tiles > *{ min-width: 0; }
.tiles .card{ display:block; width:100%; height:100%; }
.bio-stack > *{ min-width: 0; }
.bio-card{ height: 100%; }


/* === Canonical grid rules (normalize, no widening) ==================== */
/* Services grid: auto-fit keeps natural card widths; no forced 3-col if it doesn't fit */
.section.container .tiles, .tiles{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
/* Bio cards: 1 col on mobile, 2 col on tablets, 3 col on roomy desktops */
.bio-stack{ display:grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 768px){
  .bio-stack{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px){
  .bio-stack{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
/* Make sure cards don't blow up in size */
.tiles > *,.bio-stack > *{ min-width: 0; }
.tiles .card, .bio-card{ width:100%; height:100%; }


/* === Services grid: fixed columns by breakpoint (mobile-safe) === */
.tiles{ display:grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px){
  .tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .tiles{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.tiles > *{ min-width:0; }
.tiles .card{ width:100%; height:100%; }


/* === FORCE: Services tiles 3-col on desktop (mobile safe) ================= */
.tiles{ display:grid !important; grid-template-columns: 1fr !important; gap: 18px !important; }
@media (min-width: 640px){
  .tiles{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1024px){
  .tiles{ grid-template-columns: repeat(3, 1fr) !important; }
}
.tiles > *{ min-width:0 !important; }
.tiles .card{ width:100% !important; height:100% !important; margin:0 !important; }