/*
Theme Name: by.Paulina Editorial
Theme URI: https://paulinamakhan.wixsite.com/bypaulina
Author: by.Paulina
Description: Editorial portfolio and writing space for by.Paulina.
Version: 0.16.42
Text Domain: by-paulina-editorial
*/
:root{
  --ink:#171713;--cream:#f3efe4;--paper:#f7f2e8;--lime:#c8f20b;--muted:#6d6a61;--rule:rgba(23,23,19,.17);
  --display:"Courier New", Courier, monospace;--sans:Inter,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55}
a{color:inherit}.bp-shell{width:min(1240px,calc(100% - 64px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(243,239,228,.96);border-bottom:1px solid var(--rule);backdrop-filter:blur(10px)}
.header-inner{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:3rem}.site-logo img{display:block;width:220px;height:auto}.main-nav{display:flex;gap:1.45rem;align-items:center;flex-wrap:wrap}.main-nav a{text-decoration:none;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}.main-nav a:hover{text-decoration:underline;text-underline-offset:.35em}
.hero{padding:clamp(6rem,10vw,10rem) 0 6rem;border-bottom:1px solid var(--rule)}.hero-kicker{font:500 .75rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase}.hero-title{max-width:1040px;margin:1.4rem 0 4rem;font:500 clamp(3.2rem,8vw,7.8rem)/.92 var(--display);letter-spacing:-.055em}.hero-title mark,.section-title mark{background:var(--lime);color:inherit;padding:0 .08em}.hero-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,8vw,8rem);align-items:start}.hero-cols h2{font:500 clamp(2rem,3.6vw,3.4rem)/1.05 var(--display);margin:0 0 1.2rem}.hero-cols p{max-width:540px}.btn{display:inline-block;margin-top:1rem;background:var(--lime);border:1px solid var(--ink);padding:.9rem 1.5rem;font:700 .78rem/1 var(--display);letter-spacing:.08em;text-decoration:none;box-shadow:3px 3px 0 var(--cream),4px 4px 0 var(--ink)}
.section{padding:clamp(5rem,8vw,8rem) 0;border-bottom:1px solid var(--rule)}.section-label{font:500 .72rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.6rem}.section-title{font:500 clamp(3rem,6vw,6rem)/.96 var(--display);letter-spacing:-.045em;margin:0 0 4rem}.services{display:grid;grid-template-columns:1fr 1fr;gap:5rem 7rem;align-items:center}.service{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.92fr);gap:3rem;align-items:center}.service:nth-child(even){grid-template-columns:minmax(280px,.92fr) minmax(0,1fr)}.service:nth-child(even) .service-copy{order:2}.service-no,.collab-no{font:500 .68rem/1 var(--display);letter-spacing:.18em}.service h3,.collab h3{font:500 clamp(1.8rem,3vw,2.7rem)/1 var(--display);margin:.7rem 0 1rem}.polaroid{background:#fff;padding:12px 12px 36px;box-shadow:0 6px 18px rgba(0,0,0,.14);transform:rotate(-1.5deg)}.service:nth-child(even) .polaroid{transform:rotate(1.2deg)}.polaroid img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.polaroid figcaption{margin-top:12px;font:500 .58rem/1 var(--display);letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}.localization .polaroid img{aspect-ratio:4/5;object-position:center}
.experience-grid{display:grid;grid-template-columns:.8fr 1.3fr;gap:clamp(3rem,7vw,7rem);align-items:start}.experience-photo{position:sticky;top:145px;max-width:430px}.experience-photo img{aspect-ratio:4/5;object-fit:cover}.collab{padding:0 0 2rem;margin:0 0 2rem;border-bottom:1px solid var(--rule)}.collab p:last-child{margin-bottom:0;max-width:720px}
.about-grid{display:grid;grid-template-columns:320px 1fr;gap:clamp(3rem,8vw,8rem);align-items:center}.about-photo{width:280px;height:280px;border-radius:50%;overflow:hidden;margin:0 auto}.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;filter:grayscale(1) contrast(1.05)}.about-copy p{max-width:720px}.archive-link{font-family:var(--display)}
.notes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}.note-card{border-top:1px solid var(--ink);padding-top:1rem}.note-card h3{font:500 1.45rem/1.1 var(--display)}
.contact{padding:4.2rem 0;background:#fff;border-bottom:1px solid var(--rule)}.contact-grid{display:grid;grid-template-columns:.78fr 1.18fr .72fr;align-items:center;gap:0}.contact-title{font:400 clamp(3rem,5vw,5rem)/.9 var(--sans);letter-spacing:-.055em;margin:0;padding-right:3rem}.contact-copy{padding:0 3rem;border-left:1px solid var(--ink);border-right:1px solid var(--ink);text-align:center}.contact-copy p{margin:.2rem 0 1.25rem}.contact-copy .pl{margin-bottom:1rem}.contact-copy .en{padding-top:1rem;border-top:1px solid var(--ink)}.contact-email{display:inline-block;margin-top:.5rem;font:500 .86rem/1.2 var(--display)}.contact-right{padding-left:3rem;text-align:center}.contact-icons{display:flex;justify-content:center;gap:1rem;align-items:center;margin-bottom:1.25rem}.contact-icons a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;text-decoration:none;border:1px solid transparent;transition:.15s}.contact-icons a:hover{background:var(--lime);border-color:var(--ink);transform:translateY(-2px)}.contact-icons svg{width:25px;height:25px;display:block;fill:currentColor}.contact-logo img{width:155px;height:auto}.contact-label{display:block;margin-top:.45rem;font:500 .62rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.site-footer{padding:1.15rem 0}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;font-size:.72rem}.footer-inner a{text-decoration:none}.footer-inner a:hover{text-decoration:underline}
@media(max-width:900px){.bp-shell{width:min(100% - 34px,1240px)}.header-inner{min-height:92px;flex-wrap:wrap;padding:1rem 0}.site-logo img{width:170px}.main-nav{width:100%;gap:.8rem 1rem;padding-bottom:.5rem}.hero-cols,.experience-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.services{display:block}.service,.service:nth-child(even){grid-template-columns:1fr;gap:1.6rem;margin-bottom:5rem}.service:nth-child(even) .service-copy{order:0}.polaroid{max-width:520px}.experience-photo{position:relative;top:auto;max-width:360px;margin-bottom:2rem}.about-grid{justify-items:start}.about-photo{width:230px;height:230px;margin:0}.contact-title{padding:0 0 2rem}.contact-copy{padding:2rem 0;border-left:0;border-right:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}.contact-right{padding:2rem 0 0}.notes-grid{grid-template-columns:1fr}.hero-title{margin-bottom:2.8rem}}

/* v0.9 refinements */
.hero{padding-top:clamp(5.8rem,9vw,9rem)}
.hero-title{max-width:980px;margin:1.4rem 0 3.2rem}
.hero-intro{width:min(620px,70%);margin-left:auto;text-align:left}
.hero-intro h2{font:500 clamp(2rem,3.6vw,3.4rem)/1.05 var(--display);margin:0 0 1.1rem}
.hero-intro p{max-width:590px;margin:0}

/* Wix-inspired buttons: quiet at rest, lime only on hover. */
.btn{background:transparent;border:1px solid var(--ink);padding:.95rem 1.8rem;box-shadow:inset 0 0 0 2px var(--cream);transition:background .16s ease, transform .16s ease;text-align:center}
.btn:hover,.btn:focus-visible{background:var(--lime);transform:translateY(-1px);outline:none}

/* Service section: one large editorial composition per service, intentionally staggered. */
.services{display:flex;flex-direction:column;gap:clamp(5.5rem,9vw,9rem);align-items:stretch}
.service,.service:nth-child(even){display:grid;grid-template-columns:minmax(320px,.82fr) minmax(400px,1fr);gap:clamp(3rem,7vw,7rem);align-items:center;width:88%;max-width:1080px;margin:0;overflow:visible}
.service:nth-child(even){grid-template-columns:minmax(400px,1fr) minmax(320px,.82fr);margin-left:auto}
.service:nth-child(even) .service-copy{order:2}
.service:nth-child(1){margin-left:1.5%}.service:nth-child(2){margin-right:1.5%}.service:nth-child(3){margin-left:7%}.service:nth-child(4){margin-left:auto;margin-right:5%}
.service:nth-child(1) .polaroid{transform:translateY(34px) rotate(-1.6deg)}
.service:nth-child(2) .polaroid{transform:translateY(-28px) rotate(1.3deg)}
.service:nth-child(3) .polaroid{transform:translateY(22px) rotate(-.8deg)}
.service:nth-child(4) .polaroid{transform:translateY(-18px) rotate(1.5deg)}
.service-copy{text-align:center;justify-self:center;max-width:430px}
.service h3{font-size:clamp(2rem,3.2vw,3.1rem);overflow:visible;white-space:normal}
.service-copy p{margin-left:auto;margin-right:auto;max-width:420px}
.polaroid{width:100%;max-width:520px;padding:14px 14px 42px}
.polaroid img{aspect-ratio:4/3;object-fit:cover}
.localization .polaroid img{aspect-ratio:4/5;object-position:center}
.polaroid figcaption{text-align:center;margin-top:14px;padding:0 .5rem;font-size:.62rem;letter-spacing:.14em}

/* Contact: email belongs with the channels, not under the paragraph. */
.contact{background:var(--cream)}
.contact-grid{grid-template-columns:.8fr 1.25fr .95fr}
.contact-copy p{margin:0;text-align:center}
.contact-icons{gap:.85rem;margin-bottom:1.35rem;align-items:flex-start}
.contact-icons a{display:flex;flex-direction:column;justify-content:center;align-items:center;width:62px;height:62px;border:1px solid var(--ink);border-radius:50%;position:relative}
.contact-icons svg{width:23px;height:23px}
.contact-label{position:absolute;top:calc(100% + .55rem);white-space:nowrap;opacity:0;transform:translateY(-3px);transition:.15s}
.contact-icons a:hover .contact-label,.contact-icons a:focus-visible .contact-label{opacity:1;transform:translateY(0)}
.upwork-icon{display:block;width:29px;height:29px;object-fit:contain}
.contact-logo{display:inline-block;margin-top:1.8rem}

@media(max-width:900px){
  .hero-intro{width:100%;margin-left:0}
  .service,.service:nth-child(even){width:100%;grid-template-columns:1fr;gap:2rem;margin:0 0 4rem}
  .service:nth-child(even) .service-copy{order:0}
  .service:nth-child(n) .polaroid{transform:rotate(-.8deg);max-width:520px;margin:0 auto}
  .service-copy{max-width:560px}
  .contact-icons{flex-wrap:wrap;row-gap:2rem}
}


/* v0.10 hero: final brand mark opposite the small header logo. */
.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:clamp(3rem,7vw,7rem);align-items:center}
.hero-copy{min-width:0}
.hero-brand{justify-self:end;align-self:start;width:min(100%,520px);padding-top:clamp(.5rem,2vw,2rem)}
.hero-brand img{display:block;width:100%;height:auto}
.hero-title{max-width:820px;margin:1.5rem 0 3rem;font-size:clamp(2.9rem,5.7vw,6.4rem);line-height:.98;letter-spacing:-.05em}
.hero-intro{width:min(620px,100%);margin:0;text-align:left}
@media(max-width:900px){
  .hero-layout{grid-template-columns:1fr}
  .hero-brand{order:-1;justify-self:end;width:min(72vw,430px);padding-top:0;margin-bottom:1.2rem}
  .hero-title{font-size:clamp(2.7rem,11vw,5.4rem)}
}


