/*** =========================================================
     Prime Enterprises — classic theme & components
     Classic look: white base + grey structure + orange accent
     Fonts: Space Grotesk (headings) + Inter (body)
     Palette:
       White base     : #FFFFFF
       Navy blue      : #003B6F (logo shield / text)
       Navy dark      : #002E57
       Accent blue    : #006FAE (logo water drop)
       Orange         : #F28C00 (logo shield right)
       Orange deep    : #D96800 (logo gradient)
       Grey-white bg  : #F2F3F5 (original template)
       Soft grey      : #F2F3F5
    ========================================================= ***/

:root {
    --bs-primary: #003B6F;
    --bs-secondary: #F28C00;
    --prime-deep: #003B6F;
    --prime-darker: #003B6F;
    --prime-darkest: #002E57;
    --prime-accent: #F28C00;
    --prime-accent-dark: #D96800;
    --prime-accent-text: #D96800;
    --prime-tint: #F2F3F5;
    --prime-light: #F2F3F5;
    --prime-ink: #003B6F;
    --prime-blue: #006FAE;
}

/*** Bootstrap color overrides ***/
.bg-primary { background-color: var(--prime-deep) !important; }
.text-primary { color: var(--prime-darker) !important; }
.bg-secondary { background-color: var(--prime-accent) !important; }
.text-secondary { color: var(--prime-accent-text) !important; }
.bg-light { background-color: var(--prime-light) !important; }
.border-secondary { border-color: var(--prime-accent) !important; }

.btn { border-radius: 8px; }

/* Teal button */
.btn-primary,
.btn.btn-primary {
    color: #fff;
    background-color: var(--prime-deep);
    border-color: var(--prime-deep);
    box-shadow: 0 8px 20px rgba(0, 59, 111, .25);
}
.btn-primary:hover,
.btn.btn-primary:hover {
    color: var(--prime-darker);
    background: var(--prime-accent);
    border-color: var(--prime-accent);
    box-shadow: 0 8px 20px rgba(242, 140, 0, .3);
}
/* Amber button — dark text for contrast */
.btn-secondary,
.btn.btn-secondary {
    color: #fff !important;
    font-weight: 700;
    background-color: var(--prime-accent);
    border-color: var(--prime-accent);
    box-shadow: 0 8px 20px rgba(242, 140, 0, .3);
}
.btn-secondary:hover,
.btn.btn-secondary:hover {
    color: #fff !important;
    background: var(--prime-deep);
    border-color: var(--prime-deep);
    box-shadow: 0 8px 20px rgba(0, 59, 111, .25);
}
.btn-secondary i.text-white { color: inherit !important; }

/* Reserve the vertical scrollbar's width permanently, instead of letting
   the browser add/remove it as page height changes (images finishing
   loading, scroll-reveal animations expanding the page, a taller vs.
   shorter page — the home page especially, being the longest/most dynamic
   page on the site). Every time that scrollbar toggles, every full-width
   element — the sticky navbar included — gets a few pixels narrower or
   wider, which reads as the nav "randomly" shrinking. Windows' classic
   scrollbars (unlike Mac's overlay ones) take up real layout space, so
   this is far more visible there. `scrollbar-gutter` is the modern fix;
   `overflow-y: scroll` is the fallback for browsers without it. */
html {
    overflow-y: scroll;
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

/* Never let the page get wider than the screen. The "slide in from the
   side" reveal animations (fadeInLeft / fadeInRight — About section on the
   home page, plus about.html and contact.html) start each element a full
   screen-width off to the left/right. While they play, the page is briefly
   wider than the phone (412px -> 824px on a OnePlus 10T), so mobile Chrome
   zooms the whole page out and back in — the "width shrinks and grows while
   scrolling" effect. `clip` (not `hidden`) is deliberate: `hidden` would turn
   <body> into a scroll container and silently break the sticky navbar. */
body {
    overflow-x: clip;
}

/*** Typography: Space Grotesk headings, Inter body ***/
body {
    font-family: "Inter", "Roboto", sans-serif !important;
    color: #7d7d7d;
}
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: "Space Grotesk", "Inter", sans-serif !important;
    letter-spacing: -.02em;
    color: var(--prime-darker);
}

/*** Navbar: clean white bar, deep teal links, teal active pill,
     amber Get-A-Quote button ***/
