/* ELL — gabinet psychoterapii. Wariant startowy marki: szałwia, piasek, atrament. */
:root{
  --paper:#FBF8F3;      /* tło główne */
  --sand:#F1EADF;       /* tło sekcji przemiennych */
  --sand-deep:#E4D9C8;  /* linie, ramki */
  --sage:#7E9A88;       /* motyw graficzny */
  --sage-soft:#C9D6CC;
  --forest:#35524A;     /* przyciski, akcent tekstowy (7.6:1 z bielą) */
  --forest-deep:#24392F;/* sekcja ciemna */
  --clay:#B87358;       /* akcent dekoracyjny, nie do tekstu na jasnym */
  --ink:#2A2B27;        /* tekst */
  --muted:#5E5F58;      /* tekst pomocniczy (6:1 na papierze) */
  --todo:#9A5B12;       /* znacznik „do uzupełnienia” */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1120px;
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:var(--forest)}
a:hover{color:var(--forest-deep)}
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0 0 .6em;letter-spacing:-.01em}
h1{font-size:clamp(2.2rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.3rem;font-weight:500}
p{margin:0 0 1em}
em.s{font-family:var(--serif);font-style:italic;color:var(--forest)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.eyebrow{font:600 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--forest);margin:0 0 1.1em;display:flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--clay)}
.lead{font-size:1.2rem;color:var(--muted);max-width:38em}
section{padding:96px 0}
.alt{background:var(--sand)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--forest);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:8px}

/* Miejsca do uzupełnienia — jedna klasa, do usunięcia przed wdrożeniem */
.todo{outline:1.5px dashed var(--todo);outline-offset:2px;background:rgba(214,160,60,.13);border-radius:3px;padding:0 .2em}
.todo-box{border:1.5px dashed var(--todo);background:rgba(214,160,60,.08);border-radius:var(--r);padding:14px 18px;color:var(--todo);font-size:.95rem}
.todo-box::before,.todo-tag::before{content:"DO UZUPEŁNIENIA";display:block;font:600 .7rem/1 var(--sans);letter-spacing:.12em;margin-bottom:.5em}
.todo-tag{color:var(--todo);font-size:.9rem}
.todo-tag::before{display:inline;margin-right:.6em}

