/* Lokalne fonty: Cormorant Garamond i Manrope, Latin/Latin Extended; licencje w assets/fonts/. */
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: optional; src: url(/assets/fonts/cd5bf126b2c84ab4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: optional; src: url(/assets/fonts/6f2f5c3b1abc3d0b.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: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: optional; src: url(/assets/fonts/cd5bf126b2c84ab4.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: optional; src: url(/assets/fonts/6f2f5c3b1abc3d0b.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: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: optional; src: url(/assets/fonts/cfa9a397d86f66c5.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: optional; src: url(/assets/fonts/d80df8ff5aecd299.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: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: optional; src: url(/assets/fonts/cfa9a397d86f66c5.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: optional; src: url(/assets/fonts/d80df8ff5aecd299.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: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: optional; src: url(/assets/fonts/cfa9a397d86f66c5.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: optional; src: url(/assets/fonts/d80df8ff5aecd299.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: 'Manrope'; font-style: normal; font-weight: 400; font-display: optional; src: url(/assets/fonts/3911b66d9f2e005a.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: optional; src: url(/assets/fonts/a30ddcd349703aff.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: 'Manrope'; font-style: normal; font-weight: 500; font-display: optional; src: url(/assets/fonts/3911b66d9f2e005a.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: optional; src: url(/assets/fonts/a30ddcd349703aff.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: 'Manrope'; font-style: normal; font-weight: 600; font-display: optional; src: url(/assets/fonts/3911b66d9f2e005a.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: optional; src: url(/assets/fonts/a30ddcd349703aff.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: 'Manrope'; font-style: normal; font-weight: 700; font-display: optional; src: url(/assets/fonts/3911b66d9f2e005a.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: optional; src: url(/assets/fonts/a30ddcd349703aff.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; }
/* ==========================================================================
   1. ZMIENNE — paleta, fonty, skala (jedyne miejsce do zmiany wyglądu)
   ========================================================================== */
:root {
  --color-primary:   #0e2a4a;  /* Primary   — granat (ciemniejszy odcień niebieskiego z logo): ciemne sekcje, stopka */
  --color-brand:     #134f8c;  /* Niebieski z logo — kursywa w nagłówkach, zakładki, wyróżnienia */
  --color-secondary: #dde5ee;  /* Secondary — jasny stalowo-niebieski: sekcje akcentowe */
  --color-accent:    #d71f23;  /* Accent    — czerwień z logo: CTA, podkreślenia, linie postępu */
  --color-bg:        #f5f7fa;  /* Background — chłodna biel */
  --color-text:      #0e2a4a;  /* Text      — tekst na jasnym tle */
  --color-light:     #f5f7fa;  /* Tekst na ciemnym tle */
  --color-error:     #c73a3a;

  --line: color-mix(in srgb, currentColor 18%, transparent);

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Manrope', system-ui, sans-serif;

  --fs-hero:  clamp(3.2rem, 9vw, 9rem);
  --fs-h2:    clamp(2.4rem, 5.5vw, 5.5rem);
  --fs-h3:    clamp(1.8rem, 3.2vw, 3.2rem);
  --fs-lead:  clamp(1.3rem, 2.4vw, 2.3rem);
  --fs-p:     clamp(.9rem, 1vw, 1.05rem);
  --fs-label: .7rem;

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --section-pad: clamp(4rem, 9vw, 9rem);
  --radius: 1.25rem;

  --dur-s: .35s; --dur-m: .7s; --dur-l: 1.1s;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.83, 0, .17, 1);
}

/* ==========================================================================
   2. BAZA
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { font-family: var(--font-body); font-size: var(--fs-p); line-height: 1.6; color: var(--color-text); background: var(--color-bg); overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; } img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

.theme-dark  { background: var(--color-primary);   color: var(--color-light); }
.theme-sand  { background: var(--color-secondary); color: var(--color-text); }
.theme-light { background: var(--color-bg);        color: var(--color-text); }

.display { font-family: var(--font-display); font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.display em { font-style: italic; font-weight: 400; color: var(--color-brand); }
.theme-dark .display em, .hero .display em, .cta .display em { color: var(--color-accent); }
.h2 { font-size: var(--fs-h2); } .h3 { font-size: var(--fs-h3); } .lead { font-size: var(--fs-lead); line-height: 1.25; }
.label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.label--dot::before { content: ''; display: inline-block; width: .45em; height: .45em; border-radius: 50%; background: var(--color-accent); margin-right: .8em; vertical-align: middle; }
.p { max-width: 42ch; } .muted { opacity: .65; }
.section { position: relative; z-index: 2; }
.container { padding-inline: var(--gutter); }

.media { position: relative; overflow: hidden; border-radius: var(--radius); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--parallax img { height: 120%; position: absolute; top: -10%; left: 0; will-change: transform; }

/* --- Przyciski --- */
.btn { display: inline-flex; align-items: center; gap: .75em; padding: 1em 1.6em; border-radius: 999px; font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--color-accent); color: var(--color-bg); transition: transform var(--dur-s) var(--ease-out), background var(--dur-s); }
.btn:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--color-accent) 85%, black); }
.btn--ghost { background: transparent; color: inherit; border: 1px solid var(--line); }
.btn--ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.btn svg { width: 1em; height: 1em; }
.link { position: relative; display: inline-block; font-size: var(--fs-label); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding-bottom: .3em; }
.link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--color-accent); transform: scaleX(.3); transform-origin: left; transition: transform var(--dur-m) var(--ease-out); }
.link:hover::after { transform: scaleX(1); }

/* --- Logo --- */
.brand { display: inline-flex; align-items: center; gap: .75rem; }
.brand__mark { width: 4.6rem; height: 2.15rem; filter: drop-shadow(0 1px 4px rgba(0,0,0,.25)); }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__name { font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.split-line { display: block; overflow: hidden; }
[data-reveal="lines"] > :is(div, span) { padding: .1em 0; margin: -.1em 0; }

/* Ukośne krawędzie sekcji (zamiast łuków) */
.slant-top { clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%); margin-top: -4vw; padding-top: calc(var(--section-pad) + 4vw); }
.slant-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%); padding-bottom: calc(var(--section-pad) + 4vw); }

/* ==========================================================================
   3. PRELOADER — kurtyna (dwie połowy rozsuwają się na boki)
   ========================================================================== */
.preloader { position: fixed; inset: 0; z-index: 100; color: var(--color-light); pointer-events: none; }
.preloader__half { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--color-primary); }
.preloader__half--l { left: 0; } .preloader__half--r { right: 0; }
.preloader__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.preloader__word { font-family: var(--font-display); font-size: clamp(2.5rem, 8vw, 7rem); line-height: 1; overflow: hidden; }
.preloader__word span { display: block; }
.preloader__counter { position: absolute; bottom: 2rem; right: var(--gutter); font-family: var(--font-display); font-size: clamp(3rem, 8vw, 7rem); line-height: 1; font-variant-numeric: tabular-nums; opacity: .5; }
.preloader__line { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2.5rem; height: 1px; background: color-mix(in srgb, var(--color-light) 25%, transparent); }
.preloader__line i { position: absolute; inset: 0; background: var(--color-accent); transform-origin: left; transform: scaleX(0); }

/* ==========================================================================
   4. HEADER + pasek postępu
   ========================================================================== */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1.1rem var(--gutter);
  color: var(--color-light); transition: color var(--dur-m), background var(--dur-m), backdrop-filter var(--dur-m); transform: translateY(-100%); }
.header.is-ready { transform: none; transition: transform var(--dur-l) var(--ease-out) .2s, color var(--dur-m), background var(--dur-m); }
.header.on-light, .header.on-sand { color: var(--color-text); }
.header.is-scrolled { background: var(--color-bg); backdrop-filter: blur(12px); color: var(--color-text); }
.header__nav { display: flex; gap: 2rem; justify-self: center; }
.header__nav a { position: relative; font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: .4em 0; }
.header__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--color-accent); transform: scaleX(0); transition: transform var(--dur-s) var(--ease-out); }
.header__nav a:hover::after, .header__nav a.is-active::after { transform: scaleX(1); }
.header__cta { justify-self: end; }
.header__burger { display: none; justify-self: end; align-items: center; gap: .6rem; font-size: var(--fs-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.header__burger i { display: block; width: 1.4rem; height: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; }
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 51; background: var(--color-accent); transform: scaleX(0); transform-origin: left; }
@media (max-width: 991px) { .header { grid-template-columns: 1fr auto; } .header__nav, .header__cta { display: none; } .header__burger { display: flex; } }

/* ==========================================================================
   5. HERO — pełne zdjęcie, tytuł dół-lewo, KPI dół-prawo
   ========================================================================== */
.hero { position: relative; height: 100svh; min-height: 640px; color: var(--color-light); overflow: hidden; background: var(--color-primary); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.hero__media::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--color-primary) 40%, transparent); } /* jasne zdjęcia kontenerów → lekkie przyciemnienie */
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-primary) 75%, transparent), transparent 55%); }
.hero__content { position: absolute; inset: auto 0 0 0; display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 2rem; padding: 0 var(--gutter) clamp(2rem, 5vh, 4rem); }
.hero__title { font-size: var(--fs-hero); line-height: .95; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }
.hero__sub { margin-top: 1.25rem; max-width: 40ch; opacity: .85; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--color-light) 30%, transparent); }
.kpi { display: grid; gap: .35rem; opacity: 0; transform: translateY(1rem); }
.kpi strong { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 500; line-height: 1; }
.kpi span { font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.hero__scroll { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: .75rem; font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; writing-mode: vertical-rl; opacity: .7; }
.hero__scroll::after { content: ''; width: 1px; height: 3rem; background: currentColor; animation: scrollHint 2s var(--ease-in-out) infinite; transform-origin: top; }
@keyframes scrollHint { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 991px) { .hero__content { grid-template-columns: 1fr; } .hero__scroll { display: none; } }
@media (max-width: 600px) { .kpis { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   6. MANIFEST — słowa podświetlane w trakcie przewijania
   ========================================================================== */
.manifest { padding: var(--section-pad) var(--gutter); display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; }
.manifest__aside { position: sticky; top: 8rem; align-self: start; display: grid; gap: 1rem; }
.manifest__text { font-family: var(--font-display); font-size: clamp(1.7rem, 3.4vw, 3.4rem); line-height: 1.2; font-weight: 400; }
.manifest__text .word { opacity: .8; transition: opacity .2s; }
.manifest__text .word.is-on { opacity: 1; }
.manifest__text em { color: var(--color-accent); font-style: italic; }
@media (max-width: 767px) { .manifest { grid-template-columns: 1fr; } .manifest__aside { position: static; } }

/* ==========================================================================
   7. POWODY — poziomy scroll (pinned)
   ========================================================================== */
/* Sekcja = dokładnie 1 ekran (jest przypinana), karty dopasowują wysokość do wolnego miejsca */
.reasons { overflow: hidden; height: 100svh; min-height: 560px; display: grid; grid-template-rows: auto 1fr; }
.reasons.slant-top { padding-top: 4vw; }
.reasons__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: clamp(4rem, 9vh, 7rem) var(--gutter) 2rem; }
.reasons__track { display: flex; gap: 1.5rem; padding: 0 var(--gutter) clamp(1.5rem, 4vh, 3rem); width: max-content; align-items: stretch; min-height: 0; }
.card { position: relative; flex: none; height: 100%; max-height: 34rem; aspect-ratio: 3/4; width: auto; overflow: hidden; border-radius: var(--radius); color: var(--color-light); background: var(--color-primary); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-l) var(--ease-out); }
.card:hover img { transform: scale(1.06); }
.card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-primary) 85%, transparent), transparent 60%); }
.card__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.75rem; display: grid; gap: .75rem; }
.card__num { position: absolute; top: 1.5rem; left: 1.75rem; z-index: 2; font-family: var(--font-display); font-size: 2rem; font-style: italic; }
.card__title { font-size: clamp(1.6rem, 2.4vw, 2.4rem); }
.card--text { background: var(--color-secondary); color: var(--color-text); display: grid; align-content: center; padding: 2rem; }
.card--text::after { display: none; }
.card--text .card__body { position: static; padding: 0; }

