/* ============================================================================
   NS Family Dental — base.css
   Cinematic dental system. Palette B (brand-continuity blue, refined warm).
   Gate 2 design plan locked 2026-08-07. Satoshi only. Warm low-sat.
   ============================================================================ */

/* ---- 0. Satoshi ---------------------------------------------------------
   The design plan locked "Satoshi only" and `--font` has named it since, but
   no @font-face ever existed — so every visitor since launch has been served
   the system-ui fallback and the site has never once rendered in its own
   typeface. The five woff2 files were shipping and being cached for a year
   without ever being requested.

   Only the four weights the stylesheet actually uses are declared. 300 was
   shipped but never referenced by any rule, so it is gone rather than
   declared: a declared face nobody uses is dead weight in the deploy.

   `swap`, not `optional`: measured on Fast-3G + 4x CPU the swap costs
   **CLS 0.0000 -> 0.0043** on the homepage and 0.0000 elsewhere, nowhere near
   the 0.1 "good" threshold, and `optional` would mean first-time visitors on a
   slow connection never see the brand face at all.

   400 and 900 are preloaded in each page head. That is a measured choice, not
   a habit: preloading both is what keeps CLS at 0.0043, and dropping either
   makes it *worse* (400 only -> 0.0135, no preload -> 0.0167) because the swap
   lands later, after more of the page has painted. LCP is flat across all
   three variants (2.0-2.1s homepage), so the preload is free.

   Honest cost of having the typeface at all, same conditions: LCP ~1.8s -> 2.1s
   homepage vs. shipping no webfont. Re-measure with assets-src/measure.mjs
   before adding a fifth weight.
   ------------------------------------------------------------------------- */
