/* ============================================================================
   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.
   ============================================================================ */

/* ---- 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; gap:0.6rem; font-weight:700; letter-spacing:-0.015em; color:var(--ink); font-size:1.02rem; }
.brand:hover{ text-decoration:none; color:var(--ink); }
.brand-mark{
  width:34px; height:34px; border-radius:9px; background:var(--royal);
  display:grid; place-items:center; color:#fff; font-weight:900; font-size:0.95rem;
}
.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; }
}
.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{
  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; gap:0.6rem; font-weight:700; font-size:1.05rem; margin-bottom:0.6rem; color:var(--paper); }
.footer-brand .brand-mark{ background:var(--cyan); color:var(--royal-deep); }
.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; }
  .hero-img img{ aspect-ratio:4/3; }
  .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); }
}