/* ==========================================================================
   Arveid - main.css
   One stylesheet for both languages. All layout uses CSS logical properties
   so RTL (ar) and LTR (en) render from the same rules. No .rtl overrides.

   1.  Design tokens          8.  Hero
   2.  Reset                  9.  About
   3.  Focus / a11y          10.  Services
   4.  Layout primitives     11.  Pipeline (pinned)
   5.  Buttons               12.  Medical
   6.  Header                15.  CTA band + WhatsApp FAB
   7.  Footer                16.  Scroll-animation engine styles
                             18.  Small adjustments
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Brand -------------------------------------------------------------- */
  /* Sampled from the Arveid logo artwork (the blue "V"). */
  --brand:            #0049FD;   /* primary accent, used sparingly       */
  --brand-hover:      #0040DF;   /* ~12% darker, hover / pressed         */
  --brand-contrast:   #ffffff;   /* text on top of a filled brand fill   */
  --brand-tint:       rgba(0, 73, 253, 0.10);

  /* Light surface ramp -------------------------------------------------- */
  --bg:               #ffffff;
  --surface:          #f5f5f7;
  --text:             #1d1d1f;
  --muted:            #6e6e73;
  --border:           rgba(0, 0, 0, 0.12);

  /* Chrome -------------------------------------------------------------- */
  --header-bg:        rgba(255, 255, 255, 0.72);
  --shadow-ambient:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-lift:      0 2px 10px rgba(0, 0, 0, 0.09);

  /* Spacing scale - 8px base -------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   16px;
  --space-4:   24px;
  --space-5:   32px;
  --space-6:   48px;
  --space-7:   64px;
  --space-8:   96px;
  --space-10:  160px;

  /* Section rhythm - the "one idea per viewport" breathing room ---------- */
  --section-y:    clamp(88px, 13vh, 176px);
  --gutter:       clamp(20px, 5vw, 64px);
  --max-w:        1240px;

  /* Radius scale -------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-lg:   20px;
  --r-full: 999px;

  /* Type scale ---------------------------------------------------------- */
  --fs-hero:    clamp(2.75rem, 7vw, 6rem);
  --fs-display: clamp(2.125rem, 5vw, 4rem);
  --fs-h2:      clamp(1.75rem, 3.6vw, 3rem);
  --fs-h3:      clamp(1.1875rem, 1.7vw, 1.5rem);
  --fs-lead:    clamp(1.125rem, 2vw, 1.625rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;

  --lh-tight:   1.05;
  --lh-snug:    1.22;
  --lh-body:    1.65;

  --ls-tight:   -0.022em;
  --ls-hero:    -0.032em;
  --ls-wide:    0.08em;

  /* Motion -------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    180ms;
  --dur-med:     420ms;
  --dur-slow:    900ms;

  /* Fonts - drop self-hosted faces into assets/fonts/ to replace these -- */
  --font-ar: "SF Arabic", "Geeza Pro", "Dubai", "Noto Kufi Arabic",
             "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-en: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
             Helvetica, Arial, system-ui, sans-serif;
  --font: var(--font-en);

  --header-h: 52px;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* The logo blue only reaches 3.4:1 on black, so the dark theme uses a
     lightened version of the same hue to clear WCAG AA. */
  --brand:            #4A82FF;
  --brand-hover:      #4172E0;
  --brand-contrast:   #0b1220;
  --brand-tint:       rgba(74, 130, 255, 0.14);

  --bg:               #000000;
  --surface:          #1d1d1f;
  --text:             #f5f5f7;
  --muted:            #86868b;
  --border:           rgba(255, 255, 255, 0.14);

  --header-bg:        rgba(0, 0, 0, 0.66);
  --shadow-ambient:   0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lift:      0 2px 12px rgba(0, 0, 0, 0.6);

}

/* Language driven font switch, set on the html element. */
[lang="ar"] { --font: var(--font-ar); }
[lang="en"] { --font: var(--font-en); }

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + var(--space-4));
}

