/* JRD Portfolio — consolidated stylesheet (clean static rebuild)
   Sources: Webflow class stylesheet (extracted jrd-* rules) + runtime-injected style blocks from staging.
   Design system: cyan accent #0EA5E9 (light bg) / #38BDF8 (dark bg); JetBrains Mono eyebrows; Space Grotesk logo; system sans body; card shadows only. */

*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:#fff;font-family:system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;color:#333}
img{max-width:100%;vertical-align:middle;display:inline-block;border:0}
h1,h2,h3,h4,p{margin:0}
a{text-decoration:underline}

.jrd-nav-inner {
  color: #0f172a;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
}

.jrd-logo {
  color: #fff;
  letter-spacing: 4px;
  font-family: "\"Space Grotes||";
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
}

.jrd-logo.active-page {
  color: #fff;
  font-family: "\"Space Grotes||";
}

.jrd-nav-links {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  align-items: center;
  display: flex;
}

.jrd-nav-cta {
  color: #fff;
  border: 1px solid #fff6;
  padding: 8px 22px;
}

.jrd-nav-cta:hover {
  background-color: #ffffff1a;
  border-color: #fff;
}

.jrd-hero {
  align-items: center;
  min-height: 70vh;
  padding: 80px 48px 56px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.jrd-hero-bg {
  will-change: transform;
  background-color: #0f172a;
  background-image: linear-gradient(#0f172a8c, #0f172aa6), url("https://cdn.prod.website-files.com/69d95c12db2dc6ecbffc6268/69f5333d8ed4ed8f2507f060_Cyber_01.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  position: absolute;
  inset: -200px 0 -100px;
}

.jrd-hero-bg:after {
  pointer-events: none;
  content: none;
  position: absolute;
  inset: 0;
}

.jrd-hero-content {
  z-index: 2;
  color: #fff;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
}

.jrd-hero-eyebrow {
  color: #ffffffb3;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 28px;
  font-family: \"JetBrains Mon;
  font-size: 20px;
}

.jrd-hero-title {
  letter-spacing: -.025em;
  margin-bottom: 28px;
  font-size: clamp(56px, 9vw, 128px);
  font-weight: 500;
  line-height: 1;
  display: block;
}

.jrd-hero-title-line {
  color: #fff;
  display: block;
}

.jrd-hero-title-line.outline {
  color: #0000;
}

.jrd-hero-sub {
  color: #ffffffa6;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 28px;
  font-size: 20px;
  font-weight: 300;
}

.jrd-hero-desc {
  color: #ffffffd9;
  max-width: 500px;
  margin-bottom: 52px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}

.jrd-hero-actions {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
}

.jrd-btn-primary {
  color: #fff;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  background-color: #0000;
  border: 1px solid #fff6;
  border-radius: 8px;
  padding: 15px 40px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
}

.jrd-btn-secondary {
  color: #fff;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  background-color: #0000;
  border: 1px solid #fff6;
  border-radius: 8px;
  padding: 15px 40px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
}

.jrd-btn-secondary:hover {
  color: #fff;
  background-color: #ffffff1a;
  border-color: #fff;
}

.jrd-hero-scroll {
  z-index: 2;
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  color: #fff9;
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 44px;
  left: 48px;
}

.jrd-scroll-line {
  background-color: #ffffff59;
  width: 52px;
  height: 1px;
}

.jrd-section-label {
  color: #0ea5e9;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-size: 10px;
}

.jrd-section-title {
  color: #0f172a;
  letter-spacing: -1px;
  margin-bottom: 20px;
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 800;
  line-height: 1.05;
}

.jrd-section-desc {
  color: #5a6478;
  max-width: 700px;
  margin-bottom: 56px;
  margin-right: 0;
  padding-right: 0;
  font-size: 15px;
  line-height: 1.8;
}

.jrd-section-inner {
  color: #0f172a;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
}

.jrd-reels {
  background-color: #fff;
  border-top: 1px solid #dce2e9;
  padding: 51px 0 39px;
}

.jrd-reels-track {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 48px;
  display: grid;
}

.jrd-reel-card {
  width: 100%;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  display: block;
}

.jrd-reel-card:hover {
  z-index: 2;
  transform: scale(1.06);
}

.jrd-reel-thumb {
  aspect-ratio: 16 / 9;
  background-color: #dce2e9;
  border-radius: 14px;
  width: 100%;
  transition: box-shadow .35s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px #0f172a14, 0 1px 4px #0f172a0a;
}

.jrd-reel-thumb:hover {
  box-shadow: 0 18px 40px #0f172a2e, 0 6px 14px #0f172a1a;
}

.jrd-reel-play {
  opacity: 0;
  color: #fff;
  background-color: #0f172a8c;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  transition: opacity .25s;
  display: flex;
  position: absolute;
  inset: 0;
}

.jrd-reel-info {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  align-items: center;
  padding: 22px 4px 0;
  display: flex;
}

.jrd-reel-year {
  color: #0ea5e92e;
  letter-spacing: -3px;
  flex-shrink: 0;
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
}

.jrd-reel-meta {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-direction: column;
  display: flex;
}

.jrd-reel-title {
  color: #0f172a;
  letter-spacing: .3px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.jrd-reel-tag {
  color: #0ea5e9;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #0ea5e91f;
  border-radius: 8px;
  width: fit-content;
  padding: 3px 10px;
  font-size: 10px;
  display: inline-block;
}

.jrd-ai-work {
  background-color: #f4f6f8;
  border-top: 1px solid #dce2e9;
  padding: 120px 0;
}

.jrd-ai-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
}

.jrd-ai-card {
  aspect-ratio: 4 / 3;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #dce2e9;
  position: relative;
  overflow: hidden;
}

.jrd-ai-large {
  aspect-ratio: 16 / 9;
  grid-column-start: span 2;
}

.jrd-ai-card-bg {
  background-color: #fff;
  transition: transform .5s;
  position: absolute;
  inset: 0;
}

.jrd-ai-card-bg.inline-div-0 {
  background-color: #141414;
}

.jrd-ai-card-bg.inline-div-1 {
  background-color: #111;
}

.jrd-ai-card-bg.inline-div-2 {
  background-color: #161616;
}

.jrd-ai-card-bg.inline-div-3 {
  background-color: #131313;
}

.jrd-ai-card-bg.inline-div-4 {
  background-color: #121212;
}

.jrd-ai-card-content {
  z-index: 2;
  padding: 28px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.jrd-ai-card-tag {
  opacity: 1;
  color: #0ea5e9;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 10px;
}

.jrd-ai-card-title {
  color: #0f172a;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.jrd-ai-card-desc {
  opacity: 0;
  color: #5a6478;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.65;
  transition: opacity .3s, transform .3s;
  transform: translateY(6px);
}

.jrd-ai-cta {
  color: #0f172a;
  text-align: right;
  max-width: 1320px;
  margin: 44px auto 0;
  padding: 0 48px;
}

.jrd-btn-outline {
  color: #5a6478;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border-bottom: 1px solid #0f172a2e;
  padding-bottom: 4px;
  font-size: 12px;
  text-decoration: none;
  transition: color .2s, border-color .2s;
  display: inline-block;
}

.jrd-projects {
  background-color: #fff;
  border-top: 1px solid #dce2e9;
  padding: 120px 0;
}

.jrd-filter-bar {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-wrap: wrap;
  max-width: 1320px;
  margin: 44px auto;
  padding: 0 48px;
  display: flex;
}

.jrd-filter-btn {
  color: #5a6478;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #0000;
  border: 1px solid #0f172a2e;
  padding: 9px 24px;
  font-family: -apple-system, Helvetica Neue, Arial, sans-serif;
  font-size: 11px;
  font-weight: 500;
  transition: all .2s;
}

.jrd-filter-btn:hover {
  color: #fff;
  background-color: #0ea5e9;
  border-color: #0ea5e9;
}

.jrd-filter-btn.active {
  color: #0a0a0a;
  background-color: #fff;
  border-color: #fff;
}

.jrd-projects-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  display: grid;
}

.jrd-project-card {
  aspect-ratio: 4 / 3;
  color: inherit;
  background-color: #fff;
  border: 1px solid #dce2e9;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.jrd-project-thumb {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.jrd-project-placeholder {
  color: #0f172a14;
  letter-spacing: 5px;
  background-color: #f4f6f8;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-weight: 900;
  transition: background .3s;
  display: flex;
}

.jrd-project-info {
  z-index: 2;
  padding: 20px 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.jrd-project-cat {
  color: #0ea5e9;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-size: 10px;
  display: block;
}

.jrd-project-title {
  color: #0f172a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.jrd-skills-bar {
  background-color: #fff;
  border-top: 1px solid #dce2e9;
  border-bottom: 1px solid #dce2e9;
  padding: 32px 0;
  overflow: hidden;
}

.jrd-skills-inner {
  grid-column-gap: 28px;
  grid-row-gap: 28px;
  color: #5a6478;
  letter-spacing: .04em;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 48px;
  font-size: 13px;
  display: flex;
}

.jrd-footer {
  background-color: #0f172a;
  padding: 56px 0 32px;
}

.jrd-footer-inner {
  color: #f1f5f9;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1320px;
  margin: 0 auto 56px;
  padding: 0 48px;
  display: flex;
}

.jrd-footer-logo {
  color: #38bdf8;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-family: JetBrains Mono, monospace;
  font-size: 11px;
  font-weight: 500;
}

.jrd-footer-tagline {
  color: #f1f5f9;
  letter-spacing: -.015em;
  max-width: 560px;
  font-size: 28px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
}

.jrd-footer-links {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.jrd-footer-bottom {
  border-top: 1px solid #94a3b82e;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 48px 0;
  display: flex;
}

.jrd-ai-2cards-row {
  display: contents;
}

.jrd-video-test {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-direction: column;
  align-items: center;
  margin-top: 48px;
  padding: 48px 24px;
  display: flex;
  position: static;
}

.jrd-video-test-label {
  color: #0ea5e9;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-family: JetBrains Mono, monospace;
  font-size: 11px;
}

.jrd-video-test-clip {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
}

.jrd-nav-link {
  color: #ffffffd9;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s;
}

.jrd-nav-link:hover {
  color: #fff;
}

.jrd-reel-thumb-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.jrd-tile {
  aspect-ratio: 1;
  color: #0f172a;
  cursor: pointer;
  background-color: #fff;
  border: .5px solid #dce2e9;
  border-radius: 16px;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  text-decoration: none;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px #0f172a0f, 0 1px 4px #0f172a0a;
}

.jrd-tile:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px #0f172a24, 0 8px 16px #0f172a14;
}

.jrd-tile-top {
  display: block;
}

.jrd-tile-cat {
  color: #0ea5e9;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: JetBrains Mono, monospace;
  font-size: 11px;
  font-weight: 500;
  display: block;
}

.jrd-tile-title {
  letter-spacing: -.015em;
  margin: 0;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
}

.jrd-tile-bottom {
  grid-column-gap: 16px;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.jrd-tile-desc {
  opacity: .7;
  max-width: 75%;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.jrd-tile-arrow {
  color: #0ea5e9;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
}

.jrd-tile-dark {
  color: #f1f5f9;
  background-color: #0f172a;
  border-style: none;
}

.link, .link-2, .link-3, .link-4 {
  color: #fff;
}

.jrd-about {
  background-color: #fff;
  border-top: 1px solid #dce2e9;
  padding: 15px 0 1px;
}

.jrd-work {
  background-color: #f4f6f8;
  border-top: 1px solid #dce2e9;
  padding-top: 120px;
  padding-bottom: 120px;
}

.jrd-work-filters {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-wrap: wrap;
  max-width: 1320px;
  margin: 32px auto 44px;
  padding-left: 48px;
  padding-right: 48px;
  display: flex;
}

.jrd-work-filter-btn {
  color: #5a6478;
  letter-spacing: .05em;
  cursor: pointer;
  background-color: #0000;
  border: .5px solid #0f172a29;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
}

.jrd-work-filter-btn:hover {
  color: #0f172a;
  border-color: #0f172a;
}

.jrd-work-filter-active {
  color: #fff;
  background-color: #0f172a;
  border-color: #0f172a;
}

.jrd-work-content {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
  position: relative;
}

.jrd-work-grid {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 32px;
  display: none;
}

.jrd-work-grid.jrd-work-grid-active.jrd-anim-grid-1-2 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.jrd-work-grid-active {
  display: grid;
}

.jrd-work-panel {
  aspect-ratio: 4 / 3;
  opacity: 1;
  cursor: pointer;
  color: inherit;
  background-color: #fff;
  border: .5px solid #dce2e9;
  border-radius: 16px;
  text-decoration: none;
  transition: opacity .4s, transform .4s, box-shadow .4s;
  display: block;
  position: relative;
  overflow: hidden;
  transform: translateY(0);
  box-shadow: 0 4px 16px #0f172a0f, 0 1px 4px #0f172a0a;
}

.jrd-work-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px #0f172a24, 0 4px 12px #0f172a14;
}

.jrd-work-panel-thumb {
  color: #0f172a14;
  letter-spacing: 5px;
  -webkit-text-fill-color: inherit;
  background-color: #f4f6f8;
  background-clip: border-box;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  position: absolute;
  inset: 0 0 76px;
}

.jrd-work-panel-info {
  background-color: #fff;
  border-top: .5px solid #dce2e9;
  padding: 16px 20px 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.jrd-work-panel-cat {
  color: #0ea5e9;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 4px;
  font-family: JetBrains Mono, monospace;
  font-size: 10px;
  display: block;
}

.jrd-work-panel-title {
  color: #0f172a;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.jrd-work-viewall-wrap {
  justify-content: center;
  margin-top: 16px;
  display: flex;
}
.jrd-work-grid > .jrd-work-viewall-wrap { grid-column: 1 / -1; }

.jrd-work-viewall {
  grid-column-gap: 10px;
  opacity: 1;
  color: #0f172a;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  background-color: #0000;
  border: .5px solid #0f172a2e;
  border-radius: 999px;
  align-items: center;
  padding: 14px 32px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity .4s, transform .4s, background-color .2s, color .2s, border-color .2s;
  display: inline-flex;
  transform: translateY(0);
}

.jrd-work-viewall:hover {
  color: #fff;
  background-color: #0f172a;
  border-color: #0f172a;
}

.navigation.jrd-nav.inline-nav-0 {
  background-color: #0d1117f2;
  border-bottom: 1px solid #ffffff0d;
}

.jrd-nav {
  z-index: 100;
  padding: 10px 48px;
  position: sticky;
  top: 0;
}

.jrd-inner-hero {
  background-color: #fff;
  padding-top: 140px;
  padding-bottom: 80px;
}

.jrd-back-home {
  color: #5a6478;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 32px;
  font-family: \"JetBrains Mon;
  font-size: 20px;
  line-height: 30px;
  text-decoration: none;
  display: inline-block;
}

.jrd-back-home:hover {
  color: #0f172a;
}

.jrd-cta-strip {
  color: #f1f5f9;
  text-align: center;
  background-color: #0f172a;
  padding-top: 100px;
  padding-bottom: 100px;
}

.jrd-cta-eyebrow {
  color: #38bdf8;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: JetBrains Mono, monospace;
  font-size: 11px;
}

.jrd-cta-title {
  color: #f1f5f9;
  letter-spacing: -.02em;
  max-width: 640px;
  margin: 0 auto 36px;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
}

.jrd-anim-page-root {
  display: contents;
}

.jrd-anim-filters {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-direction: column;
  align-items: center;
  padding: 24px 8% 8px;
  display: flex;
}

.jrd-anim-filter-row {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
}

.jrd-anim-subfilter-row {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-top: 1px solid #ffffff0f;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 760px;
  padding-top: 6px;
  display: none;
}

.jrd-anim-subfilter-row.jrd-anim-subfilter-visible {
  display: flex;
}

.jrd-anim-subfilter-active {
  color: #e5e7eb;
  background-color: #63b3ed2e;
  border-color: #63b3ed80;
}

.jrd-anim-grid-wrap {
  padding: 24px 8% 80px;
  position: relative;
}

.jrd-anim-grid {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  display: grid;
}

.jrd-anim-panel {
  cursor: pointer;
  color: inherit;
  background-color: #111827;
  border: 1px solid #ffffff0f;
  border-radius: 14px;
  text-decoration: none;
  transition: transform .25s, border-color .25s;
  display: block;
  position: relative;
  overflow: hidden;
}

.jrd-anim-panel-meta {
  padding: 12px 14px;
}

.jrd-anim-panel-name {
  color: #e5e7eb;
  letter-spacing: .01em;
  font-size: 15px;
  font-weight: 500;
}

.jrd-anim-panel-tag {
  color: #6b7280;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 4px;
  font-size: 11px;
}

.jrd-anim-panel-hidden,
.jrd-anim-panel.jrd-anim-panel-hidden,
.jrd-anim-panel-1.jrd-anim-panel-hidden {
  display: none !important;
}

.jrd-anim-empty {
  color: #6b7280;
  text-align: center;
  border: 1px dashed #ffffff14;
  border-radius: 14px;
  padding: 60px 20px;
  display: none;
}

.jrd-anim-empty.jrd-anim-empty-visible {
  display: block;
}

.jrd-anim-empty-title {
  color: #e5e7eb;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 500;
}

.jrd-anim-empty-sub {
  font-size: 13px;
}

.jrd-anim-spotlight {
  z-index: 9999;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0;
}

.jrd-anim-spotlight.jrd-anim-spotlight-open {
  display: flex;
}

.jrd-anim-spotlight-backdrop {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: #080c14d9;
  position: absolute;
  inset: 0;
}

.jrd-anim-spotlight-panel {
  z-index: 1;
  background-color: #0f172a;
  border: 1px solid #ffffff14;
  border-radius: 18px;
  width: min(1100px, 92vw);
  max-height: 88vh;
  padding: 30px 36px;
  position: relative;
  overflow-y: auto;
}

.jrd-anim-spotlight-close {
  color: #9ca3af;
  cursor: pointer;
  background-color: #0000;
  border-style: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 28px;
  line-height: 1;
  transition: color .2s, background .2s;
  position: absolute;
  top: 14px;
  right: 18px;
}

.jrd-anim-spotlight-tag {
  color: #63b3ed;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-size: 11px;
}

.jrd-anim-spotlight-title {
  color: #f3f4f6;
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: 500;
}

.jrd-anim-spotlight-desc {
  color: #9ca3af;
  max-width: 680px;
  margin-bottom: 22px;
  font-size: 14px;
  line-height: 1.6;
}

.jrd-anim-spotlight-grid {
  grid-column-gap: 14px;
  grid-row-gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  display: grid;
}

.jrd-anim-clip {
  cursor: pointer;
  background-color: #111827;
  border: 1px solid #ffffff0f;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.jrd-anim-clip-label {
  color: #cbd5e1;
  letter-spacing: .04em;
  border-top: 1px solid #ffffff0a;
  padding: 8px 12px;
  font-size: 12px;
}

.jrd-anim-panel-batch {
  display: contents;
}

.jrd-anim-grid-wrap-1 {
  padding: 24px 6% 80px;
}

.jrd-anim-grid-1 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-columns: 1fr;
  max-width: 100%;
  margin: 0 auto;
}

.jrd-anim-spotlight-grid-1 {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  grid-template-columns: 1fr;
}

.jrd-anim-clip-1 {
  background-color: #0b1220;
}

.link-5 {
  color: #fff;
  background-color: #0000;
}

.link-6, .link-7, .link-8 {
  color: #fff;
}

.jrd-anim-body-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px;
  display: block;
}

.jrd-anim-filter-row-1 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
  display: flex;
}

.jrd-anim-subfilter-row-1 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  border-top: 1px solid #0f172a14;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 760px;
  margin: 0 auto 20px;
  padding-top: 6px;
  display: none;
}

.jrd-anim-subfilter-active-1 {
  color: #0f172a;
  background-color: #38bdf82e;
  border-color: #38bdf880;
}

.jrd-anim-grid-1-2 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-columns: 1fr;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
  display: grid;
}

