/* =============================================
   DORSET PLUMBING — BASE STYLES
   ============================================= */
.dp-wrap { font-family: Arial, Helvetica, sans-serif !important; color: #222 !important; line-height: 1.7 !important; font-size: 16px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; }
.dp-wrap *, .dp-wrap *::before, .dp-wrap *::after { box-sizing: border-box !important; }
/* =============================================
   BOILER GRID + CARDS
   ============================================= */
.dp-boiler-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 18px !important; margin-top: 20px !important; width: 100% !important; box-sizing: border-box !important; }
.dp-boiler-grid > * { min-width: 0 !important; }
.dp-boiler-grid > p { display: none !important; }
.dp-bc { display: block !important; border: 1px solid #f0cece !important; border-top: 4px solid #c0151a !important; border-radius: 8px !important; overflow: hidden !important; text-decoration: none !important; color: inherit !important; background: #fff !important; transition: box-shadow 0.2s, transform 0.2s !important; }
.dp-bc:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important; transform: translateY(-2px) !important; text-decoration: none !important; }
/* Strip ALL borders/outlines from every child inside a card */
.dp-bc *,
.dp-bc *::before,
.dp-bc *::after { border: none !important; outline: none !important; box-shadow: none !important; }
/* Then restore the ones we actually want */
.dp-bc-img { background: #f7f7f7 !important; padding: 24px 16px !important; text-align: center !important; border-bottom: 1px solid #f0cece !important; min-height: 160px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.dp-bc-img img { height: 120px !important; width: auto !important; margin: 0 auto !important; object-fit: contain !important; display: block !important; }
.dp-bc-body { padding: 16px !important; }
.dp-bc-brand { font-size: 11px !important; color: #999 !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin: 0 0 4px 0 !important; font-weight: 700 !important; display: block !important; }
.dp-bc-name { font-size: 16px !important; font-weight: 700 !important; color: #8b0000 !important; margin: 0 0 8px 0 !important; line-height: 1.2 !important; display: block !important; }
.dp-bc-desc { font-size: 13px !important; color: #555 !important; margin: 0 0 10px 0 !important; line-height: 1.4 !important; display: block !important; }
.dp-bc-foot { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 6px !important; }
.dp-bc-price { font-size: 17px !important; font-weight: 700 !important; color: #c0151a !important; }
.dp-bc-price small { font-size: 11px !important; color: #888 !important; font-weight: 400 !important; }
.dp-bc-badge { font-size: 12px !important; background: #fff5f5 !important; color: #8b0000 !important; border: 1px solid #f0cece !important; padding: 3px 8px !important; border-radius: 3px !important; font-weight: 700 !important; white-space: nowrap !important; display: inline-block !important; }
/* =============================================
   SERVICE GRID
   ============================================= */
.dp-svc-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; margin-top: 28px !important; }
.dp-svc-grid > p { display: none !important; }
.dp-svc-card { display: flex !important; flex-direction: column !important; background: #fff !important; border: 1px solid #f0cece !important; border-top: 4px solid #c0151a !important; border-radius: 8px !important; padding: 24px 20px !important; text-decoration: none !important; color: inherit !important; transition: box-shadow 0.2s, transform 0.2s !important; }
.dp-svc-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.10) !important; transform: translateY(-2px) !important; text-decoration: none !important; }
.dp-svc-icon { width: 40px !important; height: 40px !important; margin-bottom: 14px !important; }
.dp-svc-icon svg { width: 40px !important; height: 40px !important; }
.dp-svc-title { font-size: 16px !important; font-weight: 700 !important; color: #8b0000 !important; margin: 0 0 8px 0 !important; line-height: 1.3 !important; }
.dp-svc-desc { font-size: 13px !important; color: #555 !important; line-height: 1.5 !important; margin: 0 0 14px 0 !important; flex: 1 !important; }
.dp-svc-link { font-size: 13px !important; font-weight: 700 !important; color: #c0151a !important; margin-top: auto !important; }
/* =============================================
   EMERGENCY BAR
   ============================================= */
.dp-emergency { background: #8b0000 !important; color: #fff !important; text-align: center !important; font-size: 15px !important; font-weight: 600 !important; padding: 14px 40px !important; margin: 0 -9999px !important; padding-left: calc(9999px + 40px) !important; padding-right: calc(9999px + 40px) !important; }
.dp-emergency a { color: #fff !important; text-decoration: underline !important; font-weight: 700 !important; }
/* =============================================
   HERO
   ============================================= */
.dp-hero { background: #c0151a !important; color: #fff !important; padding: 56px 40px 48px !important; margin: 0 -9999px !important; padding-left: calc(9999px + 40px) !important; padding-right: calc(9999px + 40px) !important; }
.dp-hero h1, .dp-hero .dp-h1 { color: #fff !important; font-size: 38px !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0 0 16px 0 !important; padding: 0 !important; }
.dp-hero-sub { font-size: 18px !important; color: rgba(255,255,255,0.92) !important; margin: 0 0 30px 0 !important; max-width: 100% !important; }
.dp-btn-red   { display: inline-block !important; background: #8b0000 !important; color: #fff !important; padding: 15px 28px !important; border-radius: 4px !important; font-weight: 700 !important; font-size: 16px !important; text-decoration: none !important; margin-right: 12px !important; margin-bottom: 10px !important; border: none !important; }
.dp-btn-white { display: inline-block !important; background: #fff !important; color: #c0151a !important; padding: 15px 28px !important; border-radius: 4px !important; font-weight: 700 !important; font-size: 16px !important; text-decoration: none !important; margin-bottom: 10px !important; border: none !important; }
.dp-trust-row { margin-top: 28px !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; }
.dp-trust-item { background: rgba(0,0,0,0.2) !important; color: #fff !important; padding: 6px 14px !important; border-radius: 20px !important; font-size: 13px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; text-decoration: none !important; }
/* =============================================
   PRICE CIRCLES
   ============================================= */
.dp-price-circles { background: #1a1a1a; background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url('https://dorset.evmk.dev/wp-content/uploads/2012/10/widget-slide-1.jpg'); background-size: cover; background-position: center; padding: 44px 32px; }
.dp-price-circles-inner { display: flex !important; justify-content: center !important; align-items: center !important; gap: 24px !important; flex-wrap: nowrap !important; max-width: 100% !important; margin: 0 auto !important; }
.dp-circle { width: 185px !important; height: 185px !important; min-width: 185px !important; min-height: 185px !important; max-width: 185px !important; max-height: 185px !important; border-radius: 50% !important; background: #fff !important; border: 8px solid #c0151a !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; text-decoration: none !important; color: #222 !important; flex-shrink: 0 !important; flex-grow: 0 !important; padding: 14px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important; transition: transform 0.2s !important; overflow: hidden !important; line-height: 1.2 !important; }
.dp-circle:hover { transform: scale(1.05) !important; text-decoration: none !important; }
.dp-circle * { border: none !important; outline: none !important; }
.dp-circle-title { font-size: 15px !important; font-weight: 700 !important; color: #111 !important; display: block !important; line-height: 1.2 !important; margin-bottom: 3px !important; }
.dp-circle-from  { font-size: 12px !important; color: #666 !important; display: block !important; margin-bottom: 3px !important; }
.dp-circle-price { font-size: 28px !important; font-weight: 700 !important; color: #111 !important; display: block !important; line-height: 1.1 !important; }
/* =============================================
   CONTENT / SECTIONS
   ============================================= */
.dp-content { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
.dp-section { padding: 48px 0 !important; border-bottom: 1px solid #f0cece !important; }
.dp-section:last-child { border-bottom: none !important; }
.dp-h2 { font-size: 26px !important; font-weight: 700 !important; color: #8b0000 !important; margin: 0 0 16px 0 !important; padding: 0 !important; line-height: 1.25 !important; }
.dp-h3 { font-size: 19px !important; font-weight: 700 !important; color: #c0151a !important; margin: 24px 0 10px 0 !important; padding: 0 !important; }
.dp-p  { font-size: 16px !important; color: #333 !important; margin: 0 0 14px 0 !important; line-height: 1.7 !important; }
/* =============================================
   STATS
   ============================================= */
.dp-stats-row { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 16px !important; margin: 32px 0 !important; }
.dp-stat { background: #fff5f5 !important; border-left: 4px solid #c0151a !important; border-radius: 5px !important; padding: 18px !important; text-align: center !important; }
.dp-stat-num   { font-size: 32px !important; font-weight: 700 !important; color: #c0151a !important; line-height: 1 !important; }
.dp-stat-label { font-size: 13px !important; color: #666 !important; margin-top: 6px !important; }
/* =============================================
   TWO COL
   ============================================= */
.dp-two-col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; align-items: start !important; }
/* =============================================
   WHY US CARDS
   ============================================= */
.dp-why { display: grid !important; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)) !important; gap: 16px !important; margin-top: 24px !important; }
.dp-why-card { background: #fff5f5 !important; border-bottom: 3px solid #c0151a !important; border-radius: 6px !important; padding: 22px !important; }
.dp-why-title { font-size: 16px !important; font-weight: 700 !important; color: #8b0000 !important; margin: 0 0 8px 0 !important; }
.dp-why-text  { font-size: 14px !important; color: #555 !important; margin: 0 !important; }
/* =============================================
   FAQ
   ============================================= */
.dp-faq { margin-top: 20px !important; }
.dp-faq-item { border: 1px solid #f0cece !important; border-radius: 5px !important; margin-bottom: 10px !important; overflow: hidden !important; }
.dp-faq-q { background: #fff5f5 !important; padding: 15px 20px !important; font-weight: 700 !important; font-size: 15px !important; color: #8b0000 !important; cursor: pointer !important; list-style: none !important; display: flex !important; justify-content: space-between !important; align-items: center !important; margin: 0 !important; }
.dp-faq-q::after { content: "+" !important; font-size: 22px !important; color: #c0151a !important; font-weight: 400 !important; }
details[open] .dp-faq-q::after { content: "?" !important; }
.dp-faq-a { padding: 15px 20px !important; font-size: 15px !important; color: #333 !important; }
/* =============================================
   AREAS
   ============================================= */
.dp-areas { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 16px !important; }
.dp-area  { background: #fff5f5 !important; border: 1px solid #f0cece !important; border-radius: 4px !important; padding: 7px 14px !important; font-size: 14px !important; color: #8b0000 !important; font-weight: 600 !important; text-decoration: none !important; }
/* =============================================
   NOTICE BOX
   ============================================= */
.dp-notice { background: #fff5f5 !important; border: 1px solid #ffcdd2 !important; border-left: 4px solid #c0151a !important; border-radius: 5px !important; padding: 16px 20px !important; font-size: 15px !important; color: #333 !important; margin: 20px 0 !important; }
/* =============================================
   CTA BLOCK
   ============================================= */
.dp-cta { background: #c0151a !important; color: #fff !important; border-radius: 8px !important; padding: 44px 36px !important; text-align: center !important; margin: 40px 0 !important; }
.dp-cta-h2    { color: #fff !important; font-size: 26px !important; font-weight: 700 !important; margin: 0 0 12px 0 !important; }
.dp-cta-p     { color: rgba(255,255,255,0.9) !important; font-size: 16px !important; max-width: 520px !important; margin: 0 auto 24px !important; }
.dp-cta-phone { display: block !important; font-size: 36px !important; font-weight: 700 !important; color: #ffcdd2 !important; text-decoration: none !important; margin-bottom: 20px !important; }
/* =============================================
   RESPONSIVE — TABLET (max 960px)
   ============================================= */
@media(max-width: 960px) {
  .dp-boiler-grid { grid-template-columns: repeat(2,1fr) !important; }
  .dp-svc-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .dp-stats-row   { grid-template-columns: repeat(2,1fr) !important; }
}
/* =============================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================= */
@media(max-width: 768px) {
  .dp-boiler-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  /* Ensure card children NEVER show rogue borders on mobile */
  .dp-bc * { border: none !important; outline: none !important; box-shadow: none !important; }
  .dp-bc-img { border-bottom: 1px solid #f0cece !important; }
  .dp-bc-badge { border: 1px solid #f0cece !important; }
  .dp-two-col   { grid-template-columns: 1fr !important; }
  .dp-hero { padding-top: 32px !important; padding-bottom: 32px !important; }
  .dp-emergency { padding-top: 10px !important; padding-bottom: 10px !important; font-size: 13px !important; }
  .dp-hero h1, .dp-hero .dp-h1 { font-size: 26px !important; }
  .dp-hero-sub { font-size: 15px !important; }
  .dp-btn-red, .dp-btn-white { padding: 13px 18px !important; font-size: 14px !important; margin-right: 6px !important; }
  .dp-h2 { font-size: 20px !important; }
  .dp-section { padding: 28px 0 !important; }
  .dp-cta { padding: 28px 16px !important; }
  .dp-cta-phone { font-size: 28px !important; }
  .dp-trust-row { gap: 6px !important; }
  .dp-trust-item { font-size: 11px !important; padding: 5px 9px !important; }
  .dp-faq-q { font-size: 14px !important; padding: 12px 16px !important; }
  .dp-bc-name { font-size: 14px !important; }
  .dp-bc-desc { font-size: 12px !important; }
  .dp-bc-price { font-size: 14px !important; }
  .dp-bc-badge { font-size: 11px !important; padding: 2px 6px !important; }
  .dp-bc-img { min-height: 120px !important; padding: 16px 10px !important; }
  .dp-bc-img img { height: 90px !important; }
  .dp-bc-body { padding: 12px !important; }
}
/* =============================================
   RESPONSIVE — SMALL MOBILE (max 480px)
   ============================================= */
@media(max-width: 480px) {
  .dp-boiler-grid { grid-template-columns: 1fr !important; }
  .dp-svc-grid    { grid-template-columns: 1fr !important; }
  .dp-price-circles-inner { gap: 10px !important; flex-wrap: wrap !important; }
  .dp-circle { width: 140px !important; height: 140px !important; min-width: 140px !important; max-width: 140px !important; min-height: 140px !important; max-height: 140px !important; border-width: 5px !important; padding: 8px !important; }
  .dp-circle-title { font-size: 10px !important; }
  .dp-circle-from  { font-size: 9px !important; }
  .dp-circle-price { font-size: 20px !important; }
}