:root{
    --bg:#0b0a0d;  --ink:#f8f8fb; --muted:#cbbdd0;
    --accent:#ff4da6; --brand:var(--accent); --brand-2:#ff69b4;
    --line:#35212e; --line-strong:#6a2a4b; --radius:6px;
    --nav-h: 90px;              /* wysokość paska (PC) */
    --nav-h-mobile: 82px;       /* wysokość paska (mobile) */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;scroll-behavior:smooth}
html,body{overflow-x:hidden}
img,video{max-width:100%;height:auto}
.container{max-width:1360px;margin:0 auto;padding:0 20px}
.section{padding:70px 0;background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.section--alt{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
h1,h2,h3{margin:0 0 1px}
h1{
    font-size: clamp(26px, 5.4vw, 38px);
    line-height: 1.15;
}
h2{
    font-size: clamp(14px, 5.4vw, 20px);
    line-height: 1.15;
}
.lead{color:#d3c5d6;font-size:clamp(18px,1.6vw,22px)}

/* === SPLASH: FIX === */
.splash{
    position: fixed;
    inset: 0;
    z-index: 3000;                 /* wyżej niż nav */
    background: #000;
    display: grid;
    place-items: center;
    opacity: 1;
    transition: opacity .6s ease;
    pointer-events: auto;
}
.splash.hide{
    opacity: 0;
    pointer-events: none;
}
body.splashing{
    overflow: hidden;              /* brak scrolla podczas splashu */
}

/* ========================= NAV ========================= */
.nav{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(6px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:var(--nav-h);
    padding:16px 16px;
    border-bottom:0 solid var(--line);
}
body{ padding-top:var(--nav-h); } /* kompensacja fixed */

.brand{
    display:flex;
    align-items:center;
    flex:0 0 auto;
}
.logo{
    width:150px;
    height:auto;
    object-fit:contain;
    max-width:none;
}

/* przycisk hamburgera */
.nav-toggle{
    margin-left:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-end;
    width:40px;
    height:32px;
    gap:6px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
}
.nav-toggle__line{
    width:24px;
    height:2px;
    border-radius:999px;
    background:var(--ink);
    box-shadow:0 0 8px rgba(255,77,166,.75);
    transition:transform .25s ease, opacity .2s ease, width .25s ease;
}
.nav-toggle__line:nth-child(2){ width:18px; }
.nav-toggle__line:nth-child(3){ width:12px; }

/* stan otwarty przycisku */
.nav-toggle--open .nav-toggle__line:nth-child(1){
    transform:translateY(4px) rotate(45deg);
    width:24px;
}
.nav-toggle--open .nav-toggle__line:nth-child(2){
    opacity:0;
}
.nav-toggle--open .nav-toggle__line:nth-child(3){
    transform:translateY(-4px) rotate(-45deg);
    width:24px;
}

/* szuflada menu z prawej strony */
.nav-drawer{
    position:fixed;
    inset:0;
    z-index:1100;
    display:flex;
    justify-content:flex-end;
    pointer-events:none;
}
.nav-drawer__overlay{
    flex:1 1 auto;
    background:rgba(0,0,0,0);
    opacity:0;
    transition:opacity .3s ease;
}

/* panel menu */
.menu{
    width:min(340px,80vw);
    background:#05060a;
    border-left:1px solid var(--line);
    box-shadow:-12px 0 30px rgba(0,0,0,.8);
    padding:24px 24px 32px;
    transform:translateX(100%);
    transition:transform .35s cubic-bezier(.22,.61,.36,1);
    display:flex;
    flex-direction:column;
    gap:12px;
    font-size:1rem;
}
.menu__header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}
.menu__logo{
    width:150px;
    height:auto;
    object-fit:contain;
}
.nav-close{
    border:0;
    background:transparent;
    cursor:pointer;
    width:32px;
    height:32px;
    display:grid;
    place-items:center;
    font-size:28px;
    line-height:1;
    color:var(--ink);
}
.nav-close__icon{
    transform:translateY(-2px);
}

/* linki w szufladzie */
.menu a{
    color:var(--ink);
    text-decoration:none;
    position:relative;
    padding:10px 2px;
    border-radius:var(--radius);
}
.menu a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:linear-gradient(90deg,var(--brand),var(--brand-2));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s ease;
}
.menu a:hover::after,
.menu a:focus-visible::after{
    transform:scaleX(1);
}
.menu a:hover,
.menu a:focus-visible,
.menu a:active{
    text-shadow:0 0 10px rgba(255,77,166,.85), 0 0 22px rgba(255,77,166,.45);
    filter:drop-shadow(0 0 16px rgba(255,77,166,.55));
}

/* stan otwarty szuflady */
.nav-drawer--open{
    pointer-events:auto;
}
.nav-drawer--open .nav-drawer__overlay{
    opacity:.6;
    background:rgba(0,0,0,.85);
}
.nav-drawer--open .menu{
    transform:translateX(0);
}
body.nav-open{
    overflow:hidden;
}

/* desktop */
@media (min-width:821px){
    .nav{ padding:18px 30px; }
    .logo{ width:170px; }
    .menu{ width:min(420px,30vw); }
}

/* MOBILE NAV */
@media (max-width:820px){
    :root{ --nav-h: var(--nav-h-mobile); }
    body{ padding-top:var(--nav-h-mobile); }

    .nav{ padding:12px 12px; }
    .logo{ width:128px; }
    .menu{ width:min(320px,82vw); }
}
@media (max-width:480px){
    .logo{ width:118px; }
}
/* ========================= BUTTONS ========================= */
.btn{display:inline-block;padding:14px 22px;border-radius:var(--radius);border:1px solid var(--line-strong);text-decoration:none;color:var(--ink);transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden;font-size:1.05rem}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(255,77,166,.3), 0 16px 40px rgba(255,77,166,.35)}
.btn--primary{background:linear-gradient(180deg,#ff4da6,#d93c8b);border-color:#ff4da6;box-shadow:0 12px 28px rgba(255,77,166,.35)}
.btn--primary:hover{box-shadow:0 0 0 3px rgba(255,77,166,.3), 0 18px 44px rgba(255,77,166,.5)}
.btn--primary .shine{position:absolute;top:-120%;left:-30%;width:60%;height:300%;transform:rotate(20deg);background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.3), rgba(255,255,255,.0));opacity:0;pointer-events:none}
.btn--primary:hover .shine{animation:shine 2.2s ease forwards}
@keyframes shine{to{transform:translateX(220%) rotate(20deg);opacity:.9}}
.btn--call{background:#0a090b;border-color:var(--line-strong);box-shadow:0 8px 20px rgba(0,0,0,.35);position:relative}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 6px rgba(255,77,166,.35), 0 24px 64px rgba(255,77,166,.5)}50%{box-shadow:0 0 0 10px rgba(255,77,166,.5), 0 28px 84px rgba(255,77,166,.65)}}
.btn--call::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:3px solid rgba(255,77,166,.35);opacity:0;transform:scale(.98);transition:opacity .25s ease, transform .25s ease}
.btn--call:hover::after{opacity:1;animation:pulseGlow 1.8s ease-in-out infinite;transform:scale(1)}
.cta-row{display:flex;gap:16px;margin-top:12px;justify-content:center}
.btn .ico{margin-right:8px;display:inline-block}

/* HERO */
.hero{position:relative;overflow:hidden;min-height:92vh;padding:12vh 0 10vh;display:grid;place-items:center}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(0px) brightness(1.00) saturate(1.00);transform:scale(1.00)}
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.45) 65%),radial-gradient(1000px 420px at 50% 40%,transparent 60%)}
.hero__grid{position:relative;z-index:1;display:grid;place-items:center;text-align:center;gap:20px;width:100%}
.hero__logo-top{display:grid;place-items:center;margin-bottom:6px}
.hero__brand{width:min(46vw,420px);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.45))}