/* ==========================================================================
   8. LICZBY — animowane liczniki
   ========================================================================== */
.stats { padding: var(--section-pad) var(--gutter); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
.stat { display: grid; gap: .75rem; padding: 2.5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.stat strong { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 6rem); font-weight: 400; line-height: 1; }
.stat strong small { font-size: .4em; font-style: italic; }
@media (max-width: 767px) { .stats { grid-template-columns: 1fr; } }

/* ==========================================================================
   9. LOKALIZACJA — zdjęcie + oś odległości
   ========================================================================== */
.location { padding: var(--section-pad) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.location .media { aspect-ratio: 4/5; }
.location__body { display: grid; gap: 1.5rem; }
.timeline { position: relative; display: grid; gap: 1.25rem; padding-left: 1.5rem; margin-top: 1rem; }
.timeline::before { content: ''; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 1px; background: var(--line); }
.timeline::after { content: ''; position: absolute; left: 0; top: .4rem; bottom: .4rem; width: 1px; background: var(--color-accent); transform: scaleY(var(--p, 0)); transform-origin: top; }
.timeline li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border: 0; }
.timeline li span:last-child { font-family: var(--font-display); font-size: 1.4rem; font-style: italic; }
@media (max-width: 767px) { .location { grid-template-columns: 1fr; } }

/* ==========================================================================
   10. MIESZKANIA — zakładki
   ========================================================================== */
.units { padding: var(--section-pad) var(--gutter); }
.tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 3rem; }
.tab { padding: .8em 1.4em; border-radius: 999px; border: 1px solid var(--line); font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; transition: background var(--dur-s), color var(--dur-s), border-color var(--dur-s); }
.tab.is-active { background: var(--color-brand); color: var(--color-light); border-color: var(--color-brand); }
.unit-panels { position: relative; }
.unit { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.unit:not(.is-active) { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.unit__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0; }
.unit__specs div { padding-top: 1rem; border-top: 1px solid var(--line); }
.unit__specs strong { display: block; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 500; line-height: 1; margin-top: .3rem; }
.unit .media { aspect-ratio: 4/3; }
.unit__body { display: grid; gap: 1rem; }
@media (max-width: 767px) { .unit { grid-template-columns: 1fr; } .unit .media { order: -1; } }

/* ==========================================================================
   11. UDOGODNIENIA — akordeon + zdjęcie
   ========================================================================== */
.amenities { padding: var(--section-pad) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.amenities .media { position: sticky; top: 7rem; aspect-ratio: 4/5; }
.amenities .media img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-m) var(--ease-in-out); }
.amenities .media img.is-active { opacity: 1; }
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 0; text-align: left; font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.6rem); font-weight: 500; }
.acc__btn i { width: 2.2rem; height: 2.2rem; flex: none; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-style: normal; font-family: var(--font-body); font-size: 1rem; transition: transform var(--dur-s), background var(--dur-s), color var(--dur-s); }
.acc__item.is-open .acc__btn i { transform: rotate(45deg); background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-m) var(--ease-in-out); }
.acc__item.is-open .acc__panel { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: 1.5rem; max-width: 40ch; }
@media (max-width: 767px) { .amenities { grid-template-columns: 1fr; } .amenities .media { position: relative; aspect-ratio: 4/3; } }

