/* RozyJulze laptop/mobile functional fixes — approved design preserved. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Keep the approved Home-page logo crop and size consistent everywhere. */
.site-header .brand-image-wrap {
  display: block;
  width: 288px;
  height: 93px;
  overflow: hidden;
}

.site-header .brand-image,
.site-header .brand > img {
  display: block;
  width: 288px;
  max-width: none;
  height: auto;
  transform: translateY(-30px);
}

/* The older Services, Gallery, and Contact pages use a flex header. Keep the
   logo crop anchored exactly like the approved Home/About pages. */
.site-header .header-inner.wrap .brand {
  flex: 0 0 288px;
  width: 288px;
  margin-right: auto;
  justify-content: flex-start;
}

.site-header .header-inner.wrap .brand-image-wrap {
  flex: 0 0 288px;
  margin: 0;
}

.site-footer .footer-logo-panel {
  box-sizing: border-box;
  display: block;
  width: 286px;
  height: 118px;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--cream, #fbf4ef);
}

.site-footer .footer-logo-panel img {
  display: block;
  width: 286px;
  max-width: none;
  height: auto;
  object-fit: initial;
  transform: translateY(-26px);
}

/* Keep each social destination easy to find and tap. */
.site-footer .footer-social-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.site-footer .footer-social-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.site-footer .social-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}

.site-header .menu {
  align-items: center;
  gap: 8px;
}

.site-header .menu-hamburger-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.site-header .menu-hamburger-icon i {
  display: block;
  width: 19px;
  height: 2px;
  background: currentColor;
}

.site-header .nav .mobile-nav-cta {
  display: none;
}

@media (max-width: 520px) {
  main,
  section,
  header,
  footer {
    max-width: 100vw;
  }

  .hero-inner,
  .hero-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero-inner {
    width: calc(100% - 32px);
    margin-inline: auto;
  }

  .hero-copy {
    text-align: center;
    margin-inline: auto;
  }

  .eyebrow {
    justify-content: center;
    text-align: left;
  }

  .hero h1 {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    font-size: clamp(40px, 12.5vw, 49px);
    line-height: 1.04;
    text-align: center;
    overflow-wrap: normal;
  }

  .hero-visual {
    box-sizing: border-box;
    max-width: 100%;
  }

  .final-cta-inner,
  .planned-inner,
  .contact-card,
  .contact-layout,
  .wrap {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 820px) {
  .site-header .brand-image-wrap {
    width: 205px;
    height: 78px;
  }

  .site-header .brand-image,
  .site-header .brand > img {
    width: 205px;
    transform: translateY(-14px);
  }

  .site-header .header-inner.wrap .brand {
    flex-basis: 205px;
    width: 205px;
  }

  .site-header .header-inner.wrap .brand-image-wrap {
    flex-basis: 205px;
  }

  .nav.mobile-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    z-index: 40;
    flex-direction: column;
    gap: 0;
    padding: 10px 18px;
    background: var(--cream, #fbf4ef);
    border: 1px solid rgba(78, 96, 66, 0.16);
    box-shadow: 0 14px 30px rgba(37, 48, 34, 0.14);
  }

  .nav.mobile-open a {
    padding: 12px 4px;
  }

  .site-header .menu {
    display: flex;
  }

  .site-header .nav.mobile-open .mobile-nav-cta {
    display: block;
    margin-top: 8px;
    padding: 12px 16px;
    color: var(--white, #fff);
    text-align: center;
    background: var(--olive, #4e6042);
    border-radius: 3px;
  }
}

@media (max-width: 520px) {
  .site-footer .footer-logo-panel {
    width: 260px;
    height: 110px;
  }

  .site-footer .footer-logo-panel img {
    width: 260px;
    transform: translateY(-22px);
  }
}