:root { --green:#082d24; --green-2:#0f493b; --paper:#f0efe7; --red:#ec212c; --ink:#101511; --line:rgba(240,239,231,.28); --pad:clamp(18px,3.2vw,52px); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; color:var(--paper); background:var(--green); font-family:"DM Sans",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.lab-header { position:absolute; z-index:20; top:0; left:0; width:100%; padding:22px var(--pad); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.08em; }
.lab-brand { font-size:21px; font-weight:700; }.lab-brand span { color:var(--red); font-size:10px; vertical-align:top; }
.lab-status i { display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#4dff90; box-shadow:0 0 12px #4dff90; animation:blink 1.8s ease infinite; }
.lab-back { justify-self:end; display:flex; align-items:center; gap:12px; }.lab-back b { width:38px; height:38px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:16px; transition:.3s; }.lab-back:hover b { color:var(--paper); background:var(--red); border-color:var(--red); transform:rotate(45deg); }
.web-hero { position:relative; min-height:100svh; padding:125px var(--pad) 34px; display:flex; flex-direction:column; overflow:hidden; }
.hero-code { font:9px/1.55 "Space Mono",monospace; letter-spacing:.1em; }
.web-hero h1 { position:relative; z-index:2; margin:auto 0; font-size:clamp(78px,15.8vw,250px); font-weight:400; line-height:.7; letter-spacing:-.095em; }.web-hero h1 span { display:block; }.web-hero h1 span:last-child { margin-left:8vw; color:var(--red); }
.hero-note { position:absolute; z-index:3; right:var(--pad); top:24%; font:9px/1.5 "Space Mono",monospace; letter-spacing:.1em; }
.hero-orbit { position:absolute; right:12vw; top:16%; width:min(31vw,460px); aspect-ratio:1; border:1px solid rgba(240,239,231,.25); border-radius:50%; animation:orbit 17s linear infinite; }.hero-orbit::before,.hero-orbit::after { content:""; position:absolute; border:1px solid rgba(240,239,231,.15); border-radius:50%; }.hero-orbit::before { inset:14%; }.hero-orbit::after { inset:31%; background:var(--red); border:0; }.hero-orbit i { position:absolute; z-index:2; inset:31%; display:grid; place-items:center; border-radius:50%; font:700 clamp(13px,2vw,28px) "Space Mono"; }.hero-orbit span { position:absolute; left:7%; top:15%; width:14px; height:14px; border-radius:50%; background:var(--paper); }
.hero-action { display:flex; justify-content:space-between; align-items:center; padding-top:17px; border-top:1px solid var(--line); font:10px "Space Mono"; letter-spacing:.12em; }.hero-action i { width:53px; height:53px; display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; font-size:19px; font-style:normal; transition:.35s; }.hero-action:hover i { color:var(--paper); background:var(--red); border-color:var(--red); transform:rotate(45deg); }
.ticker { overflow:hidden; color:var(--green); background:var(--red); transform:rotate(-1.5deg) scale(1.03); }.ticker div { width:max-content; padding:14px 0; font:700 17px "Space Mono"; white-space:nowrap; animation:ticker 22s linear infinite; }
.manifesto { min-height:110vh; padding:150px var(--pad); display:grid; grid-template-columns:.55fr 1.55fr .55fr; gap:4vw; align-items:start; }.manifesto > p,.manifesto-side span { margin:0; font:9px/1.5 "Space Mono"; letter-spacing:.1em; }.manifesto h2 { margin:0; font-size:clamp(54px,8vw,128px); font-weight:400; line-height:.82; letter-spacing:-.065em; }.manifesto h2 em { color:var(--red); font-style:normal; }.manifesto-side p { margin:45px 0 0; color:rgba(240,239,231,.66); font-size:13px; line-height:1.55; }
.reveal { opacity:0; transform:translateY(45px); transition:opacity .7s,transform .9s cubic-bezier(.16,.75,.2,1); }.reveal.is-visible { opacity:1; transform:none; }
.browser-lab { min-height:125vh; padding:110px var(--pad); color:var(--ink); background:var(--paper); }.lab-copy { display:grid; grid-template-columns:.5fr 1.5fr .55fr; gap:4vw; align-items:end; }.lab-copy > span { font:9px "Space Mono"; }.lab-copy h2 { margin:0; font-size:clamp(50px,8vw,126px); font-weight:400; line-height:.8; letter-spacing:-.07em; }.lab-copy p { margin:0; font-size:13px; }
.browser-stage { position:relative; height:760px; margin-top:100px; perspective:1200px; }.browser-card { position:absolute; width:min(62vw,850px); height:520px; overflow:hidden; border:1px solid #999; border-radius:20px; box-shadow:0 35px 90px rgba(0,0,0,.22); cursor:pointer; transition:transform .65s cubic-bezier(.16,.75,.2,1),left .65s cubic-bezier(.16,.75,.2,1),right .65s cubic-bezier(.16,.75,.2,1),top .65s cubic-bezier(.16,.75,.2,1),filter .45s ease; }.browser-card--one { color:var(--paper); background:var(--green); }.browser-card--two { color:var(--paper); background:var(--red); }.browser-card--three { color:var(--green); background:#c6ff68; }.browser-stage .browser-card.is-back { z-index:1; left:1%; right:auto; top:5%; filter:saturate(.72) brightness(.82); transform:rotate(-6deg) scale(.94); }.browser-stage .browser-card.is-middle { z-index:2; left:18%; right:auto; top:15%; filter:saturate(.88) brightness(.92); transform:rotate(3deg) scale(.97); }.browser-stage .browser-card.is-front { z-index:3; left:auto; right:1%; top:25%; filter:none; transform:rotate(-1deg) scale(1); }.browser-stage .browser-card.is-front:hover { transform:translateY(-10px) rotate(0) scale(1.01); }
.browser-top { height:43px; padding:0 16px; display:flex; align-items:center; gap:7px; border-bottom:1px solid currentColor; font:8px "Space Mono"; }.browser-top i { width:8px; height:8px; border:1px solid currentColor; border-radius:50%; }.browser-top span { margin-left:12px; }.browser-content { height:calc(100% - 43px); padding:32px; display:flex; flex-direction:column; }.browser-content small { font:8px "Space Mono"; }.browser-content strong { margin:auto 0; font-size:clamp(46px,6vw,88px); font-weight:400; line-height:.78; letter-spacing:-.06em; }.browser-content b { align-self:end; width:55px; height:55px; display:grid; place-items:center; border:1px solid; border-radius:50%; font-size:20px; }
.deliverables { padding:130px var(--pad); color:var(--paper); background:var(--green); }.deliverables-title { display:grid; grid-template-columns:.5fr 1.5fr; gap:4vw; padding-bottom:90px; }.deliverables-title span { font:9px "Space Mono"; }.deliverables-title h2 { margin:0; font-size:clamp(58px,9vw,140px); font-weight:400; line-height:.8; letter-spacing:-.07em; }.deliverables-list { border-top:1px solid var(--line); }.deliverables-list article { display:grid; grid-template-columns:50px 1fr 1fr 65px; align-items:center; gap:25px; min-height:130px; border-bottom:1px solid var(--line); transition:background .3s,padding .3s; }.deliverables-list article:hover { padding:0 18px; background:var(--green-2); }.deliverables-list article > span { font:9px "Space Mono"; color:var(--red); }.deliverables-list h3 { margin:0; font-size:clamp(25px,3vw,46px); font-weight:400; }.deliverables-list p { width:min(390px,100%); margin:0; color:rgba(240,239,231,.6); font-size:12px; line-height:1.5; }.deliverables-list i { width:48px; height:48px; display:grid; place-items:center; border:1px solid; border-radius:50%; font-style:normal; }
.capability-map { padding:140px var(--pad); color:var(--paper); background:#041b16; }
.capability-heading { display:grid; grid-template-columns:.45fr 1.45fr .62fr; gap:4vw; align-items:start; padding-bottom:95px; }.capability-heading > span { font:9px "Space Mono"; }.capability-heading h2 { margin:0; font-size:clamp(52px,7.7vw,122px); font-weight:400; line-height:.8; letter-spacing:-.07em; }.capability-heading h2 em { color:var(--red); font-style:normal; }.capability-heading p { margin:8px 0 0; color:rgba(240,239,231,.64); font-size:13px; line-height:1.55; }
.capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }.capability-card { position:relative; min-height:570px; padding:clamp(25px,3vw,48px); overflow:hidden; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .35s; }.capability-card:hover { background:rgba(255,255,255,.045); }.capability-card--horeca { grid-column:1 / -1; min-height:620px; background:linear-gradient(120deg,rgba(236,33,44,.2),transparent 55%); }.capability-card small { color:rgba(240,239,231,.48); font:8px "Space Mono"; letter-spacing:.1em; }.capability-card h3 { margin:85px 0 24px; font-size:clamp(40px,5.2vw,82px); font-weight:400; line-height:.83; letter-spacing:-.055em; }.capability-card p { width:min(430px,90%); margin:0; color:rgba(240,239,231,.65); font-size:12px; line-height:1.5; }.capability-card ul { position:absolute; left:clamp(25px,3vw,48px); right:clamp(25px,3vw,48px); bottom:38px; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:7px; list-style:none; }.capability-card li { padding:7px 10px; border:1px solid rgba(240,239,231,.28); border-radius:999px; font:8px "Space Mono"; text-transform:uppercase; }.capability-card--horeca h3,.capability-card--horeca p { width:47%; }.capability-signal { position:absolute; right:8%; top:17%; width:330px; height:330px; border:1px solid rgba(255,255,255,.18); border-radius:50%; animation:orbit 18s linear infinite; }.capability-signal::before,.capability-signal::after { content:""; position:absolute; border:1px solid rgba(255,255,255,.14); border-radius:50%; }.capability-signal::before { inset:16%; }.capability-signal::after { inset:34%; background:var(--red); border:0; }.capability-signal i { position:absolute; width:13px; height:13px; border-radius:50%; background:var(--paper); }.capability-signal i:nth-child(1){left:8%;top:27%}.capability-signal i:nth-child(2){right:3%;top:48%}.capability-signal i:nth-child(3){left:46%;bottom:-6px}.capability-bottom { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:25px; padding-top:35px; font:9px "Space Mono"; letter-spacing:.1em; }.capability-bottom i { height:1px; background:var(--line); }
.process { min-height:180vh; padding:0 var(--pad); display:grid; grid-template-columns:1fr 1fr; gap:6vw; color:var(--ink); background:#c6ff68; }.process-sticky { position:sticky; top:0; height:100vh; padding:100px 0; display:flex; flex-direction:column; }.process-sticky > span { font:9px "Space Mono"; }.process-sticky h2 { margin:auto 0; font-size:clamp(58px,8vw,125px); font-weight:400; line-height:.78; letter-spacing:-.07em; }.process-disc { position:absolute; right:3%; bottom:11%; width:150px; height:150px; display:grid; place-items:center; border:1px solid; border-radius:50%; animation:orbit 10s linear infinite; }.process-disc i { position:absolute; top:-6px; width:12px; height:12px; border-radius:50%; background:var(--red); }.process-disc b { font:10px "Space Mono"; }.process-steps { padding:58vh 0 20vh; }.process-steps article { min-height:260px; padding:35px 0; border-top:1px solid rgba(10,10,10,.35); }.process-steps b { color:var(--red); font:10px "Space Mono"; }.process-steps h3 { margin:38px 0 18px; font-size:clamp(32px,4vw,61px); font-weight:400; }.process-steps p { width:min(390px,90%); font-size:13px; line-height:1.55; }
.web-brief { min-height:100svh; padding:70px var(--pad); display:flex; flex-direction:column; color:var(--paper); background:var(--red); }.brief-top { display:flex; justify-content:space-between; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.45); font:9px "Space Mono"; }.web-brief h2 { margin:auto 0; font-size:clamp(56px,10vw,155px); font-weight:400; line-height:.78; letter-spacing:-.075em; }.web-brief h2 em { color:var(--green); font-style:normal; }.web-brief > a { display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.45); padding-top:18px; font:11px "Space Mono"; }.web-brief > a i { width:58px; height:58px; display:grid; place-items:center; border:1px solid; border-radius:50%; font-size:20px; font-style:normal; transition:.3s; }.web-brief > a:hover i { color:var(--paper); background:var(--green); border-color:var(--green); transform:rotate(45deg); }
.lab-footer { padding:22px var(--pad); display:flex; justify-content:space-between; color:var(--paper); background:var(--green); border-top:1px solid var(--line); font:8px "Space Mono"; }
@keyframes blink { 50% { opacity:.25; } } @keyframes orbit { to { transform:rotate(360deg); } } @keyframes ticker { to { transform:translateX(-50%); } }
@media (max-width:760px) {
  .lab-header { grid-template-columns:1fr auto; padding:14px 15px; }.lab-status { display:none; }.lab-back { font-size:0; }.lab-back b { font-size:16px; }
  .web-hero { padding:95px 15px 20px; }.web-hero h1 { font-size:21vw; line-height:.76; }.web-hero h1 span:last-child { margin-left:0; }.hero-note { top:20%; right:15px; font-size:7px; }.hero-orbit { right:-25%; top:25%; width:85vw; opacity:.6; }.hero-code { font-size:7px; }
  .manifesto { padding:100px 15px; grid-template-columns:1fr; gap:65px; }.manifesto h2 { font-size:15vw; }.manifesto-side { width:84%; margin-left:auto; }
  .browser-lab { padding:85px 15px; }.lab-copy { grid-template-columns:1fr; gap:30px; }.lab-copy h2 { font-size:15vw; }.browser-stage { height:650px; margin-top:70px; }.browser-card { width:91%; height:410px; }.browser-card--two { left:5%; }.browser-card--three { right:0; }.browser-content strong { font-size:12vw; }
  .deliverables { padding:90px 15px; }.deliverables-title { grid-template-columns:1fr; gap:30px; }.deliverables-title h2 { font-size:16vw; }.deliverables-list article { grid-template-columns:30px 1fr 45px; gap:12px; min-height:115px; }.deliverables-list p { display:none; }.deliverables-list i { width:38px; height:38px; }
  .capability-map { padding:95px 15px; }.capability-heading { grid-template-columns:1fr; gap:30px; padding-bottom:65px; }.capability-heading h2 { font-size:15vw; }.capability-heading p { width:88%; }.capability-grid { grid-template-columns:1fr; }.capability-card,.capability-card--horeca { grid-column:auto; min-height:610px; padding:28px 18px; }.capability-card h3 { margin-top:65px; font-size:14vw; }.capability-card--horeca h3,.capability-card--horeca p { width:100%; }.capability-card ul { left:18px; right:18px; bottom:25px; }.capability-signal { right:-35%; top:32%; width:280px; height:280px; opacity:.38; }.capability-bottom { grid-template-columns:1fr; gap:13px; }.capability-bottom i { display:none; }
  .process { min-height:auto; padding:0 15px; grid-template-columns:1fr; }.process-sticky { position:relative; height:80vh; }.process-sticky h2 { font-size:17vw; }.process-steps { padding:0 0 90px; }.process-steps article { min-height:230px; }
  .web-brief { padding:55px 15px 25px; }.web-brief h2 { font-size:17vw; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }