@charset "UTF-8";
/* =========================================================================
   Gabinet Logopedyczny GADUŚ
   Arlek.pl · vanilla CSS, custom properties, zero preprocesorów

   Język wizualny: układ redakcyjny. Siatka 12-kolumnowa z celową asymetrią,
   włoskowate linie zamiast ramek i cieni, typografia o dużej rozpiętości.
   Motyw przewodni: kafel sylabowy — z pudełek w gabinecie („SYLABY NA PA”)
   i z metody, w której mowę buduje się sylaba po sylabie.
   ========================================================================= */

/* -------------------------------------------------------------- 1. TOKENY */
:root {
  --gl-paper:        #FBF7F1;
  --gl-paper-2:      #F4EDE3;
  --gl-white:        #FFFFFF;
  --gl-ink:          #101F24;
  --gl-ink-2:        #40595F;
  --gl-ink-3:        #57696F;  /* 5,38:1 na papierze, 4,75:1 na mincie — AA wszędzie */
  --gl-primary:      #14606E;
  --gl-primary-deep: #0B3B45;
  --gl-accent:       #C0431F;
  --gl-accent-deep:  #96330F;
  --gl-accent-lit:   #E4572E;
  --gl-mint:         #DDEDEA;
  --gl-sun:          #F5C542;
  --gl-sky:          #2BA8DE;
  --gl-leaf:         #8CC63F;
  --gl-line:         #DDD2C2;
  --gl-line-2:       #EBE3D7;
  --gl-error:        #A82217;
  --gl-success:      #2C6349;

  --gl-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --gl-sans:  "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* SKALA — sześć rozmiarów i ani jednego więcej.
     Każdy komponent sięga po token; zero doraźnych clamp() w regułach. */
  --fs-mega:  clamp(2.625rem, 1.9rem + 3.2vw, 4.5rem);   /* 42 → 72  H1 strony głównej */
  --fs-h2:    clamp(1.875rem, 1.5rem + 1.7vw, 2.875rem); /* 30 → 46  nagłówki sekcji */
  --fs-h3:    clamp(1.375rem, 1.28rem + 0.42vw, 1.625rem); /* 22 → 26 */
  --fs-item:  1.1875rem;                                  /* 19  pozycje list, cen, pytań */
  --fs-deck:  clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem); /* 18 → 20  wprowadzenia */
  --fs-body:  1.0625rem;                                  /* 17  treść */
  --fs-sm:    0.9375rem;                                  /* 15 */
  --fs-xs:    0.8125rem;                                  /* 13 */
  --fs-label: 0.75rem;                                    /* 12  etykiety wersalikami */

  /* Sam max-width, bez clamp z minimum 20rem — przy oknie 320 px dolna
     granica clamp wygrywała z szerokością okna i dawała 8 px nadmiaru. */
  --w-page: 84rem;
  --px:     clamp(1.125rem, 4vw, 4rem);

  --sec-sm: clamp(3rem, 6vw, 5rem);
  --sec-md: clamp(4.5rem, 9vw, 8rem);
  --sec-lg: clamp(6rem, 12vw, 11rem);

  --s1: 0.25rem;  --s2: 0.5rem;   --s3: 0.75rem;  --s4: 1rem;
  --s5: 1.25rem;  --s6: 1.5rem;   --s8: 2rem;     --s10: 2.5rem;
  --s12: 3rem;    --s16: 4rem;    --s20: 5rem;    --s24: 6rem;

  --dur-1: 180ms;
  --dur-2: 340ms;
  --dur-3: 620ms;
  --ease:  cubic-bezier(.2, .8, .2, 1);
  --ease-2: cubic-bezier(.4, 0, .15, 1);

  --header-h: 72px;
}

@media (min-width: 1024px) { :root { --header-h: 92px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}

/* --------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--gl-paper);
  color: var(--gl-ink);
  font-family: var(--gl-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, cite { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
cite { font-style: normal; }

a { color: var(--gl-accent); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--gl-accent-deep); }

:focus-visible { outline: 2px solid var(--gl-accent); outline-offset: 3px; }
::selection { background: var(--gl-sun); color: var(--gl-ink); }

@supports (scrollbar-color: red blue) {
  html { scrollbar-color: var(--gl-line) var(--gl-paper); scrollbar-width: thin; }
}

/* ----------------------------------------------------------- 3. TYPOGRAFIA */
h1, h2, h3, h4, .gl-d {
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 45, "WONK" 0;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--gl-ink);
}

/* text-wrap: balance skraca wiersze, żeby je wyrównać — czyta się to jak
   ucięte zdania. Zostaje wyłącznie na krótkich, dwuwierszowych nagłówkach. */
h1, h2 { text-wrap: balance; }

.gl-d--mega { font-size: var(--fs-mega); font-variation-settings: "SOFT" 55, "WONK" 1; line-height: 1.02; letter-spacing: -0.036em; }
h1 { font-size: var(--fs-h2); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-item); }

p + p { margin-top: 1.1em; }
strong, b { font-weight: 600; }

.gl-deck {
  font-size: var(--fs-deck);
  line-height: 1.55;
  color: var(--gl-ink-2);
  font-weight: 400;
}

.gl-label {
  font-family: var(--gl-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gl-ink-3);
}

.gl-reg {
  font-size: .58em;
  line-height: 0;
  vertical-align: .58em;
  letter-spacing: 0;
  margin-left: .06em;
  font-weight: 500;
  opacity: .8;
}

