/* ============================================================================
   style.css, mgr Justyna Łobejko-Jaszczerska
   Kierunek estetyczny „Papier i skala" (DESIGN.md).
   Zawiera: design tokeny, atmosferę tła, szynę skali, header/szufladę,
   komponenty (przyciski, formularz, indeks oferty, figura 0 do 10, chipy,
   kartka kontaktowa, baner cookies) oraz kilka klas pomocniczych (siatka
   i odstępy) na końcu pliku. Bez zewnętrznych frameworków CSS.
   ========================================================================== */

/* ========================================================================
   1. TOKENY
   ======================================================================== */
:root{
  /* Paleta „błękit i terakota", wprowadzona po prośbie klientki o jaśniejsze tło
     (2026-10-20). Zastąpiła „maślane złoto". Wyprowadzona z jej sesji zdjęciowej:
     chłodne jasne wnętrza, biały marmur, błękitna koszula. Terakota jest tu
     przeciwwagą ciepła, żeby strona o diagnozie autyzmu nie czytała się klinicznie.
     Zmiana wariantu sprowadza się do podmiany tych pięciu wartości i odcieni
     pochodnych poniżej, reszta arkusza korzysta wyłącznie z ról semantycznych. */
  --brand-ink:   #2B3A4A;  /* atrament nocny */
  --brand-sky:   #8FA9BC;  /* błękit */
  --brand-clay:  #B66557;  /* terakota */
  --brand-sand:  #EADFD1;  /* piasek */
  --brand-white: #FCFCFB;  /* biel dzienna */

  /* odcienie pochodne */
  --c-ink:       #22303D;
  --c-ink-900:   #1E2A36;
  --c-ink-700:   #27394A;
  --c-muted:     #5A6B7A;
  --c-clay-800:  #9E5548;
  --c-clay-900:  #7A4A3E;
  --c-white-50:  #FFFFFF;
  --c-mist:      #EFF1F2;
  --c-blush-100: #F6E8E2;
  --c-sand-100:  #EADFD1;
  --c-sky-100:   #EAF0F4;
  --c-sky-200:   #C4D3DE;
  --c-line:      #E2E0DB;
  --c-line-ink:  rgba(34,48,61,.16);

  /* stany */
  --c-error:     #9B3A3A;
  --c-error-bg:  #F7E8E4;
  --c-success:   #2F6B52;

  /* role semantyczne */
  --surface-page:    var(--brand-white);
  --surface-raised:  var(--c-white-50);
  --surface-alt:     var(--c-mist);
  --surface-warm:    var(--c-blush-100);
  --surface-cool:    var(--c-sky-100);
  --surface-paper:   var(--c-sand-100);
  --surface-invert:  var(--c-ink-900);

  --text-primary:    var(--c-ink);
  --text-secondary:  var(--c-muted);
  --text-on-tint:    var(--c-ink-700);
  --text-invert:     var(--brand-white);
  --text-invert-2:   var(--c-sky-200);
  --text-accent:     var(--c-clay-800);
  --text-link:       var(--brand-ink);

  --action-bg:       var(--brand-ink);
  --action-bg-hover: var(--c-ink-900);
  --action-fg:       var(--c-white-50);
  --action-ghost-br: var(--brand-ink);

  --accent:          var(--brand-clay);   /* jeden akcent na całą stronę: cienkie linie, podkreślenia, ramki */
  --mark:            var(--accent);

  --border-hairline: var(--c-line);
  --focus-ring:      var(--c-ink);
  --focus-ring-inv:  var(--accent);

  /* typografia */
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.5rem, 1.60rem + 4.20vw, 5rem);
  --fs-h2:      clamp(2rem,  1.50rem + 2.20vw, 3.25rem);
  --fs-h3:      clamp(1.375rem, 1.20rem + 0.80vw, 1.75rem);
  --fs-h4:      clamp(1.125rem, 1.07rem + 0.28vw, 1.25rem);
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.40vw, 1.375rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.17vw, 1.125rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-display: 1.05;
  --lh-head:    1.18;
  --lh-lead:    1.55;
  --lh-body:    1.70;

  --tracking-display: -0.02em;
  --tracking-micro:    0.14em;

  /* odstępy */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px; --sp-11:160px;
  --gutter:    clamp(16px, 1rem + 2.4vw, 56px);
  --section-y: clamp(56px, 3rem + 5vw, 144px);
  --measure:   66ch;
  --header-h:  88px;
  --header-h-scrolled: 64px;

  /* promienie */
  --r-sm: 3px;
  --r-md: 4px;
  --r-photo: 112px 4px 4px 4px;

  /* cienie, „uniesiona kartka" */
  --sh-1: 0 1px 0 var(--c-line);
  --sh-2: 0 1px 0 var(--c-line), 0 12px 28px -18px rgba(30,42,54,.45);
  --sh-3: 0 1px 0 var(--c-line), 0 28px 56px -28px rgba(30,42,54,.55);

  /* czasy */
  --dur-micro:  150ms;
  --dur-ui:     220ms;
  --dur-reveal: 320ms;
  --dur-drawer: 260ms;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-in:    cubic-bezier(.55,.09,.68,.53);
}

/* ========================================================================
   2. BAZA
   ======================================================================== */
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  hyphens: auto;
}
html, body{ overflow-x: clip; }
body{
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
body > *{ position: relative; z-index: 2; }

/* rozlanie akwareli, czyste gradienty, bez filter:blur */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(70vw 48vh at 88% -6%,  rgba(143,169,188,.26), transparent 62%),
    radial-gradient(52vw 40vh at -8% 42%,  rgba(182,101,87,.18), transparent 64%);
}
/* ziarno papieru, feTurbulence jako data-URI, kafelek 180×180 */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  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='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.19 0 0 0 0 0.24 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:.035; mix-blend-mode:multiply;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  line-height: var(--lh-head);
  margin: 0;
  overflow-wrap: anywhere;
}
h1{ font-weight:600; font-size:var(--fs-display); line-height:var(--lh-display); letter-spacing:var(--tracking-display); text-wrap:balance; }
h2{ font-weight:600; font-size:var(--fs-h2); letter-spacing:-0.01em; text-wrap:balance; }
h3{ font-weight:500; font-size:var(--fs-h3); }
h4{ font-weight:500; font-size:var(--fs-h4); }
p{ margin:0; }
p + p{ margin-top: 1em; }
.prose > * + *{ margin-top: 1em; }
.prose{ max-width: var(--measure); }
.lead{ font-size:var(--fs-lead); line-height:var(--lh-lead); max-width: 58ch; }
.muted{ color: var(--text-secondary); }
.on-tint .muted{ color: var(--text-on-tint); }
.small{ font-size: var(--fs-small); }
.eyebrow{
  font-family: var(--font-body);
  font-weight:600; font-size:var(--fs-micro);
  letter-spacing:var(--tracking-micro); text-transform:uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.eyebrow::before{
  content:""; display:inline-block; width:18px; height:2px;
  background:var(--mark); vertical-align:middle; margin-right:12px;
}
.quote{ font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-h3); line-height: 1.35; }

