:root{
  --primary:#02808E;
  --accent:#35BAC9;
  --light:#A8C9D0;

  /* aliasy kompatybilne (żeby nie poprawiać 200 linii) */
  --red: var(--primary);
  --green: var(--accent);
  --blue: var(--light);

  --bg:#0b0d10;
  --card:#11151b;
  --text:#e9eef5;
  --muted:#a7b2c2;
  --border:rgba(255,255,255,.10);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
  radial-gradient(1200px 800px at 20% 0%, rgba(53,186,201,.18), transparent 60%),
  radial-gradient(900px 700px at 90% 10%, rgba(2,128,142,.20), transparent 55%),
  radial-gradient(900px 700px at 50% 100%, rgba(168,201,208,.18), transparent 55%),
  var(--bg);

  color:var(--text);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1140px, 92%); margin:0 auto}

.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(11,13,16,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.header__inner{
  display:flex; align-items:center; gap:14px;
  padding:12px 0;
}
.logo{display:flex; align-items:center; gap:10px; min-width: 220px}
.logo__mark{
  width:46px; height:46px; border-radius:10px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset,
              0 4px 12px rgba(190,15,15,.3);
}
.logo__text{font-weight:700; letter-spacing:.2px}

.nav{display:flex; gap:18px; align-items:center; margin-left:auto}
.nav a{
  color:var(--muted);
  transition: all .3s ease;
  position: relative;
}
.nav a::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), var(--blue));
  transition: width .3s ease;
}
.nav a:hover{
  color:var(--text);
}
.nav a:hover::after{
  width: 100%;
}
.nav__cta{
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color: var(--text);
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
}
.nav__cta::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(78,164,202,.3), transparent);
  transform: translate(-50%, -50%);
  transition: width .5s ease, height .5s ease;
}
.nav__cta:hover::before{
  width: 300px;
  height: 300px;
}
.nav__cta:hover{
  border-color: rgba(78,164,202,.6);
  transform: translateY(-2px);
}

.lang{display:flex; gap:8px; align-items:center}
.lang__btn{
  width:34px; height:28px;
  display:grid; place-items:center;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  transition: all .3s ease;
  cursor: pointer;
}
.lang__btn:hover{
  transform: scale(1.1);
  background: rgba(255,255,255,.08);
}
.lang__btn.is-active{
  outline:2px solid rgba(78,164,202,.55);
  box-shadow: 0 0 12px rgba(78,164,202,.4);
}
.lang__btn img{border-radius:3px}

.burger{
  display:none;
  width:44px; height:40px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  transition: all .3s ease;
}
.burger:hover{
  background: rgba(255,255,255,.1);
  transform: scale(1.05);
}
.burger span{display:block;height:2px;margin:6px 10px;background:rgba(255,255,255,.8);transition: all .3s ease}

.hero{padding:82px 0 10px}
.hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:center}
.hero h1{font-size: clamp(28px, 4vw, 44px); margin:0 0 12px}
.lead{color:var(--muted); font-size: 16px; line-height:1.6; margin:0 0 18px}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap}
.hero__media{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.03);
  transition: transform .3s ease;
}
.hero__media:hover{
  transform: scale(1.02);
}
.hero__media img{width:100%; height:400px; object-fit:cover}

.badges{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.badge{
  border:1px solid var(--border);
  padding:10px 16px;
  border-radius:12px;
  color:var(--text);
  background: rgba(255,255,255,.06);
  transition: all .3s ease;
  font-weight: 500;
}
.badge:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
}
.badge--red{
  background: rgba(2,128,142,.14);
  border-color: rgba(2,128,142,.35);
}
.badge--red:hover{
  background: rgba(2,128,142,.22);
  border-color: rgba(2,128,142,.55);
  box-shadow: 0 4px 14px rgba(2,128,142,.35);
}