/* Przy tej skali sam kolor niesie akcent — kreska pod spodem tylko brudziła
   zejścia liter. Podkreślenie zostaje wyłącznie dla mniejszych nagłówków. */
.gl-mark { color: var(--gl-accent); }

/* ------------------------------------------------------- 4. SIATKA I RAMY */
.gl-wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--px);
}

/* Siatka 12-kolumnowa — na niej stoi cała asymetria układu */
.gl-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.2vw, 2rem);
  row-gap: var(--s10);
}
@media (min-width: 900px) { .gl-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

.gl-sec { padding-block: var(--sec-md); position: relative; }
.gl-sec--lg { padding-block: var(--sec-lg); }
.gl-sec--sm { padding-block: var(--sec-sm); }
.gl-sec--rule { border-top: 1px solid var(--gl-line); }
.gl-sec--paper2 { background: var(--gl-paper-2); }
.gl-sec--mint { background: var(--gl-mint); }

.gl-sec--deep {
  background: var(--gl-primary-deep);
  color: rgba(255, 255, 255, .8);
}
.gl-sec--deep h1, .gl-sec--deep h2, .gl-sec--deep h3, .gl-sec--deep h4 { color: #fff; }
.gl-sec--deep .gl-deck { color: rgba(255, 255, 255, .74); }
.gl-sec--deep .gl-label { color: var(--gl-sun); }
.gl-sec--deep .gl-head::before { background: rgba(255, 255, 255, .22); }
.gl-sec--deep .gl-head__no { color: rgba(255, 255, 255, .3); }

/* Koral na ciemnym morskim daje 2,35:1 — poniżej każdego progu.
   Na ciemnych tłach linki idą w żółć (7,5:1) albo w biel. */
.gl-sec--deep a:not(.gl-btn):not(.gl-tel):not(.gl-ct__v),
.gl-about a:not(.gl-btn),
.gl-cta a:not(.gl-btn) { color: var(--gl-sun); }
.gl-sec--deep a:not(.gl-btn):hover,
.gl-about a:not(.gl-btn):hover,
.gl-cta a:not(.gl-btn):hover { color: #fff; }
.gl-sec--deep .gl-more, .gl-about .gl-more, .gl-cta .gl-more { color: var(--gl-sun); }

/* Nagłówek sekcji: numer w marginesie, tytuł zwisa pod włoskowatą linią.
   To zastępuje wszechobecny stos „eyebrow / h2 / lead” wyśrodkowany. */
.gl-head { position: relative; padding-top: var(--s6); }
.gl-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--gl-line);
}
.gl-head__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s8);
}
.gl-head__no {
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 60;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gl-ink-3);
}
.gl-head h2 { margin-bottom: var(--s6); }
.gl-head .gl-deck { max-width: none; }

.gl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--gl-accent); color: #fff;
  padding: var(--s3) var(--s6); font-weight: 600;
}
.gl-skip:focus { left: 0; }

/* -------------------------------------------- 5. KAFEL SYLABOWY (SYGNATURA) */
.gl-syl {
  display: inline-grid;
  place-items: center;
  min-width: 2.35em;
  height: 2.35em;
  padding-inline: .5em;
  border-radius: .34em;
  background: var(--gl-ink);
  color: var(--gl-paper);
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 80;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  user-select: none;
}
.gl-syl--sky   { background: var(--gl-sky); color: #08303A; }
.gl-syl--leaf  { background: var(--gl-leaf); color: #10331A; }
.gl-syl--sun   { background: var(--gl-sun); color: #4A3308; }
.gl-syl--acc   { background: var(--gl-accent); color: #fff; }
.gl-syl--sea   { background: var(--gl-primary); color: #fff; }

.gl-syls { display: flex; gap: .4rem; align-items: center; }

/* ------------------------------------------------------------ 6. PRZYCISKI */
.gl-btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  min-height: 54px;
  padding: .9rem 1.5rem;
  background: var(--gl-accent);
  color: #fff;
  border: 1px solid var(--gl-accent);
  border-radius: 4px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background-color var(--dur-1) var(--ease-2), border-color var(--dur-1) var(--ease-2), color var(--dur-1) var(--ease-2);
}
.gl-btn:hover { background: var(--gl-accent-deep); border-color: var(--gl-accent-deep); color: #fff; }
.gl-btn .gl-icon { flex: none; }

.gl-btn--line {
  background: transparent;
  color: var(--gl-ink);
  border-color: var(--gl-ink);
}
.gl-btn--line:hover { background: var(--gl-ink); border-color: var(--gl-ink); color: var(--gl-paper); }

.gl-btn--light { background: #fff; color: var(--gl-primary-deep); border-color: #fff; }
.gl-btn--light:hover { background: var(--gl-sun); border-color: var(--gl-sun); color: var(--gl-ink); }

.gl-btn--block { width: 100%; justify-content: center; }

/* Link redakcyjny: kreska rysuje się od lewej */
.gl-more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding-bottom: .25em;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--gl-accent);
  border-bottom: 1px solid currentColor;
  transition: gap var(--dur-2) var(--ease);
}
.gl-more:hover { gap: .85em; }

/* ------------------------------------------------------------ 7. NAGŁÓWEK */
/* Dwa poziomy: cienki pasek z danymi kontaktowymi (desktop) i właściwy
   nagłówek z logo, nawigacją i przyciskiem. Zawsze na pełnym tle, zawsze
   z linią u dołu — przezroczysty nagłówek gubił się na jasnym papierze. */

.gl-top { display: none; }
@media (min-width: 1024px) {
  .gl-top {
    display: block;
    background: var(--gl-ink);
    color: rgba(255, 255, 255, .72);
    font-size: var(--fs-xs);
    letter-spacing: .02em;
  }
  .gl-top__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s6);
    height: 40px;
    max-width: var(--w-page);
    margin-inline: auto;
    padding-inline: var(--px);
  }
  .gl-top ul { display: flex; align-items: center; gap: var(--s6); }
  .gl-top li { display: inline-flex; align-items: center; gap: .45rem; }
  .gl-top a { color: rgba(255, 255, 255, .82); text-decoration: none; }
  .gl-top a:hover { color: var(--gl-sun); }
  .gl-top .gl-icon { color: var(--gl-sun); opacity: .9; }
  .gl-top__route {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .3rem .8rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease-2), border-color var(--dur-1) var(--ease-2);
  }
  .gl-top__route:hover { background: var(--gl-sun); border-color: var(--gl-sun); color: var(--gl-ink); }
  .gl-top__route:hover .gl-icon { color: var(--gl-ink); }
}

.gl-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--gl-paper);
  border-bottom: 1px solid var(--gl-line);
  transition: box-shadow var(--dur-2) var(--ease-2);
}
.gl-header.is-scrolled { box-shadow: 0 6px 24px -18px rgba(16, 31, 36, .9); }

