/* ==========================================================================
   Ingleside Family Dental - Design System
   Ladson, SC · Dr. Marilyn Betty Mathew, DDS
   Brand: green #205a2c + gold #9f9132 on cream #f2f0e5
   ========================================================================== */

:root{
  /* brand */
  --clr-green:#205a2c;
  --clr-green-deep:#17421f;
  --clr-green-soft:#2d6f3a;
  --clr-gold:#9f9132;
  --clr-gold-hover:#8a7d2a;
  --clr-gold-deep:#6f6520;
  --clr-gold-light:#c3b02f;
  /* CTA gold: brighter and more saturated than the brand gold, always paired
     with dark green text rather than white. */
  --clr-gold-cta:#e0b93c;
  --clr-gold-cta-hover:#f0c94d;

  /* surfaces */
  --clr-bg:#ffffff;
  --clr-cream:#f2f0e5;
  --clr-cream-deep:#e8e5d5;
  --clr-ink:#1f2420;

  /* text */
  --clr-text:#2b312d;
  --clr-text-light:#5f6660;
  --clr-border:#e0ded2;

  /* type */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",Helvetica,sans-serif;

  /* rhythm */
  --wrap:1180px;
  --wrap-wide:1520px;
  --gutter:22px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--clr-text);
  background:var(--clr-bg);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
picture{display:block}

/* ---------- typography ---------- */
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--clr-green);
  margin:0 0 .5em;
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.15rem,5vw,3.75rem)}
h2{font-size:clamp(1.75rem,3.2vw,2.7rem)}
h3{font-size:clamp(1.25rem,1.7vw,1.55rem);line-height:1.2}
h4{font-size:1.15rem}
p{margin:0 0 1.1em}
a{color:var(--clr-gold-deep)}
strong{font-weight:600;color:var(--clr-ink)}
ul,ol{margin:0 0 1.2em;padding-left:1.15em}
li{margin-bottom:.5em}

