/* ==========================================================================
   NIGHTSHIFT MEDIA — oferta studniowkowa (v2)
   Paleta i typografia z oferty PDF: papier #f2f1eb, atrament #111215,
   akcent #2452eb, waski ciezki grotesk + szeryfowa kursywa jako kontrapunkt.
   ========================================================================== */

/* --- kroje pisma (hostowane lokalnie) --- */
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 700; font-stretch: 75% 100%; 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: 'Gelasio';
  src: url('assets/fonts/gelasio-latin-italic.woff2') format('woff2');
  font-weight: 400 600; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Gelasio';
  src: url('assets/fonts/gelasio-latin-ext-italic.woff2') format('woff2');
  font-weight: 400 600; font-style: italic; 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;
}

/* ==========================================================================
   Zmienne i podstawy
   ========================================================================== */
:root {
  --paper: #f2f1eb;
  --ink: #111215;
  --ink-2: #17181c;
  --blue: #2452eb;
  --blue-soft: #91a9ff;
  --mute-paper: #575a62;
  --mute-ink: #b8b9bf;
  --line-paper: rgba(17, 18, 21, .16);
  --line-ink: rgba(242, 241, 235, .16);

  --font-display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, 'Gelasio', 'Times New Roman', serif;

  --s: 1;   /* skala rozmiarow zaleznych od szerokosci ekranu - patrz regula ponizej :root */
  --maxw: calc(1440px * var(--s));
  --gutter: clamp(20px, calc(4.5vw * var(--s)), calc(72px * var(--s)));
  --section-y: clamp(72px, calc(9vw * var(--s)), calc(150px * var(--s)));
  --header-h: max(52px, calc(68px * var(--s)));
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light dark;
}

/* Skala na komputerach: strona ma wygladac proporcjonalnie tak jak na monitorze 4K w skali 150% (okno ok.
   2560 x 1300 px CSS, tam --s = 1). Mniejsze okno = mniejsze naglowki, odstepy i szerokosc tresci, tak zeby
   zajmowaly podobna czesc ekranu jak na 4K (tytul ok. 11-13% wysokosci okna, tresc ok. 56-75% szerokosci).
   --s ~ min(szerokosc / 2560, wysokosc / 1300) w stopniach, najmniej .8: przy .7 panel formularza schodzil
   ponizej 360 px (przelacznik wariantow jak na telefonie), a linie "Zespol" w kartach wariantow sie
   rozjezdzaly. Tekst nie schodzi ponizej minimow z clamp. --s mnozy wszystkie clamp z vw, szerokosc tresci
   i pasek gorny; wysokosci liczone od ekranu (vh) sie nie zmieniaja. Ponizej 1200 px (tablety, telefony)
   bez zmian. */
@media (min-width: 1200px) { :root { --s: .8; } }                                 /* laptopy, MacBooki, Full HD, 1440p w 125% */
@media (min-width: 2176px) and (min-height: 1105px) { :root { --s: .9; } }
@media (min-width: 2432px) and (min-height: 1235px) { :root { --s: 1; } }         /* 4K w 150%, 1440p w 100% */

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

html {
  /* ciemne tlo dokumentu i body: Safari na iPhonie bierze kolor paska stanu u gory z tla body (samo html nie
     wystarczylo), a przy przeciaganiu strony poza krawedz widac je nad ciemnym otwarciem i pod ciemna stopka.
     Jasne tlo sekcji daje <main>. */
  background-color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 8px);
  -webkit-text-size-adjust: 100%;
}
html:has(dialog[open]) { overflow: hidden; }
main { display: block; background: var(--paper); }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(15px, calc(1.02vw * var(--s)), calc(17px * var(--s)));
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--blue); color: #fff; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.on-ink :focus-visible, .on-blue :focus-visible, .menu :focus-visible { outline-color: var(--blue-soft); }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 18px; background: var(--blue); color: #fff; font: 600 14px/1 var(--font-body); }
.skip-link:focus { left: 8px; top: 8px; }

/* jedna szerokosc tresci dla calej strony — sekcje nie maja wlasnych marginesow bocznych */
.shell { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

.section { position: relative; padding: var(--section-y) 0; }

.on-ink { background: var(--ink); color: var(--paper); }
.on-ink .body-text, .on-ink .muted, .on-ink .stack-list p, .on-ink .col p, .on-ink .row__desc, .on-ink .steps p { color: var(--mute-ink); }
.on-ink .eyebrow, .on-ink .col__label, .on-ink .row__num { color: var(--blue-soft); }
.on-ink .eyebrow--plain { color: var(--mute-ink); }
.on-ink .rule, .on-ink .row, .on-ink .rows .row:last-child, .on-ink .stack-list > li, .on-ink .col, .on-ink .steps > li { border-color: var(--line-ink); }
.on-ink .note { color: #9a9ca4; }
.on-ink .caption { color: #8d8f97; }

.on-blue { background: var(--blue); color: var(--paper); }
.on-blue .eyebrow { color: rgba(242, 241, 235, .92); }
.on-blue .row__num { color: rgba(242, 241, 235, .9); }
.on-blue .row__desc { color: rgba(242, 241, 235, .93); }
.on-blue .row, .on-blue .rows .row:last-child { border-color: rgba(242, 241, 235, .3); }

/* ==========================================================================
   Typografia
   ========================================================================== */
.eyebrow {
  margin: 0 0 clamp(18px, calc(2.4vw * var(--s)), calc(30px * var(--s)));
  font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1.4 var(--font-body);
  letter-spacing: .2em; text-transform: uppercase; color: var(--blue);
}
.eyebrow--plain { color: var(--mute-paper); }

.display {
  margin: 0;
  font-family: var(--font-display); font-weight: 700; font-stretch: 82%;
  font-size: clamp(38px, calc(6.6vw * var(--s)), calc(98px * var(--s))); line-height: .96; letter-spacing: -.02em;
  text-wrap: pretty;
}
.split .display { font-size: clamp(36px, calc(6vw * var(--s)), calc(90px * var(--s))); }
.display--sm { font-size: clamp(30px, calc(4.6vw * var(--s)), calc(62px * var(--s))); }
.display i, .italic, .quote i, .closer { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: normal; letter-spacing: -.005em; }

.giant {
  margin: 0;
  font-family: var(--font-display); font-weight: 700; font-stretch: 78%;
  font-size: clamp(96px, calc(22vw * var(--s)), calc(340px * var(--s))); line-height: .8; letter-spacing: -.025em;
  position: relative;
}
.giant--md { font-size: clamp(60px, calc(12vw * var(--s)), calc(170px * var(--s))); line-height: .88; }

.lead { margin: 0 0 1.1em; font-size: clamp(18px, calc(1.5vw * var(--s)), calc(23px * var(--s))); line-height: 1.45; max-width: 32ch; text-wrap: pretty; }
.lead:last-child { margin-bottom: 0; }
.body-text { margin: 0 0 1.05em; color: var(--mute-paper); max-width: 60ch; text-wrap: pretty; }
.body-text:last-child { margin-bottom: 0; }
.quote { margin: 0; font-family: var(--font-display); font-weight: 600; font-stretch: 88%; font-size: clamp(24px, calc(2.6vw * var(--s)), calc(38px * var(--s))); line-height: 1.12; letter-spacing: -.015em; }
.note { margin: clamp(30px, calc(4vw * var(--s)), calc(54px * var(--s))) 0 0; font-size: clamp(12px, calc(.92vw * var(--s)), calc(13.5px * var(--s))); line-height: 1.55; color: var(--mute-paper); max-width: 66ch; }
.closer { margin: clamp(40px, calc(5vw * var(--s)), calc(76px * var(--s))) 0 0; font-size: clamp(24px, calc(3.2vw * var(--s)), calc(44px * var(--s))); line-height: 1.2; }
.rule { border: 0; border-top: 1px solid var(--line-paper); margin: 0; }
.caption { margin: 12px 0 0; font: 400 clamp(9.5px, calc(.76vw * var(--s)), calc(11px * var(--s)))/1.5 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute-paper); }
.head-block { margin-bottom: clamp(36px, calc(5vw * var(--s)), calc(76px * var(--s))); }

/* ==========================================================================
   Pasek gorny, pasek postepu, menu telefonu
   ========================================================================== */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  color: var(--paper); border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease;
}
.topbar.is-stuck { background: rgba(13, 14, 17, .84); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); border-bottom-color: rgba(242, 241, 235, .12); }
.topbar__inner { display: flex; align-items: center; gap: 24px; height: 100%; width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }

.topbar__mark { display: flex; align-items: center; height: 100%; padding-right: 10px; flex: none; }
.topbar__mark span {
  display: block; width: clamp(104px, calc(11vw * var(--s)), calc(140px * var(--s))); aspect-ratio: 1522 / 138;
  background: linear-gradient(178deg, #f6f5f8 3%, #d3d2d8 55%, #b4b2bb 100%);
  mask: url('assets/nightshift.png') center / 113.14% auto no-repeat;
  -webkit-mask: url('assets/nightshift.png') center / 113.14% auto no-repeat;
}

.topbar__nav { margin-left: auto; display: flex; align-items: center; gap: clamp(12px, calc(1.8vw * var(--s)), calc(28px * var(--s))); }
.topbar__nav a {
  position: relative; font: 600 11px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: rgba(242, 241, 235, .74); padding: 16px 6px; transition: color .2s;
}
.topbar__nav a::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: 9px; height: 1px; background: var(--blue-soft); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.topbar__nav a:hover, .topbar__nav a[aria-current="true"] { color: var(--paper); }
.topbar__nav a[aria-current="true"]:not(.is-cta)::after { transform: scaleX(1); }
.topbar__nav a.is-cta { color: var(--paper); border: 1px solid rgba(242, 241, 235, .34); border-radius: 999px; padding: calc(15px * var(--s)) calc(20px * var(--s)); }
.topbar__nav a.is-cta::after { display: none; }
.topbar__nav a.is-cta:hover { background: var(--blue); border-color: var(--blue); }

.topbar__menu {
  display: none; margin-left: auto; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(242, 241, 235, .3);
  border-radius: 50%; background: rgba(17, 18, 21, .35); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.topbar__menu span { display: block; width: 18px; height: 1.5px; background: var(--paper); }

.progress { position: fixed; inset: 0 auto auto 0; z-index: 51; height: 2px; width: 100%; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: var(--blue); pointer-events: none; }

/* menu na telefonie */
.menu { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--ink); color: var(--paper); }
.menu::backdrop { background: rgba(10, 11, 14, .7); }
.menu__inner { display: flex; flex-direction: column; min-height: 100%; padding: 22px var(--gutter) 34px; }
.menu__close { align-self: flex-end; width: 46px; height: 46px; border: 1px solid rgba(242, 241, 235, .3); border-radius: 50%; background: transparent; cursor: pointer; position: relative; }
.menu__close::before, .menu__close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; background: var(--paper); transform: translate(-50%, -50%) rotate(45deg); }
.menu__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.menu__nav { display: flex; flex-direction: column; margin: auto 0; }
.menu__nav a { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line-ink); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-stretch: 80%; font-size: clamp(38px, calc(11vw * var(--s)), calc(56px * var(--s))); line-height: 1; letter-spacing: -.02em; }
.menu__nav a:last-child { border-bottom: 1px solid var(--line-ink); }
.menu__nav a b { font: 600 11px/1 var(--font-body); font-stretch: normal; letter-spacing: .18em; color: var(--blue-soft); }
.menu__foot { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 30px; font-size: 15px; }
.menu__foot a { text-decoration: none; color: var(--mute-ink); padding: 8px 0; }

@media (max-width: 899px) {
  .topbar__nav a:not(.is-cta) { display: none; }
  .topbar__menu { display: flex; }
  .topbar__nav { margin-left: auto; }
  .topbar__nav a.is-cta { padding: 13px 16px; letter-spacing: .12em; }
}
@media (max-width: 559px) {
  .topbar__nav { display: none; }
  .topbar__mark span { width: 100px; }
}

/* ==========================================================================
   Zdjecia: rozmyte tlo, potem plynne pojawienie
   ========================================================================== */
.ph { display: block; position: relative; overflow: hidden; background-size: cover; background-position: center; background-color: #202127; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: opacity .7s ease; }
.js .ph img:not(.is-loaded) { opacity: 0; }

.figure { margin: 0; }
.figure .ph { aspect-ratio: var(--ar); }
.figure--fill .ph { aspect-ratio: 3 / 2; }
.figure--portrait .ph { aspect-ratio: 2 / 3; }
.figure--portrait .ph img { object-position: 50% 30%; }
/* telefon: wybrane zdjecia sekcji FOTO w ciasniejszym kadrze na ludzi - proporcje (--tel-ar) i kadr (--tel-kadr)
   ustawia szablon przy zdjeciu. Zmieniajac warunek, zmienic tez sizes tych zdjec w src/oferta.html. */
@media (max-width: 559.98px) {
  .figure--tel .ph { aspect-ratio: var(--tel-ar); }
  .figure--tel .ph img { object-position: var(--tel-kadr, 50% 50%); }
}


.bleed { margin: 0; width: 100%; }
.bleed .ph { height: clamp(320px, 66vh, 760px); }
.bleed .ph img { object-position: var(--kadr, 50% 50%); }   /* kadr ustawiany przy zdjeciu w szablonie: style="--kadr:..." */
.bleed--tall .ph { height: clamp(360px, 78vh, 860px); }
.bleed .caption { margin-top: 14px; }

/* subtelna paralaksa napedzana przewijaniem — tylko tam, gdzie przegladarka to umie */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bleed .ph img, .chapter__media .ph img, .contact__media .ph img { scale: 1.16; animation: para linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes para { from { translate: 0 -7%; } to { translate: 0 7%; } }
    /* pelna szerokosc zdjecia (okladki rozdzialow, kontakt, pasy zdjec z klasa .pelna-szerokosc): zamiast powiekszenia,
       ktore ucina boki, zdjecie dostaje zapas wysokosci - ramka obrazka 117%, przesunieta o 8,5% w gore; przesuniecie
       paralaksy (7% z 117%) miesci sie w zapasie. Kadr w pionie ustawia object-position danego zdjecia. */
    .chapter__media .ph img, .contact__media .ph img, .bleed.pelna-szerokosc .ph img { scale: none; position: absolute; left: 0; top: -8.5%; width: 100%; height: 117%; }
  }
}

/* ==========================================================================
   Uklady
   ========================================================================== */
.split { display: grid; gap: clamp(28px, calc(4vw * var(--s)), calc(64px * var(--s))); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, calc(5vw * var(--s)), calc(96px * var(--s))); }
  .split--wide-first { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
}

