/* ============================================================
   Impilo style-system mockup of the healthsystemlink.com content.
   Tokens copied verbatim from DESIGN-3.md. Isolated experiment —
   does not touch /website (the real Brand Book v2.0 build).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600&display=swap');

:root {
  /* Colors */
  --color-deep-iris: #16165c;
  --color-iris-shadow: #232269;
  --color-iris-glow: #403cd5;
  --color-iris-pulse: #5350cc;
  --color-iris-border: #4846c6;
  --color-iris-veil: #524fe1;
  --color-lilac-mist: #b1a6f6;
  --color-clinical-cyan: #00b1ff;
  --color-cyan-soft: #59b4ff;
  --color-mint-vital: #00ffaa;
  --color-teal-signal: #2ee9ff;
  --color-cloud-white: #ffffff;
  --color-pearl: #f4f4f6;
  --color-ash: #d8d8e3;
  --color-fog: #9494a9;

  --font-gilroy: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-caption: 12px;   --leading-caption: 1.44;    --tracking-caption: 0.24px;
  --text-body-sm: 14px;   --leading-body-sm: 1.44;    --tracking-body-sm: 0.28px;
  --text-subheading: 18px; --leading-subheading: 1.44; --tracking-subheading: -0.54px;
  --text-heading-sm: 24px; --leading-heading-sm: 1.44; --tracking-heading-sm: -0.72px;
  --text-heading: 46px;   --leading-heading: 1;       --tracking-heading: -1.84px;
  --text-heading-lg: 54px; --leading-heading-lg: 1;    --tracking-heading-lg: -2.16px;
  --text-heading-xl: 66px; --leading-heading-xl: 1;    --tracking-heading-xl: -2.64px;
  --text-display: 92px;   --leading-display: 0.92;    --tracking-display: -6.9px;
  --text-display-xl: 124px; --leading-display-xl: 0.92; --tracking-display-xl: -9.3px;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px;
  --spacing-24: 24px; --spacing-32: 32px; --spacing-36: 36px; --spacing-40: 40px;
  --spacing-48: 48px; --spacing-116: 116px; --spacing-220: 220px;

  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 8px;

  --radius-icons: 7px;
  --radius-cards: 24px;
  --radius-cards-elevated: 32px;
  --radius-inputs: 16px;
  --radius-buttons: 9999px;
  --radius-tags: 9999px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-gilroy); font-weight: var(--font-weight-medium);
  background: var(--color-deep-iris); color: var(--color-cloud-white);
  -webkit-font-smoothing: antialiased;
  opacity: 0; transition: opacity .6s cubic-bezier(.16,1,.3,1);
}
html:not(.js) body, body.is-loaded { opacity: 1; }

/* ── Motion: scroll reveal + page load ──────────────────────
   Progressive enhancement — every .reveal element is fully visible
   with JS disabled (html:not(.js)), matching /website's site.js pattern. */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
html:not(.js) .reveal, html:not(.js) .reveal-group > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body, .reveal { transition: none; opacity: 1; transform: none; }
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: var(--font-weight-semibold); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.container { max-width: var(--page-max-width); margin-inline: auto; padding-inline: var(--spacing-24); }

