/* 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){
  .breadcrumbs{padding:0 16px;}
}

.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);
}
.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;
  white-space:nowrap;
}
.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;
  padding:10px 0 18px;
}
.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{grid-template-columns:1fr} }
@media (max-width: 900px){ .footerLinks a { padding: 12px 0; } }
.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; height:48px; padding:0 22px; border-radius:24px;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:13px; text-decoration:none;}
.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;}


.featured{padding:24px 0 52px;}
.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:128px; object-fit:cover; display:block;}

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

.fsTitleRow{display:flex; align-items:center; gap:10px;}
.fsBody h3{margin:0; font-size:18px; font-weight:800;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
  min-height:2.6em;}
.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;}

.fsArrow{margin-left:auto; 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;} }

.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:space-between;
    padding-top:4px;
    gap:12px;
  }
  header .cta .socials{display:none;}
  header .cta > a.btn{flex:1 1 auto; width:auto; padding:16px 14px; font-size:12px; letter-spacing:.14em;}
  header .cta > .ctaStack{flex:1 1 auto;}
  header .cta > button.burger{flex:0 0 auto;}

  /* 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:start;}
.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:nowrap}
@media (max-width:700px){
  .referralCtas{flex-direction:column;align-items:center}
  .referralCtas .btn{width:100%;max-width:460px}
}
/* Referrals page CTA buttons */
.referralCtas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.referralCtas .btn{white-space:nowrap}
@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:1;
  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;}
.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%;}
}