/* Podstrona specjalizacji — układ według projektu (jasny nagłówek, kremowy
   lead z łukami, ciemnozielone bloki merytoryczne, jasna stopka).
   Wszystko scope'owane pod .spec-detail-page, żeby nie ruszać reszty serwisu. */

.spec-detail-page {
  --sd-cream: #faf6ec;
  --sd-paper: #fdfbf5;
  --sd-band: #f6f2e7;
  --sd-dark: #04322b;
  --sd-ink: #0b3a32;
  --sd-body: #5d6b67;
  --sd-gold: #c19a5b;
  --sd-gold-light: #e0c08a;
  --sd-hair: rgba(193, 154, 91, .38);
  --sd-hair-dark: rgba(214, 178, 116, .3);
  background: var(--sd-cream);
}

.spec-detail-page .container { width: min(1310px, calc(100% - 128px)); }

/* Nagłówek pozostaje wspólny dla całego serwisu (.site-header.inner-header
   ze styles.css) — tutaj nic go nie nadpisuje. */

/* ---------- Lead / hero ---------- */
.spec-lead {
  position: relative;
  overflow: hidden;
  padding: 46px 0 104px;
  background: var(--sd-cream);
}
.spec-lead-inner { position: relative; z-index: 1; max-width: 620px; }
.spec-lead .spec-eyebrow {
  margin-bottom: 30px;
  color: var(--sd-gold);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.spec-lead h1 {
  margin: 0 0 36px;
  color: var(--sd-ink);
  font-size: clamp(62px, 8.6vw, 132px);
  line-height: .96;
  letter-spacing: -.02em;
}
/* długie, jednowyrazowe tytuły (Nieruchomości, Odszkodowania) — niższy stopień,
   żeby zmieściły się w kolumnie tekstu bez dzielenia wyrazu */
.spec-lead.is-long-title h1 { font-size: clamp(44px, 6.6vw, 88px); }

.spec-lead-sub {
  max-width: 420px;
  margin: 0 0 46px;
  color: #55635f;
  font-size: 15.5px;
  line-height: 1.75;
}
.spec-lead-rule { display: block; width: 96px; height: 1px; margin-bottom: 28px; background: var(--sd-hair); }
.spec-lead-claim {
  max-width: 340px;
  margin: 0;
  color: var(--sd-ink);
  font: 400 21px/1.5 var(--serif);
}
.spec-arcs {
  position: absolute;
  z-index: 0;
  fill: none;
  stroke-width: 1.1;
  stroke-linecap: butt;
  pointer-events: none;
}
.spec-lead .spec-arcs {
  right: -30px;
  bottom: 0;
  width: 660px;
  height: 480px;
  stroke: rgba(191, 150, 84, .8);
}

/* ---------- Pasek kotwic ---------- */
.spec-anchors {
  position: relative;
  z-index: 2;
  background: var(--sd-dark);
  border-bottom: 1px solid rgba(214, 178, 116, .18);
}
.spec-anchors-inner {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.spec-anchors a {
  padding: 8px 40px;
  color: #ece5d4;
  font: 400 16px/1.4 var(--serif);
  transition: color .22s ease;
}
.spec-anchors a + a { border-left: 1px solid rgba(214, 178, 116, .38); }
.spec-anchors a:hover { color: var(--sd-gold-light); }

/* ---------- Blok ciemny: rozdział + zakres ---------- */
.spec-dark { position: relative; color: #e7e2d4; background: var(--sd-dark); }

.spec-chapter { padding: 84px 0 78px; }
.spec-chapter-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 80px; align-items: start; }
.spec-chapter-head { position: relative; }
.spec-chapter-num {
  display: block;
  color: rgba(197, 155, 90, .52);
  font: 400 clamp(112px, 12.5vw, 178px)/.78 var(--serif);
  letter-spacing: -.02em;
}
.spec-chapter-head h2 {
  position: relative;
  margin: -.52em 0 0 .34em;
  color: #f6f1e3;
  font-size: clamp(38px, 4.4vw, 60px);
  letter-spacing: -.01em;
}
.spec-chapter-rule { display: block; width: min(420px, 100%); height: 1px; margin-top: 30px; background: rgba(214, 178, 116, .55); }
.spec-chapter-copy { padding-top: 46px; }
.spec-chapter-copy p { margin: 0; max-width: 430px; color: #cfd7cd; font-size: 15px; line-height: 1.9; }

.spec-scope-block { padding: 6px 0 96px; }
.spec-scope-block h2 {
  margin: 0;
  color: var(--sd-gold-light);
  font-size: clamp(34px, 3.6vw, 48px);
}
.spec-scope-block .spec-chapter-rule { width: min(230px, 60%); margin: 24px 0 54px; }
.spec-scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 78px; }
.spec-scope-col + .spec-scope-col { padding-left: 78px; border-left: 1px solid rgba(214, 178, 116, .3); }
.spec-scope-item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 19px 0;
  border-bottom: 1px solid rgba(214, 178, 116, .28);
}
.spec-scope-item b {
  flex: 0 0 auto;
  min-width: 42px;
  color: rgba(224, 192, 138, .92);
  font: 400 27px/1 var(--serif);
  letter-spacing: .02em;
}
.spec-scope-item span { color: #e6e3d8; font-size: 15px; line-height: 1.5; }

/* ---------- Współpraca ---------- */
.spec-process { padding: 92px 0 96px; background: var(--sd-cream); }
.spec-process h2 { margin: 0; color: var(--sd-ink); font-size: clamp(32px, 3.4vw, 44px); }
.spec-process .spec-rule { display: block; width: 200px; height: 1px; margin: 22px 0 56px; background: var(--sd-hair); }
.spec-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.spec-process-step { padding: 4px 36px; }
.spec-process-step:first-child { padding-left: 0; }
.spec-process-step:last-child { padding-right: 0; }
.spec-process-step + .spec-process-step { border-left: 1px solid var(--sd-hair); }
.spec-process-step span {
  display: block;
  margin-bottom: 24px;
  color: var(--sd-gold);
  font: 400 clamp(56px, 5.4vw, 76px)/1 var(--serif);
}
.spec-process-step h3 { margin: 0 0 22px; color: var(--sd-ink); font-size: 25px; line-height: 1.18; }
.spec-process-step p { margin: 0; color: var(--sd-body); font-size: 13px; line-height: 1.78; }

/* ---------- FAQ ---------- */
.spec-faq-block { padding: 74px 0 84px; background: var(--sd-band); }
.spec-faq-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 76px; align-items: start; }
.spec-faq-grid h2 { margin: 0; color: var(--sd-ink); font-size: clamp(32px, 3.4vw, 44px); line-height: 1.16; }
.spec-faq-grid .spec-rule { display: block; width: 150px; height: 1px; margin-top: 24px; background: var(--sd-hair); }
.spec-detail-page .faq-list { max-width: none; margin: 0; }
.spec-detail-page .faq-item { border-bottom: 1px solid var(--sd-hair); }
.spec-detail-page .faq-item:first-child { border-top: 1px solid var(--sd-hair); }
.spec-detail-page .faq-question {
  position: relative;
  width: 100%;
  padding: 20px 48px 20px 0;
  display: block;
  border: 0;
  background: transparent;
  color: #33453f;
  font: 400 14.5px/1.5 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: color .22s ease;
}
.spec-detail-page .faq-question:hover,
.spec-detail-page .faq-item.is-open .faq-question { color: #9b7534; }
.spec-detail-page .faq-question::before,
.spec-detail-page .faq-question::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--sd-gold);
  transition: transform .32s cubic-bezier(.2, .7, .2, 1);
}
.spec-detail-page .faq-question::before { transform: translateY(-50%); }
.spec-detail-page .faq-question::after { transform: translateY(-50%) rotate(90deg); }
.spec-detail-page .faq-item.is-open .faq-question::after { transform: translateY(-50%) rotate(0deg); }
.spec-detail-page .faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2, .7, .2, 1); }
.spec-detail-page .faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.spec-detail-page .faq-answer > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear .38s; }
.spec-detail-page .faq-item.is-open .faq-answer > div { visibility: visible; transition-delay: 0s; }
.spec-detail-page .faq-answer p { margin: 0 0 22px; padding-right: 48px; color: var(--sd-body); font-size: 13.5px; line-height: 1.85; }

