.top-a {
    height: 110px;
    background: #fff;
    border-bottom: 1px solid #c9c9c9;
    box-shadow: none;
}

.top-a .logo {
    left: 28px;
    top: 47px;
}

.top-a .logo img {
    height: 50px;
}

.bar-a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 34px;
    padding: 0 26px;
    background: #2a3187;
}

.bar-a .mobileOnly {
    display: none;
}

.bar-a .utility-nav {
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.bar-a li {
    float: none;
    display: inline-block;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 12px;
    line-height: 34px;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.bar-a li a,
.bar-a li button {
    color: inherit;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 0;
    background: transparent !important;
    padding: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    box-shadow: none !important;
}

.bar-a li a:hover,
.bar-a li button:hover {
    color: #d9ddff;
}

.bar-a .utility-rfq .rfqCount {
    color: #7dff56 !important;
}

.bar-a .utility-rfq button {
    font-weight: inherit;
}

.bar-a li.imageNav {
    position: absolute;
    right: 30px;
    top: 59px;
    z-index: 40;
    margin: 0;
    line-height: 1;
}

.bar-a li.imageNav a {
    display: block;
    position: relative;
    z-index: 41;
    line-height: 1;
}

.bar-a li.imageNav img {
    height: 31px;
}

.nav-a {
    top: 44px;
    left: 276px;
    right: 148px;
    width: auto;
    background: transparent;
    text-align: right;
}

.nav-a .centerer {
    width: auto !important;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

.nav-a .t1 {
    display: inline-block;
    height: 62px;
    margin-left: auto;
}

.nav-a .t1 > li {
    font-size: 16px;
    line-height: 62px;
    letter-spacing: 0.01em;
    font-weight: 800;
}

.nav-a .t1 > li ~ li {
    padding: 0 8px;
}

.nav-a .t1 > li > a {
    color: #2a3187;
    padding: 0 4px;
}

.nav-a .t1 > li > a:hover {
    color: #2a3187;
}

.nav-a .t1 > li:hover > a,
.nav-a .t1 > li:focus-within > a {
    color: #2a3187;
}

.nav-a .t1 > li:hover {
    border-bottom: 0;
}

.nav-a .t1 > li > a > .down-a {
    display: none;
}

.nav-a .t1 > li > ul {
    margin: 0;
    top: 64px;
}

.nav-a .t1 > li > ul,
.nav-a .t1 > li:hover > ul {
    display: none;
}

.nav-a .t1 > li:hover > ul.mega-menu,
.nav-a .t1 > li:hover > ul:not(.mega-menu) {
    display: block;
}

.nav-a .t1 > li > ul.mega-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: 106px;
    width: 100%;
    min-height: 360px;
    padding: 30px 56px 36px;
    padding-right: 500px;
    background: #fff;
    border-top: 1px solid #c9c9c9;
    border-bottom: 1px solid #d9d9d9;
    box-sizing: border-box;
    z-index: 999;
}

.nav-a .t1 > li > ul.mega-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
    background: transparent;
}

.nav-a .t1 > li > ul.mega-menu::after {
    content: "";
    display: table;
    clear: both;
}

.nav-a .t1 > li > ul.mega-menu > li {
    float: left;
    width: 17%;
    margin-right: 3%;
    padding: 0;
    background: transparent;
    line-height: 1.4;
    white-space: normal;
}

.nav-a .t1 > li > ul.mega-menu > li.mega-column {
    min-height: 328px;
}

.nav-a .t1 > li > ul.mega-menu > li.mega-image {
    position: absolute;
    right: 56px;
    top: 65px;
    width: 430px;
    margin-right: 0;
}

.nav-a .t1 > li > ul.mega-menu > li.mega-image img {
    display: block;
    width: 100%;
    height: auto;
}

.nav-a .t1 > li.nav-interior > ul.mega-menu > li.mega-column {
    width: calc((100% - 36px) / 2);
    margin-right: 36px;
}

.nav-a .t1 > li.nav-interior > ul.mega-menu > li.mega-image {
    width: 430px;
}

.nav-a .t1 > li.nav-interior > ul.mega-menu > li.mega-column:nth-child(2) {
    margin-right: 0;
}

.nav-a .t1 > li.nav-exterior > ul.mega-menu > li.mega-column {
    width: calc((100% - 72px) / 3);
    margin-right: 36px;
}

.nav-a .t1 > li.nav-exterior > ul.mega-menu > li.mega-column:nth-child(3) {
    margin-right: 0;
}

.mega-title {
    display: block;
    margin-bottom: 16px;
    padding-bottom: 12px;
    color: #2a3187;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom: 1px solid #c9c9c9;
}

.nav-a .t1 > li > ul.mega-menu > li .submenu {
    display: block;
    position: static;
    margin: 0;
    padding: 0;
}

.nav-a .t1 > li > ul.mega-menu > li .submenu li {
    display: block;
    padding: 0;
    margin: 0 0 8px;
    background: transparent;
    line-height: 1.35;
}

.nav-a .t1 > li > ul.mega-menu > li .submenu li:hover {
    background: transparent;
}

.nav-a .t1 > li > ul.mega-menu > li .submenu li a {
    color: #2a3187;
    font-size: 14px;
    font-weight: 700;
    text-transform: none;
    padding: 0;
    background: transparent;
}

.nav-a .t1 > li > ul.mega-menu > li .submenu li:hover > a,
.nav-a .t1 > li > ul.mega-menu > li .submenu li a:hover {
    color: #8d8d8d;
    background: transparent;
}

.nav-a .t1 > li:not(.nav-exterior):not(.nav-interior) > ul {
    position: absolute;
    left: 0;
    min-width: 240px;
    padding: 10px 0;
    background: #fff;
    border: 1px solid #d7d7d7;
}

.nav-a .t1 > li:not(.nav-exterior):not(.nav-interior) > ul > li {
    padding: 0 16px;
    background: #fff;
    line-height: 34px;
    white-space: nowrap;
}

.nav-a .t1 > li:not(.nav-exterior):not(.nav-interior) > ul > li:hover {
    background: #f4f4f4;
}

.nav-a .t1 > li:not(.nav-exterior):not(.nav-interior) > ul > li > a {
    color: #2a3187;
    font-size: 14px;
    font-weight: 700;
}

.nav-a .t1 > li:not(.nav-exterior):not(.nav-interior) > ul > li img.dropArrow,
.nav-a .t1 > li:not(.nav-exterior):not(.nav-interior) > ul > li ul.submenu {
    display: none !important;
}

.home-reference {
    background: #fff;
}

.home-reference-hero.hero-a.home .wrap {
    height: clamp(420px, 46vw, 680px) !important;
    max-height: 70vh;
}

.home-reference-hero.hero-a.home article,
.home-reference-hero.hero-a.home article figure,
.home-reference-hero.hero-a.home article figure a,
.home-reference-hero.hero-a.home figure .bg,
.home-reference-hero.hero-a.home .owl-wrapper,
.home-reference-hero.hero-a.home .owl-wrapper-outer,
.home-reference-hero.hero-a.home .owl-item {
    height: clamp(420px, 46vw, 680px) !important;
    max-height: 70vh;
}

.home-reference-hero.hero-a.home article figure {
    position: relative;
    margin: 0;
}

.home-reference-hero.hero-a.home article figure a {
    display: block;
    position: relative;
    overflow: hidden;
}

.home-reference-hero.hero-a.home article figure > a > img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
}

