/* Three distinct sites: automotive campaign, cafe poster, interactive developer portfolio. */
.offer{min-height:100svh}
.website .browser-bar{display:none}
.designs{perspective:1500px}
.website.is-preview{pointer-events:auto}
.preview-open{position:absolute;inset:0;z-index:12;width:100%;height:100%;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;touch-action:pan-y}
.preview-open span{position:absolute;bottom:5%;left:50%;transform:translate(-50%,8px);padding:11px 17px;border-radius:30px;background:#111e;white-space:nowrap;font:500 clamp(10px,1.5cqw,14px)/1.2 Geist,Arial,sans-serif;opacity:0;transition:opacity .2s,transform .2s}
.preview-open:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.preview-open:focus-visible span{opacity:1;transform:translate(-50%,0)}
@media(hover:hover) and (pointer:fine){.preview-open:hover span{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.preview-open span{transition:none}}
.portfolio-heading{top:12%}
.portfolio-heading h2{font-size:clamp(34px,3.6vw,58px)}

/* APEX: a studio campaign, with the polished bodywork as the focal point. */
.apex{color:#f1f2ef;background:#121415;--apex-entry:1}
.apex-photo,.apex-shade{position:absolute;inset:0;width:100%;height:100%}
.apex-photo{object-fit:cover;object-position:50% 58%;transform:scale(calc(1.07 - var(--apex-entry)*.07))}
.apex-shade{background:linear-gradient(180deg,#080a0bc4,transparent 32%,transparent 70%,#080a0bd9)}
.apex-header{position:absolute;top:5%;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between}
.apex-logo{font-size:clamp(24px,3.5cqw,54px);font-weight:650;letter-spacing:-.065em;line-height:1}
.apex-logo>span{display:inline-block;font-size:.3em;vertical-align:top;margin:3px 0 0 5px;letter-spacing:0}
.apex-header>span:last-child{font-size:clamp(8px,1cqw,14px);line-height:1.4;text-align:right;color:#c4c9c7}
.apex-copy{position:absolute;left:5%;top:20%;transform:translateY(calc((1 - var(--apex-entry))*20px))}
.apex-copy>p{font-size:clamp(9px,1.1cqw,15px);color:#bec5c1;margin-bottom:14px}
.apex-copy h2{font-size:clamp(46px,8.5cqw,130px);line-height:.88;font-weight:500;letter-spacing:-.075em}
.apex-copy h2 br{display:none}
.apex.is-preview .apex-copy{top:16%}
.apex.is-preview .apex-copy h2{font-size:12cqw}
.apex-footer{position:absolute;bottom:5%;left:5%;right:5%;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.apex-footer>p{font-size:clamp(8px,1.05cqw,14px);line-height:1.5;color:#c4c9c7}
.apex-services-toggle{display:flex;align-items:center;gap:35px;border:0;border-bottom:1px solid #ced3ce90;background:none;color:#f1f2ef;padding:12px 0;font-size:clamp(9px,1.15cqw,16px)}
.apex-services-toggle>span{font-size:1.4em;font-weight:300}
.apex-services{position:absolute;inset:0 0 0 48%;z-index:6;background:#dce0dc;color:#1e2522;padding:5% 5% 3%;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain}
.apex-services>header{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:clamp(8px,1.05cqw,14px)}
.apex-services>header button{background:none;border:0;color:inherit;font-size:30px;padding:0 5px}
.apex-services h3{font-size:clamp(30px,5.5cqw,80px);font-weight:450;line-height:.96;letter-spacing:-.065em;margin:12% 0}
.apex-services dl{margin:0}
.apex-services dl>div{padding:6% 0;border-top:1px solid #1e252237}
.apex-services dt{font-size:clamp(13px,1.8cqw,23px);letter-spacing:-.025em}
.apex-services dd{font-size:clamp(9px,1.05cqw,14px);line-height:1.6;margin:8px 0 0;color:#4f5a54;max-width:35ch}
.apex-services>p{font-size:clamp(8px,.85cqw,11px);line-height:1.5;color:#626e66;margin-top:auto;padding-top:20px}
@container(max-width:600px){
 .apex-copy{top:22%}.apex-copy h2{font-size:15cqw}.apex-copy>p{font-size:2.4cqw;margin-bottom:12px}
 .apex-copy h2 br{display:block}
 .apex-logo{font-size:8cqw}.apex-header>span:last-child{font-size:2.3cqw}
 .apex-photo{object-position:49% 62%}
 .apex-footer>p{font-size:2.2cqw}.apex-services-toggle{font-size:2.5cqw;gap:14px;padding:10px 0}
 .apex-services{inset:0;padding:7%}.apex-services h3{font-size:12cqw;margin:9% 0}
 .apex-services>header{font-size:3cqw}.apex-services dt{font-size:5cqw}.apex-services dd{font-size:3.2cqw}.apex-services>p{font-size:2.5cqw}
}
@media(prefers-reduced-motion:reduce){.apex-photo,.apex-copy{transform:none}}

/* KOP: a big cafe wordmark, a rounded photographic poster, a menu counter. */
.kop{color:#a82320;background:#f8e8c9}
.kop-header{inset:0 0 auto;height:28%;display:block;padding:0;background:none;z-index:3}
.kop-logo{position:absolute;left:5%;top:8%;font-size:clamp(100px,25cqw,280px);font-weight:850;letter-spacing:-.095em;line-height:.9;transform:rotate(-5deg)}
.kop-header .sample-nav{position:absolute;right:6%;top:16%;font-size:clamp(8px,1.3cqw,16px)}
.kop-header button{position:absolute;right:6%;top:42%;font-size:clamp(10px,1.3cqw,16px);padding:10px 16px;border:1px solid #a8232070;border-radius:40px;color:#a82320;gap:16px}
.kop-poster{inset:28% 0 15%}
.kop-poster img{left:39%;top:0;width:55%;height:100%;object-fit:cover;object-position:50% 68%;transform:rotate(4deg);filter:none;border-radius:48% 48% 7% 7%}
.coffee-editorial-copy{position:absolute;left:6%;top:25%;width:34%;z-index:2;transform:rotate(-7deg)}
.kop-poster h2{position:static;text-align:left;transform:none;font:italic 400 clamp(23px,5.5cqw,70px)/1.03 Georgia,serif;letter-spacing:-.045em}
.coffee-editorial-copy>p{font-size:clamp(8px,1.4cqw,17px);line-height:1.5;margin-top:13%;max-width:19ch}
.kop-side-note{position:absolute;right:4%;bottom:7%;background:#f8e8c9;color:#a82320;border-radius:50%;width:15cqw;height:15cqw;max-width:150px;max-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(9px,1.8cqw,21px);transform:rotate(12deg);border:1px solid #a8232050}
.kop-footer{inset:auto 0 0;height:10%;min-height:0;padding:0 6%;background:#a82320;color:#f8e8c9;display:flex;gap:4%;font-size:clamp(8px,1.2cqw,16px)}
.kop-footer>span{display:flex;flex:1;flex-direction:column;gap:5px}
.kop-footer b{font-size:.85em;font-weight:400;opacity:.75}

@media(max-width:650px){
 .portfolio-heading{top:12%}.portfolio-heading h2{font-size:33px}
 .oever-header{grid-template-columns:1fr;justify-items:center}.oever-header .sample-nav{display:none}
 .oever-logo{font-size:12cqw}.oever-copy{top:38%}.oever-copy h2{font-size:15cqw}
 .oever-copy>span{font-size:clamp(8px,2.5cqw,12px);margin-bottom:8%}
 .oever-footer{font-size:clamp(7px,2.1cqw,11px)}.oever-footer>span:last-child{display:none}
 .kop-logo{font-size:29cqw;top:14%}.kop-header .sample-nav{font-size:2.4cqw;top:15%}
 .kop-header button{font-size:clamp(8px,2.6cqw,12px);padding:7px 10px;gap:8px;top:43%}
 .kop-poster{inset:27% 0 17%}.kop-poster img{left:34%;width:60%}
 .coffee-editorial-copy{left:5%;top:15%;width:36%}.kop-poster h2{font-size:7cqw}
 .coffee-editorial-copy>p{font-size:clamp(8px,2.4cqw,12px)}
 .kop-side-note{width:20cqw;height:20cqw;font-size:2.8cqw}
 .kop-footer{height:12%;font-size:clamp(7px,2.4cqw,12px);padding:0 5%;gap:3%}
}
html:not(.motion) .website{border-radius:0}