.case-study{--ivory:#F6F4EF;--ink:#1D211E;--stone:#E3D6C3;--green:#BCCF73;background:var(--ivory);color:var(--ink)}
.case-study main{overflow:clip}.case-study figure,.case-study h1,.case-study h2,.case-study p{margin:0}.case-study img{display:block;width:100%;height:100%;object-fit:cover}.case-study button{font:inherit}.case-study a:focus-visible,.case-study button:focus-visible{outline:2px solid #879b47;outline-offset:7px}.case-study em{font-family:Georgia,serif;font-weight:400}.case-study>.header{position:absolute;inset:0 0 auto;z-index:20;padding:32px 4%;color:var(--ivory);background:linear-gradient(#161913b3,transparent)}.case-study>.header .brand{font-size:21px;font-weight:300;letter-spacing:-.06em}.case-study>.header .nav{gap:38px;font-size:17px;letter-spacing:-.035em}
.cs-hero{background:var(--ink);position:relative}.cs-hero-stage{height:100svh;min-height:620px;position:relative;overflow:hidden}.case-cover{position:absolute;inset:0}.case-cover>img{object-position:center;transform-origin:50% 55%}.cs-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,#10130e30 10%,transparent 35%,#10130e80 100%);pointer-events:none}.cs-hero-meta{position:absolute;top:19%;left:5%;right:5%;display:flex;justify-content:space-between;color:var(--ivory);font-size:11px;letter-spacing:.09em;text-transform:uppercase}.cs-hero h1{position:absolute;bottom:12%;left:3%;font-size:clamp(100px,22.5vw,370px);line-height:.8;letter-spacing:-.07em;font-weight:300;color:var(--ivory);overflow:hidden}.cs-hero h1>span{display:block}.cs-hero-bottom{position:absolute;bottom:4.5%;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ivory)}.cs-hero-bottom>a{display:flex;align-items:center;gap:45px;padding:12px 0;border-bottom:1px solid #eee8d788}.cs-hero-bottom>a span[aria-hidden]{font-size:24px}.cs-scroll{position:absolute;left:49%;bottom:4.5%;height:44px;font-size:24px;color:var(--ivory)}

.cs-opening{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:45px 6%}.cs-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1.9;color:#6c7166}.cs-opening-copy{font-size:17px;line-height:1.6;max-width:550px}
.cs-scene-top{display:flex;justify-content:space-between;align-items:center;gap:22px;font-size:10px;letter-spacing:.1em;text-transform:uppercase}.cs-scene-top h2{font:inherit;line-height:1.7}.cs-scene-top>span{opacity:.55;white-space:nowrap}
.cs-screen-sequence{padding:35px 5% 30px;background:radial-gradient(ellipse at 50% 42%,#eae2d6,#d9d0c2 90%)}.cs-laptop{position:relative;width:min(100%,1140px);aspect-ratio:3824/2564;margin:-5px auto 5px}.case-study .cs-device-frame{position:relative;width:100%;height:auto;z-index:2;pointer-events:none}.cs-laptop>.cs-device-frame{filter:drop-shadow(0 23px 23px #3e34251f)}.cs-laptop-display{position:absolute;left:10.46%;top:11.7%;width:79.08%;height:76.6%;background:#171712;overflow:hidden}.cs-live-video{display:block;width:100%;height:100%;object-fit:contain;transform:translateZ(0)}.cs-screen-bottom{display:flex;justify-content:space-between;align-items:center;font-size:11px;gap:25px;color:#57594e}.cs-film-toggle{font:inherit;border:0;border-bottom:1px solid #8e927f;background:none;padding:10px 0;min-height:44px;cursor:pointer;white-space:nowrap;color:var(--ink)}.cs-film-toggle[hidden]{display:none}
.cs-mobile-sequence{background:#242720;color:#F6F4EF;padding:36px 6% 65px}.cs-phone-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,6vw,110px);max-width:1040px;margin:55px auto 0;align-items:start;outline-offset:8px}.cs-phone-item:nth-child(2){padding-top:45px}.cs-phone-device{position:relative;aspect-ratio:1406/2822;filter:drop-shadow(0 18px 22px #0005)}.case-study .cs-phone-screen{position:absolute;left:7.05%;top:3.5%;width:85.9%;height:93%;object-fit:cover;object-position:top;border-radius:13%/6.5%}.cs-phone-item figcaption{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:20px 6px 0;color:#d5d5c9}.cs-phone-item figcaption>span{font-size:9px;color:#959c86}.cs-mobile-hint{display:none}
.cs-visit{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:65px 7%;background:#F6F4EF}.cs-visit>p{font-size:clamp(27px,3.1vw,50px);line-height:1.15;letter-spacing:-.05em}.cs-visit>p>span{color:#7b836d}.cs-visit>a{display:flex;align-items:center;gap:65px;background:#BCCF73;padding:23px 29px;border-radius:2px;min-height:68px;font-size:15px;transition:background .3s}.cs-visit>a:hover{background:#cadb8c}.cs-visit>a>span[aria-hidden]{font-size:25px}
.cs-next{background:#EAE5DC;position:relative;overflow:hidden}.cs-next-link{display:block;position:relative;min-height:520px;height:65svh;max-height:1100px;padding:30px 5%;overflow:hidden}.cs-next-top{position:relative;display:flex;justify-content:space-between;gap:20px;z-index:3;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.cs-next-image{position:absolute;inset:90px 4% 50px;overflow:hidden;clip-path:inset(8% 18% 0% 18% round 45% 45% 0 0)}.cs-next-image img{object-fit:cover;object-position:center}.cs-next-image:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,#15160e70)}.cs-next-title{position:absolute;left:8%;right:8%;bottom:15%;display:flex;align-items:center;justify-content:space-between;z-index:2;color:#F6F4EF}.cs-next-title h2{font-size:clamp(100px,19vw,300px);font-weight:300;letter-spacing:-.07em;line-height:.9}.cs-next-title h2>span{color:#BCCF73}.cs-next-title>span{font-size:clamp(45px,7vw,110px);font-weight:300}.cs-next-invite{position:absolute;bottom:8%;left:8%;color:#F6F4EF;font-size:12px;z-index:2}.cs-next-link:focus-visible{outline-offset:-10px}

@media(max-width:800px){.case-study>.header{padding:25px 24px}.case-study>.header .brand{font-size:19px}.case-study>.header .menu-toggle{color:var(--ivory)}.case-study>.header .nav{background:#1D211E;padding:20px 24px;color:var(--ivory);gap:25px}.cs-hero-stage{height:80svh;min-height:540px}.cs-hero-meta{top:16%;left:24px;right:24px;font-size:9px;display:block;line-height:2}.cs-hero-meta span{display:block}.cs-hero h1{font-size:22.7vw;left:4%;bottom:18%}.cs-hero-bottom{left:24px;right:24px;bottom:6%;font-size:11px;gap:25px;align-items:flex-end}.cs-hero-bottom>span{max-width:120px;line-height:1.6}.cs-hero-bottom>a{gap:20px;white-space:nowrap}.cs-scroll{display:none}.cs-opening{padding:30px 24px;display:block}.cs-opening-copy{font-size:15px;line-height:1.65;margin-top:18px!important}.cs-opening-copy br{display:none}.cs-kicker{font-size:9px}.cs-screen-sequence{padding:26px 15px 18px}.cs-scene-top,.cs-scene-top h2{font-size:8px;letter-spacing:.06em}.cs-laptop{width:100%;margin:10px auto}.cs-screen-bottom{font-size:9px;gap:12px}.cs-screen-bottom>span{max-width:190px;line-height:1.7}.cs-film-toggle{min-height:44px}.cs-mobile-sequence{padding:26px 0 28px}.cs-mobile-sequence>.cs-scene-top{padding:0 24px}.cs-phone-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:24px;padding:10px 24px 25px;margin:28px 0 0;scroll-padding-left:24px;-webkit-overflow-scrolling:touch}.cs-phone-item{flex:0 0 68vw;max-width:270px;scroll-snap-align:start}.cs-phone-item:nth-child(2){padding-top:0}.cs-phone-item figcaption{font-size:11px;padding-top:14px}.cs-mobile-hint{display:block;font-size:9px;letter-spacing:.03em;color:#aab29e;padding:0 24px}.cs-visit{display:block;padding:34px 24px}.cs-visit>p{font-size:32px}.cs-visit>a{margin-top:24px;justify-content:space-between;padding:14px 23px;min-height:58px;font-size:14px}.cs-next-link{height:65svh;min-height:490px;padding:25px 24px}.cs-next-top{display:block;font-size:9px;line-height:1.8}.cs-next-top span{display:block}.cs-next-top span:last-child{opacity:.6}.cs-next-image{inset:95px 16px 20px}.cs-next-title{left:24px;right:24px;bottom:19%}.cs-next-title h2{font-size:27vw}.cs-next-title>span{font-size:45px}.cs-next-invite{left:26px;bottom:12%;font-size:11px}}
@media(prefers-reduced-motion:reduce){.case-study *{scroll-behavior:auto!important}.cs-next-image{clip-path:inset(0)!important}.cs-visit>a{transition:none}}

/* Longer project names keep the same compositions without overflowing. */
.case-gwenaelle .cs-hero h1{font-size:clamp(64px,15.1vw,250px)}
.case-mera .cs-next-title h2{font-size:clamp(40px,8.5vw,135px);line-height:1.05}
.case-gwenaelle .cs-opening-copy small{display:inline-block;margin-top:10px;font-size:11px;color:#6c7166}

@media(min-width:801px){.case-mera .cs-next-title{bottom:106px}.case-mera .cs-next-invite{bottom:70px}}

@media(min-width:801px){.case-study .cs-next-title{bottom:106px}.case-study .cs-next-invite{bottom:70px}}