/* =============================================================
   PlusBIT Systems — Imagery & extra motion
   Real photography (Unsplash), brand-treated, plus the dynamic
   layers: hero photo + floating console, full-bleed parallax band,
   team collage, scroll progress, scrollspy.
   ============================================================= */

/* ---- Image frame primitive ---- */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--paper-2);
  border: 1px solid var(--line);
  isolation: isolate;
}
.media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease);
}
.media--zoom:hover img { transform: scale(1.05); }
.video-shot { aspect-ratio: 21 / 9; }
/* subtle brand veil so photos sit inside the palette */
.media__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 32, 28, 0) 45%, rgba(7, 32, 28, 0.10) 100%),
    radial-gradient(120% 80% at 100% 0%, rgba(11, 125, 110, 0.10), transparent 60%);
}

/* =============================================================
   Scroll progress bar (top) + scrollspy
   ============================================================= */
.scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 200;
  background: transparent; pointer-events: none;
}
.scroll-progress__bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--primary-bright));
  box-shadow: 0 0 12px rgba(25, 194, 164, 0.5);
}
.nav__link.is-active { color: var(--ink); }
.nav__link.is-active::after { transform: scaleX(1); }

/* =============================================================
   HERO — photo with the live console floating over its base
   ============================================================= */
.hero__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__media {
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 32, 28, 0) 50%, rgba(7, 32, 28, 0.22) 100%);
}
.hero__media-tag {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em;
  color: #fff; background: rgba(7, 32, 28, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 7px;
  padding: 0.3rem 0.6rem; backdrop-filter: blur(6px);
}
.hero__media-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }
.hero__visual .console {
  width: 92%;
  margin-top: -64px;
  position: relative; z-index: 3;
}

/* =============================================================
   FULL-BLEED parallax band
   ============================================================= */
.band {
  position: relative;
  min-height: clamp(380px, 54vh, 540px);
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.band__media { position: absolute; inset: -10% 0; z-index: 0; }
.band__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  will-change: transform;
}
.band__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7, 32, 28, 0.86), rgba(7, 32, 28, 0.9)),
    radial-gradient(70% 60% at 50% 30%, rgba(25, 194, 164, 0.14), transparent 70%);
}
.band__inner {
  position: relative; z-index: 2; text-align: center;
  max-width: 780px; padding: clamp(56px, 9vw, 100px) var(--gutter);
}
.band__title { color: #fff; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); }
.band__text { color: var(--on-deep-soft); margin-top: 1.1rem; font-size: var(--fz-lead); max-width: 60ch; margin-inline: auto; }
.band__row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 2.4rem;
  margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid var(--deep-line);
}
.band__metric { text-align: center; }
.band__metric b {
  display: block; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem); color: #fff; letter-spacing: -0.02em; line-height: 1;
}
.band__metric span { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; color: var(--on-deep-faint); text-transform: uppercase; }

/* =============================================================
   AI section — clinicians banner
   ============================================================= */
.ai-figure {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  aspect-ratio: 16 / 6;
  border-radius: var(--r-lg);
  border: 1px solid var(--deep-line);
  box-shadow: var(--shadow-deep);
}
.ai-figure .media__veil {
  background:
    linear-gradient(90deg, rgba(7, 32, 28, 0.55), transparent 45%),
    linear-gradient(180deg, transparent 55%, rgba(7, 32, 28, 0.35));
}
.ai-figure__cap {
  position: absolute; left: clamp(16px, 3vw, 30px); bottom: clamp(16px, 3vw, 26px); z-index: 2;
  max-width: 60%;
}
.ai-figure__cap b { display: block; color: #fff; font-family: var(--font-sans); font-weight: 600; font-size: var(--fz-small); }
.ai-figure__cap span { font-family: var(--font-mono); font-size: 0.66rem; color: var(--primary-bright); letter-spacing: 0.04em; }

/* =============================================================
   ABOUT — team collage (editorial offset columns)
   ============================================================= */
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.collage__col { display: grid; gap: 0.9rem; }
.collage__col--offset { margin-top: 2.4rem; }
.collage__item { aspect-ratio: 4 / 5; border-radius: var(--r); }
.collage__item--tall { aspect-ratio: 4 / 6; }

/* About: stats sit beneath the story copy */
.about__text .stats { margin-top: 1.9rem; }

/* Honeypot — kept off-screen (not display:none, so bots still fill it) */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
/* Contact form status colours */
.contact-form__status[data-kind="error"] { color: #ffb4a3; }
.contact-form__status[data-kind="success"] { color: var(--primary-bright); }
.contact-form__status[data-kind="pending"] { color: var(--on-deep-soft); }

/* =============================================================
   Responsive (imagery-specific)
   ============================================================= */
@media (max-width: 960px) {
  .hero__visual { max-width: 460px; margin-inline: auto; }
  .hero__media { aspect-ratio: 16 / 11; }
  .ai-figure { aspect-ratio: 16 / 8; }
}
@media (max-width: 560px) {
  .hero__media { aspect-ratio: 4 / 3; }
  .hero__visual .console { width: 100%; margin-top: -48px; }
  .ai-figure { aspect-ratio: 4 / 3; }
  .ai-figure__cap { max-width: 78%; }
  .band__row { gap: 0.8rem 1.6rem; }
  .collage__col--offset { margin-top: 0; }
}