@font-face{
  font-family:'Satoshi'; src:url('/assets/font/satoshi-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Satoshi'; src:url('/assets/font/satoshi-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Satoshi'; src:url('/assets/font/satoshi-700.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Satoshi'; src:url('/assets/font/satoshi-900.woff2') format('woff2');
  font-weight:900; font-style:normal; font-display:swap;
}

/* ---- 1. Tokens --------------------------------------------------------- */
:root{
  /* Palette B — locked */
  --paper:      #FAF9F4;   /* warm bone ground (replaces harsh #fff) */
  --paper-2:    #F1EFE6;   /* alt section band */
  --ink:        #0E1B2E;   /* deep navy text (replaces flat #000) */
  --soft:       #4A5670;   /* secondary text */
  --royal:      #0561c2;   /* the brand blue — single primary accent */
  --royal-deep: #034388;   /* hover + dark section fill */
  --royal-soft: #E6EFFA;   /* 8% royal tint surface */
  --cyan:       #2eb0ff;   /* existing accent — scoped to glow/links only */
  --amber:      #E8A95A;   /* one human-warmth pop (stars, doctor) */
  --amber-soft: #F6E4CB;
  --line:       #E0DDCD;   /* warm hairline */
  --line-soft:  #ECEAE0;
  --white:      #FFFFFF;

  /* typography */
  --font: 'Satoshi', system-ui, -apple-system, sans-serif;
  --fs-display: clamp(1.8rem, 1.2rem + 2.6vw, 3rem);
  --fs-h2:      clamp(1.55rem, 1.15rem + 1.9vw, 2.35rem);
  --fs-h3:      clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --fs-lead:    clamp(1.02rem, 0.96rem + 0.25vw, 1.18rem);
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.78rem;

  /* rhythm */
  --wrap:    1180px;
  --wrap-tight: 760px;
  --gutter:  1.5rem;
  --section: clamp(3.5rem, 8vw, 6.5rem);
  --radius:  14px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  /* elevation */
  --shadow-sm: 0 2px 10px rgba(14,27,46,0.06);
  --shadow:    0 10px 36px rgba(14,27,46,0.10);
  --shadow-lg: 0 24px 60px rgba(14,27,46,0.16);
}

/* ---- 2. Reset ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;            /* Gate 6: no horizontal scroll at any width */
  scroll-padding-top: 90px;     /* anchor jumps clear the sticky header */
}
body{
  font-family:var(--font);
  font-weight:400;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
/* All inline icon SVGs get explicit dimensions — prevents the viewBox-only
   default-size blowup where SVGs with no width/height attr stretch to fill
   their flex container. Component rules below refine per-context. */
svg[viewBox]{ width:1.25em; height:1.25em; flex-shrink:0; }
a{ color:var(--royal); text-decoration:none; }
a:hover{ color:var(--royal-deep); text-decoration:underline; text-underline-offset:3px; }
button{ font:inherit; cursor:pointer; border:0; background:transparent; color:inherit; }
ul,ol{ padding-left:1.2rem; }

/* ---- 3. Typography ----------------------------------------------------- */
h1,h2,h3,h4{ font-weight:700; letter-spacing:-0.022em; line-height:1.1; color:var(--ink); }
h1{ font-size:var(--fs-display); font-weight:900; letter-spacing:-0.038em; line-height:1.08; }
h2{ font-size:var(--fs-h2); letter-spacing:-0.025em; }
h3{ font-size:var(--fs-h3); }
p{ max-width:64ch; }
.lead{ font-size:var(--fs-lead); color:var(--soft); line-height:1.55; }
.kicker{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--royal);
  display:inline-block;
}
.eyebrow{ /* alias kept for clarity */ }
.display-em{ font-style:normal; color:var(--royal-deep); }
.stars{ color:var(--amber); letter-spacing:0.06em; }

/* ---- 4. Layout primitives --------------------------------------------- */
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }
.wrap-tight{ width:100%; max-width:var(--wrap-tight); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section); }
.section--alt{ background:var(--paper-2); }
.section--band{ background:var(--royal-deep); color:var(--paper); }
.section--band h2,.section--band h3{ color:var(--paper); }
.section--band p{ color:rgba(250,249,244,0.82); }
.section--band .kicker{ color:var(--cyan); }
.split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:center;
}
.split--wide{ grid-template-columns:1fr 1fr; }
@media (max-width:880px){ .split,.split--wide{ grid-template-columns:1fr; gap:1.6rem; } }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
@media (max-width:860px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

/* ---- 5. Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-weight:700; font-size:var(--fs-sm); letter-spacing:-0.005em;
  padding:0.78rem 1.3rem; border-radius:999px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  text-decoration:none; border:1.5px solid transparent;
  white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }
.btn--primary{ background:var(--royal); color:#fff; }
.btn--primary:hover{ background:var(--royal-deep); color:#fff; box-shadow:0 8px 20px rgba(5,97,194,0.28); }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--royal); color:var(--royal); }
.btn--light{ background:#fff; color:var(--royal-deep); }
.btn--light:hover{ background:var(--paper); color:var(--royal-deep); }
.btn--lg{ padding:0.95rem 1.6rem; font-size:var(--fs-body); }
.btn svg{ width:18px; height:18px; }

/* ---- 6. Header / nav --------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,249,244,0.86);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.site-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:var(--shadow-sm); }
.nav{
  max-width:var(--wrap); margin:0 auto; padding:0.85rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand:hover{ text-decoration:none; }
/* The lockup is a fixed-ratio raster (650x229). Height drives it and width
   follows, so the header never reflows while it decodes. */
.brand img{ height:50px; width:auto; display:block; }
/* The lockup is 2.84:1 with fine "DENTAL" letterspacing — below ~40px tall that
   line stops resolving, so it shrinks less than the rest of the header does. */
@media (max-width:480px){ .brand img{ height:42px; } }
.nav-links{ display:flex; gap:1.5rem; align-items:center; }
.nav-links a{
  font-size:var(--fs-sm); font-weight:500; color:var(--soft); letter-spacing:-0.005em;
}
.nav-links a:hover{ color:var(--ink); text-decoration:none; }
.nav-cta-group{ display:flex; align-items:center; gap:0.6rem; }
.nav-toggle{ display:none; width:42px; height:42px; border-radius:9px; align-items:center; justify-content:center; }
.nav-toggle svg{ width:22px; height:22px; }
@media (max-width:920px){
  .nav-links,.nav-cta-group .btn--ghost{ display:none; }
  .nav-toggle{ display:inline-flex; }
}
/* Below ~560px the logo + "Request appointment" + hamburger no longer fit on one
   line: the nav needed 424px of a 402px viewport and the hamburger was pushed
   past the right edge, so the mobile menu could not be opened at all on any
   common phone. The sticky .action-bar already offers Call and Book on every
   viewport under 920px, so the header CTA is dropped rather than shrunk. */
@media (max-width:560px){
  .nav-cta-group .btn--primary{ display:none; }
}
.mobile-menu{
  display:none;
  position:fixed; inset:0 0 0 auto; width:min(86vw,360px); z-index:200;
  background:var(--paper); box-shadow:var(--shadow-lg);
  padding:5rem 1.8rem 2rem; flex-direction:column; gap:0.4rem;
  transform:translateX(100%); transition:transform .28s ease;
}
.mobile-menu.is-open{ transform:translateX(0); }
.mobile-menu a{ font-size:1.05rem; font-weight:500; padding:0.7rem 0; border-bottom:1px solid var(--line-soft); color:var(--ink); }
.mobile-menu a:hover{ text-decoration:none; color:var(--royal); }
.mobile-menu .btn{ margin-top:1rem; }
.mobile-backdrop{
  display:none; position:fixed; inset:0; z-index:150;
  background:rgba(14,27,46,0.45); backdrop-filter:blur(2px);
}
.mobile-backdrop.is-open{ display:block; }
body.menu-open{ overflow:hidden; }
.mobile-menu-close{ position:absolute; top:1rem; right:1.2rem; width:42px; height:42px; font-size:1.4rem; }

/* ---- 7. Hero ----------------------------------------------------------- */
.hero{ position:relative; padding-block:clamp(2.5rem,5vw,4.2rem); overflow:hidden; }
.mesh-glow{ position:absolute; inset:-10%; z-index:0; pointer-events:none; filter:blur(60px); opacity:0.5; }
.blob{ position:absolute; border-radius:50%; mix-blend-mode:multiply; will-change:transform; }
.blob-1{ width:50vw; height:50vw; max-width:680px; max-height:680px; top:-12%; left:62%;
  background:radial-gradient(circle, rgba(46,176,255,0.42), transparent 70%); animation:drift1 20s ease-in-out infinite; }
.blob-2{ width:42vw; height:42vw; max-width:560px; max-height:560px; top:38%; left:8%;
  background:radial-gradient(circle, rgba(5,97,194,0.28), transparent 70%); animation:drift2 24s ease-in-out infinite; }
.blob-3{ width:36vw; height:36vw; max-width:480px; max-height:480px; top:64%; left:78%;
  background:radial-gradient(circle, rgba(232,169,90,0.26), transparent 70%); animation:drift3 28s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-6%,8%) scale(1.1);} }
