/* RJ Premium 6.9 — native, editable services and internal linking. */
body.page--service{background:#f2f2f2;color:#0b0b0b}
body.page--service .main{background:#f2f2f2 !important;padding-top:0 !important}
.rj-service-page{position:relative;background:#f2f2f2;color:#0b0b0b;padding:clamp(150px,14vw,240px) 0 0;overflow-x:clip}
.rj-service-page:before,.rj-seo-home-services:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(11,11,11,.027) 1px,transparent 1px),linear-gradient(90deg,rgba(11,11,11,.027) 1px,transparent 1px);background-size:88px 88px;mask-image:linear-gradient(to bottom,black,transparent 72%)}
.rj-service-wrap{position:relative;width:min(1440px,calc(100% - 96px));margin:0 auto}
.rj-service-eyebrow{font:400 10px/1.5 'Audiowide',sans-serif;letter-spacing:.15em;text-transform:uppercase;color:#2563eb;margin-bottom:clamp(35px,5vw,80px)}
.rj-service-page h1,.rj-seo-home-services h2{font:400 clamp(40px,6vw,94px)/.99 'Audiowide',sans-serif;letter-spacing:-.04em;text-transform:uppercase;overflow-wrap:break-word;max-width:18ch;margin:0 0 clamp(38px,6vw,84px);color:#0b0b0b}
.rj-service-lead{font-size:clamp(18px,2.3vw,29px);line-height:1.55;color:#343434;max-width:1050px;margin:0 0 clamp(65px,9vw,130px)}
.rj-service-section{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);align-items:start;gap:clamp(24px,6vw,110px);border-top:1px solid rgba(0,0,0,.18);padding:clamp(40px,5vw,72px) 0}
.rj-service-section h2{margin:0;font:400 clamp(20px,2.15vw,32px)/1.22 'Audiowide',sans-serif;letter-spacing:-.025em;color:#101010;text-transform:uppercase}
.rj-service-section p{margin:0;max-width:760px;font:400 clamp(16px,1.4vw,19px)/1.8 system-ui,sans-serif;color:#4d4d4d}
.rj-service-section a{color:#1457dc;text-underline-offset:4px}
.rj-service-siblings,.rj-service-related{padding:clamp(60px,8vw,120px) 0;border-top:1px solid rgba(0,0,0,.15)}
.rj-service-siblings h2,.rj-service-related h2{font:400 clamp(24px,3.2vw,44px)/1.15 'Audiowide',sans-serif;text-transform:uppercase;color:#0b0b0b;margin:0 0 32px}
.rj-service-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rj-service-links a{display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;color:#141414;font:400 12px/1.6 'Audiowide',sans-serif;text-transform:uppercase;min-height:102px;background:#f6f6f6;border:1px solid rgba(0,0,0,.14);padding:24px;transition:border-color .2s,background .2s}
.rj-service-links a span{color:#2563eb;font-size:17px}
.rj-service-links a:hover{background:#fff;border-color:#2563eb}
.rj-service-projects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.rj-service-contact{background:#0b0b0b;color:#f2f2f2;padding:clamp(42px,6vw,90px);margin-bottom:clamp(50px,9vw,140px)}
.rj-service-contact p{font:400 11px/1.3 'Audiowide',sans-serif;letter-spacing:.12em;color:#2563eb;text-transform:uppercase}
.rj-service-contact h2{max-width:18ch;font:400 clamp(30px,4vw,64px)/1.08 'Audiowide',sans-serif;color:#f2f2f2;text-transform:uppercase;margin:26px 0 45px}
.rj-service-primary{display:inline-flex;justify-content:space-between;gap:44px;min-width:min(100%,335px);padding:23px;background:#2563eb;color:#fff !important;text-decoration:none;font:400 12px 'Audiowide',sans-serif;text-transform:uppercase;transition:background .2s}
.rj-service-primary:hover{background:#111;border:1px solid #2563eb;padding:22px}
.rj-service-secondary{display:inline-flex;padding:24px;gap:20px;color:#f2f2f2 !important;text-decoration:underline;text-underline-offset:6px;font:400 10px 'Audiowide',sans-serif;text-transform:uppercase}
.rj-seo-home-services{position:relative;background:#f2f2f2;color:#0b0b0b;padding:clamp(85px,12vw,185px) 0;overflow:hidden}
.rj-seo-home-services h2{max-width:1300px}
.rj-seo-home-services h2 em{font-style:normal;color:#2563eb}
.rj-seo-home-services p{max-width:900px;color:#444;font:400 clamp(17px,2.1vw,26px)/1.6 system-ui,sans-serif;margin:0 0 54px}
.rj-seo-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(0,0,0,.15);border:1px solid rgba(0,0,0,.15)}
.rj-seo-home-grid a{min-height:190px;background:#f2f2f2;color:#0b0b0b;text-decoration:none;display:flex;flex-direction:column;align-items:start;justify-content:space-between;padding:clamp(25px,3vw,50px);gap:20px}
.rj-seo-home-grid a:hover{background:#fff}
.rj-seo-home-grid strong{font:400 clamp(17px,2vw,27px)/1.3 'Audiowide',sans-serif;text-transform:uppercase}
.rj-seo-home-grid span{font:400 10px 'Audiowide',sans-serif;color:#2563eb}
@media(max-width:900px){.rj-service-wrap{width:calc(100% - 48px)}.rj-service-section{grid-template-columns:1fr;gap:15px}.rj-service-projects{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.rj-service-page{padding-top:155px}.rj-service-wrap{width:calc(100% - 30px)}.rj-service-page h1{font-size:clamp(32px,10vw,52px);letter-spacing:-.045em}.rj-service-links,.rj-seo-home-grid{grid-template-columns:1fr}.rj-service-projects{grid-template-columns:1fr}.rj-service-primary{width:100%}.rj-service-secondary{padding-left:0}.rj-service-contact{padding:32px 20px}.rj-seo-home-grid a{min-height:130px}.rj-service-lead{font-size:18px}}


/* RJ Premium 7.0 — related projects, full-bleed CTA, editorial SEO & FAQ */
body.page--service .rj-service-related{padding-bottom:clamp(75px,9vw,145px)}
body.page--service .rj-service-related__lead{font-size:clamp(15px,1.55vw,19px);line-height:1.65;margin:-10px 0 34px;color:#565656}
body.page--service .rj-service-projects{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,46px) clamp(14px,2vw,30px);align-items:start}
body.page--service .rj-service-contact{width:100%;margin:0;padding:clamp(95px,9vw,150px) 0;background:#0b0b0b;color:#f2f2f2;position:relative}
body.page--service .rj-service-contact .rj-service-wrap{position:relative}
body.page--service .rj-service-contact p{color:#4c82ff;margin:0}
body.page--service .rj-service-contact h2{max-width:25ch;font-size:clamp(37px,5vw,82px);line-height:1.08;overflow-wrap:normal;margin:clamp(32px,4vw,54px) 0}
body.page--service .rj-service-contact__actions{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
body.page--service .rj-service-editorial{padding:clamp(85px,9vw,150px) 0 clamp(95px,10vw,165px)}
body.page--service .rj-service-seo-text{border-bottom:1px solid rgba(0,0,0,.18);padding-bottom:clamp(55px,7vw,90px)}
body.page--service .rj-service-seo-text h2,
body.page--service .rj-service-faq h2{font:400 clamp(26px,3.2vw,48px)/1.2 'Audiowide',sans-serif;text-transform:uppercase;color:#0b0b0b;margin:0 0 36px}
body.page--service .rj-service-seo-text p{max-width:1100px;font:400 clamp(16px,1.45vw,19px)/1.85 system-ui,sans-serif;color:#444;margin:0 0 28px}
body.page--service .rj-service-seo-text p:last-child{margin-bottom:0}
body.page--service .rj-service-faq{padding:clamp(65px,7vw,110px) 0 0}
body.page--service .rj-service-faq__items{border-top:1px solid rgba(0,0,0,.2)}
body.page--service .rj-service-faq__item{border-bottom:1px solid rgba(0,0,0,.2);margin:0;background:transparent}
body.page--service .rj-service-faq__item summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:26px;cursor:pointer;padding:clamp(22px,3vw,37px) 0;font:400 clamp(13px,1.35vw,18px)/1.5 'Audiowide',sans-serif;color:#0b0b0b}
body.page--service .rj-service-faq__item summary::-webkit-details-marker{display:none}
body.page--service .rj-service-faq__symbol{flex:none;font:400 27px/1 system-ui,sans-serif;color:#2563eb;transition:transform .18s ease}
body.page--service .rj-service-faq__item[open] .rj-service-faq__symbol{transform:rotate(45deg)}
body.page--service .rj-service-faq__item>p{max-width:990px;margin:0;padding:0 45px 30px 0;color:#4b4b4b;font:400 16px/1.8 system-ui,sans-serif}
body.page--service .rj-service-faq__item summary:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
@media(max-width:1100px){body.page--service .rj-service-projects{grid-template-columns:repeat(2,minmax(0,1fr))}}



/* RJ Premium 7.1 — services use the exact Portfolio card structure, not a separate preview. */
body.page--service .rj-service-related .projectsGrid {display:block;border-top:1px solid var(--paper);gap:0}
body.page--service .rj-service-related .pCard {border:0;border-bottom:1px solid var(--hair);border-radius:0;background:transparent;box-shadow:none}
body.page--service .rj-service-related .pCard:hover {transform:none;background:rgba(37,99,235,.035);box-shadow:none}
body.page--service .rj-service-related .pTitle {font-size:clamp(22px,3vw,46px);font-family:"Audiowide",sans-serif;font-weight:400;text-transform:uppercase}
body.page--service .rj-service-related .pSub {font-size:15px;line-height:1.55;color:var(--muted);max-width:620px}
body.page--service .rj-service-related .projectsGrid {display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:clamp(48px,5vw,84px) clamp(28px,3vw,48px) !important;
  align-items:start;
  border:0 !important;}
body.page--service .rj-service-related .pCard {display:block;
  min-width:0;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  transform:none !important;}
body.page--service .rj-service-related .pCard:hover {background:transparent !important;
  transform:none !important;}
body.page--service .rj-service-related .pVisual {position:relative;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#e5e5e1;
  border:1px solid rgba(11,11,11,.14);
  isolation:isolate;}
body.page--service .rj-service-related .pCard:nth-child(4n/**/+2) .pVisual,
body.page--service .rj-service-related .pCard:nth-child(4n/**/+3) .pVisual {background:#ededeb;}
body.page--service .rj-service-related .pVisual__grid {position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(11,11,11,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(11,11,11,.035) 1px,transparent 1px);
  background-size:54px 54px;
  opacity:.62;}
body.page--service .rj-service-related .pVisual img {width:100%;
  height:100%;
  object-fit:contain;
  padding:clamp(22px,3vw,46px);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),filter .35s ease;
  filter:saturate(.92) contrast(1.02);}
body.page--service .rj-service-related .pCard:hover .pVisual img {transform:scale(1.025);filter:saturate(1) contrast(1.03);}
body.page--service .rj-service-related .pVisual::after {content:"";
  position:absolute;
  inset:0;
  border:2px solid var(--acid);
  opacity:0;
  transition:opacity .22s ease;
  pointer-events:none;}
body.page--service .rj-service-related .pCard:hover .pVisual::after {opacity:1;}
body.page--service .rj-service-related .pIndex {position:absolute;
  top:18px;
  left:18px;
  min-width:50px;
  height:50px;
  padding:0 12px;
  display:grid;
  place-items:center;
  background:var(--acid);
  color:#fff;
  font-family:"Audiowide",sans-serif;
  font-size:10px;
  letter-spacing:.08em;
  z-index:2;}
body.page--service .rj-service-related .pVisual__cta {position:absolute;
  right:18px;
  bottom:18px;
  display:inline-flex;
  gap:14px;
  align-items:center;
  padding:11px 13px;
  background:var(--acid);
  color:#fff;
  font-family:"Audiowide",sans-serif;
  font-size:8px;
  letter-spacing:.12em;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease;
  z-index:2;}
body.page--service .rj-service-related .pVisual__cta b {font-size:15px;font-weight:400;}
body.page--service .rj-service-related .pCard:hover .pVisual__cta {opacity:1;transform:none;}
body.page--service .rj-service-related .pBody {padding:22px 2px 0;}
body.page--service .rj-service-related .pMeta {min-height:28px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:15px;
  font-family:"Audiowide",sans-serif;
  font-size:8px;
  line-height:1.5;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(11,11,11,.47);}
body.page--service .rj-service-related .pMeta>span {color:var(--acid);}
body.page--service .rj-service-related .pLive {flex:0 0 auto;
  color:rgba(11,11,11,.58);
  border-bottom:1px solid rgba(11,11,11,.28);
  padding-bottom:3px;}
body.page--service .rj-service-related .pLive:hover {color:var(--acid);border-color:var(--acid);}
body.page--service .rj-service-related .pTitle {margin:0 0 12px !important;
  font-family:"Audiowide",sans-serif;
  font-size:clamp(25px,2.45vw,40px) !important;
  line-height:1.02;
  letter-spacing:-.015em !important;
  font-weight:400 !important;
  color:var(--ink);
  text-transform:uppercase;}
body.page--service .rj-service-related .pTitle a {transition:color .18s ease;}
body.page--service .rj-service-related .pCard:hover .pTitle a {color:var(--acid);}
body.page--service .rj-service-related .pSub {margin:0 !important;
  max-width:610px;
  min-height:72px;
  color:rgba(11,11,11,.65) !important;
  font-size:15px !important;
  line-height:1.65 !important;}
body.page--service .rj-service-related .pCaseLink {display:inline-flex;
  align-items:center;
  gap:13px;
  position:relative;
  margin-top:20px;
  padding-bottom:7px;
  font-family:"Audiowide",sans-serif;
  font-size:9px;
  letter-spacing:.12em;
  color:var(--ink);
  text-transform:uppercase;}
body.page--service .rj-service-related .pCaseLink::after {content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--acid);
  transform:scaleX(.24);
  transform-origin:left;
  transition:transform .28s ease;}
body.page--service .rj-service-related .pCaseLink span {color:var(--acid);transition:transform .2s ease;}
body.page--service .rj-service-related .pCaseLink:hover::after {transform:scaleX(1);}
body.page--service .rj-service-related .pCaseLink:hover span {transform:translateX(5px);}
body.page--service .rj-service-related .pVisual {aspect-ratio:4 / 3 !important;
  padding:clamp(18px,2.2vw,34px) !important;}
body.page--service .rj-service-related .pVisual img {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;}
body.page--service .rj-service-related .pCard:hover .pVisual img {transform:none !important;}

/* Same two-column portfolio previews: three projects render as 2 + 1, and one column on mobile. */
body.page--service .rj-service-related .rj-service-projects {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:clamp(36px,5vw,72px) clamp(24px,3vw,48px) !important;
  align-items:start;
}
body.page--service .rj-service-related .pVisual {
  aspect-ratio:4/3 !important;
  padding:clamp(18px,2.2vw,34px) !important;
}
body.page--service .rj-service-related .pVisual img,
body.page--service .rj-service-related .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;
  margin:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  transform:none !important;
  background:transparent !important;
  border:0 !important;
}
body.page--service .rj-service-related .pVisual video.rj-project-preview-video {
  pointer-events:none;
}
body.page--service .rj-service-related .pVisual__destination {
  position:absolute;inset:0;z-index:3;display:block;color:inherit;text-decoration:none;
}
body.page--service .rj-service-related .pVisual__destination:focus-visible {
  outline:3px solid #2563eb;outline-offset:-3px;
}
body.page--service .rj-service-related .pLive > span {display:inline !important;visibility:visible !important;opacity:1 !important}
body.page--service .rj-service-related .pLive__arrow {font-family:Arial,sans-serif;font-size:16px;line-height:1}
body.page--service .rj-service-related .pLive::before,
body.page--service .rj-service-related .pLive::after{content:none !important}
@media (max-width:799px){
  body.page--service .rj-service-related .rj-service-projects{grid-template-columns:minmax(0,1fr) !important;gap:52px !important}
  body.page--service .rj-service-related .pVisual__cta{display:none}
  body.page--service .rj-service-related .pIndex{top:12px;left:12px;min-width:42px;height:42px;font-size:9px}
  body.page--service .rj-service-related .pBody{padding-top:18px}
  body.page--service .rj-service-related .pTitle{font-size:clamp(24px,8vw,36px) !important}
  body.page--service .rj-service-related .pSub{min-height:0;font-size:14px !important}
}

/* v7.8 — Home service chapter uses the same 05 / SECTION kicker as earlier story chapters. */
.story-page .rj-seo-home-services .rj-service-story-kicker {
  display:flex;
  align-items:baseline;
  gap:8px;
  position:relative;
  inset:auto;
  margin:0 0 clamp(54px,8vw,110px);
  font-family:"Audiowide",sans-serif;
  font-size:11px;
  font-weight:400;
  line-height:1.5;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(11,11,11,.48);
}
.story-page .rj-seo-home-services .rj-service-story-kicker span {
  color:#2563eb;
}
@media(max-width:599px){
  .story-page .rj-seo-home-services .rj-service-story-kicker{font-size:10px;}
}


/* =============================================================
   RJ 7.9 — related service projects: true center for cover images
   The service pages use the same pVisual markup as Portfolio, but
   have separate CSS. Grid items with percentage heights could sit
   too low or overflow; position photographic previews to the frame.
   The video elements and their playback behavior remain untouched.
   ============================================================= */
body.page--service .rj-service-related .projectsGrid .pCard .pVisual {
  position:relative !important;
  isolation:isolate;
}
body.page--service .rj-service-related .projectsGrid .pCard .pVisual > img {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:clamp(16px,2.1vw,32px) !important;
  object-fit:contain !important;
  object-position:center center !important;
  transform:none !important;
  filter:none !important;
}
body.page--service .rj-service-related .projectsGrid .pCard:hover .pVisual > img {
  transform:none !important;
}