/* =====================================================================
 * MTSB Navigation — modern, animated, clean
 * ---------------------------------------------------------------------
 * A bespoke treatment that sets the bar apart from a stock Kadence
 * header without shouting: a sticky bar that condenses into frosted
 * charcoal glass on scroll, links with a sliding orange underline
 * indicator, a refined Call pill, and a hamburger that morphs to an X.
 *
 * State classes (added by nav.js on <body>):
 *   .mtsb-nav-ready    — one-shot entrance has been armed
 *   .mtsb-nav-scrolled — page is scrolled past the threshold (condense)
 * Everything degrades gracefully without JS and honours
 * prefers-reduced-motion.
 * ===================================================================== */

:root {
  --mtrd-nav-ease: cubic-bezier(0.65, 0.05, 0.36, 1);
  --mtrd-nav-pad: 1.05rem;     /* roomy vertical padding at the top   */
  --mtrd-nav-pad-tight: 0.4rem; /* compact padding once condensed      */

  /* Phone receiver glyph, shared by every call affordance (desktop pill,
   * drawer CTA, mobile quick-dial) so the artwork is defined once. */
  --mtrd-icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.5 15.5 0 0 0 6.59 6.59l2.2-2.2a1 1 0 0 1 1.02-.24 11.4 11.4 0 0 0 3.57.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.57 1 1 0 0 1-.24 1.02z'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
 * 1. Sticky shell + condense
 * The whole masthead sticks; the inner row surface is what we restyle
 * so the condense (blur, shadow, shrink) reads as one clean motion.
 * ------------------------------------------------------------------- */
#masthead.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  background: transparent !important;
}

/* Kadence's transparent-header mode (on Contact and Road Drying) pins the
 * masthead with `position: absolute` at a higher specificity, which beat
 * the rule above and let the bar — nav, Call, quick-dial and all — scroll
 * off those pages for good. The overlay placement is intentional and is
 * left alone at rest; past the condense threshold the bar re-attaches as
 * a fixed strip and drops in. Both states are out of flow, so nothing on
 * the page reflows as it switches. */
body.mtsb-nav-scrolled.transparent-header #masthead.site-header,
body.mtsb-nav-scrolled.mobile-transparent-header #masthead.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  animation: mtsb-nav-drop 0.35s var(--mtrd-nav-ease) both;
}

@keyframes mtsb-nav-drop {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}

#masthead .site-main-header-wrap .site-header-row-container-inner {
  background: var(--mtrd-charcoal) !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  transition:
    background-color 0.4s var(--mtrd-nav-ease),
    box-shadow 0.4s var(--mtrd-nav-ease),
    border-color 0.4s var(--mtrd-nav-ease),
    backdrop-filter 0.4s var(--mtrd-nav-ease);
}

#masthead .site-main-header-wrap .site-main-header-inner-wrap {
  padding-top: var(--mtrd-nav-pad);
  padding-bottom: var(--mtrd-nav-pad);
  transition: padding 0.4s var(--mtrd-nav-ease);
}

/* Condensed state — frosted glass, hairline edge, soft lift, tighter. */
body.mtsb-nav-scrolled #masthead .site-main-header-wrap .site-header-row-container-inner {
  background: rgba(18, 18, 18, 0.82) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.4) !important;
}
body.mtsb-nav-scrolled #masthead .site-main-header-wrap .site-main-header-inner-wrap {
  padding-top: var(--mtrd-nav-pad-tight);
  padding-bottom: var(--mtrd-nav-pad-tight);
}

/* Logo eases down a touch when the bar condenses. */
#masthead .site-branding img.custom-logo {
  transform-origin: left center;
  transition: transform 0.4s var(--mtrd-nav-ease);
  will-change: transform;
}
body.mtsb-nav-scrolled #masthead .site-branding img.custom-logo {
  transform: scale(0.86);
}

/* ---------------------------------------------------------------------
 * 2. Primary links — sliding orange underline indicator
 * Text stays calm white; the brand orange lives in a 2px bar that wipes
 * in from the left on hover and stays pinned under the current page.
 * ------------------------------------------------------------------- */
