/* Real-site visual refinement layer. Created 2026-09-06 15:40:45 +0300. */

:root {
  --screen-border: rgba(62, 62, 62, 0.16);
  --screen-ivory: #fffdf8;
  --screen-sage: #e8e8e8;
  --screen-shadow: 0 34px 72px -38px rgba(42, 42, 42, 0.55);
}

/* Homepage: a complete desktop site paired with a complete mobile site. */
.hero-art-sites {
  min-width: 0;
  isolation: isolate;
}

.hero-art-sites::before {
  content: "";
  position: absolute;
  inset: 12px 12px 30px 36px;
  z-index: -2;
  border: 1px solid rgba(79, 79, 79, 0.1);
  border-radius: 48% 48% 14px 14px;
  background:
    radial-gradient(circle at 78% 18%, rgba(244, 87, 50, 0.12), transparent 24%),
    linear-gradient(145deg, var(--screen-sage), #f2e9dd);
}

.hero-art-sites::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 16px;
  z-index: 4;
  width: 66px;
  height: 66px;
  border: 1px solid rgba(244, 87, 50, 0.34);
  border-radius: 50%;
  pointer-events: none;
}

.showcase-desktop,
.showcase-phone {
  position: absolute;
  display: block;
  overflow: hidden;
  border: 1px solid var(--screen-border);
  background: var(--screen-ivory);
  box-shadow: var(--screen-shadow);
  transition: translate 0.35s ease, box-shadow 0.45s ease, border-color 0.35s ease;
}

.showcase-desktop {
  top: 48px;
  left: 0;
  z-index: 1;
  width: min(90%, 550px);
  border-radius: 10px;
}

.showcase-bar {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border-bottom: 1px solid rgba(70, 70, 70, 0.13);
  background: rgba(255, 253, 248, 0.97);
  color: #6c6c6c;
}

.showcase-bar i {
  width: 5px;
  height: 5px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #cccccc;
}

.showcase-bar i:first-child {
  background: var(--orange);
}

.showcase-bar span {
  min-width: 0;
  margin-left: 6px;
  overflow: hidden;
  font-size: 7px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.8px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.showcase-bar b {
  margin-left: auto;
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
}

.showcase-desktop > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center top;
  background: var(--screen-ivory);
}

.showcase-phone {
  right: 0;
  bottom: 45px;
  z-index: 3;
  width: clamp(128px, 27%, 166px);
  padding: 6px;
  border-color: rgba(62, 62, 62, 0.2);
  border-radius: 24px;
  background: #fbfaf4;
  box-shadow: 0 30px 60px -30px rgba(36, 36, 36, 0.66);
}

.showcase-phone > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  border: 1px solid rgba(62, 62, 62, 0.1);
  border-radius: 18px;
  object-fit: contain;
  object-position: center top;
  background: var(--screen-ivory);
}

.showcase-caption {
  position: absolute;
  bottom: 7px;
  left: 2px;
  z-index: 4;
  max-width: 56%;
  color: var(--muted);
  font-size: 8px;
  line-height: 1.45;
  letter-spacing: 0.25px;
}

.showcase-caption small,
.showcase-caption .eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.showcase-caption small::before,
.showcase-caption .eyebrow::before {
  content: "";
  width: 4px;
  height: 4px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--orange);
}

.showcase-caption p {
  margin: 0;
}

/* Source-backed editorial figures. */
.source-visual {
  margin: 0;
}

.source-visual > .page-visual {
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, var(--screen-sage), #f2e8dc);
}

.source-visual > .page-visual > img,
.source-visual > .page-visual > picture,
.source-visual > .page-visual > picture > img {
  width: 100%;
  height: 100%;
}

.source-visual > .page-visual > img,
.source-visual > .page-visual > picture > img {
  object-fit: contain;
  object-position: center top;
}

.source-visual figcaption {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.source-visual figcaption a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6c6c6c;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.source-visual figcaption a:hover,
.source-visual figcaption a:focus-visible {
  color: var(--orange);
}

/* Opt-in treatment for screenshots placed in an existing visual wrapper. */
.page-visual.visual-screen,
.service-group-visual.visual-screen,
.service-card-visual.visual-screen,
.service-visual-card.visual-screen,
.sector-card-visual.visual-screen,
.article-visual.visual-screen,
.contact-visual.visual-screen,
.pricing-visual.visual-screen,
.journal-art.visual-screen {
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 88% 12%, rgba(244, 87, 50, 0.09), transparent 25%),
    linear-gradient(145deg, var(--screen-sage), #f1e9de);
}

/* Card media stays on one baseline while complete screenshots letterbox inside it. */
.service-card-visual.visual-screen,
.service-visual-card.visual-screen,
.sector-card-visual.visual-screen {
  aspect-ratio: 16 / 11;
}

.visual-screen > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.visual-screen > img,
.visual-screen > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center top !important;
  transform: none !important;
}

