.popover-content {
    padding: 0px 14px;
}

.odd-bg:nth-child(even) {
    background: #ededed;
}

.odd-bg:nth-child(odd) {
    background: #FFF;
}

h2 {
    color: #3d4352 !important;
}

.marT-p {
    padding-top: 5% !important;
    color: white !important;
}

.noMarT {
    margin-top: 0px !important;
}

.large-font {
    font-size: x-large !important;
}

.model-height {
    max-height: 63% !important;
}

.mdl-height {
    max-height: 83% !important;
}

h2 {
    margin: .68rem 0 1rem 0;
}

.button-green {
    background-color: #013410 !important;
}

.button-orange {
    background-color: #EFC15A !important;
    border: 2px solid #000 !important;
    color: #000 !important;
}

.mousepointer {
    cursor: pointer !important;
}

.bg-red-white-text {
    background-color: rgba(244, 67, 54, 0.82) !important;
    color: white !important;
}

.popover {
    max-width: 800px !important;
}

.black-text {
    color: black !important;
}

.custom-list {
    margin-left: 10px !important;
    margin-right: 5px;
}

.button-orange:hover {
    background-color: #D9A63F;
}

/* Black text on the gold fill, per Jill. Was #fff, which is ~1.7:1 on gold. */
.button-orange a {
    color: #000 !important;
}

/* TODO (awaiting Jill): orange TEXT colour. Gold is for buttons and accents
   only, so this is deliberately left on the current orange. Used for the
   header phone number and the Admin login heading. */
.text-orange {
    color: #fb751e !important;
}

.top-bar {
    background-color: #3d4352 !important;
}

    .top-bar ul {
        list-style: none;
        clear: both;
        margin: 0px;
    }

    .top-bar li {
        padding: 12px 15px;
        float: left;
    }

nav a {
    color: #3d4352 !important;
}

    nav,
    nav .nav-wrapper i,
    nav a.button-collapse,
    nav a.button-collapse i {
        height: 85px !important;
    }

.brand-logo img {
    margin-top: 5px;
    width: 150px;
}

.contact-banner {
    background: url('contact.jpg') #ededed no-repeat right bottom;
}

/* Standard Process hero. Image swapped from happy_guy.jpg to a people shot per
   Jill's OUR PROCESS document. Same treatment as the home hero: dark green
   scrim so white text reads over the photo, listed before the url() so it
   composites on top. Deliberately a different photo from the home page so the
   two do not look like the same page. */
.sp-banner {
    background: linear-gradient(to right, rgba(1, 52, 16, 0.88) 0%, rgba(1, 52, 16, 0.74) 50%, rgba(1, 52, 16, 0.55) 100%),
                url('sp-hero-people.jpg') no-repeat center;
    background-size: cover;
}

/* About hero keeps its existing image but gains the same dark green scrim as
   the home and Standard Process heroes, since the copy is now white on it. */
.about-banner {
    background: linear-gradient(to right, rgba(1, 52, 16, 0.88) 0%, rgba(1, 52, 16, 0.74) 50%, rgba(1, 52, 16, 0.55) 100%),
                url('about-bg.jpg') no-repeat center;
    background-size: cover;
}

#index-banner {
    background-color: #ededed !important;
}

hr {
    border: dotted 0.01rem #bfbdbd;
}

@media only screen and (max-width: 768px) {
    .popover {
        left: 0px !important;
        max-width: 100% !important;
    }
}

@media screen and (max-width: 750px) {

    .footer-copyright img {
        height: 40px;
        margin-top: -20px;
    }
}

@media screen and (max-width: 600px) {
    /* The old hero (happy_guy.jpg) was a right-anchored cut-out that did not
       work at phone width, so it was dropped entirely. The new hero is a
       full-bleed photo with a scrim, so it should stay - but flatten to the
       dark green if the image ever needs to go. */
    .sp-banner {
        background-position: center;
    }
}

@media screen and (min-width: 600px) {
    nav ul {
        margin-top: 10px !important;
    }
}

@media only screen and (max-device-width: 480px) {
    .input-field {
        width: 100% !important;
    }

    footer.page-footer .footer-copyright {
        line-height: 32px;
    }

        footer.page-footer .footer-copyright img {
            width: 30px;
            margin-top: -20px;
        }

    .text_h {
        font-size: 3rem;
        margin-top: -30px;
        line-height: 20px !important;
    }

    .text_h2 {
        font-size: 2.2rem;
        line-height: 2.5rem;
    }
}

.marL-xsm {
    margin-left: 2px !important;
}

nav ul a {
    padding: 0px 9px !important;
    letter-spacing: 1px !important;
    font-size: 1rem !important;
}

.clockpicker-align-top {
    left: 60% !important;
}

/* Hero banner. Image swapped per Jill: "replace the home page hero image,
   most likely with people image... You can put a dark transparent layer over
   image if you need to for content to pop."

   Chosen: iStock-1023516624 (saved as hero-people.jpg). The banner is
   full-width at min-height 536px, so background-size:cover keeps only about
   42% of the image height - a wide horizontal slice. Of the three people
   shots supplied it was the only one whose centre crop keeps all three faces
   intact; the other two decapitate one or more subjects at that aspect ratio.
   It also has clean empty space on the left, where the headline sits.

   The source is very bright (white walls and windows), so the scrim is heavy:
   86% at the left falling to 58% at the right. Lighter than that and the white
   headline stops reading. Tinted #013410 rather than neutral black so it ties
   to the palette. Listed before the url() so it composites on top.

   The headline block sits roughly 25-83% across (col m10 offset-l3 inside a
   centred container), so the scrim has to hold up across the middle - not
   just at the left edge. */
.rac-banner {
    background: linear-gradient(to right, rgba(1, 52, 16, 0.86) 0%, rgba(1, 52, 16, 0.72) 45%, rgba(1, 52, 16, 0.58) 100%),
                url('hero-people.jpg') no-repeat center;
    background-size: cover;
}

/* The banner text sat on a flat chalkboard before. A photographic hero is less
   forgiving, so a shadow keeps it legible wherever the image is lightest. */
.rac-banner .text_h,
.rac-banner .banner-text {
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}