/* Przyciski */
.btn{display:inline-flex;align-items:center;gap:.6em;font:600 1rem/1 var(--sans);padding:16px 26px;border-radius:999px;text-decoration:none;border:1.5px solid var(--forest);transition:background .2s,color .2s}
.btn-primary{background:var(--forest);color:#fff}
.btn-primary:hover{background:var(--forest-deep);color:#fff}
.btn-ghost{color:var(--forest);background:transparent}
.btn-ghost:hover{background:var(--forest);color:#fff}
.btn svg{width:18px;height:18px}

/* Nagłówek */
.top{position:sticky;top:0;z-index:50;background:rgba(251,248,243,.92);backdrop-filter:blur(8px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--sand-deep)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{width:40px;height:40px;flex:none}
.brand b{display:block;font:500 1.15rem/1.1 var(--serif)}
.brand small{display:block;font-size:.78rem;color:var(--muted);letter-spacing:.04em}
.nav{display:flex;align-items:center;gap:26px}
.nav a{text-decoration:none;color:var(--ink);font-size:.97rem}
.nav a:hover{color:var(--forest)}
.nav .btn{padding:11px 20px;font-size:.93rem;color:#fff}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:28px;height:28px}

/* Hero */
.hero{padding:72px 0 96px;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1 em{font-style:italic;color:var(--forest)}
.hero .lead{margin-bottom:2em}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-art{position:relative;aspect-ratio:1/1}
.hero-art svg{width:100%;height:100%}

/* Karty: z czym można przyjść */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.card{background:var(--paper);border:1px solid var(--sand-deep);border-radius:var(--r);padding:28px 26px}
.alt .card{background:var(--paper)}
.card{position:relative}
.card .ico{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#E6EDE8;color:var(--forest);margin-bottom:20px}
.card .ico svg{width:24px;height:24px}
.card{transition:border-color .25s,transform .25s}
.card:hover{border-color:var(--sage);transform:translateY(-2px)}
.card p{color:var(--muted);margin:0;font-size:1rem}

/* Jak pracuję */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.quote{font:italic 400 1.45rem/1.45 var(--serif);color:var(--forest-deep);border-left:2px solid var(--clay);padding:4px 0 4px 26px;margin:0 0 1.4em}
.points{list-style:none;padding:0;margin:0;display:grid;gap:22px}
.points li+li{border-top:1px solid var(--sand-deep);padding-top:22px}
.points b{display:block;font-weight:600;margin-bottom:2px}
.points span{color:var(--muted)}

/* Wyróżniona sekcja: metoda pracy */
.feature{background:#E6EDE8;position:relative;overflow:hidden}
.feature::before{content:"";position:absolute;width:760px;height:760px;right:-220px;top:50%;transform:translateY(-50%);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg transform='rotate(-35 200 200)' fill='none' stroke='%2335524A' stroke-width='1.2'%3E%3Ccircle cx='150' cy='200' r='110'/%3E%3Ccircle cx='250' cy='200' r='110' stroke='%23B87358'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;opacity:.35;pointer-events:none}
.feature .wrap{position:relative}
.feature .quote{color:var(--forest-deep)}
.feature .points{background:rgba(251,248,243,.72);border-radius:var(--r);padding:32px 30px;backdrop-filter:blur(2px)}

/* Jedna linia z pętlą w tle cennika (po obu stronach, wariant C, Aron 2026-10-18) */
.lines{position:relative;overflow:hidden}
.lines::before,.lines::after{content:"";position:absolute;width:420px;height:420px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M10 330C70 330 90 250 120 200 160 130 250 110 280 170 310 230 250 290 190 270 120 245 140 140 220 120 300 100 360 160 330 230 310 280 340 320 395 300' stroke='%2335524A'/%3E%3Cpath d='M190 270C120 245 140 140 220 120' stroke='%23B87358' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.45;pointer-events:none}
.lines::before{left:max(-300px,calc((100vw - 1120px)/2 - 350px));bottom:-130px;transform:rotate(20deg)}
.lines::after{right:max(-170px,calc((100vw - 1120px)/2 - 250px));top:40px;transform:scaleX(-1) rotate(10deg)}
.lines .wrap{position:relative;z-index:1}

/* Pierwszy krok */
.timeline{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:s;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:23px;height:1px;background:var(--sand-deep)}
.timeline li{position:relative;padding-top:68px}
.timeline li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;background:var(--paper);border:1px solid var(--sage);display:flex;align-items:center;justify-content:center;font:400 1rem/1 var(--serif);color:var(--forest)}
.timeline p{color:var(--muted);margin:0}
.facts{display:flex;flex-wrap:wrap;gap:10px 36px;margin-top:40px;padding-top:24px;border-top:1px solid var(--sand-deep)}
.fact{display:flex;align-items:center;gap:10px;font-size:.97rem;color:var(--muted)}
.fact::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--clay)}

/* O mnie */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.photo{aspect-ratio:4/5;border-radius:200px 200px var(--r) var(--r);background:linear-gradient(160deg,var(--sage-soft),var(--sand-deep));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--forest);text-align:center;padding:24px;position:relative;overflow:hidden}
.photo svg{width:72px;height:72px;opacity:.7}
.photo small{font-size:.85rem;color:var(--forest-deep);max-width:16em}
/* Zdjęcie terapeutki (od Arona, kadr bez zmian 1044 × 1457), ramka prostokątna z przesuniętym tłem szałwiowym */
.photo.has-img{aspect-ratio:1044/1457;padding:0;background:none;border-radius:28px;overflow:visible;margin:0 18px 18px 0}
.photo.has-img::before{content:"";position:absolute;inset:18px -18px -18px 18px;border-radius:28px;background:var(--forest-deep)}
.photo.has-img picture{position:absolute;inset:0;border-radius:28px;overflow:hidden}
.photo.has-img img{width:100%;height:100%;object-fit:cover;display:block}
.creds{margin-top:36px;display:grid;gap:0;border-top:1px solid var(--sand-deep)}
.cred{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--sand-deep)}
.cred dt{font-weight:600;color:var(--forest)}
.cred dd{margin:0}
.cred dd ul{margin:0;padding-left:1.1em}

.motto{margin:0 0 28px;padding:0 0 0 26px;border-left:2px solid var(--clay)}
.motto p{font:italic 400 1.35rem/1.45 var(--serif);color:var(--forest-deep);margin:0}
.about-note{max-width:40em}
.about-note p{margin:0 0 1em;color:var(--ink)}

/* Cennik i zasady */
.pricelist{list-style:none;margin:40px 0 0;padding:0;max-width:880px;border-top:1px solid var(--sand-deep)}
.pricelist li{display:flex;align-items:baseline;gap:20px;padding:26px 0;border-bottom:1px solid var(--sand-deep)}
.pricelist h3{margin:0 0 .25em}
.pricelist .meta{color:var(--muted);font-size:.95rem;margin:0}
.pricelist .dots{flex:1;border-bottom:1px dotted var(--sage);transform:translateY(-6px);min-width:24px}
.pricelist .amt{font:400 1.7rem/1 var(--serif);color:var(--forest-deep);margin:0;white-space:nowrap}
.terms{margin-top:28px;max-width:880px;display:flex;flex-wrap:wrap;gap:14px 40px}
.term{display:flex;gap:12px;align-items:center}
.term .ico{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#E6EDE8;color:var(--forest)}
.term .ico svg{width:18px;height:18px}
.term p{margin:0;color:var(--muted);font-size:.97rem}
.term b{color:var(--ink);font-weight:600}

/* FAQ */
.faq{max-width:820px;margin-top:40px}
.faq details{border-bottom:1px solid var(--sand-deep)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font:500 1.15rem/1.35 var(--serif);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:18px;font:300 1.6rem/1 var(--sans);color:var(--forest);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:0 0 22px;max-width:44em}

/* Kontakt */
.contact{background:var(--forest-deep);color:#EDE8DF}
.contact h2,.contact h3{color:#fff}
.contact .eyebrow{color:var(--sage-soft)}
.contact .lead{color:#C9CFC8}
.contact a{color:#fff}
.contact .todo{background:rgba(255,200,120,.16);outline-color:#E2B270}
.contact .todo-box{color:#F0C88C;border-color:#E2B270;background:rgba(255,200,120,.06)}
.c-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px}
.c-card{display:flex;flex-direction:column;align-items:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:36px 36px 32px}
.c-label{display:flex;align-items:center;gap:10px;font:600 .8rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--sage-soft);margin:0 0 20px}
.c-label svg{width:20px;height:20px}
.contact .c-big{font:400 clamp(1.4rem,2.1vw,1.75rem)/1.3 var(--serif);color:#fff;text-decoration:none;margin:0 0 14px}
.c-note{color:#C9CFC8;font-size:1rem;margin:0 0 28px}
.c-card .btn{margin-top:auto}
.c-note+.c-note{margin-top:-16px}
.c-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto}
.c-btns .btn{margin-top:0}
.contact .btn-primary{background:#fff;color:var(--forest-deep);border-color:#fff}
.contact .btn-primary:hover{background:var(--sand);color:var(--forest-deep)}
.contact .btn-ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.contact .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.crisis{margin-top:24px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:32px 36px;display:grid;grid-template-columns:1fr 2fr;gap:24px 48px;align-items:start}
.crisis h3{font-size:1.2rem}
.crisis p{color:#C9CFC8;font-size:.98rem;margin:0}
.crisis ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
.crisis li{display:flex;flex-direction:column;gap:4px}
.crisis li a{font:500 1.3rem/1.1 var(--serif);white-space:nowrap;text-decoration:none}
.crisis li span{color:#C9CFC8;font-size:.92rem;line-height:1.45}

/* Stopka */
.foot{background:#1B2B24;color:#AEB7AF;font-size:.92rem;padding:32px 0}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px}
.foot p{margin:0}
.foot a{color:inherit;text-decoration:none}
.foot a:hover{color:#fff}
.foot nav{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.foot .totop{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);color:#DDE3DC;transition:background .2s,border-color .2s}
.foot .totop:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);color:#fff}
.foot .totop svg{width:18px;height:18px}

/* Przycisk dzwonienia na telefonie */
.callbar{display:none}

/* Strony podrzędne */
.doc{max-width:760px;padding:64px 24px 96px;margin:0 auto}
.doc h1{font-size:clamp(2rem,4vw,2.8rem)}
.doc h2{font-size:1.5rem;margin-top:1.6em}

@media (max-width:960px){
  .lines::before,.lines::after{opacity:.3}
  .hero .wrap,.split,.about,.crisis{grid-template-columns:1fr;gap:40px}
  .crisis{gap:20px}
  .hero-art{max-width:420px;margin:0 auto;order:-1}
  .grid3{grid-template-columns:1fr 1fr}
  .about .photo{max-width:380px}
}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px;border-bottom:1px solid var(--sand-deep)}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--sand)}
  .nav .btn{margin-top:12px;justify-content:center;border-bottom:0}
}
@media (max-width:640px){
  .feature::before{width:460px;height:460px;right:-200px;top:auto;bottom:-160px;transform:none}
  .feature .points{padding:24px 20px}
  .lines::before{display:none}
  .lines::after{width:300px;height:300px;right:-150px;top:auto;bottom:-150px}
  section{padding:72px 0}
  .wrap{padding:0 20px}
  .hero{padding:20px 0 64px}
  .hero-art{max-width:130px;margin:0}
  .hero .wrap{gap:24px}
  .grid3,.c-cards,.crisis ul{grid-template-columns:1fr}
  .term{align-items:flex-start}
  .hero-art{display:none}
  .timeline{grid-template-columns:1fr;gap:28px}
  .timeline::before{left:23px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .timeline li{padding:8px 0 0 68px}
  .pricelist li{flex-wrap:wrap;gap:8px}
  .pricelist .dots{display:none}
  .pricelist li>div{flex:1 1 100%}
  .c-card,.crisis{padding:28px 24px}
  .c-card .btn{width:100%;justify-content:center}
  .c-btns{width:100%}
  .cred{grid-template-columns:1fr;gap:6px}
  .cta-row .btn{width:100%;justify-content:center}
  .brand small{display:none}
  .foot{padding-bottom:96px}
  .callbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;gap:10px;transform:translateY(140%);transition:transform .25s}
  .callbar.show{transform:none}
  .callbar a{flex:1;justify-content:center;box-shadow:0 6px 20px rgba(36,57,47,.25)}
  .callbar .btn-ghost{background:var(--paper)}
}
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ---------- 404 ---------- */
body:has(.e404){display:flex;flex-direction:column;min-height:100vh}
.e404{padding:88px 0 112px;flex:1;display:flex;align-items:center}
.e404>.wrap{width:100%}
.e404 .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.e404 h1{font-size:clamp(2.4rem,5vw,3.6rem)}
.e404 h1 em{font-style:italic;color:var(--forest)}
.e404-btns{display:flex;flex-wrap:wrap;gap:12px;margin:2em 0 0}
.e404-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:40px;padding-top:24px;border-top:1px solid var(--sand-deep)}
.e404-links a{text-decoration:none;color:var(--muted);font-size:.97rem}
.e404-links a:hover{color:var(--forest)}
.e404-art svg{width:100%;max-width:400px;display:block;margin:0 auto}
@media (max-width:900px){
  .e404{padding:48px 0 72px}
  .e404 .wrap{grid-template-columns:1fr;gap:40px}
  .e404-art{order:-1}
  .e404-art svg{max-width:220px}
}
@media (max-width:520px){.e404-cta{display:none}}