/* THEME 7 — PREMIUM PHOTO
   Clone of the reference screenshot: white nav with two-line logo, split hero
   (dark headline / teal accent line, icon trust-stat row, rounded photo card
   with a video badge), a feature strip that floats over the hero's bottom
   edge, and outlined (not solid) service icon squares.
   Ink/black carried over from the Theme 1 & 5 contrast fix — teal-on-teal
   still reads flat, black is the clinic's actual second logo color. */

:root{
  --brand:#0E7A88;
  --brand-dark:#0B5F6B;
  --accent:#1EAEC0;
  --accent-dark:#0E7A88;
  --text:#16232A;
  --text-soft:#5B6B70;
  --bg:#ffffff;
  --bg-soft:#F6FAFB;
  --bg-tint:#E3F1F3;
  --line:#E7EEF0;
  --ink:#101A1C;
  --ink-2:#000000;
}

/* ---- White nav, two-line logo ---- */
header{background:#fff;border-bottom:1px solid var(--line)}
/* Real client logo as a single image — the wordmark, rule and tagline are all
   inside the artwork, so the old .mark + .logo-text lockup is gone. gap:0 so
   base.css's 11px gap doesn't add phantom space beside a lone image. */
.logo{color:var(--brand);align-items:center;gap:0}
.logo-img{height:56px;width:auto;display:block}
.navlinks{color:#55676A;font-weight:600}
.navlinks a:hover{color:var(--brand)}
.navlinks a.current{color:var(--brand)}
.navlinks a.current::after{width:100%;background:var(--accent)}
/* base.css assumes a dark (teal) header, so its dropdown hover/open state
   turns the label white — invisible against this theme's white header.
   Desktop only: below 900px the mobile accordion (base.css) takes over the
   header entirely and needs the white label back, so this must not win there. */
@media(min-width:901px){
  .nav-drop:hover .nav-drop-btn,.nav-drop.open .nav-drop-btn,.nav-drop-btn.current-parent{color:var(--brand)}
}
.nav-phone{color:var(--brand)}
.burger{background:var(--brand)}

/* ---- Hero: white/near-white field, dark headline, teal accent line ---- */
.hero{
  color:var(--text);
  background:linear-gradient(115deg,#FFFFFF 0%,#FFFFFF 55%,#EAF6F8 100%);
  overflow:hidden;
}
/* Three children in DOM order: copy, photo, stats. The stats sit AFTER the
   photo in the markup so that on a phone — where this collapses to one column —
   the trust numbers land below the image, which is what was asked for.
   On desktop they are placed back into the left column under the copy, and the
   photo spans both rows so it stays optically centred against the whole block. */
.hero .hero-inner.hero-split{
  display:grid;grid-template-columns:1.02fr .98fr;grid-template-rows:auto auto;
  gap:0 56px;align-items:center;
  padding:72px 22px 36px;position:relative;z-index:2;
}
.hero-copy{min-width:0;grid-column:1;grid-row:1}
.hero .hero-inner.hero-split > .hero-stats{grid-column:1;grid-row:2}
.hero-photo{grid-column:2;grid-row:1 / span 2;align-self:center}
.hero .eyebrow{display:block;margin-bottom:16px}
/* The copy column measures ~570px at 1440. Capped at 36px so BOTH lines of
   "Transform Your Smiles with / Advanced Dental Care" hold without wrapping —
   at 40px line one spilled and stranded "with" on its own row. */
.hero h1{color:var(--text);max-width:none;font-size:clamp(28px,3.1vw,36px);line-height:1.18;letter-spacing:-.02em}
.hero h1 span{color:var(--accent)}
.hero-rule{display:block;width:46px;height:3px;background:var(--accent);border-radius:2px;margin:20px 0 22px}
.hero .lead{color:var(--text-soft);max-width:480px;font-size:16.5px}
.hero-cta{margin-top:26px}

/* BUGFIX — one primary colour, everywhere. Scoping the dark teal to .hero-cta
   left the nav and form buttons on base's light --accent (#1EAEC0), so the page
   had two different "primary" buttons. #1EAEC0 also gives white text only
   2.67:1 — the main CTA was the lowest-contrast text on the page. --brand
   (#0E7A88) clears 4.5:1 and unifies them. */
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-outline:hover{background:var(--brand);color:#fff}
/* Eyebrows: --accent on white is 2.67:1, fails AA. --brand clears it. */
.eyebrow{color:var(--brand)}

/* ---- Icon trust-stat row (replaces stars+text hero-trust) ---- */
.hero-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:30px}
.hstat{display:flex;align-items:center;gap:10px}
.hstat svg{width:22px;height:22px;color:var(--accent);flex:0 0 auto}
.hstat b{display:block;font-size:15px;font-weight:800;color:var(--text);line-height:1.15}
.hstat small{display:block;color:var(--text-soft);font-size:11.5px;font-weight:600;line-height:1.2}

/* ---- Photo card + decorative video badge ---- */
.hero-photo{position:relative;height:460px;width:100%;border-radius:18px;overflow:hidden;box-shadow:0 30px 64px -28px rgba(11,95,107,.4)}
.hero-photo img, .hero-slideshow{width:100%;height:100%;object-fit:cover;display:block}
.video-badge{
  position:absolute;right:16px;bottom:16px;z-index:2;
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  padding:8px 16px 8px 8px;border-radius:999px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.4);
  font-size:12.5px;font-weight:700;color:var(--brand);white-space:nowrap;
}
.video-badge .play{width:26px;height:26px;border-radius:50%;background:var(--brand);display:grid;place-items:center;color:#fff;flex:0 0 26px}
.video-badge .play svg{width:11px;height:11px}

/* ---- Feature strip: floats over the hero's bottom edge ----
   margin-bottom clears the next section; without it the strip sits flush
   against the black trust band and reads as a rendering bug. */
.feature-strip{margin:-44px auto 52px;max-width:1040px;position:relative;z-index:5;padding:0 22px}
.feature-strip .inner{
  background:linear-gradient(100deg,var(--brand),var(--accent));
  border-radius:18px;box-shadow:0 28px 60px -24px rgba(11,95,107,.45);
  display:grid;grid-template-columns:repeat(4,1fr);padding:26px 8px;
}
.fstrip-item{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:#fff;padding:6px 12px;border-right:1px solid rgba(255,255,255,.2)}
.fstrip-item:last-child{border-right:0}
.fstrip-item svg{width:24px;height:24px}
.fstrip-item span{font-size:12.5px;font-weight:700;line-height:1.3}

/* ---- Heading hierarchy: DARK section headings, teal only as accent ----
   base.css paints every h1-h4 teal. On a near-white page that's the flat,
   washed-out look — teal heading on white tint has nowhere near the presence
   of near-black. The reference puts section headings in dark charcoal and
   keeps teal for eyebrows, card titles and links. That contrast IS the
   premium read. */
h1,h2{color:var(--text)}
.section-head h2{color:var(--text)}
.band h2{color:var(--text)}
form h3{color:var(--text)}
.hero h1 span{color:var(--accent)}         /* two-tone headline, unchanged */
/* Card-level titles stay teal — that's the reference's hierarchy */
.svc h3,.doc-card h3,.rev .who b{color:var(--brand)}

/* ---- Doctors: teal band + breakout cards ----
   The section head sits on a deep-teal band with generous bottom padding, and
   the card row is pulled back up over it so the photos straddle the teal/white
   boundary. Both halves size to their own content, so the overlap holds at any
   width rather than depending on a hard-coded band height.
   Contrast: #fff on --brand-dark = 7.3:1, #fff on --brand (plate) = 5.1:1. */
#doctors{background:var(--bg);padding-bottom:96px}
.doc-band{background:var(--brand-dark);padding:82px 0 190px}
.doc-band .section-head{margin-bottom:0}
.doc-band .section-head h2{color:#fff}
.doc-band .section-head p{color:rgba(255,255,255,.7)}
.doc-band .eyebrow{color:#8FE3EE}
.doc-grid-wrap{position:relative;z-index:2;margin-top:-152px}

.doc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;max-width:820px;margin:0 auto}
/* base.css declares .doc-card as a flex row (avatar | text). This markup is a
   vertical stack, so the row layout has to be overridden explicitly. */
.doc-card{
  display:flex;flex-direction:column;align-items:stretch;text-align:center;
  background:transparent;border:none;box-shadow:none;padding:0;
  transition:.3s ease;
}
.doc-card:hover{transform:translateY(-5px)}
/* overflow visible so the name plate can hang past the photo's corner */
.doc-photo-frame{
  position:relative;width:100%;aspect-ratio:4/5;
  border-radius:18px;overflow:visible;margin-bottom:58px;
}
.doc-photo-frame img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:18px;box-shadow:0 26px 58px -22px rgba(16,35,42,.5);
}
/* Initials stand-in — never substitute a stock photo of a stranger for a named
   real person. Dr. Sanjana's real photo is still a pending client asset. */
.doc-photo-frame .doc-initials{
  width:100%;height:100%;display:grid;place-items:center;border-radius:18px;
  background:linear-gradient(150deg,var(--bg-tint) 0%,rgba(30,174,192,.26) 100%);
  border:1px dashed rgba(30,174,192,.55);
  color:var(--brand);font-weight:800;font-size:60px;letter-spacing:.02em;
  box-shadow:0 26px 58px -22px rgba(16,35,42,.28);
}
.doc-plate{
  position:absolute;left:-10px;right:22px;bottom:-38px;
  background:var(--brand);color:#fff;text-align:left;
  padding:14px 19px 16px;border-radius:14px;
  box-shadow:0 20px 42px -18px rgba(16,35,42,.5);
}
.doc-plate h3{font-size:18.5px;color:#fff;margin:7px 0 3px;letter-spacing:-.01em}
.doc-plate small{display:block;font-size:11.5px;color:rgba(255,255,255,.8);line-height:1.35}
.doc-specialty{
  display:inline-block;
  background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.28);
  font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}

/* ---- Trust band: light, not dark. The obvious move on a teal brand is a dark
   teal strip -> white. Contrast here comes from big near-black numerals on
   white with teal icons, which is the actual premium move in a light layout. */
.trust-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-band .section-head h2{color:var(--text)}
.trust-band .section-head p{color:var(--text-soft)}
.stat{position:relative}
.stat .stat-icon{color:var(--accent)}
.stat b{color:var(--text)}
.stat small{color:var(--text-soft)}
/* hairline dividers give the row structure without adding another colour block */
.stats .stat + .stat::before{
  content:'';position:absolute;left:-12px;top:12%;bottom:12%;width:1px;background:var(--line);
}

/* ---- NO dark cards. All-light, like the reference ----
   base.css paints .svc.feature and .rev.dark as dark blocks. Black/near-black
   panels in this light layout read heavy and cheap. The featured card earns its
   emphasis from a teal border + teal tag instead of a dark fill. */
.svc.feature{background:#fff;border:2px solid var(--accent);color:var(--text)}
.svc.feature h3{color:var(--brand)}
.svc.feature p{color:var(--text-soft)}
.svc.feature .more{color:var(--accent)}
.svc.feature .ico-sq{background:var(--bg-tint);border-color:var(--bg-tint)}
.svc.feature .ico-sq svg{stroke:var(--brand)}
.svc.feature .tag{background:var(--accent);color:#fff}

.rev.dark{background:#fff;border:1px solid var(--line);color:var(--text)}
.rev.dark .star-row{color:var(--accent)}
.rev.dark p{color:var(--text);font-style:italic}
.rev.dark .who b{color:var(--brand)}
.rev.dark .who small{color:var(--text-mute)}
.rev.dark .av{background:var(--brand);color:#fff}

/* Footer stays brand teal (base.css default) — no black slab */

@media(max-width:900px){
  /* ---- Swipe carousels on phone ----
     Two doctors and three reviews stacked vertically cost roughly two screens
     of scrolling to get past. Side-by-side with scroll-snap, the next card is
     one thumb-swipe away and the peeking edge of card 2 is what signals there
     IS a card 2. No negative margins here — those are the classic cause of a
     page-wide horizontal drag. */
  .doc-grid,.rev-grid{
    display:flex;gap:16px;overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scroll-padding:0;padding-bottom:10px;
    scrollbar-width:none;-ms-overflow-style:none;
  }
  .doc-grid::-webkit-scrollbar,.rev-grid::-webkit-scrollbar{display:none}
  /* Exactly one card per screen — no peeking neighbour. 100% of the track plus
     the flex gap means the next card sits fully offscreen until swiped. */
  .doc-grid > *,.rev-grid > *{scroll-snap-align:center;flex:0 0 100%}
  /* Hover-lift belongs to a mouse; on a swipe it just fights the gesture. */
  .doc-card:hover{transform:none}
  .doc-band{padding:64px 0 170px}
  .doc-grid-wrap{margin-top:-140px}
  #doctors{padding-bottom:64px}

  /* Single column: drop the explicit placement so the three children fall in
     DOM order — copy, photo, then the trust stats under the image. */
  .hero .hero-inner.hero-split{grid-template-columns:1fr;grid-template-rows:none;gap:34px;padding:52px 22px 28px}
  .hero-copy,.hero-photo,.hero .hero-inner.hero-split > .hero-stats{grid-column:1;grid-row:auto}
  .hero-stats{margin-top:0}
  .hero-photo, .hero-photo img, .hero-slideshow{height:320px;min-height:0}
  .hero .lead{max-width:none}
  /* The strip floats UP over the hero on desktop. On a phone the trust stats
     are now the last thing in the hero, so that overlap would sit on top of
     them — drop it to a normal gap. */
  .feature-strip{margin-top:14px}
  .feature-strip .inner{grid-template-columns:repeat(2,1fr);row-gap:20px}
  .fstrip-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:16px}
  .fstrip-item:nth-child(2n){border-right:0}
  .fstrip-item:nth-last-child(-n+2){border-bottom:0;padding-bottom:6px}
}

@media(max-width:700px){
  /* Logo shrinks so the header keeps room for the burger without crowding. */
  .logo-img{height:44px}
  /* base.css turns the hero into a photo band on phones via ::before/::after.
     This theme has a REAL .hero-photo element, so those hooks double the image
     and drop the headline + lead on top of it (lead becomes unreadable).
     Switch them off — same fix Theme 5 needs for the same reason. */
  .hero{background:linear-gradient(168deg,#FFFFFF 0%,#F4FAFB 55%,#EAF6F8 100%)}
  .hero::before,.hero::after{display:none;content:none}
  .hero .hero-inner.hero-split{padding:34px 20px 0}
  .hero h1{font-size:clamp(28px,7.4vw,34px)}
  .hero .lead{font-size:15.5px}
  .hero-photo, .hero-photo img, .hero-slideshow{height:250px;min-height:0}
  .video-badge span{display:none}
  .video-badge{padding:10px;gap:0}
  .hero-stats{gap:16px 22px}
  .hstat b{font-size:14px}
}

@media(max-width:480px){
  /* Hold the trust strip at 2x2 rather than collapsing to a single column —
     four stacked rows pushed the services section most of a screen further
     down, which is the part that actually earns the tap. */
  .feature-strip .inner{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px;padding:20px 4px}
  .fstrip-item{padding:4px 8px;border-right:0;border-bottom:0}
  .fstrip-item:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:14px}
  .fstrip-item span{font-size:11px}

  /* Thumb-sized targets. Anything tappable clears 44px so it is reachable
     one-handed without mis-hits. */
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .navlinks.open a{padding:6px 0;min-height:44px;display:flex;align-items:center}
  .mobile-bar .btn{min-height:48px;flex:1}
  .float a{width:52px;height:52px}

  /* Long addresses and hours must not force a sideways drag. */
  .info-row span,.faq-q,.rev p{overflow-wrap:anywhere}
}

/* ---------- FAQ accordion (native <details>, closed by default) ---------- */
.faq-item{background:#fff;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden}
.faq-item summary{
  padding:22px 24px;font-size:17px;color:var(--brand);font-weight:700;
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-size:24px;font-weight:400;color:var(--brand);
  flex:0 0 auto;line-height:1;transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{color:var(--text-soft);font-size:14.5px;line-height:1.65;margin:0;padding:0 24px 22px}

/* ============================================================================
   MULTI-PAGE COMPONENTS — added for the About and Treatments pages
   ========================================================================= */

/* Centred CTA under a card grid ("View all 15 treatments") */
.svc-all{display:flex;justify-content:center;margin-top:38px}

/* Google verification block under the testimonials. Kept visually separate from
   the testimonial cards on purpose: the 4.8/90 aggregate IS from Google, the
   testimonials above are supplied by the clinic. Merging them would misstate
   where the quotes came from. */
.google-verify{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;
  max-width:760px;margin:34px auto 0;padding:20px 26px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 40px -26px rgba(16,35,42,.3);
}
.gv-score{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.gv-score b{font-size:34px;font-weight:800;color:var(--brand);line-height:1}
.gv-score span{color:#F5B301;font-size:15px;letter-spacing:2px}
.google-verify p{margin:0;font-size:13.5px;color:var(--text-soft);line-height:1.6;flex:1 1 300px}
.google-verify p b{color:var(--text)}

/* ---- Interior page banner (About / Treatments) ---- */
.page-hero{
  /* WebP, not the original PNG: this is a soft teal gradient, which is the
     worst case for PNG (1021KB at 2243x701) and the best case for WebP (8KB).
     Same image, 99% lighter, on every interior page that doesn't override it. */
  background-image:url('images/page-hero-bg.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--brand-dark);
  color:#fff;padding:74px 0 82px;position:relative;overflow:hidden;
}
.page-hero::after{
  content:'';position:absolute;right:-140px;top:-160px;width:520px;height:520px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);
  pointer-events:none;
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .eyebrow{color:#9BE7F2}
.page-hero h1{color:#fff;font-size:clamp(29px,4vw,44px);line-height:1.14;letter-spacing:-.02em;margin:14px 0 0;max-width:760px}
.page-hero p{color:rgba(255,255,255,.84);font-size:16.5px;max-width:620px;margin:16px 0 0;line-height:1.65}
.crumb{display:flex;gap:9px;align-items:center;font-size:12.5px;color:rgba(255,255,255,.7);margin-bottom:6px}
.crumb a{color:rgba(255,255,255,.9);font-weight:600}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb span:last-child{color:#fff;font-weight:600}

/* ---- Prose blocks (About story / mission) ---- */
.prose{max-width:760px}
.prose p{color:var(--text-soft);font-size:16px;line-height:1.8;margin:0 0 18px}
.prose p strong{color:var(--text)}
.lead-para{font-size:18px;color:var(--text);line-height:1.75}
.pull-motto{
  margin:30px 0 0;padding:22px 26px;border-left:3px solid var(--accent);
  background:var(--bg-tint);border-radius:0 12px 12px 0;
}
.pull-motto b{display:block;font-size:19px;color:var(--brand);font-style:italic;font-weight:700}

/* ---- Two-column split with sticky media ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center}

/* ---- Credential timeline (doctor bios on About) ---- */
.doc-detail{display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px;align-items:start}
.doc-detail + .doc-detail{margin-top:68px;padding-top:68px;border-top:1px solid var(--line)}
.doc-detail-photo img,.doc-detail-photo .doc-initials{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px;display:block;
  box-shadow:0 24px 54px -24px rgba(16,35,42,.45);
}
.doc-detail-photo .doc-initials{
  display:grid;place-items:center;font-size:64px;font-weight:800;color:var(--brand);
  background:linear-gradient(150deg,var(--bg-tint) 0%,rgba(30,174,192,.26) 100%);
  border:1px dashed rgba(30,174,192,.55);
}
.doc-detail h3{font-size:25px;color:var(--brand);margin:0 0 5px}
.doc-detail .role{
  display:inline-block;background:var(--bg-tint);color:var(--brand);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;margin-bottom:16px;
}
.cv{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:0}
.cv li{
  position:relative;padding:0 0 20px 30px;
  border-left:2px solid var(--line);
}
.cv li:last-child{border-left-color:transparent;padding-bottom:0}
.cv li::before{
  content:'';position:absolute;left:-7px;top:4px;width:12px;height:12px;
  border-radius:50%;background:#fff;border:3px solid var(--accent);
}
.cv b{display:block;font-size:14.5px;color:var(--text);line-height:1.4}
.cv span{display:block;font-size:13px;color:var(--text-soft);margin-top:3px;line-height:1.55}
.cv .yr{
  display:inline-block;font-size:11px;font-weight:800;color:var(--brand);
  background:var(--bg-tint);padding:2px 9px;border-radius:999px;margin-bottom:5px;
}

/* ---- Technology grid ---- */
.tech-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tech-item{
  display:flex;gap:16px;align-items:flex-start;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px;
  transition:.3s ease;
}
.tech-item:hover{transform:translateY(-4px);box-shadow:0 20px 44px -26px rgba(16,35,42,.34);border-color:rgba(30,174,192,.5)}
.tech-item .t-ico{
  flex:0 0 44px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--bg-tint);
}
.tech-item .t-ico svg{width:22px;height:22px;stroke:var(--brand)}
.tech-item b{display:block;font-size:15px;color:var(--text);margin-bottom:5px}
.tech-item span{display:block;font-size:13.2px;color:var(--text-soft);line-height:1.6}

/* ---- Sterilisation band ---- */
.steril{background:var(--bg-tint)}
.steril-checks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.steril-checks li{display:flex;gap:12px;align-items:flex-start}
.steril-checks .sc{
  flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--brand);
  display:grid;place-items:center;margin-top:1px;
}
.steril-checks .sc svg{width:12px;height:12px;stroke:#fff}
.steril-checks b{display:block;font-size:14.5px;color:var(--text)}
.steril-checks span{display:block;font-size:13px;color:var(--text-soft);margin-top:2px;line-height:1.55}

/* ---- Treatments page: grouped rows ---- */
.tx-group + .tx-group{margin-top:56px}
.tx-group-head{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.tx-group-head h2{font-size:23px;margin:0;color:var(--brand)}
.tx-group-head .line{flex:1;height:1px;background:var(--line)}
.tx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tx{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;
  transition:.3s ease;scroll-margin-top:90px;
  display:flex;flex-direction:column;height:100%;
}
.tx:hover{transform:translateY(-5px);box-shadow:0 22px 48px -26px rgba(16,35,42,.32);border-color:rgba(30,174,192,.55)}
.tx.tx-lead{border:2px solid var(--accent);background:linear-gradient(160deg,#fff 0%,var(--bg-tint) 100%)}
.tx .tx-ico{
  width:46px;height:46px;border-radius:12px;background:var(--bg-tint);
  display:grid;place-items:center;margin-bottom:16px;
}
.tx .tx-ico svg{width:23px;height:23px;stroke:var(--brand)}
.tx h3{font-size:17.5px;color:var(--text);margin:0 0 9px}
.tx p{font-size:13.8px;color:var(--text-soft);line-height:1.65;margin:0}
.tx .tx-tag{
  display:inline-block;background:var(--brand);color:#fff;font-size:9.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:12px;
}

/* ---- Treatments v2: flat photo-card grid ---- */
.tx2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px}
.tx2-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;transition:.3s ease;scroll-margin-top:90px;
}
.tx2-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -26px rgba(16,35,42,.32)}
.tx2-photo{
  position:relative;height:180px;
  background:linear-gradient(140deg,var(--brand-dark) 0%,var(--brand) 100%);
  overflow:hidden;
}
.tx2-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tx2-photo .tx2-cat{
  position:absolute;left:18px;top:16px;right:18px;color:#fff;font-weight:800;font-size:16px;line-height:1.25;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.tx2-photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,38,42,.55) 0%,rgba(8,38,42,0) 45%);
  pointer-events:none;
}
.tx2-photo.tx2-placeholder{display:grid;place-items:center}
.tx2-photo.tx2-placeholder::after{display:none}
.tx2-photo.tx2-placeholder svg{width:44px;height:44px;stroke:rgba(255,255,255,.85)}
.tx2-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.tx2-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.tx2-body h3{font-size:18px;color:var(--text);margin:0 0 8px}
.tx2-body p{font-size:13.5px;color:var(--text-soft);line-height:1.6;margin:0 0 14px}
.tx2-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.tx2-pill{font-size:11px;font-weight:700;color:var(--brand);background:var(--bg-tint);padding:4px 10px;border-radius:999px}
.tx2-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.tx2-doc b{display:block;font-size:12.5px;color:var(--text)}
.tx2-doc span{display:block;font-size:10.5px;color:var(--text-soft)}
.tx2-arrow{
  width:34px;height:34px;border-radius:50%;background:var(--brand-dark);color:#fff;
  display:grid;place-items:center;flex:0 0 34px;transition:.2s;
}
.tx2-arrow svg{width:16px;height:16px}
.tx2-card:hover .tx2-arrow{background:var(--brand)}

/* ---- Responsive ---- */
@media(max-width:900px){
  .split,.doc-detail,.tech-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .doc-detail-photo{max-width:280px}
  .tx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-hero{padding:52px 0 58px}
  .google-verify{gap:14px;padding:18px 20px}
}
@media(max-width:640px){
  .tx-grid{grid-template-columns:minmax(0,1fr)}
  .prose p{font-size:15.2px}
  .lead-para{font-size:16.5px}
  .doc-detail + .doc-detail{margin-top:44px;padding-top:44px}
}

/* ---- Map band (home, directly above the footer) ----
   Two columns on desktop: live map left, "how to get here" panel right. The map
   is a real element rather than a background so it stays interactive, and the
   panel sits on the tint so the band reads as one unit against the white above
   and the teal footer below. */
.map-band{
  display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--bg-tint);padding:0;align-items:stretch;
}
.map-embed{position:relative;min-height:420px}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:saturate(.92)}
.map-panel{display:flex;align-items:center;padding:56px 44px}
.map-panel-inner{max-width:460px}
.map-panel h2{margin:12px 0 12px;font-size:clamp(23px,2.4vw,30px)}
.map-panel > .map-panel-inner > p{color:var(--text-soft);font-size:15.5px;line-height:1.7;margin:0}
.map-marks{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:15px}
.map-marks li{display:flex;gap:13px;align-items:flex-start}
.map-marks .mk{
  flex:0 0 30px;width:30px;height:30px;border-radius:9px;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;margin-top:1px;
}
.map-marks b{display:block;font-size:14.5px;color:var(--text);line-height:1.35}
.map-marks span:not(.mk){display:block;font-size:12.8px;color:var(--text-soft);margin-top:2px;line-height:1.5}
.map-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

@media(max-width:900px){
  /* Map on top, directions below — on a phone you want to see WHERE before
     you read HOW. Fixed height because the grid no longer stretches it. */
  .map-band{grid-template-columns:minmax(0,1fr)}
  .map-embed{min-height:0;height:300px}
  .map-panel{padding:38px 22px 44px}
  .map-panel-inner{max-width:none}
}

/* ---------- Before/After stacked teaser (homepage) ----------
   Text sits above the slider, so the image is shorter than the old
   side-by-side .ph-430 to keep the section from dominating the page. */
.compare.ba-stack{height:360px}

/* Wrapper reserves room for the pill, which hangs half below the image. */
.ba-wrap{position:relative;max-width:760px;margin:0 auto 52px}

/* width:max-content is load-bearing. With only left:50% the pill's
   containing width runs from the midpoint to the right edge, so on a phone
   it collapsed to ~50% and wrapped the caption onto six lines. */
.ba-pill{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translate(-50%,50%);
  width:max-content;
  max-width:min(92%,560px);
  background:#fff;
  border-radius:20px;
  box-shadow:0 12px 30px rgba(11,95,107,.22);
  padding:14px 26px;
  text-align:center;
  z-index:2
}
.ba-pill div{font-size:14px;line-height:1.6;color:var(--text-soft)}
.ba-pill b{color:var(--brand)}

@media(max-width:700px){
  .compare.ba-stack{height:260px}
  .ba-wrap{margin-bottom:64px}
  .ba-pill{padding:10px 16px;border-radius:16px;max-width:94%}
  .ba-pill div{font-size:12.5px;line-height:1.45}
}

/* ---------- Appointment form: honeypot, status line, success panel ---------- */

/* Spam trap. display:none is what Web3Forms' own docs specify — the field must
   stay in the submitted payload, it just must never be visible or focusable. */
.botcheck{display:none !important}

/* :empty keeps the line from reserving vertical space before it ever speaks. */
.form-status{margin:14px 0 0;font-size:13.5px;line-height:1.6;text-align:center}
.form-status:empty{display:none}
.form-status.is-pending{color:var(--text-soft)}
.form-status.is-error{color:#B3261E}          /* 5.9:1 on white, clears AA */
.form-status a{color:var(--brand);font-weight:700;text-decoration:underline}

.form-done{text-align:center;padding:6px 0 4px}
.form-done-tick{
  width:54px;height:54px;margin:0 auto 16px;border-radius:50%;
  background:var(--bg-tint);color:var(--brand);
  display:grid;place-items:center;font-size:26px;font-weight:800;line-height:1;
}
.form-done h3{margin:0 0 10px;font-size:21px}
.form-done p{color:var(--text-soft);font-size:14.5px;line-height:1.65;margin:0 0 12px}
.form-done-hint{font-size:13.5px}
/* base.css stretches any .btn inside a form to full width; here it should read
   as a considered next step, not a second submit button. */
.form-done .btn{width:auto;margin-top:4px}