#masthead .header-menu-container > ul > li {
  margin: 0;
}
#masthead .header-menu-container > ul > li:not(.mtsb-nav-call) > a {
  position: relative;
  color: var(--mtrd-paper) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 0.5em 0.95em !important;
  background: transparent !important;
  transition: color 0.25s ease;
}

#masthead .header-menu-container > ul > li:not(.mtsb-nav-call) > a::after {
  content: "";
  position: absolute;
  left: 0.95em;
  right: 0.95em;
  bottom: 0.32em;
  height: 2px;
  background: var(--mtrd-orange);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.32s var(--mtrd-nav-ease);
}

#masthead .header-menu-container > ul > li:not(.mtsb-nav-call) > a:hover,
#masthead .header-menu-container > ul > li:not(.mtsb-nav-call) > a:focus-visible {
  color: #ffffff !important;
}
#masthead .header-menu-container > ul > li:not(.mtsb-nav-call) > a:hover::after,
#masthead .header-menu-container > ul > li:not(.mtsb-nav-call) > a:focus-visible::after,
#masthead .header-menu-container > ul > li.current-menu-item > a::after,
#masthead .header-menu-container > ul > li.current_page_item > a::after,
#masthead .header-menu-container > ul > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}

/* The current page keeps a subtly brighter label so the indicator reads
 * as "you are here" rather than just a hover echo. */
#masthead .header-menu-container > ul > li.current-menu-item > a,
#masthead .header-menu-container > ul > li.current_page_item > a {
  color: #ffffff !important;
}

/* ---------------------------------------------------------------------
 * 3. Call pill — the single accent. Phone glyph + hover lift + glow.
 * ------------------------------------------------------------------- */
#masthead .header-menu-container > ul > li.mtsb-nav-call {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}
#masthead .header-menu-container > ul > li.mtsb-nav-call > a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--mtrd-orange) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  padding: 0.6em 1.25em !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(217, 15, 10, 0);
  transition: transform 0.25s var(--mtrd-nav-ease),
    background-color 0.25s ease,
    box-shadow 0.3s ease;
}
#masthead .header-menu-container > ul > li.mtsb-nav-call > a::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  background-color: currentColor;
  -webkit-mask: var(--mtrd-icon-phone) center / contain no-repeat;
  mask: var(--mtrd-icon-phone) center / contain no-repeat;
  flex: 0 0 auto;
}
#masthead .header-menu-container > ul > li.mtsb-nav-call > a:hover,
#masthead .header-menu-container > ul > li.mtsb-nav-call > a:focus-visible {
  background: #ec6a20 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(217, 15, 10, 0.45);
}

/* ---------------------------------------------------------------------
 * 4. Dropdowns — on-brand, gently animated
 * ------------------------------------------------------------------- */
#masthead .header-menu-container ul ul {
  background: var(--mtrd-slate) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 8px !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden;
}
#masthead .header-menu-container ul ul li a {
  color: var(--mtrd-paper) !important;
  letter-spacing: 0.04em !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}
#masthead .header-menu-container ul ul li a:hover {
  color: var(--mtrd-orange) !important;
  background: rgba(255, 255, 255, 0.04) !important;
}

/* ---------------------------------------------------------------------
 * 5. One-shot entrance — links rise + fade in a quick stagger on load
 * ------------------------------------------------------------------- */
body.mtsb-nav-ready #masthead .header-menu-container > ul > li {
  opacity: 0;
  transform: translateY(-8px);
  animation: mtsb-nav-in 0.5s var(--mtrd-nav-ease) forwards;
}
body.mtsb-nav-ready #masthead .header-menu-container > ul > li:nth-child(1) { animation-delay: 0.05s; }
body.mtsb-nav-ready #masthead .header-menu-container > ul > li:nth-child(2) { animation-delay: 0.11s; }
body.mtsb-nav-ready #masthead .header-menu-container > ul > li:nth-child(3) { animation-delay: 0.17s; }
body.mtsb-nav-ready #masthead .header-menu-container > ul > li:nth-child(4) { animation-delay: 0.23s; }
body.mtsb-nav-ready #masthead .header-menu-container > ul > li:nth-child(5) { animation-delay: 0.29s; }
body.mtsb-nav-ready #masthead .header-menu-container > ul > li:nth-child(6) { animation-delay: 0.35s; }

