/* ==========================================================================
   CIEPŁOWNIA — instalacje pomp ciepła
   Wspólny arkusz stylów dla pięciu podstron.
   Kolejność: tokeny, reset, typografia, komponenty, sekcje, ruch.
   Kontrasty: rdza (--ember) wyłącznie na jasnym tle, bursztyn (--glow)
   wyłącznie na ciemnym. Zamiana miejscami złamie WCAG.
   ========================================================================== */

/* --------------------------------------------------------------
   1. TOKENY
   -------------------------------------------------------------- */
:root{
  --coal:#221814;
  --coal-2:#2E211C;
  --coal-3:#3E2C24;
  --ember:#B8431C;
  --ember-2:#D2542A;
  --ember-3:#96360F;
  --glow:#E0A33E;
  --glow-soft:#F3C87E;
  --frost:#7FA6BC;
  --frost-ink:#3A5B70;
  --cream:#FAF3E9;
  --cream-2:#F2E7D8;
  --paper:#FFFDF9;
  --ink:#2A1F1A;
  --ink-soft:#5C4A40;
  --on-coal:#F7EEE3;
  --on-coal-soft:rgba(247,238,227,.78);

  --line:rgba(42,31,26,.14);
  --line-coal:rgba(247,238,227,.16);
  --line-ember:rgba(184,67,28,.3);

  --shadow-s:0 1px 2px rgba(42,31,26,.05), 0 8px 20px -14px rgba(42,31,26,.4);
  --shadow-m:0 20px 44px -24px rgba(42,31,26,.5);
  --shadow-l:0 34px 70px -30px rgba(42,31,26,.6);

  --r:8px;
  --r-l:18px;
  --r-pill:999px;

  --container:1200px;
  --gutter:clamp(1.15rem, 4vw, 3rem);
  --section-y:clamp(3.4rem, 7vw, 6.2rem);
  --header-h:76px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --font-display:"Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* --------------------------------------------------------------
   2. RESET I BAZA
   -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 14px)}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem, .96rem + .2vw, 1.06rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
svg{display:block}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p,dl,dd,figure,fieldset,table{margin:0}
h1,h2,h3,h4{overflow-wrap:break-word}
fieldset{border:0; padding:0; min-width:0}
address{font-style:normal}
a{color:inherit}
button,input{font:inherit; color:inherit}
.split > *, .journey > *, .contact__grid > *, .person > *{min-width:0}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}
.container--narrow{max-width:920px}
.visually-hidden{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

:focus-visible{outline:3px solid var(--ember); outline-offset:3px; border-radius:3px}
.on-coal :focus-visible, .site-header :focus-visible{outline-color:var(--glow-soft)}
::selection{background:var(--glow); color:var(--coal)}

.skip-link{
  position:absolute; left:var(--gutter); top:.6rem; z-index:200;
  transform:translateY(-160%);
  background:var(--glow); color:var(--coal);
  padding:.7rem 1.2rem; font-weight:600; border-radius:var(--r);
  box-shadow:var(--shadow-m); transition:transform .25s var(--ease);
}
.skip-link:focus{transform:translateY(0)}

/* --------------------------------------------------------------
   3. TYPOGRAFIA
   -------------------------------------------------------------- */
.display{font-family:var(--font-display); font-weight:600; line-height:1.08;
  letter-spacing:-.015em; text-wrap:balance}
.display--xl{font-size:clamp(2.4rem, 1.5rem + 4.1vw, 4.3rem)}
.display--l{font-size:clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem)}
.display--m{font-size:clamp(1.4rem, 1.2rem + 1.1vw, 1.9rem)}
.display--s{font-size:clamp(1.15rem, 1.05rem + .5vw, 1.35rem)}

.eyebrow{display:inline-flex; align-items:center; gap:.55rem;
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember-3); margin-bottom:.9rem}
.on-coal .eyebrow, .hero .eyebrow, .page-head .eyebrow{color:var(--glow)}
.eyebrow::before{content:""; width:1.7rem; height:2px; background:currentColor; border-radius:2px}

