/* ═══════════════════════════════════════════════════════════════════
   MOBILE OVEN CLEAN — Mobile Redesign  (max-width: 768px only)
   PHILOSOPHY: 3 screens to convert.
     Screen 1 — Hero: what it is, how much, book it
     Screen 2 — Proof: before/after + reviews
     Screen 3 — Services, areas, FAQ
   DESKTOP: completely untouched
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

/* ─── 1. BASE ─────────────────────────────────────────────────── */
  *, *::before, *::after { box-sizing: border-box !important; }
  html, body { overflow-x: hidden !important; max-width: 100vw !important; }
  body        { padding-bottom: 80px !important; background: #f9f9f9 !important; }
  .container, .w {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

/* ─── 2. TOPBAR — gone ────────────────────────────────────────── */
  .topbar { display: none !important; }

/* ─── 3. HEADER ───────────────────────────────────────────────── */
  header {
    position: sticky !important; top: 0 !important; z-index: 9000 !important;
    background: #fff !important;
    border-bottom: 2px solid #fce7f3 !important;
    box-shadow: 0 2px 12px rgba(255,45,143,0.08) !important;
  }
  .nav-wrap       { height: 58px !important; padding: 0 14px !important; }
  .logo-img       { height: 42px !important; width: auto !important; }
  nav ul, .nav-cta { display: none !important; }
  .hamburger      { display: flex !important; }

/* ─── 4. HERO — service pages (styles3) ──────────────────────── */
  /* The hero-g grid: collapse to single column */
  .hero-g,
  [class="hero-g"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* Hide the large SVG oven illustration */
  .hero-img-col,
  [class="hero-img-col"] { display: none !important; }

  /* Hero section itself */
  section[style*="background:linear-gradient(145deg,#ff2d8f"] {
    padding: 24px 0 20px !important;
  }
  /* H1 */
  .hero-g h1,
  section[style*="background:linear-gradient(145deg,#ff2d8f"] h1 {
    font-size: clamp(1.45rem, 6.5vw, 2rem) !important;
    line-height: 1.18 !important;
    margin-bottom: 8px !important;
    font-weight: 900 !important;
    color: #fff !important;
  }
  /* Sub text */
  .hero-g p,
  section[style*="background:linear-gradient(145deg,#ff2d8f"] p {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    margin-bottom: 12px !important;
    color: rgba(255,255,255,0.9) !important;
  }
  /* Price badge */
  section[style*="background:linear-gradient(145deg,#ff2d8f"] [style*="from £"] {
    font-size: 1rem !important;
    padding: 5px 16px !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
    display: inline-block !important;
  }
  /* Hero CTA buttons row */
  section[style*="background:linear-gradient(145deg,#ff2d8f"] [style*="display:flex"][style*="gap:10px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  section[style*="background:linear-gradient(145deg,#ff2d8f"] [style*="display:flex"][style*="gap:10px"] a:last-child {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    padding: 10px 14px !important;
  }
  /* Badge chips row */
  section[style*="background:linear-gradient(145deg,#ff2d8f"] [style*="display:flex"][style*="flex-wrap:wrap"]:last-child {
    gap: 5px !important;
  }
  section[style*="background:linear-gradient(145deg,#ff2d8f"] span[style*="border-radius:16px"] {
    font-size: 0.7rem !important;
    padding: 4px 9px !important;
  }

  /* Stats bar below hero (dark) */
  div[style*="background:#1a1a1a"][style*="padding:18px 0"] {
    padding: 10px 0 !important;
  }
  div[style*="background:#1a1a1a"] .w[style*="display:flex"][style*="justify-content:space-around"] {
    gap: 0 !important;
    justify-content: space-around !important;
  }
  div[style*="background:#1a1a1a"] > .w > div[style*="text-align:center"] {
    padding: 4px 6px !important;
  }
  div[style*="background:#1a1a1a"] > .w > div > div:first-child {
    font-size: 1.25rem !important;
  }
  div[style*="background:#1a1a1a"] > .w > div > div:last-child {
    font-size: 0.58rem !important;
    letter-spacing: 0.3px !important;
  }

/* ─── 5. HERO — homepage (styles_u1) ─────────────────────────── */
  .hero {
    padding: 22px 0 18px !important;
    min-height: auto !important;
    text-align: center !important;
  }
  .hero-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .hero h1 {
    font-size: clamp(1.55rem, 7vw, 2.1rem) !important;
    line-height: 1.18 !important; font-weight: 900 !important;
    margin-bottom: 8px !important; color: #fff !important;
  }
  .hero-sub {
    font-size: 0.88rem !important; line-height: 1.6 !important;
    margin-bottom: 14px !important; color: rgba(255,255,255,0.9) !important;
  }
  .hero-btns {
    justify-content: center !important; gap: 7px !important;
    margin-bottom: 12px !important; flex-wrap: wrap !important;
  }
  .hero-btn {
    flex: 1 1 calc(50% - 7px) !important; max-width: 180px !important;
    padding: 11px 10px !important; border-radius: 11px !important;
    font-size: 0.82rem !important;
  }
  .hero-btn strong { font-size: 0.82rem !important; }
  .hero-btn small  { display: none !important; }
  .hero-btn-wa     { flex: 1 1 100% !important; max-width: 100% !important; }
  .hero-trust      { justify-content: center !important; gap: 8px !important; flex-wrap: wrap !important; }
  .ht-item         { font-size: 0.78rem !important; }
  .hero-form-card  { display: none !important; }
  /* Star rating + reviews line in hero */
  #hero-avail-slots { display: none !important; }

/* ─── 6. HERO — location/area pages (area-styles) ─────────────── */
  .page-hero { padding: 22px 0 0 !important; }
  .page-hero h1 {
    font-size: clamp(1.4rem, 6vw, 1.9rem) !important;
    font-weight: 900 !important; line-height: 1.2 !important;
    color: #fff !important; margin-bottom: 8px !important;
  }
  .page-hero p, .page-hero .hero-sub {
    font-size: 0.86rem !important; line-height: 1.6 !important;
    color: rgba(255,255,255,0.9) !important; margin-bottom: 12px !important;
  }
  .page-hero-badge {
    font-size: 0.7rem !important; padding: 4px 11px !important;
    margin-bottom: 8px !important;
  }
  /* Cred chips */
  .creds-scroll  { gap: 5px !important; }
  .cred-chip     { padding: 6px 9px !important; min-width: 100px !important; border-radius: 10px !important; }
  .cred-chip-icon { font-size: 14px !important; }
  .cred-chip-title { font-size: 8.5px !important; }
  .cred-chip-sub   { font-size: 7.5px !important; }
  /* Inline form panel that slides out below hero */
  .page-hero [style*="border-radius:20px 20px 0 0"] {
    border-radius: 16px 16px 0 0 !important;
    padding: 16px 14px 18px !important;
    margin: 12px -16px 0 !important;
  }
  /* 6-col service picker → 3-col */
  .page-hero [style*="grid-template-columns:repeat(6,1fr)"],
  .page-hero [style*="grid-template-columns: repeat(6,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: repeat(3,1fr) !important;
    gap: 6px !important;
  }
  /* Input row → stacked */
  .page-hero [style*="grid-template-columns:1fr 1fr 1fr 1.4fr auto"],
  .page-hero [style*="grid-template-columns: 1fr 1fr 1fr 1.4fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .hqf-svc-btn { padding: 7px 3px !important; border-radius: 8px !important; }
  .hqf-svc-btn strong { font-size: 0.65rem !important; }
  .hqf-svc-btn em     { font-size: 0.6rem !important; }

/* ─── 7. PINK BOOKING STRIP (mq-strip) ───────────────────────── */
  .mq-strip-outer  { padding: 0 !important; }
  .mq-strip-inner  {
    flex-direction: column !important; gap: 8px !important;
    min-height: auto !important; padding: 12px 14px !important;
  }
  .mq-strip-label  { display: none !important; }
  .mq-strip-fields {
    flex-direction: column !important; gap: 7px !important; padding: 0 !important;
  }
  .mq-strip-select { width: 100% !important; min-width: 0 !important; height: 46px !important; }
  .mq-strip-pc-wrap { width: 100% !important; min-width: 0 !important; }
  .mq-strip-pc      { height: 46px !important; }
  .mq-strip-btn     { width: 100% !important; height: 50px !important; justify-content: center !important; }

/* ─── 8. SECTIONS — hide heavy/redundant on mobile ─────────────── */
  /* Hide process steps — not needed for conversion */
  .process-section            { display: none !important; }
  /* Hide WHY section image — saves 300px */
  .why-img-wrap               { display: none !important; }
  /* Hide desktop stats bar (the large one) */
  .stats-bar, .desktop-only-block { display: none !important; }
  /* Hide desktop-only sticky CTA */
  #sticky-cta                 { display: none !important; }
  /* Hide mob-booking-section duplicate (drawer handles this) */
  .mob-booking-section        { display: none !important; }
  /* Hide multiple quote nudge strips — keep only one */
  .quote-nudge + .quote-nudge { display: none !important; }
  /* Marquee — keep but compact */
  .marquee-wrap  { padding: 9px 0 !important; }
  .marquee-item  { font-size: 0.8rem !important; padding: 0 18px !important; gap: 8px !important; }
  .marquee-dot   { width: 4px !important; height: 4px !important; }

/* ─── 9. SECTION SPACING — tight and clean ───────────────────── */
  section { padding: 28px 0 !important; }
  [style*="padding:72px 0"], [style*="padding:64px 0"],
  [style*="padding:60px 0"], [style*="padding:56px 0"] {
    padding-top: 28px !important; padding-bottom: 24px !important;
  }
  [style*="padding:48px 0"] {
    padding-top: 22px !important; padding-bottom: 18px !important;
  }

  .section-header { margin-bottom: 18px !important; }
  .section-title  { font-size: clamp(1.25rem, 5.5vw, 1.7rem) !important; }
  .section-tag    { font-size: 0.7rem !important; padding: 4px 10px !important; }

/* ─── 10. SERVICES — clean vertical list ─────────────────────── */
  .services-section { padding: 24px 0 !important; background: #fff !important; }
  .services-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .service-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    border-radius: 12px !important;
    border: 1.5px solid #f0e0ea !important;
    padding: 14px 14px !important;
    background: #fff !important;
    gap: 12px !important;
    transform: none !important;
    transition: none !important;
  }
  .service-card:hover { transform: none !important; }
  .service-img {
    width: 52px !important; min-width: 52px !important;
    height: 52px !important; border-radius: 10px !important;
    font-size: 1.5rem !important;
    background: #fff0f7 !important;
    flex-shrink: 0 !important;
  }
  .service-img::after { display: none !important; }
  .service-price {
    position: static !important;
    display: inline-block !important;
    font-size: 0.72rem !important; padding: 2px 8px !important;
    margin-bottom: 4px !important;
  }
  .service-body { padding: 0 !important; flex: 1 !important; }
  .service-body h3 {
    font-size: 0.9rem !important; font-weight: 800 !important;
    margin-bottom: 2px !important;
  }
  .service-body p { display: none !important; }
  .service-actions {
    display: flex !important; flex-direction: column !important;
    gap: 0 !important; flex-shrink: 0 !important; width: auto !important;
  }
  .sa-primary {
    padding: 9px 14px !important; border-radius: 8px !important;
    font-size: 0.78rem !important; white-space: nowrap !important;
  }
  .sa-wa, .sa-call { display: none !important; }

/* ─── 11. WHY SECTION ─────────────────────────────────────────── */
  .why-section    { padding: 24px 0 !important; }
  .why-grid       { grid-template-columns: 1fr !important; gap: 16px !important; }
  .why-features   { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .why-card       { padding: 14px 12px !important; border-radius: 11px !important; }
  .why-card h4    { font-size: 0.82rem !important; margin-bottom: 4px !important; }
  .why-card p     { font-size: 0.76rem !important; line-height: 1.55 !important; }
  .why-icon       { width: 34px !important; height: 34px !important; font-size: 1rem !important; margin-bottom: 8px !important; }

/* ─── 12. BEFORE/AFTER — homepage ────────────────────────────── */
  #before-after   { padding: 24px 0 20px !important; }
  #before-after [style*="grid-template-columns:1fr 1fr"],
  #before-after [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #before-after img { height: 150px !important; object-fit: cover !important; object-position: center 15% !important; }
  /* Hide the divider pills row */
  #before-after [style*="width:1px"] { display: none !important; }
  /* Trust pills → 2×2 */
  #before-after [style*="gap:28px"],
  #before-after [style*="gap: 28px"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

/* ─── 13. BEFORE/AFTER — all other pages ─────────────────────── */
  #before-after-results { padding: 24px 0 20px !important; }
  #before-after-results [style*="grid-template-columns:1fr 1fr"],
  #before-after-results [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important; gap: 10px !important;
  }
  #before-after-results img { height: 190px !important; object-fit: cover !important; }

/* ─── 14. TRUST STRIP (black bar after before/after) ─────────── */
  div[style*="background:#1a1a1a"][style*="padding:14px 0"] {
    padding: 6px 0 !important;
  }
  div[style*="background:#1a1a1a"] > .container > div[style*="justify-content:center"] {
    flex-direction: column !important; gap: 0 !important;
  }
  div[style*="background:#1a1a1a"] > .container > div > div[style*="border-right"] {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 8px 16px !important;
  }
  div[style*="background:#1a1a1a"] > .container > div > div:last-child {
    border-bottom: none !important;
  }

/* ─── 15. STATS AFTER BEFORE/AFTER ───────────────────────────── */
  #stats-after-ba { display: block !important; }
  #stats-after-ba > .container > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  #stats-after-ba > .container > div > div {
    padding: 12px 8px !important; border-right: none !important;
    border-bottom: 1px solid #f0f0f0 !important; text-align: center !important;
  }
  #stats-after-ba > .container > div > div:nth-child(3),
  #stats-after-ba > .container > div > div:nth-child(4) {
    border-bottom: none !important;
  }
  #stats-after-ba > .container > div > div > div:first-child {
    font-size: 1.6rem !important;
  }

/* ─── 16. ELFSIGHT REVIEWS ────────────────────────────────────── */
  section[style*="background:#111"] {
    padding-left: 0 !important; padding-right: 0 !important;
    overflow: hidden !important;
  }
  section[style*="background:#111"] .w,
  section[style*="background:#111"] .container {
    padding-left: 14px !important; padding-right: 14px !important;
  }
  section[style*="background:#111"] h2 {
    font-size: 1.2rem !important; margin-bottom: 4px !important;
  }
  .elfsight-app-c47f043c-54e4-437f-997c-167a9eb90a1d,
  [class*="elfsight-app"] {
    width: 100% !important; max-width: 100% !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
  }

/* ─── 17. AREAS ───────────────────────────────────────────────── */
  .areas-section  { padding: 24px 0 !important; }
  .areas-grid     { grid-template-columns: 1fr !important; gap: 8px !important; }
  .area-card      { padding: 14px 12px !important; border-radius: 10px !important; gap: 10px !important; }
  .area-icon      { width: 36px !important; height: 36px !important; border-radius: 8px !important; flex-shrink: 0 !important; }
  .area-body h4   { font-size: 0.9rem !important; }
  .area-body p    { font-size: 0.78rem !important; }

/* ─── 18. REVIEWS ─────────────────────────────────────────────── */
  .reviews-section { padding: 24px 0 !important; }
  .reviews-grid   { grid-template-columns: 1fr !important; gap: 10px !important; }
  .review-card    { padding: 16px 14px !important; border-radius: 12px !important; }
  .review-text    { font-size: 0.85rem !important; line-height: 1.6 !important; margin-bottom: 14px !important; }
  .google-badge   { padding: 10px 14px !important; margin-top: 16px !important; }

/* ─── 19. MOBILE AREAS SECTION ───────────────────────────────── */
  .mob-areas-section  { display: block !important; padding: 20px 14px !important; }
  .mob-cities-grid    { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .mob-city-card      { border-radius: 11px !important; padding: 12px !important; }
  .mob-city-name      { font-size: 0.82rem !important; }

/* ─── 20. CTA BAND ────────────────────────────────────────────── */
  .cta-band       { padding: 28px 0 !important; }
  .cta-inner      { flex-direction: column !important; text-align: center !important; gap: 14px !important; align-items: center !important; }
  .cta-text h2    { font-size: 1.3rem !important; }
  .cta-text p     { font-size: 0.86rem !important; }
  .cta-btns       { justify-content: center !important; flex-wrap: wrap !important; gap: 7px !important; }
  .cta-btns .btn  { flex: 1 1 calc(50% - 7px) !important; min-width: 120px !important; justify-content: center !important; font-size: 0.85rem !important; }

/* ─── 21. QUOTE NUDGE ─────────────────────────────────────────── */
  .quote-nudge    { padding: 10px 0 !important; }
  .qn-inner       { flex-direction: column !important; gap: 7px !important; padding: 0 14px !important; }
  .qn-text        { font-size: 0.84rem !important; text-align: center !important; }
  .qn-btn         { width: 100% !important; padding: 11px !important; text-align: center !important; border-radius: 9px !important; }

/* ─── 22. BLOG ────────────────────────────────────────────────── */
  .blog-section   { padding: 24px 0 !important; }
  .blog-grid      { grid-template-columns: 1fr !important; gap: 8px !important; }
  .blog-card      { display: flex !important; flex-direction: row !important; border-radius: 10px !important; }
  .blog-img       { width: 72px !important; min-width: 72px !important; height: 72px !important; font-size: 1.5rem !important; border-radius: 8px 0 0 8px !important; }
  .blog-body      { padding: 10px 12px !important; }
  .blog-body h3   { font-size: 0.84rem !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
  .blog-body p    { display: none !important; }

/* ─── 23. FAQ ─────────────────────────────────────────────────── */
  .faq-section    { padding: 24px 0 !important; }
  .faq-grid       { grid-template-columns: 1fr !important; gap: 0 !important; }
  .faq-question   { font-size: 0.86rem !important; padding: 13px 14px !important; }
  .faq-answer p   { font-size: 0.83rem !important; padding: 0 14px 13px !important; }

/* ─── 24. FOOTER ──────────────────────────────────────────────── */
  footer           { padding: 24px 0 14px !important; }
  .footer-grid     { grid-template-columns: 1fr !important; gap: 20px !important; padding-bottom: 24px !important; }
  .footer-logo-img { height: 36px !important; }
  .footer-desc     { font-size: 0.8rem !important; line-height: 1.6 !important; margin-bottom: 14px !important; }
  .footer-col h4   { font-size: 0.82rem !important; margin-bottom: 9px !important; }
  .footer-links a  { font-size: 0.82rem !important; }
  .footer-contact-item { font-size: 0.82rem !important; margin-bottom: 7px !important; }
  .footer-bottom   { flex-direction: column !important; text-align: center !important; gap: 4px !important; font-size: 0.75rem !important; }

/* ─── 25. MOB-BAR — always visible, properly sized ───────────── */
  .mob-bar,
  #mobBar {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.6fr !important;
    gap: 7px !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 99999 !important;
    background: #fff !important;
    border-top: 2px solid #f0d0e8 !important;
    padding: 7px 12px calc(7px + env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -3px 20px rgba(0,0,0,0.1) !important;
  }
  .mob-bar-call {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    background: #1a1a1a !important; color: #fff !important;
    border-radius: 11px !important; padding: 9px 4px !important;
    gap: 3px !important; text-decoration: none !important; min-height: 50px !important;
  }
  .mob-bar-wa {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    background: #25d366 !important; color: #fff !important;
    border-radius: 11px !important; padding: 9px 4px !important;
    gap: 3px !important; text-decoration: none !important; min-height: 50px !important;
  }
  .mob-bar-quote {
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 5px !important;
    background: linear-gradient(135deg,#ff2d8f,#c2006b) !important;
    color: #fff !important; border: none !important;
    border-radius: 11px !important; padding: 10px 8px !important;
    font-size: 12.5px !important; font-weight: 900 !important;
    cursor: pointer !important; font-family: 'Manrope',sans-serif !important;
    box-shadow: 0 3px 14px rgba(255,45,143,0.38) !important; min-height: 50px !important;
  }
  .mob-bar-icon { font-size: 17px !important; line-height: 1 !important; }
  .mob-bar-lbl  { font-size: 7.5px !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }

/* ─── 26. MODAL — slides up from bottom ──────────────────────── */
  #quote-modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  #quote-modal-box {
    width: 100% !important; max-width: 100% !important;
    border-radius: 22px 22px 0 0 !important; max-height: 94vh !important;
    overflow-y: auto !important; -webkit-overflow-scrolling: touch !important;
    animation: mobileSheetUp .28s cubic-bezier(0.34,1.1,0.64,1) both !important;
  }
  @keyframes mobileSheetUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  /* Handle bar */
  #quote-modal-box::before {
    content: '' !important; display: block !important;
    width: 40px !important; height: 4px !important;
    background: #ddd !important; border-radius: 4px !important;
    margin: 10px auto 0 !important;
  }
  #quote-modal-box .quote-card { padding: 16px 14px 28px !important; }
  #quote-modal-close { top: 8px !important; right: 14px !important; }
  /* Service picker 3-per-row */
  .service-picker { gap: 5px !important; }
  .sp-option      { flex: 1 1 calc(33.33% - 5px) !important; min-width: 0 !important; }
  .sp-card        { padding: 8px 4px 7px !important; }
  .sp-name        { font-size: 0.63rem !important; }
  .sp-price       { font-size: 0.6rem !important; }
  /* Extras 2-per-row */
  .extras-grid    { grid-template-columns: 1fr 1fr !important; gap: 5px !important; }
  .extra-card     { padding: 7px 5px !important; min-height: 46px !important; }
  .extra-name     { font-size: 0.6rem !important; }
  /* Form inputs */
  .form-row       { grid-template-columns: 1fr !important; gap: 7px !important; }
  .form-group input, .form-group select {
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 10px 12px !important;
  }
  .price-total    { padding: 10px 12px !important; }
  .pt-amount      { font-size: 1.4rem !important; }
  .qc-header h3   { font-size: 1rem !important; }
  .qc-step-label  { font-size: 0.68rem !important; }

/* ─── 27. MOBILE DRAWER ───────────────────────────────────────── */
  .mob-drawer      { border-radius: 22px 22px 0 0 !important; max-height: 88vh !important; }
  .mob-d-input     { font-size: 16px !important; } /* no iOS zoom */

/* ─── 28. BREADCRUMB ──────────────────────────────────────────── */
  .breadcrumb-inner { font-size: 0.72rem !important; gap: 4px !important; }

/* ─── 29. INLINE GRID OVERRIDES — catch-all ──────────────────── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 440px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns:1fr 400px"] {
    grid-template-columns: 1fr !important; gap: 14px !important;
  }
  /* Restore mob-bar MUST come after */
  .mob-bar, #mobBar { grid-template-columns: 1fr 1fr 1.6fr !important; }

  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important; gap: 10px !important;
  }
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  /* Hub service cards stay 2-col */
  [style*="minmax(175px,1fr)"],
  [style*="minmax(180px,1fr)"] {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  /* Position: sticky → static */
  [style*="position:sticky"] { position: static !important; }
  /* Reduce large images */
  [style*="height:340px"], [style*="height:300px"], [style*="height:280px"] {
    height: 200px !important;
  }
  /* Flex rows wrap */
  [style*="display:flex"][style*="gap:28px"],
  [style*="display:flex"][style*="gap:24px"] {
    flex-wrap: wrap !important;
  }

/* ─── 30. SEO CONTENT SECTIONS ───────────────────────────────── */
  #seo-intro [style*="grid-template-columns"],
  #seo-inclusions [style*="grid-template-columns"],
  #seo-areas [style*="grid-template-columns"],
  #seo-close [style*="grid-template-columns"],
  #hub-final-content [style*="grid-template-columns"],
  #hub-spec-content [style*="grid-template-columns"],
  #hub-seo-intro [style*="grid-template-columns"],
  #kitchen-extractor-fan-cleaning [style*="grid-template-columns"],
  #cooker-hood-filter-cleaning [style*="grid-template-columns"],
  #extractor-fan-filter-degreasing [style*="grid-template-columns"],
  #catering-extractor-fan-cleaning [style*="grid-template-columns"],
  #kitchen-exhaust-fan-cleaning [style*="grid-template-columns"],
  #our-strengths [style*="grid-template-columns"],
  #deep-cleaning-domestic-single-ovens [style*="grid-template-columns"],
  #single-oven-strengths [style*="grid-template-columns"],
  #professional-gas-electric-hob-cleaning [style*="grid-template-columns"],
  #ceramic-glass-hob-cleaning-specialists [style*="grid-template-columns"],
  #hob-cleaning-strengths-areas [style*="grid-template-columns"],
  #double-oven-cleaning-service [style*="grid-template-columns"],
  #double-oven-cleaning-cost [style*="grid-template-columns"],
  #professional-vs-self-cleaning [style*="grid-template-columns"],
  #areas-we-cover [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important; gap: 12px !important;
  }
  #seo-why-choose [style*="grid-template-columns"],
  #why-choose-single-oven-cleaning [style*="grid-template-columns"],
  #our-strengths [style*="repeat(3"] {
    grid-template-columns: 1fr 1fr !important; gap: 8px !important;
  }
  #hub-final-content [style*="minmax(175px"],
  #hub-spec-content [style*="minmax(175px"] {
    grid-template-columns: 1fr 1fr !important; gap: 7px !important;
  }

/* ─── 31. INTERNAL LINKS ──────────────────────────────────────── */
  .seo-internal-links, #seo-internal-links {
    padding: 16px 14px !important;
  }
  .seo-internal-links ul, #seo-internal-links ul {
    flex-wrap: wrap !important; gap: 5px !important;
  }
  .seo-internal-links li a, #seo-internal-links li a {
    font-size: 0.73rem !important; padding: 5px 10px !important;
  }

/* ─── 32. COMPARE TABLE ───────────────────────────────────────── */
  .compare-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .compare-table { min-width: 460px !important; font-size: 0.76rem !important; }

/* ─── 33. TYPOGRAPHY ──────────────────────────────────────────── */
  h1 { font-size: clamp(1.35rem, 6.5vw, 1.9rem) !important; }
  h2 { font-size: clamp(1.1rem, 5.5vw, 1.5rem) !important; }
  h3 { font-size: clamp(1rem, 4.5vw, 1.2rem) !important; }
  [style*="font-size:clamp(1.4rem,2.5vw,1.9rem)"],
  [style*="font-size:clamp(1.5rem,3vw,2rem)"],
  [style*="font-size:clamp(1.3rem,2.2vw,1.7rem)"] {
    font-size: clamp(1.2rem,5vw,1.55rem) !important;
  }
  [style*="font-size:2.5rem"] { font-size: 1.8rem !important; }
  [style*="font-size:3rem"]   { font-size: 2rem !important; }
  p { line-height: 1.65 !important; }

} /* end @media 768px */

