:root{
      --bg:#061a3a;--bg-2:#0b2b63;
      --primary:#0a6bff;--primary-2:#2a82ff;
      --text:#0b1320;--muted:#667085;
      --ring:rgba(10,107,255,.35);
      --panel:#ffffff; --panel-b:#e8eef7;
      --shadow:0 14px 36px rgba(2,17,48,.08);
      --ico-bg:#eef4ff;

      /* patches */
      --navy-1:#0E2A58; --navy-2:#0B2550;
      --white-gap:42px; /* biała przerwa pod Dlaczego */
      --contact-gap:40px; /* gradient pod formularzami */
    }

    /* Reset + baza */
    *{box-sizing:border-box}
    html,body{height:auto;min-height:100%; padding-bottom:0; overflow-x:hidden;}
    body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;margin:0;color:var(--text);background:#fff;line-height:1.65}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    .container{max-width:1200px;margin:0 auto;padding:0 20px}

    /* Header */
    .header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid #e8eef7}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0; position:relative}
    .brand-wrap{display:flex;align-items:center;gap:14px;max-width:calc(100% - 120px);overflow:hidden}
    .brand img{height:46px}
    .ally{display:flex;align-items:center;gap:8px;padding:0;background:transparent;border:0}
    .ally img{height:36px}
    @media (max-width:820px){ .brand img{height:42px} .ally img{height:31px} }
    @media (max-width:640px){ .brand img{height:34px} .ally img{height:20px} }
    nav[aria-label="Główna nawigacja"]{display:flex;align-items:center;gap:18px}
    .cta{padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,#0057a3,#003e7e);color:#fff;font-weight:600;box-shadow:0 8px 22px rgba(0,56,112,.22)}
    #nav-toggle{display:none;border:0;background:var(--primary);color:#fff;padding:8px 12px;border-radius:10px;font-weight:700}
    @media (max-width:640px){
      #nav-toggle{display:inline-block}
      nav[aria-label="Główna nawigacja"]{display:none;flex-direction:column;gap:10px;background:#fff;padding:10px;border:1px solid #e8eef7;border-radius:12px;position:absolute;right:20px;top:58px;box-shadow:0 10px 24px rgba(2,17,48,.12)}
      nav.is-open{display:flex}
    }

    /* HERO */
    .hero{position:relative;isolation:isolate;min-height:92vh;display:grid;align-items:center;color:#fff;background:linear-gradient(180deg,#0a1a34,#0b2b63)}
    .hero .bg{position:absolute;inset:0;z-index:-2}
    .hero .bg img{width:100%;height:100%;object-fit:cover;object-position:46% 12%}
    .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 50% at 28% 34%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 44%),radial-gradient(60% 60% at 28% 34%, rgba(6,26,58,.18) 0%, rgba(6,26,58,.10) 48%, rgba(6,26,58,0) 74%),linear-gradient(180deg, rgba(6,26,58,.13), rgba(6,26,58,.13) 46%, rgba(6,26,58,.13) 92%)}
    .hero .container{max-width:none;width:100%;padding-left:clamp(96px,13.6vw,400px);padding-right:clamp(12px,5vw,72px);margin:0}
    .hero-in{display:grid;grid-template-columns:minmax(320px,760px) 1fr;gap:20px;padding:156px 0 96px;justify-items:start}
    .hero-in .copy{max-width:760px;margin:0;place-self:start;text-align:left}
    .eyebrow{display:inline-flex;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);font-size:12px}
    .hero h1{font-size:clamp(32px,5.2vw,60px);line-height:1.06;margin:14px 0 12px;font-weight:800;text-shadow:0 2px 22px rgba(0,0,0,.35);letter-spacing:-0.01em;text-align:left}
    .hero p.lead{font-size:clamp(16px,2.2vw,20px);opacity:.98;max-width:820px;margin:0 0 22px;text-align:left;filter: drop-shadow(0 1px 10px rgba(0,0,0,.28))}
    .hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:999px;border:1px solid rgba(0,62,126,.32);font-weight:800;font-size:16px;letter-spacing:.01em}
    .btn.primary{background:linear-gradient(135deg,#0057a3,#003e7e);color:#fff;box-shadow:0 10px 26px rgba(0,56,112,.22)}
    .btn.primary:hover{transform:translateY(-1px)}
    .btn.ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.42);color:#f6fbff}
    @media (max-width:1024px){ .hero-in{grid-template-columns:1fr;padding-top:168px} }

    /* Sections & cards */
    .section{padding:90px 0}
    .section h2{font-size:clamp(26px,4vw,38px);margin:0 0 10px}
    .section p.sub{color:var(--muted);margin:0}
    .grid{display:grid;gap:22px}
    .grid.cols-3{grid-template-columns:repeat(3,1fr)}

    .card{background:var(--panel);border:1px solid var(--panel-b);border-radius:18px;padding:26px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
    .card:hover{transform:translateY(-4px);box-shadow:0 16px 42px rgba(2,17,48,.1)}

    /* ICONS */
    .feature h3{display:flex;align-items:center;gap:12px;line-height:1.25}
    .ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#e6ecfa;color:#0a4f96;flex:0 0 44px;overflow:visible}
    .ico svg{display:block;width:26px;height:26px;color:inherit}

    /* CONTACT grid */
    .contact{background:linear-gradient(135deg,var(--bg), var(--bg-2));color:#e8f3ff}
    .contact-grid{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start}
    @media (max-width:1024px){ .contact-grid{grid-template-columns:1fr} }
    .form-card .head{margin:-26px -26px 16px;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);border-radius:18px 18px 0 0}
    .contact .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#eaf3ff}
    .contact label{display:block;margin:8px 0 6px;font-weight:600}
    .control{width:100%;padding:14px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);color:#fff;outline:none}
    .control::placeholder{color:#cfe2ff}
    .control:focus{box-shadow:0 0 0 4px var(--ring)}
    .select{appearance:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5z"/></svg>');background-repeat:no-repeat;background-position:right 12px center}
    .btn.submit{
      background:linear-gradient(135deg,#5ef0d5 0%,#22d9d7 52%,#3f7ed7 100%);
      border:none;
      color:#0b2b63;
      box-shadow:0 10px 26px rgba(20,141,178,.22);
    }

    /* Footer */
    .footer{background:#0b2b63;color:#d6e7ff;border-top:1px solid rgba(255,255,255,.06)}
    .footer .container{max-width:none;width:100%;padding-left:clamp(16px,6vw,24px);padding-right:clamp(16px,6vw,24px)}
    .footer .footer-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:8px 0}
    .footer a{color:#d6e7ff}
    .footer a:hover{color:#ffffff}

    /* Align brand & sections with hero left padding */
    .header .container,
    #oferta .container,
    #dlaczego .container{
      max-width:none;width:100%;padding-left:clamp(96px,13.6vw,400px);padding-right:clamp(12px,5vw,72px);margin:0
    }

    /* WHY / stats & steps */
    .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin:22px 0}
    .stats-grid .stat{display:flex;flex-direction:column;align-items:flex-start}
    .stats-grid .num{font-weight:800;font-size:clamp(24px,3.6vw,34px);line-height:1.1;color:#0a4f96}
    .stats-grid .desc{color:#667085}
    .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
    @media (max-width:1024px){
      .stats-grid{grid-template-columns:repeat(2,1fr)}
      .steps-grid{grid-template-columns:1fr}
    }
    .why .card{background:#fff;border:1px solid #e8eef7;border-radius:18px;padding:22px;box-shadow:0 10px 24px rgba(2,17,48,.06);position:relative;overflow:visible}
    .why .card::before{content:"";position:absolute;left:6px;right:6px;top:0;height:4px;background:linear-gradient(90deg,#18dce7 0%,#0ea4ed 48%,#1c6fe3 100%);border-radius:4px}

    /* FINAL SPEC PATCHES (white gaps etc.) */
    #oferta{position:relative;margin-bottom:0;padding-bottom:0;display:flow-root}
    #dlaczego{position:relative;margin-bottom:0;padding-bottom:var(--white-gap);display:flow-root}
    #dlaczego::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--white-gap);background:#ffffff;pointer-events:none;z-index:0}
    #dlaczego > *{position:relative;z-index:1}
    #kontakt,.section.contact{display:flow-root;background:linear-gradient(135deg,var(--navy-1),var(--navy-2));margin-bottom:0;padding-bottom:var(--contact-gap)}
    #kontakt .container > *:last-child,#kontakt .card:last-child{margin-bottom:0}

    /* Advisors (RIGHT column card) */
    .advisors-card .row{display:flex;gap:12px;align-items:center;margin-bottom:10px}
    .advisors-card img.avatar{width:64px;height:64px;border-radius:50%;object-fit:cover}
    .advisors-card .title{color:#cfe2ff;font-size:14px}
    .advisors-card .quote{margin-top:6px;color:#cfe2ff;font-size:12px}

    /* Mobile paddings */
    @media (max-width:900px){
      .header .container, .hero .container, #oferta .container, #dlaczego .container, .footer .container, .container{
        padding-left:clamp(16px,6vw,24px);padding-right:clamp(16px,6vw,24px)
      }
    }
  


/* === PATCH 0824: Kolory i typografia sekcji === */
#oferta h2, #dlaczego h2 { color: #0b2b63; }
#oferta p.sub, #dlaczego p.sub { color: #667085; }
#oferta .feature h3 { color: #0b2b63; }
#oferta .feature p { color: #667085; }
#dlaczego .stats-grid .num { color: #0b2b63; }
#dlaczego .stats-grid .desc { color: #667085; }
#dlaczego .step h3 { color: #0b2b63; }
#dlaczego .step p { color: #667085; }

/* Footer: mniejsza czcionka + marginesy L/R */
.footer .footer-in{ font-size:14px; }
@media (max-width:480px){ .footer .footer-in{ font-size:13px; } }
.footer .container{ max-width:1200px; margin:0 auto; padding: 0 20px; }

/* Avatary: równanie i delikatne opuszczenie */
.advisors-card .row{ align-items:flex-start; }
.advisors-card img.avatar{ margin-top:3px; }
.advisors-card b{ display:block; line-height:1.2; }



/* === PATCH 0824b === */

/* 1) Przywrócenie koloru nagłówka "Skontaktuj się z nami" (jasny) */
.form-card .head h2 { color: #eaf3ff; }

/* 2) Pasek na górze zawsze widoczny (fixed) + padding na body pod nagłówek */
.header{ position: fixed !important; top:0; left:0; right:0; width:100%; }
body{ padding-top: 76px; } /* kompensacja wysokości headera */

/* 3) Footer dwa razy grubszy + 80% mniejsze marginesy LR */
.footer .footer-in{ padding: 20px 0; } /* było ~8px */
.footer .container{ padding-left: 4px; padding-right: 4px; } /* 80% mniej niż 20px */

/* 4) Mobile: 3 prostokąty w pionie w sekcji 'Nasze specjalizacje' */
@media (max-width: 900px){
  #oferta .grid.cols-3{ grid-template-columns: 1fr; }
}



/* === PATCH 0824c (kolejna tura) === */
/* 1) H2 w formularzu: jasny na granacie */
#kontakt .form-card .head h2 { color:#eaf3ff !important; }
#kontakt .form-card .head .sub { color:#cfe2ff !important; }

/* 3) Stopka: minimalne marginesy od krawędzi oraz zachowana większa wysokość */
.footer .footer-in{ padding:20px 0 !important; }
.footer .container{ max-width:none !important; width:100% !important; padding-left:2px !important; padding-right:2px !important; }

/* 5) Select: kontrast na desktopie (ciemne tło + jasna czcionka), a lista opcji białe tło + ciemny tekst */
.select{ background-color:#0b2b63 !important; color:#ffffff !important; }
.select:focus{ background-color:#0a2552 !important; }
.select option{ background:#0b2b63; color:#ffffff; }



/* === PATCH 0824d === */
/* 2) Stopka: minimalne marginesy ~0.5cm (~18–19px) */
.footer .container{ padding-left:18px !important; padding-right:18px !important; }

/* 5) Select (główne pole) jak inne kontrolki formularza; lista opcji zostaje biała z granatowym tekstem */
#kontakt .control.select{ background:rgba(255,255,255,.06) !important; color:#ffffff !important; border:1px solid rgba(255,255,255,.25) !important; }
#kontakt .control.select:focus{ box-shadow:0 0 0 4px var(--ring); }
.select option{ background:#0b2b63; color:#ffffff; }

/* 6) Mobile: przycisk menu jak "Umów bezpłatną konsultację" */
@media (max-width:640px){
  #nav-toggle{ display:inline-block; background:linear-gradient(135deg,#0057a3,#003e7e) !important; color:#fff !important; border-radius:999px; padding:12px 18px; box-shadow:0 10px 26px rgba(0,56,112,.22); font-weight:800; border:1px solid rgba(0,62,126,.32); }
}

/* 7) Mobile: logotypy skalują się również w pionie + odrobinę większe */
@media (max-width:640px){
  .brand img{ height:auto !important; width:auto; max-height:38px; }
  .ally img{ height:auto !important; width:auto; max-height:24px; }
}



  @media (min-width: 1025px){
    header .ally{ margin-left: 1.5cm; }
  }



  /* Allianz logo: always 1px lower (desktop + mobile) */
  .ally img { position: relative; top: 1px; }



  /* Allianz +10% tylko na mobile */
  /* 641–820 px: bazowo było 31px -> *1.10 */
  @media (max-width: 820px) and (min-width: 641px){
    .ally img{ height: calc(31px * 1.20) !important; }
  }
  /* ≤640 px: bazowo było max-height:24px -> *1.10 */
  @media (max-width: 640px){
    .ally img{ max-height: calc(24px * 1.20) !important; height: auto !important; width: auto !important; }
  }



  /* −15% tylko dla nagłówka i akapitu w HERO */
  .hero .copy h1{
    font-size: clamp(27px, 4.42vw, 51px);
  }
  .hero p.lead{
    font-size: clamp(14px, 1.87vw, 17px);
  }



  /* HERO: zawsze widać LEWĄ i GÓRNĄ krawędź obrazu; obraz pokrywa całość (bez białych pasów) */
  .hero .bg img{
    object-position: 0% 0% !important; /* lewy-górny róg */
    object-fit: cover !important;      /* zawsze pokryj kontener */
    width: 100% !important;
    height: 100% !important;
  }



  /* DESKTOP (>=1025px): zmniejsz logo Zdrowej.pl o 15% */
  @media (min-width: 1025px){
    .brand img{ transform: scale(0.85); transform-origin: left center; }
  }



  /* MOBILE (<=640px): obniż logo Zdrowej.pl o 1px */
  @media (max-width: 640px){
    .brand img{ position: relative; top: 1px; }
  }



  .form-success{
    background:linear-gradient(135deg,#5ef0d5 0%,#22d9d7 52%,#3f7ed7 100%);
    color:#0b2b63;
    border:1px solid rgba(255,255,255,0.28);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:72px;
    text-align:center;
    padding:18px;
    border-radius:14px;
    box-shadow:0 12px 28px rgba(2,17,48,.12);
    font-weight:600;
    margin:12px 0;
  }
  .form-error{
    margin:12px 0 0;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.38);
    border-radius:12px;
    background:rgba(111,18,42,.42);
    color:#fff;
    text-align:center;
    font-weight:600;
  }
  .btn.submit:disabled{
    cursor:wait;
    opacity:.72;
  }



  @media (max-width: 640px){
    .brand, .brand a{ overflow: visible !important; }
    .brand{ padding-bottom: 1px; }
    .brand img{ display: block; }
  }



/* Navy titles + grey descriptions inside cookie modal; keep button colors */
.ck-head strong { color:#0b2b63 !important; }           /* "Ustawienia cookies" */
.ck-body h4 { color:#0b2b63 !important; }               /* "Niezbędne / Analityczne / Marketingowe" */
.ck-body .desc, .ck-body p, .ck-body label { color:#667085 !important; }  /* Opisy */
.ck-actions #ck-cancel.ck-btn { color:#0b2b63 !important; }   /* "Anuluj" */
  .ck-actions #ck-accept.ck-btn { color:#0b2b63 !important; }




@media (max-width:640px){
  #main-nav{ z-index: 1001; }
}




  /* Cienki pasek gradientu tuż pod nagłówkiem (jak nad prostokątami) */
  .header-gradient{
    height:4px;
    background:linear-gradient(90deg,#18dce7 0%,#0ea4ed 48%,#1c6fe3 100%);
  }



  /* Desktop: linki w nagłówku (Oferta, Dlaczego my) granatowe */
  @media (min-width:641px){
    #main-nav a:not(.cta){ color:#0b2b63 !important; }
  }



  /* Logo opiece.pl: +15% względem dotychczasowego rozmiaru. */
  .brand img{
    height:calc(46px * 1.15) !important;
    width:auto !important;
  }

  /* Tablet */
  @media (max-width:820px){
    .brand img{ height:calc(42px * 1.15) !important; }
    body{ padding-top:82px; }
  }

  /* Telefon — wcześniejszy limit wynosił 38px. */
  @media (max-width:640px){
    .brand img{
      height:auto !important;
      max-height:calc(38px * 1.15) !important;
    }
    body{ padding-top:76px; }
  }

  @media (min-width:821px){
    body{ padding-top:83px; }
  }



  /* Nagłówek pozostaje całkowicie biały podczas przewijania. */
  .header{
    background:#ffffff !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    border-bottom:0 !important;
  }

  /* Gradient jest ostatnim widocznym elementem nagłówka i przykrywa szczelinę 1px. */
  .header-gradient{
    margin:0 !important;
    border:0 !important;
    transform:translateY(1px);
  }



  /* Stałe osadzenie od lewej; przy braku miejsca przycinana jest wyłącznie prawa strona. */
  .brand{
    display:block;
    flex:0 1 auto;
    min-width:0;
    overflow:hidden !important;
  }

  /* Zachowanie naturalnych proporcji logo — bez rozciągania w pionie lub poziomie. */
  .brand img{
    display:block;
    width:auto !important;
    max-width:none !important;
    object-fit:contain;
    object-position:left center;
  }



  /* Czyste zdjęcie hero — bez rozjaśniającej i przyciemniającej warstwy CSS. */
  .hero::after{
    content:none !important;
    display:none !important;
    background:none !important;
  }



  /* Stonowana paleta opiece.pl: błękit, turkus i łagodny granat. */
  .hero h1{
    color:#0b2b63 !important;
    text-shadow:none !important;
    filter:none !important;
  }

  .hero p.lead{
    color:#2b557f !important;
    text-shadow:none !important;
    filter:none !important;
  }

  /* Górna etykieta oraz przycisk „Zobacz ofertę”. */
  .hero .eyebrow,
  .hero .btn.ghost{
    color:#2f628e !important;
    border-color:#2f628e !important;
    text-shadow:none !important;
    filter:none !important;
  }

  /* Mocniejszy granatowy przycisk główny, jak w pierwotnej wersji. */
  .hero .btn.primary{
    background:linear-gradient(135deg,#0057a3,#003e7e) !important;
    border-color:rgba(0,62,126,.45) !important;
    box-shadow:0 10px 26px rgba(0,56,112,.22) !important;
  }

  /* Gradientowe wyróżnienie tekstu dopasowane do logo opiece.pl. */
  .hero-highlight{
    position:relative;
    z-index:0;
    display:inline-block;
    isolation:isolate;
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    background:linear-gradient(180deg,#65edf0 0%,#31e1ed 10%,#16ccef 24%,#0aade9 48%,#0d90df 72%,#1476d1 100%) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
    background-size:100% 100%;
    line-height:inherit;
    /* Zapas w dół obejmuje również descender małej litery „y”. */
    padding-bottom:.24em;
    margin-bottom:-.24em;
    vertical-align:baseline;
    overflow:visible;
    text-shadow:none !important;
  }

  /* Mobile: ten sam układ gradientu, delikatnie ciemniejszy dla lepszego kontrastu. */
  @media (max-width:640px), (orientation:portrait) and (max-width:1024px){
    .hero h1{
      font-size:clamp(41.6px,6.76vw,78px) !important;
    }
    .hero-highlight{
      background-image:linear-gradient(180deg,#5be7eb 0%,#2cdce9 10%,#11c5eb 24%,#08a4e5 48%,#0b86d9 72%,#116cc9 100%) !important;
      -webkit-background-clip:text !important;
      background-clip:text !important;
      -webkit-text-fill-color:transparent !important;
    }
  }




  /* Mobile: logo skaluje się proporcjonalnie; przy braku miejsca prawa krawędź jest ostatnia do przycięcia. */
  @media (max-width:640px){
    .brand-wrap{
      max-width:calc(100% - 76px) !important;
      min-width:0 !important;
      flex:1 1 auto !important;
      overflow:hidden !important;
      gap:8px;
    }
    .brand{
      min-width:0 !important;
      max-width:100% !important;
      flex:1 1 auto !important;
      overflow:visible !important;
    }
    .brand img{
      display:block !important;
      width:auto !important;
      height:auto !important;
      max-width:100% !important;
      max-height:calc(38px * 1.15) !important;
      object-fit:contain !important;
      object-position:left center !important;
    }
    .ally{
      flex:0 0 auto !important;
      min-width:0 !important;
      max-width:35% !important;
    }
    .ally img{
      width:auto !important;
      height:auto !important;
      max-width:100% !important;
      max-height:calc(24px * 1.20) !important;
      object-fit:contain !important;
    }
  }



  /* Na telefonie oba logotypy i Menu pozostają w jednym poziomym wierszu. */
  @media (max-width:640px){
    .nav{
      display:flex !important;
      flex-wrap:nowrap !important;
      align-items:center !important;
      gap:8px !important;
      width:100% !important;
      min-width:0 !important;
    }
    .brand-wrap{
      display:flex !important;
      flex:1 1 auto !important;
      width:auto !important;
      max-width:none !important;
      min-width:0 !important;
      flex-wrap:nowrap !important;
      align-items:center !important;
      justify-content:flex-start !important;
      gap:8px !important;
      overflow:hidden !important;
    }
    .brand{
      display:block !important;
      flex:1 1 auto !important;
      min-width:0 !important;
      max-width:100% !important;
      overflow:visible !important;
    }
    .brand img{
      display:block !important;
      width:auto !important;
      height:auto !important;
      max-width:100% !important;
      max-height:calc(38px * 1.15) !important;
      object-fit:contain !important;
      object-position:left center !important;
    }
    .ally{
      display:flex !important;
      flex:0 1 35% !important;
      width:auto !important;
      min-width:0 !important;
      max-width:35% !important;
      overflow:hidden !important;
      align-items:center !important;
    }
    .ally img{
      display:block !important;
      width:auto !important;
      height:auto !important;
      max-width:100% !important;
      max-height:calc(24px * 1.20) !important;
      object-fit:contain !important;
      object-position:left center !important;
    }
    #nav-toggle{
      display:inline-flex !important;
      flex:0 0 auto !important;
      align-items:center !important;
      margin:0 !important;
      white-space:nowrap !important;
    }
    #main-nav{ display:none !important; }
  }



  /* Wąski telefon: oba znaki są obok siebie, a Menu pozostaje na końcu wiersza. */
  @media (max-width:640px){
    .nav{
      justify-content:flex-start !important;
      flex-wrap:nowrap !important;
      gap:8px !important;
      min-width:0 !important;
    }
    .brand-wrap{
      flex:1 1 0 !important;
      width:0 !important;
      max-width:none !important;
      min-width:0 !important;
      flex-wrap:nowrap !important;
      overflow:hidden !important;
    }
    .brand{
      flex:1 1 0 !important;
      width:0 !important;
      min-width:0 !important;
      max-width:none !important;
      overflow:visible !important;
    }
    .brand img{
      width:auto !important;
      height:auto !important;
      max-width:100% !important;
      max-height:calc(38px * 1.15) !important;
      object-fit:contain !important;
      object-position:left center !important;
    }
    .ally{
      flex:0 1 34% !important;
      width:34% !important;
      max-width:34% !important;
      min-width:0 !important;
      overflow:hidden !important;
    }
    .ally img{
      width:auto !important;
      height:auto !important;
      max-width:100% !important;
      max-height:calc(24px * 1.20) !important;
      object-fit:contain !important;
      object-position:left center !important;
    }
    #nav-toggle{
      flex:0 0 auto !important;
      margin-left:0 !important;
      white-space:nowrap !important;
    }

    /* Hero: najpierw odcinany jest lewy skraj z twarzą lekarza; prawa część zostaje jako druga do przycięcia. */
    .hero .bg img{
      object-position:72% 0% !important;
    }
  }



  /* Ostateczny układ telefonu: logotypy w lewej kolumnie, Menu w prawej. */
  @media (max-width:640px){
    .nav{
      display:grid !important;
      grid-template-columns:minmax(0,1fr) auto !important;
      grid-template-rows:auto !important;
      align-items:center !important;
      justify-content:initial !important;
      column-gap:8px !important;
      width:100% !important;
      min-width:0 !important;
      flex-wrap:nowrap !important;
    }
    .brand-wrap{
      grid-column:1 !important;
      grid-row:1 !important;
      display:flex !important;
      flex-wrap:nowrap !important;
      align-items:center !important;
      width:100% !important;
      max-width:none !important;
      min-width:0 !important;
      gap:calc(6px + 0.5cm) !important;
      overflow:visible !important;
    }
    .brand{
      display:block !important;
      flex:1 1 auto !important;
      min-width:0 !important;
      max-width:calc(100% - clamp(45px,19vw,86px) - 6px) !important;
      overflow:visible !important;
    }
    .brand img{
      display:block !important;
      width:auto !important;
      height:auto !important;
      max-width:100% !important;
      max-height:calc(38px * 1.15) !important;
      object-fit:contain !important;
      object-position:left center !important;
    }
    .ally{
      display:flex !important;
      flex:0 0 clamp(45px,19vw,86px) !important;
      width:clamp(45px,19vw,86px) !important;
      max-width:none !important;
      min-width:0 !important;
      align-items:center !important;
      overflow:visible !important;
    }
    .ally img{
      display:block !important;
      width:100% !important;
      height:auto !important;
      max-width:100% !important;
      max-height:calc(24px * 1.20) !important;
      object-fit:contain !important;
      object-position:left center !important;
    }
    #nav-toggle{
      grid-column:2 !important;
      grid-row:1 !important;
      display:inline-flex !important;
      flex:none !important;
      min-width:0 !important;
      margin:0 !important;
      white-space:nowrap !important;
    }
    #main-nav{ display:none !important; }

    /* Przy pierwszym zwężeniu ukrywamy lewy fragment zdjęcia (lekarza). */
    .hero .bg img{ object-position:100% 0% !important; }
  }
  /* Przy dalszym zwężaniu wraca niewielkie cięcie także z prawej strony. */
  @media (max-width:380px){
    .hero .bg img{ object-position:82% 0% !important; }
  }
  @media (max-width:330px){
    .hero .bg img{ object-position:74% 0% !important; }
  }



  /* Mobile: opiece.pl i Allianz Partners tworzą jedną grupę i zmniejszają się proporcjonalnie. */
  @media (max-width:640px){
    .nav{
      display:grid !important;
      grid-template-columns:minmax(0,1fr) auto !important;
      grid-template-rows:auto !important;
      align-items:center !important;
      column-gap:8px !important;
      width:100% !important;
      min-width:0 !important;
    }
    .brand-wrap{
      grid-column:1 !important;
      grid-row:1 !important;
      display:flex !important;
      flex:0 1 auto !important;
      flex-wrap:nowrap !important;
      align-items:center !important;
      width:100% !important;
      max-width:none !important;
      min-width:0 !important;
      gap:6px !important;
      overflow:visible !important;
    }
    /* Bazowe szerokości odpowiadają proporcjom desktopowym; flex-shrink=1 skaluje oba tak samo. */
    .brand{
      display:block !important;
      flex:0 1 198px !important;
      width:auto !important;
      min-width:0 !important;
      max-width:none !important;
      overflow:visible !important;
    }
    .ally{
      display:flex !important;
      flex:0 1 270px !important;
      width:auto !important;
      min-width:0 !important;
      max-width:none !important;
      align-items:center !important;
      overflow:visible !important;
    }
    .brand img,
    .ally img{
      display:block !important;
      width:100% !important;
      height:auto !important;
      max-width:none !important;
      max-height:none !important;
      object-fit:contain !important;
      object-position:left center !important;
    }
    #nav-toggle{
      grid-column:2 !important;
      grid-row:1 !important;
      display:inline-flex !important;
      flex:none !important;
      min-width:0 !important;
      margin:0 !important;
      padding:10px 11px !important;
      font-size:13px !important;
      white-space:nowrap !important;
    }
    #main-nav{display:none !important;}
  }

  /* Gdy hero staje się węższy: około 15% obrazu zostaje odcięte z lewej,
     a dalsze zmniejszanie kadru zabiera już głównie prawą stronę. */
  @media (max-width:1024px){
    .hero .bg img{
      object-fit:cover !important;
      object-position:22% 0% !important;
    }
  }



  /* Zachowaj dotychczasowy odstęp i dodaj 0,5 cm między logotypami. */
  .brand-wrap{gap:calc(14px + 0.5cm) !important;}

  /* Tablet i telefon: wspólne kurczenie bez stałej wysokości Allianz Partners. */
  @media (max-width:1024px){
    .nav{
      flex-wrap:nowrap !important;
      align-items:center !important;
      min-width:0 !important;
    }
    .brand-wrap{
      display:flex !important;
      flex:0 1 auto !important;
      flex-wrap:nowrap !important;
      align-items:center !important;
      gap:calc(6px + 0.5cm) !important;
      min-width:0 !important;
      overflow:visible !important;
    }
    .brand{
      display:block !important;
      flex:0 1 198px !important;
      width:auto !important;
      min-width:0 !important;
      max-width:none !important;
      overflow:visible !important;
    }
    .ally{
      display:flex !important;
      flex:0 1 270px !important;
      width:auto !important;
      min-width:0 !important;
      max-width:none !important;
      align-items:center !important;
      overflow:visible !important;
    }
    .brand img,
    .ally img{
      display:block !important;
      width:100% !important;
      height:auto !important;
      max-width:100% !important;
      max-height:none !important;
      object-fit:contain !important;
      object-position:left center !important;
    }
  }

  /* Przy telefonie pierwsza kolumna zawiera oba logotypy, druga wyłącznie Menu. */
  @media (max-width:640px){
    .nav{
      display:grid !important;
      grid-template-columns:minmax(0,1fr) auto !important;
      grid-template-rows:auto !important;
      column-gap:10px !important;
      width:100% !important;
    }
    .brand-wrap{
      grid-column:1 !important;
      grid-row:1 !important;
      width:100% !important;
      max-width:none !important;
    }
    #nav-toggle{
      grid-column:2 !important;
      grid-row:1 !important;
      flex:0 0 auto !important;
      margin:0 !important;
    }
    #main-nav{display:none !important;}
  }



  /* Tablet i mobile: wysokość nagłówka wynika z faktycznego rozmiaru skalowanych logotypów. */
  @media (max-width:1024px){
    body{padding-top:0 !important;}
    .header{
      position:sticky !important;
      top:0 !important;
      left:0 !important;
      right:0 !important;
      width:100% !important;
      margin:0 !important;
      padding:0 !important;
      border-bottom:0 !important;
      overflow:visible !important;
    }
    .header-gradient{
      position:absolute !important;
      left:0 !important;
      right:0 !important;
      bottom:-1px !important;
      width:100% !important;
      height:4px !important;
      margin:0 !important;
      border:0 !important;
      transform:none !important;
      display:block !important;
      z-index:5 !important;
      pointer-events:none !important;
    }
  }



  /* Zdjęcie pozostaje natychmiastowym tłem i bezpiecznym fallbackiem dla filmu. */
  .hero .bg picture,
  .hero .bg .hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .hero .bg picture{z-index:0;}
  .hero .bg picture img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  .hero .bg .hero-video{
    z-index:1;
    display:block;
    object-fit:cover !important;
    object-position:0% 0%;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:transparent;
    transition:opacity .75s ease;
    will-change:opacity;
  }
  .hero .bg .hero-video.is-ready{
    opacity:1;
    visibility:visible;
  }
  @media (prefers-reduced-motion:reduce){
    .hero .bg .hero-video{display:none !important;}
  }



  /* Gdy ładowany jest pionowy film 9:16, treść zaczyna się 2,5 cm pod panelem z logotypami. */
  @media (max-width:640px), (orientation:portrait) and (max-width:1024px){
    .hero{
      align-items:start !important;
    }
    .hero .hero-in{
      padding-top:2.5cm !important;
      padding-bottom:48px !important;
    }
    .hero .hero-in .copy{
      place-self:start !important;
      align-self:start !important;
      position:relative !important;
      isolation:isolate;
    }
    .hero .hero-in .copy::before{
      content:"";
      position:absolute;
      z-index:0;
      pointer-events:none;
      left:-18px;
      right:-10px;
      top:-16px;
      bottom:-18px;
      border-radius:42px;
      background:radial-gradient(ellipse 108% 78% at 34% 34%,rgba(255,255,255,.22) 0%,rgba(255,255,255,.14) 46%,rgba(255,255,255,.06) 68%,rgba(255,255,255,.018) 83%,rgba(255,255,255,0) 100%);
      filter:blur(20px);
    }
    .hero .hero-in .copy > *{
      position:relative;
      z-index:1;
    }
  }



  @media (min-width:1025px){
    /* Wyłącznie przesunięcie treści hero o 2 cm w prawo — bez zmiany kadrowania i logiki filmu. */
    .hero .container{
      padding-left:calc(clamp(96px,13.6vw,400px) + 2cm) !important;
    }

    /* Granat kontaktu sięga o 1 cm wyżej i zasłania biały pasek, bez ruszania formularza. */
    #kontakt{
      position:relative;
      z-index:2;
    }
    #kontakt::before{
      content:"";
      position:absolute;
      left:0;
      right:0;
      top:-1cm;
      height:1cm;
      background:linear-gradient(135deg,var(--navy-1),var(--navy-2));
      pointer-events:none;
    }
  }