/*
Theme Name:   Divi Child — Data for Road Safety
Theme URI:    https://www.dataforroadsafety.eu
Description:  System stylów Layout A · Institutional Clarity na motywie Divi.
Author:       bigus.studio
Author URI:   https://bigus.studio
Template:     Divi
Version:      3.9.4
License:      GPL-2.0-or-later
Text Domain:  divi-child-dfrs
*/

:root{--bs-navy:#12275A;--bs-navy-900:#0B1838;--bs-blue:#0091D5;--bs-blue-ink:#0072A8;--bs-blue-lite:#25A6E4;--bs-tint:#E8F3FB;--bs-yellow:#F2E600;--bs-ink:#232A3D;--bs-grey:#616B84;--bs-line:#DDE3EC;--bs-off:#E9EFF7;--bs-gap-bg:#FFFBCC;--bs-f:'Montserrat','Avenir Next','Segoe UI',system-ui,sans-serif;--bs-pad:clamp(24px,6vw,104px);--bs-ease:cubic-bezier(.22,.61,.36,1);--bs-r-lg:10px;--bs-r:6px;--bs-r-sm:4px;--bs-on-navy:#E2EAF8;--bs-on-navy-2:#CBD7EC;--bs-on-navy-dim:#9FB2D2;--bs-r-xs:2px;--bs-studio:#ED3E0F;--bs-t-fast:.2s;--bs-t:.3s;--bs-t-slow:.45s;--fs-micro:11px;--fs-meta:13px;--fs-label:16px;--fs-sub:15px;--fs-body:17px;--fs-title:21px;--bs-av:clamp(92px,8.5vw,124px);}
.bs-hero .et_pb_row,.bs-sec .et_pb_row,.bs-sec-stats .et_pb_row{width:100%;max-width:100%;padding-left:0;padding-right:0}
.et_pb_section.bs-hero,.et_pb_section.bs-sec,.et_pb_section.bs-sec-stats{padding:0}
.et_pb_section.bs-sec:not(.bs-tinted):not(.bs-quotes),.et_pb_section.bs-sec-stats{background-color:#fff}

/* ═══ HERO — strona główna ═══ */
.et_pb_section.bs-hero{position:relative;overflow:hidden;isolation:isolate;background-color:var(--bs-navy)!important}
.bs-hero::before{content:"";position:absolute;inset:0;z-index:0;background-image:url('/wp-content/uploads/dfrs/hero/hero-B.webp');background-size:cover;background-position:50% 55%;transform:scale(1.08);will-change:transform;animation:bsKen 46s cubic-bezier(.45,0,.55,1) infinite}
@keyframes bsKen{
  0%{transform:scale(1.08) translate3d(0,0,0)}
  50%{transform:scale(1.20) translate3d(-2.4%,-1.6%,0)}
  100%{transform:scale(1.08) translate3d(0,0,0)}
}
.bs-hero::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(11,24,56,.97) 0%,rgba(18,39,90,.94) 45%,rgba(18,39,90,.90) 66%,rgba(18,39,90,.70) 83%,rgba(11,24,56,.52) 100%)}
.bs-hero>.et_pb_row{position:relative;z-index:2}
.bs-hero-row{padding:clamp(56px,7vw,100px) var(--bs-pad) clamp(52px,6.5vw,88px)!important;align-items:center}
.bs-hero-copy{padding:0!important}
.bs-hero .et_pb_text,.bs-hero .et_pb_button_module_wrapper{margin-bottom:0!important}
.bs-eyebrow p{font-size:var(--fs-meta);letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--bs-blue-lite);margin:0 0 24px;line-height:1.4}
.bs-h1 h1{font-size:clamp(34px,5vw,64px);font-weight:400;line-height:1.16;letter-spacing:-.02em;max-width:22ch;color:#fff;padding:0}
.bs-h1 h1 b{font-weight:700;display:block}
.bs-rule{padding:0!important;margin:32px 0 28px!important}
.bs-rule .et_pb_divider_internal{border-radius:var(--bs-r-xs)}
.bs-lead p{max-width:80ch;font-size:clamp(16px,1.3vw,19px);color:var(--bs-on-navy-2);line-height:1.75;font-weight:500;margin:0}

/* ═══ NAGŁÓWEK — logo i odstępy menu ═══
   Logo na sztywnej wysokości zamiast max-height:75% od Divi — nagłówek
   przestaje rosnąć razem z grafiką i schodzi ze 151px do ~110px.

   O przycisku CTA: link w menu jest elementem liniowym, więc nad tekstem
   doliczana jest połowa interlinii rodzica. Padding bywa symetryczny,
   a mimo to nad napisem zostaje więcej miejsca niż pod. Stąd line-height:0
   na pozycji, inline-block na linku i line-height:1 na tekście.          */
#logo{height:70px;width:auto;max-height:none}
#et-top-navigation{padding-top:27px!important;padding-bottom:23px!important}
#top-menu>li{padding-bottom:10px!important;margin-bottom:0!important}
#top-menu>li:not(.add_cta)>a{padding-bottom:0!important}
#top-menu li.add_cta{padding:0!important;line-height:0!important;margin-bottom:0!important}
#top-menu li.add_cta>a{display:inline-block!important;padding:12px 18px!important;line-height:1!important}

/* ═══ MENU MOBILNE — pełna szerokość ═══
   Divi pozycjonuje .et_mobile_menu absolutnie względem #et_mobile_nav_menu,
   czyli wąskiego przycisku hamburgera przy prawej krawędzi. Stąd lista jest
   węższa od ekranu. Zamiast liczyć 100vw z ujemnym marginesem (co łatwo
   rozjeżdża się przy pasku przewijania), zdejmujemy kontekst pozycjonowania
   z przycisku — wtedy menu odnosi się do całego #main-header.            */
.bs-drivers{display:grid!important;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px);align-items:start}.bs-drivers::after,.bs-drivers::before{display:none!important}.bs-driver.et_pb_blurb{margin-bottom:0!important;background:#fff;border:1px solid var(--bs-line);border-left:3px solid var(--bs-blue);border-radius:var(--bs-r-lg);padding:22px 24px;position:relative;isolation:isolate;overflow:hidden;transition:border-color var(--bs-t) var(--bs-ease),transform var(--bs-t) var(--bs-ease),box-shadow var(--bs-t) var(--bs-ease)}.bs-driver:hover{border-color:var(--bs-blue);transform:translateY(-3px);box-shadow:0 16px 32px -24px rgba(18,39,90,.5)}.bs-driver .et_pb_blurb_content{max-width:none}.bs-driver .et_pb_module_header{font-size:var(--fs-title);font-weight:700;color:var(--bs-navy);line-height:1.35;padding:0;margin-bottom:9px}.bs-driver .et_pb_blurb_description p{font-size:var(--fs-body);color:var(--bs-grey);line-height:1.65;margin:0}.bs-tinted .bs-driver{background:#fff}.bs-card .bs-card-sub{font-size:var(--fs-meta);font-weight:700;color:var(--bs-blue-ink);letter-spacing:.02em;line-height:1.4;margin:0 0 10px}/* ═══ OŚ CZASU — wariant pionowy z wypełnianiem przy scrollu ═══
   UWAGA: lista jest <ol>, więc list-style:none jest konieczne — bez tego
   Divi pokazuje numerację 1. 2. 3. obok lat, co dubluje informację.
   Wypełnienie toru liczy JS przez zmienną --fill; bez JS tor zostaje
   przygaszony, a karty i tak są widoczne.                              */
.bs-timewrap{margin-bottom:0!important}
.bs-timeline{list-style:none!important;margin:0;padding:0;position:relative}
.bs-timeline li{list-style:none!important}
.bs-timeline::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;width:2px;background:rgba(255,255,255,.14)}
.bs-timeline::after{content:"";position:absolute;left:19px;top:14px;width:2px;height:var(--fill,0%);background:linear-gradient(180deg,var(--bs-yellow),rgba(242,230,0,.45));transition:height .9s var(--bs-ease)}
.bs-timeline li{position:relative;padding:0 0 0 62px;margin:0 0 4px}
.bs-timeline li:last-child{margin-bottom:0}
.bs-timeline li::before{content:"";position:absolute;left:12px;top:12px;width:16px;height:16px;border-radius:50%;background:var(--bs-navy);border:2px solid rgba(255,255,255,.28);z-index:2;transition:border-color var(--bs-t-slow) var(--bs-ease),background var(--bs-t-slow) var(--bs-ease),transform var(--bs-t-slow) var(--bs-ease),box-shadow var(--bs-t-slow) var(--bs-ease)}
.bs-timeline li.is-in::before{background:var(--bs-yellow);border-color:var(--bs-yellow);transform:scale(1.15);box-shadow:0 0 0 6px rgba(242,230,0,.14)}
.bs-timeline .card{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-left:3px solid rgba(255,255,255,.14);border-radius:var(--bs-r-lg);padding:22px 26px 24px;opacity:0;transform:translateX(14px);transition:opacity var(--bs-t-slow) var(--bs-ease),transform var(--bs-t-slow) var(--bs-ease),background var(--bs-t) var(--bs-ease),border-color var(--bs-t) var(--bs-ease)}
.bs-timeline li.is-in .card{opacity:1;transform:none}
.bs-timeline li:hover .card{background:rgba(255,255,255,.075);border-left-color:var(--bs-yellow)}
.bs-timeline b{display:block;font-size:clamp(26px,2.8vw,36px);font-weight:800;color:#fff;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:12px}
.bs-timeline .card>span{display:block;font-size:var(--fs-body);color:var(--bs-on-navy-2);line-height:1.75;font-weight:500;max-width:none}
.bs-timeline li:nth-child(1) .card{transition-delay:0ms}
.bs-timeline li:nth-child(2) .card{transition-delay:90ms}
.bs-timeline li:nth-child(3) .card{transition-delay:180ms}
.bs-timeline li:nth-child(4) .card{transition-delay:270ms}
.bs-timeline li:nth-child(5) .card{transition-delay:360ms}
/* At a glance — cztery pozycje o bardzo roznej dlugosci: '30+' obok
   'One shared mission'. Bez wyrownania do gory i stalej wysokosci etykiety
   rzad wyglada na rozjechany. list-style:none musi miec !important —
   Divi dokladal kropki miedzy komorkami.                                  */
.bs-glancewrap{margin-bottom:0!important}
.bs-glance{list-style:none!important;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-r-lg);overflow:hidden}
.bs-glance li{list-style:none!important;margin:0;position:relative;padding:28px 24px 26px;display:flex;flex-direction:column;border-right:1px solid var(--bs-line);transition:background var(--bs-t) var(--bs-ease)}
.bs-glance li:last-child{border-right:0}
.bs-glance li:hover{background:var(--bs-tint)}
.bs-glance li::before{content:"";display:block;width:32px;height:4px;background:var(--bs-yellow);border-radius:var(--bs-r-xs);margin-bottom:18px;transition:width var(--bs-t) var(--bs-ease)}
.bs-glance li:hover::before{width:52px}
.bs-glance b{display:block;font-size:clamp(19px,1.9vw,24px);font-weight:800;color:var(--bs-navy);line-height:1.2;letter-spacing:-.02em;font-variant-numeric:tabular-nums;flex:1}
.bs-glance span{display:block;font-size:var(--fs-meta);letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--bs-grey);margin-top:14px;line-height:1.5}.bs-reasonwrap{margin-bottom:0!important}
.bs-reasonwrap-col{display:block!important}
/* Why join - ten sam jezyk co Key principles. Numer przeniesiony z prawego
   gornego rogu na lewy: w rogu czytal sie jak numer strony, nie jak element
   kompozycji. list-style:none musi miec !important, bo Divi stylizuje listy
   w modulach tekstowych, a jego arkusz laduje sie pozniej.                 */
