@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;450;500;600;700&family=Bricolage+Grotesque:opsz,wght@12..96,500&family=Instrument+Serif:ital@0;1&display=swap');
:root{--paper:#f5f4f0;--ink:#17232b;--muted:#62696c;--line:#d4d5d0;--accent:#20BDD4}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}::selection{background:#ace4ed}header,main>section,footer{padding-left:5%;padding-right:5%}.header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:10}.wordmark{font-size:24px;font-weight:600;letter-spacing:-1.2px}.brand-dot{color:var(--accent)}nav{display:flex;gap:35px;align-items:center;font-size:14px}nav a{position:relative}nav a:after,.text-link:after{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s}nav a:hover:after,.text-link:hover:after{transform:scaleX(1)}sup{font-size:10px;color:var(--muted);margin-left:3px}.hero{padding-top:56px;padding-bottom:65px}.eyebrow,.section-label{font-size:12px;font-weight:500;letter-spacing:1.4px}.hero>.eyebrow{display:flex;justify-content:space-between}.hero h1{font-size:clamp(62px,7.7vw,128px);font-weight:450;line-height:1.02;letter-spacing:-.065em;margin:40px 0 34px}em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.035em}.hero h1 em{color:var(--accent)}.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end}.hero p{font-size:17px;line-height:1.65;margin:0;color:var(--muted)}.text-link{position:relative;font-size:14px;display:flex;gap:35px;align-items:center}.section-label{display:flex;justify-content:space-between;padding:20px 0;border-top:1px solid var(--line)}.project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:65px 35px}.project-card{grid-column:span 6;min-width:0}.project-card:first-child{grid-column:span 12}.project-card--film{grid-column:span 12;margin:10px -5.56%;background:var(--ink);color:var(--paper);padding:65px 5%}.project-card--portrait{padding-top:115px}.project-card a{display:block}.project-image{position:relative;overflow:hidden;background:#e4e3df;aspect-ratio:1.35}.project-card:first-child .project-image{aspect-ratio:2.08}.project-card--portrait .project-image{aspect-ratio:.85}.project-card--film .project-image{aspect-ratio:2.15}.project-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.1,1);will-change:transform}.project-image .view{position:absolute;right:20px;bottom:20px;background:var(--paper);color:var(--ink);border-radius:50%;width:58px;height:58px;display:grid;place-items:center;font-size:24px;transition:transform .3s}.project-meta{display:flex;justify-content:space-between;gap:15px;padding-top:17px;align-items:baseline}.project-meta h2{font-size:25px;font-weight:500;letter-spacing:-.7px;margin:0}.project-meta p{font-size:13px;color:var(--muted);margin:6px 0 0}.project-card--film .project-meta p{color:#b5c3c9}.project-number{font-size:12px;opacity:.7}.about{display:grid;grid-template-columns:5fr 6fr;gap:10%;margin:145px 0 130px;align-items:center}.portrait-wrap{position:relative}.portrait-wrap img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 36%}.portrait-caption{display:block;font-size:11px;letter-spacing:1.2px;margin-top:15px}.about h2{font-size:clamp(40px,4.4vw,72px);font-weight:450;line-height:1.08;letter-spacing:-.055em;margin:28px 0}.about-copy p{color:var(--muted);line-height:1.8;max-width:480px}.disciplines{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:14px;border-top:1px solid var(--line);padding-top:25px;margin-top:30px}footer{padding-top:30px;padding-bottom:30px;background:#eaece8}.contact-title{display:flex;align-items:center;gap:20px;font-size:clamp(45px,8.7vw,140px);letter-spacing:-.06em;padding:45px 0 65px;line-height:1.1}.contact-title>span{margin-left:auto;font-size:.65em;transition:transform .3s}.footer-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #c9cec8;padding-top:25px;font-size:12px}.reveal{opacity:1;transform:none}.js .reveal.pending{opacity:0;transform:translateY(30px)}.js .reveal{transition:opacity .8s,transform .9s cubic-bezier(.2,.7,.1,1)}.detail-page{padding:45px 5% 80px}.detail-back{display:inline-block;font-size:14px;margin-bottom:50px}.detail-title{font-size:clamp(55px,10vw,150px);font-weight:450;letter-spacing:-.065em;line-height:1;margin:20px 0 30px}.detail-intro{display:grid;grid-template-columns:1fr 1fr;gap:50px;margin-bottom:45px}.detail-intro p{line-height:1.8;color:var(--muted);margin:0}.detail-cover{width:100%;max-height:85vh;object-fit:cover;display:block}.detail-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;padding:35px 0;border-bottom:1px solid var(--line)}.detail-facts span{font-size:12px;color:var(--muted);display:block;margin-bottom:9px}.detail-facts p{margin:0;font-size:15px}.detail-gallery{display:grid;gap:30px;margin:45px 0}.detail-gallery img{width:100%;height:auto;display:block}.detail-actions{display:flex;justify-content:space-between;gap:20px;padding-top:35px;border-top:1px solid var(--line)}.detail-actions a{font-size:17px}.detail-video{width:100%;aspect-ratio:16/9;border:0;margin:40px 0}.detail-note{max-width:700px;font-size:21px;line-height:1.6;margin:45px auto}body.detail-open #main{display:none}@view-transition{navigation:auto}::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
@media(min-width:1600px){.hero,.work,.about,footer,.header,.detail-page{padding-left:max(5%,calc((100vw - 1500px)/2));padding-right:max(5%,calc((100vw - 1500px)/2))}.project-card--film{margin-left:0;margin-right:0}}
@media(max-width:800px){.header{height:80px}.wordmark{font-size:21px}nav{gap:20px}.hero{padding-top:35px;padding-bottom:45px}.hero h1{font-size:clamp(60px,9.5vw,85px)}.hero-bottom{gap:25px}.hero p{font-size:15px}.project-grid{gap:40px 22px}.project-card--portrait{padding-top:60px}.project-meta{align-items:flex-start}.project-meta h2{font-size:22px}.about{gap:6%;margin:90px 0}.about h2{font-size:40px}.about-copy p{font-size:15px}.disciplines{font-size:13px;gap:12px}.detail-intro{gap:25px}}
@media(max-width:540px){.header{height:74px;flex-wrap:wrap;gap:12px}.wordmark{font-size:19px}nav{gap:14px;font-size:12px}nav sup{display:none}.hero>.eyebrow{font-size:10px;letter-spacing:.8px;gap:15px}.hero>.eyebrow span:last-child{white-space:nowrap}.hero h1{font-size:clamp(49px,11.7vw,65px);line-height:1.08;margin:32px 0 27px}.hero-bottom{display:block}.hero p{font-size:15px}.hero .text-link{display:inline-flex;margin-top:27px}.section-label{font-size:10px;letter-spacing:1px}.project-grid{display:block}.project-card{margin-bottom:38px}.project-card:first-child .project-image{aspect-ratio:1.22}.project-card--portrait{padding-top:0}.project-card--portrait .project-image{aspect-ratio:1}.project-card--film{padding:35px 5%;margin-bottom:38px}.project-card--film .project-image{aspect-ratio:1.4}.project-image .view{width:45px;height:45px;font-size:20px;right:14px;bottom:14px}.project-meta h2{font-size:23px}.about{grid-template-columns:1fr;margin:65px 0;gap:35px}.portrait-wrap{width:85%}.about h2{font-size:48px}.about-copy p{font-size:16px}.disciplines{font-size:14px}.contact-title{font-size:clamp(35px,9vw,50px);gap:10px;padding:30px 0 40px}.footer-bottom{flex-wrap:wrap;line-height:1.6}.footer-bottom>a:last-child{width:100%}.detail-page{padding-top:30px}.detail-back{margin-bottom:25px}.detail-intro{grid-template-columns:1fr;gap:20px}.detail-facts{grid-template-columns:1fr;gap:22px}.detail-actions{flex-direction:column;gap:25px}.detail-note{font-size:18px}.detail-title{font-size:65px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal.pending{opacity:1;transform:none}}

.project-card:first-child .project-image{aspect-ratio:1.65}.project-card:first-child .project-image img{object-fit:cover}.detail-cover{max-height:none;height:auto}@media(max-width:540px){.project-card:first-child .project-image{aspect-ratio:1.3}}

/* V2 · targeted typography and motion polish. */
.wordmark{font-size:26px}.brand-dot{display:inline-block;font-size:1.18em;line-height:0;color:var(--accent)}
@media(min-width:801px){.header nav{font-size:16px;font-weight:600}}
.hero h1{font-weight:700}.hero-fixed{display:block}.hero-line{display:flex;align-items:baseline;gap:.17em}.hero-line>.hero-fixed{flex:none;white-space:nowrap}
.hero-expression{position:relative;display:block;flex:1;min-width:0;height:1.14em;font-family:'Bricolage Grotesque','DM Sans',sans-serif;font-style:normal;font-weight:500;letter-spacing:-.055em;color:var(--accent);overflow:clip;overflow-clip-margin:.12em}
.expression-word{position:absolute;left:0;bottom:0;white-space:nowrap;line-height:1.14;transform-origin:left center;font-size:var(--expression-size,.65em)}
.project-meta h2{font-weight:700;transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.about h2 em,.contact-title em{color:var(--accent)}.contact-title em{display:inline-block;transition:transform .35s,opacity .35s}
.project-image img{transform:translate3d(0,var(--parallax-y,0px),0) scale(var(--image-scale,1));will-change:auto;transition:transform .7s cubic-bezier(.2,.7,.1,1)}
.project-card--parallax .project-image img{--image-scale:1.035;transition:scale .7s;will-change:transform}
.project-card .project-image{transition:transform .85s cubic-bezier(.2,.7,.1,1),opacity .7s;}
.motion-title{clip-path:inset(-.12em -.05em);}.motion-title>span{display:inline-block;transition:transform .65s cubic-bezier(.2,.7,.1,1),opacity .5s}
.js .motion-title.pending>span{transform:translateY(105%);opacity:0}
.js .reveal{transition-duration:.7s,.8s;transition-delay:var(--motion-delay,0ms)}.js .reveal.pending{transform:translateY(16px)}
.js .project-image.reveal.pending{transform:translateY(18px) scale(.986)}
.about-copy{--motion-delay:90ms}.about-copy p{--motion-delay:160ms}.project-meta p{--motion-delay:75ms}
@media(hover:hover) and (pointer:fine){
 .project-card a:hover img{scale:1.018}.project-card a:hover h2{transform:translateX(3px)}
 .project-card a:hover .view{transform:translate(3px,-3px)}
 .contact-title:hover em{transform:translateY(-2px);opacity:.86}.contact-title:hover>span{transform:translate(5px,-5px)}
}
@media(max-width:800px){.wordmark{font-size:23px}.hero-line{flex-wrap:wrap}.hero-expression{flex-basis:100%;height:1.14em}.project-card--parallax .project-image img{--image-scale:1;transform:none;will-change:auto}}
@media(max-width:540px){.wordmark{font-size:20px}.hero-expression{height:1.14em}.header nav{flex-shrink:0}.hero h1{font-size:clamp(43px,11.7vw,65px)}}
@media(max-width:359px){.header nav{gap:10px}.wordmark{font-size:19px}}
@media(prefers-reduced-motion:reduce){.js .motion-title.pending>span{transform:none;opacity:1}.project-card--parallax .project-image img{transform:none;scale:1;will-change:auto}.expression-word{transform:none!important;opacity:1!important;filter:none!important}}

@media(max-width:359px){.header nav{font-size:11px;gap:8px}.wordmark{font-size:19px}}

/* V2 corrections: natural text baseline and a shared hover easing. */
.hero-expression{display:grid;align-items:end}
.expression-word{position:relative;grid-area:1 / 1;align-self:end;left:auto;bottom:auto}
.project-image img{scale:1;transition:transform 1s cubic-bezier(.2,.7,.1,1),scale 1s cubic-bezier(.2,.7,.1,1)}
.project-card--parallax .project-image img{transition:scale 1s cubic-bezier(.2,.7,.1,1)}
.contact-buttons{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px}
.contact-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 26px;border-radius:999px;color:#fff;font-size:15px;font-weight:600;line-height:1.3;transition:transform .3s,box-shadow .3s}
.contact-button--email{background:#111}.contact-button--behance{background:var(--accent)}
@media(hover:hover) and (pointer:fine){.contact-button:hover{transform:translateY(-2px);box-shadow:0 5px 14px #17232b14}}
@media(max-width:540px){.contact-buttons{gap:12px}.contact-button{flex:1;padding:14px 18px}}
@media(prefers-reduced-motion:reduce){.project-image img,.project-card--parallax .project-image img{transition:none}.contact-button{transition:none}.contact-button:hover{transform:none}}

/* Portfolio architecture · the existing art-direction page is retained. */
[hidden]{display:none!important}.universe-menu{position:relative}.universe-menu summary{cursor:pointer;list-style:none}.universe-menu summary::-webkit-details-marker{display:none}.universe-menu summary:after{content:'⌄';margin-left:8px}.universe-links{position:absolute;right:0;top:calc(100% + 18px);display:grid;gap:18px;min-width:225px;padding:24px;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 30px #17232b0c;z-index:30}.universe-links a{font-size:14px;white-space:nowrap}.universe-links a[aria-current=page]{color:var(--accent)}
.hub-page,.territory-page{padding:60px 5% 85px}.hub-page>h1{font-size:clamp(46px,5vw,80px);font-weight:500;letter-spacing:-.055em;line-height:1.08;margin:30px 0 50px}.hub-page>h1 em{color:var(--accent)}.hub-entry{display:grid;grid-template-columns:50px 1fr 55px;gap:25px;align-items:center;border-top:1px solid var(--line);padding:32px 0}.hub-entry:last-child{border-bottom:1px solid var(--line)}.hub-number{font-size:13px;color:var(--muted);align-self:start;padding-top:9px}.hub-entry h2{font-size:clamp(28px,3.7vw,60px);font-weight:500;line-height:1.12;letter-spacing:-.045em;margin:0;transition:color .3s,transform .4s}.hub-entry p{font-size:15px;color:var(--muted);margin:10px 0 0}.hub-arrow{font-size:38px;text-align:right;transition:transform .4s,color .3s}.territory-head{margin-bottom:50px}.territory-head h1{font-size:clamp(46px,6.5vw,100px);letter-spacing:-.055em;font-weight:600;margin:25px 0 18px}.territory-head p{color:var(--muted);font-size:17px}.territory-page .project-card{grid-column:span 6;margin:0;padding:0;background:none}.territory-page .project-card .project-image{aspect-ratio:1.35}.territory-page .project-meta p{color:var(--muted)}.territory-empty{border-top:1px solid var(--line);padding:35px 0;color:var(--muted);line-height:1.8}.territory-footer{margin-top:65px;border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:20px;font-size:14px}
@media(hover:hover) and (pointer:fine){.hub-entry:hover h2{color:var(--accent);transform:translateX(5px)}.hub-entry:hover .hub-arrow{color:var(--accent);transform:translate(4px,-4px)}}
@media(max-width:540px){.hub-page,.territory-page{padding-top:40px}.hub-entry{grid-template-columns:24px 1fr 25px;gap:12px;padding:28px 0}.hub-entry h2{font-size:30px}.hub-entry p{font-size:14px;line-height:1.5}.hub-arrow{font-size:26px}.hub-page>h1{margin-bottom:35px}.territory-page .project-card{margin-bottom:38px}.territory-footer{flex-wrap:wrap}.universe-links{right:-60px}.hub-number{padding-top:4px}}

/* Updated project imagery, navigation and Behance access. */
.universe-menu summary{display:flex;align-items:center;gap:8px}
.universe-menu summary:after{content:'';display:block;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);margin:0}
.location{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.location-pin{width:15px;height:15px;flex:none;vertical-align:middle}.portrait-caption{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
#project-grid .project-image{aspect-ratio:1087 / 805}
#project-grid .project-card--parallax .project-image{aspect-ratio:1297 / 701}
.hub-page>h1{font-family:'DM Sans',Arial,sans-serif;font-size:clamp(32px,5.1vw,82px);font-weight:700;line-height:1.02;letter-spacing:-.065em;white-space:nowrap}
.hub-page>h1 em{font-family:'Bricolage Grotesque','DM Sans',sans-serif;font-style:normal;font-weight:500;letter-spacing:-.055em}
.behance-hero{display:inline-flex;align-items:center;gap:24px;padding:14px 22px;background:var(--accent);color:white;border-radius:999px;font-size:15px;font-weight:600;margin:0 0 35px}
.behance-complete{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:28px 32px;margin-top:50px;margin-bottom:35px;background:color-mix(in srgb,var(--accent) 40%,transparent);color:var(--ink);font-size:clamp(18px,2vw,28px);font-weight:600;line-height:1.35}
.behance-complete span{font-size:1.4em}.behance-hero span,.behance-complete span{transition:transform .35s}
@media(hover:hover) and (pointer:fine){.behance-hero:hover span,.behance-complete:hover span{transform:translate(3px,-3px)}}
@media(max-width:800px){.hub-page>h1{white-space:normal;font-size:clamp(38px,7vw,58px);line-height:1.08}.hub-page>h1 em{display:block}}
@media(max-width:540px){.behance-complete{padding:22px 20px}.detail-title{font-size:clamp(40px,10vw,65px);overflow-wrap:anywhere}.detail-actions a{line-height:1.5}}

/* Shared motion rhythm. Separate reveal, parallax and hover layers. */
:root{--motion-ease:cubic-bezier(.22,.61,.36,1);--motion-fast:300ms;--motion-reveal:600ms;--motion-image:800ms}
.js .reveal{transition:opacity var(--motion-reveal) var(--motion-ease),transform var(--motion-reveal) var(--motion-ease);transition-delay:var(--motion-delay,0ms)}
.js .reveal.pending{transform:translateY(12px)}
.js .project-image.reveal.pending{transform:translateY(14px)}
.motion-title>span,.title-line>span{transition:transform 600ms var(--motion-ease),opacity 500ms var(--motion-ease)}
.about .motion-title>.title-line{display:block;overflow:clip;transform:none;opacity:1;transition:none}
.title-line>span{display:block}.js .motion-title.pending>.title-line>span{transform:translateY(105%);opacity:0}
.about-copy.reveal{opacity:1;transform:none;transition:none}.about-copy .motion-title{--motion-delay:100ms}.about-copy .motion-title span span{transition-delay:100ms}.about-copy p{--motion-delay:180ms}
.project-parallax,.project-settle{position:absolute;inset:0}
.project-parallax{transform:translate3d(0,var(--parallax-y,0px),0)}
.project-card--parallax .project-parallax{inset:-12px 0}
.project-settle{transform:scale(1);transition:transform var(--motion-image) var(--motion-ease);transition-delay:var(--motion-delay,0ms)}
.js .pending .project-settle{transform:scale(1.025)}
.project-card .project-image img{transform:none;scale:1;transition:scale var(--motion-image) var(--motion-ease);will-change:auto}
.project-meta h2{transition:transform var(--motion-fast) var(--motion-ease)}
.project-image .view{background:rgb(255 255 255 / .85);color:var(--ink);transform:none!important;transition:background-color var(--motion-fast),color var(--motion-fast)}
.view>span{display:block;transition:transform var(--motion-fast) var(--motion-ease)}
.project-card a:focus-visible .view,.project-card a:active .view{background:var(--accent);color:#fff}
.project-card a:focus-visible .view>span{transform:translate(3px,-3px)}
.contact-button,.behance-hero,.behance-complete{transition:background-color var(--motion-fast),transform var(--motion-fast) var(--motion-ease),scale 150ms var(--motion-ease),box-shadow var(--motion-fast)}
.contact-button:active,.behance-hero:active,.behance-complete:active{scale:.98}
.behance-complete:focus-visible{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.hub-entry{position:relative}.hub-entry:before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--motion-ease)}
.hub-entry:focus-visible:before{transform:scaleX(1)}.hub-entry:focus-visible h2,.hub-entry:focus-visible .hub-arrow{color:var(--accent)}
.footer-creation{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,23%);align-items:end;gap:30px;overflow:clip}
.footer-creation .contact-title{font-size:clamp(40px,6.4vw,104px);min-width:0;gap:12px;padding:45px 0 55px}
.footer-mascot{align-self:end;--motion-delay:120ms}.footer-mascot img{display:block;width:100%;height:auto}.js .footer-mascot.pending{transform:translateY(12px)}
@media(hover:hover) and (pointer:fine){
 .project-card a:hover img{scale:1.018}.project-card a:hover h2{transform:translateX(3px)}.project-card a:hover .view{background:var(--accent);color:#fff}.project-card a:hover .view>span{transform:translate(3px,-3px)}
 .contact-button--email:hover{background:#303030}.contact-button--behance:hover,.behance-hero:hover{background:color-mix(in srgb,var(--accent) 86%,var(--ink))}.behance-complete:hover{background:color-mix(in srgb,var(--accent) 55%,transparent)}
 .hub-entry:hover:before{transform:scaleX(1)}
}
@media(max-width:800px){.project-card--parallax .project-parallax{inset:0;transform:none}.project-image.reveal{--motion-delay:0ms!important}.footer-creation{gap:18px}.footer-creation .contact-title{font-size:clamp(35px,6vw,52px);flex-wrap:wrap}.project-settle{transition-duration:600ms}}
@media(max-width:540px){.footer-creation{grid-template-columns:minmax(0,1fr);gap:0}.footer-creation .contact-title{font-size:clamp(35px,9vw,50px);padding:30px 0 18px;flex-wrap:nowrap}.footer-mascot{width:min(55%,200px);justify-self:center}.js .reveal.pending{transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.js .reveal.pending,.js .motion-title.pending>span,.js .motion-title.pending>.title-line>span,.js .pending .project-settle{opacity:1;transform:none}.project-parallax{transform:none!important}.project-card a:hover img,.contact-button:active,.behance-hero:active,.behance-complete:active{scale:1}.view>span,.hub-arrow{transform:none!important}}

/* Shared hero proportions, reserved before loading, without upscaling. */
.detail-cover--uniform{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1297 / 701;object-fit:contain;margin-inline:auto}

/* Stable progressive hero: preview first, decoded image second. */
.detail-visual{position:relative;overflow:hidden}.detail-visual--uniform{aspect-ratio:1297 / 701}
.detail-placeholder{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.detail-visual .detail-cover{position:relative;opacity:0;transition:opacity 220ms ease}
.detail-visual--uniform .detail-cover{width:100%;height:100%;object-fit:contain}
.detail-visual.hero-ready .detail-cover{opacity:1}
.detail-visual.hero-ready .detail-placeholder{visibility:hidden;transition:visibility 0s 220ms}
@media(prefers-reduced-motion:reduce){.detail-visual .detail-cover,.detail-visual.hero-ready .detail-placeholder{transition:none}}

/* Hub previews never participate in layout or intercept navigation. */
.hub-preview{display:none;pointer-events:none;position:absolute;top:50%;aspect-ratio:1.65;overflow:hidden;opacity:0;transform:translateY(calc(-50% + 7px)) scale(.98);transition:opacity 280ms ease,transform 420ms var(--motion-ease)}
.hub-preview img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:1024px) and (hover:hover) and (pointer:fine){.hub-preview{display:block}.hub-entry:hover .hub-preview{opacity:1;transform:translateY(-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.hub-preview{transition:none;transform:translateY(-50%)}.hub-entry:hover .hub-preview{transform:translateY(-50%)}}

/* Desktop hover feedback and unclipped about-title descenders. */
.header nav a,.universe-menu summary{transition:color 300ms var(--motion-ease)}
.universe-menu summary{position:relative}
.universe-menu summary:before{content:'';position:absolute;bottom:-5px;left:0;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 300ms var(--motion-ease)}
.project-card .project-image{border-radius:0;transition:opacity 600ms var(--motion-ease),transform 600ms var(--motion-ease),border-radius 450ms var(--motion-ease);transition-delay:var(--motion-delay,0ms),var(--motion-delay,0ms),0ms}
.project-meta h2{transition:transform 300ms var(--motion-ease),color 300ms var(--motion-ease)}
.about h2{font-weight:700}
.about h2 em{font-weight:700}
.about .motion-title{clip-path:none}
.about .motion-title>.title-line{overflow:visible;clip-path:inset(-.12em -.08em -.24em)}
@media(hover:hover) and (pointer:fine){
 .header nav a:hover,.universe-menu summary:hover{color:var(--accent)}
 .header nav a:hover:after,.universe-menu summary:hover:before{background:var(--accent);transform:scaleX(1)}
 .project-card a:hover .project-image{border-radius:20px}
 .project-card a:hover h2{color:var(--accent)}
}
@media(hover:none), (pointer:coarse){.header nav a:hover:after{transform:scaleX(0)}}

/* Final CTA and project-navigation polish. */
.about h2 em{font-weight:400}
.behance-complete{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.detail-back,.detail-actions a{display:inline-block;transition:color 250ms var(--motion-ease),transform 300ms var(--motion-ease)}
.detail-back:focus-visible,.detail-actions a:focus-visible{color:var(--accent)}
@media(hover:hover) and (pointer:fine){
 .detail-back:hover,.detail-actions a:hover{color:var(--accent)}
 .detail-back:hover,.detail-actions a:first-child:hover{transform:translateX(-3px)}
 .detail-actions a:last-child:hover{transform:translateX(3px)}
 .behance-complete:hover{background:color-mix(in srgb,var(--accent) 55%,transparent)}
}
@media(prefers-reduced-motion:reduce){.detail-back:hover,.detail-actions a:hover{transform:none}}

/* Smooth full-accent CTA with independently moving label. */
.behance-complete,.js .behance-complete{transition:background-color 400ms cubic-bezier(.4,0,.2,1),color 400ms cubic-bezier(.4,0,.2,1),scale 150ms var(--motion-ease),opacity 600ms var(--motion-ease),transform 600ms var(--motion-ease)}
.behance-complete .behance-label{font-size:inherit;transform:none;transition:transform 400ms cubic-bezier(.4,0,.2,1)}
.behance-complete:focus-visible{background:var(--accent);color:#fff}
@media(hover:hover) and (pointer:fine){
 .behance-complete:hover{background:var(--accent);color:#fff}
 .behance-complete:hover .behance-label{transform:translateX(4px)}
}
@media(prefers-reduced-motion:reduce){.behance-complete,.behance-complete .behance-label{transition:none}.behance-complete:hover .behance-label{transform:none}}

/* Project introduction: broad description and right-aligned metadata. */
.detail-intro{grid-template-columns:minmax(0,3fr) minmax(0,1fr);align-items:start}
.detail-intro>p:last-child{text-align:right;justify-self:end;max-width:100%;overflow-wrap:break-word}
@media(max-width:540px){.detail-intro{grid-template-columns:minmax(0,1fr)}.detail-intro>p:last-child{justify-self:end;text-align:right}}

/* Full-width project introduction and contact-style hero CTA. */
.detail-intro{grid-template-columns:minmax(0,1fr)}
.detail-intro>p:last-child{text-align:left;justify-self:stretch;width:100%;max-width:none}
@media(hover:hover) and (pointer:fine){.behance-hero:hover{transform:translateY(-2px);box-shadow:0 5px 14px #17232b14}}
@media(prefers-reduced-motion:reduce){.behance-hero:hover{transform:none}}

/* Santévet case study: continuous visuals, deliberate text interludes. */
.case-intro{padding:clamp(80px,10vw,150px) 5%;text-align:center}
.case-intro>p{max-width:1280px;margin:0 auto;font-size:clamp(21px,2.2vw,32px);line-height:1.65}
.case-mission{margin:70px auto 0;max-width:900px}.case-mission h2{font-size:clamp(22px,2.3vw,34px);font-weight:700;margin:0 0 20px;line-height:1.3}.case-mission p{font-size:clamp(21px,2.2vw,32px);font-weight:400;line-height:1.65;margin:0}
.case-sequence{display:block;margin:0;padding:0}.case-sequence>img{display:block;width:100%;height:auto;margin:0;padding:0;border:0}
.case-statement{margin:0;padding:200px clamp(24px,8vw,120px);background:#FED27A;color:#000;text-align:center}
.case-statement p{max-width:1000px;margin:0 auto;font-size:clamp(22px,2.5vw,38px);font-weight:400;line-height:1.55}.case-statement strong{font-weight:700}

.case-mission p{font-weight:300}

/* Santévet editorial text sizing and mission dividers. */
.case-intro>p{font-size:clamp(18px,1.65vw,25px)}
.case-statement p{font-size:clamp(19px,1.9vw,28px)}
.case-mission{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 0}

/* Separate full-width mission block from the introduction. */
.case-intro{padding-left:0;padding-right:0}
.case-intro>p{padding-inline:5%}
.case-mission{max-width:none;margin-top:120px;padding:48px 0}
.case-mission h2{font-size:clamp(21px,1.8vw,27px)}
.case-mission p{font-size:clamp(18px,1.65vw,25px)}
@media(min-width:801px){.case-mission p{white-space:nowrap}}
@media(max-width:800px){.case-mission{margin-top:80px;padding:36px 0}.case-mission p{padding-inline:16px}}

/* Hide the black export edge on 1c and tighten the yellow interlude. */
.case-sequence>img[src*="/1c-"]{clip-path:inset(0 0 2px 0);margin-bottom:-2px}
.case-statement{padding-top:100px;padding-bottom:100px}

/* Jim & Joe: continuous boards, typography and colors share one row. */
.case-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;margin:0;padding:0}
.case-pair>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;margin:0;padding:0}

/* FRÜZZ: continuous boards and a centered social series. */
.fruzz-stories{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;gap:clamp(8px,2vw,32px);padding:100px clamp(12px,4vw,60px);background:#fff;margin:0}
.fruzz-stories>img{display:block;width:100%;height:auto;margin:0;min-width:0}
.fruzz-film{box-sizing:border-box;width:100%;margin:0;padding:clamp(32px,6vw,90px) clamp(20px,8vw,120px);background:#fff}
.fruzz-film-grey{background:#F8F8F8}
.fruzz-film>iframe{display:block;width:100%;max-width:960px;aspect-ratio:16/9;height:auto;margin:0 auto;border:0;background:#000}

@media(max-width:800px){.fruzz-film{padding:32px 12px}}

/* Whole-card tilt: one flat surface, no independent hover translation. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .project-card> a{display:block;transform-origin:50% 50%;transform-style:flat}
 .project-card a:hover img{scale:1}
 .project-card a:hover h2,.project-card a:hover .view,.project-card a:hover .view>span{transform:none}
 .project-card .project-parallax{transform:none!important}
}

/* A single continuous outline, attached to the rigid project card. */
.project-outline{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:visible}
.project-outline rect{width:calc(100% - 6px);height:calc(100% - 6px);rx:0;fill:none;stroke:var(--accent);stroke-width:6;stroke-dasharray:100;stroke-dashoffset:100;opacity:0;transition:stroke-dashoffset 750ms cubic-bezier(.22,.61,.36,1),opacity 250ms ease,rx 450ms var(--motion-ease)}
@media(hover:hover) and (pointer:fine){
 .project-outline{display:block}
 .project-card a:hover .project-outline rect{stroke-dashoffset:0;opacity:.8;rx:17px}
}
@media(prefers-reduced-motion:reduce){.project-outline rect{transition:none}}

.papillons-audio{margin:0;padding:0;background:#fff;line-height:0}
.papillons-audio iframe{display:block;width:70%;height:166px;margin:0 auto;border:0}
.papillons-prototype-wrap{display:flex;justify-content:center;padding:32px 20px;background:#fff}
.papillons-prototype-wrap .papillons-prototype{background:#068791;color:#fff;text-align:center;max-width:100%;white-space:normal}
@media(max-width:800px){.papillons-audio iframe{width:94%}.papillons-prototype{font-size:14px}}

body.cure-dark{--paper:#000;--ink:#fff;--muted:#ddd;--line:#333;background:#000;color:#fff}
.cure-dark .header,.cure-dark .universe-links,.cure-dark footer{background:#000;color:#fff}
.cure-dark .detail-title,.cure-dark .cure-blue{color:#58B5E4}
.cure-intro{max-width:1200px;margin:64px auto 0;font-size:clamp(17px,1.45vw,23px);line-height:1.8;color:#fff}
.cure-intro p{margin:0 0 36px}.cure-intro p:last-child{margin-bottom:0}
.cure-intro strong{font-weight:700}.cure-intro em{font-family:inherit;font-weight:400;letter-spacing:normal;font-style:italic}
.cure-dark .cure-film{background:#000;padding-top:64px;padding-bottom:64px}
.cure-dark .behance-complete{color:#fff}
@media(max-width:800px){.cure-intro{margin-top:40px}.cure-intro p{margin-bottom:26px}.cure-dark .cure-film{padding-top:40px;padding-bottom:40px}}

body.kinetic-dark{--paper:#0F1B17;--ink:#fff;--muted:#fff;--line:#34433d;background:#0F1B17;color:#fff}
.kinetic-dark .header,.kinetic-dark .universe-links,.kinetic-dark footer{background:#0F1B17;color:#fff}
.kinetic-dark .detail-title{color:#10E49A}
.kinetic-dark .behance-complete{color:#fff}

body.soma-dark{--paper:#000000;--ink:#fff;--muted:#fff;--line:#333;background:#000000;color:#fff}
.soma-dark .header,.soma-dark .universe-links,.soma-dark footer{background:#000000;color:#fff}
.soma-dark .detail-title{color:var(--accent)}
.soma-dark .behance-complete{color:#fff}

.project-back-top{position:fixed;right:24px;bottom:24px;z-index:100;width:48px;height:48px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:#20BDD4;color:#fff;font-family:inherit;box-shadow:0 3px 12px rgba(0,0,0,.16);cursor:pointer;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,visibility .25s ease}
.project-back-top span{font-size:26px;line-height:1}
.project-back-top.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.project-back-top:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 6px #20BDD4}
@media(hover:hover) and (pointer:fine){.project-back-top.is-visible:hover{transform:translateY(-3px)}}
@media(max-width:800px){.project-back-top{right:max(16px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.project-back-top{transition:none;transform:none}.project-back-top.is-visible:hover{transform:none}}

/* Lead film projects with an inset player, before the hero and case study. */
.project-opening-film{margin:24px 0 40px}

.case-intro-boards{margin:0}
.case-intro-boards+.case-sequence{margin-top:0}