/* =========================================================
   FONTY — self-hosted (RODO: żadnych zapytań do Google)
   Archivo to font zmienny: jeden plik obsługuje wagi 100–900.
   Podzbiór latin-ext niesie polskie znaki diakrytyczne.
   ========================================================= */
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/archivo-upright-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/archivo-upright-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-display:swap;src:url("fonts/archivo-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:italic;font-weight:100 900;font-display:swap;src:url("fonts/archivo-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/archivo-black-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo Black';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/archivo-black-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* =========================================================
   0 · TOKENS
   ========================================================= */
/* Three colours only — no tints, no shades. Every rule, border and
   underline on the page is --line thick and camel. */
:root{
  --midnight:#0E1C36;
  --camel:#B39469;
  --paper:#FFFFFF;
  --inv:#FFFFFF;

  --line:2px;

  --maxw:1720px;
  --gut:clamp(24px,4.5vw,90px);
  --head-h:86px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:var(--paper);
  color:var(--midnight);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(17px,1.05vw,20px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body.is-locked{overflow:hidden;}

img{max-width:100%; display:block;}
/* picture nie tworzy wlasnego pudelka, wiec uklad zachowuje sie jak przy samym img */
picture{display:contents;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}

h1,h2,h3{
  margin:0;
  font-family:'Archivo Black','Archivo',system-ui,sans-serif;
  font-weight:400;
  line-height:1.03;
  letter-spacing:-.015em;
  overflow-wrap:break-word;
}
h1{font-size:clamp(40px,6.8vw,92px); line-height:.99; letter-spacing:-.025em;}
h2{font-size:clamp(30px,4.1vw,56px);}
p{margin:0;}

.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);}

.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--camel); line-height:1.4; margin-bottom:20px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{content:""; width:30px; height:var(--line); background:currentColor; flex:none;}

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--camel); outline-offset:3px; border-radius:2px;
}

/* =========================================================
   1 · LOGO
   ========================================================= */
/* <use> content lives in a shadow tree, so only inherited properties
   reach it: the wordmark takes `fill`, the accent takes `currentColor`. */
.sprite{position:absolute; width:0; height:0; overflow:hidden;}
.logo{
  display:block; height:26px; width:auto;
  fill:var(--lg-word,#0E1C36); color:var(--camel);
  transition:fill .35s var(--ease);
}

/* =========================================================
   2 · HEADER
   ========================================================= */
.head{
  position:fixed; inset:0 0 auto 0; z-index:60;
  height:var(--head-h); display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.head__in{display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%;}
.head[data-stuck="true"]{
  height:70px;
  background:var(--paper);
  border-bottom:var(--line) solid var(--camel);
}
.head .logo{--lg-word:#FFFFFF;}
.head[data-stuck="true"] .logo{--lg-word:#0E1C36;}

.nav{display:flex; align-items:center; gap:clamp(16px,2.1vw,34px);}
.nav a{
  font-size:15px; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:var(--inv); position:relative; padding-block:8px;
  transition:color .35s var(--ease);
}
.head[data-stuck="true"] .nav a{color:var(--midnight);}
/* an invisible bold copy holds the width, so going bold shifts nothing */
.nav a::before{
  content:attr(data-label); display:block; height:0; overflow:hidden;
  font-weight:700; visibility:hidden; pointer-events:none;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:var(--line);
  background:var(--camel); transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav a:hover::after, .nav a[data-current="true"]::after{transform:scaleX(1);}
/* the section you are in: camel and bold, in both header states */
.nav a[data-current="true"],
.head[data-stuck="true"] .nav a[data-current="true"]{color:var(--camel); font-weight:700;}

.burger{display:none; width:44px; height:44px; margin-right:-10px; position:relative; z-index:61;}
.burger span{
  position:absolute; left:11px; right:11px; height:var(--line); background:var(--inv);
  transition:transform .4s var(--ease), background .35s var(--ease);
}
.burger span:nth-child(1){top:19px;}
.burger span:nth-child(2){top:26px;}
.head[data-stuck="true"] .burger span{background:var(--midnight);}
body.is-locked .burger span{background:var(--inv);}
body.is-locked .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
body.is-locked .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}

.menu{
  position:fixed; inset:0; z-index:55; background:var(--midnight);
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:var(--head-h) var(--gut) 40px;
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.menu[data-open="true"]{opacity:1; visibility:visible;}
.menu a{
  font-family:'Archivo Black','Archivo',sans-serif; font-size:clamp(26px,6.4vw,42px);
  color:var(--inv); padding-block:12px; border-bottom:var(--line) solid var(--camel);
}
.menu a:last-child{color:var(--camel);}

@media (max-width:960px){
  .nav{display:none;}
  .burger{display:block;}
}

/* =========================================================
   3 · HERO
   ========================================================= */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--midnight);}
/* the photo is blown up and pinned left, which pushes Darek across to sit
   under the middle of the nav; the empty left third is carried by the wash */
.hero__media{position:absolute; inset:0; overflow:hidden;}
.hero__media img{width:115%; max-width:none; margin-left:6%; height:100%; object-fit:cover; object-position:50% 50%;}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(14,28,54,1) 0%, rgba(14,28,54,.99) 26%, rgba(14,28,54,.88) 42%, rgba(14,28,54,.5) 66%, rgba(14,28,54,.26) 88%, rgba(14,28,54,.18) 100%),
    linear-gradient(180deg, rgba(14,28,54,.6) 0%, rgba(14,28,54,.1) 34%, rgba(14,28,54,.6) 100%);
}
.hero__in{position:relative; z-index:2; width:100%; padding-block:0 clamp(64px,12vh,132px);}
.hero h1{color:var(--inv); max-width:14ch;}
.hero__sep{width:72px; height:var(--line); background:var(--camel); border:0; margin:clamp(26px,3vw,38px) 0 0;}
.hero__lead{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:clamp(26px,4vw,60px);
  margin-top:clamp(22px,2.6vw,32px);
}
.hero__lead p{color:var(--inv); max-width:44ch;}

.btn{
  display:inline-flex; align-items:center; flex:none;
  padding:17px 32px; border:var(--line) solid var(--camel);
  color:var(--inv); background:transparent;
  font-size:13px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  position:relative; overflow:hidden;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.btn span{position:relative; z-index:2;}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--camel);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.btn:hover{color:var(--midnight);}
.btn:hover::before{transform:scaleX(1);}
/* identical to .btn — same border, same camel fill on hover. Only the
   resting label flips to midnight, because the ground underneath is white */
.btn--onlight{color:var(--midnight);}

/* =========================================================
   4 · SECTION: PO CO (white)
   ========================================================= */
.section{padding-block:clamp(72px,8vw,124px);}
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,110px); align-items:start;
}
.split__body p + p{margin-top:1.1em;}
.split__body p{color:var(--midnight); max-width:56ch;}
/* the eyebrow only sits over the left column, so the right one drops by
   its height and both columns start on the same line */