/* v0.11 refinements */
/* Hero: the full brand lockup lives opposite the small header logo. */
.hero-layout{grid-template-columns:minmax(320px,.72fr) minmax(560px,1.28fr);align-items:center}
.hero-copy{align-self:center;padding-top:2rem}
.hero-intro{max-width:470px;margin:0}
.hero-intro h1{font:500 clamp(2.25rem,4vw,4.25rem)/1.03 var(--display);letter-spacing:-.035em;margin:1.2rem 0 1.2rem}
.hero-brand{justify-self:end;align-self:center;width:min(100%,690px);padding-top:0;display:flex;flex-direction:column;align-items:flex-start;gap:1.5rem}
.hero-brand img{width:min(100%,610px);align-self:flex-end}
.hero-services{font:500 clamp(2rem,4vw,4.35rem)/1.05 var(--display);letter-spacing:-.04em;margin:0;align-self:flex-end;text-align:left}
.hero-services mark{background:var(--lime);color:var(--ink);padding:.04em .16em .08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* No hero CTA in this composition. */
.hero .btn{display:none}

/* Services: smaller photographs, irregular rhythm, Wix-like alternating text alignment. */
.service,.service:nth-child(even){grid-template-columns:minmax(330px,1fr) minmax(300px,390px);gap:clamp(2.4rem,6vw,6rem);width:90%;max-width:1040px}
.service:nth-child(even){grid-template-columns:minmax(300px,390px) minmax(330px,1fr)}
.service-copy{max-width:470px}
.service:nth-child(odd) .service-copy{text-align:right;justify-self:end}
.service:nth-child(even) .service-copy{text-align:left;justify-self:start}
.service:nth-child(odd) .service-copy p{margin-left:auto;margin-right:0}
.service:nth-child(even) .service-copy p{margin-left:0;margin-right:auto}
.service .polaroid{max-width:390px}
.service.localization .polaroid{max-width:375px}
.service:nth-child(1) .polaroid{transform:translateY(26px) rotate(-1.5deg)}
.service:nth-child(2) .polaroid{transform:translateY(-20px) rotate(1.2deg)}
.service:nth-child(3) .polaroid{transform:translateY(18px) rotate(-.8deg)}
.service:nth-child(4) .polaroid{transform:translateY(-14px) rotate(1.4deg)}
.polaroid figcaption{text-align:center;padding:0 1rem}

/* Experience image restored to a stronger visual scale. */
.experience-grid{grid-template-columns:1fr 1.2fr}
.experience-photo{max-width:540px}

/* Upwork: use the supplied official mark inside the existing circular contact control. */
.upwork-icon{width:31px;height:31px;border-radius:50%;object-fit:cover}

@media(max-width:900px){
  .hero-layout{grid-template-columns:1fr}
  .hero-brand{order:0;justify-self:stretch;width:100%;align-items:flex-end}
  .hero-brand img{width:min(82vw,520px)}
  .hero-services{font-size:clamp(2.2rem,9vw,4.3rem)}
  .hero-copy{padding-top:0}
  .service,.service:nth-child(even){grid-template-columns:1fr;width:100%}
  .service:nth-child(odd) .service-copy,.service:nth-child(even) .service-copy{text-align:left;justify-self:start}
  .service:nth-child(odd) .service-copy p,.service:nth-child(even) .service-copy p{margin-left:0;margin-right:auto}
  .service .polaroid,.service.localization .polaroid{max-width:390px}
}


/* v0.13 composition refinements */
/* Hero: keep the two-column counterbalance, but center each island within its own half. */
.hero-layout{grid-template-columns:minmax(340px,.86fr) minmax(540px,1.14fr);gap:clamp(3rem,6vw,6.5rem)}
.hero-copy{display:flex;align-items:center;justify-content:center;padding-top:0}
.hero-intro{width:min(100%,500px);max-width:500px;margin:0 auto;text-align:center}
.hero-intro h1{margin:0 0 1.3rem}
.hero-intro p{max-width:470px;margin:0 auto}
.hero-brand{justify-self:stretch;width:100%;max-width:690px;align-items:center;gap:1.4rem}
.hero-brand img{width:min(100%,610px);align-self:center}
.hero-services{align-self:center;text-align:center;max-width:690px}

/* Section headings: center the main editorial headlines only. */
#oferta > .bp-shell > .section-title,
#kariera > .bp-shell > .section-title{text-align:center;margin-left:auto;margin-right:auto}
#oferta > .bp-shell > .section-title{max-width:900px}
#kariera > .bp-shell > .section-title{max-width:850px}

/* Experience: a tighter magazine rhythm without turning it into a rigid timeline. */
#kariera.section{padding-top:clamp(4.6rem,7vw,7rem);padding-bottom:clamp(4.6rem,7vw,7rem)}
.experience-grid{gap:clamp(2.2rem,5vw,5rem);margin-top:-.35rem}
.experience-photo{top:132px;max-width:540px;margin-top:-1.15rem;transform:rotate(-1deg)}
.collab{padding-bottom:1.25rem;margin-bottom:1.35rem}
.collab h3{margin:.5rem 0 .7rem}
.collab p{margin-top:0;line-height:1.48}

/* Notes: black rule sitting over a loose lime-marker swipe. */
.note-card{position:relative;border-top:0;padding-top:1.3rem}
.note-card::before{content:"";position:absolute;left:-.15rem;right:10%;top:.24rem;height:.52rem;background:var(--lime);transform:rotate(-.35deg);opacity:.88;z-index:0}
.note-card::after{content:"";position:absolute;left:0;right:0;top:.49rem;height:1px;background:var(--ink);z-index:1}
.note-card > *{position:relative;z-index:2}

/* by.Paulina 1.0 is an archive link, not another CTA. */
.archive-link{font-family:var(--display);text-decoration:none;border-bottom:1px solid rgba(23,23,19,.45);padding-bottom:.08em;transition:background .15s ease,border-color .15s ease}
.archive-link:hover,.archive-link:focus-visible{background:linear-gradient(transparent 56%,var(--lime) 56%);border-color:transparent;outline:none}

@media(max-width:900px){
  .hero-layout{grid-template-columns:1fr}
  .hero-copy{order:1}
  .hero-brand{order:0;max-width:none;align-items:center}
  .hero-brand img{width:min(82vw,520px);align-self:center}
  .hero-services{text-align:center;align-self:center}
  .hero-intro{text-align:center}
  .experience-grid{margin-top:0}
  .experience-photo{margin-top:0;transform:rotate(-.7deg)}
}

/* v0.13 — Wix axis geometry */
/* Hero: both halves lean toward the centre axis, not toward their own centres. */
.hero-layout{
  grid-template-columns:minmax(340px,.9fr) minmax(540px,1.1fr);
  gap:clamp(2rem,4vw,4.6rem);
}
.hero-copy{display:block;align-self:center;justify-self:stretch;padding:0}
.hero-intro{
  width:min(100%,520px);max-width:520px;margin-left:auto;margin-right:0;
  text-align:right;padding-right:clamp(.4rem,1vw,1rem)
}
.hero-intro h1{margin:0 0 1.2rem}
.hero-intro p{max-width:500px;margin-left:auto;margin-right:0}
.hero-brand{
  justify-self:stretch;align-self:center;width:100%;max-width:700px;
  align-items:flex-start;gap:1.25rem;padding-left:clamp(.4rem,1vw,1rem)
}
.hero-brand img{width:min(100%,610px);align-self:flex-start}
.hero-services{align-self:flex-start;text-align:left;max-width:680px}

/* Section titles: two blocks aimed at the central axis, like the old Wix career page. */
.section-label-axis{text-align:center;margin-bottom:1.8rem}
.axis-title{
  display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(1.6rem,4vw,4.5rem);
  align-items:end;max-width:1080px!important;margin:0 auto 4.5rem!important;
  text-align:initial!important;
}
.axis-title .axis-left{display:block;text-align:right;justify-self:stretch}
.axis-title .axis-right{display:block;text-align:left;justify-self:stretch}
.axis-title mark{box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:.02em .1em .06em}

/* Services: tighter, overlapping editorial rhythm rather than isolated rows. */
.services{gap:clamp(1.3rem,3vw,3rem)}
.service,.service:nth-child(even){width:92%;max-width:1060px;min-height:360px}
.service + .service{margin-top:clamp(-2.6rem,-2vw,-1.2rem)}
.service:nth-child(1) .polaroid{transform:translateY(20px) rotate(-1.35deg)}
.service:nth-child(2) .polaroid{transform:translateY(-24px) rotate(1.1deg)}
.service:nth-child(3) .polaroid{transform:translateY(14px) rotate(-.75deg)}
.service:nth-child(4) .polaroid{transform:translateY(-20px) rotate(1.25deg)}

/* Experience / collaborations: compact the vertical rhythm and let the photo bleed into it. */
#kariera .experience-grid{gap:clamp(1.4rem,3vw,3rem);align-items:start;margin-top:-1.2rem}
#kariera .experience-photo{top:122px;max-width:555px;margin-top:-2.8rem;margin-bottom:-1.3rem;z-index:2}
#kariera .collab{padding-bottom:.8rem;margin-bottom:.85rem}
#kariera .collab h3{margin:.35rem 0 .55rem}
#kariera .collab p{margin:.15rem 0 0;line-height:1.43}

/* Notes: one black rule, with an intentionally imperfect lime marker stroke underneath. */
.notes-rule{position:relative;width:min(430px,72%);height:18px;margin:-1.4rem 0 1.4rem}
.notes-rule::after{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--ink);z-index:2}
.notes-rule span{position:absolute;left:-2px;top:4px;width:78%;height:8px;background:var(--lime);transform:rotate(-.7deg) skewX(-8deg);z-index:1;clip-path:polygon(0 18%,96% 0,100% 67%,3% 100%)}
.note-card{border-top:0;padding-top:.7rem}
.note-card::before,.note-card::after{content:none}

/* Contact circles are real links; keep the pretty hover, ensure the whole control is clickable. */
.contact-icons a{position:relative;z-index:3;pointer-events:auto;cursor:pointer}
.contact-icons a img,.contact-icons a svg{pointer-events:none}

/* Archive link: small editorial footnote, no CTA styling. */
.footer-inner a{font-family:var(--display);border-bottom:1px solid rgba(23,23,19,.35);padding-bottom:.05em}
.footer-inner a:hover{background:linear-gradient(transparent 58%,var(--lime) 58%);text-decoration:none;border-color:transparent}

@media(max-width:900px){
  .hero-intro{margin:0 auto;text-align:center;padding-right:0}
  .hero-intro p{margin-left:auto;margin-right:auto}
  .hero-brand{align-items:center;padding-left:0}
  .hero-brand img{align-self:center}
  .hero-services{align-self:center;text-align:center}
  .axis-title{grid-template-columns:1fr;gap:.15rem;text-align:center!important}
  .axis-title .axis-left,.axis-title .axis-right{text-align:center}
  .service + .service{margin-top:0}
  #kariera .experience-photo{margin-top:0;margin-bottom:1.5rem}
  .notes-rule{width:min(430px,100%)}
}