.rows { margin: 0; padding: 0; list-style: none; }
.row { display: grid; gap: 6px 26px; grid-template-columns: auto minmax(0, 1fr); padding: clamp(22px, calc(2.8vw * var(--s)), calc(34px * var(--s))) 0; border-top: 1px solid var(--line-paper); }
.rows .row:last-child { border-bottom: 1px solid var(--line-paper); }
.row__num { font: 600 clamp(10px, calc(.85vw * var(--s)), calc(12px * var(--s)))/1.7 var(--font-body); letter-spacing: .1em; color: var(--blue); }
.row__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-stretch: 84%; font-size: clamp(22px, calc(2.3vw * var(--s)), calc(32px * var(--s))); line-height: 1.1; letter-spacing: -.005em; }
.row__desc { grid-column: 2; margin: 0; color: var(--mute-paper); max-width: 52ch; }
@media (min-width: 760px) {
  .row { grid-template-columns: 3.2rem minmax(0, 16rem) minmax(0, 1fr); align-items: baseline; }
  .row__desc { grid-column: 3; }
}

.stack-list { margin: 0; padding: 0; list-style: none; }
.stack-list > li { padding: clamp(18px, calc(2.2vw * var(--s)), calc(26px * var(--s))) 0; border-top: 1px solid var(--line-paper); }
.stack-list > li:last-child { border-bottom: 1px solid var(--line-paper); }
.stack-list h3 { margin: 0 0 6px; font-size: clamp(16px, calc(1.25vw * var(--s)), calc(19px * var(--s))); font-weight: 600; line-height: 1.3; }
.stack-list--big h3 { font-family: var(--font-display); font-weight: 700; font-stretch: 84%; font-size: clamp(22px, calc(2.1vw * var(--s)), calc(30px * var(--s))); letter-spacing: -.005em; }
.stack-list p { margin: 0; color: var(--mute-paper); max-width: 48ch; }

.cols { display: grid; gap: clamp(26px, calc(3.4vw * var(--s)), calc(46px * var(--s))); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cols--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.col { padding-top: 20px; border-top: 1px solid rgba(17, 18, 21, .2); }
.col__label { font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); }
.col h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 700; font-stretch: 86%; font-size: clamp(20px, calc(1.7vw * var(--s)), calc(26px * var(--s))); line-height: 1.15; letter-spacing: -.005em; }
.col p { margin: 0; color: var(--mute-paper); }
/* odstep etykiety od naglowka: musi byc po ".col p", ktore wczesniej zerowalo margines etykiety */
.col .col__label { margin-bottom: clamp(10px, calc(1vw * var(--s)), calc(14px * var(--s))); }

.gallery { display: grid; gap: clamp(10px, calc(1.2vw * var(--s)), calc(18px * var(--s))); grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, calc(4vw * var(--s)), calc(56px * var(--s))); }
.gallery figure { margin: 0; }
.gallery .ph { aspect-ratio: 3 / 2; }
/* telefon i tablet w pionie (tez iPad Pro 12,9" = 1024 px): pierwsze zdjecie na cala szerokosc, dwa kolejne
   pionowo 4:5, wyciete na ludzi - kadr ustawia --kadr-pion przy zdjeciu w szablonie. Poziomo zostaja trzy w rzedzie
   (telefon obrocony poziomo tez - inaczej pierwsze zdjecie byloby wyzsze niz ekran). Zmieniajac warunek, zmienic
   tez atrybut sizes zdjec galerii w src/oferta.html. */
@media (orientation: portrait) and (max-width: 1199.98px), (max-width: 559.98px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery figure:first-child { grid-column: 1 / -1; }
  .gallery figure:not(:first-child) .ph { aspect-ratio: 4 / 5; }
  .gallery .ph img { object-position: var(--kadr-pion, 50% 50%); }
}
/* tablet w poziomie i komputer (ekran co najmniej 600 px wysokosci): trzy pionowe kadry 4:5 wyciete na ludzi
   (--kadr-pion). Trzy cale zdjecia 3:2 zostaja tylko na niskich ekranach - telefon obrocony poziomo, bardzo niskie
   okno. Zmieniajac warunek, zmienic tez sizes zdjec galerii w src/oferta.html. */
@media (orientation: landscape) and (min-height: 600px), (orientation: portrait) and (min-width: 1200px) {
  .gallery .ph { aspect-ratio: 4 / 5; }
  .gallery .ph img { object-position: var(--kadr-pion, 50% 50%); }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em; min-height: 50px; padding: 0 24px;
  border-radius: 999px; border: 1px solid rgba(242, 241, 235, .35); background: transparent; color: var(--paper);
  font: 600 12px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.btn:hover { border-color: var(--paper); transform: translateY(-1px); }
.btn--primary { background: var(--blue); border-color: var(--blue); }
.btn--primary:hover { background: #1f47d3; border-color: #1f47d3; }

/* ==========================================================================
   Otwarcie
   ========================================================================== */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--ink); color: var(--paper); overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media .ph { position: absolute; inset: 0; }
.hero__media .ph img { object-position: 50% 42%; }
@media (max-aspect-ratio: 1/1) { .hero__media .ph img { object-position: 70% 42%; } }   /* telefon: kieliszki po lewej, twarz dziewczyny nie przy samej krawedzi */
.hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 11, 14, .94) 0%, rgba(10, 11, 14, .5) 36%, rgba(10, 11, 14, .18) 62%, rgba(10, 11, 14, .55) 100%); }
@keyframes hero-drift { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero__inner { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; padding: calc(var(--header-h) + clamp(24px, 4vh, 48px)) 0 clamp(26px, 4vh, 44px); }
.hero__kicker { display: flex; justify-content: space-between; gap: 20px; font: 600 clamp(10px, calc(.82vw * var(--s)), calc(12px * var(--s)))/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: rgba(242, 241, 235, .82); }
.hero__kicker i { font-style: normal; color: rgba(242, 241, 235, .45); margin: 0 .35em; }
.hero__title { margin: auto 0 0; padding: clamp(80px, 14vh, 140px) 0 clamp(28px, 4vh, 52px); font-family: var(--font-display); font-weight: 700; font-stretch: 80%; font-size: clamp(60px, calc((7vw + 30px) * var(--s)), calc(150px * var(--s))); line-height: .9; letter-spacing: -.03em; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero__title .line__in { display: block; }
.hero__title .italic { font-size: .78em; line-height: 1.05; padding-top: .06em; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--ink); pointer-events: none; opacity: 0; }
.hero__bar::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: rgba(242, 241, 235, .55); transform: scaleX(0); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero::before { animation: curtain 1.3s ease-out both; }
  @keyframes curtain { from { opacity: 1; } to { opacity: 0; } }
  .js .hero__title .line__in { transform: translateY(112%); animation: rise-in 1.15s var(--ease-out) both; animation-delay: calc(.25s + var(--i) * .14s); }
  @keyframes rise-in { to { transform: none; } }
  .js .hero__bar::before { animation: draw 1.2s var(--ease-out) .7s both; }
  @keyframes draw { to { transform: scaleX(1); } }
  .js .hero__media .ph img { animation: hero-in 2.2s var(--ease-out) both, hero-drift 24s ease-in-out 2.2s infinite alternate; }
  @keyframes hero-in { from { transform: scale(1.12); } to { transform: scale(1); } }
}
.hero__bar { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 30px; padding-top: 22px; border-top: 1px solid rgba(242, 241, 235, .14); }
.hero__bar p { margin: 0; font-size: clamp(13px, calc(.95vw * var(--s)), calc(15px * var(--s))); line-height: 1.6; color: rgba(242, 241, 235, .82); }
.hero__scroll { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.hero__scroll i { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(242, 241, 235, .45); border-radius: 50%; font-style: normal; font-size: 18px; transition: background .25s, border-color .25s; }
.hero__scroll:hover i { background: var(--blue); border-color: var(--blue); }
@media (prefers-reduced-motion: no-preference) { .hero__scroll i { animation: nudge 2.6s ease-in-out infinite; } @keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } } }
.hero__index { font: 600 11px/1 var(--font-body); letter-spacing: .18em; color: rgba(242, 241, 235, .6); }
@media (max-width: 720px) {
  .hero__kicker span:last-child { display: none; }
  .hero__bar { grid-template-columns: 1fr auto; gap: 16px; }
  .hero__index { display: none; }
  .hero__scroll span { position: absolute; left: -9999px; }
}

