@font-face {
    font-family: 'FontAwesome';
    src: url('/lib/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('/lib/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
         url('/lib/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
         url('/lib/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
         url('/lib/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    background: #fbfafa;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 18px;
    color: #000;
}

html, body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by its height */
    margin: 0 auto -197px;
    /* Pad bottom by footer height */
    padding: 0 0 197px;
    background-color: white;
}

#features {
    padding-top: 10px;
}

a {
    color: #C22E22;
    -webkit-transition: 300ms;
    -moz-transition: 300ms;
    -o-transition: 300ms;
    transition: 300ms;
}

    a:hover {
        outline: none;
        text-decoration: none;
        color: #C22E22;
    }

    a:focus {
        outline: none;
        outline-offset: 0;
    }

h1, h2, h3, h4, h5, h6 {
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
}

h1 {
    color: black;
}

h3 {
    font-size: 24px;
    color: black;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: bold;
}

.project-name h3 {
    color: #C22E22;
}

.service h2 {
    margin-top: 10px;
}

h2 {
    font-size: 22px;
    color: #C22E22;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px 0px 10px 0px;
}

    h2 a {
        font-size: 22px;
        color: #C22E22;
        font-weight: bold;
        text-transform: uppercase;
        margin: 0px 0px 10px 0px;
    }

h4 {
    font-size: 18px;
    color: #C22E22;
    text-transform: uppercase;
    margin: 0px;
}

h4 {
    font-size: 18px;
    color: #C22E22;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0px;
}

h5 {
    font-size: 16px;
    text-transform: uppercase;
    margin: 0px 0px 10px 0px;
}

.overflow {
    overflow: hidden;
}

.uppercase {
    text-transform: uppercase;
}

/* Positioning only. The appearance (size, colour, Font Awesome chevron) is
   set in the redesign block at the end of this file; up-arrow.png is retired. */
a.back-to-top {
    display: none;
    position: fixed;
    z-index: 999;
    right: 20px;
    bottom: 20px;
}

.btn-common {
    font-size: 14px;
    color: white;
    background-color: #C22E22;
    border: 1px solid #C22E22;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    padding: 10px 25px;
    white-space: normal !important;
    word-wrap: break-word;
    border-bottom: 3px solid #9C2317;
}

.grid-section .container {
    padding-top: 10px;
    padding-bottom: 25px;
}

#action .col-sm-5 {
    position: absolute;
    top: 0;
    height: 100%;
    right: 0;
}

.btn-common:hover,
.btn-common:focus {
    outline: none;
    box-shadow: none;
    color: white;
    border-color: #C22E22;
}

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

.inline {
    display: inline-block;
}

.padding {
    padding: 65px 0;
}

.padding-bottom {
    padding-bottom: 65px;
}

.padding-top {
    padding-top: 30px;
}

.padding-right {
    padding-right: 80px;
}

.padding-left {
    padding-left: 80px;
}

.margin-bottom {
    margin-bottom: 35px;
}

.carousel-indicators.visible-xs {
    height: 20px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -35px;
    width: 100%;
    left: 0;
}

    .carousel-indicators.visible-xs li {
        border-color: #D29948;
        border-width: 2px;
        height: 12px;
        margin: 0 5px 0 0;
        width: 12px;
    }

        .carousel-indicators.visible-xs li.active {
            background: rgba(210, 153, 72, 0.7);
        }

#content {
    padding-top: 124px;
    background-color: #fff;
}

    #content img {
        max-width: 100%;
        height: auto;
    }


.contour label.fieldLabel {
    font-weight: normal;
}

.radiobuttonlist {
    font-weight: normal;
}

.help-block {
    font-size: 14px;
}


.jssora05l, .jssora05r {
    display: block;
    position: absolute;
    /* size of arrow element */
    cursor: pointer;
    height: 45px;
    width: 44px;
    top: 220px;
    z-index: 1000;
}

.jssora05l {
    background-position: 0 0;
    background-image: url(../images/arrow_left.png);
    left: 20px;
}

.jssora05r {
    background-position: -44px -44px;
    background-image: url(../images/arrow_right.png);
    right: 20px;
}

.jssora05l:hover {
    background-position: 0 0;
}

.jssora05r:hover {
    background-position: -44px -44px;
}

.jssora05l.jssora05ldn {
    background-position: 0 0;
}

.jssora05r.jssora05rdn {
    background-position: -44px -44px;
}

.jssora05l.jssora05lds {
    background-image: none;
    background-color: transparent;
}

.jssora05r.jssora05rds {
    background-image: none;
    background-color: transparent;
}

/*************************
*******Header******
**************************/


#header {
    margin-bottom: 0;
    padding: 15px 0 15px 0;
    background-color: white;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: .4s ease all;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
}

#logo {
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: .4s ease all;
    width: 250px;
}

#header.sticky {
    padding: 5px 0 15px 0 !important;
    -webkit-box-shadow: 0 0 8px 0 #000; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
    box-shadow: 0 0 8px 0 #000; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ */
    height: 65px;
}

#header .social-container {
    display: block;
    height: 25px;
    -webkit-transition: all .4s ease;
    -o-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: .4s ease all;
}

#header.sticky .social-container {
    display: none;
}

#header.sticky #logo {
    width: 150px;
    height: 34px;
}

/*#header.sticky .navbar-brand img {
            max-width:150px;
    }*/

#header .navbar-inverse .container {
    position: relative;
}

#header.sticky .navbar-brand {
    padding-top: 5px;
}


.news {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #AEADAD;
}

    .news h3 {
        margin-bottom: 0px;
    }

.social-icons ul li {
    padding: 0 10px;
}

    .social-icons ul li:last-child {
        padding-right: 0;
    }

    .social-icons ul li a {
        font-size: 18px;
        color: #d3d3d3;
        padding: 0;
    }

        .social-icons ul li a:hover .fa-facebook {
            color: #0884d5;
        }

        .social-icons ul li a:hover .fa-twitter {
            color: #2AA7DC;
        }

        .social-icons ul li a:hover .fa-google-plus {
            color: #C22E22;
        }

        .social-icons ul li a:hover .fa-dribbble {
            color: #E94989;
        }

        .social-icons ul li a:hover .fa-linkedin {
            color: #006DC0;
        }

        .social-icons ul li a:hover,
        .social-icons ul li a:focus {
            background: none;
        }

#header .navbar {
    background: #fff;
    border: 0;
    margin-bottom: 0;
}

#header .navbar-toggle {
    margin-top: 20px;
}

#header .navbar-brand {
    padding: 0;
    margin-left: 0;
}

    #header .navbar-brand h1 {
        padding: 0;
        margin: 0;
    }

#header .navbar-nav.navbar-right > li:last-child {
    margin-right: 20px;
}

#header .navbar-nav.navbar-right > li a {
    color: #000;
    font-size: 12px;
    padding: 20px;
    text-transform: uppercase;
    font-weight: normal;
}


#header .navbar-inverse .navbar-nav li.active > a,
#header .navbar-inverse .navbar-nav li.active > a:focus,
#header .navbar-nav.navbar-right li > a:hover,
.navbar-inverse .navbar-nav > .open > a {
    background-color: inherit;
    border: 0;
    color: #C22E22;
}

#header .navbar-inverse .navbar-nav li a:hover {
    color: #C22E22;
}


/*  Dropdown menu*/

ul.sub-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

#header .navbar-nav li ul.sub-menu li a {
    color: black;
    padding: 5px 0;
    font-size: 13px;
    display: block;
    text-transform: capitalize;
}

#header .navbar-nav li ul.sub-menu li .active {
    background: #C22E22;
    color: #fff;
    position: relative;
}

    #header .navbar-nav li ul.sub-menu li .active i {
        position: absolute;
        font-size: 56px;
        top: -13px;
        color: #C22E22;
    }

    #header .navbar-nav li ul.sub-menu li .active .fa-angle-right {
        left: -3px;
    }

    #header .navbar-nav li ul.sub-menu li .active .fa-angle-left {
        right: -3px;
    }

#header .navbar-nav li ul.sub-menu li a:hover,
#header .navbar-nav li ul.sub-menu li a:focus {
    background: #C22E22;
    color: #fff;
}

.fa-angle-down {
    padding-left: 5px;
}

.scaleIn {
    -webkit-animation-name: scaleIn;
    animation-name: scaleIn;
}

@-webkit-keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
}

.home {
    padding-top: 25px;
    padding-bottom: 25px;
}

.homebox {
    padding-top: 25px;
    padding-bottom: 25px;
}

    .homebox a {
        color: #C22E22;
        font-size: 22px;
        font-weight: bold;
    }

        .homebox a:hover {
            color: #C22E22;
        }

.homebox2 {
    text-align: center;
    background-color: #616060;
    padding-top: 25px;
    padding-bottom: 25px;
    color: white;
}

.homebox2 h2,
.homebox2 h3,
.homebox2 h4 {
    color:white;
    font-size:22px;
    font-weight:bold;
}

    .homebox2 a {
        color: WHITE;
        font-size: 22px;
        font-weight: bold;
    }

.services {
    padding-bottom: 10px;
}

.service {
    text-align: center;
}

    .service .summary {
        text-align: left;
    }

.testimonial_top {
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center;
}

    .testimonial_top a {
        color: #8d8c8c;
    }
    .testimonial_top a:hover {
        color: #C22E22;
    }

.testimonials {
    padding-top: 50px;
    padding-bottom: 20px;
    border-bottom: 1px solid #AEADAD;
}

.img-responsive {
    margin-bottom: 20px;
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
    border: 1px solid #AEADAD;
}

.img-responsive2 {
    max-width: 100%;
    height: auto;
    display: block;
}

.fa_date {
    font-size: 12px;
}
/*************************
*******Footer******
**************************/

#footer {
    padding-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid #CDCDCD;
}

    #footer h1 {
        margin-bottom: 65px;
        margin-top: 36px;
    }

    #footer .bottom-separator {
        margin-bottom: 60px;
    }

.footerpriv {
    margin-top: 10px;
}

#message {
    height: 110px;
    resize: none;
}

.bottom > h2 {
    margin-top: 0;
    margin-bottom: 26px;
}

.bottom .media-body h3 {
    margin-top: 0;
    padding-left: 25px;
}

    .bottom .media-body h3 a {
        color: #4B4B4B;
    }

.testimonial {
    color: #333333;
    text-align: right;
}

    .testimonial a {
        color: #646464;
    }

        .testimonial a:hover {
            outline: none;
            text-decoration: none;
            color: #C22E22;
        }

    .testimonial .media {
        margin-top: 0;
        margin-bottom: 25px;
    }

.fa-2x {
    line-height: 0.75em;
    color: #333333;
}

.contact-info.bottom {
    padding-left: 25px;
    color: #333333;
}

    .contact-info.bottom a {
        color: #333333;
    }

        .contact-info.bottom a:hover {
            outline: none;
            text-decoration: none;
            color: #C22E22;
        }

.bottom > address {
    line-height: 22px;
    margin-bottom: 20px;
}

.form-control {
    border: 1px solid #d6d4d4;
    font-weight: normal;
    outline: none;
    box-shadow: none;
    height: 40px;
}

    .form-control:hover,
    .form-control:focus {
        border-color: #4fcccd;
        outline: none;
        box-shadow: none;
    }

.btn-submit {
    width: 100%;
    background-color: #C22E22;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 5px;
    text-transform: uppercase;
    border-radius: 3px;
    margin-top: 5px;
    border-bottom: 3px solid #9C2317;
    box-shadow: none;
    padding: 10px;
}

    .btn-submit:hover,
    .btn-submit:focus {
        color: #fff;
        outline: none;
        box-shadow: none;
        opacity: .8;
    }

.copyright-text {
    margin-top: 70px;
    color: #333333;
    font-size: 16px;
    padding-bottom: 15px;
}

    .copyright-text a {
        color: #3e848a;
    }

    .copyright-text p {
        margin-bottom: 0;
    }

/*************************
*******Home Page******
**************************/
.animate-in .slide-text {
    -webkit-animation: fadeInLeftBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 200ms both;
    animation: fadeInLeftBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 200ms both;
}

.animate-in .slide-text2 {
    -webkit-animation: fadeInLeftBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 300ms both;
    animation: fadeInLeftBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 300ms both;
}

.animate-in .slide-text3 {
    -webkit-animation: fadeInLeftBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 300ms both;
    animation: fadeInRightBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 800ms both;
}

.animate-in .slide-text4 {
    -webkit-animation: fadeInLeftBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 500ms both;
    animation: fadeInRightBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 900ms both;
}

.animate-in .slide-button {
    -webkit-animation: bounceInDown 1000ms ease-in-out 200ms both;
    animation: bounceInUp 1000ms ease-in-out 800ms both;
}

.home_grey {
    background-color: #616060;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

    .home_grey h3 {
        color: white;
    }

    .home_grey a {
        text-shadow: 0px 0px 0px rgba(0, 0, 0, 1);
        color: white;
        font-weight: bold;
        font-style: italic;
    }

.highlight {
    background-color: #AEADAD;
    background-repeat: repeat-x;
    height: 157px;
    background-position: center;
    display: table;
    position: static;
    width: 100%;
    padding-top: 25px;
}

    .highlight p {
        font-size: 30px;
        color: white;
        font-weight: bold;
        text-align: center;
        text-shadow: 2px 2px black;
    }

    .highlight a {
        text-shadow: none;
    }

.highlight2 {
    background-color: #AEADAD;
    background-repeat: repeat-x;
    height: 157px;
    background-position: center;
    display: table;
    position: static;
    width: 100%;
    padding-top: 25px;
    padding-bottom: 45px;
}

    .highlight2 p {
        font-size: 30px;
        color: white;
        font-weight: bold;
        text-align: center;
        text-shadow: 2px 2px black;
    }

    .highlight2 a {
        text-shadow: none;
    }

div.frontSlider.slider {
    height: 400px;
    overflow: hidden;
}

.slick-slider p {
    font-size: 40px;
    color: white;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px black;
}

.animate-in .highlight .item1 {
    -webkit-animation: fadeInLeftBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 200ms both;
    animation: fadeInLeftBig 700ms cubic-bezier(0.190,1.000,0.220,1.000) 200ms both;
}

#action {
    background-color: #fbfafa;
    background-repeat: repeat-x;
    height: 157px;
    background-position: center;
    display: table;
    position: static;
    width: 100%;
}