.split__pair{padding-top:37px;}
@media (max-width:860px){
  .split{grid-template-columns:1fr; gap:28px;}
  .split__pair{padding-top:0;}
}

/* =========================================================
   5 · OBSZARY — pinned horizontal scroll
   ========================================================= */
.areas{background:var(--paper);}
.areas__track{position:relative;}
.areas__sticky{position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column;}
.areas__rail{
  display:flex; flex:1 1 auto; min-height:0;
  will-change:transform;
}
/* one panel = one screen; the gutter grows so the content stays centred
   on the same measure as the rest of the page */
.panel{
  flex:0 0 100%; height:100%;
  display:grid; grid-template-columns:minmax(0,40%) minmax(0,60%);
  align-items:stretch; gap:clamp(28px,5vw,88px);
  padding-block:calc(var(--head-h) + 20px) 84px;
  padding-inline:calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gut));
}
/* the photo fills its whole side of the tile, not a box inside it */
.panel__media{position:relative; height:100%; overflow:hidden; background:var(--paper);}
.panel__media img{width:100%; height:100%; object-fit:cover;}
.panel__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(14,28,54,0) 58%,rgba(14,28,54,.3) 100%);
}
.panel__text{align-self:center;}
.panel__no{
  font-size:15px; font-weight:600; letter-spacing:.2em; color:var(--camel); margin-bottom:32px;
}
/* sized so the longest name — EMERYTURA — always sits on one line */
.panel h3{font-size:clamp(52px,8.5vw,152px); line-height:.9; letter-spacing:-.035em;}
.panel h3 + p{margin-top:44px; color:var(--midnight); font-size:clamp(19px,1.5vw,25px); line-height:1.5; max-width:34ch;}

.areas__hud{
  flex:none; padding-bottom:clamp(22px,3vh,34px);
  padding-inline:calc(max(0px, (100vw - var(--maxw)) / 2) + var(--gut));
  display:flex; align-items:center; gap:clamp(20px,2.5vw,34px);
}

