@import url("./cj-stack.css?v=3");

/* Give the light/dark contrast toggle a shared, calm color crossfade. */
:root,
body,
.site-wrapper,
.site-head,
.s-hero,
.s-about,
.s-footer,
.s-hero .s__title,
.s-hero .s__title .char__inner::before,
.s-hero .s__title .char__inner::after {
  transition: color .55s ease, background-color .55s ease, border-color .55s ease, fill .55s ease;
}

.s-work {
  /* Preserve the original animation, but give every foreground signal strong
     contrast against the ink stage. Cobalt remains the dimensional accent. */
  --color-primary: #F4EDDB;
  --color-secondary: #111722;
  --color-shadow: #1247D9;
}

.s-work .s__canvas {
  opacity: .34;
}

.s-work .s__mask__path-lines {
  opacity: .42;
}

.s-work .s__mask__path-outer,
.s-work .s__mask__path-inner {
  stroke: rgb(244 237 219 / 52%) !important;
}

/* The footer mark is inline so it follows the actual theme, including hover.
   An external SVG image remains black regardless of the surrounding color. */
.site-foot .site-foot__logo > a {
  display: grid;
  place-items: center;
  padding: .5rem;
  color: #f4eddb;
  transition: color .2s ease, background-color .2s ease;
}

.site-foot .cj-footer-mark {
  display: block;
  fill: currentColor;
}

.site-foot .site-foot__logo > a:hover,
.site-foot .site-foot__logo > a:focus-visible {
  background: #111722;
  color: #f4eddb;
  outline: 0;
}

:root.theme-contrasted .site-foot .site-foot__logo > a {
  color: #111722;
}

:root.theme-contrasted .site-foot .site-foot__logo > a:hover,
:root.theme-contrasted .site-foot .site-foot__logo > a:focus-visible {
  color: #f4eddb;
}

.cj-track-record,
.cj-owned-project {
  cursor: default !important;
}

/*
 * The original scene toggles content-visibility when a card reaches progress -1.
 * Our mixed-aspect screenshots make that collapse observable: the transform's
 * percentage is recalculated against the newly collapsed card and it jumps back.
 * The album cards are inexpensive enough to keep rendered, preserving their exit
 * geometry for the entire scroll sequence.
 */
.s-work a-work,
.s-work a-work.s__scene__work {
  content-visibility: visible !important;
  /* Keep mixed portrait and landscape LIFE frames on a stable centre line. */
  --y: 0 !important;
}

/* Keep each frame contained in the desktop composition regardless of its source aspect ratio. */
@media (min-width: 988px) and (min-height: 700px) {
  .s-work a-work.s__scene__work {
    --size: 1 !important;
  }

  .s-work a-work .a__video {
    width: auto;
    max-width: 66vw;
    height: auto;
    max-height: 68vh;
  }
}

/* The portfolio scene is now a living album: one spine, many kinds of proof. */
.life-album__legend {
  position: absolute;
  inset: 1.5rem 1.5rem auto;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--color-primary);
  font: 700 10px/1.2 var(--font-family-fraktion);
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}

.life-album__legend span:last-child {
  text-align: right;
}

.s-work a-work a:not([href]) {
  cursor: default;
}

/* Safari can intermittently skip painting transformed video layers. Keep the
   real poster in-flow, then fade playback over it only after decoded data is
   available. This preserves the original card geometry and scroll motion. */
.s-work a-work .cj-life-video-card {
  position: relative;
}

.s-work a-work .cj-life-video-poster {
  position: relative;
  z-index: 0;
}

.s-work a-work .cj-life-video {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  width: 100% !important;
  height: auto !important;
  opacity: 0;
  transition: opacity .25s linear;
}

.s-work a-work .cj-life-video.is-ready {
  opacity: 1;
}

@media (max-width: 576px) {
  .life-album__legend {
    inset: .875rem .875rem auto;
    font-size: 8px;
  }

  .life-album__legend span:last-child {
    max-width: 13rem;
  }
}

/* Identity flip prototype: inherit the original hero's type scale and colors. */
.s-hero .cj-identity-flip__line {
  display: inline-flex;
  white-space: nowrap;
}

.s-hero .s__title,
.s-hero .cj-identity-flip__line {
  color: #fff !important;
}

/* The core hero animation paints its letters in pseudo-elements. */
.s-hero .s__title .char__inner::before,
.s-hero .s__title .char__inner::after {
  color: #fff !important;
}

.sb__icon--facebook {
  display: inline-grid !important;
  place-items: center;
  width: 100%;
  height: 100%;
  font: 700 1.45rem/1 Arial, sans-serif;
  color: #f4eddb !important;
}

