/* ==========================================================================
   Excellia Private Hospital — public website (Persuade)
   Depends on tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Ribbon — the signature material.
   Lifted from the client's own poster furniture: a red-over-navy swoosh that
   closes every major band. It is the one authored moment on the page.
   -------------------------------------------------------------------------- */

.ribbon {
  display: block;
  width: 100%;
  height: clamp(28px, 3.6vw, 58px);
  margin: 0;
}
.ribbon svg { width: 100%; height: 100%; display: block; }
.ribbon--flip svg { transform: scaleY(-1); }

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--blue);
  --btn-fg: #fff;
  --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .8125rem 1.375rem;
  font: 600 .9375rem/1 var(--font-body);
  letter-spacing: .01em;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              color var(--dur-1) var(--ease-out);
}
.btn:hover  { transform: translateY(-1px); box-shadow: var(--lift-2); }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn .icon { width: 1.125rem; height: 1.125rem; stroke-width: 2; }

.btn--primary { --btn-bg: var(--blue); }
.btn--primary:hover { --btn-bg: var(--blue-700); }

.btn--danger  { --btn-bg: var(--red); }
.btn--danger:hover { --btn-bg: var(--red-700); }

.btn--ghost   { --btn-bg: transparent; --btn-fg: var(--navy-800); --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bg: var(--surface-sunk); --btn-bd: var(--ink-3); }

.btn--on-navy { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.4); }
.btn--on-navy:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: #fff; }

.btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }
.btn--sm { padding: .5rem .875rem; font-size: .8125rem; }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   3. Top bar + header
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--navy-800);
  color: var(--ink-2-on-navy);
  font: var(--t-xs);
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 2.75rem; flex-wrap: wrap;
}
.topbar__group { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.topbar__item  { display: inline-flex; align-items: center; gap: .45rem; }
.topbar__item .icon { width: 1rem; height: 1rem; stroke-width: 2; color: var(--ink-3-on-navy); }
.topbar__item strong { color: #fff; font-weight: 600; letter-spacing: .01em; }
.topbar a.topbar__item:hover strong { color: var(--blue-100); }

.topbar__emergency {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--red); color: #fff;
  padding: .4375rem .875rem; border-radius: var(--r-sm);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background var(--dur-1) var(--ease-out);
}
.topbar__emergency:hover { background: var(--red-700); }
.topbar__emergency .icon { width: .9375rem; height: .9375rem; stroke-width: 2.25; }

.masthead {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
.masthead[data-stuck="true"] { box-shadow: var(--lift-2); }

.masthead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 5rem;
}

/* The supplied logo is a complete lockup — the wordmark and "we care" strapline
   are part of the artwork. Setting the name in HTML beside it would print
   "EXCELLIA" twice, so the image carries the brand alone and the alt text
   supplies the name to screen readers. */
/* flex:none on the anchor as well as the image — the masthead is a flex row,
   and without it the brand shrinks to make room for the nav and the lockup is
   squashed narrower than its own aspect ratio. */
.brand { display: inline-flex; align-items: center; flex: none; }
.brand__logo {
  display: block; flex: none;
  height: 3.25rem; width: auto; max-width: none;
  aspect-ratio: 1017 / 336;
}

/* The artwork is supplied on white. On the navy footer it needs a deliberate
   white card rather than an accidental rectangle. */
.footer .brand__logo {
  height: 3rem; background: #fff;
  border-radius: var(--r-md); padding: .5rem .7rem;
}

.nav { display: flex; align-items: center; gap: var(--s-2); }
.nav__link {
  position: relative;
  padding: .625rem .625rem;
  font: 500 .9375rem/1 var(--font-body);
  color: var(--ink-2);
  white-space: nowrap;          /* "About Us" / "Health News" must never wrap */
  border-radius: var(--r-sm);
  transition: color var(--dur-1) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: .75rem; right: .75rem; bottom: .25rem;
  height: 2px; background: var(--red); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__link:hover { color: var(--navy-800); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--navy-800); font-weight: 600; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.masthead__actions { display: flex; align-items: center; gap: var(--s-3); }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: var(--surface-sunk); border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer; color: var(--navy-800);
}
.burger:hover { background: var(--surface-sunk-2); }
.burger__box { display: grid; gap: 4px; width: 18px; }
.burger__box span {
  height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) linear;
}
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   4. Sections + headings
   -------------------------------------------------------------------------- */

