/* ============================================================
   Tenuta Valdea landing — hero swap + conversion polish
   Loaded AFTER main.css; never modifies the original file.
   ============================================================ */

/* --- HERO: Tuscan stock photo + darkening gradient for white copy --- */
.intro-section {
  background: linear-gradient(90deg, rgba(14,18,10,0.80) 0%, rgba(14,18,10,0.55) 42%, rgba(14,18,10,0.22) 74%, rgba(14,18,10,0.08) 100%), url("../img/hero-a.webp") no-repeat center center;
  background-size: cover;
  padding-bottom: 200px;
}
@media (max-width: 767.95px) {
  .intro-section {
    background: linear-gradient(180deg, rgba(14,18,10,0.60) 0%, rgba(14,18,10,0.50) 55%, rgba(14,18,10,0.72) 100%), url("../img/hero-a-mobile.webp") no-repeat center center;
    background-size: cover;
    padding-bottom: 120px;
  }
}

/* white hero copy stays crisp on any photo */
.intro-section h1,
.intro-section h2,
.intro-section p,
.intro-section a { text-shadow: 0 1px 14px rgba(0,0,0,0.40); }

/* --- HERO primary CTA --- */
.hero-cta { margin-top: 8px; }
.hero-cta .button {
  box-shadow: 0 10px 26px rgba(127,24,24,0.40);
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, filter .2s ease-in-out;
}
.hero-cta .button:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(127,24,24,0.50); filter: brightness(1.04); }
.hero-sub { font-size: 14px; opacity: .96; letter-spacing: .2px; }

/* gentle lift on every red button */
.button { transition: transform .2s ease-in-out, box-shadow .2s ease-in-out, filter .2s ease-in-out; }
.button:hover { transform: translateY(-1px); filter: brightness(1.04); }

/* --- Reviews cards: equal feel + hover lift --- */
.testimonials-section .box { height: 100%; transition: box-shadow .2s ease, transform .2s ease; }
.testimonials-section .box:hover { transform: translateY(-3px); box-shadow: rgba(99,99,99,0.25) 0 6px 18px 0; }

@media (max-width: 767.95px) { .box-include { margin-bottom: 26px; } }

/* --- Mobile sticky CTA bar (proven conversion lift on phones) --- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999;
  background: rgba(255,255,255,0.97); backdrop-filter: blur(4px);
  box-shadow: 0 -4px 18px rgba(0,0,0,0.12);
  padding: 10px 14px; display: flex; gap: 10px; align-items: center;
}
.sticky-cta .button { flex: 1 1 auto; padding: 13px 14px; font-size: 16px; margin: 0; }
.sticky-cta .wa {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 50px; height: 50px; border-radius: 99em; background: #4EC92F;
}
@media (min-width: 768px) { .sticky-cta { display: none; } }
@media (max-width: 767.95px) { footer { padding-bottom: 84px; } }

/* --- Experience schedule timeline (after the form) --- */
.schedule-section { background: #ffffff; }
.schedule-head { text-align: center; margin-bottom: 50px; }
.schedule-timeline { position: relative; max-width: 760px; margin: 0 auto; padding-left: 0; }
.schedule-timeline::before {
  content: ""; position: absolute; left: 27px; top: 8px; bottom: 8px;
  width: 3px; background: rgb(157, 207, 78); border-radius: 3px;
}
.schedule-step { position: relative; display: flex; align-items: flex-start; padding-left: 80px; margin-bottom: 34px; }
.schedule-step:last-child { margin-bottom: 0; }
.schedule-step .dot {
  position: absolute; left: 8px; top: 0; width: 42px; height: 42px;
  border-radius: 99em; background: rgb(157, 207, 78); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Merriweather", serif; font-size: 18px; box-shadow: 0 4px 12px rgba(157,207,78,0.4);
}
.schedule-step .step-body { padding-top: 2px; }
.schedule-step .step-time { color: #AD1515; font-weight: 700; letter-spacing: .5px; margin-bottom: 2px; }
.schedule-step .step-title { font-family: "Merriweather", serif; font-size: 22px; margin-bottom: 6px; line-height: 1.3; }
.schedule-step .step-desc { color: #444; margin-bottom: 0; }
@media (max-width: 767.95px) {
  .schedule-timeline::before { left: 19px; }
  .schedule-step { padding-left: 62px; margin-bottom: 26px; }
  .schedule-step .dot { width: 36px; height: 36px; font-size: 15px; left: 2px; }
  .schedule-step .step-title { font-size: 19px; }
}