:root {
  --graphite: #14171a;
  --fog: #e7eaed;
  --paper: #f5f7f8;
  --steel: #8a939b;
  --cyan: #1fb6c1;
  --white: #ffffff;
  --ink-line: rgba(20, 23, 26, 0.2);
  --light-line: rgba(231, 234, 237, 0.2);
  --wrap: min(1280px, calc(100% - 64px));
  --sans: "Archivo", Arial, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; background: var(--fog); color: var(--graphite); font-family: var(--sans); font-size: 16px; line-height: 1.55; letter-spacing: 0; }
::selection { background: var(--cyan); color: var(--graphite); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px; }
.wrap { width: var(--wrap); margin: 0 auto; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 11px 14px; background: var(--cyan); color: var(--graphite); font: 500 12px/1 var(--mono); }
.skip-link:focus { top: 16px; }
.eyebrow, .mono-label { margin: 0; font: 500 11px/1.3 var(--mono); text-transform: uppercase; }
.index { display: block; margin-bottom: 18px; color: var(--cyan); font: 500 12px/1 var(--mono); }

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: 76px; padding: 0 32px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--fog); border-bottom: 1px solid var(--light-line); transition: height 180ms ease, color 180ms ease, background 180ms ease; }
.site-header.is-scrolled { height: 64px; color: var(--graphite); background: rgba(231,234,237,.96); border-color: var(--ink-line); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; justify-self: start; gap: 12px; min-height: 48px; }
.brand img { width: 44px; height: 44px; object-fit: cover; border: 1px solid currentColor; }
.brand > span { display: flex; flex-direction: column; font-size: 16px; font-weight: 500; line-height: 1; }
.brand small { margin-top: 5px; color: var(--steel); font: 400 9px/1 var(--mono); text-transform: uppercase; }
.site-header nav { display: flex; gap: 32px; font: 400 11px/1 var(--mono); text-transform: uppercase; }
.site-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
.site-header nav a:hover { color: var(--cyan); }
.header-code { justify-self: end; font: 400 10px/1 var(--mono); }

