:root {
  --navy: #10233f;
  --green: #218567;
  --light: #f4f7f8;
  --text: #243247;
  --muted: #64748b;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  line-height: 1.6;
}

.container {
  width: min(1100px, 90%);
  margin: auto;
}

header {
  background: white;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
}

.logo {
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 1px;
}

.nav-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.nav-links a {
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}

.hero {
  background: linear-gradient(125deg, #10233f, #205a67);
  color: white;
  padding: 105px 0;
}

.hero-content {
  max-width: 720px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: bold;
  color: #a9e5d0;
}

h1 {
  font-size: clamp(38px, 6vw, 66px);
  line-height: 1.1;
  margin: 18px 0;
}

h2 {
  color: var(--navy);
  font-size: 32px;
  margin-bottom: 12px;
}

.hero p {
  color: #e0eaf0;
  font-size: 18px;
  max-width: 580px;
}

.button {
  display: inline-block;
  background: var(--green);
  color: white;
  padding: 13px 24px;
  border-radius: 8px;
  border: 0;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  margin-top: 15px;
}

.button:hover {
  background: #17694f;
}

section {
  padding: 75px 0;
}

.section-intro {
  color: var(--muted);
  max-width: 680px;
}

.services {
  background: var(--light);
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 35px;
}

.service-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 25px;
}

.service-icon {
  font-size: 35px;
}

.service-card h3 {
  color: var(--navy);
}

.service-card p {
  color: var(--muted);
  font-size: 14px;
}

.status {
  display: inline-block;
  background: #e6f5ee;
  color: #17694f;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
}

.status.future {
  background: #edf0f4;
  color: #667085;
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 30px;
}

.step-number {
  color: var(--green);
  font-size: 30px;
  font-weight: bold;
}

.quote {
  background: var(--light);
}

form {
  background: white;
  border-radius: 14px;
  padding: 30px;
  max-width: 650px;
  border: 1px solid #e5e7eb;
}

label {
  display: block;
  margin: 15px 0 6px;
  font-weight: bold;
  font-size: 14px;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  font: inherit;
}

textarea {
  min-height: 100px;
}

.notice {
  color: var(--muted);
  font-size: 13px;
}

footer {
  background: var(--navy);
  color: white;
  padding: 35px 0;
}

footer p {
  color: #cbd5e1;
  font-size: 13px;
}

