/* Native WP integration. Keeps the original visual system. */
.admin-bar .navbar{top:32px}
@media(max-width:782px){.admin-bar .navbar{top:46px}}
.navbar__brandtext{text-transform:uppercase}
.navbar__nav .navbar__link[aria-current="page"]{opacity:1}
.rj-extra-content{padding-top:clamp(2rem,6vw,6rem);padding-bottom:clamp(3rem,7vw,7rem);color:inherit}
.rj-extra-content a{text-decoration:underline}
.rj-extra-content img{height:auto;max-width:100%}
.rj-standard-page{padding-top:clamp(9rem,15vw,13rem);padding-bottom:8rem;min-height:60vh}
.rj-standard-page h1{font-size:clamp(2.5rem,7vw,7rem);line-height:1.05;text-transform:uppercase}
.rj-standard-page img{max-width:100%;height:auto}
.rj-standard-page .wp-block-gallery{display:flex;gap:1rem;flex-wrap:wrap}
.footer-contact__legal a{color:inherit;text-decoration:none}
.footer-contact__legal a:hover{text-decoration:underline}
/* page content and default core blocks remain usable */
.rj-extra-content .wp-block-columns{display:flex;gap:2rem;flex-wrap:wrap}
.rj-extra-content .wp-block-column{flex:1;min-width:220px}