/* ═══ 480px ══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container, .w { padding-left: 12px !important; padding-right: 12px !important; }
  body { padding-bottom: 76px !important; }

  /* ALWAYS restore mob-bar 3-col */
  .mob-bar, #mobBar { grid-template-columns: 1fr 1fr 1.6fr !important; }

  /* 2-col → 1-col at 480 */
  .why-features,
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .mob-bar, #mobBar { grid-template-columns: 1fr 1fr 1.6fr !important; }

  .services-grid { gap: 6px !important; }
  .service-card  { padding: 11px 11px !important; }
  .service-img   { width: 46px !important; min-width: 46px !important; height: 46px !important; }
  .service-body h3 { font-size: 0.84rem !important; }

  #before-after img          { height: 185px !important; }
  #before-after-results img  { height: 170px !important; }

  [style*="height:340px"], [style*="height:300px"] { height: 180px !important; }

  /* 3-col → 2-col stays (postcode chips etc) */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr 1fr !important; }
}

/* ═══ 360px ══════════════════════════════════════════════════ */
@media (max-width: 360px) {
  .container, .w { padding-left: 10px !important; padding-right: 10px !important; }
  .mob-bar, #mobBar { grid-template-columns: 1fr 1fr 1.5fr !important; }
  h1 { font-size: 1.3rem !important; }
  .section-title { font-size: 1.1rem !important; }
  .mob-bar-quote { font-size: 11px !important; }
}

