/* ---------- Design tokens ---------- */
:root{
  --bg: #0b0a08;
  --bg-alt: #100e0a;
  --surface: #17140d;
  --surface-2: #1e1810;
  --border: rgba(212,175,55,.16);
  --border-strong: rgba(212,175,55,.4);

  --gold: #d4af37;
  --gold-light: #f0d27a;
  --gold-dark: #9c7a24;

  --ink: #f3efe6;
  --ink-muted: #a79c85;
  --ink-faint: #7a715d;
  --on-gold: #14110a;

  --error: #e5726a;

  --font-display: "Cinzel", serif;
  --font-body: "Montserrat", sans-serif;

  --container: 1200px;
  --container-narrow: 760px;
  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 28px;

  --shadow-card: 0 24px 60px -30px rgba(0,0,0,.7);
  --shadow-gold: 0 0 0 1px var(--border-strong), 0 20px 45px -24px rgba(212,175,55,.35);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, dl, dd, figure, blockquote{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea{ font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout ---------- */
.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
.container--narrow{ max-width: var(--container-narrow); }

.section{ padding-block: clamp(3.5rem, 6vw, 6.5rem); }
.section--alt{ background: linear-gradient(180deg, var(--bg-alt), var(--bg) 60%); border-block: 1px solid var(--border); }

/* Strona główna: każda sekcja wypełnia cały ekran i "przesuwa się" do niego
   przy przewijaniu — dotyczy tylko homepage, po ID, żeby nie ruszać sekcji
   na podstronach usług, które współdzielą klasę .section. Tylko desktop:
   100vh na mobile jest niestabilne (pasek adresu w przeglądarce zmienia
   wysokość widoku w locie), więc telefon zostaje przy naturalnej wysokości. */
@media (min-width: 1101px){
  /* scroll-snap-type wyłączone celowo: przy sekcjach wyższych niż viewport
     (np. #cennik 185vh, #o-nas 130vh) samo CSS snapowanie wymagało
     doscrollowania całej wysokości sekcji, zanim przejście do kolejnej się
     uruchomiło — stąd JS w script.js (nasłuch "wheel"), który przejmuje
     odpalanie przejścia. scroll-snap-align/stop zostają na sekcjach jako
     nieaktywne (bez typu na html nie mają efektu) — najmniejsza zmiana,
     łatwa do odwrócenia, gdyby kiedyś trzeba było wrócić do czystego CSS. */
  html{ scroll-snap-type: none; }
  #hero, #o-nas, #uslugi, #proces, #cennik, #faq, #kontakt{
    min-height: 100vh;
    display: flex;
    align-items: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Kalkulator zmienia wysokość zawartości między krokami (Krok 1 jest
     dużo krótszy niż np. Krok 4/5) — przy dokładnie 100vh ta zmiana
     wysokości sekcji potrafiła przesunąć granicę z FAQ na tyle, że
     kliknięcie w kalkulator przerzucało od razu na kolejną zakładkę.
     Większy, stały zapas miejsca eliminuje ten efekt. */
  /* flex-start zamiast dziedziczonego center: przy 185vh wyśrodkowanie
     zostawiało ogromny, pusty margines nad "Cennik" i dodatkowo lekko
     przesuwało cały blok (razem z nagłówkiem) w pionie między krokami
     kalkulatora, bo jego wysokość się zmienia. Zakotwiczenie u góry
     eliminuje oba efekty — nagłówek zostaje w stałym miejscu. */
  #cennik{ min-height: 185vh; padding-block: clamp(3rem, 6vw, 5rem); align-items: flex-start; }
  /* object-position sam nie wystarczał: przy 100vh zdjęcie (proporcja
     1.5:1) jest przycinane w pionie tak ciasno, że nawet zero przycięcia
     od góry (patrz object-position niżej) zostawiało ledwo kilkanaście
     pikseli zapasu pod 83px sticky-paskiem nawigacji — włosy i tak
     wychodziły spod niego. Wyższa sekcja odwraca proporcje (węższa
     względem zdjęcia niż samo zdjęcie), więc przycinane są tylko puste
     boki, a cała wysokość — w tym zapas nad głowami — jest widoczna. */
  #o-nas{ min-height: 130vh; }
  /* .container jest wyśrodkowany (max-width:1200px + margin-inline:auto),
     więc na szerokich ekranach nagłówek zaczynał się daleko od prawdziwej
     lewej krawędzi strony. Przesunięcie o dokładnie tyle, o ile .container
     jest wcięty, sprowadza tekst do lewego rogu (ten sam padding co reszta
     .container), bez ruszania .values — karty zostają dokładnie tam, gdzie
     są. max(0px, ...) zeruje efekt, gdy .container i tak nie jest wcięty
     (węższe ekrany), więc nic się tam nie zmienia. */
  #o-nas .section__head{
    margin-left: calc(-1 * max(0px, (100vw - var(--container)) / 2));
    /* position:relative + top (zamiast np. margin-top) celowo: to tylko
       wizualne przesunięcie, nie zajmuje/zwalnia miejsca w normalnym
       przepływie, więc .values zostaje dokładnie tam, gdzie było przy
       wyśrodkowanym .container (żądanie: "te 4 kwadraty zostaw tak jak
       były") — rusza się tylko sam tekst. */
    position: relative;
    top: -32.5vh;
  }
}

.section__head{ max-width: 640px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section__lead{ margin-top: .9rem; color: var(--ink-muted); font-size: 1.05rem; }

.eyebrow{
  display: inline-block;
  font-family: var(--font-display);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .9rem;
}
.eyebrow--lg{ font-size: clamp(1rem, .8rem + .6vw, 1.2rem); }

h1, h2, h3{ font-family: var(--font-display); font-weight: 600; line-height: 1.15; color: var(--ink); }
h2{ font-size: clamp(2.1rem, 1.56rem + 2.4vw, 3.3rem); }
h3{ font-size: 1.2rem; font-weight: 600; margin-bottom: .5rem; }

/* ---------- Skip link ---------- */
.skip-link{
  position: absolute; left: 1rem; top: -60px;
  background: var(--gold); color: var(--on-gold);
  padding: .7rem 1.1rem; border-radius: var(--radius-sm);
  font-weight: 600; z-index: 200; transition: top .2s var(--ease);
}
.skip-link:focus{ top: 1rem; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .75rem 1.6rem;
  border-radius: 999px; font-weight: 600; font-size: .95rem;
  letter-spacing: .01em; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
  position: relative; overflow: hidden;
}
.btn--primary{
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark));
  color: var(--on-gold);
  box-shadow: 0 16px 30px -14px rgba(212,175,55,.55);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 20px 38px -14px rgba(212,175,55,.7); }
.btn--primary:active{ transform: translateY(-2px) scale(.96); }
.btn--ghost{ border: 1px solid var(--border-strong); color: var(--ink); }
.btn--ghost:hover{ background: rgba(212,175,55,.08); border-color: var(--gold); }
.btn--ghost:active{ transform: scale(.96); }
.btn--sm{ min-height: 40px; padding: .55rem 1.2rem; font-size: .85rem; }

.btn__ripple{
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.45); transform: scale(0); opacity: 1;
  animation: btn-ripple .55s ease-out forwards;
}
.btn--ghost .btn__ripple{ background: rgba(212,175,55,.45); }
@keyframes btn-ripple{ to{ transform: scale(1); opacity: 0; } }
.btn--wide{ width: 100%; }

