*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#080808;color:#f5f5f1;font-family:Arial,Helvetica,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:5px}header{position:fixed;z-index:20;inset:0 0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;padding:23px 26px;background:#080808e8;backdrop-filter:blur(12px);font-size:13px}header>span{text-align:right}header button{text-align:left;width:max-content}header button span{margin-left:14px}.identity{font-weight:bold}.identity sup{font-size:8px}sup{font-size:.24em;vertical-align:top;display:inline-block;margin-top:.2em;letter-spacing:0}.hero{min-height:76vh;padding:100px 26px 22px;display:flex;flex-direction:column;justify-content:space-between}.hero-top{display:flex;justify-content:space-between;color:#858585;font-size:12px}.hero-bottom{display:grid;grid-template-columns:1.5fr 1fr auto;align-items:end;gap:20px}.hero h1{font-size:clamp(80px,15vw,240px);letter-spacing:-.085em;line-height:.8;margin:160px 0 0;font-weight:500}.hero p{line-height:1.4;margin:0}.muted{color:#8e8e8e}.explore{font-size:11px}.feature{display:block;position:relative;height:80vh;min-height:440px;overflow:hidden}.feature img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s}.feature:hover img{transform:scale(1.025)}.feature>div{position:absolute;bottom:0;left:0;width:100%;padding:50px 26px 24px;background:linear-gradient(transparent,#0009);display:grid;grid-template-columns:1.5fr 1fr auto;font-size:18px}.section{padding:120px 26px 0}.section-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:48px}.section-title h2{font-weight:400;letter-spacing:-.055em;font-size:clamp(42px,5vw,80px);margin:0}.section-title>span{font-size:22px}.work-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.filters{display:flex;gap:22px}.filters button{color:#858585;padding:6px 0;border-bottom:1px solid transparent}.filters button.active{color:#fff;border-color:#fff}.views{display:flex;gap:8px;align-items:center}.views span{color:#888;margin-right:8px}.views button{font-size:21px;color:#777}.views button[aria-pressed=true]{color:#fff}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:42px 16px}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card-image{aspect-ratio:16/10;background:#181818;overflow:hidden}.card img{width:100%;height:100%;object-fit:cover;transition:transform .7s}.card:hover img{transform:scale(1.035)}.card-caption{display:flex;justify-content:space-between;gap:12px;padding-top:12px;line-height:1.4}.card-caption span{color:#888;text-align:right}.eyebrow{margin-bottom:45px;color:#aaa}.about h2{font-size:clamp(32px,4.7vw,74px);font-weight:400;letter-spacing:-.05em;line-height:1.08;max-width:1450px;margin:0}.about h2 span{color:#777}.about-details{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin:70px 0 70px 42%;font-size:16px;line-height:1.5}.about-details p{margin:0}.capabilities{border-top:1px solid #333;padding-top:28px;display:grid;grid-template-columns:42% 1fr}.capabilities>div{font-size:clamp(25px,3vw,44px);letter-spacing:-.04em;line-height:1.3}.archive-row{display:grid;grid-template-columns:1.3fr 1fr auto;border-top:1px solid #333;padding:19px 0;transition:background .2s,padding .2s}.archive-row:last-child{border-bottom:1px solid #333}.archive-row span{color:#888}.archive-row:hover{background:#eee;color:#111;padding-left:12px;padding-right:12px}.contact{padding-top:170px}.contact h2{font-size:clamp(60px,10vw,160px);font-weight:400;letter-spacing:-.07em;line-height:.95;margin:45px 0 70px}.contact-details{display:grid;grid-template-columns:1fr 1fr;gap:50px;line-height:1.5}.contact-details p{max-width:480px;margin:0}footer{display:grid;grid-template-columns:1fr 1fr auto;padding:100px 26px 25px;color:#888;font-size:12px}footer>a:first-child{color:white;font-size:24px;letter-spacing:-1px}nav{position:fixed;inset:60px 0 0;background:#080808;z-index:19;padding:7vh 26px;overflow:auto}nav>a{font-size:clamp(50px,8vw,120px);letter-spacing:-.06em;display:block;border-bottom:1px solid #292929;line-height:1.2}nav small{font-size:13px;vertical-align:top;letter-spacing:0}nav p{margin-top:40px;color:#888;line-height:1.5}[hidden]{display:none!important}.skip{position:fixed;top:-100px;z-index:100;background:#fff;color:#000;padding:15px}.skip:focus{top:10px}.project-head{padding:150px 26px 55px}.project-head h1{font-size:clamp(48px,8vw,120px);letter-spacing:-.06em;font-weight:400;margin:40px 0 25px}.project-info{display:grid;grid-template-columns:1fr 1fr;gap:30px;line-height:1.6}.project-info p{max-width:650px}.project-gallery img{display:block;width:100%;height:auto;margin-bottom:16px}.project-next{display:flex;justify-content:space-between;font-size:30px;padding:80px 26px;border-bottom:1px solid #333}.project-label{color:#999} @media(max-width:700px){header{padding:20px 16px;font-size:11px}.hero{padding:95px 16px 25px;min-height:68vh}.hero-bottom{grid-template-columns:1fr 1fr}.hero h1{grid-column:1/-1;font-size:25vw;margin:140px 0 25px}.hero p{font-size:12px}.explore{text-align:right}.hero-top{font-size:10px}.feature{height:58vh;min-height:350px}.feature>div{padding:40px 16px 20px;font-size:13px;grid-template-columns:1fr auto}.feature>div span:nth-child(2){display:none}.section{padding:85px 16px 0}.section-title{margin-bottom:28px}.filters{gap:14px;font-size:11px}.views{display:none}.grid,.grid.three{grid-template-columns:1fr;gap:30px}.card-caption{font-size:12px}.about-details{margin:35px 0;gap:25px;grid-template-columns:1fr;font-size:15px}.capabilities{grid-template-columns:35% 1fr}.archive-row{grid-template-columns:1.3fr 1fr auto;font-size:11px;gap:15px;line-height:1.5}.contact-details{grid-template-columns:1fr;font-size:14px;gap:30px}.contact h2{margin:35px 0 45px}footer{padding:80px 16px 25px;gap:20px;font-size:10px}.project-head{padding:125px 16px 35px}.project-info{grid-template-columns:1fr;gap:10px}.project-next{font-size:21px;padding:50px 16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Preserve the complete typography of the campaign cover. */
.feature{height:auto;min-height:0}.feature img{height:auto;display:block}.feature:hover img{transform:none}.feature>div{position:static;background:none;padding:20px 26px}.card[href="#project/campaign-studies"] img{object-fit:contain}.card[href="#project/campaign-studies"]:hover img{transform:none}
@media(max-width:700px){.feature>div{padding:16px}}

