/* ==========================================================================
   KROJE — z własnego serwera
   Jost i Open Sans przychodzą jako pliki zmienne, jeden plik na cały zakres
   grubości. Polskie znaki siedzą w latin-ext, więc każdy krój ma dwa pliki
   i przeglądarka pobiera drugi dopiero, gdy natrafi na ą, ć, ł.
   Licencje: Jost i Open Sans SIL OFL, IBM Plex Mono SIL OFL.
   ========================================================================== */

@font-face{
  font-family:"Jost";
  src:url("../fonts/jost-latin.woff2") format("woff2");
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
  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:"Jost";
  src:url("../fonts/jost-latin-ext.woff2") format("woff2");
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
  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:"Open Sans";
  src:url("../fonts/opensans-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  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:"Open Sans";
  src:url("../fonts/opensans-latin-ext.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  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:"IBM Plex Mono";
  src:url("../fonts/plexmono-400-latin.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  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:"IBM Plex Mono";
  src:url("../fonts/plexmono-400-latin-ext.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  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:"IBM Plex Mono";
  src:url("../fonts/plexmono-500-latin.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  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:"IBM Plex Mono";
  src:url("../fonts/plexmono-500-latin-ext.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  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;
}

/* ==========================================================================
   GDI — Glos Dejczer Investments
   Homepage. Design tokens from the GDI colour book.
   Single-theme by intent: this is a brand surface with a fixed palette,
   so every colour is painted explicitly rather than inherited from the host.
   ========================================================================== */

:root{
  color-scheme: light;

  /* Brand palette — colour book only, no colours from outside the system */
  --navy:        #092870;
  --ink:         #172036;
  --brown:       #362917;
  --paper:       #FAF8F4;
  --parchment:   #EDE7DE;
  --line:        #DEE2ED;
  --mist:        #F4F6FA;
  --amber:       #FB9A05;
  --czerwien:    #F0503C;

  /* Derived tones — opacity and shade only, still inside the system */
  --ink-70:      rgba(23, 32, 54, .70);
  --ink-55:      rgba(23, 32, 54, .55);
  --ink-40:      rgba(23, 32, 54, .40);
  --navy-12:     rgba(9, 40, 112, .12);
  --navy-24:     rgba(9, 40, 112, .24);
  --navy-06:     rgba(9, 40, 112, .06);
  --paper-70:    rgba(250, 248, 244, .70);
  --paper-45:    rgba(250, 248, 244, .45);

  /* Type. Titles want Coco Gothic, which is a licensed Zetafonts family and
     cannot be loaded here, so Jost stands in: same geometric skeleton, same
     small x-height. Swap --display when the licensed webfont files exist. */
  --display: "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans:    "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --caps:    "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --maxw: 1400px;
  --pad:  clamp(20px, 5vw, 80px);
  --sec:  clamp(72px, 11vw, 160px);   /* large section rhythm */
  --sec-sm: clamp(60px, 8vw, 100px);  /* smaller section rhythm */
  --gap-h: clamp(20px, 2.2vw, 32px);  /* headline -> copy */
  --gap-c: clamp(28px, 2.8vw, 40px);  /* copy -> CTA */

  /* Motion — calm, institutional, no bounce */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .34s;
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size:17px;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 0;
  /* clip, not hidden. `hidden` turns body into a scroll container, which
     makes html stop being the scrolling element and leaves position:sticky
     resolving against the wrong box, so the nav drifts into the page. */
  overflow-x:clip;
}

h1,h2,h3,h4,p,figure,ul,ol{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
img,svg,canvas{ display:block; max-width:100%; }

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Shared primitives ---------------------------------------- */

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

.section{ padding-block: var(--sec); position:relative; }
.section--sm{ padding-block: var(--sec-sm); }
.bg-paper{ background:var(--paper); }
.bg-mist{ background:var(--mist); }
.bg-ink{ background:var(--ink); }

/* Eyebrow: the mono voice. Used for every technical label on the site. */
.eyebrow{
  font-family:var(--caps);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-70);
  display:flex;
  align-items:center;
  gap:12px;
}
.eyebrow::before{
  content:"";
  width:24px; height:1px;
  background:var(--amber);
  flex:none;
}
.eyebrow--plain::before{ display:none; }
.eyebrow--onink{ color:var(--paper-70); }

.h1{
  font-size:clamp(34px, 4.6vw, 60px);
  line-height:1.06;
  letter-spacing:-.025em;
  font-weight:400;
  color:var(--navy);
  text-wrap:balance;
}
.h2{
  font-size:clamp(28px, 3.2vw, 42px);
  line-height:1.14;
  letter-spacing:-.02em;
  font-weight:400;
  color:var(--navy);
  text-wrap:balance;
}
.h3{
  font-size:clamp(20px, 1.7vw, 24px);
  line-height:1.22;
  letter-spacing:-.012em;
  font-weight:500;
  color:var(--navy);
}
.lede{
  font-size:clamp(16px, 1.25vw, 18px);
  line-height:1.62;
  color:var(--ink-70);
  max-width:62ch;
}
.lede + .lede{ margin-top:1.1em; }
.on-ink .h1,.on-ink .h2,.on-ink .h3{ color:var(--paper); }
.on-ink .lede{ color:var(--paper-70); }

/* Display face carries the headings and the wordmark-adjacent elements. */
.h1,.h2,.h3,.mark__gdi,.dirs__item,.step__name,.contact__sub,.ptab{
  font-family:var(--display);
}

/* ---------- Buttons: four styles, defined once ------------------------ */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 22px;
  border-radius:2px;
  border:1px solid transparent;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.005em;
  cursor:pointer;
  transition:background var(--dur) var(--ease),
             color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             transform .12s var(--ease);
  will-change:transform;
}
.btn .arw{ transition:transform var(--dur) var(--ease); display:inline-block; }
.btn:hover .arw{ transform:translateX(4px); }
.btn:active{ transform:scale(.98); }

.btn--primary{ background:var(--navy); color:var(--paper); }
/* Decyzja Maxa z 9 września: przy najechaniu zmienia się samo tło,
   napis zostaje biały, żeby przycisk nie migał dwoma zmianami naraz. */
.btn--primary:hover,
.btn--primary:focus-visible{
  background:var(--amber); color:#FFFFFF; border-color:var(--amber);
  box-shadow:0 1px 7px rgba(54,41,23,.20);
}

.btn--ghost{ background:transparent; color:var(--navy); border-color:var(--navy-24); }
.btn--ghost:hover{
  background:#FFFFFF; border-color:var(--navy); color:var(--navy);
  box-shadow:0 1px 7px rgba(9,40,112,.14);
}
.btn--ghost .arw--down{ transition:transform var(--dur) var(--ease); }
.btn--ghost:hover .arw--down{ transform:translateY(3px); }

/* Amber never carries white text — it carries ink. Colour-book rule. */
.btn--amber{ background:var(--amber); color:var(--ink); border-color:var(--amber); }
/* Bursztyn w spoczynku, biel po najechaniu, z granatem na tekście.
   Bursztyn na bursztynie nie dawał żadnej informacji zwrotnej. */
.btn--amber:hover,
.btn--amber:focus-visible{
  background:#FFFFFF; color:var(--navy); border-color:#FFFFFF;
  box-shadow:0 2px 10px -4px rgba(9,40,112,.34);
}

.btn--nav{ padding:10px 20px; font-size:14px; }

/* Zaproszenie pod kaflami zespolu: biel z granatem, bursztyn z biela
   po najechaniu, ta sama zasada co przy .btn--primary. */
.btn--zespol{ background:#FFFFFF; color:var(--navy); border-color:var(--line); }
.btn--zespol:hover,
.btn--zespol:focus-visible{
  background:var(--amber); color:#FFFFFF; border-color:var(--amber);
  box-shadow:0 1px 7px rgba(54,41,23,.20);
}

.link{
  display:inline-flex; align-items:center; gap:8px;
  font-size:15px; font-weight:500; color:var(--navy);
  padding-bottom:2px;
  border-bottom:1px solid var(--navy-24);
  transition:border-color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.link:hover{ border-color:var(--amber); gap:12px; }

/* ---------- Navigation ------------------------------------------------ */

.nav{
  position:sticky; top:0; z-index:60;
  background:#FFFFFF;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  border-bottom:1px solid var(--line);
}
.nav.is-stuck{ box-shadow:0 6px 24px -18px rgba(9,40,112,.55); }

/* ==========================================================================
   PROJEKTY W NAWIGACJI — panel wysuwany spod paska
   ========================================================================== */
.nav__has-sub{ position:relative; display:flex; align-items:center; }

.nav__sub{
  position:absolute; top:100%; left:50%;
  transform:translate(-50%, -8px);
  margin-top:18px;                       /* siada na dolnej krawedzi paska */
  min-width:240px;
  display:flex; flex-direction:column;
  background:#FFFFFF;
  border:1px solid var(--line);
  border-top:0;
  box-shadow:0 18px 40px -26px rgba(9,40,112,.45);
  opacity:0; visibility:hidden;
  pointer-events:none;
  transition:opacity .22s var(--ease), transform .28s var(--ease),
             visibility 0s linear .28s;
  z-index:2;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub,
.nav__has-sub.is-open .nav__sub{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%, 0);
  transition:opacity .22s var(--ease), transform .28s var(--ease), visibility 0s;
}

/* Most nad przerwa miedzy linkiem a panelem, zeby kursor nie gubil hoveru. */
.nav__sub::before{
  content:""; position:absolute; left:0; right:0; top:-18px; height:18px;
}

.nav__sub a{
  display:flex; align-items:baseline; gap:8px;
  padding:14px 18px;
  font-size:14.5px; color:var(--navy);
  border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease);
}
.nav__sub a:last-child{ border-bottom:0; }
.nav__sub a:hover,
.nav__sub a:focus-visible{ background:var(--mist); }

.nav__sub-note{
  font-family:var(--caps); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-55);
}

@media (max-width:1080px){
  /* W menu telefonu nic sie nie wysuwa, obie pozycje stoja od razu. */
  .nav__has-sub{ display:block; width:100%; }
  .nav__sub{
    position:static; transform:none; margin:0; min-width:0;
    opacity:1; visibility:visible; pointer-events:auto;
    border:0; box-shadow:none; padding-left:14px;
  }
  .nav__sub::before{ display:none; }
  .nav__sub a{ border-bottom:0; padding:10px 0; color:var(--ink-70); }
  .nav__sub a:hover{ background:none; }
}
.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:76px;
}
.mark{ display:flex; align-items:center; gap:14px; }
/* Banner GD Inv.png is RGB with a solid white ground, so multiply drops the
   white into the warm canvas. Swap for a transparent PNG or SVG when there
   is one and this can go. */
.mark__img{ height:46px; width:auto; mix-blend-mode:multiply; }
.footer .mark__img{ height:auto; width:100%; max-width:300px; }
.mark__gdi{
  font-size:20px; font-weight:600; letter-spacing:.06em; color:var(--navy);
}
.mark__rule{ width:1px; height:22px; background:var(--line); }
.mark__full{
  font-family:var(--caps); font-size:9.5px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-55);
  line-height:1.3; max-width:96px;
}
.nav__links{ display:flex; align-items:center; gap:30px; }

/* Wybor jezyka: ostatni element nawigacji, wiec konczy sie tam, gdzie
   konczy sie tresc strony. Wezszy odstep niz reszta, bo to nie jest
   pozycja menu, tylko przelacznik przy krawedzi. */
.nav__jezyk{
  margin:0; display:flex; align-items:center; gap:5px;
  font-family:var(--caps); font-size:12px; font-weight:600;
  letter-spacing:.09em;
}
.nav__links > .nav__jezyk{ margin-left:-14px; }
.nav__jezyk-link{
  color:var(--ink-40); padding:6px 1px;
  transition:color var(--dur) var(--ease);
}
.nav__jezyk-link:hover{ color:var(--navy); }
.nav__jezyk-link.is-teraz{ color:var(--navy); }
.nav__jezyk-kreska{ color:var(--ink-40); font-weight:400; }
.nav__link{
  font-size:14.5px; color:var(--ink-70); position:relative; padding-block:6px;
  transition:color var(--dur) var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--amber); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav__link:hover{ color:var(--navy); }
.nav__link:hover::after{ transform:scaleX(1); }
.nav__burger{
  display:none; background:none; border:1px solid var(--navy-24);
  border-radius:2px; padding:10px 14px; cursor:pointer;
  font-family:var(--caps); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
@media (max-width:1080px){
  .nav__links{
    position:absolute; top:76px; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:#FFFFFF; border-block:1px solid var(--line);
    padding:8px var(--pad) 24px;
  }
  .nav__links:not(.is-open){ display:none; }
  .nav__links .nav__link{ padding-block:14px; width:100%; border-bottom:1px solid var(--line); }
  .nav__links .btn{ margin-top:18px; }
  .nav__burger{ display:block; }
}

/* ---------- Scroll reveal -------------------------------------------- */
/* Applied by JS only, so with JS off every element is visible at rest. */
.js .reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d, 0ms);
}
.js .reveal.is-in{ opacity:1; transform:none; }

/* ==========================================================================
   01 — HERO
   ========================================================================== */

.hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:clamp(490px, 72vh, 810px);
  padding-top:clamp(53px, 7.7vw, 106px);      /* +10% headroom above the copy */
  /* the copy took 40px of this, so the hero keeps its height */
  padding-bottom:calc(clamp(64px, 9vw, 132px) - 40px);
}

/* The supplied globe animation, running as the hero backdrop. */
.hero__bg{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  /* Scena jest interaktywna, wiec tlo przyjmuje wskaznik. */
  opacity:var(--bgo, 1);
  transform:translateY(var(--bgy, 0px));
  will-change:opacity, transform;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,0) 96%);
          mask-image:linear-gradient(180deg,#000 0%,#000 56%,rgba(0,0,0,0) 96%);
}
/* Shifted up, not resized. Giving the box extra height made cover scale the
   render back up, which enlarged it instead of cropping it. Height stays at
   100% and the whole thing simply moves; the bottom edge it leaves behind
   sits inside the mask's fade-out, so nothing shows there. */
/* Animacja pokrywa hero w proporcji 16/9, czyli tej, ktora ma wpisana
   projekcja 3D. Przesuniecie o 135px w gore to to samo kadrowanie co
   wczesniej mial film. */
.hero__anim{
  position:absolute; left:50%; top:50%;
  width:auto; height:auto;
  min-width:100%; min-height:100%;
  aspect-ratio:16 / 9;
  transform:translate(-50%, -50%) translateY(-135px);
}

/* Clears the centre so the centred copy stays legible, and lets the globe
   read at the edges where nothing sits on top of it. */
.hero__scrim{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(48% 40% at 50% 62%,
    rgba(250,248,244,.60) 0%,
    rgba(250,248,244,.38) 46%,
    rgba(250,248,244,.10) 76%,
    rgba(250,248,244,0)   100%);
}
/* Scenę da się chwycić wszędzie poza samym tekstem. Bloki tytułu i
   akapitu zwężają się do szerokości najdłuższego wiersza, a warstwa
   ::after dokłada 8px zapasu, żeby kursor nie łapał sceny tuż przy
   literach. Zapas jest rysowany, nie wynika z marginesu, więc układ
   pozostaje dokładnie tam, gdzie był. */
