/* Alif Alif Atoll Hospital — public website
   Fluid layout, 4 colour schemes x light/dark, LTR (English) + RTL (Dhivehi). */

@font-face { font-family: "Noto Sans Thaana"; src: url("fonts/thaana.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0780-07BF, U+060C, U+061B, U+061F, U+FDF2, U+FDFD; }

/* ---------- colour tokens: palette hue + mode ---------- */
:root { --h: 162; --s: 85%; color-scheme: light; }
[data-palette="ocean"]  { --h: 210; --s: 78%; }
[data-palette="coral"]  { --h: 6;   --s: 72%; }
[data-palette="orchid"] { --h: 270; --s: 52%; }

:root {
  --bg: hsl(var(--h) 30% 97%);
  --bg-2: hsl(var(--h) 34% 93%);
  --surface: #fff;
  --ink: hsl(var(--h) 30% 11%);
  --dim: hsl(var(--h) 10% 38%);
  --line: hsl(var(--h) 22% 87%);
  --brand: hsl(var(--h) var(--s) 32%);
  --brand-ink: hsl(var(--h) var(--s) 26%);
  --brand-soft: hsl(var(--h) 60% 93%);
  --on-brand: #fff;
  --hero-1: hsl(var(--h) var(--s) 27%);
  --hero-2: hsl(calc(var(--h) + 28) 70% 34%);
  --danger: #C2362B; --danger-soft: #FCE9E7;
  --warn: #B26B00; --warn-soft: #FFF2DB;
  --ok: #138A4C;
  --shadow: 0 1px 2px hsl(var(--h) 30% 20% / .06), 0 8px 24px hsl(var(--h) 30% 20% / .07);
}
html[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] { color-scheme: dark; } }

html[data-theme="dark"] {
  --bg: hsl(var(--h) 22% 7%); --bg-2: hsl(var(--h) 20% 10%); --surface: hsl(var(--h) 18% 12%);
  --ink: hsl(var(--h) 20% 92%); --dim: hsl(var(--h) 10% 66%); --line: hsl(var(--h) 14% 21%);
  --brand: hsl(var(--h) 62% 52%); --brand-ink: hsl(var(--h) 70% 70%); --brand-soft: hsl(var(--h) 35% 18%);
  --on-brand: hsl(var(--h) 40% 8%);
  --hero-1: hsl(var(--h) 55% 17%); --hero-2: hsl(calc(var(--h) + 28) 45% 20%);
  --danger: #FF8A7F; --danger-soft: #3A1714; --warn: #F2B65A; --warn-soft: #33250D; --ok: #5BD69A;
  --shadow: 0 1px 2px #0006, 0 8px 24px #0005;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg: hsl(var(--h) 22% 7%); --bg-2: hsl(var(--h) 20% 10%); --surface: hsl(var(--h) 18% 12%);
    --ink: hsl(var(--h) 20% 92%); --dim: hsl(var(--h) 10% 66%); --line: hsl(var(--h) 14% 21%);
    --brand: hsl(var(--h) 62% 52%); --brand-ink: hsl(var(--h) 70% 70%); --brand-soft: hsl(var(--h) 35% 18%);
    --on-brand: hsl(var(--h) 40% 8%);
    --hero-1: hsl(var(--h) 55% 17%); --hero-2: hsl(calc(var(--h) + 28) 45% 20%);
    --danger: #FF8A7F; --danger-soft: #3A1714; --warn: #F2B65A; --warn-soft: #33250D; --ok: #5BD69A;
    --shadow: 0 1px 2px #0006, 0 8px 24px #0005;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 clamp(15px, 0.95rem + 0.15vw, 17px)/1.6 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
  transition: background-color .25s, color .25s;
}
html[lang="dv"] body { font-family: "Noto Sans Thaana", "MV Faseyha", "Faruma", "MV Boli", "Segoe UI", system-ui, sans-serif; font-size: clamp(16px, 1rem + 0.2vw, 18.5px); line-height: 1.85; }
img { max-width: 100%; height: auto; }
a { color: var(--brand-ink); }
h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; }
html[lang="dv"] :is(h1, h2, h3) { line-height: 1.55; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.1rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; }
html[lang="dv"] :is(h1, h2) { letter-spacing: 0; }
p { margin: 0 0 1em; }
.dim { color: var(--dim); }
.ico { flex: none; vertical-align: -0.2em; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 32px); }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--brand); color: var(--on-brand); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid hsl(var(--h) 90% 55%); outline-offset: 2px; border-radius: 6px; }
button { font: inherit; color: inherit; cursor: pointer; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.7em 1.15em; border-radius: 999px; border: 0; background: var(--brand); color: var(--on-brand); font-weight: 700; text-decoration: none; white-space: nowrap; transition: transform .15s, filter .15s, background .2s; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn-light { background: #fff; color: hsl(var(--h) var(--s) 24%); }
.btn-danger { background: var(--danger); color: #fff; }
html[data-theme="dark"] .btn-danger { color: #2a0b08; }

/* ---------- top bars ---------- */
.staffbar { background: hsl(var(--h) 30% 12%); color: #E9F3EF; font-size: .88rem; }
.staffbar .wrap { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-block: 7px; }
.staffbar a { color: #fff; background: var(--brand); padding: 3px 12px; border-radius: 99px; font-weight: 700; text-decoration: none; }

.utility { background: var(--bg-2); font-size: .85rem; border-bottom: 1px solid var(--line); }
.utility .wrap { display: flex; align-items: center; gap: clamp(8px, 2vw, 18px); min-height: 40px; }
.utility a, .utility button { color: var(--ink); text-decoration: none; background: none; border: 0; padding: 4px 0; display: inline-flex; align-items: center; gap: 6px; }
.u-em { color: var(--danger) !important; font-weight: 700; }
.u-em b { font-size: 1.05em; }
.u-247 { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); }
.u-sp { flex: 1; }
.u-lang { font-weight: 700; padding-inline: 10px !important; border-radius: 99px; box-shadow: inset 0 0 0 1px var(--line); }
html[lang="en"] .u-lang { font-family: "Noto Sans Thaana", "MV Faseyha", sans-serif; }
.u-theme:hover, .u-lang:hover { color: var(--brand-ink) !important; }

.masthead { background: var(--surface); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.masthead .wrap { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); min-height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { width: clamp(38px, 3.2vw, 48px); height: auto; }
.brand b { display: block; font-size: clamp(.98rem, .9rem + .4vw, 1.15rem); color: var(--brand-ink); line-height: 1.2; }
.brand small { display: block; color: var(--dim); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[lang="dv"] .brand b { line-height: 1.5; }
.mainnav { display: flex; gap: 2px; margin-inline-start: auto; }
.mainnav a { padding: 8px 12px; border-radius: 99px; text-decoration: none; color: var(--dim); font-weight: 650; font-size: .93rem; white-space: nowrap; transition: color .15s, background .15s; }
.mainnav a:hover { color: var(--brand-ink); background: var(--brand-soft); }
.mainnav a[aria-current] { color: var(--brand-ink); background: var(--brand-soft); }
.btn-fb { padding: .55em 1em; font-size: .92rem; }
.burger { display: none; background: none; border: 0; padding: 8px; margin-inline-start: auto; border-radius: 10px; color: var(--ink); }
.burger:hover { background: var(--brand-soft); }

@media (max-width: 1080px) {
  .mainnav { display: none; }
  .burger { display: inline-flex; }
  .btn-fb { margin-inline-start: auto; }
  .btn-fb + .burger { margin-inline-start: 0; }
}
@media (max-width: 560px) {
  .u-247, .u-theme span, .btn-fb span { display: none; }
  .btn-fb { padding: .6em; }
  .brand small { display: none; }
}

/* drawer + appearance sheet */
.drawer, .sheet { position: fixed; inset: 0; z-index: 60; background: hsl(var(--h) 30% 5% / .45); display: flex; animation: fade .2s; }
.drawer[hidden], .sheet[hidden] { display: none; }
.drawer-panel { margin-inline-start: auto; width: min(340px, 86vw); height: 100%; background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; animation: slide .25s ease-out; box-shadow: var(--shadow); }
html[dir="rtl"] .drawer-panel { animation-name: slide-rtl; }
.drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 12px; }
.drawer-top button { background: none; border: 0; padding: 6px; border-radius: 8px; }
.drawer-top button:hover { background: var(--brand-soft); }
.drawer-panel > a { padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); font-weight: 650; display: flex; gap: 10px; align-items: center; }
.drawer-panel > a:hover, .drawer-panel > a[aria-current] { background: var(--brand-soft); color: var(--brand-ink); }
.d-fb { margin-top: 8px; background: var(--brand); color: var(--on-brand) !important; }
.sheet { align-items: flex-start; justify-content: flex-end; padding: 56px clamp(12px, 3vw, 32px) 12px; }
.sheet-panel { width: min(360px, 100%); background: var(--surface); border-radius: 18px; padding: 14px 16px 18px; box-shadow: var(--shadow); border: 1px solid var(--line); animation: pop .2s ease-out; }
.sheet-l { margin: 6px 0 8px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }
html[lang="dv"] .sheet-l { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.swatches button { background: none; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 4px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .8rem; font-weight: 650; }
.swatches i { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(hsl(var(--sw) 80% 32%) 0 50%, hsl(calc(var(--sw) + 28) 70% 55%) 0); box-shadow: inset 0 0 0 2px #fff4; }
.swatches button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bg-2); padding: 4px; border-radius: 12px; gap: 4px; }
.seg button { border: 0; background: none; padding: 8px; border-radius: 9px; font-weight: 650; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--brand-ink); box-shadow: var(--shadow); }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(100%); } }
@keyframes slide-rtl { from { transform: translateX(-100%); } }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

/* ---------- page ---------- */
main { flex: 1; }
.section { padding-block: clamp(36px, 6vw, 72px); }
.section-tight { padding-block: clamp(24px, 4vw, 44px); }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: clamp(16px, 2.5vw, 26px); }
.sec-head p { margin: 6px 0 0; color: var(--dim); max-width: 60ch; }
.kick { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); }
html[lang="dv"] .kick { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.link-more { font-weight: 700; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
html[dir="rtl"] .link-more .ico, html[dir="rtl"] .flip { transform: scaleX(-1); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }

/* hero */
.hero { position: relative; color: #fff; background: linear-gradient(135deg, var(--hero-1), var(--hero-2)); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(60% 80% at 85% 10%, hsl(calc(var(--h) + 40) 90% 70% / .28), transparent 60%),
  radial-gradient(50% 60% at 10% 100%, hsl(var(--h) 90% 60% / .25), transparent 60%); }
.hero .waves { position: absolute; inset-inline: 0; bottom: -1px; width: 100%; height: clamp(40px, 7vw, 90px); z-index: -1; color: var(--bg); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center; padding-block: clamp(36px, 7vw, 92px) clamp(64px, 9vw, 120px); }
.hero h1 { color: #fff; margin: 12px 0 14px; }
.hero .lead { font-size: clamp(1.02rem, .95rem + .4vw, 1.25rem); opacity: .92; max-width: 46ch; }
.hero .kick { color: hsl(var(--h) 80% 85%); }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.hero .btn-ghost { color: #fff; }
.today { background: hsl(0 0% 100% / .1); border: 1px solid hsl(0 0% 100% / .22); border-radius: 22px; padding: clamp(16px, 2.5vw, 24px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.today h2 { font-size: 1.05rem; color: #fff; display: flex; align-items: center; gap: 8px; }
.today-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.today-stats div { background: hsl(0 0% 100% / .1); border-radius: 14px; padding: 12px 14px; }
.today-stats b { display: block; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.1; font-variant-numeric: tabular-nums; }
.today-stats span { font-size: .85rem; opacity: .85; }
.today-rooms { display: flex; flex-direction: column; gap: 6px; }
.today-rooms a { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 8px 12px; border-radius: 12px; background: hsl(0 0% 100% / .07); font-size: .92rem; }
.today-rooms a:hover { background: hsl(0 0% 100% / .14); }
.today-rooms b { font-variant-numeric: tabular-nums; font-size: 1.05rem; letter-spacing: .02em; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 #4ade80aa; animation: pulse 1.8s infinite; flex: none; }
.live-dot.off { background: #f5b14a; animation: none; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px #4ade8000; } 100% { box-shadow: 0 0 0 0 #4ade8000; } }

/* quick links */
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); margin-top: calc(-1 * clamp(40px, 6vw, 70px)); position: relative; z-index: 2; }
.quick a { display: flex; gap: 14px; align-items: center; padding: clamp(14px, 2vw, 20px); text-decoration: none; color: var(--ink); transition: transform .18s, border-color .18s; }
.quick a:hover { transform: translateY(-3px); border-color: var(--brand); }
.quick .qi { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); flex: none; }
.quick b { display: block; font-size: 1rem; }
.quick small { color: var(--dim); font-size: .84rem; display: block; line-height: 1.4; }
.quick a.q-em .qi { background: var(--danger-soft); color: var(--danger); }

/* live queue */
.q-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.q-status { display: inline-flex; gap: 8px; align-items: center; font-size: .88rem; color: var(--dim); background: var(--surface); border: 1px solid var(--line); padding: 6px 12px; border-radius: 99px; }
.q-banner { padding: 12px 16px; border-radius: 14px; background: var(--warn-soft); color: var(--warn); font-weight: 600; margin-bottom: 16px; }
.q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.room { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: border-color .3s; }
.room::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; background: var(--brand); }
.room.st-break::before { background: var(--warn); }
.room.st-off_duty::before { background: var(--line); }
.room.st-off_duty { opacity: .72; }
.room-top { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.room-top b { display: block; font-size: 1.02rem; }
.room-top small { color: var(--dim); font-size: .84rem; display: block; }
.pill { font-size: .74rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; background: var(--brand-soft); color: var(--brand-ink); white-space: nowrap; }
.st-break .pill { background: var(--warn-soft); color: var(--warn); }
.st-off_duty .pill { background: var(--bg-2); color: var(--dim); }
.now { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: var(--bg-2); border-radius: 14px; padding: 10px 14px; }
.now span { white-space: nowrap; font-size: .8rem; color: var(--dim); font-weight: 700; }
.now b { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.7rem); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--brand-ink); font-family: "Segoe UI", system-ui, sans-serif; }
.now b.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { transform: scale(1.18); color: var(--danger); } 100% { transform: none; } }
.room-next { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: .84rem; color: var(--dim); }
.room-next i { font-style: normal; font-weight: 700; padding: 2px 9px; border-radius: 8px; background: var(--bg-2); color: var(--ink); font-variant-numeric: tabular-nums; font-family: "Segoe UI", system-ui, sans-serif; }
.room-next i.mine, .now b.mine { outline: 2.5px solid var(--danger); outline-offset: 2px; border-radius: 8px; }
.room-foot { display: flex; justify-content: space-between; align-items: center; font-size: .84rem; color: var(--dim); border-top: 1px dashed var(--line); padding-top: 10px; }
.room-foot b { color: var(--ink); }

/* token tracker */
.tracker { padding: clamp(16px, 2.4vw, 22px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: center; margin-bottom: 18px; background: linear-gradient(135deg, var(--brand-soft), var(--surface)); }
.tracker h3 { display: flex; gap: 8px; align-items: center; font-size: 1.1rem; margin-bottom: 4px; }
.tracker p { margin: 0; color: var(--dim); font-size: .9rem; }
.tk-form { display: flex; gap: 8px; }
.tk-form input { flex: 1; min-width: 0; font: inherit; font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font-family: "Segoe UI", system-ui, sans-serif; }
.tk-form input:focus { border-color: var(--brand); outline: none; }
.tk-out { grid-column: 1 / -1; display: none; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.tk-out.show { display: flex; flex-wrap: wrap; }
.tk-out .tk-num { font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--brand-ink); font-family: "Segoe UI", system-ui, sans-serif; }
.tk-out .tk-msg b { display: block; font-size: 1.05rem; }
.tk-out .tk-msg small { color: var(--dim); }
.tk-out.alert { background: var(--danger-soft); border-color: var(--danger); }
.tk-out.alert .tk-num, .tk-out.alert b { color: var(--danger); }
.tk-out label { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; font-size: .88rem; }

/* services */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.svc { padding: 20px; display: flex; flex-direction: column; gap: 10px; transition: transform .18s, border-color .18s; }
.svc:hover { transform: translateY(-3px); border-color: var(--brand); }
.svc .qi { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); }
.svc p { margin: 0; color: var(--dim); font-size: .92rem; }

/* news */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.tile { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .18s, border-color .18s; }
.tile:hover { transform: translateY(-3px); border-color: var(--brand); }
.tile .img { aspect-ratio: 16/9; background: var(--brand-soft) center/cover no-repeat; display: grid; place-items: center; color: var(--brand-ink); }
.tile .tx { padding: 16px 18px 18px; }
.tile .tx b { display: block; font-size: 1.05rem; line-height: 1.35; margin: 4px 0 6px; }
.tile .tx p { margin: 0; color: var(--dim); font-size: .9rem; }

/* news slider */
.slider { position: relative; }
.slides { display: flex; box-shadow: var(--shadow); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 0; scrollbar-width: none; border-radius: 22px; padding-bottom: 2px; }
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; position: relative; overflow: hidden; box-shadow: none; border: 0; aspect-ratio: 2 / 1; min-height: 400px; color: #fff; isolation: isolate; }
.slide-img { position: absolute; inset: 0; z-index: -2; display: grid; place-items: start center; padding-top: 12%; background: linear-gradient(135deg, var(--hero-1), var(--hero-2)) center/cover no-repeat; color: hsl(0 0% 100% / .35); transition: transform 6s ease-out; }
.slide-img[style*="url"] { background-size: cover; background-position: center; }
.slide:hover .slide-img { transform: scale(1.03); }
.slide::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, hsl(var(--h) 40% 5% / .95) 0%, hsl(var(--h) 40% 5% / .85) 30%, hsl(var(--h) 40% 5% / .45) 55%, transparent 78%); }
.slide-tx { position: absolute; inset-inline: 0; bottom: 0; margin-inline: auto; max-width: 820px; padding: clamp(18px, 3vw, 40px) clamp(18px, 4vw, 48px) clamp(26px, 3.6vw, 46px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.slide-tx .kick { color: #fff; background: hsl(0 0% 100% / .16); padding: 4px 12px; border-radius: 99px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.slide-tx h3 { font-size: clamp(1.35rem, 1rem + 1.7vw, 2.4rem); line-height: 1.2; letter-spacing: -0.01em; text-shadow: 0 2px 16px #0007; }
html[lang="dv"] .slide-tx h3 { line-height: 1.6; letter-spacing: 0; }
.slide-tx h3 a { color: #fff; text-decoration: none; }
.slide-tx h3 a::after { content: ""; position: absolute; inset: 0; z-index: -1; } /* whole slide clickable */
.slide-tx p { margin: 0; color: hsl(0 0% 100% / .88); font-size: clamp(.95rem, .9rem + .25vw, 1.08rem); max-width: 62ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 10px #0006; }
.slide-tx .btn { margin-top: 6px; position: relative; background: #fff; color: hsl(var(--h) var(--s) 24%); }
.slide-tx .btn:hover { background: var(--brand); color: #fff; }
html[dir="rtl"] .slide-tx .btn .ico, html[dir="rtl"] .sl-btn[data-dir="1"] .ico { transform: scaleX(-1); }
.sl-btn[data-dir="-1"] .ico { transform: scaleX(-1); }
html[dir="rtl"] .sl-btn[data-dir="-1"] .ico { transform: none; }
.slider-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.sl-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--ink); box-shadow: var(--shadow); transition: background .15s, color .15s; }
.sl-btn:hover { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.dots { display: flex; gap: 8px; }
.dots button { width: 10px; height: 10px; padding: 0; border-radius: 99px; border: 0; background: var(--line); transition: width .25s, background .25s; }
.dots button[aria-current="true"] { width: 28px; background: var(--brand); }
.slide-progress { position: absolute; inset-inline: 0; top: 0; height: 3px; background: var(--brand); transform-origin: 0 50%; transform: scaleX(0); z-index: 2; }

/* split band: feedback + hotlines */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(12px, 2vw, 22px); }
.fb-card { padding: clamp(20px, 3vw, 32px); background: linear-gradient(135deg, var(--brand), hsl(calc(var(--h) + 28) 70% 38%)); color: #fff; border: 0; display: flex; flex-direction: column; gap: 6px; }
html[data-theme="dark"] .fb-card { color: var(--on-brand); }
.fb-card h2 { color: inherit; }
.fb-card .faces { font-size: 1.8rem; letter-spacing: 6px; margin: 4px 0 10px; }
.hot-card { padding: clamp(20px, 3vw, 32px); }
.hot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.hot-grid a { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); text-decoration: none; color: var(--ink); transition: background .15s; }
.hot-grid a:hover { background: var(--danger-soft); }
.hot-grid b { font-size: 1.5rem; color: var(--danger); font-variant-numeric: tabular-nums; line-height: 1.2; font-family: "Segoe UI", system-ui, sans-serif; }
.hot-grid span { font-size: .86rem; color: var(--dim); }

/* footer */
.foot { background: var(--surface); border-top: 1px solid var(--line); margin-top: clamp(30px, 5vw, 60px); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; padding-block: 36px 20px; }
.foot h3 { font-size: .95rem; margin-bottom: 10px; }
.brand-foot { margin-bottom: 10px; }
.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plain a { color: var(--ink); text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.plain a:hover { color: var(--brand-ink); }
.plain.hot b { color: var(--danger); min-width: 3ch; display: inline-block; }
.foot-base { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-block: 14px 22px; border-top: 1px solid var(--line); color: var(--dim); font-size: .84rem; }

@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band, .tracker { grid-template-columns: minmax(0, 1fr); }
  .slide { aspect-ratio: 4 / 3; min-height: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .quick { grid-template-columns: 1fr; }
  .quick a { padding: 12px 14px; }
  .foot-grid { grid-template-columns: 1fr; }
  .hero-cta .btn { flex: 1; justify-content: center; }
  .slide { aspect-ratio: auto; min-height: 460px; }
  .slide-tx p { -webkit-line-clamp: 3; }
  .tk-form { flex-wrap: wrap; }
  .tk-form input { flex-basis: 100%; }
  .tk-form .btn { flex: 1; justify-content: center; }
  .tk-out label { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .utility, .masthead, .foot, .hero-cta, .tracker { display: none !important; } body { background: #fff; color: #000; } }

/* ================= inner pages ================= */
.page-head { position: relative; color: #fff; background: linear-gradient(135deg, var(--hero-1), var(--hero-2)); isolation: isolate; overflow: hidden; }
.page-head::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 90% at 90% 0%, hsl(calc(var(--h) + 40) 90% 70% / .25), transparent 60%); }
.page-head .wrap { padding-block: clamp(30px, 5vw, 60px) clamp(46px, 6vw, 76px); }
.page-head .kick { color: hsl(var(--h) 80% 85%); }
.page-head h1 { color: #fff; margin: 8px 0 6px; font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem); }
.page-head p { margin: 0; opacity: .9; max-width: 60ch; font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.page-head .waves { position: absolute; inset-inline: 0; bottom: -1px; width: 100%; height: clamp(24px, 4vw, 48px); z-index: -1; color: var(--bg); }

/* tabs + search */
.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 20px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a { padding: 8px 16px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--dim); font-weight: 700; font-size: .92rem; }
.tabs a:hover { color: var(--brand-ink); border-color: var(--brand); }
.tabs a[aria-current] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.tabs a small { opacity: .75; font-weight: 600; margin-inline-start: 4px; }
.search { position: relative; flex: 0 1 300px; }
.search input { width: 100%; padding: 10px 16px; padding-inline-start: 40px; border-radius: 99px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.search input:focus { outline: none; border-color: var(--brand); }
.search .ico { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--dim); pointer-events: none; }

/* rows */
.rows { overflow: hidden; }
.row { display: flex; gap: 14px; align-items: center; padding: 14px 18px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); transition: background .15s; }
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--brand-soft); }
.row .ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-size: .7rem; font-weight: 800; flex: none; }
.row-tx { flex: 1; min-width: 0; }
.row-tx b { display: block; }
.row-tx small { color: var(--dim); font-size: .84rem; display: block; text-align: start; }
html[dir="rtl"] .row-tx small { direction: rtl; unicode-bidi: plaintext; }
.row > .ico { color: var(--dim); }
html[dir="rtl"] .row > .ico { transform: scaleX(-1); }
.empty { padding: 40px 20px; text-align: center; color: var(--dim); }

/* article */
.art { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(20px, 4vw, 48px); align-items: start; }
.art-main { padding: clamp(20px, 3.5vw, 40px); }
.art-meta { display: flex; gap: 10px 16px; flex-wrap: wrap; color: var(--dim); font-size: .9rem; margin-bottom: 18px; }
.art-meta span { display: inline-flex; gap: 6px; align-items: center; }
.art .lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--ink); opacity: .85; }
.art-cover { margin: 0 0 22px; border-radius: 16px; overflow: hidden; background: var(--bg-2); }
.art-cover img { width: 100%; display: block; max-height: 520px; object-fit: cover; }
.body { font-size: 1.04rem; overflow-wrap: anywhere; }
.body img { max-width: 100%; height: auto; border-radius: 12px; }
.body table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.body td, .body th { border: 1px solid var(--line); padding: 8px 10px; }
.body a { color: var(--brand-ink); }
.body h2, .body h3 { margin: 1.4em 0 .5em; }
.att { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 22px; background: var(--bg-2); border-radius: 14px; flex-wrap: wrap; }
.att .ic { width: 50px; height: 50px; border-radius: 12px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 800; font-size: .72rem; flex: none; }
.att div { flex: 1; min-width: 160px; }
.art-tools { display: flex; gap: 8px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); }
.side h2 { font-size: 1.1rem; margin-bottom: 12px; }
.side .row { padding: 12px 14px; }
.side { position: sticky; top: 90px; }

/* about */
.mv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.mv .card { padding: clamp(20px, 3vw, 30px); }
.mv .qi, .step .qi { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); margin-bottom: 12px; }
.mv p { margin: 8px 0 0; color: var(--dim); font-size: 1.02rem; }
.prose { font-size: clamp(1.02rem, 1rem + .25vw, 1.18rem); max-width: 72ch; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips span { padding: 10px 18px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-weight: 650; }
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul { margin-inline-start: 22px; padding-inline-start: 18px; border-inline-start: 2px solid var(--line); }
.tree li { position: relative; margin: 12px 0; }
.tree ul > li::before { content: ""; position: absolute; inset-inline-start: -18px; top: 28px; width: 16px; border-top: 2px solid var(--line); }
.node { display: inline-block; min-width: min(260px, 100%); max-width: 100%; padding: 12px 16px; border-top: 4px solid var(--brand); }
.node b { display: block; margin-bottom: 2px; }
.node .head { font-size: .92rem; } .node small { color: var(--dim); }
.node summary { cursor: pointer; color: var(--brand-ink); font-weight: 700; font-size: .84rem; margin-top: 6px; }
.node ul.mem { list-style: none; padding: 6px 0 0; margin: 0; font-size: .88rem; border: 0; }
.node ul.mem li { margin: 3px 0; } .node ul.mem li::before { display: none; }

/* services */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); counter-reset: st; }
.step { padding: 20px; position: relative; }
.step::after { counter-increment: st; content: counter(st); position: absolute; top: 14px; inset-inline-end: 18px; font-size: 2.4rem; font-weight: 800; color: var(--brand-soft); line-height: 1; font-family: "Segoe UI", system-ui, sans-serif; }
.step h3 { margin-bottom: 6px; } .step p { margin: 0; color: var(--dim); font-size: .92rem; }
.hours { padding: 6px 0; }
.hours .row { cursor: default; } .hours .row:hover { background: none; }

/* health */
.redflags { padding: clamp(20px, 3vw, 32px); border: 2px solid var(--danger); background: linear-gradient(135deg, var(--danger-soft), var(--surface)); }
.redflags h2 { color: var(--danger); display: flex; gap: 10px; align-items: center; }
.redflags ul { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.redflags li { display: flex; gap: 10px; align-items: center; background: var(--surface); padding: 12px 14px; border-radius: 12px; font-weight: 600; }
.redflags li::before { content: "!"; width: 26px; height: 26px; border-radius: 50%; background: var(--danger); color: #fff; display: grid; place-items: center; font-weight: 900; flex: none; font-family: "Segoe UI", system-ui, sans-serif; }
.links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.links-grid a { display: flex; gap: 12px; align-items: center; padding: 14px 16px; text-decoration: none; color: var(--ink); font-weight: 650; }
.links-grid a:hover { border-color: var(--brand); }
.links-grid img, .links-grid i { width: 28px; height: 28px; border-radius: 6px; flex: none; }
.links-grid i { background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font-style: normal; font-weight: 800; }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(14px, 2.4vw, 26px); align-items: stretch; }
.c-list { padding: 8px; display: flex; flex-direction: column; }
.c-item { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; text-decoration: none; color: var(--ink); }
a.c-item:hover { background: var(--brand-soft); }
.c-item .qi { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); flex: none; }
.c-item.em .qi { background: var(--danger-soft); color: var(--danger); }
.c-item small { display: block; color: var(--dim); font-size: .82rem; }
.c-item b { font-size: 1.05rem; }
.map { overflow: hidden; min-height: 380px; display: flex; flex-direction: column; }
.map iframe { flex: 1; width: 100%; min-height: 340px; border: 0; display: block; }
html[data-theme="dark"] .map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.8); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .map iframe { filter: invert(.9) hue-rotate(180deg) saturate(.8); } }
.map-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }

