/* JCC supporting-page editorial system, 2026-07-19. */
body.jcc-page-support {
  --jcc-support-ink: #222;
  --jcc-support-charcoal: #303030;
  --jcc-support-deep: #171717;
  --jcc-support-body: #505050;
  --jcc-support-muted: #777;
  --jcc-support-rule: #d0d0d0;
  --jcc-support-paper: #f4f4f4;
  --jcc-support-white: #fff;
  color: var(--jcc-support-ink);
  background: var(--jcc-support-paper);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}

body.jcc-page-support main { overflow: hidden; }
body.jcc-page-support main h1,
body.jcc-page-support main h2,
body.jcc-page-support main h3 {
  font-family: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, serif;
  font-weight: 400;
  letter-spacing: -.025em;
  text-wrap: balance;
}
body.jcc-page-support main h1 { font-size: clamp(52px, 6.2vw, 86px); line-height: 1.01; }
body.jcc-page-support main h2 { font-size: clamp(34px, 4vw, 50px); line-height: 1.08; }
body.jcc-page-support main h3 { font-size: clamp(21px, 2.2vw, 28px); line-height: 1.2; }
body.jcc-page-support main p,
body.jcc-page-support main li { color: var(--jcc-support-body); line-height: 1.72; text-wrap: pretty; }
body.jcc-page-support main p { max-width: 72ch; }

