/* Kęs za kęsem, style specyficzne dla poszczególnych sekcji. */

/* ===== S3 hero ===== */
.kes-hero {
  position: relative;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: 0;
  overflow: hidden;
}

.kes-hero__grid {
  position: relative;
  display: grid;
  gap: var(--kes-space-8);
  align-items: stretch;
}

@media (min-width: 960px) {
  .kes-hero__grid {
    grid-template-columns: 1.08fr 1fr;
    gap: clamp(48px, 5vw, 80px);
    align-items: center;
  }
}

/* na mobile tekst zawsze przed zdjęciem, zgodnie z briefem */
.kes-hero__tekst {
  order: 1;
  padding-bottom: var(--kes-space-8);
}

@media (min-width: 960px) {
  .kes-hero__tekst {
    padding-block: clamp(48px, 6vw, 104px);
  }
}

.kes-hero__zdanie {
  font-family: var(--kes-font-script);
  font-weight: 700;
  font-size: clamp(2.9rem, 4.4vw, 3.9rem);
  color: var(--kes-malina);
  margin-top: var(--kes-space-2);
  line-height: 0.85;
}

/* jedna linia dopiero gdy jest na nią miejsce */
@media (min-width: 460px) {
  .kes-hero__zdanie {
    white-space: nowrap;
    line-height: 0.8;
  }
}

.kes-hero__lead {
  margin-top: var(--kes-space-6);
  color: var(--kes-atrament);
  font-size: 1.06rem;
  line-height: 1.75;
  max-width: 50ch;
}

.kes-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kes-space-4);
  margin-top: var(--kes-space-7);
}

/* fakty jako pionowa lista z punktorem kęsa, poziomy rząd nie mieści się w kolumnie i łamał się rwanie */
.kes-hero__fakty {
  margin-top: var(--kes-space-7);
  padding-top: var(--kes-space-5);
  border-top: 1px solid var(--kes-kreska);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kes-space-3);
}

.kes-hero__fakty li {
  display: grid;
  grid-template-columns: 11px 1fr;
  align-items: center;
  justify-items: start;
  gap: var(--kes-space-3);
}

.kes-hero__fakty li::before,
.kes-hero__fakty li + li::before {
  content: "";
  width: 11px;
  height: 11px;
  background-color: var(--kes-szalwia);
  mask: var(--kes-mask-kes) center / contain no-repeat;
  -webkit-mask: var(--kes-mask-kes) center / contain no-repeat;
}

/* ciemny panel z portretem, wychodzi poza prawą krawędź kontenera */
.kes-hero__panel {
  order: 2;
  position: relative;
  background: var(--kes-las);
  border-radius: var(--kes-radius-duzy);
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--kes-cien-las);
  overflow: hidden;
}

@media (min-width: 960px) {
  .kes-hero__panel {
    align-self: stretch;
    min-height: 560px;
    /* panel wychodzi poza prawą krawędź, więc treść wyrównujemy do lewej,
       inaczej portret centruje się względem wylewki i ucieka poza kadr */
    justify-content: flex-start;
    margin-right: calc(50% - 50vw);
    border-radius: var(--kes-radius-duzy) 0 0 var(--kes-radius-duzy);
    padding-inline: clamp(40px, 4.5vw, 68px);
  }
}

/* wodny znak kęsa na ciemnym panelu */
.kes-hero__watermark {
  position: absolute;
  bottom: -14%;
  right: -12%;
  width: 460px;
  max-width: 90%;
  color: var(--kes-pistacja);
  opacity: 0.07;
  pointer-events: none;
}

.kes-hero__zdjecie {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
}

.kes-hero__zdjecie.kes-photo {
  background: rgba(253, 247, 245, 0.06);
  border-color: rgba(253, 247, 245, 0.28);
  border-width: 1px;
  border-style: dashed;
}

.kes-hero__zdjecie .kes-photo__mark {
  color: var(--kes-pistacja);
  opacity: 0.55;
}

.kes-hero__zdjecie .kes-photo__num {
  color: var(--kes-pistacja);
}

.kes-hero__zdjecie .kes-photo__label {
  color: var(--kes-na-lesie-cichy);
}