/* Gold CTA on a photo needs its own separation from the background. */
.rac-banner .button-orange {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

.arrow-point {
    width: auto; /* Maintains image aspect ratio */
    height: 100%; /* Aligns height with the button */
    max-height: 48px; /* Example max-height that matches your button size */
}

#index-banner {
    min-height: 536px !important;
}

.card {
    margin: 0px !important;
}

    .card .card-content {
        padding: 5px 20px !important;
    }

        .card .card-content p {
            padding: 0px !important;
            margin: 0px !important;
        }

        .card .card-content span {
            line-height: 33px !important;
        }

.text_h {
    line-height: 50px !important;
    /*margin-top:4.5%;*/
}

/* Hero headline emphasis sits on the dark chalkboard banner image. Dark green
   is ~1.5:1 there; gold is the accent colour and reads well on dark, which is
   what Jill specified gold for. The .hero-accent class on the span makes this
   explicit rather than relying on .waiting span alone. */
.waiting span,
.waiting span.hero-accent {
    color: #EFC15A;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.banner-text {
    font-size: 1.1em;
    color: #fff;
}

.click-away {
    font-size: 1.3em;
    color: #fff;
}

    /* TODO (awaiting Jill): orange TEXT colour - see .text-orange above. */
    .click-away b {
        color: #fb751e;
    }

.card .card-title {
    color: #3d4352 !important;
}

.btn {
    border-radius: 0px !important;
    box-shadow: none !important;
    padding: 7px 20px !important;
    height: 50px !important;
}

.btn-sml {
    display: inline-block;
    line-height: 36px;
    outline: 0;
    padding: 0 2rem;
    text-transform: uppercase;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    height: 45px !important;
    border: none !important;
    text-decoration: none;
    color: #fff;
    text-align: center;
    letter-spacing: .5px;
    font-weight: 500;
}

.btn-inline {
    text-align: right;
}

    .btn-inline .btn {
        padding-bottom: 1rem !important;
    }

.marremo input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search],
textarea.materialize-textarea {
    margin: 0 !important;
}

.bg-field {
    background-color: #303643 !important;
}

.marremo .input-field {
    margin-top: 0px !important;
    padding: 0 10px !important;
    color: #fff !important;
}

.marremo .select-wrapper input.select-dropdown {
    border: none !important;
}

.marremo .select-wrapper span.caret {
    color: #fff !important;
}

.marremo .select-wrapper ul {
    width: 200px !important;
}

.vertical_dotted_line {
    border-right: 2px dashed #ededed;
    height: 40%;
    right: 50% !important;
    position: absolute;
    margin-top: 110px;
}

.promo i {
    color: #013410 !important;
    font-size: 1.3rem !important;
    display: inline !important;
    margin-right: 5px !important;
}

.promo #inl {
    display: inline !important;
}

.promo div {
    /*margin-top: 20px !important;*/
}

.circle-white {
    background: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    padding: 23px;
    border: 2px solid #fff;
    color: #fff;
}

.circle-green {
    background: none;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    padding: 23px;
    border: 2px solid #013410;
    color: #013410;
}

    .circle-green:hover {
        background: #013410;
        color: #fff;
    }

/* Inverted from the original outlined style. Gold text on white is ~1.8:1
   contrast and white text on gold is ~1.7:1, so neither the original nor its
   hover state survives a straight colour swap. Gold fill with a black outline
   and black text is ~10:1 and matches Jill's direction for buttons. */
.circle-orange {
    background: #EFC15A;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    padding: 23px;
    border: 2px solid #000;
    color: #000;
}

    .circle-orange:hover {
        background: #D9A63F;
        color: #000;
    }

/* #27d966 was a third, brighter green the original colour audit missed.
   Brought into the rebrand per Jill: "change that light green". */
.circle-sml {
    background: #013410;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    vertical-align: middle;
    padding: 11.5px;
    color: #fff;
    font-size: 1.2rem !important;
}

.pmar-remo p,
h5 {
    margin-top: 0px !important;
    padding-top: 0px !important;
}

.bg-white {
    background: #fff !important;
}

.bg-grey {
    background: #ededed !important;
}

.bg-green {
    background: #013410;
}
/*#work, #team {
     background:@white !important;
}*/
.bg-grey-img {
    background: url('happy.png') center no-repeat;
}

/* testi.png is itself a bright green graphic, so setting the background COLOUR
   to #013410 had no visible effect - the image covered it. This is the "light
   green at the bottom" Jill flagged. A dark green gradient laid over the image
   forces the panel to the brand colour regardless of what the artwork contains,
   while leaving its shape faintly visible. */
.bg-green-img {
    background: linear-gradient(rgba(1, 52, 16, 0.94), rgba(1, 52, 16, 0.94)),
                url('testi.png') #013410 center top no-repeat;
}

.mission {
    padding: 8% 0 38.8%;
    margin-left: 29%;
}

    .mission .circle-orange {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        line-height: 31px;
        padding: 13px;
    }

.founder {
    padding: 8% 0 5%;
    margin-left: 10%;
    margin-right: 29%;
    color: #fff;
}

    .founder .circle-white {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        line-height: 31px;
        padding: 13px;
        margin-bottom: 4%;
    }

.clientsays-grey {
    padding: 21.7% 0;
    margin-left: 29%;
}

.clientsays-green {
    padding: 10% 0;
    margin-left: 10%;
    margin-right: 29%;
    color: #fff;
}

.footer-bg {
    background: #3d4352 !important;
}

#work .row {
    margin-bottom: 0px !important;
}

.padT0 {
    padding-top: 0 !important;
}

.pad0 {
    padding-bottom: 0 !important;
}

.padB-2 {
    padding-bottom: 2% !important;
}

.padB-4 {
    padding-bottom: 4% !important;
}

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=time],
input[type=date],
input[type=datetime-local],
input[type=tel],
input[type=number],
input[type=search],
textarea.materialize-textarea {
    border-bottom: 1px solid #EFC15A !important;
    box-shadow: none !important;
}

.mr0 {
    margin: 0px !important;
}

.mrT0 {
    margin-top: 0px !important;
}

.mrB0 {
    margin-bottom: 0px !important;
}

.mT15 {
    margin-top: 15px;
}

.mT20 {
    margin-top: 20px;
}

.mT2 {
    margin-top: 2%;
}

