/* =========================================================================
   Alumic S.A. — arkusz główny
   Barwy z logo (zmierzone w pliku 2809 px): #005BAB, #FBA61C.
   Krój: Archivo (zmienny, szerokość 62–125, grubość 100–900), z naszego serwera.
   ========================================================================= */

/* --- Kroje (tools/fonty-lokalne.py, + zakres szerokości) --- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo zapasowy';
  font-weight: 1 600;
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  size-adjust: 93.95%;
  ascent-override: 93.46%;
  descent-override: 22.35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Archivo zapasowy';
  font-weight: 601 1000;
  src: local('Arial Bold'), local('Helvetica Bold'), local('Liberation Sans Bold'), local('Arial');
  size-adjust: 110.39%;
  ascent-override: 79.54%;
  descent-override: 19.02%;
  line-gap-override: 0%;
}

/* --- Tokeny --- */
:root {
  --al-grafit: #14181d;
  --al-grafit-2: #1d232a;
  --al-grafit-3: #2a323b;
  --al-stal: #59646e;
  --al-stal-ciemna: #444e57;
  --al-kreska: #d8dde2;
  --al-jasne: #eef1f4;
  --al-biel: #ffffff;
  --al-niebieski: #005bab;
  --al-niebieski-ciemny: #004a8c;
  --al-niebieski-jasny: #8dbbe8;
  --al-pomarancz: #fba61c;
  --al-pomarancz-jasny: #ffb83d;
  --al-tekst: #14181d;
  --al-tekst-2: #444e57;
  --al-na-ciemnym: #f3f5f7;
  --al-na-ciemnym-2: #b4bdc6;

  --al-krój: 'Archivo', 'Archivo zapasowy', Arial, sans-serif;
  --al-szer-naglowkow: 112%;

  --fs-h1: clamp(2rem, 1.35rem + 1.9vw, 2.75rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 0.85vw, 2.125rem);
  --fs-h3: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.4vw, 1.3125rem);
  --fs-body: 1.0625rem;
  --fs-maly: 0.9375rem;
  --fs-etykieta: 0.75rem;

  --px: 1.25rem;
  --sekcja: clamp(4rem, 2.75rem + 4vw, 6rem);
  --kontener: 80rem;
  --naglowek-h: 4.5rem;
  --promien: 2px;

  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  --cien: 0 1px 2px rgba(20, 24, 29, 0.06), 0 8px 24px rgba(20, 24, 29, 0.08);
}
@media (min-width: 768px) { :root { --px: 2rem; } }
@media (min-width: 1200px) { :root { --px: 3rem; --naglowek-h: 5.5rem; } }

/* --- Podstawy --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--naglowek-h) + 1rem); }
body {
  margin: 0;
  font-family: var(--al-krój);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--al-tekst);
  background: var(--al-biel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: var(--al-niebieski); text-underline-offset: 0.2em; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 {
  margin: 0;
  font-stretch: var(--al-szer-naglowkow);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--al-pomarancz); outline-offset: 3px; }

.al-kontener { width: min(100% - 2 * var(--px), var(--kontener)); margin-inline: auto; }
.al-pomin {
  position: absolute; left: 1rem; top: -4rem; z-index: 10000;
  padding: 0.75rem 1rem; background: var(--al-grafit); color: #fff;
}
.al-pomin:focus { top: 1rem; }

/* --- Etykieta nad nagłówkiem: pochylony znacznik z okna w logo --- */
.al-etykieta {
  display: inline-flex; align-items: center; gap: 0.75rem;
  margin: 0 0 1.5rem;
  font-size: var(--fs-etykieta);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--al-stal-ciemna);
}
.al-etykieta::before {
  content: ''; flex: none;
  width: 1.125rem; height: 0.625rem;
  background: var(--al-pomarancz);
  transform: skewX(-22deg);
}
.al-etykieta--jasna { color: var(--al-na-ciemnym-2); }

/* --- Przyciski --- */
.al-przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: 3rem; padding: 0.75rem 1.375rem;
  border: 1px solid transparent; border-radius: var(--promien);
  font: inherit; font-size: var(--fs-maly); font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.al-przycisk .al-ikona { transition: translate var(--dur-base) var(--ease); }