.gl-header__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  height: var(--header-h);
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--px);
}

.gl-logo { display: flex; align-items: center; gap: .85rem; text-decoration: none; flex: none; }
.gl-logo img { height: 42px; width: auto; }
@media (min-width: 1024px) { .gl-logo img { height: 56px; } }

.gl-logo__t { display: none; }
@media (min-width: 620px) {
  .gl-logo__t {
    display: block;
    padding-left: .9rem;
    border-left: 1px solid var(--gl-line);
    font-family: var(--gl-serif);
    font-variation-settings: "SOFT" 70;
    font-weight: 700;
    font-size: var(--fs-item);
    line-height: 1;
    letter-spacing: .03em;
    color: var(--gl-primary);
  }
  .gl-logo__t small {
    display: block;
    margin-top: 5px;
    font-family: var(--gl-sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gl-ink-3);
  }
}

.gl-nav { display: none; }
@media (min-width: 1024px) {
  .gl-nav { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.25rem); }
  .gl-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: var(--header-h);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--gl-ink);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease-2);
  }
  .gl-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: var(--gl-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease);
  }
  .gl-nav a:hover { color: var(--gl-accent); }
  .gl-nav a:hover::after, .gl-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .gl-nav a[aria-current="page"] { color: var(--gl-accent); }
}

.gl-header__tel { display: none; }
@media (min-width: 1024px) {
  .gl-header__tel {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.35rem;
    background: var(--gl-accent);
    border: 1px solid var(--gl-accent);
    border-radius: 4px;
    font-size: var(--fs-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-1) var(--ease-2), border-color var(--dur-1) var(--ease-2);
  }
  .gl-header__tel:hover { background: var(--gl-accent-deep); border-color: var(--gl-accent-deep); color: #fff; }
  .gl-header__tel small {
    display: block;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .75;
    margin-bottom: 1px;
  }
}

.gl-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 9px;
  background: transparent; border: 1px solid var(--gl-line); border-radius: 4px; flex: none;
}
.gl-burger span { display: block; height: 1.5px; width: 100%; background: var(--gl-ink); transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) linear; }
.gl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.gl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (min-width: 1024px) { .gl-burger { display: none; } }

/* Telefon obok hamburgera — na telefonie to najważniejszy przycisk strony */
.gl-header__call {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex: none;
  background: var(--gl-accent); color: #fff;
  border-radius: 4px; text-decoration: none;
}
.gl-header__call:hover { background: var(--gl-accent-deep); color: #fff; }
@media (min-width: 1024px) { .gl-header__call { display: none; } }

.gl-header__actions { display: flex; align-items: center; gap: var(--s2); }

.gl-mobile {
  position: fixed; inset: 0; z-index: 190;
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + var(--s6)) var(--px) var(--s8);
  background: var(--gl-paper);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--dur-3) var(--ease), visibility 0s linear var(--dur-3);
  overflow-y: auto; overscroll-behavior: contain;
}
.gl-mobile.is-open { transform: none; visibility: visible; transition: transform var(--dur-3) var(--ease), visibility 0s; }

.gl-mobile a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 62px; padding: var(--s3) 0;
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 50;
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.02em;
  color: var(--gl-ink); text-decoration: none;
  border-bottom: 1px solid var(--gl-line-2);
}
.gl-mobile a[aria-current="page"] { color: var(--gl-accent); }
.gl-mobile__f { margin-top: auto; padding-top: var(--s8); display: grid; gap: var(--s3); }
.gl-mobile__f .gl-btn { width: 100%; justify-content: center; }
.gl-mobile__meta { font-size: var(--fs-sm); color: var(--gl-ink-2); }

body.gl-lock { overflow: hidden; }

/* ---------------------------------------------------------------- 8. HERO */
.gl-hero {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: 0;
}

.gl-hero__grid { align-items: end; row-gap: var(--s8); }