/* ---------- layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap--narrow{max-width:820px}
.sec{padding:clamp(58px,7vw,96px) 0}
.sec--cream{background:var(--clr-cream)}
.sec--green{background:var(--clr-green);color:#e8ece9}
.sec--green h2,.sec--green h3{color:#fff}
.sec--ink{background:var(--clr-ink);color:#e6e8e6}
.sec--ink h2,.sec--ink h3{color:#fff}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

.eyebrow{
  font-family:var(--font-body);
  font-size:13.5px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--clr-gold-deep);
  font-weight:700;
  margin:0 0 14px;
}
.sec--green .eyebrow,.sec--ink .eyebrow{color:var(--clr-gold-light)}

.lead{font-size:1.09rem;color:var(--clr-text-light);max-width:64ch}
.sec--green .lead,.sec--ink .lead{color:#c2cac4}

.rule{width:72px;height:4px;background:linear-gradient(90deg,var(--clr-gold-cta),var(--clr-gold-light));border:0;margin:0 0 22px}
.center .rule{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:16px 28px;
  font-family:var(--font-body);
  font-weight:700;font-size:15px;letter-spacing:.02em;
  border:2px solid transparent;border-radius:0;
  cursor:pointer;text-decoration:none;
  min-height:54px;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.btn--gold{background:var(--clr-gold-cta);color:var(--clr-green-deep);border-color:var(--clr-gold-cta);font-weight:700}
.btn--gold:hover{background:var(--clr-gold-cta-hover);border-color:var(--clr-gold-cta-hover);color:var(--clr-green-deep)}
.btn--green{background:var(--clr-green);color:#fff;border-color:var(--clr-green)}
.btn--green:hover{background:var(--clr-green-deep);border-color:var(--clr-green-deep)}
.btn--ghost{background:transparent;color:var(--clr-green);border-color:var(--clr-green)}
.btn--ghost:hover{background:var(--clr-green);color:#fff}
.btn--ghost-inv{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost-inv:hover{background:#fff;color:var(--clr-green);border-color:#fff}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.center .btn-row{justify-content:center}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--clr-gold);outline-offset:2px;
}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--clr-green);color:#fff;padding:12px 18px;z-index:1200}
.skip-link:focus{left:0}

/* ---------- top bar ---------- */
.topbar{background:var(--clr-ink);color:#d6dad7;font-size:13.5px;letter-spacing:.01em}
.topbar .wrap{max-width:var(--wrap-wide);display:flex;justify-content:space-between;align-items:center;gap:26px;
  padding-top:9px;padding-bottom:9px;flex-wrap:wrap}
.topbar a{color:#d6dad7;text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.topbar a:hover{color:#fff}
.topbar-item{display:inline-flex;align-items:center;gap:7px}
.topbar b{color:var(--clr-gold-light);font-weight:700}
.topbar-note{color:#9fada4}
@media (max-width:1180px){.topbar-note{display:none}}
.topbar svg{flex-shrink:0}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:900;background:#fff;
  border-bottom:1px solid var(--clr-border);transition:box-shadow .2s}
.hdr.scrolled{box-shadow:0 6px 24px rgba(31,36,32,.11)}
.hdr .wrap{max-width:var(--wrap-wide);display:flex;align-items:center;justify-content:space-between;gap:32px;
  padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0;margin-right:auto}
.brand img{height:54px;width:auto}

.nav{display:flex;align-items:center;gap:30px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links > a,.nav-dd > a{
  font-size:15px;font-weight:500;color:var(--clr-text);text-decoration:none;
  padding:8px 0;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.nav-links > a:hover,.nav-dd > a:hover{color:var(--clr-green)}
.nav-links > a.active,.nav-dd > a.active{color:var(--clr-green);border-bottom-color:var(--clr-gold);font-weight:700}

.nav-dd{position:relative}
.dd-menu{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--clr-border);box-shadow:0 14px 38px rgba(31,36,32,.14);
  min-width:250px;padding:10px 0;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;
  z-index:950;
}
.nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dd-menu a{
  display:block;padding:9px 20px;font-size:14.5px;color:var(--clr-text);text-decoration:none;
  border-left:3px solid transparent;transition:background .13s,border-color .13s,color .13s;
}
.dd-menu a:hover{background:var(--clr-cream);color:var(--clr-green);border-left-color:var(--clr-gold)}
.dd-menu a.active{background:var(--clr-cream);color:var(--clr-green);border-left-color:var(--clr-gold);font-weight:700}
.dd-menu--wide{min-width:420px;columns:2;padding:14px 0}

/* Services mega menu: four labelled columns plus a promo panel, instead of
   thirty links stacked in two columns with no visual grouping. */
.dd-mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  width:min(1180px,94vw);
  background:#fff;border:1px solid var(--clr-border);
  box-shadow:0 22px 54px rgba(31,36,32,.17);
  display:grid;grid-template-columns:repeat(4,1fr) 268px;
  opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;z-index:950;
}
.nav-dd:hover .dd-mega,.nav-dd:focus-within .dd-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-col{padding:22px 20px;border-right:1px solid var(--clr-border)}
.mega-col h4{
  font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clr-gold-deep);font-weight:700;margin:0 0 12px;padding-bottom:9px;
  border-bottom:2px solid var(--clr-gold);
}
.mega-col a{
  display:block;padding:6px 0;font-size:14px;color:var(--clr-text);text-decoration:none;
  border-left:0;transition:color .13s,padding-left .13s;
}
.mega-col a:hover{color:var(--clr-green);padding-left:5px}
.mega-col a.active{color:var(--clr-green);font-weight:700}
.mega-promo{
  padding:24px 22px;background:var(--clr-cream);display:flex;flex-direction:column;justify-content:center;
}
.mega-promo .eyebrow{margin-bottom:8px;font-size:11px}
.mega-promo-price{font-family:var(--font-display);font-size:2.6rem;font-weight:700;
  color:var(--clr-green);line-height:1;margin-bottom:4px}
.mega-promo h5{font-family:var(--font-display);font-size:1.15rem;color:var(--clr-green);
  margin:0 0 8px;font-weight:700;line-height:1.2}
.mega-promo p{font-size:13px;color:var(--clr-text-light);margin:0 0 16px;line-height:1.5}
.mega-promo .btn{min-height:44px;padding:12px 18px;font-size:13.5px}
.mega-promo-sep{height:1px;background:var(--clr-border);margin:16px 0}
.mega-emerg{font-size:13px;color:var(--clr-text-light);line-height:1.5}
.mega-emerg a{color:var(--clr-gold-deep);font-weight:700;text-decoration:none}
.mega-emerg a:hover{text-decoration:underline}
@media (max-width:1320px){
  .dd-mega{grid-template-columns:repeat(4,1fr);width:min(940px,94vw)}
  .mega-promo{grid-column:1 / -1;flex-direction:row;align-items:center;gap:20px;
    border-top:1px solid var(--clr-border)}
  .mega-promo p{margin-bottom:0;flex:1}
  .mega-promo-sep{display:none}
  .mega-emerg{margin-left:auto}
}
.dd-group-label{
  display:block;padding:8px 20px 4px;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--clr-gold-deep);font-weight:700;
}

.hdr-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.hdr-phone{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-weight:700;font-size:16px;color:var(--clr-green);white-space:nowrap;
}
.hdr-phone:hover{color:var(--clr-gold-deep)}
.hdr-mobile-trust{display:none}
.hmt-stars{color:var(--clr-gold);letter-spacing:1.5px}
.hmt-score{font-weight:700;color:var(--clr-ink)}
.hmt-count{color:var(--clr-text-light)}

.hamburger{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;gap:5px;
}
.hamburger span{display:block;width:26px;height:2.5px;background:var(--clr-green);transition:.2s}

