/* V0 Writing + Agency rooms (v0-rooms.js). Dark stage for the heroes and
 * closes, warm paper for the working surfaces (drafts, plans, process). */
.jfx-room {
  --jfx-ink: #0b0d12;
  --jfx-paper: #f3efe6;
  --jfx-paper-2: #e9e3d6;
  --jfx-line: rgba(11, 13, 18, .14);
  --jfx-cyan: #04cffe;
  --jfx-mint: #5cf2c2;
  --jfx-violet: #8f74ff;
  --jfx-amber: #ffb35c;
  --jfx-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --jfx-script: "Courier Prime", "Courier New", Courier, monospace;
  --jfx-pad: clamp(20px, 5vw, 72px);
  /* Shared V0 components (buttons, marks) read these. */
  --jfv0-ink: #0b0d12;
  --jfv0-black: #050607;
  --jfv0-white: #ffffff;
  --jfv0-paper: #f5f2ec;
  --jfv0-cyan: #04cffe;
  --jfv0-line: rgba(255, 255, 255, .14);
  display: block;
  background: #050607;
  color: #ece7dd;
  overflow-x: clip;
}
html body .jfv0-live.jfx-room { min-height: 0; padding: 0; background: #050607; color: #ece7dd; font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif; }
html body .jfv0-live.jfx-room::before, html body .jfv0-live.jfx-room::after { content: none; }
html body .jfx-room h1, html body .jfx-room h2, html body .jfx-room h3 { text-wrap: balance; }
html body .jfx-room h2 { margin: 8px 0 14px; font: 600 clamp(32px, 4.6vw, 60px)/1.02 "Bricolage Grotesque", sans-serif; letter-spacing: -.035em; }
html body .jfx-room h2 em, html body .jfx-room h1 em { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -.01em; }
html body .jfx-room header > p:not(.jfv0-note) { max-width: 60ch; margin: 0; font-size: 16px; line-height: 1.65; }

/* ── Hero ── */
.jfx-room__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
  padding: calc(var(--jf-header-clearance, 96px) + clamp(32px, 6vw, 88px)) var(--jfx-pad) clamp(56px, 8vw, 112px);
}
.jfx-room__hero--stack { grid-template-columns: 1fr; padding-bottom: clamp(24px, 4vw, 48px); }
html body .jfx-room__hero h1 { margin: 14px 0 20px; color: #fff; font: 600 clamp(46px, 7vw, 104px)/.95 "Bricolage Grotesque", sans-serif; letter-spacing: -.045em; }
html body .jfx-room__hero h1 em { color: var(--jfx-cyan); }
html body .jfx-room--agency .jfx-room__hero h1 em { color: var(--jfx-amber); }
.jfx-room__hero .jfv0-kicker { color: var(--jfx-mint); }
.jfx-room__lead { max-width: 58ch; margin: 0 0 26px; color: rgba(236, 231, 221, .78); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; }

/* ── Draft machine ── */
.jfx-draft { position: relative; margin: 0; padding: clamp(18px, 2.4vw, 28px); border-radius: 22px; background: var(--jfx-paper); color: var(--jfx-ink); box-shadow: 0 40px 90px -40px rgba(4, 207, 254, .35), 0 30px 60px -30px rgba(0, 0, 0, .7); transform: rotate(-.6deg); }
.jfx-draft__premise { padding: 0 0 14px; border-bottom: 1px dashed var(--jfx-line); }
.jfx-draft__premise span, .jfx-edit__label span, .jfx-plan__brief span, .jfx-plan__meta span { display: block; color: #6b6556; font: 600 10px/1 var(--jfx-mono); letter-spacing: .12em; text-transform: uppercase; }
.jfx-draft__premise p { margin: 8px 0 0; font: 500 16px/1.4 "Bricolage Grotesque", sans-serif; }
.jfx-draft__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; }
html body .jfx-draft__tabs button, html body .jfx-plan__types button {
  min-height: 38px; padding: 8px 14px; border: 1px solid var(--jfx-line); border-radius: 999px;
  background: transparent; color: var(--jfx-ink); font: 600 12px/1 var(--jfx-mono); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
html body .jfx-draft__tabs button[aria-selected="true"] { background: var(--jfx-ink); border-color: var(--jfx-ink); color: #fff; }
html body .jfx-draft__tabs button:focus-visible, html body .jfx-plan__types button:focus-visible { outline: 2px solid var(--jfx-violet); outline-offset: 2px; }
.jfx-draft__page { min-height: clamp(260px, 30vw, 330px); padding: clamp(16px, 2vw, 24px); border-radius: 12px; background: #fffdf8; box-shadow: inset 0 0 0 1px var(--jfx-line); font: 15px/1.55 var(--jfx-script); }
.jfx-draft__page p { margin: 0 0 12px; min-height: 1.2em; }
.jfx-draft__slug { font-weight: 700; text-transform: uppercase; }
.jfx-draft__character { margin: 18px 0 0 !important; text-align: center; text-transform: uppercase; }
.jfx-draft__paren { margin: 0 !important; text-align: center; color: #555; }
.jfx-draft__dialogue { max-width: 30ch; margin: 0 auto 12px !important; }
.jfx-draft__page[data-format="screen"] .jfx-draft__dialogue { text-align: left; }
.jfx-draft__page[data-format="spot"] { display: grid; grid-template-columns: 88px 1fr; column-gap: 12px; align-content: start; }
.jfx-draft__cue { margin: 0 !important; color: #8a5a00; font-weight: 700; }
.jfx-draft__page[data-format="spot"] .jfx-draft__dialogue { max-width: none; margin: 0 0 12px !important; }
.jfx-draft__lede { font: 600 clamp(22px, 2.4vw, 28px)/1.2 "Instrument Serif", Georgia, serif !important; }
.jfx-draft__body, .jfx-draft__logline { font: 400 17px/1.65 "Bricolage Grotesque", sans-serif; }
.jfx-draft__logline { font-size: clamp(19px, 2vw, 23px); line-height: 1.5; }
.jfx-draft figcaption { margin-top: 12px; color: #6b6556; font: 500 12px/1.4 var(--jfx-mono); }

/* ── Draft 0 → 3 ── */
.jfx-edit, .jfx-process { background: var(--jfx-paper); color: var(--jfx-ink); }
.jfx-edit, .jfx-formats, .jfx-process, .jfx-rooms, .jfx-plan { padding: clamp(56px, 8vw, 110px) var(--jfx-pad); }
.jfx-edit > header, .jfx-formats > header, .jfx-process > header, .jfx-rooms > header, .jfx-plan__head { max-width: 1200px; margin: 0 auto clamp(24px, 4vw, 44px); }
html body .jfx-edit h2 em, html body .jfx-process h2 em { color: #6a4fe0; }
.jfx-edit__board { max-width: 1200px; margin: 0 auto; padding: clamp(20px, 3vw, 36px); border-radius: 22px; background: #fffdf8; box-shadow: 0 0 0 1px var(--jfx-line), 0 30px 60px -40px rgba(0, 0, 0, .35); }
.jfx-edit__label strong { display: block; margin-top: 6px; font: 600 22px/1.2 "Bricolage Grotesque", sans-serif; }
html body .jfx-edit__board input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 22px 0 10px; border-radius: 99px; cursor: pointer;
  background: linear-gradient(90deg, #6a4fe0 calc(var(--jfx-edit, 0) * 100%), var(--jfx-paper-2) calc(var(--jfx-edit, 0) * 100%));
}
html body .jfx-edit__board input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid #6a4fe0; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
html body .jfx-edit__board input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #6a4fe0; }
.jfx-edit__ticks { display: flex; justify-content: space-between; gap: 8px; color: #6b6556; font: 500 11px/1.2 var(--jfx-mono); }
.jfx-edit__ticks span:nth-child(2), .jfx-edit__ticks span:nth-child(3) { text-align: center; }
.jfx-edit__ticks span:last-child { text-align: right; }
html body .jfx-edit__text { margin: 26px 0 12px; padding: 0; border: 0; font: 500 clamp(22px, 3.2vw, 40px)/1.3 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
html body .jfx-edit__text.is-scrawl { font: 400 clamp(20px, 2.6vw, 30px)/1.4 var(--jfx-script); color: #5d574b; }
.jfx-edit__text.is-fresh { animation: jfxFresh .45s ease both; }
@keyframes jfxFresh { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.jfx-edit__note { margin: 0; color: #6b6556; font-size: 15px; line-height: 1.55; }

/* ── Formats + rooms grids ── */
.jfx-formats, .jfx-rooms { background: #07080b; }
html body .jfx-formats h2 em, html body .jfx-rooms h2 em { color: var(--jfx-cyan); }
html body .jfx-rooms h2 em { color: var(--jfx-amber); }
.jfx-formats__grid, .jfx-rooms__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.jfx-formats__grid article, .jfx-rooms__grid article { padding: 24px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: rgba(255, 255, 255, .03); transition: border-color .2s ease, transform .2s ease; }
.jfx-formats__grid article:hover, .jfx-rooms__grid article:hover { border-color: rgba(4, 207, 254, .45); transform: translateY(-2px); }
.jfx-formats__grid span, .jfx-rooms__grid span { color: var(--jfx-mint); font: 600 11px/1 var(--jfx-mono); letter-spacing: .08em; text-transform: uppercase; }
html body .jfx-formats__grid h3, html body .jfx-rooms__grid h3 { margin: 12px 0 8px; color: #fff; font: 600 22px/1.15 "Bricolage Grotesque", sans-serif; }
.jfx-formats__grid p, .jfx-rooms__grid p { margin: 0; color: rgba(236, 231, 221, .72); font-size: 15px; line-height: 1.6; }
.jfx-rooms > header p { color: rgba(236, 231, 221, .72); }

/* ── Process ── */
.jfx-process__steps { max-width: 1200px; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: jfx; }
.jfx-process__steps li { position: relative; padding: 26px 20px 8px 0; border-top: 2px solid var(--jfx-ink); counter-increment: jfx; }
.jfx-process__steps li::before { content: counter(jfx, decimal-leading-zero); position: absolute; top: -13px; left: 0; padding-right: 10px; background: var(--jfx-paper); font: 700 12px/24px var(--jfx-mono); }
.jfx-process__steps b { display: block; margin-bottom: 6px; font: 600 20px/1.2 "Bricolage Grotesque", sans-serif; }
.jfx-process__steps span { color: #4d4a42; font-size: 15px; line-height: 1.55; }

/* ── Close ── */
.jfx-room__close { max-width: 1360px; margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--jfx-pad); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 32px; align-items: end; }
html body .jfx-room__close h2 { color: #fff; }
html body .jfx-room__close h2 em { color: var(--jfx-cyan); }
.jfx-room__close p:not(.jfv0-note) { max-width: 58ch; color: rgba(236, 231, 221, .72); font-size: 16px; line-height: 1.65; }

/* ── Agency plan builder ── */
.jfx-plan { background: var(--jfx-paper); color: var(--jfx-ink); }
html body .jfx-plan h2 em { color: #b56a00; }
.jfx-plan__types { max-width: 1200px; margin: 0 auto 18px; display: flex; flex-wrap: wrap; gap: 8px; }
html body .jfx-plan__types button[aria-selected="true"] { background: var(--jfx-ink); border-color: var(--jfx-ink); color: #fff; }
.jfx-plan__board { max-width: 1200px; margin: 0 auto; padding: clamp(18px, 3vw, 32px); border-radius: 22px; background: #fffdf8; box-shadow: 0 0 0 1px var(--jfx-line), 0 30px 60px -40px rgba(0, 0, 0, .35); }
.jfx-plan__brief p { margin: 8px 0 0; font: 400 clamp(19px, 2.2vw, 26px)/1.4 var(--jfx-script); color: #3d3a33; }
.jfx-plan__arrow { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: #b56a00; font: 700 12px/1 var(--jfx-mono); letter-spacing: .08em; text-transform: uppercase; }
.jfx-plan__arrow::before { content: ""; width: 40px; height: 2px; background: currentColor; }
.jfx-plan__timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin-bottom: 14px; }
.jfx-plan__timeline span { padding: 6px 0; border-radius: 6px; background: var(--jfx-paper-2); color: #6b6556; font: 600 10px/1 var(--jfx-mono); text-align: center; }
.jfx-plan__phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jfx-plan__phases article { padding: 18px; border-radius: 14px; background: var(--jfx-paper); border-top: 4px solid #b56a00; }
.jfx-plan__phases article:nth-child(2) { border-top-color: #6a4fe0; }
.jfx-plan__phases article:nth-child(3) { border-top-color: #0a8fb0; }
html body .jfx-plan__phases h3 { margin: 0 0 10px; font: 600 18px/1.2 "Bricolage Grotesque", sans-serif; }
.jfx-plan__phases ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.jfx-plan__phases li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; }
.jfx-plan__phases li::before { content: ""; position: absolute; left: 0; top: .3em; width: 12px; height: 12px; border: 2px solid currentColor; border-radius: 3px; opacity: .45; }
.jfx-plan__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--jfx-line); }
.jfx-plan__meta p { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.jfx-plan__meta b { padding: 6px 10px; border-radius: 999px; background: var(--jfx-paper-2); font: 600 12px/1 var(--jfx-mono); }
@media (prefers-reduced-motion: no-preference) {
  .jfx-plan__board .jfx-plan__phases article { opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; transition-delay: calc(var(--i, 0) * 90ms); }
  .jfx-plan__board.is-built .jfx-plan__phases article { opacity: 1; transform: none; }
}
.jfx-room--agency .jfv0-agency-marks { background: #07080b; }

@media (max-width: 900px) {
  .jfx-room__hero { grid-template-columns: 1fr; }
  .jfx-draft { transform: none; }
  .jfx-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .jfx-room__close { grid-template-columns: 1fr; }
  .jfx-plan__phases { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .jfx-process__steps { grid-template-columns: 1fr; }
  .jfx-plan__meta { grid-template-columns: 1fr; }
  .jfx-draft__page[data-format="spot"] { grid-template-columns: 1fr; }
  .jfx-edit__ticks span:nth-child(2), .jfx-edit__ticks span:nth-child(3) { display: none; }
  .jfx-plan__timeline span { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .jfx-edit__text.is-fresh { animation: none; }
  .jfx-formats__grid article, .jfx-rooms__grid article { transition: none; }
}

/* Client marks: one treatment everywhere on dark, matching Marketing. */
.jfx-room .jfv0-agency-marks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1200px; margin: 0 auto; padding: clamp(28px, 4vw, 44px) var(--jfx-pad); gap: 0; border: 0; background: #07080b; }
.jfx-room .jfv0-agency-mark { min-height: 88px; border-right: 1px solid rgba(255, 255, 255, .1); background-size: min(64%, 160px) auto; filter: grayscale(1) brightness(0) invert(1); opacity: .82; }
.jfx-room .jfv0-agency-mark:last-child { border-right: 0; }
@media (max-width: 700px) {
  .jfx-room .jfv0-agency-marks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jfx-room .jfv0-agency-mark:nth-child(2) { border-right: 0; }
  .jfx-room .jfv0-agency-mark:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
}

/* Proof numbers (from the résumé). */
.jfx-stats { max-width: 1200px; margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.jfx-stats li { padding: 16px 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 16px; background: rgba(255, 255, 255, .03); }
.jfx-stats b { display: block; font-variant-numeric: tabular-nums; color: #fff; font: 700 clamp(28px, 3.4vw, 44px)/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; }
.jfx-stats span { display: block; margin-top: 6px; color: rgba(236, 231, 221, .6); font: 600 10px/1.3 var(--jfx-mono); letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 700px) { .jfx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.jfx-rooms__grid article ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.jfx-rooms__grid article li { position: relative; padding-left: 16px; color: rgba(236, 231, 221, .72); font-size: 14.5px; line-height: 1.55; }
.jfx-rooms__grid article li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 2px; background: var(--jfx-amber); }
.jfx-rooms__grid article small { display: block; margin-top: 4px; color: rgba(236, 231, 221, .5); font: 500 12px/1.4 var(--jfx-mono); }

/* Consulting teaser. */
.jfx-consult { max-width: 1200px; margin: 0 auto clamp(40px, 6vw, 80px); padding: clamp(24px, 4vw, 44px); border-radius: 24px; background: radial-gradient(circle at 85% 20%, rgba(4, 207, 254, .18), transparent 55%), #0b0f15; border: 1px solid rgba(4, 207, 254, .25); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
html body .jfx-consult h2 { color: #fff; margin-top: 6px; }
html body .jfx-consult h2 em { color: var(--jfx-cyan); }
.jfx-consult p:not(.jfv0-note) { max-width: 60ch; margin: 0; color: rgba(236, 231, 221, .75); font-size: 16px; line-height: 1.65; }
.jfx-consult .jfv0-note { color: var(--jfx-mint); }
@media (max-width: 800px) { .jfx-consult { grid-template-columns: 1fr; margin-inline: var(--jfx-pad); } }

/* ── Agency case files: sourced public detail, credited role only. ── */
.jfx-cases { padding: clamp(56px, 8vw, 110px) var(--jfx-pad); background: #07080b; }
.jfx-cases > header { max-width: 1200px; margin: 0 auto clamp(24px, 4vw, 44px); }
html body .jfx-cases h2 { color: #fff; }
html body .jfx-cases h2 em { color: #ffd84d; }
.jfx-cases > header p:not(.jfv0-note) { max-width: 60ch; color: rgba(236, 231, 221, .66); font-size: 15px; line-height: 1.6; }
.jfx-case { max-width: 1200px; margin: 0 auto 16px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; background: rgba(255, 255, 255, .03); }
.jfx-case:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.jfx-case:nth-of-type(even) .jfx-case__media { order: 2; }
.jfx-case__media { position: relative; margin: 0; min-height: 280px; overflow: hidden; background: #000; }
html body .jfx-case__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.jfx-case__media figcaption { position: absolute; left: 12px; bottom: 12px; padding: 5px 9px; border-radius: 8px; background: rgba(5, 6, 7, .72); color: #ffd84d; font: 600 10.5px/1 var(--jfx-mono); letter-spacing: .08em; text-transform: uppercase; }
.jfx-case__body { padding: clamp(22px, 3vw, 36px); }
.jfx-case__meta { color: var(--jfx-mint); font: 600 11px/1.3 var(--jfx-mono); letter-spacing: .08em; text-transform: uppercase; }
html body .jfx-case h3 { margin: 10px 0 16px; color: #fff; font: 640 clamp(22px, 2.4vw, 32px)/1.1 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; }
.jfx-case dl { display: grid; gap: 12px; margin: 0; }
.jfx-case dl > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; }
.jfx-case dt { padding-top: 2px; color: rgba(236, 231, 221, .5); font: 600 10.5px/1.5 var(--jfx-mono); letter-spacing: .08em; text-transform: uppercase; }
.jfx-case dd { margin: 0; color: rgba(236, 231, 221, .82); font-size: 15px; line-height: 1.55; }
.jfx-case__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
html body .jfx-case__links a { padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; color: #ece7dd; font: 600 12.5px/1 "Bricolage Grotesque", sans-serif; text-decoration: none; transition: border-color .2s ease, background .2s ease; }
html body .jfx-case__links a:hover, html body .jfx-case__links a:focus-visible { border-color: var(--jfx-cyan); background: rgba(4, 207, 254, .1); outline: none; }
html body .jfx-case__links a.is-watch { border-color: #ffd84d; background: #ffd84d; color: #07080b; }
html body .jfx-case__links a.is-watch::before { content: "\25B6\FE0E"; margin-right: 6px; font-size: 10px; }
.jfx-cases__more { max-width: 1200px; margin: 18px auto 0; color: rgba(236, 231, 221, .6); font-size: 14px; }
html body .jfx-cases__more a { color: #ece7dd; }
@media (max-width: 820px) {
  .jfx-case, .jfx-case:nth-of-type(even) { grid-template-columns: 1fr; }
  .jfx-case:nth-of-type(even) .jfx-case__media { order: 0; }
  .jfx-case__media { min-height: 0; aspect-ratio: 16 / 9; }
  .jfx-case dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Client work: same case layout, gallery-white accents instead of All Is Yellow. */
.jfx-cases--clients { padding-top: 0; }
html body .jfx-cases--clients h2 em { color: var(--jfx-cyan); }
html body .jfx-case__links a.is-visit { border-color: #ece7dd; background: #ece7dd; color: #07080b; }
html body .jfx-case__links a.is-visit::after { content: "\2197"; margin-left: 6px; }

/* Ciro: depth scan vs final render. The scan is a real monocular depth pass
   (Depth Anything V2) over the 3D ring renders, drawn as topographic lines. */
.jfx-reveal { --split: 50%; touch-action: pan-y; }
html body .jfx-reveal img.jfx-reveal__scan { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.jfx-reveal__line { position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 2; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 18px rgba(4, 207, 254, .9); pointer-events: none; }
.jfx-reveal__line::after { content: "\2194"; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #07080b; font: 700 17px/1 system-ui, sans-serif; transform: translate(-50%, -50%); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.jfx-reveal__tag { position: absolute; top: 12px; z-index: 2; padding: 5px 9px; border-radius: 8px; background: rgba(5, 6, 7, .72); font: 600 10.5px/1 var(--jfx-mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.jfx-reveal__tag--l { left: 12px; color: #5cf2c2; }
.jfx-reveal__tag--r { right: 12px; color: #ece7dd; }
html body input.jfx-reveal__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent; }
.jfx-reveal:focus-within .jfx-reveal__line::after { outline: 3px solid #04cffe; outline-offset: 3px; }

/* ── Coordination: gold accent + the paperwork stack (the page's breakaway moment). ── */
html body .jfx-room--coordination .jfx-room__hero h1 em, html body .jfx-rooms--coord h2 em { color: #ffd84d; }
.jfx-rooms--coord .jfx-rooms__grid article li::before { background: #ffd84d; }
.jfx-paperwork { position: relative; margin: 0 auto; width: min(100%, 440px); aspect-ratio: 4 / 5; }
.jfx-paperwork__doc, .jfx-paperwork__sheet { position: absolute; border-radius: 4px; background: #f6f1e4; color: #15130f; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); font-family: "Courier Prime", "Courier New", monospace; }
.jfx-paperwork__doc { inset: 6% 8% 10% 6%; padding: 18px 20px; display: grid; align-content: start; gap: 10px; }
.jfx-paperwork__doc span { font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.jfx-paperwork__doc i { display: block; height: 7px; border-radius: 2px; background: rgba(21, 19, 15, .12); }
.jfx-paperwork__doc i:nth-of-type(2) { width: 78%; } .jfx-paperwork__doc i:nth-of-type(3) { width: 56%; }
.jfx-paperwork__doc--permit { transform: translate(-7%, -4%) rotate(-9deg); background: #e9e3d2; }
.jfx-paperwork__doc--w9 { transform: translate(9%, -2%) rotate(7deg); background: #efe9d8; }
.jfx-paperwork__doc--memo { transform: translate(-4%, 3%) rotate(-4deg); }
.jfx-paperwork__doc--release { transform: translate(6%, 5%) rotate(3deg); background: #faf6ea; }
.jfx-paperwork__sheet { inset: 16% 4% 4% 12%; padding: 0 0 18px; transform: rotate(-1deg); box-shadow: 0 40px 80px -30px rgba(255, 216, 77, .25), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.jfx-paperwork__sheet::before { content: ""; position: absolute; top: -13px; left: 50%; width: 110px; height: 26px; margin-left: -55px; background: rgba(255, 216, 77, .88); transform: rotate(-4deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.jfx-paperwork__head { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 22px 12px; border-bottom: 2px solid #15130f; }
.jfx-paperwork__head span { font-weight: 700; font-size: clamp(22px, 2.6vw, 30px); text-transform: uppercase; }
.jfx-paperwork__head b { font-size: 13px; letter-spacing: .08em; }
.jfx-paperwork__sheet ol { margin: 0; padding: 8px 22px 0; list-style: none; display: grid; }
.jfx-paperwork__sheet li { display: grid; grid-template-columns: 76px 1fr; gap: 10px; align-items: baseline; padding: 12px 0; border-bottom: 1px dashed rgba(21, 19, 15, .25); font-size: 16px; }
.jfx-paperwork__sheet li:last-child { border-bottom: 0; }
.jfx-paperwork__sheet time { font-weight: 700; }
@media (max-width: 1100px) { .jfx-paperwork { width: min(100%, 400px); margin-top: 12px; } }

/* Paper sections: .jfv0-live sets --jf-heading to near-white for dark pages,
   which made headings on these cream panels invisible (Writing, Agency,
   Coordination). Scope the ink back on the light sections. */
.breakdance .jfx-room :is(.jfx-edit, .jfx-process, .jfx-plan) { --jf-heading: #0b0d12; }
html body .jfx-room :is(.jfx-edit, .jfx-process, .jfx-plan) :is(h2, h3) { color: #0b0d12; -webkit-text-fill-color: #0b0d12; }
html body .jfx-room :is(.jfx-edit, .jfx-process, .jfx-plan) h2 em { -webkit-text-fill-color: currentColor; }
html body .jfx-room--coordination .jfx-process h2 em { color: #a0740a; }
html body .jfx-room--coordination .jfx-room__hero .jfx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }

/* ── Coordination rebuild: original page structure, curated photos, lite embeds. ── */
.jfx-kinds, .jfx-reel, .jfx-features { padding: clamp(56px, 8vw, 110px) var(--jfx-pad); background: #07080b; }
.jfx-features { background: var(--jfx-paper); color: var(--jfx-ink); }
.jfx-kinds > header, .jfx-reel > header, .jfx-features > header { max-width: 1200px; margin: 0 auto clamp(24px, 4vw, 44px); }
html body .jfx-room :is(.jfx-kinds, .jfx-reel) h2 em { color: #ffd84d; }
.breakdance .jfx-room .jfx-features { --jf-heading: #0b0d12; }
html body .jfx-room .jfx-features :is(h2, h3) { color: #0b0d12; -webkit-text-fill-color: #0b0d12; }
html body .jfx-room .jfx-features h2 em { color: #a0740a; -webkit-text-fill-color: #a0740a; }
.jfx-features > header p { color: #4d4a42; }
.jfx-kinds__grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.jfx-kinds__grid article { display: grid; align-content: start; gap: 10px; }
.jfx-kinds__grid figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 16px; background: #111; }
html body .jfx-kinds__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.jfx-kinds__grid article:hover img { transform: scale(1.04); }
html body .jfx-kinds__grid h3 { margin: 6px 0 0; color: #fff; font: 600 22px/1.15 "Bricolage Grotesque", sans-serif; }
.jfx-kinds__grid p { margin: 0; color: rgba(236, 231, 221, .72); font-size: 15px; line-height: 1.6; }
.jfx-reel__grid, .jfx-features__grid { max-width: 1200px; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; }
.jfx-reel__grid p, .jfx-features__grid p { margin: 8px 0 0; font: 500 14px/1.35 "Bricolage Grotesque", sans-serif; }
.jfx-reel__grid p { color: rgba(236, 231, 221, .82); }
html body button.jfx-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #000; cursor: pointer; }
html body button.jfx-yt img { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .2s ease, transform .4s ease; }
html body button.jfx-yt:hover img, html body button.jfx-yt:focus-visible img { opacity: 1; transform: scale(1.03); }
html body button.jfx-yt:focus-visible { outline: 3px solid #ffd84d; outline-offset: 3px; }
.jfx-yt__play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(5, 6, 7, .72); box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.jfx-yt__play::after { content: ""; position: absolute; left: 21px; top: 16px; border-left: 15px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.jfx-yt-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; background: #000; }
.jfx-features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .jfx-features__grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .6); }
.jfx-features__grid p { color: #15130f; font-weight: 600; }
.jfx-features__grid small { display: block; margin-top: 2px; color: #6b6556; font: 500 12px/1.4 var(--jfx-mono); }
.jfx-coord-close { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; }
.jfx-coord-close__img { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; }
html body .jfx-coord-close__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) { .jfx-kinds__grid, .jfx-reel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .jfx-features__grid, .jfx-coord-close { grid-template-columns: 1fr; } .jfx-coord-close__img { max-width: 260px; } }
@media (max-width: 480px) { .jfx-kinds__grid { grid-template-columns: 1fr; } .jfx-kinds__grid figure { aspect-ratio: 16 / 11; } }