:root{--paper:#0c0d10;--ink:#f2f0f7;--violet:#b9a0ff;--acid:#dfff78;--line:#2a2932;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 "Helvetica Neue",Arial,sans-serif}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button{color:inherit;cursor:pointer}
svg{width:1em;height:1em}
.symbols{position:absolute;width:0;height:0;overflow:hidden}
.shell{width:min(100% - 80px,1440px);margin-inline:auto}
.header-row{height:83px;display:flex;align-items:center;justify-content:space-between;position:relative;gap:25px}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:23px;font-weight:900;letter-spacing:-.085em;line-height:1}
.brand svg{color:var(--violet);width:27px;height:27px;margin-right:2px}
.brand sup{font:700 11px/1 var(--mono);align-self:flex-start;margin:2px 0 0 -5px}
nav{display:flex;gap:34px;font-weight:600;font-size:14px}
nav a:hover,.footer a:hover{color:var(--violet)}
.pill{border:1px solid currentColor;border-radius:100px;padding:12px 19px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font-weight:700;font-size:14px;line-height:1.25;transition:background .2s,color .2s,border-color .2s;width:fit-content}
.pill svg{width:15px;height:15px}
.pill:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.accent{background:var(--acid);color:#12150c;border-color:var(--acid);padding:15px 22px}
.accent:hover{background:white;color:#12150c;border-color:white}
.menu-toggle{display:none}
.eyebrow,.section-tag,.hero-bottom,.art-id{font:11px/1.35 var(--mono);letter-spacing:.12em}
.signal,.section-tag>span:first-child{width:8px;height:8px;display:inline-block;border-radius:50%;background:var(--acid);box-shadow:0 0 14px #dfff5488}
h1,h2,h3,p{margin:0}
h1,h2{font-weight:780;letter-spacing:-.085em;line-height:.95}
.ticker{overflow:hidden;border-bottom:1px solid var(--line)}
.ticker-track{display:flex;width:max-content;animation:ticker 30s linear infinite}
.ticker-group{display:flex;align-items:center;gap:29px;padding:19px 29px 19px 0;font:600 12px/1.2 var(--mono);letter-spacing:.12em}
.ticker-group svg{width:15px;height:15px;color:var(--violet)}
@keyframes ticker{to{transform:translateX(-50%)}}
.section{padding-block:clamp(65px,8vw,122px)}
section[id]{scroll-margin-top:18px}
.section-tag{display:flex;align-items:center;gap:9px;font-weight:700}
.section-tag>span:first-child{width:7px;height:7px;background:var(--violet);box-shadow:none}
.section-heading{margin:23px 0 38px;display:flex;align-items:end;justify-content:space-between;gap:22px}
h2{font-size:clamp(53px,8vw,112px)}
h2 span{color:var(--violet)}
.section-heading p{max-width:270px;color:#aaa5b3;font-size:17px;margin:0 3% 4px 0}
.projects{display:grid;grid-template-columns:1fr 1fr;gap:44px 28px}
.project{background:none;border:0;padding:0;min-width:0;text-align:left}
.project-featured{grid-column:1/-1}
.project-art{height:clamp(240px,29vw,440px);overflow:hidden;position:relative;isolation:isolate;border-radius:4px}
.project-featured .project-art{height:clamp(330px,39vw,550px)}
.art-id{position:absolute;top:19px;left:20px;z-index:2}
.project-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 1px 0}
.project-caption h3{font-size:26px;line-height:1.08;letter-spacing:-.05em}
.project-caption p{color:#aaa5b3;font-size:14px;margin-top:5px}
.round{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:transparent;transition:background .2s,color .2s;flex:none}
.project:hover .round,.round:hover{background:var(--violet);border-color:var(--violet);color:#171120}
.forma{background:radial-gradient(ellipse at 70% 80%,#5c723c55,transparent 65%),repeating-linear-gradient(135deg,#cde7a50c 0 1px,transparent 1px 42px),#1b2319;color:#dfff9c}
.forma-copy{position:absolute;left:7%;top:32%;font-weight:900;font-size:clamp(55px,13vw,184px);letter-spacing:-.1em;line-height:.8}
.forma-copy span{font-size:.18em;vertical-align:top;margin-left:.4em}
.forma-copy small,.signal-copy small{display:block;font:700 11px/1.3 var(--mono);letter-spacing:.08em;margin:20px 0 0 5px;text-transform:uppercase}
.phone{width:clamp(130px,18vw,240px);aspect-ratio:1/1.83;border:6px solid #23261f;border-radius:25px;position:absolute;padding:15px 13px;box-shadow:14px 23px 30px #23390857;transition:transform .4s}
.phone-back{right:23%;top:28%;transform:rotate(-15deg);background:#b9c7a4;color:#1a2216}
.phone-front{right:9%;top:13%;transform:rotate(12deg);background:#171d12;color:#eeffcc}
.project:hover .phone-front{transform:translateY(-9px) rotate(9deg)}
.phone-bar{height:6px;width:26%;background:#7d8477;border-radius:15px;margin:0 auto 10%}
.phone-label,.phone small{font:8px/1.3 var(--mono);letter-spacing:.06em}
.phone b{display:block;font-size:clamp(18px,3vw,43px);line-height:.95;letter-spacing:-.07em;margin-top:6%}
.phone-ring{margin:12% auto 7%;border-radius:50%;width:79%;aspect-ratio:1;background:repeating-radial-gradient(circle,#dafa60 0 1px,transparent 2px 6px);display:grid;place-items:center}
.phone-ring i{font-style:normal;border-radius:50%;background:#dafa60;color:#171d12;padding:2px 10px;font-size:20px}
.bars{height:26%;margin-top:18%;background:repeating-linear-gradient(90deg,#6d813b 0 8%,transparent 8% 13%);clip-path:polygon(0 68%,14% 68%,14% 49%,29% 49%,29% 62%,42% 62%,42% 32%,55% 32%,55% 40%,69% 40%,69% 15%,82% 15%,82% 28%,93% 28%,93% 0,100% 0,100% 100%,0 100%)}
.signal-art{background:radial-gradient(ellipse at 65% 60%,#422663,#17121f 70%);color:#f8eeff}
.signal-core{position:absolute;width:66%;aspect-ratio:1;right:-3%;top:3%;border-radius:50%;background:repeating-radial-gradient(ellipse at 39% 40%,transparent 0 6px,#bc8dff 7px,transparent 9px 13px);transform:rotate(-33deg) scaleY(.66);filter:drop-shadow(0 0 12px #9f67ff);opacity:.85;transition:transform .45s}
.project:hover .signal-core{transform:rotate(-42deg) scaleY(.74)}
.signal-copy{position:absolute;left:7%;bottom:15%;font-size:clamp(45px,7vw,105px);letter-spacing:-.1em;line-height:.8;font-weight:750}
.signal-copy span{font-size:.3em;vertical-align:top;color:var(--acid);margin-left:7px}
.signal-copy small{margin-top:12px}
.contour{background:radial-gradient(ellipse at 70% 90%,#3b3769,transparent 70%),repeating-linear-gradient(45deg,#aaa4e20b 0 1px,transparent 1px 28px),#181922;color:#dfdcf4}
.dashboard{display:flex;position:absolute;left:17%;top:19%;width:81%;height:82%;min-height:208px;border:6px solid #4c485e;background:#22212c;border-radius:13px;transform:rotate(-9deg);box-shadow:12px 20px 35px #3b28675c;transition:transform .4s}
.project:hover .dashboard{transform:translateY(-7px) rotate(-7deg)}
.dash-side{background:#24203e;color:white;padding:11px;display:grid;align-content:start;gap:12px}
.dash-side i{width:13px;height:3px;background:#9f8de5}
.dash-body{min-width:0;padding:11px 14px;width:100%}
.dash-body small,.dash-cards span{font:10px/1.1 var(--mono)}
.dash-body strong{display:block;font-size:clamp(20px,3.5vw,46px);letter-spacing:-.07em}
.dash-cards{display:flex;gap:8px}
.dash-cards span{flex:1;background:#33303f;padding:9px;border-radius:5px}
.dash-cards b{display:block;font-size:18px;margin-top:4px}
.dash-body svg{display:block;width:100%;height:30%;margin-top:12px;background:repeating-linear-gradient(#4e465d 0 1px,transparent 1px 16px)}
.services{background:radial-gradient(ellipse at 10% 40%,#211a2c55,transparent 60%),#101114;border-block:1px solid var(--line)}
.service-list{border-top:1px solid var(--line)}
.service-list details{border-bottom:1px solid var(--line)}
.service-list summary{list-style:none;display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;cursor:pointer;padding:20px 0}
.service-list summary::-webkit-details-marker{display:none}
.service-list summary span{font:12px var(--mono);color:#aaa5b3}
.service-list summary strong{font-size:clamp(22px,4vw,50px);line-height:1.12;letter-spacing:-.055em}
.service-list summary i{position:relative;width:32px;height:32px;border-radius:50%;background:var(--paper)}
.service-list summary i::before,.service-list summary i::after{content:"";position:absolute;left:9px;top:15px;width:14px;height:2px;background:var(--violet);transition:transform .2s}
.service-list summary i::after{transform:rotate(90deg)}
.service-list details[open] summary i::after{transform:rotate(0)}
.service-list details p{margin:0 40px 21px 76px;max-width:560px;color:#b9b3c4}
.contact-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr .85fr;gap:40px;background:radial-gradient(ellipse at 0% 100%,#30204488,transparent 65%),#141218;color:#f6f3fd;border-radius:20px;padding:clamp(27px,5vw,72px)}
.contact-panel .section-tag>span:first-child{background:var(--acid)}
.contact-panel h2{margin:24px 0 15px}
.contact-panel h2 span{color:var(--acid)}
.contact-panel p{color:#d5c9e3;max-width:300px}
.contact-star{width:clamp(75px,14vw,200px);height:auto;aspect-ratio:1;margin-top:30px;color:#ba9aff;opacity:.7;transform:rotate(14deg)}
#brief{display:grid;gap:15px;align-content:start;min-width:0}
#brief label{display:grid;gap:6px;font-size:13px;font-weight:700}
#brief input,#brief textarea{min-width:0;width:100%;border:1px solid #51475d;border-radius:8px;background:#19171f;color:white;padding:11px 13px;font-weight:400}
#brief textarea{resize:vertical}
#brief button{margin-top:5px}
#brief button:disabled{opacity:.65;cursor:wait}
#brief .form-status{font-size:14px;max-width:none}
.form-status:empty{display:none}
.footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-block:24px}
.footer span{font:10px var(--mono);letter-spacing:.1em}
.footer>a:last-child{font-size:14px;font-weight:700}
dialog{width:min(560px,100% - 34px);border:0;border-radius:16px;padding:0;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:#181120a8;backdrop-filter:blur(5px)}
.dialog-inner{padding:clamp(26px,5vw,48px);position:relative}
.dialog-inner h2{margin:18px 0}
.dialog-inner p{margin-bottom:25px}
.close{position:absolute;right:12px;top:12px;font-size:24px}
.case-cta:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
:focus-visible{outline:3px solid #9471ff;outline-offset:4px}
@media(max-width:850px){.shell{width:calc(100% - 40px)}.contact-panel{grid-template-columns:1fr 1fr}.service-list summary{grid-template-columns:40px 1fr auto}.service-list details p{margin-left:52px}}
@media(max-width:640px){.shell{width:calc(100% - 28px)}.header-row{height:64px}.brand{font-size:21px}.brand svg{width:24px;height:24px}.header-cta{display:none}.menu-toggle{display:block;border:1px solid var(--line);border-radius:30px;background:none;padding:6px 11px;font-size:13px;font-weight:700}nav{display:none;position:absolute;z-index:3;right:0;top:56px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px;min-width:155px;gap:12px}nav.open{display:grid}.hero-content p{max-width:270px;margin-bottom:19px}.eyebrow{font-size:9px}.section-heading{display:block;margin-bottom:24px}.section-heading p{margin-top:15px}.projects{grid-template-columns:1fr}.project-featured .project-art{height:310px}.forma-copy{top:27%;z-index:1;font-size:clamp(53px,14vw,90px)}.forma-copy small{max-width:96px}.phone-back{right:24%;top:39%}.phone-front{right:7%;top:29%}.contact-panel{grid-template-columns:1fr;gap:24px}.contact-star{display:none}.footer span{display:none}.section{padding-block:58px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Depth is applied to artwork only, keeping text and controls steady. */
.header{border-bottom:1px solid #ffffff08}
.brand svg{color:var(--acid)}
.header-cta{border-color:#4d4857}
.ticker{color:#8d8799}
.ticker-group{padding-block:25px}
.section-tag{color:#a7a0b5}
.section-heading h2{letter-spacing:-.07em}
.project-art{border:1px solid #ffffff13}
.project:not(.project-featured):last-child{margin-top:74px}
.forma-copy{translate:0 calc(var(--parallax,0px) * -.3)}
.phone-back{translate:0 calc(var(--parallax,0px) * .65)}
.phone-front{translate:0 calc(var(--parallax,0px) * -1)}
.signal-core{translate:0 calc(var(--parallax,0px) * -.85)}
.signal-copy{translate:0 calc(var(--parallax,0px) * .3)}
.dashboard{translate:0 calc(var(--parallax,0px) * -.65)}
.service-list summary{padding-block:28px;transition:color .25s,padding-left .25s}
.service-list summary:hover{color:var(--violet);padding-left:10px}
.service-list summary i{border:1px solid #40384e;background:transparent}
.service-list details[open] summary{color:var(--violet)}
.service-list details.is-animating{overflow:hidden}
.service-content{display:flow-root}
.service-list details[data-expanded="false"] summary{color:inherit}
.service-list details[data-expanded="false"] summary:hover{color:var(--violet)}
.service-list details[data-expanded="false"] summary i::after{transform:rotate(90deg)}
.service-list summary i::after{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.contact-panel{border:1px solid #41324d;border-radius:6px}
.contact-panel h2{font-size:clamp(56px,7.5vw,108px)}
.contact-star{translate:0 calc(var(--parallax,0px) * -.5);rotate:var(--turn,0deg);color:var(--acid);opacity:.9}
#brief input::placeholder,#brief textarea::placeholder{color:#8e849d}
#brief input:focus,#brief textarea:focus{border-color:var(--violet)}
.footer-wordmark{overflow:hidden;padding-top:16px;color:#28232f;font-size:clamp(70px,21vw,350px);font-weight:800;line-height:.88;letter-spacing:-.085em;text-align:center;user-select:none}
dialog{border:1px solid #51435f;box-shadow:0 24px 100px #0008}
.dialog-inner p{color:#b9b3c4}
.close{background:#201b29}
.reveal{opacity:0;transform:translateY(25px);transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
::selection{background:#b9a0ff;color:#100c18}
@media(max-width:640px){
  nav,nav.open{display:grid}
  nav{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    clip-path:inset(0 0 100% 0 round 12px);
    transition:opacity .28s ease,transform .45s cubic-bezier(.22,1,.36,1),clip-path .45s cubic-bezier(.22,1,.36,1),visibility 0s .45s;
  }
  nav.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    clip-path:inset(0 0 0 0 round 12px);
    transition-delay:0s;
  }
  nav a{transform:translateY(-4px);opacity:0;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s ease}
  nav.open a{transform:translateY(0);opacity:1;transition-delay:.06s}
  nav.open a:nth-child(2){transition-delay:.10s}
  nav.open a:nth-child(3){transition-delay:.14s}
  .menu-toggle span{display:inline-block;transition:transform .4s cubic-bezier(.22,1,.36,1)}
  .menu-toggle[aria-expanded="true"] span{transform:rotate(45deg)}
  .project:not(.project-featured):last-child{margin-top:0}
  .service-list summary{padding-block:22px}
  .contact-panel{padding:25px}
}
@media(prefers-reduced-motion:reduce){
  nav,nav a,.menu-toggle span{transition-delay:0s!important}
  .forma-copy,.phone-back,.phone-front,.signal-core,.signal-copy,.dashboard,.contact-star{translate:none!important;rotate:none!important}
  .reveal{opacity:1;transform:none}
  .ticker-track{animation:none}
}
.header {
  position: relative;
  z-index: 2;
  border: 0;
  background: #0c0813;
}
.hero {
  --glass-background: #0c0813;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100svh - 83px);
  padding: 0 24px clamp(22px, 4vh, 45px);
  overflow: clip;
  color: #f8f1e6;
  background: var(--glass-background);
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14% 0 -12%;
  background:
    radial-gradient(ellipse 27% 5% at 50% 60%, #8244c75c, transparent 96%),
    radial-gradient(ellipse 31% 8% at 50% 80%, #6a34ab42, transparent 96%),
    radial-gradient(ellipse 47% 54% at 50% 34%, #1b102a 0, #21112f 48%, transparent 84%);
  translate: 0 calc(var(--parallax, 0px) * .55);
  pointer-events: none;
}
.hero-art {
  position: relative;
  width: min(75vw, 1120px);
  height: clamp(280px, calc(63svh - 88px), 580px);
  margin-top: -4px;
  translate: 0 calc(var(--parallax, 0px) * .22);
}
.hero-fallback, #glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-fallback {
  object-fit: contain;
  mask-image: radial-gradient(ellipse 66% 72% at center, #000 64%, transparent 91%);
}
.has-glass .hero-fallback { display: none; }
#glass { cursor: grab; touch-action: pan-y; filter: drop-shadow(0 0 10px #8f40dc33); }
#glass.dragging { cursor: grabbing; }
#glass:focus-visible { outline-offset: -5px; border-radius: 20px; }
.hero-content { position: relative; width: 100%; }
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ede2f9;
  font-size: clamp(9px, 1.1vw, 14px);
}
.hero h1 {
  margin: 0 0 14px;
  font: 600 clamp(52px, 8.9vw, 143px)/.98 Georgia, 'Times New Roman', serif;
  letter-spacing: -.077em;
}
.hero h1 em { color: #c6abff; font-weight: 400; }
.hero h1 span { color: var(--acid); }
.hero-content p {
  margin: 0 auto 25px;
  font: clamp(16px, 1.55vw, 24px)/1.35 Georgia, 'Times New Roman', serif;
}
.hero .accent {
  box-shadow: 0 8px 56px 2px #7b40f451;
  padding: 15px 27px;
  font-size: 16px;
}
.hero-bottom {
  margin-top: auto;
  padding-top: clamp(24px, 4vh, 50px);
  color: #e7dcf0;
  font-size: 11px;
  text-transform: uppercase;
}
.hero-bottom:hover { color: var(--acid); }
@media (max-width: 640px) {
  .hero { min-height: calc(100svh - 64px); padding-inline: 14px; }
  .hero-art { width: 100%; height: clamp(230px, 43svh, 390px); margin-top: 4px; }
  .hero h1 { font-size: clamp(48px, 12vw, 76px); margin-top: 5px; }
  .hero h1 em { display: block; }
  .hero-content p { margin-bottom: 21px; }
  .hero-bottom { padding-top: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero-art { translate: none; }
}