.band { padding-block: clamp(3.5rem, 6vw, 6rem); }
.band--sunk   { background: var(--surface-sunk); }
.band--navy   { background: var(--navy-800); color: #fff; }
.band--navy p { color: var(--ink-2-on-navy); }
.band--tight  { padding-block: clamp(2.5rem, 4vw, 4rem); }

.band-head { max-width: 46rem; margin-bottom: var(--s-7); }
.band-head--center { margin-inline: auto; text-align: center; }
.band-head--split {
  max-width: none; display: flex; align-items: flex-end;
  justify-content: space-between; gap: var(--s-6); flex-wrap: wrap;
}

/* The layout sheet pins these red section labels; they are part of the brief. */
.band-label {
  display: block; margin-bottom: var(--s-3);
  font: 600 .75rem/1 var(--font-body);
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--red);
}
.band--navy .band-label { color: #ff8f8a; }

.h1 { font: var(--t-h1); letter-spacing: var(--track-head); color: var(--navy-800); text-wrap: balance; }
.h2 { font: var(--t-h2); letter-spacing: var(--track-head); color: var(--navy-800); text-wrap: balance; }
.h3 { font: var(--t-h3); letter-spacing: -.015em; color: var(--navy-800); text-wrap: balance; }
.band--navy .h1, .band--navy .h2, .band--navy .h3 { color: #fff; }

.lede { font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); max-width: 68ch; margin-top: var(--s-4); }
.band--navy .lede { color: var(--ink-2-on-navy); }
.prose p { max-width: 70ch; color: var(--ink-2); }
.prose p + p { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero { position: relative; overflow: hidden; background: var(--navy-800); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(96deg, var(--navy-900) 0%, rgba(6,23,38,.94) 34%, rgba(6,23,38,.55) 58%, rgba(6,23,38,.2) 100%);
}
.hero__inner {
  position: relative;
  padding-block: clamp(4rem, 8vw, 8.5rem) clamp(4.5rem, 8vw, 8rem);
  max-width: 40rem;
}
.hero__title {
  font: var(--t-display); letter-spacing: var(--track-display);
  color: #fff; text-wrap: balance;
}
.hero__title em { font-style: italic; color: #ff6b63; font-weight: 700; }
.hero__lede {
  margin-top: var(--s-5); font-size: 1.125rem; line-height: 1.65;
  color: var(--ink-2-on-navy); max-width: 34rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: 1px solid var(--line-on-navy);
}
.hero__proof li {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 500 .875rem/1 var(--font-body); color: #fff;
}
.hero__proof .icon { width: 1.125rem; height: 1.125rem; color: var(--green); stroke-width: 2.5; }

.hero__ribbon { position: absolute; left: 0; right: 0; bottom: -1px; }

/* ---- Banner variant --------------------------------------------------------
   Used on the homepage, where the artwork is a photograph of the building with
   the wordmark and strapline already printed on it. The image is shown whole
   rather than cropped behind text, so nothing the client paid a designer for
   ends up hidden under an overlay. The copy block sits below it on navy. */
.hero--banner .hero__banner {
  background: var(--navy-900);
  /* width must be stated. With `width: auto` the aspect ratio resolves against
     the capped height instead of the container, and the banner stops short of
     the right edge. */
  width: 100%;
  aspect-ratio: 1080 / 613;
  /* Full-bleed on phones; on wide screens the facade would become a letterbox
     strip, so it is capped and centred instead. */
  max-height: min(78vh, 40rem);
  overflow: hidden;
}
.hero--banner .hero__banner img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}
.hero--banner .hero__inner {
  max-width: none;
  padding-block: clamp(2.5rem, 4vw, 4rem) clamp(4rem, 7vw, 6.5rem);
}
.hero--banner .hero__title { font: var(--t-h1); letter-spacing: var(--track-head); }
.hero--banner .hero__lede { max-width: 46rem; }

/* --------------------------------------------------------------------------
   6. Service rail — the six Excellia lines
   -------------------------------------------------------------------------- */

.rail { background: var(--surface); border-bottom: 1px solid var(--line); }
.rail__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.rail__item {
  position: relative;
  display: grid; gap: var(--s-3); justify-items: center; text-align: center;
  padding: var(--s-6) var(--s-3);
  transition: background var(--dur-2) var(--ease-out);
}
.rail__item + .rail__item { border-left: 1px solid var(--line); }
.rail__item:hover { background: var(--surface-sunk); }
.rail__badge {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: var(--tone, var(--red)); color: #fff;
  transition: transform var(--dur-2) var(--ease-out);
}
.rail__item:hover .rail__badge { transform: translateY(-3px) scale(1.04); }
.rail__badge .icon { width: 1.75rem; height: 1.75rem; }
.rail__name {
  font: 700 .9375rem/1.25 var(--font-display);
  letter-spacing: -.01em; color: var(--navy-800);
}
.rail__name span { display: block; font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; color: var(--ink-3); text-transform: uppercase; margin-bottom: .15rem; }
.rail__tag {
  font: 500 .6875rem/1.35 var(--font-body); letter-spacing: .045em;
  text-transform: uppercase; color: var(--ink-3);
}
.rail__item::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--tone, var(--red)); transform: scaleX(0);
  transition: transform var(--dur-2) var(--ease-out);
}
.rail__item:hover::after { transform: scaleX(1); }

