/* Czcionki serwowane z własnego serwera — bez połączeń z Google przy każdym wejściu.
   Pliki: @fontsource (Cormorant Garamond, Inter), podzbiory latin i latin-ext. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/obrazy/cormorant-garamond-latin-ext-400.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:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(/obrazy/cormorant-garamond-latin-400.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/obrazy/cormorant-garamond-latin-ext-500.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:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(/obrazy/cormorant-garamond-latin-500.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/obrazy/cormorant-garamond-latin-ext-600.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:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(/obrazy/cormorant-garamond-latin-600.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/obrazy/inter-latin-ext-400.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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/obrazy/inter-latin-400.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/obrazy/inter-latin-ext-500.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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/obrazy/inter-latin-500.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/obrazy/inter-latin-ext-600.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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/obrazy/inter-latin-600.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#1A1613;          /* pasek nawigacji */
  --dark:#2A2320;         /* sekcja bonusów */
  --text:#2A2320;         /* tekst na jasnym */
  --text-soft:#5A4F45;    /* tekst drugorzędny na jasnym  6,8:1 */
  --cream:#F3EDE3;        /* tło sekcji */
  --cream-card:#FBF7F0;   /* tło kart */
  --line:#E2D8C8;
  --tan:#B08F5F;          /* akcent na ciemnym  5,1:1 */
  --tan-line:#C2A378;     /* wyłącznie ramki i ozdoby */
  --gold:#725C3B;         /* akcent tekstowy na jasnym  5,6:1 */
  --white:#fff;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --content:78rem; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;line-height:1.14;letter-spacing:.005em}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:var(--content);margin-inline:auto;padding-inline:1.25rem}
@media(min-width:768px){.wrap{padding-inline:2.5rem}}
.view{display:none}.view.on{display:block}
:focus-visible{outline:2px solid var(--tan);outline-offset:3px}
/* Dzieci gridów i flexów domyślnie nie kurczą się poniżej swojej treści —
   bez tego sekcja bonusów rozpychała stronę w poziomie na telefonie. */
.perks>*,.b3>*,.mosaic>*,.split>*,.perk>*,.strip>*,.opwrap>*{min-width:0}
.perk .body>*,.strip .body>*{min-width:0}

/* ——— nadkreślenia z kreskami ——— */
.kicker{display:flex;align-items:center;justify-content:center;gap:.9rem;
  font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.kicker::before,.kicker::after{content:'';width:2rem;height:1px;background:var(--tan-line)}
.kicker.left{justify-content:flex-start}
.kicker.left::before{display:none}
.kicker.plain{display:block;text-align:left}
.kicker.plain::before,.kicker.plain::after{display:none}
.on-dark .kicker,.kicker.on-dark{color:var(--tan)}

/* ——— przyciski ——— */
.btn{display:inline-flex;align-items:center;gap:.9rem;min-height:54px;padding:.9rem 1.9rem;
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--tan-line);border-radius:3px;
  transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn-ghost{color:var(--white);background:rgb(255 255 255/.06)}
.btn-ghost:hover{background:var(--tan-line);color:var(--ink);border-color:var(--tan-line)}
.btn-tan{background:var(--tan-line);color:var(--ink);border-color:var(--tan-line)}
.btn-tan:hover{background:transparent;color:var(--white)}
.btn-tan.on-light:hover{color:var(--text);border-color:var(--gold)}

/* ═══════════ NAGŁÓWEK ═══════════ */
header{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--white)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:62px}
@media(min-width:768px){.bar{height:74px}}
.logo{font-family:var(--serif);font-size:1.45rem;letter-spacing:.16em;text-decoration:none;
  white-space:nowrap;font-weight:400}
nav ul{display:none;list-style:none;margin:0;padding:0;gap:2.1rem;align-items:center}
@media(min-width:900px){nav ul{display:flex}}
nav a{text-decoration:none;font-size:.86rem;padding-bottom:5px;border-bottom:1px solid transparent;
  transition:border-color .3s;white-space:nowrap}
nav a:hover,nav a.active{border-bottom-color:var(--tan-line)}
nav li.only-wide{display:none}
@media(min-width:1100px){nav li.only-wide{display:block}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  background:none;border:0;color:inherit;cursor:pointer;margin-right:-.6rem}
.burger .bl{position:relative;display:block;width:24px;height:13px}
.burger i{position:absolute;left:0;width:100%;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease),top .3s var(--ease)}
.burger i:first-child{top:0}.burger i:last-child{top:11px}
.burger[aria-expanded="true"] i:first-child{top:6px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{top:6px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:55;background:var(--ink);color:var(--white);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.2rem;
  padding:5rem 1.75rem 2rem;text-align:center}
.menu[hidden]{display:none}
.menu a{font-family:var(--serif);font-size:2.1rem;text-decoration:none;padding:.5rem 0;font-weight:400}
.menufoot{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgb(255 255 255/.18);
  width:100%;max-width:20rem}
.menufoot a{font-family:var(--sans);font-size:.95rem;color:rgb(255 255 255/.7);display:block;padding:.25rem 0}

/* ═══════════ STRONA GŁÓWNA — ekran dzielony ═══════════ */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100svh - 62px)}
@media(min-width:768px){.split{min-height:calc(100svh - 74px)}}
.half{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  text-decoration:none;color:var(--white);background:var(--ink);
  border-right:1px solid rgb(255 255 255/.18)}
.half:last-child{border-right:0}
.half>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s var(--ease);filter:saturate(.95)}
.half:hover>img{transform:scale(1.05)}
.half::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgb(16 12 10/.86) 8%,rgb(16 12 10/.42) 48%,rgb(16 12 10/.2) 100%)}
.half .in{position:relative;z-index:2;padding:1.5rem 1.25rem 2.2rem;width:100%;text-align:center}
@media(min-width:768px){.half .in{padding:2.5rem 2.5rem 3.5rem}}
.half h2{font-size:clamp(1.6rem,4.4vw,3.2rem);font-weight:400}
.half p{margin:.8rem auto 0;max-width:24ch;color:rgb(255 255 255/.82);
  font-size:clamp(.8rem,1.5vw,1rem);line-height:1.55}
.half .btn{margin-top:1.4rem;min-height:46px;padding:.7rem 1.1rem;font-size:.6rem;letter-spacing:.12em}
@media(min-width:768px){.half .btn{min-height:54px;padding:.9rem 1.7rem;font-size:.72rem;letter-spacing:.16em}}
.playmark{position:absolute;z-index:2;top:42%;left:50%;transform:translate(-50%,-50%);
  width:clamp(44px,8vw,64px);aspect-ratio:1;border:1px solid var(--tan-line);border-radius:50%;
  display:grid;place-items:center;color:var(--tan-line);transition:background-color .35s,color .35s}
.half:hover .playmark{background:var(--tan-line);color:var(--ink)}

/* ═══════════ HERO FOTOGRAFII ═══════════ */
.phero{position:relative;min-height:min(92svh,820px);display:flex;align-items:center;
  background:var(--ink);color:var(--white);overflow:hidden}
