/* =========================================================
   M. NYAMANE DENTAL — Hybrid theme
   Clean light pages + immersive dark "lab" moments.
   Loads after style.css and overrides/extends it.
   ========================================================= */
:root{
  --deep-950:#04121F;
  --deep-900:#071B2E;
  --glow:#4FD8FF;
  --glow-soft:rgba(79,216,255,.38);
  --line-glass:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.07);
  --font-tech:'Space Grotesk','Manrope',-apple-system,'Segoe UI',sans-serif;
  --bg:#F3F7FB;
  --shadow-m:0 16px 40px rgba(10,42,66,.12);
}
html{ scroll-padding-top:96px; }
body{ background:var(--bg); animation:pageIn .5s var(--ease) both; }
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }
h1,h2,h3{ letter-spacing:-.012em; }

/* ---------- Typography accents ---------- */
.eyebrow{ font-family:var(--font-tech); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-600); }
.eyebrow::before{ width:30px; background:linear-gradient(90deg,var(--gold-500),var(--glow)); }
.grad-text{ background:linear-gradient(95deg,var(--gold-300),var(--glow) 90%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- Buttons: magnetic + sheen ---------- */
.btn{
  position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent;
  transform:translate(var(--tx,0px), calc(var(--ty,0px) + var(--lift,0px)));
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), background .28s, color .28s, border-color .28s;
}
.btn::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg, transparent 32%, rgba(255,255,255,.38) 50%, transparent 68%);
  transform:translateX(-130%); transition:transform .7s var(--ease);
}
.btn:hover::after{ transform:translateX(130%); }
.btn:hover{ --lift:-2px; }
.btn:active{ --lift:1px; }
.btn-primary:hover, .btn-gold:hover, .btn-wa:hover, .btn-outline:hover, .btn-ghost:hover{ transform:translate(var(--tx,0px), calc(var(--ty,0px) + var(--lift,0px))); }
.btn-primary{ background:linear-gradient(135deg,var(--navy-800),var(--blue-600)); box-shadow:0 12px 30px rgba(18,87,154,.32); }
.btn-primary:hover{ box-shadow:0 18px 38px rgba(18,87,154,.42); }
.btn-gold{ background:linear-gradient(135deg,#E6C770,#C89B3C 58%,#B4872B); color:var(--navy-900); box-shadow:0 12px 30px rgba(180,135,43,.34); }
.btn-gold:hover{ background:linear-gradient(135deg,#EBCF80,#CDA040 58%,#B98E30); }
.btn-ghost{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }

/* ---------- Cards: hairline, glow follow, gentle tilt ---------- */
.service-card,.why-card,.info-card,.blog-card,.book-card,.team-card{
  border:1px solid rgba(15,66,112,.10);
  background:linear-gradient(180deg,#fff,#FAFCFE);
}
.fx-card{
  --mx:50%; --my:50%; --rx:0deg; --ry:0deg;
  position:relative; transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .28s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.fx-card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; z-index:1;
  background:radial-gradient(380px circle at var(--mx) var(--my), rgba(79,216,255,.16), rgba(79,216,255,0) 62%);
  transition:opacity .3s;
}
.fx-card:hover::before{ opacity:1; }
.service-card.fx-card:hover,.blog-card.fx-card:hover{ transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); border-color:rgba(79,216,255,.45); }
.why-card.fx-card:hover,.info-card.fx-card:hover{ border-color:rgba(79,216,255,.45); box-shadow:var(--shadow-m); }

/* ---------- Dark immersive zones ---------- */
.zone-dark{
  position:relative; isolation:isolate; overflow:hidden; color:#dbe8f3;
  background:
    radial-gradient(900px 520px at 88% -12%, rgba(18,87,154,.6), transparent 62%),
    radial-gradient(720px 480px at -6% 112%, rgba(79,216,255,.15), transparent 62%),
    linear-gradient(160deg,var(--deep-950),var(--deep-900) 55%,#0B2C4A);
}
.zone-dark::before{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 38%,#000 18%,transparent 76%);
  mask-image:radial-gradient(ellipse at 50% 38%,#000 18%,transparent 76%);
}
.zone-dark::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(520px circle at var(--mx,72%) var(--my,28%), rgba(79,216,255,.17), transparent 62%);
}
.zone-dark h1,.zone-dark h2,.zone-dark h3{ color:#fff; }
.zone-dark p{ color:#c3d6e6; }
.zone-dark .eyebrow{ color:var(--gold-300); }
.starfield{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }

/* inner-page banners join the dark language */
.page-hero.zone-dark{ padding:84px 0 96px; }
.page-hero .wrap{ position:relative; z-index:1; }
.page-hero .arc{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:46px; z-index:0; }
.page-hero .arc path{ stroke-dasharray:1700; stroke-dashoffset:1700; animation:drawArc 2.2s var(--ease) .2s forwards; }
@keyframes drawArc{ to{ stroke-dashoffset:0; } }

/* ---------- Live open/closed status ---------- */
.open-status{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-tech); font-size:.78rem; font-weight:600; }
.open-status .dot{ width:8px; height:8px; border-radius:50%; background:#F59E0B; flex:none; }
.open-status.is-open .dot{ background:#34D399; box-shadow:0 0 0 0 rgba(52,211,153,.55); animation:ping 2.2s infinite; }
@keyframes ping{ 0%{ box-shadow:0 0 0 0 rgba(52,211,153,.55); } 70%,100%{ box-shadow:0 0 0 9px rgba(52,211,153,0); } }
.status-pill{ background:var(--bg-alt); border-radius:999px; padding:6px 12px; color:var(--navy-800); }
.branch-info .open-status{ color:#cfe0ee; margin-bottom:14px; }

/* ---------- Hero (dark, holographic) ---------- */
.hero.zone-dark{ padding:76px 0 120px; background-color:var(--deep-900); }
.hero-dark .hero-grid{ position:relative; z-index:1; }
.hero-dark .hero-copy .eyebrow::before{ background:linear-gradient(90deg,var(--gold-500),var(--glow)); }
.hero-dark h1{ color:#fff; }
.hero-dark .lede{ color:#c9dbeb; }
.hero-dark .hero-trust{ gap:12px; margin-top:34px; }
.hero-dark .hero-trust div{ background:var(--glass); border:1px solid var(--line-glass); border-radius:16px; padding:14px 20px; min-width:112px; }
.hero-dark .hero-trust strong{ font-family:var(--font-tech); color:#fff; font-size:1.85rem; }
.hero-dark .hero-trust span{ color:#9db8cf; }

.hero-art.holo{ position:relative; width:100%; max-width:500px; aspect-ratio:1/1; margin:0 auto; --px:0; --py:0; }
.holo .ring{ position:absolute; border-radius:50%; }
.holo .r1{ inset:0; border:1px dashed rgba(255,255,255,.22); animation:spin 70s linear infinite; }
.holo .r2{ inset:7%; border:1.5px solid rgba(79,216,255,.38); animation:spin 30s linear infinite reverse; }
.holo .r1::after,.holo .r2::after{
  content:''; position:absolute; width:10px; height:10px; margin-left:-5px; left:50%; border-radius:50%;
}
.holo .r2::after{ top:-5px; background:var(--glow); box-shadow:0 0 18px 4px var(--glow-soft); }
.holo .r1::after{ bottom:-5px; background:var(--gold-300); box-shadow:0 0 16px 3px rgba(227,199,132,.5); }
.holo .sweep{
  inset:7%; border:0; background:conic-gradient(from 0deg, rgba(79,216,255,0) 0deg, rgba(79,216,255,.32) 36deg, rgba(79,216,255,0) 38deg);
  -webkit-mask:radial-gradient(circle, transparent 58%, #000 59%); mask:radial-gradient(circle, transparent 58%, #000 59%);
  animation:spin 7s linear infinite;
}
.holo .logo-disc{
  position:absolute; inset:15%; border-radius:50%; background:radial-gradient(circle at 34% 24%,#fff,#E9F3FA);
  box-shadow:0 0 0 10px rgba(255,255,255,.06), 0 0 90px rgba(79,216,255,.4), inset 0 -14px 34px rgba(18,87,154,.10);
  display:flex; align-items:center; justify-content:center;
  transform:translate3d(calc(var(--px) * 10px), calc(var(--py) * 10px), 0); transition:transform .25s ease-out;
}
.holo .logo-disc img{ width:68%; height:auto; display:block; }
.holo .r2{ transform:translate3d(calc(var(--px) * -6px), calc(var(--py) * -6px), 0); }
.hero-dark .hero-art .chip{ background:rgba(7,27,46,.88); border:1px solid var(--line-glass); font-family:var(--font-tech); color:#fff; }
.hero-dark .hero-art .badge{ background:rgba(255,255,255,.97); }
.hero-dark .hero-art .badge strong{ font-family:var(--font-head); }
.smile-divider path{ fill:var(--surface); }
.smile-divider .arc-line{ fill:none; stroke-width:2; stroke-dasharray:1700; stroke-dashoffset:1700; animation:drawArc 2.6s var(--ease) .4s forwards; }
.smile-divider{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:auto; margin:0; display:block; }

/* ---------- Scroll progress + intro ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:130; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; transform-origin:0 50%; transform:scaleX(var(--p,0)); background:linear-gradient(90deg,var(--gold-500),var(--glow)); box-shadow:0 0 12px var(--glow-soft); }
.intro{ display:none; position:fixed; inset:0; z-index:400; background:radial-gradient(700px 500px at 50% 40%, #0F3150, var(--deep-950)); align-items:center; justify-content:center; cursor:pointer; }
html.intro-on .intro{ display:flex; animation:introOut .5s ease 1.55s forwards; }
html.intro-on body{ overflow:hidden; animation:none; }
.intro-mark{ position:relative; width:156px; height:156px; display:flex; align-items:center; justify-content:center; animation:introIn .7s var(--ease) both; }
.intro-mark .disc{ position:absolute; inset:14px; border-radius:50%; background:#fff; box-shadow:0 0 70px rgba(79,216,255,.45); }
.intro-mark img{ position:relative; width:80px; height:auto; }
.intro-mark svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); }
.intro-mark circle{ fill:none; stroke:url(#introGrad); stroke-width:3; stroke-linecap:round; stroke-dasharray:440; stroke-dashoffset:440; animation:drawArc 1.1s var(--ease) .15s forwards; }
@keyframes introIn{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:none; } }
@keyframes introOut{ to{ opacity:0; visibility:hidden; } }

/* ---------- Reveal variants ---------- */
[data-reveal="left"].reveal{ transform:translateX(-34px); }
[data-reveal="right"].reveal{ transform:translateX(34px); }
[data-reveal="zoom"].reveal{ transform:scale(.94); }
[data-reveal].reveal.is-visible{ transform:none; }

/* ---------- Arc divider ---------- */
.arc-divider{ display:block; width:100%; height:44px; }
.arc-divider path{ fill:none; stroke-width:2; stroke-dasharray:1700; stroke-dashoffset:1700; transition:stroke-dashoffset 2.4s var(--ease); }
.arc-divider.is-visible path{ stroke-dashoffset:0; }

/* ---------- Before/after: scanner look ---------- */
.ba-handle::before{
  background:linear-gradient(to bottom,var(--glow),#fff 50%,var(--glow));
  box-shadow:0 0 0 3px rgba(79,216,255,.18), 0 0 24px rgba(79,216,255,.75);
}
.ba-handle .grip{ box-shadow:0 0 0 6px rgba(79,216,255,.2), var(--shadow-m); }
.ba-slider::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 4px);
}
.ba-handle{ z-index:3; }
.ba-label{ z-index:2; font-family:var(--font-tech); }
.ba-note{
  position:absolute; bottom:14px; z-index:2; display:flex; align-items:center; gap:7px; max-width:60%;
  font-family:var(--font-tech); font-size:.72rem; font-weight:600; letter-spacing:.03em; color:#fff;
  background:rgba(7,27,46,.8); border:1px solid rgba(79,216,255,.42); padding:6px 11px; border-radius:8px;
  opacity:0; transform:translateY(6px); transition:opacity .45s .2s, transform .45s .2s; pointer-events:none;
}
.ba-note::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--glow); box-shadow:0 0 8px var(--glow); flex:none; }
.ba-before .ba-note{ left:14px; }
.ba-slider > .ba-note{ right:14px; }
.ba-slider.is-live .ba-note{ opacity:1; transform:none; }

/* ---------- Metals that catch the light ---------- */
.metal-trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 26px; }
@media (max-width:520px){ .metal-trio{ grid-template-columns:1fr; } }
.metal-card{
  --mx:30%; --my:20%; position:relative; border-radius:16px; padding:16px 16px 14px; overflow:hidden; color:#1d1608; touch-action:pan-y;
  box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.35);
  background:
    radial-gradient(240px circle at var(--mx) var(--my), rgba(255,255,255,.95), rgba(255,255,255,0) 58%),
    var(--metal);
}
.metal-card strong{ display:block; font-family:var(--font-head); font-size:1.08rem; }
.metal-card span{ font-family:var(--font-tech); font-size:.74rem; font-weight:600; opacity:.78; }
.metal-card.gold{ --metal:linear-gradient(135deg,#8F6A1A,#E8C766 35%,#FFF1BF 52%,#C99A32 75%,#8F6A1A); }
.metal-card.platinum{ --metal:linear-gradient(135deg,#8E9BAB,#E4EBF3 38%,#FFFFFF 52%,#B7C2CF 76%,#8493A4); color:#10202e; }
.metal-card.silver{ --metal:linear-gradient(135deg,#7D858E,#DADFE4 38%,#F7F8F9 52%,#AEB5BC 76%,#7B838B); color:#16202a; }

/* ---------- Smile Lab teaser cards ---------- */
.lab-teasers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .lab-teasers{ grid-template-columns:1fr; } }
.teaser{ display:flex; flex-direction:column; gap:10px; padding:26px; border-radius:var(--radius-m); background:linear-gradient(180deg,#fff,#F7FBFE); border:1px solid rgba(15,66,112,.1); }
.teaser .t-icon{ width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--navy-800),var(--blue-600)); color:#fff; box-shadow:0 10px 24px rgba(18,87,154,.3); }
.teaser .t-icon svg{ width:26px; height:26px; }
.teaser h3{ margin:0; font-size:1.2rem; }
.teaser p{ margin:0; font-size:.94rem; }
.teaser .t-link{ margin-top:auto; font-family:var(--font-tech); font-weight:700; font-size:.86rem; color:var(--blue-600); display:inline-flex; gap:8px; align-items:center; }
.teaser .t-link svg{ width:16px; height:16px; transition:transform .25s; }
.teaser:hover .t-link svg{ transform:translateX(5px); }

/* ---------- Footer extras ---------- */
.fx-toggle{ font-family:var(--font-tech); font-size:.78rem; font-weight:600; color:#b7c8d6; background:transparent; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:6px 14px; }
.fx-toggle[aria-pressed="true"]{ background:var(--gold-500); color:var(--navy-900); border-color:var(--gold-500); }
.footer-bottom{ align-items:center; }

/* =========================================================
   Booking wizard
   ========================================================= */
.wizard{ position:relative; }
.wiz-progress{ display:flex; justify-content:space-between; margin:0 0 28px; padding:0; list-style:none; position:relative; }
.wiz-progress::before{ content:''; position:absolute; top:16px; left:16px; right:16px; height:2px; background:var(--line); }
.wiz-progress::after{ content:''; position:absolute; top:16px; left:16px; height:2px; width:calc((100% - 32px) * var(--wp,0)); background:linear-gradient(90deg,var(--gold-500),var(--glow)); transition:width .5s var(--ease); }
.wiz-progress li{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.72rem; font-weight:700; color:var(--muted); font-family:var(--font-tech); }
.wiz-progress li span{ width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.82rem; transition:all .3s; }
.wiz-progress li.is-active{ color:var(--navy-900); }
.wiz-progress li.is-active span{ border-color:var(--blue-500); color:var(--blue-600); box-shadow:0 0 0 5px rgba(27,109,187,.14); }
.wiz-progress li.is-done span{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; }
.wiz-step{ border:0; padding:0; margin:0 0 6px; min-width:0; }
.wiz-step legend{ font-family:var(--font-head); font-size:1.3rem; font-weight:600; color:var(--navy-900); margin-bottom:16px; padding:0; }
.wizard.is-wizard .wiz-step{ display:none; }
.wizard.is-wizard .wiz-step.is-active{ display:block; animation:stepIn .45s var(--ease); }
@keyframes stepIn{ from{ opacity:0; transform:translateX(26px); } to{ opacity:1; transform:none; } }
.wiz-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:22px; }
.wizard:not(.is-wizard) .wiz-nav, .wizard:not(.is-wizard) .wiz-progress{ display:none; }
.wiz-nav [hidden]{ display:none; }
.wiz-nav [data-next]{ margin-left:auto; }

.branch-cards{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:520px){ .branch-cards{ grid-template-columns:1fr; } }
.bcard{ position:relative; display:block; cursor:pointer; }
.bcard input,.chip-opt input{ position:absolute; opacity:0; pointer-events:none; }
.bcard-body{ display:flex; flex-direction:column; gap:6px; padding:18px; border-radius:16px; border:1.5px solid var(--line); background:#fff; transition:all .25s var(--ease); height:100%; }
.bcard-body strong{ font-family:var(--font-head); font-size:1.15rem; color:var(--navy-900); }
.bcard-body small{ color:var(--muted); font-size:.84rem; }
.bcard:hover .bcard-body{ border-color:var(--blue-500); transform:translateY(-2px); }
.bcard input:checked + .bcard-body{ border-color:var(--navy-800); background:linear-gradient(180deg,#F4F9FE,#E9F2FB); box-shadow:0 0 0 4px rgba(27,109,187,.12), var(--shadow-s); }
.bcard input:focus-visible + .bcard-body, .chip-opt input:focus-visible + span{ outline:3px solid var(--gold-500); outline-offset:2px; }

.chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.chip-opt{ position:relative; cursor:pointer; }
.chip-opt span{ display:inline-block; padding:11px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-weight:700; font-size:.9rem; color:var(--ink-soft); transition:all .22s var(--ease); }
.chip-opt:hover span{ border-color:var(--blue-500); color:var(--navy-900); transform:translateY(-1px); }
.chip-opt input:checked + span{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; box-shadow:0 8px 20px rgba(12,52,87,.25); }

.day-strip{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 12px; scroll-snap-type:x proximity; scrollbar-width:thin; }
.day-chip{ flex:0 0 74px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; border-radius:16px; border:1.5px solid var(--line); background:#fff; cursor:pointer; font-family:var(--font-tech); transition:all .22s var(--ease); }
.day-chip small{ font-size:.7rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.day-chip b{ font-size:1.35rem; color:var(--navy-900); }
.day-chip em{ font-style:normal; font-size:.7rem; color:var(--muted); }
.day-chip:hover{ border-color:var(--blue-500); }
.day-chip.is-selected{ background:var(--navy-800); border-color:var(--navy-800); }
.day-chip.is-selected small,.day-chip.is-selected em{ color:#b9cde0; }
.day-chip.is-selected b{ color:#fff; }
.time-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:8px; margin-top:6px; min-height:44px; }
.time-chip{ padding:10px 6px; border-radius:12px; border:1.5px solid var(--line); background:#fff; font-family:var(--font-tech); font-weight:600; font-size:.88rem; cursor:pointer; color:var(--ink-soft); transition:all .2s var(--ease); animation:chipIn .35s var(--ease) both; animation-delay:calc(var(--n,0) * 18ms); }
@keyframes chipIn{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
.time-chip:hover{ border-color:var(--blue-500); }
.time-chip.is-selected{ background:var(--navy-800); border-color:var(--navy-800); color:#fff; }
.time-empty{ grid-column:1/-1; color:var(--muted); font-size:.9rem; }
.skip-link{ background:none; border:0; color:var(--blue-600); font-weight:700; cursor:pointer; padding:10px 0; font-family:inherit; }

.summary{ margin:6px 0 18px; padding:16px 18px; border-radius:14px; background:var(--bg-alt); border:1px dashed rgba(15,66,112,.22); font-size:.9rem; }
.summary dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:6px 14px; }
.summary dt{ color:var(--muted); font-weight:600; }
.summary dd{ margin:0; color:var(--navy-900); font-weight:700; }
.wiz-send{ display:grid; gap:12px; }
.wiz-done{ text-align:center; padding:26px 8px; }
.wiz-done .tick{ width:68px; height:68px; margin:0 auto 14px; }
.wiz-done .tick circle,.wiz-done .tick path{ fill:none; stroke:var(--aqua-500); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:200; stroke-dashoffset:200; animation:drawArc .9s var(--ease) forwards; }
.wiz-done .tick path{ animation-delay:.35s; }

/* =========================================================
   Smile assistant
   ========================================================= */
.assist-launch{
  position:fixed; right:20px; bottom:92px; z-index:90; display:flex; align-items:center; gap:10px; padding:8px 18px 8px 8px; border:0; cursor:pointer;
  border-radius:999px; background:linear-gradient(135deg,var(--deep-900),var(--navy-700)); color:#fff; font-family:var(--font-tech); font-weight:700; font-size:.92rem;
  box-shadow:0 14px 34px rgba(7,27,46,.4), 0 0 0 1px rgba(79,216,255,.35);
}
.assist-launch img{ width:38px; height:38px; border-radius:50%; background:#fff; padding:6px; }
.assist-launch::after{ content:''; position:absolute; inset:-5px; border-radius:inherit; border:1px solid rgba(79,216,255,.5); animation:halo 3s ease-out infinite; pointer-events:none; }
@keyframes halo{ 0%{ opacity:.9; transform:scale(.96); } 100%{ opacity:0; transform:scale(1.18); } }
.assist{
  position:fixed; right:20px; bottom:162px; z-index:95; width:min(372px,calc(100vw - 40px)); height:min(540px,calc(100vh - 190px)); display:flex; flex-direction:column;
  padding:0; background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 30px 70px rgba(7,27,46,.38), 0 0 0 1px rgba(15,66,112,.1);
  transform-origin:right bottom; animation:assistIn .35s var(--ease);
}
.assist[hidden]{ display:none; }
@keyframes assistIn{ from{ opacity:0; transform:translateY(18px) scale(.94); } to{ opacity:1; transform:none; } }
.assist-head{ display:flex; align-items:center; gap:12px; padding:14px 16px; color:#fff; background:linear-gradient(135deg,var(--deep-900),var(--navy-700)); }
.assist-head img{ width:40px; height:40px; border-radius:50%; background:#fff; padding:6px; }
.assist-head strong{ display:block; font-family:var(--font-head); font-size:1.02rem; }
.assist-head small{ color:#a9c3d8; font-size:.74rem; }
.assist-close{ margin-left:auto; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font-size:1.1rem; cursor:pointer; }
.assist-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:#F5F9FC; scroll-behavior:smooth; }
.msg{ max-width:88%; padding:11px 14px; border-radius:16px; font-size:.92rem; line-height:1.5; animation:msgIn .35s var(--ease); }
@keyframes msgIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.msg.bot{ background:#fff; border:1px solid rgba(15,66,112,.1); color:var(--ink-soft); border-bottom-left-radius:5px; align-self:flex-start; }
.msg.me{ background:var(--navy-800); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.msg.bot strong{ color:var(--navy-900); }
.msg.bot a.msg-btn{ display:inline-block; margin:8px 8px 0 0; padding:8px 14px; border-radius:999px; background:var(--navy-800); color:#fff; font-weight:700; font-size:.84rem; }
.msg.bot a.msg-btn.alt{ background:#1E9E5C; }
.typing{ display:flex; gap:5px; padding:14px 16px; }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--muted); animation:blink 1s infinite; }
.typing i:nth-child(2){ animation-delay:.15s; } .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25; transform:translateY(0); } 40%{ opacity:1; transform:translateY(-4px); } }
.assist-quick{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px 4px; background:#F5F9FC; max-height:116px; overflow-y:auto; }
.assist-quick button{ padding:8px 13px; border-radius:999px; border:1.5px solid rgba(18,87,154,.3); background:#fff; color:var(--blue-600); font-weight:700; font-size:.8rem; cursor:pointer; font-family:inherit; transition:all .2s; }
.assist-quick button:hover{ background:var(--navy-800); color:#fff; border-color:var(--navy-800); }
.assist-form{ display:flex; gap:8px; padding:10px 14px 14px; background:#F5F9FC; }
.assist-form input{ flex:1; padding:11px 14px; border-radius:999px; border:1.5px solid var(--line); font-family:inherit; font-size:.92rem; }
.assist-form input:focus{ outline:none; border-color:var(--blue-500); }
.assist-form button{ width:44px; border:0; border-radius:50%; background:var(--navy-800); color:#fff; cursor:pointer; }
@media (max-width:560px){
  .assist-launch span{ display:none; }
  .assist-launch{ padding:8px; }
  .assist{ left:10px; right:10px; width:auto; bottom:158px; height:min(62vh,500px); }
  .assist-launch{ right:21px; }
}

/* =========================================================
   Article pages
   ========================================================= */
.article-hero{ position:relative; }
.article-hero .wrap{ max-width:880px; }
.article-hero h1{ font-size:clamp(2rem,4.4vw,3.1rem); }
.article-meta{ font-family:var(--font-tech); font-size:.8rem; letter-spacing:.06em; color:var(--gold-300); margin-bottom:14px; }
.article-cover{ max-width:880px; margin:-56px auto 0; padding:0 24px; position:relative; z-index:2; }
.article-cover img{ width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:var(--radius-l); box-shadow:var(--shadow-m); display:block; }
.article-body{ max-width:720px; margin:0 auto; padding:44px 24px 20px; }
.article-body p{ font-size:1.08rem; line-height:1.8; color:var(--ink-soft); max-width:none; }
.article-body p:first-of-type::first-letter{ font-family:var(--font-head); font-size:3.3rem; float:left; line-height:.9; padding:6px 10px 0 0; color:var(--navy-800); }
.article-note{ max-width:720px; margin:0 auto; padding:0 24px; font-size:.86rem; color:var(--muted); }
.share-row{ max-width:720px; margin:24px auto 0; padding:0 24px; display:flex; gap:12px; flex-wrap:wrap; }
.article-cta{ max-width:720px; margin:36px auto 0; padding:28px; border-radius:var(--radius-m); background:linear-gradient(135deg,var(--deep-900),var(--navy-700)); color:#fff; }
.article-cta h3{ color:#fff; margin-bottom:6px; }
.article-cta p{ color:#cfe0ee; }
.article-wrap{ padding:0 24px; }
.related{ padding-top:0; }
.blog-card{ text-decoration:none; color:inherit; }

/* =========================================================
   Offline page + misc
   ========================================================= */
.offline-wrap{ min-height:70vh; display:flex; align-items:center; }

/* =========================================================
   Page transitions (supporting browsers) + lite mode
   ========================================================= */
@view-transition{ navigation:auto; }
.site-header{ view-transition-name:site-header; }
::view-transition-old(root){ animation:vtOut .2s ease both; }
::view-transition-new(root){ animation:vtIn .35s ease both; }
@keyframes vtOut{ to{ opacity:0; } }
@keyframes vtIn{ from{ opacity:0; } }

html.lite .starfield, html.lite .holo .sweep, html.lite .intro, html.lite .assist-launch::after{ display:none !important; }
html.lite .fx-card{ transform:none !important; }
html.lite *, html.lite *::before, html.lite *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.12s !important; }
html.lite body{ animation:none; }
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation:none; }
  .scroll-progress{ display:none; }
}

/* ---------- Responsive nudges ---------- */
@media (max-width:960px){
  .hero.zone-dark{ padding:48px 0 104px; }
  .page-hero.zone-dark{ padding:64px 0 80px; }
  .hero-dark .hero-trust div{ padding:12px 16px; min-width:0; flex:1 1 90px; }
}

/* grid columns must be allowed to shrink, otherwise the scrollable day strip stretches the whole page on phones */
.book-layout{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
@media (max-width:900px){ .book-layout{ grid-template-columns:minmax(0,1fr); } }
.book-card,.side-info{ min-width:0; }
.day-strip{ max-width:100%; }

/* sideways reveals would widen the page on phones before they appear: slide up instead */
@media (max-width:860px){
  [data-reveal="left"].reveal,[data-reveal="right"].reveal{ transform:translateY(26px); }
  [data-reveal].reveal.is-visible{ transform:none; }
}
body{ overflow-x:clip; }

/* the hidden attribute must always win over component display rules */
[hidden]{ display:none !important; }

/* =========================================================
   Wider team grid (About page)
   ========================================================= */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:36px; }
@media (max-width:980px){ .team-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:420px){ .team-grid{ grid-template-columns:1fr;} }
.member{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-s); transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.member:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); }
.member-photo{ aspect-ratio:4/5; overflow:hidden; background:var(--navy-900); }
.member-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.member-info{ padding:18px 20px 22px; border-top:3px solid var(--gold-500); }
.member-info h3{ font-size:1.08rem; margin:0 0 4px; }
.member-role{ margin:0 0 12px; font-size:.9rem; font-weight:700; color:var(--navy-800); }
.member-branch{ display:inline-flex; align-items:center; gap:6px; margin:0; background:var(--bg-alt); border-radius:999px; padding:6px 12px; font-size:.78rem; font-weight:700; color:var(--navy-800); }
.member-branch svg{ width:14px; height:14px; color:var(--gold-600); flex:none; }
.member{ display:flex; flex-direction:column; }
.member-info{ flex:1; display:flex; flex-direction:column; }
.member-branch{ margin-top:auto; align-self:flex-start; }


/* ---- Patient portal button (header, mobile menu) ---- */
.btn-portal{ background:var(--gold-500); border-color:var(--gold-500); color:#1a1405; gap:8px; box-shadow:var(--shadow-gold);}
.btn-portal:hover{ background:var(--gold-300); border-color:var(--gold-300); color:#1a1405;}
.btn-portal svg{ width:17px; height:17px; flex:none;}
.btn-portal .pl-short{ display:none;}
.main-nav .nav-portal-item{ display:none;}
@media (max-width:960px){
  .main-nav .nav-portal-item{ display:block; color:var(--gold-300)!important; font-weight:700;}
}
@media (max-width:560px){
  .btn-portal .pl-long{ display:none;}
  .btn-portal .pl-short{ display:inline;}
  .nav-cta{ gap:6px;}
  .nav-cta .btn{ padding:9px 12px; font-size:.8rem; gap:6px;}
  .btn-portal svg{ width:15px; height:15px;}
  .nav-toggle{ width:42px; height:42px;}
}
@media (max-width:370px){
  .btn-portal svg{ display:none;}
  .nav-cta .btn{ padding:9px 10px;}
}

/* Keep the menu on one line now that the portal button shares the row */
.main-nav a{ white-space:nowrap;}
@media (min-width:961px) and (max-width:1260px){
  .main-nav a{ padding:10px 11px; font-size:.9rem;}
  .nav-cta{ gap:8px;}
  .nav-cta .btn{ padding:10px 16px; font-size:.86rem;}
}
@media (min-width:961px) and (max-width:1100px){
  .nav-cta .btn-outline{ display:none;}   /* the phone numbers stay in the top bar */
}