.tone-red    { --tone: var(--red); }
.tone-navy   { --tone: var(--navy-800); }
.tone-blue   { --tone: var(--blue); }
.tone-green  { --tone: var(--green-700); }
.tone-purple { --tone: var(--purple); }

/* --------------------------------------------------------------------------
   7. Split feature (welcome / facilities)
   -------------------------------------------------------------------------- */

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--40-60 { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
.split--60-40 { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
.split--50-50 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.figure-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.figure-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--lift-2); background: var(--navy-800);
}
.figure-card img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2) linear;
}
.figure-card:hover img { transform: scale(1.05); }
.figure-card figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--s-5) var(--s-4) var(--s-4);
  background: linear-gradient(transparent, rgba(6,23,38,.92) 55%);
  color: #fff;
}
.figure-card figcaption b { display: block; font: 600 .9375rem/1.3 var(--font-display); }
.figure-card figcaption span { display: block; margin-top: .2rem; font-size: .75rem; color: var(--ink-2-on-navy); }

.checklist { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.checklist li { display: flex; align-items: flex-start; gap: .625rem; font-size: .9375rem; color: var(--ink-2); }
.checklist .icon { width: 1.25rem; height: 1.25rem; color: var(--blue); flex: none; margin-top: .1rem; stroke-width: 2.25; }
.band--navy .checklist li { color: var(--ink-2-on-navy); }
.band--navy .checklist .icon { color: var(--green); }

/* --------------------------------------------------------------------------
   8. Stats
   -------------------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
.stat { display: grid; gap: .375rem; justify-items: center; text-align: center; padding: var(--s-4) var(--s-2); }
.stat__icon {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: 50%; border: 1.5px solid var(--line-on-navy);
  color: #fff; margin-bottom: var(--s-2);
}
.stat__value {
  font: 700 clamp(2rem, 1.4rem + 2vw, 2.75rem)/1 var(--font-display);
  letter-spacing: var(--track-head); color: #fff;
}
.stat__label { font: 500 .8125rem/1.4 var(--font-body); color: var(--ink-2-on-navy); }

/* --------------------------------------------------------------------------
   9. Doctors
   -------------------------------------------------------------------------- */

.doctor-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }

