/* ============================================================
   Navisurg Vision — landing page

   Implements the Claude Design component LandingPage.dc.html. The design
   carries its layout in inline styles on anonymous divs; here the same
   values live in classes. Sizes, colours and spacing are the design's —
   the additions are the responsive rules (the design is drawn at one
   desktop width) and the animated hero field (see js/bg-scene.js).
   ============================================================ */

:root {
  /* The design's section rhythm. 88px sits between --space-20 and
     --space-24, so it is not a token; it is the value the page was drawn at. */
  --pad-band: 88px;
  --head-height: 59px;
}

.wrap {
  max-width: var(--width-container);
  margin: 0 auto;
  padding: 0 var(--pad-gutter);
}

/* Sections are jump targets and the header is sticky, so anchored scrolls
   have to clear it. */
[id] { scroll-margin-top: calc(var(--head-height) + var(--space-6)); }

.band {
  border-top: var(--border-hairline-rule);
}

.band__head {
  max-width: 60ch;
  margin-bottom: var(--space-12);
}
.band__head .nsv-eyebrow { margin-bottom: var(--space-4); }
.band__head p {
  font: var(--type-body-lg);
  color: var(--text-body);
}

.band__title {
  font: var(--type-h1);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
}
.band__title + p { margin-top: var(--space-4); }

/* ============================================================
   Header
   ============================================================ */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-4) var(--pad-gutter);
  border-bottom: var(--border-hairline-rule);
  background: rgba(21, 21, 21, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-head__home { border: 0; display: block; }
.site-head__logo { height: 26px; width: auto; }

.site-head__nav {
  display: flex;
  gap: var(--space-6);
  margin-left: auto;
}

.site-head__link {
  border: 0;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}
.site-head__link:hover { color: var(--text-strong); }

/* .nsv-btn's own `border: 1px solid transparent` already beats the base
   `a { border-bottom: ... }`, so anchor buttons need no reset here. */

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
  border-bottom: var(--border-hairline-rule);
}

/* The dot field. Sized to the hero rather than the viewport: the scene's
   ground plane puts its activity just under the horizon, which lands behind
   the headline here and would fall below the fold at full height. */
#bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 720px;
  padding-top: 112px;
  padding-bottom: 120px;
}

.hero__copy { max-width: 62ch; }

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-extralight);
  font-size: clamp(40px, 6.4vw, 76px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: var(--space-5) 0 var(--space-6);
}

.hero__lede {
  font: var(--type-body-lg);
  color: var(--text-body);
  max-width: 48ch;
  margin: 0 0 var(--space-8);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* ============================================================
   "The one screen" — three steps
   ============================================================ */
/* The design gives this block `padding: 0 24px 88px` — no top padding at all,
   which butts the eyebrow straight against the hero's bottom border. Matched
   to the 88px every other section uses. */
.steps {
  padding-top: var(--pad-band);
  padding-bottom: var(--pad-band);
}
.steps .band__head { margin-bottom: var(--space-10); }

.steps__grid,
.tech__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.step__num {
  font: var(--type-mono);
  color: var(--text-muted);
}

.step__title {
  font: var(--type-h3);
  color: var(--text-strong);
  margin: 0;
}

.step__text {
  font: var(--type-body);
  color: var(--text-body);
  margin: 0;
}

/* ============================================================
   Facts strip
   ============================================================ */
.facts {
  border-top: var(--border-hairline-rule);
  border-bottom: var(--border-hairline-rule);
}

.facts__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.fact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.fact__value {
  font: var(--type-body);
  color: var(--text-heading);
}

/* ============================================================
   Scene bands

   Two full-bleed theatre photographs, placed at the two points where the
   page changes argument: entering "why now", and entering the ask. They
   dissolve into the operating dark at the top edge rather than sitting on
   it as a rectangle — the same scrim device the hero canvas uses on its
   horizon — so a photograph reads as part of the dark, not pasted onto it.

   Deliberately NOT in the Technology section: a photograph placed among the
   claims about what the software does would be read as the software's output.
   These two carry no caption and no claim; both are illustrative, neither
   shows Navisurg's software.
   ============================================================ */
.scene {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
}

.scene__img {
  display: block;
  width: 100%;
  height: clamp(240px, 30vw, 460px);
  object-fit: cover;
}

/* The subject sits right of frame in one and left in the other. These keep
   both the surgeon and the monitor in shot as the band crops.

   The endoscope frame is anchored near the top because the surgeon's head sits
   within a few per cent of the source's top edge: at 44% the band cut across
   his eyes, which is the one part of a masked face that carries anything. The
   gloves and the scope go instead — the band is far wider than it is tall, and
   at these proportions the head and the hands cannot both survive the crop. */
.scene--endoscope .scene__img { object-position: 66% 16%; }
.scene--dot-field .scene__img { object-position: 34% 38%; }

.scene::before,
.scene--sink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 30%;
  pointer-events: none;
}
/* Same three-stop falloff as the hero canvas scrim: opaque at the very
   edge, then away quickly, so the seam disappears without the gradient
   sitting as a grey veil over the subject's head. */