.phero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.phero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgb(16 12 10/.92) 0%,rgb(16 12 10/.74) 38%,rgb(16 12 10/.18) 78%)}
.phero .in{position:relative;z-index:2;width:100%;padding-block:4rem}
.phero h1{font-size:clamp(2rem,4.4vw,3.6rem);margin-top:1.4rem;max-width:20ch;font-weight:400}
.phero .sub{margin:1.5rem 0 0;max-width:46ch;color:rgb(255 255 255/.82)}
.season{display:block;margin-top:2rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:var(--tan)}
.phero .btn{margin-top:1.1rem}
.nocommit{margin:1.1rem 0 0;font-size:.86rem;color:rgb(255 255 255/.58)}

/* ═══════════ sekcje ═══════════ */
section{padding:clamp(4rem,7vw,6.5rem) 0}
.head{text-align:center;max-width:46rem;margin-inline:auto}
.head h2{font-size:clamp(1.9rem,3.8vw,3.1rem);margin-top:1.3rem;font-weight:500}
.head p{margin:1.3rem auto 0;color:var(--text-soft);max-width:40rem}

/* ——— DLACZEGO MY: karty ze zdjęciem ——— */
.perks{display:grid;gap:1rem;margin-top:3rem}
@media(min-width:900px){.perks{grid-template-columns:1fr 1fr;gap:1.2rem}}
.perk{background:var(--cream-card);border:1px solid var(--line);border-radius:10px;
  display:grid;grid-template-columns:1fr;overflow:hidden}
@media(min-width:560px){.perk{grid-template-columns:38% 1fr;align-items:center}}
.perk .pic{position:relative;background:var(--line);min-height:150px;height:100%}
.perk .pic img{width:100%;height:100%;object-fit:cover;min-height:150px}
.perk .body{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:.9rem;padding:1.8rem 1.6rem}
.perk .ico{flex:0 0 auto;width:48px;height:48px;border-radius:50%;background:var(--cream);
  display:grid;place-items:center;color:var(--gold)}
.perk h3{font-size:1.35rem;font-weight:600}
.perk p{margin:.5rem 0 0;font-size:.97rem;line-height:1.6;color:var(--text-soft)}
.ph{display:grid;place-items:center;height:100%;min-height:150px;text-align:center;
  padding:1rem;background:repeating-linear-gradient(45deg,#EFE7DA,#EFE7DA 10px,#E9E0D1 10px,#E9E0D1 20px);
  color:var(--text-soft);font-size:.78rem;line-height:1.45;overflow-wrap:anywhere}

.strip{margin-top:1.2rem;background:var(--cream-card);border:1px solid var(--line);border-radius:10px;
  display:grid;grid-template-columns:1fr;overflow:hidden;align-items:center}
@media(min-width:760px){.strip{grid-template-columns:34% 1fr}}
.strip .body{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:1rem;padding:2rem 1.8rem}
.strip .sep{width:3rem;height:1px;background:var(--line)}
.strip h3{font-size:1.3rem;font-weight:600}
.strip p{margin:.35rem 0 0;color:var(--text-soft);font-size:.97rem}

/* ——— BONUS 2027 ——— */
.bonus{background:var(--dark);color:var(--white)}
.pill{display:inline-flex;align-items:center;gap:.7rem;border:1px solid var(--tan-line);
  border-radius:3px;padding:.55rem 1.3rem;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:600;color:var(--tan-line)}
.bonus .head h2{color:var(--white)}
.bonus .head p{color:rgb(255 255 255/.72)}
.b3{display:grid;gap:2rem;margin-top:3.2rem;text-align:center}
@media(min-width:860px){.b3{grid-template-columns:repeat(3,1fr);gap:2.2rem}}
.b3 .pic,.b3 .ph{border-radius:8px;overflow:hidden;aspect-ratio:16/10}
/* bez tego `height:100%` z .ph zderza się z aspect-ratio i element liczy sobie
   szerokość z wysokości, rozpychając kolumnę */
.b3 .ph{width:100%;height:auto;min-height:0}
.b3 .pic img{width:100%;height:100%;object-fit:cover}
.b3 .ph{background:repeating-linear-gradient(45deg,#3A322B,#3A322B 10px,#332C26 10px,#332C26 20px);
  color:rgb(255 255 255/.62)}
.b3 h3{margin-top:1.4rem;font-size:1.32rem;font-weight:600;padding-top:1.3rem;position:relative}
/* krótka kreska zamiast numerka — ten sam rytm, bez „01." */
.b3 h3::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:2.2rem;height:1px;background:var(--tan-line)}
.b3 p{margin:.7rem auto 0;color:rgb(255 255 255/.72);font-size:.95rem;line-height:1.6;max-width:32ch}
.allbonus{display:block;max-width:36rem;margin:3.2rem auto 0;background:var(--tan-line);
  color:var(--ink);text-align:center;padding:.9rem 1.5rem;border-radius:3px;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;text-decoration:none}

/* ——— PORTFOLIO mozaika ——— */
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;margin-top:3rem}
.mosaic a{overflow:hidden;border-radius:8px;background:var(--line);display:block}
.mosaic img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.mosaic a:hover img{transform:scale(1.06)}
.m1{grid-column:span 6;aspect-ratio:3/2}
.m2{grid-column:span 6;aspect-ratio:3/2}
.m3,.m4,.m5{grid-column:span 2;aspect-ratio:1/1}
@media(min-width:760px){
  .m1{grid-column:span 3}.m2{grid-column:span 3}
  .m3{grid-column:span 2}.m4{grid-column:span 2}.m5{grid-column:span 2}
}
.center{text-align:center}
.center .btn{margin-top:2.5rem}

/* ——— OPINIE ——— */
.opwrap{position:relative;max-width:74rem;margin:3rem auto 0;display:flex;align-items:center;gap:1rem}
.arrow{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  background:var(--cream-card);color:var(--text-soft);cursor:pointer;font-size:1rem;
  display:grid;place-items:center;transition:border-color .3s,color .3s}
.arrow:hover{border-color:var(--gold);color:var(--gold)}
.arrow[disabled]{opacity:.3;cursor:default}
/* tor opinii — na telefonie jedna karta, od 700 px dwie, od 1024 px trzy obok siebie */
.optrack{flex:1 1 auto;display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:1.2rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:.2rem}
.optrack::-webkit-scrollbar{display:none}
@media(min-width:700px){.optrack{grid-auto-columns:calc((100% - 1.2rem)/2)}}
@media(min-width:1024px){.optrack{grid-auto-columns:calc((100% - 2.4rem)/3)}}
.opcard{scroll-snap-align:start;background:var(--cream-card);border:1px solid var(--line);border-radius:10px;
  padding:2.4rem 2rem;text-align:center;margin:0;
  display:flex;flex-direction:column;justify-content:flex-start}
/* dopóki jest jedna opinia, nie udajemy rzędu trzech — karta zostaje wyśrodkowana */
.optrack.one{grid-auto-columns:100%}
.optrack.one .opcard{max-width:46rem;margin-inline:auto;width:100%}
.stars{color:var(--tan);letter-spacing:.3em;font-size:1rem}
.opcard q{display:block;margin-top:1.3rem;font-size:1.05rem;line-height:1.7;color:var(--text);
  quotes:'„' '"'}
.opcard figcaption{margin-top:auto;padding-top:1.4rem}
.opcard .who{font-weight:600}
.opcard .meta{font-size:.84rem;color:var(--text-soft);margin-top:.2rem}
.dots{display:flex;justify-content:center;gap:.55rem;margin-top:1.6rem}
.dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--line);cursor:pointer;padding:0}
.dots button[aria-current="true"]{background:var(--gold)}