.hero__in{ position:relative; z-index:1; width:100%; pointer-events:none; }
.hero__copy{ pointer-events:none; }
.hero .h1,
.hero__lede{
  position:relative;
  pointer-events:auto;
  width:fit-content; max-width:100%;
}
.hero .h1::after,
.hero__lede::after{
  content:""; position:absolute; inset:-8px; z-index:-1;
}
.hero__cta{ pointer-events:none; }
.hero__cta .btn{ pointer-events:auto; }
.hero__copy{
  max-width:min(100%, 760px);
  margin-inline:auto;
  text-align:center;
  padding-top:calc(clamp(290px, 42vh, 450px) + 15px);   /* clears the build above it */
}
.hero .h1{
  text-wrap:balance;
  font-size:clamp(29px, 3.7vw, 47px);
}
.hero__lede{ margin-inline:auto; }
.hero__cta{ justify-content:center; }
.hero .h1{ margin-top:var(--gap-h); }
.hero__lede{ margin-top:var(--gap-h); }
.hero__cta{
  margin-top:var(--gap-c);
  display:flex; flex-wrap:wrap; gap:12px;
}

/* Projekty: the animation is the section, not a picture inside it. Poland
   sits left of centre, the project panel sits right on empty sky, and
   nothing shows until the globe has finished its approach. */
.projects{
  position:relative;
  overflow:visible;
  min-height:clamp(560px, 82vh, 900px);
  padding-block:clamp(32px, 4vw, 56px);   /* tighter than the page rhythm, so the whole section clears one screen */
  display:flex;
  align-items:center;
}
/* Poland sits centred and still. Choosing a project slides the whole
   globe left and only then does the card arrive. */
.projects__bg{
  position:absolute; top:-90px; bottom:-90px; left:-25%;
  width:150%;
  transform:translateX(0);
  transition:transform .95s var(--ease);
  z-index:0;
  /* It used to stop dead at both edges, like a wall. Now it dissolves, and
     the overspill lets it lean into the section above. */
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 16%, #000 84%, rgba(0,0,0,0) 100%);
}
.projects.is-open .projects__bg{ transform:translateX(-17%); }
/* Ramka wchodzi lagodnie. Przy szybkim przewijaniu doladowywala sie
   dopiero na miejscu i pojawiala sie skokiem, jakby ktos wlaczyl swiatlo. */
.projects__bg iframe{
  width:100%; height:100%; border:0; display:block;
  opacity:0;
  transition:opacity .8s var(--ease);
}
.projects__bg iframe.is-in{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .projects__bg iframe{ transition:none; opacity:1; }
}
.projects__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity .95s var(--ease);
  background:linear-gradient(90deg,
    rgba(250,248,244,0)   18%,
    rgba(250,248,244,.30) 34%,
    rgba(250,248,244,.78) 48%,
    rgba(250,248,244,.93) 62%);
}
.projects.is-open .projects__veil{ opacity:1; }
.projects__in{ position:relative; z-index:3; width:100%; pointer-events:none; }
.projects__panel{ pointer-events:auto; }
/* A card, not a column. Everything inside is about a third smaller than
   it was, so the whole thing clears the viewport without scrolling. */
.projects__panel{
  margin-left:auto;
  width:min(100%, 720px);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-radius:6px;
  padding:clamp(18px, 1.8vw, 24px);
  box-shadow:0 1px 2px rgba(9,40,112,.05),
             0 26px 64px -34px rgba(9,40,112,.40);
  opacity:0;
  transform:translateX(28px);
  pointer-events:none;
  transition:opacity .6s var(--ease) .40s, transform .6s var(--ease) .40s;
}
.projects.is-open .projects__panel{ opacity:1; transform:none; pointer-events:auto; }

.projects__hint{
  margin-top:14px;
  font-family:var(--caps); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-55);
  transition:opacity .4s var(--ease);
}
.projects.is-open .projects__hint{ opacity:0; }
.projects__head{ margin-bottom:clamp(14px, 1.6vw, 20px); }
.projects__in{ display:flex; flex-direction:column; }

/* Held back until the globe has arrived over Poland */
.js .projects__in{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js .projects.is-ready .projects__in{ opacity:1; transform:none; }

/* The heading travels further than the panel, so it reads as flying in. */
.js .projects__head{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .8s var(--ease) 60ms,
             transform .95s cubic-bezier(.16,.86,.3,1) 60ms;
}
.js .projects.is-ready .projects__head{ opacity:1; transform:none; }

@media (max-width:900px){
  .projects{ min-height:0; display:block; }
  .projects__bg{
    position:relative; width:100%; transform:none;
    height:min(84vw, 420px); margin-bottom:clamp(20px, 4vw, 32px);
  }
  .projects__veil{ display:none; }
  .projects__panel{ width:100%; margin-left:0; }
}
.pglobe iframe{
  width:100%; height:100%; border:0; display:block;
}

@media (max-width:900px){
  .hero{ min-height:0; padding-bottom:clamp(64px, 9vw, 132px); }
  .hero__copy{ max-width:100%; padding-top:clamp(60px, 12vh, 120px); }
  .hero__scrim{
    background:linear-gradient(90deg,
      rgba(250,248,244,.55) 0%,
      rgba(250,248,244,.86) 45%,
      rgba(250,248,244,.94) 100%);
  }
}

/* ==========================================================================
   02 — O NAS
   ========================================================================== */

.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px, 6vw, 96px);
  align-items:start;
}
.about__text .lede{ margin-top:var(--gap-h); }