/* ---- strzałki obszarów ---- */
.areas__nav{flex:none; display:flex; gap:12px;}
.areas__arrow{
  position:relative; width:52px; height:52px; flex:none;
  border:var(--line) solid var(--camel); border-radius:50%;
  transition:background .35s var(--ease), visibility 0s;
}
.areas__arrow::before, .areas__arrow::after{
  content:""; position:absolute; top:50%; background:var(--camel);
  transition:background .35s var(--ease);
}
/* trzon strzałki */
.areas__arrow::before{left:16px; right:16px; height:var(--line); transform:translateY(-50%);}
/* grot */
.areas__arrow::after{
  width:11px; height:11px; background:none;
  border:solid var(--camel); border-width:var(--line) var(--line) 0 0;
  transition:border-color .35s var(--ease);
}
.areas__arrow[data-dir="1"]::after{right:16px; transform:translateY(-50%) rotate(45deg);}
.areas__arrow[data-dir="-1"]::after{left:16px; transform:translateY(-50%) rotate(-135deg);}
.areas__arrow:hover{background:var(--camel);}
.areas__arrow:hover::before{background:var(--midnight);}
.areas__arrow:hover::after{border-color:var(--midnight);}
.areas__arrow[disabled]{visibility:hidden; pointer-events:none;}
.areas__count{
  font-family:'Archivo Black','Archivo',sans-serif; font-weight:400;
  font-size:clamp(15px,1.25vw,18px); letter-spacing:.16em; color:var(--camel); flex:none;
  font-variant-numeric:tabular-nums;
}
.areas__count b{font-weight:400;}
.areas__count i{font-style:normal; color:var(--midnight);}
/* midnight track, camel fill */
.areas__bar{position:relative; height:var(--line); flex:1 1 auto; background:var(--midnight);}
.areas__bar span{
  position:absolute; inset:0 auto 0 0; background:var(--camel);
  transform-origin:left; transform:scaleX(0); width:100%;
}

.areas__outro{padding-block:clamp(96px,12vw,190px);}
/* padding sits outside the measure, so the marks flank the text
   instead of squeezing it */
.quote{
  position:relative; margin:0 auto; max-width:min(100%, 900px);
  padding-inline:clamp(56px,9vw,170px);
}
.quote p{
  font-style:italic; font-size:clamp(21px,2.1vw,29px); line-height:1.5;
  text-align:center; color:var(--midnight);
}
/* the quotation marks, blown up in camel — the opening one is the
   closing glyph turned over, which keeps both shapes identical */
.quote span{
  position:absolute; font-family:'Archivo Black','Archivo',sans-serif;
  font-size:clamp(84px,11vw,190px); line-height:.62; color:var(--camel);
  pointer-events:none; user-select:none;
}
.quote span:first-child{left:0; top:0; transform:rotate(180deg);}
.quote span:last-child{right:0; bottom:0;}
@media (max-width:700px){
  .quote{padding-inline:34px;}
  .quote span{font-size:64px;}
}

/* stacked fallback — no pinning below 900px */
@media (max-width:900px), (prefers-reduced-motion:reduce){
  .areas__track{height:auto !important;}
  .areas__sticky{position:static; height:auto; overflow:visible;}
  .areas__rail{display:block; transform:none !important;}
  .panel{
    display:block; flex:none; height:auto; padding:clamp(52px,9vw,80px) var(--gut);
    border-top:var(--line) solid var(--camel);
  }
  .panel:first-child{border-top:0;}
  .panel__media{height:min(58vh,440px); margin-bottom:26px;}
  .areas__hud{display:none;}
}

/* =========================================================
   6 · PATTERN BAND (pattern 02 — repeated lockup)
   ========================================================= */
