/* ==========================================================================
   SOHO VUE - arkusz stylów landing page'a
   --------------------------------------------------------------------------
   Paleta: obowiązująca kolorystyka marki przekazana przez klienta.
     DUNE     #DDD7C7   BURGUNDY #321522   TAUPE #8C806C
     FROST    #B6C5D3   CHARCOAL #0F0E0E

   Zasady systemowe (celowe, obowiązują na całej stronie):
   1. Strona jest jasna. Pasma jasne (paper, linen, dune, frost) są domyślne;
      ciemne (burgundy, charcoal) występują wyłącznie w momencie decyzji
      i w stopce. To reguła, nie przeplatanka.
   2. Jeden akcent marki: BURGUNDY. FROST jest oddechem i detalem na ciemnym
      tle, TAUPE kreską i tekstem drugiego planu. Nigdy trzeci akcent.
   3. Jeden promień narożnika: --r. Bez wyjątków.
   4. Bez automatycznego trybu ciemnego: kolorystyka marki jest jedna
      i ma pozostać jasna niezależnie od ustawień systemu.
   ========================================================================== */

/* ------------------------------------------------------------------ fonty */

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-latin.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('../fonts/geist-latin-ext.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geistmono-latin.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/geistmono-latin-ext.woff2') format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokeny */

:root {
  /* ---- obowiązująca paleta marki (wartości dokładnie jak w brandbooku) -- */
  --dune:      #ddd7c7;
  --burgundy:  #321522;
  --taupe:     #8c806c;
  --frost:     #b6c5d3;
  --charcoal:  #0f0e0e;

  /* ---- warianty użytkowe wyprowadzone z palety ------------------------- */
  --paper:     #faf8f4;   /* najjaśniejszy odcień DUNE, tło dominujące   */
  --linen:     #f3f0e8;   /* DUNE rozjaśniony, drugie pasmo jasne        */
  --burgundy-hi:   #4a2033;   /* hover przycisku                         */
  --burgundy-deep: #240f19;   /* przygaszenia zdjęć                      */
  --taupe-ink:  #5a5145;  /* TAUPE przyciemniony do AA na jasnym tle     */
  --taupe-soft: #645a4c;  /* tekst drugiego planu na jasnym tle          */
  --frost-ink:  #3f5061;  /* FROST przyciemniony, gdy potrzebny na tle   */
  --sand:       #f4f1ea;  /* jasny tekst na tle ciemnym                  */

  /* Stałe marki: para tło/tekst, która nie zmienia się nigdzie na stronie. */
  --brand-burgundy: #321522;
  --brand-sand:     #f4f1ea;

  --ink:       var(--charcoal);
  --ink-soft:  var(--taupe-soft);

  /* typografia */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* system kształtu: jeden promień na całej stronie */
  --r: 3px;

  /* rytm. Więcej powietrza niż w wersji poprzedniej: strona ma być lekka. */
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --pad-y: clamp(5rem, 10vw, 9.5rem);
  --maxw: 1320px;
  --gap: clamp(1.5rem, 3vw, 3rem);

  /* warstwy */
  --z-nav: 100;
  --z-drawer: 95;   /* pod paskiem nawigacji, aby przycisk zamykania pozostał klikalny */
  --z-bar: 90;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Pasek nawigacji jest przyklejony (sticky, 60-64px w stanie zwartym),
     więc bez tego zapasu skok do kotwicy ustawia górę sekcji dokładnie pod
     paskiem i etykieta z nagłówkiem znikają. Wartość z zapasem na oddech,
     nie co do piksela wysokości paska. */
  scroll-padding-top: clamp(4.75rem, 9vh, 6rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(1rem, .96rem + .18vw, 1.075rem);
  line-height: 1.7;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; }
img { display: block; height: auto; }
picture { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p, ul, ol { margin: 0; }

:focus-visible {
  outline: 2px solid var(--accent, var(--burgundy));
  outline-offset: 3px;
}

::selection { background: var(--brand-burgundy); color: var(--brand-sand); }

.skip {
  position: absolute; left: 1rem; top: -100%;
  z-index: 200; padding: .8rem 1.2rem;
  background: var(--brand-burgundy); color: var(--brand-sand);
  border-radius: var(--r); text-decoration: none;
}
.skip:focus { top: 1rem; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------ pasma */

.band { background: var(--bg); color: var(--fg); position: relative; }

/* --- jasne ----------------------------------------------------------- */
.band--paper {
  --bg: var(--paper); --fg: var(--ink); --fg-soft: var(--taupe-soft);
  --rule: rgba(140, 128, 108, .3); --rule-strong: rgba(140, 128, 108, .58);
  --accent: var(--burgundy); --panel: #fff; --detail: var(--taupe-ink);
}
.band--linen {
  --bg: var(--linen); --fg: var(--ink); --fg-soft: var(--taupe-soft);
  --rule: rgba(140, 128, 108, .34); --rule-strong: rgba(140, 128, 108, .6);
  --accent: var(--burgundy); --panel: #fdfcf9; --detail: var(--taupe-ink);
}
.band--dune {
  --bg: var(--dune); --fg: var(--ink); --fg-soft: #564e42;
  --rule: rgba(90, 81, 69, .3); --rule-strong: rgba(90, 81, 69, .55);
  --accent: var(--burgundy); --panel: #e8e3d6; --detail: #4e463b;
}
.band--frost {
  --bg: var(--frost); --fg: var(--ink); --fg-soft: #4c4438;
  --rule: rgba(63, 80, 97, .26); --rule-strong: rgba(63, 80, 97, .5);
  --accent: var(--burgundy); --panel: #c4d1dd; --detail: var(--burgundy);
}

/* --- ciemne: wyłącznie moment decyzji i stopka ------------------------ */
.band--burgundy {
  --bg: var(--burgundy); --fg: var(--sand); --fg-soft: rgba(244, 241, 234, .78);
  --rule: rgba(244, 241, 234, .22); --rule-strong: rgba(244, 241, 234, .45);
  --accent: var(--sand); --panel: rgba(255, 255, 255, .06); --detail: var(--frost);
}
.band--charcoal {
  --bg: var(--charcoal); --fg: var(--sand); --fg-soft: rgba(244, 241, 234, .72);
  --rule: rgba(244, 241, 234, .18); --rule-strong: rgba(244, 241, 234, .4);
  --accent: var(--sand); --panel: rgba(255, 255, 255, .05); --detail: var(--frost);
}

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.wrap--narrow { max-width: 980px; }

.sec { padding-block: var(--pad-y); }
.sec--tight { padding-block: clamp(3.25rem, 6vw, 5.5rem); }

/* --------------------------------------------------------------- typo API */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.018em;
  font-size: clamp(2.45rem, 1.3rem + 4.6vw, 4.7rem);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.014em;
  font-size: clamp(1.95rem, 1.2rem + 2.6vw, 3.05rem);
  /* rezerwa pod znaki diakrytyczne i kursywę z podcięciem (ą, ę, y, g) */
  padding-bottom: .08em;
}
.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.68rem);
  line-height: 1.24;
  padding-bottom: .06em;
}
.h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1.02rem;
  letter-spacing: -.005em;
}
.lead {
  font-size: clamp(1.08rem, 1rem + .48vw, 1.34rem);
  line-height: 1.58;
  color: var(--fg-soft);
  max-width: 56ch;
}
.body { color: var(--fg-soft); max-width: 60ch; }
.body + .body { margin-top: 1.1em; }

