/* DASTAN BTP — układ i efekty 1:1 jak ERA Residence (Daniel 26.09: „1 do 1 jak u ERY, tylko z moimi nazwami i kolorami”).
   PALETA (brief 26.09 noc): baza = ciepła biel + jasny kamień; kontrast = głęboki grafit (sceny ciemne);
   błękit Morza Śródziemnego TYLKO w scenach Lazurowego Wybrzeża (tor poziomy, mapa wybrzeża);
   jeden materiałowy akcent = piaskowy brąz (zmienne --e-gold* zostały, żeby nie psuć nazw; to już brąz, nie złoto).
   Kroje: Noto Serif Display wąski (tytuły), Mrs Saint Delafield (pismo), Archivo szeroki (drobne napisy). */
:root{
  /* tła */
  --e-paper:#F4F1EB; --e-paper-rgb:244,241,235;          /* ciepła biel */
  --e-stone:#E6DFD3; --e-stone-rgb:230,223,211;          /* jasny kamień (zastąpił chłodne aluminium #D7DADD) */
  --e-alu:var(--e-stone);                                 /* stara nazwa, ta sama rola: drugi jasny plan */
  --e-graf:#1E2125; --e-graf-rgb:30,33,37; --e-graf-2:#16181B;   /* głęboki grafit: kurtyna, noc, wizyta, stopka, menu */
  /* tekst */
  --e-ink:#17191D; --e-ink-rgb:23,25,29; --e-ink-2:#57524A;      /* atrament i ciepła szarość drugiego planu */
  /* akcent: piaskowy brąz */
  --e-gold:#B08D57; --e-gold-l:#D6BC8F; --e-gold-d:#7E6238;      /* wypełnienia i linie / na ciemnym / tekst na jasnym */
  /* Lazurowe Wybrzeże */
  --e-sea:#2E6B87; --e-sea-d:#22546B; --e-mist:#E3E6E1;          /* linia brzegu, pinezki, słowo pisane / tło panelu mapy */
  --e-line:rgba(var(--e-ink-rgb),.16); --e-line-l:rgba(var(--e-paper-rgb),.24);
  --e-shade-rgb:14,16,19;                                         /* cień pod napisami na zdjęciach */
  --e-focus:0 0 0 2px var(--e-paper),0 0 0 4px var(--e-gold-d);  /* widoczny pierścień klawiatury */
  --e-t:'Noto Serif Display',Georgia,serif; --e-s:'Mrs Saint Delafield','Imperial Script','Great Vibes',cursive; --e-u:'Archivo','Barlow',system-ui,sans-serif;
  --u:calc(100vw / 1440); --uw:calc(100vw / 1440); --e-in:cubic-bezier(.5,0,.75,0); --e-out:cubic-bezier(.25,1,.5,1); --e-io:cubic-bezier(.75,0,.25,1);
}
/* polski i rosyjski: Mrs Saint Delafield nie ma ą ę ż ł ani cyrylicy (litery wypadały z innego, grubego kroju);
   całe słowo pisane jednym krojem, który ma te litery (Imperial Script / Great Vibes ładuje link fontów w index.html) */
html.era:lang(pl){--e-s:'Imperial Script','Great Vibes',cursive}
html.era:lang(ru){--e-s:'Great Vibes',cursive}
/* stałe łacińskie napisy marki („Paris & Côte d'Azur”, „Dastan”) zostają w kroju marki w każdym języku */
html.era .e-hero_s,html.era .e-pre_s,html.era .e-pre_decor,html.era .e-menu_t .e-s{font-family:'Mrs Saint Delafield','Imperial Script',cursive}
@media (max-width:991px){:root{--u:calc(100vw / 390)}}
/* 01.10 · dostrajanie do ekranu (Daniel: 18" laptop, 49", Macki): na komputerze jednostka z mniejszej z szerokości
   i wysokości — przy 1440×900 bez zmian, na laptopie 16:10 sekcja mieści się w oknie, na 49" (5120×1440) karta usługi
   nie ma już 1350 px wysokości. Pierwszy ekran liczył tak od 29.09 */
@media (min-width:992px){:root{--u:min(calc(100vw / 1440),calc(100vh / 900))}}
html.era{scrollbar-gutter:auto;background:var(--e-graf)}
html.era body{background:var(--e-paper);color:var(--e-ink);font-family:var(--e-u);font-variation-settings:'wdth' 100}
html.era ::selection{background:var(--e-gold);color:var(--e-graf)}
.e-t{font-family:var(--e-t);font-weight:400;font-variation-settings:'wdth' 62.5;text-transform:uppercase;line-height:.84;letter-spacing:-.005em}
.e-s{font-family:var(--e-s);font-weight:400;text-transform:none;letter-spacing:0;line-height:1}
.e-u{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:11px;line-height:1.5}
.e-p{font-family:var(--e-u);font-variation-settings:'wdth' 100;font-size:15px;line-height:1.55;color:var(--e-ink-2);max-width:34em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.split-char,.split-word{display:inline-block;will-change:transform,opacity}
.e-perspective{perspective:1200px}

/* ---------- nagłówek: SMUKŁY PASEK w jednej linii (Daniel: „pasek ma być smukły”, „kółko nie może zasłaniać treści”) ----------
   64 px (telefon 56 px), bez tła i bez ramki; na zdjęciach cichy cień od góry, na jasnych sekcjach atrament
   (klasa theme_on-light z era.js). Emblemat 42 px w lewym rogu, po prawej jedna linia: wizyta, wycena, kontakt,
   dwa numery (imię pod numerem — wymóg Daniela), menu, języki. Selektor html.era body>header bije stary motyw z <style>. */
html.era body>header.e-head{position:fixed;inset:0 0 auto 0;z-index:60;height:64px;display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0;padding:0 28px 0 26px;pointer-events:none;color:var(--e-paper);background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:color .5s var(--e-io)}
html.era body>header.e-head::before{content:'';display:block;position:absolute;left:0;right:0;top:0;height:120px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(var(--e-shade-rgb),.28),rgba(var(--e-shade-rgb),.08) 55%,rgba(var(--e-shade-rgb),0));opacity:1;transition:opacity .6s var(--e-io)}
html.era body>header.e-head::after{display:none}
html.era body>header.e-head.theme_on-light{color:var(--e-ink)}
html.era body>header.e-head.theme_on-light::before,html.era.e-menu-on body>header.e-head::before{opacity:0}
.e-head>*{pointer-events:auto}
.e-logo{position:relative;width:42px;height:42px;display:block;color:inherit;flex:none;border-radius:50%}
.e-logo svg{position:absolute;inset:0;width:100%;height:100%}
.e-logo .e-logo_rot{position:absolute;inset:0;display:block;transform-origin:50% 50%;will-change:transform}
.e-logo text{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:700;font-size:12.5px;letter-spacing:.22em;fill:currentColor}
html.era .e-head .e-nav{display:flex;flex-direction:row;align-items:center;gap:26px;margin:0;text-align:left;font:inherit;letter-spacing:normal;text-transform:none}
html.era .e-head .e-nav a,html.era .e-head .e-nav button{color:inherit;opacity:1;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
html.era .e-head .e-nav a:hover{color:inherit;opacity:1}
.e-nav_big{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-size:19px;line-height:1;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:2px!important}
.e-nav_sm{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.e-roll{position:relative;display:inline-grid;overflow:hidden;vertical-align:top;justify-items:start}
.e-roll>span{display:block;grid-area:1/1}
.e-roll>span+span{transform:translateY(100%)}   /* obie kopie w jednej komórce: szerokość = dłuższa („Menu” ↔ „Fermer” było ucięte) */
/* dwa telefony: numer wąskim-szerokim Archivo, imię drobnymi wersalikami pod spodem, cienka kreska między nimi;
   bez pigułek i ikon (stary motyw dawał czarno-złote kapsuły). Poniżej 1025 px zostaje słuchawka (niżej). */
html.era .e-head .e-nav a.htel{align-items:center;gap:0;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;color:inherit;white-space:nowrap;transition:opacity .3s}
html.era .e-head .e-nav a.htel:hover{background:none;box-shadow:none;color:inherit}
html.era .e-head a.htel .ic{display:none}
html.era .e-head a.htel .htel-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
html.era .e-head a.htel .nr{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:11px;line-height:1;letter-spacing:.07em;font-variant-numeric:tabular-nums;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color .3s}
html.era .e-head a.htel:hover .nr{text-decoration-color:currentColor}
html.era .e-head a.htel .kto{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:7.5px;line-height:1;letter-spacing:.28em;text-transform:uppercase;color:inherit;opacity:.62}
html.era .e-head a.htel+a.htel{position:relative;margin-left:-6px;padding-left:20px}
html.era .e-head a.htel+a.htel::before{content:'';position:absolute;left:0;top:50%;width:1px;height:24px;margin-top:-12px;background:currentColor;opacity:.28}
/* słuchawka (≤1024 px): cienkie kółko z rysunkiem słuchawki z maski SVG (znak ☏ z systemu wyglądał różnie na każdym telefonie) */
html.era .e-head .htel-btn{position:relative;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 38%,transparent);font-size:0;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
html.era .e-head .htel-btn>span{display:none}
html.era .e-head .htel-btn::before{content:'';position:absolute;inset:0;margin:auto;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M6.6 10.8a15.2 15.2 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
html.era .e-head .htel-btn:hover{box-shadow:inset 0 0 0 1px currentColor}
html.era .e-head .htel-btn[aria-expanded="true"]{background:var(--e-paper);color:var(--e-ink);box-shadow:inset 0 0 0 1px var(--e-paper)}
/* rozwijane numery: grafit z brązową nicią jak menu, wiersz = numer + imię, obok WhatsApp w cienkiej pigułce */
html.era .e-head .tel-wybor{position:absolute;right:14px;top:calc(100% + 2px);z-index:61;min-width:292px;margin:0;padding:4px 0;border-radius:0;background:var(--e-graf);color:var(--e-paper);box-shadow:0 0 0 1px color-mix(in srgb,var(--e-gold) 55%,transparent),0 34px 70px -34px rgba(0,0,0,.75);font:inherit;letter-spacing:normal;text-transform:none}
html.era .e-head .tel-wybor .tw-os{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:15px 16px 15px 18px;max-width:none}
html.era .e-head .tel-wybor .tw-os+.tw-os{border-top:1px solid var(--e-line-l)}
html.era .e-head .e-nav .tw-tel{display:flex;flex-direction:column;gap:6px;color:var(--e-paper);text-decoration:none}
html.era .e-head .tw-tel .nr{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:14px;line-height:1;letter-spacing:.06em;font-variant-numeric:tabular-nums}
html.era .e-head .tw-tel .kto{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:8.5px;line-height:1;letter-spacing:.26em;text-transform:uppercase;color:var(--e-gold-l);opacity:1}
html.era .e-head .e-nav .tw-wa{flex:none;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9px;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--e-paper);text-decoration:none;padding:11px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--e-line-l);transition:background .3s,color .3s,box-shadow .3s}
html.era .e-head .e-nav .tw-wa:hover{background:var(--e-paper);color:var(--e-ink);box-shadow:inset 0 0 0 1px var(--e-paper)}
/* języki: kolor dziedziczony (na jasnym tle aktywny język był biały i znikał), podkreślenie zamiast złotej kreski */
html.era .e-head .lang{display:flex;gap:2px;margin:0;padding-left:16px;border-left:1px solid color-mix(in srgb,currentColor 30%,transparent)}
html.era .e-head .lang button{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;line-height:1;letter-spacing:.14em;padding:5px 4px;min-width:0;min-height:0;color:inherit;opacity:.5;background:none;border:0;cursor:pointer;transition:opacity .3s}
html.era .e-head .lang button:hover{opacity:.9}
html.era .e-head .lang button[aria-pressed="true"]{opacity:1;color:inherit;border:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* klawiatura: widoczny pierścień w kolorze tekstu paska (działa na zdjęciu i na papierze) */
html.era .e-head a:focus-visible,html.era .e-head button:focus-visible{outline:1px solid currentColor;outline-offset:5px;border-radius:2px}
html.era .e-head .e-logo:focus-visible{outline-offset:3px;border-radius:50%}
/* ciasne szerokości: wycena i kontakt są w menu, więc chowamy je przed telefonami */
@media (max-width:1280px){html.era .e-head .e-nav .hide-m{display:none}}
.e-menu-btn{display:flex;align-items:center;gap:10px}
.e-menu-btn .e-roll{justify-items:end}   /* „Menu” przy kropkach, zapas szerokości na „Fermer” po lewej */
.e-menu-btn .e-plus{position:relative;width:12px;height:12px}
.e-menu-btn .e-plus i{position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor}
.e-menu-btn .e-plus i+i{transform:rotate(90deg)}

/* pasek przewijania po lewej: kreska, kciuk, procent */
.e-sbar{position:fixed;left:30px;top:50%;transform:translateY(-50%);z-index:55;height:34vh;width:18px;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--e-paper);mix-blend-mode:difference}
.e-sbar_lbl{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.1em}
.e-sbar_tr{position:relative;flex:1;width:1px;background:rgba(255,255,255,.35)}
/* kciuk mieści się w torze (0–100%); domyślnie k=0 — przed pierwszym przewinięciem nachodził na „00” (czytało się „op”) */
.e-sbar_th{position:absolute;left:-8px;width:17px;height:44px;top:calc(var(--progress,0%) - 44px * var(--k,0));cursor:grab;display:flex;justify-content:center}
.e-sbar_th::after{content:'';width:1px;height:100%;background:currentColor}

/* okrągły przycisk z łukiem (magnetyczny) */
.e-circ{position:relative;display:inline-grid;place-items:center;width:124px;height:124px;border-radius:50%;color:inherit;text-decoration:none;text-align:center;cursor:pointer;background:none;border:0}
.e-circ svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.e-circ circle{fill:none;stroke:currentColor;stroke-width:1;opacity:.35}
.e-circ .e-arc{opacity:1;stroke-width:1.2;transform:rotate(-90deg);transform-origin:50% 50%}
.e-circ span{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;line-height:1.45;max-width:9.5em;pointer-events:none}

/* ---------- kurtyna: grafit, pismo w tle, logo, postęp, łuk odsłaniający hero ---------- */
.e-pre{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden;--as:.24;--ay:104vh;color:var(--e-paper)}
.e-pre_arch{position:absolute;left:50%;top:0;width:100vw;height:calc(100vh + 200vw);transform-origin:50% 0;transform:translateX(-50%) translateY(var(--ay)) scale(var(--as));border-radius:50vw 50vw 0 0;box-shadow:0 0 0 450vmax var(--e-graf)}
.e-pre_decor{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);font-family:var(--e-s);font-size:calc(var(--u) * 420);line-height:1;white-space:nowrap;color:var(--e-paper);opacity:0;pointer-events:none}
.e-pre_decor span{opacity:.05}
.e-pre_emb{position:absolute;left:50%;top:44px;width:30px;height:30px;transform:translateX(-50%);color:var(--e-gold-l)}
.e-pre_logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center}
.e-pre_a{font-size:calc(var(--u) * 44);line-height:.9}
.e-pre_b{font-size:calc(var(--u) * 76);line-height:.84}
.e-pre_s{font-size:calc(var(--u) * 62);color:var(--e-gold-l);margin-top:calc(var(--u) * -18);transform:rotate(-6deg)}
.e-pre_side{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10.5px;letter-spacing:.62em;text-transform:uppercase}
.e-pre_side.l{left:9vw}.e-pre_side.r{right:9vw}
.e-pre_prog{position:absolute;left:50%;bottom:112px;width:1px;height:70px;overflow:hidden;background:rgba(var(--e-paper-rgb),.18)}
.e-pre_prog i{position:absolute;inset:0;background:var(--e-paper);transform:translateY(-100%)}
.e-pre_foot{position:absolute;left:0;right:0;bottom:40px;text-align:center;margin:0}
.e-pre_foot b,.e-pre_foot span{display:block}

/* ---------- HERO: pełny kadr, tytuł odjeżdża, zdjęcie stoi i wolno najeżdża; dzień / noc ---------- */
.e-hero{position:relative;height:250vh;background:var(--e-graf);color:var(--e-paper)}
.e-hero_st{position:sticky;top:0;height:100vh;overflow:hidden}
.e-hero_img{position:absolute;inset:0;transform-origin:50% 0}
.e-hero_tab{position:absolute;inset:0;opacity:0}
.e-hero_tab.is-on{opacity:1}
.e-hero_tab img,.e-hero_tab video{width:100%;height:100%;object-fit:cover;display:block}
/* cień nieba pod tytułem: tytuł, pismo i wiersz czytelne na jasnym niebie; dół lekko przyciemniony pod przycisk */
.e-hero_img::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--e-shade-rgb),.46) 0%,rgba(var(--e-shade-rgb),.24) 30%,rgba(var(--e-shade-rgb),.06) 52%,rgba(var(--e-shade-rgb),0) 64%,rgba(var(--e-shade-rgb),.26) 100%)}
/* blok tytułu mieści się w niebie nad dachem willi (≈41% wysokości kadru) na każdym ekranie: jednostka hero to
   mniejsza z szerokości i wysokości (na 1920×1080 i 1280×800 wiersz „de jour / de nuit” wchodził na dach) */
.e-hero_c{position:absolute;left:0;right:0;top:0;height:100vh;z-index:2;display:flex;flex-direction:column;align-items:center;padding-top:max(72px,calc(var(--u) * 78))}
@media (min-width:992px){.e-hero_c{--u:min(calc(100vw / 1440),calc(100vh / 900))}}
.e-hero_t{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--e-paper)}
.e-hero_a{font-size:calc(var(--u) * 156);line-height:.8;letter-spacing:.005em}
.e-hero_b{font-size:calc(var(--u) * 54);line-height:.9;letter-spacing:.32em;margin:calc(var(--u) * 5) 0 0 .32em}
/* pismo pod BTP, lekko zachodzi na jego stopkę (wcześniej zasłaniało całe BTP); padding daje miejsce na cień,
   bo GSAP odsłania napis przez clip-path i przycinał cień do prostokąta (widać było ciemne pudełko) */
.e-hero_s{font-size:calc(var(--u) * 84);color:var(--e-gold-l);padding:.32em .45em;margin:calc(var(--u) * -16 - .32em) -.45em -.32em calc(var(--u) * 280 - .45em);transform:rotate(-6deg);text-shadow:0 2px 20px rgba(var(--e-shade-rgb),.42)}
.e-hero_k{display:block;margin-top:calc(var(--u) * 4);font-size:10.5px}
.e-hero_row{position:relative;width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 calc(var(--u) * 150);margin-top:calc(var(--u) * 8)}
.e-hero_row>span{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;text-transform:uppercase;font-size:calc(var(--u) * 22);line-height:1;letter-spacing:.01em;text-shadow:0 1px 16px rgba(var(--e-shade-rgb),.35)}
.e-tabs{display:flex;align-items:center;gap:14px}
.e-tabs button{background:none;border:0;padding:4px 0;color:inherit;opacity:.45;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:opacity .4s}
.e-tabs button.is-on{opacity:1}
.e-tabs i{display:block;width:60px;height:1px;background:currentColor;opacity:.5;position:relative}
.e-tabs i::after{content:'';position:absolute;left:0;top:-1px;height:3px;width:50%;background:currentColor;transition:transform .8s var(--e-io)}
.e-tabs.nuit i::after{transform:translateX(100%)}
.e-hero_cta{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;color:var(--e-paper)}
/* plakietka „Image de synthèse”: lewy dolny róg kadru (prawy dół zajmuje przycisk pomocy), cicha i jednakowa wszędzie */
.e-vis{position:absolute;left:14px;right:auto;bottom:14px;z-index:3;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:8px;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--e-paper-rgb),.86);background:rgba(var(--e-graf-rgb),.34);padding:6px 8px 5px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.e-hero_st>.e-vis,.e-grow_img>.e-vis,.e-arch_st>.e-vis,.e-foot_img>.e-vis,.e-night_img>.e-vis{left:88px;bottom:26px}
.e-vis.dk{color:var(--e-ink-2);background:rgba(var(--e-paper-rgb),.7)}

/* ---------- koło z napisem po łuku (wjeżdża od dołu i zalewa ekran) ---------- */
.e-cs{position:relative;height:300vh;margin-top:-100vh;z-index:3;pointer-events:none}
.e-cs_st{position:sticky;top:0;height:100vh;overflow:hidden}
.e-cs_disc{position:absolute;left:50%;top:0;width:150vmax;height:150vmax;margin-left:-75vmax;border-radius:50%;background:var(--e-alu);transform:translateY(100vh);will-change:transform}
.e-cs.paper .e-cs_disc{background:var(--e-paper)}
.e-cs_arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.e-cs_arc text{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;text-transform:uppercase;font-size:34px;fill:var(--e-ink);letter-spacing:.02em}
.e-cs_in{position:absolute;left:0;right:0;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:var(--e-ink);opacity:0;pointer-events:auto}
.e-cs_in .e-emb{width:26px;height:26px;color:var(--e-gold-d)}
.e-cs_row{display:flex;gap:26px;align-items:center}
.e-cs_line{width:1px;height:18vh;background:var(--e-line);transform-origin:50% 0}
.e-cs_big{text-align:center;color:var(--e-ink)}
.e-cs_big .e-t{display:block;font-size:calc(var(--u) * 120)}
.e-cs_big .e-s{display:block;font-size:calc(var(--u) * 120);color:var(--e-ink);margin-top:calc(var(--u) * -10)}