.navbar.bg-primary {
    background-color: #fff !important;
    box-shadow: 0 2px 20px rgba(0, 59, 111, .08);
}
/* The navbar markup is injected into #site-header by js/partials.js. Left as
   a normal block, that wrapper's box is exactly as tall as the navbar
   itself, which gives position:sticky no room to "float" while the page
   scrolls, so the bar just scrolls away instead of staying put. display:
   contents drops the wrapper from layout (its children act as if they were
   direct children of <body>) so the sticky navbar sticks to the top of the
   whole page as intended. */
#site-header { display: contents; }
.navbar-brand h1 {
    font-size: clamp(1.3rem, 3.5vw, 2.1rem);
    font-weight: 700;
    color: var(--prime-darker) !important;
}
.navbar-brand h1 i { color: var(--prime-deep) !important; }
.navbar-brand span {
    font-size: 2.75rem;
    font-weight: 700;
}
.navbar-brand img.brand-logo {
    height: 88px;
    width: auto;
    object-fit: contain;
}
@media (max-width: 576px) {
    .navbar-brand img.brand-logo { height: 70px; }
}
/* Trim navbar padding so the bigger logo doesn't make the bar too tall */
.navbar.bg-primary.py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.navbar.bg-primary .navbar-nav .nav-item.nav-link,
.navbar.bg-primary .navbar-nav .nav-link {
    color: var(--prime-darker);
    padding: 12px 18px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 500;
    border-radius: 8px;
    white-space: nowrap; /* nav labels must never wrap to a second line */
}
/* Kill the template's corner-border hover effect */
.navbar .navbar-nav .nav-item::before,
.navbar .navbar-nav .nav-item::after {
    display: none !important;
}
.navbar.bg-primary .navbar-nav .nav-link:hover {
    background: var(--prime-accent);
    color: #fff !important;
}
.navbar.bg-primary .navbar-nav .nav-link.active {
    background: var(--prime-deep);
    color: #fff !important;
}
.navbar .navbar-toggler {
    background: var(--prime-deep);
    color: #fff;
}

