/* Shared type and spacing scale for every public page. Loaded after layout rules. */
:root {
  --space-section: clamp(3rem, 5vw, 4.5rem);
  --space-compact: clamp(2rem, 3vw, 3rem);
  --space-grid: clamp(1rem, 2vw, 1.5rem);
  --space-card: clamp(1.25rem, 2vw, 1.75rem);
  --page-gutter: clamp(1.25rem, 3vw, 2rem);
  --type-title: clamp(1.65rem, 2.6vw, 2.25rem);
  --type-page: clamp(2rem, 3.7vw, 3rem);
  --type-hero: clamp(2.15rem, 4vw, 3.5rem);
}
body { font-size: 1rem; line-height: 1.75; overflow-x: clip; }
html[lang="ar"] body { line-height: 1.9; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.3; margin-block: 0 .75rem; text-wrap: balance; }
html[lang="ar"] :is(h1,h2,h3,h4) { letter-spacing: 0; line-height: 1.5; word-break: normal; overflow-wrap: normal; }
p { margin-block: 0 1rem; }
.container { width: min(calc(100% - var(--page-gutter) * 2), var(--container)); }
.narrow { width: min(calc(100% - var(--page-gutter) * 2), 780px); }
.section { padding-block: var(--space-section); }
.section--compact { padding-block: var(--space-compact); }
.section-heading { max-width: 760px; margin-block-end: 2rem; }
.section-heading > :last-child, .page-hero .container > :last-child,
.card > :last-child, .notice > :last-child, .cta > :last-child { margin-block-end: 0; }
.eyebrow { font-size: .8rem; font-weight: 600; line-height: 1.6; margin-block-end: .75rem; }
html[lang="ar"] :is(.eyebrow,.footer__title,.placeholder-label) { letter-spacing: 0; }
.display, .page-hero .display { font-size: var(--type-page); max-width: 950px; margin-block-end: 1rem; }
.title { font-size: var(--type-title); margin-block-end: .85rem; }
.lead { font-size: 1.0625rem; max-width: 720px; line-height: inherit; }
.page-hero { padding-block: clamp(2.5rem, 4.5vw, 4rem); }
.breadcrumbs { margin-block-end: 1.25rem; font-size: .8125rem; line-height: 1.6; }
.grid, .team-grid { gap: var(--space-grid); }
.grid > *, .split > *, .form-grid > * { min-width: 0; }
.split { gap: clamp(2rem, 4vw, 3.5rem); }
.card { padding: var(--space-card); border-color: var(--line); box-shadow: 0 8px 24px rgba(46,48,41,.05); }
.card :is(h2,h3) { font-size: 1.25rem; line-height: 1.5; margin-block-end: .65rem; }
.card__icon { width: 2.75rem; margin-block-end: 1rem; font-size: 1.0625rem; }
.grid > .card { display: flex; flex-direction: column; align-items: flex-start; }
.grid > .card .card__link { margin-block-start: auto; padding-block-start: .75rem; }
.grid > .card > :is(.cluster,.check-list) { width: 100%; }
.card__link { font-size: .9375rem; font-weight: 600; }
.button { min-height: 3rem; padding: .7rem 1.25rem; font-size: .9375rem; font-weight: 600; line-height: 1.6; }
.cluster { gap: .75rem; }
.nav { gap: 1.25rem; }
.nav__link { font-size: .9375rem; font-weight: 600; }
.brand__logo { height: 3.75rem; }
.hero--clinic { min-height: 620px; }
.hero--clinic .hero__content { padding-block: 3.5rem; }
.hero--clinic .hero__content .display { font-size: var(--type-hero); max-width: 100%; }
.hero--clinic .lead { margin-block-end: 1.5rem; }
.hero__note { font-size: .8125rem; font-weight: 500; line-height: 1.8; margin-block: 1.25rem 0; }
.hero__note::before { flex-shrink: 0; }
.portrait-frame { width: 100%; max-width: 26rem; }
.portrait-frame img { min-height: 0; aspect-ratio: 3/4; object-fit: contain; }
.team-grid .profile-card { padding: 0; }
.team-grid .profile-card__body { padding: 1.25rem 1rem; }
.team-grid :is(h2,h3) { font-size: 1.0625rem; line-height: 1.65; margin-block-end: .4rem; }
.team-grid .profile-card__body p { font-size: .875rem; line-height: 1.85; }
.team-experience { font-size: .8125rem; font-weight: 600; margin-block-start: .75rem; }
.check-list { margin-block: 1rem 0; gap: .75rem; }
.check-list li { grid-template-columns: 1.5rem 1fr; gap: .65rem; font-weight: 500; line-height: 1.85; }
.check-list li::before { width: 1.5rem; font-size: .875rem; line-height: 1.5rem; }
.journey { padding-inline-start: 1.25rem; }
html[dir] .journey__item { padding: 1.25rem 0; padding-inline-start: 2rem; }
.journey__item h3 { font-size: 1.2rem; }
.journey__item p { margin-block-end: 0; }
.faq__button { font-size: 1rem; font-weight: 600; line-height: 1.8; padding-block: 1.1rem; }
.faq__panel { padding-block-end: 1.1rem; }
.faq__panel p { margin: 0; }
.cta { padding: clamp(1.5rem, 4vw, 3rem); }
.cta .title { max-width: 760px; }
.cta p { margin-block-end: 1.5rem; }
.map-placeholder { min-height: 300px; padding: 1.75rem; }
.map-placeholder h3 { font-size: 1.25rem; }
.placeholder-label { font-weight: 600; font-size: .75rem; line-height: 1.7; }
.form, .form-grid { gap: 1.25rem; }
.field { gap: .45rem; }
.field label { font-size: .9375rem; font-weight: 600; }
.field :is(input,select,textarea) { font-size: 1rem; min-height: 3.25rem; padding: .7rem .85rem; line-height: 1.6; }
.field__hint, .field__error { font-size: .8125rem; line-height: 1.7; }
.field__error:empty { display: none; }
.checkbox { font-size: .9375rem; line-height: 1.85; }
.footer__top { padding-block: 3rem; gap: 2rem; }
.footer__title { font-size: 1rem; font-weight: 600; line-height: 1.6; margin-block-end: .75rem; }
.footer__links { margin: 0; gap: .5rem; font-size: .9375rem; }
.footer__brand p { color: #c4d1d3; font-size: .9375rem; margin-block: 1rem; }
.footer__bottom { font-size: .8125rem; line-height: 1.8; padding-block: 1.25rem; }
body[data-page="contact"] .section > .section--compact { padding-block: 1.5rem 0; }
@media (max-width: 900px) {
  .hero--clinic { min-height: 0; }
  .hero--clinic .hero__content { padding-block: 2rem 2.5rem; }
  .nav { gap: .75rem; }
  .nav__link { min-height: 3rem; }
}
@media (max-width: 640px) {
  .section-heading { margin-block-end: 1.5rem; }
  .page-hero .display, .hero__content .display { max-width: 100%; }
  .lead { font-size: 1rem; }
  .brand__logo { height: 3rem; }
  .hero--clinic .hero__content .cluster { display: flex; }
  .hero--clinic .hero__content .button { width: auto; flex: 1 1 8rem; }
  .hero__note { align-items: baseline; }
  .card :is(h2,h3) { font-size: 1.125rem; }
  .team-grid .profile-card__body { padding: 1.25rem; }
  .team-grid :is(h2,h3) { font-size: 1.125rem; }
  .portrait-frame { max-width: 22rem; }
  .form.card { padding: 1.25rem; }
  .form-grid { gap: 1rem; }
  .footer__top { padding-block: 2.5rem; }
  .footer__bottom { gap: .5rem; }
}
/* Keep text legible on the dark section using the same olive palette. */
.section--navy .check-list li { color: #f4f1e9; }
.section--navy .eyebrow { color: #dce6bc; }