/* ============================================================
   filipgawel.com — shared stylesheet
   Used by /index.html, /services/index.html, /pl/index.html
   Paths inside this file are relative to /assets/
   ============================================================ */

@font-face{
  font-family:"Archivo";
  src:url("archivo-latin.woff2") format("woff2");
  font-weight:400 900; font-stretch:62% 125%; font-style:normal; font-display:swap;
}

:root{
  --paper:#EFEDE6;
  --ink:#151A16;
  --ink-2:#6A6F67;
  --rule:#D5D2C7;
  --forest:#24462F;
  --on-forest:#E9E9E0;
  --lime:#C3D8A6;
  --night:#101211;
  --on-night:#EFEDE6;
  --claim:#24462F;
  --sans:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --pad:clamp(20px,5vw,72px);
  --bar:54px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121412; --ink:#EDEBE3; --ink-2:#8E938A; --rule:#282C27;
    --forest:#1D3A27; --on-forest:#E9E9E0; --lime:#C3D8A6;
    --night:#0A0B0A; --on-night:#EDEBE3; --claim:#A9C98C;
  }
}
:root[data-theme="dark"]{
  --paper:#121412; --ink:#EDEBE3; --ink-2:#8E938A; --rule:#282C27;
  --forest:#1D3A27; --on-forest:#E9E9E0; --lime:#C3D8A6;
  --night:#0A0B0A; --on-night:#EDEBE3; --claim:#A9C98C;
}

*{box-sizing:border-box;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-stretch:100%;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ============ type roles ============ */
.lbl{
  font-size:11px;font-weight:650;font-stretch:76%;
  text-transform:uppercase;letter-spacing:.19em;line-height:1.4;
  color:var(--ink-2);margin:0;
}
.display{
  font-weight:800;font-stretch:112%;line-height:.94;letter-spacing:-.035em;
  margin:0;text-wrap:balance;
}
.body-lg{font-size:clamp(17px,1.55vw,21px);line-height:1.5;max-width:56ch;margin:0;color:var(--ink)}
.muted{color:var(--ink-2)}

/* ============ page frame ============ */
.pad{padding-left:var(--pad);padding-right:var(--pad)}
.rule-t{border-top:1px solid var(--rule)}

/* ============ top bar ============ */
.bar{
  position:sticky;top:0;z-index:50;height:var(--bar);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
.bar .who{font-weight:800;font-stretch:108%;letter-spacing:-.02em;font-size:16px;text-decoration:none}
.bar-end{display:flex;align-items:baseline;gap:clamp(14px,2.6vw,34px)}
.bar nav{display:flex;gap:clamp(14px,2vw,30px)}
.bar nav a{
  text-decoration:none;font-size:11px;font-weight:650;font-stretch:76%;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);
  display:flex;gap:7px;align-items:baseline;
}
.bar nav a i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--ink);opacity:.45}
.bar nav a:hover{color:var(--ink)}
.bar nav a:hover i{opacity:1}
/* Below 820px the labels collapse to bare numbers to save room. Links that have
   no number (Contact, About me) would collapse to zero width, so they keep theirs. */
@media (max-width:820px){
  .bar nav a span{display:none}
  .bar nav a.keep span{display:inline}
  .bar nav{gap:16px}
}
/* On a phone a row of bare numbers says nothing — drop it, keep the labelled links. */
@media (max-width:560px){ .bar nav a:not(.keep){display:none} }

/* ============ language switcher ============ */
.langsw{
  display:flex;gap:7px;align-items:baseline;
  font-size:11px;font-weight:650;font-stretch:76%;
  text-transform:uppercase;letter-spacing:.16em;
  padding-left:clamp(0px,1.4vw,18px);border-left:1px solid var(--rule);
}
.langsw a{text-decoration:none;color:var(--ink-2)}
.langsw a:hover{color:var(--ink)}
.langsw a[aria-current="true"]{color:var(--ink);border-bottom:1px solid currentColor;padding-bottom:2px}
.langsw i{font-style:normal;color:var(--rule)}
@media (max-width:520px){ .langsw{padding-left:0;border-left:0} }

