/* ==========================================================================
   CLEO PRESENCE, hero film layer.  Kin Partners website V3.
   Extends the approved Kin system. Adds no token: every colour, radius,
   duration and type role below resolves to an existing Core token.
   Load order: styles.css, marketing.css, v3.css, then this file.
   Breakpoints: 1250 (1180 ref), 860 (768 ref), 480 (390 ref).
   ========================================================================== */

.cp-hero { position: relative; background: var(--void); overflow: hidden; }
.cp-env { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cp-env canvas { display: block; }
.cp-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 32px 32px; }
.cp-hero-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: var(--s8); align-items: center; padding: var(--s9) var(--s7); max-width: 1360px; margin: 0 auto; }
.cp-br { position: absolute; width: 18px; height: 18px; z-index: 3; }
.cp-br[data-c="tl"] { left: var(--s5); top: var(--s5); border-left: 1px solid var(--olive); border-top: 1px solid var(--olive); }
.cp-br[data-c="br"] { right: var(--s5); bottom: var(--s5); border-right: 1px solid var(--olive); border-bottom: 1px solid var(--olive); }
.cp-copy { display: grid; gap: var(--s6); }

/* --- Identity row used when the mark leaves the stage (768 and 390) ------ */
.cp-id { display: none; align-items: center; gap: var(--s4); }
.cp-id .cp-mark-m { width: 120px; height: 120px; flex: none; }
.cp-id-meta { display: grid; gap: 6px; justify-items: start; }

/* --- Stage ---------------------------------------------------------------- */
.cp-stage { background: var(--carbon); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; box-shadow: var(--lift); }
.cp-stage-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 10px var(--s5); border-bottom: 1px solid var(--line); background: var(--void); }
.cp-stage-body { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s5); padding: var(--s5); align-items: center; height: 356px; }
.cp-markslot { width: 204px; height: 204px; flex: none; }
.cp-stage-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s5); border-top: 1px solid var(--line); background: var(--fill-faint); flex-wrap: wrap; }

/* --- Flow column: layered call, links, card, handover --------------------- */
.cp-flow { position: relative; height: 100%; min-width: 0; }
.cp-layer { position: absolute; inset: 0; display: grid; gap: 10px; align-content: center; min-width: 0; }
.cp-call { display: inline-flex; align-items: center; gap: var(--s3); justify-self: start; padding: 8px 12px; background: var(--void); border: 1px solid var(--line); border-radius: var(--r-ctl); }
.cp-call i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; }
.cp-call span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }
.cp-call b { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--sand); }

/* --- Job card -------------------------------------------------------------- */
.cp-card { background: var(--ink); border: 1px solid color-mix(in oklab, var(--olive) 46%, var(--line)); border-radius: var(--r-panel); overflow: hidden; position: relative; }
.cp-card-sweep { position: absolute; inset: 0 0 auto; height: 2px; background: var(--olive-lift); transform-origin: left; }
.cp-card-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 8px var(--s4); border-bottom: 1px solid var(--line); background: var(--void); }
.cp-card-h b { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.cp-card-h span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); }
.cp-card-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-cell { display: grid; gap: 2px; padding: 7px var(--s4); border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); box-shadow: inset 2px 0 0 var(--olive); }
.cp-cell:nth-child(2n) { border-right: 0; }
.cp-cell:nth-last-child(-n+2) { border-bottom: 0; }
.cp-cell u { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); text-decoration: none; }
.cp-cell b { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--sand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-cell[data-src="unknown"] { box-shadow: inset 2px 0 0 var(--amber); }
.cp-cell[data-src="unknown"] b { color: var(--amber); font-style: italic; }
.cp-card-f { display: flex; align-items: center; gap: var(--s3); padding: 6px var(--s4); border-top: 1px solid var(--line); background: var(--fill-faint); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sage); }

