@font-face{font-family:Archivo;src:url('/fonts/archivo.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
:root{--bg:#101010;--black:#000;--fg:#f5f5f5;--muted:#a3a3ad;--accent:#9999ff;--blue:#00005b;--line:#ffffff1c;--max:1320px;--gutter:clamp(24px,5.5vw,88px);color-scheme:dark;font-family:'Archivo',Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;overflow-x:clip}body::before{content:'';position:fixed;inset:0;z-index:10;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button,a{-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}img,video{display:block;max-width:100%}h1,h2,h3,p{margin:0}button:focus-visible,a:focus-visible,video:focus-visible{outline:2px solid var(--accent);outline-offset:7px}::selection{color:var(--bg);background:var(--accent)}.wrap{width:calc(100% - var(--gutter)*2);max-width:var(--max);margin-inline:auto}.lilac{color:var(--accent)}.muted{color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:500}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}.skip-link{position:fixed;top:12px;left:12px;z-index:50;padding:12px 20px;background:var(--accent);color:var(--bg);transform:translateY(-160%)}.skip-link:focus{transform:none}.page-progress{position:fixed;top:0;left:0;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;z-index:40}.header{height:108px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.wordmark{font-size:38px;font-weight:700;letter-spacing:-3px;line-height:1}.wordmark>span{color:var(--accent)}.header nav{display:flex;align-items:center;gap:44px;font-size:13px}.header nav>a{display:flex;gap:16px;align-items:center;min-height:44px}.nav-index{font-size:9px;color:var(--muted);align-self:flex-start;margin-top:7px}.nav-contact{border-bottom:1px solid #9999ff80}.nav-contact>span{color:var(--accent);font-size:20px}
.hero{min-height:min(840px,calc(100svh - 108px));display:grid;grid-template-columns:1.07fr 1fr;column-gap:20px;align-items:center;position:relative;padding-top:58px;padding-bottom:105px}.hero-copy{position:relative;z-index:2}.hero h1{font-size:clamp(68px,7.8vw,116px);line-height:.98;font-weight:700;letter-spacing:-.075em}.replay-mark{display:inline-block;font-size:.65em;font-weight:400;margin-left:.08em;vertical-align:9%;letter-spacing:-.1em}.hero-description{font-size:14px;line-height:1.8;color:var(--muted);margin-top:28px;letter-spacing:-.02em}.text-link{display:inline-flex;gap:24px;align-items:center;margin-top:30px;font-size:14px}.arrow-circle{width:34px;height:34px;border:1px solid #9999ff80;border-radius:50%;display:grid;place-items:center;color:var(--accent);font-size:19px}.hero-art{position:relative;height:490px;min-width:0;isolation:isolate;margin-left:6px}.hero-art::before{content:'';position:absolute;z-index:-1;inset:10% -8%;background:radial-gradient(ellipse at 60% 55%,#00005b70,transparent 65%)}.hero-film{padding:0;position:absolute;top:100px;left:0;width:92%;aspect-ratio:16/10;overflow:hidden;border:1px solid #ffffff25;border-radius:3px;transform:rotate(-5deg);background:#181820;box-shadow:0 20px 70px #0007;transition:transform .35s}.hero-film:hover{transform:rotate(-3deg) translateY(-4px)}.hero-film>img{width:100%;height:100%;object-fit:cover}.film-shade{position:absolute;inset:0;background:linear-gradient(0deg,#000b,transparent 55%)}.hero-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff60;background:#10101055;backdrop-filter:blur(8px);padding-left:3px;font-size:18px}.film-caption{position:absolute;left:20px;right:20px;bottom:15px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.06em}.film-caption .muted{font-size:8px;margin-left:5px;color:#ccc}.hero-portrait{position:absolute;right:-5px;top:170px;width:29%;aspect-ratio:9/16;transform:rotate(9deg);border:5px solid #252529;border-radius:19px;padding:0;overflow:hidden;background:#18181c;box-shadow:0 12px 60px #0009;transition:transform .35s}.hero-portrait:hover{transform:rotate(5deg) translateY(-5px)}.hero-portrait img{height:100%;width:100%;object-fit:cover}.portrait-label{position:absolute;bottom:0;left:0;width:100%;padding:22px 10px 13px;display:flex;justify-content:space-between;background:linear-gradient(transparent,#000c);font-size:8px;letter-spacing:.07em}.timeline{position:absolute;left:20px;right:50px;bottom:57px;height:26px;display:flex;gap:3px;transform:rotate(-5deg);z-index:-1}.timeline>span{background:#9999ff26;border:1px solid #9999ff50;border-radius:2px;flex:1}.timeline>span:nth-child(2){flex:1.8;background:#9999ff40}.timeline>span:nth-child(4){flex:1.4}.timeline>i{position:absolute;top:-7px;bottom:-7px;left:32%;width:1px;background:var(--accent)}.timeline>i::before{content:'';position:absolute;top:0;left:-3px;border:4px solid transparent;border-top-color:var(--accent)}

.showcase{height:190svh;position:relative}.showcase-sticky{height:100svh;min-height:680px;position:sticky;top:0;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(45px,8vw,125px);align-items:center;padding-block:45px}.showcase-short{background:radial-gradient(ellipse at 80% 45%,#00005b23,transparent 55%)}.showcase-long{border-top:1px solid var(--line);background:radial-gradient(ellipse at 15% 45%,#00005b22,transparent 55%)}.process-copy{max-width:390px}.process-copy>p{color:var(--muted);font-size:14px;line-height:1.85;margin-bottom:14px}.project-picker{margin-top:37px;display:flex;flex-direction:column;border-top:1px solid var(--line)}.project-tab{display:flex;align-items:center;text-align:left;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}.project-tab>span:first-child{font-size:10px;opacity:.6}.project-tab>span:last-child{margin-left:auto}.project-tab.active{color:var(--accent)}.project-tab.active>span:first-child{opacity:1}.project-tab:hover{color:var(--fg)}.device-column{min-width:0;text-align:center;position:relative}.device-heading h2{font-size:clamp(27px,3.15vw,44px);font-weight:500;letter-spacing:-.055em;line-height:1.15}.device-scene{perspective:1100px;position:relative;display:grid;place-items:center;isolation:isolate}.phone-scene{height:400px;margin-top:22px}.device-rotator{position:relative;transform-style:preserve-3d;will-change:transform;transform:rotateY(var(--rotation));z-index:1}.device-front,.device-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.phone{height:365px;aspect-ratio:9/17.8}.phone-front{border:2px solid #76767f;border-radius:30px;padding:7px;background:#060609;transform:translateZ(7px);box-shadow:inset 0 0 0 2px #1d1d27}.phone-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:22px;background:#070708;display:grid;align-items:center}.phone-screen video{height:100%;width:100%;object-fit:cover}.phone-island{position:absolute;left:50%;top:8px;transform:translateX(-50%);width:61px;height:16px;background:#050505;border-radius:12px;box-shadow:0 0 0 1px #ffffff0e}.phone-island::after{content:'';position:absolute;right:8px;top:5px;width:6px;height:6px;border-radius:50%;background:#171725;box-shadow:inset 0 0 1px #8888b8}.phone-back{border-radius:30px;background:linear-gradient(130deg,#292833,#17171d 40%,#30303b);border:2px solid #76767f;transform:rotateY(180deg) translateZ(7px);box-shadow:inset 0 0 0 2px #272730}.phone-edge{position:absolute;width:14px;height:89%;left:calc(100% - 7px);top:5.5%;background:linear-gradient(90deg,#30303e,#828290,#30303e);transform:rotateY(90deg);border-radius:3px}.camera-island{position:absolute;top:13px;left:12px;width:77px;height:82px;border:1px solid #64647080;border-radius:20px;background:#34333f;box-shadow:3px 3px 5px #0005}.camera-island i{width:27px;height:27px;position:absolute;border:3px solid #777784;border-radius:50%;background:radial-gradient(circle,#191938 20%,#09090c 26%,#15151f 52%,#050505 58%);box-shadow:1px 1px 4px #000}.camera-island i:nth-child(1){left:7px;top:7px}.camera-island i:nth-child(2){left:7px;bottom:7px}.camera-island i:nth-child(3){right:7px;top:26px}.camera-island b{position:absolute;right:13px;top:8px;width:10px;height:10px;background:#d9d2bf;border-radius:50%;box-shadow:0 0 6px #d9d2bf30}.device-brand{position:absolute;top:45%;left:0;right:0;text-align:center;font-weight:700;font-size:42px;letter-spacing:-4px;color:#9999ff50}.device-brand>span{font-size:22px;vertical-align:top;margin-left:3px}.device-shadow{position:absolute;z-index:0;bottom:2px;left:25%;width:50%;height:18px;border-radius:50%;background:#000;filter:blur(12px);opacity:.7}.device-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:13px;min-height:35px}.playing-label{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}.playing-label .status-dot{width:4px;height:4px}.preview-toggle{font-size:13px;color:var(--muted);height:36px;width:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center}.watch-button{font-size:11px;display:flex;gap:14px;align-items:center;border-bottom:1px solid #9999ff65;padding:8px 0}.watch-button>span{color:var(--accent);font-size:16px}.monitor-scene{height:auto;aspect-ratio:1.38;margin-top:33px}.monitor{width:100%;max-width:530px;aspect-ratio:16/10}.monitor-front{height:90%;border-radius:10px;background:linear-gradient(130deg,#45454e,#1a1a21);border:1px solid #6b6b76;transform:translateZ(8px);padding:8px 8px 25px;box-shadow:inset 0 0 0 2px #17171d}.monitor-screen{width:100%;height:100%;background:#000;overflow:hidden;border:1px solid #08080d;border-radius:4px}.monitor-screen video{height:100%;width:100%;object-fit:contain}.monitor-logo{position:absolute;bottom:7px;left:0;right:0;font-size:8px;font-weight:700;letter-spacing:-.5px;color:#a3a3ad}.monitor-back{height:90%;border-radius:10px;background:linear-gradient(130deg,#383842,#1e1e25 60%,#2d2d39);border:1px solid #6b6b76;transform:rotateY(180deg) translateZ(8px)}.monitor-back .device-brand{top:30%}.monitor-vents{position:absolute;bottom:20px;left:20%;right:20%;height:14px;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 5px);opacity:.5}.monitor-edge{position:absolute;height:78%;top:5%;width:16px;left:calc(100% - 8px);background:linear-gradient(90deg,#30303e,#626270,#30303e);transform:rotateY(90deg);border-radius:4px}.monitor-neck{position:absolute;top:87%;left:42%;width:16%;height:23%;background:linear-gradient(90deg,#24242e,#51515c,#25252e);transform:translateZ(-1px);clip-path:polygon(20% 0,80% 0,100% 100%,0 100%)}.monitor-foot{position:absolute;left:30%;width:40%;height:12px;top:109%;background:linear-gradient(#535360,#26262e);border:1px solid #656570;border-radius:50% 50% 4px 4px;transform:translateZ(15px)}.monitor-scene>.device-shadow{bottom:-5px;left:15%;width:70%}.showcase-long .device-controls{margin-top:29px}

.video-dialog{padding:22px 26px 18px;border:1px solid #ffffff2a;border-radius:12px;background:#141416;color:var(--fg);width:min(1000px,94vw);max-width:none;max-height:94svh;overflow:auto;box-shadow:0 30px 120px #0008}.video-dialog::backdrop{background:#000d;backdrop-filter:blur(10px)}.video-dialog[open]{display:flex;flex-direction:column}.dialog-header{display:flex;justify-content:space-between;align-items:center;gap:25px;padding-bottom:18px}.dialog-header h2{font-size:18px;font-weight:500;letter-spacing:-.04em}.dialog-close{display:flex;gap:16px;align-items:center;min-height:36px;font-size:12px;color:var(--muted)}.dialog-close>span{font-size:25px;color:var(--fg)}.full-video{background:#000;width:100%;max-height:72svh;min-height:100px;object-fit:contain;outline-offset:0}.video-dialog.vertical{width:min(475px,94vw)}.video-dialog.vertical .full-video{height:72svh}.player-error{margin-block:12px;font-size:13px;line-height:1.7;color:var(--muted)}.player-error>a{color:var(--accent);text-decoration:underline}body.player-open{overflow:hidden}
@media(min-width:1600px){.hero{min-height:820px}.hero h1{font-size:128px}.hero-art{height:540px}.hero-film{top:110px}.hero-portrait{top:190px}}
@media(max-height:760px) and (min-width:901px){.header{height:85px}.hero{min-height:650px;padding-top:40px}.hero h1{font-size:90px}.hero-art{height:440px}.showcase-sticky{min-height:620px;padding-block:25px}.phone-scene{height:330px;margin-top:15px}.phone{height:310px}.device-heading h2{font-size:34px}.monitor-scene{height:auto}.process-copy>p{font-size:13px}.project-picker{margin-top:24px}}
@media(max-width:1100px){.hero h1{font-size:clamp(65px,8.3vw,92px)}.hero-art{height:440px}.hero-film{top:94px;aspect-ratio:16/11}.hero-portrait{top:175px;width:31%}.hero-description{font-size:13px}.showcase-sticky{column-gap:55px}.monitor-scene{height:auto}.monitor{max-width:420px}.device-heading h2{font-size:33px}}
@media(max-width:900px){.header{height:90px}.header nav{gap:25px}.hero{padding-top:65px;padding-bottom:105px;min-height:auto;grid-template-columns:1.1fr 1fr;column-gap:0}.hero h1{font-size:clamp(60px,8.5vw,77px)}.hero-art{height:380px}.hero-film{top:100px;left:0;width:97%}.hero-portrait{top:185px;right:-7px;width:32%;border-width:3px;border-radius:12px}.timeline{bottom:50px;left:5px;right:22px}.hero-description{font-size:12px}.showcase{height:auto;padding-block:60px 85px}.showcase-sticky{height:auto;min-height:0;position:relative;display:grid;grid-template-columns:1fr 1fr;column-gap:35px;padding-block:0}.process-copy>p{font-size:12px}.phone-scene{height:350px}.phone{height:320px}.device-heading h2{font-size:27px}.monitor-scene{height:auto}.project-tab{font-size:12px}.device-controls{gap:8px;flex-wrap:wrap}.watch-button{font-size:10px;gap:8px}.playing-label{font-size:9px}.preview-toggle{width:32px;height:32px}}
@media(max-width:650px){:root{--gutter:24px}.header{height:82px}.wordmark{font-size:32px}.header nav{gap:22px;font-size:11px}.nav-index{display:none}.header nav>a{gap:7px}.nav-contact>span{font-size:17px}.hero{display:flex;flex-direction:column;align-items:stretch;padding-top:46px;padding-bottom:76px}.hero h1{font-size:clamp(66px,14vw,91px);line-height:1.02;letter-spacing:-.075em}.hero-description{font-size:12px;margin-top:23px;line-height:1.8}.text-link{margin-top:22px;font-size:12px;gap:20px}.arrow-circle{width:30px;height:30px;font-size:17px}.hero-art{height:350px;margin:33px 0 5px;max-width:480px;width:100%;align-self:center}.hero-film{top:66px;width:88%;left:4px;aspect-ratio:16/10}.hero-portrait{top:111px;right:7px;width:28%;border-width:4px;border-radius:16px}.hero-play{width:48px;height:48px;font-size:14px}.film-caption{font-size:8px;left:14px;right:14px;bottom:13px}.film-caption .muted{font-size:7px}.timeline{bottom:51px;left:20px;right:55px;height:22px}.showcase{padding-block:45px 65px}.showcase-sticky{display:flex;flex-direction:column;gap:45px}.device-column{width:100%;order:0}.process-copy{order:1;max-width:none;width:100%}.showcase-short .process-copy{order:1}.device-heading h2{font-size:34px}.phone-scene{height:385px;margin-top:20px}.phone{height:355px}.device-controls{margin-top:8px;gap:14px}.playing-label{font-size:10px}.watch-button{font-size:11px;gap:12px}.preview-toggle{width:36px;height:36px}.process-copy{padding-top:26px;border-top:1px solid var(--line)}.process-copy>p{font-size:13px;line-height:1.85;max-width:46ch}.project-picker{margin-top:25px}.project-tab{font-size:13px;padding-block:16px}.monitor-scene{height:auto;aspect-ratio:1.38;margin-top:25px}.monitor{width:94%;max-width:460px}.showcase-long .device-controls{margin-top:20px}.video-dialog{padding:14px;border-radius:8px}.dialog-header{padding-bottom:10px}.dialog-header h2{font-size:15px}.dialog-close{font-size:11px;gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.showcase{height:auto;padding-block:60px}.showcase-sticky{height:auto;min-height:0;position:relative}.device-rotator{will-change:auto;transform:rotateY(0deg)!important}.hero-film,.hero-film:hover{transform:rotate(-3deg)}.hero-portrait,.hero-portrait:hover{transform:rotate(5deg)}}

/* Phone is second visually on wide screens, first in the reading order. */
.showcase-short .device-column{grid-column:2;grid-row:1}.showcase-short .process-copy{grid-column:1;grid-row:1}

.device-scene{overflow:clip}
@media(max-width:650px){.hero h1{font-size:clamp(56px,14vw,91px)}.hero-art::before{inset:10% 0}}


/* Less copy, more room for the work. */
html { scrollbar-gutter: stable; }
.nav-pricing { display: flex; align-items: center; min-height: 44px; padding: 0; font: inherit; white-space: nowrap; }
.nav-pricing:hover { color: var(--accent); }
.pricing-dialog { width: min(540px, calc(100vw - 40px)); max-height: calc(100svh - 40px); padding: 26px 34px 34px; overflow: auto; border: 1px solid #ffffff2a; border-radius: 18px; background: #141416; color: var(--fg); box-shadow: 0 24px 100px #0008; }
.pricing-dialog::backdrop { background: #000b; backdrop-filter: blur(6px); }
.pricing-dialog[open] { animation: pricing-enter 380ms both; }
.pricing-dialog[open]::backdrop { animation: pricing-backdrop-enter 240ms ease-out both; }
.pricing-dialog[open].is-closing { animation: none; }
.pricing-dialog[open].is-closing::backdrop { animation: pricing-backdrop-exit 160ms ease-in both; }
@keyframes pricing-enter {
  0% { opacity: 0; transform: translateY(18px) scale(.96); animation-timing-function: cubic-bezier(.16,.8,.25,1); }
  72% { opacity: 1; transform: translateY(-2px) scale(1.004); animation-timing-function: ease-in-out; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pricing-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes pricing-backdrop-exit { from { opacity: 1; } to { opacity: 0; } }
.pricing-toolbar { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.pricing-close { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0; font-size: 12px; color: var(--muted); }
.pricing-close > span { font-size: 24px; color: var(--fg); }
.pricing-dialog h2 { font-size: clamp(27px, 4vw, 38px); line-height: 1.15; font-weight: 500; letter-spacing: -.04em; }
.pricing-dialog > p { margin-top: 22px; font-size: 16px; line-height: 1.7; color: #bcbcc5; }
.pricing-contact { display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 48px; margin-top: 30px; padding: 14px 18px; border-radius: 6px; background: var(--accent); color: var(--bg); font-size: 14px; font-weight: 500; }
.pricing-contact:hover { background: #b0b0ff; }
body.pricing-open { overflow: hidden; }
.hero { min-height: min(740px, calc(100svh - 108px)); padding-block: 60px 80px; }
.hero-description { margin-top: 28px; }
.hero h1 { letter-spacing: -.055em; }
.device-heading h2 { letter-spacing: -.035em; }
.wordmark { letter-spacing: -2px; }
.process-copy > p { font-size: 19px; line-height: 1.65; color: #bcbcc5; max-width: 30ch; }
.project-picker { position: relative; margin-top: 30px; }
.project-tab { justify-content: space-between; gap: 20px; padding-block: 18px; }
.project-tab::after { content: ''; width: 6px; height: 6px; flex-shrink: 0; border: 1px solid var(--muted); border-radius: 50%; opacity: .55; }
.project-tab.active::after { background: currentColor; border-color: currentColor; opacity: 1; }
.project-indicator { position: absolute; top: 0; left: 0; z-index: 1; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); pointer-events: none; }
.has-indicator .project-tab::after { display: none; }
.has-indicator .project-tab > .project-marker { display: block; width: 6px; height: 6px; flex-shrink: 0; border: 1px solid var(--muted); border-radius: 50%; opacity: .55; }

.contact {
  border-top: 1px solid var(--line);
  padding-block: 110px 90px;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
}
.contact-message { position: relative; width: max-content; max-width: 100%; }
.contact h2 { font-size: clamp(44px, 5.8vw, 80px); line-height: 1.12; letter-spacing: -.045em; font-weight: 500; }
.contact-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; width: 390px; margin-top: 38px; max-width: calc(100% - 210px); }
.contact-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 6px; border-bottom: 1px solid #9999ff65; font-size: 18px; letter-spacing: -.035em; }
.contact-icon { width: 20px; height: 20px; flex-shrink: 0; }
.contact-link > span { margin-left: auto; font-size: 24px; color: var(--accent); }
.contact-link:hover { color: var(--accent); }
.contact-aside { margin-top: 17px; font-size: 12px; color: #85858f; }
.contact-brian { position: absolute; right: 0; bottom: -90px; width: 200px; height: auto; transform: translateY(2px); filter: drop-shadow(0 15px 25px #0005); }
.contact-preview { display: grid; grid-template-rows: 0px; align-items: center; height: 0; width: 100%; max-width: 520px; justify-self: end; pointer-events: none; visibility: hidden; transition: visibility 320ms; container-type: inline-size; }
.contact-preview-card { overflow: hidden; border: 1.5px solid #424752; border-radius: 24px; background: linear-gradient(145deg, #15191e, #0d1014 70%); box-shadow: 0 20px 65px #0003, inset 0 1px 0 #ffffff04; opacity: 0; filter: blur(8px); transform: translateY(12px) scale(.97); transition: opacity 250ms, filter 320ms, transform 320ms cubic-bezier(.2,.7,.2,1); }
.contact-preview.is-visible { visibility: visible; transition-delay: 0s; }
.contact-preview.is-visible .contact-preview-card { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
.contact-preview-channel { display: flex; align-items: center; gap: 13px; padding: 22px 26px; border-bottom: 1px solid #414650; color: #f5f5f5; font-size: clamp(22px, 5.5cqw, 29px); font-weight: 600; letter-spacing: -.04em; }
.contact-preview-channel > img { width: 36px; height: 36px; object-fit: contain; }
.contact-preview-dots { display: none; margin-left: auto; color: #a9aab7; letter-spacing: 3px; }
.contact-preview-identity { display: flex; align-items: center; gap: clamp(16px, 4.5cqw, 24px); padding: 28px 26px; }
.contact-preview-identity > div:last-child { min-width: 0; }
.contact-preview-avatar { width: clamp(90px, 27cqw, 140px); aspect-ratio: 1; padding: 4px; border: 1.5px solid #444b56; border-radius: 50%; flex-shrink: 0; }
.contact-preview-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 30%; }
.contact-preview-name { font-size: clamp(23px, 6.4cqw, 34px); font-weight: 700; letter-spacing: -.04em; line-height: 1.15; }
.contact-preview-role { margin-top: 8px; font-size: clamp(14px, 3.8cqw, 20px); color: #b6b9c4; }
.contact-preview-footer { display: flex; align-items: center; gap: 13px; margin: 0 26px; padding-block: 21px 24px; border-top: 1px solid #343a44; }
.contact-preview-footer img { width: 24px; height: 24px; flex-shrink: 0; }
.contact-preview-footer img[hidden] { display: none; }
.contact-preview-address { color: var(--accent); font-size: clamp(15px, 4.4cqw, 23px); line-height: 1.4; overflow-wrap: anywhere; }
.contact-preview[data-profile="whatsapp"] .contact-preview-address { color: #f5f5f5; }
.contact-preview[data-profile="whatsapp"] .contact-preview-footer { border: 0; margin: 0; padding: 18px 0 0; gap: 8px; }
.contact-preview[data-profile="whatsapp"] .contact-preview-footer img { width: 20px; height: 20px; }
.contact-preview[data-profile="whatsapp"] .contact-preview-address { font-size: clamp(12px, 3.6cqw, 18px); white-space: nowrap; }
.contact-preview[data-profile="instagram"] .contact-preview-avatar { border: 0; padding: 4px; background: conic-gradient(from 210deg, #ffcf6a, #ff7540, #ed376a, #b52cc1, #7652cd, #ef3b76, #ffcf6a); }
.contact-preview[data-profile="instagram"] .contact-preview-avatar img { border: 4px solid #101318; }
.contact-preview[data-profile="instagram"] .contact-preview-dots { display: block; }
.contact-preview[data-profile="discord"] .contact-preview-avatar { border-color: transparent; padding: 0; }
.footer { border-top: 1px solid var(--line); padding-block: 30px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer .wordmark { font-size: 27px; letter-spacing: -2px; }
.footer > span { font-size: 10px; color: var(--muted); }
.footer > a:last-child { display: flex; align-items: center; gap: 15px; font-size: 10px; color: var(--muted); }
.footer > a:last-child > span { font-size: 16px; color: var(--accent); }

@media (max-width: 1100px) {
  .contact-preview-channel { padding: 18px 20px; }
  .contact-preview-identity { padding: 24px 20px; }
  .contact-preview-footer { margin-inline: 20px; }
  .contact-links { grid-template-columns: 1fr; width: 180px; max-width: calc(100% - 190px); }
  .contact-brian { width: 170px; }
}
@media (max-width: 900px) {
  .hero { min-height: auto; padding-block: 60px; }
  .contact { display: block; padding-block: 75px; }
  .contact-preview { display: none; }
  .contact-brian { bottom: -75px; }
  .process-copy > p { font-size: 17px; }
}
@media (hover: none), (pointer: coarse) {
  .contact-preview { display: none; }
}
@media (max-width: 650px) {
  .hero { padding-block: 46px 40px; }
  .hero-art { margin-top: 12px; height: 320px; }
  .hero-film { top: 40px; }
  .hero-portrait { top: 88px; }
  .timeline { bottom: 33px; }
  .header { height: auto; min-height: 82px; flex-wrap: wrap; gap: 18px 24px; padding-block: 18px; }
  .header nav { flex: 1; min-width: min(100%, 280px); flex-wrap: wrap; justify-content: space-between; gap: 0 16px; font-size: 11px; }
  .header nav > a { white-space: nowrap; }
  .header nav > a { gap: 6px; }
  .process-copy { border-top: 0; padding-top: 0; }
  .process-copy > p { font-size: 17px; max-width: 30ch; }
  .project-picker { margin-top: 20px; }
  .contact { padding-block: 56px 45px; }
  .contact-message { width: 100%; }
  .contact h2 { font-size: clamp(30px, 7.1vw, 44px); line-height: 1.15; }
  .contact-brian { width: 110px; bottom: -45px; }
  .contact-links { max-width: calc(100% - 125px); margin-top: 28px; gap: 12px; }
  .contact-link { font-size: 16px; gap: 8px; }
  .contact-aside { grid-column: 1 / -1; font-size: 11px; }
  .footer { padding-block: 25px; gap: 18px; }
  .footer .wordmark { font-size: 25px; }
  .footer > a:last-child { font-size: 9px; gap: 10px; }
  .pricing-dialog { padding: 16px 24px 26px; }
  .pricing-toolbar { margin-bottom: 18px; }
  .pricing-dialog > p { font-size: 15px; }
  .pricing-contact { width: 100%; gap: 12px; font-size: 13px; }
}