:root {
  /* Graphite dark theme; brand blues (light blue #2e9fd4, navy #16537e) as accents. */
  --bg: #1b1e23;
  --bg-alt: #15181c;
  --surface: #23272e;
  --white: #f5f8fa;
  --text: #e9eef3;
  --muted: rgba(233, 238, 243, 0.85);
  --muted-2: rgba(233, 238, 243, 0.6);
  --line: rgba(255, 255, 255, 0.12);
  --accent: #2e9fd4;
  --accent-2: #16537e;
  --accent-soft: rgba(46, 159, 212, 0.14);
  --accent-shadow: rgba(46, 159, 212, 0.35);
  --ink: #ffffff;
  /* The logo sits on this dark graphite; the header/footer bars use the exact
     same colour so the logo's own background blends in seamlessly. */
  --logo-bg: #15191f;
  --radius: 28px;
  /* Hero frame insets — narrow side margins so the frame sits closer to the
     screen edges. */
  --frame-x: clamp(26px, 4.5vw, 82px);
  --frame-y: 38px;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--ink);
  box-shadow: 0 12px 30px var(--accent-shadow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px var(--accent-shadow);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(22, 83, 126, 0.3);
}

.btn-ghost:hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above .nav-overlay (z-index 1090) so the logo + menu button stay
     visible and clickable while the full-screen menu is open. */
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 48px;
  gap: 24px;
  background: var(--logo-bg);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s ease, transform 0.35s ease, color 0.3s ease;
}

/* Auto-hide on scroll down, reveal on scroll up. */
.site-header.hidden {
  transform: translateY(-100%);
}

/* Every page starts with a transparent header over its hero; the solid bar
   fades in once the user scrolls down. */
.site-header:not(.scrolled) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
  padding: 32px 48px 18px;
}

/* On the homepage, tuck the header inside the hero's inset frame so the menu
   button and right-hand link sit comfortably within it, not on its edge. */
body.home .site-header:not(.scrolled) {
  padding: calc(var(--frame-y) + 34px) calc(var(--frame-x) + 38px) 18px;
}

/* White header text over the dark hero until the bar fades in. */
.site-header:not(.scrolled) .menu-btn,
.site-header:not(.scrolled) .header-phone {
  color: #fff;
}

/* Hide the logo while at the top; it fades in once the header solidifies. */
.site-header:not(.scrolled) .logo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Centered logo, menu on the left, phone on the right — like the reference. */
.site-header .logo {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.site-header .logo-img {
  height: 56px;
  width: auto;
}

.header-phone {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--text);
}

.header-phone:hover {
  color: var(--accent);
}

/* Menu trigger — visible at every viewport size */

.menu-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text);
  position: relative;
  z-index: 1101;
  padding: 6px 0;
}

/* While the dark overlay is open, the button sits on top of it. */
.menu-btn.open {
  color: var(--white);
}

.menu-btn-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.menu-btn-label .label-close { display: none; }

.menu-btn.open .menu-btn-label .label-open { display: none; }
.menu-btn.open .menu-btn-label .label-close { display: inline; }

.menu-btn-icon {
  width: 30px;
  height: 20px;
  position: relative;
}

.menu-btn-icon span,
.menu-btn-icon span::before,
.menu-btn-icon span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(.65,0,.35,1), opacity 0.2s ease, width 0.3s ease;
}

.menu-btn-icon span { top: 9px; }
.menu-btn-icon span::before { top: -9px; }
.menu-btn-icon span::after { top: 9px; width: 65%; }

.menu-btn:hover .menu-btn-icon span::after { width: 100%; }

.menu-btn.open .menu-btn-icon span { background: transparent; }
.menu-btn.open .menu-btn-icon span::before { transform: translateY(9px) rotate(45deg); background: var(--accent); }
.menu-btn.open .menu-btn-icon span::after { width: 100%; transform: translateY(-9px) rotate(-45deg); background: var(--accent); }

/* ---------- Full-screen nav overlay ---------- */

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 1090;
  clip-path: circle(2% at var(--ox, 92%) var(--oy, 6%));
  transition: clip-path 0.7s cubic-bezier(.65, 0, .35, 1);
  visibility: hidden;
  pointer-events: none;
}

