:root { --paper:#f2eee6; --ink:#121518; --blue:#326bff; --green:#52d67b; --line:rgba(18,21,24,.14); --muted:#747474; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"DM Sans",sans-serif; }
.site-header { height:78px; padding:0 clamp(24px,6vw,88px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; background:rgba(242,238,230,.92); backdrop-filter:blur(12px); }
.brand { color:var(--ink); font-weight:700; font-size:16px; letter-spacing:.2em; text-decoration:none; }.brand span { color:var(--blue); }
nav { display:flex; gap:clamp(17px,2.5vw,42px); } nav a { color:#6e6e6e; font-size:13px; padding:30px 0 27px; text-decoration:none; border-bottom:2px solid transparent; transition:.2s; } nav a:hover,nav a.active { color:var(--ink); border-color:var(--blue); }
.hero { min-height:calc(100svh - 78px); display:grid; place-items:center; overflow:hidden; position:relative; padding:90px 24px; }
.hero-content { text-align:center; position:relative; z-index:2; }.hero h1 { font-size:clamp(82px,17vw,250px); letter-spacing:-.1em; line-height:.77; margin:0; font-weight:700; }.hero h1 span { font-family:"Playfair Display",serif; color:var(--blue); font-weight:600; }.hero-tagline { font-size:clamp(16px,1.45vw,21px); margin:38px 0 14px; }.hero-intro { max-width:480px; margin:0 auto; color:#6b6b6b; font-size:15px; line-height:1.55; }.hero-actions { display:flex; justify-content:center; align-items:center; gap:22px; margin-top:28px; }
.availability { display:inline-flex; align-items:center; gap:9px; color:inherit; text-decoration:none; font:500 11px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.05em; }.availability i { display:inline-block; width:8px; height:8px; background:var(--green); border-radius:50%; box-shadow:0 0 0 0 rgba(82,214,123,.55); animation:pulse 2s infinite; } @keyframes pulse { 70% { box-shadow:0 0 0 8px rgba(82,214,123,0); } 100% { box-shadow:0 0 0 0 rgba(82,214,123,0); } }
.work-button { color:var(--ink); font-weight:600; font-size:14px; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:3px; }.work-button b { margin-left:6px; color:var(--blue); }
.hero-orbit { position:absolute; border:1px solid rgba(50,107,255,.32); border-radius:50%; }.orbit-one { width:min(58vw,780px); height:min(58vw,780px); right:-15vw; top:8%; }.orbit-two { width:min(31vw,430px); height:min(31vw,430px); left:-8vw; bottom:6%; }.hero-block { width:12px; background:var(--blue); position:absolute; }.block-one { height:180px; left:12%; top:26%; }.block-two { height:96px; right:16%; bottom:23%; background:#d4d0c6; }.scroll-cue { position:absolute; bottom:28px; color:#5c5c5c; text-decoration:none; font:11px "DM Mono",monospace; }.scroll-cue span { color:var(--ink); margin-left:7px; }
.section { padding:clamp(82px,12vw,170px) clamp(24px,6vw,88px); border-top:1px solid var(--line); overflow:hidden; }.section-intro { margin-bottom:60px; }.eyebrow { margin:0 0 19px; color:#5c5c5c; font:500 11px "DM Mono",monospace; letter-spacing:.16em; text-transform:uppercase; }.section h2,.contact-section h2 { margin:0; font-size:clamp(55px,8.5vw,128px); letter-spacing:-.08em; line-height:.88; }.section h2 em,.contact-section h2 em,.info-card h3 em { font-family:"Playfair Display",serif; font-weight:600; }
.carousel-shell,.short-stage,.info-carousel { position:relative; display:flex; align-items:center; justify-content:center; max-width:1350px; margin:auto; }.carousel { position:relative; height:clamp(294px,39vw,520px); width:100%; }.project-card { position:absolute; left:50%; top:0; width:clamp(310px,56vw,790px); aspect-ratio:16/9; overflow:hidden; border-radius:18px; background:#202327; border:1px solid rgba(255,255,255,.32); transform:translateX(-50%) scale(.7); opacity:0; filter:blur(4px); transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .45s,filter .45s; z-index:1; pointer-events:none; }.project-card.is-active { transform:translateX(-50%) scale(1); opacity:1; filter:none; z-index:3; pointer-events:auto; }.project-card.is-before { transform:translateX(calc(-50% - clamp(255px,31vw,440px))) scale(.7) rotate(-3deg); opacity:.7; filter:blur(1.5px); z-index:2; pointer-events:auto; }.project-card.is-after { transform:translateX(calc(-50% + clamp(255px,31vw,440px))) scale(.7) rotate(3deg); opacity:.7; filter:blur(1.5px); z-index:2; pointer-events:auto; }
.project-card video,.video-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.video-fallback { display:none; }.missing-video .video-fallback { display:block; }.anime { background:linear-gradient(145deg,#ea7260,#263c72 60%,#f2a65d); }.business { background:linear-gradient(145deg,#212839,#566376 52%,#e0a269); }.crime { background:linear-gradient(145deg,#121212,#5f1c22 55%,#2c2e43); }.cartoon { background:linear-gradient(145deg,#f5c657,#5fc8d9 55%,#ea7364); }.motion { background:linear-gradient(145deg,#4d2280,#ef6f94 53%,#ffc85c); }
.project-card footer { position:absolute; bottom:0; left:0; right:0; padding:23px 25px; color:white; background:linear-gradient(transparent,rgba(0,0,0,.85)); display:flex; align-items:end; justify-content:space-between; font-size:16px; font-weight:600; }.project-card footer small { font:10px "DM Mono",monospace; letter-spacing:.1em; }.play-button,.short-play { position:absolute; left:50%; top:50%; translate:-50% -50%; width:68px; height:68px; border:2px solid #fff; color:#fff; border-radius:50%; background:rgba(0,0,0,.16); backdrop-filter:blur(5px); cursor:pointer; font-size:17px; padding-left:5px; }
.carousel-control { color:var(--ink); background:none; border:0; cursor:pointer; z-index:7; font-family:Georgia,serif; font-size:64px; line-height:1; padding:8px 15px; transition:color .2s,transform .2s; }.carousel-control:hover { color:var(--blue); transform:scale(1.1); }.carousel-status,.short-status,.info-status { display:flex; gap:16px; justify-content:center; align-items:center; margin-top:25px; color:#5c5c5c; font:10px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }.project-count,.short-count,.info-count { color:var(--ink); }.progress { width:115px; height:2px; background:#cbc7bd; }.progress i { display:block; width:40%; height:100%; background:var(--blue); transition:width .45s; }
.shorts-section { color:var(--paper); background:var(--ink); }.shorts-section .eyebrow { color:#939393; }.short-stage { max-width:1180px; }.short-reel { height:clamp(330px,43vw,590px); width:min(76vw,890px); position:relative; }.short-card { position:absolute; left:50%; top:0; width:clamp(145px,18vw,240px); aspect-ratio:9/16; overflow:hidden; border-radius:18px; background:#252525; border:1px solid rgba(255,255,255,.24); transform:translateX(-50%) scale(.7); opacity:0; filter:blur(4px); padding:0; transition:transform .65s cubic-bezier(.2,.8,.2,1),opacity .4s,filter .4s; cursor:pointer; }.short-card.is-active { transform:translateX(-50%) scale(1); z-index:3; opacity:1; filter:none; }.short-card.is-before { transform:translateX(calc(-50% - clamp(150px,20vw,270px))) scale(.78) rotate(-7deg); z-index:2; opacity:.62; filter:blur(1px); }.short-card.is-after { transform:translateX(calc(-50% + clamp(150px,20vw,270px))) scale(.78) rotate(7deg); z-index:2; opacity:.62; filter:blur(1px); }.short-card video,.short-fallback { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.short-fallback { display:none; }.missing-video .short-fallback { display:block; }.coral { background:linear-gradient(150deg,#fc9571,#69346b); }.blue { background:linear-gradient(150deg,#6fd7e3,#263d8e); }.lime { background:linear-gradient(150deg,#dfe06e,#387447); }.plum { background:linear-gradient(150deg,#bf699f,#3b2356); }.orange { background:linear-gradient(150deg,#ffbb47,#ca483f); }.short-card b,.short-card small { position:absolute; color:#fff; font:11px "DM Mono",monospace; letter-spacing:.1em; }.short-card b { left:14px; top:14px; }.short-card small { left:14px; bottom:15px; }.short-play { width:52px; height:52px; font-size:13px; }
.process-section { background:#e0ddd5; }.info-carousel { max-width:1150px; }.info-track { position:relative; height:430px; width:min(72vw,815px); }.info-card { position:absolute; inset:0; padding:clamp(30px,5vw,64px); color:var(--paper); border-radius:25px; overflow:hidden; opacity:0; transform:translateY(45px) scale(.94); pointer-events:none; transition:.55s cubic-bezier(.2,.8,.2,1); }.info-card.is-active { opacity:1; transform:none; pointer-events:auto; }.info-card:nth-child(1) { background:#1c2023; }.info-card:nth-child(2) { background:#2e59e9; }.info-card:nth-child(3) { background:#bd573e; }.info-card:nth-child(4) { background:#346a5d; }.info-card:after { content:""; position:absolute; width:400px; height:400px; border:1px solid rgba(255,255,255,.3); border-radius:50%; right:-135px; bottom:-200px; }.card-number { position:absolute; right:34px; top:28px; color:rgba(255,255,255,.65); font:13px "DM Mono",monospace; }.card-kicker { color:rgba(255,255,255,.72); margin:0 0 24px; font:11px "DM Mono",monospace; letter-spacing:.14em; }.info-card h3 { font-size:clamp(40px,5vw,72px); letter-spacing:-.07em; line-height:.86; margin:0 0 24px; }.info-card>p:not(.card-kicker) { max-width:370px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.84); }.workflow-line { display:flex; align-items:center; gap:12px; margin-top:46px; position:relative; z-index:1; }.workflow-line:before { content:""; position:absolute; left:0; top:6px; width:260px; height:1px; background:rgba(255,255,255,.55); }.workflow-line i { width:13px; height:13px; background:var(--green); border-radius:50%; position:absolute; top:0; left:0; animation:slide 4s ease-in-out infinite; }.workflow-line span { font:10px "DM Mono",monospace; padding-top:26px; margin-right:12px; }.tool-grid { display:flex; gap:9px; margin-top:34px; position:relative; z-index:1; }.tool-grid b { width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.55); border-radius:10px; font-size:13px; }.rate-list { margin-top:28px; max-width:390px; position:relative; z-index:1; }.rate-list p { display:flex; align-items:baseline; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.31); margin:0; padding:12px 0; font-size:14px; }.rate-list b { font-size:17px; }.rate-list small { font:10px "DM Mono",monospace; }.bundle-note { display:block; margin-top:20px; font:11px "DM Mono",monospace; color:rgba(255,255,255,.72); }.revision-mark { position:absolute; right:10%; top:25%; color:rgba(255,255,255,.18); font-size:160px; line-height:1; font-weight:700; letter-spacing:-.11em; }.revision-mark span { display:block; font:10px "DM Mono",monospace; letter-spacing:.15em; text-align:right; color:rgba(255,255,255,.75); } @keyframes slide { 50% { transform:translateX(250px); } }
.contact-section { margin:clamp(14px,4vw,68px); padding:clamp(42px,7vw,108px); min-height:700px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; background:var(--blue); color:#fff; border-radius:28px; position:relative; }.contact-section .eyebrow { color:rgba(255,255,255,.7); position:relative; z-index:1; }.contact-section h2 { position:relative; z-index:1; font-size:clamp(56px,9.5vw,150px); }.contact-section h2 em { color:#121518; }.contact-circle { position:absolute; border:1px solid rgba(255,255,255,.4); border-radius:50%; }.circle-a { width:47vw; height:47vw; right:-16vw; bottom:-22vw; }.circle-b { width:28vw; height:28vw; right:-4vw; bottom:-3vw; }.contact-button { position:relative; z-index:1; margin-top:42px; display:inline-flex; gap:30px; align-items:center; padding:16px 20px 16px 25px; border-radius:50px; background:var(--paper); color:var(--ink); font-size:15px; font-weight:600; text-decoration:none; transition:.2s; }.contact-button:hover { transform:scale(1.04); }.contact-button span { font-size:21px; }.contact-availability { color:#fff; margin-top:21px; position:relative; z-index:1; }.contact-section footer { position:absolute; z-index:1; bottom:35px; left:clamp(42px,7vw,108px); right:clamp(42px,7vw,108px); padding-top:18px; border-top:1px solid rgba(255,255,255,.35); display:flex; gap:24px; align-items:center; justify-content:space-between; font:11px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; }.contact-section footer a,.copy-email { color:#fff; font:inherit; background:none; border:0; padding:0; cursor:pointer; text-decoration:none; }
@media (max-width:700px) { .site-header { height:65px; padding:0 20px; }.brand { font-size:13px; } nav { gap:14px; } nav a { padding:25px 0 22px; font-size:11px; } nav a:first-child,nav a:nth-child(4) { display:none; }.hero { min-height:calc(100svh - 65px); }.hero h1 { font-size:22vw; letter-spacing:-.07em; }.hero-tagline { margin-top:30px; }.hero-intro { max-width:330px; font-size:14px; }.hero-actions { flex-direction:column; gap:18px; }.orbit-one { width:84vw; height:84vw; right:-36vw; }.orbit-two { width:56vw; height:56vw; left:-27vw; }.block-one { left:8%; }.block-two { right:9%; }.section { padding:82px 20px; }.section-intro { margin-bottom:42px; }.carousel { height:65vw; }.project-card { width:86vw; }.project-card.is-before { transform:translateX(calc(-50% - 38vw)) scale(.64); }.project-card.is-after { transform:translateX(calc(-50% + 38vw)) scale(.64); }.carousel-control { position:absolute; bottom:-56px; font-size:57px; }.previous,.short-prev,.info-prev { left:25%; }.next,.short-next,.info-next { right:25%; }.carousel-status { margin-top:47px; }.carousel-status span:last-child,.info-status span:last-child { display:none; }.short-reel { width:88vw; height:111vw; }.short-card { width:43vw; }.short-card.is-before { transform:translateX(calc(-50% - 34vw)) scale(.72) rotate(-7deg); }.short-card.is-after { transform:translateX(calc(-50% + 34vw)) scale(.72) rotate(7deg); }.short-status { margin-top:45px; }.info-track { width:88vw; height:475px; }.info-card { padding:34px 28px; }.info-card h3 { font-size:50px; }.info-card>p:not(.card-kicker) { font-size:14px; }.info-carousel .carousel-control { bottom:-58px; }.info-status { margin-top:48px; }.contact-section { margin:12px; min-height:620px; padding:42px 28px; border-radius:20px; }.contact-section footer { left:28px; right:28px; bottom:24px; flex-wrap:wrap; }.contact-section footer span { width:100%; } }