/* Consolidated :root — single source of truth for design tokens */
:root{
  --bg:#f7f5f0;
  --surface:#ffffff;
  --ink:#0b3a4f;
  --muted:#5b6b75;
  --line:#d7dbe0;
  --brand:#0f4c6a;
  --brand2:#123b4f;
  --panel:#f1ede6;
  --radius:18px;
  --shadow: 0 14px 35px rgba(11,31,43,.10);
  --max: 1200px;
  --font:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; max-width:100%}
/*
  Avoid globally hiding horizontal overflow.
  On Mobile Safari, that can clip the right edge (e.g., the hamburger button)
  instead of letting the layout reflow. We fix the few elements that were
  causing overflow at mobile breakpoints instead.
*/
body{overflow-x:hidden}
body{
  margin:0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,var(--bg) 0%, #ffffff 55%, var(--bg) 100%);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:var(--max); margin:0 auto; padding:0 20px}

/* =========================
   Breadcrumbs (visible)
========================= */
.breadcrumbs{
  max-width:1220px;
  margin:16px auto 0;
  padding:0 24px;
  font-size:14px;
  line-height:1.35;
  color:var(--muted, #5c6a75);
}
.breadcrumbs ol{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}
.breadcrumbs li{display:flex; align-items:center;}
.breadcrumbs li + li::before{
  content:"/";
  opacity:.6;
  margin:0 10px;
}
.breadcrumbs a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.breadcrumbs [aria-current="page"]{font-weight:600;}

@media (max-width: 900px){
  /* Positioning context so .breadcrumbs--photo can sit over the hero */
  main{position:relative;}

  .breadcrumbs{padding:0 16px; margin-top:4px; margin-bottom:0;}

  /* Homepage only: hero starts flush with the sticky header, no gap.
     .hero--photo class is on the homepage <section> only.           */
  main > .hero--photo{
    margin-top:0 !important;
    padding-top:0 !important;
    padding-bottom:0;
  }

  /* Homepage only: breadcrumb floats over the building photo.
     .breadcrumbs--photo class is on the homepage <nav> only.  */
  .breadcrumbs--photo{
    position:absolute;
    top:8px; left:0; right:0;
    z-index:20;
    margin:0; padding:0 16px;
    pointer-events:none;
  }
  .breadcrumbs--photo [aria-current="page"],
  .breadcrumbs--photo a{
    color:rgba(255,255,255,0.92);
    text-shadow:0 1px 4px rgba(0,0,0,0.55);
    pointer-events:auto;
  }
}

.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{left:16px; top:16px; width:auto; height:auto; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); z-index:9999}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(140%) blur(10px);
  background:rgba(251,250,247,.8);
  border-bottom:1px solid var(--line);
}
header .container{position:relative;}
.navbar{display:flex; align-items:center; justify-content:flex-start; gap:18px; padding:14px 0}
.navbar > .cta{margin-left:auto}
.navbar > .navCTA{margin-left:auto; white-space:nowrap}
.navbar .navToggle{margin-left:10px}

.brand{display:flex; align-items:center; gap:12px; min-width:220px}
.brand img{height:48px; width:auto}
.brand .wordmark{display:flex; flex-direction:column; line-height:1}
.brand .wordmark strong{letter-spacing:.10em; text-transform:uppercase; font-weight:700; font-size:14px; color:var(--brand2)}
.brand .wordmark span{letter-spacing:.20em; text-transform:uppercase; font-weight:500; font-size:11px; color:var(--muted); margin-top:2px}

.navlinks{display:flex; align-items:center; gap:16px}
.navlinks a{
  font-weight:600;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand2);
  padding:10px 10px;
  border-radius:12px;
}
.navlinks a:hover{background:rgba(15,76,106,.08)}
.navlinks a[aria-current="page"]{background:rgba(15,76,106,.12)}

.cta{display:flex; align-items:center; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  padding:12px 16px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  border:1px solid var(--brand2);
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn.primary{background:var(--brand2); color:#fff}
.btn.primary:hover{transform:translateY(-1px); background:var(--brand)}
.btn.ghost{background:transparent; color:var(--brand2)}
.btn.ghost:hover{transform:translateY(-1px); background:rgba(15,76,106,.08)}

.burger{display:none; border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:10px 12px; box-shadow:0 4px 10px rgba(0,0,0,.05)}
.burger span{display:block; width:20px; height:2px; background:var(--brand2); margin:4px 0}

@media (max-width: 900px){
  .navlinks{display:none}
  .burger{display:inline-block}
  header .cta{gap:8px}
  header .brand{min-width:0}
  /* Let header content reflow instead of being clipped */
  header .navbar{gap:12px}
}
@media (max-width: 480px){
  header .brand img{height:40px}
  .container{padding:0 16px}
  /* Stack header rows on small screens so the CTA/hamburger never overlap the logo */
  header .navbar{flex-wrap:wrap; align-items:flex-start}
  header .brand{flex:1 1 100%}
  header .cta{flex:1 1 100%; width:100%; justify-content:flex-end; padding-top:8px}

}


@media (max-width: 520px){
  /* Mobile: make hero pills two per row so they fit without pinch-zoom */
  .pills .pill{flex:1 1 calc(50% - 10px); text-align:center}
}
@media (max-width: 380px){
  .btn{padding:11px 14px; font-size:11px}
  .navlinks a{padding:10px 8px}
}

.mobilemenu{
  display:none;
  position:absolute;
  top:100%;
  right:0;
  width:220px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 12px 32px rgba(11,31,43,.14);
  padding:8px 0 12px;
  z-index:100;
}
.mobilemenu a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--brand2);
}
.mobilemenu a:hover{background:rgba(15,76,106,.08)}
.mobilemenu .row{display:flex; gap:10px; padding:10px 12px}
.mobilemenu.open{display:block}
.mobilemenu .row a{flex:1; text-align:center; border:1px solid var(--line); background:var(--surface); color:var(--brand2)}
.mobilemenu .row a.btn.primary{background:var(--brand2); color:#fff; border-color:transparent}
.mobilemenu .row a{-webkit-text-fill-color: currentColor;}
.mobilemenu .row a.btn.primary{color:#fff !important; -webkit-text-fill-color:#fff;}
.mobilemenu .row a.btn.ghost{color:var(--brand2) !important; -webkit-text-fill-color:var(--brand2);}
.mobilemenu .row a.btn.primary:hover{background:var(--brand)}

.hero{
  padding:54px 0 28px;
  border-bottom:1px solid var(--line);
}
.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:28px;
  align-items:start;
}
@media (max-width: 900px){
  .heroGrid{grid-template-columns: 1fr; }
}

.kicker{
  letter-spacing:.20em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  margin:0 0 14px;
}
.h1{
  margin:0 0 18px;
  font-size: clamp(38px, 5vw, 74px);
  line-height:.92;
  letter-spacing:-.02em;
  text-transform:uppercase;
  /* Match the reduced landing-page headline weight */
  font-weight:600;
  color:var(--brand2);
}
.sub{
  margin:0 0 22px;
  font-size: clamp(16px, 1.55vw, 22px);
  color:var(--muted);
  font-weight:500;
  max-width: 56ch;
}
.pills{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  border:1px solid var(--line);
  background:rgba(255,255,255,.75);
  padding:10px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--brand2);
}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.cardPad{padding:18px;}

.heroCard{padding:18px; display:flex; flex-direction:column; justify-content:space-between}
.heroImg{
  border-radius: calc(var(--radius) - 4px);
  overflow:hidden;
  border:1px solid var(--line);
  background: #e9eef2;

  aspect-ratio:16 / 9;
}
.heroImg img{width:100%; height:100%; object-fit:cover}

.heroMeta{
  display:flex; justify-content:space-between; gap:14px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
}
.heroMeta strong{color:var(--brand2); letter-spacing:.10em; text-transform:uppercase}

section{padding:60px 0}

/* Mobile rhythm: slightly tighter vertical spacing sitewide */
@media (max-width: 900px){
  section{padding:44px 0}
}

/* ------------------------------------------------------------
   Procedure pages: tighter vertical rhythm
   (applies to any page using .heroProcedure)
------------------------------------------------------------ */

/* Hero section: reduce top/bottom padding (overrides some inline styles) */
.heroProcedure{padding-top:54px !important; padding-bottom:26px !important;}
@media (max-width: 900px){
  .heroProcedure{padding-top:36px !important; padding-bottom:18px !important;}
}

/* Hero image spacing */
.heroImgWide{margin: 10px 0 12px !important;}
@media (max-width: 900px){
  .heroImgWide{margin: 10px 0 10px !important;}
}

/* Quote block spacing */
.quoteCallout{padding:14px 14px 12px !important; margin: 4px 0 14px 18px !important;}
@media (max-width: 900px){
  .quoteCallout{margin: 10px 0 14px !important;}
}

/* Quotes placed directly below the hero image / section break */
.quoteAfterHeroWrap{padding:6px 0 0 !important;}
.quoteAfterHeroWrap .quoteCallout{margin: 0 0 8px auto !important;}
@media (max-width: 900px){
  .quoteAfterHeroWrap{padding:4px 0 0 !important;}
  .quoteAfterHeroWrap .quoteCallout{margin: 8px 0 10px !important;}
}

/* Tighten the first section right after an after-hero quote */
.quoteAfterHeroWrap + section{padding-top:26px !important;}
@media (max-width: 900px){
  .quoteAfterHeroWrap + section{padding-top:18px !important;}
}

/* Reduce padding on sections that follow a procedure hero */
main .heroProcedure ~ section{padding:50px 0 !important;}
@media (max-width: 900px){
  main .heroProcedure ~ section{padding:36px 0 !important;}
}

/* Procedure body content: reduce default heading/paragraph spacing */
main .heroProcedure ~ section .prose h2{margin:20px 0 10px !important;}
main .heroProcedure ~ section .prose h2:first-child{margin-top:0 !important;}
main .heroProcedure ~ section .prose p{margin:0 0 12px !important;}
main .heroProcedure ~ section .prose ul{margin:0 0 14px !important;}
main .heroProcedure ~ section .prose li{margin:0 0 6px !important;}
@media (max-width: 900px){
  main .heroProcedure ~ section .prose h2{margin:18px 0 8px !important;}
  main .heroProcedure ~ section .prose p{margin:0 0 10px !important;}
  main .heroProcedure ~ section .prose ul{margin:0 0 12px !important;}
}

/* If a page still uses mobileQuoteWrap, make it tighter without editing markup */
.mobileQuoteWrap{padding:10px 0 0 !important;}

