/* Cyfrowy Drogowskaz — arkusz strony publicznej.
   Paleta i kroje wprost z księgi marki, wersja 1.4.
   Kroje wczytujemy z własnego serwera, nie z Google Fonts: wywołanie do
   fonts.googleapis.com przekazuje adres IP odwiedzającego do zewnętrznej
   firmy, a projekt bez osobowości prawnej nie chce takiego transferu
   w dokumentacji RODO. */

@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/fraunces-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/fraunces-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:700; font-display:swap;
  src:url("fonts/fraunces-latin-ext-700-italic.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:700; font-display:swap;
  src:url("fonts/fraunces-latin-700-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Atkinson Hyperlegible"; font-style:normal; font-weight:700; font-display:swap;
  src:url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --krem:#FAF7F0;
  --biel:#FFFFFF;
  --petrol:#134B58;
  --petrol-ciemny:#0E3B45;
  --petrol-jasny:#1C5A67;
  --petrol-obrys:#7FA9B0;
  --ceglasty:#C0442A;
  --miod:#E3B23C;
  --atrament:#16211F;
  --tekst:#2A3533;
  --tekst-drugi:#56605E;
  --linia:#E0D9CC;
  --gutter:clamp(20px,5vw,72px);
  color-scheme:light;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

body{
  margin:0; background:var(--krem); color:var(--atrament);
  font-family:"Atkinson Hyperlegible",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ text-wrap:balance; margin:0 }
a{ color:var(--petrol) }
:focus-visible{ outline:3px solid var(--ceglasty); outline-offset:3px }
img{ max-width:100%; height:auto }
.wrap{ max-width:1440px; margin:0 auto }

/* Link „przejdź do treści” dla osób korzystających z klawiatury. */
.pomin{
  position:absolute; left:-9999px; top:0; z-index:50;
  background:var(--ceglasty); color:var(--krem);
  padding:12px 20px; font-weight:700; text-decoration:none;
}
.pomin:focus{ left:0 }

/* ——— nagłówek ——— */
.top{
  padding:0 var(--gutter); min-height:90px; display:flex; align-items:center;
  gap:28px; flex-wrap:wrap; border-bottom:2px solid var(--petrol); background:var(--krem);
}
.brand{ display:flex; align-items:center; gap:12px; padding:14px 0; text-decoration:none; color:inherit }
.brand b{ font-size:19px; font-weight:700; line-height:1.1 }
.brand span{ display:block; font-size:13px; font-weight:400; color:var(--tekst-drugi); margin-top:2px }
.nav{ display:flex; gap:clamp(14px,2.2vw,28px); flex-wrap:wrap; padding-bottom:10px }
.nav a{ font-size:16px; text-decoration:none; color:var(--atrament); padding-bottom:3px; border-bottom:3px solid transparent }
.nav a:hover,.nav a[aria-current]{ border-bottom-color:var(--ceglasty) }
.cta-top{
  margin-left:auto; text-decoration:none; background:var(--ceglasty); color:var(--krem);
  font-size:16px; font-weight:700; padding:13px 24px; border-radius:8px; white-space:nowrap;
}
.cta-top:hover{ background:#A5371F }
/* Domyślny obrys skupienia jest ceglasty, więc na ceglastym przycisku znikał.
   Tu jedyny wyjątek: obrys w atramencie. */
.cta-top:focus-visible{ outline-color:var(--atrament) }

/* ——— hero ——— */
.hero{
  background:var(--petrol); color:var(--krem);
  padding:clamp(48px,7vw,76px) var(--gutter) clamp(44px,6vw,70px);
  position:relative; overflow:hidden;
}
.hero .siatka{
  position:absolute; inset:0;
  background-image:repeating-linear-gradient(0deg,var(--petrol-jasny) 0 1px,transparent 1px 44px),
                   repeating-linear-gradient(90deg,var(--petrol-jasny) 0 1px,transparent 1px 44px);
}
.hero .in{ position:relative; display:flex; gap:clamp(28px,5vw,56px); align-items:center; flex-wrap:wrap }
.hero .kol{ flex:1 1 420px; min-width:0 }
.eyebrow{ font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--miod); font-weight:700 }
.hero h1{ margin-top:18px; font-size:clamp(30px,4.4vw,46px); font-weight:700; line-height:1.14 }
.hero h1 em{
  font-family:"Fraunces",Georgia,serif; font-style:italic; font-weight:700;
  font-size:clamp(52px,8.4vw,84px); line-height:1; color:var(--miod); display:block;
}
.lead{ margin-top:22px; font-size:clamp(17px,1.5vw,20px); line-height:1.5; max-width:56ch; color:#DCE7E9 }
.btns{ margin-top:32px; display:flex; gap:14px; flex-wrap:wrap }
.btn{ text-decoration:none; font-size:17px; font-weight:700; border-radius:8px; display:inline-block }
.btn-pelny{ background:var(--miod); color:var(--atrament); padding:16px 28px }
.btn-pelny:hover{ background:#D3A231 }
.btn-obrys{ color:var(--krem); padding:15px 26px; border:2px solid var(--petrol-obrys) }
.btn-obrys:hover{ border-color:var(--krem) }
.hero .znak{ flex:0 1 300px; display:flex; justify-content:center; max-width:100% }
.hero .znak svg{ width:min(280px,52vw); height:auto; max-width:100% }

/* ——— sekcje ——— */
section{ padding:clamp(44px,6vw,70px) var(--gutter) }
section.styk{ padding-top:0 }
.belka{ height:3px; background:var(--petrol) }
.h2{ font-family:"Fraunces",Georgia,serif; font-size:clamp(26px,3.4vw,34px); font-weight:700; color:var(--petrol) }
.pod{ font-size:clamp(16px,1.4vw,18px); line-height:1.5; color:#3B4341; max-width:72ch; margin-top:6px }
.kreska{ margin-top:30px; height:3px; background:var(--petrol) }
.proza{ max-width:68ch; margin-top:22px }
.proza p{ margin:0 0 16px; font-size:17px; line-height:1.6; color:var(--tekst) }
.proza p:last-child{ margin-bottom:0 }

/* ——— trzy tory ——— */
.tory{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding-top:26px }
.tor{ padding:0 28px; border-left:2px solid var(--linia) }
.tor:first-child{ padding-left:0; border-left:none }
.tor:last-child{ padding-right:0 }
.tor h3{ font-family:"Fraunces",Georgia,serif; font-size:clamp(21px,2.2vw,25px); font-weight:700; margin-top:10px }
.tor p{ font-size:17px; line-height:1.5; color:var(--tekst); margin:8px 0 0 }
.tor .lnk{
  display:inline-block; margin-top:14px; font-size:17px; font-weight:700; color:var(--petrol);
  text-decoration:none; border-bottom:3px solid var(--ceglasty); padding-bottom:2px;
}
.tor .lnk:hover{ color:var(--ceglasty) }

/* ——— pakiet, lista pozycji ——— */
.pakiet{ display:flex; gap:clamp(24px,4vw,48px); padding-top:30px; flex-wrap:wrap }
.pakiet .opis{ flex:1 1 320px; max-width:400px }
.pakiet .lista{ flex:2 1 460px; min-width:0 }
.plaska{
  margin-top:20px; background:var(--miod); color:var(--atrament);
  border-radius:10px; padding:16px 18px; font-size:15px; line-height:1.45;
}
.plaska a{ color:var(--atrament); font-weight:700 }
.poz{ display:flex; gap:20px; padding:14px 0; border-bottom:1px solid var(--linia) }
.poz:last-child{ border-bottom:none }
.poz .nr{
  font-family:"Fraunces",Georgia,serif; font-size:26px; font-weight:700; color:var(--ceglasty);
  width:54px; line-height:1.1; flex-shrink:0; font-variant-numeric:tabular-nums;
}
.poz b{ font-size:18px }
.poz p{ font-size:16px; line-height:1.45; color:var(--tekst); margin:3px 0 0 }

/* ——— cytat ——— */
.cytat{ background:var(--petrol); color:var(--krem); padding:clamp(40px,5vw,54px) var(--gutter) }
.cytat .in{ display:flex; gap:clamp(22px,3vw,40px); align-items:center; flex-wrap:wrap }
.kropka{ width:16px; height:16px; border-radius:50%; background:var(--miod); flex-shrink:0 }
.cytat q{
  font-family:"Fraunces",Georgia,serif; font-size:clamp(22px,2.9vw,32px);
  line-height:1.25; flex:1 1 420px; quotes:none;
}
.cytat .zrodlo{ width:240px; flex:0 1 240px; font-size:15px; line-height:1.5; color:#C6D6DA }

/* ——— trzy kolumny z podstawą ——— */
.trzy{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr) }
.trzy>div{ padding:0 26px; border-left:2px solid var(--linia) }
.trzy>div:first-child{ padding-left:0; border-left:none }
.trzy>div:last-child{ padding-right:0 }
.trzy h3{ font-family:"Fraunces",Georgia,serif; font-size:21px; font-weight:700 }
.trzy p{ font-size:16px; line-height:1.5; color:var(--tekst); margin:6px 0 0 }
.zrod{ font-size:14px; color:var(--tekst-drugi); margin-top:8px }

/* ——— ramka z podstawą prawną ——— */
.prawo{
  margin-top:26px; background:var(--biel); border-left:5px solid var(--petrol);
  padding:22px 24px; max-width:76ch;
}
.prawo h3{ font-family:"Fraunces",Georgia,serif; font-size:20px; font-weight:700; color:var(--petrol) }
.prawo p{ margin:10px 0 0; font-size:16px; line-height:1.55; color:var(--tekst) }
.prawo .akt{ margin-top:14px; font-size:14px; color:var(--tekst-drugi) }

/* ——— mapa drogowa ——— */
.fale{ margin-top:28px; display:grid; gap:0 }
.fala{ display:grid; grid-template-columns:150px 1fr; gap:0 26px; padding:18px 0; border-top:1px solid var(--linia) }
.fala:last-child{ border-bottom:1px solid var(--linia) }
.fala .kiedy{ font-weight:700; color:var(--ceglasty); font-size:15px; letter-spacing:.04em; text-transform:uppercase }
.fala b{ display:block; font-size:18px }
.fala p{ margin:4px 0 0; font-size:16px; line-height:1.5; color:var(--tekst) }
.fala.teraz b::after{
  content:"w toku"; margin-left:10px; font-size:12px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; background:var(--miod); color:var(--atrament);
  padding:3px 8px; border-radius:4px; vertical-align:2px;
}

/* ——— zespół ——— */
.osoby{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,40px) }
.osoba .pas{ height:4px; background:var(--ceglasty) }
.osoba h3{ font-family:"Fraunces",Georgia,serif; font-size:21px; font-weight:700; margin-top:14px }
.osoba .rola{ display:block; font-size:14px; color:var(--ceglasty); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:4px }
.osoba p{ font-size:16px; line-height:1.55; color:var(--tekst); margin:10px 0 0 }

/* ——— próbki ——— */
.probki{ margin-top:28px; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,3.5vw,44px) }
.probka figure{ margin:0 }
.probka img{ display:block; width:100%; border:1px solid var(--linia); background:var(--biel) }
.probka figcaption{ margin-top:12px }
.probka figcaption b{ display:block; font-size:17px }
.probka figcaption span{ display:block; font-size:15px; color:var(--tekst-drugi); margin-top:3px }

/* ——— stopka ——— */
footer{ background:var(--petrol); color:var(--krem); padding:clamp(40px,5vw,50px) var(--gutter) 42px }
footer .in{ display:flex; gap:clamp(28px,4vw,56px); align-items:flex-start; flex-wrap:wrap }
footer .kol{ flex:1 1 260px }
footer a{ color:var(--miod) }
.lab{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--miod); font-weight:700 }
.dane{ margin-top:12px; font-size:16px; line-height:1.8; color:#E6EFF1 }
.drobne{ margin-top:10px; font-size:14px; line-height:1.5; color:#A9BFC4 }
.dopisek{
  margin-top:32px; padding-top:20px; border-top:1px solid #2A6472;
  display:flex; gap:26px; font-size:14px; color:#A9BFC4; flex-wrap:wrap;
}

@media (max-width:900px){
  .tory,.trzy,.osoby,.probki{ grid-template-columns:1fr }
  .tor,.trzy>div{ padding:22px 0; border-left:none; border-top:2px solid var(--linia) }
  .tor:first-child,.trzy>div:first-child{ border-top:none; padding-top:4px }
  .cytat .zrodlo{ width:auto; flex:1 1 100% }
  .cta-top{ margin-left:0 }
  .fala{ grid-template-columns:1fr; gap:6px }
}

@media print{
  .top,.cta-top,.hero .siatka,.btns{ display:none }
  body{ background:#fff }
  .hero,.cytat,footer{ background:#fff; color:#000 }
}

/* ——— ożywienie sekcji „Czym jest” ———
   Księga marki zabrania pogrubień w środku zdania dla samego efektu, więc
   oddech robimy typografią i formą, a nie wytłuszczeniem. Dwa zabiegi:
   inicjał otwierający blok i jedno zdanie wyjęte z akapitu jako wyimek. */

/* Rozmiar dobrany tak, żeby inicjał zajmował dokładnie dwa wiersze.
   Przy większym opływa go trzeci wiersz i akapit wygląda na wcięty. */
.proza.inicjal>p:first-of-type::first-letter{
  float:left;
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-size:50px; line-height:.86; color:var(--petrol);
  padding:3px 11px 0 0;
}
/* Na wąskiej kolumnie wiersz mieści mniej znaków, więc inicjał i tak zajmie
   trzy wiersze. Tam rolę przerywnika przejmuje sam wyimek. */
@media (max-width:620px){
  .proza.inicjal>p:first-of-type::first-letter{
    float:none; font-size:inherit; line-height:inherit;
    color:inherit; padding:0; font-family:inherit;
  }
}

.wyimek{
  margin:26px 0; padding:2px 0 2px 20px;
  border-left:4px solid var(--miod);
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-size:clamp(19px,2.1vw,24px); line-height:1.32;
  color:var(--petrol); max-width:42ch;
}

/* Znak C jako faktura w rogu sekcji. WYŁĄCZONY: sekcja „Czym jest” nie ma
   już klasy „czym”, a znaku nie ma w kodzie strony. Decyzja Oli z 5.11.2026:
   mały, przycięty znak czytał się jak smuga, nie jak znak marki.
   Żeby włączyć wariant duży, dopisz class="czym" do sekcji i wstaw w niej
   <svg class="faktura duzy" viewBox="5 5 114 112">…</svg> ze znakiem. */
.czym{ position:relative; overflow:hidden }
.czym .faktura{
  position:absolute; right:-70px; top:50%; transform:translateY(-50%);
  width:340px; height:340px; opacity:.055; pointer-events:none;
  color:var(--petrol);
}
.czym>*{ position:relative; z-index:1 }
@media (max-width:1100px){ .czym .faktura{ display:none } }

/* ——— koda sekcji „Czym jest”: po co to wszystko ———
   Odróżnia się od wyimka nadkreśleniem i ceglastą nadlinijką, a nie kolejną
   kreską z boku, żeby dwa wyróżnienia w jednej sekcji nie wyglądały jak para. */
.cel{
  margin:32px 0 0; padding-top:20px;
  border-top:1px solid var(--linia);
  max-width:58ch;
  font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-size:clamp(18px,1.9vw,21px); line-height:1.38;
  color:var(--petrol);
}
.cel .et{
  display:block; margin-bottom:10px;
  font-family:"Atkinson Hyperlegible",Arial,sans-serif;
  font-size:13px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ceglasty);
}

/* Wariant duży: znak czytelny, wypuszczony poza prawą krawędź. To jest ta
   wersja do włączenia, gdyby faktura miała wrócić. */
.czym .faktura.duzy{ width:620px; height:620px; right:-180px; opacity:.07 }

/* ——— dwa kafle w hero podstrony z pakietami ———
   Miodowe, tak jak główny przycisk w hero strony startowej, więc oba wezwania
   mówią tym samym kolorem. Podkreślenie idzie petrolem, nie ceglastym:
   ceglasty na miodzie daje kontrast 2,61 i nie nadaje się na tekst.
   Atrament na miodzie ma 8,42, czyli z dużym zapasem. */
.kafle{
  margin-top:30px; display:grid; grid-template-columns:1fr 1fr;
  gap:16px; max-width:620px;
}
.kafle .kafel{
  display:block; text-decoration:none; color:var(--atrament);
  background:var(--miod); border-radius:10px; padding:20px 24px;
  transition:background .14s ease, transform .14s ease;
}
.kafle .kafel:hover,
.kafle .kafel:focus-visible{ background:#D3A231; transform:translateY(-2px) }
.kafle .nad{
  display:block; font-family:"Fraunces",Georgia,serif; font-weight:700;
  font-size:clamp(19px,2vw,22px); line-height:1.15;
}
.kafle .idz{
  display:inline-block; margin-top:11px; font-size:15px; font-weight:700;
  color:var(--petrol); border-bottom:2px solid var(--petrol); padding-bottom:2px;
}
@media (max-width:760px){
  .kafle{ grid-template-columns:1fr; max-width:none }
  .kafle .kafel{ transform:none }
}
@media (prefers-reduced-motion:reduce){
  .kafle .kafel{ transition:none }
  .kafle .kafel:hover{ transform:none }
}