.lead{font-size:clamp(1.02rem, .98rem + .3vw, 1.18rem); color:var(--ink-soft); max-width:58ch}
.note{font-size:.9rem; color:var(--ink-soft)}
/* ciemne tła bez klasy on-coal też muszą dostać jasny tekst */
.on-coal .lead, .hero .lead, .page-head .lead, .cta .lead,
.on-coal .note, .hero .note, .page-head .note, .cta .note,
.contact__card .note, .site-footer .note{color:var(--on-coal-soft)}

.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(2.4rem, 5vw, 4rem)}
.section__head{max-width:64ch}
.section__head--center{margin-inline:auto; text-align:center}
.section__head--center .eyebrow{justify-content:center}
.section__head .lead{margin-top:1.1rem}
.section__head--center .lead{margin-inline:auto}

.on-coal{background:var(--coal); color:var(--on-coal)}
.on-coal h2,.on-coal h3{color:var(--on-coal)}
.tint{background:var(--cream-2)}

.ph{background:rgba(224,163,62,.24); border-bottom:1px dashed var(--ember-3);
  padding:0 .18em; border-radius:2px; overflow-wrap:anywhere}

/* --------------------------------------------------------------
   4. IKONY
   -------------------------------------------------------------- */
.icon{width:1.5rem; height:1.5rem; flex:none; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.icon--l{width:2.1rem; height:2.1rem}
.icon--s{width:1.1rem; height:1.1rem}

/* --------------------------------------------------------------
   5. PRZYCISKI I LINKI
   -------------------------------------------------------------- */
.btn{
  --bg:var(--ember); --fg:#fff; --bd:var(--ember);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.85rem 1.5rem; background:var(--bg); color:var(--fg);
  border:1px solid var(--bd); border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:.92rem; font-weight:600;
  text-decoration:none; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn .icon{transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-m); --bg:var(--ember-3); --bd:var(--ember-3)}
.btn:hover .icon--arrow{transform:translateX(4px)}
.btn:active{transform:translateY(0); box-shadow:none}
.btn--glow{--bg:var(--glow); --fg:var(--coal); --bd:var(--glow)}
.btn--glow:hover{--bg:var(--glow-soft); --bd:var(--glow-soft)}
.btn--ghost{--bg:transparent; --fg:var(--on-coal); --bd:rgba(247,238,227,.42)}
.btn--ghost:hover{--bg:rgba(247,238,227,.1); --bd:var(--glow-soft); --fg:var(--on-coal)}
.btn--line{--bg:transparent; --fg:var(--ink); --bd:rgba(42,31,26,.3)}
.btn--line:hover{--bg:rgba(42,31,26,.05); --bd:var(--ink); --fg:var(--ink)}
.btn--wide{width:100%}

.link-arrow{display:inline-flex; align-items:center; gap:.4rem; font-weight:600;
  color:var(--ember-3); text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .35s var(--ease)}
.on-coal .link-arrow{color:var(--glow)}
.link-arrow:hover{background-size:100% 1.5px}
.link-arrow .icon{transition:transform .3s var(--ease)}
.link-arrow:hover .icon--arrow{transform:translateX(4px)}

/* --------------------------------------------------------------
   6. NAGŁÓWEK
   -------------------------------------------------------------- */
.site-header{position:sticky; top:0; z-index:100;
  background:rgba(34,24,20,.96); border-bottom:1px solid transparent;
  transition:background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease)}
.site-header--overlay{background:transparent}
.site-header.is-stuck{background:rgba(34,24,20,.96); backdrop-filter:blur(12px);
  border-bottom-color:var(--line-coal); box-shadow:0 12px 32px -22px rgba(0,0,0,.9)}
.site-header__inner{display:flex; align-items:center; gap:1.3rem; min-height:var(--header-h)}

.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none;
  color:var(--on-coal); margin-right:auto; flex:0 0 auto}
.brand__mark{width:2.4rem; height:2.4rem; flex:none}
.brand__name{font-family:var(--font-display); font-size:1.16rem; font-weight:600;
  line-height:1.1; white-space:nowrap}