body {
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Colour transitions on theme change only, suppressed on first paint. */
html:not(.no-transition) body,
html:not(.no-transition) .site-header,
html:not(.no-transition) .site-footer,
html:not(.no-transition) .card,
html:not(.no-transition) .btn,
html:not(.no-transition) .section--surface {
  transition: background-color var(--dur-med) var(--ease-out),
              color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}

img, picture, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

/* --------------------------------------------------------------------------
   3. FOCUS / A11Y
   -------------------------------------------------------------------------- */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 999;
  padding: var(--space-2) var(--space-4);
  background-color: var(--brand);
  color: var(--brand-contrast);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  transform: translateY(-250%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.wrap {
  inline-size: 100%;
  max-inline-size: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--surface { background-color: var(--surface); }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: var(--space-3);
}
[lang="ar"] .eyebrow { text-transform: none; letter-spacing: 0.04em; }

.section-title {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: 0.78em;
  padding-inline: 1.6em;
  border-radius: var(--r-full);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn--primary {
  background-color: var(--brand);
  color: var(--brand-contrast);
}
.btn--primary:hover { background-color: var(--brand-hover); }
.btn--primary:active { transform: scale(0.98); }

.btn--ghost {
  color: var(--brand);
  padding-inline: 0.5em;
}
.btn--ghost:hover { color: var(--brand-hover); }

/* Chevron always points forward in the current reading direction. */
.chev {
  inline-size: 0.72em;
  block-size: 0.72em;
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
[dir="rtl"] .chev { transform: scaleX(-1); }
.btn--ghost:hover .chev { transform: translateX(3px); }
[dir="rtl"] .btn--ghost:hover .chev { transform: scaleX(-1) translateX(3px); }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  block-size: var(--header-h);
  background-color: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-block-end: 1px solid var(--border);
}

.site-header__inner {
  block-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  font-size: 1.0625rem;
  margin-inline-end: auto;
}
.brand-mark img { block-size: 22px; inline-size: auto; }
.brand-mark .logo-dark { display: none; }
[data-theme="dark"] .brand-mark .logo-light { display: none; }
[data-theme="dark"] .brand-mark .logo-dark  { display: block; }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav a {
  font-size: var(--fs-sm);
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a:hover { color: var(--text); }

@media (max-width: 900px) { .nav { display: none; } }

.header-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lang-switch {
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.lang-switch:hover { border-color: var(--brand); color: var(--brand); }

/* Sliding theme switch.
   The knob's travel is held in a custom property that flips sign under
   [dir="rtl"], so the knob always moves toward the inline-end edge without
   a single hard-coded left/right anywhere. */
.theme-switch {
  --track-w: 56px;
  --track-h: 30px;
  --knob: 22px;
  --knob-inset: 3px;
  --knob-travel: calc(var(--track-w) - var(--knob) - (var(--knob-inset) * 2));
  padding: 0;
  flex: none;
  border-radius: var(--r-full);
  line-height: 0;
}
[dir="rtl"] .theme-switch {
  --knob-travel: calc((var(--track-w) - var(--knob) - (var(--knob-inset) * 2)) * -1);
}
.theme-switch:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--r-full);
}

.theme-switch__track {
  position: relative;
  display: block;
  inline-size: var(--track-w);
  block-size: var(--track-h);
  border-radius: var(--r-full);
  background-color: var(--surface);
  /* Explicit rgba rather than --border: a UI control boundary needs 3:1
     under WCAG 1.4.11, which the decorative --border does not reach. */
  border: 1px solid rgba(0, 0, 0, 0.45);
  transition: background-color var(--dur-med) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
[data-theme="dark"] .theme-switch__track {
  background-color: var(--brand-tint);
  border-color: rgba(255, 255, 255, 0.42);
}
.theme-switch:hover .theme-switch__track { border-color: var(--brand); }

/* Static sun and moon at the two ends; the knob slides between them. */
.theme-switch__glyph {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 13px;
  block-size: 13px;
  color: var(--muted);
}
.theme-switch__glyph:first-of-type { inset-inline-start: 5px; }
.theme-switch__glyph:last-of-type  { inset-inline-end: 5px; }

.theme-switch__knob {
  position: absolute;
  inset-block-start: var(--knob-inset);
  inset-inline-start: var(--knob-inset);
  inline-size: var(--knob);
  block-size: var(--knob);
  border-radius: var(--r-full);
  background-color: var(--text);
  transition: transform var(--dur-med) var(--ease-out),
              background-color var(--dur-med) var(--ease-out);
}
[data-theme="dark"] .theme-switch__knob {
  background-color: var(--brand);
  transform: translateX(var(--knob-travel));
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch__knob { transition: none; }
}

/* --------------------------------------------------------------------------
   7. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--surface);
  border-block-start: 1px solid var(--border);
  padding-block: var(--space-8);
  /* keep the last row clear of the floating WhatsApp button */
  padding-block-end: calc(var(--space-6) + 76px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(2, 1fr);
  gap: var(--space-7) var(--space-5);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

.footer-about p {
  color: var(--muted);
  font-size: var(--fs-sm);
  max-inline-size: 36ch;
  margin-block-start: var(--space-3);
}

.footer-col h3 {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: var(--space-3);
}
[lang="ar"] .footer-col h3 { text-transform: none; letter-spacing: 0.04em; }

.footer-col li + li { margin-block-start: var(--space-2); }
.footer-col a,
.footer-col p {
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--brand); }

.footer-base {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
/* No photography. The hero is carried by a token-built gradient, the type
   scale and the vertical space. The composition is deliberately symmetric
   so it reads identically in RTL and LTR without a direction override. */
.hero {
  position: relative;
  min-block-size: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(110% 75% at 50% -8%, var(--brand-tint) 0%, transparent 62%),
    radial-gradient(80% 55% at 50% 108%, var(--brand-tint) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, var(--bg) 68%);
}

/* A hairline that closes the hero off against the section below it. */
.hero::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 1px;
  background-color: var(--border);
}

/* The measure belongs on the headline itself (where 1ch is a hero-sized
   character), never on .wrap — .wrap is auto-centred and carries the gutter,
   so capping it here would collapse the whole hero into a narrow column. */
.hero__inner {
  padding-block: calc(var(--header-h) + var(--space-8)) var(--space-10);
}

.hero__eyebrow {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  color: var(--muted);
  margin-block-end: var(--space-3);
}
[lang="ar"] .hero__eyebrow { letter-spacing: 0.04em; }

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-hero);
  font-weight: 700;
  text-wrap: balance;
  max-inline-size: 15ch;
  margin-block-end: var(--space-4);
}
[lang="ar"] .hero__title { line-height: 1.14; }

.hero__sub {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-inline-size: 42ch;
  line-height: 1.45;
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-block-start: var(--space-6);
}

.scroll-hint {
  position: absolute;
  inset-block-end: var(--space-5);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  color: var(--muted);
  transition: opacity var(--dur-med) var(--ease-out);
}
.scroll-hint[data-hidden="true"] { opacity: 0; pointer-events: none; }
.scroll-hint svg { inline-size: 16px; block-size: 16px; }

/* --------------------------------------------------------------------------
   9. ABOUT + STATS
   -------------------------------------------------------------------------- */
.about__statement {
  font-size: var(--fs-display);
  line-height: 1.24;
  letter-spacing: var(--ls-tight);
  font-weight: 600;
  text-wrap: pretty;
  max-inline-size: 22ch;
}
[lang="en"] .about__statement { max-inline-size: 26ch; }

/* --------------------------------------------------------------------------
   10. SERVICES
   -------------------------------------------------------------------------- */
.services__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  margin-block-end: var(--space-7);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 980px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } }

.card {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background-color: var(--bg);
  box-shadow: var(--shadow-ambient);
  transition: transform var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.section--surface .card { background-color: var(--bg); }

@media (prefers-reduced-motion: no-preference) {
  .card:hover {
    transform: translateY(-3px);
    border-color: var(--brand);
    box-shadow: var(--shadow-lift);
  }
}
@media (prefers-reduced-motion: reduce) {
  .card:hover { border-color: var(--brand); }
}

.card__icon {
  inline-size: 26px;
  block-size: 26px;
  color: var(--brand);
  margin-block-end: var(--space-4);
}
.card__icon svg { inline-size: 100%; block-size: 100%; }

.card__title {
  font-size: var(--fs-h3);
  font-weight: 650;
  letter-spacing: var(--ls-tight);
  line-height: 1.3;
  margin-block-end: var(--space-2);
}

.card__body {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   11. PIPELINE - the pinned scroll sequence
   -------------------------------------------------------------------------- */
.pipeline { background-color: var(--bg); }

.pipeline__intro {
  padding-block: var(--section-y) var(--space-6);
}

.pin-track { position: relative; }

.pin-stage {
  min-block-size: 100svh;
  display: grid;
  align-content: center;
  padding-block: var(--space-7);
}

/* Pinned mode is opt-in and applied by JS only when it is safe. */
.is-pinned .pin-stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
}

.pipeline__layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 900px) { .pipeline__layout { grid-template-columns: 1fr; gap: var(--space-5); } }

/* Progress rail on the inline-start edge ------------------------------- */
.rail {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding-inline-start: var(--space-5);
}
.rail::before,
.rail__fill {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 2px;
  border-radius: var(--r-full);
}
.rail::before { background-color: var(--border); }
.rail__fill {
  background-color: var(--brand);
  transform-origin: top center;
  transform: scaleY(var(--progress, 0));
}