.bs-reasons{display:grid!important;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px);counter-reset:reason;list-style:none!important;margin:0;padding:0!important;align-items:stretch}
.bs-reasons::after,.bs-reasons::before{display:none!important}
.bs-reasons li{list-style:none!important;counter-increment:reason;position:relative;background:#fff;border:1px solid var(--bs-line);border-left:3px solid var(--bs-blue);border-radius:var(--bs-r-lg);padding:30px 28px 32px;margin:0;overflow:hidden;isolation:isolate;transition:border-color var(--bs-t) var(--bs-ease),transform var(--bs-t) var(--bs-ease),box-shadow var(--bs-t) var(--bs-ease)}
.bs-reasons li::after{content:"";position:absolute;inset:0;background:var(--bs-tint);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform var(--bs-t) var(--bs-ease)}
.bs-reasons li:hover{border-color:var(--bs-blue);transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(18,39,90,.55)}
.bs-reasons li:hover::after{transform:scaleY(1)}
.bs-reasons li::before{content:"0" counter(reason);display:block;font-size:var(--fs-meta);font-weight:800;color:var(--bs-blue-ink);letter-spacing:.08em;margin-bottom:12px;position:static;top:auto;right:auto}
.bs-reasons .rule{display:block;width:40px;height:4px;background:var(--bs-yellow);border-radius:var(--bs-r-xs);margin-bottom:20px;transition:width var(--bs-t) var(--bs-ease)}
.bs-reasons li:hover .rule{width:64px}
.bs-reasons h3{font-size:var(--fs-title);font-weight:700;color:var(--bs-navy);line-height:1.3;letter-spacing:-.01em;margin:0 0 14px;padding:0}
.bs-reasons p{font-size:var(--fs-body);line-height:1.75;color:var(--bs-grey);font-weight:500;margin:0}
.bs-plead{font-size:var(--fs-body);font-weight:700;color:var(--bs-navy);margin:0 0 14px}/* Zasady udzialu celowo lzejsze niz karty powodow - to lista czterech krotkich
   stwierdzen, nie elementy rownorzedne. Pionowa zolta kreska zamiast kropki. */
.bs-principles{list-style:none!important;margin:0;padding:0!important;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.bs-principles li{list-style:none!important;position:relative;background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-r);padding:18px 22px 18px 56px;margin:0;font-size:var(--fs-body);font-weight:600;color:var(--bs-navy);line-height:1.5;display:flex;align-items:center;min-height:60px;transition:border-color var(--bs-t) var(--bs-ease),transform var(--bs-t) var(--bs-ease)}
.bs-principles li::before{content:"";position:absolute;left:22px;top:50%;transform:translateY(-50%);width:4px;height:20px;background:var(--bs-yellow);border-radius:var(--bs-r-xs);transition:height var(--bs-t) var(--bs-ease)}
.bs-principles li:hover{border-color:var(--bs-blue);transform:translateX(4px)}
.bs-principles li:hover::before{height:32px}/* bs-sd-expandable to znacznik semantyczny — pozycja z rozwijanym opisem.
   Styl bierze z .bs-sd; klasa istnieje po to, żeby dało się ją zaadresować,
   gdyby klient chciał rozwijanie także przy SD2-SD5. */
.bs-sds{margin-bottom:0!important}
.bs-sd-expandable{border-left:3px solid var(--bs-blue)}.bs-sdlist{display:grid;gap:10px}.bs-sd{border:1px solid var(--bs-line);border-radius:var(--bs-r-lg);background:#fff;overflow:hidden;transition:border-color var(--bs-t-fast) var(--bs-ease)}.bs-sd:hover{border-color:var(--bs-blue)}.bs-sd-head{display:flex;align-items:center;gap:16px;padding:16px 20px;text-decoration:none;min-height:44px}.bs-sd-head .badge{font-size:var(--fs-micro);font-weight:800;letter-spacing:.1em;color:#fff;background:var(--bs-navy);padding:5px 8px;flex:none;width:54px;text-align:center;border-radius:var(--bs-r-sm)}.bs-sd-head .name{flex:1;font-size:var(--fs-body);font-weight:600;color:var(--bs-navy);line-height:1.45}.bs-sd-head .meta{font-size:var(--fs-meta);color:var(--bs-grey);font-weight:600;flex:none}.bs-sd-body{border-top:1px solid var(--bs-line)}.bs-sd-body summary{cursor:pointer;padding:13px 20px;font-size:var(--fs-meta);font-weight:700;color:var(--bs-blue-ink);list-style:none;display:flex;align-items:center;gap:9px;min-height:44px}.bs-sd-body summary::-webkit-details-marker{display:none}.bs-sd-body summary::before{content:'\25B8';transition:transform var(--bs-t-fast) var(--bs-ease);display:inline-block;font-size:var(--fs-micro)}.bs-sd-body[open] summary::before{transform:rotate(90deg)}.bs-sd-body summary:hover{background:var(--bs-tint)}.bs-sd-body summary:focus-visible{outline:3px solid var(--bs-navy);outline-offset:-3px}.bs-sd-inner{padding:4px 20px 20px;display:grid;gap:8px}/* ═══ KEY PRINCIPLES ═══
   Zbudowane wyłącznie z gestów, które są już w systemie: żółta kreska 40x4
   z etykiet sekcji, akcent na lewej krawędzi z kafli driverów, tint wjeżdżający
   od dołu z chipów, podniesienie 5px z kafli Explore. Ikony są jedynym nowym
   elementem — dlatego celowo przygaszone do 55%.                            */
.bs-kpwrap{margin-bottom:0!important}
.bs-kp{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);counter-reset:kp;align-items:stretch;margin:0;padding:0!important;list-style:none!important}
.bs-kp li{list-style:none!important;counter-increment:kp;position:relative;background:#fff;border:1px solid var(--bs-line);border-left:3px solid var(--bs-blue);border-radius:var(--bs-r-lg);padding:30px 28px 32px;margin:0;list-style:none;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;transition:border-color var(--bs-t) var(--bs-ease),transform var(--bs-t) var(--bs-ease),box-shadow var(--bs-t) var(--bs-ease)}
.bs-kp li::after{content:"";position:absolute;inset:0;background:var(--bs-tint);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform var(--bs-t) var(--bs-ease)}
.bs-kp li:hover{border-color:var(--bs-blue);transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(18,39,90,.55)}
.bs-kp li:hover::after{transform:scaleY(1)}
.bs-kp li::before{content:"0" counter(kp);display:block;font-size:var(--fs-meta);font-weight:800;color:var(--bs-blue-ink);letter-spacing:.08em;margin-bottom:12px}
.bs-kp .rule{width:40px;height:4px;background:var(--bs-yellow);border-radius:var(--bs-r-xs);margin-bottom:20px;transition:width var(--bs-t) var(--bs-ease)}
.bs-kp li:hover .rule{width:64px}
.bs-kp h3{font-size:var(--fs-title);font-weight:700;color:var(--bs-navy);line-height:1.3;letter-spacing:-.01em;margin:0 0 14px;padding:0}
.bs-kp p{font-size:var(--fs-body);line-height:1.75;color:var(--bs-grey);font-weight:500;margin:0}
.bs-kp .ico{position:absolute;right:24px;top:26px;width:26px;height:26px;stroke:var(--bs-blue);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.55;transition:opacity var(--bs-t) var(--bs-ease),transform var(--bs-t) var(--bs-ease)}
.bs-kp li:hover .ico{opacity:1;transform:translateY(-2px)}
.bs-callout b{display:block;font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;color:var(--bs-blue-ink);font-weight:800;margin-bottom:10px}
/* Pasek kotwic chowal sie pod przyklejonym naglowkiem Divi (z-index 99999).
   Przesuniecie tylko powyzej 980px — ponizej Divi wylacza fixed header,
   wiec przesuniecie zostawiloby pusta luke.
   --bs-header ustawia dfrs.js z realnej wysokosci naglowka; 111px to wartosc
   zapasowa, gdyby skrypt nie wystartowal.                                  */
@media (min-width:981px){
  .et_pb_section.bs-anchors{top:var(--bs-header,111px)}
}
[id]{scroll-margin-top:calc(var(--bs-header,111px) + 68px)}
/* ═══ 404 ═══
   Zdjecie hero z ta sama gradientowa naklada co strona glowna, zeby strona
   bledu nie wygladala na wyrwana z innego serwisu. Blok o przeniesionych
   adresach jest tu najwazniejszy: po zmianie struktury w 2026 to wlasnie
   stare linki beda najczestsza przyczyna trafienia na 404.               */
.et_pb_section.bs-404{position:relative;overflow:hidden;isolation:isolate;background-color:var(--bs-navy)!important;padding:0!important}
.bs-404::before{content:"";position:absolute;inset:0;z-index:0;background-image:url('/wp-content/uploads/dfrs/hero/hero-B.webp');background-size:cover;background-position:50% 55%;transform:scale(1.06)}
.bs-404::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(11,24,56,.97) 0%,rgba(18,39,90,.94) 48%,rgba(18,39,90,.88) 70%,rgba(11,24,56,.62) 100%)}
.bs-404 > .et_pb_row{position:relative;z-index:2}
.bs-404-row{padding:clamp(56px,8vw,110px) var(--bs-pad) clamp(52px,7vw,96px)!important;align-items:center}
.bs-404 .et_pb_text{margin-bottom:0!important}
.bs-404-badge{margin-bottom:0!important}
.bs-404-num{display:block;font-size:clamp(96px,15vw,210px);font-weight:800;color:#fff;line-height:.82;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.bs-404-num span{color:var(--bs-yellow)}
.bs-404-rule{display:block;width:64px;height:5px;background:var(--bs-yellow);border-radius:var(--bs-r-xs);margin:26px 0 0}
.bs-404-eyebrow{font-size:var(--fs-meta);letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--bs-blue-lite);margin:0 0 20px}
.bs-404-copy h1{font-size:clamp(28px,3.4vw,44px);font-weight:700;color:#fff;line-height:1.18;letter-spacing:-.02em;max-width:22ch;margin:0 0 22px;padding:0}
.bs-404-copy p{font-size:var(--fs-body);color:var(--bs-on-navy-2);line-height:1.75;font-weight:500;max-width:56ch}
.bs-404-moved{margin-top:26px;background:rgba(255,255,255,.07);border-left:4px solid var(--bs-yellow);border-radius:var(--bs-r);padding:20px 24px;max-width:60ch}
.bs-404-moved b{display:block;font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;color:var(--bs-yellow);font-weight:800;margin-bottom:10px}
.bs-404-moved p{font-size:var(--fs-sub);color:var(--bs-on-navy);margin:0;max-width:none}
.bs-404-moved code{font-family:Consolas,Monaco,monospace;font-size:.92em;background:rgba(255,255,255,.1);padding:2px 6px;border-radius:var(--bs-r-xs)}
/* ═══ LOGOTYPY W GRUPACH ═══
   Kategorie wg schematu klienta. Etykiety w jezyku strony, nie jako niebieskie
   pigulki ze slajdu — slajd to szkic w prezentacji, strona ma wlasny system. */
.bs-lgroup{margin:0 0 34px}
.bs-lgroup:last-child{margin-bottom:0}
.bs-lgroup h3{display:block;font-size:var(--fs-label);letter-spacing:.11em;text-transform:uppercase;font-weight:800;color:var(--bs-blue-ink);margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid var(--bs-line);position:relative}
.bs-lgroup h3::after{content:"";position:absolute;left:0;bottom:-1px;width:52px;height:3px;background:var(--bs-yellow);border-radius:var(--bs-r-xs)}
/* ═══ RAMKA TECH GROUP ═══
   Klient chcial trzy filary wewnatrz wiekszego prostokata z informacja ogolna.
   Ramka niesie tytul, przewodniczacego i wstep; filary siedza w srodku i
   zachowuja wlasna siatke z piecioma kolumnami.                            */
.bs-tgroup{border:2px solid var(--bs-line);border-radius:var(--bs-r-lg);background:linear-gradient(160deg,var(--bs-tint) 0%,#F7FAFD 38%,#fff 72%);padding:clamp(26px,3vw,40px);position:relative;overflow:hidden}.bs-tgroup::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--bs-yellow) 0%,var(--bs-yellow) 18%,var(--bs-line) 18%,var(--bs-line) 100%)}
.bs-tgroup h3{font-size:clamp(21px,2.2vw,27px);font-weight:700;color:var(--bs-navy);
  line-height:1.25;letter-spacing:-.02em;margin:0 0 18px;padding:0 0 16px;
  border-bottom:1px solid var(--bs-line);position:relative}
.bs-tgroup h3::after{content:"";position:absolute;left:0;bottom:-1px;width:52px;height:3px;
  background:var(--bs-yellow);border-radius:var(--bs-r-xs)}
.bs-tgroup-chair{margin:0 0 20px}
.bs-tgroup-chair b{display:block;font-size:var(--fs-micro);letter-spacing:.1em;
  text-transform:uppercase;color:var(--bs-grey);font-weight:800;margin-bottom:5px}
.bs-tgroup-chair{font-size:var(--fs-sub);font-weight:700;color:var(--bs-blue-ink)}
.bs-tgroup-lead{font-size:var(--fs-body);color:var(--bs-grey);line-height:1.75;
  font-weight:500;margin:0 0 16px}
.bs-tgroup-sub{font-size:var(--fs-sub);color:var(--bs-grey);line-height:1.7;
  font-weight:500;margin:0 0 26px;padding:0 0 22px;
  border-bottom:1px solid var(--bs-line)}
/* w ramce karty maja juz tlo ramki, wiec granica jest subtelniejsza */
.bs-tgroup .bs-pillar{background:#fff;border-color:var(--bs-line);box-shadow:0 1px 0 rgba(18,39,90,.04)}
@media (max-width:767px){ .bs-tgroup{padding:22px 18px} }
/* ═══ FILARY TECH GROUP ═══
   Ikony odrysowane z diagramu klienta: informacja, klodka z trybikiem,
   baza danych z wezlami. Strzalki miedzy kartami niosa sens, nie sa ozdoba —
   pokazuja, ze filary wymieniaja sie miedzy soba, a nie stoja obok siebie
   jako trzy osobne dzialy. Siatka ma piec kolumn: karta, strzalka, karta,
   strzalka, karta.                                                        */
/* wiekszy oddech miedzy akapitem wprowadzajacym a filarami — same 30px
   z .et_pb_module za malo przy karcie tej wysokosci                    */
.bs-pillarwrap{margin-bottom:0!important;margin-top:clamp(20px,2.6vw,40px)}
.bs-pillars{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(6px,0.9vw,14px);align-items:stretch}
.bs-pillar{position:relative;background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-r-lg);padding:0 26px 28px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;transition:border-color var(--bs-t) var(--bs-ease),transform var(--bs-t) var(--bs-ease),box-shadow var(--bs-t) var(--bs-ease)}
.bs-pillar::after{content:"";position:absolute;inset:0;background:var(--bs-tint);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform var(--bs-t) var(--bs-ease)}
.bs-pillar:hover{border-color:var(--bs-blue);transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(18,39,90,.55)}
.bs-pillar:hover::after{transform:scaleY(1)}
/* Krazek pod ikona jest konieczny, bo ikona wystaje ponad granatowa belke,
   a nad belka jest biale tlo karty — sam bialy rysunek bylby tam niewidoczny.
   margin-top ujemny wyciaga ja do gory; 46px marginesu belki daje zapas,
   wiec overflow:hidden na karcie jej nie przycina.                       */
.bs-pillar .ico{display:block;margin:46px -26px 24px;padding:0 0 22px;background:var(--bs-navy);text-align:center;position:relative}
.bs-pillar .ico::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--bs-yellow);transform:scaleX(.24);transform-origin:left;transition:transform var(--bs-t-slow) var(--bs-ease)}
.bs-pillar:hover .ico::after{transform:scaleX(1)}
/* fill="currentColor" w ikonach dziedziczy wlasciwosc color, NIE stroke.
   Bez color:#fff wypelnione elementy (litera i, kropki w Data Impact)
   braly kolor tekstu z otoczenia i wychodzily ciemne na granacie.      */
.bs-pillar .ico svg{width:73px;height:73px;box-sizing:content-box;padding:9px;background:var(--bs-navy);border-radius:50%;margin-top:-40px;position:relative;z-index:2;display:inline-block;stroke:#fff;color:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--bs-t) var(--bs-ease),color var(--bs-t) var(--bs-ease),background var(--bs-t) var(--bs-ease)}
.bs-pillar:hover .ico svg{stroke:var(--bs-yellow);color:var(--bs-yellow)}
.bs-pillar h3{font-size:var(--fs-title);font-weight:700;color:var(--bs-navy);line-height:1.3;letter-spacing:-.01em;margin:0 0 14px;padding:0}
.bs-pillar .leads{font-size:var(--fs-meta);color:var(--bs-blue-ink);font-weight:600;line-height:1.6;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--bs-line)}
.bs-pillar .leads b{display:block;font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--bs-grey);font-weight:800;margin-bottom:6px}
/* Opis filaru schodzi do --fs-sub (15px) zamiast --fs-body (17px).
   To swiadomy wyjatek od zasady jednego rozmiaru dla akapitow: w kolumnie
   o jednej trzeciej szerokosci linia jest krotka, wiec mniejszy stopien
   dalej czyta sie dobrze, a karta przestaje byc przegadana.             */