/* ── Buttons ─────────────────────────────────────────────── */
.pill-btn {
  display: inline-flex; align-items: center; gap: var(--spacing-8);
  border-radius: var(--radius-buttons); font-size: 17px; font-weight: var(--font-weight-medium);
  padding: var(--spacing-16) var(--spacing-24); border: none; cursor: pointer; white-space: nowrap;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.pill-btn:hover { transform: translateY(-2px); }
.pill-btn:active { transform: translateY(0); }
.pill-btn--primary {
  background: var(--color-iris-pulse); color: var(--color-cloud-white);
  box-shadow: 0 0 20px rgba(60, 57, 185, 0.4);
}
.pill-btn--primary:hover { background: var(--color-iris-veil); box-shadow: 0 4px 28px rgba(83, 80, 204, 0.55); }
.pill-btn--ghost {
  background: transparent; color: var(--color-cloud-white);
  border: 1px solid var(--color-cloud-white);
}
.pill-btn--ghost:hover { background: rgba(255,255,255,.08); }
.pill-btn--light {
  background: var(--color-cloud-white); color: var(--color-deep-iris);
}
.pill-btn--light:hover { background: var(--color-pearl); box-shadow: 0 4px 24px rgba(0,0,0,.12); }
.pill-btn--sm { padding: var(--spacing-12) var(--spacing-20); font-size: var(--text-body-sm); }

/* ── Nav ─────────────────────────────────────────────────── */
.nav {
  position: relative; z-index: 2; height: 80px; display: flex; align-items: center;
  justify-content: space-between;
}
.nav .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav-brand { display: flex; align-items: center; gap: var(--spacing-12); font-size: 20px; font-weight: var(--font-weight-semibold); color: var(--color-cloud-white); }
.nav-icon { height: 34px; width: auto; }
.lang-toggle { display: flex; align-items: center; gap: 6px; font-size: var(--text-body-sm); }
.lang-toggle span { color: var(--color-lilac-mist); opacity: .5; }
.lang-toggle-link { color: var(--color-lilac-mist); transition: color .2s ease; }
.lang-toggle-link:hover { color: var(--color-cloud-white); }
.lang-toggle-link.is-active { color: var(--color-cloud-white); font-weight: var(--font-weight-semibold); pointer-events: none; }
@media (max-width: 760px) { .lang-toggle { display: none; } }
.nav-links { display: flex; align-items: center; gap: var(--spacing-32); font-size: 17px; }
.nav-actions { display: flex; align-items: center; gap: var(--spacing-12); }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-actions .pill-btn--ghost { display: none; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; padding-top: var(--spacing-48); padding-bottom: var(--spacing-16); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 0.85fr 2fr; gap: var(--spacing-48); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-illustration { display: none; } }
.hero-illustration svg { width: 100%; height: auto; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--spacing-8); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-lilac-mist);
  margin-bottom: var(--spacing-20);
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, var(--text-display)); line-height: var(--leading-display);
  letter-spacing: -0.045em; color: var(--color-cloud-white);
}
.flip-heading { perspective: 800px; }
.flip-word {
  display: inline-block; transform-origin: 50% 100%;
  animation: flip-word-in .85s cubic-bezier(.2,.9,.25,1) both;
}
.flip-heading .flip-word:nth-of-type(1) { animation-delay: .1s; }
.flip-heading .flip-word:nth-of-type(2) { animation-delay: .3s; }
.flip-heading .flip-word:nth-of-type(3) { animation-delay: .5s; }
@keyframes flip-word-in {
  0%   { transform: rotateX(-100deg); opacity: 0; }
  60%  { transform: rotateX(12deg); opacity: 1; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-word { animation: none; opacity: 1; transform: none; }
}
.hero-highlight {
  display: inline-block; border: 1px dashed var(--color-clinical-cyan); border-radius: var(--radius-icons);
  padding: 0 10px; color: var(--color-clinical-cyan);
}
.hero-lede {
  margin-top: var(--spacing-24); max-width: 560px; font-size: 17px; line-height: 1.44;
  color: var(--color-pearl);
}
.hero-lede strong { color: var(--color-cloud-white); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--spacing-12); margin-top: var(--spacing-32); }

