@media (max-width: 600px) {
  .hero {
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--space-6));
  }
}
/* ===== HERO SECTION ===== */

.hero {
  --hero-overlay: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.18) 0%,
    rgba(1, 87, 179, 0.48) 100%
  );
  width: 100%;
  /* min-height: calc(100vh - var(--navbar-height)); */
  min-height: min(calc(100vh - var(--navbar-height)), 720px);
  margin-top: 0;
  padding-top: var(--space-6);
  padding-bottom: clamp(0rem, 1vh, 0.75rem);   /* ✅ valid clamp */
  padding-inline: var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* Solid fallback if images fail to load */
  background-color: #0157b3;

  /* Fallback image under a light overlay */
  background-image:
    var(--hero-overlay),
    url('/static/img/hero-desktop.jpg');

  /* Modern: gradient overlay + responsive images */
  background-image:
    var(--hero-overlay),
    -webkit-image-set(
      url('/static/img/hero-desktop.webp') type("image/webp") 1x,
      url('/static/img/hero-desktop@2x.webp') type("image/webp") 2x,
      url('/static/img/hero-desktop.jpg') type("image/jpeg") 1x,
      url('/static/img/hero-desktop@2x.jpg') type("image/jpeg") 2x
    );
  background-image:
    var(--hero-overlay),
    image-set(
      url('/static/img/hero-desktop.webp') type("image/webp") 1x,
      url('/static/img/hero-desktop@2x.webp') type("image/webp") 2x,
      url('/static/img/hero-desktop.jpg') type("image/jpeg") 1x,
      url('/static/img/hero-desktop@2x.jpg') type("image/jpeg") 2x
    );

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
  z-index: 0;
}

/* Mobile background swap - Portrait */
@media (max-width: 768px) and (orientation: portrait) {
  .hero {
    background-image:
      var(--hero-overlay),
      url('/static/img/hero-mobile.jpg');
    background-image:
      var(--hero-overlay),
      -webkit-image-set(
        url('/static/img/hero-mobile.webp') type("image/webp") 1x,
        url('/static/img/hero-mobile@2x.webp') type("image/webp") 2x,
        url('/static/img/hero-mobile.jpg') type("image/jpeg") 1x,
        url('/static/img/hero-mobile@2x.jpg') type("image/jpeg") 2x
      );
    background-image:
      var(--hero-overlay),
      image-set(
        url('/static/img/hero-mobile.webp') type("image/webp") 1x,
        url('/static/img/hero-mobile@2x.webp') type("image/webp") 2x,
        url('/static/img/hero-mobile.jpg') type("image/jpeg") 1x,
        url('/static/img/hero-mobile@2x.jpg') type("image/jpeg") 2x
      );
    background-position: center 35%;
  }
}

/* Mobile background swap - Landscape */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    background-image:
      var(--hero-overlay),
      url('/static/img/hero-mobile-landscape.jpg');
    background-image:
      var(--hero-overlay),
      -webkit-image-set(
        url('/static/img/hero-mobile-landscape.webp') type("image/webp") 1x,
        url('/static/img/hero-mobile-landscape@2x.webp') type("image/webp") 2x,
        url('/static/img/hero-mobile-landscape.jpg') type("image/jpeg") 1x,
        url('/static/img/hero-mobile-landscape@2x.jpg') type("image/jpeg") 2x
      );
    background-image:
      var(--hero-overlay),
      image-set(
        url('/static/img/hero-mobile-landscape.webp') type("image/webp") 1x,
        url('/static/img/hero-mobile-landscape@2x.webp') type("image/webp") 2x,
        url('/static/img/hero-mobile-landscape.jpg') type("image/jpeg") 1x,
        url('/static/img/hero-mobile-landscape@2x.jpg') type("image/jpeg") 2x
      );
    background-position: center;
  }
}

