/* Horizon family brand lockup v52
   Shared component: mascot + HORIZON + product row + tagline.
   Product sites provide only their mascot, product name and product-specific mark.
*/
:root{
  --family-header-height:65px;
  --family-footer-height:65px;
  --family-plan:#ffc145;
  --horizon-family-start:#f3f6f9;
  --horizon-family-mid:#d8ecf1;
  --horizon-family-end:#74c6dc;
}

.horizon-family-lockup{
  box-sizing:border-box!important;
  width:max-content!important;
  max-width:100%!important;
  height:54px!important;
  max-height:54px!important;
  display:inline-grid!important;
  grid-template-columns:auto auto!important;
  align-items:center!important;
  column-gap:8px!important;
  overflow:visible!important;
  white-space:nowrap!important;
  text-decoration:none!important;
}

.horizon-family-mascot{
  display:block!important;
  width:auto!important;
  height:54px!important;
  max-width:86px!important;
  max-height:54px!important;
  object-fit:contain!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
}

.horizon-family-copy{
  height:50px!important;
  min-width:max-content!important;
  display:grid!important;
  grid-template-rows:auto auto auto!important;
  align-content:center!important;
  justify-items:start!important;
  row-gap:1px!important;
  line-height:1!important;
  white-space:nowrap!important;
}

.horizon-family-name{
  display:block!important;
  margin:0!important;
  padding:0!important;
  font:italic 900 18px/.92 "DM Sans",Arial,sans-serif!important;
  letter-spacing:.01em!important;
  background:linear-gradient(92deg,var(--horizon-family-start) 0%,var(--horizon-family-mid) 53%,var(--horizon-family-end) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}

/* One product-row color source. Product text + product mark inherit this together. */
.horizon-family-product-row{
  position:relative!important;
  display:block!important;
  width:max-content!important;
  margin:1px 0 0!important;
  padding:0 0 0 15px!important;
  color:var(--brand2)!important;
  font:italic 900 14px/.95 "DM Sans",Arial,sans-serif!important;
  letter-spacing:.08em!important;
}

.horizon-family-product{
  color:inherit!important;
  font:inherit!important;
  letter-spacing:inherit!important;
}

/* Horizon Drive's existing three staggered skidmarks.
   They inherit the EXACT SAME row color as DRIVE. */
.horizon-family-lockup[data-horizon-product="drive"] .horizon-family-product-row::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:50%!important;
  width:12px!important;
  height:2px!important;
  background:currentColor!important;
  box-shadow:-5px -4px 0 -.5px currentColor,-8px 4px 0 -.5px currentColor!important;
  transform:translateY(-50%) skewX(-22deg)!important;
}

.horizon-family-tagline{
  display:block!important;
  margin:2px 0 0!important;
  padding:0!important;
  color:#eef4fb!important;
  font:italic 700 10.5px/1 "DM Sans",Arial,sans-serif!important;
  letter-spacing:-.012em!important;
  white-space:nowrap!important;
}

.horizon-family-plan{
  position:relative!important;
  color:var(--family-plan)!important;
  font-weight:900!important;
}

/* Matches the Cruise reference: short, shallow, hand-drawn upward arc under "plan." */
.horizon-family-plan::after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  bottom:-7px!important;
  width:33px!important;
  height:8px!important;
  background:currentColor!important;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 8'%3E%3Cpath d='M1.5 6.2 Q16.5 1.2 32.5 5.3' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E")
    center/100% 100% no-repeat!important;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 8'%3E%3Cpath d='M1.5 6.2 Q16.5 1.2 32.5 5.3' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E")
    center/100% 100% no-repeat!important;
}