.label {
  font-family: var(--font-mono);
  font-size: .705rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--detail);
  display: block;
  margin-bottom: 1.35rem;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -.03em;
}

.fine {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--fg-soft);
  max-width: 68ch;
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* Duży cytat nastrojowy. Nośnik emocji, nie kolejny akapit informacyjny. */
.quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 1rem + 2.1vw, 2.55rem);
  line-height: 1.24;
  letter-spacing: -.014em;
  max-width: 34ch;
  padding-bottom: .08em;
}
.quote--center { margin-inline: auto; text-align: center; max-width: 40ch; }

/* -------------------------------------------------------------- przyciski */

.btn {
  --btn-bg: var(--burgundy);
  --btn-fg: var(--brand-sand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .85rem 1.7rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .935rem;
  font-weight: 500;
  letter-spacing: .005em;
  text-decoration: none;
  white-space: nowrap;      /* etykieta CTA nigdy nie łamie się na desktopie */
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), transform .12s ease;
}
.btn:hover { --btn-bg: var(--burgundy-hi); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  border-color: var(--rule-strong);
}
.btn--ghost:hover { --btn-bg: transparent; border-color: var(--fg); }

/* Na ciemnych powierzchniach para kolorów odwraca się. Kontrast etykiety
   względem tła przycisku pozostaje powyżej 4.5:1 w obu wariantach. */
.band--burgundy .btn, .band--charcoal .btn,
.hero .btn, .finale .btn {
  --btn-bg: var(--brand-sand); --btn-fg: var(--brand-burgundy);
}
.band--burgundy .btn:hover, .band--charcoal .btn:hover,
.hero .btn:hover, .finale .btn:hover {
  --btn-bg: #fff;
}
.band--burgundy .btn--ghost, .band--charcoal .btn--ghost,
.hero .btn--ghost, .finale .btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--fg); border-color: var(--rule-strong);
}
.band--burgundy .btn--ghost:hover, .band--charcoal .btn--ghost:hover,
.hero .btn--ghost:hover, .finale .btn--ghost:hover {
  --btn-bg: rgba(255, 255, 255, .1); border-color: var(--fg);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.2rem;
}

.link-arrow {
  display: inline-flex; align-items: baseline; gap: .5rem;
  font-size: .93rem; font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: .25rem;
  transition: border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow::after { content: '\2192'; font-family: var(--font-mono); }
.link-arrow:hover { border-color: currentColor; gap: .8rem; }

/* ------------------------------------------------------------- nawigacja  */

.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  /* Stała marki, nie token pasma: nad zdjęciem pasek musi być jasny. */
  --fg: var(--brand-sand);
  color: var(--fg);
  transition: background-color .45s var(--ease), border-color .45s var(--ease),
              color .45s var(--ease);
  border-bottom: 1px solid transparent;
  isolation: isolate;
}
/* Zdjęcie w hero bywa jasne przy grani. Delikatne przyciemnienie pod paskiem
   gwarantuje czytelność pozycji menu niezależnie od kadru. */
.nav::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 190%;
  z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(15, 14, 14, .72) 0%, rgba(15, 14, 14, .38) 48%, rgba(15, 14, 14, 0) 100%);
  transition: opacity .45s var(--ease);
}
.nav--solid::before { opacity: 0; }
.nav__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--pad-x);
  height: 76px;
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.6rem);
  transition: height .45s var(--ease);
}
.nav__logo { flex: 0 0 auto; line-height: 0; }
.nav__logo img { width: clamp(112px, 12vw, 146px); transition: width .45s var(--ease); }
.nav__logo img.nav__logo--white { width: clamp(60px, 6.2vw, 76px); }
.nav__logo .on-dark { display: block; }
.nav__logo .on-light { display: none; }