/* Tablet background swap - Portrait */
@media (min-width: 769px) and (max-width: 1023px) and (orientation: portrait) {
  .hero {
    background-image:
      var(--hero-overlay),
      url('/static/img/hero-tablet-portrait.jpg');
    background-image:
      var(--hero-overlay),
      -webkit-image-set(
        url('/static/img/hero-tablet-portrait.webp') type("image/webp") 1x,
        url('/static/img/hero-tablet-portrait@2x.webp') type("image/webp") 2x,
        url('/static/img/hero-tablet-portrait.jpg') type("image/jpeg") 1x,
        url('/static/img/hero-tablet-portrait@2x.jpg') type("image/jpeg") 2x
      );
    background-image:
      var(--hero-overlay),
      image-set(
        url('/static/img/hero-tablet-portrait.webp') type("image/webp") 1x,
        url('/static/img/hero-tablet-portrait@2x.webp') type("image/webp") 2x,
        url('/static/img/hero-tablet-portrait.jpg') type("image/jpeg") 1x,
        url('/static/img/hero-tablet-portrait@2x.jpg') type("image/jpeg") 2x
      );
    background-position: center 30%;
  }
}

/* Tablet background swap - Landscape */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
  .hero {
    background-image:
      var(--hero-overlay),
      url('/static/img/hero-tablet-landscape.jpg');
    background-image:
      var(--hero-overlay),
      -webkit-image-set(
        url('/static/img/hero-tablet-landscape.webp') type("image/webp") 1x,
        url('/static/img/hero-tablet-landscape@2x.webp') type("image/webp") 2x,
        url('/static/img/hero-tablet-landscape.jpg') type("image/jpeg") 1x,
        url('/static/img/hero-tablet-landscape@2x.jpg') type("image/jpeg") 2x
      );
    background-image:
      var(--hero-overlay),
      image-set(
        url('/static/img/hero-tablet-landscape.webp') type("image/webp") 1x,
        url('/static/img/hero-tablet-landscape@2x.webp') type("image/webp") 2x,
        url('/static/img/hero-tablet-landscape.jpg') type("image/jpeg") 1x,
        url('/static/img/hero-tablet-landscape@2x.jpg') type("image/jpeg") 2x
      );
    background-position: center;
  }
}

/* Legacy high-DPI fallback */
@supports not (background-image: image-set(url("x") 1x)) {
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero {
      background-image:
        var(--hero-overlay),
        url('/static/img/hero-desktop@2x.jpg');
    }
  }

  @media (max-width: 768px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2),
         (max-width: 768px) and (orientation: portrait) and (min-resolution: 192dpi) {
    .hero {
      background-image:
        var(--hero-overlay),
        url('/static/img/hero-mobile@2x.jpg');
    }
  }

  @media (max-width: 768px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2),
         (max-width: 768px) and (orientation: landscape) and (min-resolution: 192dpi) {
    .hero {
      background-image:
        var(--hero-overlay),
        url('/static/img/hero-mobile-landscape@2x.jpg');
    }
  }

  @media (min-width: 769px) and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2),
         (min-width: 769px) and (max-width: 1023px) and (orientation: portrait) and (min-resolution: 192dpi) {
    .hero {
      background-image:
        var(--hero-overlay),
        url('/static/img/hero-tablet-portrait@2x.jpg');
    }
  }

  @media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2),
         (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) and (min-resolution: 192dpi) {
    .hero {
      background-image:
        var(--hero-overlay),
        url('/static/img/hero-tablet-landscape@2x.jpg');
    }
  }
}

/* avoid extra gap if last child has margin */
.hero > *:last-child {
  margin-bottom: 0;
}

/* LOGO */
.hero-logo img {
  width: 160px;
  margin-bottom: var(--space-4);
  margin-top: var(--space-2);
}

@media (min-width: 1024px), ((min-width: 769px) and (max-width: 1366px) and (orientation: landscape)), ((min-width: 601px) and (max-width: 768px) and (orientation: landscape)) {
  .page-home.wordstamp-handoff-enabled [data-hero-wordstamp] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
    will-change: opacity, transform;
  }

  .page-home.wordstamp-handoff-enabled.wordstamp-past-hero [data-hero-wordstamp] {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-home.wordstamp-handoff-enabled [data-hero-wordstamp] {
    transition: none;
  }
}

