/* ============================================================
   ndis.css — the handful of components this site needs that the
   shared site.css (built for the anti-gravity treadmill site) does
   not carry. Loaded AFTER site.css, so it inherits every token.

   🚨 TOKENS ONLY. No literal colours, fonts or spacing values that
   duplicate site.css — if a token changes there, this file has to
   follow, and the one that does not is the one nobody is looking at.
   ============================================================ */

/* Skip link. site.css has no rule for it, so a bare <a class="skip">
   renders as a visible stray link above the header on every page. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--navy-2); color: var(--ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  font-family: var(--font-display); font-size: 15px;
}
.skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* Hero copy column. Referenced by the shared hero-grid but never styled;
   without a min-width:0 a long unbroken word can force the grid wider
   than the viewport and give the whole page a sideways scroll. */
.hero-copy { min-width: 0; }

/* ---- Clinic cards (two clinics, on the contact and how-to-book pages) ---- */
.clinic-card {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-8);
}
.clinic-card h3 { font-size: 24px; }
.clinic-card address {
  font-style: normal; color: var(--ink-muted);
  margin-top: var(--sp-4); line-height: 1.7;
}
.clinic-card address a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.clinic-card address a:hover { color: var(--cyan); }
.clinic-card .clinic-note {
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--border); color: var(--ink-faint); font-size: 15px;
}
.clinic-card .hero-cta { margin-top: var(--sp-6); }

/* ---- Footer clinic blocks ---- */
.foot-clinic + .foot-clinic { margin-top: var(--sp-5); }
.foot-clinic h5 {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--ink); margin: 0 0 var(--sp-2);
}
.foot-clinic p { color: var(--ink-muted); font-size: 14px; line-height: 1.6; margin: 0; }
.foot-clinic a { color: inherit; }

/* ---- Team ---- */
.team-group + .team-group { margin-top: var(--sp-16); }
.team-group > h3 {
  font-size: clamp(22px, 3vw, 28px);
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border);
}
.team-group > .group-note { color: var(--ink-muted); margin-top: var(--sp-4); font-size: 16px; }
.team-card {
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-7, 28px);
}
.team-card h4 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0; }
.team-card .role { color: var(--cyan-soft); font-size: 15px; margin-top: var(--sp-2); }
.team-card .where {
  display: inline-block; margin-top: var(--sp-3);
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--ink-faint);
}
.team-card .cred {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  background: var(--glass-2); border-left: 2px solid var(--cyan);
  border-radius: var(--r-sm); color: var(--ink); font-size: 14px;
}
.team-card .bio { color: var(--ink-muted); margin-top: var(--sp-5); }

/* ---- Numbered steps (how it works) ---- */
.steps { counter-reset: step; margin-top: var(--sp-10); display: grid; gap: var(--sp-5); }
.step {
  position: relative; padding-left: var(--sp-16);
  background: var(--glass); border: 1px solid var(--border);
  border-radius: var(--r-md); padding-top: var(--sp-6);
  padding-bottom: var(--sp-6); padding-right: var(--sp-6);
}
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: var(--sp-6); top: var(--sp-6);
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  background: var(--accent-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.step h3 { font-size: 19px; }
.step p { color: var(--ink-muted); margin-top: var(--sp-2); }

/* ---- Funding-type cards, where one option is not available ---- */
.fund-card .verdict {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-full);
  margin-bottom: var(--sp-4);
}
.fund-card .verdict.yes { background: rgba(52,211,154,0.12); color: var(--green); }
.fund-card .verdict.no  { background: rgba(248,116,106,0.12); color: var(--red); }

/* ---- Contact page map/details split ---- */
.contact-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; } }