/*
 * ALVEA — studio kosmetologii. Makieta motywu.
 *
 * Wygląd celowo nie przypomina typowego motywu WordPressa. Robią to trzy rzeczy, nie technologia:
 * prawdziwa skala typograficzna (a nie cztery rozmiary), siatka trzymana co do piksela i odstępy,
 * które wolno mieć duże. Cienie i gradienty nie występują tu wcale — głębię robi papierowa
 * paleta i fotografia.
 *
 * SPIS SEKCJI
 *  01  Zmienne
 *  02  Reset i warstwa bazowa
 *  03  Typografia i etykiety
 *  04  Siatka i pasy sekcji
 *  05  Przyciski i odnośniki
 *  06  Pasek ogłoszeń i nagłówek
 *  07  Menu na telefonie
 *  08  Hero
 *  09  Zabiegi — kafle z ikonami
 *  10  O nas i kartka rezerwacji
 *  11  Rytuał wizyty (pas szałwiowy)
 *  12  Efekty i opinie
 *  13  Siatka kafli ze zdjęciami
 *  14  Dziennik
 *  15  Stopka
 *  16  Podstrony: nagłówek, cennik, zespół, kontakt, formularz
 *  17  Pojawianie się treści
 *  18  Telefon i dostępność
 */

/* ——— 01 · Zmienne ———————————————————————————————————————————————— */

:root {
	--kremowy: #FBF8F5;
	--piaskowy: #F2E9E2;
	--rozowy-tlo: #F4E3DF;
	--rozany: #C2867F;
	--rozany-ciemny: #A96A63;
	--szalwia: #CAD2C5;
	--szalwia-tlo: #DDE3D9;
	--atrament: #2A2624;
	--przygas: #7C736D;
	--kreska: #E6DBD4;
	--czern: #1B1816;

	--serif: "Newsreader", Georgia, "Times New Roman", serif;
	--sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Wysokość nagłówka razem z paskiem ogłoszeń — czyta ją arkusz i skrypt. */
	--pasek-h: 38px;
	--naglowek-h: 78px;

	--wrap: 1280px;
	--gutter: 24px;
}

@media (min-width: 1024px) {
	:root {
		--gutter: 40px;
	}
}

/* ——— 02 · Reset i warstwa bazowa ————————————————————————————————— */

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

html {
	/* Safari na iOS ignoruje overflow-x:hidden przy przewijaniu palcem; clip nie psuje sticky. */
	overflow-x: clip;
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--naglowek-h) + 20px);
}

body {
	background: var(--kremowy);
	color: var(--atrament);
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: none;
	cursor: pointer;
}

::selection {
	background: var(--rozowy-tlo);
	color: var(--atrament);
}

.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Odnośnik dla klawiatury — pierwszy element dokumentu. */
.pomin {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 900;
	padding: 12px 22px;
	background: var(--atrament);
	color: var(--kremowy);
	font-size: 13px;
	letter-spacing: 0.06em;
	transform: translate(-50%, -130%);
	transition: transform 0.25s ease;
}

.pomin:focus {
	transform: translate(-50%, 0);
}

:focus-visible {
	outline: 2px solid var(--rozany);
	outline-offset: 3px;
}

/* ——— 03 · Typografia i etykiety ——————————————————————————————————— */

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

/*
 * Skala oparta na `clamp`, nie na trzech progach w media queries. Nagłówek rośnie płynnie razem
 * z oknem, więc na 1280 px i na 1600 px proporcje są te same — to jest ta różnica, którą widać,
 * a której nie da się nazwać.
 */
.t-hero {
	font-size: clamp(2.6rem, 5.4vw, 4.6rem);
}

.t-sekcja {
	font-size: clamp(1.9rem, 3.4vw, 3rem);
}

.t-pod {
	font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}

/* Kursywa serifem w drugiej linii nagłówka — główny chwyt typograficzny tego projektu. */
.kursywa {
	font-style: italic;
	color: var(--rozany);
}

/* Małe wersaliki z szeroką światłością. Etykieta sekcji, nigdy treść. */
.etykieta {
	display: inline-block;
	font-family: var(--sans);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rozany);
}

.etykieta--przygas {
	color: var(--przygas);
}

.lid {
	max-width: 54ch;
	color: var(--przygas);
	font-size: 1.0625rem;
}

.lid--srodek {
	margin-inline: auto;
	text-align: center;
}

/* ——— 04 · Siatka i pasy sekcji ———————————————————————————————————— */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.wrap--waski {
	max-width: 900px;
}

.sekcja {
	padding-block: clamp(64px, 9vw, 130px);
}

