:root{--paper:#232426;--ink:#f4f3ef;--line:#ffffff30;--muted:#aaa;--pad:clamp(22px,4.5vw,80px)}
body{background:#232426;color:#f4f3ef}html{scroll-padding-top:52px}.header,.header.scrolled{height:48px;position:fixed;inset:0 0 auto;padding:0 28px;background:#f5f4ef;color:#242426;box-shadow:none;border:0}.header.scrolled+.menu-panel+main{padding-top:0}.home{min-height:35px;width:220px}.home-descriptor{font-size:9px;line-height:1.25}.nav-logo{width:112px}.desktop-nav{font-size:10px;gap:26px}.contact-link{font-size:10px}.header-actions{gap:25px}.menu-toggle{min-height:42px;font-size:10px}.menu-panel{inset:48px 0 0;background:#232426;color:#f4f3ef}.hero{height:235svh;padding:0;background:#111;position:relative;margin-top:48px}.hero-pin{height:calc(100svh - 48px);position:sticky;top:48px;overflow:hidden;isolation:isolate}.film-stage{position:absolute;inset:0;height:100%;min-height:0}.film-stage video{height:100%;width:100%;object-fit:cover;object-position:center}.film-stage:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#111a,transparent 35%);pointer-events:none}.film-toolbar{position:absolute;inset:auto 28px 16px;padding:0;height:35px;z-index:4;color:#fff}.film-controls{gap:22px}.film-controls button{min-height:44px}.film-progress{bottom:-16px;background:#ffffff35}.film-progress i{background:white}.hero .vision{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:4vw var(--pad);background:linear-gradient(90deg,#151617d9,#15161760);opacity:var(--vision-opacity,0);pointer-events:none;transform:perspective(1100px) translateZ(var(--vision-z,-220px));transform-style:preserve-3d}.vision>.micro{margin-bottom:28px}.vision h1{font-weight:600;letter-spacing:-.065em;line-height:.99;font-size:clamp(52px,7.8vw,140px);text-shadow:1px 1px #777,2px 2px #666,3px 3px #444,4px 4px #333,8px 12px 25px #0009}.vision h1 span{display:block}.vision-explain{font-size:clamp(18px,2vw,30px);line-height:1.3;margin-top:32px;letter-spacing:-.035em}.vision .text-link{position:absolute;right:var(--pad);bottom:100px;pointer-events:auto}.journey{background:#232426}.journey-intro{padding-top:90px;padding-bottom:65px}.journey-intro h2{font-size:clamp(50px,7.2vw,115px);letter-spacing:-.06em;line-height:1.03;margin:40px 0 30px}.journey-intro h2 em{font-size:1.16em}.journey-intro>p{font-size:13px;line-height:1.7;color:#b7b8bb}.project-index{display:flex;gap:32px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:20px;margin-top:65px;font-size:10px;text-transform:uppercase;letter-spacing:.06em}.project-index a{display:flex;gap:25px;padding:8px 0}.case{height:320svh;position:relative;scroll-margin-top:48px}.case-pin{position:sticky;top:48px;height:calc(100svh - 48px);overflow:hidden;background:#232426;isolation:isolate}.case-lab{position:absolute;inset:0;background:linear-gradient(#15161966,#15161933),url('assets/lab-wide.webp') center/cover;opacity:var(--lab-opacity,0);transform:scale(var(--lab-scale,1))}.case-pack{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:var(--pack-opacity,1);transform:scale(var(--pack-scale,1));will-change:transform,opacity}.case-pack:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#202124b3,transparent 35%,transparent 70%,#20212433),linear-gradient(0deg,#202124b3,transparent 35%,#20212433)}.case-pack img{height:100%;width:100%;object-fit:cover;object-position:center}.case[data-model="bottle"] .case-pack img{object-fit:contain;background:#292a2b}.scene-slot{position:absolute;inset:0;opacity:var(--object-opacity,0);pointer-events:none}.scene-slot canvas{display:block;width:100%;height:100%}.case-top{position:absolute;top:27px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:25px;z-index:3}.case-intro{position:absolute;left:var(--pad);top:22%;pointer-events:none;opacity:var(--intro-opacity,1);transform:translateY(var(--intro-y,0px))}.case-intro h3{font-size:clamp(55px,9vw,150px);letter-spacing:-.07em;line-height:1.05;max-width:650px}.case-intro p{font-size:clamp(21px,2.7vw,42px);line-height:1.16;letter-spacing:-.04em;margin-top:25px}.case-instruction{position:absolute;bottom:27px;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;opacity:var(--intro-opacity,1)}.case-stage-label:before{content:'↗';margin-right:16px;font-size:16px}.case-wash{position:absolute;inset:0;background:#202124;opacity:var(--wash-opacity,0);pointer-events:none}.case-wash:after{content:'';position:absolute;inset:-40%;background:radial-gradient(ellipse at 65% 45%,var(--accent),transparent 55%);opacity:.13;transform:scale(var(--wash-scale,1))}.case-story{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:8vw;padding:clamp(85px,12vh,150px) var(--pad) 60px;align-items:center;opacity:var(--story-opacity,0);transform:translateY(var(--story-y,50px));pointer-events:var(--story-pointer,none)}.case-story h4{font-weight:500;font-size:clamp(34px,4.4vw,72px);letter-spacing:-.055em;line-height:1.08;margin:30px 0}.case-story-body>p{font-size:clamp(14px,1.3vw,18px);line-height:1.7;max-width:520px}.case-story dl{margin:25px 0 12px;max-width:530px}.case-story dl>div{display:grid;grid-template-columns:76px 1fr;gap:22px;border-top:1px solid var(--line);padding:13px 0;font-size:11px}.case-story dt{color:#aeb0b5}.case-story dd{margin:0}.case-story .text-link{font-size:11px;margin-right:25px}.skip-scene{position:absolute;bottom:20px;right:var(--pad);font-size:9px;letter-spacing:.06em;text-transform:uppercase;z-index:4;padding:10px;opacity:.7}.other-projects{padding-top:90px;padding-bottom:110px}.other-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:50px}.other-grid img{width:100%;height:440px;object-fit:contain;background:#2b2c2e}.other-grid h3{font-size:32px;letter-spacing:-.04em;margin:22px 0 12px}.other-grid p{font-size:12px;line-height:1.8;color:#bdbdc0;max-width:360px}.lab,.frequency,.contact,.footer{background:#232426;color:#f4f3ef;--line:#ffffff30}.lab{padding-top:35px}.frequency{background:#1b1c1e}.contact{background:#2c2d30}.footer{background:#191a1c}.contact h2{font-size:clamp(50px,8vw,140px)}.record-label{background:#c6c5c2}.record-disc{filter:grayscale(1)}.footer>a img{filter:none}.contact-bottom{color:#f4f3ef}.process-frame{background:#171819}.process-caption{color:white}:is(.reduced-motion,.no-webgl) .hero{height:auto}:is(.reduced-motion,.no-webgl) .hero-pin{height:calc(100svh - 48px);position:relative}:is(.reduced-motion,.no-webgl) .vision{opacity:1;transform:none}:is(.reduced-motion,.no-webgl) .case{height:auto}:is(.reduced-motion,.no-webgl) .case-pin{height:auto;position:relative;overflow:visible}:is(.reduced-motion,.no-webgl) .case-pack{position:relative;height:65svh;opacity:1;transform:none}:is(.reduced-motion,.no-webgl) .case-intro{top:70px;opacity:1;transform:none}:is(.reduced-motion,.no-webgl) .case-story{position:relative;opacity:1;transform:none;padding-top:40px;pointer-events:auto}:is(.reduced-motion,.no-webgl) .case-top{top:20px}:is(.reduced-motion,.no-webgl) .case-instruction,:is(.reduced-motion,.no-webgl) .scene-slot,:is(.reduced-motion,.no-webgl) .case-wash,:is(.reduced-motion,.no-webgl) .skip-scene{display:none}
@media(min-width:1700px){.case-story{gap:14vw}.case-pack img{object-fit:contain}}
@media(max-width:760px){.header,.header.scrolled{padding:0 18px;height:44px}.home{width:auto}.home-descriptor{font-size:8px}.nav-logo{width:100px}.desktop-nav,.contact-link{display:none}.header-actions{margin-left:auto}.menu-panel{top:44px}.hero{margin-top:44px;height:210svh}.hero-pin{top:44px;height:calc(100svh - 44px)}.film-stage video{object-fit:contain;background:#171819}.film-stage:after{background:linear-gradient(0deg,#171819cc,transparent 45%)}.film-toolbar{left:18px;right:18px;bottom:16px;font-size:8px}.film-toolbar>a{display:none}.film-controls{gap:19px}.film-clock{font-size:8px}.film-controls button{font-size:8px}.hero .vision{padding:28px;background:#18191ab8}.vision h1{font-size:clamp(43px,10.5vw,73px);line-height:1.05;letter-spacing:-.055em}.vision>.micro{font-size:8px;margin-bottom:25px}.vision-explain{font-size:20px;margin-top:28px}.vision .text-link{left:28px;right:auto;bottom:100px;font-size:10px}.journey-intro{padding-top:65px;padding-bottom:45px}.journey-intro h2{font-size:53px;margin-top:30px}.journey-intro>p{font-size:11px}.project-index{gap:10px 24px;margin-top:35px}.project-index a{font-size:9px;gap:15px}.case{height:290svh}.case-pin{top:44px;height:calc(100svh - 44px)}.case-top{top:20px;font-size:8px}.case-top span:last-child{display:none}.case-intro{top:17%;left:22px;right:22px}.case-intro h3{font-size:58px}.case-intro p{font-size:25px;max-width:230px}.case-pack img{object-fit:contain!important;background:#292a2b}.case-pack:after{background:linear-gradient(0deg,#20212466,transparent 40%,#202124a3)}.case-instruction{font-size:8px;bottom:38px}.case-instruction span:last-child{max-width:140px}.case-story{grid-template-columns:1fr;gap:16px;padding:70px 25px 55px;align-content:center;align-items:start}.case-story h4{font-size:33px;line-height:1.06;margin:14px 0 4px}.case-story h4 br{display:none}.case-story h4 br:after{content:' '}.case-story-body>p{font-size:12px;line-height:1.65}.case-story dl{margin-top:17px;margin-bottom:2px}.case-story dl>div{font-size:9px;grid-template-columns:55px 1fr;gap:14px;padding:9px 0}.case-story .text-link{font-size:9px;min-height:38px;margin-right:15px;padding:5px 0;gap:10px}.case-story>.micro{font-size:8px}.skip-scene{font-size:8px;bottom:8px}.other-grid{grid-template-columns:1fr;gap:50px}.other-grid img{height:430px}.other-grid h3{font-size:30px}.other-grid p{max-width:100%}.other-projects{padding-top:60px;padding-bottom:65px}.lab-title{margin-top:40px}.contact h2{font-size:48px}.footer-bottom{gap:15px}.footer-bottom p{font-size:8px;line-height:1.6}:is(.reduced-motion,.no-webgl) .hero-pin{height:calc(100svh - 44px)}:is(.reduced-motion,.no-webgl) .case-story{padding:35px 25px 50px}}
@media(prefers-reduced-motion:reduce){html:not(.js) .hero{height:100svh}html:not(.js) .vision{opacity:1;transform:none}html:not(.js) .case{height:auto}html:not(.js) .case-pin{position:relative;height:auto}html:not(.js) .case-story{position:relative;opacity:1;transform:none;pointer-events:auto}html:not(.js) .case-pack{position:relative;height:65vh}}
html:not(.js) .hero{height:100svh}html:not(.js) .vision{opacity:1;transform:none}html:not(.js) .case{height:auto}html:not(.js) .case-pin{height:auto;position:relative}html:not(.js) .case-pack{position:relative;height:65vh}html:not(.js) .case-story{position:relative;opacity:1;transform:none;pointer-events:auto}

.no-webgl .hero{height:auto}.no-webgl .vision{opacity:1;transform:none}

.case-intro{pointer-events:auto}.case-intro .read-story{font-size:10px;margin-top:30px;gap:50px;pointer-events:auto}.case-intro .read-story span{font-size:18px}
@media(max-width:760px){.case-intro .read-story{font-size:9px;margin-top:20px}}
@media(max-height:650px){.case-story{overflow-y:auto;align-content:start;align-items:start;padding-top:65px;padding-bottom:55px}.case-story h4{font-size:clamp(26px,4vw,45px);margin-top:15px}.case-story-body>p{font-size:12px}.case-story dl>div{padding:8px 0}.vision h1{font-size:clamp(42px,6.7vw,100px)}.vision>.micro{margin-bottom:15px}.vision-explain{margin-top:20px}.vision .text-link{bottom:65px}}

.hero .vision{transform:none}.vision h1{transform:perspective(1100px) translateZ(var(--vision-z,-220px));transform-origin:left center;will-change:transform}.film-stage{filter:brightness(var(--film-brightness,1))}:is(.reduced-motion,.no-webgl) .vision h1{transform:none}

.skip-scene{font-size:10px;opacity:1;min-height:44px;display:flex;align-items:center;background:#202124b3;padding:10px 15px;border:1px solid #ffffff40;bottom:20px}.case-intro .read-story{color:#fff;border-color:#fff}
@media(max-width:760px){.case-intro{top:75px}.case-intro h3{font-size:44px;line-height:1}.case-intro p{font-size:19px;line-height:1.15;margin-top:15px;max-width:100%}.case-intro .read-story{margin-top:12px;min-height:34px;font-size:10px}.case-pack{padding:265px 15px 75px;background:#252629}.case-pack img{background:transparent}.case-pack:after{background:linear-gradient(0deg,#20212499,transparent 35%,#202124aa 90%)}.skip-scene{font-size:9px;bottom:15px;right:22px}.case-instruction{display:none}}

.vision:before{content:'';position:absolute;inset:0;background:#232426;opacity:var(--source-logo-visible,1);pointer-events:none}.vision>.micro,.vision>h1,.vision>.vision-explain{position:relative;z-index:1}.vision>.text-link{z-index:1}
/* Keep the title in front of its scrim while its perspective changes. */
.hero .vision{transform-style:flat;color:#f8f7f4}.vision h1{color:#fff;z-index:2;text-shadow:1px 1px #b8b8b8,2px 2px #777,3px 3px #333,6px 8px 10px #0006}
.case-story{scroll-margin-top:60px}
.hero .film-stage{width:100%;min-width:0;aspect-ratio:auto;margin:0}
.hero .film-toolbar{min-height:0;height:44px;align-items:center}
@media(max-width:760px){.hero .film-controls{flex-wrap:nowrap;max-width:none;gap:14px}.hero .film-clock{width:auto;margin-top:0;white-space:nowrap}}
@media(max-width:760px){.vision h1{text-shadow:1px 1px #999,2px 2px #333,4px 5px 6px #0005}#yoleau .case-pack{align-items:flex-start;padding-top:275px}#yoleau .case-pack img{height:auto}}
@media(max-height:650px){.hero .vision{padding-bottom:80px}}