:root {
  --navy: #111b3b;
  --blue: #183b77;
  --orange: #ff9800;
  --orange-dark: #e87f00;
  --ink: #111936;
  --text: #56606c;
  --mist: #f5f7fa;
}

html { scroll-behavior: smooth; }
body { color: var(--text); font-family: "Open Sans", sans-serif; font-size: .94rem; line-height: 1.65; }
h1, h2, h3, h4, .navbar-brand { color: var(--ink); font-family: Montserrat, sans-serif; font-weight: 700; }
.container { max-width: 1050px; }
.section { padding: 6rem 0; }
.section-soft { background: var(--mist); }
.site-header { background: linear-gradient(90deg, rgb(23 54 109 / 88%) 0%, rgb(216 216 216 / 39%) 48%, rgba(21, 38, 70, .06) 100%), url("../images/parkstad/hero-cycling.jpg") center 45% / cover; color: #fff; min-height: 500px; }
.navbar { padding: 1.2rem 0; }
.navbar-brand img { height: 62px; width: auto; }
.navbar-toggler { border-color: rgba(255,255,255,.65); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.25); }
.nav-link { color: #11285b; font-size: 1rem; font-weight: 600; padding: .6rem .95rem !important; }
.nav-link:hover, .nav-link:focus { color: #fff; }
.hero-content { align-items: center; display: flex; min-height: 385px; }
.hero-copy { max-width: 610px; padding-bottom: 1rem; }
.hero-copy h1 { color: #fff; font-size: clamp(2.1rem, 5vw, 3.25rem); letter-spacing: -.04em; line-height: 1.18; }
.hero-copy p { color: #fff; font-size: 1.3rem;margin-top: 20px; max-width: 430px; }
.btn-accent { background: var(--orange); border: 0; border-radius: 999px; box-shadow: 0 6px 14px rgba(98, 56, 0, .18); color: #fff; margin-top: 20px; font-size: 0.9rem; font-weight: 700; padding: .85rem 1.55rem; }
.btn-accent:hover, .btn-accent:focus { background: var(--orange-dark); color: #fff; }
.eyebrow { color: var(--blue); font-size: .64rem; font-weight: 800; letter-spacing: .02em; margin-bottom: .25rem; text-transform: uppercase; }
.intro h2 { font-size: 1.42rem; line-height: 1.15; margin-bottom: 1rem; }
.intro p { margin-bottom: 1.1rem; }
.hours-card { background: #fff; border: 1px solid #edf0f4; border-radius: .65rem; box-shadow: 0 6px 18px rgba(15, 27, 58, .06); padding: 1.55rem 1.7rem; }
.hours-card h3 { font-size: 1.18rem; margin-bottom: .85rem; }
.hours-list { font-size: .75rem; margin: 0; }
.hours-list > div { border-bottom: 1px solid #edf0f4; display: flex; gap: 1rem; justify-content: space-between; padding: .36rem 0; }
.hours-list > div:last-child { border-bottom: 0; }
.hours-list dt { color: #35404f; font-weight: 700; }
.hours-list dd { margin: 0; text-align: right; }
.contact-panel { background: var(--navy); border-radius: .65rem 0 0 .65rem; color: #fff; height: 100%; padding: 2.15rem 2rem; }
.contact-panel h2 { color: #fff; font-size: 1.28rem; }
.contact-details { list-style: none; margin: 1.15rem 0 1.35rem; padding: 0; }
.contact-details li { align-items: flex-start; display: flex; font-size: .75rem; gap: .65rem; margin-bottom: .58rem; }
.contact-details svg { color: #ffb223; flex: 0 0 14px; margin-top: .25rem; }
.contact-details a { color: #fff; }
.route-btn { border-radius: .32rem; font-size: .62rem; letter-spacing: .03em; padding: .65rem 1rem; text-transform: uppercase; }
.map-frame { border: 0; border-radius: 0 .65rem .65rem 0; display: block; height: 100%; min-height: 270px; width: 100%; }
.about-copy { margin: auto; max-width: 630px; }
.about-copy h2 { font-size: 1.4rem; line-height: 1.15; }
.about-copy p { font-size: .83rem; margin-bottom: 1rem; }
.feature { align-items: center; margin-bottom: 6rem; }
.feature:last-child { margin-bottom: 0; }
.feature-image { border-radius: .6rem; box-shadow: 0 5px 13px rgba(14, 28, 56, .15); height: 225px; object-fit: cover; width: 100%; }
.feature-image.contain { background: #fff; object-fit: contain; }
.feature-copy { padding: 1rem 2rem; }
.feature-icon { display: inline-block; height: 2.15rem; margin-bottom: .8rem; width: 2.15rem; }
.feature-icon img { border-radius: 50%; display: block; height: 100%; width: 100%; }
.feature-copy h3 { font-size: 1.25rem; margin-bottom: .75rem; }
.feature-copy p { font-size: .8rem; margin-bottom: 1rem; }
footer { background: var(--navy); color: #fff; font-size: .72rem; font-weight: 600; padding: 1.35rem 0; text-align: center; }
.back-to-top { background: var(--orange); border-radius: 50%; bottom: 1rem; color: #fff; display: grid; height: 2.5rem; opacity: 0; place-items: center; position: fixed; right: 1rem; text-decoration: none; transform: translateY(1rem); transition: .2s ease; visibility: hidden; width: 2.5rem; z-index: 2; }
.back-to-top.visible { opacity: 1; transform: translateY(0); visibility: visible; }

@media (max-width: 991.98px) {
  .navbar-collapse { background: rgba(10, 25, 62, .94); border-radius: .5rem; margin-top: .75rem; padding: .5rem; }
  .nav-link { color: #fff; padding: .7rem 1rem !important; }
  .site-header { min-height: 455px; }
  .hero-content { min-height: 345px; }
  .section { padding: 4rem 0; }
  .feature { margin-bottom: 3rem; }
  .feature-copy { padding: 1.4rem 0 .25rem; }
}

@media (max-width: 767.98px) {
  .site-header { background-position: 58% center; }
  .navbar-brand img { height: 54px; }
  .contact-panel { border-radius: .65rem .65rem 0 0; }
  .map-frame { border-radius: 0 0 .65rem .65rem; min-height: 235px; }
  .feature-image { height: 215px; }
  .feature:nth-of-type(even) .feature-copy { order: 2; }
}