.al-przycisk:hover .al-ikona { translate: 3px 0; }
.al-przycisk--akcent { background: var(--al-pomarancz); color: var(--al-grafit); }
.al-przycisk--akcent:hover { background: var(--al-pomarancz-jasny); }
.al-przycisk--obrys { border-color: rgba(255, 255, 255, 0.45); color: var(--al-na-ciemnym); }
.al-przycisk--obrys:hover { border-color: #fff; background: rgba(255, 255, 255, 0.07); }
.al-przycisk--ciemny { background: var(--al-grafit); color: #fff; }
.al-przycisk--ciemny:hover { background: var(--al-niebieski); }

/* =========================================================================
   NAGŁÓWEK W DWÓCH RZĘDACH
   1. Niebieski pasek (barwa znaku): adres, godziny, telefon biura, e-mail.
      Przewija się razem ze stroną.
   2. Biała belka przypięta do góry (docx: „zablokowana, nie rusza się"):
      logo z lewej, menu, przycisk wyceny.
   ========================================================================= */
.al-pasek { background: var(--al-niebieski); color: #fff; font-size: 0.8125rem; line-height: 1.3; }
.al-pasek__wnetrze { display: flex; align-items: center; justify-content: center; gap: 0 2rem; }
.al-pasek ul { display: flex; align-items: center; gap: 0 1.5rem; }
.al-pasek li { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.al-pasek .al-ikona { flex: none; color: var(--al-pomarancz); }
.al-pasek a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  color: #fff; text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.al-pasek a:hover { color: #ffd58a; }
.al-pasek strong { font-weight: 600; letter-spacing: 0.03em; }
.al-pasek__et { color: #d6e5f4; }
.al-pasek .al-pasek__info { display: none; color: #e6eff8; }
.al-pasek__social { justify-content: center; min-width: 2.75rem; }
@media (max-width: 599px) {
  .al-pasek__mail, .al-pasek__et { display: none; }
  /* sama ikona e-maila: pole dotyku 44 px (stany.py: było 16×44) */
  .al-pasek a { min-width: 2.75rem; justify-content: center; }
}
@media (min-width: 1024px) {
  .al-pasek__wnetrze { justify-content: space-between; }
  .al-pasek .al-pasek__info { display: flex; }
}

.al-naglowek {
  position: sticky; top: 0; z-index: 900;
  background: var(--al-biel);
  border-bottom: 1px solid var(--al-kreska);
  transition: box-shadow var(--dur-base) var(--ease);
}
.al-naglowek.przewiniety { box-shadow: 0 8px 28px rgba(20, 24, 29, 0.1); }
.al-naglowek__wnetrze { display: flex; align-items: center; gap: 2rem; height: var(--naglowek-h); }
.al-logo { display: flex; align-items: center; flex: none; min-height: 2.75rem; line-height: 0; transition: opacity var(--dur-fast) var(--ease); }
.al-logo:hover { opacity: 0.8; }
.al-logo img { width: auto; height: 2.25rem; }
@media (min-width: 1200px) { .al-logo img { height: 2.875rem; } }

.al-nav { display: none; margin-left: auto; }
.al-nav__lista { display: flex; align-items: center; gap: 0.5rem; }
.al-nav__pozycja { position: relative; display: flex; align-items: center; }
.al-nav__link {
  display: block; padding: 0.75rem 0.75rem;
  font-size: 0.875rem; font-weight: 600; font-stretch: 106%;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--al-grafit); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.al-nav__link:hover, .al-nav__pozycja:focus-within > .al-nav__link { color: var(--al-niebieski); }
.al-nav__rozwin {
  display: grid; place-items: center;
  width: 1.75rem; height: 2.75rem; margin-left: -0.5rem;
  padding: 0; border: 0; background: none; color: var(--al-stal);
  cursor: pointer;
}
.al-nav__rozwin .al-ikona { transition: rotate var(--dur-base) var(--ease); }
.al-nav__pozycja--rozwijana:hover .al-nav__rozwin,
.al-nav__rozwin[aria-expanded="true"] { color: var(--al-niebieski); }
.al-nav__rozwin[aria-expanded="true"] .al-ikona,
.al-nav__pozycja--rozwijana:hover .al-nav__rozwin .al-ikona { rotate: 180deg; }

.al-podmenu {
  position: absolute; top: calc(100% + 1rem); left: -0.5rem;
  min-width: 19rem; padding: 1rem 0;
  background: var(--al-biel);
  border-top: 3px solid var(--al-niebieski);
  box-shadow: var(--cien);
  opacity: 0; visibility: hidden; translate: 0 6px;
  transition: opacity var(--dur-base) var(--ease), translate var(--dur-base) var(--ease), visibility 0s linear var(--dur-base);
}
.al-podmenu::before { content: ''; position: absolute; left: 0; right: 0; top: -1.25rem; height: 1.25rem; }
.al-nav__pozycja--rozwijana:hover .al-podmenu,
.al-nav__pozycja--rozwijana:focus-within .al-podmenu,
.al-podmenu.otwarte {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity var(--dur-base) var(--ease), translate var(--dur-base) var(--ease), visibility 0s;
}
.al-podmenu__link {
  display: block; padding: 0.5rem 1.5rem;
  font-size: var(--fs-maly); color: var(--al-grafit); text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.al-podmenu__link:hover { color: var(--al-niebieski); }
.al-podmenu__pozycja--grupa > .al-podmenu__link { font-weight: 600; }
.al-podmenu__lista--p2 { margin: 0 0 0.5rem 1.5rem; border-left: 1px solid var(--al-kreska); }
.al-podmenu__lista--p2 .al-podmenu__link { padding-left: 1rem; color: var(--al-tekst-2); }
.al-podmenu__lista--p2 .al-podmenu__link:hover { color: var(--al-niebieski); }

.al-naglowek__kontakt { display: none; align-items: center; padding-left: 2rem; border-left: 1px solid var(--al-kreska); }

.al-hamburger {
  display: grid; place-items: center; margin-left: auto;
  width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid #7d8790; border-radius: var(--promien);
  background: none; color: var(--al-grafit); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.al-hamburger:hover { border-color: var(--al-niebieski); color: var(--al-niebieski); }

@media (min-width: 1200px) {
  .al-nav, .al-naglowek__kontakt { display: flex; }
  .al-hamburger { display: none; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .al-naglowek__wnetrze { gap: 1.5rem; }
  .al-naglowek__kontakt { padding-left: 1.5rem; }
  .al-nav__lista { gap: 0; }
  .al-nav__link { padding-inline: 0.625rem; letter-spacing: 0.05em; }
}

/* --- Menu mobilne: pełny ekran --- */
.al-mobilne {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  padding: 0 var(--px) 2rem;
  background: var(--al-grafit); color: var(--al-na-ciemnym);
  overflow-y: auto; overscroll-behavior: contain;
  translate: 100% 0;
  transition: translate var(--dur-slow) var(--ease);
}
.al-mobilne[hidden] { display: none; }
.al-mobilne.otwarte { translate: 0 0; }
.al-mobilne__gora { display: flex; align-items: center; justify-content: space-between; height: var(--naglowek-h); }
.al-mobilne__gora .al-logo { padding: 0.375rem 0.625rem; background: #fff; border-radius: var(--promien); }
.al-mobilne__gora .al-logo img { height: 1.875rem; }
.al-mobilne__zamknij {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--promien);
  background: none; color: #fff; cursor: pointer;
}
.al-mobilne__lista { margin-top: 1rem; }
.al-mobilne__pozycja { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.al-mobilne__link {
  display: block; padding: 1rem 0;
  font-size: 1.375rem; font-weight: 600; font-stretch: var(--al-szer-naglowkow);
  color: #fff; text-decoration: none;
}
.al-mobilne .al-podmenu__lista { margin: -0.25rem 0 1rem; }
.al-mobilne .al-podmenu__link { padding: 0.5rem 0; color: var(--al-na-ciemnym-2); font-size: 1rem; }
.al-mobilne .al-podmenu__lista--p2 { margin: 0 0 0.25rem 0.25rem; padding-left: 1rem; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.al-mobilne .al-podmenu__lista--p2 .al-podmenu__link { color: var(--al-na-ciemnym-2); }
.al-mobilne__kontakt { display: grid; gap: 0.75rem; margin-top: auto; padding-top: 2rem; }
.al-mobilne__mail { color: #fff; }
.al-mobilne__godziny { margin: 0; color: var(--al-na-ciemnym-2); font-size: var(--fs-maly); }
body.menu-otwarte { overflow: hidden; }


/* =========================================================================
   PIERWSZY EKRAN
   Grafit z siatką rysunku technicznego. Z lewej tekst, z prawej okno ze
   znaku firmy (geometria z logo), a w jego czterech kwaterach realizacje.
   Pod spodem pasek faktów. Telefon: tekst, okno, fakty jedno pod drugim.
   ========================================================================= */
.al-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: 2rem 2.5rem;
  background-color: var(--al-grafit);
  background-image:
    radial-gradient(ellipse 55% 70% at 78% 40%, rgba(0, 91, 171, 0.28) 0%, rgba(0, 91, 171, 0) 70%),
    linear-gradient(180deg, #171c22 0%, var(--al-grafit) 100%);
  color: var(--al-na-ciemnym);
}
.al-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(ellipse 65% 80% at 75% 45%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 80% at 75% 45%, #000 0%, transparent 78%);
}
/* Akcent okien w tle: dwa obrysy okna ze znaku i dwa smugi światła pod
   kątem skosu z logo. Barwa tła bez zmian, wszystko na 3–7% bieli. */
.al-hero__tlo-okno {
  position: absolute; z-index: -1; pointer-events: none; max-width: none; height: auto;
  fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 1.5; vector-effect: non-scaling-stroke;
}
.al-hero__tlo-okno--1 { left: -20rem; bottom: -16rem; width: 66rem; }
.al-hero__tlo-okno--2 { right: -14rem; top: -11rem; width: 40rem; stroke: rgba(255, 255, 255, 0.05); }
@media (max-width: 1023px) { .al-hero__tlo-okno--2 { display: none; } }
.al-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(112deg, transparent 0 30%, rgba(255, 255, 255, 0.035) 30% 38%, transparent 38% 50%, rgba(255, 255, 255, 0.025) 50% 53%, transparent 53%);
}
.al-hero__siatka { display: grid; gap: 2rem; align-items: center; margin-bottom: 2.5rem; }

.al-hero__tytul { font-size: var(--fs-h1); color: #fff; margin-bottom: 1.5rem; }
.al-hero__lead { font-size: var(--fs-lead); line-height: 1.5; color: #c9d1d8; margin-bottom: 2rem; }
.al-hero__akcje { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; }
@media (max-width: 599px) { .al-hero__akcje .al-przycisk { flex: 1 1 100%; } }
.al-hero__kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; font-size: var(--fs-maly); color: var(--al-na-ciemnym-2); }
.al-hero__kontakt li { display: inline-flex; align-items: center; gap: 0.5rem; }
.al-hero__kontakt .al-ikona { color: var(--al-pomarancz); }
.al-hero__tel { display: inline-flex; align-items: center; gap: 1rem; min-height: 2.75rem; color: var(--al-na-ciemnym-2); text-decoration: none; }
.al-hero__tel-ikona {
  display: grid; place-items: center; width: 3rem; height: 3rem; flex: none;
  border-radius: 50%; border: 1px solid rgba(251, 166, 28, 0.55);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.al-hero__tel-tekst { display: grid; gap: 0.125rem; line-height: 1.25; }
.al-hero__tel strong { font-size: 1.375rem; font-weight: 600; font-stretch: var(--al-szer-naglowkow); color: #fff; letter-spacing: 0.01em; transition: color var(--dur-fast) var(--ease); }
.al-hero__tel:hover strong { color: var(--al-pomarancz); }
.al-hero__tel:hover .al-hero__tel-ikona { background: var(--al-pomarancz); }
.al-hero__tel:hover .al-hero__tel-ikona .al-ikona { color: var(--al-grafit); }

/* --- Okno ze znaku --- */
/* Telefon i tablet: okno NAD tekstem, żeby zdjęcia realizacji były na pierwszym ekranie
   (numer biura stoi wtedy w niebieskim pasku nad belką). */
.al-hero__okno { position: relative; margin: 0; order: -1; justify-self: center; width: min(100% + 1.5rem, 34rem); }
.al-hero__grafika { width: 100%; height: auto; overflow: visible; }
.al-hero__rama { filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.5)); }
.al-hero__kontur {
  fill: none; stroke: var(--al-pomarancz); stroke-width: 2;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  animation: al-rysuj 1.8s var(--ease) 0.9s backwards;
}
@keyframes al-rysuj { from { stroke-dashoffset: 1; } }
/* Szyby: <img> w procentach viewBox (-22 -16 606 402), wycięte clip-path
   do kształtu kwatery z logo. Proporcja pliku = proporcja prostokąta kwatery. */
.al-hero__szyba {
  position: absolute; overflow: hidden;
  animation: al-szyba 900ms var(--ease) backwards;
}
.al-hero__szyba img { width: 100%; height: 100%; object-fit: cover; animation: al-szyba-zblizenie 1800ms var(--ease) backwards; }
.al-hero__szyba::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 45%);
}
.al-hero__szyba--0 { left: 25.25%; top: 16.92%; width: 32.51%; height: 30.85%; clip-path: polygon(25.89% 0, 100% 0, 74.11% 100%, 0 100%); animation-delay: 200ms; }
.al-hero__szyba--1 { left: 52.81%; top: 16.92%; width: 32.67%; height: 30.85%; clip-path: polygon(25.76% 0, 100% 0, 74.24% 100%, 0 100%); animation-delay: 360ms; }
.al-hero__szyba--2 { left: 14.52%; top: 52.24%; width: 33.66%; height: 33.83%; clip-path: polygon(27.94% 0, 100% 0, 72.06% 100%, 0 100%); animation-delay: 520ms; }
.al-hero__szyba--3 { left: 42.24%; top: 52.24%; width: 33.50%; height: 33.83%; clip-path: polygon(28.08% 0, 100% 0, 72.41% 100%, 0 100%); animation-delay: 680ms; }
.al-hero__szyba--1 img { animation-delay: 160ms; }
.al-hero__szyba--2 img { animation-delay: 320ms; }
.al-hero__szyba--3 img { animation-delay: 480ms; }
@keyframes al-szyba { from { opacity: 0; } }
@keyframes al-szyba-zblizenie { from { scale: 1.16; } }

/* Podpisy szyb: lewy dolny róg każdej kwatery (procenty z viewBox -24 -24 610 418). */
.al-hero__podpisy { display: none; }
@media (min-width: 600px) {
  .al-hero__podpisy { display: block; }
  .al-hero__miejsce {
    position: absolute;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
    color: #fff; background: rgba(20, 24, 29, 0.8);
    animation: al-szyba 700ms var(--ease) 1.2s backwards;
  }
  .al-hero__miejsce--0 { left: 27.7%; bottom: 53.7%; }
  .al-hero__miejsce--1 { left: 55.3%; bottom: 53.7%; }
  .al-hero__miejsce--2 { left: 17.0%; bottom: 15.4%; }
  .al-hero__miejsce--3 { left: 44.7%; bottom: 15.4%; }
}

@media (min-width: 1024px) {
  .al-hero { padding-block: clamp(2.5rem, 1rem + 3vw, 4rem) 3rem; }
  .al-hero__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem; margin-bottom: 3rem; }
  .al-hero__okno { order: 0; justify-self: end; width: 100%; }
}
/* Od 1200 px okno dostaje więcej miejsca (uwaga Pawła: zdjęcia w szybach mają
   być od razu czytelne) i wchodzi w margines strony, maks. 7rem, nigdy do krawędzi. */
@media (min-width: 1200px) {
  .al-hero__siatka { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); }
  .al-hero__okno {
    width: calc(100% + min(7rem, (100vw - min(100vw - 2 * var(--px), var(--kontener))) / 2 * 0.7));
    margin-right: calc(-1 * min(7rem, (100vw - min(100vw - 2 * var(--px), var(--kontener))) / 2 * 0.7));
  }
}

.al-podpis {
  position: absolute; right: 0; bottom: 0;
  padding: 0.5rem 0.875rem;
  font-size: 0.8125rem; line-height: 1.3;
  color: var(--al-na-ciemnym); background: rgba(20, 24, 29, 0.82);
}

/* --- Ramka ikony: ten sam znak w faktach --- */
.al-ramka-ikony {
  display: inline-grid; place-items: center; flex: none;
  width: 3rem; height: 3rem;
  border: 1px solid rgba(251, 166, 28, 0.5); border-radius: var(--promien);
  background: rgba(251, 166, 28, 0.07);
  color: var(--al-pomarancz);
}

/* --- Fakty: pasek z mlecznego szkła --- */
.al-fakty {
  display: grid;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--promien);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.al-fakty__pozycja { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.al-fakty__pozycja:first-child { border-top: 0; }
.al-fakty__tekst { display: grid; gap: 0.125rem; }
.al-fakty__liczba { font-size: 1.125rem; font-weight: 600; font-stretch: var(--al-szer-naglowkow); color: #fff; letter-spacing: 0.01em; }
.al-fakty__opis { font-size: var(--fs-maly); color: var(--al-na-ciemnym-2); }
@media (min-width: 768px) {
  .al-fakty { grid-template-columns: repeat(3, 1fr); }
  .al-fakty__pozycja { border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .al-fakty__pozycja:first-child { border-left: 0; }
}

/* Wejście pierwszego ekranu: tylko CSS, po animacji nic nie zostaje przypięte. */
.al-wejscie { animation: al-wejscie 640ms var(--ease) backwards; }
.al-hero__tekst .al-wejscie:nth-child(2) { animation-delay: 70ms; }
.al-hero__tekst .al-wejscie:nth-child(3) { animation-delay: 140ms; }
.al-hero__tekst .al-wejscie:nth-child(4) { animation-delay: 210ms; }
.al-hero__tekst .al-wejscie:nth-child(5) { animation-delay: 280ms; }
.al-fakty.al-wejscie { animation-delay: 420ms; }
@keyframes al-wejscie { from { opacity: 0; translate: 0 14px; } }

/* =========================================================================
   SEKCJE
   ========================================================================= */
.al-sekcja { padding-block: var(--sekcja); }
.al-sekcja--ciemna { background: var(--al-grafit); color: var(--al-na-ciemnym); }
.al-sekcja--jasna { background: var(--al-jasne); }
.al-sekcja__naglowek { margin-bottom: 2.5rem; }
.al-sekcja__tytul { font-size: var(--fs-h2); }

/* --- Oferta: mozaika --- */
.al-oferta__siatka { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.75rem; }
.al-kafel { grid-column: span 6; }
@media (min-width: 600px) {
  .al-kafel { grid-column: span 3; }
  .al-kafel:last-child:nth-child(odd) { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .al-oferta__siatka { gap: 1rem; }
  .al-kafel { grid-column: span 2; }
  .al-kafel--duzy { grid-column: span 3; }
  .al-kafel:last-child:nth-child(odd) { grid-column: span 2; }
}
.al-kafel__link {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--promien); background: var(--al-grafit);
  color: #fff; text-decoration: none;
}
.al-kafel__foto { aspect-ratio: 4 / 3; }
.al-kafel--duzy .al-kafel__foto { aspect-ratio: 3 / 2; }
.al-kafel__foto img { width: 100%; height: 100%; object-fit: cover; transition: scale 700ms var(--ease); }
.al-kafel__link::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(14, 17, 21, 0.94) 0%, rgba(14, 17, 21, 0.72) 32%, rgba(14, 17, 21, 0.12) 64%, rgba(14, 17, 21, 0) 80%);
  transition: background-color var(--dur-slow) var(--ease);
}
.al-kafel__podpis {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  padding: 0.3125rem 0.625rem;
  font-size: 0.75rem; line-height: 1.3; color: var(--al-na-ciemnym);
  background: rgba(20, 24, 29, 0.78); border-radius: var(--promien);
}
.al-kafel__tresc { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.25rem 1.25rem 1.375rem; }
.al-kafel__nr { display: block; margin-bottom: 0.375rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--al-pomarancz); }
.al-kafel__nazwa { font-size: 1.375rem; color: #fff; }
.al-kafel--duzy .al-kafel__nazwa { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); }
.al-kafel__rozwin { display: grid; gap: 0.5rem; padding-top: 0.625rem; }
.al-kafel__opis { margin: 0; font-size: var(--fs-maly); line-height: 1.5; color: #e3e8ec; }
.al-kafel__systemy { margin: 0.375rem 0 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; color: var(--al-pomarancz); }
.al-kafel__wiecej { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-maly); font-weight: 600; color: #fff; }
.al-kafel__wiecej .al-ikona { transition: translate var(--dur-base) var(--ease); }
.al-kafel__link:hover .al-kafel__foto img { scale: 1.04; }
.al-kafel__link:hover .al-kafel__wiecej .al-ikona { translate: 4px 0; }
.al-kafel__link:focus-visible { outline-offset: -3px; }

/* Bez kursora (telefon, tablet): tekst kafla POD zdjęciem, nie na nim.
   Na zdjęciu 3:2 przy 350 px opis wjeżdżał na podpis realizacji. */
@media (hover: none), (max-width: 1023px) {
  .al-kafel__link::after { display: none; }
  .al-kafel__tresc { position: static; background: var(--al-grafit); }
}

/* Opis chowa się tylko tam, gdzie da się najechać kursorem. */
@media (hover: hover) and (min-width: 1024px) {
  .al-kafel__rozwin {
    max-height: 0; opacity: 0; overflow: hidden; padding-top: 0;
    transition: max-height var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), padding-top var(--dur-slow) var(--ease);
  }
  .al-kafel__link:hover .al-kafel__rozwin,
  .al-kafel__link:focus-visible .al-kafel__rozwin { max-height: 12rem; opacity: 1; padding-top: 0.75rem; }
  .al-kafel__link:hover::after, .al-kafel__link:focus-visible::after { background-color: rgba(14, 17, 21, 0.28); }
  .al-kafel__tresc { padding: 1.75rem; }
}

/* --- Znak w tle: obrys okna z logo (zakładki w przygotowaniu) --- */
.al-przygotowanie { position: relative; overflow: hidden; }
.al-znak-tla {
  position: absolute; z-index: 0; pointer-events: none;
  right: -14rem; top: -2rem; width: 52rem; max-width: none;
  color: rgba(255, 255, 255, 0.035);
}
.al-przygotowanie__wnetrze { position: relative; z-index: 1; }

/* --- Siatka rysunku technicznego w tle ciemnych sekcji --- */
.al-sekcja--siatka { position: relative; }
.al-sekcja--siatka::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 4rem 4rem;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 15% 20%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 15% 20%, #000 0%, transparent 75%);
}
.al-sekcja--siatka > * { position: relative; z-index: 1; }

/* =========================================================================
   O FIRMIE (ciemna): nagłówek | tekst, panorama okien, trzy filary.
   Krój umiarkowany, dwie kolumny o różnej roli, żeby tekst się nie zlewał.
   ========================================================================= */
.al-partner__gora { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
.al-partner__glowa .al-etykieta { margin-bottom: 1rem; }
/* Nagłówek to pełne zdanie klienta (22 słowa): skala wstępu, nie plakat (maks. 22 px). */
.al-partner__tytul { font-size: clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem); font-stretch: 104%; line-height: 1.35; color: #fff; }
.al-partner__wstep { margin-bottom: 1rem; font-size: 1.125rem; line-height: 1.6; color: #e3e8ec; }
.al-partner__opis { margin: 0; font-size: 1rem; line-height: 1.7; color: #c3cbd2; }
@media (min-width: 1024px) {
  .al-partner__gora { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; margin-bottom: 4rem; }
}
.al-partner__foto { position: relative; margin: 0 0 3rem; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--promien); }
@media (min-width: 1024px) { .al-partner__foto { margin-bottom: 4rem; } }
@media (min-width: 768px) { .al-partner__foto { aspect-ratio: 3 / 1; } }
.al-partner__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Trzy filary: kolumny z ikoną, kreska u góry z pomarańczowym odcinkiem. */
.al-filary { display: grid; gap: 2rem; }
@media (min-width: 900px) { .al-filary { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.al-filar { position: relative; display: grid; align-content: start; gap: 1rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.al-filar::before { content: ''; position: absolute; left: 0; top: -2px; width: 3rem; height: 3px; background: var(--al-pomarancz); transition: width var(--dur-slow) var(--ease); }
.al-filar:hover::before { width: 6rem; }
.al-filar__ikona {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: var(--promien); background: rgba(251, 166, 28, 0.12); color: var(--al-pomarancz);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.al-filar:hover .al-filar__ikona { background: var(--al-pomarancz); color: var(--al-grafit); }
.al-filar__tytul { font-size: 1.1875rem; font-stretch: 104%; line-height: 1.3; color: #fff; }
.al-filar__tekst { margin: 0; font-size: 1rem; line-height: 1.65; color: #c3cbd2; }

/* =========================================================================
   ZAPLECZE: pas na całą szerokość (zdjęcie zespołu | niebieski panel),
   pod nim jasny pas z resztą tekstu i osią jakości.
   ========================================================================= */
.al-zaplecze { background: var(--al-jasne); }
.al-zaplecze__pas { display: grid; }
.al-zaplecze__foto { position: relative; margin: 0; aspect-ratio: 4 / 3; }
.al-zaplecze__foto img { width: 100%; height: 100%; object-fit: cover; }
.al-zaplecze__foto .al-podpis { left: 0; right: auto; }
.al-zaplecze__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-items: center;
  padding: 3.5rem var(--px);
  background: linear-gradient(135deg, #0a66b8 0%, var(--al-niebieski) 45%, #004c90 100%);
  color: #fff;
}
.al-zaplecze__znak {
  position: absolute; z-index: -1; pointer-events: none;
  right: -7rem; bottom: -5rem; width: 34rem; max-width: none;
  color: rgba(255, 255, 255, 0.16);
}
.al-etykieta--na-niebieskim { color: #dbe7f3; }
.al-zaplecze__tytul { font-size: var(--fs-h2); color: #fff; margin-bottom: 1.5rem; }
.al-zaplecze__haslo {
  margin: 0; padding-left: 1.5rem; border-left: 3px solid var(--al-pomarancz);
  font-size: var(--fs-lead); line-height: 1.5; color: #eef4fa;
}
@media (min-width: 1024px) {
  .al-zaplecze__pas { grid-template-columns: 1fr 1fr; }
  .al-zaplecze__panel {
    padding-block: 4rem;
    padding-inline: clamp(3rem, 5vw, 5rem) max(var(--px), calc((100vw - var(--kontener)) / 2));
  }
}

.al-zaplecze__dol { padding-block: var(--sekcja); }
.al-zaplecze__siatka { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .al-zaplecze__siatka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: center; } }

/* Zdanie klienta o pozycji producenta jako hasło, reszta akapitu pod nim. */
.al-producent__haslo {
  margin-bottom: 1.5rem; padding-left: 1.5rem; border-left: 3px solid var(--al-pomarancz);
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 500; font-stretch: 104%; line-height: 1.4; color: var(--al-grafit);
}
.al-producent__tekst { margin: 0; padding-left: calc(1.5rem + 3px); font-size: 1.0625rem; line-height: 1.7; color: var(--al-tekst-2); }

/* Karta kontroli jakości: grafit na jasnym tle, oś pionowa trzech etapów
   z jego zdania; linia rysuje się przy odsłonięciu. */
.al-jakosc {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 2.5rem 1.5rem; border-radius: var(--promien);
  background: var(--al-grafit); color: var(--al-na-ciemnym);
  box-shadow: 0 24px 48px rgba(20, 24, 29, 0.18);
}
.al-jakosc::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 2rem 2rem;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 90% at 100% 0%, #000 0%, transparent 70%);
}
@media (min-width: 768px) { .al-jakosc { padding: 3rem; } }
.al-jakosc__zdanie { margin-bottom: 2rem; font-size: 1.0625rem; line-height: 1.65; color: #e3e8ec; }
.al-os { position: relative; display: grid; gap: 1.5rem; }
.al-os__etap { position: relative; display: flex; align-items: center; gap: 1.5rem; }
.al-os__znacznik {
  position: relative; z-index: 1;
  display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; border: 2px solid var(--al-pomarancz);
  background: var(--al-grafit); color: var(--al-pomarancz);
}
.al-os__etap:last-child .al-os__znacznik { background: var(--al-pomarancz); color: var(--al-grafit); }
.al-os__napis { display: grid; gap: 0.25rem; font-size: 1.125rem; font-weight: 600; font-stretch: 106%; line-height: 1.3; color: #fff; }
.al-os__nr { font-size: 0.75rem; letter-spacing: 0.14em; color: var(--al-pomarancz); }
.al-os::before {
  content: ''; position: absolute; z-index: 0;
  left: calc(1.75rem - 1px); top: 1.75rem; bottom: 1.75rem; width: 2px;
  background: linear-gradient(180deg, rgba(251, 166, 28, 0.35), var(--al-pomarancz));
  transform-origin: top center;
  transition: scale 1.2s var(--ease) 0.3s;
}
.js .al-jakosc:not(.widoczne) .al-os::before { scale: 1 0; }

/* =========================================================================
   REALIZACJA I SERWIS: dwie białe karty na grafitowym tle. Wiersze kart
   wspólne (subgrid), więc zdjęcie, nagłówek, wstęp i lista stoją równo.
   Punkty rozwijane, żeby nie było ściany tekstu.
   ========================================================================= */
.al-proces__siatka { display: grid; gap: 1.5rem; }
.al-proces__karta {
  display: grid; grid-template-rows: auto auto auto 1fr;
  background: var(--al-biel); color: var(--al-tekst);
  border-radius: var(--promien); overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}
@media (min-width: 1024px) {
  .al-proces__siatka { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); gap: 0 2rem; }
  .al-proces__karta { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
}
.al-proces__foto { position: relative; margin: 0; aspect-ratio: 16 / 9; }
.al-proces__foto img { width: 100%; height: 100%; object-fit: cover; }
.al-proces__tytul {
  position: relative; margin: 2.5rem 1.5rem 1rem; padding-top: 1.5rem;
  font-size: clamp(1.375rem, 1.25rem + 0.4vw, 1.625rem); line-height: 1.25; color: var(--al-grafit);
}
.al-proces__tytul::before { content: ''; position: absolute; left: 0; top: 0; width: 3rem; height: 3px; background: var(--al-pomarancz); }
.al-proces__tekst { margin: 0 1.5rem 2rem; font-size: 1rem; line-height: 1.7; color: var(--al-tekst-2); }
.al-proces__punkty { align-self: start; margin: 0 1.5rem 2.5rem; border-top: 1px solid var(--al-kreska); }
@media (min-width: 768px) {
  .al-proces__tytul, .al-proces__tekst, .al-proces__punkty { margin-inline: 3rem; }
  .al-proces__punkty { margin-bottom: 3rem; }
}
.al-proces__punkt { border-bottom: 1px solid var(--al-kreska); }
.al-proces__naglowek {
  display: grid; grid-template-columns: 2.75rem 1fr 1.5rem; align-items: center; column-gap: 1rem;
  min-height: 4.5rem; padding-block: 1rem; cursor: pointer; list-style: none;
}
.al-proces__naglowek::-webkit-details-marker { display: none; }
.al-proces__ikona {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: var(--promien); background: #e6eff8; color: var(--al-niebieski);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.al-proces__punkt-tytul { margin: 0; font-size: 1.0625rem; line-height: 1.35; color: var(--al-grafit); transition: color var(--dur-fast) var(--ease); }
.al-proces__strzalka { display: grid; place-items: center; color: var(--al-stal); transition: rotate var(--dur-base) var(--ease), color var(--dur-fast) var(--ease); }
.al-proces__naglowek:hover .al-proces__punkt-tytul { color: var(--al-niebieski); }
.al-proces__naglowek:hover .al-proces__ikona,
.al-proces__punkt[open] .al-proces__ikona { background: var(--al-niebieski); color: #fff; }
.al-proces__punkt[open] .al-proces__strzalka { rotate: 180deg; color: var(--al-niebieski); }
.al-proces__punkt-tekst { margin: 0 0 1.5rem; padding-left: 3.75rem; font-size: 0.9375rem; line-height: 1.65; color: var(--al-tekst-2); }

/* --- Kafel oferty: okrągła strzałka --- */
.al-kafel__strzalka {
  position: absolute; top: 1rem; right: 1rem; z-index: 2;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(20, 24, 29, 0.35); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.al-kafel__link:hover .al-kafel__strzalka, .al-kafel__link:focus-visible .al-kafel__strzalka { background: var(--al-pomarancz); border-color: var(--al-pomarancz); color: var(--al-grafit); }

/* =========================================================================
   LIDER I REALIZACJE (biała): duży nagłówek, wyróżnione zdanie klienta,
   taśma z miejscowościami jego realizacji, mozaika, rejestr.
   ========================================================================= */
.al-realizacje { overflow: hidden; }
.al-lider { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
.al-lider__tytul { font-size: var(--fs-h1); line-height: 1.08; }
.al-lider__glowa .al-etykieta { margin-bottom: 1.5rem; }
.al-lider__tekst { margin: 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--al-tekst-2); }
.al-lider__wyroznienie {
  font-weight: 600; color: var(--al-grafit);
  background: linear-gradient(transparent 64%, rgba(251, 166, 28, 0.45) 64%, rgba(251, 166, 28, 0.45) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (min-width: 1024px) {
  .al-lider { grid-template-columns: repeat(12, 1fr); column-gap: 2rem; align-items: end; margin-bottom: 4rem; }
  .al-lider__glowa { grid-column: 1 / 7; }
  .al-lider__tekst { grid-column: 7 / 13; }
}

/* Pas miejscowości: wąski, dwie identyczne listy, przesunięcie o połowę = pętla bez szwu. */
.al-miasta { overflow: hidden; margin-bottom: 3rem; padding-block: 1rem; background: var(--al-niebieski); color: #fff; }
.al-miasta__tasma { display: flex; width: max-content; animation: al-tasma 60s linear infinite; }
.al-miasta__lista { display: flex; flex: none; align-items: center; }
.al-miasta__lista li {
  display: inline-flex; align-items: center; gap: 1.5rem; padding-right: 1.5rem;
  font-size: 0.875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  white-space: nowrap; line-height: 1.3;
}
.al-miasta__lista li::after { content: ''; width: 0.75rem; height: 0.375rem; background: var(--al-pomarancz); transform: skewX(-22deg); }
@keyframes al-tasma { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .al-miasta__tasma { animation: none; } }

/* Mozaika o różnych kształtach: Londyn duży kwadrat 2×2, dwa małe kwadraty,
   trzy szerokie pasy 2,06:1. Każdy plik przycięty do kształtu swojego pola. */
.al-realizacje__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.al-realizacja { position: relative; }
.al-realizacja--duza, .al-realizacja--sz { grid-column: span 2; }
.al-realizacja__ramka { position: relative; margin: 0; overflow: hidden; border-radius: var(--promien); background: var(--al-jasne); }
.al-realizacja--duza .al-realizacja__ramka, .al-realizacja--kw .al-realizacja__ramka { aspect-ratio: 1; }
.al-realizacja--sz .al-realizacja__ramka { aspect-ratio: 2.06; }
.al-realizacja__ramka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease); }
.al-realizacja:hover .al-realizacja__ramka img { scale: 1.05; }
@media (min-width: 900px) {
  .al-realizacje__siatka { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .al-realizacja--duza { grid-row: span 2; }
  .al-realizacja--duza .al-realizacja__ramka { aspect-ratio: auto; height: 100%; }
}

/* Podpis na białej tabliczce w lewym dolnym rogu. */
.al-realizacja__podpis {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 1;
  display: grid; gap: 0.125rem; max-width: calc(100% - 2rem);
  padding: 0.5rem 1rem; border-radius: var(--promien);
  background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 24px rgba(20, 24, 29, 0.18);
}
.al-realizacja__miejsce { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--al-niebieski); }
.al-realizacja__nazwa { font-size: 0.9375rem; font-weight: 600; line-height: 1.3; color: var(--al-grafit); }
.al-realizacja--duza .al-realizacja__podpis { left: 1.5rem; bottom: 1.5rem; padding: 1rem 1.5rem; }
.al-realizacja--duza .al-realizacja__nazwa { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); }
@media (max-width: 599px) {
  .al-realizacja__podpis { left: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 1rem); padding: 0.5rem; }
  .al-realizacja--kw .al-realizacja__nazwa { font-size: 0.8125rem; }
}

/* Rejestr pozostałych realizacji: nazwa nad miejscowością, trzy kolumny. */
.al-rejestr { margin-top: 4rem; }
.al-rejestr__glowa {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding-bottom: 1.5rem; border-bottom: 2px solid var(--al-grafit);
}
.al-rejestr__tytul { font-size: var(--fs-h3); }
.al-rejestr__lista { display: grid; column-gap: 2rem; }
@media (min-width: 700px) { .al-rejestr__lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .al-rejestr__lista { grid-template-columns: repeat(3, 1fr); } }
.al-rejestr__wiersz { display: grid; gap: 0.25rem; padding-block: 1rem; border-bottom: 1px solid var(--al-kreska); }
.al-rejestr__nazwa { font-weight: 600; line-height: 1.35; color: var(--al-grafit); }
.al-rejestr__miejsce { font-size: var(--fs-maly); color: var(--al-stal-ciemna); }

/* =========================================================================
   STOPKA
   ========================================================================= */
.al-stopka__gora { background: var(--al-niebieski); color: #fff; padding-block: clamp(3.5rem, 2.5rem + 3.5vw, 5.5rem); }
.al-stopka__siatka { display: grid; gap: 3rem; }
.al-stopka .al-etykieta--jasna { color: #dbe7f3; }
.al-stopka__tytul { font-size: var(--fs-h2); color: #fff; margin-bottom: 0.75rem; }
.al-stopka__zdanie { color: #dbe7f3; margin-bottom: 1.75rem; }
.al-kafel-formularz {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--promien);
  color: #fff; text-decoration: none;
  transition: background-color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.al-kafel-formularz:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.al-kafel-formularz__tytul { font-size: 1.1875rem; font-weight: 600; font-stretch: var(--al-szer-naglowkow); }
.al-kafel-formularz__opis { grid-row: 2; font-size: var(--fs-maly); color: #dbe7f3; }
.al-kafel-formularz .al-ikona { grid-row: 1 / span 2; grid-column: 2; transition: translate var(--dur-base) var(--ease); }
.al-kafel-formularz:hover .al-ikona { translate: 4px 0; }

.al-stopka__kontakty { display: grid; gap: 2rem; }
.al-wizytowka { display: grid; gap: 0.25rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.35); }
.al-wizytowka__rola { margin: 0 0 0.25rem; font-size: var(--fs-etykieta); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #dbe7f3; }
.al-wizytowka__tel { font-size: 1.5rem; font-weight: 600; font-stretch: var(--al-szer-naglowkow); color: #fff; text-decoration: none; line-height: 1.3; }
.al-wizytowka__tel:hover { text-decoration: underline; }
.al-wizytowka__tel, .al-wizytowka__mail, .al-wizytowka__mapa { display: inline-flex; align-items: center; justify-self: start; min-height: 2.75rem; }
.al-wizytowka__mail, .al-wizytowka__mapa { color: #fff; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease), text-decoration-thickness var(--dur-fast) var(--ease), text-underline-offset var(--dur-fast) var(--ease); }
.al-wizytowka__mail:hover, .al-wizytowka__mapa:hover { color: #ffd58a; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.al-wizytowka__mapa { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--fs-maly); margin-top: 0.25rem; }
.al-wizytowka__info, .al-wizytowka__adres { display: flex; align-items: center; gap: 0.375rem; margin: 0.25rem 0 0; color: #dbe7f3; font-size: var(--fs-maly); }
.al-wizytowka__adres { display: block; color: #fff; font-size: 1.0625rem; }
@media (min-width: 768px) { .al-stopka__kontakty { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) {
  .al-stopka__siatka { grid-template-columns: 5fr 7fr; column-gap: 5rem; align-items: start; }
}

.al-stopka__dol { background: var(--al-biel); padding-block: 2.5rem 2rem; font-size: var(--fs-maly); color: var(--al-tekst-2); }
.al-stopka__pasek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--al-kreska); }
.al-logo--stopka img { height: 1.875rem; }
.al-stopka__linki { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.al-stopka__linki a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2.75rem; color: var(--al-grafit); text-decoration: none; font-weight: 500; }
.al-stopka__linki a:hover { color: var(--al-niebieski); }
.al-stopka__ue { display: grid; gap: 1rem; padding-block: 2rem; border-bottom: 1px solid var(--al-kreska); }
.al-stopka__ue img { width: 100%; max-width: 40rem; height: auto; }
.al-stopka__ue p { margin: 0; font-size: 0.875rem; }
.al-stopka__ue a { color: var(--al-niebieski); transition: color var(--dur-fast) var(--ease); }
.al-stopka__ue a:hover { color: var(--al-grafit); }
.al-stopka__prawne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; padding-top: 1.5rem; font-size: 0.875rem; }
.al-stopka__prawne p { margin: 0; }
.al-stopka__prawne a { color: var(--al-tekst-2); }

/* --- Przycisk „na górę" (docx: na każdej stronie, z prawej) --- */
.al-na-gore {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 800;
  display: grid; place-items: center; width: 3rem; height: 3rem;
  background: var(--al-grafit); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: var(--promien);
  box-shadow: 0 6px 18px rgba(20, 24, 29, 0.25);
  opacity: 0; visibility: hidden; translate: 0 8px;
  transition: opacity var(--dur-base) var(--ease), translate var(--dur-base) var(--ease), visibility 0s linear var(--dur-base), background-color var(--dur-fast) var(--ease);
}
.al-na-gore.widoczny { opacity: 1; visibility: visible; translate: 0 0; transition: opacity var(--dur-base) var(--ease), translate var(--dur-base) var(--ease), visibility 0s, background-color var(--dur-fast) var(--ease); }
.al-na-gore:hover { background: var(--al-niebieski); }
@media (min-width: 1200px) { .al-na-gore { right: 1.5rem; bottom: 1.5rem; } }

/* =========================================================================
   ZAKŁADKA W PRZYGOTOWANIU / 404
   ========================================================================= */
.al-przygotowanie {
  display: grid; align-items: center;
  min-height: calc(100svh - var(--naglowek-h));
  padding-block: 4rem;
  background: var(--al-grafit); color: var(--al-na-ciemnym);
}
.al-znak-tla--przygotowanie { right: -18rem; top: auto; bottom: -6rem; width: 60rem; }
.al-przygotowanie__tytul { font-size: var(--fs-h1); color: #fff; margin-bottom: 1.5rem; }
.al-przygotowanie__lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--al-na-ciemnym-2); margin-bottom: 2.5rem; }
.al-przygotowanie__punkty { display: grid; gap: 1.5rem; margin-bottom: 2.5rem; }
.al-przygotowanie__punkty li { display: grid; gap: 0.25rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.al-przygotowanie__punkty strong { color: #fff; font-stretch: var(--al-szer-naglowkow); font-weight: 600; }
.al-przygotowanie__punkty span { color: var(--al-na-ciemnym-2); font-size: var(--fs-maly); }
.al-przygotowanie__akcje { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
@media (min-width: 768px) { .al-przygotowanie__punkty { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }

/* --- Zwykła strona (polityka prywatności): tytuł w lewej kolumnie, tekst
   w prawej. Wiersz skraca KOLUMNA, nie max-width na akapicie. --- */
.al-strona__naglowek { margin-bottom: 2rem; }
@media (min-width: 1024px) {
  .al-strona .al-kontener { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 2rem; align-items: start; }
  .al-strona__naglowek { grid-column: 1 / 5; position: sticky; top: calc(var(--naglowek-h) + 2rem); }
  .al-strona .al-proza { grid-column: 6 / 13; }
}
.al-proza { font-size: 1.0625rem; line-height: 1.7; }
.al-proza h2 { font-size: 1.5rem; margin: 2.5rem 0 1rem; }
.al-proza h3 { font-size: 1.25rem; margin: 2rem 0 0.75rem; }
.al-proza ul, .al-proza ol { margin: 0 0 1em 1.25rem; list-style: disc; }
.al-proza li { margin-bottom: 0.375rem; }
.al-proza a { padding-block: 0.8em; transition: color var(--dur-fast) var(--ease); }
.al-proza a:hover { color: var(--al-niebieski-ciemny); text-decoration-thickness: 2px; }

/* =========================================================================
   ODSŁANIANIE PRZY PRZEWIJANIU
   Ukrywa tylko, gdy skrypt działa (klasa .js), i wyłącznie właściwość
   `translate`, żeby `transform` zostało wolne dla najechania.
   ========================================================================= */
.js .al-odslon:not(.widoczne) { opacity: 0; translate: 0 18px; }
.js .al-odslon { transition: opacity 620ms var(--ease), translate 620ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js .al-odslon:not(.widoczne) { opacity: 1; translate: none; }
}