/* ==========================================================================
   Brook N Wood Family Campground — site styles
   Loaded after Bootstrap 5.3. Replaces the old template stylesheet on the
   redesigned pages (index, rates, activities, site-map-rules,
   area-attractions).
   ========================================================================== */

:root {
  --forest: #244335;
  --forest-deep: #1b3328;
  --forest-ink: #14261d;
  --teal: #0c6b72;
  --teal-soft: #45a1a8;
  --mist: #c9e8ee;
  --mist-soft: #e8f4f5;
  --leaf: #82ab3e;
  --leaf-deep: #4f761d; /* dark enough for text: 5.3:1 on white, 4.9:1 on cream */
  --leaf-light: #9cc35a;
  --sun: #f4d35e;
  --cream: #f7f4ec;
  --paper: #ffffff;
  --ink: #1f2a24;
  --muted: #56635b;
  --line: rgba(31, 42, 36, .12);

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 8px rgba(20, 38, 29, .08);
  --shadow: 0 14px 34px -16px rgba(20, 38, 29, .45);
  --shadow-lg: 0 28px 60px -24px rgba(20, 38, 29, .55);
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Never below 56px, so the trees don't shrink to specks on phones */
  --tree-h: clamp(56px, 5.5vw, 88px);

  /* Header metrics — updated by bnw.js */
  --hdr-h: 128px;
}

@media (min-width: 1540px) {
  .container { max-width: 1500px; }
}

html { scroll-padding-top: calc(var(--hdr-h) + 16px); }

body {
  font-family: "Open Sans", system-ui, sans-serif;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2;
  color: inherit;
}
h2 { font-weight: 700; }

a { color: var(--teal); text-decoration: none; transition: color .2s; }
p, li { text-wrap: pretty; }
a:hover { color: var(--leaf-deep); }

img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  background: var(--sun);
  color: var(--forest-ink);
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 10px;
  transition: top .2s;
}
/* Only for keyboard users: it stays hidden after mouse or touch use */
.skip-link:focus-visible { top: 12px; color: var(--forest-ink); }

.visually-hidden-focusable:not(:focus) { position: absolute !important; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.topbar {
  background: var(--teal);
  color: #fff;
  font-size: 15px;
  height: 40px;
  overflow: hidden;
  transition: height .3s var(--ease-out), opacity .25s;
}
.topbar-inner {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.topbar-season {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.topbar-season i { color: var(--sun); }
.topbar-season strong { font-weight: 700; margin-right: 4px; }
.topbar-contact {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.topbar-link,
.topbar-link a,
.topbar-link .protectEmail {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}
.topbar-link i { color: var(--mist); font-size: 15px; transition: transform .3s var(--ease-out); }
.topbar-link:hover,
.topbar-link a:hover { color: var(--sun); }
.topbar-link:hover i { transform: translateY(-2px) rotate(-8deg); }
.topbar-social {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  transition: background .25s, transform .25s var(--ease-out), color .25s;
}
.topbar-social + .topbar-social { margin-left: -10px; }
.topbar-social:hover { background: var(--sun); color: var(--forest-ink); transform: translateY(-2px); }

.main-header {
  background: var(--forest);
  height: 88px;
  transition: height .3s var(--ease-out), box-shadow .3s;
}
.site-header.is-compact .topbar { height: 0; opacity: 0; }
.site-header.is-compact .main-header {
  height: 64px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55);
}
.site-header.no-anim .topbar,
.site-header.no-anim .main-header,
.site-header.no-anim .brand img { transition: none !important; }

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}

.brand {
  position: relative;
  flex: 0 0 150px;
  height: 100%;
}
.brand img {
  position: absolute;
  left: 0;
  top: 8px;
  width: 150px;
  height: 150px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35));
  transition: width .3s var(--ease-out), height .3s var(--ease-out), top .3s var(--ease-out), transform .5s var(--ease-out);
  transform-origin: 50% 40%;
}
.brand:hover img { transform: rotate(-4deg) scale(1.03); }
.site-header.is-compact .brand img { width: 56px; height: 56px; top: 4px; }

@media (min-width: 1200px) {
  /* Desktop: the badge rides up over the top bar, as on the original site */
  .brand { flex-basis: 170px; }
  .brand img { top: -34px; width: 170px; height: 170px; }
  .topbar-season { margin-left: 190px; } /* bnw.js lines it up with "Home" */
}

.site-nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list > li { position: relative; display: flex; align-items: center; }
.nav-list > li > a {
  position: relative;
  display: block;
  padding: 10px 12px;
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 18px;
  white-space: nowrap;
}
.nav-list > li > a::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 3px;
  border-radius: 3px;
  background: var(--leaf);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform .35s var(--ease-out);
}
.nav-list > li > a:hover,
.nav-list > li > a:focus-visible,
.nav-list > li > a.active { color: var(--mist); }
.nav-list > li > a:hover::after,
.nav-list > li > a:focus-visible::after,
.nav-list > li > a.active::after,
.has-dropdown:hover > a::after { transform: scaleX(1); }
.nav-list > li > a.active::after { background: var(--sun); }

.dd-toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mist);
  font-size: 13px;
  cursor: pointer;
  transition: transform .3s var(--ease-out), background .2s;
}
.dd-toggle:hover { background: rgba(255, 255, 255, .12); }
.has-dropdown:hover .dd-toggle,
.has-dropdown.open .dd-toggle { transform: rotate(180deg); }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 260px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--forest);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .3s var(--ease-out), visibility .25s;
}
.nav-dropdown::before {
  /* bridges the gap so the menu doesn't close on the way down */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav-dropdown::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 28px;
  width: 14px;
  height: 14px;
  background: var(--forest);
  transform: rotate(45deg);
  border-radius: 3px 0 0 0;
}
.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown,
.has-dropdown.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 17px;
  white-space: nowrap;
  transition: background .2s, transform .25s var(--ease-out), color .2s;
}
.nav-dropdown a i {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .1);
  color: var(--mist);
  font-size: 16px;
  transition: background .2s, color .2s, transform .3s var(--ease-out);
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible { background: rgba(255, 255, 255, .07); color: var(--mist); }
.nav-dropdown a:hover i,
.nav-dropdown a:focus-visible i { background: var(--leaf); color: #fff; transform: rotate(-8deg); }

.nav-mobile-extras { display: none; }

/* Book Now button */
.btn-book {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 10px 20px;
  border-radius: 999px;
  /* Dark text on light green at rest (readable); white on the deeper green
     on hover. The user asked for this way round. */
  background: var(--leaf-light);
  color: var(--forest-ink);
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 20px -8px rgba(130, 171, 62, .9);
  transition: transform .25s var(--ease-out), background .25s, box-shadow .25s;
}
.btn-book::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: bnw-shine 7s ease-in-out 2s infinite;
}
.btn-book:hover,
.btn-book:focus-visible {
  color: #fff;
  background: var(--leaf);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(94, 138, 36, .95);
}
.btn-book:hover i { animation: bnw-wiggle .6s ease-in-out; }
.btn-book-lg { font-size: 20px; padding: 13px 26px; }