/* Owner-side diagram. Warm panel — this section is warm throughout. */
@media (max-width:900px){ .about__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   03 — TEZA INWESTYCYJNA
   ========================================================================== */

.thesis__head{ max-width:900px; }
.thesis .h2{ margin-top:var(--gap-h); }
.thesis__body{
  margin-top:clamp(36px, 4vw, 56px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 80px);
}
.thesis__statement{
  border-left:2px solid var(--amber);
  padding-left:clamp(20px, 2.2vw, 28px);
}
.thesis__statement p{
  font-size:clamp(19px, 1.6vw, 23px);
  line-height:1.42;
  letter-spacing:-.012em;
  color:var(--navy);
}
.thesis__statement p + p{ margin-top:.7em; color:var(--ink-70); font-size:clamp(16px,1.2vw,17px); line-height:1.6; letter-spacing:0; }

.dirs{ margin-top:clamp(48px, 5vw, 72px); }
.dirs__row{
  margin-top:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  grid-template-rows:auto auto;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.dirs__item{ grid-row:1; grid-column:var(--gc); }
.dirs__more{ grid-row:2; grid-column:var(--gc); }
/* Colour lives on anything carrying the key, so button and panel both get it. */
.dirs__row [data-k="zachowac"]{ --dc:#6B7A99; --dct:rgba(107,122,153,.11); }
.dirs__row [data-k="rozwinac"]{ --dc:#B5904E; --dct:rgba(181,144,78,.13);  }
.dirs__row [data-k="sprzedac"]{ --dc:#8C7B6B; --dct:rgba(140,123,107,.13); }
.dirs__item{
  appearance:none; background:none; border:0; width:100%; cursor:pointer;
  font-family:var(--display);
  padding:clamp(26px, 3vw, 38px) 4px;
  text-align:center;
  font-size:clamp(17px, 1.6vw, 22px);
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--navy);
  position:relative;
}
.dirs__item + .dirs__item{ border-left:1px solid var(--line); }

/* Hovering a direction slides the explanation out from under it. */
/* Opens in flow rather than floating over the page. An absolutely
   positioned panel here rode over the sticky nav; pushing the content
   down instead cannot collide with anything. */
.dirs__more{
  max-height:0;
  opacity:0;
  overflow:hidden;
  text-align:left;
  border-top:2px solid transparent;
  transition:max-height .42s var(--ease), opacity .28s var(--ease),
             padding .42s var(--ease), border-color .28s var(--ease);
  padding:0 clamp(18px, 1.8vw, 24px);
}
/* Only the open one takes any height, so the other two stay short. */
.dirs__row[data-open="zachowac"] .dirs__more[data-k="zachowac"],
.dirs__row[data-open="rozwinac"] .dirs__more[data-k="rozwinac"],
.dirs__row[data-open="sprzedac"] .dirs__more[data-k="sprzedac"]{
  max-height:340px;
  opacity:1;
  padding:clamp(18px, 1.8vw, 24px);
  border-top-color:var(--dc);
}
.dirs__more h4{
  font-family:var(--display);
  font-size:17px; font-weight:600; letter-spacing:-.01em;
  color:var(--navy);
  margin-bottom:12px;
}
.dirs__more li{
  position:relative;
  padding-left:18px;
  font-size:14px; line-height:1.5; color:var(--ink-70);
}
.dirs__more li + li{ margin-top:8px; }
.dirs__more li::before{
  content:"\25C6";                      /* the same diamond the process list uses */
  position:absolute; left:0; top:0;
  font-size:8px; line-height:2.1;
  color:var(--dc);
}
@media (max-width:820px){
  .dirs__row{ grid-template-columns:1fr; grid-template-rows:none; }
  .dirs__item,.dirs__more{ grid-column:1; grid-row:auto; }
  .dirs__more{
    max-height:none; opacity:1;
    padding:clamp(18px, 1.8vw, 24px);
    border-top-color:var(--dc);
  }
}

/* Keep, develop, sell each carry a colour. Blue, amber and bronze: all
   from the colour book, none of them a red or green that would read as a
   verdict on the owner's property. */

/* The dot carries the colour at rest, so the coding reads before any hover.
   The label itself stays navy: amber on a light ground fails contrast. */
.dirs__dot{
  display:block; width:9px; height:9px; border-radius:50%;
  background:var(--dc); opacity:.55;
  margin:0 auto 16px;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.dirs__item:hover .dirs__dot,
.dirs__item:focus-visible .dirs__dot{ opacity:1; transform:scale(1.35); }
.dirs__item[aria-pressed="true"] .dirs__dot{ opacity:1; transform:scale(1.35); }
.dirs__item::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:var(--dc); transform:scaleX(0);
  transition:transform .5s var(--ease);
}
.dirs__item:hover::after,.dirs__item:focus-visible::after{ transform:scaleX(1); }
/* The row and its open panel sit on white, so the photo stays background
   and the three directions stay a control surface. */
.dirs__row .dirs__item{ background:#FFFFFF; }
.dirs__more{ background:#FFFFFF; }
.dirs__item:hover{ background:linear-gradient(var(--dct), var(--dct)), #FFFFFF; }
.dirs__item[aria-pressed="true"]{ background:linear-gradient(var(--dct), var(--dct)), #FFFFFF; }
.dirs__item[aria-pressed="true"]::after{ transform:scaleX(1); }
.dirs__item:active{ transform:scale(.99); }
.dirs{ text-align:center; }
.dirs__row{ text-align:center; }
.dirs__note{
  margin:10px auto clamp(20px, 2.4vw, 32px);
  max-width:46ch;
  font-size:16px; line-height:1.55; font-weight:500;
  color:var(--navy);
  /* A halo on the glyphs themselves, so the line lifts off the photo
     without a plate sitting behind it. */
  text-shadow:0 1px 2px rgba(250,248,244,.95), 0 0 10px rgba(250,248,244,.8);
}
.dirs__note b{ color:var(--navy); font-weight:600; }
.dirs__hint{
  font-family:var(--display);
  font-size:clamp(28px, 3.2vw, 42px);
  line-height:1.14;
  letter-spacing:-.02em;
  font-weight:400;
  color:var(--navy);
  text-transform:none;
  text-wrap:balance;
  max-width:24ch;
  margin-inline:auto;
  margin-bottom:0;
}

/* Brief confirmation that the click landed on the right option */
@keyframes choicePing{
  0%{ box-shadow:0 0 0 0 rgba(251,154,5,.55); }
  100%{ box-shadow:0 0 0 12px rgba(251,154,5,0); }
}
.choice.is-ping span{ animation:choicePing .9s var(--ease) 2; }
@media (max-width:820px){
  .thesis__body{ grid-template-columns:1fr; }
  .dirs__row{ grid-template-columns:1fr; }
  .dirs__item + .dirs__item{ border-left:0; border-top:1px solid var(--line); }
}

/* Owner-side block, folded into the thesis. This section is cool, so the
   diagram takes the cool surface set — warm parchment would mix systems. */
.owner.owner--solo{ margin-top:0; padding-top:0; border-top:0; }
.analysis--inline{
  margin-top:clamp(48px, 5vw, 80px);
  padding-top:clamp(40px, 4vw, 64px);
}
.owner{
  margin-top:clamp(48px, 5vw, 80px);
  padding-top:clamp(40px, 4vw, 64px);
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
.owner__text .lede{ margin-top:var(--gap-h); }
@media (max-width:900px){ .owner{ grid-template-columns:1fr; } }

/* The four-step chain, shown early so the process reads before the detail. */
.chain{
  margin-top:clamp(48px, 5vw, 72px);
  display:flex; align-items:center; flex-wrap:wrap;
  gap:10px clamp(12px, 1.6vw, 22px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(20px, 2.2vw, 28px) 0;
  transition:border-color var(--dur) var(--ease);
}
.chain:hover{ border-color:var(--navy-24); }
.chain__step{
  font-family:var(--display);
  font-size:clamp(14px, 1.35vw, 18px);
  font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy);
}
.chain__arw{ color:var(--amber); font-size:14px; }
.chain__cta{
  margin-left:auto;
  font-family:var(--caps); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-55);
  display:inline-flex; align-items:center; gap:8px;
  transition:color var(--dur) var(--ease);
}
.chain:hover .chain__cta{ color:var(--navy); }
.chain:hover .chain__cta .arw--down{ transform:translateY(3px); }
.chain__cta .arw--down{ transition:transform var(--dur) var(--ease); display:inline-block; }

/* ==========================================================================
   04 — NASZ PROCES
   ========================================================================== */

.process__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; }
.process .h2{ margin-top:var(--gap-h); }

/* Step paging. Background tone, lifted only in lightness. */
.pnav{ display:flex; gap:10px; }
.pnav--foot{ justify-content:flex-end; margin-top:clamp(24px, 2.6vw, 36px); }
.pnav__btn{
  appearance:none; cursor:pointer;
  width:52px; height:52px; border-radius:2px;
  border:1px solid var(--line);
  background:rgba(9,40,112,.045);
  color:var(--navy);
  display:grid; place-items:center;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             transform .12s var(--ease);
}
.pnav__btn:hover{ background:#FFFFFF; border-color:var(--navy); color:var(--navy); box-shadow:0 1px 7px rgba(9,40,112,.12); }
.pnav__btn:active{ transform:scale(.96); }
.pnav__btn svg{ width:17px; height:17px; }

.steps{
  margin-top:clamp(40px, 4.5vw, 64px);
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  border-top:1px solid var(--line);
}
.step{
  appearance:none; background:none; border:0; cursor:pointer;
  text-align:left;
  padding:22px 20px 24px 0;
  border-top:2px solid transparent;
  margin-top:-1px;
  display:flex; flex-direction:column; gap:10px;
  transition:border-color var(--dur) var(--ease);
}
.step__no{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.12em; color:var(--ink-40);
  transition:color var(--dur) var(--ease);
}
.step__name{
  font-size:clamp(15px, 1.35vw, 19px);
  font-weight:500; letter-spacing:.04em; text-transform:uppercase;
  color:var(--ink-40);
  transition:color var(--dur) var(--ease);
}
.step:hover .step__name{ color:var(--ink-70); }
.step[aria-selected="true"]{ border-top-color:var(--amber); }
.step[aria-selected="true"] .step__no{ color:var(--amber); }
.step[aria-selected="true"] .step__name{ color:var(--navy); }

.panel{
  padding-top:clamp(36px, 4vw, 56px);
  display:grid;
  grid-template-columns:minmax(0,34fr) minmax(0,66fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
.panel__left .h3{ margin-top:14px; }
.panel__eff{
  margin-top:28px; padding-top:20px; border-top:1px solid var(--line);
}
.panel__eff dt{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--amber);
}
.panel__eff dd{ margin:10px 0 0; font-size:16px; line-height:1.58; color:var(--ink-70); }

.scope{
  columns:2;
  column-gap:clamp(24px, 3vw, 56px);
}
.scope li{
  break-inside:avoid;
  display:flex; gap:12px; align-items:baseline;
  padding:10px 0;
  border-bottom:1px solid var(--line);
  font-size:15.5px; line-height:1.45; color:var(--ink-70);
}
.scope li::before{
  content:"◆"; color:var(--amber); font-size:8px; line-height:1.9; flex:none;
}
.scope__label{
  font-family:var(--caps); font-size:12px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-70); margin-bottom:10px; display:block;
}
.panel.is-swapping .panel__left,
.panel.is-swapping .panel__right{ opacity:0; transform:translateY(8px); }
.panel__left,.panel__right{
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
@media (max-width:980px){
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel{ grid-template-columns:1fr; }
  .scope{ columns:1; }
}
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }

/* ==========================================================================
   05 — ANALIZA NIERUCHOMOŚCI
   ========================================================================== */

.report{ position:relative; overflow:hidden; }
/* Kierunki lead straight into the report, so the two sections
   share one gap instead of stacking two full ones. */
.process{ padding-bottom:calc(var(--sec) * .5); }
.dirs-section{ padding-top:calc(var(--sec) * .5); padding-bottom:calc(var(--sec) * .35); }

/* An aerial estate, greyed right back, so the three directions sit on
   real ground instead of flat beige. */
.dirs-section__bg{
  position:absolute; inset:0;
  background-image:url("../img/kierunki-tlo.webp");
  background-size:cover;
  background-position:center 42%;
  opacity:.14;
  pointer-events:none;
  z-index:0;
}
.report{ padding-top:calc(var(--sec) * .35); }
.report__grid{
  display:grid;
  grid-template-columns:minmax(0,50fr) minmax(0,50fr);
  gap:clamp(32px, 4vw, 64px);
  align-items:center;
}
.report .h2{ margin-top:var(--gap-h); }
.report__lede{ margin-top:var(--gap-h); max-width:52ch; }

.form{ margin-top:var(--gap-c); display:grid; gap:18px; max-width:520px; }
.field{ display:grid; gap:7px; align-content:start; }
.field label,.legend{
  font-family:var(--caps); font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-70);
}
.field input, .field textarea{
  font-family:var(--sans); font-size:16px; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--navy-24);
  padding:10px 0;
  transition:border-color var(--dur) var(--ease);
}
.field input::placeholder{ color:var(--ink-40); }
.field input:focus{ outline:none; border-bottom-color:var(--amber); border-bottom-width:2px; padding-bottom:9px; }
.field--pair{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.choices{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice span{
  display:inline-block;
  --cc:#6B7A99; --cct:rgba(107,122,153,.11);
  border:1px solid var(--navy-24); border-radius:2px;
  padding:9px 15px; font-size:14px; cursor:pointer;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* Same coding as the three directions in the thesis, so a click there and a
   click here read as one choice. Amber keeps ink text. */
.choice input[value="zachowac"] + span{ --cc:#6B7A99; --cct:rgba(107,122,153,.11); }
.choice input[value="rozwinac"] + span{ --cc:#B5904E; --cct:rgba(181,144,78,.13);  }
.choice input[value="sprzedac"] + span{ --cc:#8C7B6B; --cct:rgba(140,123,107,.13); }
.choice input[value="kilka"]    + span{ --cc:#7E8790; --cct:rgba(126,135,144,.13); }
.choice:hover span{ border-color:var(--cc); background:var(--cct); }
/* Selected reads as a tint and a rule, not a solid slab of colour. */
.choice input:checked + span{
  background:var(--cct); border-color:var(--cc); color:var(--ink); font-weight:600;
  box-shadow:inset 0 -2px 0 0 var(--cc);
}
.choice input:focus-visible + span{ outline:2px solid var(--amber); outline-offset:3px; }

.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; margin-top:6px; }
.form__note{ font-family:var(--caps); font-size:12.5px; font-weight:600; letter-spacing:.06em; color:var(--ink-70); }
.form__ack{
  font-size:13.5px; color:var(--ink-55); border-left:2px solid var(--amber);
  padding-left:12px; display:none;
}
.form__ack.is-on{ display:block; }

/* The report document — sharp interface, obscured information.
   Labels legible, values redacted. Bleeds past the right edge. */
.doc{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  box-shadow:0 1px 2px rgba(9,40,112,.04),
             0 12px 28px -12px rgba(9,40,112,.14),
             0 40px 80px -40px rgba(9,40,112,.20);
  padding:26px 28px 30px;
  width:calc(100% + var(--pad) + 60px);
  font-size:13px;
}
.doc__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.doc__brand{ font-size:15px; font-weight:600; letter-spacing:.06em; color:var(--navy); }
.doc__title{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-55); margin-top:5px;
}
.doc__addr{ font-family:var(--mono); font-size:11px; color:var(--navy); margin-top:8px; }
.doc__tag{
  font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--navy-24); border-radius:2px; padding:4px 7px; color:var(--ink-55);
  flex:none;
}
.doc__body{ display:grid; grid-template-columns:118px minmax(0,1fr); gap:20px; padding-top:18px; }
.doc__map{ border:1px solid var(--line); border-radius:2px; background:var(--mist); }
.doc__col{ display:grid; gap:14px; min-width:0; }
.doc__block > .doc__lab{
  font-family:var(--mono); font-size:9px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-55); display:block; margin-bottom:7px;
}
.doc__rows{ display:grid; gap:7px; }
.doc__row{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.doc__row span{ font-size:11.5px; color:var(--ink-70); }
.redact{ height:7px; border-radius:1px; background:var(--line); flex:none; }
.doc__chips{ display:flex; flex-wrap:wrap; gap:5px; }
.doc__chip{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em;
  border:1px solid var(--line); border-radius:2px; padding:3px 7px; color:var(--ink-55);
}
.doc__chip--on{ border-color:var(--navy-24); color:var(--navy); background:var(--navy-06); }
.doc__bars{ display:flex; align-items:flex-end; gap:5px; height:44px; }
.doc__bar{ flex:1; background:var(--line); border-radius:1px 1px 0 0; }
.doc__bar--on{ background:var(--navy); }
.doc__scen{ display:grid; gap:6px; }
.doc__scenrow{ display:grid; grid-template-columns:76px minmax(0,1fr) 44px; gap:10px; align-items:center; }
.doc__scenrow b{ font-family:var(--mono); font-size:9.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-55); }
.doc__track{ height:5px; background:var(--line); border-radius:1px; position:relative; overflow:hidden; }
.doc__fill{ position:absolute; inset:0 auto 0 0; background:var(--navy); border-radius:1px; }
.doc__fill--amber{ background:var(--amber); }

/* Prawdziwy raport zamiast makiety. Widac tylko gore pierwszej strony:
   maska lezy na opakowaniu z zapasem na cien karty, wiec dol strony razem
   z cieniem rozplywa sie w tle sekcji. Zanikanie zaczyna sie pod naglowkiem
   "W skrocie" (86% wysokosci obrazu) i konczy na dolnej krawedzi karty. */
.doc-okno{
  margin:-8px -8px -56px; padding:8px 8px 56px;
  -webkit-mask-image:linear-gradient(180deg, #000 calc(86% - 47px), transparent calc(100% - 56px));
          mask-image:linear-gradient(180deg, #000 calc(86% - 47px), transparent calc(100% - 56px));
  pointer-events:none;
}
.doc--skan{ width:100%; padding:0; overflow:hidden; }
.doc--skan img{ display:block; width:100%; height:auto; }

@media (max-width:980px){
  .report__grid{ grid-template-columns:1fr; }
  .doc{ width:100%; }
}

/* ==========================================================================
   06 — PROJEKTY
   ========================================================================== */


.pcard{ border-top:1px solid var(--line); padding-top:18px; }
.pcard__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.pcard__place{
  font-family:var(--caps); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-55);
}
.status{
  font-family:var(--caps); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--navy-24); border-radius:2px; padding:4px 9px; color:var(--navy);
}
.status--amber{ border-color:var(--amber); color:var(--brown); background:rgba(251,154,5,.10); }
.pcard .h3{ margin-top:10px; font-size:clamp(19px,1.7vw,23px); font-weight:400; letter-spacing:-.015em; }
.pcard__desc{ margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--ink-70); }
.pcard__facts{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  display:grid; gap:10px;
}
.pcard__facts div{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.pcard__facts dt{
  font-family:var(--caps); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-55);
}
.pcard__facts dd{
  margin:0; font-size:15px; font-weight:600; color:var(--navy);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.pcard__foto{ min-width:0; }
.pcard__przypis{ margin-top:8px; font-size:10px; line-height:1.45; color:var(--ink-55); }
.pcard__scope{
  margin-top:12px; padding-top:12px; border-top:1px solid var(--line);
  font-family:var(--caps); font-size:11px; letter-spacing:.04em; color:var(--ink-55);
}
.pcard__scope b{ color:var(--navy); font-weight:500; }
.pcard__cta{ margin-top:16px; }
.pswap{
  transition:opacity .3s var(--ease), transform .3s var(--ease);
  display:grid;
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  gap:clamp(14px, 1.6vw, 20px);
  align-items:start;
}
.pcard__text{ min-width:0; }
@media (max-width:760px){ .pswap{ grid-template-columns:1fr; } }
.pswap.is-swapping{ opacity:0; transform:translateY(8px); }

.ptabs{ display:flex; gap:6px; margin-bottom:16px; }
.ptab{
  appearance:none; cursor:pointer; background:none;
  border:1px solid var(--navy-24); border-radius:2px;
  padding:7px 13px; font-size:12.5px; color:var(--ink-70);
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ptab:hover{ background:#FFFFFF; border-color:var(--navy); color:var(--navy); box-shadow:0 1px 7px rgba(9,40,112,.12); }
.ptab[aria-selected="true"]{ background:var(--navy); border-color:var(--navy); color:var(--paper); }

/* ==========================================================================
   07 — KONTAKT
   ========================================================================== */

.contact{ color:var(--paper); }
.contact__grid{
  display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(36px, 5vw, 88px); align-items:start;
}
.contact .h2{ margin-top:var(--gap-h); }
.contact__sub{
  margin-top:14px; font-size:clamp(20px,2vw,26px); font-weight:300;
  color:var(--paper-70); letter-spacing:-.01em;
}
.contact__detail{
  margin-top:clamp(28px,3vw,40px); padding-top:22px;
  border-top:1px solid rgba(250,248,244,.16);
  font-family:var(--caps); font-size:13px; line-height:1.95; color:rgba(250,248,244,.82);
}
.contact__detail a{ color:var(--paper-70); border-bottom:1px solid rgba(250,248,244,.24); }
.contact__detail a:hover{ color:var(--amber); border-color:var(--amber); }

.contact .field label{ color:rgba(250,248,244,.72); }
.contact .field input,.contact .field textarea{
  color:var(--paper);
  border-bottom-color:rgba(250,248,244,.24);
}
.contact .field input::placeholder,.contact .field textarea::placeholder{ color:rgba(250,248,244,.30); }
.contact .field input:focus,.contact .field textarea:focus{ outline:none; border-bottom-color:var(--amber); }
.contact .field textarea{ resize:vertical; min-height:92px; font-size:16px; line-height:1.55; }
.contact .form{ max-width:none; }
.contact .form__note{ color:var(--paper-45); }
.contact .form__ack{ color:var(--paper-70); }
/* Licznik slow pod wiadomoscia: pasek wypelnia sie do limitu, na limicie
   robi sie czerwony, a dojscie do limitu i proba przekroczenia potrzasaja
   polem. */
.licznik{
  display:flex; align-items:center; gap:10px; min-height:18px;
  font-size:12px; line-height:1.4; color:var(--ink-55);
}
.licznik__uwaga{ flex:1; min-width:0; color:#B8321A; }
.licznik__pasek{
  flex:none; margin-left:auto; width:96px; height:3px; border-radius:3px;
  background:var(--line); overflow:hidden;
}
.licznik__pasek i{
  display:block; height:100%; width:0; border-radius:inherit; background:var(--amber);
  transition:width .2s var(--ease), background-color .2s var(--ease);
}
.licznik__liczba{
  flex:none; font-family:var(--mono); font-variant-numeric:tabular-nums;
  white-space:nowrap; transition:color .2s var(--ease);
}
.licznik__liczba b{ font-weight:500; }
.licznik.is-pelny .licznik__pasek i{ background:var(--czerwien); }
.licznik.is-pelny .licznik__liczba{ color:#C8381F; }
.contact .licznik{ color:var(--paper-70); }
.contact .licznik__uwaga{ color:var(--amber); }
.contact .licznik.is-pelny .licznik__liczba{ color:var(--czerwien); }
.contact .licznik__pasek{ background:rgba(250,248,244,.16); }
.contact .field textarea.is-pelny,
.field textarea.is-pelny{ border-bottom-color:var(--czerwien); }
@keyframes gdi-bariera{
  0%, 100%{ transform:translateX(0); }
  15%{ transform:translateX(-7px); }
  30%{ transform:translateX(6px); }
  45%{ transform:translateX(-5px); }
  60%{ transform:translateX(4px); }
  75%{ transform:translateX(-2px); }
}
.field textarea.is-bariera{ animation:gdi-bariera .45s cubic-bezier(.36,.07,.19,.97) both; }
@media (max-width:900px){ .contact__grid{ grid-template-columns:1fr; } }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer{
  background:linear-gradient(180deg, var(--paper) 0%, var(--parchment) 100%);
  padding-top:clamp(44px, 4.6vw, 66px);
  padding-bottom:26px;
}
.footer__grid{
  display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,4vw,64px);
}
.footer__tag{ margin-top:22px; font-size:15px; color:rgba(54,41,23,.78); max-width:300px; line-height:1.55; }
.footer__h{
  font-family:var(--caps); font-size:10px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(54,41,23,.68); margin-bottom:12px;
}
.footer__list{ display:grid; gap:7px; }
.footer__list a{ font-size:14px; color:rgba(54,41,23,.78); transition:color var(--dur) var(--ease); }
.footer__list a:hover{ color:var(--navy); }
.footer__bar{
  margin-top:clamp(30px,3.4vw,48px); padding-top:18px;
  border-top:1px solid rgba(54,41,23,.14);
  display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between;
  font-family:var(--caps); font-size:10.5px; line-height:1.8; letter-spacing:.04em;
  color:rgba(54,41,23,.72);
}
.footer__legal{ max-width:62ch; }
/* Na telefonie stopka zostaje w trzech kolumnach obok siebie, jak na
   komputerze, zamiast ukladac sie jedna pod druga. */
@media (max-width:820px){
  .footer__grid{ grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:18px; }
}
/* iOS powieksza tekst po obrocie telefonu. Skala 85% ma zostac skala 85%. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* Glob i animacja hero celowo wychodza poza okno. Bez tego gladzik
   przewijal strone w bok o kilkaset pikseli. clip, nie hidden, zeby nie
   powstawal nowy kontener przewijania i przyklejone menu dzialalo dalej. */
html{ overflow-x:clip; }

/* ---------- What waiting costs --------------------------------------- */
/* Kolumna kosztow stoi na zdjeciu, wiec dostaje wlasna plyte. Biel na
   pol gwizdka: tekst czyta sie spokojnie, a fotografia dalej przez nia
   przechodzi. */
.cost{
  margin-top:0;
  padding:clamp(22px, 2.6vw, 34px);
  background:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.7);
}
.cost__lab{
  font-family:var(--caps); font-size:12px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-70);
  margin-bottom:clamp(20px, 2.4vw, 30px);
}
.cost__row{ display:grid; grid-template-columns:1fr; gap:clamp(20px, 2.2vw, 28px); }
.cost__item{ border-top:2px solid var(--amber); padding-top:16px; }
.cost__item h4{
  font-family:var(--display); font-size:clamp(17px,1.5vw,19px); font-weight:500;
  line-height:1.25; letter-spacing:-.01em; color:var(--navy); margin-bottom:10px;
}
.cost__item p{ font-size:14.5px; line-height:1.5; color:var(--ink-70); }

/* ---------- Full-bleed image band ------------------------------------ */
.band{
  position:relative;
  height:clamp(208px, 32vw, 432px);
  overflow:hidden;
  background:var(--brown);
}
.band__img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.03);
  transition:transform 1.2s var(--ease);
}
.band:hover .band__img{ transform:scale(1); }
.band__cap{
  position:absolute; inset:auto 0 0 0;
  padding:clamp(24px,3vw,44px) var(--pad);
  background:linear-gradient(180deg, rgba(30,22,12,0) 0%, rgba(30,22,12,.55) 40%, rgba(30,22,12,.90) 100%);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 18px;
}
.band__cap b{
  font-family:var(--caps); font-size:12px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--paper);
}
.band__cap span{
  font-family:var(--caps); font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(250,248,244,.92);
}

/* ---------- Project card imagery ------------------------------------- */
.pcard__img{
  width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 45%;
  border-radius:3px; border:1px solid var(--line);
  margin-bottom:0;
  background:var(--mist);
}
/* The phone artwork is landscape-ish. In the portrait box it was letterboxed
   twice over and came out tiny, so it gets its own ratio, no padding and a
   wider column. */
.pcard__img--contain{
  aspect-ratio:1.15;
  object-fit:contain; padding:0;
  background:#FFFFFF; border-color:transparent;
  /* Filtr obejmuje tez tlo elementu, wiec kontrast schodzil z bieli.
     Zostaje samo przygaszenie barw rysunku, plyta jest czysto biala. */
  filter:saturate(.6);
}
.pswap.is-wide{ grid-template-columns:minmax(0,54fr) minmax(0,46fr); }

/* ---------- Scope list: show a core set, reveal the rest -------------- */
.scope.is-clipped li:nth-child(n+7){ display:none; }
.scope__more{
  appearance:none; background:none; border:0; cursor:pointer;
  margin-top:14px; padding:0;
  font-family:var(--caps); font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--navy);
  border-bottom:1px solid var(--navy-24); padding-bottom:3px;
  transition:border-color var(--dur) var(--ease);
}
.scope__more:hover{ border-color:var(--amber); }
.scope__more[hidden]{ display:none; }

/* ---------- Prompt after a minute of browsing ------------------------ */
.promo{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:20px;
  background:rgba(23,32,54,.42);
  opacity:0; transition:opacity .38s var(--ease);
}
.promo.is-on{ opacity:1; }
.promo[hidden]{ display:none !important; }
.promo__box{
  position:relative;
  width:min(100%, 520px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:2px;
  padding:clamp(28px, 4vw, 44px);
  box-shadow:0 30px 80px -30px rgba(9,40,112,.45);
  transform:translateY(12px);
  transition:transform .38s var(--ease);
}
.promo.is-on .promo__box{ transform:none; }
.promo__x{
  position:absolute; top:10px; right:10px;
  appearance:none; background:none; border:0; cursor:pointer;
  width:36px; height:36px; border-radius:2px;
  color:var(--ink-40); font-size:20px; line-height:1;
  transition:color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.promo__x:hover{ color:var(--ink); background:rgba(23,32,54,.06); }
.promo__title{
  font-family:var(--display);
  font-size:clamp(24px, 3vw, 32px); line-height:1.15;
  letter-spacing:-.02em; font-weight:400; color:var(--navy);
  margin-bottom:10px;
}
.promo__lede{ font-size:16px; line-height:1.55; color:var(--ink-70); }
.promo__opts{ display:grid; gap:20px; margin-top:26px; }
.promo__opt{ padding-top:20px; border-top:1px solid var(--line); }
.promo__opt p{ font-size:15px; line-height:1.5; color:var(--ink-70); margin-bottom:14px; }
.promo__opt .btn{ width:100%; justify-content:center; }

/* ---------- Preview control — removed before the theme ships --------- */
@media (max-width:640px){ }

/* Kickers were removed, so a leading heading drops its old top gap. */
.h1:first-child,.h2:first-child,.h3:first-child{ margin-top:0; }

/* Short heading left, the explanation right — the heading tells you what it
   means, the column beside it tells you how it works. */
/* One left-anchored column. Split across two columns the copy sat around
   the middle of the page and read as centred, which it should not. */
.thesis__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:clamp(32px, 5vw, 72px);
  align-items:start;
}
.thesis__head{ max-width:640px; }
@media (max-width:960px){ .thesis__top{ grid-template-columns:1fr; } }
.thesis__copy{ margin-top:var(--gap-h); }
.thesis__head .lede + .lede{ margin-top:1.05em; }
.dirs{ margin-top:0; }

/* ---------- Section blends -------------------------------------------
   Hero is warm #FAF8F4, the thesis is cool #F4F6FA, and butted together
   they left a hard horizontal seam. Carry the warm tone a little way into
   the next section so the edge dissolves instead of cutting. */
.process::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:clamp(90px, 11vw, 180px);
  background:linear-gradient(180deg, #FAF8F4 0%, rgba(250,248,244,.55) 45%, rgba(250,248,244,0) 100%);
  pointer-events:none;
  z-index:0;
}
/* Dropped clear of the background blur at the top of the section. */
/* The projects section fades out into its own beige, that beige is then
   held for 150px, and only after it does the ground turn into mist.
   Sits above .thesis__bg so the photo starts below the held band. */
/* Not a blend: solid mist over the 90px the globe spills down into this
   section, so projects can end on a clean line instead of dissolving. */
.thesis::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:92px;
  background:var(--mist);
  pointer-events:none;
  z-index:1;
}

/* The section closes into white, so the dark contact block below still
   lands as a clean, deliberate edge rather than a change of two greys. */
.thesis::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:clamp(280px, 32vw, 480px);
  background:linear-gradient(0deg,
    #FFFFFF 0%,
    #FFFFFF 14%,
    rgba(255,255,255,.86) 34%,
    rgba(255,255,255,.46) 62%,
    rgba(255,255,255,0) 100%);
  pointer-events:none;
  z-index:0;
}

.thesis > .wrap{ position:relative; z-index:1; padding-top:220px; }

/* The section's own argument, in two halves: the owner running a company on
   the left, the build he has no time for on the right, split by a slant. */
.thesis__bg{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
  opacity:.17;
  mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 92px, #000 210px,
    #000 calc(100% - 420px), rgba(0,0,0,0) calc(100% - 40px));
}
.thesis__bg span{
  position:absolute; inset:0;
  background-size:cover; background-repeat:no-repeat;
}
.thesis__bg .is-left{
  background-image:url("../img/teza-biuro.webp");
  background-position:50% 40%;
  clip-path:polygon(0 0, 57% 0, 43% 100%, 0 100%);
}
.thesis__bg .is-right{
  background-image:url("../img/teza-budowa.webp");
  background-position:45% 50%;
  clip-path:polygon(57.5% 0, 100% 0, 100% 100%, 43.5% 100%);
}
.dirs-section > .wrap{ position:relative; z-index:1; }

/* Same seam, the other way round, where the cool analysis section meets
   the warm band above it. */
/* Both fades paint over the globe. Under it they did nothing, which is
   where the hard line at the top came from and why the bottom cut off. */
.projects::before{
  content:"";
  /* Reaches up over the 90px the globe spills into the section above,
     otherwise the cream tint sat on the blue ground up there and the
     gradient took over at the boundary, which read as a hard line. */
  position:absolute; left:0; right:0; top:-90px;
  height:clamp(200px, 22vw, 290px);
  background:linear-gradient(180deg,
    var(--mist) 0%,
    var(--mist) 31%,
    rgba(244,246,250,.72) 55%,
    rgba(244,246,250,0) 100%);
  pointer-events:none;
  z-index:1;
}
.projects::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(110px, 12vw, 190px);
  background:linear-gradient(0deg, var(--paper) 0%, rgba(250,248,244,.72) 38%, rgba(250,248,244,0) 100%);
  pointer-events:none;
  z-index:1;
}
.report > .wrap{ position:relative; z-index:1; }
.process > .wrap{ position:relative; z-index:1; }

/* ---------- Motion preferences --------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
  .js .reveal{ opacity:1 !important; transform:none !important; }
  .hero__bg{ transform:none !important; }
}


/* ==========================================================================
   WDROZENIE — pola i stany, ktorych makieta nie potrzebowala
   ========================================================================== */

/* Pulapka na roboty. Poza ekranem, nie display:none, bo czesc botow
   pomija pola faktycznie ukryte. */
.form__hp{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%);
  white-space:nowrap;
}

.form__ack.is-err{ color:#8C2F1E; }

/* ==========================================================================
   PODSTRONY — nagłówek, dokumenty, karty, projekt
   ========================================================================== */

.page-head{ padding-bottom:clamp(28px, 3.4vw, 48px); }
.page-head__title{ max-width:20ch; }
.page-head__lede{ max-width:60ch; margin-top:var(--gap-h); }

/* Strony prawne. Sam tekst na jasnoniebieskim tle, granatowe litery,
   pełna szerokość siatki od lewego do prawego marginesu. Nazwa .doc byla
   juz zajeta przez wizualizację raportu, więc te strony mają własną. */
/* .wrap sam trzyma szerokość i padding, więc tu nic nie nadpisujemy:
   inaczej tekst schodził poza oś nawigacji na szerokich ekranach. */
.prawo__tytul{
  font-family:var(--display); font-weight:300;
  font-size:clamp(34px, 5vw, 64px); line-height:1.06;
  letter-spacing:-.022em; color:var(--navy);
  text-wrap:balance;
}
.prawo__wstep{
  margin-top:var(--gap-h);
  font-size:clamp(16px, 1.5vw, 19px); line-height:1.6;
  color:var(--navy); opacity:.72;
  max-width:70ch;
}
.prawo .h2{
  margin-top:clamp(38px, 4.4vw, 62px);
  font-size:clamp(19px, 1.9vw, 25px);
  color:var(--navy);
}
.prawo > .h2:first-of-type{ margin-top:clamp(40px, 5vw, 72px); }
.prawo p{
  margin-top:14px;
  font-size:16px; line-height:1.7; color:var(--navy);
  max-width:none;
}
.prawo a{ color:var(--navy); border-bottom:1px solid var(--navy-24); }
.prawo a:hover{ color:var(--amber); border-color:var(--amber); }
.prawo .doc__list li{ color:var(--navy); max-width:none; }
.prawo .doc__note{
  color:var(--navy); opacity:.6;
  border-top-color:var(--navy-24);
}
.doc__list{
  margin:14px 0 0; padding:0; list-style:none;
  display:flex; flex-direction:column; gap:9px;
}
.doc__list li{
  position:relative; padding-left:20px;
  font-size:16px; line-height:1.6; color:var(--ink-70);
}
.doc__list li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; background:var(--amber); transform:rotate(45deg);
}
.doc__note{
  margin-top:clamp(34px, 4vw, 54px);
  padding-top:18px; border-top:1px solid var(--line);
  font-size:14px; color:var(--ink-55);
}

/* Karty materiałów i wpisów. Osobne kafle z odstępem, nie siatka na
   wspólnym tle: niepełny rząd zostawia wtedy puste miejsce, a nie szarą
   dziurę, i karta ma się od czego oderwać przy najechaniu. */
.cards{
  margin-top:clamp(24px, 3vw, 38px);
  display:grid; gap:clamp(14px, 1.4vw, 20px);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.cards--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.cards--4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
.cards--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }

.card{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  padding:clamp(20px, 2.2vw, 28px);
  background:#FFFFFF;
  border:1px solid var(--line);
  transition:transform .42s var(--ease),
             box-shadow .42s var(--ease),
             border-color .42s var(--ease);
}
/* Bursztynowa krecha wjeżdża po górnej krawędzi, karta unosi się z
   lekkim wyprzedzeniem cienia. Krecha jest osobnym elementem, żeby nie
   przesuwać ramki i nie wywoływać przeliczania układu. */
.card--link::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:-1px; height:2px;
  background:var(--amber);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .45s var(--ease);
}
.card--link:hover,
.card--link:focus-visible{
  transform:translateY(-6px);
  border-color:rgba(251,154,5,.38);
  box-shadow:0 26px 50px -28px rgba(9,40,112,.48),
             0 4px 12px -8px rgba(9,40,112,.26);
}
.card--link:hover::before,
.card--link:focus-visible::before{ transform:scaleX(1); }
.card--link:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.card--link:hover .card__title,
.card--link:focus-visible .card__title{ color:var(--amber); }
.card--link:hover .card__go,
.card--link:focus-visible .card__go{ color:var(--amber); }
.card--link:hover .card__go .arw{ transform:translate(3px, -3px); }
.card--link:active{ transform:translateY(-2px); transition-duration:.09s; }

@media (max-width:1100px){
  .cards--4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .cards--3{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:640px){
  .cards, .cards--2, .cards--3, .cards--4{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .card--link:hover, .card--link:focus-visible{ transform:none; }
  .card--link::before{ transition:none; }
}
.card__title{
  transition:color var(--dur) var(--ease);
  font-family:var(--display);
  font-size:clamp(17px, 1.5vw, 20px);
  font-weight:400; line-height:1.24; letter-spacing:-.01em;
  color:var(--navy);
}
.card__title a{ color:inherit; }
.card__desc{ font-size:14.5px; line-height:1.55; color:var(--ink-70); flex:1; }
.card__meta{
  font-family:var(--caps); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-55);
}
/* Strzałki poza przyciskami też muszą mieć czym animować. */
.card__go .arw, .osoba__go .arw{
  display:inline-block;
  transition:transform var(--dur) var(--ease);
}

.card__go{
  font-family:var(--caps); font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--navy);
  display:inline-flex; align-items:center; gap:7px;
  transition:color var(--dur) var(--ease);
}
.card--link:hover .card__go .arw{ transform:translate(3px, -3px); }
.card__shot{ display:block; margin:calc(-1 * clamp(20px, 2.2vw, 28px)); margin-bottom:4px; }
.card__shot img{ display:block; width:100%; height:190px; object-fit:cover; }

.res__lede{ max-width:62ch; margin-top:var(--gap-h); }
.res__cta{ max-width:60ch; }
.res__cta .lede{ margin-top:var(--gap-h); }
.res__cta p:last-child{ margin-top:clamp(20px, 2.4vw, 30px); }
.blog__empty{ margin-top:var(--gap-h); max-width:60ch; }

/* Nowosci, pusto: ikonki mediow spolecznosciowych. */
.spolecznosc{ display:flex; align-items:center; gap:22px; margin-top:22px; }
.spolecznosc a{ display:block; line-height:0; color:var(--navy); transition:color var(--dur) var(--ease); }
.spolecznosc a:hover,
.spolecznosc a:focus-visible{ color:var(--amber); }
.spolecznosc a:focus-visible{ outline:2px solid var(--amber); outline-offset:4px; border-radius:2px; }

/* Nowosci: karuzela najnowszych artykulow i kafelki pod nia.
   Karuzela przesuwa sie co 4 s o jeden artykul, zatrzymuje sie pod kursorem,
   przy fokusie i przyciskiem pauzy. */
.karuzela{ margin-top:var(--gap-c); }
.karuzela__okno{ overflow:hidden; border-radius:3px; }
.karuzela__tasma{ display:flex; transition:transform .7s var(--ease); }
.slajd{
  flex:0 0 100%; position:relative; display:flex; align-items:flex-end;
  min-height:clamp(360px, 40vw, 520px); background:var(--navy);
}
.slajd__foto{ position:absolute; inset:0; }
.slajd__foto img,
.slajd__foto .zastepczy{ display:block; width:100%; height:100%; object-fit:cover; }
.zastepczy{ background:linear-gradient(135deg, var(--navy) 0%, #1B3C8C 55%, #2A4F9E 100%); }
.slajd__karta{
  position:relative; background:var(--paper);
  margin:clamp(16px, 2.6vw, 32px); max-width:min(580px, calc(100% - 32px));
  padding:clamp(18px, 2.2vw, 28px);
  box-shadow:0 12px 32px -14px rgba(9,40,112,.35);
}
.etykieta{
  display:inline-block; font-family:var(--caps); font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
  color:var(--paper); background:var(--navy); padding:6px 9px;
}
.slajd__tytul{
  margin-top:12px; font-family:var(--display); font-weight:400;
  font-size:clamp(20px, 2.1vw, 28px); line-height:1.22; letter-spacing:-.01em; color:var(--navy);
}
.slajd__tytul a{ color:inherit; }
.slajd__tytul a::after{ content:""; position:absolute; inset:0; }
.slajd__karta:hover .slajd__tytul{ color:var(--amber); }
.slajd__zajawka{
  margin-top:8px; font-size:14px; line-height:1.55; color:var(--ink-70);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.slajd__data{ margin-top:10px; font-family:var(--mono); font-size:11.5px; color:var(--ink-55); }
.karuzela__sterowanie{ display:flex; align-items:center; gap:8px; margin-top:14px; }
.karuzela__kropki{ display:flex; gap:4px; margin-right:auto; }
.karuzela__kropki button{
  width:32px; height:24px; padding:0; border:0; background:none; cursor:pointer; position:relative;
}
.karuzela__kropki button::before{
  content:""; position:absolute; left:2px; right:2px; top:50%; height:3px; margin-top:-1.5px;
  border-radius:3px; background:var(--navy-24); transition:background-color .3s var(--ease);
}
.karuzela__kropki button[aria-current="true"]::before{ background:var(--navy); }
.karuzela__btn{
  width:40px; height:40px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--navy-24); border-radius:3px; background:transparent; color:var(--navy);
  font-size:16px; transition:background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.karuzela__btn:hover,
.karuzela__btn:focus-visible{ background:var(--navy); color:var(--paper); }
.karuzela__btn .ikona-graj{ display:none; }
.karuzela.is-zatrzymana .karuzela__btn .ikona-graj{ display:block; }
.karuzela.is-zatrzymana .karuzela__btn .ikona-pauza{ display:none; }
@media (prefers-reduced-motion: reduce){ .karuzela__tasma{ transition:none; } }
/* Na telefonie karta zaslanialaby cale zdjecie, wiec zdjecie idzie nad nia. */
@media (max-width:600px){
  .slajd{ display:block; min-height:0; background:var(--paper); }
  .slajd__foto{ position:relative; height:220px; }
  .slajd__karta{ margin:0; max-width:none; box-shadow:none; }
}

.kafle{
  margin-top:clamp(24px, 3vw, 40px);
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(10px, 1.2vw, 16px);
}
@media (max-width:1100px){ .kafle{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (max-width:820px){ .kafle{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:460px){ .kafle{ grid-template-columns:1fr; } }
.kafel{
  position:relative; display:block; aspect-ratio:1 / 1; overflow:hidden;
  border-radius:3px; background:var(--navy);
}
.kafel img,
.kafel .zastepczy{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.kafel:hover img,
.kafel:hover .zastepczy{ transform:scale(1.04); }
.kafel:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
.kafel .etykieta{ position:absolute; top:10px; left:10px; }
.kafel__tytul{
  position:absolute; left:10px; right:10px; bottom:10px;
  padding:10px 12px; background:rgba(9, 40, 112, .88); color:var(--paper);
  font-size:14.5px; font-weight:600; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  transition:background-color var(--dur) var(--ease);
}
.kafel:hover .kafel__tytul{ background:rgba(9, 40, 112, .96); }

/* Strona projektu. */
.proj__top{
  display:grid; gap:clamp(28px, 3.6vw, 56px);
  grid-template-columns:minmax(0, 46fr) minmax(0, 54fr);
  align-items:center;
}
.proj__place{
  font-family:var(--caps); font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-55);
  margin-bottom:12px;
}
.proj__top p:last-child{ margin-top:clamp(18px, 2vw, 26px); }
.proj__shot img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line);
}
.proj__shot-img--contain{ background:#FFFFFF; padding:clamp(12px, 2vw, 26px); }
.proj__shot figcaption{
  margin-top:10px; font-size:12.5px; color:var(--ink-55);
}

.facts{
  margin-top:clamp(24px, 3vw, 36px);
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  background:var(--line); border:1px solid var(--line);
}
/* Kafle nie sa odnosnikami, wiec reakcja na kursor jest samym sygnalem
   "to jest jedna calosc", bez obietnicy klikniecia. */
.facts__item{
  background:#FFFFFF; padding:clamp(18px, 2vw, 26px);
  position:relative; transition:background var(--dur) var(--ease);
}
.facts__item::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--amber);
  transform:scaleX(0); transform-origin:left center;
  transition:transform var(--dur) var(--ease);
}
.facts__item:hover{ background:var(--paper); }
.facts__item:hover::after{ transform:scaleX(1); }
.facts__item dt, .facts__item dd{ transition:color var(--dur) var(--ease); }
.facts__item:hover dt{ color:var(--ink-70); }
@media (prefers-reduced-motion: reduce){
  .facts__item::after{ transition:none; }
}
.facts__item dt{
  font-family:var(--caps); font-size:11px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-55);
}
.facts__item dd{
  margin:8px 0 0;
  font-family:var(--display); font-size:clamp(19px, 2vw, 25px);
  font-weight:400; color:var(--navy); letter-spacing:-.01em;
}
.facts__note{
  margin-top:18px; font-size:9.75px; line-height:1.6; color:var(--ink-55);
  /* Ma zmiescic sie w jednym wierszu pod kaflami, wiec bez wlasnego limitu. */
  max-width:none;
}

.proj__cols{
  margin-top:clamp(22px, 2.6vw, 34px);
  display:grid; gap:clamp(26px, 3.4vw, 54px);
  grid-template-columns:minmax(0, 55fr) minmax(0, 45fr);
}
/* Lista wychodzi poza kolumne tekstu az do paddingu strony. Wrap konczy
   sie na 1400 px, a sekcja idzie przez cala szerokosc, wiec bez tego lista
   urywala sie daleko przed krawedzia. */
.proj__list{
  margin:0 calc(-1 * max(0px, (100vw - var(--maxw)) / 2)) 0 0;
  padding:0 0 0 clamp(14px, 2.6vw, 48px);
  list-style:none;
}
.proj__list li{
  padding:13px 0 13px 20px; position:relative;
  font-size:15px; color:var(--ink);
}
.proj__list li::before{
  content:""; position:absolute; left:2px; top:1.35em;
  width:6px; height:6px; background:var(--amber); transform:rotate(45deg);
}
.proj__cta-row{ display:flex; flex-wrap:wrap; gap:12px; }

/* Akapity w tej sekcji stoja na zdjeciu, wiec potrzebuja pelnej mocy
   atramentu, nie zwyklego 70%. */
.proj__cols .lede{ color:var(--ink); }

@media (max-width:900px){
  .proj__top,
  .proj__cols{ grid-template-columns:1fr; }
  .proj__list{ margin-right:0; }
}

/* ==========================================================================
   FORMULARZ WYSŁANY
   ========================================================================== */

.form__done{
  display:none;
  padding:clamp(24px, 3vw, 38px);
  background:#FFFFFF;
  border:1px solid var(--line);
  border-top:2px solid var(--amber);
}
.form__done.is-on{ display:block; }
.form.is-sent{ display:none; }

.form__done-mark{
  width:38px; height:38px; border-radius:50%;
  background:var(--amber);
  display:grid; place-items:center;
  color:#FFFFFF; font-size:19px; line-height:1;
  margin-bottom:16px;
}
.form__done-title{
  font-family:var(--display);
  font-size:clamp(20px, 2.1vw, 26px); font-weight:400;
  letter-spacing:-.01em; color:var(--navy);
}
.form__done-text{
  margin-top:10px; font-size:15px; line-height:1.6; color:var(--ink-70);
  max-width:52ch;
}
.form__done-again{
  margin-top:18px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--caps); font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--navy);
  text-decoration:underline; text-underline-offset:4px;
}
.contact .form__done{
  background:rgba(255,255,255,.06);
  border-color:rgba(250,248,244,.24);
}
.contact .form__done-title{ color:var(--paper); }
.contact .form__done-text{ color:var(--paper-70); }
.contact .form__done-again{ color:var(--paper); }

/* ==========================================================================
   CIASTECZKA
   ========================================================================== */

.cc{
  position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:#FFFFFF;
  border-top:1px solid var(--line);
  box-shadow:0 -14px 40px -30px rgba(9,40,112,.6);
  transform:translateY(102%);
  transition:transform .5s var(--ease);
}
.cc.is-on{ transform:none; }
.cc[hidden]{ display:none !important; }

.cc__in{
  display:flex; align-items:center; gap:clamp(16px, 2.4vw, 34px);
  padding:clamp(14px, 1.6vw, 20px) 0;
  flex-wrap:wrap;
}
.cc__text{
  flex:1 1 340px;
  font-size:13.5px; line-height:1.55; color:var(--ink-70);
}
.cc__text b{ color:var(--navy); font-weight:600; }
.cc__acts{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cc__btn{
  appearance:none; cursor:pointer;
  font-family:var(--caps); font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:11px 18px; border-radius:2px;
  border:1px solid var(--navy-24); background:none; color:var(--navy);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.cc__btn:hover{ background:var(--mist); }
.cc__btn--ok{
  background:var(--navy); border-color:var(--navy); color:#FFFFFF;
}
.cc__btn--ok:hover,
.cc__btn--ok:focus-visible{
  background:var(--amber); border-color:var(--amber); color:var(--ink);
}
.cc__more{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:13px; color:var(--ink-70);
  text-decoration:underline; text-underline-offset:3px;
}

/* Panel "Dostosuj" schodzi pod paskiem, nad przyciskami nic się nie
   przesuwa, więc kliknięcie nie ucieka spod kursora. */
.cc__opts{ display:none; width:100%; padding-top:16px; }
.cc.is-open .cc__opts{ display:grid; gap:10px; }
.cc__opts-foot{ display:flex; justify-content:flex-end; padding-top:4px; }
.cc__opt{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px; border:1px solid var(--line); background:var(--mist);
}
.cc__opt input{ margin-top:3px; accent-color:var(--navy); }
.cc__opt span{ font-size:13.5px; line-height:1.5; color:var(--ink-70); }
.cc__opt b{ display:block; color:var(--navy); font-weight:600; margin-bottom:2px; }
.cc__opt input:disabled + span b::after{
  content:" · zawsze aktywne";
  font-weight:400; color:var(--ink-55); text-transform:none;
}

@media (max-width:700px){
  .cc__in{ align-items:flex-start; }
  .cc__acts{ width:100%; }
  .cc__btn{ flex:1 1 auto; text-align:center; }
}


/* ==========================================================================
   NOWOŚCI, tło grupy
   ========================================================================== */

/* Każda grupa materiałów ma zdjęcie pod spodem, dobrane pod odbiorcę:
   instytucje, właściciel firmy, inwestor. Leży bardzo nisko, karty są
   kryjące, więc zdjęcie działa jak faktura, nie jak ilustracja. */
.res--foto{ position:relative; overflow:hidden; }
.res--foto > .wrap{ position:relative; z-index:1; }
.res__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.10;
  mask-image:linear-gradient(180deg,
    rgba(0,0,0,0) 0%, #000 18%, #000 82%, rgba(0,0,0,0) 100%);
  pointer-events:none; z-index:0;
}

/* ==========================================================================
   DOMYŚLNE ZAMKNIĘCIE PODSTRONY
   ========================================================================== */

.cta-raport__in{
  display:grid; gap:clamp(20px, 3vw, 48px);
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
}
.cta-raport__in .lede{ margin-top:var(--gap-h); max-width:56ch; }
.cta-raport__act{ margin:0; }
@media (max-width:820px){
  .cta-raport__in{ grid-template-columns:1fr; }
}

/* ==========================================================================
   O NAS
   ========================================================================== */

/* Diagram stoi obok tytułu, bo to jest teza strony. */
/* Rysunek stoi obok tekstu i zaczyna sie na wysokosci naglowka. Miesci
   sie tu dopiero teraz, bo wczesniej blokowal go margines auto i caly
   czas mial trzysta pikselow niezaleznie od kolumny. */
/* Rysunek wraca obok naglowka. Miesci sie tu, bo uklad jest teraz
   eliptyczny: wezszy i wyzszy, wiec lepiej wykorzystuje waska kolumne. */
/* Rysunek niesie wlasny oddech u dolu, wiec sekcja nie potrzebuje tu
   pelnego odstepu. */
.about-head{ padding-bottom:calc(var(--sec) * .5); }

.about-head__in{
  display:grid; gap:clamp(26px, 3.2vw, 52px);
  grid-template-columns:minmax(0, 44fr) minmax(0, 56fr);
  align-items:start;
}
/* Na waskich ekranach dwie kolumny daja rysunek szerokosci trzystu
   pikseli, w ktorym podpisy maja szesc. Uklad schodzi wtedy w pion. */
@media (max-width:1000px){
  .about-head__in{ grid-template-columns:1fr; }
  .about-head__copy{ max-width:72ch; }
  .dg--szeroki{ max-width:100%; }
}
.about-head__copy .lede{ margin-top:var(--gap-h); }

/* Pasek sektorów. Jedzie w pętli i sam oddziela sekcje. Dwie identyczne
   listy: kiedy pierwsza zjeżdża w lewo, druga wchodzi na jej miejsce,
   więc szew jest niewidoczny. Wycięty z układu przez CSS, nie przez
   znaczniki, żeby bez arkusza został czytelną listą. */
.pasek{
  position:relative;
  overflow:hidden;
  background:#E9EDF6;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:clamp(14px, 1.6vw, 20px) 0;
  pointer-events:none;
  user-select:none;
}
.pasek::before,
.pasek::after{
  content:"";
  position:absolute; top:0; bottom:0; width:clamp(40px, 8vw, 120px);
  z-index:1; pointer-events:none;
}
.pasek::before{ left:0;  background:linear-gradient(90deg, #E9EDF6, rgba(233,237,246,0)); }
.pasek::after { right:0; background:linear-gradient(270deg, #E9EDF6, rgba(233,237,246,0)); }

.pasek__tor{
  display:flex; width:max-content;
  animation:pasek-jedzie 58s linear infinite;
}
/* Odstęp jest jedną wartością: między napisem a kreską i między kreską
   a następnym napisem. Dzięki temu rytm jest ten sam niezależnie od
   tego, jak długie jest słowo. */
.pasek__lista{
  --odstep:clamp(22px, 2.6vw, 40px);
  display:flex; align-items:center; gap:var(--odstep);
  margin:0; padding:0 0 0 var(--odstep); list-style:none;
  flex:0 0 auto;
}
.pasek__lista li{
  display:flex; align-items:center; gap:var(--odstep);
  font-family:var(--caps); font-size:clamp(11px, 1.05vw, 13px);
  font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(9,40,112,.62);
  white-space:nowrap;
}
/* Odstęp międzyliterowy dokleja się po ostatniej literze, więc bez tej
   korekty napis wyglądałby na zsunięty w lewo względem swojego pola. */
.pasek__lista li span{ margin-right:-.16em; }
.pasek__lista li::after{
  content:"";
  width:1px; height:13px; flex:0 0 auto;
  background:var(--navy-24);
}
@keyframes pasek-jedzie{
  from{ transform:translate3d(0, 0, 0); }
  to  { transform:translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
  .pasek__tor{ animation:none; }
  .pasek{ pointer-events:auto; overflow-x:auto; }
}

/* Gdzie stoimy: tytuł i akapit dochodzą do prawego marginesu strony,
   liczby stoją po lewej, a chmura sektorów leży pod wszystkim jako tło
   całej sekcji. Sekcja dostaje własną wysokość, bo chmura nie wnosi już
   nic do układu i sam tekst byłby dla niej za niski. */
/* Sekcja przycina swoje tlo: mapa ma ujemny margines, zeby dojsc do
   paska sektorow, i bez tego wychodzila na bezowa sekcje nad nim. */
/* Mgla przechodzi w papier sekcji ponizej, zeby mapa nie urywala sie
   na poziomej krawedzi tuz nad "Kim jestesmy". */
.stoimy{
  position:relative; overflow:hidden;
  background-image:linear-gradient(to bottom, var(--mist) 58%, var(--paper) 100%);
}
/* Papier narasta od dolu i zjada dol mapy, zeby kadr nie konczyl sie
   krawedzia tuz nad "Kim jestesmy". Warstwa idzie nad mapa, ale pod
   tytulem i proza, wiec tekst zostaje czytelny. */
.stoimy::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:clamp(90px, 13vw, 190px);
  background:linear-gradient(to bottom, rgba(250,248,244,0) 0%, var(--paper) 88%);
  pointer-events:none; z-index:1;
}
.stoimy__tytul, .stoimy__proza{ position:relative; z-index:2; }

.stoimy__in{
  display:grid;
  grid-template-columns:minmax(0, 52fr) minmax(0, 48fr);
  column-gap:clamp(26px, 3.4vw, 58px);
  row-gap:var(--gap-h);
  align-items:start;
}
/* Mapa zajmuje lewą kolumnę na całą wysokość, tytuł stoi obok jej góry,
   a proza pod tytułem, żeby pierwszy wiersz akapitu wypadł na wysokości
   Niderlandów. */
/* Mapa dochodzi do samej góry sekcji, żeby jej wygaszenie kończyło się
   na ostrej krawędzi paska sektorów, a nie w pustym polu pod nim. */
.mapa{
  grid-column:1; grid-row:1 / 3;
  margin:calc(-1 * var(--sec)) 0 0; align-self:start;
  position:relative; z-index:0;
}
.stoimy__tytul{ grid-column:2; grid-row:1; text-align:right; }
.stoimy__proza{ grid-column:2; grid-row:2; text-align:right; }
.stoimy__lede{ margin-left:auto; max-width:52ch; }

/* Podpisy wychodza poza viewBox, wiec SVG nie moze ich przycinac.
   Za pionowy wyciek odpowiada overflow na samej sekcji. */
.mapa svg{ display:block; width:100%; height:auto; overflow:visible; }
/* Wygaszenie na wszystkich czterech krawędziach, żeby kadr nie kończył
   się linią cięcia, tylko rozpływał w tle sekcji. */
/* Dwa wygaszenia na dwóch warstwach zamiast składania masek: obsługa
   mask-composite bywa różna, a zagnieżdżone <g> działa wszędzie tak samo.
   Pion jest długi u góry, żeby mapa zniknęła, zanim dojdzie do paska. */
.mapa__tlo{
  -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(90deg, rgba(0,0,0,0) 0%, #000 15%, #000 85%, rgba(0,0,0,0) 100%);
}
.mapa__tlo-v{
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 14%, #000 44%, #000 78%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 14%, #000 44%, #000 78%, rgba(0,0,0,0) 100%);
}
.mapa__tlo path{
  fill:rgba(9,40,112,.10);
  stroke:var(--mist); stroke-width:1.1;
}
.mapa__pl{ fill:var(--amber); }
.mapa__nl{ fill:var(--navy); }

.mapa__nic{ fill:none; stroke:var(--navy); stroke-width:1.1; opacity:.5; }
.mapa__kropka{ fill:var(--navy); }
.mapa__kropka--jasna{ fill:var(--paper); }
.mapa__opis text{
  font-family:var(--caps); font-size:11.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; fill:var(--ink-55);
}
.mapa__opis .mapa__kraj{
  font-size:19px; font-weight:400; letter-spacing:0;
  text-transform:none; fill:var(--navy);
}
.mapa__opis--pl text{ text-anchor:end; }

.zespol__cta{ margin:clamp(28px, 3.4vw, 48px) 0 0; }

.fakty-linia{
  margin:clamp(22px, 2.6vw, 34px) 0 0;
  display:flex; justify-content:flex-end;
}
.fakty-linia dt{
  font-family:var(--caps); font-size:10.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-55);
  line-height:1.4;
}
.fakty-linia dd{
  margin:8px 0 0;
  font-family:var(--display); font-weight:400;
  font-size:clamp(16px, 1.6vw, 21px); line-height:1.25; color:var(--navy);
}

@media (max-width:960px){
  .stoimy__in{ grid-template-columns:1fr; }
  .stoimy__tytul{ grid-column:1; grid-row:1; text-align:left; }
  .mapa{ grid-column:1; grid-row:2; }
  .stoimy__proza{ grid-column:1; grid-row:3; text-align:left; }
  .stoimy__lede{ margin-left:0; }
  .fakty-linia{ justify-content:flex-start; }
}
/* Zespół. Cała wizytówka jest odnośnikiem i unosi się w całości, więc
   nie trzeba trafiać w samo nazwisko. */
.zespol__row{
  margin-top:clamp(28px, 3.4vw, 48px);
  display:grid; gap:clamp(18px, 2.2vw, 30px);
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.osoba{
  position:relative;
  display:flex; gap:clamp(18px, 2.2vw, 30px); align-items:flex-start;
  padding:clamp(20px, 2.2vw, 30px);
  background:#FFFFFF; border:1px solid var(--line);
  color:inherit;
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.osoba:hover,
.osoba:focus-within{
  transform:translateY(-5px);
  border-color:rgba(251,154,5,.45);
  box-shadow:0 24px 46px -26px rgba(9,40,112,.45),
             0 3px 10px -6px rgba(9,40,112,.22);
}
/* Klikalne jest całe pudełko, ale odnośnikiem zostaje nazwisko: ikony
   muszą dać się kliknąć osobno, a odnośnik w odnośniku jest nieprawidłowy. */
.osoba__link::after{ content:""; position:absolute; inset:0; z-index:0; }
.osoba__link:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }
/* Gdzie :has() działa, obwódkę bierze całe pudełko, bo to ono jest celem.
   Bez :has() zostaje obwódka na samym nazwisku, nigdy jej brak. */
@supports selector(:has(*)){
  .osoba:has(.osoba__link:focus-visible){ outline:2px solid var(--amber); outline-offset:3px; }
  .osoba__link:focus-visible{ outline:none; }
}

.osoba__foto{
  flex:0 0 auto;
  width:clamp(92px, 10vw, 132px); height:clamp(92px, 10vw, 132px);
  border-radius:50%; overflow:hidden;
  background:var(--mist);
  display:flex; align-items:center; justify-content:center;
  transition:box-shadow var(--dur) var(--ease);
}
.osoba__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.osoba__ini{
  font-family:var(--display); font-size:clamp(26px, 2.6vw, 36px);
  color:var(--navy); opacity:.34; letter-spacing:.06em;
}
.osoba:hover .osoba__foto{ box-shadow:0 0 0 3px rgba(251,154,5,.45); }

.osoba__copy{ display:flex; flex-direction:column; min-width:0; }
.osoba__imie{
  font-family:var(--caps); font-size:clamp(13px, 1.25vw, 16px);
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  line-height:1.35; color:var(--navy);
  transition:color var(--dur) var(--ease);
}
.osoba:hover .osoba__imie,
.osoba:focus-within .osoba__imie{ color:var(--amber); }
.osoba__imie a{ color:inherit; }
.osoba__rola{
  margin-top:10px;
  font-size:14px; line-height:1.5; color:var(--ink-70);
}
/* Ikony leżą nad rozciągniętym odnośnikiem, więc mają własne cele. */
.osoba__ikony{
  position:relative; z-index:1;
  margin-top:16px; display:flex; gap:16px;
}
.osoba__ikony a{
  /* Znak ma 18px, cel 26px: kilka pikseli zapasu, żeby kursor nie
     wypadał z odnośnika na krawędzi glifu. */
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-55);
  transition:color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.osoba__ikony a:hover,
.osoba__ikony a:focus-visible{ color:var(--navy); transform:translateY(-2px); }
.osoba__ikony svg{ display:block; }

@media (max-width:820px){
  .zespol__row{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .osoba:hover, .osoba:focus-within{ transform:none; }
}

.about__not{ margin-top:clamp(20px, 2.4vw, 30px); max-width:74ch; }

/* Oświadczenie założyciela. */
/* Oswiadczenie po lewej, autor przy prawej krawedzi kolumny. */
.oswiadczenie__in{
  display:flex; gap:clamp(30px, 5vw, 90px);
  align-items:flex-start;
}
.oswiadczenie__foto{
  width:clamp(102px, 11vw, 153px); height:clamp(102px, 11vw, 153px);
  border-radius:50%; overflow:hidden; background:var(--mist);
  display:flex; align-items:center; justify-content:center;
}
.oswiadczenie__foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.oswiadczenie__imie{
  margin-top:clamp(16px, 1.8vw, 22px);
  font-size:clamp(20px, 2.2vw, 29px);
}
.oswiadczenie__rola{
  margin-top:12px; font-size:12.3px; line-height:1.5; color:var(--ink-70);
  max-width:34ch;
}
.oswiadczenie__linki{ margin-top:18px; display:flex; gap:16px; }
.oswiadczenie__linki a{
  width:26px; height:26px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--ink-55);
  transition:color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.oswiadczenie__linki a:hover,
.oswiadczenie__linki a:focus-visible{ color:var(--navy); transform:translateY(-2px); }
.oswiadczenie__linki svg{ display:block; }
/* Oswiadczenie stoi na tle strony, bez karty: sama typografia i powietrze
   dookola. */
.oswiadczenie__tresc{
  flex:0 1 auto; min-width:0; max-width:74ch;
  padding:clamp(8px, 1.2vw, 20px) 0 0 clamp(0px, 2.4vw, 44px);
}
/* margin-left:auto odsuwa blok do prawej krawedzi, niezaleznie od tego,
   ile miejsca zajal tekst. */
.oswiadczenie__kto{
  flex:0 0 auto; margin-left:auto; max-width:34ch;
  /* Blok zaczyna sie 100 px nizej niz tekst, zeby nie stal z nim w rzedzie. */
  margin-top:100px;
}
/* Oswiadczenie jest cytatem, nie akapitem: idzie krojem tytulowym,
   wiekszym stopniem, z podpisem wersalikami pod spodem. */
.oswiadczenie__cytat{
  margin:0; max-width:62ch;
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px, 1.8vw, 23px); line-height:1.45;
  letter-spacing:-.01em; color:var(--ink);
}
/* Cudzyslowy sa ozdoba skladu, nie trescia, wiec ida z CSS. Otwierajacy
   stoi w kolumnie tekstu, nie przed nia: przy tym stopniu pisma wystajacy
   znak bardziej rozbijal lewa krawedz, niz ja prostowal. */
.oswiadczenie__cytat p{ margin:0; }
.oswiadczenie__cytat p:first-of-type::before{ content:"\201E"; }
.oswiadczenie__cytat p:last-of-type::after{ content:"\201D"; }
.oswiadczenie__cytat p + p{ margin-top:clamp(14px, 1.6vw, 22px); }
.oswiadczenie__cytat footer{
  margin-top:clamp(20px, 2.4vw, 30px);
  font-family:var(--caps); font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-55);
}
/* Ponizej tysiaca pikseli dwie kolumny scieraja tekst do kilkudziesieciu
   znakow, wiec blok autora schodzi pod oswiadczenie. */
@media (max-width:1000px){
  .oswiadczenie__in{ flex-direction:column; }
  .oswiadczenie__tresc{ padding-left:0; }
  .oswiadczenie__kto{ margin-left:0; margin-top:0; }
}

/* Wezwanie na raport siedzi w granatowej sekcji, pod "Porozmawiajmy",
   żeby nie budować drugiej sekcji tylko dla jednego przycisku. */
.contact__raport{ margin-top:clamp(22px, 2.6vw, 32px); }
.btn--on-ink{
  background:transparent; color:var(--paper);
  border-color:rgba(250,248,244,.34);
}
.btn--on-ink:hover,
.btn--on-ink:focus-visible{
  background:#FFFFFF; color:var(--navy); border-color:#FFFFFF;
  box-shadow:0 1px 7px rgba(0,0,0,.22);
}
.btn--on-ink:hover .arw{ transform:translateX(3px); }


/* ==========================================================================
   DIAGRAM, JEDEN PUNKT ODPOWIEDZIALNOŚCI
   ========================================================================== */

/* Drzewo wg szkicu Maxa: pięciokąt właściciela, romb GDI i sześć kafli
   rozrzuconych pod spodem. Ramiona są łamane, o różnej długości, więc
   układ jest geometryczny, ale nie sztywny. Bez karty pod spodem. */
/* width:100% jest tu konieczne. Element siatki z marginesem auto po obu
   stronach przestaje sie rozciagac i kurczy do tresci, a wtedy SVG bierze
   swoja domyslna szerokosc trzystu pikseli, niezaleznie od max-width.
   Dlatego rysunek byl caly czas maly mimo podnoszenia limitu. */
.dg{ width:100%; margin:0 auto; max-width:700px; }
/* Rysunek ma wlasna animacje rysowania, wiec wspolne przesuniecie o 28px
   jest tu zbedne i tylko rozjezdza go z naglowkiem obok. */
.js .reveal.dg{ transform:none; }
/* Rysunek celowo wystaje z kolumny, ale tylko w prawo: dosuniety do jej
   lewej krawedzi, wiec nigdy nie wchodzi na tekst. Nadmiar ograniczony do
   62px, zeby na weszych ekranach nie wyjechal poza strone. */
.dg--szeroki{
  /* Nadmiar liczony z marginesu strony, nie na sztywno: przy weszym
     oknie padding maleje i staly zapas wypychal rysunek poza ekran. */
  width:min(740px, calc(100% + var(--pad) - 16px));
  max-width:none;
  margin-left:0; margin-right:auto;
}
.dg svg{ display:block; width:100%; height:auto; overflow:visible; }

.dg__pien,
.dg__galaz{
  fill:none;
  stroke:var(--navy-24);
  stroke-width:1.4;
  stroke-linejoin:round;
}
/* Siec powiazan miedzy kontrahentami. To jest teza rysunku: kazda z tych
   linii to osobna rozmowa, ktora ktos musi prowadzic. Cieplejszy odcien
   i cienka kreska, zeby czytala sie jako warstwa osobna od promieni
   wychodzacych z GDI. */
.dg__siec{
  fill:none;
  stroke:rgba(181,144,78,.55);
  stroke-width:1.1;
  stroke-dasharray:5 4;
}

/* Wlasciciel i GDI sa brylami, kontrahenci obrysem. Bez tych wypelnien
   SVG rysuje wszystko na czarno. */
.dg__gora polygon{ fill:var(--navy); }
/* Srodek jest teraz jasny, bo niesie pelne logo w oryginalnych kolorach.
   Wlasciciel zostaje bryla granatowa, wiec hierarchia sie nie zaciera. */
.dg__rdzen circle{ fill:#FFFFFF; stroke:var(--navy); stroke-width:1.6; }
.dg__gora text{
  fill:var(--navy);
  font-family:var(--caps); font-size:13px; font-weight:600;
  letter-spacing:.16em; text-anchor:middle;
}
.dg__lisc rect{
  fill:#FFFFFF;
  stroke:var(--navy-24); stroke-width:1;
}

/* Sylwetka przy wlascicielu i przy kazdym kontrahencie. */
.dg__osoba{ fill:var(--navy); opacity:.62; }
.dg__osoba--jasna{ fill:var(--paper); opacity:1; }

/* Podwykonawcy: mniejsze kafle, wyraznie bledsze, zeby czytaly sie jako
   trzeci plan, a nie kolejny rzad rownorzednych partnerow. */
.dg__pod-grupa{ opacity:.45; }
.dg__podnic{ fill:none; stroke:var(--navy-24); stroke-width:1; }
.dg__podlisc rect{
  fill:#FFFFFF;
  stroke:var(--navy-24); stroke-width:1;
}
.dg__podlisc text{
  fill:var(--navy);
  font-family:var(--caps); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-anchor:middle;
}

.dg__lisc text{
  fill:var(--navy);
  font-family:var(--caps); font-size:13.5px; font-weight:600;
  letter-spacing:.1em; text-anchor:start;
}

/* Budowa idzie tak, jak się czyta: właściciel, pień, GDI, ramiona, kafle. */
.js .reveal.dg .dg__pien,
.js .reveal.dg .dg__galaz{ stroke-dasharray:1; stroke-dashoffset:1; }
.js .reveal.dg.is-in .dg__pien{
  stroke-dashoffset:0; transition:stroke-dashoffset .45s var(--ease) .25s;
}
.js .reveal.dg.is-in .dg__galaz{
  stroke-dashoffset:0; transition:stroke-dashoffset .8s var(--ease) .8s;
}
.js .reveal.dg .dg__rdzen,
.js .reveal.dg .dg__lisc,
.js .reveal.dg .dg__gora{ opacity:0; }
.js .reveal.dg.is-in .dg__gora{ opacity:1; transition:opacity .4s var(--ease); }
.js .reveal.dg.is-in .dg__rdzen{ opacity:1; transition:opacity .4s var(--ease) .7s; }
.js .reveal.dg.is-in .dg__lisc{ opacity:1; transition:opacity .45s var(--ease) 1.5s; }
/* Siec powiazan pojawia sie na koncu: najpierw porzadek, potem to,
   co ten porzadek zastepuje. */
.js .reveal.dg .dg__siec-grupa{ opacity:0; }
.js .reveal.dg.is-in .dg__siec-grupa{ opacity:1; transition:opacity 1s var(--ease) 1.6s; }
.js .reveal.dg .dg__pod-grupa{ opacity:0; }
.js .reveal.dg.is-in .dg__pod-grupa{ opacity:.45; transition:opacity 1s var(--ease) 2.1s; }

@media (prefers-reduced-motion: reduce){
  .js .reveal.dg .dg__pien,
  .js .reveal.dg .dg__galaz{ stroke-dasharray:none; stroke-dashoffset:0; }
  .js .reveal.dg .dg__rdzen,
  .js .reveal.dg .dg__lisc,
  .js .reveal.dg .dg__siec-grupa,
  .js .reveal.dg .dg__pod-grupa,
  .js .reveal.dg .dg__gora{ opacity:1; }
}
.field--zgoda label{
  display:grid; grid-template-columns:auto 1fr; gap:12px;
  align-items:start; cursor:pointer;
}
.field--zgoda input{
  /* Domyslny kwadracik jest za maly i nie da sie go pomalowac, wiec
     rysujemy wlasny, ale zostawiamy prawdziwy checkbox pod spodem. */
  appearance:none; -webkit-appearance:none;
  width:20px; height:20px; margin:1px 0 0;
  border:1px solid var(--navy-24); background:#FFFFFF;
  border-radius:2px; cursor:pointer; flex:0 0 auto;
  display:grid; place-content:center;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.field--zgoda input::before{
  content:""; width:10px; height:10px;
  transform:scale(0); transform-origin:center;
  background:var(--navy);
  clip-path:polygon(14% 47%, 0 61%, 40% 100%, 100% 22%, 85% 8%, 38% 70%);
  transition:transform .18s var(--ease);
}
.field--zgoda input:checked{ border-color:var(--navy); }
.field--zgoda input:checked::before{ transform:scale(1); }
.field--zgoda input:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }
.field--zgoda span{
  font-size:13.5px; line-height:1.55; color:var(--ink-70);
}
.field--zgoda a{ color:var(--navy); border-bottom:1px solid var(--navy-24); }
.field--zgoda a:hover{ color:var(--amber); border-color:var(--amber); }

/* Ten sam element na granacie. */
.on-ink .field--zgoda input{
  background:transparent; border-color:rgba(250,248,244,.34);
}
.on-ink .field--zgoda input::before{ background:var(--amber); }
.on-ink .field--zgoda input:checked{ border-color:var(--amber); }
.on-ink .field--zgoda span{ color:rgba(250,248,244,.78); }
.on-ink .field--zgoda a{ color:var(--paper-70); border-bottom-color:rgba(250,248,244,.28); }
.on-ink .field--zgoda a:hover{ color:var(--amber); border-color:var(--amber); }

/* Nagłówek podstrony wyśrodkowany, tam gdzie nie ma nic obok niego. */
.page-head--srodek .wrap{ text-align:center; }
.page-head--srodek .page-head__title{ margin-inline:auto; }
.page-head--srodek .page-head__lede{ margin-inline:auto; }


/* ==========================================================================
   PASY, ZDJECIE CIETE PO SKOSIE
   ========================================================================== */

/* Motyw z materialow GDI: skosne pasy w rogu, rozdzielone przerwami tla.
   Zamiast koloru niosa zdjecie. Dwa zagniezdzone elementy zamiast skladania
   masek: jeden trzyma pasy, drugi wygaszenie ku srodkowi strony, bo
   obsluga mask-composite bywa rozna. */
/* Zdjecie jest tlem samej sekcji, nie osobna warstwa nad nia. Tlo elementu
   zawsze pokrywa caly jego prostokat, wiec nie ma czego zwezic ani przesunac,
   niezaleznie od tego, co stoi wyzej w drzewie. Miekkie gorne i dolne
   krawedzie robi gradient papieru, ktory idzie w komplecie ze zdjeciem, wiec
   nie potrzeba tu maski. */
/* Zdjecie jest tlem samej sekcji, tak jak bg-mist czy bg-paper. Zadnego
   dodatkowego elementu, zadnych ujemnych marginesow, zadnych jednostek
   liczonych z okna i zadnego skryptu. Sekcja to zwykly blok o pelnej
   szerokosci strony, dokladnie ten sam mechanizm, ktory na tej stronie
   od poczatku dziala poprawnie przy kolorach tla.
   Biala mgla idzie w tej samej deklaracji, wiec robi tez miekkie
   krawedzie u gory i u dolu. */
.sekcja-foto{
  background-color:var(--paper);
  background-image:
    linear-gradient(to bottom,
      var(--paper) 0%,
      rgba(250,248,244,.88) 9%,
      rgba(250,248,244,.80) 46%,
      rgba(250,248,244,.90) 86%,
      var(--paper) 100%),
    var(--foto);
  background-size:auto, cover;
  background-position:center, center;
  background-repeat:repeat, no-repeat;
}

/* Zamkniecie strony projektu: tytul urosl, a zamiast przycisku jest
   strzalka, ktora pokazuje, ze formularz jest tuz nizej. */
/* Ograniczenie idzie na sam naglowek, nie na .wrap: .proj__koniec siedzi
   na tym samym elemencie co .wrap, wiec max-width scialoby cala kolumne
   razem z paddingiem sekcji. */
.proj__koniec{ text-align:center; }
.proj__koniec .h2{
  max-width:18ch; margin-inline:auto;
  font-size:clamp(30px, 4.2vw, 56px);
  line-height:1.08;
  letter-spacing:-.02em;
}
.proj__koniec .lede{ margin-top:var(--gap-h); max-width:52ch; margin-inline:auto; }
.proj__strzalka{
  overflow:hidden;
  margin-top:clamp(26px, 3.4vw, 44px);
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  color:var(--navy);
  border:1px solid var(--navy-24); border-radius:50%;
  transition:transform var(--dur) var(--ease),
             background var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.proj__strzalka svg{ display:block; }
.proj__strzalka:hover,
.proj__strzalka:focus-visible{
  background:var(--navy); border-color:var(--navy); color:var(--paper);
  transform:translateY(4px);
}
/* W spoczynku strzalka stoi. Pod kursorem sam grot splywa w dol w petli,
   ciagle od nowa od gory, zeby prowadzil oko do formularza. */
@keyframes proj-splyw{
  0%   { transform:translateY(-30px); opacity:0; }
  26%  { transform:translateY(0);     opacity:1; }
  56%  { transform:translateY(0);     opacity:1; }
  100% { transform:translateY(30px);  opacity:0; }
}
.proj__strzalka:hover svg,
.proj__strzalka:focus-visible svg{
  animation:proj-splyw 1.15s var(--ease) infinite;
}
@media (prefers-reduced-motion: reduce){
  .proj__strzalka:hover svg,
  .proj__strzalka:focus-visible svg{ animation:none; }
  .proj__strzalka:hover{ transform:none; }
}

/* Zdjecie w hero LeapR stoi bez bialej plyty pod spodem. */
.proj__shot--bez-tla img{ background:none; padding:0; border:0; }

/* Model 3D w hero Szerokiej. */
.proj__model{ margin:0; }
/* Zamiast ramki dwie maski jedna w drugiej: pionowa na zewnatrz, pozioma
   w srodku. mask-composite bywa zawodne, wiec zagniezdzenie zamiast niego. */
.proj__model .ramka{
  position:relative;
  width:100%; aspect-ratio:4 / 3;
  /* Dol wygasa krotko, zeby przyciski pauzy i powtorki stojace pod bryla
     zostaly pelne. Gora ma wiecej miejsca, bo tam nic nie stoi. */
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 10%, #000 98%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 10%, #000 98%, rgba(0,0,0,0) 100%);
}
.proj__model .ramka__in{
  position:absolute; inset:0;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 9%, #000 91%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, #000 9%, #000 91%, rgba(0,0,0,0) 100%);
}

/* Postep animacji: wlos przez cala szerokosc, pod modelem. Gasnie, kiedy
   model skonczy sie budowac, zeby nie zostawiac kreski w naglowku. */
.proj__linia{
  position:relative; height:2px; margin-top:clamp(10px, 1.4vw, 18px);
  background:var(--navy-12);
  transition:opacity .7s var(--ease);
}
.proj__linia.znika{ opacity:0; }
.proj__linia span{
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--navy-24);
}
.proj__model iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; display:block;
  opacity:0; transition:opacity .8s var(--ease);
}
.proj__model iframe.is-in{ opacity:1; }
.proj__model figcaption{ margin-top:10px; font-size:12.5px; color:var(--ink-55); }
@media (prefers-reduced-motion: reduce){
  .proj__model iframe{ transition:none; opacity:1; }
}

/* Szeroki pas ze zdjeciem miedzy sekcjami projektu. */
.proj__pas{ margin:0; position:relative; }
.proj__pas img{
  display:block; width:100%; height:clamp(220px, 34vw, 420px);
  object-fit:cover;
}
.proj__pas figcaption{
  margin-top:10px; font-size:12.5px; color:var(--ink-55);
}


/* ====================================================================
   TELEFON
   Nie osobny arkusz i nie osobny motyw: te same znaczniki, inne
   decyzje. Cztery sprawy po kolei: ciezar, przepelnienie w poziomie,
   czytelnosc pisma i rysunki, ktore nie mieszcza sie w 390 px.
   ==================================================================== */

/* Angielska nota na stronach prawnych: dokumenty zostaja po polsku, bo
   to one wiaza. */
.prawo__uwaga{
  margin:clamp(18px, 2.2vw, 28px) 0 clamp(26px, 3vw, 40px);
  padding:clamp(14px, 1.6vw, 20px);
  border-left:2px solid var(--amber);
  background:var(--paper);
  font-size:14px; line-height:1.6; color:var(--ink-70);
  max-width:68ch;
}

/* W rozwinietym menu przelacznik jezyka stoi w rzedzie z pozycjami, wiec
   przyciagniecie do prawej krawedzi nie ma tam sensu. */
@media (max-width:900px){
  .nav__links > .nav__jezyk{ margin-left:0; }
}

/* 1. CIEZAR -------------------------------------------------------- */
/* Glob i model 3D to razem ponad 2 MB i dwa konteksty WebGL. Na
   telefonie zostaja po nich nieruchome kadry, wyciete z tych samych
   scen, wiec kadr zgadza sie z tym, co widac na monitorze. Skrypt
   pilnuje tego samego progu, wiec ramki nawet sie nie ladują. */
.projekty__kadr,
.proj__kadr{ display:none; }

@media (max-width:820px){
  .projects__bg iframe,
  .proj__model iframe{ display:none; }

  .projekty__kadr,
  .proj__kadr{
    display:block; position:absolute; inset:0;
    background-image:var(--kadr);
    background-size:cover; background-position:center;
    background-repeat:no-repeat;
  }
  /* Wlos pokazywal postep budowania bryly. Bez animacji nie ma czego
     pokazywac. */
  .proj__linia{ display:none; }
}

/* 2. PRZEPELNIENIE ------------------------------------------------- */
/* Pole formularza niesie wlasna szerokosc domyslna, okolo 177 px.
   Dwa obok siebie rozpychaly siatke do 375 px w kolumnie majacej 350,
   i cala strona bujala sie na boki. */
input, select, textarea, button{ min-width:0; max-width:100%; }

@media (max-width:560px){
  .field--pair{ grid-template-columns:1fr; }
}

/* Dlugie polskie slowa w naglowkach wystawaly poza kolumne. Lamiemy je
   dopiero na telefonie, na monitorze nie ma takiej potrzeby. */
@media (max-width:700px){
  .h1, .h2, .h3, h1, h2, h3{ overflow-wrap:break-word; }
}

/* 3. CZYTELNOSC ---------------------------------------------------- */
/* Stopnie ponizej 11 px sa do przyjecia na monitorze z bliska.
   W sloncu, na telefonie trzymanym w reku, nie sa. */
@media (max-width:760px){
  .doc__chip{ font-size:11px; }
  .doc__lab{ font-size:10.5px; }
  .footer__legal{ font-size:11.5px; }
  /* Nota prawna miala miescic sie w jednym wierszu pod kaflami. Na
     telefonie i tak sie zawija, wiec nie ma po co jej sciskac. */
  .facts__note{ font-size:11px; line-height:1.55; }
  /* Palec potrzebuje wiekszego celu niz kursor. */
  .oswiadczenie__linki a,
  .osoba__ikony a{ width:44px; height:44px; margin:-9px; }
}

/* Przelacznik widoku. Na monitorze nie ma go po co pokazywac, na
   telefonie stoi w stopce, ostatni w kolejnosci. W widoku pelnym musi
   zostac widoczny, inaczej nie da sie wrocic. */
.footer__widok{ display:none; }
@media (max-width:820px){ .footer__widok{ display:block; } }
html.widok-pelny .footer__widok{ display:block; }
.widok{
  appearance:none; background:none; border:0; padding:0;
  font:inherit; color:inherit; text-decoration:underline;
  text-underline-offset:3px; cursor:pointer;
}
.widok:hover{ color:var(--amber); }

/* ==========================================================================
   DOLACZ DO ZESPOLU
   Jedna strona, jedno zadanie. Waska kolumna, zeby formularz czytalo sie
   jak list, a nie jak tabela.
   ========================================================================== */
/* Pelna szerokosc strony. Dwanascie kafli specjalizacji i pola w parach
   potrzebuja miejsca, w waskiej kolumnie wszystko lamalo sie po kilka razy.
   Bloki tekstowe maja nizej wlasne miary, wiec nie rozciagaja sie razem
   z formularzem. */
.dolacz{ max-width:1300px; }

/* Naglowek strony czyta sie jako jeden blok, wiec tytul i wstep stoja na
   srodku. Sam formularz zostaje przy lewej, bo etykiety pol musza zaczynac
   sie w jednej linii. */
.dolacz .page-head__title,
.dolacz__lede{ text-align:center; margin-inline:auto; }
.dolacz .page-head__title{ max-width:18ch; }
/* Jeden akapit zamiast dwoch, wiec i miara jedna: 250 px szersza niz
   poprzednia, zeby zdania nie lamaly sie co kilka slow. Pelny atrament,
   bo to teraz caly wstep, a nie podpis pod tytulem. */
.dolacz__lede{
  max-width:806px;
  margin-bottom:clamp(30px, 4vw, 46px);
  color:var(--ink);
}
/* .form ma globalne max-width:520px, ustawione pod waski formularz
   kontaktowy. Tutaj je zdejmujemy, inaczej szersza kolumna nic nie daje. */
.dolacz__form{ margin-top:0; text-align:left; max-width:none; }
.dolacz__form textarea{ resize:vertical; min-height:92px; line-height:1.55; }
.dolacz__form textarea:focus{ outline:none; border-bottom-color:var(--amber); }
.dolacz__form textarea.is-pelny{ border-bottom-color:var(--czerwien); }

/* Przy pelnej szerokosci formularz idzie w dwie kolumny: e-mail obok
   telefonu, a bloki, ktore musza byc czytane w calosci, biegna przez oba.
   Rozciaganie jednego pola na 1150 px wygladaloby gorzej niz ciasnota. */
@media (min-width:900px){
  .dolacz__form{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:clamp(24px, 3vw, 48px);
  }
  .dolacz__form > .form__hp,
  .dolacz__form > .field--pair,
  .dolacz__form > .spec,
  .dolacz__form > .field--zgoda,
  .dolacz__form > .field--wiadomosc,
  .dolacz__form > .form__foot,
  .dolacz__form > .form__ack{ grid-column:1 / -1; }
}

.field__pod{
  margin:8px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-55);
  transition:color var(--dur) var(--ease);
}
.field__pod.is-malo{ color:var(--ink-70); }
.field__pod.is-ok{ color:#2E7D4F; }

.field__opc{
  font-family:var(--sans); font-size:11.5px; font-weight:400;
  letter-spacing:0; text-transform:none; color:var(--ink-40);
}

/* Telefon: kierunkowy i numer w jednym wierszu, wybor waski, numer bierze
   reszte miejsca. */
.tel{ display:flex; gap:14px; align-items:end; }
.tel__kraj,
.tel__numer{ font-family:var(--sans); font-size:16px; line-height:normal; }
/* Systemowy wybor rysuje wlasne pudelko z wlasna wysokoscia, wiec siedzial
   wyzej niz numer obok. Zdjety do tego samego podkreslenia co reszta pol,
   ze strzalka z CSS, zeby oba teksty staly na jednej linii pisma. */
.tel__kraj{
  flex:0 0 auto; width:auto;
  -webkit-appearance:none; appearance:none;
  color:var(--ink); background-color:transparent;
  border:0; border-bottom:1px solid var(--navy-24); border-radius:0;
  padding:10px 22px 10px 0; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23172036' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1px center;
  background-size:10px 6px;
  transition:border-color var(--dur) var(--ease);
}
.tel__kraj:focus{ outline:none; border-bottom-color:var(--amber); }
.tel__kraj:focus-visible{ outline:none; border-bottom-color:var(--amber); }
.tel__numer{ flex:1 1 auto; min-width:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Specjalizacja: lista obszarow do zaznaczenia, najwyzej dwa. */
.spec{ border:0; padding:0; margin:0; }
.spec__tytul{
  padding:0; font-family:var(--caps); font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-55);
}
.spec__pod{ margin-top:6px; }
.spec__lista{
  margin-top:12px; display:flex; flex-wrap:wrap; gap:8px;
}
.spec__opcja{ position:relative; }
.spec__opcja input{
  position:absolute; opacity:0; width:0; height:0;
}
.spec__opcja span{
  display:inline-block; cursor:pointer;
  padding:9px 14px; border:1px solid var(--line); border-radius:2px;
  background:#FFFFFF; font-size:13.5px; color:var(--ink-70);
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease),
             background var(--dur) var(--ease);
}
.spec__opcja span:hover{ border-color:var(--navy-24); color:var(--navy); }
.spec__opcja input:checked + span{
  border-color:var(--navy); color:var(--navy); background:var(--mist);
}
.spec__opcja input:focus-visible + span{
  outline:2px solid var(--amber); outline-offset:2px;
}
.spec__opcja.is-zajete span{
  opacity:.42; cursor:default; border-color:var(--line); color:var(--ink-40);
}

/* Pole, ktore zatrzymalo wysylke, dostaje znacznik, nie tylko komunikat. */
.form input.is-err,
.form textarea.is-err,
.form select.is-err{ border-color:var(--amber); }

/* 5. UKLAD SEKCJI NA TELEFONIE -------------------------------------- */
/* Wszystko w kolumnie jest najlatwiejsze i najgorsze: ekran rosnie w
   nieskonczonosc, a czytelnik traci obraz calosci. Ponizej to samo, co na
   monitorze, tylko ciasniej. */

/* Cztery kroki procesu w siatce 2x2 zamiast czterech pelnych wierszy. */
@media (max-width:560px){
  .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .step{ padding:16px 14px 18px 0; }
  .step__no{ font-size:11px; }
}

/* Trzy kierunki zostaja obok siebie, panel otwiera sie jeden na raz i
   idzie przez cala szerokosc pod nimi. */
@media (max-width:820px){
  .dirs__row{
    grid-template-columns:repeat(3, minmax(0,1fr));
    grid-template-rows:auto auto;
  }
  .dirs__item{ grid-row:1; grid-column:var(--gc); }
  .dirs__item + .dirs__item{ border-left:1px solid var(--line); border-top:0; }
  .dirs__more{
    grid-row:2; grid-column:1 / -1;
    max-height:0; opacity:0;
    padding:0 clamp(14px, 3vw, 22px);
    border-top-color:transparent;
  }
  .dirs__row[data-open="zachowac"] .dirs__more[data-k="zachowac"],
  .dirs__row[data-open="rozwinac"] .dirs__more[data-k="rozwinac"],
  .dirs__row[data-open="sprzedac"] .dirs__more[data-k="sprzedac"]{
    max-height:520px; opacity:1;
    padding:clamp(16px, 4vw, 24px) clamp(14px, 3vw, 22px);
    border-top-color:var(--dc);
  }
}
@media (max-width:460px){
  .dirs__item{ padding-left:6px; padding-right:6px; font-size:13px; }
  .dirs__dot{ margin-bottom:10px; }
}

/* Projekty na telefonie: bez globu i bez zdjec, sama tresc kart.
   Glob zajmowal pol ekranu i nic nie wnosil, skoro pinow i tak nie da sie
   wygodnie trafic palcem. Karta jest otwarta od razu, przelacza sie ja
   zakladkami. */
@media (max-width:820px){
  .projects__bg,
  .projects__veil{ display:none; }
  .projects__panel{ opacity:1; transform:none; pointer-events:auto; }
  .projects__hint{ display:none; }

  /* Zdjecie projektu znika, zostaje kolumna tekstu na pelna szerokosc.
     Przypis spod zdjecia schodzi wtedy pod tekst, zeby nie wisial nad karta. */
  .pcard__img{ display:none; }
  .pcard__foto{ order:2; }
  .pcard__przypis{ margin-top:12px; }
  .pswap,
  .pswap.is-wide{ grid-template-columns:1fr; gap:0; }

  .projects{ min-height:0; padding-block:clamp(28px, 7vw, 48px); }
}

/* Drzewko kontrahentow na telefonie sie nie sklada. Zamiast zlego rysunku
   lepiej zaden: tresc sekcji zostaje. */
@media (max-width:760px){
  .dg{ display:none; }
}

/* Mapa schodzi do roli tla sekcji: mala, przygaszona, pod tekstem. */
@media (max-width:1000px){
  .stoimy__in{ position:relative; }
  /* Wyzsza specyficznosc niz .js .reveal, inaczej mapa zostaje na zerze. */
  .js .reveal.mapa,
  .mapa{
    position:absolute; inset:0; margin:0;
    opacity:.28; transform:none; pointer-events:none; z-index:0;
    overflow:hidden;
  }
  /* preserveAspectRatio domyslnie wpisuje rysunek w ramke i centruje, wiec
     mapa dopasowuje sie do sekcji, nawet jesli wychodzi mala. */
  .mapa svg{ width:100%; height:100%; min-width:0; max-width:none; }
  .stoimy__tytul, .stoimy__proza{ position:relative; z-index:2; }
}

/* 4. RYSUNKI ------------------------------------------------------- */
/* Drzewko i mapa maja teraz wlasne reguly wyzej: drzewko znika, mapa
   schodzi do roli tla. Przewijanie w poziomie nie jest juz potrzebne. */

/* ==========================================================================
   TELEFON (do 820 px). Wszystko ponizej dotyczy tylko wersji na telefon,
   strona na komputerze zostaje nietknieta.
   ========================================================================== */
@media (max-width:820px){
  /* Jak mozemy pomoc: strzalki stoja pod czterema etapami, nad tytulem
     etapu, czyli tam, gdzie palec i tak jest po wyborze etapu. */
  .process--inline{ display:flex; flex-direction:column; }
  .process--inline > .process__head{ order:1; }
  .process--inline > .steps{ order:2; }
  .process--inline > .pnav--foot{ order:3; margin-top:18px; }
  .process--inline > .panel{ order:4; padding-top:22px; }

  /* Analiza nieruchomosci: raport schodzi z dolu sekcji do jej tla,
     przygaszony, zeby formularz byl w pelni czytelny. Przy podmianie
     obrazka podbij numer ?v= ponizej. */
  .report .doc-okno{ display:none; }
  .report::before{
    content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    /* 104%, zeby brzegi strony raportu wyszly poza ekran. */
    background:url("../img/raport-przyklad.webp?v=7.9.4") center 3% / 104% auto no-repeat;
    opacity:.10;
    -webkit-mask-image:linear-gradient(180deg, #000 50%, transparent 90%);
            mask-image:linear-gradient(180deg, #000 50%, transparent 90%);
  }
  /* Napisy w tej sekcji: kontrast w gore o polowe. Kazdy szary odcien
     przechodzi o polowe blizej pelnej czerni, tak samo linie pol. */
  .report .lede,
  .report .field label,
  .report .legend,
  .report .field--zgoda span,
  .report .form__note{ color:rgba(23, 32, 54, .85); }
  .report .field input::placeholder{ color:rgba(23, 32, 54, .70); }
  .report .field input:not(:focus){ border-bottom-color:rgba(9, 40, 112, .62); }
  .report .choice span{ border-color:rgba(9, 40, 112, .62); }

  /* Przejscie na gorze sekcji projektow siega na komputerze 90 px w gore,
     nad glob. Na telefonie globu nie ma, a to siegniecie zaslanialo dol
     przycisku "Sprawdz potencjal" w sekcji wyzej. */
  .projects::before{ top:0; }

  /* Strony projektow: bez modelu hotelu i bez grafiki telefonu LeapR. */
  .proj__model,
  .proj__shot--bez-tla{ display:none; }
}