/* ============================================================ fonty (self-hosted) */
@font-face{ font-family:"Fraunces"; src:url(../fonts/fraunces-latin-full-normal.woff2) format("woff2"); font-weight:100 900; 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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Fraunces"; src:url(../fonts/fraunces-latin-ext-full-normal.woff2) format("woff2"); font-weight:100 900; font-display:swap; unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"Inter Tight"; src:url(../fonts/inter-tight-latin-wght-normal.woff2) format("woff2"); font-weight:100 900; 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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Inter Tight"; src:url(../fonts/inter-tight-latin-ext-wght-normal.woff2) format("woff2"); font-weight:100 900; font-display:swap; unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,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:"JetBrains Mono"; src:url(../fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight:400; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F,U+20AC; }
@font-face{ font-family:"JetBrains Mono"; src:url(../fonts/jetbrains-mono-latin-ext-400-normal.woff2) format("woff2"); font-weight:400; font-display:swap; unicode-range:U+0100-02AF,U+1E00-1EFF; }
@font-face{ font-family:"JetBrains Mono"; src:url(../fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight:500; font-display:swap; unicode-range:U+0000-00FF,U+2000-206F,U+20AC; }
@font-face{ font-family:"JetBrains Mono"; src:url(../fonts/jetbrains-mono-latin-ext-500-normal.woff2) format("woff2"); font-weight:500; font-display:swap; unicode-range:U+0100-02AF,U+1E00-1EFF; }

/* ============================================================ tokeny */
:root{
  --paper: oklch(0.972 0.006 85);
  --paper-sunk: oklch(0.948 0.008 82);
  --ink: oklch(0.19 0.008 60);
  --ink-muted: oklch(0.19 0.008 60 / .64);
  --ink-faint: oklch(0.19 0.008 60 / .48);
  --rule: oklch(0.19 0.008 60 / .1);
  --night: oklch(0.18 0.014 40);
  --on-night: oklch(0.955 0.01 80);
  --on-night-muted: oklch(0.955 0.01 80 / .66);
  --on-night-faint: oklch(0.955 0.01 80 / .46);
  --rule-night: oklch(0.955 0.01 80 / .14);

  --serif: "Fraunces", ui-serif, Georgia, serif;
  --sans: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-display: clamp(2.6rem, 1.3rem + 5.2vw, 6.4rem);
  --fs-h2: clamp(2.1rem, 1.2rem + 3.4vw, 4.6rem);
  --fs-h3: clamp(1.35rem, 1.05rem + .9vw, 1.85rem);
  --fs-body: clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-label: 10.5px;

  --gut: clamp(16px, 4vw, 56px);
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-inout: cubic-bezier(.76,0,.24,1);
  --d-fast: .22s; --d-base: .62s; --d-slow: 1s;
  --shadow: 0 1px 2px oklch(0.3 0.03 60 / .06), 0 8px 24px oklch(0.3 0.03 60 / .08), 0 32px 64px oklch(0.3 0.03 60 / .1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:var(--fs-body); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:2px solid currentColor; outline-offset:3px; border-radius:2px; }

/* ============================================================ tekstura */
.grain{ position:fixed; inset:-50%; width:200%; height:200%; pointer-events:none; z-index:60; opacity:.05; mix-blend-mode:multiply; }

/* ============================================================ typografia */
.label{ display:block; font-family:var(--mono); font-size:var(--fs-label); letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--ink-faint); }
.night .label{ color:var(--on-night-faint); }
.h2{ margin:0; font-family:var(--serif); font-weight:370; font-variation-settings:"opsz" 72; font-size:var(--fs-h2); line-height:1.02; letter-spacing:-.032em; }
.h2 .l{ display:block; }
.body{ max-width:58ch; color:var(--ink-muted); margin:0; }
.night .body{ color:var(--on-night-muted); }
.center{ text-align:center; margin-inline:auto; }
.tab{ font-variant-numeric:tabular-nums; }

/* blur-in */
.r{ opacity:0; filter:blur(10px); transform:translateY(18px); transition:opacity var(--d-slow) var(--e-out), filter var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); transition-delay:calc(var(--i,0) * 70ms); }
.r.in{ opacity:1; filter:blur(0); transform:none; }

/* ============================================================ nawigacja */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px var(--gut); color:var(--on-night); transition:background-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out);
  border-bottom:1px solid transparent; }