.badge--green{
  background: rgba(53,186,201,.14);
  border-color: rgba(53,186,201,.35);
}
.badge--green:hover{
  background: rgba(53,186,201,.22);
  border-color: rgba(53,186,201,.55);
  box-shadow: 0 4px 14px rgba(53,186,201,.35);
}

.badge--blue{
  background: rgba(78,164,202,.12);
  border-color: rgba(78,164,202,.3);
}
.badge--blue:hover{
  background: rgba(78,164,202,.2);
  border-color: rgba(78,164,202,.5);
  box-shadow: 0 4px 12px rgba(78,164,202,.25);
}

.section{padding:56px 0}
.section--alt{
  background: rgba(255,255,255,.02);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section__head{margin-bottom:18px}
.section__head h2{margin:0 0 8px; font-size: clamp(22px, 3vw, 30px)}
.section__head p{margin:0; color:var(--muted); line-height:1.6}

.cards{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px}
.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding:18px;
  transition: all .3s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0,0,0,.5);
  border-color: rgba(255,255,255,.15);
}
.card--img {
  padding: 0;
  overflow: hidden;
  position: relative;
}

/* obraz */
.card--img img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  transition: transform .6s ease;
}

.card--img:hover img {
  transform: scale(1.08);
}

/* overlay */
.card__overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 18px 22px;

  background: var(--primary);

  color: #fff;

  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* tytuł */
.card__overlay h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* opis */
.card__overlay p {
  margin: 6px 0 0;
  font-size: .95rem;
  line-height: 1.5;
  opacity: .95;
}
.card__icon{
  width:44px; height:44px; border-radius:14px;
  background: rgba(78,164,202,.15);
  border: 1px solid rgba(78,164,202,.3);
  box-shadow: 0 4px 12px rgba(78,164,202,.2);
  margin-bottom:10px;
  display: grid;
  place-items: center;
}

.list{margin:12px 0 0; padding-left:18px; color:var(--muted); line-height:1.7}
.list strong{color:var(--text)}

.tiles{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
  margin-top:16px;
}
.tile{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  transition: all .3s ease;
}
.tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 15px 40px rgba(0,0,0,.5);
}
.tile img{height:250px; width:100%; object-fit:cover; filter:saturate(1.05); transition: all .5s ease}
.tile:hover img{transform: scale(1.1); filter:saturate(1.2)}
.tile__label{
  position:absolute;
  left:0px;
  bottom:12px;
  padding:10px 32px;
  background: rgba(11,13,16,.75);
  backdrop-filter: blur(8px);
  transition: all .3s ease;
}
.tile:hover .tile__label{
  background: rgba(11,13,16,.9);
  transform: translateY(-4px);
}

.tile__title {
    z-index: 3;
  position: absolute;
  top: 0;
  right: 0;

  width: 260px;            /* ‹ kluczowe */
  padding: 18px 22px;

  background: var(--accent);
  color: #fff;

  //border-radius: 0 var(--radius) 0 0; /* zamiast 0 20px */
  border-radius: 0px 0px 0px 35px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);

  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;

  text-align: center;
  white-space: nowrap;     /* trzyma jedną linię */
  overflow: hidden;
  text-overflow: ellipsis; /* gdyby coś było za długie */
}

/* modyfikatory */
.tile__title--accent {
  background: var(--accent);
}

.tile__title--light {
  background: var(--light);
}

.tile__title--primary {
  background: var(--primary);
}

