/* ==========================================================================
   Sztopkanel — stylesheet (the only CSS file of the site)
   Order: design tokens → base and components → page sections →
   tablet / phone overrides → CTA welding dashes → mobile contact bar.
   Breakpoints: desktop >= 1200px, tablet 810px–1199px, phone <= 809px.
   ========================================================================== */

/* ==========================================================================
   Design tokens — single source of truth: change a value here and every
   page follows
   ========================================================================== */

/* ---------- Font files ---------- */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-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: "Geist";
  src: url("../fonts/geist-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: "Geist Mono";
  src: url("../fonts/geistmono-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: "Geist Mono";
  src: url("../fonts/geistmono-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: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* Metric-matched fallbacks so the layout does not jump while fonts load */
@font-face { font-family: "Geist Fallback"; src: local("Arial"); ascent-override: 94.47%; descent-override: 27.73%; line-gap-override: 0%; size-adjust: 106.39%; }
@font-face { font-family: "Switzer Fallback"; src: local("Arial"); ascent-override: 96.67%; descent-override: 24.66%; line-gap-override: 8.88%; size-adjust: 101.38%; }

/* ---------- Tokens ---------- */

:root {
  /* Colors: brand (black, white and one accent grey) */
  --c-dark: #000;
  --c-dark-soft: #1e1e1f;
  --c-light: #fff;
  --c-light-soft: #c9c9c9;
  --c-accent: #dcdcdc;

  /* Colors: neutrals */
  --c-bg: #f5f5f5;
  --c-panel: #e9e9e9;
  --c-line: #c9c9c9;
  --c-line-soft: #e4e4e4;
  --c-ink: #000;
  --c-ink-soft: #1e1e1f;
  --c-muted: #666;
  --c-white: #fff;

  /* Colors: states, overlays and translucent tints */
  --c-light-hover: #e9e9e9;
  --c-dark-hover: #1e1e1f;
  --c-panel-hover: #dedede;
  --c-glass: rgba(255, 255, 255, .23);
  --c-glass-hover: rgba(255, 255, 255, .32);
  --c-tooltip: rgba(232, 232, 232, .75);
  --c-dots-track: rgba(255, 255, 255, .1);
  --c-nav-edge: #eee;
  --c-field-line: rgba(255, 255, 255, .4);
  --c-placeholder: rgba(255, 255, 255, .5);
  --c-faq-line: rgba(0, 0, 0, .2);
  --c-divider-fade: #fcfcfc;

  /* Marks photos that still have to be supplied; remove together with .ph once all photos are in */
  --c-todo: #e5332a;

  /* Font families */
  --font-display: "Switzer", "Switzer Fallback", sans-serif;
  --font-text: "Geist", "Geist Fallback", sans-serif;
  --font-mono: "Geist Mono", monospace;

  /* Text styles: size, line height, letter spacing, weight */
  --text-display-size: 4rem;     --text-display-lh: 1.1;  --text-display-ls: -2.6px;   --text-display-weight: 400;
  --text-h2-size: 3rem;          --text-h2-lh: 1.2;       --text-h2-ls: -1.5px;      --text-h2-weight: 400;
  --text-h3-size: 2rem;          --text-h3-lh: 1.2;       --text-h3-ls: -.8px;        --text-h3-weight: 400;
  --text-h4-size: 1.25rem;       --text-h4-lh: 1.2;       --text-h4-ls: -.5px;       --text-h4-weight: 500;
  --text-stat-size: 4rem;        --text-stat-lh: 1.2;     --text-stat-ls: -.02em;    --text-stat-weight: 500;
  --text-title-size: 1.38rem;    --text-title-lh: 1.2;    --text-title-ls: -.0226em; --text-title-weight: 500;
  --text-body-size: .94rem;      --text-body-lh: 1.4;     --text-body-ls: 0;    --text-body-weight: 400;
  --text-mono-size: .81rem;      --text-mono-lh: 1.2;     --text-mono-ls: 0;         --text-mono-weight: 400;
  --text-mono-transform: uppercase;
  --text-menu-size: 32px;        --text-menu-lh: 1.2;     --text-menu-ls: -.04em;
  --text-input-size: 15px;       --text-input-lh: 1.4;
  --text-button-sm-size: 14px;   --text-button-sm-lh: 1.2; --text-button-sm-weight: 500;
  --text-clock-size: 13px;       --text-clock-lh: 13px;

  /* Corner radius */
  --radius-label: 0;
  --radius-card: 0;
  --radius-control: 3px;
  --radius-nav: 4px;
  --radius-icon: 18px;
  --radius-button-sm: 20px;
  --radius-page: 20px;
  --radius-button: 22px;
  --radius-pill: 50px;
  --radius-round: 50%;

  /* Component sizes */
  --nav-height: 60px;
  --nav-offset: 16px;
  --btn-pad-y: 10px;
  --btn-pad-x: 16px;
  --btn-circle: 38px;
  --label-pad: 8px;
  --page-aside-width: calc((100% - 16px) / 3);   /* one column of the 3-card grid (8px gaps), so side texts line up with the cards */

  /* Shadows, blur and image treatment */
  --shadow-nav-edge: inset 0 -1px 0 var(--c-nav-edge);
  --shadow-pin:
    rgba(0, 0, 0, .15) 0 .71px 2.97px -.63px,
    rgba(0, 0, 0, .14) 0 1.81px 7.59px -1.25px,
    rgba(0, 0, 0, .14) 0 3.62px 15.21px -1.88px,
    rgba(0, 0, 0, .13) 0 6.87px 28.84px -2.5px,
    rgba(0, 0, 0, .1) 0 13.65px 57.32px -3.13px,
    rgba(0, 0, 0, .05) 0 30px 126px -3.75px;
  --blur-sm: 3px;
  --blur-md: 5px;
  --img-dim-strong: .5;
  --img-dim: .6;
  --img-dim-soft: .65;
  --pattern-opacity: .5;

  /* Motion — one scale for the whole site (see design-notes/motion/03-motion-system.md) */
  --ease-out: cubic-bezier(.23, 1, .32, 1);       /* entrances, reveals, responses to the user */
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);   /* things that move or morph on screen */
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);    /* panels sliding from an edge */
  --ease: ease;                                   /* hover colour changes */
  --dur-press: 120ms;    /* :active feedback */
  --dur-hover: 200ms;    /* colour, background, opacity on hover */
  --dur-ui: 250ms;       /* small UI motion: arrow swap, underline, chevron, dropdown */
  --dur-panel: 400ms;    /* panels: mobile menu, contact bar, card overlay */
  --dur-reveal: 600ms;   /* entrances on scroll and on load */
  --dur-slide: 500ms;    /* slider step */
  --dur-line: 900ms;     /* hero H1: one line sliding up from under its edge */
  --reveal-distance: 16px;   /* the only entrance distance on the site */
  --stagger: 60ms;           /* step between items of one group */
  --stagger-max: 300ms;      /* a group never waits longer than this */
  --stagger-line: 120ms;     /* hero H1: step between lines */
}

/* Tablet */
@media (max-width: 1199px) {
  :root {
    --text-display-size: 3.8rem;
    --text-h2-size: 38px;
      --text-title-size: 20px;
    --text-title-ls: -.05em;
  }
}

/* Phone */
@media (max-width: 809px) {
  :root {
    --text-display-size: 3.04rem;
    --text-h2-size: 36px;
      --nav-offset: 12px;
  }
}

/* Small phone: long Polish words in display headings still fit on one line */
@media (max-width: 374px) {
  :root {
    --text-display-size: 2.6rem;
    --text-h2-size: 32px;
  }
}

/* ==========================================================================
   Base, layout and components
   ========================================================================== */

/* ---------- Base ---------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-text);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; font-weight: 400; }
ul { list-style: none; margin: 0; padding: 0; }

::selection { background: var(--c-ink); color: var(--c-white); }

/* Keyboard focus: one ring for the whole site, never animated. Dark and photo areas switch it to white. */
:focus-visible { outline: 2px solid var(--focus-ring, var(--c-ink)); outline-offset: 3px; }
.hero,
.image-head,
.banner,
.numbers__box--dark,
.project-card,
.site-footer,
.page-404 { --focus-ring: var(--c-white); }
/* Image and dark cards: the ring sits inside, where it contrasts with the card */
.project-card:focus-visible,
.focus-card:focus-visible,
.numbers__box:focus-visible { outline-offset: -6px; }
/* Moving focus is a keyboard action, repeated many times in a row: the focused element's
   states (arrows, underlines, card overlays) switch at once instead of animating */
:focus-visible,
:focus-visible *,
:focus-visible::before,
:focus-visible::after,
:focus-visible *::before,
:focus-visible *::after { transition-duration: 0s !important; transition-delay: 0s !important; }

/* Hover states that move or recolour things only exist for a real mouse
   (touch screens would keep them stuck after a tap); keyboard focus shows the same end state. */

.nowrap { white-space: nowrap; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

main { display: block; position: relative; overflow: clip; }

/* ---------- Typography ---------- */

.t-display { font-family: var(--font-display); font-size: var(--text-display-size); line-height: var(--text-display-lh); letter-spacing: var(--text-display-ls); font-weight: var(--text-display-weight); }
.t-h2      { font-family: var(--font-display); font-size: var(--text-h2-size);      line-height: var(--text-h2-lh);      letter-spacing: var(--text-h2-ls);      font-weight: var(--text-h2-weight); }
.t-h3      { font-family: var(--font-display); font-size: var(--text-h3-size);      line-height: var(--text-h3-lh);      letter-spacing: var(--text-h3-ls);      font-weight: var(--text-h3-weight); }
.t-h4      { font-family: var(--font-display); font-size: var(--text-h4-size);      line-height: var(--text-h4-lh);      letter-spacing: var(--text-h4-ls);      font-weight: var(--text-h4-weight); }
.t-stat    { font-family: var(--font-display); font-size: var(--text-stat-size);    line-height: var(--text-stat-lh);    letter-spacing: var(--text-stat-ls);    font-weight: var(--text-stat-weight); }
.t-title   { font-family: var(--font-text);    font-size: var(--text-title-size);   line-height: var(--text-title-lh);   letter-spacing: var(--text-title-ls);   font-weight: var(--text-title-weight); }
/* Headings: the words are spread evenly over the lines (no lone word on the last line) */
.t-display, .t-h2, .t-h3 { text-wrap: balance; }
@media (max-width: 1199px) {
  /* The hard line breaks of the desktop layout are left out below 1200px; the hero title and the contact heading keep theirs */
  .t-display br, .t-h2 br { display: none; }
  .hero__title br, .contact-direct__head .t-h2 br { display: inline; }
}

/* The tight tracking of the headings also shrinks the spaces (Switzer has narrow ones): widen them a little */
.t-display, .t-h2, .t-h3 { word-spacing: .075em; }
.t-body    { font-family: var(--font-text);    font-size: var(--text-body-size);    line-height: var(--text-body-lh);    letter-spacing: var(--text-body-ls);    font-weight: var(--text-body-weight); }
.t-mono    { font-family: var(--font-mono);    font-size: var(--text-mono-size);    line-height: var(--text-mono-lh);    letter-spacing: var(--text-mono-ls);    font-weight: var(--text-mono-weight); text-transform: var(--text-mono-transform); }

.rich-text p + p { margin-top: 20px; }

/* ---------- Label ---------- */

.label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--label-pad);
  border-radius: var(--radius-label);
  background: var(--c-accent);
  color: var(--c-ink);
  white-space: nowrap;
}