.sekcja--ciasna {
	padding-block: clamp(48px, 6vw, 88px);
}

.sekcja--piasek {
	background: var(--piaskowy);
}

.sekcja--roz {
	background: var(--rozowy-tlo);
}

.sekcja--szalwia {
	background: var(--szalwia-tlo);
}

.sekcja--ciemna {
	background: var(--czern);
	color: var(--kremowy);
}

.sekcja--ciemna .lid,
.sekcja--ciemna .przygas {
	color: rgba(251, 248, 245, 0.66);
}

.naglowek-sekcji {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: clamp(36px, 4vw, 60px);
}

.naglowek-sekcji--srodek {
	align-items: center;
	text-align: center;
}

/* Cienka kreska zamiast cienia — jedyny sposób na podział, jakiego ten projekt używa. */
.kreska {
	height: 1px;
	background: var(--kreska);
	border: 0;
}

/* ——— 05 · Przyciski i odnośniki ——————————————————————————————————— */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 30px;
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 1px solid transparent;
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.btn--pelny {
	background: var(--rozany);
	color: #fff;
}

.btn--pelny:hover,
.btn--pelny:focus-visible {
	background: var(--rozany-ciemny);
}

.btn--obrys {
	background: transparent;
	color: var(--atrament);
	border-color: var(--atrament);
}

.btn--obrys:hover,
.btn--obrys:focus-visible {
	background: var(--atrament);
	color: var(--kremowy);
}

.btn--jasny {
	background: transparent;
	color: var(--kremowy);
	border-color: rgba(251, 248, 245, 0.45);
}

.btn--jasny:hover {
	background: var(--kremowy);
	color: var(--atrament);
}

.btn--maly {
	min-height: 40px;
	padding: 0 20px;
	font-size: 11px;
}

/*
 * Odnośnik tekstowy z kreską, która wyjeżdża od lewej. Robi to `scaleX` na `::after`,
 * nie `width` — animowanie szerokości zmusza przeglądarkę do przeliczenia układu przy
 * każdej klatce, a transformacja idzie po stronie karty graficznej.
 */
.link-kreska {
	position: relative;
	display: inline-block;
	padding-bottom: 3px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.link-kreska::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.link-kreska:hover::after {
	transform: scaleX(0.35);
}

/* ——— 06 · Pasek ogłoszeń i nagłówek ——————————————————————————————— */

.pasek {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--pasek-h);
	padding-inline: var(--gutter);
	background: var(--rozany);
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
}

.pasek__tekst {
	display: inline-block;
}

.naglowek {
	position: sticky;
	top: 0;
	z-index: 500;
	background: var(--kremowy);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.naglowek--przewiniety {
	border-bottom-color: var(--kreska);
	background: rgba(251, 248, 245, 0.94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.naglowek__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--naglowek-h);
}

.logo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1;
}

.logo__nazwa {
	font-family: var(--serif);
	font-size: 26px;
	letter-spacing: 0.24em;
	text-indent: 0.24em;
}

.logo__pod {
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-indent: 0.3em;
	text-transform: uppercase;
	color: var(--przygas);
}

.nawigacja {
	display: none;
}

@media (min-width: 1024px) {
	.nawigacja {
		display: flex;
		align-items: center;
		gap: 30px;
	}
}

.nawigacja__link {
	position: relative;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding-block: 6px;
	transition: color 0.3s ease;
}

.nawigacja__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--rozany);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.nawigacja__link:hover::after,
.nawigacja__link[aria-current="page"]::after {
	transform: scaleX(1);
	transform-origin: left;
}

.nawigacja__link[aria-current="page"] {
	color: var(--rozany);
}

.naglowek__akcje {
	display: flex;
	align-items: center;
	gap: 14px;
}

.naglowek__cta {
	display: none;
}

@media (min-width: 1024px) {
	.naglowek__cta {
		display: inline-flex;
	}
}

.burger {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 0 8px;
}

@media (min-width: 1024px) {
	.burger {
		display: none;
	}
}

.burger__linia {
	display: block;
	height: 1px;
	background: var(--atrament);
	transition: transform 0.35s ease, opacity 0.25s ease;
}

.burger[aria-expanded="true"] .burger__linia:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger__linia:nth-child(2) {
	opacity: 0;
}

.burger[aria-expanded="true"] .burger__linia:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ——— 07 · Menu na telefonie ———————————————————————————————————————— */