/* Wejście strony */
.nav,.hero,.section,.footer{opacity:0;transition:opacity .8s ease .15s}
body.page-entered .nav, body.page-entered .hero, body.page-entered .section, body.page-entered .footer{opacity:1}
.headline,.lead,.cta-row{opacity:0;transform:translateY(12px) scale(.985);transition:opacity .7s ease, transform .7s ease}
body.page-entered .headline{opacity:1;transform:none;transition-delay:0s}
body.page-entered .lead{opacity:1;transform:none;transition-delay:.5s}
body.page-entered .cta-row{opacity:1;transform:none;transition-delay:.9s}

/* Kierunkowe wloty CTA */
.hero .btn--primary.reveal{opacity:0;transform:translateX(-40px);transition:opacity .55s ease, transform .55s ease}
.hero .btn--call.reveal{opacity:0;transform:translateX(40px); transition:opacity .55s ease, transform .55s ease}
.hero .btn--primary.reveal.in, .hero .btn--call.reveal.in{opacity:1;transform:none}

/* ========================= ABOUT ========================= */
.about-grid{display:grid;grid-template-areas:'portrait text''office office';grid-template-columns:1.05fr 1fr;gap:26px;align-items:start;margin-top:10px}
.about--portrait{grid-area:portrait}
.about-copy{grid-area:text;display:grid;gap:12px}
.about--office{grid-area:office}
.about-card{background:transparent;border:none;border-radius:var(--radius);overflow:hidden;box-shadow:none}
.about-card img{display:block;width:100%;height:auto}
.about--portrait img{ transform:scale(.92); transform-origin:center }