.mT5 {
    margin-top: 5%;
}

.mT12 {
    margin-top: 12%;
}

footer.page-footer .footer-copyright {
    min-height: 100px !important;
    color: #3d4352 !important;
    overflow: visible !important;
    font-size: .9rem !important;
}

.footer-copyright p {
    margin: 0px !important;
}

.footer-copyright .small {
    font-size: .8rem !important;
    padding-top: 0px !important;
}

.notify {
    padding: 1% 0;
    background-color: #a9f5c3;
}

#intro {
    padding-top: 0rem !important;
}

.text_h2 {
    margin-bottom: .1% !important;
    line-height: 2rem !important;
}

.full-bdr {
    border: 1px solid #AFB0B4;
    background: #fff;
    font-family: sans-serif;
}

.stripe-grey {
    background-color: #ededed;
}

.stripe-white {
    background-color: #fff;
}

.div-table {
    display: table;
    height: 50px;
}

    .div-table span {
        display: table-cell;
        vertical-align: middle;
    }

.head {
    background-color: #3d4352 !important;
    font-weight: bold !important;
    color: #fff !important;
}

.marB0 {
    margin-bottom: 0px !important;
}

td,
th {
    border-radius: 0px !important;
}
/* -- Box model ------------------------------- */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#demo {
    margin: 20px auto;
}

    #demo h1 {
        font-size: 2.4rem;
        line-height: 3.2rem;
        letter-spacing: 0;
        font-weight: 300;
        color: #212121;
        text-transform: inherit;
        margin-bottom: 1rem;
        text-align: center;
    }

    #demo h2 {
        font-size: 1.5rem;
        line-height: 2.8rem;
        letter-spacing: 0.01rem;
        font-weight: 400;
        color: #212121;
        text-align: center;
    }

.shadow-z-1 {
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
    -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
}
/* -- Material Design Table style -------------- */
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 2rem;
    background: #fff !important;
    background-color: #fff;
}

table.striped > tbody > tr > td {
    background: #fff !important;
}

.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

    .table > thead > tr > th,
    .table > tbody > tr > th,
    .table > tfoot > tr > th,
    .table > thead > tr > td,
    .table > tbody > tr > td,
    .table > tfoot > tr > td {
        text-align: left;
        padding: .4rem 1rem;
        vertical-align: top;
        border-top: 0;
        -webkit-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .table > thead > tr > th {
        font-weight: 400;
        color: #fff;
        vertical-align: bottom;
        border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    }

.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
    border-top: 0;
}

.table > tbody + tbody {
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.table .table {
    background-color: #fff;
}

.table .no-border {
    border: 0;
}

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
    padding: 0.5rem;
}

.table-bordered {
    border: 0;
}

    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td {
        border: 0;
        border-bottom: 1px solid #e0e0e0;
    }

    .table-bordered > thead > tr > th,
    .table-bordered > thead > tr > td {
        border-bottom-width: 2px;
    }

.table-striped > tbody > tr:nth-child(odd) > td,
.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: #f5f5f5;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    background-color: rgba(0, 0, 0, 0.12);
}

@media screen and (max-width: 768px) {
    .table-responsive-vertical > .table {
        margin-bottom: 0;
        background-color: transparent;
    }

        .table-responsive-vertical > .table > thead,
        .table-responsive-vertical > .table > tfoot {
            display: none;
        }

        .table-responsive-vertical > .table > tbody {
            display: block;
        }

            .table-responsive-vertical > .table > tbody > tr {
                display: block;
                border: 1px solid #e0e0e0;
                border-radius: 2px;
                margin-bottom: 1rem;
            }

                .table-responsive-vertical > .table > tbody > tr > td {
                    background-color: #fff;
                    display: block;
                    vertical-align: middle;
                    /*text-align: right;*/
                }

                    .table-responsive-vertical > .table > tbody > tr > td[data-title]:before {
                        content: attr(data-title);
                        float: left;
                        font-size: inherit;
                        font-weight: 400;
                        color: #fff;
                    }

    .table-responsive-vertical.shadow-z-1 {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

        .table-responsive-vertical.shadow-z-1 > .table > tbody > tr {
            border: none;
            -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
            -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24);
        }

    .table-responsive-vertical > .table-bordered {
        border: 0;
    }

        .table-responsive-vertical > .table-bordered > tbody > tr > td {
            border: 0;
            border-bottom: 1px solid #e0e0e0;
        }

            .table-responsive-vertical > .table-bordered > tbody > tr > td:last-child {
                border-bottom: 0;
            }

    .table-responsive-vertical > .table-striped > tbody > tr > td,
    .table-responsive-vertical > .table-striped > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical > .table-striped > tbody > tr > td:nth-child(odd) {
            background-color: #f5f5f5;
        }

    .table-responsive-vertical > .table-hover > tbody > tr:hover > td,
    .table-responsive-vertical > .table-hover > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical > .table-hover > tbody > tr > td:hover {
        background-color: rgba(0, 0, 0, 0.12);
    }
}

.table-striped.table-mc-red > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-red > tbody > tr:nth-child(odd) > th {
    background-color: #fde0dc;
}

.table-hover.table-mc-red > tbody > tr:hover > td,
.table-hover.table-mc-red > tbody > tr:hover > th {
    background-color: #f9bdbb;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-red > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-red > tbody > tr > td:nth-child(odd) {
            background-color: #fde0dc;
        }

    .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-red > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-red > tbody > tr > td:hover {
        background-color: #f9bdbb;
    }
}

.table-striped.table-mc-pink > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-pink > tbody > tr:nth-child(odd) > th {
    background-color: #fce4ec;
}

.table-hover.table-mc-pink > tbody > tr:hover > td,
.table-hover.table-mc-pink > tbody > tr:hover > th {
    background-color: #f8bbd0;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-pink > tbody > tr > td:nth-child(odd) {
            background-color: #fce4ec;
        }

    .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-pink > tbody > tr > td:hover {
        background-color: #f8bbd0;
    }
}

.table-striped.table-mc-purple > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-purple > tbody > tr:nth-child(odd) > th {
    background-color: #f3e5f5;
}