@keyframes drift2{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-12%,-6%) scale(0.9);} }
@keyframes drift3{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(8%,-4%) scale(1.08);} }
@media (prefers-reduced-motion:reduce){ .blob{ animation:none; } }
.hero .split{ position:relative; z-index:2; }
.hero-img{ position:relative; }
.hero-img img{
  /* 4:5 matches the portrait's own ratio, so cover never actually crops. Keep
     the two in step: at 4:3 this box cut the top of his head AND the name on
     his scrubs, which is the whole point of the photo. */
  width:100%; border-radius:var(--radius-lg); aspect-ratio:4/5; object-fit:cover;
  box-shadow:var(--shadow-lg);
}
.hero-img::after{
  content:""; position:absolute; inset:-14px -14px auto auto; width:140px; height:140px; z-index:-1;
  background:radial-gradient(circle, var(--cyan), transparent 70%);
  filter:blur(28px); opacity:0.5; border-radius:50%;
}
.hero-badge{
  position:absolute; bottom:1rem; left:1rem; z-index:3;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(8px);
  padding:0.55rem 0.85rem; border-radius:var(--radius-sm);
  font-size:var(--fs-xs); font-weight:700; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:0.45rem;
}
.proof-chips{ margin-top:1.6rem; display:flex; flex-wrap:wrap; gap:0.6rem; }
.glass-chip{
  background:rgba(255,255,255,0.7); backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(255,255,255,0.6); border-radius:var(--radius);
  padding:0.7rem 1rem; display:flex; flex-direction:column; gap:0.1rem; min-width:120px;
}
.chip-num{ font-size:1.15rem; font-weight:900; letter-spacing:-0.03em; color:var(--royal-deep); }
.chip-label{ font-size:0.7rem; color:var(--soft); letter-spacing:-0.005em; }

