/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 02 2026 | 23:08:23 */
@charset "UTF-8";
/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 02 2026 | 22:03:33 */
/* ============================================================================
   HERO — tint + background focal point

   The rig (RV + Jeep) is pinned to a point in the hero rather than positioned
   by guessing background-size / background-position per breakpoint, so it
   lands in the clear band above the tint at every viewport size.

   Only four knobs, all per breakpoint:
	 --fade-start  where the tint begins, as % of hero HEIGHT
	 --rig-lift    how far above that the wheels sit, as % of hero HEIGHT
	 --anchor-x    where the rig sits across the hero, as % of hero WIDTH
	 --zoom        1 = photo exactly covers; higher = more zoomed / bigger rig
   ============================================================================ */
.hpHero_section__2026-08#hpHero_section {
  --p-glacial-dusk: #1f3c42;
  --color-hero-overlay: var(--p-glacial-dusk);
  /* Source photo constants — only change these if the photo changes.
	 gwd_sunset-hero.jpg is 2880x2300. The rig's centre is 51.3% across it,
	 and the wheels meet the ground 53.4% down it. */
  --photo-ratio: 1.2522;
  --focal-x: 51.3;
  --focal-y: 53.4;
  /* Tint (these are the phone values; tablet/desktop override below).
	 On phones the rig has to clear the photo bubble as well as the tint, so
	 --fade-start sits lower here and the fade is correspondingly shorter —
	 it still reaches full opacity at 51%, same as before. */
  --fade-start: 43;
  --fade-length: 8;
  --fade-alpha: 0.9;
  /* Rig placement */
  --anchor-x: 52;
  --rig-lift: 2;
  --anchor-y: calc(var(--fade-start) - var(--rig-lift));
  --zoom: 1.06;
}
.hpHero_section__2026-08#hpHero_section:before {
  z-index: 2;
  /* TINTING — driven by --fade-start / --fade-length so the rig follows it */
  background-image: linear-gradient(180deg, hsl(from var(--color-hero-overlay) H S L / 0) calc(var(--fade-start) * 1%), hsl(from var(--color-hero-overlay) H S L / var(--fade-alpha)) calc((var(--fade-start) + var(--fade-length)) * 1%)) !important;
}
/* Makes the hero's own width/height available as cqw / cqh units below.
   Safe on this element: it's inset:0 inside the section, so its size is
   imposed by the section and never depends on its own contents. */
.hpHero_section__2026-08#hpHero_section .et_parallax_bg_wrap {
  mix-blend-mode: normal;
  opacity: 1;
  container-type: size;
}
.hpHero_section__2026-08#hpHero_section .et_parallax_bg {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url(https://assets.thegrenwoods.com/wp-content/uploads/2026/08/02210446/gwd_sunset-hero.jpg) !important;
  background-repeat: no-repeat !important;
  /* scroll, not fixed: with `fixed`, size and position percentages resolve
	 against the viewport instead of the section (and it's broken on iOS). */
  background-attachment: scroll !important;
  /* Smallest scale that still covers the section given where the rig is
	 pinned, times --zoom. All four terms are just "don't leave a gap on
	 this edge" — the largest one wins. */
  background-size: auto calc(var(--zoom) * max(
	calc(var(--anchor-y) / var(--focal-y) * 100cqh),
	calc((100 - var(--anchor-y)) / (100 - var(--focal-y)) * 100cqh),
	calc(var(--anchor-x) / var(--focal-x) * 100cqw / var(--photo-ratio)),
	calc((100 - var(--anchor-x)) / (100 - var(--focal-x)) * 100cqw / var(--photo-ratio))
  )) !important;
  /* The percentage term pins the photo's focal point to the same percentage
	 of the section; the cq term then slides it to --anchor-x / --anchor-y.
	 The result is independent of background-size, so the rig stays put no
	 matter how the photo scales. */
  background-position-x: calc(var(--focal-x) * 1% + (var(--anchor-x) - var(--focal-x)) * 1cqw) !important;
  background-position-y: calc(var(--focal-y) * 1% + (var(--anchor-y) - var(--focal-y)) * 1cqh) !important;
}
/* Larger phones — photo bubble is top-left, so the rig sits right of centre */
@media (min-width: 480px) and (max-width: 767px) {
  .hpHero_section__2026-08#hpHero_section {
    --anchor-x: 60;
  }
}
/* Tablet — bubble is a fixed 500px top-left, so push the rig well right.
   The rig clears it horizontally here, so the tint can sit at its original 40%. */