/* ═══ iOS ZOOM FIX + HEAVY SECTION COLLAPSING ════════════════
   Applied last so they override any inline styles
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── iOS zoom: ALL inputs/selects/textareas must be 16px ── */
  /* iOS Safari zooms in on any input with font-size < 16px   */
  input, select, textarea,
  input[style], select[style], textarea[style],
  [style*="font-size:0.9rem"] input,
  [style*="font-size:0.8rem"] input {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }
  /* Target the inline-styled inputs directly by their patterns */
  input[style*="font-size:0.85rem"],
  input[style*="font-size:0.86rem"],
  input[style*="font-size:0.87rem"],
  input[style*="font-size:0.88rem"],
  input[style*="font-size:0.9rem"] {
    font-size: 16px !important;
  }

  /* ── HEAVY SEO CONTENT — collapse on mobile ─────────────── */
  /* Pages 80KB+ have long SEO prose sections. On mobile we   */
  /* collapse them to 5 lines with a "read more" feel.        */
  /* We can't do true JS collapse in CSS, but we can:         */
  /* - Reduce font size so more fits per screen               */
  /* - Tighten line-height and paragraph spacing              */

  /* Main SEO prose sections */
  #seo-intro p, #seo-intro h2, #seo-intro h3,
  section[style*="background:#f9fafb"] p,
  section[style*="background:#fff"][style*="padding:60px"] p,
  section[style*="background:#fff"][style*="padding:64px"] p {
    font-size: 0.88rem !important;
    line-height: 1.62 !important;
    margin-bottom: 12px !important;
    color: #555 !important;
  }
  section[style*="background:#f9fafb"] h2,
  section[style*="background:#fff"][style*="padding:60px"] h2 {
    font-size: clamp(1.1rem,4.5vw,1.4rem) !important;
    margin-top: 20px !important;
    margin-bottom: 8px !important;
  }
  section[style*="background:#f9fafb"] h3,
  section[style*="background:#fff"][style*="padding:60px"] h3 {
    font-size: 1rem !important;
    margin-bottom: 6px !important;
  }

  /* ── LONG PAGES: hide 3rd+ review card on mobile ─────────── */
  .reviews-grid .review-card:nth-child(n+3) { display: none !important; }
  /* Show a see-more link instead */
  .reviews-grid::after {
    content: '★ See all 200+ Google reviews →';
    display: block !important;
    text-align: center !important;
    color: #ff2d8f !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    padding: 8px 0 !important;
    grid-column: 1 / -1 !important;
  }

  /* ── BLOG SECTION: max 2 posts on mobile ─────────────────── */
  .blog-grid .blog-card:nth-child(n+3) { display: none !important; }

  /* ── INLINE SEO STRENGTHS/CARDS: tighten ─────────────────── */
  [style*="background:#f9fafb"][style*="border-radius:14px"],
  [style*="background:#f9fafb"][style*="border-radius: 14px"] {
    padding: 14px 12px !important;
    border-radius: 10px !important;
  }
  [style*="background:#f9fafb"][style*="border-radius:14px"] > div:first-child {
    font-size: 1.3rem !important;
    margin-bottom: 6px !important;
  }

  /* ── HUB PAGES: service links grid tighter ───────────────── */
  #hub-final-content a[href],
  #hub-spec-content a[href] {
    font-size: 0.8rem !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }

  /* ── POSTCODE CHIPS: 3-col ───────────────────────────────── */
  [style*="grid-template-columns:repeat(auto-fill,minmax(130px,1fr)"],
  [style*="grid-template-columns:repeat(auto-fill,minmax(160px,1fr)"] {
    grid-template-columns: repeat(3,1fr) !important;
    gap: 6px !important;
  }

  /* ── BOOKING FORM CARDS (styles2/styles3 sidebar) ─────────── */
  .book-card, [class*="book-card"],
  div[style*="position:sticky"][style*="top:"],
  div[style*="position: sticky"][style*="top:"] {
    position: static !important;
    margin-bottom: 16px !important;
  }

  /* ── MQ STRIP: hide on pages where mob-bar is present ───── */
  /* De-duplicate booking prompts */
  .mq-strip-outer { display: none !important; }

  /* ── QUOTE NUDGE: only one visible per page ──────────────── */
  .quote-nudge { display: none !important; }

  /* ── AREAS: mob-areas-section takes over from desktop grid ── */
  .areas-section .areas-grid { display: none !important; }
  .mob-areas-section         { display: block !important; }

}

