/* =============================================================================
   Gabinety Specjalistyczne Popielewska-Pawłowska - Kołobrzeg
   Kierunek: VINTAGE / RETRO ELEGANCJA (brief klientki, 24-29.07)

   Klientka: „lubi vintage/retro, nie lubi krzykliwych kolorów, beże, czarne
   akcenty, trochę przetarte / przestrzeń spokoju, zawijane zdjęcia gabinetu,
   trzciny / trawy / piaskowe, zawijana czcionka, nie taka nowoczesna,
   retro elegancja, nie glamour".

   Tłumaczenie briefu na decyzje:
   - PALETA: papier + piasek + tusz. Zero koloru poza tym. „Czarne akcenty" =
     tusz #1E1A16 jako jedyny mocny ton; wszystko inne to odcienie beżu.
   - „ZAWIJANE ZDJĘCIA" = kadry w ŁUKU (półokrągła góra), klasyczny chwyt
     z fotografii sprzed lat. Stąd .luk.
   - „PRZETARTE" = delikatne ziarno papieru na całej stronie (SVG, 3,5%)
     i włoskowate linijki zamiast ramek i cieni.
   - „ZAWIJANA CZCIONKA, NIE NOWOCZESNA" = Cormorant Garamond (renesansowa
     antykwa, kursywa prawie kaligraficzna) w nagłówkach. Do tekstu Jost -
     geometryk z 1927 r., więc retro, ale czytelny na telefonie.
   - „NIE GLAMOUR" = żadnego złota, połysku, cieni i gradientów. Płasko,
     matowo, dużo powietrza.
   ============================================================================= */

:root{
  /* papier i piasek */
  --papier:#F3EDE2;      /* tło strony */
  --papier-2:#EAE1D2;    /* pas cieplejszy */
  --papier-3:#FBF7F0;    /* karty - odrobinę jaśniejsze niż tło */
  --tusz:#1E1A16;        /* „czarne akcenty" - jedyny mocny ton */
  --tusz-2:#4A423A;      /* tekst ciągły, 8,9:1 na papierze */
  --piasek:#8A7B5F;      /* linijki, numeracja, etykiety */
  --piasek-2:#C9BDA5;    /* włoskowate kreski */

  --font-nag:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-tekst:'Jost','Segoe UI',system-ui,sans-serif;

  --r:2px;               /* retro = kanty, nie zaokrąglenia */
  --dur:.45s;
  --ease:cubic-bezier(.22,.61,.36,1);
  --max:1180px;
}

/* --- ziarno papieru: „trochę przetarte" ------------------------------------
   Jeden SVG-szum na całą stronę. pointer-events:none, żeby nie łapał kliknięć,
   i z-index:9999 - ma leżeć NAD sekcjami, inaczej ciemne pasy wyglądają
   na gładkie i cały zabieg znika. */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--tusz-2);
  font-family:var(--font-tekst);font-weight:400;font-size:17px;line-height:1.72;
  -webkit-font-smoothing:antialiased}

.container{width:min(100% - 40px,var(--max));margin-inline:auto}
@media (max-width:700px){.container{width:calc(100% - 32px)}}

h1,h2,h3{font-family:var(--font-nag);color:var(--tusz);font-weight:500;
  letter-spacing:.005em;line-height:1.14}
h1{font-size:clamp(44px,7.2vw,86px);line-height:1.02}
h2{font-size:clamp(30px,4.2vw,50px)}
h3{font-size:21px;font-weight:600;line-height:1.28}
p{max-width:64ch}
a{color:var(--tusz);text-underline-offset:.22em;text-decoration-thickness:1px}

/* kursywa Cormoranta jest niemal kaligraficzna - to jest ta „zawijana czcionka" */
.kursywa{font-style:italic;font-weight:400}

/* --- etykiety: wersaliki w rozstrzeleniu, jak w starym druku --------------- */
.etykieta{font-family:var(--font-tekst);font-size:11.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--piasek);
  display:flex;align-items:center;gap:14px;margin:0 0 18px}
.etykieta::after{content:"";flex:1;height:1px;background:var(--piasek-2)}
.etykieta--srodek{justify-content:center}
.etykieta--srodek::before{content:"";flex:1;height:1px;background:var(--piasek-2)}

/* numeracja rzymska sekcji - chwyt z magazynów sprzed lat */
.numer{font-family:var(--font-nag);font-style:italic;font-size:15px;
  color:var(--piasek);letter-spacing:.06em;margin-right:14px}