@keyframes bnw-shine {
  0%, 82% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
@keyframes bnw-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(10deg); }
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .8);
  color: #fff;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  transition: background .25s, color .25s, transform .25s var(--ease-out);
}
.btn-ghost:hover { background: #fff; color: var(--forest); transform: translateY(-2px); }
.btn-ghost i { transition: transform .3s var(--ease-out); }
.btn-ghost:hover i { transform: translateX(4px); }

.btn-soft {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 0;
  background: var(--mist-soft);
  color: var(--teal);
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition: background .2s, color .2s, transform .25s var(--ease-out);
}
.btn-soft:hover { background: var(--teal); color: #fff; transform: translateY(-2px); }

/* Hamburger */
.nav-toggle {
  display: none;
  position: relative;
  width: 46px;
  height: 46px;
  margin-left: 4px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
  cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2.5px;
  border-radius: 2px;
  background: #fff;
  transition: transform .35s var(--ease-out), opacity .2s, top .35s var(--ease-out);
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 29px; }
.nav-open .nav-toggle span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-open .nav-toggle span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

@media (min-width: 1540px) {
  .nav-list { gap: 6px; }
  .nav-list > li > a { font-size: 19px; padding: 10px 14px; }
  .nav-list > li > a::after { left: 14px; right: 14px; }
  .header-inner > .btn-book { margin-left: 12px; font-size: 19px; }
}
@media (min-width: 1800px) {
  .nav-list { gap: 10px; }
  .nav-list > li > a { font-size: 20px; padding: 10px 16px; }
  .nav-list > li > a::after { left: 16px; right: 16px; }
}

@media (max-width: 1399.98px) {
  .nav-list > li > a { font-size: 16.5px; padding: 10px 10px; }
  .nav-list > li > a::after { left: 10px; right: 10px; }
  .btn-book { font-size: 17px; padding: 9px 17px; }
}

@media (max-width: 1199.98px) {
  .nav-toggle { display: block; }
  .header-inner > .btn-book { margin-left: auto; }

  .site-nav {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--hdr-h);
    bottom: 0;
    margin: 0;
    padding: 18px 20px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(20, 38, 29, .98);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .25s, transform .35s var(--ease-out), visibility .25s;
  }
  .nav-open .site-nav { opacity: 1; visibility: visible; transform: none; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; max-width: 560px; margin: 0 auto; }
  .nav-list > li { flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .nav-list > li > a { flex: 1; font-size: 22px; padding: 14px 4px; }
  .nav-list > li > a::after { left: 4px; right: auto; width: 36px; bottom: 8px; transform-origin: 0 50%; }
  .dd-toggle { width: 48px; height: 48px; margin: 0; font-size: 18px; }
  .has-dropdown:hover .dd-toggle { transform: none; }
  .has-dropdown.open .dd-toggle { transform: rotate(180deg); }

  .nav-dropdown {
    position: static;
    display: none;
    width: 100%;
    min-width: 0;
    margin: 0 0 12px;
    padding: 6px 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-dropdown::before, .nav-dropdown::after { display: none; }
  .has-dropdown.open .nav-dropdown { display: block; animation: bnw-drop .35s var(--ease-out); }
  .nav-dropdown a { padding: 10px 14px; }

  .nav-mobile-extras {
    display: grid;
    gap: 10px;
    max-width: 560px;
    margin: 24px auto 0;
  }
  .nav-mobile-btn,
  .nav-mobile-btn .protectEmail {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
  }
  .nav-mobile-btn {
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
  }
  .nav-mobile-season { margin: 8px 0 0; text-align: center; color: var(--mist); }
  .nav-mobile-season i { margin-right: 8px; color: var(--sun); }

  body.nav-open { overflow: hidden; }
}

@keyframes bnw-drop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 767.98px) {
  .topbar-email { display: none; }
  .main-header { height: 72px; }
  .brand { flex-basis: 100px; }
  .brand img { width: 100px; height: 100px; top: 6px; }
  .site-header.is-compact .main-header { height: 60px; }
  .site-header.is-compact .brand img { width: 50px; height: 50px; top: 5px; }
  .btn-book { font-size: 16px; padding: 8px 14px; }
}
@media (max-width: 575.98px) {
  .topbar { font-size: 14px; }
  .topbar-season { display: none; }
  .topbar-contact { margin: 0 auto; }
}
@media (max-width: 359.98px) {
  .header-inner > .btn-book span { display: none; }
  #hero .hero-actions { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   Home intro (bnw-intro.js): a watercolor of the logo's scene is painted in
   the hero, then the header logo glimmers as the first slide fades in.
   html.intro is set in the <head> of index.html.
   -------------------------------------------------------------------------- */
.hero-intro { display: none; }
.intro .hero-intro {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--cream);
}
.hero-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Hidden and faded on the card itself: opacity on anything around it would
   cut its backdrop blur off from the photo until the fade finished. */
.intro #hero .hero-card { opacity: 0; visibility: hidden; transform: translateY(14px); }
.intro:not(.intro-slide) #hero .carousel-item .hero-slide-bg { animation: none; }

/* The header logo's glimmer: a shine masked to the badge, a pulse, sparkles */
.brand-glint {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.brand-glint::before {
  content: "";
  position: absolute;
  inset: -10% -70%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, .3) 42%, rgba(255, 255, 255, .95) 47%, rgba(255, 255, 255, .4) 51%, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .6) 60.5%, rgba(255, 255, 255, 0) 63%);
  transform: translateX(-62%);
  animation: bnw-glint 1.25s cubic-bezier(.35, .1, .35, 1) .05s forwards;
}
@keyframes bnw-glint { to { transform: translateX(62%); } }
.brand.is-glimmering img { animation: bnw-glow 1.3s cubic-bezier(.3, .7, .3, 1); }
@keyframes bnw-glow {
  35% { transform: scale(1.06); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35)) brightness(1.12); }
}
.brand-sparkle {
  position: absolute;
  z-index: 3;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0);
  animation: bnw-sparkle .95s ease-out forwards;
}
.brand-sparkle::before,
.brand-sparkle::after { content: ""; position: absolute; inset: 0; }
.brand-sparkle::before { background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 62%); }
.brand-sparkle::after {
  background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
@keyframes bnw-sparkle {
  0% { opacity: 0; transform: scale(0) rotate(-40deg); }
  35% { opacity: 1; transform: scale(1.1) rotate(10deg); }
  100% { opacity: 0; transform: scale(.2) rotate(70deg); }
}

/* --------------------------------------------------------------------------
   Sections & shared pieces
   -------------------------------------------------------------------------- */

.section { position: relative; padding: clamp(60px, 8vw, 104px) 0; overflow-x: clip; }
.section-tight { padding: clamp(44px, 6vw, 72px) 0; }
.section-forest { background: var(--forest); color: #e7f0ea; }
.section-teal { background: var(--teal); color: #fff; }
.section-cream { background: var(--cream); }
.section-white { background: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--leaf-deep);
}
.section-forest .eyebrow { color: var(--sun); }
.section-teal .eyebrow { color: #f8e08a; } /* full --sun is 4.3:1 on teal */

.section-title {
  font-size: clamp(28px, 3.4vw, 42px);
  color: var(--teal);
  margin-bottom: 18px;
  text-wrap: balance;
}
.section-forest .section-title { color: #fff; }
.section-teal .section-title { color: #fff; }
.section-head { max-width: 1060px; margin: 0 auto 40px; text-align: center; }
.section-head p { font-size: 19px; color: var(--muted); margin: 0; }
.section-forest .section-head p, .section-teal .section-head p { color: rgba(255, 255, 255, .85); }

.lead-text { font-size: 19px; line-height: 1.75; }
.prose p { margin-bottom: 1.1em; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  color: var(--teal);
}
.text-link i { transition: transform .3s var(--ease-out); }
.text-link:hover i { transform: translateX(5px); }
.section-forest .text-link { color: var(--sun); }
.section-forest .text-link:hover { color: #fff; }

/* Scroll reveal (only when JS is running, so nothing hides without it) */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="left"] { transform: translateX(-30px); }
.js [data-reveal="right"] { transform: translateX(30px); }
.js [data-reveal="zoom"] { transform: scale(.94); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* The tree badge that sits on a section edge */
.tree-badge {
  display: block;
  width: 112px;
  height: 112px;
  margin: calc(-56px - clamp(60px, 8vw, 104px)) auto 28px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3));
  transform-origin: 50% 90%;
  cursor: pointer;
}
.tree-badge:hover,
.tree-badge.is-rocking { animation: bnw-rock 1.2s ease-in-out; }
@keyframes bnw-rock {
  0% { transform: rotate(0); }
  20% { transform: rotate(-7deg); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

/* Wavy divider, sits at the bottom of a section */
.wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(28px, 4vw, 56px);
  pointer-events: none;
}
.wave svg { display: block; width: 100%; height: 100%; }

/* Cards */
.card-bnw {
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.card-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Hand-drawn icons sit on the text baseline like Bootstrap Icons */
.bi-svg { display: inline-block; vertical-align: -.125em; }
.zoom-img { position: relative; overflow: hidden; display: block; }
.zoom-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.card-lift:hover .zoom-img img,
.zoom-img:hover img { transform: scale(1.08); }
a.zoom-img::after {
  content: "\F62C"; /* bi-zoom-in */
  font-family: "bootstrap-icons";
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--forest);
  font-size: 18px;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .3s, transform .35s var(--ease-out);
}
a.zoom-img:hover::after,
a.zoom-img:focus-visible::after { opacity: 1; transform: none; }

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding: 5px 0 5px 32px; }
.check-list li::before {
  content: "\F272"; /* bi-check2 */
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(130, 171, 62, .18);
  color: var(--leaf-deep);
  font-size: 14px;
  font-weight: 700;
}
.check-list.cols-2 { columns: 2 240px; column-gap: 28px; }
.check-list.cols-2 li { break-inside: avoid; }

.callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: var(--mist-soft);
  color: var(--forest-ink);
}
.callout > i { font-size: 22px; color: var(--teal); line-height: 1.3; }
.callout-warn { background: #fff6dc; }
.callout-warn > i { color: #b9800a; }
.callout p { margin: 0; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--forest);
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform .25s var(--ease-out), background .2s, color .2s, box-shadow .2s;
}
.chip i { color: var(--teal); transition: color .2s, transform .3s var(--ease-out); }
a.chip:hover, button.chip:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: var(--teal); }
a.chip:hover i { transform: scale(1.2) rotate(-8deg); }

/* --------------------------------------------------------------------------
   Home hero carousel
   -------------------------------------------------------------------------- */

/* Slides are 1920x844 (about 2.27:1). On wide, short windows a vh-based
   height made the slider wider than the photos and cut their tops and
   bottoms off, so it grows toward the photos' own shape, never shorter than
   before and never taller than the space under the (full-size) header. The
   128px is deliberately fixed: using the live header height would resize the
   slider when the header compacts on scroll. */
#hero {
  position: relative;
  height: clamp(440px, max(min(78vh, 780px), min(100vw, 2016px) / 2.275), calc(100vh - 128px));
  overflow: hidden;
  background: var(--forest);
  /* Never a scroll anchor: the slides' slow zoom moves them, and Chrome
     would nudge the page to follow (a few px more on every reload). */
  overflow-anchor: none;
}
#hero .carousel,
#hero .carousel-inner,
#hero .carousel-item { position: absolute; inset: 0; height: 100%; }
#hero .carousel-inner { max-width: 2016px; margin: 0 auto; }
#hero .carousel-item { overflow: hidden; transition: opacity 1.4s ease-in-out; }
.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform-origin: 50% 50%;
}
.carousel-item:nth-child(2n) .hero-slide-bg { transform-origin: 30% 60%; }
.carousel-item:nth-child(3n) .hero-slide-bg { transform-origin: 70% 40%; }
#hero .carousel-item.active .hero-slide-bg,
#hero .carousel-item-next .hero-slide-bg,
#hero .carousel-item-prev .hero-slide-bg {
  animation: bnw-kenburns 10s ease-out forwards;
}
@keyframes bnw-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

.hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--tree-h) * .82 + 36px);
  z-index: 3;
  pointer-events: none;
}
.hero-card {
  display: inline-block;
  max-width: 760px;
  padding: 20px 28px 24px;
  border-radius: 22px;
  background: rgba(28, 52, 41, .3);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
  pointer-events: auto;
}
.hero-card .btn-book, .hero-card .btn-ghost { text-shadow: none; }
/* Large screens: the card sits level with the slider arrows (vertically
   centred), leaving the lower part of each photo clear. It is nudged in
   from the left just enough to clear the prev arrow at every width. */
@media (min-width: 1200px) {
  .hero-caption { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; }
  .hero-caption .container { width: 100%; }
  .hero-card { margin-left: max(0px, calc(80px - (100vw - 100%) / 2)); }
}
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 16px;
}
.hero-kicker i { color: var(--sun); }
.hero-title {
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.08;
  margin: 0 0 18px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.js .hero-card > * { opacity: 0; transform: translateY(18px); animation: bnw-rise .9s var(--ease-out) forwards; }
.js .hero-card > :nth-child(2) { animation-delay: .15s; }
.js .hero-card > :nth-child(3) { animation-delay: .3s; }
@keyframes bnw-rise { to { opacity: 1; transform: none; } }

#hero .carousel-control-prev,
#hero .carousel-control-next {
  z-index: 4;
  width: 64px;
  opacity: 0;
  transition: opacity .3s;
}
#hero:hover .carousel-control-prev,
#hero:hover .carousel-control-next,
#hero .carousel-control-prev:focus-visible,
#hero .carousel-control-next:focus-visible { opacity: 1; }
.hero-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(20, 38, 29, .45);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 22px;
  transition: background .25s, transform .25s var(--ease-out);
}
.carousel-control-prev:hover .hero-arrow,
.carousel-control-next:hover .hero-arrow { background: var(--leaf); transform: scale(1.08); }