.mapbox{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.mapbox iframe{width:100%; height:360px; border:0}

.contact{display:grid; grid-template-columns: .9fr 1.1fr; gap:16px}
.infoBox{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding:18px;
}
.infoLine{margin-top:10px; color:var(--muted)}
.infoLine span{color:var(--text); display:inline-block; min-width:90px}

.form{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  padding:18px;
  display:grid;
  gap:10px;
}
input, textarea{
  width:100%;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(11,13,16,.55);
  color: var(--text);
  outline:none;
  transition: all .3s ease;
}
input:focus, textarea:focus{
  border-color: rgba(78,164,202,.6);
  box-shadow: 0 0 0 3px rgba(78,164,202,.15);
}
.checkbox{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:14px}
.checkbox input{width:auto; margin-top:3px}
.form__result{min-height:20px; color:var(--muted)}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid var(--border);
  cursor:pointer;
  background: rgba(255,255,255,.05);
  color: var(--text);
  transition: all .3s ease;
  position: relative;
  overflow: hidden;
  font-weight: 500;
}
.btn::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  transform: translate(-50%, -50%);
  transition: width .6s ease, height .6s ease;
}
.btn:hover::before{
  width: 400px;
  height: 400px;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
  border-color: rgba(255,255,255,.2);
}
.btn:active{
  transform: translateY(0);
}
.btn--primary{
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 6px 20px rgba(2,128,142,.45);
  font-weight: 600;
}

.btn--primary::before{
  background: rgba(255,255,255,.15);
}
.btn--primary:hover{
  background: linear-gradient(135deg, #0296a6, #42c9d7);
  box-shadow: 0 8px 26px rgba(2,128,142,.6);
}
.btn--ghost{
  background: rgba(255,255,255,.04);
}
.btn--ghost:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(78,164,202,.4);
  box-shadow: 0 0 20px rgba(78,164,202,.2);
}

.footer{
  border-top:1px solid var(--border);
  padding:26px 0;
  background: rgba(0,0,0,.18);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .9fr .4fr;
  gap:16px;
  align-items:start;
}
.footer__brand{font-weight:800; margin-bottom:6px}
.footer__muted{color:var(--muted); line-height:1.6}
.footer__links{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.footer__links a{
  transition: all .3s ease;
  padding: 4px 0;
}
.footer__links a:hover{
  color: var(--text);
  padding-left: 8px;
}
.footer__bottom{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border);
  margin-top:16px; padding-top:14px;
  color:var(--muted);
}

