:root {
  --accent: oklch(0.58 0.14 258);
  --ink: #17140F;
  --paper: #FBFAF7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--paper); }

img { max-width: 100%; }

/* ---------- Layout grids ---------- */

.grid-2,
.grid-2-tight,
.grid-footer { display: grid; }

.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-2-tight { grid-template-columns: 1fr 1fr; }
.grid-footer { grid-template-columns: 1.6fr 1fr 1fr; }

/* ---------- Interactive states ---------- */

.navlink { opacity: 0.72; transition: opacity 0.2s ease; }
.navlink:hover,
.navlink:focus-visible { opacity: 1; }

.btn-dark { transition: filter 0.2s ease; }
.btn-dark:hover,
.btn-dark:focus-visible { filter: brightness(1.25); }

.btn-light { transition: filter 0.2s ease; }
.btn-light:hover,
.btn-light:focus-visible { filter: brightness(0.92); }

.btn-ghost-light { transition: background 0.2s ease; }
.btn-ghost-light:hover,
.btn-ghost-light:focus-visible { background: rgba(251, 250, 247, 0.12); }

.btn-white { transition: filter 0.2s ease; }
.btn-white:hover,
.btn-white:focus-visible { filter: brightness(0.94); }

.btn-translucent { transition: background 0.2s ease; }
.btn-translucent:hover,
.btn-translucent:focus-visible { background: rgba(255, 255, 255, 0.26); }

.link-underline:hover,
.link-underline:focus-visible { text-decoration: underline; }

.flink { opacity: 0.8; transition: opacity 0.2s ease; }
.flink:hover,
.flink:focus-visible { opacity: 1; }

.flink-muted { transition: opacity 0.2s ease; }
.flink-muted:hover,
.flink-muted:focus-visible { opacity: 1; }

/* ---------- Form ---------- */

.field {
  font-family: inherit;
  font-size: 15px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(23, 20, 15, 0.16);
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 0.2s ease;
}
.field:focus { border-color: var(--ink); }
textarea.field { resize: vertical; }

.form-error {
  font-size: 14px;
  line-height: 1.5;
  color: #B3261E;
  margin: 0;
}

.is-hidden { display: none !important; }

button[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .grid-2,
  .grid-footer { grid-template-columns: 1fr; }

  .story-grid { gap: 40px !important; }
  .ecosystem-banner { aspect-ratio: 16 / 9 !important; }
  .team-grid { max-width: none !important; }
}

/* The 105deg hero gradient only dims the right edge to 0.28, which leaves
   headline text sitting on bare photo once the column is narrow. */
@media (max-width: 860px) {
  .hero-overlay {
    background: linear-gradient(165deg, rgba(23, 20, 15, 0.94) 0%, rgba(23, 20, 15, 0.82) 55%, rgba(23, 20, 15, 0.6) 100%) !important;
  }
}

@media (max-width: 640px) {
  .grid-2-tight { grid-template-columns: 1fr; }

  .nav {
    flex-wrap: wrap;
    gap: 12px !important;
    padding: 14px 20px !important;
  }
  .nav-links {
    width: 100%;
    flex-wrap: wrap;
    gap: 16px !important;
    font-size: 14px !important;
  }

  .section { padding-left: 20px !important; padding-right: 20px !important; }
  .hero-inner { padding-left: 20px !important; padding-right: 20px !important; }
  .ecosystem-banner { aspect-ratio: 4 / 3 !important; }
  .footer-grid { gap: 32px !important; }
}