/* Slide dots live inside the caption card, under the buttons */
.hero-dots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
#hero .carousel-indicators {
  position: static;
  justify-content: flex-start;
  margin: 0;
  gap: 8px;
}
/* Each dot is a 24px-tall button (an easy tap target on phones) that draws
   a 6px bar across its middle: ::before is the track, ::after the white
   progress on the active slide, revealed left to right with clip-path. */
#hero .carousel-indicators [data-bs-target] {
  position: relative;
  width: 30px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  opacity: 1;
  transition: width .4s var(--ease-out);
}
#hero .carousel-indicators [data-bs-target]::before,
#hero .carousel-indicators .active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  margin-top: -3px;
  border-radius: 6px;
}
#hero .carousel-indicators [data-bs-target]::before { background: rgba(255, 255, 255, .45); transition: background .3s; }
#hero .carousel-indicators [data-bs-target]:hover::before { background: rgba(255, 255, 255, .75); }
#hero .carousel-indicators .active { width: 56px; }
#hero .carousel-indicators .active::after {
  background: #fff;
  animation: bnw-progress 7.5s linear forwards;
}
#hero.is-paused .carousel-indicators .active::after { animation: none; clip-path: none; }
@keyframes bnw-progress { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero-pause {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s;
}
.hero-pause:hover { background: rgba(255, 255, 255, .4); }

/* Treeline hangs off the top of the section below the slider. Its ground
   strip (bottom ~18%) sits below the photo, so only the trees overlap it. */
.hero-treeline {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--tree-h) * -.82);
  z-index: 2;
  height: var(--tree-h);
  pointer-events: none;
}
/* The treeline is one 1440-wide drawing stretched to the page. On narrow
   screens that squeezed the trees thin, so the drawing never gets narrower
   than its desktop proportions allow (height x 18, or x 14 for the taller
   footer line); the rest is cropped, centred. At desktop widths it still
   spans the page exactly as before. */
.hero-treeline,
.footer-treeline { overflow: hidden; }
.hero-treeline svg,
.footer-treeline svg {
  position: relative;
  left: 50%;
  display: block;
  width: max(100%, var(--tree-h) * 18);
  height: 100%;
  transform: translateX(-50%);
}
.footer-treeline svg { width: max(100%, var(--foot-tree-h) * 14); }
.hero-treeline .tl-ground { fill: var(--forest); }

@media (max-width: 767.98px) {
  #hero { height: 62vh; min-height: 400px; }
  .hero-caption { bottom: calc(var(--tree-h) * .82 + 24px); }
  /* Phones: lighter, barely blurred card so the photo shows through;
     a firmer text shadow keeps the words readable */
  .hero-card {
    padding: 14px 16px 14px;
    background: rgba(28, 52, 41, .2);
    border-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 14px rgba(0, 0, 0, .4);
  }
  .hero-kicker { font-size: 13px; margin-bottom: 4px; }
  .hero-title { margin-bottom: 14px; }
  .hero-actions { flex-wrap: nowrap; gap: 8px; }
  .hero-actions .btn-book, .hero-actions .btn-ghost { font-size: 15px; padding: 8px 13px; gap: 6px; }
  .hero-actions .btn-ghost { background: rgba(20, 38, 29, .35); }
  .hero-dots { margin-top: 14px; }
  #hero .carousel-control-prev, #hero .carousel-control-next { display: none; }
}

/* --------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */

.home-intro { padding-top: clamp(40px, 6vw, 72px); }
.home-h1 {
  max-width: 1240px;
  margin: 0 auto 60px;
  text-align: center;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 800;
  color: var(--mist);
  text-wrap: balance;
}

.announce {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  padding: 34px 32px 28px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  text-align: center;
  font-size: 19px;
}
.announce::before {
  content: "\F775  Welcome"; /* bi-house-heart-fill */
  font-family: "bootstrap-icons", "Nunito", sans-serif;
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--leaf);
  color: var(--forest-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(94, 138, 36, .9);
}
.announce p { margin: 0 0 1em; }
.announce p:last-child { margin-bottom: 0; }
.announce strong { color: var(--forest); }
.announce a { font-weight: 800; }

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 90px);
}
.intro-grid .section-title { color: #fff; }
.intro-grid .prose { color: rgba(255, 255, 255, .9); }

.polaroids { position: relative; height: 600px; }
.polaroid {
  position: absolute;
  width: 52%;
  padding: 10px 10px 36px;
  background: #fbfaf6;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  transition: transform .6s var(--ease-out);
}
.polaroid img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.polaroid figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  text-align: center;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: var(--forest);
}
/* Only slight overlaps, and the stacking order stays put on hover */
.polaroid:nth-child(1) { top: 0; left: 0; transform: rotate(-5deg); z-index: 1; }
.polaroid:nth-child(2) { top: 110px; right: 0; transform: rotate(4deg); z-index: 3; }
.polaroid:nth-child(3) { top: 330px; left: 12%; transform: rotate(-2deg); z-index: 2; }
.polaroid:hover { transform: rotate(0) scale(1.03); }