.nav.on-sketch{ color:var(--ink); }
.nav.solid{ background:oklch(0.972 0.006 85 / .78); -webkit-backdrop-filter:blur(24px) saturate(180%); backdrop-filter:blur(24px) saturate(180%); color:var(--ink); border-color:var(--rule); }
.mark{ font-family:var(--serif); font-size:1.18rem; letter-spacing:-.02em; text-decoration:none; display:flex; align-items:center; gap:.4em; font-variation-settings:"opsz" 36; }
.mark svg{ width:auto; height:22px; display:block; }
.mark .mk{ display:block; height:22px; aspect-ratio:637.3 / 100; background:currentColor; -webkit-mask:url(../img/logo.svg) no-repeat center / contain; mask:url(../img/logo.svg) no-repeat center / contain; }
footer .mark .mk{ height:18px; }
.nav-r{ display:flex; align-items:center; gap:clamp(12px,2vw,26px); }
.nav-r > a:not(.pill){ font-size:.9rem; text-decoration:none; opacity:.8; }
.nav-r > a:not(.pill):hover{ opacity:1; }
.pill{ font-size:.86rem; text-decoration:none; padding:9px 16px; border-radius:999px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); white-space:nowrap;
  transition:background-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out); }
.nav:not(.solid):not(.on-sketch) .pill{ background:var(--on-night); color:var(--ink); border-color:var(--on-night); }
.pill:hover{ background:transparent; color:inherit; }
.langs{ display:flex; gap:2px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; }
.langs button{ all:unset; cursor:pointer; padding:6px 5px; opacity:.5; border-radius:2px; }
.langs button[aria-pressed="true"]{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.langs button:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

/* ============================================================ hero: dom rośnie */
.hero{ position:relative; height:520vh; background:var(--night); }
.stick{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
/* sekwencja klatek na canvas: tło rozmyte + pasmo ostre (na pionowym ekranie) */
.seq, .seq-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.seq-bg{ filter:blur(26px) saturate(1.08); transform:scale(1.15); opacity:0; }
.is-portrait .seq-bg{ opacity:1; }
.seq-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 62%; transition:opacity .6s var(--e-out); }
.seq-ready .seq-poster{ opacity:0; }
.seq-load{ position:absolute; z-index:4; right:var(--gut); top:72px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-faint); transition:opacity .4s; }
.seq-ready .seq-load{ opacity:0; }
.stick::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, transparent 48%, oklch(0.12 0.02 40 / .5) 100%),
             linear-gradient(to top, oklch(0.12 0.02 40 / .72) 0%, oklch(0.12 0.02 40 / 0) 34%); opacity:var(--vig,1); }
.intro{ position:absolute; z-index:3; left:50%; top:clamp(92px,15vh,150px); transform:translateX(-50%); width:min(92vw,980px); text-align:center; color:var(--ink); }
.intro::before{ content:""; position:absolute; inset:-22% -12% -46%; z-index:-1; background:radial-gradient(ellipse at 50% 50%, oklch(0.972 0.006 85 / .96) 38%, oklch(0.972 0.006 85 / 0) 72%); pointer-events:none; }
.intro .label{ color:var(--ink-faint); margin-bottom:18px; }
.intro h1{ margin:0; font-family:var(--serif); font-weight:360; font-variation-settings:"opsz" 72; font-size:var(--fs-display); line-height:.98; letter-spacing:-.045em; }
.intro h1 .l{ display:block; }
.intro p{ margin:20px auto 0; color:var(--ink-muted); max-width:40ch; }
.cap{ position:absolute; z-index:3; left:var(--gut); right:var(--gut); bottom:clamp(22px,6vh,56px); color:var(--on-night);
  display:grid; grid-template-columns:minmax(0,440px) 1fr; align-items:end; gap:24px; }
.cap .label{ color:var(--on-night-faint); }
.cap h2{ margin:10px 0 0; font-family:var(--serif); font-weight:370; font-variation-settings:"opsz" 96; font-size:clamp(1.7rem,1.1rem + 1.9vw,2.9rem); letter-spacing:-.025em; line-height:1.04; }
.cap p{ margin:10px 0 0; color:var(--on-night-muted); max-width:38ch; }
.swap{ transition:opacity .4s var(--e-out), filter .4s var(--e-out), transform .4s var(--e-out); }
.swap.out{ opacity:0; filter:blur(8px); transform:translateY(8px); }
.ticks{ justify-self:end; display:grid; grid-template-columns:repeat(5, clamp(28px,5vw,64px)); gap:6px; }
.ticks span{ height:2px; background:var(--rule-night); position:relative; overflow:hidden; }
.ticks i{ position:absolute; inset:0; background:var(--on-night); transform:scaleX(0); transform-origin:left; }
.cap-wrap{ opacity:0; transition:opacity .5s var(--e-out); }
.cap-wrap.show{ opacity:1; }