.hero { position: relative; min-height: 900px; display: grid; grid-template-columns: minmax(0,1fr) minmax(460px,.9fr); grid-template-rows: 1fr auto; gap: 40px 70px; padding: 150px max(32px, calc((100% - 1280px) / 2)) 0; overflow: hidden; background: var(--graphite); color: var(--fog); }
.hero-grid { position: absolute; inset: 76px 0 0; pointer-events: none; opacity: .33; background-image: linear-gradient(var(--light-line) 1px, transparent 1px), linear-gradient(90deg, var(--light-line) 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
.hero-copy, .hero-diagram { position: relative; z-index: 1; min-width: 0; align-self: center; }
.datum-line { display: flex; flex-wrap: wrap; gap: 7px 24px; margin-bottom: 52px; color: var(--steel); font: 400 10px/1 var(--mono); text-transform: uppercase; }
.datum-line span { display: inline-flex; align-items: center; gap: 12px; }
.datum-line span:not(:last-child)::after { content: "+"; color: var(--cyan); }
.hero .eyebrow { color: var(--cyan); }
.hero h1 { max-width: 760px; margin: 28px 0 32px; font-size: clamp(55px, 5.3vw, 84px); font-weight: 400; line-height: .98; }
.hero h1 em { color: var(--cyan); font-style: normal; }
.hero-lede { width: 100%; max-width: 600px; margin: 0; overflow-wrap: anywhere; color: #b7bec4; font-size: 17px; }
.primary-action { min-height: 54px; margin-top: 42px; padding: 0 20px; display: inline-flex; align-items: center; gap: 42px; background: var(--cyan); color: var(--graphite); border: 1px solid var(--cyan); font: 500 12px/1 var(--mono); text-transform: uppercase; transition: background 160ms ease, color 160ms ease; }
.primary-action:hover { background: transparent; color: var(--cyan); }
.hero-diagram { min-width: 0; padding: 22px; border: 1px solid var(--light-line); background: rgba(20,23,26,.58); }
.diagram-caption { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--light-line); color: var(--steel); font: 400 9px/1 var(--mono); text-transform: uppercase; }
.hero-diagram svg { width: 100%; height: auto; margin-top: 12px; overflow: visible; }
.diagram-grid path { stroke: rgba(231,234,237,.08); stroke-width: 1; }
.diagram-body path, .diagram-body circle { fill: rgba(31,182,193,.03); stroke: var(--fog); stroke-width: 1.4; }
.measure-line path, .checkpoint path, .crosshair path, .crosshair circle { fill: none; stroke: var(--cyan); stroke-width: 1; }
.measure-line text, .checkpoint text { fill: var(--cyan); font: 500 10px var(--mono); }
.checkpoint circle { fill: var(--graphite); stroke: var(--cyan); stroke-width: 2; }
.crosshair { opacity: .34; }
.hero-diagram > p { margin: 6px 0 0; color: var(--steel); font: 400 9px/1.5 var(--mono); }
.hero-data { position: relative; z-index: 1; grid-column: 1 / -1; min-height: 112px; margin: 0; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--light-line); }
.hero-data > div { padding: 24px 22px; border-right: 1px solid var(--light-line); }
.hero-data > div:first-child { border-left: 1px solid var(--light-line); }
.hero-data dt, .contact-sheet dt, .identity-layout dt { color: var(--steel); font: 400 9px/1 var(--mono); text-transform: uppercase; }
.hero-data dd { margin: 14px 0 0; font: 400 13px/1.25 var(--mono); }

.spec-section { padding: 120px 0 130px; background: var(--fog); }
.section-head { display: grid; grid-template-columns: .55fr 1fr .8fr; gap: 50px; align-items: end; padding-bottom: 44px; border-bottom: 1px solid var(--ink-line); }
.section-head h2, .identity-layout h2, .process-intro h2, .media-copy h2, .contact-title h2 { margin: 0; font-size: 48px; font-weight: 400; line-height: 1.03; }
.section-head > p { margin: 0; color: #596168; font-size: 14px; }
.spec-table article { min-height: 188px; display: grid; grid-template-columns: .42fr 1fr .85fr .7fr; gap: 34px; align-items: center; border-bottom: 1px solid var(--ink-line); }
.spec-code, .spec-status { font: 400 10px/1.4 var(--mono); text-transform: uppercase; }
.spec-code { color: var(--cyan); }
.spec-table h3 { margin: 0; font-size: 27px; font-weight: 400; }
.spec-table p { margin: 0; color: #596168; font-size: 14px; }
.spec-status { color: var(--steel); }

.identity-band { padding: 110px 0; background: var(--graphite); color: var(--fog); }
.identity-layout { display: grid; grid-template-columns: 180px 1fr .85fr; gap: 72px; align-items: center; }
.identity-logo { width: 180px; aspect-ratio: 1; padding: 16px; display: grid; place-items: center; border: 1px solid var(--light-line); }
.identity-logo img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.identity-layout .eyebrow { margin-bottom: 28px; color: var(--cyan); }
.identity-layout h2 { font-size: 64px; }
.identity-layout dl { margin: 0; border-top: 1px solid var(--light-line); }
.identity-layout dl > div { padding: 18px 0; border-bottom: 1px solid var(--light-line); }
.identity-layout dd { margin: 8px 0 0; color: #c7ccd0; font-size: 14px; }

.process-section { padding: 130px 0; background: var(--paper); }
.process-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; align-items: start; }
.process-intro { position: sticky; top: 110px; }
.process-intro .eyebrow { margin-bottom: 28px; }
.process-intro h2 { max-width: 530px; }
.process-rail { list-style: none; margin: 0; padding: 0; }
.process-rail li { min-height: 230px; display: grid; grid-template-columns: 72px 1fr; gap: 30px; }
.rail-marker { position: relative; display: flex; justify-content: center; }
.rail-marker::after { content: ""; position: absolute; top: 38px; bottom: 0; width: 1px; background: var(--ink-line); }
.process-rail li:last-child .rail-marker::after { display: none; }
.rail-marker span { position: relative; z-index: 1; width: 38px; height: 38px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--cyan); color: var(--cyan); font: 500 10px/1 var(--mono); }
.process-rail .mono-label { color: var(--steel); }
.process-rail h3 { margin: 20px 0 12px; font-size: 34px; font-weight: 400; }
.process-rail li p:last-child { max-width: 500px; margin: 0; color: #596168; }

.media-section { padding: 120px 0; background: var(--fog); }
.media-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 90px; align-items: center; }
.media-copy .eyebrow { margin-bottom: 28px; }
.media-copy h2 { max-width: 520px; }
.media-copy > p:last-child { max-width: 520px; margin: 30px 0 0; color: #596168; }
.capture-frame { position: relative; min-height: 520px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid var(--steel); background-image: linear-gradient(rgba(20,23,26,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(20,23,26,.09) 1px, transparent 1px); background-size: 52px 52px; }
.frame-corners::before, .frame-corners::after, .capture-frame::before, .capture-frame::after { content: ""; position: absolute; width: 34px; height: 34px; border-color: var(--cyan); }
.frame-corners::before { top: 14px; left: 14px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.frame-corners::after { top: 14px; right: 14px; border-top: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.capture-frame::before { bottom: 14px; left: 14px; border-bottom: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.capture-frame::after { right: 14px; bottom: 14px; border-right: 2px solid var(--cyan); border-bottom: 2px solid var(--cyan); }
.capture-target { position: absolute; inset: 50%; width: 168px; height: 168px; transform: translate(-50%,-50%); border: 1px solid var(--steel); border-radius: 50%; }
.capture-target::before, .capture-target::after { content: ""; position: absolute; background: var(--steel); }
.capture-target::before { left: 50%; top: -44px; width: 1px; height: 256px; }
.capture-target::after { top: 50%; left: -44px; width: 256px; height: 1px; }
.capture-target span { position: absolute; inset: 50%; width: 8px; height: 8px; transform: translate(-50%,-50%); background: var(--cyan); }
.capture-meta { display: flex; justify-content: space-between; gap: 20px; color: var(--steel); font: 400 9px/1 var(--mono); }
.capture-frame ul { position: relative; z-index: 2; margin: auto 0 0; padding: 0; display: flex; gap: 8px; list-style: none; }
.capture-frame li { padding: 9px 11px; background: var(--fog); border: 1px solid var(--ink-line); font: 400 9px/1 var(--mono); text-transform: uppercase; }

.contact-section { padding: 120px 0; background: var(--cyan); color: var(--graphite); }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; }
.contact-title .index { color: var(--graphite); }
.contact-title .eyebrow { margin-bottom: 28px; }
.contact-title h2 { max-width: 590px; font-size: 56px; }
.contact-sheet { margin: 0; border-top: 1px solid rgba(20,23,26,.4); }
.contact-sheet > div { display: grid; grid-template-columns: 120px 1fr; gap: 26px; padding: 22px 0; border-bottom: 1px solid rgba(20,23,26,.4); }
.contact-sheet dt { color: rgba(20,23,26,.65); }
.contact-sheet dd { margin: 0; font-size: 15px; }
.contact-sheet a { text-decoration: underline; text-underline-offset: 5px; }

footer { min-height: 150px; padding: 44px 32px; display: grid; grid-template-columns: 1fr auto; gap: 34px 60px; background: var(--graphite); color: var(--fog); }
.footer-brand { font-size: 22px; font-weight: 500; }
.footer-brand span { color: var(--cyan); }
footer p { grid-row: 2; margin: 0; color: var(--steel); font: 400 9px/1.5 var(--mono); }
.footer-code { justify-self: end; font: 400 9px/1 var(--mono); }

@media (max-width: 1000px) {
  :root { --wrap: calc(100% - 40px); }
  .site-header { padding: 0 20px; grid-template-columns: 1fr auto; }
  .site-header nav { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; grid-template-rows: auto; padding: 140px 20px 0; }
  .hero-copy { max-width: 760px; }
  .hero-diagram { width: min(720px, 100%); }
  .hero-data { grid-column: auto; grid-template-columns: repeat(2,1fr); }
  .identity-layout { grid-template-columns: 150px 1fr; }
  .identity-layout dl { grid-column: 1 / -1; }
  .process-layout, .media-layout, .contact-layout { grid-template-columns: 1fr; gap: 60px; }
  .process-intro { position: static; }
}

@media (max-width: 700px) {
  :root { --wrap: calc(100% - 32px); }
  .site-header { height: 66px; padding: 0 16px; }
  .site-header.is-scrolled { height: 60px; }
  .brand img { width: 38px; height: 38px; }
  .brand > span { font-size: 14px; }
  .header-code { font-size: 8px; }
  .hero { padding: 118px 16px 0; gap: 50px; }
  .hero-grid { inset: 66px 0 0; background-size: 48px 48px; }
  .datum-line { margin-bottom: 38px; }
  .hero h1 { margin: 22px 0 26px; font-size: 43px; }
  .hero-lede { font-size: 15px; }
  .primary-action { width: 100%; max-width: 100%; justify-content: space-between; gap: 16px; }
  .hero-diagram { max-width: 100%; padding: 12px; overflow: hidden; }
  .diagram-caption { font-size: 8px; }
  .hero-data { grid-template-columns: 1fr 1fr; }
  .hero-data > div { min-width: 0; padding: 18px 12px; }
  .hero-data dd { overflow-wrap: anywhere; font-size: 10px; }
  .spec-section, .process-section, .media-section, .contact-section { padding: 82px 0; }
  .section-head { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .section-head h2, .process-intro h2, .media-copy h2 { font-size: 38px; }
  .spec-table article { min-height: 0; padding: 34px 0; grid-template-columns: 1fr; gap: 13px; }
  .spec-table h3 { font-size: 25px; }
  .identity-band { padding: 82px 0; }
  .identity-layout { grid-template-columns: 92px 1fr; gap: 26px; }
  .identity-logo { width: 92px; padding: 8px; }
  .identity-layout h2 { font-size: 38px; }
  .identity-layout .eyebrow { font-size: 8px; margin-bottom: 14px; }
  .process-rail li { min-height: 210px; grid-template-columns: 48px 1fr; gap: 18px; }
  .process-rail h3 { font-size: 29px; }
  .capture-frame { min-height: 460px; padding: 22px; }
  .capture-frame ul { flex-direction: column; align-items: flex-start; }
  .contact-title h2 { font-size: 43px; }
  .contact-sheet > div { grid-template-columns: 90px 1fr; gap: 16px; }
  footer { grid-template-columns: 1fr; padding: 40px 20px; }
  .footer-code { justify-self: start; }
  footer p { grid-row: auto; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 39px; }
  .hero-data { grid-template-columns: 1fr; }
  .identity-layout { grid-template-columns: 76px 1fr; }
  .identity-logo { width: 76px; }
  .identity-layout h2 { font-size: 33px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}