/* ═══ TARGETED FIXES v3 ══════════════════════════════════════
   1. Hero buttons equal size
   2. Service cards with visible SVG photos + aligned price
   3. Before/after moved up (handled by injected JS)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── FIX 1: Hero buttons — Book + Call same size, WA below ── */
  .hero-btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }
  .hero-btn {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
    padding: 13px 10px !important;
    border-radius: 12px !important;
    font-size: 0.86rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-align: center !important;
  }
  .hero-btn strong { font-size: 0.86rem !important; font-weight: 900 !important; }
  .hero-btn small  { display: none !important; }
  /* WhatsApp — full width in its own row */
  .hero-btn-wa {
    grid-column: 1 / -1 !important;
    padding: 13px 10px !important;
    justify-content: center !important;
  }

  /* ── FIX 2a: Service cards — 2-col grid with photos ────────── */
  .services-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .service-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border-radius: 14px !important;
    border: 1.5px solid #f0e0ea !important;
    padding: 14px 10px 12px !important;
    background: #fff !important;
    gap: 0 !important;
    text-align: center !important;
    transform: none !important;
  }
  /* Service image box — show the SVG icon */
  .service-img {
    width: 100% !important;
    height: 72px !important;
    border-radius: 10px !important;
    background: #fff0f7 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 8px !important;
    position: relative !important;
    overflow: visible !important;
  }
  /* Show the actual SVG appliance image */
  .service-img img {
    display: block !important;
    width: 52px !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
    margin: 0 auto !important;
  }
  /* Price badge — positioned correctly, not floating */
  .service-price {
    position: static !important;
    display: inline-block !important;
    background: #ff2d8f !important;
    color: #fff !important;
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 20px !important;
    margin-top: 4px !important;
    margin-bottom: 6px !important;
    white-space: nowrap !important;
  }
  /* Service name */
  .service-body {
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  .service-body h3 {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
  }
  .service-body p { display: none !important; }
  /* Single CTA button */
  .service-actions {
    display: block !important;
    width: 100% !important;
    margin-top: auto !important;
  }
  .sa-primary {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 9px 6px !important;
    border-radius: 9px !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
  }
  .sa-wa, .sa-call { display: none !important; }

  /* ── FIX 2b: Service img::after gradient — remove ──────────── */
  .service-img::after { display: none !important; }

  /* ── FIX 3: Before/after section — ensure proper display ───── */
  #before-after-results {
    padding: 22px 0 18px !important;
  }
  /* When JS moves it, ensure it doesn't lose its styles */
  #before-after-results [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #before-after-results img {
    height: 195px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

}