.table-hover.table-mc-purple > tbody > tr:hover > td,
.table-hover.table-mc-purple > tbody > tr:hover > th {
    background-color: #e1bee7;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-purple > tbody > tr > td:nth-child(odd) {
            background-color: #f3e5f5;
        }

    .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-purple > tbody > tr > td:hover {
        background-color: #e1bee7;
    }
}

.table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) > th {
    background-color: #ede7f6;
}

.table-hover.table-mc-deep-purple > tbody > tr:hover > td,
.table-hover.table-mc-deep-purple > tbody > tr:hover > th {
    background-color: #d1c4e9;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-deep-purple > tbody > tr > td:nth-child(odd) {
            background-color: #ede7f6;
        }

    .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-deep-purple > tbody > tr > td:hover {
        background-color: #d1c4e9;
    }
}

.table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-indigo > tbody > tr:nth-child(odd) > th {
    background-color: #e8eaf6;
}

.table-hover.table-mc-indigo > tbody > tr:hover > td,
.table-hover.table-mc-indigo > tbody > tr:hover > th {
    background-color: #c5cae9;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-indigo > tbody > tr > td:nth-child(odd) {
            background-color: #e8eaf6;
        }

    .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-indigo > tbody > tr > td:hover {
        background-color: #c5cae9;
    }
}

.table-striped.table-mc-blue > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-blue > tbody > tr:nth-child(odd) > th {
    background-color: #e7e9fd;
}

.table-hover.table-mc-blue > tbody > tr:hover > td,
.table-hover.table-mc-blue > tbody > tr:hover > th {
    background-color: #d0d9ff;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-blue > tbody > tr > td:nth-child(odd) {
            background-color: #e7e9fd;
        }

    .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-blue > tbody > tr > td:hover {
        background-color: #d0d9ff;
    }
}

.table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) > th {
    background-color: #e1f5fe;
}

.table-hover.table-mc-light-blue > tbody > tr:hover > td,
.table-hover.table-mc-light-blue > tbody > tr:hover > th {
    background-color: #b3e5fc;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-light-blue > tbody > tr > td:nth-child(odd) {
            background-color: #e1f5fe;
        }

    .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-light-blue > tbody > tr > td:hover {
        background-color: #b3e5fc;
    }
}

.table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-cyan > tbody > tr:nth-child(odd) > th {
    background-color: #e0f7fa;
}

.table-hover.table-mc-cyan > tbody > tr:hover > td,
.table-hover.table-mc-cyan > tbody > tr:hover > th {
    background-color: #b2ebf2;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-cyan > tbody > tr > td:nth-child(odd) {
            background-color: #e0f7fa;
        }

    .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-cyan > tbody > tr > td:hover {
        background-color: #b2ebf2;
    }
}

.table-striped.table-mc-teal > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-teal > tbody > tr:nth-child(odd) > th {
    background-color: #e0f2f1;
}

.table-hover.table-mc-teal > tbody > tr:hover > td,
.table-hover.table-mc-teal > tbody > tr:hover > th {
    background-color: #b2dfdb;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-teal > tbody > tr > td:nth-child(odd) {
            background-color: #e0f2f1;
        }

    .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-teal > tbody > tr > td:hover {
        background-color: #b2dfdb;
    }
}

.table-striped.table-mc-green > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-green > tbody > tr:nth-child(odd) > th {
    background-color: #d0f8ce;
}

.table-hover.table-mc-green > tbody > tr:hover > td,
.table-hover.table-mc-green > tbody > tr:hover > th {
    background-color: #a3e9a4;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-green > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-green > tbody > tr > td:nth-child(odd) {
            background-color: #d0f8ce;
        }

    .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-green > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-green > tbody > tr > td:hover {
        background-color: #a3e9a4;
    }
}

.table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-light-green > tbody > tr:nth-child(odd) > th {
    background-color: #f1f8e9;
}

.table-hover.table-mc-light-green > tbody > tr:hover > td,
.table-hover.table-mc-light-green > tbody > tr:hover > th {
    background-color: #dcedc8;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-light-green > tbody > tr > td:nth-child(odd) {
            background-color: #f1f8e9;
        }

    .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-light-green > tbody > tr > td:hover {
        background-color: #dcedc8;
    }
}

.table-striped.table-mc-lime > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-lime > tbody > tr:nth-child(odd) > th {
    background-color: #f9fbe7;
}

.table-hover.table-mc-lime > tbody > tr:hover > td,
.table-hover.table-mc-lime > tbody > tr:hover > th {
    background-color: #f0f4c3;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-lime > tbody > tr > td:nth-child(odd) {
            background-color: #f9fbe7;
        }

    .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-lime > tbody > tr > td:hover {
        background-color: #f0f4c3;
    }
}

.table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-yellow > tbody > tr:nth-child(odd) > th {
    background-color: #fffde7;
}

.table-hover.table-mc-yellow > tbody > tr:hover > td,
.table-hover.table-mc-yellow > tbody > tr:hover > th {
    background-color: #fff9c4;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-yellow > tbody > tr > td:nth-child(odd) {
            background-color: #fffde7;
        }

    .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-yellow > tbody > tr > td:hover {
        background-color: #fff9c4;
    }
}

.table-striped.table-mc-amber > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-amber > tbody > tr:nth-child(odd) > th {
    background-color: #fff8e1;
}

.table-hover.table-mc-amber > tbody > tr:hover > td,
.table-hover.table-mc-amber > tbody > tr:hover > th {
    background-color: #ffecb3;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-amber > tbody > tr > td:nth-child(odd) {
            background-color: #fff8e1;
        }

    .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-amber > tbody > tr > td:hover {
        background-color: #ffecb3;
    }
}

.table-striped.table-mc-orange > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-orange > tbody > tr:nth-child(odd) > th {
    background-color: #fff3e0;
}

.table-hover.table-mc-orange > tbody > tr:hover > td,
.table-hover.table-mc-orange > tbody > tr:hover > th {
    background-color: #ffe0b2;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-orange > tbody > tr > td:nth-child(odd) {
            background-color: #fff3e0;
        }

    .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-orange > tbody > tr > td:hover {
        background-color: #ffe0b2;
    }
}

.table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > td,
.table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) > th {
    background-color: #fbe9e7;
}

.table-hover.table-mc-deep-orange > tbody > tr:hover > td,
.table-hover.table-mc-deep-orange > tbody > tr:hover > th {
    background-color: #ffccbc;
}