/*** Breadcrumb header: deep teal overlay ***/
.bg-breadcrumb {
    background: linear-gradient(rgba(0, 59, 111, 0.86), rgba(0, 59, 111, 0.78)), url(../img/banner-2.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 60px 0;
}

/*** Carousel: teal overlay, amber eyebrow ***/
.carousel .carousel-inner .carousel-item::after {
    background: linear-gradient(rgba(0, 59, 111, .82), rgba(0, 59, 111, .45)) !important;
}
.carousel .carousel-caption .text-uppercase {
    color: var(--prime-accent) !important;
    letter-spacing: 4px;
    font-weight: 600;
    font-family: "Space Grotesk", sans-serif;
}
.carousel .carousel-caption h1 { color: #fff !important; }
/* =========================================================
   HERO CAROUSEL INDICATORS
   Clean circular dots
   ========================================================= */

.carousel .carousel-indicators li {
    width: 9px !important;
    height: 9px !important;
    margin: 0 6px !important;
    border: 2px solid rgba(242, 140, 0, 0.85) !important;
    border-radius: 50% !important;
    background: transparent !important;
    opacity: 1 !important;
    transition: all 0.25s ease !important;
}

/* Active slide */
.carousel .carousel-indicators li.active {
    width: 11px !important;
    height: 11px !important;
    background: #F28C00 !important;
    border: 2px solid #fff !important;
    box-shadow: 0 0 0 2px rgba(242, 140, 0, 0.75) !important;
    transform: scale(1.05);
}
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon {
    background: rgba(0, 59, 111, .6) !important;
}
.carousel .carousel-control-prev-icon:hover,
.carousel .carousel-control-next-icon:hover {
    background: var(--prime-accent) !important;
    color: var(--prime-darker) !important;
}

/*** Mobile: hero CTA buttons were overflowing the viewport
     (two flex-shrink-0 buttons side by side don't fit on phones) ***/
@media (max-width: 576px) {
    .carousel-caption .d-flex.justify-content-center {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .carousel-caption .btn {
        flex-shrink: 1 !important;
        margin: 0 6px !important;
        padding: 12px 22px !important;
        font-size: .85rem;
        white-space: nowrap;
    }
}

/*** Mobile: shrink the fixed back-to-top button so it doesn't
     sit as a large block over content on small screens ***/
@media (max-width: 576px) {
    .back-to-top.btn-lg-square {
        width: 42px !important;
        height: 42px !important;
        right: 16px;
        bottom: 16px;
        font-size: .85rem;
    }
}

/*** Ticker / marquee strip: amber with dark text ***/
.ticker {
    background: linear-gradient(90deg, #F28C00 0%, #F7A733 100%);
    overflow: hidden;
    white-space: nowrap;
    padding: 14px 0;
}
.ticker .ticker-track {
    display: inline-block;
    animation: prime-ticker 30s linear infinite;
}
.ticker span {
    display: inline-block;
    color: #FFFFFF;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 0 18px;
}
.ticker i { margin-right: 14px; }
@keyframes prime-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/*** Stats strip: deep teal, amber numbers ***/
.stats {
    background: linear-gradient(135deg, var(--prime-darkest) 0%, #003B6F 100%);
}
.stats .stats-item h2 {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    color: var(--prime-accent) !important;
}

/*** Why choose us / feature cards ***/
.feature .feature-item {
    background: #fff;
    border: 1px solid rgba(0, 59, 111, .22) !important;
    border-radius: 16px;
    transition: .5s;
    box-shadow: 0 8px 22px rgba(0, 59, 111, .14);
}
.feature .feature-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 59, 111, .14);
}
.feature .feature-item .feature-img {
    background: var(--prime-tint) !important;
    border-radius: 14px;
    transition: .5s;
}
.feature .feature-item .feature-img i {
    color: var(--prime-deep) !important;
    transition: .5s;
}
.feature .feature-item:hover .feature-img {
    background: var(--prime-deep) !important;
}
.feature .feature-item:hover .feature-img i {
    color: #fff !important;
}
.feature .feature-item a.h4 { color: var(--prime-darker); }
.feature .feature-item a.h4:hover { color: var(--prime-deep) !important; }

/*** Rating badge ***/
.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--prime-tint);
    border: 1px solid rgba(0, 59, 111, .22);
    border-left: 4px solid var(--prime-accent);
    border-radius: 0 10px 10px 0;
    padding: 12px 20px;
    margin-bottom: 24px;
}
.rating-badge .stars { color: #F28C00; letter-spacing: 2px; }
.rating-badge p { margin: 0; font-weight: 600; color: var(--prime-darker); }

/*** ============================================================
     SERVICE CARDS — redesigned: clean card, image on top,
     floating amber icon badge, title, text & button always
     visible. Old hover-overlay & sliding title bar removed.
    ============================================================ ***/
.service .service-item {
    background: #fff;
    border: 1px solid rgba(0, 59, 111, .22);
    border-radius: 16px;
    overflow: hidden;
    transition: .5s;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 8px 22px rgba(0, 59, 111, .14);
}
.service .service-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(0, 59, 111, .16);
    border-color: transparent;
}
/* kill old dark hover overlay */
.service .service-item::after { display: none !important; }
/* kill old sliding bottom title bar */
.service .service-item .service-title { display: none !important; }
/* content: no longer an invisible hover overlay — always visible */
.service .service-item .service-content {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    background: #fff;
}
/* floating icon badge: pulled up over the photo */
.service .service-item .service-content .btn-xl-square {
    width: 72px !important;
    height: 72px !important;
    border-radius: 18px;
    background: var(--prime-accent) !important;
    margin-top: -56px;
    position: relative;
    z-index: 3;
    box-shadow: 0 10px 24px rgba(0, 59, 111, .18);
    border: 4px solid #fff;
}
.service .service-item .service-content .btn-xl-square i {
    font-size: 1.7rem !important;
    color: #fff !important;
}
.service .service-item .service-content a.fs-4 {
    color: var(--prime-darker);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    transition: .3s;
}
.service .service-item .service-content a.fs-4:hover { color: var(--prime-deep); }
.service .service-item .service-content p,
.service .service-item .service-content p.text-white {
    color: #7d7d7d !important;
    font-size: .95rem;
}
/* product photo area */
.service .service-item .service-img {
    background: var(--prime-light);
    border-bottom: 3px solid var(--prime-tint);
}
.service .service-item .service-img img {
    height: 300px;
    object-fit: contain;
    background: transparent;
    padding: 22px 18px 30px;
    transition: .5s;
}
.service .service-item:hover .service-img img { transform: scale(1.06); }

/*** How it works / process steps ***/
.process .process-item {
    position: relative;
    background: #fff;
    border: 1px solid rgba(0, 59, 111, .22);
    border-radius: 16px;
    padding: 48px 32px 40px;
    height: 100%;
    transition: .5s;
    box-shadow: 0 8px 22px rgba(0, 59, 111, .16);
}
.process .process-item:hover {
    box-shadow: 0 20px 45px rgba(0, 59, 111, .14);
    transform: translateY(-6px);
}
.process .process-item .step-num {
    font-family: "Space Grotesk", sans-serif;
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--prime-accent);
    margin-bottom: 20px;
}
.process .process-item .step-icon {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--prime-deep) 0%, var(--prime-darker) 100%);
    color: #fff;
    font-size: 1.6rem;
    border-radius: 12px;
    margin-bottom: 24px;
}