/* v0.13.1 — hero only: brand language + local instinct */
.hero-intro h1 mark{
  background:var(--lime);
  color:var(--ink);
  padding:.02em .12em .06em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero-services{
  max-width:650px;
  line-height:1.06;
}
.hero-services mark{background:transparent;padding:0}

/* v0.13.3 — hero only: anchor both halves to the outer page edges. */
.hero-layout{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(4rem,8vw,9rem);
}
.hero-copy{
  justify-self:start;
  width:100%;
  padding-top:0;
}
.hero-intro{
  width:100%;
  max-width:520px;
  margin:0;
  padding-right:0;
  text-align:left;
}
.hero-intro p{
  max-width:500px;
  margin-left:0;
  margin-right:0;
}
.hero-brand{
  justify-self:end;
  width:100%;
  max-width:700px;
  padding-left:0;
  align-items:flex-end;
}
.hero-brand img{
  align-self:flex-end;
}
.hero-services{
  align-self:flex-end;
  text-align:right;
  max-width:650px;
}

@media(max-width:900px){
  .hero-intro{max-width:none;text-align:left;margin:0}
  .hero-intro p{margin-left:0;margin-right:0}
  .hero-brand{align-items:flex-start}
  .hero-brand img{align-self:flex-start}
  .hero-services{align-self:flex-start;text-align:left}
}


/* v0.13.4 — hero only: quieter left lockup, tighter services, vertical balance. */
.hero-copy{
  transform:translateY(44px);
}
.hero-intro h1{
  font-size:clamp(2.05rem,3.45vw,3.75rem);
  line-height:1.02;
}
.hero-services{
  font-size:clamp(1.8rem,3.15vw,3.45rem);
  line-height:1.08;
  max-width:600px;
}
@media(max-width:900px){
  .hero-copy{transform:none}
  .hero-intro h1{font-size:clamp(2.15rem,10vw,3.8rem)}
  .hero-services{font-size:clamp(2rem,8vw,3.35rem);max-width:none}
}


/* v0.13.8 — hero typography only: restore stronger headline scale and optical punctuation. */
.hero-intro h1{
  font-size:clamp(2.55rem,4.25vw,4.65rem);
  line-height:1.01;
}
.hero-services{
  font-size:clamp(2.35rem,4vw,4.35rem);
  line-height:1.04;
  max-width:720px;
}
.hero-comma{
  display:inline-block;
  transform:translateX(.10em);
}
@media(max-width:900px){
  .hero-intro h1{font-size:clamp(2.3rem,10vw,4rem)}
  .hero-services{font-size:clamp(2.1rem,8.7vw,3.7rem);max-width:none}
  .hero-comma{transform:translateX(.06em)}
}


/* v0.13.9 — hero test: offer on the left, brand line under logo on the right. */
.hero-copy{transform:none;align-self:center}
.hero-intro{max-width:620px}
.hero-intro h1{
  font:500 clamp(2.9rem,5.2vw,5.6rem)/.98 var(--display);
  letter-spacing:-.045em;
  margin:0;
  text-align:left;
}
.hero-brand{align-self:center;gap:1.25rem}
.hero-brand img{align-self:flex-end}
.hero-services{
  font:500 clamp(2.9rem,5.2vw,5.6rem)/.98 var(--display);
  letter-spacing:-.045em;
  margin:0;
  max-width:620px;
  align-self:flex-end;
  text-align:right;
}
.hero-services mark{
  background:var(--lime);
  color:var(--ink);
  padding:.02em .12em .06em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
@media(max-width:900px){
  .hero-intro h1,.hero-services{font-size:clamp(2.35rem,10vw,4rem);text-align:left}
  .hero-brand img,.hero-services{align-self:flex-start}
}

/* v0.13.10 — hero hierarchy only: service descriptor quieter; tagline pulled toward the centre. */
.hero-copy{
  align-self:center;
  transform:translateY(56px);
}
.hero-intro{
  max-width:520px;
}
.hero-intro h1{
  font:500 clamp(1.95rem,3.15vw,3.55rem)/1.03 var(--display);
  letter-spacing:-.035em;
  margin:0;
  text-align:left;
}
.hero-brand{
  align-self:center;
  gap:1.3rem;
}
.hero-brand img{
  align-self:flex-end;
}
.hero-services{
  font:500 clamp(2.7rem,4.8vw,5.2rem)/.99 var(--display);
  letter-spacing:-.043em;
  max-width:620px;
  align-self:flex-start;
  text-align:left;
}
@media(max-width:900px){
  .hero-copy{transform:none}
  .hero-intro h1{font-size:clamp(1.9rem,8vw,3rem)}
  .hero-brand img{align-self:flex-start}
  .hero-services{align-self:flex-start;text-align:left;font-size:clamp(2.3rem,9vw,4rem)}
}


/* v0.13.11 — hero tagline test: one continuous sentence, calmer and slightly stronger. */
.hero-tagline{
  max-width:720px;
  line-height:1.02;
  font-weight:600;
  white-space:normal;
}
.hero-tagline mark{
  display:inline;
  font-weight:700;
  background:var(--lime);
  padding:.02em .10em .05em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}

/* v0.13.12 — hero only: soften tagline, keep it continuous, quiet the service descriptor. */
.hero-intro h1{
  font-size:clamp(1.6rem,2.55vw,2.8rem);
  line-height:1.08;
  letter-spacing:-.025em;
}
.hero-tagline{
  font-size:clamp(2.05rem,3.45vw,3.8rem);
  line-height:1.02;
  font-weight:500;
  max-width:none;
  white-space:nowrap;
}
.hero-tagline mark{
  font-weight:500;
}
@media(max-width:900px){
  .hero-intro h1{font-size:clamp(1.75rem,7.2vw,2.75rem)}
  .hero-tagline{font-size:clamp(2rem,8.2vw,3.5rem);white-space:normal}
}


/* v0.13.13 — hero tagline: two sentences in one compact block, no horizontal overflow. */
.hero-tagline{
  max-width:560px;
  white-space:normal;
  overflow-wrap:normal;
  font-weight:500;
  line-height:1.02;
}
.hero-tagline mark{
  display:inline;
  font-weight:500;
}
@media(max-width:900px){
  .hero-tagline{max-width:100%;white-space:normal}
}


/* v0.14 — clean hero reset */
.header-nav-only{justify-content:flex-end;min-height:88px}
.header-nav-only .main-nav{margin-left:auto}
.hero{padding:clamp(7rem,11vw,10rem) 0 clamp(6rem,9vw,8rem)}
.hero-reset{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(4rem,8vw,9rem);align-items:center}
.hero-logo{display:flex;justify-content:flex-start;align-items:center}
.hero-logo img{display:block;width:min(100%,650px);height:auto;position:relative;top:-55px;transform:none}
.hero-message{max-width:600px;justify-self:start}
.hero-message h1{font:500 clamp(3.1rem,5.8vw,6rem)/.98 var(--display);letter-spacing:-.05em;margin:0 0 1.6rem}
.hero-message h1 mark{background:var(--lime);color:var(--ink);padding:.02em .12em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero-descriptor{margin:0;max-width:540px;font:500 clamp(1.05rem,1.55vw,1.45rem)/1.45 var(--display);letter-spacing:.01em}
@media(max-width:900px){
  .header-nav-only{min-height:82px;justify-content:flex-start}
  .header-nav-only .main-nav{margin-left:0}
  .hero-reset{grid-template-columns:1fr;gap:3rem}
  .hero-logo{justify-content:flex-start}
  .hero-logo img{width:min(84vw,520px);position:relative;top:0;transform:none}
  .hero-message{justify-self:start;max-width:none}
  .hero-message h1{font-size:clamp(2.7rem,10vw,4.8rem)}
  .hero-descriptor{font-size:1rem}
}

/* v0.14.5 — hero only: swap sides, restore original tagline order. */
.hero-message{justify-self:start}
.hero-logo{justify-self:end;justify-content:flex-end}
.hero-logo img{top:-55px}
@media(max-width:900px){
  .hero-message{order:1}
  .hero-logo{order:0;justify-self:start;justify-content:flex-start}
  .hero-logo img{top:0}
}

/* v0.14.6 — hero only: tagline order reversed; logo scaled up. */
.hero-logo img{width:min(100%,760px)}
@media(max-width:900px){.hero-logo img{width:min(88vw,560px)}}

/* v0.14.7 — hero only: lower the large logo so it reads like a signature beside the tagline. */
.hero-logo img{top:36px}
@media(max-width:900px){.hero-logo img{top:0}}


/* v0.14.10 — hero micro-balance: claim slightly higher, logo block slightly lower, marker becomes a hand-drawn smear. */
.hero-message{
  transform:translateY(-47px);
}
.hero-message h1 mark{
  position:relative;
  display:inline-block;
  background:transparent;
  padding:0 .015em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero-message h1 mark::after{
  content:"";
  position:absolute;
  left:-.03em;
  right:-.07em;
  bottom:.08em;
  height:.42em;
  background:var(--lime);
  border-radius:54% 38% 46% 32% / 52% 34% 60% 36%;
  transform:rotate(-1.4deg);
  opacity:.92;
  z-index:-1;
}
.hero-logo{
  flex-direction:column;
  align-items:flex-start;
  transform:translateY(119px);
}
.hero-logo img{
  top:0;
}
.hero-logo .hero-descriptor{
  align-self:flex-start;
  margin-top:1.15rem;
  max-width:520px;
  font-size:clamp(.78rem,1vw,1rem);
  line-height:1.35;
  letter-spacing:.035em;
}
@media(max-width:900px){
  .hero-message{transform:none}
  .hero-logo{transform:none;align-items:flex-start}
  .hero-logo .hero-descriptor{margin-top:.85rem;font-size:.82rem}
  .hero-message h1 mark::after{bottom:.06em;height:.38em}
}

/* v0.14.12 — optical dot alignment: nudge logo block 16px lower so the lime logo dot aligns with the period after voice. */

/* v0.14.13 — final hero spacing pass: logo a touch lower; role line tucked closer beneath it. */
.hero-logo{
  transform:translateY(129px);
}
.hero-logo .hero-descriptor{
  margin-top:.55rem;
}
@media(max-width:900px){
  .hero-logo{transform:none}
  .hero-logo .hero-descriptor{margin-top:.65rem}
}


/* v0.14.15 — surgical refinement pass. Everything else stays on the v0.14.14 geometry. */

/* Navigation: quiet black links at rest, quick hand-drawn lime swipe on hover/focus. */
.main-nav a{
  position:relative;
  isolation:isolate;
  text-decoration:none;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left:-.10em;
  width:calc(100% + .20em);
  bottom:-.18em;
  height:.34em;
  background:var(--lime);
  clip-path:polygon(0 42%,5% 26%,17% 35%,32% 18%,49% 30%,65% 13%,83% 27%,100% 20%,97% 70%,80% 62%,61% 78%,43% 65%,24% 82%,7% 70%);
  transform:scaleX(0) rotate(-1.1deg);
  transform-origin:left center;
  transition:transform .20s cubic-bezier(.2,.75,.25,1);
  z-index:-1;
}
.main-nav a:hover,.main-nav a:focus-visible{text-decoration:none;outline:none}
.main-nav a:hover::after,.main-nav a:focus-visible::after{transform:scaleX(1) rotate(-1.1deg)}

/* Hero: the claim stays exactly where it was, but 'instinct.' no longer carries a lime marker. */
.hero-message .hero-instinct{display:inline;color:inherit}

/* Section headings: restore the earlier asymmetrical leftward editorial alignment only. */
.section-label-axis{text-align:left}
.axis-title{
  display:block;
  max-width:1080px!important;
  margin:0 0 4.5rem!important;
  text-align:left!important;
}
.axis-title .axis-left{
  display:inline;
  text-align:left;
}
.axis-title .axis-right{
  display:inline-block;
  text-align:left;
  margin-left:.18em;
}

/* Headline highlights: irregular marker swipes, not rectangles. */
.section-title mark{
  position:relative;
  display:inline-block;
  isolation:isolate;
  background:transparent!important;
  color:inherit;
  padding:0 .035em!important;
}
.section-title mark::after{
  content:"";
  position:absolute;
  left:-.055em;
  right:-.07em;
  bottom:.06em;
  height:.39em;
  background:var(--lime);
  clip-path:polygon(0 30%,5% 18%,13% 27%,24% 10%,37% 22%,50% 7%,63% 20%,77% 5%,90% 18%,100% 11%,98% 72%,89% 66%,75% 81%,60% 68%,47% 84%,31% 70%,16% 86%,3% 72%);
  transform:rotate(-.8deg) skewX(-2deg);
  opacity:.9;
  z-index:-1;
}
#kariera .section-title mark::after{
  left:-.035em;
  right:-.09em;
  height:.36em;
  clip-path:polygon(0 24%,9% 12%,22% 24%,36% 9%,49% 18%,64% 5%,79% 21%,93% 10%,100% 24%,96% 77%,82% 68%,67% 84%,52% 72%,35% 87%,19% 69%,4% 80%);
  transform:rotate(.65deg) skewX(2deg);
}
#o-mnie .section-title mark::after{
  left:-.08em;
  right:-.025em;
  height:.42em;
  clip-path:polygon(0 35%,7% 17%,20% 29%,33% 12%,48% 25%,62% 9%,76% 23%,91% 14%,100% 30%,97% 74%,84% 67%,70% 82%,54% 70%,39% 88%,22% 72%,5% 84%);
  transform:rotate(-1.25deg) skewX(-3deg);
}

/* Hero logo descriptor: signature line pulled one full text line closer to the logo. */
.hero-logo .hero-descriptor{
  margin-top:-1.25rem;
  margin-left:29%;
  max-width:500px;
}

@media(max-width:900px){
  .axis-title{display:block;text-align:left!important;margin-left:0!important;margin-right:0!important}
  .axis-title .axis-left{display:inline;text-align:left}
  .axis-title .axis-right{display:inline-block;text-align:left;margin-left:.18em}
  .hero-logo .hero-descriptor{margin-top:-.65rem;margin-left:24%;max-width:72%}
}


/* v0.14.17 — collected format corrections after live review. */

/* Hero descriptor: tuck it into the logo like a signature field, slightly left and almost two lines higher. */
.hero-logo .hero-descriptor{
  margin-top:-3.2rem;
  margin-left:24%;
  max-width:500px;
}

/* Section headlines: clean left alignment, natural spacing and wrapping only when the viewport actually requires it. */
#oferta > .bp-shell > .section-title,
#kariera > .bp-shell > .section-title,
#notatki > .bp-shell > .section-title,
#o-mnie .section-title{
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
  text-justify:auto;
  word-spacing:normal;
  letter-spacing:-.035em;
}
.axis-title{
  display:block!important;
  max-width:none!important;
  margin:0 0 4rem!important;
  text-align:left!important;
}
.axis-title .axis-left,
.axis-title .axis-right{
  display:inline!important;
  margin:0!important;
  padding:0!important;
  text-align:left!important;
}
.axis-title .axis-left::after{content:" ";}

/* Lime no longer lives in section headings. */
.section-title mark,
.axis-title mark{
  background:transparent!important;
  color:inherit!important;
  padding:0!important;
}
.section-title mark::after,
.axis-title mark::after{content:none!important;display:none!important;}

/* Notes heading is now plain editorial type; no marker rule under it. */
.notes-rule{display:none!important;}

/* Archive/About link: clean at rest, same quick hand-drawn lime swipe as navigation on hover. */
.archive-link{
  position:relative;
  isolation:isolate;
  display:inline-block;
  font-family:var(--display);
  text-decoration:none;
  border-bottom:0!important;
  padding-bottom:.08em;
  background:transparent!important;
}
.archive-link::after{
  content:"";
  position:absolute;
  left:-.08em;
  width:calc(100% + .16em);
  bottom:-.08em;
  height:.30em;
  background:var(--lime);
  clip-path:polygon(0 42%,5% 26%,17% 35%,32% 18%,49% 30%,65% 13%,83% 27%,100% 20%,97% 70%,80% 62%,61% 78%,43% 65%,24% 82%,7% 70%);
  transform:scaleX(0) rotate(-1.1deg);
  transform-origin:left center;
  transition:transform .20s cubic-bezier(.2,.75,.25,1);
  z-index:-1;
}
.archive-link:hover,.archive-link:focus-visible{outline:none;background:transparent!important;}
.archive-link:hover::after,.archive-link:focus-visible::after{transform:scaleX(1) rotate(-1.1deg);}

/* Experience typewriter returns to the elongated landscape format, balancing the larger service image. */
#kariera .experience-photo{max-width:555px;}
#kariera .experience-photo img{aspect-ratio:4/3;object-fit:cover;object-position:center;}

/* Keep all contact controls unambiguously above decorative content and fully clickable. */
.contact-right{position:relative;z-index:2;}
.contact-icons{position:relative;z-index:4;}
.contact-icons a{position:relative;z-index:5;pointer-events:auto;}

@media(max-width:900px){
  .hero-logo .hero-descriptor{margin-top:-1rem;margin-left:18%;}
  .axis-title .axis-left::after{content:" ";}
}


/* v0.14.18 — live-review typography + interactive lime language. */

/* Editorial section headlines: natural left-set lines, no axis stretching or oversized wrapping. */
#oferta > .bp-shell > .section-title,
#kariera > .bp-shell > .section-title,
#notatki > .bp-shell > .section-title,
#o-mnie .section-title{
  font-size:clamp(3rem,4.2vw,4.8rem)!important;
  line-height:.98!important;
  letter-spacing:-.025em!important;
  word-spacing:normal!important;
  max-width:none!important;
  text-align:left!important;
}
.axis-title{
  display:block!important;
  margin:0 0 4rem!important;
}
.axis-title .axis-left,
.axis-title .axis-right{
  display:inline!important;
  text-align:left!important;
}