.nav-overlay.open {
  clip-path: circle(150% at var(--ox, 92%) var(--oy, 6%));
  visibility: visible;
  pointer-events: auto;
}

.nav-overlay-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* The overlay stays dark regardless of the page theme. */
  background: #0c1118;
}

.nav-overlay-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 1s ease, transform 6s ease;
}

.nav-overlay.open .nav-overlay-bg img.is-visible {
  opacity: 0.5;
  transform: scale(1);
}

.nav-overlay-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7,11,16,0.42) 0%, rgba(7,11,16,0.58) 70%, rgba(7,11,16,0.68) 100%),
    linear-gradient(115deg, rgba(7,11,16,0.32) 0%, rgba(7,11,16,0.05) 60%);
}

.nav-overlay-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 120px 32px 64px;
}

.nav-links {
  list-style: none;
}

.nav-links li {
  overflow: hidden;
}

.nav-overlay:not(.open) .nav-links a {
  transform: translateY(100%);
}

.nav-links a {
  display: inline-flex;
  justify-content: center;
  padding: 15px 4px;
  text-decoration: none;
  color: rgba(245, 248, 250, 0.62);
  transition: color 0.4s ease, transform 0.6s cubic-bezier(.16,1,.3,1);
}

.nav-overlay.open .nav-links li:nth-child(1) a { transition-delay: 0.15s; }
.nav-overlay.open .nav-links li:nth-child(2) a { transition-delay: 0.22s; }
.nav-overlay.open .nav-links li:nth-child(3) a { transition-delay: 0.29s; }

.nav-num {
  display: none;
}

.nav-label {
  position: relative;
  font-family: 'Playfair Display', serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 60px);
  letter-spacing: 0.01em;
  line-height: 1.18;
  transition: letter-spacing 0.4s ease;
}

.nav-label::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.14em;
  width: 42%;
  height: 1px;
  background: var(--accent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(.16,1,.3,1);
}

.nav-links a:hover {
  color: var(--white);
}

.nav-links a:hover .nav-label {
  letter-spacing: 0.05em;
}

.nav-links a:hover .nav-label::after {
  transform: translateX(-50%) scaleX(1);
}

.nav-overlay-footer {
  position: relative;
  z-index: 1;
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: 0.35s;
}

.nav-overlay.open .nav-overlay-footer {
  opacity: 1;
  transform: translateY(0);
}

.nav-contact,
.nav-social {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
}

.nav-contact a,
.nav-social a {
  color: rgba(245, 248, 250, 0.7);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.nav-contact a:hover,
.nav-social a:hover {
  color: var(--accent);
}

.nav-social {
  gap: 20px;
  align-self: center;
}

.nav-social a {
  color: rgba(245, 248, 250, 0.5);
}

/* ---------- Hero (simple: full-bleed image + headline) ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--bg);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 24s ease-in-out infinite alternate;
}

.hero-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes kenburns {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 14, 22, 0.28) 0%, rgba(4, 14, 22, 0.15) 40%, rgba(4, 14, 22, 0.82) 100%),
    linear-gradient(90deg, rgba(4, 14, 22, 0.6) 0%, rgba(4, 14, 22, 0.05) 60%);
}

/* Thin rounded brand frame; dissolves as the user scrolls into the page. */
.hero-frame {
  position: absolute;
  inset: calc(var(--frame-y) * (1 - var(--hp, 0))) calc(var(--frame-x) * (1 - var(--hp, 0)));
  z-index: 4;
  border: 2px solid rgba(245, 248, 250, 0.7);
  border-radius: 42px;
  pointer-events: none;
  opacity: calc(1 - var(--hp, 0));
  transform: scale(calc(1 + var(--hp, 0) * 0.03));
  transform-origin: center;
  transition: inset 0.08s linear, opacity 0.08s linear, transform 0.08s linear;
  will-change: opacity, transform, inset;
}

/* Kept for the dark photo banners on subpages (.page-hero). */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 7, 5, 0.55) 0%, rgba(6, 7, 5, 0.35) 35%, rgba(6, 7, 5, 0.75) 100%),
    linear-gradient(90deg, rgba(6, 7, 5, 0.65) 0%, rgba(6, 7, 5, 0.15) 55%);
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 860px;
  padding: 0 calc(var(--frame-x) + clamp(18px, 2.5vw, 46px)) clamp(70px, 12vh, 130px);
  color: #fff;
}

