/* MCS site frame 2026.10.19.1: one header, phone Call/Quote bar and footer for every visitor page
   (homepage, service-area pages, WordPress pages and blog posts). Everything here is scoped to the frame's own classes. */
.mcsc-skip, .mcsc-header, .mcsc-menu-panel, .mcsc-mobile-cta, .mcsc-footer {
  --mf-navy: #062a52;
  --mf-navy-deep: #041d3a;
  --mf-gold: #dfad34;
  --mf-gold-soft: #ffdc63;
  --mf-gold-ink: #1e240b;
  --mf-gold-grad: linear-gradient(135deg, #f6c84e, #c48b17);
  --mf-cream: #fff7df;
  --mf-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mf-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --mf-ease: cubic-bezier(.16, 1, .3, 1);
}
html { scroll-padding-top: 92px; }

/* Header */
.mcsc-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100001;
  padding: 10px 14px; border-radius: 0 0 12px 0;
  background: #fff; color: var(--mf-navy); font: 700 15px/1.2 var(--mf-sans); text-decoration: none;
}
.mcsc-skip:focus { left: 0; }
.mcsc-header {
  position: sticky; top: 0; z-index: 9990;
  margin: 0; padding: 0;
  background-color: var(--mf-navy);
  background-image: radial-gradient(560px 140px at 82% 0%, rgba(223, 173, 52, .09), transparent 70%);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: var(--mf-sans);
  transition: box-shadow .25s var(--mf-ease);
}
.mcsc-header.is-scrolled { box-shadow: 0 12px 30px rgba(3, 27, 53, .22); }
body.admin-bar .mcsc-header { top: 32px; }
.mcsc-header *, .mcsc-header *::before, .mcsc-header *::after { box-sizing: border-box; }
.mcsc-shell {
  display: flex; align-items: center; gap: 20px;
  max-width: 1240px; height: 76px; margin: 0 auto; padding: 0 24px;
}