.cookie{
  position:fixed; left:16px; right:16px; bottom:16px;
  display:none;
  z-index:100;
  animation: slideUp .4s ease;
}
.cookie.is-open{display:block}
.cookie__inner{
  width:min(920px, 100%);
  margin:0 auto;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(11,13,16,.88);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.cookie__inner p{margin:6px 0 0; color:var(--muted)}
.cookie__actions{display:flex; gap:10px; flex-wrap:wrap}

@keyframes slideUp{
  from{
    transform: translateY(100px);
    opacity: 0;
  }
  to{
    transform: translateY(0);
    opacity: 1;
  }
}

/* RESPONSIVE */
@media (max-width: 980px){
  .hero__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .nav{display:none}
  .burger{display:block; margin-left:auto}
  .header__inner{gap:10px}
  .lang{order:3}
}

.nav.is-open{
  display:flex;
  position:absolute;
  left:4%;
  right:4%;
  top:64px;
  flex-direction:column;
  padding:12px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(11,13,16,.95);
  animation: slideDown .3s ease;
}

@keyframes slideDown{
  from{
    transform: translateY(-20px);
    opacity: 0;
  }
  to{
    transform: translateY(0);
    opacity: 1;
  }
}

/* === MOBILE FIX (ANDROID) === */
html, body { overflow-x: hidden; }

@media (max-width: 980px){
  .header__inner{
    flex-wrap: nowrap;     /* trzymamy w 1 linii */
    gap: 8px;
  }

  .logo{
    min-width: 0 !important;     /* <<< to było głównym winowajcą */
    flex: 1 1 auto;
    max-width: calc(100% - 120px); /* miejsce na flagi + burger */
  }

  .logo__text{
    font-size: 14px;
    line-height: 1.15;
    white-space: nowrap;   /* nie rozpycha na 2 linie */
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .lang{
    flex: 0 0 auto;
    gap: 6px;
  }

  .lang__btn{
    width: 30px;
    height: 26px;
    border-radius: 10px;
  }
  .lang__btn img{
    width: 20px;
    height: 14px;
  }

  .burger{
    flex: 0 0 auto;
    margin-left: 0; /* bo logo już bierze flex:1 */
  }
}

/* jeszcze ciaśniej (małe telefony) */
@media (max-width: 420px){
  .logo__text{ font-size: 13px; }
  .lang__btn{ width: 28px; height: 24px; }
}
/* ===== SECTION TITLES WITH DOTS ===== */

.section__title{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 6px;
}

/* reuse brand dots */
.dots{
  display:flex;
  gap:6px;
  flex-shrink:0;
}

.dot{
  width:10px;
  height:10px;
  border-radius:999px;
}

.dot.r{ background: var(--red); }
.dot.g{ background: var(--green); }
.dot.b{ background: var(--blue); }

/* h2 alignment fix */
.section__title h2{
  margin:0;
}

/* mobile: trochę ciaśniej */
@media (max-width: 600px){
  .section__title{
    gap:10px;
  }
  .dot{
    width:8px;
    height:8px;
  }
}
.section:hover .dots .dot{
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
}
.btn--primary{
  background-clip: padding-box;
}

/* =======================
   ANDROID / MOBILE FIXES
   ======================= */
@media (max-width: 560px){

  /* --- HEADER: logo + wysokość --- */
  .header{
    /* jeżeli masz fixed header, to i tak musi być czytelny */
  }

  .header__inner{
    gap: 10px;
    align-items: center;
  }

  .logo{
    min-width: 0;          /* pozwala zwężać */
    flex: 1 1 auto;
    display:flex;
    align-items:center;
    gap: 10px;
  }

  /* ikonka/logo po lewej */
  .logo__mark,
  .logo img{
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px;
    object-fit: contain;
  }

  /* tekst firmy nie może się rozjeżdżać */
  .logo__text{
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* --- KAFLE / OBRAZKI: nic nie ucinamy --- */

  /* jeśli masz <img> w kartach/ofertach */
  .offer img,
  .tile img,
  .card img{
    display:block;
    max-width:100%;
    height:auto;          /* klucz: nie wymuszaj stałej wysokości */
  }

  /* jeżeli obrazek jest w wrapperze z overflow:hidden */
  .offer__media,
  .tile__media,
  .card__media{
    overflow: hidden;
    border-radius: 18px;
  }

  /* jeżeli gdzieś masz ustawione stałe height dla obrazka */
  .offer__media img,
  .tile__media img,
  .card__media img{
    width:100%;
    height:auto !important;
    object-fit: cover;
  }

  /* jeżeli podpis/tekst na obrazku jest jako overlay */
  .tile__overlay,
  .offer__overlay{
    padding: 14px 14px;   /* więcej oddechu */
    max-width: 92%;
  }

  .tile__overlay h3,
  .offer__overlay h3{
    font-size: 20px;      /* mniejsze na mobile */
    line-height: 1.15;
    margin: 0;
    white-space: normal;  /* pozwól zawijać */
  }
}

/* FIX: główny kafel z obrazem – nie przycinaj napisu */
@media (max-width: 600px){

  .card--img{
    overflow: hidden;
  }

  .card--img img{
    width: 100%;
    height: auto !important;   /* <<< kluczowe */
    min-height: 0;
  }

  .card--img .card__overlay{
    position: relative;        /* <<< zamiast absolute */
    left: auto;
    right: auto;
    bottom: auto;
    max-width: 100%;
    padding: 16px;
    background:
      linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.65));
  }

  .card--img .card__overlay h3{
    font-size: 20px;
    line-height: 1.2;
    white-space: normal;       /* <<< pozwól łamać */
  }

  .card--img .card__overlay p{
    font-size: 15px;
    line-height: 1.5;
  }
}
/* Tiles: mniejsze napisy na mobile i mniej nachodzenia na zdjęcie */
@media (max-width: 600px){

  .tile__label{
    font-size: 14px;
    line-height: 1.15;
    padding: 10px 12px;
    max-width: 88%;
    white-space: normal;      /* pozwól łamać, zamiast rozpychać */
  }

  /* jeżeli label jest overlay na dole */
  .tile{
    position: relative;
  }
  .tile__label{
    bottom: 10px;             /* mniej wchodzi w środek */
    left: 10px;
    right: auto;
  }
}
.form__result {
  margin-top: 15px;
  font-size: 14px;
}

.form-success {
  padding: 12px;
  background: #e6f6ec;
  color: #0f5132;
  border: 1px solid #badbcc;
  border-radius: 6px;
}

.form-error {
  padding: 12px;
  background: #fdecea;
  color: #842029;
  border: 1px solid #f5c2c7;
  border-radius: 6px;
}

.hr_colors {
  width: 100%;
  max-width: 520px; /* opcjonalnie */
  height: 2px;
  background: linear-gradient(
  90deg,
  var(--red),
  var(--green),
  var(--blue)
);
  margin: 1.5rem 0;
  opacity: 0.9;
}

.footer__langs{
  justify-content: flex-end; /* wyrównanie do prawej w kolumnie */
  margin-top: 2px;
}

@media (max-width: 820px){
  .footer__grid{
    grid-template-columns: 1fr;
  }
  .footer__langs{
    justify-content: flex-start; /* albo center */
  }
  .footer__bottom{
    flex-direction: column;
    gap: 10px;
    align-items: flex-start; /* albo center */
  }
}

@media (max-width: 768px){
  .tiles{
    grid-template-columns: 1fr;
  }
}
/* ===== A11Y controls ===== */
.a11y{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left:12px;
}

.a11y__btn{
  border:1px solid rgba(255,255,255,.25);
  background:transparent;
  color:inherit;
  padding:8px 10px;
  border-radius:10px;
  font:inherit;
  line-height:1;
  cursor:pointer;
}

.a11y__btn:focus{
  outline:2px solid currentColor;
  outline-offset:2px;
}

/* ===== font scaling (global) ===== */
:root{
  --font-scale: 1;
}

html{
  font-size: calc(16px * var(--font-scale));
}

/* ===== high contrast mode ===== */
body.is-contrast{
  background:#000 !important;
  color:#fff !important;
}

body.is-contrast a{
  color:#fff !important;
  text-decoration: underline;
}

body.is-contrast .card,
body.is-contrast .card__overlay,
body.is-contrast .tile__title--primary,
body.is-contrast .tile__title--accent,
body.is-contrast .tile__title--light,
body.is-contrast .badge,
body.is-contrast .section,
body.is-contrast .header,
body.is-contrast .footer{
  background:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
}

body.is-contrast .hr_colors,
body.is-contrast .dot
{
    background:#fff !important;
}

body.is-contrast .btn--primary
{
    box-shadow: none;
}

body.is-contrast .btn,
body.is-contrast button,
body.is-contrast input,
body.is-contrast textarea{
  background:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
}
/* ===== high contrast: FIX for fixed/blur header on mobile ===== */
body.is-contrast .header{
  background:#000 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-contrast .nav.is-open{
  background:#000 !important;
}
body.is-contrast .nav__cta,
body.is-contrast .lang__btn,
body.is-contrast .burger,
body.is-contrast .tile,
body.is-contrast .tile__label,
body.is-contrast .cookie__inner,
body.is-contrast .infoBox,
body.is-contrast .form{
  background:#000 !important;
  border-color:#fff !important;
  color:#fff !important;
  box-shadow:none !important;
}
/* A11Y w menu mobilnym */
.nav__a11y{
  display:none;
  gap:8px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
}

@media (max-width: 980px){
  .a11y{ display:none !important; }  /* <<< NA SZTYWNO */
  .nav__a11y{
    display:flex;
    flex-wrap:wrap;
  }
  .nav__a11y .a11y__btn{
    flex:1 1 auto;
    justify-content:center;
  }
}