/* About page: tighten gap between hero copy and portrait on mobile */
.aboutMain{padding-top:28px;}
@media (max-width: 520px){
  .aboutMain{padding-top:18px;}
}
.sectionTitle{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  padding-bottom:18px;
  border-bottom:2px solid var(--brand2);
  margin-bottom:26px;
}
.sectionTitle h2{
  margin:0;
  font-size: clamp(28px, 3vw, 48px);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.02em;
  font-weight:800;
}
.sectionTitle a{color:var(--brand2)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media (max-width: 900px){ .grid2{grid-template-columns:1fr} }

.feature{
  padding:22px;
}
.feature h3{
  margin:0 0 10px;
  font-size:16px;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:800;
  color:var(--brand2);
}
.feature p{margin:0; color:var(--muted); font-weight:500; line-height:1.6}

.services{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:18px;
}
.svc{
  grid-column: span 6;
  padding:18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (max-width: 900px){ .svc{grid-column: span 12;} }
.svc:hover{transform:translateY(-2px); box-shadow: 0 18px 45px rgba(11,31,43,.14)}
.svc h3{margin:0 0 8px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand2)}
.svc p{margin:0; color:var(--muted); font-weight:500; line-height:1.6}

.banner{
  background:linear-gradient(135deg, rgba(15,76,106,.08), rgba(18,59,79,.06));
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:22px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
}
.banner strong{font-weight:900; text-transform:uppercase; letter-spacing:.14em; color:var(--brand2)}
.banner p{margin:0; color:var(--muted); font-weight:500}

.twoCol{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
  align-items:start;
}
@media (max-width: 900px){ .twoCol{grid-template-columns:1fr} }


/* About page: keep portrait column narrower on desktop, stack on mobile */
.aboutLayout{
  grid-template-columns: minmax(320px, 520px) 1fr;
}
@media (max-width: 900px){
  .aboutLayout{
    grid-template-columns: 1fr;
  }
}

.prose h1,.prose h2,.prose h3{color:var(--brand2); text-transform:uppercase; letter-spacing:.10em}
.prose h1{font-size:34px}
.prose h2{font-size:22px}
.prose p, .prose li{color:var(--muted); font-weight:500; line-height:1.7}
.prose ul{padding-left:18px}
.prose a{color:var(--brand2); text-decoration:underline}

/* Ensure button links keep button styling inside prose blocks */
.prose a.btn, .prose a.btnPrimary, .prose a.btnGhost{ text-decoration:none; }
.prose a.btnPrimary{ color:#fff; }
.prose a.btnGhost{ color:var(--ink); }

.form{
  display:grid; gap:12px;
}
.input{
  width:100%;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 12px;
  font: inherit;
  background: rgba(255,255,255,.85);
}
textarea.input{min-height:130px; resize:vertical}
.help{font-size:12px; color:var(--muted); font-weight:600}

footer{
  border-top:1px solid var(--line);
  padding:26px 0;
  background:rgba(251,250,247,.8);
}
.footerGrid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 900px){
  .footerGrid{display:flex; flex-direction:column; gap:18px;}
  .footerGrid > div:nth-child(3){order:1;}
  .footerGrid > div:nth-child(2){order:2;}
  .footerGrid > div:nth-child(1){order:3; display:flex; flex-direction:column; align-items:center; text-align:center;}
  .footerMap{max-width:100%; border-radius:12px;}
  .footerMapWrap{margin-top:0; margin-bottom:4px;}
  .footerLinks{display:grid; grid-template-columns:1fr 1fr; gap:0 16px; align-items:start;}
  .footerLinks a{padding:7px 0; font-size:11px; letter-spacing:.12em;}
  .footerGrid > div:nth-child(1) .brand{justify-content:center; margin-bottom:10px;}
  .footerGrid > div:nth-child(1) .small{display:flex; flex-direction:column; align-items:center;}
  .footerGrid > div:nth-child(1) .footerSocials{justify-content:center;}
}
.small{font-size:12px; color:var(--muted); font-weight:600; line-height:1.7}
.footerLinks a{display:block; padding:6px 0; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brand2)}
.footerLinks a:hover{opacity:.7}

.notice{
  border:1px dashed rgba(15,76,106,.35);
  background:rgba(255,255,255,.65);
  border-radius: var(--radius);
  padding:16px;
  color:var(--muted);
  font-weight:600;
  font-size:12px;
  line-height:1.7;
}

/* Social links */
.socials{display:flex; align-items:center; gap:10px}
.socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  transition:transform .15s ease, background .15s ease;
}
.socials a:hover{transform:translateY(-1px); background:rgba(15,76,106,.08)}
.socials svg{width:18px; height:18px; fill:var(--brand2)}
@media (max-width: 900px){
  .socials{display:none}
}
.footerSocials{margin-top:10px}
.footerSocials a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--brand2);
}
.footerSocials a:hover{opacity:.75}
.footerSocials .dot{width:4px; height:4px; border-radius:99px; background:var(--brand2); opacity:.35; display:inline-block; margin:0 10px}

/* Emphasize logo */
.brand img{
  height:52px;
}
.brand{
  padding:8px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(11,31,43,.08);
}

/* Shrink hero image slightly */
.heroCard{
  max-width:420px;
}
.heroImg{
  max-height:420px;
}

/* Brand badge to make logo stand out */
.brandBadge{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  box-shadow: 0 8px 22px rgba(11,31,43,.08);
}
@media (max-width: 900px){
  header .brand img{height:44px}
}

/* Slightly reduce portrait dominance on the home/about cards */
.heroImg--portrait{
  aspect-ratio: 4 / 5;
  max-height: 520px;
}
@media (max-width: 900px){
  .heroImg--portrait{max-height: 520px;}
}

/* Coming Soon banner */
.comingBanner{
  width:100%;
  background:linear-gradient(135deg, var(--brand2), var(--brand));
  color:#fff;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:10px 12px;
}
.comingBanner span{opacity:.9}