.hero-content .eyebrow {
  color: #8fd3f2;
  margin-bottom: 20px;
}

.hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(38px, 5.6vw, 78px);
  line-height: 1.08;
}

.hero-sub {
  margin-top: 22px;
  font-size: clamp(16px, 1.7vw, 20px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 560px;
}

.hero-actions {
  margin-top: 38px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.hero-actions .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.hero-actions .btn-ghost:hover {
  border-color: #fff;
}

/* ---------- Counters (animated, gradient numbers in cards) ---------- */

.counters {
  max-width: 1160px;
  margin: 0 auto;
  padding: 30px 24px;
}

.counters-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.counter {
  text-align: center;
}

.counter-ring {
  position: relative;
  width: clamp(176px, 19vw, 210px);
  aspect-ratio: 1;
  margin: 0 auto 20px;
}

.ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 3;
}

.ring-progress {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 339.3;
  stroke-dashoffset: 339.3;
  transition: stroke-dashoffset 1.7s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.counters.is-visible .ring-progress {
  stroke-dashoffset: 0;
}

.counter-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}

.cn-num {
  font-size: clamp(40px, 5vw, 60px);
  background: linear-gradient(160deg, #6fc9f2 0%, #2e9fd4 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.cn-pre,
.cn-suf {
  font-size: clamp(18px, 2.2vw, 28px);
  color: var(--accent);
  font-weight: 700;
}

.cn-pre { margin-right: 3px; }
.cn-suf { margin-left: 3px; }

.counter-label {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Interlude: fixed-image scroll break between sections ---------- */

.interlude {
  height: clamp(340px, 52vh, 560px);
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* parallax scroll break */
}

.interlude-process {
  height: clamp(440px, 72vh, 780px); /* fixed parallax, but tall (not a thin strip) */
  background-attachment: fixed;
  background-image:
    linear-gradient(180deg, rgba(8, 12, 18, 0.4) 0%, rgba(8, 12, 18, 0.5) 100%),
    url('assets/interlude-top.png');
}

.interlude-linens {
  background-image:
    linear-gradient(180deg, rgba(8, 12, 18, 0.4) 0%, rgba(8, 12, 18, 0.5) 100%),
    url('assets/interlude-pokojowa.png');
}

@media (max-width: 760px) {
  /* iOS/mobile handle background-attachment: fixed poorly — use scroll. */
  .interlude { background-attachment: scroll; }
  /* Fixed px heights (not vh) on phones: older browsers treat vh as the
     dynamic viewport, so the address bar hiding/showing would resize these
     bands mid-scroll and make everything below jump. */
  .interlude { height: 360px; }
  .interlude-process { height: 440px; }

  /* Keep the header (with the logo) pinned on phones — don't auto-hide the bar
     on scroll-down. */
  .site-header.hidden { transform: none; }

  /* Keep the sticky-stacking card animation, but drop vh from the heights:
     on older phones vh tracks the dynamic viewport, so the address bar toggling
     resized every card mid-scroll and the page jumped. vw stays put. */
  .services .stack { gap: 8vw; padding-bottom: 10vw; }
  .stack .card { height: 120vw; min-height: 380px; max-height: 540px; }
}

/* ---------- Clients marquee (looping, no wrapping on small screens) ---------- */

.clients {
  padding: 60px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.clients-label {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 30px;
}

.marquee {
  position: relative;
  overflow: hidden;
  /* fade the strip out at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

/* Uniform trailing margin on every item (incl. the last) keeps the two
   duplicated halves identical in width, so translateX(-50%) loops seamlessly. */
.marquee-track span {
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  margin-right: clamp(40px, 6vw, 80px);
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

.scroll-hint {
  position: absolute;
  bottom: calc(var(--frame-y) + 16px);
  right: calc(var(--frame-x) + 28px);
  z-index: 4;
  font-size: 22px;
  color: #fff;
  opacity: 0.7;
  text-decoration: none;
  animation: bounce 1.8s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* ---------- Testimonials ---------- */

.testimonials {
  position: relative;
  padding: 130px 24px;
  background-image: url('assets/korytarz-hotelowy.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* parallax: corridor stays fixed while scrolling */
}

/* Dark overlay so the drum reads as a subtle backdrop and text stays legible. */
.testimonials::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(21, 24, 29, 0.6) 0%, rgba(21, 24, 29, 0.72) 100%);
  z-index: 0;
}

.testimonials-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
}

.testimonial-carousel {
  position: relative;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 0.7, 0.2, 1);
}

.testimonial-slide {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
  padding: 6px;
}

.testimonial-slide .testimonial {
  max-width: 760px;
  width: 100%;
}

.testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.testimonial-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}

.testimonial-dots button.active {
  background: var(--accent);
  transform: scale(1.35);
}

.testimonial {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 34px 30px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.testimonial-mark {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  line-height: 0.5;
  color: var(--accent);
}

.testimonial p {
  flex: 1;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

.testimonial footer strong {
  display: block;
  font-size: 15px;
}

.testimonial footer span {
  font-size: 13px;
  color: var(--muted-2);
}

/* ---------- Services section intro ---------- */

.services {
  padding: 0;
}

.section-intro {
  max-width: 640px;
  margin: 0 auto 64px;
  padding: 0 48px;
  text-align: center;
}

.section-intro h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.15;
}

.section-intro p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- Stacking cards ---------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: 5vh;
  padding: 0 24px 5vh;
  max-width: 1240px;
  margin: 0 auto;
}

.card {
  position: sticky;
  top: 100px;
  height: 70vh;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  will-change: transform, filter;
  text-decoration: none;
  color: var(--white);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.65);
}

/* each card must sit above the previous one so it can slide over and cover it */
.card:nth-child(1) { z-index: 1; }
.card:nth-child(2) { z-index: 2; }
.card:nth-child(3) { z-index: 3; }
.card:nth-child(4) { z-index: 4; }

/* Optional per-card background video. Drop a <video> as the first child
   of .card (autoplay muted loop playsinline) and it fills the card exactly
   like the background-image does; the image stays as a poster/fallback. */
.card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.card-overlay {
  position: absolute;
  inset: 0;
  /* Light, slightly deepened scrim — photos stay visible; the blue title glow
     plus this gentle darkening keep the text readable. */
  background: linear-gradient(180deg, rgba(8,12,18,0.3) 0%, rgba(8,12,18,0.24) 45%, rgba(8,12,18,0.4) 100%);
}

.card-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 24px;
  max-width: 640px;
}

.card-content h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1.05;
  text-transform: capitalize;
  text-shadow: 0 2px 16px rgba(46, 159, 212, 0.95), 0 1px 3px rgba(46, 159, 212, 0.9);
}

.card-content p {
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.85;
}


/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  background: var(--logo-bg);
  overflow: hidden;
  padding-top: 100px;
}