.sb-socials a,
.sb-socials a:hover,
.sb-socials a:focus-visible {
  text-decoration: none !important;
}

/* The social cell inverts to ink on hover, so keep the Facebook mark cream
   instead of allowing the base navigation color to hide it. */
.sb-socials a:hover .sb__icon--facebook,
.sb-socials a:focus-visible .sb__icon--facebook {
  color: #f4eddb !important;
}

:root.theme-contrasted .sb__icon--facebook {
  color: #111722 !important;
}

:root.theme-contrasted .s-hero .s__title,
:root.theme-contrasted .s-hero .cj-identity-flip__line,
:root.theme-contrasted .s-hero .s__title .char__inner::before,
:root.theme-contrasted .s-hero .s__title .char__inner::after {
  color: #111722 !important;
}

.cj-identity-flip__letter {
  display: inline-block;
  transform-origin: 50% 0;
  backface-visibility: hidden;
}

.cj-identity-flip__letter.is-flipping {
  animation: cj-identity-letter-flip .68s cubic-bezier(.22, .8, .24, 1) both;
  animation-delay: calc(var(--identity-index) * 28ms);
}

@media (max-width: 1199px) {
  .s-hero .s__title {
    font-size: clamp(3rem, 10vw, 8rem) !important;
    line-height: .84 !important;
    padding-inline: .35rem !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .s-hero .cj-identity-flip__line {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .s-hero .s__title {
    font-size: clamp(2.35rem, 10.5vw, 4.5rem) !important;
  }
}

@keyframes cj-identity-letter-flip {
  0% { opacity: 0; transform: rotateX(-88deg); }
  60% { opacity: 1; transform: rotateX(10deg); }
  100% { opacity: 1; transform: rotateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cj-identity-flip__letter.is-flipping { animation: none; }
}


.cj-track-record .proof-signal__label,
.cj-project-link .proof-signal__label,
.cj-owned-project .proof-signal__label {
  letter-spacing: .08em;
}

.cj-project-link .proof-signal__label,
.cj-owned-project .proof-signal__label {
  opacity: 1;
  transform: none;
}

.s-about .cj-project-link:hover .proof-signal__label,
.s-about .cj-project-link.is-active .proof-signal__label,
.s-about .cj-owned-project:hover .proof-signal__label,
.s-about .cj-owned-project.is-active .proof-signal__label {
  animation: none !important;
  opacity: 1;
  transform: none;
}

/* Rebuild the receipt grid around visitor intent: destinations first, evidence second. */
.s-about .s__awards {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(6, calc(var(--width) / 4 / .751)) !important;
}

.s-about .s__award[data-proof-index="7"] {
  grid-column: 1 / 3 !important;
  grid-row: 1 / 2 !important;
}

.s-about .s__award[data-proof-index="5"] {
  grid-column: 3 / 5 !important;
  grid-row: 1 / 2 !important;
}

.s-about .s__award[data-proof-index="8"] {
  grid-column: 5 / 7 !important;
  grid-row: 1 / 2 !important;
}

.s-about .s__award[data-proof-index="0"] {
  grid-column: 1 / 4 !important;
  grid-row: 2 / 4 !important;
}

.s-about .s__award[data-proof-index="1"] {
  grid-column: 4 / 7 !important;
  grid-row: 2 / 3 !important;
}

.s-about .s__award[data-proof-index="2"] {
  grid-column: 4 / 7 !important;
  grid-row: 3 / 4 !important;
}

.s-about .s__award[data-proof-index="3"] {
  grid-column: 1 / 7 !important;
  grid-row: 4 / 5 !important;
}

.s-about .s__award[data-proof-index="4"] {
  grid-column: 1 / 7 !important;
  grid-row: 5 / 6 !important;
}

.s-about .s__award[data-proof-index="6"] {
  grid-column: 1 / 4 !important;
  grid-row: 6 / 7 !important;
}

.s-about .s__award[data-proof-index="9"] {
  grid-column: 4 / 7 !important;
  grid-row: 6 / 7 !important;
}

@media (max-width: 960px) {
  .s-about .s__awards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(8, calc(var(--width) / 3 / .751)) !important;
  }

  .s-about .s__award[data-proof-index="7"] {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 2 !important;
  }

  .s-about .s__award[data-proof-index="5"] {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 2 !important;
  }

  .s-about .s__award[data-proof-index="8"] {
    grid-column: 1 / 3 !important;
    grid-row: 2 / 3 !important;
  }

  .s-about .s__award[data-proof-index="0"] {
    grid-column: 1 / 3 !important;
    grid-row: 3 / 5 !important;
  }

  .s-about .s__award[data-proof-index="1"] {
    grid-column: 1 / 2 !important;
    grid-row: 5 / 6 !important;
  }

  .s-about .s__award[data-proof-index="2"] {
    grid-column: 2 / 3 !important;
    grid-row: 5 / 6 !important;
  }

  .s-about .s__award[data-proof-index="3"] {
    grid-column: 1 / 3 !important;
    grid-row: 6 / 7 !important;
  }

  .s-about .s__award[data-proof-index="4"] {
    grid-column: 1 / 3 !important;
    grid-row: 7 / 8 !important;
  }

  .s-about .s__award[data-proof-index="6"] {
    grid-column: 1 / 2 !important;
    grid-row: 8 / 9 !important;
  }

  .s-about .s__award[data-proof-index="9"] {
    grid-column: 2 / 3 !important;
    grid-row: 8 / 9 !important;
  }
}

@media (max-width: 576px) {
  .s-about .s__awards {
    grid-template-rows: repeat(8, calc(var(--width) / 2 / .751)) !important;
  }
}

/* Credentials and client notes: a final field-note ledger, not a testimonial carousel. */
.cj-trust-ledger {
  padding: clamp(2rem, 4.5vw, 4.5rem) clamp(1.25rem, 5vw, 5.5rem);
  color: #111722;
  background: #f4eddb;
}
.cj-trust-ledger__heading { display: flex; margin-bottom: clamp(1.5rem, 3vw, 3rem); align-items: end; justify-content: space-between; gap: 1rem; }
.cj-trust-ledger h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(3rem, 7vw, 7.5rem); font-weight: 400; letter-spacing: -.075em; line-height: .82; }
.cj-trust-ledger__badge { display: block; width: clamp(4.75rem, 9vw, 8rem); height: auto; mix-blend-mode: multiply; }
.theme-contrasted .cj-trust-ledger__badge { mix-blend-mode: screen; }
.theme-contrasted .cj-trust-ledger { color: #f4eddb; background: #111722; }

/* The LIFE reel ends with an intentional blank reference card, never a dead asset. */
.s-work .life-future-reference {
  display: grid;
  width: 100%;
  aspect-ratio: 1.7 / 1;
  padding: 1.3rem;
  box-sizing: border-box;
  align-content: space-between;
  color: #f4eddb;
  background: #1247d9;
  background-image: linear-gradient(rgba(244, 237, 219, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(244, 237, 219, .2) 1px, transparent 1px);
  background-size: 22px 22px;
}
.s-work .life-future-reference span { font-family: Georgia, serif; font-size: clamp(1.4rem, 2.4vw, 3rem); letter-spacing: -.07em; line-height: .82; }
.s-work .life-future-reference small { font: 700 .56rem/1.2 "IBM Plex Mono", monospace; letter-spacing: .12em; }

/* Evidence gallery: image-first, radio-selectable, and advances while idle. */
.cj-review-gallery { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.cj-review-gallery > input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.cj-review-gallery__slides { position: relative; min-height: clamp(25rem, 46vw, 43rem); }
.cj-review-gallery .cj-review-receipt { position: absolute; inset: 0; display: flex; min-height: 0; margin: 0; padding: 0; align-items: center; justify-content: center; border: 0; opacity: 0; visibility: hidden; transition: none; }
.cj-review-gallery .cj-review-receipt img { display: block; width: min(100%, 72rem); height: auto; max-height: clamp(23rem, 41vw, 39rem); object-fit: contain; border: 0; background: transparent; }
#review-1:checked ~ .cj-review-gallery__slides .cj-review-receipt:nth-child(1), #review-2:checked ~ .cj-review-gallery__slides .cj-review-receipt:nth-child(2), #review-3:checked ~ .cj-review-gallery__slides .cj-review-receipt:nth-child(3) { position: relative; opacity: 1; visibility: visible; }
.cj-review-gallery__controls { display: flex; justify-content: center; gap: .65rem; margin-top: 1.2rem; }
.cj-review-gallery__controls label { width: .68rem; height: .68rem; box-sizing: border-box; cursor: pointer; border: 1px solid currentColor; border-radius: 50%; opacity: .42; transition: background-color .2s ease, opacity .2s ease; }
#review-1:checked ~ .cj-review-gallery__controls label[for="review-1"], #review-2:checked ~ .cj-review-gallery__controls label[for="review-2"], #review-3:checked ~ .cj-review-gallery__controls label[for="review-3"] { opacity: 1; background: currentColor; }
@media (max-width: 760px) { .cj-review-gallery__slides { min-height: 31rem; }.cj-review-gallery .cj-review-receipt img { width: 100%; max-height: 26rem; }.cj-review-gallery__controls { justify-content: center; } }