/* GRAIL STUDIO WEDDINGS — jasny, elegancki system */
:root{
--bg:#f7f4ee;
--surface:#fffdf8;
--line:#e5ddcf;
--ink:#23201b;
--dim:#6f695e;
--muted:#a59d8e;
--wine:#7c2735;
--wine-b:#9a3a4a;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--bg); color:var(--ink);
font-family:'Roboto', sans-serif; font-weight:300; font-size:16px; line-height:1.65;
overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--wine); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
/* Nagłówek */
header{
position:fixed; top:0; left:0; right:0; z-index:120;
padding:20px 5vw; display:flex; align-items:center; justify-content:space-between;
transition:background 0.3s, padding 0.3s, box-shadow 0.3s;
}
header.scrolled{
background:rgba(247,244,238,0.94); backdrop-filter:blur(8px);
padding:12px 5vw; box-shadow:0 1px 0 var(--line);
}
header.on-dark:not(.scrolled){ color:#f5f2ec; }
header.on-dark:not(.scrolled) nav a{ color:rgba(245,242,236,0.85); }
header.on-dark:not(.scrolled) .w-cta{ border-color:rgba(245,242,236,0.6); color:#f5f2ec; }
.w-logo{
font-family:'Cormorant Garamond', serif; font-weight:500; font-size:21px; letter-spacing:0.04em;
}
.w-logo em{ font-style:italic; color:var(--wine); }
header.on-dark:not(.scrolled) .w-logo em{ color:#e8b7ab; }
header nav{ position:absolute; left:50%; transform:translateX(-50%); }
nav ul{ list-style:none; display:flex; gap:30px; }
nav a{
font-family:'Montserrat', sans-serif; font-weight:500; font-size:11px;
letter-spacing:0.22em; text-transform:uppercase; color:var(--dim); transition:color 0.2s;
}
nav a:hover, nav a.active{ color:var(--wine); }
.w-cta{
font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px; letter-spacing:0.2em;
text-transform:uppercase; border:1px solid var(--wine); color:var(--wine);
padding:11px 20px; border-radius:6px; transition:background 0.25s, color 0.25s;
}
.w-cta:hover{ background:var(--wine); color:#fff; }
.burger{
display:none; background:none; border:1px solid var(--line); border-radius:6px;
width:42px; height:42px; cursor:pointer; z-index:130;
}
.burger span{ display:block; width:18px; height:1.5px; background:currentColor; margin:4px auto; transition:transform 0.25s, opacity 0.25s; }
.burger.open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
.mobile-menu{
position:fixed; inset:0; background:var(--bg); z-index:115; padding-top:90px;
display:flex; flex-direction:column; align-items:center; gap:6px;
opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.mobile-menu.open{ opacity:1; pointer-events:auto; }
.mobile-menu a{
font-family:'Cormorant Garamond', serif; font-size:1.9rem; padding:10px 20px; color:var(--ink);
}
.mobile-menu a:hover, .mobile-menu a.active{ color:var(--wine); font-style:italic; }
@media (max-width:900px){ header nav{ display:none; } header .w-cta{ display:none; } .burger{ display:block; } }
/* Typografia sekcji */
section{ padding:120px 5vw; position:relative; }
.eyebrow{
font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px;
letter-spacing:0.34em; text-transform:uppercase; color:var(--wine); margin-bottom:16px;
}
h1, h2{ font-family:'Cormorant Garamond', serif; font-weight:400; line-height:1.12; }
h2{ font-size:clamp(2rem, 3.4vw, 3rem); margin-bottom:14px; }
h1 em, h2 em{ font-style:italic; color:var(--wine); }
.section-head{ max-width:680px; margin-bottom:56px; }
.section-head p{ color:var(--dim); font-size:0.97rem; }
.center .section-head, .center .eyebrow{ text-align:center; margin-left:auto; margin-right:auto; }
/* HERO */
.w-hero{
min-height:100vh; min-height:100svh; position:relative; overflow:hidden;
display:flex; flex-direction:column; justify-content:flex-end; padding:0 6vw 12vh;
color:#f7f3ec;
}
.w-hero .hv{ position:absolute; inset:0; }
.w-hero .hv video, .w-hero .hv img{ width:100%; height:100%; object-fit:cover; }
.w-hero .hv::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(24,19,15,0.68) 0%, rgba(24,19,15,0.18) 55%, rgba(24,19,15,0.3) 100%); }
.w-hero-content{ position:relative; z-index:2; max-width:760px; }
.w-hero .eyebrow{ color:#e8c9be; display:flex; align-items:center; gap:14px; }
.w-hero .eyebrow::before{ content:''; width:36px; height:1px; background:#e8c9be; }
.w-hero h1{ font-size:clamp(2.6rem, 5.6vw, 5rem); margin-bottom:26px; font-weight:400; }
.w-hero h1 em{ color:#f0d3c4; }
.w-hero p.lede{ max-width:520px; color:rgba(247,243,236,0.85); margin-bottom:34px; font-size:1.02rem; }
.btn-solid{
display:inline-block; background:var(--wine); color:#fff; border:none; cursor:pointer;
font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.2em;
text-transform:uppercase; padding:16px 30px; border-radius:6px; transition:background 0.25s;
}
.btn-solid:hover{ background:var(--wine-b); }
.btn-line{
display:inline-block; font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px;
letter-spacing:0.2em; text-transform:uppercase; color:var(--wine);
border:1px solid var(--wine); padding:15px 28px; border-radius:6px; transition:background 0.25s, color 0.25s;
}
.btn-line:hover{ background:var(--wine); color:#fff; }
.w-hero .btn-line{ border-color:rgba(247,243,236,0.6); color:#f7f3ec; }
.w-hero .btn-line:hover{ background:rgba(247,243,236,0.14); }
.cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
/* Cytat / intro */
.quote{ max-width:760px; margin:0 auto; text-align:center; }
.quote p{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.4; color:var(--ink);
}
.quote .q-by{ margin-top:20px; font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); }
/* Galeria kadrów */
.wgrid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.wg{
border-radius:12px; overflow:hidden; position:relative; background:var(--line);
aspect-ratio:4/3; cursor:pointer;
}
.wg.tall{ aspect-ratio:3/4; grid-row:span 2; }
.wg img{ width:100%; height:100%; object-fit:cover; transition:transform 0.7s cubic-bezier(.2,.8,.2,1); }
.wg:hover img{ transform:scale(1.05); }
@media (max-width:900px){ .wgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .wgrid{ grid-template-columns:1fr; } .wg.tall{ grid-row:span 1; aspect-ratio:4/3; } }
/* Kafle oferty */
.offer3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.offer{
background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
display:flex; flex-direction:column; transition:transform 0.35s, box-shadow 0.35s;
}
.offer:hover{ transform:translateY(-5px); box-shadow:0 24px 50px rgba(35,32,27,0.09); }
.offer .o-img{ aspect-ratio:4/3; overflow:hidden; }
.offer .o-img img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s; }
.offer:hover .o-img img{ transform:scale(1.05); }
.offer .o-body{ padding:28px 26px 32px; display:flex; flex-direction:column; flex-grow:1; }
.offer h3{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.55rem; margin-bottom:8px; }
.offer p{ color:var(--dim); font-size:0.9rem; flex-grow:1; }
.offer .o-price{
font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.14em;
text-transform:uppercase; color:var(--wine); margin:18px 0 16px;
}
.offer .o-link{
font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.18em;
text-transform:uppercase; color:var(--ink); border-top:1px solid var(--line); padding-top:16px;
transition:color 0.2s;
}
.offer:hover .o-link{ color:var(--wine); }
@media (max-width:900px){ .offer3{ grid-template-columns:1fr; max-width:460px; margin:0 auto; } }
/* Pakiety (panele) */
.pk3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; max-width:1050px; margin:0 auto; }
.pk{
background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:34px 30px;
display:flex; flex-direction:column;
}
.pk.mid{ border-color:var(--wine); box-shadow:0 18px 44px rgba(0,0,0,0.08); }
.pk .pk-name{
font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.26em;
text-transform:uppercase; text-align:center; color:var(--dim);
}
.pk.mid .pk-name{ color:var(--wine); }
.pk .pk-price{
font-family:'Cormorant Garamond', serif; font-weight:500; font-size:2.1rem; text-align:center;
margin:10px 0 22px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.pk ul{ list-style:none; flex-grow:1; }
.pk li{ padding:9px 0 9px 24px; position:relative; color:var(--dim); font-size:0.9rem; border-bottom:1px solid var(--line); }
.pk li:last-child{ border-bottom:none; }
.pk li::before{ content:''; position:absolute; left:2px; top:16px; width:6px; height:6px; border-radius:50%; background:var(--wine); }
.pk .btn-line{ margin-top:22px; text-align:center; }
.pk-note{ text-align:center; color:var(--muted); font-size:0.84rem; margin-top:26px; max-width:720px; margin-left:auto; margin-right:auto; }
@media (max-width:900px){ .pk3{ grid-template-columns:1fr; max-width:440px; } }
/* Kroki */
.wsteps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; max-width:1050px; margin:0 auto; }
.wstep{ text-align:center; padding:30px 20px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.wstep .n{
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:2rem; color:var(--wine); line-height:1;
margin-bottom:12px;
}
.wstep b{ display:block; font-family:'Montserrat', sans-serif; font-weight:600; font-size:0.85rem; letter-spacing:0.06em; margin-bottom:8px; }
.wstep p{ color:var(--dim); font-size:0.84rem; }
@media (max-width:900px){ .wsteps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .wsteps{ grid-template-columns:1fr; } }
/* O nas blok */
.about2{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center; max-width:1050px; margin:0 auto; }
.about2 .a-img{ border-radius:14px; overflow:hidden; aspect-ratio:3/4; }
.about2 .a-img img{ width:100%; height:100%; object-fit:cover; }
.about2 p{ color:var(--dim); margin-bottom:14px; font-size:0.95rem; }
@media (max-width:900px){ .about2{ grid-template-columns:1fr; gap:36px; } }
/* Opinie */
.wrev3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.wrev{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:30px 28px; }
.wrev p{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.12rem; line-height:1.5; margin-bottom:16px; }
.wrev .who{ font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
@media (max-width:900px){ .wrev3{ grid-template-columns:1fr; } }
/* FAQ karty */
.faq-cards{ max-width:800px; margin:0 auto; }
.faqc{ background:var(--surface); border:1px solid var(--line); border-radius:12px; margin-bottom:12px; padding:0 24px; }
.faqc summary{
display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 0; cursor:pointer;
font-family:'Montserrat', sans-serif; font-weight:500; font-size:0.95rem; list-style:none;
}
.faqc summary::-webkit-details-marker{ display:none; }
.faqc summary::after{
content:''; width:12px; height:12px; border-radius:50%; background:var(--wine); flex-shrink:0;
transition:transform 0.3s;
}
.faqc[open] summary::after{ transform:scale(1.25); }
.faqc[open]{ border-color:var(--wine); }
.faqc p{ padding:0 0 20px; color:var(--dim); font-size:0.9rem; }
/* Portfolio / reportaże */
.rep-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }
.rep{
background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden;
transition:transform 0.35s, box-shadow 0.35s;
}
.rep:hover{ transform:translateY(-5px); box-shadow:0 24px 50px rgba(35,32,27,0.09); }
.rep .r-img{ aspect-ratio:16/10; overflow:hidden; }
.rep .r-img img{ width:100%; height:100%; object-fit:cover; transition:transform 0.6s; }
.rep:hover .r-img img{ transform:scale(1.04); }
.rep .r-body{ padding:24px 26px 28px; }
.rep .r-meta{ font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--wine); margin-bottom:8px; }
.rep h3{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.5rem; }
@media (max-width:900px){ .rep-grid{ grid-template-columns:1fr; } }
/* Strona reportażu */
.rep-hero{ min-height:70vh; }
.rep-meta-line{
display:flex; gap:26px; flex-wrap:wrap; justify-content:center; margin-top:14px;
font-family:'Montserrat', sans-serif; font-weight:500; font-size:11px; letter-spacing:0.2em;
text-transform:uppercase; color:rgba(247,243,236,0.85);
}
.rep-intro{ max-width:700px; margin:0 auto; text-align:center; color:var(--dim); font-size:1rem; }
.masonry{ columns:3 300px; column-gap:14px; }
.masonry img{ border-radius:12px; margin-bottom:14px; width:100%; }
@media (max-width:700px){ .masonry{ columns:2 160px; } }
/* Kontakt */
.kontakt2{ display:grid; grid-template-columns:0.72fr 1.28fr; gap:22px; max-width:1080px; margin:0 auto; align-items:stretch; }
.kpanel{ background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:36px 34px; }
.kpanel .k-label{ font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--wine); margin-bottom:12px; }
.kpanel h2{ font-size:1.8rem; margin-bottom:20px; }
.k-lines{ list-style:none; margin:18px 0; }
.k-lines li{ padding:10px 0; border-bottom:1px solid var(--line); font-size:0.92rem; }
.k-lines li:first-child{ border-top:1px solid var(--line); }
.k-lines a:hover{ color:var(--wine); }
.field input, .field select, .field textarea{
width:100%; background:var(--bg); border:1px solid var(--line); border-radius:8px;
color:var(--ink); font-family:'Roboto', sans-serif; font-size:0.95rem;
padding:14px 16px; outline:none; transition:border-color 0.2s;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--wine); }
.field textarea{ min-height:130px; resize:vertical; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.contact-form{ display:flex; flex-direction:column; gap:14px; }
.contact-form button{ width:100%; }
.form-status{ font-size:0.9rem; padding:14px 18px; border:1px solid var(--line); border-radius:8px; display:none; }
.form-status.ok{ display:block; border-color:#5c8a63; color:#41684a; }
.form-status.err{ display:block; border-color:var(--wine); color:var(--wine); }
@media (max-width:900px){ .kontakt2{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }
/* CTA pas */
.big-cta{ text-align:center; padding:110px 5vw; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.big-cta h2{ font-size:clamp(2rem, 4vw, 3.2rem); margin-bottom:12px; }
.big-cta p{ color:var(--dim); margin-bottom:30px; }
/* Stopka */
footer{
padding:44px 5vw; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
font-family:'Montserrat', sans-serif; font-weight:500; font-size:10px; letter-spacing:0.18em;
text-transform:uppercase; color:var(--muted);
}
footer a:hover{ color:var(--wine); }
.foot-ig{ display:inline-flex; align-items:center; gap:8px; }
.foot-ig svg{ width:16px; height:16px; }
/* Lightbox */
.lightbox{
position:fixed; inset:0; z-index:400; background:rgba(24,19,15,0.9);
display:flex; align-items:center; justify-content:center; padding:4vw;
opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:92vw; max-height:86vh; border-radius:10px; }
.lightbox .lb-close{ position:absolute; top:22px; right:28px; background:none; border:none; color:#fff; font-size:32px; cursor:pointer; opacity:0.8; }
/* Reveal */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity 0.7s ease, transform 0.7s ease; }
[data-reveal].in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }
/* FAB mobile */
.fab-stack{ position:fixed; right:16px; bottom:18px; z-index:140; display:none; flex-direction:column; gap:12px; }
.fab{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(35,32,27,0.25); }
.fab svg{ width:24px; height:24px; }
.fab-wa{ background:#25D366; color:#fff; }
.fab-tel{ background:var(--wine); color:#fff; }
@media (max-width:900px){ .fab-stack{ display:flex; } section{ padding:90px 6vw; } }
/* ============================================================
v1.1 - bielsze tła, czarne napisy, złoto oszczędnie, obrączki
============================================================ */
:root{
--bg:#ffffff;
--surface:#faf9f6;
--line:#e9e5dd;
--ink:#171513;
--dim:#5f5b54;
--muted:#9d9789;
--wine:#1b2433;
--wine-b:#2b3652;
}
::selection{ background:var(--wine); color:#fff; }
header.scrolled{ background:rgba(255,255,255,0.94); }
.mobile-menu{ background:#ffffff; }
/* Logo z obrączkami */
.w-logo{ display:flex; align-items:center; gap:10px; color:var(--ink); }
.w-logo .rings{ width:26px; height:26px; flex-shrink:0; }
.w-logo .rings .r1{ stroke:var(--ink); }
.w-logo .rings .r2{ stroke:var(--wine); }
header.on-dark:not(.scrolled) .w-logo .rings .r1{ stroke:#fff; }
/* Złoto tylko akcentowo - przyciski w czerni */
.btn-solid{ background:var(--ink); }
.btn-solid:hover{ background:var(--wine); }
.w-cta{ border-color:var(--ink); color:var(--ink); }
.w-cta:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-line{ border-color:var(--ink); color:var(--ink); }
.btn-line:hover{ background:var(--ink); color:#fff; }
.pk .btn-line{ border-color:var(--line); }
.pk.mid{ border-color:var(--wine); box-shadow:0 18px 44px rgba(0,0,0,0.08); }
.offer .o-link{ color:var(--ink); }
nav a:hover, nav a.active{ color:var(--ink); }
.mobile-menu a:hover, .mobile-menu a.active{ color:var(--wine); }
.w-hero .eyebrow{ color:#f6f2ec; }
.w-hero .eyebrow::before{ background:#f6f2ec; }
.w-hero h1 em{ color:#f6f2ec; }
header.on-dark:not(.scrolled) .w-logo em{ color:#f6f2ec; }
.fab-tel{ background:var(--ink); color:#fff; }
/* Hero: zdjęcie z powolnym filmowym zoomem zamiast abstrakcyjnego wideo */
.hv.kenburns img{ animation:kenburns 22s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
@media (prefers-reduced-motion: reduce){ .hv.kenburns img{ animation:none; } }
/* Logo z GPT: znak obrączek (czarny/bialy zależnie od tła headera) */
.w-logo img{ height:32px; width:auto; }
.w-logo .lg-light{ display:none; }
header.on-dark:not(.scrolled) .lg-dark{ display:none; }
header.on-dark:not(.scrolled) .lg-light{ display:block; }
/* Pełny logotyp w headerze */
.w-logo img{ height:60px; }
header.scrolled .w-logo img{ height:48px; transition:height 0.3s; }
@media (max-width:900px){ .w-logo img{ height:48px; } }
/* ============================================================
v1.5 - bajery: marquee, wipe-reveal, podkreślenia, sticky CTA
============================================================ */
/* Logo większe */
.w-logo img{ height:78px; }
header.scrolled .w-logo img{ height:60px; transition:height 0.3s; }
@media (max-width:900px){ .w-logo img{ height:58px; } }
/* Kursywne marquee */
.wmarq{ overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; background:var(--surface); }
.wmarq-track{ display:flex; width:max-content; animation:wmarq 44s linear infinite; }
.wmarq-chunk{
font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;
font-size:clamp(1.4rem, 2.4vw, 2rem); color:var(--ink); white-space:nowrap;
display:flex; align-items:center; gap:34px; padding-right:34px;
}
.wmarq-chunk .sep{ color:var(--wine); font-size:0.8em; }
@keyframes wmarq{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
/* Zdjęcia: odsłanianie klipem + delikatny zoom */
.wg[data-reveal]{ opacity:1; transform:none; clip-path:inset(14% 6% 14% 6% round 12px); transition:clip-path 1s cubic-bezier(.2,.8,.2,1); }
.wg[data-reveal] img{ transform:scale(1.14); transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
.wg[data-reveal].in{ clip-path:inset(0 0 0 0 round 12px); }
.wg[data-reveal].in img{ transform:scale(1); }
.wg:hover img{ transform:scale(1.05) !important; }
/* Rysujące się złote podkreślenie kursywy w nagłówkach */
h2 em{ position:relative; }
h2 em::after{
content:''; position:absolute; left:0; right:0; bottom:0.04em; height:1px;
background:var(--wine); transform:scaleX(0); transform-origin:left;
transition:transform 1.1s cubic-bezier(.2,.8,.2,1) 0.25s;
}
h2.h2in em::after{ transform:scaleX(1); }
/* Sekcja filmu - kinowy kadr z przyciskiem play */
.film-feature{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:21/9; cursor:pointer; }
.film-feature img{ width:100%; height:100%; object-fit:cover; transition:transform 6s ease; }
.film-feature:hover img{ transform:scale(1.05); }
.film-feature::after{ content:''; position:absolute; inset:0; background:rgba(24,19,15,0.28); transition:background 0.4s; }
.film-feature:hover::after{ background:rgba(24,19,15,0.16); }
.film-feature .play{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
width:92px; height:92px; border-radius:50%;
border:1px solid rgba(255,255,255,0.85); background:rgba(255,255,255,0.12); backdrop-filter:blur(4px);
display:flex; align-items:center; justify-content:center; transition:transform 0.35s, background 0.35s;
}
.film-feature:hover .play{ transform:translate(-50%,-50%) scale(1.08); background:rgba(255,255,255,0.22); }
.film-feature .play::before{
content:''; margin-left:6px;
border-left:22px solid #fff; border-top:13px solid transparent; border-bottom:13px solid transparent;
}
.film-feature .ff-label{
position:absolute; left:34px; bottom:28px; z-index:2; color:#fff;
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.5rem;
}
.videobox{
position:fixed; inset:0; z-index:420; background:rgba(20,17,14,0.94);
display:flex; align-items:center; justify-content:center; padding:4vw;
opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.videobox.open{ opacity:1; pointer-events:auto; }
.videobox video{ max-width:min(1100px, 92vw); max-height:80vh; border-radius:12px; }
.videobox .vb-close{ position:absolute; top:22px; right:30px; background:none; border:none; color:#fff; font-size:34px; cursor:pointer; opacity:0.85; }
/* Sticky CTA po przewinięciu (desktop) */
.sticky-cta{
position:fixed; left:50%; bottom:26px; transform:translate(-50%, 90px); z-index:130;
background:var(--ink); color:#fff; border-radius:999px; padding:14px 28px;
font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.18em;
text-transform:uppercase; box-shadow:0 14px 40px rgba(23,21,19,0.3);
transition:transform 0.45s cubic-bezier(.2,.8,.2,1), background 0.25s;
}
.sticky-cta:hover{ background:var(--wine); }
.sticky-cta.show{ transform:translate(-50%, 0); }
@media (max-width:900px){ .sticky-cta{ display:none; } }
/* ============================================================
v1.6 - STRONA GŁÓWNA: nowy schemat oferty (dwa panele + pasek)
============================================================ */
.duo-wrap{ max-width:1080px; margin:0 auto; }
.duo-offer{ display:grid; grid-template-columns:1fr 1fr; gap:2px; border-radius:16px 16px 0 0; overflow:hidden; }
.duo{
position:relative; min-height:520px; display:flex; flex-direction:column; justify-content:flex-end;
padding:34px 36px; color:#f2ecdf; overflow:hidden; background:#241b15;
}
.duo .d-bg{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
.duo:hover .d-bg{ transform:scale(1.05); }
.duo::after{
content:''; position:absolute; inset:0;
background:linear-gradient(to top, rgba(23,17,13,0.88) 0%, rgba(23,17,13,0.35) 55%, rgba(23,17,13,0.3) 100%);
}
.duo .d-tag{
position:absolute; top:22px; left:24px; z-index:2;
display:flex; align-items:center; gap:9px;
font-family:'Montserrat', sans-serif; font-weight:500; font-size:10px;
letter-spacing:0.26em; text-transform:lowercase; color:rgba(242,236,223,0.75);
}
.duo .d-tag .ic{
width:18px; height:18px; border:1px solid rgba(242,236,223,0.55); border-radius:4px;
display:flex; align-items:center; justify-content:center; font-size:8px;
}
.duo .d-body{ position:relative; z-index:2; }
.duo h3{
font-family:'Cormorant Garamond', serif; font-weight:400; font-size:2.2rem; margin-bottom:6px; color:#f6f1e6;
}
.duo p{ color:rgba(242,236,223,0.8); font-size:0.9rem; max-width:340px; }
.duo-bar{
background:#1c1510; color:#f2ecdf; border-radius:0 0 16px 16px;
display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
padding:26px 36px;
}
.duo-bar b{ font-family:'Cormorant Garamond', serif; font-weight:400; font-size:1.35rem; display:block; }
.duo-bar span{ color:var(--wine-b); font-size:0.85rem; }
.duo-bar a{
font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.2em;
text-transform:uppercase; color:#f6f1e6; border-bottom:1px solid rgba(246,241,230,0.5);
padding-bottom:6px; transition:color 0.25s, border-color 0.25s; white-space:nowrap;
}
.duo-bar a:hover{ color:var(--wine-b); border-color:var(--wine-b); }
@media (max-width:900px){
.duo-offer{ grid-template-columns:1fr; }
.duo{ min-height:380px; }
.duo-bar{ padding:22px 24px; }
}
/* ============================================================
v2.0 - STRONA GŁÓWNA wg PDF: filmy YT, reportaże, opinie pion, IG
============================================================ */
/* Filmy z YT - grid 2x2, własne miniatury, imiona par */
.yt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1080px; margin:0 auto; }
.ytc{
position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9;
cursor:pointer; background:#1c1510;
}
.ytc img{ width:100%; height:100%; object-fit:cover; transition:transform 0.8s cubic-bezier(.2,.8,.2,1); }
.ytc:hover img{ transform:scale(1.04); }
.ytc::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(23,17,13,0.6) 0%, rgba(23,17,13,0.08) 45%); }
.ytc .yt-play{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
width:64px; height:64px; border-radius:50%;
border:1px solid rgba(255,255,255,0.8); background:rgba(255,255,255,0.1); backdrop-filter:blur(3px);
display:flex; align-items:center; justify-content:center; transition:transform 0.3s, background 0.3s;
}
.ytc:hover .yt-play{ transform:translate(-50%,-50%) scale(1.1); background:rgba(255,255,255,0.2); }
.ytc .yt-play::before{ content:''; margin-left:5px; border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; }
.ytc .yt-names{
position:absolute; left:22px; bottom:18px; z-index:2; color:#f6f1e6;
font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.35rem; letter-spacing:0.06em;
}
.ytc .yt-names span{ display:block; font-family:'Montserrat', sans-serif; font-weight:500; font-size:9px; letter-spacing:0.3em; text-transform:uppercase; color:rgba(246,241,230,0.65); margin-top:3px; }
@media (max-width:800px){ .yt-grid{ grid-template-columns:1fr; } }
/* 4 zdjęcia - odnośniki do reportaży */
.rep4{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:1080px; margin:0 auto; }
.rep4 a{
position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/10; display:block;
}
.rep4 img{ width:100%; height:100%; object-fit:cover; transition:transform 0.8s cubic-bezier(.2,.8,.2,1); }
.rep4 a:hover img{ transform:scale(1.05); }
.rep4 a::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(23,17,13,0.55) 0%, rgba(23,17,13,0.05) 45%); }
.rep4 .r4-cap{
position:absolute; left:22px; bottom:18px; z-index:2; color:#f6f1e6;
font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.25rem;
}
.rep4 .r4-cap span{ display:block; font-family:'Montserrat', sans-serif; font-weight:500; font-size:9px; letter-spacing:0.28em; text-transform:uppercase; color:rgba(246,241,230,0.65); margin-top:3px; }
@media (max-width:800px){ .rep4{ grid-template-columns:1fr; } }
/* Opinie z pionowym zdjęciem */
.revp3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:0 auto; }
.revp{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.revp .rp-img{ aspect-ratio:3/4; background:#e4ddd0; overflow:hidden; }
.revp .rp-img img{ width:100%; height:100%; object-fit:cover; }
.revp .rp-body{ padding:24px 24px 28px; display:flex; flex-direction:column; flex-grow:1; }
.revp p{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.02rem; line-height:1.55; flex-grow:1; }
.revp .rp-who{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.revp .rp-who b{ font-family:'Montserrat', sans-serif; font-weight:600; font-size:0.85rem; display:block; }
.revp .rp-who span{ font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); }
.gbadge-line{ display:flex; justify-content:center; margin-bottom:40px; }
@media (max-width:900px){ .revp3{ grid-template-columns:1fr; max-width:420px; } }
/* Instagram - siatka na końcu (styl runawayvows) */
.ig-block{ position:relative; padding:0; border-top:1px solid var(--line); }
.ig-grid{ display:grid; grid-template-columns:repeat(8, 1fr); }
.ig-grid a{ aspect-ratio:1/1; overflow:hidden; display:block; position:relative; }
.ig-grid img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s, opacity 0.3s; }
.ig-grid a:hover img{ transform:scale(1.06); opacity:0.85; }
.ig-invite{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
background:rgba(255,255,255,0.96); padding:20px 34px; text-align:center;
border:1px solid var(--line); box-shadow:0 20px 60px rgba(23,17,13,0.22);
}
.ig-invite .ii-top{ font-family:'Montserrat', sans-serif; font-weight:600; font-size:9px; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); }
.ig-invite .ii-main{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.35rem; margin-top:4px; color:var(--ink); }
@media (max-width:900px){ .ig-grid{ grid-template-columns:repeat(4, 1fr); } .ig-invite{ padding:14px 22px; } }
/* Lightbox YouTube */
.ytbox{
position:fixed; inset:0; z-index:430; background:rgba(20,17,14,0.94);
display:flex; align-items:center; justify-content:center; padding:4vw;
opacity:0; pointer-events:none; transition:opacity 0.3s;
}
.ytbox.open{ opacity:1; pointer-events:auto; }
.ytbox .yt-frame{ width:min(1100px, 92vw); aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; }
.ytbox iframe{ width:100%; height:100%; border:0; }
.ytbox .yb-close{ position:absolute; top:22px; right:30px; background:none; border:none; color:#fff; font-size:34px; cursor:pointer; opacity:0.85; }
/* ============================================================
v2.1 - OFERTA: pakiety z ✓/✗, "każda oferta zawiera" nad panelami
============================================================ */
/* Pasek "KAŻDA OFERTA ZAWIERA" nad panelami */
.pk-top{ text-align:center; max-width:760px; margin:0 auto 38px; }
.pk-top .pt-title{
font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px;
letter-spacing:0.3em; text-transform:uppercase; color:var(--ink); margin-bottom:10px;
}
.pk-top .pt-items{
display:flex; justify-content:center; gap:26px; flex-wrap:wrap;
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.05rem; color:var(--dim);
}
.pk-top .pt-items span{ position:relative; }
.pk-top .pt-items span:not(:last-child)::after{
content:'✦'; position:absolute; right:-17px; top:2px; font-size:0.6em; color:var(--wine); font-style:normal;
}
/* Panele pakietów - powiększenie na hover */
.pk{ transition:transform 0.4s cubic-bezier(.2,.8,.2,1), box-shadow 0.4s, border-color 0.3s; }
.pk:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 26px 56px rgba(35,32,27,0.12); border-color:var(--wine); z-index:2; }
/* Pozycje zawarte / niezawarte */
.pk li{ display:flex; align-items:flex-start; gap:11px; padding-left:0; }
.pk li::before{ display:none; }
.pk li .mk{
flex-shrink:0; width:17px; height:17px; margin-top:3px;
display:flex; align-items:center; justify-content:center; font-size:11px; line-height:1;
}
.pk li.yes .mk{ color:var(--wine); }
.pk li.no{ color:var(--muted); }
.pk li.no .mk{ color:#c9c2b4; }
.pk li.no .txt{ text-decoration:line-through; text-decoration-color:rgba(157,151,137,0.5); }
/* Jeden CTA pod pakietami */
.pk-cta{ text-align:center; margin-top:44px; }
.pk-cta .pc-note{ color:var(--muted); font-size:0.86rem; margin-top:14px; }
/* ============================================================
v2.2 - PORTFOLIO: hub (zdjęcia/film), rolki IG, filmy, duża galeria
============================================================ */
/* Hub: nagłówek + zapętlona rolka obok */
.pf-intro{ display:grid; grid-template-columns:1.35fr 0.65fr; gap:60px; align-items:center; max-width:1080px; margin:0 auto 70px; }
.pf-intro p{ color:var(--dim); font-size:0.97rem; max-width:460px; }
.pf-loop{ border-radius:14px; overflow:hidden; border:1px solid var(--line); max-width:280px; margin-left:auto; }
.pf-loop video{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:var(--line); }
@media (max-width:900px){ .pf-intro{ grid-template-columns:1fr; gap:34px; } .pf-loop{ margin:0 auto; } }
/* Hub: dwie opcje - zdjęcia albo film */
.pf-choice{ display:grid; grid-template-columns:1fr 1fr; gap:34px; max-width:900px; margin:0 auto; }
.pfc{ text-align:center; }
.pfc .pfc-img{
border-radius:14px; overflow:hidden; aspect-ratio:3/4; position:relative; background:var(--line);
transition:transform 0.45s cubic-bezier(.2,.8,.2,1), box-shadow 0.45s;
}
.pfc:hover .pfc-img{ transform:translateY(-8px); box-shadow:0 30px 60px rgba(35,32,27,0.16); }
.pfc .pfc-img img{ width:100%; height:100%; object-fit:cover; transition:transform 0.9s cubic-bezier(.2,.8,.2,1); }
.pfc:hover .pfc-img img{ transform:scale(1.06); }
.pfc .pfc-line{ width:38px; height:1px; background:var(--wine); margin:22px auto 14px; }
.pfc .pfc-name{
font-family:'Cormorant Garamond', serif; font-weight:400; font-size:1.9rem; letter-spacing:0.16em;
text-transform:uppercase; color:var(--ink); transition:color 0.3s;
}
.pfc:hover .pfc-name{ color:var(--wine); }
.pfc .pfc-sub{ font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); margin-top:8px; }
@media (max-width:700px){ .pf-choice{ grid-template-columns:1fr; gap:40px; max-width:340px; } }
/* 4 rolki z IG obok siebie */
.reels4{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; max-width:1000px; margin:0 auto; }
.rl{ position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--line); }
.rl video, .rl img{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block; }
.rl .rl-ig{
position:absolute; top:10px; right:10px; z-index:2; width:26px; height:26px;
display:flex; align-items:center; justify-content:center; color:#fff; opacity:0.9;
}
.rl .rl-ig svg{ width:15px; height:15px; }
@media (max-width:900px){ .reels4{ grid-template-columns:repeat(2,1fr); } }
/* Lista filmów z opisami */
.filmlist{ max-width:1000px; margin:0 auto; display:flex; flex-direction:column; gap:64px; }
.flm{ }
.flm .flm-thumb{
position:relative; border-radius:14px; overflow:hidden; aspect-ratio:16/9; cursor:pointer; background:#1c1510;
}
.flm .flm-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform 0.9s cubic-bezier(.2,.8,.2,1); }
.flm:hover .flm-thumb img{ transform:scale(1.04); }
.flm .flm-thumb::after{ content:''; position:absolute; inset:0; background:rgba(23,17,13,0.22); transition:background 0.4s; }
.flm:hover .flm-thumb::after{ background:rgba(23,17,13,0.1); }
.flm .flm-play{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
width:76px; height:76px; border-radius:50%; border:1px solid rgba(255,255,255,0.85);
background:rgba(255,255,255,0.12); backdrop-filter:blur(3px);
display:flex; align-items:center; justify-content:center; transition:transform 0.35s, background 0.35s;
}
.flm:hover .flm-play{ transform:translate(-50%,-50%) scale(1.09); background:rgba(255,255,255,0.22); }
.flm .flm-play::before{ content:''; margin-left:5px; border-left:19px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; }
.flm .flm-body{ max-width:720px; margin:22px auto 0; text-align:center; }
.flm h3{ font-family:'Cormorant Garamond', serif; font-weight:500; font-size:1.6rem; letter-spacing:0.04em; }
.flm .flm-meta{ font-family:'Montserrat', sans-serif; font-weight:500; font-size:10px; letter-spacing:0.26em; text-transform:uppercase; color:var(--wine); margin:8px 0 12px; }
.flm p{ color:var(--dim); font-size:0.93rem; }
/* Bardzo duża galeria (masonry) */
.biggal{ columns:4 260px; column-gap:12px; }
.biggal figure{ break-inside:avoid; margin:0 0 12px; border-radius:10px; overflow:hidden; cursor:pointer; }
.biggal img{ width:100%; display:block; transition:transform 0.8s cubic-bezier(.2,.8,.2,1), filter 0.5s; }
.biggal figure:hover img{ transform:scale(1.04); }
@media (max-width:700px){ .biggal{ columns:2 140px; column-gap:8px; } .biggal figure{ margin-bottom:8px; } }
/* Nawigacja wewnątrz portfolio */
.pf-tabs{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:52px; }
.pf-tabs a{
font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px; letter-spacing:0.22em;
text-transform:uppercase; color:var(--dim); border:1px solid var(--line); border-radius:999px;
padding:11px 24px; transition:all 0.25s;
}
.pf-tabs a:hover{ border-color:var(--wine); color:var(--wine); }
.pf-tabs a.on{ background:var(--ink); border-color:var(--ink); color:#fff; }
/* ============================================================
v2.3 - REPORTAŻ: rozdziały, narracja, ekipa, pobieranie zdjęć
============================================================ */
/* Hero reportażu */
.rp-hero{ min-height:88vh; }
.rp-hero .rp-names{ font-family:'Cormorant Garamond', serif; font-weight:400; font-size:clamp(2.8rem, 6vw, 5.4rem); line-height:1.04; }
.rp-hero .rp-where{
font-family:'Montserrat', sans-serif; font-weight:500; font-size:11px; letter-spacing:0.28em;
text-transform:uppercase; color:rgba(247,243,236,0.8); margin-top:18px;
}
/* Kim są - dwie osoby */
.people{ display:grid; grid-template-columns:1fr 1fr; gap:60px; max-width:1000px; margin:0 auto; }
.person{ display:grid; grid-template-columns:130px 1fr; gap:24px; align-items:center; }
.person .p-img{ border-radius:10px; overflow:hidden; aspect-ratio:3/4; background:var(--line); }
.person .p-img img{ width:100%; height:100%; object-fit:cover; }
.person .p-name{ font-family:'Cormorant Garamond', serif; font-size:1.6rem; margin-bottom:8px; }
.person p{ color:var(--dim); font-size:0.9rem; }
@media (max-width:900px){ .people{ grid-template-columns:1fr; gap:34px; } }
/* Rozdziały */
.chapter{ max-width:1180px; margin:0 auto; padding:0 0 30px; }
.ch-head{ display:flex; align-items:baseline; gap:16px; margin-bottom:26px; }
.ch-head .ch-num{
font-family:'Cormorant Garamond', serif; font-style:italic; font-size:2.6rem; color:var(--wine); line-height:1;
}
.ch-head .ch-label{
font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px; letter-spacing:0.3em;
text-transform:uppercase; color:var(--muted);
}
.chapter h3{ font-family:'Cormorant Garamond', serif; font-weight:400; font-size:clamp(1.7rem, 3vw, 2.4rem); margin-bottom:20px; max-width:760px; }
.ch-text{ max-width:640px; margin-bottom:38px; }
.ch-text p{ color:var(--dim); font-size:0.98rem; margin-bottom:14px; }
.ch-cap{
text-align:center; font-family:'Cormorant Garamond', serif; font-style:italic;
font-size:1.15rem; color:var(--dim); margin:26px auto 0; max-width:600px;
}
/* Układy zdjęć w rozdziałach */
.g-set{ display:grid; gap:12px; }
.g-2{ grid-template-columns:1fr 1fr; }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-off{ grid-template-columns:1.3fr 0.7fr; align-items:start; }
.g-off > :nth-child(2){ margin-top:56px; }
.g-set figure{ margin:0; border-radius:10px; overflow:hidden; cursor:pointer; }
.g-set img{ width:100%; display:block; transition:transform 0.8s cubic-bezier(.2,.8,.2,1); }
.g-set figure:hover img{ transform:scale(1.03); }
.g-wide{ border-radius:12px; overflow:hidden; margin:12px 0; cursor:pointer; }
.g-wide img{ width:100%; display:block; }
@media (max-width:800px){ .g-3, .g-off{ grid-template-columns:1fr 1fr; } .g-off > :nth-child(2){ margin-top:0; } }
/* Kto tworzył ten dzień */
.crew{ max-width:640px; margin:0 auto; }
.crew-row{ display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); }
.crew-row:first-child{ border-top:1px solid var(--line); }
.crew-row .c-key{ font-family:'Montserrat', sans-serif; font-weight:500; font-size:10px; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); }
.crew-row .c-val{ font-family:'Cormorant Garamond', serif; font-size:1.15rem; }
/* Panel pobierania zdjęć */
.dl-panel{
max-width:820px; margin:0 auto; background:var(--surface); border:1px solid var(--line);
border-radius:16px; padding:44px 40px; text-align:center;
}
.dl-panel .dl-ic{ color:var(--wine); margin-bottom:16px; }
.dl-panel .dl-ic svg{ width:34px; height:34px; margin:0 auto; }
.dl-panel h3{ font-family:'Cormorant Garamond', serif; font-weight:400; font-size:1.85rem; margin-bottom:12px; }
.dl-panel p{ color:var(--dim); font-size:0.93rem; max-width:520px; margin:0 auto 26px; }
.dl-panel .dl-note{ font-size:0.82rem; color:var(--muted); margin-top:16px; margin-bottom:0; }
/* Nawigacja między reportażami */
.rp-nav{ display:grid; grid-template-columns:1fr 1fr; gap:2px; border-top:1px solid var(--line); }
.rp-nav a{ padding:44px 5vw; transition:background 0.3s; }
.rp-nav a:hover{ background:var(--surface); }
.rp-nav .rn-dir{ font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--wine); margin-bottom:8px; }
.rp-nav .rn-name{ font-family:'Cormorant Garamond', serif; font-size:1.5rem; }
.rp-nav a:last-child{ text-align:right; border-left:1px solid var(--line); }
@media (max-width:700px){ .rp-nav{ grid-template-columns:1fr; } .rp-nav a:last-child{ text-align:left; border-left:none; border-top:1px solid var(--line); } }
/* ============================================================
v3.0 - POPRAWKI 2 (2026-09-15): Playfair, 3 palety premium, bez
podkreslen/zaokraglen, spacer zamiast marquee, slider opinii,
dyptyk oferty 9:16, harmonijka "Dodatki", nowy reportaz, haslo
============================================================ */
/* --- Paleta marki: GRANAT (decyzja klienta 2026-09-23, poprawki 6; wczesniejsze palety bordo/sliwka i przelacznik .theme-pick usuniete) --- */
:root{
--wine:#1b2433; --wine-b:#2b3652; --dark:#1b2433; --darker:#121821;
--bg:#ffffff; --surface:#f5f6f8; --line:#e0e2e7; --ink:#14161b; --dim:#585c66; --muted:#959aa5;
}
::selection{ background:var(--wine); color:#fff; }
@media (max-width:900px){ .w-hero:not(.hero-logo){ padding-top:120px; } }
/* --- Typografia: Playfair Display w naglowkach, bez zlota i podkreslen --- */
h1, h2, h3, .rp-names, .rp-hero .rp-names, .pk .pk-price, .duo h3, .flm h3, .pfc .pfc-name,
.offer h3, .person .p-name, .chapter h3, .dl-panel h3, .kpanel h2, .rp-nav .rn-name, .wstep .n,
.ch-head .ch-num, .big-cta h2, .mobile-menu a, .crew-row .c-val, .duo-bar b, .ytc .yt-names, .rep4 .r4-cap{
font-family:'Playfair Display', 'Cormorant Garamond', serif;
}
h1, h2{ font-weight:400; letter-spacing:-0.01em; }
h2{ font-size:clamp(1.9rem, 3.1vw, 2.7rem); }
h1 em, h2 em, .w-hero h1 em{ color:inherit; font-style:italic; }
h2 em::after{ display:none; }
.section-head p{ color:var(--dim); }
.pfc .pfc-name{ letter-spacing:0.12em; font-size:1.6rem; }
.ytc .yt-names, .rep4 .r4-cap{ font-weight:400; font-size:1.2rem; letter-spacing:0.02em; }
.pk .pk-price{ font-weight:400; font-size:1.9rem; }
/* --- Bez zaokraglen przy miniaturach filmow i zdjec (zostaja przy ofertach) --- */
.ytc, .rep4 a, .revp .rp-img, .wg, .pfc .pfc-img, .rl, .flm .flm-thumb, .biggal figure, .g-set figure, .g-wide,
.film-feature, .about2 .a-img, .person .p-img, .masonry img, .pf-loop, .lightbox img, .ytbox .yt-frame, .videobox video,
.ig-grid a, .rep .r-img, .offer .o-img{ border-radius:0 !important; }
.wg[data-reveal]{ clip-path:inset(14% 6% 14% 6%); }
.wg[data-reveal].in{ clip-path:inset(0 0 0 0); }
.revp{ border-radius:0; }
/* --- Spacer ozdobny zamiast marquee --- */
.orn-sep{ display:flex; align-items:center; justify-content:center; gap:18px; padding:8px 5vw; max-width:1080px; margin:0 auto; }
.orn-sep::before, .orn-sep::after{ content:''; flex:1; height:1px; background:var(--line); }
.orn-sep svg{ width:34px; height:34px; color:var(--wine); flex-shrink:0; opacity:0.85; }
.orn-sep.in-section{ padding:0 0 56px; }
/* --- Kolor akcentu w elementach (zamiast zlota) --- */
.btn-solid{ background:var(--wine); }
.btn-solid:hover{ background:var(--wine-b); }
.w-cta{ border-color:var(--wine); color:var(--wine); }
.w-cta:hover{ background:var(--wine); color:#fff; border-color:var(--wine); }
.btn-line{ border-color:var(--wine); color:var(--wine); }
.btn-line:hover{ background:var(--wine); color:#fff; }
.w-hero .btn-line{ border-color:rgba(247,243,236,0.6); color:#f7f3ec; }
nav a:hover, nav a.active{ color:var(--wine); }
.mobile-menu a:hover, .mobile-menu a.active{ color:var(--wine); }
.sticky-cta{ background:var(--wine); }
.sticky-cta:hover{ background:var(--wine-b); }
.fab-tel{ background:var(--wine); }
.pk.mid{ border-color:var(--wine); box-shadow:0 18px 44px rgba(0,0,0,0.08); }
.pk:hover{ border-color:var(--wine); }
.pk li.yes .mk{ color:var(--wine); }
.faqc summary::after{ background:var(--wine); }
.faqc[open]{ border-color:var(--wine); }
.w-hero .eyebrow{ color:rgba(255,255,255,0.8); }
.w-hero .eyebrow::before{ background:rgba(255,255,255,0.7); }
.pf-tabs a.on{ background:var(--wine); border-color:var(--wine); }
.ig-invite .ii-main{ font-family:'Playfair Display', serif; font-style:italic; }
.ytc, .flm .flm-thumb{ background:var(--darker); }
.duo-bar{ background:var(--dark); }
.duo-bar span{ color:rgba(255,255,255,0.6); }
.duo-bar a:hover{ color:#fff; border-color:#fff; }
/* --- HERO strony glownej: film w tle + samo logo --- */
.w-hero.hero-logo{ justify-content:center; align-items:center; text-align:center; padding:0 6vw; }
.w-hero.hero-logo .hv::after{ background:linear-gradient(to top, rgba(10,8,8,0.55) 0%, rgba(10,8,8,0.15) 50%, rgba(10,8,8,0.25) 100%); }
.w-hero.hero-logo .w-hero-content{ max-width:none; display:flex; flex-direction:column; align-items:center; }
.w-hero.hero-logo .hero-tag{
font-family:'Montserrat', sans-serif; font-weight:500; font-size:10px; letter-spacing:0.42em;
text-transform:uppercase; color:rgba(255,255,255,0.78); margin-bottom:22px;
}
.w-hero.hero-logo h1{ margin:0; line-height:0; }
.w-hero.hero-logo h1 img{ width:min(640px, 78vw); height:auto; filter:drop-shadow(0 6px 30px rgba(0,0,0,0.35)); }
.w-hero.hero-logo .hero-down{
position:absolute; left:50%; bottom:34px; transform:translateX(-50%); width:1px; height:56px;
background:rgba(255,255,255,0.35); overflow:hidden;
}
.w-hero.hero-logo .hero-down::after{ content:''; position:absolute; left:0; top:-56px; width:1px; height:56px; background:#fff; animation:heroDown 2.2s ease-in-out infinite; }
@keyframes heroDown{ 0%{ top:-56px; } 100%{ top:56px; } }
body.home header.on-dark:not(.scrolled) .w-logo{ opacity:0; pointer-events:none; }
header .w-logo{ transition:opacity 0.4s; }
/* --- Sekcje strony glownej: naglowki bez podtytulow --- */
.section-head.tight{ margin-bottom:44px; }
h2.caps{ text-transform:uppercase; letter-spacing:0.08em; font-size:clamp(1.5rem, 2.6vw, 2.2rem); }
/* --- Opinie: slider (6 opinii, 3 na desktopie, 1 na telefonie) + Google --- */
.gbadge{
display:inline-flex; align-items:center; gap:12px; padding:12px 22px 12px 14px;
background:#fff; border:1px solid var(--line); border-radius:999px; box-shadow:0 10px 30px rgba(0,0,0,0.06);
font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink);
transition:box-shadow 0.25s, transform 0.25s; text-align:left;
}
.gbadge:hover{ box-shadow:0 14px 36px rgba(0,0,0,0.1); transform:translateY(-1px); }
.gbadge .g-logo{ width:26px; height:26px; flex-shrink:0; }
.gbadge .g-stars{ color:#f4b400; letter-spacing:0.05em; font-size:13px; }
.gbadge .g-sub{ display:block; font-weight:500; font-size:9px; letter-spacing:0.2em; color:var(--muted); margin-top:2px; }
.rev-slider{ position:relative; max-width:1080px; margin:0 auto; }
.rev-track{
display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
scrollbar-width:none; padding:6px 2px 10px;
}
.rev-track::-webkit-scrollbar{ display:none; }
.rev-track .revp{ flex:0 0 calc((100% - 36px) / 3); scroll-snap-align:start; }
.rev-arrow{
position:absolute; top:42%; width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
background:#fff; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
box-shadow:0 8px 24px rgba(0,0,0,0.1); transition:background 0.25s, color 0.25s, border-color 0.25s; z-index:3;
}
.rev-arrow:hover{ background:var(--wine); border-color:var(--wine); color:#fff; }
.rev-arrow svg{ width:18px; height:18px; }
.rev-arrow.prev{ left:-23px; }
.rev-arrow.next{ right:-23px; }
.rev-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; }
.rev-dots span{ width:7px; height:7px; border-radius:50%; background:var(--line); transition:background 0.25s, transform 0.25s; }
.rev-dots span.on{ background:var(--wine); transform:scale(1.25); }
.revp .rp-g{ display:flex; align-items:center; gap:6px; font-family:'Montserrat', sans-serif; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.revp .rp-g svg{ width:14px; height:14px; }
.revp .rp-g .st{ color:#f4b400; font-size:11px; letter-spacing:0.04em; }
@media (max-width:1180px){ .rev-arrow.prev{ left:6px; } .rev-arrow.next{ right:6px; } }
@media (max-width:900px){ .rev-track .revp{ flex:0 0 calc((100% - 18px) / 2); } }
@media (max-width:640px){ .rev-track .revp{ flex:0 0 100%; } }
/* --- OFERTA: dyptyk 9:16 z zapetlona rolka (wg wzoru wednow) --- */
.dip{ display:flex; gap:4px; max-width:1080px; margin:0 auto; height:min(82vh, 760px); }
.half{
position:relative; flex:1; overflow:hidden; text-decoration:none; isolation:isolate;
background:var(--darker); display:flex; align-items:flex-end; border-radius:14px;
transition:flex 1.05s cubic-bezier(.16,1,.3,1);
}
.dip:hover .half{ flex:0.8; }
.dip .half:hover, .dip .half:focus-visible, .dip .half.open{ flex:1.5; }
.half .media{ position:absolute; inset:0; z-index:-1; }
.half img, .half video{
position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:saturate(0.88) brightness(0.9); transform:scale(1.05); transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.half:hover img, .half:hover video, .half.open img, .half.open video{ transform:scale(1); }
.half .veil{ position:absolute; inset:0; z-index:-1; transition:opacity 0.9s ease;
background:linear-gradient(to top, rgba(10,7,7,0.92) 0%, rgba(10,7,7,0.5) 38%, rgba(10,7,7,0.08) 78%); }
.half .mark{
position:absolute; top:22px; left:24px; display:flex; align-items:center; gap:9px;
font-family:'Montserrat', sans-serif; font-weight:500; font-size:10px; letter-spacing:0.26em; text-transform:lowercase; color:rgba(255,255,255,0.72);
}
.half .mark .glyph{ width:20px; height:20px; border:1px solid rgba(255,255,255,0.55); border-radius:4px; display:grid; place-items:center; }
.half .mark .tri{ width:0; height:0; border-left:6px solid rgba(255,255,255,0.85); border-top:4px solid transparent; border-bottom:4px solid transparent; margin-left:2px; }
.half .mark .sq{ width:8px; height:8px; border:1px solid rgba(255,255,255,0.85); }
.half .txt{ position:relative; padding:clamp(1.6rem, 3vw, 2.6rem); color:#fff; width:100%; }
.half h3{ font-size:clamp(1.9rem, 3.6vw, 2.8rem); color:#fff; margin-bottom:6px; }
.half .kick{ color:rgba(255,255,255,0.78); font-size:0.92rem; max-width:34ch; }
.half .fold{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 0.85s cubic-bezier(.16,1,.3,1), opacity 0.55s ease 0.1s; }
.half:hover .fold, .half:focus-visible .fold, .half.open .fold{ grid-template-rows:1fr; opacity:1; }
.half .fold > div{ overflow:hidden; }
.half .fold ul{ list-style:none; margin:1.2rem 0 0; padding:1rem 0 0; font-size:0.88rem; color:rgba(255,255,255,0.78); border-top:1px solid rgba(255,255,255,0.22); max-width:34ch; }
.half .fold li{ padding:0.2rem 0; }
.half .fold .cta{
display:inline-block; margin-top:1.2rem; font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px; letter-spacing:0.2em;
text-transform:uppercase; color:#fff; border-bottom:1px solid rgba(255,255,255,0.7); padding-bottom:0.35rem;
}
.dip.both .half{ flex:1; }
.dip.both .half .veil{ opacity:0.62; }
.bridge{
max-width:1080px; margin:4px auto 0; background:var(--dark); color:#fff; position:relative; overflow:hidden; isolation:isolate;
display:grid; grid-template-columns:1fr auto; align-items:center; gap:clamp(1.5rem, 4vw, 4rem);
padding:clamp(1.5rem, 3vw, 2.2rem) clamp(1.5rem, 3vw, 2.6rem); border-radius:14px;
}
.bridge .merge{ position:absolute; inset:0; z-index:-1; }
.bridge .mL, .bridge .mR{ position:absolute; top:0; bottom:0; width:50.5%; overflow:hidden; opacity:0; transition:transform 1.15s cubic-bezier(.16,1,.3,1), opacity 0.8s ease; }
.bridge .mL{ left:0; transform:translateX(-102%); }
.bridge .mR{ right:0; transform:translateX(102%); }
.bridge .mL img, .bridge .mR img{ width:100%; height:100%; object-fit:cover; filter:saturate(0.7) brightness(0.5); }
.bridge .scrim{ position:absolute; inset:0; background:rgba(10,7,7,0.6); }
.bridge.on .mL, .bridge.on .mR{ transform:none; opacity:1; }
.bridge::before, .bridge::after{ content:''; position:absolute; top:0; height:1px; width:0; background:rgba(255,255,255,0.7); transition:width 1.3s cubic-bezier(.16,1,.3,1) 0.15s; }
.bridge::before{ left:0; } .bridge::after{ right:0; }
.bridge.seen::before, .bridge.seen::after{ width:50%; }
.bridge .copy, .bridge > a{ opacity:0; transform:translateY(0.8em); transition:opacity 0.9s ease 0.45s, transform 0.9s cubic-bezier(.16,1,.3,1) 0.45s; }
.bridge > a{ transition-delay:0.6s; }
.bridge.seen .copy, .bridge.seen > a{ opacity:1; transform:none; }
.bridge h3{ font-size:clamp(1.2rem, 2.2vw, 1.7rem); color:#fff; }
.bridge .why{ font-size:0.85rem; color:rgba(255,255,255,0.65); margin-top:0.4rem; }
.bridge > a{
font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
color:#fff; border-bottom:1px solid rgba(255,255,255,0.6); padding-bottom:6px; white-space:nowrap; transition:border-color 0.25s;
}
.bridge > a:hover{ border-color:#fff; }
@media (max-width:860px){
.dip{ flex-direction:column; height:auto; gap:4px; }
.half{ min-height:70vh; aspect-ratio:9/16; }
.dip:hover .half, .dip .half:hover, .dip .half.open{ flex:1; }
.half .fold{ grid-template-rows:1fr; opacity:1; }
.half img, .half video{ transform:scale(1); }
.bridge{ grid-template-columns:1fr; gap:1.1rem; }
}
/* --- Pakiety: przypis nad przyciskiem + harmonijka "Dodatki" --- */
.pk-cta .pc-note{ margin:0 0 22px; }
.addons{ max-width:820px; margin:56px auto 0; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.addons summary{
list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:16px; padding:26px 30px;
font-family:'Playfair Display', serif; font-size:1.7rem; color:var(--ink);
}
.addons summary::-webkit-details-marker{ display:none; }
.addons summary .ad-ic{ width:30px; height:30px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:transform 0.35s, background 0.25s, color 0.25s; }
.addons summary .ad-ic svg{ width:14px; height:14px; }
.addons[open] summary .ad-ic{ transform:rotate(45deg); background:var(--wine); border-color:var(--wine); color:#fff; }
.addons .ad-body{ padding:0 40px 40px; }
.addons .ad-row{ padding:22px 0; border-top:1px solid var(--line); }
.addons .ad-row:last-of-type{ border-bottom:1px solid var(--line); }
.addons .ad-row b{ display:block; font-family:'Playfair Display', serif; font-weight:400; font-size:1.25rem; margin-bottom:6px; }
.addons .ad-row p{ color:var(--dim); font-size:0.9rem; max-width:560px; }
.addons .ad-cta{ text-align:center; margin-top:30px; }
.addons .ad-cta .pc-note{ color:var(--muted); font-size:0.84rem; margin-top:14px; }
@media (max-width:700px){ .addons .ad-body{ padding:0 22px 30px; } .addons summary{ font-size:1.45rem; padding:22px; } }
/* --- Portfolio hub: kafle, film jako zapetlona rolka --- */
.pf-choice{ max-width:1000px; gap:40px; }
.pfc .pfc-img video{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.9s cubic-bezier(.2,.8,.2,1); }
.pfc:hover .pfc-img video{ transform:scale(1.04); }
.pfc .pfc-line{ background:var(--wine); }
.pfc:hover .pfc-name{ color:var(--wine); }
/* --- Portfolio film: wieksze rolki, opisy pod filmem w kolumnach --- */
.reels4{ max-width:1180px; gap:20px; }
.flm .flm-thumb{ max-width:1080px; margin:0 auto; }
.flm .flm-body{ max-width:1080px; margin:0 auto; text-align:left; }
.flm .flm-meta3{
display:grid; grid-template-columns:1fr 1fr 1fr 2fr; gap:28px; padding-top:22px; margin-top:22px; border-top:1px solid var(--line);
}
.flm .flm-meta3 > div > span{ display:block; font-family:'Montserrat', sans-serif; font-weight:500; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.flm .flm-meta3 > div > b{ display:block; font-family:'Playfair Display', serif; font-weight:400; font-size:1.15rem; line-height:1.4; }
.flm .flm-meta3 > div > p{ color:var(--dim); font-size:0.9rem; }
@media (max-width:760px){ .flm .flm-meta3{ grid-template-columns:1fr 1fr; } .flm .flm-meta3 > div:last-child{ grid-column:1/-1; } }
/* --- REPORTAZ v3 (wg wzoru klienta): hero, panoramy, ona/on, etapy z szyna, lightbox --- */
.rp3-hero{ position:relative; height:100svh; min-height:560px; display:flex; align-items:flex-end; background:var(--darker); overflow:hidden; }
.rp3-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rp3-hero .veil{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,7,7,0.9), rgba(10,7,7,0.3) 55%, rgba(10,7,7,0.15)); }
.rp3-hero .in{ position:relative; width:100%; max-width:1320px; margin:0 auto; padding:0 5vw clamp(2.5rem, 6vw, 5rem); color:#fff; }
.rp3-hero h1{ font-size:clamp(2.6rem, 7vw, 5.6rem); color:#fff; line-height:1.05; }
.rp3-hero .where{ margin-top:1rem; color:rgba(255,255,255,0.8); font-size:1.02rem; }
.rp3-hero .rp-lock{ position:absolute; top:100px; right:5vw; font-family:'Montserrat', sans-serif; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(255,255,255,0.6); display:flex; align-items:center; gap:8px; }
.rp3-hero .rp-lock svg{ width:12px; height:12px; }
.rp3{ max-width:1320px; margin:0 auto; padding:0 5vw; }
.rp3 section{ padding:0; }
.rp3 .strips figure, .rp3 .frames figure, .solo3 figure{ position:relative; width:100%; }
.rp3 .strips figure img, .rp3 .frames figure img, .solo3 figure img{ position:absolute; inset:0; }
.rp3 .frames figure figcaption{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:26px 18px 12px; color:rgba(255,255,255,0.9); background:linear-gradient(to top, rgba(10,7,7,0.7), rgba(10,7,7,0)); font-size:0.8rem; }
.rp3 .strips{ display:grid; gap:6px; padding-top:6px; }
.rp3 .strips figure{ aspect-ratio:3.6/1; overflow:hidden; margin:0; cursor:zoom-in; padding:0; }
.rp3 .lead{ padding:clamp(3.5rem, 7vw, 5.5rem) 0 0; }
.rp3 .lead p{ font-family:'Playfair Display', serif; font-style:italic; font-size:clamp(1.3rem, 2.4vw, 1.8rem); line-height:1.42; max-width:26ch; }
.rp3 .lead .by{ font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); margin-top:1.4rem; }
.rp3 .person3{ padding:clamp(3rem, 6vw, 5rem) 0; }
.rp3 .person3 .who{ max-width:46ch; }
.rp3 .person3.right .who{ margin-left:auto; text-align:right; }
.rp3 .person3 h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); }
.rp3 .person3 .who p{ margin-top:0.8rem; color:var(--dim); }
.rp3 .frames{ margin-top:clamp(1.6rem, 3vw, 2.4rem); display:grid; gap:6px; }
.rp3 .frames figure{ margin:0; overflow:hidden; cursor:zoom-in; background:var(--surface); }
.rp3 .frames img, .rp3 .strips img, .solo3 figure img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.9s cubic-bezier(.2,.8,.2,1); }
.rp3 .frames figure:hover img, .rp3 .strips figure:hover img{ transform:scale(1.03); }
.rp3 .pgrid{ grid-template-columns:1.22fr 0.78fr; }
.rp3 .pgrid figure:nth-child(1){ grid-row:span 2; min-height:560px; }
.rp3 .pgrid figure:nth-child(2){ aspect-ratio:4/3; }
.rp3 .pgrid figure:nth-child(3){ aspect-ratio:3/4; }
.rp3 .pgrid figure:nth-child(4){ grid-column:1/-1; aspect-ratio:16/6; }
.rp3 .person3.right .pgrid{ grid-template-columns:0.78fr 1.22fr; }
.rp3 .person3.right .pgrid figure:nth-child(1){ grid-column:2; grid-row:1/span 2; }
.rp3 .person3.right .pgrid figure:nth-child(2){ grid-column:1; grid-row:1; }
.rp3 .person3.right .pgrid figure:nth-child(3){ grid-column:1; grid-row:2; }
.rp3 .stage{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:clamp(1.5rem, 4vw, 4rem); padding:clamp(3rem, 6vw, 5.5rem) 0; border-top:1px solid var(--line); }
.rp3 .rail{ position:sticky; top:clamp(1.5rem, 5vh, 4rem); align-self:start; }
.rp3 .rail .no{ font-family:'Playfair Display', serif; font-style:italic; font-size:clamp(2.2rem, 4vw, 3.2rem); line-height:1; color:var(--wine); }
.rp3 .rail .nm{ display:block; font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); margin-top:0.7rem; }
.rp3 .stage h2{ font-size:clamp(1.6rem, 3vw, 2.4rem); max-width:18ch; }
.rp3 .stage .txt{ max-width:58ch; margin-top:1rem; color:var(--dim); }
.rp3 .stage .txt p{ margin-bottom:1em; }
.rp3 .sub + .sub{ margin-top:clamp(2.5rem, 5vw, 4.5rem); padding-top:clamp(2.5rem, 5vw, 4.5rem); border-top:1px solid var(--line); }
.rp3 .sub .frames + .frames{ margin-top:6px; }
.rp3 .g-wide3{ grid-template-columns:1fr; } .rp3 .g-wide3 figure{ aspect-ratio:16/9; }
.rp3 .g-pair{ grid-template-columns:1fr 1fr; } .rp3 .g-pair figure{ aspect-ratio:3/4; }
.rp3 .g-trio{ grid-template-columns:repeat(3,1fr); } .rp3 .g-trio figure{ aspect-ratio:2/3; }
.rp3 .g-lead{ grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; }
.rp3 .g-lead figure{ aspect-ratio:4/3; }
.rp3 .g-lead figure:first-child{ grid-row:span 2; min-height:440px; aspect-ratio:auto; }
.rp3 .g-off3{ grid-template-columns:1fr 1fr; align-items:start; }
.rp3 .g-off3 figure:nth-child(2){ margin-top:clamp(2rem, 6vw, 5rem); }
.rp3 .g-off3 figure{ aspect-ratio:4/5; }
.rp3 .g-six{ grid-template-columns:repeat(4,1fr); }
.rp3 .g-six figure{ aspect-ratio:1; }
.rp3 .g-six figure:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.rp3 .g-six figure:nth-child(6){ grid-column:span 2; aspect-ratio:2; }
.rp3 figcaption{ font-size:0.8rem; color:var(--muted); margin-top:0.65rem; line-height:1.5; }
.solo3{ margin:clamp(2.5rem, 5vw, 4rem) 0 0; cursor:zoom-in; }
.solo3 figure{ margin:0; height:min(78vh, 760px); overflow:hidden; }
.solo3 figcaption{ max-width:1320px; margin:0.8rem auto 0; padding:0 5vw; font-size:0.8rem; color:var(--muted); }
.rp3 .crew3{ padding:clamp(3.5rem, 7vw, 5.5rem) 0; border-top:1px solid var(--line); }
.rp3 .crew3 h2{ font-size:clamp(1.5rem, 3vw, 2.2rem); }
.rp3 .crew3 ul{ list-style:none; margin:2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:1.4rem 2.5rem; }
.rp3 .crew3 li{ border-top:1px solid var(--line); padding-top:0.9rem; }
.rp3 .crew3 li span{ display:block; font-family:'Montserrat', sans-serif; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); margin-bottom:0.3rem; }
.rp3 .crew3 li b{ font-family:'Playfair Display', serif; font-weight:400; font-size:1.1rem; }
.said3{ background:var(--surface); border-top:1px solid var(--line); padding:clamp(3.5rem, 7vw, 5.5rem) 5vw; }
.said3 .in{ max-width:1320px; margin:0 auto; }
.said3 p{ font-family:'Playfair Display', serif; font-style:italic; font-size:clamp(1.15rem, 2.1vw, 1.5rem); line-height:1.5; max-width:36ch; }
.said3 .who{ font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); margin-top:1.4rem; }
.next3{ position:relative; height:clamp(320px, 48vh, 460px); display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; text-decoration:none; background:var(--darker); }
.next3 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.2,.8,.2,1); }
.next3:hover img{ transform:scale(1.04); }
.next3 .veil{ position:absolute; inset:0; background:rgba(10,7,7,0.5); }
.next3 .in{ position:relative; color:#fff; }
.next3 .in > span{ font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(255,255,255,0.7); }
.next3 h2{ font-size:clamp(1.9rem, 4.5vw, 3.2rem); color:#fff; margin-top:0.8rem; }
.rp3 .dl-wrap{ padding:clamp(3rem, 6vw, 5rem) 0; }
#lb3{ position:fixed; inset:0; background:rgba(10,7,7,0.97); display:none; z-index:450; align-items:center; justify-content:center; padding:clamp(2.5rem, 6vw, 4rem); }
#lb3.on{ display:flex; }
#lb3 img{ max-width:min(1200px, 100%); max-height:82vh; object-fit:contain; }
#lb3 button{ position:absolute; cursor:pointer; background:none; color:#fff; border:1px solid rgba(255,255,255,0.4); }
#lb3 .x{ top:1.5rem; right:1.5rem; width:40px; height:40px; font-size:1.1rem; }
#lb3 .nav{ top:50%; transform:translateY(-50%); width:44px; height:44px; }
#lb3 .prev{ left:1.2rem; } #lb3 .nxt{ right:1.2rem; }
#lb3 .count{ position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.6); font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.2em; }
@media (max-width:840px){
.rp3 .stage{ grid-template-columns:1fr; gap:1rem; }
.rp3 .rail{ position:static; display:flex; align-items:baseline; gap:1rem; }
.rp3 .rail .nm{ margin-top:0; }
.rp3 .g-lead, .rp3 .g-trio, .rp3 .g-six{ grid-template-columns:1fr 1fr; }
.rp3 .g-lead figure:first-child{ grid-row:auto; min-height:0; aspect-ratio:4/5; }
.rp3 .g-trio figure:last-child{ grid-column:span 2; aspect-ratio:16/10; }
.rp3 .g-six figure:nth-child(1), .rp3 .g-six figure:nth-child(6){ grid-column:span 2; grid-row:auto; }
.rp3 .g-six figure:nth-child(1){ aspect-ratio:4/3; }
.rp3 .g-off3 figure:nth-child(2){ margin-top:0; }
.solo3 figure{ height:58vh; }
.rp3 .strips figure{ aspect-ratio:2.2/1; }
.rp3 .person3 .who, .rp3 .person3.right .who{ max-width:none; margin-left:0; text-align:left; }
.rp3 .pgrid, .rp3 .person3.right .pgrid{ grid-template-columns:1fr 1fr; }
.rp3 .pgrid figure:nth-child(1), .rp3 .person3.right .pgrid figure:nth-child(1){ grid-column:1/-1; grid-row:auto; min-height:0; aspect-ratio:4/5; }
.rp3 .person3.right .pgrid figure:nth-child(2), .rp3 .person3.right .pgrid figure:nth-child(3){ grid-column:auto; grid-row:auto; }
.rp3-hero .rp-lock{ top:86px; }
}
/* --- Bramka z haslem do reportazu --- */
.gate{ min-height:100svh; display:flex; align-items:center; justify-content:center; padding:120px 6vw 60px; background:var(--darker); position:relative; overflow:hidden; }
.gate .gate-bg{ position:absolute; inset:0; }
.gate .gate-bg img{ width:100%; height:100%; object-fit:cover; filter:brightness(0.45) saturate(0.8); }
.gate .gate-box{ position:relative; z-index:2; width:min(440px, 100%); background:rgba(255,255,255,0.97); padding:44px 40px; text-align:center; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,0.4); }
.gate .gate-box .eyebrow{ justify-content:center; }
.gate .gate-box h1{ font-size:clamp(1.8rem, 4vw, 2.4rem); margin-bottom:8px; }
.gate .gate-box .gate-where{ color:var(--dim); font-size:0.92rem; margin-bottom:26px; }
.gate .gate-box .gate-lock{ width:34px; height:34px; margin:0 auto 18px; color:var(--wine); }
.gate .gate-box input{ width:100%; text-align:center; letter-spacing:0.2em; font-size:1rem; padding:14px 16px; border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--ink); font-family:'Roboto', sans-serif; outline:none; margin-bottom:12px; }
.gate .gate-box input:focus{ border-color:var(--wine); }
.gate .gate-box .btn-solid{ width:100%; }
.gate .gate-box .gate-err{ color:#a12b2b; font-size:0.85rem; margin-top:12px; }
.gate .gate-box .gate-note{ color:var(--muted); font-size:0.8rem; margin-top:22px; }
@media (max-width:700px){ .gate .gate-box{ padding:34px 24px; } }
/* ============================================================
v3.1 - POPRAWKI 3 (2026-09-15): O nas na glownej (makieta), kontakt
z Bartkiem + data/miejsce + zgoda, Instagram na dole podstron, polityka
============================================================ */
.about3-wrap{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.about3{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:center; max-width:1080px; margin:0 auto; }
.a3-img{ position:relative; aspect-ratio:4/5; }
.a3-img img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block; }
.a3-img .a3-frame{ position:absolute; left:8%; top:8%; width:100%; height:100%; background:var(--line); z-index:1; }
.a3-body h2{ font-style:italic; font-size:clamp(2rem, 3.4vw, 2.8rem); margin-bottom:6px; }
.a3-role{ font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--wine); padding-bottom:18px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.a3-body p{ color:var(--dim); font-size:0.95rem; margin-bottom:16px; }
.a3-body .a3-lead{ color:var(--ink); }
.a3-body .btn-line{ margin-top:10px; }
@media (max-width:900px){ .about3{ grid-template-columns:1fr; gap:46px; } .a3-img{ max-width:420px; } }
/* Kontakt: osoba + etykiety pol + zgoda */
.k-person{ display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.k-person img{ width:76px; height:76px; object-fit:cover; flex-shrink:0; }
.k-person .kp-name{ font-family:'Playfair Display', serif; font-style:italic; font-size:1.5rem; line-height:1.1; }
.k-person .kp-sub{ font-family:'Montserrat', sans-serif; font-weight:600; font-size:9px; letter-spacing:0.28em; text-transform:uppercase; color:var(--wine); margin-top:6px; }
.k-lines .kl-key{ display:block; font-family:'Montserrat', sans-serif; font-weight:500; font-size:9px; letter-spacing:0.26em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.field label{ display:block; font-family:'Montserrat', sans-serif; font-weight:500; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.field input[type="date"]{ color-scheme:light; }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:0.82rem; color:var(--dim); cursor:pointer; }
.consent input{ margin-top:3px; accent-color:var(--wine); flex-shrink:0; }
.consent a{ text-decoration:underline; }
.form-note{ font-size:0.8rem; color:var(--muted); }
/* Polityka prywatnosci */
.legal{ max-width:760px; margin:0 auto; }
.legal h2{ font-size:1.4rem; margin:34px 0 10px; }
.legal p, .legal li{ color:var(--dim); font-size:0.95rem; margin-bottom:10px; }
.legal ul{ padding-left:20px; }
/* ============================================================
v3.2 - QA 2026-09-17: O nas 3 kroki bez inline style (mobile 1 kolumna),
ramka About bez poziomego scrolla, reportaz 1:1 ze wzorem (hero bez
globalnego paddingu sekcji, podpis pod kadrem POD zdjeciem, nie na nim)
============================================================ */
.wsteps.wsteps-3{ grid-template-columns:repeat(3, 1fr); max-width:900px; }
@media (max-width:900px){ .wsteps.wsteps-3{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .wsteps.wsteps-3{ grid-template-columns:1fr; } }
.about3-wrap{ overflow:hidden; }
section.rp3-hero{ padding:0; }
.rp3 .frames figure:has(figcaption){ aspect-ratio:auto; overflow:visible; }
.rp3 .frames figure:has(figcaption) img{ position:static; width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.rp3 .frames figure:has(figcaption) figcaption{ position:static; padding:0; background:none; margin-top:0.65rem; color:var(--muted); font-size:0.8rem; line-height:1.5; }
/* ============================================================
v3.3 (2026-09-17): O NAS wg wzoru klienta (intro Bartek, ekipa, dwie
kolumny, przebieg 01-06) + REPORTAZ FILM (.rpf) wg wzoru klienta
============================================================ */
.on3 .t{ color:var(--dim); font-size:1.04rem; line-height:1.85; }
.on3 .t + .t{ margin-top:1.6rem; }
.on3-wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(1.25rem, 5vw, 4rem); }
.on3-label{ font-family:'Montserrat', sans-serif; font-weight:500; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--wine); }
.on3 section{ padding:0; }
.on3-intro{ display:grid; grid-template-columns:minmax(0,44fr) minmax(0,56fr); align-items:center; gap:clamp(2rem, 7vw, 7rem); padding:clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 5rem) clamp(3.5rem, 8vw, 7rem) 0; max-width:1560px; margin:0 auto; }
.on3-shot{ position:relative; margin:0; }
.on3-shot::before{ content:''; position:absolute; left:2.5rem; right:-2.5rem; top:2.5rem; bottom:-2.5rem; background:var(--surface); border:1px solid var(--line); z-index:0; }
.on3-shot img{ position:relative; z-index:1; display:block; width:100%; aspect-ratio:4/5; object-fit:cover; }
.on3-copy{ max-width:48ch; }
.on3-credit{ padding-bottom:clamp(1.5rem, 2.6vw, 2rem); border-bottom:1px solid var(--line); margin-bottom:clamp(1.6rem, 3vw, 2.2rem); }
.on3-sig{ display:block; font-family:'Playfair Display', serif; font-style:italic; font-weight:400; font-size:clamp(2rem, 3.6vw, 2.9rem); line-height:1; }
.on3-role{ display:block; font-family:'Montserrat', sans-serif; font-weight:500; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--wine); margin-top:0.6rem; }
.on3-team{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:clamp(2rem, 3.5vw, 3rem) 0 !important; }
.on3-ribbon{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.6rem, 5vw, 4.5rem); align-items:start; }
.on3-ribbon .on3-label{ margin:0.45rem 0 0; padding-right:clamp(1.6rem, 5vw, 4.5rem); border-right:1px solid var(--line); white-space:nowrap; }
.on3-tbody{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem, 3vw, 3rem); }
.on3-tbody .t{ max-width:44ch; margin:0; }
.on3-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 6vw, 5rem); padding-top:clamp(3.5rem, 7vw, 6rem); padding-bottom:clamp(3.5rem, 7vw, 6rem); }
.on3-col{ padding-top:1.6rem; border-top:1px solid var(--line); }
.on3-col .on3-label{ margin-bottom:1rem; }
.on3-col h3{ font-size:clamp(1.4rem, 2.4vw, 1.9rem); margin:0 0 1.2rem; line-height:1.15; }
.on3-divider{ display:flex; justify-content:center; align-items:center; gap:1.1rem; margin:0 auto; }
.on3-divider span{ width:5px; height:5px; transform:rotate(45deg); background:var(--wine); }
.on3-divider span:nth-child(2){ width:7px; height:7px; }
.on3-divider span:nth-child(1), .on3-divider span:nth-child(3){ opacity:0.45; }
.on3-flow{ padding-top:clamp(3rem, 6vw, 5rem) !important; padding-bottom:clamp(1rem, 3vw, 2rem) !important; }
.on3-flow h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin:0 0 clamp(2rem, 4vw, 3rem); line-height:1.12; }
.on3-step{ display:grid; grid-template-columns:auto minmax(0,15ch) minmax(0,1fr); gap:0.4rem clamp(1.2rem, 4vw, 3.5rem); align-items:baseline; padding:clamp(1.3rem, 2.4vw, 1.8rem) 0; border-top:1px solid var(--line); }
.on3-step:last-child{ border-bottom:1px solid var(--line); }
.on3-step .no{ font-family:'Playfair Display', serif; font-style:italic; font-size:1.05rem; color:var(--wine); }
.on3-step h3{ font-size:clamp(1.2rem, 2.1vw, 1.6rem); margin:0; line-height:1.15; }
.on3-step p{ color:var(--dim); font-size:0.98rem; line-height:1.8; max-width:58ch; }
.on3-foot{ padding-top:clamp(2.5rem, 5vw, 4rem); padding-bottom:clamp(4rem, 8vw, 7rem); text-align:center; }
@media (max-width:900px){
.on3-intro{ grid-template-columns:1fr; gap:2.6rem; padding:clamp(3rem, 8vw, 5rem) clamp(1.25rem, 5vw, 3rem); }
.on3-shot::before{ left:1.2rem; right:-1.2rem; top:1.2rem; bottom:-1.2rem; }
.on3-shot{ margin-right:1.2rem; }
.on3-copy{ max-width:none; }
.on3-cols{ grid-template-columns:1fr; gap:2.5rem; }
.on3-step{ grid-template-columns:auto minmax(0,1fr); gap:0.3rem 1.2rem; }
.on3-step p{ grid-column:2; }
.on3-ribbon{ grid-template-columns:1fr; gap:1.1rem; }
.on3-ribbon .on3-label{ border-right:0; padding-right:0; }
.on3-tbody{ grid-template-columns:1fr; gap:1.2rem; }
}
/* --- REPORTAZ FILM (.rpf) wg wzoru klienta 2026-09-17 --- */
.rpf section{ padding:0; }
.rpf .t{ color:var(--dim); font-size:1.04rem; line-height:1.85; }
.rpf-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(1.25rem, 5vw, 4rem); }
.rpf-label{ font-family:'Montserrat', sans-serif; font-weight:500; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--wine); }
.rpf-hero{ position:relative; min-height:clamp(420px, 72vh, 700px); display:flex; align-items:flex-end; overflow:hidden; background:var(--darker); padding:0; }
.rpf-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rpf-hero .veil{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,7,7,0.88), rgba(10,7,7,0.3) 52%, rgba(10,7,7,0.08)); }
.rpf-hero .inner{ position:relative; width:100%; padding-top:clamp(2.2rem, 5vw, 4rem); padding-bottom:clamp(2.2rem, 5vw, 4rem); color:#fff; }
.rpf-hero .rpf-label{ color:#e8c9be; }
.rpf-hero h1{ font-size:clamp(2.4rem, 6vw, 4.6rem); color:#fff; margin-top:1.1rem; line-height:1.08; }
.rpf-hero .meta{ margin-top:1rem; font-size:0.92rem; letter-spacing:0.04em; color:rgba(255,255,255,0.75); }
.rpf-hero .rp-lock{ position:absolute; top:100px; right:5vw; font-family:'Montserrat', sans-serif; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(255,255,255,0.6); display:flex; align-items:center; gap:6px; }
.rpf-hero .rp-lock svg{ width:12px; height:12px; }
.rpf-story{ padding-top:clamp(3.5rem, 8vw, 7rem) !important; padding-bottom:clamp(3.5rem, 8vw, 7rem) !important; }
.rpf-story h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom:clamp(1.2rem, 2.4vw, 1.8rem); }
.rpf-story .body{ columns:2; column-gap:clamp(2rem, 6vw, 5rem); column-fill:balance; text-align:justify; hyphens:auto; }
.rpf-story .body .t + .t{ margin-top:1.2rem; }
.rpf-films{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding-top:clamp(3.5rem, 8vw, 7rem) !important; padding-bottom:clamp(3.5rem, 8vw, 7rem) !important; }
.rpf-film + .rpf-film{ margin-top:clamp(3rem, 6vw, 5rem); }
.rpf-film .head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:0.6rem 2rem; padding-bottom:1.1rem; margin-bottom:1.6rem; border-bottom:1px solid var(--line); }
.rpf-film h3{ font-size:clamp(1.5rem, 2.8vw, 2.1rem); }
.rpf-film .len{ font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--wine); }
.rpf-player{ position:relative; aspect-ratio:16/9; width:100%; overflow:hidden; background:var(--darker); cursor:pointer; border:0; padding:0; display:block; }
.rpf-player img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1), filter 0.6s ease; }
.rpf-player:hover img{ transform:scale(1.03); filter:brightness(0.9); }
.rpf-player .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:clamp(56px, 7vw, 82px); height:clamp(56px, 7vw, 82px); border-radius:50%; border:1px solid rgba(255,255,255,0.8); display:grid; place-items:center; transition:background 0.5s, border-color 0.5s; }
.rpf-player:hover .play{ background:rgba(255,255,255,0.14); border-color:#fff; }
.rpf-player .tri{ width:0; height:0; margin-left:4px; border-left:14px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; }
.rpf-player iframe, .rpf-player video{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.rpf-film .note{ margin-top:1rem; font-size:0.9rem; color:var(--dim); max-width:56ch; }
.rpf-dl{ padding-top:clamp(3rem, 6vw, 5rem) !important; padding-bottom:clamp(3rem, 6vw, 5rem) !important; }
.rpf-dl h2{ font-size:clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom:0.9rem; }
.rpf-dl .intro{ color:var(--dim); max-width:52ch; margin-bottom:clamp(1.8rem, 3.5vw, 2.6rem); }
.rpf-dlgrid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem, 3vw, 2rem); }
.rpf-dlbox{ display:flex; flex-direction:column; gap:0.5rem; text-decoration:none; color:inherit; padding:clamp(1.4rem, 2.6vw, 2rem); border:1px solid var(--line); transition:border-color 0.45s, background 0.45s; }
.rpf-dlbox:hover{ border-color:var(--wine); background:var(--surface); }
.rpf-dlbox .nm{ font-family:'Playfair Display', serif; font-size:clamp(1.25rem, 2.2vw, 1.7rem); line-height:1.1; }
.rpf-dlbox .spec{ font-size:0.8rem; letter-spacing:0.06em; color:var(--dim); }
.rpf-dlbox .go{ margin-top:0.9rem; padding-top:0.9rem; border-top:1px solid var(--line); font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; color:var(--wine); }
.rpf-dl .small{ margin-top:1.4rem; font-size:0.85rem; color:var(--muted); }
@media (max-width:860px){
.rpf-story .body{ columns:1; text-align:left; }
.rpf-story .body .t + .t{ margin-top:1.5rem; }
.rpf-dlgrid{ grid-template-columns:1fr; }
.rpf-hero .rp-lock{ top:86px; }
}
/* ============================================================
v4.0 - POPRAWKI 4 (2026-09-21): Instagram w naglowku, podmenu,
aktywna zakladka, bez kursywy, hero bez tekstu, bez cen, bordo w tle
============================================================ */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* bez kursywy w naglowkach (globalnie) */
h1 em, h2 em, h3 em, .w-hero h1 em, .section-head h2 em, .on3-sig, .rp3 h2 em, .rpf-title em{ font-style:normal !important; color:inherit; }
h2 em::after{ display:none; }
/* naglowek: Instagram zamiast CTA, podmenu, aktywna zakladka */
.w-ig{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--ink); transition:color 0.25s, transform 0.25s; }
.w-ig svg{ width:22px; height:22px; }
.w-ig:hover{ color:var(--wine); transform:translateY(-1px); }
header.on-dark:not(.scrolled) .w-ig{ color:#f5f2ec; }
@media (max-width:900px){ header .w-ig{ display:none; } }
nav ul li{ position:relative; }
nav a.active{ color:var(--wine); }
nav a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor; }
nav > ul > li > a{ position:relative; padding:6px 0; }
nav .sub{
position:absolute; left:50%; top:100%; transform:translate(-50%, 6px); min-width:170px;
background:#fff; border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,0.12);
padding:10px 0; display:flex; flex-direction:column; gap:0; opacity:0; visibility:hidden;
transition:opacity 0.25s, transform 0.25s, visibility 0.25s; z-index:5;
}
nav .sub::before{ content:''; position:absolute; left:0; right:0; top:-12px; height:12px; }
nav .sub li a{ display:block; padding:9px 22px; color:var(--ink) !important; white-space:nowrap; font-size:10px; letter-spacing:0.22em; }
nav .sub li a:hover, nav .sub li a.active{ color:var(--wine) !important; background:var(--surface); }
nav .sub li a.active::after{ display:none; }
nav li.has-sub:hover .sub, nav li.has-sub:focus-within .sub{ opacity:1; visibility:visible; transform:translate(-50%, 0); }
header.on-dark:not(.scrolled) nav a.active{ color:#fff; }
/* pasek menu w kolorze marki (po przewinieciu i na podstronach bez hero) */
header.scrolled{ background:var(--wine); box-shadow:none; color:#fff; }
header.scrolled nav a{ color:rgba(255,255,255,0.85); }
header.scrolled nav a:hover, header.scrolled nav a.active{ color:#fff; }
header.scrolled .lg-dark{ display:none; } header.scrolled .lg-light{ display:block; }
header.scrolled .w-ig{ color:#fff; }
header.scrolled .burger{ border-color:rgba(255,255,255,0.5); } header.scrolled .burger span{ background:#fff; }
/* stopka: bez srodkowego wpisu, symetria */
footer{ justify-content:space-between; }
/* opinie: plakietka w osi, bez miejsca i roku */
.gbadge{ text-align:center; }
.gbadge > span{ text-align:left; }
.revp .rp-who{ border-top:0; padding-top:0; margin-top:14px; }
/* O nas: przestrzen wokol zdjecia, pasek Ekipa w bordo, jedna kolumna */
.on3-intro{ padding:clamp(4rem, 8vw, 7rem) 5vw !important; gap:clamp(2.5rem, 7vw, 7rem); }
.on3-shot{ max-width:440px; margin:0 auto; }
.on3-shot::before{ left:1.6rem; right:-1.6rem; top:1.6rem; bottom:-1.6rem; }
.on3-team{ background:var(--wine); border:0; color:#fff; }
.on3-team .on3-label{ color:rgba(255,255,255,0.7); border-right-color:rgba(255,255,255,0.25); }
.on3-team .t, .on3-team p{ color:rgba(255,255,255,0.92); }
.on3-tbody{ grid-template-columns:1fr; max-width:72ch; gap:1rem; }
/* kolor marki w blokach zamiast szarosci */
.film-loop-sec{ background:var(--wine) !important; color:#fff; }
.film-loop-sec .eyebrow{ color:rgba(255,255,255,0.75); } .film-loop-sec .eyebrow::before{ background:rgba(255,255,255,0.6); }
.film-loop-sec h2{ color:#fff; }
.film-loop{ max-width:1080px; margin:0 auto; aspect-ratio:16/9; background:#000; overflow:hidden; }
.film-loop video{ width:100%; height:100%; object-fit:cover; display:block; }
.film-loop-txt{ max-width:760px; margin:38px auto 0; text-align:left; }
.film-loop-txt p{ color:rgba(255,255,255,0.86); font-size:0.98rem; line-height:1.75; margin-bottom:16px; }
/* oferta: bez etykiet ruch/cisza, bez zaokraglen, pasek "jedno i drugie" czysty + animacja w gore */
.half, .bridge, .dip{ border-radius:0 !important; }
.bridge{ background:var(--wine); margin-top:4px; overflow:hidden; }
.bridge .scrim{ display:none; }
.bridge .mL, .bridge .mR{ transform:translateY(102%); opacity:0; }
.bridge .mL img, .bridge .mR img{ filter:saturate(0.6) brightness(0.45); }
.bridge.on .mL, .bridge.on .mR{ transform:none; opacity:1; }
.bridge.seen{ animation:bridgeUp 0.9s cubic-bezier(.16,1,.3,1) both; }
@keyframes bridgeUp{ from{ transform:translateY(28px); opacity:0; } to{ transform:none; opacity:1; } }
.bridge::before, .bridge::after{ display:none; }
/* pakiety: bez cen - nazwa pakietu wieksza */
.pk .pk-name{ font-family:'Playfair Display', serif; font-size:1.55rem; letter-spacing:0.08em; text-transform:none; margin-bottom:22px; padding-bottom:18px; border-bottom:1px solid var(--line); color:var(--ink); }
.pk.mid .pk-name{ color:var(--wine); }
.pk-cta{ margin-top:34px; }
.pk-cta .pc-note{ margin:16px 0 0; }
/* portfolio: mniejsze kafle, bez zaokraglen, bez ucinania na dole */
.pf-choice{ max-width:640px; gap:26px; }
.pfc .pfc-img{ border-radius:0; transition:box-shadow 0.45s; }
.pfc:hover .pfc-img{ transform:none; box-shadow:0 24px 48px rgba(35,32,27,0.14); }
.pfc .pfc-name{ font-size:1.5rem; }
.rep, .rep .r-img, .flm .flm-thumb, .wg, .ytc, .yt-grid .ytc, .rl, .biggal figure, .g-set figure, .g-wide, .film-feature{ border-radius:0 !important; }
/* v4.1: hero podstron = tylko nazwa podstrony (maly napis u gory, duzy na dole), bez hasel */
.w-hero .hero-name{ max-width:none; }
.w-hero .hero-name h1{ font-size:clamp(2.4rem, 5vw, 4.4rem); margin:0; font-weight:400; }
.w-hero .hero-name .eyebrow{ margin-bottom:12px; }
/* v4.2: FAQ na bordo - tekst w bialych kartach ciemny */
.faq-sec .faqc, .faq-sec .faqc summary{ color:var(--ink); }
.faq-sec .faqc p{ color:var(--dim); }
/* v4.3: blok "Bartek" na glownej w bordo (wg makiety Bzdaka, str. 16); FAQ wraca na szaro */
.about3-wrap{ background:var(--wine); border:0; color:#fff; }
.about3 h2{ color:#fff; font-style:normal; }
.a3-role{ color:rgba(255,255,255,0.7); border-bottom-color:rgba(255,255,255,0.25); }
.a3-body p, .a3-body .a3-lead{ color:rgba(255,255,255,0.9); }
.about3 .btn-line{ border-color:rgba(255,255,255,0.7); color:#fff; }
.about3 .btn-line:hover{ background:#fff; color:var(--wine); }
.a3-img .a3-frame{ background:rgba(255,255,255,0.12); }
section.faq-sec{ background:var(--surface) !important; color:var(--ink); }
.faq-sec .eyebrow{ color:var(--wine); } .faq-sec .eyebrow::before{ background:var(--wine); }
.faq-sec h2{ color:var(--ink); }
.faq-sec .faqc{ border-color:var(--line); }
/* v4.4: portfolio/film - opisy pod filmami byly UCINANE (.flm dziedziczyl .ytc: aspect-ratio 16/9 + overflow hidden) */
.flm.ytc{ aspect-ratio:auto !important; overflow:visible !important; background:transparent !important; cursor:default; }
.flm.ytc .flm-thumb{ cursor:pointer; }
.flm.ytc::after{ display:none; }
/* ============================================================
v5.0 - POPRAWKI 5 (2026-09-22): Instagram w naglowku tylko po scrollu,
FAQ + blok IG na bordo, Przebieg z akcentem, dyptyk wg wednow-dyptyk.html,
kafle portfolio z bordowym paskiem, reportaze w calosci na bordo,
kadry 21:9, sekcja 05 Plener, bez opinii, 4 uslugodawcow w rzedzie.
Paleta (v5): bordo, krem; od v6.0 granat, bez zlota.
============================================================ */
:root{ --cream:#f6f2ec; }
/* 1. Instagram w naglowku: na przezroczystym hero ukryty, w bordowym pasku widoczny */
.w-ig{ transition:color 0.25s, transform 0.25s, opacity 0.35s; }
header.on-dark:not(.scrolled) .w-ig{ opacity:0; pointer-events:none; }
header.scrolled .w-ig{ opacity:1; pointer-events:auto; }
/* 2. FAQ "Zanim zapytacie" na bordo - karty jasne z ciemnym tekstem */
section.faq-sec{ background:var(--wine) !important; color:var(--cream); }
.faq-sec .eyebrow{ color:rgba(246,242,236,0.8); } .faq-sec .eyebrow::before{ background:rgba(246,242,236,0.6); }
.faq-sec h2, .faq-sec h2 em{ color:var(--cream); }
.faq-sec .faqc{ background:#fffdf8; border-color:rgba(246,242,236,0.25); color:var(--ink); }
.faq-sec .faqc summary{ color:var(--ink); }
.faq-sec .faqc p{ color:var(--dim); }
.faq-sec .faqc[open]{ border-color:var(--cream); }
.faq-sec .faqc summary::after{ background:var(--wine); }
/* 2. Blok Instagram "Dolaczcie do nas" na bordo */
.ig-block{ background:var(--wine); border-top:0; }
.ig-invite{ background:var(--wine); border:1px solid rgba(246,242,236,0.45); box-shadow:0 20px 60px rgba(23,17,13,0.35); }
.ig-invite .ii-top{ color:rgba(246,242,236,0.78); }
.ig-invite .ii-main{ color:var(--cream); }
.ig-invite::before{ content:''; display:block; width:38px; height:1px; background:var(--cream); margin:0 auto 12px; }
.ig-invite:hover{ border-color:var(--cream); }
/* 3. O nas - "Przebieg" z bordowym akcentem: os, kropki, aktywny krok, przycisk */
.on3-step{ position:relative; align-items:start; border-top-color:rgba(77,14,18,0.18); }
.on3-step:last-child{ border-bottom-color:rgba(77,14,18,0.18); }
.on3-step::before{ content:''; position:absolute; left:16px; top:0; bottom:0; width:1px; background:var(--wine); opacity:0.35; }
.on3-step:first-child::before{ top:50%; }
.on3-step:last-child::before{ bottom:50%; }
.on3-step .no{
position:relative; z-index:1; width:33px; height:33px; border-radius:50%; border:1px solid var(--wine); background:var(--bg);
color:var(--wine); font-style:normal; font-family:'Montserrat', sans-serif; font-weight:500; font-size:10px; letter-spacing:0.08em;
display:flex; align-items:center; justify-content:center;
}
.on3-step:first-child .no{ background:var(--wine); color:var(--cream); }
.on3-step h3{ padding-top:0.3rem; }
.on3-step p{ padding-top:0.3rem; }
.on3-flow h2{ padding-left:52px; position:relative; }
.on3-flow h2::before{ content:''; position:absolute; left:0; top:50%; width:36px; height:1px; background:var(--wine); }
.on3-foot .btn-solid{ background:var(--wine); color:var(--cream); }
.on3-foot .btn-solid:hover{ background:var(--wine-b); }
@media (max-width:900px){
.on3-step{ grid-template-columns:33px minmax(0,1fr); }
.on3-step p{ grid-column:2; padding-top:0; }
.on3-step h3{ padding-top:0.45rem; }
.on3-flow h2{ padding-left:0; } .on3-flow h2::before{ display:none; }
}
/* 5. Dyptyk oferty wg wednow-dyptyk.html: rozjazd polowek, rozwijana lista,
pas "Albo jedno i drugie" ze zlota linia od krawedzi, wsuwane polowki zdjec, pas rosnie w gore */
.dip-stage{ display:flex; flex-direction:column; gap:4px; max-width:1080px; margin:0 auto; height:min(92vh, 860px); }
.dip-stage .dip{ flex:1 1 auto; min-height:0; height:auto; max-width:none; margin:0; }
.half .veil{ background:linear-gradient(to top, rgba(19,14,10,0.94) 0%, rgba(19,14,10,0.55) 38%, rgba(19,14,10,0.1) 78%); }
.half .kick{ color:rgba(255,255,255,0.86); }
.half .fold ul{ color:rgba(255,255,255,0.86); }
.half .fold .cta{ border-bottom-color:var(--cream); }
.dip-stage .bridge{
flex:0 0 auto; margin:0; max-width:none; height:clamp(118px, 15vh, 150px); align-items:end;
transition:height 1.05s cubic-bezier(.16,1,.3,1); animation:none;
}
.bridge.on{ height:clamp(300px, 44vh, 400px); }
.bridge .fold{ display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 0.85s cubic-bezier(.16,1,.3,1), opacity 0.55s ease 0.1s; }
.bridge .fold > div{ overflow:hidden; }
.bridge .fold ul{ list-style:none; margin:1.4rem 0 0; padding:1.1rem 0 0; border-top:1px solid rgba(246,242,236,0.25); columns:2; column-gap:2.5rem; max-width:62ch; font-size:0.9rem; color:rgba(255,255,255,0.86); }
.bridge .fold li{ padding:0.22rem 0; break-inside:avoid; }
.bridge.on .fold{ grid-template-rows:1fr; opacity:1; }
.bridge::before, .bridge::after{ display:block; background:var(--cream); }
.bridge .mL, .bridge .mR{ transform:none; }
.bridge .mL{ transform:translateX(-102%); } .bridge .mR{ transform:translateX(102%); }
.bridge.on .mL, .bridge.on .mR{ transform:none; opacity:1; }
.bridge .mL img, .bridge .mR img{ filter:saturate(0.7) brightness(0.5); transform:scale(1.05); transition:transform 1.4s cubic-bezier(.16,1,.3,1); }
.bridge.on .mL img, .bridge.on .mR img{ transform:scale(1); }
.bridge .scrim{ display:block; background:rgba(60,10,14,0.62); }
.bridge .why{ color:var(--cream); }
.bridge > a{ border-bottom-color:var(--cream); }
.bridge > a:hover{ border-bottom-color:var(--cream); }
@media (max-width:860px){
.dip-stage{ height:auto; }
.dip-stage .dip{ flex:none; }
.half{ min-height:62vh; }
.dip-stage .bridge{ height:auto; }
.bridge .fold{ grid-template-rows:1fr; opacity:1; }
.bridge .fold ul{ columns:1; }
}
@media (prefers-reduced-motion:reduce){
.dip-stage *, .dip-stage, .bridge, .half{ transition:none !important; animation:none !important; }
.half .fold, .bridge .fold{ grid-template-rows:1fr; opacity:1; }
.half img, .half video{ transform:none; }
.bridge .copy, .bridge > a{ opacity:1; transform:none; }
.bridge::before, .bridge::after{ width:50%; }
}
/* 8. Portfolio hub: pasek z nazwa kafla na bordo, kremowy napis, zlota linia */
.pfc .pfc-bar{ background:var(--wine); padding:22px 16px 24px; text-align:center; transition:background 0.3s; }
.pfc .pfc-bar .pfc-line{ background:var(--cream); margin:0 auto 14px; }
.pfc .pfc-bar .pfc-name{ color:var(--cream); }
.pfc .pfc-bar .pfc-sub{ color:rgba(246,242,236,0.78); }
.pfc:hover .pfc-bar .pfc-name{ color:var(--cream); }
.pfc:hover .pfc-bar{ background:var(--wine-b); }
.pfc:hover .pfc-img{ box-shadow:none; }
/* 9. Reportaze (foto .rp3, film .rpf, bramka) w calosci na bordo; tekst i separatory krem,
przyciski krem z bordowym napisem */
body.rp-dark{ background:var(--wine); color:var(--cream); }
body.rp-dark ::selection{ background:var(--cream); color:var(--wine); }
body.rp-dark h1, body.rp-dark h2, body.rp-dark h3{ color:var(--cream); }
body.rp-dark .rp3 .rail .no{ color:var(--cream); }
body.rp-dark .rp3 .rail .nm, body.rp-dark .rp3 figcaption, body.rp-dark .solo3 figcaption,
body.rp-dark .rp3 .crew3 li span, body.rp-dark .dl-panel .dl-note, body.rp-dark .rpf-dl .small{ color:rgba(246,242,236,0.72); }
body.rp-dark .rp3 .stage .txt, body.rp-dark .rp3 .person3 .who p, body.rp-dark .dl-panel p,
body.rp-dark .rpf .t, body.rp-dark .rpf-film .note, body.rp-dark .rpf-dl .intro, body.rp-dark .rpf-dlbox .spec{ color:rgba(246,242,236,0.88); }
body.rp-dark .rp3 .stage, body.rp-dark .rp3 .sub + .sub, body.rp-dark .rp3 .crew3, body.rp-dark .rp3 .crew3 li,
body.rp-dark .rpf-film .head, body.rp-dark .rpf-films, body.rp-dark .rpf-dlbox, body.rp-dark .rpf-dlbox .go{ border-color:rgba(246,242,236,0.28); }
body.rp-dark .rp3 .frames figure:has(figcaption) figcaption{ color:rgba(246,242,236,0.72); }
body.rp-dark .rp3 .frames figure{ background:rgba(0,0,0,0.2); }
body.rp-dark .rpf-label, body.rp-dark .rpf-film .len, body.rp-dark .rpf-dlbox .go{ color:var(--cream); }
body.rp-dark .rpf-films{ background:transparent; }
body.rp-dark .rpf-dlbox:hover{ background:rgba(246,242,236,0.08); border-color:var(--cream); }
body.rp-dark .dl-panel{ background:transparent; border:1px solid rgba(246,242,236,0.28); border-radius:0; }
body.rp-dark .dl-panel .dl-ic{ color:var(--cream); }
body.rp-dark .btn-solid{ background:var(--cream); color:var(--wine); }
body.rp-dark .btn-solid:hover{ background:#fff; }
body.rp-dark footer{ color:rgba(246,242,236,0.72); border-top:1px solid rgba(246,242,236,0.2); }
body.rp-dark footer a:hover{ color:var(--cream); }
body.rp-dark .next3 .veil{ background:rgba(60,10,14,0.55); }
body.rp-dark #lb3{ background:rgba(40,6,9,0.97); }
/* bramka hasla */
body.rp-dark .gate{ background:var(--wine); }
body.rp-dark .gate .gate-bg img{ filter:brightness(0.32) saturate(0.7); }
body.rp-dark .gate .gate-box{ background:var(--wine); color:var(--cream); border:1px solid rgba(246,242,236,0.4); border-radius:0; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
body.rp-dark .gate .gate-box .eyebrow{ color:rgba(246,242,236,0.78); } body.rp-dark .gate .gate-box .eyebrow::before{ background:var(--cream); }
body.rp-dark .gate .gate-box h1{ color:var(--cream); }
body.rp-dark .gate .gate-box .gate-where, body.rp-dark .gate .gate-box .gate-note{ color:rgba(246,242,236,0.78); }
body.rp-dark .gate .gate-box .gate-lock{ color:var(--cream); }
body.rp-dark .gate .gate-box input{ background:rgba(246,242,236,0.08); border-color:rgba(246,242,236,0.4); color:var(--cream); border-radius:0; }
body.rp-dark .gate .gate-box input::placeholder{ color:rgba(246,242,236,0.6); }
body.rp-dark .gate .gate-box input:focus{ border-color:var(--cream); }
body.rp-dark .gate .gate-box .gate-err{ color:#ffd3d3; }
/* 10. Reportaz: pelnoszerokie kadry poziome 21:9 */
.rp3 .strips figure{ aspect-ratio:21/9; }
.rp3 .g-wide3 figure{ aspect-ratio:21/9; }
.rp3 .frames figure:has(figcaption) img{ aspect-ratio:21/9; }
.rp3 .pgrid figure:nth-child(4){ aspect-ratio:21/9; }
@media (max-width:840px){
.rp3 .strips figure, .rp3 .g-wide3 figure, .rp3 .frames figure:has(figcaption) img{ aspect-ratio:16/9; }
}
/* 12. "Kto tworzyl ten dzien": 4 pozycje w jednym rzedzie, 2x2 na telefonie */
.rp3 .crew3 ul{ grid-template-columns:repeat(4, 1fr); gap:1.4rem 2rem; }
@media (max-width:840px){ .rp3 .crew3 ul{ grid-template-columns:1fr 1fr; gap:1.2rem 1.4rem; } }
/* stopka: czytelniejszy kolor (audyt kontrastu 2026-09-22) */
footer{ color:var(--dim); }
/* audyt kontrastu 2026-09-22: --muted ciemniejszy (etykiety pol, klucze kontaktu, pozycje "nie" w pakietach); O nas mobile: ramka zdjecia nie wystaje poza ekran */
:root{ --muted:#666b78; }
.pk li.no .mk{ color:#9a8f8d; }
@media (max-width:900px){ .on3-shot{ margin-right:1.6rem; } }
.ig-invite .ii-main{ white-space:nowrap; }
/* ============================================================
v6.0 - POPRAWKI 6 (2026-09-23): GRANAT jako jedyny kolor marki (#1b2433),
bez zlota, bez .theme-pick; pasek IG z prawdziwymi zdjeciami + biala tabliczka;
FAQ na bialym z granatowymi kartami; granat w "Zajrzyjcie do calych historii"
i "Szesc historii, szesc filmow" (.sec-navy); Ekipa 2 kolumny; kropki Przebiegu
wypelnione; przyciski Portfolio w ofertach; materialy klienta (WebP, filmy 1080/720).
MOBILE: menu granat bez podmenu i WhatsApp; oferta = dwa pionowe panele + pas;
pakiety jako zakladki; portfolio hub jak oferta; kontakt: karta + formularz 3 kroki.
============================================================ */
/* 1-2. Pasek Instagrama: tabliczka biala jak przed runda 5 */
.ig-block{ background:var(--wine); }
.ig-invite{ background:#fff; border:1px solid var(--line); box-shadow:0 20px 60px rgba(23,17,13,0.25); }
.ig-invite .ii-top{ color:var(--muted); }
.ig-invite .ii-main{ color:var(--ink); }
.ig-invite::before{ display:none; }
.ig-invite:hover{ border-color:var(--wine); }
/* 3. FAQ: biale tlo sekcji, karty pytan w granacie z kremowym tekstem */
section.faq-sec{ background:#fff !important; color:var(--ink); }
.faq-sec .eyebrow{ color:var(--wine); } .faq-sec .eyebrow::before{ background:var(--wine); }
.faq-sec h2, .faq-sec h2 em{ color:var(--ink); }
.faq-sec .faqc{ background:var(--wine); border-color:var(--wine); color:var(--cream); border-radius:12px; }
.faq-sec .faqc summary{ color:var(--cream); }
.faq-sec .faqc p{ color:rgba(246,242,236,0.82); }
.faq-sec .faqc summary::after{ background:var(--cream); }
.faq-sec .faqc[open]{ border-color:var(--wine-b); background:var(--wine-b); }
/* 4. Sekcje w granacie: "Zajrzyjcie do calych historii" (portfolio/zdjecia) i "Szesc historii" (portfolio/film) */
section.sec-navy{ background:var(--wine) !important; color:var(--cream); border-top:0 !important; }
.sec-navy .eyebrow{ color:rgba(246,242,236,0.8); } .sec-navy .eyebrow::before{ background:rgba(246,242,236,0.6); }
.sec-navy h2, .sec-navy h2 em, .sec-navy h3{ color:var(--cream); }
.sec-navy .section-head p{ color:rgba(246,242,236,0.8); }
.sec-navy .rep{ background:rgba(255,255,255,0.05); border-color:rgba(246,242,236,0.25); }
.sec-navy .rep:hover{ box-shadow:0 24px 50px rgba(0,0,0,0.3); }
.sec-navy .rep .r-meta{ color:rgba(246,242,236,0.7); }
.sec-navy .flm .flm-meta3{ border-top-color:rgba(246,242,236,0.25); }
.sec-navy .flm .flm-meta3 > div > span{ color:rgba(246,242,236,0.6); }
.sec-navy .flm .flm-meta3 > div > b{ color:var(--cream); }
.sec-navy .flm .flm-meta3 > div > p, .sec-navy .flm p{ color:rgba(246,242,236,0.82); }
.sec-navy + .ig-block{ border-top:1px solid rgba(246,242,236,0.15); }
/* 5. O nas: "Ekipa" - naglowek wysrodkowany nad dwoma akapitami obok siebie */
.on3-ribbon{ grid-template-columns:1fr; gap:1.4rem; }
.on3-ribbon .on3-label{ text-align:center; border-right:0; padding-right:0; margin:0; }
.on3-tbody{ grid-template-columns:1fr 1fr; max-width:100ch; margin:0 auto; gap:clamp(1.6rem, 4vw, 4rem); }
.on3-tbody .t{ max-width:none; } .on3-tbody .t + .t{ margin-top:0; }
@media (max-width:900px){ .on3-tbody{ grid-template-columns:1fr; gap:1.2rem; } }
/* 6. Przebieg: wszystkie kropki wypelnione granatem, biala cyfra */
.on3-step .no{ background:var(--wine); color:var(--cream); border-color:var(--wine); }
/* 7. Przyciski "Portfolio" pod opisem filmu i pod przykladowymi kadrami */
.pf-btns{ text-align:center; margin-top:38px; }
.film-loop-sec .pf-btns .btn-line{ border-color:rgba(255,255,255,0.7); color:#fff; }
.film-loop-sec .pf-btns .btn-line:hover{ background:#fff; color:var(--wine); }
/* bez zlota: linie w pasie "jedno i drugie" i w kaflach portfolio; akcenty v5 na krem */
.bridge::before, .bridge::after{ display:none !important; }
.pfc .pfc-bar .pfc-line, .pfc .pfc-line{ display:none; }
.bridge .why{ color:rgba(246,242,236,0.72); }
.bridge > a{ border-bottom-color:rgba(246,242,236,0.55); }
.half .fold .cta{ border-bottom-color:rgba(255,255,255,0.6); }
.bridge .scrim{ background:rgba(27,36,51,0.62); }
body.rp-dark .next3 .veil{ background:rgba(27,36,51,0.55); }
body.rp-dark #lb3{ background:rgba(18,24,33,0.97); }
.on3-step, .on3-step:last-child{ border-color:rgba(27,36,51,0.18); }
/* hero z filmem w tle (oferta film), tla WebP */
.w-hero .hv video{ position:absolute; inset:0; }
/* pas "jedno i drugie": lewa polowka to film */
.bridge .mL video{ width:100%; height:100%; object-fit:cover; filter:saturate(0.7) brightness(0.5); display:block; }
/* film "pod oferta" z dzwiekiem i kontrolkami (zamiast petli bez dzwieku) */
.film-loop video{ object-fit:contain; background:#000; }
/* galeria portfolio: 175 zdjec, lightbox z nawigacja */
.biggal figure{ background:var(--surface); }
.biggal img{ height:auto; }
/* kontakt: karta Bartka - plakietka "48 h", wiersze z ikona i "Kopiuj" (desktop i mobile) */
.k-person img{ border-radius:50%; width:64px; height:64px; }
.kp-pill{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; padding:5px 10px; border-radius:999px; background:#e7f2ea; color:#2e6b3a; font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.04em; }
.kp-pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:#3a9a4e; }
.k-lines li{ display:flex; align-items:center; gap:12px; padding:12px 0; }
.k-lines .kl-ic{ width:32px; height:32px; flex-shrink:0; border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--dim); background:#fff; }
.k-lines .kl-ic svg{ width:15px; height:15px; }
.k-lines .kl-body{ flex:1; min-width:0; }
.k-lines .kl-body a{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.k-lines .kl-key{ display:block; margin-bottom:1px; }
.k-lines .kl-copy{ flex-shrink:0; font-family:'Montserrat', sans-serif; font-weight:600; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--dim); background:#fff; border:1px solid var(--line); border-radius:999px; padding:7px 12px; cursor:pointer; transition:background 0.2s, color 0.2s, border-color 0.2s; }
.k-lines .kl-copy:hover{ border-color:var(--wine); color:var(--wine); }
.k-lines .kl-copy.done{ background:var(--wine); border-color:var(--wine); color:#fff; }
.k-intro{ color:var(--dim); font-size:0.92rem; }
/* formularz: elementy krokow (ukryte na desktopie, aktywne na telefonie) */
.fs-step, .fs-nav, .fs-back{ display:none; }
/* ------------------------------------------------------------
MOBILE (<= 900px)
------------------------------------------------------------ */
@media (max-width:900px){
/* 8. menu: granat, tylko 4 pozycje, bez WhatsApp */
.mobile-menu{ background:var(--wine); gap:10px; padding-top:110px; }
.mobile-menu a{ color:var(--cream); font-size:2rem; }
.mobile-menu a:hover, .mobile-menu a.active{ color:#fff; font-style:normal; text-decoration:underline; text-underline-offset:8px; text-decoration-thickness:1px; }
.burger.open{ border-color:rgba(255,255,255,0.5); } .burger.open span{ background:#fff; }
.fab-wa{ display:none !important; }
.fab-tel{ background:var(--wine); }
/* 9. OFERTA hub: dwa pionowe panele obok siebie na cala wysokosc + pas "jedno i drugie" */
.dip-stage{ height:auto; gap:4px; }
.dip-stage .dip{ flex:none; flex-direction:row; height:min(78svh, 640px); gap:4px; }
.dip .half{ min-height:0; aspect-ratio:auto; flex:1; transition:flex 0.9s cubic-bezier(.16,1,.3,1); }
.dip.has-open .half:not(.open){ flex:0.55; }
.dip .half.open{ flex:1.8; }
.dip .half img, .dip .half video{ transform:scale(1.06); transition:transform 1.4s cubic-bezier(.16,1,.3,1); }
.dip .half.open img, .dip .half.open video{ transform:scale(1); }
.half .txt{ padding:1.3rem 1rem 1.2rem; }
.half h3{ font-size:1.55rem; margin-bottom:4px; }
.half .kick{ display:none; font-size:0.84rem; margin-top:6px; }
.half.open .kick{ display:block; }
.half .fold{ grid-template-rows:0fr; opacity:0; }
.half.open .fold{ grid-template-rows:1fr; opacity:1; }
.half .fold ul{ font-size:0.84rem; margin-top:0.9rem; padding-top:0.8rem; }
.half .fold .cta{ margin-top:0.9rem; }
.half .tap-hint{ display:block; font-family:'Montserrat', sans-serif; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.62); margin-top:10px; pointer-events:none; }
.half .tap-hint::before{ content:attr(data-closed); }
.half.open .tap-hint::before{ content:attr(data-open); }
.dip.has-open .half:not(.open) .tap-hint, .dip.has-open .half:not(.open) .kick{ display:none; }
.dip.has-open .half:not(.open) h3{ font-size:1.2rem; }
.dip-stage .bridge{ height:auto; min-height:0; padding:1.4rem 1.2rem 1.3rem; display:block; }
.bridge.on{ height:auto; }
.bridge .merge{ display:none; }
.bridge .fold{ display:none; }
.bridge h3{ font-size:1.25rem; }
.bridge .why{ font-size:0.82rem; margin-top:0.35rem; }
.bridge > a{ display:inline-block; margin-top:1rem; padding-bottom:0.45rem; width:100%; }
.bridge .copy, .bridge > a{ opacity:1; transform:none; }
/* 10. PAKIETY jako zakladki Standard / Rozszerzenie / Premium (jedna karta naraz) */
.pk-tabs{ display:flex; background:var(--surface); border-radius:999px; padding:5px; max-width:440px; margin:0 auto 14px; }
.pk-tabs button{ flex:1; border:0; background:transparent; border-radius:999px; padding:12px 6px; font-family:'Montserrat', sans-serif; font-weight:500; font-size:12px; color:var(--dim); cursor:pointer; transition:background 0.25s, color 0.25s; }
.pk-tabs button.on{ background:var(--wine); color:#fff; font-weight:600; }
.pk3{ display:flex; grid-template-columns:none; max-width:440px; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px; }
.pk3::-webkit-scrollbar{ display:none; }
.pk3 .pk{ flex:0 0 100%; scroll-snap-align:center; border-radius:20px; padding:26px 22px 22px; border-color:transparent; box-shadow:none; transform:none !important; opacity:1; }
.pk3 .pk.mid{ border-color:transparent; box-shadow:none; }
.pk .pk-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pk .pk-head .pk-name{ margin:0; padding:0; border:0; font-size:1.7rem; font-weight:500; color:var(--ink); }
.pk .pk-count{ font-family:'Playfair Display', serif; font-size:1.1rem; color:var(--muted); white-space:nowrap; }
.pk .pk-count b{ font-size:1.45rem; font-weight:500; color:var(--ink); }
.pk .pk-bar{ position:relative; height:2px; background:var(--line); margin:12px 0 4px; }
.pk .pk-bar::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:calc(var(--p, 0) * 100%); background:var(--wine); }
.pk ul{ position:relative; }
.pk ul::before{ content:''; position:absolute; left:0; top:0; height:calc(var(--p, 0) * 100%); width:2px; background:var(--wine); }
.pk li{ padding:13px 0 13px 12px; gap:12px; align-items:center; font-size:0.93rem; color:var(--ink); }
.pk li .mk{ width:20px; height:20px; margin:0; border-radius:50%; border:1px solid var(--line); font-size:0; position:relative; }
.pk li.yes .mk{ background:var(--wine); border-color:var(--wine); }
.pk li.yes .mk::after{ content:''; width:6px; height:3px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(-45deg) translate(1px,-1px); }
.pk li.no{ color:var(--muted); }
.pk li.no .txt{ text-decoration:none; }
.pk .pk-note{ text-align:left; margin:14px 0 0; font-size:0.84rem; color:var(--muted); max-width:none; }
.pk .pk-go{ display:block; margin-top:20px; text-align:center; background:var(--wine); color:#fff; border-radius:999px; padding:17px 20px; font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; }
.pk-swipe{ text-align:center; font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.14em; color:var(--muted); margin-top:14px; }
.pk-cta{ display:none; }
/* 11. PORTFOLIO hub: dwa panele; dotkniecie rozszerza panel, drugi zwija sie do pionowego napisu */
.pf-choice{ display:flex; grid-template-columns:none; gap:10px; max-width:none; height:min(66svh, 560px); }
.pfc{ flex:1; display:flex; flex-direction:column; min-width:0; transition:flex 0.85s cubic-bezier(.16,1,.3,1); position:relative; overflow:hidden; }
.pf-choice.has-open .pfc:not(.open){ flex:0 0 42px; }
.pf-choice.has-open .pfc.open{ flex:1; }
.pfc .pfc-img{ flex:1; aspect-ratio:auto; min-height:0; box-shadow:none !important; }
.pfc .pfc-img img, .pfc .pfc-img video{ transform:none !important; }
.pfc .pfc-bar{ padding:16px 12px 18px; }
.pfc .pfc-bar .pfc-name{ font-size:1.05rem; letter-spacing:0.2em; text-transform:uppercase; }
.pfc .pfc-bar .pfc-sub{ display:none; font-size:9px; letter-spacing:0.2em; margin-top:6px; }
.pfc .pfc-go{ display:none; margin:14px auto 0; width:max-content; border:1px solid rgba(246,242,236,0.6); border-radius:999px; padding:10px 18px; font-family:'Montserrat', sans-serif; font-weight:600; font-size:9px; letter-spacing:0.2em; text-transform:uppercase; color:var(--cream); }
.pfc.open .pfc-bar .pfc-sub, .pfc.open .pfc-go{ display:block; }
.pfc .pfc-vert{ display:none; }
.pf-choice.has-open .pfc:not(.open) .pfc-img, .pf-choice.has-open .pfc:not(.open) .pfc-bar{ display:none; }
.pf-choice.has-open .pfc:not(.open){ background:var(--wine); }
.pf-choice.has-open .pfc:not(.open) .pfc-vert{ display:flex; align-items:center; justify-content:center; height:100%; writing-mode:vertical-rl; transform:rotate(180deg); font-family:'Montserrat', sans-serif; font-weight:600; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--cream); }
.pf-hint{ text-align:center; font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.14em; color:var(--muted); margin-top:14px; }
/* 12. KONTAKT: karta Bartka + formularz w 3 krokach */
.kontakt2{ gap:18px; }
.kpanel{ border-radius:20px; padding:26px 22px; border-color:transparent; }
.kpanel h2{ font-size:1.7rem; margin-bottom:6px; }
.kpanel .k-label{ margin-bottom:8px; }
.k-person{ margin-bottom:14px; }
.k-person .kp-name{ font-size:1.5rem; }
.fs-head{ display:flex; justify-content:space-between; align-items:baseline; }
.fs-step{ display:block; font-family:'Montserrat', sans-serif; font-weight:500; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); }
.kpanel h2.fs-title{ padding-bottom:12px; position:relative; margin-bottom:22px; }
.kpanel h2.fs-title::after{ content:''; position:absolute; left:0; bottom:-1px; width:120px; height:2px; background:var(--wine); }
.kpanel h2.fs-title::before{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--line); }
.contact-form .form-row{ display:contents; }
.contact-form [data-step]{ display:none; }
.contact-form[data-cur="1"] [data-step="1"], .contact-form[data-cur="2"] [data-step="2"], .contact-form[data-cur="3"] [data-step="3"]{ display:block; }
.contact-form .field label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.contact-form .field{ position:relative; }
.contact-form .field.f-date label{ position:absolute; left:16px; top:9px; width:auto; height:auto; clip:auto; overflow:visible; margin:0; font-size:8px; }
.contact-form .field.f-date input{ padding-top:22px; padding-bottom:10px; }
.field input, .field select, .field textarea{ background:#fff; border-radius:12px; padding:17px 16px; }
.field textarea{ min-height:120px; }
.contact-form[data-cur="3"] .consent{ display:flex; }
.contact-form button[type="submit"]{ display:none; border-radius:999px; padding:18px 20px; }
.contact-form[data-cur="3"] button[type="submit"]{ display:block; }
.contact-form[data-cur="3"] .form-note{ display:block; }
.fs-nav{ display:flex; flex-direction:column; gap:10px; }
.contact-form[data-cur="3"] .fs-nav .fs-next{ display:none; }
.fs-next{ width:100%; border:0; border-radius:999px; background:var(--wine); color:#fff; padding:18px 20px; font-family:'Montserrat', sans-serif; font-weight:600; font-size:11px; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; }
.fs-back{ display:none; background:none; border:0; color:var(--muted); font-family:'Montserrat', sans-serif; font-size:10px; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; padding:6px; }
.contact-form[data-cur="2"] .fs-back, .contact-form[data-cur="3"] .fs-back{ display:block; }
.contact-form .form-status{ order:99; }
}
/* v6.0: elementy pakietow/zakladek tylko na telefonie (JS tworzy je zawsze) */
.pk-tabs, .pk-swipe, .pk .pk-count, .pk .pk-bar, .pk .pk-note, .pk .pk-go, .pf-hint, .pfc .pfc-go, .pfc .pfc-vert, .half .tap-hint{ display:none; }
@media (max-width:900px){ .pk-tabs{ display:flex; } .pk-swipe, .pk .pk-bar, .pk .pk-note, .pk .pk-go, .pf-hint, .half .tap-hint{ display:block; } .pk .pk-count{ display:inline; } }
/* v6.1 (2026-09-23, uwagi koordynatora): czytelnosc tekstu w rozwinietym panelu oferty na jasnym kadrze
(mocniejszy granatowy gradient pod tekstem) + FAB telefonu zjezdza w bok, gdy zaslanialby przycisk (JS .fab-stack.away) */
@media (max-width:900px){
.dip .half .veil{ opacity:1; background:linear-gradient(to top, rgba(27,36,51,0.82) 0%, rgba(27,36,51,0.45) 30%, rgba(27,36,51,0) 60%); }
.dip .half.open .veil{ background:linear-gradient(to top, rgba(27,36,51,0.94) 0%, rgba(27,36,51,0.88) 40%, rgba(27,36,51,0.72) 70%, rgba(27,36,51,0) 100%); }
.dip.has-open .half .veil{ opacity:1; }
.fab-stack{ transition:transform 0.3s, opacity 0.3s; }
.fab-stack.away{ transform:translateX(90px); opacity:0; pointer-events:none; }
}
/* v6.1b: .veil mial z-index:-1 wewnatrz .media (ktore samo ma z-index:-1 = wlasny kontekst), wiec lezal POD zdjeciem i gradient nigdy nie byl widoczny; teraz nad zdjeciem/wideo, pod tekstem */
.half .media .veil{ z-index:1; }
/* ============================================================
v7.0 - POPRAWKI 7 (2026-09-25): tla hero z object-position (desktop/mobile z dane/tla.json),
menu mobilne wielkimi literami + Instagram, oferta hub mniejszy/wyzszy i bez przyciemnienia,
film "na dole" w petli bez kontrolek, kafle portfolio wyzsze, galeria "Przekroj" w siatce
(losowa kolejnosc, rowny dol), reportaz z danych (.g-one), SESJA (.ss-*) wg PDF klienta.
============================================================ */
/* 8. kadrowanie tel hero: --pos (desktop) / --pos-m (telefon) ustawiane inline z dane/tla.json */
.w-hero .hv img{ object-position:var(--pos, 50% 50%); }
@media (max-width:900px){ .w-hero .hv img{ object-position:var(--pos-m, 50% 50%); } }
/* 10. menu mobilne: wielkie litery, ciut wieksze, wysrodkowane; Instagram na dole z lewej */
.mm-ig{ display:none; }
@media (max-width:900px){
.mobile-menu{ text-align:center; gap:14px; }
.mobile-menu a{ text-transform:uppercase; letter-spacing:0.14em; font-size:1.75rem; font-weight:400; padding:8px 16px; }
.mobile-menu a.mm-ig{ display:flex; position:absolute; left:22px; bottom:26px; width:46px; height:46px; padding:0; align-items:center; justify-content:center; color:var(--cream); border:1px solid rgba(246,242,236,0.45); border-radius:50%; text-decoration:none; }
.mobile-menu a.mm-ig svg{ width:22px; height:22px; }
.mobile-menu a.mm-ig.active, .mobile-menu a.mm-ig:hover{ text-decoration:none; }
}
/* 11. pakiety (telefon): mniejsza przestrzen nad karta pakietu */
@media (max-width:900px){ .pk-top{ margin-bottom:18px; } .pk-tabs{ margin-bottom:8px; } .pk3 .pk{ padding-top:18px; } .pk-top .pt-items{ gap:10px 22px; } }
/* 6. oferta hub (desktop): calosc mniejsza (miesci sie na laptopie), panele wezsze = wyzsze, zdjecie bez przyciemnienia */
@media (min-width:861px){
#oferta-hub{ padding-top:64px; padding-bottom:72px; }
#oferta-hub .section-head{ margin-bottom:30px; }
.dip-stage{ max-width:900px; height:min(calc(100vh - 110px), 860px); }
.dip-stage .bridge{ height:clamp(92px, 11vh, 118px); padding:1.2rem 2rem; }
.half .txt{ padding:1.5rem 1.8rem; }
.half h3{ font-size:clamp(1.6rem, 2.6vw, 2.2rem); }
}
.half img, .half video{ filter:none; }
.half .veil{ background:linear-gradient(to top, rgba(19,14,10,0.84) 0%, rgba(19,14,10,0.42) 30%, rgba(19,14,10,0) 56%); }
.dip.both .half .veil{ opacity:0.8; }
/* 7. film "na dole" (oferta film / laczona): petla bez kontrolek, bez zatrzymania */
.film-loop video{ object-fit:cover; pointer-events:none; }
.film-loop video::-webkit-media-controls{ display:none !important; }
/* 9. portfolio hub: kafle na desktopie odrobine wyzsze */
@media (min-width:901px){ .pf-choice{ max-width:700px; } .pfc .pfc-img{ aspect-ratio:2/3; } }
/* 12. galeria "Przekroj naszych reportazy": siatka o rownych rzedach (pion 4:5 = 1 pole, poziom 8:5 = 2 pola),
kolejnosc losowa i uklad rzedow z JS (v7.0), zadnych dziur ani nierownego dolu */
.biggal{ columns:auto; column-gap:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.biggal figure{ margin:0; aspect-ratio:4/5; break-inside:auto; height:100%; }
.biggal figure.wide{ grid-column:span 2; aspect-ratio:8/5; }
.biggal[style*='grid-auto-rows'] figure{ aspect-ratio:auto; }
.biggal figure.hide{ display:none; }
.biggal img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:1024px){ .biggal{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:700px){ .biggal{ grid-template-columns:repeat(2, 1fr); gap:8px; } }
/* 13. reportaz z danych: pojedynczy portret (np. sekcja ONA/ON z jednym zdjeciem) */
.rp3 .g-one{ grid-template-columns:minmax(0, 600px); justify-content:center; }
.rp3 .g-one figure{ aspect-ratio:3/4; }
.rp3 .person3 .g-one{ justify-content:start; }
.rp3 .person3.right .g-one{ justify-content:end; }
/* 14. SESJA (.ss) - uklad wg szablonu klienta Julia_i_Karol_galeria.pdf: krem + granat, wielkie litery, numery kadrow */
body.ss-body{ background:#f4f1ea; color:var(--ink); }
.ss{ --ss-cream:#f4f1ea; --ss-navy:var(--wine); }
.ss section{ padding:0; }
.ss .ss-fig{ margin:0; position:relative; cursor:zoom-in; overflow:hidden; background:rgba(0,0,0,0.06); }
.ss .ss-fig img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.9s cubic-bezier(.2,.8,.2,1); }
.ss .ss-fig:hover img{ transform:scale(1.02); }
.ss .ss-fig figcaption{ position:absolute; left:0; bottom:-1.4rem; font-family:'Montserrat', sans-serif; font-size:9px; letter-spacing:0.28em; color:var(--muted); }
.ss .ss-fig.bw img{ filter:grayscale(1); }
.ss .ss-eyebrow{ font-family:'Montserrat', sans-serif; font-weight:500; font-size:9px; letter-spacing:0.32em; text-transform:uppercase; color:var(--dim); margin:0; }
.ss h2{ font-family:'Playfair Display', serif; font-weight:400; text-transform:uppercase; letter-spacing:0.06em; font-size:clamp(1.7rem, 3.2vw, 2.6rem); line-height:1.12; color:var(--ss-navy); margin:0.6rem 0 0; }
.ss .ss-t{ margin-top:1.2rem; max-width:34ch; color:var(--dim); font-size:0.95rem; line-height:1.75; }
.ss .ss-t p + p{ margin-top:0.8rem; }
.ss .ss-quote{ font-family:'Playfair Display', serif; font-size:clamp(1.05rem, 1.6vw, 1.3rem); line-height:1.5; color:var(--ss-navy); margin-top:1.4rem; max-width:26ch; }
.ss .ss-quote.big{ font-size:clamp(1.25rem, 2.2vw, 1.75rem); max-width:30ch; margin-top:0; }
.ss .dark{ background:var(--ss-navy); color:var(--cream); }
.ss .dark h2, .ss .dark .ss-quote{ color:var(--cream); }
.ss .dark .ss-eyebrow, .ss .dark .ss-t, .ss .dark .ss-fig figcaption{ color:rgba(246,242,236,0.72); }
/* okladka i zamkniecie: panel granatowy + kadr */
.ss-cover, .ss-end{ display:grid; grid-template-columns:1fr 1fr; min-height:100svh; background:var(--ss-navy); color:var(--cream); }
.ss-cover .ss-fig, .ss-end .ss-fig{ min-height:60vh; cursor:default; }
.ss-cover .ss-fig img, .ss-end .ss-fig img{ transform:none !important; }
.ss-panel{ position:relative; display:flex; flex-direction:column; justify-content:center; padding:clamp(6rem, 12vh, 9rem) clamp(1.5rem, 6vw, 5rem) clamp(3rem, 8vh, 5rem); }
.ss-panel .ss-logo{ position:absolute; top:clamp(6rem, 12vh, 7.5rem); left:clamp(1.5rem, 6vw, 5rem); width:150px; opacity:0.92; }
.ss-panel .rp-lock{ position:absolute; top:clamp(6.4rem, 12.6vh, 7.8rem); right:clamp(1.5rem, 6vw, 5rem); font-family:'Montserrat', sans-serif; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(246,242,236,0.6); display:flex; align-items:center; gap:8px; }
.ss-panel .rp-lock svg{ width:12px; height:12px; }
.ss-cover h1, .ss-names{ font-family:'Playfair Display', serif; font-weight:400; font-size:clamp(3.4rem, 7.5vw, 6.4rem); line-height:1.02; color:var(--cream); margin:0; letter-spacing:-0.01em; }
.ss-cover h1 .amp, .ss-names .amp{ color:#9aa6bd; font-style:italic; margin-right:0.15em; }
.ss-rule{ width:56px; height:1px; background:rgba(246,242,236,0.55); margin:clamp(2rem, 6vh, 4rem) 0 1.2rem; }
.ss-cover .ss-eyebrow, .ss-end .ss-eyebrow{ color:rgba(246,242,236,0.78); }
.ss-lead{ font-family:'Playfair Display', serif; font-size:0.95rem; color:rgba(246,242,236,0.85); margin-top:0.6rem; }
.ss-end .ss-panel{ align-items:flex-start; }
.ss-end .btn-solid{ margin-top:2.2rem; background:var(--cream); color:var(--ss-navy); }
.ss-end .btn-solid:hover{ background:#fff; }
.ss-end .ss-note{ margin-top:0.9rem; font-family:'Montserrat', sans-serif; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:rgba(246,242,236,0.6); }
/* ich historia */
.ss-story{ display:grid; grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr); gap:clamp(2rem, 6vw, 5rem); max-width:1320px; margin:0 auto; padding:clamp(4rem, 9vh, 7rem) 5vw !important; align-items:center; }
/* sekcje: tekst + 1-3 kadry */
.ss-sec, .ss-trio, .ss-portrait{ padding:clamp(3.5rem, 8vh, 6.5rem) 5vw !important; }
.ss-sec{ display:grid; grid-template-columns:minmax(0, 0.55fr) minmax(0, 1.45fr); gap:clamp(1.5rem, 5vw, 4.5rem); max-width:1320px; margin:0 auto; align-items:center; }
.ss-sec.flip{ grid-template-columns:minmax(0, 1.45fr) minmax(0, 0.55fr); }
.ss-sec.flip .ss-copy{ order:2; }
.ss-sec.notext{ grid-template-columns:1fr; }
.ss-sec.dark, .ss-trio.dark, .ss-portrait.dark{ max-width:none; }
.ss-sec.dark > *, .ss-trio.dark > *, .ss-portrait.dark > *{ max-width:1320px; }
.ss-sec.dark{ display:grid; grid-template-columns:minmax(0, 0.55fr) minmax(0, 1.45fr); }
.ss-shots{ display:grid; gap:clamp(0.8rem, 2vw, 1.6rem); align-items:start; }
.ss-shots .ss-fig.pion{ aspect-ratio:2/3; }
.ss-shots .ss-fig.poziom{ aspect-ratio:3/2; }
.ss-shots.n1{ grid-template-columns:1fr; }
.ss-shots.n2{ grid-template-columns:1fr 1fr; }
.ss-shots.n2 .ss-fig:nth-child(2){ margin-top:clamp(2rem, 7vh, 5rem); }
.ss-shots.n2 .ss-fig.poziom:first-child{ grid-column:span 1; }
.ss-shots.n2:has(.poziom + .pion){ grid-template-columns:1.5fr 1fr; }
.ss-shots.n2:has(.pion + .poziom){ grid-template-columns:1fr 1.5fr; }
.ss-shots.n3{ grid-template-columns:1fr 1fr 1fr; }
.ss-shots.n3 .ss-fig:nth-child(2){ margin-top:clamp(-2rem, -4vh, -1rem); }
.ss-shots.n3 .ss-fig:nth-child(3){ margin-top:clamp(1.5rem, 5vh, 3.5rem); }
.ss-story .ss-shots.n2{ grid-template-columns:1.15fr 0.85fr; }
.ss-story .ss-shots.n2 .ss-fig:nth-child(2){ margin-top:clamp(4rem, 12vh, 8rem); }
/* pelny kadr z napisem */
.ss-full{ position:relative; }
.ss-full .ss-fig{ aspect-ratio:16/9; max-height:100svh; cursor:zoom-in; }
.ss-full:has(.ss-over)::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:45%; background:linear-gradient(to top, rgba(10,12,18,0.72), rgba(10,12,18,0)); pointer-events:none; }
.ss-full .ss-over{ z-index:1; position:absolute; right:clamp(1.5rem, 6vw, 5rem); bottom:clamp(1.5rem, 6vh, 4rem); text-align:right; color:#fff; pointer-events:none; }
.ss-full .ss-over h2{ color:#fff; font-size:clamp(1.6rem, 3vw, 2.4rem); text-shadow:0 2px 24px rgba(0,0,0,0.45); }
.ss-full .ss-over .ss-eyebrow{ color:rgba(255,255,255,0.8); text-shadow:0 1px 10px rgba(0,0,0,0.5); }
.ss-full .ss-over .ss-t{ color:rgba(255,255,255,0.9); margin-left:auto; text-shadow:0 1px 10px rgba(0,0,0,0.5); }
/* tasma filmowa: trzy czarno-biale kadry na granacie z perforacja */
.ss-tape{ background:#0f1520; padding:clamp(3rem, 7vh, 5rem) 5vw !important; }
.ss-reel{ position:relative; max-width:1320px; margin:0 auto; display:grid; grid-template-columns:1fr 2.1fr 1fr; gap:14px; padding:26px 0; align-items:stretch; }
.ss-reel::before, .ss-reel::after{ content:''; position:absolute; left:0; right:0; height:8px; background-image:repeating-linear-gradient(to right, rgba(154,166,189,0.5) 0 12px, transparent 12px 22px); }
.ss-reel::before{ top:6px; } .ss-reel::after{ bottom:6px; }
.ss-reel .ss-fig{ aspect-ratio:auto; min-height:300px; }
.ss-reel .ss-fig figcaption{ color:rgba(246,242,236,0.55); }
/* trio na granacie */
.ss-trio .ss-shots.n3 .ss-fig{ margin-top:0 !important; aspect-ratio:2/3; }
.ss-trio .ss-shots{ max-width:1100px; margin:0 auto; }
.ss-trio .ss-copy{ margin:0 auto 2rem; text-align:center; }
/* portret: 1 poziomy + 2 male + 1 wysoki */
.ss-portrait{ display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 0.6fr); gap:clamp(1.5rem, 5vw, 4.5rem); max-width:1320px; margin:0 auto; align-items:center; }
.ss-grid4{ display:grid; grid-template-columns:1fr 1fr 1.15fr; grid-template-rows:auto auto; gap:clamp(0.8rem, 2vw, 1.6rem); }
.ss-grid4 .p1{ grid-column:1 / 3; aspect-ratio:3/2; }
.ss-grid4 .p2, .ss-grid4 .p3{ aspect-ratio:3/4; }
.ss-grid4 .p4{ grid-column:3; grid-row:1 / 3; aspect-ratio:auto; }
.ss-grid4:has(.p3:last-child) .p1, .ss-grid4:has(.p3:last-child) .p2{ grid-column:auto; grid-row:1; aspect-ratio:2/3; }
.ss-grid4:has(.p3:last-child) .p3{ grid-column:3; grid-row:1; align-self:end; aspect-ratio:3/4; max-width:70%; }
.ss-sec.quote{ grid-template-columns:minmax(0, 0.7fr) minmax(0, 1.3fr); }
@media (max-width:900px){
.ss-cover, .ss-end{ grid-template-columns:1fr; min-height:0; }
.ss-cover .ss-fig{ order:-1; min-height:0; aspect-ratio:3/4; }
.ss-end .ss-fig{ min-height:0; aspect-ratio:3/4; }
.ss-panel{ padding:3rem 6vw 3.5rem; min-height:0; }
.ss-panel .ss-logo, .ss-panel .rp-lock{ display:none; }
.ss-cover h1, .ss-names{ font-size:clamp(2.6rem, 13vw, 4rem); }
.ss-rule{ margin:1.6rem 0 1rem; }
.ss-story, .ss-sec, .ss-sec.dark, .ss-portrait, .ss-sec.quote{ grid-template-columns:1fr; gap:1.6rem; padding:3rem 6vw !important; }
.ss-sec.flip{ grid-template-columns:1fr; }
.ss-sec.flip .ss-copy{ order:0; }
.ss-shots.n2 .ss-fig:nth-child(2), .ss-story .ss-shots.n2 .ss-fig:nth-child(2){ margin-top:1.6rem; }
.ss-shots.n3{ grid-template-columns:1fr 1fr; }
.ss-shots.n3 .ss-fig{ margin-top:0 !important; }
.ss-shots.n3 .ss-fig:nth-child(3){ grid-column:span 2; aspect-ratio:3/2; }
.ss-trio .ss-shots.n3{ grid-template-columns:1fr 1fr 1fr; gap:6px; }
.ss-trio .ss-shots.n3 .ss-fig:nth-child(3){ grid-column:auto; aspect-ratio:2/3; }
.ss-full .ss-fig{ aspect-ratio:4/5; }
.ss-full .ss-over{ right:6vw; left:6vw; bottom:1.4rem; }
.ss-reel{ grid-template-columns:1fr; gap:10px; }
.ss-reel .ss-fig{ aspect-ratio:3/2; min-height:0; }
.ss-grid4{ grid-template-columns:1fr 1fr; }
.ss-grid4 .p1{ grid-column:1 / 3; } .ss-grid4 .p4{ grid-column:1 / 3; grid-row:auto; aspect-ratio:3/4; }
.ss-grid4:has(.p3:last-child) .p3{ max-width:none; }
.ss .ss-fig figcaption{ display:none; }
.ss-shots{ gap:1.4rem; }
}
/* v7.1 (25.09): hamburger bez koloru przycisku (iOS malowal kreski systemowym niebieskim) */
.burger{ color:inherit; -webkit-tap-highlight-color:transparent; }
/* ===== v8.0 (29.09, runda 8) ===== */
/* 4b. hub oferty (desktop): pas "Albo jedno i drugie" caly widoczny (wysokosc jak przed r7), rosnie w gore po najechaniu
(r7 nadpisywal .bridge.on stala wysokoscia), caly pas klikalny; scena dalej miesci sie w oknie laptopa (100vh - naglowek) */
@media (min-width:861px){
.dip-stage .bridge{ height:clamp(118px, 15vh, 150px); padding:1.25rem 2.2rem; align-items:end; cursor:pointer; }
.dip-stage .bridge.on{ height:clamp(220px, 44vh, 400px); }
}
.sticky-cta.show.away{ transform:translate(-50%, 90px); pointer-events:none; }
/* 13. menu mobilne: pozycje wysrodkowane w pionie na ekranie (nie od gory) */
@media (max-width:900px){
.mobile-menu{ justify-content:center; padding-top:0; padding-bottom:0; min-height:100vh; min-height:100svh; }
}
/* 14-15. opis filmu bez "Kiedy": Para, Gdzie, Co sie dzialo (zajmuje zwolnione miejsce); telefon: Para i Gdzie u gory, pod spodem opis */
.flm .flm-meta3{ grid-template-columns:1fr 1fr 3fr; }
@media (max-width:760px){ .flm .flm-meta3{ grid-template-columns:1fr 1fr; } .flm .flm-meta3 > div:last-child{ grid-column:1/-1; } }
/* 17. galeria "Przekroj": rzedy justowane, kadry w oryginalnych proporcjach (szerokosc/wysokosc z JS v8.0), bez kadrowania */
.biggal{ display:flex; flex-wrap:wrap; gap:12px; columns:auto; grid-template-columns:none; }
.biggal figure, .biggal figure.wide{ flex:none; margin:0; aspect-ratio:auto; height:auto; grid-column:auto; }
.biggal img{ width:100%; height:100%; object-fit:cover; }
.biggal figure.hide{ display:none; }
@media (max-width:700px){ .biggal{ gap:8px; } }
/* 18. reportaze: rzedy .jrow z _inc/tpl-reportaz.php (wed_pack v8) - kazdy kadr w oryginalnych proporcjach (--r = w/h),
wszystkie w rzedzie tej samej wysokosci, pelna szerokosc, bez przycinania; podpis pod pierwszym kadrem etapu */
.rp3 .frames.jrow{ display:flex; gap:6px; grid-template-columns:none; }
.rp3 .sub .frames.jrow + .frames.jrow, .rp3 .frames.jrow + .frames.jrow{ margin-top:6px; }
.rp3 .frames.jrow figure{ flex:var(--r) 1 0; min-width:0; aspect-ratio:var(--r); grid-column:auto; grid-row:auto; min-height:0; }
.rp3 .frames.jrow figure:has(figcaption){ aspect-ratio:auto; overflow:visible; }
.rp3 .frames.jrow figure:has(figcaption) img{ position:static; aspect-ratio:var(--r); height:auto; }
@media (max-width:840px){ .rp3 .frames.jrow figure:has(figcaption) img, .rp3 .frames.jrow figure{ aspect-ratio:var(--r); } .rp3 .frames.jrow figure:has(figcaption){ aspect-ratio:auto; } }
/* 18. sesje: kadry galerii w oryginalnych proporcjach (okladka i zamkniecie zostaja jako tlo) */
.ss .ss-shots .ss-fig, .ss .ss-reel .ss-fig, .ss .ss-grid4 .ss-fig, .ss .ss-trio .ss-fig, .ss .ss-full .ss-fig{ aspect-ratio:var(--r) !important; min-height:0; height:auto; }
.ss .ss-reel, .ss .ss-grid4{ align-items:start; }
.ss .ss-grid4 .p4{ align-self:start; }
.ss .ss-full .ss-fig{ max-height:none; width:min(100%, calc(100svh * var(--r))); margin:0 auto; }
/* 18. pojedynczy kadr w rzedzie: nie na cala szerokosc, tylko do wysokosci ok. 78% ekranu (pion nie urasta do 2 ekranow) */
.rp3 .frames.jrow > figure:only-child{ flex:0 1 auto; width:min(100%, calc(min(78vh, 760px) * var(--r))); }
.rp3 .frames.jrow:has(> figure:only-child){ justify-content:center; }
.rp3 .person3 .frames.jrow{ justify-content:flex-start; }
.rp3 .person3.right .frames.jrow{ justify-content:flex-end; }
/* ===== v9.0 (mail Bzdaka 02.10): galeria "Przekrój" (PORTFOLIO - FOTOGRAFIA) tak duża i szeroka jak galerie reportaży (wzór: .jg, rząd ~30vw, telefon ~50vw,
margines 1.5% / 8 px, odstęp 8 / 6 px). Szerokość: wyjście poza padding sekcji (5vw) do 1.5% z każdej strony. Wysokość rzędu liczy JS v9.0. ===== */
.biggal{ gap:8px; margin-left:-3.5vw; margin-right:-3.5vw; }
@media (max-width:820px){ .biggal{ gap:6px; margin-left:calc(8px - 5vw); margin-right:calc(8px - 5vw); } }
/* ===== v10.0 PANEL v2 etap 1 (2026-10): kadry teł per 4 ekrany (_inc/kadr.php). Stan 2 (komplet wariantów): kontener .tlo-v2, zmienne
--pos (laptop 1280-1919) / --pos-xl (>=1920) / --pos-md (768-1279) / --pos-m (<=767) na ![]()
/