html, body { background: var(--paper); margin: 0; }


/* Fade in */
.fade-in { opacity: 0; transform: translateY(12px); animation: fadeIn var(--t-section) var(--ease) forwards; }
@keyframes fadeIn { to { opacity: 1; transform: translateY(0); } }

/* ============ SECTION 2: Routing Cards ============ */
.routing {
  background: var(--paper);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--rule);
}

/* Section header */
.section-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
  align-items: end;
}
.section-head .sh-left { display: flex; flex-direction: column; gap: var(--s-4); }
.section-head .display-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1.05;
  letter-spacing: var(--ls-snug); margin: 0; color: var(--ink);
}
.section-head .display-title em { font-style: italic; color: var(--accent); }
.section-head .sh-right-col { display: flex; flex-direction: column; gap: var(--s-4); align-self: end; }
.section-head .sh-desc {
  font-family: var(--font-body); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--ink-2); margin: 0; max-width: 44ch;
}
.sh-cta {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--t-base) var(--ease);
}
.sh-cta:hover { color: var(--accent-hover); }
.sh-cta svg { width: 14px; height: 14px; transition: transform var(--t-base) var(--ease); }
.sh-cta:hover svg { transform: translateX(4px); }

/* Card grid — 2×2 */
.routing-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5);
}

/* Individual card */
.routing-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  padding: var(--s-7);
  display: flex; flex-direction: column;
  gap: var(--s-4);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.routing-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.routing-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(127, 86, 217, 0.08);
}
.routing-card:hover::before { transform: scaleX(1); }

/* Emergency card variant */
.routing-card--emergency {
  border-left: 3px solid var(--danger);
}
.routing-card--emergency::before { background: var(--danger); }
.routing-card--emergency:hover {
  border-color: var(--danger);
  box-shadow: 0 8px 24px rgba(220, 60, 60, 0.08);
}

/* Card top row */
.routing-card__top { display: flex; align-items: center; gap: var(--s-4); }
.routing-card__thumb {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper-2) 100%);
  border: 1px solid var(--rule); flex-shrink: 0; overflow: hidden;
  filter: sepia(0.15) saturate(0.9);
  display: flex; align-items: center; justify-content: center;
}
.routing-card__thumb .ph-label {
  font-family: 'Courier New', monospace;
  font-size: 7px; color: var(--muted); text-align: center; line-height: 1.3;
}
.routing-card__icon { width: 48px; height: 48px; color: var(--accent); flex-shrink: 0; }
.routing-card--emergency .routing-card__icon { color: var(--danger); }
.routing-card__icon svg { width: 48px; height: 48px; stroke-width: 1.2; }

/* Card content */
.routing-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: var(--lh-heading);
  color: var(--ink); margin: 0;
}
.routing-card p {
  font-family: var(--font-body); font-size: 15px;
  line-height: var(--lh-body); color: var(--ink-2); margin: 0; flex: 1;
}

/* Card link */
.routing-card__link {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--t-base) var(--ease);
}
.routing-card__link:hover { color: var(--accent-hover); }
.routing-card__link svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease); }
.routing-card__link:hover svg { transform: translateX(4px); }
.routing-card--emergency .routing-card__link { color: var(--danger); }
.routing-card--emergency .routing-card__link:hover { color: var(--error-900); }

/* ============ SECTION 3: Tabs ============ */
.topics {
  background: var(--paper-2);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--rule);
}

/* Tab bar */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-8);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.tab-btn {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--muted); background: none; border: none;
  padding: var(--s-4) var(--s-5);
  cursor: pointer; white-space: nowrap;
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--t-base) var(--ease);
  scroll-snap-align: start;
  flex-shrink: 0;
}
.tab-btn svg { width: 18px; height: 18px; }
.tab-btn::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.tab-btn:hover { color: var(--ink); }
.tab-btn[aria-selected="true"] { color: var(--accent); }
.tab-btn[aria-selected="true"]::after { transform: scaleX(1); }

