.home-logo{display:inline-flex;align-items:center}
.quote{text-decoration:none}
.menu-toggle{display:none;background:transparent;border:1px solid var(--line);border-radius:8px;padding:0;width:44px;height:44px;min-width:44px;min-height:44px;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.menu-toggle:hover,.menu-toggle:focus-visible{border-color:var(--ink);outline:none}
.menu-toggle-svg{width:24px;height:24px;stroke:var(--ink);transition:transform 600ms cubic-bezier(.16,1,.3,1);overflow:visible;display:block}
.menu-toggle-path-top{stroke-dasharray:12 63;stroke-dashoffset:0;transition:stroke-dasharray 600ms cubic-bezier(.16,1,.3,1),stroke-dashoffset 600ms cubic-bezier(.16,1,.3,1)}
.menu-toggle-path-mid{transition:transform 600ms cubic-bezier(.16,1,.3,1)}
.menu-toggle[aria-expanded="true"] .menu-toggle-svg{transform:rotate(-45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-path-top{stroke-dasharray:20 300;stroke-dashoffset:-32.42px}
@media(prefers-reduced-motion:reduce){
  .menu-toggle-svg,.menu-toggle-path-top,.menu-toggle-path-mid{transition:none!important}
}
body.menu-open{overflow:hidden}
.compact-grid,.callout-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,8vw,128px);align-items:start}
.compact-grid p:first-child{margin-top:0}
.compact-grid p:not(.home-lead):not(.home-kicker){color:#62626b;line-height:1.65}
.text-link{display:inline-flex;align-items:center;gap:24px;color:inherit;text-decoration:none;border-bottom:1px solid #aaaab1;padding:10px 0;font-size:16px;line-height:1.5}
.text-link:hover{border-bottom-color:var(--orange)}
.audience-short{padding:88px 0}
.audience-short .text-link{margin-top:12px}
.package-links-row{display:flex;flex-wrap:wrap;gap:20px 32px;margin-top:20px;padding-top:20px;border-top:1px solid #d7dbe1}
.package-links-row .text-link{margin-top:0}
#pakiety{scroll-margin-top:100px}
@media(max-width:640px){
  .package-links-row{flex-direction:column;gap:12px;align-items:flex-start}
}
.service-page{font-family:var(--font-body)}
.service-hero{padding:80px 0 96px;border-top:1px solid #eee}
.service-hero h1{font-family:var(--font-heading);font-size:var(--type-h1);line-height:var(--type-h1-lh);font-weight:var(--type-h1-weight);letter-spacing:var(--type-h1-ls);max-width:1080px}
.service-hero .home-kicker{color:var(--orange);margin-bottom:24px}
.service-hero-bottom{display:grid;grid-template-columns:7fr 4fr;gap:80px;align-items:start;margin-top:48px}
.service-hero-bottom .btn{height:auto;min-height:56px;padding:18px 24px;line-height:1.4}
.schedule-note{font-size:var(--type-small);line-height:var(--type-small-lh);color:#62626b;max-width:340px;margin:20px 0 0}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:64px}
.about-features{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-feature{padding-top:24px;border-top:1px solid #cacacf}
.service-feature h3{font-family:var(--font-heading);font-size:var(--type-h3);line-height:var(--type-h3-lh);font-weight:var(--type-h3-weight);margin:16px 0 16px;letter-spacing:var(--type-h3-ls)}
.service-feature p{color:#62626b;margin:0}
.service-feature .item-number{color:var(--orange)}
.dark-section{background:#101010;color:white}
.dark-section .home-kicker,.dark-section .service-feature p,.dark-section .compact-grid p:not(.home-lead){color:#b4b4bd}
.dark-section .home-lead{color:#fff}
.dark-section .service-feature{border-color:#45454d}
.dark-section .item-number{color:#ff8538}
.modernisation-callout{padding:80px 0;background:#f6f6f7;border-top:1px solid #e5e5e8}
.modernisation-callout h2{font-family:var(--font-heading);font-weight:var(--type-h2-secondary-weight);font-size:var(--type-h2-secondary);letter-spacing:var(--type-h2-secondary-ls);line-height:var(--type-h2-secondary-lh);margin:0}
.callout-grid{align-items:center}
.callout-grid p{font-size:18px;line-height:1.6;color:#62626b}
.relationship-story{max-width:780px;margin:40px 0 56px}
.relationship-story .home-lead{margin-bottom:16px}
.relationship-story p{max-width:720px}
.service-page .portfolio{padding-top:80px}
.service-page .portfolio h1{font-family:var(--font-heading);font-size:var(--type-h1);line-height:var(--type-h1-lh);font-weight:var(--type-h1-weight);letter-spacing:var(--type-h1-ls)}
.service-page .portfolio-summary{align-self:end}
.service-page .portfolio .stage{padding-bottom:40px}
.portfolio-full .portfolio{width:100%;}
.portfolio-full .stage{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:88px}
.portfolio-full .full-card{align-self:start}
.portfolio-full .full-card .caption{min-height:132px}
.portfolio-full .p1{grid-column:1 / -1;grid-row:1}
.portfolio-full .p7{grid-column:1 / span 5;grid-row:4;align-self:start;margin-top:0}
.portfolio-full .p7 .media{aspect-ratio:1 / 1}
.portfolio-full .p8{grid-column:7 / span 6;grid-row:4;align-self:start;margin-top:56px}
.portfolio-full .p8 .media{aspect-ratio:16 / 10}
.portfolio-full .p9{grid-column:1 / span 4;grid-row:5;align-self:start;margin-top:24px}
.portfolio-full .p9 .media{aspect-ratio:1 / 1}
.portfolio-full .p10{grid-column:6 / span 7;grid-row:5;align-self:start;margin-top:-24px}
.portfolio-full .p10 .media{aspect-ratio:10 / 7}
.portfolio-full .p11{grid-column:1 / span 5;grid-row:6;align-self:start;margin-top:48px}
.portfolio-full .p11 .media{aspect-ratio:4 / 3}
.portfolio-full .p12{grid-column:7 / span 6;grid-row:6;align-self:start;margin-top:0}
.portfolio-full .p12 .media{aspect-ratio:16 / 10}
.portfolio-full .p13{grid-column:1 / span 5;grid-row:7;align-self:start;margin-top:0}
.portfolio-full .p13 .media{aspect-ratio:4 / 3;background:#fff}
.portfolio-full .p13 .project-image{object-fit:contain}
.portfolio-full .p14{grid-column:7 / span 6;grid-row:7;align-self:start;margin-top:64px}
.portfolio-full .p14 .media{aspect-ratio:16 / 10}
.portfolio-full .p15{grid-column:1 / span 5;grid-row:8;align-self:start;margin-top:32px}
.portfolio-full .p15 .media{aspect-ratio:4 / 3}
.portfolio-full .p16{grid-column:6 / span 7;grid-row:8;align-self:start;margin-top:-16px}
.portfolio-full .p16 .media{aspect-ratio:10 / 7}
.portfolio-full .p17{grid-column:1 / span 6;grid-row:9;align-self:start;margin-top:0}
.portfolio-full .p17 .media{aspect-ratio:10 / 7}
.portfolio-full .p18{grid-column:8 / span 5;grid-row:9;align-self:start;margin-top:56px}
.portfolio-full .p18 .media{aspect-ratio:4 / 3}
.portfolio-full .p19{grid-column:1 / span 5;grid-row:10;align-self:start;margin-top:24px}
.portfolio-full .p19 .media{aspect-ratio:4 / 3}
.portfolio-full .p20{grid-column:7 / span 6;grid-row:10;align-self:start;margin-top:-16px}
.portfolio-full .p20 .media{aspect-ratio:10 / 7}
.portfolio-full .p21{grid-column:1 / span 6;grid-row:11;align-self:start;margin-top:32px}
.portfolio-full .p21 .media{aspect-ratio:16 / 10}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #b84400;outline-offset:5px}
@media(max-width:1150px){header{gap:16px;grid-template-columns:150px 1fr auto}header nav{gap:18px}.tools{gap:12px}.quote{padding:0 16px;gap:16px}.logo{width:130px}}
@media(max-width:1024px){
 header{position:relative;grid-template-columns:1fr auto;z-index:5}
 .menu-toggle{display:inline-flex}
 header nav{display:flex;position:absolute;top:calc(100% + 8px);left:0;right:0;background:white;border:1px solid #d7dbe1;border-radius:12px;padding:16px 20px;box-shadow:0 12px 28px #00000014;flex-direction:column;align-items:stretch;gap:2px;z-index:100;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .25s ease,transform .25s cubic-bezier(.16,1,.3,1),visibility .25s ease}
 header nav.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
 header nav a{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 16px;font-size:19px;line-height:1.35;font-weight:500;text-align:center;color:var(--ink);text-decoration:none;position:relative;border-radius:8px;white-space:normal}
 header nav a.active:after{content:"";position:absolute;height:2px;width:28px;left:50%;bottom:8px;transform:translateX(-50%);background:#aab0b9;border-radius:2px}
 header nav .nav-flip-back{display:none!important}
 header nav .nav-flip-front{transform:none!important;opacity:1!important}
 .tools .sep, .tools .quote{display:none!important}
 .tools{gap:8px}
 header nav .nav-contact{display:flex!important}
}
@media(min-width:1025px){
 header nav .nav-contact{display:none!important}
}
#case-drewmar-title .mob-block{display:inline}
@media(max-width:600px){
 #case-drewmar-title .mob-block{display:block}
}
@media(max-width:900px){
 .compact-grid,.callout-grid,.service-hero-bottom,.feature-grid{grid-template-columns:1fr;gap:32px}
 .service-hero{padding:56px 0 64px}
 .service-hero-bottom{margin-top:32px}
 .schedule-note{max-width:500px}
 .feature-grid{margin-top:48px}
 .service-feature{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-areas:"num title" ". desc";column-gap:16px;row-gap:8px;padding-top:24px;padding-bottom:24px}
 .service-feature .item-number{grid-area:num;line-height:var(--type-h3-lh);font-size:var(--type-body);font-weight:600}
 .service-feature h3{grid-area:title;margin:0}
 .service-feature p{grid-area:desc;margin:0}
 .audience-short,.modernisation-callout{padding:64px 0}
 .service-page .portfolio{padding-top:56px}
 .portfolio-full .stage{display:grid;grid-template-columns:1fr;row-gap:56px}
 /* Reset desktop placement on ALL cards, including the six featured projects. */
 .portfolio-full .stage > .work{grid-column:1 / -1;grid-row:auto;margin-top:0}
 .portfolio-full .full-card{grid-column:1 / -1;grid-row:auto;margin-top:0}
}
.bio-copy{max-width:760px}
.bio-copy p{color:#62626b;line-height:1.7}
.principles-list{padding-left:1.2em;color:#62626b;line-height:1.7}
.principles-list li+li{margin-top:16px}
.testimonials-section .home-inner{display:block}
.testimonials-section .testimonials-intro{max-width:760px;margin-bottom:48px}
.testimonials-section .testimonial-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.testimonial-card{background:#ffffff;border:1px solid rgba(15,15,16,0.07);border-radius:16px;box-shadow:none;transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s ease,border-color .28s ease}
.testimonial-card:hover{transform:translateY(-4px);border-color:rgba(15,15,16,0.12);box-shadow:0 16px 36px rgba(0,0,0,0.08)}
.testimonial-card footer{border-top:1px solid rgba(15,15,16,0.07)}
.testimonial-card blockquote{margin:0 0 24px;font-family:var(--font-heading);font-size:var(--type-lead);line-height:1.45;letter-spacing:-.01em}
.testimonial-card blockquote p{font-size:var(--type-lead);line-height:1.45;margin:0;color:var(--ink)}
.blog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;list-style:none;padding:0;margin:0}
.blog-card{border-top:1px solid #cacacf;padding-top:24px}
.blog-card h2{font-family:var(--font-heading);font-size:var(--type-h2-secondary);line-height:var(--type-h2-secondary-lh);margin:20px 0;letter-spacing:var(--type-h2-secondary-ls);font-weight:var(--type-h2-secondary-weight)}
.blog-card h2 a,
.blog-card h2 a:link{color:#0b0b0d;text-decoration:none;transition:color .16s ease}
.blog-card h2 a:visited{color:#71717a}
.blog-card h2 a:hover,.blog-card:hover h2 a{color:var(--orange)}
.blog-card p{color:#62626b;line-height:1.65}
.article-head,.article-body{max-width:780px;margin-inline:auto}
.article-head h1{font-family:var(--font-heading);font-size:var(--type-h1);line-height:var(--type-h1-lh);letter-spacing:var(--type-h1-ls);margin:32px 0;font-weight:var(--type-h1-weight)}
.article-meta,.breadcrumbs{font-size:var(--type-small);line-height:1.6;color:#62626b}
.breadcrumbs a{color:inherit;text-underline-offset:4px}
.breadcrumbs{display:block;white-space:normal;overflow-wrap:anywhere}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 24px}
.article-body{padding-bottom:88px;overflow-wrap:anywhere}
.article-body h2{font-family:var(--font-heading);font-size:var(--type-h2-secondary);line-height:var(--type-h2-secondary-lh);letter-spacing:var(--type-h2-secondary-ls);font-weight:var(--type-h2-secondary-weight);margin:56px 0 24px}
.article-body p,.article-body li{font-size:18px;line-height:1.8;color:#45454d}
.article-body li+li{margin-top:12px}
.article-body .article-related{margin-top:64px;padding-top:24px;border-top:1px solid #cacacf}
@media(max-width:900px){.blog-list{grid-template-columns:1fr}.testimonial-card{min-height:0}.article-body{padding-bottom:64px}}
@media(max-width:460px){.tools{gap:8px}.tools .quote{display:none}.logo{width:118px}}

/* Image-led branding and project detail, continuing the existing design system. */
.branding-feature{min-width:0;padding-top:0;border:0}
.branding-example{display:block;color:var(--ink);text-decoration:none;margin-bottom:32px}
.branding-example img{display:block;width:100%;height:auto;aspect-ratio:3 / 2;object-fit:contain;background:#f6f6f7;border-radius:16px}
.branding-example>span{display:flex;justify-content:space-between;gap:16px;font-size:var(--type-label);line-height:1.5;margin-top:14px;color:#62626b}
.branding-example:hover>span{color:#101010}
.branding-feature h3{margin-top:16px}
.project-heading{padding-top:64px;padding-bottom:48px}
.project-heading .home-kicker{margin-top:48px;color:var(--orange);margin-bottom:24px}
.project-heading h1{font-family:var(--font-heading);font-size:var(--type-project-h1);letter-spacing:var(--type-project-h1-ls);line-height:var(--type-project-h1-lh);font-weight:var(--type-project-h1-weight);margin:0 0 24px;overflow-wrap:break-word;word-break:normal;hyphens:auto}
.project-heading .home-lead{max-width:60%;margin-left:0;margin-right:auto;text-align:left}
@media(max-width:768px){
  .project-heading .home-lead{max-width:100%}
}
.project-cover{margin-block:0 96px}
.project-cover img{width:100%;height:auto;max-height:780px;object-fit:contain;display:block;border-radius:16px;background:#f6f6f7}
.project-html5-banner{margin-block:-44px 88px;padding:44px 32px 48px;background:#fbfbfb;border:1px solid #ebebed;border-radius:20px;display:flex;flex-direction:column;align-items:center;text-align:center}
.banner-heading{margin-bottom:28px;max-width:640px}
.banner-heading .home-kicker{margin:0 0 10px;color:var(--orange)}
.banner-heading h2{font-family:var(--font-heading);font-size:clamp(22px,3vw,32px);letter-spacing:-0.02em;margin:0 0 10px;color:#111114}
.banner-desc{font-size:15px;color:#64646f;margin:0;line-height:1.5}
.banner-stage-wrapper{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.banner-stage{width:336px;height:280px;max-width:100%;border-radius:12px;overflow:hidden;background:#ffffff;box-shadow:0 12px 32px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.04);border:1px solid rgba(0,0,0,.08);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1);cursor:pointer;position:relative}
.banner-stage:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.05)}
.banner-stage iframe{width:336px;height:280px;border:none;display:block;pointer-events:auto}
.banner-replay-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:#ffffff;border:1px solid #dcdce0;border-radius:999px;font-size:13px;font-weight:500;color:#2b2b30;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.banner-replay-btn:hover{background:#111114;color:#ffffff;border-color:#111114;transform:translateY(-1px)}
@media(max-width:768px){
  .project-html5-banner{margin-block:-24px 56px;padding:32px 16px 36px;border-radius:16px}
  .banner-heading{margin-bottom:20px}
  .banner-desc{font-size:14px}
  .banner-stage{transform-origin:center top}
}
@media(max-width:350px){
  .banner-stage{transform:scale(.9);margin-bottom:-28px}
}
.project-scope{background:#f6f6f7}
.scope-list{list-style:none;padding:0;margin:0}
.scope-list li{border-top:1px solid #cacacf;padding:20px 0;font-size:20px;line-height:1.5}
.scope-list li:last-child{border-bottom:1px solid #cacacf}
.project-gallery{display:grid;gap:56px;margin-top:56px}
.project-gallery figure{margin:0}
.project-gallery img,.project-gallery video{display:block;width:100%;height:auto;object-fit:contain;border-radius:16px}
.project-gallery figure.gallery-item-vertical{max-width:640px;margin-inline:auto;width:100%}
.project-gallery figure.gallery-item-vertical img{width:100%;height:auto;max-height:none;object-fit:contain}
.project-gallery video{max-width:100%;background:#09090b}
.project-gallery figcaption{font-size:14px;color:#62626b;line-height:1.6;margin-top:16px}
.project-next{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding-block:48px 80px}
@media(max-width:640px){
  .project-next{flex-direction:column;align-items:flex-start;gap:16px}
}
.contact-hero .home-lead{max-width:720px;margin-top:32px}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,112px)}
.contact-details h2{font-family:var(--font-heading);font-size:var(--type-h2-secondary);line-height:var(--type-h2-secondary-lh);letter-spacing:var(--type-h2-secondary-ls);font-weight:var(--type-h2-secondary-weight);margin-bottom:32px}
.contact-details h2 span{color:#62626b}
.contact-phone{display:block;width:fit-content;color:var(--ink);text-decoration:none;line-height:1.5;overflow-wrap:anywhere}
.contact-email{display:block;width:fit-content;font-family:var(--font-heading);font-size:clamp(24px,3vw,36px);color:var(--orange,#ff6400);text-decoration:none;line-height:1.5;overflow-wrap:anywhere;transition:color 150ms ease}
.contact-email:hover{color:#d14d00}
.contact-phone{font-size:22px;margin:16px 0 24px}
.contact-details p{color:#62626b}
.contact-next{border-top:1px solid #cacacf;margin-top:40px;padding-top:24px}
.contact-next h3{font-family:var(--font-heading);font-size:var(--type-h3);line-height:var(--type-h3-lh);letter-spacing:var(--type-h3-ls);font-weight:var(--type-h3-weight);margin:0 0 20px}
.contact-next ol{padding-left:20px;color:#62626b;line-height:1.7}
.contact-brief{background:#f6f6f7;border-radius:16px;padding:40px;min-width:0}
.contact-brief h2{font-family:var(--font-heading);font-size:var(--type-h2-secondary);line-height:var(--type-h2-secondary-lh);letter-spacing:var(--type-h2-secondary-ls);font-weight:var(--type-h2-secondary-weight)}
.contact-brief>p{color:#62626b}
.contact-brief form{display:grid;gap:24px;margin-top:32px}
.contact-brief label{display:grid;gap:10px;font-size:15px;line-height:1.5;min-width:0}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-brief input,.contact-brief select,.contact-brief textarea{box-sizing:border-box;width:100%;max-width:100%;min-width:0;padding:14px;border:1px solid #aaaab1;border-radius:8px;background:white;color:#101010;font:inherit;font-size:16px}
.contact-brief select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2309090b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 26px center;background-size:16px 16px;padding-right:56px;cursor:pointer}
.contact-brief textarea{resize:vertical}
.contact-brief input:focus-visible,.contact-brief select:focus-visible,.contact-brief textarea:focus-visible{outline:2px solid #b84400;outline-offset:3px}
.contact-brief .form-privacy{font-size:var(--type-small);margin:0;color:#62626b}
.form-privacy a{color:inherit}
.contact-brief button{border:0;cursor:pointer;font:inherit;justify-content:space-between;text-align:left;line-height:1.5}
#contact-status{font-size:14px;margin:0;color:#45454d}
#contact-status:empty{display:none}

/* Custom Accessible Select for #contact-form */
.field-group{display:grid;gap:10px;font-size:15px;line-height:1.5;min-width:0}
.custom-select-wrap{position:relative;width:100%}
.custom-select-trigger,.custom-select-menu{display:none}
.custom-select-wrap.js-select .native-select{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
.custom-select-wrap.js-select .custom-select-trigger{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;width:100%;padding:14px 16px;border:1px solid #aaaab1;border-radius:8px;background:#ffffff;color:#101010;font:inherit;font-size:16px;cursor:pointer;text-align:left;transition:border-color .2s ease,box-shadow .2s ease}
.custom-select-wrap.js-select .custom-select-trigger:hover{border-color:#71717a}
.custom-select-wrap.js-select .custom-select-trigger:focus-visible,.custom-select-wrap.js-select .custom-select-trigger[aria-expanded="true"]{outline:none;border-color:var(--orange,#ff6400);box-shadow:0 0 0 3px rgba(255,100,0,0.2)}
.custom-select-arrow{display:inline-flex;align-items:center;justify-content:center;color:#09090b;transition:transform .2s ease;flex-shrink:0}
.custom-select-trigger[aria-expanded="true"] .custom-select-arrow{transform:rotate(180deg)}
.custom-select-wrap.js-select .custom-select-menu{display:block;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:100;margin:0;padding:6px;list-style:none;background:#ffffff;border:1px solid rgba(15,15,16,0.12);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,0.1),0 2px 6px rgba(0,0,0,0.04);max-height:280px;overflow-y:auto}
.custom-select-wrap.js-select .custom-select-menu[hidden]{display:none}
.custom-select-opt{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px 14px;border-radius:6px;font-size:15.5px;color:#18181b;cursor:pointer;user-select:none;transition:background-color .15s ease,color .15s ease}
.custom-select-opt:hover,.custom-select-opt.is-highlighted{background:#f4f4f5;color:#09090b}
.custom-select-opt.is-selected{font-weight:600;color:#09090b;background:rgba(255,100,0,0.08)}
.opt-check{display:inline-flex;align-items:center;color:var(--orange,#ff6400);opacity:0;flex-shrink:0}
.custom-select-opt.is-selected .opt-check{opacity:1}
@media(max-width:900px){
 header nav .nav-contact{display:flex}
 .project-heading{padding-top:40px;padding-bottom:32px}
 .project-cover{margin-bottom:64px}
 .project-gallery{gap:32px;margin-top:40px}
 .project-next{padding-bottom:56px}
 .contact-grid{grid-template-columns:1fr;gap:48px}
 .contact-brief{padding:28px}
 .branding-example img{max-height:480px}
}
@media(max-width:560px){.form-row{grid-template-columns:1fr}.contact-brief{padding:24px 20px 36px}.scope-list li{font-size:18px}.project-next .text-link{font-size:15px;max-width:100%}}

/* Shared round 2 adjustments: header, heading rhythm and navigation. */
:root{--section-heading-gap:40px;--sticky-header-offset:128px}
html{scroll-behavior:smooth;scroll-padding-top:var(--sticky-header-offset)}
section[id]{scroll-margin-top:var(--sticky-header-offset)}
.site-header-shell{position:sticky;top:0;z-index:1000;background:#fff;transition:background-color .2s,box-shadow .2s}
.site-header-shell.is-scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 2px 14px rgba(16,16,16,.07)}
.site-header-shell header{position:relative}
.site-header-shell nav.is-open{max-height:calc(100dvh - 100px);overflow-y:auto}
.home-section h2+p,.contact-brief h2+p,.modernisation-callout h2+p{margin-top:var(--section-heading-gap)}
.home-section .process-intro>.home-lead{margin-top:56px}
.process-intro{top:var(--sticky-header-offset)}
.footer-home{display:inline-block;border-radius:4px}
.footer-home:focus-visible{outline:2px solid #ff8538;outline-offset:8px}
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:900;width:46px;height:46px;border:1px solid #353535;border-radius:50%;display:grid;place-items:center;background:#101010;color:white;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.12)}
.back-to-top[hidden]{display:none}
.back-to-top:hover{background:#303030}
.back-to-top:focus-visible{outline:3px solid #ff6400;outline-offset:4px}
.about-hero{padding-bottom:28px}
.about-intro{padding-top:28px;border-top:0}
.about-hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(280px,4fr);gap:clamp(32px,5vw,72px);align-items:center}
.about-hero h1{font-family:var(--font-heading);font-size:var(--type-h1);line-height:var(--type-h1-lh);letter-spacing:var(--type-h1-ls);font-weight:var(--type-h1-weight)}
.about-hero .home-lead{margin-top:32px}
.about-portrait{margin:0;width:100%;max-width:420px;justify-self:end;position:relative}
.about-portrait picture,.about-portrait img{display:block;width:100%;height:auto}
.about-portrait img{object-fit:contain;background:transparent;border:none;border-radius:0;box-shadow:none;-webkit-mask-image:linear-gradient(to bottom, #000 82%, transparent 100%);mask-image:linear-gradient(to bottom, #000 82%, transparent 100%)}
.branding-hero h1{max-width:1150px;font-family:var(--font-heading);font-size:var(--type-h1);line-height:var(--type-h1-lh);letter-spacing:var(--type-h1-ls);font-weight:var(--type-h1-weight)}
.branding-introduction{max-width:920px;font-size:var(--type-lead)!important;line-height:var(--type-lead-lh)!important;color:#62626b;margin:0 0 80px}
.branding-services h3{font-family:var(--font-heading);font-size:var(--type-h3);line-height:var(--type-h3-lh);letter-spacing:var(--type-h3-ls);font-weight:var(--type-h3-weight)}
.branding-examples{margin-top:80px;padding-top:40px;border-top:1px solid #cacacf}
.branding-examples>h3{font-family:var(--font-heading);font-size:var(--type-h3);line-height:var(--type-h3-lh);letter-spacing:var(--type-h3-ls);font-weight:var(--type-h3-weight);max-width:700px;margin:0}
.branding-examples .feature-grid{margin-top:36px}
.branding-portfolio-link-wrap{padding:48px 0 56px}
.branding-portfolio-link-wrap .text-link{font-size:1.125rem;font-weight:500}
@media(min-width:901px){.packages-intro h2+.home-lead,.compact-grid>h2+p{margin-top:0}}
@media(max-width:900px){
 :root{--section-heading-gap:32px;--sticky-header-offset:104px}
 .about-hero{padding-bottom:16px}
 .about-intro{padding-top:20px;border-top:0}
 .about-hero-grid{grid-template-columns:1fr;gap:32px}
 .about-portrait{justify-self:center;max-width:290px;margin:16px auto 0}
 .branding-introduction{margin-bottom:56px}
 .branding-examples{margin-top:56px}
 .back-to-top{right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.site-header-shell{transition:none}}

/* Modifier for /o-mnie/ scope section: 4 cols desktop, 2 cols tablet, 1 col mobile */
.about-scope-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:64px}
@media(max-width:1199px){
 .about-scope-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin-top:56px}
}
@media(max-width:767px){
 .about-scope-grid{grid-template-columns:1fr;gap:32px;margin-top:48px}
}

/* Poziomy panel modernizacji na /strony-www/ */
.modernizacja-panel {
  background: #09090b;
  border-top: none;
  border-bottom: none;
  padding: 56px 0;
  margin: 64px 0 80px;
  width: 100%;
}
.modernizacja-panel-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
}
.modernizacja-panel-content {
  max-width: 680px;
}
.modernizacja-panel-content h2,
.modernizacja-panel-content .panel-heading {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: var(--type-h2-secondary);
  font-weight: var(--type-h2-secondary-weight);
  line-height: var(--type-h2-secondary-lh);
  color: #ffffff;
}
.modernizacja-panel-content p {
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.55;
  color: #9ca3af;
}
.modernizacja-panel-content p:last-child {
  margin-bottom: 0;
}
.modernizacja-panel-action {
  flex-shrink: 0;
}
.modernizacja-panel .btn {
  white-space: nowrap;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 16px 28px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.modernizacja-panel .btn:hover {
  background: #ea580c;
  transform: translateY(-2px);
}
@media (max-width: 860px) {
  .modernizacja-panel {
    background: #09090b;
    border-top: none;
    border-bottom: none;
    padding: 40px 0;
    margin: 48px 0 64px;
  }
  .modernizacja-panel-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .modernizacja-panel-content h2,
  .modernizacja-panel-content .panel-heading {
    color: #ffffff;
  }
  .modernizacja-panel-content p {
    color: #9ca3af;
    font-size: 16.5px;
    line-height: 1.5;
    margin-bottom: 8px;
  }
  .modernizacja-panel-content p:last-child {
    margin-bottom: 0;
  }
  .modernizacja-panel .btn {
    background: var(--orange);
    color: #ffffff;
  }
  .modernizacja-panel .btn:hover {
    background: #ea580c;
    color: #ffffff;
  }
  .modernizacja-panel .btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
  }
}

/* Sposób pracy i etapy na /o-mnie/ */
.how-intro {
  max-width: 820px;
  margin-bottom: 56px;
}
.how-steps-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 64px;
  row-gap: 48px;
}
.how-step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 32px;
  border: 1px solid rgba(15, 15, 16, 0.07);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.how-step:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 15, 16, 0.12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}
.how-step .process-number {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--orange);
  line-height: 1.3;
  flex-shrink: 0;
}
.how-step h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 12px;
  color: #09090b;
}
.how-step p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
}

/* Ogólne zasady współpracy na /o-mnie/ */
.rules-block {
  margin-top: 96px;
  padding-top: 64px;
  border-top: 1px solid #e5e5e8;
}
.rules-block-title {
  font-family: var(--font-heading);
  font-size: var(--type-h2-secondary);
  font-weight: var(--type-h2-secondary-weight);
  line-height: var(--type-h2-secondary-lh);
  color: #09090b;
  margin: 0 0 48px;
}
.rules-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 64px;
  row-gap: 40px;
}
.rule-item {
  padding: 28px;
  border: 1px solid rgba(15, 15, 16, 0.07);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.rule-item:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 15, 16, 0.12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}
.rule-item h4 {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: #09090b;
}
.rule-item p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
}
.rule-item a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rule-item a:hover {
  color: #ea580c;
}
.rules-note {
  margin: 48px 0 0;
  padding-top: 24px;
  border-top: 1px solid #e5e5e8;
  font-size: 15px;
  line-height: 1.6;
  color: #71717a;
  font-style: italic;
}
@media (max-width: 860px) {
  .how-steps-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .how-step {
    padding: 22px 18px;
    gap: 14px;
    border-radius: 12px;
  }
  .how-step .process-number {
    font-size: 18px;
  }
  .how-step h3 {
    font-size: 20px;
    margin: 0 0 10px;
  }
  .rules-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .rules-block {
    margin-top: 56px;
    padding-top: 40px;
  }
}
@media (max-width: 480px) {
  .how-step {
    padding: 18px 14px;
    gap: 12px;
  }
}

/* Hero media preview for service pages */
.service-hero-visual {
  margin: 48px 0 0 0;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15, 15, 16, 0.07);
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.04);
  position: relative;
}
.service-hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .service-hero-visual.has-parallax img {
    will-change: transform;
  }
}
.branding-hero-composition {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  margin-top: 48px;
}
.branding-visual-item {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15, 15, 16, 0.07);
  background: #ffffff;
}
.branding-visual-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media(max-width: 768px) {
  .branding-hero-composition {
    grid-template-columns: 1fr;
  }
}

/* Blog styling */
.blog-intro-hero {
  padding: 80px 0 64px;
  border-top: 1px solid #eee;
}
.blog-listing-section {
  padding-bottom: 48px;
}
.blog-featured-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: stretch;
  border: 1px solid rgba(15, 15, 16, 0.07);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: none;
  margin-bottom: 48px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.blog-featured-card:hover {
  transform: translateY(-4px);
  border-color: rgba(15, 15, 16, 0.12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}
.blog-featured-media {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  overflow: hidden;
  background: #f1f2f4;
  position: relative;
}
.blog-featured-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-featured-card:hover .blog-featured-media img {
  transform: scale(1.02);
}
.blog-featured-body {
  padding: 48px 48px 48px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.blog-featured-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #71717a;
  margin-bottom: 16px;
}
.blog-featured-cat {
  font-weight: 600;
  text-transform: uppercase;
  color: var(--orange);
  letter-spacing: 0.05em;
  font-size: 13px;
}
.blog-featured-title {
  font-family: var(--font-heading);
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.25;
  font-weight: 600;
  margin: 0 0 16px;
  color: #09090b;
  letter-spacing: -0.02em;
}
.blog-featured-title a,
.blog-featured-title a:link {
  color: #0b0b0d;
  text-decoration: none;
  transition: color 0.16s ease;
}
.blog-featured-title a:visited {
  color: #71717a;
}
.blog-featured-title a:hover,
.blog-featured-card:hover .blog-featured-title a {
  color: var(--orange);
}
.blog-featured-desc {
  font-size: 17px;
  line-height: 1.65;
  color: #4b5563;
  margin: 0 0 28px;
  max-width: 540px;
}
.blog-featured-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--orange);
  text-decoration: none;
  transition: color 0.16s ease, transform 0.16s ease;
}
.blog-featured-link:visited {
  color: var(--orange);
}
.blog-featured-link:not(.f3-link):hover,
.blog-featured-card:hover .blog-featured-link:not(.f3-link) {
  color: #ea580c;
  transform: translateX(4px);
}
@media (max-width: 860px) {
  .blog-featured-card {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 36px;
  }
  .blog-featured-media {
    min-height: auto;
    aspect-ratio: 16 / 9;
  }
  .blog-featured-body {
    padding: 28px 24px;
  }
  .blog-featured-title {
    font-size: 22px;
  }
  .blog-featured-desc {
    font-size: 15px;
    margin-bottom: 20px;
  }
}
.blog-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 36px;
  margin-bottom: 96px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(15, 15, 16, 0.07);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  background: #ffffff;
  box-shadow: none;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, border-color 0.28s ease;
}
.blog-card:hover, .blog-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(15, 15, 16, 0.12);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
  outline: none;
}
.blog-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f1f2f4;
  overflow: hidden;
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card-media img {
  transform: scale(1.02);
}
.blog-card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #71717a;
  margin-bottom: 12px;
}
.blog-card-cat {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--orange);
}
.blog-card-title {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
}
.blog-card-title a,
.blog-card-title a:link {
  color: #0b0b0d;
  text-decoration: none;
  transition: color 0.16s ease;
}
.blog-card-title a:visited {
  color: #71717a;
}
.blog-card-title a:hover,
.blog-card:hover .blog-card-title a {
  color: var(--orange);
}
.blog-card-desc {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
  color: #52525b;
  flex-grow: 1;
}
.blog-card-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.blog-card:hover .blog-card-link {
  color: var(--orange);
}

/* Single post styling */
.post-layout-wrap {
  max-width: 740px;
  margin: 0 auto;
  padding: 56px 0 88px;
}

/* Explicit reset for article header to override global nav header styles */
article header.post-header,
.post-header {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 0 32px !important;
  padding: 0 !important;
  position: static !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.post-header .breadcrumbs {
  margin-bottom: 20px;
  font-size: var(--type-small);
  color: #71717a;
}
.post-header .breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.post-header .breadcrumbs a:hover {
  color: var(--orange);
  text-decoration: underline;
}

.post-kicker {
  font-size: var(--type-label);
  letter-spacing: var(--type-label-ls);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--orange);
  margin: 0 0 16px;
}

.post-title {
  margin: 0 0 20px !important;
  font-family: var(--font-heading) !important;
  font-size: clamp(30px, 4.2vw, 42px) !important;
  line-height: 1.18 !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: #09090b !important;
  max-width: 100% !important;
  word-break: break-word;
}

.post-lead {
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.6;
  color: #3f3f46;
  margin: 0 0 24px;
}

.post-author-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid #e5e5e8;
  border-bottom: 1px solid #e5e5e8;
  font-size: 14px;
  color: #52525b;
  margin-bottom: 0;
}
.post-author-bar strong {
  color: #09090b;
}

.post-cover-wrap {
  margin: 36px 0 48px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #e5e5e8;
  background: #f4f4f5;
  width: 100%;
}
.post-cover-wrap img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.post-content {
  font-size: 18px;
  line-height: 1.8;
  color: #27272a;
}
.post-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.5vw, 30px);
  line-height: 1.25;
  margin: 52px 0 20px;
  color: #09090b;
  letter-spacing: -0.015em;
  padding-top: 8px;
}
.post-content h3 {
  font-family: var(--font-heading);
  font-size: 21px;
  line-height: 1.35;
  margin: 36px 0 16px;
  color: #09090b;
}
.post-content p {
  margin: 0 0 24px;
}
.post-content ul,
.post-content ol {
  margin: 0 0 28px;
  padding-left: 24px;
}
.post-content li {
  margin-bottom: 10px;
  line-height: 1.75;
}
.post-content hr {
  border: none;
  border-top: 1px solid #e5e5e8;
  margin: 48px 0;
}
.post-content blockquote {
  border-left: 3px solid var(--orange);
  background: #fff8f3;
  padding: 24px 28px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 36px 0;
  font-style: italic;
  color: #3f3f46;
}
.post-content blockquote p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
}

/* Images and captions in markdown content */
.post-content img,
.post-content p img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid #e5e5e8;
  margin: 36px auto 12px;
}
.post-content p:has(img) {
  margin-bottom: 8px;
}
.post-content p:has(img) + p em,
.post-content p:has(img) + p > i,
.post-content em {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: #71717a;
  text-align: center;
  font-style: normal;
  margin-bottom: 36px;
}
.post-content a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.post-content a:hover {
  color: #ea580c;
}

/* YouTube Facade (Hiker promo film) */
.youtube-facade{position:relative;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#09090b}
.youtube-facade-btn{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:transparent;cursor:pointer;position:relative;text-align:inherit}
.youtube-facade-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:filter .3s ease,transform .3s ease}
.youtube-facade-btn:hover .youtube-facade-thumb,.youtube-facade-btn:focus-visible .youtube-facade-thumb{filter:brightness(1.05)}
.youtube-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:68px;height:48px;transition:transform .2s cubic-bezier(0,0,.2,1);filter:drop-shadow(0 4px 16px rgba(0,0,0,.45))}
.youtube-facade-btn:hover .youtube-facade-play,.youtube-facade-btn:focus-visible .youtube-facade-play{transform:translate(-50%,-50%) scale(1.12)}
.youtube-facade-btn:hover .yt-play-bg,.youtube-facade-btn:focus-visible .yt-play-bg{fill:#f00;fill-opacity:1}
.youtube-facade-iframe{width:100%;height:100%;border:0;display:block;border-radius:16px}

@media(hover:none){
  .how-step:hover, .rule-item:hover, .blog-card:hover, .blog-card:focus-visible, .blog-featured-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Callout zaproszenia do briefu pod pakietami */
.packages-brief-callout {
  margin-top: clamp(48px, 6vw, 64px);
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 16px;
  padding: clamp(28px, 3.5vw, 36px) clamp(24px, 4vw, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
  text-align: left;
}

.packages-brief-callout-content {
  max-width: 620px;
}

.packages-brief-callout-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: clamp(22px, 2.5vw, 26px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink, #09090b);
  margin: 0 0 8px;
}

.packages-brief-callout-desc {
  font-size: 15.5px;
  line-height: 1.5;
  color: #62626b;
  margin: 0;
}

.packages-brief-callout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 18px;
  height: 52px;
  min-height: 52px;
  padding: 0 24px;
  background: #0b0b0d;
  color: #ffffff;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  border: 0;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.packages-brief-callout-btn:hover,
.packages-brief-callout-btn:focus-visible {
  background: #1a1a1f;
  color: #ffffff;
}

.packages-brief-callout-btn:focus-visible {
  outline: 2px solid var(--orange, #ff6400);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .packages-brief-callout {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 20px;
  }
  .packages-brief-callout-btn {
    width: 100%;
  }
}

.draft-preview-banner {
  background: #fffbeb;
  border-bottom: 1px solid #fef3c7;
  padding: 14px 0;
  margin-bottom: 24px;
}
.draft-badge-box {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: #78350f;
}
.draft-indicator {
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  background: #fde68a;
  color: #78350f;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.draft-badge-box p {
  margin: 0;
  color: #92400e;
  line-height: 1.5;
}
.draft-badge-box code {
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
}