html,
body {
  margin: 0;
  min-height: 100%;
  background: #101719;
}

body {
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.site {
  width: 100%;
  min-height: 100vh;
  background: #101719;
}

/* Desktop is intentionally frozen to the approved design image */
.desktop-site {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #101719;
}

.desktop-site img {
  display: block;
  width: 100%;
  min-height: 100vh;
  object-fit: cover;
  object-position: center top;
}

.desktop-contact-hotspot {
  position: absolute;
  top: 4.1%;
  right: 3.3%;
  width: 11.8%;
  height: 6.8%;
  min-width: 112px;
  min-height: 46px;
  z-index: 10;
}

.mobile-site {
  display: none;
}

/* Phones: use responsive layout instead of the zoomed desktop image */
@media (max-width: 767px) {
  .desktop-site {
    display: none;
  }

  .mobile-site {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    overflow: hidden;
    background-image: url("/img/jacobs-well.jpg");
    background-size: cover;
    background-position: center center;
  }

  .mobile-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      linear-gradient(to bottom, rgba(0,0,0,0.44), rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.38)),
      radial-gradient(circle at center, rgba(0,0,0,0.02), rgba(0,0,0,0.24));
  }

  .mobile-header {
    position: relative;
    z-index: 2;
    padding: 24px 18px 12px;
    text-align: center;
  }

  .mobile-logo {
    width: min(255px, 78vw);
    height: auto;
    display: block;
    margin: 0 auto 18px;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.65));
  }

  .mobile-address {
    margin: 0 auto 15px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.35;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.85);
  }

  .mobile-contact {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,0.9);
    padding: 10px 20px;
    font-size: 15px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0,0,0,0.12);
    text-shadow: 0 2px 8px rgba(0,0,0,0.75);
  }

  .mobile-message {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 22px 38px;
    text-align: center;
  }

  .mobile-message h1 {
    max-width: 520px;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 8.1vw, 36px);
    line-height: 1.16;
    letter-spacing: -0.035em;
    color: #fff;
    text-shadow:
      0 3px 12px rgba(0,0,0,0.78),
      0 1px 2px rgba(0,0,0,0.90);
  }

  .mobile-footer {
    position: relative;
    z-index: 2;
    padding: 24px 18px;
    text-align: center;
    background: linear-gradient(135deg, #111719 0%, #1b2528 52%, #101517 100%);
    border-top: 1px solid rgba(255,255,255,0.13);
  }

  .mobile-footer p {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13px;
    line-height: 1.35;
    color: rgba(255,255,255,0.92);
  }
}