/* ---- 8. Trust strip ---------------------------------------------------- */
.trust{ background:var(--paper-2); border-block:1px solid var(--line); padding-block:1.7rem; }
.trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); text-align:center; }
@media (max-width:560px){ .trust-grid{ grid-template-columns:1fr; gap:0.9rem; } }
.trust-num{ font-size:clamp(1.3rem,2.5vw,1.7rem); font-weight:900; letter-spacing:-0.03em; color:var(--royal); }
.trust-label{ font-size:var(--fs-xs); color:var(--soft); margin-top:0.15rem; }

/* ---- 9. Cards / pillars / services ------------------------------------ */
.pillar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:880px){ .pillar-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pillar-grid{ grid-template-columns:1fr; } }
.pillar,.svc,.feature-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem 1.4rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pillar:hover,.svc:hover,.feature-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--cyan); }
.pillar-ico,.svc-ico{
  width:42px; height:42px; border-radius:10px; background:var(--royal); color:#fff;
  display:grid; place-items:center; margin-bottom:0.8rem;
}
.pillar-ico svg,.svc-ico svg{ width:22px; height:22px; }
.pillar h3,.svc h3,.feature-card h3{ margin-bottom:0.35rem; }
.pillar p,.svc p,.feature-card p{ font-size:var(--fs-sm); color:var(--soft); max-width:none; }
.svc{ display:flex; flex-direction:column; }
.svc a{ font-size:var(--fs-sm); font-weight:700; margin-top:auto; padding-top:0.7rem; }

/* service tile bento on /dental-services/ */
.bento{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:0.9rem; }
@media (max-width:880px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .bento{ grid-template-columns:1fr; } }

/* ---- 10. Doctor -------------------------------------------------------- */
.doctor-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow-sm); }
.doctor-photo{ border-radius:var(--radius); overflow:hidden; aspect-ratio:1; }
.doctor-photo img{ width:100%; height:100%; object-fit:cover; }
.creds{ display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1rem; }
.cred{
  font-size:0.72rem; font-weight:700; padding:0.32rem 0.7rem; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--royal-deep);
}

/* ---- 11. Reviews ------------------------------------------------------- */
.review-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem; }
.review-stars{ color:var(--amber); font-size:1rem; margin-bottom:0.5rem; letter-spacing:0.08em; }
.review-text{ font-size:var(--fs-sm); color:var(--ink); margin-bottom:0.7rem; font-style:italic; line-height:1.55; }
.review-author{ font-size:var(--fs-xs); color:var(--soft); font-weight:700; }
.review-author span{ font-weight:400; color:var(--soft); }
.rating-summary{ display:flex; align-items:baseline; gap:0.6rem; margin-bottom:0.4rem; }
.rating-big{ font-size:clamp(2.4rem,5vw,3.2rem); font-weight:900; letter-spacing:-0.04em; color:var(--ink); line-height:1; }
.rating-sub{ font-size:var(--fs-sm); color:var(--soft); }
.google-attribution{ font-size:var(--fs-xs); color:var(--soft); display:flex; align-items:center; gap:0.4rem; margin-top:0.8rem; }
.google-attribution svg{ width:18px; height:18px; }