.bs-pillar .desc{font-size:var(--fs-sub);color:var(--bs-grey);line-height:1.75;font-weight:500;margin:0}
/* align-self:center centruje element, ale jego wysokosc to wtedy wysokosc
   zawartosci — 22px — i strzalka ladowala przy gornej krawedzi. Rozciagniecie
   na cala wysokosc wiersza i wysrodkowanie w srodku jest odporniejsze.   */
/* ZABEZPIECZENIE: WordPress przepuszcza tresc modulu tekstowego przez
   wpautop, ktory opakowuje elementy liniowe w <p>. Gdy strzalka byla
   <span>, to wlasnie ten akapit stawal sie komorka siatki — rozciagal
   sie na cala wysokosc wiersza, a strzalka siedziala w nim u gory.
   W layoucie jest juz <div>, ale ta regula lapie przypadek, gdyby
   wpautop mimo to cos opakowal. NIE USUWAC.                        */
.bs-pillars > p{display:flex;align-items:center;justify-content:center;margin:0!important;padding:0!important}
.bs-link{align-self:stretch;display:flex;align-items:center;justify-content:center;width:clamp(30px,3.2vw,48px)}
.bs-link svg{width:100%;height:auto;stroke:var(--bs-blue);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:opacity var(--bs-t) var(--bs-ease)}
.bs-pillars:hover .bs-link svg{opacity:1}
/* Przycisk na ciemnym tle — odwrocony kierunek wycieraczki.
   .bs-btn przechodzi przy najechaniu na granat, wiec na sekcji bs-deep
   (rowniez granatowej) tlo przycisku znikalo: kontrast spadal do 1.00
   i zostawal sam bialy napis wiszacy w powietrzu.
   Zamiast sciemniac — rozjasniamy do zoltego, tekst na granat.
   NIE USUWAC: bez tego przycisk jest niewidoczny w stanie hover.        */
