/* Online Poslovi — Polish 2026-10-19. Loaded after style.css. */
:root{--aomark-dialog-accent:#ffd100;--aomark-dialog-button-bg:#ffd100;--aomark-dialog-button-fg:#151515;--aomark-dialog-radius:16px;--aomark-dialog-button-radius:8px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.op-icon{display:inline-block;flex-shrink:0;vertical-align:middle}
.text-link{display:inline-flex;align-items:center;gap:6px;font-weight:500}
.text-link .op-icon{transition:transform .2s ease}.text-link:hover .op-icon{transform:translateX(3px)}
.button .op-icon{margin-right:-4px}

/* Header: nav + CTA on desktop, drawer below 900px */
.site-header__inner{display:flex;align-items:center;gap:24px}
.primary-nav{margin-left:auto}
.header-cta{margin-left:12px;white-space:nowrap}
.menu-toggle{display:none}
.mobile-drawer{display:none}
@media(max-width:900px){
  .site-header__inner{display:flex;min-height:84px;position:relative}
  .site-logo{width:190px;max-width:60%;padding-top:0}
  .primary-nav,.header-cta{display:none!important}
  .menu-toggle{display:grid;place-items:center;position:static;margin-left:auto;width:48px;height:48px;padding:0;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:8px;cursor:pointer}
  .menu-toggle:hover{color:var(--yellow);border-color:var(--yellow)}
  .mobile-drawer{display:block;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.55);opacity:0;transition:opacity .25s ease}
  .mobile-drawer[hidden]{display:none}
  .mobile-drawer.is-open{opacity:1}
  .mobile-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(400px,100%);display:flex;flex-direction:column;padding:18px 20px 32px;background:#131313;color:#fff;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease}
  .mobile-drawer.is-open .mobile-drawer__panel{transform:none}
  .mobile-drawer__top{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;margin-bottom:28px}
  .mobile-drawer__top .site-logo{width:180px;max-width:70%}
  .mobile-drawer__close{display:grid;place-items:center;width:48px;height:48px;padding:0;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:8px;cursor:pointer}
  .mobile-drawer__close:hover{color:var(--yellow);border-color:var(--yellow)}
  .mobile-drawer__list{margin:0;padding:0;list-style:none}
  .mobile-drawer__list a{display:block;padding:15px 2px;border-bottom:1px solid #2a2a2a;color:#fff;font-family:Lato,Arial,sans-serif;font-weight:800;font-size:24px}
  .mobile-drawer__list .current-menu-item>a,.mobile-drawer__list a:hover{color:var(--yellow)}
  .mobile-drawer__cta{width:100%;margin-top:30px}
  html.drawer-open{overflow:hidden}
}
@media(max-width:700px){
  .site-header__inner{display:flex;min-height:76px}
  .site-logo{width:170px}
  .home-hero{padding-top:110px;min-height:0}
  .home-hero__content{padding-bottom:70px}
}
@media(prefers-reduced-motion:reduce){.mobile-drawer,.mobile-drawer__panel,.text-link .op-icon{transition:none}}

/* Icons that replaced Unicode glyphs */
.service-card__icon .op-icon{stroke-width:1.8}
.counter-card__icon .op-icon{width:46px;height:46px;stroke-width:1.6;display:block;margin:auto}
.contact-card__icon .op-icon{stroke-width:1.8}
.topics-list__icon{position:absolute;left:0;top:6px;width:52px;height:52px;display:grid;place-items:center;background:#262626;color:var(--yellow);border-radius:8px}
.contact-main__copy li{display:flex;align-items:center;gap:12px;padding:9px 0}
.contact-main__copy li .op-icon{color:#c9a400}
@media(max-width:700px){.counter-card__icon .op-icon{width:34px;height:34px}.contact-main__copy li{justify-content:center}}

/* Forms: dark text on yellow for contrast */
.op-form .button{color:#151515}
.op-form .button:hover{color:#151515}

/* Listings: search, empty state, pagination */
.listing-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;margin-bottom:55px}
.listing-tools .search-form{margin-left:auto}
.listing-lead{margin:0;color:#666;font-size:17px}
.search-form{display:flex;width:100%;max-width:440px}
.search-form__input{flex:1;min-width:0;height:52px;padding:0 16px;border:1px solid #cfcfcf;border-right:0;border-radius:8px 0 0 8px;background:#fff;color:#151515}
.search-form__input:focus{outline:2px solid var(--yellow);outline-offset:-1px}
.search-form__button{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 20px;border:0;border-radius:0 8px 8px 0;background:var(--yellow);color:#151515;font-weight:500;cursor:pointer}
.search-form__button:hover{background:#e7bd00}
.listing-empty{max-width:640px;margin:0 auto 80px;text-align:center}
.listing-empty h2{font-size:34px}
.listing-empty p{color:#666}
.listing-empty .search-form{margin:26px auto 0}
.listing-empty .button{margin-top:6px}
.section-heading--compact{margin-bottom:40px}
.section-heading--compact h2{font-size:36px}
.pagination{display:block;margin-top:70px}
.pagination ul.page-numbers{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:0;padding:0;list-style:none}
.pagination a.page-numbers,.pagination span.page-numbers{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:46px;height:46px;padding:0 14px;border:1px solid #d9d9d9;border-radius:8px;background:#fff;color:#151515;font-weight:500}
.pagination a.page-numbers:hover{border-color:#151515;color:#151515}
.pagination span.current{background:var(--yellow);border-color:var(--yellow)}
.pagination span.dots{border-color:transparent}
.pagination a.page-numbers>span{padding:0;background:none}
@media(max-width:700px){
  .listing-tools{margin-bottom:40px}
  .listing-tools .search-form{margin-left:0;max-width:none}
  .search-form__button span{display:none}
  .pagination .prev span,.pagination .next span{display:none}
  .listing-empty h2{font-size:28px}
}

/* Smaller heading scale on inner pages */
.page-banner h1{font-size:52px;line-height:1.12}
.single .page-banner{height:440px}
.single .page-banner h1{font-size:46px;line-height:1.18;max-width:900px;margin-top:60px}
.about-intro h2,.about-work h2,.contact-main__copy h2{font-size:40px}
.values-grid h2,.values-approach h2{font-size:32px}
.article-page__body h2{font-size:32px}
.article-page__body h3{font-size:24px}
@media(max-width:700px){
  .page-banner{height:300px}
  .page-banner h1{font-size:34px;margin-top:50px}
  .single .page-banner{height:380px}
  .single .page-banner h1{font-size:30px;max-width:none;margin:50px auto 0}
  .about-intro h2,.about-work h2,.contact-main__copy h2,.section-heading h2,.editorial-section__content h2,.counter-section h2,.topics-section h2{font-size:30px}
  .values-grid h2,.values-approach h2{font-size:26px}
  .article-page__body h2{font-size:26px}
  .article-page__body h3{font-size:21px}
}

/* Footer: four columns with guide links */
.footer-grid{grid-template-columns:1.2fr .7fr 1fr 1fr;gap:50px}
.footer-guides .footer-nav__list li{margin-bottom:12px}
.footer-guides .footer-nav__list a{line-height:1.45;font-size:15px}
.footer-nav__list a:hover{color:var(--yellow)}
@media(max-width:1000px){.footer-grid{grid-template-columns:1fr 1fr;gap:45px 40px}}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr;text-align:center}}

/* Motion (design-motion-principles, Create mode: Jakub primary, Jhey secondary). transform/opacity/filter only. */
:root{--ease-out-soft:cubic-bezier(.22,1,.36,1);--ease-out-quart:cubic-bezier(.25,1,.5,1)}
/* One-time reveal on scroll; JS adds .reveal only below the first screen. */
.js-motion .reveal{opacity:0;transform:translateY(16px);filter:blur(4px);transition:opacity .6s var(--ease-out-soft),transform .6s var(--ease-out-soft),filter .6s var(--ease-out-soft);transition-delay:calc(var(--reveal-i,0) * 70ms)}
.js-motion .reveal.is-in{opacity:1;transform:none;filter:none}
/* Home hero arrives once on load (CSS only, flag set in <head>). */
@keyframes op-enter{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes op-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.motion-ok .home-hero__copy>p,.motion-ok .home-hero__copy>.button{animation:op-enter .7s var(--ease-out-soft) both}
@media(min-width:701px){.motion-ok .home-hero__copy>h1{animation:op-enter .7s var(--ease-out-soft) both}}
.motion-ok .home-hero__copy>p{animation-delay:.12s}
.motion-ok .home-hero__copy>.button{animation-delay:.22s}
.motion-ok .home-hero .yellow-rule{transform-origin:left;animation:op-rule .8s var(--ease-out-quart) .08s both}
.motion-ok .page-banner h1{animation:op-enter .6s var(--ease-out-soft) both}
/* Count-up numbers do not jitter */
.counter-list b,.about-work__stats b,.progress-list strong span{font-variant-numeric:tabular-nums}
/* Progress bars fill with scaleX when seen */
.progress-list i{position:relative;overflow:hidden;background:#e7e7e7}
.progress-list i::after{content:'';position:absolute;top:0;bottom:0;left:0;width:var(--progress);background:var(--yellow);transform-origin:left;transition:transform 1.2s var(--ease-out-quart) .15s}
.js-motion .progress-list:not(.is-in) i::after{transform:scaleX(0)}
.js-motion .progress-list div:nth-child(2) i::after{transition-delay:.27s}
.js-motion .progress-list div:nth-child(3) i::after{transition-delay:.39s}
/* Hover and press feedback (occasional interactions, subtle) */
.service-card,.contact-card{transition:transform .35s var(--ease-out-soft),box-shadow .35s var(--ease-out-soft)}
@media(hover:hover){
  .service-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.12)}
}
.button{transition:background-color .2s ease-out,transform .15s var(--ease-out-soft)}
.button:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){
  .js-motion .reveal{opacity:1;transform:none;filter:none;transition:none}
  .motion-ok .home-hero__copy>*,.motion-ok .home-hero .yellow-rule,.motion-ok .page-banner h1{animation:none}
  .progress-list i::after,.service-card,.contact-card,.button{transition:none}
  .service-card:hover,.button:active{transform:none}
}

/* Brand logo (SVG, concept B) */
.site-logo{width:auto;max-width:none}
.site-logo .brand-logo{display:block;width:auto;height:54px}
.footer-brand .site-logo{width:auto}
.footer-brand .brand-logo{height:66px}
.mobile-drawer__top .site-logo{width:auto;max-width:none}
.mobile-drawer__top .brand-logo{height:44px}
@media(max-width:700px){.site-logo .brand-logo{height:44px}.footer-brand .brand-logo{height:58px;margin:auto}}