:root{
  /* KOLORY MARKI */
  --bg:#0b1020;         /* tło strony */
  --fg:#e9f1ff;         /* tekst */
  --muted:#a5b3c7;      /* tekst pomocniczy */
  --primary:#2aa6ff;    /* akcent/CTA */
  --primary-700:#1c78b7;
  --card:#121a2c;       /* tła sekcji/kart */
  --border:#22314f;
  --radius:14px;
  --container:1200px;

  /* Glow aktywnej pozycji menu (podbij jak chcesz) */
  --menu-glow: .9;
}

/* Reset/utility */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,Segoe UI,Roboto,Inter,Arial}
img{max-width:100%;height:auto;display:block}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 20px}
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ================= HEADER (bez dolnej kreski, jedna linia) ================= */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(11,16,32,.9);
  backdrop-filter: blur(8px);
  transition:all .25s ease;
  border-bottom:none;     /* brak kreski */
  box-shadow:none;        /* brak cienia */
}
/* WP Admin Bar offset for fixed header */
body.admin-bar .site-header{ top:32px; }
@media (max-width: 782px){ body.admin-bar .site-header{ top:46px; } }
.header-inner{
  display:flex; align-items:center; gap:20px; flex-wrap:nowrap;
  min-height:64px; padding-block:2px 0; /* ciaśniej w pionie */
}
.main-nav{margin-left:auto}
.menu{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.menu a{
  display:inline-block; color:#e9f1ff; text-decoration:none; opacity:.92;
  padding:10px 0; line-height:1; position:relative; isolation:isolate;
}
.menu a:hover{opacity:1}

/* Glow ZA aktywną pozycją menu (WP klasy) */
.menu li.current-menu-item > a,
.menu li.current_page_item > a,
.menu li.current-menu-ancestor > a,
.menu li.current_page_ancestor > a{
  text-shadow:
    0 0 10px rgba(42,166,255, calc(var(--menu-glow)*.8)),
    0 0 20px rgba(42,166,255, calc(var(--menu-glow)*.45)),
    0 0 34px rgba(42,166,255, calc(var(--menu-glow)*.25));
}
.menu li.current-menu-item > a::before,
.menu li.current_page_item > a::before,
.menu li.current-menu-ancestor > a::before,
.menu li.current_page_ancestor > a::before{
  content:""; position:absolute; inset:-8px -14px -10px; border-radius:14px;
  z-index:-1; filter: blur(10px); opacity:.9;
  background:
    radial-gradient(110% 60% at 50% 120%, rgba(42,166,255,.35), transparent 60%),
    radial-gradient(110% 60% at 50% -20%, rgba(42,166,255,.28), transparent 60%),
    conic-gradient(from var(--a,0deg),
      rgba(255,255,255,0) 0 75%,
      rgba(255,255,255,.35) 80%,
      rgba(255,255,255,0) 90%);
  animation: menuShimmer 3.2s linear infinite;
}
@keyframes menuShimmer { to { --a: 360deg; } }
@media (prefers-reduced-motion: reduce){
  .menu li.current-menu-item > a::before,
  .menu li.current_page_item > a::before,
  .menu li.current-menu-ancestor > a::before,
  .menu li.current_page_ancestor > a::before{ animation:none; }
}

/* Logo – <img> wymuszamy na białe filtrem */
.site-header .logo img{
  width:140px; height:auto; display:block;
  filter: brightness(0) invert(1);
  transition: width .25s ease;
}
body.scrolled .site-header .logo img{ width:110px }

@media (max-width: 720px){
  .site-header .logo img{ width:90px; }
  body.scrolled .site-header .logo img{ width:70px; }
}

/* (opcjonalnie) wariant z maską favicon jako znak */
.site-header .logo .logo-mark{
  display:inline-block; width:86px; height:86px; background:#ffffff;
  -webkit-mask: url("../img/favicon.png") no-repeat center / contain;
          mask: url("../img/favicon.png") no-repeat center / contain;
  transition: width .25s ease, height .25s ease; vertical-align:middle;
}

/* About page: stack "Co daje pływanie?" items into one full-width column on mobile */
@media (max-width: 720px) {
  /* target the inline grid used in the template: .why2 .card > div */
  .why2 .card > div{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px 0 !important; /* vertical gap only */
  }

  /* ensure each benefit stretches the full width of the card */
  .why2 .card > div > *{
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* if benefits use .benefit class, make them behave nicely in one column */
  .why2 .card .benefit{
    display:flex !important;
    width:100% !important;
    gap:10px !important;
    align-items:flex-start !important;
  }
}
body.scrolled .site-header .logo .logo-mark{ width:62px; height:62px }
@supports not ((-webkit-mask: url("")) or (mask: url(""))){
  .site-header .logo .logo-mark{
    background:transparent url("../img/favicon.png") no-repeat center / contain;
    filter: brightness(0) invert(1);
  }
}
/* Logo + napis */
.site-header .logo{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; line-height:1; }
.site-header .logo .logo-text{ color:#e9f1ff; font-weight:700; letter-spacing:.02em; font-size:28px; white-space:nowrap; }
body.scrolled .site-header .logo .logo-text{ font-size:24px }

/* Przycisk Zaloguj – PILL */
.btn-login{
  display:inline-flex; align-items:center; justify-content:center;
  appearance:none; border:2px solid var(--primary); background:transparent; color:#e9f1ff;
  border-radius:999px; padding:10px 16px; font-weight:600; letter-spacing:.02em; cursor:pointer;
  transition: background .2s, color .2s, transform .2s, box-shadow .3s;
  margin-left:20px; line-height:1;
}
.btn-login:hover{ background:var(--primary); color:#04121f; transform: translateY(-1px); box-shadow:0 6px 18px rgba(42,166,255,.35); }

@media (max-width: 1024px){
  .btn-login{ display: none !important; }
}

/* Login dropdown */
.login-wrap{position:relative}
.login-panel{
  position:absolute;right:0;top:calc(100% + 12px);width:320px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.4);display:none
}
.login-panel.open{display:block}
.login-panel h3{margin:0 0 6px}
.login-panel .muted{color:var(--muted);margin:0 0 12px;font-size:.95rem}
.login-panel label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.login-panel input{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#0b1328;color:var(--fg)}
.link-like{background:none;border:none;color:var(--muted);cursor:not-allowed;padding:8px 0}

/* shrink po scrollu */
body.scrolled .site-header{background:rgba(11,16,32,.92)}
body.scrolled .header-inner{min-height:60px}

/* Mobile nav */
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--border);border-radius:12px;padding:8px 12px;color:#e9f1ff}
@media (max-width:1024px){
  .nav-toggle{display:block}
  .main-nav{
    position:fixed;inset:72px 0 auto 0;
    background:rgba(11,16,32,.98);
    transform:translateY(-120%);
    transition:transform .25s ease
  }
  .main-nav.open{transform:none}
  .menu{flex-direction:column;padding:16px}
}

/* Spacing względem fixed header */
.site-main{padding-top:66px}
body.scrolled .site-main{padding-top:58px}

/* ================= HERO ================= */
.hero{
  padding: clamp(60px,8vw,120px) 0;
  background:linear-gradient(180deg, rgba(42,166,255,.06), transparent)
}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero .eyebrow{color:var(--primary);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.hero h1{margin:0 0 12px;font-size: clamp(28px,4.5vw,48px);line-height:1.1}
.hero .lead{color:#d7e4ff;margin:0 0 18px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.hero .btn{padding:12px 18px}
@media (max-width:1024px){.hero-inner{grid-template-columns:1fr}}

/* ================= Buttons ================= */
.btn{display:inline-block;border-radius:12px;border:1px solid var(--border);padding:10px 16px;text-decoration:none;color:var(--fg)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#04121f}
.btn.primary:hover{background:var(--primary-700);border-color:var(--primary-700);color:#fff}
.btn.ghost{background:transparent}
.btn.small{padding:8px 12px}
.btn-pill{
  appearance:none;border:2px solid var(--primary);background:transparent;color:var(--fg);
  border-radius:999px;padding:12px 18px;font-weight:600;letter-spacing:.02em;
  transition: background .2s, color .2s, transform .2s, box-shadow .3s;text-decoration:none;display:inline-block;
}
.btn-pill:hover{background:var(--primary);color:#04121f;transform: translateY(-1px);box-shadow:0 6px 18px rgba(42,166,255,.35)}

/* ================= ABOUT ================= */
.about{padding:80px 0}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.about .ticks{margin:16px 0 0; padding-left:18px}
.about .ticks li{margin:6px 0}
.about video{width:100%;border-radius:var(--radius);border:1px solid var(--border);background:#000}
@media (max-width:1024px){.about-inner{grid-template-columns:1fr}}

/* ================= OFFER ================= */
.offer{padding:80px 0;background:linear-gradient(180deg, transparent, rgba(42,166,255,.06))}
.offer h2{margin-top:0}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
@media (max-width: 720px) {
  .card {
    overflow-x: auto;
  }
}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.card h3{margin:12px 16px}
.card p{margin:0 16px 16px;color:var(--muted)}
.card .btn{margin:0 16px 16px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* ================= CTA ================= */
.cta{padding:60px 0}
.cta-inner{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:28px;display:grid;gap:8px;justify-items:center;text-align:center
}
.cta .cta-inner, .cta .cta-inner h2, .cta .cta-inner p{ color:#ffffff; }

/* ================= SOCIAL PROOF ================= */
.social-proof{padding:80px 0}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{border-radius:12px;aspect-ratio:1/1;object-fit:cover}
@media (max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
.opinions{margin-top:20px;display:grid;gap:10px}
blockquote{margin:0;padding:16px;border-left:3px solid var(--primary);background:var(--card);border-radius:12px}

/* ================= CONTACT ================= */
.contact{ padding:80px 0; background:linear-gradient(180deg, rgba(42,166,255,.06), transparent) }
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.form label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.form input,.form textarea{padding:12px;border-radius:10px;border:1px solid var(--border);background:#0b1328;color:var(--fg)}
.form .hidden{display:none}
.ok{background:#12361f;border:1px solid #1f6b34;color:#95e0a6;padding:8px 12px;border-radius:10px}
.err{background:#3a0f12;border:1px solid #792027;color:#ffb3b3;padding:8px 12px;border-radius:10px}
@media (max-width:1024px){.contact-inner{grid-template-columns:1fr}}

/* ================= FOOTER ================= */
.site-footer{padding:40px 0;background:#0a0f1c}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px}
.copy{margin-top:16px;color:var(--muted)}
@media (max-width:900px){.footer-cols{grid-template-columns:1fr}}
/* Social list */
.site-footer .social{list-style:none;margin:0;padding-left:0}
.site-footer .social li{margin:6px 0}
/* Link style: white default, blue on hover, no underline */
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ color:var(--primary); text-decoration:none; }
@media (max-width:600px){
  .site-footer .social{display:flex;gap:12px;padding-left:0}
  .site-footer .social li{margin:0}
}

/* ================= SEPARATOR PNG ================= */
.sep-img{
  --sep-h: 90px;
  position: relative; z-index: 100; isolation: isolate;
  height: var(--sep-h);
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: calc(var(--sep-h) * -0.5);
  margin-bottom: calc(var(--sep-h) * -0.5);
  background: transparent url("../img/separator-wave.png") repeat-x center / auto 100%;
  pointer-events: none;
}
.sep-img.bottom{ transform: scaleY(-1); }

/* Utility */
.muted{color:var(--muted)}

/* ================== BOOKING MODAL (aqua-modal) ================== */
.aqua-modal{position:fixed;inset:0;z-index:2000;display:none;place-items:center}
.aqua-modal.open{display:grid}
.aqua-modal .backdrop{
  position:absolute;inset:0;background:rgba(5,9,18,.65);backdrop-filter:blur(6px)
}
.aqua-modal .panel{
  position:relative; z-index:1; width:min(920px, 92vw); max-height:84vh; overflow:auto;
  margin:8vh auto; padding:0; background:rgba(18,26,44,.94);
  border:1px solid var(--border); border-radius:20px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  color:var(--fg);
}
/* header panelu */
.aqua-modal .panel > header{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; background:linear-gradient(180deg,rgba(11,16,32,.98),rgba(11,16,32,.92));
  border-bottom:1px solid var(--border)
}
.aqua-modal #bkTitle{margin:0;font-size:1.06rem;letter-spacing:.02em}
.aqua-modal .toolbar{display:flex;gap:10px;align-items:center}
.aqua-modal .toolbar a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  text-decoration:none;border:1px solid var(--border);color:var(--fg);opacity:.9}
.aqua-modal .toolbar a:hover{opacity:1;background:rgba(255,255,255,.05)}
.aqua-modal .close,[data-close]{appearance:none;border:1px solid var(--border);background:transparent;color:var(--fg);
  padding:8px 12px;border-radius:12px;cursor:pointer}
.aqua-modal .close:hover{background:rgba(255,255,255,.06)}

.aqua-modal .body{padding:18px}

/* Kafelek/sekcja */
.aqua-card{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:14px;padding:16px}
.aqua-muted{color:var(--muted);font-size:.92rem}

/* układ kolumn w wierszu */
.aqua-modal .row{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
@media (max-width:900px){.aqua-modal .row{grid-template-columns:1fr}}

/* przełącznik trybów */
.aqua-seg{display:flex;gap:8px;flex-wrap:wrap}
.aqua-seg .seg{
  appearance:none;border:1px solid var(--border);background:transparent;color:var(--fg);
  border-radius:999px;padding:10px 14px;cursor:pointer;font-weight:600;
  transition:background .2s,box-shadow .2s,border-color .2s,color .2s
}
.aqua-seg .seg[aria-pressed="true"]{
  background:var(--primary);border-color:var(--primary);color:#04121f;
  box-shadow:0 8px 22px rgba(42,166,255,.35)
}

/* formularze */
.aqua-form label{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.aqua-form .inline{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
@media (max-width:800px){.aqua-form .inline{flex-direction:column;align-items:stretch}}
.aqua-form input[type="text"],.aqua-form input[type="number"],.aqua-form input[type="email"],.aqua-form select{
  padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:#0b1328;color:var(--fg)
}
.aqua-form .hint{color:var(--muted);font-size:.88rem}

/* lista osób – pionowo (family) */
.family-list{display:grid;grid-template-columns:1fr;gap:10px}
.family-list .person{background:rgba(255,255,255,.02);border:1px dashed var(--border);border-radius:12px;padding:12px}
.family-list .person h5{margin:0 0 6px;font-size:.95rem;color:#cfe2ff}

/* harmonogram – podgląd (używany w trybie single/general w opisie) */
.schedule{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin-bottom:12px}
@media (max-width:900px){.schedule{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.schedule{grid-template-columns:repeat(2,1fr)}}
.schedule .day{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:10px}
.schedule .day h4{margin:0 0 8px;font-size:1rem;opacity:.9}
.schedule .slot{background:#0b1328;border:1px solid var(--border);border-radius:10px;padding:8px 10px;font-size:.95rem;margin-bottom:8px}
.schedule .slot:last-child{margin-bottom:0}



/* stopka panelu */
.aqua-modal .footer{
  position:sticky;bottom:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 18px;border-top:1px solid var(--border);
  background:linear-gradient(180deg,rgba(11,16,32,.9),rgba(11,16,32,.96))
}
.aqua-modal .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  font-size:.9rem;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--fg)}
.aqua-modal .btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;border:1px solid var(--border);text-decoration:none;color:var(--fg)}
.aqua-modal .btn.primary{background:var(--primary);border-color:var(--primary);color:#04121f}
.aqua-modal .btn.primary[disabled]{opacity:.5;cursor:not-allowed}
.aqua-modal .is-invalid{
  border-color:#7b1c1c !important;
  box-shadow:0 0 0 2px rgba(255,77,77,.18) !important;
}
.aqua-modal .person h5{ margin:0 0 6px; font-size:.95rem; color:#cfe2ff }

/* === Scrollspy dla pozycji menu z # (np. #kontakt) === */
/* 1) wyłącz poświatę WP dla odnośników z # */
.menu li.current-menu-item > a[href*="#"],
.menu li.current_page_item > a[href*="#"],
.menu li.current-menu-ancestor > a[href*="#"],
.menu li.current_page_ancestor > a[href*="#"]{
  text-shadow:none;
}
.menu li.current-menu-item > a[href*="#"]::before,
.menu li.current_page_item > a[href*="#"]::before,
.menu li.current-menu-ancestor > a[href*="#"]::before,
.menu li.current_page_ancestor > a[href*="#"]::before{
  content:none;
}

/* 2) poświata tylko gdy JS doda .is-active */
.menu a.is-active{
  --glow:.9;
  position:relative; isolation:isolate;
  text-shadow:
    0 0 10px rgba(42,166,255, calc(var(--glow)*.8)),
    0 0 20px rgba(42,166,255, calc(var(--glow)*.45)),
    0 0 34px rgba(42,166,255, calc(var(--glow)*.25));
}
.menu a.is-active::before{
  content:"";
  position:absolute; inset:-8px -14px -10px; border-radius:14px; z-index:-1;
  filter:blur(10px); opacity:.9;
  background:
    radial-gradient(110% 60% at 50% 120%, rgba(42,166,255,.35), transparent 60%),
    radial-gradient(110% 60% at 50% -20%, rgba(42,166,255,.28), transparent 60%),
    conic-gradient(from var(--a,0deg),
      rgba(255,255,255,0) 0 75%,
      rgba(255,255,255,.35) 80%,
      rgba(255,255,255,0) 90%);
  animation: menuShimmer 3.2s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .menu a.is-active::before{ animation:none; }
}

/* ====== RESPONSYWNOŚĆ – UJEDNOLICONE BREAKPOINTY ====== */

/* <= 1100 px — siatki 1 kolumna tam gdzie trzeba */
@media (max-width: 1100px){
  .tiers-grid,
  .faq-grid,
  .cards { grid-template-columns: 1fr; }
}

/* <= 1024 px — menu mobilne już działa; dopinamy kilka detali */
@media (max-width: 1024px){
  .hero-inner{ grid-template-columns: 1fr; }
  .about-inner,
  .contact-inner{ grid-template-columns: 1fr; }
  .login-panel{ right: 12px; }
}

/* <= 900 px — galerie 2 kolumny, ciaśniejsze odstępy */
@media (max-width: 900px){
  .gallery{ grid-template-columns: repeat(2,1fr); }
  .stats .container{ grid-template-columns: 1fr; gap: 14px; }
  .cards{ grid-template-columns: 1fr; }
}

/* <= 720 px — typografia/spacing, tap-targety; HERO extra padding; OFERTA: przycisk wyśrodkowany */
@media (max-width: 720px){
  .container{ padding: 0 14px; }
  body{ font-size: 15px; }
  .hero h1{ font-size: clamp(26px, 7.5vw, 40px); }

  /* globalnie szerokie przyciski na mobile */
      .btn, .btn.primary, .btn-pill{ width: 100%; text-align: center; }
      /* WYJĄTEK: w kartach oferty przycisk NIE jest szeroki i jest wyrównany do lewej */
      .offer .card .btn,
      .offer .card a.btn,
      .offer .card button.btn{
        width: auto !important;
        display: inline-flex !important;
        margin: 0 0 16px 16px !important;
        padding: 9px 16px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
        float: none !important;
        max-width: none !important;
      }
  .hero .cta-row{ gap: 10px; }
  .header-inner{ min-height: 64px; }
  .site-main{ padding-top: 66px; }

  /* więcej miejsca na dole hero – nie nachodzi na „scroll down”/falę/logo */
  .hero{ padding-bottom: 120px; }

  /* WYJĄTEK: w kartach oferty przycisk ma być mniejszy i wyśrodkowany */
    /* Usunięto wyśrodkowanie i szerokość auto, bo przycisk ma być z lewej */
}

/* <= 600 px — dodatkowe kosmetyki (separator i social już wyżej) */
@media (max-width: 600px){
  /* delikatnie mniejsze fale, by nie zachodziły na treść */
  .sep-img{ --sep-h: 80px; margin-top: calc(var(--sep-h) * -0.35); margin-bottom: calc(var(--sep-h) * -0.35); }
}

/* --- Last-resort overrides: ensure offer card buttons remain compact and left-aligned on small screens --- */
@media (max-width: 720px){
  /* Very specific selectors and !important to beat other mobile rules */
  .offer .cards .card .btn,
  .offer .cards .card a.btn,
  .offer .cards .card button.btn{
    width: auto !important;
    display: inline-flex !important;
    margin: 0 0 16px 16px !important;
    padding: 9px 16px !important;
    max-width: none !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Ensure parent containers don't clip or force full-width via flex/width */
  .offer .cards .card {
    overflow: visible !important;
  }
}

/* Compact helper for specific buttons inside offer cards */
@media (max-width: 720px){
  .offer .cards .card .btn-small,
  .offer .cards .card a.btn-small{
    width: auto !important;
    display: inline-flex !important;
    margin: 8px 0 16px 16px !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
    max-width: none !important;
    text-align: center !important;
  }
}

/* Make contact social icons horizontal on small screens */
@media (max-width: 720px) {
  .contact-socialbar{
  flex-direction: row !important; /* horizontal */
  justify-content: center !important;
    align-items: center !important;
    padding: 12px 14px !important;
    gap: 12px !important;
  }
  .contact-socialbar a{
    width: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    margin: 0 !important; /* remove vertical margins used in column layout */
    display:inline-flex !important; align-items:center !important; justify-content:center !important;
  }
}

/* Team: reduce member photo size by 50% on mobile to save space */
@media (max-width: 720px) {
  .team .member img{
  width: 50% !important;
  height: auto !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  aspect-ratio: 1 / 1 !important; /* make square so border-radius yields a circle */
  object-fit: cover !important;
  object-position: top center !important; /* align image to top to avoid cutting heads */
  border-radius: 9999px !important; /* circular */
  overflow: hidden !important;
  }
  .team .member .info{
    padding-top: 12px !important;
  }
}