/* ==========================================================================
   Intro, indeks 01/02/03, pasek przewijany
   ========================================================================== */
.intro__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, calc(4vw * var(--s)), calc(64px * var(--s))); margin-top: clamp(44px, calc(6vw * var(--s)), calc(96px * var(--s))); align-items: start; }
@media (min-width: 900px) { .intro__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, calc(5vw * var(--s)), calc(96px * var(--s))); } }
.intro__side { display: flex; flex-direction: column; gap: clamp(28px, calc(3.4vw * var(--s)), calc(48px * var(--s))); }
.intro__side .eyebrow { margin: 0; }

.index3 { display: grid; border-top: 1px solid var(--line-paper); }
.index3 a { display: grid; grid-template-columns: 2.6rem minmax(0, 8rem) minmax(0, 1fr) auto; align-items: center; gap: 12px 18px; padding: clamp(16px, calc(1.8vw * var(--s)), calc(22px * var(--s))) 0; border-bottom: 1px solid var(--line-paper); text-decoration: none; transition: padding-left .3s var(--ease-out); }
.index3 a:hover { padding-left: 10px; }
.index3 b { font: 600 11px/1 var(--font-body); letter-spacing: .14em; color: var(--blue); }
.index3__t { font-family: var(--font-display); font-weight: 700; font-stretch: 82%; font-size: clamp(24px, calc(2.2vw * var(--s)), calc(32px * var(--s))); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.index3__d { font-size: clamp(13px, calc(.95vw * var(--s)), calc(15px * var(--s))); color: var(--mute-paper); }
.index3 i { font-style: normal; font-size: 22px; color: var(--mute-paper); transition: transform .3s var(--ease-out), color .3s; }
.index3 a:hover i { transform: translate(3px, 3px); color: var(--blue); }
@media (max-width: 560px) { .index3 a { grid-template-columns: 2rem minmax(0, 1fr) auto; } .index3__d { grid-column: 2; } }

.marquee { overflow: hidden; border-top: 1px solid var(--line-paper); border-bottom: 1px solid var(--line-paper); padding: 14px 0; background: var(--paper); }
.marquee__track { display: flex; width: max-content; font: 600 clamp(10px, calc(.82vw * var(--s)), calc(12px * var(--s)))/1 var(--font-body); letter-spacing: .26em; text-transform: uppercase; color: var(--mute-paper); }
/* odstep po ostatniej kropce nalezy do kopii, wiec 100% / liczba kopii to dokladnie jedna kopia - petla bez szwu */
.marquee__kopia { display: flex; align-items: center; gap: 28px; padding-right: 28px; }
.marquee__track i { font-style: normal; color: var(--blue); }
/* pas przesuwa sie o jedna kopie; --kopie ustawia oferta.js (dokleja kopie, zeby pas byl szerszy od ekranu) */
@media (prefers-reduced-motion: no-preference) { .marquee__track { animation: marquee 48s linear infinite; } @keyframes marquee { to { transform: translateX(calc(-100% / var(--kopie, 3))); } } }

/* ==========================================================================
   Przebieg wieczoru — storyboard: pas kadrow przesuwany w rytm przewijania
   ========================================================================== */
.story { position: relative; }
.story__sticky { display: flex; flex-direction: column; gap: clamp(22px, 3.5vh, 44px); padding: var(--section-y) 0; }
.story__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, calc(3vw * var(--s)), calc(48px * var(--s))); align-items: end; }
.story__meta .body-text { max-width: 46ch; }
.story__progress { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.story__count { font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1 var(--font-body); letter-spacing: .2em; color: var(--mute-ink); white-space: nowrap; }
.story__count b { color: var(--paper); font-weight: 600; }
.story__bar { position: relative; flex: 1; height: 1px; background: var(--line-ink); }
.story__bar i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--blue); transition: width .15s linear; }

.story__viewport { width: 100%; }
.story__track { display: flex; gap: clamp(12px, calc(1.4vw * var(--s)), calc(22px * var(--s))); margin: 0; padding: 0 var(--gutter); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.story__track::-webkit-scrollbar { display: none; }
.story__card { position: relative; flex: 0 0 76vw; max-width: 380px; height: min(66vh, 560px); border-radius: 8px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-ink); scroll-snap-align: start; }
.story__card .ph { position: absolute; inset: 0; }
.story__card .ph img { object-position: 50% 30%; }
.story__card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 11, 14, .96) 0%, rgba(10, 11, 14, .62) 34%, rgba(10, 11, 14, 0) 62%); pointer-events: none; }
.story__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: clamp(18px, calc(2vw * var(--s)), calc(26px * var(--s))); }
.story__num { margin: 0 0 8px; font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1 var(--font-body); letter-spacing: .2em; color: var(--blue-soft); }
.story__body h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 700; font-stretch: 82%; font-size: clamp(24px, calc(2.2vw * var(--s)), calc(32px * var(--s))); line-height: 1.02; letter-spacing: -.01em; }
.story__body p { margin: 0; font-size: clamp(13px, calc(.95vw * var(--s)), calc(14.5px * var(--s))); line-height: 1.5; color: rgba(242, 241, 235, .82); }
.story__body .story__num { margin-bottom: clamp(10px, calc(.9vw * var(--s)), calc(14px * var(--s))); }   /* numer nad tytulem karty; ".story__body p" zerowalo ten odstep */
.story__card--text { background: var(--blue); border-color: var(--blue); }
.story__card--text::after { display: none; }
.story__card--text .story__body { top: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.story__card--text .story__num { color: rgba(242, 241, 235, .8); }
.story__card--text .story__body p { color: rgba(242, 241, 235, .92); }
.story__card--text .story__fine { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: rgba(242, 241, 235, .7); }
.story__card--text .btn { margin-top: 18px; align-self: flex-start; border-color: rgba(242, 241, 235, .6); }
.story__card--text .btn:hover { background: var(--paper); color: var(--blue); border-color: var(--paper); }

/* na duzym ekranie sekcja jest wysoka, a jej wnetrze przyklejone: przewijanie w dol przesuwa pas w bok (1:1) */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .js .story__sticky { position: sticky; top: 0; height: 100vh; box-sizing: border-box; justify-content: center; padding: calc(var(--header-h) + 2vh) 0 3vh; overflow: hidden; }
  .js .story__track { overflow: visible; scroll-snap-type: none; padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); will-change: transform; }
  .js .story__card { flex-basis: clamp(250px, calc(22vw * var(--s)), calc(360px * var(--s))); height: min(60vh, 600px); scroll-snap-align: none; }
}
@media (min-width: 900px) {
  .story__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .story__card { flex-basis: clamp(250px, calc(22vw * var(--s)), calc(360px * var(--s))); }
}

/* ==========================================================================
   Rozdzialy: ogromne slowo nachodzace na zdjecie
   ========================================================================== */
