:root { --ink:#1d0929; --purple:#4a155d; --violet:#6d2d84; --lilac:#c8b5ed; --pale:#f5f0ff; --white:#fff; --line:rgba(29,9,41,.2); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--white); color:var(--ink); font-family:"DM Sans",sans-serif; overflow-x:hidden; } a { color:inherit; text-decoration:none; }
.grain { pointer-events:none; position:fixed; inset:0; opacity:.08; z-index:8; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' 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)'/%3E%3C/svg%3E"); }
.lava-field { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; background:#fff; } .lava { position:absolute; display:block; isolation:isolate; will-change:transform,border-radius; background:radial-gradient(ellipse at 32% 20%,#fff 0 2%,#e9d8ff 4%,rgba(234,212,255,.2) 13%,transparent 27%),radial-gradient(ellipse at 68% 74%,#cf8ab9 0 3%,rgba(188,113,176,.4) 16%,transparent 37%),radial-gradient(ellipse at 34% 78%,#a77cdf 0 4%,transparent 25%),linear-gradient(135deg,#21082f 1%,#401150 25%,#78236d 46%,#be6f9a 68%,#d5b3f2 91%); box-shadow:inset -44px -36px 100px rgba(25,1,35,.65),inset 33px 25px 55px rgba(255,255,255,.38),inset -9px 15px 22px rgba(255,213,178,.22),0 0 42px rgba(75,13,103,.28); filter:saturate(1.22) contrast(1.04); animation:liquid-morph 14s ease-in-out infinite alternate; }.lava:before { content:""; position:absolute; z-index:-1; width:67%; height:66%; left:-23%; top:29%; border-radius:61% 39% 52% 48% / 39% 58% 42% 61%; background:inherit; box-shadow:inherit; transform:rotate(-31deg); }.lava:after { content:""; position:absolute; inset:8%; border-radius:inherit; opacity:.87; background:linear-gradient(119deg,transparent 28%,rgba(255,243,202,.9) 45%,rgba(238,215,255,.4) 53%,rgba(87,18,84,.1) 64%,transparent 75%); filter:blur(13px); mix-blend-mode:screen; }.lava-one { width:43vw; height:72vh; left:-18vw; top:-18vh; border-radius:38% 62% 49% 51% / 58% 38% 62% 42%; transform:translate3d(var(--one-x,0),var(--one-y,0),0) rotate(-16deg); animation-duration:17s; }.lava-two { width:25vw; height:45vh; right:-9vw; top:-8vh; border-radius:67% 33% 53% 47% / 35% 56% 44% 65%; transform:translate3d(var(--two-x,0),var(--two-y,0),0) rotate(17deg); animation-duration:12s; animation-delay:-4s; }.lava-three { width:31vw; height:59vh; right:-13vw; top:39vh; border-radius:43% 57% 32% 68% / 57% 39% 61% 43%; transform:translate3d(var(--three-x,0),var(--three-y,0),0) rotate(30deg); animation-duration:18s; animation-delay:-8s; }.lava-four { width:36vw; height:46vh; left:-19vw; top:65vh; border-radius:31% 69% 45% 55% / 65% 34% 66% 35%; transform:translate3d(var(--four-x,0),var(--four-y,0),0) rotate(-23deg); animation-duration:15s; animation-delay:-2s; }.lava-five { width:26vw; height:35vh; left:40vw; top:99vh; border-radius:67% 33% 59% 41% / 36% 56% 44% 64%; transform:translate3d(var(--five-x,0),var(--five-y,0),0) rotate(8deg); animation-duration:13s; animation-delay:-6s; }
@keyframes liquid-morph { 0% { border-radius:38% 62% 49% 51% / 58% 38% 62% 42%; } 48% { border-radius:63% 37% 30% 70% / 39% 63% 37% 61%; } 100% { border-radius:45% 55% 68% 32% / 64% 42% 58% 36%; } }
.site-header { height:86px; max-width:1440px; padding:0 4.5vw; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:3; background:rgba(255,255,255,.78); backdrop-filter:blur(16px); } .wordmark { font-weight:700; letter-spacing:-.09em; font-size:23px; line-height:1; } .wordmark span { color:var(--violet); }.wordmark em { color:var(--violet); font-size:7px; font-style:normal; vertical-align:top; letter-spacing:0; margin-left:3px; } nav { display:flex; gap:29px; font-size:13px; font-weight:500; } nav a { position:relative; } nav a:after { content:""; position:absolute; left:0; bottom:-5px; width:0; height:1px; background:var(--ink); transition:width .25s; } nav a:hover:after { width:100%; }.menu-toggle { display:none; border:0; background:none; padding:5px; }
main { position:relative; z-index:2; }.hero { min-height:calc(100vh - 86px); max-width:1440px; padding:7.8vh 4.5vw 3vh; margin:auto; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr auto; gap:20px; background:rgba(255,255,255,.72); }.hero-copy { align-self:center; padding-bottom:5vh; }.eyebrow,.section-number { font-family:"DM Mono",monospace; font-size:10px; line-height:1.4; letter-spacing:.04em; text-transform:uppercase; }.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 28px; }.eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--violet); display:inline-block; } h1,h2,h3 { margin:0; font-weight:500; letter-spacing:-.065em; } h1 { font-size:clamp(55px,7.4vw,116px); max-width:690px; line-height:.9; } h1 i,h2 i { font-family:"Playfair Display",serif; font-weight:500; letter-spacing:-.075em; } .hero-intro { font-size:17px; line-height:1.45; max-width:370px; margin:34px 0 31px; }.text-link { font-size:13px; font-weight:600; border-bottom:1px solid var(--ink); padding-bottom:5px; }.text-link b { font-size:18px; margin-left:8px; font-weight:400; }
.hero-art { min-height:500px; position:relative; overflow:hidden; background:var(--purple); color:var(--white); border-radius:49% 51% 38% 62% / 56% 49% 51% 44%; box-shadow:inset -28px -30px 70px rgba(21,2,29,.42),inset 32px 20px 70px rgba(219,187,255,.34); }.hero-art:before { content:""; position:absolute; width:90%; height:54%; left:-10%; top:21%; background:linear-gradient(120deg,rgba(255,255,255,.12),rgba(244,211,255,.52),rgba(72,15,89,.15)); filter:blur(28px); transform:rotate(-22deg); }.hero-stamp { position:absolute; left:8%; top:10%; margin:0; font:10px/1.25 "DM Mono",monospace; letter-spacing:.05em; }.hero-stamp i { font-family:"Playfair Display",serif; font-size:14px; }.hero-orb { position:absolute; width:42%; aspect-ratio:1; right:11%; bottom:11%; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 24%,#fff 0 3%,#dac7ff 7%,#aa69c3 22%,#4a155d 65%); box-shadow:-10px 12px 42px rgba(0,0,0,.4),inset 18px 12px 25px rgba(255,255,255,.3); }.hero-orb span { font-size:clamp(40px,6vw,85px); font-weight:700; letter-spacing:-.12em; color:var(--white); mix-blend-mode:soft-light; }.art-caption { position:absolute; bottom:20px; left:23px; font:10px "DM Mono",monospace; text-transform:uppercase; z-index:1; }.hero-footer { grid-column:1/-1; display:flex; justify-content:space-between; padding-top:10px; border-top:1px solid var(--line); font:10px "DM Mono",monospace; text-transform:uppercase; }.hero-footer b { font-size:18px; margin-left:8px; }
.manifesto { max-width:1440px; margin:auto; padding:170px 4.5vw 155px; display:grid; grid-template-columns:32% 1fr; background:rgba(255,255,255,.86); }.section-number { margin:8px 0 0; }.manifesto h2,.work h2,.contact h2 { font-size:clamp(45px,6.3vw,94px); line-height:.94; max-width:900px; }.manifesto div>p { margin:35px 0 0; font-size:18px; line-height:1.45; max-width:490px; }
.work { background:rgba(29,9,41,.94); color:var(--white); padding:115px 4.5vw 130px; }.work-heading { max-width:1440px; margin:auto; display:grid; grid-template-columns:32% 1fr; }.work-heading h2 { margin-bottom:70px; }.projects { max-width:1440px; margin:auto; display:grid; grid-template-columns:1.09fr .91fr; gap:22px; }.project { display:block; }.project-c { grid-column:1/-1; width:calc(50% - 11px); }.project-art { height:min(44vw,560px); overflow:hidden; position:relative; transition:transform .4s cubic-bezier(.2,.7,.3,1); }.project:hover .project-art { transform:scale(.985); }.project-a .project-art { background:#b68be7; }.jar { position:absolute; width:40%; height:62%; bottom:13%; left:30%; border-radius:6px 6px 50px 50px; border:3px solid var(--ink); background:rgba(255,255,255,.65); }.jar-lid { position:absolute; width:44%; height:8%; left:28%; top:17%; background:var(--ink); border-radius:3px; z-index:2; }.jar-label { position:absolute; z-index:3; top:43%; left:34%; width:32%; text-align:center; font:13px/1.1 "DM Mono",monospace; color:var(--ink); }.jar-label i { font:30px "Playfair Display",serif; }.fig-slice { position:absolute; width:25%; aspect-ratio:1; left:38%; bottom:25%; z-index:2; border-radius:48% 52% 48% 52%; background:var(--purple); }.fig-slice:after { content:""; position:absolute; inset:20%; border-radius:inherit; background:#e3c3ff; }.project-b .project-art { background:#f4eeff; color:var(--ink); }.paper-title { position:absolute; color:var(--ink); top:23%; left:15%; font-size:clamp(33px,5vw,73px); line-height:.8; letter-spacing:-.08em; }.paper-title i { font-family:"Playfair Display",serif; }.paper-rule { width:52%; height:1px; background:var(--ink); position:absolute; left:16%; top:61%; }.paper-dot { width:23px; height:23px; position:absolute; left:16%; top:67%; border-radius:50%; background:var(--violet); }.project-c .project-art { background:#6b257e; }.fruit-outline { border:2px solid #fff; position:absolute; width:47%; aspect-ratio:.85; left:26%; top:18%; border-radius:50% 50% 46% 54%; transform:rotate(-25deg); }.orbit { position:absolute; left:24%; top:41%; width:52%; height:22%; border:2px solid #fff; border-radius:50%; transform:rotate(-23deg); }.orbit-two { transform:rotate(42deg); }.fruit-text { position:absolute; left:36%; top:40%; color:#fff; font-size:3.8vw; line-height:.8; letter-spacing:-.08em; }.fruit-text i { font-family:"Playfair Display",serif; }.project-meta { display:grid; grid-template-columns:1fr auto auto; gap:15px; align-items:baseline; padding:14px 1px 42px; }.project-meta span { font:10px "DM Mono",monospace; text-transform:uppercase; }.project-meta strong { font-size:16px; font-weight:500; }.project-meta b { font-size:19px; font-weight:400; }
.services { max-width:1440px; margin:auto; padding:150px 4.5vw; display:grid; grid-template-columns:32% 1fr; background:rgba(255,255,255,.83); }.services-list { border-top:1px solid var(--line); }.services article { display:grid; grid-template-columns:20% 1fr 1fr; padding:23px 0 33px; border-bottom:1px solid var(--line); }.services article span { font:10px "DM Mono",monospace; }.services h3 { font-size:clamp(27px,3vw,42px); }.services article p { margin:6px 0 0; max-width:290px; font-size:14px; line-height:1.45; }
.contact { background:var(--purple); color:var(--white); min-height:690px; padding:115px 4.5vw 30px; display:flex; flex-direction:column; }.contact .eyebrow span { background:#d8c8ff; }.contact h2 { margin-bottom:45px; }.contact-button { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(255,255,255,.7); padding:0 0 11px; width:min(100%,690px); font-size:clamp(22px,3vw,38px); letter-spacing:-.04em; }.contact-button b { font-weight:400; }.contact-footer { margin-top:auto; padding-top:80px; display:flex; justify-content:space-between; font:10px "DM Mono",monospace; text-transform:uppercase; }.contact-footer a { text-decoration:underline; text-underline-offset:4px; }
@media (max-width:700px) { .lava-one { width:70vw; left:-40vw; }.lava-two { width:56vw; right:-31vw; }.lava-three { width:60vw; right:-37vw; }.lava-four { width:70vw; left:-42vw; }.lava-five { width:56vw; left:35vw; }.site-header { height:68px; padding:0 22px; } nav { display:none; position:absolute; top:68px; left:0; right:0; padding:20px 22px 24px; background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-direction:column; gap:16px; } nav.is-open { display:flex; }.menu-toggle { display:block; }.menu-toggle span { display:block; background:var(--ink); height:1px; width:25px; margin:5px; }.hero { min-height:auto; padding:60px 22px 26px; display:block; }.hero-copy { padding-bottom:59px; }.eyebrow { margin-bottom:20px; } h1 { font-size:clamp(56px,16vw,78px); }.hero-intro { font-size:16px; margin:28px 0; }.hero-art { min-height:400px; }.hero-footer { margin-top:20px; gap:16px; font-size:8px; }.hero-footer span:last-child { text-align:right; }.manifesto,.services { display:block; padding:105px 22px; }.section-number { margin-bottom:30px; }.manifesto h2,.work h2,.contact h2 { font-size:clamp(47px,13vw,73px); }.manifesto div>p { font-size:16px; }.work { padding:90px 22px; }.work-heading { display:block; }.work-heading h2 { margin-bottom:45px; }.projects { display:block; }.project-c { width:auto; }.project-art { height:93vw; margin-top:0; }.project-meta { padding-bottom:36px; }.project-meta span { font-size:8px; }.project-meta strong { font-size:14px; }.fruit-text { font-size:11vw; }.services article { grid-template-columns:15% 1fr; gap:12px; }.services article p { grid-column:2; margin-top:2px; }.contact { min-height:580px; padding:85px 22px 24px; }.contact-footer { padding-top:65px; flex-wrap:wrap; gap:15px; font-size:8px; }.contact-footer span:nth-child(2) { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }.lava { transition:none; } }

/* Scroll-driven liquid field */
.lava-field { background:#fff; }
.liquid-svg { width:100%; height:100%; display:block; opacity:.96; }
.liquid-svg path { mix-blend-mode:multiply; }
.hero,.manifesto,.services { background:rgba(255,255,255,.48); backdrop-filter:blur(3px); }
.hero-art { min-height:500px; display:grid; place-items:center; background:rgba(255,255,255,.61); color:var(--ink); border:1px solid rgba(29,9,41,.16); border-radius:0; box-shadow:none; }
.hero-art:before,.hero-orb,.hero-stamp { display:none; }
.hero-wordmark { position:relative; z-index:1; margin:0; color:var(--purple); text-align:center; font-size:clamp(48px,7vw,104px); font-weight:700; line-height:.82; letter-spacing:-.1em; }
.hero-art .art-caption { color:var(--ink); left:22px; bottom:18px; max-width:180px; line-height:1.35; }
@media (max-width:700px) { .hero-art { min-height:400px; }.hero-wordmark { font-size:clamp(49px,14vw,78px); }.hero,.manifesto,.services { background:rgba(255,255,255,.63); } }

/* Client carousel */
.clients { position:relative; z-index:2; padding:112px 0 120px; background:rgba(255,255,255,.55); overflow:hidden; }
.clients-top { max-width:1440px; margin:auto; padding:0 4.5vw 66px; display:grid; grid-template-columns:32% 1fr; }
.clients h2,.video-work h2 { font-size:clamp(45px,6.3vw,94px); line-height:.94; }
.client-marquee { border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; }
.client-track { width:max-content; display:flex; align-items:center; animation:client-scroll 29s linear infinite; }
.client-track span { width:clamp(178px,20vw,285px); min-height:100px; padding:0 25px; display:grid; place-items:center; border-right:1px solid var(--line); font-size:clamp(16px,2vw,28px); font-weight:700; letter-spacing:-.075em; color:var(--purple); }
@keyframes client-scroll { to { transform:translateX(-50%); } }

/* Interactive video-card spread */
.video-work { position:relative; z-index:2; padding:130px 4.5vw 140px; overflow:hidden; background:var(--pale); }
.video-heading { max-width:1440px; margin:auto; display:grid; grid-template-columns:32% 1fr; }.video-heading p { margin:23px 0 0; font-size:14px; }.video-heading .section-number { margin-top:8px; font-size:10px; }
.card-splay { height:585px; max-width:1110px; margin:80px auto 0; position:relative; perspective:1800px; }
.video-card { width:min(27vw,320px); height:min(40vw,460px); min-height:390px; padding:0; position:absolute; border:0; background:transparent; cursor:pointer; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.2,.75,.2,1), z-index .01s .35s; outline-offset:8px; }.video-card:hover { z-index:10; }.video-card.is-flipped { transform:rotateY(180deg) translateY(-16px) !important; z-index:12; }
.card-one { left:3%; top:39px; transform:rotate(-15deg); }.card-two { left:25%; top:0; transform:rotate(-5deg); }.card-three { left:50%; top:17px; transform:rotate(7deg); }.card-four { right:0; top:68px; transform:rotate(16deg); }
.card-face { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:23px; text-align:left; backface-visibility:hidden; overflow:hidden; box-shadow:0 23px 40px rgba(29,9,41,.18); }.card-front { color:#fff; background:linear-gradient(145deg,#311142 0%,#672276 53%,#c681b6 100%); }.card-front:after { content:""; position:absolute; width:125%; height:37%; left:-22%; top:33%; border-radius:50%; background:linear-gradient(100deg,transparent 22%,rgba(255,238,197,.8) 46%,rgba(218,184,255,.45) 57%,transparent 80%); filter:blur(17px); transform:rotate(-23deg); }.card-two .card-front { background:linear-gradient(140deg,#f5eefe 0%,#c28fdb 51%,#4b195f 100%); color:var(--ink); }.card-three .card-front { background:linear-gradient(140deg,#260936 0%,#7f3e98 45%,#ecbdab 100%); }.card-four .card-front { background:linear-gradient(140deg,#3a0c4d 0%,#8a449f 42%,#cdb4ee 100%); }.card-front small,.card-front b { position:relative; z-index:1; font:10px "DM Mono",monospace; text-transform:uppercase; letter-spacing:.04em; }.card-front strong { position:relative; z-index:1; font-size:clamp(27px,3.1vw,43px); font-weight:500; letter-spacing:-.075em; line-height:.87; }.card-front strong i,.video-placeholder i { font-family:"Playfair Display",serif; font-weight:500; }.card-back { background:var(--white); color:var(--ink); transform:rotateY(180deg); border:1px solid var(--ink); }.card-back b { font:10px "DM Mono",monospace; text-transform:uppercase; }.video-placeholder { flex:1; margin-bottom:15px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; background:linear-gradient(135deg,#2a0c3c,#6d2d84 52%,#d4b3f1); color:#fff; box-shadow:inset -20px -20px 60px rgba(22,2,37,.5),inset 18px 16px 34px rgba(255,255,255,.3); }.video-placeholder i { font-size:clamp(26px,3vw,40px); }.video-placeholder em { font:9px "DM Mono",monospace; letter-spacing:.04em; text-transform:uppercase; font-style:normal; }
@media (max-width:700px) { .clients { padding:90px 0; }.clients-top,.video-heading { display:block; padding:0 22px 45px; }.clients-top .section-number { margin-bottom:28px; }.client-track span { width:172px; min-height:82px; font-size:18px; }.video-work { padding:93px 22px 100px; }.video-heading { padding:0; }.video-heading .section-number { margin:0 0 28px; }.video-heading p { margin-top:18px; }.card-splay { height:540px; margin-top:52px; }.video-card { width:46vw; height:64vw; min-height:275px; }.card-one { left:0; top:51px; }.card-two { left:27%; top:0; }.card-three { left:7%; top:193px; }.card-four { right:-2%; top:219px; }.card-face { padding:15px; }.card-front strong { font-size:clamp(24px,7vw,35px); }.video-card.is-flipped { transform:rotateY(180deg) translateY(-8px) !important; } }

.clients-top > div > p { max-width:500px; margin:27px 0 0; font-size:15px; line-height:1.4; }
.client-logo-wall { width:min(1440px,100%); margin:0 auto; padding:30px 4.5vw 0; }
.client-logo-wall img { display:block; width:100%; height:auto; }
@media (max-width:700px) { .client-logo-wall { padding:12px 22px 0; }.clients-top > div > p { font-size:14px; } }

.client-logo-carousel { overflow:hidden; width:100%; padding:20px 0; }
.logo-carousel-track { display:flex; width:max-content; align-items:center; animation:logo-carousel 56s linear infinite; }
.logo-set { display:flex; align-items:center; }
.logo-set img { display:block; width:175px; height:98px; flex:none; object-fit:contain; padding:12px 19px; }
@keyframes logo-carousel { to { transform:translateX(-50%); } }

.card-splay { max-width:1200px; }
.video-card { width:min(25vw,300px); }
.card-one { left:0; top:60px; transform:rotate(-18deg); }.card-two { left:13%; top:16px; transform:rotate(-12deg); }.card-three { left:26%; top:0; transform:rotate(-6deg); }.card-four { left:39%; top:12px; right:auto; transform:rotate(0deg); }.card-five { left:52%; top:0; transform:rotate(6deg); }.card-six { left:65%; top:16px; transform:rotate(12deg); }.card-seven { left:77%; top:60px; transform:rotate(18deg); }
@media (max-width:700px) { .client-logo-carousel { padding:8px 0; }.logo-set img { width:142px; height:84px; padding:11px 15px; }.card-splay { height:auto; min-height:0; display:flex; overflow-x:auto; gap:14px; margin-right:-22px; padding:12px 22px 30px 2px; perspective:1300px; }.video-card,.card-one,.card-two,.card-three,.card-four,.card-five,.card-six,.card-seven { position:relative; left:auto; right:auto; top:auto; width:62vw; height:86vw; min-height:355px; flex:0 0 62vw; transform:none; }.video-card.is-flipped { transform:rotateY(180deg) translateY(-8px) !important; } }

/* Even playing-card fan with one continuous left-to-right palette. */
.card-one { left:0; top:86px; transform:rotate(-16deg); }.card-two { left:12.5%; top:45px; transform:rotate(-11deg); }.card-three { left:25%; top:12px; transform:rotate(-5deg); }.card-four { left:37.5%; top:0; transform:rotate(0); }.card-five { left:50%; top:12px; transform:rotate(5deg); }.card-six { left:62.5%; top:45px; transform:rotate(11deg); }.card-seven { left:75%; top:86px; transform:rotate(16deg); }
.card-one .card-front { background:linear-gradient(90deg,#21062d,#4d1665); }.card-two .card-front { background:linear-gradient(90deg,#371048,#68277e); color:#fff; }.card-three .card-front { background:linear-gradient(90deg,#592070,#8c4399); }.card-four .card-front { background:linear-gradient(90deg,#7d358e,#ae60ab); }.card-five .card-front { background:linear-gradient(90deg,#a84fab,#d98fbe); }.card-six .card-front { background:linear-gradient(90deg,#c67ebc,#ead0e4); color:var(--ink); }.card-seven .card-front { background:linear-gradient(90deg,#d8b5e8,#f5ebfb); color:var(--ink); }
@media (max-width:700px) { .card-one,.card-two,.card-three,.card-four,.card-five,.card-six,.card-seven { top:auto; left:auto; transform:none; } }

/* Generated hero mark and expanded work-card state */
.hero-logo { position:relative; z-index:1; display:block; width:min(78%, 590px); height:auto; object-fit:contain; }
.video-work:has(.video-card.is-flipped)::after { content:""; position:fixed; inset:0; z-index:50; background:rgba(24,5,38,.62); backdrop-filter:blur(7px); }
.video-card.is-flipped { position:fixed; top:50%; left:50%; width:min(78vw,760px); height:min(80vh,680px); min-height:0; transform:translate(-50%,-50%) rotateY(540deg) rotateZ(0deg) !important; z-index:51; transition:width .65s cubic-bezier(.16,.78,.22,1),height .65s cubic-bezier(.16,.78,.22,1),transform .85s cubic-bezier(.16,.78,.22,1),top .65s cubic-bezier(.16,.78,.22,1),left .65s cubic-bezier(.16,.78,.22,1); }
.video-card.is-flipped .card-back { border:0; }.video-card.is-flipped .video-placeholder { font-size:1.25rem; }.video-card.is-flipped .video-placeholder i { font-size:clamp(38px,5vw,72px); }
@media (max-width:700px) { .hero-logo { width:82%; }.video-card.is-flipped { width:88vw; height:min(68vh,590px); } }

/* Keep the page clear while a card opens; the card transitions inside its own stage. */
.video-work:has(.video-card.is-flipped)::after { display:none; }
.card-splay { height:640px; }
.video-card { transition:transform .95s cubic-bezier(.16,.8,.2,1),width .8s cubic-bezier(.16,.8,.2,1),height .8s cubic-bezier(.16,.8,.2,1),top .8s cubic-bezier(.16,.8,.2,1),left .8s cubic-bezier(.16,.8,.2,1),opacity .45s ease; }
.card-splay:has(.video-card.is-flipped) .video-card:not(.is-flipped) { opacity:.2; pointer-events:none; }
.video-card.is-flipped { position:absolute; top:50%; left:50%; width:min(60vw,700px); height:min(62vh,570px); transform:translate(-50%,-50%) rotateY(540deg) rotateZ(0deg) !important; z-index:20; }
@media (max-width:700px) { .card-splay { height:540px; }.video-card.is-flipped { position:fixed; top:50%; left:50%; width:88vw; height:min(66vh,560px); z-index:30; }.card-splay:has(.video-card.is-flipped) .video-card:not(.is-flipped) { opacity:.35; } }

/* Fade a foreground copy over the untouched fan; never dim the source card. */
@media (hover:hover) {
  .video-card:hover:not(.is-flipped),
  .video-card:focus-visible:not(.is-flipped) { z-index:auto; }
}
.card-splay .card-hover-layer {
  z-index:15;
  pointer-events:none;
  opacity:0;
  transition:opacity 200ms ease-in-out;
}
.card-splay .card-hover-layer.is-visible { opacity:1; }
.card-splay .card-hover-layer .card-front { box-shadow:0 28px 48px rgba(29,9,41,.26); }
.video-card.card-two.is-flipped,
.video-card.card-three.is-flipped,
.video-card.card-six.is-flipped {
  height:min(72vh,640px);
  width:auto;
  aspect-ratio:9 / 16;
  max-width:88vw;
}
.key-visual-image { width:100%; height:100%; min-height:0; object-fit:contain; display:block; }
.card-back:has(.key-visual-image) { gap:16px; }
.card-back:has(.key-visual-image) .video-placeholder { min-height:0; overflow:hidden; }
.card-back video { display:block; width:100%; flex:1; min-height:0; object-fit:contain; background:#160b1e; }
.card-back:has(video) { gap:12px; }
.playback-status { font:11px/1.4 "DM Mono",monospace; text-align:center; }
.playback-status:empty { display:none; }
.video-card.card-five.is-flipped { width:min(80vw,850px); height:auto; aspect-ratio:16 / 10; }
@media (min-width:701px) {
  .card-splay > .card-two:not(.is-flipped) { left:3%; top:64px; transform:rotate(-14deg); }
  .card-splay > .card-three:not(.is-flipped) { left:21%; top:16px; transform:rotate(-7deg); }
  .card-splay > .card-five:not(.is-flipped) { left:39%; top:0; transform:rotate(0deg); }
  .card-splay > .card-six:not(.is-flipped) { left:57%; top:16px; transform:rotate(7deg); }
  .card-splay > .card-seven:not(.is-flipped) { left:75%; top:64px; transform:rotate(14deg); }
}

@media (prefers-reduced-motion:reduce) {
  .video-card,
  .card-splay .video-card:not(.is-flipped) { transition-duration:.01ms; }
  .video-card .card-front { animation:none !important; }
}