/* EMESID UI v13 - 2026-09-14. Audited components + touch feedback + project image focus. */
:root{
  --header:#05080a;
  --page:#111a20;
  --section:#151f25;
  --card:#1a2329;
  --card-2:#182229;
  --border:#2b3941;
  --text:#f4f6f7;
  --muted:#b7c0c5;
  --yellow:#ffc400;
  --lime:#a7e000;
  --linkedin:#0a66c2;
  --danger:#ff6b6b;
  --radius:10px;
  --container:1280px;
  --header-h:82px;
  --ease:220ms cubic-bezier(.2,.7,.2,1);
  --shadow:0 18px 50px rgba(0,0,0,.26);
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --radius-xs:5px;
  --radius-sm:7px;
  --radius-md:10px;
  --radius-lg:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:auto;scroll-padding-top:calc(var(--header-h) + 16px);scroll-snap-type:none}
body{margin:0;background:var(--page);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
body,
main,
section{scroll-snap-type:none;scroll-snap-align:none}
img{display:block;max-width:100%}
button,
input,
textarea{font:inherit}
a{color:inherit;text-decoration:none}
button{color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
[hidden]{display:none!important}
.sr-only{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}
.skip-link{position:fixed;left:12px;top:12px;z-index:9999;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;background:var(--lime);color:#071014;font-weight:900;opacity:0;pointer-events:none}
.skip-link:focus-visible{width:auto;height:auto;padding:10px 14px;margin:0;overflow:visible;clip-path:none;white-space:normal;opacity:1;pointer-events:auto;outline:2px solid #071014;outline-offset:2px}
.page-container{width:min(var(--container),calc(100% - 44px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));margin-inline:auto}
.technical-grid{position:relative;background-color:var(--page);background-image:linear-gradient(rgba(78,101,113,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(78,101,113,.075) 1px,transparent 1px);background-size:42px 42px}

/* Header */
.site-header{position:sticky;top:0;z-index:1000;height:var(--header-h);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);background:rgba(5,8,10,.985);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:none}
.nav-shell{height:100%;width:min(1380px,calc(100% - 36px));margin:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px}
.brand{display:inline-flex;align-items:center;width:190px;min-width:190px;transition:transform var(--ease)}
.brand-logo-wrap{position:relative;display:block;width:100%;aspect-ratio:946/196}
.brand-logo-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity var(--ease)}
.brand-logo-base{opacity:1}.brand-logo-lime{opacity:0}
:where(html:not(.touch-input)) .brand:hover,
:where(html:not(.touch-input)) .brand:focus-visible{transform:scale(1.025)}
:where(html:not(.touch-input)) .brand:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
:where(html:not(.touch-input)) .brand:hover .brand-logo-base,
:where(html:not(.touch-input)) .brand:focus-visible .brand-logo-base{opacity:0}
:where(html:not(.touch-input)) .brand:hover .brand-logo-lime,
:where(html:not(.touch-input)) .brand:focus-visible .brand-logo-lime{opacity:1}
.main-nav{display:flex;justify-content:center;align-items:stretch;gap:33px;height:100%}
.main-nav a{position:relative;display:flex;align-items:center;font-size:.86rem;font-weight:900;letter-spacing:.035em;color:#eef2f3;transition:color var(--ease)}
.main-nav a::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:3px;background:var(--lime);transform:scaleX(0);transform-origin:center;transition:transform var(--ease)}
:where(html:not(.touch-input)) .main-nav a:hover,
:where(html:not(.touch-input)) .main-nav a:focus-visible{color:var(--yellow)}
.main-nav a.active{color:var(--lime)}
.main-nav a.active::after{transform:scaleX(1)}
.nav-actions{display:flex;align-items:center;gap:16px}
.nav-divider{width:1px;height:34px;background:rgba(255,255,255,.17)}
.language-switch{display:flex;gap:11px;align-items:center}
.lang-btn{border:0;background:transparent;color:#dce3e6;padding:7px 5px;display:flex;align-items:center;gap:6px;font-weight:850;font-size:.82rem;cursor:pointer;transition:color var(--ease)}
:where(html:not(.touch-input)) .lang-btn:hover,
:where(html:not(.touch-input)) .lang-btn:focus-visible{color:var(--yellow)}.lang-btn.active{color:var(--lime)}
.flag-icon{width:24px;height:16px;object-fit:cover;border:1px solid rgba(255,255,255,.1)}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--border);border-radius:8px;background:transparent;padding:10px;cursor:pointer}
.menu-toggle span{display:block;height:2px;background:#fff;margin:5px 0}
.nav-overlay{position:fixed;inset:var(--header-h) 0 0;background:rgba(0,0,0,.56);z-index:800}

/* Hero */
.hero{position:relative;z-index:2;min-height:510px;display:flex;align-items:center;overflow:hidden;background-color:#071117;background-image:linear-gradient(rgba(78,101,113,.048) 1px,transparent 1px),linear-gradient(90deg,rgba(78,101,113,.048) 1px,transparent 1px),linear-gradient(180deg,#05080a 0%,#071117 12%,#071117 82%,#111a20 100%);background-size:42px 42px,42px 42px,100% 100%;background-position:0 20px,0 20px,0 0}
.hero-art{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none;user-select:none;opacity:.96}
.hero-art-clip,
.hero-breakout,
.hero-code-fade{display:none}
.hero-shade{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,#071117 0%,#071117 36%,rgba(7,17,23,.995) 43%,rgba(7,17,23,.88) 47%,rgba(7,17,23,.42) 52%,rgba(7,17,23,.06) 58%,rgba(7,17,23,0) 64%)}
.hero-content{position:relative;z-index:5;width:min(1480px,calc(100% - 44px));max-width:none;margin-inline:auto;padding:62px 0 68px}
.hero h1{margin:0;display:flex;flex-direction:column;align-items:flex-start;width:min(610px,39vw);max-width:610px}
.hero h1 span,
.hero h1 strong{font-size:clamp(3rem,4.15vw,4.45rem);line-height:.94;font-weight:1000;letter-spacing:-.045em}
.hero h1 strong{color:var(--lime);white-space:nowrap;margin-top:7px}
.hero-lead{max-width:525px;margin:27px 0 0;color:#e3e9eb;font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.55}
.hero-actions{max-width:545px}
.hero-actions{display:flex;gap:14px;align-items:center;margin-top:31px}
.btn{position:relative;isolation:isolate;overflow:hidden;min-height:52px;border-radius:7px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;gap:14px;border:1px solid transparent;font-weight:950;font-size:.84rem;letter-spacing:.02em;cursor:pointer;transition:border-color var(--ease),color var(--ease),background var(--ease),transform var(--ease)}
.btn-progress{background:var(--yellow);border-color:var(--yellow);color:#071014}
.btn-progress::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform 300ms cubic-bezier(.2,.75,.2,1)}
:where(html:not(.touch-input)) .btn-progress:hover::before,
:where(html:not(.touch-input)) .btn-progress:focus-visible::before{transform:scaleX(1)}
:where(html:not(.touch-input)) .btn-progress:hover,
:where(html:not(.touch-input)) .btn-progress:focus-visible{border-color:var(--lime)}
.btn-label,
.btn-arrow{position:relative;z-index:1}
/* Jedna geometria SVG-mask dla strzałki: trzon i grot stykają się w tym samym punkcie, bez szczeliny. */
.btn-arrow{display:inline-block;flex:0 0 26px;width:26px;height:18px;font-size:0;line-height:0;color:currentColor;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1.5 9H23.5M17 2.5L23.5 9L17 15.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px 18px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1.5 9H23.5M17 2.5L23.5 9L17 15.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px 18px no-repeat;transition:transform var(--ease)}
.btn-arrow::before,
.btn-arrow::after{content:none}
:where(html:not(.touch-input)) .btn-progress:hover .btn-arrow,
:where(html:not(.touch-input)) .btn-progress:focus-visible .btn-arrow{transform:translateX(4px)}
.btn-ghost{background:rgba(7,17,23,.55);border-color:#5b6d75;color:#fff}
:where(html:not(.touch-input)) .btn-ghost:hover,
:where(html:not(.touch-input)) .btn-ghost:focus-visible{border-color:var(--lime);color:var(--lime)}

/* Section headings */
.section-heading{display:grid;grid-template-columns:minmax(40px,1fr) auto minmax(40px,1fr);align-items:center;gap:24px;padding-top:66px;padding-bottom:38px;text-align:center}
.section-heading-spacious{padding-top:106px}
.heading-rule{height:1px;background:var(--yellow);opacity:.9}
.heading-copy{transition:transform 260ms cubic-bezier(.2,.7,.2,1);transform-origin:center}
.section-heading.is-section-active .heading-copy{transform:scale(1.018)}
.heading-copy h2{margin:0;color:#fff;font-size:clamp(1.55rem,2.55vw,2.25rem);line-height:1.08;font-weight:1000;letter-spacing:-.025em}
.heading-copy p{margin:8px 0 0;color:#fff;font-size:clamp(.82rem,1.05vw,.98rem);font-weight:850;letter-spacing:.03em}

/* 3x3 services */
.profile-section{padding-bottom:78px}
.services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}














.value-icon svg,
.benefit-icon svg,
.contact-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* 4x1 values */
.values-section{padding-bottom:72px;background-color:var(--section)}
.values-section .section-heading{padding-top:56px}
.values-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.value-card{min-height:176px;border:1px solid rgba(255,255,255,.86);border-radius:var(--radius);background:var(--card);padding:24px 20px;text-align:center}
.value-icon{display:block;width:44px;height:44px;margin:0 auto 13px;color:var(--yellow)}
.value-card h3{margin:0 0 8px;font-size:.9rem;font-weight:1000}.value-card p{margin:0;color:#d1d9dc;font-size:.84rem;line-height:1.45}

/* Projects */
.projects-section{padding-bottom:82px}
.projects-section .section-heading{padding-top:62px}
.projects-wrap{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:14px;align-items:center}
.projects-viewport{overflow:hidden;padding:16px 13px 22px;touch-action:pan-y}
.projects-track{display:flex;gap:16px;align-items:stretch;will-change:transform}

.projects-wrap.is-static{grid-template-columns:minmax(0,1fr)}
.projects-wrap.is-static .projects-viewport{width:min(100%,660px);margin-inline:auto}
.projects-wrap.is-static .projects-track{justify-content:center;transform:none!important}
.projects-empty{margin:0;padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--card)}












.project-subtitle{display:block;margin-top:5px;color:var(--yellow);font-size:.79rem;line-height:1.3;font-weight:950}
.project-description{display:block;margin-top:10px;color:#d1d9dc;font-size:.88rem;line-height:1.48}
.project-badge{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:5px;background:rgba(5,8,10,.84);border:1px solid rgba(255,196,0,.56);color:var(--yellow);font-size:.65rem;font-weight:900}
.carousel-arrow,
.back-to-top{display:grid;place-items:center;border:1px solid #5d6b72;border-radius:50%;background:#0a151a;color:#8d9aa0;cursor:pointer;transition:color var(--ease),border-color var(--ease),transform var(--ease),background var(--ease)}
.carousel-arrow{width:44px;height:44px;min-width:44px;min-height:44px;font-size:0;line-height:0;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.carousel-arrow::before{content:"";display:block;width:22px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1.5 9H23.5M17 2.5L23.5 9L17 15.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px 16px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Cpath d='M1.5 9H23.5M17 2.5L23.5 9L17 15.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/22px 16px no-repeat;pointer-events:none}
.carousel-arrow.prev::before{transform:rotate(180deg)}
:where(html:not(.touch-input)) .carousel-arrow:hover,
:where(html:not(.touch-input)) .carousel-arrow:focus-visible,
:where(html:not(.touch-input)) .back-to-top:hover,
:where(html:not(.touch-input)) .back-to-top:focus-visible{color:var(--lime);border-color:var(--lime);background:#0a151a}
:where(html:not(.touch-input)) .carousel-arrow:hover,
:where(html:not(.touch-input)) .carousel-arrow:focus-visible{transform:translateY(-1px)}
.carousel-dots{display:flex;justify-content:center;gap:2px;margin-top:7px}
.carousel-dot{position:relative;width:44px;height:44px;border:0;border-radius:50%;padding:0;background:transparent;cursor:pointer}
.carousel-dot::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#718087;transform:translate(-50%,-50%);transition:background var(--ease),transform var(--ease)}
:where(html:not(.touch-input)) .carousel-dot:hover::before,
:where(html:not(.touch-input)) .carousel-dot:focus-visible::before{background:var(--lime);transform:translate(-50%,-50%) scale(1.12)}
.carousel-dot.active::before{background:var(--yellow);transform:translate(-50%,-50%) scale(1.18)}

/* Cooperation */
.cooperation-section{padding-bottom:80px;background-color:var(--section)}

/* V40 EXPERIMENT — personal introduction / portrait */
.about-person{position:relative;display:grid;grid-template-columns:240px minmax(0,1fr);gap:44px;align-items:center;margin-bottom:54px;padding:34px 38px 36px;border:1px solid rgba(255,196,0,.72);border-radius:var(--radius);background:var(--card);overflow:hidden}
.about-person::before,
.about-person::after{content:none}
.about-portrait-column{display:grid;justify-items:center;gap:15px}
.about-portrait-frame{position:relative;width:206px;height:206px;border-radius:50%;padding:7px;border:1px solid rgba(255,196,0,.78);background:#071014;box-shadow:0 0 0 7px rgba(255,196,0,.035)}
.about-portrait-frame::before,
.about-portrait-frame::after{content:"";position:absolute;z-index:2;pointer-events:none}
.about-portrait-frame::before{left:-13px;right:-13px;top:50%;border-top:1px solid rgba(167,224,0,.28)}
.about-portrait-frame::after{top:-13px;bottom:-13px;left:50%;border-left:1px solid rgba(167,224,0,.28)}
.about-portrait-image,
.about-portrait-placeholder{position:relative;z-index:3;width:100%;height:100%;border-radius:50%}
.about-portrait-image{display:block;object-fit:cover;object-position:center;background:#111c22}
.about-portrait-image[hidden]{display:none}
.about-portrait-placeholder{display:grid;place-content:center;justify-items:center;gap:14px;padding:18px;text-align:center;background:radial-gradient(circle at 50% 42%,rgba(26,43,51,.96),rgba(10,21,26,.98) 72%);color:#82939a}
.about-portrait-placeholder[hidden]{display:none}
.about-portrait-mark{position:relative;width:52px;height:52px;border:1px solid rgba(167,224,0,.62);border-radius:50%}
.about-portrait-mark::before,
.about-portrait-mark::after{content:"";position:absolute;left:50%;top:50%;background:rgba(167,224,0,.7);transform:translate(-50%,-50%)}
.about-portrait-mark::before{width:68px;height:1px}
.about-portrait-mark::after{width:1px;height:68px}
.about-portrait-placeholder strong{max-width:120px;color:#b8c3c8;font-size:.72rem;font-weight:1000;letter-spacing:.09em;line-height:1.25}
.about-portrait-caption{color:#6f8088;font-size:.62rem;font-weight:900;letter-spacing:.11em;text-align:center}
.about-person-copy{min-width:0}
.about-person-kicker{margin:0 0 7px;color:var(--lime);font-size:.7rem;font-weight:1000;letter-spacing:.13em;text-transform:uppercase}
.about-person-copy h3{margin:0;color:#fff;font-size:clamp(1.65rem,2.7vw,2.55rem);line-height:1.03;font-weight:1000;letter-spacing:-.025em}
.about-person-role{margin:10px 0 0;color:var(--yellow);font-size:.82rem;font-weight:1000;letter-spacing:.055em}
.about-person-role:empty,
.about-portrait-caption:empty{display:none}
.about-person-intro{max-width:820px;margin:18px 0 0;color:#d1dade;font-size:.94rem;line-height:1.62;text-indent:1.45em}
.about-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:26px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.075)}
.about-fact{min-width:0;padding:17px 18px 2px 0}
.about-fact+.about-fact{padding-left:20px;border-left:1px solid rgba(167,224,0,.22)}
.about-fact dt{margin:0 0 6px;color:#82939a;font-size:.64rem;font-weight:1000;letter-spacing:.09em}
.about-fact dd{margin:0;color:#e3e9eb;font-size:.79rem;line-height:1.45}.about-fact dd strong{color:#fff;font-weight:1000}
.cooperation-grid-after-about{margin-top:0}

.cooperation-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(330px,.78fr);gap:46px;align-items:center}
.photo-placeholder{min-height:310px;border:1px dashed #536872;border-radius:var(--radius);background:#111c22;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:34px;color:#87969d}
.placeholder-icon{font-size:3.6rem;line-height:1;color:#647780}.photo-placeholder strong{margin-top:13px;color:#9ba8ad;font-size:.94rem;letter-spacing:.04em}.photo-placeholder p{max-width:460px;margin:9px 0 0;font-size:.86rem;line-height:1.5}
.cooperation-art{position:relative;overflow:hidden;padding:0;min-height:0;aspect-ratio:1672/855;border-style:solid;border-color:rgba(255,196,0,.46);background:#0a151a}
.cooperation-art img{display:block;width:100%;height:100%;min-height:0;object-fit:contain;object-position:50% 50%;transform:none}
.benefits-panel{display:flex;align-items:center}.benefits-list{width:100%;display:grid;gap:22px}.benefit-item{display:grid;grid-template-columns:56px 1fr;gap:17px;align-items:start}.benefit-icon{width:46px;height:46px;color:var(--lime)}.benefit-item h3{margin:1px 0 6px;color:var(--yellow);font-size:.9rem;font-weight:1000}.benefit-item p{margin:0;color:#d2dade;font-size:.88rem;line-height:1.5}

/* Contact */
.contact-section{padding-bottom:76px}.contact-section .section-heading{padding-top:62px}
.contact-workspace{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(310px,.7fr);gap:50px;align-items:start}
.contact-left{min-width:0}.contact-form{display:grid;gap:13px}.contact-form label{display:grid;gap:6px}.contact-form label>span{font-size:.78rem;font-weight:900;color:#fff}
.contact-form input,
.contact-form textarea{width:100%;border:1px solid rgba(255,196,0,.75);border-radius:var(--radius-xs);background:#111c22;color:#fff;padding:11px 13px;outline:none;box-shadow:none;transition:border-color var(--ease)}
.contact-form input{height:44px}.contact-form textarea{min-height:112px;resize:vertical}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:#aeb9be;opacity:1}
/* Pojedyncza ramka focus: bez globalnego outline i bez dodatkowego box-shadow.
   Border rośnie do 2px do wewnątrz, a padding maleje o 1px, więc pole i tekst nie skaczą. */
.contact-form input:focus-visible,
.contact-form textarea:focus-visible{border:2px solid var(--lime);padding:10px 12px;outline:none;box-shadow:none}
.contact-form [aria-invalid="true"]{border-color:var(--danger);outline:none;box-shadow:none}
.form-field-error{min-height:1.15em;color:#ffadad;font-size:.72rem;line-height:1.25}
.form-row{display:grid;justify-items:center;gap:9px;min-height:52px}.form-row .btn{justify-self:center}.form-status{margin:0;text-align:center;font-size:.8rem}.form-status.error{color:#ff9b9b}.form-status.success{color:#b8eb54}
.map-card{position:relative;margin-top:32px;border:1px solid var(--yellow);border-radius:7px;overflow:hidden;background:#d7e6dd}.map-frame{display:block;width:100%;height:300px;border:0}.map-open-link{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--yellow);border-radius:var(--radius-sm);background:rgba(5,8,10,.92);color:#fff;font-size:.76rem;font-weight:950;letter-spacing:.02em;box-shadow:0 10px 28px rgba(0,0,0,.32);transition:border-color var(--ease),color var(--ease),background var(--ease)}:where(html:not(.touch-input)) .map-open-link:hover,
:where(html:not(.touch-input)) .map-open-link:focus-visible{border-color:var(--lime);color:var(--lime);background:#071014}
.contact-side{border-left:1px solid rgba(255,196,0,.55);padding-left:36px;min-width:0}.contact-side-title{margin:0 0 27px;color:var(--yellow);font-size:1rem;font-weight:1000;letter-spacing:.03em}.contact-details{display:grid;gap:25px}.contact-item{display:grid;grid-template-columns:43px 1fr;gap:15px;align-items:start}.contact-icon-link{display:inline-flex;width:34px;height:34px;color:var(--lime);text-decoration:none;border-radius:6px}.contact-icon-link[aria-disabled="true"]{pointer-events:auto;cursor:default}.contact-icon-link[href]{cursor:pointer}:where(html:not(.touch-input)) .contact-icon-link[href]:hover{color:#d8ff2f}:where(html:not(.touch-input)) .contact-icon-link:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.contact-icon{width:34px;height:34px;color:inherit}.contact-item strong{display:block;margin:0 0 4px;font-size:.79rem;color:#fff}.contact-item p,
.contact-item a{margin:0;color:#e0e6e8;font-size:.88rem;line-height:1.55;white-space:pre-line}.contact-item a[href]{cursor:pointer}:where(html:not(.touch-input)) .contact-item a[href]:hover{color:var(--lime)}
/* Kontakt: statyczny adres + aktywne telefon/e-mail. */
.contact-address .contact-icon,
.contact-icon-link .contact-icon[data-icon="mail"]{color:var(--yellow);transition:color var(--ease)}
:where(html:not(.touch-input)) .contact-icon-link:hover .contact-icon[data-icon="mail"],
:where(html:not(.touch-input)) .contact-icon-link:focus-visible .contact-icon[data-icon="mail"]{color:var(--lime)}
.qr-panel{width:176px;margin:34px 0 0;text-align:center}.qr-panel>img{width:176px;height:176px;border-radius:9px;background:#fff;padding:6px}.qr-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:10px;color:var(--linkedin);font-size:.82rem;font-weight:900}.qr-link-icon{width:19px;height:19px;border-radius:3px;display:grid;place-items:center;background:var(--linkedin);color:#fff;font-size:.68rem;font-family:Arial,sans-serif;font-weight:900}

/* Footer */
.site-footer{position:relative;background:#05080a;border-top:1px solid rgba(255,255,255,.07)}.footer-main{min-height:104px;display:flex;align-items:center;justify-content:flex-start;gap:24px;flex-wrap:wrap;padding-right:72px}.footer-brand{display:flex;align-items:center;flex:0 0 auto}.footer-brand img{width:132px;height:auto}.copyright{margin:0;text-align:left;color:#8f9ca2;font-size:.74rem}
.back-to-top{position:absolute;right:max(18px,calc((100% - var(--container))/2));top:50%;bottom:auto;z-index:2;width:43px;height:43px;font-size:1.05rem;opacity:1;pointer-events:auto;transform:translateY(-50%);transition:border-color var(--ease),color var(--ease),transform var(--ease)}.back-to-top.visible{opacity:1;pointer-events:auto;transform:translateY(-50%)}:where(html:not(.touch-input)) .back-to-top:hover,
:where(html:not(.touch-input)) .back-to-top:focus-visible{transform:translateY(-50%) scale(1.03)}


























.noscript{padding:20px;text-align:center;background:#2b1f00;color:#fff}





@media (min-width:901px) and (min-height:760px){
  .profile-section{min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column}
  .profile-section>.section-heading{flex:0 0 auto}
  .profile-section>.services-grid{margin-top:auto;margin-bottom:auto}
}

/* Responsive */

@media (max-width:1120px){
  :root{--header-h:76px}.nav-shell{gap:18px}.brand{width:166px;min-width:166px}.main-nav{gap:22px}.main-nav a{font-size:.8rem}.nav-actions{gap:11px}.hero h1{width:min(560px,49vw);max-width:560px}.cooperation-grid{gap:32px}.contact-workspace{gap:34px}
}
@media (max-width:900px){
  :root{--header-h:68px}.nav-shell{grid-template-columns:auto minmax(0,1fr)}.nav-actions{justify-self:end;min-width:0}.brand{width:148px;min-width:148px}.menu-toggle{display:block}.main-nav{position:fixed;z-index:900;left:env(safe-area-inset-left,0px);right:env(safe-area-inset-right,0px);top:var(--header-h);height:auto;display:none;flex-direction:column;gap:0;background:#060b0e;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.08);padding:10px 22px 18px}.main-nav.open{display:flex;max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}.main-nav a{min-height:48px;justify-content:center}.main-nav a::after{left:38%;right:38%}.nav-divider{display:none}.hero{min-height:520px}.hero-art{object-position:62% center;opacity:.80}.hero-shade{background:linear-gradient(90deg,#071117 0%,rgba(7,17,23,.995) 48%,rgba(7,17,23,.88) 62%,rgba(7,17,23,.52) 78%,rgba(7,17,23,.18) 100%)}.hero-content{width:min(100% - 44px,860px);margin-inline:auto;padding-left:0}.hero h1{width:min(520px,62vw);max-width:520px}.hero-lead{max-width:470px}.services-grid{grid-template-columns:repeat(2,1fr)}.values-grid{grid-template-columns:repeat(2,1fr)}.projects-wrap{grid-template-columns:40px minmax(0,1fr) 40px;gap:9px}.carousel-arrow{width:38px;height:38px}.cooperation-grid,
.contact-workspace{grid-template-columns:1fr}.contact-side{border-left:0;border-top:1px solid rgba(255,196,0,.45);padding:30px 0 0}.qr-panel{margin-left:0}.footer-main{padding:28px 66px 28px 0;justify-content:flex-start;text-align:left}.footer-brand{justify-self:auto}.copyright{text-align:left}.back-to-top{right:16px}
  .about-person{grid-template-columns:190px minmax(0,1fr);gap:30px;padding:30px}
  .about-portrait-frame{width:168px;height:168px}
  .about-facts{grid-template-columns:1fr}
  .about-fact{padding:14px 0}
  .about-fact+.about-fact{padding-left:0;border-left:0;border-top:1px solid rgba(167,224,0,.16)}
}

@media (max-width:640px){
  :root{--header-h:62px}.page-container{width:min(var(--container),calc(100% - 28px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}.nav-shell{width:calc(100% - 20px);gap:8px}.brand{width:124px;min-width:124px}.language-switch{gap:3px}.lang-btn{font-size:.72rem;padding:5px 2px}.flag-icon{width:20px;height:13px}.hero{min-height:500px}.hero-art{inset:0;width:100%;height:100%;object-fit:cover;object-position:67% center;opacity:.40}.hero-shade{background:linear-gradient(90deg,#071117 0%,rgba(7,17,23,.995) 72%,rgba(7,17,23,.86) 100%)}.hero-content{width:min(var(--container),calc(100% - 28px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));margin-inline:auto;padding:68px 0 72px;text-align:center}.hero h1{max-width:100%;width:100%;align-items:center}.hero h1 span,
.hero h1 strong{font-size:clamp(2.45rem,11vw,3.45rem)}.hero h1 strong{white-space:nowrap}.hero-lead{font-size:.96rem;max-width:94%;margin-left:auto;margin-right:auto}.hero-actions{flex-wrap:wrap;justify-content:center;max-width:none;margin-left:auto;margin-right:auto}.btn{min-height:49px;padding-inline:18px}.section-heading,
.section-heading-spacious{grid-template-columns:1fr;gap:11px;padding-top:58px;padding-bottom:28px}.heading-rule{width:72px;justify-self:center}.section-heading .heading-rule:last-child{display:none}.section-heading.is-section-active .heading-copy{transform:scale(1.012)}.profile-section{padding-bottom:56px}.services-grid{grid-template-columns:1fr;gap:13px}.values-grid{grid-template-columns:1fr}.value-card{min-height:0}.projects-section{padding-bottom:56px}.projects-wrap{grid-template-columns:44px minmax(0,1fr) 44px;gap:2px}.carousel-arrow{width:44px;height:44px}.projects-viewport{padding-inline:10px}.about-person{grid-template-columns:1fr;gap:23px;margin-bottom:38px;padding:28px 20px 26px;text-align:center}.about-person::after{width:30px;height:30px;right:11px;bottom:11px}.about-portrait-frame{width:158px;height:158px}.about-portrait-caption{font-size:.58rem}.about-person-kicker{margin-bottom:6px}.about-person-copy h3{font-size:clamp(1.5rem,8vw,2rem)}.about-person-role{font-size:.72rem;line-height:1.4}.about-person-intro{margin-top:15px;font-size:.88rem;line-height:1.58;text-align:left}.about-facts{margin-top:21px;text-align:left}.about-fact{padding:13px 0}.about-fact dd{font-size:.77rem}.cooperation-section{padding-bottom:58px}.photo-placeholder{min-height:235px}.cooperation-art{min-height:0;aspect-ratio:1672/855}.cooperation-art img{object-position:50% 50%;object-fit:contain}.contact-section{padding-bottom:56px}.contact-form textarea{min-height:96px}.map-frame{height:260px}.contact-side{text-align:center}.contact-side-title{text-align:center}.contact-details{justify-items:center}.contact-item{grid-template-columns:1fr;justify-items:center;gap:8px;text-align:center}.contact-icon{margin:0 auto}.qr-panel{margin-left:auto;margin-right:auto}
}
@media (max-width:340px){
  .nav-shell{gap:4px}.nav-actions{gap:6px}
  .brand{width:112px;min-width:112px}
  .lang-btn{font-size:.68rem;gap:4px}
  .lang-btn[data-lang="en"] span{font-size:0}
  .lang-btn[data-lang="en"] span::after{content:"EN";font-size:.68rem}
  .hero h1 span,
.hero h1 strong{font-size:clamp(2.12rem,10.6vw,2.35rem);letter-spacing:-.05em}
}
body.menu-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){
  *,
*::before,
*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .section-heading.is-section-active .heading-copy{transform:none}
}


.contact-static,
.contact-action{
  color:#fff;
  text-decoration:none;
  border-radius:7px;
}
.contact-static{cursor:default}
.contact-action{cursor:default}
.contact-action[href]{cursor:pointer}
.contact-static .contact-icon,
.contact-action .contact-icon{
  color:var(--yellow);
  transition:color var(--ease);
}
.contact-static #locationText,
.contact-action #phoneText,
.contact-action #emailText{
  margin:0;
  color:#fff;
  font-size:.88rem;
  line-height:1.55;
  white-space:pre-line;
}
.contact-static #locationText{transition:none}
.contact-action #phoneText,
.contact-action #emailText{
  font-weight:900;
  transition:color var(--ease);
}
.contact-static #locationText::first-line{font-weight:900}
:where(html:not(.touch-input)) #phoneContactLink:hover .contact-icon,
:where(html:not(.touch-input)) #phoneContactLink:hover #phoneText,
:where(html:not(.touch-input)) #phoneContactLink:focus-visible .contact-icon,
:where(html:not(.touch-input)) #phoneContactLink:focus-visible #phoneText,
:where(html:not(.touch-input)) #emailContactLink:hover .contact-icon,
:where(html:not(.touch-input)) #emailContactLink:hover #emailText,
:where(html:not(.touch-input)) #emailContactLink:focus-visible .contact-icon,
:where(html:not(.touch-input)) #emailContactLink:focus-visible #emailText{
  color:var(--lime);
}
:where(html:not(.touch-input)) .contact-action:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:5px;
}
.contact-action[aria-disabled="true"]{cursor:default}













/* V63.0 — QA/readability fixes applied on top of the verified pre-QA state. */
.about-person-kicker{font-size:.78rem}
.about-fact dt{font-size:.75rem}
.copyright{font-size:.8rem}
.qr-link{
  color:#8bc8ff;
  min-height:44px;
  padding:7px 6px;
  border-radius:6px;
}
.lang-btn{
  min-width:44px;
  min-height:44px;
}
@media (max-width:600px){
  .lang-btn{font-size:.8rem;min-width:44px;min-height:44px;padding:8px 4px}
  .lang-btn[data-lang="en"] span::after{font-size:.8rem}
  .about-person-role{font-size:.8rem}
}
.brand{min-height:44px}
.menu-toggle{width:44px;height:44px;min-width:44px;min-height:44px}
.back-to-top{width:44px;height:44px;min-width:44px;min-height:44px}

/* V64.2 — subtle visit counter placed directly after copyright. */
.visit-counter{
  margin-left:4px;
  display:inline-flex;
  align-items:baseline;
  gap:.45em;
  font:600 .72rem/1.2 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:#8b969c;
  opacity:.72;
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
}
.visit-counter-value{
  font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  font-weight:700;
  letter-spacing:.075em;
  color:#a7b0b5;
}
@media (max-width:760px){
  .visit-counter{margin-left:0;opacity:.68;font-size:.72rem}
}


/* V64.3 — centered footer metadata + natural visit count (no leading zeroes). */
.footer-main{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  column-gap:28px;
}
.footer-meta{
  min-width:0;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  text-align:center;
}
.footer-meta .copyright{margin:0;text-align:center}
.footer-meta .visit-counter{
  margin-left:0;
  align-items:center;
  justify-content:center;
  line-height:1.2;
}
.footer-meta .visit-counter-value{
  letter-spacing:0;
  min-width:0;
  font-variant-numeric:tabular-nums;
}
@media (max-width:760px){
  .footer-main{
    grid-template-columns:1fr;
    justify-items:center;
    gap:14px;
    padding-left:0;
    padding-right:0;
    text-align:center;
  }
  .footer-brand{justify-content:center}
  .footer-meta{justify-self:center;gap:7px 10px}
  .footer-meta .copyright{text-align:center}
}

/* V64.4 — footer alignment: copyright left, counter vertically aligned and subdued. */
.footer-main{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
  padding-right:72px;
}
.footer-meta{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:24px;
  flex-wrap:wrap;
  text-align:left;
}
.footer-meta .copyright{
  margin:0;
  text-align:left;
  font-size:.8rem;
  line-height:1.35;
}
.footer-meta .visit-counter{
  margin:0;
  display:inline-flex;
  align-items:center;
  align-self:center;
  gap:.42em;
  font-family:inherit;
  font-size:.8rem;
  font-weight:400;
  line-height:1.35;
  letter-spacing:0;
  color:#66727a;
  opacity:.72;
  white-space:nowrap;
}
.footer-meta .visit-counter-label,
.footer-meta .visit-counter-value{
  font:inherit;
  line-height:inherit;
  letter-spacing:0;
  color:inherit;
}
.footer-meta .visit-counter-value{
  min-width:0;
  font-variant-numeric:tabular-nums;
}
@media (max-width:760px){
  .footer-main{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding-left:0;
    padding-right:0;
    text-align:center;
  }
  .footer-brand{justify-content:center}
  .footer-meta{
    justify-content:center;
    gap:8px 16px;
    text-align:center;
  }
  .footer-meta .copyright{text-align:center}
  .footer-meta .visit-counter{font-size:.8rem}
}

/* LOCALCMS_VISUALS_BEGIN
--localcms-profile-scale:1.000;
--localcms-qr-size:220px;
*/
#aboutPortraitImage{transform:scale(1.000);transform-origin:50% 50%;clip-path:circle(50.000%);}
.qr-panel{width:220px;max-width:100%;}
.qr-panel>#qrImage{display:block;width:100%;height:auto;aspect-ratio:1/1;}
/* LOCALCMS_VISUALS_END */


/* Audited components: one frame/state implementation at every breakpoint. */
.service-card{
  position:relative;min-width:0;min-height:198px;display:grid;
  grid-template-rows:63px minmax(2.3em,auto) 1fr;align-content:start;
  border:1px solid var(--yellow);border-radius:var(--radius);background:var(--card);
  padding:24px 26px 38px;text-align:center;cursor:pointer;
  transition:border-color var(--ease);isolation:isolate;
}
.service-card h3{margin:0 0 9px;font-size:.95rem;line-height:1.2;font-weight:1000;color:#fff;overflow-wrap:anywhere}
.service-card p{margin:0 auto;max-width:340px;color:#d4dcde;font-size:.88rem;line-height:1.47}
.service-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto;color:var(--yellow)}
.service-icon svg,
.value-icon svg,
.benefit-icon svg,
.contact-icon svg,
.modal-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.card-action{position:absolute;right:17px;bottom:14px;color:#9caaaf;font-size:.74rem;font-weight:900;letter-spacing:.02em}
:where(html:not(.touch-input)) .service-card:hover:not(.hover-return-silent),
.service-card.is-selected{border-color:var(--lime)}
:where(html:not(.touch-input)) .service-card:hover:not(.hover-return-silent) .card-action,
.service-card.is-selected .card-action{color:var(--lime)}
.project-card{
  --project-radius:10px;position:relative;flex:0 0 var(--card-width,280px);
  min-width:0;min-height:386px;height:auto;display:grid;
  grid-template-rows:190px minmax(194px,auto);padding:0;
  border:1px solid var(--yellow);border-radius:var(--project-radius);
  background:var(--card);overflow:hidden;text-align:left;cursor:pointer;
  transition:border-color var(--ease);
}
:where(html:not(.touch-input)) .project-card:hover:not(.hover-return-silent),
.project-card.is-selected{border-color:var(--lime)}
.project-image-wrap{display:block;position:relative;width:100%;height:190px;min-height:190px;margin:0;background:var(--card);overflow:hidden;border-bottom:1px solid var(--yellow)}
.project-image-wrap img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;filter:none}
.project-body{display:block;min-width:0;min-height:194px;padding:18px 16px 20px;background:var(--card)}
.project-body h3{margin:0;color:#fff;font-size:1rem;line-height:1.2;font-weight:1000;overflow-wrap:anywhere}
/* The frame alone changes colour. No pseudo-frame, zoom or fading edges. */
@media (max-width:640px){
  .service-card{min-height:0;padding:20px 18px 38px;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;text-align:left;align-items:start}
  .service-icon{margin:0}.service-card h3{margin-top:2px}.service-card p{grid-column:2}.card-action{right:15px}
  .project-card{min-height:362px;grid-template-rows:178px minmax(182px,auto)}
  .project-image-wrap{height:178px;min-height:178px}.project-body{min-height:182px}
}
@media (max-width:340px){
  .projects-wrap{grid-template-columns:40px minmax(0,1fr) 40px;gap:0}
  .projects-viewport{padding-inline:8px}
  .carousel-arrow{width:40px;height:40px;min-width:40px;min-height:40px}
}
/* Dialog occupies the visual viewport; only the centered frame contains content.
   This also makes a click on the actual background unambiguous. */
.modal{
  --modal-vh:100vh;--modal-vw:100%;--modal-top:0px;--modal-left:0px;
  --modal-limit:min(calc(var(--modal-vh) - 48px),860px);
  position:fixed;inset:auto;top:var(--modal-top);left:var(--modal-left);
  width:var(--modal-vw);height:var(--modal-vh);max-width:none;max-height:none;
  padding:0;margin:0;border:0;background:transparent;color:var(--text);
  overflow:hidden;overscroll-behavior:contain;z-index:2000;
}
@supports (height:100dvh){.modal{--modal-vh:100dvh}}
.modal:not([open]){display:none}
.modal[open]{display:grid;place-items:center}
.modal::backdrop{background:rgba(0,0,0,.82)}
.modal.is-fallback{background:rgba(0,0,0,.82)}
.modal-frame{
  position:relative;width:min(760px,calc(100% - 144px));
  max-height:var(--modal-limit);min-width:0;
  border:1px solid var(--lime);border-radius:11px;background:#121e24;
  box-shadow:0 12px 32px rgba(0,0,0,.36);
}
.modal-shell{width:100%;max-height:calc(var(--modal-limit) - 2px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;border-radius:10px}
:where(html:not(.touch-input)) .modal-shell:focus-visible,
:where(html:not(.touch-input)) .modal-content:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}
.modal-close{
  position:absolute;left:auto;right:12px;top:12px;z-index:10;width:44px;height:44px;
  display:grid;place-items:center;padding:0;margin:0;border:1px solid #637077;
  border-radius:50%;background:#071014;color:#fff;font-size:0;line-height:0;
  cursor:pointer;user-select:none;transition:color var(--ease),border-color var(--ease);
}
.modal-close::before,
.modal-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:999px;background:currentColor;transform-origin:center;pointer-events:none}
.modal-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.modal-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
:where(html:not(.touch-input)) .modal-close:hover,
:where(html:not(.touch-input)) .modal-close:focus-visible{color:var(--lime);border-color:var(--lime)}
.modal-arrow{position:absolute;z-index:8;top:50%;width:44px;height:44px;min-width:44px;min-height:44px;transform:translateY(-50%)}
.modal-arrow-prev{left:-60px}.modal-arrow-next{right:-60px}
.modal-arrow-prev::before{transform:rotate(180deg)}
:where(html:not(.touch-input)) .modal-arrow:hover,
:where(html:not(.touch-input)) .modal-arrow:focus-visible{transform:translateY(-50%)}
.modal-media{position:relative;overflow:hidden;background:#0d171c}
.modal-media img{display:block;width:100%;height:auto;max-height:390px;object-fit:contain;padding:12px;transform:none;filter:none}
.modal-content{padding:26px 46px 28px 26px;min-width:0;overflow-wrap:anywhere}
.modal-icon{width:54px;height:54px;color:var(--yellow);margin-bottom:12px}
.modal-kicker{margin:0 0 8px;color:var(--lime);font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.modal h2{margin:0 0 14px;font-size:clamp(1.45rem,3vw,1.95rem);line-height:1.35}
.modal-text{margin:0 0 15px;color:#d3dcde;line-height:1.62;white-space:pre-line}
.modal-list{margin:0;padding-left:20px;color:#dce2e3}.modal-list li{margin:7px 0}
.modal-tech{margin:20px 0 0;padding-top:15px;border-top:1px solid #2a3d45;color:#aeb8bb;font-size:.84rem}
.modal.project-mode{--modal-limit:min(72vh,700px)}
@supports (height:100dvh){.modal.project-mode{--modal-limit:min(72dvh,700px)}}
.modal.project-mode .modal-frame{width:min(980px,calc(100% - 144px));height:var(--modal-limit)}
.modal.project-mode .modal-shell{height:100%;max-height:100%;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);overflow:hidden}
.modal.project-mode .modal-media{display:flex;align-items:center;justify-content:center;border-right:1px solid var(--yellow);min-height:0}
.modal.project-mode .modal-media img{height:100%;max-height:100%;padding:14px}
.modal.project-mode .modal-content{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:72px 42px 28px 24px}
.modal.project-mode .modal-icon{display:none}.modal.project-mode .modal-kicker{color:var(--yellow)}
/* Progressive enhancement: native scrolling remains available without setup. */
.modal.custom-scroll .modal-shell,
.modal.custom-scroll .modal-content{scrollbar-width:none;-ms-overflow-style:none}
.modal.custom-scroll .modal-shell::-webkit-scrollbar,
.modal.custom-scroll .modal-content::-webkit-scrollbar{width:0;height:0}
.modal-scroll-indicator{position:absolute;z-index:6;right:2px;top:20%;height:60%;width:22px;border-radius:999px;cursor:pointer;touch-action:none;user-select:none}
.modal-scroll-indicator::before{content:"";position:absolute;left:7px;top:0;bottom:0;width:8px;border-radius:999px;background:rgba(255,255,255,.12);pointer-events:none}
.modal-scroll-thumb{position:absolute;top:0;left:7px;width:8px;min-height:24px;border-radius:999px;background:#c1c8cb;cursor:grab;touch-action:none;transition:background var(--ease)}
:where(html:not(.touch-input)) .modal-scroll-indicator:hover .modal-scroll-thumb,
:where(html:not(.touch-input)) .modal-scroll-indicator:focus-visible .modal-scroll-thumb{background:var(--lime)}
.modal-scroll-indicator.is-dragging .modal-scroll-thumb{background:var(--lime);cursor:grabbing}
@media (max-width:760px){
  .modal,
.modal.project-mode{--modal-limit:min(88vh,max(calc(60vh + 10px),calc(100vh - 132px)))}
  @supports (height:100dvh){.modal,
.modal.project-mode{--modal-limit:min(88dvh,max(calc(60dvh + 10px),calc(100dvh - 132px)))}}
  .modal-frame,
.modal.project-mode .modal-frame{width:calc(100% - 20px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));height:auto;max-height:var(--modal-limit)}
  .modal.project-mode .modal-shell{display:block;height:auto;max-height:calc(var(--modal-limit) - 2px);overflow-y:auto}
  .modal.project-mode .modal-media{display:block;border-right:0;border-bottom:1px solid var(--yellow)}
  .modal.project-mode .modal-media img{height:auto;max-height:40vh;max-height:40dvh;padding:12px}
  .modal-content,
.modal.project-mode .modal-content{height:auto;max-height:none;overflow:visible;padding:24px 36px 28px 20px}
  .modal.service-mode .modal-content{padding-top:24px}
  .modal.service-mode .modal-icon{margin-bottom:14px}
  .modal-arrow{top:auto;bottom:-56px;transform:none}
  .modal-arrow-prev{left:calc(50% - 52px)}.modal-arrow-next{right:calc(50% - 52px)}
  :where(html:not(.touch-input)) .modal-arrow:hover,
:where(html:not(.touch-input)) .modal-arrow:focus-visible{transform:none}
}
@media (max-width:760px) and (max-height:360px){
  .modal-arrow{width:40px;height:40px;min-width:40px;min-height:40px;bottom:-48px}
}
@media (max-width:760px) and (max-height:279px){
  .modal-arrow{width:32px;height:32px;min-width:32px;min-height:32px;bottom:-38px}
}
/* Input policy: true touch has no sticky hover; keyboard always restores focus.
   No automatic blur is used on form fields, the burger or modal controls. */
.brand,
.menu-toggle,
.lang-btn,
.btn,
.service-card,
.project-card,
.carousel-arrow,
.carousel-dot,
.modal-close,
.map-open-link,
.contact-action,
.back-to-top{-webkit-tap-highlight-color:transparent}
html.touch-input :is(button,a,[role="button"]):focus-visible{outline:none}
:where(html:not(.touch-input)) :where(html:not(.keyboard-input)) .focus-return-silent:focus-visible{outline:none}
.keyboard-focus{outline:2px solid var(--lime);outline-offset:3px}
@media (max-width:760px){.contact-form input,
.contact-form textarea{font-size:16px}}
@media (forced-colors:active){.service-card,
.project-card,
.modal-frame{border-color:CanvasText}.modal-scroll-thumb{background:ButtonText}}
@media (max-width:760px){.modal-scroll-indicator{right:-4px}}


/* v13: deliberate short press feedback on touch/pen.
   JS removes .tap-feedback after 160 ms and cancels it on a drag. */
.brand.tap-feedback{transform:scale(1.025)}
.brand.tap-feedback .brand-logo-base{opacity:0}
.brand.tap-feedback .brand-logo-lime{opacity:1}
.menu-toggle.tap-feedback{border-color:var(--lime)}
.lang-btn.tap-feedback{color:var(--yellow)}
.btn-progress.tap-feedback::before{transform:scaleX(1)}
.btn-progress.tap-feedback{border-color:var(--lime)}
.btn-progress.tap-feedback .btn-arrow{transform:translateX(4px)}
.btn-ghost.tap-feedback{border-color:var(--lime);color:var(--lime)}
.service-card.tap-feedback{border-color:var(--lime)}
.service-card.tap-feedback .card-action{color:var(--lime)}
.project-card.tap-feedback{border-color:var(--lime)}
.carousel-arrow.tap-feedback,.back-to-top.tap-feedback{color:var(--lime);border-color:var(--lime);background:#0a151a}
.carousel-dot.tap-feedback::before{background:var(--lime);transform:translate(-50%,-50%) scale(1.12)}
.modal-close.tap-feedback{color:var(--lime);border-color:var(--lime)}
.map-open-link.tap-feedback{border-color:var(--lime);color:var(--lime);background:#071014}
.contact-action.tap-feedback{color:var(--lime)}

/* Project-modal image focus: click/tap the image to use the whole modal frame.
   Text, arrows and custom scrollbar are temporarily hidden; X stays available. */
.modal.project-mode .modal-media[role="button"]{cursor:zoom-in}
.modal.project-mode .modal-media[role="button"]:focus-visible{outline:2px solid var(--lime);outline-offset:-4px}
.modal.project-mode.image-focus .modal-frame{height:var(--modal-limit)}
.modal.project-mode.image-focus .modal-shell{display:block;height:100%;max-height:100%;overflow:hidden}
.modal.project-mode.image-focus .modal-media{display:flex;width:100%;height:100%;min-height:0;align-items:center;justify-content:center;border:0;cursor:zoom-out;background:#071014}
.modal.project-mode.image-focus .modal-media img{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;padding:14px}
.modal.project-mode.image-focus .modal-content{display:none}
.modal.project-mode.image-focus .modal-arrow{visibility:hidden;pointer-events:none}
.modal.project-mode.image-focus .modal-scroll-indicator{display:none!important}
@media (max-width:760px){
  .modal.project-mode.image-focus .modal-frame{height:var(--modal-limit)}
  .modal.project-mode.image-focus .modal-shell{height:100%;max-height:100%}
  .modal.project-mode.image-focus .modal-media{height:100%;border-bottom:0}
  .modal.project-mode.image-focus .modal-media img{height:100%;max-height:100%;padding:10px}
}