.scene::before {
  top: 0;
  background: linear-gradient(to bottom,
    rgba(21, 21, 21, 1) 0%,
    rgba(21, 21, 21, .45) 35%,
    rgba(21, 21, 21, 0) 100%);
}
/* Only for a band sitting between two dark sections. The band before the
   warm-light section keeps a hard bottom edge — that cut is the hinge. */
.scene--sink::after {
  bottom: 0;
  background: linear-gradient(to top,
    rgba(21, 21, 21, 1) 0%,
    rgba(21, 21, 21, .45) 35%,
    rgba(21, 21, 21, 0) 100%);
}

/* ============================================================
   Why now / Company — sticky intro beside a numbered list
   ============================================================ */
.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-16);
  align-items: start;
  padding-top: var(--pad-band);
  padding-bottom: var(--pad-band);
}

.split__intro {
  position: sticky;
  top: calc(var(--head-height) + var(--space-10));
}
.split__intro .nsv-eyebrow { margin-bottom: var(--space-4); }
.split__intro .band__title + p {
  max-width: 40ch;
  font: var(--type-body-lg);
  color: var(--text-body);
}

.reasons { display: flex; flex-direction: column; }

.reason {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-6);
  padding: var(--space-6) 0;
  border-top: var(--border-hairline-rule);
}
/* last-of-type, not last-child: the proof point sits inside .reasons as an
   <aside>, so the third <article> is still the row that closes the rule stack. */
.reason:last-of-type { border-bottom: var(--border-hairline-rule); }

.reason__num {
  font: var(--type-mono);
  color: var(--text-muted);
  padding-top: var(--space-1);
}

/* The proof point is an example of the thesis, not a fourth force — carded off
   the rule stack rather than ruled into it, so it does not read as reason 04. */
.proof { margin-top: var(--space-8); }
.proof .nsv-eyebrow { margin-bottom: var(--space-3); }

.reason__title,
.proof__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--text-strong);
  margin: 0 0 10px;
}

.reason__text,
.proof__text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
  max-width: 56ch;
}

/* ============================================================
   Technology
   ============================================================ */
.tech { padding-top: var(--pad-band); padding-bottom: var(--pad-band); }

.tech__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tech__card p {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-heading);
  margin: 0;
}

/* A single column since the overlay-loop panel that sat beside it is not in
   the first release. Capped rather than full-bleed: the rules below keep the
   measure they were drawn at instead of running the width of the band. */
.tech__detail {
  max-width: 600px;
  padding-top: var(--space-8);
}
.tech__detail .nsv-eyebrow { margin-bottom: var(--space-5); }

.principles { display: flex; flex-direction: column; }

.principle {
  padding: var(--space-4) 0;
  border-top: var(--border-hairline-rule);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-body);
}
.principle:last-child { border-bottom: var(--border-hairline-rule); }
.principle strong { color: var(--text-strong); font-weight: var(--weight-medium); }

/* ============================================================
   Collaboration — the one warm-light section
   ============================================================ */
.collab {
  background: var(--surface-canvas);
  color: var(--text-body);
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}
.collab .band__head { margin-bottom: var(--space-14); }

.collab__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-grid);
  margin-bottom: var(--space-10);
}

/* Transparent, not --surface-card: on warm light these two sit directly on
   the section colour and only the hairline separates them. */
.collab__card { padding: var(--space-6); background: transparent; }
.collab__card .nsv-eyebrow { margin-bottom: var(--space-4); }

.terms {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-body);
}
.terms strong { color: var(--text-strong); font-weight: var(--weight-medium); }

.enquiry {
  padding: var(--space-6);
  background: var(--surface-raised);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-10);
  align-items: start;
}

.enquiry__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--text-strong);
  margin: 0 0 10px;
}

.enquiry__lede {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-body);
  margin: 0 0 var(--space-4);
}

.enquiry__contact {
  display: block;
  font: var(--type-mono);
  line-height: var(--leading-loose);
  color: var(--text-muted);
}
.enquiry__contact a { color: inherit; }
.enquiry__contact a:hover { color: var(--accent); }

.enquiry__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.enquiry__form > .enquiry__wide { grid-column: 1 / -1; }
.enquiry__submit { grid-column: 1 / -1; justify-self: start; }

/* Honeypot. Not display:none — some bots skip what a browser would not render,
   and a real visitor never reaches it either way: off-screen, out of the tab
   order, and aria-hidden in the markup. */
.enquiry__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Sending is the one thing on this page a visitor is waiting on, so the result
   is stated in the form rather than announced only to assistive tech. */
.enquiry__status {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-strong);
}
.enquiry__status--error { color: var(--accent-press); }

