@import url('fonts.css');

:root {
  --ink: #0d0d0f;
  --paper: #ffffff;
  --muted: #5d6066;
  --rule: #d8dade;
  --rule-dark: #34363b;
  --measure: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- display type ---------- */

.display {
  font-family: Archivo, Inter, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin: 0;
}

.rule {
  width: 46px;
  height: 3px;
  background: var(--ink);
  border: 0;
  margin: 26px 0 0;
}

.gap .rule { background: #fff; }

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* ---------- lockup ---------- */
/* set as live text, not an image: upright, in the site's own grotesk */

.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}

.lockup-mark {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: var(--mark, 46px);
  letter-spacing: -0.01em;
  line-height: 1;
  /* the eta carries a larger left side bearing than the E below it, so nudge
     the mark out to put the two stems on the same optical edge */
  margin-left: -0.045em;
}

.lockup-mark sup {
  font-size: 0.56em;
  font-weight: 400;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.03em;
}

.lockup-word {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: calc(var(--mark, 46px) * 0.195);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 0.78em;
}

.num {
  font-family: Archivo, sans-serif;
  font-weight: 400;
  font-size: 26px;
  color: #a7abb2;
  letter-spacing: 0.02em;
  display: block;
}

/* ---------- hero ---------- */

/* The video is pinned to the viewport rather than to the hero, so section 1's
   copy rides up and off it as you scroll. Every band below is opaque and sits
   one layer higher, so from section 2 on the video is covered for good. */

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 100lvh; /* stays covered while mobile browser chrome collapses */
  overflow: hidden;
  z-index: 0;
  background: #e9eaec;
}

.backdrop video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% center;
}

/* keeps the headline legible over the bright cloud mass on the left */
.backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0.94) 0%,
    rgba(255, 255, 255, 0.86) 28%,
    rgba(255, 255, 255, 0.45) 52%,
    rgba(255, 255, 255, 0) 78%
  );
}

.hero,
.gap,
.solution,
.foot {
  position: relative;
  z-index: 1;
}

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.masthead {
  padding-top: 38px;
}

.masthead .lockup { --mark: 56px; }

.hero-body {
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 48px;
  padding-bottom: 96px;
}

.hero-copy { max-width: 760px; }

.hero h1 {
  font-size: clamp(2.2rem, 7.4vw, 5.5rem);
}

.hero h1 .quiet { display: block; }

.hero-sub {
  margin: 30px 0 0;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: #2c2e33;
  max-width: 27em;
}

.hero-sub strong {
  display: block;
  font-weight: 600;
  color: var(--ink);
  margin-top: 6px;
}

/* ---------- section 2: the trust gap (inverted) ---------- */

.gap {
  background: var(--ink);
  color: #fff;
  padding: clamp(80px, 11vw, 150px) 0;
}

.gap .inner {
  display: grid;
  grid-template-columns: minmax(230px, 0.85fr) 1.9fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}

.gap h2 {
  font-size: clamp(3rem, 6.4vw, 5.2rem);
  color: #fff;
}

.gap .eyebrow { color: #9a9ea6; margin-bottom: 20px; }

.gap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4.4vw, 58px) clamp(32px, 5vw, 70px);
  padding-top: 10px;
}

.gap-grid .num { color: #6f737b; }

.gap-grid h3 {
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 1.0rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 12px 0 10px;
  color: #fff;
}

.gap-grid p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: #b9bcc2;
}

/* ---------- section 3: the solution ---------- */

.solution {
  padding: clamp(90px, 13vw, 170px) 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.solution .inner {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) 1.55fr;
  gap: clamp(40px, 7vw, 100px);
  align-items: start;
}

.solution h2 { font-size: clamp(3rem, 6.4vw, 5.2rem); }

.solution .lede {
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);
  line-height: 1.38;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  font-weight: 400;
}

.solution .lede em {
  font-style: normal;
  font-weight: 600;
}

/* ---------- scroll reveals (sections 2+) ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

/* headings travel a little further, so the band reads as arriving */
.js .display[data-reveal] { transform: translateY(44px); }

/* the dash draws itself rather than fading */
.js .rule[data-reveal] {
  width: 0;
  opacity: 1;
  transform: none;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}

.js [data-reveal].in {
  opacity: 1;
  transform: none;
}

.js .rule[data-reveal].in { width: 46px; }

/* ---------- contact / footer ---------- */

.foot {
  padding: clamp(64px, 9vw, 110px) 0 54px;
  background: var(--paper);
}

.foot .inner {
  display: flex;
  flex-wrap: wrap;
  gap: 44px;
  align-items: flex-end;
  justify-content: space-between;
}

.foot .lockup { --mark: 62px; }

.foot .contact a {
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.75rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 2px;
}

.foot .contact a:hover { color: var(--muted); border-color: var(--muted); }

.legal {
  margin-top: 54px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

.legal nav { display: flex; gap: 26px; }

.legal a { color: var(--muted); text-decoration: none; }
.legal a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- privacy notice ---------- */

.notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: var(--ink);
  color: #fff;
  border-top: 3px solid #fff;
}

/* .notice sets display, which would otherwise beat the [hidden] default */
.notice[hidden] { display: none; }

.notice-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
}

.notice-text {
  margin: 0;
  max-width: 60ch;
  font-size: 0.86rem;
  line-height: 1.55;
  color: #b9bcc2;
}

.notice-text strong {
  display: block;
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 5px;
}

.notice-act {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-shrink: 0;
}

.notice-act a {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a9ea6;
  text-decoration: none;
}

.notice-act a:hover { color: #fff; }

.notice-act button {
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: #fff;
  border: 0;
  padding: 12px 24px;
  cursor: pointer;
}

.notice-act button:hover { background: var(--rule); }

/* ---------- legal pages ---------- */

.legalpage { padding: 54px 0 90px; max-width: 760px; }

.legalpage .back {
  display: inline-block;
  margin-bottom: 46px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.legalpage .back:hover { color: var(--ink); }

.legalpage h1 {
  font-family: Archivo, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  line-height: 1.02;
  margin: 0 0 10px;
}

.legalpage h2 {
  font-family: Archivo, sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  margin: 44px 0 10px;
}

.legalpage p {
  margin: 0 0 10px;
  font-size: 0.97rem;
  line-height: 1.68;
  color: #3a3d43;
}

.legalpage .meta { color: var(--muted); font-size: 0.9rem; }

.legalpage a { color: var(--ink); }

@media (max-width: 860px) {
  .gap .inner,
  .solution .inner { grid-template-columns: 1fr; }
  .gap-grid { grid-template-columns: 1fr; }
  .backdrop video { object-position: 64% center; }
  .backdrop::after {
    background: linear-gradient(
      170deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.88) 42%,
      rgba(255, 255, 255, 0.5) 74%,
      rgba(255, 255, 255, 0.2) 100%
    );
  }
  .foot .inner { flex-direction: column; align-items: flex-start; }
  .notice-act { width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js [data-reveal],
  .js .rule[data-reveal] {
    opacity: 1;
    transform: none;
    width: 46px;
    transition: none;
  }
}