/* ========================= CARDS ========================= */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,#5a1c3a,#341322);border:1px solid #8c2e5c;border-radius:6px;padding:16px;box-shadow:0 20px 50px rgba(255,77,166,.18);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;position:relative;overflow:hidden;transform-style:preserve-3d;opacity:0}
/* Hover: jaśniejszy róż + lekkie powiększenie (kafelki Specjalizacje) */
@media (hover:hover){
  .cards .card:hover{
    transform: translateY(-4px) scale(1.03);
    filter: brightness(1.12) saturate(1.12);
    border-color: rgba(255,105,180,.95);
    box-shadow: 0 28px 80px rgba(255,77,166,.28);
  }
  .cards .card:hover::before{ opacity:.75; }
}

.card::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,77,166,.45),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.45;animation:edges 3.2s linear infinite}
@keyframes edges{from{background-position:-200% 0}to{background-position:200% 0}}
.card p,.card li{color:#ffe9f7}
.card h3{color:#fff; margin-bottom:8px; font-size:1.05rem}
.card ul{ margin-top:8px }
.card li{ margin:3px 0 }
@media (max-width:960px){.cards{grid-template-columns:1fr}}
.cards .card{transform:translateY(18px) scale(.98)}
.cards .card:nth-child(odd){transform:translateX(-36px) scale(.98)}
.cards .card:nth-child(even){transform:translateX(36px) scale(.98)}
.cards .card.in{opacity:1;transform:none}

/* ==================== SOCIAL + CONTACT ==================== */
.social-head{display:flex;align-items:center;gap:10px;margin:.2rem 0 1rem}
.fb-svg{width:52px;height:52px;filter:drop-shadow(0 0 14px rgba(24,119,242,.75))}
.news-contact{display:grid;grid-template-columns:1.2fr .9fr;gap:0px;align-items:start}

  min-height: 400px;
}

.fb-embed iframe{
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
  box-shadow: none;
  border-radius: 10px;
  height: clamp(700px, 70vh, 980px);
}

.social-link{ display:inline-block; position:relative; border-radius:var(--radius); border:1px solid var(--line-strong); background:#0a090b; box-shadow:0 8px 20px rgba(0,0,0,.35); padding:1px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease }
.social-img{ display:block; width:44px; height:44px; filter:drop-shadow(0 0 8px rgba(24,119,242,.5)); transition:filter .25s ease, transform .2s ease }
.social-link:hover{ transform:translateY(-2px); box-shadow:0 0 0 3px rgba(255,77,166,.3), 0 18px 44px rgba(255,77,166,.5) }
.social-link:hover .social-img{ filter: drop-shadow(0 0 12px rgba(255,77,166,.60)) drop-shadow(0 0 20px rgba(255,77,166,.35)) }
.social-link::before{ content:""; position:absolute; inset:-7px; border-radius:inherit; border:3px solid rgba(255,77,166,.35); opacity:0; transform:scale(.98); transition:opacity .25s ease, transform .25s ease }
.social-link:hover::before{ opacity:1; transform:scale(1); animation:pulseGlow 1.8s ease-in-out infinite }
.social-link::after{ content:""; position:absolute; top:-120%; left:-30%; width:60%; height:300%; transform:rotate(20deg); background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.30), rgba(255,255,255,0)); opacity:0; pointer-events:none }
.social-link:hover::after{ animation:shine 1.2s ease forwards; opacity:.9 }