/* ——— CTA końcowe ——— */
.final{position:relative;min-height:min(70svh,580px);display:flex;align-items:center;
  background:var(--ink);color:var(--white);overflow:hidden}
.final>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 45%}
.final::after{content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgb(16 12 10/.9) 0%,rgb(16 12 10/.66) 42%,rgb(16 12 10/.12) 82%)}
.final .in{position:relative;z-index:2;width:100%;padding-block:4rem}
.final h2{font-size:clamp(1.9rem,3.8vw,3.1rem);max-width:14ch;font-weight:400}
.final p{margin:1.4rem 0 0;max-width:40ch;color:rgb(255 255 255/.82)}
.final .btn{margin-top:2rem}

/* ——— FILMY: fasada YouTube, iframe dopiero po kliknięciu ——— */
.films{display:grid;gap:1.1rem;margin-top:3rem;text-align:left}
@media(min-width:700px){.films{grid-template-columns:1fr 1fr}}
@media(min-width:1050px){.films{grid-template-columns:repeat(3,1fr)}}
.film{background:var(--cream);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.film .thumb{position:relative;display:block;width:100%;border:0;padding:0;cursor:pointer;
  background:var(--line);aspect-ratio:16/9}
.film .thumb img{width:100%;height:100%;object-fit:cover}
.film .thumb::after{content:'';position:absolute;inset:0;background:rgb(16 12 10/.22);
  transition:background-color .35s}
.film .thumb:hover::after{background:rgb(16 12 10/.05)}
.film .play{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;border:1px solid rgb(255 255 255/.85);
  background:rgb(16 12 10/.4);display:grid;place-items:center;color:#fff;
  transition:background-color .35s,color .35s}
.film .thumb:hover .play{background:var(--tan-line);color:var(--ink);border-color:var(--tan-line)}
.film .time{position:absolute;z-index:2;right:.6rem;bottom:.6rem;background:rgb(16 12 10/.78);
  color:#fff;font-size:.72rem;letter-spacing:.06em;padding:.2rem .5rem;border-radius:2px}
.film iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.film .cap{padding:1.1rem 1.2rem 1.3rem;text-align:center}
.film .cap h3{font-size:1.18rem;font-weight:600}
.film .cap span{display:block;margin-top:.3rem;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-soft)}

/* ——— warianty długości filmu ——— */
.plan{border:1px solid rgb(255 255 255/.22);border-radius:8px;padding:1.6rem 1.2rem;text-align:center}
.plan .len{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tan)}
.plan .amt{display:block;font-family:var(--serif);font-size:2.4rem;line-height:1.1;margin-top:.5rem}
.plan .hrs{display:block;margin-top:.4rem;font-size:.88rem;color:rgb(255 255 255/.6)}

.todo{border:1px dashed var(--tan-line);background:var(--cream-card);padding:1.3rem 1.6rem;
  margin:2.5rem auto 0;max-width:48rem;font-size:.93rem;line-height:1.6;color:var(--text-soft);
  text-align:left;border-radius:6px}
.todo b{color:var(--text)}
.bonus .todo{background:rgb(255 255 255/.05);color:rgb(255 255 255/.75)}
.bonus .todo b{color:var(--white)}

.sticky{position:fixed;inset-inline:0;bottom:0;z-index:60;display:none;align-items:center;
  justify-content:space-between;gap:1rem;background:rgb(26 22 19/.97);color:var(--white);
  padding:.7rem 1.25rem calc(.7rem + env(safe-area-inset-bottom))}
