#hero{position:relative;display:block;padding:0;background:var(--c-bg);overflow:hidden;height:calc(100svh - var(--header-h));min-height:calc(100svh - var(--header-h));max-height:calc(100svh - var(--header-h))}
#hero .hero-frame{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,34%);height:100%;width:100%}
#hero .hero-frame > *{min-width:0;min-height:0}
#hero .hero-plate{position:relative;z-index:2;overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:var(--c-bg);padding:clamp(1rem, 0.6rem + 1.6vw, 2rem) var(--gutter)}
#hero .hero-plate__inner{width:100%}
#hero .wash-line{margin:0 0 12px}
#hero .kicker{margin:0 0 10px}
#hero h1{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.9rem, 0.9rem + 2.2vw, 3.1rem);line-height:1.05;letter-spacing:-0.02em;color:var(--c-text);max-width:16ch;margin:0 0 0.55rem}
#hero .hero-sub{font-size:clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);line-height:1.5;margin:0 0 0.45rem;max-width:42ch;color:var(--c-text)}
#hero .hero-body{font-size:0.9375rem;line-height:1.5;margin:0 0 clamp(0.9rem, 0.6rem + 1vw, 1.4rem);max-width:42ch;color:var(--c-muted)}
#hero .hero-cta{display:grid;gap:0.5rem}
#hero .hero-cta .btn{width:100%}
#hero .hero-media{position:relative;overflow:hidden;background:var(--c-surface);clip-path:polygon(0 9%, 100% 0, 100% 100%, 0 100%)}
#hero .hero-media__inner{position:absolute;inset:0}
#hero .hero-shot{position:absolute;inset:0;margin:0;border:0;border-radius:0;background:var(--c-surface);--wash-x:44%}
#hero .hero-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
#hero .hero-shot::after{transform:scaleY(1)}
#hero .hero-labels{position:absolute;left:var(--gutter);bottom:0.75rem;z-index:3;margin:0;background:var(--c-bg);border:1px solid var(--c-primary-edge);border-radius:var(--radius-xs);padding:5px 10px}
#hero .ba-labels__slash{color:var(--c-accent)}
@media (min-width:960px){
  #hero .hero-frame{grid-template-rows:none;grid-template-columns:46% 54%}
  #hero .hero-media{clip-path:polygon(11% 0, 100% 0, 100% 100%, 0 100%)}
  #hero .hero-media__inner{position:static;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(1.25rem, 1rem + 1.2vw, 2.25rem);padding-left:calc(11% + clamp(1.25rem, 1rem + 1.2vw, 2.25rem))}
  #hero .hero-shot{position:static;width:min(100%, calc((100svh - var(--header-h) - 9rem) * 1.368));aspect-ratio:792 / 579;height:auto;border:2px solid var(--c-bg);border-radius:var(--radius-sm)}
  #hero .hero-shot img{height:100%;object-position:50% 42%}
  #hero .hero-labels{position:static;margin:0.7rem 0 0;background:transparent;border:0;padding:0}
}
@media (min-width:1100px){
  #hero .hero-plate{padding-left:max(var(--gutter), calc(50vw - 600px + var(--gutter)))}
}
@media (min-width:1280px){
  #hero .hero-cta{display:flex;flex-wrap:wrap;gap:0.75rem}
  #hero .hero-cta .btn{flex:1 1 0;width:auto;min-width:13rem;font-size:0.9375rem;padding-inline:1rem}
}
/* REAL PHONES. #hero was locked to the viewport (height + max-height + a
   minmax(0,1fr) row that may shrink below its content) while .hero-plate had
   overflow:hidden and justify-content:center. Any screen shorter than the copy
   therefore amputated the headline, top and bottom equally: 35px gone at 620px
   tall, 122px at 500px. Antonio photographed the missing first line.
   The hero now fills the screen when the copy is short and GROWS when it is
   not; minmax(auto,1fr) is what stops the text row shrinking under content. */
