/* ============================================================
   HolyMove — homepage modern styles (loaded only on index.php)
   Overrides the legacy style.css hero + services look.
   ============================================================ */

/* ---------- HERO ---------- */
main {
    background: linear-gradient(120deg, rgba(16,28,50,.84) 0%, rgba(20,38,66,.55) 50%, rgba(16,28,50,.74) 100%), url('/images/hero-home.jpg?v=1') center 45%/cover no-repeat !important;
    min-height: 520px !important;
    box-shadow: none !important;
}
main::after { display: none !important; }          /* remove flat black overlay */
#arrow { display: none !important; }               /* remove dated black triangle */

.heroContainer { min-height: 480px !important; }
.hero { padding: 30px 20px !important; }

.hero h2 {
    font-size: clamp(28px, 5vw, 48px) !important;
    letter-spacing: 1px !important;
    line-height: 1.12 !important;
    color: #fff !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.38);
    margin-bottom: 14px !important;
}
.hero p {
    color: #eef2f7 !important;
    font-size: clamp(15px, 2.1vw, 19px) !important;
    line-height: 1.5 !important;
    max-width: 760px;
    margin: 0 auto 24px !important;
    text-shadow: 0 1px 8px rgba(0,0,0,.3);
}

/* search/select + button */
.custom-container { width: min(700px, 92%) !important; }
.custom-container .form-control {
    height: 54px !important;
    border: none !important;
    border-radius: 9px !important;
    font-size: 16px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.btn-custom {
    background: linear-gradient(135deg, #E9B11C, #C98F08) !important;
    color: #1b2430 !important;
    font-weight: 700 !important;
    height: 54px !important;
    border: none !important;
    border-radius: 9px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    transition: transform .15s ease, box-shadow .15s ease;
}
.btn-custom:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,.3);
    color: #1b2430 !important;
}

/* ---------- SERVICES ---------- */
#servicesTop {
    max-width: 1100px;
    margin: 0 auto !important;
    padding: 55px 20px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
}
#servicesTop h3 {
    width: 100%;
    text-align: center;
    font-weight: 800;
    font-size: clamp(24px, 3vw, 33px);
    color: #1f3a5f;
    margin-bottom: 14px;
}
#servicesTop .col-lg-4 {
    flex: 1 1 300px !important;
    max-width: 330px !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 24px 26px !important;
    border: 1px solid #eceef2 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 6px 22px rgba(31,58,95,.08);
    transition: transform .2s ease, box-shadow .2s ease;
    display: block !important;
}
#servicesTop .col-lg-4:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(31,58,95,.16) !important;
    background: #fff !important;
}
#servicesTop .col-lg-4 .row { align-items: center; margin: 0; flex-wrap: nowrap; }
#servicesTop .col-lg-4 .col-2 {
    flex: 0 0 56px;
    max-width: 56px;
    height: 56px;
    margin-right: 16px;
    border-radius: 14px;
    background: #fbf1d6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .2s ease;
}
#servicesTop .col-lg-4 .col-2 .fa { color: #1f3a5f !important; font-size: 24px !important; transition: color .2s ease; }
#servicesTop .col-lg-4 .col-2 svg { color: #1f3a5f; width: 26px; height: 26px; transition: color .2s ease; display:block; }
#servicesTop .col-lg-4:hover .col-2 { background: linear-gradient(135deg,#E9B11C,#C98F08); }
#servicesTop .col-lg-4:hover .col-2 .fa { color: #fff !important; }
#servicesTop .col-lg-4:hover .col-2 svg { color: #fff; }
#servicesTop .col-lg-4 .col-10 { padding: 0; }
#servicesTop .col-lg-4 .col-10 h5 { margin: 0; font-weight: 700; color: #27313c; font-size: 18px; }

/* ---------- value props: left-aligned icon strip (NOT centered circles) ---------- */
.vp-strip-wrap{ max-width:1080px; margin:0 auto; padding:48px 20px 8px; }
.vp-strip-title{ text-align:center; color:#1f3a5f; font-weight:800; font-size:clamp(20px,2.6vw,28px); line-height:1.3; margin:0 auto 30px; max-width:820px; }
.vp-strip{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; }
.vp-item{ flex:1 1 280px; max-width:340px; display:flex; align-items:flex-start; gap:14px; background:#fff; border:1px solid #eceef2; border-radius:14px; padding:20px; box-shadow:0 6px 18px rgba(31,58,95,.06); }
.vp-ic2{ flex:0 0 46px; width:46px; height:46px; border-radius:11px; background:#fbf1d6; display:flex; align-items:center; justify-content:center; }
.vp-ic2 svg{ width:24px; height:24px; color:#C98F08; }
.vp-tx h4{ margin:0 0 4px; color:#1f3a5f; font-weight:700; font-size:17px; }
.vp-tx p{ margin:0; color:#5a6675; font-size:14px; line-height:1.5; }

/* ---------- how it works: numbered timeline (NOT generic circles) ---------- */
.hm-flow-wrap{ max-width:1040px; margin:0 auto; padding:50px 20px 58px; }
.hm-flow-title{ text-align:center; font-weight:800; font-size:clamp(24px,3vw,32px); color:#1f3a5f; margin-bottom:44px; }
.hm-flow{ display:flex; flex-wrap:wrap; gap:30px; justify-content:center; position:relative; }
.hm-fstep{ flex:1 1 250px; max-width:300px; text-align:center; position:relative; }
.hm-fnum{ width:64px; height:64px; border-radius:50%; background:#1f3a5f; color:#E9B11C; font-size:28px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 8px 20px rgba(31,58,95,.22); position:relative; z-index:2; }
.hm-fstep h5{ color:#1f3a5f; font-weight:700; font-size:19px; margin:0 0 8px; }
.hm-fstep p{ color:#5a6675; line-height:1.65; font-size:15px; }
/* connector line behind the numbers (desktop only) */
@media (min-width:861px){
    .hm-flow::before{ content:""; position:absolute; top:32px; left:16%; right:16%; height:3px; background:linear-gradient(90deg,#1f3a5f,#E9B11C); opacity:.35; z-index:1; }
}
@media (max-width:600px){
    .vp-strip-wrap{ padding-top:34px; }
    .hm-flow-wrap{ padding:34px 16px; }
}

/* trust line under hero search */
.hero-trust{ margin-top:20px; color:#eef2f7; font-size:15px; font-weight:600; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.hero-trust .stars{ color:#E9B11C; letter-spacing:2px; margin-right:6px; }

/* ---------- mobile ---------- */
@media (max-width: 600px) {
    main, .heroContainer { min-height: 430px !important; }
    .hero { padding: 24px 16px !important; }
    .custom-container .row > div { padding: 5px 0 !important; }
    .btn-custom { width: 100% !important; }
    #servicesTop { padding: 36px 16px !important; gap: 16px; }
    #servicesTop .col-lg-4 { flex: 1 1 100% !important; max-width: 100% !important; }
}

/* ---- Living hero: ambient background video (golden-hour drive) ---- */
main{ position:relative; overflow:hidden; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; pointer-events:none; }
.hero-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, rgba(16,28,50,.84) 0%, rgba(20,38,66,.5) 50%, rgba(16,28,50,.78) 100%); }
main > .container{ position:relative; z-index:2; }
@media (prefers-reduced-motion: reduce){ .hero-video{ display:none; } }