/* JCC canonical visual band.
   Values lifted from the approved Expat Divorce cascade (commit 4ad25c5d) after
   resolving later overrides, and unscoped from body.jcc-expat-engagement so any
   route can compose one. Expat Divorce keeps its own stylesheet and is not
   styled by this file. */

.jcc-cband {
  --jcc-cb-charcoal: #202020;
  --jcc-cb-ivory: #f6f2ea;
  --jcc-cb-gold: #dda646;
  --jcc-cb-forest: #355b4a;

  position: relative;
  min-height: 500px;
  overflow: hidden;
  color: var(--jcc-cb-ivory);
  background: var(--jcc-cb-charcoal);
  border: 1px solid rgba(32, 32, 32, .18);
  box-shadow: 0 16px 40px rgba(32, 32, 32, .1);
}

main .jcc-cband--full-bleed {
  width: 100vw;
  max-width: none;
  min-height: 500px;
  margin: 0 calc(50% - 50vw) clamp(38px, 5vw, 72px);
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.jcc-cband picture,
.jcc-cband picture::after { position: absolute; inset: 0; }

.jcc-cband picture::after {
  content: "";
  display: block;
  background: linear-gradient(0deg, rgba(18, 18, 18, .95) 0%, rgba(18, 18, 18, .86) 34%, rgba(18, 18, 18, .58) 64%, rgba(18, 18, 18, .26) 100%);
}

.jcc-cband img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--jcc-cb-position-desktop, 50% 50%);
  filter: saturate(.72) contrast(1.05);
}

.jcc-cband__content {
  position: absolute;
  z-index: 1;
  display: grid;
  right: clamp(28px, 7vw, 112px);
  bottom: clamp(42px, 7vw, 96px);
  left: clamp(28px, 7vw, 112px);
  max-width: 920px;
}

