/* Shared page composition. Existing case imagery and descriptions remain intact. */
[data-page=work] .work-section { padding-top:170px; padding-bottom:130px; }
[data-page=work] .section-heading h1 { font-size:clamp(76px,11vw,180px);line-height:.95;letter-spacing:-.07em; }
[data-page=about] .about-section { padding-top:175px; }
[data-page=about] .about-identity h1 { font-size:clamp(62px,7vw,120px);line-height:.96;letter-spacing:-.065em;max-width:90vw;line-height:1.04;text-align:center;text-wrap:balance; }
[data-page=approach] .approach-section { margin-top:130px; }
[data-page=approach] .approach-intro h1 { font-size:clamp(56px,6vw,98px);line-height:.98;letter-spacing:-.06em; }
[data-page=approach] .services-section { padding-bottom:130px; }
.portfolio-case { background:var(--paper); font-family:Basel,Arial,sans-serif; }
.portfolio-case > .header,.portfolio-case > .cookies,.portfolio-case > .modal { display:none!important; }
.case-cover { padding:170px var(--gutter) 65px; display:grid;grid-template-columns:1fr 1.1fr;gap:6vw;align-items:center;min-height:90svh; }
.case-back { display:inline-flex; gap:30px;align-items:center; min-height:44px; font-size:14px; margin-bottom:70px; }
.case-cover h1 { font-size:clamp(64px,8vw,135px);line-height:.96;letter-spacing:-.065em;overflow-wrap:anywhere; }
.case-role { max-width:350px;line-height:1.6;font-size:16px;color:var(--muted);margin-top:28px; }
.case-cover-art { border-radius:10px;overflow:hidden;background:#ebeef4;aspect-ratio:1.07; }
.case-cover-art img { width:100%;height:100%;object-fit:cover; }
.case-cover.is-locked .case-cover-art img { filter:blur(9px);transform:scale(1.05); }
.portfolio-case .project-section { display:block!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:0 var(--gutter) 120px!important;width:auto!important;max-width:none!important;min-height:0!important; }
.portfolio-case .project-info { position:static!important; height:auto!important;max-height:none!important;min-height:0!important;max-width:none!important;width:auto!important;display:block!important; padding:65px 0 80px!important; border-top:1px solid var(--line); }
.portfolio-case .project-copy { width:auto!important;max-width:1050px!important;margin-left:auto; }
.portfolio-case .project-copy h1,.portfolio-case .project-tags,.portfolio-case .next-project { display:none!important; }
.portfolio-case .project-copy > .f-body { font-family:Basel,Arial,sans-serif;font-size:clamp(22px,2.4vw,38px);line-height:1.35;letter-spacing:-.025em; }
.portfolio-case .project-slider { width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;overflow:visible!important;position:static!important;margin:0!important;display:grid!important;gap:28px!important; }
.portfolio-case .project-image { width:100%!important;max-width:none!important;height:auto!important;max-height:none!important;object-fit:contain!important;margin:0!important;border-radius:8px; }
.case-next { position:relative;display:block;border-bottom:1px solid var(--line);padding:0 90px 70px 0;margin-bottom:80px; }
.case-next > span:first-child { display:block;font-size:14px;color:var(--muted);margin-bottom:27px; }
.case-next h2 { font-size:clamp(52px,8vw,128px);line-height:1.02;letter-spacing:-.06em; }
.case-next-arrow { position:absolute;right:0;top:30%;font-size:70px;transition:transform 500ms var(--ease); }
.case-next:hover .case-next-arrow { transform:translate(10px,-10px); }
.portfolio-case .login-container { position:relative!important; height:auto!important; min-height:520px!important; margin:0 var(--gutter) 80px!important; padding:80px 30px!important; width:auto!important; border-radius:10px; background:#e9ecf2; }
.portfolio-case .login-container .f-h2 { font-family:Basel; font-size:clamp(38px,5vw,70px);line-height:1.1;letter-spacing:-.045em; }
.portfolio-case .login-container input { min-height:50px;font-size:16px; }
.portfolio-case .portfolio-footer { font-family:Basel; }
@media(max-width:640px) {
 [data-page=work] .work-section { padding-top:145px; padding-bottom:70px; }
 [data-page=work] .section-heading h1 { font-size:65px; }
 [data-page=about] .about-section { padding-top:150px; }
 [data-page=about] .about-identity h1 { font-size:48px; }
 [data-page=approach] .approach-section { margin-top:115px; }
 [data-page=approach] .approach-intro h1 { font-size:clamp(40px,11vw,47px); }
 .case-cover { padding-top:130px;grid-template-columns:1fr;gap:35px;min-height:0;padding-bottom:45px; }
 .case-back { margin-bottom:30px; }
 .case-cover h1 { font-size:clamp(49px,14vw,74px); }
 .case-role { font-size:14px;margin-top:20px; }
 .case-cover-art { aspect-ratio:1; }
 .portfolio-case .project-info { padding:40px 0 50px!important; }
 .portfolio-case .project-section { padding-bottom:65px!important; }
 .portfolio-case .project-slider { gap:15px!important; }
 .case-next { padding:0 40px 45px 0;margin-bottom:55px; }
 .case-next h2 { font-size:45px; }
 .case-next-arrow { font-size:35px; }
}
/* Typography and imagery do not share a universal fade-up. */
.motion-ready [data-reveal].reveal-pending .text-mask > span { transform:translateY(115%) skewY(4deg); }
[data-reveal].reveal-visible .text-mask > span { transition-duration:1150ms; }
.motion-ready .work-card.reveal-pending .work-image { clip-path:inset(30% 0 0 0 round 8px); }
.work-card.reveal-visible .work-image { transition-duration:1300ms; }
.roll-label { display:block;position:relative;overflow:clip;line-height:1.4;padding-right:.1em;margin-right:-.1em; }
.roll-label > span { display:block;transition:transform 480ms var(--ease); }
.roll-label > span:last-child { position:absolute;inset:0;transform:translateY(125%) rotate(6deg);transform-origin:left; }
:is(a,button):is(:hover,:focus-visible) .roll-label > span:first-child { transform:translateY(-125%) rotate(-6deg); }
:is(a,button):is(:hover,:focus-visible) .roll-label > span:last-child { transform:translateY(0); }
.letter-mask { display:inline-block;overflow:clip;vertical-align:bottom;padding:0 .08em .13em;margin:0 -.08em -.13em; }
.letter-mask > span { display:inline-block; }
.is-arriving .hero-line .letter-mask > span,.is-arriving .case-cover h1 .letter-mask > span { animation:letter-rise 1100ms var(--ease) both;animation-delay:calc(170ms + var(--letter-index)*13ms); }
@keyframes letter-rise { from{transform:translateY(115%) rotate(12deg);opacity:.15} to{transform:none;opacity:1} }
.portfolio-loader { position:fixed;inset:0;z-index:200;display:grid;place-items:center;pointer-events:none;color:#f2f5fb;isolation:isolate; }
.loader-panel { position:absolute;inset:0;background:#080b11;z-index:-1; }
.loader-panel:nth-child(2) { clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%); }
.loader-panel:first-child { clip-path:polygon(0 0,50% 0,50% 100%,0 100%); }
.loader-word { font-size:clamp(60px,16vw,250px);letter-spacing:-.07em;line-height:1;display:flex; }
.loader-word .letter-mask > span { animation:letter-rise 650ms var(--ease) both;animation-delay:calc(var(--letter-index)*35ms); }
.loader-ready .loader-word { transform:translateY(-20%) scale(.97);opacity:0;transition:transform 500ms var(--ease),opacity 250ms ease; }
.loader-ready .loader-panel:first-child { transform:translateY(-101%);transition:transform 950ms cubic-bezier(.76,0,.24,1); }
.loader-ready .loader-panel:nth-child(2) { transform:translateY(-101%);transition:transform 1150ms cubic-bezier(.76,0,.24,1) 80ms; }
.project-portal { position:fixed;z-index:180;overflow:hidden;pointer-events:none;background:#ebeef4; }
.project-portal img { position:absolute;max-width:none; }
.page-shutter { position:fixed;inset:0;z-index:190;background:#080b11;color:white;display:grid;place-items:center;pointer-events:none;transform:translateY(101%); }
.page-shutter > span { font-size:clamp(62px,12vw,180px);letter-spacing:-.065em;max-width:90vw;line-height:1.04;text-align:center;text-wrap:balance; }
@media(prefers-reduced-motion:reduce) {
 .portfolio-loader,.project-portal,.page-shutter { display:none!important; }
 .letter-mask > span,.roll-label > span:first-child { transform:none!important;animation:none!important; }
 .roll-label > span:last-child { display:none; }
 .motion-ready [data-reveal].reveal-pending .text-mask > span { transform:none!important; }
}

.page-motion-control { position:fixed;top:auto;bottom:24px;right:24px;background:#f3f3f3de;color:var(--ink);z-index:51;border-color:var(--line); }
/* (22 Oct, perf) the open login form tested without a :not() inside :has() (a case holds one form at most): that one
   :not() made Chrome check html, body and main again for every element added or removed anywhere on any page */
.portfolio-case:has(.case-cover.is-locked):has(.login-container):not(:has(.login-container.hidden)) .project-section { display:none!important; }
.portfolio-case:has(.case-cover.is-locked) .case-cover { min-height:0;padding-bottom:45px; }
.case-status { color:var(--muted);font-size:14px;margin-top:20px; }

.is-arriving h1[data-reveal] .text-mask > span { animation:heading-rise 1100ms var(--ease) both;animation-delay:calc(120ms + var(--line-index)*110ms); }
@keyframes heading-rise { from { transform:translateY(110%) skewY(4deg); } to { transform:none; } }
@media(prefers-reduced-motion:reduce) { .is-arriving h1[data-reveal] .text-mask > span { animation:none; } }