
/* NORTHLINE Performance — premium multi-club identity */
:root {
  --nl-ink: #071625;
  --nl-panel: #102235;
  --nl-coral: #f2674f;
  --nl-ivory: #f8f4ea;
  --nl-line: rgba(248,244,234,.16);
}

.header {
  min-height: 88px !important;
  background: rgba(7,22,37,.96) !important;
  border-bottom: 1px solid rgba(248,244,234,.12) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(16px);
}
.header__content { min-height: 88px !important; }
.header__content__primary__left__logo {
  width: 190px !important;
  min-width: 190px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
}
.header__content__primary__left__logo img {
  width: 100% !important;
  height: 60px !important;
  max-width: 190px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
.header a, .header button { color: var(--nl-ivory) !important; }
.header a:hover { color: var(--nl-coral) !important; }

.hero {
  min-height: 570px !important;
  position: relative !important;
  isolation: isolate;
  overflow: hidden;
}
.hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(7,22,37,.94) 0%, rgba(7,22,37,.70) 44%, rgba(7,22,37,.20) 76%),
    linear-gradient(0deg, rgba(7,22,37,.82) 0%, transparent 55%) !important;
}
.hero__content-wrapper {
  position: relative !important;
  z-index: 2 !important;
  max-width: 780px !important;
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}
.hero__title h1, .hero h1 {
  color: var(--nl-ivory) !important;
  font-size: clamp(44px, 5.2vw, 74px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  max-width: 760px !important;
  text-shadow: 0 3px 28px rgba(0,0,0,.36) !important;
}
.hero__content-wrapper p {
  color: rgba(248,244,234,.92) !important;
  font-size: clamp(17px, 1.5vw, 21px) !important;
  line-height: 1.55 !important;
  max-width: 680px !important;
  text-shadow: 0 2px 15px rgba(0,0,0,.32) !important;
}
.hero__cta .ui-button {
  min-height: 52px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  background: var(--nl-coral) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 0 14px 32px rgba(242,103,79,.28) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.hero__cta .ui-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 38px rgba(242,103,79,.38) !important;
}

.service-card-grid {
  border: 1px solid var(--nl-line) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
.service-card-grid:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(242,103,79,.58) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.28) !important;
}
.ui-filter__button, .services input {
  border-radius: 999px !important;
}
.footer-logo {
  width: 180px !important;
  max-width: 180px !important;
  height: auto !important;
}

@media (max-width: 768px) {
  .header, .header__content { min-height: 72px !important; }
  .header__content__primary__left__logo {
    width: 132px !important;
    min-width: 132px !important;
    height: 48px !important;
  }
  .header__content__primary__left__logo img {
    max-width: 132px !important;
    height: 48px !important;
  }
  .hero { min-height: 520px !important; }
  .hero::after {
    background: linear-gradient(90deg, rgba(7,22,37,.92), rgba(7,22,37,.58)), linear-gradient(0deg, rgba(7,22,37,.9), transparent 65%) !important;
  }
  .hero__content-wrapper {
    padding: 56px 22px !important;
    justify-content: flex-end !important;
  }
  .hero__title h1, .hero h1 {
    font-size: clamp(38px, 12vw, 54px) !important;
    line-height: 1.02 !important;
  }
  .hero__content-wrapper p { font-size: 17px !important; }
}

/* NORTHLINE logo contrast fix */
.header__content__primary__left__logo img {
  filter: brightness(0) invert(1) !important;
  transform: scale(1.18) !important;
  transform-origin: left center !important;
}

/* WOLFLOW v2 — clean canvas and calibrated footer */
body, #app, .services, .services__wrapper, .employees, .employees__wrapper, .locations, .locations__wrapper, .booking, .booking__wrapper { background-image: none !important; background-color: #071625 !important; }
.services::before, .services::after, .services__wrapper::before, .services__wrapper::after, .employees::before, .employees::after, .employees__wrapper::before, .employees__wrapper::after, .locations::before, .locations::after, .locations__wrapper::before, .locations__wrapper::after, .booking::before, .booking::after, .booking__wrapper::before, .booking__wrapper::after { background-image: none !important; }
[class*="pattern"] { display: none !important; background-image: none !important; }
.footer .footer-logo, .footer .footer-logo img, .footer img[alt="logo"] { width: auto !important; height: 30px !important; max-width: 145px !important; max-height: 30px !important; object-fit: contain !important; object-position: left center !important; transform: none !important; }

/* WOLFLOW v3 — remove Trafft decorative canvas */
.dl__wrapper__background, .dl__wrapper__fade { display: none !important; background: none !important; background-image: none !important; }
.dl__wrapper { background: #071625 !important; }
.footer .footer-logo.small { width: auto !important; height: 42px !important; max-width: 190px !important; max-height: 42px !important; opacity: 1 !important; }

/* Optical logo sizing: source assets contain transparent padding */
.footer .footer-logo.small { filter: brightness(0) invert(1) !important; transform: scale(1.9) !important; transform-origin: left center !important; }
.footer__content__column:first-child { overflow: visible !important; }