/* ==========================================================================
   12. GALERIA — dwa przesuwające się rzędy (marquee), pauza na hover
   ========================================================================== */
.gallery { padding: var(--section-pad) 0; overflow: hidden; }
.gallery__head { padding: 0 var(--gutter) 3rem; display: flex; justify-content: space-between; align-items: end; gap: 2rem; }
.marquee { display: flex; gap: 1.25rem; width: max-content; will-change: transform; }
.marquee + .marquee { margin-top: 1.25rem; }
.marquee .media { width: clamp(16rem, 28vw, 26rem); aspect-ratio: 4/3; flex: none; }
.marquee .media img { transition: transform var(--dur-l) var(--ease-out); }
.marquee .media:hover img { transform: scale(1.05); }
.marquee figure { flex: none; width: clamp(16rem, 28vw, 26rem); margin: 0; }
.marquee figcaption { padding: .75rem .25rem 0; font-size: .85rem; }
.gallery__empty { padding: 0 var(--gutter); }
.gallery-description { display: block; margin-top: .35rem; font-size: .85em; }
.gallery-caption { display: block; }
.product-gallery-strip { overflow-x: auto; overflow-y: hidden; }
.product-gallery-strip.is-moving { overflow-x: hidden; }
.product-gallery-strip.is-moving .marquee { animation: product-gallery-scroll 40s linear infinite paused; }
.product-gallery-strip.is-visible .marquee { animation-play-state: running; }
.product-gallery-strip:hover .marquee, .product-gallery-strip:focus-within .marquee { animation-play-state: paused; }
@keyframes product-gallery-scroll { to { transform: translateX(calc(-50% - .625rem)); } }

