:root {
  --bms-navy: #06284a;
  --bms-navy-light: #0b4678;
  --bms-orange: #ff931e;
  --bms-orange-light: #ffad4a;
  --bms-ink: #10243f;
  --bms-line: #d9e0e6;
}

html {
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  color: #172536;
  font-family: Inter, Arial, sans-serif;
  line-height: 1.6;
  max-width: 100%;
  overflow-x: clip;
}
h1, h2, h3 { color: var(--bms-ink); font-family: "Arial Narrow", Impact, Arial, sans-serif; letter-spacing: .02em; line-height: 1.05; }
.eyebrow { color: var(--bms-orange); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.section-padding { padding-block: 5.5rem; }
.bg-soft { background: linear-gradient(180deg, #f8fafc, #eef3f7); }

.navbar-bms { background: rgba(5, 38, 70, .98); box-shadow: 0 2px 16px rgba(0, 0, 0, .08); min-height: 5.25rem; }
.brand-mark {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 3.6rem;
  justify-content: center;
  transition: filter .2s ease, transform .2s ease;
  width: 3.6rem;
}
.brand-mark img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}
.brand-name {
  color: #fff;
  font-family: "Arial Narrow", Impact, Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: .95;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}
.brand-name small {
  color: var(--bms-orange-light);
  display: block;
  font-family: Inter, Arial, sans-serif;
  font-size: .61rem;
  font-weight: 900;
  letter-spacing: .17em;
  margin-top: .3rem;
}
.navbar-brand:hover .brand-mark,
.site-footer a:hover .brand-mark {
  filter: drop-shadow(0 0 8px rgba(255, 147, 30, .75));
  transform: scale(1.06);
}
.navbar-bms .nav-link { color: rgba(255, 255, 255, .88); font-size: .82rem; font-weight: 800; text-transform: uppercase; }
.navbar-bms .nav-link:hover, .navbar-bms .nav-link.active { color: var(--bms-orange); }
.offcanvas-bms { background: var(--bms-navy); color: #fff; }
.offcanvas-bms .nav-link { border-bottom: 1px solid rgba(255, 255, 255, .14); color: #fff; font-weight: 800; padding-block: .85rem; text-transform: uppercase; }

.hero { align-items: center; background: var(--bms-navy); display: flex; min-height: 40rem; overflow: hidden; position: relative; }
.hero::before { background-image: linear-gradient(90deg, rgba(2,28,52,.98), rgba(2,28,52,.84) 42%, rgba(2,28,52,.1)), url("../assets/roller skating stock.jpg"); background-position: center right; background-size: cover; content: ""; inset: 0; position: absolute; }
.hero-content { color: #fff; max-width: 42rem; padding-block: 5.5rem; position: relative; }
.hero h1 { color: #fff; font-size: clamp(3.4rem, 7vw, 6.6rem); }
.hero-tag { color: var(--bms-orange); font-size: clamp(1.3rem, 2.4vw, 2rem); font-weight: 900; }
.hero .lead { color: #e9eef4; }
.btn-bms { background: linear-gradient(135deg, var(--bms-orange), var(--bms-orange-light)); border: 0; box-shadow: 0 8px 20px rgba(255,147,30,.25); color: #fff; font-weight: 800; letter-spacing: .02em; padding: .85rem 1.4rem; text-transform: uppercase; }
.btn-bms:hover, .btn-bms:focus { background: var(--bms-orange-light); color: var(--bms-navy); }

.quick-strip { background: linear-gradient(135deg, var(--bms-navy), #0c416e); color: #fff; }
.quick-item { height: 100%; padding: 1.5rem 1rem; text-align: center; }
.quick-icon { font-size: 2rem; }
.quick-item strong, .quick-item span { display: block; }
.quick-item strong { font-size: .86rem; text-transform: uppercase; }
.quick-item span { color: #cbd7e3; font-size: .86rem; }
.rule-card { border: 1px solid var(--bms-line); border-radius: 1.25rem; box-shadow: 0 8px 28px rgba(11,54,95,.06); height: 100%; padding: 1.6rem; }
.rule-number { align-items: center; background: #eaf1f7; border-radius: .75rem; color: var(--bms-navy); display: inline-flex; font-weight: 900; height: 2.65rem; justify-content: center; margin-bottom: 1rem; width: 2.65rem; }
.media-card { border-radius: 1.5rem; box-shadow: 0 16px 38px rgba(2,27,50,.14); overflow: hidden; }
.media-card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.check-list { list-style: none; padding-left: 0; }
.check-list li { margin-block: .65rem; padding-left: 1.9rem; position: relative; }
.check-list li::before { background: var(--bms-orange); border-radius: 50%; color: #fff; content: "✓"; font-size: .75rem; font-weight: 900; left: 0; padding-inline: .3rem; position: absolute; }
.cta-banner { background: linear-gradient(135deg, var(--bms-navy), var(--bms-navy-light)); border-radius: 1.75rem; color: #fff; }
.cta-banner h3 { color: #fff; }
.page-hero { background: linear-gradient(135deg, rgba(2,31,57,.96), rgba(7,63,105,.88)), url("../assets/outdoor-skating.jpg") center / cover; color: #fff; padding-block: 5rem 4rem; }
.page-hero h1 { color: #fff; font-size: clamp(3rem, 6vw, 5.4rem); }
.gallery-card { border: 0; border-radius: 1.25rem; box-shadow: 0 8px 24px rgba(0,0,0,.08); overflow: hidden; }
.gallery-card img { height: 16rem; object-fit: cover; }
.gallery-card .gallery-card-img-outdoor {
  height: 17rem;
  margin-top: -1rem;
}
.contact-card { background: var(--bms-navy); border-radius: 1.5rem; color: #fff; }
.contact-row { border-bottom: 1px solid rgba(255,255,255,.15); padding-block: 1rem; }
.contact-row:last-child { border-bottom: 0; }
.contact-row small { color: #aebed0; display: block; letter-spacing: .08em; text-transform: uppercase; }
.site-footer { background: #041f39; color: #fff; }
.site-footer h3 { color: var(--bms-orange); font-size: 1rem; text-transform: uppercase; }
.site-footer a { color: #dce6ef; text-decoration: none; }
.site-footer a:hover { color: var(--bms-orange); }
.site-footer a[href^="mailto:"] {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.rsa-membership {
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .2);
  color: #dce6ef;
  display: flex;
  gap: 1rem;
  justify-content: center;
  text-align: left;
}
.rsa-membership img {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  height: auto;
  object-fit: contain;
  padding: .35rem;
  width: 5rem;
}

@media (max-width: 767.98px) {
  .container > .row {
    --bs-gutter-x: 1.5rem;
  }

  .section-padding { padding-block: 4rem; }
  .hero { min-height: 36rem; }
  .hero::before { background-image: linear-gradient(90deg, rgba(2,28,52,.96), rgba(2,28,52,.72)), url("../assets/roller skating stock.jpg"); }
  .hero .btn { width: 100%; }
  .rsa-membership {
    flex-direction: column;
    text-align: center;
  }
}