@keyframes mtsb-nav-in {
  to { opacity: 1; transform: translateY(0); }
}

/* =====================================================================
 * 6. MOBILE — a compact bar and a drawer that feels native
 * ---------------------------------------------------------------------
 * Kadence swaps in a separate `.site-mobile-header-wrap` below its
 * header breakpoint, so everything here is scoped to that wrapper (or to
 * `#mobile-drawer`) instead of to a hand-picked media query: the bar
 * restyles exactly when Kadence changes layout, never a pixel earlier.
 *
 * Sizing is driven by the controls rather than by Kadence's 80px row
 * height — a 60px bar (52px condensed) around 44px touch targets is the
 * smallest that still clears the accessible minimum, and it hands ~20px
 * of viewport back to the hero on every phone.
 * ===================================================================== */

:root {
  --mtrd-bar-h: 60px;        /* mobile bar at rest                    */
  --mtrd-bar-h-tight: 52px;  /* ...once the page is scrolled          */
  --mtrd-tap: 44px;          /* touch target, at rest                 */
  --mtrd-tap-tight: 40px;    /* touch target, condensed               */
  --mtrd-hairline: rgba(255, 255, 255, 0.07);
  --mtrd-control-bg: rgba(255, 255, 255, 0.06);
  --mtrd-control-edge: rgba(255, 255, 255, 0.12);
}

/* ---------------------------------------------------------------------
 * 6.1 The bar
 * ------------------------------------------------------------------- */

/* Kadence pins the mobile row to an 80px min-height and the desktop
 * padding above piles on top of it; both are replaced by one honest
 * height so the bar measures what it looks like. */
#masthead .site-mobile-header-wrap .site-main-header-inner-wrap {
  align-items: center;
  min-height: var(--mtrd-bar-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: min-height 0.35s var(--mtrd-nav-ease);
}
body.mtsb-nav-scrolled #masthead .site-mobile-header-wrap .site-main-header-inner-wrap {
  min-height: var(--mtrd-bar-h-tight) !important;
}

/* Tighter gutters than the content grid — the bar should read as a
 * chrome edge, not as another boxed section. */
#masthead .site-mobile-header-wrap .site-container {
  padding-left: 18px;
  padding-right: 18px;
}

/* The logo is sized in px so the bar height stays predictable. The
 * desktop `scale()` condense shrinks it off its own baseline here, so
 * height drives it instead and the transform is explicitly cleared. */
#masthead .mobile-site-branding img.custom-logo {
  height: 36px;
  width: auto;
  max-width: 58vw;
  object-fit: contain;
  transform: none !important;
  transition: height 0.35s var(--mtrd-nav-ease);
}
body.mtsb-nav-scrolled #masthead .mobile-site-branding img.custom-logo {
  height: 30px;
}

/* Right-hand controls sit on one axis: quick-dial, then the menu key. */
#masthead .site-mobile-header-wrap .site-header-main-section-right,
#masthead .site-mobile-header-wrap .site-header-item-navgation-popup-toggle,
#masthead .site-mobile-header-wrap .mobile-toggle-open-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------------------------------------------------------------------
 * 6.2 Quick-dial — the one-tap version of the desktop Call pill
 * Hire is a phone business; on a phone the number should not be two taps
 * and a drawer away. Icon-only, so the bar stays quiet.
 * ------------------------------------------------------------------- */
.mtsb-mobile-call { display: none; } /* desktop keeps the labelled pill */

.site-mobile-header-wrap .mtsb-mobile-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--mtrd-tap);
  height: var(--mtrd-tap);
  border-radius: 50%;
  background: var(--mtrd-orange);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(217, 93, 39, 0.35);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: width 0.35s var(--mtrd-nav-ease),
    height 0.35s var(--mtrd-nav-ease),
    transform 0.18s var(--mtrd-nav-ease),
    background-color 0.2s ease;
}
body.mtsb-nav-scrolled .site-mobile-header-wrap .mtsb-mobile-call {
  width: var(--mtrd-tap-tight);
  height: var(--mtrd-tap-tight);
}
.site-mobile-header-wrap .mtsb-mobile-call:active {
  transform: scale(0.92);
  background: #c25120;
}
.mtsb-mobile-call-icon {
  width: 19px;
  height: 19px;
  background-color: currentColor;
  -webkit-mask: var(--mtrd-icon-phone) center / contain no-repeat;
  mask: var(--mtrd-icon-phone) center / contain no-repeat;
}

