/* Sunrise Golden Meadows spotlight — the main site's landing hero.
   Bright, uncovered photo with a soft white legibility fade behind the
   copy (not a dark tint), a serif display headline, and a solid pill CTA. */

/* Safety net: the legacy template has no overflow-x guard on html/body,
   so any element that's even slightly wider than the viewport (easy to
   miss across this many sections) makes the whole page pan horizontally
   on narrow phones. This forecloses that entire class of bug. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

.fp-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fdf8ec;
}
.fp-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: fpKenBurns 26s ease-in-out infinite alternate;
}
@keyframes fpKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}
.fp-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0.52) 22%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.08) 56%, transparent 70%);
}
.fp-hero .container {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-top: 200px;
  padding-bottom: 40px;
}
.fp-hero .row {
  height: 100%;
  align-items: flex-start !important;
}
.fp-hero .row > div {
  min-width: 0;
}
/* Main nav is position:absolute on desktop and floats over this section —
   clear it with top padding instead of letting the copy collide with it. */
@media (min-width: 992px) {
  .fp-hero .container { padding-top: 220px; }
}

.fp-hero-eyebrow {
  display: block;
  font-family: 'Playfair Display', 'Poppins', serif;
  color: #1f4d2c;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fp-hero h1 {
  font-family: 'Playfair Display', 'Poppins', serif;
  color: #1f4d2c;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 22px;
}
.fp-hero p {
  color: #3c4438;
  font-size: 18px;
  line-height: 1.6;
  max-width: 460px;
}

.fp-hero-btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #1f4d2c;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 8px 8px 32px;
  border-radius: 100px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(31, 77, 44, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* Traveling fill — a darker layer that sweeps in from the left on hover,
   sitting behind the label/arrow (positive z-index keeps this reliable
   regardless of what stacking context the button itself is in). */
.fp-hero-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #163a1f;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.fp-hero-btn-label,
.fp-hero-btn-arrow {
  position: relative;
  z-index: 2;
}
.fp-hero-btn-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex: none;
  transition: transform 0.25s ease, background 0.25s ease;
}
.fp-hero-btn:hover,
.fp-hero-btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(31, 77, 44, 0.38);
  color: #fff;
  text-decoration: none;
}
.fp-hero-btn:hover::before,
.fp-hero-btn:focus-visible::before {
  transform: scaleX(1);
}
.fp-hero-btn:hover .fp-hero-btn-arrow,
.fp-hero-btn:focus-visible .fp-hero-btn-arrow {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.3);
}
.fp-hero-btn:active {
  transform: translateY(-1px) scale(0.97);
  box-shadow: 0 8px 18px rgba(31, 77, 44, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.fp-hero-btn:active::before {
  background: #0f2815;
  transform: scaleX(1);
  transition: transform 0.12s ease, background 0.12s ease;
}

@media (max-width: 767.98px) {
  .fp-hero h1 { font-size: 38px; }
  .fp-hero p { font-size: 16px; }
  .fp-hero-eyebrow { letter-spacing: 5px; }
}
@media (max-width: 420px) {
  .fp-hero h1 { font-size: 30px; }
  .fp-hero p { font-size: 14px; }
  .fp-hero-eyebrow { font-size: 15px; letter-spacing: 3px; }
  .fp-hero-btn { padding: 7px 7px 7px 24px; font-size: 14px; }
  .fp-hero-btn-arrow { width: 34px; height: 34px; }
}