/*** CTA band ***/
.cta-band {
    background: linear-gradient(rgba(0, 59, 111, .92), rgba(0, 111, 174, .82)), url(../img/banner-3.png);
    background-position: center center;
    background-size: cover;
}
.cta-band h2 { color: #fff !important; }
.cta-band p { color: rgba(255, 255, 255, .8); }

/*** Testimonials ***/
.testimonial .testimonial-item {
    background: #fff;
    border: 1px solid rgba(0, 59, 111, .22);
    border-bottom: 4px solid var(--prime-accent);
    border-radius: 16px 16px 0 0;
    padding: 40px 32px;
    height: 100%;
    transition: .5s;
    box-shadow: 0 8px 22px rgba(0, 59, 111, .14);
}
.testimonial .testimonial-item:hover {
    box-shadow: 0 20px 45px rgba(0, 59, 111, .12);
}
.testimonial .testimonial-item .quote-icon {
    font-size: 2rem;
    color: var(--prime-deep);
    margin-bottom: 16px;
}
.testimonial .testimonial-item .stars {
    color: #F28C00;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

/*** Client badges strip ***/
.client-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid rgba(0, 59, 111, .16);
    border-radius: 100px;
    color: var(--prime-darker);
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    padding: 14px 28px;
    margin: 6px;
}

/*** Product list card (products & services page) ***/
.product-list-card {
    background: #fff;
    border: 1px solid rgba(0, 59, 111, .22);
    border-top: 4px solid var(--prime-accent);
    border-radius: 0 0 16px 16px;
    padding: 32px 28px;
    height: 100%;
}
.product-list-card h4 { color: var(--prime-darker); margin-bottom: 18px; }
.product-list-card ul { list-style: none; margin: 0; padding: 0; }
.product-list-card ul li {
    padding: 7px 0;
    border-bottom: 1px dashed rgba(0, 59, 111, .12);
    color: #7d7d7d;
}
.product-list-card ul li:last-child { border-bottom: none; }
.product-list-card ul li i { color: var(--prime-deep); margin-right: 8px; }

/*** Machine gallery (products & services page) ***/
.machine-gallery .machine-card {
    background: #fff;
    border: 1px solid rgba(0, 59, 111, .22);
    border-radius: 16px;
    overflow: hidden;
    height: 100%;
    transition: .5s;
    box-shadow: 0 6px 18px rgba(0, 59, 111, .14);
}
.machine-gallery .machine-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(0, 59, 111, .14);
}
.machine-gallery .machine-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    background: var(--prime-light);
    border-bottom: 3px solid var(--prime-tint);
    padding: 14px;
    transition: .5s;
}
.machine-gallery .machine-card:hover img { transform: scale(1.05); }
.machine-gallery .machine-card .machine-name {
    padding: 18px 16px 22px;
    text-align: center;
}
.machine-gallery .machine-card .machine-name p {
    letter-spacing: 2px;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: .75rem;
}
.machine-gallery .machine-card .machine-name h6 {
    color: var(--prime-darker);
    line-height: 1.4;
}