.menu-mob {
	position: fixed;
	inset: 0;
	z-index: 600;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 90px var(--gutter) 40px;
	background: var(--kremowy);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* `hidden` to tylko reguła z arkusza domyślnego — `display:flex` z klasy ją przykrywa. */
.menu-mob[hidden] {
	display: none;
}

.menu-mob--otwarte {
	opacity: 1;
	visibility: visible;
}

/* Bez skryptu nakładka przestaje być nakładką i zostaje zwykłą listą — inaczej na telefonie
   nie byłoby żadnej nawigacji. */
html:not(.js) .menu-mob[hidden] {
	display: flex;
}

html:not(.js) .menu-mob {
	position: static;
	padding: 0 var(--gutter) 28px;
	opacity: 1;
	visibility: visible;
}

html:not(.js) .burger {
	display: none;
}

.menu-mob__lista {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.menu-mob__link {
	display: block;
	padding: 10px 0;
	font-family: var(--serif);
	font-size: 30px;
	line-height: 1.2;
}

.menu-mob__stopka {
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--kreska);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 13px;
	color: var(--przygas);
}

html.menu-otwarte,
html.menu-otwarte body {
	overflow: hidden;
}

/* ——— 08 · Hero ———————————————————————————————————————————————————— */

.hero {
	background: var(--rozowy-tlo);
}

.hero__siatka {
	display: grid;
	gap: 0;
}

@media (min-width: 900px) {
	.hero__siatka {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		min-height: min(78vh, 720px);
	}
}

.hero__tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 22px;
	padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(48px, 6vw, 80px) 0;
	max-width: 620px;
	margin-left: auto;
	width: 100%;
}

@media (max-width: 899px) {
	.hero__tekst {
		padding-inline: var(--gutter);
		max-width: none;
	}
}

.hero__media {
	position: relative;
	overflow: hidden;
	min-height: 340px;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__atuty {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 34px;
	margin-top: 10px;
	padding-top: 26px;
	border-top: 1px solid rgba(42, 38, 36, 0.12);
	list-style: none;
}

.hero__atut {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--przygas);
}

.hero__atut svg {
	width: 22px;
	height: 22px;
	color: var(--rozany);
	flex-shrink: 0;
}

.hero__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ——— 09 · Zabiegi — kafle z ikonami ——————————————————————————————— */

.zabiegi__siatka {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, 1fr);
}

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

@media (min-width: 1024px) {
	.zabiegi__siatka {
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
	}
}

.zabieg-kafel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 34px 16px;
	text-align: center;
	transition: background-color 0.4s ease;
}

.zabieg-kafel:hover {
	background: var(--kremowy);
}

.sekcja--piasek .zabieg-kafel:hover {
	background: rgba(251, 248, 245, 0.7);
}

.zabieg-kafel__ikona {
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border: 1px solid var(--kreska);
	border-radius: 50%;
	color: var(--rozany);
	transition: border-color 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.zabieg-kafel:hover .zabieg-kafel__ikona {
	border-color: var(--rozany);
	transform: translateY(-4px);
}

.zabieg-kafel__ikona svg {
	width: 30px;
	height: 30px;
}

.zabieg-kafel__nazwa {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.zabieg-kafel__opis {
	font-size: 13px;
	line-height: 1.5;
	color: var(--przygas);
	max-width: 22ch;
}

/* ——— 10 · O nas i kartka rezerwacji ——————————————————————————————— */

.onas {
	display: grid;
	gap: 0;
}

@media (min-width: 900px) {
	.onas {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}

.onas__media {
	position: relative;
	overflow: hidden;
	min-height: 320px;
}

.onas__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.onas__tresc {
	display: grid;
	gap: 28px;
	align-content: center;
	padding: clamp(44px, 5vw, 76px) var(--gutter);
	background: var(--kremowy);
}

@media (min-width: 1200px) {
	.onas__tresc {
		grid-template-columns: 1.3fr 1fr;
		gap: 40px;
		padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
	}
}

.onas__lista {
	list-style: none;
	display: grid;
	gap: 10px;
	margin-top: 8px;
}

.onas__lista li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
}

.onas__lista svg {
	width: 17px;
	height: 17px;
	margin-top: 3px;
	color: var(--rozany);
	flex-shrink: 0;
}

.kartka {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 34px 26px;
	text-align: center;
	border: 1px solid var(--kreska);
	background: var(--kremowy);
	align-self: start;
}

.kartka__ikona {
	color: var(--rozany);
}

.kartka__ikona svg {
	width: 28px;
	height: 28px;
}

.kartka__tytul {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.5;
}

.kartka__tekst {
	font-size: 13.5px;
	color: var(--przygas);
}

/* ——— 11 · Rytuał wizyty ——————————————————————————————————————————— */

.rytual {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
	.rytual {
		grid-template-columns: repeat(4, 1fr);
	}
}

.rytual__krok {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 30px 24px;
	background: rgba(251, 248, 245, 0.72);
	transition: background-color 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.rytual__krok:hover {
	background: var(--kremowy);
	transform: translateY(-4px);
}

.rytual__numer {
	font-family: var(--serif);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--rozany);
}

.rytual__nazwa {
	font-family: var(--serif);
	font-size: 1.4rem;
	line-height: 1.15;
}

.rytual__opis {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--przygas);
}

/* ——— 12 · Efekty i opinie ————————————————————————————————————————— */

.efekty {
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(2, 1fr);
}

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

/*
 * Kadr o stałych proporcjach. Dzięki `aspect-ratio` przeglądarka rezerwuje miejsce jeszcze przed
 * wczytaniem zdjęcia, więc strona nie podskakuje w trakcie ładowania — to jeden z tych detali,
 * które odróżniają „szybko" od „szybko i spokojnie".
 */
.kadr {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--piaskowy);
}