/* ---------- Nav ---------- */
.nav{
  position: sticky; top: 0; z-index: 100;
  background: rgba(11,10,8,.7);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-scrolled{ border-color: var(--border); background: rgba(11,10,8,.92); }

.nav__inner{ display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: .9rem; max-width: none; padding-inline: clamp(1.25rem, 4vw, 4rem); }
.nav__brand{ display: flex; align-items: center; gap: .78rem; flex-shrink: 0; }
.nav__mark{ border-radius: 8px; width: 58px; height: 58px; }
.nav__wordmark{ font-family: var(--font-display); font-size: 1.52rem; letter-spacing: .06em; }

.nav__links{ display: flex; gap: clamp(2.25rem, 3.4vw, 3.75rem); margin-inline: auto; }
.nav__links a{ font-size: 1.08rem; color: var(--ink-muted); transition: color .2s; position: relative; }
.nav__links a:hover{ color: var(--gold-light); }

.nav__actions{ display: flex; align-items: center; gap: 1.1rem; }
.nav__phone{ display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ink-muted); }
.nav__phone:hover{ color: var(--gold-light); }

.nav__toggle{ display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; }
.nav__toggle span{ width: 22px; height: 2px; background: var(--gold); transition: transform .3s var(--ease), opacity .3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Nav dropdown (Usługi) ---------- */
.nav__item{ display: flex; align-items: center; }
.nav__item--dropdown{ position: relative; }
.nav__dropdown-label{ display: inline-flex; align-items: center; gap: .3rem; }
.nav__chevron{ transition: transform .25s var(--ease); }
.nav__item--dropdown:hover .nav__chevron,
.nav__item--dropdown:focus-within .nav__chevron{ transform: rotate(180deg); }

.dropdown-panel{
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: min(560px, 80vw);
  padding-top: .75rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), visibility .18s;
  z-index: 50;
}
.nav__item--dropdown:hover .dropdown-panel,
.nav__item--dropdown:focus-within .dropdown-panel{
  opacity: 1; visibility: visible; pointer-events: auto;
}
.dropdown-panel__inner{
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem;
  padding: 1rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--surface-2); box-shadow: var(--shadow-card);
  transform: translateY(-6px); transition: transform .22s var(--ease);
}
.nav__item--dropdown:hover .dropdown-panel__inner,
.nav__item--dropdown:focus-within .dropdown-panel__inner{
  transform: translateY(0);
}
.dropdown-panel__item{ display: flex; flex-direction: column; gap: .2rem; padding: .75rem .9rem; border-radius: var(--radius-sm); transition: background .2s; }
.dropdown-panel__item:hover, .dropdown-panel__item:focus-visible{ background: rgba(212,175,55,.1); }
.dropdown-panel__title{ font-size: .88rem; font-weight: 600; color: var(--ink); }
.dropdown-panel__desc{ font-size: .78rem; color: var(--ink-muted); }
.dropdown-panel__all{
  grid-column: 1 / -1; margin-top: .4rem; padding-top: .9rem; border-top: 1px solid var(--border);
  text-align: center; font-size: .85rem; font-weight: 600; color: var(--gold); border-radius: 0;
}
.dropdown-panel__all:hover{ color: var(--gold-light); }