/* Dashboard evidence card overlapping the hero bottom */
.dashboard-card {
  position: relative; z-index: 1; margin-top: -140px; background: var(--color-iris-shadow);
  border: 1px solid var(--color-iris-border); border-radius: var(--radius-cards-elevated);
  padding: var(--card-padding); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-16);
}
@media (max-width: 900px) { .dashboard-card { grid-template-columns: repeat(2, 1fr); margin-top: var(--spacing-32); } }
.metric-card {
  position: relative; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-cards); padding: var(--spacing-24); overflow: hidden;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 12px 32px rgba(8,10,40,.25);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease, background-color .4s ease;
}
.metric-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(0,177,255,.5), rgba(177,166,246,0) 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.metric-card:hover {
  transform: translateY(-6px); background: rgba(255,255,255,.16);
  border-color: rgba(0,177,255,.45); box-shadow: 0 20px 44px rgba(0,177,255,.18);
}
.metric-icon {
  width: 36px; height: 36px; background: rgba(0,177,255,.16); color: var(--color-clinical-cyan);
  margin-bottom: var(--spacing-16); transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.metric-icon svg { width: 18px; height: 18px; }
.metric-card:hover .metric-icon { transform: scale(1.1) rotate(-4deg); }
.metric-value {
  font-size: clamp(28px, 4vw, 46px); font-weight: var(--font-weight-semibold); color: var(--color-clinical-cyan);
  line-height: 1; letter-spacing: -0.03em;
}
.metric-label { margin-top: var(--spacing-8); font-size: var(--text-caption); color: var(--color-cloud-white); }

/* ── Sections ────────────────────────────────────────────── */
.section { padding-block: var(--section-gap); }
.section--pearl { background: var(--color-pearl); color: var(--color-deep-iris); }
.section--watermark { position: relative; overflow: hidden; }
.section-watermark {
  position: absolute; z-index: 0; top: 50%; right: -80px; transform: translateY(-50%);
  width: 560px; height: 560px; opacity: .05; pointer-events: none;
}
.section--watermark .container { position: relative; z-index: 1; }
@media (max-width: 900px) { .section-watermark { width: 360px; height: 360px; right: -120px; } }
.eyebrow {
  display: flex; align-items: center; gap: var(--spacing-8); font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-lilac-mist);
  margin-bottom: var(--spacing-16);
}
.section--pearl .eyebrow { color: var(--color-iris-pulse); }
.eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; }
h2.section-title {
  font-size: clamp(1.75rem, 3.4vw, var(--text-heading-xl)); line-height: var(--leading-heading-xl);
  letter-spacing: -0.03em;
}
.section-copy { margin-top: var(--spacing-16); font-size: 17px; line-height: 1.44; color: var(--color-ash); max-width: 620px; }
.section--pearl .section-copy { color: #4b4b63; }

.split { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--spacing-48); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

/* ── Feature cards (Who We Are) ─────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16); }
@media (max-width: 860px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }
.dark-card {
  background: var(--color-iris-shadow); border: 1px solid var(--color-iris-border);
  border-radius: var(--radius-cards); padding: var(--card-padding);
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, background-color .35s ease;
}
.dark-card:hover {
  transform: translateY(-6px); border-color: var(--color-iris-veil); background: #292a78;
}
.dark-card .icon-chip { transition: transform .35s cubic-bezier(.16,1,.3,1); }
.dark-card:hover .icon-chip { transform: scale(1.08); }
.icon-chip {
  width: 40px; height: 40px; border-radius: var(--radius-icons); display: flex; align-items: center;
  justify-content: center; background: rgba(177, 166, 246, .12); color: var(--color-lilac-mist);
  margin-bottom: var(--spacing-16);
}
.icon-chip svg { width: 20px; height: 20px; }
.dark-card h3 { font-size: 18px; letter-spacing: -0.02em; color: var(--color-cloud-white); }
.dark-card p { margin-top: var(--spacing-8); font-size: var(--text-body-sm); color: var(--color-ash); line-height: 1.44; }

/* ── Checklist (Why Choose Us) ──────────────────────────── */
.checklist { display: grid; gap: var(--spacing-16); }
.checklist li { display: flex; align-items: center; gap: var(--spacing-12); font-size: 17px; color: var(--color-cloud-white); }
.check-pill {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: rgba(0,255,170,.14); color: var(--color-mint-vital);
}
.check-pill svg { width: 13px; height: 13px; }
.check-pill--off { background: rgba(148,148,169,.14); color: var(--color-fog); }
.checklist li.is-off { color: var(--color-fog); }
.section--pearl .checklist li { color: var(--color-deep-iris); }
.section--pearl .checklist li.is-off { color: #8a8a9e; }

/* ── Pill tags (country network list) ───────────────────── */
.tag-row { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-24); }
.tag {
  font-size: var(--text-body-sm); color: var(--color-lilac-mist); background: rgba(177,166,246,.08);
  border: 1px solid var(--color-iris-border); border-radius: var(--radius-tags);
  padding: 6px var(--spacing-16); transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tag:hover { background: rgba(177,166,246,.16); color: var(--color-cloud-white); border-color: var(--color-iris-veil); }
.section--pearl .tag { color: var(--color-iris-pulse); background: rgba(83,80,204,.06); border-color: var(--color-ash); }
.section--pearl .tag:hover { background: rgba(83,80,204,.12); color: var(--color-deep-iris); border-color: var(--color-iris-pulse); }

/* ── Plan comparison cards (Our Plans page) ─────────────── */
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-16); margin-top: var(--spacing-40); align-items: start; }
@media (max-width: 1100px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card {
  display: flex; flex-direction: column;
  background: transparent; border-color: rgba(255,255,255,.14);
}
.plan-card:hover { transform: none; background: transparent; border-color: rgba(255,255,255,.14); }
.plan-card .industry-photo-frame { aspect-ratio: 16 / 9; }
.plan-card h3 { font-size: 20px; color: var(--color-cloud-white); }
.plan-card .plan-tagline { margin-top: var(--spacing-8); font-size: var(--text-body-sm); color: var(--color-ash); line-height: 1.44; min-height: 40px; }
.plan-price { margin-top: var(--spacing-16); display: flex; align-items: baseline; gap: 6px; }
.plan-price .amount { font-size: 32px; font-weight: var(--font-weight-semibold); color: var(--color-clinical-cyan); letter-spacing: -0.02em; }
.plan-price .unit { font-size: var(--text-body-sm); color: var(--color-ash); }
.plan-card .checklist { margin-top: var(--spacing-20); gap: var(--spacing-12); flex: 1; }
.plan-card .checklist li { font-size: var(--text-body-sm); align-items: flex-start; line-height: 1.35; }
.plan-card .checklist .check-pill { margin-top: 2px; }
.plan-card .pill-btn { margin-top: var(--spacing-24); justify-content: center; }

/* ── Industries — dark cards with line icons (no photography, per system rule) ── */
.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-16); }
@media (max-width: 1100px) { .industry-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industry-grid { grid-template-columns: 1fr; } }
.industry-card .icon-chip { background: rgba(0,177,255,.12); color: var(--color-clinical-cyan); }
.industry-card { position: relative; overflow: hidden; }
.industry-card .industry-photo-frame {
  width: calc(100% + var(--card-padding) * 2);
  margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) var(--spacing-16);
  aspect-ratio: 16 / 10; overflow: hidden; display: block;
}
.industry-card .industry-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.industry-card h3 { font-size: 18px; color: var(--color-cloud-white); }
.industry-card p { margin-top: var(--spacing-8); font-size: var(--text-body-sm); color: var(--color-ash); line-height: 1.44; }