.vertical-center {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    position: static;
}


.action h1 {
    margin-top: 0;
}

.action p {
    font-size: 18px;
    margin-bottom: 0;
    font-weight: normal;
}

.action .btn-common {
    margin-top: 55px;
    float: left;
}

.title {
    color: #404040;
    font-weight: normal;
}

/* 2026 redesign: h2.title.LargeH2, h1.smallh1 and h1.newsh1 were removed.
   All three named an element the templates did not pair with that class, so
   they had been dead for years and carried off-brand values (24px uppercase,
   color:black). Live styling for these classes is in the redesign block,
   matched on the class alone so the element cannot matter again. */

.readmore a {
    float: right;
    font-size: 14px;
    color: white;
    background-color: #C22E22;
    border: 1px solid #C22E22;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-weight: normal;
    padding: 10px 25px;
    white-space: normal !important;
    word-wrap: break-word;
    border-bottom: 3px solid #9C2317;
}

.readmore-nofloat {
    padding-top: 15px;
    text-align: center;
}

    .readmore-nofloat a {
        float: none;
        font-size: 14px;
        color: white;
        background-color: #C22E22;
        border: 1px solid #C22E22;
        font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
        font-weight: normal;
        padding: 10px 25px;
        white-space: normal !important;
        word-wrap: break-word;
        border-bottom: 3px solid #9C2317;
    }

    .readmore-nofloat a:hover {
        color: white;
    }

.home_grey .readmore a {
    background-color: #515151;
    border: 1px solid #313131;
}

.home_news {
    padding-top: 25px;
}

.home_news .readmore a {
    background-color: #515151;
    border: 1px solid #313131;
    color:white;
}

.home_news a {
    color:black;
    font-weight:bold;
}

/*************************
*******About Us Page******
**************************/

#action,
#page-breadcrumb {
    position: relative;
}

#page-breadcrumb {
    position: static;
    width: 100%;
    margin-bottom: 15px;
}

.top-zero {
    margin-top: 0;
}

h3.top-zero {
    font-size: 20px;
}

.progress {
    height: 30px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.progress-bar {
    line-height: 30px;
    box-shadow: none;
    -webkit-box-shadow: none;
}

    .progress-bar.progress-bar-primary {
        background: #00aeef;
    }



/*************************
*******Service Page******
**************************/
#recent-projects {
    padding: 85px 0;
}

.recent-projects .team-single {
    height: 355px;
}

.recent-projects p.padding-bottom {
    padding-bottom: 50px;
}

.choose {
    padding-top: 30px;
}

ul.elements {
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul.elements li {
        margin: 6px 0;
    }

        ul.elements li > i {
            color: #C22E22;
            display: inline-block;
            margin-right: 10px;
        }

/*************************
*******Portfolio Default**
**************************/
.portfolio-note {
    font-style: italic;
    font-size: .75em;
    color: #616060;
}

#portfolio .row {
    margin-left: -10px;
    margin-right: -10px;
}

.portfolio-view {
    display: none;
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(112, 35, 64, 0.9);
    width: 100%;
    text-align: center;
}

    .portfolio-view .nav-pills {
        padding: 0;
        display: inline-block;
        margin-top: -26px;
        top: 50%;
        position: relative;
    }

        .portfolio-view .nav-pills li {
            display: inline-block;
            margin: 0 5px;
        }

            .portfolio-view .nav-pills li a {
                color: #fff;
                border: 1px solid #fff;
                width: 40px;
                height: 40px;
                line-height: 38px;
                text-align: center;
                padding: 0;
                border-radius: 40px;
                -webkit-animation: scaleIn 400ms linear 100ms both;
                animation: scaleIn 400ms linear 100ms both;
                -webkit-transition: all 0.9s ease;
                transition: all 0.9s ease;
            }

                .portfolio-view .nav-pills li a:hover {
                    color: #C22E22;
                    border-color: #C22E22;
                    -webkit-transition: all 0.9s ease;
                    transition: all 0.9s ease;
                }

.portfolio-info {
    overflow: hidden;
    margin-bottom: 30px;
    text-align: center;
}

    .portfolio-info h2 {
        font-size: 18px;
        margin: 15px 0 0;
    }

.portfolio-pagination {
    text-align: center;
    padding-top: 40px;
    padding-bottom: 90px;
}

.pagination li {
    display: inline-block;
    margin: 0 10px;
}

    .pagination li a {
        color: #000;
        padding: 5px 10px;
        border-radius: 5px;
        border: 1px solid #fff;
    }

    .pagination li:first-child a {
        width: 32px;
        height: 36px;
        border: none;
        -webkit-transition: 300ms;
        -moz-transition: 300ms;
        -o-transition: 300ms;
        transition: 300ms;
    }

        .pagination li:first-child a:hover {
            -webkit-transition: 300ms;
            -moz-transition: 300ms;
            -o-transition: 300ms;
            transition: 300ms;
        }

    .pagination li:last-child a {
        width: 32px;
        height: 36px;
        border: none;
        -webkit-transition: 300ms;
        -moz-transition: 300ms;
        -o-transition: 300ms;
        transition: 300ms;
    }

        .pagination li:last-child a:hover {
            -webkit-transition: 300ms;
            -moz-transition: 300ms;
            -o-transition: 300ms;
            transition: 300ms;
        }

    .pagination li a:hover,
    .pagination .active a,
    .pagination a:active,
    .pagination .active a:hover,
    .pagination .active a:focus,
    .pagination a:focus {
        background: transparent;
        border-color: #C22E22;
        color: #C22E22;
    }


/*****************************
Portfolio with right sidebar
*****************************/

.sidebar h3 {
    color: #404040;
    margin-top: 0;
    border-bottom: 3px solid #ececec;
    margin-bottom: 6px;
    padding-bottom: 8px;
}

.sidebar-item {
    margin-bottom: 48px;
}

.categories .navbar-stacked li {
    border-bottom: 1px solid #ececec;
}

    .categories .navbar-stacked li:last-child {
        border-bottom: 0px solid #ececec;
    }

    .categories .navbar-stacked li a {
        font-size: 16px;
        color: #6a6a6a;
        padding: 8px 0;
        padding-left: 0;
    }

        .categories .navbar-stacked li a:hover {
            background: none;
            margin-left: 20px;
            color: #C22E22;
            opacity: 1;
        }

    .categories .navbar-stacked li.active a {
        color: #C22E22;
        padding-left: 20px;
    }

        .categories .navbar-stacked li.active a:before {
            position: absolute;
            content: "";
            border-color: transparent transparent transparent #C22E22;
            border-width: 8px;
            border-style: solid;
            left: 0;
            top: 13px;
            margin-top: 0;
            z-index: 0;
            transition: all 0.3s ease 0s;
            -moz-transition: all 0.3s ease 0s;
            -webkit-transition: all 0.3s ease 0s;
            -o-transition: all 0.3s ease 0s;
        }

        .categories .navbar-stacked li.active a:after {
            position: absolute;
            content: "";
            border-color: transparent transparent transparent #fff;
            border-width: 6px;
            border-style: solid;
            left: 0px;
            top: 15px;
            margin-top: 0;
            z-index: 1;
            transition: all 0.3s ease 0s;
            -moz-transition: all 0.3s ease 0s;
            -webkit-transition: all 0.3s ease 0s;
            -o-transition: all 0.3s ease 0s;
        }

.sidebar-item .media {
    border-bottom: 1px solid #ececec;
    padding-bottom: 10px;
    padding-top: 21px;
    margin-top: 0;
    transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
}

    .sidebar-item .media:last-child {
        border-bottom: 0px solid #ececec;
        padding-bottom: 0;
    }

    .sidebar-item .media:hover {
        border-left: 2px solid #0099AE;
        padding-left: 5px;
        transition: all 0.3s ease 0s;
        -moz-transition: all 0.3s ease 0s;
        -webkit-transition: all 0.3s ease 0s;
        -o-transition: all 0.3s ease 0s;
    }

        .sidebar-item .media:hover.media .media-body h4 a {
            color: #0099AE;
            transition: all 0.3s ease 0s;
            -moz-transition: all 0.3s ease 0s;
            -webkit-transition: all 0.3s ease 0s;
            -o-transition: all 0.3s ease 0s;
        }

    .sidebar-item .media .media-body h4 {
        margin-top: 0;
        margin-bottom: 8px;
    }

        .sidebar-item .media .media-body h4 a {
            color: #7d7d7d;
            font-size: 16px;
        }

    .sidebar-item .media .media-body p {
        color: #b4b4b4;
        font-size: 12px;
    }

.tag-cloud .nav-pills {
    margin-top: 16px;
}

    .tag-cloud .nav-pills li {
        margin: 0;
        margin-top: 6px;
        margin-right: 4px;
    }

        .tag-cloud .nav-pills li a {
            font-size: 14px;
            font-weight: normal;
            padding: 5px 15px;
            background: #bbbbbb;
            color: #fff;
            border-radius: 3px;
        }

            .tag-cloud .nav-pills li a:hover {
                background: #0099AE;
            }



/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/
.isotope-item {
    z-index: 2;
}

.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -ms-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}

    .isotope .isotope-item {
        -webkit-transition-property: -webkit-transform, opacity;
        -moz-transition-property: -moz-transform, opacity;
        -ms-transition-property: -ms-transform, opacity;
        -o-transition-property: -o-transform, opacity;
        transition-property: transform, opacity;
    }

        /**** disabling Isotope CSS3 transitions ****/
        .isotope.no-transition,
        .isotope.no-transition .isotope-item,
        .isotope .isotope-item.no-transition {
            -webkit-transition-duration: 0s;
            -moz-transition-duration: 0s;
            -ms-transition-duration: 0s;
            -o-transition-duration: 0s;
            transition-duration: 0s;
        }




/*****************************
Portfolio Details
*****************************/

#portfolio-information.padding-top {
    padding-top: 20px;
    padding-bottom: 40px;
}

#portfolio-information img {
    margin: auto;
}

.project-name h2 {
    margin-top: 0;
    margin-bottom: 15px;
}

#related-work .title {
    margin-bottom: 55px;
    margin-top: 10px;
}

.navbar-default {
    background: none;
    padding: 0;
}

    .navbar-default li a {
        font-size: 12px;
        padding: 0;
        padding-right: 15px;
    }

        .navbar-default li a i {
            padding-right: 8px;
        }

        .navbar-default li a:hover {
            color: #0884d5;
            background: none;
        }

.skills .navbar-default,
.client .navbar-default {
    margin-left: 35px;
}

.skills h5 {
    display: inline-block;
    float: left;
}

.live-preview .btn-common {
    margin-top: 21px;
    /* 2026 redesign: padding removed. .live-preview .btn-common (0,2,0) beat
       the redesign's .btn-common (0,1,0), so the "Live preview" button on
       portfolio detail pages kept the old 13px/45px proportions while every
       other .btn-common on the site used 14px/24px. */
}


#contact-form .btn-submit {
    width: 28%;
    margin: 5px auto;
}

