/* ============================================================
   CARMEL DENTAL CLINIC — treatment & emergency content pages
   Tokens mirrored from style.css. Same palette, same type, same
   radii as the main site: no new design language is introduced.
   ============================================================ */

/* ---------- 0. FONTS ----------
   Self-hosted. These used to come from fonts.googleapis.com, which put a
   render-blocking cross-origin stylesheet in front of every font file: the
   browser could not even discover the woff2 URLs until that round trip came
   back, and the resulting chain was the largest single cost on the page.
   Served from this origin the files are on a connection that is already open,
   and font-display:swap means text paints in the fallback immediately.

   The latin-ext faces cost nothing unless a character in that range is
   actually rendered - the unicode-range keeps them off the wire otherwise.
   Fraunces is variable and its wght axis has been trimmed to the 500-600 the
   stylesheets ask for; opsz is untouched because optical sizing is live.
   Content pages: Poppins 400/500/600/700 plus Fraunces upright. */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-normal-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-normal-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-normal-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-normal-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-normal-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-normal-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-normal-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-normal-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 600;font-display:swap;src:url("/assets/fonts/fraunces-normal-500-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 600;font-display:swap;src:url("/assets/fonts/fraunces-normal-500-600-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Metric-matched fallbacks. font-display:swap paints text in a system font
   first, so if that font sets type at a different size the swap moves the
   layout underneath the reader - a real CLS cost paid to remove a real LCP
   one. These faces re-cut the system font to the same average character width
   and the same ascent, descent and line gap as the webfont it stands in for,
   measured glyph by glyph over a frequency-weighted corpus, so the swap is
   close to invisible and shifts nothing.

   Two per family because the platforms do not share a system font: Arial and
   Georgia exist on Windows, macOS and iOS; Android has Roboto and Noto Serif.
   Each is a separate family so the match is deterministic - a family whose
   local() font is absent is simply skipped, and the next one in the stack
   answers. */
@font-face{font-family:"Poppins Fallback";src:local("Arial");size-adjust:107.03%;ascent-override:98.10%;descent-override:32.70%;line-gap-override:9.34%}
@font-face{font-family:"Poppins Fallback Roboto";src:local("Roboto");size-adjust:108.76%;ascent-override:96.54%;descent-override:32.18%;line-gap-override:9.19%}
@font-face{font-family:"Fraunces Fallback";src:local("Georgia");size-adjust:108.44%;ascent-override:90.19%;descent-override:23.52%;line-gap-override:0%}
@font-face{font-family:"Fraunces Fallback Noto";src:local("Noto Serif");size-adjust:102.77%;ascent-override:95.16%;descent-override:24.81%;line-gap-override:0%}


:root{
  --white:#FFFFFF;
  --charcoal:#363435;
  --charcoal-300:#6E6A6C;
  --gold:#CBA365;
  --gold-deep:#AE7D42;
  --gold-light:#E6CEA8;
  --gold-ink:#8A6534;
  --charcoal-900:#1E1D1E;
  --grad-gold:linear-gradient(135deg,#E6CEA8 0%,#CBA365 38%,#AE7D42 78%,#886B47 100%);
  --cream:#FAF6EF;
  --cream-2:#F4EDE1;
  --ink:#232122;
  --muted:#6E6A67;
  --line:#EAE2D5;
  --line-soft:#F1EBE1;
  --danger:#9E3B33;
  --danger-bg:#F7EAE8;
  --r-sm:14px; --r-md:20px; --r-lg:28px; --r-pill:999px;
  --sh-2:0 2px 6px rgba(35,33,34,.05),0 12px 32px -8px rgba(35,33,34,.10);
  --ff-sans:"Poppins","Poppins Fallback","Poppins Fallback Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --ff-serif:"Fraunces","Fraunces Fallback","Fraunces Fallback Noto",Georgia,"Times New Roman",serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
body{
  font-family:var(--ff-sans);background:var(--white);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.72;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2.5px solid var(--gold-deep);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.wrap{max-width:72rem;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.measure{max-width:44rem}

/* ---------- header ---------- */
.top{border-bottom:1px solid var(--line-soft);padding:clamp(18px,3vw,24px) 0;position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:20}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{width:34px}
.brand b{font-size:.9375rem;font-weight:600;letter-spacing:-.01em}
.top__acts{display:flex;align-items:center;gap:10px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:var(--r-pill);font-size:.875rem;font-weight:600;
  white-space:nowrap;border:0;cursor:pointer;
  background:var(--charcoal);color:#fff;transition:.35s var(--ease-out);
}
.btn:hover{background:var(--gold-deep);transform:translateY(-2px)}
.btn--gold{background:var(--grad-gold);color:var(--charcoal-900)}
.btn--gold:hover{background:var(--charcoal);color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn--ghost:hover{background:var(--cream);border-color:var(--gold);color:var(--ink)}
.btn--sm{padding:10px 18px;font-size:.8125rem}
@media(max-width:640px){.top__acts .btn--ghost{display:none}}

/* ---------- breadcrumb ---------- */
.crumbs{padding:18px 0 0;font-size:.8125rem;color:var(--muted)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0}
.crumbs a:hover{color:var(--gold-deep)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}

/* ---------- hero ---------- */
.hero{padding:clamp(28px,5vw,48px) 0 clamp(34px,5vw,54px)}
.hero__grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,4vw,44px);align-items:center}
@media(min-width:960px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.eyebrow{
  font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-ink);margin-bottom:14px;
}
h1{
  font-family:var(--ff-serif);font-size:clamp(1.9rem,5vw,3rem);font-weight:600;
  line-height:1.08;letter-spacing:-.02em;text-wrap:balance;
}
.lead{margin-top:20px;font-size:1.0625rem;color:var(--charcoal-300)}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
/* A fixed box, so the reserved space is correct whatever shape the clinic
   uploads later. Without this, a portrait photo in a slot declared landscape
   both distorts and shifts the layout. */
.hero__img{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-2);aspect-ratio:16/10}
.hero__img img{width:100%;height:100%;object-fit:cover}

.facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding:0;list-style:none}
.facts li{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 16px;font-size:.8125rem;
}
.facts small{display:block;color:var(--muted);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
.facts b{font-weight:600}

/* ---------- sections ---------- */
.section{padding:clamp(34px,5.5vw,58px) 0;border-top:1px solid var(--line-soft)}
.section--cream{background:var(--cream);border-top:0}
h2{
  font-family:var(--ff-serif);font-size:clamp(1.4rem,3.2vw,2rem);font-weight:600;
  line-height:1.16;letter-spacing:-.015em;text-wrap:balance;
}
h3{font-size:1rem;font-weight:600;letter-spacing:-.01em}
p{margin-top:14px;color:var(--charcoal-300)}
p.tight{margin-top:8px}

/* checklists */
.checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:.9375rem}
.checks svg{width:20px;height:20px;color:var(--gold-deep);margin-top:2px}

/* numbered steps */
.steps{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.steps li{background:var(--white);padding:clamp(16px,2.6vw,22px);display:grid;grid-template-columns:2rem 1fr;gap:14px}
.steps b{display:block;font-weight:600;font-size:.9375rem}
.steps p{margin-top:5px;font-size:.875rem}
.steps i{
  font-style:normal;font-weight:600;font-size:.8125rem;color:var(--gold-deep);
  background:var(--cream-2);border-radius:50%;width:2rem;height:2rem;
  display:grid;place-items:center;
}

/* two-column split */
.split{display:grid;grid-template-columns:1fr;gap:clamp(24px,4vw,44px)}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}

/* danger callout — emergency page */
.alert{
  background:var(--danger-bg);border:1px solid rgba(158,59,51,.28);
  border-radius:var(--r-md);padding:clamp(18px,3vw,26px);margin-top:22px;
}
.alert b{color:var(--danger)}
.alert p{color:var(--ink);margin-top:10px;font-size:.9375rem}
.alert p:first-child{margin-top:0}

.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:clamp(18px,3vw,24px);
}
.card+.card{margin-top:12px}
.card p{margin-top:8px;font-size:.9375rem}

/* FAQ */
.faq{margin-top:24px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:18px 40px 18px 0;font-weight:600;font-size:.9375rem;cursor:pointer;
  list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease-out);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{padding:0 0 20px;margin-top:0;font-size:.9375rem}

/* related treatments */
.rel{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:12px;margin-top:24px}
.rel a{
  border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;
  display:block;transition:.3s var(--ease-out);background:var(--white);
}
.rel a:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:var(--sh-2)}
.rel b{font-weight:600;font-size:.9375rem}
.rel span{display:block;margin-top:4px;font-size:.8125rem;color:var(--muted)}