/* Logo-forward hero */
.logoHero{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.logoHero img{  max-width:520px;
  width:100%;
  height:auto;
}
@media (max-width: 900px){
  .logoHero img{max-width:300px}
}

/* Content images */
.prose img{
  width:100%;
  height:auto;
  display:block;
  margin:16px 0 18px;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow: 0 10px 26px rgba(11,31,43,.08);
}

/* Logo-only hero card: remove white panel look */
.heroCard--logo{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* Simple grids */
.grid3{display:grid; gap:14px; grid-template-columns: repeat(3, minmax(0, 1fr));}
.grid2{display:grid; gap:14px; grid-template-columns: repeat(2, minmax(0, 1fr));}
@media (max-width: 900px){
  .grid3{grid-template-columns:1fr;}
  .grid2{grid-template-columns:1fr;}
}
.sectionHead h2{margin:0}

/* Homepage hero logo positioning */
.logoHero--home{min-height:420px; display:flex; align-items:center; justify-content:center; padding-top:64px; padding-bottom:10px;}
@media (max-width: 900px){
  .logoHero--home{min-height:420px; display:flex; align-items:center; justify-content:center; padding-top:64px; padding-bottom:10px;}
}

/* Featured service cards (homepage) */
.featuredCards{display:grid; gap:16px; grid-template-columns: repeat(5, minmax(0, 1fr));}
@media (max-width: 1100px){ .featuredCards{grid-template-columns: repeat(2, minmax(0, 1fr));} }
@media (max-width: 700px){ .featuredCards{grid-template-columns: 1fr;} }

.serviceCard{
  padding:0 !important;
  overflow:hidden;
}
.serviceCard img{  width:100%;  height:160px;
  object-fit:cover;
  display:block;
 object-position:center; }
.serviceCard .body{
  padding:14px 14px 16px;
}
.serviceCard .body h3{margin:0 0 6px; font-size:16px;}
.serviceCard .body p{margin:0; color:var(--muted); font-size:13px; line-height:1.4;}
.serviceCard .arrow{
  margin-left:auto;
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
}
.serviceCard .row{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Right-side logo panel on homepage hero */
.logoPanel{
  background: transparent;
  border-radius: 0;
  width: 100%;
  max-width: 520px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.logoPanel img{
  max-width: 460px;
  width:100%;
  height:auto;
  filter: drop-shadow(0 10px 18px rgba(11,31,43,.10));
}


/* Inline illustrations inside procedure content */
.inlineIllustration{
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow: 0 10px 26px rgba(11,31,43,.08);
  display:block;
  margin:14px 0 18px;
}

/* Pill links (clickable) */
.pills{position:relative; z-index:5;}
.pills a.pill, a.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  pointer-events:auto;
}
.pills a.pill:hover{
  transform:translateY(-1px);
  background:rgba(15,76,106,.08);
  border-color:rgba(15,76,106,.25);
}

img{max-width:100%;}

/* HERO right media split: half logo, half headshot */
.heroBrandSplit{
  width:100%;
  max-width:520px;
  aspect-ratio: 1 / 1;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background: rgba(240,235,226,.70);
  box-shadow: 0 14px 34px rgba(11,31,43,.10);
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.heroBrandSplit .half{
  display:flex;
  align-items:center;
  justify-content:center;
}
.heroBrandSplit .logoHalf{
  padding:28px 18px;
  background: rgba(240,235,226,.85);
}
.heroBrandSplit .logoHalf img{
  width: 92%;
  height:auto;
}
.heroBrandSplit .photoHalf{
  background: rgba(240,235,226,.35);
}
.heroBrandSplit .photoHalf img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center top;
}


/* Hero split image */
.heroSplitImage{width:100%;height:100%;object-fit:cover;border-radius:18px;display:block;}
.heroImageBox{background:transparent;}

/* ===== Homepage layout (reference screenshot) ===== */
body{background:var(--bg); color:var(--ink); font-family:var(--font);}
.container{max-width:1220px; margin:0 auto; padding:0 24px;}

.hero{padding:40px 0 0;}
.heroGrid{display:grid; grid-template-columns: 1.05fr .95fr; gap:54px; align-items:start;}
.heroLeft h1.heroHeadline{font-size:74px; line-height:.9; letter-spacing:-.02em; margin:0; font-weight:600; text-transform:uppercase;}
.heroTitleBlock{display:inline-block; text-align:center; margin:0 0 14px;}
.heroLeft h1.heroHeadline{display:block; max-width:100%;}
.heroLine1{display:block; white-space:nowrap;}
.heroLine2{display:block; width:100%; text-align:center; font-size:0.72em; letter-spacing:.14em; white-space:nowrap;}
.heroTag{margin:8px 0 0; font-weight:800; letter-spacing:.06em; text-transform:uppercase; font-size:14px; color:#324550;}
.heroCertBadge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:12px 0 16px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(15,76,106,.09);
  border:1px solid rgba(15,76,106,.22);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brand2);
}
.heroCertBadge svg{
  flex-shrink:0;
  color:var(--brand);
  opacity:.85;
}
.heroSub{margin:0 0 26px; color:var(--muted); font-size:20px; line-height:1.5;}

.heroBtns{
  /* Make the two primary hero CTAs identical width (prevents text-length jitter) */
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin:14px auto 14px;
  justify-content:center;
  width:100%;
  max-width:520px; /* keeps the pair visually balanced on large screens */
}
.heroBtns .btn{
  width:100%;
  min-width:0;
}
.heroBtnsSecondary{display:flex; justify-content:center; margin:0 0 14px;}
.heroBtnsSecondary .btn{min-width:240px;}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; height:auto; padding:12px 22px; border-radius:24px;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:13px; text-decoration:none; white-space:normal; text-align:center;}
.btnPrimary{background:var(--ink); color:#fff;}
.btnGhost{background:transparent; color:var(--ink); border:2px solid var(--ink);}

.pills{display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 18px;}
.pillsCentered{justify-content:center;}
.recoveryPills{margin:10px 0 0;}

/* After-surgery: keep the recovery guide pills tight + centered */
.recoveryGuides h2{margin:0 0 6px;}
.recoveryGuides p{margin:0 0 10px;}
.recoveryGuides .recoveryPills{margin:0;}
.pill{display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 16px; border-radius:20px;
  border:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; font-size:12px;}
.pill:hover{background:rgba(11,58,79,.06); transform:translateY(-1px);}

.notice{border:2px dashed rgba(11,58,79,.35); border-radius:14px; padding:14px 16px; color:#2f4653;
  background:rgba(11,58,79,.06); font-size:14px; line-height:1.4; max-width:680px;}
.notice strong{color:var(--ink);}

.heroRight{
  display:flex;
  flex-direction:column; /* stack hero media + temporary banner */
  align-items:center;
  justify-content:flex-start;

  gap:16px;
}
/* Hero media box (homepage) */
.heroMedia{width:100%; max-width: 660px; background:rgba(240,235,226,.55); border-radius:18px; padding:26px;}
.heroMedia img{width:100%; height:auto; display:block; border-radius:12px;}

/* Logo-only hero should feel flush with the page (no card-on-card layering) */
.heroMedia.logoOnly{display:flex;align-items:center;justify-content:center; background:transparent; padding:0; border-radius:0;}
.heroMedia.logoOnly img{width:min(520px, 92%); border-radius:0; background:transparent;}

/* ── Hero: building exterior photo ────────────────────────────── */
/* Base image fill — used by both desktop (absolute) and mobile (relative) modes */
.heroBgPhotoImg{
  width:100%; height:100%;
  object-fit:cover; object-position:center 40%;
  display:block;
}

/* Desktop (>=901px): photo fills right side, bleeds to true viewport edge */
@media (min-width: 901px){
  /* Scope position/overflow/min-height to homepage hero only — inner pages keep their natural height */
  .hero--photo{position:relative; overflow:hidden; min-height:480px;}
  .hero{position:relative; overflow:hidden;}

  .heroGrid{/* no position:relative — intentional, see note on containing block */}
  .heroLeft{position:relative; z-index:2;}

  .heroBgPhotoWrap{
    position:absolute; top:0; bottom:0;
    left:42%; right:0;
    z-index:0; overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 16%, black 38%);
    mask-image:linear-gradient(to right, transparent 0%, transparent 16%, black 38%);
  }
  .heroBgFadeLeft{display:none;}
  .heroBgVignette{
    position:absolute; bottom:0; left:0; right:0;
    height:110px; z-index:2;
    background:linear-gradient(to top, rgba(247,245,240,.62) 0%, transparent 100%);
    pointer-events:none;
  }
  /* Pill is now a direct child of .hero — positioned bottom-right of the whole hero */
  .heroBgPill{
    position:absolute; bottom:16px; right:20px; z-index:5;
    background:rgba(26,58,92,.82); backdrop-filter:blur(8px);
    color:#fff; font-family:var(--font); text-decoration:none;
    font-size:10px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
    padding:6px 14px; border-radius:20px;
    display:flex; align-items:center; gap:5px;
    white-space:nowrap; transition:background .18s;
  }
  .heroBgPill:hover{background:rgba(26,58,92,1);}
  .heroBgPill::before{content:'\1F4CD'; font-style:normal; font-size:11px;}
}

/* Mobile / tablet (<=900px): photo banner at top of hero, text below */
@media (max-width: 900px){
  .hero--photo{position:relative; overflow:hidden;}

  .heroBgPhotoWrap{
    position:absolute;
    top:0; left:0; right:0; height:260px; bottom:auto;
    z-index:0; overflow:hidden;
    /* Bottom fade dissolves photo into page bg — no mask clipping the pill */
    -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
    mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
  }
  .heroBgPhotoImg{border-radius:0; object-position:center 18%;}
  .heroBgFadeLeft,.heroBgVignette{display:none;}

  /* Pill is now outside the wrap — position relative to .hero--photo */
  .heroBgPill{
    position:absolute; top:220px; right:14px; z-index:5;
    background:rgba(26,58,92,.82); backdrop-filter:blur(8px);
    color:#fff; font-family:var(--font); text-decoration:none;
    font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    padding:5px 11px; border-radius:14px;
    display:flex; align-items:center; gap:4px; white-space:nowrap;
  }
  .heroBgPill::before{content:'\1F4CD'; font-style:normal; font-size:10px;}

  .heroGrid{position:relative; z-index:1;}
  .hero--photo .heroLeft{position:relative; z-index:2; padding-top:240px;}
  .homeLogoMobile{display:none !important;}
}

/* Small phones */
@media (max-width: 480px){
  .heroBgPhotoWrap{height:210px;}
  .heroBgPill{top:170px;}
  .hero--photo .heroLeft{padding-top:190px;}
}

.featured{padding:24px 0 52px;}
.featured .container{overflow:visible;}
.fsScrollWrap{position:relative; padding:0 56px;}
.fsHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.fsHeader .sectionKicker{margin:0;}

/* Hide the old inline button group — buttons are now positioned on the track */
.fsScrollBtns{display:none;}

/* Floating arrow buttons on the slider edges */
.fsScrollBtn{
  position:absolute;
  top:50%;
  transform:translateY(-60%);
  z-index:10;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  border-radius:999px;
  border:1.5px solid rgba(15,76,106,.25);
  background:#fff;
  color:var(--brand2);
  cursor:pointer;
  box-shadow:0 4px 14px rgba(11,31,43,.14);
  transition:background .15s,box-shadow .15s,transform .15s;
  padding:0;
}
#fsScrollPrev{left:4px;}
#fsScrollNext{right:4px;}
.fsScrollBtn:hover{
  background:var(--brand2);
  color:#fff;
  border-color:var(--brand2);
  box-shadow:0 6px 20px rgba(11,31,43,.22);
  transform:translateY(-60%) scale(1.08);
}
.fsScrollBtn:disabled{opacity:.25;cursor:default;box-shadow:none;transform:translateY(-60%);}
.fsScrollBtn svg{display:block;}
.sectionKicker{margin:0 0 14px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:18px;}
.fsGrid{display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:18px;}
.fsCard{display:flex; flex-direction:column; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; box-shadow:0 10px 26px rgba(11,31,43,.06); transition: transform .18s ease, box-shadow .18s ease; height:100%;}

.fsThumb{height:128px; background:#e6edf2; flex:0 0 auto;}

.fsThumb img{width:100%; height:100%; object-fit:cover; display:block;}

.fsBody{padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px; flex:1 1 auto; min-height:164px;}

.fsTitleRow{display:flex; align-items:flex-start; gap:10px;}
.fsBody h3{margin:0; font-size:18px; font-weight:800; line-height:1.3;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height:calc(1.3em * 2); flex:1 1 auto;}
.fsBody p{margin:0; color:var(--muted); font-size:13px; line-height:1.35;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
  min-height:calc(1.35em * 3);}

.fsArrow{margin-left:auto; flex:0 0 28px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:999px;
  border:1px solid var(--line); font-size:20px; color:var(--ink);}

/* Home: featured services should scroll horizontally (single row) */
.fsScroll{
  display:flex;
  align-items:stretch;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  gap:18px;
  padding-bottom:10px;
}
.fsScroll::-webkit-scrollbar{height:8px;}
.fsScroll::-webkit-scrollbar-thumb{background:rgba(20,44,60,.18); border-radius:999px;}
.fsScroll::-webkit-scrollbar-track{background:rgba(20,44,60,.06); border-radius:999px;}
.fsScroll .fsCard{flex:0 0 auto; min-width:250px; max-width:280px;}

@media (max-width: 1180px){ .fsGrid{grid-template-columns: repeat(2, minmax(0,1fr));}
  .heroGrid{grid-template-columns: 1fr 1fr; gap:32px; align-items:center;}
  .heroLeft{display:flex; flex-direction:column; align-items:center; text-align:center;}
  .heroSub{max-width:560px; margin-left:auto; margin-right:auto; text-align:center;}
  .heroBtns{max-width:520px;}
  .heroBtnsSecondary .btn{min-width:320px;}
  .heroLeft h1.heroHeadline{font-size:60px;}
  .heroSub{font-size:18px; margin:0 0 22px;}
  .heroMedia.logoOnly img{width:min(420px, 90%);}
}
@media (max-width: 980px){
  .heroGrid{grid-template-columns:1fr; gap:26px;}
}
@media (max-width: 640px){ .fsGrid{grid-template-columns:1fr;} .heroLeft h1{font-size:50px;} }

/* Mobile header button group — hidden on desktop */
.fsHeaderBtns{display:none; gap:8px; flex-shrink:0;}
.fsScrollBtnMobile{position:static; transform:none; width:34px; height:34px;}
.fsScrollBtnMobile:hover{transform:scale(1.08);}
.fsScrollBtnMobile:disabled{transform:none; opacity:.25;}

@media (max-width: 720px){
  /* Hide side arrows, show header arrows */
  #fsScrollPrev, #fsScrollNext{display:none;}
  .fsHeaderBtns{display:flex;}
  .fsScrollWrap{padding:0;}
  .fsHeader{padding-right:0;}
}

.serviceHeroImg{width:100%; height:auto; aspect-ratio:16 / 9; max-height:420px; object-fit:cover; object-position:50% 40%; background: transparent; border-radius:16px; display:block;}

/* --- Services: horizontal scroll pills --- */
.pillsScroll{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}
.pillsScroll::-webkit-scrollbar{height:8px;}
.pillsScroll::-webkit-scrollbar-thumb{background:rgba(20,44,60,.18); border-radius:999px;}
.pillsScroll::-webkit-scrollbar-track{background:rgba(20,44,60,.06); border-radius:999px;}

/* --- Services: tighter additional cards --- */
.compactCards{gap:14px;}
.cardTight{padding:16px 18px;}
.cardTight h3{margin:0 0 8px;}
.cardTight p{margin:0; color:var(--muted);}

/* --- Home: more services list under pills --- */
.moreServices{margin-top:16px;}
.moreServicesTitle{font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:var(--muted);}
.moreServicesGrid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin-top:10px;}
.moreServicesGrid a{color:var(--ink); text-decoration:none; font-weight:700; font-size:14px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.55);}
.moreServicesGrid a:hover{background:rgba(11,58,79,.06); transform:translateY(-1px);}