/* ===== S4 pasek specjalizacji ===== */
.kes-pasek-spec {
  background: var(--kes-blush);
  padding-block: var(--kes-space-7);
  border-block: 1px solid var(--kes-blush-glebszy);
}

.kes-pasek-spec__lista {
  display: flex;
  align-items: center;
  gap: var(--kes-space-5);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.kes-pasek-spec__lista::-webkit-scrollbar {
  display: none;
}

@media (min-width: 900px) {
  .kes-pasek-spec__lista {
    justify-content: center;
    overflow-x: visible;
    gap: var(--kes-space-6);
  }
}

.kes-pasek-spec__item {
  display: inline-flex;
  align-items: center;
  gap: var(--kes-space-6);
  scroll-snap-align: start;
  flex-shrink: 0;
  font-family: var(--kes-font-display);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  color: var(--kes-las);
  white-space: nowrap;
  letter-spacing: -0.015em;
}

/* kęs rozdziela hasła, nie wisi przed pierwszym */
.kes-pasek-spec__item::before {
  content: "";
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background-color: var(--kes-szalwia);
  mask: var(--kes-mask-kes) center / contain no-repeat;
  -webkit-mask: var(--kes-mask-kes) center / contain no-repeat;
}

.kes-pasek-spec__item:first-child::before {
  display: none;
}

.kes-pasek-spec__note {
  margin-top: var(--kes-space-5);
  font-size: 0.88rem;
  color: var(--kes-atrament-60);
  max-width: none;
}

@media (min-width: 900px) {
  .kes-pasek-spec__note {
    text-align: center;
  }
}

/* ===== S5 o mnie ===== */
.kes-o-mnie__grid {
  display: grid;
  gap: var(--kes-space-8);
}

@media (min-width: 900px) {
  .kes-o-mnie__grid {
    grid-template-columns: 1.3fr 1fr;
    gap: clamp(48px, 6vw, 84px);
    align-items: start;
  }
}

.kes-o-mnie__tekst {
  display: flex;
  flex-direction: column;
  gap: var(--kes-space-4);
}

.kes-o-mnie__tekst .kes-eyebrow {
  margin-bottom: 0;
}

.kes-o-mnie__tekst h2 {
  margin-bottom: var(--kes-space-2);
}

.kes-o-mnie__tekst p {
  font-size: 1.04rem;
  line-height: 1.78;
}

.kes-o-mnie__podpis {
  font-family: var(--kes-font-script);
  font-weight: 700;
  font-size: 6.5rem;
  color: var(--kes-malina);
  margin-top: var(--kes-space-4);
  line-height: 0.62;
}

.kes-o-mnie__aside {
  display: flex;
  flex-direction: column;
  gap: var(--kes-space-5);
}

.kes-fakty-hairline {
  display: flex;
  flex-direction: column;
  background: var(--kes-biel);
  border: 1px solid var(--kes-kreska);
  border-radius: var(--kes-radius-karta);
  padding: var(--kes-space-2) var(--kes-space-5);
  box-shadow: var(--kes-cien-1);
}

.kes-fakty-hairline__item {
  padding-block: var(--kes-space-4);
}

.kes-fakty-hairline__item + .kes-fakty-hairline__item {
  border-top: 1px solid var(--kes-kreska);
}

.kes-fakty-hairline__etykieta {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--kes-szalwia-tekst);
  margin-bottom: var(--kes-space-1);
  font-weight: 600;
}

.kes-fakty-hairline__wartosc {
  color: var(--kes-atrament);
  font-weight: 500;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ===== S6 specjalizacje ===== */
.kes-spec-modul {
  display: grid;
  gap: var(--kes-space-5);
}

@media (min-width: 860px) {
  .kes-spec-modul {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kes-space-6);
  }
}

.kes-spec-modul__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--kes-space-5);
  align-items: start;
  background: var(--kes-biel);
  border: 1px solid var(--kes-kreska);
  border-radius: var(--kes-radius-duzy);
  padding: clamp(28px, 3.4vw, 40px);
  box-shadow: var(--kes-cien-1);
  transition: box-shadow var(--kes-trwanie-krotkie) var(--kes-ease),
    transform var(--kes-trwanie-krotkie) var(--kes-ease);
}

