/* ==========================================================================
   FOTORYGO — Usługi (Services) page
   Standalone stylesheet. Reuses the brand palette and type from the home page.
   ========================================================================== */

@font-face {
  font-family: 'Gloock';
  src: url('Fonty/Gloock/Gloock-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Jost';
  src: url('Fonty/Jost/Jost-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --orange: #ff5b00;
  --orange-deep: #d94300;
  --orange-light: #ff7a2e;
  --black: #0a0a0a;
  --ink: #0d0d0d;
  --yellow: #dbd645;
  --violet: #8c00ff;
  --white: #ffffff;
  --grad-orange: linear-gradient(135deg, #F06F1C 12%, #ED3D10 50%, #CF2E05 92%);
  --maxw: 1240px;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--white);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.65;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.shell {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}

.serif {
  font-family: 'Gloock', serif;
  font-weight: 100;
}

/* Reusable button ------------------------------------------------------- */
.btn {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 16px 38px;
  border: 1px solid var(--white);
  color: var(--white);
  background: transparent;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.btn:hover { background: var(--white); color: var(--black); transform: translateY(-2px); }

.btn--solid { background: var(--orange); border-color: var(--orange); color: var(--white); }
.btn--solid:hover { background: var(--white); border-color: var(--white); color: var(--orange); }

.btn--ghost-dark { border-color: rgba(255,255,255,0.35); }

.btn--small { padding: 13px 30px; font-size: 11px; letter-spacing: 0.3em; }

.btn--white { background: var(--white); border-color: var(--white); color: var(--black); }
.btn--white:hover { background: transparent; color: var(--white); border-color: var(--white); }

/* Hero "Napisz do mnie" button -------------------------------------------- */
.hero-text .btn {
  align-self: flex-start;
  padding: 16px 25px;
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}
.hero-text .btn:hover {
  background: var(--black);
  border-color: var(--white);
  color: var(--white);
}

/* ==========================================================================
   HEADER / NAV
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--grad-orange);
  transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(0,0,0,0.25); }

/* wider header container so full-size elements fit */
.site-header .shell { max-width: 1600px; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 104px;
}

.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img {
  width: 325px;
  height: 85px;
  object-fit: contain;
  object-position: left center;
  filter: brightness(0);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}
.nav-menu a {
  font-family: 'Jost', sans-serif;
  font-size: 14.29px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.82);
  white-space: nowrap;
  position: relative;
  padding: 4px 0;
  transition: color 0.25s ease;
}
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--black);
  transition: width 0.3s ease;
}
.nav-menu a:hover,
.nav-menu a.is-active { color: var(--black); }
.nav-menu a:hover::after { width: 100%; }
.nav-cons-m { display: none; }   /* link Konsultacja: tylko w menu mobilnym (na desktopie jest przycisk CTA) */

.nav-right { display: flex; align-items: center; gap: 12px; }

/* Black sharp CTA button, as in the mockup */
.nav-cta {
  width: 349px;
  height: 60px;
  padding: 0;
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
  border-radius: 0;
  font-family: 'Jost', sans-serif;
  font-size: 14.29px;
  letter-spacing: 0.13em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.nav-cta:hover { background: #000; color: var(--white); transform: translateY(-1px); }

.nav-social { display: flex; align-items: center; gap: 8px; }
.nav-social a {
  width: 60px; height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
  color: var(--white);
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-social a:hover { transform: translateY(-1px); opacity: 0.85; }
.nav-social svg { width: 24px; height: 24px; }

.nav-toggle {
  display: none;
  width: 40px; height: 28px;
  background: transparent; border: 0; cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--black); transition: 0.3s ease;
}
.nav-toggle span:nth-child(1) { top: 4px; }
.nav-toggle span:nth-child(2) { top: 13px; }
.nav-toggle span:nth-child(3) { top: 22px; }
.nav-toggle.is-open span:nth-child(1) { top: 13px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 13px; transform: rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: stretch;
  min-height: 922px;
}
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 110px 56px 80px;
  padding-left: max(40px, calc((100vw - 1240px) / 2 + 40px));
}
.hero-title {
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  margin-bottom: 28px;
}
.hero-title span { display: block; white-space: nowrap; }
.hero-br-m { display: none; }   /* mobile-only line break in the title */
.biz-br-m { display: none; }    /* mobile-only line breaks in biz headings */
.hero-title em { font-style: normal; color: var(--orange); }
.hero-copy {
  max-width: 460px;
  color: rgba(255,255,255,0.74);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 20px;
  margin-bottom: 38px;
}
.hero-copy strong { color: var(--white); font-weight: 500; }

.hero-photo {
  position: relative;
}
.hero-photo img {
  width: 100%;
  height: 922px;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(1) contrast(1.05);
}

/* ==========================================================================
   STATS
   ========================================================================== */
.stats {
  position: relative;
  background: var(--ink);
  padding: 72px 0;
  overflow: hidden;
}
.stats .shell { max-width: 1600px; }
.stats::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 160% at 60% 50%, rgba(237,61,16,0.55) 0%, rgba(237,61,16,0) 68%);
  pointer-events: none;
}
.stats-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto repeat(4, 321px);
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}
.stats-label {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  line-height: 1.5;
}
.stat {
  background: var(--black);
  width: 321px;
  height: 221px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 16px;
  gap: 10px;
}
.stat-num {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 55px;
  color: var(--orange);
  line-height: 1;
  margin-bottom: 0;
}
.stat-desc {
  font-size: 16px;
  color: var(--white);
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.45;
}