/* Visible only to screen readers: the design labels the fields by
   placeholder alone, which leaves a form with no accessible names. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   Company
   ============================================================ */
.company { padding-bottom: var(--pad-band); }
.company .split { padding-bottom: var(--space-14); }

.lineage { display: flex; flex-direction: column; }

.lineage__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-6);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-top: var(--border-hairline-rule);
}
.lineage__row:last-child { border-bottom: var(--border-hairline-rule); }

.lineage__name { font: var(--type-mono); color: var(--text-heading); }
.lineage__text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-body);
}

.company__group > .nsv-eyebrow { margin-bottom: var(--space-5); }
.company__group + .company__group { margin-top: var(--space-12); }
.company__group + .registry { margin-top: var(--space-12); }

.team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-grid);
  margin: 0;
  list-style: none;
  padding: 0;
}

.person {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--space-5);
  align-items: start;
}

.person__photo {
  width: 88px;
  height: 88px;
  border: var(--border-width) solid var(--border-hairline);
  border-radius: var(--radius-card);
  object-fit: cover;
}

/* Board and advisers use the same card as the operating team, one step
   down — the size the team cards were before this. */
.person--board { grid-template-columns: 72px 1fr; }
.person--board .person__photo { width: 72px; height: 72px; }

/* No portrait on file yet. Same footprint, so the row does not reflow when
   one arrives. */
.person__photo--pending {
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-500);
}

/* Fills the empty cell beside a short list, and says something true rather
   than leaving a hole. */
.roster-note {
  align-self: center;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 40ch;
}

.person__name {
  font: var(--type-h3);
  color: var(--text-strong);
  margin: 0 0 var(--space-1);
}
.person__role { margin-bottom: var(--space-3); }
.person__bio {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}

.registry {
  display: grid;
  /* Three across so the two addresses share the second row side by side. */
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.registry__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.registry__value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-heading);
}

/* ============================================================
   Contact
   ============================================================ */
.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--pad-band) 0;
  border-top: var(--border-hairline-rule);
}

.contact__title {
  font-family: var(--font-display);
  font-weight: var(--weight-extralight);
  font-size: clamp(36px, 5vw, 56px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0;
  max-width: 24ch;
}

.contact__lede {
  font: var(--type-body-lg);
  color: var(--text-body);
  margin: 0;
  max-width: 48ch;
}

.contact__email {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-heading);
}

/* ============================================================
   Footer
   ============================================================ */
.site-foot {
  border-top: var(--border-hairline-rule);
  padding: var(--space-10) var(--pad-gutter) var(--space-14);
}

.site-foot__inner {
  max-width: var(--width-container);
  margin: 0 auto;
  display: flex;
  gap: var(--space-16);
  align-items: flex-start;
  flex-wrap: wrap;
}

.site-foot__logo { height: 34px; width: auto; }

.site-foot__legal {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-end;
  text-align: right;
}

.site-foot__notice {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-body);
  max-width: 52ch;
}

.site-foot__entity {
  font: var(--type-mono);
  color: var(--ink-500);
}

/* ============================================================
   Responsive
   The design is drawn at one desktop width; below it the two- and
   three-column grids collapse in the order they stop being readable.
   ============================================================ */
@media (max-width: 1040px) {
  .split,
  .enquiry {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .split__intro { position: static; }
  .collab__pair { grid-template-columns: 1fr; }
  .hero__inner { min-height: 600px; padding-top: 88px; padding-bottom: 96px; }
}

@media (max-width: 860px) {
  .site-head__nav { display: none; }
  .site-head { gap: var(--space-4); }
  .site-head__cta { margin-left: auto; }

  .steps__grid,
  .tech__grid,
  .team {
    grid-template-columns: 1fr;
  }
  .facts__grid,
  .registry { grid-template-columns: repeat(2, 1fr); }
  /* Two across would strand Founded between the addresses; send it last so
     the office/registered pair stays side by side on one row. */
  .registry__item--founded { order: 1; }
}

@media (max-width: 560px) {
  :root { --pad-band: 64px; }

  .hero__inner { min-height: 520px; padding-top: 72px; padding-bottom: 72px; }
  /* The primary label is a full sentence; let it wrap rather than overflow. */
  .hero__actions .nsv-btn {
    width: 100%;
    white-space: normal;
    height: auto;
    min-height: 44px;
    padding: var(--space-3) var(--space-6);
  }

  .facts__grid,
  .registry { grid-template-columns: 1fr; }

  .reason { grid-template-columns: 1fr; gap: var(--space-2); }
  .lineage__row { grid-template-columns: 1fr; gap: var(--space-2); }

  .enquiry__form { grid-template-columns: 1fr; }
  .enquiry__submit { justify-self: stretch; }

  .site-foot__inner { gap: var(--space-8); }
  .site-foot__legal { margin-left: 0; align-items: flex-start; text-align: left; }
}