/* ==========================================================================
   Home 12 - Premium Verification Portal & App Design System
   Primary Red: #EA1B23 | Dark Charcoal: #2B2B2B | Light Gray: #F2F2F2 | White: #FFFFFF
   Font Family: 'Poppins', 'Nunito Sans', sans-serif
   ========================================================================== */

:root {
    --h12-crimson: #EA1B23;          /* Primary Red (Nav, Buttons, Headings) */
    --h12-crimson-dark: #c41219;     /* Dark Red Hover */
    --h12-crimson-light: #ff3d44;    /* Light Red Accent */
    --h12-crimson-subtle: #fde8e9;   /* Soft Red Tint */

    --h12-teal: #2B2B2B;             /* Dark Charcoal (Cards, Footer, Dark Containers) */
    --h12-teal-dark: #1a1a1a;        /* Deeper Charcoal */
    --h12-teal-light: #3d3d3d;       /* Light Charcoal Accent */
    --h12-teal-subtle: #e6e6e6;      /* Soft Charcoal Tint */

    --h12-orange: #EA1B23;           /* Primary Red Accent */
    --h12-orange-dark: #c41219;      /* Dark Red Hover */
    --h12-orange-light: #ff3d44;     /* Light Red Accent */
    --h12-orange-subtle: #fde8e9;    /* Soft Red Tint */

    --h12-bg-white: #FFFFFF;
    --h12-bg-offwhite: #FFFFFF;
    --h12-bg-page: #F2F2F2;          /* Light Gray Section Background */

    --h12-text-dark: #2B2B2B;        /* Dark Charcoal Text */
    --h12-text-muted: #666666;
    --h12-border: #e0e0e0;
    --h12-border-strong: #cccccc;

    --h12-radius-sm: 8px;
    --h12-radius-md: 14px;
    --h12-radius-lg: 20px;
    --h12-radius-full: 9999px;

    --h12-shadow-sm: 0 4px 12px rgba(234, 27, 35, 0.08);
    --h12-shadow-md: 0 8px 24px rgba(43, 43, 43, 0.10);
    --h12-shadow-hover: 0 16px 36px rgba(234, 27, 35, 0.18);

    --h12-font-ui: 'Poppins', 'Nunito Sans', sans-serif;
    --h12-font-heading: 'Poppins', 'Nunito Sans', sans-serif;
}

body.h12-body {
    font-family: var(--h12-font-ui);
    background-color: var(--h12-bg-page);
    color: var(--h12-text-dark);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* WCAG Focus Ring - Primary Red (#EA1B23) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--h12-crimson) !important;
    outline-offset: 2px !important;
}

/* Responsive Main Shell Container */
.h12-app-viewport {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    background: var(--h12-bg-offwhite);
    min-height: 100vh;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
    .h12-app-viewport {
        box-shadow: none;
        padding-bottom: 72px; /* Clearance for fixed mobile bottom nav bar (66px + 6px) */
    }
}

/* Shared visual language for every Home12 sub-page. */
.h12-subpage-hero {
    margin-bottom: 24px !important;
    background: linear-gradient(115deg, #df1f2d 0%, #ed3441 68%, #b71924 100%) !important;
    border: 1px solid rgba(183,25,36,.2);
    border-radius: 10px !important;
    box-shadow: 0 7px 20px rgba(183,25,36,.14) !important;
}

.h12-subpage-hero > div { padding: 28px 26px !important; }
.h12-subpage-hero .h12-badge-orange {
    color: var(--h12-crimson) !important;
    background: #fff !important;
    border-radius: 4px;
    box-shadow: none;
}
.h12-subpage-hero h1 {
    max-width: 720px;
    margin: 8px 0 8px !important;
    color: #fff !important;
    font-family: var(--h12-font-heading) !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -.03em;
}
.h12-subpage-hero p { max-width: 720px; color: rgba(255,255,255,.9) !important; }
.h12-subpage-hero .h12-slide-btn { color: var(--h12-crimson-dark); background: #fff; }

.h12-subpage-hero-light {
    padding: 26px !important;
    color: var(--h12-text-dark);
    background: #fff !important;
    border-top: 4px solid var(--h12-crimson);
    box-shadow: var(--h12-shadow-sm) !important;
}
.h12-subpage-hero-light > div { padding: 0 !important; }
.h12-subpage-hero-light h1 { color: var(--h12-text-dark) !important; }
.h12-subpage-hero-light p { color: var(--h12-text-muted) !important; }

.h12-shell > div > section .h12-card {
    border-radius: 8px !important;
    box-shadow: none;
}
.h12-shell > div > section .h12-card:hover { transform: none; box-shadow: var(--h12-shadow-sm); }

@media (max-width: 768px) {
    .h12-subpage-hero { margin-bottom: 20px !important; }
    .h12-subpage-hero > div { padding: 22px 18px !important; }
    .h12-subpage-hero h1 { font-size: 1.3rem !important; line-height: 1.22 !important; }
    .h12-subpage-hero p { margin-bottom: 14px !important; font-size: .79rem !important; line-height: 1.5 !important; }
    .h12-subpage-hero .h12-slide-btn { padding: 9px 13px; font-size: .73rem; }
    .h12-subpage-hero-light { padding: 20px 18px !important; }
    .h12-subpage-hero-light > div { padding: 0 !important; }

    .h12-shell > div > section:not(.h12-subpage-hero):not(.h12-home-hero) { margin-bottom: 22px !important; }
    .h12-shell > div > section .h12-card { padding: 16px !important; }
    .h12-shell > div > section .h12-card h2 { font-size: 1.05rem !important; line-height: 1.3; }
    .h12-shell > div > section .h12-card h3 { font-size: .9rem !important; }
    .h12-shell > div > section .h12-card p { font-size: .76rem !important; line-height: 1.5; }
}

.h12-shell {
    padding: 20px 24px;
    flex: 1;
}

@media (max-width: 768px) {
    .h12-shell {
        padding: 12px 14px;
    }
}

/* Typography Rules */
h1, h2, h3, .h12-title-serif {
    font-family: var(--h12-font-heading);
    color: var(--h12-text-dark);
}

/* Override Headings inside Dark/Colored Cards to Always Be Pure White (#FFFFFF) */
.h12-hero-slider h1,
.h12-hero-slider h2,
.h12-hero-slider h3,
.h12-hero-action-card h1,
.h12-hero-action-card h2,
.h12-hero-action-card h3,
.h12-slide-title,
.h12-hero-card-title,
.h12-hero-card-content h1,
.h12-hero-card-content h2,
.h12-hero-card-content h3 {
    color: #ffffff !important;
}

/* --- App Header Bar (Crisp White Header with Red Accent) --- */
.h12-header {
    background: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1020;
    border-top: 4px solid var(--h12-crimson);
    border-bottom: 1px solid var(--h12-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.h12-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 82px;
    padding: 0 24px;
}

@media (max-width: 768px) {
    .h12-header-inner {
        height: 76px;
        padding: 0 14px;
    }
}

.h12-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.h12-logo-img {
    display: block;
    height: 58px;
    width: auto;
    max-width: 340px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .h12-logo-img {
        height: 50px;
        max-width: 300px;
    }
}

.h12-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.h12-icon-btn {
    background: #F2F2F2;
    border: 1.5px solid var(--h12-border-strong);
    color: var(--h12-text-dark);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.h12-icon-btn:hover {
    background: var(--h12-crimson);
    color: #ffffff;
    border-color: var(--h12-crimson);
    transform: scale(1.05);
}

.h12-back-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--h12-crimson);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(234, 27, 35, 0.22);
    transition: all 0.2s ease;
    border: none;
}

.h12-back-btn i {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.h12-back-btn:hover {
    background: var(--h12-crimson-dark);
    color: #ffffff;
    transform: translateX(-2px);
    text-decoration: none;
}

/* --- Offcanvas Drawer & Backdrop System --- */
.h12-offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.h12-offcanvas-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.h12-offcanvas-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 85vw;
    max-width: 360px;
    height: 100vh;
    background: #ffffff;
    z-index: 1060;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.h12-offcanvas-drawer.drawer-left,
.h12-offcanvas-backdrop .h12-offcanvas-drawer {
    left: 0;
    right: auto;
    transform: translateX(-100%);
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.2);
}

.h12-offcanvas-drawer.show,
.h12-offcanvas-backdrop.show .h12-offcanvas-drawer {
    transform: translateX(0) !important;
}

.h12-drawer-header {
    background: #2B2B2B;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid #EA1B23;
}

.h12-drawer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.h12-drawer-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.2s;
}

.h12-drawer-close:hover {
    background: #EA1B23;
    color: #ffffff;
}

.h12-drawer-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.h12-drawer-footer {
    padding: 14px 20px;
    background: #F2F2F2;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- Hero Compact Slider Banner --- */
.h12-hero-slider {
    background: linear-gradient(135deg, var(--h12-crimson) 0%, var(--h12-crimson-dark) 100%);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--h12-shadow-md);
    margin-bottom: 24px;
    color: #ffffff;
}

.h12-slider-wrapper {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.h12-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 32px 28px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
}

@media (max-width: 768px) {
    .h12-slide {
        padding: 20px 16px;
        min-height: 165px;
    }
}

.h12-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(234, 27, 35, 0.94) 0%, rgba(43, 43, 43, 0.85) 100%);
    z-index: 1;
}