@media (max-width:959px){
  #hero{height:auto;max-height:none;min-height:calc(100svh - var(--header-h))}
  #hero .hero-frame{grid-template-rows:minmax(auto,1fr) minmax(200px,34svh)}
  #hero .hero-plate{overflow:visible;min-height:auto;padding-block:clamp(1.25rem,0.9rem + 1.8vw,2rem)}
  /* Shorter phones get a shallower photo band, but the text row is never
     allowed below its content height. */
  @media (max-height:700px){#hero .hero-frame{grid-template-rows:minmax(auto,1fr) minmax(170px,28svh)}}
}
/* The strap sat at left:gutter with nothing holding its right edge, so on a
   device whose text measured any wider than this laptop's it ran off-screen —
   "DEODORI". It is now bounded and allowed to wrap. */
#hero .hero-labels{max-width:calc(100% - var(--gutter) * 2);flex-wrap:wrap;row-gap:2px}


#what-we-clean{padding:0;background:var(--c-surface);overflow:hidden;position:relative}
#what-we-clean .wc{display:grid;grid-template-columns:1fr}
#what-we-clean .wc__navy{padding:clamp(2.5rem,1.8rem + 2.4vw,3.75rem) var(--gutter) clamp(1.5rem,1rem + 1.6vw,2.5rem)}
#what-we-clean .wc__navy h2{color:var(--c-text);font-family:var(--ff-display);font-weight:700;font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);line-height:1.06;max-width:14ch;margin:0}
#what-we-clean .wc__plate{background:var(--c-plate);color:var(--c-ink);padding:clamp(3rem,2.2rem + 3vw,4.25rem) var(--gutter) clamp(2.5rem,1.8rem + 2.4vw,3.5rem);clip-path:polygon(0 7%,100% 0,100% 100%,0 100%)}
#what-we-clean .wc__plate p{margin:0;max-width:46ch;color:var(--c-ink);font-size:clamp(1.0625rem,1rem + 0.4vw,1.3125rem);line-height:1.6}
@media (min-width:900px){
  #what-we-clean .wc{grid-template-columns:5fr 7fr;align-items:stretch}
  #what-we-clean .wc__navy{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(3.25rem,2.2rem + 3vw,5rem);padding-left:max(var(--gutter), calc(50vw - 600px + var(--gutter)));padding-right:clamp(1.5rem,1rem + 1.5vw,2.5rem)}
  #what-we-clean .wc__plate{display:flex;align-items:center;clip-path:polygon(13% 0,100% 0,100% 100%,0 100%);padding-left:calc(13% + clamp(1.5rem,1rem + 2vw,3rem));padding-right:max(var(--gutter), calc(50vw - 600px + var(--gutter)));padding-block:clamp(3.25rem,2.2rem + 3vw,5rem)}
}
#what-we-clean .wc__proof{display:grid;grid-template-columns:1fr 1fr;gap:clamp(0.75rem,0.5rem + 1vw,1.25rem);margin-top:clamp(1.75rem,1.3rem + 1.8vw,2.5rem)}
#what-we-clean .wc__shot{margin:0;min-width:0}
#what-we-clean .wc__shot img{display:block;width:100%;aspect-ratio:4 / 5;object-fit:cover;border:2px solid var(--c-surface);border-radius:var(--radius-sm)}
#what-we-clean .wc__shot figcaption{margin-top:0.5rem;font-family:var(--ff-body);font-weight:700;font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-surface)}
@media (min-width:900px){
  #what-we-clean .wc__plate{flex-direction:column;align-items:flex-start;justify-content:center}
  #what-we-clean .wc__proof{max-width:34rem}
}

#the-clean-line{background:var(--c-bg);color:var(--c-text);padding-block:clamp(3.25rem, 2.4rem + 3.6vw, 6rem);overflow:hidden;position:relative}
#the-clean-line .cl__head{margin-bottom:clamp(2rem, 1.5rem + 2vw, 3.25rem)}
#the-clean-line h2{font-family:var(--ff-display);font-weight:700;font-size:clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);line-height:1.06;color:var(--c-text);max-width:16ch;margin:0 0 0.6rem}
#the-clean-line .cl__lede{margin:0;max-width:48ch;color:var(--c-muted);font-size:clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);line-height:1.6}
#the-clean-line .cl__pair{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem, 1.2rem + 2vw, 2.5rem)}
#the-clean-line .cl__frame{margin:0;min-width:0}
#the-clean-line .cl__frame--b{margin-left:20px}
#the-clean-line .cl__art{border:2px solid var(--c-surface);border-radius:var(--radius-sm);overflow:hidden;background:var(--c-surface)}
#the-clean-line .cl__art img{display:block;width:100%;height:100%;object-fit:cover}
#the-clean-line .cl__art--walkway{aspect-ratio:4 / 5;--wash-x:52%}
#the-clean-line .cl__art--siding{aspect-ratio:16 / 10;--wash-x:57%}
#the-clean-line .ba-labels{margin-top:0.7rem}
#the-clean-line .ba-labels__slash{color:var(--c-accent)}
@media (min-width:820px){
  #the-clean-line .cl__pair{grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);gap:24px;align-items:start}
  #the-clean-line .cl__frame--b{margin-left:0;margin-top:64px}
}

#who-we-clean-for{background:var(--c-plate);color:var(--c-ink);padding-block:clamp(2rem,1.5rem + 2vw,3.25rem);overflow:hidden;position:relative}
#who-we-clean-for .wcf{display:grid;grid-template-columns:1fr;gap:clamp(1.25rem,1rem + 1.2vw,2rem)}
#who-we-clean-for h2{margin:0;color:var(--c-ink);font-family:var(--ff-display);font-weight:600;font-size:clamp(1.5rem,1.15rem + 1.5vw,2.3rem);line-height:1.12;max-width:16ch}
#who-we-clean-for .wcf__b{margin:0;color:var(--c-surface);font-size:clamp(1rem,0.95rem + 0.35vw,1.1875rem);line-height:1.6;max-width:44ch;padding-top:clamp(1.25rem,1rem + 1vw,1.5rem);border-top:1px solid var(--c-hairline)}
@media (min-width:900px){
  #who-we-clean-for .wcf{grid-template-columns:5fr 7fr;align-items:center;gap:clamp(2rem,1.5rem + 2vw,3.5rem)}
  #who-we-clean-for .wcf__b{padding-top:0;padding-left:clamp(2rem,1.5rem + 2vw,3.25rem);border-top:0;border-left:1px solid var(--c-hairline);padding-block:clamp(1rem,0.8rem + 1vw,1.5rem)}
}
#who-we-clean-for .wcf__shot{margin:0;min-width:0}
#who-we-clean-for .wcf__shot img{display:block;width:100%;aspect-ratio:3 / 4;object-fit:cover;object-position:50% 42%;border:2px solid var(--c-surface);border-radius:var(--radius-sm)}
@media (min-width:900px){
  #who-we-clean-for .wcf{grid-template-columns:5fr 4fr 4fr}
  #who-we-clean-for .wcf__shot img{aspect-ratio:3 / 4}
}

#what-it-costs{background:var(--c-bg);color:var(--c-text);padding-block:clamp(2.5rem,1.9rem + 2.6vw,4rem);overflow:hidden;position:relative}
#what-it-costs .cost__head{margin-bottom:clamp(1.75rem,1.3rem + 1.8vw,2.75rem)}
#what-it-costs h2{margin:0 0 0.6rem;color:var(--c-text);font-family:var(--ff-display);font-weight:700;font-size:clamp(1.75rem,1.2rem + 2.2vw,2.9rem);line-height:1.08;max-width:18ch}
#what-it-costs .cost__lede{margin:0 0 0.5rem;max-width:52ch;font-size:clamp(1rem,0.95rem + 0.35vw,1.1875rem);line-height:1.6;color:var(--c-text)}
#what-it-costs .cost__note{margin:0;max-width:52ch;color:var(--c-muted);font-size:1rem;line-height:1.6}
#what-it-costs .cost__figures{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
#what-it-costs .cost__figures figure{margin:0;min-width:0;padding:clamp(1.15rem,0.95rem + 0.8vw,1.65rem)}
#what-it-costs .cost__figures figure:nth-child(2n){border-left:1px solid var(--c-hairline)}
#what-it-costs .cost__figures figure:nth-child(n+3){border-top:1px solid var(--c-hairline)}
#what-it-costs [data-count]{font-size:clamp(1.9rem,1.25rem + 2vw,3rem);line-height:1.04;color:var(--c-secondary)}
#what-it-costs figure:nth-child(3) [data-count]{font-size:clamp(1.3rem,1rem + 1.1vw,1.85rem);line-height:1.15}
#what-it-costs .label{display:block;margin-top:0.6rem;font-family:var(--ff-body);font-weight:700;font-size:0.75rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--c-muted)}
@media (min-width:900px){
  #what-it-costs .cost__figures{grid-template-columns:repeat(4,minmax(0,1fr))}
  #what-it-costs .cost__figures figure:nth-child(n+3){border-top:0}
  #what-it-costs .cost__figures figure + figure{border-left:1px solid var(--c-hairline)}
}

#where-and-when{position:relative;overflow:hidden;background:var(--c-surface);color:var(--c-text);padding:0 var(--gutter) clamp(2.25rem,1.7rem + 2.2vw,3.5rem)}
#where-and-when .ww{width:100%;max-width:var(--container);margin-inline:auto}
#where-and-when .ww__media{width:100vw;margin-inline:calc(50% - 50vw);height:clamp(190px,38vw,280px);overflow:hidden;background:var(--c-bg)}
#where-and-when .ww__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 34%}
#where-and-when .ww__copy{padding-top:clamp(1.75rem,1.3rem + 1.8vw,2.5rem)}
#where-and-when h2{margin:0 0 0.6rem;color:var(--c-text);font-family:var(--ff-display);font-weight:600;font-size:clamp(1.6rem,1.2rem + 1.7vw,2.5rem);line-height:1.1;max-width:16ch}
#where-and-when p{margin:0;max-width:46ch;color:var(--c-text);font-size:clamp(1rem,0.95rem + 0.35vw,1.1875rem);line-height:1.6}
@media (min-width:1100px){
  #where-and-when{padding-top:clamp(3rem,2.2rem + 2.6vw,4.5rem)}
  #where-and-when .ww{position:relative;display:grid;grid-template-columns:42% 1fr;min-height:clamp(320px,30vw,460px);align-items:center}
  #where-and-when .ww__media{position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:calc(50vw - 8%);height:auto;margin:0}
  #where-and-when .ww__copy{grid-column:2;padding-top:0;padding-left:clamp(2rem,1.5rem + 2vw,3.5rem)}
}

#questions{background:var(--c-plate);color:var(--c-ink);padding-block:clamp(2.75rem,2rem + 3vw,4.5rem);overflow:hidden;position:relative}
#questions .q{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,1.2rem + 1.4vw,2.25rem)}
#questions h2{margin:0;color:var(--c-ink);font-family:var(--ff-display);font-weight:700;font-size:clamp(1.75rem,1.2rem + 2.2vw,2.9rem);line-height:1.08;max-width:14ch}
#questions .q__ledger{min-width:0}
#questions .q__entry{padding-block:clamp(1.1rem,0.9rem + 0.8vw,1.5rem)}
#questions .q__q{margin:0 0 0.4rem;color:var(--c-ink);font-family:var(--ff-display);font-weight:700;font-size:clamp(1.0625rem,1rem + 0.4vw,1.25rem);line-height:1.3;max-width:34ch}
#questions .q__ledger p{margin:0;max-width:54ch;color:var(--c-surface);font-size:1.0625rem;line-height:1.6}
#questions .q__entry + .q__entry{border-top:1px solid var(--c-hairline)}
#questions .q__entry:first-child{padding-top:0}
#questions .q__entry:last-child{padding-bottom:0}
@media (min-width:900px){
  #questions .q{grid-template-columns:5fr 7fr;gap:clamp(2rem,1.5rem + 2vw,3.5rem);align-items:start}
  #questions .q__ledger{padding-left:clamp(2rem,1.5rem + 2vw,3.25rem);border-left:1px solid var(--c-hairline)}
  #questions .q__entry:first-child{padding-top:0.25rem}
}

#estimates-are-free{position:relative;overflow:hidden;background:var(--c-bg);color:var(--c-text);padding-block:clamp(2.75rem,2rem + 3vw,4.5rem)}
#estimates-are-free .ef{display:grid;grid-template-columns:1fr;gap:clamp(1.75rem,1.3rem + 1.8vw,2.75rem)}
#estimates-are-free h2{margin:0 0 0.6rem;color:var(--c-text);font-family:var(--ff-display);font-weight:700;font-size:clamp(1.75rem,1.2rem + 2.2vw,2.9rem);line-height:1.08;max-width:15ch}
#estimates-are-free .ef__sub{margin:0 0 0.5rem;font-size:clamp(1rem,0.95rem + 0.35vw,1.1875rem);line-height:1.6;color:var(--c-text);max-width:40ch}
#estimates-are-free .ef__sub a{color:var(--c-primary);font-weight:700}
#estimates-are-free .ef__meta{margin:0;color:var(--c-muted);font-size:1rem;line-height:1.6;max-width:42ch}
#estimates-are-free .ef__card{background:var(--c-plate);color:var(--c-ink);border-radius:var(--radius-lg);padding:clamp(1.25rem,1rem + 1.6vw,2.25rem)}
#estimates-are-free .ef__form{max-width:none;gap:var(--sp-4)}
#estimates-are-free .ef__card .field > label{color:var(--c-surface)}
#estimates-are-free .ef__card input,#estimates-are-free .ef__card textarea{color:var(--c-ink);background:transparent;border-bottom:2px solid var(--c-hairline)}
#estimates-are-free .ef__card textarea{min-height:104px}
#estimates-are-free .ef__card input::placeholder,#estimates-are-free .ef__card textarea::placeholder{color:rgba(36,53,100,0.62)}
#estimates-are-free .ef__card input:focus,#estimates-are-free .ef__card textarea:focus{border-bottom-color:var(--c-surface)}
#estimates-are-free .ef__card input:focus-visible,#estimates-are-free .ef__card textarea:focus-visible,#estimates-are-free .ef__card button:focus-visible{outline:2px solid var(--c-ink);outline-offset:3px}
#estimates-are-free .ef__card .btn{margin-top:0.25rem}
@media (min-width:960px){
  #estimates-are-free .ef{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,1.5rem + 2vw,4rem);align-items:start}
  #estimates-are-free .ef__copy{padding-top:0.25rem}
}