/* =========================================================================
   Dentist — design system
   Written with logical properties throughout, so the Arabic RTL layout is
   the same stylesheet mirrored, not a second set of rules.
   ========================================================================= */

:root{
  --brand:#0d9488; --brand-600:#0f766e; --brand-700:#115e59;
  --brand-100:#ccfbf1; --brand-50:#f0fdfa;
  --accent:#f59e0b; --accent-soft:#fef3c7;
  --ink:#0b2a33; --body:#4a6068; --muted:#7c959d;
  --bg:#ffffff; --surface:#f5fafa; --card:#ffffff; --line:#e2edee;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626;
  --radius:18px; --radius-sm:12px; --radius-lg:28px;
  --shadow:0 1px 2px rgba(11,42,51,.05), 0 12px 28px -14px rgba(11,42,51,.16);
  --shadow-lg:0 2px 4px rgba(11,42,51,.05), 0 28px 60px -26px rgba(11,42,51,.3);
  --wrap:1200px;
  --font:'Plus Jakarta Sans','Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.4,.14,.3,1);
}

:root[data-theme=dark]{
  --brand:#2dd4bf; --brand-600:#5eead4; --brand-700:#99f6e4;
  --brand-100:#12403f; --brand-50:#0f2e30;
  --accent:#fbbf24; --accent-soft:#3a2c0c;
  --ink:#e8f5f4; --body:#a7c0c5; --muted:#7e9aa1;
  --bg:#08151a; --surface:#0d2027; --card:#102a31; --line:#1c3c45;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.6);
  --shadow-lg:0 2px 4px rgba(0,0,0,.3), 0 28px 60px -26px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--font); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,iframe{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{color:var(--ink); line-height:1.25; margin:0 0 .5em; font-weight:800; letter-spacing:-.01em}
h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.4rem)}
h2{font-size:clamp(1.5rem,1.15rem + 1.5vw,2.4rem)}
h3{font-size:clamp(1.05rem,.98rem + .35vw,1.3rem)}
p{margin:0 0 1em}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--brand); outline-offset:2px; border-radius:6px;
}
.skip{position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 0}
.skip:focus{inset-inline-start:0}

.ic{width:22px; height:22px; flex:none}
.ic.sm{width:17px; height:17px}
[dir=rtl] .ic.flip,[dir=ltr] .ic.flip{transform:scaleX(-1)}
[dir=rtl] .go .ic,[dir=rtl] .btn .ic:last-child:not(:first-child){transform:scaleX(-1)}

/* ------------------------------------------------------------ layout ---- */
.wrap{width:min(100% - 2.4rem,var(--wrap)); margin-inline:auto}
.section{padding-block:clamp(3.5rem,2rem + 6vw,6.5rem)}
.section.narrow{max-width:860px; margin-inline:auto}
.soft{background:var(--surface)}
.center{text-align:center}
.mt{margin-block-start:2rem}
.grid{display:grid; gap:1.4rem}
.g3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.muted{color:var(--muted)}
.lead{font-size:clamp(1rem,.95rem + .3vw,1.16rem); color:var(--body); margin:0}
.hint{display:flex; align-items:center; justify-content:center; gap:.5rem;
  color:var(--muted); font-size:.92rem}
.hint.center{justify-content:center}
.hp{position:absolute; inset-inline-start:-9999px; opacity:0; height:0; width:0}

.sec-head{max-width:680px; margin-inline:auto; text-align:center; margin-block-end:2.6rem}
.sec-head h2{margin-block-end:.4rem}
.eyebrow{display:inline-flex; align-items:center; gap:.45rem; margin-block-end:.9rem;
  background:var(--brand-50); color:var(--brand-600); border:1px solid var(--brand-100);
  padding:.34rem .85rem; border-radius:999px; font-size:.83rem; font-weight:700}