/* ---------- Hero ---------- */
.hero{ position: relative; overflow: clip; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); }
.hero__bg{ position: absolute; inset: 0; z-index: 0; }
.hero__bg::after{
  content: ""; position: absolute; inset: 0;
  /* Druga, płaska warstwa (rgba .18 wszędzie) dokłada lekkie, równomierne
     przyciemnienie na całym zdjęciu — dotychczasowy gradient sam mocno
     ciemnił tylko lewą stronę (dla czytelności tekstu), a prawa strona
     zdjęcia zostawała prawie bez przyciemnienia. */
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(11,10,8,.75) 32%, rgba(11,10,8,.25) 60%, rgba(11,10,8,.1) 100%),
    rgba(11,10,8,.18);
}
.hero__photo{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* Wielorazowe tło zdjęciowe dla innych sekcji (na razie: O nas) — ciemna
   fotografia po prawej, gradient do czerni po lewej, żeby tekst zostawał
   czytelny. */
.photo-bg{ position: absolute; inset: 0; z-index: 0; }
.photo-bg::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(11,10,8,.85) 32%, rgba(11,10,8,.35) 60%, rgba(11,10,8,.12) 100%);
}
.photo-bg img{ width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

#o-nas{ position: relative; overflow: clip; }
#o-nas > .container{ position: relative; z-index: 1; }
/* Domyślne center/center przycinało czoła przy zwykłej wysokości sekcji —
   przesunięcie w dół (niższy % w pionie) chowa więcej od dołu (tors) i
   zostawia widoczne czoła/włosy u góry. */
#o-nas .photo-bg img{ object-position: center 0%; }

/* Black/gold marble texture, kept faint (opacity) and further darkened
   (::after) so it reads as a premium detail behind the calculator, not a
   competing image — the calculator panel itself has its own solid
   background (.calc-panel{background:var(--surface)}) so none of this
   sits behind its actual content regardless. */
/* Same marble treatment, applied via id="zakres-uslugi" — this "Co obejmuje
   usługa" section is a repeated template with no id of its own, identical
   across all 8 uslugi/*.html pages, so the id + this rule cover all of
   them at once. Its list rows (.service-grid__item) have no card
   background of their own (unlike #cennik/#uslugi/#faq's items), so the
   same overlay strength needs to carry contrast for that text too — it
   already does, since the marble is faint (20%) under a fairly dark tint
   throughout, not just at the edges. */
#zakres-uslugi{ position: relative; overflow: clip; }
#zakres-uslugi > .container{ position: relative; z-index: 1; }
#zakres-uslugi .photo-bg img{ opacity: .2; }
#zakres-uslugi .photo-bg::after{
  background: linear-gradient(180deg, rgba(11,10,8,.78) 0%, rgba(11,10,8,.55) 10%, rgba(11,10,8,.6) 55%, rgba(11,10,8,.52) 82%, rgba(11,10,8,.93) 100%);
}

/* Same marble file/overlay/opacity as #cennik, #uslugi and #faq — the
   image itself is rotated 180° here for a bit of variation between
   sections (transform on the <img> only; its box still fills the
   container exactly as before, so this doesn't introduce any gap). */
#kontakt{ position: relative; overflow: clip; }
#kontakt > .container{ position: relative; z-index: 1; }
#kontakt .photo-bg img{ opacity: .2; transform: rotate(180deg); }
#kontakt .photo-bg::after{
  background: linear-gradient(180deg, rgba(11,10,8,.78) 0%, rgba(11,10,8,.55) 10%, rgba(11,10,8,.6) 55%, rgba(11,10,8,.52) 82%, rgba(11,10,8,.93) 100%);
}

#cennik{ position: relative; overflow: clip; }
#cennik > .container{ position: relative; z-index: 1; }
#cennik .photo-bg img{ opacity: .2; }
#cennik .photo-bg::after{
  background: linear-gradient(180deg, rgba(11,10,8,.78) 0%, rgba(11,10,8,.55) 10%, rgba(11,10,8,.6) 55%, rgba(11,10,8,.52) 82%, rgba(11,10,8,.93) 100%);
}

/* Same faint marble treatment as #cennik — .faq-item also has its own
   solid background (var(--surface)), so this only shows behind the header
   and beside the narrow FAQ column. */
#faq{ position: relative; overflow: clip; }
#faq > .container{ position: relative; z-index: 1; }
#faq .photo-bg img{ opacity: .2; }
#faq .photo-bg::after{
  background: linear-gradient(180deg, rgba(11,10,8,.78) 0%, rgba(11,10,8,.55) 10%, rgba(11,10,8,.6) 55%, rgba(11,10,8,.52) 82%, rgba(11,10,8,.93) 100%);
}

/* Same faint marble treatment as #cennik — .service-card also has its own
   solid background (var(--surface)), so this only shows behind the header
   and in the gaps between cards. */
#uslugi{ position: relative; overflow: clip; }
#uslugi > .container{ position: relative; z-index: 1; }
#uslugi .photo-bg img{ opacity: .2; }
#uslugi .photo-bg::after{
  background: linear-gradient(180deg, rgba(11,10,8,.78) 0%, rgba(11,10,8,.55) 10%, rgba(11,10,8,.6) 55%, rgba(11,10,8,.52) 82%, rgba(11,10,8,.93) 100%);
}

#proces{ position: relative; overflow: clip; }
#proces > .container{ position: relative; z-index: 1; }
/* Shift only the photo's vertical framing (not scale/opacity/gradient) so
   her face sits higher, clear of the 01-04 row — everything else in this
   rule set (size, fit, gradient overlay) is untouched. */
