.rjc-wordmark{display:block;font-family:var(--rjc-display);font-weight:700;font-size:clamp(1.5rem,1.9vw,2rem);letter-spacing:-.03em;line-height:1;color:var(--rjc-teal)}.footer .rjc-wordmark{font-size:clamp(1.9rem,2.8vw,3rem)}
/* the captured icon sprite carries fill attributes, CSS still wins over them */
#icons symbol path{fill:var(--rjc-teal)}
/* Plex Mono is wider than Ivar: pull tracking in and hold the display weight */
.t1,.t2,.t3{font-weight:600;letter-spacing:-.045em}
.t4,.t5{font-weight:500;letter-spacing:-.03em}
.hero-title .t2{letter-spacing:-.055em}
/* Plex Mono sets far wider than the Ivar it replaces, so the phone display
   sizes have to come down or long words break mid word */
@media (max-width:749px){
  .t1,.t2,.t3{font-size:10vw}
  .t4{font-size:7.2vw}
  /* the capture keeps the headline in a 47vw column on phones too, which is
     half a word wide in Plex Mono */
  .hero.-full .hero-content .hero-title{width:100%}
}
/* the split runs every word through an inline-block, which will happily wrap
   inside a word if the column is tight. words break between words only. */
.title-line [class^="word-"]{white-space:nowrap}

/* ---- the three states on a phone ----
   the capture stacks a full bleed 390x640 photo above a cramped block of type,
   which reads heavy and leaves the settled circle nowhere to sit. reordered to
   type first, then the band of white the circle lands in, then the copy, then
   a smaller inset photo. */
@media (max-width:749px){
  .splitblock{padding-left:0;padding-right:0}
  .splitblock .splitblock-item{flex-direction:column;margin-bottom:11rem;padding-bottom:0;border-bottom:0}
  .splitblock .splitblock-item:last-child{margin-bottom:2rem}
  .splitblock .split-content{padding:0 7vw;text-align:center}
  /* the gap the circle settles into, and the only reason it is this big */
  .splitblock .split-header{margin-bottom:21rem}
  .splitblock .split-title{margin-top:1.4rem}
  .splitblock .split-description{max-width:34ch;margin:0 auto 3.4rem}
  .splitblock .split-content .button{display:inline-flex;align-self:center;width:auto;min-width:0;padding-left:3.2rem;padding-right:3.2rem}
  .splitblock .split-asset{height:auto;margin-top:7rem;margin-bottom:0;padding:0 7vw}
  .splitblock .split-asset .asset-crop{height:auto;aspect-ratio:4/5}
  .splitblock .split-asset img{position:relative;width:100%;height:100%;object-fit:cover}
}
/* the hero asset block is gone, so the hero has to carry its own height. it
   sized itself off that block, and without it the footer copy overflowed the
   section and rode down the page on top of everything else. */
.hero{margin-bottom:12rem}
.hero.-full .hero-content{height:100vh;max-height:none;min-height:56rem}
@media (max-width:749px){.hero.-full .hero-content{height:92vh;min-height:52rem}}
/* keep long RJC copy clear of the absolutely positioned textblock assets */
.textblock.-message .textblock-title>.t4{max-width:62%}
.textblock.-message .textblock-title{padding-bottom:19vw}
@media (max-width:900px){.textblock.-message .textblock-title>.t4{max-width:100%}.textblock.-message .textblock-title{padding-bottom:36vw}}
.accordionBlock .doctor-name{font-family:var(--rjc-display);font-weight:600;letter-spacing:-.03em}
.footer-copyright{max-width:32rem}
/* the wordmark replaces a fixed width logo mark, so its box has to fit it */
.header .logo,.menuMobile .logo,.footer .logo{width:auto;height:auto;flex:none}
.rjc-wordmark{white-space:nowrap}
.footer .footer-tag{width:auto;max-width:22rem;min-width:0;flex:1 1 auto}
.accolades .list-item.-flex .p3{padding-right:2.4rem}
/* ---- worked with ----
   three names, so a scrolling strip would read as padding. a ruled row on the
   same hairlines the states use. real logos, but masked to one teal so three
   different vintages of brand mark read as one band instead of a sticker sheet. */
.clients{margin-bottom:14rem}
.clients-label{color:var(--rjc-slate);margin-bottom:3.4rem}
.clients-list{display:flex;list-style:none;margin:0;padding:0;border-top:1px solid var(--rjc-rule-solid)}
.clients-item{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;
  padding:4.4rem 2rem;border-bottom:1px solid var(--rjc-rule-solid)}
