/* /: style bloków tej strony. Wspólne (czcionki, kolory, nagłówek, stopka) są w site.css. */
[data-b="start-wstep"]{background:var(--bg);padding:24px 0 64px}
[data-b="start-wstep"] .hero{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center}
[data-b="start-wstep"] .eye{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
[data-b="start-wstep"] .eye::before{content:'';width:48px;height:1px;background:currentColor;opacity:.6}
[data-b="start-wstep"] h1{font-size:clamp(40px,4.8vw,66px);line-height:1.08;margin:0 0 28px;font-weight:400}
[data-b="start-wstep"] .lead{font-weight:600;font-size:16px;line-height:1.75;letter-spacing:.6px}
[data-b="start-wstep"] .txt p{font-size:16px;line-height:1.8;letter-spacing:.6px;color:var(--muted);max-width:52ch}
[data-b="start-wstep"] figure{margin:0 0 25px;position:relative}
[data-b="start-wstep"] figure::after{content:'';position:absolute;inset:25px 25px -25px;border:1px solid #eeebeb;pointer-events:none;z-index:2}
[data-b="start-wstep"] figure::after{border-color:#ffffff}
[data-b="start-wstep"] .clip{overflow:hidden}
[data-b="start-wstep"] img{width:100%;aspect-ratio:1/1.05;object-fit:cover}
[data-b="start-wstep"] .quote{margin-top:40px;position:relative;padding:4px 24px 4px 50px}
[data-b="start-wstep"] .quote::before{content:'';position:absolute;left:24px;top:0;bottom:0;width:14px;border:2px solid var(--ink);border-right:0;border-radius:40px 0 0 40px}
[data-b="start-wstep"] .quote p{font-family:var(--font-head);font-size:38px;line-height:1.25;margin:0 0 10px}
[data-b="start-wstep"] .quote cite{font-family:var(--font-head);font-style:italic;font-size:15px}
@media (max-width:760px) {
  [data-b="start-wstep"] .hero{grid-template-columns:1fr;gap:32px}
  [data-b="start-wstep"] figure{order:-1}
  [data-b="start-wstep"] .quote p{font-size:23px}
}
@keyframes drift--start-wstep{from{transform:rotate(0deg) translate(1em) rotate(0deg) scale(1.2)}to{transform:rotate(360deg) translate(1em) rotate(-360deg) scale(1.2)}}
[data-b="start-wstep"] .clip img{animation:drift--start-wstep 30s linear infinite}
[data-b="start-zaproszenie"]{background:var(--surface);padding:16px 0 0}
[data-b="start-zaproszenie"] .wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
[data-b="start-zaproszenie"] h2{text-align:center;font-size:clamp(26px,2.8vw,38px);line-height:1.3;max-width:30ch;margin:56px auto;font-weight:400}
@keyframes rise--start-zaproszenie{from{opacity:.01;transform:translateY(20px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()) {
  [data-b="start-zaproszenie"] h2{animation:rise--start-zaproszenie linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
[data-b="start-uslugi"]{background:var(--surface);padding:48px 0 40px}
[data-b="start-uslugi"] h2{text-align:center;font-size:clamp(26px,2.8vw,40px);margin:0 0 48px;font-weight:400}
[data-b="start-uslugi"] .row{display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:center;margin-bottom:28px}
[data-b="start-uslugi"] .row:nth-of-type(even){grid-template-columns:2fr 1fr}
[data-b="start-uslugi"] .row:nth-of-type(even) figure{order:2}
[data-b="start-uslugi"] figure{margin:0 0 25px;position:relative}
[data-b="start-uslugi"] figure::after{content:'';position:absolute;inset:25px 25px -25px;border:1px solid #eeebeb;pointer-events:none;z-index:2}
[data-b="start-uslugi"] img{width:100%;aspect-ratio:3/4;object-fit:cover}
/* jej cyfry 01–04 to rysunki ze złotą linią w samym obrazku (img/numer-0N.webp), 200×133 na każdej szerokości */
[data-b="start-uslugi"] .num{margin:0 0 8px}
[data-b="start-uslugi"] .num img{width:200px;height:auto;aspect-ratio:auto}
[data-b="start-uslugi"] h3{font-size:clamp(28px,3.3vw,46px);margin:0 0 14px;font-weight:400}
[data-b="start-uslugi"] .sub{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
[data-b="start-uslugi"] .body{font-size:16px;line-height:1.8;letter-spacing:.6px;color:var(--muted);text-align:justify}
@media (max-width:760px) {
  [data-b="start-uslugi"] .row,[data-b="start-uslugi"] .row:nth-of-type(even){grid-template-columns:1fr;gap:20px;margin-bottom:48px}
  [data-b="start-uslugi"] .row:nth-of-type(even) figure{order:0}
  [data-b="start-uslugi"] .body{text-align:left}
}
@keyframes rise--start-uslugi{from{opacity:.01;transform:translateY(20px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()) {
  [data-b="start-uslugi"] h2,[data-b="start-uslugi"] .row{animation:rise--start-uslugi linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
[data-b="start-cennik"]{background:var(--surface);padding:0 0 72px}
[data-b="start-cennik"] h2{background:var(--bg);text-align:center;font-size:clamp(30px,3.6vw,52px);padding:22px 16px;margin:0 0 64px;font-weight:400}
[data-b="start-cennik"] table{width:100%;max-width:800px;margin:0 auto;border-collapse:collapse;font-size:14px}
[data-b="start-cennik"] th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:14px 10px;border-bottom:1px solid #c4a469}
[data-b="start-cennik"] td{padding:18px 10px;border-bottom:1px solid #dcd9d3}
[data-b="start-cennik"] td:nth-child(2),[data-b="start-cennik"] td:nth-child(3){white-space:nowrap}
[data-b="start-cennik"] th:nth-child(1){width:60%}
@media (max-width:760px) {
  [data-b="start-cennik"] table{font-size:14px}
  [data-b="start-cennik"] td,[data-b="start-cennik"] th{padding:12px 6px}
  [data-b="start-cennik"] th:nth-child(1){width:auto}
}
@keyframes rise--start-cennik{from{opacity:.01;transform:translateY(20px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()) {
  [data-b="start-cennik"] h2,[data-b="start-cennik"] table{animation:rise--start-cennik linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
[data-b="start-o-mnie"]{background:var(--bg);padding:72px 0;text-align:center}
[data-b="start-o-mnie"] .eye{display:flex;justify-content:center;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
[data-b="start-o-mnie"] .eye::before,[data-b="start-o-mnie"] .eye::after{content:'';width:48px;height:1px;background:currentColor;opacity:.6}
[data-b="start-o-mnie"] h2{font-size:clamp(30px,3.4vw,48px);margin:0 0 28px;font-weight:400}
[data-b="start-o-mnie"] .body{max-width:78ch;margin:0 auto 18px;font-size:16px;line-height:1.8;letter-spacing:.6px;color:var(--muted)}
@keyframes rise--start-o-mnie{from{opacity:.01;transform:translateY(20px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()) {
  [data-b="start-o-mnie"] .eye,[data-b="start-o-mnie"] h2,[data-b="start-o-mnie"] .body{animation:rise--start-o-mnie linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
[data-b="start-doswiadczenie"]{background:var(--band);color:var(--band-ink);padding:56px 0}
[data-b="start-doswiadczenie"] .grid{display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:center}
[data-b="start-doswiadczenie"] figure{margin:0}
[data-b="start-doswiadczenie"] img{width:100%;aspect-ratio:1/1.9;object-fit:cover}
[data-b="start-doswiadczenie"] .eye{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#d9d9d9;margin:0 0 14px}
[data-b="start-doswiadczenie"] .eye::before{content:'';width:48px;height:1px;background:currentColor;opacity:.6}
[data-b="start-doswiadczenie"] h2{font-size:clamp(28px,3vw,40px);margin:0 0 20px;font-weight:400}
[data-b="start-doswiadczenie"] .body{font-size:16px;line-height:1.8;letter-spacing:.6px;color:#e2e2e2;text-align:justify;margin:0 0 14px}
@media (max-width:760px) {
  [data-b="start-doswiadczenie"] .grid{grid-template-columns:1fr;gap:28px}
  [data-b="start-doswiadczenie"] .body{text-align:left}
}
@keyframes rise--start-doswiadczenie{from{opacity:.01;transform:translateY(20px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()) {
  [data-b="start-doswiadczenie"] .eye,[data-b="start-doswiadczenie"] h2,[data-b="start-doswiadczenie"] .body{animation:rise--start-doswiadczenie linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
[data-b="start-doswiadczenie"] figure{position:relative;margin:0 0 25px}
[data-b="start-doswiadczenie"] .clip{overflow:clip}
@keyframes zoom--start-doswiadczenie{from{transform:scale(1)}to{transform:scale(1.25)}}
@supports (animation-timeline: view()) {
  [data-b="start-doswiadczenie"] .clip img{animation:zoom--start-doswiadczenie linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}
[data-b="start-pytania"]{background:var(--surface);padding:72px 0 48px}
[data-b="start-pytania"] .wrap{max-width:820px}
[data-b="start-pytania"] .eye{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
[data-b="start-pytania"] .eye::before{content:'';width:48px;height:1px;background:currentColor;opacity:.6}
[data-b="start-pytania"] h2{font-size:clamp(30px,3.2vw,44px);margin:0 0 14px;font-weight:400}
[data-b="start-pytania"] .intro{font-size:16px;line-height:1.8;letter-spacing:.6px;color:var(--muted);margin:0 0 40px;max-width:72ch}
[data-b="start-pytania"] .grp{margin:0 0 40px;padding-left:24px}
[data-b="start-pytania"] details{border-bottom:1px solid #dcd9d3}
[data-b="start-pytania"] summary{cursor:pointer;list-style:none;padding:13px 32px 13px 0;font-size:14px;position:relative}
[data-b="start-pytania"] summary::-webkit-details-marker{display:none}
[data-b="start-pytania"] summary::after{content:'›';position:absolute;right:6px;top:50%;transform:translateY(-50%) rotate(90deg);color:var(--muted);font-size:16px}
[data-b="start-pytania"] details[open] summary::after{transform:translateY(-50%) rotate(-90deg)}
[data-b="start-pytania"] details p{font-size:16px;line-height:1.8;letter-spacing:.6px;color:var(--muted);margin:0 0 12px}
@media (max-width:760px) {
  [data-b="start-pytania"] .grp{padding-left:0}
}
@keyframes rise--start-pytania{from{opacity:.01;transform:translateY(20px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()) {
  [data-b="start-pytania"] .eye,[data-b="start-pytania"] h2,[data-b="start-pytania"] .intro,[data-b="start-pytania"] .grp{animation:rise--start-pytania linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
[data-b="start-portfolio"]{background:var(--surface);padding:24px 0 72px}
[data-b="start-portfolio"] .eye{display:flex;justify-content:center;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
[data-b="start-portfolio"] .eye::before,[data-b="start-portfolio"] .eye::after{content:'';width:48px;height:1px;background:currentColor;opacity:.6}
[data-b="start-portfolio"] h2{text-align:center;font-size:clamp(30px,3.4vw,48px);margin:0 0 32px;font-weight:400}
/* jak u niej: 3 kolumny na każdej szerokości, odstęp 1px (od 990 px 2px), szerokość 1058px, 10px od krawędzi ekranu */
[data-b="start-portfolio"] .masonry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;align-items:start;max-width:1078px;margin:0 -24px;padding:0 10px}
[data-b="start-portfolio"] .kol{display:flex;flex-direction:column;gap:1px}
[data-b="start-portfolio"] .g{position:relative;margin:0}
[data-b="start-portfolio"] .g img{width:100%;display:block}
[data-b="start-portfolio"] .g figcaption{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.7);color:#fff;font-family:var(--font-head);font-size:12px;line-height:1.3;padding:3px 6px;opacity:0;transition:opacity .8s}
[data-b="start-portfolio"] .g:hover figcaption{opacity:1}
@keyframes rise--start-portfolio{from{opacity:.01;transform:translateY(20px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()) {
  [data-b="start-portfolio"] .eye,[data-b="start-portfolio"] h2{animation:rise--start-portfolio linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
}
@keyframes photo--start-portfolio{from{opacity:.01;transform:translateY(37px)}to{opacity:1;transform:none}}
@supports (animation-timeline: view()) {
  [data-b="start-portfolio"] .g{animation:photo--start-portfolio linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
}
/* ---- Dopasowanie do jej strony na Shopify (zmierzone w Chrome 6 XI 2026; telefon < 750 px, od 750 px jej rozmiary stałe) ---- */
[data-b="start-wstep"] h1{font-size:42px}
[data-b="start-zaproszenie"] h2,[data-b="start-uslugi"] h2,[data-b="start-o-mnie"] h2,[data-b="start-pytania"] h2,[data-b="start-portfolio"] h2,[data-b="start-doswiadczenie"] h2{font-size:30px}
[data-b="start-uslugi"] h3{font-size:48px}
[data-b="start-cennik"] h2{font-size:40px}
[data-b="start-doswiadczenie"] h2{font-weight:700;color:#f9f9f9}
/* złote linie po obu stronach ciemnego pasa „Doświadczenie” */
[data-b="start-doswiadczenie"]{border-top:1px solid #c4a469;border-bottom:1px solid #c4a469}
@media (min-width:750px) {
  [data-b="start-wstep"] h1{font-size:64px}
  [data-b="start-zaproszenie"] h2,[data-b="start-uslugi"] h2,[data-b="start-o-mnie"] h2,[data-b="start-pytania"] h2,[data-b="start-portfolio"] h2,[data-b="start-doswiadczenie"] h2{font-size:40px}
  [data-b="start-uslugi"] h3{font-size:51.2px}
  [data-b="start-cennik"] h2{font-size:52px}
}
@media (min-width:990px) {
  [data-b="start-portfolio"] .masonry{margin:0 auto}
  [data-b="start-portfolio"] .masonry,[data-b="start-portfolio"] .kol{gap:2px}
}

/* jej ikona „?” przy każdym pytaniu (ikona motywu na jej stronie, 6 XI) */
[data-b="start-pytania"] summary{display:flex;align-items:center;gap:12px}
[data-b="start-pytania"] summary .q{flex:none;width:20px;height:20px}

/* Telefon (6.11.2026): tekst co najmniej 15 px. Etykiety nad sekcjami z mniejszym rozstrzeleniem, żeby się mieściły. */
@media (max-width:760px){
  [data-b] .eye{font-size:15px;letter-spacing:.14em}
  [data-b="start-uslugi"] .sub{font-size:15px}
  [data-b="start-cennik"] table{font-size:15px;letter-spacing:.2px}
  [data-b="start-cennik"] td,[data-b="start-cennik"] th{padding:12px 4px}
  [data-b="start-cennik"] th{font-size:15px;letter-spacing:.03em}
  [data-b="start-pytania"] summary{font-size:15px}
}
/* „Doświadczenie”: powiększenie przy przewijaniu stoi, gdy ktoś ma włączone „ogranicz ruch” */
@media (prefers-reduced-motion:reduce){[data-b="start-doswiadczenie"] .clip img{animation:none}}