#proces .photo-bg img{ object-position: center calc(50% - 70px); }
/* #proces has text spanning the full width (4-column step list), unlike
   #o-nas's text-on-left layout, so it needs its own two-layer tint instead
   of the shared left-to-right fade: one horizontal pass (strong left where
   the heading sits, lighter right so the photo shows through) layered with
   a vertical pass (extra depth right under the step row regardless of
   column, fading to solid black at the very bottom to seam into #cennik). */
#proces .photo-bg::after{
  /* Ściana została wizualnie przedłużona w lewo w samym pliku zdjęcia
     (patrz src) — ten gradient nie musi już chować pustki, tylko lekko
     przygaszać dla czytelności tekstu. Wartości w pierwszej (poziomej)
     warstwie zmniejszone mniej więcej o połowę względem poprzednich, żeby
     faktura ściany była nadal widoczna. Druga (pionowa) warstwa, do spoiny
     z #cennik, zostaje bez zmian. */
  background:
    linear-gradient(90deg, rgba(11,10,8,.65) 0%, rgba(11,10,8,.6) 16%, rgba(11,10,8,.42) 42%, rgba(11,10,8,.26) 72%, rgba(11,10,8,.32) 100%),
    linear-gradient(180deg, rgba(11,10,8,.08) 0%, rgba(11,10,8,.04) 24%, rgba(11,10,8,.34) 52%, rgba(11,10,8,.56) 74%, rgba(11,10,8,.95) 100%);
}

.hero__inner{ position: relative; z-index: 1; }
@media (min-width: 1400px){
  /* Przesunięcie w górę/w lewo tylko tam, gdzie jest na to zapas miejsca —
     przy węższych szerokościach kontener i tak sięga niemal do krawędzi,
     więc to samo przesunięcie ucinałoby tekst poza ekranem. */
  .hero__inner{ transform: translate(-80px, -40px); }
}
.hero__title{ font-size: clamp(2.82rem, 1.8rem + 4.8vw, 5.1rem); margin-bottom: 1.25rem; }
.hero__lead{ font-size: 1.1rem; color: var(--ink-muted); max-width: 540px; margin-bottom: 2.25rem; }
.hero__actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4rem); }

.stats{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; max-width: 620px; }
.stats__item{ border-left: 2px solid var(--border-strong); padding-left: .9rem; }
.stats__number{ display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.25rem); color: var(--gold-light); }
.stats__item dd{ font-size: .85rem; color: var(--ink-muted); }

/* ---------- Values ---------- */
.values{ display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.5rem; margin-bottom: 2.75rem; }
.value-card{ padding: 1.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.value-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-card); }
.value-card__icon{ width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(212,175,55,.1); color: var(--gold); margin-bottom: 1.1rem; }
.value-card p{ color: var(--ink-muted); font-size: .95rem; }

.tags{ display: flex; flex-wrap: wrap; gap: .7rem; }
.tags li{ font-size: .82rem; letter-spacing: .03em; padding: .5rem 1rem; border: 1px solid var(--border); border-radius: 999px; color: var(--ink-muted); }

/* ---------- Services ---------- */
.services{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.services__more{ text-align: center; margin-top: 2.5rem; }
.service-card{ padding: 2rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.service-card:hover{ transform: translateY(-4px); border-color: var(--border-strong); box-shadow: var(--shadow-gold); }
.service-card__icon{ width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: rgba(212,175,55,.1); color: var(--gold); margin-bottom: 1.25rem; }
.service-card p{ color: var(--ink-muted); font-size: .95rem; }

/* ---------- Process ---------- */
.process{ position: relative; }
.process__list{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 3rem; align-items: start; counter-reset: step; list-style: none; margin: 0; padding: 0; }
.process::before{ content: ""; position: absolute; top: 34px; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong) 15%, var(--border-strong) 85%, transparent); }
.process__step{ position: relative; }
.process__number{ display: inline-flex; align-items: center; justify-content: center; width: 68px; height: 68px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border-strong); font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-light); margin-bottom: 1.5rem; position: relative; z-index: 1; }
.process__step h3{ font-size: 1.4rem; margin-bottom: .75rem; transition: color .3s var(--ease); }
.process__step p{ color: var(--ink-muted); font-size: 1rem; line-height: 1.6; }

/* #proces-only refinements — wider stage, bigger heading, brighter lead,
   the animated progress line, the staggered reveal, hover, and the CTA
   below the grid. Everything here is scoped to #proces on purpose so none
   of it leaks into other sections. */
#proces .container{ max-width: 1360px; }
#proces h2{ font-size: clamp(2.35rem, 1.75rem + 2.7vw, 3.7rem); }
#proces .eyebrow{ letter-spacing: .24em; }
#proces .section__lead{ color: #c3b79c; }

/* More vertical breathing room: push the whole 01-04 block down (this also
   widens the gap between .section__lead and the process axis, since that
   gap is exactly what this margin controls), then give the CTA a clearly
   bigger gap under the step descriptions than the rest of the site's
   .process__cta default. */
#proces .process{ margin-top: calc(clamp(3rem, 6vw, 5rem) + 330px); }

#proces .process__progress{
  position: absolute; top: 34px; left: 5%; right: 5%; height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform-origin: left center; transform: scaleX(0);
  transition: transform .9s var(--ease) .05s;
  pointer-events: none;
}
#proces .process__list.is-visible ~ .process__progress{ transform: scaleX(1); }