/* ============ hero ============ */
.hero{
  display:grid;grid-template-columns:1fr clamp(220px,26vw,380px);
  align-items:end;gap:clamp(24px,4vw,56px);
  padding-top:clamp(48px,9vh,104px);padding-bottom:clamp(28px,5vh,52px);
  padding-left:var(--pad);padding-right:0;
  border-bottom:1px solid var(--rule);
}
.hero h1{font-size:clamp(31px,5.3vw,74px);max-width:19ch}
.hero h1 .b{display:block}
.hero h1 .b + .b{margin-top:.28em;color:var(--claim)}
.hero-meta{margin-top:clamp(26px,4vh,46px);display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline}
.hero-meta .lbl{color:var(--ink)}
.hero-meta .sep{color:var(--rule)}
.hero-cta{
  display:inline-flex;align-items:baseline;gap:10px;margin-top:26px;
  font-size:clamp(17px,1.7vw,22px);font-weight:700;font-stretch:104%;
  text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:3px;
  transition:gap .18s ease;
}
.hero-cta:hover{gap:18px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:baseline}
.hero-ctas .hero-cta.alt{font-size:clamp(15px,1.3vw,17px);font-weight:650;border-bottom-width:1px;color:var(--ink-2)}
.hero-ctas .hero-cta.alt:hover{color:var(--ink)}
.hero-portrait{position:relative;align-self:end}
.hero-portrait img{
  width:100%;height:clamp(230px,44vh,430px);object-fit:cover;object-position:50% 18%;
  filter:grayscale(1) contrast(1.04);transition:filter .5s ease;
}
.hero-portrait:hover img{filter:grayscale(0) contrast(1)}
.hero-portrait figcaption{position:absolute;left:0;bottom:100%;padding:0 0 9px}
@media (max-width:800px){
  .hero{grid-template-columns:1fr;align-items:start;padding-right:var(--pad)}
  .hero-portrait{order:-1;max-width:190px}
  .hero-portrait img{height:200px}
  .hero-portrait figcaption{display:none}
}

/* ============ disciplines strip ============ */
.disc{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)}
.d{padding:clamp(24px,3.4vh,38px) clamp(16px,2.4vw,34px);border-left:1px solid var(--rule)}
.d:first-child{border-left:0;padding-left:var(--pad)}
.d:last-child{padding-right:var(--pad)}
.d b{
  display:block;font-weight:800;font-stretch:108%;letter-spacing:-.032em;
  font-size:clamp(22px,2.7vw,36px);line-height:1.02;
}
.d span{display:block;margin-top:13px;font-size:14.5px;line-height:1.5;color:var(--ink-2);max-width:34ch}
.d em{font-style:normal;color:var(--claim);font-weight:700}
@media (max-width:820px){
  .disc{grid-template-columns:1fr}
  .d{border-left:0;border-top:1px solid var(--rule);padding-left:var(--pad);padding-right:var(--pad)}
  .d:first-child{border-top:0}
}

/* ============ generic section ============ */
.sec{padding-top:clamp(56px,9vh,120px);padding-bottom:clamp(56px,9vh,120px);border-bottom:1px solid var(--rule)}
.sec-head{display:grid;grid-template-columns:clamp(90px,14vw,190px) 1fr;gap:clamp(16px,3vw,40px);align-items:start;margin-bottom:clamp(34px,6vh,64px)}
.sec-head h2{font-size:clamp(28px,4.4vw,60px)}
.sec-head .col-r{display:grid;gap:18px}
@media (max-width:700px){ .sec-head{grid-template-columns:1fr;gap:14px} }

/* ============ lanes (what I do) ============ */
.lane{
  display:grid;grid-template-columns:clamp(90px,14vw,190px) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  padding:clamp(26px,4vh,42px) 0;border-top:1px solid var(--rule);
}
.lane h3{margin:0;font-size:clamp(21px,2.3vw,30px);font-weight:800;font-stretch:104%;letter-spacing:-.025em;line-height:1.08}
.lane p{margin:12px 0 0;color:var(--ink-2);font-size:15.5px;max-width:34ch}
.lane ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.lane li{font-size:15.5px;line-height:1.45;padding-left:26px;position:relative}
.lane li::before{
  content:attr(data-n);position:absolute;left:0;top:2px;
  font-size:10.5px;font-weight:650;font-stretch:76%;letter-spacing:.1em;
  color:var(--ink-2);font-variant-numeric:tabular-nums;
}
@media (max-width:860px){ .lane{grid-template-columns:1fr;gap:16px} }

/* ============ automation by domain ============ */
.doms{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,80px)}
@media (max-width:780px){ .doms{grid-template-columns:1fr} }
.dom{padding:26px 0 30px;border-top:1px solid var(--rule)}
.dom h3{
  margin:11px 0 0;font-size:clamp(19px,1.9vw,25px);font-weight:800;font-stretch:104%;
  letter-spacing:-.025em;line-height:1.16;max-width:24ch;
}
.dom p{margin:12px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:46ch}
.dom .lbl{color:var(--claim)}