/* ---------- powód 1: wielki tytuł, pasek zdjęcia rośnie na pełny ekran, cytat na zdjęciu ---------- */
.e-grow{position:relative;height:420vh;background:var(--e-alu);z-index:3}
.e-grow_st{position:sticky;top:0;height:100vh;overflow:hidden}
.e-grow_cap{position:absolute;left:0;right:0;top:15vh;text-align:center;color:var(--e-ink)}
.e-grow_t{position:absolute;left:0;right:0;top:24vh;text-align:center;font-size:calc(var(--u) * 150);color:var(--e-ink);white-space:nowrap}
.e-grow_img{position:absolute;inset:0;clip-path:inset(62% 41% 0% 41%);will-change:clip-path}
.e-grow_img img{width:100%;height:100%;object-fit:cover;transform:scale(1.35);transform-origin:50% 100%;will-change:transform}
.e-grow_img::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--e-shade-rgb),.55),rgba(var(--e-shade-rgb),0) 55%);opacity:var(--q,0)}
.e-grow_p{position:absolute;left:0;right:0;top:50vh;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.e-grow_p .e-p{max-width:30em;text-align:center}
.e-quote{position:absolute;left:calc(var(--u) * 120);right:calc(var(--u) * 120);bottom:12vh;color:var(--e-paper);display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.e-quote q{quotes:none;font-family:var(--e-t);font-variation-settings:'wdth' 62.5;text-transform:uppercase;font-size:calc(var(--u) * 44);line-height:.98;max-width:13em;display:block}
.e-quote small{margin-top:18px}

/* kwiaty (filmy z alfą), pływają warstwami */
.e-fl{position:absolute;z-index:4;pointer-events:none;width:calc(var(--u) * 560);aspect-ratio:1;will-change:transform}
.e-fl video,.e-fl img{width:100%;height:100%;object-fit:contain;display:block}

/* ---------- pozioma jazda: papier, akapit, wielki tytuł, zdjęcie, linia wybrzeża ---------- */
.e-hz{position:relative;background:var(--e-paper);z-index:4}
.e-hz_st{position:sticky;top:0;height:100vh;overflow:hidden}
.e-hz_tr{position:absolute;left:0;top:0;height:100%;display:flex;align-items:stretch;will-change:transform}
.e-hz_p{position:relative;flex:none;height:100%}
.e-hz_concept{width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center;padding:0 calc(var(--u) * 200)}
.e-hz_concept .e-t{font-size:calc(var(--u) * 46);line-height:1.14;max-width:21em}
.e-hz_concept .e-emb{width:22px;height:22px;color:var(--e-gold-d)}
.e-hz_title{width:calc(var(--uw) * 900);display:flex;flex-direction:column;justify-content:center;padding-left:calc(var(--u) * 80)}
.e-hz_title .e-t{font-size:calc(var(--u) * 190);line-height:.8;display:block;will-change:transform}
.e-hz_title .ln2{padding-left:calc(var(--u) * 190)}
.e-hz_title .ln3{padding-left:calc(var(--u) * 40)}
.e-hz_title .e-sp{position:absolute;left:calc(var(--u) * 20);top:50%;letter-spacing:.8em}
.e-hz_img{width:calc(var(--u) * 470);display:flex;align-items:center}
.e-hz_img figure{margin:0;position:relative;width:100%;height:84vh;overflow:hidden;clip-path:inset(0 100% 0 0)}
.e-hz_img img{width:100%;height:100%;object-fit:cover}
.e-hz_txt{width:calc(var(--u) * 560);display:flex;flex-direction:column;justify-content:flex-end;padding:0 calc(var(--u) * 60) 12vh;gap:14px}
.e-hz_txt .e-t{font-size:calc(var(--u) * 30)}
.e-hz_btn{width:calc(var(--u) * 360);display:flex;align-items:center;justify-content:center}
/* Lazurowe Wybrzeże: po lewej tytuł, po prawej PRAWDZIWA mapa wybrzeża (OpenStreetMap, 1000×941, brzeg biegnie
   z południowego zachodu na północny wschód). Ląd w kolorze papieru panelu, morze w mgle morskiej wygaszonej ku
   krawędziom (bez twardego prostokąta), linia brzegu w błękicie — jedyne miejsce z błękitem na stronie. */
.e-hz_coast{width:calc(var(--uw) * 1500);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:calc(var(--u) * 90);padding:0 calc(var(--u) * 80)}
.e-hz_coast .e-cttl{flex:none;text-align:left;margin:0}
.e-hz_coast .e-cttl .e-t{display:block;font-size:calc(var(--u) * 84);white-space:nowrap}
.e-hz_coast .e-cttl .e-s{display:block;font-size:calc(var(--u) * 96);color:var(--e-sea);margin:calc(var(--u) * -30) 0 calc(var(--u) * -26) calc(var(--u) * 70)}
.e-map{position:relative;flex:none;width:min(calc(72vh * 1000 / 941),calc(var(--u) * 820))}
.e-map_in{position:relative;width:100%;aspect-ratio:1000/941}
/* morze: mgła na całym polu mapy, wygaszona ku krawędziom; ląd (wielokąt w kolorze papieru) odcina ją dokładnie po linii brzegu */
.e-map_in::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--e-mist);-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.e-map svg{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}
.e-map path{stroke:none}
.e-map .e-map_lad{fill:var(--e-paper)}
.e-map .e-map_wyspa{fill:var(--e-paper);stroke:var(--e-sea);stroke-width:1.2}
.e-map .e-map_brzeg{fill:none;stroke:var(--e-sea);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
/* pinezka: punkt zaczepienia 0×0 dokładnie w miejscu miasta — kropka w punkcie, podpis nad nią (na lądzie, tło papieru).
   Monaco i Menton leżą blisko: Monaco podpisane w dół-prawo (na morzu, tło mgły; w dół-lewo wchodziło na Niceę), Menton w górę-prawo. */
.e-map .e-pin{position:absolute;z-index:2;width:0;height:0;transform:none;display:block;text-align:center;white-space:nowrap}
.e-map .e-pin b{position:absolute;left:0;bottom:29px;transform:translateX(-50%);font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:700;font-size:9px;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--e-ink);background:var(--e-paper);padding:3px 4px 2px 6px}
.e-map .e-pin small{position:absolute;left:0;bottom:12px;transform:translateX(-50%);font-family:var(--e-u);font-size:9.5px;line-height:1;letter-spacing:.04em;color:var(--e-ink-2);background:var(--e-paper);padding:2px 5px 3px}
.e-map .e-pin i{position:absolute;left:-3.5px;top:-3.5px;width:7px;height:7px;border-radius:50%;background:var(--e-sea);box-shadow:0 0 0 3px var(--e-paper)}
.e-map .e-pin i::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--e-sea);animation:e-puls 2.4s var(--e-in) infinite}
.e-map .e-pin:nth-of-type(4) b{bottom:auto;top:10px;left:8px;transform:none;background:var(--e-mist)}
.e-map .e-pin:nth-of-type(4) small{bottom:auto;top:27px;left:8px;transform:none;background:var(--e-mist)}
.e-map .e-pin:nth-of-type(5) b{left:4px;transform:none}
.e-map .e-pin:nth-of-type(5) small{left:4px;transform:none}
/* róża wiatrów: emblemat DASTAN w dolnym prawym rogu, brąz */
.e-map_roza{position:absolute;z-index:2;right:5%;bottom:7%;width:46px;height:46px;color:var(--e-gold);opacity:.9}
.e-map_roza svg{display:block;width:100%;height:100%}
/* atrybucja OpenStreetMap: musi być widoczna — drobna, wyciszona, pod mapą z prawej */
.e-map_osm{position:absolute;right:0;top:100%;margin-top:10px;font-family:var(--e-u);font-size:9px;line-height:1.3;letter-spacing:.04em;color:var(--e-ink-2);opacity:.8;white-space:nowrap}
.e-map_osm a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
@keyframes e-puls{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}

/* ---------- chmury → film budowy (od pierwszej kreski do kluczy) ---------- */
.e-film{position:relative;height:720vh;background:var(--e-stone);z-index:4}
.e-film_st{position:sticky;top:0;height:100vh;overflow:hidden}
.e-film canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.e-film_cl{position:absolute;left:-10%;right:-10%;height:110vh;pointer-events:none;will-change:transform}
.e-film_cl img{width:100%;height:100%;object-fit:cover}
.e-film_cl.c1{top:0}.e-film_cl.c2{top:0}
.e-film_h{position:absolute;left:0;right:0;top:8vh;text-align:center;color:var(--e-ink);z-index:3}
.e-film_h .e-t{display:block;font-size:calc(var(--u) * 96)}
.e-film_h .e-s{display:block;font-size:calc(var(--u) * 90);color:var(--e-gold-d);margin-top:calc(var(--u) * -26)}
.e-film_ph{position:absolute;left:calc(var(--u) * 110);bottom:9vh;z-index:3;color:var(--e-paper);max-width:26em;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.e-film_ph .e-n{display:block;margin-bottom:10px}
.e-film_ph .e-t{display:block;font-size:calc(var(--u) * 64);line-height:.9}
.e-film_ph p{margin:12px 0 0;font-size:15px;line-height:1.5;max-width:26em;color:rgba(var(--e-paper-rgb),.9)}
.e-film_ph.ink{color:var(--e-ink);text-shadow:none}.e-film_ph.ink p{color:var(--e-ink-2)}
.e-film_cr{position:absolute;right:24px;bottom:22px;z-index:3;max-width:40em;text-align:right;font-size:10px;letter-spacing:.06em;color:rgba(var(--e-paper-rgb),.8);text-shadow:0 1px 8px rgba(0,0,0,.4)}
.e-film_pr{position:absolute;left:50%;bottom:4vh;transform:translateX(-50%);z-index:3;display:flex;gap:6px}
.e-film_pr i{width:26px;height:2px;background:rgba(var(--e-paper-rgb),.35);position:relative;overflow:hidden}
.e-film_pr i b{position:absolute;inset:0;background:var(--e-gold-l);transform:scaleX(0);transform-origin:0 50%}

/* ---------- 16 corps d'état: karuzela kart (przeciągnij / strzałki), tytuł wielki ---------- */
html.era .metiers{position:relative;background:var(--e-alu);color:var(--e-ink);padding:18vh 0 14vh;z-index:4;overflow:hidden}
html.era .metiers .wrap{max-width:none;padding:0}
.e-sec-h{text-align:center;padding:0 24px}
.e-sec-h .e-u{color:var(--e-ink-2)}
/* 01.10 · P04 z QA: kolumna nagłówka ma stałe 1192 px, więc rozmiar rośnie z ekranem tylko do 130 px (inaczej od 1680 px
   „Seize corps / d'état” na dwie linie, akcent É w literach nad nim, „g” z podpisu w akapicie) */
.e-sec-h h2{font-size:min(calc(var(--u) * 130),130px);margin:16px 0 0;text-transform:uppercase}
/* P05: tytuł z <em> nie jest liściem, więc złoto (tło przycięte do liter) nie sięgało akcentów É, Ś, Ż; zapas u góry bez zmiany układu */
html.era .e-sec-h h2.e-t{padding-top:.18em;margin-top:calc(16px - .18em)}
html.era .e-sec-h h2 em{padding-bottom:.2em}
.e-sec-h h2 em{font-family:var(--e-s);font-style:normal;text-transform:none;color:var(--e-gold-d);font-variation-settings:normal;display:block;font-size:.8em;line-height:.7;margin-top:-.05em}
html.era .metiers .note-vis{text-align:center;margin:18px auto 0;max-width:40em;font-size:13.5px;color:var(--e-ink-2)}
.e-kar{position:relative;margin-top:8vh}
html.era #tiles{display:flex!important;gap:calc(var(--u) * 26);padding:0 calc(var(--u) * 120) 8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;grid-template-columns:none!important}
html.era #tiles::-webkit-scrollbar{display:none}
html.era #tiles.drag{cursor:grabbing;scroll-snap-type:none}
html.era #tiles .tile{flex:none;width:calc(var(--u) * 380);min-width:250px;scroll-snap-align:start;background:var(--e-paper);border:0;border-radius:0;padding:14px 14px 18px;text-align:left;color:var(--e-ink);display:flex;flex-direction:column;gap:14px;transition:transform .6s var(--e-out),box-shadow .6s var(--e-out);box-shadow:0 0 0 1px rgba(var(--e-ink-rgb),.06);aspect-ratio:auto;height:auto;overflow:visible;position:relative}
html.era #tiles .tile:hover{transform:translateY(-6px);box-shadow:0 22px 50px -24px rgba(var(--e-ink-rgb),.35)}
html.era #tiles .tile img{position:static;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;filter:none;transform:none;opacity:1}
html.era #tiles .tile .t{position:static;padding:0;background:none;display:flex;flex-direction:column;gap:6px;color:var(--e-ink)}
html.era #tiles .tile .t b{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;text-transform:uppercase;font-size:30px;line-height:.95;color:var(--e-ink)}
html.era #tiles .tile .t span{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--e-ink-2)}
html.era #tiles .tile .kod{font-style:normal;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:700;font-size:9.5px;letter-spacing:.2em;color:var(--e-gold-d)}
html.era #tiles .tile .vis-badge{position:absolute;left:22px;top:22px;z-index:1}
.e-kar_nav{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:5vh}
.e-kar_nav button{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--e-line);background:none;color:var(--e-ink);cursor:pointer;font-size:16px;transition:background .3s,color .3s}
.e-kar_nav button:hover{background:var(--e-ink);color:var(--e-paper)}
.e-kar_nav .e-kar_n{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:700;font-size:11px;letter-spacing:.14em;min-width:5.5em;text-align:center}
.e-kar_bar{width:180px;height:1px;background:var(--e-line);position:relative}
.e-kar_bar i{position:absolute;left:0;top:-1px;height:3px;background:var(--e-ink);width:10%;transition:transform .5s var(--e-out)}

/* ---------- noc: pełny kadr wjeżdża od dołu, lista sześciu kroków, cytat ---------- */
html.era .process{position:relative;height:auto;min-height:100vh;padding:0;background:var(--e-graf);color:var(--e-paper);z-index:4;overflow:hidden}
html.era .process .wrap{max-width:none;padding:0}
.e-night{position:relative;min-height:120vh}
.e-night_img{position:absolute;inset:0;overflow:hidden}
.e-night_img img{width:100%;height:120%;object-fit:cover;will-change:transform}
.e-night_img::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--e-shade-rgb),.1) 30%,rgba(var(--e-shade-rgb),.62)),linear-gradient(0deg,rgba(var(--e-shade-rgb),.6),rgba(var(--e-shade-rgb),0) 45%)}
.e-night_c{position:relative;z-index:2;min-height:120vh;display:grid;grid-template-columns:1fr minmax(320px,34vw);gap:4vw;padding:22vh calc(var(--u) * 110) 12vh}
.e-night_c .e-u{color:var(--e-gold-l)}
html.era #steps{display:flex!important;flex-direction:column;gap:0;counter-reset:st;grid-template-columns:none!important;margin-top:16px}
html.era #steps>div{display:grid;grid-template-columns:3.4em 1fr;align-items:baseline;border:0;border-top:1px solid var(--e-line-l);padding:12px 0 12px;background:none;min-height:0}
html.era #steps>div:last-child{border-bottom:1px solid var(--e-line-l)}
html.era #steps .n{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:700;font-size:10px;letter-spacing:.14em;color:var(--e-gold-l)}
html.era #steps b{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;text-transform:uppercase;font-size:clamp(26px,calc(var(--u) * 40),46px);line-height:.95;color:var(--e-paper)}
html.era #steps p{grid-column:2;margin:6px 0 0;font-size:13.5px;line-height:1.45;color:rgba(var(--e-paper-rgb),.78);max-width:30em}
.e-night_q{align-self:end;max-width:32em}
.e-night_q .e-t{display:block;font-size:calc(var(--u) * 50);line-height:.96}
.e-night_q p{color:rgba(var(--e-paper-rgb),.84);font-size:15px;line-height:1.55;margin:16px 0 0}

/* ---------- kolaż: grafitowe ramy, kwiaty, detal, opcje ---------- */
.e-col{position:relative;background:var(--e-paper);padding:14vh 0 18vh;z-index:4;overflow:hidden;min-height:180vh}
.e-col_fr{position:absolute;background:var(--e-graf);overflow:hidden}
.e-col_fr img{position:absolute;object-fit:cover}
.e-col_img{position:absolute;overflow:hidden}
.e-col_img img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)}
.e-col_txt{position:relative;margin-left:calc(var(--u) * 560);max-width:calc(var(--u) * 560);padding-top:62vh}
.e-col_txt .e-t{font-size:calc(var(--u) * 40);line-height:1}
.e-col_txt .e-p{margin-top:22px}
.e-col_opt{margin-top:28px;display:flex;flex-direction:column;gap:6px}
.e-col_opt b{display:block;margin-bottom:6px}
.e-col_opt span{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--e-ink-2)}
.e-col_btn{position:absolute;right:calc(var(--u) * 190);top:64vh}

/* wnętrze wjeżdża pod skosem i prostuje się */
.e-int{position:relative;background:var(--e-paper);height:220vh;z-index:4}
.e-int_st{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1400px}
.e-int_img{position:absolute;left:50%;top:50%;width:calc(var(--u) * 820);aspect-ratio:3/2;overflow:hidden;transform-origin:50% 50%;will-change:transform}
.e-int_img img{width:100%;height:100%;object-fit:cover}
.e-int_cap{position:absolute;left:calc(var(--u) * 110);top:16vh;max-width:22em;z-index:2}
.e-int_cap .e-t{font-size:calc(var(--u) * 34);line-height:1}

/* dwa kadry łączą się w jeden i rosną na pełny ekran z wielkim napisem */
.e-arch{position:relative;background:var(--e-paper);height:400vh;z-index:4}
.e-arch_st{position:sticky;top:0;height:100vh;overflow:hidden}
.e-arch_a,.e-arch_b{position:absolute;overflow:hidden;will-change:clip-path,transform}
.e-arch_a{inset:0;clip-path:inset(30% 50.5% 14% 18%)}
.e-arch_b{inset:0;clip-path:inset(18% 22% 26% 50.5%)}
.e-arch_a img,.e-arch_b img{width:100%;height:100%;object-fit:cover}
.e-arch_t{position:absolute;left:0;right:0;top:calc(64px + 4vh);text-align:center;color:var(--e-paper);font-size:calc(var(--u) * 232);line-height:.82;z-index:3;white-space:nowrap;text-shadow:0 4px 40px rgba(0,0,0,.18)}
.e-arch_p{position:absolute;left:calc(var(--u) * 120);bottom:11vh;z-index:3;color:var(--e-paper);max-width:32em;text-shadow:0 1px 22px rgba(var(--e-shade-rgb),.42)}
.e-arch_p .e-t{font-size:calc(var(--u) * 40);line-height:1}
.e-arch_p .e-u{display:block;margin-top:16px;color:var(--e-gold-l)}

/* rejestr firmy: wielkie litery, kwiaty */
.e-reg{position:relative;background:var(--e-paper);padding:22vh 24px 22vh;text-align:center;z-index:4;overflow:hidden}
.e-reg .e-u{color:var(--e-ink-2)}
/* 104u: „IMMATRICULÉE DEPUIS 2015” mieści się w jednej linii na 1440 (przy 120u wychodziło za ekran) */
.e-reg .e-t{display:block;font-size:calc(var(--u) * 104);line-height:.98;margin:18px auto 0;max-width:13em;text-wrap:balance}
/* „Maisons-Alfort” pod tytułem, przesunięte w prawo: nie przekreśla już roku 2015 */
.e-reg .e-s{display:block;font-size:calc(var(--u) * 100);color:var(--e-ink);margin:calc(var(--u) * -2) 0 0 calc(var(--u) * 260)}
.e-reg p{margin:28px auto 0;max-width:40em;font-size:14px;line-height:1.6;color:var(--e-ink-2)}

/* ---------- sekcje z danymi (projekty, galeria, wycena, rezerwacja, kontakt): typografia ERA ---------- */
html.era main>section.light,html.era main>section.galerie,html.era main>section.rdv,html.era main>section.anat{position:relative;z-index:4}
html.era .projets,html.era .galerie,html.era .avap,html.era .estim,html.era .contact,html.era .anat,html.era .rdv{padding:16vh 0 14vh}
html.era .projets,html.era .estim,html.era .contact{background:var(--e-paper);color:var(--e-ink)}
html.era .galerie,html.era .anat{background:var(--e-alu);color:var(--e-ink)}
html.era .rdv{background:var(--e-graf);color:var(--e-paper)}
html.era main>section>.wrap>.lbl{display:block;text-align:center;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10.5px;letter-spacing:.2em;color:var(--e-ink-2)}
html.era .rdv>.wrap>.lbl{color:var(--e-gold-l)}
html.era main>section:not(.e-x)>.wrap>h2{font-family:var(--e-t);font-weight:400;font-variation-settings:'wdth' 62.5;text-transform:uppercase;text-align:center;font-size:calc(var(--u) * 110);line-height:.84;margin:16px auto 0!important;max-width:14em;letter-spacing:0}
html.era main>section>.wrap>h2 em{font-family:var(--e-s);font-style:normal;text-transform:none;color:inherit;font-variation-settings:normal;display:block;font-size:.8em;line-height:.75}
html.era .rdv>.wrap>h2 em{color:var(--e-gold-l)}
html.era main>section .note-vis,html.era .es-intro,html.era .rdv-intro{text-align:center;margin-left:auto;margin-right:auto;max-width:44em}
html.era .projs .proj{border-top:1px solid var(--e-line)}
html.era .proj .info b{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;text-transform:uppercase}
html.era .pill{border-radius:999px;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;letter-spacing:.18em}
html.era .ph,html.era .cmp{border-radius:0}

/* ---------- stopka: ostatni kadr zamyka się w okno, pod nim grafit z numerem ---------- */
.e-foot{position:relative;background:var(--e-graf);color:var(--e-paper);z-index:4}
.e-foot_img{position:sticky;top:0;height:100vh;overflow:hidden;z-index:1}
.e-foot_img img{width:100%;height:100%;object-fit:cover}
.e-foot_s{position:relative;z-index:2;margin-top:-100vh;height:200vh}
.e-foot_in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;opacity:0}
.e-foot_in .e-emb{width:26px;height:26px;color:var(--e-gold-l)}
.e-foot_tel{font-size:calc(var(--u) * 150);color:var(--e-paper);text-decoration:none;line-height:.84;display:block}
.e-foot_in .e-u{color:rgba(var(--e-paper-rgb),.8)}
.e-foot_in .e-p{color:rgba(var(--e-paper-rgb),.7);text-align:center;max-width:36em}
.e-foot_row{position:absolute;left:calc(var(--u) * 110);right:calc(var(--u) * 110);bottom:30px;display:flex;justify-content:space-between;gap:24px;text-align:left;font-size:10.5px;letter-spacing:.08em;line-height:1.6;color:rgba(var(--e-paper-rgb),.68)}
.e-foot_row a{color:inherit}
.e-foot_row b{color:var(--e-paper);font-family:var(--e-u);font-variation-settings:'wdth' 125;letter-spacing:.14em;text-transform:uppercase;font-size:10px}
.e-foot2{display:flex;gap:30px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.e-foot2 a{color:var(--e-paper);text-decoration:none;font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-size:calc(var(--u) * 34);text-transform:uppercase}
.e-foot2 small{display:block;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.2em;color:var(--e-gold-l)}

/* ---------- menu (ukryte, pełny ekran) ---------- */
.e-menu{position:fixed;inset:0;z-index:58;display:none}
.e-menu_ov{position:absolute;inset:0;background:rgba(var(--e-shade-rgb),.55);backdrop-filter:blur(3px);opacity:0}
.e-menu_c{position:absolute;inset:0;background:var(--e-graf);color:var(--e-paper);display:grid;grid-template-columns:1fr 1fr;padding:18vh calc(var(--u) * 150) 8vh;clip-path:inset(0 0 100% 0)}
.e-menu_l{display:flex;flex-direction:column;gap:.4vh}
.e-menu_l a{color:var(--e-paper);text-decoration:none;font-family:var(--e-t);font-variation-settings:'wdth' 62.5;text-transform:uppercase;font-size:clamp(34px,calc(var(--u) * 64),78px);line-height:.98;display:flex;align-items:baseline;gap:18px;transition:color .3s}
.e-menu_l a small{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:700;font-size:10px;letter-spacing:.18em;color:var(--e-gold-l);min-width:3em}
.e-menu_l a:hover{color:var(--e-gold-l)}
.e-menu_r{display:flex;flex-direction:column;justify-content:flex-end;gap:26px;padding-left:4vw;border-left:1px solid var(--e-line-l)}
.e-menu_r .e-s{font-size:clamp(46px,calc(var(--u) * 80),96px);color:var(--e-gold-l);line-height:.8}
.e-menu_r a{color:var(--e-paper)}
.e-menu_r dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:13.5px}
.e-menu_r dt{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--e-paper-rgb),.55);padding-top:3px}
.e-menu_r dd{margin:0}
html.e-menu-on .e-head{color:var(--e-paper)!important}

/* okno usługi: karta wlatuje pod kątem jak „Book a call” w ERA */
html.era .panel{position:fixed;left:50%;top:50%;right:auto;bottom:auto;width:min(1080px,92vw);max-height:86vh;transform:translate(-50%,-50%) rotate(-7deg) translateY(-30vh);opacity:0;border-radius:0;background:var(--e-alu);color:var(--e-ink);box-shadow:0 40px 120px -40px rgba(0,0,0,.6);transition:none;display:flex;flex-direction:column;visibility:hidden}
html.era body.open .panel{visibility:visible}
html.era .panel .pb h3{font-family:var(--e-s);font-weight:400;text-transform:none;font-size:clamp(44px,5vw,72px);line-height:.9;color:var(--e-ink)}
html.era .panel .lbl{color:var(--e-gold-d)}
html.era .shade{background:rgba(var(--e-shade-rgb),.5)}

