@font-face{font-family:Geist;src:url(assets/geist.ttf)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:#050505;color:#f5f5f2;font-family:Geist,Arial,sans-serif}button,input,textarea,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #e7c99c;outline-offset:6px}.nav{position:fixed;top:30px;left:50%;transform:translateX(-50%);width:min(680px,calc(100% - 40px));z-index:50;background:#33312ee8;backdrop-filter:blur(24px);border-radius:11px;overflow:hidden}.nav-top{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;gap:24px}.wordmark{font-weight:700;font-size:23px;letter-spacing:-1.7px}.wordmark span{font-size:10px;vertical-align:super;letter-spacing:0;margin-left:2px}.desktop{display:flex;gap:14px;text-transform:uppercase;font-size:13px}.desktop a:hover{opacity:.6}.menu-toggle{width:22px;height:22px;padding:4px;display:grid;grid-template-columns:repeat(2,4px);gap:4px;background:none;align-content:center;justify-content:center}.menu-toggle i{width:4px;height:4px;background:white;transition:transform .4s}.nav.open .menu-toggle i{transform:rotate(45deg) scale(1.25)}#menu{height:0;visibility:hidden;transition:height .6s cubic-bezier(.22,1,.36,1),visibility .6s;padding:0 17px}#menu nav{display:flex;flex-direction:column;padding-top:30px;font-size:32px;line-height:1.25;text-transform:uppercase}#menu nav a{transform:translateY(24px);opacity:0;transition:.5s}#menu nav a:hover{color:#b8b5af;padding-left:8px}.nav.open #menu{height:235px;visibility:visible}.nav.open #menu nav a{transform:none;opacity:1}.nav.open .desktop{opacity:0;pointer-events:none}.menu-bottom{display:flex;justify-content:space-between;font-size:11px;color:#aaa;margin-top:42px;text-transform:uppercase}.hero{height:calc(100svh - 20px);min-height:640px;max-height:1200px;margin:10px;border-radius:10px;overflow:hidden;position:relative}.hero video,.shade{position:absolute;width:100%;height:100%;object-fit:cover}.shade{background:linear-gradient(180deg,#0007,#10090466 35%,#10060099)}.hero-content{position:absolute;bottom:9%;width:100%;padding:0 20px;text-align:center;display:flex;align-items:center;flex-direction:column}.symbol{height:65px;width:65px;fill:#fff;margin-bottom:28px;animation:rise 1s both}.hero h1{font-size:clamp(38px,5.1vw,94px);line-height:.96;letter-spacing:-.055em;font-weight:400;margin:0;max-width:1250px}.hero h1 span{display:block;animation:rise 1.1s both}.hero h1 span:nth-child(2){animation-delay:.13s}.hero h1 span:nth-child(3){animation-delay:.26s}.hero-tag{margin-top:32px;display:flex;align-items:center;gap:12px;background:#ffffff16;border:1px solid #b2a59888;border-radius:10px;box-shadow:0 0 0 4px #ffffff0c;padding:10px 15px;text-align:left;font-size:10px;color:#d8d3cd;animation:rise 1.3s .4s both}.hero-tag strong{font-size:14px;font-weight:400}.spark{font-size:34px}.scroll{position:absolute;bottom:22px;left:20px;right:20px;display:flex;justify-content:space-between;color:#c6c0b6;font-size:12px}.scroll span:last-child{font-size:24px;animation:bob 2s infinite}.motion{position:absolute;bottom:18px;right:58px;background:#ffffff18;border-radius:50%;height:30px;width:30px}.disciplines{padding:48px 5%;display:flex;justify-content:space-around;align-items:center;gap:20px;color:#b6b6b0;font-size:12px}.disciplines b{font-size:22px;color:#e0ded7}.section{padding:90px 30px}.section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.section-top h2{font-size:28px;font-weight:400;letter-spacing:-1px}.section-top>span,.eyebrow{font-size:11px;letter-spacing:.035em;color:#969690}.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px 14px}.project{background:none;padding:0;text-align:left}.art{height:520px;overflow:hidden;border-radius:9px;position:relative;isolation:isolate;transition:filter .5s}.art-one{background:radial-gradient(ellipse at 60% 30%,#ab8863,#463d32 50%,#171919)}.portal{position:absolute;left:24%;top:12%;width:52%;height:77%;border:16px solid #c0aa8b;box-shadow:0 0 60px #dbbd85,inset 0 0 40px #dbbd85;transform:perspective(650px) rotateY(-25deg);background:linear-gradient(140deg,#161b1b,#64564b);transition:transform 1.2s}.art-word{position:absolute;bottom:40px;left:30px;font-size:clamp(40px,5vw,90px);line-height:.85;letter-spacing:-.06em}.project-open{position:absolute;right:20px;top:20px;border:1px solid #ffffff66;border-radius:50%;width:40px;height:40px;display:grid;place-items:center;font-size:22px;transition:.4s}.project:hover .project-open{background:#fff;color:#000;transform:rotate(45deg)}.project:hover .portal{transform:perspective(650px) rotateY(15deg) scale(1.05)}.art-two{background:radial-gradient(at 70% 15%,#b14723,#32170f 55%,#170c07)}.orb{width:260px;height:260px;position:absolute;top:15%;left:26%;border-radius:50%;background:radial-gradient(circle at 30% 25%,#ffe9b9,#df592f 35%,#290c07 70%);box-shadow:25px 35px 60px #0009;animation:float 7s ease-in-out infinite}.orbit{position:absolute;top:28%;left:12%;height:140px;width:80%;border:2px solid #d6ae8277;border-radius:50%;transform:rotate(-30deg)}.project-caption{display:flex;justify-content:space-between;margin-top:14px;font-size:12px}.project-caption span:last-child{color:#888}.project-wide{grid-column:1/-1}.art-three{height:500px;background:linear-gradient(140deg,#1d272a,#647773 60%,#d4ccc0)}.huge-type{position:absolute;left:5%;top:10%;font-size:clamp(90px,17vw,260px);line-height:.8;letter-spacing:-.09em}.wave{position:absolute;border:2px solid #ddd9c6;border-radius:50%;width:60%;height:130%;left:49%;top:-20%;box-shadow:0 0 0 25px #c9c8b72b,0 0 0 60px #c9c8b72b,0 0 0 110px #c9c8b71b;transform:rotate(-25deg);transition:transform 1.5s}.project:hover .wave{transform:rotate(10deg) translateX(-20px)}.concept-note{color:#747470;font-size:11px;margin-top:24px}.about{padding-top:100px}.about h2{font-weight:400;font-size:clamp(48px,7vw,120px);letter-spacing:-.06em;line-height:.95;margin:40px 0}.about h2 span{color:#777772}.about-copy{width:44%;margin-left:50%;font-size:19px;line-height:1.45;color:#bdbdb8}.text-link{font-size:12px;border-bottom:1px solid #777;padding-bottom:8px;display:inline-block;color:#eee;margin:25px 0 70px}.services details{border-top:1px solid #333}.services details:last-child{border-bottom:1px solid #333}.services summary{display:flex;align-items:center;gap:40px;list-style:none;cursor:pointer;padding:27px 0;font-size:clamp(20px,3vw,42px);letter-spacing:-.04em}.services summary::-webkit-details-marker{display:none}.services summary>span{font-size:11px;color:#888;letter-spacing:0}.services summary b{margin-left:auto;font-weight:400}.services details[open] summary b{transform:rotate(45deg)}.services p{margin:0 10% 30px;max-width:550px;color:#aaa;line-height:1.6}.contact{padding-top:120px}.big-cta{font-weight:400;background:none;width:100%;text-align:left;position:relative;font-size:clamp(70px,13vw,210px);line-height:.85;letter-spacing:-.075em;padding:50px 0 70px;border-bottom:1px solid #333}.big-cta span{position:absolute;right:15px;top:60px;transition:transform .5s}.big-cta:hover span{transform:translate(10px,-10px)}.contact-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:30px}.contact-bottom h3{font-size:clamp(20px,3vw,42px);font-weight:400;letter-spacing:-.04em}.pill{background:#e7e6df;color:#111;border-radius:6px;padding:17px 24px;font-size:12px;display:inline-block}.pill:hover{background:#c7b99f}footer{padding:100px 25px 20px}.footer-top{display:grid;grid-template-columns:1fr 1fr 1fr;font-size:12px;min-height:150px}.footer-brand{text-decoration:underline;font-size:16px}.footer-top nav,.footer-top>div{display:flex;flex-direction:column;gap:7px}.footer-top>div{color:#8b8b86}.footer-logo{display:block;white-space:nowrap;letter-spacing:-.09em;font-size:16.5vw;line-height:1.2;font-weight:700;overflow:hidden}.footer-logo span{font-size:3vw;vertical-align:top;display:inline-block;padding-top:2.5vw;letter-spacing:0}.footer-bottom{display:flex;justify-content:space-between;font-size:10px;color:#777;padding-top:30px}.footer-bottom button{background:none;font-size:10px;color:#999}dialog{background:#1c1c19;color:#f5f5f0;border:1px solid #555;border-radius:12px;padding:45px;width:min(650px,calc(100% - 30px));max-height:90svh}dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}dialog h2{font-size:clamp(34px,5vw,64px);letter-spacing:-.055em;font-weight:400;line-height:1;margin:30px 0}dialog p{color:#a9a9a0;line-height:1.5}.close{position:absolute;right:15px;top:10px;background:none;font-size:30px}form{display:grid;gap:18px;margin-top:25px}label{display:grid;gap:8px;font-size:12px}input,textarea,select{width:100%;background:#292925;color:#fff;border:1px solid #50504b;padding:12px;border-radius:4px}textarea{min-height:95px;resize:vertical}.form-note{font-size:11px;margin:0}.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}@keyframes rise{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}@keyframes bob{50%{transform:translateY(5px)}}@keyframes float{50%{transform:translateY(-22px)}}@media(min-width:1600px){.nav{width:900px}.nav-top{height:70px}.desktop{font-size:16px}.hero-content{bottom:10%}}@media(max-width:700px){.nav{top:20px;width:calc(100% - 40px)}.desktop{display:none}.hero{min-height:650px}.hero-content{bottom:18%;padding:0 16px}.hero h1{font-size:clamp(33px,7.5vw,52px);letter-spacing:-.05em}.symbol{width:52px;height:52px;margin-bottom:30px}.hero-tag{margin-top:30px}.disciplines{padding:30px 20px;flex-wrap:wrap;font-size:9px;gap:14px}.disciplines b{font-size:13px}.disciplines b:last-of-type{display:none}.section{padding:65px 20px}.section-top{align-items:flex-start;gap:20px}.section-top h2{font-size:22px;margin-top:0}.section-top>span{font-size:9px;width:110px;text-align:right}.project-grid{grid-template-columns:1fr}.art{height:440px}.project-wide{grid-column:auto}.art-three{height:400px}.huge-type{font-size:27vw;top:23%}.about-copy{width:100%;margin-left:0;font-size:17px}.about h2{font-size:12vw}.services summary{gap:18px}.big-cta{font-size:17vw;padding:40px 0}.big-cta span{top:38px;font-size:45px;right:0}.contact-bottom{align-items:flex-start;gap:20px;flex-direction:column}footer{padding:60px 20px 20px}.footer-top{grid-template-columns:1fr 1fr;gap:35px;font-size:10px}.footer-top>div{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}.footer-logo{margin-top:50px;font-size:15.8vw}.footer-bottom{font-size:8px}dialog{padding:32px 22px}.menu-bottom{font-size:9px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* Keep the requested headline on exactly two lines at every breakpoint. */
.hero h1{font-size:clamp(24px,4.65vw,86px);max-width:94%;width:100%}.hero h1 span{white-space:nowrap}
@media(max-width:700px){.hero h1{font-size:4.65vw;max-width:100%;letter-spacing:-.05em}}

.nav{background:rgba(61,61,61,.4);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}.wordmark{display:flex;align-items:center}.wordmark img{display:block;width:105px;height:auto}.symbol.brand-symbol{width:145px;height:auto;margin-bottom:32px}.footer-brand img{width:130px;height:auto}.footer-logo img{display:block;width:100%;height:auto}.footer-logo{margin:45px auto 0;max-width:900px}@media(max-width:700px){.wordmark img{width:92px}.symbol.brand-symbol{width:120px}}

/* Refined hero scale and smaller navigation branding. */
.wordmark img{width:84px}.hero h1{font-size:clamp(22px,3.4vw,63px)}
@media(max-width:700px){.wordmark img{width:74px}.hero h1{font-size:3.6vw}}

.hero-content{bottom:16%}.nav-top{justify-content:center}.motion{right:20px}

.nav-top{justify-content:space-between}

.immersive{height:100svh;min-height:720px;position:relative;isolation:isolate;overflow:hidden;margin:10px;border-radius:10px;background:radial-gradient(ellipse at 25% 65%,#e25b24,transparent 50%),radial-gradient(ellipse at 75% 30%,#647891,#0a0c12 65%);--lens-x:50%;--lens-y:50%;--lens-r:125px;cursor:crosshair}.immersive canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}.immersive-top,.immersive-bottom{position:absolute;left:4%;right:4%;display:flex;justify-content:space-between;gap:25px}.immersive-top{top:40px;font-size:10px;letter-spacing:.04em}.immersive-bottom{bottom:42px;font-size:14px;line-height:1.4}.immersive-bottom em{font-style:normal;color:#ffffff90}.explore-hint{font-size:10px;align-self:flex-end}.immersive-copy,.lens-copy{height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.immersive h2,.lens-copy p{font:400 clamp(40px,5.3vw,86px)/1.08 Geist,Arial,sans-serif;letter-spacing:-.045em;margin:0;color:#fff}.glass-lens{position:absolute;left:0;top:0;width:calc(var(--lens-r)*2);height:calc(var(--lens-r)*2);border-radius:50%;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .4s;backdrop-filter:blur(1.5px) saturate(1.5);-webkit-backdrop-filter:blur(1.5px) saturate(1.5);box-shadow:inset 2px 2px 3px #ffffff50,inset -2px -2px 5px #0008,0 5px 18px #0001;background:#10192516}.lens-active .glass-lens{opacity:1}.lens-active .immersive-copy{mask-image:radial-gradient(circle var(--lens-r) at var(--lens-x) var(--lens-y),transparent 99%,black 100%);-webkit-mask-image:radial-gradient(circle var(--lens-r) at var(--lens-x) var(--lens-y),transparent 99%,black 100%)}.lens-copy{position:absolute;left:0;top:0}.lens-copy p{transform:scale(1.12);text-shadow:-3px 0 #ff6c37,3px 0 #63b9ff,1px -1px #c6ff7e}.immersive:focus-visible{outline:1px solid #aebbd4;outline-offset:-5px}@media(max-width:700px){.immersive{min-height:640px}.immersive-top{top:32px;font-size:8px}.immersive-top span:last-child{max-width:100px;text-align:right}.immersive h2,.lens-copy p{font-size:8.4vw}.immersive-bottom{font-size:11px;bottom:30px;flex-wrap:wrap}.explore-hint{width:100%;font-size:8px}}@media(hover:none){.explore-hint{font-size:0}.explore-hint:after{content:'TOUCH TO EXPLORE ↗';font-size:9px}}@media(prefers-reduced-motion:reduce){.glass-lens{transition:none}}

/* Two-line agency statement and matching lens reveal. */
.immersive h2,.lens-copy p{font-size:clamp(34px,5.3vw,86px)}.lens-copy p{font-size:clamp(30px,4.5vw,73px)}
@media(max-width:700px){.immersive h2{font-size:7.7vw}.lens-copy p{font-size:6.3vw}}

/* Staggered editorial composition, following the supplied reference. */
.immersive h2,.lens-copy p{width:76%;max-width:1100px;text-align:left;line-height:1.12;font-size:clamp(38px,6.4vw,100px)}
.immersive h2 span,.lens-copy p span{display:block;white-space:nowrap}
.immersive h2 span:nth-child(2),.lens-copy p span:nth-child(2){margin-left:31%}
.immersive h2 span:nth-child(3),.lens-copy p span:nth-child(3){margin-left:20%}
@media(max-width:700px){.immersive h2,.lens-copy p{width:90%;font-size:8.2vw}.immersive h2 span:nth-child(2),.lens-copy p span:nth-child(2){margin-left:31%}.immersive h2 span:nth-child(3),.lens-copy p span:nth-child(3){margin-left:15%}}

/* Center the staggered composition as a group. */
.immersive h2,.lens-copy p{width:max-content;max-width:94%;text-align:center}
.immersive h2 span:nth-child(1),.lens-copy p span:nth-child(1){transform:translateX(-10%)}
.immersive h2 span:nth-child(2),.lens-copy p span:nth-child(2){margin-left:0;transform:translateX(12%)}
.immersive h2 span:nth-child(3),.lens-copy p span:nth-child(3){margin-left:0;transform:translateX(0)}
@media(max-width:700px){.immersive h2,.lens-copy p{width:max-content;max-width:90%}.immersive h2 span:nth-child(2),.lens-copy p span:nth-child(2),.immersive h2 span:nth-child(3),.lens-copy p span:nth-child(3){margin-left:0}}

.immersive h2{font-size:clamp(32px,5.4vw,86px)}@media(max-width:700px){.immersive h2{font-size:7.2vw}}

.immersive-bottom{left:26%;right:7%;display:grid;grid-template-columns:repeat(3,1fr);gap:35px;font-size:16px}.immersive-bottom strong{font-weight:600}.immersive-bottom em{color:rgba(255,255,255,.6)}@media(max-width:700px){.immersive-bottom{left:6%;right:6%;grid-template-columns:repeat(3,1fr);gap:12px;font-size:10px}}

/* Center the three bottom descriptions with even spacing. */
.immersive-bottom{left:8%;right:8%;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;text-align:center;align-items:start}.immersive-bottom>span{display:block}
@media(max-width:700px){.immersive-bottom{left:5%;right:5%;gap:16px;text-align:center}}

/* Smaller statement and supporting copy, with a stronger second-line offset. */
.immersive h2{font-size:clamp(28px,4.6vw,73px)}
.immersive h2 span:nth-child(2){transform:translateX(25%)}
.immersive-bottom{font-size:13px}
@media(max-width:700px){.immersive h2{font-size:6.3vw}.immersive-bottom{font-size:9px}}

/* Full-screen slide snapping between the hero and agency statement. */
.immersive h2 span:nth-child(2){transform:translateX(32%)}
html{scroll-snap-type:y mandatory;scroll-padding-top:10px}
.hero,.immersive{height:calc(100svh - 20px);min-height:0;max-height:none;scroll-snap-align:start;scroll-snap-stop:always}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-height:500px){html{scroll-snap-type:y proximity}.hero,.immersive{min-height:500px}}
html.sliding{scroll-snap-type:none!important;scroll-behavior:auto!important}

/* Centered menu branding and precisely aligned lens typography. */
.nav-top{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:14px}
.nav-top .wordmark{grid-column:2;grid-row:1;justify-self:center}
.nav-top .desktop{grid-column:1;grid-row:1;justify-self:start;gap:10px;font-size:11px}
.nav-top .menu-toggle{grid-column:3;grid-row:1;justify-self:end}
.immersive h2,.lens-copy p{width:18ch;max-width:94%;font-size:clamp(28px,4.6vw,73px);line-height:1.12;letter-spacing:-.045em;text-align:center}
.lens-copy p{transform:none}
.lens-copy p span:nth-child(1){transform:translateX(-10%)}
.lens-copy p span:nth-child(2){margin-left:0;transform:translateX(32%)}
.lens-copy p span:nth-child(3){margin-left:0;transform:none}
@media(max-width:700px){.nav-top .desktop{display:none}.immersive h2,.lens-copy p{width:18ch;max-width:90%;font-size:6.3vw}}

.immersive h2 span:nth-child(2),.lens-copy p span:nth-child(2){transform:translateX(22%)}

/* Clearer glass header and a direct invitation to the film. */
.nav{background:rgba(45,48,49,.15);backdrop-filter:blur(18px) saturate(135%);-webkit-backdrop-filter:blur(18px) saturate(135%);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 6px 28px rgba(0,0,0,.06)}
.nav.open{background:rgba(35,38,40,.26)}
.showreel-link{position:absolute;left:50%;bottom:135px;transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:12px 0;font-size:11px;letter-spacing:.06em;border-bottom:1px solid rgba(255,255,255,.45);z-index:2}
.showreel-link>span:last-child{font-size:25px;line-height:1;transition:transform .3s}
.showreel-link:hover>span:last-child{transform:translate(4px,-4px)}
@media(max-width:700px){.showreel-link{bottom:115px;font-size:10px}}

.showreel-link{border-bottom:0;text-decoration:none}.showreel-link>span:last-child{font-size:17px}

/* Groundwork uses lowercase across its visible interface. */
body{text-transform:lowercase}.desktop,#menu nav,.menu-bottom{text-transform:lowercase}

/* Clean lens lettering and a quiet glass showreel button. */
.lens-copy p{text-shadow:none;filter:none}
.showreel-link{padding:13px 20px;gap:14px;border:1px solid rgba(255,255,255,.23);border-radius:999px;background:rgba(255,255,255,.09);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 4px 20px rgba(0,0,0,.08);text-decoration:none;transition:background .25s,border-color .25s}
.showreel-link:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}

.country-code{text-transform:uppercase}
.showreel-link{left:auto;right:8%;bottom:125px;transform:none}
@media(max-width:700px){.showreel-link{right:5%;bottom:110px}}

.immersive{background:radial-gradient(ellipse at 25% 65%,#e25b24,transparent 50%),radial-gradient(ellipse at 75% 30%,#647891,#0a0c12 65%)}

/* Refined opening-section spacing and simple centered showreel link. */
.immersive-top{font-size:12px}
.immersive h2,.lens-copy p{position:relative;top:-30px}
.showreel-link{left:50%;right:auto;transform:translateX(-50%);background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;padding:12px 0}
.showreel-link:hover{background:transparent;border-color:transparent}
@media(max-width:700px){.immersive-top{font-size:10px}.immersive h2,.lens-copy p{top:-22px}.showreel-link{left:50%;right:auto}}

/* Match navigation labels to corner labels; lift only the showreel link. */
.nav-top .desktop{font-size:12px}
.showreel-link{bottom:150px}
@media(max-width:700px){.showreel-link{bottom:135px}}

/* Subtle showreel outline matching the glass header edge. */
.showreel-link{border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:11px 18px;background:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.showreel-link:hover{border-color:rgba(255,255,255,.3);background:transparent}

/* Services — spacious white editorial layout and numbered columns. */
.services-group{background:#fff;color:#080808;margin:10px;border-radius:10px;overflow:clip;scroll-margin-top:10px}
.service-slide{position:relative;min-height:calc(100svh - 20px);scroll-snap-align:start;scroll-snap-stop:always;padding:140px 4% 50px;box-sizing:border-box}
.service-label{position:absolute;left:3.2%;top:150px;color:#858585;font-size:10px}
.service-intro-copy{margin-left:9%;width:62%;max-width:850px}
.service-intro h2{font-size:clamp(32px,3.4vw,58px);font-weight:400;line-height:1.12;letter-spacing:-.045em;margin:0 0 28px}
.service-intro-copy p{font-size:clamp(19px,2.3vw,38px);line-height:1.25;letter-spacing:-.025em;margin:0;max-width:760px}
.service-discover{display:inline-flex;gap:30px;align-items:center;border:1px solid #161616;border-radius:40px;padding:14px 20px;font-size:11px;margin-top:42px;transition:background .3s,color .3s}
.service-discover:hover{background:#111;color:#fff}.service-page{position:absolute;left:12.5%;bottom:32px;color:#888;font-size:10px}.service-scroll{position:absolute;right:4%;bottom:30px;font-size:40px;font-weight:400}
.service-disciplines{padding-top:115px;padding-bottom:45px}.service-disciplines .service-label{top:132px}
.service-columns{margin-left:9%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-height:calc(100svh - 185px)}
.service-column{border-left:1px solid #272727;padding:0 20px;display:flex;flex-direction:column;justify-content:space-between;gap:65px}
.service-number{display:block;font-size:clamp(85px,11vw,180px);line-height:.9;letter-spacing:-.07em;font-weight:700}
.service-column h3{font-weight:400;font-size:16px;letter-spacing:-.025em;margin:18px 0 0}
.service-column ul{padding:0;margin:0;list-style:none;font-size:clamp(16px,1.75vw,28px);line-height:1.22;letter-spacing:-.03em}
.service-column li{transition:transform .3s,color .3s}.service-column:hover li{color:#409b96}.service-column:hover li:nth-child(even){transform:translateX(5px)}
.nav.on-light{color:#111;background:rgba(230,230,230,.3);border-color:rgba(0,0,0,.13)}.nav.on-light .wordmark img{filter:brightness(0)}.nav.on-light .menu-toggle i{background:#111}.nav.on-light .menu-bottom{color:#555}.nav.on-light.open{background:rgba(245,245,245,.8)}
@media(max-width:700px){.service-slide{padding:125px 6% 65px}.service-label,.service-disciplines .service-label{top:95px;left:6%;font-size:9px}.service-intro-copy{margin-left:0;width:100%}.service-intro h2{font-size:8vw}.service-intro-copy p{font-size:5.5vw}.service-discover{margin-top:30px}.service-page{left:6%;font-size:9px}.service-columns{margin-left:0;min-height:calc(100svh - 210px)}.service-column{padding:0 10px;gap:25px}.service-number{font-size:17vw}.service-column h3{font-size:11px;overflow-wrap:anywhere}.service-column ul{font-size:12px;line-height:1.5;overflow-wrap:anywhere}}
@media(max-height:600px){.service-slide{padding-top:100px}.service-intro-copy p{font-size:20px}.service-label,.service-disciplines .service-label{top:105px}.service-number{font-size:90px}.service-column{gap:35px}}

/* Gray services surface and brand-led fallback palette. */
.services-group{background:#bfc3c3}.nav.on-light{background:rgba(190,195,195,.24)}.nav.on-light.open{background:rgba(190,195,195,.72)}.service-label,.service-page{color:#555c5c}.immersive{background:radial-gradient(ellipse at 25% 65%,#409b96,transparent 65%),radial-gradient(ellipse at 75% 30%,#949799,#0a0c12 75%)}

/* Light gray service panels; avoid competing native and scripted snaps. */
.services-group{background:#eeeeec}.nav.on-light{background:rgba(235,235,233,.28)}.nav.on-light.open{background:rgba(238,238,236,.8)}
@media(hover:hover) and (pointer:fine){html{scroll-snap-type:none;scroll-behavior:auto}}
@media(hover:none){html{scroll-snap-type:y proximity}}

/* Quieter services typography and gently drawn dividers. */
.service-label,.service-disciplines .service-label{font-size:12px}
.service-intro h2{font-size:clamp(26px,2.6vw,42px)}
.service-intro-copy p{font-size:clamp(17px,1.65vw,25px);line-height:1.45;max-width:650px}
.service-number{font-size:clamp(64px,7vw,110px)}
.service-column{border-left:0;position:relative}
.service-column:before{content:'';position:absolute;left:0;top:0;width:1px;height:100%;background:#656969;transform:scaleY(0);transform-origin:top;transition:transform 1s cubic-bezier(.22,1,.36,1)}
.service-column:nth-child(2):before{transition-delay:.12s}.service-column:nth-child(3):before{transition-delay:.24s}
.service-disciplines.dividers-visible .service-column:before{transform:scaleY(1)}
@media(max-width:700px){.service-label,.service-disciplines .service-label{font-size:12px}.service-intro h2{font-size:6.5vw}.service-intro-copy p{font-size:16px}.service-number{font-size:13vw}}
@media(prefers-reduced-motion:reduce){.service-column:before{transform:scaleY(1);transition:none}}

/* Share the opening shader with the services introduction. */
.service-intro{isolation:isolate;overflow:hidden;color:#f5f5f2;background:#101514}
.service-background{position:absolute;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.service-intro:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.16);z-index:-1;pointer-events:none}
.service-intro .service-label,.service-intro .service-page{color:rgba(255,255,255,.7)}
.service-intro .service-discover{border-color:rgba(255,255,255,.5);color:#fff}
.service-intro .service-discover:hover{background:rgba(255,255,255,.12)}

/* Clearly separate the compact heading from smaller supporting copy. */
.service-intro h2{font-size:clamp(24px,2vw,32px);line-height:1.2;margin-bottom:24px}
.service-intro-copy p{font-size:14px;line-height:1.65;letter-spacing:0;max-width:560px}
@media(max-width:700px){.service-intro h2{font-size:23px}.service-intro-copy p{font-size:13px;line-height:1.6}}

/* Seamless client-logo strip using supplied artwork. */
.client-slider{position:absolute;bottom:70px;left:4%;right:4%;isolation:isolate}
.client-slider-heading{display:flex;justify-content:center;align-items:center;gap:15px;margin-bottom:18px}.client-slider h3{font-size:12px;font-weight:400;margin:0;letter-spacing:0}.client-pause{background:transparent;color:#fff;font-size:13px;padding:4px 8px;border:1px solid #ffffff26;border-radius:5px}
.client-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}.client-track{display:flex;width:max-content;animation:clientMarquee 160s linear infinite}.client-set{display:flex;flex-shrink:0;align-items:center}.client-logo{width:155px;height:65px;margin-right:35px;display:flex;align-items:center;justify-content:center}.client-logo img{width:135px;height:60px;object-fit:contain;filter:grayscale(1) brightness(1.7);mix-blend-mode:screen}.client-window:hover .client-track,.client-window:focus-within .client-track,.client-slider.paused .client-track{animation-play-state:paused}
@keyframes clientMarquee{to{transform:translateX(-50%)}}
@media(max-width:700px){.service-intro{min-height:max(calc(100svh - 20px),740px)}.client-slider{bottom:65px}.client-slider h3{font-size:11px}.client-logo{width:110px;margin-right:24px}.client-logo img{width:100px;height:48px}}
@media(max-height:650px) and (min-width:701px){.service-intro{min-height:720px}}
@media(prefers-reduced-motion:reduce){.client-track{animation:none}.client-window{overflow-x:auto}}

.client-logo{width:115px;height:48px;margin-right:34px}.client-logo img{width:94px;height:40px}.client-track{animation-duration:48s}@media(max-width:700px){.client-logo{width:90px;height:42px;margin-right:26px}.client-logo img{width:78px;height:34px}}

.service-intro{background:radial-gradient(ellipse at 25% 65%,#f2ca46,transparent 60%),radial-gradient(ellipse at 75% 30%,#409b96,#101514 75%)}

/* Orange introduction; yellow animated numbered services. */
.service-intro{background:radial-gradient(ellipse at 25% 65%,#e64f0f,transparent 60%),radial-gradient(ellipse at 75% 30%,#409b96,#101514 75%)}
.service-disciplines{isolation:isolate;overflow:hidden;color:#f5f5f2;background:radial-gradient(ellipse at 25% 65%,#f2ca46,transparent 60%),radial-gradient(ellipse at 75% 30%,#409b96,#101514 75%)}
.service-disciplines .service-label{color:rgba(255,255,255,.7)}
.service-disciplines .service-column:before{background:rgba(255,255,255,.5)}
.service-disciplines .service-column:hover li{color:#fff}

.service-disciplines{background:radial-gradient(ellipse at 25% 65%,#b4babb,transparent 60%),radial-gradient(ellipse at 75% 30%,#409b96,#101514 75%)}

/* One pinned shader behind both services panels. */
.services-group{position:relative;isolation:isolate;background:#101514;overflow:clip}
.services-backdrop{position:sticky;top:10px;height:calc(100svh - 20px);margin-bottom:calc(-100svh + 20px);z-index:-1;pointer-events:none}
.services-backdrop canvas{display:block;width:100%;height:100%}
.service-intro,.service-disciplines{background:transparent;isolation:auto}
.service-intro:after{display:none}
.services-backdrop{z-index:0}.service-intro,.service-disciplines{z-index:1}

/* The film rises over the pinned opening section like a stacked card. */
.opening-stack{position:relative;display:flow-root;isolation:isolate}
.opening-stack>.immersive{position:sticky;top:10px;z-index:0}
.opening-stack>.hero{position:relative;z-index:1;background:#080908;box-shadow:0 -16px 55px rgba(0,0,0,.3)}
.services-group{z-index:2}

/* Free scrolling: no section snap or scripted wheel interception. */
html,html.sliding{scroll-snap-type:none!important;scroll-behavior:smooth!important}
.hero,.immersive,.service-slide{scroll-snap-align:none;scroll-snap-stop:normal}
@media(prefers-reduced-motion:reduce){html,html.sliding{scroll-behavior:auto!important}}

html.showreel-scrolling{scroll-behavior:auto!important}

/* Compact service numbering. */
.service-number{font-size:42px;letter-spacing:-.04em;line-height:1}
@media(max-width:700px){.service-number{font-size:32px}}

/* Slower, staggered service divider reveal. */
.service-column:before{transition-duration:2.2s}.service-column:nth-child(2):before{transition-delay:.3s}.service-column:nth-child(3):before{transition-delay:.6s}
@media(prefers-reduced-motion:reduce){.service-column:before{transition:none}}

/* Keep the video pinned while the about card slides over it. */
.opening-stack>.hero{position:sticky;top:10px;z-index:1}.opening-stack>.services-group{position:relative;z-index:2;box-shadow:0 -16px 55px rgba(0,0,0,.3)}

/* Keep the lens reveal sharp while softly defocusing the surrounding heading. */
.immersive-copy h2{transition:filter .3s ease,opacity .3s ease}
.immersive.text-focused .immersive-copy h2{filter:blur(3px);opacity:.45}
.immersive .lens-copy p{filter:none;opacity:1}
@media(prefers-reduced-motion:reduce){.immersive-copy h2{transition:none}}

/* Horizontal about-to-services sequence, separate from the video stack. */
.opening-stack>.hero{position:relative;top:auto}
.services-group{height:calc(200svh - 40px);overflow:clip;box-shadow:none}
.service-panels{position:sticky;top:10px;display:flex;width:200%;height:calc(100svh - 20px);will-change:transform;z-index:1}
.service-panels>.service-slide{flex:0 0 50%;width:50%;height:calc(100svh - 20px);min-height:0;overflow-y:auto}
@media(max-width:700px){.services-group{height:calc(200svh - 40px)}.service-panels>.service-slide{padding-top:125px}.service-intro-copy{padding-bottom:200px}}

.menu-socials{display:flex;align-items:center;gap:18px;font:inherit;color:inherit}.menu-socials span{white-space:nowrap}@media(max-width:700px){.menu-bottom{flex-wrap:wrap;gap:15px}.menu-socials{gap:14px}}

/* Contact: a quiet, luminous invitation to start something. */
.contact-studio{position:relative;isolation:isolate;overflow:hidden;background:#101919;color:#e9e9e3;margin:10px;border-radius:12px;padding:110px 6% 30px;min-height:calc(100svh - 20px);--contact-x:75%;--contact-y:35%}
.contact-glow{position:absolute;inset:-20%;z-index:-1;background:radial-gradient(ellipse at var(--contact-x) var(--contact-y),#409b9645,transparent 44%),radial-gradient(ellipse at 5% 100%,#a0aaaa18,transparent 55%);pointer-events:none}
.contact-kicker{display:flex;justify-content:space-between;font-size:12px;color:#a1aeab}.contact-title-wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:65px 0 40px}.contact-studio h2{font-weight:400;font-size:clamp(48px,7.5vw,120px);line-height:1.02;letter-spacing:-.065em;margin:0}.contact-studio h2 em{font-family:Georgia,serif;font-weight:400;color:#b5c9c4}.contact-studio h2>span{color:#71b6af}.contact-orbit{flex-shrink:0;width:175px;height:175px;border-radius:50%;background:linear-gradient(145deg,#ffffff12,#ffffff02);border:1px solid #b5cfca55;box-shadow:inset 0 1px 0 #ffffff25;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:13px;transition:background .4s,box-shadow .4s;position:relative}.contact-orbit:before{content:'';position:absolute;inset:-12px;border:1px solid #b5cfca14;border-radius:50%;transition:inset .4s}.contact-orbit:hover{background:#409b9633;box-shadow:0 0 70px #409b961a,inset 0 1px 0 #ffffff30}.contact-orbit:hover:before{inset:-20px}.contact-orbit span{font-size:12px}.contact-orbit b{font-size:39px;font-weight:400;transition:transform .3s}.contact-orbit:hover b{transform:translate(4px,-4px)}.contact-orbit small{font-size:9px;color:#a2b4af}.contact-bottom-row{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:20px 0 65px}.contact-bottom-row p{font-size:14px;line-height:1.7;color:#a2b4af;margin:0}.contact-note{font-size:11px;color:#bac7c3;display:flex;gap:9px;align-items:center}.contact-note i{width:5px;height:5px;border-radius:50%;background:#75c2ae;box-shadow:0 0 12px #75c2ae80}.contact-signoff{border-top:1px solid #d5e3dc22;padding-top:22px;display:flex;justify-content:space-between;font-size:11px;color:#b4bfba}.contact-signoff>span{font-weight:600;letter-spacing:-.04em;font-size:18px}.contact-signoff a{align-self:center}.brief-panel{border-top:1px solid #d5e3dc33;padding:35px 0 50px;max-width:980px;margin:auto;animation:rise .5s both}.brief-panel[hidden]{display:none}.brief-panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;color:#a4b9b2;font-size:13px}.brief-close{background:none;font-size:27px}.brief-fields{display:grid;grid-template-columns:1fr 1fr;gap:35px}.contact-studio form{margin:0;gap:30px}.contact-studio label{font-size:12px;color:#c2ccc6;gap:12px}.contact-studio input,.contact-studio textarea{background:transparent;border:0;border-bottom:1px solid #c6d7ce44;border-radius:0;padding:12px 0;outline-offset:5px;font-size:16px;color:#fff;text-transform:none}.contact-studio textarea{min-height:85px}.contact-studio input::placeholder,.contact-studio textarea::placeholder{color:#81918a}.contact-studio fieldset{padding:0;border:0;margin:0}.contact-studio legend{font-size:12px;color:#c2ccc6;margin-bottom:15px}.interest-options{display:flex;flex-wrap:wrap;gap:9px}.interest-options label{position:relative;cursor:pointer}.interest-options input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0}.interest-options span{border:1px solid #becdc133;border-radius:30px;padding:11px 18px;font-size:12px;transition:.2s}.interest-options input:checked+span{background:#b7d0c6;color:#11241d;border-color:#b7d0c6}.interest-options input:focus-visible+span{outline:2px solid #e6eddb;outline-offset:3px}.brief-submit-row{display:flex;gap:24px;align-items:center}.brief-submit-row button{padding:15px 24px;border-radius:30px;background:#c1d4cc;color:#0e231b;display:flex;gap:36px;font-size:12px;white-space:nowrap}.brief-status{font-size:10px;color:#8fa79c;max-width:330px;line-height:1.5;margin:0}.contact-studio:has(.brief-panel:not([hidden])) .contact-orbit{background:#409b9633}
@media(max-width:700px){.contact-studio{padding:105px 6% 25px}.contact-kicker{font-size:9px;gap:20px}.contact-title-wrap{padding:55px 0 35px;gap:35px;align-items:flex-start;flex-direction:column}.contact-studio h2{font-size:12vw}.contact-orbit{width:125px;height:125px;align-self:flex-end;gap:8px}.contact-orbit span{font-size:10px}.contact-orbit b{font-size:30px}.contact-orbit small{font-size:8px}.contact-bottom-row{flex-direction:column;align-items:flex-start;padding:0 0 40px;gap:25px}.contact-bottom-row p{font-size:12px}.brief-fields{grid-template-columns:1fr;gap:26px}.brief-submit-row{align-items:flex-start;flex-direction:column}.contact-signoff{font-size:9px}}
@media(prefers-reduced-motion:reduce){.brief-panel{animation:none}.contact-orbit,.contact-orbit:before,.contact-orbit b{transition:none}}

/* Spacious social row in the glass menu. */
.menu-bottom{align-items:center;gap:24px;font-size:15px;color:#d8dcda;margin-top:36px;padding-bottom:24px}.menu-socials{gap:22px}.menu-start{margin-left:auto;white-space:nowrap}.nav.open #menu{height:260px}@media(max-width:700px){.menu-bottom{font-size:12px;gap:20px}.menu-socials{gap:14px;flex-wrap:wrap}.menu-start{margin-left:auto}.nav.open #menu{height:280px}}

/* The page moves above the pinned footer, uncovering it on the final scroll. */
body>main{position:relative;z-index:1;background:#050505;display:flow-root}
.reveal-footer{position:sticky;bottom:0;z-index:0;background:#050505;padding:36px 30px 42px;min-height:230px;display:flex;align-items:center}
.reveal-footer-grid{width:100%;border-top:1px solid #ffffff30;padding-top:32px;display:grid;grid-template-columns:1.5fr 1.5fr 1fr auto;align-items:start;gap:35px;font-size:14px;line-height:1.7}
.reveal-footer-brand img{width:100px;height:auto;display:block}.reveal-footer-grid nav,.reveal-footer-socials{display:flex;flex-direction:column;align-items:flex-start}.reveal-footer-grid a{transition:color .25s}.reveal-footer-grid a:hover{color:#82bcb6}.reveal-footer-socials span{color:#a1a5a3}.footer-whatsapp{align-self:center;display:flex;align-items:center;gap:10px;padding:13px 20px;background:#242726;border:1px solid #ffffff12;border-radius:10px;white-space:nowrap;font-size:15px}.footer-whatsapp svg{width:25px;height:25px}.contact-signoff{display:none}
@media(max-width:700px){.reveal-footer{min-height:310px;padding:25px 24px 30px}.reveal-footer-grid{grid-template-columns:1fr 1fr;gap:24px;font-size:12px;padding-top:25px}.reveal-footer-brand img{width:85px}.reveal-footer-socials{grid-column:1;grid-row:2}.footer-whatsapp{white-space:normal;font-size:12px;padding:10px 12px;gap:6px}.footer-whatsapp svg{flex-shrink:0;width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.reveal-footer{position:relative}}

/* Minimal contact: typography, space, and two direct ways to connect. */
.contact-minimal{background:#e6e8e5;color:#192a28;min-height:580px;padding:65px 6% 45px;display:flex;flex-direction:column;justify-content:space-between;gap:65px}
.minimal-contact-label{font-size:12px;color:#53635f}.minimal-contact-main{padding:0}.contact-minimal h2{font-family:Geist,Arial,sans-serif;font-size:clamp(46px,6vw,86px);font-weight:400;letter-spacing:-.055em;line-height:1.1;margin:0 0 25px}.minimal-email{display:inline-flex;align-items:center;gap:40px;font-size:clamp(19px,2.3vw,30px);letter-spacing:-.035em;padding:0 0 9px;border-bottom:1px solid #192a2850;transition:color .25s,border-color .25s}.minimal-email span{font-size:23px;transition:transform .25s}.minimal-email:hover{color:#34847e;border-color:#34847e}.minimal-email:hover span{transform:translate(3px,-3px)}.minimal-contact-bottom{display:flex;justify-content:space-between;align-items:end;gap:25px;font-size:12px;line-height:1.6;color:#53635f}.minimal-contact-bottom a:hover{color:#192a28}
@media(max-width:700px){.contact-minimal{min-height:520px;padding:55px 7% 35px;gap:60px}.minimal-contact-bottom{align-items:flex-start;flex-direction:column;font-size:11px}.minimal-email{gap:25px}}
/* Keep the footer reveal close to the contact card. */
.reveal-footer{min-height:170px;padding:12px 30px 24px;align-items:flex-start}.reveal-footer-grid{padding-top:22px}
@media(max-width:700px){.reveal-footer{min-height:250px;padding:10px 24px 24px}.reveal-footer-grid{padding-top:20px;gap:20px}}

.contact-minimal h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.045em;margin-bottom:22px}

.reveal-footer-grid{grid-template-columns:1.5fr 1.5fr 1fr}@media(max-width:700px){.reveal-footer-grid{grid-template-columns:1fr 1fr}.reveal-footer-socials{grid-column:2;grid-row:2}}
/* Smaller links in the expanded navigation. */
#menu nav{font-size:23px;line-height:1.4}.nav.open #menu{height:225px}
@media(max-width:700px){#menu nav{font-size:21px}.nav.open #menu{height:245px}}

/* Services slides over the stationary about panel; one continuous background. */
.service-panels{display:block;width:100%;transform:none!important;isolation:isolate;--stack-progress:0}
.service-panels>.service-slide{position:absolute;inset:0;width:100%;height:100%;margin:0;flex:none}
.service-panels>.service-intro{z-index:1;will-change:clip-path}
.service-panels>.service-disciplines{z-index:2;transform:translateX(100%);will-change:transform;border-left:0;box-shadow:none}

.video-sound{position:absolute;bottom:18px;right:62px;z-index:2;display:flex;align-items:center;gap:10px;height:30px;padding:0 13px;border:1px solid #ffffff35;border-radius:30px;background:#ffffff12;backdrop-filter:blur(12px);color:#fff;font-size:11px;text-transform:lowercase;transition:background .2s}.video-sound:hover{background:#ffffff25}.video-sound span{font-size:15px}

.video-sound{width:30px;padding:0;justify-content:center;gap:0}.video-sound svg{display:block;width:17px;height:17px}

/* Scroll-linked crossfade softens the horizontal stack without delayed scrolling. */
.service-panels>.service-intro{will-change:opacity}.service-panels>.service-disciplines{opacity:0;will-change:transform,opacity}

/* Compact service lists. */
.service-column ul{font-size:14px;line-height:1.6;letter-spacing:-.01em}
@media(max-width:700px){.service-column ul{font-size:11px;line-height:1.6}}

/* Give the sequential fade more scroll distance and slightly larger service text. */
.services-group{height:calc(240svh - 48px)}
.service-column ul{font-size:17px;line-height:1.5}
@media(max-width:700px){.service-column ul{font-size:13px;line-height:1.5}}

/* Stationary, sequential dissolve: no sideways drift during the fade. */
.service-panels>.service-disciplines{transform:none;will-change:opacity}
.services-group{height:calc(220svh - 44px)}

.client-slider-heading{justify-content:flex-start;text-align:left}.client-slider h3{font-size:16px;text-align:left}.client-slider h3 span{display:inline-block;margin-left:12px}@media(max-width:700px){.client-slider h3{font-size:14px}}

/* Match the client heading to the intro text column. */
.client-slider-heading{margin-left:9%;margin-bottom:32px}.client-slider h3{display:flex;align-items:center;gap:16px}.client-slider h3 span{margin-left:0;font-size:23px;line-height:1;font-weight:400}.client-slider{bottom:85px}
@media(max-width:700px){.client-slider{left:6%;right:6%;bottom:75px}.client-slider-heading{margin-left:0;margin-bottom:28px}.client-slider h3{gap:12px}.client-slider h3 span{font-size:21px}}
/* A soft, pointer-following wash on the minimal contact card. */
.contact-minimal{--contact-x:50%;--contact-y:50%;isolation:isolate}.contact-minimal:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 420px 320px at var(--contact-x) var(--contact-y),rgba(64,155,150,.26),rgba(64,155,150,.08) 45%,transparent 75%);opacity:0;transition:opacity .65s ease}.contact-minimal.pointer-active:before{opacity:1}
@media(prefers-reduced-motion:reduce){.contact-minimal:before{transition:none;background:radial-gradient(ellipse at center,rgba(64,155,150,.16),transparent 75%)}}

.client-logo img{mix-blend-mode:normal}.client-logo img.logo-alpha-source{filter:brightness(0) invert(1)}.client-logo img.logo-dark-source{filter:url(#white-logo)}.client-track{animation-duration:80s}

.client-logo img.logo-paper-source{filter:url(#paper-logo)}
/* Keep contact copy on the same content grid as the about section. */
.contact-minimal{padding-left:12.28%;padding-right:12.28%}
@media(max-width:700px){.contact-minimal{padding-left:6%;padding-right:6%}}
.contact-minimal{padding-left:calc(12.28% - 2.456px);padding-right:calc(12.28% - 2.456px)}
@media(max-width:700px){.contact-minimal{padding-left:calc(6% - 1.2px);padding-right:calc(6% - 1.2px)}}

/* Trimmed artwork: consistent visible bounds rather than original file canvases. */
.client-logo{width:136px;height:48px;margin-right:38px}.client-logo img.logo-alpha-source,.client-logo img.logo-dark-source,.client-logo img.logo-paper-source{width:112px;height:40px;object-fit:contain;filter:none;mix-blend-mode:normal}@media(max-width:700px){.client-logo{width:114px;height:44px;margin-right:28px}.client-logo img.logo-alpha-source,.client-logo img.logo-dark-source,.client-logo img.logo-paper-source{width:96px;height:36px}}

.client-logo img.logo-alpha-source,.client-logo img.logo-dark-source,.client-logo img.logo-paper-source{height:var(--logo-height,40px)}@media(max-width:700px){.client-logo img.logo-alpha-source,.client-logo img.logo-dark-source,.client-logo img.logo-paper-source{height:min(var(--logo-height,36px),42px)}}
/* Section labels share the outer left rail; contact content keeps its text column. */
.contact-minimal .minimal-contact-label{position:absolute;left:3.2%;top:65px}.contact-minimal .minimal-contact-main{margin-top:65px}
@media(max-width:700px){.contact-minimal .minimal-contact-label{left:6%;top:55px}.contact-minimal .minimal-contact-main{margin-top:45px}}
/* A small directional nudge draws attention to the showreel. */
@keyframes showreelArrowNudge{0%,65%,100%{transform:translate(0,0)}32%{transform:translate(4px,-4px)}}
.showreel-link>span:last-child{display:inline-block;animation:showreelArrowNudge 2.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.showreel-link>span:last-child{animation:none}}

/* Slightly smaller logos, retaining their balanced proportions and spacing. */
.client-logo img{transform:scale(.88)}
/* Work: a restrained video grid, on the same editorial grid as about. */
.selected-work{position:relative;margin:10px;border-radius:12px;background:#151c1b;color:#eef0eb;padding:100px 4% 90px}.work-label{position:absolute;left:3.2%;top:108px;font-size:12px;color:#aab5b1}.work-content{margin-left:9%}.work-intro{display:flex;justify-content:space-between;align-items:start;gap:25px;margin-bottom:48px}.work-intro h2{font-weight:400;font-size:clamp(24px,2vw,32px);line-height:1.2;letter-spacing:-.045em;margin:0}.work-intro p{font-size:12px;line-height:1.6;color:#aab5b1;margin:0 4% 0 0}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px 24px}.work-media{position:relative;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#202c29}.work-card:nth-child(2n) .work-media{background:#283331}.work-media video{width:100%;height:100%;object-fit:cover;display:block}.work-slot-number{position:absolute;left:22px;top:18px;font-size:11px;color:#899e96}.work-slot-label{position:absolute;left:22px;bottom:22px;font-size:18px;color:#879b93;letter-spacing:-.03em}.work-caption{display:flex;justify-content:space-between;gap:15px;margin-top:14px;font-size:12px}.work-caption>span:last-child{font-size:10px;color:#93a39c}.work-media:has(video){background:#111}.work-card{min-width:0}
.reveal-footer{padding-left:calc(3.2% + 9.36px);padding-right:calc(3.2% + 9.36px)}
.nav.open #menu{height:260px}
@media(max-width:700px){.selected-work{padding:95px 6% 50px}.work-label{left:6%;top:48px}.work-content{margin-left:0}.work-intro{flex-direction:column;gap:18px;margin-bottom:30px}.work-intro h2{font-size:23px}.work-grid{grid-template-columns:1fr;gap:30px}.work-caption{font-size:11px}.work-slot-label{font-size:16px}.reveal-footer{padding-left:calc(6% + 8.8px);padding-right:calc(6% + 8.8px)}.nav.open #menu{height:275px}}
/* Match the services CTA to the showreel's subtle outlined glass style. */
.service-discover{display:inline-flex;align-items:center;gap:14px;padding:11px 18px;font-size:11px;letter-spacing:.06em;line-height:normal;border:1px solid rgba(255,255,255,.14);border-radius:11px;background:transparent;color:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);text-decoration:none;transition:background .25s,border-color .25s}
.service-discover:hover{border-color:rgba(255,255,255,.3);background:transparent;color:inherit}.service-discover>span{font-size:17px;line-height:1}
@media(max-width:700px){.service-discover{font-size:10px}}
/* A compact portrait-film grid with consistent brand/category captions. */
.work-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 12px}.work-media{aspect-ratio:9/16;border-radius:4px}.work-caption{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:11px;line-height:1.4}.work-caption .work-brand{font-size:12px;color:#eef0eb}.work-caption .work-category{font-size:10px;color:#93a39c}.work-slot-number{left:14px;top:14px}.work-intro{margin-bottom:32px}
@media(min-width:701px) and (max-width:1050px){.work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 10px}.work-caption .work-brand{font-size:11px}.work-caption .work-category{font-size:9px}}

.selected-work{background:#000}.work-media,.work-card:nth-child(2n) .work-media{background:#111}

/* Two counter-moving logo rows beside the about copy on desktop. */
.client-row-2{margin-top:22px}.client-row-2 .client-track{animation-direction:reverse}.client-track{animation-duration:45s}
@media(min-width:1001px){.service-intro-copy{width:43%;max-width:620px}.service-intro .client-slider{left:auto;right:4%;width:36%;top:190px;bottom:auto}.client-slider-heading{margin-left:0;margin-bottom:34px}.client-slider h3{font-size:14px;line-height:1.5;gap:12px}.client-slider h3 span{flex-shrink:0}.client-logo{margin-right:26px}.client-row-2{margin-top:35px}}
@media(max-width:1000px){.client-row-2{display:none}.client-row-1 .client-set{display:flex}.client-slider-heading{margin-bottom:28px}}
/* Desktop logo columns travel vertically in opposite directions. */
@keyframes clientVerticalMarquee{to{transform:translateY(-50%)}}
@media(min-width:1001px){
 .service-intro .client-slider{top:145px;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:26px}
 .client-slider-heading{grid-column:1/-1;margin:0}
 .client-slider .client-window{height:clamp(230px,43svh,410px);margin:0;mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
 .client-slider .client-track{width:100%;display:flex;flex-direction:column;animation:clientVerticalMarquee 42s linear infinite}
 .client-slider .client-row-2 .client-track{animation-direction:reverse}
 .client-slider .client-set{flex-direction:column;width:100%;flex-shrink:0}
 .client-slider .client-logo{width:100%;height:82px;flex:0 0 82px;margin:0}
 .client-window:hover .client-track,.client-window:focus-within .client-track{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce) and (min-width:1001px){.client-slider .client-track{animation:none}.client-slider .client-window{overflow-y:auto}.client-slider .client-set[aria-hidden="true"]{display:none}}
/* A quiet trust caption beneath the vertical logo columns. */
@media(min-width:1001px){.client-slider-heading{grid-column:1/-1;grid-row:2;justify-content:center;margin:0;padding-top:4px}.client-slider .client-row-1{grid-column:1;grid-row:1}.client-slider .client-row-2{grid-column:2;grid-row:1}.client-slider h3{font-size:12px;text-align:center;justify-content:center;color:rgba(255,255,255,.75)}}
/* Centre the about copy and logo block within the desktop viewport. */
@media(min-width:1001px){
 .service-panels>.service-intro{display:flex;align-items:center;padding-top:0;padding-bottom:0}
 .service-intro .service-intro-copy{padding-bottom:0}
 .service-intro .client-slider{top:50%;bottom:auto;transform:translateY(-50%)}
 .service-intro .service-label{top:50%;transform:translateY(-50%)}
}
/* The about label follows the heading's first line in the centred block. */
@media(min-width:1001px){.service-intro .service-intro-copy{position:relative}.service-intro .service-label{top:var(--about-heading-top,150px);transform:none}}
/* Centre the services composition, preserving left-aligned column content. */
@media(min-width:701px){
 .service-panels>.service-disciplines{display:flex;align-items:center;justify-content:center;padding:105px 4% 65px}
 .service-disciplines .service-columns{width:84%;max-width:1200px;margin:0 auto;min-height:0;height:clamp(330px,55svh,490px);grid-template-columns:repeat(3,minmax(0,1fr))}
 .service-column{text-align:left;padding:0 clamp(18px,2.2vw,36px);gap:30px}
 .service-column ul,.service-column h3,.service-number{text-align:left}
}
@media(min-width:701px){.service-disciplines .service-columns{transform:translateX(3%)}}
/* Centre the visible service content, not three oversized invisible tracks. */
@media(min-width:701px){
 .service-disciplines .service-columns{width:76%;max-width:1120px;transform:none;grid-template-columns:repeat(3,max-content);justify-content:space-between;margin:0 auto}
 .service-disciplines .service-column{padding-left:28px;padding-right:0;min-width:0}
}
@media(min-width:701px) and (max-width:1050px){.service-disciplines .service-columns{width:90%;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.service-disciplines .service-column{padding-left:16px}.service-column ul{font-size:15px}}
@media(min-width:701px){.service-disciplines .service-label{top:var(--services-number-top,150px);transform:none}}
.work-instagram-fallback{display:block;width:100%;height:100%;position:relative}.work-instagram-fallback img{width:100%;height:100%;object-fit:cover;display:block}.work-instagram-fallback span{position:absolute;bottom:16px;left:12px;right:12px;padding:12px 8px;text-align:center;font-size:11px;background:#000b;border:1px solid #ffffff30;border-radius:6px;backdrop-filter:blur(10px)}
.work-media video{cursor:pointer}.work-media video:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.work-filters{display:flex;align-items:center;gap:25px;margin:0 0 25px;border-top:1px solid #ffffff26;padding-top:18px}.work-filters button{position:relative;background:none;padding:5px 0 5px 12px;color:#8f9995;font-size:12px;text-transform:lowercase;transition:color .2s}.work-filters button:before{content:'';position:absolute;left:0;top:50%;width:4px;height:4px;background:#78b8b1;border-radius:50%;transform:translateY(-50%) scale(0);transition:transform .2s}.work-filters button[aria-pressed=true]{color:#fff}.work-filters button[aria-pressed=true]:before{transform:translateY(-50%) scale(1)}.work-filters button:hover{color:#fff}.work-filter-status{margin-left:auto;color:#87928d;font-size:10px;font-variant-numeric:tabular-nums}.work-card[hidden],.work-more[hidden]{display:none}.work-more{display:block;margin:35px auto 0;padding:11px 18px;border:1px solid #ffffff26;border-radius:11px;background:transparent;font-size:11px;color:#ddd}.work-more:hover{border-color:#ffffff70}@media(max-width:700px){.work-filters{gap:12px;flex-wrap:wrap}.work-filters button{font-size:11px}.work-filter-status{font-size:9px}}
/* Large website case studies cover one another as the page scrolls. */
.work-grid[hidden],.website-showcase[hidden]{display:none}.website-showcase{position:relative;height:250svh}.website-stage{position:sticky;top:110px;height:calc(100svh - 130px);min-height:410px;isolation:isolate;overflow:hidden;border-radius:6px}.website-panel{position:absolute;inset:0;background:radial-gradient(ellipse at 0 15%,#285b56,#101c1a 60%,#050505);clip-path:inset(100% 0 0 0)}.website-panel:first-child{clip-path:none}.website-panel:nth-child(2){background:radial-gradient(ellipse at 0 10%,#665f4f,#25241f 60%,#080908)}.website-panel:nth-child(3){background:radial-gradient(ellipse at 0 10%,#4b5c68,#182026 60%,#050505)}.website-copy{position:absolute;left:5%;top:12%;z-index:2;max-width:40%;pointer-events:none}.website-index{font-size:11px;color:#ffffff99}.website-copy h3{font-size:clamp(25px,3.5vw,48px);font-weight:400;letter-spacing:-.04em;margin:24px 0 12px}.website-copy p{font-size:11px;color:#ffffffaa}.website-frame{position:absolute;left:36%;right:8%;top:8%;bottom:10%;background:#080b0a;border-radius:4px;overflow:hidden}.website-frame video{width:100%;height:100%;object-fit:contain;cursor:pointer}.website-frame video:focus-visible{outline:2px solid #fff;outline-offset:-3px}.website-scroll-hint{position:absolute;bottom:3%;left:5%;z-index:5;color:#ffffff88;font-size:10px}
@media(max-width:700px){.website-stage{min-height:450px}.website-copy{top:5%;left:6%;max-width:88%}.website-copy h3{font-size:25px;margin:10px 0 6px}.website-frame{top:30%;left:6%;right:6%;bottom:9%}.website-copy p{font-size:10px}.website-showcase{height:240svh}}
.work-project-image{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.work-image-next{position:absolute;right:12px;bottom:12px;width:32px;height:32px;border:1px solid #ffffff55;border-radius:50%;background:#0009;color:#fff;font-size:16px}.website-frame img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}.website-panel:nth-child(3n+1){background:radial-gradient(ellipse at 0 15%,#285b56,#101c1a 60%,#050505)}.website-panel:nth-child(3n+2){background:radial-gradient(ellipse at 0 10%,#665f4f,#25241f 60%,#080908)}.website-panel:nth-child(3n){background:radial-gradient(ellipse at 0 10%,#4b5c68,#182026 60%,#050505)}

.work-image-arrow{position:absolute;bottom:12px;width:32px;height:32px;display:grid;place-items:center;padding:7px;border:1px solid #ffffff55;border-radius:50%;background:#0009;color:#fff;cursor:pointer;transition:background .2s,border-color .2s}.work-image-prev{left:12px}.work-image-next{right:12px}.work-image-arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.work-image-arrow:hover{background:#409b96cc;border-color:#ffffffaa}.work-image-arrow:focus-visible{outline:2px solid white;outline-offset:3px}

/* Project filters share the section-label rail. */
.work-filters{position:absolute;left:3.2%;top:145px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0;border:0;padding:0;max-width:9%}.work-filters button{font-size:11px;text-align:left;white-space:nowrap}.work-filter-status{margin:12px 0 0 12px}@media(max-width:700px){.work-filters{position:relative;left:auto;top:auto;max-width:none;flex-direction:row;flex-wrap:wrap;gap:12px;margin:0 0 28px}.work-filter-status{margin:5px 0 0 auto}}

.website-panel,.website-panel:nth-child(n){background:#000}.website-stage,.website-frame{background:#000}.website-project-logo{display:block;width:clamp(100px,16vw,220px);height:90px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}@media(max-width:700px){.website-project-logo{width:150px;height:50px}}

.work-filter-rail{position:absolute;left:3.2%;top:var(--work-filter-start,180px);bottom:90px;width:9%;}.work-filter-rail .work-filters{position:sticky;left:auto;top:125px;max-width:none;width:100%;}.selected-work{overflow:visible}@media(max-width:700px){.work-filter-rail{position:relative;left:auto;top:auto;bottom:auto;width:auto}.work-filter-rail .work-filters{position:relative;top:auto;width:auto}}
/* Center social gallery controls along each image's sides. */
.work-image-arrow{top:50%;bottom:auto;transform:translateY(-50%)}
/* Smaller project signatures in the website showcase. */
.website-project-logo{width:clamp(72px,8vw,110px);height:45px}
@media(max-width:700px){.website-project-logo{width:85px;height:30px}}

.website-project-logo[src$="y-design.webp"]{filter:none}

/* Display complete website screenshots without cropping. */
.website-frame img{object-fit:contain;object-position:center}.work-card[data-filters="website"] .work-project-image{object-fit:contain;object-position:center;background:#000}

/* Landscape website cards and uninterrupted client motion. */
.work-card[data-filters="website"] .work-media{aspect-ratio:2880/1610;height:auto}.client-window:hover .client-track{animation-play-state:running}
/* Normalize visible logo artwork rather than its original file canvas. */
.website-project-logo{height:56px;max-width:120px;object-fit:contain;object-position:left center}
.website-project-logo[src*="normalized-website-logo-3.png"]{filter:none}
@media(max-width:700px){.website-project-logo{height:45px;max-width:105px}}

@media(max-width:700px){
 .hero-content{bottom:11%}
 .services-group{height:auto;min-height:0}
 .service-panels{position:relative;top:auto;height:auto}
 .service-panels>.service-slide{position:relative;inset:auto;width:100%;height:auto;min-height:0;overflow:visible}
 .service-panels>.service-intro{min-height:100svh}
 .service-panels>.service-disciplines{padding:110px 6% 70px}
 .service-disciplines .service-columns{display:grid;grid-template-columns:1fr;width:100%;height:auto;min-height:0;margin:0;gap:42px;transform:none}
 .service-disciplines .service-column{padding:0 0 0 22px;gap:20px;justify-content:flex-start}
 .service-column h3{font-size:17px;margin:12px 0 0}
 .service-column ul{font-size:15px;line-height:1.65;margin:0}
 .service-number{font-size:32px}
 .service-disciplines .service-label{top:55px}
}
.work-filters button{white-space:normal;line-height:1.45;text-align:left}
.work-card[data-filters="branding"] .work-media{aspect-ratio:16/9;background:#111}
.work-card[data-filters="branding"] .work-project-image{object-fit:contain}
.work-media>a{display:block;width:100%;height:100%}
.work-grid:empty{min-height:260px}
/* Brand-only labels and compact PDF page navigation. */
.work-brand,.work-caption .work-brand{text-transform:uppercase!important}
.work-card[data-filters="branding"] .work-image-arrow{width:25px;height:25px;padding:5px;top:auto;bottom:8px;transform:none}
.work-card[data-filters="branding"] .work-image-arrow svg{width:13px;height:13px}
.work-card[data-filters="branding"] .work-image-prev{left:calc(50% - 29px);right:auto}
.work-card[data-filters="branding"] .work-image-next{left:calc(50% + 4px);right:auto}

/* Keep work filters free of numeric project counts. */
.work-filter-status{display:none!important}