/*
 * rockhaven-custom.css
 * RockHaven Limited — Final authority brand layer
 * Loaded last; overrides Andora defaults + rockheaven.css partials
 * ================================================================= */

/* ── 1. CSS Custom Properties ─────────────────────────────────────── */
:root {
    --rh-primary:          #0A1E6E;
    --rh-accent:           #1E7FD4;
    --rh-silver:           #C8D0DC;
    --rh-dark:             #060E2B;
    --rh-light:            #F4F7FC;
    --rh-primary-hover:    #0d2585;
    --rh-accent-hover:     #1a6bb8;

    /* Push Andora Bootstrap tokens to our palette */
    --bs-primary:              var(--rh-accent);
    --bs-primary-rgb:          30, 127, 212;
    --bs-link-color:           var(--rh-accent);
    --bs-link-color-rgb:       30, 127, 212;
    --bs-link-hover-color:     var(--rh-primary);
    --bs-link-hover-color-rgb: 10, 30, 110;
    --bs-focus-ring-color:     rgba(30, 127, 212, 0.25);
}


/* ── 2. Global accent colour sweeps ────────────────────────────────── */
a { color: var(--rh-accent); text-decoration: none; }
a:hover { color: var(--rh-primary); }

.text-primary   { color: var(--rh-accent) !important; }
.bg-primary     { background-color: var(--rh-primary) !important; }
.border-primary { border-color: var(--rh-accent) !important; }

.swiper-pagination-bullet        { background: rgba(10,30,110,0.20) !important; opacity:1 !important; }
.swiper-pagination-bullet-active { background: var(--rh-accent) !important; }


/* ── 3. NAVBAR FIXES ───────────────────────────────────────────────── */

/* Navbar default state — solid near-white with subtle shadow */
#navbar,
nav.navbar,
html body .navbar,
html body #navbar {
    background-color: rgba(255, 255, 255, 0.97) !important;
    background:       rgba(255, 255, 255, 0.97) !important;
    box-shadow: 0 2px 20px rgba(10, 30, 110, 0.12) !important;
    border-bottom: 1px solid rgba(10, 30, 110, 0.08) !important;
    padding: 8px 0 !important;
    transition: background-color 0.35s ease,
                box-shadow 0.35s ease !important;
}

/* Brand / logo area — no background, proper alignment */
html body .navbar .navbar-brand,
html body #navbar .navbar-brand,
.navbar-brand {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-right: 40px !important;
    display: flex !important;
    align-items: center !important;
}

/* ── Logo sizing — navbar ── */
.navbar-brand img {
    height: 55px !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: 200px !important;
    object-fit: contain !important;
    display: block !important;
    image-rendering: crisp-edges !important;
}

/* Mobile offcanvas navbar logo */
.responsive-navbar .offcanvas-header img,
.rh-offcanvas-header img,
.offcanvas-header .logo img,
.responsive-navbar .logo img {
    height: 50px !important;
    width: auto !important;
    min-width: 100px !important;
    object-fit: contain !important;
    display: block !important;
}

/* ── HERO SECTION: remove excess top space ──────────────────────── */