/* ----------------------------------------------------------- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.3rem; border-radius:999px; border:1.5px solid transparent;
  font-weight:700; font-size:.95rem; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.btn.lg{padding:.92rem 1.7rem; font-size:1rem}
.btn.sm{padding:.45rem .9rem; font-size:.85rem}
.btn.block{display:flex; width:100%; margin-block-start:.6rem}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 10px 24px -12px var(--brand)}
.btn-primary:hover{background:var(--brand-600); box-shadow:0 16px 30px -14px var(--brand); transform:translateY(-2px)}
:root[data-theme=dark] .btn-primary{color:#04262a}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand); background:var(--brand-50)}
.btn-white{background:#fff; color:var(--brand-700)}
.btn-white:hover{transform:translateY(-2px); box-shadow:0 16px 30px -14px rgba(0,0,0,.4)}
.btn-outline-white{border-color:rgba(255,255,255,.55); color:#fff}
.btn-outline-white:hover{background:rgba(255,255,255,.14)}
.icon-btn{
  display:inline-grid; place-items:center; width:38px; height:38px; flex:none;
  border-radius:12px; border:1px solid var(--line); background:var(--card);
  color:var(--body); cursor:pointer; transition:.18s var(--ease);
}
.icon-btn:hover{color:var(--brand); border-color:var(--brand); background:var(--brand-50)}
.icon-btn.danger:hover{color:var(--err); border-color:var(--err); background:transparent}
.go{display:inline-flex; align-items:center; gap:.35rem; color:var(--brand); font-weight:700; font-size:.9rem}

/* ------------------------------------------------------------ topbar ---- */
.topbar{background:var(--ink); color:#d6e7ea; font-size:.83rem}
:root[data-theme=dark] .topbar{background:#061014}
.topbar-in{display:flex; align-items:center; gap:1.1rem; min-height:42px; flex-wrap:wrap}
.topbar a:hover{color:#fff}
.topbar-link,.topbar-note{display:inline-flex; align-items:center; gap:.4rem}
.topbar-note{color:#8fb0b6}
.topbar-end{margin-inline-start:auto; display:flex; align-items:center; gap:.5rem}
.topbar .icon-btn{width:30px; height:30px; border-radius:9px; background:transparent;
  border-color:rgba(255,255,255,.18); color:#cfe3e6}
.topbar .icon-btn:hover{background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.35)}
.lang-btn{display:inline-flex; align-items:center; gap:.35rem; padding:.28rem .7rem;
  border:1px solid rgba(255,255,255,.2); border-radius:999px; font-weight:700}
.lang-btn:hover{background:rgba(255,255,255,.1)}
.pill{display:inline-flex; align-items:center; gap:.4rem; font-weight:700}
.pill .dot{width:7px; height:7px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px rgba(22,163,74,.25)}
.pill.off .dot{background:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,.2)}
@media (max-width:860px){ .topbar-note,.topbar-link{display:none} }

/* ------------------------------------------------------------ header ---- */
.site-header{position:sticky; top:0; z-index:60; background:var(--card);
  border-block-end:1px solid var(--line); transition:box-shadow .25s var(--ease)}
.site-header.stuck{box-shadow:var(--shadow)}
.header-in{display:flex; align-items:center; gap:1rem; min-height:72px}
.brand{display:flex; align-items:center; gap:.65rem; flex:none}
.brand-mark{display:grid; place-items:center; width:42px; height:42px; border-radius:13px;
  background:linear-gradient(140deg,var(--brand),var(--brand-700)); color:#fff; flex:none;
  box-shadow:0 8px 18px -8px var(--brand)}
.brand-mark.big{width:58px; height:58px; border-radius:18px; margin-inline:auto}
.brand-text{display:flex; flex-direction:column; line-height:1.2}
.brand-text strong{color:var(--ink); font-size:1.12rem; font-weight:800}
.brand-text small{color:var(--muted); font-size:.73rem}
.brand.light .brand-text strong{color:#fff}
.brand.light .brand-text small{color:#9fbcc2}

.nav{display:flex; align-items:center; gap:.15rem; margin-inline-start:auto}
.nav>a{padding:.55rem .8rem; border-radius:10px; font-weight:600; font-size:.94rem; color:var(--body)}
.nav>a:hover{color:var(--brand); background:var(--brand-50)}
.nav>a.active{color:var(--brand); font-weight:700}
.nav-cta,.nav-close{display:none}
.header-end{display:flex; align-items:center; gap:.6rem; margin-inline-start:.4rem}
.nav-toggle{display:none}

@media (max-width:1080px){
  .nav{
    position:fixed; inset-block:0; inset-inline-end:0; width:min(86vw,340px);
    background:var(--card); flex-direction:column; align-items:stretch; gap:.2rem;
    padding:5rem 1.2rem 2rem; z-index:80; overflow-y:auto;
    transform:translateX(var(--nav-x,110%)); transition:transform .3s var(--ease);
    box-shadow:var(--shadow-lg); margin:0;
  }
  [dir=rtl] .nav{--nav-x:-110%}
  .nav.open{transform:translateX(0)}
  .nav>a{padding:.85rem 1rem; font-size:1.02rem; border-block-end:1px solid var(--line)}
  .nav-cta{display:flex; margin-block-start:1.2rem}
  .nav-close{display:inline-grid; position:absolute; top:1rem; inset-inline-end:1rem}
  .nav-toggle{display:inline-grid}
  .header-cta{display:none}
  .nav-scrim{position:fixed; inset:0; background:rgba(6,20,24,.55); z-index:70;
    opacity:0; animation:fade .25s forwards}
}
@keyframes fade{to{opacity:1}}

/* -------------------------------------------------------------- hero ---- */
.hero{position:relative; overflow:hidden; padding-block:clamp(2.5rem,1rem + 6vw,5.5rem)}
.hero-bg{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-bg span{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5}
.hero-bg .b1{width:520px; height:520px; background:var(--brand-100); inset-block-start:-160px; inset-inline-end:-120px}
.hero-bg .b2{width:420px; height:420px; background:var(--accent-soft); inset-block-end:-180px; inset-inline-start:-140px; opacity:.45}
.hero-bg .b3{width:300px; height:300px; background:var(--brand-50); inset-block-start:40%; inset-inline-start:40%}
.hero-in{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,4vw,4rem); align-items:center}
.hero-copy h1{margin-block:.6rem .7rem}
.hero-copy .lead{max-width:52ch; margin-block-end:1.8rem}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 4px rgba(22,163,74,.2); animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(22,163,74,0)}}
.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap}
.hero-actions.center-actions{justify-content:center}
.hero-points{list-style:none; padding:0; margin:2rem 0 0; display:flex; flex-wrap:wrap; gap:.6rem 1.5rem}
.hero-points li{display:flex; align-items:center; gap:.45rem; font-size:.92rem; font-weight:600; color:var(--ink)}
.hero-points .ic{color:var(--brand)}

.hero-art{position:relative}
.hero-art>svg{width:100%; height:auto}
.spin-slow{animation:spin 34s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.float-card{position:absolute; display:flex; align-items:center; gap:.65rem;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:.7rem .95rem; box-shadow:var(--shadow); animation:float 6s ease-in-out infinite}
.float-card .ic{color:var(--brand)}
.float-card b{display:block; color:var(--ink); font-size:1.05rem; line-height:1.2}
.float-card span{font-size:.75rem; color:var(--muted)}
.float-card.f1{inset-block-start:8%; inset-inline-start:-4%}
.float-card.f2{inset-block-start:44%; inset-inline-end:-6%; animation-delay:-2s}
.float-card.f3{inset-block-end:6%; inset-inline-start:6%; animation-delay:-4s}
@keyframes float{50%{transform:translateY(-12px)}}

@media (max-width:900px){
  .hero-in{grid-template-columns:1fr}
  .hero-art{order:-1; max-width:400px; margin-inline:auto}
  .float-card.f1{inset-inline-start:0}
  .float-card.f2{inset-inline-end:0}
}
@media (max-width:520px){ .float-card{padding:.5rem .7rem} .float-card .ic{display:none} }

/* ------------------------------------------------------------- stats ---- */
.stats-strip{background:linear-gradient(135deg,var(--brand-700),var(--brand)); color:#fff}
.stats-strip.plain-strip{background:var(--ink)}
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1rem; padding-block:2.4rem; text-align:center}
.stat{display:flex; flex-direction:column; align-items:center; gap:.2rem}
.stat .ic{opacity:.75; margin-block-end:.3rem}
.stat b{font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem); font-weight:800; color:#fff}
.stat span{font-size:.85rem; opacity:.82}

/* ------------------------------------------------------------- cards ---- */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); transition:transform .25s var(--ease), box-shadow .25s var(--ease),
  border-color .25s var(--ease)}
.card.pad{padding:1.5rem}
.card.pad+.card.pad{margin-block-start:1.2rem}

.svc-card{padding:1.6rem; display:flex; flex-direction:column}
.svc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--brand-100)}
.svc-icon{display:grid; place-items:center; width:52px; height:52px; border-radius:15px;
  background:var(--brand-50); color:var(--brand); margin-block-end:1rem;
  transition:.25s var(--ease)}
