/********** MAAT Systems overrides on top of GrowMark **********/
/* Deliberately minimal. GrowMark's own classes do the work; these cover the
   few places where MAAT's assets differ from the template's. */

/* GrowMark's topbar and mobile navbar use a text wordmark. MAAT has a real
   logo, and the topbar is brand blue, so the logo is flattened to white
   there; the mobile navbar is white, so it stays as-is. */
.topbar-logo {
    height: 34px;
    width: auto;
    filter: brightness(0) invert(1);
}

.navbar-logo {
    height: 34px;
    width: auto;
}

/* style.css points .page-header at ../img/carousel-1.jpg, which is not where
   the template images live here. Same treatment, MAAT's own photograph. */
.page-header {
    background: linear-gradient(rgba(28, 32, 53, .78), rgba(28, 32, 53, .78)),
        url(../maat/_MG_9700-1JPG.jpg) center center no-repeat !important;
    background-size: cover !important;
}

/* GrowMark's carousel scrim is rgba(0,0,0,.1) -- enough for its dark stock
   photography, but MAAT's hero shots are bright and busy, which left the
   headline illegible. Darken the side the copy actually sits on. */
#header-carousel .caption-left .carousel-caption {
    background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .15) 100%);
}

#header-carousel .caption-right .carousel-caption {
    background: linear-gradient(270deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .15) 100%);
}

@media (max-width: 768px) {
    #header-carousel .caption-left .carousel-caption,
    #header-carousel .caption-right .carousel-caption {
        background: rgba(0, 0, 0, .6);
    }
}

/* The template's About block holds a video play button. MAAT has no video,
   so a photograph fills that half instead. */
.about-photo {
    object-fit: cover;
    object-position: center 20%;
    height: 100%;
    min-height: 420px;
}

/* Client logos are supplied at mixed sizes and several have a near-white
   background rather than transparency. Greyscale unifies them on the
   template's bg-light tiles; colour returns on hover. */
.client-logo img {
    max-height: 70px;
    width: auto;
    filter: grayscale(1);
    opacity: .75;
    transition: .5s;
}