.label--dark { background: var(--c-dark); color: var(--c-light); }
.label--light { background: var(--c-light); color: var(--c-dark); }   /* for dark backgrounds */

/* ---------- Icons ---------- */

.icon-arrow { width: 16px; height: 16px; flex: none; }

/* ---------- Button (pill + circle) ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
}   /* no backdrop blur on the whole button: it blurred the page behind the gap between pill and circle; the parts that need it set their own */
.btn__body {
  display: flex;
  align-items: center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--radius-button);
  font-family: var(--font-text);
  font-size: var(--text-body-size);
  line-height: var(--text-body-lh);
  letter-spacing: var(--text-body-ls);
  white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease);
}
.btn__circle {
  position: relative;
  width: var(--btn-circle);
  height: var(--btn-circle);
  border-radius: var(--radius-button);
  overflow: hidden;
  flex: none;
  transition: background-color var(--dur-hover) var(--ease);
}
.btn__circle .icon-arrow {
  position: absolute;
  left: calc((var(--btn-circle) - 16px) / 2);
  top: calc((var(--btn-circle) - 16px) / 2);
  transition: transform var(--dur-ui) var(--ease-out);
}
.btn__circle .icon-arrow + .icon-arrow { transform: translate(-26px, 26px); }

.btn:focus-visible .btn__circle .icon-arrow:first-child { transform: translate(26px, -26px); }
.btn:focus-visible .btn__circle .icon-arrow + .icon-arrow { transform: translate(0, 0); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__circle .icon-arrow:first-child { transform: translate(26px, -26px); }
  .btn:hover .btn__circle .icon-arrow + .icon-arrow { transform: translate(0, 0); }
}

.btn--light .btn__body,
.btn--light .btn__circle { background: var(--c-light); color: var(--c-dark); -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); }
.btn--light:focus-visible .btn__body,
.btn--light:focus-visible .btn__circle { background: var(--c-light-hover); }
@media (hover: hover) and (pointer: fine) {
  .btn--light:hover .btn__body,
  .btn--light:hover .btn__circle { background: var(--c-light-hover); }
}

.btn--dark .btn__body,
.btn--dark .btn__circle { background: var(--c-dark); color: var(--c-light); }
.btn--dark:focus-visible .btn__body,
.btn--dark:focus-visible .btn__circle { background: var(--c-dark-hover); }
@media (hover: hover) and (pointer: fine) {
  .btn--dark:hover .btn__body,
  .btn--dark:hover .btn__circle { background: var(--c-dark-hover); }
}

.btn--glass .btn__body,
.btn--glass .btn__circle { background: var(--c-glass); color: var(--c-white); -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); }
.btn--glass:focus-visible .btn__body,
.btn--glass:focus-visible .btn__circle { background: var(--c-glass-hover); }
@media (hover: hover) and (pointer: fine) {
  .btn--glass:hover .btn__body,
  .btn--glass:hover .btn__circle { background: var(--c-glass-hover); }
}

/* Copy buttons: the label fades out, the button eases to the width of the new text,
   and the new text fades in (main.js), so the button never jumps */
[data-copy] .copy-btn__text { display: inline-block; white-space: nowrap; }
[data-copy] .btn__body,
[data-copy] .copy-btn__text {
  transition:
    background-color var(--dur-hover) var(--ease),
    color var(--dur-hover) var(--ease),
    opacity var(--dur-press) var(--ease),
    width var(--dur-ui) var(--ease-in-out);
}
[data-copy].is-resizing .btn__body,
[data-copy].is-resizing .copy-btn__text { overflow: hidden; }
/* A longer label waits for the width, so it is never shown cut off (delays follow the transition list) */
[data-copy].is-growing .btn__body,
[data-copy].is-growing .copy-btn__text { transition-delay: 0s, 0s, var(--dur-ui), 0s; }
[data-copy].is-swapping .btn__body,
[data-copy].is-swapping .copy-btn__text { opacity: 0; }

/* Press feedback */
.btn { transition: transform var(--dur-press) var(--ease-out); }
.btn:active,
.slider__arrow:active,
.slider__dot:active,
.copy-btn:active { transform: scale(.97); }

/* ---------- Text link with underline sweep ---------- */

.line-link {
  position: relative;
  display: inline-flex;
  overflow: hidden;
}
.line-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: translateX(-101%);
  transition: transform var(--dur-ui) var(--ease-out);
}
.line-link:focus-visible::after { transform: translateX(0); }
@media (hover: hover) and (pointer: fine) { .line-link:hover::after { transform: translateX(0); } }

/* Long e-mail addresses may wrap on narrow screens instead of sticking out */

.office__list a { overflow-wrap: anywhere; }

/* ==========================================================================
   Navigation
   ========================================================================== */

.site-nav {
  position: fixed;
  top: var(--nav-offset);
  left: var(--nav-offset);
  z-index: 10;
}
.site-nav__panel {
  position: relative;
  background: var(--c-panel);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-nav-edge);
  overflow: hidden;
}
.site-nav__bar {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--nav-height);
  padding: 0 16px;
}
.site-nav__logo {
  display: flex;
  align-items: center;
  padding: 0 1.9px;
  flex: none;
}
.site-nav__logo img { width: 127px; height: 16px; }
.site-nav__items {
  display: flex;
  align-items: center;
  gap: 24px;
}
.site-nav__company {
  display: flex;
  align-items: center;
  gap: 4px;
}
.site-nav__chevron {
  width: 11px;
  height: 6px;
  transition: transform var(--dur-ui) var(--ease-in-out);
}
.site-nav.is-dd-open .site-nav__chevron { transform: rotate(180deg); }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 2px;
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--c-muted);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-ui) var(--ease-out);
}
.nav-link.is-active::after,
.nav-link:focus-visible::after { transform: none; }
@media (hover: hover) and (pointer: fine) { .nav-link:hover::after { transform: none; } }

.site-nav__dropdown {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-ui) var(--ease-out);
}
.site-nav.is-dd-open .site-nav__dropdown { grid-template-rows: 1fr; }
.site-nav__dropdown-inner {
  min-height: 0;
  overflow: hidden;
}
.site-nav__dropdown-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px 16px;
}

.site-nav__burger,
.site-nav__mobile { display: none; }

/* Fixed "Contact Us" button in the top-right corner */
.nav-cta {
  position: fixed;
  top: var(--nav-offset);
  right: var(--nav-offset);
  z-index: 10;
}

/* ==========================================================================
   Custom cursor
   ========================================================================== */

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-100px, -100px);
}
/* Only a button that follows the cursor over elements with data-cursor-label (see main.js); no permanent cursor mark */
.cursor__btn {
  position: absolute;
  top: 24px;
  left: 24px;   /* centred under the pointer (the box is offset by -24px in main.js) */
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) scale(.9);
  transform-origin: 50% 0;
  transition: opacity var(--dur-hover) var(--ease), transform var(--dur-ui) var(--ease-out);
}
.cursor.has-label .cursor__btn { opacity: 1; transform: translateX(-50%) scale(1); }
.cursor.has-label .cursor__btn .icon-arrow:first-child { transform: translate(26px, -26px); }
.cursor.has-label .cursor__btn .icon-arrow + .icon-arrow { transform: translate(0, 0); }

@media (hover: none) {
  .cursor { display: none; }
}

/* ==========================================================================
   Shared media helper
   ========================================================================== */

.media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Entrances (triggered once by main.js when the element scrolls into view)
   data-reveal          block: fades in and rises by --reveal-distance
   data-reveal="fade"   photos: fade only
   data-reveal="group"  the children enter one after another (--stagger, capped at --stagger-max)
   data-lines           hero H1: each line slides up from under its own bottom edge
   Inside [data-hero], data-reveal blocks start together with the last line of the H1.
   ========================================================================== */