.bs-deep .bs-btn.et_pb_button{background-image:linear-gradient(var(--bs-yellow),var(--bs-yellow))!important;background-size:0 100%!important;background-repeat:no-repeat!important;background-position:left center!important;background-color:var(--bs-blue-ink)!important;border-color:var(--bs-blue-lite)!important}
.bs-deep .bs-btn.et_pb_button:hover{background-size:100% 100%!important;color:var(--bs-navy)!important;border-color:var(--bs-yellow)!important}
.bs-deep .bs-btn.et_pb_button:focus-visible{outline:3px solid var(--bs-yellow)!important;outline-offset:3px}
/* ═══ ROZWIJANA SEKCJA SD1 ═══
   Instrukcja wypelniania wyrozniona, bo to jedyny dokument czytany PRZED
   reszta. Dziesiec formularzy odpowiada kategoriom zdarzen z Rozporzadzenia
   886/2013 — kolejnosc alfabetyczna, zeby dalo sie szukac wzrokiem.       */
.bs-sd-desc{font-size:var(--fs-sub);color:var(--bs-grey);line-height:1.75;font-weight:500;margin:0 0 20px;max-width:64ch}
.bs-sd-instr{display:flex;align-items:center;gap:16px;padding:18px 20px;
  background:var(--bs-tint);border:1px solid var(--bs-blue);
  border-radius:var(--bs-r-lg);margin:0 0 22px;text-decoration:none;
  transition:transform var(--bs-t) var(--bs-ease),box-shadow var(--bs-t) var(--bs-ease)}
.bs-sd-instr:hover{transform:translateY(-2px);
  box-shadow:0 14px 28px -20px rgba(18,39,90,.5)}
.bs-sd-instr .txt{flex:1}
.bs-sd-instr .txt b{display:block;font-size:var(--fs-sub);font-weight:700;
  color:var(--bs-navy);line-height:1.35}
.bs-sd-instr .txt > span{display:block;font-size:var(--fs-meta);color:var(--bs-grey);
  margin-top:3px;font-weight:500}
.bs-sd-instr .go{flex:none;font-size:var(--fs-title);color:var(--bs-blue-ink);
  transition:transform var(--bs-t) var(--bs-ease)}
.bs-sd-instr:hover .go{transform:translateX(5px)}
.bs-sd-label{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
  font-weight:800;color:var(--bs-grey);margin:0 0 12px}
.bs-sd-forms{margin:0!important}
.bs-sd-forms li a{padding:13px 18px}
/* ═══ FAQ ═══
   Natywne <details>, tak jak rozwijany opis przy SD1: dziala bez JavaScriptu,
   obsluguje klawiature i czytniki ekranu same z siebie. Zaden skrypt nie moze
   tego zepsuc, bo zadnego nie ma.                                          */
.bs-faqwrap{margin-bottom:0!important}
.bs-faq{display:grid;gap:10px}
.bs-faq-item{border:1px solid var(--bs-line);border-left:3px solid var(--bs-line);
  border-radius:var(--bs-r-lg);background:#fff;overflow:hidden;
  transition:border-color var(--bs-t) var(--bs-ease)}
.bs-faq-item[open]{border-color:var(--bs-line);border-left-color:var(--bs-yellow)}
.bs-faq-item:hover{border-left-color:var(--bs-blue)}
.bs-faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;
  gap:16px;padding:20px 52px 20px 24px;position:relative;min-height:44px}
.bs-faq-item summary::-webkit-details-marker{display:none}
.bs-faq-item summary:hover{background:var(--bs-tint)}
.bs-faq-item summary:focus-visible{outline:3px solid var(--bs-navy);outline-offset:-3px}
/* znacznik rozwiniecia */
.bs-faq-item summary::after{content:"";position:absolute;right:24px;top:26px;
  width:10px;height:10px;border-right:2px solid var(--bs-blue-ink);
  border-bottom:2px solid var(--bs-blue-ink);transform:rotate(45deg);
  transition:transform var(--bs-t) var(--bs-ease)}
.bs-faq-item[open] summary::after{transform:rotate(-135deg);top:30px}
.bs-faq .nr{flex:none;font-size:var(--fs-meta);font-weight:800;letter-spacing:.06em;
  color:var(--bs-blue-ink);min-width:26px;padding-top:2px}
.bs-faq .q{font-size:var(--fs-sub);font-weight:700;color:var(--bs-navy);line-height:1.5}
.bs-faq-a{display:flex;gap:16px;padding:0 52px 22px 24px;
  border-top:1px solid var(--bs-line);margin-top:-1px;padding-top:18px}
.bs-faq-a .nr{color:var(--bs-grey)}
.bs-faq-a p{font-size:var(--fs-sub);color:var(--bs-grey);line-height:1.75;
  font-weight:500;margin:0}