.svc-card:hover .svc-icon{background:var(--brand); color:#fff; transform:rotate(-6deg) scale(1.05)}
.svc-card h3{margin-block-end:.45rem}
.svc-card p{font-size:.93rem; margin-block-end:1.1rem}
.svc-foot{margin-block-start:auto; display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; flex-wrap:wrap; padding-block-start:.9rem; border-block-start:1px solid var(--line)}
.svc-foot .price{font-size:.85rem; color:var(--muted)}
.svc-foot .price b{color:var(--ink); font-size:.95rem}

.why-card{padding:1.5rem}
.why-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.why-icon{display:grid; place-items:center; width:46px; height:46px; border-radius:14px;
  background:linear-gradient(140deg,var(--brand),var(--brand-700)); color:#fff; margin-block-end:.9rem}
.why-card p{font-size:.93rem; margin:0}

.doc-card{overflow:hidden; display:flex; flex-direction:column}
.doc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.doc-media{aspect-ratio:1/1; background:var(--surface); position:relative; overflow:hidden}
.doc-photo{width:100%; height:100%; object-fit:cover}
.avatar-ph{position:relative; display:block; width:100%; height:100%}
.avatar-ph svg{width:100%; height:100%}
.avatar-ph b{position:absolute; inset-block-end:.6rem; inset-inline-end:.7rem;
  background:rgba(255,255,255,.92); color:hsl(var(--h) 55% 32%); font-size:.85rem;
  padding:.15rem .5rem; border-radius:8px; font-weight:800}
.doc-body{padding:1.2rem; display:flex; flex-direction:column; flex:1}
.doc-body h3{margin-block-end:.2rem; font-size:1.08rem}
.doc-title{color:var(--brand); font-size:.85rem; font-weight:700; margin-block-end:.6rem}
.doc-bio{font-size:.88rem; margin-block-end:1rem}
.doc-body .btn{margin-block-start:auto; font-size:.82rem; padding:.5rem .8rem}
.doc-body .btn span,.doc-body .btn{white-space:normal}

.review-card{padding:1.6rem; position:relative}
.quote-mark{position:absolute; inset-block-start:1.2rem; inset-inline-end:1.3rem;
  color:var(--brand-100); }
.quote-mark .ic{width:34px; height:34px}
.stars{display:flex; gap:.15rem; margin-block-end:.8rem; color:#d8dee1}
.stars .on{color:var(--accent)}
.review-card p{font-size:.95rem; position:relative; z-index:1}
.review-card footer{display:flex; align-items:center; gap:.65rem; margin-block-start:1.1rem;
  padding-block-start:1rem; border-block-start:1px solid var(--line)}
.who-ph{display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--brand-50); color:var(--brand-600); font-weight:800; font-size:.85rem}
.review-card b{color:var(--ink)}

.case-card{overflow:hidden; margin:0}
.case-card figcaption{padding:1.1rem 1.3rem 1.4rem}
.case-card h3{font-size:1rem; margin-block-end:.25rem}
.case-card p{font-size:.88rem; margin:0}
.compare{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface); touch-action:pan-y}
.compare-pane{position:absolute; inset:0}
.compare-pane img,.compare-pane svg{width:100%; height:100%; object-fit:cover}
.compare-pane.before{clip-path:inset(0 var(--clip-e,50%) 0 0)}
[dir=rtl] .compare-pane.before{clip-path:inset(0 0 0 var(--clip-e,50%))}
.compare .tag{position:absolute; inset-block-start:.7rem; font-size:.72rem; font-weight:800;
  padding:.2rem .6rem; border-radius:999px; background:rgba(11,42,51,.72); color:#fff}
.compare .tag.before{inset-inline-start:.7rem}
.compare .tag.after{inset-inline-end:.7rem; background:var(--brand)}
.compare-handle{position:absolute; inset-block:0; inset-inline-start:var(--pos,50%);
  width:3px; background:#fff; box-shadow:0 0 0 1px rgba(11,42,51,.18); pointer-events:none}
.compare-handle .grip{position:absolute; top:50%; inset-inline-start:50%;
  transform:translate(-50%,-50%); width:36px; height:36px; border-radius:50%;
  background:#fff; color:var(--brand); display:grid; place-items:center;
  box-shadow:0 4px 14px rgba(11,42,51,.28)}
[dir=rtl] .compare-handle .grip{transform:translate(50%,-50%)}
.compare-range{position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:ew-resize}

.post-card{overflow:hidden; display:flex; flex-direction:column}
.post-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg)}
.post-media{aspect-ratio:16/10; overflow:hidden; background:var(--surface)}
.post-media img,.post-media svg{width:100%; height:100%; object-fit:cover}
.post-body{padding:1.3rem; display:flex; flex-direction:column; flex:1}
.post-body time{display:flex; align-items:center; gap:.4rem; font-size:.8rem;
  color:var(--muted); margin-block-end:.5rem}
.post-body h3{font-size:1.05rem; margin-block-end:.4rem}
.post-body p{font-size:.9rem; margin-block-end:1rem}
.post-body .go{margin-block-start:auto}
.post-cover{width:100%; border-radius:var(--radius); margin-block-end:2rem}

/* --------------------------------------------------------- page hero ---- */
.page-hero{position:relative; overflow:hidden; background:var(--surface);
  padding-block:clamp(2.2rem,1.5rem + 3vw,4rem); border-block-end:1px solid var(--line)}
.page-hero .lead{max-width:62ch}
.hero-blob{position:absolute; inset-block-start:-140px; inset-inline-end:-100px;
  width:380px; height:380px; border-radius:50%; background:var(--brand-100);
  filter:blur(60px); opacity:.55; pointer-events:none}
.crumbs{display:flex; align-items:center; gap:.5rem; font-size:.85rem;
  color:var(--muted); margin-block-end:.8rem; flex-wrap:wrap}
.crumbs a:hover{color:var(--brand)}
.meta-line{display:flex; align-items:center; gap:.45rem}
.svc-hero{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap}
.svc-hero-icon{display:grid; place-items:center; width:74px; height:74px; border-radius:22px;
  background:linear-gradient(140deg,var(--brand),var(--brand-700)); color:#fff; flex:none;
  box-shadow:0 14px 30px -14px var(--brand)}
.svc-hero-icon .ic{width:34px; height:34px}
.svc-hero h1{margin-block-end:.3rem}

/* -------------------------------------------------------------- prose --- */
.prose{color:var(--body); font-size:1.02rem}
.prose p{margin-block-end:1.2rem}
.split{display:grid; grid-template-columns:1.6fr .9fr; gap:2.5rem; align-items:start}
.about-split{grid-template-columns:1.2fr 1fr; align-items:center}
@media (max-width:900px){ .split,.about-split{grid-template-columns:1fr} }
.side-card{position:sticky; top:100px}
.facts{list-style:none; padding:0; margin:0 0 1.2rem}
.facts li{display:flex; align-items:center; gap:.6rem; padding-block:.6rem;
  border-block-end:1px solid var(--line); font-size:.92rem}
.facts li:last-child{border:0}
.facts .ic{color:var(--brand)}
.facts span{color:var(--muted)}
.facts b{margin-inline-start:auto; color:var(--ink)}
.mini-docs{list-style:none; padding:0; margin:0}
.mini-docs li{display:flex; align-items:center; gap:.7rem; padding-block:.6rem}
.mini-photo{width:42px; height:42px; border-radius:50%; overflow:hidden; flex:none; position:relative}
.mini-photo svg{width:100%; height:100%; object-fit:cover}
.mini-photo b{display:none}
.mini-docs b{display:block; color:var(--ink); font-size:.92rem}
.mini-docs small{color:var(--muted); font-size:.78rem}

/* ------------------------------------------------------------- prices --- */
.price-table{overflow:hidden}
.price-head,.price-row{display:grid; grid-template-columns:2.2fr .9fr 1.1fr .9fr;
  gap:1rem; align-items:center; padding:.95rem 1.3rem}
.price-head{background:var(--surface); font-weight:700; color:var(--ink); font-size:.85rem;
  border-block-end:1px solid var(--line)}
.price-row{border-block-end:1px solid var(--line); font-size:.93rem}
.price-row:last-child{border:0}
.price-row:hover{background:var(--brand-50)}
.pr-name{display:flex; align-items:center; gap:.7rem}
.pr-name i{display:grid; place-items:center; width:34px; height:34px; border-radius:11px;
  background:var(--brand-50); color:var(--brand); flex:none}
.pr-name a{color:var(--ink); font-weight:700}
.pr-name a:hover{color:var(--brand)}
.pr-dur{color:var(--muted); font-size:.85rem}
.pr-price small{display:block; color:var(--muted); font-size:.72rem}
.pr-price b{color:var(--ink)}
.pr-cta{text-align:end}
@media (max-width:760px){
  .price-head{display:none}
  .price-row{grid-template-columns:1fr auto; gap:.5rem 1rem; padding:1.1rem}
  .pr-name{grid-column:1/-1}
  .pr-cta{text-align:end}
}

/* ---------------------------------------------------------------- faq --- */
.faq details{background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm);
  margin-block-end:.75rem; overflow:hidden; transition:.2s var(--ease)}
