:root {
  --blue:#0564c9;
  --navy:#071e4a;
  --green:#08a65a;
  --green-dark:#078447;
  --teal:#0f8f8d;
  --soft:#f2f8fc;
  --text:#263247;
  --muted:#5c6b82;
  --card:#fff;
  --shadow:0 16px 45px rgba(7,30,74,.12);
  --radius:22px}

* {
  box-sizing:border-box}

body {
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#fff,#f6fbff);
  line-height:1.55}

a {
  text-decoration:none;
  color:inherit}

.splash {
  position:fixed;
  inset:0;
  z-index:20;
  background:radial-gradient(circle at center,#fff 0%,#eef8ff 70%);
  display:grid;
  place-items:center;
  text-align:center;
  transition:opacity .8s ease,visibility .8s ease;
  overflow:hidden}

.splash.hide {
  opacity:0;
  visibility:hidden}

.splash-orbit {
  position:absolute;
  width:430px;
  height:430px;
  border-radius:50%;
  border:10px solid rgba(5,100,201,.08);
  box-shadow:0 0 0 26px rgba(5,100,201,.04);
  animation:spin 4s linear infinite}

.splash-orbit:before,.splash-orbit:after {
  content:"✦";
  position:absolute;
  color:white;
  text-shadow:0 0 20px rgba(5,100,201,.45);
  font-size:34px}

.splash-orbit:before {
  top:20px;
  left:55px}

.splash-orbit:after {
  right:35px;
  bottom:80px}

.splash-mascot {
  position:relative;
  width:min(290px,58vw);
  border-radius:22px;
  mix-blend-mode:multiply;
  animation:float 2.4s ease-in-out infinite}

.splash h1 {
  position:relative;
  margin:10px 0 0;
  color:var(--blue);
  font-size:clamp(56px,12vw,96px);
  line-height:.85}

.splash h1 small {
  display:block;
  color:var(--green-dark);
  font-size:.32em}

.splash p {
  font-size:22px;
  margin:22px 0 16px}

.loading-bar {
  width:260px;
  height:9px;
  border-radius:99px;
  background:#b9dcff;
  overflow:hidden}

.loading-bar span {
  display:block;
  height:100%;
  width:70%;
  background:var(--blue);
  border-radius:99px;
  animation:load 3.8s ease forwards}

.splash strong {
  color:var(--blue);
  margin-top:10px}

.site-header {
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px clamp(18px,6vw,86px);
  box-shadow:0 6px 28px rgba(7,30,74,.08)}

.brand {
  display:flex;
  align-items:center;
  gap:10px}

.brand img {
  width:72px;
  height:72px;
  object-fit:contain;
  border-radius:8px;
  mix-blend-mode:multiply}

.brand strong {
  display:block;
  color:var(--blue);
  font-size:34px;
  line-height:.9}

.brand small {
  display:block;
  color:var(--green-dark);
  font-weight:800;
  font-size:17px}

.nav-toggle {
  display:none;
  border:0;
  background:var(--blue);
  color:#fff;
  border-radius:10px;
  padding:8px 12px;
  font-size:22px}

.nav-links {
  display:flex;
  align-items:center;
  gap:28px;
  font-weight:750;
  color:var(--navy)}

.nav-links a {
  padding:10px 0}

.nav-links a.active {
  color:var(--blue);
  border-bottom:3px solid var(--blue)}

.book-button,.primary-button {
  background:linear-gradient(135deg,var(--green),#05b66a);
  color:white!important;
  border-radius:12px;
  padding:13px 20px!important;
  box-shadow:0 10px 22px rgba(8,166,90,.25)}

main {
  overflow:hidden}

.hero {
  min-height:560px;
  padding:70px clamp(22px,6vw,94px);
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:30px;
  align-items:center;
  background:linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.64)),url('assets/images/abell-mascot.jpeg');
  background-size:0}

.hero-copy h1 {
  font-size:clamp(44px,6vw,76px);
  line-height:1.05;
  color:var(--navy);
  margin:0 0 22px}

.hero-copy h1 span {
  display:block;
  color:var(--green)}