/* Hero notice: keep it visually centered under the right-side logo on desktop.
   Avoid width:100% so the dashed box doesn't look stretched / asymmetric. */
.heroNotice{margin-top:10px; max-width:660px; width:auto;}

/* Desktop: tighten vertical rhythm in the right hero column so the logo and credentials
   feel balanced with the left-column content (reduce perceived dead space from the logo asset). */
@media (min-width: 900px){
  /* Nudge the hero logo up and place the Temporary Site notice directly beneath it
     to reduce dead space and improve left/right symmetry. */
  .heroRight .heroMedia.logoOnly{margin-top:0; margin-bottom:0;}
  .heroRight .heroNotice{margin-top:0; max-width:520px; width:min(520px, 100%);}
}

/* On smaller screens, let the notice span the column width for readability. */
@media (max-width: 899px){
  .heroNotice{width:100%;}
}

/* Home: cleaner hero on mobile (use logo lockup instead of giant headline) */
.homeLogoMobile{display:none;}
@media (max-width: 820px){
  .homeLogoMobile{display:flex; justify-content:center; margin:8px 0 10px;}
  .homeLogoMobile img{width:min(572px, 100%); height:auto; display:block;}

  /* Hide the duplicated logo card in the right column on mobile */
  .heroRight .heroMedia.logoOnly{display:none;}

  /* Keep the H1 for semantics/SEO, but hide it visually on small screens */
  .heroLeft h1.heroHeadline{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
  }
}

/* Home (mobile): replace the hero pill row with the Featured Service Details panel.
   Card sizing stays the same as desktop; we simply move the panel up into the hero. */
@media (max-width: 900px){
  /* Home (mobile): hide ONLY the hero pill row (do not affect pill groups sitewide). */
  .heroGrid .pills{display:none;}
  .featured.featuredInHero{padding:12px 0 6px;}
  /* Prevent Safari/iOS "desktop scaled" rendering when a horizontal scroller sits inside a grid item.
     Ensure grid/flex descendants can shrink to the viewport and let the scroller scroll internally. */
  .heroGrid,
  .heroLeft,
  .featuredMobileMount,
  .featured.featuredInHero,
  .featured.featuredInHero .container{
    min-width:0;
    max-width:100%;
  }
  .featured.featuredInHero .container{max-width:100%; padding:0;}
  .featured.featuredInHero .fsScroll{min-width:0; max-width:100%; overflow-x:auto;}
  .featured.featuredInHero .sectionKicker{margin:10px 0 12px; font-size:16px;}
}

/* After Surgery page: tighten the recovery guides block so it sits closer to the hero and content.
   Override the global section padding (60px) for this one block only. */
section.recoveryGuides{padding:18px 0 18px;}
section.recoveryGuides h2{margin:0 0 6px;}
section.recoveryGuides p{margin:0 0 12px;}
section.recoveryGuides .pills{margin:0; justify-content:center;}

@media (max-width: 640px){
  section.recoveryGuides{padding:14px 0 14px;}
}

/* --- FAQ accordion --- */
.faqList{display:flex; flex-direction:column; gap:12px; margin-top:14px;}
.faq{border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.65); padding:12px 14px;}
.faq summary{cursor:pointer; font-weight:800; color:var(--ink); list-style:none; min-height:44px; display:flex; align-items:center;}
.faq summary::-webkit-details-marker{display:none;}
.faq p{margin:10px 0 0; color:var(--muted);}


/* About page portrait hover swap */
.hoverSwap{position:relative; overflow:hidden;}
.hoverSwap__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity .22s ease;}
.hoverSwap__img--a{opacity:1;}
.hoverSwap__img--b{opacity:0;}
.hoverSwap:hover .hoverSwap__img--a{opacity:0;}
.hoverSwap:hover .hoverSwap__img--b{opacity:1;}
@media (hover: none){
  /* On touch devices, allow tap to toggle via focus */
  .hoverSwap:active .hoverSwap__img--a,.hoverSwap:focus-within .hoverSwap__img--a{opacity:0;}
  .hoverSwap:active .hoverSwap__img--b,.hoverSwap:focus-within .hoverSwap__img--b{opacity:1;}
}

/* =========================
   Credentials strip (home)
========================= */
.credentialsStrip{margin-top:14px;padding:14px;border:1px dashed rgba(20,60,80,.25);border-radius:16px;background:rgba(255,255,255,.55);backdrop-filter:saturate(120%) blur(2px)}
.credentialsTitle{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(20,60,80,.75);margin-bottom:10px;font-weight:700}

/* Compact, uniform badges (no extra boxes/text) */
.credentialsBadges{display:flex;gap:12px;align-items:center;justify-content:flex-start;flex-wrap:nowrap}
.credBadge{position:relative;display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit;padding:0;background:transparent;border:0;border-radius:0;transition:transform .15s ease}
.credBadge:hover{transform:translateY(-1px)}

/* Make both badges the same visual footprint */
.credBadge .badgeLabel,.credBadge .badgeHoverText{display:none !important}
.aaomsBadge img{display:block;width:132px;height:132px;object-fit:contain;filter:grayscale(1);opacity:.92;transform:scale(1.08)}
.abomsBadge img{display:block;width:132px;height:132px;object-fit:contain;filter:grayscale(1);opacity:.92;transform:scale(1.00)}
.adsaBadge img{display:block;width:132px;height:132px;object-fit:contain;filter:grayscale(1) contrast(.88);opacity:.90;transform:scale(0.98)}

/* Credly embed: clip + scale into a square so it visually matches AAOMS */
.credlyEmbed{display:flex;align-items:center;justify-content:center}
.credlyWrap{width:132px;height:132px;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;border:0;border-radius:0;background:transparent}
.credlyWrap iframe{width:244px;transform:scale(0.54);transform-origin:top center;}

/* Optional hover tooltip (doesn't affect layout) */
.credBadge[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);width:min(320px, 72vw);padding:10px 12px;border-radius:12px;background:#0b3a4b;color:#fff;font-size:.9rem;line-height:1.25;box-shadow:0 18px 36px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .12s ease, transform .12s ease;z-index:5}
.credBadge[data-tooltip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}

.credentialsHint{margin-top:10px;font-size:.9rem}
.credentialsHint a{text-decoration:underline}

@media (max-width: 720px){
  .credentialsBadges{justify-content:center;flex-wrap:wrap;gap:6px}
  .credentialsStrip{text-align:center}
  .aaomsBadge img,.abomsBadge img,.adsaBadge img{width:clamp(78px, 24vw, 98px);height:clamp(78px, 24vw, 98px)}
}
.badgeLabel{display:none !important}

/* Credentials page layout */
.credentialsPage .credRow{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}
.credentialsPage .credRow + .credRow{margin-top:26px;padding-top:26px;border-top:1px solid rgba(20,60,80,.12)}
.credentialsPage .credExplain{background:transparent;border:0;box-shadow:none;padding:0}
.credentialsPage .credBadgeBlock{display:flex;flex-direction:column;align-items:center;gap:10px}
.credentialsPage .credBadgeBlock .credBadge{padding:0}
.credentialsPage .credLink{font-weight:700;text-decoration:underline}
@media (max-width: 900px){
  .credentialsPage .credRow{grid-template-columns:1fr}
  .credentialsPage .credBadgeBlock{align-items:flex-start}
}

/* Credentials page anesthesia section polish */
.credentialsPage .credAnesthesia { max-width: 780px; }
.credentialsPage .credAnesthesia .small { opacity: .85; }


