:root {
  --ink: #0b0c0d;
  --paper: #f1eee8;
  --muted: #75726c;
  --line: rgba(11, 12, 13, 0.16);
  --acid: #d4fb3f;
  --blue: #6881ff;
  --orange: #fe7855;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --pad: clamp(1.25rem, 4.5vw, 5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.noise { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); }
.page-glow { position: fixed; width: 45vw; height: 45vw; pointer-events: none; filter: blur(80px); opacity: .12; border-radius: 50%; z-index: -1; }
.glow-one { background: var(--blue); top: -25vw; right: -18vw; }
.glow-two { background: var(--acid); bottom: 10vh; left: -30vw; }
.section-shell { width: min(100%, 1500px); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

.site-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--pad); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-weight: 800; font-size: .9rem; letter-spacing: -.04em; }
.brand-mark { display: grid; width: 2rem; height: 2rem; place-items: center; background: var(--ink); color: var(--paper); font: 500 .65rem var(--mono); letter-spacing: -.1em; }
.site-nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.7rem); font-size: .78rem; font-weight: 700; }
.site-nav > a:not(.nav-contact) { position: relative; }
.site-nav > a:not(.nav-contact)::after { content: ""; position: absolute; height: 1px; left: 0; right: 100%; bottom: -.4rem; background: var(--ink); transition: right .25s ease; }
.site-nav > a:hover::after { right: 0; }
.nav-contact { padding: .65rem 1rem; background: var(--ink); color: var(--paper); }
.nav-contact span, .text-link span, .button span { display: inline-block; margin-left: .35rem; transition: transform .25s ease; }
.nav-contact:hover span, .text-link:hover span, .button:hover span { transform: translate(3px, -3px); }
.nav-toggle { display: none; }

.hero { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(300px, .97fr); align-items: center; gap: clamp(2rem, 6vw, 9rem); min-height: calc(100svh - 5rem); padding-top: clamp(4rem, 9vh, 8rem); padding-bottom: clamp(5rem, 10vh, 9rem); }
.eyebrow, .section-kicker { margin: 0; color: var(--muted); font: 500 .66rem/1.4 var(--mono); letter-spacing: .07em; }
.eyebrow { display: flex; align-items: center; gap: .55rem; }
.eyebrow span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 .19rem rgba(212, 251, 63, .25); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 780px; margin: 1.45rem 0 1.6rem; font-size: clamp(3.35rem, 7.1vw, 7.2rem); line-height: .94; letter-spacing: -.085em; font-weight: 700; }
em { font-family: var(--serif); font-weight: 600; letter-spacing: -.06em; }
.hero-intro { max-width: 36rem; color: #4b4a47; font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.35rem; }
.button { display: inline-flex; align-items: center; padding: 1rem 1.25rem; font-size: .78rem; font-weight: 800; transition: transform .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--ink); color: var(--paper); }
.text-link { display: inline-block; font-size: .78rem; font-weight: 800; border-bottom: 1px solid var(--ink); padding-bottom: .28rem; }
.hero-meta { display: flex; gap: clamp(2.2rem, 4vw, 4.5rem); margin-top: clamp(4rem, 8vh, 7rem); }
.meta-label { display: block; margin-bottom: .45rem; color: var(--muted); font: 500 .58rem var(--mono); letter-spacing: .08em; }
.hero-meta strong { font-size: .7rem; line-height: 1.6; letter-spacing: -.02em; }