a{ color: var(--text-link); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color var(--dur-micro) var(--ease); }
a:hover{ text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
strong{ font-weight: 600; }

/* fokus, nigdy outline:none bez zamiennika */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible{
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.on-invert :where(a, button, summary, input):focus-visible{ outline-color: var(--focus-ring-inv); }
:where(a,button,input,textarea,select,summary){ scroll-margin-top: calc(var(--header-h-scrolled) + 16px); }
section[id], [id][tabindex="-1"]{ scroll-margin-top: calc(var(--header-h-scrolled) + var(--sp-4)); }

img{ max-width:100%; height:auto; display:block; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ========================================================================
   3. UKŁAD, jeden kontener, wspólna oś wszystkich sekcji
   ======================================================================== */
.wrap{
  width: calc(100% - 2 * var(--gutter));
  max-width: 1240px;
  margin-inline: auto;
}
.section{ padding-block: var(--section-y); }
.band-alt{ background: var(--surface-alt); }
.band-warm{ background: var(--surface-warm); }
.band-cool{ background: var(--surface-cool); }
.band-invert{ background: var(--surface-invert); color: var(--text-invert); }
.band-invert .muted{ color: var(--text-invert-2); }
.band-invert a{ color: var(--text-invert); }
.band-invert .eyebrow{ color: var(--text-invert-2); }
.hairline{ border:0; border-top:1px solid var(--border-hairline); margin:0; }
.band-invert .hairline{ border-color: rgba(196,211,222,.22); }

/* ========================================================================
   4. PLACEHOLDERY {{DO_UZUPEŁNIENIA}}, mają rzucać się w oczy
   ======================================================================== */
.todo{
  font-family: var(--font-body);
  font-weight: 500;
  background: rgba(182,101,87,.24);
  border-bottom: 2px dotted var(--c-clay-900);
  color: var(--c-ink);
  padding: 0 .25em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.band-invert .todo{ background: rgba(182,101,87,.18); border-bottom-color: var(--accent); color: var(--brand-white); }

/* ========================================================================
   5. SKIP-LINK
   ======================================================================== */
.skip{
  position:fixed; top:16px; left:16px; z-index:100;
  background: var(--c-white-50); color: var(--c-ink-900);
  padding: 12px 18px; border-radius: var(--r-md); box-shadow: var(--sh-3);
  font-weight:600; text-decoration:none;
  transform: translateY(-200%); transition: transform var(--dur-ui) var(--ease);
}
.skip:focus-visible{ transform:none; }

/* ========================================================================
   7. HEADER + NAWIGACJA
   ======================================================================== */
.site-header{
  position: sticky; top:0; z-index:40;
  height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.site-header.is-scrolled{
  height: var(--header-h-scrolled);
  background: var(--c-white-50);
  border-bottom-color: var(--border-hairline);
}
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)){
  .site-header.is-scrolled{ background: rgba(252,252,251,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}
.site-header .wrap{ height:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-5); }
.brand{
  font-family: var(--font-display); font-weight:500; font-size:18px;
  color: var(--text-primary); text-decoration:none; line-height:1.2;
  padding-block: 10px; white-space: nowrap;
}
.brand:hover{ text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* Logotyp dwuliniowy: u gory nazwisko krojem display, pod nim deskryptor
   uslugowy krojem tekstowym. Rozroznienie robia dwa kroje z listy projektu
   (IBM Plex Sans, Inter) plus grubosc, rozmiar i kolor, zadnego trzeciego
   kroju. Oba wiersze trzymaja nowrap, wiec rozmiary sa skalowane clampem az
   do 320 px, zeby nazwisko nie weszlo pod burgera. */
.brand--lockup{
  display: flex; flex-direction: column; gap: 4px;
  padding-block: 10px;
}
.brand__name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.875rem, 0.55rem + 1.6vw, 1.1875rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__tag{
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(0.625rem, 0.5rem + 0.45vw, 0.75rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text-accent);
  white-space: nowrap;
}
.brand--lockup:hover{ text-decoration: none; }
.brand--lockup:hover .brand__name{
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.nav-desktop{ display:none; }
@media (min-width:1024px){ .nav-desktop{ display:flex; align-items:center; gap: 28px; } }
.nav-desktop a{
  position:relative; font-weight:500; font-size:15px; color: var(--text-primary);
  text-decoration:none; padding-block: 12px; white-space:nowrap;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:1px;
  background: var(--c-line-ink); transform: scaleX(0); transform-origin:left;
  transition: transform var(--dur-micro) var(--ease), background-color var(--dur-micro), height var(--dur-micro);
}
.nav-desktop a:hover::after, .nav-desktop a:focus-visible::after{ transform: scaleX(1); }
.nav-desktop a[aria-current="true"]{ color: var(--text-primary); }
.nav-desktop a[aria-current="true"]::after{ transform: scaleX(1); height:2px; background: var(--accent); }
/* Pasek ma zmieścić logo, linki i przycisk bez ścisku. Po dołożeniu sekcji
   ADOS-2 i cennika linków zrobiło się dziewięć, więc dzielimy je na trzy progi:
   tier 1 widoczny zawsze, tier 2 od 1280 px, tier 3 wyłącznie w szufladzie. */
@media (min-width:1024px) and (max-width:1279px){ .nav-desktop a[data-tier="2"]{ display:none; } }
.nav-desktop a[data-tier="3"]{ display:none; }
.site-header .nav-cta{ display:none; }
@media (min-width:1024px){ .site-header .nav-cta{ display:inline-flex; } }

/* hamburger 48×48 */
.burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border:0; background:transparent; cursor:pointer;
  border-radius: var(--r-sm); margin-right:-8px;
}
@media (min-width:1024px){ .burger{ display:none; } }
.burger span{ position:relative; display:block; width:22px; height:2px; background: var(--c-ink); transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui); }
.burger span::before, .burger span::after{ content:""; position:absolute; left:0; width:22px; height:2px; background: var(--c-ink); transition: transform var(--dur-ui) var(--ease), top var(--dur-ui) var(--ease); }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger[aria-expanded="true"] span{ background: transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform: rotate(-45deg); }

/* szuflada mobile, z prawej */
.drawer-backdrop{
  position:fixed; inset:0; z-index:50; background: rgba(30,42,54,.44);
  opacity:0; pointer-events:none; transition: opacity var(--dur-drawer) var(--ease);
}
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:51;
  width: min(85vw, 360px); background: var(--c-white-50);
  border-left: 2px solid var(--accent); box-shadow: var(--sh-3);
  display:flex; flex-direction:column;
  transform: translateX(100%); visibility:hidden;
  transition: transform var(--dur-drawer) var(--ease), visibility 0s linear var(--dur-drawer);
}
.drawer.is-open{ transform:none; visibility:visible; transition: transform var(--dur-drawer) var(--ease); }
.drawer-backdrop.is-open{ opacity:1; pointer-events:auto; }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; height: var(--header-h-scrolled); padding: 0 var(--sp-4) 0 var(--sp-5); border-bottom:1px solid var(--border-hairline); }
.drawer__close{ width:48px; height:48px; border:0; background:transparent; cursor:pointer; display:grid; place-items:center; border-radius:var(--r-sm); color: var(--c-ink); }
.drawer__nav{ flex:1; overflow-y:auto; padding-block: var(--sp-2); }
.drawer__nav a{
  position:relative; display:flex; align-items:center; min-height:56px;
  padding: 0 var(--sp-5); font-weight:500; font-size:20px; color: var(--text-primary);
  text-decoration:none; border-bottom:1px solid var(--border-hairline);
}
.drawer__nav a[aria-current="true"]::before{ content:""; position:absolute; left:0; top:50%; width:3px; height:24px; background: var(--accent); transform: translateY(-50%); }
.drawer__foot{ padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.drawer__foot .btn{ width:100%; }
body.drawer-open{ overflow:hidden; }

/* ========================================================================
   8. PRZYCISKI
   ======================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding: 0 28px; border-radius: var(--r-md);
  font-family: var(--font-body); font-weight:600; font-size:16px; line-height:1.2;
  text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition: background-color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease), color var(--dur-micro);
  box-sizing: border-box; white-space: nowrap;
}
.btn-primary{ background: var(--action-bg); color: var(--action-fg); border-color: var(--action-bg); }
.btn-primary:hover{ background: var(--action-bg-hover); border-color: var(--action-bg-hover); transform: translateY(-1px); box-shadow: var(--sh-2); color: var(--action-fg); }
.btn-primary:active{ transform:none; box-shadow:none; }
.btn-ghost{ background: transparent; color: var(--brand-ink); border-color: var(--action-ghost-br); }
.btn-ghost:hover{ background: rgba(43,58,74,.08); color: var(--brand-ink); }
.band-invert .btn-ghost{ color: var(--brand-white); border-color: var(--brand-white); }
.band-invert .btn-ghost:hover{ background: rgba(252,252,251,.1); }
.btn-text{
  display:inline; min-height:0; padding:0; border:0; background:none; border-radius:0;
  color: var(--text-link); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness:1px;
  font-weight:500; font-size: inherit; cursor:pointer; white-space: normal;
}
.btn-text:hover{ text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.btn[disabled], .btn[aria-busy="true"]{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-sm{ min-height:48px; padding: 0 22px; font-size:15px; }
.btn-nav{ min-height:44px; padding: 0 20px; font-size:15px; }

/* ========================================================================
   9. HERO, typografia nachodzi na portret
   ======================================================================== */
.hero{ position:relative; overflow:clip; padding-top: var(--sp-6); padding-bottom: var(--section-y); }
.hero__bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position: right center; opacity:.55; }
.hero__bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(90deg, var(--brand-white) 0%, rgba(252,252,251,.92) 34%, rgba(252,252,251,.35) 70%, rgba(252,252,251,0) 100%); }
.hero .wrap{ position:relative; z-index:1; }
.hero__grid{
  display:grid; gap: var(--sp-6);
  grid-template-areas: "portret" "tekst";
}
.hero__text{ grid-area: tekst; display:flex; flex-direction:column; gap: var(--sp-5); }
.hero__text h1{ margin-top: var(--sp-2); }
.hero__text .lead{ max-width: 52ch; }
.hero__support{ color: var(--text-secondary); }
.hero__cta{ display:flex; flex-wrap:wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.hero__cta .btn{ flex:1 1 auto; }
.hero__fig{ grid-area: portret; margin:0; position:relative; }
.hero__fig img{
  width:100%; height: 46vh; min-height: 280px; object-fit:cover; object-position: top center;
  border-bottom-left-radius: 72px; border-top-right-radius: var(--r-md);
}
@media (max-width:359px){ .hero__fig img{ height:40vh; } }
@media (min-width:1024px){
  .hero{ padding-top: var(--sp-7); padding-bottom: var(--sp-8); min-height: calc(100vh - var(--header-h)); display:flex; align-items:center; }
  .hero__grid{
    grid-template-columns: repeat(12, 1fr); gap: var(--sp-6); grid-template-areas: none;
    align-items:center;
  }
  .hero__text{ grid-area:auto; grid-column: 1 / span 7; grid-row:1; z-index:2; }
  /* nagłówek zostaje w swojej kolumnie. Wariant z nachodzeniem na portret
     (width 142% plus mix-blend-mode) zdjety 2026-10-23: tekst wchodzil na zdjecie. */
  .hero__text h1{ width: 100%; max-width:none; text-wrap: balance; }
  .hero__cta .btn{ flex: 0 0 auto; }
  .hero__fig{ grid-area:auto; grid-column: 8 / span 5; grid-row:1; z-index:1; }
  .hero__fig img{ height:auto; min-height:0; aspect-ratio: 3/4; max-height: 68vh; border-radius: var(--r-photo); border-bottom-left-radius:4px; object-position: center; }
}
@media (min-width:1440px){
  .hero__fig{ margin-right: -80px; }
}

/* ========================================================================
   10. O MNIE, lepka marginalia
   ======================================================================== */
.margo{ display:flex; flex-direction:column; gap: var(--sp-4); padding-bottom: var(--sp-5); border-bottom:1px solid var(--border-hairline); margin-bottom: var(--sp-6); }
.margo__name{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-h3); line-height:1.2; }
.margo__role{ color: var(--text-secondary); font-size: var(--fs-small); }
.margo__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--sp-3); }
.margo__list li{ padding-left: 20px; position:relative; font-size: var(--fs-small); line-height:1.5; }
.margo__list li::before{ content:""; position:absolute; left:0; top:.6em; width:10px; height:2px; background: var(--accent); }
.about__fig{ max-width: 360px; }
.about__fig img{ border-radius: var(--r-md) var(--r-md) 72px var(--r-md); }
.tsr__fig img{ border-radius: var(--r-md) var(--r-md) var(--r-md) 72px; }
@media (min-width:1024px){
  .margo{ position:sticky; top: calc(var(--header-h-scrolled) + var(--sp-6)); border:0; padding:0; margin:0; }
  /* O mnie: marginalia 1 do 3, tekst 4 do 9, pionowe zdjęcie 10 do 12 opuszczone i wysunięte w margines */
  #o-mnie .grid > aside{ grid-column: 1 / span 3; }
  .about__text{ grid-column: 4 / span 6; }
  .about__fig{ grid-column: 10 / span 3; max-width:none; margin-top: var(--sp-10) !important; margin-right: calc(-1 * var(--gutter)) !important; }
  /* TSR: zdjęcie dosunięte do dołu bloku i wychodzące poza prawą krawędź kolumny */
  .tsr__fig{ grid-column: 8 / span 5; align-self:end; margin-right: calc(-1 * var(--gutter)) !important; }
}

