/**
 * 5Blox header + primary nav + Our Locations flyouts
 */

@keyframes stickMove {
  from { top: -180px; }
  to { top: 0; }
}

:root {
  /* Scales up on wide viewports to use header space */
  --nav-font: clamp(0.9375rem, 0.72rem + 0.42vw, 1.125rem); /* 15–18px */
  --nav-sub-font: var(--nav-font); /* match main nav */
  --nav-gap: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem); /* 8–12px */
  --nav-pad-y: clamp(0.25rem, 0.15rem + 0.35vw, 0.5rem); /* 4–8px */
  --nav-pad-x: clamp(0.7rem, 0.55rem + 0.25vw, 0.9rem);
  --nav-panel: #2a2a2a;
  --nav-panel-l3: #242424;
  --nav-text: #e4e2d9;
  --nav-accent: #c19974;
  --nav-city-col: clamp(10.5rem, 9.5rem + 1vw, 11.875rem);
}

/* =========================================================================
   Header shell
========================================================================= */
header {
  padding: 15px 0;
  width: 100%;
  z-index: 100000000;
  background-color: #1b1b1b;
  top: 0;
  animation-duration: 0.9s;
}

body.admin-bar header {
  top: 46px;
}

#header_ph {
  background-color: #1b1b1b;
}

header.sticky,
body.admin-bar header.sticky {
  position: fixed;
  top: 0;
  animation-name: stickMove;
}

header > .sectioninner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 0 20px;
}

header img {
  width: 90px;
}

.whitelogo {
  display: none;
  max-height: 25px;
}

.darklogo {
  display: none;
}

header:not(.pinprep.pinned) .whitelogo {
  display: block;
  min-width: 90px;
}

header a {
  align-items: flex-end;
  color: #e4e2d9;
  text-decoration: none;
  display: flex;
  z-index: 10000;
}

.nav {
  display: flex;
  align-items: center;
  width: 100%;
}

.topmenu {
  display: none;
}

/* CTA cluster */
.ct-header-cta {
  display: flex;
  flex: 1 0 auto;
  max-width: 350px;
  margin-left: auto;
}
.ct-header-cta > a{
  line-height: 1;
}

.header-consultation {
  background: #c19974;
  color: #242424;
  font-family: "DM Serif Display", Georgia, Times, serif;
  padding: 10px 15px;
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 1rem);
  border-radius: 20px 0 0;
  transition: 0.4s all;
  white-space: nowrap;
}

.header-consultation:hover {
  background: #d1a984;
}

a.header-phone {
  background: #d2d2d2;
  color: #242424;
  font-family: "DM Serif Display", Georgia, Times, serif;
  padding: 7px 20px 7px 0;
  font-size: clamp(0.8125rem, 0.75rem + 0.2vw, 1rem);
  display: flex;
  align-items: center;
  border-radius: 0 0 20px;
  transition: 0.4s all;
  white-space: nowrap;
}

a.header-phone:hover {
  background: #e4e4e4;
}

.header-phone svg {
  width: clamp(1rem, 0.85rem + 0.35vw, 1.25rem);
}

.header-email {
  background: #d2d2d2;
  align-items: center;
  line-height: 0;
  padding: 0 10px;
}

.ct-header-cta .header-email:hover {
  background: #e4e4e4;
}

.header-email path {
  fill: #242424;
}

.pinned .header-consultation,
.pinned .header-phone {
  opacity: 1;
  pointer-events: all;
  transition-delay: 0.4s;
}

.pinned .darklogo {
  display: none;
}

.pinned .whitelogo {
  display: block;
}

.formerly {
  display: none;
}

.pinned .formerly {
  display: block;
  margin-left: 10px;
  color: #a2a2a2;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  margin-bottom: -2px;
}

.menuactive .formerly {
  display: none;
}



@media (max-width: 767px) {
  .ct-header-cta {
    display: none;
  }
}

/* hamburger below 1024; desktop nav from 1024 up */
@media (min-width: 1024px) {
  body.admin-bar header {
    top: 32px;
  }

  header > .sectioninner {
    gap: 24px;
    padding: 0 20px;
  }

  header > .sectioninner > .nav {
    width: 100%;
    gap: clamp(0.75rem, 0.5rem + 0.5vw, 1.25rem);
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: space-between;
  }

  .topmenu {
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    display: block;
  }

  .topmenu #primary {
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    gap: var(--nav-gap);
    flex-wrap: nowrap;
    align-items: center;
  }

  header div#mobile-nav,
  .mobile-menu {
    display: none;
  }

  .header-email {
    display: flex;
    width: auto;
    flex: 0 0 auto;
  }

  .header-consultation,
  a.header-phone {
    flex: 0 0 auto;
  }

  .nav .header-consultation,
  .nav .header-phone {
    pointer-events: auto;
    opacity: 1;
    margin: 0;
  }
}