/* ==========================================================================
   13. ARCHITEKTURA — konturowy tytuł + zdjęcie + cytat
   ========================================================================== */
.architecture { padding: 0; color: var(--color-light); }
.architecture__title { font-size: clamp(2.2rem, 9vw, 11rem); line-height: 1; text-transform: uppercase; text-align: center; padding: clamp(2.5rem, 7vw, 6rem) var(--gutter);
  -webkit-text-stroke: 1px var(--color-light); color: transparent; white-space: nowrap; overflow: hidden; }
.architecture__title span { display: inline-block; }
.architecture__media { position: relative; height: 110vh; min-height: 40rem; }
.architecture__media .media { position: sticky; top: 0; height: 100svh; border-radius: 0; }
.architecture__media .media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-primary) 70%, transparent), transparent 60%); }
.architecture__quote { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 10%; z-index: 2; display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: end; }
.architecture__quote .lead { max-width: 24ch; }
.architecture__credit { text-align: right; display: grid; gap: .25rem; }
@media (max-width: 767px) { .architecture__quote { grid-template-columns: 1fr; } .architecture__credit { text-align: left; } }

/* ==========================================================================
   14. ETAPY INWESTYCJI — pionowa oś czasu
   ========================================================================== */
.steps { padding: var(--section-pad) var(--gutter); display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(2rem, 6vw, 6rem); }
.steps__aside { position: sticky; top: 8rem; align-self: start; display: grid; gap: 1.25rem; }
.steps__list { position: relative; display: grid; gap: 0; }
.steps__list::before { content: ''; position: absolute; left: .45rem; top: 0; bottom: 0; width: 1px; background: var(--line); }
.steps__list::after { content: ''; position: absolute; left: .45rem; top: 0; bottom: 0; width: 1px; background: var(--color-accent); transform: scaleY(var(--p, 0)); transform-origin: top; }
.step { position: relative; display: grid; grid-template-columns: 8rem 1fr; gap: 1.5rem; padding: 2rem 0 2rem 2.5rem; }
.step::before { content: ''; position: absolute; left: 0; top: 2.5rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--color-bg); border: 1px solid var(--color-accent); transition: background var(--dur-s); }
.step.is-done::before { background: var(--color-accent); }
.step__year { font-family: var(--font-display); font-size: 1.6rem; font-style: italic; }
.step__body { display: grid; gap: .5rem; }
.step__body :is(h3, h4) { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; }
@media (max-width: 767px) { .steps { grid-template-columns: 1fr; } .steps__aside { position: static; } .step { grid-template-columns: 1fr; gap: .5rem; } }