/* --- Handover -------------------------------------------------------------- */
.cp-hand { display: grid; gap: var(--s3); }
.cp-route { display: flex; align-items: center; gap: 0; padding-left: var(--s5); margin: -2px 0; }
.cp-route i { display: block; width: 44px; height: 1px; background: var(--olive); transform-origin: left; }
.cp-route u { width: 7px; height: 7px; border-radius: 50%; background: var(--olive-lift); text-decoration: none; margin-left: -1px; }
.cp-owner { display: flex; align-items: center; gap: var(--s4); padding: 8px var(--s4); background: var(--ink); border: 1px solid color-mix(in oklab, var(--olive) 46%, var(--line)); border-radius: var(--r-ctl); justify-content: space-between; }
.cp-owner-l { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.cp-owner-av { width: 30px; height: 30px; border-radius: 50%; background: var(--raised); border: 1px solid var(--line-strong); display: grid; place-items: center; font-family: var(--font-mono); font-size: 10.5px; color: var(--olive-lift); flex: none; }
.cp-owner b { font-size: 13.5px; font-weight: 600; display: block; }
.cp-owner span { font-size: 11.5px; color: var(--sage); display: block; }
.cp-owner-ok { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--olive-lift); flex: none; }
.cp-hand-note { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); padding-left: var(--s1); }

/* --- Portrait overlay: the shared bezel ----------------------------------- */
.cp-portrait { position: absolute; z-index: 5; pointer-events: none; display: grid; place-items: center; }
.cp-portrait-ring { position: absolute; inset: -14%; display: none; }
.cp-portrait-disc { position: relative; width: 76%; height: 76%; border-radius: 50%; overflow: hidden; background: var(--carbon); border: 1px solid var(--line-strong); }
.cp-portrait-disc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-portrait-hex { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(155, 176, 104, 0.5) 1px, transparent 1px); background-size: 6px 6px; mix-blend-mode: screen; opacity: 0.8; }
.cp-portrait-disc::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--bevel), inset 0 0 46px 8px rgba(8, 9, 10, 0.5); }
.cp-portrait-cap { position: absolute; left: 50%; top: calc(100% + 14px); transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage); }
.cp-portrait-cap b { color: var(--sand); font-weight: 400; }

/* --- Nav and chapter label shortening ------------------------------------- */
.cp-nav-links { display: flex; align-items: center; gap: var(--s6); margin-left: auto; }
.cp-nav-cta { flex: none; }
.cp-nav-menu { display: none; margin-left: auto; }
.cp-ch-s { display: none; }

/* --- Responsive contract --------------------------------------------------- */
@media (max-width: 1250px) {
  .cp-markslot { width: 184px; height: 184px; }
  .cp-stage-body { height: 336px; }
}
@media (max-width: 1080px) {
  .cp-nav-links, .cp-nav-cta { display: none; }
  .cp-nav-menu { display: grid; }
  .cp-ch-l { display: none; }
  .cp-ch-s { display: inline; }
  .cp-hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding: var(--s7) var(--s5); }
  .cp-id { display: flex; }
  .cp-markslot { display: none; }
  .cp-portrait-cap { display: none; }
  .cp-stage-body { grid-template-columns: minmax(0, 1fr); height: 330px; }
}
@media (max-width: 480px) {
  .cp-id .cp-mark-m { width: 96px; height: 96px; }
  .cp-hero-in { padding: var(--s6) var(--s4); }
  .cp-copy .k-btn--lg { width: 100%; justify-content: center; }
  .cp-stage-body { height: 344px; padding: var(--s4); }
  .cp-row-optional { display: none; }
  .cp-card-g { grid-template-columns: minmax(0, 1fr); }
  .cp-cell { border-right: 0; }
  .cp-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .cp-cell:last-child { border-bottom: 0; }
  .cp-cell-optional { display: none; }
  .cp-stage-foot { flex-wrap: nowrap; overflow-x: auto; }
  .cp-owner-ok { display: none; }
}