.kes-spec-modul__item:hover {
  box-shadow: var(--kes-cien-3);
  transform: translateY(-4px);
}

.kes-spec-modul__numer {
  font-family: var(--kes-font-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--kes-blush-glebszy);
  letter-spacing: -0.03em;
}

.kes-spec-modul__tresc h3 {
  margin-bottom: var(--kes-space-3);
}

.kes-spec-modul__tresc p {
  color: var(--kes-atrament);
  line-height: 1.72;
  font-size: 0.99rem;
}

/* ===== S7 oferta ===== */
.kes-oferta__lista {
  display: flex;
  flex-direction: column;
}

.kes-oferta__item {
  display: grid;
  gap: var(--kes-space-3);
  padding-block: var(--kes-space-6);
  border-top: 1px solid var(--kes-kreska);
}

.kes-oferta__item:last-child {
  border-bottom: 1px solid var(--kes-kreska);
}

@media (min-width: 760px) {
  .kes-oferta__item {
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: baseline;
  }
}

.kes-oferta__tytul {
  display: grid;
  grid-template-columns: 13px 1fr;
  align-items: start;
  gap: var(--kes-space-3);
  font-family: var(--kes-font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.28rem);
  color: var(--kes-las);
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.kes-oferta__tytul-mark {
  width: 13px;
  height: 13px;
  color: var(--kes-szalwia-tekst);
  margin-top: 0.36em;
}

.kes-oferta__opis {
  color: var(--kes-atrament);
  max-width: 58ch;
  line-height: 1.72;
}

/* ===== S8 współpraca, ciemna sekcja, moment sygnaturowy ===== */
.kes-wspolpraca {
  position: relative;
  overflow: hidden;
}

.kes-wspolpraca::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(211, 224, 202, 0.1) 0%, rgba(211, 224, 202, 0) 68%);
  pointer-events: none;
}

.kes-wspolpraca__os {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
}

@media (min-width: 900px) {
  .kes-wspolpraca__os {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--kes-space-5);
  }
}

.kes-krok {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--kes-space-5);
  padding-bottom: var(--kes-space-7);
  position: relative;
}

@media (min-width: 900px) {
  .kes-krok {
    grid-template-columns: 1fr;
    gap: var(--kes-space-4);
    padding-bottom: 0;
  }
}

/* pionowa oś tylko w układzie mobilnym */
.kes-krok:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 62px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(to bottom, var(--kes-kreska-jasna), rgba(253, 247, 245, 0));
  border-radius: 2px;
}

@media (min-width: 900px) {
  .kes-krok:not(:last-child)::before {
    left: 56px;
    right: 0;
    top: 27px;
    bottom: auto;
    width: auto;
    height: 2px;
    background: linear-gradient(to right, var(--kes-kreska-jasna), rgba(253, 247, 245, 0));
  }
}

.kes-krok__znacznik {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(253, 247, 245, 0.07);
  border: 1px solid var(--kes-kreska-jasna);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kes-malina);
  flex-shrink: 0;
  z-index: 1;
}

.kes-krok__znacznik-svg {
  width: 26px;
  height: 26px;
}

/* wcięcie jako prawdziwy wykrój przez maskę SVG.
   Stan domyślny to wcięcie widoczne. Animacja tylko je odgrywa, nigdy nie warunkuje,
   inaczej przy braku lub opóźnieniu JS znaczniki zostają pełnymi kołami. */
.kes-krok__znacznik-mask {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1);
}

.js .kes-krok__znacznik-mask--animuj {
  animation: kes-wygryz var(--kes-trwanie-srednie) var(--kes-ease) both;
}

@keyframes kes-wygryz {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .kes-krok__znacznik-mask--animuj {
    animation: none;
  }
}

.kes-krok__tresc {
  padding-top: var(--kes-space-1);
}

.kes-krok__numer {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.19em;
  color: var(--kes-pistacja);
  font-weight: 600;
  display: block;
  margin-bottom: var(--kes-space-2);
}

.kes-krok__tytul {
  margin-bottom: var(--kes-space-2);
  font-size: 1.16rem;
}