/* Top-header area: keep it if it has content, ensure it's styled */
.rh-top-header {
    background-color: #060E2B !important;
    padding: 8px 0 !important;
}
.rh-top-header *,
.rh-top-header a,
.rh-top-header span,
.rh-top-header i {
    color: #ffffff !important;
    font-size: 13px !important;
}
/* Hide top-header if it ends up empty */
.rh-top-header:empty,
.top-header-area:empty,
.top-header-area.d-none {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── HERO section: proper full-screen vertical centring ── */
.rh-hero-fullscreen {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Inner container: breathing room only, let flexbox do the centring */
.rh-hero-container {
    padding-top: 80px !important;   /* clears navbar height */
    padding-bottom: 100px !important; /* room for absolute stats bar */
    width: 100% !important;
}

/* ── Hero badge (.rh-hero-eyebrow) — white text, visible border ── */
.rh-hero-eyebrow {
    color: #ffffff !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.70) !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    margin-top: 0 !important;
    backdrop-filter: blur(4px) !important;
}
.rh-hero-eyebrow *,
.rh-hero-eyebrow i {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Catch-all for any badge variant inside the hero */
.hero-badge,
.commercial-banner-content .sub,
[class*="hero"] [class*="badge"],
[class*="hero"] [class*="sub"],
[class*="banner"] [class*="sub"] {
    color: #ffffff !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.60) !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    backdrop-filter: blur(4px) !important;
}
.commercial-banner-area,
.hero-section {
    padding-top: 80px !important;
}
.commercial-banner-content,
.hero-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.top-header-area .top-header-inner:empty {
    display: none !important;
}

/* ── FIX 2: Nav links — default state (page at top) ──
   Dark navy so they're visible on ANY background —
   transparent, white, or light grey. */
#navbar .navbar-nav .nav-item .nav-link,
.navbar .navbar-nav .nav-item .nav-link {
    color: #0A1E6E !important;
    font-weight: 600 !important;
}
#navbar .navbar-nav .nav-item .nav-link:hover,
#navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item .nav-link:hover,
.navbar .navbar-nav .nav-item .nav-link.active {
    color: #1E7FD4 !important;
    background: rgba(10, 30, 110, 0.06) !important;
}

/* Scrolled / sticky state — white links on solid navy background */
html body #navbar.rh-scrolled,
html body #navbar.sticky,
html body .navbar.sticky {
    background-color: var(--rh-primary) !important;
    background: var(--rh-primary) !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
    box-shadow: 0 4px 28px rgba(6,14,43,0.45) !important;
}
#navbar.rh-scrolled .navbar-nav .nav-item .nav-link,
#navbar.sticky .navbar-nav .nav-item .nav-link,
.navbar.sticky .navbar-nav .nav-item .nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 600 !important;
}
#navbar.rh-scrolled .navbar-nav .nav-item .nav-link:hover,
#navbar.rh-scrolled .navbar-nav .nav-item .nav-link.active,
#navbar.sticky .navbar-nav .nav-item .nav-link:hover,
#navbar.sticky .navbar-nav .nav-item .nav-link.active,
.navbar.sticky .navbar-nav .nav-item .nav-link:hover,
.navbar.sticky .navbar-nav .nav-item .nav-link.active {
    color: #ffffff !important;
    background: rgba(255,255,255,0.12) !important;
}

/* Hamburger bars */
#navbar:not(.rh-scrolled):not(.sticky) .burger-menu span {
    background: var(--rh-primary) !important;
}
#navbar.rh-scrolled .burger-menu span,
#navbar.sticky .burger-menu span,
.navbar.sticky .burger-menu span {
    background: #ffffff !important;
}

/* CTA button */
#navbar .others-option .default-btn {
    background-color: var(--rh-accent) !important;
    color: #ffffff !important;
}
#navbar .others-option .default-btn:hover {
    background-color: var(--rh-primary) !important;
}


/* ── FIX 1: Top header bar ─────────────────────────────────────────── */
.rh-top-header {
    background: #0A1E6E !important;
    background-color: #0A1E6E !important;
}
.rh-top-header a,
.rh-top-header span,
.rh-top-header li,
.rh-header-info li,
.rh-header-info a,
.rh-header-social a {
    color: #ffffff !important;
}
.rh-header-info a:hover,
.rh-header-social a:hover {
    color: var(--rh-accent) !important;
}


/* ── 4. .default-btn: accent background, sharp corporate corners ───── */
.default-btn {
    background-color: var(--rh-accent) !important;
    color: #ffffff !important;
    border-radius: 4px !important;
    border: none !important;
    font-family: "Josefin Sans", sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    transition: background-color 0.30s ease,
                transform 0.25s ease,
                box-shadow 0.30s ease !important;
}
.default-btn:hover {
    background-color: var(--rh-primary) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(30,127,212,0.30) !important;
}
.responsive-navbar .offcanvas-body .default-btn {
    border-radius: 4px !important;
}


/* ── FIX 3: Section headings — fix invisible h2 on light backgrounds── */

/* All generic section titles */
.section-title h2,
.section-title .h2 {
    color: #0A1E6E !important;
}

