/* ============================================================================
   JC&C ROOFING — HEADER & FOOTER
   wp-content/themes/myroofimprovement/assets/css/jcc-header-footer.css

   A real stylesheet, on purpose. Elementor inlined ~39 KB of generated CSS
   into every page's HTML; this file is cached once and reused, so the bytes
   leave the document instead of being re-sent on every request.

   HEADER = "Option C": white top bar, brand-blue nav row.
   The nav CANNOT be #001a36 — that is the hero colour, and the two merged
   into one dark slab with no boundary. #006098 is the brand blue and reads as
   its own band against the hero.

   Sizing chosen on the live tuner: logo 55px, row padding 16px, nav 55px,
   which renders the top row at 87px.

   Namespaces: .jcc-hd (header) · .jcc-ft (footer) · .jcc-nav (menu)
   · .jcc-modal (popup)
   No !important anywhere. Specificity only.
   ========================================================================= */

:root{
  --jcc-line-d:rgba(255,255,255,.12);   /* hairlines on the dark footer */
  --jcc-navy:#001a36;      /* hero colour — never use for the header */
  --jcc-navy-2:#0d3557;
  --jcc-blue:#006098;      /* the nav bar */
  --jcc-orange:#FF7A00;
  --jcc-ink:#0f2138;
  --jcc-muted:#5d6675;
  --jcc-line:#e3e8ef;
  --jcc-hd-logo:62px;
  --jcc-hd-pad:15px;
  --jcc-hd-nav:55px;
  --jcc-wrap:1200px;
  --jcc-ft-logo:132px;   /* footer logo height */
}

.jcc-hd,.jcc-hd *,.jcc-ft,.jcc-ft *,.jcc-modal,.jcc-modal *{box-sizing:border-box}

/* Keyboard users land here first. Visually hidden until focused. */
.jcc-skip{
  position:absolute;left:-9999px;top:0;z-index:100000;
  padding:12px 18px;background:var(--jcc-orange);color:#001a36;
  font-weight:900;text-decoration:none;border-radius:0 0 8px 0;
}
.jcc-skip:focus{left:0}

/* ============================ HEADER ==================================== */
.jcc-hd{
  position:relative;z-index:900;
  font-family:Outfit,Arial,Helvetica,sans-serif;
}
.jcc-hd-wrap{
  max-width:var(--jcc-wrap);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:20px;
}

/* ---- top row: white ---- */
.jcc-hd-top{background:#fff}
.jcc-hd-top .jcc-hd-wrap{
  padding-top:var(--jcc-hd-pad);padding-bottom:var(--jcc-hd-pad);
}

.jcc-hd-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
/* height:auto is NOT enough on its own here — the width/height attributes on
   the <img> set an intrinsic size, so width must be auto and height explicit
   or the square logo renders at full size. */
.jcc-hd-logo-img{display:block;width:auto;height:var(--jcc-hd-logo);max-width:100%}
.jcc-hd-logo-text{color:var(--jcc-ink);font-size:20px;font-weight:900;letter-spacing:-.03em}

.jcc-hd-quick{display:flex;align-items:center;gap:24px;margin-left:10px}
.jcc-hd .jcc-hd-quick-item{
  display:flex;align-items:center;gap:10px;
  color:var(--jcc-ink);text-decoration:none;background:transparent;border:0;
  font-family:inherit;cursor:pointer;padding:0;text-align:left;
}
.jcc-hd .jcc-hd-quick-item:hover{color:var(--jcc-blue)}
/* ⚠️ On the WHITE top bar a white focus ring is invisible. Everything in this
   row outlines in brand blue; only the blue nav row below uses white. */
.jcc-hd .jcc-hd-quick-item:focus-visible{outline:3px solid var(--jcc-blue);outline-offset:3px;border-radius:8px}
.jcc-hd-quick-item svg{
  width:36px;height:36px;flex:0 0 auto;padding:8px;border-radius:50%;
  background:#eef4f9;
  fill:none;stroke:var(--jcc-blue);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.jcc-hd-quick-item span{display:flex;flex-direction:column;font-size:13.5px;font-weight:800;line-height:1.3}
.jcc-hd-quick-item small{
  color:var(--jcc-muted);font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;
}

.jcc-hd .jcc-hd-phone{
  margin-left:auto;display:inline-flex;align-items:center;gap:9px;
  padding:12px 22px;border-radius:999px;
  background:var(--jcc-orange);color:#001a36;
  font-size:15px;font-weight:900;text-decoration:none;
  box-shadow:0 6px 18px rgba(255,122,0,.28);
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.jcc-hd .jcc-hd-phone:hover{background:#ff8f26;transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,122,0,.36)}
.jcc-hd .jcc-hd-phone:focus-visible{outline:3px solid var(--jcc-blue);outline-offset:3px}
.jcc-hd-phone svg{
  width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}

/* ---- hamburger — dark bars, because it now sits on white ---- */
.jcc-hd-burger{
  /* Was #f6f8fb with a hairline border: a pale grey box on a white bar, which
     on a phone read as nothing at all — Christian could not see it in the
     screenshot, and neither could I once I looked. Brand blue with a MENU
     label instead. An icon-only hamburger also tests badly with people over
     about fifty, which is a large share of homeowners replacing a roof. */
  display:none;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 13px;
  border:0;border-radius:10px;
  background:var(--jcc-blue);color:#fff;cursor:pointer;
  font:900 12px/1 inherit;letter-spacing:.06em;
}
.jcc-hd-burger::after{content:"MENU"}
.jcc-hd-burger:hover{background:#00507f}
.jcc-hd-burger:focus-visible{outline:3px solid var(--jcc-blue);outline-offset:2px}
.jcc-hd-burger[aria-expanded="true"]::after{content:"CLOSE"}
.jcc-hd-burger:focus-visible{outline:3px solid var(--jcc-blue);outline-offset:2px}
.jcc-hd-burger-bars{display:block;width:20px}
.jcc-hd-burger-bars i{background:#fff;
  display:block;height:2px;margin:4px 0;border-radius:2px;background:var(--jcc-ink);
  transition:transform .22s ease,opacity .22s ease;
}
.jcc-hd-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.jcc-hd-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.jcc-hd-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---- nav row: brand blue ---- */
.jcc-hd-navrow{background:var(--jcc-blue)}
.jcc-hd-navrow .jcc-hd-wrap{min-height:var(--jcc-hd-nav)}
.jcc-nav{width:100%}
.jcc-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;justify-content:center;align-items:stretch;gap:2px}
.jcc-nav-item{position:relative;display:flex;align-items:center;flex:0 0 auto}
.jcc-nav .jcc-nav-item > a{
  display:flex;align-items:center;flex:0 0 auto;
  /* nowrap is load-bearing, not cosmetic: without it the flex items shrink
     and multi-word labels break across lines, which is what made the nav row
     81px tall instead of 55px. Padding is 12px, not 15px, because the eight
     real labels need 1176px at 15px and the content column is only 1160px
     wide, so it never fitted at any screen size. At 12px they need
     1128px, leaving 32px of slack for font rendering differences on
     other machines. Measured on the live site, not estimated. */
  white-space:nowrap;padding:14px 12px;
  color:rgba(255,255,255,.94);
  font-size:14.5px;font-weight:800;letter-spacing:-.01em;text-decoration:none;
  border-radius:9px;transition:background .16s ease,color .16s ease;
}
.jcc-nav .jcc-nav-item > a:hover{background:rgba(255,255,255,.14);color:#fff}
.jcc-nav .jcc-nav-item > a:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.jcc-nav .is-current > a{background:rgba(255,255,255,.18);color:#fff}

.jcc-nav-toggle{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-left:-7px;
  border:0;border-radius:6px;background:transparent;color:rgba(255,255,255,.8);
  cursor:pointer;
}
.jcc-nav-toggle svg{
  width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s ease;
}
.jcc-nav-toggle:hover{color:#fff}
.jcc-nav-toggle:focus-visible{outline:2px solid #fff;outline-offset:1px}
.jcc-nav-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}

/* ---- dropdowns ---- */
.jcc-subnav{
  position:absolute;top:100%;left:0;z-index:950;min-width:252px;
  list-style:none;margin:0;padding:8px;
  background:#fff;border:1px solid var(--jcc-line);border-radius:14px;
  box-shadow:0 24px 64px rgba(0,26,54,.22);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
/* Hover for mice, focus-within for keyboards, .is-open for taps.
   All three, because any one alone excludes someone. */
.jcc-has-sub:hover > .jcc-subnav,
.jcc-has-sub:focus-within > .jcc-subnav,
.jcc-has-sub.is-open > .jcc-subnav{opacity:1;visibility:visible;transform:translateY(0)}

.jcc-subnav .jcc-nav-item{display:block}
.jcc-nav .jcc-subnav a{
  display:block;padding:11px 13px;border-radius:9px;
  color:var(--jcc-ink);font-size:14.5px;font-weight:700;
}
.jcc-nav .jcc-subnav a:hover{background:#f1f5f9;color:var(--jcc-blue)}
.jcc-nav .jcc-subnav a:focus-visible{outline:3px solid var(--jcc-blue);outline-offset:-3px}

/* ---- header: narrow desktop ----
   The hamburger has to take over BEFORE the nav runs out of room, not at some
   round number. Measured: the eight-item menu needs 1041px, and the wrap gives
   it (viewport - 40px). The eight real labels need 1128px at 12px
   padding, so the row needs a 1168px viewport; the switch is at 1200px.
   MUST MATCH the MOBILE constant in jcc-header-footer.js
   horizontally. That is why the mobile breakpoint below is 1100 and not the
   880 I first used — at 900px wide the page scrolled sideways. */
@media(max-width:1280px){
  .jcc-hd-quick-item small{display:none}
  .jcc-hd-quick{gap:16px}
}
@media(max-width:1160px){
  .jcc-hd-quick-item span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .jcc-hd-quick{gap:10px}
}

/* ---- header: mobile (hamburger) ----
   ⚠️ The matching query in jcc-header-footer.js must stay in step with this
   number, or the script will think it is on desktop while the CSS is in
   mobile mode. Both say 1100. */
@media(max-width:1200px){
  .jcc-hd-burger{display:flex}
  .jcc-hd-quick{display:none}
  .jcc-hd-logo-img{height:56px}
  .jcc-hd .jcc-hd-phone{margin-left:auto;padding:11px 16px;font-size:14px}
  .jcc-hd-wrap{gap:12px;padding:0 14px}
  .jcc-hd-top .jcc-hd-wrap{padding-top:12px;padding-bottom:12px}

  .jcc-hd-navrow{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .26s ease;
  }
  .jcc-hd-navrow > .jcc-hd-wrap{overflow:hidden;min-height:0;padding:0 14px}
  .jcc-hd.is-nav-open .jcc-hd-navrow{grid-template-rows:1fr}

  .jcc-nav-list{flex-direction:column;gap:0;padding:8px 0 16px}
  .jcc-nav-item{flex-wrap:wrap}
  .jcc-nav .jcc-nav-item > a{flex:1;padding:14px 8px;font-size:16px}
  .jcc-nav-toggle{width:44px;height:44px;margin:0}

  .jcc-subnav{
    position:static;width:100%;min-width:0;order:3;
    background:rgba(255,255,255,.08);border:0;box-shadow:none;border-radius:10px;
    margin:0 0 6px;padding:4px;
    display:none;opacity:1;visibility:visible;transform:none;
  }
  .jcc-has-sub.is-open > .jcc-subnav{display:block}
  /* hover must NOT open submenus on a touch screen */
  .jcc-has-sub:hover > .jcc-subnav{display:none}
  .jcc-has-sub.is-open:hover > .jcc-subnav{display:block}
  .jcc-nav .jcc-subnav a{color:rgba(255,255,255,.9);padding:12px}
  .jcc-nav .jcc-subnav a:hover{background:rgba(255,255,255,.12);color:#fff}
  .jcc-nav .jcc-subnav a:focus-visible{outline:3px solid #fff;outline-offset:-3px}
}

@media(max-width:420px){
  .jcc-hd .jcc-hd-phone span{display:none}
  .jcc-hd .jcc-hd-phone{padding:12px 14px}
  .jcc-hd-phone svg{width:19px;height:19px}
}

/* ============================ POPUP ===================================== */
/* Replaces Elementor Popup #24122, which dies with Elementor.
   The trigger is a real link to /contact-us/, so with JavaScript blocked the
   visitor still gets to the form — the popup is an enhancement, not a
   dependency. */
.jcc-modal{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;padding:20px;
  font-family:Outfit,Arial,Helvetica,sans-serif;
}
.jcc-modal[hidden]{display:none}
.jcc-modal-backdrop{
  position:absolute;inset:0;background:rgba(0,26,54,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.jcc-modal-panel{
  position:relative;width:100%;max-width:540px;max-height:92vh;
  display:flex;flex-direction:column;
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.jcc-modal-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:24px 26px 18px;border-bottom:1px solid var(--jcc-line);
}
.jcc-modal-eyebrow{
  margin:0 0 5px;color:var(--jcc-orange);font-size:10.5px;font-weight:900;
  letter-spacing:.13em;text-transform:uppercase;
}
.jcc-modal .jcc-modal-head h2{
  margin:0;color:var(--jcc-ink);font-family:inherit;
  font-size:21px;font-weight:900;letter-spacing:-.03em;line-height:1.25;
}
.jcc-modal-close{
  flex:0 0 auto;width:36px;height:36px;border:0;border-radius:50%;
  background:#f1f5f9;color:var(--jcc-muted);font-size:26px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.jcc-modal-close:hover{background:#e2e8f0}
.jcc-modal-close:focus-visible{outline:3px solid var(--jcc-blue);outline-offset:2px}
.jcc-modal-body{padding:20px 26px 24px;overflow-y:auto}
.jcc-modal-body > p{margin:0 0 16px;color:var(--jcc-muted);font-size:14.5px;line-height:1.6}
.jcc-modal-foot{
  margin:0;padding:14px 26px;border-top:1px solid var(--jcc-line);
  color:#8792a4;font-size:12.5px;line-height:1.5;
}
@media(max-width:600px){
  .jcc-modal{padding:0}
  .jcc-modal-panel{max-width:100%;max-height:100dvh;height:100dvh;border-radius:0}
}

@media(prefers-reduced-motion:reduce){
  .jcc-hd-navrow,.jcc-subnav,.jcc-hd-burger-bars i,
  .jcc-nav-toggle svg,.jcc-hd .jcc-hd-phone{transition:none}
  .jcc-hd .jcc-hd-phone:hover{transform:none}
}

@media print{
  .jcc-hd-quick,.jcc-hd-burger,.jcc-hd-navrow,.jcc-ft-social,.jcc-modal{display:none}
  .jcc-ft{background:none;color:#000}
}

/* ============================ FOOTER ==================================== */
.jcc-ft{
  font-family:Outfit,Arial,Helvetica,sans-serif;color:rgba(255,255,255,.72);
  background:linear-gradient(135deg,var(--jcc-navy) 0%,var(--jcc-navy-2) 60%,#00203f 100%);
  padding:64px 20px 0;
}
.jcc-ft-wrap{max-width:var(--jcc-wrap);margin:0 auto}

/* ---- intro ---- */
.jcc-ft-intro{
  max-width:940px;margin:0 auto 46px;text-align:center;
  padding-bottom:40px;border-bottom:1px solid var(--jcc-line-d);
}
.jcc-ft-intro p{margin:0 0 12px;font-size:15.5px;line-height:1.72;color:rgba(255,255,255,.72)}
.jcc-ft-intro p:last-child{margin-bottom:0}
.jcc-ft-intro strong{color:#fff;font-weight:800}

/* ---- reviews band (2026-09-21) ---- */
.jcc-ft-proof{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin:0 0 46px;padding:22px 26px;
  border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.jcc-ft .jcc-ft-proof-stars{margin:0;font-size:22px;letter-spacing:4px;line-height:1;color:#f5b400}
.jcc-ft-proof-text{flex:1 1 360px;margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.7)}
.jcc-ft-proof-text strong{display:block;font-size:18px;font-weight:900;letter-spacing:-.01em;color:#fff}
.jcc-ft-proof-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.jcc-ft .jcc-ft-proof-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 22px;
  border-radius:11px;background:var(--jcc-orange);color:var(--jcc-navy);font-size:15px;font-weight:900;text-decoration:none;
}
.jcc-ft .jcc-ft-proof-btn:hover{background:#ff8c1f}
.jcc-ft .jcc-ft-proof-link{color:#fff;font-size:14.5px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.jcc-ft .jcc-ft-proof-link:hover{color:var(--jcc-orange)}
.jcc-ft .jcc-ft-proof-btn:focus-visible,.jcc-ft .jcc-ft-proof-link:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
@media(max-width:760px){
  .jcc-ft-proof{padding:18px;margin-bottom:34px}
  .jcc-ft .jcc-ft-proof-btn{width:100%}
}

.jcc-ft-cols{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 28px;
  padding-bottom:48px;
}
.jcc-ft .jcc-ft-head{
  margin:0 0 16px;color:#fff;font-family:inherit;
  font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
}
.jcc-ft .jcc-ft-head-2{margin-top:30px}

.jcc-ft-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.jcc-ft .jcc-ft-list a{
  color:rgba(255,255,255,.72);font-size:14.5px;line-height:1.5;text-decoration:none;
}
.jcc-ft .jcc-ft-list a:hover{color:var(--jcc-orange)}
.jcc-ft .jcc-ft-list a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}

.jcc-ft-tag{
  margin:0 0 7px;color:rgba(255,255,255,.55);font-size:10.5px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;
}
.jcc-ft-addr{
  margin:0 0 8px;font-style:normal;font-size:14.5px;line-height:1.55;
  color:rgba(255,255,255,.72);
}
.jcc-ft .jcc-ft-addr a{color:inherit;text-decoration:none}
.jcc-ft .jcc-ft-addr a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.jcc-ft .jcc-ft-addr a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
.jcc-ft .jcc-ft-rating{display:block;width:-moz-fit-content;width:fit-content;margin:-14px 0 22px;color:#fff;font-size:14px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.jcc-ft .jcc-ft-rating:hover{color:var(--jcc-orange)}
.jcc-ft .jcc-ft-rating:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}
.jcc-ft-note{color:rgba(255,255,255,.5);font-size:13px}
.jcc-ft .jcc-ft-phone{
  display:inline-block;margin-bottom:22px;
  color:var(--jcc-orange);font-size:16px;font-weight:900;
  letter-spacing:-.01em;text-decoration:none;
}
.jcc-ft .jcc-ft-phone-lg{font-size:24px;margin-bottom:2px}
.jcc-ft .jcc-ft-phone:hover{color:#fff}
.jcc-ft .jcc-ft-phone:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
.jcc-ft-vanity{
  margin:0 0 18px;color:rgba(255,255,255,.45);
  font-size:11px;font-weight:800;letter-spacing:.12em;
}
.jcc-ft-contact li{font-size:14px;line-height:1.5}
.jcc-ft .jcc-ft-contact a{
  color:#fff;font-weight:800;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;
}
.jcc-ft .jcc-ft-contact a:hover{color:var(--jcc-orange)}
.jcc-ft-emergency{
  margin:18px 0 0;padding:11px 13px;border-radius:10px;
  background:rgba(255,122,0,.11);border:1px solid rgba(255,122,0,.3);
  color:rgba(255,255,255,.86);font-size:13px;font-weight:700;line-height:1.5;
}
.jcc-ft-plain{margin:10px 0 0;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.6)}

.jcc-ft-social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jcc-ft .jcc-ft-social a{
  display:inline-block;padding:7px 12px;border-radius:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.8);font-size:12.5px;font-weight:800;text-decoration:none;
}
.jcc-ft .jcc-ft-social a:hover{background:rgba(255,122,0,.16);border-color:var(--jcc-orange);color:#fff}
.jcc-ft .jcc-ft-social a:focus-visible{outline:2px solid #fff;outline-offset:2px}

.jcc-ft-plain-tight{margin-top:2px}

/* ---- service areas ----
   Nineteen internal links to the city pages, on every page of the site. This
   is the main feed into the service-area cluster. */
.jcc-ft-areas{padding:34px 0 30px;border-top:1px solid var(--jcc-line-d)}
.jcc-ft-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.jcc-ft .jcc-ft-chips a{
  display:inline-block;padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.8);font-size:13px;font-weight:700;text-decoration:none;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.jcc-ft .jcc-ft-chips a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.jcc-ft .jcc-ft-chips a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.jcc-ft .jcc-ft-chip-all{
  background:rgba(255,122,0,.14);border-color:rgba(255,122,0,.42);
  color:var(--jcc-orange);font-weight:800;
}
.jcc-ft .jcc-ft-chips a.jcc-ft-chip-all:hover{background:rgba(255,122,0,.24);border-color:var(--jcc-orange);color:#fff}

.jcc-ft-bottom{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:12px 24px;
  padding:22px 0 26px;border-top:1px solid var(--jcc-line-d);
}
.jcc-ft-copy{margin:0;font-size:13px;color:rgba(255,255,255,.55)}
.jcc-ft-legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.jcc-ft .jcc-ft-legal a{color:rgba(255,255,255,.55);font-size:13px;text-decoration:none}
.jcc-ft .jcc-ft-legal a:hover{color:#fff;text-decoration:underline}
.jcc-ft .jcc-ft-legal a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}

@media(max-width:1000px){
  .jcc-ft-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px}
}
@media(max-width:620px){
  .jcc-ft{padding-top:48px}
  .jcc-ft-intro{margin-bottom:34px;padding-bottom:28px;text-align:left}
  .jcc-ft-intro p{font-size:14.5px}
  .jcc-ft-areas{padding:26px 0 22px}
  .jcc-ft .jcc-ft-chips a{font-size:12.5px;padding:7px 12px}
  .jcc-ft-cols{grid-template-columns:1fr;gap:30px;padding-bottom:34px}
  .jcc-ft-bottom{flex-direction:column;align-items:flex-start}
}

@media(prefers-reduced-motion:reduce){
  .jcc-hd-navrow,.jcc-subnav,.jcc-hd-burger-bars i,
  .jcc-nav-toggle svg,.jcc-hd .jcc-hd-phone{transition:none}
  .jcc-hd .jcc-hd-phone:hover{transform:none}
}

@media print{
  .jcc-hd-quick,.jcc-hd-burger,.jcc-hd-navrow,.jcc-ft-social{display:none}
  .jcc-hd,.jcc-ft{background:none;color:#000}
}

/* ============================================================================
   STICKY BAR
   Fixed, so it is out of normal flow: it cannot move anything on the page and
   therefore cannot contribute to CLS. Hidden by transform rather than display,
   so showing it is a compositor-only animation with no layout or paint.

   z-index sits BELOW the four third-party widgets that already live on this
   site (GTranslate 999999, TrustedSite 1000003, chat 1200) — this bar is at
   the top and they are at the bottom, so they never meet, and staying under
   them means we can never cover a consent or chat control.
   ========================================================================== */
.jcc-sticky{
  position:fixed;top:0;left:0;right:0;z-index:1190;
  background:var(--jcc-blue);
  box-shadow:0 2px 14px rgba(0,0,0,.22);
  transform:translateY(-100%);
  /* visibility, not just transform: a transformed element is still focusable
     and still in the tab order. visibility:hidden takes it out of both, and
     delaying it by the length of the slide means the bar is still visible
     while it animates away. This is the belt to inert's braces, and it works
     with JavaScript disabled. */
  visibility:hidden;
  transition:transform .22s ease, visibility 0s linear .22s;
  will-change:transform;
}
.jcc-sticky.is-on{
  transform:translateY(0);
  visibility:visible;
  transition:transform .22s ease, visibility 0s linear 0s;
}
.jcc-sticky[aria-hidden="true"] .jcc-sticky-wrap{pointer-events:none}
.jcc-sticky.is-on .jcc-sticky-wrap{pointer-events:auto}

.jcc-sticky-wrap{
  max-width:var(--jcc-wrap);margin:0 auto;padding:0 20px;
  min-height:58px;display:flex;align-items:center;gap:10px;position:relative;
}

.jcc-sticky-logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.jcc-sticky-logo-img{display:block;width:auto;height:38px}
.jcc-sticky-logo-text{color:#fff;font-weight:900;font-size:17px;letter-spacing:-.02em}

/* Menu button — moves the real nav in here, never duplicates it */
.jcc-sticky-menu{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  margin-left:4px;padding:8px 12px;border-radius:9px;
  color:rgba(255,255,255,.94);text-decoration:none;
  font-size:14px;font-weight:800;letter-spacing:-.01em;
  transition:background .16s ease;
}
.jcc-sticky-menu:hover{background:rgba(255,255,255,.14);color:#fff}
.jcc-sticky-menu:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.jcc-sticky-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:14px}
.jcc-sticky-burger i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
.jcc-sticky-menu[aria-expanded="true"] .jcc-sticky-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.jcc-sticky-menu[aria-expanded="true"] .jcc-sticky-burger i:nth-child(2){opacity:0}
.jcc-sticky-menu[aria-expanded="true"] .jcc-sticky-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.jcc-sticky-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}

.jcc-sticky-btn{
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding:9px 13px;border-radius:9px;
  color:rgba(255,255,255,.94);text-decoration:none;white-space:nowrap;
  font-size:14px;font-weight:800;letter-spacing:-.01em;
  background:rgba(255,255,255,.12);
  transition:background .16s ease,color .16s ease;
}
.jcc-sticky-btn:hover{background:rgba(255,255,255,.2);color:#fff}
.jcc-sticky-btn:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.jcc-sticky-btn svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.jcc-sticky-btn.is-primary{background:var(--jcc-orange);color:#1a1000}
.jcc-sticky-btn.is-primary:hover{background:#ffb13d;color:#1a1000}
.jcc-sticky-btn.is-primary svg{stroke:none;fill:currentColor}
.jcc-sticky-btn.is-primary:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* The panel the real <nav> is moved into */
.jcc-sticky-panel{
  position:absolute;left:0;right:0;top:100%;
  background:var(--jcc-blue);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 24px rgba(0,0,0,.24);
  max-height:calc(100vh - 58px);overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.jcc-sticky-panel[hidden]{display:none}
/* Inside the panel the nav is always the stacked presentation, at every width */
.jcc-sticky-panel .jcc-nav{width:100%}
.jcc-sticky-panel .jcc-nav-list{flex-direction:column;justify-content:flex-start;gap:0;padding:8px 20px 16px}
.jcc-sticky-panel .jcc-nav-item{flex-wrap:wrap;width:100%}
.jcc-sticky-panel .jcc-nav-item > a{flex:1;padding:13px 8px;font-size:16px;white-space:normal}
.jcc-sticky-panel .jcc-nav-toggle{width:44px;height:44px;margin:0}
.jcc-sticky-panel .jcc-subnav{
  position:static;display:none;width:100%;
  background:rgba(0,0,0,.16);border-radius:10px;box-shadow:none;padding:4px 0;margin:2px 0 6px;
}
.jcc-sticky-panel .jcc-has-sub.is-open > .jcc-subnav{display:block}
.jcc-sticky-panel .jcc-subnav .jcc-nav-item > a{padding-left:20px;font-size:15px}

@media(max-width:700px){
  .jcc-sticky-wrap{gap:6px;padding:0 14px;min-height:54px}
  .jcc-sticky-logo-img{height:32px}
  .jcc-sticky-menu-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .jcc-sticky-menu{padding:9px 10px}
  .jcc-sticky-btn{padding:9px 10px;font-size:13px}
  .jcc-sticky-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .jcc-sticky-btn.is-primary span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .jcc-sticky-panel{max-height:calc(100vh - 54px)}
}
@media(max-width:380px){
  .jcc-sticky-btn.is-primary span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media(prefers-reduced-motion:reduce){
  .jcc-sticky{transition:none}
  .jcc-sticky-burger i{transition:none}
}

/* ---- footer logo -------------------------------------------------------- */
/* Restored. The Elementor footer opened with this and the first version of
   this build dropped it silently. Same attachment as the header logo, so it
   never needs separate maintenance. */
.jcc-ft-logo{display:block;width:-moz-fit-content;width:fit-content;margin:0 auto 26px}
.jcc-ft-logo-img{display:block;width:auto;height:var(--jcc-ft-logo)}
.jcc-ft-logo:focus-visible{outline:3px solid #fff;outline-offset:4px;border-radius:12px}
@media(max-width:700px){
  :root{--jcc-ft-logo:104px}
  .jcc-ft-logo{margin-bottom:20px}
}