/* ---------------------------------------------------------------------
 * 6.3 Menu key — hamburger that morphs to an X
 * Kadence's button collapsed to a 43x13 hit area once its bundled SVG
 * was swapped for CSS bars; it gets a real 44px box back.
 * ------------------------------------------------------------------- */
#masthead .site-mobile-header-wrap #mobile-toggle.menu-toggle-open {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--mtrd-tap);
  height: var(--mtrd-tap);
  padding: 0 !important;
  border-radius: 14px;
  background: var(--mtrd-control-bg) !important;
  border: 1px solid var(--mtrd-control-edge) !important;
  color: var(--mtrd-paper) !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: width 0.35s var(--mtrd-nav-ease),
    height 0.35s var(--mtrd-nav-ease),
    background-color 0.2s ease,
    border-color 0.2s ease;
}
body.mtsb-nav-scrolled #masthead .site-mobile-header-wrap #mobile-toggle.menu-toggle-open {
  width: var(--mtrd-tap-tight);
  height: var(--mtrd-tap-tight);
  border-radius: 12px;
}
#masthead .site-mobile-header-wrap #mobile-toggle.menu-toggle-open:active {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

#mobile-toggle .menu-toggle-icon {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}
/* Hide Kadence's bundled SVG; we draw the bars ourselves. */
#mobile-toggle .menu-toggle-icon .kadence-svg-iconset { display: none !important; }

#mobile-toggle .menu-toggle-icon::before,
#mobile-toggle .menu-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.3s var(--mtrd-nav-ease), opacity 0.2s ease;
}
#mobile-toggle .menu-toggle-icon::before { transform: translateY(-6px); }
#mobile-toggle .menu-toggle-icon::after  { transform: translateY(6px); }

/* Open state (Kadence sets this body class while the drawer is showing). */
body.showing-popup-drawer-from-right #mobile-toggle .menu-toggle-icon {
  background: transparent;
}
body.showing-popup-drawer-from-right #mobile-toggle .menu-toggle-icon::before {
  transform: translateY(0) rotate(45deg);
}
body.showing-popup-drawer-from-right #mobile-toggle .menu-toggle-icon::after {
  transform: translateY(0) rotate(-45deg);
}

/* ---------------------------------------------------------------------
 * 6.4 Drawer shell
 * The panel and the link list used to carry two different darks, so the
 * menu read as a floating card with hard edges inside the drawer. One
 * surface now, with structure carried by hairlines instead.
 * ------------------------------------------------------------------- */
#mobile-drawer .drawer-overlay {
  background: rgba(6, 8, 10, 0.72) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

#mobile-drawer .drawer-inner {
  width: min(86vw, 380px) !important;
  max-width: none !important;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #16171a 0%, #0b0d10 100%) !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
}

/* The drawer header mirrors the bar it replaces: same height, same key. */
#mobile-drawer .drawer-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--mtrd-bar-h);
  padding: 0 12px 0 22px !important;
  border-bottom: 1px solid var(--mtrd-hairline);
}
#mobile-drawer .drawer-header::before {
  content: "Menu";
  color: var(--mtrd-orange);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
#mobile-drawer .drawer-header .menu-toggle-close {
  position: relative;
  flex: 0 0 auto;
  width: var(--mtrd-tap);
  height: var(--mtrd-tap);
  padding: 0 !important;
  border-radius: 14px;
  background: var(--mtrd-control-bg) !important;
  border: 1px solid var(--mtrd-control-edge) !important;
  color: var(--mtrd-paper) !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#mobile-drawer .drawer-header .menu-toggle-close:active {
  background: rgba(255, 255, 255, 0.14) !important;
}