/* ========================================================================
   11. JAK PRACUJĘ, figura 0 do 10
   ======================================================================== */
.scale{ margin: var(--sp-7) 0 0; }
.scale__axis{ position:relative; height: 72px; }
.scale__line{ position:absolute; left:0; right:0; top:36px; height:1px; background: var(--c-ink); }
.scale__fill{
  position:absolute; top:35px; height:3px; left:20%; width:70%;
  background: var(--accent); transform: scaleX(0); transform-origin:left;
  transition: transform 900ms var(--ease) 200ms;
}
.scale.in-view .scale__fill{ transform: scaleX(1); }
.scale__ticks{ position:absolute; inset:0; list-style:none; margin:0; padding:0; }
.scale__ticks li{ position:absolute; top:36px; width:1px; height:12px; background: var(--c-ink); transform: translateX(-.5px); }
.scale__ticks li[data-major]{ height:20px; }
.scale__ticks li span{
  position:absolute; top:28px; left:50%; transform: translateX(-50%);
  font-family: var(--font-body); font-weight:300; font-size: 22px; line-height:1;
  font-variant-numeric: tabular-nums; color: var(--c-ink); letter-spacing: 0;
}
.scale__ticks li:not([data-major]) span{ display:none; }
.scale__notes{ display:flex; flex-direction:column; gap: var(--sp-6); margin-top: var(--sp-6); list-style:none; padding:0; }
.scale__note{ position:relative; padding-left: 28px; }
.scale__note::before{ content:""; position:absolute; left:0; top:.55em; width:16px; height:3px; background: var(--accent); }
.scale__note h3{ font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.scale__note p{ color: var(--text-secondary); max-width: 48ch; }
.scale__note .scale__pos{ display:block; font-family: var(--font-body); font-weight:600; font-size: var(--fs-micro); letter-spacing: var(--tracking-micro); color: var(--text-secondary); margin-bottom: var(--sp-2); font-variant-numeric: tabular-nums; }
@media (min-width:1024px){
  .scale__axis{ width: calc(100% * 10 / 12); }
  .scale__ticks li:not([data-major]) span{ display:block; font-size:16px; color: var(--c-muted); }
  .scale__notes{
    display:grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-6);
    margin-top: var(--sp-5);
  }
  .scale__note{ padding-left: 0; padding-top: var(--sp-7); }
  .scale__note::before{ left:0; top:0; width:1px; height: 40px; background: var(--accent); }
  .scale__note .scale__pos{ display:none; }   /* na desktopie pozycję niesie oś, nie etykieta */
  .scale__note:nth-child(1){ grid-column: 3 / span 3; }
  .scale__note:nth-child(2){ grid-column: 6 / span 3; }
  .scale__note:nth-child(3){ grid-column: 10 / span 3; }
}