.js [data-reveal]:not([data-reveal="group"]),
.js [data-reveal="group"] > * {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
.js [data-reveal][data-reveal="fade"] { transform: none; }
.js [data-reveal="group"] > * { transition-delay: min(calc(var(--i, 0) * var(--stagger)), var(--stagger-max)); }
.js [data-reveal].is-in,
.js [data-reveal="group"].is-in > * { opacity: 1; transform: none; }

/* The heading stays hidden until main.js has split it into lines, so it never flashes in whole.
   After the entrance main.js puts the original markup back. */
.js [data-lines] { opacity: 0; }
.js [data-lines].is-split,
.js [data-lines].is-in { opacity: 1; }
/* Phones: the home page H1 is shown from the first paint, without the line entrance (main.js does not split it).
   It is the largest element of the first view, and search engines measure when it appears. */
@media (max-width: 809px) {
  .js .hero [data-lines] { opacity: 1; }
}
[data-lines] .line {
  display: block;
  padding-bottom: .15em;   /* room for descenders inside the clip */
  margin-bottom: -.15em;
  clip-path: inset(-1em -1em 0 -1em);   /* clips only the bottom edge */
}
[data-lines] .line__inner {
  display: block;
  transform: translateY(calc(100% + .2em));
  transition: transform var(--dur-line) var(--ease-out);
}
[data-lines].is-in .line__inner { transform: none; }

.no-anim [data-reveal],
.no-anim [data-reveal="group"] > *,
.no-anim [data-lines],
.no-anim [data-lines] .line__inner { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Reduced motion: keep a short fade, drop the movement and the line stagger (main.js does not split) */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal]:not([data-reveal="group"]),
  .js [data-reveal="group"] > *,
  .js [data-lines] {
    transform: none;
    transition: opacity var(--dur-hover) var(--ease);
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   Home — Clients (logo marquee)
   ========================================================================== */

.clients {
  --marquee-duration: 45s;
  padding: 48px 0 0;
}
.clients__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.clients__title {
  padding: 0 16px;
  text-align: center;
  color: var(--c-muted);
}
.clients__marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}
/* Two identical groups: moving the track by half its width loops without a seam */
.clients__track {
  display: flex;
  width: max-content;
  animation: clients-marquee var(--marquee-duration, 45s) linear infinite;
}
.clients__group { display: flex; }
/* Outlined cells sitting edge to edge, like the card grid on Projects:
   no left edge, so neighbouring lines never double up */
.clients__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 240px;
  height: 128px;
  background: var(--c-bg);   /* page colour: gives the logos' white backgrounds something to blend into */
}
.clients__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-line);
  border-left-width: 0;
  border-radius: 1px;
  pointer-events: none;
}
/* Logos keep their files in colour; the grey look comes from the filter.
   multiply drops the white backgrounds some logo files have into the page colour. */
.clients__logo {
  max-width: 64%;
  max-height: 68px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}

@keyframes clients-marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .clients__track { animation: none; }
  .clients__marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   Home — Highlights (dark value cards with a big number)
   ========================================================================== */

.facts { padding: 64px 16px 0; scroll-margin-top: 40px; }   /* reached via #dlaczego-my from the home page; clears the fixed nav */
.facts .value-card { background: var(--c-dark); }
.facts .value-card__top { align-items: flex-start; justify-content: flex-start; }
.value-card__icon { width: 40px; height: 40px; flex: none; }
.facts .value-card__bottom { min-height: 200px; }   /* same height in every card, so the titles line up */

/* ==========================================================================
   Home — Services (focus cards)
   ========================================================================== */

.focus { padding: 100px 16px 8px; }
.focus__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.focus__cards {
  display: flex;
  gap: 8px;
}
.focus-card {
  position: relative;
  flex: 1;
  min-width: 0;
  aspect-ratio: .756;
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background: var(--c-panel);
  overflow: hidden;
}
.focus-card__plus {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-icon);
  background: var(--c-accent);
  transition: transform var(--dur-ui) var(--ease-out);
}
.focus-card__plus svg { width: 16px; height: 16px; }
.focus-card:focus-visible .focus-card__plus { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) { .focus-card:hover .focus-card__plus { transform: rotate(45deg); } }
.focus-card__icon { width: 75px; height: 75px; object-fit: contain; }
.focus-card__title { color: var(--c-ink); text-align: center; }
.focus-card__more { display: none; }
.focus-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  padding: 32px;
  background: var(--c-light);
  transform: translateY(100%);
  transition: transform var(--dur-panel) var(--ease-out);
}
.focus-card:focus-visible .focus-card__overlay { transform: none; }
@media (hover: hover) and (pointer: fine) { .focus-card:hover .focus-card__overlay { transform: none; } }
.focus-card__overlay p { color: var(--c-ink-soft); }
/* Text + button block: centred in the card as a group, left-aligned inside */
.focus-card__overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  align-self: center;
}

/* Two-card row: each card twice as wide, but as tall as a card of a four-column row.
   aspect-ratio follows the card's own width, so height is taken from the row's width
   instead (container query units). At tablet and phone the row has 2 and 1 columns,
   where the plain aspect ratio gives that same height again. */
.focus__cards--pair { container-type: inline-size; }
.focus__cards--pair .focus-card {
  aspect-ratio: unset;
  height: calc((100cqw - 3 * 8px) / 4 / .756);
}
.focus__cards--pair .focus-card__overlay-inner { width: 50%; }

/* ==========================================================================
   Slider (Home projects)
   ========================================================================== */

.slider {
  --per-view: 2.25;
  --gap: 8px;
  position: relative;
  width: 100%;
}
.slider__viewport {
  overflow: visible;
  touch-action: pan-y;
  cursor: grab;
}
.slider__viewport.is-dragging { cursor: grabbing; }
.slider__track {
  display: flex;
  gap: var(--gap);
  will-change: transform;
}
.slider__track.is-animating { transition: transform var(--dur-slide) var(--ease-out); }
.slider__slide {
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  min-width: 0;
  user-select: none;
  -webkit-user-drag: none;
}
.slider__slide img { -webkit-user-drag: none; }
.slider__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-control);
  background: var(--c-panel);
  transition: background-color var(--dur-hover) var(--ease), transform var(--dur-press) var(--ease-out);
}
.slider__arrow:focus-visible { background: var(--c-panel-hover); }
@media (hover: hover) and (pointer: fine) { .slider__arrow:hover { background: var(--c-panel-hover); } }
.slider__arrow svg { width: 24px; height: 24px; }
.slider__dots {
  position: absolute;
  left: 50%;
  top: calc(100% + 20px);
  z-index: 2;
  display: flex;
  align-items: center;
  height: 30px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--c-dots-track);
  transform: translateX(-50%);
  overflow: hidden;
}
.slider__dot {
  display: flex;
  padding: 12px 2px;
  transition: transform var(--dur-press) var(--ease-out);
}
.slider__dot:first-child { padding-left: 12px; }
.slider__dot:last-child { padding-right: 12px; }
.slider__dot span {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-round);
  background: var(--c-ink);
  opacity: .3;
  transition: opacity var(--dur-hover) var(--ease);
}
.slider__dot.is-active span { opacity: 1; }

/* ==========================================================================
   Project card (Home slider, Projects grid)
   ========================================================================== */

.project-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--c-white);
}
.project-card .media { z-index: -1; }
.project-card .media img {
  filter: brightness(var(--img-dim));
  transition: transform var(--dur-panel) var(--ease-out);
}
.project-card:focus-visible .media img { transform: scale(1.03); }
@media (hover: hover) and (pointer: fine) { .project-card:hover .media img { transform: scale(1.03); } }
.project-card img[src$="photo-thermite-crew.webp"] { object-position: 50% 20%; }   /* portrait photo in a wide card: keep both workers' heads in the crop */
.project-card__info {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.project-card__meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.project-card .btn {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.project-card:focus-visible .btn { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .project-card:hover .btn { opacity: 1; transform: none; } }
.project-card__meta .t-mono { color: var(--c-light-soft); }

/* Client logo on a white tile in the top-left corner */
.project-card__client {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 64px;
  padding: 10px 14px;
  background: var(--c-light);
}
.project-card__client img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
}

.slider--projects .project-card { aspect-ratio: 614.7 / 381.6; }

/* ==========================================================================
   Home — Projects
   ========================================================================== */

.recent { padding: 160px 16px; }
.recent__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.recent__title { width: 900px; max-width: calc(100% - 110px); padding-bottom: 5px; }   /* leaves room for the slider arrows */
.recent .project-card__client { width: 156px; height: 83px; }

/* Variant: "see all" button at the top right, slider arrows under the slider on the left */
.recent--swapped .recent__inner { gap: 64px; }   /* heading + button to the cards */
.recent--swapped .recent__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; width: 100%; }
.recent--swapped .recent__heading { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; min-width: 0; }
.recent--swapped .recent__title { max-width: 100%; }
/* Controls under the slider: both arrows next to each other on the left, the dot indicator in a framed track on the right */
.recent--swapped .slider__controls {
  position: absolute;
  top: calc(100% + 16px);   /* cards to controls */
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;   /* between the two arrows */
}
.recent--swapped .slider__dots {
  margin-left: auto;
  position: static;
  height: 42px;
  border-radius: var(--radius-control);
  background: var(--c-panel);
  transform: none;
}
.recent--swapped .slider__dot span { opacity: .18; }   /* lighter inactive dots: more contrast with the active one */
.recent--swapped .slider__dot.is-active span { opacity: 1; }

/* ==========================================================================
   CTA band (shared)
   ========================================================================== */