@media screen and (max-width: 767px) {
    .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td,
    .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr:nth-child(odd) {
        background-color: #fff;
    }

        .table-responsive-vertical .table-striped.table-mc-deep-orange > tbody > tr > td:nth-child(odd) {
            background-color: #fbe9e7;
        }

    .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover > td,
    .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr:hover {
        background-color: #fff;
    }

    .table-responsive-vertical .table-hover.table-mc-deep-orange > tbody > tr > td:hover {
        background-color: #ffccbc;
    }
}

.div-table {
    height: 25px !important;
}

input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    box-shadow: none !important;
}

input:not([type]).validate + label, input[type=text].validate + label, input[type=password].validate + label, input[type=email].validate + label, input[type=url].validate + label, input[type=time].validate + label, input[type=date].validate + label, input[type=datetime].validate + label, input[type=datetime-local].validate + label, input[type=tel].validate + label, input[type=number].validate + label, input[type=search].validate + label, textarea.materialize-textarea.validate + label {
    color: #9e9e9e !important;
}

.input-field label {
    color: #9e9e9e !important;
}

.dropdown-content {
    max-height: 200px !important;
}

    .dropdown-content li > a, .dropdown-content li > span {
        padding: 0px !important;
    }

.footer-copyright p {
    line-height: 1rem;
    margin-top: 3.5% !important;
}

.footer-copyright {
    padding-bottom: 2% !important;
}

    .footer-copyright a {
        color: #3d4352;
    }

        .footer-copyright a:hover {
            color: #013410;
        }

.pdT20 {
    padding-top: 20px !important;
}

.text_h {
    line-height: 65px !important;
}

.section {
    padding-bottom: 0 !important;
}

#intro, #work, #team {
    padding-top: 2rem !important;
}

.doc-img img {
    max-width: 100%;
    max-height: 590px;
}

.modal-content {
    padding: 24px 15px !important;
}

    .modal-content .row {
        margin-bottom: 0 !important;
    }

.bdrTB-green {
    border-bottom: 1px solid #013410;
    border-top: 1px solid #013410;
    padding: 5px 0;
    margin: 5px 0;
}

.service-form .input-field {
    margin-top: 0 !important;
}

.service-form input {
    margin-bottom: 0 !important;
}

.service-form textarea {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.service-form p {
    color: #013410;
}

.service-form h5 {
    color: #3d4352;
    border-bottom: 1px solid rgba(0, 0, 0, 0.24);
    padding-bottom: 10px;
}

.service-pop .modal {
    max-height: 88%;
}

@media only screen and (max-width: 480px) {

    .popover {
        left: 0px !important;
    }

    .text_h {
        line-height: 50px !important;
    }

    .btn-inline .btn {
        font-size: 12px;
        width: 100% !important;
        margin-bottom: 5px;
    }

    .modal-content .btn {
        width: 100% !important;
        margin-bottom: 5px;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}
/*.dropdown-content li > a, .dropdown-content li > span {
    line-height:10px !important;
    font-size:12px !important;
}*/
.dropdown-content li > a {
    line-height: 10px !important;
    font-size: 12px !important;
}

.dropdown-content li > span {
    font-size: 12px !important;
}

.dropdown-content li > a, .dropdown-content li > span {
    padding: 0px !important;
}

.dropdown-content li {
    min-height: 20px !important;
}

.h-100 {
    height: 100px !important;
}

@media only screen and (max-width: 992px) {
    table.responsive-table tbody {
        overflow-y: hidden !important;
    }

    .table-responsive {
        width: 100% !important;
        overflow-y: hidden !important;
        overflow-x: auto !important;
    }
}

@media screen and (min-width:320px) and (max-width:479px) {
    .popover {
        left: 0px !important;
        max-width: 100% !important;
    }
}



.dropdown {
    position: relative;
}

.dropdown-toggle:focus {
    outline: 0;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    width: 100%;
    height: 100px;
    overflow-y: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

    .dropdown-menu.pull-right {
        right: 0;
        left: auto;
    }

    .dropdown-menu .divider {
        height: 1px;
        margin: 9px 0;
        overflow: hidden;
        background-color: #e5e5e5;
    }

    .dropdown-menu > li > a {
        display: block;
        padding: 3px 20px;
        clear: both;
        font-weight: normal;
        line-height: 1.42857143;
        color: #333;
        white-space: nowrap;
    }

        .dropdown-menu > li > a:hover,
        .dropdown-menu > li > a:focus {
            color: #262626;
            text-decoration: none;
            background-color: #f5f5f5;
        }

    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu > .active > a:focus {
        color: #fff;
        text-decoration: none;
        background-color: #337ab7;
        outline: 0;
    }

    .dropdown-menu > .disabled > a,
    .dropdown-menu > .disabled > a:hover,
    .dropdown-menu > .disabled > a:focus {
        color: #777;
    }

        .dropdown-menu > .disabled > a:hover,
        .dropdown-menu > .disabled > a:focus {
            text-decoration: none;
            cursor: not-allowed;
            background-color: transparent;
            background-image: none;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        }

.open > .dropdown-menu {
    display: block;
}

.open > a {
    outline: 0;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

.dropdown-menu-left {
    right: auto;
    left: 0;
}

.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 12px;
    line-height: 1.42857143;
    color: #777;
    white-space: nowrap;
}

.dropdown-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
}

.pull-right > .dropdown-menu {
    right: 0;
    left: auto;
}

.dropup .caret,
.navbar-fixed-bottom .dropdown .caret {
    content: "";
    border-top: 0;
    border-bottom: 4px solid;
}

.dropup .dropdown-menu,
.navbar-fixed-bottom .dropdown .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
}

#expiryMonth + ul.dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: 100%;
    padding: 10px 10px;
    overflow: auto;
    max-height: 120px;
    z-index: 100;
    box-shadow: 0px 3px 6px 2px rgba(0,0,0,0.1);
}


.noscroll {
    /*overflow: hidden;*/
}