.kes-krok__tresc p {
  color: var(--kes-na-lesie);
  line-height: 1.68;
  font-size: 0.94rem;
  max-width: 42ch;
}

.kes-wspolpraca__ramka {
  position: relative;
  z-index: 1;
  margin-top: clamp(48px, 6vw, 76px);
  background: rgba(253, 247, 245, 0.07);
  border: 1px solid var(--kes-kreska-jasna);
  border-radius: var(--kes-radius-duzy);
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-wrap: wrap;
  gap: var(--kes-space-5);
  align-items: center;
  justify-content: space-between;
}

.kes-wspolpraca__ramka p {
  color: var(--kes-mgla);
  max-width: 52ch;
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.65;
}

/* ===== S9 cennik ===== */
.kes-cennik {
  position: relative;
  overflow: hidden;
}

.kes-cennik::before {
  content: "";
  position: absolute;
  bottom: -18%;
  right: -8%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(211, 224, 202, 0.34) 0%, rgba(239, 213, 211, 0.2) 46%, rgba(211, 224, 202, 0) 72%);
  pointer-events: none;
  z-index: 0;
}

.kes-cennik__pakiety {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--kes-space-5);
  align-items: stretch;
}

@media (min-width: 900px) {
  .kes-cennik__pakiety {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kes-space-6);
  }
}

.kes-pakiet {
  display: flex;
  flex-direction: column;
  gap: var(--kes-space-5);
  background: var(--kes-biel);
  border: 1px solid var(--kes-kreska);
  border-radius: var(--kes-radius-duzy);
  padding: clamp(28px, 3.4vw, 40px);
  box-shadow: var(--kes-cien-2);
  transition: box-shadow var(--kes-trwanie-krotkie) var(--kes-ease),
    transform var(--kes-trwanie-krotkie) var(--kes-ease);
}

.kes-pakiet:hover {
  box-shadow: var(--kes-cien-3);
  transform: translateY(-4px);
}

.kes-pakiet--wyroznione {
  background: var(--kes-las);
  border-color: var(--kes-las);
  box-shadow: var(--kes-cien-las);
}

.kes-pakiet--wyroznione h3,
.kes-pakiet--wyroznione .kes-pakiet__cena {
  color: var(--kes-mgla);
}

.kes-pakiet--wyroznione .kes-lista-kes li {
  color: var(--kes-na-lesie);
}

.kes-pakiet--wyroznione .kes-lista-kes__mark {
  color: var(--kes-pistacja);
}

.kes-pakiet--wyroznione .kes-pakiet__lista {
  border-top-color: var(--kes-kreska-jasna);
}

.kes-pakiet--wyroznione .kes-pakiet__cena-okres {
  color: var(--kes-na-lesie-cichy);
}

.kes-pakiet__badge {
  align-self: flex-start;
  background: var(--kes-malina);
  color: var(--kes-biel);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--kes-space-2) var(--kes-space-4);
  border-radius: var(--kes-radius-pelny);
}

.kes-pakiet__naglowek h3 {
  margin-bottom: var(--kes-space-3);
}

.kes-pakiet__cena {
  font-family: var(--kes-font-display);
  font-size: clamp(2.1rem, 3vw, 2.6rem);
  color: var(--kes-bronz);
  line-height: 1;
  letter-spacing: -0.025em;
}

.kes-pakiet__cena-okres {
  font-family: var(--kes-font-body);
  font-size: 0.9rem;
  color: var(--kes-atrament-60);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: var(--kes-space-2);
}

.kes-pakiet__lista {
  flex-grow: 1;
  padding-top: var(--kes-space-4);
  border-top: 1px solid var(--kes-kreska);
}

.kes-cennik__tabela {
  position: relative;
  z-index: 1;
  margin-top: var(--kes-space-8);
  max-width: 680px;
  background: var(--kes-biel);
  border: 1px solid var(--kes-kreska);
  border-radius: var(--kes-radius-karta);
  padding: var(--kes-space-2) var(--kes-space-6);
  box-shadow: var(--kes-cien-1);
}

.kes-cennik__tabela-wiersz {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--kes-space-5);
  padding-block: var(--kes-space-4);
}

.kes-cennik__tabela-wiersz + .kes-cennik__tabela-wiersz {
  border-top: 1px solid var(--kes-kreska);
}