.home-reference-hero.hero-a.home .owl-item article,
.home-reference-hero.hero-a.home .owl-item.active article {
    display: block !important;
}

.home-reference-hero.hero-a.home figure .block {
    width: min(530px, calc(100% - 112px));
    min-height: 180px;
    top: 50%;
    left: 56px;
    right: auto;
    bottom: auto;
    transform: translateY(-50%);
    padding: 24px 28px 22px;
    background: rgba(42, 49, 135, 0.82);
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.45;
    text-transform: none;
}

.home-reference-hero.hero-a.home figure .block strong,
.home-reference-hero.hero-a.home figure .block span,
.home-reference-hero.hero-a.home figure .block em {
    display: block;
}

.home-reference-hero.hero-a.home figure .block strong {
    font-size: 38px;
    line-height: 1.05;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff;
}

.home-reference-hero.hero-a.home figure .block span {
    color: #fff;
    font-size: 17px;
}

.home-reference-hero.hero-a.home figure .block em {
    margin-top: 14px;
    color: #2cd6da;
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
}

.home-reference-hero.hero-a.home .owl-controls {
    bottom: 8px;
}

.home-reference-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 8px 0 38px;
}

.home-reference-section {
    margin-bottom: 38px;
}

.style-finder__header,
.interior-types__header {
    text-align: center;
    padding: 0 20px;
}

