/* ─────────────────────────────────────────────────────────────
   Everything outside the film: navigation, and the plain institutional
   sections that follow it (ventures, contact, footer).
   ───────────────────────────────────────────────────────────── */

/* ── Navigation ─────────────────────────────────────────────── */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(10, 9, 8, 0.85) 0%, rgba(10, 9, 8, 0) 100%);
}

.nav { transition: background-color 0.3s linear, box-shadow 0.3s linear; }
.nav.is-solid {
  background: rgba(10, 9, 8, 0.96);
  box-shadow: 0 1px 0 var(--hairline);
}

.nav__brand {
  font: 800 0.8125rem/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.4vw, 2.25rem);
  font: 500 0.6875rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary);
}
.nav__links a { padding-block: 0.6rem; transition: color 0.3s linear; }
.nav__links a:hover { color: var(--fg); }
.nav__links .nav__login { color: var(--accent); }
.nav__links .nav__login:hover { color: var(--accent-hover); }

/* Small phones: the page is one linear ascent, so only Contact and Login stay in the bar. */
@media (max-width: 639px) {
  .nav__links a[href="#ventures"],
  .nav__links a[href="#model"] { display: none; }
}
@media (max-width: 379px) {
  .nav__brand { font-size: 0.6875rem; letter-spacing: 0.14em; }
  .nav__links { font-size: 0.625rem; letter-spacing: 0.1em; gap: 0.75rem; }
}

/* ── Sections after the film ────────────────────────────────────
   Opaque, so they rise over the final frame and the page becomes a
   conventional document.                                           */

main { position: relative; z-index: 2; }

.section {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: clamp(4.5rem, 12vh, 9rem) var(--gutter);
  border-top: 1px solid var(--hairline);
}
.section[id] { scroll-margin-top: 0; }

.section__head {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 56rem;
  margin-bottom: clamp(2.5rem, 7vh, 5rem);
}

/* ── Ventures ───────────────────────────────────────────────── */

.venture-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(1.5rem, 4vw, 4rem);
}
/* Three ventures: one row of three once there is room, otherwise a single column (no orphaned third). */
@media (min-width: 1000px) { .venture-list { grid-template-columns: repeat(3, 1fr); } }

.venture {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0 clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--line);
  min-width: 0;
}

.venture__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  color: var(--muted);
  font-size: 0.6875rem;
}

/* Longest title is SMARTMOBILISE (≈8.2em wide): 10cqi always fits its cell. */
.venture__title { font-size: min(10cqi, 3.5rem); line-height: 1; margin-top: 0.75rem; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--secondary);
  font-size: inherit;
}
.status::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  flex: none;
}
.status--live { color: var(--accent); }
.status--live::before { background: currentColor; }
.status--commissioning { color: var(--fg); }
.status--commissioning::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

/* ── Contact ────────────────────────────────────────────────── */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.05rem 1.5rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.8125rem;
  transition: background-color 0.3s linear, color 0.3s linear, border-color 0.3s linear;
}
.cta:hover,
.cta:focus-visible {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--bg);
}

.cta-address {
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 0.8125rem;
  color: var(--secondary);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.2rem;
  transition: color 0.3s linear, border-color 0.3s linear;
  overflow-wrap: anywhere;
}
.cta-address:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

/* Phones: the smallest labels go up a step so they stay readable. */
@media (max-width: 599px) {
  .footer { font-size: 0.6875rem; }
  .venture__meta { font-size: 0.75rem; }
}

/* ── Footer ─────────────────────────────────────────────────── */

.footer {
  position: relative;
  z-index: 2;
  background: var(--bg);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding: 1.5rem var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hairline);
  font-size: 0.625rem;
  color: var(--muted);
}
.footer a { color: var(--secondary); transition: color 0.3s linear; }
.footer a:hover { color: var(--accent-hover); }