/* RJ 3.0: accessibly hidden skip navigation, visible on keyboard focus only. */
body .skip-link,
body.story-page .skip-link {position:fixed !important;top:-120px !important;left:16px !important;z-index:100000 !important;padding:12px 18px !important;display:block !important;background:#2563eb !important;color:#fff !important;opacity:0 !important;clip:auto !important;pointer-events:none !important;}
body .skip-link:focus,
body.story-page .skip-link:focus {top:16px !important;opacity:1 !important;pointer-events:auto !important;}
/* Original portfolio was a two-column visual grid. Images and videos use the same layout. */
body.page--portfolio .projectsGrid{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
body.page--portfolio .pVisual .rj-project-preview-video {display:block;width:100%;height:100%;object-fit:contain;padding:clamp(12px,2.8vw,36px);pointer-events:none;}
body.page--portfolio .pVisual .rj-project-no-preview {font-family:var(--font-display,"Audiowide",sans-serif);font-size:clamp(16px,2vw,26px);text-align:center;padding:20px;}
@media(max-width:799px){body.page--portfolio .projectsGrid{grid-template-columns:1fr !important;}}
/* Media of either type is supported by the original project shot frame and lightbox. */
.project-shot video.rj-gallery-video{display:block;width:100%;height:auto;max-height:75vh;object-fit:contain;cursor:zoom-in;}
.project-shot:has(video) {overflow:hidden;}
.lightbox__stage .lightbox__video {max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 120px rgba(0,0,0,.75);}
.lightbox__stage .lightbox__video[hidden],.lightbox__stage .lightbox__img[hidden]{display:none !important;}
/* Close and gallery arrows: same geometry, glass treatment and hover/active feedback. */
.lightbox .lightbox__close {width:54px !important;height:54px !important;border-radius:0 !important;border:1px solid rgba(37,99,235,.35) !important;background:rgba(255,255,255,.08) !important;color:rgba(242,242,242,.95) !important;box-shadow:0 18px 55px rgba(0,0,0,.55) !important;backdrop-filter:blur(10px);display:grid;place-items:center;transition:transform .16s ease,background .16s ease,border-color .16s ease;}
.lightbox .lightbox__close:hover {transform:scale(1.04);background:rgba(255,255,255,.12) !important;border-color:rgba(37,99,235,.55) !important;}
.lightbox .lightbox__close svg{width:22px;height:22px;stroke:currentColor;}

/* =========================================================
   RJ v4 — PROJECT GALLERY / INTEGRATED EDITORIAL FRAME
   Native case-study components: square corners, near-black
   surfaces, thin rules and #2563eb accents. No thumbnail text.
   ========================================================= */
body.page--project .project-gallery__grid {
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  align-items:stretch;
  gap:clamp(12px,1.65vw,24px) !important;
}
body.page--project .project-gallery__grid .project-shot,
body.page--project figure.project-shot {
  position:relative !important;
  isolation:isolate;
  box-sizing:border-box;
  margin:0 !important;
  padding:clamp(8px,1vw,14px) !important;
  aspect-ratio:16/10 !important;
  min-width:0;
  min-height:0 !important;
  display:flex !important;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  border-radius:0 !important;
  border:1px solid rgba(255,255,255,.15) !important;
  background:linear-gradient(145deg,#111 0%,#0b0b0b 90%) !important;
  box-shadow:none !important;
  transition:border-color .2s ease,background .2s ease,transform .2s ease !important;
}
body.page--project figure.project-shot::before{
  content:"";
  position:absolute;
  z-index:2;
  left:0;top:0;
  width:28px;height:2px;
  background:#2563eb;
  opacity:.8;
  pointer-events:none;
  transition:width .2s ease,opacity .2s ease;
}
body.page--project figure.project-shot::after {
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:2;
  right:0;bottom:0;
  width:12px;height:12px;
  border-right:1px solid rgba(37,99,235,.45);
  border-bottom:1px solid rgba(37,99,235,.45);
  pointer-events:none;
}
body.page--project figure.project-shot img,
body.page--project figure.project-shot video.rj-gallery-video {
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center !important;
  border:0 !important;
  border-radius:0 !important;
  transform:none !important;
  cursor:zoom-in;
}
/* Descriptions are data, not content for the thumbnail grid. */
body.page--project .project-shot figcaption,
body.page--project .project-shot__caption,
body.page--project .project-shot figcaption[hidden] {
  display:none !important;
}
@media(hover:hover) and (pointer:fine){
  body.page--project figure.project-shot:hover {
    transform:translateY(-3px) !important;
    border-color:rgba(37,99,235,.8) !important;
    background:#121212 !important;
    box-shadow:0 12px 36px rgba(0,0,0,.24) !important;
  }
  body.page--project figure.project-shot:hover::before{width:70px;opacity:1;}
  body.page--project figure.project-shot:hover img{
    filter:brightness(1.03);
    transform:none !important;
  }
}
@media(max-width:1100px){
  body.page--project .project-gallery__grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:650px){
  body.page--project .project-gallery__grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body.page--project figure.project-shot {padding:9px !important;aspect-ratio:16/10 !important;}
}
/* =========================================================
   RJ v4 — LIGHTBOX AS A SINGLE CONSISTENT COMPONENT
   The counter, matching arrows/X, media and optional description
   belong to one squared dark panel rather than floating template UI.
   ========================================================= */
body .lightbox{
  padding:clamp(10px,2.5vw,30px) !important;
  background:rgba(3,3,4,.94) !important;
  backdrop-filter:blur(9px);
}
body .lightbox__stage {
  display:grid !important;
  grid-template-rows:58px minmax(0,1fr) auto !important;
  width:min(1260px,calc(100vw - 34px)) !important;
  max-width:1260px !important;
  height:min(88dvh,880px) !important;
  max-height:calc(100dvh - 20px) !important;
  padding:0 !important;
  margin:auto !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-top:2px solid #2563eb !important;
  background:#0b0b0b !important;
  border-radius:0 !important;
  box-shadow:0 30px 100px rgba(0,0,0,.6) !important;
}
body .lightbox__toolbar{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-width:0;
  padding:0 0 0 clamp(12px,2vw,26px);
  border-bottom:1px solid rgba(255,255,255,.12);
  background:#0d0d0d;
}
body .lightbox__label {
  font-family:"Audiowide",ui-sans-serif,system-ui,sans-serif;
  color:#f2f2f2;
  font-size:9px;
  line-height:1.2;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.14em;
}
body .lightbox__label span{color:#2563eb;margin:0 7px;}
body .lightbox__tools{display:flex;align-items:center;gap:18px;height:100%;}
body .lightbox__counter {
  position:static !important;
  inset:auto !important;
  transform:none !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  color:rgba(242,242,242,.68);
  font:400 10px/1.2 "Audiowide",ui-sans-serif,sans-serif;
  letter-spacing:.08em;
  white-space:nowrap;
}
body .lightbox__close{
  position:static !important;
  inset:auto !important;
  width:56px !important;
  height:56px !important;
  display:grid !important;
  place-items:center !important;
  flex:none;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  border-left:1px solid rgba(255,255,255,.14) !important;
  border-radius:0 !important;
  background:#111 !important;
  color:#f2f2f2 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  transform:none !important;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
body .lightbox__close:hover,
body .lightbox__close:focus-visible{
  background:#2563eb !important;
  color:#fff !important;
  border-color:#2563eb !important;
  transform:none !important;
}
body .lightbox__media {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  min-width:0;
  min-height:0;
  padding:clamp(12px,2vw,28px) clamp(54px,6vw,92px);
  background:linear-gradient(135deg,rgba(255,255,255,.018),transparent 35%),#080808;
}
body .lightbox__media .lightbox__img,
body .lightbox__media .lightbox__video {
  display:block;
  height:auto;
  width:auto;
  max-width:100% !important;
  max-height:100% !important;
  min-height:0;
  object-fit:contain !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  user-select:none;
}
body .lightbox__media .lightbox__img[hidden],
body .lightbox__media .lightbox__video[hidden] {display:none !important;}
body .lightbox__btn {
  position:absolute !important;
  z-index:3;
  top:50% !important;
  width:48px !important;
  height:58px !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(255,255,255,.17) !important;
  border-radius:0 !important;
  background:rgba(12,12,12,.95) !important;
  color:#f2f2f2 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  transform:translateY(-50%) !important;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease !important;
}
body .lightbox__btn--prev{left:0 !important;}
body .lightbox__btn--next{right:0 !important;}
body .lightbox__btn:hover,
body .lightbox__btn:focus-visible {
  background:#2563eb !important;
  border-color:#2563eb !important;
  transform:translateY(-50%) !important;
}
body .lightbox__caption {
  position:static !important;
  display:block !important;
  inset:auto !important;
  transform:none !important;
  width:100% !important;
  max-width:100% !important;
  padding:18px clamp(16px,3vw,36px) !important;
  margin:0 !important;
  border:0 !important;
  border-top:1px solid rgba(255,255,255,.12) !important;
  border-radius:0 !important;
  background:#0e0e0e !important;
  backdrop-filter:none;
  box-shadow:none !important;
  color:#e5e5e5 !important;
  text-align:left !important;
  font:400 11px/1.55 ui-sans-serif,system-ui,sans-serif !important;
  text-transform:none !important;
  letter-spacing:.035em !important;
  overflow-wrap:anywhere;
  pointer-events:auto;
}
body .lightbox__caption[hidden]{display:none !important;}
@media(max-width:650px){
  body .lightbox__stage{
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    height:min(86dvh,760px) !important;
    grid-template-rows:52px minmax(0,1fr) auto !important;
  }
  body .lightbox__label{font-size:8px;letter-spacing:.07em;}
  body .lightbox__tools{gap:10px;}
  body .lightbox__close{width:50px !important;height:50px !important;}
  body .lightbox__media{padding:10px 38px;}
  body .lightbox__btn{width:36px !important;height:54px !important;}
  body .lightbox__caption{padding:13px 15px !important;font-size:11px !important;}
}
@media(prefers-reduced-motion:reduce){
  body.page--project figure.project-shot,
  body .lightbox__close,
  body .lightbox__btn{transition:none !important;}
}
/* Older base styles used place-items:center for the image-only lightbox.
   v4 is a three-row grid: stretch the toolbar, media and caption fully. */
body .lightbox__stage {
  place-items:stretch !important;
  align-items:stretch !important;
  justify-items:stretch !important;
}
body .lightbox__toolbar,
body .lightbox__media,
body .lightbox__caption {
  width:100% !important;
  min-width:0;
  box-sizing:border-box;
}
body .lightbox__media {height:100% !important;}


/* =========================================================
   RJ v4.1 — hotfixes from review
   - no duplicate numbering in portfolio metadata
   - video preview has priority when uploaded
   - process page opens directly on dark hero like home
   ========================================================= */
body.page--process,
body.page--process .main,
body.story-page.page--process,
body.story-page.page--process .main{
  background:#0b0b0b !important;
}
body.page--process .main,
body.story-page.page--process .main{
  padding-top:0 !important;
}
body.page--process .process-intro,
body.story-page.page--process .process-intro{
  margin-top:0 !important;
  padding-top:160px !important;
  background:radial-gradient(circle at 75% 28%,rgba(37,99,235,.075),transparent 24%),#090909 !important;
}
@media(max-width:899px){
  body.page--process .process-intro,
  body.story-page.page--process .process-intro{
    padding-top:130px !important;
  }
}
/* Keep preview videos visually equivalent to image covers in portfolio cards. */
body.page--portfolio .pVisual .rj-project-preview-video,
body.page--portfolio .pVisual video.rj-project-preview-video{
  display:block !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  padding:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  background:transparent;
}
body.page--portfolio .pCard:hover .pVisual .rj-project-preview-video,
body.page--portfolio .pCard:hover .pVisual video.rj-project-preview-video{
  transform:none !important;
}


/* RJ Premium v5 — privacy / blog / LIVE links */
body.page--privacy .page-hero__inner::before,
body.page--blog .page-hero__inner::before {
  content:none !important;
  display:none !important;
}
/* Privacy: original explicit <br> separates two intact words, no extra wrap. */
@media (max-width:767px) {
  body.page--privacy .privacy-hero__title {
    max-width:100% !important;
    font-size:clamp(25px, 8.4vw, 58px) !important;
    line-height:1.02 !important;
    letter-spacing:-.038em !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  body.page--privacy .privacy-hero__title > span {
    display:inline-block !important;
    white-space:nowrap !important;
    max-width:100% !important;
  }
}
/* Explicit desktop-style LIVE label and arrow also at narrow breakpoints. */
body.page--portfolio .pLive {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end;
  gap:7px !important;
  white-space:nowrap !important;
  width:auto !important;
  height:auto !important;
  min-width:max-content !important;
  font-family:"Audiowide",sans-serif !important;
  font-size:10px !important;
  font-weight:400 !important;
  line-height:1.35 !important;
  letter-spacing:.07em !important;
  text-transform:uppercase !important;
  flex-shrink:0 !important;
}
body.page--portfolio .pLive > span{display:inline !important; visibility:visible !important; opacity:1 !important;}
body.page--portfolio .pLive__arrow{font-family:Arial, sans-serif !important;font-size:16px !important;line-height:1 !important;}
body.page--portfolio .pLive::before,body.page--portfolio .pLive::after{content:none !important;}

/* BLOG: editorial grid shares original portfolio geometry and palette. */
body.page--blog:not(.page--blog-single){background:#f2f2f2 !important; color:#0b0b0b !important;}
body.page--blog:not(.page--blog-single) .main{background:#f2f2f2 !important;}
body.page--blog .blog-hero .page-hero__inner::before{display:none !important;content:none !important;}
body.page--blog .blog-hero .portfolio-hero__copy{margin-top:0;}
body.page--blog .blog-hero .portfolio-hero__copy p{max-width:640px;}
body.page--blog .blog-hero .page-hero__title{overflow-wrap:anywhere;}
body.page--blog .blog-grid .pVisual{display:flex;align-items:center;justify-content:center;}
body.page--blog .blog-grid .pVisual img {display:block;width:100%;height:100%;object-fit:contain;}
body.page--blog .blog-grid .pVisual__placeholder{font-family:"Audiowide",sans-serif;font-size:clamp(32px,5vw,80px);font-weight:400;color:rgba(11,11,11,.30);padding:24px;}
body.page--blog .blog-grid .pMeta time{color:rgba(11,11,11,.5);white-space:nowrap;}
body.page--blog .blog-grid .pSub{min-height:0 !important;}
body.page--blog .blog-grid .pTitle{overflow-wrap:anywhere;}
body.page--blog .blog-pagination{max-width:min(1380px,calc(100vw - 128px));margin:0 auto;padding:0 0 90px;font-family:"Audiowide",sans-serif;}
body.page--blog .blog-pagination .nav-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
body.page--blog .blog-pagination a{color:#0b0b0b;text-decoration:underline;text-underline-offset:6px;}
body.page--blog .blog-pagination .current{color:#2563eb;}
body.page--blog .blog-empty{color:#0b0b0b;padding:40px 0 100px;}

/* SINGLE POST: no decorative pseudo header; readable editorial column. */
body.page--blog-single{background:#f2f2f2 !important;color:#0b0b0b !important;}
body.page--blog-single::before, body.page--blog-single::after{content:none !important;display:none !important;}
body.page--blog-single .main{background:#f2f2f2 !important; padding-top:110px !important;}
body.page--blog-single .blog-article{width:min(1200px,calc(100% - 104px));max-width:none;margin:0 auto;padding:clamp(60px,9vw,130px) 0 clamp(100px,11vw,170px);box-sizing:border-box;}
body.page--blog-single .blog-article__eyebrow,
body.page--blog-single .blog-article__meta{font-family:"Audiowide",sans-serif;font-size:10px;line-height:1.6;letter-spacing:.13em;text-transform:uppercase;color:#2563eb;}
body.page--blog-single .blog-article__title{font-family:"Audiowide",sans-serif;max-width:100%;margin:32px 0 34px;font-size:clamp(38px,6.4vw,100px);font-weight:400;line-height:1.06;text-transform:uppercase;letter-spacing:-.025em;overflow-wrap:break-word;text-wrap:balance;}
body.page--blog-single .blog-article__meta{display:flex;flex-wrap:wrap;gap:10px 22px;padding:22px 0 26px;border-top:1px solid rgba(11,11,11,.16);border-bottom:1px solid rgba(11,11,11,.16);color:#636363;font-size:9px;}
body.page--blog-single .blog-article__meta strong{font-weight:400;color:#0b0b0b;}
body.page--blog-single .blog-article__cover{margin:clamp(35px,5vw,70px) 0 0;}
body.page--blog-single .blog-article__cover img{display:block;width:100%;height:auto;max-height:690px;object-fit:contain;background:#e8e8e8;}
body.page--blog-single .blog-article__content{width:100%;max-width:none;margin:clamp(42px,6vw,80px) 0 0;font-size:clamp(17px,1.3vw,19px);line-height:1.8;color:#343434;overflow-wrap:break-word;}
body.page--blog-single .blog-article__content h2,body.page--blog-single .blog-article__content h3{color:#0b0b0b;font-family:"Audiowide",sans-serif;line-height:1.2;letter-spacing:-.015em;}
body.page--blog-single .blog-article__content h2{font-size:clamp(25px,3.1vw,42px);margin:2.4em 0 .8em;}
body.page--blog-single .blog-article__content h3{font-size:clamp(20px,2.4vw,28px);margin:2em 0 .7em;}
body.page--blog-single .blog-article__content p{margin:0 0 1.5em;}
body.page--blog-single .blog-article__content img{height:auto;max-width:100%;}
body.page--blog-single .blog-article__content a{color:#2563eb;text-decoration:underline;text-underline-offset:3px;}
body.page--blog-single .blog-article__content blockquote{margin:2em 0;padding:10px 0 10px 26px;border-left:2px solid #2563eb;}
body.page--blog-single .blog-article__back{display:inline-flex;gap:12px;margin-top:60px;color:#0b0b0b;border-bottom:1px solid #2563eb;padding-bottom:8px;font:10px "Audiowide",sans-serif;text-transform:uppercase;}
body.page--blog-single .blog-article__back span{color:#2563eb;}
@media(max-width:900px){
  body.page--blog .blog-pagination{max-width:calc(100vw - 36px);}
  body.page--blog-single .blog-article{width:calc(100% - 48px);}
}
@media(max-width:599px){
  body.page--blog-single .main{padding-top:96px !important;}
  body.page--blog-single .blog-article{padding-top:62px;width:calc(100% - 36px);}
  body.page--blog-single .blog-article__title{font-size:clamp(32px,9vw,54px);}
  body.page--blog-single .blog-article__meta{gap:8px 14px;font-size:8px;}
  body.page--blog-single .blog-article__content{font-size:16px;line-height:1.74;}
}


/* RJ v5.1 — single article: consistent wide shell and left-aligned reading column.
   Hero, author/date, media and return link share the same alignment as the body.
   The body can contain wider Gutenberg media without forcing prose to be too long. */
body.page--blog-single .blog-article__header,
body.page--blog-single .blog-article__meta,
body.page--blog-single .blog-article__cover,
body.page--blog-single .blog-article__content {
  min-width:0;
  box-sizing:border-box;
}
body.page--blog-single .blog-article__content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6, dl) {
  max-width:min(100%, 960px);
}
body.page--blog-single .blog-article__content > :first-child{margin-top:0;}
body.page--blog-single .blog-article__content > :where(figure, .wp-block-cover, .wp-block-gallery, .wp-block-columns, .wp-block-media-text, .wp-block-embed) {
  width:100%;max-width:100%;box-sizing:border-box;
}
body.page--blog-single .blog-article__content :where(img, video, iframe, embed) {
  max-width:100%;height:auto;
}
body.page--blog-single .blog-article__content :where(.wp-block-video, .wp-block-image, .wp-block-embed, .wp-block-gallery) {
  margin:clamp(24px,4vw,56px) 0;
}
body.page--blog-single .blog-article__content :where(.wp-block-video video, .wp-block-image img) {
  display:block;width:auto;max-width:100%;height:auto;
}
body.page--blog-single .blog-article__content .wp-block-image img{width:100%;}
body.page--blog-single .blog-article__content .wp-block-embed__wrapper,
body.page--blog-single .blog-article__content .wp-block-video {
  max-width:100%;
}
body.page--blog-single .blog-article__content :where(pre, .wp-block-code, .wp-block-preformatted, .wp-block-table) {
  max-width:100%;overflow-x:auto;
}
body.page--blog-single .blog-article__content :where(table){width:100%;border-collapse:collapse;}
body.page--blog-single .blog-article__content :where(th,td){border-bottom:1px solid rgba(11,11,11,.13);padding:12px;text-align:left;}
body.page--blog-single .blog-article__back{
  margin-top:clamp(42px,5vw,78px);
}
@media(max-width:900px){
  body.page--blog-single .blog-article__title{font-size:clamp(36px,8.7vw,78px);}
  body.page--blog-single .blog-article__content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6, dl){max-width:100%;}
}
@media(max-width:599px){
  body.page--blog-single .blog-article__content{margin-top:38px;font-size:16px;line-height:1.75;}
  body.page--blog-single .blog-article__title{font-size:clamp(32px,9vw,54px);}
  body.page--blog-single .blog-article__meta{column-gap:14px;row-gap:10px;}
}


/* RJ v5.2 — single blog post uses exactly the same responsive site frame
   as the blog archive and portfolio listing. No narrower editorial columns. */
body.page--blog-single .blog-article {
  width:var(--frame-width) !important;
  max-width:var(--frame-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
body.page--blog-single .blog-article__content > :where(p, ul, ol, blockquote, h2, h3, h4, h5, h6, dl) {
  width:100%;
  max-width:100% !important;
}

/* RJ v5.3: knowledge base main blog header without redundant introduction. */
body.page--blog .blog-hero .blog-hero__layout--no-description{grid-template-columns:minmax(0,1fr) !important;}
body.page--blog .blog-hero .blog-hero__layout--no-description .page-hero__title{width:100%;max-width:100%;}


/* RJ Premium 5.7 — Process / Architecture: descriptions must never escape the tile.
   The former circular .system-core::after was position:absolute with inset:-60px,
   causing the white paragraph to float over neighbouring tiles. */
@media (min-width:900px) {
  body.page--process .architecture .system-map {
    grid-template-rows:repeat(3,minmax(230px,auto)) !important;
    align-items:stretch !important;
  }
  body.page--process .architecture .system-node,
  body.page--process .architecture .system-core {
    min-height:230px !important;
    height:auto !important;
    box-sizing:border-box !important;
  }
}
body.page--process .architecture .system-core::after,
body.page--process .architecture .system-node::after {
  position:static !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  box-sizing:border-box !important;
  flex:none !important;
  float:none !important;
  clear:none !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  background:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  overflow-wrap:break-word !important;
  overflow-x:hidden !important;
  word-break:normal !important;
  white-space:normal !important;
  pointer-events:none !important;
}
body.page--process .architecture .system-core::before {
  content:none !important;
  display:none !important;
}
body.page--process .architecture .system-core::after{
  text-align:center !important;
  line-height:1.5 !important;
}
body.page--process .architecture .system-node::after{
  text-align:left !important;
  line-height:1.5 !important;
}
@media (min-width:900px) {
  body.page--process .architecture .system-core:hover::after,
  body.page--process .architecture .system-core:focus-visible::after,
  body.page--process .architecture .system-node:hover::after,
  body.page--process .architecture .system-node:focus-visible::after {
    max-height:220px !important;
    overflow-y:visible !important;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.page--process .architecture .system-node::after,
  body.page--process .architecture .system-core::after {
    transition:none !important;
    transform:none !important;
  }
}
/* Fade, rather than animating caption height: prevents clipped lines at hover entry. */
body.page--process .architecture .system-node::after,
body.page--process .architecture .system-core::after {
  transition:opacity .18s ease !important;
  transform:none !important;
}
@media(min-width:900px) {
  body.page--process .architecture .system-core:hover::after,
  body.page--process .architecture .system-core:focus-visible::after,
  body.page--process .architecture .system-node:hover::after,
  body.page--process .architecture .system-node:focus-visible::after {
    max-height:none !important;
    overflow:visible !important;
  }
}


/* RJ 5.8: The node marker belongs to the heading row, NOT the tile.
   On hover/focus/touch expansion both travel together within one CSS grid.
   Override legacy absolute positioning from home-story.css. */
body.page--process .architecture .system-map .system-node {
  display:grid !important;
  grid-template-columns:8px minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  column-gap:clamp(12px,1.1vw,16px) !important;
  row-gap:0 !important;
  align-items:center !important;
  align-content:center !important;
  justify-content:stretch !important;
  min-width:0 !important;
}
body.page--process .architecture .system-map .system-node::before,
body.page--process .architecture .system-map .system-node:hover::before,
body.page--process .architecture .system-map .system-node:focus-visible::before,
body.page--process .architecture .system-map .system-node.is-open::before {
  position:static !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:center !important;
  justify-self:center !important;
  margin:0 !important;
  transform:none !important;
  transition:none !important;
}
body.page--process .architecture .system-map .system-node__title {
  display:block !important;
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:center !important;
  min-width:0 !important;
  margin:0 !important;
  font:inherit !important;
  line-height:inherit !important;
  color:inherit !important;
  letter-spacing:inherit !important;
  text-transform:inherit !important;
  overflow-wrap:break-word;
}
body.page--process .architecture .system-map .system-node::after {
  grid-column:2 !important;
  grid-row:2 !important;
  min-width:0 !important;
  justify-self:stretch !important;
  align-self:start !important;
}
@media(max-width:767px) {
  body.page--process .architecture .system-map .system-node {
    grid-template-columns:8px minmax(0,1fr) !important;
    column-gap:13px !important;
    padding:18px 16px !important;
  }
}

/* RJ 6.0 — native new-project pages and mobile-friendly video previews. */
body.page--portfolio .pVisual__destination {
  position:absolute;inset:0;z-index:3;display:block;color:inherit;text-decoration:none;
}
body.page--portfolio .pVisual__destination:focus-visible {outline:3px solid #2563eb;outline-offset:-3px;}
body.page--portfolio .pVisual .rj-project-video-toggle {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:5;display:none;align-items:center;gap:12px;
  padding:12px 16px;border:1px solid rgba(255,255,255,.55);
  border-radius:0;background:rgba(11,11,11,.87);color:#fff;
  font:400 10px/1.3 "Audiowide",sans-serif;letter-spacing:.075em;
  cursor:pointer;box-shadow:0 12px 40px rgba(0,0,0,.25);backdrop-filter:blur(8px);
}
body.page--portfolio .pVisual .rj-project-video-toggle__symbol{font:700 16px/1 Arial,sans-serif;color:#fff;}
body.page--portfolio .pVisual .rj-project-video-toggle:focus-visible {outline:3px solid #2563eb;outline-offset:3px;}
@media(hover:none),(pointer:coarse){
  body.page--portfolio .pVisual .rj-project-video-toggle {display:flex;max-width:calc(100% - 24px);}
  body.page--portfolio .pVisual .rj-project-preview-video {pointer-events:auto;}
}
body.page--portfolio .pVisual .rj-project-video-toggle:focus-visible{display:flex;}
body.page--project .rj-custom-project__intro{
  margin:22px 0 0;max-width:960px;color:var(--muted,#777);font-size:clamp(16px,1.5vw,19px);line-height:1.65;
}
body.page--project .rj-custom-project__intro p{margin:0 0 1em;}
body.page--project .project-card__text p{margin:0 0 .75em;}
body.page--project .project-card__text p:last-child{margin-bottom:0;}

body.page--portfolio .pVisual .rj-project-video-toggle[aria-pressed="true"]{
  top:14px;left:auto;right:14px;transform:none;padding:9px 12px;
}

/* v6.1 — New project intro matches imported case-study typography. */
body.page--project .rj-custom-project__lead p{margin:0 0 .65em;}
body.page--project .rj-custom-project__lead p:last-child{margin-bottom:0;}