.jrd-anim-panel-1 {
  cursor: pointer;
  color: inherit;
  background-color: #1e293b;
  border-radius: 14px;
  text-decoration: none;
  transition: transform .2s;
  display: block;
  position: relative;
  overflow: hidden;
}

.jrd-anim-panel-meta-1 {
  background-color: #0f172a;
  padding: 14px 16px;
}

.jrd-anim-panel-name-1 {
  color: #f1f5f9;
  letter-spacing: .01em;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.jrd-anim-panel-tag-1 {
  color: #94a3b8;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-top: 6px;
  font-family: JetBrains Mono, monospace;
  font-size: 11px;
}

.jrd-anim-empty-1 {
  color: #5a6478;
  text-align: center;
  border: 1px dashed #0f172a1f;
  border-radius: 14px;
  max-width: 680px;
  margin: 0 auto;
  padding: 60px 20px;
  display: none;
}

.jrd-anim-empty-title-1 {
  color: #0f172a;
  margin-bottom: 8px;
  font-size: 18px;
  font-weight: 600;
}

.jrd-anim-empty-sub-1 {
  font-size: 14px;
}

.jrd-anim-spotlight-close-1 {
  color: #9ca3af;
  cursor: pointer;
  background-color: #0000;
  border-style: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 28px;
  line-height: 1;
  position: absolute;
  top: 14px;
  right: 18px;
}

.jrd-anim-spotlight-tag-1 {
  color: #38bdf8;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-family: JetBrains Mono, monospace;
  font-size: 11px;
}

.jrd-anim-spotlight-title-1 {
  color: #f1f5f9;
  margin-bottom: 10px;
  font-size: 26px;
  font-weight: 500;
}

.jrd-anim-spotlight-desc-1 {
  color: #94a3b8;
  max-width: 680px;
  margin-bottom: 22px;
  font-size: 14px;
  line-height: 1.6;
}

.jrd-anim-spotlight-grid-1-2 {
  grid-column-gap: 18px;
  grid-row-gap: 18px;
  grid-template-columns: 1fr;
  display: grid;
}

.jrd-anim-clip-1-2 {
  cursor: pointer;
  background-color: #0b1220;
  border: 1px solid #ffffff0f;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.jrd-anim-clip-label-1 {
  color: #cbd5e1;
  letter-spacing: .04em;
  border-top: 1px solid #ffffff0a;
  padding: 8px 12px;
  font-size: 12px;
}

@media screen and (max-width: 991px) {
  .jrd-nav-links {
    display: none;
  }

  .jrd-hero {
    padding: 100px 24px 60px;
  }

  .jrd-section-inner {
    padding: 0 24px;
  }

  .jrd-reels-track {
    padding: 40px 24px 16px;
  }

  .jrd-ai-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 24px;
  }

  .jrd-ai-large {
    grid-column-start: span 2;
  }

  .jrd-ai-cta {
    padding: 0 24px;
  }

  .jrd-filter-bar {
    margin: 32px auto;
    padding: 0 24px;
  }

  .jrd-projects-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 24px;
  }

  .jrd-skills-inner {
    padding: 0 24px;
  }

  .jrd-footer-inner {
    grid-column-gap: 36px;
    grid-row-gap: 36px;
    flex-direction: column;
    padding: 0 24px;
  }

  .jrd-footer-links {
    align-items: flex-start;
  }

  .jrd-footer-bottom {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    text-align: center;
    flex-direction: column;
    padding: 20px 24px 0;
  }
}