@media (min-width: 768px) and (max-width: 991px) {
  .hpHero_section__2026-08#hpHero_section {
    --fade-start: 40;
    --fade-length: 11;
    --anchor-x: 70;
  }
}
/* Desktop — bubble moves top-right, so the rig moves left.
   Tint also starts a little lower here: at 25% the clear band was shorter
   than the rig itself and it collided with the nav. Set --fade-start back
   to 25 / --fade-length to 16 if you prefer the original tint. */
@media (min-width: 992px) {
  .hpHero_section__2026-08#hpHero_section {
    --fade-start: 32;
    --fade-length: 14;
    --anchor-x: 42;
  }
}
/* Very wide screens — nudge the rig toward centre so the photo doesn't have
   to scale up as far just to cover the width */
@media (min-width: 1600px) {
  .hpHero_section__2026-08#hpHero_section {
    --anchor-x: 46;
  }
}
/* ============================================================================
   HERO — round photo bubble
   ============================================================================ */
@media (max-width: 767px) {
  .hpHero_section__2026-08#hpHero_section .et_pb_image_0 {
    /* Capped, and pulled a little further off the top edge. Uncapped 95vw
	   meant the bubble's bottom edge landed on the RV's roof: the bubble
	   bottom is a fixed px value once the cap bites, while the rig sits at a
	   fixed % of hero height — and hero height *shrinks* as the phone gets
	   wider (the intro copy wraps into fewer lines), so the two converge.
	   Offsets are proportional to the bubble (was left:-18vw / top:-15vw).
	   Below ~347px wide nothing is capped, so small phones are unchanged. */
    --_img-w: min(95vw, 330px);
    width: var(--_img-w) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    left: calc(var(--_img-w) * -0.19) !important;
    top: calc(var(--_img-w) * -0.20) !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hpHero_section__2026-08#hpHero_section .et_pb_image_0 {
    --_img-w: 500px;
    width: var(--_img-w) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    left: -100px;
    top: -100px !important;
  }
}
@media (min-width: 992px) {
  .hpHero_section__2026-08#hpHero_section .et_pb_image_0 {
    --_img-w: 500px;
    width: var(--_img-w) !important;
    height: auto !important;
    aspect-ratio: 1 !important;
    right: -100px;
    top: -100px !important;
  }
}
.hpHero_section__2026-08#hpHero_section .et_pb_image_0:before {
  border-radius: 9999px;
  border-top-left-radius: 0;
}
@media (min-width: 992px) {
  .hpHero_section__2026-08#hpHero_section .et_pb_image_0:before {
    border-top-left-radius: 9999px;
    border-top-right-radius: 0;
  }
}
.hpHero_section__2026-08#hpHero_section .et_pb_image_0 .et_pb_image_wrap {
  border-radius: 9999px;
  border-top-left-radius: 0;
  position: relative;
  width: var(--_img-w);
  height: var(--_img-w);
}
@media (min-width: 992px) {
  .hpHero_section__2026-08#hpHero_section .et_pb_image_0 .et_pb_image_wrap {
    border-top-left-radius: 9999px;
    border-top-right-radius: 0;
  }
}
.hpHero_section__2026-08#hpHero_section .et_pb_image_0 .et_pb_image_wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  position: absolute;
  bottom: -15%;
  right: -10%;
}
@media (min-width: 992px) {
  .hpHero_section__2026-08#hpHero_section .et_pb_image_0 .et_pb_image_wrap img {
    right: auto;
    bottom: -7%;
  }
}
/* ============================================================================
   HERO — misc
   ============================================================================ */
.hpHero_section__2026-08#hpHero_section #hpHeroVid__module {
  display: none !important;
}
@media (max-width: 767px) {
  .hpHero_section__2026-08#hpHero_section .et_pb_row_0 > .et_pb_column_0 {
    padding-top: 125px !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hpHero_section__2026-08#hpHero_section .et_pb_row_0 > .et_pb_column_0 {
    padding-top: 300px !important;
  }
}
@media (min-width: 992px) {
  .hpHero_section__2026-08#hpHero_section .et_pb_row_0 > .et_pb_column_0 {
    padding-top: 200px !important;
    width: 100%;
  }
}