.cta {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 160px 16px;
  background: var(--c-accent);
  overflow: hidden;
}
.cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}
.cta__inner .label { align-self: center; }
.cta__title {
  width: 600px;
  max-width: 100%;
  text-align: center;
  color: var(--c-ink);
}
.cta__text {
  width: var(--page-aside-width);
  max-width: 100%;
  text-align: center;
  color: var(--c-ink-soft);
}
/* Direct contact (proposal replacing the form): photo on the left, phone and e-mail rows on the right */
.contact-direct { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: min(50vw, 900px); }   /* half the screen width, at most 900px tall (the height of the former form section) */
.contact-direct__media { position: relative; min-width: 0; overflow: hidden; }
.contact-direct__media .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .04) 25%, rgb(0 0 0 / .6) 100%); }   /* same gradient as next to the form, a bit lighter (.82 → .6) */
.contact-direct__panel { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-width: 0; padding: 104px 32px 32px; background: var(--c-dark-soft); color: var(--c-white); scroll-margin-top: 92px; }
.contact-direct__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; max-width: 480px; }
.contact-direct__head p { color: var(--c-light-soft); text-wrap: pretty; }
.contact-direct__list { border-bottom: 1px solid var(--c-field-line); }
.contact-direct__list li { border-top: 1px solid var(--c-field-line); }
.contact-direct__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label arrow" "value arrow";
  align-items: center;
  gap: 8px 24px;
  padding: 20px 0;
  color: inherit;
  text-decoration: none;
}
.contact-direct__label { grid-area: label; color: var(--c-light-soft); }
.contact-direct__value { grid-area: value; min-width: 0; overflow-wrap: anywhere; text-decoration: underline 1px transparent; text-underline-offset: 6px; transition: text-decoration-color var(--dur-hover) var(--ease); }
.contact-direct__arrow { grid-area: arrow; background: var(--c-light); color: var(--c-dark); }
.contact-direct__row:focus-visible { outline: 2px solid var(--c-light); outline-offset: 4px; }
/* "Kopiuj adres" button under an e-mail link (contact panel, contact people cards) */
.copy-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--c-muted); transition: color var(--dur-hover) var(--ease), transform var(--dur-press) var(--ease-out); }
.copy-btn .icon-copy { width: 18px; height: 18px; flex: none; }
.copy-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .copy-btn:hover { color: var(--c-ink); } }
.contact-direct__copy { margin: -14px 0 6px; color: var(--c-light-soft); }
.contact-direct__row:focus-visible .contact-direct__value { text-decoration-color: currentColor; }
.contact-direct__row:focus-visible .icon-arrow:first-child { transform: translate(26px, -26px); }
.contact-direct__row:focus-visible .icon-arrow + .icon-arrow { transform: translate(0, 0); }
@media (hover: hover) and (pointer: fine) {
  .contact-direct__row:hover .contact-direct__value { text-decoration-color: currentColor; }
  .contact-direct__row:hover .icon-arrow:first-child { transform: translate(26px, -26px); }
  .contact-direct__row:hover .icon-arrow + .icon-arrow { transform: translate(0, 0); }
  .contact-direct__copy:hover { color: var(--c-white); }
}

/* ==========================================================================
   Footer (shared)
   ========================================================================== */

.site-footer {
  position: relative;
  overflow: hidden;
  padding: 80px 24px 8px;
  background: var(--c-dark);
  color: var(--c-light);
}
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 110px;
}
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.site-footer__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 400px;
}
.site-footer__lead {
  font-family: var(--font-text);
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
  letter-spacing: var(--text-title-ls);
  font-weight: var(--text-title-weight);
}
.site-footer__cols {
  display: flex;
  align-items: flex-start;
  gap: 128px;
}
.site-footer__col {
  display: flex;
  align-items: flex-start;
  gap: 64px;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.site-footer__links a { font-family: var(--font-text); font-size: var(--text-body-size); line-height: var(--text-body-lh); letter-spacing: var(--text-body-ls); }
.site-footer__bottom {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 24px;
}
.site-footer__logo { max-width: 100%; margin-bottom: -24px; }   /* about 20% of the logo is cut by the bottom edge */
.site-footer__logo img { width: 1000px; height: auto; }
.site-footer__meta {
  display: flex;
  align-self: flex-end;
  align-items: center;
  gap: 16px;
}

/* Desktop: copyright to the right of the logo, level with its top edge */
@media (min-width: 1200px) {
  .site-footer__bottom { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
  .site-footer__logo { flex: 0 1 1000px; min-width: 0; }
  .site-footer__logo img { width: 100%; }
  /* The Contact group and the copyright share one fixed-width column, so their left edges line up */
  .site-footer__col:last-child { width: 360px; }
  .site-footer__meta { flex: none; width: 360px; align-self: flex-start; flex-direction: column; align-items: flex-start; gap: 8px; }
}

.full-image {
  position: relative;
  height: 760px;
  overflow: hidden;
}
.full-image .media img { transform: translateY(-74px) scale(1.2); }

.story { padding: 160px 80px; }
.story__inner {
  display: flex;
  align-items: center;
  gap: 48px;
}
.story__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 600px;
  flex: none;
}
.story__media {
  position: relative;
  flex: 1;
  height: 500px;
  background: var(--c-white);
  overflow: hidden;
}

/* About — quality policy and approvals (dark "values" section with download cards) */
.values__title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 640px;
  max-width: 100%;
}
.values__text { width: var(--page-aside-width); flex: none; color: var(--c-light-soft); }
.values__head .values__text p { width: auto; }

/* Contact people (About, Contact): outlined cells like the projects grid */
.people { padding: 160px 0; }
.people__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 0 16px 64px;
}
.people__title { width: 700px; max-width: 100%; }
.people .card-grid { margin: 0 16px; border: 1px solid var(--c-line); border-bottom: 0; }
.people .card-grid__cell { border-bottom: 1px solid var(--c-line); }
.people .card-grid__cell:nth-child(odd) { border-right: 1px solid var(--c-line); }
.people .card-grid__cell::after { display: none; }

/* ==========================================================================
   Image header (Services)
   ========================================================================== */

.image-head {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: 630px;
  padding: 0 16px 32px;
  overflow: hidden;
}
.image-head .media { z-index: -1; }
.image-head .media img { filter: brightness(var(--img-dim)); transform: translateY(-30px) scale(1.1); }
.image-head__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
}
.image-head__title {
  width: 700px;
  max-width: 100%;
  padding-bottom: 10px;
  color: var(--c-bg);
}

.step {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.dash-line {
  flex: 1;
  height: 9px;
  border-bottom: 1px dashed var(--c-line);
}

.values {
  padding: 160px 16px;
  background: var(--c-dark);
}
.values__inner {
  display: flex;
  flex-direction: column;
  gap: 92px;
}
.values__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.values__head h2 { color: var(--c-light); }
.values__head p { width: 300px; color: var(--c-light-soft); }
.values__cards {
  display: flex;
  gap: 8px;
}
.value-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 439px;
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--c-dark-soft);
  color: var(--c-light);
}
.value-card__top {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.value-card__top img { width: 120px; height: 120px; object-fit: contain; }
.value-card__bottom {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Services page — header, service rows with section links, service details */
.image-head--services { height: auto; min-height: 720px; padding-top: 160px; }
.image-head--services .image-head__title { width: 900px; }
.image-head--services .media img { object-position: 28% 0; filter: none; transform: scale(1.1); transform-origin: 50% 0; }   /* wide photo: no dark overlay, anchored to the top edge (the bottom is cropped), welder to the right of the text */
/* 1200-1399px: title and aside side by side leave the title too narrow for two lines, so the aside drops below it */
@media (min-width: 1200px) and (max-width: 1399px) {
  .image-head--services .image-head__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .image-head--services .image-head__title { width: 100%; }
}
.image-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: var(--page-aside-width);
  flex: none;
  padding-bottom: 10px;
  color: var(--c-bg);
}

.services { padding: 160px 16px; }
.services__inner { display: flex; flex-direction: column; gap: 48px; }
.services__head { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.services__intro { width: 900px; max-width: 100%; }
.services__list { padding-top: 32px; }
.service-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));   /* same 3 columns and 8px gaps as the cards, so the text lines up with them */
  column-gap: 8px;
  align-items: center;
  position: relative;
  padding: 64px 0;
  --row-bleed: 16px;   /* matches the section's side padding, so lines and hover reach its edges */
}
/* Divider lines run past the content to the edges of the section. */
.service-row::after {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--row-bleed));
  border-top: 1px solid var(--c-line);
  pointer-events: none;
}
.service-row:last-child::after { border-bottom: 1px solid var(--c-line); }
.service-row__icon { grid-column: 1; grid-row: 1 / span 2; justify-self: start; width: 96px; height: 96px; object-fit: contain; }
.service-row__title { grid-column: 2; grid-row: 1; align-self: end; }
.service-row__text { grid-column: 2; grid-row: 2; align-self: start; margin-top: 12px; color: var(--c-ink-soft); }   /* short text sits right under the title */
.service-row__link { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
/* The whole row is the link; on hover a light grey band fills it edge to edge of the section. */
a.service-row { isolation: isolate; color: inherit; text-decoration: none; }
a.service-row::before {
  content: "";
  position: absolute;
  inset: 0 calc(-1 * var(--row-bleed));
  z-index: -1;
  background: var(--c-panel);
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease);
}
a.service-row:focus-visible::before { opacity: 1; }
a.service-row:focus-visible { outline: none; }   /* the grey band is the focus indicator */
a.service-row:focus-visible .btn__circle .icon-arrow:first-child { transform: translate(26px, -26px); }
a.service-row:focus-visible .btn__circle .icon-arrow + .icon-arrow { transform: translate(0, 0); }
a.service-row:focus-visible .btn--dark .btn__body,
a.service-row:focus-visible .btn--dark .btn__circle { background: var(--c-dark-hover); }
@media (hover: hover) and (pointer: fine) {   /* touch screens would keep the grey band stuck after a tap */
  a.service-row:hover::before { opacity: 1; }
  a.service-row:hover .btn__circle .icon-arrow:first-child { transform: translate(26px, -26px); }
  a.service-row:hover .btn__circle .icon-arrow + .icon-arrow { transform: translate(0, 0); }
  a.service-row:hover .btn--dark .btn__body,
  a.service-row:hover .btn--dark .btn__circle { background: var(--c-dark-hover); }
}
.services + .story--service { padding-top: 0; scroll-margin-top: 120px; }