.mcsc-header .mcsc-brand {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
  height: 54px; margin: 0; padding: 0 14px 0 8px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  background: rgba(255, 255, 255, .04);
  text-decoration: none; transition: border-color .2s, background .2s;
}
.mcsc-header .mcsc-brand:hover, .mcsc-header .mcsc-brand:focus-visible { border-color: rgba(246, 200, 78, .45); background: rgba(255, 255, 255, .07); }
.mcsc-header .mcsc-brand img { display: block; width: 46px; height: auto; max-width: none; margin: 0; border: 0; box-shadow: none; }
.mcsc-brand-name { display: grid; gap: 4px; line-height: 1; text-align: left; white-space: nowrap; }
.mcsc-brand-name strong { margin: 0; color: #fffaf0; font: 800 17px/1 var(--mf-serif); letter-spacing: .01em; }
.mcsc-brand-name small { margin: 0; color: rgba(255, 250, 240, .86); font: 700 9.5px/1 var(--mf-sans); letter-spacing: .17em; text-transform: uppercase; }

.mcsc-nav { display: flex; align-items: center; gap: 26px; margin: 0 0 0 auto; padding: 0; }
.mcsc-nav > a, .mcsc-nav-item > a {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 12px 0; margin: 0;
  color: rgba(255, 255, 255, .88); font: 600 15px/1.2 var(--mf-sans); letter-spacing: .005em; text-decoration: none;
  transition: color .2s;
}
.mcsc-nav > a::after, .mcsc-nav-item > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--mf-gold); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--mf-ease);
}
.mcsc-nav > a:hover, .mcsc-nav-item > a:hover, .mcsc-nav > a:focus-visible, .mcsc-nav-item > a:focus-visible { color: var(--mf-gold-soft); }
.mcsc-nav > a:hover::after, .mcsc-nav-item:hover > a::after, .mcsc-nav > a:focus-visible::after { transform: scaleX(1); }
.mcsc-caret { width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .75; }
.mcsc-has-menu { position: relative; }
.mcsc-dropdown {
  position: absolute; top: 100%; left: -16px; z-index: 2;
  display: grid; gap: 2px; min-width: 260px; padding: 10px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px;
  background: rgba(6, 42, 82, .98); box-shadow: 0 22px 55px rgba(0, 0, 0, .26);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s, transform .25s var(--mf-ease), visibility .2s;
}
.mcsc-has-menu:hover .mcsc-dropdown, .mcsc-has-menu:focus-within .mcsc-dropdown { opacity: 1; visibility: visible; transform: none; }
.mcsc-dropdown a {
  display: block; padding: 11px 12px; margin: 0; border-radius: 10px;
  color: rgba(255, 255, 255, .9); font: 500 15px/1.3 var(--mf-sans); text-decoration: none;
}
.mcsc-dropdown a:hover, .mcsc-dropdown a:focus-visible { background: rgba(255, 255, 255, .08); color: #fff; }

.mcsc-actions { display: flex; align-items: center; gap: 10px; margin: 0 0 0 8px; }
.mcsc-header .mcsc-phone {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; margin: 0;
  border: 1px solid rgba(255, 247, 223, .26); border-radius: 999px; background: transparent;
  color: var(--mf-cream); font: 600 15px/1 var(--mf-sans); white-space: nowrap; text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.mcsc-header .mcsc-phone:hover, .mcsc-header .mcsc-phone:focus-visible { border-color: rgba(246, 200, 78, .6); background: rgba(246, 200, 78, .1); color: #fff; }
.mcsc-header .mcsc-btn, .mcsc-menu-panel .mcsc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; margin: 0; border: 0; border-radius: 999px;
  font: 700 15px/1 var(--mf-sans); letter-spacing: .005em; white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform .18s var(--mf-ease), box-shadow .25s, filter .2s;
}
.mcsc-header .mcsc-btn-gold, .mcsc-menu-panel .mcsc-btn-gold {
  background: var(--mf-gold-grad); color: var(--mf-gold-ink);
  box-shadow: 0 10px 24px rgba(223, 173, 52, .22), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.mcsc-header .mcsc-btn-gold:hover, .mcsc-header .mcsc-btn-gold:focus-visible { filter: brightness(1.05); transform: translateY(-1px); color: var(--mf-gold-ink); }
.mcsc-header .mcsc-btn:active { transform: translateY(1px) scale(.985); }

.mcsc-menu { position: relative; display: none; margin: 0; }
.mcsc-menu summary {
  display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; margin: 0;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .06);
  color: #fff; font: 600 15px/1 var(--mf-sans); list-style: none; cursor: pointer; user-select: none;
}
.mcsc-menu summary::-webkit-details-marker { display: none; }
.mcsc-menu summary::before {
  content: ""; width: 16px; height: 11px;
  background: linear-gradient(#fff, #fff) top/100% 2px no-repeat, linear-gradient(#fff, #fff) center/100% 2px no-repeat, linear-gradient(#fff, #fff) bottom/100% 2px no-repeat;
}
.mcsc-menu[open] summary { background: rgba(246, 200, 78, .16); border-color: rgba(246, 200, 78, .5); }
.mcsc-menu-panel {
  position: fixed; top: 86px; left: 12px; right: 12px; z-index: 9995;
  display: grid; gap: 1px; max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; padding: 10px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px;
  background: var(--mf-navy); box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
  font-family: var(--mf-sans);
}
.mcsc-menu-panel a {
  display: flex; align-items: center; min-height: 46px; padding: 0 14px; margin: 0; border-radius: 12px;
  color: #fff; font: 600 16px/1.2 var(--mf-sans); text-decoration: none;
}
.mcsc-menu-panel a.mcsc-sub { min-height: 40px; padding-left: 30px; color: rgba(255, 255, 255, .8); font-weight: 500; font-size: 15px; }
.mcsc-menu-panel a:hover, .mcsc-menu-panel a:focus-visible { background: rgba(255, 255, 255, .08); }
.mcsc-menu-actions { display: grid; gap: 8px; margin-top: 8px; padding: 12px 4px 4px; border-top: 1px solid rgba(255, 255, 255, .12); }
.mcsc-menu-panel a.mcsc-menu-call { justify-content: center; border: 1px solid rgba(255, 247, 223, .26); border-radius: 999px; color: var(--mf-cream); }
.mcsc-menu-panel .mcsc-btn { width: 100%; min-height: 48px; }

/* Full menu on wide screens; Menu button below that. */
@media (max-width: 1119px) {
  .mcsc-nav { display: none; }
  .mcsc-menu { display: block; }
  .mcsc-actions { margin-left: auto; }
}
@media (min-width: 768px) and (max-width: 1119px) {
  .mcsc-menu-panel { left: auto; right: 20px; width: 380px; }
}
@media (max-width: 782px) {
  body.admin-bar .mcsc-header { top: 46px; }
}
/* Phones: logo and Menu in the header; Call and Request Quote live in the bar at the bottom (and in the menu). */
@media (max-width: 767px) {
  html { scroll-padding-top: 80px; }
  .mcsc-shell { height: 68px; gap: 10px; padding: 0 14px; }
  .mcsc-header .mcsc-brand { height: 50px; gap: 8px; padding: 0 12px 0 6px; border-radius: 15px; }
  .mcsc-header .mcsc-brand img { width: 44px; }
  .mcsc-brand-name strong { font-size: 16px; }
  .mcsc-brand-name small { font-size: 9px; letter-spacing: .15em; }
  .mcsc-header .mcsc-phone, .mcsc-header .mcsc-header-quote { display: none; }
  .mcsc-menu summary { height: 42px; padding: 0 15px; }
  .mcsc-menu-panel { top: 78px; max-height: calc(100dvh - 100px); }
}
@media (max-width: 359px) {
  .mcsc-shell { padding: 0 10px; gap: 8px; }
  .mcsc-header .mcsc-brand { height: 46px; gap: 6px; padding: 0 10px 0 5px; }
  .mcsc-header .mcsc-brand img { width: 40px; }
  .mcsc-brand-name strong { font-size: 14.5px; }
  .mcsc-brand-name small { font-size: 8px; letter-spacing: .12em; }
  .mcsc-menu summary { padding: 0 12px; gap: 7px; }
}

/* Phone Call / Request Quote bar: on every page, always there.
   The doubled class outranks the old .mobile-cta rules that each static service-area page still loads after this file. */
.mcsc-mobile-cta.mcsc-mobile-cta { display: none !important; }
@media (max-width: 767px) {
  .mcsc-mobile-cta.mcsc-mobile-cta {
    position: fixed; top: auto; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 9980;
    display: grid !important; grid-template-columns: 1fr 1.4fr; gap: 8px; width: auto; padding: 7px; margin: 0;
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px;
    background: rgba(4, 31, 61, .95); box-shadow: 0 14px 34px rgba(3, 27, 53, .3);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-family: var(--mf-sans);
  }
  .mcsc-mobile-cta.mcsc-mobile-cta a {
    display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; padding: 0 12px; border-radius: 999px;
    font: 700 16px/1 var(--mf-sans); text-align: center; text-decoration: none;
  }
  .mcsc-mobile-cta.mcsc-mobile-cta a:first-child { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; }
  .mcsc-mobile-cta.mcsc-mobile-cta a:last-child { border: 0; background: var(--mf-gold-grad); color: var(--mf-gold-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
  /* Out of the way while a quote pop-up is open (WordPress pages lock with mcsc-lock, static pages with quote-modal-lock). */
  html.mcsc-lock .mcsc-mobile-cta.mcsc-mobile-cta, html.quote-modal-lock .mcsc-mobile-cta.mcsc-mobile-cta,
  body.quote-modal-open .mcsc-mobile-cta.mcsc-mobile-cta { display: none !important; }
}
html.mcsf-menu-open chat-widget, html.mcsf-menu-open .mcsc-mobile-cta { visibility: hidden !important; }

/* Footer */
.mcsc-footer {
  margin: 0; padding: 68px 24px 0;
  background: linear-gradient(180deg, #061b30, #041322);
  border-top: 1px solid rgba(223, 173, 52, .22);
  color: #fff; font-family: var(--mf-sans); text-align: left;
}
.mcsc-footer *, .mcsc-footer *::before, .mcsc-footer *::after { box-sizing: border-box; }
.mcsc-footer-inner {
  display: grid; grid-template-columns: minmax(330px, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 48px;
  max-width: 1200px; margin: 0 auto;
}
.mcsc-footer-logo { display: inline-block; text-decoration: none; }
.mcsc-footer-logo img { display: block; width: 196px; height: auto; max-width: 100%; margin: 0; border: 0; }
.mcsc-footer-brand p { max-width: 300px; margin: 18px 0 0; padding: 0; color: rgba(255, 255, 255, .74); font: 500 15.5px/1.55 var(--mf-sans); }
.mcsc-footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.mcsc-footer-social a {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 13px; margin: 0;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .88); font: 600 12.5px/1 var(--mf-sans); letter-spacing: .07em; text-transform: uppercase; text-decoration: none;
  transition: border-color .2s, background .2s, color .2s;
}
.mcsc-footer-social a:hover, .mcsc-footer-social a:focus-visible { border-color: rgba(245, 194, 66, .55); background: rgba(245, 194, 66, .12); color: #fff; }
.mcsc-footer-col { display: grid; align-content: start; gap: 11px; min-width: 0; margin: 0; padding: 0; }
.mcsc-footer-col h2 {
  margin: 0 0 6px; padding: 0; color: #f5c242;
  font: 800 15px/1.2 var(--mf-serif); letter-spacing: .05em; text-transform: uppercase;
}
.mcsc-footer-col a {
  color: rgba(255, 255, 255, .78); font: 500 15px/1.4 var(--mf-sans); text-decoration: none; overflow-wrap: anywhere;
  transition: color .2s;
}
.mcsc-footer-col a:hover, .mcsc-footer-col a:focus-visible { color: #fff; }
.mcsc-footer-bottom { max-width: 1200px; margin: 52px auto 0; padding: 22px 0 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
.mcsc-footer-bottom p { margin: 0; padding: 0; color: rgba(255, 255, 255, .6); font: 500 14px/1.5 var(--mf-sans); }
/* Below 1200px the brand sits on its own row so the email address never breaks mid-word. */
@media (max-width: 1199px) {
  .mcsc-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 28px; }
  .mcsc-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .mcsc-footer { padding: 52px 20px 0; }
  .mcsc-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 22px; }
  .mcsc-footer-col:last-child { grid-column: 1 / -1; }
  .mcsc-footer-logo img { width: 180px; }
  .mcsc-footer-social { gap: 6px; }
  /* Room for the Call/Quote bar and the chat bubble above it. */
  .mcsc-footer-bottom { margin-top: 40px; padding-bottom: calc(28px + 150px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 359px) {
  .mcsc-footer { padding-inline: 16px; }
  .mcsc-footer-inner { grid-template-columns: 1fr; }
}

/* WordPress (Divi) pages: the frame replaces Divi's own header and footer. */
body.mcs-frame .et-l--header, body.mcs-frame #main-header, body.mcs-frame #top-header,
body.mcs-frame .et-l--footer, body.mcs-frame #main-footer { display: none !important; }
body.mcs-frame #page-container { padding-top: 0 !important; margin-top: 0 !important; }

/* Service-area pages and the homepage: their heroes were built to sit under the old see-through floating header.
   The frame header takes its own space at the top, so drop that extra top padding and the dark top band. */
body.mcs-static-area .hero::before { display: none !important; }
body.mcs-static-area .hero > .hero-video { top: 0 !important; }
body.mcs-static-area .hero { padding-top: 40px !important; }
@media (max-width: 700px) { body.mcs-static-area .hero { padding-top: 26px !important; } }
body.mcs-homepage-redesign-page.mcs-frame .hero-inner { padding-top: 48px !important; }
@media (max-width: 760px) {
  body.mcs-homepage-redesign-page.mcs-frame .hero-inner { padding-top: 0 !important; }
  body.mcs-homepage-redesign-page.mcs-frame .hero-copy { padding-top: 28px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mcsc-header, .mcsc-nav a, .mcsc-dropdown, .mcsc-header .mcsc-btn, .mcsc-footer a { transition: none !important; }
}