.scroll, #make-payment-modal, #setup-paymentplan-modal {
    /*overflow: auto;*/
    -webkit-overflow-scrolling: touch;
}

    #setup-paymentplan-modal .select-wrapper input.select-dropdown,
    #make-payment-modal .select-wrapper input.select-dropdown{
        height: 1.5rem;
        line-height: 1.5rem;
        padding: 5px;
        border: 1px solid #9e9e9e !important;
        border-radius: 5px;
        background-position: 97% center;
        background-repeat: no-repeat;
    }
    /** Border red removed **/
    #setup-paymentplan-modal input[type=text],
    #setup-paymentplan-modal input[type=email],
     #make-payment-modal input[type=text],
     #make-payment-modal input[type=email] {
        border-bottom: 1px solid #9e9e9e !important;
    }
    #setup-paymentplan-modal .select-wrapper span.caret ,
    #make-payment-modal .select-wrapper span.caret {
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    #setup-paymentplan-modal .dropdown-content,
    #make-payment-modal  .dropdown-content {
        margin-top: 35px;
    }

        #setup-paymentplan-modal .dropdown-content li ,
        #make-payment-modal .dropdown-content li{
            padding: 5px;
        }

    #setup-paymentplan-modal .select-wrapper + label,
     #make-payment-modal .select-wrapper + label
     {
        top: 0;
    }

.cvccode {
    width: 150px !important;
    height: 35px !important;
    border-bottom: 1px solid black !important;
    padding-left: 10px !important;
    display: inline-block;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    box-sizing: border-box;
}

.cvccodeplan
{
    width: 100px !important;
    height: 35px !important;
    border-bottom: 1px solid black !important;
    padding-left: 10px !important;
    display: inline-block;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    box-sizing: border-box;
}


#setup-paymentplan-modal .dropdown-content ,
#make-payment-modal .dropdown-content{
    max-height: 140px !important;
}

.dropdown-content li > a, .dropdown-content li > span {
    color: black !important;
}


/* ============================================================
   "Why Work with a Recovery Specialist?" home page section.
   Added per Jill's Home Page revision, item 5. Layout follows the
   reverse of the RAC postcard.

   Palette: #013410 dark green, #EFC15A gold - both from the 2026
   rebrand. Icons are the supplied black PNGs; #013410 is dark enough
   that they read as dark green without recolouring.
   ============================================================ */

.why-work-section {
    background: #fff;
    padding-bottom: 40px;
}

/* --- Dark green header band --- */
.why-work-header {
    background: #013410;
    padding: 34px 0 30px;
}

.why-work-title {
    /* !important because Materialize's heading styles win on specificity and
       were rendering the first half of the heading dark grey on dark green. */
    color: #fff !important;
    font-size: 2.1rem;
    font-weight: 700;
    margin: 0 0 12px;
    letter-spacing: .5px;
}

.why-work-title-accent {
    color: #EFC15A;
}

.why-work-intro {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
    max-width: 900px;
}

/* --- Three pillars --- */
.why-work-pillars {
    margin-top: 34px;
    margin-bottom: 10px;
}

.why-work-pillar {
    text-align: center;
    padding: 0 26px;
}

/* Vertical rules between the columns, as on the postcard. Applied to the
   middle column only, and dropped below the Materialize "m" breakpoint
   where the columns stack. */
@media only screen and (min-width: 601px) {
    .why-work-pillar-bordered {
        border-left: 1px solid #dcdcdc;
        border-right: 1px solid #dcdcdc;
    }
}

.why-work-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
}

.why-work-pillar-title {
    color: #013410;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .5px;
    margin: 0 0 12px;
}

.why-work-pillar-text {
    color: #444;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
}

/* --- "What We Do For You" heading with flanking rules --- */
.what-we-do-heading {
    text-align: center;
    margin: 42px 0 26px;
    position: relative;
}

    .what-we-do-heading span {
        background: #fff;
        color: #013410;
        font-size: 1.35rem;
        font-weight: 700;
        letter-spacing: 1px;
        padding: 0 18px;
        position: relative;
        z-index: 1;
    }

    .what-we-do-heading:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 15%;
        right: 15%;
        height: 1px;
        background: #013410;
    }

/* --- Five numbered steps --- */
.what-we-do-steps {
    margin-bottom: 10px;
}

.what-we-do-step {
    padding: 0 16px 20px;
}

/* Numbers removed per Jill - the icon now carries each step on its own, so it
   sits as a block above the title rather than inline beside a badge. */
.what-we-do-icon {
    width: 42px;
    height: 42px;
    display: block;
    margin-bottom: 4px;
}

.what-we-do-title {
    color: #013410;
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: .5px;
    margin: 14px 0 8px;
}

.what-we-do-text {
    color: #444;
    font-size: .88rem;
    line-height: 1.5;
    margin: 0;
}

