/* Local Med Spa Guide — consumer editorial.
   Deliberately distinct from the agency sites: serif display, generous measure,
   no webfonts (nothing loads from a third party), mobile-first. */

:root{
  --ink:#12262e;
  --ink-soft:#4d6772;
  --ink-faint:#7c949e;
  --line:#dfe8ea;
  --line-soft:#edf3f4;
  --sea:#0e4a5f;
  --sea-lift:#136279;
  --sand:#f8f5ef;
  --tint:#eef4f5;
  --flag:#f3ede0;
  --bg:#fff;
  --max:1120px;
  --narrow:700px;
  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 17px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}

h1,h2,h3{font-family:var(--serif); line-height:1.18; letter-spacing:-.012em; margin:0 0 .5em; font-weight:600}
h1{font-size:clamp(2.05rem,6vw,3.15rem)}
h2{font-size:clamp(1.45rem,3.6vw,1.95rem); margin-top:0}
h3{font-size:1.14rem; letter-spacing:-.006em}
p{margin:0 0 1.05em}
a{color:var(--sea); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--sea-lift)}
strong{font-weight:600}
.muted{color:var(--ink-soft)}
.small{font-size:.9rem}
:focus-visible{outline:2px solid var(--sea); outline-offset:3px; border-radius:3px}