/* About */
.about-content h2 { color: #0A1E6E !important; }

/* Testimonials / review section — this section has a light bg */
#clients h2,
#clients .rh-section-title-alt,
.rh-section--light h2,
.rh-testimonials h2 {
    color: #0A1E6E !important;
}
#clients .rh-testimonials-intro,
.rh-testimonials-intro {
    color: #555555 !important;
}

/* .rh-section-title-alt — only force WHITE when it's genuinely on a dark bg */
/* Default: inherit context colour (safe for both light and dark sections) */
.rh-section-title-alt {
    color: #0A1E6E;
}
/* Override to white ONLY inside known dark sections */
.rh-cta-band .rh-section-title-alt,
.rh-stats-section .rh-section-title-alt {
    color: #ffffff !important;
}
/* Named heading classes — dark-bg sections get white, light-bg get primary */
.rh-cta-contact-title,
.rh-cta-title         { color: #ffffff !important; }

/* ══════════════════════════════════════════════════════════
   ABOUT INFOGRAPHIC — force overrides (beats Andora template)
   ══════════════════════════════════════════════════════════ */
.rh-about-infographic {
    background: linear-gradient(145deg, #04102E 0%, #0A1E6E 55%, #0D2A8A 100%) !important;
    border-radius: 20px !important;
    padding: 28px !important;
    box-shadow: 0 16px 56px rgba(10,30,110,0.30) !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 480px !important;
}
/* All text inside the infographic defaults to white */
.rh-about-infographic,
.rh-about-infographic p,
.rh-about-infographic span,
.rh-about-infographic div,
.rh-about-infographic strong { color: inherit; }

.rh-aig-founded-year  { color: #ffffff !important; font-size: 22px !important; font-weight: 900 !important; display: block !important; }
.rh-aig-founded-lbl   { color: rgba(255,255,255,0.50) !important; font-size: 10px !important; display: block !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; }
.rh-aig-rc-badge      { background: rgba(30,144,255,0.15) !important; border: 1px solid rgba(30,144,255,0.30) !important; border-radius: 50px !important; padding: 5px 14px !important; color: rgba(255,255,255,0.80) !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; font-weight: 700 !important; }

.rh-aig-metrics       { display: grid !important; grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
.rh-aig-metric        { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.09) !important; border-radius: 14px !important; padding: 18px 16px !important; text-align: center !important; }
.rh-aig-metric--accent { background: rgba(30,144,255,0.12) !important; border-color: rgba(30,144,255,0.25) !important; }
.rh-aig-metric-num    { display: block !important; font-size: 32px !important; font-weight: 900 !important; font-family: 'Josefin Sans',sans-serif !important; color: #1E90FF !important; line-height: 1 !important; margin-bottom: 5px !important; }
.rh-aig-metric-lbl    { font-size: 11px !important; color: rgba(255,255,255,0.55) !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 500 !important; }

.rh-aig-divider-label { font-size: 10px !important; font-weight: 700 !important; color: rgba(255,255,255,0.38) !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; display: flex !important; align-items: center !important; gap: 10px !important; }
.rh-aig-divider-label::before,
.rh-aig-divider-label::after { content:'' !important; flex:1 !important; height:1px !important; background:rgba(255,255,255,0.10) !important; }

.rh-aig-services      { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 10px !important; }
.rh-aig-svc           { background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.08) !important; border-radius: 12px !important; padding: 12px 8px !important; text-align: center !important; }
.rh-aig-svc i         { display: block !important; font-size: 22px !important; color: #1E90FF !important; margin-bottom: 6px !important; }
.rh-aig-svc span      { font-size: 9.5px !important; font-weight: 700 !important; color: rgba(255,255,255,0.65) !important; text-transform: uppercase !important; display: block !important; }

.rh-aig-zones         { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.rh-aig-zone-row      { display: flex !important; align-items: center !important; gap: 10px !important; }
.rh-aig-zone-name     { font-size: 11px !important; font-weight: 600 !important; color: rgba(255,255,255,0.65) !important; min-width: 100px !important; display: flex !important; align-items: center !important; gap: 4px !important; }
.rh-aig-zone-track    { flex: 1 !important; height: 8px !important; background: rgba(255,255,255,0.07) !important; border-radius: 4px !important; overflow: hidden !important; }
.rh-aig-zone-bar      { height: 100% !important; width: var(--zw,0%) !important; background: var(--zc,#1E90FF) !important; border-radius: 4px !important; }
.rh-aig-zone-count    { font-size: 11px !important; font-weight: 700 !important; color: rgba(255,255,255,0.50) !important; min-width: 36px !important; text-align: right !important; }
.rh-cta-desc          { color: rgba(255,255,255,0.82) !important; }
.rh-advantage-title   { color: var(--rh-primary) !important; }
/* .rh-clients-title lives on a light bg — keep it dark */
.rh-clients-title {
    color: #0A1E6E !important;
}


/* ── 5. Preloader ───────────────────────────────────────────────────── */
.preloader-area {
    background-color: var(--rh-dark) !important;
}
.preloader-area .waviy,
.preloader-area .waviy span {
    color: var(--rh-accent) !important;
    text-shadow: 0 0 20px rgba(30,127,212,0.5);
}
@keyframes waviy {
    0%,40%,100% { transform: translateY(0); }
    20%          { transform: translateY(-20px); }
}


/* ── 6. Hero animated gradient overlay ─────────────────────────────── */
@keyframes rh-gradient-flow {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}
.rh-hero-overlay {
    background: linear-gradient(135deg, #0A1E6E, #1E7FD4, #060E2B) !important;
    background-size: 300% 300% !important;
    animation: rh-gradient-flow 10s ease infinite !important;
    opacity: 0.88 !important;
}


/* ── 7. Universal card hover transitions ────────────────────────────── */
.rh-svc-card,
.rh-project-card,
.rh-team-card,
.rh-wc-card,
.rh-about-stat-box,
.rh-testimonial-card,
.rh-compliance-list li {
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}
.rh-svc-card:hover,
.rh-wc-card:hover,
.rh-team-card:hover,
.rh-testimonial-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 40px rgba(10,30,110,0.15) !important;
}
.rh-about-stat-box:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 16px 44px rgba(10,30,110,0.30) !important;
}
.rh-project-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10),
                0 20px 56px rgba(10,30,110,0.38) !important;
}


/* ── FIX 4: Testimonial slider — prevent card clipping ─────────────── */
.testimonial-slider,
.swiper.testimonial-slider {
    overflow: hidden !important;
    padding: 0 4px !important;
}
.testimonial-slider .swiper-wrapper {
    padding: 20px 0;
}
#clients .container {
    overflow: hidden;
}
#clients .rh-testimonial-card {
    margin: 0 4px;
}


/* ── FIX: Horizontal scroll prevention ─────────────────────────────── */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}
* { box-sizing: border-box !important; }
.container-fluid {
    padding-left: 15px !important;
    padding-right: 15px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   FIX 5: FULL RESPONSIVE — ALL DEVICES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablets 768px – 1199px ─────────────────────────────────────── */
@media (max-width: 1199px) {
    .rh-hero-title,
    .commercial-banner-content h1 {
        font-size: 2.8rem !important;
    }
    .navbar-brand img {
        height: 48px !important;
    }
}

/* ── Small tablets / large phones 576px – 767px ─────────────────── */
@media (max-width: 767px) {

    /* Hero */
    .rh-hero-title,
    .commercial-banner-content h1 {
        font-size: 2rem !important;
        line-height: 1.3 !important;
    }
    .rh-hero-desc,
    .commercial-banner-content p {
        font-size: 1rem !important;
    }
    .rh-hero-actions {
        flex-direction: column !important;
        align-items: center !important;
    }
    .rh-hero-actions a {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 6px auto !important;
        text-align: center !important;
    }

    /* Hero stats bar — 2 per row */
    .rh-hero-stats .row { flex-wrap: wrap !important; }
    .rh-hero-stats .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .rh-hero-stat { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
    .rh-hero-stat--last { border-bottom: none !important; }

    /* Services grid — 2 columns */
    #services .col-xl-2 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* About — stack columns */
    #about .row > [class*="col-lg"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 28px !important;
    }

    /* Stats boxes — 2 per row */
    .rh-stats-section .col-lg-3,
    .rh-stats-section .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Achievement banner — 2 per row */
    .rh-achieve-banner .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .rh-achieve-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
    .rh-achieve-item--last { border-bottom: none !important; }

    /* Team cards — 1 per row */
    #team .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 20px !important;
    }

    /* Testimonial cards */
    .rh-testimonial-card { padding: 22px !important; }

    /* CTA band */
    .rh-cta-band .row { text-align: center !important; }
    .rh-cta-band .col-lg-4 { margin-top: 24px !important; }

    /* Contact CTA */
    .rh-cta-contact-title { font-size: 2rem !important; }
    .rh-cta-contact-actions {
        flex-direction: column !important;
        align-items: center !important;
    }
    .rh-cta-primary-btn,
    .rh-cta-call-btn {
        width: 100% !important;
        max-width: 320px !important;
        justify-content: center !important;
    }

    /* Footer — stack all columns */
    .rh-site-footer .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 28px !important;
    }
    .rh-footer-col { padding-left: 0 !important; }

    /* Section padding */
    .rh-section { padding: 60px 0 50px !important; }
}

/* ── Mobile phones 320px – 575px ────────────────────────────────── */
@media (max-width: 575px) {

    /* Hero */
    .rh-hero-title,
    .commercial-banner-content h1 {
        font-size: 1.7rem !important;
    }
    .rh-hero-eyebrow { font-size: 12px; padding: 6px 14px; }

    /* Logo */
    .navbar-brand img { height: 40px !important; min-width: 90px !important; }

    /* Services — 1 per row */
    #services .col-xl-2,
    #services .col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Stats — 1 per row */
    .rh-hero-stats .col-lg-3,
    .rh-stats-section .col-lg-3,
    .rh-achieve-banner .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Team */
    #team .col-lg-3,
    #team .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* About stat boxes — 1 per row on small phones */
    #about .col-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Swiper — full width slides */
    .swiper-slide { width: 100% !important; }

    /* Top header — hide to save space */
    .rh-top-header { display: none !important; }

    /* Navbar */
    .navbar { padding: 10px 15px !important; }

    /* Typography */
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.25rem !important; }
    .section-title h2 { font-size: 1.5rem !important; }

    /* Section padding */
    .rh-section { padding: 48px 0 38px !important; }
    .rh-cta-band { padding: 40px 0 !important; }
    .rh-cta-contact { padding: 60px 0 !important; }

    /* Advantage section */
    .rh-advantage-title { font-size: 1.5rem !important; }
    .rh-adv-num { font-size: 36px; }
}