/* --- Closing band --- */
.why-work-closing {
    background: #013410;
    border-radius: 6px;
    padding: 22px 28px;
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

.why-work-closing-text {
    color: #fff;
    font-size: .95rem;
    line-height: 1.55;
    margin: 0;
    flex: 1 1 60%;
    padding-right: 24px;
}

.why-work-tagline {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.45;
    margin: 0;
    flex: 0 0 auto;
}

.why-work-tagline-accent {
    color: #EFC15A;
}

@media only screen and (max-width: 600px) {
    .why-work-title {
        font-size: 1.55rem;
    }

    .why-work-closing-text {
        flex: 1 1 100%;
        padding-right: 0;
        margin-bottom: 14px;
    }
}


/* ============================================================
   Standard Process page. Rebuilt per Jill's OUR PROCESS document,
   following page 2 of the RAC tri-fold as the design reference but
   rendered in the 2026 palette rather than the tri-fold's orange.
   ============================================================ */

/* --- Hero --- */
.sp-hero-title {
    color: #fff !important;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 18px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}

.sp-hero-text {
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 10px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.sp-hero-tagline {
    color: #EFC15A;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 18px 0 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* --- Two intro blocks --- */
.sp-section {
    background: #fff;
    padding: 44px 0 34px;
}

.sp-block {
    padding: 0 22px 20px;
}

.sp-block-title {
    color: #013410;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 14px;
}

.sp-block-text {
    color: #444;
    font-size: .98rem;
    line-height: 1.65;
    margin: 0;
}

.sp-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .sp-checklist li {
        display: flex;
        align-items: flex-start;
        margin-bottom: 12px;
        color: #444;
        font-size: .98rem;
        line-height: 1.55;
    }

    .sp-checklist li i {
        color: #013410;
        margin-right: 12px;
        margin-top: 4px;
        flex: 0 0 auto;
    }

/* --- Six-step sequence --- */
.sp-steps-section {
    background: #013410;
    padding: 44px 0 40px;
}

.sp-steps-heading {
    color: #fff !important;
    font-size: 1.85rem;
    font-weight: 700;
    margin: 0 0 30px;
}

.sp-steps {
    margin: 0;
    padding: 0 0 0 8px;
    list-style: none;
    position: relative;
}

/* Vertical rule linking the badges, as on the tri-fold. Dropped on mobile
   where the badges sit above the text rather than beside it. */
@media only screen and (min-width: 601px) {
    .sp-steps:before {
        content: "";
        position: absolute;
        left: 25px;
        top: 18px;
        bottom: 18px;
        width: 2px;
        background: rgba(239, 193, 90, 0.35);
    }
}

.sp-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 22px;
    position: relative;
}

.sp-step-badge {
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background: #EFC15A;
    color: #000;
    font-weight: 700;
    text-align: center;
    flex: 0 0 36px;
    z-index: 1;
}

/* Badge sits directly against the text now that the redundant step icons are
   gone, so the gap moves here. */
.sp-step-body {
    flex: 1 1 auto;
    padding-left: 18px;
}

.sp-step-title {
    color: #EFC15A;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .5px;
    margin: 6px 0 6px;
}

.sp-step-text {
    color: #fff;
    font-size: .94rem;
    line-height: 1.55;
    margin: 0;
}

.sp-steps-tagline {
    background: #EFC15A;
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .5px;
    padding: 14px 20px;
    border-radius: 4px;
    margin-top: 26px;
    text-align: center;
}

/* --- Closing --- */
.sp-closing-section {
    background: #fff;
    padding: 40px 0 50px;
}

.sp-closing-title {
    color: #013410;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px;
}

.sp-closing-text {
    color: #444;
    font-size: 1.05rem;
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 22px;
}

.sp-choosing {
    color: #444;
    font-size: .98rem;
    line-height: 1.65;
    margin: 0 0 26px;
}

.sp-choosing-link {
    color: #013410;
    font-weight: 700;
    text-decoration: underline;
}

.sp-callout {
    background: #013410;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .5px;
    padding: 18px 24px;
    border-radius: 4px;
    text-align: center;
}

@media only screen and (max-width: 600px) {
    .sp-hero-title {
        font-size: 1.75rem;
    }

    .sp-step {
        flex-wrap: wrap;
    }
}


/* ============================================================
   About Us page. Rebuilt per Jill's About Us Page document.
   ============================================================ */

.au-hero-title {
    color: #fff !important;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 18px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
}

.au-hero-text {
    color: #fff;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 12px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.au-cta {
    margin-top: 14px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
}

/* Grey panel background swapped per "replace background image with the
   attached". The old happy.png cut-out is replaced by a photo, so a light
   scrim keeps the dark body copy readable. */
.bg-mission-img {
    background: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
                url('mission-bg.jpg') center no-repeat;
    background-size: cover;
}

.au-panel-title {
    color: #013410;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 14px;
}

.au-panel-title-second {
    margin-top: 26px;
}

/* The green panel is dark, so its heading inverts. */
.au-panel-title-onDark {
    color: #EFC15A;
}

.au-goal-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 22px 0 12px;
}

.au-goal-list {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

    .au-goal-list li {
        display: flex;
        align-items: flex-start;
        color: #fff;
        font-size: .98rem;
        line-height: 1.55;
        margin-bottom: 10px;
    }

    .au-goal-list li i {
        color: #EFC15A;
        margin-right: 12px;
        margin-top: 4px;
        flex: 0 0 auto;
    }

.au-goal-closing {
    font-weight: 700;
}

/* Full-width Founder section: white background, no image, per the document. */
.au-founder-section {
    background: #fff;
    padding: 46px 0 50px;
}

.au-founder-title {
    color: #013410;
    font-size: 1.85rem;
    font-weight: 700;
    margin: 0 0 20px;
}

.au-founder-text {
    color: #444;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 14px;
}

.au-founder-callout {
    background: #013410;
    color: #fff;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .5px;
    padding: 18px 24px;
    border-radius: 4px;
    text-align: center;
    margin-top: 28px;
}

/* ============================================================
   FAQs page. Rebuilt per Jill's FAQS document. Cards replaced with a
   simple headed list - eight entries read better as continuous prose
   than as eight separate boxes.
   ============================================================ */

.faq-section {
    background: #fff;
    padding: 40px 0 50px;
}

.faq-heading {
    color: #013410;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 30px;
}

.faq-item {
    border-top: 1px solid #e2e2e2;
    padding: 20px 0 4px;
}

    .faq-item:first-of-type {
        border-top: none;
        padding-top: 0;
    }

.faq-q {
    color: #013410;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 10px;
}

.faq-a {
    color: #444;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.faq-ready {
    background: #013410;
    border-radius: 6px;
    padding: 26px 28px;
    margin-top: 34px;
    text-align: center;
}

.faq-ready-title {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 18px;
}

@media only screen and (max-width: 600px) {
    .au-hero-title {
        font-size: 1.6rem;
    }

    .faq-heading {
        font-size: 1.55rem;
    }
}


/* ============================================================
   Fixes from the About / FAQ page review.
   ============================================================ */

/* The two panels on About Us are Materialize columns, which do not equalise
   height - so the grey one ran well past the bottom of the green one. Flex on
   the row makes them match. */
.section.bg-white > .row.marB0 {
    display: flex;
    flex-wrap: wrap;
}

    .section.bg-white > .row.marB0 > .bg-mission-img,
    .section.bg-white > .row.marB0 > .bg-green-img,
    .section.bg-white > .row.marB0 > .bg-grey-img {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

/* The FAQ page inherited a grey page background. The content is a light panel,
   so force white on the section itself. */
.faq-section {
    background: #fff !important;
}


/* ============================================================
   Client page restyles. Same visual language as the four public pages;
   content on these is deliberately different since they are
   post-contract.
   ============================================================ */

/* Standard Process (client) heading keeps its two-part split. Gold works here
   because it sits on the dark hero scrim. */
.sp-hero-title-accent {
    color: #EFC15A;
}

/* FAQ (client) heading accent. Dark green rather than gold - this is on white,
   where gold is about 1.8:1 contrast. */
.faq-heading-accent {
    color: #013410;
    font-weight: 400;
}

.faq-link {
    color: #013410;
    font-weight: 700;
    text-decoration: underline;
}


/* ============================================================
   Testimonials page. Restyled to match the rebrand, plus the Google
   rating badge.

   The badge shows the aggregate only - the Places API cannot filter
   which five reviews it returns, so an embedded feed would put
   one-star reviews on the marketing page. Aggregate is verifiable,
   the testimonials beside it are the business's own, and the link
   lets anyone read the rest.
   ============================================================ */

.tm-section {
    background: #fff;
    padding: 40px 0 50px;
}

.tm-heading {
    color: #013410;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 24px;
}

/* Accent stays dark green rather than gold: this is on white, where gold is
   about 1.8:1 contrast. Gold is for dark backgrounds and buttons. */
.tm-heading-accent {
    color: #013410;
    font-weight: 400;
}

@media only screen and (max-width: 600px) {
    .tm-heading {
        font-size: 1.55rem;
    }

    .tm-aggregate-score {
        font-size: 1.6rem;
    }

    .tm-card {
        padding: 18px;
    }
}


/* ============================================================
   About Us panel fixes, from review.

   .mission and .founder are legacy rules sized for the old short
   content: .mission carries 38.8% bottom padding and .founder a 29%
   right margin. With the new longer copy that produced a very tall
   panel with a large empty area beneath and text squeezed into the
   left two-thirds.

   Overridden here rather than edited in place because .mission is
   also used by the home page, which still has its original content.
   Scoping to the About panels leaves that untouched.
   ============================================================ */

.bg-mission-img .mission,
.bg-green-img .founder {
    padding: 44px 0;
    margin-left: 0;
    margin-right: 0;
}

/* The panels are flex columns (so their heights match), so the inner block
   needs its own horizontal padding rather than relying on a margin. */
.bg-mission-img,
.bg-green-img {
    padding: 0 38px;
}

/* Materialize styles h2 with its own colour and wins on specificity, which
   rendered this heading dark grey on the dark green panel. */
.au-panel-title-onDark {
    color: #EFC15A !important;
}

/* Same reason - the white panel heading was inheriting Materialize's colour. */
.bg-mission-img .au-panel-title {
    color: #013410 !important;
}

@media only screen and (max-width: 600px) {
    .bg-mission-img,
    .bg-green-img {
        padding: 0 22px;
    }

    .bg-mission-img .mission,
    .bg-green-img .founder {
        padding: 30px 0;
    }
}


/* Home page Mission panel. Still carried the original padding: 8% 0 38.8%,
   which leaves roughly 40% of the panel width as empty space beneath the copy.
   The About page equivalent (.bg-mission-img) was fixed separately; this is the
   home page's own panel and needs the same treatment.

   Bottom padding kept slightly larger than the top so the copy sits above centre
   rather than being pushed down by happy.png's composition - the subject in that
   photo occupies the lower left. */
.bg-grey-img .mission {
    padding: 6% 0 10%;
}

/* The Founder panel opposite it already picked this up, since .bg-green-img
   .founder is shared with the About page. Listed here only so the pairing is
   obvious to whoever reads this next. */


/* ============================================================
   Google reviews on the Testimonials page.

   Cards in a staggered grid, per the reference Jill supplied. Each
   card shows the reviewer's own words verbatim with the Google mark
   and a link to that specific review, so it is checkable rather than
   just branded.

   CSS columns rather than flex or grid: cards of differing length
   then stack and stagger instead of stretching to match the tallest
   in a row, which is what produces the reference's look.
   ============================================================ */

/* --- Aggregate line --- */
.tm-aggregate {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 30px;
}

.tm-aggregate-score {
    color: #013410;
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1;
}

.tm-aggregate-stars i {
    color: #EFC15A;
    font-size: 1.3rem;
    margin-right: 1px;
}

.tm-aggregate-count {
    color: #013410;
    font-size: 1.05rem;
    text-decoration: underline;
}

    .tm-aggregate-count:hover {
        color: #013410;
    }

/* --- Card grid --- */
.tm-cards {
    column-count: 3;
    column-gap: 22px;
    margin-bottom: 26px;
}

@media only screen and (max-width: 992px) {
    .tm-cards {
        column-count: 2;
    }
}

@media only screen and (max-width: 600px) {
    .tm-cards {
        column-count: 1;
    }
}

.tm-card {
    /* break-inside is what keeps a card from being split across two
       columns - without it the grid tears cards in half. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;

    display: inline-block;
    width: 100%;
    background: #fff;
    border: 1px solid #e4e7ec;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
    padding: 20px 22px;
    margin-bottom: 22px;
    vertical-align: top;
}

.tm-card-stars {
    text-align: center;
    margin-bottom: 12px;
}

    .tm-card-stars i {
        color: #EFC15A;
        font-size: 1.15rem;
        margin: 0 1px;
    }

.tm-card-text {
    color: #475467;
    font-size: .96rem;
    line-height: 1.65;
    margin: 0 0 16px;
}

.tm-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tm-card-who {
    display: flex;
    flex-direction: column;
}

.tm-card-author {
    color: #013410;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.tm-card-when {
    color: #98a2b3;
    font-size: .78rem;
    margin-top: 2px;
}

.tm-card-google {
    flex: 0 0 auto;
    line-height: 1;
}

    .tm-card-google img {
        width: 22px;
        height: 22px;
        display: block;
    }

.tm-cards-foot {
    text-align: center;
    margin-bottom: 40px;
}


/* ============================================================
   About Us hero - "Why trust us vs others?" link to Testimonials.
   Sits on the same dark green hero scrim as the rest of the About
   copy, so it needs the gold treatment (accents/buttons on dark),
   not the dark-green-on-white rule used for links elsewhere.
   ============================================================ */
.au-hero-link {
    color: #EFC15A;
    font-weight: 700;
    text-decoration: underline;
    margin-left: 4px;
}

    .au-hero-link:hover {
        color: #D9A63F;
    }