@media (max-width: 480px) {
  /* Keep mob-bar 3-col */
  .mob-bar, #mobBar { grid-template-columns: 1fr 1fr 1.6fr !important; }

  /* Service grid stays 2-col at 480 */
  .services-grid { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .service-card  { padding: 11px 8px 10px !important; }
  .service-img   { height: 60px !important; }
  .service-img img { width: 44px !important; }
  .service-body h3 { font-size: 0.76rem !important; }
  .sa-primary { font-size: 0.72rem !important; padding: 8px 4px !important; }

  /* Hero buttons stay equal grid */
  .hero-btns { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .hero-btn   { padding: 11px 8px !important; font-size: 0.8rem !important; }
  .hero-btn-wa { grid-column: 1 / -1 !important; }
}

/* ═══ FORM + HERO BUTTON FIXES v4 ═══════════════════════════════
   1. Hero buttons: Book + Phone side-by-side, WA full width
   2. Full modal form — optimised for mobile (no drawer intercept)
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── HERO BUTTONS: exact layout ────────────────────────────── */
  /* Force grid regardless of any earlier flex rules */
  div.hero-btns,
  .hero-content .hero-btns,
  .hero .hero-btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    width: 100% !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    margin-bottom: 16px !important;
  }
  /* All hero btns: reset any flex constraints, fill grid cell */
  .hero-btns .hero-btn,
  .hero-btns a.hero-btn {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 13px 8px !important;
    border-radius: 12px !important;
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-decoration: none !important;
  }
  .hero-btns .hero-btn strong {
    font-size: 0.85rem !important;
    font-weight: 900 !important;
  }
  .hero-btns .hero-btn small { display: none !important; }
  /* WhatsApp spans both columns */
  .hero-btns .hero-btn-wa,
  .hero-btns a.hero-btn-wa {
    grid-column: 1 / -1 !important;
    padding: 13px 8px !important;
  }

  /* ── FULL MODAL — mobile bottom sheet ──────────────────────── */
  #quote-modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
    background: rgba(0,0,0,0.55) !important;
  }
  #quote-modal-box {
    border-radius: 24px 24px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    animation: modalSheet .3s cubic-bezier(0.34,1.05,0.64,1) both !important;
  }
  @keyframes modalSheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Drag handle */
  #quote-modal-box::before {
    content: '' !important;
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    background: #e0e0e0 !important;
    border-radius: 3px !important;
    margin: 12px auto 0 !important;
  }
  /* Close button — easy to tap */
  #quote-modal-close {
    top: 10px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
  /* Card padding */
  #quote-modal-box .quote-card {
    padding: 16px 14px 36px !important;
  }
  /* Header */
  .qc-header { margin-bottom: 14px !important; }
  .qc-header h3 { font-size: 1.05rem !important; font-weight: 900 !important; }
  .qc-header p  { font-size: 0.8rem !important; color: #888 !important; }

  /* ── STEP 1: Service picker ────────────────────────────────── */
  .qc-step { margin-bottom: 14px !important; }
  .qc-step-label {
    font-size: 0.7rem !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.8px !important;
  }
  .service-picker {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
  }
  .sp-option { flex: none !important; min-width: 0 !important; }
  .sp-card {
    border-radius: 10px !important;
    padding: 10px 5px 8px !important;
    gap: 3px !important;
  }
  .sp-cat   { font-size: 0.5rem !important; }
  .sp-name  { font-size: 0.65rem !important; line-height: 1.2 !important; }
  .sp-price { font-size: 0.63rem !important; }

  /* ── STEP 2: Extras ────────────────────────────────────────── */
  .extras-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  .extra-card {
    padding: 9px 7px !important;
    min-height: 50px !important;
    border-radius: 9px !important;
  }
  .extra-name  { font-size: 0.63rem !important; }
  .extra-price { font-size: 0.63rem !important; }
  .extra-check { width: 14px !important; height: 14px !important; top: 5px !important; right: 5px !important; }

  /* ── PRICE TOTAL BAR ───────────────────────────────────────── */
  .price-total {
    padding: 12px 14px !important;
    border-radius: 11px !important;
    margin-bottom: 12px !important;
  }
  .pt-label  { font-size: 0.72rem !important; }
  .pt-amount { font-size: 1.5rem !important; }
  .pt-note   { font-size: 0.65rem !important; }

  /* ── STEP 3: Your details ──────────────────────────────────── */
  .form-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .form-group { margin-bottom: 8px !important; }
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important;       /* NO iOS zoom */
    padding: 13px 14px !important;
    border-radius: 10px !important;
    border: 2px solid #e5e7eb !important;
    width: 100% !important;
  }
  .form-group input:focus,
  .form-group select:focus {
    border-color: #ff2d8f !important;
    outline: none !important;
  }

  /* ── POSTCODE AUTOCOMPLETE ─────────────────────────────────── */
  .ac-wrap input { font-size: 16px !important; padding: 13px 14px 13px 40px !important; }
  .ac-dropdown   { font-size: 0.9rem !important; max-height: 200px !important; }
  .ac-item       { padding: 12px 14px !important; }

  /* ── SUBMIT BUTTON ─────────────────────────────────────────── */
  .qc-submit {
    width: 100% !important;
    padding: 15px !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    letter-spacing: 0.2px !important;
  }

  /* ── FORM NOTE ─────────────────────────────────────────────── */
  .form-note { font-size: 0.72rem !important; margin-top: 8px !important; }

  /* ── SUCCESS / ERROR states ────────────────────────────────── */
  #quote-success { padding: 20px 14px !important; }
  #quote-error   { padding: 12px 14px !important; font-size: 0.82rem !important; }

}

@media (max-width: 480px) {
  /* Modal full height on small phones */
  #quote-modal-box { max-height: 96vh !important; }
  .qc-header h3 { font-size: 0.95rem !important; }
  .sp-card { padding: 8px 3px 7px !important; }
  .sp-name  { font-size: 0.6rem !important; }
  .sp-price { font-size: 0.58rem !important; }
  .qc-submit { padding: 14px !important; font-size: 0.9rem !important; }
  /* Hero buttons */
  div.hero-btns { grid-template-columns: 1fr 1fr !important; gap: 7px !important; }
  .hero-btns .hero-btn { padding: 11px 6px !important; font-size: 0.8rem !important; }
  .hero-btns .hero-btn-wa { grid-column: 1 / -1 !important; }
}