@media (max-width: 991.98px) {
  .intro-grid { grid-template-columns: 1fr; }
  .polaroids { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .polaroid { position: relative; inset: auto !important; width: auto; padding: 6px 6px 26px; }
  .polaroid figcaption { font-size: 12px; bottom: 4px; }
}
@media (max-width: 575.98px) {
  .polaroids { grid-template-columns: repeat(2, 1fr); }
  .polaroid:nth-child(3) { grid-column: 1 / -1; width: 70%; margin: 0 auto; }
}

/* Amenity stats */
.stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  margin-top: clamp(56px, 7vw, 90px);
}
.stat {
  padding: 22px 12px 20px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
  transition: background .3s, transform .4s var(--ease-out);
}
.stat:hover { background: rgba(255, 255, 255, .11); transform: translateY(-4px); }
.stat-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--leaf);
  color: #fff;
  font-size: 26px;
  box-shadow: 0 8px 18px -8px rgba(130, 171, 62, .9);
}
.stat:hover .stat-icon { animation: bnw-bounce .7s var(--ease-out); }
@keyframes bnw-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-8px); }
  70% { transform: translateY(2px); }
}
.stat-value {
  display: block;
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.15;
  color: #fff;
}
.stat-label { display: block; margin-top: 4px; font-size: 18px; font-weight: 600; line-height: 1.3; color: rgba(255, 255, 255, .88); }
@media (max-width: 1199.98px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Feature cards */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}
.feature-card { display: flex; flex-direction: column; }
.feature-card .zoom-img { aspect-ratio: 4 / 3; }
.feature-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.feature-body h3 { font-size: 23px; color: var(--forest); margin-bottom: 12px; }
.feature-body p { color: var(--muted); font-size: 18px; }
.feature-body .text-link { margin-top: auto; }
.feature-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--teal);
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 14px;
  transition: background .25s, color .25s, transform .3s var(--ease-out);
}
a.feature-tag:hover,
a.feature-tag:focus-visible { background: var(--leaf); color: var(--forest-ink); transform: translateY(-2px); }
a.feature-tag .bi-arrow-right { transition: transform .3s var(--ease-out); }
a.feature-tag:hover .bi-arrow-right { transform: translateX(3px); }
@media (max-width: 991.98px) { .feature-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* Visit / directions */
#directions { padding-top: clamp(36px, 4.5vw, 60px); }
.home-features { padding-bottom: clamp(70px, 7vw, 92px); }
.visit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.map-card { position: relative; }
.map-frame { position: relative; aspect-ratio: 16 / 10; background: var(--mist-soft); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-info {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  gap: 16px 24px;
  align-items: center;
  padding: 20px 24px;
}
.map-info-item { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; }
.map-info-item > i {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mist-soft);
  color: var(--teal);
  font-size: 18px;
}
.map-info-item strong { display: block; font-family: "Nunito", sans-serif; color: var(--forest); }
.copy-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--teal);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.copy-btn:hover { color: var(--leaf-deep); }
.copy-btn .bi-clipboard-check { color: var(--leaf-deep); }
.visit-grid > * { min-width: 0; }
.insta-col { max-width: 540px; width: 100%; margin: 0 auto; overflow: hidden; }
.insta-col .instagram-media { min-width: 0 !important; }
.insta-col .instagram-media { margin: 0 auto !important; }
@media (max-width: 1199.98px) { .map-info { grid-template-columns: 1fr 1fr; } }
@media (max-width: 991.98px) { .visit-grid { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .map-info { grid-template-columns: 1fr; } .map-frame { aspect-ratio: 1 / 1; } }

/* --------------------------------------------------------------------------
   Inner page hero
   -------------------------------------------------------------------------- */

/* About 25% taller than the first version, so the photos show. The extra
   room goes mostly under the card, where the photo is left clear. */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: calc(clamp(110px, 12vw, 150px) + clamp(20px, 2.5vw, 36px)) 0 calc(clamp(70px, 8vw, 100px) + clamp(80px, 7.5vw, 110px));
  background: var(--forest);
  color: #fff;
  isolation: isolate;
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  animation: bnw-kenburns 18s ease-out forwards;
}
/* Same frosted card as the home slider's "Kick back by the brook", but
   darker: these cards carry small text (breadcrumbs, a sentence or two).
   At .7 (.75 on phones) that text measures 4.5:1 or better on every photo. */
.page-hero-card {
  display: inline-block;
  max-width: 760px;
  padding: 20px 28px 24px;
  border-radius: 22px;
  background: rgba(28, 52, 41, .7);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .45);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.page-hero-card > :last-child { margin-bottom: 0; }
.page-hero h1 {
  font-size: clamp(34px, 5vw, 60px);
  font-weight: 800;
  margin: 0 0 14px;
  text-wrap: balance;
}
.page-hero p {
  margin: 0;
  font-size: clamp(17px, 1.4vw, 20px);
  color: #fff;
  text-wrap: pretty;
}
.crumbs {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
}
.crumbs li + li::before { content: "\F285"; font-family: "bootstrap-icons"; margin-right: 8px; font-size: 11px; opacity: .7; }
.crumbs a { color: var(--mist); }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: var(--sun); }
/* Site Map & Rules photo: the groundhog is cropped to sit right of the card
   on large screens, and below it on tablets */
/* The green section under a banner starts closer, as on the home page */
.page-hero + .section-forest { padding-top: clamp(40px, 6vw, 72px); }
.page-hero-bg.bg-groundhog { background-position: 75% 57%; }
@media (max-width: 1199.98px) { .page-hero-bg.bg-groundhog { background-position: 75% 24%; } }
/* Phones: the card fills the width, so the banner runs taller here and the
   photo is enlarged and anchored so the groundhog sits in the strip of
   grass between the card and the treeline */
@media (max-width: 767.98px) {
  .page-hero-groundhog { padding-bottom: calc(clamp(70px, 8vw, 100px) + clamp(80px, 7.5vw, 110px) + 90px); }
  .page-hero-bg.bg-groundhog { background-size: auto 900px; background-position: 80% 12%; }
}
.page-hero .chip-row { margin-top: 22px; }
@media (max-width: 767.98px) {
  .page-hero-card {
    padding: 14px 16px 16px;
    background: rgba(28, 52, 41, .75);
    border-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px) saturate(1.3);
    -webkit-backdrop-filter: blur(6px) saturate(1.3);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 2px 14px rgba(0, 0, 0, .4);
  }
}