.style-finder__header h2 {
    margin: 30px 0 0;
    font-size: 35px;
    line-height: 1.2;
    font-weight: 800;
    color: #1e1e1e;
}

.style-finder__header p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #6a6a6a;
}

/* Every style on one line -- no carousel, no arrows, no wrapping. The card count
   is whatever the branch has left after home.php drops the styles with no doors
   behind them, so nothing here may assume a number: flex-basis 0 divides the row
   by however many there are. Deliberately not a repeat(auto-fit, ...) grid --
   auto-fit picks its column count from the track's max size when that is
   definite, so capping card width there caps the columns too and the rest wrap. */
.style-finder__grid {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

.style-card,
.interior-card {
    display: block;
    text-decoration: none !important;
}

/* min-width:0 so the cards actually divide the row: a flex item's default
   min-width:auto floors it at its content, and the uppercase titles would push
   the row wider than the shell once there are enough of them. max-width keeps
   two or three styles from each taking a third of the page; the leftover is
   absorbed by justify-content above. */
.style-card {
    flex: 1 1 0;
    min-width: 0;
    max-width: 300px;
}

.style-card__image,
.interior-card__image {
    display: block;
    aspect-ratio: 3891 / 2594;
    border: 1px solid #d9d9d9;
    background: #f6f6f6;
    overflow: hidden;
}

.style-card__image img,
.interior-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.style-card__title {
    display: block;
    margin-top: 12px;
    color: #2a3187;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}

.interior-card__title {
    display: block;
    margin-top: 12px;
    color: #2a3187;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}

.interior-types {
    padding: 0;
}

.interior-types__header {
    position: relative;
    z-index: 0;
    text-align: center;
    margin: 0 0 38px;
    padding-left: 0;
    padding-top: 14px;
    padding-bottom: 14px;
}

.interior-types__header::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    background: #f1f1f1;
    z-index: -1;
}

.interior-types__header h3 {
    margin: 0;
    color: #333;
    font-size: 25px;
    font-weight: 700;
}

.interior-types__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

/* ============================================================
   Home-page highlight cards (the home_mods band)

   What branches 33 and 56 get where the .style-finder and .interior-types
   sections sit on every other branch. Both have no door sections in their
   navigation, so their home page must not link into the catalog; the band is
   driven by their existing home_mods rows instead (pages/home.php:142).

   Composed from the two sections it replaces:

       header       <- .style-finder__header  :432
       grid         <- .interior-types__grid  :555
       card + title <- .interior-card*        :465

   The class names are .home-mods* rather than the legacy .advantage* the old
   home page used, because those rules are still in the shared screen.css
   (:1370-1378) and would partially override anything that matched them --
   .advantageSection p alone sets position, background-color, color and
   font-size. Renaming leaves them dead. Corp carries the same block, under the
   same names, at nav-reference.css:804.
   ============================================================ */

.home-mods__header {
    text-align: center;
    padding: 0 20px;
}

.home-mods__header h2 {
    margin: 30px 0 0;
    font-size: 35px;
    line-height: 1.2;
    font-weight: 800;
    color: #1e1e1e;
}

/* The 12px top margin is .style-finder__grid's (:562), which is where the
   centred header above gets its gap; .interior-types__header instead carries
   its own margin-bottom. */
.home-mods__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 12px 0 0;
}

.home-mods-card {
    display: block;
    text-decoration: none !important;
}

.home-mods-card__image {
    display: block;
    /* The door cards' box is 3891/2594 (3:2). home_mods images are 1.38:1 --
       380x275 and 800x579 across 33, 56 and Corp -- so the box takes their
       ratio and object-fit: cover has nothing to trim. */
    aspect-ratio: 380 / 275;
    border: 1px solid #d9d9d9;
    background: #f6f6f6;
    overflow: hidden;
}

.home-mods-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-mods-card__title {
    display: block;
    margin-top: 12px;
    color: #2a3187;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 800;
    text-transform: uppercase;
    text-align: center;
}

.warehouse-banner {
    position: relative;
    overflow: hidden;
}

.warehouse-banner img {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
}

.warehouse-banner__overlay {
    position: absolute;
    left: 34px;
    top: 50%;
    bottom: auto;
    width: 300px;
    padding: 16px 18px;
    transform: translateY(-50%);
    background: rgba(42, 49, 135, 0.82);
    color: #fff;
}

.warehouse-banner__overlay h3 {
    margin: 0 0 6px;
    color: #fff;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 800;
}

.warehouse-banner__overlay p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
}

