/* Hallmark · macrostructure: Long Document (institutional) · tone: clinical-formal · anchor hue: teal 190
 * theme: custom (vibe: "clinical white, deep teal, form-numbered, Saudi institutional"
 * paper oklch(99% 0.003 190) · accent oklch(45% 0.085 190) teal · Almarai single-family by intent)
 * nav: N12 banner+retract strip · footer: Ft-institutional columns (genuine hub)
 * Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V5
 * مجموعة وتين الطبية — تصور مفاهيمي، استوديو رسملة */

:root {
  --paper:   oklch(99% 0.003 190);
  --surface: oklch(96.5% 0.011 185);
  --ink:     oklch(24% 0.035 220);
  --ink-2:   oklch(45% 0.02 220);
  --teal:    oklch(45% 0.085 190);
  --teal-deep: oklch(36% 0.075 195);
  --teal-tint: oklch(93% 0.025 185);
  --hairline: oklch(89% 0.008 190);
  --alert:   oklch(52% 0.19 25);
  --ok:      oklch(52% 0.12 155);

  --font: "Almarai", "Segoe UI", sans-serif;

  --space-2xs: 4px;  --space-xs: 8px;  --space-sm: 12px; --space-md: 20px;
  --space-lg: 32px;  --space-xl: 52px; --space-2xl: 84px;

  --text-sm: .84rem; --text-base: .97rem; --text-lg: 1.15rem;
  --text-2xl: clamp(1.45rem, 2.6vw, 2rem);
  --text-display: clamp(2.2rem, 5vw, 3.6rem);

  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --dur-fast: 140ms; --dur-med: 240ms;
  --rule: 1px solid var(--hairline);
  --radius: 3px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }

body {
  font-family: var(--font);
  font-weight: 400;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.85;
  font-size: var(--text-base);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
h1, h2, h3 { font-style: normal; line-height: 1.45; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: var(--text-display); font-weight: 800; }
h2 { font-size: var(--text-2xl); font-weight: 800; }
h3 { font-size: var(--text-lg); font-weight: 700; }

::selection { background: var(--teal); color: var(--paper); }

.wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* ── الطابع: رقم النموذج ── */
.formno {
  font-size: var(--text-sm); font-weight: 700; color: var(--teal);
  letter-spacing: .02em; margin-bottom: var(--space-xs);
}
.formno::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 26px; height: 1px; background: var(--teal); margin-inline-end: var(--space-xs);
}

.sechead { max-width: 60ch; margin-bottom: var(--space-xl); }
.sechead__sub { color: var(--ink-2); margin-top: var(--space-sm); }

section { padding-block: var(--space-2xl); border-top: var(--rule); }

/* ── الأزرار: ٨ حالات ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: var(--text-base);
  padding: 11px 26px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid transparent; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn--solid { background: var(--teal); color: var(--paper); }
.btn--solid:hover { background: var(--teal-deep); }
.btn--solid:active { transform: translateY(1px); }
.btn--solid:disabled { background: var(--hairline); color: var(--ink-2); cursor: not-allowed; }
.btn--solid[data-state="loading"] { opacity: .7; pointer-events: none; }
.btn--solid[data-state="success"] { background: var(--ok); }
.btn--solid[data-state="error"] { background: var(--alert); }
.btn--block { width: 100%; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.tlink {
  font-weight: 700; color: var(--teal); font-size: var(--text-sm);
  border-bottom: 1px solid var(--teal-tint);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.tlink:hover { border-color: var(--teal); }

/* ═══ 01 الشريط ═══ */
.strip { background: var(--ink); color: var(--paper); font-size: var(--text-sm); }
.strip__in { display: flex; gap: var(--space-lg); align-items: center; padding-block: 7px; flex-wrap: wrap; }
.strip__item a { font-weight: 700; }
.strip__item--er { color: oklch(85% 0.07 25); font-weight: 700; }
.strip__link { margin-inline-start: auto; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) { .strip__item--hide-sm { display: none; } }

/* ═══ 02 الهيدر ═══ */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper); border-bottom: var(--rule);
}
.hd__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { width: 40px; color: var(--teal); flex-shrink: 0; }
.brand__t { font-weight: 400; font-size: 1.06rem; white-space: nowrap; }
.brand__t b { font-weight: 800; color: var(--teal); }
.hd__nav { display: flex; gap: clamp(12px, 2vw, 26px); font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); }
.hd__nav a { transition: color var(--dur-fast) var(--ease-out); white-space: nowrap; }
.hd__nav a:hover { color: var(--teal); }
.hd__side { display: flex; align-items: center; gap: var(--space-sm); }
.burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; }
.burger span { width: 22px; height: 2px; background: var(--ink); transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast); }

