/* Ported from Dyke-Branch's home-nav-reference.css + screen.css.
   Loaded after screen.css, so at equal specificity these win on source order
   and the shared screen.css stays untouched.

   Scope is chrome only: header bar, desktop nav, the mobile slide-out drawer,
   and the hero. Corp's dropdown *content* and the sections below the hero are
   left exactly as they were. Branch's mega menu isn't here -- Corp emits no
   .mega-menu, and its whole product layer (epicor_query/doorProducts) doesn't
   exist in this project.

   Where a rule differs from Branch's, the reason is in a comment next to it.
   Everything else is byte-for-byte Branch so the two files stay diffable. */

/* ------------------------------------------------------------
   Scoped margin reset

   Branch rewrote its global reset (screen.css:1/7/9) so div/form/ul/figure
   carry no bottom margin. Corp's screen.css:7 still hands every block element
   `margin: 0 0 15px`, and the ported chrome assumes Branch's zero. Reproducing
   Branch's reset site-wide would move every page on this site, so it's scoped
   to the three containers this file owns.

   The visible symptom it fixes: the zero-height .searchWrapper.mobileOnly form
   inside .bar-a still carried that 15px margin, which pushed .utility-nav from
   top=0 to top=15 -- 15px past the bottom of the 34px band, clipping the
   descenders on every label.
   ------------------------------------------------------------ */

.top-a,
.top-a div, .top-a form, .top-a ul, .top-a li, .top-a p,
.top-a h1, .top-a h2, .top-a h3, .top-a h4, .top-a h5, .top-a h6,
.home-reference-hero div, .home-reference-hero form,
.home-reference-hero article, .home-reference-hero figure,
.sidenav-a,
.sidenav-a div, .sidenav-a form, .sidenav-a ul, .sidenav-a li, .sidenav-a p {
    margin-bottom: 0;
}

/* ============================================================
   Desktop header + utility bar + nav
   ============================================================ */

.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;
}

/* ------------------------------------------------------------
   Inline search in the utility bar  (Corp-only)

   Branch put a plain "Search" link here, so there is nothing to copy. Corp had
   an inline input before the port and it goes back in, restyled for the 34px
   indigo band: the old one was a default-chrome text field sitting on a white
   nav strip.

   The magnifier in top-a-search-a.png is an 8-bit grayscale #999 glyph drawn
   for that white strip. brightness(3) takes 153 past 255, i.e. white, without
   touching the alpha channel or repainting an asset the rest of the site
   still uses.
   ------------------------------------------------------------ */

.bar-a .utility-search form {
    margin: 0;
}

.bar-a .utility-search {
    /* screen.css gives the bar's list items line-height: 34px. That makes this
       <li> a full-height flex item with the 22px field pinned to the top of its
       line box -- 6px high. Zeroing it lets the field's own height set the row,
       so the bar's align-items: center can middle it. */
    line-height: 0;
}

.bar-a .utility-search .searchWrapper {
    /* screen.css:2457 nudges this up 3px to sit on the old baseline; the flex
       bar centres it now. Flex so the wrapper is exactly as tall as the field,
       which also keeps .searchSubmit's top: 0 correct. */
    display: flex;
    margin: 0;
    width: 170px;
}

.bar-a .utility-search .searchBar {
    width: 100%;
    height: 22px;
    padding: 0 26px 0 8px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0.03em;
}

.bar-a .utility-search .searchBar:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.22);
    border-color: #fff;
}

.bar-a .utility-search .searchBar::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.bar-a .utility-search .searchBar::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.bar-a .utility-search input[type="submit"].searchSubmit {
    top: 0;
    right: 0;
    width: 24px;
    height: 22px;
    background-size: 13px 12px;
    filter: brightness(3);
    -webkit-filter: brightness(3);
    cursor: pointer;
}