/* Tab panels */
.tab-panel {
  display: none;
  opacity: 0;
  transition: opacity 200ms var(--ease);
}
.tab-panel.active {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-8);
  align-items: start;
  opacity: 1;
}
.tab-panel__prose {
  display: flex; flex-direction: column; gap: var(--s-5);
}
.tab-panel__prose p {
  font-family: var(--font-body); font-size: 16px;
  line-height: var(--lh-body); color: var(--ink-2);
  margin: 0; max-width: var(--content-measure); text-wrap: pretty;
}
.tab-panel__prose .highlight {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 1.4;
  color: var(--ink); font-style: italic;
  padding-left: var(--s-5);
  border-left: 2px solid var(--accent);
}
.tab-panel__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
}
.tab-panel__list li {
  font-family: var(--font-body); font-size: 15px;
  line-height: var(--lh-body); color: var(--ink-2);
  padding-left: var(--s-5);
  position: relative;
}
.tab-panel__list li::before {
  content: '';
  position: absolute; left: 0; top: 10px;
  width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%;
}
.tab-panel__anchor {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--accent); text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--t-base) var(--ease);
  margin-top: var(--s-2);
}
.tab-panel__anchor:hover { color: var(--accent-hover); }
.tab-panel__anchor svg { width: 16px; height: 16px; transition: transform var(--t-base) var(--ease); }
.tab-panel__anchor:hover svg { transform: translateX(4px); }

.tab-panel__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper) 100%);
  border: 1px solid var(--rule);
  overflow: hidden;
  filter: sepia(0.15) saturate(0.9);
  display: flex; align-items: center; justify-content: center;
}
.tab-panel__photo .ph-label {
  font-family: 'Courier New', monospace;
  font-size: 11px; color: var(--muted);
  text-align: center; line-height: var(--lh-body);
  max-width: 26ch; padding: var(--s-5);
}

/* ============ SECTION 4: Comparison Cards ============ */
.comparison {
  background: var(--paper);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--rule);
}
.comp-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.comp-card {
  border: 1px solid var(--rule);
  border-left: none;
  display: flex; flex-direction: column;
  padding: 0;
}
.comp-card:first-child { border-left: 1px solid var(--rule); }
.comp-card__accent {
  height: 4px; flex-shrink: 0;
}
.comp-card__accent--teal { background: var(--accent); }
.comp-card__accent--amber { background: #d4930d; }
.comp-card__accent--red { background: var(--danger); }
.comp-card__body {
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-5);
  flex: 1;
}
.comp-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.2;
  color: var(--ink); margin: 0;
}
.comp-card__attrs {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-3);
}
.comp-card__attrs li {
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.55; color: var(--ink-2);
  padding-left: var(--s-5); position: relative;
}
.comp-card__attrs li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
}
.comp-card--teal .comp-card__attrs li::before { background: var(--accent); }
.comp-card--amber .comp-card__attrs li::before { background: #d4930d; }
.comp-card--red .comp-card__attrs li::before { background: var(--danger); }

.comp-footer {
  margin-top: var(--s-8);
  display: flex; flex-direction: column;
  gap: var(--s-5); align-items: flex-start;
}
.comp-footer p {
  font-family: var(--font-body); font-size: 16px;
  line-height: var(--lh-body); color: var(--ink-2);
  margin: 0; max-width: 72ch; text-wrap: pretty;
}

/* ============ SECTION 5: Flowchart ============ */
.flowchart-section {
  background: var(--paper-2);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--rule);
}
.flowchart {
  background: var(--gray-900);
  border-radius: 14px;
  padding: var(--s-8);
  color: var(--gray-100);
  position: relative;
  overflow: hidden;
}
.flowchart::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}
.fc-step {
  display: none;
  flex-direction: column;
  gap: var(--s-5);
  animation: fcFadeIn 200ms var(--ease) forwards;
}
.fc-step.active { display: flex; }
@keyframes fcFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.fc-question {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px); line-height: 1.15;
  color: var(--gray-100); margin: 0;
}
.fc-question em { font-style: italic; color: var(--brand-300); }
.fc-answers {
  display: flex; flex-direction: column; gap: var(--s-3);
  max-width: 560px;
}
.fc-answer {
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  color: var(--gray-100); background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-2); padding: var(--s-4) var(--s-5);
  cursor: pointer; text-align: left;
  min-height: 48px;
  display: flex; align-items: center; gap: var(--s-3);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.fc-answer:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--brand-300);
}
.fc-answer:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 2px;
}
.fc-answer svg { width: 18px; height: 18px; color: var(--brand-300); flex-shrink: 0; }