/* Subtle "find us" lead + dark map, replacing the old loud CTA. */
.footer-lead {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 96px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}

.footer-lead-text {
  margin-top: 18px;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.32;
  color: var(--text);
}

.footer-call {
  display: inline-block;
  margin-top: 24px;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.footer-call:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.footer-map {
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #10131a;
}

.footer-map .mapboxgl-map {
  font: inherit;
}

.footer-grid {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 60px;
}

.footer-col h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted-2);
  margin-bottom: 20px;
}

.footer-brand .logo {
  display: inline-block;
  margin-bottom: 18px;
}

.footer-brand .logo-img {
  height: 52px;
  width: auto;
}

.footer-brand p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  max-width: 320px;
}

.footer-col a,
.footer-col p {
  display: block;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  line-height: 2.1;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-social {
  display: flex;
  gap: 14px;
  margin-top: 22px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 13px;
}

.footer-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.footer-bottom {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 60px auto 0;
  padding: 24px 24px 40px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted-2);
  border-top: 1px solid var(--line);
}

.footer-credit a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.footer-credit a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.footer-watermark {
  position: absolute;
  right: 24px;
  bottom: 46px;
  z-index: 0;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(26px, 6vw, 84px);
  line-height: 1;
  color: #ffffff;
  opacity: 0.07;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
}