/* Service details: two outlined cells like the Projects grid (64px inside every cell, so the photo has equal space on all four sides) */
.story--service { padding: 0; }
.story--service + .story--service { scroll-margin-top: 120px; }   /* clears the fixed nav when reached via #anchor */
.story--last { padding-bottom: 160px; }   /* the last service section keeps the space before the contact block (was on the 2nd, "reverse", one) */
.story--service .story__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* narrower text cell, wider photo cell */
  gap: 0;
  align-items: stretch;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.story--service + .story--service .story__inner { border-top: 0; }   /* shares the line of the section above */
.story--service .story__cell { display: flex; min-width: 0; padding: 64px; }
.story--service .story__text { width: auto; flex: none; justify-content: center; }
.story--service .story__cell--media { border-left: 1px solid var(--c-line); }
.story--service .story__media { flex: 1; height: auto; }
.story--service .story__media::before { content: ""; display: block; padding-top: 75%; }   /* 4:3 photo; grows taller only if the text next to it needs more height */
.story--service .story__media img { object-position: 50% 45%; }
.story--service:not(.story--reverse) .story__media img { object-position: 50% 60%; }   /* keeps the worker and the machine in frame */
.story--reverse .story__text { order: 2; border-left: 1px solid var(--c-line); }
.story--reverse .story__cell--media { order: 1; border-left: 0; }
.story--reverse .story__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.story__body { color: var(--c-ink-soft); }

/* ==========================================================================
   Projects list and project detail
   ========================================================================== */

.list-head { padding: 180px 16px 80px; }
.list-head__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}
.list-head__title { width: 900px; max-width: 70%; padding-bottom: 10px; color: var(--c-ink-soft); }
.list-head__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: var(--page-aside-width);
  flex: none;
}
.list-head__aside p { color: var(--c-ink-soft); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card-grid__cell {
  position: relative;
  display: flex;
  padding: 64px;
}
.card-grid__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--c-line);
  border-left-width: 0;
  border-radius: 1px;
  pointer-events: none;
}
.card-grid__cell > .project-card { flex: 1; }

.projects-list { padding: 0 0 160px; }
.projects-list .card-grid { border-top: 1px solid var(--c-line); }
.projects-list .card-grid__cell { border-bottom: 1px solid var(--c-line); }
.projects-list .card-grid__cell:nth-child(odd) { border-right: 1px solid var(--c-line); }
.projects-list .card-grid__cell::after { display: none; }
.projects-list .project-card { aspect-ratio: 584.5 / 460.4; }
@media (max-width: 809px) { .projects-list .project-card { min-height: 290px; } }   /* very small phones: same reason */
@media (min-width: 810px) { .projects-list .project-card { min-height: 300px; } }   /* narrow tablets: keeps the title and year clear of the logo tile */
/* Black gradient from the bottom edge, darkening the photo behind the texts */
.projects-list .project-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: 65%;
  background: linear-gradient(to top, rgb(0 0 0 / .8), rgb(0 0 0 / 0));
  pointer-events: none;
}
.projects-list .project-card__client { width: 180px; height: 96px; padding: 15px 21px; }
.projects-list .project-card .btn { display: none; }
.projects-list .project-card__info { justify-content: flex-start; align-items: flex-end; gap: 16px; }
.projects-list .project-card__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.projects-list .project-card__meta > p:nth-child(1) { margin-bottom: 32px; }   /* title to year and place */

/* Project detail (case study): scrolling gallery on the left, sticky description on the right */
.case { padding: 0; }
.case__inner {
  display: flex;
  align-items: flex-start;
  gap: 32px;
}
.case__gallery {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.case__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--c-panel);
}
.case__photo--full { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.case__photo img { width: 100%; height: 100%; object-fit: cover; }
.case__info {
  width: 50%;
  flex: none;
  align-self: stretch;
  padding: 0 32px 0 0;
}
.case__sticky {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto clamp(24px, 12svh, 140px) auto minmax(24px, 1fr) auto;   /* back link, title near the top, facts table pinned to the bottom */
  align-content: stretch;
  align-items: start;
  height: 100vh;
  height: 100svh;
  padding: 28px 0 32px;
}
.case__back { grid-row: 1; justify-self: start; color: var(--c-ink-soft); }
.case__title { grid-row: 3; width: 100%; max-width: 100%; padding-right: 88px; color: var(--c-ink-soft); }
.case__facts { grid-row: 5; width: 100%; margin: 0; }
.case__fact {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  box-shadow: inset 0 1px 0 var(--c-line);
}
.case__fact:last-child { box-shadow: inset 0 1px 0 var(--c-line), inset 0 -1px 0 var(--c-line); }
.case__fact dt { color: var(--c-muted); }
.case__fact dd { margin: 0; color: var(--c-ink); }

@media (min-width: 810px) and (max-height: 640px) {
  .case__sticky { padding: 20px 0 20px; }
  .case__fact { padding: 7px 0; }
}

/* ==========================================================================
   Careers
   ========================================================================== */

.benefits {
  padding: 128px 16px;
  background: var(--c-panel);
}
.benefits__inner {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.benefits__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  width: 70%;
}
.benefits__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 80px 32px;
}
.benefit {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.benefit .dash-line { flex: none; width: 100%; }
.benefit__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.benefit__body p { color: var(--c-ink-soft); }

/* Contact — company details next to the map */
.office { display: flex; }
.office__info,
.office__map {
  flex: 1;
  min-width: 0;
  min-height: 560px;
}
.office__info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: 64px 32px 32px;
  background: var(--c-panel);
}
.office__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.office__list { width: 100%; }
.office__list li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  box-shadow: inset 0 1px 0 var(--c-line);
}
.office__list .t-mono { color: var(--c-muted); }
.office__list a { justify-self: start; }
.office__map { position: relative; background: var(--c-panel); }
.office__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.05);
}

/* ==========================================================================
   404
   ========================================================================== */

.page-404 { background: var(--c-dark); }
.notfound {
  position: relative;
  z-index: 7;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  min-height: 560px;
  padding: 24px;
  border-radius: 0 0 var(--radius-page) var(--radius-page);
  overflow: hidden;
  background: var(--c-dark);
}
.notfound__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 100%;
  text-align: center;
  color: var(--c-white);
}
.notfound__inner .label { align-self: center; }
.notfound__inner p.t-body { width: 473px; max-width: 100%; color: var(--c-bg); }

/* ==========================================================================
   Tablet (810px – 1199px)
   ========================================================================== */

@media (max-width: 1199px) {
  /* Home */
  .clients { padding: 48px 0 0; }
  .clients__item { width: 208px; height: 112px; }
  .clients__logo { max-height: 60px; }
  
  
  .focus { padding: 120px 16px 16px; }
  .focus__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .focus__cards--pair .focus-card { aspect-ratio: .756; height: auto; }
  .focus__cards--pair .focus-card__overlay-inner { width: auto; }
  
  
  .recent { padding: 120px 16px; }
  .slider--projects { --per-view: 1.75; }
  .slider--projects .project-card { aspect-ratio: 541 / 375; }
  
  
  
  

  /* Shared CTA + footer (the compact variant keeps its desktop spacing) */
  .cta { padding: 120px 16px; }
  
  .site-footer { padding: 64px 16px 8px; }
  .site-footer__inner { gap: 100px; }
  .site-footer__intro { width: 360px; }
  .site-footer__cols { gap: 64px; }
  .site-footer__logo { margin-bottom: -20px; }
  .site-footer__logo img { width: 800px; }
  
  .full-image { height: 608px; }
  
  .story { padding: 120px 16px; }
  .story__text { width: auto; flex: 1; }
  .story__media { height: 476px; }
  
  
  
  
  
  
  
  

  /* Image headers */
  .image-head { padding: 0 16px 24px; }
  
  
  
  .values { padding: 120px 16px; }
  .values__inner { gap: 72px; }

  /* Projects list: narrower cells, so the cards keep room for their longer titles */
  .projects-list .card-grid__cell { padding: 32px; }
  .projects-list .project-card .btn { display: none; }
  .list-head__inner { align-items: flex-end; gap: 80px; }
  .list-head__title { width: auto; flex: 1; }
  .list-head__aside { width: var(--page-aside-width); flex: none; }

  /* Careers */
  
  
  .benefits { padding: 120px 16px; }
  .benefits__head { width: 80%; gap: 64px; }
  .benefits__grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer: link columns stack their label above the links to fit the longer contact details */
  .site-footer__col { flex-direction: column; gap: 24px; }

  /* Home */
  .facts { padding: 56px 16px 0; }
  .facts .value-card__bottom { min-height: 220px; }
  .contact-direct__panel { padding: 104px 24px 24px; }

  /* Contact people */
  .people { padding: 120px 0; }
  .people .card-grid__cell { padding: 32px 24px; }

  /* Services */
  .image-head--services { min-height: 640px; padding-top: 140px; }
  .image-head--services .media img { object-position: 47% 0; }   /* narrow crop: centres on the welder and the sparks */
  .image-head--services .image-head__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .image-head--services .image-head__title { width: 100%; }
  .image-head__aside { width: var(--page-aside-width); max-width: 100%; }
  .services { padding: 120px 16px; }
  .story--service .story__cell { padding: 32px; }
  .story--service .story__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
  .story--reverse .story__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); }
  .story--service { padding: 0; }   /* the generic .story padding above must not space the service sections apart */
  .story--last { padding-bottom: 120px; }

  /* Project detail */
  .case { padding: 0; }
  .case__info { padding-right: 24px; }
  .case__title { padding-right: 96px; }
  .case__fact { grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }

  /* Contact */
  .office__info,
  .office__map { min-height: 480px; }
  .office__info { padding: 48px 24px 24px; }
  .office__list li { grid-template-columns: 1fr; gap: 6px; }
}

/* ==========================================================================
   Phone (<= 809px)
   ========================================================================== */