/* ---------- telefon ---------- */
@media (max-width:991px){
  /* pasek na telefonie: 56 px, emblemat 38 px, słuchawka i MENU (linki ≤600 px chowa stary motyw: nav > a) */
  html.era body>header.e-head{height:56px;padding:0 14px 0 14px;gap:14px}
  html.era body>header.e-head::before{height:104px}
  .e-logo{width:38px;height:38px}
  html.era .e-head .e-nav{gap:16px}
  .e-nav_big{font-size:15px}
  html.era .e-head .e-nav .hide-m,html.era .e-head .lang{display:none}
  .e-sbar{display:none}
  .e-pre_side{letter-spacing:.4em;font-size:9px}
  .e-pre_side.l{left:5vw}.e-pre_side.r{right:5vw}
  .e-pre_a{font-size:30px}.e-pre_b{font-size:54px}.e-pre_s{font-size:44px;margin-top:-10px}
  .e-hero{height:200vh}
  .e-hero_c{padding-top:120px}
  .e-hero_a{font-size:44px}.e-hero_b{font-size:84px}.e-hero_s{font-size:52px;margin-left:30px;margin-top:-12px}
  .e-hero_row{flex-direction:column;gap:14px;padding:0 20px;margin-top:22px}
  .e-hero_row>span{font-size:17px}
  .e-hero_cta{bottom:24px;width:108px;height:108px}
  .e-cs_arc text{font-size:40px}
  .e-cs_big .e-t,.e-cs_big .e-s{font-size:64px}
  .e-grow_t{font-size:58px;top:22vh;white-space:normal;padding:0 16px}
  .e-grow_img{clip-path:inset(66% 30% 0% 30%)}
  .e-quote{left:20px;right:20px;bottom:9vh}
  .e-quote q{font-size:28px}
  .e-fl{width:62vw}
  .e-hz{height:auto!important}
  .e-hz_st{position:relative;height:auto;overflow:visible}
  .e-hz_tr{position:relative;flex-direction:column;transform:none!important}
  .e-hz_p{height:auto;width:100%!important;padding:10vh 20px!important}
  .e-hz_concept .e-t{font-size:26px}
  .e-hz_title .e-t{font-size:78px}
  .e-hz_title .ln2{padding-left:60px}
  .e-hz_title .e-sp{position:static;margin-top:10px}
  .e-hz_img figure{height:70vh;clip-path:none}
  .e-hz_txt .e-t{font-size:24px}
  .e-hz_coast{flex-direction:column;align-items:stretch;gap:34px}
  .e-hz_coast .e-cttl{max-width:none;text-align:center}
  .e-hz_coast .e-cttl .e-t{font-size:48px}.e-hz_coast .e-cttl .e-s{font-size:52px;margin:-14px 0 -12px}
  .e-map{width:100%;margin-bottom:22px}
  .e-map .e-map_brzeg{stroke-width:3}
  .e-map .e-pin b{font-size:8px;letter-spacing:.16em;bottom:25px}
  .e-map .e-pin small{display:none}
  .e-map .e-pin:nth-of-type(4) b{left:0;transform:translateX(-50%);top:9px}
  .e-map .e-pin:nth-of-type(5) b{left:auto;right:6px;bottom:10px}
  .e-map_roza{width:34px;height:34px}
  .e-film{height:560vh}
  .e-film_h .e-t{font-size:44px}.e-film_h .e-s{font-size:46px;margin-top:-12px}
  .e-film_ph{left:20px;right:20px;bottom:12vh}
  .e-film_ph .e-t{font-size:40px}
  .e-film_cr{left:16px;right:16px;bottom:10px;text-align:left;font-size:9px}
  .e-sec-h h2{font-size:58px}
  html.era #tiles{padding:0 20px 8px}
  html.era #tiles .tile{width:78vw}
  .e-night_c{grid-template-columns:1fr;padding:16vh 20px 10vh}
  .e-night_q .e-t{font-size:28px}
  .e-col{min-height:0;padding:10vh 20px}
  .e-col_fr,.e-col_img{position:relative!important;left:auto!important;top:auto!important;right:auto!important;width:100%!important;height:52vh!important;margin-bottom:20px}
  .e-col_txt{margin:0;max-width:none;padding-top:4vh}
  .e-col_txt .e-t{font-size:26px}
  .e-col_btn{position:static;margin-top:30px}
  .e-int{height:auto}.e-int_st{position:relative;height:auto;padding:8vh 20px}
  .e-int_img{position:relative;left:auto;top:auto;width:100%;transform:none!important}
  .e-int_cap{position:static;margin-top:20px}
  .e-arch{height:260vh}
  .e-arch_a{clip-path:inset(34% 50.5% 20% 6%)}.e-arch_b{clip-path:inset(24% 6% 30% 50.5%)}
  .e-arch_t{font-size:64px;top:9vh}
  .e-arch_p{left:20px;right:20px}
  .e-arch_p .e-t{font-size:24px}
  .e-reg .e-t{font-size:56px}.e-reg .e-s{font-size:56px;margin-top:-8px}
  html.era main>section:not(.e-x)>.wrap>h2{font-size:52px}
  .e-foot_tel{font-size:54px}
  .e-foot_row{flex-direction:column;left:20px;right:20px;bottom:20px;gap:8px}
  .e-foot2 a{font-size:24px}
  .e-menu_c{grid-template-columns:1fr;padding:14vh 22px 6vh;overflow-y:auto}
  .e-menu_r{border-left:0;padding-left:0;border-top:1px solid var(--e-line-l);padding-top:22px;margin-top:22px}
}

/* ---------- ograniczony ruch: wszystko od razu, bez przypięć ---------- */
@media (prefers-reduced-motion:reduce){
  html:not(.ruch-wymuszony) .e-pre{display:none!important}
  html:not(.ruch-wymuszony) .e-hero,html:not(.ruch-wymuszony) .e-grow,html:not(.ruch-wymuszony) .e-film,html:not(.ruch-wymuszony) .e-int,html:not(.ruch-wymuszony) .e-arch,html:not(.ruch-wymuszony) .e-cs{height:auto!important}
  html:not(.ruch-wymuszony) .e-cs{display:none}
  html:not(.ruch-wymuszony) .e-hero_st,html:not(.ruch-wymuszony) .e-grow_st,html:not(.ruch-wymuszony) .e-film_st,html:not(.ruch-wymuszony) .e-int_st,html:not(.ruch-wymuszony) .e-arch_st{position:relative;height:100vh}
  html:not(.ruch-wymuszony) .e-grow_img{clip-path:none!important}html:not(.ruch-wymuszony) .e-grow_img img{transform:none!important}
  html:not(.ruch-wymuszony) .e-arch_a{clip-path:inset(0 50% 0 0)!important}html:not(.ruch-wymuszony) .e-arch_b{clip-path:inset(0 0 0 50%)!important}
  html:not(.ruch-wymuszony) .e-hz_img figure{clip-path:none!important}
  html:not(.ruch-wymuszony) .e-foot_in{opacity:1!important}
}
html.era.bez-ruchu .e-pre{display:none}

/* ---------- zgodność ze starym motywem grafitowym (nagłówek, horyzonty, sekcje z danymi na jasnym tle) ---------- */
html.era main > section + section::before{display:none}
html.era section .wrap > .lbl::before{display:none}
html.era .estim,html.era .contact,html.era .projets,html.era .galerie,html.era .anat,html.era .avap,html.era .metiers,html.era .e-reg,html.era .e-col{
  --pt-tekst:var(--e-ink);--pt-muted:var(--e-ink-2);--pt-cichy:var(--e-ink-2);--pt-line:rgba(var(--e-ink-rgb),.14);--pt-pole:rgba(var(--e-ink-rgb),.22);
  --pt-gold:var(--e-gold-d);--pt-gold-hi:var(--e-gold-d);--szklo-tlo:rgba(255,255,255,.62);--szklo-brzeg:rgba(var(--e-ink-rgb),.1);--szklo:rgba(255,255,255,.5);
  --szklo-mocne:rgba(255,255,255,.8);--cien-szkla:0 30px 70px -48px rgba(var(--e-ink-rgb),.45);--szklo-blask:none;color:var(--e-ink)}
html.era .estim{background:var(--e-paper)}html.era .contact{background:var(--e-paper)}html.era .projets{background:var(--e-paper)}
html.era .galerie,html.era .anat{background:var(--e-alu)}html.era .avap{background:var(--e-paper)}
html.era .estim h2,html.era .contact h2,html.era .projets h2,html.era .galerie h2,html.era .anat h2,html.era .avap h2,html.era .metiers h2,html.era .e-reg h2,html.era .e-col h2{color:var(--e-ink)}
html.era .rdv h2{color:var(--e-paper)}
html.era .es-f select,html.era .es-f input,html.era .es-sel-v{background:rgba(255,255,255,.75);color:var(--e-ink);border-color:rgba(var(--e-ink-rgb),.2)}
html.era .es-f select option,html.era .contact select option{background:#fff;color:var(--e-ink)}
html.era .es-form,html.era .es-out,html.era .es-why,html.era .contact form,html.era .contact .grid>div{border-radius:0;background:rgba(255,255,255,.55);border:1px solid rgba(var(--e-ink-rgb),.1);box-shadow:none}
html.era .es-form:hover,html.era .es-out:hover,html.era .es-why:hover,html.era .contact form:hover,html.era .contact .grid>div:hover,html.era .contact form:focus-within{border-color:rgba(var(--e-ink-rgb),.28);box-shadow:0 30px 70px -48px rgba(var(--e-ink-rgb),.45)}
html.era .es-range{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;color:var(--e-ink)}
html.era .es-why h3,html.era .es-rates summary{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;text-transform:uppercase;letter-spacing:0}
html.era .pill,html.era .light .pill,html.era .contact .pill{color:var(--e-ink);border-color:rgba(var(--e-ink-rgb),.35);background:transparent}
html.era .pill:hover,html.era .light .pill:hover,html.era .contact .pill:hover{background:var(--e-ink);color:var(--e-paper);border-color:var(--e-ink)}
html.era .pill.solid,html.era .contact .pill.solid,html.era .light .pill.solid,html.era .es-form .pill.solid{background:var(--e-ink);border-color:var(--e-ink);color:var(--e-paper);box-shadow:none}
html.era .pill.solid:hover,html.era .contact .pill.solid:hover,html.era .light .pill.solid:hover,html.era .es-form .pill.solid:hover{background:var(--e-gold-d);border-color:var(--e-gold-d);color:#fff}
html.era .rdv .pill{color:var(--e-paper);border-color:rgba(var(--e-paper-rgb),.4)}
html.era .rdv .pill.solid{background:var(--e-gold);border-color:var(--e-gold);color:var(--e-graf)}
html.era .filters button{border-radius:999px;color:var(--e-ink);border-color:rgba(var(--e-ink-rgb),.25);background:transparent;box-shadow:none;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.18em}
html.era .filters button[aria-pressed="true"]{background:var(--e-ink);color:var(--e-paper);border-color:var(--e-ink)}
html.era .ph img,html.era .proj .cmp img,html.era .anat .fig img{filter:none}
html.era .anat .fig{border:0;background:var(--e-graf)}
html.era .anat .list div{border-color:rgba(var(--e-ink-rgb),.14)}
html.era .anat .list b{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;text-transform:uppercase}
html.era .contact dt{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--e-ink-2)}
html.era .contact dd a{color:var(--e-ink);text-decoration-color:color-mix(in srgb,var(--e-gold-d) 70%,transparent)}
html.era .contact input,html.era .contact textarea,html.era .contact select{color:var(--e-ink);border-bottom-color:rgba(var(--e-ink-rgb),.25)}
html.era .contact label{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--e-ink-2)}
html.era .trust,html.era .note{color:var(--e-ink-2)}
html.era .vis-badge{background:rgba(var(--e-paper-rgb),.82);color:var(--e-ink-2);border-radius:0;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase}
html.era h2 em.c,html.era h2 em.b{background:none!important;-webkit-text-fill-color:currentColor!important}

/* nagłówki w jasnych sekcjach ERA: ciemny atrament (stary motyw malował h1–h3 na biało) */
html.era .e-hz h3,html.era .e-hz .e-t,html.era .e-grow h2,html.era .e-col h2,html.era .e-reg h2,html.era .e-cs .e-t,html.era .e-int .e-t{color:var(--e-ink)}
html.era .e-arch h2{color:var(--e-paper)}
/* cytat na zdjęciu: mniejszy, jak w ERA */
.e-quote q{font-size:calc(var(--u) * 34);max-width:14em;line-height:1.02}
/* wnętrze: podpis w lewej kolumnie, zdjęcie w prawej części kadru */
.e-int_img{left:58%}
.e-int_cap{top:auto;bottom:14vh;left:calc(var(--u) * 90);max-width:calc(var(--u) * 300)}
/* formularz kontaktu: jasne pola z linią (stary motyw dawał ciemne tło) */
html.era .contact input,html.era .contact textarea,html.era .contact select{background:transparent!important;box-shadow:none!important}
html.era .contact textarea{border:1px solid rgba(var(--e-ink-rgb),.22)!important;padding:12px!important;min-height:120px}
/* etykiety sekcji w stylu ERA: wyśrodkowane, bez kresek */
html.era main>section>.wrap>.lbl{text-align:center}
html.era section .wrap > .lbl::before{display:none}
@media (max-width:991px){
  .e-hero_a{font-size:78px}.e-hero_b{font-size:30px}
  .e-hero_s{font-size:46px;margin:calc(-6px - .32em) -.45em -.32em calc(64px - .45em)}
  .e-hero_c{padding-top:108px}
  .e-int_img{left:auto}
}
.e-menu_lang{display:flex;gap:4px}.e-menu_lang button{background:none;border:1px solid var(--e-line-l);color:var(--e-paper);font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;letter-spacing:.14em;padding:7px 10px;cursor:pointer}
.e-menu_lang button[aria-pressed="true"]{background:var(--e-gold);border-color:var(--e-gold);color:var(--e-graf)}

