/* Workshop's example location is visible on first paint, including narrow phones. */
.hero-contact-card {
  position: absolute;
  z-index: 9;
  bottom: 3%;
  left: 3.8%;
  width: max-content;
  max-width: 43%;
  border-left: 1px solid #dfb471a8;
  padding: 3px 0 3px 13px;
  font-family: NorthstarUI, Arial, sans-serif;
  color: #eedab9;
  font-size: clamp(12px, 1.04vw, 15px);
  line-height: 1.45;
  text-shadow: 0 2px 8px #001620;
}
.hero-contact-card small {
  display: none;
  font-size: .69em;
  letter-spacing: .16em;
  color: #e5c18d;
  margin-bottom: 4px;
}
.hero-contact-card a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  text-decoration: none;
  color: #f0d4a1;
  border-bottom: 1px solid #cba36755;
  width: fit-content;
}
.hero-contact-card a:hover,.hero-contact-card a:focus-visible { border-bottom-color: #f6d092; }
.hero-contact-card svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.hero-contact-card p { margin: 5px 0 0; }
.hero-sample-phone { display:flex; align-items:baseline; gap:7px; }
.hero-sample-phone strong { font-weight: 400; white-space:nowrap; font-size: 1.03em; }
.workshop-copy .workshop-contact-sample {
  color: #edce94;
  font-family: NorthstarUI, sans-serif;
  font-size: clamp(11px, 1.05vw, 15px);
  margin-top: 10px;
}
@media (min-width:621px) and (max-width:1000px) {
  .hero-contact-card { bottom: 2%; left: 3%; padding-left: 9px; font-size: 12.5px; }
  .hero-contact-card small { letter-spacing: .10em; }
}
@media (max-width:620px) {
  .hero-contact-card {
    top: 14px;
    right: 13px;
    left: auto;
    bottom: auto;
    width: 176px;
    max-width: 47%;
    padding: 4px 4px 4px 10px;
    background: linear-gradient(90deg, #011925e6, #01192572 75%, transparent);
    font-size: 12.5px;
    line-height: 1.28;
  }
  .hero-contact-card small { display:block; }
  .hero-contact-card a { gap: 5px; }
  .hero-sample-phone { display:block; }
  .hero-sample-phone span { display:block; font-size: .82em; letter-spacing: .02em; }
  .hero-sample-phone strong { display:block; margin-top: 2px; font-size: 1.09em; }
  .hero-contact-card svg { width: 13px; height: 13px; margin-top: 1px; }
  .hero-contact-card p { margin-top: 5px; }
  /* The illustrative number is already visible in the mobile first screen. */
  .workshop-copy .workshop-contact-sample { display: none; }
  .workshop-copy small { display: none; }
}
@media (min-width:405px) and (max-width:620px) {
  /* Separate the chart's first service bearing from the taller CTA line. */
  .hero-universe { top: 270px; }
}
@media (min-width:401px) and (max-width:620px) {
  /* Keep the two atlas option labels clear of the primary CTA at wider phones. */
  .point-care,.point-diagnostics { top: 23px; }
}
@media (max-width:360px) {
  .hero-contact-card { max-width: 45%; width: 148px; top: 18px; right: 9px; font-size: 11px; }
  .hero-contact-card a { font-size: 11px; }
}
/* Northstar's two physical interactions: a free-spinning engraved disk and a lamp-lit workshop. */

.instrument-float.atlas-freewheel { cursor: grab; }
.instrument-float.atlas-freewheel.atlas-is-dragging { cursor: grabbing; }
.atlas-freewheel .compass-instrument {
  transform: none;
  transition: none;
  rotate: var(--atlas-spin-angle, 0deg);
  clip-path: circle(49% at 50% 50%);
  will-change: rotate;
}
.atlas-freewheel .atlas-visit-dial { touch-action: none; }
.atlas-freewheel .atlas-visit-dial:focus-visible {
  outline: 2px solid #f4d59a;
  outline-offset: 5px;
}
.cloud-hero-top { --duration: 21s; }
.cloud-hero-left { --duration: 15s; }
.cloud-hero-bottom { --duration: 23s; }
.cloud-hero-right { --duration: 18s; }
.cloud-care-left { --duration: 20s; }
.cloud-care-right { --duration: 24s; }
.cloud-paper { --duration: 22s; }
.cloud-compass-back { --duration: 22s; }
.cloud-compass-front { --duration: 18s; }
.workshop-scene .workshop-image {
  transition: filter 1.05s cubic-bezier(.22,.64,.24,1);
}
.workshop-scene .workshop-branches {
  transition: filter 1s ease;
}
.workshop-scene .workshop-motes {
  transition: opacity .9s ease;
}
.workshop-scene.is-dim .workshop-image {
  filter: brightness(.46) saturate(.70) contrast(1.04);
}
.workshop-scene.is-dim .workshop-branches { filter: brightness(.66); }
.workshop-scene.is-dim .window-warmth {
  animation: none;
  opacity: .07;
  transition: opacity 1s ease;
}
.workshop-scene.is-dim .workshop-motes { opacity: .16; }
.workshop-lamp-switch {
  position: absolute;
  left: 24%;
  top: 48%;
  width: 7%;
  height: 20%;
  z-index: 8;
  border: 0;
  border-radius: 45%;
  background: transparent;
  color: #f3d4a0;
  transform: translate(-50%, -50%);
  cursor: pointer;
  touch-action: manipulation;
}
.workshop-lamp-switch::after {
  content: "";
  position: absolute;
  inset: -4% -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #ffe4a35c, #f5b7660a 38%, transparent 72%);
  opacity: 0;
  scale: .78;
  transition: opacity .4s ease, scale .4s ease;
  pointer-events: none;
}
@media (hover:hover) {
  .workshop-lamp-switch:hover::after { opacity: .65; scale: 1; }
}
.workshop-lamp-switch:focus-visible {
  outline: 2px solid #f6d6a3;
  outline-offset: -2px;
}
.workshop-scene.is-dim .workshop-lamp-switch::after { opacity: 0; }
@media (prefers-reduced-motion:reduce) {
  .cloud { animation: none !important; }
  .workshop-scene :is(.workshop-image,.workshop-branches,.workshop-motes,.window-warmth),
  .workshop-lamp-switch::after { transition: none !important; }
}
@media (forced-colors:active) {
  .workshop-lamp-switch:focus-visible { outline-color: Highlight; }
}