/* ========================================================================
   12. W CZYM WSPIERAM, rozsunięta lista z nacięciami
   ======================================================================== */
.recog{ list-style:none; margin: var(--sp-7) 0 0; padding:0; display:grid; gap: var(--sp-6) var(--sp-8); }
.recog li{ padding-top: var(--sp-4); border-top: 1px solid var(--border-hairline); position:relative; }
.recog li::before{ content:""; position:absolute; left:0; top:-1px; width:28px; height:3px; background: var(--accent); }
.recog h3{ font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.recog p{ color: var(--text-secondary); max-width: 44ch; }
@media (min-width:768px){
  .recog{ grid-template-columns: 1fr 1fr; }
  .recog li:nth-child(even){ transform: translateY(var(--sp-7)); }
  .recog{ padding-bottom: var(--sp-7); }
}
@media (min-width:1024px){
  .recog{ grid-column: 1 / span 11; }
}
.recog-extra{ margin-top: var(--sp-7); padding: var(--sp-5) 0 0 var(--sp-5); border-left: 3px solid var(--accent); max-width: var(--measure); }

/* ========================================================================
   13. OBSZARY PRACY, indeks redakcyjny
   ======================================================================== */
.index{ margin-top: var(--sp-8); border-bottom: 1px solid var(--c-line-ink); }
.index details{ border-top: 1px solid var(--c-line-ink); }
.index summary{
  list-style:none; cursor:pointer; display:grid; gap: var(--sp-1) var(--sp-5);
  grid-template-columns: 1fr auto; align-items:start;
  padding: var(--sp-6) 0; min-height: 56px; box-sizing:border-box;
  transition: background-color var(--dur-micro);
}
.index summary::-webkit-details-marker{ display:none; }
.index summary:hover h3{ text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.index summary h3{ font-size: var(--fs-h3); grid-column:1; }
.index summary .index__desc{ margin-top: var(--sp-1); }
.index summary .index__desc{ grid-column:1; color: var(--text-secondary); font-size: 15px; max-width: 56ch; }
.index__plus{
  grid-column:2; grid-row: 1 / span 2; align-self:center;
  width:44px; height:44px; display:grid; place-items:center; position:relative; color: var(--brand-ink);
}
.index__plus::before, .index__plus::after{ content:""; position:absolute; background: currentColor; transition: transform var(--dur-ui) var(--ease); }
.index__plus::before{ width:18px; height:2px; }
.index__plus::after{ width:2px; height:18px; }
.index details[open] .index__plus::after{ transform: rotate(90deg); }
.index details[open] .index__plus::before{ transform: rotate(180deg); }
.index__body{ padding: var(--sp-2) 0 var(--sp-8); max-width: var(--measure); }
.index__body p + p{ margin-top: var(--sp-4); }
.index__for{ font-size: var(--fs-small); color: var(--text-on-tint); padding-left: var(--sp-4); border-left: 2px solid var(--accent); }
@media (min-width:1024px){
  .index summary{ grid-template-columns: 5fr 1fr 6fr auto; gap: var(--sp-6); align-items:baseline; }
  .index summary h3{ grid-column:1; }
  .index summary .index__desc{ grid-column:3; font-size: var(--fs-body); }
  .index__plus{ grid-column:4; grid-row:1; align-self:center; }
  .index__body{ margin-left: calc(100% * 6 / 12 + var(--sp-6) / 2); }
}
.index__cta{ margin-top: var(--sp-8); display:flex; flex-direction:column; gap: var(--sp-3); align-items:flex-start; }

/* ========================================================================
   14. DLA RODZICÓW, pasmo od cytatu, 60/40
   ======================================================================== */
.parents__quote{ font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 2vw, 2.75rem); line-height:1.25; max-width: 30ch; letter-spacing:-0.01em; }
.parents__cols{ display:grid; gap: var(--sp-7); margin-top: var(--sp-7); }
.parents__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--sp-4); }
.parents__list li{ position:relative; padding-left: 28px; color: var(--text-primary); }
.parents__list li::before{ content:""; position:absolute; left:0; top:.65em; width:14px; height:2px; background: var(--brand-clay); }
.parents__img{ margin: var(--sp-6) 0 0; }
.parents__img img{ border-radius: var(--r-md) 56px var(--r-md) var(--r-md); }
@media (min-width:1024px){
  .parents__cols{ grid-template-columns: 6fr 4fr; gap: var(--sp-9); }
  .parents__img{ margin-top: var(--sp-7); margin-right: calc(-1 * var(--gutter)); }
}

