/* Scroll-directed typography and the continuous photo → object → film sequence. */
.hero,.journey{overflow-anchor:none}
.case-top{opacity:var(--meta-opacity,1)}
.motion-text{perspective:900px}.motion-word,.vision h1 .motion-word{display:inline-block;transform-origin:50% 100%;opacity:var(--word-reveal,1);transform:perspective(700px) translate3d(0,calc((1 - var(--word-reveal,1)) * .75em),calc((1 - var(--word-reveal,1)) * -65px)) rotateX(calc((1 - var(--word-reveal,1)) * -48deg));clip-path:inset(0 -8% calc((1 - var(--word-reveal,1)) * 100%));will-change:transform,opacity}
.vision h1>span{display:block}.vision h1 .motion-word{font:inherit;letter-spacing:inherit}.case-top span:last-child,.case-instruction{display:none}.case-top{font-size:9px;font-weight:400;letter-spacing:.07em}.skip-scene{background:transparent;border:0;font-size:9px;padding:10px 0;color:#fff}.case-wash:after{display:none}.case-story{gap:5vw}.case-story h4{font-size:clamp(32px,4vw,62px)}
#ciao .case-wash{background:#000}#ciao .case-story{pointer-events:none!important;display:block;z-index:5;padding:0}#ciao .case-story>div:first-child{position:absolute;top:27px;left:var(--pad);right:var(--pad)}#ciao .case-story>div:first-child>.micro{display:none}#ciao .case-story h4{font-size:28px;line-height:1.15;margin:0}#ciao .case-story-body{position:absolute;top:var(--film-caption-top,700px);left:var(--pad);right:var(--pad);pointer-events:auto;max-width:none}#ciao .case-story-body>p{font-size:13px;line-height:1.6;max-width:850px}.project-details{margin-top:12px;font-size:11px;max-width:900px}.project-details summary{cursor:pointer;min-height:38px;display:flex;align-items:center;gap:18px;list-style:none}.project-details summary:after{content:'+'}.project-details[open] summary:after{content:'−'}.project-details[open]{position:absolute;left:0;right:0;bottom:0;background:#161616;padding:20px;max-height:55svh;overflow:auto;z-index:8}.project-details dl{margin:15px 0}.project-details .text-link{font-size:11px}
.can-film{position:absolute;z-index:4;background:#000;overflow:hidden;opacity:0;pointer-events:auto;contain:layout paint;will-change:transform,width,height,border-radius}.can-film[aria-hidden=true]{pointer-events:none}.can-film-inner{position:absolute;left:50%;top:50%;width:960px;height:540px;transform-origin:center}.can-film iframe,.can-film-inner>div{display:block;width:960px;height:540px;border:0}.can-film-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:18px;color:white;background:#0006;font-size:13px;z-index:2}.can-film-play[hidden]{display:none}.can-film-play:before{content:'▷';font-size:28px}.film-unavailable .can-film-play{background:#000}
.can-film-controls{position:absolute;z-index:6;display:flex;gap:24px;align-items:center;opacity:0}.can-film-controls button{font-size:10px;min-height:40px;padding:0;color:#fff}.can-film-controls button:disabled{opacity:.4}
@media(max-width:760px){.case-top{font-size:8px}.case-story h4{font-size:32px}.case-story-body>p{font-size:12px}.case-intro h3{font-size:44px}.case-intro .read-story{font-size:9px}#ciao .case-story>div:first-child{top:25px;left:22px;right:22px}#ciao .case-story h4{font-size:25px;line-height:1.12}#ciao .case-story-body{left:22px;right:22px}#ciao .case-story-body>p{font-size:12px;line-height:1.6}.project-details{margin-top:8px}.project-details summary{min-height:36px}.can-film-play{font-size:11px}}
:is(.reduced-motion,.no-webgl) .motion-word{opacity:1!important;transform:none!important;clip-path:none!important}:is(.reduced-motion,.no-webgl) #ciao .can-film{position:relative!important;left:auto!important;top:auto!important;width:calc(100% - 44px)!important;height:auto!important;aspect-ratio:16/9;opacity:1!important;border-radius:0!important;margin:25px 22px}:is(.reduced-motion,.no-webgl) #ciao .case-story{position:relative;padding:25px var(--pad) 45px}:is(.reduced-motion,.no-webgl) #ciao .case-story>div:first-child,:is(.reduced-motion,.no-webgl) #ciao .case-story-body{position:relative;top:auto;left:auto;right:auto}:is(.reduced-motion,.no-webgl) #ciao .case-story-body{margin-top:25px}
:is(.reduced-motion,.no-webgl) #ciao .can-film-controls{position:relative!important;left:auto!important;top:auto!important;width:auto!important;margin:0 22px;opacity:1!important}
@media(prefers-reduced-motion:reduce){.motion-word{opacity:1!important;transform:none!important;clip-path:none!important}}

/* The hole remains black until a real video frame is available. */
.can-film-inner{opacity:0;transition:opacity .35s ease}.can-film.has-played .can-film-inner{opacity:1}.can-film:not(.film-interactive) .can-film-play{display:none}

html,body{overflow-x:clip}

/* Every project keeps its summary readable; supporting details open on request. */
.case:not(#ciao) .case-story-body{position:relative}.case:not(#ciao) .project-details{max-width:530px}.case:not(#ciao) .project-details[open]{box-shadow:0 -15px 50px #0006}.case:not(#ciao) .project-details summary{font-size:11px;letter-spacing:.01em}.case:not(#ciao) .project-details[open] summary{position:sticky;top:-20px;background:#161616;z-index:1}

@media(max-width:760px){.case:not(#ciao) .case-story-body{position:static}.case:not(#ciao) .project-details[open]{top:22px;bottom:58px;left:22px;right:22px;max-width:none;max-height:none;margin:0;padding:20px;overflow:auto}}

/* Separate the brand, the photograph and the volume into their own moments. */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.case-intro{left:var(--pad);right:var(--pad);top:70px;display:flex;align-items:center;justify-content:space-between;gap:30px;max-height:95px}
.case-intro h3{font-size:clamp(34px,4.5vw,64px);max-width:70%;font-weight:500;line-height:1.05}
.case-intro p{display:none}.case-intro .read-story{margin:0;gap:20px;white-space:nowrap;flex-shrink:0}
.case-pack{padding:180px var(--pad) 82px;background:#232426}.case-pack img,.case[data-model=bottle] .case-pack img{object-fit:contain;background:transparent;height:100%;width:100%}.case-pack:after{display:none}
.skip-scene{opacity:var(--skip-opacity,1);pointer-events:auto}.skip-scene:not(:focus-visible){transition:visibility 0s}.case:has(.case-intro[aria-hidden=true]):not(:has(.case-story[aria-hidden=false])) .skip-scene{visibility:hidden}
@media(max-width:760px){.case-intro{top:64px;left:22px;right:22px;gap:16px;display:block;max-height:100px}.case-intro h3{font-size:clamp(30px,8vw,40px);max-width:100%}.case-intro .read-story{margin-top:8px;min-height:32px;font-size:9px}.case-pack,#yoleau .case-pack{padding:185px 22px 78px;align-items:center}.case-pack img,#yoleau .case-pack img{height:100%;width:100%;object-fit:contain}}
:is(.reduced-motion,.no-webgl) .case-intro{position:relative;top:auto;padding:70px 0 25px;opacity:1;transform:none;max-height:none}
:is(.reduced-motion,.no-webgl) .case-pack{padding:20px var(--pad);height:55svh}

/* Authentic logo fragments open onto the original film. No overlay branding on film. */
.hero{background:#000;height:260svh}.hero-pin{background:#000}.hero .film-stage{filter:none;transform:scale(var(--film-scale,1.08));will-change:transform}.hero .film-stage:after{display:none}
.opening{position:absolute;inset:0;z-index:5;pointer-events:none}.opening-black{position:absolute;inset:0;background:#000;opacity:calc(1 - var(--opening-clear,0))}.opening-signature{position:absolute;left:12%;right:12%;top:50%;transform:translateY(-50%);opacity:var(--signature-opacity,1)}
.opening-logo{position:relative;width:100%;aspect-ratio:4072/735}.logo-fragment{position:absolute;inset:0;will-change:transform;transform-origin:50% 50%}.logo-fragment img{width:100%;height:100%;display:block}.opening-tagline{font-size:clamp(10px,1vw,14px);font-weight:400;text-align:center;letter-spacing:.26em;margin-top:38px;text-transform:uppercase;opacity:var(--tagline-opacity,1)}
.opening-scroll{position:absolute;left:50%;bottom:35px;transform:translateX(-50%);font-size:9px;letter-spacing:.09em;opacity:var(--tagline-opacity,1);pointer-events:auto;padding:12px}
.hero .film-toolbar{opacity:var(--film-reveal,0);z-index:6}.hero .film-stage video{background:#000}
@media(max-width:760px){.hero{height:245svh}.opening-signature{left:8%;right:8%}.opening-tagline{margin-top:26px;font-size:9px;letter-spacing:.19em}.opening-scroll{bottom:28px}.hero .film-stage video{object-fit:contain}}
:is(.reduced-motion,.no-webgl) .hero,html:not(.js) .hero{height:auto}
:is(.reduced-motion,.no-webgl) .hero-pin,html:not(.js) .hero-pin{position:relative;height:auto;overflow:hidden}
:is(.reduced-motion,.no-webgl) .opening,html:not(.js) .opening{position:relative;height:calc(100svh - 48px)}
:is(.reduced-motion,.no-webgl) .opening-black,html:not(.js) .opening-black{opacity:1}
:is(.reduced-motion,.no-webgl) .opening-signature,html:not(.js) .opening-signature{opacity:1}
:is(.reduced-motion,.no-webgl) .logo-fragment,html:not(.js) .logo-fragment{transform:none!important}
:is(.reduced-motion,.no-webgl) .opening-tagline,html:not(.js) .opening-tagline{opacity:1}
:is(.reduced-motion,.no-webgl) .opening-scroll,html:not(.js) .opening-scroll{display:none}
:is(.reduced-motion,.no-webgl) .hero .film-stage,html:not(.js) .hero .film-stage{position:relative;height:65svh;transform:none}
:is(.reduced-motion,.no-webgl) .hero .film-toolbar,html:not(.js) .hero .film-toolbar{position:relative;inset:auto;margin:0 22px;opacity:1}
:is(.reduced-motion,.no-webgl) .hero-pin,html:not(.js) .hero-pin{display:flex;flex-direction:column}
:is(.reduced-motion,.no-webgl) .opening,html:not(.js) .opening{order:0;flex-shrink:0}
:is(.reduced-motion,.no-webgl) .hero .film-stage,html:not(.js) .hero .film-stage{order:1;flex-shrink:0}
:is(.reduced-motion,.no-webgl) .hero .film-toolbar,html:not(.js) .hero .film-toolbar{order:2;flex-shrink:0}
.logo-fragment{inset:auto;transform-origin:center}.logo-fragment svg{display:block;width:100%;height:100%;overflow:visible}
:is(.reduced-motion,.no-webgl) .hero-pin,html:not(.js) .hero-pin{top:auto}

/* Minimal image-led sequence: copy enters only in the scroll-revealed project card. */
.home-descriptor,.desktop-nav,.contact-link,.opening-scroll,.case-top,.case-intro,.case-instruction,.skip-scene,.film-toolbar>a{display:none!important}
.case-pack,#yoleau .case-pack{padding:65px var(--pad) 65px;align-items:center}
.case-pack img,#yoleau .case-pack img{height:100%;width:100%;object-fit:contain}
.case:not(#ciao) .case-story{inset:auto var(--pad) 70px;display:block;width:min(720px,calc(100% - 2 * var(--pad)));max-height:calc(100% - 110px);padding:30px 34px;background:#171819ed;border:1px solid #ffffff18;border-radius:4px;backdrop-filter:blur(16px);color:#f4f3ef;transform:translateY(var(--story-y,50px));overflow:visible}
.case:not(#ciao) .case-story>div:first-child>.micro{display:none}
.case:not(#ciao) .case-story h4{font-size:clamp(27px,3vw,42px);margin:0 0 18px;line-height:1.08}
.case:not(#ciao) .case-story-body>p{font-size:13px;line-height:1.65;max-width:none}
.case:not(#ciao) .project-details[open]{left:0;right:0;bottom:0;max-height:70svh}
.world-eyebrow,.world-words{display:none}
.header-actions{margin-left:auto}.home{width:112px}
@media(max-width:760px){.case-pack,#yoleau .case-pack{padding:55px 22px}.case:not(#ciao) .case-story{left:18px;right:18px;bottom:32px;width:auto;padding:24px;max-height:calc(100% - 85px)}.case:not(#ciao) .case-story h4{font-size:28px;margin-bottom:14px}.case:not(#ciao) .case-story-body>p{font-size:12px}.case:not(#ciao) .project-details[open]{inset:0;max-height:none;padding:24px}}
:is(.reduced-motion,.no-webgl) .case:not(#ciao) .case-story{position:relative;inset:auto;width:auto;max-height:none;margin:20px var(--pad) 40px;transform:none;overflow:visible}

.opening-logo>.logo-whole{position:absolute;inset:0;width:100%;height:100%;opacity:var(--logo-intact,1)}.logo-fragment{opacity:var(--stroke-visible,0)}
.header:not(.scrolled){background:#000;color:#fff}.menu-label{display:none}
:is(.reduced-motion,.no-webgl) .logo-whole,html:not(.js) .logo-whole{opacity:1!important}:is(.reduced-motion,.no-webgl) .logo-fragment,html:not(.js) .logo-fragment{display:none}

/* One title and one sentence; the full context opens inside the project card. */
.case:not(#ciao) .case-story{top:50%;bottom:auto;left:50%;right:auto;width:min(640px,calc(100% - 2 * var(--pad)));transform:translate(-50%,calc(-50% + var(--story-y,50px)))}
.project-background{font-size:12px;line-height:1.65;max-width:580px;margin:12px 0 20px}
.case:not(#ciao) .project-details[open]{inset:auto 0;top:50%;max-height:calc(100svh - 100px);transform:translateY(-50%)}
@font-face{font-family:'YOLEAU Avenir';src:local('Avenir Book'),local('Avenir-Book');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'YOLEAU Avenir';src:local('Avenir Medium'),local('Avenir-Medium');font-weight:500 700;font-style:normal;font-display:swap}
#yoleau .case-story{font-family:'YOLEAU Avenir',Avenir,sans-serif}
@media(max-width:760px){.case:not(#ciao) .case-story{left:18px;right:18px;width:auto;bottom:auto;transform:translateY(calc(-50% + var(--story-y,50px)))}.case:not(#ciao) .project-details[open]{inset:auto 0;top:50%;max-height:calc(100svh - 100px);transform:translateY(-50%)}}
:is(.reduced-motion,.no-webgl) .case:not(#ciao) .case-story{inset:auto;width:auto;transform:none}

/* Scoped typography follows the actual CIAO and UMÀ site styles. */
@font-face{font-family:'CIAO Geist';src:url('assets/fonts/brands/ciao-geist-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'CIAO Franklin';src:url('assets/fonts/brands/ciao-franklin-black-italic.woff2') format('woff2');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'UMA Atlas';src:url('assets/fonts/brands/uma-atlas-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'UMA Atlas';src:url('assets/fonts/brands/uma-atlas-medium.woff') format('woff');font-weight:500 700;font-style:normal;font-display:swap}
#ciao .case-story{font-family:'CIAO Geist',sans-serif}#ciao .case-story h4{font-family:'CIAO Franklin',sans-serif;font-weight:900;font-style:italic;letter-spacing:-.02em}
:is(#uma,#uma-ipa) .case-story{font-family:'UMA Atlas',sans-serif}:is(#uma,#uma-ipa) .case-story h4{font-family:'UMA Atlas',sans-serif;font-weight:500;letter-spacing:-.035em}
@font-face{font-family:'FYLGO Figtree';src:url('assets/fonts/brands/fylgo-figtree-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'FYLGO Stylebender';src:url('assets/fonts/brands/fylgo-stylebender-retro.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
#fylgo .case-story{font-family:'FYLGO Figtree',sans-serif}#fylgo .case-story h4{font-family:'FYLGO Stylebender',sans-serif;font-weight:400;letter-spacing:0}

/* Quiet controls keep a comfortable hit area and an explicit keyboard focus. */
.project-details summary,.case:not(#ciao) .project-details summary{font-size:12px;min-height:44px;color:#f4f3ef}
.can-film-controls button{font-size:12px;min-height:44px;min-width:44px;text-align:left;color:#f4f3ef}
.project-details summary:focus-visible,.can-film-controls button:focus-visible{outline:2px solid #f4f3ef;outline-offset:4px}
@media(max-width:760px){.case:not(#ciao) .project-details[open]{max-height:calc(100svh - 144px)}}

/* The CIAO detail panel stays below the header while its longer credits scroll. */
#ciao .case-story:has(.project-details[open]){z-index:7}
#ciao .project-details[open]{position:fixed;top:50%;bottom:auto;left:var(--pad);right:var(--pad);max-width:none;max-height:calc(100svh - 144px);margin:0;transform:translateY(-50%);overflow:auto}
#ciao .project-details[open] summary{position:sticky;top:-20px;background:#161616;z-index:1}
#ciao:has(.project-details[open]) .can-film-controls{visibility:hidden}
@media(max-width:760px){#ciao .project-details[open]{left:22px;right:22px}}
/* Scene containers clip artwork without becoming hidden scrolling containers. */
.case-pin{overflow:clip}
#ciao .case-story{overflow:visible}
#ciao .case-story:has(.project-details[open])>div:first-child,#ciao .case-story:has(.project-details[open]) .case-story-body>p{visibility:hidden}