/* The inactive state is carried by colour and weight, not by opacity:
   dimming muted text below full opacity drops it under WCAG AA. */
.rail__item {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  transition: color var(--dur-med) var(--ease-out),
              font-weight var(--dur-med) var(--ease-out);
}
.rail__item[data-on="true"] { color: var(--brand); font-weight: 700; }
.rail__item span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Stage panels ---------------------------------------------------------- */
.stages { position: relative; }

.is-pinned .stages { min-block-size: 340px; }

.stage {
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out);
}

/* Stacked-card fallback spacing (unpinned). */
.pipeline:not(.is-pinned) .stage + .stage { margin-block-start: var(--space-4); }
.pipeline:not(.is-pinned) .stage {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  background-color: var(--bg);
}

/* Pinned: panels overlay one another and cross-fade. */
.is-pinned .stage {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}
.is-pinned .stage[data-on="true"] {
  position: relative;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.stage__num {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  color: var(--brand);
  margin-block-end: var(--space-2);
}
[lang="ar"] .stage__num { letter-spacing: 0.04em; }

.stage__title {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  margin-block-end: var(--space-3);
}

.stage__q {
  font-size: var(--fs-lead);
  color: var(--muted);
  max-inline-size: 46ch;
  line-height: 1.45;
  margin-block-end: var(--space-5);
  text-wrap: pretty;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  font-size: var(--fs-sm);
  padding: 0.42em 0.95em;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background-color: var(--surface);
  color: var(--text);
  white-space: nowrap;
}

.pipeline__note {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   12. MEDICAL
   -------------------------------------------------------------------------- */
.medical__title { max-inline-size: 16ch; }

/* Three columns of type on desktop, stacking to one on narrow screens.
   No imagery — the surface background is what sets the section apart. */
.medical__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6) var(--space-5);
  margin-block: var(--space-8) var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border);
}
@media (max-width: 900px) {
  .medical__points { grid-template-columns: 1fr; gap: var(--space-5); }
}

.medical__cta { margin-inline-start: -0.5em; }
.medical__point h3 {
  font-size: var(--fs-h3);
  font-weight: 650;
  letter-spacing: var(--ls-tight);
  margin-block-end: var(--space-2);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.medical__point h3::before {
  content: "";
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--r-full);
  background-color: var(--brand);
  flex: none;
  transform: translateY(-2px);
}
.medical__point p {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
  max-inline-size: 52ch;
}

/* --------------------------------------------------------------------------
   15. CTA BAND + WHATSAPP FAB
   -------------------------------------------------------------------------- */
.cta-band {
  background-color: var(--surface);
  border-block-start: 1px solid var(--border);
  padding-block: clamp(72px, 11vh, 144px);
  text-align: center;
}
.cta-band h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.cta-band p {
  margin-block: var(--space-3) var(--space-6);
  color: var(--muted);
  font-size: var(--fs-lead);
  max-inline-size: 52ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.wa-fab {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  z-index: 90;
  inline-size: 54px;
  block-size: 54px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background-color: #25D366;
  color: #04240f;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              visibility 0s linear var(--dur-med);
}
.wa-fab[data-shown="true"] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.wa-fab svg { inline-size: 27px; block-size: 27px; }
.wa-fab:hover { background-color: #1fbb59; }

/* --------------------------------------------------------------------------
   16. SCROLL ANIMATION ENGINE
   Hidden start states only apply when JS is running AND motion is welcome.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out),
                filter var(--dur-slow) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js [data-reveal="fade-up"] { transform: translate3d(0, 30px, 0); }
  .js [data-reveal="scale"]   { transform: scale(0.94); }
  .js [data-reveal="blur"]    { filter: blur(14px); }

  .js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
  }

}

/* Reduced motion: everything is present, static, immediately. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .scroll-hint { display: none; }
}

/* --------------------------------------------------------------------------
   18. SMALL ADJUSTMENTS
   -------------------------------------------------------------------------- */

/* Wordmark fallback shown only when the logo files are missing. */
.brand-mark__text { display: none; }
.brand-mark--text .brand-mark__text { display: block; }
.brand-mark--text img { display: none !important; }

/* Very narrow screens: let long chips wrap rather than overflow. */
@media (max-width: 420px) {
  .chip { white-space: normal; }
}

/* Unpinned pipeline (mobile / reduced motion): no forced viewport height. */
.pipeline:not(.is-pinned) .pin-stage {
  min-block-size: 0;
  block-size: auto;
  padding-block: 0 var(--section-y);
}
.pipeline:not(.is-pinned) .pipeline__note { margin-block-start: var(--space-5); }