/*** Footer: deep teal, clearly readable text ***/
.footer {
    background: linear-gradient(rgba(0, 59, 111, 0.96), rgba(0, 22, 43, 0.98)), url(../img/banner-4.png) !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.footer .footer-item h4 {
    line-height: 1.3;
    color: #fff !important;
    font-family: "Space Grotesk", sans-serif !important;
}
.footer .footer-item p,
.footer .footer-item a {
    color: rgba(255, 255, 255, .78) !important;
    font-family: "Inter", sans-serif;
}
/* The email address is one long unbreakable word. Now that the Contact
   Info column is wider (col-xl-4) it reads at the same normal size as the
   rest of the footer text; this only adds a safety net so it wraps onto a
   second line instead of overflowing if the column is ever narrow
   (e.g. very small phones), without shrinking the font. */
.footer .footer-item a[href^="mailto:"] {
    display: inline-block;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
    margin-bottom: 0.75rem;
}
.footer .footer-item a:hover {
    color: var(--prime-accent) !important;
    letter-spacing: .5px;
}
.footer .footer-item .footer-btn a { color: #fff !important; }
.footer .footer-item .footer-btn a i { color: #fff !important; }
.footer .footer-item .footer-btn a:hover { background: #fff; }
.footer .footer-item .footer-btn a:hover i { color: var(--prime-darker) !important; }
.footer input.form-control {
    border-radius: 8px;
    border: none;
}
.copyright { background: #001F3D !important; }
.copyright span, .copyright .text-body,
.copyright a { color: rgba(255, 255, 255, .75) !important; }
.copyright a:hover { color: var(--prime-accent) !important; }

/*** Contact form success alert ***/
#formSuccess { border-radius: 0; }

/*** Soft rounded corners on cards & imagery ***/
.blog .blog-item,
.feature .feature-item { border-radius: 16px; overflow: hidden; }

/*** Blog cards ***/
.blog .blog-item { background: #fff; border: 1px solid rgba(0, 59, 111, .2); box-shadow: 0 8px 22px rgba(0, 59, 111, .14); }
.blog .blog-item .blog-img img {
    height: 260px;
    object-fit: contain;
    background: var(--prime-light);
    padding: 14px;
}
.blog .blog-item .blog-content a.h4 { color: var(--prime-darker); }
.blog .blog-item .blog-content a.h4:hover { color: var(--prime-deep) !important; }

/*** About collage: remove missing bg texture, real photos instead ***/
.about .about-item-image { background-image: none !important; }

/*** About collage: the two offset photos use a fixed 250px stagger that
     only reads well at the wide desktop width the layout was designed
     for. Below that (tablets, small laptops, phones — anything under
     the "xl" breakpoint where this column goes full-width) shrink the
     offset in steps so it stays proportionate instead of leaving huge
     gaps or overlapping images. ***/
@media (max-width: 1199.98px) {
    .about .about-item-image .img-1 { margin-bottom: 80px; }
    .about .about-item-image .img-2 { margin-top: 80px; }
}
@media (max-width: 767.98px) {
    .about .about-item-image .img-1 { margin-bottom: 40px; }
    .about .about-item-image .img-2 { margin-top: 40px; }
}
@media (max-width: 575.98px) {
    .about .about-item-image { flex-wrap: wrap; }
    .about .about-item-image .img-1,
    .about .about-item-image .img-2 {
        width: 100% !important;
        margin: 0 0 16px 0 !important;
    }
    .about .about-item-image .about-item-image-content { display: none; }
}

/*** Make in India / Swachh Bharat badges ***/
.init-badges img {
    height: 64px;
    width: auto;
    margin-right: 22px;
    vertical-align: middle;
}

/*** Section eyebrow labels ***/
.text-uppercase.text-secondary.fs-5 {
    letter-spacing: 3px;
    font-weight: 600;
    font-family: "Space Grotesk", sans-serif;
}

/*** Safety net: if jQuery/CDN scripts fail to load (slow network, blocker,
     offline preview) the loading spinner would otherwise cover the page
     forever. This pure-CSS animation force-hides it after 2.5s regardless. ***/
@keyframes prime-force-hide-spinner {
    to { opacity: 0; visibility: hidden; }
}
#spinner {
    animation: prime-force-hide-spinner 0s ease-in 2.5s forwards;
}
/* =========================================================
   MOBILE NAVBAR FIX
   Logo + Company Name + Hamburger stay on first row
   Menu opens underneath
   ========================================================= */

/* Hamburger menu up to 1199px (navbar-expand-xl): the full menu only fits
   on one line from 1200px up. */
@media (max-width: 1199.98px) {

    .navbar.bg-primary {
        flex-wrap: wrap !important;
        align-items: center !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Logo + company name */
    .navbar.bg-primary .navbar-brand {
        display: flex !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        margin-right: 8px !important;
    }

    .navbar.bg-primary .navbar-brand img.brand-logo {
        height: 70px !important;
        width: auto !important;
        flex-shrink: 0 !important;
        margin-right: 8px !important;
    }

    .navbar.bg-primary .navbar-brand span {
        /* Scales with the phone's width: 25.6px on a 360px phone, ~28px on
           a 412px phone (e.g. OnePlus 10T), capped at ~30px on tablets — as
           big as fits beside the logo and menu button without truncating. */
        font-size: clamp(1.6rem, 6.8vw, 1.85rem) !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Hamburger stays beside company name */
    .navbar.bg-primary .navbar-toggler {
        display: block !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        padding: 8px 12px !important;
    }

    /* Mobile menu must occupy the NEXT ROW */
    .navbar.bg-primary .navbar-collapse {
        flex-basis: 100% !important;
        width: 100% !important;
        flex-grow: 1 !important;
    }

}

/* =========================================================
   MOBILE HERO — FINAL FIX
   Prevent buttons / indicators / text from overlapping
   ========================================================= */

@media (max-width: 576px) {

    /* Give the carousel enough vertical room */
    .carousel .carousel-inner .carousel-item {
        height: 650px !important;
    }

    .carousel .carousel-inner .carousel-item img {
        height: 650px !important;
        object-fit: cover !important;
    }

    /* Properly contain all hero content */
    .carousel .carousel-inner .carousel-item .carousel-caption {
        height: 100% !important;
        padding: 45px 22px 75px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }

    /* Small orange heading */
    .carousel .carousel-caption .text-uppercase {
        font-size: 17px !important;
        line-height: 1.35 !important;
        letter-spacing: 3px !important;
        margin-bottom: 10px !important;
    }

    /* Main heading — applies to BOTH h1 and h2 */
    .carousel .carousel-caption h1,
    .carousel .carousel-caption h2 {
        font-size: 34px !important;
        line-height: 1.15 !important;
        margin-bottom: 18px !important;
        text-align: center !important;
    }

    /* Description */
    .carousel .carousel-caption p.fs-5 {
        font-size: 16px !important;
        line-height: 1.45 !important;
        margin-bottom: 22px !important;
        text-align: center !important;
        max-width: 340px !important;
    }

    /* CTA container */
    .carousel .carousel-caption .d-flex.justify-content-center {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* CTA buttons */
    .carousel .carousel-caption .d-flex.justify-content-center .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 175px !important;
        margin: 0 !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Keep indicators below the buttons */
    .carousel .carousel-indicators {
        margin-bottom: 12px !important;
        z-index: 10 !important;
    }

    .carousel .carousel-indicators li {
        margin-right: 12px !important;
        width: 8px !important;
        height: 8px !important;
    }

    .carousel .carousel-indicators li:last-child {
        margin-right: 0 !important;
    }

    /* Smaller side arrows on mobile */
    .carousel .carousel-control-prev .carousel-control-prev-icon,
    .carousel .carousel-control-next .carousel-control-next-icon {
        padding: 15px 18px !important;
    }
}

/* Keep service card text colors unchanged on hover */

.service .service-item:hover .service-content a.fs-4 {
    color: var(--prime-darker) !important;
}

.service .service-item:hover .service-content a.fs-4:hover {
    color: var(--prime-deep) !important;
}

.service .service-item:hover .service-content p,
.service .service-item:hover .service-content p.text-white {
    color: #7d7d7d !important;
}

/* Blog article body (blog-post-1/2/3.html) */
.article-body {
    max-width: 800px;
    margin: 0 auto;
}

.article-body p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
}

.article-body h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.article-body h2:first-child {
    margin-top: 0;
}

.article-body ul {
    padding-left: 1.25rem;
}

.article-body ul li {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 0.5rem;
}

.article-body table {
    width: 100%;
    margin: 1.5rem 0;
}

.article-body table th,
.article-body table td {
    padding: 0.6rem 1rem;
    border: 1px solid rgba(0, 59, 111, .15);
}

.article-body table th {
    background: var(--prime-darker);
    color: #fff;
}

.article-meta {
    color: #888;
    font-size: 0.95rem;
}

.article-hero-img {
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.article-share {
    border-top: 1px solid rgba(0, 59, 111, .15);
    border-bottom: 1px solid rgba(0, 59, 111, .15);
    padding: 1.25rem 0;
    margin: 2rem 0;
}

/* =========================================================
   MOTION: smoother page loads, scroll reveals & hero slider
   ========================================================= */

/* Keep scroll-reveal blocks hidden until WOW.js takes over (class set by
   js/partials.js, removed by js/main.js — with a 4s safety timeout). Without
   this they rendered visible, vanished when WOW started, then animated back
   in: a visible flash on every page load. */
.wow-pending .wow {
    visibility: hidden;
}

/* Gentler reveal motion. The animate.css version bundled here moves an
   element by 100% of its OWN size: tall blocks on a phone slid up by as much
   as ~580px and the side-reveals travelled a full screen width, which reads
   as jumpy rather than polished. A short, consistent travel distance looks
   the same on every screen size. (These override the same-named keyframes in
   lib/animate — the last definition wins.) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 32px, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-40px, 0, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(40px, 0, 0); }
    to   { opacity: 1; transform: none; }
}
.wow.animated,
.carousel-caption .animated {
    animation-duration: .8s;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1); /* ease-out */
}

/* Phones & tablets: no stagger. The data-wow-delay values (0.1–0.6s) are
   meant for cards sitting side by side on desktop, revealing left to right.
   Once the cards stack in one column, each one scrolled into view sat as a
   blank gap for up to 0.6s before popping in. Reveal immediately, a bit
   quicker. (!important is needed to beat the inline delay WOW.js sets.) */
@media (max-width: 991.98px) {
    .wow {
        animation-delay: 0s !important;
        animation-duration: .6s !important;
    }
}

/* Respect the phone/computer "reduce motion" accessibility setting. */
@media (prefers-reduced-motion: reduce) {
    .wow,
    .animated {
        animation: none !important;
        visibility: visible !important;
    }
    .ticker .ticker-track {
        animation: none;
    }
}

/* =========================================================
   LAPTOP WIDTHS (1200–1399px): keep the whole menu on one line
   Logo + name + 6 links + "Get A Quote" need ~1350px at full size, so the
   Quote button used to be pushed off the right edge on most laptops.
   Below 1200px the hamburger menu takes over (navbar-expand-xl).
   ========================================================= */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar.bg-primary { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .navbar-brand img.brand-logo { height: 72px; }
    .navbar-brand span { font-size: clamp(1.6rem, 2.35vw, 2.1rem); }
    .navbar.bg-primary .navbar-nav .nav-link { padding: 10px 11px; }
    #navbarCollapse .btn.px-4 { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
}

/* =========================================================
   PHONE HERO: make every slide's text fit
   Bootstrap insets the caption 15% from each side, which left a ~250px
   column on phones: the 34px headline wrapped to 5 lines and slide 1's
   text overflowed the slide (top line / second button clipped). Use the
   full width, scale the type to the screen, and drop the side arrows
   (they sat on top of the text; phones swipe, and the dots remain).
   ========================================================= */
@media (max-width: 767.98px) {
    .carousel .carousel-inner .carousel-item .carousel-caption {
        left: 0 !important;
        right: 0 !important;
        padding: 36px 20px 70px !important;
    }
    .carousel .carousel-caption .text-uppercase {
        font-size: 13px !important;
        letter-spacing: 2.5px !important;
        margin-bottom: 8px !important;
    }
    .carousel .carousel-caption h1,
    .carousel .carousel-caption h2 {
        font-size: clamp(1.75rem, 7.6vw, 2.2rem) !important;
        line-height: 1.15 !important;
        margin-bottom: 14px !important;
    }
    .carousel .carousel-caption p.fs-5 {
        font-size: 15px !important;
        line-height: 1.5 !important;
        margin-bottom: 20px !important;
        max-width: 360px !important;
    }
    .carousel .carousel-control-prev,
    .carousel .carousel-control-next {
        display: none !important;
    }
}