.btn-error {
    background-color: rgba(0, 0, 0, 0);
    border: 3px solid #C22E22;
    color: #797979;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 50px;
    margin-top: 50px;
    padding: 25px 53px;
    text-transform: uppercase;
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

    .btn-error:hover, .btn-error:focus {
        background-color: #C22E22;
        border-color: #C22E22;
        color: #fff;
    }

/*Shortcodes CSS*/
.bs-example {
    margin: 0 0 20px;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background-color: #4FCCCD;
}

.tab-content {
    padding-top: 20px;
}

/*Features*/
.feature-inner {
    text-align: center;
}

.icon-wrapper {
    display: inline-block;
    background-color: #4FCCCD;
    color: #fff;
    padding: 25px;
    box-shadow: 0 0 0 5px rgba(0,0,0,.1) inset;
    -webkit-box-shadow: 0 0 0 5px rgba(0,0,0,.1) inset;
    border-radius: 100%;
    margin: 10px 0;
}

/* ==========================================================================
   Inhouse Associates - 2026 redesign
   --------------------------------------------------------------------------
   Appended to the end of main.css on purpose: at equal specificity the later
   rule wins, so this block overrides the legacy styles above without needing
   !important. Keep it last in this file.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */
/* anchors rem: guarantees 1rem = the browser default (16px), so nothing
   upstream can shrink the whole scale */
html { font-size: 100%; }

:root {
    /* warm neutrals — deliberately not the old cool grey */
    --ground: #EEEAE6;
    --surface: #FBF9F7;
    --surface-2: #E5DFD8;
    --ink: #1E1917;
    --ink-2: #5F564F;
    --ink-3: #8F857D;
    --line: #D5CEC6;
    --line-soft: #E2DBD4;

    /* brand red, deepened from #ff0000 so it stops vibrating on screen */
    --red: #C22E22;
    --red-hi: #9C2317;
    --on-red: #FFF6F3;

    /* dark band (portfolio) — fixed, does not follow a theme */
    --dark: #161210;
    --dark-line: #453B34;
    --dark-ink: #F6F1ED;
    --dark-ink-2: #C6B9AF;
    --dark-ink-3: #9B8F85;
    --dark-red: #EA7364;

    --radius: 3px;
    --shadow: 0 1px 2px rgba(46,36,30,.06), 0 14px 34px -18px rgba(46,36,30,.4);
    --shadow-dark: 0 1px 2px rgba(0,0,0,.5), 0 16px 38px -18px rgba(0,0,0,.9);

    --font-display: "Jost", "Century Gothic", futura, sans-serif;
    --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --ease: cubic-bezier(.2,.7,.3,1);
    --shell: 1240px;
}


/* ==========================================================================
   2. Base
   ========================================================================== */
body {
    background: #EEEAE6;
    color: #1E1917;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16.5px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

/* --- type scale -------------------------------------------------------------
   main.css sets a small scale (body 16px, h2 22px, h3 24px) AND, critically,
   `h2 a { font-size: 22px }`. Service headings are links, so the anchor was
   re-shrinking every heading from the inside. The `h_ a` rule below fixes that.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    color: #1E1917;
    text-wrap: balance;
}
h1 {
    font-size: 65px;
    line-height: 1.06;
    letter-spacing: -.028em;
    font-weight: 600;
    margin: 0 0 .35em;
}
h2 {
    font-size: 50px;
    line-height: 1.04;
    letter-spacing: -.022em;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 20px;
}
/* h3 is the in-content subheading: the level editors reach for inside body
   copy. Sentence case and closer to the text, so a page of them reads as
   structure rather than a stack of banners. Section titles stay on h2. */
h3 {
    font-size: 24px;
    line-height: 1.22;
    letter-spacing: -.014em;
    font-weight: 600;
    text-transform: none;
    color: #1E1917;
    margin: 0 0 12px;
}
h4 {
    font-size: 1.12rem;
    line-height: 1.25;
    letter-spacing: -.008em;
    font-weight: 600;
    text-transform: uppercase;
    color: #1E1917;
    margin: 0 0 10px;
}
h5 { font-size: 1.02rem; font-weight: 600; text-transform: uppercase; margin: 0 0 10px; }

/* a heading that wraps a link must not shrink to the link's size */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    font-family: inherit;
    color: inherit;
    margin: 0;
}

/* body copy — main.css leaves a lot of 14px around */
#content p,
#content li,
.summary,
.grid-section p,
.rte p { font-size: 1.02rem; line-height: 1.68; }

/* Space above an h3 that follows body content, so consecutive sections in a
   rich-text field separate properly without editors adding empty paragraphs. */
#content p + h3,
#content ul + h3,
#content ol + h3,
#content img + h3,
#content div + h3,
#content table + h3 { margin-top: 40px; }

.lede,
.summary { color: #5F564F; font-size: 1.05rem; max-width: 62ch; }

a { color: #C22E22; transition: color .18s ease; }
a:hover, a:focus { color: #9C2317; text-decoration: none; }

:focus-visible { outline: 2px solid #C22E22; outline-offset: 3px; border-radius: 2px; }

img { max-width: 100%; }

.ih-label {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8F857D;
    margin: 0;
}
.ih-label--red { color: #C22E22; }


/* ==========================================================================
   3. Buttons  (.readmore / .readmore-nofloat come from the macros)
   ========================================================================== */
.readmore,
.readmore-nofloat,
.btn-ih {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 22px;
    border: 1px solid #D5CEC6;
    border-radius: 3px;
    color: #1E1917;
    background: transparent;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.readmore:hover,
.readmore-nofloat:hover,
.btn-ih:hover {
    color: #1E1917;
    border-color: #1E1917;
    background: #FBF9F7;
    transform: translateY(-1px);
}
.btn-ih--primary {
    background: #C22E22;
    border-color: #C22E22;
    color: #FFF6F3;
}
.btn-ih--primary:hover,
.btn-ih--primary:focus {
    background: #9C2317;
    border-color: #9C2317;
    color: #FFF6F3;
}
/* <input type="submit" class="btn-ih"> (contact form): drop the native control
   look - iOS Safari otherwise paints it as a blue rounded system button */
input.btn-ih {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    line-height: normal;
}
/* outline button for use over dark photography */
.btn-ih--light {
    border-color: rgba(250,245,242,.42);
    color: #FBF7F4;
    background: transparent;
}
.btn-ih--light:hover,
.btn-ih--light:focus {
    border-color: #FBF7F4;
    background: rgba(250,245,242,.1);
    color: #FBF7F4;
}


/* ==========================================================================
   4. Header — top bar, sticky nav, dropdowns, quote button
   --------------------------------------------------------------------------
   main.css sets #header{position:fixed} with #content{padding-top:124px} to
   compensate, and Scripts/main.js toggles .sticky on scroll. main.css uses
   !important inside #header.sticky, so some overrides here must match it.
   ========================================================================== */
#header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1001;
    padding: 0 !important;
    height: auto !important;
    background: #EEEAE6;
    border-bottom: 1px solid transparent;
    box-shadow: none !important;
    transition: background .25s ease, border-color .25s ease;
}
#header.sticky {
    padding: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    background: rgba(238,234,230,.93);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border-bottom-color: #E2DBD4;
}
/* top bar hides on scroll — same behaviour main.css gave .social-container */
#header.sticky .ih-topbar { display: none; }

/* Fallback only: Scripts/main.js measures #header and overwrites this on
   load/resize. Kept so there is no jump before scripts run. */
#content {
    padding-top: 111px;
    /* main.css sets #content{background:#fff} further up, which painted over
       the body ground. This is the mockup's warm greige. */
    background-color: #EEEAE6;
}

/* --- top bar --- */
.ih-topbar {
    background: #FBF9F7;
    border-bottom: 1px solid #E2DBD4;
}
.ih-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 42px;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 28px;
}
.ih-topbar__left { display: flex; align-items: center; gap: 20px; }
.ih-topbar__loc { font-size: 10.5px; }

.ih-tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: .82rem;
    letter-spacing: .04em;
    color: #1E1917;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: color .18s ease;
}
.ih-tel:hover { color: #C22E22; }
.ih-tel .fa { color: #C22E22; }

/* --- social icons (top bar + footer) --- */
.social-icons { float: none !important; }
.social-icons .nav-pills { display: flex; gap: 2px; margin: 0; padding: 0; }
.social-icons .nav-pills > li { float: none; }
.social-icons .nav-pills > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 3px;
    background: transparent;
    color: #5F564F;
    font-size: 15px;
    border: 1px solid transparent;
    transition: color .18s ease, border-color .18s ease;
}
.social-icons .nav-pills > li > a:hover,
.social-icons .nav-pills > li > a:focus {
    background: transparent;
    color: #C22E22;
    border-color: #D5CEC6;
}
/* Legacy rules further up paint each network's own brand colour on the <i>
   inside the link (.social-icons ul li a:hover .fa-facebook etc). Those are
   more specific than the rule above, so the brand hues won. Named explicitly
   here at matching weight, and later in the file, so the red wins instead. */
.social-icons ul li a:hover,
.social-icons ul li a:focus,
.social-icons ul li a:hover .fa,
.social-icons ul li a:focus .fa,
.social-icons ul li a:hover .fa-facebook,
.social-icons ul li a:focus .fa-facebook,
.social-icons ul li a:hover .fa-twitter,
.social-icons ul li a:focus .fa-twitter,
.social-icons ul li a:hover .fa-linkedin,
.social-icons ul li a:focus .fa-linkedin,
.social-icons ul li a:hover .fa-google-plus,
.social-icons ul li a:hover .fa-dribbble,
.social-icons ul li a:hover .fa-instagram,
.social-icons ul li a:hover .fa-youtube {
    color: #C22E22;
    background: none;
}
.social-icons--lg .nav-pills > li > a {
    width: 40px;
    height: 40px;
    font-size: 17px;
    border-color: #E2DBD4;
}

/* --- nav bar --- */
#header .navbar-inverse {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    min-height: 0;
}
#header .navbar-inverse > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: 1240px;
    padding-inline: 28px;
}
#header .navbar-header { float: none; display: flex; align-items: center; }
#header .navbar-brand {
    float: none;
    display: flex;
    align-items: center;
    height: auto;
    padding: 16px 0;
    flex-shrink: 0;
}
#header .navbar-brand img,
#header #logo { height: 36px !important; width: auto !important; flex-shrink: 0; }
#header.sticky .navbar-brand { padding: 10px 0; }
#header.sticky #logo { height: 30px !important; width: auto !important; }

#header .navbar-inverse .navbar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    float: none;
    margin: 0;
}
#header .navbar-inverse .navbar-nav > li { float: none; position: relative; }
#header .navbar-inverse .navbar-nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-weight: 500;
    font-size: .92rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5F564F;
    background: transparent;
    padding: 10px 13px;
    border-radius: 3px;
    transition: color .18s ease, background .18s ease;
}
#header .navbar-inverse .navbar-nav > li > a:hover,
#header .navbar-inverse .navbar-nav > li > a:focus {
    color: #1E1917;
    background: #FBF9F7;
}
#header .navbar-inverse .navbar-nav > li.active > a { color: #1E1917; }
#header .navbar-nav > li > a .fa-angle-down { font-size: 12px; transition: transform .2s ease; }
#header .navbar-nav > li:hover > a .fa-angle-down { transform: rotate(180deg); }

/* --- get a quote --- */
.ih-quote {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 3px;
    background: #C22E22;
    border: 1px solid #C22E22;
    color: #FFF6F3;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.ih-quote:hover,
.ih-quote:focus {
    background: #9C2317;
    border-color: #9C2317;
    color: #FFF6F3;
    transform: translateY(-1px);
}

/* nav + quote on one row - desktop only now, see section 12b */
@media (min-width: 992px) {
    #header .navbar-collapse {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        gap: 18px;
        flex: 1;
        float: none;
        padding: 0;
        border: 0;
        box-shadow: none;
    }
    #header .navbar-collapse .navbar-nav { order: 1; }
    #header .navbar-collapse .ih-quote { order: 2; }
}

/* --- dropdown submenu --- */
#header ul.sub-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 264px;
    margin: 0;
    padding: 7px;
    list-style: none;
    background: #FBF9F7;
    border: 1px solid #D5CEC6;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(46,36,30,.06), 0 14px 34px -18px rgba(46,36,30,.4);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1002;
    display: block;
}
#header .navbar-nav > li:hover > ul.sub-menu,
#header .navbar-nav > li:focus-within > ul.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}
/* stops the pointer dropping through the gap between trigger and panel */
#header .navbar-nav > li.dropdown::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 100%;
    height: 8px;
}
#header ul.sub-menu > li { float: none; }
#header ul.sub-menu > li > a {
    display: block;
    padding: 9px 12px;
    border-radius: 3px;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: .94rem;
    text-transform: none;
    letter-spacing: 0;
    color: #5F564F;
    transition: color .16s ease, background .16s ease;
}
#header ul.sub-menu > li > a:hover { color: #C22E22; background: #EEEAE6; }

/* --- mobile toggle --- */
#header .navbar-toggle {
    border: 1px solid #D5CEC6;
    border-radius: 3px;
    background: transparent;
    margin: 0;
}
#header .navbar-toggle .icon-bar { background: #1E1917; }
#header .navbar-toggle:hover { background: #FBF9F7; }


/* ==========================================================================
   5. Home — hero slider
   ========================================================================== */
/* Hero must run edge to edge. Bootstrap gives .container-fluid 15px of side
   padding and .row -15px margins; .fullwidth has no CSS of its own, so both
   are cancelled here. Also kills the white strip #content leaves above it. */
.ih-hero-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0;
}
.ih-hero-wrap > .row,
.ih-hero-wrap > .row.fullwidth {
    margin-left: 0;
    margin-right: 0;
}
.ih-hero-wrap .frontSlider { margin-bottom: 0; }

/* slick needs its own wrappers to stop enforcing a fixed height */
.frontSlider,
.frontSlider .slick-list,
.frontSlider .slick-track { height: auto !important; }
.frontSlider .slick-list,
.frontSlider .slick-track { margin: 0; padding: 0; }
/* matches .slide so the viewport never collapses between fades */
.frontSlider .slick-list { min-height: 660px; }
.frontSlider .slick-slide { height: auto; }
.frontSlider .slick-slide { margin: 0; border: 0; outline: 0; }
/* slick leaves an inline-block descender gap under the track */
.frontSlider .slick-slide > div { display: block; font-size: 0; }
.frontSlider .slide { font-size: 16.5px; }

.frontSlider .slide {
    position: relative;
    height: auto !important;
    /* Every slide is the same height on purpose. slick's fade mode stacks the
       slides and takes the container height from whichever is active, so
       slides of differing content height make the page jump mid-transition. */
    min-height: 660px;
    display: flex !important;
    align-items: center;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
}

/* Until slick initialises, the slides are plain stacked divs, so all three
   render (3 x min-height) and the page jumps up ~2 slides' worth when slick
   collapses them: CLS 0.86 on mobile (SiteQA weekly, 2026-10-09). Show only
   the first slide until then; after init slick wraps them, so this stops matching. */
.frontSlider:not(.slick-initialized) > .slide ~ .slide { display: none !important; }

/* Scrim. Three layers, bottom to top:
   1. warm wash  - pulls any slide photo toward the brand's warm range
   2. left ramp  - heavy behind the copy, clearing to reveal the image right
   3. base fade  - keeps the buttons legible against a busy lower edge      */
.frontSlider .slide::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    background:
        linear-gradient(0deg, rgba(26,17,13,.55) 0%, rgba(26,17,13,0) 55%),
        linear-gradient(96deg, rgba(26,17,13,.94) 0%, rgba(26,17,13,.84) 38%, rgba(26,17,13,.46) 70%, rgba(26,17,13,.30) 100%),
        linear-gradient(0deg, rgba(150,66,38,.20) 0%, rgba(150,66,38,.20) 100%);
}
.ih-hero__inner {
    position: relative;
    z-index: 1;
    top: auto !important;
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 28px;
    padding-right: 28px;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 26px;
}

/* Everything in the hero is left-aligned. Forced, because two sources fight it:
   legacy .slide/.text-center rules, and the CMS rich-text field, which arrives
   carrying its own inline text-align from the editor. */
.frontSlider .slide,
.ih-hero__inner,
.ih-hero__inner *,
.ih-hero__eyebrow,
.ih-hero__copy,
.ih-hero__title,
.ih-hero__title *,
.ih-hero__sub,
.ih-hero__sub *,
.ih-hero__actions { text-align: left !important; }

