/* Responsive rules for page sections (header/footer rules live in nav.css) */
@media (max-width: 1200px) {
  .about-copy h2 { font-size: clamp(2rem, 1.3rem + 1.8vw, 2.7rem); }
  .compare-card { width: min(520px, 92%); left: -6%; }
  .compare-col li { font-size: .94rem; padding: 7px 18px; }
  .compare-col__title { padding: 18px 18px 6px; }
  .process { gap: 34px; }
  .process-step { padding: 14px 16px 14px 14px; gap: 12px; min-height: 92px; }
  .process-step + .process-step::before { left: -29px; }
}
@media (max-width: 1023px) {
  .other-cards { gap: 16px; }
  .other-card__img { width: 150px; }
  .hiw-steps { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; gap: 44px; }
  .hiw-card__media { height: 220px; }
  .hiw-card + .hiw-card::before { left: 50%; top: -34px; transform: translateX(-50%) rotate(90deg); }
  .hiw-decor--boat { width: 200px; opacity: .08; }
}
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card, .service-card--lg { grid-column: span 1; }
  .plans { gap: 14px; }
}
@media (max-width: 900px) {
  .hero { padding-bottom: 200px; }
  .search-wrap { margin-top: -170px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero h1 { max-width: none; }
  .hero-media { margin: 8px 0 0; }
  .hero-media__frame { aspect-ratio: 16 / 11; }
  .hero-decor--palm { width: 140px; right: -30px; opacity: .12; }
  .hero-decor--boat { display: none; }
  .float-card--1 { top: 12px; left: 12px; }
  .float-card--2 { right: 12px; top: auto; bottom: 12px; }
  .float-card--3 { display: none; }
  .split, .worker-cta, .trust-panel { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; gap: 24px; }
  .why__copy { display: contents; }
  .why__copy .eyebrow { order: 1; } .why__copy h2 { order: 2; max-width: none; } .why__media { order: 3; } .why__copy .why-list { order: 4; }
  .why__media { display: block; }
  .why__frame { flex: none; aspect-ratio: 4 / 3; min-height: 0; max-height: 520px; border-radius: 24px; }
  .why__frame img { object-position: 50% 30%; }
  .why-decor--leaf, .why-decor--wave { display: none; }
  .districts__grid { grid-template-columns: 1fr; gap: 28px; }
  .districts__copy { display: contents; }
  .districts__map { order: 3; max-width: 420px; }
  .districts__copy .eyebrow { order: 1; } .districts__copy h2 { order: 2; } .districts__copy .lead { order: 2; }
  .districts__copy .chips { order: 4; } .districts__copy .office-line { order: 5; } .districts__copy .outside { order: 6; }
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-visual { margin-right: 0; }
  .about-media { border-radius: 26px; }
  .about-copy h2 { max-width: none; }
  .compare-card { position: static; width: 100%; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
  .about-media { aspect-ratio: 4 / 3; max-width: 560px; }
  .about-media img { object-position: 50% 50%; }
  .process { grid-template-columns: 1fr; gap: 30px; max-width: 560px; }
  .process-step { border-radius: 24px; }
  .process-step + .process-step::before { left: 34px; top: -28px; transform: rotate(90deg); }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item { border-bottom: 1px solid var(--line); }
  .trust-item:nth-child(2n) { border-right: 0; }
  .trust-item:nth-child(n+3) { border-bottom: 0; }
  .profiles, .plans, .quotes { grid-template-columns: 1fr; }
  .other-cards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .category-strip { grid-template-columns: 1fr; gap: 14px; }
  .category-strip picture, .category-strip img { width: 100%; height: 180px; }
  .plans { gap: 14px; }

  .worker-cta .media-frame { max-height: 360px; aspect-ratio: 16 / 10; }
  .media-frame--portrait { aspect-ratio: 16 / 11; }
  /* Comparison: desktop table hidden, tabbed cards shown */
  .compare-table-wrap { display: none; }
  .compare-tabs { display: block; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  .section { padding-block: clamp(56px, 12vw, 72px); }
  .hero { padding-top: 28px; }
  .hero-ml { font-size: 1.05rem; }
  .cta-row .btn:not(.btn--text) { width: 100%; }
  .hero-trust { font-size: .9rem; gap: 8px 14px; }
  .float-card { padding: 10px 12px; }
  .float-card strong { font-size: .95rem; }
  .hero { padding-bottom: 268px; }
  .search-wrap { margin-top: -238px; }
  .cat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cat-tile { width: 100%; height: 100px; }
  .cat-tile__icon { width: 36px; height: 36px; }
  .search-panel { padding: 18px 16px 18px; }
  .search-row { grid-template-columns: 1fr; gap: 14px; }
  .search-btn { width: 100%; height: 54px; margin-top: 4px; }
  .search-btn__text { display: inline; }
  .search-row--more { max-width: none; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card, .service-card--lg { grid-column: span 1; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-item { padding: 16px 14px; gap: 10px; flex-direction: column; align-items: flex-start; }
  .trust-item strong { font-size: .98rem; }
  .card, .plan { padding: 20px; }
  .hiw { padding-block: 64px; }
  .hiw-card { border-radius: 20px; }
  .hiw-card__media { height: 200px; }
  .hiw-card__body { padding: 0 22px 24px; }
  .hiw-steps { gap: 40px; }
  .hiw-decor--leaf-tl { display: none; }
  .compare-card { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .compare-col--b > *, .compare-col--b li { border-left: 0; }
  .compare-col--b .compare-col__title { border-top: 1px solid var(--line); }
  .compare-col li:last-child { padding-bottom: 18px; }
  .about-media { aspect-ratio: 4 / 3; }
  .plan__price { font-size: 2.1rem; }
  .why__frame { aspect-ratio: 4 / 5; min-height: 0; max-height: 480px; border-radius: 22px; }
  .why-list li { grid-template-columns: 36px 1fr; gap: 12px; }
  .why-list .mark { width: 34px; height: 34px; }
  .why-list .mark .ico { width: 16px; height: 16px; }
  .why-list h3 { font-size: 1.12rem; }
  .why-list p { font-size: .98rem; }
  .why__badge { right: 12px; bottom: 12px; padding: 10px 14px; font-size: .9rem; }
  .chips a, .chip { min-height: 48px; padding: 11px 16px; font-size: .96rem; }
  .chips { gap: 10px; }
  .districts__map { max-width: 100%; }
  .districts-decor--palm-bl, .districts-decor--boat { display: none; }
  .office-line { font-size: 1rem; }
  .still-unsure .btn { width: 100%; }
  .process-line { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .process-line .ico--arrow { display: none; }
  .process-line .pill { justify-content: center; font-size: .92rem; padding-inline: 10px; }
  .tablist { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .tab { justify-content: center; padding-inline: 10px; font-size: .9rem; }
  .wa-float { display: none; }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
  .mobile-bar .btn { min-height: 48px; font-size: .95rem; padding-inline: .8em; }
  body.no-scroll .mobile-bar { display: none; }
  body { padding-bottom: 0; }
  .site-footer { padding-bottom: 100px; }
}


/* =====================================================================
   PHONE LAYOUT (≤767px) — round 2
   One spacing scale only: 4 / 8 / 12 / 16 / 24 / 32 / 48.
   Congestion is fixed with whitespace; length is recovered by removing
   elements, never by shrinking the gaps. Tablet/desktop untouched.
   ===================================================================== */
@media (max-width: 767px) {
  :root { --gutter: 20px; --navbar-h-m: 60px; }
  .mobile-hide { display: none !important; }
  .mobile-only { display: block; }
  .container { padding-inline: 20px; }

  /* ---------- Rhythm ---------- */
  .section, .about-section, .hiw, .why, .districts, .other { padding-block: 40px; }
  .section--warm, .section--sage, .section--neutral, .section--deep, .section--brand-light,
  .about-section, .hiw, .why, .districts, .other { padding-block: 48px; }
  .section-head { margin-bottom: 24px; text-align: center; margin-inline: auto; }
  .section-head .lead, .hiw__head .lead, .other__head .lead, .districts__copy .lead, .about-copy .lead { margin-bottom: 0; }
  .eyebrow { font-size: 11px; letter-spacing: .12em; margin-bottom: 10px; }
  .eyebrow--rule::after { display: none; }
  h2, .section-head h2, .about-copy h2, .hiw__head h2, .districts__copy h2, .why__copy h2, .other__head h2 {
    font-size: 24px; line-height: 1.28; letter-spacing: -.01em; margin-bottom: 10px; }
  h3 { font-size: 17px; line-height: 1.35; }
  main p, .lead, .about-copy p, .hiw-card p, .why-list p, .other-card p, .card p { font-size: 15px; line-height: 1.6; }
  main p { margin-bottom: 16px; }
  main p:last-child { margin-bottom: 0; }

  /* left-align everything that is not a section head */
  .about-copy, .districts__copy, .why__copy { text-align: left; }
  .about-copy > .eyebrow, .districts__copy > .eyebrow, .why__copy > .eyebrow,
  .about-copy > h2, .districts__copy > h2, .why__copy > h2,
  .about-copy > .lead, .districts__copy > .lead { text-align: center; }
  .card, .hiw-card, .other-card, .pcard, .plan, .why-list li, .tabpanel, .mobile-bullets li { text-align: left; }

  /* ---------- Header + sticky bar ---------- */
  .navbar { height: 60px; }
  .site-header.is-stuck .navbar { border-bottom: 1px solid var(--line); box-shadow: none; }
  .mobile-bar { padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .mobile-bar .btn { min-height: 52px; }
  .site-footer { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

  /* ---------- Hero ---------- */
  .hero { padding: 20px 0 32px; background: #fff; }
  .hero-media, .hero-decor { display: none !important; }
  .hero-grid { display: block; }
  .hero h1 { font-size: clamp(22px, 6.6vw, 26px); line-height: 1.22; letter-spacing: -.02em; margin-bottom: 16px; max-width: 100%; }
  .hero h1 .m-br { display: inline; }
  .hero h1 em { display: block; white-space: nowrap; }
  .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px; }
  .hero-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 12px; font-weight: 700;
    color: var(--brand-700); background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: 999px; }
  .hero-chips .ico { width: 14px; height: 14px; }
  .hero .lead { font-size: 16px; line-height: 1.6; margin-bottom: 24px; }
  .hero .cta-row { display: none; }

  /* ---------- Search: tiles + card + trust strip ---------- */
  .search-wrap { margin-top: 0; }
  .cat-tiles { display: flex; gap: 8px; margin-bottom: 20px; }
  .cat-tile { flex: 1 1 0; width: auto; height: 68px; padding: 10px 4px 8px; gap: 6px; border-radius: 14px; font-size: 12px; }
  .cat-tile__icon { width: 24px; height: 24px; }
  .search-panel { border: 1px solid rgba(15,35,80,.05); border-radius: 20px; box-shadow: 0 4px 16px rgba(15,35,80,.07); padding: 16px; }
  .search-row { gap: 16px; }
  .sfield label { font-size: 14px; margin-bottom: 8px; }
  .sfield select { height: 48px; font-size: 15px; border-radius: 12px; padding: 0 40px 0 14px; }
  .search-btn { width: 100%; height: 52px; margin-top: 0; border-radius: 12px; font-size: 16px; }
  .search-more { margin-top: 12px; }
  .search-more__toggle { min-height: 40px; display: inline-flex; align-items: center; }
  .mobile-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; list-style: none;
    margin: 24px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(15,35,80,.06); }
  .mobile-trust li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
  .mobile-trust .tick { width: 18px; height: 18px; border-radius: 50%; background: var(--ok-soft); color: var(--ok);
    display: inline-grid; place-items: center; flex: none; }
  .mobile-trust .tick .ico { width: 11px; height: 11px; stroke-width: 3; }

  /* ---------- Cards ---------- */
  .card, .hiw-card, .other-card, .pcard, .plan, .tabpanel, .why-list li, .mobile-bullets li {
    padding: 16px; border-radius: 16px; border: 1px solid rgba(15,35,80,.05); box-shadow: 0 4px 16px rgba(15,35,80,.07); }
  .card h3, .hiw-card h3, .other-card h3, .pcard__title { margin-bottom: 8px; }
  .card p, .hiw-card p, .other-card p { line-height: 1.55; margin-bottom: 14px; }
  .card .link-more, .other-card .link-more { margin-top: auto; }
  .link-more, .why__link, .office-line__link { min-height: 40px; display: inline-flex; align-items: center; }

  /* ---------- Carousels ---------- */
  .services-grid, .profiles, .hiw-steps, .plans, .other-cards {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    gap: 14px; padding: 4px 0 4px 20px; margin-inline: -20px; max-width: none;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: stretch; }
  .services-grid::-webkit-scrollbar, .profiles::-webkit-scrollbar, .hiw-steps::-webkit-scrollbar,
  .plans::-webkit-scrollbar, .other-cards::-webkit-scrollbar { display: none; }
  .services-grid > *, .profiles > *, .hiw-steps > *, .plans > *, .other-cards > * {
    flex: 0 0 calc(100vw - 72px); scroll-snap-align: start; }
  .services-grid::after, .profiles::after, .hiw-steps::after, .plans::after, .other-cards::after {
    content: ""; flex: 0 0 6px; }
  .swipe-hint { display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 16px 0 0; font-size: 12px; font-weight: 600; color: var(--muted); }
  .swipe-hint .ico { width: 14px; height: 14px; }
  .services-grid + .swipe-hint + p, .profiles + .swipe-hint + p, .plans + .swipe-hint { margin-top: 20px; }

  /* ---------- Section: platform difference ---------- */
  .about-grid { display: block; }
  .about-copy { margin-bottom: 24px; }
  .about-media, .about-section .process { display: none; }
  .mobile-bullets { display: grid; gap: 12px; list-style: none; padding: 0; margin: 0 0 24px; }
  .mobile-bullets li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--text); }
  .mobile-bullets .ico { color: var(--brand); flex: none; margin-top: 3px; }
  .about-visual .compare-card { grid-template-columns: 1fr 1fr; grid-template-rows: auto repeat(5, auto);
    grid-auto-flow: column; margin: 0; border-radius: 16px; box-shadow: 0 4px 16px rgba(15,35,80,.07); }
  .compare-col--b > *, .compare-col--b li { border-left: 1px solid var(--line); }
  .compare-col--b .compare-col__title { border-top: 0; }
  .compare-col__title { padding: 16px 12px 8px; font-size: 10px; letter-spacing: .06em; }
  .compare-col li { padding: 6px 12px; font-size: 12.5px; line-height: 1.4; gap: 8px; }
  .compare-col li:last-child { padding-bottom: 16px; }
  .compare-col li .mark { width: 20px; height: 20px; }
  .mark .ico { width: 11px; height: 11px; }

  /* ---------- Services / how it works ---------- */
  .service-card--lg .service-card__media { aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
  .service-card--lg .service-card__body { padding: 0; }
  .service-card--lg { padding: 16px; }
  .service-card__top { margin-bottom: 12px; }
  .hiw-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .hiw-card__media { height: auto; aspect-ratio: 16 / 9; border-radius: 15px 15px 0 0; }
  .hiw-card__body { padding: 0 16px 20px; }
  .hiw-card__marks { margin-top: -26px; margin-bottom: 16px; }
  .hiw-badge { width: 52px; height: 52px; font-size: 1rem; }
  .hiw-icon { width: 46px; height: 46px; }
  .hiw-icon .ico { width: 23px; height: 23px; }
  .hiw-card + .hiw-card::before { display: none; }

  /* ---------- Comparison: 3 rows on mobile ---------- */
  .tablist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; overflow: visible; }
  .tab { min-height: 46px; font-size: 13px; justify-content: center; padding-inline: 10px; }
  .tabpanel dl { gap: 12px; margin-bottom: 16px; }
  .tabpanel dl > div:nth-child(n+4) { display: none; }
  .tabpanel dt { font-size: 11px; }
  .tabpanel dd { font-size: 14px; line-height: 1.5; }
  .still-unsure { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; border-radius: 16px; margin-top: 24px; }
  .still-unsure p { font-size: 14px; }
  .still-unsure .btn { min-height: 48px; }

  /* ---------- Why us: 2-column icon grid ---------- */
  .why__grid { display: block; }
  .why__media { margin-bottom: 24px; }
  .why__frame { max-height: 200px; aspect-ratio: 16 / 9; border-radius: 16px; }
  .why__badge { display: none; }
  .why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .why-list li { display: flex; flex-direction: column; gap: 10px; }
  .why-list .mark { width: 32px; height: 32px; margin: 0; }
  .why-list .mark .ico { width: 15px; height: 15px; }
  .why-list h3 { font-size: 14px; line-height: 1.3; margin-bottom: 0; }
  .why-list p { font-size: 12.5px; line-height: 1.45; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* ---------- Profiles ---------- */
  .category-strip { display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center;
    padding: 14px; border-radius: 16px; margin-bottom: 20px; box-shadow: 0 4px 16px rgba(15,35,80,.07); }
  .category-strip picture, .category-strip img { width: 84px; height: 84px; border-radius: 12px; }
  .category-strip__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; margin-bottom: 6px; }
  .pcard__avatar { width: 48px; height: 48px; border-radius: 14px; }
  .pcard__facts { gap: 8px; margin-bottom: 12px; font-size: 13.5px; }
  .pcard__note { margin-top: 14px; font-size: 12px; }

  /* ---------- Pricing ---------- */
  .plan { display: flex; flex-direction: column; }
  .plan--popular { order: -1; border-color: var(--brand); }
  .plan p.plan__price { font-size: 28px; margin-bottom: 16px; }
  .plan ul { margin-bottom: 20px; gap: 10px; }
  .plan li { font-size: 14px; }
  .pricing-note { margin-top: 24px; font-size: 14px; }
  .other-plans { margin-top: 20px; padding: 16px; border-radius: 16px; gap: 12px; }
  .other-plans p { font-size: 14px; }

  /* ---------- Districts ---------- */
  .districts__grid { display: block; }
  .districts__map { display: none; }
  .chips--districts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 24px; }
  .chips--districts a { min-height: 46px; padding: 10px 12px; font-size: 13px; justify-content: center;
    text-align: center; border-radius: 12px; }
  .chips--districts a .ico { display: none; }
  .office-line { padding: 16px 0; margin-bottom: 20px; font-size: 14.5px; line-height: 1.6; }
  .outside { gap: 10px; }
  .outside strong { width: 100%; font-size: 15px; margin-bottom: 4px; }
  .chip--wide { min-height: 46px; font-size: 13px; padding: 10px 14px; }

  /* ---------- Other help: collapse to heading + one card ----------
     The cleaning and elderly-care cards duplicate the services carousel above,
     so phones show only the trades card, which carries the three trade links. */
  .other-cards { display: block; margin-inline: 0; padding: 0; overflow: visible; }
  .other-cards > *:nth-child(-n+2) { display: none; }
  .other-cards + .swipe-hint { display: none; }
  .other-cards::after { display: none; }
  .other-card { width: auto; }

  /* ---------- Other help / workers / FAQ / company / final ---------- */
  .other-card { display: flex; flex-direction: column; }
  .other-card__top { margin-bottom: 14px; }
  .other-card__img { width: 110px; border-radius: 12px; }
  .other-card__icon { width: 52px; height: 52px; }
  .other-card__icon .ico { width: 26px; height: 26px; }
  .worker-cta { display: block; }
  .worker-cta .media-frame { display: none; }
  .benefit-list { gap: 12px; margin-bottom: 24px; }
  .benefit-list li { font-size: 15px; }
  .faq details { border-radius: 14px; margin-bottom: 8px; }
  .faq summary { padding: 14px 44px 14px 16px; min-height: 48px; font-size: 15px; line-height: 1.4; }
  .faq summary::after { right: 18px; }
  .faq__a { padding: 0 16px 16px; font-size: 14.5px; }
  .trust-panel { display: block; padding: 20px; border-radius: 16px; }
  .trust-panel__side { display: none; }
  .trust-panel .legal { font-size: 15px; margin-bottom: 16px; }
  .nap-block li { font-size: 14.5px; }
  .final-cta h2 { font-size: 24px; margin-bottom: 12px; }
  .final-cta .cta-row { margin-top: 24px; }
  .final-cta .trust-line { margin-top: 16px; font-size: 13px; }

  /* the old 4-item trust strip is replaced by the thin one under the search card */
  section[aria-label="Why you can trust the platform"] { display: none; }

  /* ---------- Section boundaries ---------- */
  .section--white + .section--white,
  .section--white + .districts,
  .districts + .section--white { border-top: 1px solid rgba(15,35,80,.06); }
}
@media (max-width: 374px) {
  .mobile-trust { gap: 8px 12px; font-size: 12.5px; }
  .cat-tile { font-size: 11px; }
}