/* Strona ofertowa martynanamiotko.pl · system responsywny v3 (makieta „Makieta strony v3 – responsywna”)
   Jedna skala płynna (clamp) zamiast stałych px + nadpisań !important.
   Breakpointy: telefon < 600 · tablet 600–1023 · laptop ≥ 1024 (treść max 1280 px). */

:root{
  --paper:#f7f4ee;--paper-2:#eee9df;--oatmeal:#c9c1b1;--line:#d9d2c5;
  --ink:#26374d;--ink-deep:#1b2632;--muted:#645d52;--amber:#ffb162;--rust:#a35139;
  --on-dark:#eee9df;--on-dark-muted:#b9b2a6;

  /* Skala typografii: wartość przy 390 px → przy 1440 px */
  --fs-display:clamp(32px, 24.6px + 1.905vw, 52px); /* 32 → 52 */
  --fs-h2:clamp(28px, 22px + 1.52vw, 44px);         /* 28 → 44 */
  --fs-xl:clamp(21px, 18.4px + .667vw, 28px);       /* 21 → 28  cytaty, duże akapity */
  --fs-h3:clamp(20px, 18.9px + .286vw, 23px);       /* 20 → 23 */
  --fs-lead:clamp(17px, 16.26px + .19vw, 19px);     /* 17 → 19 */
  --fs-num:clamp(34px, 28px + 1.52vw, 50px);        /* 34 → 50  liczby */
  --fs-body:16px;--fs-sm:14px;--fs-xs:13px;

  /* Odstępy */
  --gutter:clamp(20px, 4vw, 48px);                  /* 20 · 33 · 41 · 48 */
  --sec:clamp(64px, 48px + 4vw, 112px);             /* 64 · 81 · 89 · 106 */
  --gap-lg:clamp(40px, 32px + 2vw, 64px);           /* nagłówek sekcji → treść */
  --gap-md:clamp(24px, 20px + 1vw, 40px);
  --col-gap:24px;

  --sans:'Inter','Inter Fallback',system-ui,sans-serif;
  --display:'Inter Tight','Inter Tight Fallback','Inter','Inter Fallback',system-ui,sans-serif;
}

html{scroll-behavior:smooth}
body.site{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
.site:not(.legacy) *{box-sizing:border-box}
.site img{max-width:100%;height:auto;display:block}
.site:not(.legacy) a{color:var(--ink)}
.site:not(.legacy) a:hover{color:var(--rust)}
/* :where() = zerowa specyficzność, żeby marginesy z klas wygrywały */
:where(.site:not(.legacy)) p{margin:0}
.site section{scroll-margin-top:24px}
.site a:focus-visible,.site button:focus-visible,.site summary:focus-visible{outline:2px solid var(--rust);outline-offset:3px}

/* Kontener i sekcje */
.wrap{max-width:calc(1280px + 2 * var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.alt{background:var(--paper-2)}
.sec-head{margin-bottom:var(--gap-lg);display:flex;flex-direction:column;gap:var(--gap-md)}

/* Typografia */
h1,h2,h3{text-wrap:balance}
/* Nagłówki sekcji na całą szerokość (uwagi Martyny): balance łamał je w połowie, pretty wypełnia linię i pilnuje tylko sierot */
.h2,.h1.full,p.full{text-wrap:pretty}
.h1{font:300 var(--fs-display)/1.1 var(--display);letter-spacing:-.02em;margin:0;max-width:19em}
.h2{font:300 var(--fs-h2)/1.1 var(--display);letter-spacing:-.015em;margin:0}
.h2-sub{font-size:clamp(24px, 17.3px + 1vw, 36px)}
.h3,.hm{font:400 var(--fs-h3)/1.25 var(--display);letter-spacing:-.01em;margin:0}
.xl{font:300 var(--fs-xl)/1.4 var(--display);letter-spacing:-.01em;max-width:34em}
.lead{font:300 var(--fs-lead)/1.6 var(--display);letter-spacing:-.005em}
.num{font:200 var(--fs-num)/1 var(--display);letter-spacing:-.02em;color:var(--rust)}
.lbl{font:500 14px/1.4 var(--sans);letter-spacing:0;color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs);line-height:1.55}
.rust{color:var(--rust)}
.measure{max-width:62ch}
.site .full{max-width:none}

/* Przyciski i linki */
.btn{display:inline-flex;align-items:center;gap:14px;font:500 15px/1 var(--sans);padding:18px 28px;min-height:52px;box-sizing:border-box;background:var(--ink);color:var(--paper);text-decoration:none;border:0;cursor:pointer}
.site a.btn{color:var(--paper)}
.site a.btn:hover,.btn:hover{background:var(--ink-deep);color:var(--paper)}
.site a.btn.btn-light{background:var(--paper);color:var(--ink)}
.site a.btn.btn-light:hover{background:var(--paper-2);color:var(--ink)}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 15px/1.4 var(--sans);text-decoration:none;border-bottom:1px solid var(--ink)}
.arrow{width:22px;height:10px;flex:0 0 22px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center}

/* Siatka: 12 kolumn na laptopie i tablecie, 1 kolumna na telefonie */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:16px}
/* split: etykieta / treść (laptop 4 | 7, tablet 5 | 7) */
.split>:first-child{grid-column:1 / span 4}
.split>:last-child{grid-column:6 / -1}
/* half: pół na pół */
.half>:first-child{grid-column:1 / span 6}
.half>:last-child{grid-column:7 / -1}
.cols-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px}
.cols-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

