:root {
  --sans: 'IBM Plex Sans', Arial, sans-serif;
  --mono: 'VT323', 'Courier New', monospace;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --terminal: 'VT323', monospace;
  --surface: #111215;
  --foreground: #edf0f5;
  --muted: #a4aab7;
  --rule: #ffffff35;
  --acid: #78a8ff;
}
html { scrollbar-color: #7186ad #161a22; }
body { background: var(--surface); color: var(--foreground); }
body.locked { overflow-y: auto; overflow-x: hidden; }
html.switching { scroll-behavior: auto; }
/* Navigation's sticky-header offset must not shift the intro when START focuses. */
html:has(body.locked) { scroll-padding-top: 0; }
.entrance { position: relative; inset: auto; height: 235svh; overflow: clip; background: #090a10; }
.intro-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.intro-top,.intro-bottom { color: #edf0f5; }
.scene { left: 0; top: 0; transition: none; transform-origin: 0 0; will-change: transform; }
.screen-hit { left: 8%; top: 12%; width: 70%; height: 71%; border: none; border-radius: 12%; box-shadow: none; outline: none; cursor: pointer; }
.screen-hit:disabled { cursor: default; }
.screen-hit:hover,.screen-hit:focus,.screen-hit:focus-visible { background: none; box-shadow: none; outline: none; }
.screen-hit:after { display: none; }
.screen-hit:focus-visible:before { content: ''; position: absolute; width: 27%; height: 12%; left: 36.5%; top: 45%; border-bottom: 2px solid #78a8ff; }
.prompt { border: 0; background: none; color: #edf0f5; font: inherit; min-height: 44px; padding: 8px 0; }
.prompt>span:first-child { font-size: 12px; }
.intro-stage .wordmark { font-family: var(--sans); }
.intro-stage .pixel { color: #78a8ff; }
.intro-edition { min-width: 130px; }
.zoom-progress { position: absolute; bottom: 0; width: 100%; height: 3px; background: #ffffff18; z-index: 4; }
.zoom-progress span { display: block; width: 100%; height: 100%; background: #78a8ff; transform: scaleX(var(--zoom,0)); transform-origin: left; }
.entering .scene { filter: none; }
.entering .intro-stage { opacity: 0; transition: opacity .3s; }
.section { background: transparent; color: var(--foreground); padding-top: 105px; padding-bottom: 105px; }
.hero { min-height: calc(100svh - 90px); padding-top: 36px; padding-bottom: 0; }
.hero h1 { text-shadow: 1px 0 #76a4ff35,-1px 0 #fff2; }
.hero-bottom { margin-top: 65px; }
.hero-bottom em,.eyebrow,.section-heading>p,.about-copy>p,.contact-bottom p,.work-foot,.quote figcaption>span,.quote-mark { color: var(--muted); }
.about-copy .lead { color: var(--foreground); }
.header,.header.light { background: var(--surface); color: var(--foreground); border-color: var(--rule); transition: none; }
.header .local-time,.header.light .local-time,.header.light #clock,.header #clock { color: var(--muted); }
.header .pixel,.header.light .pixel,.swiss { color: var(--acid); }
.header a:focus-visible,.header button:focus-visible,.section a:focus-visible,.section button:focus-visible { outline-color: var(--acid); }
.section-label,.about .section-label,.ticker,.services>div,footer { color: var(--muted); border-color: var(--rule); }
.ticker { margin-top: 75px; }
.transmission { border: 1px solid #536eaa55; background: #0a101c; color: #bbd3ff; }
.transmission-top,.transmission-bottom { color: #92addb; }
.transmission-center p { text-shadow: 2px 0 #547bde80,-2px 0 #b3deff70; }
.channel-number { letter-spacing: .3em; color: #78a8ff; }
.about-grid { gap: 10%; }
.about h2 { font-size: clamp(54px,6.5vw,104px); }
.about-signature { margin-top: 40px; color: var(--muted); }
.about-signature>span { font-size: 12px; color: var(--acid); }
.profile-facts { margin-top: 45px; border-top: 1px solid var(--rule); }
.profile-facts>div { display: grid; grid-template-columns: 75px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.profile-facts strong { font-weight: 400; color: var(--foreground); }
.profile-facts>div>span { color: var(--muted); }
.about-chapter { display: grid; grid-template-columns: 1fr 1.3fr; gap: 12%; border-top: 1px solid var(--rule); margin-top: 110px; padding-top: 60px; }
.chapter-index { color: var(--acid); }
.about-chapter h3 { font-size: clamp(38px,4.5vw,72px); line-height: 1.05; font-weight: 500; letter-spacing: -.055em; margin: 0 0 30px; }
.about-chapter p { font-size: 20px; line-height: 1.65; color: var(--muted); max-width: 650px; margin: 0; }
.approach .section-heading h2 { font-size: clamp(44px,5.8vw,92px); }
.approach-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 5%; padding-top: 30px; }
.approach-steps article { border-top: 1px solid var(--rule); padding-top: 30px; }
.step-number { color: var(--acid); }
.approach-steps h3 { font-size: 30px; font-weight: 500; letter-spacing: -.04em; margin: 55px 0 20px; }
.approach-steps p { color: var(--muted); line-height: 1.7; font-size: 17px; }
.contact { padding-bottom: 0; }
.contact-title>span { color: var(--acid); }
.email { border-color: var(--rule); }
footer { flex-wrap: wrap; }
footer button,footer a { color: var(--foreground); }
.crt-overlay { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; background: repeating-linear-gradient(0deg,#0000000d 0px,#0000000d 1px,transparent 1px,transparent 4px); }
.crt-overlay:after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 100px #05091a16; }
.crt-beam { position: absolute; left: 0; right: 0; top: -20vh; height: 17vh; background: linear-gradient(transparent 0%,#d3e3ff08 42%,#fff3 50%,#d5e4ff0b 53%,transparent 100%); animation: broadcast-sweep 11s linear infinite; }
.no-crt .crt-overlay { display: none; }
.no-crt .transmission:after,.no-crt .screen-sweep { display: none; }
.no-crt .transmission-center p { filter: none; text-shadow: none; }
@keyframes broadcast-sweep { from { transform: translateY(0); } to { transform: translateY(140vh); } }
@media(min-width:1700px) { .about-chapter { gap: 14%; } }
@media(max-width:700px) {
  .entrance { height: 205svh; }
  .scene { top: 50%; }
  .intro-stage { background: radial-gradient(ellipse at 50% 45%,#24203e,#090a10 70%); }
  .intro-top { left: 22px; right: 22px; }
  .intro-bottom { bottom: 32px; }
  .intro-stage .intro-edition { display: none; }
  .intro-bottom>span:first-child { margin-bottom: 10px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .hero { padding-top: 30px; padding-bottom: 0; min-height: calc(100svh - 73px); }
  .hero h1 { margin-top: 85px; }
  .hero-bottom { margin-top: 35px; }
  .ticker { margin-top: 50px; }
  .about-grid { gap: 35px; }
  .about h2 { font-size: 56px; }
  .about-chapter { grid-template-columns: 1fr; gap: 30px; margin-top: 65px; padding-top: 30px; }
  .about-chapter h3 { font-size: 43px; }
  .about-chapter p { font-size: 18px; }
  .profile-facts { font-size: 11px; }
  .profile-facts>div { grid-template-columns: 60px 1fr; gap: 12px; }
  .approach-steps { grid-template-columns: 1fr; gap: 35px; }
  .approach-steps h3 { margin-top: 28px; }
  .approach .section-heading h2 { font-size: 43px; }
  .contact { padding-bottom: 0; }
  footer { gap: 3px 20px; }
  footer>.mono:first-child { width: 100%; }
  .crt-overlay { background: repeating-linear-gradient(0deg,#0000000a 0px,#0000000a 1px,transparent 1px,transparent 4px); }
}
@media(prefers-reduced-motion:reduce) {
  .crt-beam { display: none; }
}

.wordmark { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -.025em; }
h1,h2,h3,.contact-title h2,.about h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.025em; }
.hero h1 { font-size: clamp(116px,18vw,290px); line-height: .97; letter-spacing: -.025em; font-weight: 600; }
.hero-bottom p { letter-spacing: -.025em; }
.about-chapter h3,.approach-steps h3 { letter-spacing: -.015em; }
.quote blockquote { font-family: var(--display); font-size: clamp(40px,4.7vw,68px); letter-spacing: -.015em; }
.transmission-center p { font-family: var(--terminal); font-weight: 400; font-size: clamp(64px,7vw,110px); letter-spacing: 0; }
.mobile-start { display: none; }
.scene { opacity: 1; }
.screen-hit { z-index: 2; }
.screen-hit:disabled { pointer-events: none; }
.ticker { padding: 23px 0; }
.ticker-track { display: flex; width: max-content; animation: marquee-loop 32s linear infinite; will-change: transform; }
.ticker .ticker-group { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around; gap: 40px; min-width: 100vw; padding-right: 40px; }
.ticker .ticker-group>span { animation: none; display: block; flex: 0 0 auto; width: auto; font-size: 14px; white-space: nowrap; }
.ticker .ticker-separator { color: var(--acid); }
@keyframes marquee-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media(max-width:700px) {
  .entrance { height: 100svh; }
  .entrance:before { display: none; }
  .scene { display: none; }
  .intro-stage { background: #090d16; }
  .screen-hit { left: 50%; top: 50%; width: auto; height: auto; transform: translate(-50%,-50%); border-radius: 0; overflow: visible; padding: 24px; white-space: nowrap; }
  .mobile-start { display: block; font-family: var(--terminal); font-size: clamp(62px,18vw,90px); font-weight: 400; letter-spacing: .045em; color: #edf4ff; text-shadow: 2px 0 #638aff66,-1px 0 #c4e0ff88,0 0 20px #568bff33; }
  .mobile-start>span { font-size: .62em; vertical-align: .1em; padding-right: 10px; }
  .screen-hit:focus-visible:before { width: 78%; left: 11%; top: auto; bottom: 18px; height: 0; }
  .intro-stage #zoom-prompt { pointer-events: none; }
  .intro-stage #intro-arrow,.zoom-progress { display: none; }
  .hero h1 { font-size: 25vw; letter-spacing: -.025em; }
  .about h2 { font-size: 64px; }
  .quote blockquote { font-size: 43px; }
  .header .wordmark { font-size: 27px; }
  .intro-stage .wordmark { font-family: var(--display); }
  .ticker .ticker-group { gap: 30px; padding-right: 30px; }
}
@media(prefers-reduced-motion:reduce) {
  .ticker-track { animation: none; will-change: auto; }
  .scene { will-change: auto; }
}

.mobile-instruction { display: none; }
@media(max-width:700px) { .intro-stage #zoom-prompt { display: none; } .intro-bottom .mobile-instruction { display: block; padding-top: 15px; font-size: 12px; } }

/* Let the spacing and changing background separate the sections. */
.header,.ticker,.section-label,.profile-facts,.profile-facts>div,
.about-chapter,.approach-steps article,.services>div,footer {
  border: 0;
}

/* Broadcast captions: a larger terminal face keeps the pixel details readable. */
.mono { font-size: 18px; line-height: 1.25; letter-spacing: .025em; }
.language-switch button { font-size: 19px; }
.header nav { font-family: var(--terminal); font-size: 22px; }
.eyebrow,.section-label { font-size: 19px; }
.section-label { align-items: baseline; }
.chapter-index,.step-number { font-size: 20px; }
.about-signature>span { font-size: 18px; }
.transmission-top,.transmission-bottom,.work-foot,.profile-facts { font-size: 18px; }
.quote figcaption>span { font-size: 17px; }
.ticker .ticker-group>span { font-size: 22px; }
.approach-steps h3 { font-family: var(--terminal); font-size: 36px; font-weight: 400; letter-spacing: 0; }
.intro-top>span:nth-child(2) { font-size: 18px; }
.prompt>span:first-child { font-size: 19px; }
@media(max-width:700px) {
 .mono,.language-switch button { font-size: 16px; }
 .header nav { font-size: 19px; }
 .header .language-switch button { font-size: 17px; }
 .eyebrow,.section-label { font-size: 17px; }
 .section-label { gap: 20px; }
 .section-label>span { min-width: 0; }
 .section-label>span:last-child { flex: 0 1 44%; max-width: 150px; }
 .chapter-index,.step-number { font-size: 19px; }
 .profile-facts,.transmission-top,.transmission-bottom,.work-foot { font-size: 16px; }
 .quote figcaption>span,footer .mono { font-size: 16px; }
 .ticker .ticker-group>span { font-size: 20px; }
 .intro-top>span:nth-child(2) { font-size: 14px; }
 .intro-bottom>span:first-child { font-size: 15px; }
 .intro-bottom .mobile-instruction { font-size: 18px; }
 .approach-steps h3 { font-size: 34px; }
}