/* Quote page + come-back offer popup. Builds on styles.css tokens and components. */
.qpage .nav { background: rgba(250,250,249,.88); }
.qhead { padding: calc(var(--nav-h) + clamp(28px, 5vw, 56px)) 0 clamp(10px, 2vw, 22px); text-align: center; }
.qhead .wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qhead__title { margin: 0; }
.qwrap { padding-bottom: clamp(40px, 6vw, 80px); }

/* One-page form */
.qform { gap: 0; }
.qsec { border: 0; margin: 0; padding: 0 0 clamp(22px, 3vw, 32px); min-inline-size: 0; display: flex; flex-direction: column; gap: 18px; }
.qsec + .qsec { padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--line); }
.qsec__title { padding: 0; margin-bottom: 4px; display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: clamp(1.25rem, 2.3vw, 1.55rem); font-weight: 800; letter-spacing: -0.028em; line-height: 1.15; }
.qsec__no { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mint-soft); color: var(--green-deep); font-size: .9rem; font-weight: 800; }
.cards b, .chip b { color: var(--green-btn); font-weight: 800; }
.chip span b { margin-left: 6px; font-size: .875rem; }
.chips--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.chips--grid .chip span { justify-content: center; width: 100%; text-align: center; padding: 0 10px; }
.steppers--3 { grid-template-columns: repeat(3, 1fr); }
.steppers--3 .stepper { flex-direction: column; align-items: flex-start; gap: 10px; }
.stepper__label small { display: block; font-weight: 600; font-size: .8125rem; color: var(--ink-3); }
.freq--4 { grid-template-columns: repeat(4, 1fr); }
.select { position: relative; }
.field__label small { font-weight: 500; color: var(--ink-3); }
textarea.input { padding-block: 14px; min-height: 96px; resize: vertical; }
.addon--qty .addon__body { cursor: default; justify-content: space-between; }
.addon--qty .stepper__ctl { gap: 8px; }
.addon--qty .round { width: 36px; height: 36px; }
.addon--qty .stepper__val { font-size: 1.125rem; min-width: 2ch; }
.qb__nav--end { justify-content: flex-end; }

/* Heads-up notice */
.notice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-md); background: #fff7ed; border: 1.5px solid #fdba74; color: #7c2d12; }
.notice svg { flex: none; width: 24px; height: 24px; margin-top: 2px; color: var(--citrus); }
.notice p { font-size: .9375rem; line-height: 1.5; }