/* Narrow desktop: CTA stacks to free nav space */
@media screen and (min-width: 1024px) and (max-width: 1199.98px) {
  .ct-header-cta {
    max-width: 170px;
    display: flex;
    flex: 0 0 auto;
    flex-flow: wrap;
  }

  a.header-phone {
    padding-left: 9px;
  }

  .header-consultation {
    padding: 10px;
  }

  .topmenu #primary {
    gap: clamp(0.75rem, 1vw, 0.75rem); /* max 12px */
  }
}

/* Wide desktop: CTA one line, tighter nav gap */
@media (min-width: 1200px) {
  .ct-header-cta {
    max-width: none;
    display: flex;
    flex: 0 0 auto;
    flex-flow: row nowrap;
    margin-left: 0;
    justify-content: flex-end;
    align-items: stretch;
    gap: 0;
  }

  .topmenu #primary {
    justify-content: flex-start;
    gap: var(--nav-gap); /* max 12px */
  }

  header > .sectioninner > .nav {
    gap: 1.25rem;
  }
}

@media (min-width: 1366px) {
  header > .sectioninner {
    padding: 0 7vw;
  }
}

@media (min-width: 1600px) {
  :root {
    --nav-font: clamp(1rem, 0.75rem + 0.4vw, 1.125rem); /* 16–18px */
    --nav-sub-font: var(--nav-font); /* match main nav */
    --nav-gap: clamp(0.5rem, 0.4rem + 0.3vw, 0.75rem); /* 8–12px */
  }

  header > .sectioninner {
    padding: 0;
  }
}

@media (max-width: 900px) {
  .header-consultation,
  .header-phone {
    opacity: 1;
    pointer-events: all;
  }
}

/* =========================================================================
   Primary menu structure
   ========================================================================= */
#primary {
  display: flex;
  list-style: none;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

#primary li {
  width: 100%;
}

#primary li > .sub-menu {
  display: none;
  padding: 10px;
  pointer-events: all;
  min-width: 160px;
  list-style: none;
}

#primary li > .sub-menu > li {
  margin-bottom: 10px;
  color: #fff;
}

#primary li > .sub-menu > li:last-child {
  margin-bottom: 0;
}

#primary li > .sub-menu > li > a {
  color: #fff;
  line-height: 1.2;
}

.ct-sub-menu-parent {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#primary .ct-sub-menu-parent > a {
  line-height: 1.2;
  color: #fff;
}

#primary .ct-sub-menu-parent > button {
  padding: 0;
  margin: 0;
  outline: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--nav-accent);
  border-radius: 50%;
}

#primary .ct-sub-menu-parent > button > svg {
  width: 20px;
  height: 20px;
  fill: #000;
  transition: all 0.3s ease-in;
}

#primary .ct-sub-menu-parent > button:hover,
#primary li.active > .ct-sub-menu-parent > button {
  background-color: #000;
}

#primary .ct-sub-menu-parent > button:hover > svg,
#primary li.active > .ct-sub-menu-parent > button > svg,
#primary li.active > .ct-sub-menu-parent > button > svg {
  fill: #fff;
}

#primary li.active > .ct-sub-menu-parent > button > svg {
  transform: rotateX(180deg);
}

#primary li.current-menu-parent .ct-sub-menu-parent > a,
#primary li.current-menu-parent .sub-menu li.current_page_item > a {
  color: var(--nav-accent);
}

a.ct-menu-link:hover {
  color: var(--nav-accent);
}

ul.sub-menu {
  pointer-events: none;
}

@media screen and (min-width: 601px) {
  ul.sub-menu {
    z-index: 99999;
  }
}

/* =========================================================================
   Desktop topmenu
   ========================================================================= */