@media screen and (max-width: 767px) {
  .jrd-hero-title {
    font-size: clamp(52px, 16vw, 80px);
  }

  .jrd-reel-card {
    width: calc(100vw - 48px);
  }

  .jrd-ai-grid {
    grid-template-columns: 1fr;
  }

  .jrd-ai-large {
    aspect-ratio: 4 / 3;
    grid-column-start: span 1;
  }

  .jrd-projects-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 479px) {
  .jrd-hero {
    padding: 100px 20px 60px;
  }

  .jrd-hero-title {
    letter-spacing: -2px;
    font-size: clamp(44px, 18vw, 64px);
  }
}

/* ===== runtime-injected blocks (rig tabs, yt modal, reveal) ===== */

/* Captured from jrd-animation.webflow.io — site-level injected <style> blocks (runtime output of registered inline scripts), 2026-06-06.
   These are the Webflow-workaround styles (attribute selectors, imgraw fixes). The clean rebuild should translate these to proper classes.
   B8 superseded by B9 (yt-modal versions); keep B9. */

/* B1 — Webflow boilerplate */
.wf-force-outline-none[tabindex="-1"]:focus{outline:none;}

/* B2 — rig tabs + tabpanels (rigging page, site-registered) */
[role="tablist"][aria-label="Rig case studies"]{display:flex;flex-wrap:wrap;gap:8px;max-width:1320px;margin:32px auto 44px;padding:0 48px;}
[role="tab"][data-rig]{display:inline-flex;align-items:baseline;gap:8px;background:transparent!important;color:#5A6478!important;border:0.5px solid rgba(15,23,42,0.16)!important;border-radius:999px!important;padding:10px 22px!important;font:500 12px/1.3 system-ui,-apple-system,Helvetica,Arial,sans-serif!important;letter-spacing:0.05em!important;text-transform:none!important;text-decoration:none!important;cursor:pointer;box-shadow:none!important;}
[role="tab"][data-rig][aria-selected="true"]{background:#0F172A!important;color:#FFFFFF!important;border-color:#0F172A!important;}
[role="tab"][data-rig]>span:first-child{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:inherit;opacity:0.7;}
[role="tab"][data-rig]>span+span{font-size:12px;}
[role="tab"][data-rig]:hover{border-color:#0F172A!important;}
section[data-rig][role="tabpanel"]{display:none;max-width:1320px;margin:0 auto;padding:0 48px 80px;color:#0F172A;}
section[data-rig][role="tabpanel"][data-active="1"]{display:block;}
section[data-rig][role="tabpanel"]>div:first-child{margin-bottom:32px;}
section[data-rig][role="tabpanel"]>div:first-child>div:first-child{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:#0EA5E9;margin-bottom:16px;}
section[data-rig][role="tabpanel"]>div:first-child>h2{font:700 clamp(26px,3vw,32px)/1.1 system-ui,-apple-system,Helvetica,Arial,sans-serif;letter-spacing:-0.5px;color:#0F172A;margin:0 0 18px;}
section[data-rig][role="tabpanel"]>div:first-child>p{font:400 15px/1.75 system-ui,-apple-system,Helvetica,Arial,sans-serif;color:#5A6478;max-width:760px;margin:0;}

/* B3 — reel grids + .jrd-rig-reel reel cards */
section[data-rig]>div:nth-child(2){display:grid;gap:16px;grid-template-columns:repeat(2,1fr);}
section[data-rig="salena"]>div:nth-child(2),section[data-rig="marika"]>div:nth-child(2),section[data-rig="gemz"]>div:nth-child(2){grid-template-columns:minmax(0,720px);}
@media(max-width:760px){section[data-rig]>div:nth-child(2){grid-template-columns:1fr!important;}}
.jrd-rig-reel{position:relative!important;display:block!important;aspect-ratio:16/9;background:#0F172A!important;border:0.5px solid rgba(15,23,42,.16)!important;border-radius:12px!important;overflow:hidden!important;text-decoration:none!important;padding:0!important;box-shadow:none!important;transition:transform .25s,box-shadow .25s;}
.jrd-rig-reel:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,23,42,.18);}
.jrd-rig-reel>img,.jrd-rig-reel>imgraw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:opacity .25s,transform .4s;display:block;}
.jrd-rig-reel:hover>img{opacity:.95;transform:scale(1.03);}
.jrd-rig-reel>span:not([aria-hidden]):first-of-type{display:none;}
.jrd-rig-reel>span[aria-hidden="true"]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;font-size:38px;color:#FFF;text-shadow:0 2px 10px rgba(0,0,0,.45);pointer-events:none;}
.jrd-rig-reel>span:last-child{position:absolute;left:18px;bottom:18px;z-index:2;display:flex;flex-direction:column;gap:4px;max-width:calc(100% - 36px);}
.jrd-rig-reel>span:last-child>span:first-child{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#38BDF8;}
.jrd-rig-reel>span:last-child>span:last-child{font:500 14px/1.3 system-ui,sans-serif;color:#F1F5F9;}

/* B4 — salena galleries + [data-label] tiles */
section[data-rig="salena"]>div:nth-child(n+3){margin-top:56px;padding-top:48px;border-top:0.5px solid #DCE2E9;}
section[data-rig="salena"]>div:nth-child(n+3)>div:first-child>div:first-child{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#0EA5E9;margin-bottom:12px;}
section[data-rig="salena"]>div:nth-child(n+3)>div:first-child>h3{font:600 22px/1.2 system-ui,sans-serif;color:#0F172A;margin:0 0 14px;letter-spacing:-.2px;}
section[data-rig="salena"]>div:nth-child(n+3)>div:first-child>p{font:400 14px/1.7 system-ui,sans-serif;color:#5A6478;max-width:760px;margin:0 0 28px;}
section[data-rig="salena"]>div:nth-child(3)>div:nth-child(2){display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
[data-label]{position:relative;border-radius:10px;overflow:hidden;background:#0F172A;border:0.5px solid #DCE2E9;aspect-ratio:1/1;}
[data-label]>img,[data-label]>imgraw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
[data-label]::after{content:attr(data-label);position:absolute;left:8px;bottom:8px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#F1F5F9;background:rgba(8,12,20,.7);padding:4px 8px;border-radius:6px;}

/* B5 — salena facial portrait grid */
section[data-rig="salena"]>div:nth-child(4)>div:nth-child(2){margin-bottom:24px;}
section[data-rig="salena"]>div:nth-child(4)>div:nth-child(2)>img,section[data-rig="salena"]>div:nth-child(4)>div:nth-child(2)>imgraw{display:block;width:100%;height:auto;border-radius:10px;}
section[data-rig="salena"]>div:nth-child(4)>div:nth-child(3){display:grid;gap:10px;grid-template-columns:repeat(3,1fr);}
section[data-rig="salena"]>div:nth-child(4)>div:nth-child(3)>div{position:relative;aspect-ratio:1/1;background:#5A6478;border-radius:8px;overflow:hidden;}
section[data-rig="salena"]>div:nth-child(4)>div:nth-child(3)>div>img,section[data-rig="salena"]>div:nth-child(4)>div:nth-child(3)>div>imgraw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
section[data-rig="salena"]>div:nth-child(4)>div:nth-child(3)>div>span{position:absolute;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#F1F5F9;text-shadow:0 1px 4px rgba(0,0,0,.7);z-index:2;}
section[data-rig="salena"]>div:nth-child(4)>div:nth-child(3)>div>span:first-of-type{top:8px;left:8px;}
section[data-rig="salena"]>div:nth-child(4)>div:nth-child(3)>div>span:last-of-type{bottom:8px;left:8px;}

/* B6 — marika process articles ([data-kind] media) */
section[data-rig="marika"]>div:nth-child(3){margin-top:56px;display:flex;flex-direction:column;gap:0;}
section[data-rig="marika"]>div:nth-child(3)>article{display:grid;grid-template-columns:64px 1fr;gap:24px;padding:48px 0;border-top:0.5px solid #DCE2E9;align-items:start;}
section[data-rig="marika"]>div:nth-child(3)>article:first-child{border-top:none;padding-top:0;}
section[data-rig="marika"]>div:nth-child(3)>article>div:first-child{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#0EA5E9;padding-top:4px;}
section[data-rig="marika"]>div:nth-child(3)>article>div:nth-child(2)>h3{font:600 22px/1.2 system-ui,sans-serif;color:#0F172A;margin:0 0 12px;letter-spacing:-.2px;}
section[data-rig="marika"]>div:nth-child(3)>article>div:nth-child(2)>p{font:400 14px/1.7 system-ui,sans-serif;color:#5A6478;max-width:760px;margin:0 0 24px;}
section[data-rig="marika"]>div:nth-child(3)>article>div:nth-child(3){grid-column:1/-1;border-radius:10px;overflow:hidden;background:#F4F6F8;}
section[data-rig="marika"]>div:nth-child(3)>article>div[data-kind]>img,section[data-rig="marika"]>div:nth-child(3)>article>div[data-kind]>imgraw{display:block;width:100%;height:auto;}
section[data-rig="marika"]>div:nth-child(3)>article>div[data-kind="video"]>video{display:block;width:100%;height:auto;}
@media(max-width:760px){section[data-rig="marika"]>div:nth-child(3)>article{grid-template-columns:1fr;gap:12px;}section[data-rig="marika"]>div:nth-child(3)>article>div:nth-child(3){grid-column:auto;}}

/* B9 — yt-modal (latest version; B7/B8 are older dupes from the script-version quirk) */
#yt-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(8,12,20,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:24px;cursor:pointer;}
#yt-modal[data-open="1"]{display:flex;}
#yt-modal>div{position:relative;width:min(1200px,92vw);aspect-ratio:16/9;background:#000;border-radius:8px;overflow:visible!important;cursor:default;}
#yt-mount{position:absolute;inset:0;border-radius:8px;overflow:hidden;}
#yt-modal #yt-mount iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
#yt-close{position:absolute;top:-44px;right:0;background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:2;}
#yt-close:hover{border-color:#fff;background:rgba(255,255,255,.12);}
@media(max-width:760px){#yt-close{top:auto;bottom:-44px;right:50%;transform:translateX(50%);}}

/* B10 — scroll-reveal (.ja) */
.ja{opacity:0;transition:opacity .7s ease,transform .7s ease;will-change:opacity,transform}
.ja-u{transform:translateY(24px)}
.ja-d{transform:translateY(-24px)}
.ja-l{transform:translateX(-24px)}
.ja-r{transform:translateX(24px)}
.ja-f{transform:none}
.ja-in{opacity:1!important;transform:none!important}

/* ===== static-rebuild compat layer ===== */
.jrd-nav-link.active-page{color:#fff}
a.jrd-tile{display:flex}
a.jrd-reel-card,a.jrd-work-panel{display:block;max-width:100%;text-decoration:none}
.jrd-anim-panel-1 video,.jrd-anim-panel video{display:block;width:100%;height:220px;object-fit:contain;background:#1f2937}
.jrd-inner-hero{padding:72px 0 8px}
.jrd-anim-spotlight-grid img,.jrd-anim-spotlight-grid video{display:block;width:100%;border-radius:10px}
.jrd-work-filters a{text-decoration:none}
#jrd-wrapper>.jrd-work-filters,.jrd-anim-filter-row{justify-content:flex-start;max-width:1320px;margin-left:auto;margin-right:auto}
.jrd-anim-filter-row-1,.jrd-anim-subfilter-row-1{justify-content:center}
.jrd-anim-subfilter-row-1.jrd-anim-subfilter-visible{display:flex}

/* ===== AI workflow card media thumbs (matches staging runtime transform) ===== */
.jrd-work-panel-thumb.jrd-thumb-media{background-color:#1f2937;background-size:contain;background-position:center;background-repeat:no-repeat;color:transparent}
.jrd-inner-hero{padding:140px 0 8px}

/* ===== animation page grid + clips modal + Jorra 2x ===== */
.jrd-anim-grid-main{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1280px;margin:0 auto;grid-auto-flow:dense}
@media(max-width:991px){.jrd-anim-grid-main{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.jrd-anim-grid-main{grid-template-columns:1fr}}
.jrd-anim-panel:hover{transform:translateY(-3px);border-color:#ffffff2e}
.jrd-panel-big{grid-column:span 2;grid-row:span 2}
.jrd-panel-big video{height:528px}
@media(max-width:600px){.jrd-panel-big{grid-column:auto;grid-row:auto}.jrd-panel-big video{height:220px}}
.jrd-clip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px}
@media(max-width:900px){.jrd-clip-grid{grid-template-columns:1fr}}
.jrd-anim-clip video{display:block;width:100%;height:280px;object-fit:contain;background:#0b1220}

/* ===== resume page ===== */
.jrd-resume{display:grid;grid-template-columns:320px 1fr;gap:32px;max-width:1320px;margin:24px auto 96px;padding:0 48px;align-items:start}
@media(max-width:900px){.jrd-resume{grid-template-columns:1fr;padding:0 24px}}
.jrd-resume-side{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px}
@media(max-width:900px){.jrd-resume-side{position:static}}
.jrd-resume-card{background:#fff;border:.5px solid #dce2e9;border-radius:16px;padding:24px;box-shadow:0 4px 16px #0f172a0f,0 1px 4px #0f172a0a}
.jrd-resume-side-label{color:#0ea5e9;letter-spacing:.18em;text-transform:uppercase;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;margin-bottom:14px}
.jrd-resume-contact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13px;color:#0f172a}
.jrd-resume-contact a{color:#0f172a;text-decoration:none;border-bottom:1px solid #0f172a1f}
.jrd-resume-contact a:hover{color:#0ea5e9;border-color:#0ea5e9}
.jrd-resume-skills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.jrd-resume-skills li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:.5px solid #eef1f5;font-size:13px;color:#0f172a}
.jrd-resume-skills li:last-child{border-bottom:none}
.jrd-resume-skills li span:last-child{color:#0ea5e9;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.08em;white-space:nowrap;padding-top:2px}
.jrd-resume-main{color:#0f172a;min-width:0}
.jrd-resume-main>section{margin-bottom:48px}
.jrd-resume-h{color:#0ea5e9;letter-spacing:.18em;text-transform:uppercase;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;margin-bottom:18px;padding-bottom:10px;border-bottom:.5px solid #dce2e9}
.jrd-resume-main p{font-size:14px;line-height:1.75;color:#5a6478;max-width:760px;margin:0 0 16px}
.jrd-resume-job{padding:22px 0;border-bottom:.5px solid #eef1f5}
.jrd-resume-job:last-child{border-bottom:none}
.jrd-resume-job-date{color:#0ea5e9;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.jrd-resume-job h3{font:600 19px/1.25 system-ui,-apple-system,Helvetica,Arial,sans-serif;letter-spacing:-.2px;margin:0 0 4px;color:#0f172a}
.jrd-resume-job-loc{color:#94a3b8;font-size:12px;margin-bottom:12px}

/* ===== app development ===== */
.jrd-app-soon{cursor:default;border-style:dashed!important;border-color:#cbd5e1!important;box-shadow:none!important;opacity:.75}
.jrd-app-soon:hover{transform:none;box-shadow:none!important}
.jrd-app-soon .jrd-work-panel-thumb{color:#cbd5e1;background:#f8fafc}

/* animation: single filtered result -> larger, centered, same landscape shape */
.jrd-anim-grid-main.jrd-anim-solo{grid-template-columns:600px !important;justify-content:center}
.jrd-anim-grid-main.jrd-anim-solo .jrd-anim-panel video,.jrd-anim-grid-main.jrd-anim-solo .jrd-anim-panel-1 video{height:320px}
@media(max-width:660px){.jrd-anim-grid-main.jrd-anim-solo{grid-template-columns:1fr !important}.jrd-anim-grid-main.jrd-anim-solo .jrd-anim-panel video,.jrd-anim-grid-main.jrd-anim-solo .jrd-anim-panel-1 video{height:220px}}

/* ===== clip play affordance + enlarged player ===== */
.jrd-clip-grid .jrd-anim-clip{cursor:pointer;position:relative}
.jrd-clip-grid .jrd-anim-clip::after{content:'\25B6';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:30px;color:#fff;opacity:0;transition:opacity .2s;text-shadow:0 2px 12px rgba(0,0,0,.6);pointer-events:none;z-index:2}
.jrd-clip-grid .jrd-anim-clip:hover::after{opacity:.92}
.jrd-clip-player{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:24px}
.jrd-clip-player.open{display:flex}
.jrd-clip-player-backdrop{position:absolute;inset:0;background:rgba(8,12,20,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.jrd-clip-player-panel{position:relative;z-index:1;width:min(1100px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:14px}
.jrd-clip-player-head{display:flex;align-items:center;gap:12px}
.jrd-clip-player-title{flex:1;color:#f1f5f9;font:600 16px/1.3 system-ui,-apple-system,sans-serif}
.jrd-clip-player-close{flex:none;color:#cbd5e1;font-size:24px;line-height:1;text-decoration:none;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);border-radius:50%}
.jrd-clip-player-close:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
.jrd-clip-player-stage{background:#0b1220;border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.jrd-clip-player-video{width:100%;max-height:68vh;display:block;background:#0b1220}
.jrd-clip-player-bar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.jrd-clip-player-bar>button{background:#1e293b;color:#e5e7eb;border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:10px 18px;font:600 13px system-ui,sans-serif;cursor:pointer}
.jrd-clip-player-bar>button:hover{border-color:#38bdf8;color:#fff}
.jrd-clip-speed{display:inline-flex;gap:6px;background:rgba(255,255,255,.05);padding:5px;border-radius:10px}
.jrd-clip-speed button{background:transparent;color:#cbd5e1;border:1px solid transparent;border-radius:7px;padding:6px 11px;font:600 12px system-ui,sans-serif;cursor:pointer}
.jrd-clip-speed button:hover{color:#fff}
.jrd-clip-speed button.on{background:#0ea5e9;border-color:#0ea5e9;color:#fff}

/* ===== Home motion enhancements (2026-06-11) — hover pop-ups, reel grow-and-push, tab choreography, ambient breathing ===== */

/* Featured project tiles — pop up on hover */
.jrd-tile { z-index: 0; }
.jrd-tile:hover {
  transform: translateY(-10px) scale(1.025);
  box-shadow: 0 28px 56px #0f172a2b, 0 10px 20px #0f172a17;
  z-index: 2;
}
.jrd-tile-arrow { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.jrd-tile:hover .jrd-tile-arrow { transform: translateX(5px); }
.jrd-tile-title { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.jrd-tile:hover .jrd-tile-title { transform: translateY(-2px); }

/* Work / apps panels — gentle pop + subtle thumb zoom */
.jrd-work-panel { z-index: 0; }
.jrd-work-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px #0f172a1c, 0 4px 10px #0f172a12;
  z-index: 2;
}
.jrd-work-panel-thumb { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.jrd-work-panel:hover .jrd-work-panel-thumb { transform: scale(1.03); }

/* Demo reels — hovered thumbnail grows and pushes the other two aside (flex-grow swap) */
.jrd-reels-track {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  grid-template-columns: none;
}
.jrd-reel-card {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow .5s cubic-bezier(.2, .8, .2, 1), transform .5s cubic-bezier(.2, .8, .2, 1);
}
.jrd-reels-track:hover .jrd-reel-card { flex-grow: .74; }
.jrd-reels-track .jrd-reel-card:hover { flex-grow: 1.9; transform: none; z-index: 2; }

/* Work-grid tab switch: outgoing cards drop + fade, incoming cards pull up + fade (staggered) */
.jrd-grid-out {
  animation: jrdGridOut .24s cubic-bezier(.4, 0, .6, 1) both;
  pointer-events: none;
}
@keyframes jrdGridOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(22px); }
}
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel {
  animation: jrdCardIn .5s cubic-bezier(.2, .8, .2, 1) backwards;
}
@keyframes jrdCardIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(1)  { animation-delay: 0ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(2)  { animation-delay: 45ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(3)  { animation-delay: 90ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(4)  { animation-delay: 135ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(5)  { animation-delay: 180ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(6)  { animation-delay: 225ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(7)  { animation-delay: 270ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(8)  { animation-delay: 315ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(9)  { animation-delay: 360ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(10) { animation-delay: 405ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(11) { animation-delay: 450ms; }
.jrd-work-grid-active.jrd-grid-in .jrd-work-panel:nth-child(12) { animation-delay: 495ms; }

/* Ambient breathing transition smoothing (opacity driven from JS with !important inline) */
.jrd-work-panel { transition: opacity .7s ease, transform .4s, box-shadow .4s; }

/* Stack reels on phones (no grow-and-push) */
@media screen and (max-width: 767px) {
  .jrd-reels-track { flex-direction: column; gap: 24px; }
  .jrd-reels-track .jrd-reel-card,
  .jrd-reels-track:hover .jrd-reel-card,
  .jrd-reels-track .jrd-reel-card:hover { flex: 1 1 auto; width: 100%; transform: none; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .jrd-tile:hover,
  .jrd-work-panel:hover,
  .jrd-reels-track .jrd-reel-card:hover { transform: none; }
  .jrd-reels-track:hover .jrd-reel-card { flex-grow: 1; }
  .jrd-grid-out,
  .jrd-work-grid-active.jrd-grid-in .jrd-work-panel { animation: none; }
}

/* ===== Work-card media thumbnails (2026-06-11) — cards mirror their source pages ===== */
.jrd-work-panel-thumb.jrd-thumb-cover { background-size: cover; }
.jrd-thumb-video { background: #1f2937; overflow: hidden; }
.jrd-thumb-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

/* ===== Featured-project tile background images (2026-06-12) ===== */
.jrd-tile-media { position: absolute; inset: 0; background-size: contain; background-position: center; background-repeat: no-repeat; z-index: 0; }
.jrd-tile-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #fff 0%, #fff 14%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 68%, #fff 88%, #fff 100%); }
.jrd-tile-dark .jrd-tile-media::after { background: linear-gradient(180deg, #0f172a 0%, #0f172a 14%, rgba(15,23,42,0) 30%, rgba(15,23,42,0) 68%, #0f172a 88%, #0f172a 100%); }
.jrd-tile-top, .jrd-tile-bottom { position: relative; z-index: 1; }