.h12-slide-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
}

.h12-badge-orange {
    font-family: var(--h12-font-ui);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--h12-orange);
    color: var(--h12-text-dark);
    font-size: 0.725rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--h12-radius-full);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(255, 153, 0, 0.35);
}

.h12-slide-title {
    font-family: var(--h12-font-heading);
    font-size: 1.65rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.25;
    color: #ffffff !important;
}

@media (max-width: 768px) {
    .h12-slide-title {
        font-size: 1.25rem;
    }
}

.h12-slide-desc {
    font-family: var(--h12-font-ui);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 16px 0;
    line-height: 1.45;
}

.h12-slide-btn {
    font-family: var(--h12-font-ui);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--h12-orange) 0%, var(--h12-orange-dark) 100%);
    color: var(--h12-text-dark);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 10px 20px;
    border-radius: var(--h12-radius-full);
    text-decoration: none;
    transition: all 0.25s ease;
    align-self: flex-start;
    box-shadow: 0 4px 14px rgba(255, 153, 0, 0.4);
}

.h12-slide-btn:hover {
    background: #ffffff;
    color: var(--h12-teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.4);
}

.h12-slider-dots {
    position: absolute;
    bottom: 14px;
    right: 20px;
    z-index: 3;
    display: flex;
    gap: 6px;
}

.h12-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s;
}

.h12-dot.active {
    width: 22px;
    border-radius: 6px;
    background: var(--h12-orange);
}

/* --- Search Card & Filter Trigger --- */
.h12-search-section {
    background: var(--h12-bg-white);
    border-radius: 20px;
    padding: 22px 24px;
    box-shadow: var(--h12-shadow-md);
    border: 1px solid var(--h12-border);
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .h12-search-section {
        padding: 16px;
        border-radius: 16px;
    }
}

.h12-search-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.h12-search-title {
    flex: 1;
    min-width: 0;
    font-family: var(--h12-font-heading);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--h12-teal-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.h12-search-title span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.h12-search-title i { flex-shrink: 0; }

/* Advanced filter: compact single-line text link, not a boxed button */
.h12-btn-advance-trigger {
    flex-shrink: 0;
    font-family: var(--h12-font-ui);
    background: none;
    color: var(--h12-crimson);
    border: 0;
    border-radius: 0;
    padding: 4px 2px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: none;
    transition: color 0.2s ease;
}

.h12-btn-advance-trigger:hover {
    background: none;
    color: var(--h12-crimson-dark);
    border: 0;
    transform: none;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.h12-search-bar-row {
    display: flex;
    gap: 14px;
    align-items: center;
    width: 100%;
}

@media (max-width: 600px) {
    .h12-search-bar-row {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
}

.h12-input-group {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    width: 100%;
}

.h12-input-group i.h12-input-icon {
    position: absolute;
    left: 16px;
    color: var(--h12-teal);
    font-size: 1.15rem;
}

.h12-cnic-input {
    font-family: var(--h12-font-ui);
    width: 100%;
    height: 48px;
    padding: 8px 70px 8px 46px;
    border: 1.5px solid var(--h12-border-strong);
    border-radius: 12px;
    font-size: 0.925rem;
    font-weight: 600;
    color: var(--h12-text-dark);
    box-sizing: border-box;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.h12-cnic-input:focus {
    outline: none;
    border-color: var(--h12-orange);
    box-shadow: 0 0 0 3.5px rgba(255, 153, 0, 0.25);
}

.h12-char-counter {
    font-family: var(--h12-font-ui);
    position: absolute;
    right: 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--h12-text-muted);
}

.h12-btn-search {
    font-family: var(--h12-font-ui);
    height: 48px;
    padding: 0 24px;
    background: linear-gradient(135deg, var(--h12-teal) 0%, var(--h12-teal-dark) 100%);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.925rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(0, 102, 68, 0.25);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .h12-btn-search {
        width: 100%;
    }
}

.h12-btn-search:hover {
    background: linear-gradient(135deg, var(--h12-teal-light) 0%, var(--h12-teal) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 102, 68, 0.35);
}

.h12-search-help {
    font-family: var(--h12-font-ui);
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--h12-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* --- Filter Pills Bar --- */
.h12-filter-pills {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0 12px 0;
    margin-bottom: 20px;
    scrollbar-width: none;
}

.h12-filter-pills::-webkit-scrollbar {
    display: none;
}

.h12-pill {
    font-family: var(--h12-font-ui);
    background: var(--h12-bg-white);
    border: 1.5px solid var(--h12-border-strong);
    color: var(--h12-text-dark);
    padding: 8px 18px;
    border-radius: var(--h12-radius-full);
    font-size: 0.825rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--h12-shadow-sm);
    transition: all 0.2s ease;
}

.h12-pill i {
    color: var(--h12-teal);
}

.h12-pill.active,
.h12-pill:hover {
    background: linear-gradient(135deg, var(--h12-orange) 0%, var(--h12-orange-dark) 100%) !important;
    color: var(--h12-text-dark) !important;
    border-color: var(--h12-orange-dark) !important;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.4);
    transform: translateY(-2px);
}

.h12-pill.active i,
.h12-pill:hover i {
    color: var(--h12-teal-dark) !important;
}

.h12-pill-crimson {
    background: var(--h12-crimson-subtle);
    border-color: var(--h12-crimson);
    color: var(--h12-crimson);
}

.h12-pill-crimson:hover {
    background: linear-gradient(135deg, var(--h12-crimson) 0%, var(--h12-crimson-dark) 100%) !important;
    color: #ffffff !important;
    border-color: var(--h12-crimson-dark) !important;
}

.h12-pill-crimson:hover i {
    color: #ffffff !important;
}

/* --- Section Titles & Headers --- */
.h12-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.h12-section-title h2 {
    font-family: var(--h12-font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--h12-teal-dark);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.h12-section-link {
    font-family: var(--h12-font-ui);
    color: var(--h12-teal);
    font-size: 0.825rem;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
}

.h12-section-link:hover {
    color: var(--h12-orange-dark);
}

/* --- Responsive Multi-Column Card Grid System --- */
.h12-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 600px) {
    .h12-card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* --- Premium Dynamic Card Component --- */
.h12-card {
    background: var(--h12-bg-white);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--h12-border);
    box-shadow: var(--h12-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.h12-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--h12-shadow-hover);
    border-color: var(--h12-border-strong);
}

.h12-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.h12-icon-bubble {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.h12-card:hover .h12-icon-bubble {
    transform: scale(1.08);
}

.h12-icon-teal {
    background: var(--h12-teal-subtle);
    color: var(--h12-teal);
}

.h12-icon-orange {
    background: var(--h12-orange-subtle);
    color: var(--h12-orange-dark);
}

.h12-icon-crimson {
    background: var(--h12-crimson-subtle);
    color: var(--h12-crimson);
}

.h12-card-tag {
    font-family: var(--h12-font-ui);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--h12-radius-full);
    letter-spacing: 0.3px;
}

.h12-tag-teal {
    background: var(--h12-teal-subtle);
    color: var(--h12-teal);
}

.h12-tag-orange {
    background: var(--h12-orange-subtle);
    color: var(--h12-orange-dark);
}

.h12-tag-crimson {
    background: var(--h12-crimson-subtle);
    color: var(--h12-crimson);
}

.h12-card-title {
    font-family: var(--h12-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--h12-text-dark);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.h12-card-desc {
    font-family: var(--h12-font-ui);
    font-size: 0.825rem;
    color: var(--h12-text-muted);
    margin: 0 0 16px 0;
    line-height: 1.45;
    flex: 1;
}

/* Premium Gradient Action Button inside Card */
.h12-btn-card-action {
    font-family: var(--h12-font-ui);
    background: linear-gradient(135deg, var(--h12-teal) 0%, var(--h12-teal-dark) 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.825rem;
    padding: 10px 16px;
    border-radius: 10px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 3px 10px rgba(0, 102, 68, 0.15);
    transition: all 0.25s ease;
}

.h12-btn-card-action:hover {
    background: linear-gradient(135deg, var(--h12-teal-light) 0%, var(--h12-teal) 100%);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 68, 0.28);
}

.h12-btn-card-action-crimson {
    background: linear-gradient(135deg, var(--h12-crimson) 0%, var(--h12-crimson-dark) 100%);
    color: #ffffff;
    box-shadow: 0 3px 10px rgba(139, 0, 0, 0.2);
}

.h12-btn-card-action-crimson:hover {
    background: linear-gradient(135deg, var(--h12-crimson-light) 0%, var(--h12-crimson) 100%);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(139, 0, 0, 0.35);
}

/* --- Hero Action Banners (Multi-Column Grid) --- */
.h12-hero-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 600px) {
    .h12-hero-card-grid {
        grid-template-columns: 1fr;
    }
}

.h12-hero-action-card {
    border-radius: 20px;
    padding: 24px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    box-shadow: var(--h12-shadow-md);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.h12-hero-action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--h12-shadow-hover);
}

/* High Priority Conversion Card (Crimson Red #8B0000) */
.h12-hero-card-complaint {
    background: linear-gradient(135deg, var(--h12-crimson-dark) 0%, var(--h12-crimson) 100%);
}

/* Institutional Card (Deep Teal #006644) */
.h12-hero-card-inquiry {
    background: linear-gradient(135deg, var(--h12-teal-dark) 0%, var(--h12-teal) 100%);
}

.h12-hero-card-badge {
    font-family: var(--h12-font-ui);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: var(--h12-radius-full);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.h12-hero-card-title {
    font-family: var(--h12-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #ffffff !important;
}

.h12-hero-card-desc {
    font-family: var(--h12-font-ui);
    font-size: 0.85rem;
    opacity: 0.95;
    margin: 0 0 16px 0;
    line-height: 1.45;
    color: #ffffff;
}

.h12-hero-card-btn {
    font-family: var(--h12-font-ui);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--h12-orange) 0%, var(--h12-orange-dark) 100%);
    color: var(--h12-text-dark);
    font-weight: 800;
    font-size: 0.85rem;
    padding: 10px 20px;
    border-radius: var(--h12-radius-full);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.35);
    transition: all 0.25s ease;
}

.h12-hero-card-btn:hover {
    background: #ffffff;
    color: var(--h12-teal-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.4);
}

/* --- Steps Section --- */
.h12-steps-container {
    background: var(--h12-bg-white);
    border-radius: 20px;
    padding: 22px 24px;
    border: 1px solid var(--h12-border);
    box-shadow: var(--h12-shadow-sm);
    margin-bottom: 24px;
}

.h12-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.h12-step-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px;
    border-radius: 12px;
    background: var(--h12-bg-offwhite);
    border: 1px solid var(--h12-border);
}

.h12-step-num {
    font-family: var(--h12-font-ui);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--h12-orange) 0%, var(--h12-orange-dark) 100%);
    color: var(--h12-text-dark);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(255, 153, 0, 0.3);
}

.h12-step-content h3 {
    font-family: var(--h12-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--h12-teal-dark);
    margin: 0 0 4px 0;
}

.h12-step-content p {
    font-family: var(--h12-font-ui);
    font-size: 0.8rem;
    color: var(--h12-text-muted);
    margin: 0;
    line-height: 1.4;
}

/* --- Legal Team Cards --- */
.h12-legal-card {
    background: var(--h12-bg-white);
    border-radius: 16px;
    border: 1px solid var(--h12-border);
    overflow: hidden;
    box-shadow: var(--h12-shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.h12-legal-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--h12-shadow-hover);
}

.h12-legal-img-wrap {
    height: 180px;
    overflow: hidden;
}

.h12-legal-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.h12-legal-card:hover .h12-legal-img-wrap img {
    transform: scale(1.06);
}

.h12-legal-body {
    padding: 16px;
}

.h12-legal-role {
    font-family: var(--h12-font-ui);
    font-size: 0.725rem;
    font-weight: 800;
    color: var(--h12-orange-dark);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.h12-legal-name {
    font-family: var(--h12-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--h12-teal-dark);
    margin: 4px 0 6px 0;
}

.h12-legal-desc {
    font-family: var(--h12-font-ui);
    font-size: 0.8rem;
    color: var(--h12-text-muted);
    margin: 0 0 14px 0;
    line-height: 1.4;
}

/* --- Quick Services Grid Cards --- */
.h12-qsvc-card {
    background: #ffffff;
    border-radius: 14px;
    border: 1.5px solid #eaf2ee;
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.22s ease;
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
}

.h12-qsvc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 102, 68, 0.12);
    border-color: #c8dfd7;
}

.h12-qsvc-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.h12-qsvc-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.h12-qsvc-label {
    font-family: var(--h12-font-ui);
    font-size: 0.8rem;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.2;
}

.h12-qsvc-desc {
    font-family: var(--h12-font-ui);
    font-size: 0.68rem;
    font-weight: 500;
    color: #707070;
    line-height: 1.2;
}

.h12-qsvc-arrow {
    font-size: 0.8rem;
    color: #a0aec0;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.h12-qsvc-card:hover .h12-qsvc-arrow {
    transform: translateX(3px);
    color: var(--h12-teal);
}

/* --- Offcanvas Drawer --- */

.h12-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.h12-offcanvas-backdrop.show {
    opacity: 1;
    visibility: visible;
}

.h12-offcanvas-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 440px;
    background: var(--h12-bg-white);
    z-index: 1050;
    box-shadow: -6px 0 25px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* On mobile, drawer must NOT overlap or be hidden behind bottom nav */
@media (max-width: 768px) {
    .h12-offcanvas-drawer {
        bottom: 62px; /* lift above mobile bottom nav bar */
        max-width: 100%;
    }
}

.h12-offcanvas-drawer.show {
    transform: translateX(0);
}

.h12-drawer-header {
    background: var(--h12-teal) !important;
    color: #ffffff !important;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.h12-drawer-title {
    font-family: var(--h12-font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.h12-drawer-close {
    background: transparent;
    border: none;
    color: #ffffff !important;
    font-size: 1.35rem;
    cursor: pointer;
}

.h12-drawer-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0; /* Critical: allows flex child to shrink so footer is always visible */
}

.h12-form-group {
    margin-bottom: 16px;
}

.h12-form-label {
    font-family: var(--h12-font-ui);
    display: block;
    font-size: 0.825rem;
    font-weight: 700;
    color: var(--h12-text-dark);
    margin-bottom: 6px;
}

.h12-form-control {
    font-family: var(--h12-font-ui);
    width: 100%;
    height: 46px;
    padding: 8px 14px;
    border: 1.5px solid var(--h12-border-strong);
    border-radius: 10px;
    font-size: 0.9rem;
    box-sizing: border-box;
}

.h12-form-control:focus {
    outline: none;
    border-color: var(--h12-orange) !important;
    box-shadow: 0 0 0 3.5px rgba(255, 153, 0, 0.25) !important;
}

.h12-drawer-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--h12-border);
    background: var(--h12-bg-offwhite);
    display: flex;
    gap: 12px;
    flex-shrink: 0; /* Never compress — always visible at bottom of drawer */
    position: relative;
    z-index: 2;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}

/* --- Mobile Bottom Nav Bar (Only Visible on Mobile < 768px) --- */
.h12-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .h12-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 66px;
        background: #ffffff;
        border-top: 2px solid transparent;
        border-image: linear-gradient(90deg, var(--h12-teal) 0%, var(--h12-orange) 50%, var(--h12-crimson) 100%) 1;
        box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.12);
        align-items: center;
        justify-content: space-around;
        z-index: 1030;
        box-sizing: border-box;
        padding: 0 4px;
    }
}

.h12-bottom-item {
    font-family: var(--h12-font-ui);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #a0aec0;
    text-decoration: none;
    font-size: 0.64rem;
    font-weight: 700;
    gap: 2px;
    width: 20%;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
    padding-top: 4px;
}

/* Active top bar indicator */
.h12-bottom-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: var(--h12-teal);
    border-radius: 0 0 4px 4px;
}

.h12-bottom-item i {
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}

.h12-bottom-item.active i {
    transform: translateY(-1px);
}

.h12-bottom-item.active,
.h12-bottom-item:hover {
    color: var(--h12-teal);
}

/* Filter button — orange accent */
.h12-bottom-item-orange {
    color: var(--h12-orange-dark);
}

.h12-bottom-item-orange:hover,
.h12-bottom-item-orange.active {
    color: var(--h12-orange-dark) !important;
}

.h12-bottom-item-orange.active::before {
    background: var(--h12-orange);
}

/* Complaint button — crimson accent */
.h12-bottom-item-crimson {
    color: var(--h12-crimson);
}

.h12-bottom-item-crimson:hover,
.h12-bottom-item-crimson.active {
    color: var(--h12-crimson) !important;
}

.h12-bottom-item-crimson.active::before {
    background: var(--h12-crimson);
}

/* --- Footer --- */
.h12-footer {
    background: var(--h12-teal-dark);
    color: rgba(255, 255, 255, 0.7);
    padding: 44px 28px 26px;
    margin-top: 36px;
    border-top: 3px solid var(--h12-crimson);
    border-radius: 0;
    font-family: var(--h12-font-ui);
}

/* On mobile: add bottom clearance so footer content isn't hidden behind the bottom nav bar */
@media (max-width: 768px) {
    .h12-footer {
        padding: 34px 20px 88px; /* 66px nav bar + breathing room */
        margin-top: 22px;
    }
}

.h12-footer-inner {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr;
    gap: 44px;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

@media (max-width: 760px) {
    .h12-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
    .h12-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
    .h12-footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

.h12-footer-wordmark {
    display: inline-block;
    font-family: var(--h12-font-heading);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #ffffff;
    text-decoration: none;
}
.h12-footer-wordmark:hover { color: #ffffff; opacity: .85; }

.h12-footer-tagline {
    margin: 14px 0 16px;
    max-width: 42ch;
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.h12-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.h12-footer-contact a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    width: fit-content;
    transition: all 0.2s ease;
}

.h12-footer-contact a:hover {
    color: #ffffff;
    background: rgba(234, 27, 35, 0.16);
    border-color: rgba(234, 27, 35, 0.4);
    transform: translateX(3px);
}

.h12-footer-contact a i.bi-whatsapp {
    color: #25D366;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.h12-footer-contact a i.bi-envelope-fill {
    color: #EA1B23;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.h12-footer-col h3 {
    margin: 0 0 14px 0;
    font-family: var(--h12-font-heading);
    color: #ffffff !important;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.h12-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.h12-footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.84rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.h12-footer-links a:hover {
    color: #ffffff;
    padding-left: 3px;
}

.h12-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 18px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.h12-footer-bottom-note {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

@media (max-width: 480px) {
    .h12-footer-bottom { justify-content: center; text-align: center; }
    .h12-footer-bottom-note { display: none; }
}

/* Floating WhatsApp Button */
.h12-whatsapp-float {
    position: fixed;
    bottom: 80px;
    right: 24px;
    width: 50px;
    height: 50px;
    background: #25d366;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
    z-index: 1025;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.h12-whatsapp-float:hover {
    transform: scale(1.1);
    color: #ffffff;
}

@media (max-width: 768px) {
    .h12-whatsapp-float {
        bottom: 74px;
        right: 18px;
        width: 44px;
        height: 44px;
        font-size: 1.45rem;
    }
}

/* Home12 institutional theme: restrained red, charcoal and neutral surfaces. */
:root {
    --h12-crimson: #df1f2d;
    --h12-crimson-dark: #b71924;
    --h12-crimson-light: #ed4450;
    --h12-crimson-subtle: #fff1f2;
    --h12-teal: #282828;
    --h12-teal-dark: #171717;
    --h12-teal-light: #3c3c3c;
    --h12-teal-subtle: #f1f1f1;
    --h12-orange: #df1f2d;
    --h12-orange-dark: #b71924;
    --h12-orange-light: #ed4450;
    --h12-orange-subtle: #fff1f2;
    --h12-bg-page: #f5f5f3;
    --h12-bg-offwhite: #fafaf8;
    --h12-text-dark: #222;
    --h12-text-muted: #686868;
    --h12-border: #e4e4e1;
    --h12-border-strong: #cececa;
    --h12-shadow-sm: 0 2px 8px rgba(20,20,20,.06);
    --h12-shadow-md: 0 6px 20px rgba(20,20,20,.09);
    --h12-shadow-hover: 0 10px 28px rgba(20,20,20,.12);
    --h12-font-ui: 'Inter', Arial, sans-serif;
    --h12-font-heading: 'Inter', Arial, sans-serif;
}

body.h12-body { background: var(--h12-bg-page); letter-spacing: -.01em; }
.h12-home-quick-services,
.h12-home-core-services { display: none; }

/* What We Check follows the same clear stacked rhythm as How It Works. */
.h12-home-what-we-check {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--h12-border);
    border-radius: 10px;
    box-shadow: var(--h12-shadow-sm);
}

.h12-home-what-we-check .h12-section-title {
    margin-bottom: 18px;
}

.h12-home-what-we-check .h12-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 0;
}

.h12-home-what-we-check .h12-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 28px;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
    padding: 15px;
    background: #fafafa;
    border: 1px solid var(--h12-border);
    border-radius: 7px;
    box-shadow: none;
}

.h12-home-what-we-check .h12-card-top {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
}

.h12-home-what-we-check .h12-icon-bubble {
    width: 46px;
    height: 46px;
    color: #fff !important;
    background: var(--h12-crimson) !important;
    border-radius: 50%;
    font-size: 1.1rem;
}

.h12-home-what-we-check .h12-card-tag { display: none; }
.h12-home-what-we-check .h12-card-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1rem;
}

.h12-home-what-we-check .h12-card-desc {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: .79rem;
    line-height: 1.45;
}

.h12-home-what-we-check .h12-btn-card-action,
.h12-home-what-we-check .h12-btn-card-action-crimson {
    grid-column: 3;
    grid-row: 1 / 3;
    width: 28px;
    height: 40px;
    padding: 0;
    color: var(--h12-crimson);
    background: transparent;
    box-shadow: none;
}

.h12-home-what-we-check .h12-btn-card-action::before {
    content: '';
    position: absolute;
    inset: 0;
}

.h12-home-what-we-check .h12-btn-card-action span { display: none; }
.h12-home-what-we-check .h12-btn-card-action:hover {
    color: var(--h12-crimson-dark);
    background: transparent;
}

.h12-services-cta {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 8px 0 28px;
    padding: 24px 20px;
    background: #f7f7f5;
    color: var(--h12-text-dark);
    border: 1px solid var(--h12-border);
    border-top: 4px solid var(--h12-crimson);
    border-radius: 10px;
    box-shadow: none;
}

.h12-services-cta-icon {
    width: 28px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--h12-crimson);
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 1.45rem;
}

.h12-services-cta-copy span {
    display: block;
    margin: 3px 0 0;
    color: var(--h12-crimson);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.h12-services-cta-copy h2 {
    margin: 0;
    color: var(--h12-text-dark);
    font-size: 1.35rem;
    letter-spacing: -.025em;
}

.h12-services-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    color: #fff;
    background: var(--h12-crimson);
    border-left: 0;
    border-radius: 5px;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.h12-services-cta-link:hover { background: var(--h12-crimson-dark); color: #fff; }
.h12-services-cta-link:hover i { transform: translateX(3px); }
.h12-services-cta-link i { transition: transform .18s ease; }

.h12-home-service-list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding-top: 18px;
    margin-top: 4px;
    border-top: 1px solid var(--h12-border);
}

.h12-home-service-list > a {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 11px;
    padding: 13px;
    color: var(--h12-text-dark);
    background: #fff;
    border: 1px solid var(--h12-border);
    border-radius: 7px;
    text-decoration: none;
}

.h12-home-service-list > a:hover { border-color: #c9c9c5; box-shadow: var(--h12-shadow-sm); }
.h12-home-service-list > a > i:first-child {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--h12-crimson);
    border-radius: 50%;
    font-size: 1rem;
}

.h12-home-service-list span { min-width: 0; display: block; }
.h12-home-service-list strong { display: block; font-size: .84rem; line-height: 1.3; }
.h12-home-service-list small { display: block; margin-top: 3px; color: var(--h12-text-muted); font-size: .7rem; line-height: 1.35; }
.h12-home-service-list > a > i:last-child { color: var(--h12-crimson); font-size: .75rem; }

.h12-home-faq {
    margin-top: 28px;
    padding: 26px;
    background: #fff;
    border: 1px solid var(--h12-border);
    border-radius: 10px;
}

.h12-home-faq .h12-section-title {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--h12-border);
}

.h12-faq-list { display: grid; gap: 9px; }
.h12-faq-list details { padding: 14px 16px; background: #fafaf8; border: 1px solid var(--h12-border); border-radius: 6px; overflow: hidden; }
.h12-faq-list details:not([open]) > *:not(summary) { display: none !important; }
.h12-faq-list summary { color: var(--h12-text-dark); font-size: .86rem; font-weight: 700; cursor: pointer; outline: none; }
.h12-faq-list summary::marker { color: var(--h12-crimson); }
.h12-faq-list p { margin: 10px 0 0; color: var(--h12-text-muted); font-size: .79rem; line-height: 1.55; }

/* Dedicated Services catalogue: simple, direct service rows. */
.h12-services-catalog {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--h12-border);
    border-top: 4px solid var(--h12-crimson);
    border-radius: 10px;
    box-shadow: var(--h12-shadow-sm);
}

.h12-services-catalog .h12-section-title { margin-bottom: 18px; }
.h12-services-catalog .h12-card-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 0;
}

.h12-services-catalog .h12-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 28px;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
    padding: 15px;
    background: #fafafa;
    border: 1px solid var(--h12-border) !important;
    border-radius: 7px;
    box-shadow: none;
}

.h12-services-catalog .h12-card-top {
    grid-column: 1;
    grid-row: 1 / 3;
    margin: 0;
}

.h12-services-catalog .h12-icon-bubble {
    width: 46px;
    height: 46px;
    color: #fff !important;
    background: var(--h12-crimson) !important;
    border-radius: 50%;
    font-size: 1.08rem;
}

.h12-services-catalog .h12-card-tag { display: none; }
.h12-services-catalog .h12-card-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 1rem;
}

.h12-services-catalog .h12-card-desc {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: .79rem;
    line-height: 1.45;
}

.h12-services-catalog .h12-btn-card-action {
    grid-column: 3;
    grid-row: 1 / 3;
    width: 28px;
    height: 40px;
    padding: 0;
    color: var(--h12-crimson);
    background: transparent;
    box-shadow: none;
}

.h12-services-catalog .h12-btn-card-action::before {
    content: '';
    position: absolute;
    inset: 0;
}

.h12-services-catalog .h12-btn-card-action span { display: none; }
.h12-services-catalog .h12-btn-card-action:hover { color: var(--h12-crimson-dark); background: transparent; }

/* Homepage legal panel */
.h12-home-legal {
    margin-top: 30px;
    padding: 26px;
    background: #f7f7f5;
    border: 1px solid var(--h12-border);
    border-top: 4px solid var(--h12-crimson);
    border-radius: 10px;
}

.h12-home-legal .h12-section-title {
    align-items: flex-end;
    padding-bottom: 17px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--h12-border);
}

.h12-home-legal .h12-section-title h2 {
    font-size: 1.35rem;
}

.h12-home-legal .h12-section-link {
    padding: 8px 13px;
    color: #fff;
    background: var(--h12-crimson);
    border-radius: 5px;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.h12-home-legal .h12-section-link:hover {
    background: var(--h12-crimson-dark);
    color: #fff;
}

.h12-home-legal .h12-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 0;
}

.h12-home-legal .h12-legal-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--h12-border);
    border-radius: 8px;
    overflow: hidden;
}

.h12-home-legal .h12-legal-img-wrap {
    width: 112px;
    height: 100%;
    min-height: 154px;
    background: #e9e9e6;
}

.h12-home-legal .h12-legal-img-wrap img {
    filter: saturate(.82);
    object-position: center top;
}

.h12-home-legal .h12-legal-body {
    min-width: 0;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.h12-home-legal .h12-legal-role {
    margin-bottom: 5px;
    color: var(--h12-crimson-dark);
    font-size: .66rem;
    letter-spacing: .07em;
}

.h12-home-legal .h12-legal-name {
    margin: 0 0 7px;
    color: var(--h12-text-dark);
    font-size: 1rem;
    line-height: 1.25;
}

.h12-home-legal .h12-legal-desc {
    margin-bottom: 14px;
    font-size: .76rem;
    line-height: 1.5;
}

.h12-home-legal .h12-legal-btn {
    margin-top: auto;
    color: var(--h12-crimson);
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
}

.h12-home-legal .h12-legal-btn:hover {
    color: var(--h12-crimson-dark);
    text-decoration: underline;
}

.h12-legal-banner {
    min-width: 0;
    padding: 22px;
    color: #fff;
    background: var(--h12-crimson);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.h12-legal-banner-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 50%;
    font-size: 1.1rem;
}

.h12-legal-banner > span {
    margin-bottom: 4px;
    color: rgba(255,255,255,.78);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.h12-legal-banner h3 {
    margin: 0 0 7px;
    color: #fff;
    font-size: 1.08rem;
}

.h12-legal-banner p {
    margin: 0 0 16px;
    color: rgba(255,255,255,.86);
    font-size: .76rem;
    line-height: 1.5;
}

.h12-legal-banner a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    color: var(--h12-crimson-dark);
    background: #fff;
    border-radius: 5px;
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
}

.h12-legal-banner a:hover { color: var(--h12-teal-dark); }

.h12-home-legal .h12-card-grid { grid-template-columns: 1fr; }

.h12-legal-lead-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fff6f6 100%);
    border: 1px solid #f1dcde;
    border-radius: 12px;
}

.h12-legal-lead-top {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
}

.h12-legal-lead-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #fff;
    background: linear-gradient(135deg, var(--h12-crimson) 0%, var(--h12-crimson-dark) 100%);
    border-radius: 50%;
    font-family: var(--h12-font-heading);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .03em;
    box-shadow: 0 6px 16px rgba(223, 31, 45, .28);
}

.h12-legal-lead-copy > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    padding: 4px 9px;
    color: var(--h12-crimson-dark);
    background: rgba(223, 31, 45, .10);
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.h12-legal-lead-copy > span i { color: var(--h12-crimson); }

.h12-legal-lead-copy h3 {
    margin: 0 0 3px;
    color: var(--h12-text-dark);
    font-family: var(--h12-font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.02em;
}
.h12-legal-lead-role {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--h12-text-muted);
    font-size: .74rem;
    font-weight: 600;
}
.h12-legal-lead-role i { color: var(--h12-crimson); }

.h12-legal-lead-exp {
    display: grid;
    place-items: center;
    align-self: stretch;
    min-width: 62px;
    padding: 8px 12px;
    text-align: center;
    background: #fff;
    border: 1px solid #f1dcde;
    border-radius: 10px;
    line-height: 1.05;
}
.h12-legal-lead-exp strong {
    color: var(--h12-crimson);
    font-family: var(--h12-font-heading);
    font-size: 1.15rem;
    font-weight: 800;
}
.h12-legal-lead-exp small {
    margin-top: 3px;
    color: var(--h12-text-muted);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.h12-legal-lead-bio {
    margin: 0;
    padding-top: 14px;
    border-top: 1px solid #f1dcde;
    color: var(--h12-text-muted);
    font-size: .78rem;
    line-height: 1.55;
}

.h12-legal-lead-skills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.h12-legal-lead-skills li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 11px;
    color: var(--h12-text-dark);
    background: #fff;
    border: 1px solid #f1dcde;
    border-radius: 8px;
    font-size: .72rem;
    font-weight: 700;
}
.h12-legal-lead-skills li i { flex-shrink: 0; color: var(--h12-crimson); font-size: .82rem; }

.h12-legal-lead-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    color: #fff;
    background: var(--h12-crimson);
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease;
}
.h12-legal-lead-link span { flex: 0 1 auto; }
.h12-legal-lead-link:hover { color: #fff; background: var(--h12-crimson-dark); }

@media (max-width: 480px) {
    .h12-legal-lead-top { grid-template-columns: 46px minmax(0, 1fr); }
    .h12-legal-lead-icon { width: 46px; height: 46px; font-size: .95rem; }
    .h12-legal-lead-exp { display: none; }
    .h12-legal-lead-skills { grid-template-columns: 1fr; }
}
.h12-app-viewport { background: #fff; box-shadow: none; }
.h12-shell { padding: 28px 32px; }
.h12-header { border-top: 0; border-bottom: 3px solid var(--h12-crimson); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.h12-header-inner { height: 82px; padding: 0 32px; }
.h12-logo-img { height: 58px; max-width: 340px; }
.h12-icon-btn { border-radius: 6px; background: #fff; border: 1px solid var(--h12-border); }
.h12-icon-btn:hover, .h12-back-btn:hover { transform: none; }
.h12-back-btn { border-radius: 6px; box-shadow: none; }

.h12-hero-slider { border-radius: 10px; box-shadow: var(--h12-shadow-md); }
.h12-slide { min-height: 250px; padding: 38px 40px; }
.h12-slide-overlay { background: linear-gradient(90deg, rgba(25,25,25,.95), rgba(25,25,25,.82) 55%, rgba(223,31,45,.58)); }
.h12-badge-orange { background: var(--h12-crimson); color: #fff; border-radius: 4px; box-shadow: none; letter-spacing: .06em; }
.h12-slide-title { max-width: 620px; font-size: clamp(1.65rem,3.4vw,2.35rem); line-height: 1.15; letter-spacing: -.035em; }
.h12-slide-desc { max-width: 570px; font-size: .9rem; margin-bottom: 13px; }
.h12-slide-btn, .h12-hero-card-btn { background: var(--h12-crimson); color: #fff; border-radius: 6px; box-shadow: none; }
.h12-slide-btn:hover, .h12-hero-card-btn:hover { background: #fff; color: var(--h12-crimson-dark); transform: none; box-shadow: none; }
.h12-dot.active { background: #fff; }

.h12-search-section, .h12-steps-container { border-radius: 10px; box-shadow: var(--h12-shadow-sm); }
.h12-home-hero { margin-bottom: 0; }
.h12-home-hero .h12-slider-dots { bottom: 52px; }
.h12-home-hero + .h12-search-section {
    position: relative;
    z-index: 5;
    margin: -46px 22px 26px;
    padding: 20px 22px;
    background: #fff;
    border-top: 3px solid var(--h12-crimson);
    box-shadow: 0 8px 24px rgba(20,20,20,.12);
}

/* Home landing hero: one clear message, supported by a light editorial image. */
.h12-home-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(250px, .92fr);
    min-height: 276px;
    overflow: hidden;
    position: relative;
    color: var(--h12-text-dark);
    background: #fff;
    border: 1px solid #eadfe0;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(35, 27, 28, .08);
}
.h12-home-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 38px 42px 72px;
    position: relative;
    z-index: 2;
}
.h12-home-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    color: var(--h12-crimson);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.h12-home-hero-copy h1 {
    max-width: 480px;
    margin: 0 0 10px;
    color: #202024;
    font-family: var(--h12-font-heading);
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.045em;
}
.h12-home-hero-copy p {
    max-width: 430px;
    margin: 0 0 20px;
    color: #626268;
    font-size: .92rem;
    line-height: 1.6;
}
.h12-home-hero-action {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 18px;
    color: #fff;
    background: var(--h12-crimson);
    border-radius: 7px;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}
.h12-home-hero-action:hover { color: #fff; background: var(--h12-crimson-dark); transform: translateY(-1px); }
.h12-home-hero-visual {
    min-height: 276px;
    position: relative;
    background: #f1eeee url('/UI/images/cnicverification.jpeg') center 43% / cover no-repeat;
}
.h12-home-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.28), transparent 32%), linear-gradient(0deg, rgba(20,20,24,.20), transparent 55%);
}
.h12-home-hero-proof {
    position: absolute;
    right: 18px;
    bottom: 62px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    color: #29292d;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 7px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    font-size: .68rem;
    font-weight: 700;
    backdrop-filter: blur(8px);
}
.h12-home-hero-proof i { color: var(--h12-crimson); }

/* =========================================================================
   HERO SLIDER — fresh & image-led. Each slide is a full-bleed photo behind a
   bottom scrim with a single one-line title; the whole slide is a link.
   ========================================================================= */
.h12-home-hero.h12-hero-slider {
    display: block;
    grid-template-columns: none;
    min-height: 0;
    color: var(--h12-text-dark);
    background: #f8fafc;
    border: 1px solid #edf0f3;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(27, 35, 48, .09);
}
.h12-home-hero.h12-hero-slider .h12-slider-wrapper { display: flex; }

.h12-home-hero.h12-hero-slider .h12-slide {
    position: relative;
    min-width: 100%;
    min-height: 236px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 22px 24px 30px;
    text-decoration: none;
    background-color: #f8fafc;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.h12-slide-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.91) 34%, rgba(255,255,255,.28) 62%, transparent 78%);
}

.h12-slide-copy {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: 43%;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.h12-slide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid rgba(223,31,45,.16);
    border-radius: 999px;
    background: rgba(223,31,45,.07);
    color: var(--h12-crimson-dark);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.h12-home-hero.h12-hero-slider .h12-slide-title {
    margin: 0;
    font-family: var(--h12-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    /* This image-led slider uses a light copy card. Override the legacy
       dark-slider rule that forces every .h12-slide-title to white. */
    color: #18191c !important;
    text-shadow: none;
}

.h12-slide-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--h12-crimson);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
}

.h12-home-hero.h12-hero-slider .h12-slider-dots { top: 14px; right: 16px; bottom: auto; }
.h12-home-hero.h12-hero-slider .h12-dot {
    width: 7px;
    height: 7px;
    background: rgba(31, 35, 40, .28);
    transition: width .25s ease, background .25s ease;
}
.h12-home-hero.h12-hero-slider .h12-dot.active { width: 20px; border-radius: 4px; background: var(--h12-crimson); }

.h12-home-hero.h12-hero-slider + .h12-search-section { margin-top: -16px; }

@media (max-width: 768px) {
    .h12-home-hero.h12-hero-slider .h12-slide {
        min-height: 205px;
        padding: 0;
        background-position: right center;
        background-size: auto 145%;
    }
    .h12-home-hero.h12-hero-slider .h12-slide-verification,
    .h12-home-hero.h12-hero-slider .h12-slide-legal,
    .h12-home-hero.h12-hero-slider .h12-slide-feedback { background-position: right center; }
    .h12-home-hero.h12-hero-slider .h12-slide-scrim { display: none; }
    .h12-home-hero.h12-hero-slider .h12-slide-copy {
        position: absolute;
        top: 14px;
        left: 14px;
        display: flex;
        max-width: 57%;
        padding: 10px 12px;
        gap: 5px;
        border: 1px solid rgba(255,255,255,.78);
        border-radius: 12px;
        background: rgba(255,250,250,.90);
        box-shadow: 0 7px 20px rgba(120,20,30,.12);
        backdrop-filter: blur(12px);
    }
    .h12-home-hero.h12-hero-slider .h12-slide-title {
        color: #20242a;
        font-size: .94rem;
        line-height: 1.16;
    }
    .h12-home-hero.h12-hero-slider .h12-slide-kicker {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: .58rem;
    }
    .h12-home-hero.h12-hero-slider .h12-slide-action { display: none; }
    .h12-home-hero.h12-hero-slider .h12-slide-verification .h12-slide-copy { border-left: 3px solid var(--h12-crimson); }
    .h12-home-hero.h12-hero-slider .h12-slide-verification .h12-slide-kicker { color: var(--h12-crimson-dark); }
    .h12-home-hero.h12-hero-slider .h12-slide-legal .h12-slide-copy { border-left: 3px solid var(--h12-crimson); }
    .h12-home-hero.h12-hero-slider .h12-slide-legal .h12-slide-kicker { color: var(--h12-crimson-dark); }
    .h12-home-hero.h12-hero-slider .h12-slide-feedback .h12-slide-copy { border-left: 3px solid var(--h12-crimson); }
    .h12-home-hero.h12-hero-slider .h12-slide-feedback .h12-slide-kicker { color: var(--h12-crimson-dark); }
}
@media (max-width: 480px) {
    .h12-home-hero.h12-hero-slider .h12-slide { min-height: 196px; }
    .h12-home-hero.h12-hero-slider .h12-slide-copy {
        top: 12px;
        left: 12px;
        max-width: 59%;
        padding: 9px 10px;
    }
    .h12-home-hero.h12-hero-slider .h12-slide-title { font-size: .86rem; }
}

.h12-search-title, .h12-section-title h2 { color: var(--h12-text-dark); letter-spacing: -.025em; }
.h12-search-title i, .h12-section-title h2 i { color: var(--h12-crimson) !important; }
.h12-btn-advance-trigger { border-radius: 6px; box-shadow: none; }
.h12-btn-advance-trigger:hover { transform: none; box-shadow: none; }
.h12-cnic-input, .h12-form-control { border-radius: 6px; font-weight: 500; }
.h12-cnic-input:focus, .h12-form-control:focus { border-color: var(--h12-crimson) !important; box-shadow: 0 0 0 3px rgba(223,31,45,.12) !important; }
.h12-btn-search, .h12-btn-card-action, a.h12-btn-search, a.h12-btn-card-action, a.cs-btn-primary {
    background: var(--h12-crimson);
    border-radius: 6px;
    box-shadow: none;
    text-decoration: none !important;
}
.h12-btn-search:hover, .h12-btn-search:focus, .h12-btn-search:active,
.h12-btn-card-action:hover, .h12-btn-card-action:focus, .h12-btn-card-action:active,
a.h12-btn-search:hover, a.h12-btn-search:focus, a.h12-btn-search:active,
a.h12-btn-card-action:hover, a.h12-btn-card-action:focus, a.h12-btn-card-action:active,
a.cs-btn-primary:hover, a.cs-btn-primary:focus, a.cs-btn-primary:active {
    background: var(--h12-crimson-dark);
    transform: none;
    box-shadow: none;
    text-decoration: none !important;
}

/* Search card: input + button are one aligned pair, with a single tight focus ring
   (not the stacked border + shadow + offset outline that looked like a stray border). */
#h12SearchForm { display: flex; flex-direction: column; gap: 10px; }
#h12SearchForm .h12-btn-search { width: 100%; }
#h12SearchForm .h12-search-help { margin-top: 2px; }
#h12SearchForm .h12-cnic-input:focus,
#h12SearchForm .h12-cnic-input:focus-visible {
    border-color: var(--h12-crimson) !important;
    box-shadow: none !important;
    outline: 2px solid var(--h12-crimson) !important;
    outline-offset: 2px !important;
}
#h12SearchForm .h12-btn-search:focus,
#h12SearchForm .h12-btn-search:focus-visible {
    outline: 2px solid var(--h12-crimson) !important;
    outline-offset: 2px !important;
}

.h12-qsvc-card, .h12-card, .h12-legal-card { border-radius: 8px; box-shadow: none; border-color: var(--h12-border); }
.h12-qsvc-card:hover, .h12-card:hover, .h12-legal-card:hover { transform: none; box-shadow: var(--h12-shadow-sm); border-color: #c9c9c5; }
.h12-qsvc-icon, .h12-icon-bubble { border-radius: 6px; background: var(--h12-crimson-subtle) !important; color: var(--h12-crimson) !important; }
.h12-card:hover .h12-icon-bubble, .h12-legal-card:hover .h12-legal-img-wrap img { transform: none; }
.h12-qsvc-arrow, .h12-qsvc-card:hover .h12-qsvc-arrow, .h12-section-link { color: var(--h12-crimson); }
.h12-pill { border-radius: 6px; box-shadow: none; }
.h12-pill.active, .h12-pill:hover { background: var(--h12-crimson) !important; color: #fff !important; border-color: var(--h12-crimson) !important; box-shadow: none; transform: none; }
.h12-pill.active i, .h12-pill:hover i { color: #fff !important; }

.h12-hero-action-card { border-radius: 10px; box-shadow: none; }
.h12-hero-action-card:hover { transform: none; box-shadow: var(--h12-shadow-md); }
.h12-hero-card-complaint { background: var(--h12-crimson); }
.h12-hero-card-inquiry { background: var(--h12-teal); }
.h12-hero-card-badge { border-radius: 4px; letter-spacing: .05em; }
.h12-step-item { border-radius: 6px; background: #fafafa; }
.h12-step-num { background: var(--h12-crimson); color: #fff; box-shadow: none; }
.h12-step-content h3 { color: var(--h12-text-dark); }
.h12-drawer-header { background: var(--h12-crimson) !important; }
.h12-footer { background: var(--h12-teal-dark); border-top: 3px solid var(--h12-crimson); border-radius: 0; }
.h12-whatsapp-float { box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.h12-whatsapp-float:hover { transform: none; }
.h12-bottom-nav { border-top: 1px solid var(--h12-border); border-image: none; box-shadow: 0 -3px 12px rgba(0,0,0,.08); }
.h12-bottom-item.active, .h12-bottom-item:hover, .h12-bottom-item-orange, .h12-bottom-item-crimson { color: var(--h12-crimson) !important; }
.h12-bottom-item.active::before, .h12-bottom-item-orange.active::before, .h12-bottom-item-crimson.active::before { background: var(--h12-crimson); }

/* Complaint and inquiry actions: compact, consistent and easy to scan. */
.h12-hero-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--h12-border);
    border-top: 4px solid var(--h12-crimson);
    border-radius: 10px;
    box-shadow: var(--h12-shadow-sm);
}

.h12-assistance-heading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--h12-border);
}

.h12-assistance-heading span {
    display: block;
    margin-bottom: 3px;
    color: var(--h12-crimson);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.h12-assistance-heading h2 {
    margin: 0;
    color: var(--h12-text-dark);
    font-size: 1.35rem;
    letter-spacing: -.025em;
}

.h12-assistance-heading > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: var(--h12-crimson);
    background: var(--h12-crimson-subtle);
    border-radius: 50%;
    font-size: 1.15rem;
}

/* --- Reference Image 1 Assistance Cards --- */
.h12-action-ref-card {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    padding: 24px 22px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.h12-action-ref-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    border-color: #d0d0d0;
}

.h12-ref-card-tag {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.h12-ref-card-title {
    font-family: var(--h12-font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: #2B2B2B;
    margin: 0 0 8px 0;
    line-height: 1.28;
    position: relative;
    z-index: 1;
}

.h12-ref-card-desc {
    font-size: 0.865rem;
    color: #555555;
    line-height: 1.5;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 1;
}

.h12-ref-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #EA1B23;
    color: #ffffff !important;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 10px;
    text-decoration: none;
    align-self: flex-start;
    box-shadow: 0 4px 14px rgba(234, 27, 35, 0.22);
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.h12-ref-btn-primary:hover {
    background: #c41219;
    transform: translateY(-1px);
    color: #ffffff !important;
    text-decoration: none;
}

.h12-ref-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2B2B2B;
    color: #ffffff !important;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 10px;
    text-decoration: none;
    align-self: flex-start;
    box-shadow: 0 4px 14px rgba(43, 43, 43, 0.2);
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
}

.h12-ref-btn-secondary:hover {
    background: #EA1B23;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(234, 27, 35, 0.3);
    text-decoration: none;
}

.h12-ref-watermark {
    position: absolute;
    right: -25px;
    bottom: -35px;
    width: 170px;
    height: 170px;
    pointer-events: none;
    opacity: 0.08;
    z-index: 0;
}

.h12-hero-card-grid .h12-hero-action-card > div:first-child {
    align-items: center !important;
    margin-bottom: 9px !important;
}

.h12-hero-card-grid .h12-hero-action-card > div:first-child > div {
    width: 38px !important;
    height: 38px !important;
    color: var(--h12-crimson) !important;
    background: var(--h12-crimson-subtle) !important;
    border: 1px solid #ffdadd !important;
    font-size: 1rem !important;
}

.h12-hero-card-grid .h12-hero-card-badge,
.h12-hero-card-grid .h12-hero-card-inquiry .h12-hero-card-badge {
    margin: 0;
    color: var(--h12-crimson) !important;
    background: var(--h12-crimson-subtle) !important;
    border-radius: 4px;
}

.h12-hero-card-grid .h12-hero-card-title {
    color: var(--h12-text-dark) !important;
    margin-bottom: 5px;
    font-size: 1.02rem;
}

.h12-hero-card-grid .h12-hero-card-desc {
    min-height: 38px;
    margin-bottom: 11px;
    color: var(--h12-text-muted);
    font-size: .76rem;
}

.h12-hero-card-grid .h12-hero-card-btn {
    padding: 8px 12px;
    color: #fff;
    background: var(--h12-crimson);
    font-size: .76rem;
}

.h12-hero-card-grid .h12-hero-card-btn:hover {
    color: #fff;
    background: var(--h12-crimson-dark);
}

@media (max-width: 768px) {
    .h12-header-inner { height: 76px; padding: 0 16px; }
    .h12-logo-img { height: 50px; max-width: 300px; }
    .h12-shell { padding: 14px 16px 24px; }
    .h12-slide { min-height: 205px; padding: 22px 22px 34px; }
    .h12-badge-orange { margin-bottom: 7px; padding: 3px 9px; font-size: .65rem; }
    .h12-slide-title { max-width: 490px; margin-bottom: 6px; font-size: 1.35rem; line-height: 1.18; }
    .h12-slide-desc { max-width: 470px; margin-bottom: 11px; font-size: .78rem; line-height: 1.4; }
    .h12-slide-btn { padding: 8px 14px; font-size: .76rem; }
    .h12-slider-dots { right: 14px; bottom: 12px; }
    .h12-home-hero + .h12-search-section { margin: -30px 10px 24px; padding: 18px; border-radius: 8px; }
    .h12-home-hero .h12-slider-dots { bottom: 38px; }
    .h12-search-header { align-items: center; gap: 10px; }
    .h12-search-title { font-size: 1.05rem; }
    .h12-btn-advance-trigger { padding: 4px 2px; }
    .h12-hero-slider, .h12-hero-action-card, .h12-steps-container { border-radius: 8px; }
    .h12-hero-action-card { padding: 20px; }
    .h12-footer { margin-top: 12px; }
    .h12-home-legal { padding: 20px 16px; }
    .h12-home-legal .h12-card-grid { grid-template-columns: 1fr; }
    .h12-legal-lead-card { padding: 16px; gap: 13px; }
    .h12-services-cta { grid-template-columns: auto minmax(0, 1fr) auto; padding: 20px 16px; }
    .h12-services-cta-link { grid-column: 3; width: max-content; padding: 10px 13px; border-left: 0; box-sizing: border-box; }
    .h12-home-faq { padding: 20px 16px; }
    .h12-home-what-we-check { padding: 20px 16px; }
    .h12-home-service-list { grid-template-columns: 1fr; }
    .h12-services-catalog { padding: 20px 16px; }
    .h12-hero-card-grid { grid-template-columns: 1fr; gap: 10px; padding: 14px 12px; }
    .h12-hero-card-grid .h12-hero-action-card { padding: 14px 16px; }
    .h12-hero-card-grid .h12-hero-action-card > div:first-child > div { width: 34px !important; height: 34px !important; }
    .h12-hero-card-grid .h12-hero-card-title { font-size: .98rem; }
    .h12-hero-card-grid .h12-hero-card-btn { padding: 8px 11px; }
    .h12-hero-card-grid .h12-hero-card-desc { min-height: 0; }
}

@media (max-width: 380px) {
    .h12-shell, .h12-header-inner { padding-left: 12px; padding-right: 12px; }
    .h12-slide { min-height: 215px; padding: 20px 18px 36px; }
    .h12-slide-title { font-size: 1.22rem; }
    .h12-slide-desc { font-size: .74rem; }
    .h12-search-header { gap: 8px; }
    .h12-btn-advance-trigger { padding: 4px 0; }
    .h12-home-hero + .h12-search-section { margin-left: 4px; margin-right: 4px; }
    .h12-home-legal .h12-section-title { align-items: flex-start; gap: 12px; }
    .h12-home-legal .h12-legal-card { grid-template-columns: 92px minmax(0, 1fr); }
    .h12-home-legal .h12-legal-img-wrap { width: 92px; min-height: 168px; }
    .h12-home-legal .h12-legal-body { padding: 14px 12px; }
    .h12-home-what-we-check .h12-card { grid-template-columns: 42px minmax(0, 1fr) 20px; column-gap: 10px; padding: 13px 11px; }
    .h12-home-what-we-check .h12-icon-bubble { width: 40px; height: 40px; font-size: 1rem; }
    .h12-home-what-we-check .h12-card-title { font-size: .9rem; }
    .h12-home-what-we-check .h12-card-desc { font-size: .73rem; }
    .h12-services-cta { grid-template-columns: auto minmax(0, 1fr); }
    .h12-services-cta-link { grid-column: 2; padding: 8px 11px; }
    .h12-services-catalog .h12-card { grid-template-columns: 42px minmax(0, 1fr) 20px; column-gap: 10px; padding: 13px 11px; }
    .h12-services-catalog .h12-icon-bubble { width: 40px; height: 40px; font-size: 1rem; }
    .h12-services-catalog .h12-card-title { font-size: .9rem; }
    .h12-services-catalog .h12-card-desc { font-size: .73rem; }
}

/* Unified Home12 section system */
.h12-steps-container,
.h12-home-what-we-check,
.h12-services-cta,
.h12-hero-card-grid,
.h12-home-legal,
.h12-home-faq {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--h12-border);
    border-top: 4px solid var(--h12-crimson);
    border-radius: 10px;
    box-shadow: var(--h12-shadow-sm);
}

.h12-section-title,
.h12-assistance-heading {
    min-height: 42px;
    margin-bottom: 18px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--h12-border);
    box-sizing: content-box;
}

.h12-section-title h2,
.h12-search-title,
.h12-assistance-heading h2,
.h12-services-cta-copy h2 {
    margin: 0;
    color: var(--h12-text-dark);
    font-family: var(--h12-font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.h12-section-title h2 > i,
.h12-assistance-heading > i,
.h12-services-cta-icon {
    width: 26px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    color: var(--h12-crimson) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    font-size: 1.3rem;
    line-height: 1;
    flex: 0 0 26px;
}

.h12-section-link {
    font-family: var(--h12-font-ui);
    background: var(--h12-crimson);
    color: #ffffff !important;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 3px 10px rgba(234, 27, 35, 0.2);
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.h12-section-link:hover {
    background: var(--h12-crimson-dark);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(234, 27, 35, 0.3);
    text-decoration: none;
}

.h12-services-cta {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 14px;
}

.h12-services-cta-copy span,
.h12-assistance-heading span,
.h12-legal-lead-copy > span {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.h12-home-what-we-check .h12-card,
.h12-services-catalog .h12-card,
.h12-home-service-list > a,
.h12-step-item,
.h12-faq-list details {
    background: #fafafa;
    border: 1px solid var(--h12-border);
    border-radius: 7px;
    box-shadow: none;
}

.h12-home-what-we-check .h12-icon-bubble,
.h12-services-catalog .h12-icon-bubble,
.h12-home-service-list > a > i:first-child {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.h12-home-what-we-check .h12-card-title,
.h12-services-catalog .h12-card-title,
.h12-home-service-list strong,
.h12-step-content h3,
.h12-faq-list summary {
    font-family: var(--h12-font-ui);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.35;
}

.h12-home-what-we-check .h12-card-desc,
.h12-services-catalog .h12-card-desc,
.h12-home-service-list small,
.h12-step-content p,
.h12-faq-list p {
    color: var(--h12-text-muted);
    font-family: var(--h12-font-ui);
    font-size: .75rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .h12-steps-container,
    .h12-home-what-we-check,
    .h12-services-cta,
    .h12-hero-card-grid,
    .h12-home-legal,
    .h12-home-faq { padding: 18px 16px; }

    .h12-section-title,
    .h12-assistance-heading { min-height: 36px; margin-bottom: 14px; padding-bottom: 12px; }

    .h12-section-title h2,
    .h12-assistance-heading h2,
    .h12-services-cta-copy h2 { font-size: 1.08rem; }

    .h12-section-title h2 > i,
    .h12-services-cta-icon { width: 22px; font-size: 1.12rem; flex-basis: 22px; }

    .h12-services-cta { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; }
    .h12-services-cta-link { padding: 9px 11px; font-size: .68rem; }

    /* Mobile-first brightness and breathing room */
    body.h12-body { background: #f8f8f6; }
    .h12-shell { padding: 18px 14px 28px; }
    .h12-home-hero {
        border: 1px solid rgba(223,31,45,.18);
        box-shadow: 0 8px 22px rgba(183,25,36,.12);
    }
    .h12-home-hero .h12-slide-overlay {
        background: linear-gradient(90deg, rgba(171,20,31,.90) 0%, rgba(223,31,45,.74) 58%, rgba(28,28,28,.46) 100%);
    }
    .h12-slide { min-height: 200px; padding: 22px 20px 36px; }
    .h12-slide-title { text-shadow: 0 1px 3px rgba(0,0,0,.18); }
    .h12-badge-orange { background: #fff; color: var(--h12-crimson); }
    .h12-slide-btn { background: #fff; color: var(--h12-crimson-dark); }
    .h12-slide-btn:hover { color: var(--h12-crimson-dark); }
    .h12-home-hero .h12-slider-dots { bottom: 26px; }
    .h12-dot { background: rgba(255,255,255,.55); }
    .h12-dot.active { background: #fff; }

    .h12-home-hero + .h12-search-section {
        margin: -18px 10px 30px;
        padding: 18px;
        background: #fffdfd;
        border-color: #f0dfe1;
        border-top-color: var(--h12-crimson);
        box-shadow: 0 10px 26px rgba(35,35,35,.10);
    }
    .h12-search-header { margin-bottom: 16px; }
    .h12-cnic-input { height: 52px; background: #fff; }
    .h12-btn-search { height: 52px; background: var(--h12-crimson); }
    .h12-search-help { margin-top: 13px; line-height: 1.45; }

    .h12-steps-container,
    .h12-home-what-we-check,
    .h12-services-cta,
    .h12-hero-card-grid,
    .h12-home-legal,
    .h12-home-faq {
        margin-bottom: 24px !important;
        background: #fff;
        box-shadow: 0 5px 18px rgba(25,25,25,.055);
    }

    .h12-home-what-we-check .h12-card,
    .h12-home-service-list > a,
    .h12-step-item,
    .h12-faq-list details,
    .h12-hero-card-grid .h12-hero-action-card {
        background: #fffafa;
        border-color: #eddddd;
    }
}

@media (max-width: 600px) {
    .h12-home-hero {
        grid-template-columns: 1fr;
        grid-template-areas: "visual" "copy";
    }
    .h12-home-hero-copy {
        grid-area: copy;
        padding: 24px 22px 42px;
    }
    .h12-home-hero-copy h1 { font-size: 2rem; }
    .h12-home-hero-copy p { max-width: 330px; margin-bottom: 17px; font-size: .84rem; }
    .h12-home-hero-visual {
        grid-area: visual;
        min-height: 142px;
        background-position: center 39%;
    }
    .h12-home-hero-visual::after {
        background: linear-gradient(0deg, rgba(20,20,24,.22), transparent 65%);
    }
    .h12-home-hero-proof { right: 12px; bottom: 12px; }
}

/* =========================================================================
   COMPLAINT PAGE — simple, professional, single column
   ========================================================================= */
.h12-complaint-intro {
    margin-bottom: 22px;
    padding: 24px 22px;
    background: #fff;
    border: 1px solid var(--h12-border);
    border-top: 4px solid var(--h12-crimson);
    border-radius: 12px;
    box-shadow: var(--h12-shadow-sm);
}
.h12-complaint-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding: 4px 11px;
    color: var(--h12-crimson-dark);
    background: rgba(223, 31, 45, .10);
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.h12-complaint-intro h1 {
    margin: 0 0 8px;
    color: var(--h12-text-dark);
    font-family: var(--h12-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.h12-complaint-intro > p {
    margin: 0 0 18px;
    max-width: 60ch;
    color: var(--h12-text-muted);
    font-size: .86rem;
    line-height: 1.6;
}
.h12-complaint-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.h12-complaint-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.h12-complaint-btn--primary { color: #fff; background: var(--h12-crimson); }
.h12-complaint-btn--primary:hover { color: #fff; background: var(--h12-crimson-dark); }
.h12-complaint-btn--ghost {
    color: var(--h12-text-dark);
    background: #fff;
    border: 1.5px solid var(--h12-border-strong);
}
.h12-complaint-btn--ghost:hover { color: var(--h12-text-dark); border-color: var(--h12-crimson); }
.h12-complaint-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 14px 0 0;
    color: var(--h12-text-muted);
    font-size: .74rem;
    line-height: 1.5;
}
.h12-complaint-note i { flex-shrink: 0; color: var(--h12-crimson); }

.h12-complaint-steps {
    margin-bottom: 22px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--h12-border);
    border-radius: 12px;
    box-shadow: var(--h12-shadow-sm);
}
.h12-complaint-steplist {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.h12-complaint-steplist li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
}
.h12-complaint-stepnum {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #fff;
    background: var(--h12-crimson);
    border-radius: 50%;
    font-family: var(--h12-font-heading);
    font-size: .85rem;
    font-weight: 800;
}
.h12-complaint-steplist h3 {
    margin: 4px 0 3px;
    color: var(--h12-text-dark);
    font-size: .95rem;
    font-weight: 700;
}
.h12-complaint-steplist p {
    margin: 0;
    color: var(--h12-text-muted);
    font-size: .82rem;
    line-height: 1.55;
}