/* HARD override: HIW in 3 columns + remove default numbers */
.hiw-steps,
ol.hiw-steps { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
.hiw-steps > li { list-style: none !important; }

@media (min-width:1024px){
  .hiw-steps{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px 24px !important;
    align-items: stretch !important;
  }
  .hiw-step{ display: flex !important; flex-direction: column !important; gap: 12px !important; }
  .hiw-step .card{ height: 100% !important; }
}

/* === Benefits: 3 columns on desktop, mobile unchanged === */
@media (min-width:1024px){
  .benefits-wrap{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 20px 24px !important;
    align-items: stretch !important;
  }
  .benefit-card{
    display:flex !important;
    gap: 14px !important;
    padding: 18px 20px !important;
    border-radius: 16px !important;
  }
  .benefit-ico{ flex:0 0 auto !important; }
  .benefit-text{ display:flex !important; flex-direction:column !important; gap:6px !important; }
}
/* === End benefits desktop grid === */

/* === HARDER: Benefits 3 columns, force child sizing === */
@media (min-width:1024px){
  .benefits .benefits-wrap,
  .benefits-wrap{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 20px 24px !important;
    align-items: stretch !important;
  }
  .benefits-wrap > *{
    grid-column: auto !important;
  }
  .benefit-card{
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
}
/* === END HARDER === */

/* === HIW numbers: centered round badges INSIDE each card (CSS counters) === */
.hiw-steps, ol.hiw-steps {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  counter-reset: hiwstep !important;
}
.hiw-steps > li, ol.hiw-steps > li {
  list-style: none !important;
}
/* hide any existing dot element to avoid doubles */
.hiw-step .dot { display: none !important; }

/* Card hosts the badge */
.hiw-step .card {
  position: relative !important;
  padding-top: 64px !important; /* room for the badge */
}

/* The badge itself */
.hiw-step .card::before {
  counter-increment: hiwstep;
  content: counter(hiwstep);
  position: absolute !important;
  top: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 9999px !important;
  background: #ffffff !important;
  color: #0b1220 !important;
  border: 2px solid #2563eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.25) !important;
  z-index: 3 !important;
}
/* === End centered badges === */


/* === Center HIW title & subtitle === */
.hiw-title,
.hiw-sub{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* keep a comfortable width for the subtitle */
.hiw-sub{ max-width: 980px !important; }

/* === Footer contact: full-width black band, inner content constrained === */
.mega-footer{
  background:#0b1220 !important; /* black-ish */
  color:#ffffff !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.mega-footer a{ color:#a3d0ff !important; }
.mega-footer .container{ max-width: 920px !important; margin:0 auto !important; }
.mega-footer .mf-col h3,
.mega-footer .mf-logo,
.mega-footer .mf-label{ color:#ffffff !important; }
.mega-footer .mf-tagline{ color:rgba(255,255,255,.85) !important; }
.mega-footer .mf-ico{ color:#ffffff !important; }

/* Optional: remove default bullets in contact list */
.mf-list{ list-style:none !important; padding-left:0 !important; margin:0 !important; }
.mf-list li{ display:flex; gap:12px; align-items:flex-start; margin:10px 0; }
.mf-top.container, .mf-bottom.container{ color:#ffffff !important; }

/* === Footer: tagline in right column + polished "bottom-of-page" style === */
@media (min-width: 1024px){
  .mega-footer .mf-top.container{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items:center !important;
  }
  /* Left column: logo/brand */
  .mega-footer .mf-logo,
  .mega-footer .mf-brand,
  .mega-footer .mf-col--brand{
    grid-column: 1 !important;
    justify-self: start !important;
  }
  /* Right column: tagline text */
  .mega-footer .mf-tagline,
  .mega-footer .tagline,
  .mega-footer .container > p:first-of-type{
    grid-column: 2 !important;
    justify-self: end !important;
    text-align: left !important;
    margin: 0 !important;
    max-width: 560px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
}

/* visual finish for a footer band */
.mega-footer{
  background:#0b1220 !important;
  color:#ffffff !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
  box-shadow: 0 -24px 80px rgba(0,0,0,.35) inset !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
}
.mega-footer .container{ max-width: 920px !important; margin:0 auto !important; }
.mega-footer a{ color:#a3d0ff !important; }

/* === Footer hard fallback: split first footer container into 2 columns === */
@media (min-width:1024px){
  .mega-footer .container:first-of-type{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    align-items: center !important;
  }
  .mega-footer .container:first-of-type > :first-child{
    grid-column: 1 !important;
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .mega-footer .container:first-of-type > :nth-child(2){
    grid-column: 2 !important;
    justify-self: end !important;
    text-align: left !important;
    max-width: 560px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
}

/* === Footer right column: add heading "Fast leasing" above the text (desktop only) === */
@media (min-width:1024px){
  .mega-footer .container:first-of-type > :nth-child(2){
    position: relative !important;
  }
  .mega-footer .container:first-of-type > :nth-child(2)::before{
    content: "Fast leasing";
    display: block !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    color: #ffffff !important;
  }
}
/* === End footer heading patch === */

/* === Footer: move title + text to the RIGHT column, stacked === */
@media (min-width:1024px){
  .mega-footer .container:first-of-type{
    display:grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 24px !important;
    align-items: start !important;
  }
  /* First child = title: force to right column, row 1 */
  .mega-footer .container:first-of-type > :first-child{
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
    /* visually replace text with "Fast leasing" */
    font-size: 0 !important;
    line-height: 0 !important;
    position: relative !important;
  }
  .mega-footer .container:first-of-type > :first-child::before{
    content: "Fast leasing";
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: block !important;
  }
  /* Second child = tagline: right column, row 2 */
  .mega-footer .container:first-of-type > :nth-child(2){
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    text-align: left !important;
    max-width: 700px !important;
    margin: 0 !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
}
/* === End footer right stack === */

/* === Footer: lock to TWO columns on desktop === */
@media (min-width:1024px){
  .mega-footer .container:first-of-type{
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) 2fr !important;
    gap: 20px 28px !important;
    align-items: start !important;
  }

  /* Column 1 = title */
  .mega-footer .container:first-of-type > :first-child{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
    /* hide original, replace visually by pseudo */
    font-size: 0 !important;
    line-height: 0 !important;
    position: relative !important;
  }
  .mega-footer .container:first-of-type > :first-child::before{
    content: "Fast leasing";
    display: block !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    letter-spacing: .2px !important;
  }

  /* Column 2 = text */
  .mega-footer .container:first-of-type > :nth-child(2){
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
    max-width: 740px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
  }
}
/* === End footer 2-col lock === */

/* === Footer layout: two columns like the reference (brand+tagline | contact) === */
@media (min-width:1024px){
  /* Turn the full-width footer into a centered grid with padding */
  .mega-footer{
    display: grid !important;
    grid-template-columns: 1.6fr 1fr !important;
    gap: 28px !important;
    align-items: start !important;
    padding-left: clamp(20px, 5vw, 48px) !important;
    padding-right: clamp(20px, 5vw, 48px) !important;
  }
  /* Left = first container (brand + tagline) */
  .mega-footer .mf-top.container{
    grid-column: 1 !important;
  }
  /* Right = second container (contact) */
  .mega-footer .mf-bottom.container{
    grid-column: 2 !important;
  }
  /* Ensure footer containers don't constrain width inside grid */
  .mega-footer .container{
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Brand title on left */
  .mega-footer .mf-logo, .mega-footer .mf-brand, .mega-footer .container:first-of-type > :first-child{
    font-weight: 800 !important;
    font-size: clamp(28px, 3.2vw, 44px) !important;
    letter-spacing: .2px !important;
    margin: 0 0 12px 0 !important;
    color: #ffffff !important;
  }

  /* Tagline paragraph on left */
  .mega-footer .mf-tagline, .mega-footer .container:first-of-type > p{
    max-width: 760px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: clamp(16px, 1.5vw, 20px) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  /* Contact column */
  .mega-footer .mf-col h3, .mega-footer .mf-title, .mega-footer .mf-bottom.container > h3:first-child{
    font-size: 24px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    color: #ffffff !important;
  }
  .mega-footer .mf-list{ list-style: none !important; padding: 0 !important; margin: 0 !important; }
  .mega-footer .mf-list li{ display: flex !important; gap: 12px !important; align-items: flex-start !important; margin: 12px 0 !important; }
  .mega-footer .mf-ico{ margin-top: 3px !important; }
}

/* Keep links readable on dark background */
.mega-footer a{ color:#a3d0ff !important; }



/* === CLEAN FOOTER (desktop): 2 columns, no duplicates === */
@media (min-width:1024px){
  /* Footer band grid: left (brand+tagline) | right (contact) */
  .mega-footer{
    display:grid !important;
    grid-template-columns: 1.6fr 1fr !important;
    gap: 28px !important;
    align-items:start !important;
    padding-left: clamp(20px, 5vw, 48px) !important;
    padding-right: clamp(20px, 5vw, 48px) !important;
  }
  /* Left column = first container */
  .mega-footer .container:first-of-type{
    grid-column: 1 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display:block !important;
  }
  /* Right column = second container (contact) */
  .mega-footer .container:nth-of-type(2){
    grid-column: 2 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* RESET previous hacks that caused duplicates */
  .mega-footer .container:first-of-type > :first-child{
    /* restore natural styles */
    font-size: clamp(28px, 3.2vw, 44px) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 12px 0 !important;
    position: static !important;
  }
  .mega-footer .container:first-of-type > :first-child::before{
    content: none !important; /* remove pseudo title */
  }
  .mega-footer .container:first-of-type > :nth-child(2){
    /* tagline */
    max-width: 760px !important;
    color: rgba(255,255,255,.92) !important;
    font-size: clamp(16px, 1.5vw, 20px) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    position: static !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Contact column polish */
  .mega-footer .mf-bottom.container h3,
  .mega-footer .mf-title{
    font-size: 24px !important;
    font-weight: 800 !important;
    margin: 0 0 12px 0 !important;
    color: #ffffff !important;
  }
  .mega-footer .mf-list{ list-style:none !important; padding:0 !important; margin:0 !important; }
  .mega-footer .mf-list li{ display:flex !important; gap:12px !important; align-items:flex-start !important; margin:12px 0 !important; }
}

/* keep footer links legible on dark */
.mega-footer a{ color:#a3d0ff !important; }