/* Summary extras */
.sum__card .sum__fine strong { color: rgba(255,255,255,.85); }
.sum__promo { margin-top: 12px; padding: 8px 12px; border-radius: 10px; background: rgba(249,115,22,.18); color: #fed7aa; font-size: .875rem; font-weight: 700; }
.sum__lines li.is-promo span:last-child { color: #fed7aa; }
.sum__lines { max-height: 42vh; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; }

.qdone { align-items: center; text-align: center; gap: 14px; padding-block: 32px; }
.qdone .tick { width: 64px; height: 64px; }
.qdone[hidden] { display: none; }
.qdone:not([hidden]) { display: flex; flex-direction: column; }

/* Come-back offer */
.offer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .25s var(--ease); }
.offer.in { opacity: 1; }
.offer__scrim { position: absolute; inset: 0; background: rgba(18,48,26,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.offer__card { position: relative; width: min(440px, 100%); padding: clamp(28px, 5vw, 40px); border-radius: var(--r-xl); background: #fff; text-align: center; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: center; gap: 12px; transform: translateY(14px) scale(.97); transition: transform .35s var(--ease-spring); }
.offer.in .offer__card { transform: none; }
.offer__x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; font-size: 1.75rem; line-height: 1; color: var(--ink-3); cursor: pointer; }
.offer__x:hover { background: rgba(28,25,23,.06); }
.offer__tag { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--citrus); }
.offer__title { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.offer__text { color: var(--ink-2); max-width: 34ch; }
.offer__actions { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .offer, .offer__card { transition: none; } }

@media (max-width: 960px) {
  .steppers--3 { grid-template-columns: 1fr; }
  .steppers--3 .stepper { flex-direction: row; align-items: center; }
  .freq--4 { grid-template-columns: repeat(2, 1fr); }
  .qb__summary { display: block; position: static; }
  .qb__summary .sum__lines { max-height: none; }
}
@media (max-width: 560px) {
  .cards { grid-template-columns: 1fr; }
  .addons { grid-template-columns: 1fr; }
  .grid2 { grid-template-columns: 1fr; }
}

/* Time-based quoting additions */
.callout { padding: 16px 18px; border-radius: var(--r-md); background: var(--mint-soft); border: 1.5px solid rgba(34,150,29,.28); color: var(--green-deep); font-size: .9375rem; line-height: 1.55; }
.callout strong { color: var(--night); }
.hint--lead { font-size: 1rem; color: var(--ink-2); margin-top: -6px; }
.addon-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.addon__rec { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--mint-soft); color: var(--green-deep); font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
.addon--qty.is-included .addon__body { opacity: .7; }
.sum__hours { margin-top: 6px; font-size: 1.0625rem; font-weight: 700; color: #b7eac5; }
.sum__lines li small { display: block; font-weight: 500; font-size: .8125rem; color: rgba(255,255,255,.55); }
#freqSec[hidden] { display: none; }

/* Two cleaners, commercial link, walkthrough page */
.sum__team { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(157,204,176,.16); color: #d6f2de; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.qlink { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--r-md); border: 1.5px dashed rgba(28,25,23,.22); color: var(--ink-2); text-decoration: none; font-size: .9375rem; transition: border-color .2s, background-color .2s; }
.qlink:hover { border-color: var(--green); background: var(--mint-soft); }
.qlink strong { color: var(--ink); }
.qlink b { display: inline-flex; align-items: center; gap: 6px; color: var(--green-btn); white-space: nowrap; }
.qlink b svg { width: 16px; height: 16px; }
.qhead__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
.qb--single { grid-template-columns: minmax(0, 780px); justify-content: center; }
.qb--single .qb__form { width: 100%; }
.qb__nav--end { flex-wrap: wrap; }

/* How to prepare */
.prep { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.prep__card { padding: 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.prep__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.prep__card .feat__icon { background: var(--mint-soft); box-shadow: none; }
.prep__card:hover .feat__icon { transform: translateY(-4px) rotate(-6deg); }
.prep__card h3 { font-family: var(--font-display); font-size: 1.0625rem; letter-spacing: -0.015em; margin-bottom: 6px; }
.prep__card p { color: var(--ink-2); font-size: .9375rem; }
.prep__supply { display: flex; align-items: center; gap: 18px; margin-top: 22px; padding: 22px 26px; border-radius: var(--r-lg); background: var(--night); color: #fff; }
.prep__supply .feat__icon { flex: none; margin: 0; background: rgba(157,204,176,.18); color: #b7eac5; box-shadow: none; }
.prep__supply p { color: rgba(255,255,255,.82); }
.prep__supply strong { color: #fff; }
@media (max-width: 560px) { .prep__supply { flex-direction: column; align-items: flex-start; } .qb__nav--end .btn { width: 100%; } }
.qform .cards { grid-template-columns: repeat(3, 1fr); }

/* Keep the six nav links on one line */
.nav__links a { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1180px) {
  .nav__links a { padding: 8px 8px; font-size: .875rem; }
  .nav__phone span { display: none; }
  .nav__phone { width: 40px; height: 40px; justify-content: center; border-radius: 50%; background: rgba(28,25,23,.06); }
}

/* Mobile polish */
@media (max-width: 960px) {
  /* white hero copy sits on a bright photo: darken it so it reads on a phone */
  .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,28,14,.74) 0%, rgba(10,28,14,.6) 48%, rgba(10,28,14,.2) 100%); }
  .hero { padding-top: calc(var(--nav-h) + 24px); }
  .hero__copy .display .soft { color: #fff; }
  .hero__copy .lede { font-size: 1.0625rem; }
}
@media (max-width: 960px), (pointer: coarse) {
  .nav__cta .btn--sm { --h: 44px; }
  .footer__col a { display: block; padding-block: 10px; }
  .more { display: inline-flex; align-items: center; min-height: 44px; }
  .carousel__dots button { position: relative; }
  .carousel__dots button::after { content: ""; position: absolute; inset: -17px -9px; }
  .linkbtn { min-height: 44px; }
}
@media (max-width: 680px) {
  .qhead { padding-top: calc(var(--nav-h) + 18px); }
  .qform { padding: 20px 18px; }
  .qsec__title { font-size: 1.25rem; }
  .chips--grid { grid-template-columns: repeat(2, 1fr); }
  .qlink { flex-direction: column; align-items: flex-start; }
  .sum__card { padding: 18px 20px 22px; }
  .sum__price { font-size: clamp(2.6rem, 14vw, 3.2rem); }
  .offer__card { padding: 28px 22px; }
}

/* Nothing may widen the page beyond the screen (the 3D phone and its mascot overhang on small screens) */
main { overflow-x: clip; }
html, body { overflow-x: clip; max-width: 100%; }

@media (max-width: 960px), (pointer: coarse) {
  .addon--qty .round { width: 44px; height: 44px; }
  .addon-tools .btn--sm { --h: 44px; }
}

/* Hero pattern: the wide diagonal band is for desktop; phones get a full-width mosaic strip */
.hero__art--m { display: none; }
@media (max-width: 960px) {
  .hero__art:not(.hero__art--m) { display: none; }
  /* the desktop composition, scaled to the phone: dense band top right, thinning toward the lower left, text below */
  .hero__art--m { display: block; position: absolute; top: calc(var(--nav-h) - 12px); right: -8%; left: auto; width: 106%; max-width: 640px; margin: 0; transform: none; z-index: 1; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 88%); mask-image: linear-gradient(to bottom, #000 30%, transparent 88%); }
  .hero { padding-top: calc(var(--nav-h) + 128px); }
  .hero__copy { margin-top: 0; }
}

/* Services cards: laid out side by side instead of overlapping, so no card covers another */
.collage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; height: auto; max-width: 540px; align-items: stretch; }
.collage .cc { position: static; width: auto; left: auto; right: auto; top: auto; bottom: auto; overflow: visible; }
.collage .cc--dark { grid-column: 1; grid-row: 1; }
.collage .cc--float { grid-column: 1; grid-row: 2; }
.collage .cc--profile { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding-block: 28px; }
.collage .cc--bar { grid-column: 1 / -1; grid-row: 3; gap: 12px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .collage { grid-template-columns: 1fr; max-width: 420px; }
  .collage .cc--profile, .collage .cc--dark, .collage .cc--float, .collage .cc--bar { grid-column: 1; grid-row: auto; align-self: stretch; }
  .collage .cc--profile { order: 1; padding-block: 24px; }
  .collage .cc--dark { order: 2; }
  .collage .cc--float { order: 3; }
  .collage .cc--bar { order: 4; }
}

/* A price range needs a little less size than a single price */
.sum__price.is-range { font-size: clamp(2.1rem, 4.2vw, 2.8rem); letter-spacing: -0.035em; }
@media (max-width: 680px) { .sum__price.is-range { font-size: clamp(2.1rem, 10vw, 2.6rem); } }
.ph-est__l b#phPrice { white-space: nowrap; font-size: 1.35rem; }
.sum__lines li span:last-child { white-space: nowrap; }
@media (max-width: 560px) { .qform .cards { grid-template-columns: 1fr; } }

/* Privacy policy */
.legal__date { font-size: .875rem; color: var(--ink-3); margin-top: 2px; }
.legal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-md); padding: clamp(24px, 5vw, 48px); color: var(--ink-2); }
.legal h2 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); margin: 32px 0 10px; }
.legal h2:first-of-type { margin-top: 26px; }
.legal p { margin-top: 10px; }
.legal ul { margin-top: 10px; padding-left: 1.25rem; list-style: disc; display: grid; gap: 6px; }
.legal a { color: var(--green-btn); text-underline-offset: 3px; }
.legal__back { margin-top: 32px; }
.legal__back .btn { color: var(--ink); text-decoration: none; }

/* Contact page */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.contact__card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.contact__card .feat__icon { background: var(--mint-soft); box-shadow: none; margin-bottom: 4px; }
.contact__card h2 { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: -0.02em; }
.contact__card p, .contact__card address { font-style: normal; font-size: 1.0625rem; color: var(--ink-2); overflow-wrap: anywhere; }
.contact__card a:not(.btn) { color: var(--green-btn); font-weight: 700; text-underline-offset: 3px; }
.contact__card .btn { margin-top: auto; }
.contact__card .btn--ghost, .contact__card .btn--primary, .contact__card .btn--ink { text-decoration: none; }
.contact__map { margin-top: 22px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: var(--tint); }
.contact__map iframe { display: block; width: 100%; height: clamp(260px, 42vw, 380px); border: 0; }
.contact__areas { margin-top: 36px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.contact__areas h2, .contact__cta h2 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.03em; }
.contact__areas p { color: var(--ink-2); }
.contact__areas .tags { justify-content: center; }
.contact__cta { margin-top: 36px; padding: clamp(26px, 5vw, 44px); border-radius: var(--r-xl); background: var(--tint); text-align: center; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 14px; }
@media (max-width: 560px) { .contact__actions .btn { width: 100%; } }

/* SEO pass: new link rows, and the "Why us" card heading is now an h2 */
.qhead__links { font-size: .9375rem; color: var(--ink-3); }
.qhead__links a, .prep__more a, .contact__more a { color: var(--green-btn); font-weight: 700; text-underline-offset: 3px; }
.prep__more, .contact__more { margin-top: 22px; text-align: center; color: var(--ink-2); }
.contact__more { margin-top: 16px; }
.photo__card h2 { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.02em; margin-bottom: 8px; }
.faq__a a { color: var(--green-btn); font-weight: 700; text-underline-offset: 3px; }

/* Phones: all service areas visible, a lighter photo caption */
.hide-m { display: inline; }
.only-m { display: none; }
@media (max-width: 680px) {
  .hide-m { display: none; }
  .only-m { display: inline; }
  .pills { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; width: 100%; max-width: 100%; }
  .pills li { font-size: .78rem; gap: 6px; line-height: 1.25; align-items: flex-start; min-width: 0; }
  .pills li::before { width: 14px; height: 14px; margin-top: 1px; }
  .photo { aspect-ratio: 4 / 3; }
  .photo::after { background: linear-gradient(180deg, transparent 52%, rgba(18,48,26,.82)); }
  .photo__card { padding: 12px 16px 14px; }
  .photo__card h2 { font-size: 1.0625rem; margin-bottom: 4px; }
  .photo__card p { font-size: .8125rem; line-height: 1.45; }
}

/* Phones: the Residential block and its cards are clearly separate, and the next section sits on its own tint */
@media (max-width: 960px) {
  #services { padding-top: 40px; padding-bottom: 52px; }
  #services .split { gap: 0; }
  #services .copy { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
  #services .collage { gap: 14px; }
  #spaces { background: var(--tint); padding-block: 52px; }
}
/* a tap leaves :hover on, which tilted the team card on phones */
@media (hover: none) { .cc:hover { transform: none; box-shadow: var(--shadow-md); } }

/* Quote page: one question at a time */
.qform { scroll-margin-top: calc(var(--nav-h) + 12px); }
.qform .qsec { display: none; padding-bottom: 0; }
.qform .qsec.is-active { display: flex; animation: stepIn .5s var(--ease) both; }
.qform .qsec + .qsec { border-top: 0; padding-top: 0; }
.qwiz__top { margin-bottom: 26px; }
.qwiz__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.qwiz__nav #wizBack { min-width: 110px; }
.qwiz__nav #submitBtn { margin-left: auto; min-width: 160px; }
.qsec__title:focus { outline: none; }
@media (max-width: 560px) { .qwiz__nav #submitBtn { flex: 1; } }

/* Phone hero, tighter: text high up and sized to the picture, pattern tucked into the top right */
@media (max-width: 960px) {
  .hero { padding-top: calc(var(--nav-h) + 60px); padding-bottom: calc(56px + var(--slant)); }
  .hero__art--m { top: calc(var(--nav-h) - 10px); right: -14%; width: 86%; }
  .hero__copy { gap: 12px; }
  .hero__copy .display { font-size: clamp(1.95rem, 8.6vw, 2.5rem); line-height: 1.06; }
  .hero__copy .lede { font-size: 1rem; line-height: 1.5; }
  .hero__actions { margin-top: 4px; }
  .hero__bg::after { background: linear-gradient(180deg, rgba(10,28,14,.74) 0%, rgba(10,28,14,.62) 55%, rgba(10,28,14,.42) 100%); }
}

@media (max-width: 960px) {
  /* the pattern fades toward the bottom and toward the left, so the text side stays clear */
  .hero__art--m {
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 88%), linear-gradient(to right, transparent 10%, #000 58%);
    mask-image: linear-gradient(to bottom, #000 30%, transparent 88%), linear-gradient(to right, transparent 10%, #000 58%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
}
@media (max-width: 960px) {
  /* keep the top (where the text is) dark enough to read, and let the room show through lower down */
  .hero__bg::after { background: linear-gradient(180deg, rgba(10,28,14,.72) 0%, rgba(10,28,14,.58) 42%, rgba(10,28,14,.3) 72%, rgba(10,28,14,.1) 100%); }
}

/* Forms must never be wider than the screen: grid tracks may shrink below their content's natural width */
.qb { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 960px) { .qb { grid-template-columns: minmax(0, 1fr); } }
.qb__form, .qb__summary, .qsec, .field, .grid2 > *, .chips, .freq, .addons, .cards, .steppers > * { min-width: 0; }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }
.input, select.input, input[type="date"].input, textarea.input { min-width: 0; max-width: 100%; }
input[type="date"].input { -webkit-appearance: none; appearance: none; }

/* The little mascot beside the phone illustration stayed half off the screen on phones */
@media (max-width: 960px) { .tilt .buddy--perch { right: 0; } }
@media (max-width: 960px) { .tilt .tilt__dots { right: 0; } }