/* Homepage v2 preview: unified layout + penguin yellow accents. Yellow sampled from og-newclean.png beak/feet. */
:root { --sun: #FEB516; --sun-pale: #FFF4D6; --night: #10231A; }

/* Header */
.site-header { align-items: center; min-height: 0; padding: 16px 20px; }
.brand img.brand-bang { width: 150px; }
.geo { display: none; }
.v2-nav { display: none; }
.v2-text { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--green); border-radius: 999px; color: var(--green-deep); font-weight: 700; font-size: 14px; text-decoration: none; background: #fff; }
.v2-text svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@media (min-width: 900px) {
  .site-header { padding: 22px var(--desktop-gutter, 48px); }
  .brand img.brand-bang { width: 180px; }
  .menu-button { display: none; }
  .v2-nav { display: flex; gap: 28px; margin-left: auto; margin-right: 8px; }
  .v2-nav a { color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; padding: 6px 0; border-bottom: 3px solid transparent; }
  .v2-nav a:hover { border-bottom-color: var(--sun); }
}

/* Hero */
.v2-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green-deep); }
.v2-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px; background: #fff; border: 1px solid var(--soft); }
.v2-toggle a { display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; }
.v2-toggle a.is-on { background: var(--green); color: #fff; }
.price-card { position: relative; }
.price-card.is-selected { border-color: var(--green); border-width: 2px; box-shadow: inset 0 -6px 0 var(--sun); }
.trust-chips svg { color: var(--green); }

/* Dark stats strip (GPT mockup): full-width charcoal band, green line icons, white numbers, thin dividers */
.v2-stats { display: grid; grid-template-columns: 1fr; margin: 28px 0 0; padding: 6px 20px; background: #3E4142; color: #fff; }
.v2-stat { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.v2-stat + .v2-stat { border-top: 1px solid rgba(255,255,255,.16); }
.v2-stat svg { flex: 0 0 28px; width: 28px; height: 28px; fill: none; stroke: #3DBE68; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v2-stat p { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-stat strong { font-size: 24px; line-height: 1.15; font-weight: 800; color: #fff; }
.v2-stat-area strong { font-size: 17px; }
.v2-stat span { font-size: 13px; color: #C9CCCB; }
@media (min-width: 900px) {
  .v2-stats { grid-template-columns: 1fr 1fr 1.35fr; margin: 36px 0 0; padding: 18px var(--desktop-gutter, 48px); }
  .v2-stat { padding: 8px 0; justify-content: center; }
  .v2-stat + .v2-stat { border-top: 0; border-left: 1px solid rgba(255,255,255,.22); }
  .v2-stat strong { font-size: 30px; }
  .v2-stat-area strong { font-size: 19px; }
}

/* Yellow accents on existing sections */
.proof-stars { color: var(--sun); text-shadow: 0 1px 0 rgba(0,0,0,.08); }
.compact-step div > span { display: inline-block; background: var(--sun); color: var(--ink); border-radius: 999px; padding: 2px 10px; font-weight: 800; }

/* Do it yourself? */
.v2-diy-cards { display: grid; gap: 14px; }
.v2-diy-card { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 12px; padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--soft); color: var(--ink); text-decoration: none; overflow: hidden; }
.v2-diy-card:hover { border-color: var(--green); }
.v2-diy-card h3 { margin: 0 0 6px; font-size: 20px; }
.v2-diy-card p { margin: 0 0 6px; color: var(--muted); font-size: 14px; }
.v2-diy-card .v2-from { color: var(--ink); font-weight: 800; font-size: 16px; }
.v2-diy-card .v2-from::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sun); margin-right: 7px; vertical-align: middle; }
.v2-link { display: inline-block; margin-top: 6px; color: var(--green-deep); font-weight: 700; font-size: 14px; }
.v2-diy-card img { width: 120px; height: 150px; object-fit: cover; border-radius: 12px; display: block; }
@media (min-width: 720px) { .v2-diy-cards { grid-template-columns: 1fr 1fr; } .v2-diy-card { grid-template-columns: 1fr 150px; } .v2-diy-card img { width: 150px; height: 180px; } }

/* Sticky mobile bar */
.v2-bar { display: none; }
@media (max-width: 899px) {
  .v2-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); border-top: 1px solid var(--soft); box-shadow: 0 -6px 18px rgba(15,20,16,.08); }
  .v2-bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 12px; font-weight: 800; font-size: 16px; text-decoration: none; }
  .v2-bar-text { border: 1.5px solid var(--green); color: var(--green-deep); background: #fff; }
  .v2-bar-cta { background: var(--green); color: #fff; }
  body { padding-bottom: 78px; }
  body:has(.sheet:not([hidden])) .v2-bar { display: none; }

}

/* Desktop hero: make room for eyebrow + toggle in the absolute layout */
@media (min-width: 900px) {
  .apartment-hero { min-height: 990px; }
  .hero-copy { top: 96px; }
  .hero-image { top: 8px; }
}
/* Plain, real-business finish: no glows, gradients or decorative watermark */
.hero-watermark { display: none; }
.building-teaser { background: #EEF3EC; }
.reach-animate.is-inview .reach-pin, .reach-pin { animation: none !important; box-shadow: none; }
.nc-messenger-fab, .nc-messenger-fab:hover { box-shadow: 0 2px 8px rgba(15,20,16,.18); }
.primary-cta, .primary-cta:hover { box-shadow: none; }

/* One arrow everywhere: thin 2px rounded stroke, small hover nudge */
.arrow-icon { stroke-width: 2; }
.v2-link, .v2-bar-cta { display: inline-flex; align-items: center; gap: 6px; }
.v2-link .arrow-icon { width: 16px; height: 16px; }
.v2-diy-card:is(:hover, :focus-visible) .arrow-icon { transform: translateX(3px); }
.menu-button { box-shadow: none; }
@media (min-width: 900px) { .site-canvas { box-shadow: 0 1px 3px rgba(34,36,31,.08); } }

/* Header penguin icon */
.brand { display: flex; align-items: center; gap: 8px; }
.brand img.brand-peng { width: auto; height: 38px; }
@media (min-width: 900px) { .brand img.brand-peng { height: 50px; } }

/* Hero buttons align with the bedroom card row */
.hero-pricing .primary-cta { width: 100%; }
@media (max-width: 559px) { .v2-eyebrow { font-size: 12px; letter-spacing: .04em; white-space: nowrap; } }
.v2-text { white-space: nowrap; }
@media (max-width: 559px) { .brand img.brand-bang { width: 124px; } .brand img.brand-peng { height: 32px; } .v2-text { padding: 0 11px; } .brand { gap: 6px; } }

/* Stats: 5.0 rating with yellow stars */
.v2-stat strong .v2-stars { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: 3px; font-size: 0; color: inherit; }
.v2-stat .v2-stars svg { flex: none; width: 17px; height: 17px; fill: var(--sun); stroke: none; }

/* Footer: darker green, contact card a subtle lighter tint of the same green */
.site-footer.nc-foot { background: #187A16; }
.nc-foot .nf-form { background: #22893A; border: 1px solid rgba(255,255,255,.10); }
.nc-foot .nf-form button { color: #187A16; }
.nc-foot .nf-form label { color: #fff; }

/* In-page jumps land with a little breathing room above the heading */
:is(#pricing, #diy, #proof, #building, #where-we-cleaned, #regular-rental, #compact, #contact) { scroll-margin-top: 16px; }
#full-size-rentals { display: block; position: relative; top: -40px; height: 0; }

/* Fair rent? (rentalblackbox.com) nav link with a small yellow dot */
.v2-rbb { position: relative; }
.v2-rbb .v2-dot { display: inline-block; width: 6px; height: 6px; margin-left: 5px; border-radius: 50%; background: var(--sun); vertical-align: 7px; }

/* Mobile menu (details/summary, no JS needed) */
.site-header { position: relative; }
.v2-menu > summary { list-style: none; cursor: pointer; }
.v2-menu > summary::-webkit-details-marker { display: none; }
.v2-menu-panel { position: absolute; right: 16px; top: calc(100% - 4px); z-index: 30; display: grid; min-width: 210px; padding: 6px; border: 1px solid #E3E6E1; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(15,20,16,.12); }
.v2-menu-panel a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 8px; color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none; }
.v2-menu-panel a:hover { background: #F1F5F0; }
@media (min-width: 900px) { .v2-menu { display: none; } }
.v2-nav a { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1099px) { .v2-nav { gap: 18px; } .v2-nav a { font-size: 14px; } .brand img.brand-bang { width: 150px; } .brand img.brand-peng { height: 40px; } }

/* Mobile audit (375/390): floating buttons sit above the sticky bar, CTAs stack full width on one line */
@media (max-width: 899px) {
  body .nc-btt { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  body .nc-messenger-fab { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  body:has(.nc-btt.is-visible:not([hidden])) .nc-messenger-fab { bottom: calc(146px + env(safe-area-inset-bottom, 0px)); }
}
.messenger-link, .section-cta, .product-action, .primary-cta, .v2-bar a { white-space: nowrap; }
@media (max-width: 559px) {
  .compact-actions { flex-direction: column; align-items: stretch; }
  .compact-actions .section-cta, .compact-actions .ghost-link { width: 100%; min-height: 52px; box-sizing: border-box; justify-content: center; gap: 10px; }
  .compact-actions .section-cta { justify-content: space-between; padding: 12px 18px; font-size: 16px; font-weight: 700 !important; }
  .compact-actions > p { text-align: center; }
}

/* v2d: shorter mobile page (Ray 7:47 PM). Area cards removed from #where-we-cleaned (footer keeps the area links). */
@media (max-width: 559px) {
  .hero-image { aspect-ratio: 4 / 3; }
  /* Full-size rentals: image left, details right */
  .rental-products { margin-top: 22px; gap: 12px; }
  .rental-product { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .rental-product figure { aspect-ratio: auto; height: 100%; min-height: 150px; }
  .rental-product-copy { padding: 14px 14px 14px 16px; display: grid; align-content: space-between; gap: 8px; }
  .rental-product h3 { font-size: 18px; }
  .rental-product .product-price { font-size: 24px; }
  .rental-product p { margin: 0; font-size: 14px; line-height: 1.35; min-height: 0; }
  .rental-product .product-action { min-height: 46px; }
  /* Compact steps: thumbnail rows */
  .compact-steps { margin-top: 20px; gap: 10px; }
  .compact-step { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; }
  .compact-step figure { aspect-ratio: 1 / 1; height: 88px; }
  .compact-step > div { padding: 10px 14px; }
  .compact-step h3 { font-size: 17px; margin-top: 4px; }
  .compact-step p { margin: 2px 0 0; font-size: 14px; }
  .compact-actions { margin-top: 18px; }
  /* Need help: tighter, buttons in one row */
  .contact-strip { margin: 12px 16px; padding: 20px 18px; gap: 14px; }
  .contact-strip h2 { font-size: 28px; }
  .contact-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-links a { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .contact-links a.is-primary { grid-column: 1 / -1; gap: 8px; }
  /* Footer: compact */
  .site-footer.nc-foot { padding: 22px 18px 14px; margin: 12px 0 0; border-radius: 0; }
  .nc-foot .nf-main { gap: 18px; }
  .nc-foot .nf-left { gap: 14px; }
  .nc-foot .nf-brand img { width: 150px; height: auto; }
  .nc-foot .nf-brand p { margin-top: 8px; font-size: 14px; }
  .nc-foot .nf-loc { margin-top: 0; min-height: 36px; }
  .nc-foot .nf-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 12px; }
  .nc-foot .nf-cols a { min-height: 36px; padding: 4px 0; font-size: 14px; line-height: 1.25; }
  .nc-foot .nf-form { padding: 16px; gap: 8px; }
  .nc-foot .nf-form textarea { min-height: 72px; }
  .nc-foot .nf-bottom { margin-top: 16px; padding-top: 12px; }
}

/* v2e (Ray 8:01 PM) */
/* Arrow buttons: label and arrow centred together, matching the centred buttons */
.primary-cta, .section-cta, .product-action, .v2-bar-cta { justify-content: center; gap: 10px; text-align: center; }
.primary-cta > span:first-child { flex: 0 0 auto; }
@media (max-width: 559px) {
  .compact-actions .section-cta { justify-content: center; }
  /* Mobile: nothing between Get my price and the Share your building price card */
  .hero-pricing .trust-chips, .hero-pricing .secondary-pricing, .hero-pricing .price-page-link { display: none !important; }
  /* Tight gap between Already servicing your building and Where we've cleaned */
  .building-proof { padding-bottom: 24px; }
  .reach-section { padding-top: 28px; }
}

/* Machine rentals section: sub-group label for big machines */
.rental-group-label { margin: 18px 0 12px; font-size: 20px; font-weight: 800; color: var(--ink); }

/* Type scale (2026-10-28). Desktop / mobile (<=559px):
   H1 hero 84/56 · H2 section 62/40 · H3 sub-section 24/22 · H3 card 20/18
   Lead 19/16 · Body 16 · Card body 14 · Meta 13 · Primary button 16/700 · Secondary button 14/700 */
#diy-title, #proof-title, #building-title, #reach-title, #rental-title, #compact-title, #contact-title { font-size: 62px; line-height: 1.02; font-weight: 700; }
.proof-reviews-title, #review-form-title, .rental-group-label { font-size: 24px; line-height: 1.2; font-weight: 700; }
.v2-diy-card h3, .rental-product h3, .compact-step h3 { font-size: 20px; line-height: 1.2; font-weight: 700; }
.v2-diy-card p:not(.v2-from), .rental-product-copy p, .compact-step p { font-size: 14px; line-height: 1.45; }
.section-cta, .primary-cta, .v2-bar-cta, .nf-form button { font-size: 16px; font-weight: 700; }
.compact-actions .section-cta, .v2-bar .v2-bar-cta { font-weight: 700 !important; }
@media (max-width: 559px) {
  #hero-title { font-size: 56px; }
  #diy-title, #proof-title, #building-title, #reach-title, #rental-title, #compact-title, #contact-title { font-size: 40px; }
  .proof-reviews-title, #review-form-title, .rental-group-label { font-size: 22px; }
  .v2-diy-card h3, .rental-product h3, .compact-step h3 { font-size: 18px; }
}

/* Machine Only note: meta 13 */
.rental-product-copy p.product-note { font-size: 13px; line-height: 1.4; font-weight: 600; }
#rentalSheetNote { margin: 4px 0 12px; }

/* rentals page link under Machine rentals (2026-10-28) */
.rental-more{margin:20px 0 0;text-align:center;font-size:16px;font-weight:700}
.rental-more a{color:var(--green-deep,#12823B);text-decoration:underline;text-underline-offset:3px}
.rental-more a:hover{color:var(--green,#19A149)}