.gl-hero__t { grid-column: 1 / -1; }
@media (min-width: 900px) { .gl-hero__t { grid-column: 1 / span 11; } }

/* Kafle i nadtytuł w jednej linii bazowej — sylaby są sygnaturą, nie ozdobą */
.gl-hero__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s5);
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--gl-line);
}
.gl-hero__syls .gl-syl { font-size: 1.0625rem; }
@media (min-width: 700px) { .gl-hero__syls .gl-syl { font-size: 1.25rem; } }

.gl-hero h1 { margin-bottom: 0; }

.gl-hero__deck { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .gl-hero__deck { grid-column: 1 / -1; }   /* maksimum miejsca, zeby zdanie miescilo sie w linii */
  .gl-hero__act  { grid-column: 1 / -1; }
}

.gl-hero__act { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* Zdjęcie na pełną szerokość okna, wychodzi poza kontener — bez kadrów-baniek */
/* Kadr jest poza .gl-wrap, więc ma pełną szerokość bez sztuczek z 100vw
   (100vw liczy pasek przewijania i dokłada poziomy scroll). */
.gl-hero__shot { margin-top: clamp(3rem, 7vw, 6rem); position: relative; }
.gl-hero__shot img {
  width: 100%;
  height: clamp(19rem, 52vw, 40rem);
  object-fit: cover;
  object-position: center 46%;
}
.gl-hero__cap {
  position: absolute;
  right: max(var(--px), calc((100vw - var(--w-page)) / 2 + var(--px)));
  bottom: var(--s5);
  padding: .45rem .8rem;
  background: rgba(11, 59, 69, .8);
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

/* -------------------------------------------------------- 9. PASEK FAKTÓW */
/* Ciemny pas zaraz pod zdjęciem — mocne cięcie kontrastowe i miejsce,
   w którym rodzic w trzy sekundy widzi, z kim ma do czynienia. */
.gl-facts { background: var(--gl-primary-deep); color: rgba(255, 255, 255, .78); }
.gl-facts__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 960px) { .gl-facts__g { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.gl-fact {
  display: flex;
  gap: var(--s4);
  padding: var(--s8) var(--s5) var(--s8) 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.gl-facts__g .gl-fact:nth-child(1),
.gl-facts__g .gl-fact:nth-child(2) { border-top: 0; }
@media (min-width: 960px) {
  .gl-fact { border-top: 0; padding-block: var(--s12); }
  .gl-fact + .gl-fact { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: var(--s8); }
}

.gl-fact__i {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  color: var(--gl-sun);
}

.gl-fact__n {
  display: block;
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 70;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: var(--s2);
}
.gl-fact__d { font-size: var(--fs-sm); line-height: 1.45; color: rgba(255, 255, 255, .72); }

/* ------------------------------------------------------------ 10. DLA KOGO */
/* Nagłówek sekcji zawsze na pełną szerokość — w wąskiej kolumnie wiersze
   urywały się w połowie zdania i całość czytała się jak fragmenty. */
.gl-aud__h { grid-column: 1 / -1; }
.gl-aud__l { grid-column: 1 / -1; }

/* Lista w dwóch kolumnach, ale każda pozycja to krótka fraza — nie proza. */
@media (min-width: 760px) { .gl-list { columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); } }
.gl-list li { break-inside: avoid; }

/* Lista jako spis treści, nie kolorowe kafle */
.gl-list { border-top: 1px solid var(--gl-line); }
.gl-list li {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--gl-line-2);
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 40;
  font-size: var(--fs-item);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.gl-list li span:first-child {
  flex: none;
  width: 1.6rem;
  font-family: var(--gl-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gl-ink-3);
}

.gl-pull {
  margin-top: var(--s10);
  padding-left: var(--s6);
  border-left: 3px solid var(--gl-accent-lit);
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 55;
  font-size: var(--fs-item);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--gl-primary);
}

/* ------------------------------------------------------------- 11. METODY */
/* Nie karty. Numerowana lista redakcyjna z włoskowatymi liniami. */
.gl-methods { grid-column: 1 / -1; border-top: 1px solid var(--gl-line); }

.gl-m {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s4) clamp(1rem, 2.2vw, 2rem);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-bottom: 1px solid var(--gl-line);
}
@media (min-width: 900px) {
  .gl-m { grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: var(--s5) clamp(1.5rem, 3vw, 3rem); }
}
.gl-m h3 { font-size: var(--fs-h3); }

.gl-m__no {
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 70;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gl-accent);
  padding-top: .35em;
}

.gl-m__t h3 { margin-bottom: var(--s3); }
.gl-m__meta { display: flex; align-items: center; gap: .5rem; color: var(--gl-ink-3); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }

/* Kolumna metody ma ~454 px przy 1024 — wprowadzenie w rozmiarze tresci,
   zeby zdanie na pewno zmiescilo sie w jednej linii. */
.gl-m__b .gl-deck { margin-bottom: var(--s5); font-size: var(--fs-body); }
.gl-m__body { color: var(--gl-ink-2); font-size: 1.0625rem; }
.gl-m__body p + p { margin-top: 1em; }
.gl-m__src {
  display: block;
  margin-top: var(--s5);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--gl-ink-3);
}