.clients-item+.clients-item{border-left:1px solid var(--rjc-rule-solid)}
.clients-logo{display:block;width:100%;max-width:20rem;background-color:var(--rjc-teal);
  opacity:.74;transition:opacity .4s;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.clients-item:hover .clients-logo{opacity:1}
.clients-logo.-coreva{height:3.6rem;max-width:17rem;-webkit-mask-image:url(/images/logos/coreva.png);mask-image:url(/images/logos/coreva.png)}
.clients-logo.-medtronic{height:2.4rem;max-width:16rem;-webkit-mask-image:url(/images/logos/medtronic.svg);mask-image:url(/images/logos/medtronic.svg)}
.clients-logo.-integra{height:2.8rem;max-width:19rem;-webkit-mask-image:url(/images/logos/integra.png);mask-image:url(/images/logos/integra.png)}
@media (max-width:749px){
  .clients{margin-bottom:9rem}
  .clients-list{display:block}
  .clients-item{padding:3.4rem 0}
  .clients-item+.clients-item{border-left:0}
  .clients-logo{max-width:17rem}
}
/* scroll driven brand fields */
/* one orbit, full bleed behind the hero, in place of the captured dust plane */
#hero-field{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%)}
.splitblock{position:relative}
/* the mark takes the slot the second model image used to hold, and keeps the
   screen from there through the three states. it adds no scroll of its own,
   it rides sections that were already there, and it draws no paper, so it can
   hang over the section above without covering it. */
#states-field{position:absolute;top:-140vh;left:0;width:100%;height:100vh;display:block;pointer-events:none;z-index:0;opacity:0;will-change:transform,opacity;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)}
.splitblock-content{position:relative;z-index:1}
/* honeypot on the contact form, must not be display:none or some autofillers skip it */
.rjc-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* ==========================================================================
   Mobile pass. The capture's phone values were tuned for Ivar/Scto and for
   Atria's much shorter copy, so several of them strand our text in fixed
   fractional columns with the other half of the screen empty.
   ========================================================================== */
@media (max-width:749px){
  /* The hero reserved 92vh, but its content ends around 60% of that. With the
     24rem margin under hero-content on top, that was ~550px of dead space
     between the lede and the next section. Size to content with a floor, so the
     orbit still gets room without the void underneath it. */
  .hero.-full .hero-content{height:auto;min-height:0;padding-bottom:6rem;margin-bottom:0}
  .hero{margin-bottom:9rem}
  /* only the home hero holds the orbit, so only it needs the extra room */
  .is-home .hero.-full .hero-content{min-height:74svh;padding-bottom:0}

  /* Atria put these two tags in fixed 21.5vw columns with a 21.5vw gutter and an
     8rem cap on the text itself. "Cloud operations, healthcare." cannot live in
     80px, so it broke to three lines against a half-empty row. Stack them. */
  .hero .hero-block{flex-direction:column;align-items:flex-start;margin-bottom:2.8rem}
  .hero.-full .hero-tag{width:auto;max-width:100%}
  .hero.-full .hero-tag:first-child{margin-right:0;margin-bottom:.6rem}
  .hero.-full .hero-tag .p2{width:auto}

  /* the lede was pinned to 43vw, half the screen, with nothing in the other half */
  .hero .hero-description{width:100%}
  .hero .hero-description .p{font-size:1.5rem;line-height:1.6}
}

@media (max-width:749px){
  /* The -message asset is absolutely pinned top-right and pulled up 20%, which
     works when the statement beside it is narrow. On a phone the statement is
     full width, so the copy ran underneath the image and the image bled past the
     gutter. Put it back in flow, full width, below the statement. */
  .textblock.-message .textblock-title{padding-bottom:0}
  .textblock.-message .textblock-title .textblock-asset:first-of-type{
    position:relative;right:auto;top:auto;transform:none;
    width:100%;height:auto;aspect-ratio:4/5;margin-top:3.4rem}
  .textblock.-message .textblock-title .textblock-asset:first-of-type .asset-crop{height:100%}
  .textblock.-message .textblock-title .textblock-asset:first-of-type img{
    position:relative;width:100%;height:100%;object-fit:cover}
  /* the tagged body column then needs its own air rather than sitting on the image */
  .textblock.-message .textblock-block{margin-top:5rem}
}

@media (max-width:749px){
  /* Atria hid the textblock tag and its body paragraph outright on phones
     (base rules, not a media override). For them that copy was decorative. For
     us it is the model statement, the founder bio and every inner-page section,
     so a phone visitor was reading headlines into empty space. Show it. */
  .textblock .textblock-tag{display:block;width:auto;padding-right:0;margin-bottom:1.4rem}
  .textblock .textblock-description .p3{display:block;font-size:1.6rem;line-height:1.6}
  .textblock .textblock-description .p3 + .p3{margin-top:1.6rem}
  .textblock .textblock-block{flex-direction:column}

  /* the ruled list stacks head over body with no gap between them */
  .accolades .list-item.-flex .p3{margin-bottom:.8rem;padding-right:0}
  .accolades .list-item.-flex{margin-bottom:3.2rem}
}

@media (max-width:749px){
  /* list rows carried an 8px inset all round, so every row sat 8px right of the
     section title above it. keep the vertical padding, drop the horizontal. */
  .accolades .list-item{padding:.8rem 0}

  /* the tagged body column was floating too far under its image */
  .textblock .textblock-block{margin-top:3rem}

  /* the subscribe row put a 66vw input beside a 22vw button, which on a phone is
     an 86px button with the label wrapping into it. stack them full width. */
  .subscribe .subscribe-content{flex-direction:column;align-items:stretch}
  .subscribe .form-group:first-child,
  .subscribe .form-group:last-child{width:100%}
  .subscribe .newsletter-input{font-size:2.8rem;line-height:1.15}
  .subscribe .form-group:last-child{margin-top:2.4rem}
  .subscribe .subscribe-submit{width:100%}
}