/* Dx3S / cinematic tech noir. Inspired by editorial framing and collected cards. */
:root{--noir-stroke:#cbb3df30}body{padding-top:18px}header{position:sticky;top:18px;margin:0 22px;height:72px;padding:0 25px;border:1px solid #d1b4ef27;background:#100d15eb;box-shadow:0 14px 50px #0006;backdrop-filter:blur(24px);z-index:50}.brand{margin-right:auto}.header-mail{width:38px;height:38px;display:grid;place-items:center;margin-right:20px;color:#d2c8dc}.header-mail svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.3}.menu{display:flex;gap:18px;align-items:center;border:0;background:none;color:#e5dbe9;padding:10px 0 10px 22px;margin-left:28px;order:3;font-size:11px;letter-spacing:.1em}.menu .menu-label{display:block;width:auto;height:auto;background:none;border:0;color:inherit}.menu .menu-mark{width:28px;height:28px;transition:transform .3s}.nav-number,.nav-arrow,.nav-chapter,.nav-meta{display:none}.nav-links{display:flex;align-items:center;gap:28px}nav{gap:0}.menu-open{overflow:hidden}.menu-open header{background:#100d15;backdrop-filter:none}.menu-open .menu-mark{transform:rotate(45deg)}nav.open{position:fixed;inset:73px -1px auto;max-height:calc(100dvh - 110px);height:760px;overflow:auto;background:radial-gradient(ellipse at 95% 80%,#7923a818,transparent 55%),#100d15;border:1px solid #d1b4ef27;border-top:0;display:flex;flex-direction:column;align-items:stretch;padding:45px clamp(25px,7vw,120px);box-shadow:0 60px 80px #000a}nav.open .nav-chapter{display:block;color:#9a87a9;font:10px monospace;letter-spacing:.18em;margin-bottom:25px}nav.open .nav-links{display:flex;flex-direction:column;gap:0;align-items:stretch}nav.open .nav-links>a{display:flex;align-items:center;gap:35px;padding:13px 0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;font-size:clamp(30px,4.6vw,60px);letter-spacing:-.05em;line-height:1.15;color:#e9e1ee;font-weight:400;text-transform:none;transition:color .2s,padding .2s}nav.open .nav-links>a:hover{padding-left:10px;color:var(--orange)}nav.open .nav-number{display:block;font:10px monospace;color:#9e88ad;letter-spacing:.1em;width:24px}nav.open .nav-arrow{display:block;margin-left:auto;color:#a78bb7;font-size:28px}nav.open .nav-cta>span:not(.nav-number):not(.nav-arrow){display:none}nav.open .nav-meta{display:flex;flex-wrap:wrap;gap:25px;justify-content:space-between;margin-top:auto;padding-top:28px;border-top:1px solid var(--noir-stroke);font-size:12px}nav.open .nav-meta>span{font:9px monospace;letter-spacing:.1em;color:#a38db1;width:100%;margin-top:25px}.hero{margin-top:-90px;padding-top:90px;min-height:850px}.hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#aa83bb0c 3px,#aa83bb0c 4px);mask-image:linear-gradient(90deg,#000,transparent 45%,#000)}.hero .contours{opacity:.8;transform-origin:center;animation:contour-breathe 14s ease-in-out infinite alternate}.hero .eyebrow,.hero-bottom,.eyebrow,.index,.step,.art-caption{font-family:monospace}.hero-inner:before,.hero-inner:after{content:"+";font:18px monospace;position:absolute;top:50%;color:#b58cc15e}.hero-inner:before{left:-8vw}.hero-inner:after{right:-8vw}.hero-bottom{border-top:1px solid #c598e122;padding-top:22px}.intro{position:relative}.service-row{position:relative}.service-row:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ff792b09,#b953ff09);opacity:0;transition:opacity .3s;pointer-events:none}.service-row:hover:before{opacity:1}.index{color:#c19acd}.showcase{padding-top:90px;padding-bottom:120px;border-top:1px solid var(--line);gap:55px}.showcase-copy{position:relative;z-index:3}.showcase h2{font-size:clamp(36px,3.7vw,53px)}.digital-art{min-height:580px;isolation:isolate}.digital-art:before{content:"";position:absolute;inset:35px -10px 20px;background-image:linear-gradient(#bb82ee0b 1px,transparent 1px),linear-gradient(90deg,#bb82ee0b 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(ellipse,#000,transparent 75%);z-index:-1}.orb{width:290px;height:290px;top:140px;left:100px;opacity:.65;filter:blur(30px)}.art-registration{position:absolute;top:20px;left:15px;font:8px monospace;letter-spacing:.16em;color:#897296}.browser-mock{display:block;width:84%;min-height:310px;transform:rotate(-8deg);border-radius:4px;padding:10px 10px 34px;background:linear-gradient(145deg,#3b2843,#17121e);box-shadow:0 28px 65px #0009;overflow:visible;transition:transform .45s,border-color .3s;z-index:1;animation:web-float 8s ease-in-out infinite}.browser-mock:hover,.browser-mock:focus-visible{transform:translateY(-12px) rotate(-3deg);z-index:5;animation-play-state:paused;color:inherit;border-color:#ff9b50}.mock-bar{background:#110c1a}.mock-body{background:radial-gradient(ellipse at right bottom,#9d3a7e55,transparent 70%),#160f20;min-height:245px}.mock-body h3{font-size:38px}.card-index{position:absolute;bottom:10px;left:13px;font:8px monospace;letter-spacing:.14em;color:#cbb5d7}.phone-mock{display:block;right:2px;bottom:25px;min-height:285px;padding-bottom:34px;border-radius:4px;transform:rotate(9deg);z-index:3;animation:app-float 9s ease-in-out infinite;transition:border-color .3s;background:linear-gradient(140deg,#392543,#160e1e)}.phone-mock:hover,.phone-mock:focus-visible{animation-play-state:paused;z-index:5;border-color:#e1b2ff;color:inherit}.phone-notch{display:none}.signal-card{position:absolute;right:-5px;top:62px;width:190px;min-height:210px;padding:13px 14px 35px;background:linear-gradient(135deg,#2e1b29,#13101a);border:1px solid #ffb58e50;box-shadow:0 20px 45px #0008;transform:rotate(10deg);z-index:2;animation:signal-float 10s ease-in-out infinite;transition:border-color .3s}.signal-card:hover,.signal-card:focus-visible{animation-play-state:paused;border-color:#ff9b50;color:inherit;z-index:5}.signal-title{display:block;font-size:20px;letter-spacing:-.04em;line-height:1.15;margin:10px 0}.signal-label{font:6px monospace;color:#c59ead;letter-spacing:.08em}.signal-orbit{height:82px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse,#ff782b16,transparent 70%)}.signal-orbit i{position:absolute;width:80px;height:80px;border:1px solid #ff995642;border-radius:50%;transform:rotateX(55deg) rotate(-30deg)}.signal-orbit i:nth-child(2){transform:rotateY(55deg) rotate(30deg);border-color:#bf77ff65}.signal-orbit b{font-size:38px;font-weight:400;color:#ffa66e;text-shadow:0 0 25px #ff792b66}.art-caption{bottom:-5px;left:15px;font-size:7px;letter-spacing:.1em;color:#ac95b9}.process{display:grid;grid-template-columns:.9fr 1.4fr;column-gap:80px;align-items:start}.process>.eyebrow{grid-column:1}.process>h2{grid-column:1;font-size:clamp(38px,4.4vw,60px);position:sticky;top:135px}.process .three-grid{grid-column:2;grid-row:1 / 3;display:block;margin:0}.process .three-grid article{display:grid;grid-template-columns:46px 1fr;column-gap:20px;border:0;border-top:1px solid var(--noir-stroke);border-radius:0;padding:30px 0;background:none;box-shadow:none}.process .three-grid article:last-child{border-bottom:1px solid var(--noir-stroke)}.process .step{grid-column:1;grid-row:1 / 3;margin:6px 0 0;font-size:10px}.process .three-grid h3{font-size:28px;font-weight:400}.process .three-grid p{grid-column:2;margin:14px 0 0;font-size:14px}.journal-home{border-top:1px solid var(--line);position:relative}.journal-home:after{content:"DX / FIELD NOTES";font:9px monospace;letter-spacing:.15em;color:#976ba9;position:absolute;right:48px;top:115px;writing-mode:vertical-rl}.reveal-ready{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.reveal-ready.in-view{opacity:1;transform:none}.button>span:last-child{transition:transform .2s}.button:hover>span:last-child{transform:translate(2px,-2px)}
@keyframes contour-breathe{to{transform:scale(1.055) translateY(8px)}}@keyframes web-float{50%{transform:translateY(-8px) rotate(-6deg)}}@keyframes app-float{50%{transform:translateY(-10px) rotate(6deg)}}@keyframes signal-float{50%{transform:translateY(8px) rotate(7deg)}}
@media(max-width:1100px){.nav-links{gap:18px}header{padding:0 18px}.brand span{display:none}.header-mail{margin-right:12px}.menu{margin-left:18px;padding-left:8px}.nav-cta{padding:13px}.signal-card{width:165px;right:0}.signal-title{font-size:18px}.process{column-gap:35px}.showcase{gap:35px}}
@media(max-width:800px){header{margin:0 14px}.nav-links{gap:14px}nav:not(.open) .nav-links{display:none}.brand span{display:block}.header-mail{margin-right:18px}.brand{margin-right:0}.menu{margin-left:auto}.hero{min-height:740px}.hero-inner:before,.hero-inner:after{display:none}.process{column-gap:30px}.showcase{grid-template-columns:1fr}.showcase-copy{max-width:540px}.digital-art{max-width:540px;width:100%;margin:0 auto;min-height:570px}.signal-card{width:180px}.process{grid-template-columns:1fr}.process>h2{position:static}.process .three-grid{grid-column:1;grid-row:auto;margin-top:35px}.process .three-grid article{padding:28px 0}.process .three-grid h3{font-size:25px}}
@media(max-width:700px){body{padding-top:12px}header{height:62px;top:12px;margin:0 12px;padding:0 14px}.header-mail{margin-right:12px;width:28px}.header-mail svg{width:20px}.brand img{width:90px;height:38px}.brand span{font-size:6px}.menu{gap:9px;padding-left:8px;font-size:9px}.menu .menu-mark{width:25px;height:25px}.hero{margin-top:-74px;padding-top:74px;min-height:745px}.hero-inner{padding:95px 22px 130px}.hero .eyebrow{font-size:8px}.hero h1{font-size:clamp(44px,10vw,65px)}.hero-bottom{bottom:24px}.hero .contours{opacity:.6}.hero p{max-width:350px}.showcase{padding-top:65px;padding-bottom:85px;gap:5px}.showcase h2{font-size:38px}.digital-art{min-height:490px;max-width:430px}.art-registration{top:20px;left:0;font-size:7px}.browser-mock{width:85%;min-height:255px;margin-top:15px;padding:8px 8px 30px}.mock-body{min-height:210px;padding:25px 18px}.mock-body h3{font-size:32px}.signal-card{top:55px;width:148px;min-height:185px;right:0;padding:10px 12px 32px}.signal-orbit{height:65px}.signal-title{font-size:17px}.signal-label{font-size:5px}.phone-mock{width:130px;min-height:260px;right:6px;bottom:22px;padding:23px 11px 34px}.phone-mock h4{font-size:20px}.phone-icon{margin:15px 0}.art-caption{left:0;bottom:-7px;font-size:6px}.process .three-grid article{grid-template-columns:26px 1fr;gap:0 16px}.process .three-grid p{font-size:14px}.journal-home:after{right:20px;top:65px;font-size:7px}nav.open{top:63px;height:calc(100dvh - 100px);max-height:calc(100dvh - 100px);padding:28px 25px}nav.open .nav-chapter{margin-bottom:24px;font-size:8px}nav.open .nav-links>a{font-size:clamp(29px,8vw,43px);padding:15px 0;gap:16px}nav.open .nav-number{font-size:8px;width:16px}nav.open .nav-arrow{font-size:22px}nav.open .nav-meta{gap:15px;font-size:11px;padding-top:20px}nav.open .nav-meta>span{font-size:7px;margin-top:15px}.orb{left:65px;top:110px;width:230px;height:230px}}
@media(max-height:640px){nav.open{padding-top:20px}nav.open .nav-links>a{font-size:28px;padding:8px 0}nav.open .nav-chapter{margin-bottom:10px}nav.open .nav-meta{margin-top:20px}nav.open .nav-meta>span{margin-top:0}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important}.reveal-ready{opacity:1;transform:none}.hero .contours{transform:none}}
nav.open{position:absolute}nav.open .nav-cta span{margin-left:0}nav.open .nav-cta .nav-arrow{margin-left:auto}