/* ── Our Plans teaser (homepage) — transparent cards on the pearl section ── */
#plans .industry-card {
  background: transparent; border-color: rgba(83,80,204,.16);
}
#plans .industry-card:hover { transform: none; background: transparent; border-color: rgba(83,80,204,.16); }
#plans .industry-card h3 { color: var(--color-deep-iris); }
#plans .industry-card p { color: var(--color-deep-iris); }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid var(--color-iris-border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16);
  padding-block: var(--spacing-20); cursor: pointer; list-style: none; font-size: 17px;
  font-weight: var(--font-weight-semibold); color: var(--color-cloud-white);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-icon { flex: none; width: 18px; height: 18px; position: relative; }
.faq-item summary .faq-icon::before, .faq-item summary .faq-icon::after {
  content: ''; position: absolute; background: var(--color-clinical-cyan); border-radius: 2px;
}
.faq-item summary .faq-icon::before { width: 12px; height: 2px; top: 8px; left: 3px; }
.faq-item summary .faq-icon::after {
  width: 2px; height: 12px; top: 3px; left: 8px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.faq-item[open] summary .faq-icon::after { transform: rotate(90deg); opacity: 0; }
.faq-item p { animation: faq-open .35s cubic-bezier(.16,1,.3,1); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq-item p { padding-bottom: var(--spacing-20); color: var(--color-ash); font-size: var(--text-body-sm); line-height: 1.44; max-width: 60ch; }

.section--pearl .faq-item { border-bottom-color: var(--color-ash); }
.section--pearl .faq-item summary { color: var(--color-deep-iris); }
.section--pearl .faq-item summary .faq-icon::before,
.section--pearl .faq-item summary .faq-icon::after { background: var(--color-iris-pulse); }
.section--pearl .faq-item p { color: #4b4b63; }

/* ── Stats (highlighted metric cards, full band) ────────── */
.stats-band { background: var(--color-iris-glow); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-16); }
@media (max-width: 760px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-value { font-size: clamp(32px, 5vw, 54px); font-weight: var(--font-weight-semibold); color: var(--color-clinical-cyan); letter-spacing: -0.03em; }
.stat-label { margin-top: var(--spacing-8); font-size: var(--text-body-sm); color: var(--color-cloud-white); }

/* ── Process (pearl light section, hard cut) ────────────── */
.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--spacing-16); margin-top: var(--spacing-40); }
@media (max-width: 980px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }
.process-step {
  background: var(--color-cloud-white); border: 1px solid var(--color-ash); border-radius: var(--radius-cards);
  padding: var(--card-padding);
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.process-step:hover {
  transform: translateY(-6px); box-shadow: 0 12px 32px rgba(22,22,92,.1); border-color: var(--color-iris-pulse);
}
.process-step h3 { font-size: 18px; color: var(--color-deep-iris); }
.process-step p { margin-top: var(--spacing-8); font-size: var(--text-body-sm); color: #5a5a72; line-height: 1.44; }

/* ── Contact (pearl, compliance-badge-style pair) ───────── */
.contact-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16); margin-bottom: var(--spacing-48); }
@media (max-width: 760px) { .contact-points { grid-template-columns: 1fr; } }
.contact-point {
  background: var(--color-cloud-white); border: 1px solid var(--color-ash); border-radius: var(--radius-icons);
  padding: var(--spacing-20); display: flex; gap: var(--spacing-12); align-items: flex-start;
}
.contact-point .icon-chip { background: rgba(83,80,204,.1); color: var(--color-iris-pulse); margin-bottom: 0; }
.contact-point .value { display: block; font-weight: var(--font-weight-semibold); color: var(--color-deep-iris); font-size: var(--text-body-sm); }
.contact-point .label { display: block; margin-top: 2px; font-size: var(--text-caption); color: #6b6b82; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-48); align-items: center; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card {
  background: var(--color-deep-iris); border-radius: var(--radius-cards-elevated); padding: var(--spacing-32);
}
.contact-card h3 { color: var(--color-cloud-white); font-size: 20px; }
.contact-card p { margin-top: var(--spacing-12); color: var(--color-ash); font-size: var(--text-body-sm); line-height: 1.44; }
.contact-card .pill-btn { margin-top: var(--spacing-20); }

/* ── Section divider ─────────────────────────────────────── */
.divider-cut { height: 0; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background: var(--color-iris-glow); padding-block: var(--spacing-48); }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--spacing-32); }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: var(--spacing-12); font-size: 20px; font-weight: var(--font-weight-semibold); color: var(--color-cloud-white); }
.footer-icon { height: 36px; width: auto; }
.footer-tagline { margin-top: var(--spacing-12); font-size: var(--text-body-sm); color: var(--color-lilac-mist); max-width: 30ch; }
.footer-col h4 { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--color-lilac-mist); margin-bottom: var(--spacing-16); }
.footer-col ul { display: grid; gap: var(--spacing-12); }
.footer-col a { font-size: var(--text-body-sm); color: var(--color-cloud-white); }
.footer-bottom { margin-top: var(--spacing-40); padding-top: var(--spacing-24); border-top: 1px solid rgba(255,255,255,.14); display: flex; justify-content: space-between; font-size: var(--text-caption); color: var(--color-lilac-mist); }