.brand__tag{display:block; font-family:var(--font-body); font-size:.62rem; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:var(--on-coal-soft)}

.nav__list{display:flex; align-items:center; gap:clamp(.5rem, 1.4vw, 1.5rem)}
.nav__link{position:relative; display:inline-block; padding:.4rem 0; white-space:nowrap;
  color:var(--on-coal); text-decoration:none; font-size:.92rem; font-weight:500;
  transition:color .25s var(--ease)}
.nav__link::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--glow); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .32s var(--ease)}
.nav__link:hover{color:var(--glow-soft)}
.nav__link:hover::after,.nav__link[aria-current]::after{transform:scaleX(1)}
.nav__link[aria-current]{color:var(--glow-soft)}
.header__cta{padding:.6rem 1.15rem; font-size:.86rem}

.nav-toggle{display:none; align-items:center; gap:.5rem; cursor:pointer;
  background:transparent; border:1px solid rgba(247,238,227,.35); border-radius:var(--r-pill);
  color:var(--on-coal); padding:.55rem .9rem; font-size:.85rem; font-weight:500;
  transition:border-color .25s var(--ease), background-color .25s var(--ease)}
.nav-toggle:hover{border-color:var(--glow); background:rgba(247,238,227,.08)}
.nav-toggle .icon--close{display:none}
.nav-toggle[aria-expanded="true"] .icon--menu{display:none}
.nav-toggle[aria-expanded="true"] .icon--close{display:block}

@media (max-width:1180px){ .header__cta{display:none} }
@media (max-width:960px){
  .nav-toggle{display:inline-flex}
  .site-header,.site-header--overlay{background:rgba(34,24,20,.96)}
  .nav{position:absolute; left:0; right:0; top:100%; background:var(--coal);
    border-top:1px solid var(--line-coal); box-shadow:var(--shadow-l)}
  .nav[data-collapsed="true"]{display:none}
  .nav__list{flex-direction:column; align-items:stretch; gap:0; padding:.4rem var(--gutter) 1.2rem}
  .nav__item + .nav__item{border-top:1px solid rgba(247,238,227,.1)}
  .nav__link{display:block; padding:.95rem 0; font-size:1rem; white-space:normal}
  .nav__link::after{display:none}
  .nav__cta{margin-top:1rem}
  .nav__cta .btn{display:flex}
}
@media (max-width:560px){ .brand__tag{display:none} }
@media (max-width:420px){
  .brand__mark{width:2rem; height:2rem}
  .brand__name{font-size:1rem}
  .nav-toggle{padding:.55rem .65rem}
  .nav-toggle__label{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}
}

/* --------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------- */
.hero{position:relative; isolation:isolate; overflow:hidden;
  margin-top:calc(var(--header-h) * -1); background:var(--coal)}
.hero__scene{position:absolute; inset:0; z-index:-2; width:100%; height:100%}
.hero__scrim{position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(97deg, rgba(34,24,20,.96) 0%, rgba(34,24,20,.93) 50%,
      rgba(34,24,20,.58) 62%, rgba(34,24,20,.22) 78%, rgba(34,24,20,.06) 92%, rgba(34,24,20,.12) 100%),
    linear-gradient(180deg, rgba(34,24,20,.8) 0%, rgba(34,24,20,.1) 24%, transparent 32%)}
@media (max-width:900px){
  .hero__scrim{background:
    linear-gradient(180deg, rgba(34,24,20,.93) 0%, rgba(34,24,20,.72) 45%, rgba(34,24,20,.93) 100%),
    linear-gradient(90deg, rgba(34,24,20,.6), rgba(34,24,20,.28))}
}
.hero__inner{position:relative;
  padding-top:calc(var(--header-h) + clamp(2.8rem, 8vw, 6rem));
  padding-bottom:clamp(3rem, 8vw, 6rem)}