.sticky a{text-decoration:none;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.sticky .cta{background:var(--tan-line);color:var(--ink);padding:.75rem 1.1rem;border-radius:3px}
@media(max-width:899px){.view.on .sticky.show{display:flex}}

/* ——— USŁUGI DODATKOWE ——— */
.sekcja-u{padding-block:clamp(3rem,8vw,5.5rem)}
.u-krem{background:var(--cream-card)}
.u-ciemna{background:var(--ink);color:rgb(255 255 255/.86)}
.u-ciemna h2{color:#fff}
.u-ciemna strong{color:#fff}
.kicker-ciemny{color:var(--tan-line)}
.u-h1{font-size:clamp(2rem,5.4vw,3.4rem);margin-top:1.4rem}
.u-h2{font-size:clamp(1.8rem,3.8vw,2.9rem);margin-top:1.2rem}
.u-gratis{margin:1.8rem auto 0;max-width:40ch;padding:.9rem 1.3rem;
  border:1px solid var(--tan-line);border-radius:8px;color:var(--gold)}
.u-duet{display:grid;gap:2.4rem;align-items:center}
@media(min-width:960px){
  .u-duet{grid-template-columns:1.05fr .95fr;gap:3.4rem}
  .u-odwroc .u-tekst{order:2}
  .u-odwroc .u-obraz{order:1}
}
.u-duet>*{min-width:0}
.u-tekst h2{font-size:clamp(1.7rem,3.4vw,2.6rem);margin:1.2rem 0 1.2rem}
.u-tekst p{line-height:1.75}
.u-obraz img{width:100%;height:auto;display:block;border-radius:10px;
  aspect-ratio:4/5;object-fit:cover}
.u-lista{margin:1.4rem 0 0;padding:0;list-style:none}
.u-lista li{position:relative;padding:.75rem 0 .75rem 1.6rem;line-height:1.65;
  border-top:1px solid rgb(128 128 128/.22)}
.u-lista li::before{content:'';position:absolute;left:0;top:1.45rem;
  width:.5rem;height:1px;background:var(--tan-line)}
.u-kroki h3{margin-top:0;padding-top:1.3rem}
/* .b3 powstało dla ciemnej sekcji bonusów i ma biały tekst akapitów —
   tutaj tło jest kremowe, więc kolor trzeba przywrócić, bo inaczej opis
   kroków jest niewidoczny. */
.u-kroki p{color:var(--text-soft)}

/* ——— FORMULARZ „SPRAWDŹ TERMIN” + KALENDARZ ——— */
.formsec{background:var(--cream-card)}
.formlead{margin:1.3rem auto 0;max-width:52ch;color:var(--text-soft);line-height:1.7}
.formbox{max-width:58rem;margin:2.8rem auto 0;text-align:left}
.fgrid{display:grid;gap:1.15rem}
@media(min-width:760px){.fgrid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.field label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}
.field input{font:inherit;font-size:1rem;color:var(--text);background:var(--white);
  border:1px solid var(--line);border-radius:8px;padding:.8rem 1rem;min-height:50px;width:100%}
.field input:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.field input[aria-invalid="true"]{border-color:#9a3412}
.err{font-size:.82rem;color:#9a3412;min-height:1.15em}
.calwrap{margin-top:1.3rem}
.caltitle{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-soft)}
.cal{background:var(--white);border:1px solid var(--line);border-radius:10px;
  padding:1rem .9rem 1.1rem;margin:.45rem auto 0;max-width:30rem}
.calbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.9rem}
.calbar strong{font-family:var(--serif);font-size:1.3rem;font-weight:500;letter-spacing:.01em}
.calnav{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:transparent;color:var(--text-soft);cursor:pointer;display:grid;place-items:center;font-size:.95rem}
.calnav:hover:not([disabled]){border-color:var(--gold);color:var(--gold)}
.calnav[disabled]{opacity:.3;cursor:default}
.calhead,.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:.28rem}
.calhead span{text-align:center;font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-soft);padding-bottom:.45rem}
.calgrid button,.calgrid i{aspect-ratio:1;max-height:54px;min-width:0;display:grid;place-items:center}
.calgrid button{border:1px solid transparent;border-radius:8px;background:transparent;
  font:inherit;font-size:.95rem;color:var(--text);cursor:pointer}
.calgrid button.sat{color:var(--gold);font-weight:600}
.calgrid button:hover:not([disabled]){border-color:var(--tan-line)}
.calgrid button[disabled]{color:#cabfb1;cursor:default}
.calgrid button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.calnote{margin-top:.95rem;font-size:.84rem;line-height:1.5;color:var(--text-soft);text-align:center}
.fsubmit{margin-top:1.8rem;text-align:center}
.fok{background:var(--white);border:1px solid var(--tan-line);border-radius:10px;
  padding:2rem 1.6rem;text-align:center}
.fok h3{font-family:var(--serif);font-size:1.5rem;font-weight:400}
.fok dl{margin:1.3rem auto 0;max-width:30rem;display:grid;grid-template-columns:auto 1fr;
  gap:.45rem 1.1rem;text-align:left;font-size:.95rem}
.fok dt{color:var(--text-soft)}
.fok dd{margin:0;font-weight:600}
.fok .btn{margin-top:1.6rem}
footer{background:var(--ink);color:rgb(255 255 255/.65);padding:2.6rem 0;text-align:center;font-size:.92rem}
/* na stronie głównej stopka nie wchodzi — ekran dzielony ma zostać pełnoekranowy */
body.is-home footer,body.is-home .note{display:none}
footer a{text-decoration:none;border-bottom:1px solid rgb(255 255 255/.25)}
.note{background:#fff8e6;border-top:1px solid #e8d9a8;color:#5a4a1e;font-size:.84rem;
  padding:1rem 1.5rem;text-align:center;line-height:1.55}
@media(max-width:899px){.note{padding-bottom:5rem}}

/* ─────────────────────────────────────────────────────────────
   Dodatki do systemu designu z prototypu: elementy, których
   prototyp nie potrzebował, bo miał cztery widoki, a serwis ma
   kilkadziesiąt adresów — mapa w menu, stopka z linkami,
   okruszki, treść artykułów, FAQ, cennik, portfolio.
   Te same tokeny (--ink, --tan, --cream…), żaden nowy kolor.
   ───────────────────────────────────────────────────────────── */

/* ── Menu: pełna mapa serwisu zamiast czterech pozycji ───────── */
.menu{justify-content:flex-start;overflow-y:auto}
.menumapa{display:grid;gap:2.2rem 3rem;grid-template-columns:1fr;
  width:100%;max-width:52rem;margin-top:1rem;text-align:left}
@media(min-width:40rem){.menumapa{grid-template-columns:repeat(3,1fr)}}
.menumapa h2{font-family:var(--sans);font-size:.7rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tan-line);
  margin:0 0 .6rem;padding-bottom:.6rem;border-bottom:1px solid rgb(255 255 255/.14)}
.menumapa a{display:block;font-family:var(--serif);font-size:1.3rem;
  line-height:1.5;padding:.22rem 0;color:var(--white);opacity:.88}
.menumapa a:hover,.menumapa a:focus-visible{opacity:1;color:var(--tan-line)}
.menumapa a[aria-current="page"]{color:var(--tan-line);opacity:1}
.menufoot{text-align:left;max-width:52rem}

/* ── Stopka z mapą serwisu (linkowanie wewnętrzne) ───────────── */
footer{text-align:left;padding-top:3.4rem}
.stopka-mapa{display:grid;gap:2rem 3rem;grid-template-columns:1fr;
  padding-bottom:2.4rem;border-bottom:1px solid rgb(255 255 255/.14)}
@media(min-width:40rem){.stopka-mapa{grid-template-columns:repeat(3,1fr)}}
.stopka-mapa h2{font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tan-line);margin:0 0 .9rem}
.stopka-mapa ul{margin:0;padding:0;list-style:none}
.stopka-mapa li{margin:0 0 .45rem}
.stopka-mapa a{color:rgb(255 255 255/.72);text-decoration:none;font-size:.95rem}
.stopka-mapa a:hover,.stopka-mapa a:focus-visible{color:var(--white)}
.stopka-dol{padding-top:1.8rem;font-size:.9rem;line-height:1.9}
.stopka-dol a{color:rgb(255 255 255/.78)}

/* ── Okruszki ────────────────────────────────────────────────── */
.okruszki{background:var(--cream-card);border-bottom:1px solid var(--line);
  font-size:.82rem;color:var(--text-soft)}
.okruszki .wrap{padding-block:.85rem}
.okruszki a{color:var(--text-soft);text-decoration:none}
.okruszki a:hover,.okruszki a:focus-visible{color:var(--gold);text-decoration:underline}
.okruszki [aria-current]{color:var(--text)}
body.is-home .okruszki{display:none}

/* ── Nagłówek podstrony ──────────────────────────────────────── */
.naglowek-strony{background:var(--cream);text-align:center;
  padding-block:clamp(2.6rem,6vw,4.4rem)}
.naglowek-strony h1{font-size:clamp(2rem,5.2vw,3.3rem);margin:1.2rem 0 0;line-height:1.1}
.naglowek-strony .lead{max-width:44rem;margin:1.1rem auto 0;
  font-size:1.06rem;line-height:1.75;color:var(--text-soft)}

/* ── Treść redakcyjna (poradnik, strony lokalne, O nas) ──────── */
.proza{max-width:44rem;margin-inline:auto}
.proza h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2.8rem 0 .9rem;line-height:1.25}
.proza h3{font-family:var(--sans);font-size:1.02rem;font-weight:600;
  letter-spacing:.01em;margin:2rem 0 .6rem}
.proza p{margin:0 0 1.1rem;line-height:1.8;color:var(--text-soft)}
.proza ul,.proza ol{margin:0 0 1.3rem;padding-left:1.2rem;line-height:1.8;color:var(--text-soft)}
.proza li{margin:0 0 .5rem}
.proza strong{color:var(--text);font-weight:600}
.proza a{color:var(--gold)}
.proza figure{margin:2rem 0}
.proza figure img{width:100%;height:auto;border-radius:4px;display:block}
.proza figcaption{margin-top:.6rem;font-size:.86rem;color:var(--text-soft)}

/* Spis treści artykułu */
.spis{background:var(--cream-card);border:1px solid var(--line);border-radius:5px;
  padding:1.4rem 1.6rem;margin:0 0 2.4rem}
.spis h2{font-family:var(--sans);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .8rem;font-weight:600}
.spis ol{margin:0;padding-left:1.1rem;line-height:1.7}
.spis a{color:var(--text);text-decoration:none}
.spis a:hover,.spis a:focus-visible{color:var(--gold);text-decoration:underline}