.kadr--szeroki {
	aspect-ratio: 3 / 2;
}

.kadr--kwadrat {
	aspect-ratio: 1;
}

.kadr img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.kadr:hover img {
	transform: scale(1.04);
}

.opinie {
	display: grid;
	gap: 40px;
}

@media (min-width: 900px) {
	.opinie {
		grid-template-columns: repeat(3, 1fr);
		gap: 50px;
	}
}

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

.opinia__cytat {
	font-family: var(--serif);
	font-size: 1.3rem;
	line-height: 1.45;
	font-style: italic;
}

.opinia__autor {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--przygas);
}

.opinia__gwiazdki {
	display: flex;
	gap: 3px;
	color: var(--rozany);
}

.opinia__gwiazdki svg {
	width: 13px;
	height: 13px;
}

/* ——— 13 · Siatka kafli ze zdjęciami ——————————————————————————————— */

.kafle {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
	.kafle {
		grid-template-columns: repeat(4, 1fr);
	}
}

.kafel {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 8px;
	min-height: 300px;
	padding: 26px 22px;
	overflow: hidden;
	color: var(--atrament);
	text-align: center;
	align-items: center;
}

.kafel__tlo {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.kafel__tlo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.kafel:hover .kafel__tlo img {
	transform: scale(1.05);
}

.kafel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(244, 227, 223, 0.94) 0%, rgba(244, 227, 223, 0.7) 45%, rgba(244, 227, 223, 0.15) 100%);
}

.kafel__tytul {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.kafel__opis {
	font-size: 13px;
	line-height: 1.5;
	color: var(--przygas);
	max-width: 26ch;
}

/* ——— 14 · Dziennik ———————————————————————————————————————————————— */

.dziennik {
	display: grid;
	gap: 34px;
}

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

.wpis {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.wpis__meta {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--przygas);
}

.wpis__tytul {
	font-family: var(--serif);
	font-size: 1.45rem;
	line-height: 1.2;
}

.wpis__zajawka {
	font-size: 14px;
	color: var(--przygas);
}

/* ——— 15 · Stopka —————————————————————————————————————————————————— */

.stopka {
	background: var(--czern);
	color: var(--kremowy);
	padding-block: clamp(56px, 7vw, 92px) 0;
}

.stopka__gora {
	display: grid;
	gap: 40px;
	padding-bottom: 52px;
}

@media (min-width: 800px) {
	.stopka__gora {
		grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
		gap: 40px;
	}
}

.stopka .logo__pod {
	color: rgba(251, 248, 245, 0.55);
}

.stopka__opis {
	margin-top: 16px;
	font-size: 14px;
	color: rgba(251, 248, 245, 0.66);
	max-width: 34ch;
}

.stopka__naglowek {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 16px;
	color: rgba(251, 248, 245, 0.55);
}

.stopka__lista {
	list-style: none;
	display: grid;
	gap: 9px;
	font-size: 14px;
	color: rgba(251, 248, 245, 0.8);
}

.stopka__lista a:hover {
	color: #fff;
}

.stopka__dol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding-block: 22px;
	border-top: 1px solid rgba(251, 248, 245, 0.14);
	font-size: 12px;
	color: rgba(251, 248, 245, 0.5);
}

.stopka__social {
	display: flex;
	gap: 14px;
}