/* ========================================================================
   PASMA ODDECHOWE I ZDJĘCIE W LIŚCIE, ciche, bez tekstu, pełna szerokość
   ======================================================================== */
.break{ height: clamp(150px, 20vw, 300px); overflow:hidden; background: var(--surface-alt); }
.break--2{ height: clamp(130px, 15vw, 230px); }
.break picture{ display:block; height:100%; }
.break img{ width:100%; height:100%; object-fit:cover; }
.recog-fig{ margin: var(--sp-6) 0 0; }
.recog-fig img{ width:100%; aspect-ratio: 16/9; object-fit:cover; border-radius: var(--r-md); }
.recog--2{ margin-top: var(--sp-6); }
@media (min-width:1024px){
  .recog-fig{ margin: var(--sp-6) calc(-1 * var(--gutter)) 0 auto; width: calc(100% * 9 / 12 + var(--gutter)); }
  .recog-fig img{ aspect-ratio: 2/1; border-radius: var(--r-md) var(--r-md) var(--r-md) 96px; }
}

/* ========================================================================
   15. KWALIFIKACJE, ciemne pasmo, gęste chipy
   ======================================================================== */
.edu{ list-style:none; margin: var(--sp-5) 0 0; padding:0; }
.edu li{ padding: var(--sp-4) 0; border-top: 1px solid rgba(196,211,222,.22); display:grid; gap: 2px; }
.edu li:last-child{ border-bottom: 1px solid rgba(196,211,222,.22); }
.edu b{ font-weight:600; color: var(--brand-white); }
.edu span{ color: var(--text-invert-2); font-size: var(--fs-small); }
.qual-group{ padding-top: var(--sp-5); }
.qual-group + .qual-group{ margin-top: var(--sp-5); border-top: 1px solid rgba(196,211,222,.22); }
.qual-group h4{ display:flex; align-items:baseline; gap: var(--sp-3); flex-wrap:wrap; }
.qual-group h4 small{ font-family: var(--font-body); font-size: var(--fs-micro); font-weight:600; letter-spacing: var(--tracking-micro); text-transform:uppercase; color: var(--accent); font-variant-numeric: tabular-nums; }
.qual-group > p{ color: var(--text-invert-2); margin-top: var(--sp-2); font-size: 15px; }
.chips{ list-style:none; margin: var(--sp-4) 0 0; padding:0; display:flex; flex-wrap:wrap; gap: 8px; }
.chips li{
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 7px 12px; font-size: 14px; font-weight:500; line-height:1.3;
  color: var(--brand-white);
}
@media (max-width:359px){ .chips li{ font-size:12px; padding: 6px 10px; } }
@media (max-width:767px){ .chips li{ font-size:13px; } }
.qual-expand{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-ui) var(--ease); }
.qual-expand > div{ overflow:hidden; }
.qual-expand.is-open{ grid-template-rows: 1fr; }
.qual-toggle{ margin-top: var(--sp-6); }

/* ========================================================================
   16. KONTAKT, formularz + przekrzywiona kartka
   ======================================================================== */
.contact__grid{ display:grid; gap: var(--sp-7); margin-top: var(--sp-7); }
@media (min-width:1024px){
  .contact__grid{ grid-template-columns: repeat(12, 1fr); gap: var(--sp-6); align-items:start; }
  .contact__form{ grid-column: 1 / span 7; }
  .contact__aside{ grid-column: 9 / span 4; }
}
.card{
  background: var(--surface-paper); border-radius: var(--r-md); box-shadow: var(--sh-2);
  padding: var(--sp-6); position:relative;
}
.card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--accent); border-radius: var(--r-md) 0 0 var(--r-md); }
@media (min-width:1024px){ .card{ transform: rotate(-.6deg); } }
.card dl{ margin:0; display:grid; gap: var(--sp-4); }
.card dt{ font-family: var(--font-body); font-weight:600; font-size: var(--fs-micro); letter-spacing: var(--tracking-micro); text-transform:uppercase; color: var(--text-on-tint); }
.card dd{ margin: 4px 0 0; overflow-wrap:anywhere; }
.contact__img{ margin: 0 0 var(--sp-5); }
.contact__img img{ border-radius: var(--r-md); }