/* ---------- Subpage: hero banner ---------- */

.page-hero {
  position: relative;
  height: 62vh;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero .hero-overlay {
  background: linear-gradient(180deg, rgba(6,7,5,0.28) 0%, rgba(6,7,5,0.6) 100%);
}

.page-hero-content {
  position: relative;
  z-index: 1;
  padding: 0 48px 56px;
  max-width: 800px;
}

.breadcrumb {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: rgba(245, 248, 250, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}

.breadcrumb a {
  color: rgba(245, 248, 250, 0.6);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--accent); }

.page-hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(34px, 5.5vw, 64px);
  line-height: 1.1;
  color: #fff;
}

/* ---------- Subpage: content ---------- */

.page-content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 90px 32px;
}

.page-content > .lede {
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.65;
  color: var(--text);
  max-width: 860px;
}

.page-content h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
  margin-top: 64px;
  margin-bottom: 24px;
}

/* Inline image block inside subpage content. */
.content-figure {
  position: relative;
  margin: 52px 0 8px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
}

.content-figure img {
  display: block;
  width: 100%;
  height: clamp(340px, 62vh, 680px);
  object-fit: cover;
}

/* Subtle tint so content photos sit into the dark page instead of glaring. */
.content-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 18, 0.14) 0%, rgba(8, 12, 18, 0.26) 100%);
}

.benefit-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.benefit-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
}

.benefit-list li::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.steps li {
  counter-increment: step;
  position: relative;
  isolation: isolate;
  padding-top: clamp(30px, 3.6vw, 50px);
  padding-left: clamp(26px, 3vw, 46px);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}

/* Large, faint watermark numeral behind the start of each step; the text
   crosses roughly the vertical middle of the digit. */
.steps li::before {
  content: counter(step);
  position: absolute;
  top: -18px;
  left: -6px;
  z-index: -1;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(86px, 10vw, 140px);
  line-height: 1;
  color: var(--accent);
  opacity: 0.24;
  pointer-events: none;
}

.cta-block {
  margin-top: 64px;
  padding: 48px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(46,159,212,0.12), rgba(46,159,212,0.03));
  border: 1px solid rgba(46, 159, 212, 0.3);
  text-align: center;
}

.cta-block h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(22px, 2.6vw, 30px);
  margin-bottom: 14px;
}

.cta-block p {
  color: var(--muted);
  margin-bottom: 28px;
}

.related-services {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 140px;
}

.related-services h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3vw, 32px);
  margin-bottom: 32px;
  text-align: center;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.related-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 220px;
  text-decoration: none;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  background-size: cover;
  background-position: center;
}

.related-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.75));
}

.related-card span {
  position: relative;
  z-index: 1;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--white);
}

/* ---------- Careers page ---------- */

.perk-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.perk-grid div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 34px 30px;
}

.perk-grid strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 19px;
  margin-bottom: 10px;
  color: var(--accent);
}

.perk-grid p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.65;
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 30px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  flex-wrap: wrap;
}

.job-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  margin-bottom: 6px;
}