/* Localization polaroid joins the same landscape family as the other service cards. */
.service.localization .polaroid{max-width:390px!important;}
.service.localization .polaroid img{
  aspect-ratio:4/3!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Services + Experience: lime appears only as an interaction response.
   Hovering anywhere over a service/collaboration draws the same marker beneath its title. */
.service h3,
.collab h3{
  position:relative;
  isolation:isolate;
  display:inline-block;
}
.service h3::after,
.collab h3::after{
  content:"";
  position:absolute;
  left:-.08em;
  width:calc(100% + .16em);
  bottom:-.10em;
  height:.28em;
  background:var(--lime);
  clip-path:polygon(0 42%,5% 26%,17% 35%,32% 18%,49% 30%,65% 13%,83% 27%,100% 20%,97% 70%,80% 62%,61% 78%,43% 65%,24% 82%,7% 70%);
  transform:scaleX(0) rotate(-1.1deg);
  transform-origin:left center;
  transition:transform .20s cubic-bezier(.2,.75,.25,1);
  z-index:-1;
  pointer-events:none;
}
.service:hover h3::after,
.service:focus-within h3::after,
.collab:hover h3::after,
.collab:focus-within h3::after{
  transform:scaleX(1) rotate(-1.1deg);
}

@media(max-width:900px){
  #oferta > .bp-shell > .section-title,
  #kariera > .bp-shell > .section-title,
  #notatki > .bp-shell > .section-title,
  #o-mnie .section-title{
    font-size:clamp(2.7rem,11vw,4rem)!important;
  }
}

/* v0.14.19 — section-label accents, tighter editorial headings, localization hover correction. */

/* Small section labels carry the permanent lime accent, not the large headlines. */
.section-label{
  position:relative;
  isolation:isolate;
  display:table;
  width:max-content;
  max-width:100%;
}
.section-label::after{
  content:"";
  position:absolute;
  left:-.10em;
  right:-.16em;
  bottom:-.28em;
  height:.24em;
  background:var(--lime);
  clip-path:polygon(0 45%,7% 23%,20% 36%,36% 17%,53% 31%,70% 13%,86% 29%,100% 20%,97% 72%,80% 61%,61% 78%,43% 65%,23% 82%,6% 70%);
  transform:rotate(-1deg);
  z-index:-1;
  pointer-events:none;
}

/* Large section headlines: tighter words and letters, with natural left-set wrapping. */
#oferta > .bp-shell > .section-title,
#kariera > .bp-shell > .section-title,
#notatki > .bp-shell > .section-title,
#o-mnie .section-title{
  font-size:clamp(2.9rem,3.75vw,4.35rem)!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
  word-spacing:-.14em!important;
}

/* First service: underline the source-language line only, never the PL line. */
.service.localization h3::after{display:none!important;}
.localization-title{
  display:inline-flex!important;
  flex-direction:column;
  align-items:flex-end;
  line-height:1!important;
}
.localization-title .localization-source{
  position:relative;
  isolation:isolate;
  display:inline-block;
}
.localization-title .localization-source::after{
  content:"";
  position:absolute;
  left:-.08em;
  width:calc(100% + .16em);
  bottom:-.12em;
  height:.28em;
  background:var(--lime);
  clip-path:polygon(0 42%,5% 26%,17% 35%,32% 18%,49% 30%,65% 13%,83% 27%,100% 20%,97% 70%,80% 62%,61% 78%,43% 65%,24% 82%,7% 70%);
  transform:scaleX(0) rotate(-1.7deg);
  transform-origin:left center;
  transition:transform .20s cubic-bezier(.2,.75,.25,1);
  z-index:-1;
  pointer-events:none;
}
.service.localization:hover .localization-source::after,
.service.localization:focus-within .localization-source::after{
  transform:scaleX(1) rotate(-1.7deg);
}
.localization-title .localization-target{display:block;}

@media(max-width:900px){
  #oferta > .bp-shell > .section-title,
  #kariera > .bp-shell > .section-title,
  #notatki > .bp-shell > .section-title,
  #o-mnie .section-title{
    font-size:clamp(2.55rem,10vw,3.8rem)!important;
    word-spacing:-.10em!important;
  }
}


/* v0.14.20 — contact icons: hand-drawn marker stroke behind the circles. */
.contact-icons a{
  isolation:isolate;
  overflow:visible;
  background:transparent!important;
  border-color:var(--ink)!important;
  transition:transform .16s ease;
}
.contact-icons a::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:50%;
  top:50%;
  width:78px;
  height:25px;
  background:var(--lime);
  clip-path:polygon(0 39%,6% 24%,17% 31%,29% 17%,43% 27%,57% 12%,72% 24%,87% 16%,100% 29%,97% 68%,84% 61%,69% 75%,54% 65%,38% 79%,22% 68%,7% 77%);
  transform:translate(-50%,-50%) scaleX(0) rotate(-3deg);
  transform-origin:left center;
  transition:transform .24s cubic-bezier(.2,.75,.25,1);
  pointer-events:none;
}
.contact-icons a:nth-child(2)::before{
  width:82px;
  height:23px;
  clip-path:polygon(0 45%,8% 28%,20% 34%,35% 18%,50% 30%,66% 15%,82% 25%,100% 18%,96% 69%,79% 63%,63% 79%,46% 66%,29% 77%,12% 67%);
  transform:translate(-50%,-50%) scaleX(0) rotate(2deg);
}
.contact-icons a:nth-child(3)::before{
  width:76px;
  height:27px;
  clip-path:polygon(0 31%,9% 20%,23% 28%,37% 14%,53% 26%,70% 12%,86% 24%,100% 34%,96% 73%,82% 65%,66% 81%,49% 68%,32% 80%,15% 70%);
  transform:translate(-50%,-50%) scaleX(0) rotate(-1deg);
}
.contact-icons a:nth-child(4)::before{
  width:84px;
  height:24px;
  clip-path:polygon(0 41%,7% 25%,19% 35%,34% 19%,48% 29%,63% 15%,80% 27%,100% 22%,96% 71%,81% 62%,65% 77%,48% 67%,31% 79%,14% 68%);
  transform:translate(-50%,-50%) scaleX(0) rotate(3deg);
}
.contact-icons a:hover,
.contact-icons a:focus-visible{
  background:transparent!important;
  border-color:var(--ink)!important;
  transform:translateY(-2px);
  outline:none;
}
.contact-icons a:hover::before,
.contact-icons a:focus-visible::before{
  transform:translate(-50%,-50%) scaleX(1) rotate(-3deg);
}
.contact-icons a:nth-child(2):hover::before,
.contact-icons a:nth-child(2):focus-visible::before{
  transform:translate(-50%,-50%) scaleX(1) rotate(2deg);
}
.contact-icons a:nth-child(3):hover::before,
.contact-icons a:nth-child(3):focus-visible::before{
  transform:translate(-50%,-50%) scaleX(1) rotate(-1deg);
}
.contact-icons a:nth-child(4):hover::before,
.contact-icons a:nth-child(4):focus-visible::before{
  transform:translate(-50%,-50%) scaleX(1) rotate(3deg);
}
.contact-icons a > svg,
.contact-icons a > img{
  position:relative;
  z-index:1;
}


/* v0.14.22 — contact icons: compact, careless highlighter fill inside the circle. */
.contact-icons a{
  display:grid!important;
  place-items:center!important;
  width:62px;
  height:62px;
  border:1px solid var(--ink)!important;
  border-radius:50%;
  position:relative;
  isolation:isolate;
  overflow:visible;
  background:transparent!important;
  transition:transform .16s ease;
}
.contact-icons a::before,
.contact-icons a::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  background:var(--lime);
  pointer-events:none;
  z-index:0;
  opacity:.98;
  transform-origin:left center;
  transition:transform .2s cubic-bezier(.22,.75,.26,1), opacity .12s ease;
}
.contact-icons a::before{
  width:40px;
  height:22px;
  clip-path:polygon(0 28%, 15% 12%, 39% 0, 62% 7%, 86% 16%, 100% 34%, 96% 71%, 79% 84%, 52% 100%, 24% 94%, 5% 78%);
  transform:translate(-50%,-50%) scaleX(0) rotate(-18deg);
}
.contact-icons a::after{
  width:32px;
  height:18px;
  clip-path:polygon(0 31%, 17% 16%, 46% 2%, 72% 10%, 100% 28%, 94% 71%, 73% 88%, 43% 100%, 13% 91%);
  transform:translate(-47%,-48%) scaleX(0) rotate(9deg);
  opacity:.9;
}
.contact-icons a:nth-child(2)::before{transform:translate(-50%,-50%) scaleX(0) rotate(-14deg);}
.contact-icons a:nth-child(2)::after{transform:translate(-47%,-48%) scaleX(0) rotate(12deg);}
.contact-icons a:nth-child(3)::before{transform:translate(-50%,-50%) scaleX(0) rotate(-20deg);}
.contact-icons a:nth-child(3)::after{transform:translate(-47%,-48%) scaleX(0) rotate(7deg);}
.contact-icons a:nth-child(4)::before{transform:translate(-50%,-50%) scaleX(0) rotate(-16deg);}
.contact-icons a:nth-child(4)::after{transform:translate(-47%,-48%) scaleX(0) rotate(11deg);}
.contact-icons a:hover,
.contact-icons a:focus-visible{
  background:transparent!important;
  border-color:var(--ink)!important;
  transform:translateY(-2px);
  outline:none;
}
.contact-icons a:hover::before,
.contact-icons a:focus-visible::before{
  transform:translate(-50%,-50%) scaleX(1) rotate(-18deg);
}
.contact-icons a:hover::after,
.contact-icons a:focus-visible::after{
  transform:translate(-47%,-48%) scaleX(1) rotate(9deg);
  transition-delay:.05s;
}
.contact-icons a:nth-child(2):hover::before,
.contact-icons a:nth-child(2):focus-visible::before{transform:translate(-50%,-50%) scaleX(1) rotate(-14deg);}
.contact-icons a:nth-child(2):hover::after,
.contact-icons a:nth-child(2):focus-visible::after{transform:translate(-47%,-48%) scaleX(1) rotate(12deg);}
.contact-icons a:nth-child(3):hover::before,
.contact-icons a:nth-child(3):focus-visible::before{transform:translate(-50%,-50%) scaleX(1) rotate(-20deg);}
.contact-icons a:nth-child(3):hover::after,
.contact-icons a:nth-child(3):focus-visible::after{transform:translate(-47%,-48%) scaleX(1) rotate(7deg);}
.contact-icons a:nth-child(4):hover::before,
.contact-icons a:nth-child(4):focus-visible::before{transform:translate(-50%,-50%) scaleX(1) rotate(-16deg);}
.contact-icons a:nth-child(4):hover::after,
.contact-icons a:nth-child(4):focus-visible::after{transform:translate(-47%,-48%) scaleX(1) rotate(11deg);}
.contact-icons a > svg,
.contact-icons a > img{
  position:relative;
  z-index:2;
  display:block;
  margin:auto;
}
.contact-label{z-index:3;}