/* MAIN TEXT */
.hero-paragraph p {
  color: var(--text-tertiary) !important;
  line-height: 1.6;
  max-width: 650px; /*550px;*/
  font-size: var(--text-base);
  /* font-weight: 300; */

  /* a bit tighter, and symmetric */
  /* margin-top: clamp(0.75rem, 2vh, 1.25rem); */
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
  margin-bottom: clamp(1.5rem, 4vh, 2.5rem);
}

/* softer on mobile still fine as you had */
@media (max-width: 768px) {
  .hero-paragraph p {
    max-width: clamp(22ch, 80vw, 32ch);
    padding-inline: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}



/*Softer on mobile*/
@media (max-width: 768px) {
  .hero-paragraph p {
    max-width: clamp(22ch, 80vw, 32ch);
    padding-inline: 1rem;
    margin-top: 1.25rem;
    margin-bottom: 2.5rem;
  }
}

/* Typing effect for hero tagline */
.hero-typed {
  /* Disable typing animation: show text normally */
  display: inline;
  white-space: normal;
  overflow: visible;
  border-right: none;
  color: var(--text-tertiary) !important;
  animation: none !important;
  width: auto;
  margin-bottom: var(--space-4);
}

/* Type the text on */
@keyframes hero-typing {
  from { width: 0; }
  to   { width: 52ch; }   /* ≈ length of the sentence – tweak if it cuts off */
}

/* Blinking caret */
@keyframes hero-caret {
  0%, 100% { border-color: transparent; }
  50%      { border-color: rgba(255,255,255,0.8); }
}

@media (max-width: 480px),
       (prefers-reduced-motion: reduce) {
  .hero-typed {
    animation: none;
    border-right: none;
    white-space: normal;  
    width: auto;
  }
}

/* Ensure hero typed text is centered and has side padding on small screens */
@media (max-width: 768px) {
  .hero-paragraph .hero-typed {
    display: block !important;
    margin: clamp(0.5rem, 2vw, 1rem) auto;
    text-align: center !important;
    max-width: calc(100% - 2rem);
    padding-inline: 1rem;
    width: auto;
  }
}

/* BUTTON ROW */
/* also trim the gap under the buttons so Services isn't pushed down too far */
.hero-buttons {
  display: flex;
  gap: clamp(0.5rem, 2vw, 1.25rem);
  margin-top: clamp(1rem, 3vw, 2rem);
  justify-content: center;
  flex-wrap: wrap;
  /* margin-bottom: clamp(1.5rem, 4vh, 2.5rem); */
  margin-bottom: var(--space-4);
}

/* Let global .btn handle padding/width; just constrain max width a bit */
.hero-buttons .btn {
  max-width: 150px;
  min-width: 130px;
}

/* Keep hero buttons vertically compact despite global spacing increases */
.hero-buttons .btn {
  padding: 0.5rem 1.5rem; /* restore original vertical padding */
}

/* Slightly smaller label text in hero */
.hero-buttons .btn {
  font-size: clamp(0.85rem, 1.75vw, 0.90rem);
  font-weight: 250;
}



/* RICS logo: closer to the text, not miles away */
.rics-logo img {
  width: clamp(80px, 110px, 125px);
  /* increase spacing from hero paragraph (50% larger than previous) */
  margin-top: clamp(3.375rem, 9vh, 5.625rem);
  margin-bottom: var(--space-2);
}



/* GHOST / OUTLINE VARIANT (good for hero middle button) */
.btn-outline {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.8);
}

.btn-outline:hover,
.btn-outline:active {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: #fff;
}

/* Mobile: reduce hero button widths for tighter layout */
@media (max-width: 480px) {
  .hero-buttons .btn {
    max-width: 120px;
    min-width: 90px;
  }
}
/* Ensure no gap at bottom of hero */
.hero {
  margin-bottom: 0;
  padding-bottom: 0;
}