@media (max-width:980px){.bs-pillars{grid-template-columns:1fr}.bs-link{width:auto;padding:4px 0;justify-self:center}.bs-link svg{width:40px;transform:rotate(90deg)}.bs-404-row .et_pb_column{width:100%!important;margin-bottom:24px!important}.bs-404-row .et_pb_column:last-child{margin-bottom:0!important}}
@media (prefers-reduced-motion:reduce){.bs-404::before{transform:none}}
@media (max-width:980px){[id]{scroll-margin-top:68px}}
@media (max-width:980px){.bs-drivers{grid-template-columns:repeat(2,1fr)}.bs-kp{grid-template-columns:repeat(2,1fr)}.bs-glance{grid-template-columns:repeat(2,1fr)}}@media (max-width:767px){.bs-faq-item summary{padding:18px 44px 18px 18px;gap:12px}
  .bs-faq-a{padding:18px 44px 20px 18px;gap:12px}.bs-pillar .ico svg{width:58px;height:58px;margin-top:-32px}.bs-drivers,.bs-reasons,.bs-principles,.bs-kp{grid-template-columns:1fr}.bs-kp li{padding:26px 22px 28px}.bs-glance{grid-template-columns:1fr}.bs-timeline::before,.bs-timeline::after{left:13px}.bs-timeline li{padding-left:46px}.bs-timeline li::before{left:6px;width:14px;height:14px}.bs-timeline .card{padding:18px 20px 20px}.bs-sd-head{flex-wrap:wrap;gap:10px}.bs-sd-head .name{flex:1 1 100%;order:2}.bs-sd-head .meta{order:3}}@media (max-width:980px){
  
  /* ═══ MENU MOBILNE — pelna szerokosc ═══
   HISTORIA TEJ REGULY, zeby nikt jej nie uproscil:
   Divi pozycjonuje .et_mobile_menu wzgledem .container, ktory ma 80% szerokosci
   okna — stad menu bylo wezsze od ekranu. Pierwsza proba zdejmowala
   position:relative z .container, zeby odniesieniem stal sie #main-header.
   To zadzialalo dla menu, ale ZEPSULO LOGO: Divi pozycjonuje .logo_container
   absolutnie z left:50px right:-50px, zakladajac .container jako odniesienie.
   Przy naglowku o pelnej szerokosci dawalo to 50px poziomej szczeliny.
   Rozwiazanie ponizej nie rusza kontekstu pozycjonowania: srodek kontenera
   pokrywa sie ze srodkiem okna, wiec 100vw wysrodkowane trafia w krawedzie. */
@media (max-width:980px){
  #main-header .et_mobile_menu{
    position:absolute!important;top:100%!important;
    left:50%!important;right:auto!important;
    transform:translateX(-50%);
    width:100vw!important;max-width:100vw!important;
    margin:0!important;padding:0!important;
    border-top:none!important;
    box-shadow:0 18px 40px -20px rgba(11,24,56,.45)}
  #main-header .et_mobile_menu li a{padding:16px var(--bs-pad)!important}
  #main-header .et_mobile_menu li.add_cta{
    margin:12px var(--bs-pad)!important;padding:0!important;
    line-height:normal!important;display:block!important}
  #main-header .et_mobile_menu li.add_cta>a{
    display:block!important;text-align:center;padding:14px 18px!important;
    background-size:100% 100%}
}

}

/* ═══ CTA W MENU (klasa add_cta na pozycji menu) ═══
   Granat wjeżdża od lewej tą samą techniką co .bs-btn: gradient jako
   background-image rozciągany przez background-size. Przeglądarka
   przerysowuje wtedy samo tło, bez przeliczania układu.               */
.add_cta{
  color:var(--bs-blue-ink)!important;
  background-color:var(--bs-blue-ink);
  background-image:linear-gradient(var(--bs-navy),var(--bs-navy));
  background-repeat:no-repeat;
  background-size:0% 100%;
  background-position:left center;
  border-radius:var(--bs-r);
  padding:5px!important;
  margin-bottom:20px;
  transition:background-size var(--bs-t) var(--bs-ease)}