/* ---------------------------------------------------------------------
 * 6.5 Drawer content — full-bleed rows, real tap targets
 * ------------------------------------------------------------------- */
#mobile-drawer .drawer-content {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 !important;
}
#mobile-drawer .drawer-content > .site-header-item,
#mobile-drawer .mobile-navigation,
#mobile-drawer .mobile-menu-container,
#mobile-drawer #mobile-menu {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  background: transparent !important;
}
#mobile-drawer #mobile-menu {
  padding: 6px 0 0 !important;
  list-style: none;
}

#mobile-drawer .mobile-navigation ul li {
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}
#mobile-drawer .mobile-navigation ul li a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 22px !important;
  background: transparent !important;
  border-bottom: 0 !important;
  color: var(--mtrd-paper) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}
/* Touch has no hover, so feedback is a press state. The old hover rule
 * also shifted `padding-left`, and because it was shared with the
 * current-page rule it left the active row permanently indented. */
#mobile-drawer .mobile-navigation ul li a:active {
  background: rgba(255, 255, 255, 0.05) !important;
}
@media (hover: hover) {
  #mobile-drawer .mobile-navigation ul li a:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--mtrd-orange) !important;
  }
}

/* "You are here" is an edge marker, not an indent. */
#mobile-drawer .mobile-navigation ul li.current-menu-item > a,
#mobile-drawer .mobile-navigation ul li.current_page_item > a {
  color: var(--mtrd-orange) !important;
  padding-left: 22px !important;
}
#mobile-drawer .mobile-navigation ul li.current-menu-item > a::before,
#mobile-drawer .mobile-navigation ul li.current_page_item > a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--mtrd-orange);
  transform: translateY(-50%);
}

/* Affordance chevron. The sister-site link points up-and-out instead,
 * because it opens in a new tab. */
#mobile-drawer #mobile-menu > li:not(.mtsb-nav-call):not(.menu-item-has-children) > a::after {
  content: "";
  margin-left: auto;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(255, 255, 255, 0.3);
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  transform: rotate(-45deg);
  transition: border-color 0.2s ease;
}
#mobile-drawer #mobile-menu > li.mtsb-nav-sister > a::after {
  border-bottom: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.3);
  transform: none;
}
#mobile-drawer .mobile-navigation ul li a:active::after {
  border-color: var(--mtrd-orange);
}

/* Sub-menus (none today, but the menu is editable) read as a nested,
 * recessed group rather than another run of top-level rows. */
#mobile-drawer .mobile-navigation ul ul li a {
  min-height: 48px;
  padding-left: 38px !important;
  font-size: 0.82rem !important;
  color: var(--mtrd-mute) !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
}
#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap {
  color: var(--mtrd-paper);
}

/* ---------------------------------------------------------------------
 * 6.6 Drawer call to action + footer
 * ------------------------------------------------------------------- */
#mobile-drawer #mobile-menu > li.mtsb-nav-call {
  border-bottom: 0;
  padding: 22px 22px 4px;
}
#mobile-drawer #mobile-menu > li.mtsb-nav-call > a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 54px;
  margin: 0 !important;
  padding: 0 1.2em !important;
  border-radius: 999px !important;
  background: var(--mtrd-orange) !important;
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  box-shadow: 0 10px 26px rgba(217, 93, 39, 0.32);
  transition: transform 0.18s var(--mtrd-nav-ease), background-color 0.2s ease;
}
#mobile-drawer #mobile-menu > li.mtsb-nav-call > a::before {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--mtrd-icon-phone) center / contain no-repeat;
  mask: var(--mtrd-icon-phone) center / contain no-repeat;
}
#mobile-drawer #mobile-menu > li.mtsb-nav-call > a:active {
  transform: scale(0.98);
  background: #c25120 !important;
}