@media screen and (min-width: 1024px) {
  header,
  header > .sectioninner,
  header .nav,
  header .topmenu,
  header .menu-main-container {
    overflow: visible;
  }

  #primary li {
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .topmenu #primary > li > .ct-sub-menu-parent > a,
  .topmenu #primary > li > a {
    font-size: var(--nav-font);
    letter-spacing: clamp(0.04em, 0.02em + 0.08vw, 0.1em);
    line-height: 1.2;
    color: #fff;
    font-weight: 300;
    padding: 0;
    margin: 0;
    text-transform: capitalize;
    text-decoration: none;
  }

  .topmenu #primary .sub-menu a,
  .topmenu #primary .sub-menu .ct-sub-menu-parent > a {
    font-size: var(--nav-sub-font);
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--nav-text);
    background: transparent;
    text-transform: capitalize;
    transition: color 0.15s ease;
  }

  .topmenu #primary .menu-item.current-menu-parent > a,
  .topmenu #primary .menu-item.current-menu-item > a,
  .topmenu #primary .menu-item.current-menu-parent > .ct-sub-menu-parent > a {
    font-weight: 700;
  }

  .topmenu #primary .menu-item.menu-item-has-children {
    position: relative;
  }

  #primary .ct-sub-menu-parent > button {
    width: clamp(1rem, 0.85rem + 0.35vw, 1.25rem);
    height: clamp(1rem, 0.85rem + 0.35vw, 1.25rem);
    flex: 0 0 auto;
  }

  #primary .ct-sub-menu-parent > button > svg {
    width: clamp(0.75rem, 0.65rem + 0.25vw, 1rem);
    height: clamp(0.75rem, 0.65rem + 0.25vw, 1rem);
  }

  .topmenu #primary > li > .ct-sub-menu-parent:hover > a {
    color: var(--nav-accent);
  }

  .topmenu #primary > li > .ct-sub-menu-parent:hover > button {
    background-color: #000;
  }

  .topmenu #primary > li > .ct-sub-menu-parent:hover > button > svg {
    fill: #fff;
    transform: rotateX(180deg);
  }

  /* Top-level dropdown only (Services, Pros, About…) */
  .topmenu #primary > .menu-item:hover > ul.sub-menu {
    display: block;
    position: absolute;
    opacity: 1;
    pointer-events: auto;
    width: max-content;
    list-style: none;
    border: 0;
    border-radius: 0;
    padding: clamp(0.2rem, 0.15rem + 0.1vw, 0.35rem) 0;
    background-color: var(--nav-panel);
    color: #fff;
  }

  .topmenu #primary .menu-item ul.sub-menu a {
    padding: var(--nav-pad-y) calc(var(--nav-pad-x) * 1.25);
    margin: 0;
  }

  .topmenu #primary li > .sub-menu > li {
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .topmenu #primary .sub-menu > li:hover > a,
  .topmenu #primary .sub-menu > li:hover > .ct-sub-menu-parent > a {
    color: var(--nav-accent);
    background: transparent;
  }

  .topmenu #primary .sub-menu > li:hover > .ct-sub-menu-parent {
    background: transparent;
  }

  .menu-main-container {
    max-width: none;
    width: 100%;
    margin-right: 0;
  }
}

/* =========================================================================
   Our Locations flyouts (desktop 2-col required)
   ========================================================================= */
.topmenu #primary > .menu-item-our-locations {
  position: relative;
}

.topmenu #primary .menu-item-our-locations .sub-menu .menu-item-has-children > .ct-sub-menu-parent > .ct-toggle-dropdown {
  display: none;
}

/* keep city name + chevron on one row */
.topmenu #primary .menu-item-our-locations .sub-menu .menu-item-has-children > .ct-sub-menu-parent {
  display: flex;
  flex-flow: nowrap;
  align-items: center;
  width: 100%;
  gap: 0;
  background: transparent;
  padding: 0;
}

.topmenu #primary .menu-item-our-locations .sub-menu .menu-item-has-children > .ct-sub-menu-parent > a,
.topmenu #primary .menu-item-our-locations .sub-menu .menu-item-has-children > a {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.75rem, 0.5rem + 0.5vw, 1rem);
  width: 100%;
  flex: 1 1 auto;
  white-space: nowrap;
  box-sizing: border-box;
}

