/* Luna Window Cleaning — flyer-faithful single page.
   Desktop geometry mirrors the source template at a 1055px container. */

:root {
  --navy: #001c38;        /* header/footer base (sampled) */
  --navy-text: #001038;   /* headline + service titles (sampled) */
  --azure: #0090f0;       /* WINDOWS & MORE, rule (sampled) */
  --cyan: #00a8f0;        /* Mobile label, tagline accents (sampled) */
  --icon-hi: #22b0e6;     /* icon circle gradient light end */
  --icon-lo: #0885cc;     /* icon circle gradient dark end */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  background: var(--navy);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.flyer {
  position: relative;
  z-index: 0;               /* stacking context: lets footer's navy layer sit above
                              the flyer's white bg but below the splash image */
  max-width: 1055px;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}

.header, .splash { display: block; width: 100%; height: auto; }

/* ================= content ================= */
.content {
  position: relative;
  height: 745px;           /* template rows 353–1097 */
  background: #fff;
}

.left {
  position: absolute;
  left: 45px; top: 9px;
  width: 555px;
}

.left h2 {
  margin-left: 5px;
  margin-top: -8px;
  font-family: 'Anton', 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-size: 50px;
  font-weight: 400;          /* Anton is a single heavy weight */
  line-height: 1.21;
  letter-spacing: .5px;
  color: var(--navy-text);
}
.left h2 .azure { color: var(--azure); letter-spacing: 2px; font-size: 48px; }

.tagline {
  margin-left: 5px;
  margin-top: 2px;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--navy-text);
}

.rule {
  margin-left: 5px;
  width: 190px; height: 5px;
  border-radius: 3px;
  background: var(--azure);
  margin-top: 10px;
}

/* ---- services ---- */
.services { list-style: none; }
.service {
  position: absolute;
  left: 1px;                               /* icon left edge at template x=46 */
  display: flex;
  align-items: center;
  gap: 38px;
  width: 560px;
}
.s1 { top: 204px; }   /* icon centre template y=614 */
.s2 { top: 317px; }
.s3 { top: 429px; }
.s4 { top: 546px; }
.s5 { top: 660px; }

.icon {
  flex: none;
  width: 96px; height: 96px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%, var(--icon-hi), var(--icon-lo));
  box-shadow: 0 6px 14px rgba(8, 133, 204, .38);
}
.icon svg { width: 48px; height: 48px; }

.stext h3 {
  font-size: 30px;
  font-weight: 900;
  color: var(--navy-text);
  line-height: 1.2;
}
.stext small {
  display: block;
  font-size: 19px;
  font-weight: 500;
  color: var(--navy-text);
  margin-top: 2px;
}

/* ---- right column ---- */
.hero {
  position: absolute;
  top: 0; right: 0;
  width: 503px;
  display: block;
}

.gallery { position: absolute; right: 30px; top: 0; width: 400px; }
.gallery img {
  position: absolute;
  right: 0;
  width: 400px;
  display: block;
  border: 3px solid #fff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 20, 50, .35);
}
.g1 { top: 322px; }   /* template card outer top y=675 */
.g2 { top: 490px; }
.g3 { top: 638px; }

/* ================= footer ================= */
.footer {
  position: relative;
  margin-top: -111px;      /* footer box top = template y=1155 */
  height: 336px;           /* 1155 -> 1491 */
  color: #fff;
}
.footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy);
  z-index: -1;
}

.phone-row {
  position: absolute;
  left: 80px; top: 45px;    /* label top template y≈1200 */
  display: flex;
  align-items: flex-start;
  gap: 41px;
}
.phone-circle {
  flex: none;
  width: 104px; height: 104px;
  margin-top: 14px;          /* circle top template y≈1213 */
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 32% 26%, var(--icon-hi), var(--icon-lo));
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.phone-circle svg { width: 50px; height: 50px; }

.mobile-label {
  display: block;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--cyan);
}
.phone-number {
  display: block;
  font-size: 78px;
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1.05;
  margin-top: 24px;
}
.phone-number a { color: inherit; text-decoration: none; }

.site-row {
  position: absolute;
  left: 75px; top: 184px;    /* globe centre template y≈1372 */
  display: flex;
  align-items: center;
  gap: 27px;
}
.globe { flex: none; width: 70px; height: 70px; display: block; }
.globe svg { width: 100%; height: 100%; }
.site-url {
  font-size: 47px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.site-url:hover { color: #7fd0ff; }

.divider {
  position: absolute;
  left: 75px; right: 75px; top: 283px;   /* line at template y≈1440 */
  display: flex;
  align-items: center;
  gap: 18px;
}
.divider i { flex: 1; height: 3px; border-radius: 2px; }
.dl { background: linear-gradient(90deg, transparent, var(--azure)); }
.dr { background: linear-gradient(90deg, var(--azure), transparent); }
.sparkle { width: 40px; height: 40px; flex: none; }

/* soap bubbles, top-right of footer */
.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(127, 208, 255, .5), rgba(127, 208, 255, .06) 62%, transparent 70%);
  box-shadow: inset 0 0 0 1.5px rgba(160, 220, 255, .45);
}
.b1 { width: 34px; height: 34px; right: 42px;  top: 108px; }
.b2 { width: 18px; height: 18px; right: 92px;  top: 88px;  }
.b3 { width: 12px; height: 12px; right: 122px; top: 148px; }
.b4 { width: 22px; height: 22px; right: 30px;  top: 62px;  }

/* ================= responsive ================= */
@media (max-width: 1054px) {
  .flyer { background: #fff; }
  .content { height: auto; display: flex; flex-direction: column; }
  .left, .hero, .gallery {
    position: static;
    width: auto;
  }
  .hero { order: -1; width: 100%; padding: 0; }
  .left { padding: 34px 22px 6px; }
  .left h2 { font-size: clamp(30px, 7.4vw, 44px); }
  .tagline { font-size: clamp(14px, 3.4vw, 19px); letter-spacing: 4px; }
  .rule { margin-top: 18px; }

  .services { margin-top: 26px; }
  .service { position: static; width: auto; padding: 12px 22px; gap: 22px; }
  .icon { width: 64px; height: 64px; }
  .icon svg { width: 32px; height: 32px; }
  .stext h3 { font-size: clamp(19px, 4.8vw, 26px); }
  .stext small { font-size: 16px; }

  .gallery {
    width: auto;
    padding: 10px 22px 26px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .gallery img { position: static; width: 100%; }

  /* show only the lower wave on mobile (top of strip contains the
     desktop photo continuation which does not line up when reflowed) */
  .splash-wrap { overflow: hidden; aspect-ratio: 1055 / 96; }
  .splash { margin-top: -6.83%; }   /* skip the top 72px of the strip */

  .footer { margin-top: 0; height: auto; padding: 26px 22px 30px; }
  .phone-row, .site-row, .divider { position: static; }
  .phone-row { gap: 18px; }
  .phone-circle { width: 62px; height: 62px; }
  .phone-circle svg { width: 30px; height: 30px; }
  .mobile-label { font-size: 17px; }
  .phone-number { font-size: clamp(26px, 8vw, 40px); }
  .site-row { margin-top: 22px; gap: 14px; }
  .globe { width: 40px; height: 40px; }
  .site-url { font-size: clamp(14px, 4.1vw, 22px); }
  .divider { margin-top: 26px; }
  .sparkle { width: 28px; height: 28px; }
  .b1, .b2, .b3, .b4 { display: none; }
}