/* Production layout after the animation prototypes. Scoped to the native homepage;
   shared form and logo rules also apply to the generated service pages. */
html[data-scroll-mode="native"] {
  scroll-behavior: auto;
  scroll-padding-top: 110px;
}

html[data-scroll-mode="native"] main *:not(html[data-hero-wind="on"] :is(.hero-weather-field, .hero-motion-leaf, .hero-motion-leaf svg, .hero-motion-leaf-veil, .hero-escape-leaf, .hero-escape-leaf svg, .hero-wind-trace)),
html[data-scroll-mode="native"] main *::before,
html[data-scroll-mode="native"] main *:not(html[data-hero-wind="on"] :is(.hero-weather-field, .hero-motion-leaf, .hero-motion-leaf svg, .hero-motion-leaf-veil, .hero-escape-leaf, .hero-escape-leaf svg, .hero-wind-trace))::after {
  animation: none !important;
  will-change: auto !important;
}

html[data-scroll-mode="native"] [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

html[data-scroll-mode="native"] .hero-copy { position: relative; z-index: 3; }
html[data-scroll-mode="native"] .hero-actions { flex-wrap: wrap; }
html[data-scroll-mode="native"] .hero-media { pointer-events: none; }
html[data-scroll-mode="native"] body[data-site-version="new"] .hero h1 { text-wrap: balance; }
html[data-scroll-mode="native"] .hero-title-motion,
html[data-scroll-mode="native"] .hero-title-line { max-width: 100%; }

.wizard-progress [hidden] { display: none !important; }
.wizard-progress ol { grid-template-columns: repeat(var(--wizard-phase-count, 4), minmax(0, 1fr)); }
.seo-body .brand img, .seo-body .footer-brand img { height: auto; }
.seo-body .seo-hero-media { animation: none; }

@media (min-width: 901px) {
  html[data-desktop-scroll="sections"] { scroll-padding-top: 0; }
  html[data-scroll-mode="native"] body[data-site-version="new"] .hero h1 { font-size: clamp(42px, 4.15vw, 64px); }
  html[data-scroll-mode="native"] body[data-site-version="new"] .home-seo-locations .locations-v10-copy h2 { font-size: clamp(48px, 5.82vw, 88px); }
  /* Each desktop scroll destination owns a full viewport, including its background.
     Keep this separate from the compact mobile flow and the combined opening stage. */
  html[data-desktop-scroll="sections"] body[data-site-version="new"] [data-scroll-stage] {
    min-height: 100vh !important;
    min-height: 100svh !important;
    /* Keep decorative paint inside its own stage vertically; allow side artwork. */
    clip-path: inset(0 -100vw);
  }
  html[data-scroll-mode="native"] .services-stage-shell,
  html[data-scroll-mode="native"] .locations-v10-shell { height: auto; }
  html[data-scroll-mode="native"] .ai-v14-shell,
  html[data-scroll-mode="native"] .quality-v14-shell,
  html[data-scroll-mode="native"] .faq-v14-shell {
    height: auto;
    min-height: 100svh;
    padding-block: clamp(116px, 12vh, 142px) var(--v14-cue-reserve);
  }
  html[data-scroll-mode="native"] .contact-v14-shell { height: auto; min-height: 0; }
  html[data-scroll-mode="native"] .contact-v14-copy h2 { margin-inline: auto; }
  html[data-scroll-mode="native"] body[data-site-version="new"] .hero-inner {
    height: auto;
    min-height: 450px;
  }
  html[data-scroll-mode="native"] .hero-phone { white-space: nowrap; }
  html[data-scroll-mode="native"] .top-benefits,
  html[data-scroll-mode="native"] .top-benefits-inner { height: auto; min-height: 0; }
  html[data-scroll-mode="native"] .top-benefits { padding-bottom: 60px; }

  html[data-scroll-mode="native"] .project-stage-inner {
    min-height: 0;
    padding-block: 116px 90px;
  }
  html[data-scroll-mode="native"] .project-section-heading { margin-bottom: 44px; }
  html[data-scroll-mode="native"] .project-ambient-plant { opacity: .45; }
  html[data-scroll-mode="native"] .project-scenes { align-items: stretch; }
  html[data-scroll-mode="native"] .project-scene {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 400px;
    padding: 28px 26px 56px;
    overflow: hidden;
  }
  html[data-scroll-mode="native"] .project-scene-copy { width: 100%; }
  html[data-scroll-mode="native"] .project-scene-copy h3 { margin-top: 16px; font-size: clamp(23px, 1.8vw, 30px); }
  html[data-scroll-mode="native"] .project-scene-copy > p:last-child { max-width: 32ch; font-size: 14px; }
  html[data-scroll-mode="native"] .project-art {
    position: relative;
    inset: auto;
    width: 100%;
    height: 200px;
    margin-top: auto;
    overflow: hidden;
  }
  html[data-scroll-mode="native"] .project-art picture { display: block; width: 100%; height: 100%; }
  html[data-scroll-mode="native"] .project-art img {
    position: static;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    transform: none;
  }
  html[data-scroll-mode="native"] .project-art::after { content: none; }
  html[data-scroll-mode="native"] .project-scene::after { content: none; }
  html[data-scroll-mode="native"] .project-card-arrow { bottom: 14px; }
}

@media (min-width: 901px) and (max-height: 800px), (min-width: 901px) and (max-width: 1100px) {
  html[data-scroll-mode="native"] .project-stage-inner { padding-block: 108px 40px; }
  html[data-scroll-mode="native"] .project-section-heading { margin-bottom: 24px; }
  html[data-scroll-mode="native"] .project-section-heading h2 { font-size: 40px; }
  html[data-scroll-mode="native"] .project-scene { min-height: 0; padding: 20px 22px 48px; }
  html[data-scroll-mode="native"] .project-art { height: 140px; }
}

@media (min-width: 621px) and (max-width: 900px) {
  html[data-mobile-experience="v2"] body[data-site-version="new"] .hero-media {
    width: min(100%, 510px) !important;
    justify-self: center;
  }
}

@media (max-width: 900px) {
  html[data-mobile-experience="v2"] .project-scenes { flex-direction: row !important; }
  html[data-mobile-experience="v2"] .project-scene {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
    min-height: 330px !important;
    padding: 22px 22px 56px !important;
  }
  html[data-mobile-experience="v2"] .project-scene-copy { width: 100% !important; }
  html[data-mobile-experience="v2"] .project-scene-copy > p:last-child { max-width: 100% !important; }
  html[data-mobile-experience="v2"] .project-scene h3 { font-size: 23px !important; line-height: 1.12 !important; }
  html[data-mobile-experience="v2"] .project-scene p { font-size: 13px !important; line-height: 1.5 !important; }
  html[data-mobile-experience="v2"] .project-art { height: 150px !important; margin-top: auto !important; overflow: hidden !important; }
  html[data-mobile-experience="v2"] .project-art img {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  html[data-mobile-experience="v2"] .project-card-arrow { bottom: 14px !important; }
  html[data-mobile-experience="v2"] .faq-v14-list summary i::before { content: none !important; }
  html[data-mobile-experience="v2"] .faq-v14-list summary i::after {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .seo-body .seo-hero-media { animation: content-fade 320ms ease-out both; }
  html[data-scroll-mode="native"] main .hero-copy { animation: content-enter 400ms ease-out both !important; }
  html[data-scroll-mode="native"] .button,
  html[data-scroll-mode="native"] .service-card { transition: transform 160ms ease, box-shadow 160ms ease; }
}

@keyframes content-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes content-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Customer proof: slow depth in the existing backdrop, staggered glints and steady text.
   This local opt-in intentionally overrides the general motion locks above. */
.review-atmosphere-spark-mint,
.review-atmosphere-spark-lilac { display: none; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html[data-review-ambience="on"] #vorteile {
    --review-spark-peak: 0.55;
  }

  html[data-review-ambience="on"] #vorteile .review-atmosphere-orb-left {
    --review-ambient-animation: review-ambient-orb-left 24s -6s ease-in-out infinite;
  }

  html[data-review-ambience="on"] #vorteile .review-atmosphere-orb-violet {
    --review-ambient-animation: review-ambient-orb-violet 32s -13s ease-in-out infinite;
  }

  html[data-review-ambience="on"] #vorteile .review-atmosphere-plant {
    --review-ambient-animation: review-ambient-plant 22s -4s ease-in-out infinite;
  }

  html[data-review-ambience="on"] #vorteile .review-atmosphere-spark {
    --review-spark-delay: 0s;
    --review-ambient-animation: review-ambient-spark 20s var(--review-spark-delay) ease-in-out infinite;
  }

  html[data-review-ambience="on"] #vorteile .review-atmosphere-spark-green-small {
    --review-spark-delay: -4s;
    --review-spark-peak: 0.43;
  }

  html[data-review-ambience="on"] #vorteile .review-atmosphere-spark-violet {
    --review-spark-delay: -8s;
    --review-spark-peak: 0.52;
  }

  html[data-review-ambience="on"] #vorteile .review-atmosphere-spark-mint {
    --review-spark-delay: -12s;
    --review-spark-peak: 0.4;
    display: block;
    top: 20%;
    left: 8.4%;
    width: 13px;
    height: 13px;
    background: linear-gradient(145deg, #cef0d2, #7bd6a1);
  }

  html[data-review-ambience="on"] #vorteile .review-atmosphere-spark-lilac {
    --review-spark-delay: -16s;
    --review-spark-peak: 0.4;
    display: block;
    top: 79%;
    left: 33.2%;
    width: 12px;
    height: 12px;
    background: linear-gradient(145deg, #e5dfff, #b8acee);
  }

  html[data-review-ambience="on"] #vorteile .review-quote-mark {
    --review-ambient-animation: review-ambient-quote 18s -3s ease-in-out infinite;
  }

  html[data-review-ambience="on"] #vorteile .review-quote-line:nth-child(n + 3) {
    --review-ambient-animation: review-ambient-colour 28s -7s ease-in-out infinite;
    background-size: 165% 100%;
  }

  html[data-review-ambience="on"] #vorteile :is(
    .review-atmosphere-orb, .review-atmosphere-plant, .review-atmosphere-spark,
    .review-quote-mark, .review-quote-line:nth-child(n + 3)
  ) {
    animation: var(--review-ambient-animation) !important;
    animation-play-state: paused !important;
    will-change: auto !important;
  }

  html[data-review-ambience="on"] #vorteile.is-review-ambience-active :is(
    .review-atmosphere-orb, .review-atmosphere-plant, .review-atmosphere-spark,
    .review-quote-mark, .review-quote-line:nth-child(n + 3)
  ) {
    animation-play-state: running !important;
  }

  html[data-review-ambience="on"]:is(.is-section-scrolling, .is-stage-transitioning) #vorteile :is(
    .review-atmosphere-orb, .review-atmosphere-plant, .review-atmosphere-spark,
    .review-quote-mark, .review-quote-line:nth-child(n + 3)
  ) {
    animation-play-state: paused !important;
  }
}

