:root { --paper: #f5f4ef; --ink: #111113; --blue: #2148db; --red: #ef523c; --soft-blue: #b9c7ff; --rule: #ced0cd; --sans: "Sora", Arial, sans-serif; --mono: "DM Mono", monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.wrap { width: min(1220px, calc(100% - 56px)); margin-inline: auto; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; padding: 9px 13px; background: var(--blue); color: white; transform: translateY(-150%); font: 11px var(--mono); }
.skip-link:focus { transform: translateY(0); }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 25px; min-height: 80px; border-bottom: 2px solid var(--ink); }
.logo { font-weight: 800; font-size: 16px; letter-spacing: -.08em; }
.logo-bracket { color: var(--red); }
.nav nav { display: flex; gap: 25px; font: 11px var(--mono); }
.nav nav a:hover, .nav-cta:hover, .footer a:hover { color: var(--blue); }
.nav-cta { justify-self: end; color: var(--blue); font-size: 11px; font-weight: 700; }
.hero { display: grid; grid-template-columns: 1.03fr .97fr; gap: clamp(40px, 8vw, 120px); align-items: center; padding-top: clamp(80px, 11vw, 140px); padding-bottom: clamp(90px, 13vw, 165px); }
.eyebrow, .board-top, .board-bottom, .card-id, .loop-step span, .timeline span, .copy-status { font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 11px; color: var(--blue); }
.eyebrow-line { width: 28px; height: 2px; background: var(--red); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 25px 0 26px; font-size: clamp(50px, 7vw, 102px); line-height: .91; letter-spacing: -.09em; font-weight: 800; }
h1 span { color: var(--blue); }
.lede { max-width: 465px; color: #505154; font-size: 17px; line-height: 1.6; }
.blue-button { display: inline-flex; align-items: center; gap: 13px; min-height: 48px; padding: 13px 17px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.blue-button:hover { background: var(--red); transform: translateY(-2px); }
.test-board { padding: 20px; background: var(--blue); color: white; box-shadow: 13px 13px 0 var(--red); }
.board-top, .board-bottom { display: flex; justify-content: space-between; gap: 18px; font-size: 10px; }
.board-state { color: var(--soft-blue); }
.board-state i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #8dff70; }
.board-title { margin: 43px 0 32px; font-size: clamp(54px, 8vw, 105px); line-height: .73; letter-spacing: -.11em; font-weight: 800; }
.board-title em { color: #8dff70; font-style: normal; }
.variant-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.variant { min-height: 190px; padding: 14px; border: 1px solid rgba(255,255,255,.7); display: flex; flex-direction: column; }
.variant-b { background: rgba(255,255,255,.1); }
.variant span, .variant small { font: 9px var(--mono); color: var(--soft-blue); }
.variant strong { margin-top: auto; font-size: 46px; line-height: .8; letter-spacing: -.1em; }
.variant-a strong { color: #8dff70; }
.variant small { margin-top: 9px; }
.variant b { margin-top: 16px; align-self: flex-start; padding: 4px 6px; background: #8dff70; color: var(--ink); font: 9px var(--mono); }
.variant-b b { background: transparent; color: var(--soft-blue); border: 1px solid var(--soft-blue); }
.board-bottom { margin-top: 18px; color: var(--soft-blue); text-transform: none; letter-spacing: 0; }
.loop-section { padding: clamp(77px, 10vw, 125px) 0; background: var(--ink); color: var(--paper); }
.loop-heading { display: grid; grid-template-columns: .8fr 1.1fr .75fr; align-items: end; gap: 35px; margin-bottom: 65px; }
.loop-heading .eyebrow { color: #8dff70; }
h2 { font-size: clamp(44px, 5.7vw, 76px); line-height: .94; letter-spacing: -.09em; font-weight: 700; }
h2 i { color: var(--red); font-style: normal; }
.loop-heading h2 { margin: 0; }
.loop-heading > p:last-child { max-width: 270px; margin: 0; color: #a2a4aa; }
.loop-track { display: grid; grid-template-columns: 1fr 34px 1fr 34px 1fr 34px 1fr; align-items: center; border-top: 1px solid #4a4b50; border-bottom: 1px solid #4a4b50; }
.loop-step { min-height: 205px; padding: 20px 20px 20px 0; }
.loop-step + .loop-step { padding-left: 20px; border-left: 1px solid #4a4b50; }
.loop-step span { color: #8dff70; }
.loop-step strong { display: block; margin-top: 47px; font-size: 28px; letter-spacing: -.07em; }
.loop-step p { max-width: 170px; margin: 8px 0 0; color: #a2a4aa; font-size: 12px; }
.loop-arrow { color: var(--red); font-size: 23px; text-align: center; }
.section { padding-top: clamp(95px, 13vw, 165px); padding-bottom: clamp(95px, 13vw, 165px); }
.section-top { display: flex; justify-content: space-between; gap: 35px; padding-bottom: 28px; border-bottom: 2px solid var(--ink); }
.section-top p { margin: 0; }
.section-top .eyebrow { color: var(--red); }
.section-top p:last-child { color: #505154; }
.creative-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
.creative-card { min-height: 440px; padding: 19px; display: flex; flex-direction: column; }
.card-blue { background: var(--blue); color: #fff; }
.card-red { background: var(--red); color: #fff; }
.card-paper { background: #dfe3dc; }
.card-id { color: rgba(255,255,255,.75); }
.card-paper .card-id { color: #59605b; }
.creative-card h3 { margin: auto 0 22px; font-size: clamp(29px, 3vw, 43px); line-height: .95; letter-spacing: -.09em; }
.creative-card a { align-self: flex-start; font: 11px var(--mono); }
.card-blue a, .card-red a { color: #d5ffaf; }
.card-paper a { color: var(--blue); }
.card-lines { display: grid; gap: 8px; margin-bottom: 25px; }
.card-lines i { display: block; width: 100%; height: 10px; background: #d5ffaf; }
.card-lines i:nth-child(2) { width: 72%; opacity: .8; }.card-lines i:nth-child(3) { width: 48%; opacity: .55; }
.quote-mark { font-size: 100px; line-height: .5; font-weight: 800; color: #ffd0c5; }
.card-red p { max-width: 200px; margin: auto 0 22px; color: #ffd0c5; font-size: 13px; }
.static-shape { width: 145px; height: 145px; margin: auto 0 25px; display: grid; align-content: center; justify-items: center; transform: rotate(-5deg); background: var(--red); color: #fff; font-size: 19px; font-weight: 800; line-height: .8; letter-spacing: -.1em; }
.sprint { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12%; align-items: start; padding-top: clamp(78px, 10vw, 125px); padding-bottom: clamp(78px, 10vw, 125px); border-top: 2px solid var(--ink); }
.sprint-label .eyebrow { color: var(--red); }.sprint-label h2 { margin-top: 40px; }
.timeline { border-top: 1px solid var(--rule); }
.timeline > div { display: grid; grid-template-columns: 80px 1fr; gap: 15px; padding: 23px 0; border-bottom: 1px solid var(--rule); }
.timeline span { color: var(--blue); }.timeline strong { font-size: 17px; }.timeline p { grid-column: 2; margin: 0; color: #626468; font-size: 13px; }
.contact { position: relative; display: grid; grid-template-columns: .25fr 1fr; gap: 6%; align-items: start; padding-top: clamp(82px, 11vw, 145px); padding-bottom: clamp(82px, 11vw, 145px); border-top: 2px solid var(--ink); }
.contact-mark { display: grid; place-items: center; width: 92px; height: 92px; background: var(--red); color: #fff; font-size: 49px; transform: rotate(7deg); }
.contact h2 { margin: 26px 0 24px; font-size: clamp(48px, 6vw, 83px); }.contact-copy { max-width: 320px; color: #606266; }
.copy-button { display: block; margin-top: 14px; padding: 0; border: 0; background: none; color: #606266; font: 11px var(--mono); cursor: pointer; }.copy-button:hover { color: var(--blue); }.copy-status { min-height: 16px; margin: 8px 0 0; color: var(--blue); text-transform: none; letter-spacing: 0; }
.footer { display: flex; justify-content: space-between; gap: 25px; padding-block: 22px 30px; border-top: 2px solid var(--ink); color: #606266; font: 10px var(--mono); }
.js-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }.js-ready .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.js-ready .reveal, .js-ready .reveal.is-visible { opacity: 1; transform: none; transition: none; }.blue-button { transition: none; } }
@media (max-width: 850px) { .nav { grid-template-columns: 1fr auto; }.nav nav { display: none; }.hero { grid-template-columns: 1fr; gap: 68px; }.test-board { max-width: 670px; }.loop-heading, .sprint { grid-template-columns: 1fr; gap: 35px; }.loop-heading > p:last-child { max-width: 450px; }.loop-track { grid-template-columns: repeat(2, 1fr); }.loop-arrow { display: none; }.creative-grid { grid-template-columns: 1fr 1fr; }.creative-card:last-child { grid-column: 1 / -1; min-height: 320px; }.contact { grid-template-columns: 100px 1fr; } }
@media (max-width: 600px) { .wrap { width: min(100% - 32px, 1220px); }.nav { min-height: 69px; }.nav-cta { font-size: 10px; }.hero { padding-top: 69px; padding-bottom: 83px; } h1 { font-size: clamp(49px, 14vw, 70px); }.test-board { padding: 15px; box-shadow: 7px 7px 0 var(--red); }.board-title { margin-top: 34px; }.variant { min-height: 152px; padding: 11px; }.variant strong { font-size: 36px; }.loop-track { grid-template-columns: 1fr; }.loop-step, .loop-step + .loop-step { min-height: 0; padding: 23px 0; border-left: 0; border-bottom: 1px solid #4a4b50; }.loop-step strong { margin-top: 25px; }.loop-arrow { display: none; }.creative-grid { grid-template-columns: 1fr; }.creative-card, .creative-card:last-child { grid-column: auto; min-height: 340px; }.section-top { display: block; }.section-top p:last-child { margin-top: 17px; }.timeline > div { grid-template-columns: 64px 1fr; }.contact { grid-template-columns: 1fr; }.contact-mark { width: 70px; height: 70px; font-size: 38px; }.footer { flex-wrap: wrap; } }