.gl-m__d { margin-top: var(--s2); }
.gl-m__d:not([open]) .gl-m__body { display: none; }
.gl-m__sum {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px;
  /* Sekcja stoi na drugim papierze — tam jasny koral schodzi do 4,45:1 */
  font-size: var(--fs-sm); font-weight: 600; color: var(--gl-accent-deep);
  list-style: none; cursor: pointer;
}
.gl-m__sum::-webkit-details-marker { display: none; }
.gl-m__sum .gl-icon { transition: transform var(--dur-2) var(--ease); }
.gl-m__d[open] .gl-m__sum .gl-icon { transform: rotate(180deg); }

/* -------------------------------------------------------------- 12. O MNIE */
/* Ciemny blok. Zdjęcie po lewej wychodzi poza siatkę, po prawej cytat
   i kwalifikacje. Poprzedni układ czytał się jak zdjęcie regału z podpisem. */
.gl-about { background: var(--gl-ink); color: rgba(255, 255, 255, .78); }
.gl-about h2, .gl-about h3 { color: #fff; }
.gl-about .gl-head::before { background: rgba(255, 255, 255, .2); }
.gl-about .gl-label { color: var(--gl-sun); }
.gl-about .gl-head__no { color: rgba(255, 255, 255, .3); }

.gl-about__shot { grid-column: 1 / -1; }
.gl-about__t { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .gl-about__shot { grid-column: 1 / span 5; align-self: start; }
  .gl-about__t    { grid-column: 7 / span 6; }
}

.gl-about__shot figure { position: relative; margin: 0; }
.gl-about__shot img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.gl-about__shot figcaption {
  margin-top: var(--s4);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.gl-about__q {
  margin: var(--s8) 0 var(--s10);
  padding-left: var(--s6);
  border-left: 2px solid var(--gl-sun);
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 60;
  font-style: italic;
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.36;
  letter-spacing: -0.018em;
  color: #fff;
}

.gl-about__t .gl-prose { color: rgba(255, 255, 255, .78); }

.gl-creds { margin-top: var(--s10); display: grid; gap: var(--s3); }
@media (min-width: 620px) { .gl-creds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s6); } }
.gl-creds li {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: rgba(255, 255, 255, .86);
}
.gl-creds .gl-icon { flex: none; margin-top: .15em; color: var(--gl-sun); }

/* ------------------------------------------------------------- 13. CENNIK */
.gl-price { grid-column: 1 / -1; }
.gl-price__h { grid-column: 1 / -1; }

.gl-pg + .gl-pg { margin-top: var(--s12); }
.gl-pg__n {
  display: flex; align-items: center; gap: var(--s4);
  margin-bottom: var(--s2);
  font-family: var(--gl-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gl-ink-3);
}
.gl-pg__n::after { content: ""; flex: 1; height: 1px; background: var(--gl-line); }

/* Nazwa · doprecyzowanie · cena — trzy kolumny wypełniają szerokość
   zamiast zostawiać pustkę między nazwą a kwotą. */
.gl-p {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2) clamp(1.5rem, 3vw, 3rem);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--gl-line-2);
}
@media (min-width: 620px) { .gl-p { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; } }
@media (min-width: 960px) { .gl-p { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto; } }

.gl-p__n { display: block; font-family: var(--gl-serif); font-variation-settings: "SOFT" 40; font-size: var(--fs-item); font-weight: 500; line-height: 1.2; letter-spacing: -0.018em; }
.gl-p__d { font-size: var(--fs-sm); line-height: 1.5; color: var(--gl-ink-2); margin-top: var(--s2); }
@media (min-width: 960px) { .gl-p__d { margin-top: 0; } }
.gl-p__v { text-align: left; }
@media (min-width: 620px) { .gl-p__v { text-align: right; } }
.gl-p__a {
  display: block;
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 60;
  font-size: var(--fs-item);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gl-accent);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.gl-p__u { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--gl-ink-3); letter-spacing: .04em; }
.gl-price__note { margin-top: var(--s8); font-size: var(--fs-sm); color: var(--gl-ink-2); }

/* Zajawka cennika na stronie głównej — trzy pozycje i odsyłacz do podstrony */
.gl-teaser { display: grid; gap: 0; border-top: 1px solid var(--gl-line); }
@media (min-width: 760px) { .gl-teaser { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gl-teaser__i {
  padding: var(--s8) var(--s6) var(--s8) 0;
  border-bottom: 1px solid var(--gl-line);
}
@media (min-width: 760px) {
  .gl-teaser__i { border-bottom: 0; }
  .gl-teaser__i + .gl-teaser__i { border-left: 1px solid var(--gl-line); padding-left: var(--s8); }
}
.gl-teaser__a {
  display: block;
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 70;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--gl-accent);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s4);
}
.gl-teaser__n { display: block; font-size: var(--fs-item); font-weight: 500; line-height: 1.3; color: var(--gl-ink); }
.gl-teaser__u { display: block; margin-top: var(--s2); font-size: var(--fs-sm); color: var(--gl-ink-3); }

/* ------------------------------------------------------------ 14. GALERIA */
/* Pierwszy kadr duzy, reszta w kolumnach. Rowna masa malych zdjec czytala sie
   jak przypadkowy zbior, a nie jak pokazanie gabinetu. */
.gl-gal__lead { margin-bottom: clamp(.75rem, 1.6vw, 1.25rem); }
.gl-gal__lead .gl-gal__i { margin-bottom: 0; }
.gl-gal__lead img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

.gl-gal { columns: 2; column-gap: clamp(.75rem, 1.6vw, 1.25rem); }
@media (min-width: 760px)  { .gl-gal { columns: 3; } }
@media (min-width: 1180px) { .gl-gal { columns: 4; } }