.nav__menu {
  display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.9rem);
  margin-left: auto; list-style: none; padding: 0;
}
.nav__menu a {
  font-size: .86rem; font-weight: 450; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  padding-block: .4rem;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.nav__menu a:hover { border-bottom-color: currentColor; }
.nav--solid .nav__menu a { opacity: .84; }
.nav--solid .nav__menu a:hover { opacity: 1; }

.nav__cta { flex: 0 0 auto; }
.nav .btn { min-height: 2.9rem; padding: .6rem 1.3rem; font-size: .875rem; }

.nav--solid {
  background: rgba(250, 248, 244, .94);
  backdrop-filter: saturate(140%) blur(8px);
  color: var(--ink);
  border-bottom-color: rgba(140, 128, 108, .34);
}
.nav--solid .nav__inner { height: 64px; }
.nav--solid .nav__logo img { width: clamp(96px, 10vw, 118px); }
.nav--solid .nav__logo .on-dark { display: none; }
.nav--solid .nav__logo .on-light { display: block; }
.nav--solid .btn { --btn-bg: var(--brand-burgundy); --btn-fg: var(--brand-sand); }
.nav--solid .btn:hover { --btn-bg: var(--burgundy-hi); }

.nav__toggle {
  display: none; margin-left: auto;
  width: 48px; height: 48px; padding: 0;
  background: rgba(15, 14, 14, .32);
  border: 1px solid currentColor; border-radius: var(--r);
  cursor: pointer; position: relative;
  transition: background-color .3s var(--ease);
}
.nav--solid .nav__toggle { background: transparent; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  content: ''; position: absolute; left: 50%; width: 20px; height: 1.5px;
  background: currentColor; transform: translateX(-50%);
  transition: transform .35s var(--ease), opacity .2s ease;
}
.nav__toggle span { top: 50%; margin-top: -.75px; }
.nav__toggle span::before { top: -6px; left: 0; transform: none; }
.nav__toggle span::after { top: 6px; left: 0; transform: none; }
.nav__toggle[aria-expanded="true"] span { transform: translateX(-50%) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::before { opacity: 0; }
.nav__toggle[aria-expanded="true"] span::after { transform: rotate(-90deg); top: 0; }

@media (max-width: 1119px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__toggle { display: block; }
}

.drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--burgundy); color: var(--sand);
  padding: 6.5rem var(--pad-x) 2.5rem;
  display: flex; flex-direction: column;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .5s var(--ease), visibility 0s linear .5s;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.drawer[data-open="true"] {
  transform: none;
  visibility: visible;
  transition: transform .5s var(--ease), visibility 0s;
}
.drawer ul { list-style: none; padding: 0; margin: 0; }
.drawer nav a {
  display: block; padding: .85rem 0;
  font-family: var(--font-display); font-size: 1.5rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(244, 241, 234, .18);
}
.drawer .btn {
  margin-top: 2rem; width: 100%;
  --btn-bg: var(--brand-sand); --btn-fg: var(--brand-burgundy);
  font-size: .92rem; white-space: normal; text-align: center;
}

/* --------------------------------------------------------------- hero (1) */

.hero {
  position: relative;
  min-height: 100dvh;
  margin-top: -76px;          /* nawigacja leży na obrazie */
  display: flex; align-items: flex-end;
  --fg: #fbf9f5; --fg-soft: rgba(251, 249, 245, .84);
  --rule-strong: rgba(251, 249, 245, .45);
  color: var(--fg);
  background: var(--burgundy-deep);
  isolation: isolate;
  overflow: hidden;
}
/* Wartownik dla IntersectionObserver: dopóki jest widoczny, nawigacja
   pozostaje przezroczysta nad zdjęciem. Bez nasłuchu na scroll. */
.hero__sentinel {
  position: absolute; top: 0; left: 0;
  width: 1px; height: min(58vh, 520px); pointer-events: none;
}
/* Zapas 12% nad i pod kadrem: parallaksa może przesunąć zdjęcie w pionie,
   nie odsłaniając tła sekcji. */
.hero__media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
/* <picture> jest elementem inline: bez tego zdjęcie przyjmuje wysokość
   proporcjonalną do szerokości i urywa się w połowie sekcji. */
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* Kadr poziomy: przycięcie idzie w pionie, trzymamy bryłę nad dolną krawędzią. */
  object-position: 52% 54%;
}
/* Przygaszenie jest lżejsze niż w wersji poprzedniej: zdjęcie ma być
   widoczne, a nie tłem pod ciemną płachtą. Scrim pracuje tylko tam,
   gdzie faktycznie leży tekst. */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(36, 15, 25, .78) 0%, rgba(36, 15, 25, .52) 30%,
                    rgba(36, 15, 25, .16) 58%, rgba(36, 15, 25, 0) 82%),
    linear-gradient(to top, rgba(15, 14, 14, .62) 0%, rgba(15, 14, 14, 0) 52%);
}
.hero__inner {
  max-width: var(--maxw); margin-inline: auto; width: 100%;
  padding: clamp(6.5rem, 11vh, 8rem) var(--pad-x) clamp(3.5rem, 8vh, 6rem);
}
.hero__col { max-width: 45rem; }
.hero .display { font-size: clamp(2.15rem, 1.05rem + 3.3vw, 3.65rem); text-wrap: balance; }
.hero .lead { margin-top: 1.4rem; max-width: 40ch; }

/* Delikatna sugestia przewijania: strona ma zapraszać w głąb. */
.hero__scroll {
  position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(251, 249, 245, .72);
  text-decoration: none;
}
/* Kreska z sunącym w dół rozjaśnieniem. Sam gradient, bez przerysowywania
   układu, więc animacja nie kosztuje nic poza kompozycją warstwy. */
.hero__scroll-line {
  width: 1px; height: 3.2rem;
  background: linear-gradient(to bottom,
              rgba(251, 249, 245, 0) 0%, rgba(251, 249, 245, .5) 22%,
              rgba(251, 249, 245, .5) 78%, rgba(251, 249, 245, 0) 100%);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ''; position: absolute; inset-inline: 0; top: -60%;
  height: 60%; background: #fbf9f5;
  animation: scroll-hint 2.4s var(--ease) infinite;
}
@keyframes scroll-hint {
  0%   { transform: translateY(0);    opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(266%); opacity: 0; }
}
@media (max-width: 899px) { .hero__scroll { display: none; } }

/* ------------------------------------------------------------ odtwarzacz  */

/* Odtwarzacz własny. Kontrolki natywne wyglądają inaczej w każdej
   przeglądarce i są jedynym elementem strony, nad którym nie mamy kontroli
   typograficznej - stąd własny pasek. Zasady systemowe obowiązują tu tak
   samo: jeden promień (--r), FROST jako detal na ciemnym tle, SAND jako
   tekst. Bez trzeciego akcentu, bez cieni, bez gradientów dekoracyjnych
   (jedyny gradient to czytelnościowa przesłona pod paskiem).
   Bez JavaScriptu <video> zachowuje atrybut `controls`, a warstwa własna
   zostaje ukryta - film działa zawsze. */

.player {
  margin: 0 0 clamp(2.75rem, 5vw, 4.5rem);
}

.player__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--charcoal);
  /* Na ciemnym kadrze obwódka fokusu w burgundzie ginie. FROST jest
     wariantem detalu przewidzianym dokładnie na taką powierzchnię. */
  --accent: var(--frost);
}

.player__video {
  display: block;
  width: 100%; height: 100%;
  background: var(--charcoal);
  object-fit: cover;
}

/* Warstwa własna pojawia się dopiero, gdy skrypt przejmie odtwarzacz. */
.player__veil,
.player__big,
.player__bar { display: none; }

.player.is-ready .player__veil,
.player.is-ready .player__big,
.player.is-ready .player__bar { display: block; }

/* ---- klatka tytułowa -------------------------------------------------- */