.doctor {
  display: flex; flex-direction: column;   /* keeps footers aligned when a role wraps */
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background: var(--surface);
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.doctor__foot { margin-top: auto; }
.doctor:hover { border-color: var(--blue-100); transform: translateY(-3px); }
.doctor__photo { position: relative; background: var(--surface-sunk-2); }
.doctor__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 22%; }
.doctor__dept {
  position: absolute; left: var(--s-3); top: var(--s-3);
  padding: .25rem .5rem; border-radius: var(--r-sm);
  background: rgba(6,23,38,.82); color: #fff;
  font: 600 .625rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.doctor__body { padding: var(--s-4); display: grid; gap: .25rem; }
.doctor__name { font: 600 1.0625rem/1.3 var(--font-display); color: var(--navy-800); }
.doctor__role { font-size: .8125rem; color: var(--ink-3); }
.doctor__meta { display: flex; align-items: center; gap: .375rem; margin-top: var(--s-2);
  font-size: .75rem; color: var(--green-700); font-weight: 600; }
.doctor__meta .icon { width: .875rem; height: .875rem; stroke-width: 2.5; }
.doctor__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border-top: 1px solid var(--line); background: var(--surface-sunk);
}
.doctor__links { display: flex; gap: .375rem; }
.icon-btn {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-3); cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.icon-btn:hover { color: var(--blue); border-color: var(--blue-100); }
.icon-btn .icon { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   9b. Initials avatars
   Real, named practitioners must never carry a generated portrait. Initials
   stand in until Excellia supplies photography.
   -------------------------------------------------------------------------- */

.doctor__photo--initials{
  aspect-ratio:1/1; display:grid; place-items:center; position:relative;
  background:linear-gradient(148deg, var(--blue-700) 0%, var(--navy-800) 100%);
}
.doctor__initials{ font:700 2.5rem/1 var(--font-display); color:#fff; letter-spacing:.03em; }
.doctor__photo--initials.tone-red{ background:linear-gradient(148deg,var(--red-700) 0%,var(--navy-800) 100%); }
.doctor__photo--initials.tone-green{ background:linear-gradient(148deg,var(--green-700) 0%,var(--navy-800) 100%); }
.doctor__photo--initials.tone-purple{ background:linear-gradient(148deg,var(--purple-700) 0%,var(--navy-800) 100%); }
.photo-todo{
  position:absolute; left:50%; bottom:.75rem; transform:translateX(-50%);
  padding:.2rem .5rem; border-radius:var(--r-sm); background:rgba(255,255,255,.16);
  color:#fff; font:600 .625rem/1.4 var(--font-body); letter-spacing:.06em;
  text-transform:uppercase; white-space:nowrap; backdrop-filter:blur(4px);
}

/* The wider-team cards are styled in doctors.html's own <style> block, which is
   where they already lived. Defining them here as well would put two sources in
   the cascade for one component, and the page-local copy would win regardless. */

/* --------------------------------------------------------------------------
   10. Steps
   -------------------------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.step { display: grid; gap: var(--s-3); }
.step__icon {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: var(--r-md); background: rgba(255,255,255,.1); color: #fff;
}
.step__title { font: 600 1.0625rem/1.3 var(--font-display); color: #fff; }
.step__text  { font-size: .875rem; line-height: 1.6; color: var(--ink-2-on-navy); }

/* --------------------------------------------------------------------------
   11. News
   -------------------------------------------------------------------------- */

.news-list { display: grid; gap: var(--s-4); }
.news-item {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--s-4);
  align-items: center; padding: var(--s-3); border-radius: var(--r-lg);
  transition: background var(--dur-2) var(--ease-out);
}
.news-item:hover { background: var(--surface-sunk); }
.news-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.news-item h3 { font: 600 1rem/1.35 var(--font-display); color: var(--navy-800); }
.news-item time { display: block; margin-top: .3rem; font-size: .75rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   12. Partners
   -------------------------------------------------------------------------- */

.partners { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap; }
.partners img {
  height: 2.25rem; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .62;
  transition: filter var(--dur-2) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.partners a:hover img, .partners li:hover img { filter: none; opacity: 1; }

/* --------------------------------------------------------------------------
   13. Portal access cards
   -------------------------------------------------------------------------- */

.portal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.portal-card {
  display: grid; gap: var(--s-3); padding: var(--s-6) var(--s-5);
  background: var(--surface); border-radius: var(--r-lg);
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.portal-card:hover { transform: translateY(-4px); box-shadow: var(--lift-4); }
.portal-card__icon {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: var(--r-md); background: var(--tone); color: #fff;
}
.portal-card h3 { font: 600 1.125rem/1.3 var(--font-display); color: var(--navy-800); }
.portal-card p  { font-size: .875rem; line-height: 1.6; color: var(--ink-3); }
.portal-card .btn { margin-top: var(--s-2); --btn-bg: var(--tone); }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */

.form-card {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--lift-3); padding: clamp(1.5rem, 3vw, 2.25rem);
}
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.field { display: grid; gap: .4375rem; }
.field--full { grid-column: 1 / -1; }
.field > label {
  font: 600 .8125rem/1.3 var(--font-body); color: var(--navy-800);
}
.field > label .req { color: var(--red); margin-left: .15em; }
.input, .select, .textarea {
  width: 100%; padding: .75rem .875rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  font: 400 .9375rem/1.4 var(--font-body);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-100);
}
.textarea { resize: vertical; min-height: 6rem; }
.select {
  appearance: none; padding-right: 2.5rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.125rem;
}
.field__hint { font-size: .75rem; color: var(--ink-3); }
.field__error { display: none; font-size: .75rem; color: var(--red-700); font-weight: 500; }
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .select,
.field[data-invalid="true"] .textarea { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-100); }
.field[data-invalid="true"] .field__error { display: block; }

.form-note {
  display: flex; gap: .625rem; align-items: flex-start;
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--blue-50); border-radius: var(--r-md);
  font-size: .8125rem; line-height: 1.55; color: var(--ink-2);
}
.form-note .icon { width: 1.125rem; height: 1.125rem; color: var(--blue); flex: none; margin-top: .1rem; }