.hero__inner > *{max-width:min(41rem, 100%)}
.hero h1{margin:.2rem 0 0; color:#fff}
.hero h1 em{font-style:normal; color:var(--glow-soft)}
.hero .lead{margin-top:1.4rem; max-width:40ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.1rem}
.hero__badges{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2rem}
.badge{display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .9rem;
  border:1px solid var(--line-coal); border-radius:var(--r-pill);
  background:rgba(224,163,62,.1); font-size:.85rem; color:var(--on-coal)}
.badge .icon{color:var(--glow)}

/* nagłówek podstrony */
.page-head{position:relative; background:var(--coal); color:var(--on-coal);
  margin-top:calc(var(--header-h) * -1);
  padding-top:calc(var(--header-h) + clamp(2.4rem, 6vw, 4.4rem));
  padding-bottom:clamp(2.4rem, 6vw, 4rem); overflow:hidden; isolation:isolate}
.page-head::after{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 90% at 88% 20%, rgba(224,163,62,.22), transparent 62%),
             radial-gradient(60% 80% at 10% 100%, rgba(184,67,28,.28), transparent 66%)}
.page-head h1{margin-top:.3rem; color:#fff}
.page-head .lead{margin-top:1.1rem}

.breadcrumbs{font-size:.86rem; color:var(--on-coal-soft)}
.breadcrumbs ol{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem}
.breadcrumbs a{text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s var(--ease)}
.breadcrumbs a:hover{border-bottom-color:currentColor}
.breadcrumbs li + li::before{content:"›"; margin-right:.45rem; color:var(--glow)}
.breadcrumbs [aria-current]{color:var(--on-coal)}

/* pasek liczb */
.factbar{background:var(--coal-2); border-top:1px solid var(--line-coal)}
.factbar__list{display:grid; grid-template-columns:repeat(4,1fr)}
.factbar__item{display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:clamp(1.3rem,3vw,2rem) .9rem; text-align:center}
.factbar__item + .factbar__item{border-left:1px solid var(--line-coal)}
.factbar .icon{color:var(--glow); margin-bottom:.2rem}
.factbar__value{font-family:var(--font-display); font-weight:600; color:#fff;
  font-size:clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); line-height:1.1; font-variant-numeric:tabular-nums}
.factbar__label{font-size:.84rem; color:var(--on-coal-soft)}
@media (max-width:820px){
  .factbar__list{grid-template-columns:repeat(2,1fr)}
  .factbar__item:nth-child(2n+1){border-left:0}
  .factbar__item:nth-child(n+3){border-top:1px solid var(--line-coal)}
}
@media (max-width:420px){
  .factbar__list{grid-template-columns:1fr}
  .factbar__item + .factbar__item{border-left:0; border-top:1px solid var(--line-coal)}
}

/* --------------------------------------------------------------
   8. SIATKI I KARTY
   -------------------------------------------------------------- */
.split{display:grid; gap:clamp(2rem,5vw,4rem); align-items:center; grid-template-columns:1fr}
@media (min-width:920px){
  .split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .split--media-first > .split__aside{order:-1}
}
.cards{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:2.5rem}
@media (min-width:980px){ .cards--3{grid-template-columns:repeat(3,1fr)} }
.card{position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  padding:1.5rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)}
.card::after{content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--ember), var(--glow));
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease)}
.card:hover,.card:focus-within{transform:translateY(-5px); box-shadow:var(--shadow-m); border-color:var(--line-ember)}
.card:hover::after,.card:focus-within::after{transform:scaleX(1)}
.card__icon{color:var(--ember)}
.card__title{font-family:var(--font-display); font-size:1.16rem; font-weight:600}
.card__desc{font-size:.95rem; color:var(--ink-soft); line-height:1.58}
.card__list{display:grid; gap:.45rem; margin-top:.3rem}
.card__list li{display:flex; gap:.5rem; font-size:.92rem; color:var(--ink-soft)}
.card__list .icon{color:var(--ember); margin-top:.2rem}
.card__foot{margin-top:auto; padding-top:1rem}

/* --------------------------------------------------------------
   9. OD PROBLEMU DO ROZWIĄZANIA
   -------------------------------------------------------------- */