.faq details[open]{border-color:var(--brand-100); box-shadow:var(--shadow)}
.faq summary{display:flex; align-items:center; gap:1rem; padding:1.05rem 1.3rem;
  cursor:pointer; font-weight:700; color:var(--ink); list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary span{flex:1}
.faq summary .ic{color:var(--brand); transition:transform .25s var(--ease); flex:none}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq-a{padding:0 1.3rem 1.2rem; font-size:.95rem}
.faq-a p{margin:0 0 .8rem}
.faq-a p:last-child{margin:0}

/* ----------------------------------------------------------- cta band --- */
.cta-band{background:linear-gradient(135deg,var(--brand-700),var(--brand)); color:#fff;
  position:relative; overflow:hidden}
.cta-band::after{content:''; position:absolute; inset-block-start:-50%; inset-inline-end:-10%;
  width:480px; height:480px; border-radius:50%; background:rgba(255,255,255,.08)}
.cta-in{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  gap:2rem; flex-wrap:wrap; padding-block:clamp(2.5rem,1.5rem + 3vw,4rem)}
.cta-in h2{color:#fff; margin-block-end:.4rem}
.cta-in p{margin:0; opacity:.9; max-width:56ch}
.cta-actions{display:flex; gap:.8rem; flex-wrap:wrap}

/* -------------------------------------------------------------- forms --- */
.field{display:block; margin-block-end:1rem}
.field>span{display:block; font-size:.86rem; font-weight:700; color:var(--ink); margin-block-end:.4rem}
.field input,.field textarea,.field select{
  width:100%; padding:.75rem .95rem; border:1.5px solid var(--line); border-radius:12px;
  background:var(--bg); color:var(--ink); transition:.18s var(--ease); font-size:.95rem;
}
.field textarea{resize:vertical; min-height:90px}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-50)}
.field input.bad,.field textarea.bad{border-color:var(--err)}
.field .help{display:block; color:var(--muted); font-size:.76rem; margin-block-start:.3rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem}
@media (max-width:640px){ .field-row{grid-template-columns:1fr} }
.chk{display:flex; align-items:center; gap:.55rem; font-size:.9rem; color:var(--ink); cursor:pointer}
.chk input{width:18px; height:18px; accent-color:var(--brand); flex:none}