/* Result card */
.fc-result {
  display: none;
  flex-direction: column;
  gap: var(--s-5);
  animation: fcFadeIn 200ms var(--ease) forwards;
}
.fc-result.active { display: flex; }
.fc-result__badge {
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 5px 12px; border-radius: var(--r-1);
  display: inline-flex; align-self: flex-start;
  background: rgba(127,86,217,0.15); color: var(--brand-300);
}
.fc-result--emergency .fc-result__badge {
  background: rgba(240,68,56,0.15); color: var(--danger);
}
.fc-result__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15;
  color: var(--gray-100); margin: 0;
}
.fc-result__body {
  font-family: var(--font-body); font-size: 16px;
  line-height: 1.6; color: var(--gray-400);
  margin: 0; max-width: 56ch;
}
.fc-result__ctas {
  display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center;
}
.fc-result__ctas .btn-primary {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.fc-result__ctas .btn-primary:hover { background: var(--card); }
.fc-result__ctas .btn-ghost {
  background: transparent; color: var(--gray-300);
  border-color: rgba(255,255,255,0.25);
}
.fc-result__ctas .btn-ghost:hover { background: rgba(255,255,255,0.06); }
.fc-result--emergency .fc-result__ctas .btn-primary {
  background: var(--danger); color: #fff; border-color: var(--danger);
}
.fc-result--emergency .fc-result__ctas .btn-primary:hover {
  background: #c02020; border-color: #c02020;
}
.fc-restart {
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  color: var(--gray-500); background: none; border: none; cursor: pointer;
  padding: 0; display: inline-flex; align-items: center; gap: var(--s-2);
  transition: color var(--t-base) var(--ease);
}
.fc-restart:hover { color: var(--gray-300); }
.fc-restart svg { width: 14px; height: 14px; }

/* ============ SECTION 6: Process Steps ============ */
.process-section {
  background: var(--paper);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--rule);
}
.process-layout {
  display: grid;
  grid-template-columns: 1fr 0.42fr;
  gap: var(--s-8);
  align-items: start;
}
.process-steps {
  display: flex; flex-direction: column; gap: 0;
}
.process-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--rule);
}
.process-step:first-child { padding-top: 0; }
.process-step:last-child { border-bottom: none; }
.process-step__num {
  font-family: var(--font-display); font-style: italic;
  font-size: 22px; color: var(--accent);
  letter-spacing: 0.04em; padding-top: 2px;
  text-align: center;
}
.process-step__content {
  display: flex; flex-direction: column; gap: var(--s-2);
}
.process-step h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: 1.2;
  margin: 0; color: var(--ink);
}
.process-step p {
  font-family: var(--font-body); font-size: 15px;
  line-height: 1.6; color: var(--ink-2);
  margin: 0; max-width: 52ch; text-wrap: pretty;
}
.process-step__time {
  font-family: var(--font-body); font-weight: 500;
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted);
  margin-top: var(--s-1);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.process-step__time svg { width: 14px; height: 14px; color: var(--accent); }