.hero-copy p {
  max-width:620px;
  font-size:22px;
  color:#3b465b}

.hero-actions {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:28px}

.secondary-button {
  border:2px solid var(--blue);
  color:var(--blue);
  border-radius:12px;
  padding:13px 20px;
  font-weight:800;
  background:#fff}

.hero-visual {
  position:relative;
  min-height:390px;
  display:grid;
  place-items:center}

.hero-visual img {
  width:min(360px,60vw);
  border-radius:22px;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 20px 20px rgba(7,30,74,.18))}

.cleaning-bucket {
  position:absolute;
  right:8%;
  bottom:0;
  width:210px;
  height:150px;
  background:linear-gradient(145deg,#3199bd,#146f91);
  border-radius:18px 18px 34px 34px;
  box-shadow:var(--shadow)}

.cleaning-bucket span {
  position:absolute;
  bottom:115px;
  width:42px;
  height:95px;
  border-radius:10px;
  background:#e8fff0;
  border:4px solid #0d7d68}

.cleaning-bucket span:nth-child(1) {
  left:25px;
  transform:rotate(-12deg)}

.cleaning-bucket span:nth-child(2) {
  left:86px;
  background:#fff}

.cleaning-bucket span:nth-child(3) {
  right:22px;
  background:#1da5e8}

.trust-strip,.service-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  padding:0 clamp(22px,6vw,94px);
  margin-top:-52px;
  position:relative}

.trust-strip article,.service-card,.info-panels article,.package-card,.profile-card,.gallery-card,.booking-card {
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid rgba(7,30,74,.08)}

.trust-strip article {
  padding:26px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px}

.trust-strip span,.service-card span {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  background:#dff7ea;
  border-radius:50%;
  font-size:30px;
  color:var(--green-dark)}

.trust-strip h3,.service-card h3 {
  margin:0;
  color:var(--navy);
  line-height:1.15}

.trust-strip p {
  margin:4px 0 0;
  color:var(--muted)}

.section-block {
  padding:54px clamp(22px,6vw,94px)}

.section-heading h2,.info-panels h2,.page-hero h1 {
  color:var(--navy);
  font-size:36px;
  margin:0 0 8px}

.section-heading h2:after,.info-panels h2:after {
  content:"";
  display:block;
  width:52px;
  height:4px;
  background:var(--green);
  border-radius:4px;
  margin-top:8px}

.section-heading p {
  margin:0 0 26px;
  color:var(--muted)}

.service-grid {
  padding:0;
  margin:0}

.service-card {
  padding:26px;
  min-height:250px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:.2s}

.service-card:hover {
  transform:translateY(-5px)}

.service-card p {
  color:var(--muted);
  margin:0}

.service-card strong {
  margin-top:auto;
  color:var(--blue)}

.info-panels {
  padding:0 clamp(22px,6vw,94px) 64px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px}

.info-panels article {
  padding:30px;
  background:linear-gradient(135deg,#f2fff6,#f4fbff)}

.info-panels ul {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  padding:0;
  list-style:none}

.info-panels li:before {
  content:"✓";
  background:var(--green);
  color:#fff;
  border-radius:50%;
  padding:1px 6px;
  margin-right:8px}

.location:before {
  content:"📍 ";
  font-size:24px}

.site-footer {
  background:#07224d;
  color:#dbe9ff;
  padding:34px clamp(22px,6vw,94px);
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:30px}

.site-footer a {
  display:block;
  color:#fff;
  margin:7px 0}

.footer-brand img {
  width:64px;
  mix-blend-mode:screen}

.footer-brand strong {
  font-size:34px;
  color:#fff;
  display:block}

.footer-brand small {
  display:block;
  color:#6be69b;
  font-weight:800}

.page-hero {
  text-align:center;
  padding:70px 22px 28px}

.placeholder-page {
  padding:0 clamp(22px,6vw,94px) 80px}

.packages-grid,.profiles-grid,.gallery-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px}

.package-card,.profile-card,.gallery-card,.booking-card {
  padding:28px}

.package-card h3 {
  background:var(--teal);
  color:#fff;
  margin:-28px -28px 24px;
  padding:14px;
  border-radius:var(--radius) var(--radius) 0 0;
  text-align:center}

.price {
  font-size:42px;
  color:var(--navy);
  font-weight:900}

.package-card ul {
  padding-left:20px}

.package-card li::marker {
  color:var(--green)}

.profile-card {
  text-align:center}

.profile-photo {
  width:105px;
  height:105px;
  border-radius:50%;
  background:linear-gradient(135deg,#d9ecff,#e9fff2);
  margin:0 auto 16px;
  display:grid;
  place-items:center;
  font-size:46px}

.gallery-card {
  height:180px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#edf7ff,#f6fff8);
  font-weight:900;
  color:var(--navy)}

.booking-card {
  max-width:900px;
  margin:auto}

.booking-form {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px}

.booking-form label {
  font-weight:800}

.booking-form input,.booking-form select,.booking-form textarea {
  width:100%;
  padding:13px;
  border:1px solid #d6e1ec;
  border-radius:10px;
  font:inherit}

.booking-form textarea,.booking-form button {
  grid-column:1/-1}

.booking-form button {
  border:0;
  cursor:pointer;
  font-weight:900}

.site-ready {
  padding:14px;
  background:#e8fff2;
  color:#075b35;
  text-align:center;
  font-weight:800}

@keyframes spin {
  to {
  transform:rotate(360deg)}

}

@keyframes float {
  50% {
  transform:translateY(-12px)}

}

@keyframes load {
  from {
  width:0}

to {
  width:100%}

}

@media(max-width:980px) {
  .nav-toggle {
  display:block}

.nav-links {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  background:#fff;
  display:none;
  flex-direction:column;
  padding:18px;
  box-shadow:var(--shadow)}

.nav-links.open {
  display:flex}

.hero {
  grid-template-columns:1fr;
  text-align:center;
  padding-top:44px}

.hero-copy p {
  margin-inline:auto}

.hero-actions {
  justify-content:center}

.trust-strip,.service-grid,.packages-grid,.profiles-grid,.gallery-grid {
  grid-template-columns:1fr 1fr}

.info-panels,.site-footer {
  grid-template-columns:1fr}

.cleaning-bucket {
  right:50%;
  transform:translateX(50%);
  opacity:.95}

}

@media(max-width:620px) {
  .brand img {
  width:56px;
  height:56px}

.brand strong {
  font-size:28px}

.hero-copy h1 {
  font-size:42px}

.trust-strip,.service-grid,.packages-grid,.profiles-grid,.gallery-grid,.booking-form {
  grid-template-columns:1fr}

.trust-strip {
  margin-top:0}

.splash-orbit {
  width:330px;
  height:330px}

.cleaning-bucket {
  display:none}

}

/* Business name and heading styling: Rubik from Google Fonts. */
.business-name,
.brand strong,
.brand small,
.footer-brand strong,
.footer-brand small,
.splash h1,
.splash h1 small,
.hero-copy h1,
.section-heading h2,
.info-panels h2,
.page-hero h1,
.package-card h3,
.service-card h3,
.trust-strip h3  {
  
  font-family: 'Rubik', 'Arial Black', Arial, sans-serif;
  
  font-weight: 900;
  
  letter-spacing: .02em;

}

.business-name,
.brand strong,
.brand small,
.footer-brand strong,
.footer-brand small,
.splash h1,
.splash h1 small  {
  
  text-transform: uppercase;

}

.brand .business-name  {
  
  display: block;
  
  color: var(--blue);
  
  font-size: 28px;
  
  line-height: .95;

}

.footer-brand .business-name  {
  
  display: block;
  
  color: #fff;
  
  font-size: 28px;
  
  line-height: 1;

}

.splash .business-name  {
  
  display: block;
  
  color: var(--blue);
  
  font-size: clamp(42px, 9vw, 78px);
  
  line-height: .95;

}

@media (max-width: 620px)  {
  
  .brand .business-name  {
  
    font-size: 22px;
  
  }

  .footer-brand .business-name  {
  
    font-size: 24px;
  
  }

}