.alert{display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem;
  border-radius:12px; font-size:.92rem; margin-block-end:1rem; font-weight:600}
.alert.wide{margin-block-end:1.4rem}
.alert.ok{background:#eefaf2; color:#166534; border:1px solid #bbf7d0}
.alert.err{background:#fef2f2; color:#991b1b; border:1px solid #fecaca}
.alert.warn{background:#fffbeb; color:#92400e; border:1px solid #fde68a}
:root[data-theme=dark] .alert.ok{background:#0d2c1c; color:#86efac; border-color:#14532d}
:root[data-theme=dark] .alert.err{background:#2c1215; color:#fca5a5; border-color:#7f1d1d}
:root[data-theme=dark] .alert.warn{background:#2b1f08; color:#fcd34d; border-color:#78350f}

.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:2rem; align-items:start}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr} }
.contact-info{display:grid; gap:1rem}
.info-card{display:flex; align-items:center; gap:.9rem; padding:1.1rem 1.2rem; flex-wrap:wrap}
.info-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--brand-100)}
.info-icon{display:grid; place-items:center; width:44px; height:44px; border-radius:14px;
  background:var(--brand-50); color:var(--brand); flex:none}
.info-card.wa .info-icon{background:#e8f8ee; color:#25d366}
.info-card b{display:block; color:var(--ink); font-size:.92rem}
.info-card>span:not(.info-icon){color:var(--muted); font-size:.88rem; flex:1 1 100%;
  margin-inline-start:calc(44px + .9rem)}
.info-card b{flex:1 1 auto}
.contact-form h3{margin-block-end:1.2rem}
.hours-list{list-style:none; padding:0; margin:0; font-size:.88rem}
.hours-list li{display:flex; justify-content:space-between; gap:1rem; padding-block:.42rem}
.hours-list.boxed li{border-block-end:1px solid var(--line)}
.hours-list.boxed li:last-child{border:0}
.hours-list li.today{color:var(--brand); font-weight:700}
.map-wrap{height:400px; border-block-start:1px solid var(--line)}
.map-wrap iframe{width:100%; height:100%; border:0; filter:saturate(.9)}
:root[data-theme=dark] .map-wrap iframe{filter:invert(.9) hue-rotate(180deg) saturate(.7)}

/* ------------------------------------------------------------ booking --- */
.steps{list-style:none; display:flex; gap:.5rem; padding:0; margin:0 0 2rem; flex-wrap:wrap}
.steps li{display:flex; align-items:center; gap:.55rem; padding:.6rem 1.1rem;
  border:1.5px solid var(--line); border-radius:999px; font-size:.88rem;
  font-weight:700; color:var(--muted); background:var(--card)}
.steps li b{display:grid; place-items:center; width:24px; height:24px; border-radius:50%;
  background:var(--surface); color:var(--muted); font-size:.8rem}
.steps li.on{border-color:var(--brand); color:var(--brand); background:var(--brand-50)}
.steps li.on b{background:var(--brand); color:#fff}
.steps li.done{color:var(--ok); border-color:#bbf7d0}
.steps li.done b{background:var(--ok); color:#fff}

.booking-grid{display:grid; grid-template-columns:1.5fr .8fr; gap:2rem; align-items:start}
@media (max-width:980px){ .booking-grid{grid-template-columns:1fr} }
.booking-main{background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:1.6rem}
.step{display:none}
.step.on{display:block; animation:slideIn .3s var(--ease)}
@keyframes slideIn{from{opacity:0; transform:translateY(8px)}}
.step h3{font-size:1.05rem; margin-block-end:1rem}
.step-nav{display:flex; gap:.8rem; justify-content:space-between; margin-block-start:1.8rem;
  padding-block-start:1.4rem; border-block-start:1px solid var(--line); flex-wrap:wrap}
.step-nav .btn:only-child{margin-inline-start:auto}

.pick-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.7rem}
.pick{display:flex; flex-direction:column; align-items:flex-start; gap:.25rem; text-align:start;
  padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:14px;
  background:var(--bg); cursor:pointer; transition:.18s var(--ease)}
.pick i{display:grid; place-items:center; width:32px; height:32px; border-radius:10px;
  background:var(--brand-50); color:var(--brand); margin-block-end:.3rem}
.pick span{font-weight:700; color:var(--ink); font-size:.92rem; line-height:1.35}
.pick small{color:var(--muted); font-size:.78rem}
.pick:hover{border-color:var(--brand); background:var(--brand-50)}
.pick.sel{border-color:var(--brand); background:var(--brand-50); box-shadow:0 0 0 3px var(--brand-50)}
.pick.sel i{background:var(--brand); color:#fff}

.day-strip{display:flex; gap:.6rem; overflow-x:auto; padding-block-end:.6rem; scroll-snap-type:x mandatory}
.day{flex:none; width:78px; scroll-snap-align:start; display:flex; flex-direction:column;
  align-items:center; gap:.1rem; padding:.7rem .3rem; border:1.5px solid var(--line);
  border-radius:14px; background:var(--bg); cursor:pointer; transition:.18s var(--ease)}
.day small{font-size:.7rem; color:var(--muted)}
.day b{font-size:1.3rem; color:var(--ink); line-height:1.1}
.day span{font-size:.72rem; color:var(--muted)}
.day:hover{border-color:var(--brand)}
.day.sel{border-color:var(--brand); background:var(--brand); }
.day.sel small,.day.sel b,.day.sel span{color:#fff}

.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.55rem; min-height:60px}
.slot{padding:.6rem .4rem; border:1.5px solid var(--line); border-radius:11px; background:var(--bg);
  cursor:pointer; font-size:.88rem; font-weight:700; color:var(--ink); transition:.15s var(--ease)}
.slot:hover{border-color:var(--brand); color:var(--brand)}
.slot.sel{background:var(--brand); border-color:var(--brand); color:#fff}
.slots .hint{grid-column:1/-1; justify-content:flex-start}

.booking-side .summary{position:sticky; top:100px}
.summary h3{display:flex; align-items:center; gap:.5rem; font-size:1rem; margin-block-end:1rem}
.summary ul{list-style:none; padding:0; margin:0}
.summary li{display:flex; justify-content:space-between; gap:1rem; padding-block:.6rem;
  border-block-end:1px solid var(--line); font-size:.88rem}
.summary li span{color:var(--muted)}
.summary li b{color:var(--ink); text-align:end}
.summary-foot{margin-block-start:1.2rem}
.summary-foot p{display:flex; align-items:center; gap:.4rem; font-size:.85rem; margin-block-end:.6rem}
.summary-foot a{color:var(--brand); font-weight:700}

.done-card{padding:2.5rem 2rem; text-align:center}
.done-mark{display:grid; place-items:center; width:72px; height:72px; border-radius:50%;
  background:var(--ok); color:#fff; margin:0 auto 1.2rem; animation:pop .45s var(--ease)}
.done-mark .ic{width:34px; height:34px}
@keyframes pop{from{transform:scale(.5); opacity:0}}
.ref-box{display:inline-flex; align-items:center; gap:.8rem; background:var(--brand-50);
  border:1px dashed var(--brand); border-radius:14px; padding:.7rem 1.3rem; margin-block:1.4rem}
.ref-box span{font-size:.82rem; color:var(--muted)}
.ref-box b{font-size:1.2rem; color:var(--brand-700); letter-spacing:.06em}
.done-facts{list-style:none; padding:0; margin:0 0 1.8rem; text-align:start}
.done-facts li{display:flex; align-items:center; gap:.7rem; padding-block:.7rem;
  border-block-end:1px solid var(--line); font-size:.92rem}
.done-facts .ic{color:var(--brand)}
.done-facts span{color:var(--muted); min-width:80px}
.done-facts b{margin-inline-start:auto; color:var(--ink); text-align:end}
.done-actions{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap}

.notfound{padding-block:6rem}
.nf-mark{display:grid; place-items:center; width:80px; height:80px; border-radius:26px;
  background:var(--brand-50); color:var(--brand); margin:0 auto 1.5rem}
.nf-mark .ic{width:40px; height:40px}
.notfound h1{font-size:4rem; margin-block-end:0; color:var(--brand)}

/* ------------------------------------------------------------- footer --- */
.site-footer{background:var(--ink); color:#a9c4ca; padding-block:3.5rem 1.5rem; margin-block-start:0}
:root[data-theme=dark] .site-footer{background:#061014}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.1fr 1.2fr; gap:2rem}
@media (max-width:1000px){ .footer-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .footer-grid{grid-template-columns:1fr} }
.footer-col h4{color:#fff; font-size:.95rem; margin-block-end:1rem}
.footer-col .muted{font-size:.88rem; color:#8fb0b6}
.plain{list-style:none; padding:0; margin:0; font-size:.89rem}
.plain li{margin-block-end:.55rem}
.plain a{display:inline-flex; align-items:center; gap:.45rem}
.plain a:hover{color:#fff}
.contact-list .ic{color:var(--brand)}
.contact-list .addr{display:flex; gap:.45rem; align-items:flex-start}
.contact-list .addr .ic{margin-block-start:.25rem; flex:none}
.footer-col .hours-list{color:#a9c4ca}
.footer-col .hours-list li.today{color:#5eead4}
.about .brand{margin-block-end:1rem}
.socials{display:flex; gap:.5rem; margin-block-start:1rem}
.socials a{display:grid; place-items:center; width:38px; height:38px; border-radius:12px;
  background:rgba(255,255,255,.07); color:#cfe3e6; transition:.2s var(--ease)}
.socials a:hover{background:var(--brand); color:#fff; transform:translateY(-3px)}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-block-start:2.5rem; padding-block-start:1.5rem;
  border-block-start:1px solid rgba(255,255,255,.1); font-size:.83rem}
.footer-bottom p{margin:0}
.admin-link{display:inline-flex; align-items:center; gap:.4rem; opacity:.6}
.admin-link:hover{opacity:1; color:#fff}

/* --------------------------------------------------------------- dock --- */
.dock{position:fixed; inset-block-end:0; inset-inline:0; z-index:55;
  display:none; background:var(--card); border-block-start:1px solid var(--line);
  box-shadow:0 -6px 24px -12px rgba(11,42,51,.3); padding-block-end:env(safe-area-inset-bottom)}
.dock-btn{flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem;
  padding:.6rem .3rem; font-size:.72rem; font-weight:700; color:var(--body)}
.dock-btn .ic{width:20px; height:20px}
.dock-btn.wa{color:#25d366}
.dock-btn.book{color:var(--brand)}
@media (max-width:768px){ .dock{display:flex} body{padding-block-end:64px} }

/* --------------------------------------------------------- animations --- */
/* Content is visible by default and only hidden once JS has confirmed it can
   reveal it again — a blocked or broken script must never blank the page. */
.js .reveal{opacity:0; transform:translateY(18px)}
.js .reveal.in{opacity:1; transform:none; transition:opacity .6s var(--ease), transform .6s var(--ease)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .js .reveal,.reveal{opacity:1; transform:none}
}

/* theme icon swap */
.i-moon{display:none}
:root[data-theme=dark] .i-sun{display:none}
:root[data-theme=dark] .i-moon{display:block}