/* Coordinated unit scaling; no independent translates/absolute positioning. */
@media(max-width:620px){
  .horizon-family-lockup{height:48px!important;max-height:48px!important;column-gap:6px!important}
  .horizon-family-mascot{height:48px!important;max-height:48px!important;max-width:74px!important}
  .horizon-family-copy{height:45px!important;row-gap:0!important}
  .horizon-family-name{font-size:15px!important}
  .horizon-family-product-row{font-size:11px!important;padding-left:13px!important}
  .horizon-family-lockup[data-horizon-product="drive"] .horizon-family-product-row::before{
    width:10px!important;
    box-shadow:-4px -4px 0 -.5px currentColor,-7px 4px 0 -.5px currentColor!important;
  }
  .horizon-family-tagline{font-size:8.6px!important;margin-top:2px!important}
  .horizon-family-plan::after{width:28px!important;height:7px!important;bottom:-6px!important}
}

@media(max-width:360px){
  .horizon-family-lockup{height:44px!important;max-height:44px!important;column-gap:5px!important}
  .horizon-family-mascot{height:44px!important;max-height:44px!important;max-width:67px!important}
  .horizon-family-copy{height:42px!important}
  .horizon-family-name{font-size:13.6px!important}
  .horizon-family-product-row{font-size:10px!important}
  .horizon-family-tagline{font-size:7.8px!important}
  .horizon-family-plan::after{width:25px!important;height:6px!important;bottom:-5px!important}
}


/* ========================================================================
   Horizon Drive approved brand polish — corrected 2026-08-22
   Keep the original staggered skidmark concept, just cleaner and with more
   breathing room between the car mascot and the Drive mark.
   ======================================================================== */
.horizon-family-lockup[data-horizon-product="drive"]{
  column-gap:14px!important;
}
.horizon-family-lockup[data-horizon-product="drive"] .horizon-family-product-row{
  padding-left:20px!important;
}
.horizon-family-lockup[data-horizon-product="drive"] .horizon-family-product-row::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:50%!important;
  width:12px!important;
  height:2px!important;
  background:currentColor!important;
  box-shadow:-5px -4px 0 -.45px currentColor,-8px 4px 0 -.45px currentColor!important;
  transform:translateY(-50%) skewX(-18deg)!important;
}

@media(max-width:620px){
  .horizon-family-lockup[data-horizon-product="drive"]{column-gap:10px!important}
  .horizon-family-lockup[data-horizon-product="drive"] .horizon-family-product-row{padding-left:17px!important}
  .horizon-family-lockup[data-horizon-product="drive"] .horizon-family-product-row::before{
    width:10px!important;
    box-shadow:-4px -4px 0 -.45px currentColor,-7px 4px 0 -.45px currentColor!important;
  }
}
@media(max-width:360px){
  .horizon-family-lockup[data-horizon-product="drive"]{column-gap:8px!important}
  .horizon-family-lockup[data-horizon-product="drive"] .horizon-family-product-row{padding-left:15px!important}
  .horizon-family-lockup[data-horizon-product="drive"] .horizon-family-product-row::before{
    width:9px!important;
    box-shadow:-4px -3px 0 -.45px currentColor,-6px 3px 0 -.45px currentColor!important;
  }
}


/* ========================================================================
   Final Drive logo polish — 2026-08-22
   - prevent the italic HORIZON word from clipping on the right edge
   - make the underline/slash under "plan." shorter and closer to Cruise
   ======================================================================== */
.horizon-family-name{
  padding-right:0.12em!important;
}
.horizon-family-copy{
  padding-right:2px!important;
}
.horizon-family-plan::after{
  width:26px!important;
  height:6px!important;
  bottom:-6px!important;
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 6'%3E%3Cpath d='M1.2 4.9 Q12.8 1.4 25.8 4.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    center/100% 100% no-repeat!important;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 6'%3E%3Cpath d='M1.2 4.9 Q12.8 1.4 25.8 4.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    center/100% 100% no-repeat!important;
}
@media(max-width:620px){
  .horizon-family-name{padding-right:0.1em!important}
  .horizon-family-copy{padding-right:1px!important}
  .horizon-family-plan::after{width:22px!important;height:5px!important;bottom:-5px!important}
}
@media(max-width:360px){
  .horizon-family-plan::after{width:20px!important;height:5px!important;bottom:-4px!important}
}