/* Ductless Brothers — stylish "Meet the Brothers" section (homepage) */

#brothers.section{
  position:relative; overflow:hidden;
  padding-top:72px !important; padding-bottom:80px !important;
  background:
    radial-gradient(620px 400px at 15% 30%, rgba(103,201,232,.15), transparent 70%),
    radial-gradient(560px 360px at 88% 80%, rgba(216,90,28,.15), transparent 70%),
    radial-gradient(rgba(255,255,255,.05) 1.5px, transparent 2px) 0 0 / 24px 24px,
    #0B1120 !important;
}

/* Title with gradient underline */
#brothers .brothers-section-title{
  position:relative; display:table; margin:0 auto 48px !important;
  padding:0 0 14px !important; background:none !important; border:0 !important; box-shadow:none !important;
  font-size:clamp(34px,4vw,52px) !important; color:#FFFFFF !important; letter-spacing:-.5px;
}
#brothers .brothers-section-title::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:90px; height:5px; border-radius:99px;
  background:linear-gradient(90deg,#D85A1C,#67C9E8);
}

#brothers .brothers-layout{ gap:40px !important; align-items:stretch !important; }

/* Photo: tilted gradient frame behind it, straightens on hover */
#brothers .brothers-image-wrapper{
  position:relative; overflow:visible !important;
  border:0 !important; background:none !important; box-shadow:none !important;
}
#brothers .brothers-image-wrapper::before{
  content:""; position:absolute; inset:0; border-radius:24px;
  background:linear-gradient(135deg,#D85A1C,#67C9E8);
  transform:rotate(-3deg) translate(-6px,8px); opacity:.85;
  box-shadow:0 0 50px rgba(103,201,232,.25);
  transition:transform .4s ease;
}
#brothers .brothers-image{
  position:relative; z-index:1; width:100%; height:100%; object-fit:cover; object-position:center 15% !important;
  border-radius:22px; border:3px solid #151E33;
  box-shadow:0 22px 50px rgba(0,0,0,.5);
  transition:transform .4s ease;
}
#brothers .brothers-image-wrapper:hover::before{ transform:rotate(0deg) translate(0,0); }
#brothers .brothers-image-wrapper:hover .brothers-image{ transform:translateY(-4px); }

/* Story card */
#brothers .brothers-story-card{
  display:flex !important; flex-direction:column; justify-content:center;
  padding:40px 40px 36px !important;
  border:2px solid transparent !important;
  background:
    linear-gradient(#151E33,#151E33) padding-box,
    linear-gradient(135deg,#D85A1C,#67C9E8) border-box !important;
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 40px rgba(103,201,232,.12) !important;
}
#brothers .brothers-story-card::before{ display:none !important; }

#brothers .brothers-story-card .db-bro-kicker{
  display:inline-block; align-self:flex-start; margin:0 0 14px !important;
  padding:6px 14px !important; border-radius:99px;
  background:rgba(216,90,28,.16) !important; color:#F39566 !important;
  font-size:12px !important; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
#brothers .brothers-story-card h3{
  margin:0 0 14px !important; color:#FFFFFF !important;
  font-size:clamp(24px,2.3vw,32px) !important; line-height:1.15 !important;
}
#brothers .brothers-story-card h3 .db-bro-accent{
  background:linear-gradient(90deg,#F08A4B,#67C9E8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
#brothers .brothers-story-card p{ color:#D3DCE8 !important; font-size:16px !important; line-height:1.7 !important; }

/* Highlight pills */
#brothers .db-bro-tags{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 24px; padding:0; list-style:none; }
#brothers .db-bro-tags li{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 12px; border-radius:99px;
  background:rgba(103,201,232,.10); border:1px solid rgba(103,201,232,.45);
  color:#FFFFFF; font-size:13.5px; font-weight:700; white-space:nowrap;
}
#brothers .db-bro-tags li::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:linear-gradient(135deg,#D85A1C,#67C9E8);
}

#brothers .brothers-story-button{
  align-self:flex-start; padding:14px 26px !important; font-size:16px !important;
  box-shadow:0 12px 28px rgba(58,169,207,.35) !important;
  transition:transform .2s ease, box-shadow .2s ease;
}
#brothers .brothers-story-button:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(58,169,207,.5) !important; }
#brothers .brothers-story-button::after{ content:" →"; }

@media (max-width:900px){
  #brothers.section{ padding-top:56px !important; padding-bottom:64px !important; }
  #brothers .brothers-section-title{ margin-bottom:36px !important; }
  #brothers .brothers-image-wrapper{ margin:0 10px; }
  #brothers .brothers-story-card{ padding:30px 24px !important; }
  #brothers .brothers-story-card .db-bro-kicker, #brothers .brothers-story-button{ align-self:center; }
  #brothers .brothers-story-card h3, #brothers .brothers-story-card p{ text-align:center; }
  #brothers .db-bro-tags{ justify-content:center; }
}