/* ==========================================================================
   15. CTA + STOPKA z marquee
   ========================================================================== */
.cta { padding: var(--section-pad) var(--gutter); text-align: center; display: grid; gap: 2rem; justify-items: center; background: var(--color-accent); color: var(--color-bg); }
.cta .display { font-size: clamp(2.4rem, 6vw, 6rem); max-width: 16ch; }
.cta .display em { color: inherit; }
.cta .btn { background: var(--color-primary); }
.footer { padding: var(--section-pad) 0 2rem; overflow: hidden; }
.footer__marquee { font-family: var(--font-display); font-size: clamp(3rem, 10vw, 10rem); line-height: 1; white-space: nowrap; display: flex; gap: 1em; width: max-content; margin-bottom: var(--section-pad); }
.footer__marquee span { opacity: .18; }
.footer__marquee span:nth-child(odd) { opacity: 1; font-style: italic; }
.footer__grid { padding: 0 var(--gutter); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.footer__col { display: grid; gap: .8rem; align-content: start; }
.footer__col .label { opacity: .5; margin-bottom: .4rem; }
.footer__phone { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.8rem); white-space: nowrap; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 2rem var(--gutter) 0; margin-top: var(--section-pad); border-top: 1px solid var(--line); font-size: .7rem; letter-spacing: .08em; opacity: .7; }
@media (max-width: 991px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ==========================================================================
   16. PANEL BOCZNY (formularz), MENU MOBILNE, COOKIES
   ========================================================================== */
.drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; transition: visibility 0s var(--dur-m); }
.drawer.is-open { visibility: visible; transition-delay: 0s; }
.drawer__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-primary) 55%, transparent); opacity: 0; transition: opacity var(--dur-m); }
.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 46rem); overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 4vw, 3.5rem); overflow: auto; display: grid; align-content: start; gap: 1.25rem;
  transform: translateX(100%); transition: transform var(--dur-m) var(--ease-in-out); }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__close { position: absolute; top: 1.25rem; right: 1.25rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: transform var(--dur-s); }
