/* Work gallery and full, original case studies. */
.app-window[data-app=work] .window-content{background:#fbfafc;container-type:inline-size}
.work-content{padding:34px 32px 40px}
.work-content .window-heading{margin-bottom:30px}
.work-content .window-heading h2{font-size:34px;letter-spacing:-1.2px;color:var(--ink)}
.work-content .window-heading p{font-size:14px;line-height:1.6;max-width:470px;margin-top:10px;color:#77717e}
.work-content .work-grid{gap:28px 22px;align-items:start}
.work-content .work-card{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;color:var(--ink)}
.work-content .work-card:hover{transform:none;box-shadow:none}
.project-cover{position:relative;aspect-ratio:1.5;overflow:hidden;border-radius:16px;isolation:isolate;background:#e7e5ef}
.cover-tassovec{background:#dce7e8}
.cover-tass-cms{background:#dcdff1}
.cover-domclick{background:#ebe2d6}
.cover-goals{background:#dfe8db}
.cover-browser{position:absolute;width:86%;height:94%;left:7%;top:16%;border:1px solid #ffffffc9;border-radius:7px 7px 0 0;overflow:hidden;background:#fff;box-shadow:0 10px 30px #30313c24;transition:transform .3s}
.cover-browser-bar{height:16px;background:#fafafc;border-bottom:1px solid #e6e6eb;display:flex;align-items:center;gap:3px;padding:0 7px}
.cover-browser-bar i{height:3px;width:3px;border-radius:50%;background:#cccbd5}
.cover-browser-bar span{width:32%;height:5px;background:#efeff3;border-radius:2px;margin:auto}
.cover-screen{height:calc(100% - 16px);overflow:hidden}
.cover-screen img{display:block;width:100%;height:auto;max-width:none}
.cover-tass-cms .cover-browser{width:92%;left:4%;top:20%;height:82%}
.phone-composition{position:absolute;inset:0;transition:transform .3s}
.cover-phone{position:absolute;width:29%;border:3px solid #fff;border-radius:15px;background:#fff;box-shadow:0 10px 20px #2d3e4930;overflow:hidden}
.cover-phone img{display:block;width:100%;height:auto}
.phone-left{left:9%;top:26%;transform:rotate(-10deg)}
.phone-center{left:35.5%;top:13%;z-index:2}
.phone-right{left:62%;top:26%;transform:rotate(10deg)}
.work-card:hover .cover-browser,.work-card:hover .phone-composition{transform:translateY(-5px)}
.work-card:focus-visible{outline:3px solid #7971c9;outline-offset:6px;border-radius:16px}
.work-content .card-body{display:block;padding:16px 0 0}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:11px;line-height:1.4;color:#817b87}
.card-meta>span{letter-spacing:.04em}
.card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-top:7px}
.work-content .card-body h3{font-size:17px;line-height:1.3;letter-spacing:-.4px;font-weight:550;color:#383340}
.work-content .card-title>svg{width:17px;height:17px;flex:none;margin-top:2px;color:#928a9d}
.work-content .card-body p{font-size:12px;line-height:1.6;margin-top:7px;color:#7c7484}
.closed-work-heading{display:flex;gap:18px;align-items:center;margin:38px 0 20px;color:#938b9c;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.closed-work-heading i{height:1px;flex:1;background:#e8e3eb}
.nda-grid .project-cover{aspect-ratio:2.4}
.cover-nda-admin{background:#e8e5ee}.cover-nda-design{background:#ece2df}
.nda-art{position:absolute;inset:25% 25% -30%;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;transform:rotate(-12deg);opacity:.55}
.nda-art span{border-radius:9px;background:#c4bace;border:1px solid #f8f5fa}
.nda-art span:first-child{grid-row:span 2;background:#b2a4c2}
.nda-design.nda-art{inset:12% 18%;transform:rotate(-8deg);grid-template-columns:repeat(2,1fr)}
.nda-design span:first-child{grid-row:auto;border-radius:50%;background:#cbb2a8}
.nda-design span:nth-child(2){border-radius:30px 8px 8px 8px;background:#d5c0b6}
.nda-design span:nth-child(3){background:#cfb9c3}
.nda-design span:nth-child(4){border-radius:50%;background:#ddccbf}
.cover-lock{position:absolute;inset:0;display:grid;place-items:center;background:#ffffff0d}
.cover-lock svg{width:40px;height:40px;padding:10px;box-sizing:content-box;background:#ffffffdc;border:1px solid #fff;border-radius:20px;color:#81718d;box-shadow:0 5px 25px #56426512}
.nda-case{padding:40px;max-width:520px;margin:auto}
.nda-case .eyebrow{font-size:11px;color:#8d809d}
.nda-case h2{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:18px 0 32px}
.nda-form{display:flex;flex-direction:column;gap:12px}
.nda-form[hidden]{display:none}
.nda-form label{font-size:14px;color:var(--muted)}
.nda-form input{width:100%;padding:13px;border:1px solid #d9d1e2;border-radius:8px;background:#fff;color:#393344;font:inherit}
.nda-form .primary-link{align-self:flex-start;margin:4px 0 0;font-size:13px;padding:12px 18px}
.nda-error{color:#a53b50;font-size:13px;line-height:1.5;min-height:20px}
.nda-success{font-size:16px;line-height:1.7;color:var(--muted)}

.app-window:has(.portfolio-case) .window-content{container-type:inline-size}
.portfolio-case{--fg:#393442;--muted:#77707f;--line:#e3dfe8;--accent:#7865b6;--surface:#fff;--soft:#f4f1f8;--blue-bg:#ede8f7;color:var(--fg);padding:38px 36px 48px;max-width:1040px;margin:auto}
.portfolio-case .case-intro{max-width:760px;margin-bottom:28px}
.portfolio-case .eyebrow{font-size:10px;letter-spacing:.1em;color:var(--muted)}
.portfolio-case h1{font-size:40px;line-height:1.1;letter-spacing:-1.6px;margin:16px 0 20px;font-weight:550;overflow-wrap:anywhere}
.portfolio-case .case-lead{font-size:18px;line-height:1.6;color:var(--muted);margin:0 0 18px}
.portfolio-case .case-role{font-size:12px;line-height:1.6;color:var(--muted)}
.portfolio-case>.project-cover{margin:30px 0;aspect-ratio:1.9}
.portfolio-case .cover-browser-bar{height:22px}
.portfolio-case .cover-browser-bar i{width:4px;height:4px}
.portfolio-case .cover-phone{border-width:5px;border-radius:24px;width:24%}
.portfolio-case .phone-left{left:16%}.portfolio-case .phone-center{left:38%;top:10%}.portfolio-case .phone-right{left:60%}
.portfolio-case .case-toc{display:flex;flex-wrap:wrap;gap:10px 22px;border-block:1px solid var(--line);padding:20px 0;margin:28px 0 0;font-size:12px;line-height:1.4}
.portfolio-case .case-toc a{color:var(--muted);padding:4px 0}
.portfolio-case .case-toc a:hover,.portfolio-case .case-end a:hover{color:var(--accent)}
.portfolio-case .case-body h2{font-size:28px;line-height:1.3;letter-spacing:-.7px;margin:46px auto 20px;max-width:750px;font-weight:550}
.portfolio-case .case-body p,.portfolio-case .case-body ul{font-size:16px;line-height:1.8;color:var(--muted);max-width:750px;margin:0 auto 20px;white-space:pre-line}
.portfolio-case .case-body ul{padding-left:23px}
.portfolio-case .case-body li{padding-left:5px;margin:8px 0}
.portfolio-case .case-body>.case-crosslink{display:block;color:var(--accent);text-decoration:underline;text-underline-offset:4px;font-size:15px;line-height:1.7;margin:22px auto;max-width:750px}
.portfolio-case figure{margin:30px auto 36px;width:100%;max-width:var(--image-width,100%)}
.portfolio-case figure img{display:block;width:100%;height:auto;max-width:100%;border:1px solid var(--line);border-radius:8px;background:#fff}
.portfolio-case figure a{display:block;cursor:zoom-in}
.portfolio-case figcaption{font-size:12px;line-height:1.6;color:var(--muted);margin-top:11px;text-align:center}
.portfolio-case .case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start;margin:30px 0 36px}
.portfolio-case .case-gallery figure{margin:0;max-width:min(100%,var(--image-width,375px));justify-self:center}
.portfolio-case .case-video{max-width:320px}
.portfolio-case video{display:block;width:100%;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.portfolio-case blockquote{max-width:750px;margin:30px auto;border-left:3px solid var(--accent);padding:8px 0 8px 22px;font-size:22px;line-height:1.6}
.portfolio-case .case-end{border-top:1px solid var(--line);margin-top:40px;padding-top:24px;font-size:12px;line-height:1.7;color:var(--muted)}
.portfolio-case .case-end a{text-decoration:underline;text-underline-offset:4px}

[data-theme=dark] .work-content .work-card{background:transparent}
[data-theme=dark] .work-content .window-heading p,[data-theme=dark] .work-content .card-body p,[data-theme=dark] .card-meta{color:#b4aabe}
[data-theme=dark] .work-content .card-body h3{color:#eee7f4}
[data-theme=dark] .project-cover{filter:brightness(.85) saturate(.85)}
[data-theme=dark] .closed-work-heading i{background:#463b50}
[data-theme=dark] .closed-work-heading{color:#b2a4be}
[data-theme=dark] .portfolio-case{--fg:#ede6f3;--muted:#b9adbf;--line:#4c4056;--accent:#b6a2e3;--surface:#302937;--soft:#29232f;--blue-bg:#443650}
[data-theme=dark] .nda-form input{background:#302937;color:#eee7f4;border-color:#5b4e65}
[data-theme=dark] .nda-error{color:#ef9caa}
@container (max-width:580px){
 .work-content{padding:26px 22px 38px}.work-content .work-grid{gap:24px 18px}.work-content .card-body h3{font-size:15px}.work-content .card-body p{font-size:12px}.cover-phone{border-width:2px;border-radius:11px}
 .portfolio-case{padding:28px 24px 38px}.portfolio-case h1{font-size:34px}.portfolio-case .case-lead{font-size:17px}.portfolio-case .case-body h2{font-size:25px}.portfolio-case .case-body p,.portfolio-case .case-body ul{font-size:15px}
 .portfolio-case .cms-map-canvas{padding:20px;grid-template-columns:1fr;grid-template-rows:auto;gap:16px}.portfolio-case .cms-map-lines{display:none}.portfolio-case .cms-map-home{grid-column:1;grid-row:1;min-height:80px}.portfolio-case .cms-map-card{grid-column:1;grid-row:auto;min-height:100px}
}
@container (max-width:430px){
 .work-content{padding:25px 20px 110px}.work-content .window-heading{margin-bottom:26px}.work-content .window-heading h2{font-size:31px}.work-content .window-heading p{font-size:14px;max-width:290px}.work-content .work-grid{grid-template-columns:1fr;gap:28px}.work-content .card-body h3{font-size:18px}.work-content .card-body p{font-size:13px}.card-meta{font-size:12px}.project-cover{aspect-ratio:1.45}.cover-phone{border-width:3px;border-radius:15px}.nda-grid .project-cover{aspect-ratio:2.4}
 .portfolio-case{padding:26px 20px 100px}.portfolio-case h1{font-size:32px;letter-spacing:-1px}.portfolio-case .case-gallery{gap:12px}.portfolio-case .case-toc{gap:8px 16px}.portfolio-case>.project-cover{aspect-ratio:1.4}.portfolio-case .cover-phone{border-width:3px;border-radius:12px}.portfolio-case .case-body h2{font-size:24px}.portfolio-case blockquote{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.cover-browser,.phone-composition{transition:none}}

/* Original case diagrams. */
.portal-map-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:28px 12px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.portal-map-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.portal-map svg{display:block;width:100%;min-width:860px;height:auto;font-family:inherit}
.portal-map-connectors{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.portal-map-node rect{fill:var(--surface);stroke:var(--line);stroke-width:1.4}
.portal-map-node text{fill:var(--fg);stroke:none;stroke-width:0;font-size:18px;font-weight:400;text-anchor:middle}
.portal-map-root rect{fill:var(--blue-bg);stroke:var(--accent);stroke-width:1.6}
.portal-map-root text{fill:var(--accent);font-weight:500}
@media(max-width:580px){.portal-map-scroll{padding:20px 8px;border-radius:12px}}
.cms-map-canvas{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:160px 96px 160px;gap:72px 36px;padding:36px;border:1px solid var(--line);border-radius:16px;background:var(--soft);isolation:isolate}
.cms-map-lines{position:absolute;inset:36px;width:calc(100% - 72px);height:calc(100% - 72px);z-index:-1;color:var(--accent);opacity:.45}
.cms-map-home{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;gap:14px;background:var(--accent);color:var(--surface);border-radius:14px;padding:16px;text-align:center;box-shadow:0 8px 28px color-mix(in srgb,var(--accent) 18%,transparent)}
.cms-map-home strong{font-size:18px;font-weight:550}.cms-map-home-icon{display:grid;grid-template-columns:repeat(2,10px);gap:3px;flex:none}.cms-map-home-icon i{height:9px;border:1px solid currentColor;border-radius:2px}.cms-map-home-icon i:first-child{grid-column:1/-1;height:6px}
.cms-map-card{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .2s,box-shadow .2s}
.cms-map-card:hover{border-color:var(--accent);box-shadow:0 4px 20px color-mix(in srgb,var(--accent) 8%,transparent)}
.cms-map-card h3{font-size:20px;line-height:1.25;letter-spacing:-.4px;margin:16px 0 0;font-weight:550}.cms-map-note{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.4}
.cms-map-top{grid-column:1;grid-row:1}.cms-map-topic{grid-column:2;grid-row:1}.cms-map-popular{grid-column:3;grid-row:1}.cms-map-verticals{grid-column:1;grid-row:3}.cms-map-special{grid-column:2;grid-row:3}.cms-map-photo{grid-column:3;grid-row:3}
.cms-map-mini{display:flex;gap:4px;width:48px;height:25px;align-items:flex-end;color:var(--accent)}.cms-map-mini i{display:block;flex:1;height:100%;background:currentColor;border-radius:3px;opacity:.2}.cms-map-mini i:first-child{opacity:.8}.cms-map-top .cms-map-mini i:first-child{flex:2}.cms-map-topic .cms-map-mini{flex-direction:column;align-items:stretch}.cms-map-topic .cms-map-mini i{width:100%}.cms-map-topic .cms-map-mini i:last-child{width:65%}.cms-map-popular .cms-map-mini i:nth-child(2){height:65%}.cms-map-popular .cms-map-mini i:last-child{height:40%}.cms-map-special .cms-map-mini i:nth-child(2){flex:2;opacity:.5}.cms-map-photo .cms-map-mini{background:var(--blue-bg);border:1px solid var(--accent);border-radius:4px;overflow:hidden;padding:3px}.cms-map-photo .cms-map-mini i{height:65%;transform:rotate(-25deg) translateY(5px);opacity:.6}
@media(max-width:700px){.cms-map-canvas{padding:20px;grid-template-columns:1fr;grid-template-rows:auto;gap:16px}.cms-map-lines{display:none}.cms-map-home{grid-column:1;grid-row:1;min-height:80px}.cms-map-card{grid-column:1;grid-row:auto;min-height:130px;margin-left:20px;position:relative}.cms-map-card:before{content:"";position:absolute;left:-12px;top:-17px;width:12px;height:50%;border-left:1px solid var(--accent);border-bottom:1px solid var(--accent);opacity:.4}.cms-map-card h3{font-size:19px}}

@container (max-width:580px){.portfolio-case .cms-map-canvas{grid-template-columns:1fr;grid-template-rows:auto;gap:16px;padding:20px}.portfolio-case .cms-map-lines{display:none}.portfolio-case .cms-map-home{grid-column:1;grid-row:1;min-height:80px}.portfolio-case .cms-map-card{grid-column:1;grid-row:auto;min-height:100px}}

html[lang=en] .portfolio-case .case-body img[data-image-en$="mobile-case/en/50.png"],
html[lang=en] .portfolio-case .case-body img[data-image-en$="mobile-case/en/51.png"],
html[lang=en] .portfolio-case .case-body img[data-image-en$="mobile-case/en/62.png"],
html[lang=en] .portfolio-case .case-body img[data-image-en$="portal-case/en/59.png"],
html[lang=en] .portfolio-case .case-body img[data-image-en$="cms-case/en/35.png"]{object-fit:cover!important}

/* Published portfolio covers, displayed whole and without color adjustments. */
.project-cover.original-cover{aspect-ratio:1024/543;background:transparent}
.project-cover.original-cover img{display:block;width:100%;height:100%;object-fit:contain}
[data-theme=dark] .project-cover.original-cover{filter:none}
.project-cover.original-nda-cover{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:radial-gradient(ellipse at center,#e8e8fa,#f0edf4);color:#8071b0}
.original-nda-cover svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round}
.original-nda-cover span{font-size:12px;letter-spacing:.15em;color:#8d839a}
[data-theme=dark] .original-nda-cover{background:radial-gradient(ellipse at center,#393344,#2c2833);color:#b7a8d7;filter:none}
[data-theme=dark] .original-nda-cover span{color:#b2a4be}


/* On phones, one frame ties each cover to its title and description. */
@media(max-width:650px), (max-width:950px) and (max-height:500px){
 .work-content .work-grid{gap:20px}
 .work-content .work-card{border:1px solid #e3dfe8;border-radius:16px;background:#fff;overflow:hidden;box-shadow:none}
 .work-content .work-card>.project-cover{border-radius:0}
 .work-content .card-body{padding:14px 16px 16px}
 [data-theme=dark] .work-content .work-card{background:#302937;border-color:#504658}
}