.gl-gal__i {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 clamp(.75rem, 1.6vw, 1.25rem);
  padding: 0; border: 0;
  background: var(--gl-mint);
  overflow: hidden;
  cursor: zoom-in;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  line-height: 0;
}
.gl-gal__i img { width: 100%; height: auto; transition: transform var(--dur-3) var(--ease); }
.gl-gal__i:hover img { transform: scale(1.04); }
.gl-gal__i::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,59,69,0) 55%, rgba(11,59,69,.4) 100%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-2);
  pointer-events: none;
}
.gl-gal__i:hover::after { opacity: 1; }
.gl-gal__i::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(16, 31, 36, .07);
  pointer-events: none;
  z-index: 2;
}

.gl-lb {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: var(--s4);
  background: rgba(11, 59, 69, .95);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease-2), visibility 0s linear var(--dur-2);
}
.gl-lb.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease-2), visibility 0s; }
.gl-lb img { max-width: min(96vw, 1180px); max-height: 86vh; width: auto; }
.gl-lb__x, .gl-lb__nav {
  position: absolute; display: grid; place-items: center;
  width: 52px; height: 52px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #fff; border-radius: 4px;
  transition: background-color var(--dur-1) var(--ease-2);
}
.gl-lb__x:hover, .gl-lb__nav:hover { background: rgba(255, 255, 255, .24); }
.gl-lb__x { top: var(--s4); right: var(--s4); }
.gl-lb__nav--p { left: var(--s4); top: 50%; transform: translateY(-50%) rotate(90deg); }
.gl-lb__nav--n { right: var(--s4); top: 50%; transform: translateY(-50%) rotate(-90deg); }
.gl-lb__c { position: absolute; bottom: var(--s5); left: 50%; transform: translateX(-50%); font-size: var(--fs-sm); letter-spacing: .12em; color: rgba(255, 255, 255, .75); }

/* ----------------------------------------------------------------- 15. FAQ */
.gl-faq__h { grid-column: 1 / -1; }
.gl-faq__l { grid-column: 1 / -1; }

.gl-q { border-bottom: 1px solid var(--gl-line); }
.gl-q:first-child { border-top: 1px solid var(--gl-line); }
.gl-q__n {
  flex: none;
  width: 2.25rem;
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 70;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--gl-accent-deep);   /* na mincie jasny koral daje 4,28:1 */
  padding-top: .18em;
}
.gl-q__s {
  display: flex; align-items: flex-start; gap: var(--s4);
  padding: var(--s5) 0;
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 40;
  font-size: var(--fs-item);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.018em;
  cursor: pointer; list-style: none;
  transition: color var(--dur-1) var(--ease-2);
}
.gl-q__s::-webkit-details-marker { display: none; }
.gl-q__s:hover { color: var(--gl-accent); }
.gl-q__i { flex: none; margin-left: auto; margin-top: .3em; color: var(--gl-accent); transition: transform var(--dur-2) var(--ease); }
.gl-q[open] .gl-q__i { transform: rotate(45deg); }
.gl-q__a { padding: 0 0 var(--s6) calc(2.25rem + var(--s4)); color: var(--gl-ink-2); }
.gl-q:not([open]) .gl-q__a { display: none; }

/* ------------------------------------------------------------- 16. KONTAKT */
.gl-ct__h { grid-column: 1 / -1; }
.gl-ct__d { grid-column: 1 / -1; }
.gl-ct__f { grid-column: 1 / -1; }
@media (min-width: 960px) {
  .gl-ct__d { grid-column: 1 / span 6; }
  .gl-ct__f { grid-column: 8 / span 5; }
}

.gl-tel {
  display: inline-block;
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 60;
  font-size: var(--fs-mega);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, .25);
  padding-bottom: .08em;
  transition: border-color var(--dur-1) var(--ease-2), color var(--dur-1) var(--ease-2);
}
.gl-tel:hover { color: var(--gl-sun); border-bottom-color: var(--gl-sun); }

.gl-ct__rows { margin-top: var(--s10); border-top: 1px solid rgba(255, 255, 255, .16); }
/* Na wąskim ekranie etykieta nad wartością — układ dwukolumnowy
   z niełamliwym adresem e-mail rozpychał stronę o kilka pikseli. */
.gl-ct__row { display: grid; gap: var(--s2); padding: var(--s4) 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
@media (min-width: 480px) { .gl-ct__row { grid-template-columns: 8rem minmax(0, 1fr); gap: var(--s4); align-items: baseline; } }
.gl-ct__k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.gl-ct__v { color: #fff; text-decoration: none; font-size: 1.0625rem; overflow-wrap: anywhere; }
a.gl-ct__v:hover { color: var(--gl-sun); }

/* Wysokość, nie aspect-ratio: przy aspect-ratio 21/9 razem z min-height
   przeglądarka wyliczała SZEROKOŚĆ z wysokości i mapa wychodziła
   na 672 px w oknie 390 px, dając poziomy scroll. */
.gl-map {
  grid-column: 1 / -1;
  margin-top: var(--s6);
  border: 1px solid rgba(255, 255, 255, .16);
  height: clamp(16rem, 34vw, 26rem);
}
.gl-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.2) contrast(1.05); }

