@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;450;500;600;700&display=swap');
.reel-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#ffbb52}
.reel-stage video{width:100%;height:100%;object-fit:cover;display:block}
.reel-open{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:transparent;border:0;color:white;text-shadow:0 1px 12px #000}
.reel-open>span{display:grid;place-items:center;width:76px;height:76px;border:1px solid #ffffff90;border-radius:50%;background:#1118;backdrop-filter:blur(8px);font-size:25px;transition:transform .25s}
.reel-open:hover>span{transform:scale(1.14)}.reel-open b{font-size:13px;letter-spacing:.08em}.reel-open small{font-size:11px}
.reel-label{position:absolute;bottom:20px;left:25px;font-size:10px;letter-spacing:.12em;background:#111c;color:white;padding:7px 10px;pointer-events:none}
.reel-description{font-size:11px;color:#aaa99f;margin:10px 0 0}.reel-close{position:absolute;right:24px;top:24px;border:1px solid #777;background:#111;color:white;padding:10px 20px;border-radius:30px;z-index:2}
.reel-stage.is-expanded{position:fixed;inset:0;z-index:100;width:100%;height:100dvh;background:#080808;aspect-ratio:auto}.reel-stage.is-expanded video{object-fit:contain}.reel-stage.is-expanded .reel-label{display:none}
@media(max-width:760px){.reel-stage{aspect-ratio:4/3}.reel-stage video{object-fit:contain;background:#141513}.reel-label{left:12px;bottom:10px;font-size:8px}.reel-open>span{width:56px;height:56px}}
@media(prefers-reduced-motion:reduce){.reel-open>span{transition:none}}
:root{--bg:#10100f;--surface:#1b1b18;--fg:#f5f4ee;--muted:#aaa99f;--line:#34342f;--accent:#ffbb52;--serif:#e7e3d8;--max:1400px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.5 'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;max-width:100%;height:auto}button{color:inherit}::selection{background:var(--accent);color:var(--bg)}:focus-visible{outline:2px solid var(--accent);outline-offset:6px}[hidden]{display:none!important}.wrap{width:min(var(--max),calc(100% - 88px));margin-inline:auto}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--accent);color:#111;padding:12px 20px}.skip:focus{top:15px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:11px}.eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.muted{color:var(--muted)}.amber{color:var(--accent)}
.site-header{height:92px;display:flex;align-items:center;justify-content:space-between;gap:36px;position:relative;z-index:20}.logo{font-weight:600;font-size:29px;letter-spacing:-1.5px;display:flex;align-items:center;gap:10px}.logo span{font-size:40px;font-weight:300;color:var(--accent);line-height:.6;transform:rotate(-12deg)}.primary-nav{display:flex;align-items:center;gap:34px;margin-left:30px;margin-right:auto;font-size:14px}.primary-nav a{color:#dbdad3;transition:color .2s}.primary-nav a:hover{color:var(--accent)}.button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:49px;border:1px solid transparent;border-radius:100px;background:var(--accent);color:#151510;padding:11px 25px;font-size:14px;font-weight:600;white-space:nowrap;transition:background .2s,transform .2s}.button:hover{background:#ffd28c;transform:translateY(-2px)}.button.outline{background:none;border-color:#63635a;color:var(--fg)}.button.outline:hover{border-color:var(--accent);color:var(--accent)}.text-link{display:inline-flex;align-items:center;gap:25px;border-bottom:1px solid currentColor;padding-bottom:8px;font-size:15px}.text-link:hover{color:var(--accent)}.arrow{font-size:23px;font-weight:400;line-height:1}.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:50px;padding:10px 15px;font-size:13px}
.hero{padding-top:30px}.hero-stage{height:390px;position:relative;border-radius:6px;overflow:hidden;background:#262922;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:27px}.hero-stage::before{content:'';position:absolute;width:690px;height:690px;border:100px solid #777655;border-radius:50%;left:50%;top:55%;transform:translate(-50%,-50%) rotate(10deg);opacity:.2;z-index:-1}.stage-label{position:absolute;top:26px;left:28px;z-index:3;font-size:11px;letter-spacing:.13em;line-height:1.8;text-transform:uppercase;color:#f5f4d6}.stage-label b{font-weight:400;color:#aaa99c}.stage-caption{position:absolute;bottom:25px;right:29px;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.hero-screen{width:185px;border-radius:17px;box-shadow:0 28px 60px #0008;transform:rotate(-11deg) translateY(42px);transition:transform .8s}.hero-screen:nth-of-type(2){width:224px;transform:rotate(5deg) translateY(-14px);z-index:2}.hero-screen:nth-of-type(3){width:185px;transform:rotate(14deg) translateY(38px)}.stage-disc{position:absolute;right:10%;top:35%;height:105px;width:105px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#1e211d;font-size:80px;font-weight:300;transform:rotate(-18deg);box-shadow:0 12px 45px #0002}.hero-title{font-size:clamp(50px,7.7vw,120px);letter-spacing:-.062em;font-weight:300;line-height:1.03;margin:48px 0 37px;max-width:1300px}.hero-title span{color:var(--accent)}.hero-bottom{display:flex;justify-content:space-between;gap:32px;align-items:end;padding-bottom:63px;border-bottom:1px solid var(--line)}.hero-bottom p{max-width:490px;margin:0;color:#b5b4aa;font-size:17px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.scroll-cue{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:25px 0;color:var(--muted)}.scroll-cue span:last-child{color:var(--accent);font-size:24px}
.section{padding:104px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:43px}.section-head h2,.display-heading{font-size:clamp(36px,4.6vw,72px);font-weight:300;letter-spacing:-.045em;line-height:1.08;margin:16px 0 0}.section-head h2{max-width:800px}.section-head .text-link{flex-shrink:0}.section-intro{font-size:19px;max-width:640px;color:var(--muted);line-height:1.6}.work-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:29px}.work-card{display:block;min-width:0}.work-image{height:510px;overflow:hidden;position:relative;border-radius:5px;display:flex;align-items:center;justify-content:center;background:#dac5a0}.work-card.second{margin-top:96px}.work-image img{height:93%;width:auto;border-radius:12px;object-fit:contain;transform:rotate(-8deg) translateY(42px);box-shadow:0 25px 50px #34281940;transition:transform .6s}.work-card.second .work-image{background:#6d7062}.work-card.second .work-image img{transform:rotate(9deg) translateY(40px)}.work-card:hover .work-image img{transform:rotate(0) translateY(18px)}.work-corner{position:absolute;top:24px;left:25px;color:#3d392d;font-size:11px;letter-spacing:.1em;text-transform:uppercase;z-index:2}.work-card.second .work-corner{color:#f5f3e8}.work-open{position:absolute;right:24px;bottom:25px;width:45px;height:45px;border-radius:50%;display:grid;place-items:center;background:var(--fg);color:#171713;font-size:23px}.work-text{display:flex;justify-content:space-between;gap:16px;margin-top:22px}.work-text h3{font-size:30px;font-weight:400;letter-spacing:-.025em;margin:0 0 6px}.work-text p{margin:0;font-size:15px;color:var(--muted);max-width:390px}.work-tags{font-size:10px;letter-spacing:.07em;text-transform:uppercase;margin-top:22px;color:#c2c1b6}.small-label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:10px}
.web-band{background:#e6e3d9;color:#20221e;padding:80px 0;overflow:hidden}.web-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center}.web-copy h2{font-size:clamp(41px,4.8vw,76px);font-weight:300;line-height:1.04;letter-spacing:-.05em;margin:27px 0}.web-copy p{color:#61645b;font-size:17px;max-width:460px;margin:0 0 32px}.web-copy .text-link:hover{color:#8c5811}.browser-scene{padding:34px 0 34px 10px;position:relative}.browser-frame{background:#171815;border:7px solid #34372e;border-radius:14px;box-shadow:0 36px 55px #202a262b;transform:perspective(1300px) rotateY(-9deg) rotateZ(2deg);overflow:hidden;color:#f5f4ed;aspect-ratio:1.4}.browser-top{height:28px;border-bottom:1px solid #ffffff18;display:flex;align-items:center;gap:5px;padding:0 12px;color:#818679;font-size:8px}.browser-top i{width:5px;height:5px;border-radius:50%;background:#636958}.browser-top span{margin-left:auto;margin-right:auto}.browser-nav{font-size:10px;padding:22px 25px 14px;display:flex;justify-content:space-between}.browser-nav b{font-size:15px}.browser-nav span{color:#c9cbbd;font-size:8px}.browser-content{padding:18px 25px;display:grid;grid-template-columns:1.25fr .75fr;gap:15px;align-items:center}.browser-content strong{font-size:clamp(22px,3vw,43px);line-height:1.07;font-weight:400;letter-spacing:-.05em;display:block}.browser-content em{font-style:normal;color:var(--accent)}.browser-content small{font-size:8px;color:#94978b;display:block;margin:18px 0}.browser-pill{font-size:8px;background:var(--accent);color:#24251d;border-radius:30px;padding:8px 12px;display:inline-block}.browser-art{position:relative;aspect-ratio:.8;border:1px solid #b9c29430;border-radius:100px 100px 4px 4px;background:#414934;display:grid;place-items:center;overflow:hidden}.browser-art::before,.browser-art::after{content:'';position:absolute;inset:20%;border:12px solid #aab595;border-radius:100%;transform:rotate(-35deg);width:85%;height:45%}.browser-art::after{border-color:#dfbb7a;transform:rotate(50deg);width:38%;height:82%;inset:11% 31%}.browser-footer{margin:10px 25px;border-top:1px solid #ffffff20;padding:13px 0;color:#999c8e;font-size:8px;display:flex;justify-content:space-between}.browser-note{font-size:10px;color:#686c60;margin:22px 0 0;text-align:right;letter-spacing:.06em;text-transform:uppercase}
.capabilities-intro{display:grid;grid-template-columns:1.55fr .65fr;gap:60px;align-items:end;margin-bottom:55px}.capabilities-intro h2{margin:15px 0 0}.capabilities-intro p{margin:0;color:var(--muted);font-size:17px}.capability{border-top:1px solid var(--line)}.capability:last-child{border-bottom:1px solid var(--line)}.capability summary{display:grid;grid-template-columns:60px 1fr 42px;align-items:center;gap:28px;list-style:none;cursor:pointer;padding:28px 0}.capability summary::-webkit-details-marker{display:none}.cap-number{color:var(--muted);font-size:12px}.cap-name{font-size:clamp(27px,3.5vw,51px);line-height:1.15;font-weight:300;letter-spacing:-.03em}.cap-plus{font-size:33px;font-weight:300;text-align:center;transition:transform .25s}.capability[open] .cap-plus{transform:rotate(45deg);color:var(--accent)}.capability[open] .cap-name{color:var(--accent)}.cap-content{padding:0 70px 33px 88px;display:flex;gap:45px;align-items:start;justify-content:space-between}.cap-content p{max-width:610px;color:#b4b4a9;margin:0;line-height:1.7}.cap-content .text-link{white-space:nowrap}
.catalog{border-top:1px solid var(--line)}.catalog-tools{display:flex;gap:9px;flex-wrap:wrap;margin:31px 0}.filter{background:none;border:1px solid #494a42;padding:9px 18px;color:#c7c7bb;border-radius:40px;font-size:13px}.filter[aria-pressed=true]{background:var(--fg);border-color:var(--fg);color:#1c1d18}.filter:hover{border-color:var(--accent)}.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px}.catalog-card{padding:26px 0 31px;border-top:1px solid var(--line);display:block;position:relative}.catalog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.catalog-top img{width:57px;height:57px;border-radius:14px;transition:transform .3s}.catalog-card:hover .catalog-top img{transform:translateY(-4px)}.catalog-card h3{font-size:19px;letter-spacing:-.02em;font-weight:500;margin:0 0 7px}.catalog-card p{font-size:13px;color:var(--muted);margin:0;max-width:270px;min-height:59px;line-height:1.65}.catalog-card .arrow{color:var(--accent);margin-top:14px;display:block}.status{font-size:10px;color:#a7bc8e;background:#22271e;border:1px solid #3b4731;border-radius:20px;padding:4px 8px}.status.upcoming{color:#cac8b5;background:#25251f;border-color:#464639}.catalog-count{font-size:12px;color:var(--muted);margin-top:15px}
.studio{background:#1a1c17;padding:92px 0}.studio-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}.studio h2{font-size:clamp(36px,4.8vw,72px);line-height:1.1;font-weight:300;letter-spacing:-.04em;margin:0 0 29px}.studio p{color:#b5b9ac;max-width:660px;font-size:18px;line-height:1.7}.studio-facts{display:flex;gap:46px;border-top:1px solid #45483d;margin-top:38px;padding-top:24px;flex-wrap:wrap}.studio-facts small{display:block;font-size:10px;color:#a0a692;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}.studio-facts span{font-size:13px}.studio-graphic{position:relative;aspect-ratio:1;display:grid;place-items:center;border:1px solid #5c654940;border-radius:50%;margin-top:40px;max-width:310px}.studio-graphic::before,.studio-graphic::after{content:'';position:absolute;border:1px solid #87917370;border-radius:50%;width:70%;height:100%;transform:rotate(50deg)}.studio-graphic::after{transform:rotate(-50deg)}.studio-graphic span{font-size:140px;color:#ffc069;font-weight:300;transform:rotate(-12deg)}
.contact-section{padding:115px 0 100px}.contact-title{font-size:clamp(48px,8vw,124px);font-weight:300;line-height:1.02;letter-spacing:-.055em;margin:0 0 39px;max-width:1080px}.contact-title span{color:var(--accent)}.contact-row{display:flex;justify-content:space-between;gap:40px;align-items:center}.contact-row p{font-size:17px;color:var(--muted);max-width:540px}.site-footer{border-top:1px solid var(--line);padding:44px 0 24px}.footer-top{display:flex;justify-content:space-between;gap:30px;margin-bottom:56px}.footer-nav{display:flex;gap:25px;font-size:13px;flex-wrap:wrap}.footer-bottom{border-top:1px solid #30312b;padding-top:23px;display:flex;justify-content:space-between;gap:25px;color:#8f9285;font-size:11px}.footer-legal{display:flex;gap:22px}.footer-email{font-size:14px;color:#c8cabe;margin-top:16px;display:block}
.inner-hero{padding:85px 0 65px}.inner-hero h1{font-size:clamp(50px,7.6vw,115px);font-weight:300;line-height:1.04;letter-spacing:-.055em;margin:25px 0 30px;max-width:1110px}.inner-hero p{font-size:19px;color:var(--muted);max-width:690px}.service-split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.service-list{list-style:none;padding:0;margin:35px 0}.service-list li{border-top:1px solid var(--line);padding:18px 0;font-size:18px;display:flex;justify-content:space-between}.service-list li span{color:var(--accent)}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:40px}.step{border-top:1px solid var(--line);padding:24px 0}.step>span{color:var(--accent);font-size:12px}.step h3{font-weight:400;font-size:23px;margin:40px 0 14px}.step p{color:var(--muted);font-size:15px}.brief-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:85px;padding:65px 0 110px}.brief-layout aside p{color:var(--muted);font-size:17px;max-width:350px}.brief-layout aside h2{font-size:28px;font-weight:400;letter-spacing:-.02em}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}.field{display:flex;flex-direction:column;gap:11px}.field.full{grid-column:1/-1}.field label{font-size:13px}.field input,.field select,.field textarea{background:#1b1c17;border:1px solid #42453a;color:var(--fg);border-radius:3px;padding:15px;width:100%;min-width:0}.field select{color-scheme:dark}.field textarea{min-height:140px;resize:vertical}.field input::placeholder,.field textarea::placeholder{color:#8c9181;font-size:14px}.form-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px}.copy-button{border:0;border-bottom:1px solid #8f9582;padding:6px 0;background:none;font-size:13px}.form-note{font-size:12px;color:#a0a691;margin:21px 0 0;max-width:600px}.form-status{font-size:14px;color:var(--accent);margin-top:18px}.preview-banner{padding:9px 20px;background:#cda974;color:#1d1e16;text-align:center;font-size:11px}
@media(min-width:1500px){.hero-stage{height:470px}.hero-screen{width:220px}.hero-screen:nth-of-type(2){width:268px}.hero-screen:nth-of-type(3){width:220px}}
@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.primary-nav{gap:20px;margin-left:0}.hero-stage{height:340px}.stage-disc{right:5%;width:75px;height:75px;font-size:58px}.hero-screen{width:160px}.hero-screen:nth-of-type(2){width:196px}.hero-screen:nth-of-type(3){width:160px}.app-grid{grid-template-columns:repeat(3,1fr)}.work-image{height:440px}.web-grid{gap:35px}.capabilities-intro{grid-template-columns:1.2fr .8fr;gap:35px}.brief-layout{gap:45px}.hero-bottom{align-items:start}.hero-bottom p{max-width:400px}}
@media(max-width:760px){.wrap{width:calc(100% - 36px)}.site-header{height:80px;gap:14px}.logo{font-size:25px}.logo span{font-size:34px}.header-cta{margin-left:auto;padding:10px 17px;min-height:42px;font-size:12px}.menu-toggle{display:block}.primary-nav{display:none;position:absolute;top:75px;left:0;right:0;margin:0;padding:24px;background:#1e211b;border:1px solid #464b3c;border-radius:4px;box-shadow:0 20px 50px #0008}.primary-nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.primary-nav a{padding:12px;font-size:17px}.hero{padding-top:10px}.hero-stage{height:300px;gap:12px}.hero-screen{width:130px;flex-shrink:0}.hero-screen:nth-of-type(2){width:164px}.hero-screen:nth-of-type(3){width:130px}.stage-label{top:16px;left:16px;font-size:9px}.stage-caption{right:16px;bottom:16px;font-size:9px}.stage-disc{display:none}.hero-title{margin:32px 0 25px;font-size:clamp(45px,9vw,68px)}.hero-bottom{flex-direction:column;align-items:start;padding-bottom:35px}.hero-bottom p{font-size:16px}.hero-actions{gap:10px}.button{padding:11px 20px;font-size:13px}.section{padding:68px 0}.section-head{align-items:start;flex-direction:column;gap:25px;margin-bottom:30px}.section-head h2,.display-heading{font-size:41px}.work-grid{grid-template-columns:1fr;gap:40px}.work-card.second{margin-top:0}.work-image{height:460px}.work-text h3{font-size:26px}.web-band{padding:65px 0}.web-grid,.capabilities-intro,.studio-grid,.service-split,.brief-layout{grid-template-columns:1fr;gap:35px}.browser-content strong{font-size:30px}.web-copy h2{font-size:50px}.web-copy p{max-width:none}.browser-scene{padding:10px}.cap-content{padding:0 0 26px 43px;flex-direction:column;gap:20px}.capability summary{grid-template-columns:28px 1fr 27px;gap:15px;padding:25px 0}.cap-name{font-size:29px}.cap-plus{font-size:27px}.app-grid{grid-template-columns:repeat(2,1fr);gap:0 24px}.catalog-card p{min-height:75px;font-size:12px}.catalog-top{gap:10px;align-items:start;flex-direction:column;margin-bottom:18px}.catalog-card h3{font-size:17px}.studio{padding:64px 0}.studio-graphic{display:none}.studio h2{font-size:46px}.studio-facts{gap:25px}.contact-section{padding:75px 0}.contact-title{font-size:57px}.contact-row{flex-direction:column;align-items:start;gap:15px}.footer-top{flex-direction:column;margin-bottom:30px}.footer-bottom{flex-direction:column;gap:17px}.inner-hero{padding:50px 0 28px}.inner-hero h1{font-size:56px}.steps{grid-template-columns:1fr 1fr;gap:25px}.brief-layout{padding:30px 0 75px}.form-grid{gap:22px}.field input,.field select,.field textarea{padding:13px}.brief-layout aside p{max-width:none}}
@media(max-width:420px){.header-cta .arrow{display:none}.hero-stage{height:260px}.hero-screen{width:112px}.hero-screen:nth-of-type(2){width:145px}.hero-screen:nth-of-type(3){width:112px}.hero-title{font-size:44px}.work-image{height:400px}.work-text{flex-direction:column;gap:0}.small-label{font-size:10px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.browser-content strong{font-size:25px}.browser-nav{padding:16px 16px 6px}.browser-content{padding:12px 16px}.browser-footer{margin:4px 16px}.contact-title{font-size:48px}.steps{grid-template-columns:1fr}.hero-actions{flex-direction:column;align-items:flex-start}}
/* Short brand sequence, never a fake loading screen. JS enables it safely. */
.cinema-intro{position:fixed;inset:0;z-index:90;background:#0b0d0a;overflow:hidden;pointer-events:auto;isolation:isolate;animation:cinema-exit .85s 2.55s cubic-bezier(.76,0,.24,1) forwards}
.cinema-art{position:absolute;inset:0;perspective:1300px;overflow:hidden}
.cinema-grid{position:absolute;inset:-50%;background-image:linear-gradient(#b5bc8d0c 1px,transparent 1px),linear-gradient(90deg,#b5bc8d0c 1px,transparent 1px);background-size:75px 75px;transform:rotate(-16deg);animation:cinema-grid-in 3.4s ease-out both}
.cinema-orbit{position:absolute;left:50%;top:50%;width:70vmin;height:70vmin;border:1px solid #ffc77455;border-radius:50%;box-shadow:0 0 0 9vmin #ffc77406,0 0 0 18vmin #ffc77404;animation:cinema-orbit-in 2.8s cubic-bezier(.16,1,.3,1) both}
.cinema-word{position:absolute;top:36%;left:50%;font-size:clamp(68px,14vw,220px);letter-spacing:-.08em;line-height:1;font-weight:500;color:#fff9e9;white-space:nowrap;animation:cinema-word-in 2.7s cubic-bezier(.16,1,.3,1) both;z-index:5}
.cinema-word>span{display:inline-block;color:var(--accent);margin-left:.08em;animation:cinema-symbol 2.7s cubic-bezier(.16,1,.3,1) both}
.cinema-device{position:absolute;top:50%;left:50%;width:clamp(95px,14vw,210px);border:4px solid #777b69;border-radius:20px;overflow:hidden;box-shadow:0 45px 90px #0009;opacity:0;will-change:transform,opacity}
.cinema-device-one{animation:cinema-left 2.3s .22s cubic-bezier(.16,1,.3,1) both}
.cinema-device-two{animation:cinema-right 2.3s .35s cubic-bezier(.16,1,.3,1) both}
.cinema-web{position:absolute;top:50%;left:50%;width:clamp(240px,33vw,530px);aspect-ratio:1.55;background:#dfe4c9;border:5px solid #727968;color:#21281b;border-radius:13px;box-shadow:0 40px 90px #0008;animation:cinema-web-in 2.3s .45s cubic-bezier(.16,1,.3,1) both;overflow:hidden;padding:0 22px;opacity:0;z-index:3}
.cinema-web-bar{font:9px/1 monospace;letter-spacing:2px;border-bottom:1px solid #72796860;padding:14px 0;display:flex;gap:25px}.cinema-web-bar span{letter-spacing:0}.cinema-web strong{font-size:clamp(25px,3.7vw,57px);line-height:1.02;letter-spacing:-.06em;font-weight:500;position:relative;display:block;margin:24px 0;z-index:1}.cinema-web em{font-style:normal;color:#646e39}.cinema-web small{font-size:8px;letter-spacing:.06em}.cinema-web-mark{position:absolute;right:-13px;top:18%;font-size:clamp(100px,14vw,200px);color:#abb583;line-height:1;rotate:-15deg}
.cinema-caption{position:absolute;left:0;right:0;bottom:15%;text-align:center;font-size:11px;letter-spacing:.26em;color:#dbdfcf;animation:cinema-caption-in 2.8s .15s both}
.cinema-line{position:absolute;width:80px;height:2px;background:var(--accent);bottom:11%;left:calc(50% - 40px);transform-origin:left;animation:cinema-line-in 2.8s both}
.intro-skip{position:absolute;right:28px;bottom:26px;pointer-events:auto;padding:12px 18px;border:1px solid #6c745e;background:#171b14;color:#ebeddf;border-radius:50px;font-size:12px;z-index:8}
.intro-replay{background:none;border:0;padding:0 0 15px;margin-left:auto;display:block;color:#b3b9a5;font-size:11px;letter-spacing:.02em}.intro-replay:hover{color:var(--accent)}
.intro-playing .hero-stage{animation-delay:2.55s}.intro-playing .hero-title{animation-delay:2.75s}.intro-playing .hero-bottom{animation-delay:2.95s}.intro-playing .site-header{animation-delay:2.65s}
@keyframes cinema-exit{0%{clip-path:inset(0 0 0 0);opacity:1}99%{opacity:1}100%{clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden}}
@keyframes cinema-grid-in{from{translate:0 80px;opacity:0}to{translate:0 -45px;opacity:1}}
@keyframes cinema-orbit-in{0%{transform:translate(-50%,-50%) scale(.05);opacity:0}35%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.6);opacity:.3}}
@keyframes cinema-word-in{0%{transform:translate(-50%,30%) scale(.8);opacity:0;filter:blur(10px)}24%,52%{transform:translate(-50%,-50%) scale(1);opacity:1;filter:blur(0)}100%{transform:translate(-50%,-210%) scale(.45);opacity:.8;filter:blur(0)}}
@keyframes cinema-symbol{from{rotate:-150deg;scale:.4}to{rotate:90deg;scale:1}}
@keyframes cinema-left{0%,12%{transform:translate(-50%,-25%) rotate(0) scale(.45);opacity:0}55%,100%{transform:translate(-220%,-47%) rotate(-15deg) scale(1);opacity:1}}
@keyframes cinema-right{0%,12%{transform:translate(-50%,-25%) rotate(0) scale(.45);opacity:0}55%,100%{transform:translate(115%,-49%) rotate(13deg) scale(1);opacity:1}}
@keyframes cinema-web-in{0%,12%{transform:translate(-50%,50%) rotateX(25deg) scale(.5);opacity:0}62%,100%{transform:translate(-50%,-32%) rotateX(0deg) rotate(-3deg) scale(1);opacity:1}}
@keyframes cinema-caption-in{0%,35%{opacity:0;translate:0 20px}65%,100%{opacity:1;translate:0 0}}
@keyframes cinema-line-in{0%{scale:0 1}70%,100%{scale:1 1}}
@media(max-width:760px){.cinema-device{width:112px;border-width:3px}.cinema-web{width:250px;padding:0 15px}.cinema-web strong{font-size:30px;margin:17px 0}.cinema-word{top:32%;font-size:19vw}.cinema-caption{font-size:8px;letter-spacing:.14em;bottom:19%}.cinema-line{bottom:15%}.intro-skip{bottom:22px;right:18px}.cinema-web-mark{font-size:120px}.cinema-orbit{width:90vmin;height:90vmin}}
@media(prefers-reduced-motion:reduce){.cinema-intro,.intro-replay{display:none!important}}
.motion-paused .cinema-intro{display:none!important}
/* Motion is a progressive enhancement: without JS, content remains visible. */
@keyframes stage-arrive{from{opacity:0;clip-path:inset(14% 14% 14% 14% round 40px)}to{opacity:1;clip-path:inset(0 round 6px)}}
@keyframes title-arrive{from{opacity:0;translate:0 45px;clip-path:inset(100% 0 0)}to{opacity:1;translate:0 0;clip-path:inset(0)}}
@keyframes gentle-float{0%,100%{translate:0 calc(var(--scroll-shift,0px) + 0px);rotate:-1deg}50%{translate:0 calc(var(--scroll-shift,0px) - 25px);rotate:1deg}}
@keyframes orbit{to{rotate:360deg}}
@keyframes scroll-nudge{0%,100%{translate:0 0}50%{translate:0 8px}}
@keyframes light-breathe{0%,100%{scale:.91;opacity:.16}50%{scale:1.1;opacity:.3}}
@keyframes nav-arrive{from{opacity:0;translate:0 -15px}to{opacity:1;translate:0 0}}
.hero-stage{animation:stage-arrive 1.25s cubic-bezier(.16,1,.3,1) both}
.hero-title,.inner-hero h1{animation:title-arrive 1.2s .25s cubic-bezier(.16,1,.3,1) both}
.hero-bottom,.inner-hero>p{animation:title-arrive 1s .5s cubic-bezier(.16,1,.3,1) both}
.site-header{animation:nav-arrive .8s ease-out both}
.hero-screen{animation:gentle-float 6.5s ease-in-out infinite;will-change:translate}
.hero-screen:nth-of-type(2){animation-duration:7.8s;animation-delay:-2.5s}
.hero-screen:nth-of-type(3){animation-duration:8.5s;animation-delay:-4s}
.stage-disc{animation:orbit 24s linear infinite}
.hero-stage::before{animation:light-breathe 9s ease-in-out infinite}
.scroll-cue span:last-child{animation:scroll-nudge 1.8s ease-in-out infinite}
.browser-frame,.work-image img{translate:0 var(--scroll-shift,0px)}
.browser-art::before{animation:orbit 20s linear infinite}
.browser-art::after{animation:orbit 26s linear infinite reverse}
.studio-graphic span{animation:orbit 28s linear infinite}
.work-image{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .24s ease-out}
.work-open{transition:scale .3s,background .3s,rotate .3s}.work-card:hover .work-open{scale:1.15;rotate:45deg;background:var(--accent)}
.button .arrow,.text-link .arrow{transition:translate .3s cubic-bezier(.16,1,.3,1)}.button:hover .arrow,.text-link:hover .arrow{translate:4px -3px}
.primary-nav.open{animation:nav-arrive .3s ease-out both}
.reveal-pending{opacity:0}.reveal-pending:focus-within{opacity:1}
.motion-toggle{position:fixed;z-index:50;bottom:18px;left:18px;border:1px solid #6b715e;border-radius:40px;padding:10px 15px;min-height:40px;background:#171b14ed;color:#eeeede;font-size:11px;letter-spacing:.025em;box-shadow:0 3px 20px #0003}
.motion-toggle:disabled{opacity:.75;cursor:default}.motion-background *, .motion-background *::before,.motion-background *::after{animation-play-state:paused!important}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important}.motion-paused .reveal-pending{opacity:1}.motion-paused .hero-screen,.motion-paused .browser-frame,.motion-paused .work-image img{translate:0 0}.motion-paused .work-image{transform:none}
@media(max-width:760px){.hero-screen{animation-name:gentle-float;animation-duration:8s}.motion-toggle{bottom:12px;left:12px;padding:8px 13px}.site-footer{padding-bottom:70px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.reveal-pending{opacity:1}.hero-screen,.browser-frame,.work-image img{translate:0 0!important}.work-image{transform:none!important}}

/* Interactive portfolio identities and scroll-driven wire geometry. */
.motion-portfolio{padding-block:54px 90px}.brand-motion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.brand-motion-card{position:relative;overflow:hidden;border:1px solid #41413c;border-radius:20px;min-height:125px;display:flex;align-items:center;justify-content:center;padding:24px;isolation:isolate;transition:border-color .35s,background .35s,translate .25s;translate:var(--hover-x,0px) var(--hover-y,0px)}.brand-motion-card>span:first-child{font-size:clamp(22px,2.5vw,36px);font-weight:600;letter-spacing:-1px;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.brand-0>span:first-child{font-family:Georgia,serif;letter-spacing:4px;font-weight:400}.brand-1>span:first-child,.brand-2>span:first-child{font-family:Georgia,serif}.brand-visit{position:absolute;bottom:15px;font-size:12px;opacity:0;transform:translateY(20px);transition:opacity .3s,transform .4s}.brand-motion-card:hover,.brand-motion-card:focus-visible{border-color:var(--accent);background:#27231b}.brand-motion-card:hover>span:first-child,.brand-motion-card:focus-visible>span:first-child{transform:translateY(-10px)}.brand-motion-card:hover .brand-visit,.brand-motion-card:focus-visible .brand-visit{opacity:1;transform:translateY(0)}.brand-motion-card:active{scale:.975}
.clarity-motion{height:180svh;min-height:1080px;position:relative;background:#0a0b0b}.clarity-sticky{position:sticky;top:0;height:100svh;min-height:600px;overflow:hidden;display:grid;place-items:center}.clarity-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:pointer}.clarity-copy{position:relative;z-index:1;text-align:center;padding:25px;pointer-events:none;width:100%;max-width:1050px}.clarity-copy .eyebrow{justify-content:center;color:#bdbbad;font-size:10px;letter-spacing:.2em}.clarity-copy h2{font-size:clamp(36px,5.3vw,76px);line-height:1.04;letter-spacing:-.055em;font-weight:400;margin:27px 0;text-shadow:0 0 32px #000,0 0 65px #000}.clarity-copy em{font-style:normal;color:var(--accent)}.clarity-sub{color:#bdbbae;font-size:16px}.clarity-actions{display:flex;justify-content:center;align-items:center;gap:17px;margin-top:34px;pointer-events:auto}.shape-toggle{padding:13px 22px;border:1px solid #727063;border-radius:99px;background:#101110d9;color:#e5e2d8;min-height:49px;transition:background .3s,transform .3s}.shape-toggle:hover,.shape-toggle[aria-pressed=true]{background:#383124;border-color:var(--accent)}.shape-toggle span{display:inline-block;margin-left:10px;transition:transform .6s}.shape-toggle[aria-pressed=true] span{transform:rotate(180deg)}.clarity-hint{position:absolute;bottom:30px;color:#8e8d80;letter-spacing:.18em;font-size:9px;pointer-events:none}
.button{position:relative;isolation:isolate;overflow:hidden;translate:var(--hover-x,0px) var(--hover-y,0px);transition:background .3s,color .3s,transform .3s,translate .2s,border-color .3s}.button::after{content:'';position:absolute;inset:-60%;z-index:-1;border-radius:50%;background:#fff4cf;transform:translateY(105%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}.button:hover::after,.button:focus-visible::after{transform:translateY(0)}.button:hover,.button:focus-visible{color:#191911}.button .arrow{display:inline-block;transition:transform .35s}.button:hover .arrow,.button:focus-visible .arrow{transform:rotate(45deg) translate(2px,-2px)}.button:active,.shape-toggle:active{transform:scale(.96)}.primary-nav a{position:relative}.primary-nav a::after{content:'';height:1px;background:var(--accent);position:absolute;left:0;right:0;bottom:-6px;transform:scaleX(0);transform-origin:left;transition:transform .3s}.primary-nav a:hover::after,.primary-nav a:focus-visible::after{transform:scaleX(1)}
@media(max-width:760px){.brand-motion-grid{grid-template-columns:repeat(2,1fr);gap:10px}.brand-motion-card{min-height:98px;padding:14px;border-radius:15px}.brand-motion-card>span:first-child{font-size:21px}.clarity-motion{height:160svh;min-height:950px}.clarity-sticky{min-height:580px}.clarity-actions{flex-direction:column}.clarity-copy{padding:24px 18px}.clarity-copy h2{font-size:clamp(32px,8.8vw,54px)}.clarity-hint{font-size:8px;bottom:22px}}
@media(hover:none){.brand-visit{opacity:1;transform:none;font-size:10px}.brand-motion-card>span:first-child{transform:translateY(-8px)}}
.motion-paused .brand-motion-card,.motion-paused .button{translate:0 0}.motion-paused .button::after,.motion-paused .shape-toggle span,.motion-paused .brand-motion-card span{transition:none}
@media(prefers-reduced-motion:reduce){.clarity-motion{height:auto;min-height:600px}.clarity-sticky{position:relative;height:650px}.button,.button::after,.button .arrow,.brand-motion-card,.brand-motion-card span,.shape-toggle,.shape-toggle span,.primary-nav a::after{transition:none!important;translate:none!important}.clarity-hint{display:none}}

/* Keep navigation independent of decorative motion and usable on touch. */
.site-header{isolation:isolate}.primary-nav{z-index:30}
a,button{touch-action:manipulation}
.button::after,.primary-nav a::after,.button .arrow{pointer-events:none}
@media(hover:none),(pointer:coarse){
 .button::after,.primary-nav a::after{display:none}
 .button,.button:hover,.button:active{translate:none!important;transform:none!important}
 .button .arrow,.button:hover .arrow{transform:none!important}
}
@media(max-width:760px){
 .site-header{gap:10px;max-width:calc(100% - 36px)}
 .site-header .arvinify-brand{flex-shrink:1;min-width:0}
 .site-header .menu-toggle{flex-shrink:0;margin-left:auto;min-height:44px}
 .site-header .header-cta{display:none}
 .primary-nav.open{display:flex!important;background:#171716;max-height:calc(100svh - 110px);overflow-y:auto;animation:none}
 .hero-actions{width:100%}.hero-actions .button{max-width:100%;white-space:normal}
}

/* Form usability: readable controls, stable touch targets, no overlapping motion control. */
.contact-page .motion-toggle{position:static;display:block;margin:20px auto;box-shadow:none}
.field{min-width:0}.field input,.field select,.field textarea{font-size:16px;min-height:48px}
.field select option{background:#1b1c17;color:#f5f1e9}
.form-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.button:disabled{cursor:wait;opacity:.7}.form-status{padding:14px 16px;border:1px solid #74746a;border-radius:8px;margin-top:24px}
.form-status[data-state="success"]{border-color:#ffbb52;color:#ffe2b2}.form-status[data-state="error"]{border-color:#ffb1a4;color:#ffd3cc}
.form-note a{text-decoration:underline}#brief-copy-fallback{width:100%;min-height:220px;background:#1b1c17;color:#f5f1e9;padding:16px}
@media(max-width:600px){.contact-page .form-grid{grid-template-columns:minmax(0,1fr)}.form-actions{align-items:stretch;flex-direction:column}.form-actions .button{width:100%;min-height:52px}.copy-button{align-self:flex-start;padding:12px 0}}