.player__veil {
  position: absolute; inset: 0;
  background: rgba(15, 14, 14, .3);
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.player.is-started .player__veil { opacity: 0; }

.player__big {
  position: absolute; inset: 0; margin: auto;
  width: clamp(4rem, 6vw, 5rem); height: clamp(4rem, 6vw, 5rem);
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: rgba(244, 241, 234, .93);
  color: var(--brand-burgundy);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(244, 241, 234, .35), 0 0 0 12px rgba(244, 241, 234, .07);
  transition: background-color .3s var(--ease), transform .4s var(--ease),
              opacity .3s var(--ease), box-shadow .4s var(--ease);
}
.player__big svg {
  width: 34%; height: 34%; fill: currentColor;
  margin-left: .1em;   /* trójkąt wyrównany optycznie, nie geometrycznie */
}
.player__big:hover {
  background: #fff;
  transform: scale(1.05);
  box-shadow: 0 0 0 1px rgba(244, 241, 234, .5), 0 0 0 16px rgba(244, 241, 234, .1);
}
.player__big:active { transform: scale(.98); }

/* W trakcie odtwarzania duży przycisk schodzi z kadru; wraca przy pauzie. */
.player.is-playing .player__big {
  opacity: 0; transform: scale(.92); pointer-events: none;
}

/* ---- pasek sterowania ------------------------------------------------- */

.player__bar {
  position: absolute; inset-inline: 0; bottom: 0;
  padding: clamp(2.5rem, 6vw, 3.5rem) clamp(.9rem, 2vw, 1.4rem) clamp(.75rem, 1.5vw, 1.05rem);
  /* Przesłona jest tu funkcją, nie ozdobą: materiał jest zimowy, a białe
     ikony na oświetlonym śniegu bez niej nie mają się o co oprzeć. */
  background: linear-gradient(to top,
              rgba(15, 14, 14, .9) 0%, rgba(15, 14, 14, .62) 38%,
              rgba(15, 14, 14, .22) 72%, rgba(15, 14, 14, 0) 100%);
  color: var(--brand-sand);
  opacity: 0; transform: translateY(.5rem);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.player.is-ui .player__bar { opacity: 1; transform: none; pointer-events: auto; }

/* Kursor znika razem z paskiem: w trakcie odtwarzania kadr ma być pusty. */
.player.is-playing:not(.is-ui) .player__stage { cursor: none; }

/* ---- oś czasu --------------------------------------------------------- */

.player__scrub {
  position: relative;
  height: 3px; margin-bottom: .8rem;
  border-radius: 3px;
  background: rgba(244, 241, 234, .15);
  cursor: pointer;
  touch-action: none;   /* przeciąganie po osi nie przewija strony */
}
/* Pole trafienia większe niż kreska: 3 px trudno trafić palcem i myszą. */
.player__scrub::before {
  content: ''; position: absolute; inset: -12px 0;
}
.player__scrub:focus-visible { outline-offset: 8px; }

.player__buf,
.player__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: inherit;
  width: 0;
}
/* Bufor celowo ciemniejszy od odtworzonej części: przy w pełni pobranym
   materiale cała oś rozjaśniłaby się i postęp przestałby być widoczny. */
.player__buf  { background: rgba(244, 241, 234, .26); }
.player__fill { background: var(--frost); }

.player__dot {
  position: absolute; right: 0; top: 50%;
  width: .68rem; height: .68rem; margin: -.34rem -.34rem 0 0;
  border-radius: 50%; background: var(--brand-sand);
  transform: scale(0);
  transition: transform .25s var(--ease);
}
.player__scrub:hover .player__dot,
.player__scrub:focus-visible .player__dot,
.player.is-scrubbing .player__dot { transform: scale(1); }

/* ---- rząd przycisków -------------------------------------------------- */

.player__row { display: flex; align-items: center; gap: .35rem; }
.player__grow { flex: 1 1 auto; }

.player__btn {
  flex: none;
  display: grid; place-items: center;
  width: 2.15rem; height: 2.15rem;
  padding: 0; border: 0; border-radius: var(--r);
  background: transparent; color: inherit;
  cursor: pointer; opacity: .82;
  transition: opacity .25s var(--ease), background-color .25s var(--ease);
}
.player__btn:hover { opacity: 1; background: rgba(244, 241, 234, .13); }
.player__btn svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }

/* Para ikon w jednym przycisku: stan decyduje, która jest widoczna. */
.player__i--pause,
.player__i--muted,
.player__i--close { display: none; }
.player.is-playing .player__i--play   { display: none; }
.player.is-playing .player__i--pause  { display: block; }
.player.is-muted   .player__i--vol    { display: none; }
.player.is-muted   .player__i--muted  { display: block; }
.player.is-full    .player__i--open   { display: none; }
.player.is-full    .player__i--close  { display: block; }

.player__time {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .01em;
  color: rgba(244, 241, 234, .74);
  padding-inline: .5rem .35rem;
  white-space: nowrap;
}
.player__time b { font-weight: 400; color: var(--brand-sand); }
.player__sep { padding-inline: .4em; opacity: .55; }

/* ---- głośność --------------------------------------------------------- */

.player__sound { display: flex; align-items: center; }

.player__vol {
  -webkit-appearance: none; appearance: none;
  width: 0; opacity: 0;
  height: 3px; margin: 0; padding: 0;
  background: transparent; cursor: pointer;
  transition: width .3s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
}
/* Suwak wysuwa się dopiero przy kontakcie z grupą: w spoczynku pasek ma
   pozostać możliwie pusty. */
.player__sound:hover .player__vol,
.player__vol:focus-visible { width: 4.5rem; opacity: 1; margin-inline: .45rem .25rem; }

.player__vol::-webkit-slider-runnable-track {
  height: 3px; border-radius: 3px; background: rgba(244, 241, 234, .25);
}
.player__vol::-moz-range-track {
  height: 3px; border-radius: 3px; background: rgba(244, 241, 234, .25);
}
.player__vol::-moz-range-progress {
  height: 3px; border-radius: 3px; background: var(--frost);
}
.player__vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: .68rem; height: .68rem; margin-top: -.19rem;
  border: 0; border-radius: 50%; background: var(--brand-sand);
}
.player__vol::-moz-range-thumb {
  width: .68rem; height: .68rem;
  border: 0; border-radius: 50%; background: var(--brand-sand);
}

/* Telefon nie ma programowej regulacji głośności - zostaje samo wyciszenie. */
@media (max-width: 640px), (hover: none) {
  .player__vol { display: none; }
}

/* ---- podpis ----------------------------------------------------------- */

.player__cap {
  margin-top: .85rem;
  font-size: .82rem; line-height: 1.55;
  color: var(--fg-soft);
  max-width: 68ch;
}

/* ---- pełny ekran ------------------------------------------------------ */

/* W pełnym ekranie kadr przestaje być kafelkiem w siatce: wypełnia ekran,
   a film mieści się w całości (contain), bez przycinania boków. */
.player:fullscreen { margin: 0; display: grid; place-items: center; background: var(--charcoal); }
.player:fullscreen .player__stage { width: 100%; height: 100%; aspect-ratio: auto !important; border-radius: 0; }
.player:fullscreen .player__video { object-fit: contain; }
.player:fullscreen .player__cap { display: none; }

@media (prefers-reduced-motion: reduce) {
  .player__veil, .player__big, .player__bar, .player__dot, .player__vol { transition: none; }
}

/* ------------------------------------------------------- pasek wyróżników */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: 1px solid var(--rule);
}
.facts__item {
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1rem, 2vw, 2rem)
           clamp(1.8rem, 3vw, 2.6rem) 0;
  border-bottom: 1px solid var(--rule);
}
.facts__item + .facts__item { border-left: 1px solid var(--rule); padding-left: clamp(1rem, 2vw, 2rem); }
.facts__v {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.2rem + 1.9vw, 2.65rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.facts__v small { font-size: .42em; letter-spacing: 0; }
.facts__k { display: block; margin-top: .7rem; font-size: .85rem; color: var(--fg-soft); }

@media (max-width: 640px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts__item, .facts__item + .facts__item { padding-inline: 0 1rem; border-left: 0; }
  .facts__item:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--rule); }
}

/* ------------------------------------------------- second home (idea)     */