/* =========================== MAP =========================== */
.map-section{padding:0;background:var(--bg-2)}
.map-outer{ position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw; background:var(--bg) }
.map-embed iframe{ display:block; width:100%; height:560px; border:0; box-shadow:none; border-radius:0 }
@media (max-width:1100px){ .map-embed iframe{ height:520px } }

/* ====================== FOOTER & MISC ====================== */
.footer{background:#0b0a0d;padding:32px 0}
.footer__grid{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center;text-align:center}
.copy{margin-top:8px;color:#b6a9bb;text-align:center}
.footer .cta-link{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:6px;border:1px solid var(--line-strong);text-decoration:none;color:var(--ink);position:relative;overflow:hidden;background:transparent}
.footer .cta-link::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;background:linear-gradient(90deg,var(--brand),var(--brand-2));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.footer .cta-link:hover::after{transform:scaleX(1)}
.footer .cta-link .ico{transition:transform .25s ease}
.footer .cta-link:hover .ico{transform:translateY(-2px)}
.footer .cta-link.phone{background:linear-gradient(180deg,#ff4da6,#d93c8b);border-color:#ff4da6;box-shadow:0 12px 28px rgba(255,77,166,.35);color:#fff}
.footer .cta-link.phone:hover{box-shadow:0 0 0 3px rgba(255,77,166,.3),0 18px 44px rgba(255,77,166,.5)}
.footer__hours ul{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap}
.footer__hours li{display:flex;gap:10px;align-items:center;color:var(--muted)}
.footer__hours li b{color:#fff}
/* footer contact duplicated inside menu drawer */
.menu__footer{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--line);
    display:grid;
    gap:10px;
}
.menu__footer .cta-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 14px;
    border-radius:999px;
    border:1px solid rgba(255,77,166,.5);
    color:var(--ink);
    position:relative;
    overflow:hidden;
    background:transparent;
    text-decoration:none;
    font-size:.96rem;
}
.menu__footer .cta-link::after{
    content:"";
    position:absolute;
    left:12px;
    right:12px;
    bottom:2px;
    height:2px;
    background:linear-gradient(90deg,var(--brand),var(--brand-2));
    transform:scaleX(0);
    transform-origin:left;
    transition:transform .35s ease;
}
.menu__footer .cta-link:hover::after{
    transform:scaleX(1);
}
.menu__footer .cta-link .ico{
    transition:transform .25s ease;
}
.menu__footer .cta-link:hover .ico{
    transform:translateY(-2px);
}
.menu__footer .cta-link.phone{
    background:linear-gradient(180deg,#ff4da6,#ff69b4);
    border-color:#ff4da6;
    box-shadow:0 10px 24px rgba(255,77,166,.35);
    color:#fff;
}
.menu__footer .cta-link.phone:hover{
    box-shadow:0 0 0 3px rgba(255,77,166,.3),0 16px 38px rgba(255,77,166,.5);
}
.menu__footer .footer__hours{
    font-size:.9rem;
}
.menu__footer .footer__hours ul{
    justify-content:flex-start;
}


/* ========================== REVEAL ========================= */
.reveal{opacity:0;transform:translateY(22px);filter:blur(2px);transition:opacity .7s ease,transform .7s ease,filter .7s ease}
.reveal.in{opacity:1;transform:none;filter:none}

/* ========================= RESPONSIVE ====================== */
@media (max-width:740px){
    .hero{ min-height:5vh; padding:5vh 0 5vh }
    .cta-row{ flex-wrap:wrap }
    .about-grid{ grid-template-areas:'portrait' 'text' 'office'; grid-template-columns:1fr }
    .cards{ grid-template-columns:1fr }
    .news-contact{ grid-template-columns:1fr }
    .map-embed iframe{ height:420px }
}
@media (max-width:740px){
    .fb-embed iframe{
        height: min(460px, 75vh) !important;
    }
}

/* BARDZO MAŁE EKRANY: jeszcze nieco mniejszy */
@media (max-width:480px){
    .fb-embed iframe{
        height: min(400px, 75vh) !important;
    }
}

/* Kotwice – żeby sticky nav nie zasłaniał nagłówków */
#hero, #o-mnie, #specjalizacje, #aktualnosci, #kontakt, #footer{ scroll-margin-top: var(--nav-h) }
@media (max-width:820px){
    #hero, #o-mnie, #specjalizacje, #aktualnosci, #kontakt, #footer{ scroll-margin-top: var(--nav-h-mobile) }
}


/* === FB iframe: mobile fix (responsive, no right margin) === */

.fb-embed iframe{
    display:block;
    width:100% !important;

    border:0;
    box-shadow:none;
    border-radius:10px;
}
@media (max-width: 740px){
    .fb-embed iframe{  }
}
@media (max-width: 480px){
    .fb-embed iframe{  }
}

/* Ensure the grid around FB has no unwanted side gap on mobile */
@media (max-width: 740px){
    .news-contact{ grid-template-columns:1fr; gap: 16px; }
    .container{ padding-left: 12px; padding-right: 12px; } /* tighter edge padding */
}


/* === FB iframe: mobile FIX (responsive + no right gap) === */

/* Ensure FB is not initially hidden/animated */
.fb-embed, .fb-embed *{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    border-radius:10px;
}
.fb-embed iframe{
    display:block;
    width:100% !important;
    height:860px;
    border:0;
    box-shadow:none;

}
/* Make the grid one-column on mobile to eliminate side margin */
@media (max-width: 740px){
    .news-contact{ grid-template-columns:1fr; gap:16px; }
    .container{ padding-left:12px; padding-right:12px; }
    .fb-embed iframe{ height:520px; }
}
@media (max-width: 480px){
    .fb-embed iframe{ height:460px; }
}



/* === SPLASH: animation + loader bar === */
.splash__logo--anim{
  animation: splashGrow 1.2s ease-in-out infinite alternate;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes splashGrow{
  from{ transform: scale(1); }
  to{ transform: scale(1.06); }
}
.splash .loader{
  width: 68%;
  max-width: 420px;
  height: 6px;
  background: rgba(255,255,255,.15);
  border-radius: 999px;
  margin: 18px auto 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}
.splash .loader__progress{
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  animation: loaderFill 1.4s ease-out forwards;
}
@keyframes loaderFill{
  0% { width: 0%; }
  15%{ width: 12%; }
  50% { width: 62%; }
  100%{ width: 100%; }
}

/* === ABOUT: full-bleed video with overlay text === */
.about-video.fullbleed{ margin-top: 26px; }
.about-video__wrap{ position: relative; width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.about-video__media{ width: 100%; height: 52vw; max-height: 620px; object-fit: cover; display: block; filter: brightness(.78) contrast(1.05); }
.about-video__overlay{ position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.about-video__text{ font-size: clamp(22px, 3vw, 40px); color: var(--ink); text-align: center; font-weight: 600; text-shadow: 0 2px 16px rgba(0,0,0,.55); padding: 0 16px; }

/* === SOCIAL: TikTok column next to FB === */
.news-contact{ display: grid; grid-template-columns: 1.2fr .9fr; gap: 24px; align-items: start; }
.tiktok-col .tiktok-embed{ border-radius: 10px; overflow: hidden; }
@media (max-width: 980px){
  .news-contact{ grid-template-columns: 1fr; }
}


/* === ABOUT VIDEO: keep proportions, no crop === */
.about-video{ margin: 18px 0 26px; }
.about-video__wrap--contain{ position: relative; width: 100%; background:#000; border-radius: 10px; overflow: hidden; }
.about-video__media--contain{ width: 100%; height: auto; display: block; object-fit: contain; }
.about-video__overlay{ position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.about-video__text{ font-size: clamp(18px, 2.6vw, 34px); color: var(--ink); text-align: center; font-weight: 600; text-shadow: 0 2px 12px rgba(0,0,0,.55); padding: 0 16px; }


/* === ABOUT: Fullscreen video after text === */
.about-video--fullscreen{ margin: 0; padding: 0; }
.about-video__wrap--fullscreen{ position: relative; width: 100vw; height: 100vh; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; background:#000; }
.about-video__media--fullscreen{ width: 100%; height: 100%; object-fit: cover; display: block; }
.about-video__overlay{ position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.about-video__text{ font-size: clamp(22px, 4vw, 56px); color: var(--ink); text-align: center; font-weight: 700; text-shadow: 0 4px 28px rgba(0,0,0,.65); padding: 0 24px; transform: translateY(24px); opacity: .0; transition: transform .3s ease, opacity .3s ease; }
.about-video__text.in{ opacity: 1; transform: translateY(0); }
/* Scroll-driven refinement (updated on scroll via JS): */
.about-video__text--scroll{ will-change: transform, opacity; }

/* === SOCIAL LAYOUT: FB left, TikTok right on desktop === */
.news-contact{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items:start; }
.news-col{ order: 1; }
.tiktok-col{ order: 2; }
@media (max-width: 980px){
  .news-contact{ grid-template-columns: 1fr; }
  .news-col, .tiktok-col{ order: initial; }
}


/* === INLINE HERO (under O kancelarii) === */
.hero--inline{ min-height:92vh; padding:12vh 0 10vh; }
@media (max-width: 980px){
  .hero--inline{ min-height:76vh; padding:10vh 0 8vh; }
}


/* === INLINE HERO FULLBLEED SAFEGUARD === */
.hero--inline{ position:relative; width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; }


/* === O KANCELARII: typografia i układ === */
#o-mnie h2,
#o-mnie .section-title--center{ text-align:center; }

#o-mnie .about-copy p{
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
}

/* Mobile adjustments */
@media (max-width: 980px){
  #o-mnie h2{ text-align:center; }
  .about-grid{ grid-template-columns: 1fr !important; grid-template-areas: 'portrait' 'text'; gap: 18px; }
  .about--portrait img{ width:100% !important; height:auto !important; transform:none !important; }
  #o-mnie .about-copy p{ font-size: 18px; line-height: 1.7; }
}


/* === O KANCELARII: większe zdjęcie na desktopie === */
@media (min-width: 1024px){
  #o-mnie .about-grid{
    grid-template-columns: 1.6fr 1fr !important;
    gap: 34px;
    align-items: center;
  }
  #o-mnie .about--portrait img{
    transform: none !important;
  }
}
@media (min-width: 1400px){
  #o-mnie .about-grid{ grid-template-columns: 1.8fr 1fr !important; gap: 40px; }
}


/* === Tekst po wideo w 'O kancelarii' === */
#o-mnie .about-after-video{ margin: 26px auto 0; max-width: 960px; }
#o-mnie .about-after-video p{
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
}


/* === NEWS GRID: FB (left) + TikTok (right) aligned === */
.news-contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 24px;
  align-items:start;
}
.news-col, .tiktok-col{
  display:grid;
  grid-template-rows: auto 1fr; /* head + embed */
  gap: 12px;
}
.fb-embed, .tt-embed{ width:100%; }
.fb-embed iframe{ width:100% !important; height: 960px !important; }

/* NIE wymuszamy wysokiego kontenera na TikToka */
.tt-embed{ min-height: 0; }
.tiktok-embed{ max-width: 100% !important; }

/* Stack on mobile: TikTok below FB */
@media (max-width: 980px){
  .news-contact{ grid-template-columns: 1fr; }
  .news-col{ order: 1; }
  .tiktok-col{ order: 2; }
  .fb-embed iframe{ height: 680px !important; }

  /* na mobile też bez wymuszonej wysokości */
  .tt-embed{ min-height: 0; }
}


/* === Center section headings: Specjalizacje & Aktualności === */
#specjalizacje h2{ text-align:center; }
#aktualnosci h2{ text-align:center; }


/* === ABOUT: reveal in from sides === */
#o-mnie .about--portrait.reveal{ opacity:0; transform: translateX(-60px); transition: opacity .6s ease, transform .6s ease; }
#o-mnie .about-copy.reveal{ opacity:0; transform: translateX(60px); transition: opacity .6s ease, transform .6s ease; }
#o-mnie .about--portrait.reveal.in, #o-mnie .about-copy.reveal.in{ opacity:1; transform:none; }

/* === ABOUT HERO INLINE: fade-in of overlay headline === */
@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
#o-hero .hero__copy .headline{ opacity:0; transform: translateY(18px); }
#o-hero.inview .hero__copy .headline{ animation: fadeUpIn .65s ease forwards; }


/* === O KANCELARII: drugi rząd (foto + tekst) === */
#o-mnie .about-grid--row2{ margin-top: 34px; }


/* === O KANCELARII: vertical layout + full-width media + directional scroll reveal === */
#o-mnie h2,
#o-mnie .section-title--center{
  text-align:center;
}

#o-mnie .okanc-block{
  margin-top: 40px;
}

#o-mnie .okanc-media{
  margin: 0 0 18px;
}

#o-mnie .okanc-media img,
#o-mnie .okanc-media video,
#o-mnie .okanc-video{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border-radius:6px;
}

#o-mnie .okanc-copy p{
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  margin: 0 0 1rem;
}

/* mobile: media do pełnej szerokości widoku, tekst z marginesami */
@media (max-width: 820px){
  #o-mnie .container{
    max-width:100%;
    padding-left:0;
    padding-right:0;
  }
  #o-mnie .okanc-copy{
    padding: 0 16px 24px 16px;
  }
  #o-mnie .okanc-copy p{
    font-size:16px;
  }
}

/* Scroll reveal tylko dla sekcji O kancelarii – wlot z lewej / prawej */
#o-mnie .okanc-media.reveal,
#o-mnie .okanc-copy.reveal{
  opacity:0;
  filter:none;
  transition: opacity .75s ease-out, transform .75s ease-out;
}

/* bloki z wlotem z LEWEJ */
#o-mnie .okanc-block--left .okanc-media.reveal,
#o-mnie .okanc-block--left .okanc-copy.reveal{
  transform: translateX(-70px);
}

/* blok z wlotem z PRAWEJ */
#o-mnie .okanc-block--right .okanc-media.reveal,
#o-mnie .okanc-block--right .okanc-copy.reveal{
  transform: translateX(70px);
}

/* po wejściu w viewport JS dodaje klasę .in */
#o-mnie .okanc-media.reveal.in,
#o-mnie .okanc-copy.reveal.in{
  opacity:1;
  transform:none;
}