/* The generic .reveal fade normally hides+fades the whole element it's on;
   here the visual effect is pushed down to the number/heading/paragraph
   individually (with a delay between them) so the sequence reads as
   "circle lights up, then its text follows" — .process__list and
   .process__step stay visually neutral themselves and exist purely so the
   existing IntersectionObserver (script.js, unchanged) gives them the
   .is-visible flag at the right scroll moment. */
#proces .process__list.reveal,
#proces .process__step.reveal{ opacity: 1; transform: none; }

#proces .process__number{ opacity: 0; transform: translateY(10px) scale(.92); transition: opacity .6s var(--ease), transform .6s var(--ease), background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
#proces .process__step.is-visible .process__number{ opacity: 1; transform: translateY(0) scale(1); }

#proces .process__step h3,
#proces .process__step p{ opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
#proces .process__step.is-visible h3,
#proces .process__step.is-visible p{ opacity: 1; transform: translateY(0); }

#proces .process__step:nth-child(2) .process__number{ transition-delay: .1s; }
#proces .process__step:nth-child(2) h3, #proces .process__step:nth-child(2) p{ transition-delay: .22s; }
#proces .process__step:nth-child(3) .process__number{ transition-delay: .35s; }
#proces .process__step:nth-child(3) h3, #proces .process__step:nth-child(3) p{ transition-delay: .47s; }
#proces .process__step:nth-child(4) .process__number{ transition-delay: .6s; }
#proces .process__step:nth-child(4) h3, #proces .process__step:nth-child(4) p{ transition-delay: .72s; }

#proces .process__step:hover .process__number{ background: rgba(212,175,55,.12); border-color: var(--gold); box-shadow: 0 0 24px -8px rgba(212,175,55,.6); }
#proces .process__step:hover h3{ color: var(--gold-light); }

#proces .process__cta{ margin-top: clamp(3rem, 5vw, 4.5rem); text-align: center; }

@media (prefers-reduced-motion: reduce){
  #proces .process__progress{ transition: none; }
  #proces .process__number, #proces .process__step h3, #proces .process__step p{ transition: none; }
}