.journey{display:grid; gap:1.1rem; margin-top:2.6rem}
.jstep{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l);
  display:grid; gap:0; grid-template-columns:1fr; overflow:hidden;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease)}
.jstep:hover{box-shadow:var(--shadow-m); border-color:var(--line-ember)}
@media (min-width:860px){ .jstep{grid-template-columns:1.05fr 1.15fr .8fr} }
.jstep__cell{padding:1.4rem 1.5rem; display:flex; flex-direction:column; gap:.55rem}
.jstep__cell + .jstep__cell{border-top:1px solid var(--line)}
@media (min-width:860px){
  .jstep__cell + .jstep__cell{border-top:0; border-left:1px solid var(--line)}
}
.jstep__cell--problem{background:var(--cream-2)}
.jstep__cell--effect{background:rgba(224,163,62,.13)}
.jstep__role{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; gap:.4rem}
.jstep__cell--problem .jstep__role{color:var(--frost-ink)}
.jstep__cell--effect .jstep__role{color:var(--ember-3)}
.jstep__title{font-family:var(--font-display); font-size:1.1rem; font-weight:600}
.jstep__desc{font-size:.94rem; color:var(--ink-soft); line-height:1.55}
.jstep__cell--solution .jstep__title{color:var(--ember-3)}

/* --------------------------------------------------------------
   10. KROKI
   -------------------------------------------------------------- */
.steps{counter-reset:step; display:grid; gap:1.1rem; margin-top:2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
@media (min-width:980px){ .steps--3{grid-template-columns:repeat(3,1fr)} }
.step{background:rgba(247,238,227,.05); border:1px solid var(--line-coal); border-radius:var(--r-l);
  padding:1.4rem 1.3rem; display:flex; flex-direction:column; gap:.5rem;
  transition:transform .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease)}
.step:hover{transform:translateY(-4px); border-color:rgba(224,163,62,.45); background:rgba(224,163,62,.09)}
.step__num{counter-increment:step; display:inline-grid; place-items:center;
  width:2.2rem; height:2.2rem; border-radius:50%; background:var(--glow); color:var(--coal);
  font-family:var(--font-display); font-weight:600; font-size:1rem}
