/* Projekty: otevrena galerie, ostre ramy a prostor pro weby. */
.pr-hero{padding:88px 0 76px}
.pr-hero .wrap,.pr .wrap{max-width:1440px}
.pr-hero .copy{max-width:960px}
.pr-hero h1{font-size:clamp(42px,5.2vw,76px);letter-spacing:-.04em;line-height:1.04;margin:0;text-wrap:balance}
.pr-hero h1 .o{color:var(--orange)}
.pr-hero .lede{margin-top:28px;font-size:17px;line-height:1.7;max-width:48ch}
.pr-cue{display:inline-flex;align-items:center;gap:12px;margin-top:32px;color:var(--navy);font-size:13px;font-weight:600}
.pr-cue .dot{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:4px}
.pr{position:relative;scroll-margin-top:calc(var(--hdr-h) - 4px);background:var(--page);--accent:var(--navy);--on-accent:#fff}
.pr .wrap{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.5fr);gap:clamp(32px,5vw,88px);align-items:center;padding-top:80px;padding-bottom:88px;border-top:1px solid var(--line)}
.pr-txt{max-width:350px}
.pr h2{font-size:clamp(36px,3.6vw,54px);letter-spacing:-.035em;line-height:1.06;margin:0;color:var(--navy)}
.pr-tags{margin:20px 0 0;font-size:12px;line-height:1.6;font-weight:600;color:var(--body)}
.pr-desc{margin-top:20px;font-size:15px;line-height:1.8;max-width:34ch}
.pr-btn{display:inline-flex;align-items:center;margin-top:28px;border-radius:4px;background:var(--navy);color:white;transition:background 180ms ease}
.pr-btn .base{display:inline-flex;align-items:center;gap:24px;padding:15px 20px;font-size:13px;font-weight:700}
.pr-btn .over,.pr-btn .fill{display:none}
.pr-btn:focus-visible,.pr-cue:focus-visible{outline:3px solid var(--purple);outline-offset:5px}
.mock{position:relative;min-width:0;padding:0 8% 26px 0}
.mock-desk{position:relative;border-radius:6px;overflow:hidden;background:#fff;border:1px solid #D8D9E1}
.mock-desk img{display:block;width:100%;height:auto}
.mock-bar{display:flex;align-items:center;gap:5px;padding:0 12px;height:28px;background:#F0F0F4;border-bottom:1px solid #E1E2E8}
.mock-bar i{width:5px;height:5px;border-radius:50%;background:#B5B8C8;flex:none}
.mock-bar .u{font-size:9px;color:#565D7A;margin-left:12px}
.mock-phone{position:absolute;right:0;bottom:0;width:23%;padding:5px;border-radius:20px;background:#181C2F;box-shadow:0 12px 25px -14px rgba(12,16,48,.4)}
.mock-phone img{display:block;width:100%;height:auto;border-radius:15px}
.mock-phone .notch{position:absolute;top:8px;left:38%;width:24%;height:4px;border-radius:4px;background:#181C2F}
@media(hover:hover) and (pointer:fine){.pr-btn:hover{background:var(--purple)}.pr-cue:hover{color:var(--purple)}}
@media(max-width:960px){.pr .wrap{grid-template-columns:1fr;gap:36px;padding-top:56px;padding-bottom:60px}.pr-txt{max-width:650px}.pr h2 br{display:none}.pr h2 br::after{content:' '}.pr-desc{max-width:48ch}.pr-hero{padding:60px 0}.mock{max-width:850px;width:100%}}
@media(max-width:560px){.pr-hero{padding:48px 0}.pr-hero .lede{font-size:15px}.pr .wrap{padding-top:40px;padding-bottom:44px;gap:28px}.mock{padding-right:8%;padding-bottom:16px}.mock-phone{width:26%;padding:3px;border-radius:12px}.mock-phone img{border-radius:9px}.mock-phone .notch{top:5px;height:3px}.mock-bar{height:21px;padding:0 8px}.mock-bar .u{font-size:7px;margin-left:5px}}
@media(prefers-reduced-motion:reduce){.pr-btn{transition:none}}
.pr + .tail{margin-top:0}

/* First project: a quieter editorial presentation. */
.pr-hero{padding:64px 0 56px}
.pr-hero .copy{max-width:1100px}
.pr-hero h1{font-size:clamp(38px,4.8vw,68px);line-height:1.12}
.pr-hero .lede{max-width:60ch;margin-top:20px;font-size:18px}
.pr-hero .pr-cue{margin-top:22px;font-size:15px}
.pr--grill{background:#F3F1FC}
.pr--grill .wrap{grid-template-columns:minmax(260px,.8fr) minmax(0,1.65fr);gap:64px;border-top:0;padding-top:72px;padding-bottom:80px}
.pr-project-logo{width:76px;height:76px;object-fit:contain;margin-bottom:28px}
.pr--grill .pr-txt{max-width:380px}
.pr--grill h2{font-size:clamp(32px,3vw,46px);line-height:1.12}
.pr--grill .pr-tags{font-size:14px;margin-top:16px}
.pr--grill .pr-desc{font-size:17px;line-height:1.7;max-width:32ch}
.pr--grill .pr-btn{background:transparent;color:var(--navy);border-radius:0;text-decoration:underline;text-underline-offset:7px}
.pr--grill .pr-btn .base{padding:8px 0;font-size:15px;gap:18px}
.pr--grill .mock{padding:0 7% 30px 0}
.pr--grill .mock-desk{border:8px solid #25262D;border-radius:12px;box-shadow:0 20px 44px -28px #141B4D65}
.pr--grill .mock-bar{height:26px;background:#25262D;color:#fff;border:0}
.pr--grill .mock-bar .u{color:#E1E2EB;font-size:11px}
.pr--grill .mock-phone{width:22%;border-radius:24px;padding:6px}
.pr--grill .mock-phone img{border-radius:18px}
@media(max-width:960px){.pr--grill .wrap{grid-template-columns:1fr;gap:40px;padding-top:48px;padding-bottom:56px}.pr--grill .pr-txt{max-width:650px}.pr--grill .pr-desc{max-width:46ch}.pr-project-logo{width:64px;height:64px;margin-bottom:20px}}
@media(max-width:560px){.pr-hero{padding:40px 0}.pr-hero .lede{font-size:16px}.pr--grill .wrap{gap:30px}.pr--grill .mock-desk{border-width:5px}.pr--grill .mock-phone{width:25%;border-radius:15px;padding:4px}.pr--grill .mock-phone img{border-radius:11px}}

/* Restore the original filled project action, including its arrow. */
.pr--grill .pr-btn{background:var(--navy);color:#fff;border-radius:4px;text-decoration:none}
.pr--grill .pr-btn .base{padding:15px 20px;font-size:13px;gap:24px}
@media(hover:hover) and (pointer:fine){.pr--grill .pr-btn:hover{background:var(--purple)}}

/* Device frames constrain full-page captures to the visible viewport. */
.pr .mock-phone{aspect-ratio:640 / 1385;overflow:hidden;isolation:isolate}
.pr .mock-phone img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.pr .mock-phone .notch{z-index:2}
.pr--vvision .mock-desk img{aspect-ratio:1440 / 1000;width:100%;height:auto;object-fit:cover;object-position:top}

/* Project surfaces echo each website's own palette. */
.pr--grill{background:#F3ECE1}
.pr--lar{background:#F5F1DA}
.pr--vvision{background:#F2E3DF}
.pr--transned{background:#EAE7DF}
.pr--nedomatrans{background:#EEEAE8}
.pr--insol{background:#E5EFFB}
.pr .wrap{border-top:0}
.pr .pr-desc{color:#525979}

/* Grill: red belongs to the section, never to the website screenshots. */
.pr--grill{background:#B82020}
.pr--grill h2{color:#fff}
.pr--grill .pr-desc{color:#FFF0EC}
.pr--grill .pr-project-logo{filter:brightness(0) invert(1)}
.pr--grill .pr-btn{background:#fff;color:#861515}
.pr--grill .mock{filter:none;mix-blend-mode:normal}
.pr--grill .mock img{filter:none;mix-blend-mode:normal}
@media(hover:hover) and (pointer:fine){.pr--grill .pr-btn:hover{background:#FFF0EC;color:#861515}}

/* Brand-colour project sections; screenshot pixels remain unchanged. */
.pr--lar{background:#F5D629}
.pr--lar h2{color:#25251D}
.pr--lar .pr-desc{color:#42412B}
.pr--vvision{background:#8E2A1B}
.pr--vvision h2{color:#fff}
.pr--vvision .pr-desc{color:#FAE9E5}
.pr--vvision .pr-btn{background:#fff;color:#762216}
.pr--nedomatrans{background:#242424}
.pr--nedomatrans h2{color:#fff}
.pr--nedomatrans .pr-desc{color:#DDDDE0}
.pr--nedomatrans .pr-btn{background:#fff;color:#242424}
.pr--insol{background:#DCEBFA}
.pr--insol h2{color:#141B4D}
.pr--insol .pr-desc{color:#444F70}
.pr .mock,.pr .mock img{mix-blend-mode:normal;filter:none}
@media(hover:hover) and (pointer:fine){.pr--vvision .pr-btn:hover{background:#FAE9E5;color:#762216}.pr--nedomatrans .pr-btn:hover{background:#E5E5E8;color:#242424}}

/* Optical logo sizes, above each project title. */
.pr .pr-project-logo{display:block;object-fit:contain;object-position:left center;width:180px;height:76px;margin:0 0 26px}
.pr--grill .pr-project-logo{width:76px;height:76px}
.pr--lar .pr-project-logo{width:220px}
.pr--vvision .pr-project-logo{width:132px;height:100px;filter:brightness(0) invert(1)}
.pr--transned .pr-project-logo{width:76px}
.pr--nedomatrans .pr-project-logo{width:160px}
.pr--insol .pr-project-logo{width:220px}
@media(max-width:560px){.pr .pr-project-logo{margin-bottom:20px;max-width:65%}}

.pr--nedomatrans .pr-project-logo{filter:brightness(0) invert(1)}

/* Single soft curve blends each project into the next brand surface. */
.pr{padding-bottom:64px}
.pr-color-cut{position:absolute;left:0;bottom:-1px;width:100%;max-width:none;height:65px;display:block;pointer-events:none}
@media(max-width:560px){.pr{padding-bottom:36px}.pr-color-cut{height:37px}}

/* The footer itself carries the curved edge so its art has no straight seam. */
.pr--insol{padding-bottom:64px}
.pr--nedomatrans+.tail{margin-top:-44px;position:relative;clip-path:polygon(0 0,10% .25%,20% .55%,30% .9%,40% 1.1%,50% 1.15%,60% 1%,70% .75%,80% .4%,90% .1%,100% 0,100% 100%,0 100%)}
@media(max-width:560px){.pr--insol{padding-bottom:40px}.pr--nedomatrans+.tail{margin-top:-24px}}

/* Intro blends into the first project's red surface. */
.pr-hero{position:relative;padding-bottom:112px}
.pr-intro-cut{position:absolute;left:0;bottom:-1px;display:block;width:100%;max-width:none;height:65px;pointer-events:none}
@media(max-width:560px){.pr-hero{padding-bottom:76px}.pr-intro-cut{height:37px}}

/* Shared type scale with the About page. */
.pr-hero,.pr{--project-k:calc((100vw - 1440px) / 1120)}
.pr-hero .copy{max-width:1280px}
.pr-hero h1{font-size:clamp(52px,7.6vw,112px);line-height:1;letter-spacing:-.04em}
.pr-hero .lede{font-size:clamp(21px,calc(25px + 5 * var(--project-k)),30px);line-height:1.4;max-width:52ch;margin-top:28px}
.pr .wrap,.pr--grill .wrap{grid-template-columns:minmax(0,.95fr) minmax(0,1.45fr);gap:clamp(32px,4.5vw,72px)}
.pr .pr-txt,.pr--grill .pr-txt{max-width:480px;min-width:0}
.pr h2,.pr--grill h2{font-size:clamp(40px,calc(64px + 20 * var(--project-k)),84px);line-height:1.04;letter-spacing:-.04em;overflow-wrap:anywhere}
.pr .pr-desc,.pr--grill .pr-desc{font-size:clamp(18px,calc(20px + 4 * var(--project-k)),24px);line-height:1.6;max-width:34ch;margin-top:24px}
.pr .pr-btn .base,.pr--grill .pr-btn .base{font-size:clamp(17px,calc(20px + 4 * var(--project-k)),24px);padding:16px 22px}
@media(max-width:960px){.pr .wrap,.pr--grill .wrap{grid-template-columns:1fr}.pr .pr-txt,.pr--grill .pr-txt{max-width:760px}.pr .pr-desc{max-width:48ch}}
@media(max-width:560px){.pr-hero h1{font-size:clamp(44px,11vw,60px)}.pr-hero .lede{font-size:21px}.pr h2,.pr--grill h2{font-size:clamp(32px,9.4vw,52px)}.pr .pr-desc,.pr--grill .pr-desc{font-size:18px}.pr .pr-btn .base,.pr--grill .pr-btn .base{font-size:17px}}

/* Larger client marks aligned with each project copy. */
.pr .pr-project-logo{width:216px;height:92px;object-position:left center;margin:0 0 30px;max-width:85%}
.pr--grill .pr-project-logo{width:94px;height:94px}
.pr--lar .pr-project-logo{width:264px}
.pr--vvision .pr-project-logo{width:160px;height:120px}
.pr--transned .pr-project-logo{width:94px;height:94px}
.pr--nedomatrans .pr-project-logo{width:194px}
.pr--insol .pr-project-logo{width:264px}
@media(max-width:560px){.pr .pr-project-logo{margin-bottom:26px;max-width:80%}}

/* Wordmark logos replace duplicate project titles. */
.pr .pr-logo-heading{margin:0;line-height:1}
.pr .pr-logo-heading .pr-project-logo{margin:0 0 24px;max-width:100%}
.pr--lar .pr-logo-heading .pr-project-logo{width:320px;height:auto}
.pr--vvision .pr-logo-heading .pr-project-logo{width:190px;height:auto}
.pr--insol .pr-logo-heading .pr-project-logo{width:320px;height:auto}

/* Symbols sit beside the corresponding project name. */
.pr .pr-title-row{display:flex;align-items:center;gap:22px}
.pr .pr-title-row h2{margin:0;min-width:0;overflow-wrap:normal;font-size:clamp(36px,4vw,60px)}
.pr .pr-title-row .pr-project-logo{flex:0 0 auto;width:76px;height:84px;max-width:none;margin:0;object-position:center}
.pr--nedomatrans .pr-title-row .pr-project-logo{width:170px;height:92px}
@media(max-width:560px){.pr .pr-title-row{gap:16px}.pr .pr-title-row h2{font-size:clamp(30px,8vw,44px)}.pr .pr-title-row .pr-project-logo{width:60px;height:68px}.pr--nedomatrans .pr-title-row .pr-project-logo{width:128px;height:72px}}

.pr .pr-title-row .pr-project-logo{order:2}

/* Keep the Nedoma Trans name together beside its symbol. */
.pr--nedomatrans .pr-title-row{gap:16px}
.pr--nedomatrans .pr-title-row h2{white-space:nowrap;font-size:clamp(32px,3.2vw,48px);letter-spacing:-.04em}
.pr--nedomatrans .pr-title-row .pr-project-logo{width:130px;height:78px}
@media(max-width:560px){.pr--nedomatrans .pr-title-row{gap:12px}.pr--nedomatrans .pr-title-row h2{font-size:clamp(25px,6.5vw,36px)}.pr--nedomatrans .pr-title-row .pr-project-logo{width:94px;height:60px}}

/* Rounded project actions match the navigation CTA. */
.pr .pr-btn{border-radius:999px;overflow:hidden}

.pr--nedomatrans{padding-bottom:64px}
@media(max-width:560px){.pr--nedomatrans{padding-bottom:40px}}

/* Continue the final project curve directly into the footer. */
.pr--nedomatrans+.tail{margin-top:0;clip-path:none}

/* Match the size and spacing of the header CTA. */
.pr .pr-btn{height:44px}
.pr .pr-btn .base{height:44px;padding:0 20px;font-size:13.5px;gap:10px;line-height:1;font-weight:700;letter-spacing:-.005em}

/* Consistent desktop device bezel across the portfolio. */
.pr .mock-desk{border:8px solid #25262D;border-radius:12px;box-shadow:0 20px 44px -28px #141B4D65}
@media(max-width:560px){.pr .mock-desk{border-width:5px}}

/* Curve the actual footer, including its light trails. */
.pr--nedomatrans+.tail{margin-top:-30px;clip-path:polygon(0 8px,15% 15px,30% 18px,45% 16px,60% 10px,75% 3px,90% 0,100% 4px,100% 100%,0 100%)}

/* Penzion Karolinka: zelena z webu klienta. */
.pr--karolinka{background:#1F5A35}
.pr--karolinka .pr-desc{color:#E8F1EA}
.pr--karolinka .pr-btn{background:#fff;color:#1F5A35}
.pr--karolinka .pr-logo-heading .pr-project-logo{width:240px;height:auto}
@media(hover:hover) and (pointer:fine){.pr--karolinka .pr-btn:hover{background:#E8F1EA;color:#1F5A35}}