/* ==========================================================================
   ORANGE QUOTE BAND
   ========================================================================== */
.band {
  background: var(--grad-orange);
  text-align: center;
  padding: 64px 0;
}
.band-small {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 14px;
}
.band-big {
  font-family: 'Gloock', serif;
  font-size: clamp(26px, 3.6vw, 48px);
  color: var(--white);
  line-height: 1.1;
}

/* ==========================================================================
   FOTOGRAFIA BIZNESOWA — feature collage
   ========================================================================== */
.biz {
  position: relative;
  min-height: 1080px;
  background: transparent;   /* dark backdrop now lives on .dark-zone so the glow shows through */
  overflow: hidden;
  display: flex;
  align-items: center;
}
.biz-ghost {
  position: absolute;
  top: 7%;
  left: 0;
  font-family: 'Gloock', serif;
  font-size: clamp(120px, 15vw, 270px);
  line-height: 1;
  white-space: nowrap;
  color: rgba(255,255,255,0.05);
  pointer-events: none;
  user-select: none;
  will-change: transform;
  animation: biz-ghost-scroll 250s linear infinite;
}
@keyframes biz-ghost-scroll {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.biz-glow {
  position: absolute;
  left: 7%;
  top: 60%;
  transform: translateY(-50%);
  width: 25%;
  height: 43%;
  background: radial-gradient(closest-side, rgba(237,61,16,0.78) 0%, rgba(237,61,16,0.28) 52%, rgba(237,61,16,0) 100%);
  pointer-events: none;
}
.biz-stage {
  position: relative;
  width: 100%;
  max-width: 1680px;
  height: 1080px;
  margin: 0 auto;
}
.biz-square {
  position: absolute;
  left: 27%; top: 24%;
  width: 327px; height: 450px;
  background: #DB3409;
  z-index: 1;
}
.biz-photo {
  position: absolute;
  object-fit: cover;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.biz-photo--main {
  left: 40%; top: 4%;
  width: 365px; height: 490px;
  object-position: center top;
  z-index: 3;
}
.biz-photo--alt {
  left: 9%; top: 38%;
  width: 365px; height: 490px;
  filter: grayscale(1) contrast(1.05);
  z-index: 2;
}
.biz-text {
  position: absolute;
  left: 49%; top: 49%;
  width: 40%;
  max-width: 560px;
  z-index: 4;
}
.biz-slash {
  display: block;
  width: 11px; height: 86px;
  background: #DB3409;
  transform: skewX(-14deg);
  margin-top: -8px;
  margin-bottom: 26px;
}
/* Violet accent variant (Kampanijna & Wizerunkowa copy) */
.biz--violet .biz-square,
.biz--violet .biz-slash { background: #8C00FF; }
.biz--violet { margin-bottom: 50px; }   /* +50px space below this section */
.biz--violet .biz-photo--alt,
.biz--color .biz-photo--alt { filter: none; }   /* keep the lower photo in colour */
.biz--color .biz-square,
.biz--color .biz-slash { background: #F06F1C; }   /* orange accent for Social Mediowa */
.biz-title {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 45px;
  margin-bottom: 22px;
}
.biz-title strong { font-family: 'Gloock', serif; font-weight: 400; }
.biz-copy {
  color: rgba(255,255,255,0.78);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.75;
  margin-bottom: 36px;
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.services {
  position: relative;
  padding: 30px 0 60px;
  overflow: hidden;
}
.ghost-word {
  position: absolute;
  left: 0; right: 0;
  font-family: 'Gloock', serif;
  font-size: clamp(120px, 17vw, 240px);
  line-height: 1;
  white-space: nowrap;
  color: rgba(255,255,255,0.035);
  pointer-events: none;
  user-select: none;
}
.ghost-word--1 { top: 60px; }
.ghost-word--2 { top: 44%; }
.ghost-word--3 { bottom: 60px; }

.service {
  position: relative;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: 70px;
  padding: 64px 0;
}
.service:nth-child(even) .service-media { order: 2; }
.service--media-left .service-media { order: 0; }

.service-media {
  position: relative;
  display: flex;
  justify-content: center;
}
.service-media img {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  position: relative;
  z-index: 2;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
.service-square {
  position: absolute;
  width: 190px; height: 190px;
  z-index: 1;
}
.service-media--orange .service-square { background: var(--orange);  top: -28px; left: 8%; }
.service-media--violet .service-square { background: var(--violet);  top: -28px; right: 8%; }
.service-media--yellow .service-square { background: var(--yellow);  bottom: -28px; left: 8%; }

/* Kampanijna — collage like the biz section ------------------------------- */
.service--collage { grid-template-columns: 560px 1.1fr; gap: 50px; align-items: start; padding-top: 0; }
/* align collage headings left edge with the biz-text (49% of the 1680px stage) */
.service--collage .service-body {
  padding-top: 520px;
  position: relative;
  transform: translateX(max(-46.8px, calc(-1vw - 30px)));
}
.service-slash {
  position: absolute;
  top: 475px;
  left: -30px;
  z-index: 5;
  width: 11px; height: 86px;
  background: var(--violet);
  transform: skewX(-14deg);
}
/* "Zobacz więcej" button: white by default, black with white outline on hover */
.service--collage .service-body .btn {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}
.service--collage .service-body .btn:hover {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
/* Dark zone (biz + services) hosts the cursor-following glow behind the content */
.dark-zone { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); }
.service-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  height: auto;
  z-index: -1;            /* behind photos and text, above the zone background */
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}
/* Social: mirrored — text on the LEFT, photo cluster on the RIGHT */
.service--soc { margin-top: 250px; grid-template-columns: 1.1fr 560px; }
.service--soc .service-body { transform: none; }
.service--soc .service-stage .service-square { left: auto; right: max(193.6px, calc(580px - 23vw)); }
.service--soc .service-stage .kam-photo--main { left: auto; right: max(412px, calc(580px - 10vw)); }
.service--soc .service-stage .kam-photo--alt  { left: auto; right: max(-108.8px, calc(580px - 41vw)); }
.service--soc .service-stage .service-square { background: #F06F1C; }
.service--soc .service-slash { background: #F06F1C; }
.service--soc .service-copy { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 20px; }
.service-stage { position: relative; height: 880px; display: block; }
.service-stage .service-square {
  width: 327px; height: 450px;
  /* colour comes from the .service-media--violet / --yellow modifier */
  /* left edge aligned 1:1 with the orange biz-square (left:27% of the 1680px stage) */
  top: 215px; left: max(193.6px, calc(580px - 23vw)); right: auto; bottom: auto;
  z-index: 1;
}
.service-stage .kam-photo {
  position: absolute;
  width: 365px; height: 490px;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
}
/* right edge aligned 1:1 with "Ala" (left:40% of the 1680px biz-stage) on every width */
.service-stage .kam-photo--main { left: max(412px, calc(580px - 10vw)); top: 0; z-index: 3; }
/* left edge aligned 1:1 with "Robert" (9% of the 1680px biz-stage) on every width */
.service-stage .kam-photo--alt  { left: max(-108.8px, calc(580px - 41vw)); top: 390px; z-index: 2; }
@media (min-width: 861px) and (max-width: 1240px) {
  .service-stage .kam-photo--main { left: calc(40vw - 40px); }
  .service-stage .kam-photo--alt  { left: calc(9vw - 40px); }
  .service-stage .service-square  { left: calc(27vw - 40px); }
  .service--soc .service-stage .kam-photo--main { left: auto; right: calc(40vw - 40px); }
  .service--soc .service-stage .kam-photo--alt  { left: auto; right: calc(9vw - 40px); }
  .service--soc .service-stage .service-square  { left: auto; right: calc(27vw - 40px); }
}

.service-kicker {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
}
.service-title {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  margin-bottom: 20px;
}
.service-title strong { font-family: 'Gloock', serif; font-weight: 400; color: var(--white); }
.service-title span { color: rgba(255,255,255,0.55); }
.service-copy {
  color: rgba(255,255,255,0.72);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 20px;
  max-width: 520px;
  margin-bottom: 30px;
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process { padding: 30px 0 0; }
.process-head { text-align: center; margin-bottom: 48px; }
.process-head h2 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 44px);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.process-step {
  position: relative;
  min-height: 1080px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 28px;
  overflow: hidden;
  isolation: isolate;
  text-align: right;
  transition: padding-bottom 0.45s ease;
}
.process-step:hover { padding-bottom: 240px; }
.process-step img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -3;
  transition: transform 0.6s ease;
}
/* light gradient — always on (default look) */
.process-step::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(207,46,5,0.35) 0%, rgba(237,61,16,0.78) 100%);
  z-index: -2;
}
/* full orange gradient — appears on hover, covers the photo */
.process-step::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #CF2E05 0%, #F06F1C 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}
.process-step:hover::before { opacity: 1; }
.process-step:hover img { transform: scale(1.06); }
.process-num { display: none; }
.process-step h3 {
  font-family: 'Gloock', serif;
  font-weight: 400;
  font-size: 42px;
  line-height: 1.15;
}
.process-step h3 span {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 42px;
  opacity: 0.85;
}
/* description revealed on hover */
.process-desc {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: 'Jost', sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
  transition: opacity 0.4s ease, max-height 0.5s ease, margin-top 0.4s ease;
}
.process-step:hover .process-desc {
  max-height: 320px;
  opacity: 1;
  margin-top: 18px;
}

/* ==========================================================================
   PARTNERS
   ========================================================================== */
.partners { padding: 96px 0; text-align: center; background: var(--white); }
.partners h2 {
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(24px, 3vw, 38px);
  margin-bottom: 48px;
  color: var(--black);
}
.partners-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 34px;
}
.partner {
  width: auto;
  object-fit: contain;
  filter: brightness(0);
  opacity: 1;
}
/* Optical sizing per logo (different artboards / whitespace) */
.partner--henhen    { height: 40px; }
.partner--healthy   { height: 62px; }
.partner--gustownie { height: 103px; }
.partner--fashion   { height: 103px; }
.partner--expert    { height: 107px; }
.partner--unfrozen  { height: 85px; }

/* ==========================================================================
   GALLERY
   ========================================================================== */
.gallery { padding: 20px 0 100px; text-align: center; background: var(--white); }
.gallery .btn { background: var(--black); color: var(--white); border-color: var(--black); }
.gallery .btn:hover { background: transparent; color: var(--black); border-color: var(--black); }
.gallery-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 130px;
}
.gallery-grid figure { overflow: hidden; position: relative; transition: transform 0.45s ease; }
.gallery-grid img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.gallery-grid figure:hover { z-index: 10; }
/* fixed sizes */
.gallery-grid figure:nth-child(1),
.gallery-grid figure:nth-child(3) { width: 553px; height: 666px; z-index: 2; }
.gallery-grid figure:nth-child(2) { width: 500px; height: 620px; z-index: 1; margin: 0 -60px; }
.gallery-grid figure:nth-child(4) { width: 450px; height: 560px; z-index: 3; }
/* staggered collage */
.gallery-grid figure:nth-child(1) { transform: translateY(12px); }
.gallery-grid figure:nth-child(2) { transform: translateY(58px) rotate(3deg); }
.gallery-grid figure:nth-child(3) { transform: translateY(40px); }
.gallery-grid figure:nth-child(4) { transform: translateY(88px); }
/* hover: pop forward + scale 20% */
.gallery-grid figure:nth-child(1):hover { transform: translateY(12px) scale(1.2); }
.gallery-grid figure:nth-child(2):hover { transform: translateY(58px) rotate(3deg) scale(1.2); }
.gallery-grid figure:nth-child(3):hover { transform: translateY(40px) scale(1.2); }
.gallery-grid figure:nth-child(4):hover { transform: translateY(88px) scale(1.2); }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.testimonials {
  position: relative;
  background: var(--grad-orange);
  height: 780px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
}
.testimonials h2 {
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 46px);
  margin-bottom: 44px;
}
.tslider {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}
.tslide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 92px; height: 54px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.75);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.tslide-arrow svg { width: 56px; height: auto; display: block; stroke-width: 1; }
.tslide-arrow svg line, .tslide-arrow svg polyline { vector-effect: non-scaling-stroke; }
#tPrev { left: 40px; }
#tNext { right: 40px; }
.tslide-arrow:hover { background: var(--white); color: var(--orange); border-color: var(--white); }
.tslide-track {
  flex: 1 1 auto;
  overflow: hidden;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tslide {
  text-align: center;
  display: none;
}
.tslide.is-active { display: block; animation: fade 0.5s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.tslide p {
  font-family: 'Jost', sans-serif;
  font-size: 20px;
  color: var(--white);
  font-weight: 300;
  margin-bottom: 26px;
}
.tslide-author { display: inline-flex; align-items: center; gap: 14px; color: var(--white); }
.tslide-author img { width: 72px; height: 72px; object-fit: cover; }
.tslide-author b { display: block; font-size: 16px; color: var(--white); }
.tslide-author span { font-size: 14px; color: var(--white); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-final {
  position: relative;
  padding: 132px 0 0;
  background: var(--white);
}
.cta-heading {
  position: relative;
  text-align: center;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: clamp(30px, 4vw, 56px);
  line-height: 1.05;
  margin-bottom: 32px;
  color: var(--black);
}
.cta-grid {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 70px;
}
.cta-text p {
  color: rgba(0,0,0,0.72);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 20px;
  max-width: 460px;
  margin-bottom: 34px;
}
.cta-text .btn { background: var(--black); border-color: var(--black); color: var(--white); }
.cta-text .btn:hover { background: transparent; border-color: var(--black); color: var(--black); }
.cta-media { position: relative; text-align: center; height: 600px; align-self: end; }
.cta-media video {
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.phone {
  width: 248px;
  aspect-ratio: 9 / 19;
  border-radius: 34px;
  border: 9px solid #1a1a1a;
  background: #000;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  position: relative;
}
.phone::before {
  content: "";
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 6px; border-radius: 6px;
  background: #2a2a2a;
  z-index: 2;
}
.phone img, .phone-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.phone-label {
  position: absolute;
  top: 30px; left: 22px;
  z-index: 2;
  font-size: 30px;
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--black);
  padding: 56px 0 30px;
  font-family: 'Jost', sans-serif;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  column-gap: 70px;
  align-items: start;
  margin-bottom: 40px;
}
.footer-logo { height: 46px; width: auto; filter: brightness(0) invert(1); }

.footer-col { list-style: none; }
.footer-menu li { margin-bottom: 12px; }
.footer-col a, .footer-col p {
  font-size: 17px;
  color: var(--white);
  font-weight: 300;
  letter-spacing: 0.01em;
  transition: color 0.25s ease;
}
.footer-col a:hover { color: var(--orange); }
.footer-data p { margin-bottom: 12px; }

.footer-contact h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-contact p { margin-bottom: 9px; }

.footer-social { display: flex; gap: 10px; margin-top: 22px; }
.footer-social a {
  width: 32px; height: 32px;
  border-radius: 0;
  background: rgba(255,255,255,0.88);
  color: #141414;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, transform 0.25s ease;
}
.footer-social a:hover { background: var(--white); transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 22px;
  font-size: 17px;
  color: var(--white);
  font-weight: 300;
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .stats-inner { grid-template-columns: repeat(2, 1fr); gap: 36px; justify-content: stretch; }
  .stats-label { grid-column: 1 / -1; max-width: none; white-space: normal; }
  .stat { width: auto; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
}

@media (max-width: 860px) {
  html, body { overflow-x: hidden; }           /* no sideways scrolling on mobile */
  .shell { padding: 0 22px; }
  .nav-menu, .nav-social { display: none; }
  .nav-toggle { display: block; }
  .nav-cons-m { display: block; }   /* Konsultacja widoczna w menu mobilnym */
  .nav-menu.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 104px; left: 0; right: 0;
    background: var(--white);
    padding: 26px 22px;
    gap: 18px;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 12px 30px rgba(0,0,0,0.10);
  }
  /* header must fit the screen on mobile (no horizontal overflow; fixed header
     isn't clipped by overflow-x:hidden, so it can't be wider than the screen) */
  .nav { gap: 12px; }
  .nav-logo img { width: auto; max-width: 56vw; height: 54px; }
  .nav-cta { display: none; }                  /* CTA off on mobile so the bar always fits */
  .hero { padding-top: 104px; }                /* clear the fixed header above the photo */
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-photo { order: -1; }                   /* photo first on mobile */
  .hero-text { align-self: auto; padding: 36px 22px 50px; }
  .hero-photo img { height: 62vh; min-height: 380px; }
  .partners-row { flex-wrap: wrap; gap: 32px 40px; }
  .service { grid-template-columns: 1fr; gap: 36px; }
  .service:nth-child(even) .service-media { order: 0; }
  .service-media img { max-width: 320px; }

  /* Kampanijna collage -> simple stack on mobile */
  .service--collage { grid-template-columns: 1fr; gap: 36px; }
  .service--collage .service-body { padding-top: 0; transform: none; }
  .service-blur { display: none; }
  .service--soc .service-body { transform: none; }
  .service-stage { height: auto; }
  .service-stage .service-square { display: none; }
  .service-stage .kam-photo--alt { display: none; }
  .service-stage .kam-photo--main {
    position: relative;
    left: auto; top: auto;
    width: 100%; max-width: 320px; height: auto;
    aspect-ratio: 365 / 490;
  }
  .service--soc .service-stage .kam-photo--main { right: auto; }

  /* Biznesowa collage -> simple stack on mobile */
  .biz { min-height: 0; padding: 80px 0; }
  /* -50% gap between Fotografia Biznesowa i Fotografia Kampanijna (160px → 80px) */
  .biz:not(.biz--violet):not(.biz--color) { padding-bottom: 40px; }
  /* gap between Fotografia Kampanijna i Social Mediowa = 80px (40 + 40) */
  .biz--violet { padding-top: 40px; padding-bottom: 40px; margin-bottom: 0; }
  .biz--color { padding-top: 40px; }
  .biz-ghost { font-size: 84px; top: 30px; }
  .biz-stage { height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding: 0 22px; }
  .biz-square { display: none; }
  .biz-photo--alt { display: none; }
  .biz-photo { position: relative; left: auto; top: auto; width: 100%; max-width: 320px; height: auto; aspect-ratio: 3 / 4; }
  .biz-text { position: relative; left: auto; top: auto; width: 100%; max-width: none; }
  /* gallery → swipe carousel: 1 photo visible, swipe left/right for the rest */
  .gallery-grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;   /* start at the first photo, not centred */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    margin-bottom: clamp(32px, 8vw, 56px);   /* odstęp nad przyciskiem = odstęp pod nim (przycisk wyśrodkowany) */
    scrollbar-width: none;
  }
  .gallery-grid::-webkit-scrollbar { display: none; }
  .gallery-grid figure {
    flex: 0 0 100%;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
    margin: 0 !important;
    transform: none !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
  }
  .gallery-grid figure img { width: 100%; height: 100%; object-fit: cover; }
  .cta-grid { grid-template-columns: 1fr; gap: 44px; }
  .cta-text { order: -1; }                      /* text + button above the image on mobile */
  .phone { margin: 0 auto; }

  /* ---- Mobile: all text centred + fits the margins ---- */
  .hero-title { font-size: clamp(39px, 5.5vw, 56px); }   /* +30% on mobile */
  .biz-title { font-size: clamp(39px, 5.5vw, 56px); line-height: 1.15; }   /* same size as hero; interlinia -30% */
  .process-head h2 { font-size: clamp(39px, 5.5vw, 56px); line-height: 1.15; }   /* same size + interlinia as biz-title */
  .partners h2,
  .testimonials h2,
  .cta-heading { font-size: clamp(39px, 5.5vw, 56px); line-height: 1.15; }   /* same size + interlinia as the other headings */
  .partners h2 { font-size: clamp(24px, 8.6vw, 56px); white-space: nowrap; }   /* "Współpracowałam z:" w jednej linii, nieco większe */
  /* logotypy optycznie wyrównane na mobile (różne kadrowanie/grubość kreski) */
  .partners-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 2 w rzędzie → 3 rzędy (6 logo) */
    align-items: center;
    justify-items: center;
    gap: 30px 24px;
  }
  .partner--henhen    { height: 28px; transform: translateY(-5px); }   /* 5px wyżej */
  .partner--healthy   { height: 40px; }
  .partner--unfrozen  { height: 32px; }
  .partner--gustownie { height: 60px; }   /* +30% */
  .partner--fashion   { height: 55px; }   /* +30% */
  .partner--expert    { height: 60px; }   /* +30% */
  /* odstęp logotypy ↔ zdjęcia galerii: -50% (było 96 + 20 = 116 → 48 + 10 = 58) */
  .partners { padding-bottom: 48px; }
  .gallery { padding-top: 10px; padding-bottom: clamp(32px, 8vw, 56px); border: 0; box-shadow: none; }
  /* żadnego paska/kreski w karuzeli galerii */
  .gallery-grid { scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; }
  .gallery-grid::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .hero-copy,
  .biz-copy,
  .process-desc,
  .tslide p,
  .cta-text p { font-size: 19px; line-height: 1.39; text-wrap: pretty; }   /* 19px; interlinia; ładniejsze łamanie */
  .tslide-arrow { display: none; }             /* opinie: bez strzałek na mobile — nawigacja swipem */
  /* opinie: sekcja zawsze tej samej wielkości niezależnie od długości opinii.
     Wszystkie slajdy w jednej komórce gridu → track = najwyższa opinia, nic nie "skacze" */
  .testimonials { height: auto; padding: clamp(48px, 11vw, 90px) 0; }
  .tslide-track { min-height: 0; display: grid; align-items: center; }
  .tslide { display: block; grid-column: 1; grid-row: 1; visibility: hidden; opacity: 0; }
  .tslide.is-active { visibility: visible; opacity: 1; }
  .tslide p { margin-bottom: clamp(30px, 5vw, 40px); }   /* min 30px odstępu do podpisu */
  .tslide p br { display: none; }   /* na mobile bez sztywnych łamań z desktopu - tekst płynie i ładnie się zawija (text-wrap: pretty) */
  .hero-title span { white-space: normal; display: inline; }   /* flow as one text; breaks forced by <br> */
  .hero-br-m { display: inline; }              /* "Podnoszę" / "standardy" / "Twojego wizerunku." */
  .biz-br-m { display: inline; }               /* Kampanijna → 3 linie; Social Mediowa → 2 linie */
  .hero-text, .biz-text, .service-body, .cta-text { overflow-wrap: break-word; }
  .hero-text { text-align: center; align-items: center; }
  .hero-text .btn { align-self: center; }
  .stats-inner, .stats-label { text-align: center; }
  .biz-stage { align-items: center; }
  .biz-text { text-align: center; }
  .biz-slash { display: none; }                /* hide all 3 slashes on mobile */
  .service { justify-items: center; }
  .service-body { text-align: center; }
  .service-copy { margin-left: auto; margin-right: auto; }
  .process-step { text-align: center; }
  .cta-text { text-align: center; }
  .footer-grid { text-align: center; }
  .footer-logo { margin-left: auto; margin-right: auto; }   /* centre the footer logo (it's display:block) */
  .footer-social { justify-content: center; }
  .footer-bottom { text-align: center; }
}

@media (max-width: 520px) {
  .nav-cta { display: none; }                  /* free up header space on small phones */
  .hero-text { padding: 30px 20px 44px; }
  .hero-title span { white-space: normal; }
  .stats-inner { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .stat { width: auto; height: auto; min-height: 160px; }
  .process-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .tslider { gap: 12px; }
  .tslide-arrow { width: 64px; height: 40px; }
}