/* ═══ HOMEPAGE MOBILE FIXES v5 ══════════════════════════════════
   1. Hero buttons: all three equal size (3-col grid)
   2. Before/after: side-by-side compact on mobile (already moved by JS)
   3. Service chips: no display bar, tap = open modal
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── ALL THREE HERO BUTTONS: equal size 3-column grid ──────── */
  div.hero-btns,
  .hero-content .hero-btns,
  .hero .hero-btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 14px !important;
  }
  /* All buttons: equal size, centred, same padding */
  .hero-btns .hero-btn,
  .hero-btns a.hero-btn {
    flex: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 13px 6px !important;
    border-radius: 12px !important;
    font-size: 0.78rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-align: center !important;
    text-decoration: none !important;
  }
  .hero-btns .hero-btn strong {
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    display: block !important;
  }
  .hero-btns .hero-btn small { display: none !important; }
  /* WhatsApp: NO longer full-width — same grid cell as others */
  .hero-btns .hero-btn-wa,
  .hero-btns a.hero-btn-wa {
    grid-column: auto !important;
    padding: 13px 6px !important;
  }
  /* SVG icons in hero buttons: constrain size */
  .hero-btns .hero-btn svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }

  /* ── BEFORE/AFTER: side-by-side compact on homepage mobile ── */
  #before-after {
    padding: 20px 0 18px !important;
  }
  #before-after > .container > div[style*="text-align:center"] {
    margin-bottom: 14px !important;
  }
  #before-after > .container > div[style*="text-align:center"] h2 {
    font-size: 1.1rem !important;
    margin-bottom: 4px !important;
  }
  #before-after > .container > div[style*="text-align:center"] p {
    font-size: 0.76rem !important;
  }
  /* Keep side-by-side (override earlier 1-col rule) */
  #before-after [style*="grid-template-columns:1fr 1fr"],
  #before-after [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }
  /* Shorter images — compact */
  #before-after img {
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 11px !important;
  }
  /* Hide the trust pills row below images on mobile (saves space) */
  #before-after [style*="gap:28px"],
  #before-after [style*="gap: 28px"] {
    display: none !important;
  }
  /* CTA button below */
  #before-after > .container > div[style*="text-align:center"]:last-child button {
    padding: 12px 20px !important;
    font-size: 0.88rem !important;
  }
  /* Badges on images */
  #before-after [style*="top:14px"] {
    top: 8px !important;
    left: 8px !important;
    font-size: 0.65rem !important;
    padding: 4px 10px !important;
  }
  /* Caption text */
  #before-after p[style*="font-size:0.8rem"] {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }

  /* ── SERVICE CHIPS: remove "mob-sel-display" bar ────────────── */
  #mob-sel-display  { display: none !important; }
  #mob-form-cta     { display: none !important; }
  /* Chip tightening after removal of display bar */
  #mob-svc-grid     { margin-bottom: 8px !important; }
  /* Trust line at bottom of service section */
  #mob-form-section > .container > p:last-child {
    display: none !important;
  }
  /* Compact service section padding */
  #mob-form-section {
    padding: 18px 0 18px !important;
  }

}

@media (max-width: 480px) {
  /* Hero buttons: 3-col stays but text smaller */
  div.hero-btns { gap: 6px !important; }
  .hero-btns .hero-btn { padding: 11px 4px !important; font-size: 0.72rem !important; }
  .hero-btns .hero-btn strong { font-size: 0.72rem !important; }
  .hero-btns .hero-btn svg { width: 13px !important; height: 13px !important; }
  /* Before/after: keep side-by-side at 480 too */
  #before-after [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  #before-after img { height: 140px !important; }
}

/* ═══ HOMEPAGE MID-SECTION MOBILE CLEANUP ════════════════════════
   Targets: trust-bar, marquee, black trust strip, stats-after-ba
   Desktop: completely untouched
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. TRUST-BAR (4 stats above marquee) ─────────────────── */
  /* Already shows correctly — just tighten it */
  .trust-bar {
    padding: 10px 12px !important;
    gap: 0 !important;
    justify-content: space-around !important;
    border-bottom: 1px solid #2a2a2a !important;
  }
  .tb-item   { padding: 4px 6px !important; }
  .tb-num    { font-size: 1.1rem !important; font-weight: 900 !important; }
  .tb-label  { font-size: 0.58rem !important; letter-spacing: 0.3px !important; margin-top: 1px !important; }
  .tb-div    { width: 1px !important; background: rgba(255,255,255,0.1) !important; margin: 0 !important; }

  /* ── 2. MARQUEE — fix left clip, compact ──────────────────── */
  .marquee-wrap {
    overflow: hidden !important;
    padding: 8px 0 !important;
  }
  .marquee-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }
  .marquee-item {
    font-size: 0.72rem !important;
    padding: 0 14px !important;
    letter-spacing: 0.8px !important;
    gap: 7px !important;
  }

  /* ── 3. BLACK TRUST STRIP — hide on mobile (redundant) ────── */
  /* The trust-bar above hero already shows these credentials */
  div[style*="background:#1a1a1a"][style*="padding:14px 0"] {
    display: none !important;
  }

  /* ── 4. STATS-AFTER-BA — hide on mobile (shown in trust-bar) */
  #stats-after-ba {
    display: none !important;
  }

  /* ── 5. Desktop stats bar — already hidden, keep hidden ────── */
  .stats-bar, .desktop-only-block {
    display: none !important;
  }

}

/* ═══ HOMEPAGE TRUST SECTION — CLEAN MOBILE REDESIGN ═════════════
   Replaces old trust-bar + marquee + black strip + duplicate stats
   Desktop: completely untouched
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Show the new combined mobile section */
  #mob-trust-combined { display: block !important; }

  /* Hide desktop marquee on mobile (replaced by #mob-trust-combined) */
  .marquee-wrap { display: none !important; }

  /* Hide old trust-bar (replaced) */
  .trust-bar { display: none !important; }

  /* Hide black desktop trust strip */
  .desktop-only-block { display: none !important; }

  /* Hide duplicate stats block */
  #stats-after-ba { display: none !important; }

  /* Hide desktop stats bar */
  .stats-bar { display: none !important; }

}

/* ═══ TRUST SECTION — FINAL CLEANUP (hide all duplicates) ═══════
   Only #mob-trust-combined shows on mobile. Everything else hidden.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #mob-trust-combined  { display: block !important; }
  .marquee-wrap        { display: none !important; }
  .trust-bar           { display: none !important; }
  .desktop-only-block  { display: none !important; }
  #stats-after-ba      { display: none !important; }
  .stats-bar           { display: none !important; }
  /* Pink marquee from old mob-trust-combined (if any remnants) */
  #mob-trust-combined [style*="background:#ff2d8f"] { display: none !important; }
}

/* ═══ DEFINITIVE HIDE — all duplicate trust/stats on mobile ═════ */
@media (max-width: 768px) {
  .mob-hidden,
  .trust-bar,
  .marquee-wrap,
  .desktop-only-block,
  #stats-after-ba,
  .stats-bar {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }
}