.mtsb-drawer-foot {
  margin-top: auto;
  padding: 20px 22px 26px;
  border-top: 1px solid var(--mtrd-hairline);
}
.mtsb-drawer-foot-line {
  display: block;
  color: var(--mtrd-mute);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.mtsb-drawer-foot-mail {
  display: inline-block;
  margin-top: 6px;
  color: var(--mtrd-paper);
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.mtsb-drawer-foot-mail:active { color: var(--mtrd-orange); }

/* ---------------------------------------------------------------------
 * 6.7 Drawer entrance — rows settle in behind the panel
 * ------------------------------------------------------------------- */
body.showing-popup-drawer-from-right #mobile-drawer #mobile-menu > li,
body.showing-popup-drawer-from-right .mtsb-drawer-foot {
  opacity: 0;
  transform: translateX(16px);
  animation: mtsb-drawer-in 0.42s var(--mtrd-nav-ease) forwards;
}
body.showing-popup-drawer-from-right #mobile-drawer #mobile-menu > li:nth-child(1) { animation-delay: 0.08s; }
body.showing-popup-drawer-from-right #mobile-drawer #mobile-menu > li:nth-child(2) { animation-delay: 0.13s; }
body.showing-popup-drawer-from-right #mobile-drawer #mobile-menu > li:nth-child(3) { animation-delay: 0.18s; }
body.showing-popup-drawer-from-right #mobile-drawer #mobile-menu > li:nth-child(4) { animation-delay: 0.23s; }
body.showing-popup-drawer-from-right #mobile-drawer #mobile-menu > li:nth-child(5) { animation-delay: 0.28s; }
body.showing-popup-drawer-from-right #mobile-drawer #mobile-menu > li:nth-child(6) { animation-delay: 0.33s; }
body.showing-popup-drawer-from-right .mtsb-drawer-foot { animation-delay: 0.36s; }

@keyframes mtsb-drawer-in {
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
 * 6.8 Keyboard focus
 * Kadence blanks outlines site-wide via `body.hide-focus-outline *:focus`.
 * These selectors out-specify it, so the new controls stay reachable for
 * anyone driving the drawer from a keyboard.
 * ------------------------------------------------------------------- */
.site-mobile-header-wrap .mtsb-mobile-call:focus-visible,
#masthead .site-mobile-header-wrap #mobile-toggle.menu-toggle-open:focus-visible,
#mobile-drawer .drawer-header .menu-toggle-close:focus-visible,
#mobile-drawer .mobile-navigation ul li a:focus-visible,
.mtsb-drawer-foot-mail:focus-visible {
  outline: 2px solid var(--mtrd-orange);
  outline-offset: 3px;
}
#mobile-drawer .mobile-navigation ul li a:focus-visible {
  outline-offset: -3px;
}

/* ---------------------------------------------------------------------
 * 7. Reduced motion — keep it usable, drop the movement
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #masthead .site-main-header-wrap .site-header-row-container-inner,
  #masthead .site-main-header-wrap .site-main-header-inner-wrap,
  #masthead .site-mobile-header-wrap .site-main-header-inner-wrap,
  #masthead .site-branding img.custom-logo,
  #masthead .mobile-site-branding img.custom-logo,
  #masthead .header-menu-container > ul > li:not(.mtsb-nav-call) > a::after,
  #masthead .header-menu-container > ul > li.mtsb-nav-call > a,
  #masthead .site-mobile-header-wrap #mobile-toggle.menu-toggle-open,
  .site-mobile-header-wrap .mtsb-mobile-call,
  #mobile-drawer .mobile-navigation ul li a,
  #mobile-drawer #mobile-menu > li.mtsb-nav-call > a,
  #mobile-toggle .menu-toggle-icon,
  #mobile-toggle .menu-toggle-icon::before,
  #mobile-toggle .menu-toggle-icon::after {
    transition: none !important;
  }
  body.mtsb-nav-ready #masthead .header-menu-container > ul > li,
  body.showing-popup-drawer-from-right #mobile-drawer #mobile-menu > li,
  body.showing-popup-drawer-from-right .mtsb-drawer-foot {
    opacity: 1;
    transform: none;
    animation: none;
  }
  /* The bar still re-attaches on transparent-header pages — it just
   * appears there instead of sliding down. */
  body.mtsb-nav-scrolled.transparent-header #masthead.site-header,
  body.mtsb-nav-scrolled.mobile-transparent-header #masthead.site-header {
    animation: none;
  }
}