/* ── Page transition curtain (matches impilo.health's own timing exactly:
   0.5s panel slide with a 200px→0 corner morph, power3.out in / power3.in out,
   logo slides the opposite direction, stroke draws in at delay .25s / .45s
   duration with power3.inOut) ─────────────────────────────────────────── */
:root { --pt-duration: .5s; }
.page-transition {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  pointer-events: none; opacity: 0; overflow: clip;
  background: color-mix(in srgb, var(--color-iris-pulse) 75%, white 25%);
  transform: translateY(100%); border-radius: 200px 200px 0 0;
}
/* Static covering state, set directly in the HTML so a fresh page load never
   flashes uncovered content — JS removes it and plays the reveal on load. */
.page-transition.is-covering { opacity: 1; transform: translateY(0); border-radius: 0; }
.page-transition.is-in {
  opacity: 1;
  animation: pt-panel-in var(--pt-duration) cubic-bezier(.215,.61,.355,1) forwards;
}
.page-transition.is-out {
  animation: pt-panel-out var(--pt-duration) cubic-bezier(.55,.055,.675,.19) forwards;
}
@keyframes pt-panel-in {
  from { transform: translateY(100%); border-radius: 200px 200px 0 0; }
  to   { transform: translateY(0);    border-radius: 0 0 0 0; }
}
@keyframes pt-panel-out {
  from { transform: translateY(0);    border-radius: 0 0 0 0; }
  to   { transform: translateY(100%); border-radius: 200px 200px 0 0; }
}
.page-transition-logo { width: 168px; height: auto; transform: translateY(-100%); }
.page-transition.is-in .page-transition-logo {
  animation: pt-logo-in var(--pt-duration) cubic-bezier(.215,.61,.355,1) forwards;
}
.page-transition.is-out .page-transition-logo {
  animation: pt-logo-out var(--pt-duration) cubic-bezier(.55,.055,.675,.19) forwards;
}
@keyframes pt-logo-in  { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes pt-logo-out { from { transform: translateY(0); } to { transform: translateY(-100%); } }
.page-transition-logo path {
  transition: stroke-dashoffset .45s cubic-bezier(.645,.045,.355,1) .25s;
}
@media (prefers-reduced-motion: reduce) {
  .page-transition, .page-transition-logo, .page-transition-logo path { animation: none !important; transition: none !important; }
}

/* ── Utulivu-specific additions: wide hero photo, photo-wash section,
   numbered feature cards, partner-logo row ─────────────────────────── */
.hero-photo-wide {
  position: relative; width: 100%; margin-top: var(--spacing-40);
  overflow: hidden;
}
.hero-photo-wide img { width: 100%; height: auto; aspect-ratio: 1600 / 525; object-fit: cover; display: block; }
.hero-photo-wide::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(22,22,92,.94) 0%, rgba(22,22,92,.78) 48%, rgba(22,22,92,.4) 100%);
}
.hero-photo-stats {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16);
  padding: var(--spacing-24); margin-top: -110px;
}
@media (max-width: 760px) { .hero-photo-stats { grid-template-columns: 1fr; margin-top: -140px; } }