@media (max-width: 1020px) {
  .hd__nav {
    position: fixed; top: 72px; inset-inline: 0; z-index: 49;
    background: var(--paper); border-bottom: var(--rule);
    flex-direction: column; gap: 0; padding: var(--space-xs) var(--space-md) var(--space-md);
    transform: translateY(-130%); transition: transform var(--dur-med) var(--ease-out);
  }
  .hd__nav.open { transform: none; }
  .hd__nav a { padding: 12px 0; border-bottom: var(--rule); font-size: var(--text-base); }
  .burger { display: flex; }
  .burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2) { opacity: 0; }
  .burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ═══ 03 الهيرو ═══ */
.hero { border-top: 0; padding-block: var(--space-xl) var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.hero__sub { color: var(--ink-2); max-width: 58ch; margin-top: var(--space-md); }
.hero__facts { margin-top: var(--space-md); display: grid; gap: var(--space-xs); }
.hero__facts li { position: relative; padding-inline-start: 22px; font-weight: 700; font-size: var(--text-sm); }
.hero__facts li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .62em;
  width: 12px; height: 1px; background: var(--teal);
}
.hero__photo { margin-top: var(--space-lg); border: var(--rule); }
.hero__photo img { aspect-ratio: 16/8; object-fit: cover; width: 100%; }

/* بطاقة الحجز */
.bookcard {
  background: var(--surface); border: var(--rule); border-top: 3px solid var(--teal);
  padding: var(--space-lg); position: sticky; top: 96px;
}
.bookcard__h { font-size: 1.3rem; font-weight: 800; }
.bookcard__note { font-size: var(--text-sm); color: var(--ink-2); margin: var(--space-2xs) 0 var(--space-md); }
.bookcard__form { display: grid; gap: var(--space-sm); }
.field { display: grid; gap: 5px; }
.field2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.field label { font-size: var(--text-sm); font-weight: 700; }
.field select, .field input {
  font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: var(--paper); border: var(--rule); border-radius: var(--radius);
  padding: 10px 12px; width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.field select:hover, .field input:hover { border-color: var(--ink-2); }
.field select:focus-visible, .field input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.field input::placeholder { color: var(--ink-2); opacity: .6; }
.field .invalid { border-color: var(--alert); }
.bookcard__done { font-size: var(--text-sm); font-weight: 700; color: var(--ok); }
.bookcard__err { font-size: var(--text-sm); font-weight: 700; color: var(--alert); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .bookcard { position: static; }
}

/* ═══ 04 الأرقام ═══ */
.stats { background: var(--surface); padding-block: var(--space-xl); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.stat { border-inline-start: 2px solid var(--teal); padding-inline-start: var(--space-md); }
.stat b { display: block; font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; color: var(--teal-deep); line-height: 1.3; }
.stat span { font-size: var(--text-sm); color: var(--ink-2); font-weight: 700; }
.stats__note { font-size: .74rem; color: var(--ink-2); margin-top: var(--space-md); opacity: .75; }
@media (max-width: 800px) { .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); } }

/* ═══ 05 الخدمات ═══ */
.svc__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: var(--rule); }
.svc__card { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); }
.svc__card + .svc__card { border-inline-start: var(--rule); }
.svc__card p { color: var(--ink-2); font-size: var(--text-sm); flex: 1; }
@media (max-width: 800px) {
  .svc__grid { grid-template-columns: 1fr; }
  .svc__card + .svc__card { border-inline-start: 0; border-top: var(--rule); }
}

/* ═══ 06 مراكز التميز ═══ */
.center {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(20px, 3.5vw, 56px);
  align-items: center; padding-block: var(--space-xl);
}
.center + .center { border-top: var(--rule); }
.center--flip .center__media { order: 2; }
.center__media { border: var(--rule); }
.center__media img { aspect-ratio: 16/10; object-fit: cover; width: 100%; }
.center__tag { font-size: var(--text-sm); font-weight: 700; color: var(--teal); margin-bottom: var(--space-2xs); }
.center__body p { color: var(--ink-2); margin-top: var(--space-sm); }
.center__list { margin-top: var(--space-md); display: grid; gap: var(--space-xs); }
.center__list li { position: relative; padding-inline-start: 22px; font-size: var(--text-sm); font-weight: 700; }
.center__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .6em;
  width: 12px; height: 1px; background: var(--teal);
}
@media (max-width: 860px) {
  .center { grid-template-columns: 1fr; }
  .center--flip .center__media { order: 0; }
}