.nav-a {
    top: 44px;
    left: 276px;
    /* Branch reserves 148px for the DykeEDGE mark that sits at the right end of
       its header. Corp's is commented out (header.php:31), so that reservation
       was just a gap -- 28px mirrors the logo's left inset instead. */
    right: 28px;
    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;
}

/* ============================================================
   Mega-menu panels  (Exterior Doors, Interior Doors)

   Verbatim from Dyke-Branch/assets/styles/home-nav-reference.css:170-296.

   Branch fills these columns from the epicor product database; Corp has no such
   connection, so navMegaColumns() (includes/functions.php) builds them from the
   same `webpages` rows the old dropdown used -- a child page with children of
   its own becomes a titled column, leftover leaves fill the last column. The
   CSS is unchanged because the resulting markup is the same shape: .mega-column
   > .mega-title + ul.submenu, with .mega-image last.
   ============================================================ */

.nav-a .t1 > li > ul.mega-menu {
    /* Corp-only, same cause as the plain panels below: .nav-a carries
       text-align: right to push the top-level bar to the right edge, and it
       inherits straight into the panel. Branch's own .nav-a is right-aligned
       too, but its mega columns are narrow enough that it never showed. */
    text-align: left;
    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;
}

/* Corp-only. Branch's .mega-title is a bare <span> because its column headings
   ("Door Style", "Door Material") are filter groupings with no page behind
   them. Corp's headings are real CMS pages -- "Doors by Material" and "Door by
   Glass Type" both have their own URL -- so the heading wraps a link, which
   then has to be talked out of looking like one. */
.mega-title a {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-decoration: none;
}

.mega-title a:hover {
    color: #8d8d8d;
}


/* ============================================================
   Dropdown panels

   Branch styles these as the "not a mega menu" leftovers, so the selectors keep
   their :not(.nav-exterior):not(.nav-interior) guard even though no Corp <li>
   carries either class. Left in place deliberately: it costs nothing and keeps
   this block diffable against Branch.
   ============================================================ */

.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;
    /* Corp-only. .nav-a carries text-align: right so the top-level bar hugs the
       right edge, and that inherits straight into the panels. Branch never sees
       it because its panels are mega menus with their own grid; Corp's plain
       lists came out right-aligned. */
    text-align: left;
}

.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;
}


/* Branch hides .dropArrow and ul.submenu outright -- its dropdowns are mega
   menus that render children inline, so the third level is redundant there.
   Corp's aren't: "How To Video Library" under Resources has eight children that
   are reachable from nowhere else in the nav. So instead of hiding them, they
   fly out sideways. (Before the mega menus landed this also covered "Doors by
   Material" and "Door by Glass Type"; those are columns now.)

   Guarded against the two mega menus the same way the panel rules above are.
   Without it the `white-space: nowrap` below leaks into .mega-menu .submenu
   (Branch's mega rules restate everything else but not that one property),
   and long labels like "Grilles Between Glass (GBG)" overflow their column. */
.nav-a .t1 > li:not(.nav-exterior):not(.nav-interior) > ul > li {
    position: relative;
}

/* -11px, not 0: the parent panel has 10px of top padding plus a 1px border, so
   this pulls the flyout's first row level with the row that opened it. */
.nav-a .t1 > li:not(.nav-exterior):not(.nav-interior) > ul > li > ul.submenu {
    display: none;
    text-align: left;
    position: absolute;
    /* Corp's screen.css:1081 opens this to the right (left: 100%). That worked
       when .nav-a was a centred full-width strip; the new nav is right-aligned,
       so every panel now sits within 30px of the viewport's right edge and a
       rightward flyout ran ~245px off-screen at every width. Opening leftward
       clears it with room to spare -- the leftmost flyout parent is Resources,
       whose panel starts at x951 at the 1200px breakpoint, so the 271px flyout
       lands at x680.

       left: auto is load-bearing -- this rule is (0,4,4) against screen.css's
       (0,4,3), so it wins, but only for the properties it restates. Leaving
       left: 100% in place over-constrains the box (both edges pinned, width
       auto), and in that case CSS discards `right`, not `left`. */
    left: auto;
    right: 100%;
    top: -11px;
    min-width: 240px;
    margin: 0;
    padding: 10px 0;
    background: #fff;
    border: 1px solid #d7d7d7;
}