@media (max-width: 809px) {
  /* Even out heading lines so a single word does not hang on the last line */
  .t-display, .t-h2 { text-wrap: balance; }
  .t-h2 br { display: none; }   /* desktop line breaks left single words hanging on narrow screens */
  /* Navigation */
  .site-nav { right: var(--nav-offset); }
  /* The panel grows to full height at once and is uncovered with clip-path (no layout animation);
     when closing, the height waits until the clip has finished. */
  .site-nav__panel {
    height: var(--nav-height);
    clip-path: inset(0 0 calc(100% - var(--nav-height)) 0 round var(--radius-nav));
    transition: clip-path var(--dur-panel) var(--ease-drawer), height 0s linear var(--dur-panel);
  }
  .site-nav__bar { justify-content: space-between; padding: 0 12px; }
  .site-nav__items,
  .site-nav__dropdown { display: none; }
  .site-nav__logo { padding: 0; }
  .site-nav__burger {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
  }
  .site-nav__burger span {
    position: absolute;
    left: 6px;
    width: 20px;
    height: 2px;
    background: var(--c-ink);
    transition: transform var(--dur-ui) var(--ease-in-out);
  }
  .site-nav__burger span:first-child { top: 11px; }
  .site-nav__burger span:last-child { top: 19px; }
  .site-nav.is-menu-open .site-nav__panel {
    height: calc(100vh - var(--nav-offset));
    height: calc(100dvh - var(--nav-offset));
    border-radius: var(--radius-nav) var(--radius-nav) 0 0;
    clip-path: inset(0 0 0 0 round var(--radius-nav) var(--radius-nav) 0 0);
    transition: clip-path var(--dur-panel) var(--ease-drawer), height 0s;
  }
  .site-nav.is-menu-open .site-nav__burger span:first-child { transform: translateY(4px) rotate(45deg); }
  .site-nav.is-menu-open .site-nav__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-nav__mobile {
    display: flex;
    flex-direction: column;
    gap: 64px;
    height: calc(100% - var(--nav-height));
    padding: 24px 12px 24px 13px;
    overflow-y: auto;
  }
  .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .mobile-menu__link {
    position: relative;
    padding: 0 2px;
    font-family: var(--font-text);
    font-size: var(--text-menu-size);
    line-height: var(--text-menu-lh);
    letter-spacing: var(--text-menu-ls);
    color: var(--c-ink-soft);
  }
  .mobile-menu__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 32px 64px;
  }
  .mobile-menu__block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    color: var(--c-ink-soft);
  }
  .mobile-menu__block ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-menu__block a { font-family: var(--font-text); font-size: var(--text-body-size); line-height: var(--text-body-lh); letter-spacing: var(--text-body-ls); }
  .nav-cta { display: none; }

  /* Home */
  .clients { padding: 48px 0 0; }
  .clients__title { padding: 0 12px; }
  .clients__item { width: 160px; height: 88px; }
  .clients__logo { max-height: 46px; }
  
  
  .focus { padding: 100px 16px; }
  .focus__cards { grid-template-columns: 1fr; }
  .focus-card__more { display: inline-flex; }
  
  
  
  
  
  
  .recent { padding: 100px 12px; }
  .recent__inner { gap: 24px; }
  .slider--projects { --per-view: 1.1; }
  .slider--projects .project-card { aspect-ratio: 332 / 400; }
  
  
  
  

  /* Shared CTA + footer */
  .cta { padding: 160px 16px; }
  .cta__inner { gap: 32px; }
  .cta__text { width: 100%; }
  
  
  
  .site-footer { padding: 48px 16px 8px; }
  .site-footer__inner { gap: 64px; }
  .site-footer__top { flex-direction: column; gap: 48px; }
  .site-footer__intro { width: 100%; }
  .site-footer__cols { flex-wrap: wrap; gap: 48px; }
  .site-footer__col { flex-direction: column; gap: 24px; }
  .site-footer__logo { align-self: stretch; margin-bottom: -8px; }
  .site-footer__logo img { width: 100%; }
  .site-footer__meta { align-self: flex-start; flex-direction: column; align-items: flex-start; gap: 8px; }
  .full-image { height: 400px; }
  .story { padding: 100px 12px; }
  .story__inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .story__text { width: 100%; flex: none; }
  .story__media { flex: none; height: 301px; }
  
  
  
  
  
  
  
  
  
  
  

  /* Image headers */
  .image-head { height: 591px; padding: 0 16px 16px; }
  
  .image-head__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  
  
  
  .values { padding: 100px 12px; }
  .values__inner { gap: 64px; }
  .values__head { flex-direction: column; gap: 32px; }
  .values__cards { flex-direction: column; }
  .value-card { flex: none; }

  /* Projects list */
  .list-head { padding: 180px 12px 64px; }
  .list-head__inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .list-head__title { flex: none; }
  .list-head__aside { flex: none; width: 100%; }
  .projects-list { padding: 0 0 100px; }
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .card-grid__cell,
  .projects-list .card-grid__cell { padding: 0; }
  .card-grid__cell::after { display: none; }
  .projects-list .card-grid { gap: 0; }
  .projects-list .card-grid__cell { padding: 24px 0; }
  .projects-list .card-grid__cell:nth-child(odd) { border-right: 0; }

  /* Careers */
  
  
  
  
  
  .benefits { padding: 100px 12px; }
  .benefits__head { width: 100%; gap: 48px; }
  .benefits__grid { grid-template-columns: 1fr; gap: 48px; }
  .facts { padding: 48px 16px 0; }
  .facts .value-card { height: auto; min-height: 300px; }
  .facts .value-card__bottom { min-height: 0; }
  .recent__title { max-width: 100%; }
  .recent .slider { margin-bottom: 40px; }
  .recent--swapped .recent__head { flex-direction: column; align-items: flex-start; }
  .recent--swapped .recent__heading { gap: 24px; width: 100%; }   /* without it the column grows to the 900px title and cuts it off */
  .recent--swapped .recent__inner { gap: 40px; }
  .recent--swapped .slider__arrow { display: none; }   /* line breaks set for wide screens only */
  .project-card__client { top: 12px; left: 12px; width: 96px; height: 52px; padding: 8px 10px; }
  .projects-list .project-card__client { top: 12px; left: 12px; width: 144px; height: 78px; padding: 12px 15px; }
  .recent .project-card__client { width: 125px; height: 68px; }
  .project-card .btn { display: none; }
  .contact-direct { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .contact-direct__media { min-height: 260px; aspect-ratio: 16 / 9; }   /* flatter photo so the phone and e-mail stay near the top */
  .contact-direct__panel { gap: 40px; padding: 48px 24px; }
  .contact-direct__head .t-h2 br { display: inline; }   /* short heading: keep "Zapytaj o termin / i wycenę" on phones too */

  /* Contact people: the cells keep their outline on phones */
  .people { padding: 100px 12px; }
  .people__head { padding: 0 0 48px; }
  .people .card-grid { margin: 0; gap: 0; }
  .people .card-grid__cell { padding: 24px 16px; }
  .people .card-grid__cell:nth-child(odd) { border-right: 0; }
  .values__text { width: 100%; }

  /* Services */
  .image-head--services { min-height: 591px; padding: 120px 16px 16px; }
  .image-head__aside { width: 100%; }
  .services { padding: 100px 12px; }
  .service-row { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 48px 0; }
  .service-row { --row-bleed: 12px; }
  .service-row__text { width: 100%; margin-top: 0; }
  .service-row__icon { width: 70px; height: 70px; }
  .story--service .story__inner,
  .story--reverse .story__inner { grid-template-columns: minmax(0, 1fr); }
  .story--service .story__cell { padding: 24px 12px; }
  .story--service .story__cell--media,
  .story--reverse .story__text { border-left: 0; }
  .story--reverse .story__text,
  .story--reverse .story__cell--media { order: 0; }
  .story--service .story__cell--media { border-top: 1px solid var(--c-line); }
  .story--service { padding: 0; }
  .story--last { padding-bottom: 100px; }

  /* Project detail: description first, photos below */
  .case { padding: 0; }
  .case__inner { flex-direction: column-reverse; gap: 48px; }
  .case__info { width: 100%; padding: 120px 12px 0; }
  .case__sticky { position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; height: auto; padding: 0; }
  .case__title { padding-right: 0; }
  .case__fact { grid-template-columns: 1fr; gap: 6px; }
  .case__gallery { flex: none; width: 100%; grid-template-columns: 1fr; }

  /* Contact */
  .office { flex-direction: column; }
  .office__info,
  .office__map { flex: none; min-height: 0; }
  .office__info { padding: 64px 12px 32px; }
  .office__map { height: 400px; }
}

/* ==========================================================================
   Touch screens (no hover): service cards show their text in place of the overlay
   ========================================================================== */

@media (hover: none) {
  .project-card .btn { display: none; }
  .focus-card { justify-content: flex-start; gap: 24px; padding: 72px 24px 32px; }
  .focus__cards--pair .focus-card { height: auto; aspect-ratio: auto; }
  .focus-card__overlay {
    position: static;
    order: 1;
    z-index: auto;
    align-items: center;
    padding: 0;
    background: none;
    transform: none;
    transition: none;
  }
  .focus__cards--pair .focus-card__overlay-inner { width: auto; align-self: auto; align-items: center; text-align: center; }
  .focus-card__overlay .btn { display: none; }
  .focus-card__more { display: inline-flex; order: 2; margin-top: 16px; }
}

/* Narrow tablets: the longer card texts need more room for the titles to line up */
@media (min-width: 810px) and (max-width: 920px) {
  .facts .value-card__bottom { min-height: 300px; }
}

/* ==========================================================================
   Page sections: home numbers, about, careers, contact people
   ========================================================================== */

/* About photos: preserve the building's sign and entrance in the responsive crop. */
.full-image--office { height: auto; aspect-ratio: 16 / 9; }
.full-image--office .media img { transform: none; object-position: 50% 50%; }
@media (max-width: 809px) {
  .full-image--office { aspect-ratio: 4 / 3; }
}