.gl-form { background: var(--gl-paper); padding: clamp(1.5rem, 4vw, 2.75rem); color: var(--gl-ink); }
.gl-form__r { margin-bottom: var(--s5); }
.gl-form__r--2 { display: grid; gap: var(--s5); }
@media (min-width: 560px) { .gl-form__r--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gl-form label { display: block; margin-bottom: var(--s2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gl-ink-2); }
.gl-form label .req { color: var(--gl-accent); }

.gl-form input[type="text"], .gl-form input[type="email"], .gl-form input[type="tel"], .gl-form textarea {
  width: 100%; min-height: 52px;
  padding: .75rem 0;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--gl-line);
  border-radius: 0;
  font-size: 1.0625rem; color: var(--gl-ink);
  transition: border-color var(--dur-1) var(--ease-2);
}
.gl-form textarea { min-height: 120px; resize: vertical; line-height: 1.55; }
.gl-form input:hover, .gl-form textarea:hover { border-bottom-color: var(--gl-ink-3); }
.gl-form input:focus, .gl-form textarea:focus { outline: none; border-bottom-color: var(--gl-accent); border-bottom-width: 2px; }
.gl-form input::placeholder, .gl-form textarea::placeholder { color: var(--gl-ink-3); }

.gl-form__c { display: flex; gap: var(--s3); align-items: flex-start; }
.gl-form__c input { width: 22px; height: 22px; margin: 2px 0 0; flex: none; accent-color: var(--gl-accent); }
.gl-form__c label { font-weight: 400; font-size: var(--fs-sm); letter-spacing: 0; text-transform: none; margin: 0; color: var(--gl-ink-2); line-height: 1.5; }

.gl-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gl-form__m { margin-top: var(--s5); padding: var(--s4); font-size: var(--fs-sm); line-height: 1.5; display: none; }
.gl-form__m.is-ok  { display: block; background: #E7F1EB; color: var(--gl-success); border-left: 3px solid var(--gl-success); }
.gl-form__m.is-err { display: block; background: #F9EAE8; color: var(--gl-error); border-left: 3px solid var(--gl-error); }
.gl-form button[type="submit"] { margin-top: var(--s6); }
.gl-form button[disabled] { opacity: .6; cursor: progress; }

/* -------------------------------------------------------------- 17. STOPKA */
.gl-footer { background: var(--gl-ink); color: rgba(255, 255, 255, .62); padding-block: 0 var(--s8); font-size: var(--fs-sm); }

/* Pas kontaktowy — najważniejsze dane zanim ktokolwiek zacznie czytać stopkę */
.gl-fcta {
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  padding-block: var(--s12);
  margin-bottom: var(--sec-sm);
}
.gl-fcta__g { display: grid; gap: var(--s8); }
@media (min-width: 860px) { .gl-fcta__g { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s10); } }
.gl-fcta__i { display: flex; gap: var(--s4); align-items: flex-start; }
.gl-fcta__ico {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 3px;
  color: var(--gl-sun);
}
.gl-fcta__k { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-bottom: var(--s2); }
.gl-fcta__v {
  display: block;
  font-family: var(--gl-serif);
  font-variation-settings: "SOFT" 60;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}
a.gl-fcta__v:hover { color: var(--gl-sun); }
.gl-fcta__s { display: block; margin-top: var(--s2); font-size: var(--fs-sm); color: rgba(255, 255, 255, .55); }
.gl-footer h2 { color: #fff; }
.gl-footer__b { grid-column: 1 / -1; }
.gl-footer__n { grid-column: 1 / -1; }
.gl-footer__c { grid-column: 1 / -1; }
@media (min-width: 760px) {
  .gl-footer__b { grid-column: 1 / span 5; }
  .gl-footer__n { grid-column: 7 / span 3; }
  .gl-footer__c { grid-column: 10 / span 3; }
}
.gl-footer__b img { height: 66px; width: auto; margin-bottom: var(--s6); }
.gl-footer__t { font-size: var(--fs-label); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .42); margin-bottom: var(--s5); }
.gl-footer ul { display: grid; gap: var(--s3); }
.gl-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.gl-footer a:hover { color: var(--gl-sun); }
.gl-footer__soc { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 4px; color: #fff; margin-top: var(--s6); }
.gl-footer__soc:hover { background: var(--gl-accent); border-color: var(--gl-accent); }
.gl-footer__bar {
  margin-top: var(--s16); padding-top: var(--s6);
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s8); justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255, 255, 255, .45);
}

/* ------------------------------------------------- 18. TELEFON I CIASTECZKA */
/* z-index ponad paskiem ciasteczek (160) — inaczej pasek, mimo zostawionego
   marginesu, przechwytuje tapnięcia w słuchawkę */
.gl-call {
  position: fixed; right: 16px; bottom: 16px; z-index: 170;
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--gl-accent); color: #fff;
  box-shadow: 0 10px 24px -10px rgba(16, 31, 36, .8);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.gl-call.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s; }