.band{background:var(--midnight); overflow:hidden; padding-block:30px; position:relative;}
.band__row{display:flex; width:max-content; animation:slide 60s linear infinite;}
.band__set{display:flex; align-items:center; gap:clamp(64px,9vw,150px); padding-right:clamp(64px,9vw,150px);}
.band .logo{height:26px; --lg-word:#FFFFFF;}
@keyframes slide{from{transform:translate3d(0,0,0);} to{transform:translate3d(-50%,0,0);}}
@media (prefers-reduced-motion:reduce){ .band__row{animation:none;} }

/* =========================================================
   7 · PROCES (midnight)
   ========================================================= */
.proces{position:relative; background:var(--midnight); color:var(--inv); overflow:hidden;}
.proces .eyebrow{color:var(--camel);}
.proces h2{color:var(--inv); max-width:18ch;}
.proces__intro{padding-block:clamp(88px,12vw,150px) clamp(40px,6vw,80px);}
/* znaki wodne: w całości wewnątrz sekcji, żeby logo nigdzie nie było przecięte */
.proces__mark{
  position:absolute; right:clamp(16px,4vw,80px); top:clamp(80px,10vw,150px);
  width:min(52vw,640px); opacity:.045; pointer-events:none;
}
.proces__mark svg{width:100%; height:auto; fill:#FFFFFF; color:#FFFFFF;}

.steps{position:relative; padding-bottom:clamp(80px,10vw,140px);}
.steps__line{
  position:absolute; left:0; top:0; bottom:0; width:var(--line); background:var(--camel);
}
/* white fill over the camel track, same reason as the areas bar */
.steps__line span{
  position:absolute; inset:0 0 auto 0; background:var(--inv);
  height:100%; transform-origin:top; transform:scaleY(0);
}
.step{
  position:relative; display:grid; grid-template-columns:minmax(0,200px) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:start;
  padding:clamp(46px,7vw,86px) 0 clamp(46px,7vw,86px) clamp(26px,4vw,64px);
  border-bottom:var(--line) solid var(--camel);
}
.step:last-child{border-bottom:0;}
.step__no{
  font-family:'Archivo Black','Archivo',sans-serif; font-size:clamp(56px,9vw,120px);
  line-height:.85; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:var(--line) var(--camel);
  transition:color .6s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
/* the number lights up white in step with the rule beside it */
.step[data-active="true"] .step__no{color:var(--inv); -webkit-text-stroke-color:var(--inv);}
.step h3{font-size:clamp(21px,2.1vw,28px); color:var(--inv); letter-spacing:-.01em; line-height:1.2;}
.step h3 + p{margin-top:16px; color:var(--inv); font-size:clamp(16px,1.05vw,18px);}
@media (max-width:760px){
  .step{grid-template-columns:1fr; gap:14px; padding-left:22px;}
  .step__no{font-size:clamp(52px,14vw,72px);}
}

/* =========================================================
   8 · O MNIE (white)
   ========================================================= */
/* the full-bleed photo already closes the section, so the tail is short */
#o-mnie{padding-bottom:clamp(36px,4vw,60px);}
.about__lead{
  font-family:'Archivo','Archivo Black',sans-serif; font-weight:700;
  font-size:clamp(21px,2.1vw,28px); line-height:1.35; letter-spacing:-.01em;
  color:var(--midnight); max-width:22ch;
}
.about__body{margin-top:24px; color:var(--midnight); max-width:56ch;}
.about__langs{display:flex; gap:12px; margin-top:36px; flex-wrap:wrap;}

/* zasięg i podstawa prawna współpracy — ton drobniejszy niż tekst główny,
   bo to informacja do sprawdzenia, a nie część opowieści */
.about__reach{
  margin-top:28px; font-size:16px; line-height:1.7; color:var(--midnight);
}
.about__cred{
  margin-top:14px; padding-top:14px; border-top:var(--line) solid var(--camel);
  font-size:14px; line-height:1.6; color:var(--midnight); max-width:58ch;
}
/* same fill as the buttons, so the language chips feel like part of the set */
.about__langs span{
  position:relative; overflow:hidden; cursor:default;
  border:var(--line) solid var(--camel); color:var(--camel);
  font-size:13px; font-weight:600; letter-spacing:.18em; padding:10px 20px;
  transition:color .4s var(--ease);
}
.about__langs span::before{
  content:""; position:absolute; inset:0; background:var(--camel);
  transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);
}
.about__langs span i{position:relative; z-index:2; font-style:normal;}
.about__langs span:hover{color:var(--paper);}
.about__langs span:hover::before{transform:scaleX(1);}

/* full-bleed: it sits outside .wrap, so it needs no viewport maths */
.about__photo{position:relative; margin:clamp(48px,6vw,84px) 0 0;}
.about__photo img{width:100%; height:clamp(360px,72vh,780px); object-fit:cover; object-position:50% 32%;}

/* =========================================================
   9 · Q&A
   ========================================================= */
.qa{position:relative; background:var(--paper); overflow:hidden;}
.qa__mark{position:absolute; left:clamp(16px,4vw,80px); bottom:clamp(40px,5vw,90px); width:min(50vw,600px); opacity:.05; pointer-events:none;}
.qa__mark svg{width:100%; height:auto; fill:#0E1C36; color:#0E1C36;}
.qa__head{position:relative; z-index:2;}
.qa__head .split__pair p{color:var(--midnight); max-width:56ch;}
.qa__list{position:relative; z-index:2; margin-top:clamp(40px,5vw,64px); border-top:var(--line) solid var(--camel);}

.qa__item{border-bottom:var(--line) solid var(--camel);}
.qa__q{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:clamp(22px,2.6vw,30px) 0; text-align:left;
}
.qa__q h3{
  font-family:'Archivo',sans-serif; font-weight:700;
  font-size:clamp(17px,1.5vw,22px); line-height:1.4; letter-spacing:-.005em;
  color:var(--midnight); transition:color .3s var(--ease);
}
.qa__q:hover h3{color:var(--camel);}
.qa__ico{
  flex:none; position:relative; width:34px; height:34px; border:var(--line) solid var(--camel);
  border-radius:50%; transition:border-color .4s var(--ease), transform .5s var(--ease);
}
.qa__ico::before, .qa__ico::after{
  content:""; position:absolute; left:50%; top:50%; background:var(--camel);
  transition:transform .45s var(--ease), width .45s var(--ease), height .45s var(--ease), border-radius .45s var(--ease);
}
.qa__ico::before{width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%);}
.qa__ico::after{width:10px; height:var(--line); transform:translate(-50%,-50%) scaleX(0);}
.qa__item[data-open="true"] .qa__ico{transform:rotate(135deg);}
.qa__item[data-open="true"] .qa__ico::before{width:15px; height:var(--line); border-radius:0; transform:translate(-50%,-50%);}
.qa__item[data-open="true"] .qa__ico::after{width:15px; transform:translate(-50%,-50%) rotate(90deg) scaleX(1);}

.qa__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease);}
.qa__item[data-open="true"] .qa__panel{grid-template-rows:1fr;}
.qa__panel > div{overflow:hidden;}
/* the answer runs the full measure of the row, clearing only the icon */
.qa__panel p{
  padding:0 clamp(48px,7vw,86px) clamp(28px,3vw,36px) 0;
  color:var(--midnight); font-size:clamp(16px,1.05vw,18px);
}