/* ---------- Pozostałe specjalizacje ---------- */
.spec-related-band { padding: 30px 0 34px; background: var(--sd-band); border-top: 1px solid var(--sd-hair); }
.spec-related-inner { display: flex; align-items: center; gap: 34px; }
.spec-related-label { flex: 0 0 auto; margin: 0; color: var(--sd-ink); font: 400 22px/1.28 var(--serif); }
.spec-related-links { flex: 1; display: flex; align-items: center; flex-wrap: wrap; }
.spec-related-links a {
  padding: 4px 32px;
  color: #46534f;
  font-size: 14px;
  white-space: nowrap;
  transition: color .22s ease;
}
.spec-related-links a + a { border-left: 1px solid var(--sd-hair); }
.spec-related-links a:hover { color: var(--sd-gold); }
.spec-related-more { flex: 0 0 auto; display: inline-flex; align-items: center; color: var(--sd-gold); }
.spec-related-more svg { width: 44px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.2; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.spec-related-more:hover svg { transform: translateX(7px); }

/* ---------- CTA ---------- */
.spec-cta { position: relative; overflow: hidden; padding: 92px 0 104px; background: var(--sd-dark); }
.spec-cta-inner { position: relative; z-index: 1; }
.spec-cta h2 {
  margin: 0 0 42px;
  color: var(--sd-gold-light);
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1.2;
}
.spec-cta .button {
  min-height: 58px;
  padding-inline: 34px;
  color: var(--sd-gold-light);
  border-color: rgba(214, 178, 116, .8);
  background: transparent;
}
.spec-cta .button:hover { color: var(--sd-dark); background: var(--sd-gold-light); }
.spec-cta .spec-arcs { right: 4%; bottom: -70px; width: 520px; height: 400px; stroke: rgba(214, 178, 116, .55); }

/* ---------- Stopka (jasna) ---------- */
.spec-footer { background: var(--sd-cream); }
.spec-footer-top { min-height: 116px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 20px; padding: 14px 0; }
.spec-footer-nav { display: flex; align-items: center; flex-wrap: wrap; margin-left: auto; }
.spec-footer-nav a {
  position: relative;
  padding: 0 14px;
  color: #33453f;
  font-size: 13.5px;
  white-space: nowrap;
  transition: color .22s ease;
}
.spec-footer-nav a + a::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--sd-gold);
}
.spec-footer-nav a:hover { color: var(--sd-gold); }
.spec-footer-cta { flex: 0 0 auto; min-height: 52px; padding-inline: 28px !important; margin-left: 8px; }
.spec-footer .button-outline { color: #9b7534; border-color: rgba(193, 154, 91, .75); }
.spec-footer .button-outline:hover { color: #fff; border-color: var(--sd-gold); background: var(--sd-gold); }
.spec-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0 17px;
  border-top: 1px solid var(--sd-hair);
  color: #6f7a76;
  font-size: 11px;
}
.spec-footer-bottom p { margin: 0; }
.spec-footer-bottom nav { display: flex; align-items: center; }
.spec-footer-bottom nav a { padding: 0 18px; transition: color .22s ease; }
.spec-footer-bottom nav a + a { border-left: 1px solid var(--sd-hair); }
.spec-footer-bottom nav a:last-child { padding-right: 0; }
.spec-footer-bottom nav a:hover { color: var(--sd-gold); }
/* Ta stopka jest jasna, wiec podpis wykonawcy dostaje wlasne kolory —
   klasa .footer-credit ze styles.css jest liczona pod ciemne tlo strony glownej. */
.spec-footer-bottom .footer-credit { color: #8b948f; }
.spec-footer-bottom .footer-credit a { color: #5f6a66; border-bottom: 1px solid var(--sd-hair); transition: color .22s ease, border-color .22s ease; }
.spec-footer-bottom .footer-credit a:hover { color: var(--sd-gold); border-bottom-color: var(--sd-gold); }

/* ---------- Responsywność ---------- */
@media (max-width: 1120px) {
  .spec-detail-page .container { width: min(1020px, calc(100% - 48px)); }
  .spec-lead { padding-bottom: 84px; }
  .spec-lead .spec-arcs { right: -120px; width: 560px; height: 400px; }
  .spec-chapter-grid { gap: 52px; }
  .spec-scope-cols { gap: 0 46px; }
  .spec-scope-col + .spec-scope-col { padding-left: 46px; }
  .spec-process-step { padding-inline: 24px; }
  .spec-faq-grid { gap: 48px; }
  .spec-related-links a { padding-inline: 22px; }
}

@media (max-width: 900px) {
  .spec-lead { padding: 34px 0 72px; }
  .spec-lead h1 { font-size: clamp(56px, 11vw, 84px); }
  .spec-lead-sub { margin-bottom: 34px; }
  .spec-lead .spec-arcs { right: -190px; width: 470px; height: 330px; opacity: .8; }
  .spec-anchors-inner { min-height: 60px; }
  .spec-anchors a { padding: 8px 22px; font-size: 14.5px; }
  .spec-chapter { padding: 62px 0 54px; }
  .spec-chapter-grid { grid-template-columns: 1fr; gap: 30px; }
  .spec-chapter-copy { padding-top: 0; }
  .spec-chapter-copy p { max-width: none; }
  .spec-scope-block { padding-bottom: 72px; }
  .spec-scope-cols { grid-template-columns: 1fr; gap: 0; }
  .spec-scope-col + .spec-scope-col { padding-left: 0; border-left: 0; }
  .spec-process { padding: 70px 0 74px; }
  .spec-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 44px; }
  .spec-process-step:nth-child(3) { padding-left: 0; border-left: 0; }
  .spec-faq-block { padding: 62px 0 68px; }
  .spec-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .spec-related-inner { flex-wrap: wrap; gap: 18px 24px; }
  .spec-related-links a:first-child { padding-left: 0; }
  .spec-cta { padding: 74px 0 82px; }
  .spec-cta .spec-arcs { right: -90px; width: 420px; height: 320px; }
  .spec-footer-top { flex-wrap: wrap; gap: 20px 28px; padding: 26px 0; min-height: 0; }
  .spec-footer-nav { margin-left: 0; }
  .spec-footer-cta { margin-left: 0; }
}

@media (max-width: 680px) {
  .spec-detail-page .container { width: min(560px, calc(100% - 36px)); }
  .spec-lead { padding: 26px 0 56px; }
  .spec-lead .spec-eyebrow { margin-bottom: 22px; font-size: 11px; letter-spacing: .26em; }
  .spec-lead h1 { margin-bottom: 26px; font-size: clamp(48px, 15vw, 68px); }
  .spec-lead-sub { font-size: 14px; margin-bottom: 28px; }
  .spec-lead-claim { font-size: 19px; }
  .spec-lead .spec-arcs { right: -230px; width: 400px; height: 280px; opacity: .55; }
  .spec-anchors-inner { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; }
  .spec-anchors a { padding: 8px 18px; font-size: 14px; white-space: nowrap; }
  .spec-chapter { padding: 50px 0 44px; }
  .spec-chapter-head h2 { margin-left: .2em; }
  .spec-chapter-copy p { font-size: 14px; }
  .spec-scope-block { padding-bottom: 58px; }
  .spec-scope-block .spec-chapter-rule { margin-bottom: 34px; }
  .spec-scope-item { gap: 20px; padding: 15px 0; }
  .spec-scope-item b { min-width: 34px; font-size: 23px; }
  .spec-scope-item span { font-size: 14px; }
  .spec-process { padding: 56px 0 60px; }
  .spec-process .spec-rule { margin-bottom: 38px; }
  .spec-process-grid { grid-template-columns: 1fr; row-gap: 34px; }
  .spec-process-step { padding: 0 0 30px; border-left: 0 !important; border-bottom: 1px solid var(--sd-hair); }
  .spec-process-step:last-child { padding-bottom: 0; border-bottom: 0; }
  .spec-process-step span { margin-bottom: 14px; font-size: 52px; }
  .spec-process-step h3 { margin-bottom: 14px; font-size: 23px; }
  .spec-faq-block { padding: 52px 0 58px; }
  .spec-detail-page .faq-question { padding: 17px 40px 17px 0; font-size: 14px; }
  .spec-detail-page .faq-answer p { padding-right: 0; }
  .spec-related-band { padding: 26px 0 30px; }
  .spec-related-links { gap: 6px 0; }
  .spec-related-links a { padding: 2px 14px; font-size: 13px; }
  .spec-related-links a:first-child { padding-left: 0; }
  .spec-cta { padding: 58px 0 66px; }
  .spec-cta h2 { margin-bottom: 32px; }
  .spec-cta .button { width: 100%; max-width: 320px; }
  .spec-cta .spec-arcs { right: -170px; bottom: -40px; width: 340px; height: 260px; opacity: .6; }
  .spec-footer-nav { flex-wrap: wrap; }
  .spec-footer-nav a { padding: 4px 16px; font-size: 12.5px; }
  .spec-footer-nav a:first-child { padding-left: 0; }
  .spec-footer-cta { width: 100%; max-width: 320px; }
  .spec-footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .spec-footer-bottom nav a { padding: 0 12px; }
  .spec-footer-bottom nav a:first-child { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spec-detail-page .faq-answer,
  .spec-related-more svg { transition: none; }
}