.topmenu #primary .menu-item-our-locations .sub-menu .menu-item-has-children > .ct-sub-menu-parent > a::after,
.topmenu #primary .menu-item-our-locations .sub-menu .menu-item-has-children > a::after {
  content: "";
  display: block;
  flex: 0 0 8px;
  width: 8px;
  height: 12px;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'%3E%3Cpath d='M1.5 1L6.5 6L1.5 11' stroke='%23c19974' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media screen and (min-width: 1024px) {
  .topmenu #primary > .menu-item-our-locations {
    overflow: visible;
  }

  /* Nested flyouts hidden by default (L2+L3). Opened only via direct-parent hover/class. */
  .topmenu #primary .menu-item-our-locations .sub-menu .sub-menu {
    display: none;
    position: absolute;
    /* never participate in parent grid flow */
    grid-column: unset;
    grid-row: unset;
  }

  /* L3 must stay out of the city grid — always absolute, never in-flow */
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li > .sub-menu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin: 0;
    padding: clamp(0.2rem, 0.1rem + 0.15vw, 0.35rem) 0;
    list-style: none;
    background: var(--nav-panel-l3);
    z-index: 999;
    width: max-content;
    min-width: var(--nav-city-col);
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
  }

  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li.is-loc-flyout-open > .sub-menu {
    display: block;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
  }

  .topmenu #primary > .menu-item-our-locations:hover > .ct-sub-menu-parent > a {
    color: var(--nav-accent);
  }

  .topmenu #primary > .menu-item-our-locations:hover > .ct-sub-menu-parent > button {
    background-color: #000;
  }

  .topmenu #primary > .menu-item-our-locations:hover > .ct-sub-menu-parent > button > svg {
    fill: #fff;
    transform: rotateX(180deg);
  }

  .topmenu #primary .menu-item-our-locations > ul.sub-menu,
  .topmenu #primary .menu-item-our-locations:hover > ul.sub-menu {
    min-width: 0;
    width: max-content;
    overflow: visible;
    padding: clamp(0.25rem, 0.15rem + 0.2vw, 0.4rem) 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: var(--nav-panel);
    box-shadow: none;
  }

  .topmenu #primary .menu-item-our-locations:hover > ul.sub-menu {
    display: block;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 200;
    opacity: 1;
    pointer-events: auto;
  }

  .topmenu #primary .menu-item-our-locations .sub-menu > li {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: visible;
    background: transparent;
  }

  /* same left pad with or without a child flyout */
  .topmenu #primary .menu-item-our-locations .sub-menu > li > .ct-sub-menu-parent,
  .topmenu #primary .menu-item-our-locations .sub-menu > li > a,
  .topmenu #primary .menu-item-our-locations .sub-menu > li > .ct-sub-menu-parent > a {
    padding: var(--nav-pad-y) var(--nav-pad-x);
    margin: 0;
    color: var(--nav-text);
    font-weight: 300;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
    box-sizing: border-box;
    background: transparent;
  }

  .topmenu #primary .menu-item-our-locations .sub-menu > li > a {
    width: 100%;
  }

  .topmenu #primary .menu-item-our-locations .sub-menu > li:hover > a,
  .topmenu #primary .menu-item-our-locations .sub-menu > li:hover > .ct-sub-menu-parent > a,
  .topmenu #primary .menu-item-our-locations .sub-menu > li:hover > .ct-sub-menu-parent {
    background: transparent;
    color: var(--nav-accent);
  }

  /* L2 cities — always 2-col when .is-two-col (desktop must) */
  .topmenu #primary .menu-item-our-locations > .sub-menu > li:hover > ul.sub-menu,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li.is-loc-flyout-open > ul.sub-menu {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
    width: max-content;
    overflow: visible;
    padding: clamp(0.25rem, 0.15rem + 0.2vw, 0.4rem) 0;
    margin: 0;
    border: 0;
    background: var(--nav-panel);
    opacity: 1;
    pointer-events: auto;
    list-style: none;
    z-index: 210;
  }

  /* 2-col cities only from 1024 */
  @media screen and (min-width: 1024px) {
    .topmenu #primary .menu-item-our-locations > .sub-menu > li:hover > ul.sub-menu.is-two-col,
    .topmenu #primary .menu-item-our-locations > .sub-menu > li.is-loc-flyout-open > ul.sub-menu.is-two-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(var(--nav-city-col), max-content));
      grid-template-rows: repeat(var(--loc-city-rows, 15), auto);
      grid-auto-flow: column;
      align-content: start;
      justify-content: start;
      column-gap: 0;
      row-gap: 0;
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1199px) {
    :root {
      --nav-city-col: clamp(9.25rem, 8.25rem + 1.2vw, 10.5rem);
    }
  }

  /* Only city <li> are grid items — never nest L3 into the grid */
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > ul.sub-menu > li {
    position: relative;
    width: 100%;
    min-width: min-content;
    margin: 0;
    padding: 0;
    background: transparent;
    z-index: 1;
  }

  .topmenu #primary .menu-item-our-locations > .sub-menu > li > ul.sub-menu > li.is-loc-flyout-open,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > ul.sub-menu > li:hover {
    z-index: 100;
  }

  .topmenu #primary .menu-item-our-locations > .sub-menu > li > ul.sub-menu > li:hover > a,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > ul.sub-menu > li:hover > .ct-sub-menu-parent > a,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > ul.sub-menu > li:hover > .ct-sub-menu-parent,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > ul.sub-menu > li.is-loc-flyout-open > a,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > ul.sub-menu > li.is-loc-flyout-open > .ct-sub-menu-parent > a {
    background: transparent;
    color: var(--nav-accent);
  }

  /* L3 links */
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li > .sub-menu > li {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--nav-panel-l3);
  }

  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li > .sub-menu > li > a,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li > .sub-menu > li > .ct-sub-menu-parent,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li > .sub-menu > li > .ct-sub-menu-parent > a {
    display: block;
    width: 100%;
    padding: var(--nav-pad-y) var(--nav-pad-x);
    margin: 0;
    color: var(--nav-text);
    font-weight: 300;
    line-height: 1.2;
    background: var(--nav-panel-l3);
    white-space: nowrap;
    box-sizing: border-box;
  }

  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li > .sub-menu a::after,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li > .sub-menu .ct-sub-menu-parent > a::after,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li > .sub-menu .ct-toggle-dropdown {
    display: none;
    content: none;
  }

  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li > .sub-menu > li:hover > a,
  .topmenu #primary .menu-item-our-locations > .sub-menu > li > .sub-menu > li > .sub-menu > li:hover > .ct-sub-menu-parent > a {
    background: var(--nav-panel-l3);
    color: var(--nav-accent);
  }

  /* Placement helpers (JS). Prefer left flip, then bottom */
  .topmenu #primary .menu-item-our-locations .sub-menu.is-flyout-left,
  .topmenu #primary .menu-item-our-locations .sub-menu .sub-menu.is-flyout-left {
    left: auto;
    right: 100%;
    top: 0;
  }

  .topmenu #primary .menu-item-our-locations .sub-menu.is-flyout-bottom,
  .topmenu #primary .menu-item-our-locations .sub-menu .sub-menu.is-flyout-bottom {
    left: 0;
    top: 100%;
    right: auto;
  }
}