/* ============================================================ sekcje */
section{ position:relative; }
.pad{ padding:clamp(96px,16vh,180px) var(--gut); }
.night{ background:var(--night); color:var(--on-night); }
.statement{ min-height:72vh; display:grid; place-items:center; text-align:center; }
.statement .h2{ margin:22px 0 26px; }

/* koncepty */
.work-head{ display:flex; justify-content:space-between; align-items:end; gap:32px; flex-wrap:wrap; margin-bottom:clamp(40px,7vh,72px); }
.work-head .h2{ margin-top:18px; }
.work-note{ max-width:34ch; font-size:.92rem; }
.works{ display:grid; grid-template-columns:1.35fr 1fr .9fr; gap:clamp(14px,2vw,28px); align-items:start; }
.works article:nth-child(2){ margin-top:clamp(40px,9vh,110px); }
.works article:nth-child(3){ margin-top:clamp(12px,3vh,36px); }
.shot{ overflow:hidden; position:relative; background:oklch(0.24 0.014 40); }
.shot img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; transform:scale(1.04); transition:transform 1.4s var(--e-out); }
.works article:nth-child(1) .shot img{ aspect-ratio:1/1; }
.works article:hover .shot img{ transform:scale(1.02); }
.tagline{ display:flex; justify-content:space-between; gap:12px; margin-top:16px; padding-top:12px; border-top:1px solid var(--rule-night); }
.works h3{ margin:12px 0 6px; font-family:var(--serif); font-weight:360; font-variation-settings:"opsz" 60; font-size:var(--fs-h3); letter-spacing:-.02em; line-height:1.1; }
.works p{ margin:0; font-size:.95rem; color:var(--on-night-muted); max-width:44ch; }

/* liczby */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(40px,7vh,70px); border-top:1px solid var(--rule); }
.stats div{ padding:28px 18px 0; border-left:1px solid var(--rule); }
.stats div:first-child{ border-left:0; padding-left:0; }
.stats .num{ display:block; margin-top:14px; font-family:var(--serif); font-weight:300; font-variation-settings:"opsz" 72; font-size:clamp(2.4rem,1.4rem + 3.4vw,5rem); letter-spacing:-.04em; line-height:1; }

/* proces */
.process{ overflow:hidden; }
.process::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--rule-night) 1px, transparent 1px), linear-gradient(90deg, var(--rule-night) 1px, transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
.process .h2{ margin-top:18px; }
.steps{ list-style:none; padding:0; margin:clamp(48px,8vh,84px) 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.steps li{ padding:24px clamp(14px,2vw,28px) 0 0; border-top:1px solid var(--rule-night); position:relative; }
.steps li::before{ content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%; background:var(--on-night); }
.steps h3{ margin:14px 0 8px; font-family:var(--serif); font-weight:360; font-size:1.45rem; letter-spacing:-.02em; line-height:1.15; }
.steps p{ margin:0; font-size:.95rem; color:var(--on-night-muted); }

/* cennik jak menu */
.menu{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,96px); margin:clamp(48px,8vh,80px) auto 0; max-width:1120px; text-align:left; }
.menu h3{ margin:0 0 18px; }
.menu ul{ list-style:none; margin:0; padding:0; }
.menu li{ display:flex; align-items:baseline; gap:10px; padding:14px 0; border-bottom:1px solid var(--rule); }
.menu li span:first-child{ flex:0 1 auto; }
.menu li i{ flex:1 1 24px; border-bottom:1px dotted var(--ink-faint); transform:translateY(-4px); min-width:24px; }
.menu li span:last-child{ font-variant-numeric:tabular-nums; white-space:nowrap; font-family:var(--serif); font-size:1.1rem; font-variation-settings:"opsz" 24; }

/* zamknięcie */
.closing{ min-height:100vh; min-height:100svh; display:grid; place-items:center; text-align:center; overflow:hidden; color:var(--on-night); }
.closing .bg{ position:absolute; inset:0; }
.closing .bg img{ width:100%; height:115%; object-fit:cover; object-position:50% 60%; will-change:transform; }
.closing::after{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse at center, oklch(0.12 0.02 40 / .25) 20%, oklch(0.12 0.02 40 / .7) 100%); }
.closing .in{ position:relative; z-index:2; padding:0 var(--gut); }
.closing h2{ margin:20px 0 16px; font-family:var(--serif); font-weight:360; font-variation-settings:"opsz" 72; font-size:var(--fs-display); line-height:1; letter-spacing:-.045em; }
.closing .label{ color:var(--on-night-faint); }
.closing .body{ color:var(--on-night-muted); }
.closing .pill{ display:inline-block; margin-top:34px; background:var(--on-night); color:var(--ink); border-color:var(--on-night); padding:13px 24px; }
.closing .pill:hover{ background:transparent; color:var(--on-night); }

