/* Ductless Brothers — homepage hero
   Dotted navy background behind everything; logo + text on the left;
   team photo on the right, sized to the photo's own shape so nobody is cropped. */
.db-hero2-host.db-hero2-host{
  height:auto !important; min-height:0 !important; padding:0 !important; margin:0 !important;
  background:#0B1120 !important; background-image:none !important; overflow:hidden;
}

/* Photo is 601 x 400 (ratio 1.5025). Hero height scales with the window. */
.db-hero2.db-hero2{
  --hero-h: clamp(480px, 34vw, 600px);
  position:relative; display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:var(--hero-h);
  background:
    radial-gradient(rgba(103,201,232,.16) 2px, transparent 2.5px) 0 0 / 22px 22px,
    linear-gradient(135deg,#151E33 0%,#0F2A3A 100%) !important;
}

.db-hero2 .db-hero2__panel{
  position:relative; z-index:2; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:clamp(18px,2.2vw,36px);
  padding:28px clamp(28px,3vw,56px) 28px clamp(24px,3vw,64px);
  background:transparent !important;
}
.db-hero2 .db-hero2__logo{
  flex:0 0 auto; width:clamp(100px,9vw,150px); height:auto; object-fit:contain;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));
}
.db-hero2 .db-hero2__text{ min-width:0; max-width:540px; text-align:left; }

.db-hero2.db-hero2 h1{
  margin:0 0 12px !important; padding:0 !important; background:none !important; box-shadow:none !important;
  font-family:Barlow, Inter, sans-serif; font-weight:800; font-style:italic;
  font-size:clamp(36px,3.5vw,58px); line-height:1.02; color:#FFFFFF !important; text-align:left;
}
.db-hero2.db-hero2 p{
  margin:0 0 16px !important; padding:0 !important; max-width:none !important;
  background:none !important; box-shadow:none !important; border:0 !important;
  font-size:clamp(14.5px,1.15vw,18px); line-height:1.5; color:#FFFFFF !important; text-align:left;
}
.db-hero2 .db-hero2__btns{ display:flex; flex-wrap:wrap; gap:12px; margin:0 0 14px; justify-content:flex-start; }
.db-hero2 .db-hero2__btns a{ margin:0 !important; }
.db-hero2.db-hero2 .db-hero2__badge{ font-size:13px; margin:0 0 12px !important; color:#FFFFFF !important; white-space:nowrap; letter-spacing:-.1px; }
.db-hero2.db-hero2 .db-hero2__slogan{
  display:inline-block !important; width:auto !important; margin:0 !important;
  padding:10px 26px !important; border-radius:999px !important; background:#3B7A3D !important;
  box-shadow:0 8px 18px rgba(0,0,0,.3) !important;
  color:#FFFFFF !important; font-weight:600; font-size:16px; white-space:nowrap; text-align:center !important;
}

/* Team photo: width follows the photo's ratio, so the whole crew fits */
.db-hero2 .db-hero2__photo{
  position:relative; z-index:3;
  height:var(--hero-h); width:calc(var(--hero-h) * 1.5025);
  background:url('/Images/Squad%20of%20Ductless%20Bros.jpg') center / 100% 100% no-repeat;
  border-radius:16% 0 0 16% / 50% 0 0 50%;
  border-left:6px solid #67C9E8;
  box-shadow:-18px 0 40px rgba(0,0,0,.45);
}

/* Tablets and phones: photo on top (full team, no cropping), content below */
@media (max-width:1180px){
  .db-hero2.db-hero2{ grid-template-columns:1fr; grid-template-rows:auto; }
  .db-hero2 .db-hero2__photo{
    order:-1; width:100%; height:auto; aspect-ratio:601 / 400;
    max-height:none; background-size:100% 100%;
    border-radius:0 0 50% 50% / 0 0 7% 7%;
    border-left:0; border-bottom:5px solid #67C9E8;
  }
  .db-hero2 .db-hero2__panel{ flex-direction:column; padding:32px 20px 44px; gap:18px; }
  .db-hero2 .db-hero2__logo{ width:96px; }
  .db-hero2 .db-hero2__text{ max-width:620px; }
  .db-hero2 .db-hero2__text, .db-hero2.db-hero2 h1, .db-hero2.db-hero2 p{ text-align:center; }
  .db-hero2.db-hero2 h1{ font-size:clamp(34px,7vw,52px); }
  .db-hero2.db-hero2 p{ font-size:16px; }
  .db-hero2.db-hero2 .db-hero2__badge{ font-size:clamp(10.5px,3.05vw,14px); }
  .db-hero2 .db-hero2__btns{ justify-content:center; }
  .db-hero2.db-hero2 .db-hero2__slogan{ white-space:normal; }
}
@media (min-width:700px) and (max-width:1180px){
  .db-hero2 .db-hero2__photo{ width:min(100%, 820px); justify-self:center; border-radius:0 0 50% 50% / 0 0 7% 7%; }
}
