@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(f/cormorant-garamond-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(f/cormorant-garamond-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(f/cormorant-garamond-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(f/cormorant-garamond-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url(f/karla-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karla';font-style:normal;font-weight:400;font-display:swap;src:url(f/karla-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url(f/karla-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karla';font-style:normal;font-weight:600;font-display:swap;src:url(f/karla-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* base for /ver1../ver4 — tokens are set per variant file; motion only transform/opacity/clip-path/filter */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ul,ol{margin:0}ul,ol{list-style:none;padding:0}
:root{--out:cubic-bezier(.23,1,.32,1);--inout:cubic-bezier(.77,0,.175,1);--gut:40px}
@media (max-width:700px){:root{--gut:16px}body{font-size:16px}}
.wrap{max-width:calc(1200px + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:12px;top:-60px;background:var(--btn);color:#fff;padding:8px 12px;z-index:50}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
svg{width:24px;height:24px;flex:none}
.icon{width:28px;height:28px;color:var(--accent)}

/* theme images */
.th-l,.lg-l{display:none}
[data-theme=light] .th-d,[data-theme=light] .lg-d{display:none}
[data-theme=light] .th-l,[data-theme=light] .lg-l{display:block}

/* header */
.hd{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px)}
.hd-in{display:flex;align-items:center;gap:32px;height:68px}
.brand img{width:100px;height:auto}
.nav{display:flex;gap:28px;margin-left:auto;font-size:14px}
.nav a{color:var(--muted);padding:12px 0;transition:color .2s ease}
.nav a:hover{color:var(--text)}
.tools{display:flex;align-items:center;gap:14px}
.lang{font-size:13px;color:var(--muted)}
.theme{width:44px;height:44px;display:grid;place-items:center;color:var(--text);border-radius:50%}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--text);transition:transform .25s var(--out)}
.burger span:first-child{top:17px}.burger span:last-child{top:26px}
.burger[aria-expanded=true] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 22px;background:var(--btn);color:#fff;font:600 15px/1 var(--body);
  border-radius:var(--r-btn,0);transition:transform .14s var(--out),filter .2s ease}
.btn:hover{filter:brightness(1.1)}.btn:active{transform:scale(.97)}
.btn .ar{width:18px;height:18px;transition:transform .16s var(--out)}.btn:hover .ar{transform:translateX(4px)}
.btn-q{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text)}
.btn-s{min-height:40px;padding:0 16px;font-size:14px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.more{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:600;font-size:15px;min-height:44px}
.more .ar{width:18px;height:18px;transition:transform .16s var(--out)}.more:hover .ar{transform:translateX(4px)}
.film{display:inline-flex;align-items:center;gap:14px;text-align:left;font-size:14px;line-height:1.35;color:var(--text);min-height:48px}
.film .pl{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.film .pl svg{width:18px;height:18px}

/* type defaults (variants override sizes) */
.eb{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.h1{font-family:var(--head);font-weight:var(--hw,600);line-height:1.02;letter-spacing:-.02em}
.h1 span{display:block}
.h2{font-family:var(--head);font-weight:var(--hw,600);line-height:1.12;letter-spacing:-.01em}
.sub{font-weight:600;font-size:18px;margin-top:20px}
.lead{color:var(--muted);font-size:17px;max-width:44ch;margin:12px 0 28px}
.hand{font-style:italic;color:var(--glow);font-family:var(--head);font-size:20px;margin-top:14px;opacity:.9}
.sh{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:32px}

/* sections rhythm: space + tone, no rules */
section{padding:96px 0}
@media (max-width:700px){section{padding:56px 0}}
.band{background:var(--surface);padding:40px 0}
.ben{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
.ben li,.feat li{display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.35}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin:28px 0}
.card a{display:block}.card .ph{display:block;overflow:hidden;border-radius:var(--r-img,0)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .5s var(--out),filter .5s var(--out)}
.card a:hover img{transform:scale(1.03);filter:brightness(1.08)}
.cap{display:block;margin-top:10px;font-size:14px}
.st .no{display:block;font-family:var(--head);font-size:40px;line-height:1;color:var(--accent)}
.st h3{font-size:17px;margin:12px 0 6px}.st p{color:var(--muted);font-size:15px}

/* reveal */
[data-io]{opacity:0;transform:translateY(12px);transition:opacity .6s var(--out),transform .6s var(--out)}
[data-io].in{opacity:1;transform:none}
html:not(.js) [data-io]{opacity:1;transform:none}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:40;background:var(--surface);color:var(--text);padding:12px 18px;border-radius:8px;font-size:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);opacity:0;transform:translate(-50%,8px);transition:opacity .2s ease,transform .25s var(--out);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* footer */
.ft{background:var(--surface);padding:48px 0 24px;font-size:14px}
.ft-in{display:grid;grid-template-columns:1.4fr 2fr auto;gap:32px;align-items:start}
.ft-a img{width:100px}.ft-a p{color:var(--muted);margin-top:12px}
.ft-nav{display:flex;flex-wrap:wrap;gap:4px 24px}.ft-nav a{color:var(--muted);min-height:44px;display:inline-flex;align-items:center}
.ft-soc{display:flex;gap:6px}.soc{width:44px;height:44px;display:grid;place-items:center;color:var(--muted)}
.soc svg{width:20px;height:20px}.soc:hover{color:var(--text)}
.ft-b{display:flex;justify-content:space-between;gap:16px;color:var(--muted);margin-top:32px;font-size:13px}

/* phone */
@media (max-width:900px){
  .nav{position:fixed;inset:68px 0 auto 0;height:calc(100dvh - 68px);flex-direction:column;gap:0;padding:24px var(--gut);background:var(--bg);
    font-size:24px;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s ease,transform .25s var(--out)}
  .nav a{color:var(--text);padding:14px 0}
  .nav.open{opacity:1;transform:none;pointer-events:auto}
  .burger{display:block}.hd-cta{display:none}.tools{margin-left:auto}
  .ben{grid-template-columns:1fr 1fr;gap:24px 16px}
  .ft-in{grid-template-columns:1fr}.ft-b{flex-direction:column}
}
@media (max-width:700px){.feat{grid-template-columns:1fr}.ctas .btn{flex:1 1 100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-io]{opacity:1;transform:none}
}

/* V6 «Barwa światła» (CEO brief 27.09): hero as on the main page + light switch + 2700–6500 K; Proces from v1 with a slower line;
   Realizacje from the main page; bottom block from v3. Palette = main page; second accent = logo gold #A18C6D (CEO 18:49 «попробовать»):
   eyebrows, step numbers, the handwritten line. Gold as TEXT only where it reads: #A18C6D on dark 5.9:1, #76644A on light 5.2:1. */
:root{--head:'Cormorant Garamond',Georgia,serif;--body:'Karla',system-ui,sans-serif;--hw:500;--r-btn:4px;--r-img:6px;
  --bg:#091114;--surface:#0B1316;--surface2:#111B1E;--text:#F8F7F4;--muted:#B9C0C2;--accent:#A4EB96;
  --btn:linear-gradient(180deg,#328D3D,#07601D);--glow:#FFD9A0;--gold:#A18C6D;--gold-t:#A18C6D;--stage:#091114}
[data-theme=light]{--bg:#FFFFFF;--surface:#F4F6F5;--surface2:#EBEFED;--text:#071015;--muted:#46505B;--accent:#125D25;--glow:#E59A3A;--gold-t:#76644A}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.hd{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}  /* opaque: the switch knob's glow showed through the blurred header as a halo under the logo (CEO 19:15) */
.hd-in{height:88px}
.hd{transition:transform .28s var(--out)}
.hd.hd-up{transform:translateY(-100%)}   /* hidden while scrolling down (CEO 03.10, variant A); app.js never hides it with the menu open */
.brand img{height:72px;width:auto}   /* the client's original logo as is (CEO 18:16): only the size is ours */
.eb{color:var(--gold-t)}
.h1{font-size:80px;line-height:.98;font-weight:500}.h2{font-size:44px;font-weight:500}
.sub{font-family:var(--body)}
.more{font-size:15px}

/* ---------- hero = ONE block (CEO 03.10 12:07; restored from 83db243 after ddedc9f split it): a dark stage like the main page — the whole
   room photo on the right, «Wizja…» on its dark wall on the left, light controls right under the photo ---------- */
.hero{padding:24px 0 40px}
.proc,.real{padding:72px 0}
.stage{position:relative;min-height:540px;display:flex;align-items:center;border-radius:var(--r-img);overflow:hidden;background:var(--stage)}
.stage{--text:#F8F7F4;--muted:#B9C0C2;--accent:#A4EB96;--gold-t:#A18C6D;--btn-q:rgb(248 247 244/.08);color:var(--text)} /* text sits on the dark stage in both themes, every width */
.stage .btn-q{background:var(--btn-q);color:#F8F7F4}
.art{position:absolute;inset:0}
.kv{position:absolute;right:0;top:0;height:100%;aspect-ratio:1540/786;overflow:hidden;--k:180,180,180}
.kv img{display:block;width:100%;height:100%}
.kv .lit,.kv .off,.glow{position:absolute;inset:0;pointer-events:none}
.kv .lit,.glow{-webkit-mask:url(glow-mask.webp?v=481685a5) center/100% 100% no-repeat;mask:url(glow-mask.webp?v=481685a5) center/100% 100% no-repeat}
.kv .lit{filter:url(#wb)}
.glow{background:rgb(var(--k));mix-blend-mode:screen;opacity:.16;transition:background-color .35s ease}
.kv .off{opacity:0;transition:opacity .6s var(--out)}
.kv[data-on=false] .off{opacity:1}
.art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--stage) 0%,var(--stage) 24%,rgb(9 17 20/.72) 40%,rgb(9 17 20/0) 58%)}
/* the light comes on left -> right behind a warm seam (main page motion), once per visit */
.dusk{position:absolute;inset:0;z-index:1;background:rgb(4 9 11/.84);clip-path:inset(0 0 0 0);pointer-events:none}
.seam{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0}
.seam::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,transparent,var(--glow) 18%,var(--glow) 82%,transparent);box-shadow:0 0 24px 6px rgb(255 214 150/.35)}
html.on .dusk{clip-path:inset(0 0 0 100%);transition:clip-path 1.8s var(--inout) .35s}
html.on .seam{animation:seam 1.8s var(--inout) .35s both}
@keyframes seam{0%{opacity:0;transform:translateX(0)}8%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
html:not(.js) .dusk,html:not(.js) .seam{display:none}
.hero-t{position:relative;z-index:3;padding:56px 0 56px 56px;max-width:560px}
.hero-t .sub{margin-top:22px}.hero-t .lead{max-width:40ch}
.film-t{margin-top:24px}.film-o{display:none}

/* switch (as /ver2) + colour temperature (as /ver5), under the photo */
.ctrl{display:flex;align-items:center;gap:32px;margin:20px 0 0 auto;width:min(100%,640px)}
.lsw-w{display:flex;align-items:center;gap:12px;flex:none}
.lsw{width:76px;height:40px;border-radius:999px;background:color-mix(in srgb,var(--text) 14%,transparent);position:relative;overflow:hidden}
/* glow kept inside the pill: under the sticky header it leaked out below the header edge as an orange haze (.159 19:22) */
.lsw-k{position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:50%;background:var(--text);
  transition:transform .18s var(--out),background-color .3s ease,box-shadow .3s ease}
.lsw[aria-checked=true] .lsw-k{transform:translateX(36px);background:rgb(var(--kc,255,200,140));box-shadow:0 0 18px rgb(var(--kc,255,200,140))}
.lsw-l{font-size:14px;color:var(--muted);min-width:9.5em}
.k{flex:1;min-width:0}
.k label{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted);margin-bottom:2px}
.k output{color:var(--text);font-weight:600}
input[type=range]{display:block;width:100%;height:44px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
  touch-action:pan-y}   /* a fast horizontal fling on the slider was taken by the browser as «back» (left the page, 03.10); vertical page scroll stays */
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#ffa757,#ffc88c,#ffe4c8,#fff4ec,#e4ecff)}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#ffa757,#ffc88c,#ffe4c8,#fff4ec,#e4ecff)}
[data-theme=light] input[type=range]::-webkit-slider-runnable-track{box-shadow:inset 0 0 0 1px rgb(7 16 21/.18)}
[data-theme=light] input[type=range]::-moz-range-track{box-shadow:inset 0 0 0 1px rgb(7 16 21/.18)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;margin-top:-11px;background:var(--text);border:3px solid var(--bg);box-shadow:0 0 0 1px color-mix(in srgb,var(--text) 40%,transparent)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--text);border:3px solid var(--bg)}
input[type=range]:disabled{opacity:.4;cursor:default}
.ticks{position:relative;height:20px;font-size:12px;color:var(--muted);margin-top:-4px}
/* the 3 snap points (CEO 03.10): each label under the thumb centre at that value — the thumb (28px) travels 14px .. width-14px */
.ticks span{position:absolute;top:0;left:calc(14px + (100% - 28px) * var(--p));transform:translateX(-50%);white-space:nowrap;
  transition:color .2s ease}
.ticks span:first-child{transform:translateX(-14px)}.ticks span:last-child{transform:translateX(calc(-100% + 14px))}
.ticks span.on{color:var(--text);font-weight:600}

/* ---------- main-page blocks back (CEO 19:55): benefits band + «Gdzie kończą się granice…» (text | photo | tonal feature panel) ---------- */
.band{padding:30px 0;background:var(--surface2)}
.ben li{gap:16px;font-size:15px;justify-content:center}
.ben li+li{border-left:1px solid color-mix(in srgb,var(--text) 10%,transparent)}   /* hairline dividers as on the main page */.ben svg,.feat svg{width:30px;height:30px;color:var(--accent)}
.intro{padding:72px 0 24px}
.intro-g{display:grid;grid-template-columns:5fr 4fr 3fr;gap:32px;align-items:center}
.intro-t .h2{margin-bottom:16px}.intro-t>p{color:var(--muted);font-size:17px;margin-bottom:28px;max-width:46ch}
.intro-f img{width:100%;aspect-ratio:4/3.3;object-fit:cover;border-radius:var(--r-img)}
.panel{background:var(--surface2);border-radius:var(--r-img);padding:12px 24px}
.panel .feat{grid-template-columns:1fr;gap:0;margin:0}
.panel .feat li{padding:16px 0;font-size:15px}
/* ---------- Proces (v1): one warm light line draws itself 01 -> 04, slower (CEO: «чуть помедленее») ---------- */
.rail{position:relative;padding-top:8px}
.rail-l{position:absolute;left:0;right:0;top:34px;height:2px;background:var(--glow);box-shadow:0 0 12px var(--glow);
  transform:scaleX(0);transform-origin:left;transition:transform 2.8s cubic-bezier(.45,.05,.55,.95)}
.rail.drawn .rail-l{transform:scaleX(1)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative}
.st .no{font-size:48px;font-weight:500;color:var(--gold-t);background:var(--bg);display:inline-block;padding-right:14px;opacity:.35;
  transition:opacity .5s ease calc(var(--i)*800ms + 150ms)}
.rail.drawn .st .no{opacity:1}
.st h3{font-size:18px}
.no,.k output,.ticks{font-variant-numeric:lining-nums}   /* Cormorant's default old-style figures read «01» as «OI» */

/* ---------- Realizacje (main page): four cards come out of dusk into light, one after another ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card .ph{position:relative}
.card img{filter:brightness(.42) saturate(.8);transform:scale(1.03);
  transition:filter 1.1s var(--out) var(--lit-delay,0ms),transform 1.1s var(--out) var(--lit-delay,0ms)}
.card.lit img{filter:none;transform:none}
@media (hover:hover) and (pointer:fine){.card.lit a:hover img{filter:brightness(1.08);transform:scale(1.035);transition-duration:.45s;transition-delay:0ms}}
html:not(.js) .card img{filter:none;transform:none}
.go{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:#F8F7F4;color:#091114;display:grid;place-items:center;
  transition:transform .16s var(--out)}
.go .ar{width:18px;height:18px}
.card a:hover .go{transform:translateX(3px)}
.cap{font-size:15px;margin-top:12px}

/* ---------- bottom block (v3): photo | text card, then the footer — main palette ---------- */
.cta{padding-top:24px}
.cta-g{display:grid;grid-template-columns:7fr 5fr;align-items:stretch;background:var(--surface2);border-radius:8px;overflow:hidden}
.cta-f{position:relative;min-height:320px}
.cta-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}   /* fills its cell: no empty strip beside the photo (v3 had one) */
.cta-t{padding:48px 44px;align-self:center}
.cta .h2{font-size:38px}.cp{color:var(--muted);margin-top:12px}
.hand{color:var(--gold-t);font-style:normal;font-size:24px;margin-top:16px;opacity:1}
.cta-t .btn{margin-top:28px}
.ft{background:var(--surface)}
.ft-a img{height:120px;width:auto}
.ft-soc .soc{color:var(--accent)}.ft-soc .soc svg{width:36px;height:36px;stroke-width:1.6}   /* CEO 04.10 21:26: the header's ring set in the footer, every width */
@media (min-width:901px){.ft-soc{gap:0}.ft-soc .soc{width:36px;height:36px}.ft-soc .soc svg{width:32px;height:32px}}   /* the icon column keeps its width (4x36 = the old 3x44+2x6 = 144 px): the footer nav does not move */
.ft-c{margin-top:14px;line-height:1.9}.ft-c a{color:var(--text);display:inline-block;min-height:28px}.ft-c a:hover{color:var(--accent)}

@media (max-width:900px){
  .h1{font-size:52px}.h2{font-size:32px}
  .hd-in{height:72px}.nav{inset:72px 0 auto 0;height:calc(100dvh - 72px)}
  .brand img{height:58px}
  .hero{padding:16px 0 24px}
  .proc,.real{padding:48px 0}
  .sh{flex-wrap:wrap;gap:4px 16px;margin-bottom:24px}.sh .h2{flex:1 1 100%}
  /* phone: ONE continuous vertical line left of the numbers, from «01» to «04» (CEO 19:15: a stub above 01 and torn pieces between
     steps — the number's background patch cut the line). Built from per-step segments number -> next number that draw one after
     another, so it grows as one line; nothing above 01, no glow blob at the start. */
  .rail-l{display:none}
  .steps{grid-template-columns:1fr;gap:28px}
  .st{position:relative;display:grid;grid-template-columns:64px 1fr;column-gap:8px}
  .st .no{grid-row:span 2;font-size:34px;padding:0 0 6px 20px;background:none;transition-delay:calc(var(--i)*750ms + 100ms)}
  .st:not(:last-child)::before{content:"";position:absolute;left:4px;top:9px;width:2px;height:calc(100% + 28px);background:var(--glow);
    box-shadow:0 0 6px var(--glow);transform:scaleY(0);transform-origin:top;transition:transform .75s linear calc(var(--i)*750ms)}
  .rail.drawn .st::before{transform:scaleY(1)}
  .st h3{margin-top:4px}
  .band{padding:24px 0}.ben li{justify-content:flex-start}.ben li+li{border-left:0}.intro{padding:48px 0 8px}
  .intro-g{grid-template-columns:1fr;gap:24px}.intro-f img{aspect-ratio:4/3}
  .cards{grid-template-columns:1fr 1fr;gap:16px 12px}.cap{font-size:14px}
  .go{width:32px;height:32px;right:8px;bottom:8px}
  .cta{padding-top:8px}
  .cta-g{grid-template-columns:1fr}.cta-f{min-height:210px}.cta-t{padding:28px 20px 32px}.cta .h2{font-size:30px}
}

/* ---------- hero ≤1100 px (CEO 03.10 20:41: «the phone must follow the approved desktop»): the SAME scene — the room photo is the
   background of the stage (cover, room on the right), «Wizja…» + buttons lie on its dark side; light controls right under the scene.
   Landscape phones and tablets: text left over the dark wall, as on 1440. Portrait phones: room on top, the text on the darkened lower
   part of the same photo (contrast measured). No empty strip: the photo fills the stage edge to edge. ---------- */
@media (max-width:1100px){
  .hero{padding:12px 0 28px}
  .stage{display:block;min-height:0}
  .art{position:absolute;inset:0}
  .kv{position:absolute;inset:0;width:auto;height:auto;aspect-ratio:auto}
  .kv img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,100% 50%)}
  .kv .lit,.glow{-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:var(--fp,100% 50%);mask-position:var(--fp,100% 50%)}
  .hero-t{padding:44px 40px;max-width:min(520px,58%)}
  .stage{min-height:min(520px,calc(100svh - 72px - 140px))}
  .stage{display:flex;align-items:center}
  .ctrl{margin-top:16px}
  .h1{font-size:56px}
}
@media (max-width:1100px) and (orientation:landscape) and (max-height:500px){   /* phone on its side: low screen */
  .hero{padding:8px 0 16px}
  .stage{min-height:calc(100svh - 72px - 64px)}
  .hero-t{padding:20px 28px 24px;max-width:52%}
  .h1{font-size:40px}.hero-t .sub{margin-top:10px;font-size:16px}.hero-t .lead{font-size:14px;margin:6px 0 14px}
  .film-t{display:none}
  .btn{min-height:40px;padding:0 16px;font-size:14px}
  .ctrl{flex-direction:row;align-items:center;gap:24px;margin-top:10px}
}
@media (max-width:700px) and (orientation:portrait){   /* portrait PHONES only (04.10 c: tablets 768+ follow the desktop composition) */
  .hero{padding:0 0 24px}
  .stage{display:block;margin:0 calc(-1*var(--gut));border-radius:0;min-height:0;--fp:72% 50%;--ph:min(56vw,520px)}
  .art{bottom:auto;height:calc(var(--ph) + 80px)}   /* the photo is the top of the scene; below it the stage continues dark under the text */
  .art::after{background:linear-gradient(180deg,rgb(9 17 20/0) 0%,rgb(9 17 20/0) calc(var(--ph) - 10px),rgb(9 17 20/.94) calc(var(--ph) + 36px),var(--stage) calc(var(--ph) + 80px))}
  .hero-t{max-width:640px;padding:calc(var(--ph) + 34px) var(--gut) 20px}
  .h1{font-size:44px}.hero-t .sub{margin-top:14px;font-size:17px}.hero-t .lead{font-size:15px;margin:8px 0 18px}
  .film-t{display:none}
  .film-o{display:inline-flex;position:absolute;right:12px;top:12px;z-index:4;color:#fff;background:rgb(5 8 9/.62);padding:4px 14px 4px 4px;
    border-radius:999px;font-size:13px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
  .film-o .pl{width:34px;height:34px;background:rgb(255 255 255/.14);color:#fff}
  .ctrl{flex-direction:column;align-items:stretch;gap:12px;width:100%;margin-top:16px}
}
/* ---------- portrait PHONES (≤700), CEO 04.10 14:05 (WA 25751): landscape phones and tablets keep the DESKTOP composition 1:1 (text left,
   photo right, light controls UNDER the photo — the 03.10 rules above, untouched). Portrait phone: the photo framed further left so the dark wall
   (where the desktop heading sits) is seen, the light panel ON the photo at its bottom (CEO 25720), ALL text under the photo as before 04.10,
   the eyebrow on one line. ---------- */
@media (max-width:700px) and (orientation:portrait){
  .hero-w{position:relative}
  /* CEO 04.10 15:28: the WHOLE source on the phone (room-full.*: the right wall with the neon «Design / Światło / Twoje zasady»,
     tools/kelvin/make-full.sh), framed fully right; the light panel goes UNDER the photo — on the photo it covered «ATMOSFERA…» */
  .hero-w,.hero-w .stage{--ph:clamp(300px,87vw,520px);--ch:100px}   /* .stage has its own --ph (03.10); 87vw = the CEO reference frame 15:37 (≈1.15:1, from the window/sofa start to the right edge) */
  .stage{--fp:100% 50%}
  .kv .lit,.glow{-webkit-mask-image:url(glow-mask-full.webp?v=97122d7c);mask-image:url(glow-mask-full.webp?v=97122d7c)}
  .art{height:var(--ph)}
  .art::after{background:linear-gradient(180deg,rgb(9 17 20/0) 0%,rgb(9 17 20/0) 95%,var(--stage) 100%)}
  .film-o{right:auto;left:12px}   /* top left: on the right it sat on the neon «Design» */
  .hero-t{padding:calc(var(--ph) + var(--ch) + 36px) var(--gut) 20px}
  .hero-copy .eb{white-space:nowrap;font-size:11px;letter-spacing:.1em}   /* ONE line (2 lines: the 1st hid under the header) */
  .ctrl{position:absolute;z-index:5;margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start;
    left:var(--gut);right:var(--gut);top:calc(var(--ph) + 14px);height:var(--ch);width:auto;
    padding:10px 14px 4px;border-radius:10px;background:rgb(5 8 9/.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    --text:#F8F7F4;--muted:#C9CFD1;color:var(--text)}   /* right under the photo, same dark glass in both themes */
  .lsw-w{flex-direction:column;align-items:center;gap:2px;padding-top:4px}
  .lsw{width:80px;height:44px}   /* finger size (gate: >= 44 px) */
  .lsw-k{width:36px;height:36px}
  .lsw-l{min-width:0;width:80px;text-align:center;font-size:12px;line-height:1.25;color:var(--muted)}
  .k label{font-size:13px;margin:0}
  .ctrl input[type=range]::-webkit-slider-thumb{border-color:#091114}
  .ctrl input[type=range]::-moz-range-thumb{border-color:#091114}
  .ctrl .ticks{margin-top:-6px}
  /* the wall inscriptions as LIVE text (CEO 15:38: the baked ones were blurry; erased from room-full.*). Placed in source pixels:
     the photo is fitted by height and flush right, so 1 source px = --u and x is measured from the right edge */
  .wall-t{--u:calc(var(--ph) / 393);position:absolute;top:0;right:0;width:calc(160 * var(--u));height:var(--ph);margin:0;pointer-events:none;
    color:#F4F2ED;transition:opacity .6s var(--out)}
  .kv[data-on=false] ~ .wall-t{opacity:.55}   /* light off: the inscriptions dim with the room, stay readable */
  .wall-t .neon{position:absolute;left:calc(40 * var(--u));top:calc(60 * var(--u));display:flex;flex-direction:column;
    font:400 calc(23 * var(--u))/1 Allura,cursive;transform:rotate(-10deg);transform-origin:0 100%;color:#EEECE7;
    text-shadow:0 0 3px rgb(255 255 255/.45),0 0 12px rgb(255 255 255/.16)}   /* thin neon tube, soft halo like the source */
  .wall-t .n2{padding-left:calc(6 * var(--u))}
  .wall-t .neon::after{content:"";display:block;width:calc(78 * var(--u));height:max(1.5px,calc(2 * var(--u)));margin:calc(9 * var(--u)) 0 0 calc(12 * var(--u));
    background:#7BC86F;box-shadow:0 0 6px rgb(123 200 111/.75)}
  .wall-t .atm{position:absolute;right:calc(18 * var(--u));top:calc(334 * var(--u));font:600 max(8.5px,calc(9.5 * var(--u)))/1.55 var(--body);
    letter-spacing:.16em;text-transform:uppercase;color:#E9E8E3}
  /* CEO 04.10 19:15 (client): the footer icons in the phone header, between the logo and «PL» — tap area 44 px, gaps tightened so
     everything fits at 360 px (measured: no overlap, no horizontal scroll) */
  .hd-in{gap:4px}.tools{gap:4px}   /* header icons (3 x 44) + PL/theme/menu fit next to the logo at 390+ */
  /* Allura (OFL, licence f/Allura-OFL.txt; .159 15:43) — declared for the portrait phone only, used only by .wall-t */
  @font-face{font-family:Allura;font-style:normal;font-weight:400;font-display:swap;src:url(f/allura-latin-400-normal.woff2) format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
  @font-face{font-family:Allura;font-style:normal;font-weight:400;font-display:swap;src:url(f/allura-latin-ext-400-normal.woff2) format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
}
@media (max-width:380px) and (orientation:portrait){   /* 360: 4 icons x 44 do not fit — tap areas 40, glyph 24, header sides 12 px (measured) */
  .hd-in{padding:0 12px}
  .theme,.burger{width:40px;height:40px}.burger span:first-child{top:15px}.burger span:last-child{top:24px}
}
@media (min-width:701px),(orientation:landscape){.wall-t{display:none}}
/* ---------- header social icons, EVERY width (CEO 05.10 20:20–20:23): Facebook, TikTok, Instagram — brand-like marks, no rings; cold white
   «6500 K» on the dark header, the header text colour on the light one; phone/tablet: in the header row before «PL»; desktop (>900, where
   «Skontaktuj się» is shown): a second row right under the button, flush with its right edge — the menu row does not move, the header
   grows by 10 px ---------- */
.hd-soc{display:flex;align-items:center}
.hd-soc .soc{width:44px;height:44px;color:#EEF3FF}
.hd-soc .soc svg{width:28px;height:28px}
[data-theme=light] .hd-soc .soc{color:var(--text)}
@media (min-width:901px){
  .hd{padding-bottom:10px}
  .tools{position:relative}
  .hd-soc{position:absolute;right:0;top:calc(100% + 1px);gap:4px}
  .hd-soc .soc{width:26px;height:26px}.hd-soc .soc svg{width:20px;height:20px}
}
@media (max-width:380px) and (orientation:portrait){.hd-soc .soc{width:40px;height:40px}.hd-soc .soc svg{width:26px;height:26px}}   /* 360: tap 40, glyph 26 (measured fit) */
@media (min-width:701px) and (max-width:1100px) and (orientation:portrait){   /* portrait tablet: desktop composition, but the narrow stage puts the
  bright ceiling line under the eyebrow (4.3:1) — the dark side reaches a little further (04.10 c, contrast measured) */
  .art::after{background:linear-gradient(90deg,var(--stage) 0%,var(--stage) 30%,rgb(9 17 20/.78) 50%,rgb(9 17 20/0) 68%)}
}
/* ---------- WhatsApp button (CEO 06.10 09:01, 09:38, 09:55): round, bottom RIGHT on every page and width, AUTHENTIC: WhatsApp green #25D366,
   the official white mark (simple-icons, CC0), a soft shadow; under the header and its open menu (z 15 < 20). It never disappears (CEO 09:55: no
   blinking): it keeps its place while you scroll; when the page comes to rest with something you can press under it, app.js slides it up just
   above that thing (--wa-lift) and back when the place is free. 56 px; portrait phone 50 px (tap area stays >= 48). ---------- */
.wa{position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:15;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;color:#fff;box-shadow:0 3px 10px rgb(0 0 0/.3);
  transform:translateY(calc(-1px * var(--wa-lift,0)));transition:transform .2s ease}
.wa svg{width:32px;height:32px}
.wa:hover{filter:brightness(1.08)}
.wa:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:700px) and (orientation:portrait){.wa{width:50px;height:50px}.wa svg{width:29px;height:29px}}
@media (min-width:901px){.wa{right:32px;bottom:32px}}
/* ---------- cookie banner (06.10.2026; redone after CEO 21:24 «халтура»): a BLOCK OF THE PAGE, the first thing in <main> — it scrolls
   away with the content and covers nothing. Shown only with html.ck-ask (set by a/zgoda.js in <head> before the first paint); without JS
   it is never shown. 07.10: phone portrait keeps the block; everything else gets a popup (below). ---------- */
/* the banner sits above the whole page, so a late font swap inside it moved everything (CLS .30 at 1440): its text uses the SAME Karla files
   under an own name with font-display:optional — no swap after the first paint; from the next page the font is cached */
@font-face{font-family:'Karla CK';font-style:normal;font-weight:400;font-display:optional;src:url(f/karla-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karla CK';font-style:normal;font-weight:400;font-display:optional;src:url(f/karla-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Karla CK';font-style:normal;font-weight:600;font-display:optional;src:url(f/karla-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Karla CK';font-style:normal;font-weight:600;font-display:optional;src:url(f/karla-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.cookies{display:none;font-family:'Karla CK',system-ui,sans-serif}
.cookies .ck-t,.cookies .btn{font-family:'Karla CK',system-ui,sans-serif}
.cookies .ck-in{display:flex;align-items:center;gap:12px 20px;padding:14px 18px;border-radius:var(--r-img);background:var(--surface2);color:var(--text);border:1px solid rgb(128 128 128/.22)}
.cookies .ck-tx{flex:1 1 auto;min-width:0}
.cookies .ck-t{margin:0 0 2px;font:600 15px/1.35 'Karla CK',system-ui,sans-serif}
.cookies .ck-x{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.cookies .ck-x a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.cookies .ck-b{display:flex;gap:10px;flex:0 0 auto}
.cookies .ck-b .btn{flex:1 1 0;justify-content:center;min-height:44px;min-width:0;padding:0 16px;white-space:nowrap}   /* «Nie, dziękuję» must not wrap: both buttons look the same */
.cookies:focus{outline:none}   /* the window takes the focus when it opens (tabindex -1, not reachable by Tab): no ring, so neither button looks preferred */
/* phone portrait (CEO had no objection): a block of the page, the first thing in <main>; it scrolls away and covers nothing */
@media (max-width:700px) and (orientation:portrait){
  .ck-ask .cookies{display:block;margin:12px auto 4px;padding:0 var(--gut)}
  .cookies .ck-in{flex-direction:column;align-items:stretch;padding:12px 14px}.cookies .ck-x{font-size:13.5px}}
/* everything else — desktop, tablets, phones held sideways (CEO 07.10 05:58 «надо чтобы было поп-апом»): a compact POPUP card over the page,
   out of the flow (the hero stays where the approved desktop has it, no layout shift), no dimming — the page works without a choice.
   zgoda.js puts it in the first place free of the headline, the call-to-action buttons, the light panel, the film button and WhatsApp
   (ck-bl left, ck-bw right of the page left of WhatsApp — each climbing from the bottom; low screens first ck-low: a thin bar),
   then fades it in (ck-show) */
@media (min-width:701px),(orientation:landscape){
  .ck-ask .cookies{display:block;position:fixed;z-index:18;left:16px;bottom:16px;width:min(440px,calc(100% - 32px));opacity:0;transform:translateY(8px);
    transition:opacity .25s ease,transform .25s ease;pointer-events:none}
  .ck-ask .cookies.ck-show{opacity:1;transform:none;pointer-events:auto}
  .cookies .ck-in{flex-direction:column;align-items:stretch;box-shadow:0 8px 28px rgb(0 0 0/.3)}
  .cookies.ck-bw{left:auto;right:88px}   /* zgoda.js sets `bottom` (climbs until nothing main is under it) */
  .cookies.ck-low{left:16px;right:88px;width:auto}.cookies.ck-low .ck-in{flex-direction:row;gap:12px;padding:7px 10px 7px 14px}.cookies.ck-low .ck-t{display:none}
  .cookies.ck-low .ck-x{font-size:12.5px;line-height:1.35}.cookies.ck-low .ck-b .btn{min-width:124px;min-height:44px;padding:0 12px}}   /* low screens: as thin as a 44 px tap allows */
@media (prefers-reduced-motion:reduce){.ck-ask .cookies{transition:none;transform:none}}
@media (prefers-reduced-motion:reduce){.wa{transition:none}.hd{transition:none}.dusk,.seam{display:none}.st:not(:last-child)::before{transform:none}.card img{filter:none;transform:none}.kv .off,.glow,.lsw-k{transition:none}}

/* ---------- nothing is hidden until it scrolls into view (CEO 06.10 21:24 «халтура»: fast scrolling showed empty black boxes): content is
   always visible; only decorative lines still draw over it (the process rail) ---------- */
[data-io],[data-io].in{opacity:1;transform:none;transition:none}
.st .no,.rail.drawn .st .no{opacity:1}
.card img{filter:none;transform:none}