.hero-art { width: min(100%, 540px); justify-self: end; }
.art-topline, .art-bottomline { display: flex; justify-content: space-between; padding: .75rem 0; font: 500 .55rem var(--mono); letter-spacing: .06em; }
.art-topline { border-bottom: 1px solid var(--line); }
.art-bottomline { color: var(--muted); }
.portrait-panel { position: relative; isolation: isolate; height: clamp(390px, 44vw, 590px); overflow: hidden; background: #d4d0c8; }
.portrait-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(145deg, transparent 20%, rgba(11,12,13,.2)); }
.portrait-initials { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-52%, -44%); color: var(--ink); font-size: clamp(11rem, 22vw, 19rem); line-height: .7; font-weight: 800; letter-spacing: -.19em; mix-blend-mode: multiply; }
.orb { position: absolute; border-radius: 50%; }
.orb-large { width: 80%; aspect-ratio: 1; top: -5%; left: -16%; background: var(--acid); box-shadow: inset -20px -20px 50px rgba(0,0,0,.14); }
.orb-small { width: 32%; aspect-ratio: 1; right: 6%; bottom: 9%; background: var(--blue); box-shadow: inset -16px -16px 30px rgba(0,0,0,.2); }
.art-grid { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.8%, rgba(11,12,13,.25) 50%, transparent 50.2%), linear-gradient(0deg, transparent 49.8%, rgba(11,12,13,.25) 50%, transparent 50.2%); background-size: 37px 37px; opacity: .52; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.portrait-caption { position: absolute; z-index: 3; bottom: 1rem; left: 1rem; right: 1rem; display: flex; justify-content: space-between; color: var(--ink); font: 500 .64rem var(--mono); letter-spacing: .11em; }

.marquee { overflow: hidden; background: var(--ink); color: var(--paper); padding: 1.2rem 0; white-space: nowrap; }
.marquee-track { display: inline-flex; align-items: center; gap: 2.3rem; min-width: max-content; animation: move 30s linear infinite; font-size: clamp(1.45rem, 2.6vw, 2.6rem); font-weight: 800; letter-spacing: -.07em; }
.marquee i { color: var(--acid); font-style: normal; font-size: .7em; }
@keyframes move { to { transform: translateX(-50%); } }