.process-photos {
  position: sticky; top: 140px;
  display: flex; flex-direction: column; gap: var(--s-3);
  max-height: fit-content;
}
.process-photo {
  aspect-ratio: 5 / 3;
  background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper-2) 100%);
  border: 1px solid var(--rule); overflow: hidden;
  filter: sepia(0.15) saturate(0.9);
  display: flex; align-items: center; justify-content: center;
}
.process-photo .ph-label {
  font-family: 'Courier New', monospace;
  font-size: 10px; color: var(--muted);
  text-align: center; line-height: 1.5; max-width: 22ch;
  padding: var(--s-4);
}
.process-photo--mobile {
  display: none;
  aspect-ratio: 16 / 9;
  margin: var(--s-4) 0;
}

/* ============ SECTION 7: Zabezpieczenie ============ */
.interim {
  background: var(--paper-2);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--rule);
}
.interim-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-8);
  align-items: start;
}
.interim-text {
  display: flex; flex-direction: column; gap: var(--s-5);
}
.interim-text p {
  font-family: var(--font-body); font-size: 16px;
  line-height: var(--lh-body); color: var(--ink-2);
  margin: 0; max-width: var(--content-measure); text-wrap: pretty;
}
.interim-text .highlight {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 1.4;
  color: var(--ink); font-style: italic;
  padding-left: var(--s-5);
  border-left: 2px solid #d4930d;
}

/* Info card */
.interim-card {
  border: 1px solid var(--rule);
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.interim-card__accent {
  height: 4px; background: #d4930d; flex-shrink: 0;
}
.interim-card__body {
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.interim-card__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.2;
  color: var(--ink); margin: 0;
}
.interim-card__facts {
  display: flex; flex-direction: column; gap: var(--s-4);
}
.interim-card__fact {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.55; color: var(--ink-2);
}
.interim-card__fact svg { width: 20px; height: 20px; color: #d4930d; flex-shrink: 0; margin-top: 1px; }
.interim-card__cta {
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
}
.interim-card__cta .btn-primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
  width: 100%; justify-content: center; text-align: center;
}
.interim-card__cta .btn-primary:hover { background: #000; }

/* ============ SECTION 8: Heritage Block ============ */
.heritage {
  background: var(--gray-900);
  padding: var(--s-10) 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  position: relative; overflow: hidden;
}
.heritage::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(180,140,80,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(127,86,217,0.04) 0%, transparent 60%);
  pointer-events: none;
}
.heritage::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
  opacity: 0.03; mix-blend-mode: luminosity;
  pointer-events: none;
}
.heritage .container { position: relative; z-index: 1; }

/* Heritage header with photo */
.heritage-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-8);
  align-items: end;
  margin-bottom: var(--s-8);
}
.heritage-header__text { display: flex; flex-direction: column; gap: var(--s-4); }
.heritage-badge {
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(180,140,80,0.85); background: rgba(180,140,80,0.1);
  padding: 5px 14px; border-radius: var(--r-1);
  display: inline-flex; align-self: flex-start;
  border: 1px solid rgba(180,140,80,0.15);
}
.heritage h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 3.8vw, 52px); line-height: 1.08;
  letter-spacing: var(--ls-snug); margin: 0;
  color: var(--gray-100);
}
.heritage h2 em { font-style: italic; color: rgba(180,140,80,0.85); }
.heritage-subtitle {
  font-family: var(--font-body); font-size: var(--fs-body);
  line-height: var(--lh-body); color: var(--gray-400);
  margin: 0; max-width: 50ch;
}
.heritage-portrait {
  width: 200px; height: 260px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gray-700) 0%, var(--gray-800) 100%);
  border: 1px solid rgba(180,140,80,0.25);
  overflow: hidden; flex-shrink: 0;
  filter: sepia(0.15) saturate(0.9);
  display: flex; align-items: center; justify-content: center;
}
.heritage-portrait .ph-label {
  font-family: 'Courier New', monospace;
  font-size: 9px; color: var(--gray-500);
  text-align: center; line-height: 1.4;
  padding: var(--s-3);
}