/* Kadr wiodący sekcji: pełna szerokość kolumny tekstowej, natywne proporcje
   zdjęcia. Zdjęcie ma być dużym, spokojnym obrazem, nie ilustracją akapitu. */
.home__cover { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.home__cover .media { aspect-ratio: 16 / 9; }
@media (max-width: 640px) { .home__cover .media { aspect-ratio: 4 / 3; } }
.home__cover figcaption { margin-top: .8rem; }

.home {
  display: grid;
  gap: clamp(2rem, 4vw, 4.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 900px) {
  .home { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
}
.home__list {
  list-style: none; padding: 0;
  display: grid; gap: 0;
}
.home__list li {
  display: grid; gap: .3rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule);
}
.home__list li:last-child { border-bottom: 1px solid var(--rule); }
.home__list b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.16rem; line-height: 1.25;
}
.home__list span { font-size: .93rem; color: var(--fg-soft); }

/* ------------------------------------------------------ filar SOHO (design) */

.editorial {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(12, 1fr);
  align-items: end;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.editorial__lead   { grid-column: 1 / -1; }
.editorial__big    { grid-column: 1 / -1; }
.editorial__small  { grid-column: 1 / -1; }
.editorial__text   { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .editorial__lead  { grid-column: 1 / 6; align-self: start; }
  .editorial__big   { grid-column: 6 / 13; margin-top: -8vh; }
  .editorial__small { grid-column: 1 / 5; }
  .editorial__text  { grid-column: 6 / 12; align-self: end; padding-bottom: 1rem; }
}
.editorial__big .media   { aspect-ratio: 16 / 9; }
.editorial__small .media { aspect-ratio: 4 / 5; }
@media (max-width: 899px) {
  .editorial__small .media { aspect-ratio: 3 / 2; }
}
.figcap {
  margin-top: .8rem; font-size: .8rem;
  color: var(--fg-soft);
}

/* ------------------------------------------------------ filar VUE (widok) */

/* Układ dwukolumnowy. Pionowe ujęcie zostaje w swoim kadrze zamiast być
   ścinane do pasa panoramy, a tekst leży na jasnym paśmie, nie na zdjęciu:
   kontrast nie zależy wtedy od tego, jak jasne akurat jest niebo. */
.vue__split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 1000px) {
  .vue__split { grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); }
}
.vue__figure { margin: 0; }
.vue__figure .media { aspect-ratio: 3 / 4; }
@media (min-width: 1000px) {
  .vue__figure .media { aspect-ratio: 2 / 3; max-height: 82vh; }
}
.vue__text { min-width: 0; }

.vue__exposures {
  display: grid; gap: 0;
  margin-top: clamp(2rem, 3.5vw, 2.8rem); padding: 0; list-style: none;
}
.vue__exposures li {
  font-size: .93rem; line-height: 1.55; color: var(--fg-soft);
  padding: 1rem 0; border-top: 1px solid var(--rule);
}
.vue__exposures li:last-child { border-bottom: 1px solid var(--rule); }
.vue__exposures b {
  display: block; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--detail);
  font-weight: 500; margin-bottom: .3rem;
}

/* ------------------------------------------------------------ klimat      */

/* Pasmo nastroju: plakat marki w naturalnych proporcjach obok krótkiej listy
   momentów. Bez akapitów - ta sekcja ma działać obrazem. */
.mood {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .mood { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); }
}
.mood__poster { margin: 0; }
.mood__poster img {
  width: 100%; max-width: 34rem;
  margin-inline: auto;
  border-radius: var(--r);
}

.moments { list-style: none; padding: 0; margin-top: clamp(1.8rem, 3vw, 2.6rem); }
.moments li {
  display: grid; gap: .35rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.moments li:last-child { border-bottom: 1px solid var(--rule); }
.moments i {
  font-family: var(--font-mono); font-style: normal;
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--detail);
}
.moments span { font-size: 1.02rem; }

/* --------------------------------------------------- dlaczego SOHO VUE    */