/* --------------------------------------------------------------------------
   Rates page
   -------------------------------------------------------------------------- */

.good-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.good-to-know {
  padding: 30px 30px 32px;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 18px;
  line-height: 1.7;
  border-top: 6px solid var(--leaf);
}
.good-to-know p { margin: 0 0 14px; }
.good-to-know .good-to-know-title { margin-bottom: 20px; font-weight: 700; color: var(--forest); }
.good-to-know-list { margin: 0 0 22px; padding: 0; list-style: none; }
.good-to-know-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--forest);
  text-transform: uppercase;
}
.good-to-know-list i { font-size: 22px; line-height: 1; color: var(--leaf); }
/* Check-in / check-out times */
.good-to-know .stay-times {
  margin: 14px 0 18px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  line-height: 1.3;
}
.good-to-know .stay-times th,
.good-to-know .stay-times td { padding: 10px 18px; white-space: nowrap; }
@media (max-width: 575.98px) {
  .good-to-know { padding: 24px 20px 26px; }
  .good-to-know .stay-times th, .good-to-know .stay-times td { padding: 10px 12px; }
}
@media (max-width: 374.98px) { .good-to-know .stay-times td { white-space: normal; } }
.good-to-know .stay-times tr + tr > * { border-top: 1px solid var(--line); }
.good-to-know .stay-times th {
  background: var(--mist-soft);
  color: var(--teal);
  font-weight: 700;
  text-align: left;
}
.good-to-know .stay-times td {
  color: var(--forest);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mosaic {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: 460px;
}
.mosaic > a { border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.mosaic > a:first-child { grid-row: 1 / 3; }
/* Beside the season card the photos stay in view, like the rental galleries */
@media (min-width: 992px) {
  .good-grid { align-items: start; }
  .mosaic { position: sticky; top: calc(var(--hdr-h) + 20px); }
}
@media (max-width: 991.98px) {
  .good-grid { grid-template-columns: 1fr; }
  .mosaic { height: 360px; }
}
@media (max-width: 575.98px) { .mosaic { height: 280px; gap: 8px; } }

.rate-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
@media (max-width: 1199.98px) { .rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .rate-grid { grid-template-columns: 1fr; } }
/* Three cards: one row on desktop; on tablet the odd one out centres under the pair */
.rate-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; margin: 0 auto; }
@media (max-width: 1199.98px) {
  .rate-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rate-grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 11px); }
}
@media (max-width: 575.98px) {
  .rate-grid-3 { grid-template-columns: 1fr; }
  .rate-grid-3 > :last-child:nth-child(odd) { width: auto; justify-self: stretch; }
}

.rate-card { display: flex; flex-direction: column; }
.rate-card-head {
  position: relative;
  padding: 22px 22px 18px;
  background: linear-gradient(135deg, var(--forest) 0%, var(--teal) 100%);
  color: #fff;
}
.rate-card-head i {
  position: absolute;
  right: 16px;
  top: 14px;
  font-size: 34px;
  opacity: .25;
  transition: transform .5s var(--ease-out), opacity .3s;
}
.rate-card:hover .rate-card-head i { transform: rotate(-10deg) scale(1.15); opacity: .45; }
.rate-card-head h3 { font-size: 21px; margin: 0 0 10px; padding-right: 40px; }
.rate-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rate-tags span {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: 13px;
  font-weight: 700;
}
.rate-from { padding: 18px 22px 6px; font-size: 15px; color: var(--muted); }
.rate-from strong {
  display: block;
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1.05;
  color: var(--teal);
}
.rate-from small { font-size: 16px; font-weight: 700; color: var(--muted); }
.rate-rows { margin: 0; padding: 8px 22px 18px; flex: 1; }
.rate-rows div {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 17px;
}
.rate-rows div:last-child { border-bottom: 0; }
.rate-rows dt { font-weight: 600; color: var(--muted); }
.rate-rows dd { margin: 0 0 0 auto; font-weight: 800; color: var(--forest); font-variant-numeric: tabular-nums; }
.rate-card .btn-book { margin: 0 22px 22px; justify-content: center; font-size: 17px; }

.note-line { max-width: 1040px; margin: 28px auto 0; text-align: center; color: var(--muted); }

.stay-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.stay-card { padding: 28px 28px 26px; border-left: 6px solid var(--leaf); }
.stay-card h3 { display: flex; align-items: center; gap: 12px; font-size: 24px; color: var(--forest); margin-bottom: 6px; }
.stay-card h3 i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--mist-soft);
  color: var(--teal);
  font-size: 20px;
}
.stay-card .rate-rows { padding: 8px 0 12px; }
.stay-card p { color: var(--muted); margin-bottom: 8px; font-size: 18px; }
@media (max-width: 767.98px) { .stay-grid { grid-template-columns: 1fr; } }

.policy-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.policy-chip {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 17.5px;
}
.policy-chip i { font-size: 22px; color: var(--teal); line-height: 1.2; }
@media (max-width: 991.98px) { .policy-chips { grid-template-columns: 1fr; } }

.rental {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.rental + .rental { margin-top: clamp(60px, 7vw, 96px); }
.rental-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; position: sticky; top: calc(var(--hdr-h) + 20px); }
.rental-gallery > a { border-radius: var(--radius-sm); box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.rental-gallery.three > a:first-child,
.rental-gallery.lead > a:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
/* The five-photo gallery is taller than most screens, so it scrolls with the page instead of sticking */
.rental-gallery.lead { position: static; }
.rental-gallery.thumbs-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 575.98px) { .rental-gallery.thumbs-3 { grid-template-columns: repeat(2, 1fr); } }
.rental-body h3 { font-size: clamp(26px, 2.6vw, 34px); color: var(--forest); margin-bottom: 12px; }
.rental-body h4 { font-size: 19px; color: var(--teal); margin: 22px 0 8px; }
.price-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--forest);
  color: #fff;
}
.price-box dl { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; }
.price-box dt { font-size: 14px; font-weight: 600; color: var(--mist); }
.price-box dd { margin: 0; font-family: "Nunito", sans-serif; font-weight: 900; font-size: 26px; line-height: 1.1; }
/* Book Online sits on its own line under the rates, on the left */
.price-box { flex-direction: column; align-items: flex-start; }
.price-note { font-size: 16.5px; color: var(--muted); margin-top: 10px; }
@media (max-width: 991.98px) {
  .rental { grid-template-columns: 1fr; }
  .rental-gallery { position: static; }
}

