/* Andey's Beachside visual enhancement v4.9
   Safe overrides only: faint coastal background + real 30A map. */

/* Faint beach/ocean atmosphere throughout the site */
html{
  background:#fbf8f1;
}

body{
  position:relative;
  background:
    radial-gradient(circle at 8% 7%, rgba(248,208,105,.09), transparent 25%),
    radial-gradient(circle at 90% 16%, rgba(96,181,198,.10), transparent 30%),
    radial-gradient(circle at 20% 66%, rgba(232,155,120,.055), transparent 28%),
    linear-gradient(
      180deg,
      rgba(229,246,249,.46) 0%,
      rgba(255,252,245,.66) 24%,
      rgba(249,239,219,.48) 49%,
      rgba(230,246,247,.44) 74%,
      rgba(255,251,242,.72) 100%
    );
  background-attachment:fixed;
}

/* Extremely subtle shoreline texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.13;
  background-image:
    radial-gradient(ellipse at 15% 105%, transparent 0 58%, rgba(42,129,149,.20) 59% 60%, transparent 61%),
    radial-gradient(ellipse at 54% 105%, transparent 0 63%, rgba(42,129,149,.14) 64% 65%, transparent 66%),
    radial-gradient(ellipse at 88% -5%, transparent 0 62%, rgba(233,177,95,.13) 63% 64%, transparent 65%);
  background-size:760px 240px, 980px 280px, 820px 300px;
  background-repeat:repeat-x, repeat-x, repeat-x;
  background-position:left bottom, center bottom 58px, right top;
}

/* Let sections softly blend into the new global background */
.about-section,
.area-section{
  background-color:rgba(255,255,255,.18) !important;
}

/* Actual illustrated 30A service map */
.area-card-real-map{
  display:grid !important;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr) !important;
  align-items:stretch;
  overflow:hidden;
  min-height:530px;
}

.real-map-wrap{
  position:relative;
  min-height:530px;
  overflow:hidden;
  background:#eaf4ef;
}

.real-30a-map{
  width:100%;
  height:100%;
  min-height:530px;
  object-fit:cover;
  object-position:center center;
  display:block;
}

.real-map-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent 74%, rgba(18,59,74,.08)),
    linear-gradient(180deg, transparent 78%, rgba(18,59,74,.12));
}

.real-map-badge{
  position:absolute;
  z-index:2;
  left:22px;
  bottom:20px;
  padding:11px 15px;
  border-radius:15px;
  background:rgba(255,253,247,.90);
  box-shadow:0 10px 28px rgba(18,59,74,.15);
  backdrop-filter:blur(8px);
}

.real-map-badge small,
.real-map-badge strong{
  display:block;
}

.real-map-badge small{
  color:#4c8fa0;
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-weight:900;
  font-size:.66rem;
  margin-bottom:2px;
}

.real-map-badge strong{
  color:#123b4a;
  font-family:Georgia,serif;
  font-size:1.05rem;
}

.real-map-copy{
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  padding:50px 44px !important;
}

/* Mobile */
@media(max-width:940px){
  body{background-attachment:scroll}
  .area-card-real-map{
    grid-template-columns:1fr !important;
  }
  .real-map-wrap,
  .real-30a-map{
    min-height:430px;
  }
}

@media(max-width:620px){
  .real-map-wrap,
  .real-30a-map{
    min-height:350px;
  }
  .real-map-copy{
    padding:36px 25px !important;
  }
  .real-map-badge{
    left:13px;
    bottom:13px;
  }
}