:root{--bg:#fcfcfb;--ink:#232421;--muted:#6c6e68;--line:#e3e4de;--soft:#f1f2ee;--accent:#456448;--surface:#fff;--ease-out:cubic-bezier(.23,1,.32,1);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scrollbar-gutter:stable}body{margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;text-wrap:pretty}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-weight:500;letter-spacing:-.045em;line-height:1.16;text-wrap:balance}p{color:var(--muted)}p+p{margin-top:18px}.skip{position:fixed;top:-80px;left:20px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 15px}.skip:focus{top:10px}.case-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:75px;max-width:1320px;margin:auto;padding:0 46px}.eyebrow{font:10px/1.5 ui-monospace,SFMono-Regular,monospace;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}.case-main{padding:61px 0 32px;min-width:0}.case-header{margin-bottom:36px}.case-header .topline{display:flex;align-items:center;justify-content:space-between;gap:20px}.draft{font-size:10px;border:1px solid var(--line);border-radius:20px;padding:3px 9px;color:var(--muted);white-space:nowrap}.case-header h1{font-size:58px;margin:22px 0 15px}.case-header .subtitle{font-size:29px;letter-spacing:-.035em;line-height:1.25;max-width:690px;color:var(--ink)}.intro{font-size:15px;max-width:680px;margin-top:24px}.meta{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:22px;border-top:1px solid var(--line);padding-top:20px;margin-top:30px}.meta dt{font:10px ui-monospace,monospace;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:9px}.meta dd{margin:0;font-size:12px}.media{margin:0}.media figcaption{display:flex;justify-content:space-between;gap:15px;margin-top:12px;font-size:11px;color:var(--muted)}.media-stage{background:#eaf0e6;border:1px solid #dce5d6;border-radius:7px;padding:50px 36px;overflow:hidden;color:#3d4a36}.vstupko .media-stage{background:#eee8df;border-color:#e1d8cb;color:#65533e}.appointli .media-stage{background:#e6edf3;border-color:#d9e3ec;color:#41566b}.idea .media-stage{background:#eee9f3;border-color:#e0d8e8;color:#655573}.app-window{background:#fffefa;border:1px solid #dce0d5;border-radius:8px;box-shadow:0 18px 35px #25361c0a;overflow:hidden;max-width:850px;margin:auto;line-height:1.5;color:#434b3e}.window-bar{padding:12px 18px;display:flex;align-items:center;gap:5px;border-bottom:1px solid #e8ebe3;font:9px ui-monospace,monospace;color:#7b8373}.window-bar i{width:5px;height:5px;border-radius:50%;background:#d6dccf}.window-bar span{margin-left:10px}.app-layout{display:grid;grid-template-columns:125px 1fr;min-height:310px}.app-nav{border-right:1px solid #e8ebe3;padding:22px 12px;font-size:9px}.app-brand{font-size:12px;margin:0 8px 24px;font-weight:600}.app-nav span{display:block;margin:6px 0;padding:7px 8px;color:#7b8373}.app-nav span:first-of-type{background:#edf1e7;border-radius:4px;color:#556647}.app-body{padding:27px 24px}.app-body h3{font-size:23px;max-width:300px;margin:7px 0 24px}.app-eyebrow{font:9px ui-monospace,monospace;color:#839077}.app-rows{display:grid;gap:9px}.app-row{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid #e3e8da;border-radius:5px;padding:13px;font-size:10px}.app-row span{color:#8a9280;font-size:9px}.app-row b{font-weight:500}.app-footer{font:8px ui-monospace,monospace;color:#929986;margin-top:18px}.story-section{padding-top:72px;scroll-margin-top:30px}.section-label{display:flex;align-items:center;gap:15px;margin-bottom:28px}.section-label span{font:10px ui-monospace,monospace;color:var(--muted)}.section-label h2{font-size:25px}.prose{max-width:690px}.prose p{font-size:16px;line-height:1.8}.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 35px;margin-top:30px}.build-item{border-top:1px solid var(--line);padding-top:20px}.build-item .eyebrow{margin-bottom:14px}.build-item h3{font-size:18px;margin-bottom:10px}.build-item p{font-size:13px}.screens{display:grid;grid-template-columns:1fr 1fr;gap:23px;margin-top:38px}.screens .media-stage{padding:28px 20px}.screen-card{min-height:225px;background:#fffefa;border:1px solid #dce0d5;border-radius:6px;padding:23px;box-shadow:0 10px 20px #25361c08;color:#4c5546}.screen-card h3{font-size:20px;margin:10px 0 23px}.screen-line{height:7px;background:#e9ece4;border-radius:3px;width:80%;margin-top:11px}.screen-line.short{width:53%}.screen-rule{border-top:1px solid #e7ebe1;margin:22px 0 0}.sample-status{display:inline-block;background:#edf1e7;color:#67765a;font-size:9px;padding:4px 7px;border-radius:4px;margin-top:20px}.challenge{display:grid;grid-template-columns:1fr 1.5fr;gap:40px;border-top:1px solid var(--line);padding:29px 0}.challenge h3{font-size:23px;max-width:265px}.challenge p{font-size:14px}.challenge .decision{font-size:10px;margin:21px 0 9px}.walkthrough{margin-top:40px}.video-stage{border:1px solid var(--line);border-radius:7px;min-height:310px;background:var(--soft);display:grid;place-items:center;padding:38px;text-align:center}.video-placeholder{max-width:465px}.video-symbol{font:32px Georgia,serif;color:var(--muted);margin-bottom:15px}.video-placeholder h3{font-size:23px;margin-bottom:12px}.video-placeholder p{font-size:13px}.video-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:22px}.button{background:var(--ink);color:var(--bg);border:0;border-radius:5px;padding:10px 14px;font-size:12px}.button.secondary{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.local-note{font-size:10px!important;margin-top:12px!important}.video-stage video{width:100%;max-height:560px;border-radius:4px;background:#181b17}.video-stage:has(video:not([hidden])){padding:16px;display:block}.video-error{font-size:12px;margin-top:12px;color:var(--ink)}[hidden]{display:none!important}.draft-details{margin-top:25px;border-left:2px solid var(--line);padding:0 0 0 17px;font-size:12px;color:var(--muted)}.draft-details summary{cursor:pointer;color:var(--ink)}.draft-details p{margin-top:10px}.next-project{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:68px;padding:28px 0}.next-project h2{font-size:30px;margin-top:9px}.next-project .arrow{font-size:32px}.page-footer{display:flex;justify-content:space-between;gap:20px;padding-top:25px;font-size:11px;color:var(--muted)}
@media(hover:hover) and (pointer:fine){.next-project:hover h2{text-decoration:underline;text-underline-offset:6px}.button:hover{opacity:.88}}
@media(max-width:1100px){.case-layout{gap:40px;padding:0 30px;grid-template-columns:180px minmax(0,1fr)}.media-stage{padding:32px 24px}.app-layout{grid-template-columns:100px 1fr}.app-body{padding:23px 18px}.meta{grid-template-columns:1fr 1fr}.meta>div:last-child{grid-column:1/-1}.screens .media-stage{padding:20px 12px}.screen-card{padding:18px}.challenge{gap:25px}}
@media(max-width:760px){.case-layout{display:block;padding:0 20px}.case-main{padding-top:32px}.case-header h1{font-size:43px}.case-header .subtitle{font-size:25px}.case-header .topline{align-items:start;gap:12px}.case-header .eyebrow{max-width:220px}.intro{font-size:14px}.meta{gap:17px}.media-stage{padding:26px 16px}.app-layout{grid-template-columns:1fr;min-height:260px}.app-nav{display:none}.app-body{padding:22px 18px}.app-body h3{font-size:21px}.app-row{padding:10px;gap:12px}.app-row span{font-size:8px}.media figcaption{font-size:10px;flex-wrap:wrap;gap:5px}.story-section{padding-top:48px}.section-label{margin-bottom:23px}.section-label h2{font-size:23px}.prose p{font-size:15px}.build-grid{gap:23px}.build-item h3{font-size:17px}.build-item p{font-size:12px}.screens{grid-template-columns:1fr;gap:25px;margin-top:28px}.screens .media-stage{padding:30px}.screen-card{min-height:230px}.challenge{grid-template-columns:1fr;gap:16px;padding:25px 0}.challenge h3{max-width:none;font-size:22px}.video-stage{min-height:300px;padding:25px 18px}.video-placeholder h3{font-size:21px}.next-project{margin-top:45px}.next-project h2{font-size:26px}.page-footer{flex-direction:column;gap:7px}}
@media(max-width:390px){.case-layout{padding:0 16px}.build-grid{grid-template-columns:1fr}.case-header .topline{flex-direction:column;gap:12px}.app-row{flex-wrap:wrap;gap:5px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media print{.sidebar,.video-actions,.local-note{display:none}.case-layout{display:block;padding:0}.case-main{padding:0}.media-stage,.build-item,.challenge{break-inside:avoid}.story-section{padding-top:30px}}


:root{--surface:#fff;--badge-bg:#eef1e9;--badge-ink:#5d7050;--selected-bg:#eaf0e4;--selected-ink:#3f5934;--toolbar:#fff;--preview-bg:#eef0e9;--preview-line:#e1e4da}

/* Start the list centered, then let it scroll up to its sticky top inset. */
.sidebar{align-self:stretch;min-width:0;padding-top:max(24px,calc((100vh - var(--project-nav-height,256px))/2));padding-top:max(24px,calc((100dvh - var(--project-nav-height,256px))/2))}
.project-nav{position:sticky;top:24px;display:flex;flex-direction:column;gap:5px;margin:0}
.project-nav a{display:flex;align-items:center;gap:13px;padding:10px 0;font-size:15px;font-weight:500;color:#6b7280;background:transparent}
.project-nav .number{font:inherit;color:inherit}
.project-nav a[aria-current=page]{color:#000;background:transparent}
.project-nav .back{margin:0 0 12px}
.exit-arrow{width:13px;text-align:center}
@media(hover:hover) and (pointer:fine){.project-nav a:hover{color:#000;background:transparent}}
@media(max-width:760px){
 .sidebar{position:sticky;top:0;z-index:20;height:auto;overflow:visible;padding:12px 0;background:var(--bg);border-bottom:1px solid var(--line)}
 .project-nav{position:static;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:3px 14px}
 .project-nav a{font-size:15px;gap:6px;padding:7px 0}
 .project-nav .back{margin:0}
}
@media print{.sidebar{display:none}}

/* Case-study iteration: title first, editorial headlines, short reading measures. */
@font-face{font-family:"Crimson Pro";font-style:normal;font-weight:200 900;font-display:swap;src:url('../assets/fonts/CrimsonPro-Variable.woff2') format('woff2')}@font-face{font-family:"Crimson Pro Fallback";src:local("Georgia");size-adjust:90%;ascent-override:99.5%;descent-override:23.9%;line-gap-override:0%}
:root{--case-heading-font:"Crimson Pro","Crimson Pro Fallback",Georgia,serif;--case-heading-weight:420;--case-heading-tracking:-.03em}
.case-layout{max-width:1440px;grid-template-columns:210px minmax(0,1fr);gap:64px}
.case-main{padding-top:40px}
.hero-media{margin:36px 0 0}
.media-stage{padding:44px 38px;border:0;border-radius:16px;background:linear-gradient(180deg,#edf5e6,#e0ecd5)}
.vstupko .media-stage{background:linear-gradient(180deg,#f5eee4,#ecdfce)}
.appointli .media-stage{background:linear-gradient(180deg,#edf3fa,#dfe8f4)}
.idea .media-stage{background:linear-gradient(180deg,#f3edf8,#e8def2)}
.app-window{max-width:850px;border-radius:9px;box-shadow:0 8px 12px #26311e05,0 22px 45px #26311e0d}
.app-layout{min-height:350px}
.app-body{padding:32px}
.app-body h3{max-width:440px;font-size:25px;margin-bottom:28px}
.app-row{padding:15px;font-size:11px}
.app-row span{font-size:10px}
.case-header{margin:0;max-width:100%}
.case-header .topline{justify-content:flex-start;gap:12px 18px;flex-wrap:wrap;margin-bottom:14px}
.project-name{font-size:13px;font-weight:500;color:var(--ink)}
.case-header .eyebrow{font-family:inherit;font-size:12px;line-height:1.5;letter-spacing:0;text-transform:none}
.case-header .draft{margin-left:auto;border:0;padding:0;font-size:10px}
.case-header h1.subtitle{font-family:var(--case-heading-font);font-weight:var(--case-heading-weight);letter-spacing:var(--case-heading-tracking);font-size:clamp(38px,4vw,52px);line-height:1.08;max-width:760px;margin:0 0 20px;color:var(--ink);text-wrap:balance}
.case-header .intro{max-width:648px;font-size:16px;line-height:1.75;margin-top:0}
.meta{max-width:720px;grid-template-columns:1fr 1.15fr 1.2fr;gap:28px;border:0;padding:0;margin:30px 0 0}
.meta dt{font-family:inherit;font-weight:500;text-transform:none;letter-spacing:0;font-size:13px;color:var(--ink);margin-bottom:6px}
.meta dd{font-size:13px;line-height:1.65;color:var(--muted)}
.meta>div:last-child{grid-column:auto}
.story-section{padding-top:44px}
.section-label{margin-bottom:13px}
.section-label h2{font-size:17px;letter-spacing:-.015em;line-height:1.5;font-weight:500}
.prose{max-width:648px}
.prose p{font-size:15px;line-height:1.8}
.build-grid{max-width:720px;gap:25px 36px;margin-top:27px}
.build-item{border:0;padding:0}
.build-item h3{font-size:15px;letter-spacing:-.015em;margin-bottom:7px;line-height:1.5}
.build-item p{font-size:13px;line-height:1.8}
.screens{grid-template-columns:1fr;gap:38px;margin-top:36px}
.screens .media-stage{padding:45px 60px}
.screen-card{max-width:610px;min-height:280px;margin:auto;padding:32px 38px;border-radius:8px;box-shadow:0 15px 35px #26311e0c}
.screen-card h3{font-size:26px;max-width:400px}
.screen-line{height:9px;margin-top:15px}.screen-rule{margin-top:30px}.sample-status{margin-top:26px}
.media figcaption{font-size:10px;margin-top:12px}
.media-explanation{max-width:648px;font-size:13px;line-height:1.75;margin-top:10px}
.challenge{max-width:648px;grid-template-columns:1fr;gap:12px;padding:25px 0;border-top:1px solid var(--line)}
.challenge:first-of-type{border:0;padding-top:10px}
.challenge h3{font-family:var(--case-heading-font);font-size:30px;line-height:1.15;font-weight:var(--case-heading-weight);letter-spacing:var(--case-heading-tracking);max-width:600px}
.challenge p{font-size:15px;line-height:1.8}
.challenge .decision{font-family:inherit;font-size:12px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink);margin:18px 0 7px}
.video-stage{border:0;border-radius:16px;background:var(--soft);min-height:360px}
.video-placeholder h3{font-family:var(--case-heading-font);font-size:32px;font-weight:var(--case-heading-weight);letter-spacing:var(--case-heading-tracking)}
.next-project{margin-top:52px}.next-project h2{font-family:var(--case-heading-font);font-size:38px;font-weight:var(--case-heading-weight);letter-spacing:var(--case-heading-tracking)}
@media(max-width:1100px){.case-layout{grid-template-columns:180px minmax(0,1fr);gap:36px}.media-stage{padding:30px 22px}.app-body{padding:26px 20px}.app-layout{min-height:310px}.screens .media-stage{padding:35px}.meta{gap:20px;grid-template-columns:1fr 1fr}.meta>div:last-child{grid-column:1/-1}}
@media(max-width:760px){.case-layout{display:block}.case-main{padding-top:26px}.hero-media{margin:28px 0 0}.media-stage{padding:24px 16px;border-radius:12px}.app-layout{min-height:260px}.app-body{padding:23px 18px}.app-body h3{font-size:22px}.app-row{padding:11px;font-size:10px}.app-row span{font-size:9px}.case-header h1.subtitle{font-size:38px}.case-header .topline{gap:7px 12px;flex-direction:row;align-items:baseline}.case-header .eyebrow{max-width:none;font-size:11px}.case-header .draft{flex-basis:100%;margin-left:0}.case-header .intro{font-size:15px}.meta{margin-top:24px;gap:17px}.story-section{padding-top:35px}.screens{gap:28px;margin-top:28px}.screens .media-stage{padding:26px 22px}.screen-card{padding:25px;min-height:240px}.screen-card h3{font-size:23px}.challenge h3{font-size:28px}.video-stage{min-height:300px;border-radius:12px}.video-placeholder h3{font-size:29px}.build-grid{gap:23px}.media figcaption{gap:5px}.next-project h2{font-size:33px}}

/* Preserve breathing room above the title after removing the label row. */
.case-header{padding-top:36px}

/* Real product screenshots: the stage becomes a plain frame around the image. */
.media-stage.photo{padding:0!important;background:none!important;border:0!important;border-radius:0}
.photo img{display:block;width:100%;height:auto;border-radius:16px}
@media(max-width:760px){.photo img{border-radius:12px}}
.walkthrough-video{display:block;width:100%;height:auto;border-radius:7px}

/* Mobile project picker: Exit on the left, the current project opens the rest. */
.project-list{display:contents}
.project-toggle{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:760px){
 .sidebar.has-picker .project-nav{flex-wrap:nowrap;justify-content:space-between;align-items:center;position:relative;top:auto}
 .has-picker .project-toggle{display:flex;align-items:center;gap:6px;border:0;background:none;padding:7px 0;color:#000;font-size:15px;font-weight:500}
 .has-picker .project-chevron{width:7px;height:7px;margin:0 2px 3px 4px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform 200ms var(--ease-out)}
 .has-picker[data-open] .project-chevron{transform:translateY(3px) rotate(-135deg)}
 .has-picker .project-list{display:flex;flex-direction:column;position:absolute;top:calc(100% + 18px);right:0;min-width:220px;padding:6px 0;background:var(--bg);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 30px #1618141a;transform-origin:top right;opacity:0;transform:scale(.95);visibility:hidden;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s linear 200ms}
 .has-picker[data-open] .project-list{opacity:1;transform:none;visibility:visible;transition-delay:0s}
 .has-picker .project-list a{padding:10px 18px;gap:12px}
 .has-picker[data-instant] .project-list,.has-picker[data-instant] .project-chevron{transition:none}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
 .has-picker .project-list{transform:none}
 .has-picker .project-chevron{transition:none}
}