/* =========================================================================
   Mobile menu
   ========================================================================= */
.menubutton {
  transition: 500ms all;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.menuline {
  height: 2px;
  width: 20px;
  background: #e4e2d9;
  transition: all 500ms;
}

#secondline,
#thirdline {
  margin-top: 5px;
}

#mobile-nav {
  cursor: pointer;
  color: #e4e2d9;
  position: relative;
  font-size: 18px;
  z-index: 99999;
  transition: all 0.3s ease-in;
  background: #262626;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  min-width: 50px;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100%;
  z-index: 10000;
  height: 100%;
  padding: 60px 6vw;
  background: #242424;
  transition: 1s left;
  display: flex;
  align-items: center;
  background-image: url("/wp-content/uploads/5bloxmenu.svg");
  background-size: 65vw;
  background-repeat: no-repeat;
  background-position: 20% -20%;
}

.mobile-menu.active {
  left: 0;
  right: 0;
}

.mobile-menu #primary {
  display: flex;
  flex-direction: column;
  padding: 40px 0;
  width: 50%;
}

.mobile-menu #primary li {
  list-style: none;
}

.mobile-menu #primary a {
  padding: 0;
  display: block;
  line-height: 2;
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  color: #fff;
  font-family: "dm-serif-display", "DM Serif Display", Georgia, serif;
  text-transform: capitalize;
  letter-spacing: 0;
}

.mobile-menu #primary a:hover {
  color: #e4e2d9;
}

.mobile-menu .menu-main-container #primary {
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 500px;
}

.mobile-menu > .sectioninner {
  padding: 0;
}

.mobile-menu > .sectioninner > .menu-main-container::-webkit-scrollbar {
  border-radius: 4px;
  background-color: var(--nav-accent);
}

.mobile-menu > .sectioninner > .menu-main-container::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 4px;
}

.mobile-menu #primary .ct-sub-menu-parent > a {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: 1.2;
  color: #fff;
}