.visual-credit {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 4;
  max-width: calc(100% - 18px);
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 4px;
  background: rgba(43, 43, 43, 0.88);
  color: #fffdf8;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.55px;
  text-transform: uppercase;
  text-shadow: none;
  backdrop-filter: blur(8px);
}

.visual-credit:is(a):hover,
.visual-credit a:hover {
  color: #ffd4c7;
}

.visual-credit a {
  color: inherit;
}

/* Optional diagram contract: wrapper, SVG, or HTML nodes all remain bounded. */
div.service-map,
figure.service-map {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin: 0;
  border: 1px solid var(--screen-border);
  border-radius: 11px;
  background:
    linear-gradient(rgba(68, 68, 68, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68, 68, 68, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 72% 26%, rgba(244, 87, 50, 0.14), transparent 28%),
    linear-gradient(145deg, #eeeeee, #f3ebe0);
  background-size: 24px 24px, 24px 24px, auto, auto;
  box-shadow: 0 22px 48px -35px rgba(42, 42, 42, 0.45);
}

.service-map > svg,
svg.service-map {
  display: block;
  width: 100%;
  height: 100%;
}

.service-map svg text {
  font-family: Arial, Helvetica, sans-serif;
}

.service-map [data-map-line],
.service-map .service-map-line {
  stroke: rgba(57, 57, 57, 0.4);
  stroke-width: 1.25;
  fill: none;
}

.service-map [data-map-node],
.service-map .service-map-node {
  border: 1px solid rgba(63, 63, 63, 0.17);
  border-radius: 6px;
  background: rgba(255, 253, 248, 0.92);
  box-shadow: 0 16px 30px -24px rgba(42, 42, 42, 0.5);
}

.service-map [data-map-core],
.service-map .service-map-core {
  border-color: rgba(244, 87, 50, 0.35);
  background: var(--ink);
  color: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
  .showcase-desktop:hover,
  .showcase-desktop:focus-visible {
    translate: 0 -3px;
    border-color: rgba(62, 62, 62, 0.28);
    box-shadow: 0 42px 80px -40px rgba(42, 42, 42, 0.66);
  }

  .showcase-phone:hover,
  .showcase-phone:focus-visible {
    translate: 0 -4px;
    border-color: rgba(244, 87, 50, 0.4);
    box-shadow: 0 36px 66px -31px rgba(36, 36, 36, 0.72);
  }
}

@media (max-width: 1020px) {
  .showcase-desktop {
    top: 42px;
    width: 89%;
  }

  .showcase-phone {
    bottom: 42px;
  }
}

@media (max-width: 760px) {
  .hero-art-sites::before {
    inset: 3px 2px 27px 22px;
    border-radius: 42% 42% 11px 11px;
  }

  .hero-art-sites::after {
    top: 0;
    right: 5px;
    width: 54px;
    height: 54px;
  }

  .showcase-desktop {
    top: 21px;
    width: calc(100% - 17px);
    border-radius: 8px;
  }

  .showcase-bar {
    height: 29px;
    padding: 0 9px;
  }

  .showcase-bar span {
    font-size: 6.5px;
  }

  .showcase-phone {
    right: 0;
    bottom: 37px;
    width: 120px;
    padding: 5px;
    border-radius: 20px;
  }

  .showcase-phone > img {
    border-radius: 15px;
  }

  .showcase-caption {
    bottom: 5px;
    left: 4px;
    max-width: 58%;
    font-size: 7.5px;
  }

  .showcase-caption small,
  .showcase-caption .eyebrow {
    font-size: 6.5px;
    letter-spacing: 0.75px;
  }

  .source-visual figcaption {
    justify-content: flex-start;
    margin-top: 9px;
  }

  .source-visual figcaption a,
  .visual-credit {
    font-size: 9px;
  }
}

@media (max-width: 380px) {
  .showcase-desktop {
    top: 18px;
  }

  .showcase-phone {
    bottom: 34px;
    width: 110px;
  }

  .showcase-caption {
    max-width: 60%;
  }
}

html.motion-paused .showcase-desktop,
html.motion-paused .showcase-phone {
  translate: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .showcase-desktop,
  .showcase-phone,
  .source-visual figcaption a {
    translate: none !important;
    transition: none !important;
  }
}

@media print {
  .showcase-desktop,
  .showcase-phone,
  .source-visual > .page-visual,
  .visual-screen,
  .service-map {
    box-shadow: none;
  }
}