.dealer-section {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    align-items: start;
}

.dealer-section__copy h3 {
    margin: 0 0 10px;
    color: #444;
    font-size: 28px;
    font-weight: 400;
}

.dealer-section__copy h3 span,
.dealer-section__copy h3 a {
    color: #2a3187;
    font-weight: 800;
    text-decoration: none;
}

.dealer-section__copy h3 a:hover,
.dealer-section__copy h3 a:focus {
    color: #2a3187;
    text-decoration: none;
}

.dealer-section__copy p {
    margin: 0 0 12px;
    color: #696969;
    font-size: 13px;
    line-height: 1.5;
}

.dealer-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 14px;
    align-items: stretch;
}

.dealer-form__location {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(78px, 0.5fr) minmax(102px, 0.8fr);
    gap: 12px;
}

.dealer-form input,
.dealer-form__submit {
    width: 100%;
    box-sizing: border-box;
}

.dealer-form input {
    height: 46px;
    padding: 0 14px;
    border: 1px solid #d0d0d0;
    font-size: 13px;
    color: #444;
    border-radius: 0;
    background: #fff;
}

.dealer-form input::placeholder {
    color: #b7b7b7;
}

.dealer-form__submit {
    min-width: 0;
    height: 46px;
    border: 0;
    background: #2a3187;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    justify-self: stretch;
}

.dealer-section__map {
    text-align: center;
}

.dealer-section__map img {
    width: 100%;
    max-width: 360px;
}

.companyLogos--bottom {
    padding: 0px 0 0;
    text-align: center;
}

.companyLogos--bottom .companyLogo {
    max-height: 42px;
    width: auto;
    margin: 8px 10px;
}