.drawer__close:hover { transform: rotate(90deg); }
.form { display: grid; gap: .9rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.field input, .field textarea { width: 100%; padding: .7rem .9rem; background: color-mix(in srgb, currentColor 6%, transparent); border: 1px solid var(--line); border-radius: .6rem; font: inherit; color: inherit; outline: none; transition: border-color var(--dur-s); }
.field textarea { min-height: 4.5rem; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--color-brand); }
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--color-error); }
.field__error { font-size: .7rem; color: var(--color-error); min-height: 1em; }
.form__foot { display: grid; gap: 1rem; font-size: .75rem; }
.form__foot a { text-decoration: underline; }
.form__status { font-size: .8rem; } .form__status.is-error { color: var(--color-error); }
.form-success { display: none; gap: 1rem; }
.form.is-sent { display: none; } .form.is-sent + .form-success { display: grid; }

.menu { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; text-align: center; visibility: hidden; opacity: 0; transition: opacity var(--dur-m), visibility 0s var(--dur-m); }
.menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.menu__links { display: grid; gap: 1.25rem; font-family: var(--font-display); font-size: clamp(2rem, 8vw, 4rem); }
.menu__links a { opacity: 0; transform: translateY(1rem); transition: opacity var(--dur-m) var(--ease-out), transform var(--dur-m) var(--ease-out); }
.menu.is-open .menu__links a { opacity: 1; transform: none; }
.menu.is-open .menu__links a:nth-child(2) { transition-delay: .07s; } .menu.is-open .menu__links a:nth-child(3) { transition-delay: .14s; }
.menu.is-open .menu__links a:nth-child(4) { transition-delay: .21s; } .menu.is-open .menu__links a:nth-child(5) { transition-delay: .28s; }
.menu__close { position: absolute; top: 1.25rem; right: var(--gutter); font-size: var(--fs-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }

.cookies { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 80; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-radius: var(--radius);
  font-size: .75rem; transform: translateY(150%); transition: transform var(--dur-l) var(--ease-out); box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); }
.cookies.is-visible { transform: none; }
.cookies__actions { display: flex; gap: .5rem; }
.cookies .btn { padding: .7em 1.2em; }

/* ==========================================================================
   17. DODATKI DLA STRONY KONTENERÓW
   ========================================================================== */