.form-status { display: none; margin-top: var(--s-4); padding: var(--s-4);
  border-radius: var(--r-md); font-size: .875rem; }
.form-status[data-state="ok"]   { display: flex; gap: .625rem; background: var(--green-100); color: var(--green-700); }
.form-status[data-state="err"]  { display: flex; gap: .625rem; background: var(--red-100);  color: var(--red-800); }
.form-status .icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* --------------------------------------------------------------------------
   15. Contact / info tiles
   -------------------------------------------------------------------------- */

.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.info-tile {
  display: grid; gap: var(--s-3); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.info-tile__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-md); background: var(--blue-50); color: var(--blue); }
.info-tile h3 { font: 600 1rem/1.3 var(--font-display); color: var(--navy-800); }
.info-tile p, .info-tile a { font-size: .9375rem; line-height: 1.6; color: var(--ink-2); }
.info-tile a:hover { color: var(--blue); }

.emergency-strip {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  padding: var(--s-5) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--red); color: #fff; border-radius: var(--r-lg);
}
.emergency-strip h2 { font: 700 1.5rem/1.2 var(--font-display); letter-spacing: var(--track-head); color: #fff; }
.emergency-strip p { color: #ffdedc; font-size: .9375rem; margin-top: .25rem; }
.emergency-strip .btn { --btn-bg: #fff; --btn-fg: var(--red-800); }
.emergency-strip .btn:hover { --btn-bg: #fff5f4; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--navy-900); color: var(--ink-2-on-navy); }
.footer__inner { padding-block: clamp(3rem, 5vw, 4.5rem) var(--s-6); }
.footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}
.footer__blurb { margin-top: var(--s-4); font-size: .875rem; line-height: 1.7; max-width: 30ch; }
.footer h3 {
  font: 600 .75rem/1 var(--font-body); letter-spacing: var(--track-label);
  text-transform: uppercase; color: #fff; margin-bottom: var(--s-4);
}
.footer__links { display: grid; gap: .625rem; }
.footer__links a { font-size: .875rem; color: var(--ink-2-on-navy);
  transition: color var(--dur-1) var(--ease-out); }
.footer__links a:hover { color: #fff; }
.footer__contact { display: grid; gap: var(--s-3); font-size: .875rem; }
.footer__contact li { display: flex; gap: .625rem; align-items: flex-start; }
.footer__contact .icon { width: 1.0625rem; height: 1.0625rem; color: var(--ink-3-on-navy); flex: none; margin-top: .15rem; }
.footer__contact a:hover { color: #fff; }
.footer__emergency {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  background: rgba(211,47,47,.16); border-radius: var(--r-md);
}
.footer__emergency span { display: block; font: 600 .6875rem/1 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase; color: #ff9d97; }
.footer__emergency a { display: block; margin-top: .3rem; font: 700 1.125rem/1 var(--font-display); color: #fff; }

.socials { display: flex; gap: .5rem; margin-top: var(--s-5); }
.socials a {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: #fff;
  transition: background var(--dur-1) var(--ease-out);
}
.socials a:hover { background: var(--blue); }
.socials .icon { width: 1.125rem; height: 1.125rem; }

.footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-8); padding-top: var(--s-5);
  border-top: 1px solid var(--line-on-navy); font-size: .8125rem;
}
.footer__bottom nav { display: flex; gap: var(--s-5); }
.footer__bottom a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   17. Placeholder flag — nothing fake ships silently
   -------------------------------------------------------------------------- */

[data-placeholder] {
  outline: 1px dashed var(--amber-600); outline-offset: 2px;
  background: var(--amber-100);
}
body:not(.show-placeholders) [data-placeholder] { outline: none; background: none; }

/* --------------------------------------------------------------------------
   18. Reveal — one grammar, exponential ease-out from a visible default
   -------------------------------------------------------------------------- */

.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); filter: blur(2px); }
  .js .reveal[data-shown="true"] {
    opacity: 1; transform: none; filter: none;
    transition: opacity var(--dur-4) var(--ease-out),
                transform var(--dur-4) var(--ease-out),
                filter var(--dur-3) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
}

/* --------------------------------------------------------------------------
   19. Responsive — tablet ≤1024, mobile ≤767
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .rail__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rail__item:nth-child(3n+1) { border-left: 0; }
  .rail__item:nth-child(n+4)  { border-top: 1px solid var(--line); }
  .doctor-grid, .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--40-60, .split--60-40, .split--50-50 { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav, .masthead__actions .btn { display: none; }
  .burger { display: inline-flex; }
  .nav[data-open="true"] {
    position: fixed; inset: auto 0 0 0; top: var(--nav-top, 5rem);
    display: grid; gap: .25rem; align-content: start;
    padding: var(--s-4) var(--gutter) var(--s-8);
    background: var(--surface); border-top: 1px solid var(--line);
    overflow-y: auto; z-index: 89;
  }
  .nav[data-open="true"] .nav__link {
    padding: .875rem .75rem; font-size: 1rem; min-height: 44px;
    display: flex; align-items: center; border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav[data-open="true"] .nav__link::after { display: none; }
  .nav[data-open="true"] .nav__cta { display: flex; margin-top: var(--s-4); }
}

@media (max-width: 767px) {
  /* Tap targets. A phone number nobody can hit is a phone number nobody calls. */
  .topbar__item,
  .topbar__emergency { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__links a,
  .footer__contact a,
  .footer__bottom nav a,
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer__links { gap: 0; }
  .footer__emergency a,
  .info-tile a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Inline links inside a running sentence stay inline: WCAG 2.5.8 exempts them,
     and padding them to 44px would break the line box around them. */
  .socials a { width: 2.75rem; height: 2.75rem; }
  .icon-btn { width: 2.75rem; height: 2.75rem; }
  .btn { min-height: 44px; }
  .btn--sm { min-height: 40px; }

  .rail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail__item:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .rail__item:nth-child(2n) { border-left: 1px solid var(--line); }
  .rail__item:nth-child(-n+2) { border-top: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .doctor-grid, .portal-grid, .figure-trio, .info-grid { grid-template-columns: minmax(0, 1fr); }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .band-head--split { display: grid; }
  .topbar__group--left { display: none; }
  .topbar__inner { justify-content: center; }
  .hero__inner { padding-block: clamp(2.75rem, 9vw, 4rem) clamp(3.5rem, 10vw, 5rem); }
  .hero__actions .btn { flex: 1 1 100%; }
  .news-item { grid-template-columns: 5rem minmax(0, 1fr); }
  .emergency-strip { flex-direction: column; align-items: flex-start; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}