/* Telefon jest widokiem bazowym. Uklad rozszerzaja tylko min-width. */
/* Fonty, kolory, zlote tla, studio i ramka: Canva Ani (DAHWG_KfZEY), strony 1-5. */
:root {
  --cream:#f8f3f0; --beige:#ebe6e0; --bluegrey:#bbc9d9;
  --gold:#c09c6a; --gold-title:#b58e30; --sapphire:#2448bc;
  --navy:#112973; --ink:#061c59; --white:#fff;
  --gold-tex:url('assets/canva-gold.webp');
  --studio-tex:url('assets/canva-studio.webp');
  --display:'Playfair Display',Georgia,serif;
  --body:'Open Sans',Arial,sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--white); color:var(--ink); font:16px/1.7 var(--body); -webkit-font-smoothing:antialiased; }
img,video { display:block; max-width:100%; height:auto; }
button,input,textarea { font:inherit; }
button,a,input,summary { touch-action:manipulation; }
a { color:inherit; }
h1,h2,h3,p,figure { margin:0; }
/* Naglowki jak probka Ani: Playfair pogrubiony, akcent zlota kursywa. */
h1,h2 { font-family:var(--display); font-weight:700; line-height:1.14; letter-spacing:-.02em; color:var(--navy); text-wrap:balance; overflow-wrap:break-word; }
h1 { font-size:clamp(28px,8.4vw,34px); line-height:1.12; }
h2 { font-size:clamp(28px,8.4vw,36px); }
h3 { font:600 22px/1.3 var(--display); color:var(--navy); }
h1 em,h2 em { color:var(--gold-title); font-style:italic; font-weight:600; }
p+p { margin-top:18px; }
small,.small { font-size:13px; }
.wrap { width:calc(100% - 40px); max-width:1120px; margin-inline:auto; }
.narrow { width:calc(100% - 40px); max-width:790px; margin-inline:auto; }
.section { padding-block:60px; }
.split,.program-grid,.steps,.testimonials-grid { display:grid; grid-template-columns:minmax(0,1fr); }
.split>* , .program-grid>* , .steps>* , .testimonials-grid>* { min-width:0; }
.desktop-break { display:none; }
.preview-note { background:var(--cream); text-align:center; font-size:12px; line-height:1.5; padding:6px 12px; }
.preview-note span { margin-inline:8px; }

/* Zlota metaliczna krawedz (Canva, strona 5) z oryginalnej tekstury, nie plaski kolor. */
.video-frame,.portrait,.portrait-video { border:3px solid transparent; }