/* v0.14.23 — contact icons: compact swipe with slight bleed past the circle. */
.contact-icons a{overflow:visible;}
.contact-icons a::before{
  width:46px;
  height:24px;
  clip-path:polygon(0 30%, 13% 11%, 37% 0, 61% 7%, 86% 17%, 100% 34%, 96% 72%, 79% 85%, 53% 100%, 24% 94%, 5% 78%);
  transform:translate(-51%,-50%) scaleX(0) rotate(-18deg);
}
.contact-icons a::after{
  width:38px;
  height:19px;
  clip-path:polygon(0 34%, 17% 16%, 45% 3%, 72% 10%, 100% 29%, 94% 72%, 72% 89%, 42% 100%, 12% 91%);
  transform:translate(-46%,-48%) scaleX(0) rotate(10deg);
}
.contact-icons a:nth-child(2)::before{transform:translate(-50%,-50%) scaleX(0) rotate(-14deg);}
.contact-icons a:nth-child(2)::after{transform:translate(-46%,-48%) scaleX(0) rotate(13deg);}
.contact-icons a:nth-child(3)::before{transform:translate(-51%,-50%) scaleX(0) rotate(-20deg);}
.contact-icons a:nth-child(3)::after{transform:translate(-46%,-48%) scaleX(0) rotate(8deg);}
.contact-icons a:nth-child(4)::before{transform:translate(-50%,-50%) scaleX(0) rotate(-16deg);}
.contact-icons a:nth-child(4)::after{transform:translate(-46%,-48%) scaleX(0) rotate(11deg);}
.contact-icons a:hover::before,
.contact-icons a:focus-visible::before{transform:translate(-51%,-50%) scaleX(1) rotate(-18deg);}
.contact-icons a:hover::after,
.contact-icons a:focus-visible::after{transform:translate(-46%,-48%) scaleX(1) rotate(10deg);}
.contact-icons a:nth-child(2):hover::before,
.contact-icons a:nth-child(2):focus-visible::before{transform:translate(-50%,-50%) scaleX(1) rotate(-14deg);}
.contact-icons a:nth-child(2):hover::after,
.contact-icons a:nth-child(2):focus-visible::after{transform:translate(-46%,-48%) scaleX(1) rotate(13deg);}
.contact-icons a:nth-child(3):hover::before,
.contact-icons a:nth-child(3):focus-visible::before{transform:translate(-51%,-50%) scaleX(1) rotate(-20deg);}
.contact-icons a:nth-child(3):hover::after,
.contact-icons a:nth-child(3):focus-visible::after{transform:translate(-46%,-48%) scaleX(1) rotate(8deg);}
.contact-icons a:nth-child(4):hover::before,
.contact-icons a:nth-child(4):focus-visible::before{transform:translate(-50%,-50%) scaleX(1) rotate(-16deg);}
.contact-icons a:nth-child(4):hover::after,
.contact-icons a:nth-child(4):focus-visible::after{transform:translate(-46%,-48%) scaleX(1) rotate(11deg);}


/* v0.15.0 — final layout refinements. */

/* Experience: keep the sticky journey, only give the typewriter more breathing room at the start. */
#kariera .experience-photo{
  margin-top:1.15rem!important;
}

/* First service title: a calm two-line language direction, without symbols. */
.localization-title .localization-main,
.localization-title .localization-languages{
  display:block;
}
.localization-title .localization-main{
  margin-bottom:.18em;
}
.localization-title .localization-languages{
  font-size:.82em;
  line-height:1.08;
}
.localization-title .localization-main,
.localization-title .localization-languages{
  position:relative;
  z-index:0;
}
.localization-title .localization-languages::after{
  content:"";
  position:absolute;
  left:-.05em;
  right:-.05em;
  bottom:-.12em;
  height:.25em;
  background:var(--lime);
  clip-path:polygon(0 43%,6% 27%,19% 35%,34% 18%,51% 30%,67% 14%,84% 27%,100% 20%,97% 71%,80% 63%,61% 79%,42% 66%,23% 82%,7% 70%);
  transform:scaleX(0) rotate(-1.3deg);
  transform-origin:left center;
  transition:transform .22s cubic-bezier(.2,.75,.25,1);
  z-index:-1;
  pointer-events:none;
}
.service.localization:hover .localization-languages::after,
.service.localization:focus-within .localization-languages::after{
  transform:scaleX(1) rotate(-1.3deg);
}
.localization-title .localization-source,
.localization-title .localization-target{display:none!important;}

/* Notes: a small editorial invitation before the posts. */
.notes-intro{
  max-width:720px;
  margin:-2.35rem 0 3.4rem;
  font-size:1rem;
  line-height:1.55;
}

/* Contact: compact careless highlighter fill, mostly inside with a slight bleed. */
.contact-icons a{
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.contact-icons a::before,
.contact-icons a::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:0;
  pointer-events:none;
  background:var(--lime);
  transform-origin:left center;
  transition:transform .22s cubic-bezier(.2,.75,.25,1), opacity .12s ease;
}
.contact-icons a::before{
  width:49px;
  height:27px;
  opacity:.96;
  border-radius:22% 13% 18% 16%;
  clip-path:polygon(0 32%,10% 20%,26% 14%,44% 4%,61% 10%,78% 18%,100% 31%,96% 69%,84% 78%,65% 88%,47% 100%,28% 91%,10% 79%,2% 64%);
  transform:translate(-52%,-50%) scaleX(0) rotate(-13deg);
}
.contact-icons a::after{
  width:39px;
  height:20px;
  opacity:.82;
  border-radius:18%;
  clip-path:polygon(0 30%,15% 18%,34% 9%,54% 3%,73% 12%,100% 28%,95% 70%,78% 83%,57% 93%,34% 100%,12% 84%);
  transform:translate(-46%,-47%) scaleX(0) rotate(8deg);
}
.contact-icons a:nth-child(2)::before{transform:translate(-51%,-50%) scaleX(0) rotate(-10deg);}
.contact-icons a:nth-child(2)::after{transform:translate(-47%,-47%) scaleX(0) rotate(11deg);}
.contact-icons a:nth-child(3)::before{transform:translate(-52%,-50%) scaleX(0) rotate(-14deg);}
.contact-icons a:nth-child(3)::after{transform:translate(-46%,-47%) scaleX(0) rotate(7deg);}
.contact-icons a:nth-child(4)::before{transform:translate(-51%,-50%) scaleX(0) rotate(-11deg);}
.contact-icons a:nth-child(4)::after{transform:translate(-47%,-47%) scaleX(0) rotate(10deg);}
.contact-icons a:hover::before,.contact-icons a:focus-visible::before{transform:translate(-52%,-50%) scaleX(1) rotate(-13deg);}
.contact-icons a:hover::after,.contact-icons a:focus-visible::after{transform:translate(-46%,-47%) scaleX(1) rotate(8deg);transition-delay:.045s;}
.contact-icons a:nth-child(2):hover::before,.contact-icons a:nth-child(2):focus-visible::before{transform:translate(-51%,-50%) scaleX(1) rotate(-10deg);}
.contact-icons a:nth-child(2):hover::after,.contact-icons a:nth-child(2):focus-visible::after{transform:translate(-47%,-47%) scaleX(1) rotate(11deg);}
.contact-icons a:nth-child(3):hover::before,.contact-icons a:nth-child(3):focus-visible::before{transform:translate(-52%,-50%) scaleX(1) rotate(-14deg);}
.contact-icons a:nth-child(3):hover::after,.contact-icons a:nth-child(3):focus-visible::after{transform:translate(-46%,-47%) scaleX(1) rotate(7deg);}
.contact-icons a:nth-child(4):hover::before,.contact-icons a:nth-child(4):focus-visible::before{transform:translate(-51%,-50%) scaleX(1) rotate(-11deg);}
.contact-icons a:nth-child(4):hover::after,.contact-icons a:nth-child(4):focus-visible::after{transform:translate(-47%,-47%) scaleX(1) rotate(10deg);}
.contact-icons a > svg,
.contact-icons a > img{
  position:relative!important;
  z-index:2!important;
  margin:auto!important;
  transform:none!important;
}
.contact-icons .contact-label{z-index:3;}

@media(max-width:900px){
  #kariera .experience-photo{margin-top:0!important;}
  .notes-intro{margin:-1.8rem 0 2.6rem;}
}


/* 0.15.1 — restore accepted headings, localization layout and contact marker. */

/* WHAT I DO: restore the accepted two-line composition exactly. */
#oferta .axis-title{
  display:block!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
  font-size:clamp(2.9rem,3.75vw,4.35rem)!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
  word-spacing:-.14em!important;
}
#oferta .axis-title .axis-left,
#oferta .axis-title .axis-right{
  display:block!important;
  text-align:left!important;
  justify-self:auto!important;
  margin:0!important;
}
#oferta .axis-title .axis-left::after{content:none!important;}

/* EXPERIENCE remains one naturally composed line where space allows. */
#kariera .axis-title{
  display:block!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}
#kariera .axis-title .axis-left,
#kariera .axis-title .axis-right{
  display:inline!important;
  text-align:left!important;
  margin:0!important;
}
#kariera .axis-title .axis-left::after{content:" "!important;}

/* Localization: title on line one; complete language direction on one line beneath it. */
.localization-title{
  display:inline-flex!important;
  flex-direction:column!important;
  align-items:center!important;
  width:max-content!important;
  max-width:none!important;
  line-height:1!important;
}
.localization-title .localization-main{
  display:inline-block!important;
  position:relative!important;
  isolation:isolate!important;
  margin:0 0 .28em!important;
}
.localization-title .localization-languages{
  display:block!important;
  white-space:nowrap!important;
  font-size:.61em!important;
  line-height:1.05!important;
  position:relative!important;
}
/* Marker belongs under “Localization”, not under the language line. */
.localization-title .localization-languages::after{content:none!important;display:none!important;}
.localization-title .localization-main::after{
  content:"";
  position:absolute;
  left:-.06em;
  right:-.06em;
  bottom:-.11em;
  height:.25em;
  background:var(--lime);
  clip-path:polygon(0 44%,7% 26%,20% 35%,35% 18%,51% 30%,68% 14%,84% 27%,100% 21%,97% 71%,81% 62%,62% 79%,43% 66%,24% 82%,7% 70%);
  transform:scaleX(0) rotate(-1.4deg);
  transform-origin:left center;
  transition:transform .22s cubic-bezier(.2,.75,.25,1);
  z-index:-1;
  pointer-events:none;
}
.service.localization:hover .localization-main::after,
.service.localization:focus-within .localization-main::after{
  transform:scaleX(1) rotate(-1.4deg);
}

/* Contact: broad diagonal, compact fill with a slight bleed past the circle. */
.contact-icons a{
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.contact-icons a::before,
.contact-icons a::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  background:var(--lime)!important;
  pointer-events:none!important;
  z-index:0!important;
  transform-origin:left center!important;
}
.contact-icons a::before{
  width:55px!important;
  height:27px!important;
  opacity:.96!important;
  clip-path:polygon(0 35%,8% 21%,24% 13%,42% 4%,61% 10%,79% 18%,100% 33%,96% 70%,84% 80%,66% 91%,47% 100%,28% 92%,10% 80%,2% 65%)!important;
  transform:translate(-52%,-50%) scaleX(0) rotate(-14deg)!important;
  transition:transform .24s cubic-bezier(.2,.75,.25,1)!important;
}
.contact-icons a::after{
  width:43px!important;
  height:20px!important;
  opacity:.72!important;
  clip-path:polygon(0 32%,15% 18%,34% 9%,54% 3%,73% 12%,100% 29%,95% 70%,78% 83%,57% 94%,34% 100%,12% 84%)!important;
  transform:translate(-45%,-47%) scaleX(0) rotate(7deg)!important;
  transition:transform .20s cubic-bezier(.2,.75,.25,1) .055s!important;
}
.contact-icons a:hover::before,
.contact-icons a:focus-visible::before{
  transform:translate(-52%,-50%) scaleX(1) rotate(-14deg)!important;
}
.contact-icons a:hover::after,
.contact-icons a:focus-visible::after{
  transform:translate(-45%,-47%) scaleX(1) rotate(7deg)!important;
}
.contact-icons a:nth-child(2)::before{transform:translate(-51%,-50%) scaleX(0) rotate(-11deg)!important;}
.contact-icons a:nth-child(2)::after{transform:translate(-46%,-47%) scaleX(0) rotate(10deg)!important;}
.contact-icons a:nth-child(2):hover::before,.contact-icons a:nth-child(2):focus-visible::before{transform:translate(-51%,-50%) scaleX(1) rotate(-11deg)!important;}
.contact-icons a:nth-child(2):hover::after,.contact-icons a:nth-child(2):focus-visible::after{transform:translate(-46%,-47%) scaleX(1) rotate(10deg)!important;}
.contact-icons a:nth-child(3)::before{transform:translate(-52%,-50%) scaleX(0) rotate(-15deg)!important;}
.contact-icons a:nth-child(3)::after{transform:translate(-45%,-47%) scaleX(0) rotate(6deg)!important;}
.contact-icons a:nth-child(3):hover::before,.contact-icons a:nth-child(3):focus-visible::before{transform:translate(-52%,-50%) scaleX(1) rotate(-15deg)!important;}
.contact-icons a:nth-child(3):hover::after,.contact-icons a:nth-child(3):focus-visible::after{transform:translate(-45%,-47%) scaleX(1) rotate(6deg)!important;}
.contact-icons a:nth-child(4)::before{transform:translate(-51%,-50%) scaleX(0) rotate(-12deg)!important;}
.contact-icons a:nth-child(4)::after{transform:translate(-46%,-47%) scaleX(0) rotate(9deg)!important;}
.contact-icons a:nth-child(4):hover::before,.contact-icons a:nth-child(4):focus-visible::before{transform:translate(-51%,-50%) scaleX(1) rotate(-12deg)!important;}
.contact-icons a:nth-child(4):hover::after,.contact-icons a:nth-child(4):focus-visible::after{transform:translate(-46%,-47%) scaleX(1) rotate(9deg)!important;}
.contact-icons a > svg,
.contact-icons a > img{
  position:relative!important;
  z-index:2!important;
  margin:0!important;
  transform:none!important;
  align-self:center!important;
  justify-self:center!important;
}

