/* ════════════════════════════════════════════════════════════════
   /mobile-pass.css
   Site-wide mobile cleanup. Targets inline-styled grids/padding
   patterns that aren't covered by per-page media queries.

   CSS attribute selectors against the literal `style` attribute
   DO match (unlike class lookups for strings inside child text).
   Test: <div style="grid-template-columns:repeat(3,1fr)">
   matches  [style*="grid-template-columns:repeat(3"]    ✓
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 780px) {

  /* ── ANY inline 3/4-col grid → 2-col on tablet/phone ── */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  /* ── ANY inline 2-col / asymmetric grid → 1-col on phone ── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1.4fr"],
  [style*="grid-template-columns: 1fr 1.4fr"],
  [style*="grid-template-columns:1.2fr 2fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 1.4fr auto"],
  [style*="grid-template-columns: 1fr 1.4fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* ── Common big-padding wrapper containers → tighter on phone ── */
  [style*="padding:0 40px"],
  [style*="padding: 0 40px"]{ padding-left: 22px !important; padding-right: 22px !important; }
  [style*="padding:48px 32px"],
  [style*="padding: 48px 32px"]{ padding: 32px 22px !important; }
  [style*="padding:64px 40px"],
  [style*="padding: 64px 40px"]{ padding: 36px 22px !important; }
  [style*="padding:48px 40px"]{ padding: 32px 22px !important; }
  [style*="padding:72px 0 56px"]{ padding: 44px 0 36px !important; }
  [style*="padding:64px 0 56px"]{ padding: 40px 0 32px !important; }

  /* ── Generic .container — tighten gutters ── */
  .container,.section .container{ padding-left: 22px !important; padding-right: 22px !important; }

  /* ── Footer grid — single column on phone ── */
  .footer{ padding: 36px 22px 28px !important; }
  .footer-grid{ grid-template-columns: 1fr !important; gap: 28px !important; }

  /* ── Top-level h2 hero headings inside sections — shrink ── */
  .section-h{ font-size: clamp(22px, 6.5vw, 30px) !important; line-height: 1.15 !important; }
  .section-sub{ font-size: 15px !important; line-height: 1.6 !important; }

  /* ── Inline-styled "card" containers with heavy padding ── */
  [style*="padding:42px 36px"], [style*="padding: 42px 36px"]{ padding: 26px 22px !important; }
  [style*="padding:36px 34px"], [style*="padding: 36px 34px"]{ padding: 24px 20px !important; }
  [style*="padding:32px 28px"], [style*="padding: 32px 28px"]{ padding: 22px 18px !important; }
  [style*="padding:28px 32px"], [style*="padding: 28px 32px"]{ padding: 22px 18px !important; }
  [style*="padding:26px 22px"], [style*="padding: 26px 22px"]{ padding: 20px 16px !important; }

  /* ── Inline H2/H3 sizes too aggressive on phone ── */
  [style*="font-size:clamp(28px"]{ font-size: clamp(22px, 6.5vw, 28px) !important; }
  [style*="font-size:clamp(26px"]{ font-size: clamp(21px, 6vw, 26px) !important; }
  [style*="font-size:clamp(24px"]{ font-size: clamp(20px, 5.5vw, 24px) !important; }

  /* ── Stat tile cluster (Two Depts cards) on mobile ── */
  .dept-actions { flex-direction: column; align-items: stretch; }
  .dept-actions a { text-align: center; }

  /* ── About-strip body card extra-wide padding ── */
  .about-strip-inner{ grid-template-columns: 1fr !important; gap: 22px !important; padding: 0 22px !important; }
  .about-strip-quote{ font-size: 28px !important; line-height: 1.15 !important; }

  /* ── Service area chip wrap tighter ── */
  .svc-areas{ gap: 6px !important; }
  .svc-pin{ padding: 7px 12px !important; font-size: 10px !important; }

  /* ── Whats-new page sections ── */
  .wn-cap-grid{ grid-template-columns: 1fr !important; }
  .wn-cap{ padding: 22px 20px 20px !important; }
  .wn-prices{ grid-template-columns: 1fr !important; }
  .wn-price{ padding: 24px 20px !important; }
  .wn-timeline{ grid-template-columns: 1fr !important; }
  .wn-tl{ padding: 20px 18px !important; }
  .wn-commit-inner{ grid-template-columns: 1fr !important; gap: 18px !important; }
  .wn-commit{ padding: 32px 22px !important; }
  .wn-short{ padding: 32px 22px !important; }
  .wn-groups{ grid-template-columns: 1fr !important; }
  .wn-grp{ padding: 26px 22px !important; }

  /* ── Services page ── */
  .svc-grid{ grid-template-columns: 1fr !important; }
  .svc-card{ padding: 26px 22px !important; }
  .svc-card h3{ font-size: 22px !important; }
  .process-grid{ grid-template-columns: 1fr 1fr !important; }
  .process-step{ padding: 22px 18px !important; }
  .dept-block{ margin-top: -20px !important; grid-template-columns: 1fr !important; }
  .dept-strap{ padding: 14px 22px !important; font-size: 10px !important; letter-spacing: 2px !important; line-height: 1.6 !important; }

  /* ── Estate-management page ── */
  .service-list{ grid-template-columns: 1fr !important; }
  .em-body{ padding: 36px 22px 28px !important; }
  .lead-section{ padding: 36px 22px !important; }

  /* ── Hiring page ── */
  .paths{ grid-template-columns: 1fr !important; }
  .path{ padding: 28px 22px !important; }
  .why-grid{ grid-template-columns: 1fr 1fr !important; gap: 16px !important; }

  /* ── About page ── */
  .about-lead{ grid-template-columns: 1fr !important; gap: 24px !important; }
  .about-stats{ grid-template-columns: 1fr 1fr !important; }
  .about-body{ padding: 36px 22px 28px !important; }
  .values-grid{ grid-template-columns: 1fr 1fr !important; gap: 6px !important; margin-top: 28px !important; }
  .value-item{ padding: 20px 16px !important; }
  .area-grid{ grid-template-columns: 1fr !important; }
  .service-area{ padding: 36px 22px !important; }
  .service-area-inner{ padding: 0 !important; }

  /* ── Projects page editorial grid ── */
  .editorial-hero{ padding: 32px 22px 20px !important; }
  .editorial-grid{ padding: 16px 12px 60px !important; }

  /* ── Template page ── */
  .tpl-body{ padding: 36px 22px 24px !important; }
  .tpl-section-hdr h2{ font-size: 22px !important; }

  /* ── Native templates — section headers ── */
  .tpl-howto{ padding: 18px 20px !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .tpl-howto-icon{ margin: 0 auto; }

  /* ── Inline mode-label rotated overlays — hide on phone (already done in team.html but generic fallback) ── */
  .crew-tri-mode-label.mid-left, .crew-tri-mode-label.mid-right{ display: none !important; }
}