.stopka__social a {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(251, 248, 245, 0.2);
	border-radius: 50%;
	transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.stopka__social a:hover {
	background: var(--kremowy);
	border-color: var(--kremowy);
	color: var(--czern);
}

.stopka__social svg {
	width: 16px;
	height: 16px;
}

/* ——— 16 · Podstrony ——————————————————————————————————————————————— */

.naglowek-strony {
	background: var(--piaskowy);
	padding-block: clamp(50px, 6vw, 86px);
}

.okruchy {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--przygas);
}

.okruchy span {
	color: var(--kreska);
}

/* Cennik — wiersz jako odnośnik, więc podkreślenie musi zniknąć jawnie. */
.cennik {
	display: grid;
	gap: 0;
}

.cennik__grupa + .cennik__grupa {
	margin-top: 54px;
}

.cennik__tytul-grupy {
	font-family: var(--serif);
	font-size: 1.6rem;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--kreska);
	margin-bottom: 4px;
}

.cennik__wiersz {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 6px 20px;
	align-items: baseline;
	padding: 18px 0;
	border-bottom: 1px solid var(--kreska);
	text-decoration: none;
}

.cennik__nazwa {
	font-size: 1.05rem;
	font-weight: 500;
}

.cennik__opis {
	grid-column: 1 / -1;
	font-size: 13.5px;
	color: var(--przygas);
	max-width: 62ch;
}

.cennik__cena {
	font-family: var(--serif);
	font-size: 1.25rem;
	white-space: nowrap;
	color: var(--rozany);
}

.cennik__czas {
	grid-column: 2;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--przygas);
	text-align: right;
}

/* Zespół */
.zespol {
	display: grid;
	gap: 34px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.osoba__tresc {
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.osoba__imie {
	font-family: var(--serif);
	font-size: 1.35rem;
}

.osoba__rola {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rozany);
}

.osoba__opis {
	font-size: 14px;
	color: var(--przygas);
}

/* Kontakt i formularz */
.kontakt {
	display: grid;
	gap: 48px;
}

@media (min-width: 900px) {
	.kontakt {
		grid-template-columns: 1fr 1.15fr;
		gap: 64px;
	}
}

.dane {
	list-style: none;
	display: grid;
	gap: 22px;
}

.dane__pozycja {
	display: grid;
	gap: 4px;
}

.dane__etykieta {
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--przygas);
}

.dane__wartosc {
	font-size: 1.05rem;
}

.pole {
	display: grid;
	gap: 7px;
	margin-bottom: 18px;
}

.pole__etykieta {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--przygas);
}

.pole input,
.pole select,
.pole textarea {
	width: 100%;
	padding: 13px 15px;
	font: inherit;
	font-size: 15px;
	color: var(--atrament);
	background: var(--kremowy);
	border: 1px solid var(--kreska);
	border-radius: 0;
	transition: border-color 0.3s ease;
}

.pole input:focus,
.pole select:focus,
.pole textarea:focus {
	border-color: var(--rozany);
	outline: none;
}

.pole textarea {
	min-height: 130px;
	resize: vertical;
}

.para {
	display: grid;
	gap: 0 18px;
}

@media (min-width: 620px) {
	.para {
		grid-template-columns: 1fr 1fr;
	}
}

.mapa-ramka {
	aspect-ratio: 16 / 9;
	background: var(--piaskowy);
	display: grid;
	place-items: center;
	color: var(--przygas);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid var(--kreska);
}

/* ——— 17 · Pojawianie się treści ——————————————————————————————————— */

/*
 * Tu **celowo nie ma** reguły chowającej treść.
 *
 * Stan początkowy animacji ustawia GSAP dopiero wtedy, gdy naprawdę się wczytał (`skrypt.js`).
 * Gdyby chowanie siedziało w arkuszu, wycięty CDN albo padnięta sieć zostawiłyby odwiedzającego
 * z pustą stroną — arkusz schowałby treść, a nie miałby jej kto odsłonić. Klasa `js` starcza do
 * rzeczy, które nie zależą od biblioteki (menu), ale nie do chowania treści.
 */

/* Zasłona przejścia między podstronami — to ona daje wrażenie aplikacji, a nie przeładowania. */
.zaslona {
	position: fixed;
	inset: 0;
	z-index: 800;
	background: var(--kremowy);
	opacity: 0;
	pointer-events: none;
}

/* ——— 18 · Telefon i dostępność ———————————————————————————————————— */

@media (max-width: 767px) {
	/* Pole mniejsze niż 16 px sprawia, że Safari na iOS samo przybliża stronę po kliknięciu. */
	input,
	select,
	textarea {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.js [data-odslon] {
		opacity: 1;
	}
}