.why {
  display: grid;
  gap: clamp(2rem, 4vw, 3.4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 820px) { .why { grid-template-columns: repeat(3, 1fr); } }
.why__i { border-top: 2px solid var(--accent); padding-top: 1.5rem; }
.why__i h3 { margin-bottom: .8rem; }
.why__i p { font-size: .95rem; color: var(--fg-soft); }

/* ------------------------------------------------------------ apartamenty */

.apart__head {
  display: grid; gap: clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
@media (min-width: 900px) { .apart__head { grid-template-columns: auto 1fr; } }
.apart__count {
  font-family: var(--font-display);
  font-size: clamp(5rem, 3rem + 9vw, 11rem);
  line-height: .85;
  padding-bottom: .06em;
  letter-spacing: -.045em;
  color: var(--accent);
}
/* Kryteria wyboru apartamentu. Liczba kart (6) dzieli się przez 1, 2 i 3,
   więc każdy z trzech układów zamyka się pełnymi rzędami - stąd sztywne
   progi zamiast auto-fit, który przy tej szerokości robił pięć kolumn
   i jedną kartę sierotę w drugim rzędzie.
   Odstęp 1px na tle w kolorze kreski daje siatkę włosowych linii bez
   dokładania obramowań do pojedynczych kart. */
.apart__grid {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 560px) { .apart__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .apart__grid { grid-template-columns: repeat(3, 1fr); } }

.apart__card {
  background: var(--bg);
  padding: 1.6rem 1.5rem 1.9rem;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.apart__card p { margin-top: 1rem; font-size: .95rem; color: var(--fg-soft); }

/* ------------------------------------------------------------ cena        */

.price {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (min-width: 900px) { .price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.price__figure {
  border-top: 2px solid var(--accent);
  padding-top: 1.6rem;
}
.price__v {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  line-height: 1; letter-spacing: -.025em;
  display: block;
}
.price__v sup {
  font-size: .26em; vertical-align: super;
  font-family: var(--font-sans); letter-spacing: .02em; margin-right: .35rem;
  top: -.1em;
}
.price__u { display: block; margin-top: .9rem; font-size: .95rem; color: var(--fg-soft); }

/* Komunikat o systemie płatności: jedno zdanie, bez tabel i procentów. */
.payment {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  border-top: 1px solid var(--rule-strong);
  padding-top: 1.6rem;
}
.payment .label { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); }
.payment p {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem);
  line-height: 1.3; padding-bottom: .06em;
  max-width: 30ch;
}

.stage {
  display: grid; gap: 0;
  border: 1px solid var(--rule);
}
.stage__row {
  display: grid; grid-template-columns: auto 1fr;
  gap: 1.2rem; align-items: baseline;
  padding: 1.35rem 1.5rem;
}
.stage__row + .stage__row { border-top: 1px solid var(--rule); }
.stage__row b {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--detail);
  white-space: nowrap;
}
.stage__row span { font-size: .95rem; color: var(--fg-soft); }
.stage__row--now { background: var(--panel); }

/* ----------------------------------------------------- rynek i lokalizacja */

.market {
  display: grid; gap: clamp(2rem, 4vw, 4rem);
}
@media (min-width: 960px) { .market { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

.market__points { list-style: none; padding: 0; margin-top: 2rem; }
.market__points li {
  display: grid; gap: .5rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--rule);
  font-size: .96rem;
}
@media (min-width: 560px) {
  .market__points li { grid-template-columns: 8rem 1fr; gap: 1.5rem; }
}
.market__points li:last-child { border-bottom: 1px solid var(--rule); }
.market__points i {
  font-family: var(--font-mono); font-style: normal;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--detail); padding-top: .3rem;
}

.stats {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.stats__i { background: var(--bg); padding: 1.8rem 1.5rem; }
.stats__v {
  font-family: var(--font-display); font-size: 2.4rem; line-height: 1.1;
  letter-spacing: -.025em; display: block;
}
.stats__d { display: block; margin-top: .7rem; font-size: .88rem; color: var(--fg-soft); }
.stats__s { display: block; margin-top: .9rem; font-size: .76rem; color: var(--fg-soft); }

/* ------------------------------------------------------------ cztery pory */

.seasons {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .seasons { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .seasons { grid-template-columns: repeat(4, 1fr); } }
.season { background: var(--bg); padding: clamp(1.8rem, 3vw, 2.4rem); }
.season__n {
  font-family: var(--font-display); font-size: 1.5rem;
  padding-bottom: .05em;
}
.season ul { list-style: none; padding: 0; margin-top: 1.2rem; }
.season li { font-size: .92rem; color: var(--fg-soft); padding: .35rem 0; }

/* ------------------------------------------------------------- udogodnienia */

.amen {
  display: grid; gap: clamp(2rem, 4vw, 3.4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) { .amen { grid-template-columns: repeat(3, 1fr); } }
.amen__g { border-top: 1px solid var(--rule-strong); padding-top: 1.6rem; }
.amen__g h3 { margin-bottom: .9rem; }
.amen__g p { font-size: .95rem; color: var(--fg-soft); }
.amen__items {
  list-style: none; padding: 0; margin-top: 1.4rem;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.amen__items li {
  font-size: .82rem; padding: .4rem .8rem;
  border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--fg-soft);
}

/* ---------------------------------------------------------------- najem   */

.qa { margin-top: clamp(2rem, 4vw, 3rem); }
.qa__row {
  display: grid; gap: .5rem 3rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 820px) { .qa__row { grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); } }
.qa__row:last-child { border-bottom: 1px solid var(--rule); }
.qa__q { font-weight: 500; font-size: .98rem; }
.qa__a { font-size: .95rem; color: var(--fg-soft); }

/* --------------------------------------------------------------- operator */

.operator__marks {
  display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}
.operator__logo { width: clamp(160px, 26vw, 220px); height: auto; }
.operator__stamp { width: clamp(88px, 14vw, 120px); height: auto; }

.pending {
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  margin-top: 2rem;
  max-width: 58ch;
}
.pending p { font-size: .96rem; color: var(--fg-soft); }
.pending .btn-row { margin-top: 1.6rem; }

/* -------------------------------------------------------------- formularz */

.form__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 960px) { .form__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

.promise { list-style: none; padding: 0; margin-top: 2rem; }
.promise li {
  font-size: .93rem; padding: .6rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg-soft);
}

.form { display: grid; gap: 1.35rem; }
.field { display: grid; gap: .45rem; }
.field > label {
  font-size: .85rem; font-weight: 500; letter-spacing: .01em;
  color: var(--fg);
}
.field .hint { font-size: .78rem; color: var(--fg-soft); }
.field input, .field select, .field textarea {
  font: inherit; font-size: .97rem;
  width: 100%;
  padding: .95rem 1rem;
  color: var(--fg);
  background: var(--panel);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-soft); opacity: .92; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--fg);
  background: rgba(255, 255, 255, .12);
}
.band--paper .field input:focus, .band--paper .field select:focus,
.band--linen .field input:focus, .band--linen .field select:focus,
.band--dune .field input:focus, .band--dune .field select:focus,
.band--frost .field input:focus, .band--frost .field select:focus { background: #fff; }
.field select { appearance: none; cursor: pointer; }
.field select option { color: #211a1c; background: #fff; }
.field--err input, .field--err select { border-color: #f0a3a3; }
.field .err { font-size: .8rem; color: #ffc9c9; }
.band--paper .field .err, .band--linen .field .err,
.band--dune .field .err, .band--frost .field .err { color: #a8232a; }

.form__row { display: grid; gap: 1.35rem; }
@media (min-width: 620px) { .form__row { grid-template-columns: 1fr 1fr; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.consent input { width: 1.15rem; height: 1.15rem; margin-top: .22rem; accent-color: var(--accent); }
.consent label { font-size: .82rem; line-height: 1.5; color: var(--fg-soft); }
.consent a { color: var(--fg); }

.step2 {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}
.step2 > summary {
  cursor: pointer; list-style: none;
  font-size: .9rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: .6rem;
}
.step2 > summary::-webkit-details-marker { display: none; }
.step2 > summary::after {
  content: '+'; font-family: var(--font-mono); font-size: 1.1rem;
  transition: transform .3s var(--ease);
}
.step2[open] > summary::after { transform: rotate(45deg); }
.step2__body { display: grid; gap: 1.35rem; padding-top: 1.5rem; }

.form__status {
  border: 1px solid var(--rule-strong);
  padding: 1.1rem 1.2rem; border-radius: var(--r);
  font-size: .93rem;
}
.form__status[hidden] { display: none; }
.form__status--ok { border-color: var(--fg); }
.form__status--err { border-color: #f0a3a3; }

.btn[aria-busy="true"] { opacity: .72; pointer-events: none; }
.btn__spin { display: none; width: .9rem; height: .9rem; border-radius: 50%;
  border: 1.5px solid currentColor; border-top-color: transparent; }
.btn[aria-busy="true"] .btn__spin { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .btn[aria-busy="true"] .btn__spin { animation: spin .7s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------------- FAQ */

.faq { margin-top: clamp(2rem, 4vw, 3rem); max-width: 62rem; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 3rem 1.25rem 0;
  position: relative;
  font-size: 1.02rem; font-weight: 450;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: .35rem; top: 1.15rem;
  font-family: var(--font-mono); font-size: 1.3rem; color: var(--detail);
  transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq__a { padding: 0 clamp(0rem, 6vw, 5rem) 1.6rem 0; }
.faq__a p { font-size: .96rem; color: var(--fg-soft); max-width: 68ch; }

/* ---------------------------------------------------------------- kontakt */

.advisor {
  display: grid; gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  border: 1px solid var(--rule);
  padding: clamp(1.8rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 760px) { .advisor { grid-template-columns: auto 1fr auto; } }
.advisor__ph {
  width: 10.5rem; height: 13.5rem; border-radius: var(--r);
  background: var(--panel);
  border: 1px dashed var(--rule-strong);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-soft);
  text-align: center; padding: .6rem;
}
.advisor__ph img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.advisor dl { margin: 1rem 0 0; display: grid; gap: .45rem; font-size: .93rem; }
.advisor dt { color: var(--fg-soft); font-size: .8rem; }
.advisor dd { margin: 0 0 .6rem; }
.advisor a[href^="tel"], .advisor a[href^="mailto"] {
  font-family: var(--font-mono); text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
}

/* ------------------------------------------------------------ końcowe CTA */

.finale {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(30rem, 78vh, 46rem);
  display: grid; align-items: center;
  --fg: #fbf9f5; --fg-soft: rgba(251, 249, 245, .84);
  --rule-strong: rgba(251, 249, 245, .45);
  color: var(--fg);
  background: var(--burgundy-deep);
}
.finale__media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.finale__media picture { display: block; width: 100%; height: 100%; }
.finale__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.finale::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(36, 15, 25, .7), rgba(15, 14, 14, .68));
}
.finale__inner { max-width: 46rem; }
.finale__mark { width: clamp(150px, 16vw, 200px); margin-bottom: 2rem; }

/* -------------------------------------------------------------- pasek mob */

.mobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar);
  display: none;
  grid-template-columns: 1fr 1fr;
  background: var(--burgundy);
  border-top: 1px solid rgba(244, 241, 234, .2);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobar a {
  padding: 1.05rem .5rem;
  text-align: center; text-decoration: none;
  font-size: .9rem; font-weight: 500; color: var(--brand-sand);
}
.mobar a + a { background: var(--brand-sand); color: var(--brand-burgundy); }
@media (max-width: 767px) {
  .mobar { display: grid; }
  body { padding-bottom: 3.6rem; }
}

/* ------------------------------------------------------- powrót na górę  */

/* Kwadrat, nie kółko: obowiązuje jeden promień narożnika na całej stronie.
   Bez cienia, bo projekt nie używa cieni nigdzie - odrębność daje kolor
   marki, a nie uniesienie nad tłem. */
.totop {
  position: fixed;
  right: var(--pad-x);
  bottom: clamp(1.25rem, 3.5vh, 2.25rem);
  z-index: var(--z-bar);
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  background: var(--brand-burgundy);
  color: var(--brand-sand);
  /* Jasna kreska jest po to, żeby przycisk miał kształt również na
     ciemnej stopce, gdzie sam bordo zlewa się z tłem. */
  border: 1px solid rgba(244, 241, 234, .28);
  border-radius: var(--r);
  text-decoration: none;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.totop svg { width: 1.15rem; height: 1.15rem; display: block; }
.totop:hover { background: var(--burgundy-hi); border-color: rgba(244, 241, 234, .5); }
.totop:active { transform: translateY(1px); }

/* Pokazuje się dopiero, gdy jest po co wracać - próg dzieli z paskiem
   nawigacji (ten sam wartownik w hero). Bez JavaScriptu widoczny od razu:
   lepiej mieć zbędny przycisk niż żaden. */
.js .totop {
  opacity: 0; visibility: hidden;
  transform: translateY(.5rem); pointer-events: none;
}
.js.is-scrolled .totop {
  opacity: 1; visibility: visible;
  transform: none; pointer-events: auto;
}

/* Nad paskiem kontaktu na telefonie, żeby nie zasłaniał "Zadzwoń". */
@media (max-width: 767px) {
  .totop {
    width: 2.75rem; height: 2.75rem;
    bottom: calc(3.6rem + env(safe-area-inset-bottom) + .7rem);
  }
}

/* ------------------------------------------------------------------ stopka */

.foot { padding-block: clamp(3.5rem, 6vw, 5.5rem) 2.5rem; }
.foot__top {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule);
}
@media (min-width: 860px) { .foot__top { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot__mark { width: 168px; }
.foot__developer {
  display: flex; align-items: center; gap: 1.25rem;
  margin-top: 1.75rem;
}
.foot__developer-logo { width: 130px; height: auto; filter: invert(1); }
.foot__developer-stamp { width: 72px; height: auto; }
.foot nav ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.foot nav a { font-size: .9rem; text-decoration: none; color: var(--fg-soft); }
.foot nav a:hover { color: var(--fg); }
.foot__legal { margin-top: 2.2rem; display: grid; gap: 1rem; }
.foot__legal p { font-size: .8rem; line-height: 1.6; color: var(--fg-soft); max-width: 90ch; }
.foot__bottom {
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .8rem; color: var(--fg-soft);
}
.foot__bottom a { text-decoration: none; }
.foot__bottom a:hover { text-decoration: underline; }

/* ==========================================================================
   RWD. Każdy układ wielokolumnowy ma tu jawnie opisane zwijanie.
   Punkty: 1119px (menu), 899px (układy dwukolumnowe), 767px, 480px.
   ========================================================================== */

/* ---- tablet i mniejsze ---------------------------------------------- */
@media (max-width: 899px) {
  .hero { align-items: flex-end; }
  /* Dolny odstęp mieści stały pasek kontaktowy. */
  .hero__inner { padding-top: clamp(5rem, 13vh, 7rem); padding-bottom: 4.6rem; }
  .hero .display { font-size: clamp(2rem, 7.4vw, 2.85rem); }
  .hero .lead { font-size: 1.02rem; max-width: 34ch; }

  /* Przy wąskim ekranie poziomy gradient przestaje działać: przyciemniamy
     od dołu. Górna część kadru pozostaje jasna i widoczna. */
  .hero::after {
    background:
      linear-gradient(to top, rgba(15, 14, 14, .86) 0%, rgba(20, 12, 15, .79) 40%,
                      rgba(28, 14, 20, .5) 60%, rgba(36, 15, 25, .18) 80%,
                      rgba(36, 15, 25, .04) 100%);
  }
  .hero__media img { object-position: 58% 52%; }

  .apart__count { font-size: clamp(4rem, 17vw, 6.5rem); }
  .price__v { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.8rem); }

  /* Etykieta i opis jedno pod drugim, bez zderzania kolumn. */
  .stage__row { grid-template-columns: 1fr; gap: .45rem; }
  .stage__row b { letter-spacing: .16em; }

  .advisor { grid-template-columns: 1fr; justify-items: start; }
  .advisor .btn-row .btn { width: 100%; }
}

/* Poniżej 720 px hero pokazuje ujęcie pionowe (patrz art direction w
   hero.php). Ten kadr przycina się w poziomie, nie w pionie, więc punkt
   ciężkości przesuwamy w lewo - na bryłę, która inaczej ucieka poza kadr.
   Reguła musi stać za blokiem 899 px, bo tamten też pasuje do telefonu. */
@media (max-width: 719px) {
  .hero__media img { object-position: 38% 50%; }
}

/* ---- telefon --------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --pad-y: clamp(3.75rem, 12vw, 5.5rem); }

  .nav__inner { height: 66px; }
  .nav--solid .nav__inner { height: 60px; }

  .h2 { font-size: clamp(1.72rem, 6.6vw, 2.2rem); }
  .h3 { font-size: 1.22rem; }
  .lead { font-size: 1.02rem; }
  .quote { font-size: clamp(1.35rem, 5.6vw, 1.75rem); }

  /* Przyciski na całą szerokość: jeden kciuk, jeden cel. */
  .btn-row { flex-direction: column; align-items: stretch; gap: .7rem; }
  .btn-row .btn { width: 100%; }
  .btn { font-size: .9rem; padding-inline: 1.1rem; }

  .facts { grid-template-columns: 1fr; }
  .facts__item,
  .facts__item + .facts__item {
    padding: 1.4rem 0; border-left: 0; padding-left: 0;
  }
  .facts__item:nth-child(even) { padding-left: 0; border-left: 0; }

  .editorial { gap: 1.6rem; }
  .editorial__big { margin-top: 0; }


  .amen { gap: 2.2rem; }
  .why { gap: 1.8rem; }

  .qa__row { padding: 1.15rem 0; }

  .foot__bottom { flex-direction: column; gap: .6rem; }
}

/* ---- małe telefony ---------------------------------------------------- */
@media (max-width: 480px) {
  .hero .display { font-size: clamp(1.85rem, 8.2vw, 2.3rem); }
  .apart__count { font-size: 4.2rem; }
  .apart__card { padding: 1.3rem 1.2rem 1.5rem; }
  .amen__items li { font-size: .78rem; }
  .faq summary { font-size: .96rem; padding-right: 2.4rem; }
}

/* Nigdy nie dopuszczamy do poziomego przewijania całej strony:
   przewija się wyłącznie karuzela apartamentów. */
.wrap > * { min-width: 0; }

/* ------------------------------------------------------------- kadr zdjęć */

/* Wspólna ramka kadru. Zdjęcie wypełnia ją przez object-fit, więc o kadrze
   decyduje układ, a nie proporcje pliku: to samo ujęcie występuje raz
   szeroko, raz wysoko, bez generowania osobnych plików.
   Ramka jest też sceną dla ruchu - zdjęcie może się w niej przesuwać. */
.media {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r);
  background: rgba(140, 128, 108, .16);
}
.media picture, .media img { display: block; width: 100%; height: 100%; }
.media img { object-fit: cover; }

/* --------------------------------------------------------------- galeria  */

/* Bez `overflow: hidden` na sekcji: przypinana taśma leży w środku, a
   przycinanie zostawiamy jej własnemu kontenerowi. Poziome wyjście poza
   ekran blokuje `.galeria__viewport`. */
.galeria { padding-block: var(--pad-y); }
.galeria__head { max-width: 44rem; }

.galeria__stage { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Bez JavaScriptu pas jest zwykłym kontenerem przewijanym w poziomie
   (działa też z klawiatury). Warstwa ruchu podmienia go na przypięty ekran. */
.galeria__viewport {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.galeria__viewport[data-pinned] { overflow: hidden; scroll-snap-type: none; }
.galeria__viewport:focus-visible { outline-offset: 6px; }

.galeria__track {
  display: flex; align-items: flex-end;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  padding-inline: var(--pad-x);
  width: max-content;
}
/* Szerokość niesie figura, nie kadr. Inaczej dłuższy podpis rozpycha
   element ponad szerokość zdjęcia i na telefonie ucieka poza ekran. */
.shot { margin: 0; flex: 0 0 auto; }
.shot--wide { width: min(50rem, 86vw); }
.shot--tall { width: min(22rem, 64vw); }
.shot .media { width: 100%; height: clamp(17rem, 42vh, 26rem); scroll-snap-align: center; }
@media (min-width: 1000px) {
  .shot--wide .media { height: min(46vh, 25rem); }
  .shot--tall .media { height: min(56vh, 31rem); }
}
.shot figcaption { margin-top: 1rem; max-width: 30rem; }
.shot figcaption b {
  display: block; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--detail);
  font-weight: 500; margin-bottom: .3rem;
}
.shot figcaption span { display: block; font-size: .9rem; line-height: 1.5; color: var(--fg-soft); }
.galeria__note { margin-top: clamp(2rem, 4vw, 3rem); }

/* Wariant przypięty. Przypięta jest sama taśma, więc do wyśrodkowania
   zostaje tylko kadr z podpisem - a to mieści się w każdym oknie, które
   przechodzi próg wysokości ustawiony w warstwie ruchu. */
.galeria__stage[data-pinned] {
  min-height: 100vh;
  display: flex; align-items: center;
  /* Górny zapas na pasek nawigacji, który leży nad przypiętą taśmą. */
  padding-block: clamp(5rem, 12vh, 7rem) clamp(2rem, 5vh, 3.5rem);
}
.galeria__stage[data-pinned] .galeria__viewport { width: 100%; }

/* ------------------------------------------------------------------ ruch  */

/* Stan początkowy tylko przy działającym JavaScripcie: bez niego treść
   jest widoczna od razu (czytniki, boty, wyłączone skrypty). */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* Nagłówek hero wjeżdża wierszami spod maski. Podział na wiersze jest
   w treści, nie w skrypcie, więc bez JS zdanie czyta się normalnie. */
.hero__title .ln   { display: block; }
.hero__title .ln > i { display: block; font-style: normal; }
.js .hero__title .ln {
  overflow: hidden;
  /* zapas na wydłużenia liter (g, y, ą): maska nie może ich ścinać */
  padding-bottom: .12em; margin-bottom: -.12em;
}
.js .hero__title .ln > i { transform: translateY(115%); }
.js [data-hero-el] { opacity: 0; }

/* Kurtyna zdjęcia: kadr odsłania się od dołu do góry. */
.js .media[data-curtain] { clip-path: inset(0 0 101% 0); }

/* Bezpiecznik z head.php. Gdy warstwa ruchu nie wystartowała, elementy
   o stanie początkowym muszą wrócić do postaci widocznej. */
.no-motion .hero__title .ln > i,
.no-motion [data-hero-el] { transform: none; opacity: 1; }
.no-motion .media[data-curtain] { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .hero__title .ln > i { transform: none; }
  .js [data-hero-el] { opacity: 1; }
  .js .media[data-curtain] { clip-path: none; }
  .hero__scroll-line::after { animation: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------- print    */

@media print {
  .nav, .mobar, .drawer, .totop, .hero__media, .finale__media { display: none !important; }
  .band { background: #fff !important; color: #000 !important; }
}