/* ============================================================================
   ORCA Connect — a practice's main page (web development, event tools,
   learning, detail aids). Everything else comes from ds.css and services.css;
   this is only what these pages add: the hero's scene, the three steps and
   the technology groups.
   ============================================================================ */

/* the practice's own scene, from the homepage deck, stands in the hero */
.pp-scene{
  justify-self:end; width:100%; max-width:520px; aspect-ratio:1/1;
  border-radius:var(--r-lg,28px); overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
}
@media (max-width:900px){ .pp-scene{ justify-self:stretch; max-width:none; aspect-ratio:4/3 } }

/* the three steps, numbered on one rule */
.pp-steps{ list-style:none; margin:var(--s-xxl) 0 0; padding:0;
           display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,40px) }
.pp-steps li{ border-top:2px solid var(--c-accent); padding-top:var(--s-md) }
.pp-n{ display:block; margin-bottom:var(--s-md);
       font:700 clamp(46px,4.6vw,76px)/1 var(--font-display); letter-spacing:-.05em;
       color:transparent; -webkit-text-stroke:1.5px var(--c-accent) }
.pp-steps h3{ font:600 22px/1.2 var(--font-display); letter-spacing:-.02em; margin:0 0 10px }
.pp-steps p{ font:400 16px/1.55 var(--font-text); color:var(--ink-muted-80); margin:0 }
@media (max-width:820px){ .pp-steps{ grid-template-columns:1fr; row-gap:var(--s-xl) } }

/* the stack, grouped */
.pp-tech{ margin-top:var(--s-xxl); display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
          gap:var(--s-xl) clamp(24px,4vw,64px) }
.pp-tech__g{ border-top:1px solid var(--hairline); padding-top:var(--s-md) }
.pp-tech__g h3{ font:600 14px/1.2 var(--font-text); letter-spacing:.06em; text-transform:uppercase;
                color:var(--ink-muted-48); margin:0 0 var(--s-sm) }
.pp-tech__g .pills{ list-style:none; margin:0; padding:0 }
.pp-tech__g:first-child{ grid-column:1 / -1 }
@media (max-width:760px){ .pp-tech{ grid-template-columns:1fr } }

/* the practice's lede under the section heading sits a little tighter */
#services-list .svc-next .lede{ margin-top:var(--s-sm); max-width:62ch }

/* the stack as its logos: one tile per tool, the name on hover and for
   screen readers */
.pp-logos{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
.pp-logo{
  width:68px; height:68px; display:grid; place-items:center; border-radius:16px;
  background:var(--canvas,#fff); border:1px solid var(--hairline);
  transition:transform .35s var(--ease-out,ease-out), border-color .3s, box-shadow .35s;
}
.pp-logo img{ width:34px; height:34px; object-fit:contain }
.pp-logo:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--c-accent) 35%,transparent);
                box-shadow:0 16px 30px -18px rgba(10,16,32,.35) }
.pp-logo--word{ width:auto; padding:0 16px; font:600 13px/1 var(--font-text); color:var(--ink-muted-80) }
@media (max-width:560px){ .pp-logo{ width:56px; height:56px } .pp-logo img{ width:28px; height:28px } }

/* In the hero the scene has no frame: the doctor stands on the page itself,
   larger, with the pieces of the scene floating round him — the way he
   stands in front of the platform on the Omni-Channel page. */
.pp-scene{ background:none; box-shadow:none; border-radius:0; overflow:visible; max-width:560px }
.pp-scene .scene{ background:none; overflow:visible }
.pp-scene .scene::after{ background:radial-gradient(closest-side, rgba(0,0,0,.35), transparent); bottom:-4% }
.pp-scene .sc-av{ height:104%; bottom:-6%; left:58%;
                  filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)) }
.pp-scene .sc-av--half{ height:74%; left:50%; bottom:-6% }
.pp-scene .sc-card{ box-shadow:0 30px 60px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) }
/* the learning path's dashed line reads on navy */
.pp-scene .sc-path__base{ stroke:rgba(255,255,255,.35) }
.phero--practice{ overflow:hidden }
@media (max-width:900px){ .pp-scene{ max-width:420px; justify-self:center; aspect-ratio:1/1 } }
/* the hero's showcase picture gets a frame and a shadow; the doctor must not */
.phero .pp-scene img{ border-radius:0; box-shadow:none }
.pp-scene .sc-av--half{ left:42% }
.pp-scene .sc-av--wide{ height:94%; left:40%; bottom:-4% }