.form{ display:grid; gap: var(--sp-5); }
.form__row{ display:grid; gap: var(--sp-5); }
@media (min-width:768px){ .form__row--2{ grid-template-columns: 1fr 1fr; } }
.field{ display:grid; gap: 6px; }
.field label{ font-weight:500; color: var(--text-secondary); font-size: 15px; transition: color var(--dur-micro); }
.field:has(:not(:placeholder-shown):valid) label, .field:has(select:valid:not([value=""])) label{ color: var(--text-primary); }
.field .hint{ font-size: var(--fs-small); color: var(--text-secondary); }
.input{
  display:block; width:100%; box-sizing:border-box;
  background: var(--c-white-50); border: 1.5px solid var(--c-line); border-radius: var(--r-sm);
  min-height: 52px; padding: 14px 16px; font-family: var(--font-body); font-size: 16px; color: var(--text-primary);
  transition: border-color var(--dur-micro), background-color var(--dur-micro);
}
.input::placeholder{ color: var(--c-muted); opacity:1; }
.input:hover{ border-color: var(--c-muted); }
.input:focus-visible{ border-color: var(--brand-ink); outline-offset: 2px; }
textarea.input{ resize: vertical; min-height: 168px; line-height:1.5; }
select.input{
  appearance:none; -webkit-appearance:none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23223A3F' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center;
}
.field.is-invalid .input{ border: 2px solid var(--c-error); background: var(--c-error-bg); }
.field__error{ display:none; align-items:flex-start; gap: 6px; font-size: 14px; font-weight:500; color: var(--c-error); line-height:1.4; }
.field__error svg{ flex: 0 0 16px; margin-top: 2px; }
.field.is-invalid .field__error{ display:flex; }
.counter{ font-size: var(--fs-small); color: var(--text-secondary); text-align:right; font-variant-numeric: tabular-nums; min-height: 1.3em; }
.check{ display:grid; grid-template-columns: 24px 1fr; gap: var(--sp-3); align-items:start; cursor:pointer; min-height:44px; }
.check input{ width:22px; height:22px; margin: 2px 0 0; accent-color: var(--brand-ink); cursor:pointer; }
.check span{ font-size: 15px; line-height: 1.5; }
.field.is-invalid .check{ padding: 10px; margin: -10px; border-radius: var(--r-sm); background: var(--c-error-bg); }

/* honeypot, NIGDY display:none ani visibility:hidden */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

.form__summary{ display:none; padding: var(--sp-4) var(--sp-5); background: var(--c-error-bg); border-left: 3px solid var(--c-error); border-radius: var(--r-sm); }
.form__summary.is-visible{ display:block; }
.form__summary ul{ margin:0; padding-left: 1.2em; display:grid; gap: 4px; }
.form__summary a{ color: var(--c-error); font-weight:500; }
.form__success{ display:none; padding: var(--sp-6); background: var(--surface-cool); border-left: 4px solid var(--accent); border-radius: var(--r-md); }
.form__success.is-visible{ display:block; }
.form__success h3{ margin-bottom: var(--sp-3); }
.form__success p{ max-width: 52ch; }
.form__footnote{ font-size: 13px; color: var(--text-on-tint); line-height:1.55; max-width: var(--measure); }
.crisis{ margin-top: var(--sp-7); padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6); border: 1.5px solid var(--c-clay-800); border-radius: var(--r-md); background: var(--c-white-50); max-width: var(--measure); position:relative; }
.crisis::before{ content:""; position:absolute; left:-1.5px; top:-1.5px; bottom:-1.5px; width:6px; background: var(--c-clay-800); border-radius: var(--r-md) 0 0 var(--r-md); }
.crisis ul{ margin: var(--sp-3) 0 0; padding-left: 1.2em; display:grid; gap: 6px; }
.crisis strong{ color: var(--text-primary); }
.crisis a{ font-weight:600; }

/* ========================================================================
   17. STOPKA, 5/4/3
   ======================================================================== */
.footer{ padding-block: var(--sp-8) var(--sp-6); }
.footer__grid{ display:grid; gap: var(--sp-6); }
@media (min-width:768px){ .footer__grid{ grid-template-columns: 5fr 4fr 3fr; gap: var(--sp-7); } }
.footer h2{ font-size: var(--fs-h3); font-weight:500; }
.footer__role{ color: var(--text-invert-2); font-size: var(--fs-small); margin-top: 6px; }
/* Deskryptor z logotypu, powtórzony w stopce. Na ciemnym paśmie idzie bielnią,
   nie terakotą: #9E5548 na #1E2A36 daje 2,73:1 i nie przechodzi AA dla małego
   tekstu. Hierarchię trzyma kolejność i krój (Inter wobec IBM Plex Sans w h2). */
.footer__tag{
  font-family: var(--font-body); font-weight:500; font-size: var(--fs-small);
  letter-spacing: 0.02em; color: var(--text-invert); margin-top: 6px;
}
.footer__tag + .footer__role{ margin-top: 2px; }
.footer__list{ list-style:none; margin:0; padding:0; display:grid; gap: var(--sp-2); }
.footer__list a{ display:inline-block; padding-block: 6px; text-decoration:none; }
.footer__list a:hover{ text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness:2px; }
.footer__bottom{ margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid rgba(196,211,222,.22); display:grid; gap: var(--sp-3); font-size: var(--fs-small); color: var(--text-invert-2); }
.footer__bottom .legal{ display:flex; flex-wrap:wrap; gap: 6px var(--sp-4); }
.footer__bottom a{ text-decoration:none; padding-block: 6px; display:inline-block; }
.footer__bottom a:hover{ text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness:2px; }
.footer__bottom button{ font: inherit; color: inherit; background:none; border:0; padding: 6px 0; cursor:pointer; }
.footer__bottom button:hover{ text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness:2px; }
.footer__disclaimer{ font-size: 13px; max-width: 70ch; }

/* ========================================================================
   18. BANER COOKIES, kartka w lewym dolnym rogu
   ======================================================================== */
