:root{--bg:#0b0b0b;--fg:#f2f0eb;--muted:#a29f99;--line:#2a2a28;--pad:clamp(24px,4.4vw,76px);--sans:"Helvetica Neue",Helvetica,Arial,sans-serif;--serif:Georgia,"Times New Roman",serif;--mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:400;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;max-width:100%}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--fg);outline-offset:7px}::selection{background:#f2f0eb;color:#0b0b0b}.wrap{width:calc(100% - var(--pad)*2);max-width:1440px;margin-inline:auto}.eyebrow{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:1.35px;line-height:1.6;margin:0}.muted{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:10px;left:10px;z-index:200;background:var(--fg);color:var(--bg);padding:15px;transform:translateY(-150%)}.skip:focus{transform:none}
.header{position:absolute;top:0;left:0;z-index:20;width:100%;height:104px;padding-inline:var(--pad);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff15}.logo img{width:126px;height:auto}.header nav{display:flex;align-items:center;gap:44px}.header nav a{font-size:13px;line-height:1.6;color:#e2e0db;transition:color .2s}.header nav a:hover{color:#fff}.nav-contact span{margin-left:17px;font-size:20px}.menu-toggle{display:none}
.hero{position:relative;min-height:760px;min-height:max(760px,100svh);isolation:isolate;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.hero-image{position:absolute;z-index:-3;inset:0 0 0 20%;overflow:hidden}.hero-image img{width:100%;height:100%;object-fit:cover;object-position:52% 50%;filter:saturate(.35) brightness(.65)}.hero-shade{position:absolute;z-index:-2;inset:0;background:linear-gradient(90deg,#0b0b0b 0%,#0b0b0bf5 14%,#0b0b0b94 48%,#0b0b0b12 100%),linear-gradient(0deg,#0b0b0b 0%,#0b0b0b00 28%,#0b0b0b00 75%,#0b0b0b85 100%)}.hero-content{padding-top:30px;padding-bottom:85px}.hero-eyebrow{display:flex;gap:10px;align-items:center;margin-bottom:43px;color:#d3d1cb}.dot{width:5px;height:5px;border-radius:50%;background:#d3d1cb}.hero h1{font-size:clamp(60px,7.65vw,118px);font-weight:400;line-height:1.01;letter-spacing:-5px;margin:0 0 33px;max-width:1150px}.hero h1 em{font-family:var(--serif);font-weight:400;letter-spacing:-4px}.hero-description{color:#c8c5bf;font-size:16px;line-height:1.7;margin:0}.hero-bottom{position:absolute;bottom:44px;left:0;right:0;display:flex;justify-content:space-between;align-items:center}.explore{display:flex;align-items:center;gap:18px;font-size:12px}.circle-arrow{display:grid;place-items:center;border:1px solid #ffffff55;border-radius:50%;width:42px;height:42px;font-size:20px;transition:background .25s,color .25s}.explore:hover .circle-arrow{background:var(--fg);color:var(--bg)}.frame-caption{display:flex;align-items:flex-end;flex-direction:column;gap:8px;font-size:13px}.frame-caption .eyebrow{color:var(--muted);font-size:9px}.frame-caption>span:last-child span{margin-left:18px}

.section{padding-block:110px}.section-top{display:flex;justify-content:space-between;gap:24px;margin-bottom:55px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:52px}h2{font-size:clamp(40px,4.3vw,66px);line-height:1.09;letter-spacing:-2.3px;font-weight:400;margin:0}h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-1.7px}.section-heading>p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 5px;min-width:295px}.work-button{display:block;width:100%;padding:0;background:none;border:none;text-align:left}.work-image{display:block;position:relative;overflow:hidden;background:#181818;aspect-ratio:1.32}.work-image img{width:100%;height:100%;object-fit:cover;transition:transform .75s cubic-bezier(.2,.7,.3,1),filter .75s;filter:saturate(.65)}.work-feature .work-image{aspect-ratio:2.2}.work-feature .work-image img{object-position:center 54%;filter:saturate(.55) brightness(.85)}.work-feature .work-image:after{content:"";position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#0008);pointer-events:none}.image-note{position:absolute;left:28px;bottom:28px;z-index:1;font-size:9px}.open-work{position:absolute;bottom:22px;right:22px;z-index:2;border:1px solid #ffffff50;background:#0004;backdrop-filter:blur(6px);width:48px;height:48px;display:grid;place-items:center;border-radius:50%;font-size:25px;transition:background .25s,color .25s}.work-button:hover .work-image img{transform:scale(1.035);filter:saturate(.9)}.work-button:hover .open-work{background:var(--fg);color:var(--bg)}.work-info{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:19px}.work-title{font-size:22px;letter-spacing:-.4px}.work-category{font-size:11px;color:var(--muted);text-align:right}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:42px;margin-top:65px}
.studio{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.studio-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:70px}.studio h2{font-size:clamp(36px,3.5vw,56px)}.studio-copy{max-width:430px;padding-top:3px}.studio-copy p{font-size:17px;color:#d7d4ce;line-height:1.65;margin:0 0 22px}.studio-copy p:last-child{color:var(--muted);font-size:14px;margin-bottom:0}.services{border-top:1px solid var(--line)}.services details{border-bottom:1px solid var(--line)}.services summary{display:flex;align-items:center;gap:28px;cursor:pointer;padding:25px 0;list-style:none;font-size:22px;letter-spacing:-.4px}.services summary::-webkit-details-marker{display:none}.service-number{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted);width:28px;flex-shrink:0}.detail-symbol{font-size:24px;font-weight:300;color:var(--muted);margin-left:auto;transition:transform .25s}.services details[open] .detail-symbol{transform:rotate(45deg)}.services details p{max-width:560px;margin:0 48px 26px 56px;font-size:14px;line-height:1.8;color:var(--muted)}
.contact{padding-bottom:82px}.contact-title{display:flex;align-items:center;justify-content:space-between;gap:32px}.contact-title h2{font-size:clamp(60px,7.6vw,112px);line-height:1.03;letter-spacing:-4.5px}.contact-title h2 em{letter-spacing:-3px}.contact-arrow{display:grid;place-items:center;width:116px;height:116px;border:1px solid #7d7c76;border-radius:50%;font-size:62px;line-height:1;font-weight:300;flex-shrink:0;transition:background .3s,color .3s}.contact-arrow:hover{background:var(--fg);color:var(--bg)}.contact-links{display:flex;align-items:baseline;justify-content:flex-end;gap:30px;margin-top:49px}.email{font-size:23px;letter-spacing:-.5px;border-bottom:1px solid #85827c;padding-bottom:6px}.footer{border-top:1px solid var(--line);padding-block:30px 37px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}.footer a:hover{color:var(--fg)}.footer a span{margin-left:7px}
.project-dialog{background:#10100f;color:var(--fg);padding:0;border:1px solid #3d3d39;width:min(1160px,calc(100% - 48px));max-height:calc(100svh - 48px);overscroll-behavior:contain}.project-dialog::backdrop{background:#000d;backdrop-filter:blur(10px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;background:#10100f}.close-dialog{background:none;border:none;font-size:12px;padding:7px}.close-dialog span{font-size:24px;vertical-align:middle;margin-left:13px}.dialog-content{padding:40px 32px}.dialog-content h2{margin:13px 0 20px}.project-description{font-size:16px;line-height:1.7;color:var(--muted);max-width:720px;margin:0 0 32px}.project-gallery{display:grid;gap:42px}.project-gallery img{width:100%;height:auto}.project-link{display:inline-block;border-bottom:1px solid var(--muted);padding-bottom:6px;margin-top:28px;font-size:13px}.project-link[hidden]{display:none}body.dialog-open{overflow:hidden}
@media(min-width:1700px){.hero-image{left:25%}.hero-content{padding-top:70px}}
@media(max-width:1000px){.header nav{gap:28px}.hero h1{font-size:8.1vw;letter-spacing:-3px}.hero h1 em{letter-spacing:-3px}.section{padding-block:85px}.studio-grid{gap:40px;grid-template-columns:1.2fr 1fr}.work-info{display:block}.work-category{display:block;text-align:left;margin-top:8px}.footer{flex-wrap:wrap}.hero{min-height:720px}}
@media(max-width:650px){html{scroll-padding-top:24px}.header{height:82px}.logo img{width:112px}.menu-toggle{display:flex;align-items:center;gap:15px;padding:10px 0;background:none;border:none;font-size:12px}.menu-symbol{font-size:24px;line-height:1;transition:transform .2s}.menu-toggle[aria-expanded=true] .menu-symbol{transform:rotate(45deg)}.header nav{display:none;position:absolute;top:82px;left:0;right:0;background:#10100ffb;padding:30px var(--pad);border-bottom:1px solid var(--line);gap:28px;align-items:flex-start;flex-direction:column}.header nav.open{display:flex}.header .nav-contact{margin-left:0}.header nav a{font-size:22px}.hero{min-height:740px;min-height:max(740px,100svh)}.hero-image{inset:0 -36% 0 0}.hero-image img{object-position:60% 50%;filter:saturate(.25) brightness(.46)}.hero-shade{background:linear-gradient(90deg,#0b0b0bd9,#0b0b0b2b),linear-gradient(0deg,#0b0b0b,#0b0b0b00 35%,#0b0b0b6e)}.hero-content{padding-top:10px;padding-bottom:70px}.hero-eyebrow{font-size:8px;letter-spacing:1px;margin-bottom:32px;gap:9px}.hero h1{font-size:clamp(44px,11.25vw,72px);letter-spacing:-2px;line-height:1.1;margin-bottom:27px}.hero h1 em{letter-spacing:-2px;white-space:nowrap}.hero-description{font-size:13px;line-height:1.8;max-width:280px}.hero-bottom{bottom:31px}.explore{gap:12px;font-size:11px}.circle-arrow{width:36px;height:36px}.frame-caption{font-size:11px}.frame-caption .eyebrow{font-size:8px}.frame-caption>span:last-child span{margin-left:6px}.clients{padding-block:42px 46px}.clients h2{font-size:8px;letter-spacing:1px}.section{padding-block:68px}.section-top{margin-bottom:37px}.section-top .eyebrow{font-size:8px;letter-spacing:1px}.section-top>p:nth-child(2){display:none}.section-heading{display:block;margin-bottom:35px}h2{font-size:41px;letter-spacing:-1.5px}.section-heading>p{font-size:13px;margin-top:23px;min-width:0}.work-feature .work-image{aspect-ratio:1.3}.work-feature .work-image img{object-position:49% center}.image-note{left:16px;bottom:20px;font-size:8px}.open-work{width:40px;height:40px;bottom:14px;right:14px;font-size:22px}.work-info{padding-top:15px}.work-title{font-size:20px}.work-category{font-size:10px;margin-top:7px}.work-grid{grid-template-columns:1fr;gap:38px;margin-top:40px}.work-image{aspect-ratio:1.4}.studio-grid{grid-template-columns:1fr;gap:28px}.studio h2{font-size:37px;letter-spacing:-1.5px}.studio-copy p{font-size:15px;line-height:1.7}.studio-copy p:last-child{font-size:13px}.services summary{gap:15px;font-size:17px;letter-spacing:-.3px;padding-block:23px}.service-number{width:20px;font-size:9px}.detail-symbol{font-size:22px}.services details p{font-size:13px;margin-left:35px;margin-right:25px}.contact-title{gap:15px}.contact-title h2{font-size:clamp(45px,11.5vw,68px);letter-spacing:-2px}.contact-title h2 em{letter-spacing:-2px}.contact-arrow{width:61px;height:61px;font-size:36px}.contact-links{align-items:flex-end;margin-top:35px}.email{font-size:20px}.footer{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;align-items:start;font-size:9px;padding-block:26px 32px}.footer>span:nth-child(2){line-height:1.6;text-align:right}.footer>a:last-child{text-align:right}.project-dialog{width:calc(100% - 24px);max-height:calc(100svh - 24px)}.dialog-top{padding:18px 20px}.dialog-content{padding:28px 20px}.dialog-content h2{font-size:36px}.project-description{font-size:14px}}
@media(max-width:360px){.hero h1{font-size:10.9vw}.services summary{font-size:15px}.hero-description{font-size:12px}.frame-caption{font-size:10px}.contact-title h2{font-size:42px}.contact-arrow{width:50px;height:50px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Brand identities in a seamless, monochrome strip. */
.clients{padding-block:40px 45px;border-bottom:1px solid var(--line)}
.clients-top{display:flex;align-items:center;justify-content:space-between;gap:18px}
.clients h2{color:var(--muted);font-size:9px}
.marquee-toggle{background:none;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;font-size:11px;color:var(--muted)}
.logo-marquee{overflow:hidden;margin-top:30px;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.logo-track{display:flex;width:max-content;animation:brand-scroll 32s linear infinite}
.logo-marquee.paused .logo-track{animation-play-state:paused}
.logo-group{list-style:none;display:flex;align-items:center;flex-shrink:0;gap:70px;padding:0 70px 0 0;margin:0}
.logo-group li{width:170px;height:78px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-group img{width:100%;height:auto;max-height:72px;object-fit:contain;filter:grayscale(1);opacity:.85}
.logo-group .brand-porsche{width:195px}.logo-group .brand-aido{width:90px}.logo-group .brand-aido img{max-height:64px}
.logo-group .brand-vda{width:195px}.logo-group .brand-cinema{width:118px}
@keyframes brand-scroll{to{transform:translateX(-50%)}}
.studio-detail{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:start;margin-top:62px}
.studio-photo{margin:0;min-width:0}.studio-photo img{width:100%;height:auto;aspect-ratio:1.5;object-fit:cover}
.studio-photo figcaption{display:flex;justify-content:space-between;gap:18px;margin-top:17px;color:var(--muted);font-size:11px}
.studio-detail .services summary{font-size:19px;gap:18px;padding:24px 0}
.studio-detail .services details p{margin-left:46px;margin-right:20px}
.project-intro{position:relative;padding:40px 32px 0;isolation:isolate;overflow:hidden}
.project-intro h2{margin:15px 0 24px}
.project-intro.with-backdrop{height:440px;display:flex;align-items:flex-end;padding:36px 42px}
.project-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-2}
.project-backdrop[hidden]{display:none}
.project-intro.with-backdrop:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#10100f 0%,#10100f05 65%),linear-gradient(90deg,#10100fcc,#10100f00 70%)}
.with-backdrop .project-intro-copy{max-width:85%}.with-backdrop h2{font-size:clamp(50px,6vw,82px);margin-bottom:0;letter-spacing:-3px}
.with-backdrop .eyebrow{color:#d7d4ce}
.dialog-content{padding-top:10px}.with-backdrop+.dialog-content{padding-top:25px}
.media-heading{display:flex;align-items:baseline;justify-content:space-between;gap:15px;margin-bottom:20px}
.media-heading h3{font-size:11px;font-family:var(--mono);font-weight:400;letter-spacing:1.3px;margin:0}
.media-heading>span{font-size:10px;color:var(--muted)}
.media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.media-item{margin:0;min-width:0}.media-item img{aspect-ratio:1.5;object-fit:cover;display:block;background:#171717}
.media-item.square img{aspect-ratio:1}.media-item.credit img{aspect-ratio:auto;object-fit:contain}
.media-item figcaption{color:var(--muted);font-size:10px;line-height:1.6;margin-top:10px;display:flex;justify-content:space-between;gap:12px}
.video-frame{width:100%;aspect-ratio:16/9;min-height:200px;border:0;display:block;background:#161616}
.media-item figcaption a{white-space:nowrap}.media-item figcaption a:hover{color:var(--fg)}
@media(max-width:1000px){.studio-detail{gap:35px}.studio-detail .services summary{font-size:17px;gap:12px}.studio-detail .service-number{width:20px}.studio-photo figcaption{flex-direction:column;gap:7px}.project-intro.with-backdrop{height:370px}}
@media(max-width:650px){.clients{padding-block:35px 36px}.clients h2{font-size:8px;letter-spacing:.8px}.logo-group{gap:42px;padding-right:42px}.logo-group li{width:145px}.logo-group .brand-porsche{width:170px}.logo-group .brand-vda{width:170px}.logo-group .brand-aido{width:78px}.logo-group .brand-cinema{width:102px}.logo-marquee{margin-top:22px}.studio-detail{grid-template-columns:1fr;gap:35px;margin-top:36px}.studio-photo figcaption{flex-direction:row}.studio-detail .services summary{font-size:17px;padding-block:23px}.project-intro{padding:28px 20px 0}.project-intro.with-backdrop{height:340px;padding:28px 20px}.project-intro.with-backdrop h2{font-size:46px;letter-spacing:-1.8px}.project-intro-copy .eyebrow{font-size:8px;max-width:220px}.project-backdrop{object-position:62% center}.media-grid{grid-template-columns:1fr;gap:26px}.media-heading{align-items:start;flex-direction:column;gap:9px}.project-gallery{gap:34px}.dialog-content{padding-top:10px}.media-item figcaption{font-size:10px}}
@media(max-width:360px){.studio-photo figcaption{font-size:10px}.studio-detail .services summary{font-size:15px}.project-intro.with-backdrop{height:300px}.project-intro.with-backdrop h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none}.logo-marquee{overflow:auto;mask-image:none}.logo-group[aria-hidden]{display:none}.marquee-toggle{display:none}}

.logo-group .brand-moscardino{width:175px}.logo-group .brand-jmuseo{width:92px}.logo-group .brand-jmuseo img{max-height:67px}

#porsche .work-image img{object-position:center 54%;filter:saturate(.55) brightness(.85)}
#cinemazero .work-image img{object-position:62% center;filter:none}
#jmuseo .work-image img{object-position:center 44%;filter:saturate(.82)}
#moscardino .work-image img{object-position:center 42%;filter:none}
.email{margin-left:auto}
.project-dialog[data-project="porsche"] .project-backdrop{object-position:center bottom}
@media(min-width:651px){
  .media-grid.odd .media-item:last-child,.media-item.featured{grid-column:1/-1}
  .media-grid.odd .media-item:last-child img{aspect-ratio:2.2}
  .media-item.featured img{aspect-ratio:1.7;object-position:center bottom}
  .project-dialog[data-project="cinema"] .project-backdrop{object-position:center 52%}
}
@media(max-width:650px){
  #porsche .work-image img{object-position:49% center}
  .project-dialog[data-project="porsche"] .project-backdrop{object-position:80% bottom}
  .project-dialog[data-project="cinema"] .project-backdrop{object-position:75% center}
}

@media(min-width:651px){.project-dialog[data-project="moscardino"] .project-backdrop{object-position:center 25%}}

/* A full-width cinema scene for the studio. */
.studio-stage{position:relative;isolation:isolate;min-height:740px;overflow:hidden}
.studio-scene{position:absolute;inset:0 18% 0 0;z-index:-3}
.studio-scene img{width:100%;height:100%;object-fit:contain;object-position:left center;filter:grayscale(1) brightness(.85)}
.studio-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#0b0b0b00 18%,#0b0b0b25 40%,#0b0b0be6 72%,#0b0b0b 92%),linear-gradient(0deg,#0b0b0b,#0b0b0b00 25%,#0b0b0b00 75%,#0b0b0b)}
.studio-stage-content{padding-top:65px}
.studio-stage .section-top{margin-bottom:140px}
.studio-statement{width:48%;max-width:650px;margin-left:auto}
.studio-statement h2{font-size:clamp(42px,4.5vw,72px);line-height:1.08;letter-spacing:-2.5px}
.studio-statement>p{max-width:420px;font-size:16px;line-height:1.75;color:#c8c5bf;margin:30px 0 0}
.studio-credit{position:absolute;left:0;right:0;bottom:34px;font-size:10px;color:var(--muted);margin-block:0}
.studio-detail{margin-top:0;padding-block:45px 100px}
.studio-detail .studio-copy{padding-top:24px;max-width:390px}
.studio-detail .studio-copy .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:1.35px;color:var(--muted);margin-bottom:24px}
.studio-detail .studio-copy p:last-child{font-size:17px;line-height:1.8}
.project-dialog[data-project="cinema"] .project-gallery .media-item:first-child img{filter:brightness(1.18)}
@media(min-width:1700px){.studio-stage{min-height:820px}.studio-stage .section-top{margin-bottom:180px}}
@media(max-width:1000px){.studio-stage{min-height:660px}.studio-stage .section-top{margin-bottom:105px}.studio-statement{width:49%}.studio-statement h2{font-size:42px}.studio-statement>p{font-size:14px}}
@media(max-width:650px){
  .studio-stage{min-height:710px}
  .studio-scene{inset:80px 0 auto}
  .studio-scene img{height:auto;object-fit:contain;filter:grayscale(1) brightness(.9)}
  .studio-shade{background:linear-gradient(0deg,#0b0b0b 46%,#0b0b0b00 65%),linear-gradient(180deg,#0b0b0b 8%,#0b0b0b00 22%)}
  .studio-stage-content{padding-top:48px}
  .studio-stage .section-top{margin-bottom:280px}
  .studio-statement{width:100%;max-width:390px;margin-left:0}
  .studio-statement h2{font-size:40px;letter-spacing:-1.5px}
  .studio-statement>p{font-size:14px;line-height:1.75;margin-top:23px}
  .studio-credit{bottom:28px;font-size:9px}
  .studio-detail{margin-top:0;padding-block:15px 65px;gap:28px}
  .studio-detail .studio-copy{padding-top:0;max-width:350px}
  .studio-detail .studio-copy p:last-child{font-size:15px}
}
@media(max-width:360px){.studio-stage{min-height:690px}.studio-stage .section-top{margin-bottom:235px}.studio-statement h2{font-size:35px}.studio-statement>p{font-size:13px}}

/* Drawn arrows keep the same appearance on phones and desktops. */
.icon-arrow{display:inline-block;width:1em;height:1em;vertical-align:middle;flex-shrink:0}
.circle-arrow .icon-arrow,.open-work .icon-arrow{width:1.05em;height:1.05em}
.media-item figcaption a .icon-arrow{margin-left:6px;width:1.15em;height:1.15em}
/* A soft fade joins the opening photograph to the dark page. */
.hero-shade{background:linear-gradient(90deg,#0b0b0b 0%,#0b0b0bf5 14%,#0b0b0b94 48%,#0b0b0b12 100%),linear-gradient(0deg,#0b0b0b 0%,#0b0b0beb 5%,#0b0b0b99 14%,#0b0b0b30 26%,#0b0b0b00 43%,#0b0b0b00 75%,#0b0b0b85 100%)}
/* Preserve the complete GT3 photograph, including the mountains. */
.project-dialog[data-project="porsche"] .project-intro.with-backdrop{height:auto;display:block;padding:0;min-height:0}
.project-dialog[data-project="porsche"] .project-backdrop{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.5;object-fit:contain;object-position:center}
.project-dialog[data-project="porsche"] .project-intro-copy{position:absolute;left:42px;bottom:36px}
.project-dialog[data-project="porsche"] .project-intro.with-backdrop:after{background:linear-gradient(0deg,#10100f 0%,#10100f99 12%,#10100f00 48%),linear-gradient(90deg,#10100f99,#10100f00 55%)}
@media(max-width:650px){
 .hero-shade{background:linear-gradient(90deg,#0b0b0bd9,#0b0b0b2b),linear-gradient(0deg,#0b0b0b 0%,#0b0b0bef 8%,#0b0b0b88 20%,#0b0b0b00 43%,#0b0b0b6e 100%)}
 .project-dialog[data-project="porsche"] .project-intro-copy{left:20px;bottom:18px}
 .project-dialog[data-project="porsche"] .project-intro.with-backdrop h2{font-size:40px;margin-top:9px}
 .project-dialog[data-project="porsche"] .project-intro-copy .eyebrow{font-size:7px}
}

@media(min-width:651px){
 .project-dialog[data-project="porsche"] .project-intro.with-backdrop{height:min(772px,calc((100vw - 122px)/1.5),calc(100svh - 160px))}
 .project-dialog[data-project="porsche"] .project-backdrop{position:absolute;inset:auto;top:0;left:50%;transform:translateX(-50%);width:auto;height:100%;aspect-ratio:1.5;object-fit:contain;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
}

/* Fade the photograph's left boundary itself, avoiding a visible vertical seam. */
.hero-image{mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 100%)}
@media(max-width:650px){.hero-image{mask-image:none}}