.policy-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.policy-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--cream); }
.policy-list li i { color: var(--teal); font-size: 20px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   Activities page
   -------------------------------------------------------------------------- */

.mission {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 20px 0;
  text-align: center;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.5;
  color: var(--forest);
}
.mission cite { display: block; margin-top: 12px; font-size: 15px; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.section-forest .mission { color: #fff; }
.section-forest .mission cite { color: var(--mist); }

.day-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}
.day-step { position: relative; padding: 28px 26px 26px 92px; }
.day-step .step-num {
  position: absolute;
  left: 24px;
  top: 26px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--leaf);
  color: #fff;
  font-size: 24px;
}
.day-step h3 { font-size: 22px; color: var(--forest); margin-bottom: 6px; }
.day-step p { margin: 0; color: var(--muted); }
.or-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 980px;
  margin: 34px auto 26px;
  font-family: "Nunito", sans-serif;
  font-weight: 900;
  font-size: 22px;
  color: var(--teal);
}
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  max-width: 1100px;
  margin: 0 auto;
}
.activity {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 16.5px;
  color: var(--forest);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.activity i {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mist-soft);
  color: var(--teal);
  font-size: 19px;
  transition: background .25s, color .25s, transform .4s var(--ease-out);
}
.activity small { display: block; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 13px; color: var(--muted); }
.activity:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--forest); }
.activity:hover i { background: var(--leaf); color: #fff; transform: rotate(-10deg) scale(1.08); }
a.activity { border: 2px dashed var(--teal-soft); }
@media (max-width: 767.98px) {
  .day-flow { grid-template-columns: 1fr; }
  .day-step { padding: 22px 20px 22px 84px; }
  .day-step .step-num { left: 18px; top: 22px; }
}

.social-callout {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
  padding: 26px 30px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
}
.social-callout .social-icon {
  display: grid;
  place-items: center;
  flex: 0 0 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sun);
  color: var(--forest-ink);
  font-size: 28px;
  animation: bnw-float 4s ease-in-out infinite;
}
.social-callout p { margin: 0; }
@keyframes bnw-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.weekends { max-width: 860px; margin: 0 auto; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--leaf), var(--teal));
}
.timeline li { position: relative; margin-bottom: 14px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -27px;
  top: 26px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--leaf);
  transition: transform .3s var(--ease-out), background .3s;
}
.timeline li:hover::before { transform: scale(1.25); background: var(--leaf); }
.event {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px 14px 14px;
}
.event-date {
  flex: 0 0 auto;
  min-width: 84px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--teal);
  color: #fff;
  text-align: center;
  font-family: "Nunito", sans-serif;
  line-height: 1.1;
}
.event-date span { display: block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.event-date strong { display: block; font-size: 21px; font-weight: 900; }
.event h3 { margin: 0; font-size: 20px; color: var(--forest); }
.event p { margin: 2px 0 0; font-size: 16px; color: var(--muted); }
.event .up-next {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--forest-ink);
  font-weight: 800;
  font-size: 13px;
  white-space: nowrap;
  animation: bnw-pulse 2s ease-in-out infinite;
}
@keyframes bnw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 211, 94, .7); }
  50% { box-shadow: 0 0 0 8px rgba(244, 211, 94, 0); }
}

/* --------------------------------------------------------------------------
   Site map & rules
   -------------------------------------------------------------------------- */

.fact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.fact {
  padding: 22px 20px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.fact:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.fact i { font-size: 30px; color: var(--teal); display: inline-block; transition: transform .5s var(--ease-out); }
.fact:hover i { transform: rotate(-12deg) scale(1.15); }
.fact strong { display: block; margin-top: 8px; font-family: "Nunito", sans-serif; font-weight: 900; font-size: 22px; color: var(--forest); }
.fact span { color: var(--muted); font-size: 16.5px; }
@media (max-width: 991.98px) { .fact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sitemap-card { padding: 12px; }
.sitemap-card .zoom-img { border-radius: 12px; }
.sitemap-card .zoom-img img { object-fit: contain; }
/* A gentler zoom than the photo tiles: the map is detailed */
.sitemap-card .zoom-img:hover img { transform: scale(1.03); }
/* Less space between the quick facts and the map heading */
.section-facts { padding-bottom: clamp(40px, 5vw, 60px); }
#site-map { padding-top: clamp(40px, 5vw, 60px); }
.sitemap-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 16px 8px 6px; }

.acc-tools { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; }
.accordion-bnw { display: grid; gap: 14px; max-width: 980px; margin: 0 auto; }
.acc-item { border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .3s; }
.acc-item.is-open { box-shadow: var(--shadow); }
.acc-head { margin: 0; }
.acc-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 22px;
  border: 0;
  background: none;
  text-align: left;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: clamp(19px, 1.6vw, 22px);
  color: var(--forest);
  cursor: pointer;
}
.acc-btn .acc-icon {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--mist-soft);
  color: var(--teal);
  font-size: 21px;
  transition: background .3s, color .3s, transform .4s var(--ease-out);
}
.acc-btn:hover .acc-icon,
.acc-item.is-open .acc-icon { background: var(--teal); color: #fff; }
.acc-btn:hover .acc-icon { transform: rotate(-8deg); }
.acc-btn .acc-chev {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--forest);
  font-size: 15px;
  transition: transform .4s var(--ease-out), background .3s;
}
.acc-item.is-open .acc-chev { transform: rotate(180deg); background: var(--sun); }
.acc-count { font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 14px; color: var(--muted); }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-inner { padding: 0 24px 24px 84px; }
.no-js .acc-panel { grid-template-rows: 1fr; }
.acc-inner ul { margin: 0; padding-left: 20px; }
.acc-inner li { margin-bottom: 6px; }
.acc-inner li::marker { color: var(--leaf); }
.acc-inner p:last-child { margin-bottom: 0; }
@media (max-width: 575.98px) {
  .acc-btn { padding: 16px; gap: 12px; }
  .acc-btn .acc-icon { flex-basis: 40px; height: 40px; }
  .acc-inner { padding: 0 18px 20px 18px; }
}

/* --------------------------------------------------------------------------
   Area attractions
   -------------------------------------------------------------------------- */

.attr-tools {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: -34px auto 34px;
  padding: 18px 20px;
  max-width: 1200px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-lg);
}
/* On the green band under the banner */
.attr-band { padding: clamp(44px, 5vw, 64px) 0; }
.attr-band .attr-tools { margin: 0 auto; }
.attr-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
/* Large screens: the panel widens past the container so all six filters
   fit on one row, sharing the width evenly */