/* ── FAQ: natywne <details>, zero JS ─────────────────────────── */
.faq{max-width:48rem;margin-inline:auto}
.faq h2{font-size:clamp(1.4rem,2.8vw,1.9rem);margin:2.8rem 0 1rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:1.05rem 2.4rem 1.05rem 0;
  position:relative;font-weight:500;line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:.4rem;top:1.5rem;
  width:9px;height:9px;border-right:1.5px solid var(--tan);border-bottom:1.5px solid var(--tan);
  transform:rotate(45deg);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--gold)}
.faq .odp{padding:0 0 1.3rem;line-height:1.8;color:var(--text-soft)}
.faq .odp p{margin:0 0 .9rem}
.faq .odp :last-child{margin-bottom:0}
.faq .odp a{color:var(--gold)}

/* ── Cennik ──────────────────────────────────────────────────── */
.pakiety{display:grid;gap:1.4rem;grid-template-columns:1fr;margin-top:2.4rem}
@media(min-width:48rem){.pakiety{grid-template-columns:repeat(3,1fr)}}
.pakiet{border:1px solid var(--line);background:var(--white);border-radius:5px;
  padding:2rem 1.7rem;display:flex;flex-direction:column}
.pakiet h3{font-family:var(--serif);font-size:1.5rem;font-weight:400;margin:0 0 .3rem}
.pakiet .czas{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:600}
.pakiet .cena{font-family:var(--serif);font-size:2.4rem;margin:1.1rem 0 .2rem;line-height:1}
.pakiet ul{margin:1.3rem 0 0;padding:0;list-style:none;line-height:1.7;
  color:var(--text-soft);font-size:.95rem;flex:1}
.pakiet li{padding-left:1.4rem;position:relative;margin-bottom:.5rem}
.pakiet li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:7px;
  border-right:1.5px solid var(--tan);border-bottom:1.5px solid var(--tan);
  transform:rotate(45deg) translateY(-50%)}
.pakiet .btn{margin-top:1.8rem;align-self:flex-start}
.wliczone{margin-top:2.6rem;border-top:1px solid var(--line);padding-top:2rem}

/* ── Portfolio i historie ────────────────────────────────────── */
.kafle{display:grid;gap:1.1rem;grid-template-columns:repeat(2,1fr);margin-top:2.4rem}
@media(min-width:52rem){.kafle{grid-template-columns:repeat(3,1fr);gap:1.3rem}}
.kafel{position:relative;display:block;overflow:hidden;border-radius:4px;
  text-decoration:none;color:var(--white);aspect-ratio:4/5;background:var(--dark)}
.kafel img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease)}
.kafel:hover img,.kafel:focus-visible img{transform:scale(1.04)}
.kafel .etykieta{position:absolute;inset:auto 0 0 0;padding:1.6rem 1.2rem .95rem;
  background:linear-gradient(to top,rgb(26 22 19/.78),transparent);
  font-family:var(--serif);font-size:1.25rem}
.kafel .etykieta span{display:block;font-family:var(--sans);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;opacity:.82;margin-top:.2rem}

/* Siatka zdjęć w jednej kategorii */
.galeria{display:grid;gap:.7rem;grid-template-columns:repeat(2,1fr);margin-top:2rem}
@media(min-width:52rem){.galeria{grid-template-columns:repeat(3,1fr);gap:.9rem}}
.galeria img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;
  display:block;border-radius:3px}
.galeria .pion img{aspect-ratio:2/3}

/* ── Lista miast ─────────────────────────────────────────────── */
.miasta{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr);
  margin:2rem 0 0;padding:0;list-style:none}
@media(min-width:40rem){.miasta{grid-template-columns:repeat(3,1fr)}}
@media(min-width:60rem){.miasta{grid-template-columns:repeat(4,1fr)}}
.miasta a{display:block;padding:.75rem .95rem;border:1px solid var(--line);
  border-radius:4px;background:var(--white);text-decoration:none;color:var(--text);
  font-size:.95rem}
.miasta a:hover,.miasta a:focus-visible{border-color:var(--tan-line);color:var(--gold)}

/* ── Karty artykułów poradnika ───────────────────────────────── */
.artykuly{display:grid;gap:1.2rem;grid-template-columns:1fr;margin-top:2.4rem}
@media(min-width:44rem){.artykuly{grid-template-columns:repeat(2,1fr)}}
.artykul{border:1px solid var(--line);background:var(--white);border-radius:5px;
  padding:1.6rem 1.7rem;text-decoration:none;color:var(--text);display:block}
.artykul:hover,.artykul:focus-visible{border-color:var(--tan-line)}
.artykul .dzial{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:600}
.artykul h3{font-family:var(--serif);font-size:1.32rem;font-weight:400;
  margin:.6rem 0 .5rem;line-height:1.3}
.artykul p{margin:0;color:var(--text-soft);line-height:1.65;font-size:.95rem}

/* ── Pasek „brakuje danych” — widoczny, nie ukryty ───────────── */
.brakdanych{border:1px dashed var(--tan-line);background:var(--cream-card);
  border-radius:5px;padding:1.2rem 1.5rem;margin:2rem auto 0;max-width:44rem;
  font-size:.93rem;line-height:1.65;color:var(--text-soft)}
.brakdanych b{color:var(--gold);display:block;font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:.4rem}

/* ── Druk: niech cennik da się wydrukować po ludzku ──────────── */
@media print{
  header,.menu,.sticky,footer,.okruszki{display:none!important}
  body{background:#fff;color:#000}
}

/* ——— KARTY KONTAKTOWE (telefon / mail) ———
   Wcześniej używaliśmy tu .b3, komponentu z ciemnej sekcji — na kremowym tle
   tekst był biały i numery były praktycznie niewidoczne. */
.tel-karty{display:grid;gap:1rem;margin-top:2.4rem;text-align:left}
@media(min-width:760px){.tel-karty{grid-template-columns:repeat(3,1fr);gap:1.2rem}}
.tel-karta{display:block;padding:1.6rem 1.5rem 1.5rem;background:var(--cream-card);
  border:1px solid var(--line);border-radius:10px;text-decoration:none;color:inherit;
  transition:border-color .25s ease,transform .25s ease}
.tel-karta:hover{border-color:var(--tan-line);transform:translateY(-2px)}
.tel-karta .rola{display:block;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tan-line)}
.tel-karta .osoba{display:block;margin-top:.7rem;font-size:.95rem;color:var(--text-soft)}
.tel-karta .numer{display:block;margin-top:.25rem;font-family:var(--serif);
  font-size:clamp(1.5rem,3.2vw,1.9rem);line-height:1.2;color:var(--text)}
.tel-karta .numer.mail{font-size:clamp(1.05rem,2.3vw,1.3rem);word-break:break-all}

/* ——— BIAŁY PASEK MENU ———
   Górna belka na białym tle, tekst i logo ciemne; złoto zostaje jako akcent
   (podkreślenie aktywnej pozycji). Na telefonie belka jest niższa, żeby
   zdjęcia pod nią miały więcej miejsca. */
header{background:#fff;color:var(--ink);
  box-shadow:0 1px 0 rgb(26 22 19/.1)}
header .logo,header nav a,header .burger{color:var(--ink)}
header nav a:hover,header nav a.active,header nav a[aria-current="page"]{
  border-bottom-color:var(--tan-line)}
