@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-style:normal;font-weight:200 400;font-display:swap}
@font-face{font-family:Manrope;src:url('assets/manrope-medium.ttf') format('truetype');font-style:normal;font-weight:500 800;font-display:swap}
:root{--ink:#090b0c;--paper:#f5f5f2;--white:#fff;--muted:#929799;--line:rgba(255,255,255,.2);--gutter:clamp(24px,4.3vw,88px);--ease:cubic-bezier(.22,1,.36,1);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--ink);color:var(--paper);font:400 16px/1.65 Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}body.locked{overflow:hidden}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}button{background:none;border:0}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:7px}input:focus-visible,textarea:focus-visible{outline:2px solid #777;outline-offset:3px}::selection{background:#aaa;color:#000}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;line-height:1.06;letter-spacing:-.065em}ul{margin:0;padding:0;list-style:none}button:disabled{cursor:wait;opacity:.5}.eyebrow{font:500 11px/1.5 Manrope,Arial,sans-serif;letter-spacing:.13em}.soft{color:#959794}.muted{color:#72787a}.skip-link{position:fixed;left:20px;top:-80px;z-index:200;background:white;color:black;padding:15px}.skip-link:focus{top:12px}
.site-header{height:104px;padding:0 var(--gutter);display:flex;align-items:center;gap:40px;position:absolute;top:0;left:0;right:0;z-index:30}.brand{width:105px;flex-shrink:0}.brand img{width:105px;height:auto}.header-descriptor{font-size:11px;line-height:1.4;letter-spacing:.02em;margin-left:30px}.site-header nav{display:flex;gap:32px;margin-left:auto;font-size:13px}.site-header nav a{position:relative}.site-header nav a:after{content:'';position:absolute;bottom:-4px;left:0;width:100%;height:1px;transform:scaleX(0);transform-origin:left;background:currentColor;transition:transform .35s}.site-header nav a:hover:after{transform:scaleX(1)}.header-contact{font-size:13px;border:1px solid #81898a;border-radius:100px;padding:12px 20px;display:flex;align-items:center;gap:25px;transition:background .3s,color .3s}.header-contact:hover{background:var(--paper);color:var(--ink)}.header-contact span{font-size:20px;line-height:1}.menu-toggle{display:none}.mobile-menu[hidden]{display:none}
.intro-curtain{display:none}.js-motion .intro-curtain{display:flex;position:fixed;inset:0;background:#090b0c;z-index:100;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;animation:curtain-away 1s var(--ease) 1.15s both}.intro-curtain img{width:130px;margin-bottom:30px}.intro-curtain span{font-size:10px;letter-spacing:.3em;color:#a1a8aa}.intro-curtain i{margin-top:35px;width:1px;height:65px;background:#6e7577;transform-origin:top;animation:descent 1s var(--ease) both}@keyframes curtain-away{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(100% 0 0 0)}}@keyframes descent{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hero{position:relative;min-height:950px;height:max(950px,108svh);padding:155px var(--gutter) 28px;isolation:isolate;overflow:hidden}.hero-ocean{position:absolute;inset:0 0 -12%;z-index:-3;background:linear-gradient(180deg,rgba(0,0,0,.23),rgba(0,0,0,.13) 25%,#080a0b 95%),url('assets/ocean.webp') center 28% / cover no-repeat;will-change:transform}.hero:after{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 70%)}.particles{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.7}.hero-topline{display:flex;justify-content:space-between;align-items:center;color:#ccd0d0}.hero h1{font-size:clamp(104px,17.6vw,300px);font-weight:500;letter-spacing:-.085em;line-height:.98;white-space:nowrap;text-align:center;margin:24px 0 0;position:relative;z-index:1;will-change:transform}.hero h1 span{display:inline-block}.hero-composition{display:grid;grid-template-columns:1fr minmax(0,3.3fr) 1fr;position:relative;z-index:2;align-items:end;margin-top:-8px;gap:24px}.hero-thought{font-size:13px;line-height:1.7;align-self:center;color:#d3d5d4}.reel-window{aspect-ratio:16/8.8;position:relative;background:#171b1d;border-radius:7px;overflow:hidden;box-shadow:0 30px 100px rgba(0,0,0,.3);transform-origin:center top;will-change:transform}.reel-window video{width:100%;height:100%;object-fit:cover}.reel-shade{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.62))}.reel-play{position:absolute;left:30px;bottom:27px;display:flex;align-items:center;gap:14px;text-align:left}.play-disc{display:flex;align-items:center;justify-content:center;width:50px;height:50px;background:var(--paper);color:#151719;border-radius:50%;font-size:12px;padding-left:3px;transition:transform .4s var(--ease)}.reel-play:hover .play-disc{transform:scale(1.12)}.reel-play>span:last-child{font-size:17px;line-height:1.4}.reel-play small{display:block;font-size:8px;letter-spacing:.14em;margin-top:5px}.video-pause{position:absolute;right:24px;bottom:25px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.6);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:12px}.reel-caption{position:absolute;top:20px;left:24px;font-size:10px;letter-spacing:.12em;text-shadow:0 1px 6px #000}.hero-scroll{justify-self:end;display:flex;align-items:center;gap:30px;font-size:9px;line-height:1.7;letter-spacing:.15em;margin-bottom:25px}.scroll-line{font-size:36px;line-height:1;font-weight:300;animation:arrow-breathe 3s infinite ease-in-out}.hero-bottom{position:absolute;bottom:36px;left:var(--gutter);right:var(--gutter);display:flex;align-items:end;justify-content:space-between;font-size:13px;line-height:1.7;color:#b2b8ba}.depth-counter{font:10px/1.4 monospace;letter-spacing:.12em}.depth-counter>span{font-size:20px;color:white;margin:0 7px}.js-motion .hero h1 span{animation:title-rise 1.7s var(--ease) 1.1s both}.js-motion .hero h1 span:last-child{animation-delay:1.22s}.js-motion .reel-window{animation:reel-enter 1.9s var(--ease) 1.28s both}@keyframes title-rise{from{transform:translateY(80%);opacity:0;filter:blur(14px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}@keyframes reel-enter{from{clip-path:inset(50% 15% 50% 15% round 120px);translate:0 55px;opacity:0}to{clip-path:inset(0 0 0 0 round 7px);translate:0 0;opacity:1}}@keyframes arrow-breathe{50%{transform:translateY(8px)}}
.light-section{background:var(--paper);color:var(--ink);color-scheme:light}.intro-section{padding:85px var(--gutter) 125px}.section-kicker{display:flex;justify-content:space-between;align-items:center}.asterisk{font-size:37px;line-height:1}.intro-statement{font-size:clamp(60px,8.65vw,155px);margin:80px 0 75px;letter-spacing:-.06em;line-height:1.06}.intro-detail{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-left:27%}.intro-detail>p{font-size:22px;line-height:1.5;letter-spacing:-.025em}.intro-detail>div p{font-size:15px;line-height:1.8;color:#535653;margin-bottom:22px}.text-link{font-size:13px;line-height:1.5;display:inline-flex;gap:35px;align-items:center;border-bottom:1px solid currentColor;padding:10px 0}.text-link span{font-size:21px;transition:transform .3s}.text-link:hover span{transform:translate(3px,-3px)}
.work-section{padding:0 var(--gutter) 100px}.work-section>.section-kicker{border-top:1px solid #c8cbc8;padding-top:35px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin:60px 0 70px}.section-heading h2{font-size:clamp(45px,6.2vw,112px);line-height:1.08}.section-heading>p{font-size:14px;line-height:1.8;max-width:380px;margin-bottom:7px}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px 36px;align-items:start}.work-card:nth-child(even){margin-top:130px}.work-card button{display:block;padding:0;width:100%;text-align:left;color:var(--ink)}.work-image-wrap{position:relative;aspect-ratio:1.22;overflow:hidden;background:#dde0dd}.work-image-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);will-change:transform}.work-card:nth-child(3n+2) .work-image-wrap{aspect-ratio:.91}.work-card button:hover img{transform:scale(1.055)}.view-project{position:absolute;right:20px;bottom:20px;border-radius:100px;padding:11px 17px;background:white;color:#101213;display:flex;gap:25px;font-size:11px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}.work-card button:hover .view-project,.work-card button:focus-visible .view-project{opacity:1;transform:translateY(0)}.work-caption{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:20px}.work-caption h3{font-size:23px;letter-spacing:-.035em;line-height:1.25}.work-caption p{font-size:11px;color:#676b68;margin-top:4px}.work-number{font:11px/1 monospace;color:#747773;align-self:start;padding-top:6px}.work-footnote{padding-top:100px;display:flex;justify-content:space-between;align-items:center;font-size:14px;gap:30px}.work-footnote a{border-bottom:1px solid;padding-bottom:6px}.work-footnote a span{margin-left:30px}
.expertise-section{padding:90px var(--gutter) 110px;background:#0c0e0f}.expertise-section .section-heading>p{color:#b2b6b6}.services{margin-top:95px}.service{border-top:1px solid #3a3e3f}.service:last-child{border-bottom:1px solid #3a3e3f}.service summary{display:flex;align-items:center;gap:50px;padding:35px 0;list-style:none;cursor:pointer}.service summary::-webkit-details-marker{display:none}.service-no{width:45px;font:12px/1 monospace;color:#979d9f}.service h3{font-size:clamp(25px,3.1vw,55px);letter-spacing:-.045em;font-weight:400}.service-icon{margin-left:auto;position:relative;width:24px;height:24px}.service-icon:before,.service-icon:after{content:'';background:#c7cdcf;position:absolute;left:2px;top:11px;height:1px;width:20px;transition:transform .35s}.service-icon:after{transform:rotate(90deg)}.service[open] .service-icon:after{transform:rotate(0)}.service[open] h3{color:white}.service-body{display:grid;grid-template-columns:1.15fr 1fr;gap:35px 100px;margin:0 0 40px 95px;max-width:960px;color:#aeb4b5;animation:body-appear .45s var(--ease)}.service-body>p{font-size:15px;line-height:1.85}.service-body ul{display:grid;gap:7px;font-size:13px;line-height:1.6}.service-body .text-link{justify-self:start;color:#eee;font-size:12px}@keyframes body-appear{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.approach-section{display:grid;grid-template-columns:1.08fr 1fr;position:relative;background:#080a0b}.approach-scene{position:sticky;top:0;align-self:start;height:100svh;min-height:600px;overflow:hidden}.approach-ocean{position:absolute;inset:-5% -10%;background:url('assets/ocean.webp') 66% center / cover;opacity:.7;will-change:transform}.approach-scene:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 30%,rgba(0,0,0,.4))}.approach-scene-content{position:relative;z-index:1;padding:65px var(--gutter);height:100%;display:flex;flex-direction:column}.approach-scene h2{font-size:clamp(50px,5.4vw,95px);margin-top:55px}.approach-scene-content>p{font-size:16px;margin-top:auto;line-height:1.7}.depth-meter{position:absolute;right:40px;top:46%;bottom:80px;width:70px;display:flex;flex-direction:column;align-items:center;gap:15px}.depth-meter>span{font:8px/1.4 monospace;letter-spacing:.1em;white-space:nowrap}.depth-meter>div{height:100%;width:15px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.4) 0 1px,transparent 1px 14px);position:relative}.depth-meter i{position:absolute;top:var(--progress,0%);left:-6px;width:27px;height:3px;background:white;box-shadow:0 0 12px white;transition:top .15s}.approach-steps{padding:100px var(--gutter) 40px 70px}.approach-step{padding:60px 0 115px;min-height:67vh}.step-label{font:11px/1.4 monospace;letter-spacing:.1em;color:#8d9496}.approach-step h3{font-size:clamp(37px,4vw,69px);line-height:1.12;letter-spacing:-.05em;margin:28px 0}.approach-step p{color:#a9b1b3;font-size:15px;line-height:1.85;max-width:390px}.step-outcome{display:block;margin-top:35px;font-size:9px;letter-spacing:.14em;border-top:1px solid #343a3c;padding-top:20px;color:#c8cecf}
.company-section{padding:100px var(--gutter) 120px;display:grid;grid-template-columns:1fr 3fr;gap:50px}.company-section>.eyebrow{padding-top:12px}.company-section h2{font-size:clamp(45px,5.3vw,100px);margin-bottom:50px}.company-copy{display:grid;grid-template-columns:1fr 1fr;gap:25px 50px;font-size:15px;line-height:1.8;color:#565c59}.company-signature{color:#101413;font-size:34px;letter-spacing:-.07em;line-height:1.2;align-self:end}.contact-section{padding:70px var(--gutter) 95px;position:relative;overflow:hidden;isolation:isolate;min-height:760px}.contact-ocean{z-index:-1;position:absolute;inset:0;background:linear-gradient(90deg,#080a0bc9,#080a0b70),url('assets/ocean.webp') center 45% / cover;transform:rotate(180deg);opacity:.7}.contact-section h2{font-size:clamp(54px,7.8vw,142px);line-height:1.08;margin:80px 0 70px;letter-spacing:-.065em}.contact-section h2 span{color:#a9b0b1}.contact-row{display:flex;align-items:center;justify-content:space-between;gap:35px}.big-email{font-size:clamp(23px,3.1vw,54px);letter-spacing:-.055em;border-bottom:1px solid #a5abad;padding-bottom:10px;display:flex;gap:60px}.big-email span{font-size:1.2em}.contact-row p{font-size:14px;line-height:1.8;color:#b3bbbc;max-width:330px}.brief-button{font-size:12px;display:flex;align-items:center;gap:45px;margin-top:38px;padding:0}.brief-button span{font-size:22px}.site-footer{border-top:1px solid #363c3e;padding:35px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:35px;background:#080a0b}.site-footer img{width:85px;height:auto}.site-footer p,.site-footer>div{font-size:10px;color:#a1a8aa}.site-footer>div{display:flex;gap:24px;align-items:center}.site-footer button{padding:0;font-size:10px}.site-footer a:hover,.site-footer button:hover{color:white}
.js-motion .reveal{opacity:0;transform:translateY(32px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}.js-motion .reveal.in-view{opacity:1;transform:none}.motion-reduced *, .motion-reduced *:before, .motion-reduced *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-reduced .reveal{opacity:1;transform:none}.motion-reduced .intro-curtain{display:none}.motion-reduced .particles{display:none}
dialog{border:0;color:var(--paper);background:#0a0d0f;padding:28px;max-width:calc(100% - 40px);max-height:calc(100svh - 40px)}dialog::backdrop{background:rgba(0,0,0,.9);backdrop-filter:blur(12px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:24px}.dialog-top h2{font-size:21px;letter-spacing:-.025em}.close-dialog{display:flex;align-items:center;gap:20px;font-size:12px;flex-shrink:0}.close-dialog span{font-size:28px;line-height:1}.reel-dialog{width:1200px}.reel-dialog video{width:100%;max-height:78svh;background:black}.video-error{margin:20px}.video-error a{text-decoration:underline}.project-dialog{width:1280px;overflow:auto;overscroll-behavior:contain;padding:35px}.project-dialog .dialog-top{position:sticky;top:-35px;background:#0a0d0f;z-index:2;padding:25px 0;border-bottom:1px solid #363c3e}.project-dialog .eyebrow{color:#99a4a8}.project-dialog h2{margin-top:10px;font-size:30px}.project-gallery img,#project-gallery img{width:100%;height:auto;margin:0 0 18px;background:#21282b}.project-bottom{display:flex;align-items:center;justify-content:space-between;padding:30px 0 10px;font-size:15px}.brief-dialog{width:700px;padding:40px}.brief-dialog>h2{font-size:65px;margin-bottom:25px}.brief-dialog>p{font-size:13px;line-height:1.8;color:#adb7bc;max-width:500px}.brief-dialog form{margin-top:28px}.brief-dialog label{font-size:12px;display:block;margin-bottom:18px}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.brief-dialog input,.brief-dialog textarea{display:block;width:100%;border:1px solid #4c595e;border-radius:0;background:#121719;padding:10px 12px;color:white;font-size:16px;margin-top:7px}.submit-brief{display:flex;justify-content:space-between;align-items:center;width:100%;padding:15px 20px;background:#f5f5f2;color:#0a0d0f;margin-top:20px}.brief-dialog #brief-status{font-size:12px;margin-top:15px;color:#b3bdc2}.noscript-notice{padding:30px;max-width:700px}.privacy-page{max-width:900px;margin:auto;padding:170px 30px 100px}.privacy-page h1{font-size:70px;margin-bottom:35px}.privacy-page h2{font-size:27px;letter-spacing:-.02em;margin:35px 0 15px}.privacy-page p{color:#c0c7ca;margin:15px 0}.privacy-page a{text-decoration:underline}
@media(min-width:1600px){.hero{height:1160px;padding-top:180px}.hero-composition{grid-template-columns:1fr minmax(0,3.7fr) 1fr;max-width:1750px;margin-left:auto;margin-right:auto}.hero h1{margin-top:15px}.hero-bottom{bottom:48px}}
@media(max-width:1100px){.header-descriptor{display:none}.site-header nav{margin-left:auto}.site-header{gap:25px}.hero{min-height:850px;height:100svh;padding-top:145px}.hero-composition{grid-template-columns:1fr 4.5fr 1fr;gap:15px;margin-top:20px}.hero-thought{font-size:11px}.hero-scroll{gap:12px;font-size:8px}.hero h1{font-size:17vw}.reel-play{left:20px;bottom:18px}.hero-bottom{bottom:35px}.intro-detail{margin-left:15%;gap:40px}.approach-steps{padding-left:45px}.company-section{grid-template-columns:1fr 3.4fr;gap:25px}.company-copy{gap:25px}.site-footer{flex-wrap:wrap}.site-footer>div{gap:20px}.eyebrow{font-size:10px}}
@media(max-width:760px){:root{--gutter:24px}.site-header{height:86px;gap:18px}.brand,.brand img{width:92px}.site-header nav{display:none}.header-contact{margin-left:auto;padding:9px 13px;font-size:11px;gap:18px}.menu-toggle{display:flex;width:27px;height:32px;padding:5px 0;flex-direction:column;justify-content:center;gap:6px;z-index:41}.menu-toggle span{display:block;width:24px;height:1px;background:#fff;transition:transform .3s}.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}.mobile-menu{position:fixed;inset:0;z-index:29;background:#101415;padding:140px 24px 45px;display:flex;flex-direction:column;justify-content:space-between}.mobile-menu nav{display:grid;gap:22px}.mobile-menu nav a{font-size:45px;letter-spacing:-.055em;line-height:1.5;display:flex;justify-content:space-between;align-items:center}.mobile-menu nav span{font-size:12px;letter-spacing:0}.mobile-menu>.contact-email{font-size:20px}.site-header.menu-open{position:fixed}.hero{height:auto;min-height:850px;padding:132px 24px 38px;display:flex;flex-direction:column}.hero-topline .hero-coordinate{display:none}.hero h1{font-size:18.8vw;line-height:1.1;margin:35px -8px 0;letter-spacing:-.08em;text-align:left}.hero-composition{grid-template-columns:1fr;gap:28px;margin-top:35px}.hero-thought{font-size:14px;line-height:1.65;grid-row:1}.reel-window{grid-row:2;aspect-ratio:1.38;margin:0 -7px}.hero-scroll{grid-row:3;justify-self:end;margin-bottom:0;font-size:9px;gap:30px}.hero-scroll br{display:none}.hero-scroll span:first-child{white-space:pre}.hero-bottom{position:static;margin-top:15px;gap:15px;font-size:11px;align-items:end}.depth-counter{display:none}.hero-ocean{background-position:62% top}.hero-bottom p{max-width:280px}.reel-play{left:18px;bottom:21px;gap:11px}.reel-play>span:last-child{font-size:16px}.play-disc{width:42px;height:42px}.reel-play small{font-size:7px}.reel-caption{font-size:8px;top:15px;left:18px}.video-pause{right:18px;bottom:23px;width:34px;height:34px}.intro-section{padding:55px 24px 75px}.section-kicker{gap:20px;align-items:start}.section-kicker .eyebrow:last-child:not(:first-child){text-align:right;max-width:145px}.asterisk{font-size:28px}.intro-statement{font-size:13.8vw;margin:55px 0 45px;line-height:1.08}.intro-detail{grid-template-columns:1fr;margin-left:0;gap:25px}.intro-detail>p{font-size:22px}.intro-detail>div{padding-left:16%}.intro-detail>div p{font-size:14px}.work-section{padding:0 24px 65px}.work-section>.section-kicker{padding-top:25px}.section-heading{display:block;margin:40px 0}.section-heading h2{font-size:11.5vw}.section-heading>p{font-size:13px;margin-top:25px}.work-grid{gap:40px;grid-template-columns:1fr}.work-card:nth-child(even){margin-top:0}.work-image-wrap,.work-card:nth-child(3n+2) .work-image-wrap{aspect-ratio:1.13}.work-caption{padding-top:14px}.work-caption h3{font-size:22px}.work-caption p{font-size:11px}.view-project{opacity:1;transform:none;font-size:10px;padding:9px 12px;right:12px;bottom:12px;gap:16px}.work-footnote{display:block;padding-top:55px;font-size:13px}.work-footnote a{display:inline-block;margin-top:20px}.expertise-section{padding:60px 24px 70px}.expertise-section .section-heading h2{font-size:12vw}.services{margin-top:45px}.service summary{gap:15px;padding:27px 0}.service-no{width:23px;font-size:10px}.service h3{font-size:6.1vw;letter-spacing:-.05em}.service-icon{width:18px;height:18px}.service-icon:before,.service-icon:after{width:15px;top:8px}.service-body{display:block;margin:0 0 30px 38px}.service-body p{font-size:14px}.service-body ul{margin-top:20px;font-size:12px}.service-body .text-link{margin-top:15px}.approach-section{display:block}.approach-scene{height:650px;min-height:0;position:relative}.approach-scene-content{padding:50px 24px}.approach-scene h2{font-size:15vw;margin-top:60px}.approach-scene-content>p{font-size:15px}.depth-meter{right:36px;bottom:60px}.approach-steps{padding:15px 24px 30px}.approach-step{padding:45px 0;min-height:0}.approach-step h3{font-size:45px;line-height:1.12}.approach-step p{font-size:14px;max-width:none}.step-outcome{margin-top:25px}.company-section{display:block;padding:60px 24px 70px}.company-section h2{font-size:11vw;margin:40px 0 30px}.company-copy{display:block;font-size:14px}.company-copy p{margin:20px 0}.company-signature{display:block;margin-top:30px;font-size:36px}.contact-section{padding:50px 24px 65px;min-height:700px}.contact-section h2{font-size:12.5vw;margin:65px 0 50px;line-height:1.13}.contact-row{display:block}.big-email{font-size:7.5vw;justify-content:space-between;gap:25px;padding-bottom:15px}.contact-row p{font-size:13px;margin-top:35px}.brief-button{font-size:11px;gap:25px;margin-top:25px}.site-footer{padding:30px 24px;gap:25px}.site-footer>div{width:100%;justify-content:space-between;gap:10px;font-size:10px}.site-footer p{font-size:9px}.site-footer img{width:75px}.brief-dialog{padding:25px;max-width:calc(100% - 20px);max-height:calc(100svh - 20px)}.brief-dialog>h2{font-size:50px}.form-pair{grid-template-columns:1fr;gap:0}.project-dialog{padding:18px;max-width:calc(100% - 16px);max-height:calc(100svh - 16px)}.project-dialog .dialog-top{top:-18px;padding:15px 0}.project-dialog h2{font-size:23px}.project-bottom{font-size:12px;gap:20px}.project-bottom .text-link{font-size:12px;gap:15px}.close-dialog{gap:12px;font-size:11px}.reel-dialog{padding:15px;max-width:calc(100% - 16px)}.privacy-page h1{font-size:50px}.privacy-page{padding-top:125px}.js-motion .hero h1 span{animation-delay:.9s}.js-motion .hero h1 span:last-child{animation-delay:1s}.js-motion .reel-window{animation-delay:1.1s}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.intro-curtain{display:none!important}.reveal{opacity:1!important;transform:none!important}.particles{display:none}.hero-ocean,.reel-window,.hero h1,.approach-ocean{transform:none!important}}

/* Final hero balance: keep the film controls visible on laptop displays. */
@media(min-width:761px) and (max-width:1599px){.hero{min-height:850px;height:max(850px,108svh);padding-top:132px}.hero h1{font-size:16.8vw;margin-top:18px}.hero-composition{margin-top:4px}.reel-window{aspect-ratio:16/7.7}.hero-bottom{bottom:35px}}
.hero-ocean{background-image:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.25) 25%,#080a0b 95%),url('assets/ocean.webp')}
.hero h1 span:first-child{margin-right:.025em}
.hero h1{letter-spacing:-.06em}
.soft{color:#818680}

/* G9 cinematic colour direction: black and white interface, cyan depths. */
.hero-ocean{background-image:url('assets/ocean-surface.webp');background-position:center center}
.hero-ocean:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,5,10,.6),rgba(0,5,10,.12) 37%,#080a0b 98%)}
.ocean-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s ease;pointer-events:none}.ocean-canvas.ready{opacity:1}
.approach-ocean{background-image:url('assets/ocean-abyss.webp');background-position:65% center;opacity:1}.approach-scene:after{background:linear-gradient(90deg,rgba(0,5,10,.4),transparent 75%)}
.contact-ocean{background-image:linear-gradient(90deg,rgba(0,5,10,.85),rgba(0,5,10,.2)),url('assets/ocean-abyss.webp');background-position:center 48%;transform:none;opacity:.95}
.depth-meter i{box-shadow:0 0 12px #61d4e8;background:#b9f6ff}

/* Selected work: one sticky text panel whose content swaps while tall images scroll past. */
.work-list{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.work-panel{position:sticky;top:130px;display:grid;padding-top:4px}
.work-panel-item{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s var(--ease),transform .7s var(--ease),visibility 0s .5s}
.work-panel-item.active{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease) .15s,transform .8s var(--ease) .15s,visibility 0s}
.work-items{display:flex;flex-direction:column;gap:14vh}
.work-item-info{display:none}
.work-item-index{font:11px/1 monospace;color:#747773;display:block;margin-bottom:22px}
.work-panel h3,.work-item-info h3{font-size:clamp(32px,3.5vw,58px);letter-spacing:-.04em;line-height:1.1;margin-bottom:16px}
.work-panel p,.work-item-info p{font-size:13px;color:#676b68;margin-bottom:32px}
.work-item-cta{display:inline-flex;align-items:center;gap:20px;font-size:12px;border-bottom:1px solid currentColor;padding-bottom:8px}
.work-item-cta span{font-size:17px;transition:transform .3s}
.work-item-cta:hover span{transform:translate(3px,-3px)}
.work-item-media{aspect-ratio:1.25;max-height:70vh}
#work[data-size=compact] .work-item-media{aspect-ratio:1.55;max-height:56vh}
#work[data-size=tall] .work-item-media{aspect-ratio:1;max-height:80vh}
.work-panel .work-item-desc,.work-item-info .work-item-desc{font-size:15px;line-height:1.75;color:#3c3f3d;max-width:440px;margin:0 0 32px}
.work-panel .work-item-category,.work-item-info .work-item-category{margin-bottom:18px}
[hidden]{display:none!important}
.work-item-media button{display:block;padding:0;width:100%;height:100%;text-align:left;color:var(--ink)}
.work-item-media .work-image-wrap{aspect-ratio:auto;height:100%}
.work-item-media button:hover img{transform:scale(1.055)}
.work-item-media button:hover .view-project,.work-item-media button:focus-visible .view-project{opacity:1;transform:translateY(0)}
@media(max-width:900px){
  .work-list{display:block}
  .work-panel{display:none}
  .work-items{gap:64px}
  .work-item-info{display:block;margin-bottom:24px}
  .work-item-media,#work[data-size] .work-item-media{aspect-ratio:1.15;max-height:none}
}

/* Swiss hero: flush-left title on top, full-bleed video filling the rest of the screen, information set on a 4-column grid. */
main .hero{--col:calc((100% - 2*var(--gutter))/4);height:100svh;min-height:680px;padding:0;display:flex;flex-direction:column;overflow:hidden}
main .hero-topline{margin:98px var(--gutter) 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.45);color:#fff;letter-spacing:.14em}
main .hero h1{font-size:clamp(84px,16.6vw,300px);line-height:.88;letter-spacing:-.065em;text-align:left;margin:clamp(6px,1vw,18px) 0 0 var(--gutter);padding-bottom:.1em;z-index:3;width:auto}
main .hero-composition{flex:1;min-height:0;max-width:none;display:block;position:relative;margin:0;padding:0;z-index:1;gap:0}
main .reel-window{position:absolute;inset:0;aspect-ratio:auto;margin:0;border-radius:0;box-shadow:none;transform-origin:center top;background:#0d1113}
.js-motion main .reel-window{animation:swiss-reel 1.5s var(--ease) 1.2s both}
@keyframes swiss-reel{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
main .reel-shade{background:linear-gradient(transparent 45%,rgba(0,0,0,.72))}
main .reel-caption{left:var(--gutter);top:18px}
main .reel-play{left:var(--gutter);bottom:36px}
main .video-pause{right:var(--gutter);bottom:34px}
main .hero-thought,main .hero-bottom p,main .hero-scroll{position:absolute;bottom:36px;margin:0;z-index:3;font-size:13px;line-height:1.7;color:#fff}
main .hero-thought{left:calc(var(--gutter) + var(--col));width:calc(var(--col) - 24px);align-self:auto}
main .hero-bottom{position:absolute;inset:0;z-index:3;pointer-events:none;display:block}
main .hero-bottom p{left:calc(var(--gutter) + var(--col)*2);width:calc(var(--col) - 24px);max-width:none;pointer-events:auto}
main .hero-scroll{left:calc(var(--gutter) + var(--col)*3);justify-self:auto;gap:22px;font-size:9px;letter-spacing:.15em;margin:0;bottom:34px}
main .depth-counter{position:absolute;right:var(--gutter);bottom:86px;color:#dfe8ea}
@media(max-width:1100px){main .hero{height:100svh;min-height:640px}main .hero-topline{margin-top:92px}main .hero-thought{display:none}main .hero-bottom p{left:calc(var(--gutter) + var(--col));width:calc(var(--col)*1.6)}main .hero-scroll{left:calc(var(--gutter) + var(--col)*3)}}
@media(max-width:760px){
  main .hero{height:auto;min-height:100svh;padding:0}
  main .hero-topline{margin:86px var(--gutter) 0}
  main .hero h1{font-size:19.4vw;margin:8px 0 0 var(--gutter)}
  main .hero-composition{min-height:62svh}
  main .reel-window{margin:0}
  main .hero-thought,main .hero-scroll,main .depth-counter{display:none}
  main .hero-bottom p{left:var(--gutter);right:var(--gutter);width:auto;bottom:104px;font-size:13px}
  main .reel-play{bottom:32px}
  main .video-pause{bottom:32px}
}
main .hero-ocean:after{background:linear-gradient(180deg,rgba(0,5,10,.72),rgba(0,5,10,.5) 45%,rgba(0,5,10,.88))}

/* Swiss hero, revision: the video fills the whole hero and a compact title sits on top of it. */
main .hero-composition{position:static;flex:1;z-index:auto}
main .hero-topline{position:relative;z-index:3}
main .hero h1{font-size:clamp(44px,6.4vw,118px);line-height:.92;letter-spacing:-.055em;margin-top:clamp(10px,1.4vw,24px);padding-bottom:0}
main .reel-shade{background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.1) 32%,transparent 52%,rgba(0,0,0,.72))}
main .reel-caption{display:none}
@media(max-width:1100px){main .hero h1{font-size:9.2vw}}
@media(max-width:760px){main .hero h1{font-size:15.5vw;margin-top:12px}main .hero-composition{min-height:0}}

/* Emoji-proof icons, sound control, and a proper phone layout for the hero video. */
html{font-variant-emoji:text}
.play-disc svg,.video-pause svg,.video-sound svg{display:block;width:auto;height:auto;flex:none}
.play-disc svg{width:12px;height:14px}
.video-pause,.video-sound{color:#fff}
main .video-pause{display:grid;place-items:center;padding:0}
main .video-pause span{display:grid;place-items:center;width:100%;height:100%;line-height:0}
.video-sound{position:absolute;right:calc(var(--gutter) + 52px);bottom:34px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.6);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;padding:0}
.video-sound span{display:grid;place-items:center;line-height:0}
.video-sound:hover,.video-pause:hover{background:rgba(255,255,255,.18)}
@media(max-width:760px){
  main .hero{min-height:0;height:auto;padding-bottom:0}
  main .hero-composition{position:relative;flex:none;aspect-ratio:1/1.12;min-height:0;max-height:none;margin-top:14px}
  main .reel-window{transform:none!important}
  main .reel-shade{background:linear-gradient(rgba(0,0,0,.45),transparent 30%,transparent 62%,rgba(0,0,0,.7))}
  main .reel-play{left:var(--gutter);bottom:22px}
  main .video-pause{right:var(--gutter);bottom:22px;width:40px;height:40px}
  .video-sound{right:calc(var(--gutter) + 50px);bottom:22px;width:40px;height:40px}
  main .hero-bottom{position:relative;inset:auto;pointer-events:auto;display:block;padding:26px var(--gutter) 34px;background:#080a0b}
  main .hero-bottom p{position:static;width:auto;max-width:none;font-size:14px;line-height:1.65;color:#dfe5e6}
  main .hero h1{font-size:19.4vw}
}
.sound-hint{position:absolute;right:calc(var(--gutter) + 104px);bottom:44px;z-index:3;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:0;transform:translateX(8px);transition:opacity .6s var(--ease),transform .6s var(--ease);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.sound-hint.show{opacity:1;transform:none}
@media(max-width:760px){.sound-hint{right:auto;left:var(--gutter);bottom:auto;top:16px}}

/* Phone hero, revision: small title set over the video, taller video, hint above the controls. */
@media(max-width:760px){
  main .hero h1{font-size:12.4vw;line-height:1;margin:14px 0 0 var(--gutter);padding:0;letter-spacing:-.055em}
  main .hero-composition{aspect-ratio:auto;height:calc(100svh - 150px);min-height:460px;max-height:640px;margin-top:-13vw}
  main .reel-shade{background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.15) 26%,transparent 50%,rgba(0,0,0,.72))}
  .sound-hint{left:auto;right:var(--gutter);top:auto;bottom:82px;font-size:10px}
  main .hero-bottom{padding:24px var(--gutter) 30px}
}

/* Phone hero, final: identical to desktop, the video fills the whole first screen, nav and title sit on top of it. */
@media(max-width:760px){
  main .hero{height:100svh;min-height:560px;padding:0;overflow:hidden}
  main .hero-composition{position:static;flex:1;aspect-ratio:auto;height:auto;min-height:0;max-height:none;margin:0}
  main .hero h1{margin:12px 0 0 var(--gutter)}
  main .reel-shade{background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.12) 30%,transparent 52%,rgba(0,0,0,.78))}
  main .hero-bottom{position:absolute;inset:0;padding:0;background:none;pointer-events:none;display:block}
  main .hero-bottom p{position:absolute;left:var(--gutter);right:var(--gutter);bottom:100px;width:auto;color:#fff;font-size:13px;pointer-events:auto}
  main .reel-play{bottom:30px}
  main .video-pause{bottom:30px}
  .video-sound{bottom:30px}
  .sound-hint{right:var(--gutter);left:auto;top:auto;bottom:150px}
}