.nav-a .t1 > li:not(.nav-exterior):not(.nav-interior) > ul > li:hover > ul.submenu {
    display: block;
}

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

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

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

/* Kept for parity with Corp's screen.css:1080 only -- templates/header.php
   emits no img.dropArrow at any level, so nothing matches this today. If one is
   ever added: the row is 34px and the arrow is a bare <img> in normal flow, so
   center it against the row rather than letting it sit on the text baseline. */
.nav-a .t1 > li:not(.nav-exterior):not(.nav-interior) > ul > li img.dropArrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    /* Corp's screen.css:1080 floats this arrow and pads it down with
       margin-top: 15px for the old flush-right layout. Same specificity as this
       rule, so only the properties restated here are overridden -- without the
       reset the arrow sat 15px below the row's centre. */
    float: none;
    margin: 0;
    /* right-arrow.png is an opaque white glyph on transparency -- drawn for the
       old #333 nav strip, invisible on the new white panel. Inverting it keeps
       the shape and costs nothing; repainting the shared asset would break
       every other place Corp still uses it on a dark background. */
    filter: invert(1);
    -webkit-filter: invert(1);
}

/* ============================================================
   Hero
   ============================================================ */

.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;
}

/* ============================================================
   Mobile slide-out drawer

   scripts.js builds a panelled drawer now (header row, back button, utility
   list, sliding panels) in place of the flat accordion. Corp's screen.css only
   knows the accordion, so these three undo the parts of it that fight the new
   markup.
   ============================================================ */

/* The panels scroll internally; Corp's screen.css:632 has this as auto, which
   puts a second scrollbar on the drawer itself. */
.sidenav-a > .wrap {
    overflow: hidden;
}

/* The accordion caret. The new drawer navigates by pushing panels, so nothing
   opens in place and the caret would just be decoration pointing at nothing.
   Corp's screen.css:653-655 still draws it. */
.sidenav-a li .toggle {
    display: none;
}