.section--dark { background: var(--color-deep-iris); }
.section--photo { position: relative; overflow: hidden; }
.section--photo .container { position: relative; z-index: 1; }
.evac-photo {
  background: linear-gradient(160deg, rgba(22,22,92,.93) 0%, rgba(35,34,105,.88) 55%, rgba(64,60,213,.55) 130%),
              url('img/evacuation.webp') center 25% / cover;
}
.hospital-photo {
  background: linear-gradient(100deg, rgba(22,22,92,.94) 0%, rgba(22,22,92,.75) 45%, rgba(22,22,92,.35) 100%),
              url('img/core-hospital.webp') center / cover;
}
.hospital-photo .dark-card {
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border-color: rgba(255,255,255,.28);
}
.hospital-photo .dark-card:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.38); }
.about-hero-photo {
  background: linear-gradient(100deg, rgba(22,22,92,.94) 0%, rgba(22,22,92,.78) 48%, rgba(22,22,92,.4) 100%),
              url('img/about-hero.webp') center 5% / cover;
  padding-block: var(--spacing-48) !important;
  min-height: 560px; display: flex; align-items: center;
}
@media (max-width: 760px) { .about-hero-photo { min-height: 480px; background-position: 60% 5%; } }

.plans-hero-photo {
  background: linear-gradient(100deg, rgba(22,22,92,.94) 0%, rgba(22,22,92,.78) 48%, rgba(22,22,92,.4) 100%),
              url('img/plans-hero.webp') 72% 30% / cover;
  padding-block: var(--spacing-48) !important;
  min-height: 560px; display: flex; align-items: center;
}
@media (max-width: 760px) { .plans-hero-photo { min-height: 480px; background-position: 75% 25%; } }