@media (max-width: 850px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .steps {
    grid-template-columns: 1fr;
  }

  nav {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .hero {
    padding: 75px 0;
  }

  form {
    padding: 20px;
  }
}


/* YEK COMMERCE visual redesign — original form and IDs retained */
:root{--navy:#132a2d;--green:#28765e;--light:#f5f7f3;--text:#233533;--muted:#66736e}
body{font-family:Arial,Helvetica,sans-serif;background:#fff;color:var(--text)}
.container{width:min(1180px,90%)}
header{border-bottom:1px solid #e7ece7;background:rgba(255,255,255,.97)}
nav{padding:21px 0}.logo{font-size:18px;letter-spacing:2px}.nav-links a{font-weight:600}.nav-links a:last-child{color:var(--green)}
.hero{background:#eef2eb;color:var(--navy);padding:66px 0 76px;overflow:hidden}
.hero-layout{display:grid;grid-template-columns:1fr 1.08fr;align-items:center;gap:6%}
.hero-content{max-width:560px}.eyebrow{color:#3c7663;font-size:11px;letter-spacing:1.7px;display:flex;align-items:center;gap:9px}
.eyebrow-dot{height:8px;width:8px;background:#4d9a78;border-radius:50%;display:inline-block}
.hero h1{font-size:clamp(54px,6.2vw,91px);letter-spacing:-3.5px;line-height:1.02;margin:26px 0 24px}
.hero h1 em,.section-heading h2 em{font-family:Georgia,serif;font-weight:400;color:#44866a}
.hero p{color:#596b63;font-size:17px;max-width:475px;line-height:1.75}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.hero-actions .button{margin:0;padding:16px 22px;background:#28765e;box-shadow:0 9px 20px #174b3620}
.button-secondary{color:#245744;font-size:14px;font-weight:700;text-decoration:none}
.hero .hero-footnote{font-size:12px;color:#76847a;margin-top:22px;line-height:1.6}
.hero-visual{height:490px;position:relative;border-radius:160px 160px 14px 14px;overflow:visible}
.hero-visual>img{width:100%;height:100%;object-fit:cover;border-radius:160px 160px 14px 14px;display:block;background:#d6e1d9}
.visual-note{position:absolute;bottom:28px;left:-34px;display:flex;gap:12px;align-items:center;background:white;padding:16px 20px;border-radius:12px;box-shadow:0 16px 40px #1b332c2b}
.visual-note-icon{background:#e8f3e9;color:#32785c;width:39px;height:39px;display:grid;place-items:center;border-radius:50%;font-size:25px}
.visual-note strong,.visual-note small{display:block}.visual-note strong{font-size:14px}.visual-note small{color:#7b8b80;font-size:12px}
section{padding:90px 0}.services{background:#fff}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:35px}
.section-kicker{font-size:12px;letter-spacing:2px;color:#478467;font-weight:800}.section-heading h2{font-size:clamp(34px,4vw,51px);line-height:1.13;letter-spacing:-1.4px;margin:14px 0 0}
.section-heading .section-intro{max-width:370px;font-size:15px}.cleaning-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:0}
.service-card{padding:0;border:1px solid #e5ebe5;overflow:hidden;border-radius:14px;box-shadow:0 10px 32px #1a322908}
.service-photo{height:215px;background:#e4eae3;overflow:hidden}.service-photo img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.service-card:hover img{transform:scale(1.04)}
.service-body{padding:25px}.service-index{font-size:10px;letter-spacing:1.7px;color:#478467;font-weight:800}
.service-body h3{font-size:23px;letter-spacing:-.6px;margin:12px 0 8px}.service-body p{font-size:14px;min-height:67px}.service-body a{color:#28765e;text-decoration:none;font-size:14px;font-weight:800}
.future-note{margin-top:27px;color:#7a887e;font-size:13px}
#how-it-works{background:#f4f7f3}#how-it-works h2,#about h2,.quote h2{font-size:clamp(30px,4vw,44px);letter-spacing:-1px}
.steps>div{background:white;padding:30px;border-radius:12px;border:1px solid #e7ebe5}
.quote{background:#eef2eb}.quote form{box-shadow:0 15px 45px #183f2c0c;border-color:#dce6dd}
.button:focus-visible,.button-secondary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #78ba9c;outline-offset:3px}
@media(max-width:850px){.hero-layout{grid-template-columns:1fr;gap:38px}.hero-visual{height:430px;max-width:650px}.cleaning-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.section-heading{align-items:start;flex-direction:column;gap:8px}}
@media(max-width:520px){.hero{padding:52px 0 65px}.hero h1{font-size:56px;letter-spacing:-2.5px}.hero-visual{height:340px;border-radius:90px 90px 12px 12px}.hero-visual>img{border-radius:90px 90px 12px 12px}.visual-note{left:12px;bottom:15px;padding:11px 13px}.cleaning-grid{grid-template-columns:1fr}.section-heading h2{font-size:37px}.service-photo{height:220px}section{padding:65px 0}.hero-actions{gap:16px}}

/* QUOTE FORM V2 — local preview */
.quote-shell{max-width:810px;margin-top:32px;background:#fff;border:1px solid #dce6dd;border-radius:18px;box-shadow:0 15px 45px #183f2c0c;overflow:hidden}
.quote-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:24px 32px 16px;color:#64746a;font-size:13px;font-weight:700}.quote-pill{color:#246a51;background:#eaf4ed;padding:7px 11px;border-radius:50px;font-size:11px;letter-spacing:.6px}
.progress-track{height:5px;background:#e9efe9}.progress-track>div{height:100%;width:20%;background:#28765e;transition:width .25s}
.quote-shell form{max-width:none;border:0;box-shadow:none;padding:28px 32px 24px}.quote-step{border:0;margin:0;padding:0;min-width:0}.quote-step[hidden],.success-panel[hidden],.form-error[hidden],.wizard-actions [hidden]{display:none!important}
.quote-step legend{font-size:clamp(23px,3vw,30px);font-weight:800;letter-spacing:-.6px;color:#132a2d;padding:0}.step-desc{color:#66736e;margin:8px 0 24px}.field-help{font-size:12px;color:#66736e;margin:7px 0 15px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid>div{min-width:0}
.quote-shell input,.quote-shell select,.quote-shell textarea{background:#fcfdfb;min-height:48px}.quote-shell textarea{min-height:115px}.quote-shell label{margin-top:18px}.wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:30px}.wizard-actions .button{margin-top:0}.wizard-back{border:1px solid #cad8cd;border-radius:8px;padding:13px 20px;background:white;color:#245744;font-weight:700;cursor:pointer}.form-error{color:#a51e24;background:#fff1f0;border:1px solid #f4c6c5;padding:12px;border-radius:8px;margin-top:18px}
.review-card{border:1px solid #e2e9e2;border-radius:12px;margin:14px 0;padding:16px 18px;background:#fcfdfb}.review-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.review-heading h3{margin:0;color:#132a2d;font-size:16px}.review-heading button{background:transparent;color:#28765e;border:0;font-weight:800;cursor:pointer;text-decoration:underline}.review-card dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:12px 0 0}.review-card dt{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#66736e}.review-card dd{margin:2px 0 0;overflow-wrap:anywhere;font-size:14px}.success-panel{padding:35px;text-align:center}.success-panel h3{font-size:30px;color:#132a2d}.success-panel p{color:#596b63;max-width:550px;margin:auto}.success-mark{font-size:32px;color:#28765e;background:#eaf4ed;border-radius:50%;display:inline-grid;place-items:center;width:60px;height:60px}
@media(max-width:520px){.quote-top{padding:18px 20px 14px}.quote-shell form{padding:23px 20px}.form-grid,.review-card dl{grid-template-columns:1fr}.wizard-actions{flex-wrap:wrap}.wizard-actions .button{margin-left:auto}}


/* V2.1: sticky-header clearance and responsive quote experience */
html{scroll-padding-top:110px}
#home,#services,#how-it-works,#about,#quote,#contact{scroll-margin-top:105px}
.quote-shell{scroll-margin-top:110px}
.quote-step legend{line-height:1.25}
.review-card{background:#fff;border-color:#dce6dd;padding:20px 22px;box-shadow:0 4px 16px #173b2b08}
.review-heading{padding-bottom:10px;border-bottom:1px solid #edf1ec}
.review-heading button{font:inherit;font-size:13px;padding:8px 10px;border-radius:6px}
.review-heading button:hover{background:#eaf4ed}
.review-card dl{gap:12px 20px}
.review-card dd{font-weight:600;line-height:1.5}
.success-panel{padding:48px 30px}
.success-panel .button{margin-top:24px}
@media(max-width:700px){
  nav{padding:13px 0;gap:10px}
  .logo{font-size:16px;letter-spacing:1.2px}
  .nav-links{gap:9px 15px}
  .nav-links a{font-size:12px}
  .quote-shell{border-radius:13px}
  .quote-top{padding:16px 18px 12px}
  .quote-shell form{padding:20px 18px}
  .form-grid,.review-card dl{grid-template-columns:1fr}
  .review-card{padding:15px}
  .wizard-actions .button,.wizard-back{min-height:44px}
  .quote-step legend{font-size:24px}
  .quote-shell input,.quote-shell select,.quote-shell textarea{font-size:16px}
}
@media(max-width:380px){.quote-top{flex-wrap:wrap}.nav-links{gap:7px 11px}}


/* V2.3 — stronger About, Contact and footer */
.about-layout{display:grid;grid-template-columns:.9fr 1.35fr;gap:70px;align-items:start}
.about-copy .section-intro{font-size:16px;line-height:1.75}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.trust-grid article{border:1px solid #e1e8e1;border-radius:14px;padding:24px;background:#fcfdfb;min-height:205px}
.trust-grid span{color:#478467;font-size:11px;letter-spacing:1.5px;font-weight:800}
.trust-grid h3{color:#132a2d;font-size:18px;line-height:1.3;margin:16px 0 10px}
.trust-grid p{color:#66736e;font-size:13px;line-height:1.65;margin:0}
.contact-section{background:#f4f7f3;border-top:1px solid #e6ebe5}
.contact-layout{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:center}
.contact-layout h2{font-size:clamp(30px,4vw,44px);letter-spacing:-1px;margin:12px 0}
.contact-layout p{color:#66736e}
.contact-card{background:#fff;border:1px solid #dfe7df;border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:8px}
.contact-card>span{font-size:10px;letter-spacing:1.7px;color:#478467;font-weight:800}
.contact-card a{color:#1f6d54;font-size:20px;font-weight:800;text-decoration:none;overflow-wrap:anywhere}
.contact-card small{color:#718077;line-height:1.6;margin-top:8px}
footer{background:#132a2d;padding:42px 0}
.footer-layout{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:start}
.footer-layout strong{letter-spacing:1.7px}.footer-layout p{margin:7px 0}
.footer-links{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}.footer-links a{color:#dcece3;text-decoration:none;font-weight:700}.footer-links span{color:#9fb1a7;font-size:12px;max-width:360px}
.copyright{grid-column:1/-1;border-top:1px solid #ffffff1c;padding-top:20px;color:#9fb1a7;font-size:12px}
@media(max-width:850px){.about-layout,.contact-layout{grid-template-columns:1fr;gap:30px}.trust-grid{grid-template-columns:1fr}.trust-grid article{min-height:0}.footer-layout{grid-template-columns:1fr}.footer-links{align-items:flex-start;text-align:left}}

/* Cloudflare Turnstile */
.turnstile-wrap{margin:20px 0 4px;min-height:65px;}

/* V2.9 FINAL — YEK blue / sunset visual system */
:root{--navy:#071f4a;--green:#0b68ee;--light:#f4f8ff;--text:#10254a;--muted:#66758c}
body{background:#fff;color:var(--text)}
header{border-bottom:1px solid #dce7f5;background:rgba(255,255,255,.97)}
.logo,.nav-links a{color:#071f4a}.nav-links a:last-child{color:#0b68ee}
.hero{background:linear-gradient(115deg,#f8fbff 0%,#eef5ff 58%,#fff3e8 100%);color:#071f4a}
.eyebrow,.section-kicker,.service-index{color:#0b68ee}.eyebrow-dot{background:#0b68ee}
.hero h1 em,.section-heading h2 em{color:#0b68ee}
.hero p,.hero .hero-footnote{color:#5d6e86}
.hero-actions .button,.button{background:#0b68ee;box-shadow:0 9px 22px #0b68ee2b}.button:hover{background:#0756c8}
.button-secondary,.service-body a{color:#0759cc}
.hero-visual{height:520px;border-radius:28px;overflow:hidden;box-shadow:0 22px 55px #0a27552b}
.hero-visual>img{border-radius:28px;object-position:center}
.visual-note{left:22px;background:rgba(255,255,255,.94);backdrop-filter:blur(7px)}
.visual-note-icon{background:#e9f2ff;color:#0b68ee}
.services{background:#fff}.service-card{border-color:#dfe9f6;box-shadow:0 10px 32px #0a27550b}.service-photo{background:#eaf1fa}
#how-it-works,.contact-section{background:#f4f8ff}.steps>div,.trust-grid article,.contact-card{border-color:#dfe8f4}
.quote{background:linear-gradient(180deg,#f5f9ff,#eef5ff)}.quote-shell{border-color:#d9e6f5;box-shadow:0 15px 45px #0a27550d}
.quote-pill{color:#0759cc;background:#e9f2ff}.progress-track{background:#e5edf8}.progress-track>div{background:#0b68ee}
.quote-step legend,.review-heading h3,.success-panel h3{color:#071f4a}
.review-heading button,.contact-card a{color:#0759cc}.success-mark{color:#0b68ee;background:#e9f2ff}
footer{background:#071f4a}
@media(max-width:520px){.hero-visual{height:360px;border-radius:20px}.hero-visual>img{border-radius:20px}.hero h1{font-size:52px}}


/* V2.10 — approved full-cover hero */
.hero.hero-cover{position:relative;width:100%;height:auto;min-height:0;padding:0;background:#f8f4ef;overflow:hidden}
.hero-cover-image{display:block;width:100%;height:auto;max-height:none;object-fit:contain;object-position:center top}
.hero-cover-cta{position:absolute;left:5.1%;bottom:11.2%;width:25.3%;min-height:8.5%;display:flex;align-items:center;justify-content:center;gap:12px;border-radius:999px;text-decoration:none;font-weight:800;font-size:clamp(14px,1.55vw,27px);color:#fff;background:#0b68ee;box-shadow:0 10px 26px rgba(11,104,238,.25);z-index:2}
.hero-cover-cta:hover{background:#0756c8;transform:translateY(-1px)}
@media(max-width:700px){
  header{position:relative}
  .hero.hero-cover{overflow-x:hidden}
  .hero-cover-image{width:160%;max-width:none;transform:translateX(-3%);transform-origin:top left}
  .hero-cover-cta{left:8%;bottom:10%;width:39%;min-height:9%;font-size:clamp(12px,3.6vw,18px)}
}

/* V2.11 — desktop hero fits entirely in the first viewport */
@media (min-width:701px){
  .hero.hero-cover{
    height:calc(100vh - 78px);
    min-height:620px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    background:#f8f4ef;
  }
  .hero-cover-image{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center top;
  }
  .hero-cover-cta{
    left:5.1%;
    bottom:11.2%;
  }
}

/* V2.12 FINAL — approved hero artwork. In-image menu is artwork only; real navigation remains in the HTML header. */
@media (min-width:701px){
  .hero.hero-cover{height:calc(100vh - 78px);min-height:600px;background:#fff;}
  .hero-cover-image{width:100%;height:100%;object-fit:contain;object-position:center top;}
}

/* V2.13 FINAL — remove duplicate artwork navigation and fit approved hero cleanly below the real header. */
@media (min-width:701px){
  .hero.hero-cover{
    height:calc(100vh - 78px);
    min-height:0;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .hero-cover-image{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
  }
}

/* V2.14 FINAL — mobile opening: header + hero fill the first phone viewport. Desktop unchanged. */
@media (max-width:700px){
  .hero.hero-cover{
    height:calc(100svh - 154px);
    min-height:660px;
    padding:0;
    background:#fff;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:flex-start;
  }
  .hero-cover-image{
    width:160%;
    max-width:none;
    height:100%;
    object-fit:cover;
    object-position:left center;
    transform:translateX(-3%);
    transform-origin:center left;
  }
}

/* V2.15 — mobile hero: show the complete approved artwork with no horizontal crop. Desktop unchanged. */
@media (max-width:700px){
  .hero.hero-cover{
    height:auto;
    min-height:0;
    padding:0;
    background:#fff;
    overflow:hidden;
    display:block;
  }
  .hero-cover-image{
    display:block;
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;
    object-position:center top;
    transform:none;
  }
}


/* V2.17 — clickable hotspot over the CTA baked into the approved hero artwork. No visual change. */
.hero-cover-hotspot{
  position:absolute;
  left:5.1%;
  bottom:11.2%;
  width:25.3%;
  height:8.5%;
  z-index:5;
  display:block;
  background:transparent;
  border:0;
  cursor:pointer;
  text-decoration:none;
}
@media(max-width:700px){
  .hero-cover-hotspot{
    left:5.1%;
    bottom:11.2%;
    width:25.3%;
    height:8.5%;
  }
}

/* V2.18 — robust clickable overlay for CTA baked into hero artwork. */
.hero.hero-cover{position:relative;}
.hero-cover-hotspot{
  position:absolute !important;
  left:4.2% !important;
  bottom:8.2% !important;
  width:28.5% !important;
  height:13% !important;
  z-index:999 !important;
  display:block !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  background:transparent !important;
}
@media(max-width:700px){
  .hero-cover-hotspot{
    left:4.2% !important;
    bottom:8.2% !important;
    width:28.5% !important;
    height:13% !important;
  }
}

/* V2.19 FINAL — hero artwork is the sizing reference at every viewport.
   This keeps the invisible CTA hotspot locked to the baked-in button as the image scales. */
.hero.hero-cover{
  position:relative !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  overflow:hidden !important;
  background:#fff !important;
  line-height:0 !important;
}
.hero-cover-image{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center top !important;
  transform:none !important;
}
.hero-cover-hotspot{
  position:absolute !important;
  left:5.05% !important;
  bottom:9.55% !important;
  width:25.7% !important;
  height:9.3% !important;
  z-index:9999 !important;
  display:block !important;
  pointer-events:auto !important;
  cursor:pointer !important;
  background:transparent !important;
  border:0 !important;
  text-decoration:none !important;
  line-height:normal !important;
}