/* =========================
   Credentials page – tighter hero
========================= */
.credentialsPage .hero--secondary {
  padding-top: 64px;
  padding-bottom: 36px;
  background: var(--surface-soft, #faf7f3);
}

.credentialsPage .hero--secondary h1 {
  margin-top: 0;
  margin-bottom: 10px;
}

.credentialsPage .hero__subtitle {
  margin: 0 0 18px 0;
  max-width: 70ch;
}

.credentialsPage .breadcrumbs {
  margin-bottom: 10px;
}

.credentialsPage .hero__cta {
  margin-top: 0;
}




/* =========================
   Mobile: prevent hero CTA cut-off + fit pills without zoom
   (iPhone Safari safe)
========================= */
@media (max-width: 520px){
  /* Header: logo-only badge on mobile */
  header .brand .wordmark{display:none !important;}
  header a.brand.brandBadge{
    padding:4px 0 !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    border-radius:0 !important;
  }
  header .brand{
    padding:4px 0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    gap:0;
    justify-content:center;
    flex:1 1 100%;
  }
  /* Use a larger, cropped lockup for the header logo on mobile */
  header .brand img{height:56px; width:auto;}
  header .navbar{
    padding:6px 0;
    flex-wrap:wrap;
    justify-content:center;
  }
  header .cta{
    flex:1 1 100%;
    width:100%;
    justify-content:center;
    padding-top:4px;
    gap:12px;
    position:relative;
  }
  header .cta .socials{display:none;}
  header .cta > a.btn{flex:0 0 auto; padding:16px 14px; font-size:12px; letter-spacing:.14em;}
  header .cta > .ctaStack{flex:0 0 auto; text-align:center;}
  header .cta > button.burger{position:absolute; right:0; top:50%; transform:translateY(-50%);}

  /* Mobile: stack hero CTAs full-width so labels never clip */
  .heroBtns{
    /* heroBtns is a grid on desktop; on mobile we force a single column */
    grid-template-columns: 1fr;
    max-width: 520px;
    width: 100%;
  }
  .heroBtns .btn, .heroBtns a.btn{
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Slightly tighten CTA typography on narrow screens */
  .heroBtns .btn, .heroBtnsSecondary .btn{
    font-size: 12px;
    letter-spacing: .12em;
    padding: 0 18px;
  }

  /* Keep the secondary hero CTA centered and full-width on mobile */
  .heroBtnsSecondary{
    justify-content:center;
  }
  .heroBtnsSecondary a, .heroBtnsSecondary .btn{
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    box-sizing:border-box;
  }

  /* Make the featured quick-link pills fit nicely (2-up) */
  .pills{
    justify-content:center;
  }
  .pills a.pill, .pills .pill{
    flex: 1 1 calc(50% - 12px);
    width: calc(50% - 12px);
    max-width: calc(50% - 12px);
    box-sizing:border-box;
    white-space: normal;
    height:auto;
    min-height:38px;
    padding:8px 10px;
    line-height:1.15;
    font-size:11px;
    letter-spacing:.10em;
  }
}

@media (max-width: 360px){
  .pills a.pill, .pills .pill{
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }
}

.fsCard:hover{transform: translateY(-4px); box-shadow:0 16px 34px rgba(11,31,43,.10);} 


/* --- Hero focal point helpers (use on <img>) --- */
.focusTop{ object-position:50% 22% !important; }
.focusCenter{ object-position:50% 45% !important; }
.focusBottom{ object-position:50% 70% !important; }

/* --- Maps --- */
.contactMap{
  width:100%;
  max-width:720px;
  height:auto;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow: 0 10px 26px rgba(11,31,43,.08);
  display:block;
  margin:14px 0 0;
}
.footerMap{
  width:100%;
  max-width:260px;
  height:auto;
  border-radius:14px;
  border:1px solid var(--line);
  display:block;
  margin:10px 0 0;
}

.footerMapWrap{margin-top:12px; margin-bottom:8px;}
@media (max-width: 900px){
  .footerMap{ max-width:100%; }
}


.mapEmbed{margin-top:12px; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#fff;}
.mapEmbed iframe{width:100%; height:320px; display:block;}
@media (min-width:900px){.mapEmbed iframe{height:360px;}}


/* --- Procedure hero (matches Bone Grafting template) --- */
.heroProcedure .heroGrid{grid-template-columns:1fr 1fr; align-items:start;}
.heroProcedure .heroRight{display:block;}
@media (max-width: 1180px){
  .heroProcedure .heroGrid{grid-template-columns:1fr;}
  .heroProcedure .heroRight{order:2;}
}


.heroImgWide{
  width:100%;
  max-width:100%;
  height:auto;
  max-height:480px;
  display:block;
  background: transparent;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow: 0 10px 26px rgba(11,31,43,.08);
  margin: 14px 0 18px;
}
@media (max-width: 700px){
  .heroImgWide{ max-height:none; }
}


/* --- Quote callout (right-side) --- */
.quoteCallout{
  float:right;
  width:min(360px, 42%);
  margin: 6px 0 18px 22px;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(11,31,43,.06);
}
.quoteCallout em{display:block; font-style: italic; color: var(--ink); line-height:1.45;}
.quoteSig{margin-top:10px; font-weight:800; color: var(--ink);}
@media (max-width: 900px){
  .quoteCallout{float:none; width:100%; margin: 14px 0 18px;}
}

/* Sidebar placement helpers */
.sidebarQuote{float:none; width:100%; margin: 6px 0 18px; max-width:none;}
.sidebarBlock{margin-top:0;}
.sidebarQuote + .sidebarBlock{margin-top:18px;}
.aside .card + .sidebarBlock{margin-top:18px;}


/* Quotes: show at top on mobile, avoid pushing to bottom */
.mobileQuoteWrap{display:none}
@media (max-width: 900px){
  .sidebarQuote{display:none}
  .mobileQuoteWrap{display:block}
}

/* Quotes placed directly below the hero image / section break */
.quoteAfterHeroWrap{padding:12px 0 0;}
.quoteAfterHeroWrap .quoteCallout{
  float:none;
  width:min(520px, 48%);
  margin: 0 0 12px auto;
}
@media (max-width: 900px){
  .quoteAfterHeroWrap{padding:8px 0 0;}
  .quoteAfterHeroWrap .quoteCallout{
    width:100%;
    margin: 10px 0 12px;
  }
}

/* Tighten the first section right after an after-hero quote */
.quoteAfterHeroWrap + section{padding-top:40px;}
@media (max-width: 900px){
  .quoteAfterHeroWrap + section{padding-top:30px;}
}


/* De-duplicate navigation:
   On mobile, the single .navlinks element is moved into .mobilemenu (no duplicate menus in the DOM). */
@media (max-width: 900px){
  .mobilemenu .navlinks{display:flex; flex-direction:column; align-items:stretch; gap:0; padding:4px 0 0}
  .mobilemenu .navlinks a{
    display:block;
    padding:12px 12px;
    border-radius:12px;
    border:1px solid transparent;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:12px;
    color:var(--brand2);
  }
  .mobilemenu .navlinks a:hover{background:rgba(15,76,106,.08)}
  .mobilemenu .navlinks a[aria-current="page"]{background:rgba(15,76,106,.12)}
}


/* --- Accessibility + layout hygiene --- */
.heroLeft .quoteCallout.quoteSingle{ margin-top:16px; }
@media (min-width: 901px){
  .heroLeft .quoteCallout.quoteSingle{ max-width: 520px; }
}

/* HOME: Secondary section (More Services + Credentials) */
.homeSecondary{padding:24px 0 10px;}
.homeSecondaryGrid{display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center;}
.homeSecondary .moreServices{margin-top:0;}
.homeSecondaryRight .heroNotice{margin-top:0;}
.homeSecondaryRight .credentialsStrip{margin-top:0;}
@media (max-width: 900px){
  .homeSecondaryGrid{grid-template-columns:1fr; gap:22px;}
}


/* --- Sinus Lift hero headline fixes (prevent overlap + preserve parentheses) --- */
.heroProcedure .heroGrid{gap:44px;}
@media (max-width: 1100px){
  .heroProcedure .heroGrid{gap:34px;}
}
.heroProcedure .h1{
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: .96;
}
.heroProcedure .h1Sub{
  display:block;
  font-size: .86em;
  line-height: 1.0;
  padding-left: 2px; /* avoid any glyph clipping on '(' */
}
@media (max-width: 900px){
  .heroProcedure .h1{font-size: clamp(34px, 9.5vw, 54px); line-height: .98;}
  .heroProcedure .h1Sub{font-size: .92em;}
  .heroProcedure .heroGrid{gap:22px;}
}



/* Anchor offset for FAQ section jumps (accounts for sticky header) */
[id^="faq-"] { scroll-margin-top: 120px; }



/* Keep buttons/nav untouched; emphasize inline text links used across pages */
/*
  Link visibility
  - Default: do NOT underline (prevents entire cards/blocks looking underlined)
  - Emphasize only true inline text links (within paragraphs/lists/callouts) with bold + underline
*/
main a { text-decoration: none; }

/* Explicit inline-link helper (safe anywhere) */
a.textLink, .textLink {
  text-decoration: underline;
  font-weight: 600;
}
a.textLink:hover, .textLink:hover { text-decoration-thickness: 2px; }

/* Inline links in readable text areas */
main p a,
main li a,
main .noteBox a,
main .callout a,
main .prose a {
  text-decoration: underline;
  font-weight: 600;
}

/* Prevent underlining inside cards/tiles/buttons even if they contain <a> tags */
.card a,
.card a *,
.featureCard a,
.featureCard a *,
.serviceCard a,
.serviceCard a *,
.ctaCard a,
.ctaCard a *,
.pill a,
.btn a,
.button a {
  text-decoration: none !important;
  font-weight: inherit;
}

/* If the card/feature/service itself is an <a>, prevent the whole block from looking underlined */
a.card,
a.card *,
a.featureCard,
a.featureCard *,
a.serviceCard,
a.serviceCard *,
a.ctaCard,
a.ctaCard *,
a.pill,
a.pill *,
a.btn,
a.btn *,
a.button,
a.button * {
  text-decoration: none !important;
  font-weight: inherit !important;
}

/* Related Procedures (service pages) */
.relatedGrid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:14px;
}
.relatedCard{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid rgba(11,35,52,.14);
  border-radius:999px;
  background:#fff;
  text-decoration:none;
  color:inherit;
  line-height:1.1;
}
.relatedCard strong{font-weight:700;}
.relatedCard::after{
  content:"→";
  opacity:.7;
}
.relatedCard:hover{border-color:rgba(11,35,52,.32)}
.relatedCta{display:none;}

/* Mobile FAQ anchor offset (account for taller mobile header) */
@media (max-width: 768px) {
  /* iOS/Safari often renders a taller sticky header; give extra offset */
  [id^="faq-"] { scroll-margin-top: 200px; }
}


/* Inline underline helper for partial-link emphasis */
.linkUnderline{border-bottom:1px solid currentColor; padding-bottom:1px;}


/* Contact page parking map */
.contactMapWrap{margin:14px 0 12px;}
.contactMapLarge{display:block;width:100%;max-width:720px;height:auto;margin:0 auto;border-radius:16px;}
@media (max-width: 720px){.contactMapLarge{max-width:100%;border-radius:14px;}}

/* Contact page: add spacing between Emergency callout and Serving nearby communities */
.serviceArea{margin-top:16px;}

/* Referrals page CTA buttons */
.referralCtas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.referralCtas .btn{white-space:normal; text-align:center;}
@media (max-width:700px){
  .referralCtas{flex-direction:column;align-items:center}
  .referralCtas .btn{width:100%;max-width:460px}
}


/* Header phone under Book Consultation */
.ctaStack{display:flex;flex-direction:column;align-items:center;gap:6px;}
.headerPhone{margin:0;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:none;text-align:center;color:var(--ink);white-space:nowrap;line-height:1;text-decoration:none;border-bottom:1px solid rgba(10,40,60,.35);padding-bottom:2px;}



/* =========================
   Meet Dr. Q — Homepage section (Option B: photo bleeds from right)
========================= */
.meetDrQ{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--brand2) 0%,#0f4c6a 60%,#1a5c7a 100%);
  padding:0 !important;
}

/* Photo: right side only, 42% width — visual stays contained */
.drqPhotoBg{
  position:absolute;
  top:0;right:0;bottom:0;
  width:42%;
  z-index:0;
}
.drqPhotoBgLink{
  display:block;
  position:absolute;
  inset:0;
  cursor:pointer;
}
.drqPhotoBgLink:hover img{opacity:.88;transition:opacity .2s;}
.drqPhotoBg img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:right bottom;
  display:block;
  background:#fff;
}
/* Diagonal left-edge fade blending photo into section bg */
.drqPhotoBg::before{
  content:'';
  position:absolute;top:0;left:0;bottom:0;
  width:65%;
  background:linear-gradient(to right,#0f4c6a 0%,#0f4c6a 20%,rgba(15,76,106,.85) 50%,transparent 100%);
  z-index:1;
  pointer-events:none;
}
/* Top fade */
.drqPhotoBg::after{
  content:'';
  position:absolute;top:0;left:0;right:0;height:60px;
  background:linear-gradient(to bottom,#123b4f 0%,transparent 100%);
  z-index:1;
  pointer-events:none;
}
/* Full-section transparent click overlay — sits above photo, below text/buttons */
.drqSectionLink{
  position:absolute;
  inset:0;
  z-index:2;
  cursor:pointer;
  display:block;
}
@media (max-width:900px){
  .drqSectionLink{display:none;}
}

/* Text content sits above photo layer */
.drqContent{
  position:relative;
  z-index:3;
  max-width:1220px;
  margin:0 auto;
  padding:0 24px;
}
.drqText{
  max-width:580px;
  padding:28px 0 0;
}
.drqEyebrow{
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:11px;
  display:flex;
  align-items:center;
  gap:10px;
}
.drqEyebrow::before{
  content:'';
  width:26px;height:2px;
  background:rgba(255,255,255,.3);
  flex-shrink:0;
}
.drqNameWrap{margin-bottom:10px;}
.drqName{
  font-size:clamp(28px,2.8vw,42px);
  font-weight:800;
  line-height:.96;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:#fff;
  margin:0;
}
.drqNickname{
  display:block;
  font-size:12px;
  font-weight:600;
  font-style:italic;
  color:rgba(255,255,255,.42);
  margin-top:5px;
  letter-spacing:.04em;
}
.drqMetaLine{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  margin:0 0 3px;
}
.drqMetaLineSub{
  font-size:10.5px;
  color:rgba(255,255,255,.3);
  margin-bottom:18px;
}
.drqDivider{
  width:36px;height:2px;
  background:rgba(255,255,255,.18);
  margin-bottom:16px;
}
.drqBlurb{
  font-size:14.5px;
  font-weight:500;
  line-height:1.7;
  color:rgba(255,255,255,.76);
  margin-bottom:16px;
}
.drqBlurb strong{
  color:rgba(255,255,255,.95);
  font-weight:700;
}
.drqBlurbLink{
  color:rgba(255,255,255,.88);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.3);
  transition:text-decoration-color .15s;
}
.drqBlurbLink:hover{text-decoration-color:rgba(255,255,255,.8);}
.drqCreds{
  list-style:none;
  margin:0 0 22px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.drqCreds li{
  font-size:12.5px;
  font-weight:600;
  color:rgba(255,255,255,.52);
  display:flex;
  align-items:center;
  gap:9px;
}
.drqCreds li::before{
  content:'';
  width:4px;height:4px;
  border-radius:50%;
  background:rgba(255,255,255,.3);
  flex-shrink:0;
}
.drqCtaRow{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:38px;
}
.btnLight{
  background:#fff;
  color:var(--brand2);
  border:none;
}
.btnLight:hover{
  background:rgba(255,255,255,.90);
  transform:translateY(-1px);
  color:var(--brand2);
}
.btnLight svg{margin-left:6px;}
.btnDrqGhost{
  background:transparent;
  color:rgba(255,255,255,.8);
  border:2px solid rgba(255,255,255,.32);
}
.btnDrqGhost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.65);
  color:#fff;
  transform:translateY(-1px);
}