/* =========================================================
   10 · KONTAKT (midnight)
   ========================================================= */
.kontakt{position:relative; background:var(--midnight); color:var(--inv); overflow:hidden;}
.kontakt__mark{position:absolute; right:clamp(16px,4vw,80px); bottom:clamp(40px,5vw,90px); width:min(52vw,620px); opacity:.05; pointer-events:none;}
.kontakt__mark svg{width:100%; height:auto; fill:#FFFFFF; color:#FFFFFF;}
.kontakt__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,7vw,110px); align-items:start;
}
.kontakt__say{
  font-family:'Archivo Black','Archivo',sans-serif; font-weight:400;
  font-size:clamp(28px,3.3vw,46px); line-height:1.14; letter-spacing:-.025em;
  color:var(--inv); max-width:16ch;
}
.kontakt__direct{margin-top:clamp(38px,4.4vw,58px); display:flex; flex-direction:column; gap:18px;}
.kontakt__direct a{
  color:var(--inv); font-size:clamp(20px,1.7vw,24px); display:inline-flex; align-items:baseline;
  gap:18px; width:max-content; transition:color .3s var(--ease);
}
.kontakt__direct a:hover{color:var(--camel);}
.kontakt__direct em{
  font-style:normal; font-family:'Archivo Black','Archivo',sans-serif; font-weight:400;
  color:var(--camel); font-size:14px; letter-spacing:.14em; text-transform:uppercase; min-width:64px;
}

.field{position:relative; margin-bottom:38px;}
/* field headings, per the mark-up: Archivo Black, larger, white */
.field label{
  display:block; font-family:'Archivo Black','Archivo',sans-serif; font-weight:400;
  font-size:clamp(15px,1.15vw,17px); letter-spacing:.08em; text-transform:uppercase;
  color:var(--inv); margin-bottom:14px; padding-left:14px;
}
.field input, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:var(--line) solid var(--camel);
  color:var(--inv); font:inherit; font-size:18px; padding:8px 14px 14px; border-radius:0;
}

/* Przeglądarka maluje własne tło na polach wypełnionych automatycznie.
   Na granacie wychodzi z tego jasnoniebieska plama z nieczytelnym tekstem.
   Koloru tła nie da się nadpisać wprost, ale da się go zasłonić cieniem
   wewnętrznym, którego autouzupełnianie już nie rusza. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--inv);
  -webkit-box-shadow:0 0 0 100px var(--midnight) inset;
  box-shadow:0 0 0 100px var(--midnight) inset;
  caret-color:var(--inv);
  /* bez tego Chrome i tak przywraca swoje tło po chwili */
  transition:background-color 100000s ease-in-out 0s;
}
.field textarea{resize:vertical; min-height:96px; line-height:1.55;}
.field input:focus, .field textarea:focus{outline:0;}
/* camel keeps the hint readable as a hint without a fourth tone */
.field input::placeholder, .field textarea::placeholder{color:var(--camel); opacity:1;}

.consent{display:flex; gap:16px; align-items:flex-start; margin:6px 0 38px;}
.consent input{
  flex:none; appearance:none; -webkit-appearance:none; width:22px; height:22px; margin-top:2px;
  border:var(--line) solid var(--camel); background:transparent; cursor:pointer; position:relative;
}
.consent input:checked{background:var(--camel);}
.consent input:checked::after{
  content:""; position:absolute; left:6px; top:1px; width:6px; height:12px;
  border:solid var(--midnight); border-width:0 var(--line) var(--line) 0; transform:rotate(45deg);
}
.consent span{font-size:15px; line-height:1.55; color:var(--inv);}
.form__note{margin-top:22px; font-size:15px; color:var(--inv);}
.form__note[data-state="ok"]{color:var(--camel);}

@media (max-width:860px){ .kontakt__grid{grid-template-columns:1fr; gap:44px;} }

/* =========================================================
   11 · FOOTER
   ========================================================= */