.gl-call:hover { background: var(--gl-accent-deep); color: #fff; }
/* Puls nie łapie kliknięć — inaczej blokuje sąsiednie elementy */
.gl-call::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--gl-accent); opacity: .4; pointer-events: none; z-index: -1;
  animation: gl-pulse 2.8s var(--ease-2) infinite;
}
@keyframes gl-pulse { 0% { transform: scale(1); opacity: .4; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gl-call::before { animation: none; } }
@media (min-width: 1024px) { .gl-call { display: none; } }

/* Karta w rogu zamiast belki przez cały ekran. Belka na dole przykrywala
   tresc i wygladala jak baner reklamowy. */
.gl-cookies {
  position: fixed;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  z-index: 160;
  display: grid;
  gap: var(--s4);
  padding: var(--s5);
  background: var(--gl-ink);
  color: rgba(255, 255, 255, .82);
  border-radius: 6px;
  box-shadow: 0 24px 48px -20px rgba(16, 31, 36, .7);
  font-size: var(--fs-sm);
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.gl-cookies.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s; }
.gl-cookies p { margin: 0; }
.gl-cookies strong { display: block; color: #fff; font-family: var(--gl-serif); font-variation-settings: "SOFT" 50; font-size: var(--fs-item); font-weight: 600; margin-bottom: var(--s2); }
.gl-cookies a { color: var(--gl-sun); }
.gl-cookies__ok {
  min-height: 44px; padding: .55rem 1.5rem;
  background: var(--gl-sun); color: var(--gl-ink);
  border: 0; border-radius: 4px; font-weight: 700; font-size: var(--fs-sm);
  justify-self: start;
}
.gl-cookies__ok:hover { background: #fff; }

@media (min-width: 640px) {
  .gl-cookies {
    left: auto;
    right: var(--s6);
    bottom: var(--s6);
    width: min(26rem, calc(100vw - 3rem));
    padding: var(--s6);
  }
}
@media (max-width: 1023px) {
  /* miejsce na słuchawkę w prawym dolnym rogu */
  .gl-cookies { bottom: calc(var(--s4) + 74px); }
}

/* --------------------------------------------------------------- 19. RUCH */
.gl-a { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease); }
.gl-a.is-in { opacity: 1; transform: none; }
.gl-a--1 { transition-delay: 70ms; }
.gl-a--2 { transition-delay: 140ms; }
.gl-a--3 { transition-delay: 210ms; }
.gl-a--4 { transition-delay: 280ms; }

.gl-e { opacity: 0; transform: translateY(16px); animation: gl-in var(--dur-3) var(--ease) forwards; }
.gl-e--1 { animation-delay: 40ms; }
.gl-e--2 { animation-delay: 130ms; }
.gl-e--3 { animation-delay: 220ms; }
.gl-e--4 { animation-delay: 310ms; }
.gl-e--5 { animation-delay: 400ms; }
@keyframes gl-in { to { opacity: 1; transform: none; } }

/* Kafle sylabowe wskakują pojedynczo — jedyna „ozdobna” animacja na stronie */
.gl-hero__syls .gl-syl { opacity: 0; transform: translateY(10px) rotate(-4deg); animation: gl-syl var(--dur-3) var(--ease) forwards; }
.gl-hero__syls .gl-syl:nth-child(1) { animation-delay: 120ms; }
.gl-hero__syls .gl-syl:nth-child(2) { animation-delay: 220ms; }
.gl-hero__syls .gl-syl:nth-child(3) { animation-delay: 320ms; }
.gl-hero__syls .gl-syl:nth-child(4) { animation-delay: 420ms; }
@keyframes gl-syl { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .gl-a, .gl-e, .gl-hero__syls .gl-syl { opacity: 1; transform: none; animation: none; }
}

/* ----------------------------------------------------- 20. NAGŁÓWEK PODSTRON */
.gl-ph { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); border-bottom: 1px solid var(--gl-line); }
.gl-ph__t { grid-column: 1 / -1; }

.gl-ph h1 { margin-block: var(--s5) var(--s6); }
.gl-crumbs { font-size: var(--fs-xs); color: var(--gl-ink-3); letter-spacing: .06em; }
.gl-crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.gl-crumbs a { color: var(--gl-ink-3); text-decoration: none; }
.gl-crumbs a:hover { color: var(--gl-accent); }
.gl-crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--gl-line); }

/* ----------------------------------------------------------------- 21. CTA */
.gl-cta { background: var(--gl-primary); color: #fff; }
.gl-cta__t { grid-column: 1 / -1; }
.gl-cta__a { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
@media (min-width: 900px) {
  .gl-cta__t { grid-column: 1 / span 7; }
  .gl-cta__a { grid-column: 9 / span 4; justify-content: flex-end; align-self: center; }
}
.gl-cta h2 { color: #fff; margin-bottom: var(--s4); }
.gl-cta p { color: rgba(255, 255, 255, .78); }

/* ------------------------------------------------------------ 22. TREŚĆ WPISU */
.gl-prose { grid-column: 1 / -1; font-size: var(--fs-body); line-height: 1.72; }

.gl-prose > * + * { margin-top: 1.2em; }
.gl-prose h2 { margin-top: 2em; font-size: var(--fs-h3); }
.gl-prose h3 { margin-top: 1.6em; font-size: var(--fs-item); }
.gl-prose ul, .gl-prose ol { padding-left: 1.3rem; display: grid; gap: .5rem; list-style: disc; }
.gl-prose ol { list-style: decimal; }
.gl-prose li::marker { color: var(--gl-accent); }
.gl-prose a { font-weight: 500; }

/* ----------------------------------------------------------------- 23. 404 */
.gl-404 { min-height: 66vh; display: grid; place-items: center; text-align: center; padding-block: var(--sec-md); }

/* ------------------------------------------------------------ 24. NARZĘDZIA */
.gl-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media print {
  .gl-header, .gl-mobile, .gl-call, .gl-cookies, .gl-cta, .gl-lb, .gl-burger { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .gl-sec { padding-block: 1rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}