/* MEN'S CLUB — the look of the old Breakdance site (black, red, gold, system font), without the builder. */
:root {
  --bg: #000; --text: #fff; --muted: #b1b1b1;
  --red: #da2e2e; --red-dark: #520000; --red-hot: #ff0202;
  --gold: #b79d00; --gold-dark: #9e8500;
  --grey: #2f2e2e; --grey-line: #a3a3a3;
  --green: #0da532; --green-dark: #0c6f00;
  --tg: #2aabee; --purple: #6b0064;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font); letter-spacing: -.01em; }
body.locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.ic { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border-radius: 3px;
  font: 500 16px/1 var(--font); color: #fff; background: var(--grey); border: 1px solid transparent; transition: filter .2s, transform .2s; cursor: pointer; }
.btn:hover { filter: brightness(1.15); }
.btn.red { background: var(--red); }
.btn.tg { background: var(--tg); }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.5); }

/* header */
.hdr { position: relative; z-index: 50; background: #000; }
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 105px; }
.hlogo, .htel { display: none; }
.hnav { display: flex; flex: 1; justify-content: space-around; }
.hnav a { font-size: 25px; line-height: 25px; padding: 20px; transition: color .2s; }
.hnav a:hover, .hnav a[aria-current] { color: var(--red-hot); }
.burger { display: none; background: none; border: 0; color: #fff; padding: 8px; cursor: pointer; }
.burger .ic { width: 32px; height: 32px; }
.mmenu { position: fixed; inset: 0; z-index: 60; background: #000; padding: 72px 24px 24px; display: flex; flex-direction: column; gap: 18px;
  transform: translateX(100%); transition: transform .3s; overflow-y: auto; }
.mmenu.on { transform: none; }
.mmenu nav { display: flex; flex-direction: column; }
.mmenu nav a { font-size: 24px; padding: 10px 0; border-bottom: 1px solid #222; }
.mmenu nav a[aria-current] { color: var(--red-hot); }
.mmenu .x { position: absolute; top: 16px; right: 16px; background: none; border: 0; color: #fff; cursor: pointer; }
.mmenu .x .ic { width: 32px; height: 32px; }
.maddr { color: var(--muted); }
.mtel { font-size: 26px; }

/* hero (home) */
.hero { position: relative; min-height: 695px; display: flex; align-items: center; text-align: center;
  background: #000 url(/assets/hero.webp) center top / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.48); }
.hero .wrap { position: relative; padding-top: 40px; padding-bottom: 24px; }
.welcome { font-size: 32px; font-weight: 300; color: #ddd; }
.hlogo-big { width: 350px; margin: 4px auto 6px; }
.hero h1 { font-size: 30px; line-height: 1.2; font-weight: 600; letter-spacing: -.03em; text-transform: uppercase; }
.hcols { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; margin-top: 18px; }
.hcols > p { font-size: 20px; padding: 30px; }
.htg { display: flex; flex-direction: column; align-items: center; font-size: 20px; line-height: 1.3; }
.htg img { width: 100px; margin: 4px 0; transition: transform .3s; }
.htg:hover img { transform: translate(4px, -4px); }
.hcta { display: flex; justify-content: center; gap: 16px; margin-top: 8px; flex-wrap: wrap; }
.enter { display: inline-flex; flex-direction: column; align-items: center; margin-top: 22px; color: var(--muted); text-transform: uppercase; font-size: 14px; letter-spacing: .02em; }
.enter .ic { width: 22px; height: 22px; animation: bob 2s infinite; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* programs */
.programs { position: relative; background: #000 url(/assets/programs-bg.webp) center top / cover no-repeat; padding: 40px 0 80px; }
.programs::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.49); }
.programs .wrap { position: relative; }
.stitle, .ptitle { font-size: 40px; line-height: 1.2; font-weight: 400; text-align: center; margin: 24px 0 28px; }
.inner .programs { padding-top: 24px; }
.inner .programs .stitle { font-size: 68px; font-weight: 600; }
.menu { display: flex; flex-direction: column; gap: 28px; margin-bottom: 40px; }
.mhead { display: flex; align-items: center; gap: 14px; }
.mhead h4 { font: 400 30px/1.2 Poppins, var(--font); }
.mhead i { flex: 1; height: 1px; background: rgba(255,255,255,.35); }
.mprice { font: 400 30px/1.2 Poppins, var(--font); background: var(--red-dark); border-radius: 10px; padding: 5px 10px; white-space: nowrap; }
.mrow ul { list-style: none; padding: 8px 0 0; margin: 0; font-size: 13px; line-height: 1.8; }
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 330px)); justify-content: center; gap: 40px 32px; }
.pcard { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px; border-radius: 16px;
  background: rgba(0,0,0,.59); border: 4px solid var(--grey-line); box-shadow: 5px 20px 75px rgba(0,0,0,.145); }
.pcard.red { border-color: var(--red); }
.pcard.gold { border-color: var(--gold); }
.plabel { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 3px 7px; border-radius: 4px; background: var(--red);
  font: 800 14px/14px var(--font); text-transform: uppercase; white-space: nowrap; }
.gold .plabel { background: var(--gold); }
.pcard h4 { font-size: 30px; line-height: 40px; font-weight: 500; letter-spacing: -.03em; text-transform: uppercase; }
.pprice { font-size: 64px; line-height: 64px; font-weight: 800; margin: 26px 0 10px; white-space: nowrap; }
.pextra { display: flex; flex-direction: column; font-size: 13px; line-height: 1.6; }
.pmin { margin: 14px 0 22px; padding: 6px 14px; border-radius: 4px; background: var(--grey); font-size: 12px; line-height: 1.5; letter-spacing: .15em; text-transform: uppercase; }
.red .pmin { background: var(--red-dark); }
.gold .pmin { background: var(--gold-dark); }
.pdesc { font-size: 14px; line-height: 1.4; }
.pfeat { list-style: none; padding: 0; margin: 22px 0 30px; display: flex; flex-direction: column; gap: 8px; text-align: left; align-self: center; }
.pfeat li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.3; }
.pfeat .ic { width: 18px; height: 18px; padding: 2px; border-radius: 2px; background: var(--green-dark); stroke-width: 3; margin-top: 1px; }
.pcard .btn { width: 100%; margin-top: auto; }
.pcard.red .btn { background: var(--red); }
.pcard.gold .btn { background: var(--gold-dark); }
.pnote { text-align: center; margin-top: 40px; color: #ddd; }
.pnote a { text-decoration: underline; }

/* inner pages */
.phead { text-align: center; padding: 36px 0 24px; }
.phead h1 { font-size: 68px; line-height: 1.2; font-weight: 600; }
.phead p { font-size: 14px; color: #ddd; margin-top: 6px; }
.find { text-align: center; font-size: 40px; font-weight: 300; text-transform: uppercase; padding-bottom: 14px; }
/* both bands are windows onto one photo that stays in place while the page scrolls (as on the old site).
   Not background-attachment:fixed — phones (iPhone) ignore it; a position:fixed layer clipped to the section works everywhere */
.contacts { position: relative; clip-path: inset(0); }
.cfix { position: fixed; inset: 0; background: url(/assets/contacts.webp) center / cover no-repeat; }
.contacts .find, .contacts .ccols { position: relative; background: #000; }
.cband { position: relative; height: 190px; }
.cband.tall { height: auto; min-height: 340px; display: flex; align-items: flex-end; }
.ccols .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 34px 16px; text-align: center; }
.ccols .wrap > * { display: flex; flex-direction: column; align-items: center; }
.ccols .ic { width: 34px; height: 34px; color: var(--red-hot); margin-bottom: 8px; }
.ccols small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ccols span { font-size: 20px; line-height: 1.3; }
.cbtns { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; padding-bottom: 40px; }
.work { background: var(--purple); padding: 24px 0 36px; }
.work .wrap { display: flex; flex-direction: column; gap: 12px; }
.work a { text-decoration: underline; }
.chips { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 16px !important; }
.chips .btn { text-decoration: none; }

/* news feed (renderer and photo viewer from spa-ego, colours of this site) */
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumbs a:hover { color: #fff; }
.nhead p a { color: var(--tg); text-decoration: underline; }
.nhead.short { padding: 20px 0 4px; }
.nsec { padding: 8px 0 60px; }
.nfeed, .nsec .pager { max-width: 720px; margin: 0 auto; }
.nfeed { display: grid; gap: 48px; }
.npost { display: grid; gap: 14px; padding-bottom: 48px; border-bottom: 1px solid #2a2a2a; }
.npost time { font-size: 14px; color: var(--red); letter-spacing: .02em; }
.nt { font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -.02em; }
h1.nt { font-size: 34px; }
.nt a:hover { color: var(--red-hot); }
.ngal { display: grid; gap: 4px; border-radius: 10px; overflow: hidden; background: #111; }
.ngal.g1, .ngal.g3 { width: 100%; }
.ngal.g2 { display: flex; }
.ngal > div { min-width: 0; min-height: 0; overflow: hidden; }
.ngal .ph, .ngal video { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ngal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.ngal .ph:hover img { transform: scale(1.02); }
.ngal video { object-fit: cover; background: #000; cursor: auto; }
.ntext { font-size: 17px; line-height: 1.65; color: #e6e6e6; }
.ntext b { color: #fff; }
.ntext a { color: var(--tg); text-decoration: underline; text-underline-offset: 3px; }
.ncta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.cemo { display: inline-block; width: 1.4em; height: 1.4em; line-height: 1.4em; text-align: center; vertical-align: -.32em; overflow: hidden; }
.cemo svg, .cemo video { width: 100% !important; height: 100% !important; object-fit: contain; display: block; }
img.cemo { display: inline-block; width: 1.4em; height: 1.4em; max-width: none; object-fit: contain; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 40px; }
.pager .nums { display: flex; gap: 6px; justify-content: center; }
.pager .nums a { display: grid; place-items: center; min-width: 44px; height: 44px; border-radius: 3px; border: 1px solid #333; font-size: 15px; }
.pager .nums a:hover { border-color: var(--red); }
.pager .nums a[aria-current=page] { background: var(--red); border-color: var(--red); font-weight: 600; }
.pager .gap { display: grid; place-items: center; min-width: 24px; height: 44px; color: var(--muted); }
.pager .pp { display: inline-flex; align-items: center; gap: 8px; min-width: 96px; font-size: 15px; }
.pager .pp:first-child .ic { transform: scaleX(-1); }
.pager .nx { justify-content: flex-end; }
.pager.single .all { padding: 10px 18px; border: 1px solid #444; border-radius: 3px; font-size: 15px; }
.lb { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: rgba(0,0,0,.94); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; touch-action: none; cursor: pointer; }
.lb.on { opacity: 1; visibility: visible; }
.lb img { max-width: min(92vw, 1200px); max-height: 86svh; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lb button { position: absolute; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(20,20,20,.8); border: 1px solid #555; cursor: pointer; }
.lb .x { top: 16px; right: 16px; } .lb .pv { left: 16px; top: 50%; margin-top: -26px; } .lb .pv svg { transform: scaleX(-1); } .lb .nx { right: 16px; top: 50%; margin-top: -26px; }
.lb button[disabled] { opacity: 0; pointer-events: none; }
.lb .cnt { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 14px; color: #ccc; }

/* home: the newest post right after the hero */
.latest { padding: 40px 0 56px; scroll-margin-top: 64px; }
.latest .npost { border-bottom: 0; padding-bottom: 0; }
.allnews { display: flex; width: fit-content; margin: 28px auto 0; }

/* footer */
.ftr { background: #000; padding: 40px 0 90px; }
.ftr .wrap:first-child { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.fl { display: flex; flex-direction: column; align-items: flex-start; }
.ftel { font-size: 40px; line-height: 1.2; }
.faddr { font-size: 25px; line-height: 1.3; }
.fnav { display: flex; gap: 28px; font-size: 13px; flex-wrap: wrap; }
.fnav a:hover { color: var(--red-hot); }
.fcopy { margin-top: 18px; font-size: 10px; line-height: 1.6; color: #ccc; text-align: center; }

/* mobile contact bar */
.mbar { display: none; }

/* 18+ door: an overlay only, the content stays in the HTML for search engines */
.gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgba(0,0,0,.82) url(/assets/hero-m.webp) center / cover; background-blend-mode: multiply; }
.gate.gone { display: none; }
.gate-box { max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: rgba(0,0,0,.7); border: 2px solid var(--red); border-radius: 16px; padding: 32px 28px; }
.gate-box img { width: 200px; }
.gate-t { font-size: 24px; font-weight: 600; }
.gate .btn { width: 100%; }
.gate .no { color: var(--muted); font-size: 14px; text-decoration: underline; }

@media (max-width: 900px) {
  .hdr { position: sticky; top: 0; }
  .hdr .wrap { min-height: 64px; }
  .hnav { display: none; }
  .hlogo, .htel, .burger { display: block; }
  .hlogo .logo { width: 84px; height: auto; }
  .htel { font-size: 17px; }
  .hero { min-height: 0; background-image: url(/assets/hero-m.webp); }
  .welcome { font-size: 24px; }
  .hlogo-big { width: 240px; }
  .hero h1 { font-size: 22px; }
  .hcols { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hcols > p { padding: 8px; font-size: 16px; }
  .htg { grid-column: 1 / -1; order: -1; font-size: 17px; }
  .htg img { width: 72px; }
  /* the section is very tall on phones: `cover` blew the photo up to the whole section — here it is one screen high at the top, then fades to black */
  .programs { background: linear-gradient(rgba(0,0,0,.49), rgba(0,0,0,.49) 560px, #000 820px), url(/assets/programs-bg.webp) center top / auto 820px no-repeat, #000; }
  .programs::before { display: none; }
  .stitle, .ptitle { font-size: 28px; }
  .inner .programs .stitle, .phead h1 { font-size: 40px; }
  .mhead h4, .mprice { font-size: 22px; }
  .pgrid { grid-template-columns: minmax(0, 360px); gap: 40px; }
  .pcard { padding: 36px 24px; }
  .pprice { font-size: 52px; line-height: 56px; }
  .find { font-size: 28px; }
  .cband { height: 120px; }
  .ccols .wrap { grid-template-columns: 1fr; }
  .cbtns .btn { width: 100%; }
  .ftel { font-size: 30px; }
  .faddr { font-size: 18px; }
  .mbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); gap: 8px; background: rgba(0,0,0,.92); border-top: 1px solid #222; }
  .mbar { transition: transform .3s; padding-right: 80px; }  /* the Jivo chat button sits bottom-right: keep the bar clear of it */
  body.menu-on jdiv { display: none !important; }
  .mbar.off { transform: translateY(110%); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 3px; background: var(--red); font-weight: 500; }
  .mbar a + a { background: var(--tg); }
  .menu-on .mbar { display: none; }
  .nt { font-size: 21px; } h1.nt { font-size: 26px; }
  .ncta .btn { flex: 1; }
  .lb .pv, .lb .nx { display: none; } .lb img { max-width: 100vw; }
  .pager { gap: 6px; }
  .pager .pp { min-width: 0; font-size: 0; gap: 0; }
  .pager .pp .ic { font-size: 18px; }
  .pager .nums { gap: 4px; }
  .pager .nums a { min-width: 36px; height: 36px; font-size: 14px; }
  .pager .nums a.far { display: none; }
  .pager .gap { min-width: 14px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }