/* ==========================================================
   MIAP ENTERPRISES — Custom overrides on top of the base
   template (colors, logo type, and new content components)
   ========================================================== */

:root {
    --primary: #4B2FD9;       /* Miap indigo/purple */
    --primary-dark: #2A1B84;
    --secondary: #14133B;     /* keep dark navy from template */
    --accent-gold: #F2B705;   /* accent used sparingly */
    --white: #fff;
    --darkblue:#101828;
    --ashh:#7A7A7A;
    --off-white:#F4F5F9;
}

/* -------- Text logo (no image logo supplied) -------- */
.text-logo{
    font-family: var(--archivo);
    font-weight: 800;
    font-size: 26px;
    letter-spacing: 0.5px;
    color: var(--secondary);
    text-decoration: none;
    line-height: 1.1;
}
.text-logo span{
    color: var(--primary);
}
.footer_first .text-logo{
    color: var(--white);
    font-size: 28px;
    display: inline-block;
    margin-bottom: 18px;
}
.footer_first .text-logo span{
    color: var(--accent-gold);
}

/* -------- Generic section spacing helper -------- */
.miap_section{
    padding: 90px 0;
}
.miap_section.bg_off{
    background: var(--off-white);
}
.miap_section.bg_dark{
    background: var(--secondary);
}
.miap_section.bg_dark h2, .miap_section.bg_dark h3, .miap_section.bg_dark p{
    color: var(--white);
}

.miap_kicker{
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 10px;
    display: block;
}
.miap_kicker.on-dark{ color: var(--accent-gold); }

.miap_heading h2{
    font-family: var(--archivo);
    font-weight: 700;
    font-size: 42px;
    line-height: 1.25;
    color: var(--secondary);
    margin-bottom: 18px;
}
.miap_heading p{
    font-family: var(--inter);
    color: var(--ashh);
    font-size: 16px;
    line-height: 1.7;
}

/* -------- Simple hero (used on Advertising / Events / Staffing / Contact) -------- */
.miap_hero{
    min-height: 380px;
    display: flex;
    align-items: center;
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: var(--secondary);
}
.miap_hero::before{
    content:"";
    position: absolute; inset:0;
    background: linear-gradient(120deg, rgba(20,19,59,0.88), rgba(75,47,217,0.72));
}
.miap_hero .container{ position: relative; z-index: 2; }
.miap_hero .miap_hero_kicker{
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    font-size: 14px;
    display:block;
    margin-bottom: 14px;
}
.miap_hero h1{
    font-family: var(--archivo);
    font-weight: 800;
    font-size: 52px;
    color: var(--white);
    margin-bottom: 16px;
}
.miap_hero p{
    font-family: var(--inter);
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    max-width: 640px;
}
.miap_breadcrumb{
    margin-top: 22px;
    font-size: 14px;
}
.miap_breadcrumb a{ color: rgba(255,255,255,0.7); text-decoration: none; }
.miap_breadcrumb a:hover{ color: var(--accent-gold); }
.miap_breadcrumb span{ color: rgba(255,255,255,0.4); margin: 0 8px; }
.miap_breadcrumb strong{ color: var(--accent-gold); font-weight: 600; }

/* -------- Home hero -------- */
.miap_home_hero{
    background: linear-gradient(120deg, #14133B 0%, #2A1B84 60%, #4B2FD9 100%);
    padding: 150px 0 110px;
    position: relative;
    overflow: hidden;
}
.miap_home_hero h1{
    font-family: var(--archivo);
    font-weight: 800;
    color: var(--white);
    font-size: 58px;
    line-height: 1.2;
    margin-bottom: 20px;
}
.miap_home_hero h1 span{ color: var(--accent-gold); }
.miap_home_hero p{
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    max-width: 520px;
    margin-bottom: 34px;
}
.miap_home_hero .common_btn{
    background: var(--accent-gold);
    color: var(--secondary);
    border-color: var(--accent-gold);
}
.miap_home_hero .common_btn:hover{
    background: transparent;
    color: var(--white);
}
.miap_home_hero_badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 13px;
    margin-bottom: 26px;
}

/* -------- Quote block -------- */
.miap_quote{
    text-align: center;
    padding: 70px 0;
}
.miap_quote blockquote{
    font-family: var(--archivo);
    font-size: 30px;
    font-weight: 600;
    color: var(--primary);
    max-width: 820px;
    margin: 0 auto 16px;
    line-height: 1.5;
}
.miap_quote cite{
    font-style: normal;
    color: var(--ashh);
    font-size: 15px;
}

/* -------- Services grid (home) -------- */
.miap_services_grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.miap_service_card{
    background: var(--white);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20,19,59,0.08);
    transition: transform .25s ease, box-shadow .25s ease;
}
.miap_service_card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(20,19,59,0.15);
}
.miap_service_card .miap_service_img{
    height: 170px;
    background-size: cover;
    background-position: center;
}
.miap_service_card .miap_service_body{
    padding: 22px 24px 26px;
}
.miap_service_card h4{
    font-family: var(--archivo);
    font-size: 19px;
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: 8px;
}
.miap_service_card p{
    font-size: 14.5px;
    color: var(--ashh);
    line-height: 1.6;
    margin: 0;
}

/* -------- Values / mission / vision -------- */
.miap_vmv_card{
    background: var(--white);
    border-radius: 14px;
    padding: 34px 30px;
    height: 100%;
    box-shadow: 0 8px 24px rgba(20,19,59,0.06);
    border-top: 4px solid var(--primary);
}
.miap_vmv_card h3{
    font-family: var(--archivo);
    font-weight: 700;
    font-size: 21px;
    color: var(--secondary);
    margin-bottom: 14px;
}
.miap_vmv_card ul{ margin:0; padding-left: 18px; }
.miap_vmv_card ul li{
    color: var(--ashh);
    margin-bottom: 8px;
    font-size: 15px;
}
.miap_vmv_card p{
    color: var(--ashh);
    font-size: 15px;
    line-height: 1.7;
}

/* -------- Methodology timeline -------- */
.miap_timeline{
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding-left: 40px;
}
.miap_timeline::before{
    content:"";
    position: absolute;
    left: 9px; top: 6px; bottom: 6px;
    width: 2px;
    background: rgba(255,255,255,0.25);
}
.miap_timeline_item{
    position: relative;
    padding-bottom: 34px;
}
.miap_timeline_item:last-child{ padding-bottom: 0; }
.miap_timeline_item::before{
    content:"";
    position: absolute;
    left: -40px; top: 4px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--accent-gold);
    border: 4px solid rgba(255,255,255,0.25);
}
.miap_timeline_item h5{
    color: var(--white);
    font-family: var(--archivo);
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 6px;
}
.miap_timeline_item p{
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    margin:0;
}

/* -------- CTA band -------- */
.miap_cta{
    background: var(--off-white);
    text-align: center;
    padding: 70px 0;
}
.miap_cta h2{
    font-family: var(--archivo);
    font-weight: 700;
    font-size: 32px;
    color: var(--secondary);
    margin-bottom: 26px;
}

/* -------- Content blocks with photo background (Advertising page) -------- */
.miap_feature_band{
    position: relative;
    padding: 90px 0;
    background-size: cover;
    background-position: center;
    background-color: var(--secondary);
}
.miap_feature_band::before{
    content:"";
    position: absolute; inset:0;
    background: rgba(20,19,59,0.72);
}
.miap_feature_band.tone-primary::before{ background: rgba(75,47,217,0.72); }
.miap_feature_band .container{ position: relative; z-index:2; }
.miap_feature_band h3{
    font-family: var(--archivo);
    font-weight: 800;
    font-size: 44px;
    color: var(--white);
    margin-bottom: 18px;
}
.miap_feature_band .miap_kicker{ color: var(--accent-gold); }
.miap_feature_band p{
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    max-width: 560px;
    line-height: 1.8;
    margin-bottom: 0;
}
.miap_feature_band ul{ margin: 18px 0 0; padding-left: 20px; }
.miap_feature_band ul li{ color: rgba(255,255,255,0.85); margin-bottom: 8px; }

/* -------- Icon feature rows (Staffing page) -------- */
.miap_icon_row{
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 50px 0;
    border-bottom: 1px solid #ECECF3;
}
.miap_icon_row:last-child{ border-bottom: none; }
.miap_icon_row.reverse{ flex-direction: row-reverse; }
.miap_icon_row .miap_icon_media{
    flex: 0 0 320px;
    height: 220px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.miap_icon_row .miap_icon_media .miap_icon_badge{
    position: absolute;
    bottom: -18px; left: -18px;
    width: 64px; height:64px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display:flex; align-items:center; justify-content:center;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(75,47,217,0.35);
}
.miap_icon_row .miap_icon_content h3{
    font-family: var(--archivo);
    font-weight: 700;
    font-size: 25px;
    color: var(--secondary);
    margin-bottom: 12px;
}
.miap_icon_row .miap_icon_content p{
    color: var(--ashh);
    font-size: 15.5px;
    line-height: 1.75;
}

/* -------- Catering / category cards (Events page) -------- */
.miap_cat_grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.miap_cat_card{
    background: var(--white);
    border-radius: 12px;
    padding: 26px 18px;
    text-align:center;
    box-shadow: 0 8px 20px rgba(20,19,59,0.06);
}
.miap_cat_card .miap_cat_icon{
    width: 54px; height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: rgba(75,47,217,0.1);
    color: var(--primary);
    display:flex; align-items:center; justify-content:center;
    font-size: 22px;
}
.miap_cat_card h5{
    font-family: var(--archivo);
    font-weight: 700;
    font-size: 16px;
    color: var(--secondary);
    margin-bottom: 8px;
}
.miap_cat_card p{
    font-size: 13.5px;
    color: var(--ashh);
    margin:0;
    line-height: 1.6;
}

/* -------- Process steps (Events "What We Do") -------- */
.miap_process_item{
    display:flex;
    gap: 20px;
    margin-bottom: 30px;
}
.miap_process_num{
    flex: 0 0 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display:flex; align-items:center; justify-content:center;
    font-family: var(--archivo);
    font-weight: 700;
}
.miap_process_item h4{
    font-family: var(--archivo);
    font-weight: 700;
    font-size: 18px;
    color: var(--secondary);
    margin-bottom: 6px;
}
.miap_process_item p{
    color: var(--ashh);
    font-size: 15px;
    line-height: 1.65;
    margin:0;
}

/* -------- Advertising quote (Ogilvy) -------- */
.miap_ogilvy{
    text-align: center;
    padding: 60px 0 20px;
}
.miap_ogilvy p{
    font-family: var(--archivo);
    font-size: 26px;
    font-weight: 600;
    color: var(--secondary);
    max-width: 780px;
    margin: 0 auto 12px;
}
.miap_ogilvy span{ color: var(--ashh); font-size: 15px; }

/* -------- Simple top navigation (matches Miap's original simple nav) -------- */
.miap_navbar{
    background: #fff;
    box-shadow: 0 2px 14px rgba(20,19,59,0.06);
    padding: 18px 0;
    position: sticky;
    top: 0;
    z-index: 999;
}
.miap_navbar .navbar-nav .nav-link{
    font-family: var(--inter);
    font-weight: 500;
    color: var(--secondary);
    margin: 0 14px;
    padding: 6px 0;
    position: relative;
}
.miap_navbar .navbar-nav .nav-link.active,
.miap_navbar .navbar-nav .nav-link:hover{
    color: var(--primary);
}
.miap_navbar .navbar-nav .nav-link.active::after{
    content:"";
    position:absolute; left:0; right:0; bottom:-4px;
    height: 2px; background: var(--primary);
}
.miap_navbar .miap_nav_btn{
    background: var(--primary);
    color: #fff;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 10px;
}
.miap_navbar .miap_nav_btn:hover{ background: var(--primary-dark); color:#fff; }

/* -------- Buttons already inherit var(--primary) from style.css -------- */

/* -------- Responsive -------- */
@media (max-width: 992px){
    .miap_services_grid{ grid-template-columns: repeat(2,1fr); }
    .miap_cat_grid{ grid-template-columns: repeat(2,1fr); }
    .miap_hero h1{ font-size: 38px; }
    .miap_home_hero h1{ font-size: 40px; }
    .miap_icon_row, .miap_icon_row.reverse{ flex-direction: column; }
    .miap_icon_row .miap_icon_media{ width: 100%; flex-basis: auto; }
}
@media (max-width: 576px){
    .miap_services_grid{ grid-template-columns: 1fr; }
    .miap_cat_grid{ grid-template-columns: 1fr; }
}