.intro-grid { display: grid; grid-template-columns: 1fr minmax(0, 2.05fr); gap: 2rem; padding-top: clamp(7rem, 14vw, 14rem); padding-bottom: clamp(7rem, 13vw, 12rem); }
.intro-statement { max-width: 870px; }
.intro-statement > p:first-child { margin: 0; font-size: clamp(2.2rem, 4.3vw, 4.5rem); line-height: 1.08; letter-spacing: -.07em; font-weight: 700; }
.intro-detail { max-width: 32rem; margin: 2rem 0 0 auto; color: #55524d; font-size: .94rem; line-height: 1.75; }

.services { padding-bottom: clamp(7rem, 12vw, 11rem); }
.section-heading { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 2rem; align-items: end; margin-bottom: 3.8rem; }
.section-heading h2, .work-heading h2, .process h2, .contact h2 { margin: 0; font-size: clamp(2.65rem, 5vw, 5.1rem); line-height: .97; letter-spacing: -.08em; }
.section-heading > p:last-child { margin: 0; color: #55524d; font-size: .88rem; line-height: 1.65; }
.service-list { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-card { position: relative; min-height: 29rem; padding: 1.5rem clamp(1.2rem, 2.3vw, 2.6rem) 2rem; display: flex; flex-direction: column; border-right: 1px solid var(--line); transition: background .35s ease, color .35s ease; }
.service-card:last-child { border-right: 0; }
.service-card:hover, .service-card.featured { background: var(--ink); color: var(--paper); }
.service-number { font: 500 .6rem var(--mono); color: var(--muted); }
.featured .service-number, .service-card:hover .service-number { color: #a8a7a0; }
.service-card h3 { margin: auto 0 1.25rem; font-size: clamp(1.7rem, 2.4vw, 2.55rem); line-height: .98; letter-spacing: -.07em; }
.service-card p { color: #68655f; font-size: .82rem; line-height: 1.7; }
.featured p, .service-card:hover p { color: #c5c3bd; }
.service-card ul { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 1.1rem 0 0; list-style: none; }
.service-card li { padding: .36rem .45rem; border: 1px solid var(--line); font: 500 .55rem var(--mono); letter-spacing: .03em; }
.featured li, .service-card:hover li { border-color: rgba(255,255,255,.2); }
.service-icon { position: absolute; top: 3.9rem; right: 1.7rem; width: 4.25rem; height: 4.25rem; }
.icon-web { border: 1px solid var(--ink); }
.featured .icon-web, .service-card:hover .icon-web { border-color: var(--paper); }
.icon-web::before { content: ""; position: absolute; left: 0; right: 0; top: .9rem; border-top: 1px solid currentColor; }.icon-web span { position: absolute; width: .25rem; height: .25rem; top: .32rem; background: currentColor; border-radius: 50%; }.icon-web span:nth-child(1){left:.35rem}.icon-web span:nth-child(2){left:.8rem}.icon-web span:nth-child(3){left:1.25rem}
.icon-product { transform: rotate(-21deg); border: 1px solid var(--ink); border-radius: 50%; }.icon-product span { position: absolute; inset: .75rem; border: 1px solid currentColor; border-radius: 50%; }.icon-product span:nth-child(2){inset:1.55rem}.icon-product span:nth-child(3){width:.45rem;height:.45rem;inset:auto;left:1.8rem;top:1.8rem;background:currentColor;border-radius:50%}
.icon-play { display:grid; place-items:center; border: 1px solid var(--ink); border-radius: 50%; }.icon-play span { width:0;height:0;border-top:.62rem solid transparent;border-bottom:.62rem solid transparent;border-left:.95rem solid currentColor;margin-left:.2rem; }
.featured .service-icon, .service-card:hover .service-icon { border-color: var(--paper); }

.consulting { display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(3rem,8vw,10rem);padding-bottom:clamp(7rem,12vw,12rem); }
.consulting-intro { align-self:start;position:sticky;top:2rem; }.consulting-intro h2 { margin:1.35rem 0 1.45rem;font-size:clamp(2.7rem,4.8vw,5.1rem);line-height:.96;letter-spacing:-.08em; }.consulting-intro > p { max-width:30rem;color:#5c5953;font-size:.9rem;line-height:1.75; }.consulting-links { display:flex;align-items:center;gap:1.1rem;margin-top:2rem; }
.consulting-offer { border-top:1px solid var(--line); }.offer-card { position:relative;min-height:13.6rem;padding:1.45rem 6rem 1.5rem 0;border-bottom:1px solid var(--line); }.offer-card > span { color:var(--muted);font:500 .58rem var(--mono);letter-spacing:.05em; }.offer-card h3 { margin:1.25rem 0 .75rem;font-size:clamp(1.65rem,2.8vw,2.8rem);line-height:.94;letter-spacing:-.075em; }.offer-card p { max-width:31rem;margin:0;color:#5d5a54;font-size:.82rem;line-height:1.7; }.offer-card::after { content:"↗";position:absolute;right:0;top:1.4rem;width:2.45rem;height:2.45rem;display:grid;place-items:center;border:1px solid var(--line);font-size:1.05rem;transition:.25s ease; }.offer-card:hover::after { transform:translate(3px,-3px);background:var(--ink);color:var(--paper); }

.case-study { position:relative;overflow:hidden;background:var(--ink);color:var(--paper);padding-top:clamp(5rem,8vw,8rem);padding-bottom:clamp(5rem,8vw,8rem); }.case-study::before { content:"";position:absolute;width:47rem;height:47rem;top:-22rem;left:-12rem;border-radius:50%;background:var(--acid);filter:blur(2px);opacity:.95; }.case-study::after { content:"";position:absolute;inset:0;opacity:.18;background:linear-gradient(90deg,transparent 49.8%,#fff 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#fff 50%,transparent 50.2%);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 80%); }.case-study-grid { position:relative;z-index:1;display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,8vw,10rem); }.case-label { padding-top:.2rem; }.case-label .section-kicker { color:#aeaea7; }.case-mark { display:block;margin:1.2rem 0 1rem;font-size:clamp(4rem,8vw,8rem);font-weight:800;line-height:.75;letter-spacing:-.13em; }.case-label > p:last-child { color:#c3c2bb;font:500 .68rem/1.7 var(--mono);letter-spacing:.02em; }.case-content h2 { margin:0 0 1.7rem;font-size:clamp(2.65rem,5vw,5.3rem);line-height:.97;letter-spacing:-.085em; }.case-content > p { max-width:45rem;color:#c9c7c1;font-size:.91rem;line-height:1.8; }.case-content .case-lead { color:var(--paper);font-size:clamp(1.05rem,1.6vw,1.28rem);line-height:1.65; }.case-pillars { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.22); }.case-pillars span { color:var(--acid);font:500 .62rem var(--mono); }.case-pillars h3 { margin:.75rem 0 .45rem;font-size:1.2rem;letter-spacing:-.06em; }.case-pillars p { margin:0;color:#bdbbb5;font-size:.72rem;line-height:1.65; }.case-link { margin-top:2.5rem;border-color:var(--paper); }

.work { padding-bottom: clamp(7rem, 12vw, 12rem); }
.work-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: end; padding-bottom: 3.5rem; }
.work-heading .text-link { justify-self: start; grid-column: 2; }
.project-grid { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap: 1.15rem; }
.project { display: block; }.project-main { grid-row: span 2; }
.project-art { position: relative; min-height: 16rem; overflow: hidden; padding: 1rem; }.project-main .project-art { height: 100%; min-height: 37rem; }
.project-index { position: relative; z-index: 3; font: 500 .58rem var(--mono); letter-spacing: .05em; }
.project-info { display: flex; justify-content: space-between; align-items: end; padding: .9rem 0 .2rem; }.project-info h3 { margin: 0 0 .2rem; font-size: 1rem; letter-spacing: -.05em; }.project-info p { margin: 0; color: var(--muted); font-size: .66rem; }.project-arrow { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); transition: background .25s, color .25s, transform .25s; }.project:hover .project-arrow { background: var(--ink); color: var(--paper); transform: translate(3px,-3px); }
.project-laos { background: #d4ff39; }.atomic-core { position:absolute;width:19%;aspect-ratio:1;left:41%;top:42%;border-radius:50%;background:#0b0c0d;box-shadow: 0 0 0 1rem rgba(11,12,13,.07); }.atomic-orbit { position:absolute;left:18%;top:25%;width:65%;height:47%;border:1px solid #0b0c0d;border-radius:50%; }.orbit-one { transform: rotate(50deg); }.orbit-two { transform: rotate(-50deg); }.atomic-label { position:absolute;z-index:2;bottom:5%;left:7%;font-size:clamp(3.7rem, 7vw, 7rem);font-weight:800;line-height:.73;letter-spacing:-.12em; }.atomic-label small { display:block;margin:.7rem 0 0 .15rem;font:500 .12em var(--mono);letter-spacing:-.03em; }.project-corner { position:absolute;right:1.1rem;bottom:1rem;font-size:3.2rem; }
.project-calorify { background: var(--orange); }.pixini-word { position:absolute;left:6%;bottom:6%;font-size:clamp(3.1rem, 5.4vw, 5.1rem);font-weight:800;letter-spacing:-.12em;line-height:.7; }.pixini-shape { position:absolute;border-radius:50%;background:#f7d772; }.pixini-shape.one{width:35%;aspect-ratio:1;right:-2%;top:-13%}.pixini-shape.two{width:18%;aspect-ratio:1;right:29%;top:25%;background:#0b0c0d}.pixini-shape.three{width:13%;aspect-ratio:1;right:15%;bottom:17%;background:#6881ff}
.project-leotech { background: #1e2361; color:#f1eee8; }.project-leotech .project-index { color:#b3b8fa }.planet{position:absolute;width:56%;aspect-ratio:1;right:-9%;bottom:-36%;border-radius:50%;background:linear-gradient(145deg,#b2baff 10%,#3340c3 50%,#10133d 75%);box-shadow:-20px -20px 50px rgba(255,255,255,.1) inset}.moon{position:absolute;width:6%;aspect-ratio:1;right:45%;top:32%;border-radius:50%;background:#d4fb3f}.space-ring{position:absolute;width:44%;height:18%;right:0;bottom:15%;border:1px solid #d4fb3f;border-radius:50%;transform:rotate(-30deg)}.space-copy{position:absolute;left:7%;bottom:8%;font:500 clamp(1.5rem,3vw,2.5rem)/.86 var(--mono);letter-spacing:-.1em}

.process { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; padding-bottom: clamp(7rem, 12vw, 12rem); }.process-intro { align-self: start; }.process-intro h2 { margin-top: 1.5rem; }.process-steps { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }.process-steps li { display:grid; grid-template-columns: 6.5rem 1fr; gap:1rem; padding: 1.8rem 0 2rem; border-bottom: 1px solid var(--line); }.process-steps li > span { color:var(--muted);font:500 .6rem var(--mono); }.process-steps h3 { margin:0 0 .55rem;font-size:clamp(1.35rem,2vw,2rem);letter-spacing:-.06em; }.process-steps p { max-width:28rem;margin:0;color:#615e59;font-size:.85rem;line-height:1.65; }

.contact { position: relative; overflow: hidden; padding-top: clamp(5rem, 8vw, 8rem); padding-bottom: clamp(5rem, 8vw, 8rem); color: var(--paper); background: var(--ink); }.contact .section-kicker { position:relative;z-index:1;color:#999993; }.contact-content { position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;margin-top:2rem;align-items:end; }.contact h2 { font-size:clamp(3.4rem,7vw,7rem); }.contact-content > p { max-width:25rem;margin:0;color:#c8c6c1;line-height:1.7;font-size:.95rem; }.contact-actions { display:flex;align-items:center;gap:1.3rem;margin-top:2.3rem; }.button-light { background:var(--acid);color:var(--ink); }.contact-social { color:var(--paper);border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:.3rem;font-size:.76rem;font-weight:700 }.contact-orb { position:absolute;width:55rem;aspect-ratio:1;right:-17rem;bottom:-36rem;border-radius:50%;background:var(--blue);opacity:.55;filter:blur(3px); }

.site-footer { display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;padding-bottom:1.5rem;font-size:.62rem;color:#68655f; }.site-footer p { margin:0; }.back-to-top { font-weight:800;color:var(--ink); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 800px) {
  .site-header { padding-top:1.1rem;padding-bottom:1.1rem; }.nav-toggle { position:relative;z-index:12;display:grid;gap:.3rem;width:2.5rem;height:2.5rem;padding:.65rem;background:var(--ink);border:0;place-content:center; }.nav-toggle span { display:block;width:1.05rem;height:1px;background:var(--paper);transition:transform .2s ease; }.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(2.7px) rotate(45deg); }.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-2.7px) rotate(-45deg); }.site-nav { position:absolute;z-index:11;inset:0 0 auto;background:var(--paper);padding:5.2rem var(--pad) 1.8rem;display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem;opacity:0;pointer-events:none;transform:translateY(-1rem);transition:.2s ease;box-shadow:0 14px 30px rgba(0,0,0,.08); }.site-nav.open { opacity:1;pointer-events:auto;transform:none; }.hero { grid-template-columns:1fr;min-height:auto;padding-top:4.2rem; }.hero-art { width:100%;max-width:530px;justify-self:start; }.hero-copy { max-width:680px; }.hero-meta { margin-top:3.5rem; }.intro-grid, .section-heading, .work-heading, .process, .contact-content, .consulting, .case-study-grid { grid-template-columns:1fr; }.intro-grid { gap:1.8rem; }.intro-detail { margin-left:0; }.section-heading { margin-bottom:2.5rem; }.work-heading .text-link { grid-column:auto; }.service-list { grid-template-columns:1fr; }.service-card { min-height:21rem;border-right:0;border-bottom:1px solid var(--line); }.service-card:last-child { border-bottom:0; }.consulting-intro { position:static; }.consulting-offer { margin-top:-.7rem; }.case-label { display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:1rem; }.case-label .section-kicker { grid-column:span 2; }.case-mark { margin:0; }.case-pillars { gap:.8rem; }.project-grid { grid-template-columns:1fr; }.project-main { grid-row:auto; }.project-main .project-art { min-height:28rem; }.process-steps { margin-top:1rem; }.contact-content { gap:2rem; }.contact-orb { width:35rem;right:-22rem;bottom:-20rem; }.site-footer { gap:1rem;flex-wrap:wrap; }.site-footer p { order:3;width:100%; }
}

@media (max-width: 480px) {
  h1 { font-size:clamp(3.25rem,16vw,4.5rem); }.hero-actions, .consulting-links { align-items:flex-start;flex-direction:column;gap:1.25rem; }.hero-meta { gap:1.6rem; }.portrait-panel { height: 390px; }.case-pillars { grid-template-columns:1fr;gap:1.4rem; }.project-main .project-art { min-height:25rem; }.atomic-label { font-size:4.5rem; }.process-steps li { grid-template-columns:3.2rem 1fr; }.contact-actions { align-items:flex-start;flex-direction:column; }.site-footer { align-items:flex-start;flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; }.marquee-track { animation:none; }.reveal { opacity:1;transform:none;transition:none; } }