/* feedback form (site version) */
.fb-wrap { max-width: 640px; margin-inline: auto; }
.fb-wrap .card { padding: 18px; margin-bottom: 14px; }
.fb-wrap .q { font-weight: 700; margin: 0 0 10px; }
.faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.faces label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; font-size: .74rem; color: var(--dim); text-align: center; transition: transform .1s; line-height: 1.3; }
.faces label span { font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem); line-height: 1; filter: grayscale(.6); }
.faces input, .seg2 input, .kinds input { position: absolute; opacity: 0; pointer-events: none; }
.faces label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--ink); font-weight: 700; transform: scale(1.04); }
.faces label:has(input:checked) span { filter: none; }
.faces label:has(input:focus-visible), .seg2 label:has(input:focus-visible), .kinds label:has(input:focus-visible) { outline: 3px solid hsl(var(--h) 90% 55%); }
.mini { display: grid; gap: 12px; }
.mini .mrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.stars { display: flex; gap: 2px; direction: rtl; }
html[dir="rtl"] .stars { direction: ltr; }
.stars input { position: absolute; opacity: 0; pointer-events: none; }
.stars label { font-size: 1.6rem; color: var(--line); cursor: pointer; line-height: 1; padding: 0 2px; }
.stars label:hover, .stars label:hover ~ label, .stars input:checked ~ label { color: #F2B705; }
.seg2, .kinds { display: flex; gap: 8px; flex-wrap: wrap; }
.seg2 label, .kinds label { flex: 1; min-width: 90px; text-align: center; padding: 10px 8px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 600; font-size: .92rem; }
.seg2 label:has(input:checked), .kinds label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.kinds label.c:has(input:checked) { border-color: var(--danger); background: var(--danger-soft); }
.field { width: 100%; padding: 12px; border: 1.5px solid var(--line); border-radius: 12px; font: inherit; background: var(--surface); color: var(--ink); }
.field:focus { outline: none; border-color: var(--brand); }
textarea.field { min-height: 110px; resize: vertical; }
input[type=tel].field { direction: ltr; text-align: start; }
.follow { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.follow.on { display: grid; gap: 10px; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; }
.chk input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; margin-top: 4px; }
.btn-block { width: 100%; justify-content: center; font-size: 1.08rem; padding: 15px; border-radius: 14px; }
.err { background: var(--danger-soft); color: var(--danger); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-weight: 600; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; border: 0; padding: 0; }
.thanks { text-align: center; padding: 44px 16px !important; }
.thanks .big { font-size: 4rem; line-height: 1.2; }
.note { color: var(--dim); font-size: .84rem; text-align: center; margin-top: 14px; }

@media (max-width: 900px) {
  .art, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .search { flex-basis: 100%; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 4px; scrollbar-width: none; }
  .tabs a { white-space: nowrap; }
  .faces label { font-size: .66rem; }
}