/* the two direct children must not stretch, or their text centres inside them */
.ih-hero__copy {
    align-self: flex-start;
    width: 100%;
}
.ih-hero__eyebrow,
.ih-hero__actions { align-self: flex-start; }
/* eyebrow — exactly as the mockup: warm mono caps, no rule, no decoration */
.ih-hero__eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    /* explicit: must not inherit the slide's font */
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #E4C8BF;
    margin: 0;
    padding: 0;
}

.ih-hero__copy { display: flex; flex-direction: column; gap: 20px; }

/* headline — .ih-hero__title wraps the CMS "headline" field.
   Font stacks are written out rather than using var(), so the headline still
   renders correctly even if the custom properties are stripped or unsupported.
   The universal selector normalises whatever markup the editor pasted in. */
.ih-hero__title,
.ih-hero__title *,
.frontSlider .slide .slide-text {
    font-family: "Jost", "Century Gothic", futura, sans-serif !important;
    font-size: 65px !important;
    line-height: 1.06 !important;
    letter-spacing: -.028em !important;
    font-weight: 600 !important;
    color: #FBF7F4 !important;
    text-transform: none !important;
    font-style: normal !important;
    text-decoration: none !important;
    background: none !important;
    margin: 0;
    padding: 0;
}
.ih-hero__title { max-width: 20ch; }
/* mark the closing line italic in the editor and it picks up the accent */
.ih-hero__title em,
.ih-hero__title i,
.ih-hero__title .accent { color: #F0796B !important; font-style: normal !important; }

/* supporting copy — .ih-hero__sub wraps the CMS "htmlSlide" field.
   The editor's markup arrives bold/small, so normalise everything inside. */
.ih-hero__sub,
.ih-hero__sub * {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 1.16rem !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: rgba(248,242,238,.88) !important;
}
.ih-hero__sub { max-width: 46ch; }
.ih-hero__sub p { margin: 0; }
.ih-hero__sub p + p { margin-top: .5em; }
.ih-hero__sub br { display: none; }

.ih-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.ih-hero__actions .btn-ih { padding: 14px 26px; }


/* --- hero: stronger selectors so legacy/RTE rules cannot win --- */
.frontSlider .slide .ih-hero__eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: #E4C8BF !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.frontSlider .slide .ih-hero__title,
.frontSlider .slide .ih-hero__title * {
    font-family: "Jost", "Century Gothic", futura, sans-serif !important;
    font-size: 65px !important;
    font-weight: 600 !important;
    line-height: 1.06 !important;
    letter-spacing: -.028em !important;
    color: #FBF7F4 !important;
}
.frontSlider .slide .ih-hero__title em,
.frontSlider .slide .ih-hero__title i,
.frontSlider .slide .ih-hero__title .accent { color: #F0796B !important; }
.frontSlider .slide .ih-hero__sub,
.frontSlider .slide .ih-hero__sub * {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 19px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    color: rgba(248,242,238,.88) !important;
}

/* --- hero at smaller widths --- */
@media only screen and (max-width: 1200px) {
    .frontSlider .slide,
    .frontSlider .slick-list { min-height: 580px; }
    .ih-hero__title,
    .ih-hero__title *,
    .frontSlider .slide .ih-hero__title,
    .frontSlider .slide .ih-hero__title * { font-size: 54px !important; }
}
@media only screen and (max-width: 992px) {
    .frontSlider .slide,
    .frontSlider .slick-list { min-height: 500px; }
    .ih-hero__title,
    .ih-hero__title *,
    .frontSlider .slide .ih-hero__title,
    .frontSlider .slide .ih-hero__title * { font-size: 42px !important; }
    .ih-hero__title { max-width: 22ch; }
    .ih-hero__inner { gap: 22px; }
    /* copy sits centre-left once the image has less room to show */
    .frontSlider .slide::before {
        background:
            linear-gradient(0deg, rgba(26,17,13,.55) 0%, rgba(26,17,13,0) 55%),
            linear-gradient(96deg, rgba(26,17,13,.94) 0%, rgba(26,17,13,.88) 55%, rgba(26,17,13,.62) 100%),
            linear-gradient(0deg, rgba(150,66,38,.20) 0%, rgba(150,66,38,.20) 100%);
    }
}
@media only screen and (max-width: 768px) {
    .frontSlider .slide {
        min-height: 400px;
        padding-top: 72px;
        padding-bottom: 72px;
    }
    .frontSlider .slick-list { min-height: 400px; }
    .ih-hero__inner { padding-left: 20px; padding-right: 20px; gap: 18px; }
    .ih-hero__eyebrow { padding-left: 0; }
    .ih-hero__eyebrow::before { display: none; }
    .ih-hero__actions { width: 100%; }
    .ih-hero__actions .btn-ih { flex: 1 1 auto; justify-content: center; padding: 13px 18px; }

    /* Phone headline scale.
       These carry the .frontSlider .slide prefix on purpose. The base hero
       rule above is .frontSlider .slide .ih-hero__title * (0,3,0) with no
       media query, so the plainer .ih-hero__title * (0,1,0) overrides could
       never beat it and the headline stayed at its full 65px desktop size on
       phones. Anything resizing the hero needs to match that specificity. */
    .ih-hero__title,
    .ih-hero__title *,
    .frontSlider .slide .ih-hero__title,
    .frontSlider .slide .ih-hero__title * {
        font-size: 30px !important;
        line-height: 1.12 !important;
        letter-spacing: -.02em !important;
    }
    .ih-hero__title { max-width: 24ch; }
    .ih-hero__sub,
    .ih-hero__sub *,
    .frontSlider .slide .ih-hero__sub,
    .frontSlider .slide .ih-hero__sub * { font-size: 16px !important; }
}

@media only screen and (max-width: 480px) {
    .ih-hero__title,
    .ih-hero__title *,
    .frontSlider .slide .ih-hero__title,
    .frontSlider .slide .ih-hero__title * { font-size: 26px !important; }
    .ih-hero__sub,
    .ih-hero__sub *,
    .frontSlider .slide .ih-hero__sub,
    .frontSlider .slide .ih-hero__sub * { font-size: 15.5px !important; }
}
.frontSlider .slide .readmore {
    color: #FBF7F4;
    border-color: rgba(250,245,242,.42);
}
.frontSlider .slide .readmore:hover {
    color: #FBF7F4;
    border-color: #FBF7F4;
    background: rgba(250,245,242,.1);
}


/* ==========================================================================
   Grid row helpers  (set these as the ROW class in the backoffice)
   --------------------------------------------------------------------------
   GridView.cshtml puts the row's class on the outer div and nests .container
   inside it, so a full-width band gets boxed to ~1170px unless the container
   is neutralised. ih-fullbleed does that from the row class.

     ih-fullbleed   row runs edge to edge (bands, dark sections, sliders)
     ih-dark        dark ground + inverted text (combine with ih-fullbleed)
   ========================================================================== */
.ih-fullbleed > .container,
.ih-fullbleed > .container-fluid {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
.ih-fullbleed > .container > .row,
.ih-fullbleed > .container-fluid > .row,
.ih-fullbleed .row.clearfix {
    margin-left: 0;
    margin-right: 0;
}
.ih-fullbleed [class*="col-md-"],
.ih-fullbleed [class*="col-sm-"],
.ih-fullbleed .column,
.ih-fullbleed .fluid {
    padding-left: 0;
    padding-right: 0;
}

/* a band already carries its own inner gutter, so don't double it up */
.ih-fullbleed .testimonials_macro,
.ih-fullbleed .ih-dark { margin-left: 0; margin-right: 0; }

/* ==========================================================================
   Light band + split layout  ("who we are" and similar rows)
   --------------------------------------------------------------------------
   Row class:  ih-fullbleed ih-surface

   Inside a single RTE area:

     <div class="ih-sec-head">
       <p class="ih-eyebrow">Who we are</p>
       <h2>We learn your<br />business first.</h2>
     </div>
     <div class="ih-split">
       <div class="ih-split__copy">
         <p class="ih-lede">First paragraph.</p>
         <p class="ih-lede">Second paragraph.</p>
       </div>
       <div class="ih-split__media">
         [insert the image here]
       </div>
     </div>

   The split also works as a two-column Grid row: put the RTE in one area and
   a Media editor in the other, and the image styling below still applies.
   ========================================================================== */
.ih-surface {
    background: #FBF9F7;
    border-top: 1px solid #E2DBD4;
    border-bottom: 1px solid #E2DBD4;
    padding-top: 96px;
    padding-bottom: 96px;
}

.ih-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: 56px;
    align-items: center;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}
.ih-split__copy > *:first-child { margin-top: 0; }
.ih-split__copy .ih-lede + .ih-lede { margin-top: 16px; }

/* images: rounded, framed, never stretched - applies to RTE and Media both */
.ih-split__media img,
.ih-surface .ih-split img,
.ih-surface > .container > .row > [class*="col-"] > div > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 3px;
    border: 1px solid #E2DBD4;
}
.ih-split__media .caption,
.ih-surface .caption {
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8F857D;
    margin: 10px 0 0;
}

/* vertically centre a two-column Grid row inside a light band */
@media only screen and (min-width: 769px) {
    .ih-surface.ih-valign > .container > .row.clearfix,
    .ih-surface.ih-valign > .container-fluid > .row.clearfix {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
    .ih-surface.ih-valign > .container > .row.clearfix > [class*="col-"],
    .ih-surface.ih-valign > .container-fluid > .row.clearfix > [class*="col-"] {
        float: none;
    }
}

@media only screen and (max-width: 992px) {
    .ih-split { gap: 36px; }
}
@media only screen and (max-width: 768px) {
    .ih-surface { padding-top: 56px; padding-bottom: 56px; }
    .ih-split {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 0 20px;
    }
}

/* ==========================================================================
   Section heads  (paste-able into an Umbraco Grid RTE row)
   --------------------------------------------------------------------------
   Flat markup on purpose - no nested wrappers - because TinyMCE strips them.
   CSS Grid places the eyebrow in a left rail and the heading + lede beside it.

     <div class="ih-sec-head">
       <p class="ih-eyebrow">What we do</p>
       <h2>Design it, build it,<br />host it, keep it running.</h2>
       <p class="ih-lede">Optional supporting sentence.</p>
     </div>

   The lede is optional. On a dark row, add ih-dark to the Grid ROW class and
   the colours below invert automatically.
   ========================================================================== */
.ih-sec-head {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 0 48px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px 44px;
    align-items: start;
}
.ih-sec-head .ih-eyebrow { grid-column: 1; grid-row: 1; }
.ih-sec-head h1,
.ih-sec-head h2,
.ih-sec-head h3 { grid-column: 2; grid-row: 1; }
.ih-sec-head .ih-lede { grid-column: 2; grid-row: 2; }

/* --- the mono eyebrow, with the roofline chevron from the logo --- */
.ih-eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8F857D;
    margin: 6px 0 0;
    padding: 0;
    line-height: 1.4;
}
/* chevron drawn with borders rather than an SVG, so the RTE cannot strip it */
.ih-eyebrow:before {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    margin: 0 0 14px 3px;
    border-top: 2px solid #C22E22;
    border-left: 2px solid #C22E22;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* --- heading + lede --- */
.ih-sec-head h1,
.ih-sec-head h2,
.ih-sec-head h3 {
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-size: 50px;
    line-height: 1.04;
    letter-spacing: -.022em;
    text-transform: uppercase;
    font-weight: 700;
    color: #1E1917;
    margin: 0;
}
.ih-lede {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: #5F564F;
    max-width: 62ch;
    margin: 18px 0 0;
}

/* `#content p` (1-0-1) outranks a plain class, so these are restated with the
   id and marked important - the eyebrow size is a token, not a suggestion. */
#content .ih-eyebrow,
#content p.ih-eyebrow,
.ih-eyebrow {
    font-size: 11px !important;
    line-height: 1.4 !important;
    letter-spacing: .16em !important;
}
#content .ih-lede,
#content p.ih-lede {
    font-size: 17px;
    line-height: 1.65;
}

/* --- on a dark row --- */
.ih-dark .ih-sec-head h1,
.ih-dark .ih-sec-head h2,
.ih-dark .ih-sec-head h3 { color: #F6F1ED; }
.ih-dark .ih-eyebrow { color: #9B8F85; }
.ih-dark .ih-eyebrow:before { border-top-color: #EA7364; border-left-color: #EA7364; }
.ih-dark .ih-lede { color: #C6B9AF; }

/* --- dark row wrapper (add ih-dark as the Grid row class) --- */
.ih-dark {
    background: #161210;
    padding-top: 104px;
    padding-bottom: 104px;
    /* separates the band from the services grid above it */
    margin-top: 104px;
}
/* the services grid sits directly on the page ground, so it needs its own
   bottom breathing room when nothing dark follows */
.ih-svc-grid { padding-bottom: 8px; }

@media only screen and (max-width: 992px) {
    .ih-sec-head h1,
    .ih-sec-head h2,
    .ih-sec-head h3 { font-size: 36px; }
}
@media only screen and (max-width: 768px) {
    .ih-sec-head {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 20px 30px;
    }
    .ih-sec-head .ih-eyebrow,
    .ih-sec-head h1,
    .ih-sec-head h2,
    .ih-sec-head h3,
    .ih-sec-head .ih-lede { grid-column: 1; grid-row: auto; }
    .ih-sec-head h1,
    .ih-sec-head h2,
    .ih-sec-head h3 { font-size: 30px; }
    .ih-eyebrow { margin-top: 0; }
    .ih-eyebrow:before { margin-bottom: 10px; }
    .ih-dark { padding-top: 56px; padding-bottom: 56px; margin-top: 56px; }

    /* Section heads on a phone.

       Stacked to one column, every section opens with the same left-aligned
       eyebrow -> heading -> lede run, so the page reads as one continuous
       column of text with nothing marking where one section ends and the next
       begins. Two changes: centre the head - the section footers are already
       justify-content:center, so this makes the whole band symmetrical rather
       than top-left/bottom-centre - and put a rule above it so each section
       opens on a visible break, with the brand chevron centred on that break
       as the section's marker.

       The rule needs a different colour per ground, so it is set three times
       rather than once: page ground, the sand testimonial band, and the dark
       bands. A single value is invisible on at least one of them. */
    .ih-sec-head,
    .ih-quotes-head {
        justify-items: center;
        text-align: center;
        border-top: 1px solid #E2DBD4;
        padding-top: 30px;
    }
    .ih-sec-head .ih-lede,
    .ih-sec-head p { margin-left: auto; margin-right: auto; }
    .ih-eyebrow:before { margin-left: auto; margin-right: auto; }

    /* #E2DBD4 is all but invisible on the sand testimonial ground */
    .testimonials_macro .ih-quotes-head { border-top-color: #D0C8BF; }
    .ih-dark .ih-sec-head,
    .ih-dark .ih-quotes-head { border-top-color: rgba(246,241,237,.16); }
}

/* --------------------------------------------------------------------------
   Narrow-column variants
   --------------------------------------------------------------------------
   The default .ih-sec-head reserves a 168px rail for the eyebrow and centres
   itself at 1240px. Inside a two-column CMS row neither is wanted: the column
   already supplies the gutter, and the rail eats half the available width.

   Add --stacked to any section head sitting in a column:

     <div class="ih-sec-head ih-sec-head--stacked">
       <p class="ih-eyebrow">Who we are</p>
       <h2>We learn your business first.</h2>
     </div>

   Add --incol to a split or grid that is already inside a column.
   -------------------------------------------------------------------------- */
.ih-sec-head--stacked {
    display: block;
    max-width: none;
    margin: 0;
    padding: 0 0 26px;
}
.ih-sec-head--stacked .ih-eyebrow,
.ih-sec-head--stacked h1,
.ih-sec-head--stacked h2,
.ih-sec-head--stacked h3,
.ih-sec-head--stacked .ih-lede { grid-column: auto; grid-row: auto; }
.ih-sec-head--stacked .ih-eyebrow { margin: 0 0 16px; }
.ih-sec-head--stacked h1,
.ih-sec-head--stacked h2,
.ih-sec-head--stacked h3 {
    font-size: 38px;
    line-height: 1.06;
}
.ih-sec-head--stacked .ih-lede { margin-top: 16px; max-width: none; }

/* strips the centring gutter from a component already inside a column */
.ih-incol,
.ih-split.ih-incol,
.ih-svc-grid.ih-incol,
.ih-work-grid.ih-incol,
.ih-quote-grid.ih-incol {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}
.ih-split.ih-incol { grid-template-columns: 1fr; gap: 28px; }

@media only screen and (max-width: 992px) {
    .ih-sec-head--stacked h1,
    .ih-sec-head--stacked h2,
    .ih-sec-head--stacked h3 { font-size: 32px; }
}
@media only screen and (max-width: 768px) {
    .ih-sec-head--stacked { padding-bottom: 18px; }
    .ih-sec-head--stacked h1,
    .ih-sec-head--stacked h2,
    .ih-sec-head--stacked h3 { font-size: 28px; }
}

/* --------------------------------------------------------------------------
   Buttons in CMS content
   --------------------------------------------------------------------------
   Give any link one of these classes in the RTE source view:

     <a class="btn-ih" href="/about/">More about us</a>              outline
     <a class="btn-ih btn-ih--primary" href="/contact/">Get a quote</a>  red
     <a class="btn-ih btn-ih--light" href="/contact/">...</a>        on dark

   -------------------------------------------------------------------------- */
/* an RTE wraps a lone link in a <p>; keep the button from stretching */
.ih-btn-row { margin: 26px 0 0; }
p > .btn-ih { margin-top: 6px; }
/* #content p sets a body size that would otherwise shrink the label */
#content .btn-ih,
#content p .btn-ih {
    font-size: 13px;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Arrow buttons for CMS content
   --------------------------------------------------------------------------
   The macros emit an inline <svg> arrow, but TinyMCE strips inline SVG from
   the RTE. This draws the same arrow with borders instead, so it survives.

     <a class="btn-ih btn-ih--arrow" href="/about/">More about us</a>
   -------------------------------------------------------------------------- */
.btn-ih--arrow:after {
    content: "→";
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    position: relative;
    left: 0;
    border: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    -webkit-transition: left .18s ease;
    transition: left .18s ease;
}
.btn-ih--arrow:hover:after,
.btn-ih--arrow:focus:after { left: 4px; }

/* a bare text link that still reads as an action */
.ih-textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #C22E22;
    text-decoration: none;
}
.ih-textlink:after {
    content: "→";
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 15px;
    line-height: 1;
    position: relative;
    left: 0;
    border: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    -webkit-transition: left .18s ease;
    transition: left .18s ease;
}
.ih-textlink:hover:after { left: 4px; }
.ih-dark .ih-textlink { color: #EA7364; }

/* --------------------------------------------------------------------------
   Splitting one band across two Grid rows
   --------------------------------------------------------------------------
   The mockup runs the section head full width, then the copy/image split
   below it. That is two Grid rows, but it must read as ONE band - so the
   first row keeps the top border and top padding, the second keeps the
   bottom, and neither draws a rule where they meet.

     row 1:  ih-fullbleed ih-surface ih-surface--top
     row 2:  ih-fullbleed ih-surface ih-surface--bottom

   The same pair works with ih-dark.
   -------------------------------------------------------------------------- */
.ih-surface--top {
    padding-bottom: 0;
    border-bottom: 0;
}
.ih-surface--bottom {
    padding-top: 0;
    border-top: 0;
}
.ih-dark.ih-surface--top { padding-bottom: 0; }
.ih-dark.ih-surface--bottom { padding-top: 0; margin-top: 0; }

/* the head already carries its own bottom spacing inside a split band */
.ih-surface--top .ih-sec-head { padding-bottom: 40px; }

@media only screen and (max-width: 768px) {
    .ih-surface--top .ih-sec-head { padding-bottom: 24px; }
}

/* ==========================================================================
   Closing call to action  ("ready to move forward")
   --------------------------------------------------------------------------
   Row class:  ih-fullbleed ih-dark
   Wrap the RTE content in <div class="ih-cta"> - it centres everything and
   scales the heading up, since this is the last thing on the page.
   ========================================================================== */
.ih-cta {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    text-align: center;
}
.ih-cta > * { margin-left: auto; margin-right: auto; }

/* `.ih-cta p` sets max-width:56ch with auto side margins. This rule is more
   specific, so `margin: 0` was killing the auto centring and leaving a narrow
   box stuck at the left. Keep the auto margins and drop the width cap. */
.ih-cta .ih-eyebrow {
    color: #EA7364;
    text-align: center;
    max-width: none;
    margin: 0 auto;
}
/* the roofline chevron belongs to the rail-style section heads; the closing
   CTA in the mockup is a bare label */
.ih-cta .ih-eyebrow:before { display: none; }

.ih-cta h1,
.ih-cta h2 {
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-size: 74px;
    line-height: .98;
    letter-spacing: -.03em;
    text-transform: uppercase;
    font-weight: 700;
    color: #EEEAE6;
    margin: 18px 0 0;
    text-align: center;
}

.ih-cta .ih-lede,
.ih-cta p {
    color: #C6B9AF;
    max-width: 56ch;
    margin: 22px auto 0;
    text-align: center;
}

.ih-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 30px 0 0;
    max-width: none;
}
.ih-cta-actions .btn-ih { padding: 14px 26px; }

.ih-cta-tel { margin: 26px 0 0; }
.ih-cta .ih-tel {
    color: #EEEAE6;
    font-size: 15px;
    justify-content: center;
}
.ih-cta .ih-tel:hover { color: #EA7364; }
.ih-cta .ih-tel .fa { color: #EA7364; }

@media only screen and (max-width: 992px) {
    .ih-cta h1,
    .ih-cta h2 { font-size: 46px; }
}
@media only screen and (max-width: 768px) {
    .ih-cta { padding: 0 20px; }
    .ih-cta h1,
    .ih-cta h2 { font-size: 32px; }
    .ih-cta-actions { margin-top: 24px; }
    .ih-cta-actions .btn-ih { flex: 1 1 auto; justify-content: center; }
}

/* --- primary stays red on a dark band ------------------------------------
   `.ih-dark .btn-ih` (two classes) outranks `.btn-ih--primary` (one), so the
   ghost treatment was flattening the primary button. Restated at equal or
   greater weight so red survives inside ih-dark / ih-work / ih-cta.
   ------------------------------------------------------------------------ */
.ih-dark .btn-ih--primary,
.ih-work .btn-ih--primary,
.ih-cta .btn-ih--primary {
    background: #C22E22;
    border-color: #C22E22;
    color: #FFF6F3;
}
.ih-dark .btn-ih--primary:hover,
.ih-dark .btn-ih--primary:focus,
.ih-work .btn-ih--primary:hover,
.ih-cta .btn-ih--primary:hover,
.ih-cta .btn-ih--primary:focus {
    background: #9C2317;
    border-color: #9C2317;
    color: #FFF6F3;
}

/* --- phone icon in the CTA ------------------------------------------------
   The header and footer carry a real <i class="fa fa-phone"> from Master, but
   TinyMCE strips empty inline tags, so an editor cannot keep one in the RTE.
   Drawn from the icon font here instead. Scoped to .ih-cta so the header and
   footer do not end up with two phones.
   ------------------------------------------------------------------------ */
.ih-cta .ih-tel:before {
    content: "";
    font-family: "FontAwesome";
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 1;
    color: #EA7364;
    margin-right: 9px;
    -webkit-font-smoothing: antialiased;
}
/* Do NOT also put an <i class="fa fa-phone"> in the RTE - you would get two.
   The icon here is generated, so the markup stays just the link text. */

/* ==========================================================================
   Inner page header  (#page-breadcrumb, all templates except Home)
   --------------------------------------------------------------------------
   Legacy: an 80px strip with tour-bg.png and #404040 text, laid out with
   display:table / table-cell. Rebuilt as the dark band from the mockup.
   The table layout is flattened to block so the height can come from padding.
   ========================================================================== */
#page-breadcrumb {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    /* Two gradient layers over the photo: a warm wash to pull it into the brand
       range, then a dark scrim for text contrast. CSS filters cannot apply to a
       background image, so the tint is done with overlays instead. */
    background-color: #161210;
    background-image:
        linear-gradient(rgba(150,66,38,.20), rgba(150,66,38,.20)),
        linear-gradient(180deg, rgba(22,18,16,.88) 0%, rgba(22,18,16,.95) 100%),
        url(../images/bground.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 88px 0 80px;
    border-bottom: 0;
}
#page-breadcrumb .vertical-center {
    display: block;
    width: auto;
    vertical-align: baseline;
}
#page-breadcrumb .container {
    max-width: 1240px;
    padding-left: 28px;
    padding-right: 28px;
}
#page-breadcrumb .row { margin-left: 0; margin-right: 0; }
#page-breadcrumb [class*="col-sm-"] { padding-left: 0; padding-right: 0; float: none; }

/* short red rule above the title, echoing the service headings */
#page-breadcrumb .action:before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    background: #C22E22;
    margin-bottom: 20px;
}

#page-breadcrumb h1.title,
#page-breadcrumb h2.title,
#page-breadcrumb .title {
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-size: 50px;
    line-height: 1.04;
    letter-spacing: -.022em;
    text-transform: uppercase;
    font-weight: 700;
    color: #F6F1ED;
    margin: 0;
    padding: 0;
}
#page-breadcrumb .action h1 { color: #F6F1ED; }

@media only screen and (max-width: 992px) {
    #page-breadcrumb { padding: 64px 0 58px; }
    #page-breadcrumb h1.title,
    #page-breadcrumb h2.title,
    #page-breadcrumb .title { font-size: 36px; }
}
@media only screen and (max-width: 768px) {
    #page-breadcrumb { padding: 48px 0 44px; }
    #page-breadcrumb .container { padding-left: 20px; padding-right: 20px; }
    #page-breadcrumb h1.title,
    #page-breadcrumb h2.title,
    #page-breadcrumb .title { font-size: 30px; }
    #page-breadcrumb .action:before { margin-bottom: 14px; }
}

/* ==========================================================================
   Sidebar link lists  ("More Links" and friends on inner pages)
   --------------------------------------------------------------------------
   Markup is a Bootstrap .nav, so its 10px/15px padding and grey hover have to
   be cleared before the list can read as the arrowed rows used elsewhere.
   ========================================================================== */
.sidebar .sidebar-item { margin-bottom: 38px; }

.sidebar .sidebar-item h3 {
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8F857D;
    margin: 0 0 14px;
}
/* roofline chevron, same as .ih-eyebrow - borders rather than an SVG */
.sidebar .sidebar-item h3:before {
    content: "";
    display: block;
    width: 11px;
    height: 11px;
    margin: 0 0 14px 3px;
    border-top: 2px solid #C22E22;
    border-left: 2px solid #C22E22;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.sidebar .sidebar-item .nav,
.sidebar .sidebar-item ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid #D5CEC6;
}
.sidebar .sidebar-item .nav > li,
.sidebar .sidebar-item ul > li {
    float: none;
    border-bottom: 1px solid #E2DBD4;
    position: static;
}

.sidebar .sidebar-item .nav > li > a,
.sidebar .sidebar-item ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: #1E1917;
    text-decoration: none;
    transition: color .18s ease;
}
/* Bootstrap paints a grey panel on .nav hover */
.sidebar .sidebar-item .nav > li > a:hover,
.sidebar .sidebar-item .nav > li > a:focus,
.sidebar .sidebar-item ul > li > a:hover,
.sidebar .sidebar-item ul > li > a:focus {
    background: none;
    color: #C22E22;
    text-decoration: none;
}

/* the arrow, matching the homepage buttons */
.sidebar .sidebar-item .nav > li > a:after,
.sidebar .sidebar-item ul > li > a:after {
    content: "→";
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 15px;
    line-height: 1;
    color: #8F857D;
    position: relative;
    left: 0;
    transition: left .18s ease, color .18s ease;
}
.sidebar .sidebar-item .nav > li > a:hover:after,
.sidebar .sidebar-item ul > li > a:hover:after {
    color: #C22E22;
    left: 4px;
}

/* active/current item */
.sidebar .sidebar-item .nav > li.active > a,
.sidebar .sidebar-item .nav > li.active > a:hover,
.sidebar .sidebar-item .nav > li.active > a:focus {
    color: #C22E22;
    background: none;
}

/* --- clear the legacy active-item pointer --------------------------------
   `.categories .navbar-stacked li.active a:before/:after` draw a red triangle
   with a white one over it. The :after collides with the arrow above, and both
   are position:absolute against an ancestor that is no longer positioned, so
   they land in random places. Killed here, and the arrow restated at (0,4,3)
   so it beats the legacy (0,3,3) on active rows.
   ------------------------------------------------------------------------ */
.sidebar .sidebar-item .navbar-stacked li.active > a:before,
.sidebar .sidebar-item .nav > li.active > a:before {
    content: none;
    display: none;
    border: 0;
}
.sidebar .sidebar-item .navbar-stacked li.active > a:after,
.sidebar .sidebar-item .nav > li.active > a:after {
    content: "→";
    position: static;
    display: inline;
    border: 0;
    width: auto;
    height: auto;
    margin: 0;
    top: auto;
    left: 0;
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 15px;
    line-height: 1;
    color: #C22E22;
}
/* legacy slides the link 20px right on hover; the row should stay put */
.sidebar .sidebar-item .navbar-stacked li a:hover,
.sidebar .sidebar-item .navbar-stacked li.active a,
.sidebar .sidebar-item .nav > li > a:hover {
    margin-left: 0;
    padding-left: 0;
}

/* --- count badge in a sidebar list ---------------------------------------
   Portfolio filters carry "<span class='pull-right'>(36)</span>" inside the
   link. Bootstrap floats it, which does nothing useful inside a flex row, and
   it lands as a third flex item that space-between pushes to the middle.
   margin-left:auto absorbs the free space instead, so the count and the arrow
   group together at the right edge. Links with no count are unaffected.
   ------------------------------------------------------------------------ */
.sidebar .sidebar-item .nav > li > a .pull-right,
.sidebar .sidebar-item ul > li > a .pull-right,
.sidebar .sidebar-item .nav > li > a span,
.sidebar .sidebar-item ul > li > a span {
    float: none !important;
    margin-left: auto;
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .04em;
    color: #8F857D;
    font-variant-numeric: tabular-nums;
    transition: color .18s ease;
}
.sidebar .sidebar-item .nav > li > a:hover .pull-right,
.sidebar .sidebar-item .nav > li > a:hover span { color: #C22E22; }
.sidebar .sidebar-item .nav > li.active > a .pull-right,
.sidebar .sidebar-item .nav > li.active > a span { color: #C22E22; }

/* ==========================================================================
   Scroll reveal
   --------------------------------------------------------------------------
   The .ih-rv class is added by Scripts/main.js, never in markup. That way if
   scripting is off or IntersectionObserver is missing, nothing is ever left
   hidden - the content simply renders as normal.
   ========================================================================== */
.ih-rv {
    opacity: 0;
    -webkit-transform: translateY(16px);
    -ms-transform: translateY(16px);
    transform: translateY(16px);
    -webkit-transition: opacity .5s ease-out, -webkit-transform .5s ease-out;
    transition: opacity .5s ease-out, transform .5s ease-out;
}
.ih-rv.is-in {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .ih-rv,
    .ih-rv.is-in {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        -webkit-transition: none;
        transition: none;
    }
}

/* --- submenu hover + centred nav ------------------------------------------
   `#header .navbar-inverse .navbar-nav li a:hover` in the legacy block is
   (1,3,2) and my submenu rule was (1,2,3). Class count is weighed before
   element count, so the old #ff0000 won. Restated with the two navbar classes
   included, which makes it (1,4,3).
   -------------------------------------------------------------------------- */
#header .navbar-inverse .navbar-nav ul.sub-menu > li > a,
#header .navbar-inverse .navbar-nav ul.sub-menu > li > a:link {
    color: #5F564F;
    background: none;
}
#header .navbar-inverse .navbar-nav ul.sub-menu > li > a:hover,
#header .navbar-inverse .navbar-nav ul.sub-menu > li > a:focus {
    color: #C22E22;
    background: #EEEAE6;
}
#header .navbar-inverse .navbar-nav ul.sub-menu > li.active > a { color: #C22E22; }

/* Centred nav, as in the mockup. Absolutely centred against the header
   container rather than balanced with flex, because the logo and the quote
   button are different widths - flex alone would leave it visibly off-centre.
   Desktop only; below 992px it returns to normal flow. */
@media only screen and (min-width: 992px) {
    #header .navbar-inverse > .container { position: relative; }
    #header .navbar-collapse .navbar-nav {
        position: absolute;
        left: 50%;
        top: 50%;
        margin: 0;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    /* submenus still need to escape the centred block */
    #header .navbar-collapse .navbar-nav > li { position: relative; }
}

/* ==========================================================================
   News + testimonial listing pages
   --------------------------------------------------------------------------
   Item titles are plain <h2>, so the global heading scale was rendering them
   at 50px uppercase - correct for a section title, far too loud for a list of
   articles. Brought down to a readable listing size in sentence case.
   ========================================================================== */
.news h2,
.newsitem h2,
.testimonial-list h2 {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
    color: #1E1917;
    margin: 0 0 8px;
}
.news h2 a,
.newsitem h2 a,
.testimonial-list h2 a {
    color: #1E1917;
    text-decoration: none;
    transition: color .18s ease;
}
.news h2 a:hover,
.news h2 a:focus,
.newsitem h2 a:hover,
.testimonial-list h2 a:hover {
    color: #C22E22;
    text-decoration: none;
}

/* Rows read as a list rather than a stack of blocks. With 25 entries of body
   copy the separation has to come from rhythm, not a heavier rule: a short
   accent mark, a dateline, generous spacing, and a measure narrow enough that
   the eye can find the next title. */
.news {
    position: relative;
    padding: 38px 0 34px;
    border-bottom: 1px solid #DCD5CD;
    border-top: 0;
}
.news:last-of-type { border-bottom: 0; }

/* short accent mark - quiet, but enough to mark where each item starts */
.news:before {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    background: #C22E22;
    margin-bottom: 16px;
}

.news-date {
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8F857D;
    font-variant-numeric: tabular-nums;
    margin-bottom: 10px;
}

.news h2 { margin-bottom: 12px; }

/* a narrower measure is what actually stops the page reading as a wall */
.news-summary,
.news-summary p {
    color: #5F564F;
    max-width: 74ch;
}
.news-summary p { margin: 0 0 .65em; }
.news-summary p:last-child { margin-bottom: 0; }
.news p { margin: 0 0 .65em; color: #5F564F; }

@media only screen and (max-width: 768px) {
    .news { padding: 26px 0 24px; }
    .news:before { margin-bottom: 12px; }
}

@media only screen and (max-width: 768px) {
    .news h2,
    .newsitem h2,
    .testimonial-list h2 { font-size: 18px; }
}

/* --- article headline on a news detail page -------------------------------
   The article title is the page's <h1 class="newsh1"> (the "News" banner above it
   is an h2, so each article's own headline is its H1 for search and screen
   readers). Matched on the class here, regardless of tag.
   -------------------------------------------------------------------------- */
.newsh1,
h1.newsh1,
h2.newsh1,
h3.newsh1 {
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-size: 34px;
    line-height: 1.16;
    letter-spacing: -.02em;
    text-transform: none;
    font-weight: 600;
    color: #1E1917;
    margin: 0 0 20px;
    max-width: 30ch;
}

@media only screen and (max-width: 992px) {
    .newsh1, h1.newsh1, h2.newsh1, h3.newsh1 { font-size: 28px; }
}
@media only screen and (max-width: 768px) {
    .newsh1, h1.newsh1, h2.newsh1, h3.newsh1 { font-size: 24px; max-width: none; }
    h3 { font-size: 20px; }
    #content p + h3,
    #content ul + h3,
    #content ol + h3,
    #content img + h3,
    #content div + h3 { margin-top: 28px; }
}

/* --- portfolio item title -------------------------------------------------
   The client name is the page's <h1 class="smallh1"> (the "Portfolio" banner is
   an h2), same as .newsh1. Matched on the class, regardless of tag.
   -------------------------------------------------------------------------- */
.smallh1,
h1.smallh1,
h2.smallh1,
h3.smallh1 {
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-size: 34px;
    line-height: 1.16;
    letter-spacing: -.02em;
    text-transform: none;
    font-weight: 600;
    color: #1E1917;
    margin: 0 0 18px;
}
.project-name h2,
.project-name h3 { color: #1E1917; }

/* --- legacy primary button -----------------------------------------------
   .btn-common is the old CTA ("Live preview", "Learn how Inhouse can power
   your online success"). Mapped onto the new primary button so every place it
   appears picks up the brick red without editing content.
   -------------------------------------------------------------------------- */
.btn-common,
.btn.btn-common,
.action .btn-common {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    line-height: 1;
    color: #FFF6F3;
    background-color: #C22E22;
    border: 1px solid #C22E22;
    border-bottom: 1px solid #C22E22;
    border-radius: 3px;
    padding: 14px 24px;
    text-decoration: none;
    white-space: normal;
    word-wrap: break-word;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-common:hover,
.btn-common:focus,
.btn.btn-common:hover,
.action .btn-common:hover {
    outline: none;
    box-shadow: none;
    color: #FFF6F3;
    background-color: #9C2317;
    border-color: #9C2317;
    transform: translateY(-1px);
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
    .smallh1, h1.smallh1, h2.smallh1, h3.smallh1 { font-size: 24px; }
}

/* --- Skills / client tag links --------------------------------------------
   `.navbar-default li a:hover` in the legacy block sets #0884d5, the Facebook
   blue borrowed from the social icons. Nothing else on the site is that
   colour. Resting state is a neutral ink so the red reads as the hover.
   -------------------------------------------------------------------------- */
.skills .navbar-default li a,
.client .navbar-default li a,
.navbar-default li a {
    font-size: 13px;
    color: #5F564F;
    background: none;
    transition: color .18s ease;
}
.skills .navbar-default li a:hover,
.skills .navbar-default li a:focus,
.client .navbar-default li a:hover,
.navbar-default li a:hover,
.navbar-default li a:focus {
    color: #C22E22;
    background: none;
    text-decoration: none;
}
/* the little check-square icon picks up the accent */
.skills .navbar-default li a i,
.client .navbar-default li a i,
.navbar-default li a i { color: #C22E22; }

/* "Skills:" label beside the list */
.skills h5,
.client h5 {
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8F857D;
    margin: 0;
}

/* --- review platform icons (testimonials page) ----------------------------
   Google / Facebook / Yelp links under .testimonial_top. Legacy hover was the
   old #ff0000; resting grey kept, warmed to the neutral in use elsewhere.
   -------------------------------------------------------------------------- */
.testimonial_top a,
.testimonial_top a i {
    color: #8F857D;
    transition: color .18s ease, transform .18s ease;
}
.testimonial_top a:hover,
.testimonial_top a:focus,
.testimonial_top a:hover i,
.testimonial_top a:focus i {
    color: #C22E22;
    text-decoration: none;
}
.testimonial_top a:hover i {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}

/* ==========================================================================
   Testimonials listing page  (.row.testimonials)
   --------------------------------------------------------------------------
   Matched to the news list: accent mark, quiet heading, measured body, and a
   proper attribution block instead of a run of italics.
   The accent sits on the text column rather than the row, because .row:before
   is Bootstrap's clearfix and should not be repurposed.
   ========================================================================== */
.testimonials {
    padding: 38px 0 30px;
    border-bottom: 1px solid #DCD5CD;
}
.testimonials:last-of-type { border-bottom: 0; }

.testimonials .col-sm-9:before {
    content: "";
    display: block;
    width: 26px;
    height: 2px;
    background: #C22E22;
    margin-bottom: 16px;
}

/* headline - same treatment as a news item title */
.testimonials h4 {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 20px;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
    color: #1E1917;
    margin: 0 0 12px;
}
/* template emits <h4>..</h4><br /> - the break fights the margin */
.testimonials h4 + br { display: none; }

.testimonials .col-sm-9 p,
.testimonials .col-sm-9 { color: #5F564F; }
.testimonials .col-sm-9 p { max-width: 74ch; margin: 0 0 .65em; }
.testimonials .col-sm-9 a { color: #C22E22; }

/* attribution - the template wraps name and role in <i> */
.testimonials .col-sm-9 > i {
    display: block;
    margin-top: 20px;
    padding-left: 15px;
    border-left: 3px solid #C22E22;
    font-style: normal;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.5;
    color: #1E1917;
}
.testimonials .col-sm-9 > i + br,
.testimonials .col-sm-9 > i + br + br { display: none; }



@media only screen and (max-width: 768px) {
    .testimonials { padding: 26px 0 22px; }
    .testimonials .col-sm-9:before { margin-bottom: 12px; }
    .testimonials .img-responsive { margin-bottom: 16px; }
}

/* --- backgrounds for dark Grid rows ---------------------------------------
   Both are opt-in, added alongside ih-dark as the ROW class, so a page never
   ends up with the same treatment twice:

     ih-fullbleed ih-dark ih-bg     photograph  (selected work)
     ih-fullbleed ih-dark ih-grid   fine grid   (closing call to action)
   -------------------------------------------------------------------------- */
.ih-bg {
    background-color: #161210;
    background-image:
        linear-gradient(rgba(150,66,38,.20), rgba(150,66,38,.20)),
        linear-gradient(180deg, rgba(22,18,16,.86) 0%, rgba(22,18,16,.94) 100%),
        url(../images/bground.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* graph-paper grid - two hairline gradients crossed at 34px */
.ih-grid {
    background-color: #161210;
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 34px 34px, 34px 34px;
    background-position: 0 0, 0 0;
    background-repeat: repeat, repeat;
}

/* ==========================================================================
   Thumbnail hover  (portfolio grid + testimonials listing)
   --------------------------------------------------------------------------
   Same gesture as the homepage cards: the block lifts a little and the image
   scales inside a clipped frame, so the movement reads as one object rather
   than a picture growing out of its box.
   ========================================================================== */
.portfolio-thumb,
.ih-thumb {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid #E2DBD4;
    background: #E5DFD8;
    line-height: 0;
}
.portfolio-thumb img,
.ih-thumb img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    -webkit-transition: -webkit-transform .55s cubic-bezier(.2,.7,.3,1);
    transition: transform .55s cubic-bezier(.2,.7,.3,1);
}

/* the lift is on the wrapper, the scale on the image */
.portfolio-wrapper,
.testimonials .col-sm-3 {
    -webkit-transition: -webkit-transform .3s cubic-bezier(.2,.7,.3,1);
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.portfolio-item:hover .portfolio-wrapper,
.testimonials:hover .col-sm-3 {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
}
.portfolio-item:hover .portfolio-thumb,
.testimonials:hover .ih-thumb {
    border-color: #D5CEC6;
    box-shadow: 0 1px 2px rgba(46,36,30,.06), 0 14px 34px -18px rgba(46,36,30,.4);
}
.portfolio-item:hover .portfolio-thumb img,
.testimonials:hover .ih-thumb img {
    -webkit-transform: scale(1.045);
    transform: scale(1.045);
}

/* title follows the card on hover, as on the homepage */
.portfolio-info h2 a { -webkit-transition: color .2s ease; transition: color .2s ease; }
.portfolio-item:hover .portfolio-info h2 a { color: #C22E22; }

@media (prefers-reduced-motion: reduce) {
    .portfolio-thumb img,
    .ih-thumb img,
    .portfolio-wrapper,
    .testimonials .col-sm-3 { transition: none; }
    .portfolio-item:hover .portfolio-wrapper,
    .testimonials:hover .col-sm-3,
    .portfolio-item:hover .portfolio-thumb img,
    .testimonials:hover .ih-thumb img { transform: none; }
}

/* --- services landing page -----------------------------------------------
   /services/ now shares the homepage card grid via Views/Partials/
   ServiceCards.cshtml. It only needs breathing room around the grid, since
   .padding-top gives it just 30px.
   -------------------------------------------------------------------------- */
#news.padding-top {
    padding-top: 64px;
    padding-bottom: 72px;
}
@media only screen and (max-width: 768px) {
    #news.padding-top { padding-top: 40px; padding-bottom: 48px; }
}

/* ==========================================================================
   6. Home - services (card grid, MacroPartials/ServicesList.cshtml)
   ========================================================================== */
.ih-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}

.ih-svc-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
    background: #FBF9F7;
    border: 1px solid #E2DBD4;
    border-radius: 3px;
    color: #1E1917;
    transition: border-color .22s ease, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.ih-svc-card:hover,
.ih-svc-card:focus {
    border-color: #D5CEC6;
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(46,36,30,.06), 0 14px 34px -18px rgba(46,36,30,.4);
    text-decoration: none;
}

/* --- image --- */
.ih-svc-shot {
    position: relative;
    display: block;
    overflow: hidden;
    border-bottom: 1px solid #E2DBD4;
    background: #E5DFD8;
    /* 3:2 without aspect-ratio, so old renderers behave */
    height: 0;
    padding-bottom: 66.666%;
}
.ih-svc-shot img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .55s cubic-bezier(.2,.7,.3,1);
}
.ih-svc-card:hover .ih-svc-shot img {
    transform: scale(1.045);
}

/* Flat warm veil over the service photography.

   The stock shots are dated and vary a lot in colour temperature. A single
   translucent sand wash - the same tone as the .ih-svc-shot placeholder -
   pulls them toward the brand palette and knocks back the word-art baked
   into images like webdesign.jpg.

   Deliberately a flat colour on a pseudo-element rather than a filter:
   filter on a scaling image repainted every frame and made the grid jank
   on scroll. Fading the veil opacity instead stays on the compositor.
   Sits under .ih-svc-badge, which has z-index 1. */
.ih-svc-shot:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #E5DFD8;
    opacity: .30;
    transition: opacity .55s cubic-bezier(.2,.7,.3,1);
}
.ih-svc-card:hover .ih-svc-shot:after,
.ih-svc-card:focus .ih-svc-shot:after {
    opacity: .10;
}

.ih-svc-badge {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FBF9F7;
    border-radius: 3px;
    color: #C22E22;
    box-shadow: 0 2px 10px -3px rgba(0,0,0,.45);
}
.ih-svc-badge svg {
    width: 23px;
    height: 23px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --- body --- */
.ih-svc-body {
    display: flex;
    flex-direction: column;
    padding: 22px 24px 24px;
    flex: 1 1 auto;
}
.ih-svc-title {
    display: block;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-size: 21px;
    line-height: 1.15;
    letter-spacing: -.012em;
    text-transform: uppercase;
    font-weight: 600;
    color: #1E1917;
    margin: 0 0 8px;
    transition: color .2s ease;
}
.ih-svc-card:hover .ih-svc-title { color: #C22E22; }

.ih-svc-sum {
    display: block;
    color: #5F564F;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
}
.ih-svc-sum p { margin: 0 0 .6em; font-size: inherit; line-height: inherit; color: inherit; }
.ih-svc-sum p:last-child { margin-bottom: 0; }

.ih-svc-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #C22E22;
}
.ih-svc-more svg { transition: transform .22s ease; }
.ih-svc-card:hover .ih-svc-more svg { transform: translateX(4px); }

/* --- the "anything else" card --- */
.ih-svc-open {
    background: #C22E22;
    border-color: #C22E22;
    justify-content: center;
    padding: 36px 28px;
}
.ih-svc-open:hover,
.ih-svc-open:focus { background: #9C2317; border-color: #9C2317; }
.ih-svc-open .ih-svc-title,
.ih-svc-card.ih-svc-open:hover .ih-svc-title {
    color: #FFF6F3;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 12px;
}
.ih-svc-open .ih-svc-sum { color: rgba(255,246,243,.9); }
.ih-svc-open .ih-svc-more { color: #FFF6F3; padding-top: 18px; }

/* The open card is always last, so it stretches over whatever columns its row
   has left: first in a row of 3 spans all 3, second spans 2. When it is wide,
   the title sits beside the text instead of above it. */
.ih-svc-open:nth-child(3n+1) { grid-column: span 3; }
.ih-svc-open:nth-child(3n+2) { grid-column: span 2; }
.ih-svc-open:nth-child(3n+1),
.ih-svc-open:nth-child(3n+2) {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: 40px;
    align-content: center;
    padding: 40px 44px;
}
.ih-svc-open:nth-child(3n+1) .ih-svc-title,
.ih-svc-open:nth-child(3n+2) .ih-svc-title { grid-row: 1 / span 2; align-self: center; margin: 0; }
.ih-svc-open:nth-child(3n+1) .ih-svc-more,
.ih-svc-open:nth-child(3n+2) .ih-svc-more { grid-column: 2; justify-self: start; }

@media only screen and (max-width: 992px) {
    .ih-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* two columns: reset the 3-column spans, then span both when alone */
    .ih-svc-open:nth-child(n) { grid-column: auto; display: flex; padding: 36px 28px; }
    .ih-svc-open:nth-child(n) .ih-svc-title { margin: 0 0 12px; }
    .ih-svc-open:nth-child(2n+1) {
        grid-column: span 2;
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
        column-gap: 40px;
        align-content: center;
        padding: 40px 44px;
    }
    .ih-svc-open:nth-child(2n+1) .ih-svc-title { grid-row: 1 / span 2; align-self: center; margin: 0; }
    .ih-svc-open:nth-child(2n+1) .ih-svc-more { grid-column: 2; justify-self: start; }
}
@media only screen and (max-width: 768px) {
    .ih-svc-grid { grid-template-columns: 1fr; gap: 18px; padding: 0 20px; }
    .ih-svc-open,
    .ih-svc-open:nth-child(n) { grid-column: auto; display: flex; padding: 28px 24px; }
    .ih-svc-open:nth-child(n) .ih-svc-title { grid-row: auto; margin: 0 0 12px; }
}

/* ==========================================================================
   7. Home - selected work (MacroPartials/RandomPortfolioItem.cshtml)
   --------------------------------------------------------------------------
   Designed to sit on a dark band. Set the Grid ROW class to:
       ih-fullbleed ih-dark
   The .ih-dark rules further up invert the section head automatically.
   ========================================================================== */
.ih-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}

.ih-proj {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    overflow: hidden;
    background: #1F1A16;
    border: 1px solid #332C26;
    border-radius: 3px;
    transition: border-color .22s ease, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.ih-proj:hover,
.ih-proj:focus {
    border-color: #453B34;
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 16px 38px -18px rgba(0,0,0,.9);
    text-decoration: none;
}

/* screenshot frame - 350x262 source, so 4:3 keeps it uncropped */
.ih-proj-shot {
    position: relative;
    display: block;
    overflow: hidden;
    background: #282119;
    border-bottom: 1px solid #332C26;
    height: 0;
    padding-bottom: 74.857%;
}
.ih-proj-shot img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.ih-proj:hover .ih-proj-shot img { transform: scale(1.035); }

.ih-proj-body {
    display: block;
    padding: 20px 22px 22px;
}
.ih-proj-title {
    display: block;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-size: 19px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: -.005em;
    font-weight: 600;
    color: #F6F1ED;
    margin: 0 0 10px;
    transition: color .2s ease;
}
.ih-proj:hover .ih-proj-title { color: #EA7364; }

.ih-proj-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.ih-proj-tag,
.ih-proj-year {
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9B8F85;
}
.ih-proj-year { font-variant-numeric: tabular-nums; }

.ih-work-foot {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}
/* ghost button reads light on the dark band - scoped to ih-dark only, so the
   same cards can sit on a light row (PortfolioByTag on service pages) */
.ih-dark .btn-ih {
    color: #F6F1ED;
    border-color: #453B34;
    background: transparent;
}
.ih-dark .btn-ih:hover {
    color: #F6F1ED;
    border-color: #F6F1ED;
    background: rgba(255,255,255,.06);
}

@media only screen and (max-width: 992px) {
    .ih-work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media only screen and (max-width: 768px) {
    .ih-work-grid { grid-template-columns: 1fr; gap: 18px; padding: 0 20px; }
    .ih-work-foot { margin-top: 30px; }
}

/* ==========================================================================
   8. Home - testimonials (MacroPartials/RandomTestimonial.cshtml)
   ========================================================================== */
.testimonials_macro {
    background: #E5DFD8;
    border-top: 1px solid #D5CEC6;
    border-bottom: 1px solid #D5CEC6;
    padding: 96px 0;
    position: relative;
    overflow: hidden;
    text-align: left;
}
/* oversized quote mark bled off the top edge */
.testimonials_macro:before {
    content: "“";
    position: absolute;
    top: -.30em;
    left: 50%;
    margin-left: -.32em;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-weight: 700;
    font-size: 440px;
    line-height: 1;
    color: #C22E22;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
}

/* --- centred band head --- */
.ih-quotes-head {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto 56px;
    padding: 0 28px;
    text-align: center;
}
.ih-eyebrow--center { text-align: center; }
.ih-eyebrow--center:before { margin-left: auto; margin-right: auto; }
.ih-quotes-head h2 {
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-size: 74px;
    line-height: .98;
    letter-spacing: -.03em;
    text-transform: uppercase;
    font-weight: 700;
    color: #1E1917;
    margin: 14px 0 0;
}
.ih-quotes-head .ih-lede { margin: 18px auto 0; text-align: center; }

/* --- cards --- */
.ih-quote-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    align-items: stretch;
}
.ih-qcard {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    background: #FBF9F7;
    border: 1px solid #E2DBD4;
    border-radius: 3px;
    padding: 30px 28px 26px;
    transition: border-color .22s ease, transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.ih-qcard:hover {
    border-color: #D5CEC6;
    transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(46,36,30,.06), 0 14px 34px -18px rgba(46,36,30,.4);
}
.ih-qmark {
    display: block;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-weight: 700;
    font-size: 44px;
    line-height: .6;
    height: .6em;
    color: #C22E22;
}
.ih-qcard blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    flex: 1 1 auto;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.33;
    letter-spacing: -.015em;
    color: #1E1917;
}
.ih-attrib {
    display: block;
    border-left: 3px solid #C22E22;
    padding-left: 15px;
    font-style: normal;
}
.ih-attrib strong {
    display: block;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .01em;
    color: #1E1917;
}
.ih-attrib span {
    display: block;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #8F857D;
    font-size: 14px;
    line-height: 1.45;
}

.ih-quotes-foot {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

@media only screen and (max-width: 992px) {
    .testimonials_macro:before { font-size: 300px; }
    .ih-quotes-head h2 { font-size: 46px; }
    .ih-quote-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (max-width: 768px) {
    .testimonials_macro { padding: 56px 0; }
    .testimonials_macro:before { font-size: 200px; }
    .ih-quotes-head { margin-bottom: 34px; padding: 0 20px; }
    .ih-quotes-head h2 { font-size: 32px; }
    .ih-quote-grid { grid-template-columns: 1fr; gap: 18px; padding: 0 20px; }
    .ih-qcard blockquote { font-size: 18px; }
}

/* ==========================================================================
   9. Home - news (MacroPartials/NewsItems.cshtml)
   ========================================================================== */
.ih-news-list {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
    border-top: 1px solid #E2DBD4;
}
.ih-news-item {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 24px;
    gap: 0 28px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid #E2DBD4;
    text-decoration: none;
    color: #1E1917;
}
.ih-news-item:hover,
.ih-news-item:focus { text-decoration: none; }

.ih-news-date {
    font-family: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
    font-size: 12.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8F857D;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: color .2s ease;
}
.ih-news-item:hover .ih-news-date { color: #5F564F; }

.ih-news-title {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: 0;
    color: #1E1917;
    transition: color .2s ease;
}
.ih-news-item:hover .ih-news-title { color: #C22E22; }

.ih-news-arrow {
    display: block;
    color: #8F857D;
    line-height: 1;
    transition: color .2s ease, transform .24s ease;
}
.ih-news-item:hover .ih-news-arrow {
    color: #C22E22;
    -webkit-transform: translateX(4px);
    transform: translateX(4px);
}

.ih-news-foot {
    display: flex;
    justify-content: center;
    max-width: 1240px;
    margin: 40px auto 0;
    padding: 0 28px;
}

/* on a dark band */
.ih-dark .ih-news-list { border-top-color: #332C26; }
.ih-dark .ih-news-item { border-bottom-color: #332C26; }
.ih-dark .ih-news-title { color: #F6F1ED; }
.ih-dark .ih-news-item:hover .ih-news-title { color: #EA7364; }
.ih-dark .ih-news-date { color: #9B8F85; }

@media only screen and (max-width: 768px) {
    .ih-news-list { padding: 0 20px; }
    .ih-news-item {
        grid-template-columns: minmax(0, 1fr) 20px;
        gap: 4px 16px;
        padding: 16px 0;
    }
    .ih-news-date { grid-column: 1 / -1; }
    .ih-news-foot { padding: 0 20px; margin-top: 28px; }
}

/* --- Insights: article cards (NewsItems macro pointed at Insights) ---
   1 article = one wide card, image beside the text; 2-3 = a row of cards. */
.ih-ins-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 28px;
}
.ih-ins-grid--1 { grid-template-columns: 1fr; }
.ih-ins-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ih-ins-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #FBF9F7;
    border: 1px solid #E2DBD4;
    border-radius: 3px;
    color: #1E1917;
    text-decoration: none;
    transition: border-color .22s ease, transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.ih-ins-card:hover,
.ih-ins-card:focus {
    border-color: #D5CEC6;
    transform: translateY(-4px);
    box-shadow: 0 1px 2px rgba(46,36,30,.06), 0 14px 34px -18px rgba(46,36,30,.4);
    text-decoration: none;
}
.ih-ins-shot {
    position: relative;
    display: block;
    overflow: hidden;
    height: 0;
    padding-bottom: 52.5%;
    background: #171311;
    border-bottom: 1px solid #E2DBD4;
}
.ih-ins-shot img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ih-ins-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 22px 24px 24px;
}
.ih-ins-title {
    display: block;
    margin: 8px 0 10px;
    font-family: "Jost", "Century Gothic", futura, sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    color: #1E1917;
    transition: color .2s ease;
}
.ih-ins-card:hover .ih-ins-title { color: #C22E22; }
.ih-ins-sum {
    display: block;
    color: #5F564F;
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.55;
}
.ih-ins-card:hover .ih-svc-more svg { transform: translateX(4px); }
.ih-ins-grid--1 .ih-ins-card { flex-direction: row; }
.ih-ins-grid--1 .ih-ins-shot {
    flex: 0 0 46%;
    height: auto;
    min-height: 300px;
    padding-bottom: 0;
    border-bottom: 0;
    border-right: 1px solid #E2DBD4;
}
.ih-ins-grid--1 .ih-ins-body { justify-content: center; padding: 40px 44px; }
.ih-ins-grid--1 .ih-ins-title { font-size: 30px; }

@media only screen and (max-width: 992px) {
    .ih-ins-grid,
    .ih-ins-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ih-ins-grid--1 { grid-template-columns: 1fr; }
}
@media only screen and (max-width: 768px) {
    .ih-ins-grid,
    .ih-ins-grid--1,
    .ih-ins-grid--2 { grid-template-columns: 1fr; gap: 18px; padding: 0 20px; }
    .ih-ins-grid--1 .ih-ins-card { flex-direction: column; }
    .ih-ins-grid--1 .ih-ins-shot { min-height: 0; padding-bottom: 52.5%; border-right: 0; border-bottom: 1px solid #E2DBD4; }
    .ih-ins-grid--1 .ih-ins-body { padding: 22px 24px 24px; }
    .ih-ins-grid--1 .ih-ins-title { font-size: 24px; }
}

/* ==========================================================================
   10. Footer — four columns + legal bar
   ========================================================================== */
#footer {
    background-color: #EEEAE6;
    border-top: 1px solid #E2DBD4;
    padding-block: 56px 40px;
    color: #5F564F;
}
.footerpriv {
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 28px;
    width: 100%;
}
.ih-foot-grid {
    display: grid;
    grid-template-columns: minmax(0,1.4fr) repeat(3, minmax(0,1fr));
    gap: 40px;
}
.ih-foot-col {
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: flex-start;
}
.ih-foot-col h4 {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #8F857D;
    margin: 0 0 2px;
}
.ih-foot-col a {
    color: #5F564F;
    font-size: .94rem;
    text-decoration: none;
    transition: color .18s ease;
}
.ih-foot-col a:hover { color: #C22E22; }
.ih-foot-col address {
    font-style: normal;
    color: #5F564F;
    font-size: .94rem;
    line-height: 1.7;
    margin: 0;
}
.ih-foot-muted { color: #8F857D; }
.ih-foot-logo { line-height: 0; margin-bottom: 4px; }
.ih-foot-logo img { height: 42px; width: auto; }

.ih-foot-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid #E2DBD4;
}
.ih-foot-bottom p { margin: 0; }
.ih-legal { display: flex; align-items: center; gap: 9px; }
.ih-legal a { color: #8F857D; text-decoration: none; transition: color .18s ease; }
.ih-legal a:hover { color: #C22E22; }
.ih-legal span { color: #D5CEC6; }


/* ==========================================================================
   11. Back to top
   ========================================================================== */
/* The legacy rule is `a.back-to-top` (0,1,1) with an up-arrow.png background
   and text-indent:-9999px hiding the icon. Matching that specificity here so
   the PNG can be dropped for a real Font Awesome chevron - and so the hover
   shorthand cannot wipe the background out from under it. */
a.back-to-top,
.back-to-top {
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    text-indent: 0;
    background-color: #C22E22;
    background-image: none;
    color: #FFF6F3;
    border: 0;
    border-radius: 3px;
    opacity: 1;
    transition: background-color .18s ease, transform .18s ease;
}
a.back-to-top:hover,
a.back-to-top:focus,
.back-to-top:hover {
    background-color: #9C2317;
    background-image: none;
    color: #FFF6F3;
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}
a.back-to-top .fa,
.back-to-top .fa {
    color: #FFF6F3;
    font-size: 16px;
    line-height: 44px;
}


/* ==========================================================================
   12. Responsive
   ========================================================================== */
/* ==========================================================================
   12b. Mobile / tablet navigation
   --------------------------------------------------------------------------
   Runs to 991px, not 767px. The nav needs roughly 843px of content width
   (links ~502 + quote 146 + logo 147 + gaps 48); with the container's own
   padding that is a ~899px viewport. Between 768 and ~899 the row overflowed
   and the logo - the only flex item free to shrink - collapsed to nothing.
   991px is also exactly where the centred desktop nav starts, so the two
   layouts now meet with no gap between them.

   Keep MOBILE_NAV_MAX in Scripts/main.js in step with this number.
   ========================================================================== */
@media only screen and (max-width: 991px) {
    /* --- mobile menu panel -------------------------------------------------
       Modelled on the total-bbq header: the hamburger opens a full-width
       panel below the logo row, the bars animate to an X, and the quote CTA
       finishes the panel.

       Two deliberate departures from that reference. #header is fixed here,
       so the panel scrolls internally instead of pushing the page down. And
       submenus are an accordion rather than permanently expanded - with five
       services plus three about-pages, always-open produced a menu far taller
       than the viewport, which is what it was doing before.

       Driven by Scripts/main.js, not Bootstrap collapse. Keep MOBILE_NAV_MAX
       there in step with the 767px breakpoint on this block. */

    /* responsive.css adds margin/padding here that double up on the container */
    #header .navbar-inverse { margin: 0; padding: 0; }

    /* The header container is a flex row on desktop, with no wrap. Left as-is
       the panel becomes a second column beside the logo - taking half the
       width, squashing the logo flat, and align-items:center then floats that
       squashed logo against the middle of a tall panel. Wrapping puts the logo
       row and the panel on separate lines, which is what the reference does. */
    #header .navbar-inverse > .container { flex-wrap: wrap; gap: 0; }

    /* Logo centred with the hamburger pinned to the right edge. The toggle
       is taken out of flow so the logo centres against the full row rather
       than against the space left over beside the button. */
    #header .navbar-header {
        position: relative;
        flex: 0 0 100%;
        width: 100%;
        justify-content: center;
        padding: 0;
    }
    #header .navbar-brand { order: 1; margin: 0; }

    /* --- hamburger --- */
    #header .navbar-inverse .navbar-toggle,
    #header .navbar-inverse .navbar-toggle:focus,
    #header .navbar-inverse .navbar-toggle:hover {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        float: none;
        margin: 0;
        padding: 10px 9px;
        border: 1px solid #D5CEC6;
        border-radius: 3px;
        background: transparent;
        outline: none;
    }
    #header .navbar-inverse .navbar-toggle:hover { background: #FBF9F7; }
    #header .navbar-toggle .icon-bar {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 1px;
        background: #1E1917;
        transition: transform .22s ease, opacity .16s ease;
    }
    /* child 1 is the .sr-only span, so the bars are children 2-4 */
    #header .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
    #header .navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(2) {
        transform: translateY(6px) rotate(45deg);
    }
    #header .navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(3) { opacity: 0; }
    #header .navbar-toggle[aria-expanded="true"] .icon-bar:nth-child(4) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* --- the panel --- */
    #header .navbar-collapse {
        display: none;
        float: none;
        flex: 0 0 100%;
        order: 3;
        width: 100%;
        margin: 0;
        padding: 4px 0 16px;
        border: 0;
        border-top: 1px solid #E2DBD4;
        background: #EEEAE6;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* px first as a fallback for anything that chokes on vh */
        max-height: 420px;
        max-height: 76vh;
    }
    #header .navbar-collapse.open { display: block; }

    #header .navbar-inverse .navbar-nav {
        display: block;
        float: none;
        width: 100%;
        margin: 0;
    }
    #header .navbar-inverse .navbar-nav > li { float: none; width: 100%; }
    #header .navbar-inverse .navbar-nav > li > a {
        display: flex;
        align-items: center;
        padding: 13px 2px;
        border-bottom: 1px solid rgba(46,36,30,.10);
    }

    /* chevron gets a real tap target without changing the row height */
    #header .navbar-nav > li > a .fa-angle-down {
        margin-left: auto;
        margin-right: -8px;
        padding: 12px 8px;
        font-size: 16px;
        transition: transform .22s ease;
    }
    #header .navbar-nav > li.ih-sub-open > a .fa-angle-down { transform: rotate(180deg); }

    /* --- accordion submenus: closed until main.js slides them open --- */
    #header ul.sub-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
        min-width: 0;
        margin: 0;
        padding: 2px 0 8px 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    #header ul.sub-menu > li > a { padding: 9px 10px; }
    /* the desktop hover-open must not reach inside the panel */
    #header .navbar-nav > li:hover > ul.sub-menu,
    #header .navbar-nav > li:focus-within > ul.sub-menu { display: none; }
    #header .navbar-nav > li.ih-sub-open > ul.sub-menu { display: block; }

    /* --- quote CTA closes the panel --- */
    #header .navbar-collapse .ih-quote {
        display: block;
        width: 100%;
        margin: 16px 0 0;
        text-align: center;
    }

}

@media (max-width: 991px) {
    .ih-foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; }
}

@media (max-width: 767px) {
    .ih-topbar__inner,
    #header .navbar-inverse > .container { padding-inline: 20px; }
    .ih-topbar__loc { display: none; }
    #header .navbar-brand img,
    #header #logo { height: 32px !important; flex-shrink: 0; }
    #header .navbar-brand { padding: 12px 0; flex-shrink: 0; }
    #content { padding-top: 104px; }

    .ih-foot-grid { grid-template-columns: 1fr; gap: 30px; }

}


/* ==========================================================================
   13. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
    }
}


/* ==========================================================================
   2026 redesign - responsive.css guard
   --------------------------------------------------------------------------
   responsive.css is registered after main.css, and inside its breakpoints it
   sets h1{22-25px} / h2{20px}, which would crush the scale above on tablet
   and phone. These rules carry one extra element selector (body) so they win
   on specificity regardless of file order. Keep this last.
   ========================================================================== */
@media only screen and (max-width: 992px) {
    body h1 { font-size: 44px; }
    body h2 { font-size: 36px; }
    body h3 { font-size: 25px; }
}

@media only screen and (max-width: 768px) {
    body h1 { font-size: 2.05rem; line-height: 1.1; }
    body h2 { font-size: 1.8rem; }
    body h3 { font-size: 1.35rem; }
    /* Hero sizing deliberately not repeated here. These read
       body .ih-hero__title (0,1,1), which matched only the empty <h1> - the
       CMS wraps the headline text in a <p>, and that <p> is claimed by the
       stronger .frontSlider .slide .ih-hero__title * rule. Hero type now
       lives in one place, the "hero at smaller widths" block above. */
}

/* Portfolio grid (/portfolio/): plain flex wrap, laid out by the browser as the HTML arrives.
   Replaced isotope 2026-10-09; the column widths still come from the Bootstrap col-* classes. */
.portfolio-items { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.portfolio-items:before, .portfolio-items:after { display: none; }