@keyframes review-ambient-orb-left {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(12px, -8px, 0) scale(1.025); }
}

@keyframes review-ambient-orb-violet {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-14px, -10px, 0) scale(1.035); }
}

@keyframes review-ambient-plant {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.8deg); }
  50% { transform: translate3d(2px, -2px, 0) rotate(1.2deg); }
}

@keyframes review-ambient-spark {
  0%, 12%, 42%, 100% { opacity: 0.1; transform: translate3d(0, 0, 0) scale(0.72) rotate(-4deg); }
  27% { opacity: var(--review-spark-peak); transform: translate3d(0, -2px, 0) scale(1.05) rotate(4deg); }
}

@keyframes review-ambient-quote {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.5deg); }
  50% { transform: translate3d(0, -2px, 0) rotate(0.5deg); }
}

@keyframes review-ambient-colour {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Verified public ratings — compact links below the garden composition. */
body[data-site-version="new"] .hero-reputation {
  position: absolute;
  right: 3%;
  bottom: 0;
  z-index: 7;
  display: flex;
  width: max-content;
  max-width: 100%;
  padding: 13px 18px;
  border: 1px solid rgba(27, 66, 47, .07);
  border-radius: 20px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 10px 32px rgba(30, 61, 52, .08);
}
body[data-site-version="new"] .reputation-badge {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #19332e;
  text-decoration: none;
  pointer-events: auto;
  border-radius: 5px;
}
body[data-site-version="new"] .reputation-badge + .reputation-badge {
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid #e8eeea;
  border-radius: 0;
}
body[data-site-version="new"] .reputation-mark {
  display: block;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
}
body[data-site-version="new"] .reputation-mark-friendly {
  padding: 4px;
  border-radius: 50%;
  color: #427a26;
  background: #eff8e4;
}
body[data-site-version="new"] .reputation-mark svg { display: block; width: 100%; height: 100%; }
body[data-site-version="new"] .reputation-copy { display: grid; gap: 4px; line-height: 1.15; }
body[data-site-version="new"] .reputation-provider { font-size: 11px; font-weight: 600; color: #52655e; }
body[data-site-version="new"] .reputation-arrow { margin-left: 3px; color: #7c8e84; }
body[data-site-version="new"] .reputation-score { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 13px; }
body[data-site-version="new"] .reputation-score strong { font-weight: 750; }
body[data-site-version="new"] .reputation-stars { color: #ba7a08; font-size: 11px; letter-spacing: 1px; }
body[data-site-version="new"] .reputation-copy small { font-size: 10px; color: #60736b; }
body[data-site-version="new"] .reputation-badge:hover .reputation-provider { color: #16813e; }
body[data-site-version="new"] .reputation-badge:focus-visible { outline: 2px solid #188642; outline-offset: 6px; }
@media (max-width: 900px) {
  html[data-mobile-experience="v2"] body[data-site-version="new"] .hero-media {
    overflow: visible !important;
    margin-bottom: 88px !important;
  }
  body[data-site-version="new"] .hero-reputation {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    right: 0;
    bottom: auto;
    margin: 0 auto;
    padding: 12px 14px;
    border-radius: 16px;
  }
  body[data-site-version="new"] .reputation-badge { gap: 8px; }
  body[data-site-version="new"] .reputation-badge + .reputation-badge { margin-left: 14px; padding-left: 14px; }
  body[data-site-version="new"] .reputation-mark { flex-basis: 24px; width: 24px; height: 24px; }
  body[data-site-version="new"] .reputation-score { font-size: 12px; gap: 5px; }
  body[data-site-version="new"] .reputation-stars { font-size: 10px; letter-spacing: 0; }
}
@media (max-width: 360px) {
  body[data-site-version="new"] .hero-reputation { padding: 11px; }
  body[data-site-version="new"] .reputation-badge + .reputation-badge { margin-left: 10px; padding-left: 10px; }
  body[data-site-version="new"] .reputation-mark { display: none; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body[data-site-version="new"] .hero-reputation { right: 88px; }
}