@media (min-width: 1300px) {
  .attr-band .attr-tools {
    width: min(100vw - 48px, 1476px);
    max-width: none;
    margin-left: calc((100% - min(100vw - 48px, 1476px)) / 2);
  }
  .attr-filters { flex-wrap: nowrap; }
  .attr-filters .chip { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
}
.attr-filters .chip { cursor: pointer; font-size: 15px; padding: 7px 14px; }
.attr-filters .chip[aria-pressed="true"] { background: var(--teal); color: #fff; border-color: var(--teal); }
.attr-filters .chip[aria-pressed="true"] i { color: var(--mist); }
.chip .count { font-size: 12px; opacity: .7; }

.attr-cat { margin-bottom: clamp(40px, 5vw, 64px); scroll-margin-top: calc(var(--hdr-h) + 20px); }
.attr-cat[hidden] { display: none; }
.attr-cat-title {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(24px, 2.4vw, 30px);
  color: var(--forest);
  margin-bottom: 20px;
}
.attr-cat-title i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--teal);
  color: #fff;
  font-size: 22px;
}
.attr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 991.98px) { .attr-grid { grid-template-columns: 1fr; } }
.attr-card { display: flex; gap: 0; }
.attr-card[hidden] { display: none; }
.attr-card .zoom-img { flex: 0 0 200px; align-self: flex-start; height: 146px; margin: 20px 0 20px 20px; border-radius: 12px; }
.attr-body { display: flex; flex-direction: column; padding: 18px 22px 18px; min-width: 0; }
.attr-body h3 { font-size: 20px; color: var(--forest); margin-bottom: 8px; }
.attr-body p { font-size: 17px; color: var(--muted); margin-bottom: 10px; }
.attr-body .text-link { margin-top: auto; font-size: 17px; }
.attr-empty { text-align: center; padding: 40px 20px; color: var(--muted); font-size: 18px; }
@media (max-width: 575.98px) {
  .attr-card { flex-direction: column; }
  .attr-card .zoom-img { flex-basis: auto; width: auto; height: auto; aspect-ratio: 22 / 15; margin: 16px 16px 0; align-self: stretch; }
}
mark.hit { background: rgba(244, 211, 94, .6); padding: 0 2px; border-radius: 3px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  background: var(--forest-deep);
  color: rgba(255, 255, 255, .82);
  font-size: 17px;
  margin-top: clamp(40px, 5vw, 70px);
}
.footer-treeline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  --foot-tree-h: clamp(64px, 7vw, 110px);
  height: var(--foot-tree-h);
  margin-bottom: -1px;
  pointer-events: none;
}
.footer-treeline .tl-ground { fill: var(--forest-deep); }
.footer-main { padding: 30px 0 30px; }
.footer-brand img { width: 170px; height: auto; margin-bottom: 16px; transition: transform .6s var(--ease-out); }
.footer-brand img:hover { transform: rotate(-6deg); }
.footer-brand p { max-width: 340px; margin-bottom: 20px; }
.footer-title {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 10px;
  font-size: 20px;
  color: #fff;
}
.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px;
  height: 3px;
  border-radius: 3px;
  background: var(--leaf);
}
.footer-list { list-style: none; margin: 0 0 18px; padding: 0; }
.footer-list li { display: flex; gap: 12px; margin-bottom: 14px; }
.footer-list i { color: var(--leaf); font-size: 18px; line-height: 1.5; }
.footer-list a, .footer-list .protectEmail { color: #fff; }
.footer-list a:hover, .footer-list .protectEmail:hover { color: var(--sun); }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 18px;
  transition: background .25s, transform .3s var(--ease-out), color .25s;
}
.footer-social a:hover { background: var(--sun); color: var(--forest-ink); transform: translateY(-3px) rotate(-6deg); }
.footer-nav { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin-bottom: 8px; }
.footer-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .82);
  transition: color .2s, transform .25s var(--ease-out);
}
.footer-nav a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--leaf);
  transition: transform .25s var(--ease-out);
}
.footer-nav a:hover { color: #fff; transform: translateX(4px); }
.footer-nav a:hover::before { transform: scale(1.5); }
.footer-fb { min-height: 200px; }
.footer-fb .fb-page, .footer-fb .fb-page span, .footer-fb iframe { max-width: 100% !important; }
.footer-fb .fb-page { border-radius: 12px; overflow: hidden; }
.footer-weather {
  margin-top: 30px;
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  min-height: 90px;
}
.footer-weather .weatherwidget-io { display: block; color: #fff; padding: 12px 16px; }
.footer-bottom { background: var(--forest-ink); padding: 18px 0; font-size: 15px; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 0 64px; }
.footer-bottom p { margin: 0; }
.footer-legal { display: flex; gap: 8px; margin-top: 4px; }
.footer-bottom a { color: #fff; }
.footer-bottom a:hover { color: var(--sun); }
.footer-credit img { width: 250px; height: auto; opacity: .9; transition: opacity .2s; }  /* Pelland house rule: always 250px wide */
.footer-credit:hover img { opacity: 1; }
@media (max-width: 767.98px) {
  .site-footer { text-align: center; }
  .footer-brand img, .footer-brand p { margin-left: auto; margin-right: auto; }
  .footer-title::after { left: 50%; transform: translateX(-50%); }
  .footer-list li { justify-content: center; text-align: left; }
  .footer-social { justify-content: center; }
  .footer-bottom-inner { justify-content: center; text-align: center; padding: 0 0 56px; }
  .footer-legal { justify-content: center; }
}

/* Back to top with scroll progress ring */
.back-to-top {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 990;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s, transform .35s var(--ease-out), visibility .3s, background .2s;
}
.back-to-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--teal); color: #fff; }
.back-to-top:hover i { animation: bnw-bounce .7s var(--ease-out); }
.back-to-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.back-to-top circle { fill: none; stroke-width: 3; }
.btt-track { stroke: rgba(255, 255, 255, .15); }
.btt-progress { stroke: var(--leaf); stroke-linecap: round; stroke-dasharray: 132; stroke-dashoffset: 132; }
.back-to-top i { position: relative; font-size: 20px; }

@media (max-width: 575.98px) {
  .announce { font-size: 18px; padding: 30px 20px 22px; }
  body { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  #hero .carousel-item .hero-slide-bg, .page-hero-bg { animation: none !important; }
}