header .btn-ghost{border-color:rgb(26 22 19/.45);color:var(--ink)}
header .btn-ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
header .btn-tan{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:767px){
  .bar{height:50px}
  header .logo img{height:30px}
  .split{min-height:calc(100svh - 50px)}
  /* Ekran dzielony: mniejszy napis i lżejsze przyciemnienie — widać więcej kadru. */
  .half::after{background:linear-gradient(to top,rgb(16 12 10/.82) 0%,rgb(16 12 10/.38) 30%,rgb(16 12 10/0) 62%)}
  .half .in{padding:1rem .8rem 1.3rem}
  .half h2{font-size:1.4rem;line-height:1.1}
  .half p{margin-top:.4rem;font-size:.74rem;line-height:1.4}
  .half .btn{margin-top:.8rem;min-height:38px;padding:.45rem .7rem}
}

/* ——— PORTFOLIO: JEDNA GALERIA ———
   Układ kolumnowy (masonry), bez przycinania kadrów do kwadratu
   i bez dzielenia na kategorie. */
.galeria-pelna{columns:1;column-gap:1rem;margin-top:.5rem}
@media(min-width:700px){.galeria-pelna{columns:2;column-gap:1.1rem}}
@media(min-width:1100px){.galeria-pelna{columns:3;column-gap:1.2rem}}
.kadr{display:block;width:100%;padding:0;margin:0 0 1.1rem;border:0;background:none;
  cursor:zoom-in;break-inside:avoid;line-height:0;position:relative}
.kadr img{width:100%;height:auto;display:block;border-radius:6px;
  transition:opacity .4s ease,transform .5s var(--ease)}
.kadr:hover img{opacity:.88}
.kadr:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.galeria-stopka{max-width:44rem;margin:2.4rem auto 0;text-align:center;
  color:var(--text-soft);line-height:1.8}

/* Podgląd pojedynczego zdjęcia */
.lupa{position:fixed;inset:0;z-index:80;background:rgb(26 22 19/.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.2rem;gap:1rem}
.lupa[hidden]{display:none}
.lupa img{max-width:min(100%,1400px);max-height:82vh;width:auto;height:auto;
  border-radius:4px}
.lupa p{margin:0;color:rgb(255 255 255/.72);font-size:.9rem;text-align:center;
  max-width:46rem;line-height:1.6}
.lupa button{position:absolute;top:1rem;right:1rem;width:46px;height:46px;
  border:1px solid rgb(255 255 255/.35);background:none;color:#fff;border-radius:50%;
  font-size:1.3rem;cursor:pointer;line-height:1}
.lupa button:hover{background:rgb(255 255 255/.12)}

/* ——— PAKIET FOTO + FILM: DODATKI W CENIE ——— */
.bonus-lead{max-width:48rem;margin:1.2rem auto 0;color:var(--text-soft);line-height:1.8}
.bonusy{display:grid;gap:1.4rem;margin-top:3rem;text-align:left}
@media(min-width:620px){.bonusy{grid-template-columns:1fr 1fr}}
@media(min-width:1050px){.bonusy{grid-template-columns:repeat(5,1fr);gap:1rem}}
.bonus-karta{background:var(--cream-card);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.bonus-karta h3{margin:1.3rem 1.3rem .5rem;font-size:1.2rem}
.bonus-karta p{margin:0 1.3rem 1.5rem;color:var(--text-soft);
  font-size:.95rem;line-height:1.65}
.bon-obraz{margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--line)}
.bon-obraz img{width:100%;height:100%;object-fit:cover;display:block}
.okladka{display:block;width:100%;height:auto;aspect-ratio:4/5;
  border-bottom:1px solid var(--line)}
.pakiet-opis{color:var(--text-soft);font-size:.95rem;line-height:1.65;
  margin:.4rem 0 1.4rem}

/* ——— PODGLĄD STRONY ŚLUBNEJ (zrzut ekranu + opis) ——— */
.podglad-strony{display:grid;gap:2rem;align-items:center}
@media(min-width:900px){.podglad-strony{grid-template-columns:1fr 1fr;gap:3.4rem}}
.podglad-strony figure{margin:0}
.podglad-strony img{width:100%;height:auto;display:block;border-radius:10px;
  border:1px solid var(--line);box-shadow:0 24px 60px -34px rgb(26 22 19/.45)}
.podglad-strony figcaption{margin-top:.9rem;font-size:.85rem;line-height:1.6;
  color:var(--text-soft)}
.podglad-strony h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.5rem);margin:0 0 1.1rem}
.podglad-strony p{color:var(--text-soft);line-height:1.8;margin:0 0 1.1rem}

/* ——— OPINIE I SPRAWDZENIE TERMINU OBOK SIEBIE ——— */
.duo{display:grid;gap:3rem;align-items:start}
@media(min-width:1000px){.duo{grid-template-columns:1fr 1.15fr;gap:4rem}}
.duo h2{font-family:var(--serif);font-weight:400;
  font-size:clamp(1.7rem,3.2vw,2.5rem);margin:1rem 0 1.4rem;line-height:1.2}
.duo .formlead{margin:0 0 2rem;text-align:left;max-width:none}
.duo .formbox{margin:0;max-width:none}
.duo-opinie .opwrap{margin-top:.5rem}
.duo-opinie .btn{margin-top:1.6rem}
@media(min-width:1000px){
  .duo-opinie{position:sticky;top:96px}
}

/* ——— USŁUGI DODATKOWE: dwie usługi, krótko ——— */
.usluga-skroty{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin:1.8rem 0 0}
.usluga-skroty a{padding:.6rem 1.2rem;border:1px solid var(--tan-line);border-radius:999px;
  text-decoration:none;color:var(--text);font-size:.9rem}
.usluga-skroty a:hover{background:var(--tan-line);color:var(--ink)}
.usluga{scroll-margin-top:80px}
.usluga .u-tekst h2{margin:1rem 0 .9rem}
.usluga-zdanie{font-size:1.08rem;line-height:1.75;color:var(--text-soft);margin:0 0 1.6rem}
.usluga-kroki{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.9rem;counter-reset:none}
.usluga-kroki li{position:relative;padding-left:1.5rem}
.usluga-kroki li::before{content:'';position:absolute;left:0;top:.62rem;width:.6rem;height:1px;background:var(--gold)}
.usluga-kroki strong{display:block;font-weight:600}
.usluga-kroki span{display:block;color:var(--text-soft);font-size:.95rem;line-height:1.6;margin-top:.15rem}
.usluga-cena{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;margin:0 0 1.4rem}
.usluga-cena strong{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,3rem);line-height:1}
.usluga-cena span{color:var(--text-soft);font-size:.92rem}
.usluga-przyciski{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}
.usluga .u-obraz img{aspect-ratio:1/1;box-shadow:0 30px 70px -45px rgb(26 22 19/.55)}
.usluga-macie{list-style:none;margin:3rem 0 0;padding:1.6rem 0 0;border-top:1px solid var(--line);
  display:grid;gap:.7rem 2rem;font-size:.95rem;color:var(--text-soft)}