.skip{position:absolute; left:-9999px; top:0; background:var(--sea); color:#fff; padding:10px 16px; z-index:99}
.skip:focus{left:8px; top:8px}

.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
/* narrow = a reading column pinned to the same left rail as everything else,
   not a centered island — keeps hero, body and card grids on one edge */
.wrap.narrow{max-width:var(--max)}
.wrap.narrow > *{max-width:var(--narrow)}
section{padding:38px 0}
section.tint{background:var(--tint)}
section + section{padding-top:0}
section.tint,section.partners,section.local{padding-top:38px!important}
section.tint + section,section.partners + section,section.local + section{padding-top:38px}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); position:sticky; top:0; z-index:20; backdrop-filter:saturate(1.4) blur(8px)}
.head-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:13px; padding-bottom:13px}
.brand{font-family:var(--serif); font-size:1.06rem; font-weight:600; letter-spacing:-.01em; text-decoration:none; color:var(--ink)}
.nav-toggle{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.nav-btn{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:7px 14px; cursor:pointer}
.bars{display:inline-block; width:15px; height:9px; border-top:1.5px solid currentColor; border-bottom:1.5px solid currentColor; position:relative}
.bars::after{content:""; position:absolute; left:0; right:0; top:3px; border-top:1.5px solid currentColor}
.head-nav{display:none}
.nav-toggle:checked ~ .head-nav{
  display:block; position:absolute; left:0; right:0; top:100%;
  background:#fff; border-bottom:1px solid var(--line); padding:14px 20px 22px;
  box-shadow:0 18px 32px -22px rgba(18,38,46,.4);
}
.head-nav a{display:block; padding:9px 0; font-size:1rem; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line-soft)}
.head-nav a:hover{color:var(--sea)}
.nav-h{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:16px 0 2px}
.nav-h:first-child{margin-top:0}
.head-nav .on-desk{display:none}
.head-cta{color:var(--sea)!important}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.82rem; color:var(--ink-faint); padding:14px 0 0}
.crumbs a{color:var(--ink-soft); text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{padding:0 8px; color:var(--line)}
.crumbs span:last-child{color:var(--ink-faint)}

/* ---------- hero ---------- */
.hero{padding:26px 0 30px; border-bottom:1px solid var(--line-soft)}
.hero.hero-home{background:linear-gradient(178deg,var(--sand),#fff 78%); border-bottom:1px solid var(--line); padding:44px 0 40px}
.hero h1{max-width:19ch}
.hero.hero-home h1{max-width:16ch}
.eyebrow{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:13px; font-weight:500}
.eyebrow a{color:var(--ink-faint)}
.lede{font-size:1.1rem; line-height:1.62; color:var(--ink-soft); max-width:60ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}

/* ---------- on-page nav ---------- */
.toc{border-bottom:1px solid var(--line-soft); background:#fff}
.toc > div{display:flex; gap:6px; overflow-x:auto; padding-top:12px; padding-bottom:12px; scrollbar-width:none}
.toc > div::-webkit-scrollbar{display:none}
.toc a{flex:0 0 auto; font-size:.83rem; color:var(--ink-soft); text-decoration:none; padding:6px 12px; border:1px solid var(--line); border-radius:999px; white-space:nowrap}
.toc a:hover{border-color:var(--sea); color:var(--sea)}

/* ---------- editorial body ---------- */
section .wrap.narrow > p,
section .wrap.narrow > ul,
section .wrap.narrow > ol{max-width:min(var(--narrow),68ch)}
h2{scroll-margin-top:80px}

.asks{margin:0 0 1.1em; padding-left:1.15em}
.asks li{margin-bottom:.72em}
.asks li::marker{color:var(--ink-faint)}

.checklist{list-style:none; margin:0 0 1.1em; padding:0}
.checklist li{position:relative; padding:0 0 .72em 30px}
.checklist li::before{
  content:""; position:absolute; left:2px; top:.52em; width:11px; height:6px;
  border-left:2px solid var(--sea); border-bottom:2px solid var(--sea);
  transform:rotate(-45deg);
}

.steps{list-style:none; counter-reset:s; margin:6px 0 1.2em; padding:0}
.steps li{counter-increment:s; position:relative; padding:0 0 20px 44px}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:0;
  width:28px; height:28px; border-radius:50%; background:var(--tint); color:var(--sea);
  font:600 .84rem/28px var(--sans); text-align:center;
}
.steps li::after{content:""; position:absolute; left:13.5px; top:32px; bottom:6px; border-left:1px solid var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.step-t{display:block; font-weight:600; margin-bottom:2px}
.step-d{display:block; color:var(--ink-soft)}

.local{background:var(--flag)}
.local .wrap{border-left:3px solid var(--sea); padding-left:17px}
.local-h{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--sea); margin-bottom:8px; font-weight:600}
.local p:last-child{margin-bottom:0}

/* ---------- cards + chips ---------- */
.cards{display:grid; grid-template-columns:1fr; gap:12px}
.card{display:block; padding:20px; border:1px solid var(--line); border-radius:14px; text-decoration:none; color:inherit; background:#fff; transition:border-color .15s, transform .15s, box-shadow .15s}
.card:hover{border-color:var(--sea); transform:translateY(-2px); box-shadow:0 16px 28px -24px rgba(14,74,95,.55)}
.card h3{margin-bottom:.34em}
.card p{margin:0; color:var(--ink-soft); font-size:.94rem; line-height:1.55}
.card-meta{margin-top:10px!important; font-size:.8rem!important; color:var(--ink-faint)!important; letter-spacing:.02em}
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{padding:9px 16px; border:1px solid var(--line); border-radius:999px; background:#fff; text-decoration:none; font-size:.92rem; color:var(--ink)}
.chip:hover{border-color:var(--sea); color:var(--sea)}

/* ---------- partner slot ---------- */
.partners{background:var(--tint)}
.empty-slot{border:1px dashed #b7cdd4; border-radius:14px; padding:22px; background:#fff}
.empty-slot p:last-child{margin-bottom:0}

.btn{display:inline-block; padding:12px 22px; border-radius:999px; background:var(--sea); color:#fff!important; text-decoration:none; font-size:.95rem; font-weight:500; border:1px solid var(--sea)}
.btn:hover{background:var(--sea-lift); border-color:var(--sea-lift)}
.btn-ghost{background:transparent; color:var(--sea)!important}
.btn-ghost:hover{background:var(--tint); color:var(--sea-lift)!important}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:16px 34px 16px 0; font-weight:600; position:relative; list-style:none; font-family:var(--serif); font-size:1.06rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:6px; top:24px; width:8px; height:8px; border-right:1.5px solid var(--ink-faint); border-bottom:1.5px solid var(--ink-faint); transform:rotate(45deg); transition:transform .18s}
.faq details[open] summary::after{transform:rotate(225deg); top:27px}
.faq-a{padding:0 0 14px}
.faq-a p{margin:0; color:var(--ink-soft)}

/* ---------- data ---------- */
.data-note{margin-top:20px; border-top:1px solid var(--line); padding-top:14px}
.data-note summary{cursor:pointer; color:var(--sea); font-size:.9rem}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:14px 0}
table.data{width:100%; min-width:420px; border-collapse:collapse; font-size:.9rem}
table.data th,table.data td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
table.data th{font-weight:600; color:var(--ink-soft); font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; white-space:nowrap}
table.data tr:last-child td{border-bottom:0}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line); padding:36px 0 26px; background:var(--sand); margin-top:40px}
.foot-cols{display:grid; grid-template-columns:1fr; gap:24px}
.foot-cols a{display:block; padding:4px 0; font-size:.93rem; text-decoration:none; color:var(--ink-soft)}
.foot-cols a:hover{color:var(--sea)}
.foot-brand{font-family:var(--serif); font-weight:600; margin-bottom:.3em}
.foot-h{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.5em}
.disclaimer{margin:28px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:.82rem; line-height:1.6; color:var(--ink-faint); max-width:74ch}
.legal{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:14px 0 0; font-size:.82rem; color:var(--ink-faint)}

/* ---------- breakpoints ---------- */
@media (min-width:620px){
  .cards{grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px}
  .foot-cols{grid-template-columns:repeat(2,1fr); gap:28px}
  section{padding:52px 0}
  section.tint,section.partners,section.local{padding-top:52px!important}
  section.tint + section,section.partners + section,section.local + section{padding-top:52px}
  .hero{padding:32px 0 40px}
  .hero.hero-home{padding:64px 0 56px}
  .wrap{padding:0 28px}
}

@media (min-width:900px){
  .nav-btn{display:none}
  .head-nav{display:flex; align-items:center; gap:20px}
  .head-nav a{padding:0; font-size:.92rem; color:var(--ink-soft); border-bottom:0}
  .head-nav .nav-h,.head-nav .on-mob{display:none}
  .head-nav .on-desk{display:block}
  .head-cta{border:1px solid var(--sea); border-radius:999px; padding:7px 15px!important}
  .foot-cols{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .card-lg{padding:26px}
  .toc > div{flex-wrap:wrap; overflow-x:visible}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important; animation:none!important}
  .card:hover{transform:none}
}

@media print{
  .site-head,.toc,.partners,.site-foot,.crumbs,.hero-cta{display:none}
  body{font-size:11pt}
  .faq details{display:block}
}