/* Heritage cards */
.heritage-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.heritage-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: none;
  padding: var(--s-7);
  display: flex; flex-direction: column; gap: var(--s-4);
  position: relative;
  transition: background var(--t-base) var(--ease);
}
.heritage-card:first-child { border-left: 1px solid rgba(255,255,255,0.06); }
.heritage-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: rgba(180,140,80,0.6);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.heritage-card:hover { background: rgba(255,255,255,0.05); }
.heritage-card:hover::before { transform: scaleX(1); }
.heritage-card__icon {
  width: 40px; height: 40px;
  color: rgba(180,140,80,0.7);
}
.heritage-card__icon svg { width: 40px; height: 40px; stroke-width: 1.2; }
.heritage-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.2;
  color: var(--gray-100); margin: 0;
}
.heritage-card p {
  font-family: var(--font-body); font-size: 15px;
  line-height: 1.6; color: var(--gray-400);
  margin: 0; flex: 1;
}

/* Heritage footer CTA */
.heritage-footer {
  margin-top: var(--s-8);
  display: flex; align-items: center; gap: var(--s-4);
}
.heritage-footer .btn-primary {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.heritage-footer .btn-primary:hover { background: var(--card); }

/* ============ MAIN CONTENT AREA ============ */
.contact-content {
  min-height: 40vh;
  padding: 96px 0;
}

@media (max-width: 960px) {
  .comp-cards { grid-template-columns: repeat(2, 1fr); }
  .comp-card:nth-child(1), .comp-card:nth-child(2) { border-bottom: none; }
  .comp-card:nth-child(odd) { border-left: 1px solid var(--rule); }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* Zdjęcie ZA tekstem, nie przed nim.
     Reguła `order: -1` (tylko na tej podstronie — pozostałe strony usług jej
     nie mają) wypychała nagłówek, lead i oba przyciski poza pierwszy ekran:
     na 375×812 px CTA lądowało na 851 px, czyli pod zgięciem. Na stronie
     docelowej kampanii pierwszy ekran musi nieść H1, obietnicę i telefon. */
  .hero-photo { order: 0; }
  .section-head { grid-template-columns: 1fr; gap: var(--s-5); margin-bottom: var(--s-7); }
  .routing-cards { grid-template-columns: 1fr; }
  .tab-panel.active { grid-template-columns: 1fr; }
  .tab-panel__photo { display: none; }
  .tab-bar { gap: 0; }
  .comp-cards { grid-template-columns: 1fr; }
  .comp-card { border-left: 1px solid var(--rule) !important; border-bottom: none; }
  .comp-card:last-child { border-bottom: 1px solid var(--rule); }
  .process-layout { grid-template-columns: 1fr; }
  .process-photos { display: none; }
  .interim-layout { grid-template-columns: 1fr; }
  .heritage-header { grid-template-columns: 1fr; }
  .heritage-portrait { width: 240px; height: 320px; margin: 0 auto; }
  .heritage-cards { grid-template-columns: 1fr; }
  .heritage-card { border-left: 1px solid rgba(255,255,255,0.06) !important; border-bottom: none; }
  .heritage-card:last-child { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .heritage-footer { flex-direction: column; align-items: flex-start; }
  /* UWAGA: reguły dla sekcji 9–11 (svc-parent / svc-defend / photo-break /
     costs) NIE mogą stać tutaj — ich definicje bazowe są dopiero niżej w pliku
     i przy tej samej specyficzności wygrywały z tym blokiem. Żyją teraz
     w bloku „ODROBIONE OVERRIDE'Y ≤860" na końcu pliku. */
  .faq-layout { grid-template-columns: 1fr; }
  .cd-sidebar { position: static; order: -1; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .media-logos { gap: var(--s-5); }
  .team-layout { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 120px 1fr; gap: var(--s-4); }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-info { order: -1; }
}

/* Scroll reveal */
.scroll-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-section) var(--ease), transform var(--t-section) var(--ease); }
.scroll-reveal.visible { opacity: 1; transform: translateY(0); }

/* ============ SECTION 9: Service — Parent Seeking Custody ============ */
.svc-parent {
  background: var(--paper);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--rule);
}
.svc-parent-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-8);
  align-items: start;
}
.svc-parent__text {
  display: flex; flex-direction: column; gap: var(--s-5);
}
.svc-parent__text h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: var(--lh-heading);
  color: var(--ink); margin: 0;
  margin-top: var(--s-3);
}
.svc-parent__text h3:first-child { margin-top: 0; }
.svc-parent__text p {
  font-family: var(--font-body); font-size: 16px;
  line-height: var(--lh-body); color: var(--ink-2);
  margin: 0; max-width: var(--content-measure); text-wrap: pretty;
}
.svc-parent__callout {
  padding-left: var(--s-5);
  border-left: 2px solid var(--accent);
  margin: var(--s-3) 0;
}
.svc-parent__callout p {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 1.4;
  color: var(--ink); font-style: italic;
  margin: 0;
}
.svc-parent__photo-col {
  position: sticky; top: 140px;
}
.svc-parent__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper-2) 100%);
  border: 1px solid var(--rule); overflow: hidden;
  filter: sepia(0.15) saturate(0.9);
  display: flex; align-items: center; justify-content: center;
}
.svc-parent__photo .ph-label {
  font-family: 'Courier New', monospace;
  font-size: 11px; color: var(--muted);
  text-align: center; line-height: var(--lh-body);
  max-width: 26ch; padding: var(--s-5);
}
/* Mobile: photo on top, full width, 16:9 */
.svc-parent__photo--mobile {
  display: none;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper-2) 100%);
  border: 1px solid var(--rule); overflow: hidden;
  filter: sepia(0.15) saturate(0.9);
  align-items: center; justify-content: center;
  margin-bottom: var(--s-5);
}

