/* Work: the laptop is the object (work is web). Shares pod.css's scene parts. */

.wk-word { position: absolute; z-index: 1; left: 50%; bottom: -4vh; translate: -50% 0; margin: 0; white-space: nowrap; font-weight: 800;
  font-variation-settings: "wdth" 125; line-height: .8; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 2px var(--wk-stroke, rgba(239,238,232,.22)); }
.wk .mac { z-index: 3; }
.wk .mac-scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* ---------------------------------------------------------------- 01 hero */
.wk-hero { background: var(--ink); color: var(--paper); }
.wk-hero .hp-giant { top: 15vh; }
.wk-hmac { left: 50%; right: auto; top: 47%; width: 44vw; translate: -50% -50%; }
.wk-flip { opacity: 0; transition: opacity .8s var(--ease); }
.wk-flip.is-on { opacity: 1; }

/* ---------------------------------------------------------- 02 DataraFlow */
.wk-df .s-pin { background: #111827; color: var(--paper); }
.wk-df .hp-c-tl { top: 15vh; max-width: 34vw; }
.wk-dmac { right: 5vw; width: 50vw; }
.wk-page { position: absolute; left: 0; top: 0; width: 100%; height: auto !important; object-fit: initial !important; translate: 0 var(--pg, 0px); }
.wk-tags { margin-top: 18px !important; }
.wk-tags span { font-size: 13px; }

/* ------------------------------------------------- 03 Internal Healthcare */
.wk-ihc .s-pin { background: #F3EFE6; color: var(--ink); --wk-stroke: rgba(20,20,15,.14); }
.wk-ihc .hp-c-tl { top: 13vh; max-width: 34vw; }
.wk-ihc .hp-c p { font-size: clamp(14px, 1vw, 16px); }
.wk-devs { position: absolute; z-index: 3; right: 3vw; top: 50%; width: 56vw; height: 74vh; translate: 0 -50%; }
.wk-imac { left: 0; right: auto; top: 46%; width: 44vw; translate: 0 -50%; transition: opacity .5s var(--ease), scale .5s var(--ease), filter .5s; }
.wk-iphone { left: 84%; top: 58%; height: 58vh; --hr: 3deg; z-index: 4; transition: opacity .5s var(--ease), scale .5s var(--ease), filter .5s; }
.wk-iphone .ph-in img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wk-shot { opacity: 0; transition: opacity .5s var(--ease); }
.wk-shot.is-on { opacity: 1; }
.wk-devs[data-on="mac"] .wk-iphone { opacity: .5; scale: .94; filter: saturate(.6); }
.wk-devs[data-on="phone"] .wk-imac { opacity: .5; scale: .96; filter: saturate(.6); }
.wk-track { list-style: none; margin: clamp(16px, 2.6vh, 26px) 0 0; padding: 0; display: grid; gap: 2px; }
.wk-track li { position: relative; display: flex; align-items: center; gap: 12px; padding: 5px 0; font-weight: 600; font-size: clamp(14px, 1vw, 16px);
  opacity: .45; transition: opacity .35s var(--ease); }
.wk-track li i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); flex: none; transition: background .35s; }
.wk-track li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 22px; width: 1.5px; height: 14px; background: rgba(20,20,15,.25); }
.wk-track li.is-past { opacity: .75; } .wk-track li.is-past i { background: var(--ink); }
.wk-track li.is-on { opacity: 1; } .wk-track li.is-on i { background: var(--coral); box-shadow: 0 0 0 4px rgba(251,139,115,.3); }
.wk-track li.is-on span { font-weight: 800; }

/* ------------------------------------------------------- 04 more to come */
.wk-more { background: var(--violet); color: var(--ink); }
.wk-slots { position: absolute; right: 6vw; top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: 2.4vw; }
.wk-sl { display: block; border: 2px dashed rgba(20,20,15,.35); }
.mac-sl { width: 20vw; aspect-ratio: 16 / 10.6; border-radius: 12px; }
.ph-sl { height: 34vh; aspect-ratio: 629 / 1304; border-radius: 26px; translate: 0 -4vh; }

@media (prefers-reduced-motion: reduce) { .wk-flip, .wk-shot, .wk-imac, .wk-iphone { transition: none; } }

@media (max-width: 1180px) {
  .wk-df .hp-c-tl, .wk-ihc .hp-c-tl { max-width: 38vw; }
  .wk-dmac { width: 46vw; right: 3vw; }
  .wk-devs { width: 52vw; right: 2vw; }
  .wk-imac { width: 40vw; }
  .wk-iphone { height: 48vh; }
}
@media (max-width: 860px) {
  .wk-hero { padding-top: 60vh; }
  .wk-hero .hp-giant { top: 12vh; }
  .wk-hmac { top: 36vh; width: 84vw; }
  .wk-df .hp-c-tl, .wk-ihc .hp-c-tl { position: absolute; left: var(--m); right: var(--m); top: 11vh; max-width: none; }
  .wk-df .hp-c p:not(.wk-tags), .wk-ihc .hp-c > p:not(.lab), .wk-tags { display: none; }
  .wk-dmac { left: 6vw; right: 6vw; width: auto; top: 74%; }
  .wk-devs { left: 4vw; right: 4vw; width: auto; top: 76%; height: 36vh; }
  .wk-imac { width: 70vw; }
  .wk-iphone { left: 86%; height: 30vh; }
  .wk-track li { font-size: 15px; }
  .wk-more { padding-top: 52vh; }
  .wk-slots { right: auto; left: 50%; top: 26vh; translate: -50% -50%; }
  .mac-sl { width: 32vw; } .ph-sl { height: 22vh; }
}
.wk-sl { animation: slotf 5s var(--ease) infinite; }
.wk-sl:nth-child(2) { animation-delay: -1.6s; } .wk-sl:nth-child(3) { animation-delay: -3.2s; }
@keyframes slotf { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .wk-sl { animation: none; } }
/* the hero's longer copy: a narrower right column, a slightly smaller laptop */
@media (min-width: 861px) {
  .wk-hmac { width: 40vw; top: 44%; }
  .wk-hero .hp-c-br { max-width: 23vw; }
  .wk-hero .hp-c-bl { max-width: 36vw; }
}
/* short laptop screens: the care journey keeps its track and link, the tags step out */
@media (min-width: 861px) and (max-height: 820px) {
  .wk-ihc .hp-c-tl { top: 10vh; }
  .wk-ihc .wk-tags { display: none; }
  .wk-ihc .hp-c p { margin-top: .5em; }
}
.wk-track li { cursor: pointer; }
.wk-track li:hover { opacity: .9; }
.wk-track li:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 4px; }