/* ============ services index ============ */
.svc{
  display:grid;grid-template-columns:clamp(52px,6vw,84px) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);align-items:start;
  padding:clamp(24px,3.6vh,38px) 0;border-top:1px solid var(--rule);
  transition:padding-left .22s ease;
}
.svc:hover{padding-left:12px}
.svc .idx{font-size:11px;font-weight:650;font-stretch:76%;letter-spacing:.16em;color:var(--ink-2);font-variant-numeric:tabular-nums;padding-top:.55em}
.svc h3{margin:0;font-size:clamp(23px,2.9vw,38px);font-weight:800;font-stretch:108%;letter-spacing:-.03em;line-height:1.02}
.svc .shape{display:block;margin-top:12px}
.svc p{margin:0;font-size:16px;line-height:1.5}
.svc .get{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--rule);font-size:15px;color:var(--ink-2)}
.svc .get b{display:block;margin-bottom:5px;font-size:10.5px;font-weight:650;font-stretch:76%;text-transform:uppercase;letter-spacing:.17em;color:var(--ink)}
@media (max-width:820px){ .svc{grid-template-columns:clamp(44px,10vw,60px) 1fr;gap:14px 18px} .svc .col-b{grid-column:2} }

/* ============ price line inside a service row ============ */
.svc .price{
  display:block;margin-top:14px;
  font-weight:800;font-stretch:106%;letter-spacing:-.032em;
  font-size:clamp(21px,2.1vw,28px);line-height:1.06;color:var(--claim);
  font-variant-numeric:tabular-nums;
}
.svc .price small{
  display:block;margin-top:7px;font-size:11px;font-weight:650;font-stretch:76%;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);
}

/* ============ brief service list (main page teaser) ============ */
.svc-brief{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,80px)}
@media (max-width:780px){ .svc-brief{grid-template-columns:1fr} }
.brief{padding:24px 0 28px;border-top:1px solid var(--rule)}
.brief h3{margin:0;font-size:clamp(19px,2vw,26px);font-weight:800;font-stretch:104%;letter-spacing:-.028em;line-height:1.1}
.brief p{margin:11px 0 0;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:44ch}
.bigcta{
  display:inline-flex;align-items:baseline;gap:12px;margin-top:clamp(28px,4vh,48px);
  font-size:clamp(19px,2.4vw,30px);font-weight:800;font-stretch:106%;letter-spacing:-.03em;
  text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:4px;
  transition:gap .18s ease;
}
.bigcta:hover{gap:22px}

/* ============ how it works — five steps ============ */
.steps{display:grid;grid-template-columns:repeat(5,1fr)}
.step{padding:24px clamp(14px,1.8vw,26px) 28px;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.step:first-child{border-left:0;padding-left:0}
.step .n{
  display:block;font-size:11px;font-weight:650;font-stretch:76%;letter-spacing:.16em;
  color:var(--claim);font-variant-numeric:tabular-nums;
}
.step h3{margin:11px 0 0;font-size:clamp(17px,1.5vw,21px);font-weight:800;font-stretch:104%;letter-spacing:-.025em;line-height:1.12}
.step p{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
@media (max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .step{border-left:0;padding-left:0;padding-right:clamp(14px,3vw,34px)}
}
@media (max-width:560px){ .steps{grid-template-columns:1fr} }

/* ============ capacity / scarcity note ============ */
.capacity{
  margin:clamp(30px,5vh,54px) 0 0;padding-top:22px;border-top:1px solid var(--rule);
  font-size:clamp(17px,1.8vw,23px);font-weight:700;font-stretch:104%;letter-spacing:-.022em;
  line-height:1.3;max-width:46ch;
}
.capacity span{color:var(--ink-2);font-weight:400;font-stretch:100%}

/* ============ THE STACK — full-bleed field ============ */
.stack{background:var(--forest);color:var(--on-forest);border-bottom:0}
.stack .lbl{color:var(--lime)}
.stack .sec-head h2{color:var(--on-forest)}
.stack .body-lg{color:var(--on-forest);opacity:.82}
.stack-count{
  font-weight:800;font-stretch:112%;font-size:clamp(56px,11vw,150px);line-height:.82;
  letter-spacing:-.05em;color:var(--lime);font-variant-numeric:tabular-nums;margin:0;
}
.stack-count small{display:block;font-size:11px;font-weight:650;font-stretch:76%;letter-spacing:.19em;text-transform:uppercase;color:var(--on-forest);opacity:.72;margin-top:16px;line-height:1.5}
.cats{columns:2;column-gap:clamp(28px,5vw,72px);margin-top:clamp(30px,5vh,56px)}
@media (max-width:780px){ .cats{columns:1} }
.cat{break-inside:avoid;padding:22px 0;border-top:1px solid rgba(233,233,224,.22)}
.cat-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:6px}
.cat-h .lbl{color:var(--lime)}
.cat-h .n{font-size:11px;font-weight:650;font-stretch:76%;letter-spacing:.14em;opacity:.6;font-variant-numeric:tabular-nums}
.cat-note{margin:0 0 14px;font-size:14px;line-height:1.5;opacity:.76;max-width:48ch}
.cat ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:2px 18px}
.cat li{font-size:clamp(15px,1.35vw,19px);font-weight:700;font-stretch:96%;letter-spacing:-.015em;line-height:1.34}
.stack-closer{
  margin:clamp(34px,5vh,60px) 0 0;padding-top:26px;border-top:1px solid rgba(233,233,224,.22);
  font-size:clamp(18px,2.1vw,27px);font-weight:700;font-stretch:104%;letter-spacing:-.02em;
  line-height:1.28;max-width:34ch;
}