/* Wstęga zaufania pod hero (marquee tekstowe) */
.ribbon { padding: 1.1rem 0; border-block: 1px solid var(--line); font-size: var(--fs-label); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; overflow: hidden; }
.ribbon .marquee { gap: 0; }
.ribbon span { padding: 0 2rem; white-space: nowrap; }
.ribbon span::before { content: '◆'; color: var(--color-accent); margin-right: 2rem; font-size: .6em; vertical-align: middle; }
/* Lista cech produktu */
.spec-list { display: grid; gap: .6rem; margin: 1rem 0 1.5rem; }
.spec-list li { position: relative; padding-left: 1.4rem; font-size: .95rem; }
.spec-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-accent); }
.badge { display: inline-block; padding: .4em .9em; border-radius: 999px; background: var(--color-accent); color: var(--color-bg); font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.unit__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
/* Karty "dlaczego my" bez zdjęcia */
.card--plain { background: var(--color-primary); color: var(--color-light); display: grid; align-content: space-between; padding: 2rem; }
.card--plain::after { display: none; }
.card--plain .card__body { position: static; padding: 0; }
.card--plain .card__icon { width: 3rem; height: 3rem; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--color-light) 30%, transparent); border-radius: 50%; font-family: var(--font-display); font-style: italic; font-size: 1.4rem; }
/* Sekcja kontakt: dane + duży telefon */
.contact { padding: var(--section-pad) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.contact__list { display: grid; gap: 1.25rem; }
.contact__list li { display: grid; gap: .3rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.contact__list a { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.1; }
.contact__phone { font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1; }
@media (max-width: 767px) { .contact { grid-template-columns: 1fr; } }
/* Select + checkbox w formularzu */
.field select { width: 100%; padding: .7rem .9rem; background: color-mix(in srgb, currentColor 6%, transparent); border: 1px solid var(--line); border-radius: .6rem; font: inherit; color: inherit; outline: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.3rem) 50%, calc(100% - .95rem) 50%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.field select:focus { border-color: var(--color-brand); }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .75rem; }
.field--check input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--color-accent); }
.field--check label { font-size: .7rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.5; }
.field--check .field__error { grid-column: 1 / -1; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.form__foot { grid-template-columns: auto 1fr; align-items: center; }
@media (max-width: 600px) { .form__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }


/* Karty katalogu i powiązanych produktów. */
.product-link { display: grid; align-content: start; gap: .9rem; min-width: 0; }
.product-link .media { aspect-ratio: 4/3; }
.product-link .h3 { font-size: clamp(1.65rem, 2.2vw, 2.4rem); }
.product-link .link { justify-self: start; }
:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }
.theme-dark :focus-visible { outline-color: var(--color-light); }
.field.is-invalid select { border-color: var(--color-error); }
.field input::placeholder, .field textarea::placeholder { color: var(--color-brand); opacity: 1; }
@media (max-width: 600px) { .form__foot { grid-template-columns: 1fr; } .drawerTitle, #drawerTitle span { white-space: normal !important; } }

/* Powiększenie zdjęć, wspólne dla galerii realizacji i produktów. */
a[data-lightbox] { display: block; cursor: zoom-in; }
html.lightbox-open, .lightbox-open body { overflow: hidden !important; }
.lightbox { width: min(1200px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); margin: auto; padding: clamp(.75rem, 2vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--color-primary); color: var(--color-light); }
.lightbox::backdrop { background: rgb(5 15 29 / 92%); }
.lightbox__toolbar { display: flex; justify-content: flex-end; margin-bottom: .5rem; }
.lightbox button { min-width: 44px; min-height: 44px; padding: .5rem .9rem; border: 1px solid var(--line); border-radius: 999px; }
.lightbox button:hover { background: rgb(255 255 255 / 12%); }
.lightbox button:disabled { opacity: .35; cursor: default; }
.lightbox :focus-visible { outline-color: var(--color-light); }
.lightbox figure { margin: 0; }
.lightbox img { width: 100%; height: min(70dvh, 800px); max-height: calc(100dvh - 13rem); object-fit: contain; }
.lightbox__caption { margin: .75rem 0; max-height: 4.8em; overflow: auto; text-align: center; font-size: .9rem; }
.lightbox__controls { display: flex; justify-content: center; align-items: center; gap: 1.5rem; }
.lightbox__count { font-variant-numeric: tabular-nums; }