/* Sevencorn company site
   Palette: white ground, black ink, cobalt blue accent. Sharp corners, ruled grid. */

:root {
  --white: #FFFFFF;
  --offwhite: #F5F7FA;
  --black: #0B0F14;
  --grey: #4C5560;
  --blue: #1747D6;
  --blue-deep: #0F2E9C;
  --blue-faint: #E8EDFB;
  --line: #D9DEE6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.wrap { max-width: 70rem; margin: 0 auto; padding: 0 1.25rem; }

h1, h2, h3 {
  font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.mono {
  font-family: "IBM Plex Mono", Consolas, "Cascadia Mono", monospace;
}

a { color: var(--blue-deep); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.4rem 0;
  border-bottom: 2px solid var(--black);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700; font-size: 1.15rem; color: var(--black);
  text-decoration: none; letter-spacing: -0.01em;
}
.brand img { display: block; height: 32px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
.site-nav a.navlink {
  color: var(--grey); text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.site-nav a.navlink:hover { color: var(--blue-deep); }
.btn {
  display: inline-block; background: var(--black); color: var(--white);
  padding: 0.65rem 1.2rem; text-decoration: none; font-weight: 600; font-size: 0.95rem;
  border: 2px solid var(--black);
}
.btn:hover { background: var(--blue); border-color: var(--blue); }
.btn.on-blue { background: var(--white); color: var(--blue-deep); border-color: var(--white); }
.btn.on-blue:hover { background: var(--black); color: var(--white); border-color: var(--black); }
@media (max-width: 640px) {
  .site-nav .navlink { display: none; }
}

/* ---------- hero ---------- */
.hero { padding: 4.5rem 0 3.5rem; }
.hero .eyebrow {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 1.2rem;
}
.hero h1 {
  font-size: clamp(2.3rem, 6.5vw, 4rem);
  line-height: 1.02; margin: 0 0 1.3rem; font-weight: 700;
}
.hero .lede {
  font-size: 1.2rem; color: var(--grey); max-width: 42rem; margin: 0;
}

/* pipeline schematic */
.schematic { margin: 3rem 0 0; overflow-x: auto; }
.schematic svg { display: block; min-width: 640px; width: 100%; height: auto; }

/* readout strip: replaces pills */
.readout {
  border-top: 2px solid var(--black);
  border-bottom: 2px solid var(--black);
  padding: 0.8rem 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem 0;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.readout span { white-space: nowrap; }
.readout .sep { color: var(--blue); padding: 0 0.9rem; }

/* ---------- bands + sections ---------- */
.band { padding: 4.5rem 0; }
.band.dark { background: var(--black); color: var(--white); }
.band.blue { background: var(--blue); color: var(--white); padding: 3rem 0; }

.kicker {
  font-size: 0.75rem; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--blue); margin: 0 0 0.9rem;
}
.band.dark .kicker { color: #7C9BFF; }
.band h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0 0 0.9rem; }
.section-lede { color: var(--grey); max-width: 42rem; margin: 0 0 2.6rem; }
.band.dark .section-lede { color: #A7B0BC; }

/* model stages: ruled rows with outlined numerals */
.stage {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem;
  border-top: 1px solid var(--line); padding: 2.2rem 0;
}
.stage:last-of-type { border-bottom: 1px solid var(--line); }
@media (max-width: 640px) { .stage { grid-template-columns: 1fr; gap: 0.4rem; padding: 1.6rem 0; } }
.stage .numeral {
  font-family: "Archivo", system-ui, sans-serif;
  font-size: clamp(3rem, 7vw, 4.5rem); font-weight: 700; line-height: 0.9;
  color: var(--white);
  -webkit-text-stroke: 2px var(--blue);
  text-stroke: 2px var(--blue);
}
@supports not (-webkit-text-stroke: 2px blue) {
  .stage .numeral { color: var(--blue-faint); }
}
.stage .label {
  font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue-deep); margin: 0.4rem 0 0;
}
.stage h3 { margin: 0 0 0.4rem; font-size: 1.35rem; }
.stage p { margin: 0; color: var(--grey); max-width: 40rem; }

/* standards: inverted rulebook */
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid #2A323C; }
@media (max-width: 700px) { .rules { grid-template-columns: 1fr; } }
.rule {
  border-bottom: 1px solid #2A323C; padding: 1.5rem 2rem 1.5rem 0;
}
.rule .idx {
  font-size: 0.75rem; letter-spacing: 0.12em; color: #7C9BFF; display: block; margin-bottom: 0.4rem;
}
.rule h3 { margin: 0 0 0.3rem; font-size: 1.08rem; color: var(--white); }
.rule p { margin: 0; color: #A7B0BC; font-size: 0.95rem; }

/* company */
.company-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
@media (max-width: 800px) { .company-grid { grid-template-columns: 1fr; } }
.ledger { margin: 0; font-size: 0.95rem; border-top: 2px solid var(--black); }
.ledger > div {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem;
  padding: 0.75rem 0; border-bottom: 1px solid var(--line);
}
.ledger dt {
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--grey); margin: 0; padding-top: 0.15rem;
}
.ledger dd { margin: 0; }

/* blue contact band */
.band.blue .contact-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem;
}
.band.blue h2 { margin: 0; font-size: clamp(1.3rem, 3vw, 1.8rem); }

/* ---------- footer ---------- */
.site-foot {
  padding: 2rem 0 2.8rem; color: var(--grey); font-size: 0.88rem;
  display: flex; flex-wrap: wrap; gap: 0.8rem 2rem; align-items: center; justify-content: space-between;
  border-top: 2px solid var(--black);
}
.site-foot nav { display: flex; gap: 1.4rem; }
.site-foot a { color: var(--grey); }

/* ---------- motion (ambient loops only; no entrance effects, no hover) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* pipeline flow: dashes march along the connectors and the return loop */
  .schematic .flow { stroke-dasharray: 6 4; animation: march 0.8s linear infinite; }
  .schematic .loop { animation: march 1.1s linear infinite; }
  @keyframes march { to { stroke-dashoffset: -10; } }

  /* stage relay: numerals take turns filling solid blue, 01 -> 04 */
  .stage .numeral { animation: stage-active 8s linear infinite; }
  .stage:nth-of-type(1) .numeral { animation-delay: 0s; }
  .stage:nth-of-type(2) .numeral { animation-delay: 2s; }
  .stage:nth-of-type(3) .numeral { animation-delay: 4s; }
  .stage:nth-of-type(4) .numeral { animation-delay: 6s; }
  @keyframes stage-active {
    0%, 24.9% { color: var(--blue); }
    25%, 100% { color: var(--white); }
  }

  /* readout cursor: hard terminal blink */
  .readout::after {
    content: ""; display: inline-block; width: 0.5em; height: 1.05em;
    background: var(--blue); margin-left: 1rem; vertical-align: text-bottom;
    animation: blink 1.2s linear infinite;
  }
  @keyframes blink {
    0%, 49.9% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }

  /* standards relay: rule indices light up in sequence on the dark band */
  .rule .idx { animation: rule-active 12s linear infinite; }
  .rule:nth-of-type(1) .idx { animation-delay: 0s; }
  .rule:nth-of-type(2) .idx { animation-delay: 2s; }
  .rule:nth-of-type(3) .idx { animation-delay: 4s; }
  .rule:nth-of-type(4) .idx { animation-delay: 6s; }
  .rule:nth-of-type(5) .idx { animation-delay: 8s; }
  .rule:nth-of-type(6) .idx { animation-delay: 10s; }
  @keyframes rule-active {
    0%, 16.2% { color: #FFFFFF; }
    16.7%, 100% { color: #7C9BFF; }
  }
}

/* ---------- legal pages ---------- */
.legal { padding: 3rem 0 4rem; max-width: 46rem; }
.legal h1 { font-size: 2rem; margin: 0 0 0.4rem; }
.legal .updated { color: var(--grey); font-size: 0.9rem; margin: 0 0 2rem; }
.legal h2 { font-size: 1.25rem; margin: 2rem 0 0.6rem; }
.legal p, .legal li { color: #33404E; }