.sidenav-a .mobile-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; background: #fff; }
.sidenav-a .mobile-nav-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 54px; padding: 0 15px; border-bottom: 1px solid #d7d7d7; }
.sidenav-a .mobile-nav-header-start { -webkit-box-flex: 0; -ms-flex: 0 0 92px; flex: 0 0 92px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 92px; }
.sidenav-a .mobile-nav-home { display: none !important; line-height: 0; }
.sidenav-a .mobile-nav-home img { width: auto; height: 42px; }
.sidenav-a .mobile-nav-back,
.sidenav-a .mobile-nav-close { border: 0; background: transparent; color: #333; padding: 0; }
.sidenav-a .mobile-nav-back { display: none; min-width: 92px; font-size: 13px; font-weight: 700; line-height: 1; text-align: left; text-transform: uppercase; }
.sidenav-a .mobile-nav-back.is-visible { visibility: visible; }
.sidenav-a .mobile-nav-back:before { content: '\2039'; margin-right: 6px; font-size: 18px; vertical-align: -1px; }
.sidenav-a .mobile-nav-header-title { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 0 10px; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: center; text-transform: uppercase; }
.sidenav-a .mobile-nav-close { width: 24px; margin-left: auto; font-size: 26px; line-height: 1; text-align: right; color: #999; }
.sidenav-a .mobile-nav-location { display: none; padding: 12px 15px 14px; border-bottom: 1px solid #d7d7d7; color: #444; font-size: 13px; font-weight: 700; line-height: 1.2; text-transform: uppercase; }
.sidenav-a .mobile-nav-location i { margin-right: 8px; color: #666; font-size: 15px; }
.sidenav-a .mobile-nav.is-root-panel .mobile-nav-header { justify-content: flex-end; }
.sidenav-a .mobile-nav.is-root-panel .mobile-nav-header-start { -webkit-box-flex: 0; -ms-flex: 0 0 0; flex: 0 0 0; min-width: 0; width: 0; overflow: hidden; }
.sidenav-a .mobile-nav.is-root-panel .mobile-nav-location { display: block; }
.sidenav-a .mobile-nav.is-root-panel .mobile-nav-header-title,
.sidenav-a .mobile-nav.is-root-panel .mobile-nav-back { display: none; }
.sidenav-a .mobile-nav.is-sub-panel .mobile-nav-location { display: none; }
.sidenav-a .mobile-nav.is-sub-panel .mobile-nav-back.is-visible { display: inline-block; visibility: visible; }
.sidenav-a .mobile-nav-utility { padding: 12px 15px 0; border-bottom: 1px solid #d7d7d7; }
.sidenav-a .mobile-nav-utility-list { list-style: none; margin: 0; padding: 0; }
.sidenav-a .mobile-nav-utility-list { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 10px 1fr; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 10px; }
.sidenav-a .mobile-nav-utility-list > li { border-bottom: 0; padding-bottom: 12px; margin: 0; min-width: 0; }
.sidenav-a .mobile-nav-utility-list > li button,
.sidenav-a .mobile-nav-utility-list > li a { display: block; width: 100% !important; min-height: 34px; margin: 0 !important; padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap; text-align: center; }
.sidenav-a .mobile-nav-viewport { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; }
.sidenav-a .mobile-nav-panels { position: relative; height: 100%; }
.sidenav-a .mobile-nav-panel { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; }
.sidenav-a .mobile-nav-panel.is-active { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
.sidenav-a .mobile-nav-panel.is-off-left { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }
.sidenav-a .mobile-nav-panel.is-off-right { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); }
.sidenav-a .mobile-nav-panel > ul { list-style: none; margin: 0; padding: 0 15px 18px; }
.sidenav-a .mobile-nav-panel-title { padding: 16px 15px 10px; color: #333; font-size: 15px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.sidenav-a .mobile-nav-panel > ul > li { margin: 0; border-bottom: 1px solid #d7d7d7; }
.sidenav-a .mobile-nav-panel > ul > li:first-child,
.sidenav-a .mobile-nav-group-list > li:first-child { border-bottom: 1px solid #d7d7d7; }
.sidenav-a .mobile-nav-trigger,
.sidenav-a .mobile-nav-group-toggle { display: block; width: 100%; border: 0; background: transparent; -webkit-appearance: none; appearance: none; padding: 14px 40px 14px 10px; color: #222; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; text-align: left; text-transform: none; }
.sidenav-a .mobile-nav-panel > ul > li > .mobile-nav-trigger,
.sidenav-a .mobile-nav-panel > ul > li > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; min-height: 44px; padding: 0 40px 0 10px; box-sizing: border-box; color: #222; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: 0; text-align: left; text-transform: uppercase; text-decoration: none !important; }
.sidenav-a .mobile-nav-panel li.has-panel:after,
.sidenav-a .mobile-nav-group-toggle:after { position: absolute; right: 18px; top: 50%; content: ''; width: 8px; height: 8px; margin-top: -6px; border-top: 2px solid #333; border-right: 2px solid #333; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); pointer-events: none; }
.sidenav-a .mobile-nav-group-list { padding-top: 4px; }
.sidenav-a .mobile-nav-group { border-bottom: 1px solid #d7d7d7; }
.sidenav-a .mobile-nav-group-toggle { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 44px; padding: 0 40px 0 10px; box-sizing: border-box; font-size: 15px; text-transform: uppercase; letter-spacing: 0; }
.sidenav-a .mobile-nav-group.is-open .mobile-nav-group-toggle:after { margin-top: -2px; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }
.sidenav-a .mobile-nav-group-links { display: none; list-style: none; margin: 0; padding: 0 0 10px 10px; }
.sidenav-a .mobile-nav-group.is-open .mobile-nav-group-links { display: block; }
.sidenav-a .mobile-nav-group-links > li { margin: 0; border-bottom: 0; }
.sidenav-a .mobile-nav-group-links > li > a { display: block; padding: 6px 10px 6px 0; color: #2a3187; font-size: 13px; font-weight: 700; line-height: 1.35; text-decoration: none !important; text-transform: none; }
.sidenav-a .mobile-nav-group-links > li > a:hover { color: #2a3187; }


/* ============================================================
   Home-page dealer section

   Ported from Branch's home-nav-reference.css:422-430 (the shell) and :599-687
   (the section itself), replacing Corp's old .retail-network block. Only the
   .dealer-* rules come across -- the .style-finder / .interior-types /
   .warehouse-banner rules that neighbour them in that file are for markup Corp
   does not emit.

   Corp's input and placeholder bases are byte-identical to Branch's
   (screen.css:901/:917 vs Branch :965/:981), and the heading bases differ only
   in the font shorthand's size and weight, both of which .dealer-section__copy
   h3 restates -- so the ported rules need no retuning to render the same.
   ============================================================ */

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

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

/* Branch's shell ends with .companyLogos--bottom, so the dealer section's 38px
   sits between two sections. Corp's shell holds the dealer section alone, where
   that margin would just stack on the shell's own 38px bottom padding. */
.home-reference-shell > .home-reference-section:last-child {
    margin-bottom: 0;
}

/* Corp-specific. Branch's global reset gives divs `margin: 0` (screen.css:7);
   Corp's gives them `margin: 0 0 15px`, with a `:last-child { margin-bottom: 0
   !important }` escape that only covers the three of these that happen to sit
   last. Unreset, __copy's 15px extended the section 15px past its own content
   and __location's pushed its grid row to 61px, so Corp's form stood 15px
   taller than Branch's. Zeroed explicitly rather than leaning on :last-child,
   so it does not depend on where these sit among their siblings. */
.dealer-section__copy,
.dealer-section__map,
.dealer-form,
.dealer-form__grid,
.dealer-form__location {
    margin: 0;
}

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

   Replaces the styling of Corp's old .advantage block -- a left-aligned 30px
   heading over three photos with white-on-black captions laid across their
   bottoms -- with the branch sites' card treatment: a bordered image box and the
   caption below it in indigo uppercase.

   Branch has no single section that fits, so this composes the two it stacks on
   its own home page (home-nav-reference.css):

       header       <- .style-finder__header    :432-450
       grid         <- .interior-types__grid    :554-558
       card + title <- .interior-card*          :466-516

   Corp's markup uses .home-mods* rather than Branch's class names because the
   old .advantage rules stay in the shared screen.css (:1303-1311) and would
   partially override anything they still matched -- .advantageSection p alone
   sets position, background-color, color and font-size. Renaming leaves them
   dead instead, the same way .retail-network's rules went dead.
   ============================================================ */

/* home-nav-reference.css:432, where it is .style-finder__header. */
.home-mods__header {
    /* Corp-only line. Branch's global reset gives header `margin: 0`
       (screen.css:7); Corp's gives it `margin: 0 0 15px`, which would land on
       top of the grid's own 12px. */
    margin: 0;
    text-align: center;
    padding: 0 20px;
}

/* home-nav-reference.css:438. Branch's is an h2; Corp's stays an h1 because it
   is the home page's only content-level heading -- Branch's home page has none,
   its sole h1 being the logo. Outranks both screen.css's `h1 { font-size: 24px }`
   and the `h1 { font-size: 16px }` in its max-width:1200px block, on specificity
   as well as source order. */
.home-mods__header h1 {
    margin: 30px 0 0;
    font-size: 35px;
    line-height: 1.2;
    font-weight: 800;
    color: #1e1e1e;
}

/* home-nav-reference.css:556 (.interior-types__grid). The 12px top margin comes
   from .style-finder__grid:562, which is where Branch's centred header 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-nav-reference.css:466. */
.home-mods-card {
    display: block;
    text-decoration: none !important;
}

/* home-nav-reference.css:483. */
.home-mods-card__image {
    display: block;
    /* Branch's box is 3891/2594 (3:2). All three of Corp's home_mods images are
       1.38:1 -- 800x579, 380x275, 380x275 -- so the box takes their ratio and
       object-fit: cover has nothing to trim. At 1440 the cards land 381px wide,
       the native width of two of the three. */
    aspect-ratio: 380 / 275;
    border: 1px solid #d9d9d9;
    background: #f6f6f6;
    overflow: hidden;
}

/* home-nav-reference.css:491. */
.home-mods-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* home-nav-reference.css:516 (.interior-card__title). */
.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;
}

/* ============================================================
   Home-page warehouse banner

   Ported from Branch's home-nav-reference.css:561-597, replacing Corp's old
   .warehouse-ban "Our Locations" band. No retunes needed: Corp's img base
   (screen.css:959) is byte-identical to Branch's (:1023), and the heading bases
   differ only in the font shorthand's size and weight, both of which the overlay
   h3 restates -- including below 1200px, where both projects' screen.css drops
   h3 to 14px and this rule outranks it on specificity as well as source order.
   ============================================================ */

.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;
    /* Corp-only line. Branch's global reset gives divs `margin: 0`
       (screen.css:7); Corp's gives them `margin: 0 0 15px`. Inert on an
       absolutely positioned box with `bottom: auto`, but zeroed so it stays
       inert if the overlay is ever repositioned. */
    margin: 0;
    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;
}

/* ============================================================
   Mobile header + nav + drawer geometry  (<= 1199.98px)

   Corp's own header breakpoint is 1050px. Matching Branch's 1200px means every
   switch Corp's screen.css only throws at <= 1050px has to be restated here,
   or the 1051-1199px band gets mobile rules from one file and desktop rules
   from the other.
   ============================================================ */

@media screen and (max-width: 1199.98px) {
    /* --- switches Corp's screen.css only applies at <= 1050px --- */

    /* screen.css:993 paints the toggler white for the old dark header. On a
       white header that's an invisible hamburger. */
    .top-a .toggler {
        display: block;
        color: #000;
    }

    /* background-color, not background. The three bars are one box: the top and
       bottom are its 3px borders, and the middle one is the background painted
       into a content box that screen.css:994 shrinks to 3px with
       `background-clip: content-box` plus 4px of vertical padding. `background`
       is a shorthand, so setting it resets background-clip to border-box and the
       fill covers padding and borders alike -- a solid 20x17 black block instead
       of a hamburger. The longhand leaves the clip alone. */
    .top-a .toggler:after {
        border-color: #000;
        background-color: #000;
    }

    .top-a .nav-a {
        display: none;
    }

    .sidenav-a {
        display: block;
    }

    .sidenav-a .search {
        display: block;
        position: relative;
        right: auto;
        width: auto;
        padding: 0 15px 12px;
        background: #fff;
        z-index: 10000;
    }

    .sidenav-a .search-nav {
        display: none;
    }

    /* From Branch's home-nav-reference.css:795-803. buildMegaPanel() only walks
       li.mega-column, so the 430px panel image would otherwise ride along as a
       full-width picture at the top of the drawer. */
    .sidenav-a .mega-image {
        display: none;
    }

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

    /* Wider than screen.css:624's 285px, matching Branch. The margin and the
       open-state transform have to move together or the drawer parks itself
       partly on screen. */
    .sidenav-a {
        width: 350px;
        margin: 0 -350px 0 0;
        border-left: 1px solid #999;
    }

    .root-a.nav .sidenav-a {
        -webkit-transform: translateX(-350px);
        -ms-transform: translateX(-350px);
        transform: translateX(-350px);
    }

    .ie .root-a.nav .sidenav-a {
        right: 350px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    /* --- the ported header chrome --- */

    .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;
    }

    /* 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.
       (Branch keeps a longer note here about its fifteen per-branch logos;
       Dyke-Logo.svg happens to share Atlanta's exact viewBox, so the same
       numbers land in the same place.) */
    .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));
        /* Branch reserves 180px here: hamburger plus the DykeEDGE logo beside
           it. Corp has no .mobileEdge, so only the hamburger and the 20px
           gutters need reserving. */
        max-width: calc((100vw - 60px) * var(--logo-scale));
        /* Corp's screen.css:1001 auto-centers this image inside the logo box;
           Branch commented that out at its screen.css:1067, which left-aligns
           it. Without this the mark sat 5.5px right of Branch's. */
        margin: 0;
    }

    /* Hard-coded tops lined these up only while the logo was a 48px square.
       Centering each on the header midline keeps them aligned to each other
       whatever the logo's height works out to. */
    .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-nav-reference.css:774 and :790 */
    .home-reference-shell {
        padding: 10px 16px 20px;
    }

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

}

/* ============================================================
   Mobile hero  (<= 767.98px)
   ============================================================ */

/* ------------------------------------------------------------
   1051-1199px only

   Corp's screen.css puts the hamburger's right gutter inside its own
   @media (max-width: 1050px) (line 999). Branch's equivalent sits in a block
   that also covers this band, so between 1051 and 1199 -- the band this port
   newly turned into mobile -- Corp's toggler fell back to the base `right: 0`
   (screen.css:993) and sat flush against the viewport edge. Bounded on both
   sides so Corp's own 15px gutter at <=1050 (screen.css:1014) still wins there.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   1200-1259px only

   Corp's six nav labels are wider than Branch's, so at the first desktop width
   above the breakpoint the right-aligned nav ran 8.8px into the logo (logo ends
   at 314.2, nav started at 305.5). Halving the gap between top-level items buys
   back ~40px, which clears it without touching the spacing at the widths where
   Branch's 8px reads correctly.
   ------------------------------------------------------------ */

@media screen and (min-width: 1200px) and (max-width: 1259.98px) {
    .nav-a .t1 > li ~ li {
        padding: 0 4px;
    }
}

@media screen and (min-width: 1051px) and (max-width: 1199.98px) {
    .top-a .toggler {
        right: 20px;
    }
}

@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;
    }

    /* home-nav-reference.css:859, :877 and :881. Two columns of 46px inputs are
       too narrow to read placeholders in at phone width, so the grid collapses --
       except the city/state/zip row, which stays three-up because those three
       fields are short enough to share a line at any width. */
    .dealer-form__grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .dealer-form__location {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    /* home-nav-reference.css:885 and :889. A 300px overlay would blanket most of
       a phone-width photo, so it leaves the vertical centre and spans the width
       along the bottom instead. */
    .warehouse-banner img {
        height: 215px;
    }

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

    /* home-nav-reference.css:854. */
    .home-mods__header h1 {
        line-height: 1.08;
    }

    /* home-nav-reference.css:858 and :876. Three cards side by side are too
       narrow to read at phone width, so they stack. */
    .home-mods__grid {
        width: 100%;
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   Dealer locator modal

   Corp had no bootstrap modal before this one, so screen.css never needed to
   scope its .modal-content rule. Branch did scope its copy once #dealerModal
   landed (screen.css:2567, `#loadingModal .modal-content`); Corp's is still bare
   at screen.css:2351 and again at :2423, where it would force the dealer modal
   to 600px with 20px of padding and centred text. The id outranks both no matter
   the source order or media query.
   ============================================================ */

#dealerModal .modal-content {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
}

/* Branch screen.css:2651. Wider than bootstrap's .modal-xl 1140px cap on big
   screens, and the map needs the room. */
@media (min-width: 768px) {
    #dealerModal .modal-dialog {
        width: 90%;
        margin: 30px auto;
    }
}