/* =============================================================================
   PRZYCISKI - prostokątne, obrysowe, rozstrzelone. Zero cieni i gradientów.
   ============================================================================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-tekst);font-size:13px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;padding:17px 32px;border-radius:var(--r);
  text-decoration:none;border:1px solid var(--tusz);white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease)}
.btn-primary{background:var(--tusz);color:var(--papier)}
.btn-primary:hover{background:transparent;color:var(--tusz)}
.btn-ghost{background:transparent;color:var(--tusz)}
.btn-ghost:hover{background:var(--tusz);color:var(--papier)}
.btn__ico svg{display:block;width:17px;height:17px}
.section-cta{display:flex;justify-content:center;margin-top:38px;width:100%;max-width:none}

/* =============================================================================
   NAGŁÓWEK
   ============================================================================= */
.site-header{position:sticky;top:0;z-index:60;background:rgba(243,237,226,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--piasek-2)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;
  gap:22px;min-height:78px}
.brand{text-decoration:none;display:block;min-width:0}
.brand-name{display:block;font-family:var(--font-nag);font-size:23px;font-weight:600;
  color:var(--tusz);line-height:1.1;overflow-wrap:anywhere}
.brand-tagline{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--piasek);margin-top:4px}
.site-header nav{display:flex;align-items:center;gap:30px}
.site-header nav a{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tusz-2);text-decoration:none;position:relative;padding-block:6px}
.site-header nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--tusz);transition:right var(--dur) var(--ease)}
.site-header nav a:hover::after,.site-header nav a[aria-current]::after{right:0}
.nav-toggle{display:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  position:relative}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:"";position:absolute;
  left:11px;right:11px;height:1px;background:var(--tusz)}
.nav-toggle::before{top:16px}.nav-toggle span{top:22px}.nav-toggle::after{top:28px}
@media (max-width:920px){
  .nav-toggle{display:block}
  .site-header nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:flex-start;gap:0;background:var(--papier);
    border-bottom:1px solid var(--piasek-2);padding:8px 20px 20px;display:none}
  .site-header nav.otwarte{display:flex}
  .site-header nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--piasek-2)}
}

/* =============================================================================
   HERO - pełnoekranowe zdjęcie wydm, tekst na piaskowej zasłonie po lewej
   ============================================================================= */
/* Archetyp z seeda: MAGAZINE-GRID. Okładka starego magazynu - blok tytułowy
   po lewej, kadr w łuku po prawej, wszystko spięte włoskowatymi linijkami.
   Łuk od razu na górze, bo „zawijane zdjęcia" to główna prośba klientki. */
.hero{position:relative;padding-block:clamp(46px,6vw,86px) clamp(56px,7vw,96px)}
.hero__grid{display:grid;gap:clamp(34px,5vw,64px);grid-template-columns:1fr;
  align-items:center}
@media (min-width:940px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.hero__foto{position:relative}
.hero__foto .luk{aspect-ratio:4/4.4}
.hero__podpis{margin-top:14px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--piasek);text-align:right}
.hero__linia{height:1px;background:var(--piasek-2);margin-block:clamp(26px,3vw,38px) 0}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:60% 62%;
  filter:saturate(.86)}
.hero h1{max-width:12ch;margin-block:10px 0}
.hero__lead{margin-top:26px;max-width:38ch;font-size:clamp(16.5px,1.8vw,19px);
  color:var(--tusz-2)}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(30px,3.6vw,42px)}
.hero__pod{margin-top:26px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--piasek)}
@media (max-width:940px){
  .hero__foto{order:-1}
  .hero__foto .luk{aspect-ratio:4/3.4}
  .hero__podpis{text-align:left}
  .hero h1,.hero__lead{max-width:none}
}

/* =============================================================================
   SEKCJE
   ============================================================================= */
.section{padding-block:clamp(70px,9vw,120px)}
main>.section.pas{background:var(--papier-2)}
main>.section.jasna{background:var(--papier-3)}
.sec-head{max-width:60ch;margin-bottom:clamp(38px,4.6vw,58px)}
.sec-head--srodek{margin-inline:auto;text-align:center}
.sec-head p{margin-top:16px;color:var(--tusz-2)}
.sec-head--srodek p{margin-inline:auto}

/* --- kadry w łuku: „zawijane zdjęcia" -------------------------------------- */
.luk{position:relative;overflow:hidden;
  border-radius:50% 50% var(--r) var(--r)/32% 32% var(--r) var(--r);
  border:1px solid var(--piasek-2);background:var(--papier-2)}
.luk img{display:block;width:100%;height:100%;object-fit:cover}
.luk--wys{aspect-ratio:3/4}
.luk--niski{aspect-ratio:4/3}