/* ---- 12. Forms --------------------------------------------------------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:0.35rem; }
.field--full{ grid-column:1/-1; }
.field label{ font-size:var(--fs-xs); font-weight:700; color:var(--ink); letter-spacing:-0.005em; }
.field input,.field select,.field textarea{
  font:inherit; font-size:var(--fs-sm); color:var(--ink);
  background:var(--white); border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:0.7rem 0.85rem; transition:border-color .18s, box-shadow .18s;
  width:100%; font-family:var(--font);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--royal); box-shadow:0 0 0 3px rgba(5,97,194,0.14);
}
.field textarea{ resize:vertical; min-height:120px; }
.field-hint{ font-size:0.72rem; color:var(--soft); }
.phi-notice{
  background:var(--amber-soft); border-left:3px solid var(--amber);
  padding:0.7rem 0.9rem; border-radius:6px; font-size:var(--fs-xs); color:var(--ink);
  margin-bottom:1rem; line-height:1.5;
}
.form-success{
  display:none; background:#E8F5E9; border:1px solid #A5D6A7; color:#1B5E20;
  padding:0.9rem 1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:var(--fs-sm);
}
.form-success.is-visible{ display:block; }
.form-error{
  display:none; background:#FFEBEE; border:1px solid #FFCDD2; color:#B71C1C;
  padding:0.9rem 1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:var(--fs-sm);
}
.form-error.is-visible{ display:block; }

/* ---- 13. Contact / map ------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.info-row{ display:flex; gap:0.8rem; padding:0.7rem 0; border-bottom:1px solid var(--line-soft); }
.info-row:last-child{ border-bottom:0; }
.info-ico{ width:36px; height:36px; border-radius:9px; background:var(--royal-soft); color:var(--royal); display:grid; place-items:center; flex-shrink:0; }
.info-ico svg{ width:18px; height:18px; }
.info-label{ font-size:var(--fs-xs); color:var(--soft); font-weight:700; text-transform:uppercase; letter-spacing:0.08em; }
.info-val{ font-size:var(--fs-sm); color:var(--ink); margin-top:0.1rem; }
.map-embed{ border:0; width:100%; height:340px; border-radius:var(--radius); box-shadow:var(--shadow-sm); filter:saturate(0.95); }

/* ---- 14. Footer -------------------------------------------------------- */
.site-footer{ background:var(--royal-deep); color:var(--paper); padding-block:clamp(3rem,6vw,4.5rem) 1.5rem; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; max-width:var(--wrap); margin:0 auto; padding-inline:var(--gutter); }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:1.5rem; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand{ display:flex; align-items:center; margin-bottom:0.9rem; }
/* Reversed lockup: the navy wordmark is remapped to white in the asset itself,
   because the footer ground is --royal-deep and the original would vanish. */
.footer-brand img{ height:44px; width:auto; display:block; }
.footer-col h4{ color:var(--paper); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:0.12em; margin-bottom:0.8rem; opacity:0.85; }
.footer-col a{ display:block; color:rgba(250,249,244,0.75); font-size:var(--fs-sm); padding:0.25rem 0; }
.footer-col a:hover{ color:var(--cyan); text-decoration:none; }
.footer-col p{ font-size:var(--fs-sm); color:rgba(250,249,244,0.75); }
.footer-bottom{ max-width:var(--wrap); margin:2.5rem auto 0; padding:1.2rem var(--gutter) 0; border-top:1px solid rgba(250,249,244,0.15); display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; font-size:var(--fs-xs); color:rgba(250,249,244,0.55); }
.footer-bottom a{ color:rgba(250,249,244,0.55); }
.footer-bottom a:hover{ color:var(--cyan); }

/* ---- 15. CTA band ------------------------------------------------------ */
.cta-band{ background:var(--royal-deep); color:var(--paper); padding-block:clamp(2.5rem,5vw,3.8rem); position:relative; overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; inset:0; opacity:0.18;
  background:radial-gradient(circle at 80% 20%, var(--cyan), transparent 50%);
}
.cta-band .wrap{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.cta-band h2{ color:var(--paper); max-width:18ch; }
.cta-band p{ color:rgba(250,249,244,0.82); margin-top:0.5rem; }

/* ---- 16. Cinematic motion (Gate 5 — scroll-reveal + hover physics) ----- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal-stagger.is-visible > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:0ms; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:80ms; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:160ms; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:240ms; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:320ms; }
.reveal-stagger.is-visible > *:nth-child(6){ transition-delay:400ms; }
.reveal-stagger.is-visible > *:nth-child(7){ transition-delay:480ms; }
.reveal-stagger.is-visible > *:nth-child(8){ transition-delay:560ms; }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger > *{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* count-up stat (used on about / home) */
.countup{ display:inline-block; }

/* scroll progress bar (the single modern signal at top) */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:300;
  background:linear-gradient(90deg, var(--royal), var(--cyan)); box-shadow:0 0 8px rgba(46,176,255,0.6); }

/* section divider accent */
.divider-accent{ width:48px; height:3px; background:var(--royal); border-radius:2px; margin-block:0.8rem 1.4rem; }