.client-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* WOW.js leaves elements at opacity 0 until they animate in, which hides the
   page entirely for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {

    .wow,
    .animated {
        animation: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* GrowMark hides the "Read More" strip by stacking .service-text (z-index 2,
   solid white) over .service-btn (z-index 1) until hover. That only works
   while the text fills the card. The template's demo copy is all the same
   length; real product copy is not, so on the shorter cards the text stopped
   short and the strip showed through. Make the text fill the card, which is
   what the template assumes. */
.service-item .service-text {
    height: 100%;
}

/* Where a product has its own logo, it replaces the template's icon circle.
   A wordmark cannot sit inside a 64px circle legibly. */
.service-item .service-logo {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item .service-logo img {
    max-height: 58px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------
   Header
   ---------------------------------------------------------------
   One row: logo, six nav items, phone as a secondary button, CTA.
   Solid white with a thin brand accent along the top edge, and a shadow
   once it floats over content. Previous attempts crammed seven links plus
   email, phone and CTA into the row, or split it into two rows that cost
   150px of every screen -- this is the version that fits. */
.site-header {
    z-index: 1030;
}

.header-bar {
    background-color: #fff;
    border-top: 3px solid var(--primary);
    box-shadow: 0 1px 0 rgba(28, 32, 53, .06);
    transition: box-shadow .3s ease;
}

.site-header.is-stuck .header-bar {
    box-shadow: 0 .5rem 1.5rem rgba(28, 32, 53, .10);
}

.site-header .navbar {
    min-height: 84px;
}

.site-header .navbar-brand {
    padding: 0;
    margin-right: 2rem;
}

.navbar-logo {
    height: 44px;
    width: auto;
    display: block;
}

.site-header .navbar-nav .nav-link {
    padding: 1.9rem 1rem;
    font-size: 15px;
    font-weight: 500;
    color: var(--dark);
    white-space: nowrap;
    transition: color .3s ease;
}

.site-header .navbar-nav .nav-link:hover,
.site-header .navbar-nav .nav-link.active {
    color: var(--primary);
}

.site-header .dropdown-menu {
    border: 0;
    border-top: 3px solid var(--primary);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 .75rem 1.5rem rgba(28, 32, 53, .12);
    padding: .5rem 0;
    min-width: 15rem;
}

.site-header .dropdown-item {
    padding: .55rem 1.25rem;
    font-weight: 500;
}

.site-header .dropdown-item.active,
.site-header .dropdown-item:active {
    background-color: var(--light);
    color: var(--primary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.header-actions .btn {
    white-space: nowrap;
    padding: .6rem 1.35rem;
    font-weight: 500;
}

.header-phone i {
    margin-right: .5rem;
}

/* Phone pill only where the row genuinely has room for it. */
.header-phone {
    display: none;
}

@media (min-width: 1400px) {
    .header-phone {
        display: inline-flex;
        align-items: center;
    }
}

/* Narrower desktops: tighten the nav before anything wraps. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .site-header .navbar-nav .nav-link {
        padding-left: .7rem;
        padding-right: .7rem;
    }
}

/* Collapsed menu: a solid panel with the contact links restored. */
@media (max-width: 1199.98px) {
    .site-header .navbar {
        min-height: 72px;
    }

    .navbar-logo {
        height: 38px;
    }

    .site-header .navbar-collapse {
        background-color: #fff;
        border-top: 1px solid rgba(28, 32, 53, .08);
        padding: .5rem 0 1.25rem;
    }

    .site-header .navbar-nav .nav-link {
        padding: .7rem 0;
    }

    .site-header .dropdown-menu {
        box-shadow: none;
        border-top: 0;
        padding-left: 1rem;
    }

    .header-actions {
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
        padding-top: .75rem;
        border-top: 1px solid rgba(28, 32, 53, .08);
        margin-top: .5rem;
    }

    .header-phone {
        display: inline-flex;
        align-items: center;
    }

    .header-mobile-link {
        color: var(--dark);
        font-weight: 500;
    }

    .header-mobile-link i {
        color: var(--primary);
        margin-right: .5rem;
    }
}

/* Client logos are supplied at mixed sizes and several have a near-white
   background rather than transparency. Greyscale unifies them on the
   template's bg-light tiles; colour returns on hover. */
.client-logo img {
    max-height: 70px;
    width: auto;
    filter: grayscale(1);
    opacity: .75;
    transition: .5s;
}

.client-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* WOW.js leaves elements at opacity 0 until they animate in, which hides the
   page entirely for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {

    .wow,
    .animated {
        animation: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* GrowMark hides the "Read More" strip by stacking .service-text (z-index 2,
   solid white) over .service-btn (z-index 1) until hover. That only works
   while the text fills the card. The template's demo copy is all the same
   length; real product copy is not, so on the shorter cards the text stopped
   short and the strip showed through. Make the text fill the card, which is
   what the template assumes. */
.service-item .service-text {
    height: 100%;
}

/* Where a product has its own logo, it replaces the template's icon circle.
   A wordmark cannot sit inside a 64px circle legibly. */
.service-item .service-logo {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item .service-logo img {
    max-height: 58px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------
   Header
   ---------------------------------------------------------------
   Two solid tiers that travel together: a slim brand strip carrying the
   logo and contact details, and the navigation below it.

   Solid, not translucent -- a frosted bar bled into the content behind it
   and never read cleanly. Splitting it in two also stops the nav fighting
   the contact details for room, which was making everything wrap. */
.site-header {
    z-index: 1030;
}

.header-strip {
    background-color: var(--primary);
    color: #fff;
}

.header-strip-brand {
    display: inline-flex;
    align-items: center;
    padding: .55rem 0;
}

.header-strip-logo {
    height: 30px;
    width: auto;
    display: block;
    /* The logo is blue artwork; flatten it to white for the brand strip. */
    filter: brightness(0) invert(1);
}

.header-strip-meta {
    gap: 1.75rem;
    font-size: .875rem;
    white-space: nowrap;
}

.header-strip-meta a,
.header-strip-meta span {
    color: rgba(255, 255, 255, .92);
    transition: color .3s ease;
}

.header-strip-meta a:hover {
    color: #fff;
}

.header-strip-meta i {
    margin-right: .5rem;
    opacity: .75;
}

.header-nav {
    box-shadow: 0 .125rem .5rem rgba(28, 32, 53, .06);
    transition: box-shadow .3s ease;
}

/* Lift the header once it is floating over the page. */
.site-header.is-stuck .header-nav {
    box-shadow: 0 .5rem 1.5rem rgba(28, 32, 53, .12);
}

.navbar-logo {
    height: 38px;
    width: auto;
}

.site-header .navbar-nav .nav-link {
    white-space: nowrap;
    padding: 1.6rem .9rem;
    font-weight: 500;
}

.site-header .navbar .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

.header-contact-link {
    color: var(--dark);
    font-weight: 500;
}

.header-contact-link i {
    color: var(--primary);
}

/* Narrower desktops: keep the nav on one line before anything else gives. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .site-header .navbar-nav .nav-link {
        padding-left: .6rem;
        padding-right: .6rem;
        font-size: .95rem;
    }
}

/* Collapsed menu needs a solid panel of its own. */
@media (max-width: 1199.98px) {
    .site-header .navbar-collapse {
        background-color: #fff;
        border-top: 1px solid rgba(28, 32, 53, .08);
        margin-top: .25rem;
        padding: 0 .25rem;
    }

    .site-header .navbar-nav .nav-link {
        padding: .6rem .25rem;
    }
}

/* Client logos are supplied at mixed sizes and several have a near-white
   background rather than transparency. Greyscale unifies them on the
   template's bg-light tiles; colour returns on hover. */
.client-logo img {
    max-height: 70px;
    width: auto;
    filter: grayscale(1);
    opacity: .75;
    transition: .5s;
}

.client-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* WOW.js leaves elements at opacity 0 until they animate in, which hides the
   page entirely for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {

    .wow,
    .animated {
        animation: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* GrowMark hides the "Read More" strip by stacking .service-text (z-index 2,
   solid white) over .service-btn (z-index 1) until hover. That only works
   while the text fills the card. The template's demo copy is all the same
   length; real product copy is not, so on the shorter cards the text stopped
   short and the strip showed through. Make the text fill the card, which is
   what the template assumes. */
.service-item .service-text {
    height: 100%;
}

/* Where a product has its own logo, it replaces the template's icon circle.
   A wordmark cannot sit inside a 64px circle legibly. */
.service-item .service-logo {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item .service-logo img {
    max-height: 58px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* ---------------------------------------------------------------
   Header
   ---------------------------------------------------------------
   One row rather than two: logo, nav, contact and CTA together. The old
   stacked topbar + navbar cost ~150px of every screen permanently and left
   the logo stranded away from the nav.

   It is frosted rather than flat -- translucent white with a backdrop blur,
   so page content shows through as it passes underneath. */
.site-header {
    z-index: 1030;
}

.header-bar {
    background-color: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(28, 32, 53, .07);
    transition: background-color .3s ease, box-shadow .3s ease;
}

/* Without backdrop-filter a translucent bar just looks washed out, so fall
   back to solid white. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .header-bar {
        background-color: #fff;
    }
}

/* Lift it off the page once it is floating over content. */
.site-header.is-stuck .header-bar {
    background-color: rgba(255, 255, 255, .92);
    box-shadow: 0 .5rem 1.5rem rgba(28, 32, 53, .10);
}

.navbar-logo {
    height: 40px;
    width: auto;
}

/* Keep the nav on one line -- wrapped links made the bar two rows tall. */
.site-header .navbar-nav .nav-link {
    white-space: nowrap;
    padding-left: .6rem;
    padding-right: .6rem;
}

.site-header .header-contact {
    flex-wrap: nowrap;
}

.site-header .header-contact .btn {
    white-space: nowrap;
    flex-shrink: 0;
}

/* The nav gets the room first; the phone only appears where there is
   genuinely space for it, which is wider than Bootstrap's 1400 breakpoint. */
.header-email,
.header-phone {
    display: none;
}

@media (min-width: 1600px) {
    .header-phone {
        display: inline-flex;
    }
}

/* In the collapsed menu both are useful and there is room. */
@media (max-width: 1199.98px) {

    .header-email,
    .header-phone {
        display: inline-flex;
    }
}

@media (min-width: 1200px) and (max-width: 1599.98px) {
    .site-header .navbar-nav .nav-link {
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: .95rem;
    }
}

.header-contact-link {
    color: var(--dark);
    font-weight: 500;
    white-space: nowrap;
    transition: color .3s ease;
}

.header-contact-link i {
    color: var(--primary);
}

.header-contact-link:hover {
    color: var(--primary);
}

/* The collapsed menu needs a solid panel -- translucent over a hero image
   is unreadable on a phone. */
@media (max-width: 1199.98px) {
    .site-header .navbar-collapse {
        background-color: #fff;
        border-top: 1px solid rgba(28, 32, 53, .07);
        margin-top: .5rem;
        padding: 0 1rem;
    }

    .header-contact {
        flex-direction: column;
        align-items: flex-start !important;
        gap: .75rem;
    }
}

/* Client logos are supplied at mixed sizes and several have a near-white
   background rather than transparency. Greyscale unifies them on the
   template's bg-light tiles; colour returns on hover. */
.client-logo img {
    max-height: 70px;
    width: auto;
    filter: grayscale(1);
    opacity: .75;
    transition: .5s;
}

.client-logo:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* style.css points .page-header at ../img/carousel-1.jpg, which is not where
   the template images live here. Same treatment, MAAT's own photograph. */
.page-header {
    background: linear-gradient(rgba(28, 32, 53, .78), rgba(28, 32, 53, .78)),
        url(../maat/_MG_9700-1JPG.jpg) center center no-repeat !important;
    background-size: cover !important;
}

/* GrowMark's carousel scrim is rgba(0,0,0,.1) -- enough for its dark stock
   photography, but MAAT's hero shots are bright and busy, which left the
   headline illegible. Darken the side the copy actually sits on. */
#header-carousel .caption-left .carousel-caption {
    background: linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .15) 100%);
}

#header-carousel .caption-right .carousel-caption {
    background: linear-gradient(270deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, .15) 100%);
}

@media (max-width: 768px) {
    #header-carousel .caption-left .carousel-caption,
    #header-carousel .caption-right .carousel-caption {
        background: rgba(0, 0, 0, .6);
    }
}

/* The template's About block holds a video play button. MAAT has no video,
   so a photograph fills that half instead. */
.about-photo {
    object-fit: cover;
    object-position: center 20%;
    height: 100%;
    min-height: 420px;
}

/* Where a product has its own logo, it replaces the template's icon circle.
   A wordmark cannot sit inside a 64px circle legibly. */
.service-item .service-logo {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-item .service-logo img {
    max-height: 58px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* GrowMark hides the "Read More" strip by stacking .service-text (z-index 2,
   solid white) over .service-btn (z-index 1) until hover. That only works
   while the text fills the card, and real product copy varies in length. */
.service-item .service-text {
    height: 100%;
}

/* WOW.js leaves elements at opacity 0 until they animate in, which hides the
   page entirely for anyone who has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {

    .wow,
    .animated {
        animation: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}