.cookies{
  position:fixed; left: var(--gutter); bottom: var(--gutter); z-index:60;
  width: calc(100% - 2 * var(--gutter)); max-width: 420px; box-sizing:border-box;
  background: var(--c-white-50); border-radius: var(--r-md); box-shadow: var(--sh-3);
  border-left: 4px solid var(--accent); padding: var(--sp-5);
  opacity:0; transform: translateY(16px); visibility:hidden;
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), visibility 0s linear var(--dur-ui);
}
.cookies.is-visible{ opacity:1; transform:none; visibility:visible; transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); }
@media (max-width:359px){ .cookies{ left:12px; bottom:12px; width: calc(100% - 24px); } }
/* Na komputerze kartka siedzi w prawym dolnym rogu: lewy dół zajmują przyciski hero
   i nie wolno ich zasłaniać przy pierwszej wizycie (jedyna ścieżka konwersji). */
@media (min-width:1024px){ .cookies{ left:auto; right: var(--gutter); } }
/* Na wąskich ekranach kartka jest zwarta, żeby zostawiała treść. */
@media (max-width:479px){
  .cookies{ padding: var(--sp-4); }
  .cookies__icon{ margin-bottom: var(--sp-2); }
  .cookies h2{ font-size:18px; }
  .cookies p{ font-size:14px; margin-top:4px; }
  .cookies__actions{ gap:8px; margin-top: var(--sp-3); grid-template-columns: 1fr 1fr; }
  .cookies__actions .btn{ min-height:44px; padding:0 8px; font-size:14px; }
  .cookies__more{ margin-top: var(--sp-2); }
}
.cookies__icon{ display:flex; gap:4px; align-items:flex-end; height:10px; margin-bottom: var(--sp-3); }
.cookies__icon i{ display:block; width:2px; background: var(--accent); }
.cookies__icon i:nth-child(1){ height:6px; } .cookies__icon i:nth-child(2){ height:10px; } .cookies__icon i:nth-child(3){ height:6px; }
.cookies h2{ font-size: 20px; font-weight:500; }
.cookies p{ font-size: 15px; color: var(--c-muted); line-height:1.5; margin-top: var(--sp-2); }
.cookies p a{ color: var(--brand-ink); }
.cookies__actions{ display:grid; gap: 12px; margin-top: var(--sp-4); }
@media (min-width:420px){ .cookies__actions{ grid-template-columns: 1fr 1fr; } }
.cookies__actions .btn{ min-height:48px; padding: 0 16px; font-size:15px; white-space:normal; }
.cookies__more{ margin-top: var(--sp-3); font-size:14px; }
.cookies__panel{ display:grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-ui) var(--ease); }
.cookies__panel > div{ overflow:hidden; }
.cookies__panel.is-open{ grid-template-rows: 1fr; }
.cookies__panel ul{ list-style:none; margin: var(--sp-4) 0 0; padding:0; border-top: 1px solid var(--border-hairline); }
.cookies__panel li{ display:grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items:center; padding: var(--sp-3) 0; border-bottom: 1px solid var(--border-hairline); min-height: 48px; }
.cookies__panel li b{ display:block; font-weight:600; font-size:15px; }
.cookies__panel li p{ margin:2px 0 0; font-size: 13px; }
.cookies__panel .state{ font-size: 12px; font-weight:600; letter-spacing: .08em; text-transform:uppercase; color: var(--c-muted); display:block; text-align:right; margin-top:4px; }
.switch{ position:relative; width:44px; height:26px; border-radius: 999px; border:0; cursor:pointer; background: var(--c-line); padding:0; display:block; transition: background-color var(--dur-micro); }
.switch::before{ content:""; position:absolute; inset:-11px -2px; }  /* cel dotykowy 48×48 */
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background: var(--c-white-50); box-shadow: inset 0 0 0 1px var(--c-muted); transition: transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro); }
.switch[aria-checked="true"]{ background: var(--brand-ink); }
.switch[aria-checked="true"]::after{ transform: translateX(18px); box-shadow:none; }
.switch[disabled]{ cursor:not-allowed; opacity:.75; }
.cookies__save{ margin-top: var(--sp-4); width:100%; }

/* ========================================================================
   19. PODSTRONY PRAWNE
   ======================================================================== */
.legal-page{ padding-block: var(--sp-7) var(--section-y); }
.legal-page .doc{ max-width: 72ch; }
.legal-page h1{ font-size: var(--fs-h2); }
.legal-page h2{ font-size: var(--fs-h3); padding-top: var(--sp-5); border-top: 1px solid var(--border-hairline); margin-top: var(--sp-7); }
.legal-page h2 + *{ margin-top: var(--sp-4); }
.legal-page .doc > p + p, .legal-page .doc > ul{ margin-top: 1em; }
.legal-page ul{ padding-left: 1.2em; display:grid; gap: 6px; }
.toc{ margin-top: var(--sp-6); padding: var(--sp-5); background: var(--surface-raised); border-left: 3px solid var(--accent); border-radius: var(--r-sm); }
.toc ol{ margin: var(--sp-3) 0 0; padding-left: 1.3em; display:grid; gap: 6px; }
.toc a{ text-decoration:none; display:inline-block; padding-block: 4px; }
.toc a:hover{ text-decoration:underline; }
.legal-meta{ color: var(--text-secondary); font-size: var(--fs-small); margin-top: var(--sp-3); }

/* ========================================================================
   20. REVEAL PRZY SCROLLU (tylko z JS, tylko bez reduced-motion)
   ======================================================================== */
html.js.motion-ok [data-reveal]{
  opacity:0; transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
html.js.motion-ok [data-reveal].in{ opacity:1; transform:none; }

/* ========================================================================
   21. REDUKCJA RUCHU
   ======================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html{ scroll-behavior:auto; }
  .scale__fill{ transform: scaleX(1); }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}

@media print{
  .cookies, .drawer, .drawer-backdrop, .grain, .burger{ display:none !important; }
  body::before{ display:none; }
}

/* ========================================================================
   22. BADANIE ADOS-2 I CENNIK
   Dodane 2026-10-21, gdy klientka poprosiła o wyeksponowanie badania ADOS-2
   i przysłała cennik.
   ======================================================================== */

/* Lista z poziomą kreską akcentu. Wspólna z „Dla rodziców", żeby nie mnożyć
   wariantów tego samego wzoru. */
.marklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: var(--sp-4); }
.marklist li{ position:relative; padding-left: 28px; color: var(--text-primary); }
.marklist li::before{ content:""; position:absolute; left:0; top:.65em; width:14px; height:2px; background: var(--accent); }

