/* Hyrly Cleaning v4 - Luxe, Blue/White, Unique layout, Mobile-first */

:root{
  --blue:#0b4fd6;
  --blue2:#0ea5ff;
  --ink:#0b1220;
  --muted:#5a6b85;
  --bg:#ffffff;
  --tint:#f2f7ff;
  --border:#e3eaf7;
  --shadow: 0 14px 34px rgba(11,79,214,.10);
  --shadow2: 0 12px 30px rgba(15,23,42,.08);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
a{color:inherit; text-decoration:none}
.container{width:min(1120px, calc(100% - 40px)); margin:0 auto;}
.hidden{display:none}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color:#fff;
  font-weight: 900;
  border: 0;
  box-shadow: var(--shadow);
}
.btn--ghost{
  background:#fff;
  color: var(--blue);
  border: 1px solid var(--border);
  box-shadow:none;
}
.btn--sm{padding: 10px 14px; font-size: 14px}
.btn--full{width:100%}

/* Top bar */
.top{
  position: sticky; top:0; z-index: 60;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.top__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
}
.brand{display:flex; align-items:center; gap:10px}
.brand__mark{
  width:40px; height:40px; border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color:#fff;
  font-weight: 950;
}
.brand__text{display:flex; flex-direction:column; line-height:1.05}
.brand__name{font-weight: 950; letter-spacing:.2px}
.brand__sub{font-weight:800; color: var(--muted); font-size: 12px}

.nav{display:flex; align-items:center; gap:16px; font-weight:900; color: var(--muted)}
.nav a{padding: 10px 8px; border-radius: 12px}
.nav a:hover{background: var(--tint); color: var(--ink)}

/* Mobile menu */
.menuBtn{
  display:none;
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.menuBtn span{
  display:block; height:2px; width:18px;
  background: var(--ink);
  margin:4px auto;
  border-radius: 2px;
}
.mobileMenu{
  display:none;
  padding: 10px 0 16px;
  border-top: 1px solid var(--border);
}
.mobileMenu a{
  display:block;
  padding: 12px 0;
  font-weight:950;
  color: var(--muted);
}
.mobileMenu.is-open{display:block}

/* Hero with background images */
.hero{
  position:relative;
  overflow:hidden;
  border-bottom: 1px solid var(--border);
  min-height: 520px;
}
.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(11,79,214,.22), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, rgba(14,165,255,.18), transparent 60%),
    url('https://images.unsplash.com/photo-1581579184683-0f07b068a64f?auto=format&fit=crop&w=2400&q=80') center/cover no-repeat;
  filter: saturate(1.04) contrast(1.03);
  transform: scale(1.03);
}
.hero__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.85) 58%, rgba(255,255,255,1) 100%);
}
.hero__content{
  position:relative;
  padding: 66px 0 30px;
}
.hero__label{
  display:inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(227,234,247,.9);
  color: var(--blue);
  font-weight: 950;
  font-size: 13px;
}
.hero h1{
  margin: 14px 0 10px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(34px, 4.3vw, 56px);
  letter-spacing: -0.8px;
  line-height: 1.06;
  max-width: 820px;
}
.hero p{
  margin: 0 0 18px;
  color: rgba(11,18,32,.78);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.75;
  max-width: 720px;
}
.hero__actions{display:flex; gap: 12px; flex-wrap:wrap; margin: 14px 0 18px}

.hero__highlights{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 10px;
}
.highlight{
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(227,234,247,.95);
  box-shadow: var(--shadow2);
}
.highlight__title{font-weight: 950}
.highlight__text{color: var(--muted); font-weight: 800; margin-top: 4px; font-size: 13px; line-height: 1.35}

.heroWave{display:block; width:100%; height: 80px}
.heroWave path{fill: var(--bg);}

