:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #111;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 28px;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h2, h3, p, ul, figure, address { margin: 0; padding: 0; font: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

.page { max-width: 896px; margin: 0 auto; padding: 48px 0; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -0.01em; }

.statement {
  max-width: 620px;
  padding: 200px 0 96px;
  font-size: 22px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.statement span { font-weight: 400; color: #8c8c8c; }

.illustration { display: flex; justify-content: center; padding-bottom: 160px; }
.illustration svg { display: block; max-width: 100%; height: auto; }
.hero--mobile { display: none !important; }

.section { display: flex; padding-bottom: 112px; }
.section__label { width: 224px; flex-shrink: 0; font-size: 15px; color: #8c8c8c; }
.section__body { width: 672px; display: flex; flex-direction: column; gap: 20px; text-wrap: pretty; }
.section__body address { font-style: normal; color: #5c5c5c; }
.section__body a { text-decoration: underline; text-decoration-color: #d4d4d4; text-underline-offset: 4px; transition: text-decoration-color 150ms ease; }
.section__body a:hover { text-decoration-color: #111; }

.rows { padding-top: 12px; border-bottom: 1px solid #ebebeb; }
.row { display: flex; align-items: center; gap: 24px; padding: 20px 0; border-top: 1px solid #ebebeb; font-size: 15px; line-height: 24px; }
.row svg { flex-shrink: 0; width: 72px; height: 72px; }
.row h3 { font-weight: 500; }
.row p { color: #5c5c5c; margin-top: 4px; }

.footer { display: flex; justify-content: space-between; padding-top: 48px; font-size: 13px; line-height: 20px; color: #8c8c8c; }

@media (max-width: 960px) {
  .page { padding: 48px 32px; }
  .section__label { width: 180px; }
  .section__body { flex: 1; width: auto; }
}

@media (max-width: 720px) {
  body { font-size: 16px; line-height: 26px; }
  .page { padding: 28px 24px 40px; }
  .statement { padding: 96px 0 48px; font-size: 20px; line-height: 30px; }
  .illustration { padding-bottom: 88px; }
  .hero--desktop { display: none !important; }
  .hero--mobile { display: block !important; }
  .section { flex-direction: column; gap: 12px; padding-bottom: 64px; }
  .section__label { width: auto; font-size: 14px; line-height: 20px; }
  .section__body { gap: 12px; }
  .rows { padding-top: 16px; }
  .row { gap: 16px; padding: 16px 0; font-size: 14px; line-height: 21px; }
  .row svg { width: 56px; height: 56px; }
  .row h3 { font-size: 15px; line-height: 22px; }
  .row p { margin-top: 2px; }
  .footer { padding-top: 20px; border-top: 1px solid #ebebeb; }
}

/* Motion: a one-time entrance on load, then content reveals once as it scrolls into view. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.hero .trace polyline { stroke-dasharray: 1; }
.hero .pkt { display: none; }

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .statement { animation: rise 700ms var(--ease-out) both; }
  .hero .grid { animation: fade 1000ms var(--ease-out) 200ms both; }
  .hero .obj--lead { animation: rise 600ms var(--ease-out) 350ms both; }
  .hero .trace polyline { animation: draw 700ms var(--ease-in-out) both; animation-delay: calc(700ms + var(--d)); }
  .hero .obj:not(.obj--lead) { animation: rise 600ms var(--ease-out) both; animation-delay: calc(1150ms + var(--d)); }
  .hero .node { animation: fade 300ms var(--ease-out) both; animation-delay: calc(1250ms + var(--d)); }
  .hero .lbl { animation: fade 500ms var(--ease-out) both; animation-delay: calc(1450ms + var(--d)); }
}

@media (prefers-reduced-motion: reduce) {
  .statement, .illustration { animation: fade 300ms ease both; }
  .hero .flow { display: none; }
  .hero .pkt { display: inline; }
  .js .reveal { transform: none; transition: opacity 300ms ease; }
}