.step__num::before{content:counter(step)}
.step__title{font-family:var(--font-display); font-size:1.08rem; font-weight:600}
.step__desc{font-size:.93rem; color:var(--on-coal-soft); line-height:1.55}
.step__when{font-size:.82rem; color:var(--glow); font-weight:600}
.steps--light .step{background:var(--paper); border-color:var(--line)}
.steps--light .step:hover{background:var(--paper); border-color:var(--line-ember)}
.steps--light .step__num{background:var(--ember); color:#fff}
.steps--light .step__desc{color:var(--ink-soft)}
.steps--light .step__when{color:var(--ember-3)}

/* --------------------------------------------------------------
   11. SEKCJA Z ANIMACJĄ (śnieg na zewnątrz, ciepło w środku)
   -------------------------------------------------------------- */
.warmth{position:relative; isolation:isolate; overflow:hidden}
.warmth__bg{position:absolute; inset:0; z-index:-1; pointer-events:none}
.warmth__glow{position:absolute; inset:-15% -5% auto -5%; height:130%;
  background:radial-gradient(48% 46% at 26% 62%, rgba(224,163,62,.24), transparent 70%),
             radial-gradient(42% 44% at 78% 30%, rgba(184,67,28,.22), transparent 72%);
  animation:oddech 18s ease-in-out infinite alternate}
.flake{position:absolute; top:-6%; left:var(--x);
  width:calc(5px * var(--s,1)); height:calc(5px * var(--s,1));
  border-radius:50%; background:var(--frost); opacity:0;
  animation:opad var(--d,20s) linear var(--t,0s) infinite}
@keyframes opad{
  0%{transform:translateY(0) translateX(0); opacity:0}
  10%{opacity:.7}
  50%{transform:translateY(45vh) translateX(26px)}
  85%{opacity:.45}
  100%{transform:translateY(105vh) translateX(-18px); opacity:0}
}
@keyframes oddech{ from{transform:scale(1); opacity:.85} to{transform:scale(1.1) translateY(-2%); opacity:1} }

.compare{display:grid; gap:1.1rem; grid-template-columns:1fr; margin-top:2.5rem}
@media (min-width:760px){ .compare{grid-template-columns:1fr 1fr} }
.compare__col{border:1px solid var(--line-coal); border-radius:var(--r-l); padding:1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:.9rem; background:rgba(247,238,227,.04)}
.compare__col--warm{background:rgba(224,163,62,.11); border-color:rgba(224,163,62,.35)}
.compare__head{display:flex; align-items:center; gap:.6rem;
  font-family:var(--font-display); font-size:1.15rem; font-weight:600}
.compare__col--cold .icon{color:var(--frost)}
.compare__col--warm .icon{color:var(--glow)}
.compare__list{display:grid; gap:.65rem}
.compare__list li{display:flex; gap:.55rem; font-size:.95rem; color:var(--on-coal-soft); line-height:1.5}
.compare__list .icon{margin-top:.2rem; flex:none}

/* --------------------------------------------------------------
   12. TABELE, CENNIK, DOFINANSOWANIA
   -------------------------------------------------------------- */
.table-wrap{margin-top:2.4rem; border:1px solid var(--line); border-radius:var(--r-l);
  overflow-x:auto; background:var(--paper)}
table{width:100%; border-collapse:collapse; font-size:.95rem; min-width:640px}
caption{text-align:left; padding:1.1rem 1.3rem 0; color:var(--ink-soft); font-size:.9rem}
th,td{padding:.95rem 1.2rem; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
thead th{font-family:var(--font-display); font-weight:600; font-size:.95rem;
  background:var(--cream-2); border-bottom:1px solid var(--line)}
tbody tr:last-child th, tbody tr:last-child td{border-bottom:0}
tbody th{font-weight:600}
tbody tr:hover{background:rgba(224,163,62,.09)}

.grants{display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:2.4rem}
.tag{align-self:flex-start; font-size:.74rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--frost-ink); background:rgba(127,166,188,.2);
  border-radius:var(--r-pill); padding:.28rem .75rem}
.tag--ember{color:var(--ember-3); background:rgba(184,67,28,.12)}

/* --------------------------------------------------------------
   13. REALIZACJE
   -------------------------------------------------------------- */
.works{display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:2.5rem}
.work{background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)}
.work:hover{transform:translateY(-5px); box-shadow:var(--shadow-m); border-color:var(--line-ember)}
.photo-slot{position:relative; aspect-ratio:4/3; display:grid; place-items:center; gap:.4rem;
  background:
    linear-gradient(135deg, rgba(42,31,26,.06) 25%, transparent 25%) -12px 0/24px 24px,
    linear-gradient(225deg, rgba(42,31,26,.06) 25%, transparent 25%) -12px 0/24px 24px,
    var(--cream-2);
  color:var(--ink-soft); text-align:center; padding:1rem}
.photo-slot .icon{color:var(--ember); opacity:.65}
.photo-slot__label{font-size:.78rem; letter-spacing:.06em; text-transform:uppercase}
.work__body{padding:1.3rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.6rem; flex:1}
.work__title{font-family:var(--font-display); font-size:1.12rem; font-weight:600}
.specs{display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin-top:auto; padding-top:.8rem}
.spec{display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .75rem;
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:.82rem; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.spec .icon{color:var(--ember)}
.quote-box{margin-top:.4rem; padding:.9rem 1rem; background:var(--cream);
  border-left:3px solid var(--glow); border-radius:0 var(--r) var(--r) 0;
  font-size:.93rem; color:var(--ink-soft)}

/* --------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------- */
.faq{max-width:56rem; margin-top:2.4rem}
.faq__item{border-bottom:1px solid var(--line)}
.on-coal .faq__item{border-bottom-color:var(--line-coal)}
.faq__item summary{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem .2rem; cursor:pointer; list-style:none;
  font-family:var(--font-display); font-weight:600; font-size:1.06rem;
  transition:color .25s var(--ease)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--ember-3)}
