:root{
  --brand:#2cb4b9; --text:#0f172a; --muted:#475569; --soft:#f1f5f9; --card:#ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;color:var(--text);background:#fff}
img{max-width:100%;display:block}

.container{max-width:1280px;margin:0 auto;padding:0 1rem}
.section{padding:2rem 0}
.section.alt{background:#f9fafb}
h1,h2,h3{line-height:1.25;margin:0 0 .5rem}
p{margin:.5rem 0}

.btn{display:inline-block;background:var(--brand);color:#fff;padding:.6rem .9rem;border-radius:10px;text-decoration:none;border:1px solid var(--brand);font-weight:600}
.btn:hover{filter:brightness(.95)}
.btn-outline{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn-small{padding:.4rem .6rem;border-radius:8px}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.flex-row{display:flex;gap:.5rem;flex-wrap:wrap}

.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--card);border:1px solid #e5e7eb;border-radius:12px;padding:1rem;box-shadow:0 2px 6px rgba(0,0,0,.04)}

.checklist{padding-left:1.2rem}
.checklist li{margin:.25rem 0}

.grid-2{display:grid;gap:.75rem}
@media (min-width:720px){.grid-2{grid-template-columns:1fr 1fr}}

.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e7eb;z-index:50}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit}
.logo-img{width:40px;height:40px;object-fit:cover;border-radius:8px}
.nav-toggle{background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:.4rem .6rem}

.nav{display:none}
.nav.open{display:block}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.nav-links>li{position:relative}

@media (min-width:900px){
  .nav{display:block}
  .nav-links{gap:1rem}
}

.has-menu .menu-toggle{background:transparent;border:1px solid transparent;padding:.5rem .6rem;border-radius:10px;cursor:pointer;font:inherit}
.has-menu .menu-toggle:hover{background:var(--soft)}

.mega{display:none;position:absolute;left:0;top:calc(100% + 8px);background:#fff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 18px 40px rgba(2,8,23,.18);padding:1rem;min-width:640px;z-index:40}
.mega-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(180px,1fr))}
.mega a{text-decoration:none;color:inherit;display:block;padding:.25rem .4rem;border-radius:8px}
.mega a:hover{background:var(--soft)}
.mega-cta{display:flex;justify-content:flex-end;padding:.25rem 0 .75rem}
.btn-cta{padding:.55rem .9rem;border-radius:10px;font-weight:600;text-decoration:none;border:1px solid var(--brand);background:var(--brand);color:#fff}
.btn-cta:hover{filter:brightness(.95)}

@media (hover:hover) and (pointer:fine){
  .has-menu:hover>.mega{display:block}
}
@media (max-width:900px){
  .mega{position:static;min-width:auto;box-shadow:none;border-radius:12px}
  .mega-grid{grid-template-columns:1fr 1fr}
  .mega-cta{justify-content:stretch}
  .btn-cta{width:100%;text-align:center}
}

.team-parent{position:relative}
.team-trigger{display:inline-flex;align-items:center;gap:.35rem;background:transparent;border:1px solid transparent;padding:.4rem .5rem;border-radius:8px;cursor:pointer;font:inherit;color:inherit}
.team-trigger:hover{background:var(--soft)}
.team-flyout{position:absolute;top:0;left:0;min-width:260px;max-width:320px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 18px 40px rgba(2,8,23,.18);padding:.5rem;z-index:45;display:none;margin-top:.5rem}
.team-flyout a{display:block;padding:.5rem .6rem;border-radius:8px}
.team-flyout a:hover{background:var(--soft)}
@media (hover:hover) and (pointer:fine){
  .about-menu .team-parent:hover > .team-flyout{display:block}
  .about-menu .team-parent:hover > .team-trigger .caret{transform:rotate(90deg)}
}
@media (max-width:767px){
  .team-flyout{position:static;left:0;top:0;box-shadow:none;border:1px dashed #e5e7eb;margin-top:.35rem}
  .team-parent.open > .team-flyout{display:block}
}
.caret{transition:transform .18s ease}

.hero{padding:2.5rem 0;background:linear-gradient(180deg,#f8fafc 0%,#fff 100%)}
.hero .btn-row{margin-top:1rem}

.branches-grid{display:grid;gap:1.5rem;align-items:start}
.map-wrap{min-height:420px}
#branches-map{width:100%;height:420px;border-radius:12px;border:1px solid #e5e7eb}
@media (min-width:900px){.branches-grid{grid-template-columns:1.1fr 1.5fr}}
.branch-card h3{margin:0 0 .35rem}
.branch-card p{margin:0 0 .35rem}
.focus-branch{margin-top:.25rem}
.leaflet-container{border-radius:12px}

.review-list{display:grid;gap:1rem}
.review-card{border:1px solid #e5e7eb;border-radius:12px;padding:1rem;background:#fff}
.review-header{display:flex;justify-content:space-between;gap:1rem;align-items:center}
.review-name{font-weight:700}
.review-service{color:var(--muted);font-size:.9rem}
.review-date{color:var(--muted);font-size:.85rem;margin:.25rem 0}
.review-rating{font-weight:700}

.faq-list{display:grid;gap:.5rem;margin-top:1rem}
.faq{border:1px solid #e5e7eb;border-radius:10px;overflow:hidden}
.faq-question{width:100%;text-align:left;padding:.75rem 1rem;background:#f9fafb;border:none;display:flex;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600;cursor:pointer}
.faq-icon{font-weight:bold;transition:transform .2s}
.faq-answer{display:none;padding:0 1rem 1rem;background:#fff}
.faq.open .faq-answer{display:block}
.faq.open .faq-icon{transform:rotate(45deg)}

.team-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:1rem}
.team-card{text-align:center}
.team-photo-wrap{width:120px;height:120px;margin:0 auto .5rem;border-radius:999px;overflow:hidden;border:1px solid #e5e7eb;background:#f9fafb}
.team-photo{width:100%;height:100%;object-fit:cover}

.ba-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.ba-item figcaption{font-weight:700;margin-bottom:.5rem}
.ba-wrap{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid #e5e7eb}
.ba-before,.ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 50% 0 0)}
.ba-slider{position:absolute;left:0;right:0;bottom:8px;margin:0 auto;width:70%}

.site-footer{border-top:1px solid #e5e7eb;padding:1rem 0;color:var(--muted)}
.footer-grid{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap}


/* push the map and branches down */

/* Adjust this to how much space you want above the section */
:root{ --header-h: 72px; }

/* Give anchor targets breathing room when you jump via #branches, etc. */
.section { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Extra spacing specifically for the Branches section */
#branches.section { 
  padding-top: 20.5rem;   /* more inner space */
  margin-top: 2.25rem;   /* gap from whatever sits above */
}

/* Ensure the map has a comfortable top gap under "Our Branches" title */
#branches-map { 
  height: 460px;         /* keep/raise height */
  margin-top: 1rem;      /* space between heading/cards and map */
  border-radius: 12px;
}


/* Prevent Map overlap */

/* Header & mega menus above everything */
.site-header { position: sticky; top: 0; z-index: 1000; }
.mega { z-index: 900; }

/* Make sure the map sits back in the stack */
.map-wrap, .leaflet-container { position: relative; z-index: 1; }

/* If the map was floating over menus, this guarantees menus win */
.about-menu .team-flyout,
.mega { position: absolute; z-index: 950; }

/* Safety: never clip dropdowns */
header, nav, .site-header, .has-menu { overflow: visible; }


/* NAV to stay to the right away from the logo*/

.site-header .container {
  display: flex;
  justify-content: space-between;  /* pushes logo left, nav right */
  align-items: center;
}





/* Spread menu items evenly across the remaining space */

.nav-links {
  display: flex;
  justify-content: space-around; /* or use space-evenly for equal gaps on edges */
  flex: 1;                       /* take up remaining space */
  margin-left: 2rem;             /* extra gap after logo */
  gap: 1.5rem;                   /* consistent gap between items */
}


/* Deal with alignment of mega menus */

.mega {
  min-width: 900px;
  max-width: 900px;
  left: 50%;
  transform: translateX(-50%);
  text-align: left;
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1rem;
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.nav-links li { position: relative; }

@media (max-width: 900px) {
  .mega {
    min-width: 100%;
    max-width: 100%;
    left: 0;
    transform: none;
  }
  .mega-grid {
    grid-template-columns: 1fr;
  }
}


/* ================ */


/***** STABILITY KIT — reduce layout shift across pages *****/

/* 1) Lock global widths & spacing */
:root{
  --container-max: 1280px;    /* keep all pages same width */
  --header-h: 72px;           /* consistent header height */
  --mega-w: 920px;            /* uniform mega-menu width */
  --section-pad: 2rem;        /* consistent section spacing */
}

.container{max-width:var(--container-max);margin:0 auto;padding:0 1rem;}
.section{padding:var(--section-pad) 0;scroll-margin-top:calc(var(--header-h) + 12px);}

/* 2) Header & nav frame stays identical everywhere */
.site-header{
  position: sticky; top: 0; z-index: 1000;
  min-height: var(--header-h);
  display: block; /* avoid collapse if contents differ */
  background:#fff; border-bottom:1px solid #e5e7eb;
}
.site-header .container{
  min-height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
}

/* 3) Logo dimensions locked (prevents jump on image load) */
.logo-img{ width:40px; height:40px; object-fit:cover; border-radius:8px; }

/* 4) Nav distribution consistent */
.nav-links{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
@media (min-width: 900px){ .nav-links{ gap:1.5rem; } }

/* 5) Mega menus: identical width & alignment */
.has-menu{ position:relative; }
.mega{
  display:none; position:absolute; top:calc(100% + 8px);
  left:50%; transform:translateX(-50%);
  min-width:var(--mega-w); max-width:var(--mega-w);
  background:#fff; border:1px solid #e5e7eb; border-radius:16px;
  box-shadow:0 18px 40px rgba(2,8,23,.18); padding:1rem; z-index:950;
}
.mega-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (hover:hover) and (pointer:fine){ .has-menu:hover>.mega{ display:block; } }
@media (max-width:900px){
  .mega{ position:static; left:0; transform:none; min-width:100%; max-width:100%; box-shadow:none; border-radius:12px; }
  .mega-grid{ grid-template-columns:1fr 1fr; }
}

/* 6) Team flyout: same position & width on all pages */
.team-parent{ position:relative; }
.team-flyout{
  position:absolute; top:0; left:0; margin-top:.5rem;
  min-width:320px; max-width:360px;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow:0 18px 40px rgba(2,8,23,.18); padding:.5rem; display:none; z-index:960;
}
@media (hover:hover) and (pointer:fine){
  .about-menu .team-parent:hover>.team-flyout{ display:block; }
}

/* 7) Hero blocks & headings = same vertical rhythm */
.hero{ padding:2.5rem 0; background:linear-gradient(180deg,#f8fafc 0%,#fff 100%); }
.hero h1{ margin-bottom:.35rem; }
.hero .btn-row{ margin-top:1rem; }

/* 8) Map always reserves space & never overlaps */
.map-wrap{ position:relative; z-index:1; margin-top:1rem; }
#branches-map{ width:100%; height:460px; border-radius:12px; border:1px solid #e5e7eb; }
.mega{ z-index:950; } .leaflet-container{ z-index:1; } /* menus above map */
header, nav, .site-header, .has-menu{ overflow:visible; } /* don’t clip menus */

/* 9) Images reserve space to stop jumping */
img[width][height]{ height:auto; }  /* keep aspect ratio when width/height are set */
.ba-wrap{ aspect-ratio:4/3; }       /* before/after slider reserves height */

/* 10) Cards/grids uniform, even when content differs */
.cards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
.card{ min-height: 220px; } /* predictable height prevents bumps between pages */

/* 11) Typographic guardrails */
h1,h2,h3{ line-height:1.25; }
p{ margin:.5rem 0; text-align: justify; }

/* 12) Counters don’t wiggle when numbers change */
#avg-rating,#total-reviews,#happy-count,#unhappy-count{ display:inline-block; min-width:3ch; text-align:center; }

/* 13) Compact nav on tight widths (avoid wrap jitter) */
@media (min-width:900px) and (max-width:1200px){
  .nav-links{ flex-wrap:wrap; row-gap:.25rem; }
  .has-menu .menu-toggle{ padding:.45rem .55rem; font-size:.95rem; }
}

/* 14) Scroll anchoring consistency when using #hash links */
:target{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* ================= For the before and After view ================ */

.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}

.ba-item {
  background: #fff;
  border-radius: 10px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.ba-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
}

.ba-wrap img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba-after { clip-path: inset(0 0 0 50%); }
.ba-slider {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
}

/* To solve the stability issue */

/***** MEGA MENU STABILITY (no twitch) *****/

/* 1) Keep the scrollbar stable to prevent horizontal jiggle */
html{
  /* Modern browsers: reserve space for scrollbar */
  scrollbar-gutter: stable both-edges;
}
/* Fallback for older browsers */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}

/* 2) Make all mega menus identical width & centered on their trigger */
:root {
  --mega-w: 920px;            /* set once; use same across all pages */
}
.has-menu { position: relative; }
.mega{
  position: absolute;
  top: calc(100% + 0px);
  left: 50%;
  transform: translateX(-50%) translateY(6px); /* start slightly down */
  min-width: var(--mega-w);
  max-width: var(--mega-w);

  /* no layout shift show/hide */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  /* visual */
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(2,8,23,.18);
  padding: 1rem;
  z-index: 950;

  /* smooth but subtle transition without reflow */
  transition: opacity .14s ease, transform .14s ease, visibility .14s step-end;
}
.has-menu:hover > .mega,
.has-menu:focus-within > .mega{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .14s ease, transform .14s ease, visibility 0s;
}

/* 3) Inner grid consistent so columns don’t reflow differently per menu */
.mega-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* 4) Avoid hover borders that change size; use transparent border baseline */
.has-menu .menu-toggle{
  border: 1px solid transparent;  /* space reserved */
  padding: .5rem .6rem;            /* fixed padding */
}
.has-menu .menu-toggle:hover{
  background: var(--soft);         /* color only, no new border width */
  border-color: transparent;
}

/* 5) Ensure dropdowns always sit above content like maps */
.mega{ z-index: 950; }
.leaflet-container{ z-index: 1; }

/* 6) Mobile: no absolute positioning → no jitter */
@media (max-width: 900px){
  .mega{
    position: static;
    transform: none;
    min-width: 100%;
    max-width: 100%;
    box-shadow: none;
    border-radius: 12px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mega-grid{ grid-template-columns: 1fr 1fr; }
}

/* 7) Reduce motion if user prefers (keeps stability but no animation) */
@media (prefers-reduced-motion: reduce){
  .mega{ transition: none; transform: translateX(-50%) !important; }
}

/* =============================================== */
.mega {
  width: 100%;           /* stretches inside nav */
  max-width: 1200px;     /* match container width */
  margin: 0 auto;
  padding: 1rem 2rem;
}


/* ============================================== */



/* ============================================= */


/* Dropdown styles */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  background: #2cb4b9;
  color: #fff;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 5px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 220px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 99;
  border-radius: 5px;
  margin-top: 5px;
}

.dropdown-menu a {
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: #333;
}

.dropdown-menu a:hover {
  background: #f1f1f1;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

/* for the Video section */


.video-section {
  padding: 60px 0;
  background: #f8fafc;
  text-align: center;
}

.video-section h2 {
  margin-bottom: 10px;
}

.video-section .lead {
  margin-bottom: 24px;
  color: #475569;
}

.video-wrapper {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}

/* ======================================================================== */
/* front page - backgroun video */


.hero {
  position: relative;
  height: 100vh; /* full viewport */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2; /* behind everything */
}

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45); /* dark tint for text readability */
  z-index: -1;
}

.hero-content {
  position: relative;
  max-width: 700px;
  padding: 20px;
}

.hero h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
  margin-bottom: 15px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 25px;
  color: #f1f5f9;
}


/* =========================================================== */



/* Basic container utility */
.container {
  width: min(2100px, 92vw);
  margin-inline: auto;
}

/* ===== HERO (Video Background) ===== */
html, body { height: 100%; margin: 0; } /* ensure 100vh behaves correctly */

.hero {
  position: relative;
  height: 100vh;                 /* full screen */
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  background: #2cb4b9;           /* fallback color */
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* fill without distortion */
  z-index: -2;                   /* behind overlay & content */
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);   /* readability tint */
  z-index: -1;
}

.content {
  max-width: 720px;
  padding: 24px;
}

.hero h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
  margin: 0 0 12px;
}

.hero p {
  font-size: 1.15rem;
  color: #e2e8f0;
  margin: 0 0 20px;
}

/* ===== Fallback if video fails ===== */
.hero.no-video {
  background: #2cb4b9 url("images/fallback.jpg") center/cover no-repeat;
}
.hero.no-video .overlay,
.hero.no-video video { display: none; }

/* ===== Responsive tweaks ===== */
@media (max-width: 540px) {
  .hero { text-align: left; }
  .content { padding: 18px; }
}



/*================================= Hero sections ========================*/


:root{
  --teal: #2cb4b9;
  --teal-deep:#17565b;
  --offwhite:#f6f7f8;
  --ink:#0b1b21;
  --gold:#c69b4b;
  --slate:#334e56;
  --radius:22px;
  --shadow:0 12px 30px rgba(0,0,0,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:#152226;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:clamp(16px,2vw,24px)}
.btn{
  display:inline-block;padding:14px 22px;border-radius:999px;
  background:#fff;color:var(--teal-deep);font-weight:700;text-decoration:none;
  box-shadow:var(--shadow);border:2px solid transparent;transition:.2s;
}
.btn:hover{transform:translateY(-1px);}

/* ---------- HERO BASE ---------- */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:calc(var(--radius) + 6px);
  margin:28px auto; box-shadow:var(--shadow);
}
.hero .grid{
  display:grid; gap:clamp(22px,3vw,38px);
  grid-template-columns: 1.1fr .9fr;
  align-items:center;
}
@media (max-width: 960px){
  .hero .grid{grid-template-columns:1fr}
  .hero .media{order:-1}
}
.eyebrow{letter-spacing:.08em;text-transform:uppercase;font-weight:700;opacity:.9}
.title{
  font-weight:800; line-height:1.1;
  font-size:clamp(36px,5vw,58px);
  margin:10px 0 14px;
}
.lead{font-size:clamp(16px,2.1vw,20px);line-height:1.55;margin:0 0 10px;color:#0d2a31}
.muted{opacity:.9}

/* ---------- CHECKLIST ---------- */
.checks{margin:18px 0 4px;padding:0;list-style:none}
.checks li{
  position:relative;padding-left:34px;margin:10px 0;font-weight:600;
}
.checks li::before{
  content:"✓"; position:absolute; left:0; top:0; transform:translateY(2px);
  width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:#fff; color:var(--teal-deep); font-weight:900; box-shadow:0 1px 0 rgba(0,0,0,.08);
}

/* ---------- QUOTE ---------- */
blockquote{
  border-left:4px solid var(--gold); padding:10px 16px; margin:18px 0 0;
  font-size:clamp(16px,2.1vw,20px); font-style:italic; color:#10313a; background:rgba(255,255,255,.08); border-radius:12px;
}

/* ---------- HERO A ---------- */
.hero-a{
  background:
    radial-gradient(1200px 600px at 120% -20%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 120%, rgba(255,255,255,.08), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,.02) 2px 6px),
    var(--teal);
  color:#e8fbff;
  border:1px solid rgba(255,255,255,.25);
}
.hero-a .title{color:#fff}
.hero-a .checks li::before{background:#e7fbff}
.hero-a .btn{background:#fff;color:var(--teal-deep)}
.hero-a .frame{
  border:6px solid rgba(255,255,255,.45); border-radius:18px; overflow:hidden;
}

/* ---------- HERO B ---------- */
.hero-b{background:linear-gradient(#ffffff, #f5f8f9);}
.hero-b .grid{grid-template-columns: .95fr 1.05fr}
.hero-b .panel{
  background:#fff;border:1px solid #e6ecee;border-radius:16px;padding:18px 18px;
  box-shadow:0 6px 18px rgba(0,0,0,.05)
}
.hero-b .eyebrow{color:var(--slate)}
.hero-b .title{color:var(--ink)}
.hero-b .checks li::before{background:#eaf4f5;color:var(--teal-deep)}

/* ---------- HERO C ---------- */
.hero-c{
  background: radial-gradient(700px 300px at 10% 10%, #214c53, transparent 70%),
              radial-gradient(900px 400px at 110% -10%, #1b3e44, transparent 70%),
              var(--teal-deep);
  color:#e9fdff;
  border:1px solid rgba(255,255,255,.2);
}
.hero-c .title{color:#fff}
.cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:14px}
.btn.secondary{
  background:transparent; color:#fff; border-color:#ffffffaa
}
.badge{
  position:absolute; right:clamp(8px,2vw,24px); bottom:clamp(8px,2vw,24px);
  width:min(180px,28vw); aspect-ratio:1/1; border-radius:50%;
  background:#f4fbfb; color:#123; display:grid; place-items:center;
  text-align:center; padding:20px; line-height:1.25; font-weight:700;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
  border:8px solid #e1f0f1;
}
.badge .mini{display:block; font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.75; margin-bottom:6px}
.badge img{width:34px; height:34px; margin-bottom:6px}

/* ---------- MEDIA ---------- */
.media .ph{
  width:100%; aspect-ratio:16/10; border-radius:16px; background:linear-gradient(120deg,#e7eef0,#dbe6e8);
  display:grid; place-items:center; color:#69838a; font-weight:700; letter-spacing:.06em;
  border:1px solid #d7e5e8;
}
.credit{
  font-size:12px; opacity:.7; text-align:center; margin-top:4px
}


/* HERO - C - VIDEO  */

/* Generic media frame (used for images or video) */
.media .frame{
  border-radius:16px;
  overflow:hidden;
  border:1px solid #e6ecee;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

/* Make the video fill the frame nicely */
.media-vid{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/10;   /* keeps the same shape as the placeholder */
  object-fit:cover;     /* crops edges so it fills without bars */
}


/* TESTIMONIALS */

/* ===== Palette & basics (scoped to testimonials) ===== */
.testimonials{
  --t-ink:#0b1b21;
  --t-head:#0e2b36;
  --t-gold:#c9a54f;
  --t-gold-card:#dcbc67;
  --t-teal-card:#79a9ab;
  --t-light-card:#eef4f2;
  --t-radius:22px;
  --t-shadow:0 18px 40px rgba(0,0,0,.10);
  color:var(--t-ink);
  background:#fff;
  padding:clamp(28px,5vw,64px) 0;
  line-height:1.55;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

/* container */
.testimonials .t-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 clamp(16px,2vw,24px);
}

/* 3-column grid: left intro + two right columns */
.testimonials .t-grid{
  display:grid;
  grid-template-columns: minmax(260px,1.05fr) 1fr 1fr;
  gap:clamp(20px,3vw,40px);
  align-items:start;
}

/* responsive */
@media (max-width:980px){
  .testimonials .t-grid{ grid-template-columns:1fr; }
}

/* left column */
.testimonials .t-quote{
  font-size:64px;
  line-height:1;
  color:var(--t-ink);
  opacity:.15;
  margin:0 0 10px;
}

.testimonials .t-title{
  font-size:clamp(28px,4.6vw,52px);
  line-height:1.05;
  margin:8px 0 18px;
  color:var(--t-head);
  font-weight:800;
}

.testimonials .t-stars{
  display:flex; gap:8px; margin:10px 0 18px;
  color:var(--t-gold);
}
.testimonials .t-stars svg{ width:26px; height:26px; fill:currentColor; }

.testimonials .t-reviews-link{
  display:inline-block;
  color:var(--t-head);
  font-weight:800;
  text-decoration:underline;
}

/* cards */
.testimonials .t-card{
  position:relative;
  background:var(--t-light-card);
  border-radius:var(--t-radius);
  padding:28px;
  box-shadow:var(--t-shadow);
  min-height:260px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.testimonials .t-card--gold{ background:var(--t-gold-card); }
.testimonials .t-card--teal{ background:var(--t-teal-card); }

.testimonials .t-text{ margin:0; }
.testimonials .t-text.t-max{ max-width:70ch; }

.testimonials .t-divider{
  height:2px; background:var(--t-ink); opacity:.28; margin-top:6px;
}

.testimonials .t-author{
  margin:0; font-weight:700;
}

/* dotted bottom-right corner */
.testimonials .t-corner{
  position:absolute;
  right:0; bottom:0;
  width:72px; height:72px;
  border-bottom-right-radius:var(--t-radius);
  overflow:hidden;
  opacity:.9;
}

/* bottom card spans two right columns + spacing lift */
@media (min-width:981px){
  .testimonials .t-card--span2{
    grid-column: 2 / span 2;
    min-height:300px;
    margin-top:clamp(20px,3vw,40px); /* creates the stagger like the screenshot */
  }
}

/* ========================== ABOUT SECTION ========================= */

:root{
  --bg:#f3f5f2;          /* page background from screenshot */
  --ink:#0b1b21;         /* body text */
  --head:#0e2b36;        /* headline color */
  --accent:#2e6873;      /* “efficiency” word */
  --teal:#1f6e75;        /* teal card background */
  --radius:22px;
  --shadow:0 24px 50px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial}
img{display:block; max-width:100%}

/* ----- container & grid ----- */
.wrap{max-width:1200px; margin:0 auto; padding:clamp(18px,2vw,28px)}
.grid{
  display:grid;
  grid-template-columns: minmax(520px,1.35fr) 1fr; /* wider left column */
  grid-template-rows: auto 1fr;
  gap:28px 40px;
  align-items:start;
}

/* ----- left: headline + copy ----- */
.headline{
  margin:0 0 10px;
  font-weight:800;
  color:var(--head);
  font-size:clamp(32px,4.8vw,56px);
  line-height:1.04;
}
.headline .accent{color:var(--accent)}
.lede{
  margin:12px 0;
  font-size:clamp(16px,2vw,18px);
  line-height:1.6;
  max-width:72ch;
}

/* place copy in row 1, media in row 2 */
.left-copy{grid-column:1; grid-row:1}

/* ----- left: video thumb ----- */
.video{
  grid-column:1; grid-row:2;
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:#ddd;
  box-shadow:var(--shadow);
}
.video img{
  width:100%; height:100%; object-fit:cover;
  transform:translateZ(0);
}
.play{
  position:absolute; left:24px; bottom:24px; /* similar placement to screenshot */
  border:0; background:transparent; padding:0; cursor:pointer;
  width:min(86px,12vw); aspect-ratio:1/1;
  display:grid; place-items:center;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
  transition:transform .12s ease;
}
.play:hover{ transform:scale(1.04) }

/* ----- right: teal card spanning two rows ----- */
.teal-card{
  grid-column:2; grid-row:1 / span 2; /* spans both rows */
  background:var(--teal);
  color:#e8fbff;
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:clamp(18px,2.4vw,26px);
}
.card-media{
  border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
}
.card-media img{
  width:100%; height:auto; display:block;
}
.card-body{
  margin-top:18px;
  font-size:clamp(16px,2vw,18px);
  line-height:1.7;
  color:#e9fdff;
}

/* ----- responsive stack ----- */
@media (max-width: 980px){
  .grid{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    gap:20px;
  }
  .teal-card{ grid-column:1; grid-row:auto }
  .play{ left:16px; bottom:16px; }
}

/* Rotating word styles */
.headline .quote{
  color: var(--head);          /* same as your headline color */
  opacity: .9;
}
.rotor{
  display: inline-block;
  min-width: 12ch;             /* prevents layout shift (longest word ≈ 10ch) */
  text-wrap: nowrap;
  color: var(--accent);        /* teal accent color you already use */
  font-weight: 800;
}
.rotword{
  display:inline-block;
  transition: opacity .28s ease, transform .28s ease;
}
.rotword.is-out{
  opacity: 0;
  transform: translateY(.35em);
}


/* Doctors====================================================== */

/* layout-only styles — no colors set or overridden */

:root{
  --radius:6px;
  --col-photo: 220px;   /* headshot width (desktop) */
  --col-facts: 360px;   /* right column width (desktop) */
}

*{box-sizing:border-box}
html,body{margin:0}
img{display:block;max-width:100%}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:clamp(18px,2vw,24px);
}

/* ======= ROW ======= */
.doc{
  display:grid;
  grid-template-columns: var(--col-photo) 1fr var(--col-facts);
  gap: 28px 38px;
  align-items:start;
  padding: 36px 0 42px;
  border-top:2px solid currentColor;   /* uses existing text color */
  opacity: 0.96;                       /* tiny softness like screenshot */
}
.doc + .doc{ margin-top:22px; }

/* ======= LEFT PHOTO ======= */
.photo img{
  width:100%;
  height:auto;
  border-radius: var(--radius);
}

/* ======= MIDDLE BIO ======= */
.bio{ position:relative; padding-top:10px; }
.name{
  margin: 0 0 14px;
  font-weight:800;
  line-height:1.2;
  font-size: clamp(22px, 2.2vw, 30px);
}
.why{
  margin: 0 0 8px;
  font-size:14px;
  font-weight:800;
}
.bio p{ margin: 0 0 18px; text-align: justify;  }

/* dotted corner accent (inherits color) */
.corner{
  position:absolute; left:-12px; top:-8px;
  width:64px; height:64px; opacity:.85;
}

/* allow your existing .btn styles to apply */
.btn{
  display:inline-block;
  padding:12px 22px;
  border-radius:0;
  text-decoration:none;
}

/* ======= RIGHT FACTS ======= */
.facts h5{
  margin: 10px 0 6px;
  font-size:14px;
  font-weight:800;
}
.facts ul{
  list-style: disc;
  margin: 0 0 18px 18px;
  padding: 0;
}
.facts li{ margin:6px 0 }

/* ======= RESPONSIVE ======= */
@media (max-width: 1100px){
  :root{
    --col-photo: 200px;
    --col-facts: 320px;
  }
}
@media (max-width: 940px){
  .doc{
    grid-template-columns: 160px 1fr;
  }
  .facts{
    grid-column: 1 / -1;
    margin-top: 10px;
  }
}
@media (max-width: 640px){
  .doc{
    grid-template-columns: 1fr;
  }
  .photo{ order:-2; }
  .bio{ order:-1; }
  .facts{ order:0; }
  .corner{ left:0; top:0; }
}

/* ============== buttons to be teal =============== */

/* Booking/primary buttons set to #2cb4b9 */
:root { --brand: #2cb4b9; }

.btn,
.btn-cta,
.dropdown-toggle {
  background: #2cb4b9;
  border-color: #2cb4b9;
  color: #fff;
}

.btn-outline {
  background: #fff;
  color: #2cb4b9;
  border-color: #2cb4b9;
}

/* Make all buttons curved (pill shape) */
.btn,
.btn-cta,
.btn-outline,
.btn-small,
.dropdown-toggle {
  border-radius: 9999px; /* use 16–24px for softer, not full pill */
}

/* ======================== Services ============================= */


/* Scoped to this block only — no global color changes */
.cosmetic-visit { padding: clamp(24px, 4vw, 48px) 0; }

/* Two-column layout */
.cv-grid{
  display:grid;
  grid-template-columns: 1.15fr 1fr;  /* left text+image / right accordion */
  gap: clamp(24px, 3vw, 48px) clamp(32px, 4vw, 64px);
  align-items:start;
}

/* Headings & copy (uses your site colors) */
.cosmetic-visit .cv-h1{
  margin: 0 0 .6rem 0;
  line-height: 1.1;
  font-weight: 800;
  font-size: clamp(32px, 3.5vw, 56px);
}
.cosmetic-visit .cv-lead{
  margin: .75rem 0 1.5rem 0;
  max-width: 70ch;
}

/* Left image */
.cv-figure{
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
}
.cv-figure img{
  width:100%; height:auto; display:block;
}

/* Accordion */
.cv-accordion{ display:grid; gap: 14px; }

/* Card shell (neutral borders & shadows so colors remain unchanged) */
.cv-accordion details{
  background: var(--card, #fff);
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Expanded state gets a subtle tinted fill based on current text color */
.cv-accordion details[open]{
  background: color-mix(in srgb, currentColor 8%, var(--card, #fff));
}

/* Row header */
.cv-accordion summary{
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 12px; padding: 16px 18px;
  font-weight: 700;
}
.cv-accordion summary::-webkit-details-marker{ display:none; }

/* Plus / minus circle on the right */
.cv-accordion summary::after{
  content:"+";
  width: 26px; height: 26px; border-radius: 999px;
  display:grid; place-items:center;
  border:1px solid color-mix(in srgb, currentColor 30%, transparent);
  font-weight:700; line-height:1; transform: translateY(-1px);
}
.cv-accordion details[open] > summary::after{ content:"–"; }

/* Body text inside the open item */
.cv-panel{
  border-top:1px solid color-mix(in srgb, currentColor 18%, transparent);
  padding: 12px 18px 16px;
}

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

/* Fix transparent text in Hero B */

/* ==== FIX: ensure visible (non-transparent) text in Hero B ==== */

/* 1) Force real text color on heading, lead, and checks */
.hero-b .title,
.hero-b .lead,
.hero-b .checks li {
  color: var(--ink, #210b0b);
}

/* 2) Undo any gradient/transparent text from global styles */
.hero-b .title,
.hero-b .lead {
  -webkit-text-fill-color: currentColor;   /* Safari: fill the glyphs */
  -webkit-background-clip: border-box;     /* stop text clipping tricks */
          background-clip: border-box;
  background: none;                         /* drop gradient-on-text, if any */
}

/* 3) Make sure the panel/content isn’t faded or blending */
.hero-b .panel,
.hero-b .copy {
  opacity: 1;
  mix-blend-mode: normal;
}

/* 4) (If you used the video version) keep overlay behind text */
.hero-b--video .wrap { position: relative; z-index: 1; }
.hero-b--video .hero-bg,
.hero-b--video .hero-bg-tint { z-index: 0; }

/* ========= Team images ======== */

.team-photo,
.photo img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background-color: #f3f4f6;
}

/* ============ Modern view ============ */

.team-photo {
  filter: brightness(0.98) contrast(1.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-photo:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}




/* ============= */

/* The bio card needs a positioning context */
.doc .bio {
  position: relative;
}

/* The dotted corner triangle */
.doc .bio .corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 72px;
  height: 72px;
  display: block;
  pointer-events: none;
  /* Inherit text color, so ensure your .bio or parent sets a color */
  color: var(--card-accent, #0b8e92); /* or whatever accent color you use */
  /* If it sits under other elements, bump z-index */
  z-index: 1;
}

/* ============================================================ */


/* ====================================================== */


/* ==================== Only show the hamburger on mobile or tablets or Ipads. Not desktop ===================== */

/* ======================
   SHOW hamburger only on mobile
   ====================== */
.nav-toggle {
    display: none;
    /* hide by default (desktop view) */
}

/* Show hamburger when screen ≤ 900px */
@media (max-width: 900px) {
    .nav-toggle {
        display: inline-block;
    }

    /* Optional: hide the desktop nav layout */
    .nav {
        display: none;
    }

    .nav.open {
        display: block;
    }
}


/* make the mega menu and dropdown items smaller and listed vertically (instead of those wide 3-column blocks) */


/* ===============================
   COMPACT VERTICAL DROPDOWNS
   =============================== */

/* --- Apply to all mega menus --- */
.mega {
    min-width: 240px;
    /* smaller width */
    max-width: 280px;
    padding: .75rem;
}

.mega-grid {
    display: flex;
    /* stack items vertically */
    flex-direction: column;
    gap: .35rem;
    /* tighter spacing between items */
}

.mega a {
    display: block;
    padding: .45rem .65rem;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--text, #0f172a);
    border-radius: 6px;
}

.mega a:hover {
    background: var(--soft, #f1f5f9);
}

/* --- Optional: smaller header text in dropdowns --- */
.mega h4 {
    font-size: .9rem;
    margin: .25rem 0 .4rem;
    font-weight: 700;
    color: var(--muted, #475569);
}

/* --- On mobile: make them full-width but vertical --- */
@media (max-width: 900px) {
    .mega {
        min-width: 100%;
        max-width: 100%;
    }

    .mega-grid {
        flex-direction: column;
        gap: .25rem;
    }
}

/* =============================== */
/* =============================== *//* =============================== *//* =============================== */

/* =========================================================
   MOBILE-ONLY HAMBURGER + SLIDE-IN DRAWER
   ========================================================= */

/* Hide hamburger on desktop */
.nav-toggle {
    display: none;
}

/* Show hamburger ≤ 900px */
@media (max-width: 900px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid #e5e7eb;
        background: #fff;
        cursor: pointer;
        position: relative;
        z-index: 1201;
        /* above drawer */
    }

    /* Burger → X animation */
    .nav-toggle .burger,
    .nav-toggle .burger::before,
    .nav-toggle .burger::after {
        content: "";
        display: block;
        width: 22px;
        height: 2px;
        background: #0f172a;
        border-radius: 2px;
        position: relative;
        transition: transform .2s ease, opacity .2s ease;
    }

    .nav-toggle .burger::before {
        position: absolute;
        top: -7px;
        left: 0;
    }

    .nav-toggle .burger::after {
        position: absolute;
        top: 7px;
        left: 0;
    }

    /* Drawer shell (re-uses your #primary-nav) */
    #primary-nav.nav {
        position: fixed;
        top: var(--header-h, 72px);
        right: 0;
        bottom: 0;
        width: min(88vw, 420px);
        background: #fff;
        border-left: 1px solid #e5e7eb;
        box-shadow: -20px 0 40px rgba(2, 8, 23, .18);
        transform: translateX(100%);
        transition: transform .24s ease;
        z-index: 1200;
        display: block;
        /* override older display:none */
        padding: .9rem 1rem 1.25rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #primary-nav.nav.open {
        transform: translateX(0);
    }

    /* Dimmed backdrop */
    .nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .45);
        backdrop-filter: blur(1px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
        z-index: 1100;
    }

    #primary-nav.nav.open+.nav-backdrop {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    /* Stack links vertically in the drawer */
    .nav .nav-links {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        margin: 0;
    }

    /* Top-level buttons become tidy accordions */
    .has-menu .menu-toggle,
    .dropdown-toggle {
        width: 100%;
        text-align: left;
        background: #fff;
        border: 1px solid #e5e7eb;
        padding: .85rem 1rem;
        border-radius: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .6rem;
    }

    /* Chevron at right */
    .has-menu .menu-toggle::after {
        content: "▾";
        opacity: .85;
        transition: transform .18s ease;
    }

    .has-menu.open .menu-toggle::after {
        transform: rotate(180deg);
    }

    /* Mega becomes collapsible panel */
    .mega {
        position: static !important;
        transform: none !important;
        min-width: 100% !important;
        max-width: 100% !important;
        box-shadow: none !important;
        border: 1px solid #eef2f7;
        border-radius: 12px;
        margin: .45rem 0 0;
        padding: .75rem;
        display: none;
        /* hidden until parent open */
    }

    .has-menu.open>.mega {
        display: block;
    }

    .mega-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .mega h4 {
        font-size: .92rem;
        margin: .1rem 0 .2rem;
        color: #475569;
    }

    .mega a {
        display: block;
        padding: .5rem .6rem;
        border-radius: 8px;
    }

    .mega a:hover {
        background: #f1f5f9;
    }

    /* Appointment dropdown also collapses neatly */
    .dropdown {
        width: 100%;
    }

    .dropdown-menu {
        position: static;
        display: none;
        border: 1px solid #eef2f7;
        border-radius: 12px;
        box-shadow: none;
        margin-top: .45rem;
        padding: .25rem 0;
    }

    .dropdown.open .dropdown-menu {
        display: block;
    }

    .dropdown-menu a {
        display: block;
        padding: .65rem .8rem;
        border-radius: 8px;
    }

    .dropdown-menu a:hover {
        background: #f3f4f6;
    }
}

/* Desktop: keep your current horizontal megamenus and hide burger */
@media (min-width: 901px) {
    .nav-toggle {
        display: none !important;
    }

    #primary-nav.nav {
        position: static;
        transform: none;
        box-shadow: none;
    }

    .nav-backdrop {
        display: none !important;
    }
}

/* Prevent underlying content (maps) from overlapping */
header,
nav,
.site-header,
.has-menu {
    overflow: visible;
}

.mega,
.dropdown-menu {
    z-index: 1250;
}

.leaflet-container,
.map-wrap {
    z-index: 1;
}

/* Burger → X when drawer open */
@media (max-width: 900px) {
    #primary-nav.nav.open~.nav-toggle .burger {
        transform: rotate(45deg);
    }

    #primary-nav.nav.open~.nav-toggle .burger::before {
        transform: rotate(90deg);
        top: 0;
    }

    #primary-nav.nav.open~.nav-toggle .burger::after {
        opacity: 0;
    }
}

/* If your .nav-toggle is before the nav, we handle it in JS by toggling a class too */


/* ====================================== */
/* ====================================== */
/* ====================================== */

/* ==========================================================
   MOBILE: Green “Book an Appointment” Button (Toothworx style)
   ========================================================== */

@media (max-width: 900px) {
    .dropdown-toggle {
        background: #2cb4b9;
        /* Toothworx teal-green */
        color: #fff ;
        font-weight: 700;
        border-radius: 9999px;
        /* pill shape */
        padding: 14px 20px;
        text-align: center;
        width: 100%;
        /* full width for mobile */
        box-shadow: 0 4px 12px rgba(44, 180, 185, 0.25);
        transition: background 0.25s ease, transform 0.15s ease;
    }

    .dropdown-toggle:hover,
    .dropdown.open .dropdown-toggle {
        background: #23a1a6 !important;
        /* slightly darker on hover */
        transform: translateY(-1px);
    }

    /* Dropdown menu (appointments list) */
    .dropdown-menu {
        background: #ffffff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        margin-top: 0.5rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    .dropdown-menu a {
        color: #0f172a;
        padding: 10px 16px;
        display: block;
        text-decoration: none;
        font-weight: 500;
    }

    .dropdown-menu a:hover {
        background: #f0fdfd;
        /* very light teal tint */
        color: #2cb4b9;
    }
}

/* ====================================================== */


/* ===== Efficiency block (layout + visuals) ===== */
.efficiency{ background:#fff; }

.eff-grid{
  display:grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: 1.15fr 1fr;   /* copy left, media right */
  align-items:start;
}

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

/* Left copy column */
.eff-copy .headline{
  font-weight: 800;
  line-height: 1.08;
  font-size: clamp(32px, 4.2vw, 52px);
  color: var(--text, #0f172a);
  margin: 0 0 .6rem;
}

.eff-copy .quote{ 
  color: var(--brand, #2cb4b9);
  font-weight: 900;
  opacity: .9;
}

.eff-copy .rotor{
  display:inline-block;
  min-width: 9.5ch;          /* prevents headline jitter */
  text-wrap: nowrap;
  color: var(--brand, #2cb4b9);
}

.eff-copy .lede{
  margin: .75rem 0 0;
  color: var(--muted, #475569);
  max-width: 70ch;
}

/* Right media card */
.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  padding: clamp(14px, 2vw, 18px);
}

/* Professional image grid */
.img-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1280px){
  .img-grid{ grid-template-columns: repeat(3, 1fr); }
}

.img-grid figure{
  margin:0;
  border-radius: 12px;
  overflow: hidden;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
}

.img-grid img{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:block;
  transition: transform .25s ease, filter .25s ease;
}

@media (min-width: 540px){
  .img-grid img{ height: 200px; }
}
@media (min-width: 900px){
  .img-grid img{ height: 220px; }
}

.img-grid figure:hover img{
  transform: scale(1.02);
  filter: contrast(1.05) saturate(1.04);
}

.img-grid figcaption{
  font-size: .9rem;
  padding: 8px 10px;
  color: #334155;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

/* Card foot */
.card-body{ margin-top: 10px; }
.card-body .muted{ color: var(--muted, #475569); }

/* Optional: subtle sticky on large screens to keep images in view while reading */
@media (min-width: 1200px){
  .eff-media{
    position: sticky;
    top: calc(var(--header-h, 72px) + 16px);
  }
}

/* ===== Optional: smoother rotor word transition ===== */
.rotword{
  display:inline-block;
  transition: opacity .24s ease, transform .24s ease;
}
.rotword.is-out{
  opacity: 0;
  transform: translateY(.35em);
}

/* ============================== Below is the code for branch images ============================= */


/* ===== Efficiency block (layout + visuals) ===== */
.efficiency{ background:#fff; }

.eff-grid{
  display:grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: 1.15fr 1fr;   /* copy left, media right */
  align-items:start;
}

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

/* Left copy column */
.eff-copy .headline{
  font-weight: 800;
  line-height: 1.08;
  font-size: clamp(32px, 4.2vw, 52px);
  color: var(--text, #0f172a);
  margin: 0 0 .6rem;
}

.eff-copy .quote{ 
  color: var(--brand, #2cb4b9);
  font-weight: 900;
  opacity: .9;
}

.eff-copy .rotor{
  display:inline-block;
  min-width: 9.5ch;          /* prevents headline jitter */
  text-wrap: nowrap;
  color: var(--brand, #2cb4b9);
}

.eff-copy .lede{
  margin: .75rem 0 0;
  color: var(--muted, #475569);
  max-width: 70ch;
}

/* Right media card */
.card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  padding: clamp(14px, 2vw, 18px);
}

/* Professional image grid */
.img-grid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1280px){
  .img-grid{ grid-template-columns: repeat(3, 1fr); }
}

.img-grid figure{
  margin:0;
  border-radius: 12px;
  overflow: hidden;
  background:#f3f4f6;
  border:1px solid #e5e7eb;
  display:flex;
  flex-direction:column;
}

.img-grid img{
  width:100%;
  height: 180px;
  object-fit: cover;
  display:block;
  transition: transform .25s ease, filter .25s ease;
}

@media (min-width: 540px){
  .img-grid img{ height: 200px; }
}
@media (min-width: 900px){
  .img-grid img{ height: 220px; }
}

.img-grid figure:hover img{
  transform: scale(1.02);
  filter: contrast(1.05) saturate(1.04);
}

.img-grid figcaption{
  font-size: .9rem;
  padding: 8px 10px;
  color: #334155;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
}

/* Card foot */
.card-body{ margin-top: 10px; }
.card-body .muted{ color: var(--muted, #475569); }

/* Optional: subtle sticky on large screens to keep images in view while reading */
@media (min-width: 1200px){
  .eff-media{
    position: sticky;
    top: calc(var(--header-h, 72px) + 16px);
  }
}

/* ===== Optional: smoother rotor word transition ===== */
.rotword{
  display:inline-block;
  transition: opacity .24s ease, transform .24s ease;
}
.rotword.is-out{
  opacity: 0;
  transform: translateY(.35em);
}


/* ============================================================== */
/* ============================================================== */

.nav-link {
    padding: 20px 10px !important;
}

.dropdown-toggle
 {
 background: transparent;
border-color: #2cb4b9; 
    color: rgb(0 0 0 / 80%);
}

.dropdown-menu {
    top: 45px;
}

.menu-btn-m{
      margin: 10px 0;
}

main a {
    color: #2bb7b3 !important
   
}

.location-box p {

   text-align: left !important;

}

.text-primary {
    --bs-text-opacity: 1;
    color: #2bb7b3 !important;
}

.form-label {
    color: #01cbbb;
}