@media(max-width:900px){
  #oferta .axis-title .axis-left,
  #oferta .axis-title .axis-right{display:block!important;}
  .localization-title .localization-languages{font-size:.58em!important;}
}


/* v0.15.3 — restore the lighter editorial weight of large section headings. */
#oferta > .bp-shell > .section-title,
#kariera > .bp-shell > .section-title,
#notatki > .bp-shell > .section-title,
#o-mnie .section-title,
.contact-title{
  font-weight:500!important;
}
#oferta .axis-title .axis-left,
#oferta .axis-title .axis-right,
#kariera .axis-title .axis-left,
#kariera .axis-title .axis-right{
  display:block!important;
}
#oferta .axis-title .axis-left::after,
#kariera .axis-title .axis-left::after{
  content:none!important;
}


/* v0.15.5 — give the editorial section headings a little more presence without returning to bold. */
#oferta > .bp-shell > .section-title,
#kariera > .bp-shell > .section-title,
#notatki > .bp-shell > .section-title,
#o-mnie .section-title{
  font-size:clamp(3.25rem,4.55vw,5.15rem)!important;
  line-height:.94!important;
  font-weight:500!important;
}
#oferta > .bp-shell > .section-title{
  font-size:clamp(3.5rem,4.9vw,5.55rem)!important;
  line-height:.93!important;
}
@media(max-width:900px){
  #oferta > .bp-shell > .section-title,
  #kariera > .bp-shell > .section-title,
  #notatki > .bp-shell > .section-title,
  #o-mnie .section-title{
    font-size:clamp(2.75rem,9.8vw,4.4rem)!important;
    line-height:.96!important;
  }
}

/* v0.15.6 — unify the typographic hierarchy across all sections. */
/* All large editorial section headings use one shared scale. */
#oferta > .bp-shell > .section-title,
#kariera > .bp-shell > .section-title,
#notatki > .bp-shell > .section-title,
#o-mnie .section-title{
  font-size:clamp(3.25rem,4.55vw,5.15rem)!important;
  line-height:.94!important;
  font-weight:500!important;
}

/* Service names and collaboration names belong to the same heading level. */
.service h3,
.collab h3{
  font-size:clamp(1.8rem,3vw,2.7rem)!important;
  line-height:1!important;
  font-weight:500!important;
}

@media(max-width:900px){
  #oferta > .bp-shell > .section-title,
  #kariera > .bp-shell > .section-title,
  #notatki > .bp-shell > .section-title,
  #o-mnie .section-title{
    font-size:clamp(2.75rem,9.8vw,4.4rem)!important;
    line-height:.96!important;
  }

  .service h3,
  .collab h3{
    font-size:clamp(1.8rem,7vw,2.7rem)!important;
  }
}


/* v0.15.8 — handwritten service numerals and cleaner collaborations. */
.service-no{
  position:relative!important;
  display:inline-grid!important;
  place-items:center!important;
  width:58px!important;
  height:42px!important;
  margin:0 0 .45rem!important;
  isolation:isolate!important;
  letter-spacing:0!important;
}
.service-no::before,
.service-no::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:53%!important;
  background:var(--lime)!important;
  pointer-events:none!important;
  z-index:-1!important;
}
.service-no::before{
  width:53px!important;
  height:20px!important;
  opacity:.94!important;
  clip-path:polygon(0 34%,11% 18%,29% 8%,51% 4%,72% 12%,100% 31%,95% 70%,78% 84%,55% 95%,31% 100%,10% 82%)!important;
  transform:translate(-51%,-50%) rotate(-9deg)!important;
}
.service-no::after{
  width:47px!important;
  height:17px!important;
  opacity:.58!important;
  clip-path:polygon(0 28%,17% 13%,39% 4%,62% 8%,83% 18%,100% 37%,92% 72%,70% 88%,44% 96%,18% 87%)!important;
  transform:translate(-47%,-43%) rotate(7deg)!important;
}
.service-no img{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  width:auto!important;
  max-width:50px!important;
  height:38px!important;
  object-fit:contain!important;
}
.service:nth-child(2) .service-no{transform:rotate(-2deg)!important;}
.service:nth-child(3) .service-no{transform:rotate(1.5deg)!important;}
.service:nth-child(4) .service-no{transform:rotate(-1deg)!important;}
.collab-no{display:none!important;}
@media(max-width:900px){
  .service-no{width:52px!important;height:38px!important;}
  .service-no img{height:34px!important;max-width:46px!important;}
  .service-no::before{width:49px!important;height:18px!important;}
  .service-no::after{width:43px!important;height:15px!important;}
}


/* v0.15.9 — handwritten marginalia in selected section labels. */
.section-label-mixed{
  display:inline-flex!important;
  align-items:baseline!important;
  gap:.42rem!important;
  white-space:nowrap!important;
}
.section-label-mixed .handwritten-label{
  display:block!important;
  width:auto!important;
  object-fit:contain!important;
  transform-origin:center!important;
}
.handwritten-services{height:1.18rem!important;transform:translateY(.22rem) rotate(-2deg)!important;}
.handwritten-selected{height:1.12rem!important;transform:translateY(.20rem) rotate(-1deg)!important;}
.handwritten-me{height:1.02rem!important;transform:translateY(.19rem) rotate(-1deg)!important;}
@media(max-width:700px){
  .section-label-mixed{gap:.28rem!important;}
  .handwritten-services{height:1.05rem!important;}
  .handwritten-selected{height:1rem!important;}
  .handwritten-me{height:.95rem!important;}
}

/* v0.15.10 — handwritten words behave like loose editorial notes.
   The lime marker belongs only to the printed label. */
.section-label-mixed{
  display:inline-flex!important;
  align-items:flex-start!important;
  gap:.48rem!important;
  overflow:visible!important;
  white-space:nowrap!important;
}
.section-label-mixed::after{display:none!important;}
.section-label-print{
  position:relative;
  display:inline-block;
  isolation:isolate;
  white-space:nowrap;
}
.section-label-print::after{
  content:"";
  position:absolute;
  left:-.10em;
  right:-.16em;
  bottom:-.28em;
  height:.24em;
  background:var(--lime);
  clip-path:polygon(0 45%,7% 23%,20% 36%,36% 17%,53% 31%,70% 13%,86% 29%,100% 20%,97% 72%,80% 61%,61% 78%,43% 65%,23% 82%,6% 70%);
  transform:rotate(-1deg);
  z-index:-1;
}
.section-label-mixed .handwritten-label{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:2!important;
}
/* Each note is deliberately a little off-axis: annotation, not UI typography. */
.services-label .handwritten-services{
  height:1.18rem!important;
  margin-left:.04rem!important;
  transform:translateY(-.36rem) rotate(-4deg)!important;
}
.experience-label .handwritten-selected{
  height:1.12rem!important;
  margin-left:.18rem!important;
  transform:translateY(-.47rem) rotate(-5deg)!important;
}
.about-label .handwritten-me{
  height:1rem!important;
  margin-left:.22rem!important;
  transform:translateY(-.55rem) rotate(5deg)!important;
}
@media(max-width:700px){
  .section-label-mixed{gap:.34rem!important;}
  .services-label .handwritten-services{height:1.02rem!important;transform:translateY(-.30rem) rotate(-4deg)!important;}
  .experience-label .handwritten-selected{height:.98rem!important;transform:translateY(-.38rem) rotate(-5deg)!important;}
  .about-label .handwritten-me{height:.9rem!important;transform:translateY(-.42rem) rotate(5deg)!important;}
}

/* v0.15.11 — handwritten labels sit below the printed label like quick editorial notes. */
.section-label-mixed{
  position:relative!important;
  display:inline-block!important;
  overflow:visible!important;
  white-space:nowrap!important;
  padding-bottom:1.15rem!important;
}
.section-label-mixed .handwritten-label{
  position:absolute!important;
  display:block!important;
  width:auto!important;
  z-index:2!important;
  margin:0!important;
  transform-origin:center!important;
}
.services-label .handwritten-services{
  height:1.22rem!important;
  left:64%!important;
  top:1.02rem!important;
  transform:rotate(-9deg)!important;
}
.experience-label .handwritten-selected{
  height:1.28rem!important;
  right:-.18rem!important;
  top:1.03rem!important;
  transform:rotate(-11deg)!important;
}
.about-label .handwritten-me{
  height:1.10rem!important;
  left:58%!important;
  top:1.04rem!important;
  transform:rotate(7deg)!important;
}
@media(max-width:700px){
  .section-label-mixed{padding-bottom:1rem!important;}
  .services-label .handwritten-services{height:1.08rem!important;left:61%!important;top:.93rem!important;transform:rotate(-9deg)!important;}
  .experience-label .handwritten-selected{height:1.12rem!important;right:-.08rem!important;top:.94rem!important;transform:rotate(-11deg)!important;}
  .about-label .handwritten-me{height:.98rem!important;left:56%!important;top:.94rem!important;transform:rotate(7deg)!important;}
}


/* v0.15.12 — handwritten marginal notes sit close to the printed labels, slightly overlapping, never reading as a continuation. */
.section-label-mixed{padding-bottom:1.1rem!important;}
.services-label .handwritten-services{height:1.18rem!important;left:5.15em!important;top:.62rem!important;transform:rotate(-10deg)!important;}
.experience-label .handwritten-selected{height:1.42rem!important;right:-.02rem!important;top:.64rem!important;transform:rotate(-11deg)!important;}
.about-label .handwritten-me{height:1.04rem!important;left:4.9em!important;top:.68rem!important;transform:rotate(-7deg)!important;}
@media(max-width:700px){
  .section-label-mixed{padding-bottom:.98rem!important;}
  .services-label .handwritten-services{height:1.04rem!important;left:4.95em!important;top:.58rem!important;transform:rotate(-10deg)!important;}
  .experience-label .handwritten-selected{height:1.24rem!important;right:.02rem!important;top:.60rem!important;transform:rotate(-11deg)!important;}
  .about-label .handwritten-me{height:.94rem!important;left:4.7em!important;top:.63rem!important;transform:rotate(-7deg)!important;}
}


/* v0.15.13 — final marginalia alignment: selected breathes lower/right; me belongs clearly to ABOUT. */
.experience-label .handwritten-selected{
  right:-.28rem!important;
  top:.80rem!important;
}
.about-label .handwritten-me{
  left:3.35em!important;
  top:.72rem!important;
}
@media(max-width:700px){
  .experience-label .handwritten-selected{
    right:-.16rem!important;
    top:.74rem!important;
  }
  .about-label .handwritten-me{
    left:3.15em!important;
    top:.68rem!important;
  }
}

/* v0.15.15 — quieter handwritten Roman numerals.
   Keep the lime marker unchanged; reduce only the handwritten glyphs. */
.service-no img{
  height:33px!important;
  max-width:44px!important;
}
@media(max-width:900px){
  .service-no img{
    height:30px!important;
    max-width:41px!important;
  }
}


/* v0.15.16 — mobile-only layout pass. Desktop remains identical to v0.15.15. */
@media(max-width:700px){
  /* Hero: the claim opens the page; the logo follows as a signature. */
  .hero{
    padding:clamp(4.25rem,16vw,5.75rem) 0 clamp(4.5rem,17vw,6rem);
  }
  .hero-reset{
    grid-template-columns:1fr;
    gap:1.35rem;
    align-items:start;
  }
  .hero-message{
    order:0!important;
    width:100%;
    max-width:none;
    transform:none!important;
  }
  .hero-message h1{
    margin:0!important;
    font-size:clamp(2.35rem,11.8vw,4rem)!important;
    line-height:.98!important;
    letter-spacing:-.05em!important;
  }
  .hero-logo{
    order:1!important;
    width:100%!important;
    max-width:none!important;
    justify-self:stretch!important;
    justify-content:flex-start!important;
    align-items:flex-end!important;
    transform:none!important;
  }
  .hero-logo img{
    width:min(76vw,330px)!important;
    max-width:100%;
    align-self:flex-end!important;
    top:0!important;
    transform:none!important;
  }
  .hero-logo .hero-descriptor{
    width:auto;
    max-width:min(82%,360px)!important;
    margin:-.45rem 0 0 auto!important;
    text-align:right;
    font-size:clamp(.72rem,3.3vw,.86rem)!important;
    line-height:1.35!important;
  }

  /* Contact: one readable vertical sequence instead of compressed columns. */
  .contact{
    padding:4rem 0 3.6rem;
  }
  .contact-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
    align-items:start!important;
  }
  .contact-title{
    width:100%;
    padding:0!important;
    margin:0 0 1.6rem!important;
    font-size:clamp(2.85rem,14vw,4.2rem)!important;
    line-height:.9!important;
  }
  .contact-copy{
    width:100%;
    padding:1.45rem 0!important;
    border-left:0!important;
    border-right:0!important;
    border-top:1px solid var(--ink)!important;
    border-bottom:1px solid var(--ink)!important;
    text-align:left!important;
  }
  .contact-copy p{
    width:100%;
    max-width:36rem;
    margin:0!important;
    text-align:left!important;
  }
  .contact-right{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    width:100%;
    padding:2rem 0 0!important;
    text-align:left!important;
  }
  .contact-icons{
    display:grid!important;
    grid-template-columns:repeat(4,54px);
    justify-content:start!important;
    gap:clamp(.7rem,4vw,1rem)!important;
    width:100%;
    margin:0!important;
  }
  .contact-icons a{
    width:54px!important;
    height:54px!important;
  }
  .contact-logo{
    align-self:flex-end;
    margin:2.35rem 0 0!important;
  }
  .contact-logo img{
    display:block;
    width:min(48vw,180px)!important;
    height:auto;
  }

  /* Experience: preserve the accepted polaroid geometry and make its
     scroll-linked movement clearly visible on a phone. */
  #kariera .experience-grid{
    overflow:visible;
  }
  #kariera .experience-photo{
    --bp-mobile-typewriter-y:0px;
    position:relative!important;
    top:auto!important;
    width:100%;
    max-width:360px!important;
    margin:0 0 2.5rem!important;
    transform:translate3d(0,var(--bp-mobile-typewriter-y),0) rotate(-.7deg)!important;
    will-change:transform;
  }
}