/* ---------- mobile drawer ---------- */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(31,36,32,.55);z-index:990;
  opacity:0;visibility:hidden;transition:opacity .22s;
}
.drawer-overlay.active{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(360px,88vw);background:#fff;z-index:1000;
  transform:translateX(100%);transition:transform .26s ease;
  display:flex;flex-direction:column;overflow-y:auto;
}
.drawer.active{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--clr-border)}
.drawer-head img{height:44px;width:auto}
.drawer-close{background:none;border:0;cursor:pointer;color:var(--clr-green);padding:4px}
.drawer-nav{padding:12px 0;flex:1}
.drawer-nav > a,.drawer-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:14px 22px;font-family:var(--font-body);font-size:16px;font-weight:500;
  color:var(--clr-text);text-decoration:none;background:none;border:0;
  border-bottom:1px solid var(--clr-border);cursor:pointer;text-align:left;
}
.drawer-nav > a.active,.drawer-toggle.active{color:var(--clr-green);font-weight:700}
.drawer-toggle .chev{transition:transform .2s}
.drawer-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.drawer-sub{display:none;background:var(--clr-cream)}
.drawer-sub.open{display:block}
.drawer-sub a{
  display:block;padding:11px 22px 11px 36px;font-size:14.5px;color:var(--clr-text);
  text-decoration:none;border-bottom:1px solid var(--clr-cream-deep);
}
.drawer-sub a.active{color:var(--clr-green);font-weight:700}
.drawer-cta{padding:18px 20px;display:grid;gap:10px;border-top:1px solid var(--clr-border)}
.drawer-info{padding:0 20px 26px;font-size:14px;color:var(--clr-text-light);line-height:1.55}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--clr-ink);color:#fff;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
/* video sits over the poster once it can play, so there is never a blank frame */
.hero-bg video{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero-bg video.ready{opacity:1}

/* inline video block, used in split sections */
.split-media video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--clr-ink)}
.media-video{position:relative}
.media-video video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.media-video img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.media-video video{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.media-video video.ready{opacity:1}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  /* Lifted so the footage keeps its colour. The headline carries a shadow
     rather than relying on the overlay alone, because a video frame that is
     dark one second can be bright the next. */
  background:
    linear-gradient(100deg,
      rgba(13,26,16,.62) 0%,
      rgba(15,32,19,.46) 34%,
      rgba(17,38,22,.24) 58%,
      rgba(20,48,26,.08) 82%,
      rgba(20,48,26,.02) 100%),
    linear-gradient(180deg,rgba(13,26,16,.16) 0%,rgba(13,26,16,0) 28%,rgba(13,26,16,.20) 100%);
}
.hero .wrap{position:relative;z-index:1;padding-top:clamp(66px,8vw,108px);padding-bottom:clamp(66px,8vw,108px)}
.hero-inner{max-width:680px}
.hero h1{color:#fff;margin-bottom:.35em;text-shadow:0 2px 18px rgba(8,18,11,.55),0 1px 3px rgba(8,18,11,.4)}
.hero .eyebrow{color:var(--clr-gold-cta);text-shadow:0 1px 10px rgba(8,18,11,.5)}
.hero-sub{font-size:1.14rem;color:#e6ece8;max-width:56ch;margin-bottom:30px;text-shadow:0 1px 12px rgba(8,18,11,.55)}
.hero-trust{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:32px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.2)}
.hero-trust div{font-size:14px;color:#c8d1cb;display:flex;align-items:center;gap:8px}
.hero-trust b{display:block;color:#fff;font-size:20px;font-family:var(--font-display);font-weight:700;line-height:1.1}

/* page hero (inner pages)
   The image used to sit at 24% opacity over flat green, so only a quarter of
   the photograph was visible. It now runs at full opacity behind a gradient,
   the same treatment as the homepage hero. Taller box so a 1.9:1 photo is not
   cropped to a letterbox strip, and object-position favours the upper third
   where faces sit. */
.phero{
  background:var(--clr-ink);color:#fff;position:relative;overflow:hidden;
  min-height:clamp(380px,38vw,520px);display:flex;align-items:center;
}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
.phero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,
      rgba(20,48,26,.78) 0%,
      rgba(20,48,26,.62) 34%,
      rgba(20,48,26,.38) 60%,
      rgba(20,48,26,.18) 82%,
      rgba(20,48,26,.08) 100%),
    linear-gradient(180deg,rgba(13,26,16,.22) 0%,rgba(13,26,16,0) 38%,rgba(13,26,16,.20) 100%);
}
.phero .wrap{position:relative;z-index:2;width:100%;
  padding-top:clamp(52px,6vw,74px);padding-bottom:clamp(52px,6vw,74px)}
.phero h1{color:#fff;margin-bottom:.25em;max-width:20ch;text-shadow:0 2px 16px rgba(8,18,11,.5)}
.phero p{color:#e2eae5;max-width:62ch;margin:0}

/* Taller hero for group photographs. A 16:9 photo in a 3.7:1 band shows only
   about 48% of its height, which is not enough for a group whose faces span
   roughly 2% to 60% of the frame. At 640px the band shows about 60%, so nobody
   is decapitated and the child at the front keeps his chin. */
.phero--tall{min-height:clamp(440px,46vw,640px)}
.phero--tall .phero-bg img{object-position:center 5%}
@media (max-width:860px){
  .phero--tall{min-height:clamp(300px,52vw,400px)}
  .phero--tall .phero-bg img{object-position:center 12%}
}

/* crop hints for images whose subject is not centred */
.phero-bg img.pos-top{object-position:center 22%}
.phero-bg img.pos-centre{object-position:center 50%}

/* breadcrumbs */
.crumbs{font-size:13.5px;color:#b8c5bc;margin-bottom:18px}
.crumbs a{color:#dfe6e1;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span{margin:0 7px;opacity:.6}

/* Section banner. One wide image per group on the services hub, so the page
   has visual rhythm without tiling 29 clinical thumbnails, which would be both
   slower to scan and considerably less pleasant. */
.sec-banner{margin:0 0 clamp(30px,4vw,46px);overflow:hidden;border:1px solid var(--clr-border)}
.sec-banner img{width:100%;aspect-ratio:3/1;object-fit:cover;display:block}
@media (max-width:767px){
  .sec-banner img{aspect-ratio:2/1}
}

/* ---------- cards & grids ---------- */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

.card{background:#fff;border:1px solid var(--clr-border);display:flex;flex-direction:column;
  transition:box-shadow .18s,transform .18s}
.card:hover{box-shadow:0 14px 34px rgba(31,36,32,.13);transform:translateY(-3px);border-color:var(--clr-gold-cta)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card-body{padding:24px;flex:1;display:flex;flex-direction:column}
.card h3{margin-bottom:.4em}
.card p{font-size:15px;color:var(--clr-text-light);flex:1}
.card-link{
  font-weight:700;font-size:14px;color:var(--clr-gold-deep);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;margin-top:6px;
}
.card-link:hover{gap:11px;color:var(--clr-green)}
.card-link svg{transition:transform .16s}

/* value/pillar cards */
.pillar{text-align:center;padding:34px 26px;background:#fff;border:1px solid var(--clr-border)}
.pillar-ico{width:64px;height:64px;margin:0 auto 20px;color:var(--clr-green);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--clr-gold-cta),var(--clr-gold-light));
  border-radius:50%}
.pillar h3{margin-bottom:.35em}
.pillar p{font-size:15px;color:var(--clr-text-light);margin:0}

/* split (image + copy) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.split--flip .split-media{order:2}
.split-media img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split-copy h2{margin-bottom:.4em}

/* Portrait photographs. The default 4:3 crop cuts the top and bottom off a
   4:5 image, which on a person means the head and the folded arms. This keeps
   the native ratio and caps the width so it sits beside copy rather than
   towering over it. */
.split-media--portrait img{aspect-ratio:4/5;max-width:430px;margin-inline:auto}
@media (max-width:860px){
  .split-media--portrait img{max-width:340px}
}

/* ---------- offers ---------- */
.offer{background:#fff;border:1px solid var(--clr-border);border-top:5px solid var(--clr-gold-cta);
  padding:30px 26px;display:flex;flex-direction:column;text-align:center}
.offer-price{font-family:var(--font-display);font-size:clamp(2.3rem,3.6vw,3.1rem);
  font-weight:700;color:var(--clr-green);line-height:1;margin-bottom:8px}
.offer-price sup{font-size:.5em;top:-.55em;position:relative}
.offer h3{font-size:1.1rem;margin-bottom:.5em}
.offer p{font-size:14.5px;color:var(--clr-text-light);flex:1;margin-bottom:18px}
.offer-fine{font-size:12.5px;color:var(--clr-text-light);opacity:.85;margin-top:14px;line-height:1.45}

/* ---------- pull quotes (hero + inline proof) ---------- */
.hero-quote{
  margin:26px 0 0;padding:18px 0 0;max-width:52ch;
  border-top:1px solid rgba(255,255,255,.22);
}
.hero-quote blockquote{
  margin:0 0 9px;font-family:var(--font-display);font-size:1.22rem;line-height:1.42;
  color:#fff;font-style:italic;
}
.hero-quote figcaption{font-size:13px;color:#cbd6cf;display:flex;align-items:center;gap:9px}
.hq-stars{color:var(--clr-gold-light);letter-spacing:1.5px}

.pull-quote{
  margin:24px 0 0;padding:20px 22px;background:#fff;
  border-left:3px solid var(--clr-gold);
}
.pull-quote blockquote{
  margin:0 0 9px;font-size:15.5px;line-height:1.6;color:var(--clr-text);font-style:italic;
}
.pull-quote figcaption{font-size:12.5px;color:var(--clr-text-light);display:flex;align-items:center;gap:8px}
.pull-quote .hq-stars{color:var(--clr-gold)}

@media (max-width:767px){
  .hero-quote{margin-top:22px}
  .hero-quote blockquote{font-size:1.08rem}
}
/* ---------- financing / CareCredit ---------- */
.finance-card{
  background:#fff;border:1px solid var(--clr-border);border-top:4px solid var(--clr-gold);
  padding:clamp(30px,4vw,44px);display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,3vw,42px);
  align-items:center;
}
.finance-logo{max-width:230px;width:100%}
.finance-logo img{width:100%;height:auto}
.finance-body h3{margin-bottom:.4em}
.finance-body p{font-size:15.5px;color:var(--clr-text-light)}
.finance-body p:last-of-type{margin-bottom:20px}
.finance-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(28px,3vw,38px)}
.finance-step{background:#fff;border:1px solid var(--clr-border);padding:24px 22px}
.finance-step-n{font-family:var(--font-display);font-size:2.1rem;font-weight:700;
  color:var(--clr-gold);line-height:1;margin-bottom:10px}
.finance-step h4{font-family:var(--font-display);font-size:1.12rem;color:var(--clr-green);margin-bottom:.35em}
.finance-step p{font-size:14.5px;color:var(--clr-text-light);margin:0}
@media (max-width:767px){
  .finance-card{grid-template-columns:1fr;text-align:center}
  .finance-logo{margin:0 auto}
  .finance-steps{grid-template-columns:1fr}
}
/* ---------- reviews ---------- */
.stars{color:var(--clr-gold);letter-spacing:2px;font-size:15px}

/* rating summary */
.rating-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(20px,4vw,46px);padding:26px 28px;background:#fff;border:1px solid var(--clr-border);
  margin-bottom:clamp(30px,4vw,44px)}
.sec--green .rating-bar,.sec--ink .rating-bar{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.2)}
.rating-score{font-family:var(--font-display);font-size:3.1rem;font-weight:700;color:var(--clr-gold-deep);line-height:1}
.sec--green .rating-score,.sec--ink .rating-score{color:#fff}
.rating-block{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.rating-block .stars{font-size:19px}
.rating-label{font-size:13.5px;color:var(--clr-text-light)}
.sec--green .rating-label,.sec--ink .rating-label{color:#c2cac4}
.rating-div{width:1px;align-self:stretch;background:var(--clr-border)}
.sec--green .rating-div{background:rgba(255,255,255,.2)}

/* carousel */
.rv-wrap{position:relative}
.rv-track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(330px,1fr);
  gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 20px;margin:0 -4px;
  scrollbar-width:thin;scrollbar-color:var(--clr-gold) transparent;
}
.rv-track::-webkit-scrollbar{height:6px}
.rv-track::-webkit-scrollbar-track{background:var(--clr-border)}
.rv-track::-webkit-scrollbar-thumb{background:var(--clr-gold)}
.sec--green .rv-track::-webkit-scrollbar-track{background:rgba(255,255,255,.16)}

.rv{
  scroll-snap-align:start;background:#fff;border:1px solid var(--clr-border);
  padding:26px 24px;display:flex;flex-direction:column;min-height:290px;
}
.sec--green .rv{border-color:rgba(255,255,255,.16)}
.rv-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.rv-tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--clr-gold-deep);background:var(--clr-cream);padding:5px 9px;white-space:nowrap}
.rv-text{font-size:14.5px;line-height:1.65;color:var(--clr-text);flex:1;margin:0 0 18px}
.rv-doc{color:var(--clr-green);font-weight:700}
.rv-staff{color:var(--clr-gold-deep);font-weight:700}
.rv-foot{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--clr-border)}
.rv-av{width:38px;height:38px;flex-shrink:0;background:var(--clr-green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
  font-family:var(--font-display)}
.rv-who{display:flex;flex-direction:column;line-height:1.3}
.rv-name{font-weight:700;font-size:14px;color:var(--clr-ink)}
.rv-when{font-size:12px;color:var(--clr-text-light)}
.rv-g{margin-left:auto;flex-shrink:0;opacity:.85}

.rv-ctrl{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px}
.rv-btn{width:46px;height:46px;border:2px solid var(--clr-green);background:#fff;color:var(--clr-green);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.16s}
.rv-btn:hover{background:var(--clr-green);color:#fff}
.rv-btn:disabled{opacity:.3;cursor:default}
.rv-btn:disabled:hover{background:#fff;color:var(--clr-green)}
.sec--green .rv-btn{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.sec--green .rv-btn:hover{background:#fff;color:var(--clr-green);border-color:#fff}

/* marquee: two identical tracks scrolling right to left forever.
   Duplicating the row is what makes the wrap seamless. Pauses on hover and
   on keyboard focus so a review can actually be read. */
.rv-marquee{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rv-marquee-track{display:flex;width:max-content;gap:22px;padding:4px 0;
  animation:rv-scroll var(--rv-speed,80s) linear infinite}
.rv-marquee:hover .rv-marquee-track,
.rv-marquee:focus-within .rv-marquee-track{animation-play-state:paused}
.rv-marquee .rv{width:360px;flex:0 0 360px;min-height:0}
.rv-marquee .rv-text{font-size:14px;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rv-marquee + .rv-marquee{margin-top:22px}
.rv-marquee--rev .rv-marquee-track{animation-direction:reverse}
@keyframes rv-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .rv-marquee-track{animation:none}
  .rv-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:767px){
  .rv-marquee .rv{width:290px;flex:0 0 290px}
}
/* static grid for the testimonials page */
.rv-grid{columns:3;column-gap:22px}
.rv-grid .rv{break-inside:avoid;margin-bottom:22px;min-height:0;display:block}
.rv-grid .rv-foot{margin-top:16px}

/* ---------- credentials strip ---------- */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;
  border:1px solid var(--clr-border);background:#fff}
.cred{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;
  padding:30px 20px 26px;text-align:center;
  border-right:1px solid var(--clr-border);
  transition:background .18s;
}
.cred:last-child{border-right:0}
.cred:hover{background:var(--clr-cream)}
.cred-logo{height:56px;display:flex;align-items:center;justify-content:center}
.cred-logo img{max-height:56px;max-width:130px;width:auto;object-fit:contain}
.cred-name{font-size:13.5px;font-weight:700;color:var(--clr-green);line-height:1.35}
.cred-note{font-size:12.5px;color:var(--clr-text-light);line-height:1.4;margin-top:-8px}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.gal figure{margin:0;background:#fff;border:1px solid var(--clr-border);overflow:hidden;
  transition:box-shadow .2s,transform .2s}
.gal figure:hover{box-shadow:0 16px 38px rgba(31,36,32,.16);transform:translateY(-3px)}
.sec--green .gal figure{border-color:rgba(255,255,255,.16)}
.gal-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.gal-btn img{width:100%;aspect-ratio:345/285;object-fit:cover;display:block}
.gal-btn::after{
  content:"";position:absolute;inset:0;background:rgba(32,90,44,.55);
  opacity:0;transition:opacity .2s;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3Cline x1='11' y1='8' x2='11' y2='14'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}
.gal-btn:hover::after,.gal-btn:focus-visible::after{opacity:1}
.gal-meta{padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--clr-border)}
.sec--green .gal-meta{border-top-color:rgba(255,255,255,.16)}
.gal-case{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--clr-gold-deep)}
.sec--green .gal-case{color:var(--clr-gold-light)}
.gal-tag{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--clr-green);padding:4px 9px}
.sec--green .gal-tag{background:var(--clr-gold)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:1200;background:rgba(20,24,21,.94);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .22s}
.lb.active{opacity:1;visibility:visible}
.lb img{max-width:min(920px,92vw);max-height:76vh;width:auto;height:auto;
  border:5px solid #fff;background:#fff}
.lb-cap{color:#e8ece9;font-size:14.5px;text-align:center;letter-spacing:.04em}
.lb-close{position:absolute;top:20px;right:22px;background:none;border:0;color:#fff;cursor:pointer;padding:8px}
.lb-close:hover{color:var(--clr-gold-light)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.3);color:#fff;cursor:pointer;padding:14px 12px;transition:.16s}
.lb-nav:hover{background:var(--clr-gold);border-color:var(--clr-gold)}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  color:#9fada4;font-size:13px;letter-spacing:.1em}

/* ---------- FAQ ---------- */
.faq{max-width:860px;margin:0 auto}
.faq details{border-bottom:1px solid var(--clr-border);background:#fff}
.faq summary{
  padding:22px 46px 22px 4px;cursor:pointer;list-style:none;position:relative;
  font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--clr-green);line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--clr-gold);border-bottom:2.5px solid var(--clr-gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-a{padding:0 4px 24px;color:var(--clr-text-light);font-size:15.5px}
.faq .faq-a p:last-child{margin-bottom:0}

/* ---------- CTA band ---------- */
.cta-band{background:var(--clr-green);color:#fff;text-align:center}
.cta-band h2{color:#fff;max-width:22ch;margin-left:auto;margin-right:auto}
.cta-band p{color:#cfdad3;max-width:56ch;margin-left:auto;margin-right:auto;margin-bottom:28px}

/* ---------- footer ---------- */
.ftr{background:var(--clr-ink);color:#b9c0bb;font-size:15px}
.ftr .wrap{padding-top:clamp(46px,6vw,72px);padding-bottom:36px}
.ftr-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:38px}
.ftr h4{color:#fff;font-family:var(--font-body);font-size:14px;text-transform:uppercase;
  letter-spacing:.12em;font-weight:700;margin-bottom:18px}
.ftr img.ftr-logo{height:52px;width:auto;margin-bottom:16px}
.ftr p{font-size:14.5px;line-height:1.6}
.ftr-links{display:flex;flex-direction:column;gap:9px}
.ftr-links a,.ftr a{color:#b9c0bb;text-decoration:none;font-size:14.5px}
.ftr-links a:hover,.ftr a:hover{color:var(--clr-gold-light)}
.ftr-social{display:flex;gap:12px;margin-top:18px}
.ftr-social a{width:38px;height:38px;border:1px solid rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;color:#b9c0bb;transition:.16s}
.ftr-social a:hover{background:var(--clr-gold);border-color:var(--clr-gold);color:#fff}
.ftr-ci{display:flex;gap:11px;margin-bottom:14px;align-items:flex-start}
.ftr-ci svg{flex-shrink:0;margin-top:3px;color:var(--clr-gold-light)}
/* Wayfinding. Patients navigate by the bank, not the street number, so this
   is set as an instruction rather than grey fine print. */
.ftr-floor{display:block;margin-top:9px;padding:10px 12px;
  background:rgba(224,185,60,.13);border-left:3px solid var(--clr-gold-cta);
  color:#f2e6c2;font-size:13.5px;font-weight:700;line-height:1.45}
.ftr-map{margin-top:18px;border:1px solid rgba(255,255,255,.16)}
.ftr-map iframe{display:block;width:100%;height:170px;border:0;filter:grayscale(.35)}
.ftr-btm{border-top:1px solid rgba(255,255,255,.13)}
.ftr-btm .wrap{padding-top:20px;padding-bottom:20px;display:flex;flex-wrap:wrap;
  justify-content:space-between;gap:12px;font-size:13.5px}

/* ---------- sticky CTAs ---------- */
/* Desktop side rail removed. The sticky header already carries the phone
   number and the Book Appointment button at every scroll position, so a
   floating rail was a third copy of the same two actions. Markup is kept so
   it can be switched back on in one line. */
.side-cta{display:none}
.side-cta--on{
  position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:880;
  display:flex;flex-direction:column;gap:2px;
}
.side-cta a{
  writing-mode:vertical-rl;padding:20px 13px;font-size:13.5px;font-weight:700;
  letter-spacing:.08em;text-decoration:none;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;transition:.16s;
}
.side-cta .sc-phone{background:var(--clr-green);color:#fff}
.side-cta .sc-phone:hover{background:var(--clr-green-deep)}
.side-cta .sc-book{background:var(--clr-gold-cta);color:var(--clr-green-deep)}
.side-cta .sc-book:hover{background:var(--clr-gold-cta-hover)}
.side-cta svg{transform:rotate(90deg)}

/* Sticky mobile CTA. The hero already carries Call and Book buttons, so
   showing the same two again over the top of them is just repetition. The bar
   sits off-screen until the hero has scrolled past, then slides up and stays.
   Landing pages under /lp/ use .mbar instead and are always visible, because
   paid traffic should never have to scroll to find the CTA. */
.mob-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:880;
  transform:translateY(100%);transition:transform .28s ease;will-change:transform}
.mob-bar.visible{transform:translateY(0)}
.mob-bar a{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;font-weight:700;font-size:15px;text-decoration:none;
}
.mob-bar .mb-phone{background:var(--clr-green);color:#fff}
.mob-bar .mb-book{background:var(--clr-gold-cta);color:var(--clr-green-deep);font-weight:700}

/* ---------- popup form ---------- */
.pop-overlay{
  position:fixed;inset:0;background:rgba(31,36,32,.68);z-index:1100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:opacity .2s;overflow-y:auto;
}
.pop-overlay.active{opacity:1;visibility:visible}
.pop{
  background:#fff;max-width:520px;width:100%;padding:38px 34px;position:relative;
  max-height:92vh;overflow-y:auto;
}
.pop-close{position:absolute;top:14px;right:14px;background:none;border:0;cursor:pointer;
  color:var(--clr-text-light);padding:4px}
.pop-close:hover{color:var(--clr-green)}
.pop img.pop-logo{height:50px;width:auto;margin:0 auto 18px}
.pop h3{text-align:center;margin-bottom:.3em}
.pop-sub{text-align:center;font-size:15px;color:var(--clr-text-light);margin-bottom:24px}
.pop form{display:grid;gap:13px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.pop input,.pop select,.pop textarea{
  width:100%;padding:14px 15px;border:1px solid var(--clr-border);border-radius:0;
  font-family:var(--font-body);font-size:15.5px;color:var(--clr-text);background:#fff;
  transition:border-color .15s;
}
.pop input:focus,.pop select:focus,.pop textarea:focus{border-color:var(--clr-gold);outline:none}
.pop textarea{resize:vertical;min-height:84px}
.pop .btn{margin-top:4px}
.privacy-note{display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12.5px;color:var(--clr-text-light);margin:12px 0 0;text-align:center}

/* SMS opt-in (10DLC): optional, never pre-checked, consent separate from submit */
.sms-consent{display:flex;gap:11px;align-items:flex-start;padding:15px;
  background:var(--clr-cream);border:1px solid var(--clr-border);margin-top:2px}
.sms-consent input[type="checkbox"]{width:19px;height:19px;flex-shrink:0;margin:2px 0 0;
  accent-color:var(--clr-green);cursor:pointer}
.sms-consent label{font-size:12.5px;line-height:1.55;color:var(--clr-text-light);cursor:pointer}
.sms-consent a{color:var(--clr-gold-deep);text-decoration:underline}
.sms-optional{display:block;font-weight:700;color:var(--clr-green);margin-bottom:3px;font-size:12.5px}

/* ---------- prose (legal / long-form) ---------- */
.prose{max-width:800px}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose ul{margin-bottom:1.4em}

/* ---------- utilities ---------- */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.sec-head{margin-bottom:clamp(34px,4vw,52px)}
.sec-head.center{max-width:760px;margin-left:auto;margin-right:auto}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1320px){
  .nav-links{gap:18px}
  .nav-links > a,.nav-dd > a{font-size:14.5px}
  .hdr .wrap{gap:20px}
}
@media (max-width:1180px){
  .nav-links{gap:14px}
  .nav-links > a,.nav-dd > a{font-size:14px}
  .hdr-phone{font-size:15px}
  .brand img{height:48px}
  .hdr-cta .btn{padding:14px 18px;font-size:14px}
}

@media (max-width:1023px){
  .nav,.hdr-cta{display:none}
  .hamburger{display:flex}
  .side-cta{display:none}
  .hdr .wrap{padding-top:10px;padding-bottom:10px}
  /* full-width line under the logo rather than squeezed beside it */
  .hdr .wrap{flex-wrap:wrap;row-gap:0}
  .brand{margin-right:0}
  .hdr-mobile-trust{
    display:flex;align-items:center;gap:8px;order:3;width:100%;
    padding:7px 0 3px;margin-top:4px;
    border-top:1px solid var(--clr-border);
    font-size:12.5px;line-height:1;
  }
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:repeat(2,1fr);gap:32px}
}

@media (max-width:1023px){
  .rv-grid{columns:2}
}@media (max-width:860px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:30px}
  .split--flip .split-media{order:0}
  .topbar .wrap{gap:16px;font-size:12.5px}
}

@media (max-width:860px){
  .phero{min-height:clamp(260px,44vw,340px)}
  .phero-bg::after{
    background:linear-gradient(180deg,rgba(20,48,26,.70) 0%,rgba(23,66,31,.80) 45%,rgba(23,66,31,.88) 100%);
  }
  /* copy spans the full width on small screens, so switch to a vertical scrim */
  .hero-bg::after{
    background:
      linear-gradient(180deg,rgba(13,26,16,.58) 0%,rgba(15,32,19,.70) 42%,rgba(17,38,22,.78) 100%);
  }
}
@media (max-width:767px){
  body{font-size:16px;padding-bottom:56px}
  .mob-bar{display:flex}
  .topbar{display:none}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr;gap:30px}
  .form-row{grid-template-columns:1fr}
  .hero-trust{gap:14px 22px}
  .pop{padding:30px 22px}
  .faq summary{font-size:1.08rem;padding-right:38px}
  .btn{width:100%}
  .btn-row{flex-direction:column}
  .gal{grid-template-columns:repeat(2,1fr);gap:12px}
  .rv-grid{columns:1}
  .rv-track{grid-auto-columns:minmax(85vw,1fr);gap:14px}
  .rating-div{display:none}
  .rating-bar{gap:18px;padding:22px}
  .gal-meta{padding:10px;flex-direction:column;align-items:flex-start;gap:5px}
  .creds{grid-template-columns:repeat(2,1fr)}
  .cred{border-right:0;border-bottom:1px solid var(--clr-border)}
  .cred:nth-child(odd){border-right:1px solid var(--clr-border)}
  .lb-nav{padding:10px 8px}
  .lb-prev{left:6px}
  .lb-next{right:6px}
}

@media (max-width:420px){
  .gal{grid-template-columns:1fr}
  .creds{grid-template-columns:1fr}
  .cred{border-right:0!important}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
  .card:hover{transform:none}
}

@media print{
  .topbar,.hdr,.drawer,.drawer-overlay,.side-cta,.mob-bar,.pop-overlay,.cta-band{display:none!important}
  body{padding-bottom:0}
}

/* ---------- Footer credit signature (RBR Growth Consulting) ---------- */
.foot__credit {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(128,128,128,.25);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: inherit;
  text-align: center;
}
.foot__credit a {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  color: inherit;
  opacity: 0.75;
  text-decoration: none;
  transition: opacity 180ms ease;
}
.foot__credit a:hover,
.foot__credit a:focus-visible { opacity: 1; }
.foot__credit img {
  height: 26px;
  width: auto;
  display: block;
  filter: opacity(0.95) contrast(1.08) saturate(1.05);
  transition: filter 420ms ease, transform 420ms ease;
}
.foot__credit a:hover img {
  filter: opacity(1) contrast(1.1) saturate(1.15)
          drop-shadow(0 2px 8px rgba(220, 170, 90, 0.45));
  transform: translateY(-1px);
}
.foot__credit strong { font-weight: 600; color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .foot__credit a, .foot__credit img { transition: none; }
}
/* ---------- end RBR footer credit ---------- */