.add_cta:hover{background-size:100% 100%}
.add_cta a{color:#fff!important;padding:10px!important}
/* Divi ma własny hover na linkach menu — bez tego napis znika na granacie */
.add_cta:hover a{color:#fff!important}
.et-fixed-header #top-menu .add_cta a,
.et-fixed-header #top-menu .add_cta:hover a{color:#fff!important}
.add_cta a:focus-visible{outline:3px solid var(--bs-yellow);outline-offset:3px}

/* ═══ PRZYCISKI ═══ */
.bs-btn.et_pb_button{display:inline-block;background:var(--bs-blue-ink);color:#fff!important;font-family:var(--bs-f);font-size:var(--fs-meta)!important;font-weight:700;padding:14px 24px!important;letter-spacing:.02em;line-height:1.2;border:2px solid var(--bs-blue-ink);border-radius:var(--bs-r);position:relative;overflow:hidden;isolation:isolate;transition:color var(--bs-t-fast) var(--bs-ease),border-color var(--bs-t) var(--bs-ease),transform var(--bs-t-fast) var(--bs-ease)}
.bs-btn.et_pb_button::after,.bs-btn.et_pb_button::before{display:none!important}
.bs-btn.et_pb_button{background-image:linear-gradient(var(--bs-navy),var(--bs-navy));background-repeat:no-repeat;background-size:0% 100%;background-position:left center;transition:background-size var(--bs-t) var(--bs-ease),border-color var(--bs-t) var(--bs-ease),transform var(--bs-t-fast) var(--bs-ease)}
.bs-btn.et_pb_button:hover{background-size:100% 100%;border-color:var(--bs-navy);transform:translateY(-2px);padding:14px 24px!important}
.bs-hero .et_pb_button_module_wrapper{display:inline-block;margin:36px 14px 0 0!important}
.bs-btn-light.et_pb_button{background-color:transparent;border-color:rgba(255,255,255,.5);background-image:linear-gradient(#fff,#fff)}
.bs-btn-light.et_pb_button:hover{color:var(--bs-navy)!important;border-color:#fff}
.bs-sec-stats{border-bottom:1px solid var(--bs-line)}
.bs-stats{padding:0!important}
.bs-stats .et_pb_column{margin-right:0!important;width:33.3333%!important;margin-bottom:0!important;padding:clamp(26px,3.4vw,44px) clamp(24px,3.5vw,48px)!important;border-right:1px solid var(--bs-line);position:relative;overflow:hidden}
.bs-stats .et_pb_column:first-child{padding-left:var(--bs-pad)!important}
.bs-stats .et_pb_column:last-child{border-right:0;padding-right:var(--bs-pad)!important}
.bs-stats .et_pb_column::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--bs-yellow);transform:scaleX(0);transform-origin:left;transition:transform var(--bs-t) var(--bs-ease)}
.bs-stats .et_pb_column:hover::after{transform:scaleX(1)}
.bs-stat{margin-bottom:0!important}
.bs-n{font-size:clamp(34px,4.2vw,54px);font-weight:800;color:var(--bs-navy);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.bs-t{font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--bs-grey);margin-top:15px}

/* ═══ SEKCJE I RAIL ═══ */
.et_pb_section.bs-tinted{background-color:var(--bs-off)!important}
/* Divi nie generuje szerokości dla układu 1_5,4_5 — nie jest to jego
   standardowa struktura wiersza. Zamiast łatać kolumny, wiersz sam staje
   się siatką i szerokości Divi przestają mieć znaczenie. */
.bs-rail{display:grid!important;grid-template-columns:minmax(200px,240px) 1fr;
  gap:clamp(24px,4.4vw,64px);align-items:start;
  padding:clamp(30px,3.2vw,46px) var(--bs-pad)!important}
.bs-rail::after,.bs-rail::before{display:none!important}
.bs-rail>.et_pb_column{width:auto!important;max-width:none!important;
  margin:0!important;float:none!important;min-width:0}
.bs-tinted .bs-rail{padding:clamp(34px,3.6vw,52px) var(--bs-pad)!important}
.et_pb_section.bs-quotes{background-color:var(--bs-navy)!important}
.bs-quotes .bs-rail{padding:clamp(54px,6.2vw,92px) var(--bs-pad)!important;overflow:hidden}
.bs-lab{margin-bottom:0!important}
/* --fs-label dotyczy WYLACZNIE etykiet wersalikami z rozstrzeleniem.
   Wersaliki przy tym samym rozmiarze w px czytaja sie mniejsze niz tekst
   zwykly, bo brakuje im wydluzen dolnych i gornych. Stad 16px tam,
   i 15px (--fs-sub) dla zdan pisanych normalnie.                        */
.bs-lab h2{font-size:var(--fs-label);letter-spacing:.11em;text-transform:uppercase;font-weight:800;color:var(--bs-blue-ink);padding:16px 0 0;line-height:1.35;position:relative}
.bs-lab h2::before{content:"";position:absolute;left:0;top:0;width:40px;height:4px;background:var(--bs-blue);border-radius:var(--bs-r-xs)}
.bs-lab em{display:block;font-style:normal;color:var(--bs-grey);font-weight:500;letter-spacing:.01em;text-transform:none;font-size:var(--fs-sub);margin-top:11px;line-height:1.55}
.bs-quotes .bs-lab h2{color:var(--bs-blue-lite)}
.bs-quotes .bs-lab h2::before{background:var(--bs-yellow)}
.bs-quotes .bs-lab em{color:var(--bs-on-navy-dim)}
/* Naglowek deklaracji ma wlasny limit szerokosci mimo tego, ze proza go nie ma.
   Przy 40px linia biegnaca przez cala kolumne raila jest za dluga do objecia
   wzrokiem — to inny przypadek niz akapit.                                  */
.bs-prose h2.bs-big{font-size:clamp(26px,3vw,40px);font-weight:700;color:var(--bs-navy);line-height:1.2;letter-spacing:-.025em;max-width:26ch;margin-bottom:28px;padding:0}
/* Szerokosc tresci: limity w ch zostaly zdjete z prozy, osi czasu, calloutow
   i disclaimerow — tresc ma wypelniac kolumne raila. Limity zostaja tylko
   tam, gdzie krotka linia jest zamierzona kompozycyjnie: h1 w hero strony
   glownej i tekst w stopce.                                              */
.bs-prose p{max-width:none;color:var(--bs-grey);font-size:var(--fs-body);line-height:1.8}

/* ═══ CHIPY ═══ */
.bs-chips{display:grid!important;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bs-line);border-left:1px solid var(--bs-line);border-radius:var(--bs-r-lg);overflow:hidden;margin-bottom:0!important}
.bs-chip.et_pb_blurb{margin-bottom:0!important;border-right:1px solid var(--bs-line);border-bottom:1px solid var(--bs-line);padding:24px 22px;position:relative;isolation:isolate;overflow:hidden}
.bs-chip .et_pb_blurb_content{max-width:none}
.bs-chip .et_pb_module_header{font-family:var(--bs-f);font-weight:600;font-size:var(--fs-body);color:var(--bs-navy);line-height:1.5;padding:0;display:flex;align-items:flex-start;gap:14px}
.bs-chip .et_pb_module_header::before{content:"";width:7px;height:7px;background:var(--bs-blue);flex:none;margin-top:8px;border-radius:50%;transition:transform var(--bs-t) var(--bs-ease),background var(--bs-t) var(--bs-ease)}
.bs-chip::after{content:"";position:absolute;inset:0;background:var(--bs-tint);z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform var(--bs-t) var(--bs-ease)}
.bs-chip:hover::after{transform:scaleY(1)}
.bs-chip:hover .et_pb_module_header::before{transform:scale(1.9);background:var(--bs-navy)}

/* ═══ KAFLE ═══ */
.bs-cards{display:grid!important;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px);margin-bottom:0!important}
.bs-card.et_pb_blurb{margin-bottom:0!important;background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-r-lg);overflow:hidden;display:flex;flex-direction:column;transition:border-color var(--bs-t) var(--bs-ease),box-shadow var(--bs-t) var(--bs-ease),transform var(--bs-t) var(--bs-ease)}
.bs-card:hover{border-color:var(--bs-blue);transform:translateY(-5px);box-shadow:0 22px 44px -26px rgba(18,39,90,.55)}
.bs-card:focus-within{outline:3px solid var(--bs-navy);outline-offset:3px}

/* Divi generuje per-moduł .et_pb_blurb_N .et_pb_main_blurb_image .et_pb_image_wrap
   z max-width:38% (0,3,0) — trzeba to jawnie zdjąć, inaczej okładka siedzi
   wyśrodkowana na jednej trzeciej szerokości kafla. */
.bs-card .et_pb_main_blurb_image{width:100%!important;max-width:none!important;
  margin:0!important;display:block}
.bs-card .et_pb_image_wrap{display:block!important;width:100%!important;
  max-width:none!important;overflow:hidden;border-bottom:1px solid var(--bs-line)}
.bs-card .et_pb_image_wrap img{width:100%!important;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform var(--bs-t-slow) var(--bs-ease)}.bs-card-wide .et_pb_image_wrap img{aspect-ratio:auto;object-fit:contain}
.bs-card:hover .et_pb_image_wrap img{transform:scale(1.07)}
.bs-card .et_pb_blurb_container{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.bs-card .et_pb_module_header{font-size:var(--fs-title);font-weight:700;color:var(--bs-navy);margin-bottom:12px;line-height:1.35;padding:0}
.bs-card .et_pb_blurb_description p{font-size:var(--fs-body);color:var(--bs-grey);line-height:1.7}
.bs-card .et_pb_blurb_container::after{content:"Read more \2192";margin-top:20px;font-size:var(--fs-meta);font-weight:700;color:var(--bs-blue-ink);letter-spacing:.02em;transition:transform var(--bs-t) var(--bs-ease);display:block}
.bs-card:hover .et_pb_blurb_container::after{transform:translateX(6px)}

/* ═══ TESTIMONIALE ═══ */
.bs-qtrack{min-width:0;max-width:100%;display:grid!important;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*clamp(20px,2.6vw,34px))/3);gap:clamp(20px,2.6vw,34px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px;margin-bottom:0!important}
.bs-qtrack::-webkit-scrollbar{display:none}
.bs-q.et_pb_testimonial{margin-bottom:0!important;scroll-snap-align:start;background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.1);border-top:3px solid var(--bs-yellow);border-radius:var(--bs-r-lg);padding:28px 24px 26px;display:flex;flex-direction:column;transition:background var(--bs-t) var(--bs-ease),border-color var(--bs-t) var(--bs-ease),transform var(--bs-t) var(--bs-ease)}
.bs-q.et_pb_testimonial::before{display:none}
.bs-q:hover{background:rgba(255,255,255,.085);transform:translateY(-4px)}
.bs-q .et_pb_testimonial_portrait{width:var(--bs-av)!important;height:var(--bs-av)!important;position:static;margin:0 0 22px;border-radius:50%;background-size:cover;background-position:center;box-shadow:0 0 0 3px rgba(255,255,255,.22);transition:box-shadow var(--bs-t) var(--bs-ease),transform var(--bs-t) var(--bs-ease)}
.bs-q .et_pb_testimonial_portrait::before{display:none}
.bs-q:hover .et_pb_testimonial_portrait{box-shadow:0 0 0 3px var(--bs-yellow);transform:scale(1.04)}
.bs-q .et_pb_testimonial_description{margin-left:0!important;flex:1;display:flex;flex-direction:column}
.bs-q .et_pb_testimonial_description_inner{flex:1}
.bs-q,.bs-q .et_pb_testimonial_description_inner,.bs-q .et_pb_testimonial_description_inner p{font-size:var(--fs-body);line-height:1.75;color:var(--bs-on-navy)!important;font-weight:400}
.bs-q .et_pb_testimonial_description_inner p{margin:0}
.bs-q .et_pb_testimonial_description_inner p+p{margin-top:12px}
.bs-q .et_pb_testimonial_author{display:block;font-size:var(--fs-title);font-weight:700;color:#fff!important;line-height:1.3;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.13);font-style:normal}
.bs-q .et_pb_testimonial_meta{display:block;font-size:var(--fs-meta);color:var(--bs-on-navy-dim)!important;margin-top:5px;line-height:1.45;font-weight:500}
.bs-q .et_pb_testimonial_portrait{background-color:rgba(255,255,255,.09)}
.bs-qnav{display:flex;align-items:center;gap:12px;margin-top:30px}
.bs-qbtn{width:46px;height:46px;border:2px solid rgba(255,255,255,.35);background:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--fs-title);border-radius:var(--bs-r);transition:var(--bs-t-fast) var(--bs-ease);flex:none;padding:0}
.bs-qbtn:hover:not(:disabled){background:#fff;color:var(--bs-navy);border-color:#fff;transform:translateY(-2px)}
.bs-qbtn:disabled{opacity:.28;cursor:not-allowed}
.bs-qdots{display:flex;gap:8px;margin-left:8px}
.bs-qdots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;background:rgba(255,255,255,.3);transition:var(--bs-t) var(--bs-ease)}
.bs-qdots button.bs-on{background:var(--bs-yellow);width:26px;border-radius:4px}

/* ═══ OSADZENIE NA ŻĄDANIE ═══
   Iframe wstawiany dopiero po kliknięciu. Do tego czasu żadne żądanie
   nie leci do zewnętrznego serwera, więc IP użytkownika nigdzie nie wychodzi
   bez jego decyzji. */
.bs-embed{position:relative;display:block;width:100%;overflow:hidden;
  border-radius:var(--bs-r-lg);background:var(--bs-navy);
  height:clamp(620px,84vh,940px)}
/* po wczytaniu dashboard ma własną granatową głowę i białą treść —
   granat pod spodem prześwitywał na dole, gdzie aplikacja go nie zakrywa */
