/* CleansUp — cleansup.nyc — visual system matched to the original cleanesup.com */
/* Self-hosted Inter (variable font, latin subset only) — replaces the old
   Google Fonts <link>, which was a render-blocking cross-origin request
   (~750ms on a throttled mobile connection per PageSpeed Insights). One
   file covers every weight we use via the 100–900 variable axis. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/fonts/inter-latin.woff2) format('woff2');
}

:root{
  --black:#212121;
  --near-black:#1d1d1f;
  --btn-dark:#202020;
  --text-muted:#555555;
  --border:#e4e4e4;
  --bg:#ffffff;
  --bg-alt:#f7f7f7;
  --radius:9px;
  --radius-lg:14px;
  --max:1180px;
  --font:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --shadow:0 4px 20px rgba(0,0,0,.06);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  color:var(--near-black);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}

/* Accessibility: visible, consistent focus ring on every interactive element;
   keyboard users get it, mouse users don't (focus-visible), so it never
   looks noisy on click. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--near-black);outline-offset:3px;border-radius:4px;
}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:1000;background:#fff;color:var(--near-black);
  padding:12px 18px;border-radius:8px;font-weight:600;box-shadow:var(--shadow);
  transition:top .15s ease;
}
.skip-link:focus{top:12px}

/* Visually hides text while keeping it in the accessible name / text content —
   used to give short buttons like "LEARN MORE" real context for screen readers
   and search engines without cluttering the visible label. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
h1,h2,h3,h4{line-height:1.16;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em;color:var(--near-black)}
h1{font-size:clamp(1.9rem,4vw,2.6rem)}
h2{font-size:clamp(1.6rem,3.2vw,2.2rem)}
h3{font-size:1.15rem;font-weight:600}
p{margin:0 0 1em;color:var(--text-muted)}
ul{margin:0 0 1em;padding-left:1.25em;color:var(--text-muted)}
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:64px 0}
.section-alt{background:var(--bg-alt)}
.center{text-align:center;margin-left:auto;margin-right:auto}
.lede{font-size:1.05rem;color:var(--text-muted);max-width:640px}

/* Buttons — monochrome, inverse pair, matches original exactly */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 32px;border-radius:var(--radius);font-weight:700;font-size:13px;
  letter-spacing:.07em;text-transform:uppercase;border:1.5px solid transparent;
  cursor:pointer;transition:.15s ease;white-space:nowrap;
}
.btn-dark{background:var(--btn-dark);color:#fff}
.btn-dark:hover{background:#000;text-decoration:none}
.btn-light{background:#fff;color:var(--btn-dark)}
.btn-light:hover{background:#eee;text-decoration:none}
.btn-outline-light{background:transparent;border-color:#fff;color:#fff}
.btn-outline-light:hover{background:rgba(255,255,255,.1);text-decoration:none}
.btn-outline-dark{background:transparent;border-color:var(--btn-dark);color:var(--btn-dark)}
.btn-outline-dark:hover{background:var(--btn-dark);color:#fff;text-decoration:none}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}

/* Header — matches cu-custom-header: dark bg, real logo image, uppercase-weight nav */
.site-header{position:fixed;top:0;left:0;right:0;z-index:999;background:var(--black)}
/* Static fallback heights matching the real rendered header at each
   breakpoint, so the very first paint already reserves the right space —
   main.js's ResizeObserver only fine-tunes it afterward (font swap, etc.)
   instead of being the sole source of truth. Removes the layout shift that
   happened when JS set this height after content had already painted at 0. */
.header-spacer{width:100%;height:90px}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;max-width:1400px;margin:0 auto;gap:20px}
/* Logo — same technique as the original's .cu-logo-link: fixed box,
   background-image at background-size:contain so the wide source art
   (machine + wordmark) scales down cleanly instead of stretching an <img> */
.logo{
  display:block;width:210px;height:62px;flex-shrink:0;
  background-image:url(/images/logo.png);background-repeat:no-repeat;
  background-position:left center;background-size:contain;
}
.main-nav{display:flex;gap:28px;flex-wrap:wrap}
.main-nav a{color:#fff;font-weight:600;font-size:15px}
.main-nav a:hover{opacity:.75}
.header-ctas{display:flex;gap:18px;align-items:center}
.header-social{color:#fff;display:inline-flex;align-items:center;opacity:.9}
.header-social:hover{opacity:1}
.nav-toggle{display:none}
@media (max-width:900px){
  .header-spacer{height:130px}
  .header-inner{padding:10px 16px;gap:10px;flex-wrap:nowrap}
  /* Match the original's mobile order: logo, then Book Now, then Instagram, then the burger */
  .logo{order:1;width:125px;height:48px}
  .header-ctas{order:2;flex-direction:row-reverse;gap:10px}
  .nav-toggle{order:3}
  .main-nav{order:4;display:none;position:absolute;top:100%;left:0;right:0;background:var(--black);flex-direction:column;padding:12px 32px 20px;gap:16px}
  .main-nav.open{display:flex}
  .nav-toggle{display:inline-flex;background:none;border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:8px 10px;color:#fff}
  .header-ctas .btn-light{padding:0 14px;height:40px;min-width:112px;font-size:12px}
}
@media (max-width:480px){
  .header-spacer{height:122px}
  .logo{width:112px;height:44px}
  .header-ctas .btn-arrow{display:none}
  .header-ctas{gap:8px}
  .header-ctas .btn-light{padding:0 11px;height:38px;min-width:96px;font-size:11px}
}

/* Hero — full-bleed looping video with the headline, subhead and one primary
   CTA overlaid directly on it behind a gradient scrim. Same pattern at every
   width (mobile through desktop) — only the height/type scale respond. */
.hero{position:relative;padding:0}
.hero-video-wrap{position:relative;width:100%;height:clamp(520px,82vh,700px);overflow:hidden;background:#000;line-height:0}
.hero-video-wrap video{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block;filter:brightness(.4) saturate(1.1)}
.hero-video-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.2) 30%,rgba(0,0,0,.62) 58%,rgba(0,0,0,.9) 100%);
}

.hero-content{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;text-align:left;
  padding:0 0 44px;
}
.hero-content .container{width:100%}
.hero-content .hero-text{max-width:600px;margin:0}
.hero-content h1{color:#fff;font-size:clamp(1.9rem,5.5vw,3.2rem);font-weight:700;margin:0 0 14px}
.hero-content .lede{color:rgba(255,255,255,.9);text-align:left;margin:0;font-size:clamp(.92rem,2vw,1.05rem)}
.hero-content .btn-row{justify-content:flex-start;margin-top:22px}
.hero-content .btn-dark{background:#fff;color:var(--btn-dark);border-color:#fff}
.hero-content .btn-dark:hover{background:#eee}

@media screen and (max-width:600px){
  .hero-video-wrap{height:clamp(480px,78vh,600px)}
  .hero-content{padding-bottom:32px}
}

.hero-trust{display:flex;flex-wrap:wrap;gap:32px;margin-top:28px}
.hero-trust strong{display:block;font-size:1.4rem;font-weight:700}
.hero-trust span{font-size:.82rem;opacity:.75}

/* Trust/value-prop strip, right below the hero — matches original cu-benefits:
   image is an oversized composite graphic cropped via an overflow:hidden
   window so only the top icon area shows (the source PNG has extra caption
   art below that this crop hides) */
.trust-strip{padding:56px 0 48px;text-align:center}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;max-width:820px;margin:0 auto}
.trust-item{min-width:0;text-align:center}
.trust-image-crop{position:relative;width:92px;height:92px;margin:0 auto 6px;overflow:hidden}
.trust-image-crop img{position:absolute;top:-4px;left:50%;width:154px;max-width:none;height:auto;margin:0;display:block;transform:translateX(-50%)}
.trust-item:nth-child(3) .trust-image-crop{height:94px;margin-bottom:4px}
.trust-item h3{font-size:13px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;margin-bottom:5px}
.trust-item p{max-width:220px;margin:0 auto;font-size:12px;line-height:1.4;color:#666}

@media screen and (max-width:700px){
  .trust-row{grid-template-columns:1fr;max-width:410px;gap:18px}
  .trust-item{width:100%;display:grid;grid-template-columns:82px minmax(0,1fr);column-gap:16px;align-items:center;text-align:left}
  .trust-image-crop{width:78px;height:78px;margin:0;grid-row:1/3}
  .trust-image-crop img{top:-3px;width:131px}
  .trust-item:nth-child(3) .trust-image-crop{height:80px;margin-bottom:0}
  .trust-item h3{align-self:end}
  .trust-item p{max-width:none;align-self:start;margin:5px 0 0}
}

/* Mobile Call/Text pill bar — sits directly under the header on small screens */
.mobile-contact-bar{display:none}
@media (max-width:900px){
  .mobile-contact-bar{
    width:100%;padding:8px 14px 10px;background:#fff;
    border-top:1px solid rgba(0,0,0,.08);border-bottom:1px solid rgba(0,0,0,.08);
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  }
  .mobile-contact-link{
    min-height:42px;padding:0 14px;border-radius:999px;background:#212121;color:#fff;
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.35px;
    box-shadow:0 4px 12px rgba(0,0,0,.12);transition:transform .18s,box-shadow .18s;
  }
  .mobile-contact-link:active{transform:scale(.98);box-shadow:0 2px 6px rgba(0,0,0,.12)}
  .mobile-contact-link svg{width:17px;height:17px;display:block;flex-shrink:0}
}
@media (max-width:480px){
  .mobile-contact-bar{padding:7px 10px 9px;gap:8px}
  .mobile-contact-link{min-height:40px;padding:0 10px;font-size:12px}
}

/* Page header (non-home) — same dark banner language, no video */
.page-hero{background:var(--black);color:#fff;padding:52px 0}
.page-hero h1{color:#fff;margin-bottom:10px}
.page-hero .lede{color:rgba(255,255,255,.85)}
.breadcrumb{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:14px}
.breadcrumb a{color:rgba(255,255,255,.8)}

/* Before / after drag-to-compare slider — ported 1:1 from the original cleanesup.com embed */
#cu-before-after-section{width:100%;height:auto;margin:0;padding:0;background:#fff}

.before-after-gallery{
  width:100%;max-width:1400px;margin:0 auto;padding:20px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
}

.before-after-slider{
  position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;
  border-radius:14px;background:#ddd;
  touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:default;
}

.after-image,.before-image{
  position:absolute;top:0;left:0;height:100%;
  object-fit:cover;object-position:center;
  pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;
}
.after-image{width:100%}
.before-wrapper{position:absolute;top:0;left:0;width:50%;height:100%;overflow:hidden;pointer-events:none}
.before-image{width:100%;max-width:none}

.slider-line{
  position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;
  transform:translateX(-50%);box-shadow:0 0 6px rgba(0,0,0,.6);
  pointer-events:none;z-index:5;
}

.slider-button{
  position:absolute;top:50%;left:50%;width:46px;height:46px;
  transform:translate(-50%,-50%);border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;color:#111;
  font-family:Arial,sans-serif;font-size:21px;font-weight:700;
  box-shadow:0 2px 9px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.06);
  pointer-events:auto;touch-action:none;cursor:ew-resize;z-index:7;
}
.slider-button:active{transform:translate(-50%,-50%) scale(.94)}

.slider-label{
  position:absolute;top:12px;z-index:6;padding:7px 11px;border-radius:20px;
  background:rgba(0,0,0,.72);color:#fff;font-family:Arial,sans-serif;
  font-size:11px;font-weight:700;line-height:1;pointer-events:none;
}
.before-label{left:12px}
.after-label{right:12px}

@media screen and (max-width:900px){
  .before-after-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:15px}
}

.cu-compare-hint{
  position:absolute;left:50%;bottom:22px;z-index:10;
  display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:999px;
  background:rgba(17,17,17,.72);color:#fff;font-family:Arial,sans-serif;
  font-size:11px;font-weight:700;line-height:1;letter-spacing:.55px;white-space:nowrap;
  pointer-events:none;opacity:0;transform:translate(-50%,8px);
  transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1);
}
.cu-compare-hint::before{content:"↔";font-size:16px;line-height:1}

.before-after-slider::after{
  content:"";position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.08);
  pointer-events:none;transition:background .22s ease;
}
.before-after-slider.cu-hint-visible .cu-compare-hint{opacity:1;transform:translate(-50%,0)}
.before-after-slider.cu-user-used::after{background:rgba(0,0,0,0)}
.before-after-slider.cu-user-used .cu-compare-hint{opacity:0;transform:translate(-50%,6px)}

@media screen and (max-width:600px){
  .before-after-gallery{grid-template-columns:1fr;gap:18px;padding:10px}
  .before-after-slider{width:100%;max-width:500px;justify-self:center}
  .slider-button{width:52px;height:52px;font-size:22px}
  .cu-compare-hint{bottom:18px;padding:9px 12px;font-size:10px}
}

/* Service cards — ported 1:1 from the original cleanesup.com embed */
#cu-services-section{width:100%;padding:2px 0 24px;background:#fff}

.cu-services-grid{
  width:100%;max-width:1500px;margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px;
}

.cu-service-card{min-width:0;margin:0;padding:0;text-align:center}

.cu-service-image-wrap{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:15px;background:#eee}

.cu-service-image{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
  transition:transform .45s ease,filter .45s ease;
}

.cu-service-image-wrap::after{
  content:"";position:absolute;inset:46% 0 0;
  background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.44));
  pointer-events:none;
}

.cu-service-card:hover .cu-service-image{transform:scale(1.035);filter:brightness(.94)}

.cu-service-button{
  position:absolute;left:50%;bottom:28px;z-index:3;
  min-width:142px;height:46px;padding:0 23px;
  border:2px solid #fff;border-radius:8px;background:rgba(25,25,25,.9);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;transform:translateX(-50%);
  text-decoration:none;font-size:13px;font-weight:750;letter-spacing:.45px;white-space:nowrap;
  box-shadow:0 7px 20px rgba(0,0,0,.25);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.cu-service-button:hover{background:#fff;color:#202020;transform:translateX(-50%) translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,.3);text-decoration:none}
.cu-service-button:active{transform:translateX(-50%) translateY(1px) scale(.98)}

.cu-service-title{margin:14px 0 0;color:#181818;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.2px}
.cu-service-description{max-width:390px;margin:7px auto 0;padding:0;color:#555;font-size:14px;line-height:1.5;font-weight:400}

@media screen and (max-width:950px){
  .cu-services-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
}
@media screen and (max-width:600px){
  .cu-services-grid{grid-template-columns:1fr;gap:27px;padding:0 12px}
  .cu-service-card{width:100%;max-width:520px;margin:0 auto}
  .cu-service-image-wrap{border-radius:13px}
  .cu-service-button{bottom:20px;min-width:154px;height:48px;padding:0 25px;border-radius:9px;font-size:13px}
  .cu-service-title{margin-top:13px;font-size:19px}
  .cu-service-description{max-width:410px;margin-top:6px;padding:0 8px;font-size:14px;line-height:1.5}
}

/* Generic cards / grid used on inner pages */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow)}
.card h3{margin-bottom:8px}
.card p{margin-bottom:0}

.step{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--border)}
.step:last-child{border-bottom:none}
.step-num{flex:none;width:44px;height:44px;border-radius:50%;background:var(--btn-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem}
.step h3{margin-bottom:4px}
.step p{margin-bottom:0}

.split{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}

.area-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.area-item{display:flex;gap:14px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow)}
.area-num{font-weight:700;color:var(--btn-dark);font-size:1.3rem}

.price-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.price-table th,.price-table td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--border)}
.price-table th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.price-table td:last-child,.price-table th:last-child{text-align:right;font-weight:700;color:var(--near-black);white-space:nowrap}
.price-group h3{margin:28px 0 6px}

.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}

/* FAQ accordion — native <details>/<summary>, no JS needed, keyboard/AT accessible by default */
.faq-list{max-width:760px;margin:28px auto 0;display:flex;flex-direction:column;gap:10px}
.faq-item{border:1px solid var(--border);border-radius:12px;padding:2px 20px;background:#fff}
.faq-item summary{
  padding:16px 28px 16px 0;font-weight:600;font-size:1rem;color:var(--near-black);
  cursor:pointer;list-style:none;position:relative;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:0;top:14px;font-size:1.4rem;font-weight:400;
  color:var(--text-muted);transition:transform .2s ease;
}
.faq-item[open] summary::after{content:"\2212"}
.faq-item summary:focus-visible{outline:2px solid var(--near-black);outline-offset:4px;border-radius:4px}
.faq-item p{margin:0 0 18px;color:var(--text-muted);font-size:.95rem;line-height:1.6}
.faq-item p a{color:var(--near-black);text-decoration:underline}

/* CTA band — inverted to black, matches monochrome language */
.cta-band{background:var(--black);color:#fff;padding:56px 0;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.8)}

/* Footer */
.site-footer{background:#fff;color:var(--text-muted);padding:52px 0 26px;border-top:1px solid var(--border)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:32px;margin-bottom:32px}
@media (max-width:780px){.footer-grid{grid-template-columns:1fr 1fr}}
.site-footer h4{color:var(--near-black);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.site-footer a{color:var(--text-muted)}
.site-footer a:hover{color:var(--near-black)}
.site-footer ul{list-style:none;padding:0;margin:0;color:inherit}
.site-footer li{margin-bottom:8px}
.footer-bottom{border-top:1px solid var(--border);padding-top:18px;font-size:.8rem;color:#999;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between}

.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.badge{background:var(--bg-alt);color:var(--near-black);font-weight:700;font-size:.78rem;padding:6px 12px;border-radius:999px;border:1px solid var(--border)}