.ados__fig{ margin: var(--sp-6) 0 0; }
.ados__fig img{ width:100%; height:auto; display:block; border-radius: 72px var(--r-md) var(--r-md) var(--r-md); }
@media (min-width:1024px){
  /* Tekst zajmuje kolumny 1 do 7, zdjęcie siada w 9 do 12 i wychodzi w margines.
     Bez jawnego przypisania kolumn siatka wrzuca je w jedną kolumnę i zdjęcie
     kurczy się do znaczka pocztowego. */
  .ados__fig{ grid-column: 9 / -1; align-self:start; margin: 0 calc(-1 * var(--gutter)) 0 0; position:sticky; top: calc(var(--header-h-scrolled) + var(--sp-6)); }
}

/* Pakiety ADOS-2. Każdy kolejny zawiera poprzedni, więc rosnące wcięcie
   niesie tu sens, nie jest ozdobą. Trzy równe karty obok siebie
   pokazałyby je jako alternatywy, czyli nieprawdę. */
.packs{ list-style:none; margin: var(--sp-7) 0 0; padding:0; display:grid; gap: var(--sp-6); }
.packs__item{ position:relative; padding: 0 0 0 var(--sp-6); border-left: 2px solid var(--accent); }
.packs__item::before{
  content:""; position:absolute; left:-6px; top:.45em;
  width:10px; height:10px; border-radius:50%; background: var(--accent);
}
.packs__head{ display:flex; flex-wrap:wrap; align-items:baseline; gap: var(--sp-2) var(--sp-4); }
.packs__name{ font-family: var(--font-display); font-size: var(--fs-h4); font-weight:600; }
.packs__cost{ font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-accent); font-variant-numeric: tabular-nums; white-space:nowrap; }
.packs__desc{ margin-top: var(--sp-2); max-width: var(--measure); color: var(--text-on-tint); }
@media (min-width:768px){
  .packs__item:nth-child(2){ margin-left: var(--sp-6); }
  .packs__item:nth-child(3){ margin-left: calc(var(--sp-6) * 2); }
}

/* Cennik usług. Nazwa po lewej, kwota po prawej, linia wiodąca między nimi. */
.pricing{ list-style:none; margin: var(--sp-7) 0 0; padding:0; border-top: 1px solid var(--c-line-ink); }
/* Bez ograniczenia szerokości nazwa i kwota rozjeżdżają się na krańce ekranu
   i oko gubi, która cena należy do której pozycji. */
@media (min-width:1024px){ .pricing, .pricing__note{ width: calc(100% * 9 / 12); } }
/* Siatka, nie flex z zawijaniem. Przy zawijaniu kwota raz zostawała w linii
   nazwy, a raz spadała pod nią, przez co kolumna cen przestawała istnieć.
   Tu kwota siedzi w drugiej kolumnie zawsze, a nazwa zawija się w pierwszej. */
.pricing li{
  display:grid; grid-template-columns: 1fr auto; align-items:baseline;
  gap: var(--sp-1) var(--sp-5); padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-line-ink);
}
.pricing__name{ font-weight:500; max-width: 48ch; }
.pricing__time{ display:block; font-size: var(--fs-small); color: var(--text-secondary); margin-top: 2px; }
.pricing__cost{ font-family: var(--font-display); font-size: var(--fs-h4); white-space:nowrap; font-variant-numeric: tabular-nums; }
.pricing__note{ margin-top: var(--sp-6); max-width: var(--measure); color: var(--text-secondary); font-size: var(--fs-small); }

/* ========================================================================
   23. KLASY POMOCNICZE, siatka 12 kolumn od 1024px i skala odstępów (4 px)
   ======================================================================== */
.grid{ display:grid; }
.gap-8{ gap:32px; } .gap-10{ gap:40px; }
.items-end{ align-items:end; } .self-end{ align-self:end; }
.m-0{ margin:0; }
.mt-2{ margin-top:8px; }  .mt-4{ margin-top:16px; } .mt-5{ margin-top:20px; } .mt-6{ margin-top:24px; }
.mt-8{ margin-top:32px; } .mt-10{ margin-top:40px; } .mt-12{ margin-top:48px; } .mt-16{ margin-top:64px; }
.mb-5{ margin-bottom:20px; } .mb-6{ margin-bottom:24px; }
.pt-4{ padding-top:16px; }
.max-w-\[34ch\]{ max-width:34ch; }
@media (min-width:1024px){
  .lg\:grid-cols-12{ grid-template-columns: repeat(12, minmax(0,1fr)); }
  .lg\:gap-8{ gap:32px; }
  .lg\:col-span-3{ grid-column: span 3 / span 3; } .lg\:col-span-4{ grid-column: span 4 / span 4; }
  .lg\:col-span-5{ grid-column: span 5 / span 5; } .lg\:col-span-6{ grid-column: span 6 / span 6; }
  .lg\:col-span-7{ grid-column: span 7 / span 7; } .lg\:col-span-8{ grid-column: span 8 / span 8; }
  .lg\:col-start-5{ grid-column-start:5; } .lg\:col-start-7{ grid-column-start:7; } .lg\:col-start-9{ grid-column-start:9; }
  .lg\:mt-24{ margin-top:96px; } .lg\:mt-\[7\.5rem\]{ margin-top:7.5rem; }
}

/* Baner na małych telefonach zajmował 50 do 56% ekranu (zmierzone: 320 px przy 640 px
   wysokości). Kartka zostaje kartką, skracamy tylko treść do zdania niosącego
   informację plus link do polityki, resztę przejmuje panel „Ustawienia". */
@media (max-width:479px){
  .cookies{ padding: var(--sp-3) var(--sp-4); }
  .cookies__icon{ display:none; }
  .cookies h2{ font-size:17px; }
  .cookies p{ font-size:13.5px; line-height:1.45; margin-top:2px; }
  .cookies__extra{ display:none; }
  .cookies__actions{ margin-top: var(--sp-2); }
  .cookies__more{ margin-top:6px; }
}
/* Niskie ekrany (np. 640 px) niezależnie od szerokości, panel ustawień nie może
   rozepchnąć kartki poza ekran. */
@media (max-height:700px){
  .cookies__panel > div{ max-height: 38vh; overflow-y:auto; }
}