/* ═══ 07 الأقسام ═══ */
.depts { background: var(--surface); }
.depts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-2xl); }
.dept { border-bottom: var(--rule); }
.dept summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); padding-block: var(--space-md);
}
.dept summary::-webkit-details-marker { display: none; }
.dept summary b { font-size: var(--text-lg); font-weight: 700; }
.dept summary i {
  width: 26px; height: 26px; border: var(--rule); border-radius: var(--radius);
  position: relative; flex-shrink: 0; background: var(--paper);
  transition: background var(--dur-fast) var(--ease-out);
}
.dept summary i::before, .dept summary i::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--teal);
}
.dept summary i::before { width: 10px; height: 2px; }
.dept summary i::after { width: 2px; height: 10px; transition: opacity var(--dur-fast); }
.dept[open] summary i::after { opacity: 0; }
.dept > p { color: var(--ink-2); font-size: var(--text-sm); padding-bottom: var(--space-md); max-width: 52ch; }
@media (max-width: 800px) { .depts__grid { grid-template-columns: 1fr; } }

/* ═══ 08 الأطباء ═══ */
.docs__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.doc { border: var(--rule); background: var(--paper); }
.doc figure { border-bottom: var(--rule); }
.doc img { aspect-ratio: 3/3.4; object-fit: cover; object-position: top; width: 100%; }
.doc__body { padding: var(--space-md); }
.doc__spec { font-size: var(--text-sm); font-weight: 700; color: var(--teal-deep); margin-top: 2px; }
.doc__cred { font-size: .78rem; color: var(--ink-2); margin-top: var(--space-xs); }
.doc__time { font-size: .78rem; font-weight: 700; margin-top: var(--space-xs); border-top: var(--rule); padding-top: var(--space-xs); }
@media (max-width: 1000px) { .docs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .docs__grid { grid-template-columns: 1fr; } }

/* ═══ 09 الاعتمادات ═══ */
.accr__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.accr__item { border: var(--rule); border-top: 3px solid var(--teal); padding: var(--space-md); background: var(--paper); }
.accr__item b { display: block; font-size: var(--text-base); font-weight: 800; margin-bottom: var(--space-2xs); }
.accr__item span { font-size: var(--text-sm); color: var(--ink-2); }
@media (max-width: 900px) { .accr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .accr__grid { grid-template-columns: 1fr; } }

/* ═══ 10 الرقمية ═══ */
.digital { background: var(--surface); }
.digital__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.digital__copy p { color: var(--ink-2); margin-top: var(--space-sm); max-width: 56ch; }
.digital__list { margin-top: var(--space-md); display: grid; gap: var(--space-xs); }
.digital__list li { position: relative; padding-inline-start: 22px; font-weight: 700; font-size: var(--text-sm); }
.digital__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .6em;
  width: 12px; height: 1px; background: var(--teal);
}
.digital__media { border: var(--rule); }
.digital__media img { aspect-ratio: 16/11; object-fit: cover; width: 100%; }
@media (max-width: 860px) { .digital__grid { grid-template-columns: 1fr; } }

/* ═══ 11 الرحلة ═══ */
.journey__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: var(--rule); }
.journey__steps li { padding: var(--space-lg) var(--space-md); }
.journey__steps li + li { border-inline-start: var(--rule); }
.journey__steps b { display: block; font-weight: 800; color: var(--teal-deep); margin-bottom: var(--space-xs); }
.journey__steps p { font-size: var(--text-sm); color: var(--ink-2); }
@media (max-width: 900px) {
  .journey__steps { grid-template-columns: 1fr; }
  .journey__steps li + li { border-inline-start: 0; border-top: var(--rule); }
}

/* ═══ 12 الباقات ═══ */
.packs { background: var(--surface); }
.packs__grid { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: var(--space-md); align-items: start; }
.pack { background: var(--paper); border: var(--rule); padding: var(--space-lg); }
.pack--wide { border-top: 3px solid var(--teal); }
.pack__for { font-size: var(--text-sm); font-weight: 700; color: var(--teal-deep); margin: 2px 0 var(--space-md); }
.pack ul { display: grid; gap: var(--space-xs); }
.pack li { position: relative; padding-inline-start: 22px; font-size: var(--text-sm); }
.pack li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .6em;
  width: 12px; height: 1px; background: var(--teal);
}
@media (max-width: 900px) { .packs__grid { grid-template-columns: 1fr; } }