/* ============ SECTION 10: Service — Parent Defending ============ */
.svc-defend {
  background: var(--paper-2);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--rule);
}
.svc-defend-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--s-8);
  align-items: start;
}
.svc-defend__text {
  display: flex; flex-direction: column; gap: var(--s-5);
}
.svc-defend__text h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: var(--lh-heading);
  color: var(--ink); margin: 0;
  margin-top: var(--s-3);
}
.svc-defend__text h3:first-child { margin-top: 0; }
.svc-defend__text p {
  font-family: var(--font-body); font-size: 16px;
  line-height: var(--lh-body); color: var(--ink-2);
  margin: 0; max-width: var(--content-measure); text-wrap: pretty;
}
.svc-defend__callout {
  padding-left: var(--s-5);
  border-left: 2px solid var(--accent);
  margin: var(--s-3) 0;
}
.svc-defend__callout p {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 1.4;
  color: var(--ink); font-style: italic;
  margin: 0;
}
.svc-defend__photo-col {
  position: sticky; top: 140px;
}
.svc-defend__photo {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--paper-3) 0%, var(--paper) 100%);
  border: 1px solid var(--rule); overflow: hidden;
  filter: sepia(0.15) saturate(0.9);
  display: flex; align-items: center; justify-content: center;
}
.svc-defend__photo .ph-label {
  font-family: 'Courier New', monospace;
  font-size: 11px; color: var(--muted);
  text-align: center; line-height: var(--lh-body);
  max-width: 26ch; padding: var(--s-5);
}

/* ============ SECTION 11: Photo Break ============ */
.photo-break {
  position: relative;
  width: 100%;
  max-height: 500px;
  min-height: 400px;
  overflow: hidden;
  border-top: 1px solid var(--rule);
}
.photo-break__image {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-100) 100%);
  filter: sepia(0.15) saturate(0.9);
}
.photo-break__placeholder {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(0,0,0,0.02) 20px, rgba(0,0,0,0.02) 21px);
  display: flex; align-items: center; justify-content: center;
}
.photo-break__placeholder .ph-label {
  font-family: 'Courier New', monospace;
  font-size: 11px; color: var(--muted);
  text-align: center; line-height: var(--lh-body);
  max-width: 30ch;
}
.photo-break__overlay {
  position: absolute;
  bottom: var(--s-7); right: var(--s-7);
  max-width: 480px;
  z-index: 1;
}
.photo-break__quote {
  background: rgba(16, 24, 40, 0.88);
  backdrop-filter: blur(8px);
  padding: var(--s-6) var(--s-7);
  margin: 0;
  border-left: 3px solid rgba(180, 140, 80, 0.7);
}
.photo-break__quote p {
  font-family: var(--font-display); font-weight: 400;
  font-size: 20px; line-height: 1.45;
  color: var(--gray-100); font-style: italic;
  margin: 0 0 var(--s-4);
}
.photo-break__quote cite {
  font-family: var(--font-body); font-weight: 500;
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--gray-400); font-style: normal;
}

/* ============ SECTION 12: Costs ============ */
.costs {
  background: var(--paper);
  padding: var(--s-10) 0;
  border-top: 1px solid var(--rule);
}

/* Court fees info box */
.costs-fees {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: var(--s-7);
  margin-bottom: var(--s-8);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.costs-fees__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.2;
  color: var(--ink); margin: 0;
}
.costs-fees__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.costs-fees__item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-body); font-size: 15px;
  line-height: var(--lh-body); color: var(--ink-2);
}
.costs-fees__item:last-child { border-bottom: none; }
.costs-fees__item span:last-child {
  font-weight: 600; color: var(--ink);
  white-space: nowrap; flex-shrink: 0;
}
.costs-fees__note {
  font-family: var(--font-body); font-size: 13px;
  color: var(--muted); margin: 0; line-height: var(--lh-body);
}

/* Attorney pricing cards */
.costs-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-bottom: var(--s-8);
}
.cost-card {
  border: 1px solid var(--rule);
  background: var(--card);
  display: flex; flex-direction: column;
  position: relative;
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.cost-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
/* BEZ translateY — karta cennika nie jest linkiem (patrz .testimonial-card). */
.cost-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(127, 86, 217, 0.08);
}
.cost-card:hover::before { transform: scaleX(1); }
.cost-card--featured {
  border-color: var(--accent);
}
.cost-card--featured::before { transform: scaleX(1); }
.cost-card__badge {
  position: absolute; top: var(--s-4); right: var(--s-4);
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: var(--r-1);
  background: var(--accent-soft); color: var(--accent);
}
.cost-card__body {
  padding: var(--s-7) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-4);
  flex: 1;
}
.cost-card h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.2;
  color: var(--ink); margin: 0;
  padding-right: var(--s-6);
}
.cost-card__price {
  font-family: var(--font-display); font-weight: 400;
  font-size: 28px; line-height: 1.1;
  color: var(--accent); margin: 0;
}
.cost-card__price span {
  font-family: var(--font-body); font-size: 13px;
  color: var(--muted); font-weight: 400;
}
.cost-card__includes {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--s-2);
  flex: 1;
}
.cost-card__includes li {
  font-family: var(--font-body); font-size: 14px;
  line-height: 1.55; color: var(--ink-2);
  padding-left: var(--s-5); position: relative;
}
.cost-card__includes li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--accent);
  border-radius: 50%;
}
.costs-footer {
  display: flex; flex-direction: column; gap: var(--s-5);
  align-items: flex-start;
}
.costs-footer p {
  font-family: var(--font-body); font-size: 16px;
  line-height: var(--lh-body); color: var(--ink-2);
  margin: 0; max-width: 60ch; text-wrap: pretty;
}

/* ============ SECTION 13: FAQ + sidebar — przeniesione do section-faq.css + section-commons.css (warunkowo) ============ */

/* ============ SECTION 14: Testimonials — przeniesione do section-testimonials.css (warunkowo) ============ */

