@font-face{font-family:Poppins;src:url('assets/Poppins-Regular.ttf');font-display:swap}@font-face{font-family:Poppins;src:url('assets/Poppins-SemiBold.ttf');font-weight:600;font-display:swap}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:#e8e8e5;color:#0b0b0a;font:14px Arial,Helvetica,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}a:focus-visible,button:focus-visible{outline:1px solid;outline-offset:6px}::selection{background:#111;color:#e8e8e5}header{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:start;padding:28px 2.5%;font-size:12px;line-height:1.35;pointer-events:none}header>*{pointer-events:auto}header nav{display:flex;gap:35px}header nav a:hover,header button:hover{text-decoration:underline;text-underline-offset:4px}#journey{position:relative}.sticky-viewport{position:sticky;top:0;height:100svh;overflow:hidden}.track{display:flex;width:max-content;height:100%;will-change:transform}.panel{position:relative;flex:0 0 auto;height:100%;padding:125px 2.5vw 90px;scroll-margin-top:85px}.hero{width:100vw;padding-top:0;display:flex;align-items:center}.hero h1{font-family:Poppins,Arial,sans-serif;font-size:26.2vw;font-weight:600;letter-spacing:-.09em;line-height:1;margin:0 0 0 -1.2vw;transform:translateY(35px);white-space:nowrap}.ruler{position:absolute;left:2.5vw;right:2.5vw;bottom:90px;height:6px;border-top:1px solid #bbbbb5;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(8.333% - 1px),#bbbbb5 calc(8.333% - 1px),#bbbbb5 8.333%)}.hero-bottom{position:absolute;bottom:60px;left:2.5vw;right:2.5vw;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.5px;color:#6d6d66}.about{width:97vw;display:grid;grid-template-columns:1.1fr .85fr;gap:7vw;align-items:center;padding-left:5vw;padding-right:10vw}.eyebrow{font-size:9px;letter-spacing:.7px;display:block;line-height:1.5}h2,h3,p{margin:0;font-weight:400}.about h2{font-size:6.4vw;font-weight:600;line-height:1.04;letter-spacing:-.06em;margin-top:25px}.about-copy{padding-top:15vh}.about-copy p{font-size:17px;line-height:1.4;margin-bottom:25px;max-width:430px}.small{font-size:8px;letter-spacing:.8px;color:#66665e;display:block;margin-top:35px}.project-panels{display:contents}.project-panel{width:145vw;display:grid;grid-template-columns:30vw 1fr;gap:5vw;padding-left:6vw;padding-right:5vw}.project-intro{display:flex;flex-direction:column;justify-content:space-between;padding:4vh 0 8vh}.project-index{font-size:9px;letter-spacing:1px;display:block;margin-bottom:25px;color:#72726a}.project-intro h2{font-size:clamp(43px,4.7vw,84px);font-weight:600;letter-spacing:-.055em;line-height:1.03}.project-copy p{font-size:16px;line-height:1.4;max-width:370px;margin-bottom:30px}.project-meta{display:grid;grid-template-columns:1fr 2fr;gap:15px;margin-bottom:25px;color:#64645c;font-size:11px;line-height:1.4}.project-meta span span{display:block;font-size:8px;letter-spacing:.7px;margin-bottom:8px;color:#77776f}.project-actions{display:flex;gap:25px;font-size:11px}.project-actions button,.project-actions a{border-bottom:1px solid #aaa99f;padding-bottom:4px}.project-actions button:hover,.project-actions a:hover{border-color:#111}.project-visuals{display:flex;align-items:center;gap:3vw;overflow:hidden}.media-main{position:relative;width:55vw;height:68vh;flex:0 0 auto;overflow:hidden}.media-main img{width:100%;height:100%;object-fit:contain}.media-secondary{width:38vw;flex:0 0 auto;height:48vh;overflow:hidden;position:relative}.media-secondary img{width:100%;height:100%;object-fit:contain}.project-visuals figure{margin:0}.project-visuals figcaption{font-size:9px;margin-top:10px;color:#64645d}.leadership{width:120vw;padding-left:8vw;padding-right:8vw;display:grid;grid-template-columns:1fr 1.1fr;gap:8vw;align-items:center}.leadership h2{font-size:5vw;font-weight:600;letter-spacing:-.06em;line-height:1.06;margin-top:30px}.competencies{display:grid;grid-template-columns:1fr 1fr;gap:45px 35px}.competencies article>span{font-size:10px;color:#66665e}.competencies h3{font-size:23px;letter-spacing:-.7px;margin:14px 0}.competencies p{font-size:14px;line-height:1.45;max-width:270px}.career{width:110vw;padding-left:6vw;padding-right:8vw;display:grid;grid-template-columns:1.1fr 1fr;column-gap:8vw;align-content:center}.career>.eyebrow{grid-column:1/-1;margin-bottom:30px}.career h2{font-size:6vw;font-weight:600;letter-spacing:-.065em;line-height:1.04}.career-details{display:flex;flex-direction:column;justify-content:space-between;gap:25px}.career-details h3{font-size:21px;letter-spacing:-.7px}.career-details p{font-size:11px;margin-top:8px;color:#62625a}.agency-clients{border-top:1px solid #c6c6bd;padding-top:20px}.agency-clients>span{font-size:8px;letter-spacing:.4px}.agency-clients>p{font-size:22px;color:#111;line-height:1.3;letter-spacing:-.7px}.contact{width:100vw;padding:130px 5vw 0;overflow:hidden}.contact-head{font-size:9vw;font-weight:600;letter-spacing:-.07em;line-height:1;display:block;margin:5vh 0}.contact-head:hover{color:#62625a}.contact-info{display:flex;align-items:start;gap:7vw;font-size:13px}.contact-info>a{border-bottom:1px solid #aaa;padding-bottom:5px}.contact-info p{font-size:11px;line-height:1.4;color:#62625a}.closing-name{position:absolute;bottom:-2vw;left:4vw;font-family:Poppins,Arial,sans-serif;font-size:20vw;font-weight:600;letter-spacing:-.09em;line-height:.9;pointer-events:none}footer{position:fixed;bottom:0;left:0;right:0;padding:17px 2.5%;display:flex;align-items:center;gap:30px;font-size:9px;z-index:25;background:#e8e8e5}.scroll-line{height:1px;background:#bcbcb4;flex:1}.scroll-line span{display:block;height:1px;background:#111;width:100%;transform:scaleX(0);transform-origin:left}footer>span{white-space:nowrap}.dialog-bar{display:flex;justify-content:space-between;align-items:start;gap:20px;font-size:11px}.dialog-bar h2{font-size:18px}.dialog-bar button{border-bottom:1px solid #aaa;padding-bottom:4px}dialog{border:0;background:#e8e8e5;color:#111;padding:35px;max-height:94svh;width:94vw;max-width:1400px;overscroll-behavior:contain}dialog::backdrop{background:#0009;backdrop-filter:blur(5px)}#index-dialog{height:94svh}#index-list{margin:6vh 0}.index-row{display:grid;grid-template-columns:50px 1.1fr 1fr;text-align:left;align-items:baseline;width:100%;padding:18px 0;border-top:1px solid #c4c4bc;gap:20px}.index-row:last-child{border-bottom:1px solid #c4c4bc}.index-row>span:first-child{font-size:10px;color:#777}.index-row strong{font-size:clamp(22px,3vw,45px);font-weight:400;letter-spacing:-1.4px}.index-row>span:last-child{font-size:12px;color:#64645c}.index-row:hover strong{color:#77776e}.index-footer{display:flex;gap:35px;font-size:12px}.project-detail-title{font-size:clamp(40px,6vw,85px);font-weight:600;letter-spacing:-.06em;margin:40px 0 20px}.detail-description{max-width:650px;font-size:17px;line-height:1.5;margin-bottom:40px}.detail-gallery img{display:block;max-width:100%;height:auto;margin:25px auto}.detail-original{display:inline-block;font-size:12px;border-bottom:1px solid;padding:10px 0;margin:25px 0}
@media(min-width:1800px){.about-copy p,.project-copy p{font-size:20px}.project-meta,.project-actions{font-size:14px}.project-meta span span{font-size:10px}.competencies p{font-size:18px;max-width:340px}.career-details h3{font-size:30px}.career-details p{font-size:15px}}
@media(max-width:800px){header{padding:22px 5%;font-size:10px;background:#e8e8e5f0}header nav{gap:20px}header nav button:first-child{display:none}.sticky-viewport{height:auto;position:relative;overflow:visible}.track{display:block;width:100%;height:auto;transform:none!important;will-change:auto}.panel{height:auto;width:100%;padding:80px 6%}.hero{height:88svh;padding:0 5%;min-height:480px}.hero h1{font-size:26.2vw;transform:translateY(0);margin-left:-1.4vw}.ruler{left:5%;right:5%;bottom:90px}.hero-bottom{left:5%;right:5%;bottom:60px;font-size:8px;gap:20px}.hero-bottom>span:last-child{text-align:right;max-width:150px}.about{display:block;padding-top:35px;padding-bottom:80px}.about h2{font-size:16vw;letter-spacing:-.07em}.about-copy{padding:50px 0 0 18%}.about-copy p{font-size:15px;max-width:100%}.small{font-size:7px}.project-panel{display:block;border-top:1px solid #c8c8bf;padding:60px 6%}.project-intro{padding:0;display:block}.project-intro h2{font-size:13vw;margin-bottom:35px}.project-index{font-size:9px;margin-bottom:16px}.project-copy p{font-size:15px;max-width:100%;margin-bottom:25px}.project-meta{max-width:350px;margin:25px 0}.project-actions{margin-bottom:40px}.project-visuals{display:block;overflow:visible}.media-main{width:100%;height:auto;max-height:none}.media-main img{height:auto;object-fit:contain}.media-secondary{width:72%;height:auto;margin:35px 0 0 auto!important}.media-secondary img{height:auto}.project-visuals figcaption{font-size:8px}.leadership{display:block;border-top:1px solid #c8c8bf}.leadership h2{font-size:11vw;margin-bottom:45px}.competencies{gap:35px 22px}.competencies h3{font-size:21px;line-height:1.1}.competencies p{font-size:12px}.career{display:block;padding-top:30px}.career h2{font-size:14vw;margin:25px 0 40px}.career-details{gap:25px}.career-details h3{font-size:24px}.agency-clients{margin-top:15px}.agency-clients>p{font-size:25px}.contact{padding-top:45px;min-height:76svh;padding-bottom:35vw;border-top:1px solid #c8c8bf}.contact>.eyebrow{font-size:8px;max-width:230px}.contact-head{font-size:14vw;margin:35px 0;line-height:1.04}.contact-info{display:block}.contact-info p{margin-top:25px}.closing-name{font-size:25vw;bottom:30px;left:5%}footer{padding:12px 5%;font-size:7px;gap:15px}footer>span:last-child{font-size:6px}#position-label{max-width:100px;overflow:hidden;text-overflow:ellipsis}.index-row{grid-template-columns:25px 1fr;gap:10px;padding:15px 0}.index-row strong{font-size:26px}.index-row>span:last-child{grid-column:2;font-size:10px}.index-footer{gap:20px;flex-wrap:wrap;font-size:11px}dialog{padding:20px}.detail-description{font-size:14px}.project-detail-title{font-size:45px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.track{will-change:auto}}
@media(min-width:801px) and (max-height:720px){.panel{padding-top:105px;padding-bottom:65px}.project-intro{padding-top:0;padding-bottom:15px}.project-intro h2{font-size:4.4vw}.project-index{margin-bottom:17px}.project-copy p{font-size:14px;margin-bottom:20px}.project-meta{font-size:10px;margin-bottom:17px}.about-copy{padding-top:8vh}.about-copy p{font-size:15px;margin-bottom:20px}.competencies{gap:25px}.competencies p{font-size:12px}.competencies h3{font-size:20px}.contact-head{margin:20px 0}.career-details{gap:15px}}
/* One selected image per project */
@media(min-width:801px){.project-panel{width:111vw;grid-template-columns:30vw 1fr;gap:5vw}.project-visuals{display:block;align-self:center;overflow:visible}.media-main{width:100%;height:68vh}.media-main img{object-fit:contain}.media-main.yr-cover{height:64vh;overflow:hidden}.media-main.yr-cover img{object-fit:cover;object-position:50% 0%}.media-main.yr-cover figcaption{position:absolute;bottom:0;background:#e8e8e5;left:0;right:0;padding:10px 0;margin:0}}
@media(max-width:800px){.media-main.yr-cover{height:75vw;overflow:hidden}.media-main.yr-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}.media-main.yr-cover figcaption{display:none}}
#project-dialog{width:100vw;max-width:100vw;height:100svh;max-height:100svh;margin:0;padding:0;background:white;overflow:hidden}#project-dialog .dialog-bar{height:55px;padding:18px 25px;background:#e8e8e5}#project-detail{height:calc(100svh - 55px)}.full-project-frame{border:0;display:block;width:100%;height:100%;background:white}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.cover-link{display:block;width:100%;height:100%;cursor:pointer}.cover-link:focus-visible{outline-offset:5px}.cover-link img{transition:opacity .2s}.cover-link:hover img{opacity:.88}.project-meta{display:block}.project-meta>span{display:block}.project-index{text-transform:uppercase}
#project-dialog .project-navigation{height:64px;align-items:center;padding:15px 25px;gap:20px}#project-detail{height:calc(100svh - 64px)}.project-return,.project-browse{display:flex;align-items:center;gap:24px}.project-navigation button{border-bottom:0;padding:0;font:12px Arial,Helvetica,sans-serif}.project-navigation button:hover{text-decoration:underline;text-underline-offset:4px}.project-navigation select{font:12px Arial,Helvetica,sans-serif;border:1px solid #b8b8af;background:transparent;border-radius:0;padding:7px 25px 7px 10px;color:#111;max-width:190px}
@media(max-width:650px){#project-dialog .project-navigation{height:94px;flex-wrap:wrap;padding:14px 18px;gap:12px}.project-return,.project-browse{justify-content:space-between;width:100%;gap:15px}.project-navigation button,.project-navigation select{font-size:11px}.project-navigation select{max-width:160px;padding:4px 8px}#project-detail{height:calc(100svh - 94px)}}
@media(max-width:800px){.panel[data-loop-clone]{display:none!important}}
/* Minimal contact panel, aligned with the reference. */
.contact{display:flex;align-items:flex-end;justify-content:space-between;gap:5vw;padding:130px 7vw 14vh;width:100vw;overflow:hidden}.contact-head{display:block;font-size:9vw;font-weight:600;letter-spacing:-.065em;line-height:1;margin:0;white-space:nowrap}.contact-info{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:7px;flex-shrink:0}.contact-info>a{font-size:15px;border:0;padding:0;line-height:1.3}.contact-info>button{font:15px/1.3 Arial,Helvetica,sans-serif;padding:0;border:0;background:none}.contact-info>a:hover,.contact-info>button:hover{text-decoration:underline;text-underline-offset:4px}
@media(min-width:801px) and (max-height:720px){.contact{padding-bottom:14vh}.contact-head{margin:0}}
@media(max-width:800px){.contact{min-height:68svh;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:35px;padding:90px 6% 100px}.contact-head{font-size:15vw;line-height:1;margin:0;letter-spacing:-.065em}.contact-info{gap:10px;padding:0}.contact-info>a,.contact-info>button{font-size:13px}}
.sticky-viewport{overflow:clip}
@media(max-width:800px){.sticky-viewport{overflow:visible}}
.disciplines{width:143vw;padding:125px 7vw 90px;display:flex;flex-direction:column;justify-content:center;gap:40px}.disciplines-heading{display:flex;align-items:baseline;gap:50px}.disciplines-heading h2{font-size:5.7vw;letter-spacing:-.065em;font-weight:600;line-height:1;margin:0}.disciplines-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:35px 45px}.disciplines-grid article{border-top:1px solid #bfbfb6;padding-top:22px}.disciplines-grid h3{font-size:clamp(25px,2.2vw,40px);font-weight:600;letter-spacing:-.045em;line-height:1.12;margin-bottom:16px}.disciplines-grid p{max-width:400px;font-size:15px;line-height:1.4}
@media(min-width:801px) and (max-height:720px){.disciplines{padding-top:105px;padding-bottom:65px;gap:25px}.disciplines-heading h2{font-size:4.5vw}.disciplines-grid{gap:25px 40px}.disciplines-grid article{padding-top:16px}.disciplines-grid h3{font-size:27px;margin-bottom:12px}.disciplines-grid p{font-size:13px}}
@media(max-width:800px){.disciplines{width:100%;padding:70px 6%;gap:35px}.disciplines-heading{display:block}.disciplines-heading h2{font-size:14vw;margin-top:20px}.disciplines-grid{grid-template-columns:1fr;gap:35px}.disciplines-grid article{padding-top:28px}.disciplines-grid h3{font-size:32px;letter-spacing:-1.3px;margin-bottom:16px}.disciplines-grid p{font-size:16px;line-height:1.4;max-width:100%}}
/* Portrait tablets: keep each project title and copy together. */
@media(min-width:801px) and (max-width:1366px) and (orientation:portrait){
 .project-panel{width:125vw;grid-template-columns:minmax(320px,40vw) minmax(0,1fr);align-items:center;gap:5vw;padding-top:110px;padding-bottom:90px}
 .project-intro{align-self:center;justify-content:flex-start;gap:36px;padding:0;min-width:0}
 .project-intro h2{font-size:clamp(42px,5vw,66px);line-height:1.06;overflow-wrap:normal}
 .project-index{margin-bottom:22px;line-height:1.5}
 .project-copy p{font-size:16px;line-height:1.45;max-width:none;margin-bottom:26px}
 .project-meta{font-size:12px;line-height:1.5;margin-bottom:24px}
 .project-actions{font-size:12px}
 .project-visuals{align-self:center;min-width:0}
 .media-main{height:min(58svh,72vw)}
 .media-main.yr-cover{height:min(48svh,42vw)}
}
.career-period{display:block;font-size:11px;line-height:1.4;color:#62625a;margin-bottom:7px}.career-details .career-period+h3{margin-top:0}
/* Selected portfolio covers and the separate Yves Rocher mobile presentation. */
.project-visuals figcaption{display:none}
.yr-visuals{display:flex;align-items:center;gap:3vw}
.yr-visuals .media-main.yr-cover{width:min(55vw,64svh);height:64svh;flex:0 0 auto;overflow:visible}
.yr-visuals .media-main.yr-cover img{object-fit:cover;object-position:center}
.yves-project{width:calc(49vw + 94.72svh)}
.yr-phone-link{display:block;flex:0 0 auto;aspect-ratio:0.48;height:64svh;max-height:760px;container-type:inline-size}
.yr-phone{width:100%;height:100%;padding:2.3%;border:1px solid #686868;border-radius:14% / 6.7%;background:linear-gradient(105deg,#454545,#070707 12%,#222 90%,#555);box-shadow:0 10px 16px #00000018,0 1px 2px #0005}
.yr-phone-screen{width:100%;height:100%;position:relative;border:2px solid #111;border-radius:12% / 5.7%;overflow:hidden;background:#fff;padding-top:9%}
.yr-phone-speaker{position:absolute;top:1.6%;left:34%;width:32%;height:2.7%;border-radius:50px;background:#070707}
.yr-phone-header{display:flex;align-items:center;justify-content:space-between;gap:7%;padding:3% 5% 5%;height:8.8%;background:white}
.yr-phone-header .yr-original-logo{display:block;width:64%;height:auto;object-fit:contain;mix-blend-mode:multiply}
.yr-menu{display:flex;flex-direction:column;justify-content:space-between;width:7%;height:35%;flex-shrink:0}
.yr-menu i{display:block;width:100%;height:1px;background:#123b2a}
.yr-phone-header svg{width:8%;height:auto;fill:none;stroke:#123b2a;stroke-width:1.5}
.yr-phone-screen>.yr-phone-hero{display:block;width:100%;height:40%;object-fit:cover;object-position:50% 38%}
.yr-phone-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:2px}
.yr-phone-mosaic img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.yr-phone-mosaic .yr-hair-detail{object-fit:cover;object-position:center}
@media(min-width:801px) and (max-width:1366px) and (orientation:portrait){
 .yves-project{width:calc(61vw + 71.04svh)}
 .yr-visuals .media-main.yr-cover{height:48svh;width:48svh}
 .yr-phone-link{height:48svh}
}
@media(max-width:800px){
 .yves-project{width:100%}
 .yr-visuals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.48fr);gap:3vw;align-items:center}
 .yr-visuals .media-main.yr-cover{width:100%;height:auto;aspect-ratio:1;flex:initial}
 .yr-visuals .media-main.yr-cover img{height:auto;width:100%}
 .yr-phone-link{width:100%;height:auto;aspect-ratio:.48;max-height:none}
 .yr-phone{box-shadow:0 4px 8px #00000018}
}
/* Unified cover heights and tighter framing. */
@media(min-width:801px){
 .project-visuals .media-main{height:64svh}
 .project-visuals .media-main img{object-fit:cover;object-position:center}
 #lvmh .media-main{background:#fff}
 #lvmh .media-main img{object-fit:contain;transform:none}
 #alesari .media-main{background:#000}
 #alesari .media-main img{object-fit:cover;transform:scale(1.38);object-position:50% 50%}
 #sava .media-main{overflow:visible}
 #sava .media-main img{object-fit:contain;transform:scale(1.1)}
}
#sava .media-main img{clip-path:polygon(4.25% 17.6%,36.1% 20.2%,44.95% 14.7%,65.6% 21.55%,95.5% 19%,95.5% 79%,65.6% 75.7%,44.9% 85.8%,36% 74%,4.25% 78.5%)}
@media(min-width:801px) and (max-width:1366px) and (orientation:portrait){
 .project-visuals .media-main{height:48svh}
}
@media(max-width:800px){
 .project-visuals .media-main{height:57.35vw;aspect-ratio:auto;overflow:hidden}
 .project-visuals .media-main img{height:100%;width:100%;object-fit:cover;object-position:center}
 #lvmh .media-main{background:#fff}
 #lvmh .media-main img{object-fit:contain;transform:none}
 #alesari .media-main{background:#000}
 #alesari .media-main img{transform:scale(1.38)}
 #sava .media-main img{object-fit:contain;transform:scale(1.1)}
 .yr-visuals .media-main.yr-cover{height:auto;aspect-ratio:1}
}
/* One shared content stage throughout the horizontal narrative. */
@media(min-width:801px){
 :root{--stage-height:max(390px,54.6svh);--stage-top:calc((100svh - var(--stage-height))/2)}
 .panel:not(.hero){padding-top:var(--stage-top);padding-bottom:var(--stage-top)}
 .about,.project-panel,.leadership,.career{align-items:stretch;align-content:stretch}
 .project-intro{height:var(--stage-height);min-height:0;padding:0;gap:25px;align-self:stretch;justify-content:space-between;position:relative}
 .project-intro>div:first-child{position:relative}
 .project-intro h2{font-size:clamp(38px,4.7vw,84px);line-height:1; margin:0}
 .project-index{position:absolute;bottom:100%;margin-bottom:18px;font-size:9px;line-height:1.4}
 .project-copy{margin:0}
 .project-copy p{margin-bottom:25px}
 .project-meta{margin-bottom:20px}
 .project-actions{margin:0}
 .project-visuals{align-self:stretch;display:flex;align-items:stretch;height:var(--stage-height)}
 .project-visuals .media-main,.yr-visuals .media-main.yr-cover{height:var(--stage-height);align-self:stretch}
 .yr-visuals .media-main.yr-cover{width:var(--stage-height)}
 .yr-phone-link{height:var(--stage-height);max-height:none}
 .yves-project{width:calc(49vw + var(--stage-height)*1.48)}
 .about-title,.leadership-head{position:relative;align-self:stretch}
 .about-title>.eyebrow,.leadership-head>.eyebrow{position:absolute;bottom:100%;margin-bottom:18px}
 .about h2,.leadership h2{margin:0;line-height:1}
 .about-copy{padding:0;display:flex;flex-direction:column;justify-content:flex-end}
 .about-copy .small{margin-top:10px}
 .competencies{height:var(--stage-height);grid-template-rows:1fr 1fr;align-content:stretch;row-gap:35px}
 .competencies article{position:relative;display:flex;flex-direction:column;justify-content:space-between}
 .competencies article>span{position:absolute;bottom:100%;margin-bottom:14px}
 .competencies h3{margin:0 0 16px}
 .competencies p{margin-top:auto}
 .career{position:relative;grid-template-rows:var(--stage-height)}
 .career>.eyebrow{position:absolute;top:calc(var(--stage-top) - 32px);left:6vw;margin:0}
 .career h2{font-size:clamp(40px,5.3vw,90px);line-height:1.04;margin:0}
 .career-details{height:var(--stage-height);gap:14px;justify-content:space-between}
 .career-details h3{font-size:clamp(19px,1.65vw,28px);line-height:1.1}
 .career-details p{font-size:clamp(10px,.83vw,15px);line-height:1.35;margin-top:6px}
 .career-period{font-size:10px;margin-bottom:5px}
 .agency-clients{padding-top:12px}
 .agency-clients>p{font-size:clamp(18px,1.6vw,28px)}
 .disciplines{justify-content:space-between;gap:28px}
 .disciplines-heading{position:relative;display:block}
 .disciplines-heading>.eyebrow{position:absolute;bottom:100%;margin-bottom:18px}
 .disciplines-heading h2{margin:0;line-height:1}
 .disciplines-grid{flex:1;min-height:0;grid-template-rows:1fr 1fr;gap:25px 45px}
 .disciplines-grid article{padding-top:16px;display:flex;flex-direction:column;justify-content:space-between}
 .disciplines-grid h3{font-size:clamp(23px,2vw,36px);margin-bottom:12px}
 .disciplines-grid p{font-size:clamp(12px,1vw,18px);line-height:1.35}
 .contact{padding-top:var(--stage-top);padding-bottom:var(--stage-top)}
 #sava .media-main{overflow:visible}
 #sava .media-main img{clip-path:none;transform:none;object-fit:contain}
}
@media(min-width:801px) and (max-width:1366px) and (orientation:portrait){
 .yves-project{width:calc(61vw + var(--stage-height)*1.48)}
 .project-intro{gap:25px}
 .project-copy p{font-size:16px;line-height:1.45}
}
@media(min-width:801px) and (max-height:720px){
 :root{--stage-height:max(340px,62svh)}
 .project-copy p{font-size:13px;line-height:1.35;margin-bottom:17px}
 .project-meta{font-size:10px;margin-bottom:14px}
 .project-intro h2{font-size:4.2vw}
 .disciplines-heading h2{font-size:4vw}
 .disciplines{gap:20px}
 .disciplines-grid{gap:20px 40px}
 .disciplines-grid h3{font-size:23px}
 .disciplines-grid p{font-size:12px}
 .career-details{gap:10px}
 .career-details h3{font-size:20px}
 .career-details p{font-size:10px}
}
@media(max-width:800px){#sava .media-main img{clip-path:none;transform:none;object-fit:contain}}
/* Align the visible letter tops, not the font's invisible leading. */
@media(min-width:801px){
 .project-intro>div:first-child,.about-title,.leadership-head,.disciplines-heading{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
 .project-index,.about-title>.eyebrow,.leadership-head>.eyebrow,.disciplines-heading>.eyebrow{position:static;order:2;margin:20px 0 0;line-height:1.4}
 .project-intro h2,.about-title h2,.leadership-head h2,.disciplines-heading h2{order:1}
 .project-intro h2,.about h2,.leadership h2,.disciplines-heading h2,.career h2,.competencies h3{ text-box-trim:trim-start;text-box-edge:cap alphabetic}
 .career-title{align-self:stretch}
 .career-title>.eyebrow{margin-top:20px}
 .career-details>div:first-child .career-period{text-box-trim:trim-start;text-box-edge:cap alphabetic}
 .competencies article>span{position:static;order:2;margin:0 0 12px}
 .competencies h3{order:1}
 .competencies p{order:3}
}
@supports not (text-box-trim:trim-start){
 @media(min-width:801px){
  .project-intro h2,.about h2,.leadership h2,.disciplines-heading h2,.career h2{margin-top:-.145em}
  .competencies h3{margin-top:-.14em}
 }
}
@media(max-width:800px){.career-title>.eyebrow{margin:-15px 0 35px}}
.project-actions button,.project-actions a{border:0;padding-bottom:0;text-decoration:none}
.project-actions button:hover,.project-actions a:hover{border:0;text-decoration:none;opacity:.65}
.project-link-arrow{display:inline-block;width:11px;height:11px;margin-left:4px;fill:#000;color:#000;vertical-align:baseline;flex-shrink:0}
@media(min-width:801px){
 .about{grid-template-rows:auto auto;align-content:end;align-items:center;column-gap:7vw;row-gap:35px}
 .about-copy{display:contents}
 .about-prose{grid-column:2;grid-row:1;align-self:center}
 .about-prose p:first-child{text-box-trim:trim-start;text-box-edge:cap alphabetic}
 .about-prose p:last-child{margin-bottom:0;text-box-trim:trim-end;text-box-edge:cap alphabetic}
 .about-title{grid-column:1;grid-row:1;align-self:center;position:relative}
 .about-title h2{text-box-trim:trim-both;text-box-edge:cap alphabetic}
 .about-title>.eyebrow{position:absolute;top:100%;bottom:auto;margin:20px 0 0}
 .about-copy .small{grid-column:2;grid-row:2;align-self:end;margin:0;line-height:1.5}
}
@media(min-width:801px){.career-title{align-self:center}}

/* Career: current collaborations on the left, agency experience on the right. */
@media(min-width:601px){
 .career-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr auto;gap:28px 3vw;align-items:start}
 .career-details>div:nth-child(1){grid-column:1;grid-row:1}
 .career-details>div:nth-child(2){grid-column:2;grid-row:1}
 .career-details>div:nth-child(3){grid-column:1;grid-row:2}
 .career-details>div:nth-child(4){grid-column:2;grid-row:2}
 .career-details>.agency-clients{grid-column:1/-1;grid-row:3;margin-top:0}
}
@media(min-width:601px){.career-details>div>.career-period{text-box-trim:trim-start;text-box-edge:cap alphabetic}}

/* Keep the career block compact and anchored to the shared stage baseline. */
@media(min-width:601px){
 .career-details{grid-template-rows:auto auto auto;align-content:end;row-gap:30px;justify-content:normal}
 .career-details>.agency-clients{padding-top:20px}
 .career-details>.agency-clients>p{text-box-trim:trim-end;text-box-edge:cap alphabetic;margin-bottom:0}
}
@media(min-width:801px){
 .career-title{align-self:end}
 .career-title>.eyebrow{text-box-trim:trim-end;text-box-edge:cap alphabetic}
}

/* Separate Oak & Luna phone; original campaign images remain intact. */
.oak-visuals{gap:3vw}
.oak-phone-screen{background:#faf8f4}
.oak-phone-header{display:flex;align-items:center;justify-content:space-between;height:9%;padding:0 5%;font-size:4.5cqw;letter-spacing:.08em}
.oak-phone-header>span:not(:nth-child(2)){font-size:5cqw}
.oak-phone-screen>.oak-phone-banner{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.oak-phone-title{text-align:center;font:5.8cqw/1.2 Georgia,serif;padding:7% 2% 5%}
.oak-phone-images{display:grid;grid-template-columns:1fr 1fr;gap:2%;padding:0 4%}
.oak-phone-images img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.oak-phone-caption{text-align:center;font:4.5cqw/1.4 Georgia,serif;margin:7% 0 5%}
.oak-phone-cta{display:block;margin:0 8%;padding:5% 1%;background:#171717;color:white;text-align:center;font-size:3.3cqw;letter-spacing:.07em}
@media(min-width:801px){#oak-luna{width:calc(114vw + var(--stage-height)*.48)}.oak-visuals .media-main{width:65vw}.oak-phone-link{height:var(--stage-height);max-height:none}}
@media(min-width:801px) and (max-width:1366px) and (orientation:portrait){#oak-luna{width:calc(126vw + var(--stage-height)*.48)}}
@media(max-width:800px){.oak-visuals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.48fr);gap:3vw;align-items:stretch}.oak-visuals .media-main{width:100%;height:auto;aspect-ratio:1}.oak-phone-link{width:100%;height:auto;aspect-ratio:.48;max-height:none}}

/* Alesari film, expanding within the page without interrupting scrolling. */
.alesari-visuals{gap:3vw}
.film-slot{flex:0 0 auto;height:100%;aspect-ratio:9/16;background:#000;overflow:hidden}
.film-slot>img{display:block;width:100%;height:100%;object-fit:contain}
.film-stage{position:fixed;z-index:40;background:#000;overflow:hidden;box-sizing:border-box}
.film-stage[hidden]{display:none}
.film-stage video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
@media(min-width:801px){#alesari{width:calc(114vw + var(--stage-height)*.5625)}.alesari-visuals .media-main{width:65vw}}
@media(min-width:801px) and (max-width:1366px) and (orientation:portrait){#alesari{width:calc(126vw + var(--stage-height)*.5625)}}
@media(max-width:800px){.alesari-visuals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5625fr);gap:3vw;align-items:stretch}.alesari-visuals .media-main{width:100%;height:auto;aspect-ratio:1}.film-slot{width:100%;height:auto;aspect-ratio:9/16}}
@media(prefers-reduced-motion:reduce){.project-visuals,.project-intro>div,.about-title,.about-prose,.career-title,.career-details,.disciplines-heading,.disciplines-grid,.media-main img{translate:none!important;scale:none!important}}

/* A live scrolling preview, confined to the Yves Rocher phone. */
.yr-interactive-phone .yr-phone-screen{display:flex;flex-direction:column}
.yr-interactive-phone .yr-phone-header{flex:0 0 8.8%;min-height:0}
.yr-site-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#54755f #eef3ee;outline-offset:-3px}
.yr-site-scroll::-webkit-scrollbar{width:4px}
.yr-site-scroll::-webkit-scrollbar-track{background:#eef3ee}
.yr-site-scroll::-webkit-scrollbar-thumb{background:#54755f;border-radius:4px}
.yr-site-scroll>.yr-phone-hero{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 38%}
.yr-site-scroll .yr-phone-mosaic{padding-bottom:3px}

.yr-site-scroll .yr-phone-mosaic img{aspect-ratio:4/5}

@font-face{font-family:Montserrat;src:url('assets/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
.yr-site-scroll{font-family:Montserrat,Arial,sans-serif;color:#164735}
.yr-shop-nav{font-size:3cqw;letter-spacing:.06em;padding:5% 2%;text-align:center;background:#f5f7f0}
.yr-shop-intro{padding:9% 7%;background:#f3f4ed;text-align:center}
.yr-site-scroll h3{font-family:Montserrat,Arial,sans-serif;font-size:8.4cqw;font-weight:600;letter-spacing:-.04em;line-height:1.15;margin:4% 0}
.yr-site-scroll p{font-family:Montserrat,Arial,sans-serif;font-size:4.1cqw;line-height:1.6;margin:5% 0}
.yr-shop-intro>span:first-child,.yr-shop-section>span,.yr-shop-editorial span{font-size:3cqw;letter-spacing:.08em}
.yr-shop-button{display:inline-block;background:#164735;color:#fff;font-size:3cqw;letter-spacing:.04em;padding:5% 8%;margin-top:3%}
.yr-shop-section{padding:11% 5% 7%}
.yr-shop-section>h3{text-align:left}
.yr-shop-categories{font-size:3.2cqw;padding:3% 0 7%;border-bottom:1px solid #d8dfd3}
.yr-shop-grid{display:grid;grid-template-columns:1fr 1fr;gap:7cqw 3cqw;margin-top:7%}
.yr-shop-card{min-width:0}
.yr-shop-card>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#dfede0}
.yr-shop-card h4{font-family:Montserrat,Arial,sans-serif;font-size:3.8cqw;line-height:1.4;font-weight:600;margin:6% 1% 5%;color:#164735}
.yr-shop-label{display:block;font-size:3.2cqw;border:1px solid #a8baaa;padding:5% 2%;text-align:center}
.yr-shop-editorial>img{display:block;width:100%;height:auto}
.yr-shop-editorial>div{padding:9% 7%;background:#e4eddf}
.yr-shop-footer{text-align:center;padding:10% 4%;font-size:5cqw;font-weight:600;letter-spacing:.08em}
.yr-shop-footer>span{display:block;font-size:3.5cqw;letter-spacing:0;font-weight:400;margin-top:3%}
.oak-film-slot{aspect-ratio:16/9}
@media(min-width:801px){#oak-luna{width:calc(117vw + var(--stage-height)*2.258)}}
@media(min-width:801px) and (max-width:1366px) and (orientation:portrait){#oak-luna{width:calc(129vw + var(--stage-height)*2.258)}}
@media(max-width:800px){.oak-film-slot{grid-column:1/-1;aspect-ratio:16/9;height:auto}}

/* Brand film stays beside its logo, at the shared visual height. */
.leopards-visuals{display:flex;gap:3vw;align-items:stretch}
.leopards-visuals .media-main{width:var(--stage-height);flex:0 0 auto}
.leopards-visuals .media-main .cover-link>img{object-fit:contain;transform:none}
.leopards-motion{flex:0 0 auto;height:100%;aspect-ratio:988/720;overflow:hidden;background:#284d89}
.leopards-motion video{display:block;width:100%;height:100%;object-fit:contain}
.oak-film-slot{aspect-ratio:964/720}
@media(min-width:801px){#les-leopards{width:calc(49vw + var(--stage-height)*2.373)}#oak-luna{width:calc(117vw + var(--stage-height)*1.819)}}
@media(min-width:801px) and (max-width:1366px) and (orientation:portrait){#les-leopards{width:calc(61vw + var(--stage-height)*2.373)}#oak-luna{width:calc(129vw + var(--stage-height)*1.819)}}
@media(max-width:800px){.leopards-visuals{display:grid;grid-template-columns:1fr;gap:3vw}.leopards-visuals .media-main{width:100%;height:auto;aspect-ratio:1}.leopards-motion{width:100%;height:auto;aspect-ratio:988/720}.oak-film-slot{aspect-ratio:964/720}}

/* Yves Rocher mobile preview: common gutters and aligned product rows. */
.yr-interactive-phone{--yr-gutter:5%;--yr-card-gap:3cqw}
.yr-site-scroll .yr-phone-mosaic{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--yr-card-gap);align-items:start;margin:0;padding:5% var(--yr-gutter)}
.yr-site-scroll .yr-phone-mosaic>img{display:block;width:100%;height:auto;aspect-ratio:1;margin:0;align-self:start;object-fit:contain;background:#dfede0}
.yr-site-scroll .yr-phone-mosaic>img:nth-child(3){background:#fff5df}
.yr-site-scroll .yr-phone-mosaic>.yr-hair-detail{object-fit:cover}
.yr-shop-intro{padding:9% var(--yr-gutter)}
.yr-shop-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:11cqw;padding:4% 3%;line-height:1.4;box-sizing:border-box;text-align:center}
.yr-shop-section{padding:9% var(--yr-gutter)}
.yr-shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7cqw var(--yr-card-gap);align-items:stretch}
.yr-shop-card{display:flex;flex-direction:column;align-items:stretch;gap:2.5cqw;margin:0;padding:0}
.yr-shop-card>img{width:100%;height:auto;aspect-ratio:1;flex:0 0 auto;margin:0}
.yr-shop-card h4{margin:0;min-height:4.2em;line-height:1.4;overflow-wrap:normal}
.yr-shop-card .yr-shop-label{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-height:10cqw;margin-top:auto;padding:2cqw 1cqw;line-height:1.4;text-align:center}
.yr-shop-editorial>div{padding:9% var(--yr-gutter)}

/* Oak & Luna fills the expanded viewport without letterboxing. */
.film-stage.film-fill.film-expanded video{object-fit:cover}
.film-sound-button{position:absolute;right:18px;bottom:56px;z-index:1;padding:10px 15px;border:1px solid #ffffff99;border-radius:3px;background:#111c;color:white;font:13px Arial,sans-serif}
.film-sound-button[hidden]{display:none}

.lvmh-visuals{gap:3vw}
.lvmh-motion{height:100%;flex:0 0 auto;aspect-ratio:9/16;overflow:hidden;background:white}
.lvmh-motion video{display:block;width:100%;height:100%;object-fit:contain}
@media(min-width:801px){#lvmh{width:calc(114vw + var(--stage-height)*.5625)}.lvmh-visuals .media-main{width:65vw}}
@media(min-width:801px) and (max-width:1366px) and (orientation:portrait){#lvmh{width:calc(126vw + var(--stage-height)*.5625)}}
@media(max-width:800px){.lvmh-visuals{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.5625fr);gap:3vw;align-items:stretch}.lvmh-visuals .media-main{width:100%;height:auto;aspect-ratio:1}.lvmh-motion{width:100%;height:auto;aspect-ratio:9/16}}

.annecy-lake-cover{position:relative;overflow:hidden}
.annecy-lake-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.annecy-lake-cover:hover .annecy-lake-motion{opacity:.88}
@media(prefers-reduced-motion:reduce){.annecy-lake-motion{display:none}}

.contact-info>a.contact-social{display:inline-flex;align-items:center;gap:.3em;text-decoration:none;border-bottom:0;padding-bottom:0}
.contact-link-arrow{width:.72em;height:.72em;fill:currentColor;flex:none}

/* Link arrows share the text line and scale with its font size. */
.project-actions button,.project-actions a,.contact-info>a.contact-social{display:inline-flex;align-items:center;gap:.35em;line-height:1.2;text-decoration:none}
.project-link-arrow,.contact-link-arrow{display:block;width:.72em;height:.72em;flex:0 0 .72em;margin:0;fill:currentColor;vertical-align:initial;transform:translateY(-.02em)}
#close-index,#close-index:hover,#close-index:focus-visible{border-bottom:0;text-decoration:none;padding-bottom:0}

/* Compact, consistent navigation: home left, project selector and global links right. */
#project-dialog .project-navigation{display:flex;flex-direction:row;align-items:center;justify-content:space-between;height:76px;padding:24px 2.5vw;gap:24px;background:#e8e8e5}
#project-dialog .project-navigation .project-nav-right{display:flex;align-items:center;justify-content:flex-end;width:auto;gap:45px}
#project-dialog .project-navigation .project-primary{display:flex;align-items:center;justify-content:flex-end;width:auto;gap:35px;line-height:1.35}
#project-dialog .project-navigation .project-select{display:flex;align-items:center;gap:10px;width:auto}
#project-dialog .project-navigation button,#project-dialog .project-navigation a,#project-dialog .project-navigation label{font:12px/1.35 Arial,Helvetica,sans-serif!important;white-space:nowrap;border:0;padding:0;background:none;color:#111;text-decoration:none}
#project-dialog .project-navigation button,#project-dialog .project-navigation a{cursor:pointer}
#project-dialog .project-navigation select{font:12px Arial,Helvetica,sans-serif;max-width:190px;width:170px;padding:7px 25px 7px 10px;background:transparent;border:1px solid #b8b8af;border-radius:0;color:#111}
@media(max-width:650px){#project-dialog .project-navigation{height:64px;padding:15px 12px;gap:12px;flex-wrap:nowrap}#project-dialog .project-navigation .project-nav-right{gap:14px}#project-dialog .project-navigation .project-primary{gap:12px}#project-dialog .project-navigation .project-select{gap:4px}#project-dialog .project-navigation button,#project-dialog .project-navigation a,#project-dialog .project-navigation label{font-size:10px!important}#project-dialog .project-navigation select{width:92px;max-width:92px;font-size:10px!important;padding:5px 2px}}
@media(max-width:370px){#project-dialog .project-navigation .project-nav-right{gap:8px}#project-dialog .project-navigation .project-primary{gap:8px}#project-dialog .project-navigation select{width:78px;max-width:78px}#project-dialog .project-navigation button,#project-dialog .project-navigation a,#project-dialog .project-navigation label{font-size:9px!important}}

#project-detail{height:calc(100svh - 76px)}
@media(max-width:650px){#project-detail{height:calc(100svh - 64px)}}

header .descriptor{display:flex;align-items:center;gap:16px}header .studio-logo{display:block;width:44px;height:44px;object-fit:contain;flex:none}@media(max-width:650px){header .descriptor{gap:8px}header .studio-logo{width:29px;height:29px}}

/* Keep the expertise heading and text on the same fixed left edge. */
#expertises .disciplines-heading,#expertises .disciplines-grid{translate:none!important;transform:none!important}

/* Show the entire Ilija Bosilj catalogue cover at its original proportions. */
#ilija .media-main .cover-link>img{object-fit:contain;object-position:center;transform:none}
@media(min-width:801px){#ilija{width:calc(49vw + var(--stage-height)*1.302682)}#ilija .media-main{width:calc(var(--stage-height)*1.302682);flex:none}}
@media(min-width:801px) and (max-width:1366px) and (orientation:portrait){#ilija{width:calc(61vw + var(--stage-height)*1.302682)}}
@media(max-width:800px){#ilija .media-main{height:auto;aspect-ratio:1700/1305}#ilija .media-main .cover-link{height:100%}}