.chapter { padding: 0; background: var(--ink); color: var(--paper); }
.chapter__head { position: relative; z-index: 2; padding-top: clamp(64px, calc(9vw * var(--s)), calc(130px * var(--s))); }
.chapter__tags { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line-ink); font: 600 clamp(9.5px, calc(.78vw * var(--s)), calc(11.5px * var(--s)))/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--mute-ink); }
.chapter__tags .is-blue { color: var(--blue-soft); }
/* wewnetrzny margines, zeby wyciecie (clip-path) nie obcinalo liter; ujemne marginesy go kompensuja */
.chapter__head .giant { padding: .08em 0 .3em; margin-top: calc(clamp(18px, calc(2.4vw * var(--s)), calc(36px * var(--s))) - .08em); margin-bottom: -.5em; pointer-events: none; }
.chapter__media { position: relative; z-index: 1; }
.chapter__media .ph { height: clamp(360px, 72vh, 820px); }
#foto .chapter__media .ph img { object-position: 62% 28%; }   /* komputer: twarze w pionie (pelna szerokosc, poziom bez znaczenia); telefon: para na srodku, bez pustego tla z prawej */
#video .chapter__media .ph img { object-position: 50% 17%; }   /* glowy tancerzy ponizej nachodzacego napisu VIDEO */
#live .chapter__media .ph img { object-position: 48% 24%; }   /* twarze tanczacych ponizej napisu LIVE; na telefonie w srodku dziewczyna w niebieskiej sukni */
.chapter__foot { padding: clamp(30px, calc(4.5vw * var(--s)), calc(64px * var(--s))) 0 clamp(64px, calc(9vw * var(--s)), calc(130px * var(--s))); }
.chapter__foot .split { align-items: end; }
.chapter__foot .lead { color: var(--mute-ink); }

.foto-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, calc(4vw * var(--s)), calc(56px * var(--s))) clamp(24px, calc(3vw * var(--s)), calc(48px * var(--s))); margin-top: clamp(36px, calc(5vw * var(--s)), calc(72px * var(--s))); align-items: start; }
/* komputer: portret po prawej zajmuje oba wiersze, wiec lista po lewej stoi zaraz pod zdjeciem grupowym,
   a nie dopiero pod wysokim portretem */
@media (min-width: 900px) { .foto-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .foto-grid > :nth-child(2) { grid-row: span 2; } }

/* ==========================================================================
   LIVE — cztery kamery (w tym dron), jeden program, niezalezne lacze
   ========================================================================== */
.livebox { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, calc(2.4vw * var(--s)), calc(30px * var(--s))); padding: clamp(18px, calc(2.6vw * var(--s)), calc(36px * var(--s))); border: 1px solid var(--line-ink); border-radius: 8px; background: var(--ink-2); }
/* tablet: cztery kamery w rzedzie nad programem; telefon: dwie na dwie (w rzedzie bylyby za male) */
.livebox__cams { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 559px) { .livebox__cams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cam { position: relative; margin: 0; border-radius: 5px; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; container: cam / inline-size; }
.cam .ph { aspect-ratio: 16 / 9; }
.cam .ph img, .program__frame .ph img { object-position: 50% 30%; }   /* program pokazuje ten sam kadr co wybrana kamera */
.cam figcaption { position: absolute; left: 10px; bottom: 10px; padding: 6px 9px; border-radius: 3px; background: rgba(10, 11, 14, .72); font: 500 10.5px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); }
.cam figcaption b { color: var(--blue-soft); margin-right: 6px; }
/* waska miniatura (telefon, tablet, male okno): pelny podpis zajmowalby prawie cala szerokosc - zostaje "KAM 1",
   opis slyszy tylko czytnik ekranu */
@container cam (width < 200px) {
  .cam figcaption { left: 6px; bottom: 6px; padding: 5px 7px; }
  .cam figcaption b { margin-right: 0; }
  .cam figcaption span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* kolumna kamer na laptopie (miniatury 200-260 px): pelny podpis, troche mniejszy */
@container cam (200px <= width < 260px) {
  .cam figcaption { left: 8px; bottom: 8px; padding: 5px 8px; font-size: 9.5px; letter-spacing: .08em; }
  .cam figcaption b { margin-right: 5px; }
}
.livebox__flow { display: none; }
/* przewody od kamer do programu: luki rysuje oferta.js (ksztalt zalezy od ukladu), kropki plyna po nich (SMIL) */
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; visibility: hidden; }
.wires.is-ready { visibility: visible; }
.wire { color: rgba(242, 241, 235, .28); }
.wire path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; }
.wire circle { fill: currentColor; }
@media (prefers-reduced-motion: reduce) { .wire circle { display: none; } .wire { color: rgba(242, 241, 235, .4); } }
.program { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.program__frame { position: absolute; inset: 0; opacity: 0; }
.program__frame[style*="--i:0"] { opacity: 1; }
.program__frame .ph { position: absolute; inset: 0; }
.program__live { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(10, 11, 14, .72); font: 600 10.5px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--paper); }
.program__live i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255, 59, 59, .6); }
.program__lock { position: absolute; top: 14px; right: 14px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(242, 241, 235, .35); background: rgba(10, 11, 14, .55); font: 600 10.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); }
.program__lock::before { content: '🔒 '; }
@media (prefers-reduced-motion: no-preference) {
  /* cykl 12 s: kazda z czterech kamer 3 s na antenie */
  .cam { animation: cam-on 12s steps(1, end) infinite; animation-delay: calc(var(--i) * 3s); }
  @keyframes cam-on { 0% { outline-color: var(--blue-soft); } 25.01% { outline-color: transparent; } }
  .program__frame { animation: frame-on 12s ease-in-out infinite; animation-delay: calc(var(--i) * 3s); }
  .program__frame[style*="--i:0"] { animation-name: frame-on-first; }
  @keyframes frame-on { 0% { opacity: 0; } 3% { opacity: 1; } 24.75% { opacity: 1; } 27.75% { opacity: 0; } 100% { opacity: 0; } }
  @keyframes frame-on-first { 0% { opacity: 1; } 24.75% { opacity: 1; } 27.75% { opacity: 0; } 97% { opacity: 0; } 100% { opacity: 1; } }
  .program__live i { animation: pulse 1.6s ease-out infinite; }
  @keyframes pulse { to { box-shadow: 0 0 0 9px rgba(255, 59, 59, 0); } }
}
.bond { display: grid; gap: 10px; margin-top: 14px; }
.bond__in { display: flex; gap: 8px; }
.bond__in span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-ink); border-radius: 999px; font: 600 10.5px/1 var(--font-body); letter-spacing: .14em; color: var(--mute-ink); }
.bond__in span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-soft); }
@media (prefers-reduced-motion: no-preference) {
  .bond__in span::before { animation: blink 2.4s ease-in-out infinite; }
  .bond__in span:nth-child(2)::before { animation-delay: .8s; }
  .bond__in span:nth-child(3)::before { animation-delay: 1.6s; }
  @keyframes blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
}
.bond__out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 12px 16px; border-radius: 4px; background: var(--blue); color: var(--paper); font-size: 13px; }
.bond__out b { font: 600 10.5px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.bond__out::before { content: '⇒'; font-size: 14px; }
@media (max-width: 559px) { .program .program__lock { top: auto; bottom: 14px; right: 14px; } }
@media (min-width: 900px) {
  /* cztery kamery jedna pod druga, razem dokladnie tak wysokie jak program z laczami pod nim:
     kolumna kamer nie wnosi wlasnej wysokosci (contain: size), tylko rozciaga sie do wysokosci programu;
     proporcja kolumn 2,2 : 7,8 trzyma miniatury blisko 16:9 na kazdej szerokosci */
  .livebox { grid-template-columns: minmax(0, 2.2fr) 56px minmax(0, 7.8fr); align-items: stretch; }
  .livebox__cams { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(4, minmax(0, 1fr)); contain: size; }
  .cam .ph { aspect-ratio: auto; height: 100%; }
  .livebox__flow { display: block; }
  @media (prefers-reduced-motion: no-preference) {
    /* przewod kamery, ktora jest na antenie, swieci w tym samym rytmie co jej ramka i klatka programu */
    .wire { animation: wire-on 12s steps(1, end) infinite; animation-delay: calc(var(--i) * 3s); }
    @keyframes wire-on { 0% { color: var(--blue-soft); } 25.01% { color: rgba(242, 241, 235, .28); } }
  }
}

/* ==========================================================================
   Jeden zespol, proces
   ========================================================================== */
.team { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, calc(5vw * var(--s)), calc(72px * var(--s))); align-items: center; }
@media (min-width: 900px) { .team { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); } }
.team .eyebrow { color: rgba(242, 241, 235, .95); }
.on-blue .hero__kicker { color: rgba(242, 241, 235, .95); }
.on-blue .hero__kicker i { color: rgba(242, 241, 235, .7); }
.team .row__title { font-size: clamp(24px, calc(2.4vw * var(--s)), calc(34px * var(--s))); }
@media (min-width: 760px) { .team .row { grid-template-columns: 2.6rem minmax(0, 1fr); } .team .row__desc { grid-column: 2; max-width: 40ch; } }

.steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.steps > li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 4px 16px; padding: clamp(20px, calc(2.4vw * var(--s)), calc(28px * var(--s))) 0; border-top: 1px solid var(--line-paper); }
.steps > li:last-child { border-bottom: 1px solid var(--line-paper); }
.steps b { font-family: var(--font-display); font-weight: 700; font-stretch: 80%; font-size: clamp(22px, calc(2.2vw * var(--s)), calc(30px * var(--s))); line-height: 1; color: var(--blue); }
.steps h3 { margin: 0; font-size: clamp(17px, calc(1.35vw * var(--s)), calc(20px * var(--s))); font-weight: 600; line-height: 1.3; }
.steps p { grid-column: 2; margin: 0; color: var(--mute-paper); font-size: clamp(13.5px, calc(.95vw * var(--s)), calc(15px * var(--s))); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(20px, calc(2.6vw * var(--s)), calc(40px * var(--s))); }
  .steps > li { display: block; padding: 22px 0 0; border-bottom: 0 !important; }
  .steps b { display: block; margin-bottom: clamp(14px, calc(1.4vw * var(--s)), calc(20px * var(--s))); }
  .steps h3 { margin-bottom: 10px; }
}

/* ==========================================================================
   Warianty: wybor + podsumowanie
   ========================================================================== */
.packs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 760px) {
  .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  /* trzy karty w rzedzie dziela wspolne wiersze (subgrid): numer, podpis, tytul, opis i "Zespol" wypadaja w kazdej
     karcie na tej samej wysokosci, takze gdy opisy lamia sie roznie (waskie karty na tablecie) */
  @supports (grid-template-rows: subgrid) {
    .packs { grid-template-rows: repeat(5, auto); row-gap: 6px; }
    .packs > .pack { grid-row: span 5; grid-template-rows: subgrid; }   /* mocniejszy selektor niz ".pack" z wierszami nizej */
  }
}
.pack { position: relative; display: grid; gap: 6px; padding: clamp(20px, calc(2.4vw * var(--s)), calc(32px * var(--s))); padding-right: 56px; border: 1px solid var(--line-ink); border-radius: 8px; cursor: pointer; transition: border-color .25s, background .25s, transform .3s var(--ease-out); }
.pack:hover { border-color: rgba(242, 241, 235, .5); transform: translateY(-2px); }
.pack input { position: absolute; inset: 0; opacity: 0; pointer-events: none; margin: 0; }
.pack__num { font-family: var(--font-display); font-weight: 700; font-stretch: 80%; font-size: clamp(28px, calc(2.8vw * var(--s)), calc(40px * var(--s))); line-height: 1; color: var(--mute-ink); opacity: .6; }
.pack__label { margin-top: 6px; font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--blue-soft); }
.pack__title { margin-top: clamp(5px, calc(.6vw * var(--s)), calc(8px * var(--s))); font-family: var(--font-display); font-weight: 700; font-stretch: 80%; font-size: clamp(24px, calc(2.4vw * var(--s)), calc(34px * var(--s))); line-height: 1.05; letter-spacing: .01em; }
.pack__desc { color: var(--mute-ink); font-size: clamp(13.5px, calc(.95vw * var(--s)), calc(15px * var(--s))); line-height: 1.55; }
.pack { grid-template-rows: auto auto auto 1fr auto; }
.pack__team { display: grid; gap: 4px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-ink); font-size: clamp(13.5px, calc(.95vw * var(--s)), calc(15px * var(--s))); line-height: 1.45; font-weight: 500; }
.pack__team b { font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--blue-soft); }
.pack__check { position: absolute; top: clamp(20px, calc(2.4vw * var(--s)), calc(32px * var(--s))); right: clamp(18px, calc(2vw * var(--s)), calc(26px * var(--s))); width: 24px; height: 24px; border: 1px solid rgba(242, 241, 235, .4); border-radius: 50%; transition: background .25s, border-color .25s; }
.pack__check::after { content: ''; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .25s var(--ease-out); }
.pack.is-on, .pack:has(input:checked) { border-color: var(--paper); background: rgba(242, 241, 235, .05); }
.pack.is-on .pack__check, .pack:has(input:checked) .pack__check { background: var(--blue); border-color: var(--blue); }
.pack.is-on .pack__check::after, .pack:has(input:checked) .pack__check::after { transform: rotate(45deg) scale(1); }
.pack:has(input:focus-visible) { outline: 2px solid var(--blue-soft); outline-offset: 4px; }

.packsum { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, calc(3vw * var(--s)), calc(44px * var(--s))); margin-top: 14px; padding: clamp(22px, calc(3vw * var(--s)), calc(40px * var(--s))); border: 1px solid var(--line-ink); border-radius: 8px; background: var(--ink-2); }
@media (min-width: 900px) { .packsum { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.packsum__title { margin: clamp(16px, calc(1.6vw * var(--s)), calc(22px * var(--s))) 0 0; font-family: var(--font-display); font-weight: 700; font-stretch: 80%; font-size: clamp(30px, calc(3.6vw * var(--s)), calc(54px * var(--s))); line-height: .98; letter-spacing: -.01em; }
.packsum__list { margin: 0; padding: 0; list-style: none; columns: 1; }
@media (min-width: 640px) { .packsum__list { columns: 2; column-gap: clamp(20px, calc(3vw * var(--s)), calc(44px * var(--s))); } }
.packsum__list li { position: relative; break-inside: avoid; padding: 9px 0 9px 28px; font-size: clamp(13.5px, calc(.98vw * var(--s)), calc(15.5px * var(--s))); line-height: 1.45; transition: opacity .3s, color .3s; }
.packsum__list li::before { content: ''; position: absolute; left: 0; top: 13px; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); }
.packsum__list li::after { content: ''; position: absolute; left: 5.5px; top: 15.5px; width: 4px; height: 8px; border: solid var(--paper); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.packsum__list li:not(.is-in) { opacity: .42; }
.packsum__list li:not(.is-in)::before { background: transparent; border: 1px solid rgba(242, 241, 235, .5); }
.packsum__list li:not(.is-in)::after { display: none; }
.packsum__list li small { display: inline; margin-left: 4px; white-space: nowrap; font: 600 9.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-soft); }
/* punkt w wariancie: bez dopisku. Lista zmienia przez to wysokosc - formularz pod nia trzyma w miejscu applyPack (oferta.js) */
.packsum__list li.is-in small { display: none; }
.packsum__foot { grid-column: 1 / -1; display: grid; gap: 18px; padding-top: clamp(18px, calc(2.4vw * var(--s)), calc(28px * var(--s))); border-top: 1px solid var(--line-ink); }
@media (min-width: 760px) { .packsum__foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 28px; } }