@media(min-width:640px){.usluga-macie{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.usluga-macie{grid-template-columns:repeat(3,1fr)}}
.usluga-macie li{position:relative;padding-left:1.4rem;line-height:1.5}
.usluga-macie li::before{content:'';position:absolute;left:0;top:.35rem;width:.5rem;height:.28rem;
  border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.btn-ghost.on-light{color:var(--text);border-color:var(--tan-line)}
.btn-ghost.on-light:hover{background:var(--tan-line);color:var(--ink)}
.pulapka{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ——— STRONY PRZENIESIONE ZE STAREJ APLIKACJI ———
   Treść układa się w jednej czytelnej kolumnie; kafle i listy odsyłaczy
   dostają własny, lekki układ. */
.przeniesiona .proza{max-width:46rem}
.przeniesiona .proza > h2:first-child{margin-top:0}
.przeniesiona .proza h3{font-family:var(--serif);font-size:1.35rem;font-weight:400;letter-spacing:0;margin:2rem 0 .5rem}
.przeniesiona .kicker.left{margin:0 0 .6rem}
.przeniesiona .proza > .kicker + h2{margin-top:.4rem}
.proza-foto{margin:2rem 0}
.proza-foto img{width:100%;height:auto;display:block;border-radius:10px}
.proza-foto figcaption{margin-top:.6rem;font-size:.85rem;color:var(--text-soft)}
.baner-foto{line-height:0;background:var(--line)}
.baner-foto img{width:100%;height:clamp(14rem,38vw,30rem);object-fit:cover;object-position:50% 38%;display:block}
.baner-srodek img{height:clamp(12rem,30vw,24rem)}
.liczba{font-family:var(--serif);font-size:clamp(2.4rem,6vw,3.4rem);line-height:1;color:var(--text);margin:2rem 0 .3rem!important}
.cytat{margin:2rem 0;padding:1.6rem 1.8rem;background:var(--cream-card);border:1px solid var(--line);border-radius:10px}
.cytat p{font-family:var(--serif);font-size:1.3rem;line-height:1.55;color:var(--text)!important;margin:0 0 .8rem!important}
.cytat cite{font-style:normal;font-size:.9rem;color:var(--text-soft)}
.kafel-link{display:block;padding:1.1rem 1.3rem;margin:0 0 .8rem;background:var(--cream-card);
  border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text);
  transition:border-color .25s ease,transform .25s ease}
.kafel-link:hover{border-color:var(--tan-line);transform:translateY(-2px)}
.kafel-link img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;display:block;margin:0 0 .9rem}
.kafel-link strong{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1.3}
.kafel-link span{display:block;margin-top:.35rem;color:var(--text-soft);font-size:.92rem;line-height:1.55}
.proza ul.kafle-lista,.proza ol.kafle-lista{list-style:none;padding:0;display:grid;gap:.8rem}
.proza .kafle-lista > li{margin:0}
.proza .kafle-lista .kafel-link{margin:0;height:100%}
@media(min-width:640px){.proza .kafle-lista{grid-template-columns:1fr 1fr}}
.przeniesiona .wrap.proza:has(.kafle-lista){max-width:62rem}
.przeniesiona .wrap.proza:has(.kafle-lista) > p,.przeniesiona .wrap.proza:has(.kafle-lista) > h2{max-width:46rem}
.proza nav.spis{margin:1.6rem 0 2rem;padding:1.3rem 1.5rem;background:var(--cream-card);border:1px solid var(--line);border-radius:10px}
.proza nav.spis p{margin:0 0 .6rem;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.proza nav.spis ul{list-style:none;margin:0;padding:0;columns:1;line-height:1.6}
@media(min-width:640px){.proza nav.spis ul{columns:2;column-gap:2rem}}
.proza nav.spis li{margin:0 0 .45rem;break-inside:avoid}
.proza .faq{margin:1.4rem 0}
.proza .btn{margin-top:.6rem}
.proza .films{margin:1.6rem 0 2rem}
.proza .films.films-1{grid-template-columns:1fr}
@media(min-width:700px){.proza .films.films-2,.proza .films.films-3{grid-template-columns:1fr 1fr}}
.przeniesiona .wrap.proza:has(.films-3){max-width:62rem}
.tabela{overflow-x:auto;margin:1.4rem 0}
.tabela table{border-collapse:collapse;width:100%;font-size:.95rem}
.tabela th,.tabela td{border-bottom:1px solid var(--line);padding:.7rem .8rem;text-align:left;vertical-align:top}
dl.opis{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;margin:1.2rem 0}
dl.opis dt{color:var(--text-soft)}
dl.opis dd{margin:0}
.foto-siatka{display:grid;gap:.8rem;margin:2rem 0}
.foto-siatka .proza-foto{margin:0}
.foto-siatka img{aspect-ratio:4/5;object-fit:cover;height:100%}
@media(min-width:560px){.foto-siatka{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.foto-siatka.foto-3{grid-template-columns:repeat(3,1fr)}}
.przeniesiona .wrap.proza:has(.foto-siatka){max-width:62rem}
.przeniesiona .wrap.proza:has(.foto-siatka) > p,.przeniesiona .wrap.proza:has(.foto-siatka) > h2{max-width:46rem}
.proza-foto picture{display:block}
.kafle-siatka{display:grid;gap:1.4rem;margin:1.6rem 0}
@media(min-width:640px){.kafle-siatka{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.kafle-siatka{grid-template-columns:repeat(3,1fr)}}
.kafel-art{min-width:0}
.kafel-art .kafel-link{margin:0 0 .7rem;padding:.6rem}
.kafel-art .kafel-link img{margin:0;aspect-ratio:16/9}
.kafel-art .kafel-link strong{font-family:var(--sans);font-size:.8rem;color:var(--text-soft);margin-top:.5rem}
.kafel-art h2,.kafel-art h3{margin:.2rem 0 .2rem!important;font-size:1.3rem!important}
.kafel-art p{margin:0!important;font-size:.92rem}
.przeniesiona .wrap.proza:has(.kafle-siatka){max-width:68rem}
.przeniesiona .wrap.proza:has(.kafle-siatka) > p,.przeniesiona .wrap.proza:has(.kafle-siatka) > h2{max-width:46rem}

/* ——— LOGO ——— odręczny napis w pasku menu, pełne logo w menu i stopce */
header .logo{display:flex;align-items:center;line-height:0;letter-spacing:0}
header .logo img{height:38px;width:auto;display:block}
@media(min-width:768px){header .logo img{height:46px}}
@media(max-width:767px){header .logo img{height:30px}}
.menu-logo{width:min(15rem,62vw);height:auto;margin:0 auto 1.6rem;display:block}
.stopka-logo{display:block;width:min(13rem,60vw);margin:0 0 1.1rem;line-height:0}
.stopka-logo img{width:100%;height:auto;display:block}
footer a.stopka-logo,footer a.stopka-logo:hover{border:0!important;text-decoration:none!important;background:none}

/* ——— skrót do oferty w nagłówku strony fotografii ——— */
.hero-akcje{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem}
.hero-link{color:#fff;font-size:.9rem;text-decoration:none;padding-bottom:3px;
  border-bottom:1px solid var(--tan-line)}
.hero-link:hover{color:var(--tan-line)}
#oferta{scroll-margin-top:70px}
#oferta .b3 article p{color:rgb(255 255 255/.78)}

/* ——— OFERTA FOTOGRAFA: co jest w każdym reportażu ——— */
.w-cenie-tytul{text-align:center;margin-top:3.2rem;font-family:var(--serif);font-weight:400;
  font-size:1.5rem;color:#fff}
.w-cenie{list-style:none;margin:1.4rem auto 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:.8rem;max-width:60rem}
@media(min-width:860px){.w-cenie{grid-template-columns:repeat(4,1fr);gap:1.2rem}}
.w-cenie li{border:1px solid rgb(255 255 255/.22);border-radius:8px;padding:1.2rem .7rem;text-align:center}
.w-cenie strong{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.25rem,3.6vw,1.7rem);line-height:1.15;color:var(--tan-line)}
.w-cenie span{display:block;margin-top:.35rem;font-size:.86rem;line-height:1.4;color:rgb(255 255 255/.75)}

/* ——— „NAPISZ DO NAS” — odsyłacz do Messengera ———
   Na podstronach pływający przycisk w rogu, na stronie głównej pasek
   pod zdjęciami (tam w rogu zasłaniałby przyciski na kadrach). */
.napisz{position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));z-index:52;
  display:inline-flex;align-items:center;gap:.55rem;background:var(--ink);color:#fff;
  border:1px solid var(--tan-line);border-radius:999px;padding:.7rem 1.15rem;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  text-decoration:none;box-shadow:0 6px 20px rgb(0 0 0/.28);transition:bottom .25s var(--ease),background .2s}
.napisz svg{color:var(--tan-line);flex:none}
.napisz:hover{background:#2A2320}
body.is-home .napisz{position:static;display:flex;justify-content:center;height:48px;padding:0 1rem;
  border:0;border-radius:0;box-shadow:none;background:var(--tan-line);color:var(--ink);
  padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box}
body.is-home .napisz svg{color:var(--ink)}
body.is-home .napisz:hover{background:var(--tan)}
body.is-home .split{min-height:calc(100svh - 50px - 48px)}
@media(min-width:768px){body.is-home .split{min-height:calc(100svh - 74px - 48px)}}
@media print{.napisz{display:none!important}}

/* ——— MENU: duży biały krzyżyk do zamknięcia ———
   Belka jest biała i leży pod otwartym menu, więc zamknięcie musi mieć
   własny, wyraźny przycisk w samym menu. */
.menu-zamknij{position:fixed;top:.6rem;right:.7rem;z-index:2;width:56px;height:56px;
  display:inline-flex;align-items:center;justify-content:center;background:none;border:0;
  color:#fff;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent}
.menu-zamknij:hover,.menu-zamknij:focus-visible{background:rgb(255 255 255/.12)}
@media(min-width:768px){.menu-zamknij{top:1rem;right:1.4rem}}

/* Strona główna na telefonie: w wąskim kadrze „Film ślubny" para stoi z prawej
   strony zdjęcia — przesuwamy kadr tak, żeby było widać oboje w całości. */
@media(max-width:767px){.half:last-child>img{object-position:70% 50%!important}}

/* ——— IKONY PROFILI W PASKU MENU ——— między logo a przyciskiem menu */
.spol{display:flex;align-items:center;gap:.1rem;margin-left:auto}
.spol a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  color:var(--ink);border-radius:50%;transition:color .2s,background .2s}
.spol a:hover,.spol a:focus-visible{color:var(--tan);background:rgb(26 22 19/.06)}
@media(min-width:900px){.spol{margin-left:0}}

/* ——— SESJE NARZECZEŃSKIE: rolka zamiast zdjęć ——— */
.rolka-sekcja{padding-top:0}
.rolka{display:block;position:relative;max-width:60rem;margin:0 auto;border-radius:10px;overflow:hidden;
  line-height:0;text-decoration:none;border:0!important}
.rolka img{width:100%;height:auto;display:block;transition:transform .9s var(--ease)}
.rolka:hover img{transform:scale(1.03)}
.rolka::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgb(16 12 10/.7) 0%,rgb(16 12 10/0) 45%)}
.rolka-znak{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;padding-left:6px;
  background:var(--tan-line);color:var(--ink);box-shadow:0 8px 30px rgb(0 0 0/.35);transition:transform .25s}
.rolka:hover .rolka-znak{transform:translate(-50%,-50%) scale(1.08)}
.rolka-podpis{position:absolute;left:0;right:0;bottom:1.2rem;z-index:2;text-align:center;color:#fff;
  font-family:var(--serif);font-size:clamp(1.15rem,3.4vw,1.6rem);line-height:1.2;padding:0 1rem}
.rolka-info{text-align:center;margin-top:.9rem;font-size:.86rem;color:var(--text-soft)}
@media(max-width:600px){.rolka-znak{width:66px;height:66px}}

/* ——— SESJE RODZINNE: kadry poziome, bez przycinania do pionu ——— */
.foto-siatka.foto-poziome img{aspect-ratio:3/2}
.baner-rodzinny img{object-position:50% 55%}

/* ——— ROLKA W KARCIE „Rolka w 24 godziny" ——— okładka z przyciskiem odtwarzania */
.perk a.pic{display:block;text-decoration:none;border:0!important;overflow:hidden;line-height:0}
.pic-rolka::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgb(16 12 10/.62) 0%,rgb(16 12 10/0) 50%)}
.pic-znak{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:70px;height:70px;border-radius:50%;display:grid;place-items:center;padding-left:5px;
  background:var(--tan-line);color:var(--ink);box-shadow:0 8px 28px rgb(0 0 0/.35);transition:transform .25s}
.pic-rolka:hover .pic-znak{transform:translate(-50%,-50%) scale(1.08)}
.pic-podpis{position:absolute;left:0;right:0;bottom:.9rem;z-index:2;text-align:center;color:#fff;
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;line-height:1.3}
.reel-okno{position:fixed;inset:0;z-index:70;background:rgb(14 11 9/.94);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;padding:3.6rem 1rem 1.2rem}
.reel-ramka{width:min(400px,100%);height:min(100%,740px);flex:0 1 auto;background:#fff;border-radius:10px;overflow:hidden}
.reel-ramka iframe{width:100%;height:100%;border:0;display:block}
.reel-zamknij{position:absolute;top:.6rem;right:.7rem;width:52px;height:52px;display:inline-flex;align-items:center;
  justify-content:center;background:none;border:0;color:#fff;cursor:pointer;border-radius:50%}
.reel-zamknij:hover,.reel-zamknij:focus-visible{background:rgb(255 255 255/.12)}
.reel-link{color:rgb(255 255 255/.8);font-size:.86rem}

/* ——— SEO: nagłówek H1 z małą linijką w środku (wygląd bez zmian) ——— */
.phero h1 .kicker{font-family:var(--sans);margin:0 0 1.4rem;max-width:none}
.phero h1:has(.kicker){margin-top:0}
.phero h1 .h1-haslo{display:block}
/* pas z miastami pod ofertą */
.pas-miast{background:var(--cream);padding:1.6rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pas-miast p{margin:0 auto;max-width:60rem;text-align:center;font-size:.92rem;line-height:1.9;color:var(--text-soft)}
.pas-miast a{color:var(--text);text-decoration:underline;text-decoration-color:var(--tan-line);text-underline-offset:3px}
.pas-miast a:hover{color:var(--tan)}
/* stopka i menu: czwarta kolumna z miastami */
@media(min-width:40rem){.stopka-mapa,.menumapa{grid-template-columns:repeat(2,1fr)}}
@media(min-width:62rem){.stopka-mapa,.menumapa{grid-template-columns:repeat(4,1fr)}}