.on-coal .faq__item summary:hover{color:var(--glow)}
.faq__item summary .icon{flex:none; color:var(--ember); transition:transform .3s var(--ease)}
.on-coal .faq__item summary .icon{color:var(--glow)}
.faq__item[open] summary .icon{transform:rotate(45deg)}
.faq__answer{padding:0 .2rem 1.3rem; color:var(--ink-soft); max-width:70ch}
.on-coal .faq__answer{color:var(--on-coal-soft)}

/* --------------------------------------------------------------
   15. CTA, KONTAKT, STOPKA
   -------------------------------------------------------------- */
.cta{background:var(--coal); color:var(--on-coal); border-radius:var(--r-l);
  padding:clamp(1.8rem,4vw,3rem); display:grid; gap:1.4rem; align-items:center;
  grid-template-columns:1fr; box-shadow:var(--shadow-l)}
@media (min-width:820px){ .cta{grid-template-columns:1.2fr .8fr} }
.cta h2{color:#fff}
.cta__actions{display:flex; flex-wrap:wrap; gap:.8rem}

.contact__grid{display:grid; gap:clamp(1.8rem,4vw,3rem); grid-template-columns:1fr}
@media (min-width:920px){ .contact__grid{grid-template-columns:1.05fr .95fr} }
.contact__cols{display:grid; gap:1.8rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); margin-top:2rem}
.contact__h3{font-size:.78rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--glow); margin-bottom:.9rem}
.contact__list{display:grid; gap:.8rem}
.contact__row{display:flex; gap:.65rem; align-items:flex-start}
.contact__row .icon{color:var(--glow); margin-top:.2rem}
.contact__row a{text-decoration:none; background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .3s var(--ease)}
.contact__row a:hover{background-size:100% 1px}
.hours{display:grid; gap:.45rem}
.hours__row{display:flex; justify-content:space-between; gap:1rem; font-size:.94rem;
  padding-bottom:.45rem; border-bottom:1px solid var(--line-coal)}
.hours__row dt{color:var(--on-coal-soft)}
.hours__row dd{margin:0; font-variant-numeric:tabular-nums}
.area{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem}
.contact__card{background:rgba(247,238,227,.05); border:1px solid var(--line-coal);
  border-radius:var(--r-l); padding:clamp(1.3rem,3vw,1.9rem); display:flex; flex-direction:column; gap:1rem}
.checklist{display:grid; gap:.6rem}
.checklist li{display:flex; gap:.55rem; font-size:.93rem; color:var(--on-coal-soft)}
.checklist .icon{color:var(--glow); margin-top:.15rem; flex:none}

.site-footer{background:#1A120F; color:var(--on-coal-soft); font-size:.9rem}
.site-footer__top{display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  padding-block:clamp(2.2rem,5vw,3.2rem)}
.site-footer h2{font-family:var(--font-display); font-size:1rem; font-weight:600;
  color:var(--on-coal); margin-bottom:.9rem}
.site-footer ul{display:grid; gap:.5rem}
.site-footer a{text-decoration:none; border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease)}
.site-footer a:hover{color:var(--glow); border-bottom-color:var(--glow)}
.site-footer__bottom{display:flex; flex-wrap:wrap; gap:.8rem 2rem; align-items:center;
  justify-content:space-between; padding-block:1.4rem; border-top:1px solid rgba(224,163,62,.18); font-size:.85rem}
.credit{display:inline-flex; align-items:center; gap:.4rem}

/* --------------------------------------------------------------
   16. RUCH
   -------------------------------------------------------------- */
.js .reveal{opacity:0; transform:translateY(20px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:calc(var(--i,0) * 75ms)}
.js .reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  .js .reveal{opacity:1; transform:none}
  .flake{display:none}
}
@media print{
  .site-header,.hero__scene,.warmth__bg{display:none}
  body{background:#fff; color:#000}
}