:root { --blue: #1744eb; --black: #050505; --white: #fff; --paper: #f3f3f0; --line: #d7d7d2; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--black); background: var(--black); font-family: "Deuterium", "Arial Black", "Helvetica Neue", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.dark-section { color: var(--white); background: var(--black); }
.light-section { background: var(--paper); }
.blue-section { color: var(--white); background: var(--blue); }
.site-header { height: 86px; padding: 0 5vw; display: flex; align-items: center; justify-content: space-between; color: white; background: rgba(5,5,5,.94); border-bottom: 1px solid #222; position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); }
.brand img { width: 156px; height: auto; display: block; }
.site-header nav { display: flex; gap: 34px; font-family: Arial, sans-serif; font-size: 14px; }
.site-header nav a { color: #b7b7b7; transition: color .2s; }
.site-header nav a:hover { color: white; }
.header-cta { min-width: 138px; padding: 13px 17px; display: flex; justify-content: space-between; border: 1px solid #424242; border-radius: 999px; font: 600 14px Arial, sans-serif; }
.header-cta span { color: var(--blue); }
.hero { min-height: calc(100vh - 86px); padding: 7vw 5vw 44px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; }
.hero-grid { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(#313131 1px, transparent 1px), linear-gradient(90deg, #313131 1px, transparent 1px); background-size: 80px 80px; mask-image: linear-gradient(to bottom, black, transparent 84%); }
.hero-copy { position: relative; z-index: 2; max-width: 820px; }
.eyebrow, .section-kicker { margin: 0 0 25px; text-transform: uppercase; letter-spacing: .18em; font: 700 12px Arial, sans-serif; }
.eyebrow { color: #b8b8b8; }
.eyebrow span { width: 34px; height: 2px; display: inline-block; margin: 0 11px 3px 0; background: var(--blue); }
.hero h1 { max-width: 820px; margin: 0; font-size: clamp(60px, 7.2vw, 118px); line-height: .89; letter-spacing: -.065em; }
.hero h1 em, .contact h2 em { color: var(--blue); font-style: normal; }
.hero-intro { max-width: 630px; margin: 35px 0 0; color: #bcbcbc; font: 400 clamp(17px, 1.4vw, 21px)/1.65 Arial, sans-serif; }
.hero-actions { margin-top: 40px; display: flex; align-items: center; gap: 32px; }
.button { padding: 16px 21px; border-radius: 4px; font: 700 14px Arial, sans-serif; }
.button span { margin-left: 34px; }
.button-primary { background: var(--blue); transition: transform .2s, background .2s; }
.button-primary:hover { background: #315bff; transform: translateY(-2px); }
.text-link { border-bottom: 1px solid #777; padding: 12px 0; font: 600 14px Arial, sans-serif; }
.text-link span { margin-left: 18px; color: var(--blue); }
.hero-visual { width: min(42vw, 570px); aspect-ratio: 1; position: relative; justify-self: end; z-index: 1; }
.orbit { position: absolute; border: 1px solid #353535; border-radius: 50%; }
.orbit-one { inset: 2%; animation: spin 30s linear infinite; }
.orbit-one:before, .orbit-two:before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); position: absolute; top: 10%; left: 21%; box-shadow: 0 0 24px var(--blue); }
.orbit-two { inset: 16%; border-style: dashed; animation: spin 22s linear infinite reverse; }
.orbit-two:before { top: auto; left: auto; right: 4%; bottom: 30%; }
.r-mark, .about-mark { display: grid; place-items: center; }
.r-mark { position: absolute; inset: 27%; filter: drop-shadow(0 0 42px rgba(23,68,235,.28)); }
.r-mark img { width: 74%; height: 74%; object-fit: contain; }
.visual-label { position: absolute; padding: 8px 11px; color: #aaa; background: #0a0a0a; border: 1px solid #333; font: 700 9px Arial, sans-serif; letter-spacing: .15em; }
.label-one { top: 8%; right: 12%; }.label-two { bottom: 17%; left: 5%; }.label-three { right: 0; bottom: 35%; }
.hero-foot { position: absolute; bottom: 24px; left: 5vw; z-index: 2; display: flex; gap: 15px; align-items: center; color: #777; font: 700 11px Arial, sans-serif; text-transform: uppercase; letter-spacing: .17em; }
.hero-foot i { width: 4px; height: 4px; background: var(--blue); border-radius: 50%; }
@keyframes spin { to { transform: rotate(360deg); } }

.statement { padding: 11vw 12vw; text-align: center; border-bottom: 1px solid var(--line); }
.section-kicker { color: var(--blue); }
.statement h2 { max-width: 1050px; margin: 0 auto; font-size: clamp(42px, 5.4vw, 82px); line-height: 1.03; letter-spacing: -.055em; }
.statement h2 strong { color: var(--blue); font-weight: inherit; }
.statement > p:last-child { max-width: 720px; margin: 35px auto 0; color: #666; font: 18px/1.7 Arial, sans-serif; }
.services, .projects { padding: 9vw 5vw; }
.section-heading { display: grid; grid-template-columns: 1fr 420px; gap: 8vw; align-items: end; margin-bottom: 60px; }
.section-heading h2, .process h2, .about h2 { max-width: 760px; margin: 0; font-size: clamp(42px, 5vw, 75px); line-height: 1; letter-spacing: -.055em; }
.section-heading > p { margin: 0; color: #6e6e6e; font: 16px/1.7 Arial, sans-serif; }
.service-list { border-top: 1px solid var(--line); }
.service-card { min-height: 250px; padding: 36px 0; display: grid; grid-template-columns: 70px 1.1fr 1fr .75fr 60px; gap: 30px; align-items: start; position: relative; border-bottom: 1px solid var(--line); transition: padding .25s, background .25s; }
.service-card:hover { padding-left: 20px; padding-right: 20px; background: white; }
.service-number { color: var(--blue); font: 700 13px Arial, sans-serif; }
.service-card h3 { margin: 0; font-size: clamp(25px, 2.5vw, 40px); letter-spacing: -.04em; }
.service-card > p { max-width: 420px; margin: 0; color: #686868; font: 16px/1.65 Arial, sans-serif; }
.service-card ul { margin: 0; padding: 0; list-style: none; color: #565656; font: 13px/2 Arial, sans-serif; }
.service-card li:before { content: "—"; color: var(--blue); margin-right: 8px; }
.card-arrow { width: 47px; height: 47px; display: grid; place-items: center; justify-self: end; border: 1px solid #bbb; border-radius: 50%; color: var(--blue); font-size: 21px; }

.projects { background: #090909; }
.projects .section-heading > p { color: #888; }
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 70px 24px; }
.project-preview { height: 430px; position: relative; overflow: hidden; background: #151515; }
.project-preview > img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s; }
.project-card:hover .project-preview > img { transform: scale(1.035); filter: saturate(1.06); }
.project-index { position: absolute; top: 20px; left: 20px; color: currentColor; opacity: .65; font: 700 11px Arial, sans-serif; letter-spacing: .15em; }
.project-index { padding: 8px 10px; color: white; background: rgba(5,5,5,.72); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; backdrop-filter: blur(8px); }
.project-meta { padding: 20px 2px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2a2a2a; }
.project-meta span { color: #777; text-transform: uppercase; letter-spacing: .15em; font: 700 10px Arial, sans-serif; }
.project-meta h3 { margin: 7px 0 0; font-size: 27px; letter-spacing: -.035em; }
.project-meta .project-arrow { width: 42px; height: 42px; display: grid; place-items: center; color: var(--blue); border: 1px solid #333; border-radius: 50%; font-size: 19px; }

.technologies { padding: 9vw 5vw; border-bottom: 1px solid var(--line); }
.technology-heading { display: grid; grid-template-columns: 1fr 420px; gap: 8vw; align-items: end; margin-bottom: 60px; }
.technology-heading h2 { margin: 0; font-size: clamp(52px, 7vw, 105px); line-height: .9; letter-spacing: -.065em; }
.technology-heading > p { margin: 0; color: #666; font: 16px/1.7 Arial, sans-serif; }
.technology-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.technology-card { min-height: 190px; padding: 28px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; position: relative; background: rgba(255,255,255,.18); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: color .25s, background .25s, transform .25s; }
.technology-card img { width: 48px; height: 48px; object-fit: contain; transition: filter .25s, transform .25s; }
.technology-plus { width: 48px; height: 48px; display: grid; place-items: center; color: var(--blue); border: 1px solid var(--blue); border-radius: 50%; font: 300 32px/1 Arial, sans-serif; transition: color .25s, border-color .25s, transform .25s; }
.technology-card h3 { margin: 34px 0 0; align-self: end; font-size: 22px; letter-spacing: -.03em; }
.technology-card > span { align-self: end; color: var(--blue); font: 20px Arial, sans-serif; }
.technology-card:hover { z-index: 1; color: white; background: var(--blue); transform: translateY(-4px); }
.technology-card:hover img { filter: brightness(0) invert(1); transform: scale(1.08); }
.technology-card:hover .technology-plus { color: white; border-color: white; transform: rotate(90deg); }
.technology-card:hover > span { color: white; }

.process { padding: 10vw 5vw; display: grid; grid-template-columns: .8fr 1.2fr; gap: 10vw; }
.process-intro { position: sticky; top: 130px; align-self: start; }
.process-intro > p:last-child { max-width: 490px; margin-top: 28px; color: #666; font: 16px/1.7 Arial, sans-serif; }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.process-list li { padding: 35px 0; display: grid; grid-template-columns: 65px 1fr; border-bottom: 1px solid var(--line); }
.process-list > li > span { color: var(--blue); font: 700 12px Arial, sans-serif; }
.process-list h3 { margin: 0 0 12px; font-size: 29px; letter-spacing: -.035em; }
.process-list p { max-width: 520px; margin: 0; color: #666; font: 15px/1.7 Arial, sans-serif; }
.about { min-height: 720px; padding: 8vw 7vw; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10vw; overflow: hidden; }
.about-mark { width: min(37vw, 480px); aspect-ratio: 1; border: 2px solid rgba(255,255,255,.8); border-radius: 25%; transform: rotate(-5deg); box-shadow: 50px 55px 0 rgba(0,0,0,.12); }
.about-mark img { width: 49%; height: 58%; object-fit: contain; filter: brightness(0) invert(1); transform: rotate(5deg); }
.about .section-kicker { color: white; opacity: .75; }
.about-copy > p:not(.section-kicker) { max-width: 620px; margin-top: 30px; color: #d8e0ff; font: 17px/1.7 Arial, sans-serif; }
.about-values { margin-top: 45px; display: flex; gap: 10px; flex-wrap: wrap; }.about-values span { padding: 10px 15px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; font: 700 11px Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em; }

.contact { padding: 10vw 5vw 8vw; display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: end; }
.contact h2 { margin: 0; font-size: clamp(62px, 8vw, 125px); line-height: .88; letter-spacing: -.07em; }
.contact-actions { border-top: 1px solid #333; }
.contact-actions a { padding: 29px 0; display: grid; grid-template-columns: 1fr auto 35px; gap: 25px; align-items: center; border-bottom: 1px solid #333; font-family: Arial, sans-serif; }
.contact-actions a > span { color: #777; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.contact-actions strong { font-size: 17px; }
.contact-actions i { color: var(--blue); font-style: normal; font-size: 20px; }
.privacy-page { min-height: 100vh; padding: 8vw max(5vw, 24px); color: #161616; background: var(--paper); }
.privacy-page > * { max-width: 850px; margin-left: auto; margin-right: auto; }
.privacy-back { display: block; margin-bottom: 70px; color: var(--blue); font: 700 13px Arial, sans-serif; }
.privacy-page h1 { margin: 0; font-size: clamp(50px, 7vw, 96px); line-height: .95; letter-spacing: -.06em; }
.privacy-date { margin: 25px auto 70px; color: #777; font: 13px Arial, sans-serif; }
.privacy-page section { padding: 30px 0; border-top: 1px solid var(--line); }
.privacy-page section h2 { margin: 0 0 14px; font-size: 24px; letter-spacing: -.03em; }
.privacy-page section p { margin: 0; color: #555; font: 16px/1.75 Arial, sans-serif; }
.privacy-page section a { color: var(--blue); text-decoration: underline; }
footer { padding: 48px 5vw 24px; color: #aaa; background: var(--black); border-top: 1px solid #222; font: 12px Arial, sans-serif; }
footer img { width: 180px; } footer > p { margin: 24px 0 60px; } footer > div { padding-top: 20px; display: flex; justify-content: space-between; border-top: 1px solid #222; }

@media (max-width: 900px) {
  .site-header nav { display: none; }
  .hero { padding-top: 90px; grid-template-columns: 1fr; align-content: start; }
  .hero-visual { width: 85vw; margin: 35px auto 20px; justify-self: center; }
  .section-heading, .technology-heading, .process, .about, .contact { grid-template-columns: 1fr; }
  .section-heading { gap: 25px; }
  .service-card { grid-template-columns: 45px 1fr 45px; min-height: 0; }
  .service-card > p, .service-card ul { grid-column: 2 / 4; }
  .card-arrow { grid-column: 3; grid-row: 1; }
  .project-preview { height: 330px; }
  .technology-grid { grid-template-columns: repeat(3, 1fr); }
  .process-intro { position: static; }
  .about-mark { width: 60vw; }
}
@media (max-width: 620px) {
  .site-header { height: 74px; padding: 0 20px; }.brand img { width: 122px; }.header-cta { min-width: 106px; }
  .hero { min-height: auto; padding: 70px 20px 35px; }.hero h1 { font-size: 57px; }.hero-intro { font-size: 17px; }.hero-actions { align-items: stretch; flex-direction: column; gap: 12px; }.text-link { width: max-content; }
  .hero-foot { display: none; }.hero-visual { width: 92vw; margin-left: -10px; }
  .statement, .services, .projects, .technologies, .process, .about, .contact { padding: 90px 20px; }
  .statement { text-align: left; }.statement h2, .section-heading h2, .process h2, .about h2 { font-size: 43px; }
  .service-card { gap: 15px; }.service-card h3 { font-size: 27px; }.service-card > p, .service-card ul { grid-column: 1 / 4; padding-left: 60px; }
  .project-grid { grid-template-columns: 1fr; gap: 50px; }.project-preview { height: 300px; }
  .technology-heading { gap: 25px; }.technology-heading h2 { font-size: 58px; }.technology-grid { grid-template-columns: repeat(2, 1fr); }.technology-card { min-height: 150px; padding: 22px 18px; }.technology-card img, .technology-plus { width: 40px; height: 40px; }.technology-card h3 { font-size: 18px; }
  .about { min-height: auto; }.about-mark { width: 76vw; }.contact { gap: 60px; }.contact h2 { font-size: 70px; }.contact-actions a { grid-template-columns: 1fr 25px; }.contact-actions strong { grid-column: 1; }.contact-actions i { grid-column: 2; grid-row: 1 / 3; }
  footer { padding: 45px 20px 24px; } footer > div { gap: 20px; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.orbit { animation: none; } }