/* A visible, slow-moving violet and amber reflection across every page. */
body::before{
 content:"";
 position:fixed;
 inset:-20% -65%;
 z-index:4;
 pointer-events:none;
 background:
  linear-gradient(112deg,transparent 34%,rgba(168,79,255,.045) 42%,rgba(204,157,255,.13) 48%,rgba(255,183,132,.18) 50%,rgba(168,79,255,.075) 54%,transparent 63%),
  radial-gradient(ellipse at 35% 25%,rgba(168,79,255,.08),transparent 48%),
  radial-gradient(ellipse at 65% 75%,rgba(255,121,43,.055),transparent 45%);
 mix-blend-mode:screen;
 opacity:.8;
 animation:noir-shimmer 22s ease-in-out infinite alternate;
}
@keyframes noir-shimmer{
 0%{transform:translate3d(-16%,-3%,0);opacity:.65}
 50%{opacity:.95}
 100%{transform:translate3d(16%,3%,0);opacity:.75}
}
@media(prefers-reduced-motion:reduce){body::before{animation:none;transform:none;opacity:.2}}
@media(prefers-reduced-transparency:reduce),print{body::before{display:none}}

/* Vector menu arrows stay consistent on iOS and desktop. */
nav.open .nav-arrow{
 display:grid;place-items:center;flex:0 0 auto;
 width:44px;height:44px;margin-left:auto;
 border:1px solid #cc9bfa35;border-radius:13px;
 background:linear-gradient(135deg,#ff99590b,#be7aff12);
 box-shadow:inset 0 1px 0 #ffffff0a;
 transition:border-color .25s,background .25s,box-shadow .25s,transform .25s;
}
.nav-arrow svg{display:block;width:28px;height:28px;filter:drop-shadow(0 0 6px #b365ff30);transition:transform .25s}
nav.open .nav-links>a:hover .nav-arrow,nav.open .nav-links>a:focus-visible .nav-arrow{
 border-color:#d6abff80;background:linear-gradient(135deg,#ff995916,#be7aff24);
 box-shadow:inset 0 1px 0 #ffffff16,0 0 22px #ab55ff18;
}
nav.open .nav-links>a:hover .nav-arrow svg,nav.open .nav-links>a:focus-visible .nav-arrow svg{transform:translate(2px,-2px)}
@media(max-width:700px){nav.open .nav-arrow{width:34px;height:34px;border-radius:10px}.nav-arrow svg{width:23px;height:23px}}
@media(prefers-reduced-motion:reduce){nav.open .nav-links>a .nav-arrow svg{transform:none}}