@media(max-width:360px){
  .contact-icons{
    grid-template-columns:repeat(2,54px);
    row-gap:1rem!important;
  }
}


/* v0.15.18 — compact, centred mobile contact and a resilient typewriter motion. */
@media(max-width:700px){
  .contact{
    padding:2.8rem 0 2.25rem!important;
  }
  .contact-title{
    margin:0 0 1.15rem!important;
    padding:0!important;
    text-align:center!important;
    white-space:nowrap;
    font-size:clamp(2.55rem,12vw,3.55rem)!important;
    line-height:1!important;
  }
  .contact-title br{
    display:none;
  }
  .contact-copy{
    width:min(100%,32rem)!important;
    margin:0 auto!important;
    padding:1.15rem .2rem .25rem!important;
    border:0!important;
    border-top:1px solid var(--ink)!important;
    text-align:center!important;
  }
  .contact-copy p{
    max-width:29rem!important;
    margin:0 auto!important;
    text-align:center!important;
  }
  .contact-right{
    align-items:center!important;
    padding:1.55rem 0 0!important;
    text-align:center!important;
  }
  .contact-icons{
    display:flex!important;
    flex-wrap:nowrap!important;
    justify-content:center!important;
    align-items:center!important;
    gap:clamp(.65rem,3.5vw,.95rem)!important;
    width:100%!important;
    margin:0!important;
  }
  .contact-logo{
    align-self:center!important;
    margin:1.55rem 0 0!important;
  }
  .contact-logo img{
    width:min(44vw,165px)!important;
  }
  .site-footer{
    padding:.9rem 0!important;
  }
  .footer-inner{
    justify-content:center!important;
    text-align:center!important;
  }

  #kariera .experience-photo{
    transform:translate3d(0,var(--bp-mobile-typewriter-y,0px),0) rotate(-.7deg)!important;
  }
}

@media(max-width:350px){
  .contact-icons{
    display:grid!important;
    grid-template-columns:repeat(2,54px)!important;
    gap:1rem 1.25rem!important;
  }
}

@supports (animation-timeline:view()){
  @media(max-width:700px){
    #kariera .experience-photo{
      animation-name:bp-mobile-typewriter-scroll;
      animation-duration:1ms;
      animation-timing-function:linear;
      animation-fill-mode:both;
      animation-timeline:view();
      animation-range:entry 12% cover 44%;
    }
  }
}

@keyframes bp-mobile-typewriter-scroll{
  from{transform:translate3d(0,0,0) rotate(-.7deg);}
  to{transform:translate3d(0,175px,0) rotate(-.7deg);}
}


/* v0.15.20 — mobile-only editorial centring and a readable Experience stack. */
@media(max-width:700px){
  /* Header navigation deliberately keeps its existing alignment. */

  /* Centre the mobile reading layer without changing the staggered artwork. */
  #oferta > .bp-shell > .section-title,
  #kariera > .bp-shell > .section-title,
  #o-mnie .section-title,
  #notatki > .bp-shell > .section-title,
  .service-copy,
  .collab,
  .about-copy,
  .notes-intro,
  .note-card,
  .contact-title,
  .contact-copy,
  .footer-inner{
    text-align:center!important;
  }

  .axis-title .axis-left,
  .axis-title .axis-right{
    text-align:center!important;
  }

  .service-copy,
  .service:nth-child(odd) .service-copy,
  .service:nth-child(even) .service-copy{
    justify-self:center!important;
    max-width:560px;
  }

  .service-copy p,
  .service:nth-child(odd) .service-copy p,
  .service:nth-child(even) .service-copy p,
  .collab p,
  .about-copy p,
  .notes-intro,
  .note-card p{
    margin-left:auto!important;
    margin-right:auto!important;
  }

  /* About reads as one uninterrupted introduction:
     label -> headline -> body copy -> portrait. */
  #o-mnie .about-grid{
    display:flex!important;
    flex-direction:column;
    align-items:center!important;
    gap:0!important;
  }
  #o-mnie .about-copy{
    display:contents!important;
  }
  #o-mnie .about-copy .section-title{
    order:1;
    width:100%;
    margin:0 auto 2rem!important;
  }
  #o-mnie .about-photo{
    order:3;
    margin:1.3rem auto 0!important;
  }
  #o-mnie .about-copy p{
    order:2;
    width:100%;
    max-width:620px;
    margin:.35rem auto 1rem!important;
  }

  /* On mobile the typewriter becomes a static editorial image. The
     collaborations use the full width instead of a squeezed side column. */
  #kariera .experience-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:2.35rem!important;
    overflow:visible!important;
    align-items:start!important;
  }
  #kariera .experience-photo{
    position:relative!important;
    top:auto!important;
    justify-self:center!important;
    align-self:auto!important;
    width:min(82vw,360px)!important;
    max-width:100%!important;
    height:max-content;
    margin:0 auto!important;
    transform:rotate(-.7deg)!important;
    animation:none!important;
    will-change:auto;
  }
  #kariera .experience-grid > div{
    width:100%;
    max-width:620px;
    margin:0 auto;
  }
}


/* v0.15.21 — precise mobile heading alignment.
   Preserve the accepted hero alignment. Centre only the large section
   headings and their internal axis lines; printed section labels stay left. */
@media(max-width:700px){
  .hero-message h1{
    text-align:left!important;
  }
  .hero-logo .hero-descriptor{
    text-align:right!important;
  }

  #oferta > .bp-shell > .section-title,
  #kariera > .bp-shell > .section-title,
  #o-mnie .section-title,
  #notatki > .bp-shell > .section-title{
    text-align:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  #oferta > .bp-shell > .section-title.axis-title .axis-left,
  #oferta > .bp-shell > .section-title.axis-title .axis-right,
  #kariera > .bp-shell > .section-title.axis-title .axis-left,
  #kariera > .bp-shell > .section-title.axis-title .axis-right{
    display:block!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }

  #oferta > .bp-shell > .section-label,
  #kariera > .bp-shell > .section-label,
  #o-mnie > .bp-shell > .section-label,
  #notatki > .bp-shell > .section-label{
    text-align:left!important;
  }

  /* Keep the typewriter as a quiet closing image, after the useful content. */
  #kariera .experience-grid > div{
    order:1;
  }
  #kariera .experience-photo{
    order:2;
    width:min(76vw,330px)!important;
    margin:1rem auto 0!important;
  }
}

/* v0.15.23 — mobile-only service image sizing.
   Keep the calm, centered v0.15.21 text layout while reducing only the
   service polaroids to the visual scale of the Experience typewriter. */
@media(max-width:700px){
  .service:nth-child(n) .polaroid{
    width:min(76vw,330px)!important;
    max-width:330px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .service.localization .polaroid{
    width:min(69vw,300px)!important;
    max-width:300px!important;
  }
}

/* v0.15.25 — let the Experience heading wrap as one natural sentence on
   mobile instead of forcing each editorial axis onto a separate line. */
@media(max-width:700px){
  #kariera > .bp-shell > .section-title.axis-title .axis-left,
  #kariera > .bp-shell > .section-title.axis-title .axis-right{
    display:inline!important;
    margin:0!important;
  }
}

/* v0.16.0 — compact language switch; the accepted EN layout stays intact. */
.header-nav-only{
  gap:1.15rem;
}
.language-switch{
  display:flex;
  align-items:center;
  gap:.38rem;
  flex:0 0 auto;
  font:500 .68rem/1 var(--display);
  letter-spacing:.08em;
}
.language-switch a{
  position:relative;
  color:inherit;
  text-decoration:none;
  opacity:.48;
  padding:.25rem .12rem;
}
.language-switch a:hover,
.language-switch a:focus-visible,
.language-switch a.is-active{
  opacity:1;
  outline:none;
}
.language-switch a.is-active::after{
  content:"";
  position:absolute;
  left:.05rem;
  right:.05rem;
  bottom:.05rem;
  height:3px;
  background:var(--lime);
  transform:rotate(-1.5deg);
}

@media(max-width:900px){
  .header-nav-only{
    gap:.35rem .9rem;
  }
  .header-nav-only .main-nav{
    padding-bottom:0;
  }
  .language-switch{
    margin-left:auto;
  }
}

/* v0.16.3 — Paulina's handwritten marginalia, localized with the page.
   Each note keeps its own proportions; only its visual scale and placement
   are normalized inside the existing editorial layout. */
.handwritten-label{
  image-rendering:auto;
}
.bp-lang-pl .services-label .handwritten-services{
  height:1.22rem!important;
  left:5.15em!important;
  top:.63rem!important;
  transform:rotate(-7deg)!important;
}
.bp-lang-pl .experience-label .handwritten-selected{
  height:1.50rem!important;
  right:-.18rem!important;
  top:.78rem!important;
  transform:rotate(-8deg)!important;
}
.bp-lang-pl .about-label .handwritten-me{
  height:1.20rem!important;
  left:3.28em!important;
  top:.68rem!important;
  transform:rotate(-5deg)!important;
}

@media(max-width:700px){
  .bp-lang-pl .services-label .handwritten-services{
    height:1.08rem!important;
    left:4.95em!important;
    top:.59rem!important;
  }
  .bp-lang-pl .experience-label .handwritten-selected{
    height:1.31rem!important;
    right:-.10rem!important;
    top:.71rem!important;
  }
  .bp-lang-pl .about-label .handwritten-me{
    height:1.06rem!important;
    left:3.08em!important;
    top:.64rem!important;
  }
}

/* v0.16.4 — larger handwritten marginalia in both language versions. */
.section-label-mixed{
  padding-bottom:1.68rem!important;
}
.section-label-print{
  font-family:var(--display)!important;
  font-size:.72rem!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:.18em!important;
}
.services-label .handwritten-services{
  height:1.72rem!important;
}
.experience-label .handwritten-selected{
  height:2.05rem!important;
}
.about-label .handwritten-me{
  height:1.30rem!important;
}
.bp-lang-pl .services-label .handwritten-services{
  height:2.24rem!important;
  left:5.15em!important;
  top:.62rem!important;
  transform:rotate(-10deg)!important;
}
.bp-lang-pl .experience-label .handwritten-selected{
  height:2.70rem!important;
  right:-.28rem!important;
  top:.80rem!important;
  transform:rotate(-11deg)!important;
}
.bp-lang-pl .about-label .handwritten-me{
  height:2.53rem!important;
  left:3.35em!important;
  top:.72rem!important;
  transform:rotate(-7deg)!important;
}

@media(max-width:700px){
  .section-label-mixed{
    padding-bottom:1.50rem!important;
  }
  .services-label .handwritten-services{
    height:1.50rem!important;
  }
  .experience-label .handwritten-selected{
    height:1.78rem!important;
  }
  .about-label .handwritten-me{
    height:1.18rem!important;
  }
  .bp-lang-pl .services-label .handwritten-services{
    height:1.90rem!important;
    left:4.95em!important;
    top:.58rem!important;
    transform:rotate(-10deg)!important;
  }
  .bp-lang-pl .experience-label .handwritten-selected{
    height:2.30rem!important;
    right:-.16rem!important;
    top:.74rem!important;
    transform:rotate(-11deg)!important;
  }
  .bp-lang-pl .about-label .handwritten-me{
    height:2.15rem!important;
    left:3.15em!important;
    top:.68rem!important;
    transform:rotate(-7deg)!important;
  }
}

/* v0.16.17 — PL notes are composed visually, independent of label length. */
.bp-lang-pl .services-label .handwritten-services{
  height:2.65rem!important;
  left:7.80em!important;
  top:.68rem!important;
  transform:rotate(-16deg)!important;
}
.bp-lang-pl .experience-label .handwritten-selected{
  height:3.25rem!important;
  right:-2.30rem!important;
  top:.86rem!important;
  transform:rotate(-11deg)!important;
}
.bp-lang-pl .about-label .handwritten-me{
  height:3.25rem!important;
  left:.80em!important;
  top:-.10rem!important;
  transform:rotate(-7deg)!important;
}

