/* ===== Ductless Brothers — hero glowing lines (approved mockup) ===== */
.db-fi-hero{position:relative;isolation:isolate;overflow:hidden;background:#0B1220}
.db-fi-bg{position:absolute;left:0;right:0;top:0;bottom:0;z-index:-2;pointer-events:none}
.db-fi-bg canvas{display:block;width:100%;height:100%}
.db-fi-media{position:relative;z-index:1}

/* Soft dark backing behind the text so it stays readable over the lines */
.db-fi-text{position:relative}
.db-fi-text::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-80px;right:-60px;top:-6%;bottom:-6%;
  background:radial-gradient(ellipse at 45% 50%,rgba(8,13,24,.78),rgba(8,13,24,.5) 50%,rgba(8,13,24,0) 72%)}

/* White text boost */
.db-fi-text h1{color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.35),0 4px 22px rgba(0,0,0,.75)}
.db-fi-text h1 ~ p:not(.db-fi-tag):not(.db-fi-green):not(.db-fi-towns){color:#fff;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 14px rgba(0,0,0,.7)}
.db-fi-tag{color:#fff!important;font-weight:600;text-shadow:0 1px 2px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.7)}
.db-fi-towns{color:#fff;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,.9)}

/* Green bubble: clover + white outline + glow */
@keyframes dbHeroGreenGlow{0%{box-shadow:0 0 0 0 rgba(76,194,90,.7),0 14px 28px rgba(47,101,49,.45)}
  70%,100%{box-shadow:0 0 0 16px rgba(76,194,90,0),0 14px 28px rgba(47,101,49,.45)}}
.db-fi-green{display:inline-flex;align-items:center;gap:10px;margin:0;padding:14px 34px 14px 22px;border:3px solid #fff;border-radius:999px;
  background:linear-gradient(135deg,#52A954,#3B7A3D 55%,#2F6531);color:#fff;font:800 28px/1 Barlow,sans-serif;white-space:nowrap;
  text-shadow:0 1px 2px rgba(0,0,0,.3);animation:dbHeroGreenGlow 1.8s ease-out infinite}
.db-fi-green svg{width:34px;height:34px;flex-shrink:0}

/* Google rating box */
.db-gbadge{display:inline-flex;align-items:center;gap:14px;padding:10px 22px 10px 10px;border-radius:18px;background:#F4F3F1;color:#1F2937;
  text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform .2s ease,box-shadow .2s ease}
.db-gbadge:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.55)}
.db-gbadge:focus-visible{outline:3px solid #6CC4E6;outline-offset:3px}
.db-gbadge__icon{width:52px;height:52px;box-sizing:border-box;padding:9px;border-radius:12px;background:#fff;object-fit:contain;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.db-gbadge__txt{display:flex;flex-direction:column;gap:3px;text-align:left}
.db-gbadge__score{font:800 24px/1 Inter,system-ui,sans-serif;color:#111827}
.db-gbadge__star{color:#F5A623}
.db-gbadge__count{font:600 17px/1.1 Inter,system-ui,sans-serif;color:#4B5563}

/* ---------- Desktop (site breakpoint is 1180px) ---------- */
@media (min-width:1181px){
  /* Homepage */
  .db-hero2__text h1{font-size:clamp(48px,4.45vw,84px)}          /* fitH1 still shrinks it if one line won't fit */
  .db-hero2__text p.subhead{font-size:24px}
  .db-hero2__text .db-hero2__btns .btn{font-size:23px;padding:20px 26px 20px 18px}
  .db-fi-tag{font-size:19px}
  .db-hero2__cta-group{gap:16px}
  /* Regional + town pages (hero that is NOT the homepage) */
  .db-fi-hero:not(.db-fi-home) .db-fi-text h1{font-size:clamp(42px,3.3vw,62px);line-height:.98}
  .db-fi-hero:not(.db-fi-home) .db-fi-text h1 ~ p:not(.db-fi-tag):not(.db-fi-green):not(.db-fi-towns){font-size:19.5px;max-width:860px}
  .db-fi-towns{font-size:16.5px;line-height:1.9}
  .db-fi-hero:not(.db-fi-home) .actions .btn{font-size:23px;padding:20px 26px 20px 18px}
  /* Sub pages have more text: green bubble + rating box sit side by side */
  .db-fi-hero:not(.db-fi-home) .db-hero2__cta-group{display:grid;grid-template-columns:auto auto;justify-items:center;align-items:center;column-gap:16px;row-gap:14px}
  .db-fi-hero:not(.db-fi-home) .db-hero2__cta-group > :not(.db-fi-green):not(.db-gbadge){grid-column:1 / -1}
}
/* Laptop widths: step the buttons down so both stay on one row */
@media (min-width:1181px) and (max-width:1440px){
  .db-hero2__text .db-hero2__btns .btn,
  .db-fi-hero:not(.db-fi-home) .actions .btn{font-size:20px;padding:17px 22px 17px 16px}
  .db-fi-green{font-size:24px;padding:12px 28px 12px 18px}
  .db-fi-green svg{width:30px;height:30px}
}

/* ---------- Mobile / tablet ---------- */
@media (max-width:1180px){
  .db-fi-text::before{left:-40px;right:-40px;top:10px;bottom:30px;background:radial-gradient(ellipse at 50% 42%,rgba(8,13,24,.8),rgba(8,13,24,.55) 50%,rgba(8,13,24,0) 76%)}
  .db-hero2__text h1{font-size:34px}
  .db-hero2__text p.subhead{font-size:16.5px}
  .db-fi-hero:not(.db-fi-home) .db-fi-text h1{font-size:31px;line-height:1}
  .db-fi-hero:not(.db-fi-home) .db-fi-text h1 ~ p:not(.db-fi-tag):not(.db-fi-green):not(.db-fi-towns){font-size:15.5px}
  .db-fi-towns{font-size:13px;line-height:1.85}
  .db-hero2__btns,.db-fi-hero .actions{width:100%}
  .db-hero2__btns .btn,.db-fi-hero .actions .btn{justify-content:center;font-size:19px;padding:17px 18px}
  .db-fi-tag{font-size:13px;white-space:nowrap}
  .db-fi-green{font-size:19px;padding:12px 22px 12px 14px}
  .db-fi-green svg{width:26px;height:26px}
  .db-gbadge{gap:12px;padding:8px 18px 8px 8px;border-radius:16px}
  .db-gbadge__icon{width:44px;height:44px;padding:7px;border-radius:10px}
  .db-gbadge__score{font-size:21px}
  .db-gbadge__count{font-size:15px}
}
@media (max-width:380px){ .db-fi-tag{white-space:normal} .db-fi-green{white-space:normal} }
@media (prefers-reduced-motion:reduce){.db-fi-green{animation:none}.db-gbadge{transition:none}}