main .jcc-cband__content > .jcc-cband__eyebrow {
  display: block;
  max-width: 58ch;
  margin: 0 0 14px;
  color: var(--jcc-cb-gold);
  font: 700 11px/1.25 "Hanken Grotesk", Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

main .jcc-cband__content > h2 {
  display: block !important;
  margin: 0 !important;
  max-width: 21ch !important;
  color: var(--jcc-cb-ivory) !important;
  font-family: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif !important;
  font-size: var(--jcc-t-display, clamp(30px, 3.1vw, 44px)) !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance !important;
}

main .jcc-cband__content > p {
  display: block !important;
  max-width: 58ch !important;
  margin: 18px 0 0 !important;
  color: var(--jcc-cb-ivory) !important;
  font: 400 clamp(17px, 1.8vw, 24px)/1.45 "Hanken Grotesk", Arial, sans-serif !important;
}

/* Editorial link, never a filled consultation button. */
main .jcc-cband__content > a,
main .jcc-cband__content > a:hover,
main .jcc-cband__content > a:focus-visible {
  justify-self: start;
  margin-top: 24px;
  padding: 0 0 5px;
  color: var(--jcc-cb-ivory);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--jcc-cb-gold);
  border-radius: 0;
  font: 700 12px/1.25 "Hanken Grotesk", Arial, sans-serif;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

main .jcc-cband__content > a:focus-visible {
  outline: 3px solid var(--jcc-cb-gold);
  outline-offset: 3px;
}

/* Inline links inside the standfirst stay gold, never browser blue. */
main .jcc-cband__content p a,
main .jcc-cband__content p a:visited {
  color: var(--jcc-cb-gold) !important;
  -webkit-text-fill-color: var(--jcc-cb-gold) !important;
  text-decoration-color: rgba(221, 166, 70, .55);
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  .jcc-cband img { object-position: var(--jcc-cb-position-mobile, var(--jcc-cb-position-desktop, 50% 50%)); }
  .jcc-cband__content { right: 24px; bottom: 78px; left: 24px; }
}

/* Reading section carrying content displaced from a converted band.
   Width matches the .jcc-support-band__details rail it replaces (820px, centred). */
main .jcc-cband-followup { display: block; }

main .jcc-cband-followup__inner {
  box-sizing: border-box;
  width: min(100%, 820px);
  margin: 0 auto clamp(38px, 5vw, 72px);
  padding: 0 32px;
}

main .jcc-cband-followup__eyebrow {
  margin: 0 0 14px;
  color: #626262;
  font: 700 12px/1.25 "Hanken Grotesk", Arial, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}

@media (max-width: 760px) { main .jcc-cband-followup__inner { padding: 0 24px; } }
@media (max-width: 390px) { main .jcc-cband-followup__inner { padding: 0 20px; } }

/* ---------- Specificity floor ----------
   body.page-articles main h2 in jcc-experience.css repaints every article
   heading with !important at (0,0,2,2), which outranks the band rules above
   and leaves the heading charcoal on the photo. Quadrupled-id :is() blocks
   match the house pattern used in jcc-brand-system.css and jcc-prefooter-
   alignment.css rather than inventing a new escalation. */

html body main .jcc-cband .jcc-cband__content
:is(#jcc-cband-specificity#jcc-cband-specificity#jcc-cband-specificity#jcc-cband-specificity, h2) {
  color: var(--jcc-cb-ivory) !important;
  font-family: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif !important;
  font-size: var(--jcc-t-display, clamp(30px, 3.1vw, 44px)) !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: -.025em !important;
  margin: 0 !important;
  max-width: 21ch !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

html body main .jcc-cband .jcc-cband__content
:is(#jcc-cband-specificity#jcc-cband-specificity#jcc-cband-specificity#jcc-cband-specificity, .jcc-cband__eyebrow) {
  color: var(--jcc-cb-gold) !important;
}

html body main .jcc-cband .jcc-cband__content
:is(#jcc-cband-specificity#jcc-cband-specificity#jcc-cband-specificity#jcc-cband-specificity, p) {
  color: var(--jcc-cb-ivory) !important;
}

/* Displaced reading copy keeps the measure and rhythm it had inside the band. */
html body main .jcc-cband-followup__body {
  max-width: 68ch;
  margin: 0 0 18px;
  line-height: 1.68;
}
html body main .jcc-cband-followup__body:last-of-type { margin-bottom: 22px; }
html body main .jcc-cband-followup h2 { margin-top: 0; }

/* ---------- Band overlay: same contract as the hero ----------
   Lifted from the architectural hero on /adoption-lawyer-singapore/, which is
   the treatment the client approved:

     linear-gradient(90deg, rgba(12,12,12,.80) 0%, rgba(12,12,12,.58) 46%,
                            rgba(12,12,12,.14) 78%, rgba(12,12,12,.04) 100%)

   The hero carries its text at mid height, so a horizontal fade alone is
   enough. A band carries its text at the bottom, and on a narrow viewport the
   horizontal fade has nothing left to give by the time the text reaches the
   lower edge. Measured across ten routes with the hero fade alone: ten
   failures at 390px, worst 1.91:1. Adding a bottom-up fade at 640px and below
   clears every one, minimum 6.39:1 for the headline and 5.52:1 for the label,
   and leaves the desktop treatment exactly as the hero renders it. */

.jcc-cband picture::after {
  background:
    linear-gradient(90deg,
      rgba(12, 12, 12, .80) 0%,
      rgba(12, 12, 12, .58) 46%,
      rgba(12, 12, 12, .14) 78%,
      rgba(12, 12, 12, .04) 100%);
}

@media (max-width: 640px) {
  .jcc-cband picture::after {
    background:
      linear-gradient(0deg,
        rgba(12, 12, 12, .88) 0%,
        rgba(12, 12, 12, .70) 42%,
        rgba(12, 12, 12, .30) 72%,
        rgba(12, 12, 12, .10) 100%),
      linear-gradient(90deg,
        rgba(12, 12, 12, .80) 0%,
        rgba(12, 12, 12, .58) 46%,
        rgba(12, 12, 12, .14) 78%,
        rgba(12, 12, 12, .04) 100%);
  }
}

/* ---------- JCC_CBAND_PICTURE_BOX_20260818 ----------
   The <picture> inside a converted band still carries the class
   .jcc-support-band__media from the module it was composed out of.
   jcc-supporting-visual-v1.css gives that class aspect-ratio: 4/3, a 1px
   border, a 10px radius and a drop shadow. Those beat the bare inset: 0
   above, because inset alone does not state a size, so aspect-ratio resolves
   the height instead.

   Measured on /adoption-lawyer-singapore/ band 1:
     1440px  figure 1440x500  picture 1440x1080   crop taken from the wrong box
      390px  figure  390x500  picture  390x293    207px of bare charcoal below,
                                                  with the old border and radius
                                                  visible around the photo

   Stating the box explicitly makes the band independent of whatever classes
   the source module left behind. */

/* The box reset applies to the <picture> only. The ::after pseudo element
   carries the gradient defined above, so it must not have its background
   cleared here. */
.jcc-cband picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.jcc-cband picture::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- JCC_CBAND_ALIGN_TO_CONTAINER_20260818 ----------
   The band's own inset was clamp(28px, 7vw, 112px), which put its text at
   100px at 1440px while the reading column starts at 160px. Two different left
   axes on the same page. The band now shares the sitewide container, so the
   eyebrow, headline and body copy all start on one line. */

html body main :is(#jcc-cband-align#jcc-cband-align#jcc-cband-align#jcc-cband-align, .jcc-cband__content) {
  right: max(var(--jcc-gutter, 24px), calc((100% - var(--jcc-container, 1120px)) / 2)) !important;
  left:  max(var(--jcc-gutter, 24px), calc((100% - var(--jcc-container, 1120px)) / 2)) !important;
  max-width: none !important;
}

/* ---------- Photo credit ----------
   Several routes carry a Creative Commons attribution on the supporting
   photograph. It belongs with the photograph and has to stay visible, so it
   sits in the band rather than moving into the reading column. Bottom right,
   opposite the copy, quiet but legible. */

html body main .jcc-cband__credit {
  position: absolute;
  z-index: 1;
  right: max(var(--jcc-gutter, 24px), calc((100% - var(--jcc-container, 1120px)) / 2));
  bottom: 14px;
  max-width: 46ch;
  color: rgba(246, 242, 234, .72);
  font: 500 11.5px/1.45 "Hanken Grotesk", Arial, sans-serif;
  text-align: right;
}

html body main .jcc-cband__credit a,
html body main .jcc-cband__credit a:visited {
  color: inherit;
  text-decoration-color: rgba(221, 166, 70, .7);
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  html body main .jcc-cband__credit { position: static; max-width: none; margin: 8px var(--jcc-gutter, 20px) 0; text-align: left; }
}

/* ---------- JCC_CBAND_SCRIM_LEFT_20260818 ----------
   Route-scoped deepening of the left end of the horizontal overlay, for frames
   whose left third is pale enough that the 12px gold eyebrow falls below the
   4.5:1 mark. Measured on /resulting-trust-singapore/ at 1440px:

     sitewide contract     eyebrow 4.02:1   headline 6.11:1
     with this modifier    eyebrow 5.03:1   headline 7.86:1

   The change is +.06 and +.08 alpha on the first two stops. The 78% and 100%
   stops are untouched, so the right two thirds of the photograph render exactly
   as the sitewide contract renders them, and the client's rejection of a
   heavier sitewide gradient stands.

   Mobile already clears at 7.69:1 on this route, so the 640px composite is
   restated here with the sitewide horizontal layer, unchanged. */

.jcc-cband--scrim-left picture::after {
  background:
    linear-gradient(90deg,
      rgba(12, 12, 12, .86) 0%,
      rgba(12, 12, 12, .66) 46%,
      rgba(12, 12, 12, .14) 78%,
      rgba(12, 12, 12, .04) 100%);
}

@media (max-width: 640px) {
  .jcc-cband--scrim-left picture::after {
    background:
      linear-gradient(0deg,
        rgba(12, 12, 12, .88) 0%,
        rgba(12, 12, 12, .70) 42%,
        rgba(12, 12, 12, .30) 72%,
        rgba(12, 12, 12, .10) 100%),
      linear-gradient(90deg,
        rgba(12, 12, 12, .80) 0%,
        rgba(12, 12, 12, .58) 46%,
        rgba(12, 12, 12, .14) 78%,
        rgba(12, 12, 12, .04) 100%);
  }
}