/* ---------- menu 1:1 jak ERA ---------- */
.e-menu{position:fixed;inset:0;z-index:58;display:none}
.e-menu_c{position:absolute;inset:0;background:var(--e-graf);color:var(--e-paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4.2vh;padding:84px 20px 44px;clip-path:none;opacity:0;overflow-y:auto}
.e-menu_t{display:flex;flex-direction:column;align-items:center;line-height:.8}
.e-menu_t .e-s{font-size:min(clamp(54px,calc(var(--u) * 110),130px),10.5vh);color:var(--e-gold-l);margin-bottom:-.28em;margin-left:-.6em;position:relative;z-index:1}
.e-menu_t .e-t{font-size:min(clamp(76px,calc(var(--u) * 150),180px),15.5vh);line-height:.8}
.e-menu_l{display:flex;flex-direction:column;align-items:center;gap:.9vh}
.e-menu_l a{color:var(--e-paper);text-decoration:none;font-family:var(--e-t);font-variation-settings:'wdth' 62.5;text-transform:uppercase;font-size:min(clamp(20px,calc(var(--u) * 27),32px),3.7vh);line-height:1.15;border-bottom:1px solid rgba(var(--e-paper-rgb),.4);padding-bottom:1px;transition:color .3s,border-color .3s}
.e-menu_l a:hover{color:var(--e-gold-l);border-color:var(--e-gold-l)}
.e-menu_b{display:flex;flex-direction:column;align-items:center;gap:14px}
.e-menu_tel{margin:0;display:flex;gap:22px;flex-wrap:wrap;justify-content:center}
.e-menu_tel a{color:rgba(var(--e-paper-rgb),.75);text-decoration:none;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.e-menu_emb{width:30px;height:30px;color:var(--e-gold-l)}
.e-dots{position:relative;width:12px;height:14px;display:inline-block}
.e-dots i{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;border-radius:50%;background:currentColor;transition:transform .8s var(--e-io),opacity .5s}
.e-dots i:nth-child(1){transform:translate(0,-5px)}.e-dots i:nth-child(3){transform:translate(0,5px)}
.e-dots i:nth-child(4),.e-dots i:nth-child(5){opacity:0}
html.e-menu-on .e-dots i:nth-child(1){transform:translate(-4.5px,-4.5px)}html.e-menu-on .e-dots i:nth-child(3){transform:translate(4.5px,4.5px)}
html.e-menu-on .e-dots i:nth-child(4){transform:translate(4.5px,-4.5px);opacity:1}html.e-menu-on .e-dots i:nth-child(5){transform:translate(-4.5px,4.5px);opacity:1}
/* portal do galerii: papier zalewa ekran, wielki tytuł i licznik, potem odsłania galerię */
.e-portal{position:fixed;inset:0;z-index:57;background:var(--e-paper);display:none;align-items:center;justify-content:center;pointer-events:none}
.e-portal_in{display:flex;align-items:flex-end;justify-content:space-between;width:100%;padding:0 calc(var(--u) * 90);color:var(--e-ink)}
.e-portal_in .e-t{font-size:calc(var(--u) * 136)}
.e-portal_n{font-family:var(--e-t);font-weight:400;font-variation-settings:'wdth' 62.5;font-size:calc(var(--u) * 136);line-height:.84}
/* ---------- galeria jak strona mieszkań ERA ---------- */
html.era .galerie{position:relative;background:var(--e-paper);padding:16vh 0 14vh;overflow:hidden}
html.era .galerie .wrap{max-width:none;padding:0 calc(var(--u) * 90)}
.e-gal_h{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;border-bottom:1px solid var(--e-line);padding-bottom:18px}
html.era .e-gal_h h2{font-size:calc(var(--u) * 136)!important;line-height:.84;margin:0!important;text-align:left!important;max-width:none!important;color:var(--e-ink)}
.e-gal_n{font-size:calc(var(--u) * 136);line-height:.84;font-weight:400;color:var(--e-ink);flex:none}
.e-gal_sub{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:14px 0 0}
.e-gal_sub .e-s{font-size:calc(var(--u) * 60);color:var(--e-ink);line-height:1;white-space:nowrap}
.e-gal_sub .note-vis{max-width:38em;text-align:right!important;margin:0!important;font-size:12.5px;color:var(--e-ink-2)}
.e-gal_bar{display:flex;align-items:center;gap:24px;border:1px solid var(--e-line);padding:10px 16px;margin:4vh 0 3vh}
.e-gal_bar .e-u{color:var(--e-ink-2)}
html.era .e-gal_bar .filters{margin:0;display:flex;gap:8px;flex-wrap:wrap}
html.era #masonry{columns:auto!important;column-count:auto!important;display:grid!important;grid-template-columns:repeat(3,1fr);gap:22px}
html.era #masonry .ph{margin:0!important;display:flex;flex-direction:column;background:#fff;padding:12px 12px 16px;box-shadow:0 0 0 1px rgba(var(--e-ink-rgb),.06);transition:transform .6s var(--e-out),box-shadow .6s var(--e-out);break-inside:auto}
html.era #masonry .ph.hide{display:none}
html.era #masonry .ph:hover{transform:translateY(-6px);box-shadow:0 26px 60px -30px rgba(var(--e-ink-rgb),.4)}
html.era #masonry .ph img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
html.era #masonry .ph figcaption{position:static;opacity:1;background:none;color:var(--e-ink);padding:12px 2px 0;font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-size:20px;letter-spacing:0;line-height:1.05;text-transform:uppercase;text-align:left}
html.era #masonry .ph .vis-badge{top:20px;left:20px}
@media (max-width:991px){
  html.era .galerie .wrap{padding:0 18px}
  html.era .e-gal_h h2,.e-gal_n{font-size:60px!important}
  .e-gal_sub{flex-direction:column;align-items:flex-start}.e-gal_sub .e-s{font-size:40px}.e-gal_sub .note-vis{text-align:left!important}
  .e-gal_bar{flex-direction:column;align-items:flex-start}
  html.era #masonry{grid-template-columns:1fr 1fr;gap:12px}
  html.era #masonry .ph figcaption{font-size:15px}
  .e-portal_in .e-t,.e-portal_n{font-size:64px}
}
@media (max-width:560px){html.era #masonry{grid-template-columns:1fr}}

/* =====================================================================================================
   WYKOŃCZENIE 26.09 (noc) — „ma być Bugatti numer jeden”: jedna rodzina dla całej strony.
   Zasady: każda sekcja ma JEDNO świadome tło (biel, kamień, grafit, zdjęcie; mgła morska tylko na Wybrzeżu),
   tytuły wąskim szeryfem, etykiety szerokim Archivo, przyciski-pigułki; zamiast pudełek, szkła i złotych obwódek
   starego motywu: cienkie linie, światło zdjęć, maski. Brąz tylko w H1, DB16, wizycie i emblemacie.
   Stary motyw z <style> w index.html stoi w dokumencie PO tym pliku i bywa z !important — stąd html.era i czasem !important.
   ===================================================================================================== */

/* ---------- ogólne ---------- */
/* stary motyw ograniczał każdy <p> do 56ch: wyśrodkowane podpisy „uciekały” w lewo (kurtyna, powód 1, galeria) */
html.era .e-pre_foot,html.era .e-grow_cap,html.era .e-gal_sub{max-width:none}
/* etykiety sekcji szerokim Archivo jak w ERA (stary motyw podmieniał je na Barlow), bez złotych kresek */
html.era main>section:not(.e-docs) .lbl,html.era .panel .lbl{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;line-height:1.5;letter-spacing:.22em;text-transform:uppercase}
html.era main>section>.wrap>.lbl::before,html.era main>section>.wrap>.lbl::after{display:none!important}
/* klawiatura: jeden pierścień w całej stronie — ciemny brąz na jasnym, jasny brąz na ciemnym */
html.era :focus-visible{outline:2px solid var(--e-gold-d);outline-offset:3px}
html.era .rdv :focus-visible,html.era .process :focus-visible,html.era .e-foot :focus-visible,html.era .e-menu :focus-visible,html.era .mbar :focus-visible,html.era .tel-wybor :focus-visible,html.era .as-launch:focus-visible{outline-color:var(--e-gold-l)}
html.era a,html.era button,html.era summary,html.era label.rdv-karta,html.era select{cursor:pointer}
/* kwiat w sekcji budowy wystawał 6% za prawą krawędź (strona przewijała się w bok, na telefonie 413 z 390 px);
   overflow: clip nie tworzy kontenera przewijania, więc przyklejone sceny działają dalej */
.e-arch,.e-hz{overflow-x:clip}

/* ---------- przejścia scen ----------
   Zdjęcie hero odjeżdża w górę, pod nim grafit, z dołu wchodzi kamienne koło z napisem po łuku
   (wcześniej w rogach prześwitywał papier strony i wyglądało to jak dziura). Drugie koło (papier)
   wjeżdża na grafit zaraz po scenie nocy — bez tego koło miało kolor tła i znikało. */
.e-cs{background:linear-gradient(180deg,transparent 0,transparent 100vh,var(--e-graf) 100vh)}
.e-cs.paper{background:var(--e-graf)}

/* ---------- powód 1: podpis wyśrodkowany, cytat czytelny na jasnym betonie ---------- */
html.era .e-grow_cap{color:var(--e-ink-2)}
.e-grow_img::after{background:linear-gradient(0deg,rgba(var(--e-shade-rgb),.66) 0%,rgba(var(--e-shade-rgb),.34) 32%,rgba(var(--e-shade-rgb),0) 60%),linear-gradient(270deg,rgba(var(--e-shade-rgb),.46) 0%,rgba(var(--e-shade-rgb),.1) 42%,rgba(var(--e-shade-rgb),0) 60%)}
.e-quote q{text-shadow:0 1px 20px rgba(var(--e-shade-rgb),.3)}

/* ---------- Lazurowe Wybrzeże: tytuł w atramencie; mgła morska tylko w morzu na mapie (reguły mapy wyżej) ---------- */
.e-hz_coast .e-cttl .e-t{color:var(--e-ink)}

/* ---------- 16 fachów (DB16): karty bez pudełek — zdjęcie, kod, nazwa; zdjęcie delikatnie rośnie po najechaniu ---------- */
html.era #tiles .tile{background:none;padding:0;gap:0;box-shadow:none;overflow:hidden;transition:none}
html.era #tiles .tile:hover{transform:none;box-shadow:none}
html.era #tiles .tile img{transform-origin:50% 0;transition:transform 1.4s var(--e-out)}
html.era #tiles .tile:hover img,html.era #tiles .tile:focus-visible img{transform:scale(1.035)}
html.era #tiles .tile .t{gap:8px;margin-top:16px;padding:14px 2px 0;border-top:1px solid var(--e-line)}
html.era #tiles .tile .t b{font-size:30px}
html.era #tiles .tile .kod{text-shadow:none;font-size:9px}
html.era #tiles .tile .vis-badge{left:10px;top:10px}
html.era #tiles .tile:focus-visible{outline-offset:6px}
.e-kar_nav button:focus-visible{outline-offset:3px}
/* złote słowo tylko tutaj (DB16) i w wizycie; reszta słów pisanych ma kolor tytułu */
/* 01.10 wieczór (Daniel: „to samo co było, brąz”): oba słowa z folii zamiast płaskiego koloru — DB16 nasycone złoto na jasne
   (dawniej brąz #7F5E1C), wizyta 24K (dawniej płaskie #E5C277) */
html.era #metiers h2 em{background-image:var(--pal-z24-stare)!important;background-size:100% 100%!important;background-repeat:no-repeat!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}
html.era #rdv .wrap>h2 em{background-image:var(--pal-z24-jasne)!important;background-size:100% 100%!important;background-repeat:no-repeat!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important}

/* ---------- plakietki „Image de synthèse” na kartach i zdjęciach sekcji z danymi: jak .e-vis ---------- */
html.era .vis-badge{border:0;border-radius:0;background:rgba(var(--e-graf-rgb),.36);color:rgba(var(--e-paper-rgb),.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:8px;line-height:1;letter-spacing:.2em;padding:6px 8px 5px}

/* ---------- anatomia willi: etykiety na zdjęciu jako jasne kartki z cienką linią (zamiast ciemnego szkła) ---------- */
html.era .anat .fig{background:var(--e-graf)}
html.era .anat .tag{background:rgba(var(--e-paper-rgb),.94);color:var(--e-ink);border:0;border-left:1px solid var(--e-gold-d);border-radius:0;box-shadow:0 18px 40px -26px rgba(var(--e-shade-rgb),.6);-webkit-backdrop-filter:none;backdrop-filter:none;padding:9px 14px 10px 12px}
html.era .anat .tag .n{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:700;font-size:8.5px;letter-spacing:.22em;color:var(--e-gold-d)}
html.era .anat .tag b{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;text-transform:uppercase;font-size:20px;line-height:1;margin-top:4px;color:var(--e-ink)}
html.era .anat .tag small{font-family:var(--e-u);font-size:10.5px;letter-spacing:.02em;color:var(--e-ink-2);margin-top:5px}
html.era .anat .pt{background:var(--e-paper);box-shadow:0 0 0 4px rgba(var(--e-paper-rgb),.3)}
html.era .anat .pt::after{border-color:rgba(var(--e-paper-rgb),.7)}
html.era .anat svg.ln line{stroke:rgba(var(--e-paper-rgb),.75)}
html.era .anat .list{border-top-color:var(--e-line)}
html.era .anat .list .n{color:var(--e-gold-d);font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:700}
html.era .anat .list small{color:var(--e-ink-2)}

/* ---------- projekty i wycena: tytuł po lewej, opis po prawej (rytm z 26.09), ale w skali ERA ---------- */
@media (min-width:901px){
  html.era #projets .wrap>.lbl,html.era #estimation .wrap>.lbl{text-align:left}
  html.era #projets .wrap>h2,html.era #estimation .wrap>h2{font-size:calc(var(--u) * 104)!important;text-align:left;margin:14px 0 0!important;max-width:none}
  html.era #projets .wrap>.note-vis,html.era #estimation .wrap>.es-intro{text-align:left;margin:0 0 .4em!important;max-width:34em;color:var(--e-ink-2);font-size:15px;line-height:1.6}
}
html.era .es-intro{color:var(--e-ink-2)}
html.era .projs{gap:0;margin-top:7vh}
html.era .proj{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:calc(var(--u) * 72);align-items:center;padding:34px 0;border-top:1px solid var(--e-line)}
html.era .proj:last-child{border-bottom:1px solid var(--e-line)}
html.era .proj .cmp,html.era .proj .cmp:hover{box-shadow:none;border:0;background:var(--e-stone)}
html.era .proj .info .lbl{color:var(--e-gold-d)}
html.era .proj .info b{font-size:calc(var(--u) * 46);line-height:.92;margin:12px 0 16px;color:var(--e-ink)}
html.era .proj .info p{font-size:15px;line-height:1.65;color:var(--e-ink-2);max-width:34em}
html.era .proj .info dl{margin-top:20px;gap:0;border-top:1px solid var(--e-line)}
html.era .proj .info dt,html.era .proj .info dd{padding:10px 0;border-bottom:1px solid var(--e-line)}
html.era .proj .info dt{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--e-ink-2);padding-right:18px}
html.era .proj .info dd{font-size:14px;color:var(--e-ink)}

/* ---------- galeria: kamień (rytm: biel → kamień → biel), białe odbitki na kamieniu, kurtyna portalu w tym samym kolorze ---------- */
html.era .galerie{background:var(--e-stone)}
.e-portal{background:var(--e-stone)}
html.era #masonry .ph{background:#FBFAF7;box-shadow:0 0 0 1px rgba(var(--e-ink-rgb),.05)}
html.era #masonry .ph:hover{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(var(--e-ink-rgb),.05),0 30px 50px -34px rgba(var(--e-shade-rgb),.45)}
html.era #masonry .ph figcaption{color:var(--e-ink)}
.e-gal_bar{border-color:var(--e-line);background:rgba(var(--e-paper-rgb),.35)}
html.era .filters button{min-height:34px;padding:8px 16px;transition:background .3s,color .3s,border-color .3s}
html.era .filters button:hover{border-color:var(--e-ink)}

/* ---------- wycena: trzy kolumny jak arkusz — kreska u góry zamiast pudełek, pola z linią, pigułki ---------- */
html.era .es-grid{gap:calc(var(--u) * 56);margin-top:7vh;align-items:start}
html.era .es-form,html.era .es-out,html.era .es-why{background:none;border:0;border-top:1px solid var(--e-ink);border-radius:0;box-shadow:none;padding:26px 0 0;-webkit-backdrop-filter:none;backdrop-filter:none}
html.era .es-form::before,html.era .es-out::before,html.era .es-why::before{display:none}
html.era .es-form:hover,html.era .es-out:hover,html.era .es-why:hover{border-color:var(--e-ink);box-shadow:none}
html.era .es-f{gap:10px;margin:0 0 26px;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--e-ink-2)}
html.era .es-f select,html.era .es-f input,html.era .es-sel-v{font-family:var(--e-u);font-variation-settings:'wdth' 100;font-weight:500;font-size:16px;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--e-ink);background:transparent;border:0;border-bottom:1px solid rgba(var(--e-ink-rgb),.32);border-radius:0;padding:10px 30px 11px 0;min-height:0;box-shadow:none}
html.era .es-f input{padding-right:0}
html.era .es-sel-v::after{right:6px;width:6px;height:6px;border-color:var(--e-gold-d);border-width:0 1.5px 1.5px 0}
html.era .es-f select:focus,html.era .es-f input:focus{outline:0;border-bottom-color:var(--e-ink);box-shadow:0 1px 0 var(--e-ink)}
html.era .es-sel:focus-within .es-sel-v{outline:0;border-bottom-color:var(--e-ink);box-shadow:0 1px 0 var(--e-ink)}
html.era .es-q{gap:14px}
html.era .es-q span{font-family:var(--e-u);font-size:14px;font-weight:600;color:var(--e-ink-2)}
html.era .es-form .pill.solid{margin-top:6px}
html.era .es-err{color:#9b2c21}
html.era .es-out .lbl{color:var(--e-ink-2)}
html.era .es-range{font-size:calc(var(--u) * 62);line-height:.9;margin:16px 0 12px;letter-spacing:0}
html.era .es-basis{font-size:14px;line-height:1.55;color:var(--e-ink-2)}
html.era .es-out .note{font-family:var(--e-u);font-size:11.5px;line-height:1.6;letter-spacing:.01em;color:var(--e-ink-2)}
html.era .es-cta{margin-top:22px;gap:10px}
html.era .es-out:not(.ma) #esRdv{background:transparent;color:var(--e-ink);border-color:rgba(var(--e-ink-rgb),.35);box-shadow:none}
html.era .es-why h3{font-size:24px;line-height:1;margin:0 0 14px;color:var(--e-ink)}
html.era .es-why h3+ul+h3{margin-top:8px}
html.era .es-why ul{list-style:none;padding:0;margin:0 0 26px;color:var(--e-ink-2);font-size:14.5px;line-height:1.55}
html.era .es-why li{position:relative;padding:7px 0 7px 22px;border-bottom:1px solid var(--e-line)}
html.era .es-why li::before{content:'';position:absolute;left:0;top:1.05em;width:10px;height:1px;background:var(--e-gold-d)}
html.era .es-why .muted,html.era .es-why p{color:var(--e-ink-2);font-size:14.5px;line-height:1.6}
html.era .es-rates{margin-top:7vh;padding:0;border:0;border-top:1px solid var(--e-line);border-bottom:1px solid var(--e-line);border-radius:0;background:none}
html.era .es-rates summary{list-style:none;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--e-ink)}
html.era .es-rates summary::-webkit-details-marker{display:none}
html.era .es-rates summary::after{content:'+';font-family:var(--e-t);font-size:26px;font-weight:300;line-height:1;transition:transform .5s var(--e-out)}
html.era .es-rates[open] summary::after{transform:rotate(45deg)}
html.era .es-rates table{margin:0 0 18px;font-size:14px}
html.era .rates td{border-top-color:var(--e-line);color:var(--e-ink-2)}
html.era .rates td:last-child{color:var(--e-ink);font-family:var(--e-u);font-weight:600}
html.era .es-rates .note{font-family:var(--e-u);color:var(--e-ink-2);padding-bottom:18px}

/* ---------- rezerwacja (grafit): kroki, grupy i kalendarz na cienkich liniach, zaznaczenie = odwrócenie kolorów ---------- */
html.era #rdv .rdv-intro{color:rgba(var(--e-paper-rgb),.72)}
html.era #rdv .rdv-app{gap:34px;margin-top:6vh}
html.era #rdv .rdv-kroki{gap:10px 28px;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
html.era #rdv .rdv-kroki li{color:rgba(var(--e-paper-rgb),.45);gap:10px}
html.era #rdv .rdv-kroki li span{width:24px;height:24px;border-color:rgba(var(--e-paper-rgb),.28);font-size:9.5px;letter-spacing:0}
html.era #rdv .rdv-kroki li.on{color:var(--e-paper)}
html.era #rdv .rdv-kroki li.on span{background:var(--e-gold-l);border-color:var(--e-gold-l);color:var(--e-graf)}
html.era #rdv .rdv-grupa,html.era #rdv .rdv-grupa:hover,html.era #rdv .rdv-grupa:focus-within{background:none;border:0;border-top:1px solid var(--e-line-l);border-radius:0;box-shadow:none;padding:22px 0 0;-webkit-backdrop-filter:none;backdrop-filter:none}
html.era #rdv .rdv-grupa legend,html.era #rdv .rdv-cal-top h3{padding:0 14px 0 0;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--e-gold-l)}
html.era #rdv .rdv-cal-top h3 small{color:rgba(var(--e-paper-rgb),.55);letter-spacing:.06em;text-transform:none;font-size:11px}
html.era #rdv .rdv-karty{gap:12px;margin-top:14px}
html.era #rdv .rdv-karta span{background:transparent;border:1px solid rgba(var(--e-paper-rgb),.2);border-radius:0;padding:16px 18px;color:var(--e-paper);box-shadow:none;transition:background .35s,border-color .35s,color .35s}
html.era #rdv .rdv-karta b{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;text-transform:uppercase;font-size:21px;line-height:1;color:inherit}
html.era #rdv .rdv-karta small,html.era #rdv .rdv-karta span small{font-family:var(--e-u);font-size:12px;color:rgba(var(--e-paper-rgb),.6);margin-top:4px}
html.era #rdv .rdv-karta:hover span{border-color:rgba(var(--e-paper-rgb),.55)}
html.era #rdv .rdv-karta input:checked+span{background:var(--e-paper);border-color:var(--e-paper);color:var(--e-ink);box-shadow:none}
html.era #rdv .rdv-karta input:checked+span small{color:var(--e-ink-2)}
html.era #rdv .rdv-karta input:focus-visible+span{outline:2px solid var(--e-gold-l);outline-offset:3px}
html.era #rdv .rdv-nav button,html.era #rdv .rdv-dni button,html.era #rdv .rdv-godz button{background:transparent;color:var(--e-paper);border:1px solid rgba(var(--e-paper-rgb),.2);box-shadow:none}
html.era #rdv .rdv-dni button{border-radius:0;padding:12px 8px;min-width:68px}
html.era #rdv .rdv-dni button b{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;font-size:26px;line-height:1}
html.era #rdv .rdv-dni button span,html.era #rdv .rdv-dni button small{font-family:var(--e-u);font-size:10.5px;color:rgba(var(--e-paper-rgb),.6)}
html.era #rdv .rdv-godz button{border-radius:999px;font-family:var(--e-u);font-weight:600;font-size:13px;letter-spacing:.04em}
html.era #rdv .rdv-nav button:hover:not(:disabled),html.era #rdv .rdv-dni button:hover,html.era #rdv .rdv-godz button:hover{border-color:rgba(var(--e-paper-rgb),.6)}
html.era #rdv .rdv-dni button[aria-selected="true"],html.era #rdv .rdv-godz button[aria-selected="true"]{background:var(--e-paper);border-color:var(--e-paper);color:var(--e-ink);box-shadow:none}
html.era #rdv .rdv-dni button[aria-selected="true"] span,html.era #rdv .rdv-dni button[aria-selected="true"] small{color:var(--e-ink-2)}
html.era #rdv .rdv-wybrany{color:rgba(var(--e-paper-rgb),.7)}
html.era #rdv .rdv-wybrany b{color:var(--e-paper)}
html.era #rdv .rdv-f label{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--e-paper-rgb),.6)}
html.era #rdv .rdv-f input,html.era #rdv .rdv-f textarea{background:transparent;color:var(--e-paper);border:0;border-bottom:1px solid rgba(var(--e-paper-rgb),.3);border-radius:0;padding:10px 0 11px;font-family:var(--e-u);font-size:16px}
html.era #rdv .rdv-f textarea{border:1px solid rgba(var(--e-paper-rgb),.24);padding:12px 14px}
html.era #rdv .rdv-f input:focus,html.era #rdv .rdv-f textarea:focus{outline:0;border-color:var(--e-paper);box-shadow:0 1px 0 var(--e-paper)}
html.era #rdv .rdv-zgoda label{color:rgba(var(--e-paper-rgb),.82);font-size:13.5px}
html.era #rdv .rdv-zgoda input{accent-color:var(--e-gold-l)}
html.era #rdv .rdv-ok,html.era #rdv .rdv-blad{background:none;border:1px solid var(--e-line-l);border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
html.era #rdv .rdv-ok h3{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;text-transform:uppercase;font-size:34px;line-height:1;color:var(--e-paper)}
html.era #rdv .rdv-ref b{color:var(--e-gold-l)}
html.era #rdv .pill{color:var(--e-paper);border-color:rgba(var(--e-paper-rgb),.4);background:transparent}
html.era #rdv .pill:hover{background:var(--e-paper);color:var(--e-ink);border-color:var(--e-paper)}
html.era #rdv .pill.solid{background:var(--e-gold-l);border-color:var(--e-gold-l);color:var(--e-graf);box-shadow:none}
html.era #rdv .pill.solid:hover{background:var(--e-paper);border-color:var(--e-paper);color:var(--e-ink)}
html.era #rdv .rdv-trust{color:rgba(var(--e-paper-rgb),.6)}

/* ---------- kontakt: formularz i karta firmy bez pudełek — kreska u góry, pola z linią, wiersze danych na liniach ---------- */
html.era .contact .grid{gap:calc(var(--u) * 90);margin-top:7vh}
html.era .contact form,html.era .contact .grid>div,html.era .contact form:hover,html.era .contact form:focus-within,html.era .contact .grid>div:hover{background:none;border:0;border-top:1px solid var(--e-ink);border-radius:0;box-shadow:none;padding:28px 0 0;-webkit-backdrop-filter:none;backdrop-filter:none}
html.era .contact form::before,html.era .contact .grid>div::before{display:none}
html.era .contact form{gap:22px}
html.era .contact .f{gap:8px}
html.era .contact input,html.era .contact select{background:transparent!important;border:0!important;border-bottom:1px solid rgba(var(--e-ink-rgb),.32)!important;border-radius:0!important;padding:10px 0 11px!important;font-family:var(--e-u);font-size:16px;color:var(--e-ink)}
html.era .contact textarea{background:transparent!important;border:1px solid rgba(var(--e-ink-rgb),.26)!important;border-radius:0!important;padding:12px 14px!important;font-family:var(--e-u);font-size:16px;color:var(--e-ink)}
html.era .contact input:focus,html.era .contact select:focus,html.era .contact textarea:focus{outline:0;border-color:var(--e-ink)!important;box-shadow:0 1px 0 var(--e-ink)!important}
html.era .contact label[for="msg"]{font-family:var(--e-u);font-size:12.5px;letter-spacing:.01em;text-transform:none;color:var(--e-ink-2)}
html.era .contact .actions{gap:10px;margin-top:4px}
html.era .contact .note,html.era .contact .trust{font-family:var(--e-u);font-size:12px;line-height:1.6;letter-spacing:.01em;color:var(--e-ink-2);max-width:40em}
html.era .contact .trust.rgpd a{color:var(--e-ink);text-decoration-color:var(--e-gold-d)}
html.era .contact dl{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:0;font-size:15px}
html.era .contact dt,html.era .contact dd{padding:14px 0;border-bottom:1px solid var(--e-line)}
html.era .contact dt{padding-right:20px;padding-top:17px}
html.era .contact dd{color:var(--e-ink);line-height:1.5}
html.era .contact dd a{color:var(--e-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(var(--e-ink-rgb),.3)}
html.era .contact dd a:hover{text-decoration-color:var(--e-gold-d)}
html.era .contact .tel-os small{font-family:var(--e-u);font-size:11.5px;color:var(--e-ink-2)}
html.era .contact dd .tel-os a[href^="tel"]{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-size:26px;line-height:1;text-decoration:none;letter-spacing:.01em}

/* ---------- przyciski-pigułki: jeden wygląd i jedno zachowanie w całej stronie ---------- */
html.era .pill{min-height:44px;padding:13px 24px;line-height:1;text-transform:uppercase;transition:background .35s var(--e-out),color .35s var(--e-out),border-color .35s var(--e-out)}
html.era .pill.solid:hover,html.era .contact .pill.solid:hover,html.era .light .pill.solid:hover,html.era .es-form .pill.solid:hover{color:var(--e-paper)}

/* ---------- stopka: nowy <footer> jest tylko opakowaniem — zerujemy stary motyw (padding, wersaliki, Barlow, linia) ---------- */
html.era body>footer{position:relative;z-index:4;margin:0;padding:0!important;border:0;background:var(--e-graf);color:var(--e-paper);font-family:var(--e-u);font-size:15px;letter-spacing:normal;text-transform:none;line-height:1.5}
html.era body>footer::before,html.era body>footer::after{display:none}
html.era body>footer a{color:inherit}
html.era body>footer a:hover{color:var(--e-paper)}
.e-foot_in .e-u{font-size:10px;letter-spacing:.24em}
.e-foot2{gap:44px;margin-top:14px}
.e-foot2 a{display:grid;gap:8px;justify-items:center;text-transform:none;line-height:1}
.e-foot2 a:first-child{font-variant-numeric:tabular-nums}
.e-foot2 a [data-mail]{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;text-transform:none;letter-spacing:.01em}
.e-foot2 a:hover{color:var(--e-gold-l)}
.e-foot_tel{transition:color .4s}
.e-foot_tel:hover{color:var(--e-gold-l)}
.e-foot_in .e-p{font-size:13px;line-height:1.7;letter-spacing:.01em;text-transform:none;margin-top:6px}
.e-foot_row{font-family:var(--e-u);font-size:10px;letter-spacing:.06em;line-height:1.75;text-transform:none;border-top:1px solid var(--e-line-l);padding-top:16px;bottom:26px}
.e-foot_row>div:last-child{text-align:right}
.e-foot_row a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(var(--e-paper-rgb),.35)}
.e-foot_leg{display:inline-block;margin-top:2px;color:rgba(var(--e-paper-rgb),.5);font-size:9.5px;letter-spacing:.08em}
.e-foot_leg a{text-decoration:none!important;color:inherit;font-variant-numeric:tabular-nums}

/* ---------- przycisk pomocy (asystent): grafitowa pigułka z cienkim kółkiem, bez złotej poświaty ---------- */
html.era .as-launch{right:24px;bottom:24px;height:44px;gap:10px;padding:0 18px 0 5px;background:var(--e-graf);color:var(--e-paper);box-shadow:0 0 0 1px rgba(var(--e-paper-rgb),.14),0 18px 36px -18px rgba(var(--e-shade-rgb),.7);-webkit-backdrop-filter:none;backdrop-filter:none;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;transition:background .35s,color .35s,box-shadow .35s,opacity .25s,visibility .25s}
html.era .as-launch .as-ic{width:34px;height:34px;background:none;color:var(--e-gold-l);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--e-gold-l) 60%,transparent);font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;font-size:19px}
html.era .as-launch:hover{background:var(--e-ink);box-shadow:0 0 0 1px rgba(var(--e-paper-rgb),.4),0 18px 36px -18px rgba(var(--e-shade-rgb),.7)}
html.era .as-panel{border-radius:0;background:var(--e-graf);border:1px solid color-mix(in srgb,var(--e-gold) 45%,transparent);box-shadow:0 40px 80px -36px rgba(0,0,0,.8)}
html.era .as-panel h2{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;text-transform:uppercase;font-size:26px;line-height:1;color:var(--e-paper)}
html.era .as-m,html.era .as-o,html.era .as-form input{border-radius:0}
html.era .as-m.u{background:var(--e-paper);color:var(--e-ink);border:0}
html.era .as-o{border-radius:999px}

/* ---------- menu: rysunek architektoniczny w tle (.e-menu_rys, wstawia integrator), słowo pisane jak w ERA ---------- */
/* rysunek willi (img z przezroczystym tłem, ciepła biel) leży przy dolnej krawędzi, pod linkami; JS odsłania go
   clip-path i skalą 1.04→1, więc środkowanie bez transform: left 50% + ujemny margines połowy szerokości */