/* rozwijana lista opcji dodatkowych */
.acc details { border-top: 1px solid var(--line-ink); }
.acc details:last-child { border-bottom: 1px solid var(--line-ink); }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: clamp(16px, calc(1.8vw * var(--s)), calc(22px * var(--s))) 0; list-style: none; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-stretch: 84%; font-size: clamp(20px, calc(1.8vw * var(--s)), calc(26px * var(--s))); line-height: 1.15; letter-spacing: -.005em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { position: relative; flex: none; width: 28px; height: 28px; border: 1px solid rgba(242, 241, 235, .4); border-radius: 50%; transition: transform .3s var(--ease-out), background .25s, border-color .25s; }
.acc summary i::before, .acc summary i::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--paper); transform: translate(-50%, -50%); }
.acc summary i::before { width: 10px; height: 1.5px; }
.acc summary i::after { width: 1.5px; height: 10px; }
.acc details[open] summary i { transform: rotate(45deg); background: var(--blue); border-color: var(--blue); }
.acc details.is-zamykane summary i { transform: none; background: none; border-color: rgba(242, 241, 235, .4); }   /* w trakcie zwijania (oferta.js) */
.acc details p { margin: 0; padding: 0 44px 20px 0; color: var(--mute-ink); max-width: 52ch; }
#pytania .acc details p { max-width: 72ch; }   /* FAQ: dluzsze odpowiedzi w szerokiej kolumnie; opcje dodatkowe zostaja przy 52ch */

/* ==========================================================================
   Kontakt i formularz
   ========================================================================== */
.contact { position: relative; }
.contact__media .ph { height: clamp(300px, 56vh, 620px); }
.contact__media .ph img { object-position: 46% 14%; }   /* komputer: cale glowy z zapasem; telefon: czworka dziewczyn na srodku waskiego kadru */
.contact__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17, 18, 21, .15) 0%, rgba(17, 18, 21, .55) 62%, var(--ink) 100%); pointer-events: none; }
.contact__media { position: relative; }
.contact__body { position: relative; padding: clamp(36px, calc(5vw * var(--s)), calc(72px * var(--s))) 0 clamp(64px, calc(9vw * var(--s)), calc(130px * var(--s))); }
@media (min-width: 900px) { .contact__body .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1300px) { .contact__body .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.contact__list { margin: clamp(30px, calc(4vw * var(--s)), calc(54px * var(--s))) 0 0; padding: 0; list-style: none; }
.contact__list > li { display: grid; gap: 4px 28px; grid-template-columns: minmax(0, 1fr); align-items: baseline; padding: clamp(14px, calc(1.8vw * var(--s)), calc(20px * var(--s))) 0; border-top: 1px solid var(--line-ink); }
.contact__list > li:last-child { border-bottom: 1px solid var(--line-ink); }
@media (min-width: 620px) { .contact__list > li { grid-template-columns: 7.5rem minmax(0, 1fr); } }
.contact__key { font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1.6 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--mute-ink); }
.contact__val { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; font-family: var(--font-display); font-weight: 600; font-stretch: 88%; font-size: clamp(20px, calc(2.1vw * var(--s)), calc(30px * var(--s))); line-height: 1.2; text-decoration: none; color: var(--paper); transition: color .2s; word-break: break-word; }
.contact__val:hover { color: var(--blue-soft); }

/* formularz zapytania */
.ask { container-type: inline-size; container-name: ask; padding: clamp(18px, 6cqw, 40px); border: 1px solid var(--line-ink); border-radius: 8px; background: rgba(23, 24, 28, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ask__form { display: grid; gap: 18px; }
.ask__form[hidden] { display: none; }
.ask__title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 700; font-stretch: 82%; font-size: clamp(24px, calc(2.2vw * var(--s)), calc(32px * var(--s))); line-height: 1; letter-spacing: -.01em; }
.ask__sub { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 -2px; padding-top: 20px; border-top: 1px solid var(--line-ink); font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1.4 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--paper); }
.ask__sub b { font-weight: 600; color: var(--blue-soft); }
.ask__title + .ask__sub { margin-top: 0; padding-top: 0; border-top: 0; }

.field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field--half { grid-template-columns: minmax(0, 1fr); gap: 18px; }
/* miejsce, podpis, data: w jednej kolumnie podpis stoi zaraz pod miejscem, a w dwoch
   kolumnach schodzi do drugiego wiersza, pod oba pola (data trafia wtedy obok miejsca) */
@container ask (min-width: 380px) { .field--half { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--half > .hint { grid-row: 2; } }
.field--half > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; align-content: start; }   /* kolumna nie rosnie za polem daty (iOS ma dla niego wlasna minimalna szerokosc) */
.field--half > .hint { grid-column: 1 / -1; margin-top: -8px; }
/* etykiety pol maja wlasna klase — reguly ogolne typu ".field label" lapaly tez przyciski wariantow */
.lbl { display: block; margin: 0; padding: 0; font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1.4 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--mute-ink); }
.req { color: var(--blue-soft); }
.field input:not([type="radio"]), .field textarea { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border: 1px solid rgba(242, 241, 235, .22); border-radius: 5px; background: rgba(242, 241, 235, .04); color: var(--paper); font: inherit; font-size: 15px; line-height: 1.4; transition: border-color .2s, background .2s; }
.field input::placeholder, .field textarea::placeholder { color: rgba(242, 241, 235, .38); }
.field input:not([type="radio"]):focus, .field textarea:focus { outline: 0; border-color: var(--blue-soft); background: rgba(242, 241, 235, .07); }
.field textarea { resize: vertical; min-height: 104px; }
.field input[type="date"] { color-scheme: dark; }
/* Safari na iPhonie rysuje pole daty po swojemu: szersze niz kolumna, wyzsze od innych pol i z data na srodku.
   Tylko tam (warunek lapie wylacznie iOS) zwykly wyglad pola - Chrome i Android zachowuja ikone kalendarza. */
@supports (-webkit-touch-callout: none) {
  .field input[type="date"] { -webkit-appearance: none; appearance: none; display: block; height: 48px; }
  .field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}