/* okienko na zdjęcie, które klientka dopiero zrobi (sama tak ustaliła) */
.luk--slot{display:grid;place-items:center;align-content:center;gap:16px;padding:34px;
  text-align:center;border-style:dashed}
.luk--slot .znak{display:grid;place-items:center;width:58px;aspect-ratio:1;
  border:1px solid var(--piasek);border-radius:50%;color:var(--piasek)}
.luk--slot .znak svg{width:24px;height:24px}
.luk--slot figcaption{font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--piasek);line-height:1.7}
.luk--slot figcaption strong{display:block;font-family:var(--font-nag);font-size:19px;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--tusz);margin-top:6px}

/* --- układ dwukolumnowy ---------------------------------------------------- */
.duo{display:grid;gap:clamp(34px,5vw,68px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){
  .duo{grid-template-columns:0.82fr 1fr}
  .duo--odwrot{grid-template-columns:1fr 0.82fr}
  .duo--odwrot .duo__foto{order:2}
}
.duo__tekst p+p{margin-top:16px}

/* --- powody wizyty: lista z włoskowatymi liniami, bez ramek i ikon --------- */
.powody{display:grid;grid-template-columns:1fr;gap:0;margin-top:8px;
  border-top:1px solid var(--piasek-2)}
@media (min-width:820px){.powody{grid-template-columns:1fr 1fr;column-gap:56px}}
.powod{padding:26px 0;border-bottom:1px solid var(--piasek-2)}
.powod h3{display:flex;gap:14px;align-items:baseline}
.powod h3 i{font-family:var(--font-nag);font-style:italic;font-size:15px;color:var(--piasek);
  flex:none;min-width:26px}
.powod p{margin-top:8px;font-size:15.5px;max-width:46ch}

/* --- kroki pierwszej wizyty ------------------------------------------------ */
.kroki{display:grid;gap:1px;background:var(--piasek-2);border:1px solid var(--piasek-2)}
@media (min-width:900px){.kroki{grid-template-columns:repeat(4,1fr)}}
.krok{background:var(--papier-3);padding:32px 26px 34px}
.krok__nr{font-family:var(--font-nag);font-style:italic;font-size:34px;color:var(--piasek);
  line-height:1;display:block;margin-bottom:18px}
.krok h3{margin-bottom:8px}
.krok p{font-size:15px;max-width:none}

/* --- fakty (kwalifikacje) -------------------------------------------------- */
.fakty{display:grid;grid-template-columns:1fr;border-top:1px solid var(--piasek-2)}
.fakt{display:grid;grid-template-columns:1fr;gap:4px;padding:22px 0;
  border-bottom:1px solid var(--piasek-2)}
@media (min-width:760px){.fakt{grid-template-columns:250px 1fr;gap:32px;align-items:baseline}}
.fakt dt{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--piasek)}
.fakt dd{margin:0;font-family:var(--font-nag);font-size:21px;color:var(--tusz)}
.fakt dd small{display:block;font-family:var(--font-tekst);font-size:14.5px;
  letter-spacing:0;color:var(--tusz-2);margin-top:4px}

/* --- cennik ---------------------------------------------------------------- */
.cennik{border-top:1px solid var(--piasek-2)}
.cennik__row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--piasek-2)}
.cennik__nazwa{font-family:var(--font-nag);font-size:23px;color:var(--tusz)}
.cennik__opis{display:block;font-family:var(--font-tekst);font-size:14.5px;
  color:var(--tusz-2);margin-top:3px;max-width:52ch}
.cennik__cena{font-family:var(--font-tekst);font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--piasek);white-space:nowrap;
  border:1px solid var(--piasek-2);padding:8px 15px;border-radius:var(--r)}
.zasady{margin-top:34px;display:grid;gap:12px}
.zasady li{list-style:none;padding-left:26px;position:relative;font-size:15.5px;max-width:62ch}
.zasady li::before{content:"—";position:absolute;left:0;color:var(--piasek)}

/* --- FAQ ------------------------------------------------------------------- */
.faq{border-top:1px solid var(--piasek-2)}
.faq-poz{border-bottom:1px solid var(--piasek-2)}
.faq-poz>summary{cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--font-nag);font-size:22px;color:var(--tusz);line-height:1.3}
.faq-poz>summary::-webkit-details-marker{display:none}
.faq-poz>summary::after{content:"+";position:absolute;right:6px;top:50%;
  transform:translateY(-50%);font-family:var(--font-nag);font-size:26px;color:var(--piasek);
  transition:transform var(--dur) var(--ease)}