body.jcc-page-support .image-hero {
  position: relative;
  min-height: clamp(560px, 72vh, 780px);
  color: #fff;
  background-color: var(--jcc-support-deep);
  background-image: linear-gradient(90deg, rgba(12,12,12,.88), rgba(12,12,12,.55) 52%, rgba(12,12,12,.18)), var(--hero-image);
  background-position: center;
  background-size: cover;
}
body.jcc-page-support .image-hero::after {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.08);
  content: '';
  pointer-events: none;
}
body.jcc-page-support .image-hero .hero-grid { position: relative; z-index: 1; align-items: flex-end; min-height: inherit; }
body.jcc-page-support .image-hero .hero-copy { max-width: 760px; padding-top: clamp(92px, 10vw, 140px); padding-bottom: clamp(72px, 9vw, 116px); }
body.jcc-page-support .image-hero h1,
body.jcc-page-support .image-hero p { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
body.jcc-page-support .eyebrow,
body.jcc-page-support .jcc-support-kicker {
  color: #c7c7c7 !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

body.jcc-page-support .button,
body.jcc-page-support main a.jcc-support-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 24px;
  border-radius: 999px !important;
  font-family: 'Hanken Grotesk', system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body.jcc-page-support .section { padding-top: clamp(72px, 8vw, 108px); padding-bottom: clamp(72px, 8vw, 108px); }
body.jcc-page-support .section:nth-of-type(even) { background: var(--jcc-support-white); }
body.jcc-page-support .section:nth-of-type(odd) { background: var(--jcc-support-paper); }
body.jcc-page-support .section .wrap { width: min(100% - 64px, 1120px); }
body.jcc-page-support .section .wrap > h2,
body.jcc-page-support .section .wrap > p,
body.jcc-page-support .section .wrap > ul:not(.card-grid):not(.link-list) { max-width: 820px; }

.jcc-support-visual-band { padding: clamp(66px, 8vw, 104px) 0; background: var(--jcc-support-deep); }
.jcc-support-visual-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); width: min(100% - 64px, 1240px); margin: 0 auto; border: 1px solid #4b4b4b; }
.jcc-support-visual-primary,
.jcc-support-visual-copy { min-width: 0; margin: 0; }
.jcc-support-visual-primary { display: flex; min-height: 440px; background: #252525; }
.jcc-support-visual-primary img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; filter: grayscale(1) contrast(1.03) brightness(.86); }
body.page-team .jcc-support-visual-primary { align-items: center; max-height: 720px; }
body.page-team .jcc-support-visual-primary img { height: 720px; max-height: 720px; object-fit: contain; filter: none; }
.jcc-support-visual-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(34px, 5vw, 70px); background: #f4f4f4; }
.jcc-support-visual-copy h2 { margin: 16px 0 22px; color: var(--jcc-support-ink) !important; }
.jcc-support-visual-copy p { margin: 0; color: var(--jcc-support-body) !important; }
.jcc-support-visual-copy > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  box-sizing: border-box;
  width: var(--jcc-brand-cta-width, 320px);
  max-width: 100%;
  min-height: 56px;
  margin-top: 30px;
  padding: 0 16px;
  gap: 12px;
  color: var(--jcc-support-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.jcc-support-visual-copy > a > span[aria-hidden="true"] {
  flex: 0 0 auto;
  line-height: 1;
}

.jcc-support-copy { padding: clamp(72px, 8vw, 108px) 0; background: var(--jcc-support-white); border-top: 1px solid var(--jcc-support-rule); }
.jcc-support-copy > div { width: min(100% - 64px, 1120px); margin: 0 auto; }
.jcc-support-copy .jcc-support-copy-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 96px); align-items: start; }
.jcc-support-copy .jcc-support-copy-body { max-width: 760px; }
.jcc-support-copy p { margin: 0 0 18px; }
.jcc-support-copy ul { display: grid; gap: 12px; margin: 26px 0 0; padding-left: 22px; }
.jcc-support-copy aside { padding: 28px; background: var(--jcc-support-paper); border-top: 3px solid #777; }
.jcc-support-copy aside p { margin: 0; font-size: 15px; }

body.jcc-page-support .info-card,
body.jcc-page-support .card-grid > article { background: #fff; border: 1px solid var(--jcc-support-rule); box-shadow: none; }
body.jcc-page-support .final-focus { color: #fff; background: var(--jcc-support-charcoal); }
body.jcc-page-support .final-focus h2 { color: #f6f6f6 !important; }
body.jcc-page-support .final-focus p { color: #d6d6d6 !important; }
body.jcc-page-support .final-focus .button { color: #111 !important; background: #f2f2f2 !important; border-color: #f2f2f2 !important; }

@media (max-width: 820px) {
  .jcc-support-visual-wrap,
  .jcc-support-copy .jcc-support-copy-grid { grid-template-columns: 1fr; }
  .jcc-support-visual-primary { min-height: 0; }
  .jcc-support-visual-primary img { height: auto; }
  body.page-team .jcc-support-visual-primary { max-height: none; }
  body.page-team .jcc-support-visual-primary img { height: auto; max-height: none; }
  .jcc-support-visual-copy { padding: 38px 30px 44px; }
}

@media (max-width: 640px) {
  body.jcc-page-support main h1 { font-size: clamp(44px, 13vw, 64px); }
  body.jcc-page-support main h2 { font-size: clamp(32px, 9vw, 44px); }
  body.jcc-page-support .image-hero { min-height: 0; padding-top: 0; background-image: linear-gradient(rgba(12,12,12,.68), rgba(12,12,12,.84)), var(--hero-image); background-size: cover; }
  body.jcc-page-support .image-hero .hero-grid { min-height: 560px; }
  body.jcc-page-support .image-hero .hero-copy { padding: 92px 0 58px; }
  body.jcc-page-support .section .wrap,
  .jcc-support-visual-wrap,
  .jcc-support-copy > div { width: min(100% - 40px, 1120px); }
  body.jcc-page-support .hero-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  body.jcc-page-support .hero-actions .button { width: 100%; }
  .jcc-support-visual-band { padding: 52px 0; }
  .jcc-support-visual-copy { padding: 32px 24px 38px; }
  .jcc-support-copy aside { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  body.jcc-page-support *,
  body.jcc-page-support *::before,
  body.jcc-page-support *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}


/* JCC source cards and responsive video library, 2026-07-19. */
.jcc-source-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:34px; padding:1px; background:#d8d8d8; }
.jcc-source-card { display:flex; flex-direction:column; min-width:0; padding:clamp(26px,3vw,36px); background:#fff; }
.jcc-source-card h3,.jcc-video-copy h3,.jcc-channel-callout h3 { margin:0 0 16px; color:#222; }
.jcc-source-card p:not(.jcc-source-card-label),.jcc-video-copy p:not(.jcc-source-card-label) { margin:0 0 24px; }
.jcc-source-card a,.jcc-video-copy a { margin-top:auto; color:#333; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; text-underline-offset:5px; }
.jcc-source-card-label { margin:0 0 14px!important; color:#686868!important; font-size:11px!important; font-weight:700; letter-spacing:.15em; line-height:1.5!important; text-transform:uppercase; }
.jcc-video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:38px; }
.jcc-video-card { overflow:hidden; border:1px solid #d0d0d0; background:#fff; }
.jcc-video-frame { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#171717; }
.jcc-video-frame iframe { position:absolute; inset:0; display:block; width:100%; height:100%; border:0; }
.jcc-video-copy { display:flex; flex-direction:column; min-height:260px; padding:28px; }
.jcc-channel-callout { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:28px; padding:28px; border:1px solid #d0d0d0; background:#fff; }
.jcc-channel-callout h3 { margin:0; }
@media(max-width:900px){.jcc-source-card-grid{grid-template-columns:1fr 1fr}.jcc-video-grid{grid-template-columns:1fr}}
@media(max-width:640px){.jcc-source-card-grid{grid-template-columns:1fr}.jcc-video-copy{min-height:0;padding:24px}.jcc-channel-callout{align-items:stretch;flex-direction:column}.jcc-channel-callout .button{width:100%}}
@media (max-width: 640px) {
  body.page-contact .readiness-cta-actions .button {
    padding-left: 12px;
    padding-right: 12px;
    white-space: nowrap;
    font-size: 11px !important;
    letter-spacing: .06em !important;
  }
}