/*
 * JCC unified header and editorial hierarchy — 2026-07-21
 * Canonical header: black bar, unfiltered logo, horizontal navigation,
 * active-page emphasis and filled grey rectangular consultation CTA.
 */

body > header,
body > header.jcc-header-scrolled,
body.jcc-experience-ready > header,
body.jcc-experience-ready > header.jcc-header-scrolled {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #171717 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) !important;
}

body header > div:first-child {
  width: 100% !important;
  max-width: 1240px !important;
  height: 88px !important;
  min-height: 88px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: clamp(18px, 2vw, 30px) !important;
}

body header > div:first-child > a:first-child {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  text-decoration: none !important;
}

body header > div:first-child > a:first-child img {
  display: block !important;
  width: auto !important;
  height: 54px !important;
  max-width: none !important;
  opacity: 1 !important;
  filter: none !important;
}

body header nav[id$="-desknav"] {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(18px, 2.1vw, 30px) !important;
  min-width: 0 !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

body header nav[id$="-desknav"] .jcc-practice-dropdown {
  white-space: normal !important;
}

body header nav[id$="-desknav"] > a,
body header nav[id$="-desknav"] .jcc-practice-trigger {
  color: #b7b7b7 !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}

body header nav[id$="-desknav"] > a[style*="color:#f6f6f6"],
body header nav[id$="-desknav"] .jcc-practice-trigger[style*="color:#f6f6f6"] {
  color: #f6f6f6 !important;
  font-weight: 600 !important;
}

body header nav[id$="-desknav"] > a:hover,
body header nav[id$="-desknav"] > a:focus-visible,
body header nav[id$="-desknav"] .jcc-practice-trigger:hover,
body header nav[id$="-desknav"] .jcc-practice-trigger:focus-visible {
  color: #f6f6f6 !important;
}

body header a[id$="-headcta"] {
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 14px 24px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #626262 !important;
  border: 1px solid #626262 !important;
  border-radius: 2px !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

body header a[id$="-headcta"]:hover,
body header a[id$="-headcta"]:focus-visible {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #444 !important;
  border-color: #444 !important;
}

body header .jcc-practice-dropdown,
body header .jcc-mobile-menu {
  background: #171717 !important;
}

/* Keep nested Articles links readable on the dark desktop mega-menu.
   The legacy editorial header rule targets every nav anchor and otherwise
   forces these nested links to the light-page ink colour. */
body header nav[id$="-desknav"] .jcc-articles-dropdown .jcc-mega-item {
  color: #d0d0d0 !important;
  -webkit-text-fill-color: #d0d0d0 !important;
}

body header nav[id$="-desknav"] .jcc-articles-dropdown .jcc-mega-item:hover,
body header nav[id$="-desknav"] .jcc-articles-dropdown .jcc-mega-item:focus-visible,
body header nav[id$="-desknav"] .jcc-articles-dropdown > div:last-child a {
  color: #f3f3f3 !important;
  -webkit-text-fill-color: #f3f3f3 !important;
}

/* Apply the same readable palette to the nested mobile Articles links. */
body header .jcc-mobile-menu .jcc-mobile-articles-nav > div > a {
  color: #d0d0d0 !important;
  -webkit-text-fill-color: #d0d0d0 !important;
}

body header .jcc-mobile-menu .jcc-mobile-articles-nav > div > a:first-child {
  color: #f3f3f3 !important;
  -webkit-text-fill-color: #f3f3f3 !important;
}
/* Apply the readiness-article editorial hierarchy to every page without
   changing page-specific colours, margins or content. */
body main h1,
body main h2,
body main h3 {
  font-family: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif !important;
  font-weight: 400 !important;
  text-wrap: balance;
}

body main h1 {
  font-size: clamp(42px, 6vw, 76px) !important;
  line-height: .98 !important;
  letter-spacing: -.035em !important;
}

body main h2 {
  font-size: clamp(32px, 4.2vw, 52px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.02em !important;
}

body main h3 {
  font-family: 'Libre Caslon Text', Georgia, serif !important;
  font-size: 21px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
}

body main p,
body main li {
  text-wrap: pretty;
}

@media (max-width: 1040px) {
  body header > div:first-child {
    height: auto !important;
    min-height: 88px !important;
    padding: 17px 24px !important;
  }

  body header > div:first-child > a:first-child img {
    height: 54px !important;
  }

  body header nav[id$="-desknav"],
  body header a[id$="-headcta"] {
    display: none !important;
  }

  body header [data-jcc-mobile-toggle] {
    display: inline-flex !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin-left: auto !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 680px) {
  body main h1 {
    font-size: clamp(38px, 12vw, 56px) !important;
  }

  body main h2 {
    font-size: clamp(30px, 9vw, 44px) !important;
  }

  body main h3 {
    font-size: 20px !important;
  }
}
/* JCC final specificity lock: outrank the older current-grey treatment. */
html body.jcc-grey-return header,
html body.jcc-grey-return header.jcc-header-scrolled,
html body.jcc-grey-return.jcc-experience-ready header,
html body.jcc-grey-return.jcc-experience-ready header.jcc-header-scrolled {
  background: #171717 !important;
  border-bottom-color: rgba(255,255,255,.05) !important;
  box-shadow: none !important;
}
html body.jcc-grey-return header > div:first-child,
html body.jcc-grey-return.jcc-experience-ready header > div:first-child {
  height: 88px !important;
  min-height: 88px !important;
  max-width: 1240px !important;
  padding: 0 32px !important;
}
html body.jcc-grey-return header > div:first-child > a:first-child img,
html body.jcc-grey-return.jcc-experience-ready header > div:first-child > a:first-child img {
  width: auto !important;
  height: 54px !important;
  max-width: none !important;
  opacity: 1 !important;
  filter: none !important;
}
html body.jcc-grey-return header nav[id$="-desknav"],
html body.jcc-grey-return.jcc-experience-ready header nav[id$="-desknav"] {
  display: flex !important;
  gap: clamp(18px,2.1vw,30px) !important;
  font-size: 14px !important;
}
html body #jccHome-headcta,
html body #jccPA-headcta,
html body #jccAbout-headcta,
html body.jcc-grey-return #jccHome-headcta,
html body.jcc-grey-return #jccPA-headcta,
html body.jcc-grey-return #jccAbout-headcta,
html body.jcc-page-landing #jccHome-headcta,
html body.jcc-page-landing #jccPA-headcta,
html body.jcc-page-landing #jccAbout-headcta {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 14px 24px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #626262 !important;
  border: 1px solid #626262 !important;
  border-radius: 2px !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
}
html body.jcc-grey-return main [class] h1,
html body.jcc-page-landing main [class] h1,
html body.jcc-page-support main [class] h1 {
  font-size: clamp(42px,6vw,76px) !important;
  line-height: .98 !important;
  letter-spacing: -.035em !important;
}
html body.jcc-grey-return main [class] h2,
html body.jcc-page-landing main [class] h2,
html body.jcc-page-support main [class] h2 {
  font-size: clamp(32px,4.2vw,52px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.02em !important;
}
html body.jcc-grey-return main [class] h3,
html body.jcc-page-landing main [class] h3,
html body.jcc-page-support main [class] h3 {
  font-size: 21px !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
}
@media (max-width:1040px) {
  html body.jcc-grey-return header > div:first-child,
  html body.jcc-grey-return.jcc-experience-ready header > div:first-child {
    height: auto !important;
    min-height: 88px !important;
    padding: 17px 24px !important;
  }
  html body #jccHome-headcta,
  html body #jccPA-headcta,
  html body #jccAbout-headcta { display: none !important; }
}
/* JCC final mobile specificity lock. */
@media (max-width:1040px) {
  html body.jcc-grey-return header nav[id$="-desknav"],
  html body.jcc-grey-return.jcc-experience-ready header nav[id$="-desknav"] { display: none !important; }
  html body.jcc-grey-return header [data-jcc-mobile-toggle],
  html body.jcc-grey-return.jcc-experience-ready header [data-jcc-mobile-toggle] { display: inline-flex !important; }
  html body.jcc-grey-return main [class] h1,
  html body.jcc-page-landing main [class] h1,
  html body.jcc-page-support main [class] h1 { font-size: clamp(38px,12vw,56px) !important; }
  html body.jcc-grey-return main [class] h2,
  html body.jcc-page-landing main [class] h2,
  html body.jcc-page-support main [class] h2 { font-size: clamp(30px,9vw,44px) !important; }
  html body.jcc-grey-return main [class] h3,
  html body.jcc-page-landing main [class] h3,
  html body.jcc-page-support main [class] h3 { font-size: 20px !important; }
}
/* Homepage live Google-reviews panel: preserve light copy on charcoal. */
html body.jcc-page-home main .jcc-google-review-copy p {
  color: #f2f2f2 !important;
  -webkit-text-fill-color: #f2f2f2;
}
html body.jcc-page-home main .jcc-google-review-copy a,
html body.jcc-page-home main .jcc-google-review-copy a:visited {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  text-decoration-color: rgba(255, 255, 255, .78) !important;
}
html body.jcc-page-home main .jcc-google-review-copy a:hover,
html body.jcc-page-home main .jcc-google-review-copy a:focus-visible {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  text-decoration-color: #ffffff !important;
}
/* Site-wide compact footer - preserve the four-column JCC footer with tighter rhythm. */
html body footer {
  background: #171717 !important;
}
html body footer .jcc-home-footer-grid.jcc-home-footer-grid {
  padding: 56px 64px 0 !important;
  gap: 28px clamp(32px, 4vw, 56px) !important;
  align-items: start !important;
}
html body footer .jcc-home-footer-grid .jcc-footer-contact > img,
html body footer .jcc-home-footer-grid > div:first-child > img {
  height: 96px !important;
  margin-bottom: 24px !important;
}
html body footer .jcc-footer-contact > p:first-of-type,
html body footer .jcc-home-footer-grid > div:first-child > p:first-of-type {
  margin-bottom: 16px !important;
}
html body footer .jcc-footer-contact p,
html body footer .jcc-footer-contact a,
html body footer .jcc-home-footer-grid > div:first-child p,
html body footer .jcc-home-footer-grid > div:first-child a {
  line-height: 1.5 !important;
}
html body footer .jcc-home-footer-grid h2 {
  margin-bottom: 18px !important;
  font-size: 12px !important;
  letter-spacing: .14em !important;
}
html body footer .jcc-home-footer-grid ul {
  gap: 7px !important;
  line-height: 1.4 !important;
}
html body footer .jcc-home-footer-bottom.jcc-home-footer-bottom {
  margin-top: 36px !important;
  padding: 18px 64px 20px !important;
  gap: 8px 24px !important;
}
@media (max-width: 1040px) {
  html body footer .jcc-home-footer-grid.jcc-home-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    padding: 48px 32px 0 !important;
    gap: 28px 32px !important;
  }
  html body footer .jcc-home-footer-grid > div:first-child,
  html body footer .jcc-home-footer-grid > div:nth-child(2) {
    grid-column: 1 / -1 !important;
  }
  html body footer .jcc-home-footer-bottom.jcc-home-footer-bottom {
    margin-top: 30px !important;
    padding: 18px 32px 22px !important;
  }
}
@media (max-width: 720px) {
  html body footer .jcc-home-footer-grid.jcc-home-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    padding: 40px 24px 0 !important;
  }
  html body footer .jcc-home-footer-grid .jcc-footer-contact > img,
html body footer .jcc-home-footer-grid > div:first-child > img {
    height: 64px !important;
    margin-bottom: 18px !important;
  }
  html body footer .jcc-home-footer-grid h2 {
    margin-bottom: 12px !important;
  }
  html body footer .jcc-home-footer-bottom.jcc-home-footer-bottom {
    margin-top: 26px !important;
    padding: 16px 24px 22px !important;
  }
}

/* JCC hero spacing, alignment and contrast correction 2026-07-21. */
body main .readiness-hero,
body main .jcc-rw-hero,
body main .image-hero,
body main .jcc-home-redesign-hero,
body main section[data-screen-label*="hero" i] {
  text-align: left !important;
}

body main .readiness-hero .readiness-answer,
body main .jcc-rw-hero .jcc-rw-hero-lead,
body main .image-hero .lead,
body main .jcc-home-redesign-hero .jcc-hero-lead,
body main section[data-screen-label*="hero" i] h1 + p {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
}

body main .readiness-hero {
  min-height: 0 !important;
  align-items: start !important;
}
body main .readiness-hero .readiness-hero__content {
  padding-top: 72px !important;
  padding-bottom: 68px !important;
}
body.jcc-page-support main .readiness-hero .readiness-breadcrumb,
body.jcc-page-support main .readiness-hero .readiness-breadcrumb a,
body.jcc-page-support main .readiness-hero .readiness-kicker,
body.jcc-page-support main .readiness-hero .readiness-answer {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.58) !important;
}

@media (min-width: 761px) {
  body main .jcc-rw-hero {
    min-height: 520px !important;
  }
  body main .jcc-rw-hero .jcc-rw-hero-grid {
    min-height: inherit !important;
    align-items: flex-start !important;
  }
  body main .jcc-rw-hero .jcc-rw-hero-copy {
    padding-top: 72px !important;
    padding-bottom: 76px !important;
  }
  body main .jcc-rw-hero .jcc-rw-hero-visual img {
    object-fit: cover !important;
  }
}

body.jcc-page-support main .image-hero {
  min-height: clamp(520px, 62vh, 680px) !important;
  padding: 0 !important;
}
body.jcc-page-support main .image-hero .hero-grid {
  min-height: inherit !important;
  align-items: flex-start !important;
}
body.jcc-page-support main .image-hero .hero-copy {
  margin-top: 0 !important;
  padding-top: 80px !important;
  padding-bottom: 72px !important;
}

@media (min-width: 901px) {
  body.jcc-page-home main .jcc-home-redesign-hero .jcc-hero-grid {
    align-items: flex-start !important;
    padding-top: 72px !important;
    padding-bottom: 76px !important;
  }
  body.jcc-page-home main .jcc-home-redesign-hero .jcc-home-hero-copy,
  body.jcc-page-home main .jcc-home-redesign-hero .jcc-hero-grid > div:first-child {
    align-self: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

body main section[data-screen-label*="hero" i] > div[style*="position:relative"] {
  min-height: 0 !important;
  padding: 72px 32px 76px !important;
  align-items: flex-start !important;
}

@media (max-width: 760px) {
  body main .readiness-hero .readiness-hero__content {
    padding-top: 52px !important;
    padding-bottom: 56px !important;
  }
  body main .jcc-rw-hero .jcc-rw-hero-copy {
    padding-top: 36px !important;
    padding-bottom: 52px !important;
  }
  body.jcc-page-support main .image-hero {
    min-height: 0 !important;
  }
  body.jcc-page-support main .image-hero .hero-grid {
    min-height: 0 !important;
  }
  body.jcc-page-support main .image-hero .hero-copy {
    padding-top: 56px !important;
    padding-bottom: 58px !important;
  }
  body main section[data-screen-label*="hero" i] > div[style*="position:relative"] {
    min-height: 0 !important;
    padding: 54px 24px 58px !important;
    align-items: flex-start !important;
  }
}

/* Preserve the approved white-and-grey JCC artwork in every footer.
   The home experience layer previously recoloured the logo beige. */
html body footer .jcc-home-footer-grid .jcc-footer-contact > img[src*="jcc-logo"],
html body footer .jcc-home-footer-grid > div:first-child > img[src*="jcc-logo"],
html body.jcc-page-home footer .jcc-footer-contact > img[src*="jcc-logo"] {
  filter: none !important;
  opacity: 1 !important;
}