.contact-hero-photo {
  background: linear-gradient(100deg, rgba(22,22,92,.94) 0%, rgba(22,22,92,.7) 48%, rgba(22,22,92,.3) 100%),
              url('img/contact-hero.webp') 55% 55% / cover;
  padding-block: var(--spacing-48) !important;
  min-height: 560px; display: flex; align-items: center;
}
@media (max-width: 760px) { .contact-hero-photo { min-height: 480px; background-position: 60% 55%; } }

.numbered-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-16); margin-top: var(--spacing-40); }
@media (max-width: 900px) { .numbered-grid { grid-template-columns: 1fr; } }
.numbered-card {
  background: rgba(255,255,255,.05); border: 1px solid var(--color-iris-border); border-radius: var(--radius-cards);
  padding: var(--card-padding);
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, background-color .35s ease;
}
.numbered-card:hover { transform: translateY(-6px); border-color: var(--color-iris-veil); background: rgba(255,255,255,.09); }
.numbered-index { font-family: var(--f-mono, monospace); font-size: var(--text-caption); color: var(--color-clinical-cyan); }
.numbered-card h3 { margin-top: var(--spacing-8); font-size: 18px; color: var(--color-cloud-white); }
.numbered-card p { margin-top: var(--spacing-8); font-size: var(--text-body-sm); color: var(--color-ash); line-height: 1.44; }

.partners-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--spacing-40); margin-top: var(--spacing-32);
}
.partners-row img { height: 34px; width: auto; filter: grayscale(1); opacity: .55; transition: opacity .3s ease, filter .3s ease; }
.partners-row img:hover { filter: grayscale(0); opacity: 1; }

/* ── Back to top ─────────────────────────────────────────── */
.back-to-top {
  position: fixed; right: var(--spacing-24); bottom: var(--spacing-24); z-index: 500;
  width: 48px; height: 48px; border-radius: var(--radius-full); border: none; cursor: pointer;
  display: grid; place-items: center;
  background: var(--color-iris-pulse); color: var(--color-cloud-white);
  box-shadow: 0 10px 28px rgba(83,80,204,.45);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1), background-color .25s ease, box-shadow .25s ease;
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover { background: var(--color-iris-veil); box-shadow: 0 14px 34px rgba(83,80,204,.6); transform: translateY(-3px) scale(1.05); }
.back-to-top:active { transform: translateY(0) scale(.96); }
.back-to-top svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity .2s ease; } }