.mobile-menu #primary li > .sub-menu > li > a {
  color: #fff;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: 1.2;
}

body.menuactive {
  overflow: hidden;
}

body.menuactive div#mobile-nav {
  top: -50px;
  right: -20px;
}

.menuactive .whitelogo {
  display: block;
}

.menuactive .darklogo {
  display: none;
}

.menuactive .menuclose {
  display: block;
  font-size: 30px;
  font-family: monospace;
}

.menuclose,
.menuactive .stripes {
  display: none;
}


.menuactive #mobile-nav {
  background: #1e1e1e;
  color: #e4e2d9;
}

.bannernone #mobile-nav,
.single #mobile-nav {
  background: #e4e2d9;
  color: #242424;
}

.single .menuline,
.bannernone .menuline {
  background: #242424;
}

.pinned .menuline {
  background: #e4e2d9;
}

.pinned #mobile-nav {
  background: #1b1b1b;
  color: #e4e2d9;
}

.bannersingle div#mobile-nav {
  background: #e4e2d9;
}

.bannersingle div#mobile-nav .menuline {
  background: #262626;
}

@media screen and (max-width: 1200px) {
  .mobile-menu {
    background-size: 85vw;
    background-position: bottom right;
  }

  .mobile-menu > .sectioninner {
    height: 100%;
  }

  .mobile-menu > .sectioninner > .menu-main-container {
    height: 100%;
    overflow-y: auto;
  }

  .mobile-menu #primary {
    width: 100%;
  }

  .mobile-menu #primary a {
    line-height: 1.8;
  }
}

@media screen and (max-width: 1023px) {
  .mobile-menu #primary > li > a,
  .mobile-menu #primary > li > .ct-sub-menu-parent > a {
    color: #fff;
  }

  .mobile-menu #primary .menu-item-our-locations .sub-menu .menu-item-has-children > .ct-sub-menu-parent > .ct-toggle-dropdown {
    display: flex;
    width: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
    height: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
    min-width: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
    background-color: var(--nav-accent);
    border-radius: 50%;
  }

  .mobile-menu #primary .menu-item-our-locations .sub-menu .menu-item-has-children > .ct-sub-menu-parent > .ct-toggle-dropdown > svg {
    width: 14px;
    height: 14px;
    fill: #000;
    transform: none;
  }

  .mobile-menu #primary .menu-item-our-locations.active > .ct-sub-menu-parent > .ct-toggle-dropdown,
  .mobile-menu #primary .menu-item-our-locations .sub-menu .menu-item-has-children.active > .ct-sub-menu-parent > .ct-toggle-dropdown,
  .mobile-menu #primary .menu-item-our-locations .sub-menu li.active > .ct-sub-menu-parent > .ct-toggle-dropdown {
    background-color: #000;
  }

  .mobile-menu #primary .menu-item-our-locations.active > .ct-sub-menu-parent > .ct-toggle-dropdown > svg,
  .mobile-menu #primary .menu-item-our-locations .sub-menu .menu-item-has-children.active > .ct-sub-menu-parent > .ct-toggle-dropdown > svg,
  .mobile-menu #primary .menu-item-our-locations .sub-menu li.active > .ct-sub-menu-parent > .ct-toggle-dropdown > svg {
    fill: #fff;
    transform: rotateX(180deg);
  }

  .mobile-menu #primary .menu-item-our-locations .sub-menu .menu-item-has-children > .ct-sub-menu-parent > a::after,
  .mobile-menu #primary .menu-item-our-locations .sub-menu .menu-item-has-children > a::after {
    display: none;
  }

  .mobile-menu #primary .menu-item-our-locations .sub-menu {
    padding-left: 12px;
  }

  .mobile-menu #primary .menu-item-our-locations .sub-menu > li > .ct-sub-menu-parent > a,
  .mobile-menu #primary .menu-item-our-locations .sub-menu > li > a {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    color: #fff;
  }

  .mobile-menu #primary .menu-item-our-locations .sub-menu .sub-menu a {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    color: #fff;
  }
}

@media screen and (max-width: 767px) {
  .mobile-menu .menu-main-container #primary {
    align-items: flex-start;
  }

  .mobile-menu #primary a,
  .mobile-menu #primary .sub-menu a,
  .mobile-menu #primary .ct-sub-menu-parent > a {
    font-family: Lato, sans-serif;
    font-weight: 300;
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  }
}

@media screen and (max-width: 600px) {
  .header-email {
    align-self: center;
  }
}