/* Sections */
.section{padding: 54px 0}
.section--tint{
  background: var(--tint);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.section__head h2{
  margin:0;
  font-size: 28px;
  letter-spacing: -0.3px;
}
.section__head p{
  margin:0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 700px;
  font-weight: 750;
}

/* Services grid with images */
.serviceGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
}
.serviceCard{
  border-radius: calc(var(--radius) + 8px);
  overflow:hidden;
  border: 1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow2);
  display:flex;
  flex-direction:column;
}
.serviceCard__img{
  height: 140px;
  background: #eaf2ff;
}
.img--interior{
  background:
    radial-gradient(700px 300px at 30% 30%, rgba(11,79,214,.14), transparent 60%),
    url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
}
.img--windows{
  background:
    radial-gradient(700px 300px at 30% 30%, rgba(14,165,255,.14), transparent 60%),
    url('https://images.unsplash.com/photo-1527515637462-cff94eecc1ac?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
}
.img--wash{
  background:
    radial-gradient(700px 300px at 30% 30%, rgba(11,79,214,.14), transparent 60%),
    url('https://images.unsplash.com/photo-1527786356703-4b100091cd2c?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
}
.img--roof{
  background:
    radial-gradient(700px 300px at 30% 30%, rgba(14,165,255,.14), transparent 60%),
    url('https://images.unsplash.com/photo-1509395176047-4a66953fd231?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat;
}
.serviceCard__body{padding: 14px}
.serviceCard__title{font-weight: 950; font-size: 16px}
.serviceCard__text{color: var(--muted); font-weight: 750; margin-top: 6px; line-height: 1.6; font-size: 14px}

.tags{display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px}
.tag{
  padding: 7px 10px;
  border-radius: 999px;
  background: #eaf2ff;
  color: var(--blue);
  font-weight: 950;
  font-size: 12px;
}

/* CTA strip */
.ctaStrip{
  margin-top: 14px;
  padding: 14px;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--border);
  background:
    radial-gradient(800px 340px at 20% 20%, rgba(11,79,214,.12), transparent 60%),
    radial-gradient(800px 340px at 80% 0%, rgba(14,165,255,.12), transparent 60%),
    #ffffff;
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
}
.ctaStrip__title{font-weight: 950}
.ctaStrip__text{color: var(--muted); font-weight: 800; margin-top: 4px}

/* Reviews */
.reviewGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.review{
  margin:0;
  padding: 16px;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow2);
}
.stars{color: var(--blue); font-weight: 950; letter-spacing: 1px}
.review blockquote{
  margin: 10px 0 10px;
  color: rgba(11,18,32,.82);
  font-weight: 750;
  line-height: 1.7;
}
.review figcaption{color: var(--muted); font-weight: 900}

.reviewBanner{
  margin-top: 14px;
  border-radius: calc(var(--radius) + 10px);
  overflow:hidden;
  min-height: 160px;
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(11,79,214,.22), transparent 60%),
    url('https://images.unsplash.com/photo-1604014238170-4def1e4c0ecf?auto=format&fit=crop&w=2400&q=80') center/cover no-repeat;
  position:relative;
  box-shadow: var(--shadow2);
}
.reviewBanner__overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.78) 55%, rgba(255,255,255,.35) 100%);
}
.reviewBanner__content{
  position:relative;
  padding: 18px;
}
.reviewBanner__title{
  font-family: "Playfair Display", Georgia, serif;
  font-size: 22px;
  font-weight: 700;
}
.reviewBanner__text{color: var(--muted); font-weight: 850; margin-top: 6px}

/* Contact */
.contactGrid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 12px;
  align-items:start;
}
.contactCard{
  padding: 16px;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid var(--border);
  background:
    radial-gradient(800px 340px at 20% 20%, rgba(11,79,214,.10), transparent 60%),
    #ffffff;
  box-shadow: var(--shadow2);
}
.contactCard__title{font-weight: 950}
.contactCard__text{color: var(--muted); font-weight: 800; margin-top: 6px; line-height: 1.6}
.contactCard__mini{margin-top: 14px}
.miniRow{
  display:flex; gap:10px;
  align-items:flex-start;
  color: var(--muted);
  font-weight: 850;
  line-height: 1.6;
  padding: 6px 0;
}

.form{
  padding: 16px;
  border-radius: calc(var(--radius) + 10px);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow2);
}
label{
  display:block;
  font-weight: 950;
  margin-bottom: 10px;
}
input, select, textarea{
  width:100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font: inherit;
}
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: rgba(11,79,214,.55);
  box-shadow: 0 0 0 4px rgba(11,79,214,.12);
}
.formRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fineprint{
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 750;
}

/* Footer */
.footer{
  padding: 24px 0 72px;
  background: #fff;
  border-top: 1px solid var(--border);
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}
.footer__brand{font-weight: 950}
.footer__muted{color: var(--muted); font-weight: 800}

/* Sticky mobile CTA */
.stickyCta{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  background: rgba(255,255,255,.92);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(10px);
  display:none;
}
.stickyCta__btn{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  padding: 14px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--blue2));
  color:#fff;
  font-weight: 950;
  box-shadow: var(--shadow);
}

/* Responsive */
@media (max-width: 1100px){
  .serviceGrid{grid-template-columns: repeat(2, minmax(0,1fr))}
}
@media (max-width: 980px){
  .hero__highlights{grid-template-columns: 1fr}
  .reviewGrid{grid-template-columns: 1fr}
  .contactGrid{grid-template-columns: 1fr}
  .formRow{grid-template-columns: 1fr}
}
@media (max-width: 760px){
  .nav{display:none}
  .menuBtn{display:block}
  .mobileMenu{display:none}
  .mobileMenu.is-open{display:block}
  .stickyCta{display:block}
  .hero__content{padding-top: 52px}
}