/* Linie i listy */
.rule{border-top:1px solid var(--ink)}
.rule-soft{border-top:1px solid var(--line)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows>li,.rows>.row{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.dot{width:9px;height:9px;border-radius:999px;display:inline-block;flex:0 0 9px;background:var(--ink)}
.dot.off{background:transparent;border:1px solid var(--muted);box-sizing:border-box}
.dot.amber{background:var(--amber)}
.no{font:300 13px/1 var(--display);letter-spacing:.04em;color:var(--rust);flex:0 0 28px}

/* Header */
.site-header{border-bottom:1px solid var(--line);background:var(--paper)}
.site-header .wrap{display:flex;gap:16px 40px;align-items:center;justify-content:space-between;min-height:68px}
.site-header .brand{font:300 18px/1 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.site-header nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 28px;align-items:center;font:400 14px/1.4 var(--sans)}
.site-header nav a{text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.site-header .brand{display:inline-flex;align-items:center;min-height:44px}
.site-header nav a.active{color:var(--rust)}
.site-header nav .tlink{font-size:14px;border-color:var(--rust)}

/* Hero: tekst | portret obok (laptop, tablet); na telefonie okrągły portret pod tekstem */
.hero{padding-top:clamp(32px, 8px + 6vw, 112px);padding-bottom:var(--sec)}
/* Nagłówek na 8 kolumn, zdjęcie (kwadrat od góry kadru) stoi na linii pod nagłówkiem po prawej */
.hero-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end;border-bottom:1px solid var(--ink)}
.hero-top .h1{grid-column:1 / span 8;padding-bottom:40px;max-width:none;text-wrap:pretty}
.hero-ph{grid-column:9 / -1;justify-self:end;width:min(278px, 100%);aspect-ratio:1/1;overflow:hidden}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.hero-me{display:none}
.me-ph{justify-self:center;width:min(80%, 300px);aspect-ratio:1/1}
.me-ph img{width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:50% 0;background:var(--oatmeal)}
.hero-sub{font:300 clamp(17px, 15.5px + .38vw, 20px)/1.6 var(--display);letter-spacing:-.005em;max-width:882px;margin-top:var(--gap-md)}
.hero .cta-row{margin-top:var(--gap-md)}

/* Sekcja „Wszyscy dzwonią” */
.who{margin-bottom:var(--gap-lg)}
.who .sep{color:var(--rust)}
.desk{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:32px;align-items:start}
.desk-ph{grid-column:1 / span 4;aspect-ratio:4/5;overflow:hidden;background:var(--oatmeal)}
.desk-ph img{width:100%;height:100%;object-fit:cover}
.desk-copy{grid-column:6 / -1;border-top:1px solid var(--ink);padding-top:24px;display:flex;flex-direction:column;gap:20px}
.case{padding-block:32px;align-items:start}
.case .num{white-space:nowrap}
.case p+p{margin-top:12px}

/* Porównania „Próbowałeś już…” */
.cmp{border-top:1px solid var(--line);padding-block:clamp(24px, 18px + 1.5vw, 40px);align-items:start}
.cmp-right{display:flex;gap:16px;align-items:flex-start}
.cmp-right svg{width:36px;height:14px;flex:0 0 36px;margin-top:.6em}
.cmp-right .xl{margin-bottom:10px}
.boxed{background:var(--paper-2);padding:clamp(32px, 24px + 3vw, 64px) clamp(20px, 12px + 3vw, 56px);margin-top:var(--sec)}
.boxed .cols-3>div{border-top:1px solid var(--ink);padding-top:20px}

/* Metoda */
.facts{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin-bottom:var(--sec)}
.facts>div{padding:24px 24px 24px 0}
.facts>div+div{border-left:1px solid var(--line);padding-left:24px}
.phase{border-top:1px solid var(--ink);padding-block:var(--gap-md) clamp(32px, 24px + 1.5vw, 48px);align-items:start;row-gap:24px}
.phase .num{color:var(--ink);margin-bottom:16px}
.phase .rows>li{display:block}
.phase .rows b{font-weight:500}

/* Oś czasu */
.tl-row{display:grid;grid-template-columns:150px 48px minmax(0,1fr);column-gap:24px}
.tl-rail{position:relative;grid-column:2;grid-row:1}
.tl-rail::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--ink)}
.tl>.tl-row:first-child .tl-rail::before{top:24px}
.tl>.tl-row:last-child .tl-rail::before{bottom:calc(100% - 30px)}
.tl-node{position:absolute;left:50%;top:24px;width:13px;height:13px;border-radius:999px;transform:translateX(-50%);background:var(--ink);box-sizing:border-box}
.tl-node.off{background:var(--paper);border:1px solid var(--ink)}
.tl-when{grid-column:1;grid-row:1;padding:18px 0 14px;font-weight:500}
.tl-body{grid-column:3;grid-row:1;padding:18px 0 14px}
.tl-body .you{font-weight:500;margin-top:6px}
.tl-phase .tl-body{display:flex;align-items:center;gap:16px;padding:22px 0 6px}
.tl-phase .lbl{color:var(--rust);white-space:nowrap}
.tl-dash{border-top:1px dashed var(--oatmeal);flex:1}
.tl-phase .tl-when{padding:30px 0 0}

