/* ==========================================================================
   Cove Dental — patient booking portal
   Design language: clean clinical + warm
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* neutrals */
  --ink:#0d1b2a;
  --ink-2:#243b4d;
  --muted:#63768a;
  --line:#e6edf2;
  --line-2:#eff4f7;
  --surface:#ffffff;
  --bg:#f7fafb;
  --tint:#f1f8f7;

  /* brand — every shade below is derived, so the portal's colour pickers can
     change --brand / --accent and the whole site follows in one step. */
  --brand:#0e7c74;
  --brand-dark:color-mix(in srgb, var(--brand) 76%, #000);
  --brand-mid:color-mix(in srgb, var(--brand) 84%, #fff);
  --brand-100:color-mix(in srgb, var(--brand) 16%, #fff);
  --brand-50:color-mix(in srgb, var(--brand) 7%, #fff);
  /* what sits *on* the brand colour — flipped to ink if the brand is pale */
  --brand-on:#fff;

  /* accents */
  --sky:#3a8fd4;
  --sky-100:#e6f1fb;
  --peach:#f0805a;
  --peach-100:color-mix(in srgb, var(--peach) 16%, #fff);
  --violet:#7768e8;
  --violet-100:#ecebfb;
  --amber:#e9a13b;

  /* status */
  --ok:#14976f;
  --warn:#d9822b;
  --danger:#d9534f;

  /* shape */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  /* elevation */
  --sh-xs:0 1px 2px rgba(13,27,42,.05);
  --sh-sm:0 2px 6px rgba(13,27,42,.05), 0 1px 2px rgba(13,27,42,.04);
  --sh-md:0 10px 24px -12px rgba(13,27,42,.16), 0 2px 6px rgba(13,27,42,.04);
  --sh-lg:0 26px 60px -30px rgba(13,27,42,.30), 0 6px 18px -8px rgba(13,27,42,.08);
  --sh-brand:0 14px 30px -14px color-mix(in srgb, var(--brand) 55%, transparent);

  /* motion */
  --ease:cubic-bezier(.22,.75,.28,1);
  --fast:.18s;
  --slow:.34s;

  --font:'Plus Jakarta Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4,h5{margin:0; color:var(--ink); font-weight:800; line-height:1.15; letter-spacing:-.02em}
p{margin:0}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}
fieldset{margin:0; padding:0; border:0; min-width:0}
legend{padding:0}
address{font-style:normal}
[hidden]{display:none !important}
::selection{background:var(--brand-100); color:var(--brand-dark)}
:focus-visible{outline:3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset:3px; border-radius:6px}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.skip-link{position:absolute; left:14px; top:-60px; z-index:200; background:var(--brand); color:var(--brand-on); padding:10px 16px; border-radius:var(--r-pill); font-weight:700; transition:top var(--fast)}
.skip-link:focus{top:14px}

/* icons */
.ic{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none}
.ic-flip{transform:rotate(180deg)}

/* ---------- 3. Layout helpers ---------- */
.container{width:100%; max-width:1200px; margin-inline:auto; padding-inline:24px}
.section{padding:96px 0}
.section-tint{background:linear-gradient(180deg,#fff 0%, var(--tint) 45%, var(--tint) 100%)}
.section-head{max-width:660px; margin:0 auto 52px; text-align:center}
.section-head h2{font-size:clamp(1.75rem,3.4vw,2.5rem); margin-bottom:14px}
.section-head p{color:var(--muted); font-size:1.06rem}
.eyebrow{
  display:inline-block; margin-bottom:14px; padding:6px 14px;
  background:var(--brand-100); color:var(--brand-dark);
  font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  border-radius:var(--r-pill);
}
.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:var(--r-pill);
  font-weight:700; font-size:.95rem; line-height:1.2; letter-spacing:-.01em;
  border:1.5px solid transparent; white-space:nowrap;
  transition:transform var(--fast) var(--ease), box-shadow var(--fast), background-color var(--fast), border-color var(--fast), color var(--fast);
}
.btn .ic{width:17px; height:17px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brand); color:var(--brand-on); box-shadow:var(--sh-brand)}
.btn-primary:hover{background:var(--brand-dark); box-shadow:0 18px 34px -14px color-mix(in srgb, var(--brand) 60%, transparent)}
.btn-soft{background:var(--brand-50); color:var(--brand-dark); border-color:var(--brand-100)}
.btn-soft:hover{background:var(--brand-100); border-color:#bfe4de}
.btn-ghost{background:#fff; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:#cddbe4; background:#fcfefe}
.btn-ghost[disabled]{opacity:.5; pointer-events:none}
.btn-white{background:#fff; color:var(--brand-dark)}
.btn-white:hover{background:var(--brand-50)}
.btn-outline{border-color:rgba(255,255,255,.55); color:#fff}
.btn-outline:hover{background:rgba(255,255,255,.14); border-color:#fff}
.btn-lg{padding:15px 26px; font-size:1rem}
.btn-block{display:flex; width:100%}
.link-btn{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--brand); font-weight:700; font-size:.92rem;
  padding:4px 0; border-radius:6px;
  transition:gap var(--fast) var(--ease), color var(--fast);
}
.link-btn:hover{gap:12px; color:var(--brand-dark)}
.link-btn .ic{width:16px; height:16px}

/* ---------- 5. Small components ---------- */
.pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 11px; margin-bottom:22px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:.85rem; font-weight:600; color:var(--ink-2);
  box-shadow:var(--sh-xs);
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--brand-mid); flex:none}
.dot-live{width:7px; height:7px; box-shadow:0 0 0 0 rgba(22,160,149,.55); animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(22,160,149,0)} 100%{box-shadow:0 0 0 0 rgba(22,160,149,0)}}

.avatar{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:40px; height:40px; border-radius:50%; overflow:hidden;
  font-size:.85rem; font-weight:800; letter-spacing:.02em; color:var(--brand-on);
  background:linear-gradient(140deg,var(--brand-mid),var(--brand));
}
.avatar svg{width:19px; height:19px; stroke-width:1.9}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar-lg{width:50px; height:50px; font-size:1rem}
.avatar-xl{width:66px; height:66px; font-size:1.2rem; border:4px solid rgba(255,255,255,.9); box-shadow:var(--sh-md)}
.avatar-sky{background:linear-gradient(140deg,#59a9e4,var(--sky))}
.avatar-peach{background:linear-gradient(140deg,#f79a76,var(--peach))}
.avatar-any{background:linear-gradient(140deg,#8f9fb0,#65788b)}

.chip-ic{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:32px; height:32px; border-radius:11px;
  background:var(--brand-100); color:var(--brand-dark);
}
.chip-ic .ic{width:17px; height:17px}
.chip-ic-peach{background:var(--peach-100); color:#c9552e}
.chip-ic-sky{background:var(--sky-100); color:#22709f}
.chip-ic-lg{width:52px; height:52px; border-radius:17px}
.chip-ic-lg .ic{width:25px; height:25px}

/* ---------- 6. Topbar ---------- */
.topbar{background:var(--ink); color:#c7d5e0; font-size:.82rem}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:40px; padding-block:6px}
.topbar-msg{display:flex; align-items:center; gap:8px; font-weight:600; min-width:0}
.topbar-msg .ic{width:15px; height:15px; color:var(--brand-mid)}
.topbar-msg a{color:#fff; text-decoration:underline; text-underline-offset:3px; font-weight:700; white-space:nowrap}
.topbar-meta{display:flex; gap:22px}
.topbar-meta li{display:flex; align-items:center; gap:7px; white-space:nowrap}
.topbar-meta .ic{width:14px; height:14px; opacity:.7}

@media (max-width:1140px){ .topbar-meta li:first-child{display:none} }
@media (max-width:960px){ .topbar-meta{display:none} .topbar-inner{justify-content:center} }

/* ---------- 7. Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow var(--fast), border-color var(--fast), background-color var(--fast);
}
.site-header.is-stuck{border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(13,27,42,.5)}
.header-inner{display:flex; align-items:center; gap:26px; min-height:74px}
.brand{display:inline-flex; align-items:center; gap:11px; flex:none}
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px;
  background:linear-gradient(145deg,var(--brand-mid),var(--brand-dark));
  color:#fff; box-shadow:var(--sh-brand);
}
.brand-mark .ic{width:21px; height:21px; fill:currentColor; stroke:none}
.brand-mark img{width:100%; height:100%; object-fit:contain; border-radius:7px}
.brand-text{font-size:1.16rem; font-weight:800; color:var(--ink); letter-spacing:-.03em}
.brand-text em{font-style:normal; color:var(--brand)}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{
  padding:9px 14px; border-radius:var(--r-pill);
  font-size:.94rem; font-weight:600; color:var(--ink-2);
  transition:background-color var(--fast), color var(--fast);
}
.nav a:hover{background:var(--brand-50); color:var(--brand-dark)}
.header-actions{display:flex; align-items:center; gap:10px; margin-left:auto}
.nav-toggle{display:none; width:44px; height:44px; border-radius:12px; border:1.5px solid var(--line); background:#fff; align-items:center; justify-content:center; color:var(--ink)}
.nav-toggle .ic{width:21px; height:21px}
.nav-toggle .ic-close{display:none}
.nav-toggle[aria-expanded="true"] .ic-menu{display:none}
.nav-toggle[aria-expanded="true"] .ic-close{display:block}

/* ---------- 8. Hero ---------- */
.hero{position:relative; overflow:hidden; padding:74px 0 88px; background:
  radial-gradient(1100px 460px at 82% -10%, var(--brand-100) 0%, rgba(220,241,238,0) 62%),
  radial-gradient(760px 400px at 4% 12%, #fdf0e9 0%, rgba(253,240,233,0) 60%),
  linear-gradient(180deg,#fff, var(--bg));}
/* Optional banner uploaded from the practice portal — washed out on the
   copy side so the headline keeps its contrast. */
.hero-photo{position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 38%}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(247,250,251,.96) 0%, rgba(247,250,251,.88) 36%,
    rgba(247,250,251,.46) 66%, rgba(247,250,251,.16) 100%);
}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center}
.hero-copy h1{font-size:clamp(2.3rem,4.6vw,3.55rem); line-height:1.06; letter-spacing:-.035em; margin-bottom:22px}
.hl{position:relative; color:var(--brand); white-space:nowrap}
.hl::after{
  content:''; position:absolute; left:0; right:0; bottom:.06em; height:.34em;
  background:var(--brand-100); border-radius:var(--r-pill); z-index:-1;
}
.lede{font-size:1.12rem; color:var(--muted); max-width:52ch; margin-bottom:32px}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px}
.hero-trust{display:flex; flex-wrap:wrap; gap:12px 26px; padding-top:26px; border-top:1px dashed var(--line)}
.hero-trust li{display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--muted); font-weight:500}
.hero-trust strong{color:var(--ink); font-weight:800}
.hero-trust .ic{width:16px; height:16px; color:var(--brand)}
.hero-trust li:first-child .ic{color:var(--amber)}

/* hero visual */
.hero-visual{position:relative; min-height:440px; display:flex; align-items:center; justify-content:center}
.hv-blob{position:absolute; border-radius:50%; filter:blur(2px); z-index:0}
.hv-blob-1{width:300px; height:300px; top:-10px; right:0; background:radial-gradient(circle at 30% 30%, #d7f0ec, #eaf7f5)}
.hv-blob-2{width:210px; height:210px; bottom:6px; left:8px; background:radial-gradient(circle at 40% 40%, #fde4d7, #fdf1ea)}
.hv-panel{
  position:relative; z-index:2; width:min(360px,100%);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:26px; box-shadow:var(--sh-lg);
}
.hv-tooth{position:absolute; right:-34px; bottom:-40px; width:150px; height:150px; fill:var(--brand-50); stroke:none; z-index:-1}
.hv-label{font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand)}
.hv-time{display:block; font-size:2.6rem; font-weight:800; letter-spacing:-.04em; color:var(--ink); line-height:1.1; margin-top:6px}
.hv-dentist{display:flex; align-items:center; gap:13px; margin:20px 0 16px; padding-top:18px; border-top:1px solid var(--line-2)}
.hv-dentist strong{display:block; color:var(--ink); font-size:.99rem}
.hv-dentist span{font-size:.85rem; color:var(--muted)}
.hv-meta{display:flex; gap:16px; margin-bottom:20px; font-size:.86rem; color:var(--muted); font-weight:600}
.hv-meta span{display:flex; align-items:center; gap:7px}
.hv-meta .ic{width:15px; height:15px; color:var(--brand)}
.hv-chip{
  position:absolute; z-index:3; display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px 9px 9px; font-size:.84rem; font-weight:700; color:var(--ink);
  box-shadow:var(--sh-md); animation:float 6s var(--ease) infinite;
}
.hv-chip-1{top:16px; left:-6px}
.hv-chip-2{bottom:74px; right:-14px; animation-delay:-2s}
.hv-chip-3{bottom:6px; left:26px; animation-delay:-4s}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-11px)}}

/* ---------- 9. Stats ---------- */
.stats{background:var(--surface); border-block:1px solid var(--line); padding:38px 0}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.stat strong{display:block; font-size:clamp(1.7rem,3vw,2.35rem); font-weight:800; color:var(--ink); letter-spacing:-.04em; line-height:1.15}
.stat span{font-size:.87rem; color:var(--muted); font-weight:600}

/* ---------- 10. Service cards ---------- */
.service-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px; display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--sh-xs);
  transition:transform var(--slow) var(--ease), box-shadow var(--slow), border-color var(--slow);
}
.service-card:hover{transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:#d9e6ec}
.svc-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:15px;
  background:var(--brand-100); color:var(--brand-dark);
}
.svc-ic .ic{width:24px; height:24px}
.svc-ic-peach{background:var(--peach-100); color:#c9552e}
.svc-ic-sky{background:var(--sky-100); color:#22709f}
.svc-ic-violet{background:var(--violet-100); color:#5142c4}
.svc-ic-coral{background:#fdecec; color:#c9413d}
.service-card h3{font-size:1.13rem}
.service-card p{color:var(--muted); font-size:.93rem}
.svc-meta{display:flex; gap:16px; margin-top:auto; padding-top:6px}
.svc-meta li{display:flex; align-items:center; gap:7px; font-size:.83rem; font-weight:700; color:var(--ink-2); background:var(--line-2); padding:5px 11px; border-radius:var(--r-pill)}
.svc-meta .ic{width:14px; height:14px; color:var(--brand)}
.svc-urgent{background:linear-gradient(160deg,#fff 40%, #fff6f4); border-color:#f7dedb}
.svc-urgent .svc-ic{animation:pulse-soft 2.6s var(--ease) infinite}
@keyframes pulse-soft{0%,100%{transform:scale(1)} 50%{transform:scale(1.06)}}

/* ---------- 11. How it works ---------- */
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step}
.step-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 26px 28px; box-shadow:var(--sh-sm);
}
.step-card:not(:last-child)::after{
  content:''; position:absolute; top:54px; right:-25px; width:26px; height:2px;
  background:repeating-linear-gradient(90deg,var(--brand-100) 0 6px, transparent 6px 11px);
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:16px; border-radius:14px;
  background:var(--brand); color:var(--brand-on); font-weight:800; font-size:1.05rem;
  box-shadow:var(--sh-brand);
}
.step-card h3{font-size:1.1rem; margin-bottom:9px}
.step-card p{color:var(--muted); font-size:.94rem}

/* ---------- 12. Dentist cards ---------- */
.dentist-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm); transition:transform var(--slow) var(--ease), box-shadow var(--slow)}
.dentist-card:hover{transform:translateY(-6px); box-shadow:var(--sh-lg)}
.dentist-top{position:relative; display:flex; align-items:flex-end; justify-content:space-between; padding:22px 24px 0; height:112px}
.dc-teal{background:linear-gradient(150deg,var(--brand-100),var(--brand-50))}
.dc-sky{background:linear-gradient(150deg,var(--sky-100),#f4f9fe)}
.dc-peach{background:linear-gradient(150deg,var(--peach-100),#fff8f5)}
.avail{
  display:inline-flex; align-items:center; gap:7px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:6px 13px; font-size:.78rem; font-weight:800; color:var(--ink);
  box-shadow:var(--sh-xs); margin-bottom:14px;
}
.dentist-body{padding:22px 24px 26px; display:flex; flex-direction:column; gap:11px}
.dentist-body h3{font-size:1.13rem}
.role{font-size:.85rem; font-weight:700; color:var(--brand); margin-top:-6px}
.dentist-body p{color:var(--muted); font-size:.92rem}
.tag-list{display:flex; flex-wrap:wrap; gap:7px; margin-top:2px}
.tag-list li{font-size:.76rem; font-weight:700; color:var(--ink-2); background:var(--line-2); border-radius:var(--r-pill); padding:5px 11px}
.dentist-body .btn{margin-top:8px}

/* ---------- 13. Booking ---------- */
.booking-section{background:
  radial-gradient(900px 420px at 50% 0%, var(--brand-50) 0%, rgba(240,250,248,0) 70%),
  var(--bg);}
.booking-shell{
  display:grid; grid-template-columns:1fr 336px; gap:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg);
}
.booking-main{padding:30px 32px 28px; min-width:0}

/* stepper */
.stepper{display:flex; gap:6px; margin-bottom:28px; padding-bottom:24px; border-bottom:1px solid var(--line-2)}
.step-node{position:relative; flex:1; display:flex; align-items:center; gap:10px; min-width:0}
.node-dot{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:50%;
  background:var(--line-2); color:var(--muted);
  font-size:.83rem; font-weight:800;
  transition:background-color var(--fast), color var(--fast), box-shadow var(--fast);
}
.node-label{font-size:.85rem; font-weight:700; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color var(--fast)}
.step-node:not(:last-child)::after{
  content:''; position:absolute; left:38px; right:8px; top:14px; height:2px;
  background:var(--line); z-index:-1;
}
.step-node.is-active .node-dot{background:var(--brand); color:var(--brand-on); box-shadow:0 0 0 5px var(--brand-100)}
.step-node.is-active .node-label{color:var(--ink)}
.step-node.is-done .node-dot{background:var(--brand-100); color:var(--brand-dark)}
.step-node.is-done .node-label{color:var(--ink-2)}

/* panels */
.step-panel{display:none; animation:panelIn .32s var(--ease)}
.step-panel.is-active{display:block}
@keyframes panelIn{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
.step-panel legend h3{font-size:1.24rem; margin-bottom:5px}
.step-panel legend p{color:var(--muted); font-size:.93rem; margin-bottom:20px}

.opt-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.opt-card{
  display:flex; align-items:center; gap:13px; text-align:left;
  padding:15px 16px; background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-md);
  transition:border-color var(--fast), background-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.opt-card:hover{border-color:#bfe0dc; background:var(--brand-50); transform:translateY(-2px)}
.opt-card.is-selected{border-color:var(--brand); background:var(--brand-50); box-shadow:0 0 0 3px var(--brand-100)}
.opt-main{display:flex; flex-direction:column; gap:3px; min-width:0; flex:1}
.opt-main strong{font-size:.96rem; color:var(--ink); font-weight:700}
.opt-main em{font-style:normal; font-size:.82rem; color:var(--muted)}
.opt-side{display:flex; flex-direction:column; align-items:flex-end; gap:3px; text-align:right}
.opt-side b{font-size:.93rem; font-weight:800; color:var(--brand-dark); white-space:nowrap}
.opt-side i{font-style:normal; font-size:.78rem; color:var(--muted); font-weight:600; white-space:nowrap}
.opt-dentist .avatar{width:38px; height:38px; font-size:.8rem}

/* date strip */
.date-strip{display:flex; gap:10px; overflow-x:auto; padding:3px 2px 14px; scrollbar-width:thin}
.date-strip::-webkit-scrollbar{height:6px}
.date-strip::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
.date-btn{
  flex:none; width:66px; padding:11px 6px; text-align:center;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md);
  transition:border-color var(--fast), background-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.date-btn:hover:not(:disabled){border-color:#bfe0dc; background:var(--brand-50); transform:translateY(-2px)}
.date-btn .dow{display:block; font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.date-btn .dnum{display:block; font-size:1.28rem; font-weight:800; color:var(--ink); line-height:1.3}
.date-btn .mon{display:block; font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase}
.date-btn.is-selected{border-color:var(--brand); background:var(--brand); box-shadow:0 8px 18px -10px color-mix(in srgb, var(--brand) 70%, transparent)}
.date-btn.is-selected .dow,.date-btn.is-selected .dnum,.date-btn.is-selected .mon{color:var(--brand-on)}
.date-btn:disabled{opacity:.4; pointer-events:none; background:var(--line-2)}
.date-btn .today-dot{display:block; width:5px; height:5px; margin:3px auto 0; border-radius:50%; background:var(--peach)}
.date-btn.is-selected .today-dot{background:#fff}

/* slots */
.slots{margin-top:6px}
.slots-head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap}
.slots-head h4{font-size:.95rem; font-weight:800; color:var(--ink)}
.legend{display:flex; align-items:center; gap:7px; font-size:.78rem; color:var(--muted); font-weight:600}
.lg-dot{width:10px; height:10px; border-radius:3px; display:inline-block; margin-left:6px}
.lg-free{background:#fff; border:1.5px solid #cfdce4}
.lg-taken{background:var(--line-2); border:1.5px solid var(--line)}
.lg-pick{background:var(--brand); border:1.5px solid var(--brand)}
.slot-group{margin-bottom:16px}
.slot-group h5{display:flex; align-items:center; gap:8px; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:10px}
.slot-group h5 .ic{width:14px; height:14px; color:var(--brand)}
.slot-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:9px}
.slot{
  padding:10px 4px; text-align:center; font-size:.87rem; font-weight:700;
  background:#fff; border:1.5px solid #cfdce4; border-radius:var(--r-sm); color:var(--ink);
  transition:all var(--fast) var(--ease);
}
.slot:hover:not(:disabled){border-color:var(--brand); color:var(--brand-dark); background:var(--brand-50); transform:translateY(-2px)}
.slot.is-selected{background:var(--brand); border-color:var(--brand); color:var(--brand-on); box-shadow:0 8px 16px -9px color-mix(in srgb, var(--brand) 80%, transparent)}
.slot:disabled{background:var(--line-2); border-color:var(--line); color:#a8b6c1; text-decoration:line-through; pointer-events:none}
.slots-empty{display:flex; gap:13px; align-items:flex-start; background:var(--line-2); border:1px dashed #d3dee5; border-radius:var(--r-md); padding:18px}
.slots-empty .ic{color:var(--muted); margin-top:2px}
.slots-empty p{font-size:.9rem; color:var(--muted)}
.slots-empty strong{display:block; color:var(--ink); margin-bottom:3px}

/* form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.field{display:flex; flex-direction:column; gap:7px}
.field-full{grid-column:1/-1}
.field > span{font-size:.85rem; font-weight:700; color:var(--ink)}
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; font-size:.94rem;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-md);
  color:var(--ink); transition:border-color var(--fast), box-shadow var(--fast);
  appearance:none;
}
.field textarea{resize:vertical; min-height:84px}
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363768a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:17px; padding-right:40px}
.field input::placeholder,.field textarea::placeholder{color:#9fadb9}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-100)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-color:var(--danger); box-shadow:0 0 0 4px #fdecec}
.checks{display:flex; flex-direction:column; gap:12px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line-2)}
.check{display:flex; gap:11px; align-items:flex-start; font-size:.89rem; color:var(--muted); cursor:pointer}
.check input{
  appearance:none; width:19px; height:19px; flex:none; margin-top:2px;
  border:1.5px solid #c5d2db; border-radius:6px; background:#fff; position:relative;
  transition:background-color var(--fast), border-color var(--fast);
}
.check input:checked{background:var(--brand); border-color:var(--brand)}
.check input:checked::after{
  content:''; position:absolute; left:5.5px; top:2px; width:5px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.field-error{display:flex; align-items:center; gap:6px; font-size:.83rem; font-weight:700; color:var(--danger); margin-top:9px}
.field .field-error{margin-top:0}

/* multi-service picker: hint + running total of the tap-to-add selection */
.pick-hint{font-size:.86rem; color:var(--muted); margin:12px 0 8px}
.pick-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:12px 16px; border:1px solid var(--brand-100); border-radius:14px; background:var(--brand-50)}
.pick-bar[hidden]{display:none}
.pick-bar-t{font-size:.9rem; font-weight:700; color:var(--ink)}
.pick-bar-p{font-size:1.04rem; font-weight:800; color:var(--brand); white-space:nowrap}

/* step nav */
.step-nav{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:26px; padding-top:22px; border-top:1px solid var(--line-2)}
.step-nav-right{display:flex; align-items:center; gap:16px}
.nav-hint{font-size:.82rem; font-weight:700; color:var(--muted)}

/* success */
.booking-success{text-align:center; padding:14px 4px 6px; animation:panelIn .4s var(--ease)}
.success-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:74px; height:74px; border-radius:50%; margin-bottom:20px;
  background:var(--brand-100); color:var(--brand-dark);
  animation:pop .5s var(--ease);
}
.success-mark .ic{width:36px; height:36px; stroke-width:2.4}
@keyframes pop{0%{transform:scale(.4); opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1); opacity:1}}
.booking-success h3{font-size:1.7rem; margin-bottom:9px}
.booking-success > p{color:var(--muted); margin-bottom:22px}
.booking-success > p strong{color:var(--ink)}
.success-dl{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px;
  text-align:left; background:var(--brand-50); border:1px solid var(--brand-100);
  border-radius:var(--r-lg); padding:20px; margin-bottom:24px;
}
.success-dl div{display:flex; flex-direction:column; gap:3px}
.success-dl dt{font-size:.74rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--brand)}
.success-dl dd{font-size:.97rem; font-weight:700; color:var(--ink)}
.success-actions{display:flex; flex-wrap:wrap; gap:11px; justify-content:center}

/* summary rail */
.booking-summary{
  background:linear-gradient(175deg,var(--brand-50),#fff 55%);
  border-left:1px solid var(--line); padding:30px 26px;
  display:flex; flex-direction:column; gap:16px;
}
.sum-title{display:flex; align-items:center; gap:9px; font-size:.79rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--brand-dark)}
.sum-title .ic{width:16px; height:16px}
.sum-row{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:13px; border-bottom:1px dashed var(--line)}
.sum-k{font-size:.84rem; color:var(--muted); font-weight:600; flex:none}
.sum-v{font-size:.9rem; font-weight:700; color:var(--ink); text-align:right; transition:color var(--fast)}
.sum-v.is-empty{color:#a4b1bc; font-weight:500; font-style:italic}
.sum-v.is-filled{animation:fadeUp .3s var(--ease)}
@keyframes fadeUp{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
.sum-total{display:flex; align-items:center; justify-content:space-between; padding:15px 16px; background:#fff; border:1.5px solid var(--brand-100); border-radius:var(--r-md); box-shadow:var(--sh-xs)}
.sum-total span{font-size:.86rem; font-weight:700; color:var(--muted)}
.sum-total strong{font-size:1.32rem; font-weight:800; color:var(--brand-dark); letter-spacing:-.03em}
.sum-note{font-size:.79rem; line-height:1.55; color:var(--muted)}
.sum-perks{display:flex; flex-direction:column; gap:9px}
.sum-perks li{display:flex; align-items:flex-start; gap:9px; font-size:.83rem; color:var(--ink-2); font-weight:600}
.sum-perks .ic{width:15px; height:15px; color:var(--brand); margin-top:3px; stroke-width:2.4}
.sum-help{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line)}
.sum-help strong{display:block; font-size:.85rem; color:var(--ink)}
.sum-help a{font-size:.87rem; font-weight:800; color:var(--brand); text-decoration:underline; text-underline-offset:3px}

/* ---------- 14. Portal ---------- */
.portal-shell{display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start}
.portal-main{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:26px 28px 28px; box-shadow:var(--sh-md)}
.portal-head{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--line-2); margin-bottom:22px}
.portal-user{display:flex; align-items:center; gap:14px}
.portal-user strong{display:block; font-size:1.06rem; color:var(--ink)}
.portal-user span{font-size:.83rem; color:var(--muted)}
.tabs{display:flex; gap:5px; background:var(--line-2); padding:5px; border-radius:var(--r-pill)}
.tab{
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px;
  border-radius:var(--r-pill); font-size:.87rem; font-weight:700; color:var(--muted);
  transition:background-color var(--fast), color var(--fast), box-shadow var(--fast);
}
.tab:hover{color:var(--ink)}
.tab.is-active{background:#fff; color:var(--ink); box-shadow:var(--sh-xs)}
.tab-count{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--brand-100); color:var(--brand-dark); font-size:.72rem; font-weight:800}
.tab.is-active .tab-count{background:var(--brand); color:var(--brand-on)}

.appt-list{display:flex; flex-direction:column; gap:14px}
.appt{
  display:flex; align-items:center; gap:18px; padding:18px 20px;
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-lg);
  transition:border-color var(--fast), box-shadow var(--fast), transform var(--fast);
}
.appt:hover{border-color:#cfe6e2; box-shadow:var(--sh-md)}
.appt.is-new{animation:fadeUp .45s var(--ease); border-color:var(--brand)}
.appt-date{
  flex:none; width:66px; text-align:center; padding:9px 4px;
  background:var(--brand-50); border:1px solid var(--brand-100); border-radius:var(--r-md);
}
.appt-date .m{display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--brand)}
.appt-date .d{display:block; font-size:1.5rem; font-weight:800; color:var(--ink); line-height:1.15}
.appt-date .w{display:block; font-size:.68rem; font-weight:700; color:var(--muted); text-transform:uppercase}
.appt-info{flex:1; min-width:0}
.appt-info h3{font-size:1rem; margin-bottom:4px}
.appt-info .meta{display:flex; flex-wrap:wrap; gap:5px 14px; font-size:.85rem; color:var(--muted); font-weight:600}
.appt-info .meta span{display:flex; align-items:center; gap:6px}
.appt-info .meta .ic{width:14px; height:14px; color:var(--brand)}
.badge{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill); font-size:.74rem; font-weight:800; letter-spacing:.03em; text-transform:uppercase}
.badge-confirmed{background:#e4f6ee; color:#0f7d5b}
.badge-pending{background:#fdf3e4; color:#a76a1c}
.badge-done{background:var(--line-2); color:var(--muted)}
.appt-actions{display:flex; gap:8px; flex:none}
.appt-actions .btn{padding:9px 15px; font-size:.84rem}
.btn-danger-ghost{background:#fff; color:var(--danger); border-color:#f2d9d8}
.btn-danger-ghost:hover{background:#fdefee; border-color:#eabfbd}
.appt-status{display:flex; align-items:center; gap:14px; flex-wrap:wrap}

.empty-state{text-align:center; padding:44px 20px; border:1.5px dashed #d3dee5; border-radius:var(--r-lg); background:var(--brand-50)}
.empty-state .chip-ic{margin:0 auto 16px}
.empty-state h3{font-size:1.1rem; margin-bottom:7px}
.empty-state p{color:var(--muted); font-size:.92rem; margin-bottom:18px; max-width:44ch; margin-inline:auto}

.portal-side{display:flex; flex-direction:column; gap:18px}
.plan-card{background:linear-gradient(160deg,var(--brand),var(--brand-dark)); color:var(--brand-on); border-radius:var(--r-xl); padding:24px; box-shadow:var(--sh-brand)}
.plan-badge{display:inline-flex; align-items:center; gap:7px; background:color-mix(in srgb, var(--brand-on) 18%, transparent); color:var(--brand-on); padding:6px 13px; border-radius:var(--r-pill); font-size:.75rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px}
.plan-card h3{color:var(--brand-on); font-size:1.12rem; margin-bottom:9px}
.plan-card p{font-size:.87rem; line-height:1.6; color:color-mix(in srgb, var(--brand-on) 78%, transparent); margin-bottom:18px}
.meter{height:8px; background:rgba(255,255,255,.22); border-radius:99px; overflow:hidden}
.meter span{display:block; height:100%; background:#fff; border-radius:99px; transition:width 1s var(--ease)}
.meter-label{display:block; margin-top:9px; font-size:.77rem; font-weight:700; color:#a9ddd7}

.quick-links{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:22px; display:flex; flex-direction:column; gap:9px}
.quick-links h3{font-size:.79rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.quick-link{
  display:flex; align-items:center; gap:11px; text-align:left;
  padding:12px 14px; background:var(--bg); border:1.5px solid transparent;
  border-radius:var(--r-md); font-size:.9rem; font-weight:700; color:var(--ink);
  transition:background-color var(--fast), border-color var(--fast), transform var(--fast);
}
.quick-link:hover{background:var(--brand-50); border-color:var(--brand-100); color:var(--brand-dark); transform:translateX(3px)}
.quick-link .ic{width:17px; height:17px; color:var(--brand)}

.reception-card{display:flex; gap:13px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:20px}
.reception-card strong{display:block; font-size:.94rem; color:var(--ink)}
.reception-card span{display:block; font-size:.83rem; color:var(--muted); margin-bottom:7px}

/* ---------- 15. Quotes ---------- */
.quote-card{
  margin:0; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px; display:flex; flex-direction:column; gap:15px;
  box-shadow:var(--sh-xs);
}
.stars{color:var(--amber); font-size:1.02rem; letter-spacing:3px}
.quote-card blockquote{margin:0; font-size:.98rem; line-height:1.65; color:var(--ink-2)}
.quote-card figcaption{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:6px}
.quote-card figcaption strong{display:block; font-size:.93rem; color:var(--ink)}
.quote-card figcaption span:not(.avatar){font-size:.82rem; color:var(--muted)}

/* ---------- 16. FAQ ---------- */
.faq-grid{display:grid; grid-template-columns:.82fr 1.18fr; gap:56px; align-items:start}
.faq-intro h2{font-size:clamp(1.6rem,3vw,2.2rem); margin-bottom:14px}
.faq-intro p{color:var(--muted); margin-bottom:22px}
.accordion{display:flex; flex-direction:column; gap:12px}
.acc-item{background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color var(--fast), box-shadow var(--fast)}
.acc-item[open]{border-color:#cfe6e2; box-shadow:var(--sh-md)}
.acc-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:19px 22px; cursor:pointer; list-style:none;
  font-size:1rem; font-weight:700; color:var(--ink);
}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary:hover{color:var(--brand-dark)}
.acc-item summary .ic{width:19px; height:19px; color:var(--brand); transition:transform var(--fast) var(--ease); flex:none}
.acc-item[open] summary .ic{transform:rotate(180deg)}
.acc-body{padding:0 22px 20px}
.acc-body p{font-size:.94rem; color:var(--muted); line-height:1.65}

/* ---------- 17. CTA ---------- */
.cta-band{background:linear-gradient(120deg,var(--brand) 0%, var(--brand-dark) 55%, color-mix(in srgb, var(--brand) 55%, #000) 100%); padding:70px 0; position:relative; overflow:hidden}
.cta-band::after{content:''; position:absolute; right:-80px; top:-80px; width:340px; height:340px; border-radius:50%; background:rgba(255,255,255,.07)}
.cta-band::before{content:''; position:absolute; left:-60px; bottom:-120px; width:260px; height:260px; border-radius:50%; background:rgba(255,255,255,.05)}
.cta-inner{position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap}
.cta-inner h2{color:var(--brand-on); font-size:clamp(1.6rem,3vw,2.25rem); margin-bottom:10px; max-width:18ch}
.cta-inner p{color:color-mix(in srgb, var(--brand-on) 80%, transparent); font-size:1.02rem; max-width:48ch}
.cta-actions{display:flex; gap:13px; flex-wrap:wrap}

/* ---------- 18. Footer ---------- */
.site-footer{background:var(--ink); color:#93a7b8; padding:64px 0 0}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr 1.4fr; gap:36px; padding-bottom:44px}
.footer-brand .brand-text{color:#fff}
.footer-brand .brand-text em{color:#17a396}
.footer-brand p{font-size:.9rem; line-height:1.65; margin:16px 0 18px; max-width:34ch}
.socials{display:flex; gap:9px}
.socials a{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.07); color:#c3d2dd; transition:background-color var(--fast), color var(--fast), transform var(--fast)}
.socials a:hover{background:var(--brand); color:var(--brand-on); transform:translateY(-3px)}
.socials .ic{width:17px; height:17px}
.footer-col h3{color:#fff; font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px}
.footer-col{display:flex; flex-direction:column; gap:10px}
.footer-col a{font-size:.91rem; transition:color var(--fast), padding-left var(--fast)}
.footer-col a:hover{color:#fff; padding-left:4px}
.footer-hours ul{display:flex; flex-direction:column; gap:9px}
.footer-hours li{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:.86rem}
.footer-hours b{color:#dce7ee; font-weight:700}
.footer-hours .closed{color:#e0877f}
.footer-hours address{display:flex; gap:8px; font-size:.86rem; line-height:1.6; margin-top:14px}
.footer-hours .ic{width:15px; height:15px; color:var(--brand-mid); margin-top:4px; flex:none}
.footer-news p{font-size:.87rem; margin-bottom:12px}
.news-form{display:flex; gap:8px}
.news-form input{flex:1; min-width:0; padding:12px 15px; background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.14); border-radius:var(--r-pill); color:#fff; font-size:.9rem}
.news-form input::placeholder{color:#7d92a4}
.news-form input:focus{outline:none; border-color:var(--brand-mid); background:rgba(255,255,255,.12)}
.news-form .btn{padding:12px 16px}
.news-ok{display:flex; align-items:center; gap:8px; font-size:.85rem; color:#7fd8cd; font-weight:700; margin-top:11px}
.news-ok .ic{width:15px; height:15px}
.footer-base{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-block:22px; border-top:1px solid rgba(255,255,255,.09); font-size:.83rem}
.footer-base ul{display:flex; gap:22px}
.footer-base a:hover{color:#fff}

/* ---------- 19. Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:120;
  display:flex; align-items:center; gap:11px;
  padding:14px 22px; background:var(--ink); color:#fff;
  border-radius:var(--r-pill); font-size:.91rem; font-weight:700;
  box-shadow:0 22px 50px -18px rgba(13,27,42,.7);
  transform:translate(-50%,140%); opacity:0; pointer-events:none;
  transition:transform .42s var(--ease), opacity .3s;
  max-width:min(92vw,540px);
}
.toast.is-visible{transform:translate(-50%,0); opacity:1}
.toast .ic{color:#5ee0c4; stroke-width:2.4}

/* ---------- 19b. Reception chat widget ---------- */
.chat{
  position:fixed; right:22px; bottom:22px; z-index:130;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
}
.chat-fab{
  width:58px; height:58px; border-radius:50%; border:none; cursor:pointer;
  display:grid; place-items:center;
  background:var(--brand); color:var(--brand-on);
  box-shadow:0 18px 40px -12px color-mix(in srgb, var(--brand) 65%, transparent);
  transition:transform .2s var(--ease);
}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab .ic{width:26px; height:26px; stroke-width:1.8}
.chat-panel{
  width:min(370px, calc(100vw - 44px));
  height:min(480px, calc(100vh - 140px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  border-radius:20px; box-shadow:0 30px 70px -22px rgba(13,27,42,.45);
}
.chat-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
  padding:15px 16px; background:var(--brand); color:var(--brand-on);
}
.chat-titles strong{display:block; font-size:1rem}
.chat-sub{font-size:.78rem; opacity:.82}
.chat-x{
  background:none; border:none; cursor:pointer; color:inherit;
  width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
}
.chat-x:hover{background:color-mix(in srgb, var(--brand-on) 18%, transparent)}
.chat-x .ic{width:18px; height:18px}
.chat-msgs{
  flex:1; overflow-y:auto; padding:16px 14px;
  display:flex; flex-direction:column; gap:9px;
  background:var(--bg);
}
.chat-msg{
  max-width:86%; padding:9px 13px; border-radius:15px;
  font-size:.9rem; line-height:1.5; white-space:pre-wrap; word-break:break-word;
}
.chat-msg.is-mine{
  align-self:flex-end; background:var(--brand); color:var(--brand-on);
  border-bottom-right-radius:5px;
}
.chat-msg.is-theirs{
  align-self:flex-start; background:var(--surface);
  border:1px solid var(--line); border-bottom-left-radius:5px;
}
.chat-msg.is-note{
  align-self:center; background:none; border:none; padding:2px;
  color:var(--muted); font-size:.78rem; text-align:center;
}
.chat-who{
  display:block; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
  opacity:.72; margin-bottom:2px; font-weight:700;
}
.chat-form{
  display:flex; gap:9px; padding:11px; border-top:1px solid var(--line);
  background:var(--surface);
}
.chat-form input{
  flex:1; min-width:0; padding:11px 13px; font:inherit; font-size:.9rem;
  border:1px solid var(--line); border-radius:12px; background:var(--bg);
}
.chat-form input:focus{outline:2px solid var(--brand-mid); border-color:var(--brand-mid)}
.chat-send{padding:0 18px; border-radius:12px}
@media print{ .chat{display:none} }

/* ---------- 20. Reveal ---------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ---------- 21. Responsive ---------- */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:1fr 1fr 1fr; gap:32px}
  .footer-brand{grid-column:1/-1}
  .booking-shell{grid-template-columns:1fr}
  .booking-summary{border-left:0; border-top:1px solid var(--line)}
  .sum-help{margin-top:4px}
  .portal-shell{grid-template-columns:1fr}
  .portal-side{display:grid; grid-template-columns:1fr 1fr; gap:18px}
  .reception-card{grid-column:1/-1}
  /* header row (logo+nav+actions) overflowed the viewport between ~921-1065px;
     dropping the ghost CTA (already dropped at <=920) keeps the nav intact */
  .header-actions .btn-ghost{display:none}
}
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr; gap:44px}
  .hero-visual{min-height:400px; margin-top:8px}
  .faq-grid{grid-template-columns:1fr; gap:34px}
  .cards-3{grid-template-columns:1fr 1fr}
  .step-card:not(:last-child)::after{display:none}
  .steps-grid{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:flex}
  .nav.is-open{
    display:flex; flex-direction:column; align-items:stretch; gap:3px;
    position:absolute; left:16px; right:16px; top:calc(100% + 8px);
    background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
    padding:12px; box-shadow:var(--sh-lg);
  }
  .nav.is-open a{padding:13px 15px; border-radius:var(--r-md); font-size:1rem}
  .site-header{position:sticky}
  .header-inner{position:relative; flex-wrap:wrap}
  .header-actions .btn-ghost{display:none}
}
@media (max-width:760px){
  .section{padding:70px 0}
  .topbar-meta{display:none}
  .topbar-inner{justify-content:center}
  .cards-3{grid-template-columns:1fr}
  .opt-grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr 1fr; gap:28px 16px}
  .booking-main{padding:24px 20px}
  .booking-summary{padding:24px 20px}
  .stepper{gap:4px}
  .node-label{display:none}
  .step-node{flex:1}
  .step-node:not(:last-child)::after{left:34px; right:6px}
  .appt{flex-wrap:wrap; gap:14px}
  .appt-status{width:100%; justify-content:space-between}
  .appt-actions{width:100%}
  .appt-actions .btn{flex:1}
  .portal-main{padding:22px 18px}
  .portal-side{grid-template-columns:1fr}
  .cta-inner h2{max-width:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .hv-chip-1{left:0}
  .hv-chip-2{right:0}
}
@media (max-width:520px){
  .container{padding-inline:18px}
  .hero{padding:52px 0 64px}
  .hero-cta .btn{width:100%}
  .header-actions .btn-primary{padding:11px 15px; font-size:.87rem}
  .footer-grid{grid-template-columns:1fr}
  .step-nav{flex-direction:column-reverse; align-items:stretch}
  .step-nav-right{justify-content:space-between}
  .success-actions .btn{width:100%}
  .toast{left:16px; right:16px; transform:translateY(140%); max-width:none}
  .toast.is-visible{transform:translateY(0)}
}

/* ---------- 22. Live booking surfaces (deposit + portal sign-in) ---------- */
.deposit-box{
  text-align:left;
  margin:0 auto 22px;
  max-width:560px;
  padding:18px;
  border:1px solid var(--brand-100);
  border-radius:18px;
  background:var(--brand-50);
}
.deposit-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px}
.deposit-head strong{font-size:1.02rem; color:var(--ink)}
.deposit-head span{
  font-weight:800; font-size:.95rem; color:var(--brand-dark);
  background:var(--brand-100); border-radius:999px; padding:5px 13px;
}
.deposit-note{font-size:.87rem; color:var(--muted); line-height:1.55; margin-bottom:14px}
.deposit-note strong{color:var(--ink)}
.deposit-row{display:flex; align-items:flex-end; gap:12px}
.field-grow{flex:1; min-width:0}
.deposit-btn{white-space:nowrap}
.form-status{
  font-size:.87rem; font-weight:700; line-height:1.5;
  padding:10px 13px; border-radius:var(--r-sm);
  background:var(--line-2); color:var(--ink-2); margin-top:12px;
}
.form-status.is-error{background:#fdecec; color:var(--danger)}
.form-status.is-ok{background:var(--brand-100); color:var(--brand-dark)}

.portal-auth{
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(0,1.7fr);
  gap:16px 26px;
  align-items:start;
  padding:18px;
  margin-bottom:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  box-shadow:0 8px 22px -20px rgba(13,27,42,.6);
}
.auth-copy strong{display:block; font-size:1.04rem; color:var(--ink)}
.auth-copy span{display:block; margin-top:6px; font-size:.88rem; color:var(--muted); line-height:1.55}
.auth-form{display:grid; gap:13px}
.auth-actions{display:flex; flex-wrap:wrap; gap:10px}
.auth-hint{font-size:.8rem; color:var(--muted); line-height:1.55; margin-top:-2px}
.portal-head-actions{display:flex; align-items:center; justify-content:flex-end; gap:12px; flex-wrap:wrap}

/* diary states straight from the API */
.badge-pending_payment{background:#fdf3e4; color:#a76a1c}
.badge-checked_in{background:var(--sky-100); color:#1f6ba8}
.badge-completed{background:#e4f6ee; color:#0f7d5b}
.badge-cancelled{background:var(--line-2); color:var(--muted)}
.badge-no_show{background:#fdecec; color:var(--danger)}
.badge-pending_payment::before,
.badge-checked_in::before,
.badge-completed::before,
.badge-cancelled::before,
.badge-no_show::before{
  content:''; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75
}

@media (max-width:900px){
  .portal-auth{grid-template-columns:1fr}
  .portal-head-actions{width:100%; justify-content:space-between}
}
@media (max-width:520px){
  .deposit-row{flex-direction:column; align-items:stretch}
  .deposit-btn{width:100%}
  .auth-actions .btn{flex:1}
}

/* ==========================================================================
   23. Responsive (mobile) — ADDITIVE PASS
   Every rule below lives inside a media query, so the desktop layout in
   sections 1–22 is untouched. Nothing above was edited.
   Breakpoints: 900 (tablet / small laptop) · 760 · 700 (phone) · 520
                (large phone) · 430 (small phone, 360–430px)
   ========================================================================== */

/* ---------- 900px: tablets & small laptops ---------- */
@media (max-width:900px){
  .header-inner{gap:18px}
  /* keep the three "how it works" steps side by side while there is room
     (the 700px block below puts them back in a single column) */
  .steps-grid{grid-template-columns:1fr 1fr}
  .hero-visual{min-height:360px}
}

/* ---------- 760px: hero visual is full width under the copy ---------- */
@media (max-width:760px){
  /* The appointment card is now as wide as the column, so the floating chips
     would cover its text and its "Grab this slot" button. Lay them out under
     the card instead of floating them over it. */
  .hero-visual{flex-direction:column; gap:10px; min-height:0; margin-top:4px}
  .hv-chip{position:static; animation:none; align-self:center}
}

/* ---------- 700px: phone layout ---------- */
@media (max-width:700px){
  .section{padding:64px 0}

  /* top bar: let the emergency line wrap instead of overflowing */
  .topbar-inner{flex-wrap:wrap; row-gap:4px; justify-content:center; text-align:center}
  .topbar-msg{flex-wrap:wrap; justify-content:center; text-align:center; line-height:1.5}
  .topbar-msg a{display:inline-block; padding:6px 0}

  /* header: tighter gap, room for the wrapped actions row below */
  .header-inner{gap:14px; row-gap:6px}

  /* body copy never drops under 14px on small screens */
  .topbar,.sum-note,.sum-k,.sum-perks li,.field-error,.nav-hint,.legend,
  .svc-meta li,.tag-list li,.role,.appt-info .meta,.auth-hint,
  .reception-card span,.deposit-note,.avail,.meter-label{font-size:.875rem}

  /* tap targets ≥40px */
  .link-btn{padding:11px 4px}
  .socials a{width:44px; height:44px}
  .check{padding-block:9px; min-height:40px}
  .tab{padding:11px 16px}
  .tabs{flex-wrap:wrap}
  .step-nav .btn{min-height:44px}
  .quick-link{padding:14px}
  .acc-item summary{padding:18px 20px}
  .appt-actions .btn{min-height:42px}

  /* forms: single column + 16px fields so iOS does not zoom on focus */
  .field input,.field select,.field textarea{font-size:16px}
  .news-form input{font-size:16px}

  /* booking widget */
  .booking-main{padding:22px 16px}
  .booking-summary{padding:22px 16px}
  .date-strip{-webkit-overflow-scrolling:touch; padding-bottom:12px}
  .steps-grid{grid-template-columns:1fr}
  .step-node:not(:last-child)::after{left:32px; right:5px}

  /* portal / appointments */
  .portal-head{gap:14px}
  .appt{padding:16px}

  /* footer links get a proper tap area */
  .footer-col{gap:2px}
  .footer-col a{display:flex; align-items:center; min-height:40px}
  .footer-base{gap:6px}
  .footer-base ul{flex-wrap:wrap; gap:0 18px}
  .footer-base a{display:inline-flex; align-items:center; min-height:40px}
}

/* ---------- 520px: large phones ---------- */
@media (max-width:520px){
  .section{padding:56px 0}
  .section-head{margin-bottom:38px}

  /* stacked CTAs fill the row they sit in */
  .cta-actions{width:100%}
  .cta-actions .btn{flex:1 1 auto}
  .auth-actions .btn{flex:1 1 140px}
  .step-nav-right{gap:10px}

  /* card padding — a little more room for content on narrow screens */
  .service-card{padding:22px}
  .dentist-top{padding:18px 20px 0}
  .dentist-body{padding:18px 20px 22px}
  .quote-card{padding:22px}
  .acc-item summary{padding:17px 18px}
  .acc-body{padding:0 18px 18px}
  .empty-state{padding:36px 16px}
  .stats{padding:30px 0}
  .appt{gap:12px}
  .appt-date{width:60px}
  .sum-row{gap:10px}
  .hv-time{font-size:2.3rem}
}

/* ---------- 430px & below: small phones (360–430px) ---------- */
@media (max-width:430px){
  .container{padding-inline:16px}

  /* Header cannot hold brand + CTA + menu on one row at this width, so it
     becomes two tidy rows: logo and hamburger on top, full-width "Book
     appointment" underneath. (The menu itself is toggled by the existing
     #navToggle in app.js — no markup change needed.) */
  .header-actions{display:contents}
  .brand{order:1}
  .nav-toggle{order:2; margin-left:auto}
  .header-actions .btn-primary{order:3; width:100%; justify-content:center; margin-top:2px}
  .nav.is-open{top:calc(100% + 6px)}

  .stats-grid{gap:22px 12px}
  .stat span{font-size:.9rem}
  .date-btn{width:62px}
  .slot-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .sum-total{padding:13px 14px}
  .sum-total strong{font-size:1.2rem}
  .footer-hours li{gap:8px}
  .news-form .btn{padding:12px 14px}
}

/* ---------- defensive: overlays always fit the viewport ----------
   There is no fixed overlay in this file today (the staff invoice opens as a
   separate window), but any dialog/lightbox added later must not overflow a
   phone screen. */
@media (max-width:700px){
  #payPanel,.modal,.modal-card,.popup,.lightbox{
    max-width:100vw;
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ------------------------------------------------ patient portal: prescriptions
   Appended after the responsive pass — a finished visit can show its
   prescription, opened in a print-ready popup. */
.appt-rx-wrap{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.appt-rx{ display:flex; flex-direction:column; gap:8px; }
.appt-rx-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
              border:1px solid var(--line-2); border-radius:12px; padding:10px 14px; font-size:.9rem; }
.appt-rx-row > span{ font-weight:700; letter-spacing:.02em; }
@media (max-width:520px){
  .appt-rx-row{ flex-direction:column; align-items:stretch; }
  .appt-rx-row .btn{ width:100%; }
}

/* ==========================================================================
   24. Mobile visual scale — ADDITIVE PASS
   On phones the desktop display scale was landing unchanged: a 36.8px hero
   with 1.06 line-height, 28px section headings, 56–70px section padding,
   52px icon chips and 27px stat numbers all read as oversized at 390px
   wide. This block steps the type scale down, opens leading, tightens the
   vertical rhythm and shrinks the chunky bits — ONLY inside phone media
   queries. Sections 1–23 (desktop) are untouched; later rules win by
   source order at equal specificity.
   ========================================================================== */
@media (max-width:520px){
  /* --- type scale: display type steps down, line-height opens up --- */
  .hero-copy h1{
    font-size:1.95rem;            /* 31.2px, was clamp-min 36.8px */
    line-height:1.16;             /* was 1.06 — lines were nearly touching */
    letter-spacing:-.028em;
    margin-bottom:16px;           /* was 22px */
  }
  .section-head h2{font-size:1.45rem}      /* 23.2px, was 28px */
  .section-head p{font-size:1rem}          /* 16px lede */
  .faq-intro h2{font-size:1.45rem}         /* clamp-min was 25.6px */
  .booking-success h3{font-size:1.4rem}    /* was 27.2px */
  .cta-inner h2{font-size:1.32rem; margin-bottom:8px}
  .cta-inner p{font-size:.95rem}
  .stat strong{font-size:1.45rem}          /* 23.2px, was 27.2px */
  .hv-time{font-size:2rem; margin-top:4px} /* 32px, was 36.8px */

  /* --- vertical rhythm: phones want a tighter section cadence --- */
  .section{padding:44px 0}                 /* was 56px */
  .section-head{margin-bottom:30px}        /* was 38px */
  .hero{padding:40px 0 48px}               /* was 52/64 */
  .stats{padding:24px 0}                   /* was 30px */
  .cta-band{padding:52px 0}                /* was 70px */
  .cta-inner{gap:24px}                     /* was 40px */

  /* --- components: chips and cards lose a notch of bulk --- */
  .chip-ic-lg{width:46px; height:46px; border-radius:15px}   /* was 52px */
  .chip-ic-lg .ic{width:22px; height:22px}                   /* was 25px */
  .service-card,.quote-card{padding:18px}                    /* was 22px */
  .booking-main,.booking-summary,.portal-main{padding:18px 14px} /* was 22/16 */
  .acc-item summary{padding:15px 16px}                       /* was 17/18 */
  .acc-body{padding:0 16px 16px}

  /* --- density: the 760px block collapses every grid to one column, which
         left ~2 options visible per screen ("boxes big, options limited").
         Restore 2-up for pickers and service cards; shorten the tall ones. --- */
  .opt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px} /* 760-block forced 1fr; minmax(0,·) lets fr shrink below the cards' 182px min-content — plain 1fr pinned the columns wider than the panel and clipped card 2 */
  .opt-card{padding:12px 11px; gap:9px}                     /* was 15/16, gap 13 */
  .opt-main strong{font-size:.9rem}                         /* was .96rem */
  .opt-main em{font-size:.78rem}
  .opt-side b{font-size:.87rem}                             /* was .93rem */
  .opt-side i{font-size:.72rem}                             /* was .78rem */
  .opt-dentist .avatar{width:32px; height:32px; font-size:.72rem}  /* was 38px */

  #services .cards-3{grid-template-columns:1fr 1fr}         /* 6 services 2-up */
  .cards-3{gap:12px}                                        /* was 24px */
  .service-card{padding:14px; gap:9px}                      /* was 18px / gap 12 */
  .svc-ic{width:40px; height:40px; border-radius:13px}      /* was 48px */
  .svc-ic .ic{width:21px; height:21px}                      /* was 24px */
  .service-card h3{font-size:1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}  /* was 1.13rem */
  .service-card p{font-size:.875rem; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}  /* blurbs wrap ~7 lines at 145px */
  .svc-meta{flex-wrap:wrap; gap:6px; padding-top:4px}       /* pills must wrap at 145px */
  .svc-meta li{padding:4px 8px; font-size:.75rem; gap:4px}
  .svc-meta .ic{display:none}                               /* without icons both pills fit one row */

  .dentist-top{height:88px; padding:14px 16px 0}            /* was 112px / 18-20 */
  .avatar-xl{width:56px; height:56px; font-size:1.05rem}    /* was 66px */
  .dentist-body{padding:16px; gap:9px}                      /* was 18/20/22, gap 11 */
  .dentist-body .bio{font-size:.875rem; line-height:1.5}
  .dentist-body .btn{min-height:44px}                       /* tap target */

  .quote-card{padding:16px; gap:12px}                       /* reviews stay 1-up, lighter */

  .slot-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px}  /* 4-up, was minmax(92)=3-up */
  .slot{font-size:.84rem; padding:10px 2px}                 /* "10:30 AM" fits 74px */
  .field input,.field select,.field textarea{font-size:16px}  /* iOS focus-zoom guard (<16px zooms) */
}

/* ==========================================================================
   26. Mobile app shell — ADDITIVE PASS (≤520px)
   The phone layout stops being a stacked web page and behaves like an app:
   a fixed bottom action bar (Call · My visits · Book now) that is always
   reachable, a compact one-row header (the Book CTA moved into the bar),
   horizontal snap carousels instead of endless single-column card stacks,
   decorative panels dropped (hero demo card), the redundant CTA band hidden,
   section sub-copy trimmed and the footer pulled two-up. Desktop ≥521px is
   untouched — every rule lives inside a phone media query (plus the base
   .app-bar{display:none} that keeps the bar desktop-hidden).
   ========================================================================== */
.app-bar{display:none}

@media print{
  .app-bar{display:none}
}

@media (max-width:520px){
  /* ---- fixed bottom action bar (the app shell) ---- */
  .chat{ right:12px; bottom:calc(78px + env(safe-area-inset-bottom)); }
  .chat-panel{ width:calc(100vw - 24px); height:min(64vh, 440px); }
  .app-bar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:110;
    gap:8px; padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:color-mix(in srgb, #fff 88%, transparent);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
  }
  .app-bar a{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-height:52px; padding:6px 4px; border-radius:14px; text-decoration:none;
    font-size:.68rem; font-weight:700; letter-spacing:.01em; color:var(--muted);
  }
  .app-bar .ic{width:21px; height:21px}
  .app-bar .ab-primary{
    flex:1.7; background:var(--brand); color:var(--brand-on);
    box-shadow:var(--sh-brand); font-size:.8rem;
  }
  body{padding-bottom:calc(74px + env(safe-area-inset-bottom))}
  html{scroll-padding-top:70px}                              /* sticky header clears anchor jumps */
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}   /* sit above the bar */

  /* ---- one-row header: menu toggle left, brand next, language right ---- */
  .header-inner{flex-wrap:nowrap; gap:10px; min-height:60px}
  .header-actions{display:contents}                         /* toggle + lang become header children */
  .nav-toggle{order:1; margin-left:0}                       /* left: menu / close */
  .brand{order:2}                                            /* then company name + logo */
  #langSwitch{order:3; margin-left:auto}                     /* far right */
  .header-actions .btn-primary{display:none}                /* Book lives in the bar now */
  .nav.is-open{top:calc(100% + 6px)}

  /* ---- hero: text-first; the decorative demo panel is dropped ---- */
  .hero-visual{display:none}

  /* ---- section heads: eyebrow + headline only ---- */
  .section-head > p{display:none}

  /* ---- card lists become horizontal snap carousels ---- */
  #services .cards-3,#team .cards-3,#reviews .cards-3{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:12px; margin-inline:-18px; padding-inline:18px; padding-bottom:8px;
    scroll-padding-inline:18px; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  #services .cards-3::-webkit-scrollbar,
  #team .cards-3::-webkit-scrollbar,
  #reviews .cards-3::-webkit-scrollbar{display:none}
  #services .cards-3>*,#team .cards-3>*,#reviews .cards-3>*{
    flex:0 0 82%; scroll-snap-align:start;
  }
  #services .cards-3>.service-card{padding:18px}            /* wider cards can breathe */
  #reviews .cards-3>.quote-card{padding:18px}

  /* ---- how-it-works: tighter step cards ---- */
  .step-card{padding:16px}
  .steps-grid{gap:14px}

  /* ---- portal: the diary itself; desktop side panels are dropped ---- */
  .portal-side{display:none}

  /* ---- the always-on bar replaces the bottom CTA band ---- */
  .cta-band{display:none}

  /* ---- the desktop emergency banner is redundant with the bar's Call ---- */
  .topbar{display:none}                                      /* was 118px tall at 390 */

  /* ---- footer: two-up link columns, tighter rhythm ---- */
  .site-footer{padding-top:44px}
  .footer-grid{grid-template-columns:1fr 1fr; gap:24px 16px; padding-bottom:28px}
  .footer-brand,.footer-hours,.footer-news{grid-column:1/-1}
}

/* carousel bleed follows the container padding (16px from the 430px block,
   18px between 431–520 from the 760px block — 24px there overshot by 6px) */
@media (max-width:430px){
  #services .cards-3,#team .cards-3,#reviews .cards-3{
    margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px;
  }

  /* Picker cards stay 2-up on small phones only if the price line may drop
     under the title: a single-row card's min-content is ~182px ("from $690"
     nowrap + "consultation" + padding) while a column is only ~160px at
     390px — flex-wrap + a content flex-basis makes the row actually wrap
     instead of crushing the title over the price. */
  .opt-card{flex-wrap:wrap}
  .opt-main{flex:1 1 auto}
  .opt-side{margin-left:auto}                              /* flush right on its own row */
}