@charset "UTF-8"; /* Generated by tools/build-css.py; edit source stylesheets and rebuild. */ /* Source: cinema.css */ #pixel-scene>picture{display:block;width:100%;height:100%} :root{--font-ui:"acumin-pro",Helvetica,Arial,sans-serif;--font-brand:"neue-haas-grotesk-display",Helvetica,Arial,sans-serif;--ink:#101114;--muted:#717279;--paper:#f5f5f7;--red:#ff4d36;--dark:#080a0e;--line:#d9dadd;--pad:clamp(24px,5.2vw,88px);--header:70px} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 20px)}body{margin:0;font-family:var(--font-ui);font-weight:400;font-size:17px;line-height:1.55;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}::selection{background:var(--red);color:white}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:inherit;font-weight:600;letter-spacing:-.048em;line-height:1.02}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:7px}button{border:0}img{display:block;max-width:100%;height:auto}svg{display:block}.wrap{width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--pad)}.section-space{padding-top:clamp(90px,11vw,175px);padding-bottom:clamp(90px,11vw,175px)}.eyebrow{display:flex;align-items:center;gap:10px;text-transform:uppercase;font-size:10px;letter-spacing:.12em;font-weight:500;line-height:1.5}.eyebrow i{display:block;width:6px;height:6px;background:var(--red);border-radius:50%;flex:none}.skip-link{position:fixed;top:10px;left:10px;transform:translateY(-160%);z-index:100;background:white;color:black;padding:12px 20px}.skip-link:focus{transform:none}.inline-link{display:inline-flex;align-items:center;gap:32px;font-size:14px;font-weight:500;border-bottom:1px solid #b8b9be;padding-bottom:9px;transition:color .25s,border-color .25s}.inline-link:hover{color:var(--red);border-color:var(--red)}.light-link{display:inline-block;font-size:14px;font-weight:500;border-bottom:1px solid currentColor;padding-bottom:7px}.light-link:hover{opacity:.7} /* Quiet navigation, precise typography. */ .site-header{position:sticky;top:0;height:var(--header);z-index:60;background:rgba(8,10,14,.84);color:#f5f5f7;border-bottom:1px solid #ffffff14;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;height:100%}.brand{display:flex;align-items:center;gap:10px;flex:none;font-size:28px;font-weight:600;letter-spacing:-.065em;line-height:1}.brand>svg{width:22px;height:22px;fill:var(--red)}.brand-period{color:var(--red)}.nav-links{display:flex;gap:34px;margin-left:70px}.nav-links a{font-size:12px;color:#c3c4ca;transition:color .2s}.nav-links a:hover,.nav-links a.active{color:white}.nav-right{display:flex;align-items:center;gap:25px}.language-link{font-size:10px;color:#bbbcc1}.nav-cta{display:inline-flex;align-items:center;gap:25px;background:#f5f5f7;color:#151619;padding:10px 18px;border-radius:50px;font-size:11px;font-weight:500;line-height:1.4;transition:background .2s,transform .2s}.nav-cta:hover{background:var(--red);transform:translateY(-1px)}.nav-cta span{font-size:18px;line-height:1}.menu-toggle{display:none;position:relative;width:40px;height:40px;padding:9px;background:transparent}.menu-toggle span{display:block;height:1px;background:currentColor;margin:7px 0;transition:transform .2s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}.mobile-nav[hidden]{display:none}.mobile-nav{position:fixed;inset:var(--header) 0 0;background:var(--dark);color:var(--paper);z-index:59;padding:45px var(--pad);display:flex;flex-direction:column;gap:28px;overflow:auto}.mobile-nav a{font-size:36px;letter-spacing:-.04em;line-height:1.1}.mobile-nav a:last-child{font-size:17px;margin-top:25px;color:#aaa} /* Scroll is native. Only scene contents move. */ .pin-section{position:relative}.pin-stage{position:relative;height:calc(calc(100 * var(--scene-vh, 1svh)) - var(--header));min-height:650px;overflow:hidden}.experience-ready:not(.reduced-motion) .pin-section{height:var(--duration,calc(250 * var(--scene-vh, 1svh)))}.experience-ready:not(.reduced-motion) .pin-stage{position:sticky;top:var(--header)}.hero-scroll{--duration:calc(380 * var(--scene-vh, 1svh));background:var(--dark);color:var(--paper);margin-top:calc(-1 * var(--header))}.hero-stage{height:calc(100 * var(--scene-vh, 1svh));min-height:720px}.experience-ready:not(.reduced-motion) .hero-stage{top:0}.hero-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,#fa4a3010,transparent 48%),radial-gradient(ellipse at 50% 40%,#1a26303a,transparent 65%);pointer-events:none}.hero-intro{position:absolute;z-index:3;left:0;right:0;top:clamp(115px,calc(15 * var(--scene-vh, 1vh)),180px);text-align:center;will-change:transform,opacity;pointer-events:none}.hero-intro .eyebrow{justify-content:center;color:#b5b7c1;margin-bottom:26px;font-size:9px}.hero-intro h1{font-size:clamp(68px,8.4vw,132px);line-height:.91;letter-spacing:-.055em;font-weight:600}.hero-intro h1>span{color:#a1a5ae}.core-rig{position:absolute;inset:0;will-change:transform,opacity}.core-frame{position:absolute;width:min(1200px,90vw);height:min(690px,calc(69 * var(--scene-vh, 1vh)));left:50%;top:65%;transform:translate(-50%,-50%)}#pixel-scene{position:relative;width:100%;height:100%}.scene-fallback{width:100%;height:100%;object-fit:contain;opacity:1;transition:none;filter:none}.scene-ready .scene-fallback{opacity:0}.pixel-canvas{opacity:0;transition:none}.scene-ready .pixel-canvas{opacity:1}.hero-aside{position:absolute;left:var(--pad);bottom:155px;z-index:4;color:#8e929d;font-size:12px;line-height:1.7;will-change:opacity}.hero-chapter{position:absolute;z-index:4;top:37%;left:var(--pad);max-width:450px;opacity:0;transform:translateY(30px);pointer-events:none;will-change:transform,opacity}.chapter-kicker{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a1a4af}.hero-chapter h2{font-size:clamp(42px,5vw,76px);line-height:1.02;margin:24px 0;letter-spacing:-.045em}.hero-chapter h2>span{color:#9095a1}.hero-chapter p{font-size:16px;line-height:1.65;color:#9a9fab;max-width:335px}.chapter-three{left:0;right:0;top:34%;max-width:none;text-align:center}.chapter-three h2{font-size:clamp(60px,8vw,120px)}.chapter-three h2>span{color:var(--paper)}.chapter-three p{margin-inline:auto;color:#b9bdc6;font-size:18px}.core-callout{position:absolute;right:7%;bottom:23%;display:flex;align-items:center;gap:14px;color:#a9acb5;font-size:10px;line-height:1.6;opacity:0;will-change:opacity}.core-callout i{width:60px;height:1px;background:#727782;position:relative}.core-callout i:before{content:'';position:absolute;left:-3px;top:-3px;width:7px;height:7px;border:1px solid #9a9fa9;border-radius:50%}.hero-bottom{position:absolute;bottom:30px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;z-index:6;gap:25px}.motion-toggle{display:flex;align-items:center;gap:10px;background:none;padding:8px 0;color:#8f939f;font-size:9px}.motion-icon{display:grid;place-items:center;width:25px;height:25px;border:1px solid #4f535e;border-radius:50%;font-size:10px}.motion-toggle:hover{color:white}.hero-timeline{display:flex;gap:15px;align-items:center;font-size:9px;color:#666d7a;letter-spacing:.03em}.hero-timeline>span{transition:color .2s}.hero-timeline>span.is-current{color:#f5f5f7}.hero-timeline>i{display:block;width:57px;height:1px;background:#343842;position:relative}.hero-timeline b{display:block;height:1px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--red)}.scroll-hint{font-size:9px;color:#9499a5;display:flex;gap:15px;align-items:center}.scroll-hint>span{font-size:21px} /* A pause between the chapters. */ .manifesto{text-align:center;padding-block:clamp(110px,14vw,220px);background:var(--paper)}.manifesto .eyebrow{justify-content:center;margin-bottom:38px;color:#6d6f76}.word-reveal{font-size:clamp(44px,6.3vw,96px);line-height:1.03;max-width:1110px;margin-inline:auto;letter-spacing:-.048em}.word-reveal .word{display:inline-block;color:var(--ink)}.experience-ready:not(.reduced-motion) .word-reveal .word{color:rgba(16,17,20,var(--word-opacity,.2))}.manifesto-description{max-width:600px;margin:40px auto 30px;font-size:19px;line-height:1.65;color:var(--muted)} /* Identity: change scale, find the detail. */ .identity-section{--duration:calc(265 * var(--scene-vh, 1svh));background:#e2e4e6}.identity-stage{background:#e2e4e6}.scene-heading{position:absolute;top:calc(8 * var(--scene-vh, 1vh));z-index:3;will-change:transform,opacity;pointer-events:none}.scene-heading .eyebrow{color:#73767b;margin-bottom:25px}.scene-heading h2{font-size:clamp(46px,5.5vw,86px);line-height:.99}.scene-heading>p:last-child{font-size:16px;line-height:1.6;color:#72767c;margin-top:26px}.identity-image{position:absolute;right:-8%;top:15%;width:77%;height:84%;will-change:transform;transform-origin:70% 60%}.identity-image img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;mix-blend-mode:multiply}.identity-note{position:absolute;z-index:4;display:flex;align-items:center;gap:16px;font-size:11px;line-height:1.5;font-weight:500;opacity:0;will-change:transform,opacity}.identity-note i{width:9px;height:9px;border:2px solid var(--red);border-radius:50%;box-shadow:0 0 0 5px #ffffff77}.note-one{left:18%;bottom:24%;background:#f9f9f9e8;padding:15px 21px;border-radius:5px}.note-two{right:8%;top:20%;background:#f9f9f9e8;padding:15px 21px;border-radius:5px}.identity-outro{position:absolute;z-index:5;left:var(--pad);top:32%;opacity:0;will-change:transform,opacity;pointer-events:none}.identity-outro>p{font-size:clamp(39px,4.7vw,73px);font-weight:500;letter-spacing:-.045em;line-height:1.04}.identity-outro strong{font-weight:500;color:#757a80}.identity-outro .light-link{margin-top:35px;font-size:12px;pointer-events:auto}.concept-label{position:absolute;z-index:5;bottom:22px;left:var(--pad);font-size:9px;letter-spacing:.02em;color:#74777c} /* Interfaces leave the frame and meet real devices. */ .digital-section{--duration:calc(290 * var(--scene-vh, 1svh));background:#f5f5f7}.digital-heading{position:absolute;top:calc(8 * var(--scene-vh, 1vh));left:0;right:0;text-align:center;z-index:4;pointer-events:none;will-change:transform,opacity}.digital-heading .eyebrow{justify-content:center;color:#777b83;margin-bottom:24px}.digital-heading h2{font-size:clamp(57px,6.5vw,104px);line-height:.94}.digital-heading h2>span{color:#858992}.device-scene{position:absolute;width:min(1140px,88vw);height:min(610px,calc(65 * var(--scene-vh, 1vh)));left:50%;top:63%;transform:translate(-50%,-50%);perspective:1800px}.device-laptop{position:absolute;width:76%;left:12%;top:0;z-index:3;will-change:transform;transform-style:preserve-3d}.laptop-screen{position:relative;border:10px solid #181a1c;border-bottom-width:17px;border-radius:20px 20px 4px 4px;aspect-ratio:1.62;background:#121314;box-shadow:0 3px 0 #797b7f,0 30px 50px #272c371c}.camera-dot{position:absolute;top:-7px;left:50%;width:3px;height:3px;background:#44494e;border-radius:50%}.device-ui{height:100%;width:100%;position:relative;overflow:hidden;background:#18191a;color:#f5f5f7}.device-ui>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7}.device-ui-nav{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:23px 30px;font-size:8px;letter-spacing:0}.device-ui-nav>b{font-size:14px;letter-spacing:-.03em}.screen-title{position:absolute;left:7%;top:26%;z-index:2;font-size:clamp(35px,5.5vw,88px);letter-spacing:-.055em;line-height:.83;font-weight:600}.screen-title>span{color:#c9cbcf}.screen-bottom{position:absolute;bottom:7%;left:7%;right:7%;z-index:2;display:flex;justify-content:space-between;align-items:end;font-size:8px;line-height:1.4}.screen-bottom>i{font-style:normal;background:#f5f5f7;color:black;border-radius:25px;padding:9px 13px;font-size:7px}.laptop-base{width:114%;height:16px;position:relative;left:-7%;background:linear-gradient(#bfc0c4,#e3e3e5 25%,#a8a9ad 65%,#5d6065);border-radius:1px 1px 70% 70%;box-shadow:0 13px 19px #31364026}.laptop-base:before{content:'';position:absolute;left:40%;top:0;width:20%;height:5px;background:#909298;border-radius:0 0 9px 9px}.device-tablet{position:absolute;z-index:2;left:12%;top:13%;height:82%;aspect-ratio:.72;background:#222326;border:8px solid #26282b;border-radius:25px;padding:3px;box-shadow:0 15px 35px #141a282b;will-change:transform,opacity}.tablet-camera{position:absolute;width:3px;height:3px;top:-5px;left:50%;background:#5c6065;border-radius:50%}.tablet-ui{height:100%;overflow:hidden;background:#dedfe0;border-radius:12px;position:relative;padding:19px 15px}.tablet-ui>div{display:flex;justify-content:space-between;font-size:5px}.tablet-ui>div>b{font-size:10px;letter-spacing:-.05em}.tablet-ui>img{width:calc(100% + 30px);max-width:none;margin:27px -15px 0;aspect-ratio:1;object-fit:cover;mix-blend-mode:multiply}.tablet-ui>h3{font-size:clamp(20px,2.7vw,39px);line-height:.95;margin-top:15px}.tablet-ui>span{font-size:6px;position:absolute;bottom:18px;left:15px}.device-phone{position:absolute;right:12%;top:20%;height:73%;aspect-ratio:.47;border:7px solid #202124;border-radius:36px;background:#ff4d36;padding:5px;z-index:4;box-shadow:0 18px 28px #1c243333;will-change:transform,opacity}.dynamic-island{position:absolute;width:34%;height:11px;border-radius:20px;background:#17181a;top:8px;left:33%;z-index:2}.phone-ui{height:100%;padding:26px 9px 15px;position:relative;overflow:hidden;background:#ff4d36;border-radius:23px;color:#141518}.phone-ui>b{font-size:10px;letter-spacing:-.04em}.phone-ui>h3{font-size:clamp(20px,3.3vw,48px);line-height:.89;margin-top:26px;position:relative;z-index:1}.phone-ui>h3>span{color:#f9e5e2}.phone-art{position:absolute;bottom:18%;left:32%;width:70%;height:30%;transform:rotate(-30deg)}.phone-art>i{position:absolute;width:100%;height:65%;background:linear-gradient(110deg,#e5e7e9,#6a727e 25%,#eff0f1 55%,#7f8691);border-radius:50%;box-shadow:0 8px 0 #363c45}.phone-art>i:nth-child(2){top:20%}.phone-art>i:nth-child(3){top:40%}.phone-ui>span{position:absolute;bottom:16px;left:10px;font-size:7px;font-weight:500}.digital-details{position:absolute;left:0;right:0;bottom:10%;display:flex;justify-content:space-between;align-items:end;gap:35px;z-index:6;opacity:0;will-change:transform,opacity;pointer-events:none}.digital-details>div{max-width:380px}.digital-details h3{font-size:36px;line-height:1.05;letter-spacing:-.04em}.digital-details p{font-size:15px;line-height:1.65;color:var(--muted);margin-top:18px;max-width:360px}.digital-details>a{pointer-events:auto}.digital-section .concept-label{font-size:8px} /* A campaign becomes the entire field of view. */ .campaign-section{--duration:calc(210 * var(--scene-vh, 1svh));background:var(--dark);color:#f5f5f7}.campaign-frame{position:absolute;inset:0;overflow:hidden;will-change:clip-path}.campaign-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#030405b3,transparent 75%),linear-gradient(0deg,#0304059e,transparent 50%)}.campaign-frame>img{width:100%;height:100%;object-fit:cover;will-change:transform}.campaign-copy{position:absolute;top:22%;z-index:3;will-change:transform,opacity}.campaign-copy .eyebrow{color:#bbbfc6;margin-bottom:33px}.campaign-copy h2{font-size:clamp(55px,6.8vw,108px);line-height:.98;max-width:1000px}.campaign-copy h2>span{color:#ff6954}.campaign-copy>p:not(.eyebrow){font-size:17px;line-height:1.65;color:#c4c7cc;margin-top:32px}.campaign-copy>a{margin-top:29px;font-size:12px}.campaign-bottom{position:absolute;left:0;right:0;bottom:29px;display:flex;justify-content:space-between;gap:20px;z-index:3;font-size:9px;color:#999da7} /* Every service is concrete, every detail has a place. */ .services-section{display:grid;grid-template-columns:1fr 1.2fr;gap:10%;background:var(--paper)}.services-intro{position:sticky;top:150px;align-self:start}.services-intro .eyebrow{color:var(--muted);margin-bottom:35px}.services-intro h2{font-size:clamp(46px,5vw,78px);line-height:.99}.services-intro h2>span{color:#858890}.services-intro>p:last-child{font-size:17px;line-height:1.7;color:var(--muted);margin-top:32px;max-width:340px}.service-item{border-top:1px solid var(--line)}.service-item:last-child{border-bottom:1px solid var(--line)}.service-item summary{list-style:none;display:flex;align-items:center;gap:19px;padding:31px 0;cursor:pointer}.service-item summary::-webkit-details-marker{display:none}.service-no{font-size:10px;color:#9699a0;width:22px;flex:none}.service-title{font-size:clamp(22px,2.1vw,31px);font-weight:500;letter-spacing:-.035em;line-height:1.1;flex:1}.service-item summary>i{width:29px;height:29px;background:#e5e6e9;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:21px;font-weight:400;line-height:1;flex:none;transition:transform .3s,background .3s}.service-item[open] summary>i{transform:rotate(45deg);background:#d7d9dd}.service-body{padding:0 43px 32px 41px}.service-body>p{font-size:16px;line-height:1.75;color:var(--muted)}.service-body>span{font-size:10px;line-height:1.8;display:block;margin-top:17px;color:#8e929a}.service-body>a{font-size:12px;display:inline-block;border-bottom:1px solid #b6b9bf;margin-top:25px;padding-bottom:6px}.service-body>a:hover{color:var(--red)}.service-item[open] .service-body{animation:detail-in .35s ease both}@keyframes detail-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .approach-section{background:#e9eaed;padding-top:100px;padding-bottom:100px}.approach-header{display:flex;justify-content:space-between;align-items:start;gap:40px;margin-bottom:75px}.approach-header>.eyebrow{margin-top:10px;color:#6e727a;max-width:230px}.approach-header h2{font-size:clamp(38px,4.4vw,67px);line-height:1.02}.approach-header h2>span{color:#8a8e97}.approach-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:42px}.approach-steps:before{content:'';position:absolute;left:0;right:0;top:29px;background:#cfd1d6;height:1px}.approach-steps:after{content:'';position:absolute;left:0;right:0;top:29px;background:var(--red);height:1px;transform:scaleX(var(--line-progress,0));transform-origin:left}.approach-step{position:relative;z-index:2}.approach-step>span{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#e9eaed;border:1px solid #c7cad0;font-size:12px;transition:background .3s,color .3s}.approach-step.is-active>span{background:var(--ink);color:white;border-color:var(--ink)}.approach-step h3{font-size:27px;margin-top:34px;font-weight:500}.approach-step>p{font-size:14px;line-height:1.75;color:#737780;margin-top:19px;max-width:250px}.studio-section{background:var(--paper)}.studio-section>.eyebrow{color:var(--muted);margin-bottom:42px}.studio-content{display:grid;grid-template-columns:1.2fr 1fr;gap:10%;align-items:start}.studio-content h2{font-size:clamp(44px,5.2vw,80px);line-height:1}.studio-content h2>span{color:#8a8d95}.studio-description>p{font-size:17px;line-height:1.75;color:#6e737c;max-width:470px;margin:0 0 20px}.studio-description .inline-link{margin-top:15px}.studio-coordinate{border-top:1px solid var(--line);padding-top:32px;margin-top:80px;display:flex;align-items:center;justify-content:space-between;gap:25px}.studio-coordinate>span:first-child{font-size:11px;color:var(--muted)}.studio-coordinate>span:last-child{font-size:32px;font-weight:500;letter-spacing:-.04em;display:flex;align-items:center;gap:25px}.studio-coordinate i{color:var(--red);font-style:normal;font-size:39px} .contact-section{background:#fa503a;color:#111316;overflow:hidden}.contact-section .eyebrow i{background:#111316}.contact-section .eyebrow{font-size:10px;color:#7f1e12}.contact-heading-row{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-top:42px}.contact-heading-row h2{font-size:clamp(70px,9vw,144px);line-height:.92;letter-spacing:-.055em}.contact-button{display:flex;align-items:center;gap:45px;background:#131518;color:#f7f7f8;padding:22px 28px;border-radius:50px;font-size:13px;flex:none;margin-bottom:8px;transition:background .2s,transform .2s}.contact-button span{font-size:22px}.contact-button:hover{background:#303235;transform:translateY(-3px)}.contact-links{display:flex;gap:55px;margin-top:65px;padding-top:29px;border-top:1px solid #ac34254a;font-size:17px;font-weight:500}.contact-links a:hover{opacity:.7}.site-footer{background:#101216;color:#d8dbe1;padding-top:60px;padding-bottom:30px;overflow:hidden}.footer-details{display:flex;justify-content:space-between;align-items:start;gap:25px;font-size:11px;color:#858b98;line-height:1.8}.footer-details>a{color:#bdc1ca;font-size:11px;line-height:1.8}.footer-wordmark{font-size:clamp(100px,18.5vw,296px);font-weight:600;letter-spacing:-.08em;line-height:.8;margin:80px 0 58px;color:#f5f5f7;white-space:nowrap}.footer-wordmark>span{color:var(--red)}.footer-bottom{border-top:1px solid #2c3038;padding-top:24px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:9px;color:#6c7381} /* Reveal only after observers are running; HTML remains readable on its own. */ .experience-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s,transform 1s cubic-bezier(.2,.7,.2,1)}.experience-ready .reveal.is-visible{opacity:1;transform:none}.experience-ready .hero-intro{animation:intro-in 1.25s cubic-bezier(.2,.7,.2,1) both}.experience-ready.hero-entered .hero-intro{animation:none}@keyframes intro-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} @media(min-width:1650px){.hero-intro{top:calc(17 * var(--scene-vh, 1vh))}.hero-intro h1{font-size:140px}.core-frame{height:min(760px,calc(66 * var(--scene-vh, 1vh)));top:65%}.hero-chapter{left:max(var(--pad),calc((100vw - 1600px)/2 + 88px))}.chapter-three{left:0}} @media(max-width:1100px){:root{--pad:42px}.nav-links{margin-left:0;gap:25px}.brand{font-size:26px}.hero-intro h1{font-size:9.5vw}.hero-intro{top:calc(17 * var(--scene-vh, 1vh))}.core-frame{height:calc(65 * var(--scene-vh, 1vh));width:100vw;top:62%}.hero-aside{font-size:10px;max-width:190px;bottom:120px}.hero-chapter{max-width:355px}.hero-chapter h2{font-size:56px}.hero-chapter p{font-size:15px;max-width:280px}.chapter-three{max-width:none}.chapter-three h2{font-size:90px}.core-callout{right:5%;bottom:20%}.hero-timeline{gap:10px}.hero-timeline>i{width:40px}.scene-heading h2{font-size:62px}.identity-image{width:85%;right:-16%}.identity-outro>p{font-size:54px}.identity-note{font-size:10px}.digital-heading h2{font-size:78px}.device-scene{width:95vw;height:calc(55 * var(--scene-vh, 1vh));top:61%}.digital-details h3{font-size:30px}.digital-details p{font-size:14px;max-width:300px}.digital-details>div{max-width:300px}.digital-details>a{font-size:12px;gap:20px}.campaign-copy h2{font-size:78px}.services-section{gap:7%;grid-template-columns:.9fr 1.1fr}.services-intro h2{font-size:58px}.service-title{font-size:25px}.service-item summary{gap:12px}.service-body{padding-left:34px;padding-right:10px}.service-body>p{font-size:15px}.approach-steps{gap:27px}.approach-header h2{font-size:53px}.studio-content{gap:6%}.studio-content h2{font-size:60px}.studio-description>p{font-size:16px}.contact-heading-row{align-items:start;gap:20px;flex-direction:column}.contact-button{margin-top:20px}.contact-heading-row h2{font-size:100px}.contact-links{margin-top:40px}.footer-wordmark{font-size:18vw}.footer-bottom>span:last-child{display:none}} @media(max-width:760px){:root{--pad:24px;--header:64px}.site-header{height:var(--header)}.header-inner{gap:15px}.brand{font-size:25px;gap:8px}.brand>svg{width:18px;height:18px}.nav-links,.language-link{display:none}.nav-right{gap:14px}.nav-cta{font-size:10px;padding:9px 13px;gap:13px}.menu-toggle{display:block}.hero-scroll{--duration:calc(310 * var(--scene-vh, 1svh))}.hero-stage{min-height:620px}.hero-intro{top:calc(18 * var(--scene-vh, 1vh));padding-inline:20px}.hero-intro h1{font-size:clamp(58px,10vw,78px);line-height:.95}.hero-intro .eyebrow{font-size:8px;margin-bottom:23px}.core-frame{height:calc(60 * var(--scene-vh, 1vh));width:110vw;top:62%}.hero-aside{bottom:130px;font-size:10px;left:var(--pad)}.hero-chapter{top:22%;max-width:95%;right:var(--pad);left:var(--pad)}.hero-chapter h2{font-size:clamp(42px,7vw,58px);margin:16px 0}.hero-chapter p{font-size:14px;max-width:300px;line-height:1.6}.chapter-kicker{font-size:8px}.chapter-three{top:32%;text-align:center;left:var(--pad);right:var(--pad)}.chapter-three h2{font-size:clamp(54px,10vw,80px)}.chapter-three p{font-size:15px;max-width:none}.core-callout{display:none}.hero-bottom{bottom:23px;flex-wrap:wrap;gap:14px}.hero-timeline{order:-1;flex-basis:100%;justify-content:center;font-size:8px;margin-bottom:7px}.hero-timeline>i{width:60px}.motion-toggle{font-size:8px}.motion-icon{width:24px;height:24px}.scroll-hint{font-size:8px;gap:10px}.manifesto{padding-block:110px}.manifesto .eyebrow{font-size:8px;margin-bottom:32px}.word-reveal{font-size:clamp(39px,7.5vw,58px);line-height:1.04;max-width:620px}.manifesto-description{font-size:17px;max-width:480px;margin-top:30px}.inline-link{font-size:13px}.identity-section{--duration:calc(235 * var(--scene-vh, 1svh))}.pin-stage{min-height:630px}.scene-heading{top:calc(6 * var(--scene-vh, 1vh));left:0;right:0;pointer-events:none}.scene-heading .eyebrow{font-size:8px;margin-bottom:19px}.scene-heading h2{font-size:clamp(44px,8vw,62px)}.scene-heading>p:last-child{font-size:14px;line-height:1.55;margin-top:18px}.identity-image{width:115%;right:-28%;height:64%;top:34%;transform-origin:60% 60%}.identity-image img{object-position:45% 50%}.note-one{left:8%;bottom:14%;padding:10px 14px}.note-two{right:5%;top:38%;padding:10px 14px}.identity-note{font-size:8px;gap:10px}.identity-note i{width:6px;height:6px;border-width:1px}.identity-outro{top:13%;right:var(--pad)}.identity-outro>p{font-size:clamp(39px,7vw,55px);line-height:1.06;max-width:450px}.identity-outro .light-link{font-size:11px;margin-top:22px}.concept-label{font-size:7px;bottom:20px;max-width:85%;line-height:1.4}.digital-section{--duration:calc(270 * var(--scene-vh, 1svh))}.digital-heading{top:calc(7 * var(--scene-vh, 1vh))}.digital-heading .eyebrow{font-size:8px;margin-bottom:19px}.digital-heading h2{font-size:clamp(47px,8.5vw,65px)}.device-scene{width:125vw;height:calc(49 * var(--scene-vh, 1vh));top:57%;max-height:490px}.laptop-screen{border-width:7px;border-bottom-width:12px;border-radius:15px 15px 3px 3px}.camera-dot{top:-5px;height:2px;width:2px}.device-ui-nav{padding:17px 20px;font-size:6px}.device-ui-nav>b{font-size:11px}.screen-title{font-size:clamp(36px,7vw,56px)}.screen-bottom{font-size:6px}.screen-bottom>i{font-size:5px;padding:7px 10px}.laptop-base{height:12px}.device-tablet{height:77%;border-width:6px;border-radius:19px;top:10%}.tablet-ui{padding:15px 10px;border-radius:9px}.tablet-ui>div>b{font-size:8px}.tablet-ui>div>span{font-size:4px}.tablet-ui>img{margin:20px -10px 0;width:calc(100% + 20px)}.tablet-ui>h3{font-size:28px;margin-top:9px}.tablet-ui>span{font-size:5px;bottom:12px;left:10px}.device-phone{height:72%;border-width:5px;border-radius:25px;right:13%;top:19%;padding:3px}.dynamic-island{height:8px;top:6px}.phone-ui{border-radius:17px;padding:24px 7px 10px}.phone-ui>b{font-size:8px}.phone-ui>h3{font-size:clamp(26px,5.5vw,37px);margin-top:19px}.phone-ui>span{font-size:5px;left:8px;bottom:12px}.phone-art{bottom:21%}.digital-details{bottom:9%;align-items:start;gap:25px;flex-direction:column}.digital-details>div{max-width:350px}.digital-details h3{font-size:30px}.digital-details p{font-size:13px;line-height:1.6;margin-top:14px;max-width:335px}.digital-details>a{font-size:12px}.digital-section .concept-label{font-size:6px;bottom:18px}.campaign-section{--duration:calc(200 * var(--scene-vh, 1svh))}.campaign-copy{top:18%}.campaign-copy .eyebrow{font-size:8px;margin-bottom:26px}.campaign-copy h2{font-size:clamp(45px,8vw,67px);line-height:.99;max-width:650px}.campaign-copy>p:not(.eyebrow){font-size:15px;line-height:1.7;margin-top:25px}.campaign-copy>a{font-size:11px;margin-top:24px}.campaign-frame>img{object-position:58% 50%}.campaign-frame:after{background:linear-gradient(90deg,#030405bb,transparent),linear-gradient(0deg,#0304058f,transparent 70%)}.campaign-bottom{font-size:7px;bottom:24px}.services-section{grid-template-columns:1fr;gap:45px}.services-intro{position:relative;top:auto}.services-intro .eyebrow{font-size:8px;margin-bottom:25px}.services-intro h2{font-size:55px}.services-intro>p:last-child{font-size:16px;max-width:440px;margin-top:25px}.service-item summary{padding-block:27px;gap:15px}.service-title{font-size:26px}.service-no{font-size:9px}.service-body{padding-left:37px;padding-bottom:30px}.service-body>p{font-size:15px}.service-body>span{font-size:9px}.approach-section{padding-block:80px}.approach-header{display:block;margin-bottom:45px}.approach-header>.eyebrow{max-width:none;font-size:8px}.approach-header h2{font-size:44px;margin-top:25px}.approach-steps{grid-template-columns:1fr 1fr;gap:40px 30px}.approach-steps:before,.approach-steps:after{display:none}.approach-step>span{height:48px;width:48px;font-size:10px}.approach-step h3{font-size:27px;margin-top:25px}.approach-step>p{font-size:13px;line-height:1.7;margin-top:15px}.studio-section>.eyebrow{font-size:8px;margin-bottom:30px}.studio-content{grid-template-columns:1fr;gap:35px}.studio-content h2{font-size:clamp(43px,8vw,61px)}.studio-description>p{font-size:16px;max-width:500px}.studio-coordinate{margin-top:50px;align-items:start;flex-direction:column;gap:15px}.studio-coordinate>span:first-child{font-size:10px}.studio-coordinate>span:last-child{font-size:29px;gap:22px}.studio-coordinate i{font-size:33px}.contact-section .eyebrow{font-size:8px;max-width:260px}.contact-heading-row{margin-top:35px;gap:15px}.contact-heading-row h2{font-size:clamp(60px,10vw,88px)}.contact-button{font-size:12px;padding:18px 23px;gap:35px}.contact-links{flex-direction:column;gap:15px;font-size:16px;margin-top:40px;padding-top:25px}.footer-details{display:grid;grid-template-columns:1fr 1fr;gap:25px;font-size:10px}.footer-details>a{font-size:10px}.footer-wordmark{font-size:18.2vw;margin-top:60px;margin-bottom:45px}.footer-bottom{flex-direction:column;align-items:start;gap:17px;font-size:8px}.site-footer{padding-top:45px}} @media(max-width:390px){:root{--pad:22px}.brand{font-size:24px}.brand>svg{width:17px;height:17px}.nav-right{gap:9px}.nav-cta{font-size:9px;padding:8px 11px;gap:9px}.nav-cta span{font-size:15px}.menu-toggle{width:34px;padding:7px}.hero-intro{top:calc(19 * var(--scene-vh, 1vh))}.hero-intro h1{font-size:56px}.hero-intro .eyebrow{font-size:7px}.core-frame{width:125vw;height:calc(53 * var(--scene-vh, 1vh));top:61%}.hero-chapter h2{font-size:41px}.hero-chapter p{font-size:13px;max-width:270px}.chapter-three h2{font-size:53px}.hero-aside{font-size:9px;bottom:125px}.hero-timeline>i{width:42px}.word-reveal{font-size:38px}.manifesto-description{font-size:16px}.scene-heading h2{font-size:45px}.scene-heading>p:last-child{font-size:13px}.identity-outro>p{font-size:38px}.note-two{top:43%}.device-scene{width:140vw;height:calc(43 * var(--scene-vh, 1vh));top:55%}.device-ui-nav{padding:13px 15px;font-size:5px}.screen-title{font-size:36px}.tablet-ui>h3{font-size:22px}.device-tablet{border-radius:16px;border-width:5px}.device-phone{height:74%;border-radius:23px}.phone-ui>h3{font-size:29px}.phone-ui>b{font-size:7px}.phone-ui{padding-top:20px}.digital-heading h2{font-size:49px}.digital-details{bottom:10%;gap:20px}.digital-details h3{font-size:27px}.digital-details p{font-size:12px;line-height:1.6}.digital-details>a{font-size:11px}.campaign-copy h2{font-size:44px}.campaign-copy>p:not(.eyebrow){font-size:14px}.services-intro h2{font-size:48px}.service-title{font-size:22px}.service-item summary{gap:12px}.service-body{padding-left:34px}.service-body>p{font-size:14px}.approach-header h2{font-size:38px}.approach-steps{gap:35px 25px}.approach-step h3{font-size:25px}.approach-step>p{font-size:12px}.studio-content h2{font-size:39px}.studio-coordinate>span:last-child{font-size:25px;gap:16px}.contact-heading-row h2{font-size:58px}.contact-button{font-size:11px;gap:25px}.contact-links{font-size:15px}} /* A complete, readable alternative when motion is off or scripting is absent. */ body.reduced-motion .pin-section,body:not(.experience-ready) .pin-section{height:auto!important}body.reduced-motion .pin-stage,body:not(.experience-ready) .pin-stage{position:relative!important;height:auto;min-height:0}body.reduced-motion .hero-stage,body:not(.experience-ready) .hero-stage{padding-top:130px;padding-bottom:30px}body.reduced-motion .hero-intro,body:not(.experience-ready) .hero-intro{position:relative;top:auto;opacity:1!important;transform:none!important;animation:none!important}body.reduced-motion .core-rig,body:not(.experience-ready) .core-rig{position:relative;height:470px;transform:none!important;opacity:1!important}body.reduced-motion .core-frame,body:not(.experience-ready) .core-frame{width:100%;height:100%;top:50%}body.reduced-motion .hero-aside,body:not(.experience-ready) .hero-aside{position:relative;left:auto;bottom:auto;padding-inline:var(--pad);margin:0 0 45px;opacity:1!important}body.reduced-motion .hero-chapter,body:not(.experience-ready) .hero-chapter{position:relative;top:auto;left:auto;right:auto;padding:35px var(--pad);max-width:750px;margin-inline:auto;text-align:left;opacity:1!important;transform:none!important}body.reduced-motion .hero-chapter h2,body:not(.experience-ready) .hero-chapter h2{font-size:44px}body.reduced-motion .hero-chapter p,body:not(.experience-ready) .hero-chapter p{max-width:600px;margin-inline:0;font-size:16px}body.reduced-motion .core-callout,body:not(.experience-ready) .core-callout{display:none}body.reduced-motion .hero-bottom,body:not(.experience-ready) .hero-bottom{position:relative;bottom:auto;margin-top:45px}body.reduced-motion .hero-timeline,body:not(.experience-ready) .hero-timeline{display:none}body.reduced-motion .identity-stage,body:not(.experience-ready) .identity-stage{padding-top:75px;padding-bottom:70px}body.reduced-motion .scene-heading,body:not(.experience-ready) .scene-heading{position:relative;top:auto;opacity:1!important;transform:none!important}body.reduced-motion .identity-image,body:not(.experience-ready) .identity-image{position:relative;width:100%;height:calc(60 * var(--scene-vh, 1vh));top:auto;right:auto;margin-top:35px;transform:none!important}body.reduced-motion .identity-note,body:not(.experience-ready) .identity-note{display:none}body.reduced-motion .identity-outro,body:not(.experience-ready) .identity-outro{position:relative;top:auto;left:auto;padding:35px var(--pad) 0;opacity:1!important;transform:none!important}body.reduced-motion .identity-outro>p,body:not(.experience-ready) .identity-outro>p{font-size:40px}body.reduced-motion .digital-stage,body:not(.experience-ready) .digital-stage{padding-top:75px;padding-bottom:70px}body.reduced-motion .digital-heading,body:not(.experience-ready) .digital-heading{position:relative;top:auto;opacity:1!important;transform:none!important}body.reduced-motion .device-scene,body:not(.experience-ready) .device-scene{position:relative;top:auto;left:auto;transform:none;width:90%;height:550px;margin:60px auto 20px}body.reduced-motion .device-laptop,body.reduced-motion .device-phone,body.reduced-motion .device-tablet,body:not(.experience-ready) .device-laptop,body:not(.experience-ready) .device-phone,body:not(.experience-ready) .device-tablet{transform:none!important;opacity:1!important}body.reduced-motion .digital-details,body:not(.experience-ready) .digital-details{position:relative;bottom:auto;opacity:1!important;transform:none!important}body.reduced-motion .campaign-stage,body:not(.experience-ready) .campaign-stage{height:850px;min-height:calc(80 * var(--scene-vh, 1vh))}body.reduced-motion .campaign-frame,body:not(.experience-ready) .campaign-frame{clip-path:none!important}body.reduced-motion .campaign-frame>img,body:not(.experience-ready) .campaign-frame>img{transform:none!important}body.reduced-motion .campaign-copy,body:not(.experience-ready) .campaign-copy{opacity:1!important;transform:none!important}body.reduced-motion .reveal{opacity:1!important;transform:none!important;transition:none!important}body.reduced-motion .word{--word-opacity:1!important}body.reduced-motion .service-body{animation:none!important}html.static-motion{scroll-behavior:auto} @media(max-width:760px){body.reduced-motion .core-rig,body:not(.experience-ready) .core-rig{height:390px}body.reduced-motion .device-scene,body:not(.experience-ready) .device-scene{width:120%;height:370px;margin-left:-10%;margin-top:45px;margin-bottom:20px}body.reduced-motion .campaign-stage,body:not(.experience-ready) .campaign-stage{height:750px}body.reduced-motion .hero-stage,body:not(.experience-ready) .hero-stage{padding-top:130px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}} .core-frame{height:min(640px,calc(64 * var(--scene-vh, 1vh)))} body.reduced-motion .device-scene,body:not(.experience-ready) .device-scene{transform:none!important} @media(max-height:850px) and (min-width:761px){.hero-intro{top:110px}.hero-intro h1{font-size:clamp(65px,7.2vw,108px)}.core-frame{height:calc(60 * var(--scene-vh, 1vh))}.experience-ready:not(.reduced-motion) .pin-stage{min-height:0}.hero-aside{bottom:110px}.hero-bottom{bottom:21px}} @media(max-width:760px){.core-frame{height:calc(57 * var(--scene-vh, 1vh))}} @media(max-width:390px){.core-frame{height:calc(53 * var(--scene-vh, 1vh))}} .identity-stage:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,#e2e4e6 0%,#e2e4e6f5 20%,#e2e4e699 37%,#e2e4e600 66%)}.identity-outro{max-width:530px}.identity-outro strong{display:block;max-width:500px} @media(max-width:760px){.identity-stage:after{background:linear-gradient(180deg,#e2e4e6 0%,#e2e4e6eb 24%,#e2e4e600 55%)}.identity-outro{max-width:450px}.identity-outro strong{max-width:360px}} @media(max-width:760px){body:not(.reduced-motion).experience-ready .hero-aside{display:none}} .tablet-ui>img{height:48%;aspect-ratio:auto} @media(max-width:390px){.hero-intro h1{font-size:clamp(43px,14.2vw,56px)}.contact-heading-row h2{font-size:clamp(44px,15vw,58px)}} @media(max-width:390px){.core-frame{height:calc(50 * var(--scene-vh, 1vh))}} @media(max-width:760px){.device-scene{width:115vw}} @media(max-width:760px){.digital-details p{font-size:14px;line-height:1.6}} /* A geometric SVG keeps the plus/cross exactly at the centre of its control. */ .service-toggle{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:#e5e6e9;color:#353a43;transition:background .25s,color .25s,box-shadow .25s} .service-toggle>svg{display:block;width:18px;height:18px;transform-origin:50% 50%;transition:transform .25s} .service-item summary:hover .service-toggle{background:#d8dbe0} .service-item[open] .service-toggle{background:var(--red);color:#fff;box-shadow:0 0 20px #ff4d3640} .service-item[open] .service-toggle>svg{transform:rotate(45deg)} .service-body{padding-top:10px} body.reduced-motion .service-toggle,body.reduced-motion .service-toggle>svg{transition:none} /* Contact stays one tap away; mobile navigation has its own quiet footer. */ .nav-phone{display:none;align-items:center;gap:8px;min-height:44px;white-space:nowrap;font-size:12px;line-height:1.3;letter-spacing:.005em;font-variant-numeric:tabular-nums;color:inherit;opacity:.88;transition:opacity .2s} .nav-phone>svg{width:15px;height:15px;flex:none} .nav-phone:hover{opacity:1} .mobile-nav{--menu-ink:#f5f5f7;--menu-muted:#b5b8c1;--menu-line:#ffffff24;gap:0;padding:clamp(24px,calc(4 * var(--scene-vh, 1vh)),42px) var(--pad) max(24px,env(safe-area-inset-bottom));overscroll-behavior:contain;scrollbar-gutter:stable} .mobile-nav-links{display:flex;flex:0 0 auto;flex-direction:column;gap:clamp(6px,calc(1.6 * var(--scene-vh, 1vh)),18px)} .mobile-nav .mobile-nav-links>a{display:flex;align-items:center;min-height:44px;font-size:clamp(27px,5.5vw,38px);letter-spacing:-.035em;line-height:1.15;padding-block:4px} .mobile-nav .mobile-nav-links>a.mobile-nav-language{font-size:14px;letter-spacing:.015em;color:var(--menu-muted);margin-top:5px} .mobile-nav-contact{flex:0 0 auto;margin-top:auto;border-top:1px solid var(--menu-line);padding-top:20px} .mobile-nav .mobile-nav-contact>a.mobile-contact-phone{display:inline-flex;align-items:center;gap:13px;min-height:44px;font-size:clamp(23px,5.8vw,29px);font-weight:500;letter-spacing:-.025em;line-height:1.25;margin:0;padding:4px 0;color:var(--menu-ink);white-space:nowrap;font-variant-numeric:tabular-nums} .mobile-contact-phone>svg{width:20px;height:20px;flex:none;opacity:.75} .mobile-nav-socials{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding-top:12px} .mobile-social-label{font-size:12px;letter-spacing:.015em;line-height:1.5;color:var(--menu-muted)} .mobile-social-icons{display:flex;align-items:center;gap:4px;flex:none} .mobile-nav .mobile-nav-socials a.mobile-social-link{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border-radius:50%;font-size:inherit;line-height:1;color:var(--menu-ink);transition:background .2s,color .2s} .mobile-social-link>svg{width:20px;height:20px} .mobile-nav .mobile-nav-socials a.mobile-social-link:hover{background:var(--menu-line)} .mobile-nav :focus-visible{outline:2px solid #ffad9d;outline-offset:4px} .contact-page .mobile-nav,.legal-page .mobile-nav{--menu-ink:#101114;--menu-muted:#60636b;--menu-line:#10111424;background:#f5f5f7;color:#101114} .contact-page .mobile-nav :focus-visible,.legal-page .mobile-nav :focus-visible{outline-color:#0670d8} @media(min-width:600px){.nav-phone{display:inline-flex}} @media(min-width:1100px){.nav-links{margin-left:0;gap:clamp(20px,2vw,34px)}.nav-right{gap:clamp(14px,1.4vw,25px)}.header-inner{gap:clamp(20px,2vw,28px)}} @media(max-height:600px){.mobile-nav{padding-top:18px;padding-bottom:max(18px,env(safe-area-inset-bottom))}.mobile-nav-links{gap:2px}.mobile-nav .mobile-nav-links>a{font-size:27px}.mobile-nav .mobile-nav-links>a.mobile-nav-language{font-size:14px;margin-top:0}.mobile-nav-contact{padding-top:18px}} /* Interface icons are vectors, independent of font glyph coverage and platform fallback. */ .ui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;flex:none;overflow:visible} a>.ui-icon{margin-inline-start:.3em} .nav-cta>span,.submit-arrow{display:inline-flex;align-items:center;justify-content:center;flex:none} .motion-icon>.ui-icon{grid-area:1/1;width:16px;height:16px} .motion-icon>.motion-play{display:none} .motion-toggle:not([data-motion-state]){display:none} /* Reserve the hero control before enhancement so its arrival cannot move the timeline. */ .experience-ready .hero-bottom .motion-toggle:not([data-motion-state]){display:flex;visibility:hidden} [data-motion-state="paused"] .motion-icon>.motion-pause{display:none} [data-motion-state="paused"] .motion-icon>.motion-play{display:inline-block} .contact-social{align-items:center} @media(max-width:1000px){.mobile-nav-links>a>.ui-icon{width:.7em;height:.7em}} /* Stable cold-start layering; the title enters once its actual metrics settle. */ .hero-stage{isolation:isolate}.core-rig{z-index:1;transform:translate3d(0,0,0) scale(1)} html.hero-entry-managed .experience-ready:not(.hero-entry-ready):not(.reduced-motion) .hero-intro{visibility:hidden;animation:none} .hero-font-fallback .hero-intro{font-family:Helvetica,Arial,sans-serif} .hero-font-ready .hero-intro{font-family:acumin-pro,Helvetica,Arial,sans-serif} .hero-intro .eyebrow{font-weight:600} html.hero-entry-managed .experience-ready:not(.hero-layout-ready):not(.reduced-motion) .core-rig{visibility:hidden} /* A 375px phone keeps the full sequence even with expanded browser toolbars. Scene units are frozen on touch devices, so toolbar motion cannot resize pins. */ @media(max-width:760px){.experience-ready:not(.reduced-motion) .pin-stage{min-height:0}} @media(min-width:371px) and (max-width:390px){ .experience-ready:not(.reduced-motion) .hero-intro{top:clamp(90px,calc(16 * var(--scene-vh,1svh)),120px)} .hero-intro h1{font-size:clamp(46px,13.5vw,54px)} .core-frame{height:clamp(180px,calc(100 * var(--scene-vh,1svh) - 320px),calc(50 * var(--scene-vh,1svh)))} .experience-ready:not(.reduced-motion) .hero-chapter{top:clamp(100px,calc(20 * var(--scene-vh,1svh)),145px)} .experience-ready:not(.reduced-motion) .chapter-three{top:30%} } /* Keep the cube annotation above the render layer and out of the tablet's expanded cube cluster. Text sits on its own quiet, legible surface. */ .core-callout{z-index:4;pointer-events:none} .core-callout span{padding:8px 10px;border-radius:8px;background:rgba(8,10,14,.86)} /* The marker ring ends where its connector begins; both share one centre. */ .core-callout i{height:8px;flex:none;background:none} .core-callout i:before{left:0;top:50%;width:8px;height:8px;transform:translateY(-50%);box-sizing:border-box} .core-callout i:after{content:'';position:absolute;left:8px;right:0;top:50%;height:1px;background:#727782;transform:translateY(-50%)} /* Tablet hero chapters reserve separate space for reading and the 3D product. */ @media(min-width:761px) and (max-width:1100px){ .core-frame{left:54%;top:70%;height:calc(50 * var(--scene-vh,1svh))} .hero-chapter:not(.chapter-three){top:37%;max-width:355px;right:var(--pad)} .hero-chapter:not(.chapter-three) h2{font-size:clamp(44px,5.5vw,56px);margin:16px 0} .hero-chapter:not(.chapter-three) p{font-size:14px;line-height:1.6;max-width:280px} } /* Tablet annotation: label first, connector and endpoint facing the cube. Use the same stable viewport units as the scene; no per-frame layout reads. */ @media(min-width:761px) and (max-width:1100px){ .core-callout{left:max(var(--pad),calc(68vw - 19.6 * var(--scene-vh,1svh) - 172px));right:auto;top:75%;bottom:auto;transform:translateY(-50%);flex-direction:row-reverse;gap:10px} .core-callout span{text-align:right;white-space:nowrap} .core-callout i{width:64px} .core-callout i:before{left:auto;right:0} .core-callout i:after{left:0;right:8px} } /* Lift the compact hero as one composition. Small phones cap the lift at the clear space below the header so text remains accessible and readable. */ @media(min-width:761px) and (max-width:1100px){ .experience-ready:not(.reduced-motion) .hero-stage{--hero-composition-lift:calc(10 * var(--scene-vh,1svh))} .experience-ready:not(.reduced-motion) .core-frame{translate:0 calc(-1 * var(--hero-composition-lift) * (1 - var(--hero-final,0)))} .experience-ready:not(.reduced-motion) .hero-chapter:not(.chapter-three){top:max(calc(var(--header) + 24px),calc(37% - var(--hero-composition-lift)))} .experience-ready:not(.reduced-motion) .chapter-three{top:34%} .experience-ready:not(.reduced-motion) .core-callout{top:calc(75% - var(--hero-composition-lift))} } @media(max-width:760px){ .experience-ready:not(.reduced-motion) .hero-stage{--hero-composition-lift:min(16px,calc(2.5 * var(--scene-vh,1svh)))} .experience-ready:not(.reduced-motion) .core-frame{translate:0 calc(-1 * var(--hero-composition-lift) * (1 - var(--hero-final,0)))} .experience-ready:not(.reduced-motion) .hero-chapter{top:max(calc(var(--header) + 24px),calc(22% - var(--hero-composition-lift)))} .experience-ready:not(.reduced-motion) .chapter-three{top:32%} .experience-ready:not(.reduced-motion) .hero-intro{top:max(calc(var(--header) + 16px),calc(18% - var(--hero-composition-lift)))} } @media(min-width:371px) and (max-width:390px){ .experience-ready:not(.reduced-motion) .hero-stage{--hero-composition-lift:min(16px,calc(2.5 * var(--scene-vh,1svh)))} .experience-ready:not(.reduced-motion) .hero-chapter{top:max(calc(var(--header) + 24px),calc(clamp(100px,calc(20 * var(--scene-vh,1svh)),145px) - var(--hero-composition-lift)))} .experience-ready:not(.reduced-motion) .chapter-three{top:30%} } /* Reassemble on the original centre line in the final tablet chapter. */ @media(min-width:761px) and (max-width:1100px){.experience-ready:not(.reduced-motion) .core-frame{translate:calc(-4vw * var(--hero-final,0)) calc(-1 * var(--hero-composition-lift) * (1 - var(--hero-final,0)) - 8 * var(--scene-vh,1svh) * var(--hero-final,0))}} /* Keep the phone's rotating cubes clear of the chapter labels. The extra clearance disappears with the final pose, preserving its original centre. */ @media(max-width:760px){.experience-ready:not(.reduced-motion) .core-frame{translate:0 calc(-1 * (var(--hero-composition-lift) + 40px * var(--hero-open,0)) * (1 - var(--hero-final,0)))}} /* Short SE viewports use the same frozen scene unit, so expanding browser bars cannot switch layouts. Keep the copy above the rotating geometry. */ @media(max-width:390px){ .experience-ready:not(.reduced-motion) .hero-chapter:not(.chapter-three){top:max(calc(var(--header) + 16px),calc(clamp(100px,calc(20 * var(--scene-vh,1svh)),145px) - var(--hero-composition-lift) - max(0px,calc(150px - 25 * var(--scene-vh,1svh)))))} .experience-ready:not(.reduced-motion) .hero-chapter:not(.chapter-three) h2{font-size:clamp(36px,calc(10 * var(--scene-vh,1svh) - 18px),41px);margin-block:clamp(12px,calc(4 * var(--scene-vh,1svh) - 10px),16px)} .experience-ready:not(.reduced-motion) .hero-chapter:not(.chapter-three) p{font-size:clamp(12px,calc(2 * var(--scene-vh,1svh) + 1px),13px)} } @media(max-width:760px){.experience-ready:not(.reduced-motion) .hero-chapter:not(.chapter-three){translate:0 -4px}} /* Source: font-loading.css */ /* Stable families during the shared font decision and its fallback. */ :root.fonts-pending,:root.fonts-fallback{ --font-ui:Helvetica,Arial,sans-serif; --font-brand:Helvetica,Arial,sans-serif; } /* Shared header state, with CSS-only recovery when its script cannot run. */ .site-header,.mobile-nav{font-family:Helvetica,Arial,sans-serif} html.header-type-ready .site-header,html.header-type-ready .mobile-nav{font-family:acumin-pro,Helvetica,Arial,sans-serif} html.header-type-pending .header-inner{visibility:hidden;animation:header-type-release 0s 1.2s forwards} @keyframes header-type-release{to{visibility:visible}} @media(scripting:none){html.header-type-pending .header-inner{visibility:visible;animation:none}} /* Text is revealed once, with all required weights ready. Artwork can paint immediately; a dead script still restores readable fallback text in1.2s. */ :root.page-type-pending,:root.page-type-fallback{--font-ui:Helvetica,Arial,sans-serif;--font-brand:Helvetica,Arial,sans-serif} html.page-type-pending body{visibility:hidden;animation:page-type-release 0s 1.2s forwards} html[data-page-theme=dark].page-type-pending body{background:#080a0e} html.page-type-pending:not(.home-styles-hold) .experience-ready.hero-layout-ready:not(.reduced-motion) .core-rig,html.page-type-pending:not(.home-styles-hold) .hero-glow,html.page-type-pending:not(.home-styles-hold) .site-header{visibility:visible} @keyframes page-type-release{to{visibility:visible}} /* Different animation names restart the original entrance after the font decision. */ html.page-type-pending .experience-ready:not(.hero-entered):not(.reduced-motion) .hero-intro{animation:pending-type-intro 1.25s cubic-bezier(.2,.7,.2,1) 1.2s both} @keyframes pending-type-intro{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}} html.page-type-ready .hero-intro,html.page-type-fallback .hero-intro{font-family:var(--font-ui)} @media(scripting:none){html.page-type-pending body{visibility:visible;animation:none}html.page-type-pending .hero-intro{animation:none}} /* A direct section link keeps the existing geometry hold until its CSS is ready. */ html.home-styles-hold body{visibility:hidden!important} /* Source: contact.css */ /* Contact shares the V2 typography and navigation, with a light surface. */ .contact-page { --header: 70px; background: #f5f5f7; color: #101114; font-family: var(--font-ui); font-weight: 400; } .contact-page .site-header { background: rgba(245,245,247,.9); color: #101114; border-bottom-color: #d9dadd; } .contact-page .nav-links a { color: #717279; } .contact-page .nav-links a:hover { color: #101114; } .contact-page .language-link { color: #717279; } .contact-page .nav-cta { background: #101114; color: #f5f5f7; } .contact-page .nav-cta:hover { background: #ff4d36; color: #101114; } .contact-page .mobile-nav { background: #f5f5f7; color: #101114; } .contact-main { padding-top: clamp(72px,9vw,145px); padding-bottom: clamp(90px,11vw,170px); } .contact-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; font-size: 11px; font-weight: 500; letter-spacing: .09em; line-height: 1.5; text-transform: uppercase; color: #717279; } .contact-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff4d36; flex: none; } .contact-heading { max-width: 1120px; font-size: clamp(58px,8.7vw,132px); font-weight: 600; line-height: .96; letter-spacing: -.052em; } .contact-heading em { font-family: inherit; font-style: normal; font-weight: inherit; letter-spacing: inherit; color: #ff4d36; } .contact-intro { max-width: 520px; margin-top: 34px; font-size: clamp(18px,1.7vw,22px); line-height: 1.55; color: #717279; letter-spacing: -.015em; } .contact-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(50px,8.4vw,132px); margin-top: clamp(70px,8.5vw,125px); padding-top: 42px; border-top: 1px solid #d9dadd; } .contact-detail-title,.contact-form-title { font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .085em; text-transform: uppercase; margin-bottom: 27px; color: #717279; } .contact-direct { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .contact-direct a { font-size: clamp(23px,2.25vw,35px); font-weight: 500; line-height: 1.2; letter-spacing: -.035em; overflow-wrap: anywhere; transition: color .2s; } .contact-direct a:hover { color: #ff4d36; } .contact-address { margin-top: 36px; font-size: 15px; line-height: 1.75; font-style: normal; color: #717279; } .contact-address strong { font-weight: 500; color: #101114; } .contact-social { display: inline-flex; margin-top: 24px; font-size: 13px; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid #c2c5ca; } .contact-social:hover { color: #ff4d36; } .contact-point { margin-top: 42px; padding: 28px; max-width: 360px; min-height: 210px; border-radius: 20px; background: #e9eaed; overflow: hidden; } .contact-point-label { display: block; font-size: 9px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: #717279; } .contact-point-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 25px; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.045em; } .contact-point-title>span { color: #ff4d36; font-size: 40px; line-height: 1; font-weight: 400; } .contact-point>p { margin-top: 7px; font-size: 18px; font-weight: 500; letter-spacing: -.015em; } .contact-point-detail { display: block; max-width: 240px; margin-top: 24px; font-size: 12px; line-height: 1.55; color: #717279; } .project-form { min-width: 0; } .form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 29px; } .field { display: block; min-width: 0; } .field-wide { grid-column: 1 / -1; } .field label { display: block; margin-bottom: 8px; font-size: 13px; line-height: 1.5; font-weight: 500; color: #4e525a; } .field input,.field textarea { display: block; width: 100%; min-width: 0; border: 0; border-bottom: 1px solid #bfc3c9; border-radius: 0; padding: 12px 0 16px; background: transparent; color: #101114; font-family: inherit; font-weight: 400; font-size: 17px; line-height: 1.5; transition: border-color .2s; outline: none; box-sizing: border-box; } .field input::placeholder,.field textarea::placeholder { color: #9499a2; opacity: 1; } .field textarea { resize: vertical; min-height: 150px; } .field input:focus,.field textarea:focus { border-bottom-color: #ff4d36; box-shadow: 0 1px 0 #ff4d36; } .field input[aria-invalid=true],.field textarea[aria-invalid=true] { border-color: #b83222; } .form-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; } .form-submit { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-width: 205px; padding: 17px 25px; border: 0; border-radius: 50px; background: #101114; color: #f5f5f7; font-family: inherit; font-weight: 500; font-size: 14px; line-height: 1.4; cursor: pointer; transition: background .2s,transform .2s; white-space: nowrap; } .form-submit:hover { background: #ff4d36; color: #101114; transform: translateY(-2px); } .form-submit:disabled { opacity: .6; cursor: wait; transform: none; } .form-submit .submit-arrow { font-size: 23px; line-height: 1; } .form-required { max-width: 130px; font-size: 11px; line-height: 1.5; color: #717279; } .form-privacy { max-width: 570px; margin-top: 25px; font-size: 11px; line-height: 1.65; color: #717279; } .form-privacy a { text-decoration: underline; text-underline-offset: 3px; } .form-status { margin-top: 22px; padding: 16px 18px; border: 1px solid #bfc3c9; border-radius: 12px; font-size: 14px; line-height: 1.6; } .form-status[hidden],.form-fallback[hidden] { display: none; } .form-status[data-state=success] { border-color: #3b6a4a; color: #244e31; } .form-status[data-state=error] { border-color: #b83222; color: #a22c20; } .form-fallback { margin-top: 13px; font-size: 14px; line-height: 1.7; } .form-fallback a { text-decoration: underline; text-underline-offset: 4px; } .contact-footer { padding-top: 27px; padding-bottom: 27px; border-top: 1px solid #d9dadd; } .contact-footer-main { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 11px; line-height: 1.6; color: #717279; } .contact-footer-main a { color: #101114; } .contact-noscript { padding: 15px; font-size: 14px; line-height: 1.6; border: 1px solid #d9dadd; border-radius: 12px; } .contact-noscript a { text-decoration: underline; } .contact-page a:focus-visible,.contact-page button:focus-visible { outline: 2px solid #ff4d36; outline-offset: 5px; } @media (max-width: 1000px) { .contact-grid { grid-template-columns: .8fr 1.2fr; gap: 45px; } .form-fields { grid-template-columns: 1fr; gap: 25px; } .field-wide { grid-column: auto; } .contact-direct a { font-size: 24px; } .contact-point { padding: 24px; } .contact-heading { font-size: clamp(58px,10vw,100px); } .form-bottom { align-items: flex-start; flex-direction: column; gap: 17px; } .form-required { max-width: none; } } /* Match studio.js's menu breakpoint while sharing cinema.css navigation. */ @media (max-width: 780px) { .contact-page { --header: 64px; } .contact-page .header-inner { gap: 15px; } .contact-page .brand { font-size: 25px; gap: 8px; } .contact-page .brand>svg { width: 18px; height: 18px; } .contact-page .nav-links,.contact-page .language-link { display: none; } .contact-page .nav-right { gap: 14px; } .contact-page .menu-toggle { display: block; } } @media (max-width: 640px) { .contact-main { padding-top: 65px; } .contact-heading { font-size: clamp(42px,10.7vw,69px); line-height: 1; letter-spacing: -.045em; } .contact-kicker { margin-bottom: 25px; font-size: 9px; } .contact-intro { margin-top: 27px; font-size: 18px; } .contact-grid { grid-template-columns: 1fr; gap: 50px; margin-top: 57px; padding-top: 30px; } .contact-direct a { font-size: clamp(25px,7vw,31px); } .contact-address { margin-top: 27px; } .contact-point { max-width: none; min-height: 0; margin-top: 30px; padding: 24px; } .contact-point-title { margin-top: 17px; font-size: 39px; } .contact-point-detail { margin-top: 17px; max-width: 270px; } .project-form { padding-top: 33px; border-top: 1px solid #d9dadd; } .field input,.field textarea { font-size: 16px; } .form-bottom { flex-direction: row; align-items: center; gap: 17px; } .form-submit { min-width: 195px; padding: 17px 22px; gap: 20px; } .form-required { max-width: 100px; } .contact-footer-main { flex-direction: column; align-items: flex-start; gap: 15px; } } @media (max-width: 390px) { .contact-page .header-inner { gap: 10px; } .contact-page .brand { font-size: 24px; } .contact-page .brand>svg { width: 17px; height: 17px; } .contact-page .nav-right { gap: 9px; } .contact-page .menu-toggle { width: 34px; padding: 7px; } .contact-heading { font-size: clamp(38px,10.7vw,42px); } .form-bottom { align-items: flex-start; flex-direction: column; gap: 15px; } .form-required { max-width: none; } } @media (prefers-reduced-motion: reduce) { .form-submit,.field input,.field textarea,.contact-direct a { transition: none; } .form-submit:hover { transform: none; } } /* Readable labels, clear keyboard focus and a necessary privacy acknowledgment. */ .contact-page .nav-links a,.contact-page .language-link,.contact-kicker,.contact-intro,.contact-detail-title,.contact-form-title,.contact-address,.contact-point-label,.contact-point-detail,.form-required,.form-privacy,.contact-footer-main { color: #5c6068; } .contact-heading em { color: #c02e20; } .contact-kicker,.contact-detail-title,.contact-form-title,.contact-point-label,.form-required { font-size: 12px; } .form-privacy,.contact-footer-main { font-size: 13px; } .field input::placeholder,.field textarea::placeholder { color: #666b74; } .field input,.field textarea { border-bottom-color: #777e89; } .field input:focus-visible,.field textarea:focus-visible { outline: 2px solid #9c2d20; outline-offset: 4px; box-shadow: none; border-bottom-color: #9c2d20; } .contact-page a:focus-visible,.contact-page button:focus-visible,.privacy-ack input:focus-visible,.form-status:focus { outline: 2px solid #9c2d20; outline-offset: 4px; } .contact-social { min-height: 44px; align-items: center; margin-right: 22px; padding: 3px 0; } .contact-direct a:hover,.contact-social:hover { color: #9c2d20; } .privacy-ack { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 12px; margin-top: 28px; color: #41464e; font-size: 14px; line-height: 1.6; } .privacy-ack input { appearance: auto; accent-color: #101114; width: 22px; height: 22px; margin: 2px 0 0; cursor: pointer; } .privacy-ack label { min-height: 44px; cursor: pointer; } .privacy-ack a { text-decoration: underline; text-underline-offset: 3px; } .privacy-ack input[aria-invalid=true] { outline: 2px solid #a22c20; outline-offset: 3px; } .form-honeypot,.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .contact-page .menu-toggle { min-width: 44px; min-height: 44px; } .contact-page .nav-cta { min-height: 44px; } /* A direct map link opens only on request; no embedded map or location access. */ .contact-map-link { display: grid; place-items: center; flex: 0 0 46px; width: 46px; height: 46px; min-width: 44px; min-height: 44px; border: 1px solid #bbc0c9; border-radius: 50%; color: #9c2d20; background: transparent; transition: background .2s,border-color .2s,color .2s; } .contact-map-link svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .contact-map-link:hover { background: #9c2d20; border-color: #9c2d20; color: #fff; } /* The contact footer uses a light surface and the same B wordmark in dark ink. */ .contact-page .contact-footer { padding: 60px 0 30px; border-top: 1px solid #d2d6de; background: #e9eaed; color: #101114; } .contact-page .contact-footer .footer-company-data { color: #555b66; } .contact-page .contact-footer .footer-logo-link { color: #101114; } .contact-page .contact-footer .footer-details>a { color: #454b56; } .contact-page .contact-footer .footer-legal { color: #454b56; border-color: #c9ced7; } .contact-page .contact-footer .footer-wordmark { color: #101114; } .contact-page .contact-footer .footer-bottom { color: #555b66; border-color: #c9ced7; } .contact-page .contact-footer a:focus-visible,.contact-page .contact-footer button:focus-visible { outline: 3px solid #9c2d20; outline-offset: 5px; } @media(max-width:760px) { .contact-page .contact-footer { padding-top: 45px; } } @media(prefers-reduced-motion:reduce) { .contact-map-link { transition: none; } } /* Conversation becomes a direction: entry choreography, then a quiet living scene. */ .contact-hero { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); align-items: center; gap: clamp(25px,4vw,64px); } .contact-hero-copy { min-width: 0; } .contact-hero .contact-heading { font-size: clamp(52px,6vw,98px); line-height: 1.01; } .contact-hero .contact-intro { max-width: 490px; font-size: clamp(17px,1.5vw,21px); } .contact-scene { margin: 15px 0 0; min-width: 0; width: 100%; align-self: center; } .contact-scene-svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 50%; } .contact-scene.scene-enhanced .contact-scene-svg { transform: translate3d(0,var(--scene-shift,0px),0) rotate(var(--scene-tilt,0deg)); } .contact-scene-svg text { font-family: var(--font-ui); } .contact-scene-svg .scene-label { font-size: 11px; fill: #5d6879; letter-spacing: .08em; font-weight: 500; } .contact-scene-svg .scene-label-light { fill: #bac4d2; } .contact-scene-svg .scene-question { font-size: 30px; fill: #19202a; letter-spacing: -.03em; font-weight: 600; } .contact-scene-svg .scene-answer { font-size: 27px; fill: #f5f7fa; letter-spacing: -.025em; font-weight: 500; } .scene-message { filter: drop-shadow(0 22px 22px #17203218); transform-box: fill-box; transform-origin: center; } .scene-mark { filter: drop-shadow(0 18px 22px #17203212); transform-box: view-box; transform-origin: 391px 153px; } .scene-mark-orbit { transform-box: view-box; transform-origin: 391px 153px; } .scene-orbit { opacity: .42; transform-box: fill-box; transform-origin: center; } .scene-route { stroke-dasharray: 6 8; opacity: .75; } .scene-signal { stroke-dasharray: .01 100; stroke-dashoffset: 0; opacity: 0; pointer-events: none; } .scene-typing circle { transform-box: fill-box; transform-origin: center; } .contact-scene-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; border-top: 1px solid #d3d8e1; margin: 10px 12px 0; padding-top: 15px; color: #606775; font-size: 12px; line-height: 1.55; } .contact-scene-signature { display: inline-flex; gap: 8px; align-items: center; font-size: 10px; letter-spacing: .045em; } .contact-scene-signature i { width: 5px; height: 5px; border-radius: 50%; background: #b43b2b; flex: none; } .contact-scene.is-playing .scene-message-start { animation: contact-card-arrive 1.05s .04s cubic-bezier(.16,1,.3,1) both, contact-card-float 9s 1.1s ease-in-out infinite; } .contact-scene.is-playing .scene-message-idea { animation: contact-answer-arrive 1.2s .48s cubic-bezier(.16,1,.3,1) both, contact-card-float 11s 1.7s ease-in-out infinite reverse; } .contact-scene.is-playing .scene-mark { animation: contact-mark-arrive 1.25s .2s cubic-bezier(.16,1,.3,1) both, contact-mark-float 13s 1.5s ease-in-out infinite; } .contact-scene.is-playing .scene-orbit { animation: contact-orbit-arrive 1.6s .1s ease-out both, contact-orbit-drift 22s 1.7s ease-in-out infinite; } .contact-scene.is-playing .scene-orbit ellipse[stroke-dasharray] { animation: contact-orbit-flow 18s linear infinite; } .contact-scene.is-playing .scene-route { animation: contact-route-arrive 1.2s .32s ease-out both, contact-route-flow 8s 1.55s linear infinite; } .contact-scene.is-playing .scene-mark-orbit { animation: contact-mark-orbit 16s linear infinite; } .contact-scene.is-playing .scene-typing circle { animation: contact-typing 1.2s .3s ease-in-out infinite; } .contact-scene.is-playing .scene-typing circle:nth-child(2) { animation-delay: .46s; } .contact-scene.is-playing .scene-typing circle:nth-child(3) { animation-delay: .62s; } .contact-scene.is-playing .scene-signal { animation: contact-signal-travel 3.2s 1.2s linear infinite; } .contact-scene.is-playing .scene-signal-two { animation-delay: 2.266667s; } .contact-scene.is-playing .scene-signal-three { animation-delay: 3.333333s; } @keyframes contact-card-arrive { from { opacity: 0; transform: translate(-22px,28px) rotate(-5deg) scale(.94); } to { opacity: 1; transform: translate(0,0) rotate(0) scale(1); } } @keyframes contact-answer-arrive { from { opacity: 0; transform: translate(24px,32px) rotate(4deg) scale(.95); } to { opacity: 1; transform: translate(0,0) rotate(0) scale(1); } } @keyframes contact-mark-arrive { from { opacity: 0; transform: translateY(20px) rotate(-18deg) scale(.8); } to { opacity: 1; transform: translateY(0) rotate(0) scale(1); } } @keyframes contact-orbit-arrive { from { opacity: 0; transform: rotate(-12deg) scale(.9); } to { opacity: .42; transform: rotate(0) scale(1); } } @keyframes contact-route-arrive { from { opacity: 0; stroke-dashoffset: 55; } to { opacity: .75; stroke-dashoffset: 0; } } @keyframes contact-signal-travel { 0% { stroke-dashoffset: 0; opacity: 0; } 8% { stroke-dashoffset: -8; opacity: 1; } 88% { stroke-dashoffset: -88; opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } } @keyframes contact-typing { 0%,60%,100% { transform: translateY(0); opacity: .65; } 30% { transform: translateY(-3.5px); opacity: 1; } } @keyframes contact-mark-orbit { from { transform: rotate(-28deg); } to { transform: rotate(332deg); } } @keyframes contact-card-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes contact-mark-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(1.5deg); } } @keyframes contact-orbit-drift { 0%,100% { transform: rotate(0); opacity: .42; } 50% { transform: rotate(3deg); opacity: .34; } } @keyframes contact-orbit-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -72; } } @keyframes contact-route-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -56; } } @media(max-width:900px) { .contact-hero { grid-template-columns: 1fr; gap: 24px; }.contact-hero .contact-heading { font-size: clamp(52px,8vw,84px); }.contact-scene { max-width: 520px; margin: 0 auto; }.contact-hero .contact-intro { max-width: 620px; }.contact-grid { margin-top: 65px; } } @media(max-width:640px) { .contact-hero .contact-heading { font-size: clamp(38px,10.7vw,65px); }.contact-scene { max-width: 430px; margin-top: 0; }.contact-scene-caption { margin-inline: 0; font-size: 11px; }.contact-scene-signature { font-size: 10px; }.contact-hero .contact-intro { font-size: 17px; }.contact-grid { margin-top: 45px; } } @media(prefers-reduced-motion:reduce) { .contact-scene *, .contact-scene *::before, .contact-scene *::after { animation: none!important; transition: none!important; }.contact-scene.scene-enhanced .contact-scene-svg { transform: none; } } .contact-scene.motion-is-paused * { animation: none!important; transition: none!important; } .contact-scene.motion-is-paused .contact-scene-svg { transform: none; } /* The disclosure remains visible while the optional floating badge is hidden. */ .contact-page .grecaptcha-badge { visibility: hidden; } .form-recaptcha-note { margin: 26px 0 20px; color: #555b64; font-size: 12px; line-height: 1.65; max-width: 570px; } .form-recaptcha-note a { text-decoration: underline; text-underline-offset: 3px; } /* Source: brand.css */ /* Approved B wordmark; all symbols come directly from the original supplied SVG. */ .brand,.footer-wordmark{font-family:var(--font-brand);font-weight:600;letter-spacing:-.035em} .brand{gap:11px;font-size:30px;min-height:44px} .brand>svg{width:25px;height:27px;color:var(--red);fill:currentColor;flex:none} .footer-wordmark{letter-spacing:-.04em;font-size:clamp(90px,18.7vw,296px);line-height:.85} .brand-echo{position:absolute;pointer-events:none;color:currentColor;opacity:.045;width:clamp(140px,18vw,240px);height:auto;aspect-ratio:48/49;right:var(--pad);top:clamp(44px,6vw,88px);transform:rotate(-11deg);overflow:visible} .studio-section{position:relative;overflow:hidden}.studio-content,.studio-section>.eyebrow{position:relative;z-index:1} /* Inline original vectors need no mask fetch or separate composited surface. Their baseline follows actual capital height, including the stable fallback font. */ .eyebrow.has-mark,.contact-kicker.has-mark{display:block} .eyebrow-mark{display:inline-block;width:10px;height:calc(10px * 49 / 48);margin-inline-end:10px;fill:currentColor;color:var(--red);vertical-align:calc((.7em - 10px * 49 / 48) / 2);vertical-align:calc((1cap - 10px * 49 / 48) / 2);overflow:visible;pointer-events:none} .contact-kicker.has-mark:before{content:none} .contact-section .eyebrow-mark{color:#111316} .site-footer .footer-details{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:32px 48px;align-items:center} .footer-company{display:flex;align-items:center;gap:20px;min-width:0;max-width:400px} .footer-logo-link{display:flex;align-items:center;min-height:44px;flex:none;color:#f5f5f7} .footer-company-mark{display:block;width:36px;height:37px;color:var(--red)} .footer-company-data{display:block;max-width:290px;line-height:1.85;font-size:12px;color:#b9c0cd} .footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 28px;min-width:0} .footer-links>a{display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap;font-size:13px;line-height:1.5;color:#bdc1ca} .footer-links>a>.ui-icon{margin-inline-start:0} .footer-links>a:hover{color:#f5f5f7;text-decoration:underline;text-underline-offset:5px} .contact-footer>.footer-company{margin-bottom:28px} .contact-footer .footer-logo-link{color:#101114} .contact-footer .footer-company-data{color:#555b66} .footer-legal{display:flex;flex-wrap:wrap;gap:6px 26px;border-top:1px solid #30343e;padding:20px 0;margin-top:25px;align-items:center;color:#bdc1ca;font-size:13px} .footer-legal a,.footer-legal button{min-height:44px;display:inline-flex;align-items:center;white-space:nowrap} .footer-legal button{background:transparent;padding:0;font:inherit;color:inherit;text-align:left} .footer-legal a:hover,.footer-legal button:hover{text-decoration:underline;text-underline-offset:5px} @media(max-width:1100px){.site-footer .footer-details{grid-template-columns:minmax(0,1fr);gap:22px}.footer-company{max-width:none}.footer-links{display:grid;grid-template-columns:repeat(3,max-content);justify-content:start;gap:4px 36px}} @media(max-width:760px){.brand{font-size:27px;gap:9px}.brand>svg{width:22px;height:23px}.brand-echo{width:140px;height:auto;right:var(--pad);top:44px}.footer-wordmark{font-size:18.7vw}.site-footer .footer-legal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;font-size:12px}.footer-legal .motion-toggle{font-size:12px;gap:8px}.footer-legal .motion-icon{width:24px;height:24px;flex:none}} @media(max-width:600px){.footer-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;width:100%}.footer-links>a{font-size:12px;gap:6px}} @media(max-width:390px){.brand{font-size:25px}.brand>svg{width:20px;height:21px}} @media(max-width:390px){.site-footer .footer-legal .motion-toggle{grid-column:1/-1}} @media(max-width:760px){.footer-company{grid-column:1/-1;display:grid;grid-template-columns:34px minmax(0,1fr);gap:18px;max-width:none;width:100%;align-items:center}.footer-company-mark{width:34px;height:35px}.footer-company-data{font-size:12px;max-width:340px}} .footer-company .footer-logo-link{align-self:center;align-items:center;padding-top:0} .site-footer.footer-light{background:#e9eaed;color:#101114} .footer-light .footer-wordmark{color:#101114} .footer-light .footer-company-data,.footer-light .footer-links>a,.footer-light .footer-bottom{color:#505864} .footer-light .footer-links>a:hover{color:#101114} .footer-light .footer-legal{color:#363f4c;border-color:#c9cdd4} .footer-light .footer-bottom{border-color:#c9cdd4} .footer-light .footer-logo-link{color:#101114} .footer-light :focus-visible{outline-color:#0670d8} .footer-light .motion-toggle{color:#505864}.footer-light .motion-icon{border-color:#8b939f} /* The client mailbox remains available in the phone and tablet menu. */ .mobile-nav .mobile-nav-contact>a.mobile-client-webmail{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:360px;min-height:44px;margin:8px 0 0;padding:8px 0;font-size:15px;line-height:1.4;letter-spacing:0;color:var(--menu-muted)} .mobile-client-webmail>.ui-icon{width:16px;height:16px;margin:0;flex:none} .mobile-nav .mobile-client-webmail:hover{color:var(--menu-ink)} /* Source: accessibility.css */ /* Readable supporting text and visible keyboard controls across all page types. */ :root{--muted:#60636b} .eyebrow,.hero-intro .eyebrow,.chapter-kicker{font-size:12px} .nav-links a{font-size:13px;min-height:44px;display:flex;align-items:center}.language-link{font-size:12px;min-width:30px;min-height:44px;display:grid;place-items:center} .nav-cta{min-height:44px;font-size:12px}.menu-toggle{width:44px;height:44px} .motion-toggle,.scroll-hint{font-size:12px;min-height:44px}.motion-toggle{color:#b8bdc9}.scroll-hint{color:#b8bdc9}.motion-icon{width:32px;height:32px} .hero-aside{color:#a9afbd;font-size:13px}.hero-chapter p{color:#bbc0cd}.hero-chapter h2>span{color:#a6acb8} .scene-heading .eyebrow,.scene-heading>p:last-child{color:#565c64}.digital-heading .eyebrow{color:#626772}.digital-heading h2>span{color:#6f747e} .identity-note{font-size:12px}.identity-outro .light-link{font-size:14px} .concept-label{font-size:11px;color:#d7d9e0;background:#171b23da;border-radius:3px;padding:5px 8px;max-width:85%;line-height:1.5} .campaign-bottom{font-size:11px;color:#e2e4eb}.campaign-copy>a{font-size:14px} .services-intro h2>span,.studio-content h2>span,.approach-header h2>span{color:#6e737c}.service-no{font-size:12px}.service-body>span{font-size:12px;color:#61656e}.service-body>a{font-size:14px;min-height:44px;display:inline-flex;align-items:center} .approach-step>p{color:#60656f;font-size:15px}.studio-description>p{color:#60656f}.studio-coordinate>span:first-child{font-size:13px} .contact-section .eyebrow{font-size:12px;color:#411a16}.contact-button{font-size:14px} .footer-details{font-size:13px;color:#aeb5c3;flex-wrap:wrap}.footer-details>a{font-size:13px;min-height:44px;display:flex;align-items:center}.footer-details>span{max-width:370px}.footer-bottom{font-size:12px;color:#aeb5c3} .experience-ready:not(.reduced-motion) .word-reveal .word{color:rgba(16,17,20,var(--word-opacity,.62))} a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #0670d8;outline-offset:5px}.site-header a:focus-visible,.site-header button:focus-visible,.site-footer :focus-visible,.systems-section :focus-visible,.hero-stage :focus-visible,.campaign-stage :focus-visible{outline-color:#ffad9d} .contact-section :focus-visible{outline-color:#111316}.reveal:focus-within{opacity:1!important;transform:none!important} .skip-link{z-index:1100}.mobile-nav a{padding-block:4px;min-height:44px} .contact-page .brand{font-size:30px;gap:11px}.contact-page .brand>svg{width:25px;height:27px}.contact-page .nav-cta{min-height:44px;font-size:12px}.contact-page .menu-toggle{width:44px;height:44px} .contact-page .footer-legal{border-color:#d9dadd;color:#444a55}.contact-page .site-header :focus-visible{outline-color:#0670d8}.contact-page .nav-links a,.contact-page .language-link{color:#60636b} .contact-kicker,.contact-detail-title,.contact-form-title{font-size:12px;color:#60636b} .contact-address,.contact-intro,.contact-point-detail,.form-required,.form-privacy{color:#60636b}.contact-point-label{font-size:11px;color:#60636b}.form-privacy{font-size:13px}.field input::placeholder,.field textarea::placeholder{color:#686e78}.contact-social{min-height:44px;align-items:center}.contact-footer-main{font-size:12px;color:#60636b} @media(max-width:1000px){.nav-links,.language-link,.contact-page .nav-links,.contact-page .language-link{display:none}.menu-toggle,.contact-page .menu-toggle{display:block}} @media(max-width:760px){.hero-intro .eyebrow,.chapter-kicker,.manifesto .eyebrow,.scene-heading .eyebrow,.digital-heading .eyebrow,.campaign-copy .eyebrow,.services-intro .eyebrow,.approach-header>.eyebrow,.studio-section>.eyebrow{font-size:11px}.hero-intro .eyebrow{letter-spacing:.1em}.hero-bottom{gap:12px}.hero-timeline{font-size:10px}.motion-toggle,.scroll-hint{font-size:11px}.scroll-hint{gap:8px}.motion-toggle{gap:6px}.identity-note{font-size:11px}.concept-label,.digital-section .concept-label{font-size:10px;bottom:15px}.campaign-bottom{font-size:10px;gap:15px}.campaign-copy>a{font-size:13px}.digital-details p{font-size:15px}.service-body>span{font-size:12px}.approach-step>p{font-size:14px}.contact-section .eyebrow{font-size:11px}.contact-button{font-size:13px}.footer-details,.footer-details>a{font-size:12px}.footer-bottom{font-size:11px}.footer-details{gap:17px}} @media(max-width:390px){.hero-intro .eyebrow{font-size:10px}.nav-right{gap:8px}.nav-cta{font-size:11px;padding-inline:12px}.service-title{font-size:22px}.approach-steps{gap:35px 22px}.approach-step>p{font-size:14px}.contact-links{overflow-wrap:anywhere}} @media(max-width:760px){.contact-page .brand{font-size:27px;gap:9px}.contact-page .brand>svg{width:22px;height:23px}.contact-page .nav-cta{font-size:11px}.contact-kicker{font-size:11px}} @media(max-width:390px){.contact-page .brand{font-size:25px}.contact-page .brand>svg{width:20px;height:21px}.contact-page .nav-right{gap:8px}.contact-page .nav-cta{font-size:11px;padding-inline:12px}} .manifesto .inline-link:hover,.digital-details .inline-link:hover,.studio-description .inline-link:hover,.service-body>a:hover,.contact-page .contact-direct a:hover,.contact-page .contact-social:hover{color:#b52e22} @media(max-width:370px){.site-header .nav-cta{display:none}.header-inner,.contact-page .header-inner{gap:12px}.nav-right,.contact-page .nav-right{gap:0}.core-frame{width:100vw;height:calc(49 * var(--scene-vh, 1vh))}} @media(forced-colors:active){.eyebrow-mark{color:CanvasText}.motion-icon,.service-item{border-color:CanvasText}} /* Source: consent.css */ /* Privacy controls intentionally remain readable regardless of the page theme. */ .pm-privacy{font-family:var(--font-ui);font-size:16px;line-height:1.5;color:#f7f7f5;letter-spacing:normal}.pm-privacy *{box-sizing:border-box}.pm-consent-banner{position:fixed;z-index:1000;left:50%;bottom:24px;width:calc(100% - 48px);max-width:1240px;transform:translateX(-50%);display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,340px);align-items:center;gap:32px;padding:24px 28px;border:1px solid #66676b;border-radius:18px;background:#1a1b1e;box-shadow:0 12px 60px #0005;max-height:min(50dvh,calc(100dvh - 120px));overflow:auto;overscroll-behavior:contain}.pm-consent-banner[hidden]{display:none}.pm-consent-copy{min-width:0}.pm-privacy h2{margin:0 0 8px;font-family:inherit;font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:600;color:#fff}.pm-privacy p{font:inherit;margin:0 0 12px;color:#d3d4d7}.pm-consent-copy>p{font-size:14px}.pm-privacy a{color:#f3f3f1;text-decoration:underline;text-underline-offset:4px}.pm-consent-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:0!important;font-size:13px!important}.pm-consent-links a{display:inline-flex;align-items:center;min-height:32px;white-space:nowrap}.pm-consent-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:0}.pm-privacy button{min-height:46px;padding:11px 17px;background:#f3f3f1;color:#17181b;border:1px solid #f3f3f1;border-radius:8px;font:600 14px/1.3 var(--font-ui);cursor:pointer;letter-spacing:normal;text-align:center}.pm-privacy button:hover{background:#dcdeda;border-color:#dcdeda}.pm-privacy .pm-consent-settings{grid-column:1/-1;color:#f3f3f1;background:transparent;border-color:#777980;min-height:44px}.pm-privacy :focus-visible{outline:3px solid #ffb6b0;outline-offset:4px}.pm-consent-dialog{position:fixed;inset:0;margin:auto;max-width:620px;width:calc(100% - 32px);max-height:calc(100dvh - 40px);overflow:auto;padding:28px;border:1px solid #777980;border-radius:18px;color:#f3f3f1;background:#1a1b1e;box-shadow:0 18px 80px #0008}.pm-consent-dialog::backdrop{background:#000b}.pm-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.pm-dialog-head h2{margin:0}.pm-privacy .pm-dialog-close{display:grid;place-items:center;flex:0 0 44px;width:44px;min-height:44px;padding:0;border:1px solid #777980;color:#f3f3f1;background:transparent;font-size:28px;font-weight:400}.pm-cookie-category{padding:20px 0;border-top:1px solid #5a5b60}.pm-cookie-category p{font-size:14px;margin-bottom:0}.pm-category-title{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px}.pm-category-title h3{margin:0;color:#f3f3f1;font-size:16px;font-weight:600;letter-spacing:normal}.pm-category-title>span{font-size:12px;color:#d3d4d7}.pm-analytics-label{min-height:44px;display:flex;align-items:center;gap:12px;color:#f3f3f1;font-size:16px;font-weight:600;cursor:pointer}.pm-analytics-label input{width:24px;height:24px;margin:0;accent-color:#ed615b;flex-shrink:0}.pm-dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.pm-privacy-status{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:900px){.pm-consent-banner{bottom:12px;width:calc(100% - 24px);padding:20px;grid-template-columns:minmax(0,1fr);gap:16px}.pm-privacy h2{font-size:20px}.pm-consent-copy>p{font-size:14px}.pm-consent-dialog{padding:22px}.pm-category-title{align-items:flex-start}}@media(max-width:380px){.pm-consent-actions,.pm-dialog-actions{grid-template-columns:1fr}.pm-consent-actions{gap:8px}.pm-consent-links{gap:4px 14px}.pm-consent-banner{padding:16px}.pm-privacy button{padding:10px 12px}}@media(prefers-reduced-motion:reduce){.pm-privacy *{scroll-behavior:auto!important;transition:none!important}} /* Reserve room inside the footer, retaining its background and accessible final controls. */ html.pm-consent-visible{scroll-padding-bottom:var(--pm-consent-space,0px)}.pm-consent-spacer{height:0;pointer-events:none}.pm-consent-visible .pm-consent-spacer{height:var(--pm-consent-space,0px)}.pm-consent-visible .mobile-nav{bottom:var(--pm-consent-space,0px)} .pm-dialog-close>.ui-icon{width:20px;height:20px} /* Both choices remain equally legible; the secondary choice has a quiet grey fill. */ .pm-privacy [data-pm-reject]{background:#dedfe2;border-color:#dedfe2;color:#17181b} .pm-privacy [data-pm-reject]:hover{background:#cdd0d5;border-color:#cdd0d5} @media(max-width:420px){ .pm-consent-banner{bottom:8px;width:calc(100% - 16px);padding:16px;gap:12px;max-height:calc(100dvh - 88px)} .pm-consent-actions{grid-template-columns:minmax(0,1fr);gap:8px} .pm-consent-actions button{width:100%;min-height:46px} .pm-consent-copy>p{font-size:13px;line-height:1.5;margin-bottom:8px} .pm-consent-links{gap:4px 14px} } /* Source: browser-chrome.css */ /* Real page surfaces let supporting browsers blend their own top/bottom chrome. A native toolbar remains controlled by the browser, never by a fake overlay. */ html{--browser-edge:#080a0e;background-color:var(--browser-edge);color-scheme:light} html[data-page-theme="light"]{--browser-edge:#f5f5f7} .site-header{backdrop-filter:none;-webkit-backdrop-filter:none} body.cinema>.site-header{background-color:#080a0e} body.contact-page>.site-header,body.legal-page>.site-header{background-color:#f5f5f7}