/* Match the 16px side gutters between these three home sections. */
.focus.focus--joined { padding-bottom: 16px; }
.banner.banner--about { margin-top: 0; }
.banner--about + .numbers { padding-top: 16px; }

/* Two-panel numbers layout with three Sztopkanel facts. */
.numbers { padding: 160px 16px 0; }
.numbers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.numbers__box { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; }
.numbers__box--pattern > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.numbers__heading { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 24px; color: var(--c-dark); }
.numbers__heading svg { width: 48px; height: 48px; flex: none; }
.numbers__box--dark { background: var(--c-dark); color: var(--c-white); }
a.numbers__box { text-decoration: none; }   /* the dark box links to the "why us" cards on the About page */
.numbers__stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 64px; width: 100%; padding: 64px 32px; text-align: center; }
.numbers__stat { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.numbers__value { font-size: clamp(40px, 4.45vw, var(--text-stat-size)); }
.focus__cards--pair .focus-card__icon { width: 100px; height: 100px; }

@media (max-width: 1199px) {
  .numbers { padding-top: 120px; }
  .numbers__stats { gap: 32px; padding: 24px; }
}
@media (max-width: 809px) {
  .numbers { padding-top: 0; }
  .numbers__grid { grid-template-columns: minmax(0, 1fr); }
  .numbers__heading { gap: 12px; padding: 16px; }
  .numbers__heading svg { width: 36px; height: 36px; transform: rotate(90deg); }
  .numbers__box--dark { aspect-ratio: auto; }
  .numbers__stats { gap: 48px; padding: 64px 24px; }
}

.hero {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 760px;
  height: 100svh;
  padding: 32px 32px 48px;
  overflow: hidden;
}
.hero__media { z-index: -1; }
.hero__media img { filter: brightness(.42); transform: scale(1.06); }
.hero__content { display: flex; flex-direction: column; justify-content: space-between; align-items: center; width: 100%; height: 76%; }
.hero__top { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.hero__title { width: 780px; max-width: 100%; text-align: center; color: var(--c-white); }
.hero__lead { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 580px; max-width: 100%; }
.hero__text { text-align: center; color: var(--c-bg); }
.cert-badges { display: flex; justify-content: center; gap: 40px; width: 100%; }
.cert-badges a { display: flex; align-items: center; gap: 12px; max-width: 260px; }
.approval-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #dcdcdc; color: #000; }
.approval-icon > svg { width: 24px; height: 24px; flex: none; }
.approval-icon--glass { background: var(--c-glass); color: var(--c-white); -webkit-backdrop-filter: blur(var(--blur-md)); backdrop-filter: blur(var(--blur-md)); }
.cert-badges__label { display: block; margin-bottom: 4px; opacity: .65; }
.hero .cert-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: fit-content;   /* boxes grow to the longest label, so none wraps while there is room */
  max-width: 100%;
  color: white;
}
.hero .cert-badges a {
  width: 100%;
  max-width: none;
  padding: 20px;
  border-radius: var(--radius-nav);
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.banner { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 700px; margin-top: 8px; padding: 128px 32px; overflow: hidden; }
.banner .media { z-index: -1; }
.banner .media img { object-position: 50% 48%; filter: brightness(.42); }
.banner__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 100%; }
.banner__title { width: 700px; max-width: 100%; text-align: center; color: var(--c-bg); }
.banner__text { max-width: 580px; text-align: center; color: #eee; }
.banner__inner .label { align-self: center; }

.page-head { padding: 180px 16px 64px; }
.page-head__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }
.page-head__aside { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: var(--page-aside-width); flex: none; min-width: 0; }
.page-head__aside p { color: var(--c-ink-soft); }
.page-head__title { width: auto; max-width: 900px; flex: 1; min-width: 0; color: var(--c-ink); }
.about-page .page-head__inner { align-items: flex-start; }
.about-page .page-head__main { display: flex; flex-direction: column; gap: 32px; flex: 1; max-width: 900px; min-width: 0; }
.about-page .page-head__title { width: 100%; max-width: 100%; flex: none; text-wrap: balance; }
.about-page .page-head__main .cert-badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.about-page .page-head__main .cert-badges a { width: 100%; max-width: none; }
/* Desktop: the three approvals sit one after another with the same 40px between them (equal-width columns made the visible gaps differ with the text length) */
@media (min-width: 1200px) {
  .about-page .page-head__main .cert-badges { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 16px 40px; }
  .about-page .page-head__main .cert-badges a { width: auto; }
}

.certificates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 32px; }
.certificate { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px; background: var(--c-dark-soft); color: var(--c-white); min-height: 380px; min-width: 0; }
.certificate__top { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-bottom: 24px; }
.certificate__top > .t-mono { color: #999; }
.certificate p { color: #c9c9c9; }
.certificate .btn { margin-top: auto; }

/* Contact people: two light panels with an 8px gap (like the other card grids), no divider lines.
   Role and name at the top, phone and e-mail at the bottom. */
.people__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 16px; }
.person-card { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 64px; padding: 40px; background: var(--c-panel); min-width: 0; }
.person-card__role { opacity: .6; margin-bottom: 12px; }
.person-card__links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.person-card__row { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.person-card__email a { max-width: 100%; overflow-wrap: anywhere; }
.person-card__copy { margin: 4px 0 -12px; }

.section-pad { padding: 144px 16px; }
.section-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.section-heading h2 { max-width: 880px; }
/* Breaks the heading between two phrases when there is room, without a hard line break; narrower columns wrap inside a phrase and stay balanced. */
.section-heading .h2-phrase { display: inline-block; text-wrap: balance; }
.career-photos { display: grid; grid-template-columns: minmax(0, 1fr) var(--page-aside-width);   /* right photo = width of the hero text column */ gap: 8px; padding: 0 16px; }
.career-photos figure { height: 650px; overflow: hidden; }
.career-photos img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* Crops keep both people fully in frame */
.career-photos figure:nth-child(1) img { object-position: 35% 55%; }   /* keeps both workers and the sparks in the crop */
.career-photos figure:nth-child(2) img { object-position: 50% 50%; }
.career-benefits { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; align-items: start; }
.career-benefits__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; position: sticky; top: 120px; }
.perk-list { display: flex; flex-direction: column; border-bottom: 1px solid var(--c-line); }
.perk { display: flex; align-items: center; gap: 24px; padding: 28px 64px 28px 0; border-top: 1px solid var(--c-line); min-width: 0; }
.perk__icon { display: flex; align-items: center; justify-content: center; flex: none; width: var(--btn-circle); height: var(--btn-circle); border-radius: var(--radius-button); background: var(--c-dark); color: var(--c-light); }   /* same black circle as the arrow in the buttons */
.perk p { min-width: 0; }
.career-company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding-top: 0; padding-bottom: 0; }
/* The logo strip right below the section: no caption, 16px from the section above */
.career-company + .clients { padding-top: 144px; }   /* same space above the logos as below them (.careers-apply margin-top) */
.career-company__pattern { position: relative; aspect-ratio: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.career-company__pattern img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.career-company__pattern span { z-index: 1; }
.career-company__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; padding: 32px; min-width: 0; }
.careers-cta { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; padding: 160px 16px; background: var(--c-accent); overflow: hidden; }
.careers-cta__inner { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.careers-cta__inner .label { align-self: center; }
.careers-cta__title { width: 600px; max-width: 100%; text-align: center; color: var(--c-ink); }
.careers-cta__text { max-width: 565px; text-align: center; }
.careers-apply { margin-top: 144px; scroll-margin-top: 100px; }
.careers-apply__email { overflow-wrap: anywhere; text-align: center; max-width: 100%; }

@media (max-width: 1199px) {
  .page-head__inner { gap: 48px; }
  .page-head__aside { width: var(--page-aside-width); }
  .page-head__title { flex: 1; }
  .about-page .page-head__main { max-width: none; }
  .about-page .page-head__main .cert-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .certificate { padding: 24px; }
  .certificate h3 { font-size: 26px; }
  .person-card { padding: 32px; }
  .section-pad { padding: 100px 16px; }
  .career-photos figure { height: 420px; }
  .career-company { padding-top: 0; padding-bottom: 0; }
  .career-company__copy { padding: 24px; }
  .careers-cta { padding: 120px 24px; }
}
@media (max-width: 809px) {
  .hero { height: auto; min-height: 100svh; padding: 145px 16px 48px; justify-content: center; }
  .hero__content { height: auto; gap: 64px; }
  .hero__lead { width: 460px; }
  .hero__text { font-size: var(--text-body-size); }
  .hero__media img { transform: none; }
  .cert-badges { flex-wrap: wrap; gap: 20px 16px; }
  .cert-badges a { width: calc(50% - 12px); max-width: 200px; gap: 8px; }
  .hero .cert-badges { grid-template-columns: minmax(0, 1fr); width: min(100%, 360px); }
  .banner { height: auto; min-height: 580px; padding: 80px 24px; }
  .banner--about .media img { object-position: 36% 48%; }
  .banner__inner { gap: 24px; }
  .banner__title { width: 100%; }
  .page-head { padding: 132px 16px 48px; }
  .page-head__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .page-head__aside, .page-head__title { width: 100%; max-width: 100%; flex: none; }
  .page-head__aside .label { display: none; }
  .about-page .page-head__main { width: 100%; flex: none; }
  .about-page .page-head__main .cert-badges { grid-template-columns: minmax(0, 1fr); }
  .certificates { grid-template-columns: 1fr; }
  .certificate { padding: 32px 24px; min-height: 350px; }
  .people__grid { grid-template-columns: 1fr; margin: 0; }   /* the section already has 12px side padding on phones */
  .person-card { padding: 32px 24px; gap: 40px; }
  .section-pad { padding: 80px 16px; }
  .career-benefits { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .career-benefits__intro { position: static; gap: 32px; }
  .perk { gap: 16px; padding: 24px 24px 24px 0; }
  .section-heading { gap: 24px; }
  .section-heading h2 { max-width: 100%; }
  .career-photos { grid-template-columns: minmax(0, 1fr); }
  .career-photos figure { height: 260px; }
  .career-company { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 0; padding-bottom: 0; }
  .career-company__pattern { aspect-ratio: 1; }
  .career-company__copy { padding: 0; gap: 24px; }
  .careers-cta { padding: 88px 24px; }
  .careers-cta__inner { gap: 32px; }
  .careers-apply { margin-top: 80px; }
  .career-company + .clients { padding-top: 80px; }
}
@media (max-width: 359px) {
  .person-card { padding: 28px 20px; }
}

/* About uses one page gutter across all of its sections. */
.about-page { --about-gutter: 16px; }
.about-page .page-head,
.about-page .facts,
.about-page .benefits--history { padding-inline: var(--about-gutter); }
/* Facts: its own section, 60% of the viewport at least; the cards keep their size and sit in the middle of the page background */
.about-page .facts { box-sizing: border-box; display: flex; align-items: center; min-height: 60vh; min-height: 60svh; padding-top: 128px; padding-bottom: 0; }   /* the next section has its own 128px top margin, so the space above and below the cards is equal */
.about-page .facts .values__cards { width: 100%; }
.about-page .benefits--history { box-sizing: border-box; display: flex; min-height: 100vh; background: var(--c-panel); }
.about-page .benefits--history { margin-top: 128px; }
.about-page .benefits--history .dash-line { border-bottom-style: solid; }
.about-page .benefits--history .benefits__inner { flex: 1; justify-content: center; gap: 56px; }
@media (max-width: 1199px) { .about-page .benefits--history { margin-top: 120px; } }
@media (max-width: 809px) {
  .about-page { --about-gutter: 12px; }
  .about-page .benefits--history { margin-top: 100px; }
  .about-page .benefits--history .benefits__inner { gap: 40px; }
}

/* ==========================================================================
   CTA welding dashes (settings for every CTA)
   ========================================================================== */

/* Welding dashes in the closing CTA of every page (animation in main.js).
   All controls live here — edit the values below. */
[data-weld-lines] {
  --weld-color: #D3D3D3;          /* dash colour at rest */
  --weld-color-hot: #BDBDBD;      /* dash colour right at the cursor — fades to the rest colour at --weld-radius */
  --weld-direction: vertical;     /* vertical | horizontal */
  --weld-dash: 80px;              /* dash length */
  --weld-gap: 29px;               /* gap between dashes along a line */
  --weld-spacing: 38px;           /* minimum distance between lines — the same before the first, between lines and after the last */
  --weld-thickness: 2px;          /* dash thickness */
  --weld-radius-full: 100px;      /* within this distance from the cursor every gap is fully welded */
  --weld-radius: 240px;           /* outer edge of the field — beyond it gaps stay open */
}

.cta-weld {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ==========================================================================
   Mobile contact bar (every page except Contact)
   ========================================================================== */

/* Fixed "Zapytaj o termin" bar on phones; the Contact page has no bar (and no .has-mobile-contact on <body>). */
.mobile-contact-bar { display: none; }

@media (max-width: 809px) {
  .has-mobile-contact {
    --mobile-contact-bottom: max(32px, env(safe-area-inset-bottom, 0px));
    --mobile-contact-height: calc(16px + 44px + var(--mobile-contact-bottom));
  }

  html:has(.has-mobile-contact) {
    scroll-padding-bottom: calc(76px + max(32px, env(safe-area-inset-bottom, 0px)));
  }

  /* Let the final footer links scroll fully above the fixed bar. */
  .has-mobile-contact .site-footer {
    padding-bottom: calc(8px + var(--mobile-contact-height));
  }

  .mobile-contact-bar {
    display: block;
    position: fixed;
    z-index: 9;
    inset: auto 0 0;
    padding: 16px max(16px, env(safe-area-inset-right, 0px)) var(--mobile-contact-bottom) max(16px, env(safe-area-inset-left, 0px));
    background: rgb(255 255 255 / .25);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
  }

  /* With JS the bar stays hidden below the screen until .is-visible is set (see main.js) */
  .js .mobile-contact-bar {
    transform: translateY(100%);
    visibility: hidden;
    transition: transform var(--dur-panel) var(--ease-drawer), visibility 0s linear var(--dur-panel);
  }

  .js .mobile-contact-bar.is-visible {
    transform: none;
    visibility: visible;
    transition: transform var(--dur-panel) var(--ease-drawer), visibility 0s;
  }

  .mobile-contact-bar .btn {
    display: flex;
    width: 100%;
    border-radius: var(--radius-button);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: transform var(--dur-press) var(--ease-out);
  }

  .mobile-contact-bar .btn__body {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    white-space: normal;
    text-align: center;
  }

  .mobile-contact-bar .btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px #000;
  }

  .mobile-contact-bar .btn:active:not(:focus-visible) { transform: scale(.97); }
  .site-nav.is-menu-open ~ .mobile-contact-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* The bar fades in place instead of sliding up */
  .js .mobile-contact-bar { transform: none; opacity: 0; transition: opacity var(--dur-hover) var(--ease), visibility 0s linear var(--dur-hover); }
  .js .mobile-contact-bar.is-visible { opacity: 1; transition: opacity var(--dur-hover) var(--ease), visibility 0s; }
  .mobile-contact-bar .btn { transition: none; }
  .mobile-contact-bar .btn:active { transform: none; }
}

/* Reduced motion for UI motion: states change at once, colour fades stay */
@media (prefers-reduced-motion: reduce) {
  .btn__circle .icon-arrow,
  .line-link::after,
  .nav-link::after,
  .site-nav__chevron,
  .site-nav__dropdown,
  .site-nav__panel,
  .site-nav.is-menu-open .site-nav__panel,
  .site-nav__burger span,
  .focus-card__plus,
  .focus-card__overlay,
  .project-card .media img,
  .project-card .btn { transition: none; }
  .project-card:hover .media img,
  .project-card:focus-visible .media img { transform: none; }
  .btn:active,
  .slider__arrow:active,
  .slider__dot:active,
  .copy-btn:active { transform: none; }
  .slider__track.is-animating { transition-duration: 1ms; }   /* still fires transitionend for the loop reset */
}

/* ==========================================================================
   Phone polish (<= 809px): added after the first review of the mobile layout
   ========================================================================== */

.btn--secondary .btn__body,
.btn--secondary .btn__circle { background: var(--c-light); color: var(--c-dark); }

@media (pointer: coarse) {
  .slider__viewport { touch-action: pan-x; }   /* on the photos only horizontal drags work; the page scrolls by the text around the slider */
}

@media (max-width: 809px) {
  /* Headings 20% smaller (size and tracking) */
  :root {
    --text-display-size: 2.432rem; --text-display-ls: -2px;
    --text-h2-size: 28.8px;        --text-h2-ls: -.8px;
    --text-h3-ls: -.8px;
    --text-h2-lh: 1.2;
    --text-body-lh: 1.4;
    --text-title-ls: -.025em;      /* 0.5px less tight than before */
  }

  /* Navigation */
  .site-nav__logo img { width: 140px; height: auto; }
  .site-nav::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgb(245 245 245 / .25);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-panel) var(--ease-drawer);
  }
  .site-nav.is-menu-open::before { opacity: 1; }

  /* Home */
  .hero .cert-badges { gap: 8px; }
  .focus-card__more { margin-top: 16px; }
  .numbers__box--pattern { aspect-ratio: 3 / 2; }   /* two thirds of the former square; grows if the heading needs more */
  .recent--swapped .slider__dots { margin-inline: auto; }

  /* Services */
  .image-head--services { height: auto; min-height: 621px; }
  .service-row { gap: 0; align-items: flex-start; text-align: left; }
  .service-row__icon { order: 0; align-self: flex-start; width: 70px; height: 70px; margin: 0 0 32px; }
  .service-row__title { order: 1; align-self: flex-start; margin: 0 0 12px; }
  .service-row__text { order: 2; align-self: flex-start; margin: 0 0 20px; }
  .service-row__link { order: 3; align-self: flex-start; justify-self: auto; }
  .story--service .story__cell--media { order: -1; border-top: 0; }
  .story--service .story__text { order: 1; padding-bottom: 96px; border-top: 1px solid var(--c-line); border-left: 0; }

  /* About: the approvals go under the button */
  .about-page .page-head__main { display: contents; }
  .about-page .page-head__title { order: 1; }
  .about-page .page-head__aside { order: 2; }
  .about-page .page-head__main .cert-badges { order: 3; }
  .about-page .benefits--history .benefits__inner { gap: 96px; }
  .about-page .benefits--history .benefits__grid { gap: 64px; }
  .about-page .benefits--history .benefit { gap: 17px; }
  .about-page .page-head__main .cert-badges { gap: 20px; }

  /* People cards and contact details */
  .person-card__row .t-title { font-size: 16px; letter-spacing: -.02em; }
  .contact-direct__value { font-size: var(--text-title-size); font-weight: 500; line-height: var(--text-title-lh); letter-spacing: var(--text-title-ls); }

  .list-head__title { max-width: 100%; }

  /* Careers heading: the phrases flow as normal text, evenly balanced */
  .section-heading .h2-phrase { display: inline; }
  .section-heading h2 { text-wrap: balance; }

  /* Careers: two portrait photos side by side, the right one lower */
  .career-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .career-photos figure { height: 240px; }
  .career-photos figure:nth-child(2) { margin-top: 72px; }
  .career-photos figure:nth-child(1) img { object-position: 25% 55%; }   /* portrait crop: the welder on the left stays in frame */

  /* Projects list: the cards keep the same space to the lines on the sides */
  .projects-list .card-grid__cell { padding: 24px; }

  /* Footer: the logo is cut by the bottom edge */
  .site-footer__logo { margin-bottom: -16px; }
  .site-footer__logo img { display: block; }
}