@media screen and (max-width: 1199.98px) {
    .top-a {
        height: 92px;
    }

    .bar-a {
        display: none;
    }

    .nav-a {
        left: auto;
        right: 0;
        width: auto;
        top: auto;
        text-align: center;
    }

    .nav-a .centerer {
        width: auto !important;
        margin: 0;
        display: block;
        text-align: center;
    }

    .nav-a .t1 {
        margin-left: 0;
    }

    /* The full branch logo replaces the old "D" mark here, so the box has to be
       sized rather than left at the mark's 50px. Height is capped for the roomy
       end of the range and width for the tight end: the Edge logo and the
       hamburger need about 180px of the right side, and the logos run anywhere
       from 2.75:1 (North State) to 6:1 (branch 56), so a fixed height alone
       would give each branch a different width and overrun that reservation. */
    /* Three different bounds below take turns deciding the logo's size as the
       viewport changes -- the h1's width around phone widths, the viewport calc
       under ~360px, the height cap over ~412px. They all describe one logo, so
       --logo-scale trims them together; nudge that alone to resize it. */
    .top-a .logo {
        --logo-scale: 0.95;
        width: calc(50% * var(--logo-scale));
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Keep a definite width on the h1 above. These SVGs carry a viewBox but no
       intrinsic width, so pairing height: auto with a shrink-to-fit float gives
       the image nothing to size against and it collapses to 0x0. */
    .top-a .logo img {
        height: auto;
        max-height: calc(36px * var(--logo-scale));
        max-width: calc((100vw - 180px) * var(--logo-scale));
    }

    /* These three used to sit on hard-coded tops of 18/25/28px, which happened
       to line up only because the logo was a 48px square. With a logo whose
       height now varies by branch, each one centers on the header midline
       instead so they stay aligned to each other. */
    .top-a .toggler,
    .mobileEdge {
        top: 50%;
        transform: translateY(-50%);
    }

    /* Centering the toggler's box isn't enough: the anchor is empty and 30px
       tall (screen.css sizes it for a "Menu" label it no longer carries), while
       the bars are a 17px :after pinned to the top of it. That left 13px of
       dead space below the bars and the ink riding ~7px above both logos.
       Flex centers the ink without giving up the 30px tap target. */
    .top-a .toggler {
        display: flex;
        align-items: center;
    }

    .home-reference-shell {
        padding: 10px 16px 20px;
    }

    .interior-types__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Keeping every style on one line squeezes the cards down here -- around
       128px each at 768px with six of them. The titles are single words, so
       there is nowhere for them to wrap; shrink the type instead so the longest
       ("CONTEMPORARY") still fits the card. */
    .style-card__title {
        font-size: 12px;
    }

    .dealer-section {
        grid-template-columns: 1fr;
    }

    .sidenav-a .mega-image {
        display: none;
    }

    .sidenav-a .mega-title {
        border-bottom: 0;
        margin-bottom: 8px;
        padding-bottom: 0;
    }
}

@media screen and (max-width: 767.98px) {
    .home-reference-hero .wrap,
    .home-reference-hero article,
    .home-reference-hero article figure,
    .home-reference-hero article figure a,
    .home-reference-hero figure .bg,
    .home-reference-hero .owl-wrapper,
    .home-reference-hero .owl-wrapper-outer,
    .home-reference-hero .owl-item {
        height: 260px !important;
    }

    /* The owl pager sits 8px off the bottom of the hero and stands 21px tall, so
       at bottom: 0 this panel covered it outright -- the dots landed on top of
       the "Learn More" link. Clearing 29px of pager plus a little air lifts the
       panel off the bottom edge and leaves the dots against the photo.
       Content centers in the panel now rather than being pushed to the bottom,
       which is what left the dead space above the title. */
    .home-reference-hero.hero-a.home figure .block {
        top: auto;
        left: 0;
        right: 0;
        bottom: 38px;
        transform: none;
        width: 100%;
        min-height: 0;
        height: 50%;
        padding: 18px 18px 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .home-reference-hero.hero-a.home figure .block strong {
        font-size: 28px;
        margin-bottom: 8px;
    }

    .home-reference-hero.hero-a.home figure .block span {
        font-size: 14px;
    }

    .home-reference-hero.hero-a.home figure .block em {
        margin-top: 10px;
        font-size: 14px;
    }

    /* Desktop's 1.2 leaves gaps you notice once this wraps to three or four
       lines at phone width, which it always does. */
    .style-finder__header h2,
    .home-mods__header h2 {
        line-height: 1.08;
    }

    .interior-types__grid,
    .home-mods__grid,
    .dealer-form__grid {
        width: 100%;
    }

    /* One line is a desktop and tablet promise. On a phone five or six across
       would be unreadable, so drop back to a two-column grid that wraps for as
       many rows as the branch needs. */
    .style-finder__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .style-card {
        max-width: none;
    }

    /* Three cards side by side are too narrow to read at phone width. */
    .interior-types__grid,
    .home-mods__grid,
    .dealer-form__grid {
        grid-template-columns: 1fr;
    }

    .dealer-form__location {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .warehouse-banner img {
        height: 215px;
    }

    .warehouse-banner__overlay {
        left: 12px;
        top: auto;
        bottom: 12px;
        transform: none;
        width: calc(100% - 24px);
    }

    .companyLogos--bottom .companyLogo {
        max-width: 42%;
        height: auto;
    }
}