.foot{background:var(--midnight); color:var(--inv); padding-block:clamp(72px,9vw,120px); border-top:var(--line) solid var(--camel);}
.foot__in{display:flex; flex-wrap:wrap; gap:clamp(40px,6vw,90px); justify-content:space-between; align-items:flex-start;}
.foot .logo{height:34px; --lg-word:#FFFFFF; margin-bottom:26px;}
.foot__col{font-size:16px; line-height:1.85;}
.foot__col strong{
  display:block; color:var(--inv);
  font-family:'Archivo Black','Archivo',sans-serif; font-weight:400;
  font-size:16px; letter-spacing:.01em; margin-bottom:10px;
}
.foot__col a:hover{color:var(--camel);}
.foot__social{display:flex; gap:18px; margin-top:6px;}
.foot__social a{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--inv);
  border-bottom:var(--line) solid transparent; padding-bottom:3px; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.foot__social a:hover{color:var(--camel); border-bottom-color:var(--camel);}
.foot__legal{
  margin-top:clamp(44px,6vw,72px); padding-top:28px; border-top:var(--line) solid var(--camel);
  display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:space-between; font-size:14px;
}
.foot__legal span{color:var(--inv);}
/* zastrzeżenie w stopce: ma być czytelne, ale nie krzyczeć */
.foot__disclaimer{flex-basis:100%; font-size:13px; opacity:.72;}
.foot__credit a{
  color:var(--camel); padding-bottom:2px;
  border-bottom:var(--line) solid transparent; transition:border-color .3s var(--ease);
}
.foot__credit a:hover{border-bottom-color:var(--camel);}

/* =========================================================
   12 · CLOSING MARK — photo band under the footer
   ========================================================= */
.endmark{position:relative; overflow:hidden; background:var(--midnight);}
.endmark img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 45%;}
.endmark::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,28,54,.9) 0%, rgba(14,28,54,.66) 45%, rgba(14,28,54,.92) 100%);
}
.endmark__in{
  position:relative; z-index:2;
  padding:clamp(70px,11vw,150px) clamp(20px,4vw,64px) clamp(46px,7vw,90px);
  display:flex; justify-content:center;
}
.endmark .logo{width:min(72vw,1180px); height:auto; --lg-word:#FFFFFF;}

/* =========================================================
   12 · REVEAL
   ========================================================= */
[data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal][data-shown="true"]{opacity:1; transform:none;}
[data-reveal-delay="1"]{transition-delay:.08s;}
[data-reveal-delay="2"]{transition-delay:.16s;}
[data-reveal-delay="3"]{transition-delay:.24s;}
html:not([data-js]) [data-reveal]{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important; transform:none !important;}
}

/* =========================================================
   13 · BLOG
   Shared by the blog index and every article. Both open with a
   midnight masthead, so the header has a dark ground to sit on
   exactly like the home page hero.
   ========================================================= */
.masthead{background:var(--midnight); color:var(--inv); position:relative; overflow:hidden;}
.masthead__mark{position:absolute; right:clamp(16px,4vw,72px); top:calc(var(--head-h) + clamp(16px,2vw,32px)); width:min(38vw,420px); opacity:.045; pointer-events:none;}
.masthead__mark svg{width:100%; height:auto; fill:#FFFFFF; color:#FFFFFF;}
.masthead__in{
  position:relative; z-index:2;
  padding-block:calc(var(--head-h) + clamp(56px,8vw,110px)) clamp(56px,8vw,110px);
}
.masthead h1{color:var(--inv); font-size:clamp(34px,5.2vw,76px); line-height:1.02;}
/* tytuł wpisu bywa długi, a stoi w połowie szerokości — mniejszy stopień */
.masthead--article h1{font-size:clamp(30px,3.6vw,54px); line-height:1.06;}
.masthead__lead{color:var(--inv); max-width:56ch;}
/* nagłówek i podpis obok siebie, pierwsze wiersze na jednej linii */
.masthead__split{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px,6vw,110px); align-items:start;
}
@media (max-width:860px){
  .masthead__split{grid-template-columns:1fr; gap:26px;}
}
.masthead__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px clamp(20px,3vw,36px);
  margin-top:clamp(30px,4vw,48px); padding-top:26px; border-top:var(--line) solid var(--camel);
  font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--camel);
}
.masthead__meta b{font-weight:400; color:var(--inv); letter-spacing:.16em;}

/* ---- index: the list of posts ---- */
.posts{border-top:var(--line) solid var(--camel);}
.post-row{display:block; border-bottom:var(--line) solid var(--camel);}
/* start, nie baseline — dzięki temu data i nagłówek zaczynają się
   na tej samej wysokości, a nie na wspólnej linii pisma */