/* ── Extra small: 320px – 390px ─────────────────────────────────── */
@media (max-width: 390px) {
    .rh-hero-title        { font-size: 1.5rem !important; }
    .rh-hero-desc         { font-size: 0.9rem !important; }
    .rh-hero-container    { padding-top: 30px; padding-bottom: 72px; }
    .rh-hero-stat-icon    { width: 30px; height: 30px; min-width: 30px; }
    .rh-hero-stat-icon i  { font-size: 13px; }
    .rh-hero-stat-text strong { font-size: 10px; }
    .rh-svc-card          { padding: 22px 14px 18px; }
    .rh-team-card         { padding: 22px 14px 14px; }
    .rh-team-avatar       { width: 58px; height: 58px; font-size: 17px; }
    .rh-achieve-num .counter { font-size: 28px; }
    .rh-achieve-prefix,
    .rh-achieve-suffix    { font-size: 15px; }
    .rh-achieve-item      { padding: 20px 8px; }
    .rh-achieve-item p    { font-size: 10px; letter-spacing: 0; }
    .container            { padding-left: 12px !important; padding-right: 12px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE — ALL NEW COMPONENTS
   Covers every section built after the initial responsive block above.
   Breakpoints: 1199 / 991 / 767 / 575 / 390
   ═══════════════════════════════════════════════════════════════════ */

/* ── 992px – 1199px  (small desktop / large tablet landscape) ──── */
@media (max-width: 1199px) {
    /* Advantage metrics — stay 4-up but tighter */
    .rh-adv-card { padding: 28px 20px; }
    .rh-adv-num  { font-size: 36px; }

    /* Inner hero */
    .rh-inner-hero-title { font-size: 42px; }

    /* Track record */
    .rh-track-title { font-size: 34px; }
    .rh-portfolio-chart { padding: 24px 22px; }

    /* About infographic */
    .rh-about-infographic { padding: 24px; min-height: auto; }
    .rh-aig-metric-num { font-size: 28px; }
}

/* ── 768px – 991px  (tablet portrait) ──────────────────────────── */
@media (max-width: 991px) {

    /* ─ Global ─ */
    .container { padding-left: 20px !important; padding-right: 20px !important; }
    .rh-section { padding: 70px 0 56px !important; }

    /* ─ Inner hero ─ */
    .rh-inner-hero { padding: 120px 0 50px; }
    .rh-inner-hero-title { font-size: 36px; }

    /* ─ About infographic ─ */
    .rh-about-infographic { min-height: auto; gap: 18px; }
    .rh-aig-metrics { grid-template-columns: repeat(2, 1fr); }
    .rh-aig-metric-num { font-size: 26px; }
    .rh-aig-services { grid-template-columns: repeat(3, 1fr); }
    .rh-aig-zone-name { min-width: 88px; font-size: 10.5px; }

    /* ─ Advantage section ─ */
    .rh-advantage-title { font-size: 30px; }
    .rh-adv-card { padding: 24px 18px; }
    .rh-adv-num  { font-size: 32px; }
    .rh-adv-feature { padding: 18px; gap: 14px; }

    /* ─ Coverage header ─ */
    .rh-coverage-header { flex-wrap: wrap; gap: 14px; padding: 18px 20px; }
    .rh-coverage-num { font-size: 44px; }
    .rh-coverage-zones-label { border-left: none; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 12px; width: 100%; }

    /* ─ Zone pills ─ */
    .rh-zones-showcase { grid-template-columns: repeat(2, 1fr); }

    /* ─ Sector infographic ─ */
    .rh-sector-infographic-grid { grid-template-columns: repeat(4, 1fr); }

    /* ─ New team cards ─ */
    .rh-tm-card { margin-bottom: 4px; }
    .rh-tm-header { padding: 24px 20px 20px; }
    .rh-tm-name { font-size: 16px; }
    .rh-team-stats-strip { border-radius: 12px; }
    .rh-tss-item { padding: 18px 16px; }
    .rh-tss-num { font-size: 26px; }

    /* ─ Services detail cards ─ */
    .rh-svc-detail-card { padding: 28px 24px; }

    /* ─ Project detail cards ─ */
    .rh-project-detail-card h4 { font-size: 16px; }

    /* ─ Track record ─ */
    .rh-track-section { padding: 80px 0 60px; }
    .rh-track-title { font-size: 30px; }
    .rh-portfolio-chart { padding: 22px 18px; }
    .rh-bar-client { max-width: 45%; font-size: 12px; }
    .rh-bar-tag { display: none; }
    .rh-track-metric { padding: 24px 16px; min-width: 120px; }
    .rh-track-metric-num { font-size: 28px; }
    .rh-track-metric-divider { height: 60px; }

    /* ─ Contact reach cards ─ */
    .rh-reach-card { padding: 24px 20px; gap: 16px; }
    .rh-reach-icon { width: 54px; height: 54px; min-width: 54px; }
    .rh-reach-body h4 { font-size: 18px; }

    /* ─ Footer ─ */
    .rh-site-footer .col-lg-2,
    .rh-site-footer .col-lg-3,
    .rh-site-footer .col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .rh-footer-col { padding-left: 0 !important; }

    /* ─ CTA band ─ */
    .rh-cta-band { padding: 60px 0 !important; }
    .rh-cta-band .row { text-align: center !important; }
    .rh-cta-band .col-lg-4 { margin-top: 24px !important; text-align: center !important; }
    .rh-cta-title { font-size: 28px !important; }

    /* ─ Sectors section ─ */
    #sectors .col-lg-5,
    #sectors .col-lg-7 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ── 576px – 767px  (large phones / small tablet portrait) ─────── */
@media (max-width: 767px) {

    /* ─ Global ─ */
    .container { padding-left: 16px !important; padding-right: 16px !important; }
    .rh-section { padding: 56px 0 44px !important; }
    h2 { font-size: 1.65rem !important; }

    /* ─ Inner hero ─ */
    .rh-inner-hero { padding: 110px 0 44px; }
    .rh-inner-hero-title { font-size: 28px !important; }

    /* ─ About infographic ─ */
    .rh-about-infographic { padding: 18px; gap: 14px; }
    .rh-aig-topbar { flex-wrap: wrap; gap: 10px; }
    .rh-aig-metrics { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .rh-aig-metric { padding: 14px 10px; }
    .rh-aig-metric-num { font-size: 24px; }
    .rh-aig-services { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .rh-aig-zone-name { min-width: 76px; font-size: 10px; }
    .rh-aig-zone-count { min-width: 28px; font-size: 10px; }

    /* ─ Advantage section ─ */
    .rh-advantage-section { padding: 60px 0 50px; }
    .rh-advantage-title { font-size: 26px !important; }
    /* Advantage cards — 2×2 */
    .rh-advantage-section .col-lg-3 { flex: 0 0 50% !important; max-width: 50% !important; }
    .rh-adv-card { padding: 20px 14px; }
    .rh-adv-num { font-size: 28px; }
    .rh-adv-label { font-size: 13px; }
    .rh-adv-desc { font-size: 12px; }
    /* Feature cards stack */
    .rh-advantage-section .col-lg-4 { flex: 0 0 100% !important; max-width: 100% !important; }
    .rh-adv-feature { padding: 16px; }

    /* ─ Coverage header ─ */
    .rh-coverage-header { flex-direction: column; align-items: flex-start; }
    .rh-coverage-num { font-size: 40px; }
    .rh-coverage-text strong { font-size: 14px; }

    /* ─ Zone pills ─ */
    .rh-zones-showcase { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .rh-zone-pill { padding: 9px 11px; gap: 8px; }
    .rh-zone-pill-body strong { font-size: 10.5px; }
    .rh-zone-pill-body span { font-size: 9.5px; }

    /* ─ Sector infographic ─ */
    .rh-sector-infographic-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .rh-sector-icard { padding: 12px 6px 10px; }
    .rh-sector-icard-icon { width: 36px; height: 36px; }
    .rh-sector-icard-icon i { font-size: 16px; }
    .rh-sector-icard span { font-size: 9px; }

    /* ─ New team cards — stack to 1 column ─ */
    .rh-tm-card-wrap,
    .col-lg-6.col-md-6 { flex: 0 0 100% !important; max-width: 100% !important; }
    .rh-tm-header { padding: 20px 18px 16px; }
    .rh-tm-avatar-ring { width: 60px; height: 60px; min-width: 60px; }
    .rh-tm-avatar-lg { font-size: 18px; }
    .rh-tm-name { font-size: 16px; }
    .rh-tm-body { padding: 18px 20px 20px; }
    .rh-tm-tags span { font-size: 10.5px; padding: 3px 10px; }

    /* Team stats strip */
    .rh-team-stats-strip { flex-wrap: wrap; }
    .rh-tss-item { flex: 0 0 50%; padding: 16px 12px; }
    .rh-tss-divider { display: none; }
    .rh-tss-num { font-size: 24px; }

    /* ─ Services detail cards ─ */
    .rh-svc-detail-card { padding: 22px 18px; margin-bottom: 16px; }
    .rh-svc-detail-card h3 { font-size: 18px; }

    /* ─ Projects grid ─ */
    .rh-project-detail-card { padding: 22px 18px; }

    /* ─ Track record ─ */
    .rh-track-section { padding: 60px 0 50px; }
    .rh-track-title { font-size: 26px !important; }
    .rh-portfolio-chart { padding: 18px 14px; }
    .rh-portfolio-chart-header { flex-direction: column; gap: 12px; }
    .rh-portfolio-total-badge { align-self: flex-start; }
    .rh-bar-item { gap: 4px; }
    .rh-bar-value { font-size: 11px; min-width: 58px; }
    .rh-track-metrics { flex-wrap: wrap; }
    .rh-track-metric { flex: 0 0 50%; min-width: 0; padding: 18px 12px; }
    .rh-track-metric-divider { display: none; }
    .rh-track-metric-num { font-size: 24px; }
    .rh-mini-contract { padding: 12px 14px; gap: 10px; }
    .rh-mini-icon { width: 34px; height: 34px; min-width: 34px; }
    .rh-mini-client { font-size: 12px; }
    .rh-mini-desc { display: none; }
    .rh-mini-value { font-size: 13px; }
    .rh-contract-amount { font-size: 24px; }

    /* ─ Contact reach cards ─ */
    .rh-reach-card { padding: 20px 16px; gap: 14px; }
    .rh-reach-body h4 { font-size: 16px; }
    .rh-reach-body p { font-size: 13px; }
    .rh-reach-arrow { display: none; }
    .rh-contact-info-card-lg { padding: 14px 16px; gap: 12px; }
    .rh-cic-value { font-size: 13.5px; }

    /* ─ Contact CTA section ─ */
    .rh-contact-info-row { flex-direction: column; align-items: stretch; }
    .rh-cic { max-width: 100%; }
    .rh-cta-profile-btn { width: 100%; max-width: 100%; justify-content: center; }

    /* ─ Footer ─ */
    .rh-site-footer .col-lg-2,
    .rh-site-footer .col-lg-3,
    .rh-site-footer .col-lg-4 { flex: 0 0 100% !important; max-width: 100% !important; }
    .rh-footer-col { padding-left: 0 !important; }
    .rh-footer-blurb { max-width: 100%; }

    /* ─ CTA contact section ─ */
    .rh-cta-contact { padding: 70px 0 !important; }
    .rh-cta-contact-title { font-size: 2rem !important; }
    .rh-contact-info-row { margin: 24px 0 24px; }
    .rh-cta-contact-actions { flex-direction: column; align-items: center; gap: 12px; }
    .rh-cta-primary-btn.default-btn,
    .rh-cta-call-btn,
    .rh-cta-profile-btn { width: 100% !important; max-width: 340px !important; justify-content: center !important; }

    /* ─ WhatsApp / back-to-top ─ */
    .rh-whatsapp-btn { bottom: 80px !important; right: 14px !important; width: 46px !important; height: 46px !important; }
    #back-to-top { right: 14px !important; bottom: 28px !important; }
}

/* ── < 576px  (phones) ──────────────────────────────────────────── */
@media (max-width: 575px) {

    /* ─ Global ─ */
    .container { padding-left: 14px !important; padding-right: 14px !important; }
    .rh-section { padding: 48px 0 36px !important; }
    h2 { font-size: 1.45rem !important; }
    .rh-section-badge { font-size: 11px; padding: 4px 14px; }

    /* ─ Top header ─ */
    .rh-top-header { display: none !important; }
    .navbar { padding: 8px 14px !important; }
    .navbar-brand img { height: 42px !important; min-width: 80px !important; }

    /* ─ Inner hero ─ */
    .rh-inner-hero { padding: 100px 0 38px; }
    .rh-inner-hero-title { font-size: 24px !important; }
    .rh-breadcrumb { font-size: 12px; }

    /* ─ Hero ─ */
    .rh-hero-title { font-size: 1.6rem !important; }
    .rh-hero-desc { font-size: 0.95rem !important; }
    .rh-hero-actions { gap: 10px; }
    .rh-hero-actions a,
    .rh-hero-actions button { width: 100% !important; max-width: 300px !important; justify-content: center !important; }

    /* ─ About infographic ─ */
    .rh-aig-metrics { grid-template-columns: repeat(2, 1fr); }
    .rh-aig-metric-num { font-size: 22px; }
    .rh-aig-services { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .rh-aig-svc { padding: 10px 6px; }
    .rh-aig-svc i { font-size: 18px; }
    .rh-aig-svc span { font-size: 8.5px; }
    .rh-aig-zones { gap: 6px; }
    .rh-aig-zone-name { min-width: 70px; font-size: 9.5px; }

    /* ─ Advantage section ─ */
    .rh-advantage-section .col-lg-3 { flex: 0 0 50% !important; max-width: 50% !important; }
    .rh-adv-card { padding: 18px 12px; border-radius: 14px; }
    .rh-adv-num { font-size: 26px; }
    .rh-adv-icon-wrap { width: 54px; height: 54px; }
    .rh-adv-icon { font-size: 24px; }

    /* ─ Coverage ─ */
    .rh-coverage-num { font-size: 36px; }

    /* ─ Zone pills ─ */
    .rh-zones-showcase { grid-template-columns: 1fr 1fr; gap: 6px; }
    .rh-zone-pill { padding: 8px 10px; }

    /* ─ Sector grid ─ */
    .rh-sector-infographic-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }

    /* ─ Team stats strip ─ */
    .rh-tss-item { flex: 0 0 50%; padding: 14px 8px; }
    .rh-tss-num { font-size: 22px; }
    .rh-tss-lbl { font-size: 9px; }

    /* ─ New team cards ─ */
    .rh-tm-header { padding: 16px 14px 14px; }
    .rh-tm-avatar-ring { width: 52px; height: 52px; min-width: 52px; }
    .rh-tm-name { font-size: 14px; }
    .rh-tm-role { font-size: 12px; }
    .rh-tm-body { padding: 14px 16px 16px; }
    .rh-tm-tags { gap: 5px; }
    .rh-tm-tags span { font-size: 9.5px; padding: 3px 8px; }
    .rh-tm-desc { font-size: 12.5px; }
    .rh-tm-exp-badge, .rh-tm-cert-badge { font-size: 9.5px; padding: 3px 9px; }

    /* ─ Services detail ─ */
    .rh-svc-detail-card { padding: 18px 14px; }
    .rh-svc-detail-card h3 { font-size: 16px; }
    .rh-svc-detail-card p { font-size: 13.5px; }
    .rh-svc-detail-card ul li { font-size: 13px; }
    .rh-svc-detail-icon { width: 50px; height: 50px; border-radius: 12px; }
    .rh-svc-detail-icon i { font-size: 22px; }

    /* ─ Project cards ─ */
    .rh-project-detail-card { padding: 18px 14px; }
    .rh-project-detail-card h4 { font-size: 15px; }
    .rh-pd-scope { font-size: 13px; }

    /* ─ Track record ─ */
    .rh-track-metric { flex: 0 0 50%; }
    .rh-portfolio-chart { padding: 14px 12px; border-radius: 14px; }
    .rh-portfolio-chart-title { font-size: 13px; }
    .rh-portfolio-total-num { font-size: 20px; }
    .rh-bar-client { font-size: 11px; }

    /* ─ Contract cards ─ */
    .rh-contract-card { padding: 20px 16px 18px; border-radius: 14px; }
    .rh-contract-amount { font-size: 22px; }
    .rh-contract-client { font-size: 14px; }
    .rh-contract-desc { font-size: 12.5px; }

    /* ─ Contact reach cards ─ */
    .rh-reach-card { padding: 18px 14px; gap: 12px; border-radius: 14px; }
    .rh-reach-icon { width: 46px; height: 46px; min-width: 46px; border-radius: 12px; }
    .rh-reach-icon i { font-size: 22px; }
    .rh-reach-body h4 { font-size: 15px; }
    .rh-reach-body p { font-size: 12.5px; margin-bottom: 8px; }
    .rh-reach-address { font-size: 12px; }
    .rh-contact-info-card-lg { padding: 12px 14px; gap: 10px; }
    .rh-map-placeholder { padding: 28px 16px; }
    .rh-reach-note { font-size: 12.5px; padding: 12px 14px; }

    /* ─ CTA contact ─ */
    .rh-cta-contact-title { font-size: 1.7rem !important; }
    .rh-cic-value { font-size: 13px; }

    /* ─ Stats sections ─ */
    .rh-stat-number .counter { font-size: 38px; }

    /* ─ Footer ─ */
    .rh-footer-top { padding: 48px 0 36px; }
    .rh-footer-bottom { padding: 14px 0; }
    .rh-footer-copy, .rh-footer-legal { font-size: 12px; }
    .rh-footer-legal { text-align: center !important; }
    .rh-footer-bottom .col-lg-6 { flex: 0 0 100% !important; max-width: 100% !important; text-align: center !important; }

    /* ─ WhatsApp ─ */
    .rh-whatsapp-btn { bottom: 76px !important; right: 10px !important; width: 44px !important; height: 44px !important; }
}

/* ── < 390px  (very small phones: iPhone SE, Galaxy A03) ─────── */
@media (max-width: 390px) {

    .rh-inner-hero-title { font-size: 20px !important; }
    .rh-hero-title { font-size: 1.4rem !important; }

    /* Advantage 1-column on tiny screens */
    .rh-advantage-section .col-lg-3 { flex: 0 0 100% !important; max-width: 100% !important; }
    .rh-adv-card { padding: 16px 12px; }

    /* Infographic: single column metrics */
    .rh-aig-metrics { grid-template-columns: 1fr 1fr; }
    .rh-aig-services { grid-template-columns: repeat(2, 1fr); }

    /* Team stats single row */
    .rh-tss-item { flex: 0 0 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }

    /* Sector single column */
    .rh-sector-infographic-grid { grid-template-columns: repeat(2, 1fr); }

    /* Track metrics full width */
    .rh-track-metric { flex: 0 0 100%; border-bottom: 1px solid rgba(255,255,255,0.08); }

    /* Tiny padding */
    .container { padding-left: 10px !important; padding-right: 10px !important; }
    .rh-portfolio-chart, .rh-about-infographic { padding: 12px 10px; }
    .rh-reach-card { padding: 14px 12px; }
    .rh-contract-card { padding: 16px 12px; }
}