/* ═══ FINAL COMPREHENSIVE MOBILE PASS ═══════════════════════════
   Fixes remaining issues found in audit across all 528 pages
   Desktop: completely untouched
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── iOS zoom fix: ALL inline-styled inputs on location pages ─ */
  /* hqf- inputs have font-size:0.86rem inline — must be 16px     */
  input[id^="hqf-"],
  input[id^="hqf-"][style*="font-size"] {
    font-size: 16px !important;
    padding: 12px 13px !important;
    border-radius: 10px !important;
  }
  /* Also the postcode input with padding-left */
  input[id^="hqf-postcode"] {
    padding-left: 36px !important;
  }

  /* ── Page-hero inline form: collapse input row on mobile ────── */
  /* The 5-col grid (name/phone/email/postcode/submit) on location  */
  /* pages must stack vertically on mobile                          */
  .page-hero [style*="grid-template-columns:1fr 1fr 1fr 1.4fr auto"],
  .page-hero [style*="grid-template-columns: 1fr 1fr 1fr 1.4fr auto"],
  [style*="grid-template-columns:1fr 1fr 1fr 1.4fr auto"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1.4fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ── Service picker: 3-col in location page hero form ────────── */
  .page-hero [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"] {
    grid-template-columns: repeat(3,1fr) !important;
    gap: 6px !important;
  }

  /* ── Submit button in location hero form: full width ─────────── */
  .page-hero button[onclick*="hqfSubmit"],
  button[onclick*="hqfSubmit"] {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px !important;
    font-size: 0.95rem !important;
    border-radius: 11px !important;
  }

  /* ── Mob-bar: ensure it always shows at bottom ───────────────── */
  .mob-bar,
  #mobBar {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1.6fr !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99999 !important;
  }

  /* ── Before/after compact: ensure works on all page types ────── */
  #before-after-results {
    padding: 22px 0 18px !important;
  }
  #before-after-results [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  #before-after-results img {
    height: 180px !important;
    object-fit: cover !important;
  }

  /* ── Blog cards: horizontal layout ───────────────────────────── */
  .blog-grid  { grid-template-columns: 1fr !important; gap: 8px !important; }
  .blog-card  { display: flex !important; flex-direction: row !important; border-radius: 10px !important; }
  .blog-img   { width: 72px !important; min-width: 72px !important; height: 72px !important; font-size: 1.4rem !important; border-radius: 8px 0 0 8px !important; }
  .blog-body  { padding: 10px 12px !important; }
  .blog-body h3 { font-size: 0.84rem !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
  .blog-body p  { display: none !important; }

  /* ── FAQ: full width, readable ───────────────────────────────── */
  .faq-grid     { grid-template-columns: 1fr !important; gap: 0 !important; }
  .faq-question { font-size: 0.86rem !important; padding: 13px 14px !important; }
  .faq-answer p { font-size: 0.83rem !important; padding: 0 14px 13px !important; }

  /* ── Section spacing: consistent across all pages ───────────── */
  section { padding: 28px 0 !important; }
  [style*="padding:64px 0"] { padding-top: 28px !important; padding-bottom: 24px !important; }
  [style*="padding:60px 0"] { padding-top: 28px !important; padding-bottom: 24px !important; }
  [style*="padding:56px 0"] { padding-top: 24px !important; padding-bottom: 20px !important; }
  [style*="padding:48px 0"] { padding-top: 20px !important; padding-bottom: 16px !important; }

  /* ── Text overflow: all inline text wraps safely ─────────────── */
  p, li, span, div, h1, h2, h3, h4 {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* ── Footer: fully stacked ───────────────────────────────────── */
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 4px !important; }

  /* ── Internal links: wrap properly ──────────────────────────── */
  .seo-internal-links ul,
  #seo-internal-links ul { flex-wrap: wrap !important; gap: 5px !important; }
  .seo-internal-links li a,
  #seo-internal-links li a { font-size: 0.73rem !important; padding: 5px 10px !important; }

  /* ── Breadcrumb: compact ─────────────────────────────────────── */
  .breadcrumb-inner { font-size: 0.72rem !important; gap: 4px !important; flex-wrap: wrap !important; }

  /* ── Process section: hide on mobile (adds scroll, no value) ─── */
  .process-section { display: none !important; }

  /* ── Comparison table: horizontal scroll ────────────────────── */
  .compare-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .compare-table { min-width: 460px !important; font-size: 0.76rem !important; }

  /* ── Hub page content: single column ────────────────────────── */
  #hub-final-content [style*="grid-template-columns"],
  #hub-spec-content  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #hub-final-content [style*="minmax(175px"],
  #hub-spec-content  [style*="minmax(175px"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 7px !important;
  }

  /* ── Elfsight reviews widget ─────────────────────────────────── */
  .elfsight-app-c47f043c-54e4-437f-997c-167a9eb90a1d,
  [class*="elfsight-app"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

}

@media (max-width: 480px) {
  /* Keep mob-bar 3-col */
  .mob-bar, #mobBar { grid-template-columns: 1fr 1fr 1.6fr !important; }

  /* Container tighter */
  .container, .w { padding-left: 12px !important; padding-right: 12px !important; }

  /* Headings readable */
  h1 { font-size: clamp(1.3rem, 6.5vw, 1.8rem) !important; }
  h2 { font-size: clamp(1.1rem, 5.5vw, 1.45rem) !important; }
}

/* ═══ REMOVE mob-trust-combined entirely from mobile ════════════ */
@media (max-width: 768px) {
  #mob-trust-combined { display: none !important; }
}

/* ═══ REMOVE stats bar + marquee scroller from mobile ══════════ */
@media (max-width: 768px) {
  .trust-bar,
  .marquee-wrap,
  .mq-strip-outer,
  div[style*="background:#1a1a1a"][style*="padding:18px 0"],
  div[style*="background:#1a1a1a"][style*="padding:22px 0"] {
    display: none !important;
  }
}

/* ═══ REMOVE stats-after-ba grid from mobile ═══════════════════ */
@media (max-width: 768px) {
  #stats-after-ba { display: none !important; }
}

/* ═══ SERVICE CHIPS — force 2-per-row (override catch-all) ══════ */
@media (max-width: 768px) {
  #mob-svc-grid,
  #mob-svc-grid[style] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    display: grid !important;
  }
  /* Chips taller and more tap-friendly */
  .mob-svc-chip {
    min-height: 110px !important;
    padding: 14px 10px 12px !important;
    border-radius: 14px !important;
  }
  .mob-chip-name  { font-size: 0.84rem !important; font-weight: 800 !important; }
  .mob-chip-price { font-size: 0.72rem !important; }
  .mob-svc-chip img { width: 44px !important; height: 44px !important; }
}

/* ═══ REMOVE ALL REMAINING DUPLICATE SECTIONS ═══════════════════
   Belt-and-braces hide for every section showing in screenshots
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Service chips: force 2-per-row regardless */
  #mob-svc-grid,
  #mob-svc-grid[style*="repeat"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    display: grid !important;
  }

  /* All remaining trust/stats duplicate sections */
  #mob-trust-combined,
  .trust-bar,
  .marquee-wrap,
  .mq-strip-outer,
  #stats-after-ba,
  .stats-bar,
  .desktop-only-block,
  div[style*="background:#1a1a1a"][style*="padding:18px 0"],
  div[style*="background:#1a1a1a"][style*="padding:22px 0"],
  div[style*="background:#1a1a1a"][style*="padding:14px 0"] {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
  }

}

/* Hide mob-trust-combined on desktop (it's mobile-only content) */
@media (min-width: 769px) {
  #mob-trust-combined { display: none !important; }
}