/* ---- 17. Utilities ----------------------------------------------------- */
.text-center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-0{ margin-top:0; } .mt-1{ margin-top:0.5rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.5rem; } .mt-4{ margin-top:2rem; }
.mb-0{ margin-bottom:0; } .mb-2{ margin-bottom:1rem; } .mb-3{ margin-bottom:1.5rem; }
.flex{ display:flex; } .flex-wrap{ flex-wrap:wrap; } .items-center{ align-items:center; } .gap-1{ gap:0.5rem; } .gap-2{ gap:1rem; }
.hide-mobile{ } .show-mobile{ display:none; }
@media (max-width:560px){ .hide-mobile{ display:none; } .show-mobile{ display:block; } }
.section-head{ margin-bottom:2.2rem; }
.section-head .kicker{ margin-bottom:0.4rem; }
.list-checks{ list-style:none; padding:0; }
.list-checks li{ position:relative; padding-left:1.8rem; margin-bottom:0.5rem; font-size:var(--fs-sm); color:var(--soft); }
.list-checks li::before{ content:""; position:absolute; left:0; top:0.35rem; width:18px; height:18px; background:var(--royal); border-radius:50%; }
.list-checks li::after{ content:"✓"; position:absolute; left:4px; top:0.3rem; color:#fff; font-size:0.7rem; font-weight:900; }

/* film-grain overlay for premium texture */
.grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.04;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

/* ---- 18. Sticky mobile action bar (patient-first: Call / Book / Directions) ---- */
.action-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(14,27,46,0.10);
  padding:0.55rem max(env(safe-area-inset-right), 0.6rem) max(env(safe-area-inset-bottom), 0.55rem);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.5rem;
  transform:translateY(110%);
  transition:transform .35s ease;
}
.action-bar.is-visible{ transform:translateY(0); }
.action-bar a{
  display:flex; flex-direction:column; align-items:center; gap:0.18rem;
  padding:0.55rem 0.3rem;
  font-size:0.68rem; font-weight:700; letter-spacing:-0.005em;
  color:var(--royal);
  text-decoration:none;
  border-radius:10px;
  min-height:54px; /* ≥48px tap target with label */
  justify-content:center;
}
.action-bar a:active{ background:var(--royal-soft); }
.action-bar a svg{ width:22px; height:22px; }
.action-bar .ab-call{ color:#fff; background:var(--royal); }
.action-bar .ab-call:active{ background:var(--royal-deep); }
.action-bar .ab-emergency{ color:var(--royal-deep); }
@media (min-width:920px){
  .action-bar{ display:none; } /* desktop has the header CTAs */
}
/* spacing so the action bar doesn't cover footer content on mobile */
@media (max-width:919px){
  body{ padding-bottom:80px; }
}

/* ---- 19. Emergency callout (the patient-in-pain section) ---- */
.emergency-callout{
  background:linear-gradient(135deg, var(--royal-deep), var(--royal));
  color:#fff;
  border-radius:var(--radius-lg);
  padding:clamp(1.3rem, 4vw, 1.9rem);
  position:relative;
  overflow:hidden;
}
.emergency-callout::before{
  content:""; position:absolute; top:-30px; right:-30px; width:140px; height:140px;
  background:radial-gradient(circle, var(--cyan), transparent 70%);
  opacity:0.35; filter:blur(20px); border-radius:50%;
}
.emergency-callout > *{ position:relative; z-index:1; }
.emergency-callout .kicker{ color:var(--cyan); }
.emergency-callout h2{ color:#fff; margin-top:0.4rem; font-size:clamp(1.3rem, 2.5vw, 1.7rem); }
.emergency-callout p{ color:rgba(255,255,255,0.88); margin-top:0.5rem; font-size:0.92rem; }
.emergency-callout .btn--light{ margin-top:0.9rem; }
.emergency-callout .btn--ghost{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.4); margin-top:0.9rem; }
/* Force ALL text inside the translucent card to white — it sits on the blue gradient */
.emergency-callout .doctor-card,
.emergency-callout .doctor-card h3,
.emergency-callout .doctor-card p,
.emergency-callout .doctor-card li{ color:#fff; }
.emergency-callout .doctor-card .list-checks li::before{ background:var(--cyan); }
.emergency-callout .doctor-card .list-checks li::after{ color:var(--royal-deep); }

/* ---- 20. Patient-priority hero (mobile-first) ---- */
@media (max-width:880px){
  .hero{ padding-top:clamp(1.2rem, 3vw, 1.8rem); padding-bottom:clamp(1.5rem, 4vw, 2.2rem); }
  .hero .split{ grid-template-columns:1fr; gap:1.2rem; }
  /* portrait smaller on mobile, sits below the text + CTAs (above the fold together) */
  .hero-img{ max-width:280px; margin:0 auto; order:2; }
  /* Deliberately NOT re-cropped to 4:3 here. The portrait carries the wall
     lockup at the top and his embroidered name at the chest; a landscape crop
     of a 4:5 source has to drop one of them. The image sits below the copy and
     CTAs, so its extra height costs nothing above the fold. */
  .hero-badge{ font-size:0.66rem; padding:0.4rem 0.7rem; }
  /* proof chips: 2-column tight row on mobile */
  .proof-chips{ display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-top:1.2rem; }
  .glass-chip{ padding:0.55rem 0.7rem; min-width:0; }
  .chip-num{ font-size:0.98rem; }
  .chip-label{ font-size:0.66rem; }
}

/* ---- 21. Location card (where are you? — patient question 3) ---- */
.location-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.location-card-map{ height:200px; background:var(--paper-2); }
.location-card-map iframe{ width:100%; height:100%; border:0; filter:saturate(0.95); }
.location-card-body{ padding:1.4rem; }
.location-card-body .info-row:first-child{ padding-top:0; }

/* ---- 22. Patient-priority section tweaks ---- */
/* tighten section padding on mobile */
@media (max-width:880px){
  .section{ padding-block:clamp(2.5rem, 7vw, 3.5rem); }
  .section-head{ margin-bottom:1.5rem; }
  .pillar{ padding:1.1rem; }
  .pillar-grid{ gap:0.7rem; }
  .doctor-card{ padding:1.1rem; }
}

/* ---- 23. Speed-tap row (the four things patients do) ---- */
.action-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0.7rem;
  margin-top:1.4rem;
}
.action-row a{
  display:flex; flex-direction:column; align-items:flex-start; gap:0.4rem;
  padding:1rem 1.1rem;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--ink);
  font-weight:700; font-size:0.92rem;
  transition:transform .18s, box-shadow .18s, border-color .18s;
  min-height:64px;
}
.action-row a:hover, .action-row a:active{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
  border-color:var(--royal);
  text-decoration:none;
}
.action-row a .ar-label{ color:var(--soft); font-size:0.72rem; font-weight:500; }
.action-row a svg{ width:22px; height:22px; color:var(--royal); }
@media (min-width:880px){
  .action-row{ grid-template-columns:repeat(4, 1fr); }
}