/* disclaimer */
.disclaimer{
  margin-top:clamp(30px,4vw,44px);padding-top:22px;border-top:1px solid var(--line);
  font-size:.8125rem;color:var(--muted);
}

/* ---------- footer ---------- */
.foot{background:var(--charcoal);color:rgba(255,255,255,.72);margin-top:clamp(40px,6vw,72px);padding:clamp(36px,5vw,56px) 0 0}
.foot__grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:760px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot .foot__h{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-light);margin:0 0 14px}
.foot ul{list-style:none;padding:0;display:grid;gap:9px;font-size:.875rem}
.foot a:hover{color:var(--gold-light)}
.foot p{color:rgba(255,255,255,.6);font-size:.875rem}
.foot__bar{
  margin-top:clamp(30px,4vw,48px);padding:22px 0;border-top:1px solid rgba(255,255,255,.10);
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between;
  font-size:.75rem;color:rgba(255,255,255,.6);
}

/* sticky mobile call bar */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:8px;
  padding:10px clamp(12px,4vw,20px);background:rgba(255,255,255,.95);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
}
.callbar .btn{flex:1}
@media(min-width:760px){.callbar{display:none}}
@media(max-width:759px){body{padding-bottom:76px}}

/* ---------- header navigation on standalone pages ----------
   The site is now multi-page, so every page carries the same menu the
   homepage does. These rules are lifted verbatim from style.css and resolve
   against the identical custom properties already declared above, so a link
   here renders pixel-identically to the same link on the homepage.

   One deliberate difference: the homepage hides this row below 1024px and
   swaps in a burger drawer driven by app.js. Standalone pages load no
   JavaScript, so instead of hiding the menu - which would leave a phone user
   with no way from Treatments to Reviews except the footer - it stays visible
   and scrolls sideways. */
.nav__links{display:flex;gap:2px;align-items:center;overflow-x:auto;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0;flex:1 1 auto;
  justify-content:center}
.nav__links::-webkit-scrollbar{display:none}
.nav__link{position:relative;padding:9px 12px;border-radius:var(--r-pill);flex:0 0 auto;
  font-size:.875rem;font-weight:500;color:var(--charcoal-300);transition:color .3s;
  text-decoration:none;white-space:nowrap}
.nav__link::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;
  background:var(--grad-gold);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out)}
.nav__link:hover,.nav__link[aria-current="page"]{color:var(--charcoal-900)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.top .brand{flex:0 0 auto}
@media(max-width:1100px){.nav__link{padding:9px 9px;font-size:.8125rem}}
@media(max-width:900px){
  .top .wrap{flex-wrap:wrap}
  .nav__links{justify-content:flex-start}
  .nav__links{order:3;width:100%;padding-top:4px}
}