.post-row a{
  display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr) minmax(0,44px);
  gap:clamp(20px,4vw,64px); align-items:start;
  padding:clamp(30px,4vw,46px) 0;
}
.post-row__date{
  font-size:13px; line-height:1.5; letter-spacing:.16em; text-transform:uppercase;
  color:var(--camel); font-variant-numeric:tabular-nums; white-space:nowrap;
  padding-top:2px;
}
.post-row h2{
  font-size:clamp(23px,2.5vw,34px); line-height:1.18; color:var(--midnight);
  transition:color .3s var(--ease);
}
/* tylko zajawka pod tytułem — nie data, która jest osobnym akapitem */
.post-row h2 + p{margin-top:16px; color:var(--midnight); font-size:clamp(16px,1.05vw,18px);}
.post-row__go{
  justify-self:end; align-self:center; position:relative; width:44px; height:44px;
  border:var(--line) solid var(--camel); border-radius:50%;
  transition:background .4s var(--ease), transform .4s var(--ease);
}
.post-row__go::before, .post-row__go::after{
  content:""; position:absolute; background:var(--camel); transition:background .4s var(--ease);
}
.post-row__go::before{left:13px; right:13px; top:calc(50% - 1px); height:var(--line);}
.post-row__go::after{
  width:9px; height:9px; right:14px; top:50%;
  border:solid var(--camel); border-width:var(--line) var(--line) 0 0;
  transform:translateY(-50%) rotate(45deg); background:none;
}
.post-row a:hover h2{color:var(--camel);}
.post-row a:hover .post-row__go{background:var(--camel); transform:translateX(6px);}
.post-row a:hover .post-row__go::before{background:var(--midnight);}
.post-row a:hover .post-row__go::after{border-color:var(--midnight);}
@media (max-width:760px){
  .post-row a{grid-template-columns:1fr; gap:14px;}
  .post-row__go{display:none;}
}

/* ---- article body ---- */
.article{padding-block:clamp(64px,8vw,110px) clamp(72px,9vw,130px);}
/* tekst na pełną szerokość, tak jak w pozostałych sekcjach */
.article__body{max-width:none;}
.article__body > * + *{margin-top:1.35em;}
.article__body p{color:var(--midnight);}
.article__body h2{
  font-size:clamp(26px,3vw,40px); line-height:1.12; color:var(--midnight);
  margin-top:clamp(52px,6vw,84px);
}
.article__body h2 + p{margin-top:1.1em;}
.article__body strong{font-weight:700;}

/* pull quote — same device as the closing quote on the home page,
   trzymany węziej i wyśrodkowany, żeby odcinał się od pełnej szerokości */
.article .quote{
  margin:clamp(64px,7vw,100px) auto; max-width:min(100%, 900px);
}
.article__figure{margin:clamp(48px,6vw,80px) 0;}
.article__figure img{width:100%; height:clamp(280px,46vh,520px); object-fit:cover;}
.article__figure figcaption{
  margin-top:16px; font-size:14px; letter-spacing:.02em; color:var(--camel);
}

.article__foot{
  margin-top:clamp(56px,7vw,96px); padding-top:clamp(30px,4vw,44px);
  border-top:var(--line) solid var(--camel);
  display:flex; flex-wrap:wrap; gap:24px clamp(24px,4vw,56px); align-items:center;
  justify-content:space-between;
}
.backlink{
  display:inline-flex; align-items:center; gap:14px;
  font-size:13px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--midnight); transition:color .3s var(--ease);
}
.backlink::before{
  content:""; width:26px; height:var(--line); background:var(--camel);
  transition:width .4s var(--ease);
}
.backlink:hover{color:var(--camel);}
.backlink:hover::before{width:38px;}

/* a pull quote sits inside the article measure, so its marks come down a
   size and hug the first and last line of a short quote */
.article .quote span{font-size:clamp(64px,7.5vw,130px);}
.article .quote span:first-child{top:-.06em;}
.article .quote span:last-child{bottom:-.06em;}

/* =========================================================
   14 · STRONY POMOCNICZE — polityka prywatności, 404
   ========================================================= */
.legal h2{font-size:clamp(22px,2.2vw,30px); margin-top:clamp(40px,4.5vw,60px);}
.legal a{color:var(--camel); border-bottom:var(--line) solid transparent; transition:border-color .3s var(--ease);}
.legal a:hover{border-bottom-color:var(--camel);}
.legal__date{margin-top:2em; font-size:14px; letter-spacing:.06em; color:var(--camel);}
.foot__legal-link{color:var(--camel); border-bottom:var(--line) solid transparent; transition:border-color .3s var(--ease);}
.foot__legal-link:hover{border-bottom-color:var(--camel);}
.notfound .masthead__in{min-height:calc(100svh - var(--head-h)); display:flex; flex-direction:column; justify-content:center;}
.notfound h1{max-width:14ch;}
.notfound .masthead__lead{margin-top:clamp(20px,2.4vw,30px);}
.notfound__cta{margin-top:clamp(30px,3.5vw,44px);}

