@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --blue:#2563eb; --ink:#0a0a0a; --cream:#f1efe8; --white:#fffdf7; --night:#090119; --line:rgba(10,10,10,.18); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"Inter",sans-serif; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button { color:inherit; }
main { overflow:hidden; }
.site-header { height:92px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(24px,5vw,80px); border-bottom:1px solid var(--line); position:relative; z-index:20; }
.brand { display:flex; align-items:center; gap:12px; width:max-content; font-family:"Space Grotesk",sans-serif; font-weight:700; letter-spacing:.16em; }
.brand img { width:31px; height:31px; object-fit:contain; }
#site-nav { display:flex; align-items:center; gap:34px; font-size:14px; font-weight:500; }
#site-nav a { position:relative; }
#site-nav a:after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--blue); transition:.3s; }
#site-nav a:hover:after { width:100%; }
.header-cta { justify-self:end; border:1px solid var(--ink); border-radius:999px; padding:12px 17px; font-size:14px; font-weight:600; transition:.25s; }
.header-cta:hover { background:var(--ink); color:white; }
.header-cta span { margin-left:14px; }
.menu-button { display:none; background:none; border:0; }
.hero { min-height:calc(100vh - 92px); padding:clamp(28px,4vw,58px) clamp(24px,7.4vw,112px) 42px; display:flex; flex-direction:column; position:relative; }
.hero-kicker { display:flex; justify-content:space-between; text-transform:uppercase; font-size:11px; font-weight:600; letter-spacing:.18em; }
.hero-kicker span:before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--blue); margin-right:10px; }
.hero h1 { font-family:"Space Grotesk",sans-serif; font-size:clamp(58px,8.4vw,126px); line-height:.86; letter-spacing:-.075em; font-weight:600; margin:auto 0 44px; max-width:1180px; position:relative; z-index:2; }
.hero h1 em,.intro h2 em,.process h2 em,.about h2 em,.contact h2 em,footer h2 em { color:var(--blue); font-style:normal; }
.hero-mark { position:absolute; width:clamp(220px,31vw,470px); aspect-ratio:1; right:6vw; top:14%; opacity:.14; display:grid; place-items:center; }
.hero-mark img { width:42%; animation:float 5s ease-in-out infinite; }
.orbit { position:absolute; inset:0; border:1px solid var(--ink); border-radius:50%; animation:spin 18s linear infinite; }
.orbit:after { content:""; width:14px; height:14px; background:var(--blue); border-radius:50%; position:absolute; top:17%; right:9%; }
.orbit-two { inset:15%; animation-duration:12s; animation-direction:reverse; }
.hero-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }
.hero-bottom>p { width:min(520px,60%); font-size:clamp(16px,1.4vw,20px); line-height:1.55; }
.round-link { width:128px; height:128px; border-radius:50%; background:var(--blue); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; font-weight:600; transition:.3s; }
.round-link:hover { transform:rotate(-8deg) scale(1.05); }
.round-link b { font-size:25px; }
.marquee { background:var(--blue); color:#fff; transform:rotate(-1.5deg) scale(1.02); white-space:nowrap; overflow:hidden; padding:18px 0; font-family:"Space Grotesk",sans-serif; font-size:clamp(21px,2.8vw,42px); font-weight:600; }
.marquee div { width:max-content; animation:marquee 26s linear infinite; }
.marquee i { color:var(--night); font-style:normal; margin:0 22px; }
.dark-section { background:var(--night); color:#e9e0df; }
.intro { padding:clamp(110px,14vw,210px) clamp(24px,7.4vw,112px); display:grid; grid-template-columns:1fr 2.4fr; gap:60px; }
.section-label { text-transform:uppercase; letter-spacing:.18em; font-size:11px; font-weight:600; }
.intro h2,.section-heading h2,.about h2,.contact h2,footer h2 { font-family:"Space Grotesk",sans-serif; font-size:clamp(48px,7vw,102px); line-height:.94; letter-spacing:-.06em; margin:0; }
.intro h2 { grid-column:2; }
.intro-copy { grid-column:2; max-width:680px; font-size:clamp(18px,2vw,28px); line-height:1.45; }
.work,.services,.process { padding:clamp(90px,10vw,150px) clamp(24px,7.4vw,112px); }
.section-heading { display:grid; grid-template-columns:1fr 2fr; gap:20px 60px; margin-bottom:80px; align-items:end; }
.section-heading h2 { grid-column:2; }
.section-heading>p:last-child { grid-column:2; max-width:650px; font-size:17px; line-height:1.65; }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:70px 30px; }
.project-card { color:#fff; }
.concept-art { height:clamp(320px,43vw,620px); position:relative; overflow:hidden; display:grid; place-items:center; transition:.45s cubic-bezier(.2,.8,.2,1); }
.project-card:hover .concept-art { transform:translateY(-8px); border-radius:0 0 80px 0; }
.concept-art span { font-family:"Space Grotesk"; font-size:clamp(160px,27vw,390px); line-height:.7; font-weight:700; color:rgba(255,255,255,.88); z-index:2; }
.concept-art i { position:absolute; width:72%; height:72%; border-radius:50%; border:2px solid rgba(255,255,255,.55); box-shadow:0 0 0 40px rgba(255,255,255,.1),0 0 0 80px rgba(255,255,255,.08); animation:pulse 4s ease-in-out infinite; }
.concept-art b { position:absolute; top:24px; right:24px; font-size:12px; letter-spacing:.18em; }
.cobalt .concept-art { background:#2457e6; }.acid .concept-art { background:#a8c900; }.coral .concept-art { background:#f05f42; }.lilac .concept-art { background:#a286f2; }
.project-meta { display:flex; justify-content:space-between; gap:20px; padding-top:20px; border-top:1px solid rgba(255,255,255,.25); margin-top:20px; }
.project-meta p { margin:0 0 5px; font-size:12px; text-transform:uppercase; letter-spacing:.12em; opacity:.72; }
.project-meta h3 { font-family:"Space Grotesk"; font-size:clamp(27px,3vw,42px); margin:0; }
.project-meta>span { font-size:11px; text-transform:uppercase; letter-spacing:.12em; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:8px 11px; height:max-content; white-space:nowrap; }
.services { background:var(--cream); }
.service-list { border-top:1px solid var(--ink); }
.service { border-bottom:1px solid var(--ink); }
.service>button { width:100%; display:grid; grid-template-columns:60px 180px 1fr 40px; align-items:center; text-align:left; border:0; background:none; padding:32px 0; cursor:pointer; }
.service button>span,.service button>small { font-size:11px; letter-spacing:.15em; text-transform:uppercase; }
.service button h3 { font-family:"Space Grotesk"; font-size:clamp(32px,5vw,70px); letter-spacing:-.045em; margin:0; }
.service button>b { font-size:34px; font-weight:400; }
.service-detail { max-height:0; overflow:hidden; opacity:0; display:grid; grid-template-columns:1fr 1fr; padding-left:240px; transition:.5s ease; }
.service.active .service-detail { max-height:300px; opacity:1; padding-bottom:38px; }
.service-detail p { font-size:17px; line-height:1.6; max-width:460px; }
.service-detail ul { margin:0; padding:0; list-style:none; }
.service-detail li { padding:9px 0; border-bottom:1px solid var(--line); }
.process { background:var(--blue); color:white; }
.process .section-label,.process .section-heading>p:last-child { color:white; }
.process h2 em { color:var(--night); }
.process ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.5); }
.process li { padding:28px 25px 44px 0; border-right:1px solid rgba(255,255,255,.35); min-height:270px; }
.process li+li { padding-left:25px; }
.process li:last-child { border:0; }
.process li span { font-size:11px; letter-spacing:.15em; }
.process li h3 { font-family:"Space Grotesk"; font-size:clamp(30px,3vw,46px); margin:76px 0 14px; }
.process li p { line-height:1.6; opacity:.8; }
.about { display:grid; grid-template-columns:1fr 1fr; min-height:820px; }
.about-visual { background:var(--ink); color:#fff; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:hidden; }
.about-visual>div { width:56%; aspect-ratio:1; border:1px solid rgba(255,255,255,.25); border-radius:50%; display:grid; place-items:center; box-shadow:0 0 0 50px rgba(37,99,235,.2),0 0 0 100px rgba(37,99,235,.1); }
.about-visual img { width:48%; }
.about-visual p { margin-top:130px; text-transform:uppercase; font-size:11px; letter-spacing:.18em; }
.about-visual p span { color:var(--blue); margin:0 12px; }
.about-copy { padding:clamp(70px,8vw,120px); display:flex; flex-direction:column; justify-content:center; }
.about-copy>p:nth-of-type(2) { font-size:18px; line-height:1.7; max-width:650px; margin-top:40px; }
.founder { display:flex; align-items:center; gap:14px; margin-top:45px; }
.founder>span { width:54px; height:54px; border-radius:50%; background:var(--blue); color:white; display:grid; place-items:center; font-weight:600; }
.founder div { display:flex; flex-direction:column; gap:4px; }.founder small { color:#6b6b67; }
.contact { padding:clamp(90px,11vw,170px) clamp(24px,7.4vw,112px); display:grid; grid-template-columns:1fr 1fr; gap:9vw; background:var(--white); }
.contact-copy>p:nth-of-type(2) { font-size:18px; line-height:1.6; max-width:560px; margin:40px 0; }
.contact-copy>a { font-family:"Space Grotesk"; color:var(--blue); font-size:clamp(21px,2vw,30px); font-weight:600; border-bottom:2px solid; }
.contact-form { display:flex; flex-direction:column; gap:26px; }
.contact-form label { display:flex; flex-direction:column; gap:9px; text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:600; }
.contact-form input,.contact-form select,.contact-form textarea { border:0; border-bottom:1px solid var(--ink); background:transparent; border-radius:0; padding:10px 0 14px; outline:none; text-transform:none; letter-spacing:normal; font-size:16px; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { border-color:var(--blue); }
.contact-form button { background:var(--blue); color:white; border:0; padding:18px 22px; display:flex; justify-content:space-between; font-weight:600; cursor:pointer; transition:.25s; }
.contact-form button:hover { background:var(--ink); }
.form-note { margin:0; font-size:12px; color:#686866; }
.hp-field { position:absolute!important; left:-9999px!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; }
.contact-form button:disabled { opacity:.6; cursor:wait; }
footer { background:var(--night); color:#eee5e2; padding:clamp(80px,9vw,130px) clamp(24px,7.4vw,112px) 36px; }
.footer-top { display:flex; justify-content:space-between; align-items:flex-start; gap:60px; padding-bottom:100px; }
.footer-brand img { width:44px; height:44px; }.footer-top h2 { font-size:clamp(50px,7.2vw,104px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.25); padding-top:25px; display:grid; grid-template-columns:1fr auto 1fr; font-size:12px; align-items:center; }
.footer-bottom div { display:flex; gap:26px; }.footer-bottom>a { justify-self:end; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes float { 50% { transform:translateY(-15px) rotate(3deg); } } @keyframes pulse { 50% { transform:scale(.92); } } @keyframes marquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.orbit,.hero-mark img,.concept-art i,.marquee div{animation:none}.reveal{opacity:1;transform:none} }
@media (max-width:900px) {
  .site-header { grid-template-columns:1fr auto; height:76px; padding:0 22px; }.header-cta{display:none}.menu-button{display:flex; align-items:center; gap:6px; border:1px solid var(--ink); border-radius:999px; padding:9px 12px}.menu-button i{width:4px;height:4px;background:var(--blue);border-radius:50%}
  #site-nav { position:absolute; top:76px; left:0; right:0; background:var(--night); color:white; padding:35px 22px; flex-direction:column; align-items:flex-start; font-family:"Space Grotesk"; font-size:28px; transform:translateY(-130%); transition:.35s; z-index:-1; }#site-nav.open{transform:none}
  .hero { min-height:760px; padding:28px 22px 34px }.hero-kicker b{display:none}.hero h1{font-size:clamp(58px,15vw,86px);margin:auto 0 35px}.hero-mark{right:-60px;top:23%;width:320px}.hero-bottom{align-items:center}.hero-bottom>p{width:65%;font-size:14px}.round-link{width:96px;height:96px;font-size:13px}
  .intro,.section-heading { grid-template-columns:1fr; }.intro h2,.intro-copy,.section-heading h2,.section-heading>p:last-child { grid-column:1; }.intro{gap:24px}.section-heading{margin-bottom:52px}.section-heading h2{margin-top:10px}
  .project-grid { grid-template-columns:1fr; gap:55px }.concept-art{height:112vw;max-height:560px}.project-meta>span{font-size:9px}
  .service>button { grid-template-columns:45px 1fr 35px; }.service button small{display:none}.service button h3{font-size:35px}.service-detail{padding-left:45px;grid-template-columns:1fr}.service.active .service-detail{max-height:440px}
  .process ol { grid-template-columns:1fr 1fr }.process li:nth-child(2){border-right:0}.process li{border-bottom:1px solid rgba(255,255,255,.35)}
  .about,.contact { grid-template-columns:1fr }.about-visual{min-height:620px}.about-visual p{margin-top:100px}.about-copy{padding:80px 24px}.contact{gap:70px}
  .footer-top{flex-direction:column}.footer-bottom{grid-template-columns:1fr;gap:25px}.footer-bottom>a{justify-self:start}
}
@media (max-width:520px) { .process ol{grid-template-columns:1fr}.process li{border-right:0;padding:25px 0!important;min-height:220px}.process li h3{margin-top:50px}.project-meta{flex-direction:column}.footer-bottom div{flex-wrap:wrap}.marquee{font-size:20px}.about-visual{min-height:520px} }