.job-card span {
  font-size: 13px;
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-lead { grid-template-columns: 1fr; gap: 28px; padding-bottom: 72px; }
  .footer-map { height: 240px; }
  .benefit-list { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .perk-grid { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .menu-btn-label { display: none; }
  .header-phone { display: none; }
  .nav-overlay-inner { padding: 100px 28px 40px; }
  .nav-links a { padding: 13px 2px; }
  .nav-social { align-self: center; }
}

@media (max-width: 760px) {
  .counters-inner { grid-template-columns: 1fr; }
  /* iOS/mobile handle background-attachment: fixed poorly — use scroll. */
  .testimonials { background-attachment: scroll; }
}

@media (max-width: 640px) {
  :root { --frame-x: 12px; --frame-y: 12px; }
  .site-header { padding: 14px 24px; }
  .site-header .logo-img { height: 46px; }
  .card { border-radius: 18px; }
  .hero-frame { border-radius: 26px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 8px; }

  /* Shorter hero on phones = the landscape video is cropped far less by
     object-fit: cover (more of the frame shows) while still filling edge to
     edge — a "smaller cover", no letterbox bars. */
  .hero { min-height: 74svh; }

  /* Hero CTAs stack on phones — put the primary "Współpraca B2B" at the bottom
     with "Kontakt" above it (reverse the source order visually). */
  .hero-actions {
    flex-direction: column-reverse;
    align-items: flex-start;
  }

  /* Keep the hero copy clear of the menu button and the frame's top edge on
     short phone viewports. The content is bottom-aligned, so on a short screen
     it can grow up into the burger; a real top pad (plus a lighter bottom pad)
     reserves room for the header and lets the hero grow instead of colliding. */
  .hero-content {
    padding-top: clamp(78px, 15vh, 108px);
    padding-bottom: clamp(40px, 7vh, 68px);
  }

  /* CTA block: 48px padding leaves too little room on phones, so the long
     button overflows and can't centre. Trim the padding. */
  .cta-block { padding: 32px 22px; }

  /* "Co zyskujesz" fields: the flex row (✓ | bold label | description) splits
     into cramped columns on a phone. Lay each field out vertically — the ✓ and
     bold label on one line, the description beneath it. */
  .benefit-list li {
    display: block;
    position: relative;
    padding-left: 44px;
  }
  .benefit-list li::before {
    position: absolute;
    left: 24px;
    top: 22px;
  }
  .benefit-list li strong {
    display: block;
    margin-bottom: 4px;
  }

  /* Menu: the landscape photo is far too zoomed as a full-bleed cover on a
     phone. Show it as a centered band (mild crop, more of the photo visible)
     floating in the middle of the screen, its top and bottom edges faded into
     the dark ground so it never reads as a hard-edged crop. */
  .nav-overlay-bg img {
    height: 44%;
    top: 28%;
    bottom: auto;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  }

  /* Subpage banners: darken the lower half hard so the heading reads on a
     clean base instead of sitting on a busy part of the photo (e.g. the
     handshake on the Współpraca banner). */
  .page-hero .hero-overlay {
    background: linear-gradient(180deg, rgba(6, 7, 5, 0.18) 0%, rgba(6, 7, 5, 0.42) 38%, rgba(6, 7, 5, 0.8) 72%, rgba(6, 7, 5, 0.93) 100%);
  }

  /* Content photos: the fixed tall height turns into a portrait box on a
     phone, so a landscape image gets zoomed and cropped hard. Show the whole
     image at its natural proportions instead. */
  .content-figure img { height: auto; }

  /* Testimonials backdrop: centred, the narrow phone crop shows only the
     corridor. Bias the crop so the branded laundry cart sits at the right
     edge of the screen (the cart is ~75% across the source photo). */
  .testimonials { background-position: 68% center; }

  /* Footer watermark on phones: the default bottom-anchored placement lands on
     the copyright text. Re-anchor it just ABOVE the divider line (the top edge
     of .footer-bottom) so it sits over empty space regardless of how the
     copyright wraps. */
  .footer-watermark { display: none; }
  .footer-bottom::before {
    content: 'PRALNIA EXPRESS';
    position: absolute;
    right: 24px;
    bottom: calc(100% + 12px);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(26px, 7vw, 42px);
    line-height: 1;
    color: #ffffff;
    opacity: 0.07;
    letter-spacing: 0.02em;
    white-space: nowrap;
    pointer-events: none;
  }

  /* Współpraca banner: its 16:9 photo has no vertical overflow in the tall
     phone box, so the handshake sits low, right behind the heading, with dead
     space above. Nudge it up into that space and let the title sit below it. */
  .page-hero img[src*="wspolpraca"] {
    transform: scale(1.25) translateY(-15%);
  }
}