.kes-cennik__tabela-cena {
  font-family: var(--kes-font-display);
  color: var(--kes-las);
  white-space: nowrap;
  font-size: 1.02rem;
}

/* ===== S10 certyfikaty ===== */
.kes-certyfikaty__siatka {
  display: grid;
  gap: var(--kes-space-6);
  grid-auto-flow: column;
  grid-auto-columns: 74%;
  overflow-x: auto;
  padding-bottom: var(--kes-space-3);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.kes-certyfikaty__siatka::-webkit-scrollbar {
  display: none;
}

.kes-certyfikaty__siatka > * {
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .kes-certyfikaty__siatka {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    overflow-x: visible;
  }
}

@media (min-width: 980px) {
  .kes-certyfikaty__siatka {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kes-certyfikat {
  text-align: center;
}

.kes-certyfikat__podpis {
  margin: var(--kes-space-4) auto 0;
  font-size: 0.88rem;
  color: var(--kes-atrament-60);
  line-height: 1.55;
  max-width: 30ch;
}

/* ===== S11 opinie ===== */
.kes-opinie__lista {
  display: grid;
  gap: var(--kes-space-5);
}

@media (min-width: 800px) {
  .kes-opinie__lista {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--kes-space-6);
    align-items: start;
  }
}

.kes-opinia {
  display: flex;
  flex-direction: column;
  background: var(--kes-biel);
  border: 1px solid var(--kes-kreska);
  border-radius: var(--kes-radius-duzy);
  padding: clamp(28px, 3.2vw, 36px);
  box-shadow: var(--kes-cien-2);
  transition: box-shadow var(--kes-trwanie-krotkie) var(--kes-ease),
    transform var(--kes-trwanie-krotkie) var(--kes-ease);
}

.kes-opinia:hover {
  box-shadow: var(--kes-cien-3);
  transform: translateY(-4px);
}

.kes-opinia__mark {
  font-family: var(--kes-font-display);
  font-size: 3rem;
  color: var(--kes-blush-glebszy);
  line-height: 0.6;
  display: block;
  margin-bottom: var(--kes-space-4);
}

.kes-opinia__cytat {
  font-family: var(--kes-font-display);
  font-size: 1.14rem;
  color: var(--kes-las);
  line-height: 1.5;
  letter-spacing: -0.015em;
  flex-grow: 1;
}

.kes-opinia__autor {
  margin-top: var(--kes-space-5);
  padding-top: var(--kes-space-4);
  border-top: 1px solid var(--kes-kreska);
  font-size: 0.84rem;
  color: var(--kes-atrament-60);
}

/* ===== S13 kontakt ===== */
.kes-kontakt__grid {
  display: grid;
  gap: var(--kes-space-8);
}

@media (min-width: 940px) {
  .kes-kontakt__grid {
    grid-template-columns: 1fr 1.25fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: start;
  }
}

.kes-kontakt__sposoby {
  display: flex;
  flex-direction: column;
  background: var(--kes-biel);
  border: 1px solid var(--kes-kreska);
  border-radius: var(--kes-radius-karta);
  padding: var(--kes-space-2) var(--kes-space-6);
  box-shadow: var(--kes-cien-1);
}

.kes-sposob {
  display: flex;
  flex-direction: column;
  gap: var(--kes-space-1);
  padding-block: var(--kes-space-5);
}

.kes-sposob + .kes-sposob {
  border-top: 1px solid var(--kes-kreska);
}

.kes-sposob__etykieta {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--kes-szalwia-tekst);
  font-weight: 600;
}

.kes-sposob__wartosc {
  font-family: var(--kes-font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--kes-las);
  text-decoration: none;
  word-break: break-word;
  letter-spacing: -0.015em;
  transition: color var(--kes-trwanie-krotkie) var(--kes-ease);
}

.kes-sposob__wartosc:hover {
  color: var(--kes-malina);
}

.kes-kontakt__notka {
  margin-top: var(--kes-space-5);
  font-size: 0.88rem;
  color: var(--kes-atrament-60);
  line-height: 1.6;
}

.kes-kontakt__zdjecie {
  margin-top: var(--kes-space-6);
}