/* BlueSpark Cleaning v2 — styles.css */
:root{
  --blue:#0b1f3b;
  --blue-2:#112a50;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#6b7280;
  --orange:#ff7a00;
  --border:#e5e7eb;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --radius:16px;
  --container:1100px;
  --header-h:72px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg,#f3f5f8,#eef2f7);
  line-height:1.65;
  padding-top: var(--header-h); /* keep content below fixed header */
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
h1,h2,h3{margin:0 0 .5rem;color:var(--blue)}
.container{width:min(100% - 2rem, var(--container)); margin-inline:auto}
.section{padding:5rem 0}
.section--light{background:linear-gradient(180deg,#f7f9fc,#eef2f7)}
.section--subtle{background:#fff}

/* Header (fixed) */
.site-header{position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.9rem 0; min-height: var(--header-h);}
.logo{font-weight:900;letter-spacing:.3px;font-size:1.2rem;color:var(--blue)}
.logo .accent{color:var(--orange)}
.primary-nav{display:flex;align-items:center;gap:1rem}
.nav-toggle{display:none;background:none;border:0;font-size:1.25rem}
.nav-menu{display:flex;gap:1rem; list-style: none; margin:0; padding:0;} /* no bullets */
.nav-menu a{padding:.5rem .75rem;border-radius:999px}
.nav-menu a:hover{background:#eef2f7}
.header-cta{margin-left:1rem}

.btn{display:inline-block;padding:.8rem 1rem;border-radius:999px;border:1px solid #d6d6d6;background:#fff;font-weight:700;color:var(--blue);transition:.2s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--orange);border-color:#ef6f00;color:#fff}
.btn--ghost{background:transparent;border-color:#cfd5e1;color:var(--blue)}
.btn--small{padding:.55rem .85rem;font-size:.9rem}

.hero{padding:6rem 0 4rem}
.hero-copy {background-color: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  padding: 1.5rem;      
}
.hero-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center}
.hero h1{
font-size:clamp(2rem,3.5vw,3rem);
color:var(--blue);
line-height: 1;
font: bold;
}
.hero p{color:#334155;
font-weight: bold;
}

.hero h3 {
  line-height: 1;
  margin-bottom: 20px;
  font-size: medium;
}
.hero h2 {
  line-height: 1;
  font-size: x-large;  
}

li h1 {
  line-height: 0.8; 
  color: #ef6f00;
}

li h3 {
  line-height: 1; 
}

.quote h2 {
  line-height: 1.5;
  font-size: x-large;
  margin-bottom: 0px;
}

.quote p {
  line-height: 1.3;   
}

.contact-copy h2 {
  line-height: 1;
}

.contact-copy p {
  line-height: 1;
  margin-bottom: 25px;
}

.section-head p {
   line-height: 1.25;
  margin-bottom: 25px;
}

.section-head h2 {
   line-height: 1;
  margin-bottom: 0px;
}

.hero .hero-media img{border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)}
.badges{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem;color:#334155}
.badges li{background:#e9eff9;border:1px solid #d8e2f4;border-radius:999px;padding:.35rem .6rem; list-style: none;}

/* Logos marquee */
.logos{padding:1.25rem 0;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.logos .container{overflow:hidden}
.logos-track{display:flex;align-items:center;gap:2.5rem;animation:scrollx 30s linear infinite; width:max-content}
.logos img{height:40px;opacity:.8;filter:grayscale(100%);transition:opacity .2s ease}
.logos img:hover{opacity:1;filter:none}
@keyframes scrollx{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.section-head{text-align:center;margin-bottom:2rem}
.card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.card-media{height:190px;width:100%;object-fit:cover}
.card-body{padding:1rem}
.checklist{margin:0;padding:0;list-style:none}
.checklist li{position:relative;padding-left:1.3rem}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;color:#16a34a}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.step .num{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:999px;background:var(--blue);color:#fff;font-weight:800;margin-bottom:.5rem}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.price-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);display:grid;gap:.6rem}
.price-card--highlight{outline:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box, linear-gradient(90deg,#ffbd7a,var(--orange)) border-box;border:2px solid transparent}
.price{font-size:1.75rem;font-weight:900;color:var(--blue)}
.price span{font-size:.95rem;color:var(--muted)}
.feature-list{margin:0;padding-left:1rem}

.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.quote{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}
.quote cite{display:block;margin-top:.5rem;color:var(--muted);font-style:normal}

.masonry{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
.tile{border:1px solid var(--border);border-radius:10px;aspect-ratio:1/1;object-fit:cover;width:100%; grid-column:span 2}
/* .tile:nth-child(2n){grid-column:span 2}
.tile:nth-child(3n){grid-column:span 3} */

.two-col{display:grid;grid-template-columns:1.1fr 1fr;gap:1.25rem;align-items:start}
.contact-copy .muted{color:var(--muted)}
.contact-form{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow)}
.form-row{display:grid;gap:.35rem;margin-bottom:.9rem}
input,textarea{width:100%;padding:.85rem .95rem;border-radius:10px;border:1px solid #cfd5e1;background:#fff;color:var(--text)}
input:focus,textarea:focus{outline:2px solid #ffbd7a;border-color:transparent}

.site-footer{padding:2rem 0;border-top:1px solid var(--border);background:#fff}
.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.footer-logo{display:inline-block;margin-bottom:.25rem;color:var(--blue)}
.footer-links{display:flex;gap:1rem; list-style: none; margin:0; padding:0;}
.muted{color:var(--muted)}

/* Scroll effects */
.site-header.is-scrolled{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.scroll-progress{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--orange);transition:width .1s linear}
[data-animate]{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.in-view{opacity:1;transform:translateY(0)}
[data-animate="fade-in"]{transform:none}
.hero-media img{will-change:transform;transition:transform .6s ease}
[data-parallax-container]{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  [data-animate]{opacity:1 !important;transform:none !important}
}

/* Responsive */
@media (max-width: 1024px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .nav-toggle{display:block}
  .nav-menu{display:none}
  .header-cta{display:none}
  .hero-inner,.two-col{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .quote-grid{grid-template-columns:1fr}
  .masonry{grid-template-columns:repeat(2,1fr)}
}


/*----------------------------------*/

/* Keep things crisp and similar to the screenshot */
.menage-navbar {
  height: 82px;               /* approximate */
  position: center;
}

.navbar-spacer {
  height: 82px;               /* matches navbar height so content starts below */
}

/* Logo sizing */
.brand-logo {
  height: 46px;               /* tweak as needed */
  width: auto;
}

/* Center link spacing + look */
.menage-navlinks .nav-link {
  color: #1e1e1e;
  font-weight: 500;
  padding-left: 14px;
  padding-right: 14px;
}

.menage-navlinks .nav-link:hover,
.menage-navlinks .nav-link:focus {
  color: #0b5ed7; /* bootstrap primary-ish hover */
}

/* Right side CTA */
.menage-cta-label {
  font-size: 18px;
  font-weight: 600;
  color: #1e1e1e;
  line-height: 1.1;
}

.menage-cta-phone {
  font-size: 28px;
  font-weight: 800;
  color: #f07a00; /* orange tone */
  text-decoration: none;
  line-height: 1.1;
}

.menage-cta-phone:hover {
  text-decoration: underline;
}

/* Language button */
.menage-lang-btn {
  background: #f07a00;
  color: #fff;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  border: none;
}

.menage-lang-btn:hover,
.menage-lang-btn:focus {
  background: #d96f00;
  color: #fff;
}

/* Make the collapsed menu feel nice on mobile */
@media (max-width: 991.98px) {
  .menage-navbar {
    height: auto; /* allow it to grow when expanded */
  }

  .navbar-spacer {
    height: 82px; /* still keep initial spacing */
  }

  .menage-right {
    padding-top: 12px;
    padding-bottom: 10px;
    border-top: 1px solid #eee;
    margin-top: 10px;
    padding-right: 20px;
  }

  .menage-cta-phone {
    font-size: 22px; /* slightly smaller on mobile */
  }
}

.nav-item{
  font-size: 20px;
}

.step.in-view h3{
  font-size: x-large;
}