/* Pain Team: individually composed project imagery. */
.pain-gallery{padding:0 26px;display:grid;gap:56px}.pain-image{margin:0;min-width:0}.pain-image img{width:100%;height:auto;display:block}.pain-image figcaption{font-size:11px;line-height:1.4;color:#888;padding-top:10px}.pain-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.pain-editorial{display:grid;grid-template-columns:.92fr 1fr;gap:6vw;align-items:center;padding:30px 5vw}.pain-stack{display:grid;gap:30px}.pain-lead{margin:0 -26px}.pain-lead figcaption{padding-left:26px}.card[href="#project/pain-team"] img{object-position:center}
@media(max-width:700px){.pain-gallery{padding:0 16px;gap:30px}.pain-pair,.pain-editorial{grid-template-columns:1fr;gap:24px}.pain-editorial{padding:0}.pain-stack{gap:24px}.pain-lead{margin:0 -16px}.pain-lead figcaption{padding-left:16px}.pain-image figcaption{font-size:10px}}

/* Giulietta: portrait-led editorial sequences and wide packaging studies. */
.giulietta-gallery{display:grid;gap:64px;padding:0 26px}.giulietta-image{margin:0;min-width:0}.giulietta-image img{display:block;width:100%;height:auto}.giulietta-image figcaption{color:#888;font-size:11px;padding-top:10px;line-height:1.4}.giulietta-lead{margin:0 -26px}.giulietta-lead figcaption{padding-left:26px}.giulietta-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.giulietta-inset{padding:16px 7vw;gap:4vw}.giulietta-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.giulietta-details{display:grid;grid-template-columns:.8fr 1fr;align-items:center;gap:9vw;padding:40px 10vw}.giulietta-finale{width:56%;margin:20px auto 0}.card[href="#project/giulietta-biscotti"] img{object-position:center}
@media(max-width:700px){.giulietta-gallery{padding:0 16px;gap:30px}.giulietta-lead{margin:0 -16px}.giulietta-lead figcaption{padding-left:16px}.giulietta-pair,.giulietta-trio,.giulietta-details{grid-template-columns:1fr;gap:24px;padding:0}.giulietta-finale{width:100%;margin:0}.giulietta-image figcaption{font-size:10px}}

/* Mercedes Ziani: foundations, tactile applications and digital presence. */
.mercedes-gallery{display:grid;gap:64px;padding:0 26px}.mercedes-image{margin:0;min-width:0}.mercedes-image img{display:block;width:100%;height:auto}.mercedes-image figcaption{color:#888;font-size:11px;padding-top:10px;line-height:1.4}.mercedes-lead{margin:0 -26px}.mercedes-lead figcaption{padding-left:26px}.mercedes-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}.mercedes-inset{padding:24px 9vw;gap:6vw}.mercedes-finale{padding:20px 5vw;gap:4vw}.card[href="#project/mercedes-ziani"] img{object-position:center}
@media(max-width:700px){.mercedes-gallery{padding:0 16px;gap:30px}.mercedes-lead{margin:0 -16px}.mercedes-lead figcaption{padding-left:16px}.mercedes-pair{grid-template-columns:1fr;gap:24px;padding:0}.mercedes-image figcaption{font-size:10px}}

/* Capital Inicial: creative authorship and uncropped stage frames. */
.project-credit{font-size:clamp(19px,2.6vw,36px);letter-spacing:-.035em;margin:0 0 48px;line-height:1.25}.capital-gallery{display:grid;gap:56px;padding:0 26px}.capital-image{margin:0;min-width:0}.capital-image img{display:block;width:100%;height:auto}.capital-image figcaption{font-size:11px;color:#888;line-height:1.4;padding-top:10px}.capital-lead{margin:0 -26px}.capital-lead figcaption{padding-left:26px}.capital-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}.capital-sequence{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.capital-inset{padding:24px 10vw}.card[href="#project/capital-inicial"] .card-caption{flex-wrap:wrap}.card[href="#project/capital-inicial"] .card-caption span{text-align:left}
@media(max-width:700px){.capital-gallery{padding:0 16px;gap:30px}.capital-lead{margin:0 -16px}.capital-lead figcaption{padding-left:16px}.capital-pair,.capital-sequence{grid-template-columns:1fr;gap:24px}.capital-inset{padding:0}.project-credit{margin-bottom:30px}.capital-image figcaption{font-size:10px}}

/* Jota Quest: panoramic LED artwork, native proportions. */
.jota-gallery{display:grid;gap:60px;padding:0 26px}.jota-image{margin:0;min-width:0}.jota-image img{display:block;width:100%;height:auto}.jota-image figcaption{font-size:11px;color:#888;padding-top:10px;line-height:1.4}.jota-lead{margin:0 -26px}.jota-lead figcaption{padding-left:26px}.jota-inset{padding:20px 8vw}.jota-sequence{display:grid;gap:26px}.card[href="#project/jota-quest"] img{object-fit:cover;object-position:center}.card[href="#project/jota-quest"] .card-caption{flex-wrap:wrap}.card[href="#project/jota-quest"] .card-caption span{text-align:left}
@media(max-width:700px){.jota-gallery{padding:0 16px;gap:30px}.jota-lead{margin:0 -16px}.jota-lead figcaption{padding-left:16px}.jota-inset{padding:0}.jota-sequence{gap:24px}.jota-image figcaption{font-size:10px}}

.card[href="#project/criolo-rael-mano-brown"] .card-caption{flex-wrap:wrap}.card[href="#project/criolo-rael-mano-brown"] .card-caption span{text-align:left}

/* Campaign: individual imagery grouped by visual study. */
.campaign-gallery{padding:0 26px;display:grid;gap:110px}.campaign-chapter{display:grid;gap:42px}.campaign-image{margin:0;min-width:0}.campaign-image img{display:block;width:100%;height:auto}.campaign-image figcaption{font-size:11px;color:#888;padding-top:10px;line-height:1.4}.campaign-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}.campaign-lead{margin:0 -26px}.campaign-lead figcaption{padding-left:26px}
@media(max-width:700px){.campaign-gallery{padding:0 16px;gap:60px}.campaign-chapter{gap:26px}.campaign-pair{grid-template-columns:1fr;gap:26px}.campaign-lead{margin:0 -16px}.campaign-lead figcaption{padding-left:16px}.campaign-image figcaption{font-size:10px}}

/* Menu link interaction */
#menu>a{transition:color .2s ease}
#menu>a:hover,#menu>a:focus-visible{color:#888}

/* Light site with a dark, interactive opening cover. */
body{background:#fff;color:#111}
header{background:#fffffff2;color:#111;transition:background .35s,color .35s}
header.cover-dark{background:#000;color:#fff}
nav{background:#fff;color:#111}
nav>a{border-color:#ddd}
button:focus-visible,a:focus-visible{outline-color:currentColor}
.filters button.active{color:#111;border-color:#111}
.views button[aria-pressed=true],footer>a:first-child{color:#111}
.card-image{background:#f2f2f2}
.eyebrow,.project-label{color:#666}
.capabilities,.archive-row,.archive-row:last-child,.project-next{border-color:#ddd}
.about h2 span{color:#777}
.hero{position:relative;isolation:isolate;overflow:hidden;background:#000;color:#fff;transition:background .45s ease,color .45s ease}
.hero::after{content:"";display:block;position:absolute;inset:0;z-index:3;background:#fff;mix-blend-mode:difference;pointer-events:none;transform-origin:bottom;transform:scaleY(var(--cover-reveal,0))}
.hero-symbol{position:absolute;left:-12px;top:145px;width:160px;height:160px;object-fit:contain;pointer-events:none;transition:filter .45s ease}

@media(max-width:700px){.hero-symbol{width:120px;height:120px;left:-12px;top:120px}}

.capital-video video{display:block;width:100%;height:auto;background:#080808}

/* Original 2048px transparent mark, inverted by the existing scroll overlay. */
.hero h1.hero-logo{margin:70px 0 0;width:clamp(230px,30vw,440px);max-width:100%;line-height:0;letter-spacing:0}
.hero-logo img{display:block;width:100%;height:auto;filter:invert(1);transform:rotate(var(--logo-rotation,0deg));transform-origin:center;will-change:transform}
@media(max-width:700px){.hero h1.hero-logo{width:clamp(210px,64vw,330px);margin:50px auto 35px;grid-column:1/-1}}
@media(prefers-reduced-motion:reduce){.hero-logo img{transform:none;will-change:auto}}

/* Closing section: the same scroll-driven negative reveal as the opening. */
.contact,body>footer{position:relative;isolation:isolate;background:#fff}
.contact::after,body>footer::after{content:"";position:absolute;inset:0;z-index:3;background:#fff;mix-blend-mode:difference;pointer-events:none;clip-path:inset(var(--closing-cut,100%) 0 0)}
.contact-heading{display:flex;align-items:center;justify-content:space-between;gap:5vw}
.contact-heading h2{flex:1;min-width:0}
.contact-symbol{display:block;width:clamp(180px,24vw,360px);height:auto;margin-right:2vw;transform:rotate(var(--closing-rotation,0deg));transform-origin:center;will-change:transform}
@media(max-width:700px){.contact-heading{gap:16px}.contact-heading h2{font-size:clamp(38px,8.7vw,60px)}.contact-symbol{width:25vw;margin-right:0}}
@media(prefers-reduced-motion:reduce){.contact-symbol{transform:none;will-change:auto}}

/* Small original corner signature, preserving its transparent source. */
.identity,.footer-identity{display:flex;align-items:center;gap:10px;width:max-content}
.corner-mark{display:block;width:30px;height:auto;aspect-ratio:998/570;flex:none;opacity:.8}
header.cover-dark .corner-mark{filter:invert(1)}
footer .corner-mark{width:36px}
.about h2 .hover-word{color:inherit;transition:color .35s ease}
.about h2 .about-muted{color:#777}
.capability-line{display:block;width:fit-content;transition:color .35s ease}
@media(hover:hover) and (pointer:fine){.about h2 .hover-word:hover,.capability-line:hover{color:#fff}}
@media(max-width:700px){.corner-mark{width:23px}.identity,.footer-identity{gap:7px}footer .corner-mark{width:28px}}

.contact-email{display:inline-block;margin-top:20px;text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere;transition:opacity .25s}.contact-email:hover{opacity:.65}

/* An editorial pause between selected work and the studio introduction. */
.motion-interlude{display:grid;grid-template-columns:1fr 2fr;align-items:end;gap:6vw;margin:140px 8vw 20px 26px;padding-top:24px;border-top:1px solid #ddd}
.motion-note{display:flex;flex-direction:column;gap:8px;font-size:11px;line-height:1.4;color:#777}
.motion-note span:first-child{color:#111}
.motion-interlude figure{margin:0;min-width:0}
.motion-interlude video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
@media(max-width:700px){.motion-interlude{grid-template-columns:1fr;margin:80px 16px 0;gap:20px;padding-top:18px}.motion-note{flex-direction:row;justify-content:space-between}}

/* Keep the white motion interlude seamless, including fractional video edges. */
.motion-interlude{border:0}
.motion-interlude video{background:#fff;border:0;outline:0;aspect-ratio:auto}