/* ---- 24. Office tour video + practice gallery ------------------------------
   The practice's own 28s walkthrough and the Google Business Profile photos.
   User-initiated playback: the clip carries a music bed and the audience is
   mobile-majority, so it is never autoplayed and only metadata is preloaded. */
.tour{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:var(--ink);
  line-height:0;
}
.tour video{
  display:block; width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover;
  background:var(--ink);
}
.tour-caption{
  line-height:1.5;
  font-size:var(--fs-sm); color:var(--soft);
  margin-top:0.7rem;
}

.gallery{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0.8rem;
  margin-top:1.1rem;
}
@media (min-width:760px){ .gallery{ grid-template-columns:repeat(4, 1fr); } }
.gallery figure{ margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.gallery img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/3; object-fit:cover;
  transition:transform .4s ease;
}
.gallery figure:hover img{ transform:scale(1.04); }
@media (prefers-reduced-motion: reduce){
  .gallery img, .gallery figure:hover img{ transition:none; transform:none; }
}

/* Storefront shot in the location block — this is what patients look for from
   the street, so it sits above the map rather than competing with it. */
.storefront{ margin-bottom:1.2rem; }
.storefront img{
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.storefront figcaption{
  font-size:var(--fs-sm); color:var(--soft);
  margin-top:0.6rem;
}
/* Pre-cropped 1200x973 so both the sign and the 850B entrance survive; the
   ratio here matches the asset exactly so the browser never re-crops it. */
.storefront img{ display:block; width:100%; height:auto; aspect-ratio:1200/973; }

/* Single wide photo used to open the interior pages. */
.page-banner{ margin:0 0 0.4rem; }
.page-banner img{
  display:block; width:100%; height:auto;
  aspect-ratio:16/7; object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
@media (max-width:640px){ .page-banner img{ aspect-ratio:16/9; border-radius:var(--radius); } }

/* ---- 25. Blog articles ----------------------------------------------------
   Long-form prose. `p{max-width:64ch}` in §2 already sets the measure; this is
   rhythm, list styling and the two callouts around the article body. */
.crumbs{ font-size:var(--fs-sm); color:var(--soft); }
.crumbs a{ color:var(--soft); }
.crumbs a:hover{ color:var(--royal); }
.post-meta{ font-size:var(--fs-sm); color:var(--soft); margin-top:0.6rem; }
.post-body{ margin-top:1.8rem; }
.post-body h2{ font-size:var(--fs-h3); margin-top:2.4rem; scroll-margin-top:5rem; }
.post-body h3{ font-size:1.05rem; margin-top:1.7rem; scroll-margin-top:5rem; }
.post-body p{ margin-top:0.9rem; color:var(--soft); }
.post-body strong{ color:var(--ink); font-weight:700; }
.post-body ul,.post-body ol{ margin:0.9rem 0 0 1.15rem; color:var(--soft); }
.post-body li{ margin-top:0.45rem; }
.post-body li::marker{ color:var(--royal); }
.post-body a{ color:var(--royal); text-decoration:underline; text-underline-offset:2px; }
/* The root-canal article carries a cost-comparison table; it must scroll inside
   its own box rather than making the page scroll sideways on a phone. */
.post-body table{ width:100%; border-collapse:collapse; margin-top:1.3rem; font-size:var(--fs-sm); display:block; overflow-x:auto; }
.post-body th,.post-body td{ border:1px solid var(--line); padding:0.6rem 0.75rem; text-align:left; vertical-align:top; }
.post-body th{ background:var(--royal-soft); color:var(--royal-deep); font-weight:700; }
.post-cta{ margin-top:3rem; padding:1.8rem; border-radius:var(--radius); background:var(--royal-soft); border:1px solid var(--line-soft); }
.post-disclaimer{ margin-top:1.6rem; font-size:0.78rem; color:var(--soft); }
.grid-1{ display:grid; gap:1.2rem; }
/* ---- 26. Ported treatment pages ------------------------------------------ */
.related{ margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.related h2{ font-size:var(--fs-h3); }
.related-links{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.9rem; }
.related-links a{
  font-size:var(--fs-sm); font-weight:500; padding:0.45rem 0.85rem; border-radius:999px;
  border:1px solid var(--line); background:var(--white); color:var(--royal-deep);
}
.related-links a:hover{ background:var(--royal-soft); text-decoration:none; }
.page-banner img{ width:100%; border-radius:var(--radius); display:block; }

/* ---- 27. Article layout (follows the client's own blog design) ------------ */
.chapters{
  margin-bottom:2rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--white); padding:0.35rem 1.1rem;
}
.chapters > summary{
  cursor:pointer; font-weight:700; font-size:var(--fs-sm); color:var(--royal-deep);
  padding:0.7rem 0; list-style:none; display:flex; align-items:center; gap:0.5rem;
}
.chapters > summary::-webkit-details-marker{ display:none; }
.chapters > summary::before{ content:"☰"; color:var(--royal); font-size:0.9em; }
.chapters > summary::after{ content:"▾"; margin-left:auto; transition:transform .18s ease; }
.chapters[open] > summary::after{ transform:rotate(180deg); }
.chapters ul{ margin:0 0 0.9rem 0; padding-left:0; list-style:none; columns:2; column-gap:2rem; }
@media (max-width:640px){ .chapters ul{ columns:1; } }
.chapters li{ margin-top:0.4rem; break-inside:avoid; }
.chapters a{ font-size:var(--fs-sm); color:var(--soft); text-decoration:none; }
.chapters a:hover{ color:var(--royal); text-decoration:underline; }

/* Opening section set around the illustration, as on his site. A two-column
   grid left a dead gap under the image — the reading measure here is 760px, so
   the text column runs much taller than the picture. Floating it instead lets
   the copy wrap and close the gap. Below 820px the float is dropped so a phone
   leads with the image, full width. */
.post-intro{ margin-bottom:1.6rem; }
.post-intro::after{ content:""; display:block; clear:both; }
.post-intro > div > h2:first-child{ margin-top:0; }
.post-intro p{ max-width:none; }   /* the 64ch measure would fight the float */
.post-hero{ float:left; width:46%; margin:0.35rem 1.6rem 0.9rem 0; }
.post-hero img{ width:100%; height:auto; border-radius:var(--radius); display:block; box-shadow:var(--shadow-sm); }
@media (max-width:820px){
  .post-hero{ float:none; width:100%; margin:0 0 1.2rem 0; }
  .post-intro p{ max-width:64ch; }
}