/* ---------- FAQ ---------- */
.faq-list{ display: flex; flex-direction: column; gap: .75rem; }
.faq-item{ border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); padding: 1.1rem 1.3rem; }
.faq-item summary{ cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{ content: "+"; font-family: var(--font-display); font-size: 1.3rem; color: var(--gold); transition: transform .25s var(--ease); flex-shrink: 0; }
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{ margin-top: .9rem; color: var(--ink-muted); font-size: .95rem; }

.faq-list--extra{ margin-top: .75rem; }
.faq-list--extra[hidden]{ display: none; }
.faq-more{ display: flex; justify-content: center; margin-top: 1.75rem; }
.faq-more__btn{
  display: inline-flex; align-items: center; gap: .6rem;
  background: none; border: 1px solid var(--border-strong); color: var(--ink);
  padding: .75rem 1.6rem; border-radius: 999px; font-family: var(--font-body);
  font-size: .9rem; font-weight: 600; cursor: pointer; transition: border-color .2s, color .2s;
}
.faq-more__btn:hover{ border-color: var(--gold); color: var(--gold-light); }
.faq-more__btn svg{ color: var(--gold); transition: transform .3s var(--ease); }
.faq-more__btn[aria-expanded="true"] svg{ transform: rotate(180deg); }

/* ---------- Contact ---------- */
.contact{ display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.contact__info{ display: flex; flex-direction: column; gap: 1rem; }
.contact__card{ display: flex; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .25s, transform .25s var(--ease); color: var(--gold); }
.contact__card:hover{ border-color: var(--border-strong); transform: translateY(-2px); }
.contact__card--static{ color: var(--gold); }
.contact__label{ display: block; font-size: .78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; }
.contact__value{ display: block; font-size: 1.02rem; color: var(--ink); font-weight: 500; }

.contact__form{ display: flex; flex-direction: column; gap: 1.1rem; padding: 2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.field{ display: flex; flex-direction: column; gap: .45rem; }
.field label{ font-size: .82rem; color: var(--ink-muted); }
.field input, .field textarea{
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .75rem .9rem; color: var(--ink); resize: vertical; transition: border-color .2s;
}
.field input:focus, .field textarea:focus{ border-color: var(--gold); }
.contact__form-note{ font-size: .78rem; color: var(--ink-faint); text-align: center; }

/* ---------- Breadcrumb ---------- */
.breadcrumb{ display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .82rem; color: var(--ink-faint); margin-bottom: 1.75rem; }
.breadcrumb a:hover{ color: var(--gold-light); }
.breadcrumb span[aria-current]{ color: var(--ink-muted); }

/* ---------- Service detail page ---------- */
.service-hero{
  position: relative; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding-block: clamp(6rem, 11vw, 9rem) clamp(3.5rem, 7vw, 5.5rem);
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(ellipse 70% 55% at 12% 15%, rgba(212,175,55,.12), transparent 60%),
    linear-gradient(165deg, var(--bg) 0%, #1a130a 55%, var(--bg) 100%);
}
.service-hero__bg{
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: flex-end;
  opacity: .5; pointer-events: none;
}
.service-hero__watermark{ color: var(--gold); transform: translateX(18%); width: min(50vw, 560px); height: auto; }
.service-hero .container{ position: relative; z-index: 1; }
.service-hero__icon{
  width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); background: rgba(212,175,55,.1); color: var(--gold); margin-bottom: 1.5rem;
}
.service-hero h1{ font-size: clamp(2.35rem, 1.6rem + 3vw, 4rem); margin-bottom: 1.1rem; max-width: 780px; }
.service-hero .hero__lead{ margin-bottom: 2rem; font-size: 1.15rem; max-width: 600px; }

.scroll-cue{
  position: absolute; left: 50%; bottom: clamp(1.5rem, 4vw, 2.75rem); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  color: var(--ink-faint); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  z-index: 1; animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue{ 0%, 100%{ transform: translate(-50%, 0); opacity: .7; } 50%{ transform: translate(-50%, 8px); opacity: 1; } }

.checklist{ display: flex; flex-direction: column; gap: .9rem; margin: 1.75rem 0 2.75rem; }
.checklist li{ display: flex; align-items: flex-start; gap: .75rem; color: var(--ink-muted); font-size: 1rem; line-height: 1.55; }
.checklist__icon{ flex-shrink: 0; margin-top: .2rem; color: var(--gold); }

/* Service detail grid — richer "Co obejmuje usługa" layout (test variant) */
.service-grid-head{ text-align: center; margin-bottom: 1rem; }
.service-grid-head .eyebrow{ justify-content: center; }
.service-grid-rule{ width: 70px; height: 1px; background: var(--border-strong); margin: 1.5rem auto 0; position: relative; }
.service-grid-rule::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); }

.service-grid{ display: grid; grid-template-columns: 1fr; margin: 2rem 0 3rem; border-top: 1px solid var(--border); }
@media (min-width: 800px){
  .service-grid{ grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}
.service-grid__item{ display: flex; align-items: flex-start; gap: 1.1rem; padding: 1.6rem 0; border-bottom: 1px solid var(--border); }
.service-grid__number{ font-family: var(--font-display); color: var(--gold); font-size: .95rem; flex-shrink: 0; padding-top: .9rem; }
.service-grid__icon{ flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.service-grid__title{ font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.service-grid__desc{ font-size: .85rem; color: var(--ink-faint); line-height: 1.55; }

.who-panel{ display: flex; flex-direction: column; gap: 2rem; padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--radius-lg); border: 1px solid var(--border); background: linear-gradient(135deg, var(--surface), var(--surface-2) 70%); }
.who-panel__intro{ display: grid; gap: 1.75rem; }
@media (min-width: 800px){
  .who-panel__intro{ grid-template-columns: 1fr 1fr; align-items: center; column-gap: 3rem; }
}
.who-panel__title{ margin-top: .5rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.who-panel__text{ color: var(--ink-muted); font-size: .95rem; line-height: 1.6; }
.who-panel__badges{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; padding-top: 2rem; border-top: 1px solid var(--border); }
@media (min-width: 700px){
  .who-panel__badges{ grid-template-columns: repeat(4, 1fr); }
}
.who-badge{ display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.who-badge__icon{ flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--gold); }
.who-badge__label{ font-size: .82rem; color: var(--ink-muted); line-height: 1.4; }

.cta-band{ text-align: center; }
.cta-band .container{ max-width: var(--container-narrow); }
.cta-band h2{ margin-bottom: .9rem; }
.cta-band p{ color: var(--ink-muted); margin-bottom: 2rem; }
.cta-band .hero__actions{ justify-content: center; margin-bottom: 0; }

/* ---------- Footer ---------- */
.footer{ border-top: 1px solid var(--border); padding-block: 3rem 1.5rem; background: var(--bg-alt); }
.footer__inner{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; }
.footer__brand{ display: flex; align-items: center; gap: .8rem; }
.footer__brand img{ border-radius: 8px; }
.footer__name{ display: block; font-family: var(--font-display); letter-spacing: .08em; font-size: 1rem; }
.footer__tag{ display: block; font-size: .75rem; color: var(--ink-faint); }
.footer__links{ display: flex; flex-wrap: wrap; gap: 1.5rem; font-size: .88rem; color: var(--ink-muted); }
.footer__links a:hover{ color: var(--gold-light); }
.footer__contact{ display: flex; flex-direction: column; gap: .4rem; font-size: .88rem; color: var(--ink-muted); text-align: right; }
.footer__contact a:hover{ color: var(--gold-light); }
.footer__bottom{ border-top: 1px solid var(--border); padding-top: 1.5rem; font-size: .78rem; color: var(--ink-faint); }

/* ---------- Calculator ---------- */
.calc-wrap{ max-width: 760px; margin-inline: auto; }

.calc-stepper{
  display: flex; align-items: flex-start; justify-content: space-between;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0; position: relative;
}
.calc-step{ display: flex; flex-direction: column; align-items: center; gap: .6rem; flex: 1; position: relative; }
.calc-step::before{
  content: ""; position: absolute; top: 19px; left: -50%; width: 100%; height: 1px;
  background: var(--border); z-index: 0;
}
.calc-step:first-child::before{ display: none; }
.calc-step__circle{
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); color: var(--ink-faint); font-family: var(--font-display); font-size: .95rem;
  background: var(--bg); position: relative; z-index: 1; transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.calc-step__label{ font-size: .78rem; color: var(--ink-faint); text-align: center; transition: color .3s var(--ease); }
.calc-step.is-active .calc-step__circle{ background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-dark)); color: var(--on-gold); border-color: var(--gold); }
.calc-step.is-active .calc-step__label{ color: var(--ink); font-weight: 600; }
.calc-step.is-done .calc-step__circle{ background: var(--gold-dark); color: var(--on-gold); border-color: var(--gold-dark); }
.calc-step.is-done .calc-step__label{ color: var(--ink-muted); }

.calc-panel{ padding: clamp(1.75rem, 4vw, 2.5rem); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.calc-panel h2{ font-size: 1.3rem; margin-bottom: 1.25rem; }

.calc-group{ margin-bottom: 2.25rem; }
.calc-group:last-of-type{ margin-bottom: 0; }
.calc-group__hint{ font-size: .8rem; color: var(--ink-faint); margin: -.75rem 0 1.1rem; }
.calc-cards{ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.calc-cards--compact{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.calc-cards--compact .calc-card{ padding: 1.1rem .9rem; gap: .5rem; }
.calc-cards--compact .calc-card__icon{ width: 24px; height: 24px; }
.calc-cards--compact .calc-card__title{ font-size: .82rem; }
.calc-card{
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem;
  padding: 1.5rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg);
  cursor: pointer; transition: border-color .2s, background .2s, transform .2s var(--ease);
}
.calc-card:hover{ border-color: var(--border-strong); transform: translateY(-2px); }
.calc-card.is-selected{ border-color: var(--gold); background: rgba(212,175,55,.08); animation: calc-pop .35s var(--ease); }
@keyframes calc-pop{ 0%{ transform: scale(1); } 45%{ transform: scale(1.045); } 100%{ transform: scale(1); } }
.calc-card__icon{ color: var(--gold); }
.calc-card__title{ font-size: .92rem; font-weight: 600; color: var(--ink); }
.calc-card__desc{ font-size: .78rem; color: var(--ink-faint); }
.calc-card__check{
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: var(--on-gold); display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.calc-card.is-selected .calc-card__check{ opacity: 1; transform: scale(1); }

.calc-actions{ display: flex; justify-content: flex-end; gap: 1rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border); }
.calc-actions--split{ justify-content: space-between; }
.btn--calc{ min-width: 140px; }
.btn:disabled{ opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.calc-placeholder{ text-align: center; padding: 1.5rem 0; color: var(--ink-muted); }
.calc-placeholder p{ max-width: 480px; margin-inline: auto; }
.calc-placeholder strong{ display: block; color: var(--gold-light); font-family: var(--font-display); font-size: 1.15rem; margin-bottom: .75rem; }

.calc-label{ display: block; font-weight: 600; color: var(--ink); margin-bottom: .75rem; font-size: .92rem; }
.calc-select-wrap{ position: relative; }
.calc-select{
  width: 100%; padding: .95rem 2.75rem .95rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 1rem center;
  background-size: 16px; color: var(--ink); font-family: var(--font-body); font-size: .95rem;
  appearance: none; cursor: pointer; transition: border-color .2s;
}
.calc-select:focus{ border-color: var(--gold); outline: none; }
.calc-select option{ background: var(--bg); color: var(--ink); }

.calc-info{
  margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-sm);
  background: rgba(212,175,55,.06); border: 1px solid var(--border); border-left: 3px solid var(--gold);
}
.calc-info strong{ display: block; color: var(--gold-light); font-family: var(--font-display); font-size: 1rem; margin-bottom: .6rem; }
.calc-info p{ color: var(--ink-muted); font-size: .88rem; line-height: 1.6; margin: 0; }

.calc-lead{ font-style: italic; color: var(--ink-faint); text-align: center; margin: -.75rem 0 2rem; font-size: .92rem; line-height: 1.6; }

.calc-proc-list{ display: flex; flex-direction: column; gap: 1.25rem; }
.calc-proc{ padding: 1.5rem 1.75rem; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); }
.calc-proc__head{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.calc-proc__head h3{ font-size: 1rem; margin: 0; }
.calc-proc__desc{ color: var(--ink-muted); font-size: .88rem; line-height: 1.6; margin: 0; }
.calc-proc__desc strong{ color: var(--ink); }
.calc-proc__banner{
  background: var(--gold-dark); color: var(--on-gold); font-size: .8rem; font-weight: 600;
  text-align: center; padding: .6rem 1rem; border-radius: var(--radius-sm); margin-bottom: .9rem;
}

.calc-toggle{ display: inline-flex; border-radius: 999px; border: 1px solid var(--border); overflow: hidden; flex-shrink: 0; }
.calc-toggle__btn{ padding: .5rem 1.15rem; font-size: .76rem; font-weight: 700; letter-spacing: .03em; color: var(--ink-faint); background: var(--surface); transition: background .2s, color .2s; }
.calc-toggle__btn.is-active{ background: var(--gold); color: var(--on-gold); animation: calc-flash .35s var(--ease); }
@keyframes calc-flash{ 0%{ filter: brightness(1.6); } 100%{ filter: brightness(1); } }

.calc-question{ font-weight: 600; color: var(--ink); margin-bottom: .9rem; font-size: .95rem; line-height: 1.5; }
.calc-radio-row{ display: flex; justify-content: center; gap: 2.5rem; padding: 1.1rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); }
.calc-radio{ display: inline-flex; align-items: center; gap: .55rem; cursor: pointer; font-weight: 600; font-size: .85rem; letter-spacing: .02em; color: var(--ink-muted); }
.calc-radio input[type="radio"]{ width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }
.calc-radio:has(input:checked){ color: var(--ink); }

.calc-field{ margin-bottom: 1.1rem; }
.calc-field:last-child{ margin-bottom: 0; }
.calc-number{
  width: 100%; padding: .8rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: .95rem; transition: border-color .2s;
}
.calc-number:focus{ border-color: var(--gold); outline: none; }

.calc-result{ text-align: center; padding: 1rem 0 .5rem; }
.calc-result__label{ font-size: .8rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .6rem; }
.calc-result__price{ font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--gold-light); margin-bottom: 1.75rem; }
.calc-result__price span{ font-family: var(--font-body); font-size: 1rem; color: var(--ink-faint); font-weight: 400; }
.calc-result__breakdown{
  display: flex; flex-direction: column; gap: .6rem; max-width: 360px; margin: 0 auto 1.75rem;
  padding: 1.25rem 1.5rem; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border);
}
.calc-result__breakdown li{ display: flex; justify-content: space-between; font-size: .9rem; color: var(--ink-muted); }
.calc-result__breakdown li span:last-child{ color: var(--ink); font-weight: 600; }
.calc-result__note{ font-size: .8rem; color: var(--ink-faint); font-style: italic; max-width: 420px; margin: 0 auto; }
.calc-result__contact-msg{ color: var(--ink-muted); max-width: 460px; margin: 0 auto 2rem; line-height: 1.6; }
.calc-result__actions{ justify-content: center; margin-bottom: 0; }

.calc-result-subtitle{ text-align: center; color: var(--ink-faint); font-size: .9rem; margin: -.5rem 0 2rem; }

.calc-quote-card{ border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 1.5rem; overflow: hidden; }
.calc-quote-card__head{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.25rem 1.5rem; }
.calc-quote-card__title{ display: flex; align-items: center; gap: .7rem; font-weight: 600; color: var(--ink); font-size: 1rem; }
.calc-quote-card__title svg{ color: var(--gold); flex-shrink: 0; }
.calc-quote-card__total{ padding: .5rem 1.1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-weight: 700; color: var(--gold-light); font-size: .95rem; white-space: nowrap; }

.calc-quote-card__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; padding: 0 1.5rem 1.25rem; }
.calc-quote-card__grid > div{ display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; border-bottom: 1px dashed var(--border); padding-bottom: .6rem; }
.calc-quote-card__grid span{ color: var(--ink-faint); }
.calc-quote-card__grid strong{ color: var(--ink); font-weight: 600; text-align: right; }

.calc-quote-card__banner{ background: var(--bg); padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.calc-quote-card__banner-row{ display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; color: var(--gold-light); font-size: .88rem; margin-bottom: .35rem; }
.calc-quote-card__banner-detail{ font-size: .78rem; color: var(--ink-faint); line-height: 1.5; }

.calc-final{ display: flex; align-items: baseline; justify-content: center; gap: .75rem; text-align: center; padding: 1.25rem 0 1.5rem; }
.calc-final span{ font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.calc-final strong{ font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.75rem); color: var(--gold-light); }

/* ---------- Reveal-on-scroll ---------- */
/* Scoped to .js so content stays visible by default if JS fails to load or run. */
.js .reveal{ opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-visible{ opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .nav__links, .nav__phone{ display: none; }
  .nav__toggle{ display: flex; }

  .nav__links{
    position: fixed; inset: 84px 0 0 0; z-index: 90;
    background: rgba(11,10,8,.98); backdrop-filter: blur(10px);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 1.5rem 1.25rem; transform: translateX(100%); transition: transform .35s var(--ease);
  }
  .nav__links.is-open{ display: flex; transform: translateX(0); }
  .nav__links a{ width: 100%; padding: 1rem 0; border-bottom: 1px solid var(--border); font-size: 1.05rem; }

  .calc-step__circle{ width: 32px; height: 32px; font-size: .82rem; }
  .calc-step::before{ top: 15px; }
  .calc-step__label{ font-size: .66rem; }
  .calc-actions{ flex-direction: column-reverse; }
  .calc-actions .btn{ width: 100%; }

  .nav__item{ width: 100%; }
  .nav__dropdown-label{ width: 100%; padding: 1rem 0; border-bottom: 1px solid var(--border); font-size: 1.05rem; justify-content: space-between; }
  .dropdown-panel{ display: none; }


  .service-hero__bg{ opacity: .3; justify-content: center; }
  .service-hero__watermark{ width: 70vw; transform: none; }

  /* Below this breakpoint the process becomes a vertical timeline: a thin
     gold line down the left edge, threaded through the centre of each
     number circle, with each step's heading/text sitting to its right. */
  #proces .container{ max-width: var(--container); }
  .process__list{ grid-template-columns: 1fr; gap: 2.75rem; }
  .process::before{ top: 8px; bottom: 8px; left: 33px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--border-strong) 8%, var(--border-strong) 92%, transparent); }
  #proces .process__progress{ top: 8px; bottom: 8px; left: 33px; right: auto; width: 1px; height: auto; transform-origin: top center; transform: scaleY(0); }
  #proces .process__list.is-visible ~ .process__progress{ transform: scaleY(1); }
  .process__step{ display: grid; grid-template-columns: 68px 1fr; column-gap: 1.25rem; align-items: start; }
  .process__number{ margin-bottom: 0; }
  .process__step h3, .process__step p{ grid-column: 2; }
}

@media (min-width: 640px){
  .stats{ grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 900px){
  .contact{ grid-template-columns: .8fr 1fr; }
}