.field [aria-invalid="true"] { border-color: #ff9b9b !important; }
.hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: #9a9ca4; }
.err { margin: 0; font-size: 12.5px; line-height: 1.4; color: #ffb3b3; }

/* wybor wariantu: przelacznik z trzech pol */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; padding: 4px; border: 1px solid rgba(242, 241, 235, .22); border-radius: 10px; background: rgba(242, 241, 235, .03); }
.seg label { position: relative; display: grid; align-content: center; justify-items: center; gap: 6px; min-height: 66px; padding: 10px 8px; border-radius: 7px; text-align: center; cursor: pointer; transition: background .2s; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg b { font: 600 10.5px/1 var(--font-body); letter-spacing: .16em; color: var(--blue-soft); transition: color .2s; }
.seg span { font-family: var(--font-display); font-weight: 700; font-stretch: 84%; font-size: clamp(14px, calc(1.1vw * var(--s)), calc(16px * var(--s))); line-height: 1.15; letter-spacing: .01em; color: var(--paper); transition: color .2s; }
.seg label:hover { background: rgba(242, 241, 235, .07); }
.seg label.is-on, .seg label:has(input:checked) { background: var(--paper); }
.seg label.is-on b, .seg label:has(input:checked) b { color: var(--blue); }
.seg label.is-on span, .seg label:has(input:checked) span { color: var(--ink); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--blue-soft); outline-offset: 2px; }
@container ask (max-width: 360px) {
  .seg { grid-template-columns: minmax(0, 1fr); }
  .seg label { grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; text-align: left; }   /* numer wariantu na srodku wysokosci nazwy */
}

/* pulapka na boty — niewidoczna dla ludzi i czytnikow ekranu */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ask__alert { margin: 0; padding: 12px 14px; border: 1px solid rgba(255, 155, 155, .45); border-radius: 6px; background: rgba(255, 155, 155, .08); color: #ffc9c9; font-size: 13.5px; line-height: 1.5; }
.ask__alert[hidden] { display: none; }
.ask__actions { display: flex; margin-top: 4px; }
.ask__actions .btn { flex: 1 1 100%; }
.btn[disabled] { opacity: .65; cursor: progress; transform: none; }
.ask__note { margin: 0; font-size: 12.5px; line-height: 1.55; color: #9a9ca4; }
.ask__note a, .rodo a { color: var(--blue-soft); text-underline-offset: 2px; white-space: nowrap; }
.nw { white-space: nowrap; }

/* informacja RODO pod formularzem (widoczna takze po wyslaniu) */
.rodo { margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--line-ink); }
.rodo summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px; list-style: none; cursor: pointer; font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mute-ink); text-wrap: balance; transition: color .2s; }
.rodo summary::-webkit-details-marker { display: none; }
.rodo summary:hover { color: var(--paper); }
.rodo summary i { position: relative; flex: none; width: 24px; height: 24px; border: 1px solid rgba(242, 241, 235, .35); border-radius: 50%; transition: transform .3s var(--ease-out), background .25s, border-color .25s; }
.rodo summary i::before, .rodo summary i::after { content: ''; position: absolute; left: 50%; top: 50%; background: var(--paper); transform: translate(-50%, -50%); }
.rodo summary i::before { width: 9px; height: 1.5px; }
.rodo summary i::after { width: 1.5px; height: 9px; }
.rodo[open] summary i { transform: rotate(45deg); background: var(--blue); border-color: var(--blue); }
.rodo.is-zamykane summary i { transform: none; background: none; border-color: rgba(242, 241, 235, .35); }   /* w trakcie zwijania (oferta.js) */
.rodo ol { display: grid; gap: 10px; margin: 6px 0 0; padding: 0 0 4px 18px; font-size: 12.5px; line-height: 1.6; color: #a9abb2; }   /* dolny odstep jako padding: margines wychodzilby poza klauzule i animacja wysokosci konczylaby sie o 4 px za wysoko */
.rodo li::marker { color: var(--blue-soft); font-weight: 600; }
.rodo b { color: var(--paper); font-weight: 600; }

/* po wyslaniu */
.ask__done { display: grid; justify-items: start; gap: 14px; }
.ask__done[hidden] { display: none; }
.ask__done:focus { outline: 0; }
.ask__done p { margin: 0; color: var(--mute-ink); max-width: 44ch; }
.ask__done .ask__title { margin: 4px 0 0; color: var(--paper); }
.ask__done b { color: var(--paper); font-weight: 600; word-break: break-word; }
.ask__check { position: relative; width: 52px; height: 52px; border-radius: 50%; background: var(--blue); }
.ask__check::after { content: ''; position: absolute; left: 19px; top: 13px; width: 11px; height: 21px; border: solid var(--paper); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
/* zamiana formularza z podziekowaniem (oferta.js): na czas animacji oba panele w jednej komorce siatki */
.ask.is-zmiana { display: grid; grid-template-columns: minmax(0, 1fr); }
.ask.is-zmiana > .ask__form, .ask.is-zmiana > .ask__done { grid-area: 1 / 1; align-self: start; }
.ask.is-zmiana > .rodo { grid-area: 2 / 1; }

@media (max-width: 559px) { .site-foot__top > span { display: none; } }

/* ==========================================================================
   Stopka
   ========================================================================== */
.site-foot { padding: clamp(28px, calc(4vw * var(--s)), calc(48px * var(--s))) 0 clamp(26px, calc(3vw * var(--s)), calc(40px * var(--s))); border-top: 1px solid var(--line-ink); }
.site-foot__top, .site-foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; font: 600 clamp(10px, calc(.8vw * var(--s)), calc(11.5px * var(--s)))/1.6 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--mute-ink); }
.site-foot__top { align-items: center; }
.site-foot__top a { text-decoration: none; padding: 14px 0; transition: color .2s; }
.site-foot__top a:hover { color: var(--paper); }
.site-foot__mark { display: block; width: min(100%, 520px); padding: 12px 0; margin: clamp(30px, calc(4.5vw * var(--s)), calc(60px * var(--s))) 0 clamp(22px, calc(3.4vw * var(--s)), calc(44px * var(--s))); }
.site-foot__mark span { display: block; aspect-ratio: 1522 / 138; background: linear-gradient(178deg, #f6f5f8 3%, #d3d2d8 55%, #b4b2bb 100%); mask: url('assets/nightshift.png') center / 113.14% auto no-repeat; -webkit-mask: url('assets/nightshift.png') center / 113.14% auto no-repeat; }
.site-foot__bottom { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: clamp(12px, calc(.9vw * var(--s)), calc(13.5px * var(--s))); color: #8d8f97; }
.site-foot__bottom p { margin: 0; }
.site-foot__bottom a { display: inline-block; padding: 12px 0; margin: -12px 0; text-decoration: none; transition: color .2s; }
.site-foot__bottom a:hover { color: var(--paper); }

/* ==========================================================================
   Wejscia przy przewijaniu, przejscie miedzy stronami, ruch ograniczony, druk
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
/* obserwowana jest nieprzycieta otoczka; przyciete slowo w srodku — element z clip-path
   nie zglasza przeciecia z ekranem, wiec sam nigdy by sie nie odslonil */
.reveal--wipe { opacity: 1; transform: none; transition: none; }
.reveal--wipe .giant { clip-path: inset(0 0 100% 0); transform: translateY(.18em); transition: clip-path 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.reveal--wipe.is-in .giant { clip-path: inset(0); transform: none; }

@view-transition { navigation: auto; }
.topbar__mark span { view-transition-name: wordmark; }
::view-transition-group(wordmark) { animation-duration: .75s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .5s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .reveal--wipe .giant { clip-path: none; transform: none; }
  .hero__title .line__in { transform: none; }
  .hero::before { display: none; }
  .hero__bar::before { transform: none; }
  .ph img { transition: none; }
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
}

@media print {
  .topbar, .progress, .hero__bar, .marquee, .site-foot__top, .ask, .menu, .livebox__flow, .pack__check, .story__progress { display: none !important; }
  .story__sticky { position: static !important; height: auto !important; }
  .story__track { flex-wrap: wrap; transform: none !important; }
  .reveal--wipe .giant { clip-path: none !important; }
  .hero__title .line__in { transform: none !important; }
  html, body, main { background: #fff; }
  body { color: #000; font-size: 11pt; }
  .on-ink, .on-blue, .chapter, .contact, .hero, .livebox, .packsum, .ask { background: #fff !important; color: #000 !important; }
  .on-ink .body-text, .on-ink .row__desc, .on-ink .col p, .on-blue .row__desc, .on-ink .stack-list p, .pack__desc { color: #333 !important; }
  .section { padding: 18pt 0; break-inside: avoid; }
  .bleed .ph, .chapter__media .ph, .hero__media .ph, .contact__media .ph { height: 170pt; }
  .reveal, .js .ph img { opacity: 1 !important; transform: none !important; }
  .packsum__list li:not(.is-in) { display: none; }
}