/* ============ built / record index ============ */
.idx-row{
  display:grid;grid-template-columns:clamp(90px,14vw,190px) minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(16px,3vw,40px);align-items:start;
  padding:clamp(24px,3.6vh,38px) 0;border-top:1px solid var(--rule);
  text-decoration:none;transition:padding-left .22s ease;
}
a.idx-row:hover{padding-left:12px}
.idx-row h3{margin:0;font-size:clamp(22px,2.6vw,34px);font-weight:800;font-stretch:106%;letter-spacing:-.03em;line-height:1.05}
.idx-row p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.idx-row .go{display:inline-flex;gap:8px;margin-top:12px;font-size:11px;font-weight:650;font-stretch:76%;text-transform:uppercase;letter-spacing:.16em}
a.idx-row:hover .go{text-decoration:underline;text-underline-offset:4px}
.idx-row .where{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
@media (max-width:860px){ .idx-row{grid-template-columns:1fr;gap:12px} }

/* ============ contact — night field ============ */
.contact{background:var(--night);color:var(--on-night);padding-top:clamp(64px,12vh,140px);padding-bottom:clamp(56px,10vh,110px)}
.contact .lbl{color:var(--lime)}
.contact .body-lg{color:var(--on-night);opacity:.8;margin-top:22px}
.mailto{
  display:block;margin:clamp(26px,5vh,52px) 0 0;text-decoration:none;
  font-weight:800;font-stretch:110%;letter-spacing:-.045em;line-height:.94;
  font-size:clamp(30px,7.4vw,108px);word-break:break-word;
  transition:color .2s ease;
}
.mailto:hover{color:var(--lime)}
.links{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:clamp(30px,5vh,54px)}
.links a{font-size:11px;font-weight:650;font-stretch:76%;text-transform:uppercase;letter-spacing:.16em;text-decoration:none;border-bottom:1px solid rgba(239,237,230,.3);padding-bottom:4px}
.links a:hover{border-color:var(--lime);color:var(--lime)}

/* two audiences, side by side, on the night field */
.who-for{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(26px,4vw,64px);
  margin-top:clamp(30px,5vh,52px);
}
@media (max-width:760px){ .who-for{grid-template-columns:1fr;gap:30px} }
.who-for > div{padding-top:20px;border-top:1px solid rgba(239,237,230,.22)}
.who-for h3{margin:12px 0 0;font-size:clamp(19px,2vw,26px);font-weight:800;font-stretch:104%;letter-spacing:-.028em;line-height:1.12}
.who-for p{margin:11px 0 0;font-size:15.5px;line-height:1.55;opacity:.78}

.foot{
  background:var(--night);color:var(--on-night);
  padding-top:22px;padding-bottom:30px;border-top:1px solid rgba(239,237,230,.16);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;
}
.foot .lbl{color:rgba(239,237,230,.55)}
.foot a{text-decoration:none;border-bottom:1px solid rgba(239,237,230,.3)}
.foot a:hover{color:var(--lime);border-color:var(--lime)}

/* ============ motion ============ */
.up{opacity:0;transform:translateY(18px)}
.js .up{transition:opacity .62s cubic-bezier(.2,.7,.3,1),transform .62s cubic-bezier(.2,.7,.3,1)}
.js .up.in{opacity:1;transform:none}
html:not(.js) .up{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .up,.js .up{opacity:1!important;transform:none!important;transition:none}
  .svc,.idx-row,.hero-cta,.bigcta,.hero-portrait img{transition:none}
}