/* Bottom overcast strip */
.drqStrip{
  position:relative;
  z-index:3;
  background:rgba(0,0,0,.32);
  border-top:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(2px);
}
.drqStripInner{
  max-width:1220px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
}
.drqStat{
  flex:1;
  padding:16px 22px;
  border-right:1px solid rgba(255,255,255,.06);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.drqStat:last-child{border-right:none;}
a.drqStat{text-decoration:none;transition:background .15s;}
a.drqStat:hover{background:rgba(255,255,255,.06);}
.drqStatNum{
  font-size:12px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.drqStatLabel{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.32);
}

/* ── Mobile: photo becomes faded bg, dark overlay keeps text legible ── */
@media (max-width:900px){
  .drqPhotoBg{
    width:100%;
    top:0;right:0;bottom:0;left:0;
  }
  .drqPhotoBgLink{pointer-events:none;}
  .drqPhotoBg img{
    object-position:70% top;
    opacity:.48;
  }
  .drqPhotoBg::before{
    width:100%;
    background:rgba(15,50,70,.54);
  }
  .drqPhotoBg::after{display:none;}
  .drqText{max-width:100%;padding:36px 0 0;}
  .drqCtaRow{padding-bottom:36px;}
  .drqStripInner{flex-wrap:wrap;padding:0 16px;}
  .drqStat{
    min-width:calc(50% - 32px);
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.06);
    padding:13px 8px;
  }
}
@media (max-width:520px){
  .drqName{font-size:30px;}
  .drqStat{min-width:100%;}
}
/* =========================================================
   Homepage mobile hero refinement
   Softer lower-third image blend + corrected mobile section order
========================================================= */
@media (max-width: 900px){
  /* Keep the homepage section order aligned with desktop on mobile */
  main:has(> .hero--photo):has(> .meetDrQ){
    display:flex;
    flex-direction:column;
  }
  main:has(> .hero--photo):has(> .meetDrQ) > .breadcrumbs--photo{order:1;}
  main:has(> .hero--photo):has(> .meetDrQ) > .hero--photo{order:2;}
  main:has(> .hero--photo):has(> .meetDrQ) > .meetDrQ{order:3;}
  main:has(> .hero--photo):has(> .meetDrQ) > .featured{order:4; display:block !important;}
  main:has(> .hero--photo):has(> .meetDrQ) > .homeSecondary{order:5;}

  /* Hide the mobile in-hero featured mount so Meet Dr. Q stays second */
  .featuredMobileMount{
    display:none !important;
  }
  .featured,
  .featured.featuredInHero{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .hero--photo{
    --hero-photo-h: clamp(220px, 55vw, 278px);
  }

  .hero--photo .heroBgPhotoWrap{
    height: var(--hero-photo-h);
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 84%, rgba(0,0,0,.72) 93%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 84%, rgba(0,0,0,.72) 93%, transparent 100%);
  }

  .hero--photo .heroBgPhotoImg{
    border-radius: 0;
    object-position: center 24%;
  }

  /* Softer, more gradual lower-third shading on the image */
  .hero--photo .heroBgPhotoWrap::after{
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        to bottom,
        rgba(18,59,79,0.00) 34%,
        rgba(18,59,79,0.03) 46%,
        rgba(18,59,79,0.08) 56%,
        rgba(18,59,79,0.16) 66%,
        rgba(18,59,79,0.28) 76%,
        rgba(18,59,79,0.44) 88%,
        rgba(18,59,79,0.58) 100%
      );
    pointer-events: none;
  }

  .hero--photo .heroGrid{
    position: relative;
    z-index: 1;
  }

  .hero--photo .heroLeft{
    position: relative;
    z-index: 2;
    padding-top: calc(var(--hero-photo-h) + 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero--photo .heroTitleBlock{
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 420px;
    margin: 8px auto 8px;
  }

  .hero--photo .heroTag{
    margin-top: 8px;
  }

  .hero--photo .heroCertBadge{
    margin: 12px auto 0;
  }

  .hero--photo .heroSub{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(var(--hero-photo-h) - 94px);
    width: min(90vw, 404px);
    max-width: calc(100% - 22px);
    margin: 0;
    padding: 14px 18px 42px;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: linear-gradient(
      to bottom,
      rgba(18,59,79,0.00) 0%,
      rgba(18,59,79,0.04) 10%,
      rgba(18,59,79,0.10) 24%,
      rgba(18,59,79,0.18) 40%,
      rgba(18,59,79,0.30) 58%,
      rgba(18,59,79,0.46) 78%,
      rgba(18,59,79,0.60) 100%
    );
    color: rgba(255,255,255,.98);
    font-size: clamp(13.5px, 3.75vw, 15.5px);
    line-height: 1.4;
    font-weight: 600;
    text-align: center;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: 0 2px 10px rgba(0,0,0,.48), 0 1px 2px rgba(0,0,0,.38);
    text-wrap: pretty;
  }

  /* Feather the top edge so the blend feels softer */
  .hero--photo .heroSub::before{
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: -30px;
    height: 52px;
    background: linear-gradient(
      to bottom,
      rgba(18,59,79,0.00) 0%,
      rgba(18,59,79,0.16) 100%
    );
    filter: blur(10px);
    opacity: .95;
    pointer-events: none;
  }

  .hero--photo .heroBgPill{
    top: 8px;
    right: 10px;
    transform: none;
  }

  .hero--photo .heroBtns{
    margin-top: 12px;
  }

  .featured{
    padding-top: 20px;
    margin-top: 0 !important;
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 520px){
  .hero--photo{
    --hero-photo-h: clamp(214px, 57vw, 258px);
  }

  .hero--photo .heroLeft{
    padding-top: calc(var(--hero-photo-h) + 10px);
  }

  .hero--photo .heroSub{
    top: calc(var(--hero-photo-h) - 90px);
    width: calc(100vw - 18px);
    max-width: 420px;
    padding: 12px 14px 38px;
    font-size: clamp(13px, 3.8vw, 15px);
    line-height: 1.38;
  }

  .hero--photo .heroSub::before{
    left: -10px;
    right: -10px;
    top: -26px;
    height: 46px;
  }

  .hero--photo .heroBgPill{
    top: 8px;
    right: 10px;
    font-size: 8px;
    letter-spacing: .07em;
    padding: 4px 9px;
  }
}

@media (max-width: 390px){
  .hero--photo{
    --hero-photo-h: 210px;
  }

  .hero--photo .heroSub{
    top: calc(var(--hero-photo-h) - 86px);
    width: calc(100vw - 14px);
    padding: 11px 11px 36px;
    font-size: 12.8px;
    line-height: 1.34;
  }

  .hero--photo .heroSub::before{
    top: -24px;
    height: 42px;
  }
}


/* =========================================================
   Final homepage hero refinements
   - restore visible mobile title block
   - soften mobile overlay transition and keep text lower
   - keep featured services after Meet Dr Q on mobile
   - improve narrow-desktop hero photo fill/crop
========================================================= */

/* Ensure the building photo wrapper actually fills its full area */
.heroBgPhotoWrap > picture{
  display:block;
  width:100%;
  height:100%;
}
.heroBgPhotoWrap > picture > img{
  width:100%;
  height:100%;
  display:block;
}

@media (min-width: 901px) and (max-width: 1240px){
  .hero--photo{
    min-height: clamp(540px, 52vw, 620px);
  }

  .hero--photo .heroBgPhotoWrap{
    left: 44%;
  }

  .hero--photo .heroBgPhotoImg{
    object-position: center 36%;
    transform: scale(1.055);
    transform-origin: center center;
  }

  /* very subtle continuation/fill so the lower area feels intentional */
  .hero--photo .heroBgPhotoWrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(
        to bottom,
        rgba(247,245,240,0.00) 0%,
        rgba(247,245,240,0.00) 60%,
        rgba(247,245,240,0.06) 76%,
        rgba(247,245,240,0.14) 88%,
        rgba(247,245,240,0.22) 100%
      );
    pointer-events:none;
  }
}

@media (max-width: 900px){
  main{
    display:flex;
    flex-direction:column;
  }

  .breadcrumbs--photo{order:1;}
  .hero--photo{order:2;}
  .meetDrQ{order:3;}
  .featured{order:4; display:block !important;}
  .homeSecondary{order:5;}

  .featuredMobileMount{
    display:none !important;
  }

  .featured,
  .featured.featuredInHero{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  .hero--photo{
    --hero-photo-h: clamp(214px, 56vw, 254px);
  }

  .hero--photo .heroBgPhotoWrap{
    height: var(--hero-photo-h);
    top:0;
    left:0;
    right:0;
    bottom:auto;
    z-index:0;
    overflow:hidden;
    -webkit-mask-image: linear-gradient(to bottom, black 88%, rgba(0,0,0,.72) 95%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 88%, rgba(0,0,0,.72) 95%, transparent 100%);
  }

  .hero--photo .heroBgPhotoImg{
    border-radius:0;
    object-position:center 18%;
    transform:none;
  }

  /* smoother, softer lower-third blend */
  .hero--photo .heroBgPhotoWrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(
        to bottom,
        rgba(18,59,79,0.00) 36%,
        rgba(18,59,79,0.02) 46%,
        rgba(18,59,79,0.05) 56%,
        rgba(18,59,79,0.10) 66%,
        rgba(18,59,79,0.18) 76%,
        rgba(18,59,79,0.28) 86%,
        rgba(18,59,79,0.40) 100%
      );
    pointer-events:none;
  }

  .hero--photo .heroGrid{
    position:relative;
    z-index:1;
  }

  .hero--photo .heroLeft{
    position:relative;
    z-index:2;
    padding-top: calc(var(--hero-photo-h) + 10px);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  /* restore the actual Horizon OMS title on mobile */
  .hero--photo .heroLeft h1.heroHeadline{
    position:static !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
    clip:auto !important;
    white-space:normal !important;
    border:0 !important;
    display:block !important;
    font-size: clamp(28px, 8.6vw, 42px);
    line-height:.92;
  }

  .hero--photo .heroLine1{
    display:block;
    white-space:nowrap;
  }

  .hero--photo .heroLine2{
    display:block;
    width:100%;
    text-align:center;
    font-size:.72em;
    letter-spacing:.14em;
    white-space:nowrap;
  }

  .hero--photo .homeLogoMobile{
    display:none !important;
  }

  .hero--photo .heroTitleBlock{
    position:relative;
    z-index:3;
    width:100%;
    max-width: 420px;
    margin: 8px auto 8px;
  }

  .hero--photo .heroTag{
    margin:8px 0 0;
    font-size:11px;
  }

  .hero--photo .heroCertBadge{
    margin: 12px auto 0;
  }

  .hero--photo .heroSub{
    position:absolute;
    left:50%;
    top: calc(var(--hero-photo-h) - 72px);
    transform:translateX(-50%);
    width:min(92vw, 416px);
    max-width: calc(100% - 16px);
    margin:0;
    padding: 10px 16px 18px;
    border:0;
    border-radius:0;
    background: linear-gradient(
      to bottom,
      rgba(18,59,79,0.00) 0%,
      rgba(18,59,79,0.06) 24%,
      rgba(18,59,79,0.14) 48%,
      rgba(18,59,79,0.26) 74%,
      rgba(18,59,79,0.38) 100%
    );
    color: rgba(255,255,255,.98);
    font-size: clamp(13.6px, 3.72vw, 15.2px);
    line-height:1.38;
    font-weight:600;
    text-align:center;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    text-shadow: 0 2px 10px rgba(0,0,0,.44), 0 1px 2px rgba(0,0,0,.34);
    text-wrap: pretty;
  }

  .hero--photo .heroSub::before{
    content:"";
    position:absolute;
    left:-16px;
    right:-16px;
    top:-34px;
    height:58px;
    background: linear-gradient(
      to bottom,
      rgba(18,59,79,0.00) 0%,
      rgba(18,59,79,0.05) 34%,
      rgba(18,59,79,0.14) 68%,
      rgba(18,59,79,0.22) 100%
    );
    filter: blur(14px);
    opacity:.78;
    pointer-events:none;
  }

  .hero--photo .heroBgPill{
    top:8px;
    right:10px;
    transform:none;
    z-index:6;
  }

  .featured{
    padding-top: 20px;
  }
}

@media (max-width: 520px){
  .hero--photo{
    --hero-photo-h: clamp(208px, 57vw, 246px);
  }

  .hero--photo .heroLeft{
    padding-top: calc(var(--hero-photo-h) + 10px);
  }

  .hero--photo .heroLeft h1.heroHeadline{
    font-size: clamp(24px, 8vw, 34px);
  }

  .hero--photo .heroTag{
    font-size: 10.5px;
  }

  .hero--photo .heroSub{
    top: calc(var(--hero-photo-h) - 70px);
    width: calc(100vw - 14px);
    max-width: 420px;
    padding: 9px 12px 16px;
    font-size: clamp(13px, 3.75vw, 14.6px);
    line-height:1.34;
  }

  .hero--photo .heroSub::before{
    left:-12px;
    right:-12px;
    top:-28px;
    height:48px;
  }

  .hero--photo .heroBgPill{
    top: 8px;
    right: 10px;
    font-size: 8px;
    letter-spacing: .07em;
    padding: 4px 9px;
  }
}

@media (max-width: 390px){
  .hero--photo{
    --hero-photo-h: 204px;
  }

  .hero--photo .heroSub{
    top: calc(var(--hero-photo-h) - 66px);
    width: calc(100vw - 12px);
    padding: 8px 10px 15px;
    font-size: 12.6px;
    line-height:1.32;
  }

  .hero--photo .heroSub::before{
    top:-24px;
    height:42px;
  }
}

/* =========================================================
   DEFINITIVE MOBILE HERO TAGLINE OVERRIDE — must be last
========================================================= */
@media (max-width: 900px){
  .hero--photo .heroSub{
    position:static !important;
    transform:none !important;
    top:auto !important; left:auto !important;
    width:100% !important; max-width:100% !important;
    order:-1;
    margin:0 0 6px !important;
    padding:8px 8px 4px !important;
    background:none !important;
    color:var(--muted) !important;
    font-size:clamp(13.5px, 3.8vw, 15px) !important;
    line-height:1.5 !important;
    font-weight:500 !important;
    text-align:center !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    text-shadow:none !important;
  }
  .hero--photo .heroSub::before{ display:none !important; }
  .hero--photo .heroTitleBlock{ order:0; }
  .hero--photo .heroLeft{ padding-top:calc(var(--hero-photo-h) + 18px) !important; }
}

/* =========================
   Patient Reviews
========================= */
.patientReviews{padding:32px 0 44px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.reviewsHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:16px;flex-wrap:wrap;}
.reviewsHeaderRight{display:flex;align-items:center;gap:14px;}
.reviewsRating{display:flex;align-items:center;gap:7px;padding:7px 14px;background:rgba(255,255,255,.80);border:1px solid var(--line);border-radius:999px;box-shadow:0 4px 12px rgba(11,31,43,.06);}
.reviewsStars{display:flex;gap:2px;}
.reviewsStar{color:#c9a04a;font-size:14px;line-height:1;}
.reviewsScore{font-size:14px;font-weight:800;color:var(--brand2);letter-spacing:.04em;}
.reviewsScrollBtns{display:none;gap:8px;}
.reviewsScrollOuter{position:relative;padding:0 56px;}
.reviewsTrack{display:flex;align-items:stretch;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:18px;padding-bottom:10px;scroll-snap-type:x mandatory;}
.reviewsTrack::-webkit-scrollbar{height:8px;}
.reviewsTrack::-webkit-scrollbar-thumb{background:rgba(20,44,60,.18);border-radius:999px;}
.reviewsTrack::-webkit-scrollbar-track{background:rgba(20,44,60,.06);border-radius:999px;}
#reviewsScrollPrevDesk{left:4px;}
#reviewsScrollNextDesk{right:4px;}
.reviewsScrollBtnMob{position:static;transform:none;width:34px;height:34px;}
.reviewsScrollBtnMob:hover{transform:scale(1.08);}
.reviewsScrollBtnMob:disabled{transform:none;opacity:.25;}

/* Card */
.reviewCard{
  flex:0 0 auto;min-width:290px;max-width:310px;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);border-top:3px solid transparent;
  border-radius:var(--radius);
  padding:22px 20px 18px;
  box-shadow:var(--shadow);
  color:inherit;cursor:default;
  scroll-snap-align:start;
  position:relative;overflow:hidden;
  transition:transform .18s cubic-bezier(0.34,1.56,0.64,1),box-shadow .20s ease,border-top-color .18s ease;
}
.reviewCard:hover,.reviewCard:focus{transform:translateY(-7px) scale(1.012);box-shadow:0 18px 45px rgba(11,31,43,.16);border-top-color:#c9a04a;outline:none;}
.reviewCard:active{transform:translateY(-2px) scale(1.004);transition-duration:.08s;}
.reviewCard--featured{border-top-color:#c9a04a;transform:translateY(-4px);box-shadow:0 18px 45px rgba(11,31,43,.14);}
.reviewCard--featured:hover,.reviewCard--featured:focus{transform:translateY(-11px) scale(1.015);}
@media(hover:none){.reviewCard{cursor:pointer;}}

/* Stars */
.reviewCardStars{display:flex;gap:2px;margin-bottom:12px;flex-shrink:0;}

/* Quote — KEY FIX: no flex:1, use plain overflow clamp */
.reviewCardQuote{
  font-size:14px;font-weight:500;line-height:1.68;color:var(--ink);
  margin:0 0 18px;
  padding-left:14px;border-left:3px solid rgba(201,160,74,.30);
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:6;
}

/* Footer: margin-top:auto pushes it to bottom (replaces flex:1 on quote) */
.reviewCardFooter{
  display:flex;align-items:center;gap:10px;
  padding-top:14px;border-top:1px solid var(--line);
  margin-top:auto;
}

/* Avatar color palette */
.reviewCardAvatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--brand2),#0f4c6a);}
.rca--gold  {background:linear-gradient(135deg,#c9a04a,#e2c07a) !important;color:var(--brand2) !important;}
.rca--teal  {background:linear-gradient(135deg,#1a6878,#2a8a9a) !important;}
.rca--plum  {background:linear-gradient(135deg,#6a3060,#8a5080) !important;}
.rca--terra {background:linear-gradient(135deg,#7a3820,#a05438) !important;}
.rca--forest{background:linear-gradient(135deg,#2a5c3a,#3a7c5a) !important;}
.rca--cobalt{background:linear-gradient(135deg,#2a3a8a,#4a5aaa) !important;}
.rca--amber {background:linear-gradient(135deg,#8a5c18,#aa7c38) !important;}
.rca--slate {background:linear-gradient(135deg,#3a4858,#586878) !important;}
.rca--ocean {background:linear-gradient(135deg,#1a5070,#2a7090) !important;}
.rca--rose  {background:linear-gradient(135deg,#7a3a4a,#9a5a6a) !important;}
.rca--sage  {background:linear-gradient(135deg,#3a5a48,#5a7a68) !important;}

.reviewCardMeta{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.reviewCardName{font-size:12.5px;font-weight:700;color:var(--brand2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reviewCardProcedure{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.reviewCardVerified{display:flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;flex-shrink:0;}
.reviewsFootnote{margin-top:20px;text-align:center;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;}

/* Desktop in-card overlay — fades in over card face on hover */
.rcqOverlay{
  position:absolute;inset:0;
  background:var(--surface);
  border-top:3px solid #c9a04a;
  padding:22px 20px 18px;
  display:flex;flex-direction:column;
  overflow-y:auto;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
  -webkit-mask-image:linear-gradient(to bottom,black 90%,transparent 100%);
  mask-image:linear-gradient(to bottom,black 90%,transparent 100%);
}
.reviewCard:hover .rcqOverlay,.reviewCard:focus .rcqOverlay{opacity:1;pointer-events:auto;}
.rcqOvQuote{
  font-size:13.5px;font-weight:500;line-height:1.72;color:var(--ink);
  margin:0 0 18px;padding-left:14px;
  border-left:3px solid rgba(201,160,74,.35);
  flex:1;
  /* Explicitly un-clamp inside overlay */
  display:block !important;overflow:visible !important;-webkit-line-clamp:unset !important;
}
.rcqOverlay .reviewCardFooter{margin-top:auto;border-top:1px solid var(--line);}

/* Mobile bottom sheet */
#reviewMobSheet{display:none;position:fixed;inset:0;z-index:500;align-items:flex-end;justify-content:center;}
#reviewMobSheet.rmsOpen{display:flex;}
.rmsBackdrop{position:absolute;inset:0;background:rgba(11,31,43,.54);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:rmsFadeIn .2s ease both;}
@keyframes rmsFadeIn{from{opacity:0;}to{opacity:1;}}
.rmsCard{position:relative;z-index:1;width:100%;max-width:520px;max-height:80vh;overflow-y:auto;background:var(--surface);border-top:3px solid #c9a04a;border-radius:22px 22px 0 0;padding:28px 22px 40px;box-shadow:0 -12px 48px rgba(11,31,43,.18);animation:rmsSlideUp .25s cubic-bezier(0.34,1.56,0.64,1) both;}
@keyframes rmsSlideUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
.rmsClose{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:background .15s,color .15s;}
.rmsClose:hover{background:var(--brand2);color:#fff;border-color:var(--brand2);}
.rmsQuote{font-size:15px;font-weight:500;line-height:1.72;color:var(--ink);margin:14px 0 18px;padding-left:14px;border-left:3px solid rgba(201,160,74,.35);}
.rmsFooter{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid var(--line);}

@media(max-width:720px){
  #reviewsScrollPrevDesk,#reviewsScrollNextDesk{display:none;}
  .reviewsScrollBtns{display:flex;}
  .reviewsScrollOuter{padding:0;}
}
@media(max-width:900px){
  main > .patientReviews{order:4;}
  main > .featured{order:5;}
  main > .homeSecondary{order:6;}
}

/* =========================
   Featured Services — dark (homepage only)
   Uses !important to reliably override base .fsCard rules
========================= */
.featured--dark{
  background:linear-gradient(135deg,var(--brand2) 0%,#0f4c6a 60%,#1a5c7a 100%) !important;
}
.featured--dark .sectionKicker{
  color:rgba(255,255,255,.80) !important;
}
.featured--dark .fsCard{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 4px 20px rgba(0,0,0,.22) !important;
  color:rgba(255,255,255,.88);
}
.featured--dark .fsCard:hover{
  background:rgba(255,255,255,.13) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:0 14px 36px rgba(0,0,0,.32) !important;
  transform:translateY(-4px);
}
.featured--dark .fsThumb{
  background:rgba(255,255,255,.06) !important;
}
.featured--dark .fsBody h3{
  color:rgba(255,255,255,.88) !important;
}
.featured--dark .fsBody p{
  color:rgba(255,255,255,.48) !important;
}
.featured--dark .fsArrow{
  border-color:rgba(255,255,255,.18) !important;
  color:rgba(255,255,255,.65) !important;
}
.featured--dark .fsScrollBtn{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.18) !important;
  color:rgba(255,255,255,.75) !important;
  box-shadow:0 4px 14px rgba(0,0,0,.22) !important;
}
.featured--dark .fsScrollBtn:hover{
  background:rgba(255,255,255,.22) !important;
  border-color:rgba(255,255,255,.35) !important;
  color:#fff !important;
  box-shadow:0 6px 20px rgba(0,0,0,.32) !important;
}
.featured--dark .fsScrollBtn:disabled{
  opacity:.15 !important;box-shadow:none !important;
}
.featured--dark .fsScroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);}
.featured--dark .fsScroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05);}

/* =========================
   Featured Services dark — depth + life pass
========================= */

/* Richer section background: radial warm/light spots over the base gradient */
.featured--dark{
  background:
    radial-gradient(ellipse 55% 60% at 15% 0%,   rgba(255,255,255,.05) 0%, transparent 65%),
    radial-gradient(ellipse 35% 50% at 90% 105%,  rgba(201,160,74,.07)  0%, transparent 60%),
    linear-gradient(135deg, var(--brand2) 0%, #0f4c6a 58%, #1a6070 100%) !important;
}

/* Cards: glass gradient with a specular top-edge highlight */
.featured--dark .fsCard{
  background:linear-gradient(170deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 100%) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-top:2px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.featured--dark .fsCard:hover{
  background:linear-gradient(170deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.09) 100%) !important;
  border-top-color:#c9a04a !important;
  border-color:rgba(255,255,255,.20) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
  transform:translateY(-5px) !important;
}

/* Image thumb: slight vignette at bottom so title doesn't float */
.featured--dark .fsThumb{
  background:rgba(255,255,255,.08) !important;
  position:relative;
}
.featured--dark .fsThumb::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, transparent 55%, rgba(11,31,43,.30) 100%);
  pointer-events:none;
}

/* Text */
.featured--dark .fsBody h3{color:rgba(255,255,255,.94) !important;}
.featured--dark .fsBody p{color:rgba(255,255,255,.52) !important;}

/* Arrow: filled circle, gold on hover */
.featured--dark .fsArrow{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.20) !important;
  color:rgba(255,255,255,.80) !important;
}
.featured--dark .fsCard:hover .fsArrow{
  background:#c9a04a !important;
  border-color:#c9a04a !important;
  color:#fff !important;
}

/* Scroll buttons */
.featured--dark .fsScrollBtn{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.20) !important;
  color:rgba(255,255,255,.80) !important;
  box-shadow:0 4px 16px rgba(0,0,0,.28) !important;
}
.featured--dark .fsScrollBtn:hover{
  background:rgba(255,255,255,.24) !important;
  border-color:rgba(255,255,255,.38) !important;
  color:#fff !important;
  box-shadow:0 6px 22px rgba(0,0,0,.36) !important;
}
.featured--dark .fsScrollBtn:disabled{opacity:.14 !important;box-shadow:none !important;}

/* Scrollbar */
.featured--dark .fsScroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);}
.featured--dark .fsScroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06);}

/* ══════════════════════════════════════════════════════════════════
   ULTRAWIDE ADAPTIVE LAYOUT
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
  .container,
  .drqContent {
    max-width: min(1600px, 94vw);
  }

  .reviewCard {
    flex: 1 1 auto;
    min-width: 300px;
    max-width: clamp(310px, 18vw, 440px);
  }
  .fsScroll .fsCard {
    flex: 1 1 auto;
    min-width: 260px;
    max-width: clamp(280px, 16vw, 380px);
  }

  .footerLinks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
    align-items: start;
  }

  .moreServicesGrid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .homeSecondaryGrid { gap: 80px; }
}

@media (min-width: 2200px) {
  .container,
  .drqContent {
    max-width: min(2000px, 96vw);
  }

  .reviewCard  { max-width: clamp(380px, 15vw, 520px); }
  .fsScroll .fsCard { max-width: clamp(320px, 13vw, 460px); }

  .moreServicesGrid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* ── Credentials box: tight around content, centered in column ── */
.homeSecondaryRight {
  display: flex;
  align-items: center;
  justify-content: center;
}
.homeSecondaryRight .credentialsStrip {
  width: fit-content;
}