/* ── Real-narrow phones (<= 420px) ── */
@media (max-width: 420px) {
  /* All 2-col grids → 1-col */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"]{
    grid-template-columns: 1fr !important;
  }
  .why-grid{ grid-template-columns: 1fr !important; }
  .about-stats{ grid-template-columns: 1fr 1fr !important; }
  .values-grid{ grid-template-columns: 1fr !important; }
  .process-grid{ grid-template-columns: 1fr !important; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE PASS V2 — universal hero / typography / image / widget rules
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {

  /* ── All page heroes (every variant on the site) ── */
  .page-hero, .kh-hero, .wn-hero, .hire-hero, .art-hero, .em-body, .editorial-hero {
    /* heading + lede inside heroes */
  }
  .page-hero{ padding: 40px 0 32px !important; }
  .page-hero-inner{ padding: 0 22px !important; }
  .page-hero h1{ font-size: clamp(26px, 8vw, 38px) !important; line-height: 1.05 !important; }
  .page-hero p, .page-hero .lede{ font-size: 15px !important; line-height: 1.6 !important; }
  .page-eyebrow{ font-size: 9.5px !important; letter-spacing: 2.5px !important; }

  .kh-hero{ padding: 44px 0 36px !important; }
  .kh-hero-inner{ padding: 0 22px !important; }
  .kh-h1{ font-size: clamp(28px, 8vw, 38px) !important; line-height: 1.05 !important; }
  .kh-lede{ font-size: 15px !important; line-height: 1.6 !important; }

  .wn-hero{ padding: 48px 0 40px !important; }
  .wn-hero-inner{ padding: 0 22px !important; }
  .wn-h1{ font-size: clamp(28px, 9vw, 40px) !important; line-height: 1.05 !important; }
  .wn-positioning{ font-size: 18px !important; }
  .wn-lede{ font-size: 15.5px !important; line-height: 1.6 !important; }

  .hire-hero{ padding: 36px 22px 30px !important; }
  .hire-hero h1{ font-size: clamp(32px, 9vw, 48px) !important; }
  .hire-hero p.lede{ font-size: 15.5px !important; }

  .art-hero{ padding: 40px 0 32px !important; }
  .art-hero-inner{ padding: 0 22px !important; }
  .art-h1{ font-size: clamp(26px, 8vw, 36px) !important; line-height: 1.08 !important; }
  .art-lede{ font-size: 15.5px !important; line-height: 1.6 !important; }
  .art-badges{ flex-wrap: wrap; gap: 6px !important; }
  .art-badge{ font-size: 8.5px !important; padding: 4px 9px !important; letter-spacing: 1.5px !important; }

  .editorial-hero{ padding: 40px 22px 18px !important; }
  .editorial-hero h1{ font-size: clamp(30px, 9vw, 48px) !important; }
  .editorial-hero p{ font-size: 15px !important; }

  /* ── About body padding ── */
  .em-body{ padding: 32px 22px 26px !important; }
  .em-body p{ font-size: 16px !important; line-height: 1.75 !important; }

  /* ── Approach + service-list cards on Estate Mgmt page ── */
  .approach-block{ padding: 20px 18px !important; font-size: 15.5px !important; }
  .services-section .service-list li{ padding: 18px 18px !important; }

  /* ── About page about-body & photo strip ── */
  .about-body > div > div[style*="grid-template-columns:1fr 1fr 1fr"]{ grid-template-columns: 1fr !important; }
  .about-body img[style*="height:240px"], .about-body img[style*="height: 240px"]{ height: auto !important; max-height: 280px !important; }
  .about-body > div > div[style*="height:240px"]{ height: auto !important; max-height: 280px !important; }

  /* ── Any inline height fixed images (project tiles, etc.) ── */
  img[style*="height:200px"], img[style*="height: 200px"],
  img[style*="height:240px"], img[style*="height: 240px"]{
    max-height: 260px !important; height: auto !important;
  }

  /* ── Inline image-strip wrappers (about page 3-photo strip) ── */
  .about-body div[style*="height:200px"], .about-body div[style*="height:240px"]{ height: auto !important; }

  /* ── Inline flex rows that should wrap ── */
  div[style*="display:flex"][style*="justify-content:space-between"],
  div[style*="display: flex"][style*="justify-content:space-between"]{
    flex-wrap: wrap; gap: 14px;
  }

  /* ── Whats-new section general padding ── */
  .wn-section{ padding: 32px 22px 20px !important; }
  .wn-section h2{ font-size: clamp(24px, 7vw, 32px) !important; }
  .wn-section .wn-sub{ font-size: 15px !important; }
  .wn-body{ padding: 36px 22px 22px !important; }
  .wn-body p{ font-size: 16px !important; line-height: 1.75 !important; }
  .wn-pullquote{ padding: 20px 22px !important; font-size: 18px !important; }
  .wn-guarantee{ padding: 22px 22px !important; }
  .wn-faq{ padding: 28px 22px 0 !important; }

  /* ── Knowledge Hub body ── */
  .kh-body{ padding: 28px 22px 24px !important; }
  .kh-strap{ padding: 18px 20px !important; grid-template-columns: 1fr !important; gap: 12px !important; text-align: center; }
  .kh-strap-icon{ margin: 0 auto; }
  .kh-cats{ gap: 5px !important; margin-bottom: 24px !important; }
  .kh-cat-btn{ font-size: 9px !important; padding: 7px 10px !important; letter-spacing: 1.2px !important; }
  .kh-grid{ gap: 14px !important; }
  .kh-card-body{ padding: 16px 18px 16px !important; }
  .kh-card-title{ font-size: 18px !important; line-height: 1.25 !important; }
  .kh-card-excerpt{ font-size: 14px !important; }
  .kh-cta{ padding: 32px 22px !important; }

  /* ── Hiring page ── */
  .wrap{ padding: 24px 22px 60px !important; }
  .why-card .why-num{ font-size: 30px !important; }
  .path-list li{ font-size: 14.5px !important; }

  /* ── Article body content ── */
  .art-body{ padding: 32px 22px 22px !important; }
  .art-body p{ font-size: 16px !important; line-height: 1.75 !important; }
  .art-body h2{ font-size: 22px !important; margin: 28px 0 10px !important; }
  .art-body blockquote{ padding: 18px 20px !important; font-size: 17px !important; }
  .art-body ul, .art-body ol{ font-size: 15.5px !important; padding-left: 20px !important; }
  .art-pull{ padding: 18px 20px !important; font-size: 15.5px !important; }
  #jr-cta-box, .jr-cta-box{ margin: 32px 22px 0 !important; padding: 24px 22px !important; }
  #jr-related-services, #jr-related{ padding: 0 22px !important; margin: 32px auto 0 !important; }
  .jr-related-grid{ grid-template-columns: 1fr !important; }

  /* ── Templates page card grid + ranch-to-home page ── */
  .tpl-card-img{ aspect-ratio: 16/10 !important; }
  .tpl-card-name{ font-size: 21px !important; }
  .tpl-card-body{ padding: 18px 20px 16px !important; }
  .tpl-cta{ padding: 32px 22px !important; margin-top: 32px !important; }
  .tpl-toc{ gap: 4px !important; }
  .tpl-toc a{ font-size: 9px !important; padding: 6px 10px !important; letter-spacing: 1.2px !important; }

  /* ── Projects page editorial cards ── */
  .editorial-card{ aspect-ratio: 16/10 !important; }
  .editorial-caption{ padding: 32px 22px 22px !important; }
  .editorial-caption .title{ font-size: 22px !important; }

  /* ── Floating Bulls-Eye widget + Quick Meeting modal already mobile-aware ── */
  #be-panel{ right: 8px !important; left: 8px !important; bottom: 78px !important; width: auto !important; }
  #be-launcher{ right: 14px !important; bottom: 14px !important; }
  #be-launcher .be-label{ display: none !important; }

  /* ── Quick-meeting modal ── */
  .jrl-qm-modal{ max-height: 88vh !important; }
  .jrl-qm-body{ padding: 22px 22px 20px !important; }
  .jrl-qm-hdr{ padding: 18px 22px !important; }
  .jrl-qm-title{ font-size: 20px !important; }

  /* ── Service area section on about page ── */
  .service-area-inner h2{ font-size: clamp(22px, 6.5vw, 30px) !important; }

  /* ── Lead section (estate-mgmt page) ── */
  .lead-section .btns{ flex-direction: column !important; gap: 8px !important; }
  .lead-section .btns a{ width: 100% !important; }

  /* ── Footer brand area ── */
  .footer-brand p{ font-size: 14px !important; line-height: 1.6 !important; }
  .footer-col a, .footer-col p{ font-size: 14px !important; line-height: 1.4 !important; margin-bottom: 12px !important; }
  .footer-col h4{ font-size: 12px !important; margin-bottom: 10px !important; }
  .footer-bottom p{ font-size: 11px !important; line-height: 1.5 !important; }
}

/* ── Tablet down to 600px tightening ── */
@media (max-width: 600px) {
  /* CTA bands across the site */
  .cta-banner, .cta-strip, .tpl-cta, .kh-cta, .wn-cta, .em-closer {
    padding: 32px 22px !important;
  }
  .cta-banner h2, .cta-strip h2, .tpl-cta h2, .kh-cta h2, .em-closer h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
  }
  .cta-banner p, .cta-strip p, .tpl-cta p, .kh-cta p {
    font-size: 14.5px !important; line-height: 1.65 !important;
  }
  .cta-actions{ flex-direction: column !important; gap: 8px !important; }
  .cta-actions a, .cta-actions button{ width: 100%; text-align: center; }

  /* btn sizing */
  .btn{ padding: 12px 18px !important; font-size: 11px !important; }
  .btn-primary, .btn-outline, .btn-outline-white{ padding: 12px 18px !important; font-size: 11px !important; }

  /* Trust strip stats — even tighter */
  .trust-stat-v{ font-size: 19px !important; }
  .trust-stat-l{ font-size: 8.5px !important; letter-spacing: 1px !important; }

  /* Service pill icon spacing */
  .service-pill, button.service-pill{ padding: 6px 11px !important; gap: 6px !important; margin: 2px !important; }

  /* Article meta dates */
  .art-meta{ font-size: 9.5px !important; }

  /* Bulls-Eye chat msg sizing */
  .bmsg{ font-size: 14.5px !important; padding: 9px 12px !important; }
  .be-msg{ font-size: 14px !important; padding: 9px 12px !important; }

  /* Forms — wider tap targets */
  input, textarea, select, button{ font-size: 16px !important; /* prevent iOS zoom on focus */ }
  .jr-cta-form input, .jr-cta-form textarea{ padding: 12px 14px !important; }
  .bullseye-input{ padding: 10px 12px !important; font-size: 15px !important; }
  .be-input{ padding: 10px 12px !important; font-size: 15px !important; }
}

/* ── Hide rotated overlapping labels on tiny screens (already hidden on team but generic fallback) ── */
@media (max-width: 760px) {
  .crew-tri-mode-label.mid-left,
  .crew-tri-mode-label.mid-right{ display: none !important; }
  .crew-tri-svg{ display: none !important; }
}

/* ── Reduce decorative animations on phones for perf ── */
@media (max-width: 600px) {
  .crew-tri-pulse, .crew-tri-line{ animation: none !important; }
  .gen-btn{ animation: none !important; }
  #be-launcher .be-pulse{ animation: none !important; }
}