/* Tomek: kropki = sprawy na głowie */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px}
/* subgrid: kropki, oś, tytuł i tekst w równych rzędach, więc linie osi są na jednej wysokości */
.step{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
.dots{display:flex;flex-wrap:wrap;gap:7px;min-height:41px;align-content:flex-start;margin-bottom:24px}
.axis{border-top:1px solid var(--ink);padding-top:14px;margin-bottom:20px}
.step .h3{margin-bottom:8px}
.coda{margin-top:var(--gap-lg);padding-top:var(--gap-md);border-top:1px solid var(--ink);max-width:none}

/* O mnie */
/* Wycięty portret (przezroczyste tło) stoi na linii na całą szerokość, statystyki pod linią */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.about-ph{grid-column:1 / span 5;grid-row:1 / span 2;align-self:end}
.about-ph img{width:100%;aspect-ratio:4/5;object-fit:contain;object-position:50% 100%}
.about-line{grid-column:1 / -1;grid-row:3;border-top:1px solid var(--ink)}
.about-head{grid-column:7 / -1;grid-row:1;padding-bottom:var(--gap-md);align-self:start}
.about-copy{grid-column:7 / -1;grid-row:2;border-top:1px solid var(--ink)}
.about-copy .lead{padding:20px 0;border-bottom:1px solid var(--line)}
.about-copy .lead:last-child{border-bottom:0}
.stats{grid-column:7 / -1;grid-row:4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;padding-top:24px}
.stats .num{color:var(--ink);margin-bottom:10px}

/* Efekty */
.cs-row{padding-block:28px;border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline}
.cs-row>.lbl{grid-column:1 / span 3}
.cs-row>.xl{grid-column:4 / span 8}
.cs-row>.go{grid-column:12;justify-self:end}

/* Cena */
.pricing{border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.pkg{padding:40px 40px 40px 0;display:flex;flex-direction:column;gap:20px}
.pkg+.pkg{border-left:1px solid var(--line);padding:40px 0 40px 40px}
.pkg-name{font:300 var(--fs-h2)/1.08 var(--display);letter-spacing:-.015em}
.pkg .num{color:var(--ink)}
.pkg .num .netto{font:400 var(--fs-sm)/1 var(--sans);letter-spacing:0;color:var(--muted)}
.pkg .rows>.row{display:block}
.pkg .rows b{font-weight:500}
.pkg .for{font-weight:600;font-size:var(--fs-sm)}

/* FAQ */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;font:400 var(--fs-h3)/1.35 var(--display);min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{content:"+";color:var(--rust);flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:12px;color:var(--muted)}

/* Kontakt */
.contact{background:var(--ink-deep);color:var(--on-dark);padding-block:var(--sec) 56px}
.contact .h2,.contact .h3{color:var(--on-dark)}
.contact-g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:var(--gap-lg);align-items:start}
.contact-copy{grid-column:1 / span 5}
.contact-copy .rows,.contact-copy .rows>.row{border-color:var(--ink)}
.contact-copy .no{color:var(--amber)}
.site .contact-copy a{color:var(--on-dark)}
.lead-form{grid-column:7 / -1;background:var(--paper);color:var(--ink);padding:clamp(28px, 16px + 3vw, 48px);display:flex;flex-direction:column;gap:24px;position:relative}
.lead-form label.f{display:block;font:500 14px/1.4 var(--sans);color:var(--muted);margin-bottom:6px}
.lead-form input:not([type=radio]):not([type=checkbox]),.lead-form select,.lead-form textarea{width:100%;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:10px 0;font:400 16px/1.4 var(--sans);color:var(--ink);background:transparent;min-height:44px}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:2px solid var(--rust);outline-offset:2px}
.lead-form .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lead-form .check{display:flex;gap:10px;align-items:center;min-height:44px;margin:0;font:400 15px/1.3 var(--sans);color:var(--ink)}
.lead-form .check input{width:18px;height:18px;margin:0;accent-color:#26374d;flex:0 0 18px}
.lead-form .consent{align-items:flex-start;gap:12px;font-size:13px;line-height:1.5;color:var(--muted)}
.lead-form .consent input{margin-top:2px}
.lead-form input[aria-invalid=true]:not([type=radio]):not([type=checkbox]){border-bottom-color:var(--rust)}
.lead-form .field-error{color:var(--rust);font-size:14px;margin:6px 0 0}
.lead-form .form-errors{border-left:3px solid var(--rust);padding:12px 16px;background:var(--paper-2);font-size:15px}
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.site .lead-form .foot-doc a{color:var(--muted)}

/* Stopka (na ciemnym tle: kontakt, case studies, podziękowanie) */
.foot{margin-top:var(--sec);border-top:1px solid var(--ink);padding-top:24px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:13px;color:var(--on-dark-muted)}
.foot .brand{font:300 18px/1 var(--display);color:var(--on-dark)}
.foot .links{display:flex;flex-wrap:wrap;gap:0 24px;align-items:center}
.foot .links>a,.foot .links .foot-doc a,.foot .cc{display:inline-flex;align-items:center;min-height:44px}
.site .foot a,.site .foot-doc a{color:var(--on-dark-muted)}
.foot .cc{all:unset;cursor:pointer;color:var(--on-dark-muted);text-decoration:underline}
.foot .cc{display:inline-flex;align-items:center;min-height:44px}
.foot .legal{flex-basis:100%;font-size:12px;line-height:1.6;margin-top:8px}

/* Strona podziękowania */
.thanks{min-height:60vh;display:flex;align-items:center}

/* Case studies (widoki z inline grid-column; skala z :root powyżej) */
.mini-grid{display:grid;grid-template-columns:1fr;column-gap:24px;row-gap:48px}
@media (min-width:600px){.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.mini-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.case-v2 .stats3{display:grid}

/* ---------- Laptop 1024–1199: Tomek jako lista, boks „Dlaczego…” w jednej kolumnie ---------- */
@media (max-width:1199px){
  .steps{grid-template-columns:1fr;row-gap:0;border-top:1px solid var(--ink)}
  .step{display:grid;grid-row:auto;grid-template-rows:none;grid-template-columns:200px minmax(0,1fr);column-gap:var(--col-gap);padding-block:24px;border-bottom:1px solid var(--line)}
  .step .dots{grid-column:1;grid-row:1 / span 3;margin:4px 0 0}
  .step>:not(.dots){grid-column:2}
  .axis{border-top:0;padding-top:0;margin-bottom:8px}
  .boxed .cols-3{grid-template-columns:1fr;row-gap:24px}
  .boxed .cols-3 .lead{max-width:62ch}
}

/* ---------- Tablet 600–1023 ---------- */
@media (max-width:1023px){
  .split>:first-child{grid-column:1 / span 5}
  .split>:last-child{grid-column:6 / -1}
  .desk-ph{grid-column:1 / span 5}
  .desk-copy{grid-column:6 / -1}
  .hero-ph{width:min(220px, 100%)}
  .site-header .wrap{column-gap:24px}
  .site-header nav{column-gap:20px}
  .about-ph{grid-column:1 / span 5;grid-row:1}
  .about-head{grid-column:6 / -1;grid-row:1;align-self:end;padding-bottom:24px}
  .about-line{grid-row:2}
  .about-copy{grid-column:1 / -1;grid-row:3;margin-top:var(--gap-md);border-top:0}
  .stats{grid-column:1 / -1;grid-row:4}
  .cs-row>.lbl{grid-column:1 / -1}
  .cs-row>.xl{grid-column:1 / span 11}
  .contact-copy,.lead-form{grid-column:1 / -1}
  .contact-copy{max-width:640px}
  .tl-row{grid-template-columns:110px 40px minmax(0,1fr);column-gap:16px}
}
@media (max-width:767px){
  .cols-2{grid-template-columns:1fr}
  /* Porównania „Próbowałeś już…” pod sobą: próba, strzałka w dół, efekt */
  .cmp>*{grid-column:1 / -1 !important}
  .cmp{row-gap:4px}
  .cmp-right{flex-direction:column;gap:8px}
  .cmp-right .cmp-arrow{transform:rotate(90deg);margin:8px 0 8px -11px}
  .pkg,.pkg+.pkg{padding:32px 0;border-left:0}
  .pkg+.pkg{border-top:1px solid var(--line)}
}
/* Case studies: kolumny wpisane inline składamy w jedną już od 860 px */
@media (max-width:860px){
  .case-v2 .g>*,.thanks .g>*{grid-column:1 / -1 !important;grid-row:auto !important}
  .case-v2 .stats3{grid-template-columns:1fr !important;row-gap:8px}
  .case-v2 .statnum{font-size:34px !important}
  .case-v2 .m20{font-size:20px !important}
  .cs-hero{padding:40px 0 64px !important}
  .cs-hero .tlink{margin-bottom:32px !important}
  .cs-next{justify-self:start !important}
}

/* ---------- Telefon < 600 ---------- */
@media (max-width:599px){
  .g>*,.split>*,.half>*{grid-column:1 / -1 !important}
  .cols-3{grid-template-columns:1fr;row-gap:24px}
  .site-header nav a:not(.tlink){display:none}
  .site-header .wrap{min-height:60px}
  .hero-top .h1{grid-column:1 / -1;padding-bottom:20px}
  .hero-ph{display:none}
  .hero-me{display:grid;margin-top:48px}
  .desk-ph{grid-column:1 / -1;aspect-ratio:3/2}
  .desk-copy{grid-column:1 / -1}
  .cmp{row-gap:12px}
  .facts.cols-3{grid-template-columns:1fr}
  .facts>div,.facts>div+div{padding:20px 0;border-left:0}
  .facts>div+div{border-top:1px solid var(--line)}
  .tl-row{grid-template-columns:28px minmax(0,1fr);column-gap:12px}
  .tl-rail{grid-column:1;grid-row:1 / span 2}
  .tl-when{grid-column:2;grid-row:1;padding:18px 0 0}
  .tl-body{grid-column:2;grid-row:2;padding:4px 0 14px}
  .tl-phase .tl-when{display:none}
  .tl-phase .tl-body{grid-row:1;padding:24px 0 4px}
  .step{display:flex;flex-direction:column}
  .step .dots{margin:0 0 16px;min-height:0}
  .dots{gap:6px}
  .about-ph{grid-column:1 / -1;grid-row:2;width:min(100%, 300px);justify-self:start;margin-top:24px}
  .about-head{grid-column:1 / -1;grid-row:1;padding-bottom:0}
  .about-line{grid-row:3}
  .about-copy{grid-row:4;margin-top:24px}
  .stats{grid-row:5}
  .cs-row>.go{display:none}
  .cs-row>.xl{grid-column:1 / -1}
  .lead-form{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
  .lead-form .two{grid-template-columns:1fr}
}