.e-menu_c{isolation:isolate}
.e-menu_rys{position:absolute;z-index:-1;left:50%;bottom:-2vh;width:min(120vw,1700px);max-width:none;height:auto;margin-left:calc(min(120vw,1700px) / -2);opacity:.15;pointer-events:none;user-select:none;transform-origin:50% 100%}
.e-menu_t .e-s{color:var(--e-paper)}
html.era .e-menu_lang button{border:0;padding:7px 8px;opacity:.55;transition:opacity .3s}
html.era .e-menu_l a:focus-visible{outline-width:1px;outline-offset:6px}
.e-menu_lang button:hover{opacity:1}
html.era .e-menu_lang button[aria-pressed="true"]{background:none;border:0;color:var(--e-paper);opacity:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.e-menu_tel a:hover{color:var(--e-paper)}

/* ---------- okno usługi (karta wlatuje pod kątem): kamień, cienkie linie, przyciski rodziny ---------- */
html.era .panel{background:var(--e-stone);border:0;box-shadow:0 60px 140px -50px rgba(var(--e-shade-rgb),.7)}
html.era .panel .phd{border-bottom:1px solid var(--e-line);background:none}
html.era .panel .x{color:var(--e-ink);border-color:rgba(var(--e-ink-rgb),.3);background:none}
html.era .panel .x:hover{background:var(--e-ink);color:var(--e-paper);border-color:var(--e-ink)}
html.era .panel .type{color:var(--e-gold-d);font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
html.era .panel p,html.era .panel li{color:var(--e-ink-2)}
html.era .panel ul{border-top-color:var(--e-line)}
html.era .panel li::before{color:var(--e-gold-d)}
html.era .panel .pf .pill.solid{background:var(--e-ink);border-color:var(--e-ink);color:var(--e-paper)}

/* ---------- telefon i tablet ---------- */
@media (max-width:991px){
  .e-hero_st>.e-vis,.e-grow_img>.e-vis,.e-arch_st>.e-vis,.e-foot_img>.e-vis,.e-night_img>.e-vis{left:16px;bottom:16px}
  html.era .proj{grid-template-columns:minmax(0,1fr);gap:22px;padding:28px 0}
  html.era .proj .info b{font-size:34px}
  html.era .es-grid{gap:44px}
  html.era .es-range{font-size:52px}
  html.era .contact .grid{gap:48px}
  html.era .contact dl{grid-template-columns:minmax(0,1fr)}
  html.era .contact dt{padding:14px 0 2px;border-bottom:0}
  html.era .contact dd{padding:0 0 14px}
  .e-foot2{gap:26px}
  .e-foot_row>div:last-child{text-align:left}
}
/* ≤900 px: stały pasek szybkiego kontaktu (.mbar) zakrywa dół ekranu — wszystko, co stoi przy dolnej krawędzi
   przyklejonych scen, idzie nad niego; sam pasek w rodzinie ERA: grafit, cienkie pigułki, wizyta w jasnym brązie */
@media (max-width:900px){
  html.era .mbar{gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:var(--e-graf);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid color-mix(in srgb,var(--e-gold) 40%,transparent)}
  html.era .mbar a,html.era .mbar button{min-height:44px;border:1px solid rgba(var(--e-paper-rgb),.24);background:transparent;color:var(--e-paper);font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
  html.era .mbar .mb-rdv{background:var(--e-gold-l);border-color:var(--e-gold-l);color:var(--e-graf);box-shadow:none}
  html.era .mbar .mb-as{flex:0 0 44px;font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;font-size:20px;letter-spacing:0;color:var(--e-gold-l)}
  .e-hero_cta{bottom:calc(84px + env(safe-area-inset-bottom))}
  .e-hero_st>.e-vis,.e-grow_img>.e-vis,.e-arch_st>.e-vis,.e-foot_img>.e-vis{bottom:calc(76px + env(safe-area-inset-bottom))}
  .e-quote{bottom:calc(92px + env(safe-area-inset-bottom))}
  .e-arch_p{bottom:calc(108px + env(safe-area-inset-bottom))}  /* 01.10: przy 92 px dolna linia nachodziła 3 px na plakietkę */
  .e-foot_row{bottom:calc(78px + env(safe-area-inset-bottom))}
  /* stary motyw dawał body dolny margines pod pasek — pod grafitową stopką prześwitywał wtedy pasek papieru;
     teraz grafit stopki sięga pod pasek */
  html.era body{padding-bottom:0}
  html.era body>footer{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
}
@media (max-width:600px){
  html.era .mbar a,html.era .mbar button{font-size:9px;letter-spacing:.1em;padding:0 8px}
}

/* ---------- kwiaty: zaglądają z rogów, nie siadają na tytułach (ERA: kwiat na krawędzi kadru, nigdy na napisie) ---------- */
.e-reg>.e-fl{z-index:-1;left:-17%!important;top:-30%!important}
html.era .galerie>.e-fl{right:-13%!important;top:-24%!important}
/* niemiecki tytuł galerii jest najdłuższy (Visualisierungen) — mniejszy stopień, żeby licznik miał swoje miejsce */
html.era:lang(de) .e-gal_h h2{font-size:calc(var(--u) * 118)!important}
html.era:lang(de) .e-gal_n,html.era:lang(de) .e-portal_in .e-t,html.era:lang(de) .e-portal_n{font-size:calc(var(--u) * 118)}
/* projekty i wycena: szersza kolumna tytułu, dwa wiersze zamiast trzech */
@media (min-width:901px){
  html.era #projets .wrap,html.era #estimation .wrap{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
  html.era #estimation .wrap>h2{font-size:calc(var(--u) * 96)!important}
}
/* stopka: drobne podpisy nad numerem i mailem zostają wersalikami; plakietka zdjęcia w oknie, które zostaje
   u góry po zamknięciu kadru (wcześniej wisiała na dole na tekście prawnym); prawa kolumna omija przycisk pomocy */
.e-foot2 small{text-transform:uppercase;line-height:1}
.e-foot_img>.e-vis{left:calc(24% + 16px);top:76px;bottom:auto}
@media (min-width:992px){.e-foot_row{right:calc(var(--u) * 110 + 112px)}}
@media (max-width:991px){.e-foot_img>.e-vis{left:calc(18% + 12px);top:66px;bottom:auto}}
/* menu: rysunek willi szerszy na telefonie, oparty o dół ekranu */
@media (max-width:991px){.e-menu_rys{width:150vw;margin-left:-75vw;bottom:0}
  .e-menu_t .e-t{font-size:min(104px,13vh)}
  .e-menu_t .e-s{font-size:min(70px,8.5vh)}
  .e-menu_l a{font-size:min(24px,3.4vh)}
  .e-menu_c{gap:3.6vh;padding:76px 20px 36px}}
/* 01.10 · P06 z QA: menu na telefonie jest wyższe niż ekran, a justify-content:center wypychał jego górę poza ekran
   (pod pasek, bez możliwości przewinięcia): „Dastan” ucięty i pod przyciskiem telefonu, na 375×667 poza ekranem.
   Auto-marginesy: środek, gdy jest miejsce, góra (pod paskiem), gdy go brak; reszta przewija się w menu */
@media (max-width:991px){html.era .e-menu_c{justify-content:flex-start}html.era .e-menu_c>.e-menu_t{margin-top:auto}html.era .e-menu_c>.e-menu_emb{margin-bottom:auto;flex:none}}

/* ---------- telefon: poprawki po przeglądzie 390 px ---------- */
@media (max-width:991px){
  /* cytat na zdjęciu: 34 px zajmowało pół ekranu (osiem wierszy) */
  .e-quote q{font-size:23px;line-height:1.06}
  /* napis po łuku mniejszy, żeby z koła było widać całe słowa */
  .e-cs_arc text{font-size:26px}
  /* „Maisons-Alfort”: na telefonie pod tytułem, bez przesunięcia w prawo (wychodziło za ekran) */
  .e-reg .e-s{margin:-2px 0 0 36px;font-size:52px}
  /* galeria: tytuł i licznik w jednej linii mieszczą się w 390 px (VISUALISATIONS było ucięte) */
  html.era .e-gal_h{gap:12px}
  html.era .e-gal_h h2{font-size:40px!important}
  .e-gal_n{font-size:30px!important;align-self:flex-start}
  html.era:lang(de) .e-gal_h h2{font-size:34px!important}
  .e-portal_in .e-t{font-size:40px}.e-portal_n{font-size:30px}
  html.era:lang(de) .e-portal_in .e-t{font-size:34px}
  .e-portal_in{padding:0 18px}
}
@media (max-width:900px){
  /* „Rendez-vous” szersze — napis nie dotyka krawędzi pigułki */
  html.era .mbar .mb-rdv{flex:1.3 1 0}
}
/* 01.10 · telefon 302 px (393 przy powiększeniu 130%): pigułki miały po 44 px na napis, „WHATSAPP” i „RENDEZ-VOUS” ucinał
   wielokropek. Ciaśniejsze litery i boki; resztę dociąga silnik dopasowania (js/dopasuj.js) */
@media (max-width:380px){html.era .mbar{gap:6px;padding-left:8px;padding-right:8px}html.era .mbar a,html.era .mbar button{padding:0 6px;letter-spacing:.06em}}
/* 01.10 · siatka bezpieczeństwa: nic nie rozpycha strony w bok (na telefonie szerszy dokument powiększał pasek i MENU
   uciekało za ekran). clip nie robi z body kontenera przewijania, więc przypinanie i sticky działają jak dotąd */
html.era body{overflow-x:clip}

/* ---------- okno usługi na komputerze: zdjęcie po lewej, opis po prawej (jak karta „Book a call” w ERA) —
   wcześniej ogromne zdjęcie spychało nazwę i opis pod krawędź okna ---------- */
@media (min-width:992px){
  html.era .panel .pb{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);column-gap:40px;align-items:start;align-content:start}
  html.era .panel .pb>figure{grid-column:1;grid-row:1 / span 8;margin:0;aspect-ratio:4/3;align-self:start}
  html.era .panel .pb>:not(figure){grid-column:2}
  html.era .panel .pb h3{margin:4px 0 14px}
  html.era .panel .pf{padding-top:4px;padding-left:calc(18px + 51.9%)}   /* przycisk pod kolumną opisu */
}
/* okno ma wysokość treści (stary motyw dawał height:100%, zostawała pusta połowa karty) */
html.era .panel{height:auto}
/* podgląd zdjęć galerii: grafit zamiast granatu starego motywu */
html.era .lb{background:rgba(var(--e-graf-rgb),.96)}
html.era .lb .cap{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;letter-spacing:.2em;color:rgba(var(--e-paper-rgb),.8)}
html.era .lb .nv,html.era .lb .x{background:transparent;border:1px solid rgba(var(--e-paper-rgb),.3);color:var(--e-paper)}
html.era .lb .nv:hover,html.era .lb .x:hover{background:var(--e-paper);color:var(--e-ink);border-color:var(--e-paper)}

/* ---------- języki: dłuższe kroje i słowa nie mogą rozpychać strony ---------- */
/* hero nie może poszerzać strony (pismo z paddingiem na cień wychodziło na telefonie 15–20 px za ekran) */
.e-hero{overflow-x:clip}
@media (max-width:991px){
  /* podpis nad „Un seul interlocuteur”: długi niemiecki podpis ucinał ostatnią literę */
  html.era .e-grow_cap{padding:0 20px;letter-spacing:.12em;line-height:1.7}
}

/* ---------- ograniczony ruch (i tryb bez skryptów): napisy leżą od razu na pełnych zdjęciach — cień pod nimi ---------- */
@media (prefers-reduced-motion:reduce){
  html:not(.ruch-wymuszony) .e-grow_img::after{opacity:1}
  html:not(.ruch-wymuszony) .e-foot_img::after{content:'';position:absolute;inset:0;background:rgba(5,5,6,.9)}
}
html.era.bez-ruchu .e-grow_img::after{opacity:1}
html.era.bez-ruchu .e-foot_img::after{content:'';position:absolute;inset:0;background:rgba(5,5,6,.9)}
/* długa etykieta pola wiadomości: bez pogrubienia, jak reszta opisów */
html.era .contact label[for="msg"]{font-weight:500}
/* bez animacji (ograniczony ruch albo GSAP się nie wczytał — klasa bez-ruchu): tor poziomy układa się w pionie jak na
   telefonie (wcześniej było widać tylko pierwszy panel, reszta toru była nieosiągalna), a sceny pokazują stan końcowy */
@media (prefers-reduced-motion:reduce){
  html:not(.ruch-wymuszony) .e-hz{height:auto!important}
  html:not(.ruch-wymuszony) .e-hz_st{position:relative;height:auto;overflow:visible}
  html:not(.ruch-wymuszony) .e-hz_tr{position:relative;flex-direction:column;transform:none!important}
  html:not(.ruch-wymuszony) .e-hz_p{height:auto;width:100%!important;padding:12vh calc(var(--u) * 120)!important}
  html:not(.ruch-wymuszony) .e-hz_img figure{height:80vh;clip-path:none}
}
html.era.bez-ruchu .e-hz{height:auto!important}
html.era.bez-ruchu .e-hz_st{position:relative;height:auto;overflow:visible}
html.era.bez-ruchu .e-hz_tr{position:relative;flex-direction:column;transform:none!important}
html.era.bez-ruchu .e-hz_p{height:auto;width:100%!important;padding:12vh calc(var(--u) * 120)!important}
html.era.bez-ruchu .e-hz_img figure{height:80vh;clip-path:none!important}
/* 01.10 · telefon Daniela (Samsung z ograniczonymi animacjami): boczne odstępy 120u to na telefonie po 31% szerokości z każdej
   strony — kolumna tekstu w środku, zdjęcie jak pasek, tytuły ucięte, napisy map na sobie. Na telefonie jak w zwykłym torze */
@media (max-width:991px){html.era.bez-ruchu .e-hz_p{padding:10vh 20px!important}}
@media (prefers-reduced-motion:reduce) and (max-width:991px){html:not(.ruch-wymuszony) .e-hz_p{padding:10vh 20px!important}}
html.era.bez-ruchu .e-hero,html.era.bez-ruchu .e-grow,html.era.bez-ruchu .e-int,html.era.bez-ruchu .e-arch{height:auto!important}
html.era.bez-ruchu .e-cs{display:none}
html.era.bez-ruchu .e-hero_st,html.era.bez-ruchu .e-grow_st,html.era.bez-ruchu .e-int_st,html.era.bez-ruchu .e-arch_st{position:relative;height:100vh}
html.era.bez-ruchu .e-grow_img{clip-path:none!important}
html.era.bez-ruchu .e-grow_img img{transform:none!important}
html.era.bez-ruchu .e-arch_a{clip-path:inset(0 50% 0 0)!important}
html.era.bez-ruchu .e-arch_b{clip-path:inset(0 0 0 50%)!important}
html.era.bez-ruchu .e-foot_in{opacity:1!important}

/* ===================== 27.09 · poprawki Daniela: złoto 24K, stopka dla dwóch wspólników, mapy ===================== */
/* paleta: czerń + złoto 24K (zmienne --e-gold* z brązu wracają do złota) */
:root{--e-gold:#C9A032;--e-gold-l:#E9C56B;--e-gold-d:#8E6A1F;
  --z24:linear-gradient(177deg,#FFF6D4 0%,#F6DB8C 15%,#E3B548 33%,#B7832A 49%,#EACB68 63%,#C38F2D 79%,#7B5316 100%);
  --olowek:rgba(34,28,20,.58)}
/* napisy: złoto z połyskiem (jasne światło, ciemniejsze odbicie, połysk na krawędzi) + cienki obrys ołówkiem dla czytelności */
html.era .e-t,html.era .e-s,html.era .e-t *,html.era .e-s *{background-image:var(--z24)!important;-webkit-background-clip:text!important;background-clip:text!important;color:var(--z24-lit,transparent)!important;-webkit-text-fill-color:var(--z24-lit,transparent)!important;-webkit-text-stroke:max(.6px,.0075em) var(--olowek);paint-order:stroke fill;text-shadow:none!important}
html.era .e-hero .e-t,html.era .e-hero .e-s,html.era .e-hero .e-t *,html.era .e-hero .e-s *{-webkit-text-stroke:max(.7px,.0075em) rgba(20,16,10,.55)}
html.era .e-hero_t{filter:drop-shadow(0 2px 18px rgba(0,0,0,.38))}
html.era .e-cs_arc text{fill:url(#z24-luk);stroke:rgba(34,28,20,.5);stroke-width:.9px;paint-order:stroke fill}

/* stopka: dwaj wspólnicy na równi */
html.era .e-foot_tels{display:flex;justify-content:center;align-items:flex-end;gap:calc(var(--u) * 80);flex-wrap:wrap}
html.era .e-foot_tels .e-foot_tel{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:inherit;text-decoration:none}
html.era .e-foot_tels .e-foot_tel .e-u{font-size:11px;letter-spacing:.3em;color:var(--e-gold-l)!important;opacity:1}
html.era .e-foot2 a{font-size:clamp(16px,calc(var(--u) * 20),22px)}
html.era .e-foot_tels .e-foot_tel .e-t{font-size:clamp(30px,calc(var(--u) * 46),54px);line-height:.9;display:block;letter-spacing:.01em;transition:filter .4s}
html.era .e-foot_tels .e-foot_tel:hover .e-t{filter:brightness(1.18)}

/* Paryż i Lazurowe Wybrzeże: czarne plansze z głębią, złote mapy, tytuły mieszczą się w ekranie */
html.era .e-hz_title{position:relative}
html.era .e-hz_title .e-szkic-paris{position:absolute;right:calc(var(--u) * 36);bottom:calc(var(--u) * 58);width:calc(var(--u) * 210);margin:0}
/* szerokości plansz toru zawsze od szerokości ekranu (--uw): plansza 1440 = cały ekran także przy jednostce z wysokością */
html.era .e-hz_paris,html.era .e-hz_coast{width:calc(var(--uw) * 1440)!important}
html.era .e-hz_loc{display:grid!important;grid-template-columns:minmax(0,35fr) minmax(0,65fr);align-items:center;column-gap:calc(var(--u) * 60);padding:calc(var(--u) * 130) calc(var(--u) * 80) calc(var(--u) * 70)!important;box-sizing:border-box;color:#efe3c6;
  background:radial-gradient(70% 75% at 66% 54%,#1d1810 0%,#100d09 52%,#070605 100%)}
html.era .e-hz_loc::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background:repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 5px)}
html.era .e-loc_txt{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--u) * 16);min-width:0}
html.era .e-loc_txt>.e-u{font-size:10px;letter-spacing:.3em;color:var(--e-gold-l)}
html.era .e-hz_paris h3.e-t{font-size:clamp(70px,calc(var(--u) * 132),160px);line-height:.84;margin:0}
html.era .e-hz_paris .e-loc_txt>.e-s{font-size:clamp(40px,calc(var(--u) * 64),78px);margin:calc(var(--u) * -30) 0 0 calc(var(--u) * 90)}
html.era .e-hz_coast .e-cttl{margin:0!important}
html.era .e-hz_coast .e-cttl .e-t{font-size:clamp(44px,calc(var(--u) * 76),92px)!important;white-space:nowrap}
html.era .e-hz_coast .e-cttl .e-s{font-size:clamp(44px,calc(var(--u) * 74),90px)!important;margin:-.3em 0 -.22em .8em!important}
html.era .e-loc_txt .e-p{color:rgba(239,227,198,.8)!important;font-size:15px;line-height:1.7;max-width:31em;margin:0}
html.era .e-loc_dep{color:rgba(239,227,198,.55);font-size:12px;line-height:1.85;letter-spacing:.03em;max-width:36em;margin:0}
html.era .e-hz_loc .e-map{width:100%!important;justify-self:center;margin:0}
html.era .e-hz_coast .e-map_in{width:min(100%,calc((100vh - var(--u) * 240) * 1.0627));margin:0 auto}
html.era .e-hz_paris .e-map_in{width:min(100%,calc((100vh - var(--u) * 240) * 1.3158));margin:0 auto}
html.era .e-hz_loc .e-map_in::before{-webkit-mask:none;mask:none;inset:-6%;background:radial-gradient(closest-side,rgba(226,180,70,.09),transparent 72%)}
html.era .e-hz_loc .e-map svg{filter:drop-shadow(0 0 2.5px rgba(233,190,80,.45))}
html.era .e-hz_paris .e-map svg{overflow:hidden}
html.era .e-hz_paris .e-map_in{-webkit-mask:radial-gradient(closest-side,#000 80%,transparent 100%);mask:radial-gradient(closest-side,#000 80%,transparent 100%)}
html.era .e-hz_coast .e-map .e-map_lad{stroke:none}
html.era .e-hz_loc .e-map .e-map_lad{fill:#15120c;stroke:rgba(214,178,98,.38);stroke-width:1}
html.era .e-hz_loc .e-map .e-map_wyspa{fill:#15120c;stroke:rgba(214,178,98,.5);stroke-width:.8}
html.era .e-hz_coast .e-map .e-map_brzeg{fill:none;stroke:url(#zl-a);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
html.era .e-hz_paris .e-map .e-map_rzeka{fill:none;stroke:url(#zl-p);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
html.era .e-hz_loc .e-map .e-pin b,html.era .e-hz_loc .e-map .e-pin:nth-of-type(n) b{color:#f4dc98;background:none!important;text-shadow:0 1px 10px #000,0 0 2px #000}
html.era .e-hz_loc .e-map .e-pin small,html.era .e-hz_loc .e-map .e-pin:nth-of-type(n) small{color:rgba(239,227,198,.72);background:none!important;text-shadow:0 1px 8px #000}
html.era .e-hz_loc .e-map .e-pin i{background:radial-gradient(circle at 35% 30%,#fff3c4,#e2b447 45%,#8e6a1f 100%);box-shadow:0 0 0 3px #0d0b08,0 0 14px rgba(233,190,80,.65)}
html.era .e-hz_loc .e-map .e-pin i::after{border-color:rgba(233,190,80,.75)}
html.era .e-hz_loc .e-map_roza{color:#dcb45c}
html.era .e-hz_loc .e-map_osm{color:rgba(239,227,198,.45)}
html.era .e-hz_loc .e-loc_szkic{position:relative;margin:calc(var(--u) * 6) 0 0;width:clamp(120px,calc(var(--u) * 170),200px);padding:6px;background:#0c0a08;border:1px solid rgba(214,178,98,.42);transform:rotate(-2.4deg);box-shadow:0 20px 44px rgba(0,0,0,.55)}
html.era .e-loc_szkic img{display:block;width:100%;height:auto}
html.era .e-loc_szkic figcaption{position:absolute;left:10px;bottom:10px}

/* 27.09 · bez natywnego paska przewijania (jak w ERA); szyna do przeciągania (sznurek) zostaje po lewej, z licznikiem stron w złocie */
html.era{scrollbar-width:none}
html.era::-webkit-scrollbar,html.era body::-webkit-scrollbar{display:none;width:0;height:0}
html.era .e-sbar{left:30px;right:auto;mix-blend-mode:normal;color:var(--e-gold);width:auto;gap:12px}
html.era .e-sbar_lbl{font-size:10px;letter-spacing:.16em;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);color:var(--e-gold)}
html.era .e-sbar_tr{background:rgba(201,160,50,.28)}
html.era .e-sbar_th::after{background:var(--e-gold);width:2px}
@media (max-width:991px) and (min-width:700px){html.era .e-head .lang{display:flex!important}}

/* 27.09 · rada: bez ciemnego szwu pod zdjęciem willi — pas pod wschodzącym kołem w kolorze koła */
html.era .e-cs:not(.paper){background:none}

/* 27.09 · zdjęcie willi stoi, aż wschodzące koło całe je przykryje (bez prostego cięcia pod łukiem) */
@media (min-width:992px){html.era .e-hero{height:460vh}html.era .e-cs:not(.paper){margin-top:-230vh}}

/* ===================== 27.09 · MENU 2 — galeria premium (zapowiedź w ukrytym menu + pełny ekran) ===================== */
html.era .e-menu_prem{position:absolute;z-index:3;right:clamp(28px,6vw,120px);top:50%;transform:translateY(-50%);width:clamp(250px,23vw,360px);padding:0;margin:0;border:0;background:none;color:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:18px}
html.era .e-menu_prem_img{position:relative;display:block;aspect-ratio:1920/1088;width:100%}
html.era .e-menu_prem_img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;outline:1px solid rgba(214,178,98,.4);outline-offset:-1px;box-shadow:0 26px 50px rgba(0,0,0,.5);transition:transform .9s var(--e-out)}
html.era .e-menu_prem_img img:nth-child(1){transform:translate(-9%,6%) rotate(-7deg) scale(.86);filter:brightness(.55)}
html.era .e-menu_prem_img img:nth-child(2){transform:translate(9%,4%) rotate(6deg) scale(.9);filter:brightness(.7)}
html.era .e-menu_prem_img img:nth-child(3){transform:none}
html.era .e-menu_prem:hover .e-menu_prem_img img:nth-child(1){transform:translate(-16%,8%) rotate(-11deg) scale(.86)}
html.era .e-menu_prem:hover .e-menu_prem_img img:nth-child(2){transform:translate(16%,5%) rotate(10deg) scale(.9)}
html.era .e-menu_prem:hover .e-menu_prem_img img:nth-child(3){transform:scale(1.03)}
html.era .e-menu_prem_t{display:flex;align-items:baseline;gap:12px;line-height:1}
html.era .e-menu_prem_t .e-s{font-size:clamp(30px,2.6vw,44px)}
html.era .e-menu_prem_t .e-t{font-size:clamp(40px,3.6vw,60px);line-height:.86}
html.era .e-menu_prem_n{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.3em;color:var(--e-gold-l)}
html.era .e-menu_prem_n i{flex:1;height:1px;background:linear-gradient(90deg,rgba(214,178,98,.6),rgba(214,178,98,0));transform-origin:0 50%;transition:transform .6s var(--e-out)}
html.era .e-menu_prem:hover .e-menu_prem_n i{transform:scaleX(1.25)}
html.era .e-menu_prem:focus-visible{outline:none;box-shadow:0 0 0 2px #0b0907,0 0 0 4px var(--e-gold)}

html.era .e-prem{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;overflow:hidden;color:#efe3c6;
  background:radial-gradient(110% 85% at 50% 42%,#1a150e 0%,#0c0a07 55%,#050404 100%)}
html.era .e-prem[hidden]{display:none}
html.era .e-prem_h{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:30px clamp(24px,4vw,64px) 0}
html.era .e-prem_tt{display:flex;align-items:baseline;gap:14px;line-height:1}
html.era .e-prem_tt .e-s{font-size:clamp(30px,2.8vw,46px)}
html.era .e-prem_tt .e-t{font-size:clamp(40px,3.8vw,60px);line-height:.86}
html.era .e-prem_n{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.3em;color:var(--e-gold-l)}
html.era .e-prem_n b{font-weight:600;color:#fff1c9}
html.era .e-prem_n i{width:54px;height:1px;background:rgba(214,178,98,.5)}
html.era .e-prem_x{display:flex;align-items:center;gap:12px;padding:12px 18px 12px 22px;border:1px solid rgba(214,178,98,.45);border-radius:40px;background:none;color:var(--e-gold-l);font-size:11px;letter-spacing:.28em;cursor:pointer;transition:background .3s,color .3s}
html.era .e-prem_x:hover{background:var(--e-gold);color:#0b0907}
html.era .e-prem_x svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.5;fill:none}
html.era .e-prem_st{position:relative;flex:1;display:flex;align-items:center;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none}
html.era .e-prem_tr{display:flex;align-items:flex-start;column-gap:4vw;will-change:transform}
html.era .e-prem_s{flex:none;width:min(72vw,calc((100vh - 260px) * 1.7647));margin:0;position:relative;transform-origin:50% 45%}
html.era .e-prem_s img{display:block;width:100%;height:auto;aspect-ratio:1920/1088;object-fit:cover;outline:1px solid rgba(214,178,98,.28);outline-offset:-1px;box-shadow:0 40px 90px rgba(0,0,0,.6);pointer-events:none}
html.era .e-prem_s{overflow:visible}
html.era .e-prem_s figcaption{display:flex;align-items:center;gap:18px;padding-top:18px}
html.era .e-prem_nr{font-size:11px;letter-spacing:.3em;color:var(--e-gold)}
html.era .e-prem_c{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;text-transform:uppercase;font-size:clamp(18px,1.6vw,26px);letter-spacing:.02em;color:#f3e4bf}
html.era .e-prem_s .e-vis{margin-left:auto;position:static}
html.era .e-prem_nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:22px;padding:6px 0 28px}
html.era .e-prem_b{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(214,178,98,.5);background:none;color:var(--e-gold-l);cursor:pointer;transition:background .3s,color .3s}
html.era .e-prem_b:hover{background:var(--e-gold);color:#0b0907}
html.era .e-prem_b svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.4;fill:none}
html.era .e-prem_bar{position:relative;width:min(320px,40vw);height:1px;background:rgba(214,178,98,.28)}
html.era .e-prem_bar i{position:absolute;left:0;top:-.5px;height:2px;width:0;background:var(--e-gold)}
html.era .e-prem_uw{position:absolute;left:clamp(24px,4vw,64px);bottom:34px;max-width:30vw;font-size:9.5px;letter-spacing:.18em;line-height:1.6;color:rgba(239,227,198,.42)}
html.era .e-prem_x:focus-visible,html.era .e-prem_b:focus-visible{outline:none;box-shadow:0 0 0 2px #0b0907,0 0 0 4px var(--e-gold)}
@media (max-width:991px){html.era .e-menu_prem{position:relative;right:auto;top:auto;transform:none;width:min(320px,80vw);margin:26px 0 0}
  html.era .e-prem_s{width:86vw}html.era .e-prem_uw{display:none}html.era .e-prem_h{padding-top:18px}}

/* 27.09 · rada (strateg): złoto tylko na literach-liściach — rodzic przezroczysty, więc przy animacji SplitText litery się nie dublują */
html.era :is(.e-t,.e-s):has(.split-line,.split-word,.split-char),html.era :is(.e-t,.e-s) :has(.split-line,.split-word,.split-char){background-image:none!important}
/* menu bez własnych pasków przewijania; mapa wybrzeża: sam złoty brzeg, bez poświaty na prostokącie lądu */
html.era .e-menu_c{overflow-x:hidden;scrollbar-width:none}
html.era .e-menu_c::-webkit-scrollbar{display:none}
html.era .e-hz_coast .e-map .e-map_lad,html.era .e-hz_coast .e-map .e-map_wyspa{fill:none;stroke:none}

/* 27.09 · złote litery bez ubytków: obszar malowania gradientu większy niż ciasna linia (daszki Ô, É i skraje liter nie zostają bez złota) */
html.era .e-t:not(:has(:not(br):not(.zl-svg))),html.era .e-s:not(:has(:not(br):not(.zl-svg))),html.era :is(.e-t,.e-s) :not(:has(:not(br):not(.zl-svg))){padding:.18em .1em .12em;margin:-.18em -.1em -.12em}
/* plansza „Paris & Côte d'Azur”: tytuł mieści się w swojej planszy, nie wchodzi pod zdjęcie obok */
html.era .e-hz_title .e-t{font-size:calc(var(--u) * 158)}
html.era .e-hz_title .ln2{padding-left:calc(var(--u) * 120)}
/* kwiaty (bugenwilla) nie pasują do czerni i złota — zdjęte ze strony (Daniel 27.09) */
html.era .e-fl{display:none!important}

/* 27.09 · szkice wtopione w stronę (Daniel): bez ramki i prostokąta; Paryż — akwarela zlewa się z papierem strony, Wybrzeże — złote linie na czerni */
html.era .e-loc_szkic{border:0!important;padding:0!important;background:none!important;box-shadow:none!important;transform:none!important}
html.era .e-loc_szkic figcaption{position:static!important;display:block;margin-top:4px;padding:0;background:none!important;font-size:8.5px;letter-spacing:.24em;opacity:.55;color:inherit}
html.era .e-hz_title .e-szkic-paris{width:calc(var(--u) * 300);right:calc(var(--u) * 10);bottom:calc(var(--u) * 20);z-index:0}
html.era .e-hz_title .e-szkic-paris img{mix-blend-mode:multiply;-webkit-mask:radial-gradient(closest-side,#000 62%,transparent 100%);mask:radial-gradient(closest-side,#000 62%,transparent 100%)}
html.era .e-hz_title .e-szkic-paris figcaption{color:var(--e-ink-2);text-align:center}
html.era .e-hz_title .e-t{position:relative;z-index:1}
html.era .e-hz_loc .e-szkic-azur{width:clamp(170px,calc(var(--u) * 230),280px);margin-top:calc(var(--u) * 4)}
html.era .e-hz_loc .e-szkic-azur img{filter:drop-shadow(0 0 6px rgba(233,190,80,.18))}
html.era .e-hz_loc .e-szkic-azur figcaption{color:rgba(239,227,198,.6)}

/* 27.09 · bez nachodzenia liter (Daniel): pisany napis stoi pod wersalikami, nie na nich */
@media (min-width:992px){
  html.era .e-hero_b{margin-top:calc(var(--u) * 14)}
  html.era .e-hero_s{margin:calc(var(--u) * 28 - .32em) -.45em -.32em calc(var(--u) * 280 - .45em)!important;transform:rotate(-4deg)!important}
  html.era .e-hero_k{margin-top:calc(var(--u) * 26)}
  html.era .e-hero_row{margin-top:calc(var(--u) * 18)}
}
html.era .e-hz_title .e-t{line-height:1}
html.era .e-hz_paris .e-loc_txt>.e-s{margin:calc(var(--u) * 6) 0 0 calc(var(--u) * 90)!important}
html.era .e-hz_coast .e-cttl .e-t{line-height:.98!important}
html.era .e-hz_coast .e-cttl .e-s{margin:.06em 0 .08em .8em!important}
html.era .e-cs_big .e-s{margin-top:calc(var(--u) * 14)!important}
/* nagłówek na jasnych sekcjach: miękki pas papieru pod paskiem — tytuły nie mieszają się z telefonami */
html.era body>header.e-head.theme_on-light::before{opacity:1;background:linear-gradient(180deg,rgba(244,241,235,.97) 0%,rgba(244,241,235,.88) 52%,rgba(244,241,235,0) 100%)}
html.era.e-menu-on body>header.e-head.theme_on-light::before{opacity:0}

/* 27.09 · złote tytuły także w starszych sekcjach (Projets, Estimation, Rendez-vous, Contact, Anatomie, Avant/Après) */
html.era :is(#anat,#projets,#avap,#estimation,#rdv,#contact) h2{background-image:var(--z24);-webkit-background-clip:text;background-clip:text;color:var(--z24-lit,transparent)!important;-webkit-text-fill-color:var(--z24-lit,transparent);-webkit-text-stroke:max(.6px,.0075em) var(--olowek);padding:.18em .1em .12em;margin-left:-.1em;margin-right:-.1em}
html.era :is(#anat,#projets,#avap,#estimation,#rdv,#contact) h2 em{color:transparent!important;-webkit-text-fill-color:transparent}
/* „Entreprise immatriculée…” i „Maisons-Alfort” bez nachodzenia */
html.era .e-reg .e-s{margin:calc(var(--u) * 18) 0 0 calc(var(--u) * 260)!important}

/* 27.09 · „Ce que vous recevez”: tytuł i pismo w złocie 24K z obrysem (tylko litery-liście, bez dublowania przy podziale) */
html.era .e-docs_t,html.era .e-docs_t *,html.era .e-docs_s,html.era .e-docs_s *{background-image:var(--z24)!important;-webkit-background-clip:text!important;background-clip:text!important;color:var(--z24-lit,transparent)!important;-webkit-text-fill-color:var(--z24-lit,transparent)!important;-webkit-text-stroke:max(.6px,.0075em) var(--olowek)}
html.era :is(.e-docs_t,.e-docs_s):has(.split-line,.split-word,.split-char,.e-docs_ln,.e-docs_w,.e-docs_ch),html.era :is(.e-docs_t,.e-docs_s) :has(.split-line,.split-word,.split-char,.e-docs_ln,.e-docs_w,.e-docs_ch){background-image:none!important}
html.era .e-docs_t:not(:has(:not(br):not(.zl-svg))),html.era .e-docs_s:not(:has(:not(br):not(.zl-svg))),html.era :is(.e-docs_t,.e-docs_s) :not(:has(:not(br):not(.zl-svg))){padding:.18em .1em .12em;margin:-.18em -.1em -.12em}
/* 01.10 · P03 z QA: słowo pocięte na litery nie łamie się w środku („TRANSP / ARENCE”) */
html.era .e-docs_w{white-space:nowrap}

/* 27.09 · „noir sur blanc” pod tytułem, bez nachodzenia */
html.era .e-docs .e-docs_s{margin:.1em 0 0 .8em!important}

/* 27.09 · szyna po lewej chowa się na czas przejazdu plansz od prawej do lewej (nie zasłania treści) */
html.era .e-sbar{transition:opacity .45s var(--e-out)}
html.era.e-tor-jedzie .e-sbar{opacity:0;pointer-events:none}
/* najazd kursorem: złote podkreślenie rysowane od lewej (nawigacja, wycena, formularze) */
html.era .e-head .e-nav a,html.era .estim .es-sel-v,html.era .estim button,html.era .estim label,html.era .e-menu_l a span,html.era .contact a{background-image:linear-gradient(90deg,#E3B548,#F6DB8C 50%,#B7832A);background-repeat:no-repeat;background-position:0 100%;background-size:0 1.5px;transition:background-size .5s var(--e-out)}
html.era .e-head .e-nav a:hover,html.era .estim .es-sel-v:hover,html.era .estim .es-sel:hover .es-sel-v,html.era .estim button:hover,html.era .estim label:hover,html.era .e-menu_l a:hover span,html.era .contact a:hover{background-size:100% 1.5px}

/* 27.09 · kompas 3D w kole zaraz po willi (w miejscu krzyżyka), wielkości ok. dwóch monet 2 € na laptopie */
html.era .e-kompas3d{position:relative;width:clamp(200px,29vh,300px);aspect-ratio:1;margin:0 0 8px;cursor:pointer;border-radius:50%}
/* 01.10 · Daniel: „a propos kompasu, ja bym go dał na środek”. Kolumna była wyśrodkowana razem z napisami pod kompasem,
   więc kompas stał 112–145 px nad środkiem ekranu. Teraz kolumna zaczyna się od góry z takim odstępem, że ŚRODEK kompasu
   wypada na środku ekranu (--kh = rozmiar kompasu), a napisy idą pod nim; na telefonie krótsza złota kreska */
html.era .e-cs-kompas{--kh:clamp(200px,29vh,300px)}
html.era .e-cs-kompas .e-cs_in{justify-content:flex-start;padding-top:calc(50vh - var(--kh) / 2)}
html.era .e-cs-kompas .e-kompas3d{width:var(--kh)}
@media (max-width:991px){html.era .e-cs-kompas .e-cs_in{gap:14px}html.era .e-cs-kompas .e-cs_line{height:6vh}}
html.era .e-kompas3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
html.era .e-kompas3d_zap{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s var(--e-out);pointer-events:none}
html.era .e-kompas3d.gotowy .e-kompas3d_zap{opacity:0}
html.era .e-kompas3d:focus-visible{outline:none;box-shadow:var(--e-focus)}

/* 27.09 · złoto 24K także na tytułach kart usług i kroków metody (napisy jak reszta strony) */
html.era .tile .t b,html.era #steps b{background-image:var(--z24);-webkit-background-clip:text;background-clip:text;color:var(--z24-lit,transparent)!important;-webkit-text-fill-color:var(--z24-lit,transparent);-webkit-text-stroke:max(.5px,.0075em) var(--olowek);padding:.18em .1em .12em;margin:-.18em -.1em -.12em}
html.era #steps b{-webkit-text-stroke:max(.5px,.0075em) rgba(0,0,0,.35)}

/* 27.09 · złote linijki tytułu bez osobnej warstwy (mniej przerysowań = brak smug) */
html.era .e-hz_title .e-t{will-change:auto!important}

/* 27.09 wieczór · nazwy kompasu ostrym tekstem (w 3D miały ok. 5 px): DASTAN góra, BTP dół, DANIEL lewo, DAWID prawo.
   Po otwarciu w tych samych miejscach: MENU 2 / SEKCJE / VIP / GALERIA. Ciemne złoto, bo tło koła jest jasne (kontrast ≥ 4,5). */
html.era .e-kp{position:absolute;display:grid;pointer-events:none;white-space:nowrap;font-size:13px;letter-spacing:.26em;line-height:1;z-index:2}
html.era .e-kp b{grid-area:1/1;font-weight:700;background:linear-gradient(180deg,#86611A 0%,#6A4A10 52%,#4F360A 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,250,238,.55));transition:opacity .32s var(--e-out),transform .5s var(--e-out)}
html.era .e-kp-n{left:50%;top:5.2%;transform:translate(-50%,-100%);justify-items:center}
html.era .e-kp-s{left:50%;top:94.8%;transform:translateX(-50%);justify-items:center}
html.era .e-kp-w{right:94.8%;top:50%;transform:translateY(-50%);justify-items:end}
html.era .e-kp-e{left:94.8%;top:50%;transform:translateY(-50%);justify-items:start}
html.era .e-kp-w b,html.era .e-kp-e b{margin-right:-.26em}
html.era .e-kp_m{opacity:0;transform:translateY(5px)}
html.era .e-kompas3d:is([data-dk3d-stan="otwieranie"],[data-dk3d-stan="otwarte"],[data-dk3d-stan="zamykanie"]) .e-kp_n{opacity:0;transform:translateY(-4px)}
html.era .e-kompas3d[data-dk3d-stan="otwarte"] .e-kp_m{opacity:1;transform:none;transition-delay:.08s}
@media (prefers-reduced-motion:reduce){html.era:not(.ruch-wymuszony) .e-kp b{transition:none}}

/* 27.09 wieczór · galeria VIP: przejścia premium (rama z przycięciem, obraz w ramie, cień sąsiadów, złota nić, licznik) */
html.era .e-prem_ram{position:relative;overflow:hidden;clip-path:inset(0% 0% 0% 0%);outline:1px solid rgba(214,178,98,.3);outline-offset:-1px;will-change:clip-path}
html.era .e-prem_s img{outline:none;box-shadow:none;transform-origin:50% 50%;will-change:transform}
html.era .e-prem_cien{position:absolute;inset:0;background:#07060a;opacity:0;pointer-events:none}
html.era .e-prem_gl{position:absolute;top:0;bottom:0;left:100%;width:2px;margin-left:-1px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,#F6DB8C 18%,#FFF6D4 50%,#E3B548 82%,transparent 100%);box-shadow:0 0 14px 2px rgba(233,197,107,.75),0 0 44px 6px rgba(233,197,107,.28)}
html.era .e-prem_s figcaption{overflow:hidden}
html.era .e-prem_n b{position:relative;display:inline-block;overflow:hidden;min-width:2.3ch;height:1.3em;line-height:1.3em;vertical-align:middle}
html.era .e-prem_n b span{position:absolute;left:0;top:0}

/* 27.09 wieczór · palmy Saint-Tropez: pastel bez papieru (Daniel: „złota mgła słabo, może być pastel”), bez złotej poświaty */
html.era .e-hz_loc .e-szkic-azur{width:clamp(190px,calc(var(--u) * 250),300px)}
html.era .e-hz_loc .e-szkic-azur img{filter:none}
/* 27.09 wieczór · drugie koło („Des espaces à vivre”): krótszy przestój z samym tytułem (Daniel: „braki”, pusty ekran) */
html.era .e-cs.paper{height:240vh}

/* 27.09 wieczór · Daniel: „Du premier trait nie widać wcale” → biały środek, czarny obrys ołówka (czytelne na niebie, dachu i nocą).
   paint-order: obrys pod literą, więc litera nie chudnie. */
html.era .e-hero_row>span{color:#fff;-webkit-text-stroke:1.8px rgba(14,12,10,.9);paint-order:stroke fill;text-shadow:0 2px 14px rgba(0,0,0,.25)}
html.era .e-hero .e-hero_k,html.era .e-hero .e-tabs button{color:#fff;-webkit-text-stroke:1px rgba(14,12,10,.85);paint-order:stroke fill;text-shadow:0 1px 8px rgba(0,0,0,.3)}
html.era .e-hero .e-tabs button{opacity:.8}
html.era .e-hero .e-tabs button.is-on{opacity:1}
html.era .e-hero .e-tabs i{background:#fff;opacity:.9;box-shadow:0 0 0 .7px rgba(14,12,10,.75)}

/* 27.09 wieczór · mapa Paryża: szkice miejsc złotą kreską (rysują się piórem po rzekach) i dzielnice */
html.era .e-map .e-map_szkic{fill:none;stroke:#E4C173;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
html.era .e-map .e-map_dz{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;fill:rgba(240,226,190,.8)}

/* 27.09 wieczór · hero: hasło „Sur mesure” w środku; „Du premier trait / À la remise des clés” złote 24K z czarnym obrysem.
   Obrys jako czarne halo (drop-shadow) — kreska na złotym gradiencie zjadałaby cienkie linie liter. */
html.era .e-hero_row>span[data-i],html.era .e-hero_mot b{background:var(--z24);-webkit-background-clip:text;background-clip:text;color:var(--z24-lit,transparent);
  -webkit-text-fill-color:var(--z24-lit,transparent);-webkit-text-stroke:0;text-shadow:none;
  filter:drop-shadow(0 0 .7px rgba(10,8,6,.95)) drop-shadow(0 0 .7px rgba(10,8,6,.9)) drop-shadow(0 2px 10px rgba(0,0,0,.28))}
html.era .e-hero_row>span.e-hero_mot{display:flex;align-items:center;gap:calc(var(--u) * 18);font-size:calc(var(--u) * 30);letter-spacing:.08em;text-shadow:none}
html.era .e-hero_mot b{font-weight:inherit}
html.era .e-hero_mot i{display:block;width:calc(var(--u) * 64);height:1px;background:linear-gradient(90deg,transparent,#E9C56B);filter:drop-shadow(0 0 .6px rgba(10,8,6,.9))}
html.era .e-hero_mot i:last-child{transform:scaleX(-1)}

/* 27.09 wieczór · portal VIP z kompasu: pełny ekran jak galeria premium, zdjęcie w tle, dwie linie bezpośrednie, wizyta */
html.era .e-vip{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;overflow:hidden;color:#efe3c6;background:#070605}
html.era .e-vip[hidden]{display:none}
html.era .e-vip_bg{position:absolute;inset:0;overflow:hidden}
html.era .e-vip_bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9)}
html.era .e-vip_bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,5,4,.92) 0%,rgba(6,5,4,.72) 42%,rgba(6,5,4,.2) 78%,rgba(6,5,4,.35) 100%),
  linear-gradient(180deg,rgba(6,5,4,.55) 0%,transparent 26%,transparent 70%,rgba(6,5,4,.7) 100%)}
html.era .e-vip_h{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:30px clamp(24px,4vw,64px) 0}
html.era .e-vip_tt{display:flex;flex-direction:column;line-height:1}
html.era .e-vip_tt .e-t{font-size:clamp(64px,7vw,112px);line-height:.86}
html.era .e-vip_tt .e-s{font-size:clamp(28px,2.6vw,42px);margin:.1em 0 0 .4em}
html.era .e-vip_in{position:relative;z-index:2;margin:auto 0;padding:0 clamp(24px,4vw,64px) clamp(40px,6vh,72px);max-width:760px}
html.era .e-vip_p{margin:0 0 34px;max-width:46ch;font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:#efe3c6}
html.era .e-vip_os{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:34px}
html.era .e-vip_k{display:flex;flex-direction:column;gap:10px;padding:22px 24px;border:1px solid rgba(214,178,98,.4);background:linear-gradient(160deg,rgba(24,19,12,.72),rgba(8,7,5,.6));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.era .e-vip_k small{font-size:10.5px;letter-spacing:.28em;color:#d8c08a}
html.era .e-vip_nr{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-size:clamp(30px,2.6vw,40px);line-height:1;letter-spacing:.02em;text-decoration:none;
  background:var(--z24);-webkit-background-clip:text;background-clip:text;color:var(--z24-lit,transparent);-webkit-text-fill-color:var(--z24-lit,transparent)}
html.era .e-vip_wa{align-self:flex-start;font-size:10.5px;letter-spacing:.26em;color:#efe3c6;text-decoration:none;padding-bottom:3px;background:linear-gradient(var(--e-gold),var(--e-gold)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--e-out)}
html.era .e-vip_wa:hover,html.era .e-vip_wa:focus-visible{background-size:100% 1px}
html.era .e-vip_rdv{display:inline-flex;align-items:center;gap:14px;padding:18px 30px;border-radius:40px;background:var(--z24);color:#0b0907;text-decoration:none;font-size:11px;letter-spacing:.26em;font-weight:700;
  box-shadow:0 14px 40px rgba(0,0,0,.45);transition:transform .4s var(--e-out),box-shadow .4s}
html.era .e-vip_rdv:hover{transform:translateY(-2px);box-shadow:0 20px 50px rgba(0,0,0,.55)}
html.era .e-vip_rdv:focus-visible,html.era .e-vip_nr:focus-visible,html.era .e-vip_wa:focus-visible{outline:none;box-shadow:0 0 0 2px #0b0907,0 0 0 4px var(--e-gold)}
html.era .e-vip_vis{position:absolute;left:auto;top:auto;right:clamp(24px,4vw,64px);bottom:26px;width:auto;z-index:2}
@media (max-width:700px){html.era .e-vip_os{grid-template-columns:1fr}html.era .e-vip_tt .e-t{font-size:64px}}

/* 27.09 wieczór · kompas osadzony w papierze: ciepły, miękki cień (bez niego wisiał jak wklejony obiekt 3D) */
html.era .e-kompas3d canvas,html.era .e-kompas3d_zap{filter:drop-shadow(0 14px 20px rgba(58,42,16,.2)) drop-shadow(0 3px 5px rgba(58,42,16,.16))}

/* 27.09 noc · Daniel: „na czarno super kontrast, na złoto nie pasuje, nie widać dobrze” → hasła hero czarne.
   Cienkie jasne halo tylko po to, żeby „À la remise des clés” nie ginęło na ciemnym dachu willi. Hero gaśnie, zanim willa przejdzie w noc. */
html.era .e-hero_row>span[data-i],html.era .e-hero_mot b{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#0e0c0a;-webkit-text-fill-color:#0e0c0a;
  -webkit-text-stroke:0;text-shadow:none;filter:drop-shadow(0 0 .8px rgba(255,251,242,.75)) drop-shadow(0 0 7px rgba(255,251,242,.28))}
html.era .e-hero_mot i{background:linear-gradient(90deg,transparent,#0e0c0a);filter:drop-shadow(0 0 .6px rgba(255,251,242,.6))}
html.era .e-hero .e-hero_k{color:#0e0c0a;-webkit-text-stroke:0;text-shadow:none;filter:drop-shadow(0 0 .7px rgba(255,251,242,.7))}
html.era .e-hero_row>span[data-i]{filter:drop-shadow(0 0 1px rgba(255,251,242,.95)) drop-shadow(0 0 10px rgba(255,251,242,.62)) drop-shadow(0 0 22px rgba(255,251,242,.3))}
/* 27.09 noc · Daniel: „À la remise des clés na biało” (leży na ciemnym dachu willi); dwa pozostałe hasła zostają czarne */
html.era .e-hero_row>span[data-i="e_h_r"]{color:#fff;-webkit-text-fill-color:#fff;filter:drop-shadow(0 0 .8px rgba(10,8,6,.9)) drop-shadow(0 1px 8px rgba(0,0,0,.35))}
/* 27.09 noc · mapa Paryża: kropki przedmieść (bliskie w prawdziwych miejscach, dalsze departamenty na obrzeżu w swoim kierunku) */
html.era .e-map .e-map_kr{fill:#E4C173}
html.era .e-map .e-map_kr-o{fill:none;stroke:#E4C173;stroke-width:1;opacity:.55}
html.era .e-map .e-map_dz-pod{font-size:11px;letter-spacing:.18em;fill:rgba(240,226,190,.68)}

/* 27.09 noc · mapa Paryża: departamenty jak róża kompasu wokół Paryża (kierunki prawdziwe, bez odległości) */
html.era .e-hz_paris .e-map_in{-webkit-mask:none;mask:none}
html.era .e-hz_paris .e-map_in>svg{-webkit-mask:radial-gradient(closest-side,#000 80%,transparent 100%);mask:radial-gradient(closest-side,#000 80%,transparent 100%)}
html.era .e-dep{position:absolute;z-index:3;display:flex;align-items:baseline;gap:7px;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}
html.era .e-dep b{font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,226,190,.82)}
html.era .e-dep small{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-size:17px;line-height:1;background:var(--z24);-webkit-background-clip:text;background-clip:text;color:var(--z24-lit,transparent);-webkit-text-fill-color:var(--z24-lit,transparent)}
html.era .e-dep i{position:relative;align-self:center;width:6px;height:6px;border-radius:50%;background:#E4C173;box-shadow:0 0 0 3px rgba(228,193,115,.18)}
html.era .e-dep i::after{content:'';position:absolute;left:50%;top:50%;width:18px;height:1px;background:linear-gradient(90deg,#E4C173,transparent);transform-origin:0 50%;transform:rotate(var(--k))}
html.era .e-dep-e,html.era .e-dep-ne,html.era .e-dep-se{flex-direction:row-reverse}

/* 27.09 noc · sekcja wnętrza: rosnące zdjęcie wchodziło pod złoty napis (złoto ginęło na jasnej podłodze, plakietka zasłaniała „cuisines”).
   Napis czarnym atramentem z jasnym halo (jak hasła w hero), węższa kolumna, plakietka w prawym górnym rogu zdjęcia. */
html.era .e-int_cap{max-width:calc(var(--u) * 250)}
html.era .e-int_cap .e-t{font-size:calc(var(--u) * 30);filter:drop-shadow(0 0 .8px rgba(255,251,242,.9)) drop-shadow(0 0 12px rgba(255,251,242,.6))}
html.era .e-int_cap .e-t,html.era .e-int_cap .e-t *{background:none!important;color:var(--e-ink)!important;-webkit-text-fill-color:var(--e-ink)!important;-webkit-text-stroke:0!important}
html.era .e-int_img .e-vis{left:auto;right:14px;top:14px;bottom:auto}
html.era .e-int_cap{max-width:calc(var(--u) * 175)}

/* ===== 27.09 noc · KONTRAST (pomiar pikseli: odbior/kontrast/RAPORT.md) ===== */
/* 1) złoto na jasnym papierze: głębokie złoto jak folia na kremowym papierze (rdzeń liter ok. 4,7:1 zamiast 1,2–1,9:1) */
html.era{--z24:linear-gradient(177deg,#C9A24E 0%,#A98336 18%,#8C6720 38%,#6E4E12 50%,#A07A30 63%,#7A5816 80%,#4E3509 100%)}
/*    ciemne sekcje, zdjęcia i nakładki zostają przy jasnym 24K */
html.era :is(.e-hero,[data-bg="dark"],#process,#rdv,.e-foot,.e-menu,.e-prem,.e-vip,.e-arch,.e-hz_loc,.e-quote){
  --z24:url(/img/era/zloto-24k.webp);--z24-lit:transparent}   /* 01.10 wieczór: folia 24K z obrazu zamiast gradientu (paleta.css, „złoto jak folia”); litery przezroczyste pod folią */
/* 2) tytuł hero na niebie: ciasne ciemne halo pod złotem (było 1,6:1) */
html.era .e-hero_t{filter:drop-shadow(0 0 1.2px rgba(10,8,6,.6)) drop-shadow(0 2px 18px rgba(0,0,0,.38))}
/* 3) sekcja „Construction”: akapit leżał złotem na białej elewacji (1,0:1) → ciemny scrim od dołu i z lewej, tekst jasny */
html.era .e-arch_b::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(8,10,12,.82) 0%,rgba(8,10,12,.5) 26%,rgba(8,10,12,0) 52%),linear-gradient(90deg,rgba(8,10,12,.5) 0%,rgba(8,10,12,0) 48%)}
html.era .e-arch_p .e-t,html.era .e-arch_p .e-t *{background:none!important;color:#fff!important;-webkit-text-fill-color:#fff!important;-webkit-text-stroke:0!important}
html.era .e-arch_p .e-t{filter:drop-shadow(0 1px 12px rgba(0,0,0,.45))}
html.era .e-arch_p .e-u{color:#F3D98E;opacity:1}
/* 4) licznik stron w lewej szynie (stały, pod nim raz jasno, raz ciemno): własna ciemna pastylka */
html.era .e-sbar_lbl{color:#F3D98E;background:rgba(14,16,19,.64);padding:7px 3px;border-radius:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* 5) nieaktywne języki w pasku (było krycie .5) */
html.era .e-head .lang button{opacity:.8}
html.era .e-menu_lang button{color:rgba(243,233,210,.9)}
/* 6) plakietki „Image de synthèse”: ciemniejsze tło, biały napis (na jasnych zdjęciach ginęły) */
html.era .e-vis,html.era .vis-badge{background:rgba(var(--e-graf-rgb),.68)!important;color:#fff!important}
/* 7) drobne podpisy na ciemnych mapach */
html.era [data-bg="dark"] .e-map_osm{color:rgba(239,227,198,.8);opacity:1}
html.era .e-loc_szkic figcaption{opacity:.9!important}
html.era .e-hz_loc .e-szkic-azur figcaption{color:rgba(239,227,198,.82)}
/* 27.09 noc · kolaż: większe kadry (inline), krótsza sekcja — pod ostatnim zdjęciem był pas pustej bieli */
html.era .e-col{min-height:158vh;padding-bottom:8vh}

/* ===== 27.09 noc · KONTRAST cz. 2 (końcowy raport: odbior/kontrast/RAPORT.md, 519 tekstów) ===== */
/* pasek nad zdjęciami i ciemnymi sekcjami: białe litery były 1,2–1,4:1 nad jasnymi zdjęciami (zasłona .28) → mocniejsza zasłona + cień liter */
html.era body>header.e-head::before{height:132px;background:linear-gradient(180deg,rgba(var(--e-shade-rgb),.66) 0%,rgba(var(--e-shade-rgb),.38) 48%,rgba(var(--e-shade-rgb),0) 100%)}
html.era body>header.e-head:not(.theme_on-light) :is(.e-nav a,.e-nav button,.htel .nr,.htel .kto,.lang button,.e-logo){text-shadow:0 1px 10px rgba(0,0,0,.4)}
/* hero: niebo za tytułem ciemniejsze (złoty DASTAN/BTP i „Paris & Côte d'Azur” miały 1,3–1,75:1) */
html.era .e-hero_img::after{background:linear-gradient(180deg,rgba(var(--e-shade-rgb),.62) 0%,rgba(var(--e-shade-rgb),.4) 28%,rgba(var(--e-shade-rgb),.12) 52%,rgba(var(--e-shade-rgb),0) 64%,rgba(var(--e-shade-rgb),.26) 100%)}
/* podpis szkicu Paryża na papierze: był biały na kremie (1,1:1) */
html.era .e-szkic-paris figcaption{color:var(--e-ink-2)!important;background:none!important}
/* krycie drobnych napisów (raport: 2,99–4,4:1) */
html.era #rdv .rdv-kroki li{color:rgba(var(--e-paper-rgb),.78)}
html.era #tiles .tile .kod{color:#6E4E12}
html.era .e-foot_leg{color:rgba(var(--e-paper-rgb),.72)}
html.era .e-docs_lang li{color:var(--e-ink-2)!important;opacity:1!important}

/* 27.09 noc · pasek jak kameleon (Daniel: „przy mapie Paryża górne napisy migają, kolory mają się zmieniać miło, nie brutalnie”):
   kolor liter płynnie, dwie zasłony (ciemna ::before, papierowa ::after) przenikają się zamiast podmieniać tło */
html.era body>header.e-head{transition:color .7s var(--e-io)}
html.era body>header.e-head :is(.e-nav a,.e-nav button,.htel .nr,.htel .kto,.lang button,.e-logo,.e-logo text){transition:color .7s var(--e-io),fill .7s var(--e-io),opacity .3s,text-shadow .7s}
html.era body>header.e-head::before{opacity:1;transition:opacity .7s var(--e-io)}
/* 01.10 · P01: stara złota linia paska (index.html, body>header::after) zostawiała na tej zasłonie złoty cień: świecąca kreska
   132 px pod paskiem jechała z ekranem (Daniel: „czy ta złota kreska musi towarzyszyć przy przewijaniu?”) */
html.era body>header.e-head::after{content:'';display:block;position:absolute;left:0;right:0;top:0;height:132px;z-index:-1;pointer-events:none;box-shadow:none;
  background:linear-gradient(180deg,rgba(244,241,235,.97) 0%,rgba(244,241,235,.88) 52%,rgba(244,241,235,0) 100%);opacity:0;transition:opacity .7s var(--e-io)}
html.era body>header.e-head.theme_on-light::before{opacity:0;background:linear-gradient(180deg,rgba(var(--e-shade-rgb),.66) 0%,rgba(var(--e-shade-rgb),.38) 48%,rgba(var(--e-shade-rgb),0) 100%)}
html.era body>header.e-head.theme_on-light::after{opacity:1}
html.era.e-menu-on body>header.e-head::after,html.era.e-menu-on body>header.e-head::before{opacity:0}

/* 27.09 noc · kameleon cz. 2: w poziomym torze elementy paska po kolei (k-c nad czernią, k-j nad jasnym), zasłony z maską na granicy panelu */
html.era body>header.e-head.k-mix::before{opacity:1;transition:none;
  -webkit-mask-image:linear-gradient(90deg,transparent var(--k-od),#000 var(--k-od),#000 var(--k-do),transparent var(--k-do));
  mask-image:linear-gradient(90deg,transparent var(--k-od),#000 var(--k-od),#000 var(--k-do),transparent var(--k-do))}
html.era body>header.e-head.k-mix::after{opacity:1;transition:none;
  -webkit-mask-image:linear-gradient(90deg,#000 var(--k-od),transparent var(--k-od),transparent var(--k-do),#000 var(--k-do));
  mask-image:linear-gradient(90deg,#000 var(--k-od),transparent var(--k-od),transparent var(--k-do),#000 var(--k-do))}
html.era body>header.e-head.k-mix .k-c{color:var(--e-paper);text-shadow:0 1px 10px rgba(0,0,0,.4)}
html.era body>header.e-head.k-mix .k-j{color:var(--e-ink);text-shadow:none}
html.era body>header.e-head.k-mix :is(.k-c,.k-j){transition:color .4s var(--e-io),text-shadow .4s}
html.era body>header.e-head.k-mix :is(.k-c,.k-j) :is(a,button,span,text){text-shadow:inherit}

/* 28.09 · QA treści: plakietka w podglądzie zdjęć (K1); podpis OpenStreetMap nad mapą, bo chował się pod „Aide” i wypadał poza ekran (W3) */
#lb .lb-vis{position:fixed;left:24px;bottom:24px;z-index:3}
#lb .lb-vis[hidden]{display:none}
/* QA 01.10: na telefonie plakietka na dole zasłaniała podpis zdjęcia — lewy górny róg jest wolny (✕ po prawej) */
@media (max-width:900px){#lb .lb-vis{top:22px;bottom:auto}}
html.era .e-map_osm{left:0;right:auto;top:auto;bottom:100%;margin:0 0 8px}

/* ===== 28.09 · QA rezerwacji (odbior/qa/2_rezerwacja.md) ===== */
/* K1: komunikat błędu w ciemnej sekcji był ciemnoczerwony (1,54:1) → jasny tekst, sygnał czerwoną kreską z lewej */
html.era #rdv .rdv-blad{border-left:3px solid #f19a8e;padding-left:14px}
html.era #rdv .rdv-blad p{color:var(--e-paper)}
/* W4 + D1: zgoda — widoczny fokus, zwykłe litery zamiast rozstrzelonych kapitalików */
html.era #rdv .rdv-f input[type=checkbox]:focus-visible{outline:2px solid var(--e-gold-l);outline-offset:3px;box-shadow:none}
html.era #rdv .rdv-zgoda label{text-transform:none;letter-spacing:.01em;font-weight:400}
/* W5: fokus i kotwice nie chowają się pod paskiem; nad ciemnymi sekcjami pasek jak przydymione szkło (decyzja Daniela 26.09) */
html{scroll-padding-top:92px}
html.era body>header.e-head.pas-szklo:not(.theme_on-light):not(.k-mix)::before{background:linear-gradient(180deg,rgba(24,26,30,.95) 0%,rgba(24,26,30,.88) 58%,rgba(24,26,30,0) 100%)}
/* W7: kwota nie łamie się przed „€” */
html.era #estimation .es-range{font-size:clamp(40px,3.8vw,55px)}
/* W8: formularz kontaktu pokazuje, czego brakuje */
html.era .contact [aria-invalid="true"]{border-bottom-color:#b3261e!important;box-shadow:0 1px 0 #b3261e}
html.era #fstat.f-blad{color:#b3261e}
/* D9: złoty przycisk z jasnym napisem 10 px miał 4,4:1 */
html.era :is(#estimation,#contact) .pill.solid{background:#7a5a17;border-color:#7a5a17}
html.era .contact #form [aria-invalid="true"],html.era .contact #form [aria-invalid="true"]:focus{border-bottom-color:#b3261e!important}

/* 28.09 · QA języków: skrypt „Île-de-France” / „Иль-де-Франс” w jednej linii (W5); notka pod nagłówkiem usług z dala od ogonka „f” w EN (D10) */
.e-loc_txt .e-s{white-space:nowrap}
html[lang=en] #metiers .e-sec-h .note-vis{margin-top:14px}

/* 28.09 · odbiór QA (wygląd 5, telefon 7, technika 6) */
/* kompas w kole: niewidoczny nie łapie kliknięć (technika W8) */
html.era .e-cs_in{pointer-events:none}
html.era .e-cs_in.klik{pointer-events:auto}
/* plakietka „Image de synthèse” w metodzie nie leży na akapicie (wygląd W5) */
html.era .e-night_img>.e-vis{left:88px;right:auto;top:96px;bottom:auto}
/* podpis OpenStreetMap w dolnym lewym rogu mapy, nie wiszący nad nią (wygląd D2) */
html.era .e-map_osm{bottom:0;margin:0}
/* karuzela usług na całą szerokość ekranu, pierwsza karta w linii treści (wygląd W6) */
@media (min-width:992px){
  html.era #metiers .e-kar{width:100vw;margin-left:calc(50% - 50vw)}
  html.era #tiles{padding-left:max(100px,calc(50vw - 620px));padding-right:max(100px,calc(50vw - 620px));scroll-padding-inline:max(100px,calc(50vw - 620px))}
  html.era #metiers .e-kar_nav{padding-left:max(100px,calc(50vw - 620px));padding-right:max(100px,calc(50vw - 620px))}
}
/* 1280–1366: szyna z licznikiem nie wchodzi na treść (wygląd W4) */
@media (min-width:992px) and (max-width:1366px){
  html.era .e-sbar{left:12px}
  html.era main .wrap{width:min(1240px,calc(100% - 120px))}
}
/* telefon i tablet (telefon 2, 5–10, 12 i pozostałe WAŻNE) */
@media (max-width:991px){
  html.era .e-hz_paris,html.era .e-hz_coast{width:100%!important;display:flex!important;flex-direction:column;align-items:stretch;gap:28px;padding:12vh 20px 10vh!important}
  html.era .e-hz_paris .e-loc_txt>.e-s{margin:-8px 0 0 12px!important;font-size:clamp(34px,11vw,52px)!important}
  html.era .e-hz_coast .e-cttl .e-t{white-space:normal;font-size:clamp(40px,12.5vw,56px)!important}
  html.era .e-hz_loc .e-map_in{width:100%!important}
  html.era .e-hz_title .e-t{font-size:min(78px,19vw)}
  html.era .e-hz_title .ln2{padding-left:12vw}
  html.era .e-hz_title .e-szkic-paris{position:relative;right:auto;bottom:auto;width:72%;margin:24px auto 0}
  html.era .e-reg .e-s{margin:8px 0 0!important;font-size:44px;text-align:center}
  html.era .e-col_btn{position:relative;margin-top:30px;right:auto;top:auto}
  html.era .e-night_img::after{background:linear-gradient(180deg,rgba(var(--e-shade-rgb),.6),rgba(var(--e-shade-rgb),.85))}
  html.era #steps p{color:rgba(var(--e-paper-rgb),.92)}
  html.era .e-grow_img::after{background:linear-gradient(0deg,rgba(var(--e-shade-rgb),.85) 0%,rgba(var(--e-shade-rgb),.55) 45%,rgba(var(--e-shade-rgb),0) 78%)}
  html.era .e-hero_cta{top:calc(100svh - 84px - 108px - env(safe-area-inset-bottom));bottom:auto}
  html.era .e-grow_p{padding:0 22px}
  html.era .e-night_img>.e-vis{left:16px;right:auto;top:76px;bottom:auto}
  html.era .e-menu-btn{min-height:44px}
  html.era .htel-btn{width:44px;height:44px}
  html.era .contact dd a,html.era .e-vip a[href^="https://wa.me"]{display:inline-block;padding:10px 0}
  html.era .e-foot_row a{display:inline-block;padding:12px 0}
  html.era .filters button{min-height:44px}
  html.era .e-kar_nav button{width:44px;height:44px}
  html.era .e-menu_c{gap:2.4vh;padding-top:max(96px,calc(env(safe-area-inset-top) + 84px))}   /* 01.10 · P06: „Dastan” całe pod paskiem */
}
@media (max-width:900px){
  html.era .mbar a,html.era .mbar button{font-size:10.5px;letter-spacing:.06em;padding:0 6px}
  html.era .pill,html.era .contact label,html.era #rdv .rdv-f label,html.era .contact dt,html.era .filters button,html.era #rdv .rdv-kroki,html.era .e-nav_sm{font-size:11.5px;letter-spacing:.12em}
}
/* galeria Premium na telefonie: „Fermer” w ekranie (telefon 1) */
@media (max-width:700px){
  html.era .e-prem_h{flex-wrap:wrap;gap:10px 14px;padding:14px 16px 0}
  html.era .e-prem_tt .e-s{font-size:24px}
  html.era .e-prem_tt .e-t{font-size:32px}
  html.era .e-prem_n i{display:none}
  html.era .e-prem_x{position:absolute;top:12px;right:12px;z-index:5;min-height:44px;padding:10px 14px}
}
@media (max-width:480px){html.era .e-kp{font-size:11px;letter-spacing:.16em}}
@media (max-width:400px){html.era .e-reg .e-t{font-size:48px}}

/* 28.09 · QA funkcji */
/* K2 + K1: bez ruchu karta usługi jest widoczna, menu ma treść i napis „Fermer”, zwiastun galerii premium schowany */
html.era.bez-ruchu body.open .panel{opacity:1;transform:translate(-50%,-50%)}
html.era.bez-ruchu .e-menu_c{opacity:1}
html.era.bez-ruchu .e-menu_prem{display:none}
html.era.bez-ruchu.e-menu-on .e-menu-btn .e-roll>span:first-child{transform:translateY(-100%)}
html.era.bez-ruchu.e-menu-on .e-menu-btn .e-roll>span+span{transform:none}
/* W9: Tab i Ctrl+F nie przewijają toru poziomego w bok */
html.era .e-hz_st{overflow:hidden;overflow:clip}
/* W10: menu otwarte w torze bez jasnej zasłony kameleona i ciemnych napisów */
html.era.e-menu-on body>header.e-head.k-mix::before,html.era.e-menu-on body>header.e-head.k-mix::after{opacity:0}
html.era.e-menu-on body>header.e-head.k-mix :is(.k-c,.k-j){color:var(--e-paper);text-shadow:none}

/* 28.09 · kameleon cz. 3: oryginał paska (jasny) widać poza czarnym pasmem, ciemną kopię tylko w paśmie.
   Maska w układzie ekranu: --kx = lewa krawędź elementu, --k-od/--k-do = granice czarnych plansz pod paskiem. */
html.era body>header.e-head.k-mix>:is(.e-logo,.e-nav),html.era body>header.e-head.k-klon>:is(.e-logo,.e-nav){-webkit-mask-size:100vw 100%;mask-size:100vw 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:calc(0px - var(--kx,0px)) 0;mask-position:calc(0px - var(--kx,0px)) 0}
html.era body>header.e-head.k-mix>:is(.e-logo,.e-nav){-webkit-mask-image:linear-gradient(90deg,#000 var(--k-od),transparent var(--k-od),transparent var(--k-do),#000 var(--k-do));mask-image:linear-gradient(90deg,#000 var(--k-od),transparent var(--k-od),transparent var(--k-do),#000 var(--k-do))}
html.era body>header.e-head.k-klon{display:none;pointer-events:none}
html.era body>header.e-head.k-klon.k-on{display:flex}
html.era body>header.e-head.k-klon::before,html.era body>header.e-head.k-klon::after{display:none}
html.era body>header.e-head.k-klon *{pointer-events:none!important;transition:none!important}
html.era body>header.e-head.k-klon>:is(.e-logo,.e-nav){text-shadow:0 1px 10px rgba(0,0,0,.4);-webkit-mask-image:linear-gradient(90deg,transparent var(--k-od),#000 var(--k-od),#000 var(--k-do),transparent var(--k-do));mask-image:linear-gradient(90deg,transparent var(--k-od),#000 var(--k-od),#000 var(--k-do),transparent var(--k-do))}
html.era.e-menu-on body>header.e-head.k-klon{display:none}
html.era.e-menu-on body>header.e-head.k-mix>:is(.e-logo,.e-nav){-webkit-mask-image:none;mask-image:none}
/* tor: mapa rysuje się bez poświaty, poświata wchodzi raz, po narysowaniu (filtr liczony w każdej klatce przycinał przewijanie) */
html.era .e-hz_loc .e-map.e-map-rysuje svg{filter:none}

/* 28.09 · cinemagraph basenu: ta sama skala i kadr co zdjęcie pod spodem; widoczny dopiero, gdy gra; bez ruchu zostaje plakat */
.e-grow_img .e-grow_vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.35);transform-origin:50% 100%;will-change:transform;opacity:0;transition:opacity .8s ease;pointer-events:none}
.e-grow_img .e-grow_vid.gra{opacity:1}
html.era.bez-ruchu .e-grow_vid{display:none}
@media (prefers-reduced-motion:reduce){html:not(.ruch-wymuszony) .e-grow_vid{display:none}}

/* 28.09 · brama w stopce (Daniel: „na koniec, jak robi się kółko — brama jakby się zamykała, to by była petarda”).
   Scena ma dokładnie proporcje zdjęcia (16:9) i przykrywa ekran jak object-fit:cover, więc skrzydła stoją na zawiasach
   zdjęcia na każdym ekranie. Wymiary w % zmierzone na zdjęciu 2560×1440: zawiasy x 845 i 1740, środek 1292,5, dół 1198;
   perspektywa i punkt zbiegu dobrane tak, że skrzydło otwarte o 90° pokrywa się ze skrzydłem ze zdjęcia. Centrowanie
   marginesem, nie transformacją: GSAP skaluje scenę (najazd kamery). */
.e-foot_st{position:absolute;left:50%;top:50%;width:max(100vw,177.7778vh);height:max(100vh,56.25vw);margin-left:calc(max(100vw,177.7778vh) / -2);margin-top:calc(max(100vh,56.25vw) / -2);transform-origin:50.5% 62.5%}
.e-foot_img .e-foot_st>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.e-brama{position:absolute;inset:0;perspective:calc(max(100vw,177.7778vh) * .586);perspective-origin:50.2% 71.5%;pointer-events:none}
.e-brama_s{position:absolute;top:32.639%;height:50.556%;width:17.48%;will-change:transform}
.e-brama_s svg{display:block;width:100%;height:100%;overflow:visible}
.e-brama_s.l{left:33.008%;transform-origin:0 50%;transform:rotateY(90deg)}
.e-brama_s.r{left:50.488%;transform-origin:100% 50%;transform:rotateY(-90deg)}
.e-brama_s.r svg{transform:scaleX(-1)}
/* złota nić światła w szczelinie w chwili domknięcia */
.e-brama_szew{position:absolute;left:50.488%;top:37.5%;height:45.7%;width:2px;margin-left:-1px;opacity:0;background:linear-gradient(180deg,rgba(255,214,140,0),rgba(255,214,140,.95) 18%,rgba(233,197,107,.95) 70%,rgba(233,197,107,0));box-shadow:0 0 14px 3px rgba(233,176,80,.55),0 0 42px 10px rgba(233,176,80,.22)}
/* zmierzch pod numerami */
/* 28.09 · Daniel: „jak brama się zamknie… przyciemnia się aż do czarnego” — koniec w pełnej czerni, numery w pełnym kontraście */
.e-foot_mrok{position:absolute;inset:0;background:#050506;opacity:0}
.e-foot_s{height:240vh}
/* bez ruchu (ograniczony ruch albo brak bibliotek): brama stoi zamknięta, pod numerami cień jak wcześniej */
@media (prefers-reduced-motion:reduce){html:not(.ruch-wymuszony) .e-brama_s{transform:none!important}html:not(.ruch-wymuszony) .e-foot_s{height:200vh}}
html.era.bez-ruchu .e-brama_s{transform:none!important}
html.era.bez-ruchu .e-foot_s{height:200vh}

/* 28.09 · stopka na telefonie: opis zasięgu nachodził na dane firmy na każdym telefonie (360–412 px). Treść od góry pod
   nagłówkiem, dane firmy w przepływie tuż nad dolnym paskiem (stopka ma 66 px odstępu na pasek, więc środek przykleja
   się 66 px wyżej — ten sam układ przez cały odcinek); numery Daniela i Dawida jeden pod drugim bez 80-pikselowej dziury */
@media (max-width:767px){html.era .e-foot_in{justify-content:flex-start;gap:12px;top:calc(-66px - env(safe-area-inset-bottom));padding:calc(146px + env(safe-area-inset-top) + env(safe-area-inset-bottom)) 20px 12px}
  html.era .e-foot_tels{row-gap:18px}
  html.era .e-foot_in .e-foot_row{position:static;margin-top:auto;width:100%}}
@media (max-width:767px) and (max-height:700px){html.era .e-foot_in{padding-top:calc(136px + env(safe-area-inset-top) + env(safe-area-inset-bottom));gap:8px}
  html.era .e-foot_in .e-emb{display:none}
  html.era .e-foot_tels{row-gap:12px}
  html.era .e-foot_tels .e-foot_tel .e-t{font-size:38px}}

/* 28.09 · tabela wszystkich widełek w 6 grupach: nagłówek grupy jak etykiety formularza obok (drobne wersaliki, ciemne złoto) */
html.era .es-rates tr.rg th{text-align:left;padding:26px 0 8px;border:0;font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;line-height:1.4;letter-spacing:.2em;text-transform:uppercase;color:var(--e-gold-d)}
html.era .es-rates tr.rg:first-child th{padding-top:4px}

/* 28.09 · „Passer l'intro” (lista Daniela): tylko w czasie kurtyny, poza nią (kurtyna jest ukryta dla czytników);
   bez skryptu gaśnie razem z awaryjnym zejściem kurtyny, bez ruchu go nie ma */
.e-pre-skip{display:none}
html.e-pre-dluga .e-pre-skip,html.e-pre-krotka .e-pre-skip{display:block;pointer-events:auto;position:fixed;right:28px;bottom:30px;z-index:91;margin:0;padding:12px 4px;border:0;background:none;color:rgba(var(--e-paper-rgb),.72);font-family:var(--e-u);font-variation-settings:'wdth' 125;font-weight:600;font-size:10px;line-height:1;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(var(--e-paper-rgb),.35);transition:color .3s,text-decoration-color .3s}
html.e-pre-dluga .e-pre-skip:hover,html.e-pre-krotka .e-pre-skip:hover,html.e-pre-dluga .e-pre-skip:focus-visible,html.e-pre-krotka .e-pre-skip:focus-visible{color:var(--e-paper);text-decoration-color:var(--e-gold-l)}
html.e-pre-dluga .e-pre-skip{animation:e-pre-awaryjna .6s ease 16s forwards}
html.e-pre-krotka .e-pre-skip{animation:e-pre-awaryjna .6s ease 9s forwards}
html.bez-ruchu .e-pre-skip{display:none!important}
@media (prefers-reduced-motion:reduce){html:not(.ruch-wymuszony) .e-pre-skip{display:none!important}}

/* 28.09 · cinemagraph pierwszego ekranu: ta sama klatka co zdjęcie dnia, widoczny dopiero, gdy gra; bez ruchu zostaje zdjęcie */
.e-hero_tab .e-hero_vid{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.e-hero_tab .e-hero_vid.gra{opacity:1}
html.era.bez-ruchu .e-hero_vid{display:none}
@media (prefers-reduced-motion:reduce){html:not(.ruch-wymuszony) .e-hero_vid{display:none}}

/* 29.09 · kółko „Prendre rendez-vous” na pierwszym ekranie (Daniel: „czarny napis, aureola biała… sam napis i obręcz,
   bez tła białego — zasłania obraz”): środek przezroczysty, biała obręcz z aureolą, czarny napis z białą poświatą
   (czytelny na zdjęciu), złoty łuk krąży powoli po obręczy (po najechaniu rośnie jak dotąd) */
html.era .e-hero_cta{color:#111214;isolation:isolate}
html.era .e-hero_cta::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:50%;background:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.95),0 0 22px 3px rgba(255,255,255,.42),inset 0 0 18px rgba(255,255,255,.2)}
html.era .e-hero_cta circle{opacity:0}
html.era .e-hero_cta span{text-shadow:0 0 3px rgba(255,255,255,.95),0 0 12px rgba(255,255,255,.85),0 0 22px rgba(255,255,255,.5)}
html.era .e-hero_cta .e-arc{stroke:var(--e-gold);opacity:1;stroke-width:2.4}
html.era .e-hero_cta svg{animation:e-cta-kr 14s linear infinite}
@keyframes e-cta-kr{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){html.era:not(.ruch-wymuszony) .e-hero_cta svg{animation:none}}

/* 29.09 · Daniel: „umów wizytę w prawo, na środek między leżakami a początkiem basenu — to rozwiąże widoczność”.
   Na laptopie środek kółka stoi na jasnym tarasie w punkcie zdjęcia (56,1% × 85%), przeliczonym jak object-fit:cover,
   więc trafia w to samo miejsce na każdym ekranie; centrowanie marginesem (GSAP skaluje i przyciąga kółko transformacją) */
@media (min-width:992px){html.era .e-hero_cta{width:124px;height:124px;left:calc(50% + max(100vw,177.7778vh) * .061);top:calc(50% + max(100vh,56.25vw) * .35);bottom:auto;margin:-62px 0 0 -62px;transform:none}}

/* 29.09 · Daniel: „na stronie 5 C i O się jakby nakłada” — wąski krój tytułów przy dużym rozmiarze i ujemnym odstępie
   (−0,005 em) sklejał okrągłe litery (CO, CE, OC); minimalny dodatni odstęp, wygląd tytułów bez zmian */
html.era .e-t{letter-spacing:.01em}

/* 29.09 · telefon: w oknie galerii licznik „01 / 10” wchodził na „FERMER ✕”, a po niemiecku tytuł na „SCHLIESSEN”
   (skaner nagłówka 360–430 px, 5 języków). Do 700 px sam krzyżyk 44×44 (napis zostaje dla czytnika ekranu),
   miejsce na niego zarezerwowane, licznik w osobnej linii pod tytułem */
@media (max-width:700px){
  html.era .e-prem_h{padding-right:68px}
  html.era .e-prem_n{flex-basis:100%}
  html.era .e-prem_n i{display:block;width:24px}
  html.era .e-prem_x{width:44px;height:44px;padding:0;justify-content:center;gap:0}
  html.era .e-prem_x>span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html.era .e-prem_x svg{width:16px;height:16px}
}

/* 29.09 · strona 3: Daniel „fotografia z kafelka środkowego w narożny klatkuje”. Maska clip-path przerysowywała
   pełnoekranową warstwę (zdjęcie + film basenu) w każdej klatce; teraz kafelek to skalowane okno, a zdjęcie i film
   w środku mają skalę odwrotną (era.js), więc widok ten sam, a karta graficzna tylko przesuwa gotowe warstwy */
.e-grow_st{--gx:.18;--gy:.38}
.e-grow_img{clip-path:none;overflow:hidden;transform-origin:50% 100%;transform:scale(var(--gx),var(--gy));will-change:transform}
.e-grow_img img,.e-grow_img .e-grow_vid{transform:scale(calc(1.35 / var(--gx)),calc(1.35 / var(--gy)))}
@media (max-width:991px){.e-grow_st{--gx:.4;--gy:.34}}
html.era.bez-ruchu .e-grow_img{transform:none!important}
@media (prefers-reduced-motion:reduce){html:not(.ruch-wymuszony) .e-grow_img{transform:none!important}}

/* 29.09 · „Willa, która oddycha”: płótno WebGL nad zdjęciem dnia (js/niebo.js); pokazuje się dopiero, gdy silnik ruszy */
.e-hero_gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s ease;pointer-events:none}
.e-hero_gl.on{opacity:1}

/* 30.09 · noc stoi na ekranie, zanim wjedzie koło następnej sekcji (Daniel: „jak na noc przechodzi — kartka”):
   komputer 460vh (zachód przez 150vh, noc do 230vh, potem koło); telefon 260vh (zachód przez 110vh, noc do 160vh) */
@media (max-width:991px){html.era .e-hero{height:260vh}}
/* 30.09 · telefon i tablet w pionie: kadr pierwszego ekranu na willi (66%), jak w silniku nieba (K.fx) */
@media (max-aspect-ratio:1/1){html.era .e-hero_img img,html.era .e-hero_img video{object-position:66% 50%}}
/* 30.09 · arkusz architekta (Daniel: „papirus… może masz coś lepszego”): strony 2 i 3 na grubym papierze kreślarskim
   (kafel 1024 px, 1:1 z pikselami ekranu), wokół kompasu szkic cyrklem — pierścień z przerwami przy imionach, podziałka
   od północy, ukosy, przerywany okrąg, osie A–A; rysuje się przy przewijaniu (era.js). */
html.era .e-cs-kompas .e-cs_disc,html.era .e-grow_st{background:var(--e-stone) url(/img/era/papier-kamien.webp) 0 0/1024px repeat}
@media (min-resolution:1.5dppx){html.era .e-cs-kompas .e-cs_disc,html.era .e-grow_st{background-size:512px}}
html.era .e-kompas3d .e-szkic{position:absolute;left:50%;top:50%;width:400%;height:400%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none}
html.era .e-szkic path,html.era .e-szkic circle{fill:none;stroke-linecap:round}
html.era .e-szkic .e-szkic_o{stroke:rgba(var(--e-ink-rgb),.34);stroke-width:1}
html.era .e-szkic .e-szkic_p{stroke:var(--e-gold-d);stroke-opacity:.62;stroke-width:.85}
html.era .e-szkic .e-szkic_n{fill:var(--e-gold-d);fill-opacity:.8;stroke:none}
html.era .e-szkic .e-szkic_u{stroke:rgba(var(--e-ink-rgb),.22);stroke-width:.8}
html.era .e-szkic .e-szkic_d{stroke:rgba(var(--e-ink-rgb),.2);stroke-width:.8;stroke-dasharray:2 5}
html.era .e-szkic .e-szkic_x{stroke:rgba(var(--e-ink-rgb),.24);stroke-width:.8;stroke-dasharray:16 4 2 4}
/* 30.09 · hasło koła na telefonie: po polsku zawija się w dwie linie — wyśrodkowane, z marginesem (dotykało lewej krawędzi) */
html.era .e-cs_in>.e-u{max-width:calc(100% - 40px);text-align:center}
/* 30.09 · AUT: karty DB16 bez obrazu (Daniel: „same defekty”) — papier kreślarski i duży kod branży konturem, bez podróbki zdjęcia */
html.era #tiles .tile_typ{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;background:var(--e-stone) url(/img/era/papier-kamien.webp) 0 0/512px repeat;box-shadow:inset 0 0 0 1px rgba(var(--e-ink-rgb),.12)}
html.era #pfig .tile_typ{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--e-stone) url(/img/era/papier-kamien.webp) 0 0/512px repeat}
html.era #tiles .tile_typ b,html.era #pfig .tile_typ b{font-family:var(--e-t);font-variation-settings:'wdth' 62.5;font-weight:400;line-height:1;color:transparent;-webkit-text-stroke:1px var(--e-gold-d)}
html.era #tiles .tile_typ b{font-size:clamp(96px,calc(var(--u) * 170),190px)}
html.era #pfig .tile_typ b{font-size:clamp(120px,18vw,260px)}
@supports not (-webkit-text-stroke:1px black){html.era #tiles .tile_typ b,html.era #pfig .tile_typ b{color:var(--e-gold-d)}}
/* ==========================================================================================================================
   01.10 · TELEFON (Daniel: „brak języków widocznych 9 na 16”, „po ucinane napisy”, „nie sugeruj się Samsungiem, mamy masę
   marek”). Skaner tekstu (5 języków × 302/360/393 px × zwykły ruch i ograniczone animacje) znalazł każde miejsce poniżej.
   ========================================================================================================================== */
/* języki na telefonie zostają w menu (Daniel 01.10: „języki z powrotem do menu”) — strona i tak sama bierze język telefonu
   przy pierwszym wejściu (navigator.language), wybór z menu zapamiętuje */
/* WhatsApp przy słuchawce i w karcie VIP z własnym numerem pod napisem (Daniel ma WhatsApp na innym numerze niż telefon) */
html.era .e-head .e-nav .tw-wa{display:flex;flex-direction:column;align-items:center;gap:5px}
html.era .wa-nr{display:block;font-size:10px;letter-spacing:.06em;font-variant-numeric:tabular-nums;text-transform:none;opacity:.85}
html.era .e-vip_wa .wa-nr{margin-top:4px}
html.era .e-head .tel-wybor{min-width:min(292px,calc(100vw - 20px));max-width:calc(100vw - 20px)}
/* koło „Prendre rendez-vous” na telefonie schowane (Daniel: „jest tam, gdzie nie trzeba”): złoty „Rendez-vous” w dolnym
   pasku robi to samo i jest zawsze pod kciukiem */
@media (max-width:900px){html.era a.e-circ[href="#rdv"]{display:none}}
/* mapa Paryża na telefonie: nazwy departamentów wychodziły za ekran i na siebie — zostają numery (pełna lista jest w tekście
   nad mapą), podpis OpenStreetMap niżej, pod numerem Essonne */
@media (max-width:767px){html.era .e-dep b{display:none}html.era .e-dep{gap:5px}html.era .e-hz_loc .e-map_osm{top:calc(100% + 14px);bottom:auto}}
/* galeria: tytuł miał 210 px (podwójny margines) i licznik obok — „VISUALISATIONS” ucięte. Margines jak w innych sekcjach,
   licznik zawija się pod tytuł, gdy brak miejsca */
@media (max-width:991px){html.era .galerie .wrap{padding:0}html.era .e-gal_h{flex-wrap:wrap;row-gap:10px}html.era .e-gal_h>.e-gal_n{margin-left:auto}}
/* okrągły przycisk „Prendre rendez-vous”: szerokość napisu w procentach koła (w em malała razem z literami, więc „vereinbaren”
   nie mieściło się w żadnym rozmiarze), ciaśniejsze litery na telefonie */
html.era .e-circ span{max-width:84%}
@media (max-width:991px){html.era .e-circ span{letter-spacing:.1em}}
/* etykiety w karcie kontaktu: długie niemieckie słowa („Zehnjahresversicherung”, „Erreichbarkeit”) dzielą się z łącznikiem,
   zamiast maleć do nieczytelnych 7,6 px */
html.era .contact dt{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* formularz: lista „Type de projet” po rosyjsku miała 277 px i rozpychała stronę — lista nigdy szersza niż kolumna */
html.era select{max-width:100%;min-width:0}html.era :is(.contact form,.es-f,.es-form)>*{min-width:0}
@media (max-width:991px){html.era .contact .grid{grid-template-columns:minmax(0,1fr)}html.era .contact .grid>*{min-width:0}}
/* noc w „Méthode”: plakietka „Image de synthèse” stała na akapicie (treść zaczynała się od samej góry) */
@media (max-width:991px){html.era .process .e-night_c{padding-top:max(16vh,128px)}}
/* pasek na dole przy 302 px (telefon z powiększonym tekstem): „Appeler” jako słuchawka, jak w pasku górnym (tam też dzwoni) */
@media (max-width:350px){
  html.era .mbar .mb-tel{flex:0 0 44px;padding:0;font-size:0!important;letter-spacing:0}
  html.era .mbar .mb-tel::before{content:'\260F';content:'\260F' / '';font-size:19px;line-height:1;letter-spacing:0}
}
/* „Ligne directe” przy ograniczonych animacjach: bez przypinania wszystko stało w jednym ekranie na sobie (akapit pod cytatem,
   podpis pod tytułem). Układ statyczny jak opowieść z ruchem: podpis, tytuł i akapit na wapnie, niżej zdjęcie z cytatem */
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-grow_st{height:auto!important;overflow:visible;overflow-x:clip;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"cap" "t" "p" "img";padding-top:16vh}
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-grow_cap{position:static;grid-area:cap}
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-grow_t{position:static;grid-area:t;margin:2.4vh 0 0}
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-grow_p{position:static;grid-area:p;margin:5vh 0 9vh}
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-grow_img{position:relative;grid-area:img;inset:auto;height:max(78vh,480px)}
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-grow_img>.e-vis{top:16px;bottom:auto}
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-quote{position:relative;grid-area:img;align-self:end;left:auto!important;right:auto!important;bottom:auto!important;margin:0 20px calc(14vh + env(safe-area-inset-bottom));z-index:2}
/* 01.10 · kompas przy ograniczonych animacjach (telefon Daniela): koło z kompasem znikało w całości. Teraz spokojna plansza
   nocy: kompas (obraz zamkniętego kompasu), „Paris · Côte d'Azur” i hasło — bez obracania, bez łuku i bez klikania */
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-cs-kompas{display:block!important;height:auto!important;margin-top:0!important;pointer-events:auto}
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-cs-kompas .e-cs_st{position:relative;height:auto;padding:12vh 20px 10vh;overflow:hidden}
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-cs-kompas .e-cs_disc{position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0;transform:none!important;box-shadow:none}
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-cs-kompas .e-cs_arc,:is(html.era:not(.ruch),html.era.bez-ruchu) .e-cs-kompas .e-kp,:is(html.era:not(.ruch),html.era.bez-ruchu) .e-cs-kompas .e-szkic{display:none}
:is(html.era:not(.ruch),html.era.bez-ruchu) .e-cs-kompas .e-cs_in{position:relative;height:auto;padding-top:0!important;opacity:1!important}
/* „Paris · Côte d'Azur” pod kompasem: nazwa nie łamie się w środku („CÔTE / D'AZUR”), przy braku miejsca cała schodzi pod spód */
html.era .e-cs_row{flex-wrap:wrap;justify-content:center;row-gap:6px}html.era .e-cs_row>span{white-space:nowrap}
/* 01.10 · DB16 na niskich ekranach komputera (Daniel: „seize corps d'état … powinno się zatrzymywać w lepszym polu”, laptop 18"):
   do 1000 px wysokości okna sekcja ciaśniej w pionie — tytuł i całe karty mieszczą się pod paskiem, skok z menu stawia ją na środku */
@media (min-width:992px) and (max-height:1000px){html.era .metiers{padding:12vh 0 9vh}html.era .metiers .e-kar{margin-top:4vh}html.era .metiers .e-sec-h h2{font-size:min(calc(var(--u) * 130),130px,12vh)}}

/* 01.10 · czytelność na telefonie (agent czytelności, pomiar na S25 Ultra: 52% napisów < 12 px, 25% < 10 px; Daniel:
   „czytelność mobilna słaba jakość”). Etykiety, pola, pigułki, dolny pasek, plakietki, stopka i kartki dokumentów: co najmniej
   12 px (plakietki 10 px), krój węższy ('wdth' 110 zamiast 125), żeby linie nie puchły, i mniej rozstrzelone litery */
@media (max-width:600px){
  html.era main>section:not(.e-docs) .lbl,html.era .panel .lbl,html.era main>section>.wrap>.lbl,html.era .e-u,html.era .e-loc_txt>.e-u,html.era .e-col_opt span,
  html.era #rdv .rdv-grupa legend,html.era #rdv .rdv-cal-top h3,html.era .es-f>span{font-size:12px;letter-spacing:.12em;font-variation-settings:'wdth' 110}
  html.era .pill,html.era .contact label,html.era #rdv .rdv-f label,html.era .contact dt,html.era .filters button,html.era #rdv .rdv-kroki,html.era .e-nav_sm{font-size:13px;letter-spacing:.08em;line-height:1.25;font-variation-settings:'wdth' 110}
  html.era .pill{text-align:center}
  html.era .mbar a,html.era .mbar button{font-size:12px;letter-spacing:.04em;font-variation-settings:'wdth' 110;opacity:1}
  html.era .e-vis,html.era .vis-badge{font-size:10px;letter-spacing:.12em}
  html.era .e-foot_leg,html.era .e-map_osm{font-size:12px}
  html.era .e-docs_pp{font-size:12px}
  html.era :is(.e-docs_k,.e-docs_ex,.e-docs_no,.e-docs_ft,.e-docs_tab th,.e-docs_tot p:first-child,.e-docs_ok p,.e-docs_gh>span,.e-docs_wk span,.e-docs_sigs p){font-size:max(.75em,9px)}
}
/* 01.10 · „AUTORISATION / S” przy 317 px: dzielenie wyrazów przed łamaniem w środku słowa, na najwęższych mniejsza czcionka */
html.era #steps b{hyphens:auto}
@media (max-width:360px){html.era #steps b{font-size:clamp(24px,8.5vw,32px)}}

/* 01.10 · pasek górny na telefonie po pierwszym ekranie: przydymione szkło w kolorze sekcji pod spodem (napisy przejeżdżały
   pod logo, słuchawką i „MENU”); na pierwszym ekranie przezroczysty nad zdjęciem jak dotąd */
@media (max-width:991px){
  html.era body>header.e-head{transition:background-color .35s var(--e-io)}
  html.era body>header.e-head.e-head--tlo{background-color:rgba(var(--e-graf-rgb),.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  html.era body>header.e-head.e-head--tlo.theme_on-light{background-color:rgba(var(--e-paper-rgb),.94)}
  html.era body>header.e-head.e-head--tlo::before{opacity:0!important}
  /* otwarte menu (zrzut Daniela 01.10): napisy paska robią się kremowe, a jasne szkło zostawało — „FERMER”, słuchawka i logo
     białe na jasnym. Pod paskiem jest wtedy granat menu, więc pasek bez własnego tła */
  html.era.e-menu-on body>header.e-head.e-head--tlo,html.era.e-menu-on body>header.e-head.e-head--tlo.theme_on-light{background-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
}