.bs-embed.is-live{background:#fff}
.bs-embed img{width:100%;height:100%;object-fit:cover;object-position:top center;
  filter:saturate(.75) brightness(.72)}
.bs-embed iframe{width:100%;height:100%;border:0;display:block}
.bs-embed .bs-embed-veil{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;text-align:center;
  padding:24px;background:linear-gradient(180deg,rgba(11,24,56,.35),rgba(11,24,56,.78))}
.bs-embed .bs-embed-btn{background:var(--bs-yellow);color:var(--bs-navy);border:0;
  font:800 14px var(--bs-f);letter-spacing:.04em;padding:16px 28px;
  border-radius:var(--bs-r);cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 14px 34px -14px rgba(11,24,56,.8);
  transition:transform var(--bs-t-fast) var(--bs-ease),box-shadow var(--bs-t-fast) var(--bs-ease)}
.bs-embed .bs-embed-btn:hover{transform:translateY(-3px);
  box-shadow:0 20px 42px -16px rgba(11,24,56,.9)}
.bs-embed .bs-embed-note{max-width:44ch;font-size:var(--fs-meta);line-height:1.65;
  color:var(--bs-on-navy-2);font-weight:500;margin:0}
.bs-embed .bs-embed-note a{color:var(--bs-blue-lite);font-weight:600}
.bs-embedwrap{margin-bottom:0!important}
.bs-embed-out{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:var(--fs-meta);font-weight:700;color:var(--bs-blue-ink);text-decoration:none}
.bs-embed-out:hover{color:var(--bs-navy)}

/* ═══ PLACEHOLDERY ═══ */
.bs-gap{background:var(--bs-yellow);color:var(--bs-navy);font-weight:800;padding:2px 9px;border-radius:var(--bs-r-sm);font-size:.92em;white-space:nowrap;animation:bsGap 2.6s ease-in-out infinite}
@keyframes bsGap{
  0%,100%{box-shadow:0 0 0 2px rgba(242,230,0,.4)}
  50%{box-shadow:0 0 0 7px rgba(242,230,0,.14)}
}
.bs-gapline{display:block;background:var(--bs-gap-bg);border-left:4px solid var(--bs-yellow);border-radius:var(--bs-r-sm);padding:13px 16px;font-size:var(--fs-meta);color:var(--bs-ink);font-weight:600;line-height:1.55;margin:6px 0;animation:bsGap 2.6s ease-in-out infinite}
.bs-gapline::before{content:"TO BE SUPPLIED — ";font-weight:800;color:var(--bs-navy);letter-spacing:.04em}

/* ═══ FOCUS ═══ */
:focus-visible{outline:3px solid var(--bs-navy);outline-offset:3px;border-radius:var(--bs-r-sm)}
.bs-hero :focus-visible,.bs-quotes :focus-visible{outline-color:var(--bs-yellow)}

/* ═══ STOPKA ═══ */
.et_pb_section.bs-footer{background-color:var(--bs-navy-900)!important;padding:0!important}
.bs-footer-row{padding:clamp(44px,5vw,66px) var(--bs-pad) 0!important}
.bs-footer-row .et_pb_column{margin-bottom:0!important}
.bs-footer-bottom{padding:22px var(--bs-pad) 32px!important;margin-top:32px!important;border-top:1px solid rgba(255,255,255,.12)}
.bs-footer-bottom .et_pb_column{margin-bottom:0!important}
/* Logo w stopce zastapilo naglowek tekstowy 'Data for Road Safety'.
   Divi ogranicza obraz w module do szerokosci kontenera, ale bez jawnej
   szerokosci logo 228px rozciaga sie na cala kolumne 1/2.               */
.bs-flogo{margin-bottom:22px!important}
.bs-flogo .et_pb_image_wrap{display:block}
.bs-flogo img{width:auto!important;max-width:none!important;height:58px;display:block}
.bs-flogo a{display:inline-block;transition:opacity var(--bs-t) var(--bs-ease)}
.bs-flogo a:hover{opacity:.78}
.bs-fcol{margin-bottom:0!important}
.bs-fcol h2{color:#fff;font-size:var(--fs-meta);letter-spacing:.13em;text-transform:uppercase;font-weight:800;margin:0 0 16px;padding:0;line-height:1.4}
.bs-fcol p{color:var(--bs-on-navy-dim);font-size:var(--fs-meta);line-height:1.7;font-weight:500;max-width:38ch;margin:0}
.bs-fnav a{display:block;color:var(--bs-on-navy-dim);text-decoration:none;font-size:var(--fs-meta);font-weight:500;line-height:1.3;padding:11px 0;transition:color var(--bs-t-fast) var(--bs-ease),transform var(--bs-t) var(--bs-ease)}
.bs-fnav a:hover{color:#fff;transform:translateX(5px)}
.bs-fmail{margin-top:14px!important}
.bs-fmail a{color:#fff;font-weight:600;text-decoration:none;font-size:var(--fs-meta);border-bottom:1px solid rgba(255,255,255,.25);transition:border-color var(--bs-t-fast) var(--bs-ease)}
.bs-fmail a:hover{border-color:var(--bs-yellow)}
.bs-fbot{margin-bottom:0!important}
.bs-fbot p{color:var(--bs-on-navy-dim);font-size:var(--fs-meta);font-weight:500;line-height:1.6;margin:0}
.bs-fbot a{color:var(--bs-on-navy-dim);text-decoration:none;transition:color var(--bs-t-fast) var(--bs-ease)}
.bs-fbot a:hover{color:#fff}
/* Podpis studia. Pomarancz #ED3E0F ma na #0B1838 kontrast 4.41 przy progu 4.5
   — minimalnie ponizej. Zostawiam kolor marki, bo to stan hover na malym
   podpisie, a nie tresc uzytkowa. Gdyby audyt dostepnosci to podnosil,
   najblizszy zdajacy odcien to #EF4514 (4.60).                            */
.bs-credit{display:block;margin-top:9px;font-size:var(--fs-meta);color:var(--bs-on-navy-dim);opacity:.7}
.bs-credit a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.16);transition:color var(--bs-t) var(--bs-ease),border-color var(--bs-t) var(--bs-ease)}
.bs-credit a:hover{color:var(--bs-studio);border-color:var(--bs-studio)}
.bs-credit a:focus-visible{outline:2px solid var(--bs-studio);outline-offset:3px}
.bs-fbot-right p{text-align:right}@media (max-width:767px){.bs-fbot-right p{text-align:left}}
.bs-footer :focus-visible{outline-color:var(--bs-yellow)}

/* ═══ PODSTRONY ═══ */
.et_pb_section.bs-hero-sub{background-color:var(--bs-navy)!important;padding:0!important}
.bs-hero-sub .bs-hero-row{padding:clamp(40px,4.4vw,62px) var(--bs-pad) clamp(36px,4vw,54px)!important}
.bs-hero-sub .et_pb_text,.bs-hero-sub .et_pb_button_module_wrapper{margin-bottom:0!important}
.bs-hero-sub .bs-h1 h1{font-size:clamp(32px,4.2vw,52px);font-weight:700;line-height:1.18;letter-spacing:-.02em;max-width:34ch;color:#fff;padding:0}
.et_pb_section.bs-anchors{background-color:#fff!important;border-bottom:1px solid var(--bs-line);padding:0!important;position:sticky;top:0;z-index:41}
.bs-anchors-row{padding:0 var(--bs-pad)!important}
.bs-anchorlinks{margin-bottom:0!important}
.bs-anchorlinks .et_pb_text_inner{display:flex;gap:30px;flex-wrap:wrap}
.bs-anchorlinks a{font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bs-grey);text-decoration:none;padding:20px 0;border-bottom:3px solid transparent;transition:color var(--bs-t-fast) var(--bs-ease),border-color var(--bs-t-fast) var(--bs-ease)}
.bs-anchorlinks a:hover{color:var(--bs-navy);border-color:var(--bs-blue)}
.et_pb_section.bs-deep{background-color:var(--bs-navy)!important}
.bs-deep .bs-lab h2{color:var(--bs-blue-lite)}
.bs-deep .bs-lab h2::before{background:var(--bs-yellow)}
.bs-deep .bs-lab em{color:var(--bs-on-navy-dim)}
.bs-deep .bs-prose p{color:var(--bs-on-navy-2)}
.bs-deep .bs-prose h2,.bs-deep .bs-prose h3{color:#fff}
.et_pb_section.bs-sec:not(.bs-tinted):not(.bs-deep):not(.bs-quotes){border-top:1px solid var(--bs-line)}

/* ═══ STATYSTYKI ═══ */
.et_pb_section.bs-sec-stats{background-color:var(--bs-navy)!important;border-bottom:0}
.bs-stats .et_pb_column{border-right:1px solid rgba(255,255,255,.14);padding:clamp(22px,2.8vw,36px) clamp(24px,3.5vw,48px)!important}

.bs-sec-stats .bs-n{color:#fff;font-size:clamp(32px,3.9vw,50px)}
.bs-sec-stats .bs-t{color:var(--bs-on-navy-dim);margin-top:13px}
.bs-fig{margin-bottom:24px!important}
.bs-fig .et_pb_image_wrap{display:block;width:100%}
.bs-fig img{width:100%;border:1px solid var(--bs-line);border-radius:var(--bs-r-lg)}
.bs-figcap{margin:-14px 0 24px!important}
.bs-figcap p,.bs-cap{font-size:var(--fs-meta);color:var(--bs-grey);font-style:italic;line-height:1.6;margin:0}
.bs-video{margin-bottom:24px!important}
.bs-video .et_pb_video_box{border-radius:var(--bs-r-lg);overflow:hidden}
.bs-res{margin-bottom:0!important}

/* ═══ BLOK ZASOBÓW ═══ */
.bs-reslist{list-style:none;display:grid;gap:12px;margin:0;padding:0}
.bs-reslist li{margin:0}
.bs-reslist a{display:flex;align-items:center;gap:18px;padding:22px 24px;text-decoration:none;background:#fff;border:1px solid var(--bs-line);border-radius:var(--bs-r-lg);position:relative;overflow:hidden;isolation:isolate;box-shadow:0 1px 0 rgba(18,39,90,.04);transition:border-color var(--bs-t-fast) var(--bs-ease),box-shadow var(--bs-t) var(--bs-ease),transform var(--bs-t) var(--bs-ease)}
.bs-reslist a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--bs-blue);transform:scaleY(0);transform-origin:top;transition:transform var(--bs-t) var(--bs-ease)}
.bs-reslist a:hover::before{transform:scaleY(1)}
.bs-reslist a:hover{border-color:var(--bs-blue);transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(18,39,90,.55)}
.bs-reslist .badge{font-size:var(--fs-micro);font-weight:800;letter-spacing:.1em;color:#fff;background:var(--bs-blue-ink);padding:5px 8px;flex:none;width:54px;text-align:center;border-radius:var(--bs-r-sm)}
.bs-reslist .badge.ext{background:var(--bs-grey)}
.bs-reslist .txt{flex:1}
.bs-reslist .txt b{display:block;font-size:var(--fs-body);font-weight:700;color:var(--bs-navy);line-height:1.35}
.bs-reslist .txt span{display:block;font-size:var(--fs-meta);color:var(--bs-grey);margin-top:4px;font-weight:500}
.bs-reslist .go{flex:none;font-size:var(--fs-title);color:var(--bs-blue-ink);transition:transform var(--bs-t) var(--bs-ease)}
.bs-reslist a:hover .go{transform:translateX(5px)}
.bs-prose a:not(.et_pb_button){color:var(--bs-blue-ink);font-weight:600;text-decoration:none;background-image:linear-gradient(var(--bs-blue),var(--bs-blue));background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;transition:background-size var(--bs-t) var(--bs-ease),color var(--bs-t-fast) var(--bs-ease)}
.bs-prose a:not(.et_pb_button):hover{color:var(--bs-navy);background-size:100% 2px}
.bs-btn-dl.et_pb_button::after{content:'\21b3'!important;display:inline-block!important;opacity:1!important;margin-left:9px;font-size:var(--fs-label);transition:transform var(--bs-t) var(--bs-ease)}
.bs-btn-dl.et_pb_button:hover::after{transform:translateY(3px)}
.bs-docs{margin-bottom:0!important}

/* ═══ LISTA DOKUMENTÓW ═══ */
.bs-doclist{list-style:none;border-top:1px solid var(--bs-line);margin:0;padding:0}
.bs-doclist li{border-bottom:1px solid var(--bs-line);margin:0}
.bs-doclist a{display:flex;align-items:center;gap:18px;padding:16px 8px;text-decoration:none;min-height:44px;border-radius:var(--bs-r-sm);transition:background var(--bs-t-fast) var(--bs-ease),padding var(--bs-t-fast) var(--bs-ease)}
.bs-doclist a:hover{background:var(--bs-tint);padding-left:16px}
.bs-doclist .badge{font-size:var(--fs-micro);font-weight:800;letter-spacing:.1em;color:#fff;background:var(--bs-blue-ink);padding:5px 8px;flex:none;width:54px;text-align:center;border-radius:var(--bs-r-sm)}
.bs-doclist .badge.doc{background:var(--bs-navy)}
.bs-doclist .badge.ext{background:var(--bs-grey)}
.bs-doclist .name{flex:1;font-size:var(--fs-body);font-weight:600;color:var(--bs-navy);line-height:1.45}
.bs-doclist .meta{font-size:var(--fs-meta);color:var(--bs-grey);font-weight:600;flex:none;letter-spacing:.04em}
.bs-deep .bs-doclist{border-color:rgba(255,255,255,.14)}
.bs-deep .bs-doclist li{border-color:rgba(255,255,255,.14)}
.bs-deep .bs-doclist .name{color:#fff}
.bs-deep .bs-doclist .meta{color:var(--bs-on-navy-dim)}
.bs-deep .bs-doclist a:hover{background:rgba(255,255,255,.07)}
.bs-logos{margin-bottom:0!important}

/* ═══ SIATKA LOGOTYPÓW ═══ */
.bs-logogrid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--bs-line);border-left:1px solid var(--bs-line);border-radius:var(--bs-r-lg);overflow:hidden}
.bs-logogrid>div{border-right:1px solid var(--bs-line);border-bottom:1px solid var(--bs-line);aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;padding:22px;transition:background var(--bs-t-fast) var(--bs-ease)}
.bs-logogrid>div:hover{background:var(--bs-off)}
/* max-width jest konieczne: siatka ogranicza tylko wysokosc, wiec logo
   o proporcji powyzej ~3.2 (Monotch ma 3.95) przy 52px wysokosci robi
   sie szersze niz komorka i wychodzi poza swoje pole.               */
.bs-logogrid img{max-height:52px;max-width:100%;width:auto;object-fit:contain;transition:transform var(--bs-t) var(--bs-ease)}
.bs-logogrid>div:hover img{transform:scale(1.06)}
.bs-stepwrap{margin-bottom:0!important}

/* ═══ KROKI ═══ */
.bs-steps{counter-reset:s;border-top:1px solid var(--bs-line);list-style:none;margin:0;padding:0}
.bs-steps li{counter-increment:s;border-bottom:1px solid var(--bs-line);padding:24px 0 24px 64px;position:relative;margin:0}
.bs-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:26px;font-size:var(--fs-meta);font-weight:800;color:var(--bs-blue-ink);letter-spacing:.06em}
.bs-steps b{display:block;font-size:var(--fs-title);color:var(--bs-navy);margin-bottom:6px}
.bs-deep .bs-steps{border-color:rgba(255,255,255,.14)}
.bs-deep .bs-steps li{border-color:rgba(255,255,255,.14)}
.bs-deep .bs-steps b{color:#fff}
.bs-deep .bs-steps li::before{color:var(--bs-blue-lite)}
.bs-callout{background:var(--bs-tint);border-left:4px solid var(--bs-blue);border-radius:var(--bs-r-sm);padding:20px 24px;margin:24px 0;font-size:var(--fs-body);color:var(--bs-navy);line-height:1.7;max-width:none}
.bs-deep .bs-callout{background:rgba(255,255,255,.06);border-left-color:var(--bs-yellow);color:var(--bs-on-navy)}
.bs-disc{margin-bottom:0!important}
.bs-disclaimer{font-size:var(--fs-meta);color:var(--bs-grey);font-style:italic;line-height:1.7;max-width:none;margin:0}
.bs-deep .bs-disclaimer{color:var(--bs-on-navy-dim)}
.bs-stack2{display:grid!important;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.4vw,32px);align-items:start}
.bs-stack2>.et_pb_module{grid-column:1 / -1;margin-bottom:0!important}
.bs-stack2>.bs-card{grid-column:auto}
.bs-card-wide{max-width:560px}

/* ═══ RESPONSYWNOŚĆ ═══ */
@media (max-width:980px){
  .bs-logogrid{grid-template-columns:repeat(3,1fr)}
  .bs-stack2{grid-template-columns:1fr}
}
@media (max-width:767px){
  .bs-logogrid{grid-template-columns:repeat(2,1fr)}
  .bs-doclist a{flex-wrap:wrap;gap:10px}
  .bs-doclist .name{flex:1 1 100%;order:2}
  .bs-doclist .meta{order:3}
  .bs-steps li{padding-left:0;padding-top:44px}
  .bs-steps li::before{top:22px}
  
}
@media (max-width:980px){
  .bs-anchorlinks .et_pb_text_inner{gap:18px}
  .bs-anchorlinks a{font-size:var(--fs-meta);padding:16px 0}
  .bs-reslist a{padding:18px 20px;gap:14px}
}
@media (max-width:980px){
  .bs-hero-row .et_pb_column{width:100%!important;margin-bottom:0!important}
  .bs-rail{grid-template-columns:1fr;gap:20px}
  
  .bs-chips,.bs-cards{grid-template-columns:repeat(2,1fr)}
  .bs-qtrack{grid-auto-columns:calc((100% - clamp(20px,2.6vw,34px))/2)}
  .bs-stats .et_pb_column{width:33.333%!important;border-bottom:1px solid var(--bs-line)}
  .bs-footer-row .et_pb_column{width:50%!important;margin-bottom:32px!important}
  .bs-footer-row .et_pb_column:first-child{width:100%!important}
}
@media (max-width:767px){
  :root{--bs-av:104px}
  .bs-chips,.bs-cards{grid-template-columns:1fr}
  .bs-qtrack{grid-auto-columns:100%}
  .bs-stats{display:grid!important;grid-template-columns:1fr 1fr}
  /* clearfix wiersza Divi staje się w siatce dodatkową komórką */
  .bs-stats::after,.bs-stats::before{display:none!important;content:none!important}
  .bs-stats .et_pb_column{width:auto!important;max-width:none!important;min-width:0;float:none!important;margin:0!important}
  .bs-stats .et_pb_column:first-child{padding-left:var(--bs-pad)!important;padding-right:14px!important;border-right:1px solid var(--bs-line)}
  .bs-stats .et_pb_column:nth-child(2){padding-left:14px!important;padding-right:var(--bs-pad)!important;border-right:0}
  .bs-stats .et_pb_column:last-child{grid-column:1 / -1;padding-left:var(--bs-pad)!important;padding-right:var(--bs-pad)!important;border-right:0;border-bottom:0}
  .bs-footer-row .et_pb_column,.bs-footer-row .et_pb_column:first-child{width:100%!important}
  .bs-footer-bottom .et_pb_column{width:100%!important;margin-bottom:10px!important}
  .bs-fbot-right p{text-align:left}
}
@media (max-width:767px){.bs-embed{height:clamp(520px,76vh,680px)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bs-hero::before{transform:scale(1.08)!important}
}
/* per-card call to action — matches the approved mockup.
   Selected by position so the already-saved layout needs no re-import. */
.bs-cards .bs-card:nth-child(1) .et_pb_blurb_container::after{content:"Open the map \2192"}
.bs-cards .bs-card:nth-child(2) .et_pb_blurb_container::after{content:"View declarations \2192"}
.bs-cards .bs-card:nth-child(3) .et_pb_blurb_container::after{content:"Read the report \2192"}
@media (prefers-reduced-motion:reduce){.bs-timeline .card{opacity:1!important;transform:none!important}.bs-timeline::after{height:100%!important}}