/* Shared secondary family landing system — aligned with Home / Heating / Silicone */
html{scroll-padding-top:82px}
.family-landing{background:#f7f8fa;color:#0d151d}
.family-landing .crumb{padding:10px 6vw;background:#f3f5f7;border-bottom:1px solid #dfe4e8;color:#65727c;font-size:11px}
.family-landing .crumb a{color:#33424e}
.family-landing main>.hero{
  position:relative;isolation:isolate;min-height:365px;overflow:hidden;
  padding:58px 51% 48px 6vw;
  background:linear-gradient(108deg,#07111b 0%,#0a1823 58%,#102738 100%);
  color:#fff
}
.family-landing main>.hero:after{
  content:"";position:absolute;z-index:-2;top:0;right:0;width:50%;height:100%;
  background-image:url('/assets/home/approved/family-realistic-sprite.webp');
  background-repeat:no-repeat;background-size:100% 400%;
}
.family-landing.family-sealing main>.hero:after{background-position:center 0%}
.family-landing.family-belts main>.hero:after{background-position:center 33.333%}
.family-landing.family-rollers main>.hero:after{background-position:center 66.667%}
.family-landing.family-custom main>.hero:after{background-position:center 100%}
.family-landing main>.hero:before{
  content:"";position:absolute;z-index:-1;inset:0;
  background:linear-gradient(90deg,#07111b 0%,#07111b 43%,rgba(7,17,27,.93) 50%,rgba(7,17,27,.26) 68%,rgba(7,17,27,.06) 100%)
}
.family-landing .hero .ey{display:flex;align-items:center;gap:12px;margin:0 0 13px;color:#cbd4da;font-size:10px;letter-spacing:.2em}
.family-landing .hero .ey:before{content:"";width:46px;height:4px;border-radius:3px;background:#ef1d27}
.family-landing .hero h1{max-width:650px;margin:0 0 15px;font-size:clamp(38px,4.4vw,60px);line-height:.98;letter-spacing:-.045em}
.family-landing .hero p{max-width:600px;margin:0 0 23px;color:#c0cad2;font-size:17px;line-height:1.47}
.family-landing .actions{display:flex;gap:10px;flex-wrap:wrap}
.family-landing .btn{min-height:42px;padding:0 17px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:850}
.family-landing .btn.primary,.family-landing .rfq{background:linear-gradient(135deg,#d90918,#ff1c28)!important;color:#fff;box-shadow:0 9px 24px rgba(225,27,34,.18)}
.family-landing .btn.ghost{border:1px solid rgba(255,255,255,.32);color:#fff;background:rgba(255,255,255,.02)}
.family-landing .section{padding:46px 6vw}
.family-landing .section.soft{background:#f1f4f6}
.family-landing .head{max-width:920px;margin:0 0 22px}
.family-landing .head .ey{display:flex;align-items:center;gap:11px;margin:0 0 10px;color:#25333e;font-size:10px;letter-spacing:.18em}
.family-landing .head .ey:before{content:"";width:36px;height:3px;border-radius:3px;background:#ef1d27}
.family-landing .head h2{margin:0 0 10px;font-size:clamp(27px,3vw,39px);line-height:1.04;letter-spacing:-.035em}
.family-landing .head p{max-width:700px;margin:0;color:#65737e;font-size:14px}
.family-landing .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.family-landing .card{
  position:relative;min-height:166px;padding:21px;border:1px solid #dce3e7;border-radius:12px;background:#fff;
  box-shadow:0 7px 22px rgba(7,17,27,.035);overflow:hidden
}
.family-landing .card:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#ef1d27,#ff4a55)}
.family-landing .card .icon{width:40px;height:40px;border-radius:11px;background:#f3f5f7;color:#14232e;display:grid;place-items:center;font-size:18px}
.family-landing .card h3{margin:15px 0 6px;font-size:17px;line-height:1.15}
.family-landing .card p{margin:0;color:#687681;font-size:12px;line-height:1.4}
.family-landing .specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.family-landing .spec{padding:18px;border:1px solid #dce3e7;border-radius:11px;background:#fff}
.family-landing .spec h3{margin:0 0 6px;font-size:14px}.family-landing .spec p{margin:0;color:#687681;font-size:11.5px;line-height:1.38}
.family-landing .cta{
  margin:0;padding:34px 6vw;background:radial-gradient(circle at 88% 10%,#133047 0%,#081722 48%,#06111a 100%);
  border-radius:0;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px
}
.family-landing .cta h2{margin:0 0 8px;font-size:29px;line-height:1.05}.family-landing .cta p{margin:0;color:#b7c3cb;font-size:13px}
.family-landing footer{padding:23px 6vw;background:#050c12;color:#93a1ab;font-size:11px}
.family-landing section[id]{scroll-margin-top:82px}
@media(max-width:1000px){
  .family-landing main>.hero{padding-left:4vw;padding-right:48%;min-height:340px}
  .family-landing .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .family-landing .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .family-landing main>.hero{padding:34px 20px 0;min-height:0}
  .family-landing main>.hero:before{background:linear-gradient(180deg,#07111b 0%,#07111b 48%,rgba(7,17,27,.15) 76%,transparent 100%)}
  .family-landing main>.hero:after{position:relative;display:block;width:calc(100% + 40px);height:220px;margin:28px -20px 0;background-size:100% 400%}
  .family-landing .hero h1{font-size:38px}.family-landing .hero p{font-size:15px}
  .family-landing .section{padding:34px 20px}
  .family-landing .grid{grid-template-columns:1fr}
  .family-landing .card{min-height:135px}
  .family-landing .cta{padding:30px 20px;display:block}.family-landing .cta .btn{margin-top:14px}
}