@media(max-width:700px){
  .bp-lang-pl .services-label .handwritten-services{
    height:2.30rem!important;
    left:7.10em!important;
    top:.62rem!important;
    transform:rotate(-16deg)!important;
  }
  .bp-lang-pl .experience-label .handwritten-selected{
    height:2.82rem!important;
    right:-1.70rem!important;
    top:.80rem!important;
  }
  .bp-lang-pl .about-label .handwritten-me{
    height:2.82rem!important;
    left:.70em!important;
    top:-.05rem!important;
  }
}

/* v0.16.24 — the hero mark sits lower as a signature to the slogan. The
   footer mark is quieter, while the hero descriptor remains readable. */
.hero-logo{
  position:relative;
  display:block;
  width:min(100%,690px);
  min-height:0;
  overflow:visible;
  justify-self:end;
  align-self:center;
  transform:translateY(8.5rem);
}
.hero-logo img{
  display:block;
  width:min(100%,410px);
  height:auto;
  margin:0;
  position:relative;
  top:0;
  transform:none;
}
.hero-logo .hero-descriptor{
  position:absolute;
  left:16%;
  top:42.5%;
  width:max-content;
  max-width:none;
  margin:0;
  font-size:clamp(.98rem,1.1vw,1.08rem);
  line-height:1.3;
  text-align:left;
  white-space:nowrap;
  letter-spacing:0;
}
.contact-logo{
  position:relative;
  display:block;
  width:min(100%,235px);
  min-height:155px;
  margin:1.35rem auto 0;
  color:inherit;
  text-decoration:none;
  overflow:visible;
}
.contact-logo img{
  display:block;
  width:min(100%,175px);
  height:auto;
  margin:0 auto;
}

@media(min-width:701px) and (max-width:900px){
  .hero-logo{transform:none;}
}

@media(max-width:700px){
  .hero-logo{
    width:100%!important;
    min-height:0!important;
    align-self:stretch!important;
    transform:none!important;
    margin-top:1rem!important;
  }
  .hero-logo img{
    width:min(72vw,285px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:0!important;
  }
  .hero-logo .hero-descriptor{
    left:34%!important;
    right:auto!important;
    top:42%!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    font-size:clamp(.68rem,3.1vw,.78rem)!important;
    line-height:1.3!important;
    text-align:left!important;
    white-space:nowrap!important;
  }
  .contact-logo{
    width:min(82vw,235px)!important;
    min-height:155px!important;
    margin:1.25rem auto 0!important;
  }
  .contact-logo img{
    width:min(54vw,175px)!important;
    max-width:175px!important;
    margin:0 auto!important;
  }
}

/* v0.16.30 — the wordmark aligns with the hero's right page margin. Its
   descriptor runs beneath the complete mark, with "Polish" just before the
   descending y stroke. Contact keeps only a centered social row. */
.hero-logo img{
  margin-left:auto;
  margin-right:0;
}
.hero-logo .hero-descriptor{
  left:auto;
  right:0;
  width:min(100%,410px);
  max-width:410px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:calc(16% - .35em) max-content;
  column-gap:.7em;
  align-items:baseline;
}
.hero-descriptor-lead{
  text-align:right;
  transform:translateX(-.90em);
}
.hero-descriptor-rest{
  text-align:left;
}
.contact-right{
  padding-left:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.contact-icons{
  margin:0;
}

@media(max-width:700px){
  .hero-logo .hero-descriptor{
    left:auto!important;
    right:0!important;
    width:min(72vw,285px)!important;
    max-width:285px!important;
    grid-template-columns:calc(16% - .35em) max-content!important;
    column-gap:.7em!important;
  }
}

/* v0.16.34 — one handwritten family across both language layers. The
   widths preserve Paulina's common writing scale instead of forcing words
   with ascenders and descenders into an artificial shared height. */
.section-label-mixed{
  padding-bottom:2rem!important;
}
.section-label-mixed .handwritten-label{
  height:auto!important;
}
.bp-lang-en .services-label .handwritten-services{
  width:6.1rem!important;
  left:5.15em!important;
  top:.62rem!important;
  transform:rotate(-3deg)!important;
}
.bp-lang-en .experience-label .handwritten-selected{
  width:6.75rem!important;
  right:-.28rem!important;
  top:.76rem!important;
  transform:rotate(-2deg)!important;
}
.bp-lang-en .about-label .handwritten-me{
  width:2.65rem!important;
  left:3.35em!important;
  top:.72rem!important;
  transform:rotate(2deg)!important;
}
.bp-lang-pl .services-label .handwritten-services{
  width:6.15rem!important;
  left:7.80em!important;
  top:.55rem!important;
  transform:rotate(-3deg)!important;
}
.bp-lang-pl .experience-label .handwritten-selected{
  width:7.1rem!important;
  right:-2.30rem!important;
  top:.76rem!important;
  transform:rotate(-2deg)!important;
}
.bp-lang-pl .about-label .handwritten-me{
  width:7.9rem!important;
  left:.80em!important;
  top:.30rem!important;
  transform:rotate(2deg)!important;
}
.service-no img{
  height:38px!important;
  max-width:48px!important;
}

@media(max-width:700px){
  .section-label-mixed{
    padding-bottom:1.75rem!important;
  }
  .bp-lang-en .services-label .handwritten-services{width:5.25rem!important;}
  .bp-lang-en .experience-label .handwritten-selected{width:5.85rem!important;}
  .bp-lang-en .about-label .handwritten-me{width:2.3rem!important;}
  .bp-lang-pl .services-label .handwritten-services{width:5.35rem!important;left:7.10em!important;}
  .bp-lang-pl .experience-label .handwritten-selected{width:6.15rem!important;right:-1.70rem!important;}
  .bp-lang-pl .about-label .handwritten-me{width:6.85rem!important;left:.70em!important;}
  .service-no img{height:34px!important;max-width:44px!important;}
}

/* v0.16.35 — thinner original handwriting at its natural shared scale.
   Roman numerals gain enough presence to balance the service headings. */
.bp-lang-en .services-label .handwritten-services{width:8.7rem!important;}
.bp-lang-en .experience-label .handwritten-selected{width:7.75rem!important;}
.bp-lang-en .about-label .handwritten-me{width:3.7rem!important;}
.bp-lang-pl .services-label .handwritten-services{width:6.3rem!important;}
.bp-lang-pl .experience-label .handwritten-selected{width:7.2rem!important;}
.bp-lang-pl .about-label .handwritten-me{width:8.75rem!important;}

.service-no{
  width:70px!important;
  height:54px!important;
}
.service-no::before{
  width:65px!important;
  height:24px!important;
}
.service-no::after{
  width:58px!important;
  height:21px!important;
}
.service-no img{
  height:48px!important;
  max-width:55px!important;
}

@media(max-width:700px){
  .bp-lang-en .services-label .handwritten-services{width:7.65rem!important;}
  .bp-lang-en .experience-label .handwritten-selected{width:6.8rem!important;}
  .bp-lang-en .about-label .handwritten-me{width:3.25rem!important;}
  .bp-lang-pl .services-label .handwritten-services{width:5.55rem!important;}
  .bp-lang-pl .experience-label .handwritten-selected{width:6.35rem!important;}
  .bp-lang-pl .about-label .handwritten-me{width:7.7rem!important;}
  .service-no{width:63px!important;height:49px!important;}
  .service-no::before{width:59px!important;height:22px!important;}
  .service-no::after{width:53px!important;height:19px!important;}
  .service-no img{height:43px!important;max-width:50px!important;}
}

/* v0.16.36 — optical scale follows the live page rather than the source
   canvas. "oferta" and "wybrane" are the reference pair. */
.bp-lang-en .services-label .handwritten-services{width:6.8rem!important;}
.bp-lang-en .experience-label .handwritten-selected{width:6.35rem!important;}
.bp-lang-en .about-label .handwritten-me{
  width:2.8rem!important;
  left:5em!important;
}
.bp-lang-pl .about-label .handwritten-me{
  width:6.2rem!important;
  left:4em!important;
}

@media(max-width:700px){
  .bp-lang-en .services-label .handwritten-services{width:5.95rem!important;}
  .bp-lang-en .experience-label .handwritten-selected{width:5.55rem!important;}
  .bp-lang-en .about-label .handwritten-me{width:2.45rem!important;left:4.5em!important;}
  .bp-lang-pl .about-label .handwritten-me{width:5.45rem!important;left:3.55em!important;}
}

/* v0.16.37 — midpoint pass. "w skrócie" remains the optical reference:
   EN services/selected step down, PL oferta/wybrane step up. */
.bp-lang-en .services-label .handwritten-services{width:6.4rem!important;}
.bp-lang-en .experience-label .handwritten-selected{width:5.95rem!important;}
.bp-lang-pl .services-label .handwritten-services{width:6.65rem!important;}
.bp-lang-pl .experience-label .handwritten-selected{width:7.6rem!important;}

@media(max-width:700px){
  .bp-lang-en .services-label .handwritten-services{width:5.6rem!important;}
  .bp-lang-en .experience-label .handwritten-selected{width:5.2rem!important;}
  .bp-lang-pl .services-label .handwritten-services{width:5.85rem!important;}
  .bp-lang-pl .experience-label .handwritten-selected{width:6.7rem!important;}
}

/* v0.16.31 — final byPaulina handwritten mark. The descriptor keeps the
   descending P stroke as an optical separator, with balanced spacing on
   both sides. */
.hero-logo img{
  width:min(100%,500px);
}
.hero-logo .hero-descriptor{
  top:48.5%;
  width:min(100%,500px);
  max-width:500px;
  grid-template-columns:23.6% max-content;
  column-gap:1.25rem;
}
.hero-descriptor-lead{
  transform:none;
}

@media(min-width:701px) and (max-width:900px){
  .hero-logo img{
    width:min(46vw,430px);
  }
  .hero-logo .hero-descriptor{
    width:min(46vw,430px);
    max-width:430px;
    font-size:clamp(.72rem,1.35vw,.86rem);
    grid-template-columns:23.6% max-content;
    column-gap:.85rem;
  }
}

@media(max-width:700px){
  .hero-logo img{
    width:min(82vw,330px)!important;
  }
  .hero-logo .hero-descriptor{
    top:48.5%!important;
    width:min(82vw,330px)!important;
    max-width:330px!important;
    grid-template-columns:23.6% max-content!important;
    column-gap:.55rem!important;
  }
}

/* v0.16.33 — balance the printed descriptor beneath the visible wordmark.
   Its outer optical margins now match, while the P descender keeps a clear
   channel between "Polish" and the remaining services. */
.hero-logo .hero-descriptor{
  font-size:1rem;
  grid-template-columns:21.6% max-content;
  column-gap:1.875rem;
}

@media(min-width:701px) and (max-width:900px){
  .hero-logo .hero-descriptor{
    grid-template-columns:21.6% max-content;
    column-gap:1.55rem;
  }
}

@media(max-width:700px){
  .hero-logo .hero-descriptor{
    font-size:clamp(.66rem,2.7vw,.72rem)!important;
    grid-template-columns:20.5% max-content!important;
    column-gap:1.45rem!important;
  }
}

/* v0.16.38 — move only "Polish" toward the P descender while keeping the
   rest of the descriptor in its established position. */
.hero-logo .hero-descriptor{
  grid-template-columns:22.8% max-content;
  column-gap:1.5rem;
}

@media(min-width:701px) and (max-width:900px){
  .hero-logo .hero-descriptor{
    grid-template-columns:22.8% max-content;
    column-gap:1.225rem;
  }
}

@media(max-width:700px){
  .hero-logo .hero-descriptor{
    grid-template-columns:22% max-content!important;
    column-gap:1.14rem!important;
  }
}

/* v0.16.42 — restore the editorial portrait polaroid from the Wix design. */
#o-mnie .about-grid{
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
}
#o-mnie .about-photo{
  width:min(100%,340px);
  height:auto;
  margin:0 auto;
  padding:12px 12px 36px;
  overflow:visible;
  border-radius:0;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.14);
  transform:rotate(-1deg);
}
#o-mnie .about-photo img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  filter:none;
}
#o-mnie .about-photo figcaption{
  margin-top:12px;
  padding:0 .5rem;
  color:var(--muted);
  font:500 .62rem/1 var(--display);
  letter-spacing:.14em;
  text-align:center;
  text-transform:uppercase;
}

@media(min-width:701px) and (max-width:900px){
  #o-mnie .about-grid{
    grid-template-columns:1fr;
    justify-items:center;
  }
  #o-mnie .about-photo{
    width:min(56vw,340px);
    margin:1.5rem auto 0;
  }
}

@media(max-width:700px){
  #o-mnie .about-photo{
    width:min(78vw,320px)!important;
    height:auto!important;
    transform:rotate(-.8deg);
  }
}