* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #333;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: #1a9a9a; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 15px; }

/* ---------- Header ---------- */
.site-header { background: #323438; color: #fff; }
.site-header .container {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 70px; flex-wrap: wrap;
}
.logo { color: #fff; display: block; padding: 2px 0 8px; line-height: 1; }
.logo:hover { text-decoration: none; }
.logo .name { font-size: 26px; display: block; }
.logo .tagline { font-size: 13px; display: block; margin-top: 1px; }

.nav { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.nav a { color: #fff; display: block; padding: 24px; font-size: 14px; }
.nav li:last-child a { padding-right: 15px; }
.nav a:hover, .nav a.active { color: #7fd6d6; text-decoration: none; }

/* Homepage hero (header continues into it) */
.hero { background: #323438; color: #fff; text-align: center; padding: 70px 15px 110px; }
.hero h1 { font-size: 50px; font-weight: bold; margin: 0 0 18px; }
.hero p { margin: 0; }

/* ---------- Content ---------- */
main { flex: 1; padding: 30px 0 25px; }
h2.page-title { font-size: 22px; font-weight: normal; color: #111; margin: 10px 0 20px; }
ul { padding-left: 40px; }
ul ul { list-style: circle; }

.intro { text-align: center; }
.intro h3 { color: #1a9a9a; font-weight: normal; font-size: 20px; margin: 20px 0 5px; }
.video {
  width: 100%; max-width: 550px; aspect-ratio: 16 / 9; margin: 20px auto;
  background: #000; color: #aaa; display: flex; align-items: center; justify-content: center;
}
.video iframe { width: 100%; height: 100%; border: 0; }

.feature { display: flex; gap: 10px; align-items: flex-start; margin: 60px 0 80px; text-align: center; }
.feature img { width: 490px; max-width: 100%; height: auto; display: block; }
.feature .text { flex: 1; }
.feature .text p { margin-top: 0; }

.map { border: 1px solid #ccc; display: block; width: 600px; max-width: 100%; height: 450px; }
.caravan-img { max-width: 100%; height: auto; }

/* ---------- Footer ---------- */
.footer-top { background: #2f2f2f; color: #fff; padding: 45px 0 70px; }
.footer-top .container { display: flex; flex-wrap: wrap; gap: 30px; }
.footer-top .col { flex: 1 1 260px; }
.footer-top .col-map { flex: 2 1 440px; }
.footer-top .logo .name { font-size: 26px; }
.footer-top h4 { font-size: 20px; font-weight: normal; margin: 15px 0 8px; }
.footer-top p { margin: 0 0 22px; }
.footer-top a { color: #fff; }
.footer-top .map { border: 0; width: 440px; height: 295px; }

.footer-bottom { background: #000; color: #ccc; font-size: 10px; padding: 18px 0; }
.footer-bottom .container { text-align: right; }

@media (max-width: 768px) {
  .site-header .container { flex-direction: column; align-items: flex-start; padding-top: 12px; }
  .nav a { padding: 10px 14px 10px 0; }
  .feature { flex-direction: column; }
  .hero h1 { font-size: 38px; }
}