/* ============================================================
   MOTYW — Zakład Fryzjerstwa Męskiego
   ============================================================
   Paleta marki: czerń (#000) + ciemna zieleń (#253024).

   Plik ładowany PO global.css i page.css, więc nadpisuje paletę
   oryginału, nie ruszając samych arkuszy — dzięki temu css/global.css
   i css/page.css nadal są wierną kopią źródła i łatwo je porównać
   z _Szablon/.

   Mapowanie powierzchni (oryginał -> tutaj):
     biel  #fff    -> #253024   hero, sekcja "about", tło strony
     grafit #0E0E0E -> #000     sekcja projektów, stopka/kontakt

   Tekst i akcenty muszą być czytelne na obu tłach, więc pochodzą
   z rozjaśnień zieleni marki (kontrast wzgl. #253024 = 6,3:1,
   wzgl. czerni = 9,4:1 — powyżej progu WCAG AA).

   Nagłówki = Big Shoulders Inline (własna rodzina, nie alias EaseDouble —
   global.css trzyma Outfit na wadze 900 i wygrywał z zakresem).
   Treść do czytania = Big Shoulders (opsz tekstowy, ta sama rodzina co Inline).
   WindSong — marka w menu i napisy odręczne (dawniej Allison / Great Rebellion).
   ============================================================ */

@font-face {
  font-family: "Big Shoulders Inline";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/BigShouldersInline/BigShouldersInline-Variable.woff2") format("woff2");
}
@font-face {
  font-family: EaseDouble;
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/BigShouldersInline/BigShouldersInline-Variable.woff2") format("woff2");
}
@font-face {
  font-family: EaseDouble;
  font-style: normal;
  font-stretch: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/BigShouldersInline/BigShouldersInline-Variable.woff2") format("woff2");
}
@font-face {
  font-family: EaseDouble;
  font-style: normal;
  font-stretch: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/BigShouldersInline/BigShouldersInline-Variable.woff2") format("woff2");
}
@font-face {
  font-family: EaseDouble;
  font-style: normal;
  font-stretch: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/BigShouldersInline/BigShouldersInline-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/BigShouldersText/BigShouldersText-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Arial Narrow";
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/BigShouldersText/BigShouldersText-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Arial Narrow";
  font-style: normal;
  font-stretch: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/BigShouldersText/BigShouldersText-Variable.woff2") format("woff2");
}

/* WindSong — pismo odręczne jak w logo; aliasy na stare nazwy z szablonu */
@font-face {
  font-family: WindSong;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/WindSong/WindSong-Regular.woff2") format("woff2");
}
@font-face {
  font-family: Allison;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/WindSong/WindSong-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Great Rebellion";
  font-style: normal;
  font-stretch: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/WindSong/WindSong-Regular.woff2") format("woff2");
}

:root {
  /* --- kolory marki --- */
  --brand-black: #000;
  --brand-green: #253024;

  /* --- pochodne: jaśniejsze odcienie zieleni marki --- */
  --brand-green-100: #edf1ea;  /* tekst podstawowy */
  --brand-green-200: #c9d6c3;  /* tekst drugorzędny */
  --brand-green-300: #9db596;  /* akcent — pismo odręczne, podkreślenia */
  --brand-green-500: #6e8168;  /* tekst wygaszony */
  --brand-green-700: #35452f;  /* obramowania, subtelne wypełnienia */

  /* --- powierzchnie --- */
  --main-background-color: var(--brand-green);
  --background-primary: var(--brand-black);
  --background-primary-inverse: var(--brand-green);

  /* --- tekst --- */
  --main-text-color: var(--brand-green-100);
  --text-primary: var(--brand-green-100);
  --text-primary-12: rgba(237, 241, 234, 0.12);
  --text-primary-24: rgba(237, 241, 234, 0.24);
  --text-primary-32: rgba(237, 241, 234, 0.32);
  --text-primary-inverse: var(--brand-green-100);
  --text-secondary-inverse: var(--brand-green-100);
  --text-tertiary-inverse: rgba(237, 241, 234, 0.24);
  --text-gray: var(--brand-green-500);

  /* --- akcenty (pismo odręczne, dawniej neony) --- */
  --text-accent-green: var(--brand-green-300);
  --text-accent-blue: var(--brand-green-300);
  --text-red-netfix: var(--brand-green-300);

  /* --- reszta --- */
  --border-primary: rgba(237, 241, 234, 0.12);
  --c-white: var(--brand-green-100);
  --c-graphite: var(--brand-black);
  --c-light-graphite: var(--brand-green-700);
  --font-family: "Big Shoulders", sans-serif;
  --font-body: "Big Shoulders", sans-serif;
  --second-family: "Big Shoulders Inline", sans-serif;
}

/* tło strony — oryginał ustawia je z JS per podstrona (mapa eZ) */
body {
  background-color: var(--brand-green);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 450;
}

/* etykiety z szablonu były kapitalikami Arial Narrow — w skrypcie bez uppercase */
.contact-section_contactItemTitle__13wo5 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* nagłówki — jawna rodzina, opsz display, żeby widać podwójną kreskę */
.section__title,
.page__title,
.pricing__catName,
.team__name,
.reviews__value,
.cta__text,
.about-section_title__vZ6sb,
.contact-section_title__BU1nF,
.styled-button_variant-project__d69KU,
.styled-button_variant-about__Qo12W,
.styled-button_variant-projects-page__Ip_FH,
.projects-section_projectButton__ET6Jm {
  font-family: "Big Shoulders Inline", sans-serif;
  font-optical-sizing: none;
  font-variation-settings: "wght" 900, "opsz" 72;
  letter-spacing: 0.08em;
  line-height: 1.12;
}

