/*
 * FCA site chrome (header + footer) — Elementor-free.
 *
 * Ported from Elementor templates 27417 (header) and 27287 (footer). The
 * Elementor versions targeted generated element ids (.elementor-element-b810d8f
 * etc.); because we now control the markup, those are replaced with semantic
 * class names and the rules that existed purely to fight Elementor's wrapper
 * divs are gone.
 *
 * Loaded as a real stylesheet so browsers cache it once across every page,
 * instead of the ~16KB that used to be inlined into each page's HTML.
 */

/* ---------- layout shell ---------- */
.fca-site-header{position:sticky;top:0;z-index:49}
.fca-site-header .fca-topbar,
.fca-site-header .fca-headerbar{background:rgba(255,255,255,.96);
 -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.fca-site-header .fca-headerbar{border-bottom:1px solid rgba(5,5,5,.08)}
/* The topbar is centred on a 1220px measure; the main bar is deliberately
   FULL-BLEED, matching the Elementor original (its container had max-width:none
   and the logo sat ~9px from the viewport edge). Constraining both to 1220px
   pushed the logo 84px inward and squeezed the nav. */
.fca-container{width:min(100% - 40px,1220px);margin-inline:auto}
/* 18px block padding reproduces the Elementor bar's 118px height around an 81px logo */
.fca-headerbar .fca-container{width:100%;max-width:none;margin:0;padding:18px 10px}

/* ---------- dark topbar ---------- */
.fca-site-header .fca-topbar{background:#050505;position:relative;z-index:20}
.fca-site-header .fca-topbar .fca-container{display:flex;align-items:center;gap:16px;
 flex-wrap:nowrap;min-height:0}
.fca-site-header .fca-topbar{padding:12px 0}
.fca-site-header .fca-topbar,
.fca-site-header .fca-topbar p,
.fca-site-header .fca-topbar span,
.fca-site-header .fca-topbar a{color:#fff;font-size:13px;line-height:1.2}
.fca-site-header .fca-topbar p{margin:0}
.fca-site-header .fca-topbar svg,
.fca-site-header .fca-topbar i{color:#fff;fill:#fff}
/* push the "Call Us:" group to the right edge */
.fca-site-header .fca-topbar-callus{margin-left:auto}
.fca-site-header .fca-topbar-phone{font-weight:700}

/* GTranslate: a div switcher, not a <select>. The closed control must read
   transparent-on-dark; the open list dark-on-light. .gt_option ships
   position:relative and sits BEFORE .gt_selected in the markup, so it must be
   taken out of flow or opening the list shoves the control down. */
.fca-site-header .fca-topbar .gt_switcher{position:relative;width:156px;height:26px;
 line-height:26px;overflow:visible}
.fca-site-header .fca-topbar .gt_switcher .gt_selected{background:transparent;height:26px;
 position:relative;z-index:1}
.fca-site-header .fca-topbar .gt_switcher .gt_selected a{background:transparent;color:#fff;
 border:1px solid rgba(255,255,255,.35);border-radius:6px;height:26px;line-height:24px;font-size:12px}
.fca-site-header .fca-topbar .gt_switcher .gt_option{position:absolute;top:100%;left:0;bottom:auto;
 margin-top:6px;width:196px;max-height:300px;overflow-y:auto;overflow-x:hidden;background:#fff;
 z-index:9999;border:1px solid #dde1e7;border-radius:8px;box-shadow:0 24px 70px rgba(5,5,5,.18)}
.fca-site-header .fca-topbar .gt_switcher .gt_option a{background:#fff;color:#050505;
 font-size:12px;line-height:1.9}
.fca-site-header .fca-topbar .gt_switcher .gt_option a:hover{background:#f6f7f9;color:#c8102e}
.fca-site-header .fca-topbar .gtranslate_wrapper{line-height:0}

/* ---------- main bar ---------- */
.fca-site-header .fca-headerbar .fca-container{display:flex;align-items:center;
 justify-content:space-between;gap:22px}
/* logo column was 15% (~190px at 1265) in the Elementor layout */
.fca-header-brand{display:flex;align-items:center;gap:14px;flex:0 0 190px}
.fca-logo{display:block;line-height:0;background:transparent}
.fca-logo img{width:170px;max-width:170px;height:auto;display:block;border:0;padding:0;
 background:transparent;object-fit:contain}
.fca-header-nav{display:flex;align-items:center;gap:18px;flex:1 1 auto;min-width:0}
.fca-header-nav #mega-menu-wrap-fca_mock_header{flex:1 1 auto;min-width:0}
.fca-site-header #mega-menu-fca_mock_header{justify-content:center}

/* call icon: mobile only (desktop uses the Apply button instead) */
.fca-header-call{display:none;width:44px;height:44px;border-radius:50%;
 align-items:center;justify-content:center;background:#c8102e;color:#fff;flex:0 0 44px}
.fca-header-call svg{width:19px;height:19px;fill:#fff!important}
/* The theme colours <a> globally (#c1272d) and beats a bare .fca-header-call
   rule, so fill:currentColor painted the phone icon red-on-red and the button
   read as a plain red dot. Same <a> override class as .fca-btn-apply below. */
.fca-site-header a.fca-header-call,
.fca-site-header a.fca-header-call:link,
.fca-site-header a.fca-header-call:visited{background-color:#c8102e!important;color:#fff!important}

/* ---------- Apply Now button ---------- */
/* The theme colours <a> globally and beat a bare .fca-btn-apply rule, which left
   the label rendering red-on-red (computed rgb(193,39,45) on rgb(200,16,46)).
   Elementor's button CSS used to win that fight; now we have to. */
.fca-site-header a.fca-btn-apply,
.fca-site-header a.fca-btn-apply:link,
.fca-site-header a.fca-btn-apply:visited{
 display:inline-flex;align-items:center;justify-content:center;gap:9px;
 min-height:54px;padding:0 34px;border-radius:999px;
 background-color:#c8102e!important;color:#fff!important;
 font-size:15px;font-weight:800;text-transform:none;letter-spacing:0;text-decoration:none;
 box-shadow:0 12px 28px rgba(200,16,46,.26);transition:.2s;white-space:nowrap}
.fca-site-header a.fca-btn-apply:hover,
.fca-site-header a.fca-btn-apply:focus{
 background-color:#990b22!important;color:#fff!important;transform:translateY(-2px)}

@media (max-width:1024px){
 .fca-site-header .fca-topbar{display:none}
 /* Media queries add NO specificity - these must repeat the full
    .fca-site-header a.fca-btn-apply chain or the base rule wins. */
 .fca-site-header a.fca-btn-apply,
 .fca-site-header a.fca-btn-apply:link,
 .fca-site-header a.fca-btn-apply:visited{min-height:44px;font-size:14px;padding:0 18px}
}
@media (max-width:767px){
 /* logo + call icon share one row; nav (hamburger) pushed to the right */
 .fca-header-call{display:inline-flex;margin-left:auto}
 /* Apply Now is shown on phones -- see the block at the end of this file */
 .fca-header-brand{flex:0 0 auto}
 .fca-site-header .fca-headerbar .fca-container{flex-wrap:nowrap}
 .fca-header-nav{flex:0 1 auto;margin-left:auto;gap:10px;min-width:0}
}


/* ================= FOOTER (ported from template 27287) ================= */
.fca-site-footer{background:var(--fca-navy,var(--navy,#0b111d));color:#fff;padding:70px 0 30px;margin-top:0}
.fca-site-footer *{box-sizing:border-box}
.fca-site-footer a{color:inherit;text-decoration:none}
.fca-site-footer .container{width:min(calc(100% - 40px),1220px);margin-inline:auto}
.fca-site-footer .footer-grid{display:grid;grid-template-columns:1.45fr repeat(3,1fr);gap:46px}
.fca-site-footer .footer-brand .brand-logo{display:flex;align-items:center;justify-content:flex-start;width:150px;height:70px}
.fca-site-footer .footer-brand .brand-logo img{display:block;max-width:150px;max-height:70px;width:auto;height:auto;object-fit:contain}
.fca-site-footer .footer-brand p{max-width:350px;margin-top:20px;color:rgba(255,255,255,.58);font-size:.88rem}
.fca-site-footer .footer-col h3{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;margin:0;color:#fff}
.fca-site-footer .footer-col ul{display:grid;gap:11px;margin-top:20px;list-style:none;color:rgba(255,255,255,.65);font-size:.87rem;padding:0}
.fca-site-footer .footer-col a:hover{color:#fff}
.fca-site-footer .footer-service{position:relative;padding-left:13px;display:inline-block}
.fca-site-footer .footer-service:before{content:"";position:absolute;left:0;top:.45em;width:5px;height:5px;border-radius:50%;background:var(--service,#c8102e)}
.fca-site-footer .footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:60px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45);font-size:.72rem}
.fca-site-footer .footer-legal{display:flex;flex-wrap:wrap;gap:10px 18px}
@media(max-width:900px){.fca-site-footer .footer-grid{grid-template-columns:1.3fr 1fr 1fr}}
@media(max-width:620px){.fca-site-footer .footer-grid{grid-template-columns:1fr}.fca-site-footer .footer-col:last-child{grid-column:1/-1}.fca-site-footer .footer-bottom{flex-direction:column}.fca-site-footer .footer-brand .brand-logo{width:130px;height:58px}.fca-site-footer .footer-brand .brand-logo img{max-width:130px;max-height:58px}}


/* ================= APPLY MODAL ================= */
.fca-apply-modal{position:fixed;inset:0;z-index:99999;display:none}
.fca-apply-modal.is-open{display:block}
.fca-apply-modal-backdrop{position:absolute;inset:0;background:rgba(5,5,5,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .22s ease}
.fca-apply-modal.is-open .fca-apply-modal-backdrop{opacity:1}
.fca-apply-modal-panel{position:relative;z-index:1;width:min(880px,92vw);max-height:88vh;overflow-y:auto;margin:5vh auto;background:#fff;border-radius:28px;padding:40px 40px 36px;box-shadow:0 40px 100px rgba(0,0,0,.35);transform:translateY(16px) scale(.98);opacity:0;transition:transform .25s ease,opacity .25s ease}
.fca-apply-modal.is-open .fca-apply-modal-panel{transform:translateY(0) scale(1);opacity:1}
.fca-apply-modal-close{position:absolute;top:18px;right:18px;width:36px;height:36px;border-radius:50%;border:1px solid #e4e6eb;background:#fff;font-size:22px;line-height:1;color:#334155;cursor:pointer;display:grid;place-items:center}
.fca-apply-modal-close:hover{background:#f3f4f6}
.fca-apply-modal-head{margin-bottom:26px;padding-right:30px}
.fca-apply-modal-eyebrow{display:inline-block;color:#c8102e;font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:12px;margin-bottom:8px}
.fca-apply-modal-head h2{margin:0 0 8px;font-size:clamp(24px,3.4vw,32px);line-height:1.1;letter-spacing:-.02em;color:#0b111d}
.fca-apply-modal-head p{margin:0;color:#5b6473;font-size:15px}
.fca-apply-modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fca-apply-modal-card{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;border:1px solid #e6eaf0;border-left:5px solid var(--accent);text-decoration:none;color:#111827;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.fca-apply-modal-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(15,23,42,.12);background:#fafbfc}
.fca-apply-modal-mark{flex:0 0 auto;width:38px;height:38px;border-radius:12px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:950;letter-spacing:.04em}
.fca-apply-modal-card-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.fca-apply-modal-card-body strong{font-size:15.5px;letter-spacing:-.01em}
.fca-apply-modal-card-body span{font-size:12.5px;color:#5b6473;line-height:1.4}
.fca-apply-modal-arrow{margin-left:auto;color:var(--accent);font-weight:900;flex:0 0 auto}
body.fca-apply-modal-lock{overflow:hidden}
@media(max-width:700px){
  .fca-apply-modal-grid{grid-template-columns:1fr}
  .fca-apply-modal-panel{padding:30px 24px 26px;border-radius:22px}
}


/* ---------- page shell ----------
 * The theme applies margin:120px 0 to <main>, which Elementor's own page wrapper
 * used to absorb. Without it the content floated 108px below the header and the
 * same above the footer, showing as white bands. Scoped to this template's body
 * class so no other layout is affected.
 */
/* The site's custom CSS carries `main#content{margin:120px auto}`. That ID
   selector (1,0,1) outranks a plain class rule, so the override has to include
   the id too (1,1,1). We keep id="content" because it is the skip-link target. */
main#content.fca-page-main{margin:0;padding:0;max-width:none;width:auto}
main#content.fca-page-main > .fca-embed{margin:0}


/* ================= FCA mobile menu scroll fix =================
   MMM opens the mobile panel as position:absolute inside our position:sticky
   header, with overflow-y:visible and no max-height, so any item past the fold
   was unreachable (measured 1223px of menu in a 918px viewport). Bound it to the
   viewport and let it scroll itself. Selector mirrors MMM's generated chain --
   shorter selectors lose to MMM even with !important. */
@media only screen and (max-width:1024px){
 #mega-menu-wrap-fca_mock_header .mega-menu-toggle.mega-menu-open + #mega-menu-fca_mock_header{
  max-height:calc(100vh - 91px)!important;
  max-height:calc(100svh - 91px)!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
 }
}

/* ================= FCA mobile mega-panel stacking =================
   The panels are display:grid for the desktop design, so MMM's mobile
   width:50% on the column <li>s is inert -- grid-template-columns still
   decides. At 390px that gave 3 columns of ~105px, clipping labels.
   NOTE the doubled id (li#mega-menu-item-N#mega-menu-item-N): MMM's own
   rule is display:grid!important at the SAME specificity, and its
   stylesheet loads after ours, so an equal-specificity !important loses
   on source order. Doubling the id takes us to 4 IDs and wins outright. */
@media only screen and (max-width:1024px){
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27382,#mega-menu-item-28013):is(#mega-menu-item-27382,#mega-menu-item-28013) > ul.mega-sub-menu,
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27389,#mega-menu-item-28022):is(#mega-menu-item-27389,#mega-menu-item-28022) > ul.mega-sub-menu,
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27499,#mega-menu-item-28010):is(#mega-menu-item-27499,#mega-menu-item-28010) > ul.mega-sub-menu{
  grid-template-columns:none!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  left:0!important;right:auto!important;margin:0!important;
  padding:2px 0 6px!important;
  border-radius:0!important;box-shadow:none!important;background:transparent!important;
 }
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27382,#mega-menu-item-28013):is(#mega-menu-item-27382,#mega-menu-item-28013) > ul.mega-sub-menu > li,
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27389,#mega-menu-item-28022):is(#mega-menu-item-27389,#mega-menu-item-28022) > ul.mega-sub-menu > li,
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27499,#mega-menu-item-28010):is(#mega-menu-item-27499,#mega-menu-item-28010) > ul.mega-sub-menu > li{
  display:block!important;
  width:100%!important;max-width:100%!important;flex:0 0 100%!important;
  margin:0 0 4px!important;padding:0!important;float:none!important;
 }
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27382,#mega-menu-item-28013):is(#mega-menu-item-27382,#mega-menu-item-28013) > ul.mega-sub-menu li > a.mega-menu-link,
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27389,#mega-menu-item-28022):is(#mega-menu-item-27389,#mega-menu-item-28022) > ul.mega-sub-menu li > a.mega-menu-link,
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27499,#mega-menu-item-28010):is(#mega-menu-item-27499,#mega-menu-item-28010) > ul.mega-sub-menu li > a.mega-menu-link{
  padding:9px 4px!important;line-height:1.3!important;
 }
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header *{max-width:100%!important}
}


/* ================= FCA mobile menu anchoring =================
   The panel is position:absolute against #mega-menu-wrap-fca_mock_header, which on mobile is only the
   41px hamburger at the right edge -- so the open menu started at x=34 and
   overhung the screen by 34px. Dropping the wrap to position:static makes
   .fca-site-header (position:sticky) the containing block, so left/right:0
   pins the panel edge to edge. */
@media only screen and (max-width:1024px){
 #mega-menu-wrap-fca_mock_header{position:static!important}
 #mega-menu-wrap-fca_mock_header .mega-menu-toggle + #mega-menu-fca_mock_header,
 #mega-menu-wrap-fca_mock_header .mega-menu-toggle.mega-menu-open + #mega-menu-fca_mock_header{
  left:0!important;right:0!important;
  width:auto!important;max-width:none!important;
 }
}


/* ================= FCA mobile menu rows =================
   The theme sets align-items:center on the menu for the desktop bar and
   MMM's mobile CSS only flips flex-flow to column, so every top-level item
   stayed content-width and centred -- which also dragged its panel inward.
   Stretch them into full-width rows with a divider. */
@media only screen and (max-width:1024px){
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header{
  align-items:stretch!important;
  gap:0!important;
  padding:6px 14px 14px!important;
 }
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li.mega-menu-item{
  width:100%!important;max-width:100%!important;
  flex:0 0 auto!important;
  border-bottom:1px solid rgba(5,5,5,.10)!important;
 }
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li.mega-menu-item:last-child{border-bottom:0!important}
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li.mega-menu-item > a.mega-menu-link{
  display:flex!important;align-items:center!important;
  width:100%!important;
  padding:14px 2px!important;
  font-size:16px!important;line-height:1.25!important;
 }
}


/* ================= FCA mobile menu top edge =================
   Now that the panel is positioned against .fca-site-header, top:100% puts
   it exactly on the header's bottom edge instead of 23px up over the logo,
   and the scroll height is the rest of the screen below it. */
@media only screen and (max-width:1024px){
 #mega-menu-wrap-fca_mock_header .mega-menu-toggle.mega-menu-open + #mega-menu-fca_mock_header{
  top:100%!important;
  max-height:calc(100vh - 91px)!important;
  max-height:calc(100svh - 91px)!important;
  box-shadow:0 18px 40px rgba(5,5,5,.18)!important;
 }
}


/* ================= FCA mobile footer tap targets =================
   Footer links were 13-19px tall on a phone -- a stacked list of inline text
   links with an 11px gap. Give them a real row box so they can be tapped. */
@media(max-width:620px){
 .fca-site-footer .footer-col ul{gap:2px}
 .fca-site-footer .footer-col ul li{line-height:1.35}
 .fca-site-footer .footer-col ul a{
  display:flex;align-items:center;
  min-height:40px;
  padding:4px 0;
 }
 .fca-site-footer .footer-legal a{
  display:inline-flex;align-items:center;min-height:40px;
 }
}


/* ================= FCA mobile menu accordion =================
   The panels were permanently open: the theme sets display:grid!important
   per item with no toggle condition, so MMM's collapsed display:none never
   applied. That made the indicator arrow look dead and pushed the menu to
   ~1185px, hiding the first Services entries above the scroll. Gate display
   on .mega-toggle-on so the arrow actually opens and closes a section. */
@media only screen and (max-width:1024px){
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27382,#mega-menu-item-28013):is(#mega-menu-item-27382,#mega-menu-item-28013):not(.mega-toggle-on) > ul.mega-sub-menu,
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27389,#mega-menu-item-28022):is(#mega-menu-item-27389,#mega-menu-item-28022):not(.mega-toggle-on) > ul.mega-sub-menu,
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27499,#mega-menu-item-28010):is(#mega-menu-item-27499,#mega-menu-item-28010):not(.mega-toggle-on) > ul.mega-sub-menu{display:none!important}
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27382,#mega-menu-item-28013):is(#mega-menu-item-27382,#mega-menu-item-28013).mega-toggle-on > ul.mega-sub-menu,
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27389,#mega-menu-item-28022):is(#mega-menu-item-27389,#mega-menu-item-28022).mega-toggle-on > ul.mega-sub-menu,
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li:is(#mega-menu-item-27499,#mega-menu-item-28010):is(#mega-menu-item-27499,#mega-menu-item-28010).mega-toggle-on > ul.mega-sub-menu{display:block!important}
 #mega-menu-wrap-fca_mock_header #mega-menu-fca_mock_header > li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator{
  margin-left:auto!important;padding:0 4px!important;
  font-size:18px!important;line-height:1!important;
 }
}


/* ================= FCA mobile Apply Now =================
   Requested: the Apply Now CTA has to be visible on phones. It was hidden
   below 767px because the full-size pill overflowed the header and caused
   site-wide horizontal scroll, so it returns compact and the logo gives up
   some width to pay for it. Below 360px the phone circle drops out instead,
   since Apply Now is the CTA the business actually wants. */
@media (max-width:767px){
 .fca-site-header a.fca-btn-apply,
 .fca-site-header a.fca-btn-apply:link,
 .fca-site-header a.fca-btn-apply:visited{
  display:inline-flex!important;
  min-height:40px!important;
  padding:0 13px!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  box-shadow:0 6px 16px rgba(200,16,46,.28)!important;
 }
 .fca-logo img{width:120px!important;max-width:120px!important}
 .fca-header-brand{gap:9px}
 .fca-header-nav{gap:9px}
 .fca-header-call{width:40px;height:40px;flex:0 0 40px}
}
@media (max-width:359px){
 .fca-header-call{display:none!important}
}

/* fca-default-template-gap
 * Default-template pages (blog posts, UsersWP login/account, plain pages) get an
 * inline theme rule main#content{margin-top:120px} (80px under 767px). That was
 * clearance for the old Elementor header; the FCA header sits in normal flow, so
 * the margin only left a blank band under it. Specificity (1,2,2) beats the
 * theme's (1,0,1) regardless of load order. Redesigned pages are excluded. */
body:not(.fca-html-page) main#content.site-main{margin-top:24px}