/* =========================================================
   15 · EKRAN ŁADOWANIA
   Granatowa plansza z logo i camelową linią, która dojeżdża
   do końca razem z załadowaniem strony, po czym plansza odjeżdża
   do góry. Pokazuje się raz na sesję; przy ograniczonym ruchu
   i bez JS nie pokazuje się w ogóle.
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:90; background:var(--midnight);
  display:flex; align-items:center; justify-content:center;
  transition:transform .85s var(--ease), visibility 0s linear .85s;
}
.loader[data-done="true"]{transform:translateY(-100%); visibility:hidden;}
.loader__in{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(20px,3vw,32px); width:min(68vw,420px);
}
.loader__logo{
  width:100%; height:auto; --lg-word:#FFFFFF;
  animation:loader-in .9s var(--ease) both;
}
.loader__bar{display:block; position:relative; width:100%; height:var(--line);}
.loader__bar i{
  position:absolute; inset:0; background:var(--camel);
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s linear;
}
.loader[data-done="true"] .loader__logo{opacity:0; transition:opacity .3s var(--ease);}
@keyframes loader-in{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
body.is-loading{overflow:hidden;}
html:not([data-js]) .loader, html[data-intro="seen"] .loader{display:none;}
@media (prefers-reduced-motion:reduce){ .loader{display:none;} }

/* podnagłówki wewnątrz wpisu — numerowane kroki i podobne wtrącenia */
.article__body h3{
  font-size:clamp(19px,1.9vw,24px); line-height:1.3; color:var(--midnight);
  margin-top:clamp(34px,3.8vw,50px);
}
.article__body h3 + p{margin-top:.85em;}

/* lista numerowana we wpisie — używana tylko wtedy, gdy treść naprawdę jest
   sekwencją. Numeracja 01–07 powtarza sposób liczenia z sekcji obszarów. */
.article__body ol{
  counter-reset:qq; list-style:none; padding:0;
  margin-top:clamp(40px,5vw,64px);
  border-top:var(--line) solid var(--camel);
}
.article__body ol li{
  counter-increment:qq;
  display:grid; grid-template-columns:clamp(58px,6vw,92px) 1fr;
  gap:clamp(16px,3vw,38px);
  padding:clamp(22px,2.6vw,32px) 0;
  border-bottom:var(--line) solid var(--camel);
}
.article__body ol li::before{
  content:counter(qq,decimal-leading-zero);
  font-family:'Archivo Black','Archivo',sans-serif;
  font-size:clamp(24px,3vw,38px); line-height:1.05;
  letter-spacing:-.03em; color:var(--camel);
}
.article__body ol li p{margin:0;}
@media (max-width:640px){
  .article__body ol li{grid-template-columns:1fr; gap:8px;}
}

/* zajawka bloga na stronie głównej — korzysta z komponentów .posts i .post-row */
.blog-teaser .posts{margin-top:clamp(40px,5vw,64px);}
.blog-teaser__cta{margin-top:clamp(36px,4.5vw,60px);}
.blog-teaser .post-row h3{
  font-family:'Archivo Black','Archivo',sans-serif; font-weight:400;
  font-size:clamp(23px,2.5vw,34px); line-height:1.18; color:var(--midnight);
  transition:color .3s var(--ease);
}
.blog-teaser .post-row a:hover h3{color:var(--camel);}
.blog-teaser .post-row h3 + p{margin-top:16px; color:var(--midnight); font-size:clamp(16px,1.05vw,18px);}


/* ---- baner zgody na cookies ----
   Oba przyciski wyglądają tak samo mocno. To nie jest kwestia gustu:
   RODO wymaga, żeby odmowa była równie łatwa jak zgoda. */
.cookies{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:var(--midnight); color:var(--inv);
  border-top:var(--line) solid var(--camel);
  transform:translateY(100%); transition:transform .45s var(--ease);
}
.cookies[data-open="true"]{transform:translateY(0);}
.cookies__in{
  display:flex; flex-wrap:wrap; gap:18px clamp(24px,4vw,56px);
  align-items:center; justify-content:space-between;
  padding-block:clamp(18px,2.4vw,26px);
}
.cookies__txt{font-size:14.5px; line-height:1.6; max-width:62ch; color:#C9D3E2;}
.cookies__txt a{color:var(--camel); border-bottom:1px solid transparent; transition:border-color .3s var(--ease);}
.cookies__txt a:hover{border-bottom-color:var(--camel);}
.cookies__btns{display:flex; gap:12px; flex-wrap:wrap;}
.cookies__btn{
  font-family:'Archivo',sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:13px 24px; cursor:pointer;
  background:transparent; color:var(--camel);
  border:var(--line) solid var(--camel);
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.cookies__btn:hover{background:var(--camel); color:var(--midnight);}
.cookies__btn:focus-visible{outline:var(--line) solid var(--inv); outline-offset:3px;}
@media (max-width:640px){
  .cookies__in{flex-direction:column; align-items:flex-start;}
  .cookies__btns{width:100%;}
  .cookies__btn{flex:1 1 auto; text-align:center;}
}
@media (prefers-reduced-motion: reduce){
  .cookies{transition:none;}
}

/* przycisk w trakcie wysyłki: widocznie nieaktywny, żeby nikt nie klikał dwa razy */
.btn:disabled{opacity:.5; cursor:progress; pointer-events:none;}