/* ═══ 13 التأمين ═══ */
.ins__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.ins__sub { color: var(--ink-2); margin-top: var(--space-sm); max-width: 50ch; }
.ins__how { margin-top: var(--space-md); display: grid; gap: var(--space-xs); counter-reset: n; }
.ins__how li { counter-increment: n; position: relative; padding-inline-start: 34px; font-weight: 700; font-size: var(--text-sm); }
.ins__how li::before {
  content: counter(n, arabic-indic); position: absolute; inset-inline-start: 0; top: 0;
  width: 24px; height: 24px; border: var(--rule); border-radius: var(--radius);
  display: grid; place-content: center; font-size: .78rem; color: var(--teal-deep); background: var(--surface);
}
.ins__nets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.ins__net {
  border: var(--rule); padding: var(--space-md); font-weight: 800; background: var(--paper);
}
.ins__net span { display: block; font-size: var(--text-sm); font-weight: 400; color: var(--ink-2); margin-top: var(--space-2xs); }
@media (max-width: 860px) { .ins__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ins__nets { grid-template-columns: 1fr; } }

/* ═══ 14 الإعلامي ═══ */
.media { background: var(--surface); }
.media__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.story { background: var(--paper); border: var(--rule); }
.story figure { border-bottom: var(--rule); }
.story img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.story__k { font-size: var(--text-sm); font-weight: 700; color: var(--teal); padding: var(--space-md) var(--space-md) 0; }
.story h3 { padding: var(--space-2xs) var(--space-md) 0; }
.story p:last-child { padding: var(--space-sm) var(--space-md) var(--space-md); color: var(--ink-2); font-size: var(--text-sm); }
.news { display: grid; }
.news__item { padding-block: var(--space-md); border-bottom: var(--rule); }
.news__item:first-child { padding-top: 0; }
.news__item time { font-size: .78rem; font-weight: 700; color: var(--teal-deep); }
.news__item h3 { font-size: var(--text-base); margin-top: var(--space-2xs); }
.news__item p { font-size: var(--text-sm); color: var(--ink-2); margin-top: var(--space-2xs); }
@media (max-width: 860px) { .media__grid { grid-template-columns: 1fr; } }

/* ═══ 15 المنشآت ═══ */
.fac__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }
.fac__item { border: var(--rule); padding: var(--space-md); display: grid; gap: var(--space-2xs); background: var(--paper); }
.fac__item b { font-weight: 800; }
.fac__item span { font-size: var(--text-sm); color: var(--ink-2); }
.fac__hrs { font-weight: 700; color: var(--teal-deep) !important; border-top: var(--rule); padding-top: var(--space-xs); margin-top: var(--space-2xs); }
@media (max-width: 1000px) { .fac__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fac__grid { grid-template-columns: 1fr; } }

/* ═══ الفوتر ═══ */
.ft { background: var(--ink); color: oklch(88% 0.01 200); margin-top: var(--space-2xl); }
.ft__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-lg);
  padding-block: var(--space-xl);
}
.brand--ft { color: var(--paper); }
.brand--ft .brand__mark { color: oklch(70% 0.09 185); }
.brand--ft .brand__t b { color: oklch(70% 0.09 185); }
.ft__brand p { font-size: var(--text-sm); margin-top: var(--space-sm); max-width: 30rem; opacity: .8; }
.ft__col { display: grid; gap: var(--space-xs); font-size: var(--text-sm); align-content: start; }
.ft__col b { font-weight: 800; color: var(--paper); margin-bottom: var(--space-2xs); }
.ft__col a { transition: color var(--dur-fast) var(--ease-out); }
.ft__col a:hover { color: oklch(70% 0.09 185); }
.ft__base {
  border-top: 1px solid oklch(35% 0.02 220);
  display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
  padding-block: var(--space-md); font-size: .78rem; opacity: .8;
}
.ft__base a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .ft__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ft__grid { grid-template-columns: 1fr; } }

/* ═══ شريط الحجز الثابت ═══ */
.dockbar {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 60;
  background: var(--paper); border-top: var(--rule);
  display: flex; align-items: center; justify-content: center; gap: var(--space-lg);
  padding: 10px clamp(16px, 4vw, 40px);
  transform: translateY(110%); transition: transform var(--dur-med) var(--ease-out);
  box-shadow: 0 -6px 24px oklch(24% 0.035 220 / .08);
  font-size: var(--text-sm); font-weight: 700;
}
.dockbar.show { transform: none; }
@media (max-width: 520px) { .dockbar span { display: none; } }

/* ═══ reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dockbar { transition: none; }
  * { transition-duration: 1ms !important; }
}

/* شبكة التأمين بالأسماء */
.ins__side { display: grid; gap: var(--space-md); align-content: start; }
.ins__netsh { font-weight: 800; }
.ins__names { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.ins__names span {
  border: var(--rule); background: var(--paper);
  padding: 14px var(--space-md); font-weight: 700; text-align: center;
}
@media (max-width: 520px) { .ins__names { grid-template-columns: 1fr; } }