/* hero: duże logo po lewej, akapit po prawej */
.hero-section_greating__1OyC1 {
  grid-column: 1 / 7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: calc(40 / var(--vw-screen) * 100 * 1vw);
  transform: none;
  font-size: unset;
  font-weight: unset;
  letter-spacing: unset;
}
.hero-section_mark {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.hero-section_mark__img {
  display: block;
  width: min(72vw, 92svh);
  max-height: 72svh;
  height: auto;
  object-fit: contain;
  opacity: 0;
  filter: blur(0.3em);
}
.hero-section_gifWrapper__1Fy_P,
.hero-section_headGif__mEIXP {
  display: none;
}
@media screen and (max-width: 1279px) {
  .hero-section_greating__1OyC1 {
    margin-left: 0;
    margin-top: calc(88 / var(--vw-screen) * 100 * 1vw);
    width: 100%;
    align-items: flex-start;
  }
  .hero-section_mark__img {
    width: min(78vw, 42svh);
    max-height: 42svh;
  }
}
@media screen and (max-width: 768px) {
  .hero-section_mark__img {
    width: min(76vw, 24svh);
    max-height: 24svh;
  }
  .hero-section_about__OlYeE {
    width: min(92vw, 100%);
    max-width: 92vw;
    margin-bottom: min(calc(130 / var(--v-min-h) * 100 * 1svh), calc(130 / var(--vw-screen) * 100 * 1vw));
  }
  .hero-section_text__GA552 {
    color: var(--text-primary);
  }
  .hero-section_scrollDown__MUcli {
    bottom: max(20px, env(safe-area-inset-bottom, 0px));
    gap: 8px;
    padding: 14px 20px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: hero-scroll-pulse 2.4s ease-in-out infinite;
  }
  .hero-section_scrollDownText__ncHry {
    font-size: clamp(18px, 4.8vw, 22px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1;
    color: var(--text-primary);
  }
  .hero-section_scrollDownIcon__Uo2WA,
  .hero-section_icon__agoNi {
    width: 22px;
    height: 22px;
  }
  .hero-section_scrollDownIcon__Uo2WA svg g {
    opacity: 1;
  }
}
@media screen and (max-width: 480px) {
  .hero-section_mark__img {
    width: min(80vw, 21svh);
    max-height: 21svh;
  }
  .hero-section_about__OlYeE {
    margin-bottom: min(calc(88 / var(--v-min-h) * 100 * 1svh), calc(88 / var(--vw-screen) * 100 * 1vw));
  }
}
@keyframes hero-scroll-pulse {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(6px); opacity: 0.72; }
}

/* lista usług: desktop centruje w oknie; mobile zostawia sticky z page.css
   (wrapper + lista przyklejone przez środek ekranu jak w szablonie) */
.projects-section_root__aoLKL {
  align-items: stretch;
}
.projects-section_projectsList__ORU43,
.projects-section_projectsList__ORU43 li,
.projects-section_projectButton__ET6Jm {
  overflow: visible;
}
@media screen and (min-width: 769px) {
  .projects-section_projectsListWrapper__023fW {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .projects-section_projectsList__ORU43 {
    transform: none;
    width: 100%;
    padding: 8svh calc(16 / var(--vw-screen) * 100 * 1vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .projects-section_projectButton__ET6Jm.styled-button_variant-project__d69KU {
    font-size: clamp(1.6rem, 10svh, 4.8rem);
    line-height: 1.12;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }
}
@media screen and (max-width: 768px) {
  .projects-section_root__aoLKL {
    overflow: visible;
  }
  .projects-section_projectButton__ET6Jm.styled-button_variant-project__d69KU {
    font-size: calc(56 / var(--vw-screen) * 100 * 1vw);
    line-height: 1.12;
    letter-spacing: 0.08em;
    white-space: nowrap;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
  }
  .projects-section_projectButton__ET6Jm:not(.projects-section_activeBtn__fTE3m) {
    opacity: 0.45;
  }
  .projects-section_projectButton__ET6Jm.projects-section_activeBtn__fTE3m {
    opacity: 1;
    color: var(--text-primary);
  }
}
@media screen and (max-width: 480px) {
  .projects-section_projectButton__ET6Jm.styled-button_variant-project__d69KU {
    font-size: calc(34 / var(--vw-screen) * 100 * 1vw);
  }
}

/* treść z szablonu (opisy, hero, kontakt) — ten sam skrypt, bez faux-bold */
.hero-section_text__GA552 strong,
.about-section_description__S5CUq,
.contact-section_contactItemValue__eQtfA {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 450;
  letter-spacing: 0.02em;
}

.home-page_root__Btl_R {
  --placeholder-color: var(--brand-green-700);
}

/* preloader: z bieli na czerń marki */
.preloader_root__KN4wH {
  background-color: var(--brand-black);
}

::selection {
  background-color: var(--brand-green-300);
  color: var(--brand-black);
}

/* ikona myszki w hero — w oryginale miała zakodowany na sztywno #0E0E0E */
.hero-section_icon__agoNi path {
  stroke: var(--brand-green-100);
}

/* krótsze „okno" usług — mniej martwego scrolla zanim wejdzie sekcja o nas */
.home-page_projectsWindow__efvqh {
  height: 360svh;
}
@media screen and (max-width: 768px) {
  .home-page_projectsWindow__efvqh {
    height: 400svh;
  }
}