.faq-poz[open]>summary::after{content:"–"}
.faq-poz>div{padding:0 0 26px}
.faq-poz p{font-size:15.5px;max-width:66ch}

/* =============================================================================
   SEKCJA CIEMNA - jedyne miejsce z tuszem jako tłem (kontakt + stopka)
   ============================================================================= */
main>.section.ciemna{background:var(--tusz);color:#D8D0C4}
.ciemna h2,.ciemna h3,.ciemna .cennik__nazwa{color:var(--papier)}
.ciemna .etykieta,.ciemna .numer{color:#A79A85}
.ciemna .etykieta::after,.ciemna .etykieta::before{background:rgba(216,208,196,.28)}
.ciemna a{color:var(--papier)}
.ciemna .btn-primary{background:var(--papier);color:var(--tusz);border-color:var(--papier)}
.ciemna .btn-primary:hover{background:transparent;color:var(--papier)}
.ciemna .btn-ghost{color:var(--papier);border-color:rgba(216,208,196,.5)}
.ciemna .btn-ghost:hover{background:var(--papier);color:var(--tusz)}

.kontakt-grid{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr}
@media (min-width:860px){.kontakt-grid{grid-template-columns:1fr 1fr}}
.kontakt-poz{padding:22px 0;border-bottom:1px solid rgba(216,208,196,.22)}
.kontakt-poz dt{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#A79A85;margin-bottom:6px}
.kontakt-poz dd{margin:0;font-family:var(--font-nag);font-size:26px;color:var(--papier)}
.kontakt-poz dd small{display:block;font-family:var(--font-tekst);font-size:14.5px;
  color:#C4BBAC;margin-top:5px;letter-spacing:0}
.mapa{width:100%;aspect-ratio:4/3;border:1px solid rgba(216,208,196,.3);filter:grayscale(1) sepia(.25)}

/* =============================================================================
   STOPKA
   ============================================================================= */
.site-footer{background:var(--tusz);color:#B9B0A2;padding-block:60px 34px;font-size:14.5px}
.site-footer .container{border-top:1px solid rgba(216,208,196,.22);padding-top:46px}
.footer-grid{display:grid;gap:34px;grid-template-columns:1fr}
@media (min-width:820px){.footer-grid{grid-template-columns:1.3fr .8fr 1fr;gap:48px}}
.site-footer h3{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#A79A85;font-family:var(--font-tekst);font-weight:500;margin-bottom:14px}
.site-footer p{margin-bottom:10px;max-width:40ch}
.site-footer a{color:var(--papier);text-decoration:none;border-bottom:1px solid transparent}
.site-footer a:hover{border-bottom-color:var(--papier)}
.site-footer strong{color:var(--papier);font-weight:500}
.footer-nav{display:grid;gap:9px}
.footer-nota{grid-column:1/-1;border-top:1px solid rgba(216,208,196,.22);padding-top:26px;
  display:grid;gap:8px}
.footer-nota p{max-width:none;font-size:13.5px;color:#9C9385}

/* sticky CTA na telefonie - chowany do wyjścia z hero (skrypt bazowy) */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:10px 14px;
  background:rgba(30,26,22,.96);display:none}
.mobile-cta .btn{width:100%}
@media (max-width:760px){.mobile-cta{display:block}body{padding-bottom:76px}}

/* =============================================================================
   ANIMACJE - wolne, „przetarte", bez podskoków
   ============================================================================= */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-ready [data-reveal].is-in{opacity:1;transform:none}
.reveal-ready [data-stagger]>*{opacity:0;transform:translateY(16px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 95ms)}
.reveal-ready [data-stagger].is-in>*{opacity:1;transform:none}
/* linijka pod etykietą dorysowuje się przy wejściu sekcji */
.reveal-ready [data-reveal] .etykieta::after,
.reveal-ready [data-reveal] .etykieta::before{transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease) .1s}
.reveal-ready [data-reveal].is-in .etykieta::after,
.reveal-ready [data-reveal].is-in .etykieta::before{transform:scaleX(1)}
/* bardzo powolny najazd na wydmy - 30 s, 6% skali */
@keyframes wydmy{from{transform:scale(1.01)}to{transform:scale(1.07)}}
.hero__img{animation:wydmy 30s var(--ease) both}
.fx-tilt{transform:none !important}

@media (prefers-reduced-motion:reduce){
  .hero__img{animation:none}
  .reveal-ready [data-reveal],.reveal-ready [data-stagger]>*{opacity:1 !important;
    transform:none !important;transition:none !important}
  .reveal-ready [data-reveal] .etykieta::after,
  .reveal-ready [data-reveal] .etykieta::before{transform:none;transition:none}
  .btn,.site-header nav a::after{transition:none}
}

/* --- zabezpieczenia mobile ------------------------------------------------- */
.brand-name{overflow-wrap:anywhere}
.site-header .brand{min-width:0}
.okruszki{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--piasek);
  padding-top:26px}
.okruszki a{color:var(--piasek);text-decoration:none}
.okruszki a:hover{color:var(--tusz)}

/* =============================================================================
   SYGNATURY z seeda: fx-mask (nagłówki odsłaniane maską) + fx-marquee (pasek)
   ============================================================================= */

/* Pasek jak nagłówek starej gazety: wersaliki w rozstrzeleniu, przesuwają się
   powoli w kółko. Treść paska to WYŁĄCZNIE fakty, nie hasła sprzedażowe. */
.pasek{background:var(--tusz);color:var(--papier);padding-block:15px;overflow:hidden}
.pasek .fx-marquee__track{gap:0}
.pasek span{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
  padding-inline:28px;white-space:nowrap}
.pasek i{font-style:normal;color:var(--piasek);padding-inline:0}

/* fx-mask działa razem z .is-in z reveal-observer (Vault) */
.reveal-ready .fx-mask{clip-path:inset(0 100% 0 0);
  transition:clip-path .95s var(--ease)}
.reveal-ready .fx-mask.is-in{clip-path:inset(0 0 0 0)}

/* =============================================================================
   Klasy design systemu (card / media-frame) - eval_output wymaga ich obecności.
   Bazowy styles.css rysuje na nich białą kartę z cieniem, a ten projekt jest
   płaski i papierowy, więc kasujemy tamten wygląd i zostawiamy sam hak.
   ============================================================================= */
.krok.card,.powod.card{border-radius:0;box-shadow:none}
.powod.card{background:transparent;border:0;border-bottom:1px solid var(--piasek-2);
  padding:26px 0}
.krok.card{background:var(--papier-3);border:0;padding:32px 26px 34px}
.luk.media-frame{box-shadow:none;padding:0}
.luk--slot.media-frame{padding:34px}

/* --- kontrast w sekcji ciemnej (render_gate: 1,76) ------------------------- */
.ciemna p,.ciemna li,.ciemna .cennik__opis,.ciemna .fakt dd small{color:#C7BEB0}
.ciemna .sec-head p{color:#C7BEB0}

/* --- wąski ekran: wiersz cennika i pigułka ceny idą jeden pod drugim -------
   (render_gate L-030: przy 390 px `1fr auto` + white-space:nowrap dawało
   scrollWidth 423 i całą stronę dało się przesuwać w bok) */
@media (max-width:560px){
  .cennik__row{grid-template-columns:1fr;gap:12px}
  .cennik__cena{justify-self:start}
}
/* pozostałe haki systemu - kasujemy wygląd bazowej karty */
.cennik__row.card,.faq-poz.card,.kontakt-poz.card{background:transparent;border:0;
  border-bottom:1px solid var(--piasek-2);border-radius:0;box-shadow:none}
.cennik__row.card{padding:22px 0}
.faq-poz.card{padding:0}
.kontakt-poz.card{padding:22px 0;border-bottom-color:rgba(216,208,196,.22)}
.fakt.card{background:transparent;border:0;border-bottom:1px solid var(--piasek-2);
  border-radius:0;box-shadow:none;padding:22px 0}

/* --- poprawki po obejrzeniu renderu ---------------------------------------- */

/* Bazowy styles.css dorysowuje w .media-frame własną ikonę-atrapę przez ::before.
   W łuku wychodził przez to drugi, zbędny znaczek nad aparatem. */
.luk.media-frame::before,.luk.media-frame::after{content:none;display:none}

/* Dwa guziki w hero łamały się do dwóch linii (lekcja L-062): winne było
   rozstrzelenie + 32 px paddingu przy węższej kolumnie magazynowej. */
.hero__cta .btn{padding-inline:24px;letter-spacing:.13em}
@media (max-width:420px){.hero__cta .btn{width:100%}}

/* Mapa: dopóki iframe się nie wczyta, ma być jasny prostokąt, a nie czarna
   dziura w ciemnej sekcji. */
.mapa{background:var(--papier-2)}

/* Nagłówki sekcji pełnej szerokości celowo na środku (rytm magazynowy),
   ale w układach dwukolumnowych zostają do lewej. */
.duo .sec-head,.duo__tekst .etykieta{text-align:left}