.hero { padding:12px 10px 24px; background:var(--gold) var(--gold-tex) center/cover; text-align:center; }
.hero-inner { max-width:1120px; margin-inline:auto; padding:22px 16px 26px; background:white; border:1px solid var(--gold); outline:1px solid #ffffff80; outline-offset:5px; }
.hero h1 { max-width:930px; margin-inline:auto; }
.lead { max-width:660px; margin:14px auto 18px; font-size:16px; line-height:1.6; }
.video-frame { max-width:610px; margin:0 auto 20px; background:var(--gold-tex) center/cover border-box; box-shadow:0 18px 36px -14px #061c5940,0 4px 12px #061c5912; }
.media-slot { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:7px; padding:14px; background:var(--beige); color:var(--ink); font-size:13px; }
.media-slot small { font-size:12px; }
.video-slot { aspect-ratio:16/9; background:var(--cream) var(--studio-tex) center/cover; }
.play-symbol { width:48px; height:48px; display:grid; place-items:center; padding-left:4px; margin-bottom:4px; border:1px solid var(--gold); border-radius:50%; background:white; color:var(--navy); font:25px/1 var(--body); flex-shrink:0; }
.photo-symbol { font:300 38px/1 var(--body); margin-bottom:10px; }

/* Przyciski zaokraglone (Ania 12.09), granatowe na jasnym, ecru na kolorze (Joanna 22.09). */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:18px; max-width:100%; min-height:54px; padding:14px 30px; background:var(--navy); color:white; border:1px solid var(--navy); border-radius:999px; font-size:15px; font-weight:600; letter-spacing:.01em; line-height:1.4; text-decoration:none; text-align:center; cursor:pointer; transition:background .15s,color .15s; }
.btn span { font-size:19px; font-weight:400; }
.btn:hover { background:var(--ink); }
.btn-light { background:var(--cream); color:var(--navy); border-color:var(--cream); }
.btn-light:hover { background:white; color:var(--ink); }
:is(a,button,input,textarea,summary):focus-visible { outline:3px solid var(--sapphire); outline-offset:4px; }
.btn-light:focus-visible { outline-color:var(--cream); }
.micro { margin-top:11px; font-size:13px; line-height:1.6; }

.contact-section { padding:38px 20px 60px; scroll-margin-top:20px; }
.contact-card { max-width:620px; margin-inline:auto; padding:30px 22px; background:white; border:1px solid var(--gold); box-shadow:0 12px 38px #061c5908; }
.contact-intro { margin-bottom:28px; }
.contact-intro h2 { font-size:clamp(28px,8.2vw,34px); }
.contact-intro p { margin-top:18px; font-size:16px; line-height:1.65; }
.contact-fields { display:grid; grid-template-columns:minmax(0,1fr); }
.pole { margin-bottom:18px; }
.pole-etykieta { display:block; margin-bottom:7px; font-size:15px; font-weight:600; }
input[type=text],input[type=tel],input[type=email],textarea { width:100%; min-width:0; min-height:50px; padding:12px 14px; border:1px solid var(--bluegrey); border-radius:10px; color:var(--ink); background:var(--cream); font-size:16px; }
.podpowiedz { margin-top:6px; font-size:13px; line-height:1.5; }
.qualification-fields { margin-top:4px; padding-top:22px; border-top:1px solid var(--beige); }
fieldset.pytanie { min-width:0; padding:0; margin:0; border:0; }
.pytanie-tytul { display:block; width:100%; padding:0; margin-bottom:16px; font-size:16px; font-weight:600; line-height:1.55; }
.opcje { display:grid; gap:8px; }
.opcje label { display:flex; align-items:center; gap:10px; min-height:50px; padding:12px 14px; border:1px solid var(--bluegrey); border-radius:10px; background:var(--cream); font-size:16px; line-height:1.4; cursor:pointer; }
.opcje input { flex-shrink:0; margin:0; width:18px; height:18px; accent-color:var(--navy); }
.opcje label:has(:checked) { border-color:var(--navy); background:white; }
.form-bottom { margin-top:22px; border-top:1px solid var(--beige); }
.form-bottom .btn { width:100%; }
.zgoda { display:flex; align-items:flex-start; gap:10px; margin:20px 0; font-size:13px; line-height:1.55; }
.zgoda input { flex:none; width:20px; height:20px; margin:1px 0; accent-color:var(--navy); }
.okno-blad { color:#9d2020; font-size:14px; margin-top:16px; }
.blad { border-color:#9d2020!important; }
.blad-pytania { outline:1px solid #9d2020; outline-offset:5px; }
.ukryte,[hidden] { display:none!important; }

.section-heading { max-width:800px; margin:0 auto 34px; text-align:center; }
.testimonials { padding-top:10px; }
.testimonials-grid { max-width:310px; gap:25px; margin-inline:auto; }
.portrait-video { aspect-ratio:9/12; background:var(--studio-tex) center/cover padding-box,var(--gold-tex) center/cover border-box; }
.testimonials-mobile-cta { margin-top:30px; text-align:center; }

.situations .photo-frame { display:none; }
.situations { background:var(--cream) var(--studio-tex) center/cover; }
.split { gap:38px; align-items:center; }
.photo-frame { width:100%; max-width:320px; margin-inline:auto; }
.portrait { width:100%; aspect-ratio:4/5; background:linear-gradient(var(--beige),var(--beige)) padding-box,var(--gold-tex) center/cover border-box; }
.situation-list { margin-top:18px; }
.situation-list article { display:flex; gap:16px; padding:20px 0; border-bottom:1px solid #c09c6a70; }
/* Szafir z palety Ani zostaje w detalu: numery sytuacji. */
.situation-list article>span { flex:none; font:600 20px/1.4 var(--display); color:var(--sapphire); }
.situation-list article>div { min-width:0; }
.situation-list p { margin-top:8px; font-size:16px; }
.qualification { max-width:510px; margin-top:24px; font-size:16px; font-style:italic; }

/* Pas granatowy (Dawid 25.09, wariant B): szafir obok zlotego tla sie gryzl. Zloto na granacie. */
.conversation { text-align:center; background:var(--navy); color:var(--cream); }
.conversation .framed-panel { background:transparent; border-color:var(--gold); }
.conversation h2,.conversation h3 { color:white; }
.conversation h2 em { color:var(--gold); }
.framed-panel { border:1px solid var(--gold); padding:30px 22px; background:white; }
.steps { gap:24px; margin:35px 0 28px; text-align:left; }
.steps article { border-top:1px solid #c09c6a80; padding-top:16px; }
.steps article>span { font:600 36px/1.2 var(--display); color:var(--gold); }
.steps h3 { margin:12px 0; font-size:24px; }
.steps p { font-size:16px; line-height:1.7; }
.conversation-note { max-width:650px; margin:0 auto 26px; font-size:16px; }

.about { padding-block:45px; background:var(--gold) var(--gold-tex) center/cover; }
.about-panel { padding:30px 22px; background:white; border:1px solid var(--gold); outline:1px solid #ffffff80; outline-offset:6px; }
.about h2 { margin-bottom:24px; }
.about p { font-size:16px; line-height:1.75; }
.proof { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; text-align:center; border-top:1px solid var(--gold); margin-top:40px; padding-top:25px; }
.proof strong { display:block; font:700 clamp(22px,6.4vw,26px)/1.2 var(--display); color:var(--gold-title); white-space:nowrap; }
.proof span { display:block; margin-top:8px; font-size:13px; line-height:1.45; overflow-wrap:break-word; }

/* Naglowek programu 1:1 z probki Ani: "Program" kursywa, PRZE granat (Dawid 25.09), MIANA zloto. */
.program-grid { gap:28px; }
.program-title { display:flex; flex-direction:column; align-items:flex-start; line-height:1; letter-spacing:0; }
.program-title em { font-size:clamp(30px,8.4vw,36px); font-weight:600; margin-bottom:6px; }
.program-title>span { font-size:clamp(34px,10vw,44px); color:var(--gold-title); letter-spacing:.01em; }
.program-title .prz { color:var(--navy); }
.program-sub { margin-top:16px; font:italic 500 21px/1.35 var(--display); color:var(--navy); }
.program-time { margin-top:20px; border-top:1px solid var(--gold); padding-top:16px; font-size:15px; font-weight:600; }
.program-grid p { font-size:16px; line-height:1.75; }
.program-list { list-style:none; padding:0; margin:25px 0; }
.program-list li { position:relative; padding:17px 0 17px 28px; border-top:1px solid var(--gold); font-size:16px; line-height:1.65; }
.program-list li:before { content:'✓'; position:absolute; left:0; color:var(--gold-title); font-weight:700; }
.program-grid .small { font-size:14px; }

.questions { background:var(--bluegrey); }
.questions h2 { text-align:center; margin-bottom:30px; }
.faq { display:grid; gap:12px; }
.faq details { padding-inline:18px; border:1px solid var(--gold); border-radius:12px; background:white; }
.faq summary { position:relative; list-style:none; cursor:pointer; padding:20px 30px 20px 0; font-size:16px; font-weight:600; line-height:1.45; color:var(--navy); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:after { content:'+'; position:absolute; right:0; top:15px; font:27px var(--display); color:var(--gold-title); }
.faq details[open] summary:after { content:'−'; }
.faq details p { padding:0 12px 22px 0; font-size:16px; line-height:1.7; }

/* Wlasny kontener i jawne marginesy: nie dziedziczy ukladu ze zdjeciem. */
.closing { padding-block:58px; background:var(--cream); border-top:1px solid var(--gold); }
.closing-layout { max-width:820px; }
.closing-copy { width:100%; text-align:center; }
.closing-copy h2 { max-width:760px; margin-inline:auto; }
.closing-copy>p { max-width:570px; margin:23px auto; font-size:17px; line-height:1.7; }
.closing-copy>.micro { margin:13px auto 0; font-size:13px; }
footer { padding:30px 0 100px; background:white; }
.footer-inner { text-align:center; font-size:14px; }
.footer-placeholder { display:block; margin-top:12px; font-size:13px; }
.sticky-cta { position:fixed; inset:auto 0 0; padding:9px 16px calc(9px + env(safe-area-inset-bottom)); border-top:1px solid var(--gold); background:white; text-align:center; box-shadow:0 -3px 18px #061c5912; z-index:20; }
.sticky-cta .btn { min-height:48px; padding:11px 28px; }
.thank-you { min-height:85vh; display:grid; place-items:center; padding-block:40px; text-align:center; }
.thank-you h1 { margin:20px 0; }
.thank-you p { margin-bottom:28px; }

/* Wiecej oddechu na tablecie, nadal jedna kolumna tresci i formularza. */
@media(min-width:600px) {
  h1 { font-size:42px; } h2 { font-size:40px; }
  .hero { padding:26px 24px 36px; }
  .hero-inner { padding:34px 34px 36px; }
  .lead { font-size:17px; }
  .contact-card { padding:42px 46px; }
  .contact-intro h2 { font-size:39px; }
  .framed-panel,.about-panel { padding:42px; }
  .photo-frame { max-width:380px; }
  .program-title em { font-size:40px; }
  .program-title>span { font-size:50px; }
  .proof strong { font-size:34px; }
  .proof span { font-size:14px; }
  .closing-copy h2 { font-size:44px; }
}
/* Dopiero tutaj pojawiaja sie szersze uklady. */
@media(min-width:900px) {
  body { font-size:17px; }
  .testimonials-mobile-cta { display:none; }
  .situations .photo-frame { display:block; }
  .section { padding-block:80px; }
  .desktop-break { display:initial; }
  .hero { padding:30px 28px 42px; }
  .hero-inner { padding:40px 60px 40px; }
  h1 { font-size:50px; }
  .lead { margin:20px auto 26px; font-size:18px; }
  .btn { font-size:16px; padding:15px 36px; min-height:56px; }
  .micro { font-size:14px; }
  .contact-section { padding:55px 30px 75px; }
  .contact-intro p { font-size:17px; }
  .testimonials-grid { max-width:940px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
  .split { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:44px; }
  .photo-frame { max-width:none; }
  .situation-list p,.qualification { font-size:17px; }
  .steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:44px 0 34px; }
  .steps p,.conversation-note { font-size:17px; }
  .about-grid { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); }
  .about { padding-block:60px; }
  .about p { font-size:17px; }
  .program-grid { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:start; }
  .program-head { position:sticky; top:40px; }
  .program-grid p,.program-list li { font-size:17px; }
  .program-grid .small { font-size:14px; }
  .faq summary { font-size:17px; padding-block:22px; }
  .faq details p { font-size:17px; }
  .closing { padding-block:76px; }
  .closing-copy h2 { font-size:50px; }
  .closing-copy>p { font-size:18px; }
  footer { padding:30px 0; }
  .footer-inner { display:flex; justify-content:space-between; align-items:center; gap:25px; }
  .footer-placeholder { margin:0; }
  .sticky-cta { display:none; }
}
@media(min-width:1200px) {
  h1 { font-size:56px; } h2 { font-size:46px; }
  .section { padding-block:88px; }
  .testimonials-grid { gap:38px; }
  .framed-panel { padding:58px 62px; }
  .split { gap:85px; }
  .situation-list h3 { font-size:24px; }
  .steps { gap:45px; }
  .steps article>span { font-size:43px; }
  .steps h3 { font-size:26px; }
  .about { padding-block:65px; }
  .about-panel { padding:60px; }
  .about-grid { gap:65px; }
  .about h2 { font-size:44px; }
  .proof { margin-top:50px; padding-top:30px; }
  .proof strong { font-size:43px; }
  .program-grid { gap:65px; }
  .program-title em { font-size:44px; }
  .program-title>span { font-size:60px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; } * { transition:none!important; }
}

/* 28.09: nazwa programu w tekście, podpis, opinie tekstowe */
.opinie-tekst{display:grid;gap:18px;max-width:860px;margin:40px auto 0}
.opinie-tekst blockquote{position:relative;margin:0;padding:34px 24px 22px;background:#fff;border-top:2px solid var(--gold);box-shadow:0 14px 34px -18px rgba(15,32,87,.35),0 2px 6px rgba(15,32,87,.06)}
.opinie-tekst .cudzyslow{position:absolute;top:6px;left:20px;font:700 54px/1 var(--display);color:var(--gold-title);opacity:.55}
.opinie-tekst p{font-size:15px;line-height:1.6;color:var(--ink);font-style:italic}
.opinie-tekst cite{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(181,142,48,.35);font-style:normal;font-size:13px}
.opinie-tekst cite strong{font:700 16px/1.2 var(--display);color:var(--navy)}
.opinie-tekst cite span{color:var(--gold-title);letter-spacing:.02em}

.nazwa{white-space:nowrap}.nazwa .prz{color:var(--navy);font-weight:700}.nazwa{color:var(--gold-title);font-weight:600}
.program-title>span{letter-spacing:0}
.podpis{margin-top:14px;font:400 46px/1 'Italianno',cursive;color:var(--gold-title)}
.proof{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
@media (min-width:760px){.opinie-tekst{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.opinie-tekst blockquote{padding:38px 30px 24px}.proof{grid-template-columns:repeat(4,minmax(0,1fr))}}
.conversation .nazwa .prz{color:#fff}
.about p.podpis,.about-grid p.podpis{margin-top:10px;font:400 58px/1 'Italianno',cursive;color:var(--gold-title)}
.opinie-tekst blockquote{display:flex;flex-direction:column}.opinie-tekst cite{margin-top:auto}.opinie-tekst p{margin-bottom:16px}
.opinie-tekst p strong{font-weight:700;color:var(--navy)}
/* 29.09: opinie wideo */
.opinia-wideo{position:relative;margin:0;aspect-ratio:9/16;border:3px solid transparent;background:var(--gold-tex) center/cover border-box;overflow:hidden;box-shadow:0 14px 34px -18px rgba(15,32,87,.45)}
.opinia-wideo video{display:block;width:100%;height:100%;object-fit:cover;background:#0a1a4e}
.opinia-play{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;cursor:pointer}
.opinia-wideo.gra .opinia-play{display:none}
/* 30.09: podpis czcionką najbliższą 'Playful' z Instagrama (wybór Joanny) */
.about p.podpis,.about-grid p.podpis{font:400 64px/1.1 'Ms Madi','Italianno',cursive}
.about p.podpis,.about-grid p.podpis{font-size:clamp(40px,11vw,64px);white-space:nowrap}
/* 29.09: portret w bio (IMG_1532, złota ściana) */
.portret-img{display:block;width:100%;height:auto;min-height:0;aspect-ratio:4/5;object-fit:cover}
/* 30.09: uwagi Joanny - złote numery sytuacji, złota stopka jak wizytówka; na czas bez Piotra 2 opinie wideo */
.situation-list article>span{color:var(--gold-title)}
footer{background:var(--gold-tex) center/cover;color:var(--navy)}
.footer-inner span:first-child{font:700 18px/1.3 var(--display);color:var(--navy)}
.footer-placeholder{color:var(--navy)}
@media (min-width:760px){.testimonials-grid:has(> figure:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}}
/* 30.09: odręczny podpis Joanny (zdjęcie od Dawida) w złocie zamiast czcionki */
.about p.podpis img,.about-grid p.podpis img{display:block;width:min(300px,72vw);height:auto;margin-top:6px}