footer{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:28px var(--gut); font-size:.85rem; color:var(--ink-muted); border-top:1px solid var(--rule); }
footer .mark{ color:var(--ink); }

/* ============================================================ responsywność */
@media (max-width:900px){
  .works{ grid-template-columns:1fr 1fr; }
  .works article:nth-child(1){ grid-column:1 / -1; }
  .works article:nth-child(1) .shot img{ aspect-ratio:16/10; }
  .works article:nth-child(2){ margin-top:0; }
  .works article:nth-child(3){ margin-top:clamp(28px,6vh,64px); }
  .steps{ grid-template-columns:1fr 1fr; row-gap:40px; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stats div:nth-child(3){ border-left:0; padding-left:0; }
  .stats div{ padding-bottom:28px; }
}
@media (max-width:640px){
  .nav-r > a:not(.pill){ display:none; }
  .pill{ padding:8px 13px; font-size:.8rem; }
  .cap{ grid-template-columns:1fr; }
  .ticks{ justify-self:start; grid-template-columns:repeat(5, 1fr); width:100%; }
  .works{ grid-template-columns:1fr; }
  .works article:nth-child(n){ margin-top:0; }
  .works article + article{ margin-top:48px; }
  .works article .shot img{ aspect-ratio:4/5 !important; }
  .steps{ grid-template-columns:1fr; }
  .menu{ grid-template-columns:1fr; }
  .intro{ top:calc(76px + 2svh); }
}
@media (prefers-reduced-motion:reduce){
  .r{ filter:none; transform:none; transition:opacity .15s linear; }
  .swap{ transition:opacity .12s linear; } .swap.out{ filter:none; transform:none; }
  .shot img{ transform:none; transition:none; }
}

/* ============================================================ podstrony */
.page-head{ padding:clamp(140px,22vh,220px) var(--gut) clamp(56px,9vh,96px); text-align:center; }
.page-head .h2{ margin:18px auto 22px; max-width:18ch; }
.page-head .body{ margin-inline:auto; }
.offer{ padding:0 var(--gut) clamp(80px,12vh,140px); max-width:1180px; margin:0 auto; }
.offer-group{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(24px,5vw,80px); padding:clamp(40px,7vh,72px) 0; border-top:1px solid var(--rule); }
.offer-group h2{ margin:14px 0 12px; font-family:var(--serif); font-weight:370; font-variation-settings:"opsz" 96; font-size:clamp(1.8rem,1.2rem + 1.8vw,2.8rem); letter-spacing:-.028em; line-height:1.05; }
.items{ list-style:none; margin:0; padding:0; }
.items li{ padding:20px 0; border-bottom:1px solid var(--rule); }
.items li:first-child{ padding-top:4px; }
.items .row{ display:flex; align-items:baseline; gap:10px; }
.items .row b{ font-weight:500; }
.items .row i{ flex:1 1 24px; border-bottom:1px dotted var(--ink-faint); transform:translateY(-4px); min-width:24px; }
.items .row span{ white-space:nowrap; font-family:var(--serif); font-size:1.12rem; font-variant-numeric:tabular-nums; font-variation-settings:"opsz" 24; }
.items p{ margin:6px 0 0; color:var(--ink-muted); font-size:.95rem; max-width:60ch; }
.items .old{ color:var(--ink-faint); text-decoration:line-through; font-size:.9rem; margin-right:6px; font-family:var(--sans); }
.note{ font-size:.85rem; color:var(--ink-faint); max-width:70ch; margin:28px 0 0; }
.cta-row{ text-align:center; padding:clamp(40px,8vh,80px) var(--gut) clamp(90px,14vh,150px); }
.cta-row .pill{ display:inline-block; padding:13px 24px; margin-top:22px; }
.legal{ max-width:760px; margin:0 auto; padding:0 var(--gut) clamp(90px,14vh,150px); }
.legal h2{ font-family:var(--serif); font-weight:380; font-size:1.5rem; letter-spacing:-.02em; margin:44px 0 10px; }
.legal p, .legal li{ color:var(--ink-muted); }
.legal ul{ padding-left:1.2em; }
.legal .todo{ background:oklch(0.9 0.08 85 / .5); padding:0 .25em; border-radius:2px; color:var(--ink); }
.more{ display:inline-block; margin-top:34px; font-size:.95rem; text-underline-offset:5px; }
footer nav{ display:flex; gap:18px; flex-wrap:wrap; }
footer nav a{ text-decoration:none; }
footer nav a:hover{ text-decoration:underline; text-underline-offset:4px; }
@media (max-width:760px){ .offer-group{ grid-template-columns:1fr; gap:18px; } }