/* Section: Team — przeniesione do section-team.css (warunkowo) */

/* Section: Related Services — przeniesione do section-related.css (warunkowo) */
/* Section: Contact form — przeniesione do section-contact-form.css (warunkowo) */

/* ============================================================
   DODATEK MOBILNY (≤860 / ≤600 / ≤400) — telefon i tablet. Desktop nietknięty.
   ============================================================ */
/* Layouty z bocznym sidebarem: stack już na tablecie (intencja z dead-code @860). */
@media (max-width: 860px) {
  .team-layout, .contact-layout, .faq-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .comp-cards,
  .costs-cards,
  .heritage-cards,
  .media-logos,
  .related-grid,
  .routing-cards,
  .testimonials-grid { grid-template-columns: 1fr !important; }
  .faq-layout,
  .team-layout,
  .contact-layout { grid-template-columns: 1fr !important; }
  /* Karta zespołu: portret 200px → stack nad treścią (baza 200px 1fr przepełnia) */
  .team-card { grid-template-columns: 1fr !important; gap: var(--s-4) !important; }
  .team-card__portrait { max-width: 140px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .cform-field input { min-height: 44px; }
}

/* ============================================================
   ODROBIONE OVERRIDE'Y ≤860 — sekcje 9–11.
   Blok @media na górze pliku poprzedzał definicje bazowe tych selektorów
   (.svc-parent-grid @741, .svc-defend-grid @806, .photo-break @856,
   .costs-cards @948), więc przy równej specyficzności baza wygrywała
   i mobilne złamanie siatki nigdy nie działało: na telefonie zostawał
   układ 1.4fr/1fr (kolumna tekstu ~150px). Tu, po bazie, działa.
   ============================================================ */
@media (max-width: 860px) {
  .svc-parent-grid { grid-template-columns: 1fr; }
  .svc-parent__photo-col { position: static; order: -1; }
  .svc-parent__photo { aspect-ratio: 16 / 9; }
  .svc-defend-grid { grid-template-columns: 1fr; }
  .svc-defend__photo-col { position: static; order: -1; }
  .svc-defend__photo { aspect-ratio: 16 / 9; }
  .photo-break { min-height: 520px; }
  .photo-break__overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    max-width: none;
  }
  .photo-break__quote { border-left: none; border-top: 3px solid rgba(180, 140, 80, 0.7); }
  .costs-cards { grid-template-columns: 1fr; }
  .costs-fees__item { flex-direction: column; gap: var(--s-1); }
}

/* ============================================================
   DODATEK MOBILNY — POLISH (≤600). Desktop (>600) nietknięty.
   ============================================================ */
@media (max-width: 600px) {
  .hero, .routing, .topics, .svc-parent, .svc-defend, .flowchart-section,
  .comparison, .process-section, .interim, .costs, .heritage, .testimonials,
  .team, .faq-section, .related, .contact-section, .contact-content {
    padding-top: var(--s-7); padding-bottom: var(--s-7); }
  /* Kadr: sama wysokość, BEZ aspect-ratio — proporcja + max-height przenosi
     limit wysokości na max-WIDTH (190 × 16/10 = 304px) i kadr zwężał się. */
  .hero-photo__frame { aspect-ratio: auto; height: 190px; max-height: none; min-height: 0; }
  .photo-break { min-height: 220px; }
  /* Jak wyżej: sama wysokość zamiast proporcji + max-height (200 × 16/10 = 320px
     przenosiłoby się na max-width i zwężało kadr). */
  .svc-parent__photo, .svc-defend__photo { aspect-ratio: auto; height: 200px; max-height: none; min-height: 0; }
  .routing-card, .cost-card__body, .heritage-card, .testimonial-card { padding: var(--s-5); }
}

/* Hero: na telefonie bez wymuszania pełnego ekranu — przylega do treści (koniec pustki) */
@media (max-width: 600px) {
  .hero { min-height: auto; }
}