/* Scoped homepage copy links and approved workflow artwork. */
main #clients.clients .iq-home-intro,
main #approach.approach .iq-home-intro {
  min-width: 0;
}
main #clients.clients .iq-home-intro > p,
main #approach.approach .iq-home-intro > p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
main #clients.clients .iq-home-intro > a,
main #approach.approach .iq-home-intro > a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  max-width: 100%;
  margin-top: 18px;
  color: var(--blue);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 4px;
}
main #clients.clients .iq-home-intro > a > span,
main #approach.approach .iq-home-intro > a > span {
  flex: none;
}
main #approach.approach {
  --iqha-art-height: clamp(146px, 15vw, 230px);
}
main #approach.approach .section-heading h2 {
  font-size: clamp(40px, 4.4vw, 76px);
  line-height: 1.02;
}
main #approach.approach .steps > article {
  justify-content: flex-start;
}
main #approach.approach .steps h3 {
  max-width: 10.5ch;
  min-height: 2.2em;
  margin: 0 0 16px;
  line-height: 1.1;
}
main #approach.approach .process-mark {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--iqha-art-height);
  flex: 0 0 auto;
  margin: 24px 0;
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  --iqha-position: 0 0;
}
main #approach.approach .mark-structure { --iqha-position: 100% 0; }
main #approach.approach .mark-build { --iqha-position: 0 100%; }
main #approach.approach .mark-result { --iqha-position: 100% 100%; }
main #approach.approach .process-mark > i,
main #approach.approach .process-mark::before {
  display: none !important;
}
main #approach.approach .process-mark::after {
  content: "";
  display: block;
  position: relative;
  inset: auto;
  width: min(100%, calc(var(--iqha-art-height) * 1.5));
  height: auto;
  aspect-ratio: 3 / 2;
  border: 0;
  border-radius: 0;
  background: var(--iqha-finish) var(--iqha-position) / 200% 200% no-repeat;
  box-shadow: none;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
main #approach.approach .process-mark[data-iq-approach-mounted]::after {
  display: none;
}
main #approach.approach .iqha-scene {
  width: min(100%, calc(var(--iqha-art-height) * 1.5));
  height: auto;
  aspect-ratio: 3 / 2;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
@media (max-width: 1100px) {
  main #clients.clients .iq-home-intro,
  main #approach.approach .iq-home-intro { max-width: 550px; }
  main #approach.approach { --iqha-art-height: 220px; }
  main #approach.approach .section-heading { grid-template-columns: 1fr; gap: 24px; }
  main #approach.approach .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  main #approach.approach .steps > article { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  main #approach.approach .steps > article:nth-child(2) { border-right: 0; }
  main #approach.approach .steps > article:nth-child(3) { padding-left: 0; }
  main #approach.approach .steps > article:nth-child(3)::before { left: 0; }
}
@media (max-width: 640px) {
  main #approach.approach .section-heading h2 { font-size: clamp(34px, 9.5vw, 45px); }
  main #clients.clients .iq-home-intro > a,
  main #approach.approach .iq-home-intro > a {
    min-height: 44px;
    margin-top: 12px;
    align-items: center;
  }
  main #approach.approach { --iqha-art-height: clamp(180px, 45vw, 230px); }
  main #approach.approach .steps { grid-template-columns: 1fr; }
  main #approach.approach .steps > article { border-top: 0; border-right: 0; }
  main #approach.approach .steps h3 { max-width: none; min-height: 0; }
}

  main #approach.approach {
    --iqha-finish: url("/assets/iq-approach-materials-finish-20261028-9aec49ded315.webp");
    --iqha-base: url("/assets/iq-approach-materials-base-20261028-3914b2e8aeeb.webp");
    --iqha-duration: 2600ms;
  }
  main #approach.approach .iqha-scene {
    --iqha-position: 0 0;
    --iqha-delay: 0ms;
    background-color: #fff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
  main #approach.approach .iqha-two { --iqha-position: 100% 0; --iqha-delay: 180ms; }
  main #approach.approach .iqha-three { --iqha-position: 0 100%; --iqha-delay: 360ms; }
  main #approach.approach .iqha-four { --iqha-position: 100% 100%; --iqha-delay: 540ms; }
  main #approach.approach .iqha-surface,
  main #approach.approach .iqha-part {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  main #approach.approach .iqha-surface {
    background-image: var(--iqha-finish);
    background-position: var(--iqha-position);
    background-size: 200% 200%;
    background-repeat: no-repeat;
  }
  main #approach.approach .iqha-base {
    z-index: 0;
    opacity: 0;
    background-image: var(--iqha-base);
  }
  main #approach.approach .iqha-part { z-index: 1; opacity: 0; }
  main #approach.approach .iqha-finish { z-index: 3; opacity: 1; }
  main #approach.approach .iqha-lens { transform-origin: 55% 58%; }
  main #approach.approach .iqha-lens-head { clip-path: ellipse(15.4% 23% at 54.8% 58.1%); }
  main #approach.approach .iqha-lens-handle {
    clip-path: polygon(63% 70%, 68% 70%, 84% 83%, 85.7% 87%, 83.6% 91.5%, 79.4% 92%, 62.3% 76%);
  }
  main #approach.approach .iqha-plan-card {
    clip-path: polygon(66% 50%, 85.6% 53%, 87.5% 56%, 87.5% 84.5%, 85% 87.3%, 67% 85%, 64.8% 82%, 64.8% 54%);
    transform-origin: 77% 55%;
  }
  main #approach.approach .iqha-module-white {
    clip-path: polygon(17% 18.8%, 49% 21%, 54.8% 25%, 57.5% 26.8%, 57.5% 39%, 54.8% 42%, 54.8% 48.4%, 20% 44.6%, 17% 40.5%);
    transform-origin: 50% 35%;
  }
  main #approach.approach .iqha-module-blue {
    clip-path: polygon(29% 46%, 63% 50%, 67% 54%, 69% 55%, 69% 67%, 67% 70%, 67% 76%, 63% 80%, 29% 76%, 25.5% 71.5%, 25.5% 51%);
    transform-origin: 61% 64%;
  }
  main #approach.approach .iqha-tick-one { clip-path: inset(18% 68% 72% 25%); }
  main #approach.approach .iqha-tick-two { clip-path: inset(38% 68% 52% 25%); }
  main #approach.approach .iqha-tick-three { clip-path: inset(58% 68% 32% 25%); }
  main #approach.approach .iqha-check {
    clip-path: polygon(65.5% 43.8%, 70.5% 45.5%, 73% 50%, 57% 83.5%, 53% 87.5%, 48% 85%, 43% 78%, 40% 71%, 39% 66%, 40.5% 62%, 44% 60.8%, 48.5% 63%, 53% 71%);
    transform-origin: 55% 70%;
  }
  main #approach.approach .iqha-playing .iqha-base { opacity: 1; }
  main #approach.approach .iqha-playing .iqha-finish {
    animation: iqha-beauty var(--iqha-duration) ease var(--iqha-delay) both;
  }
  main #approach.approach .iqha-playing .iqha-lens {
    animation: iqha-lens-scan var(--iqha-duration) cubic-bezier(.3,.05,.25,1) var(--iqha-delay) both;
  }
  main #approach.approach .iqha-playing .iqha-plan-card {
    animation: iqha-plan-snap var(--iqha-duration) cubic-bezier(.2,.7,.25,1) var(--iqha-delay) both;
  }
  main #approach.approach .iqha-playing .iqha-module-white {
    animation: iqha-white-snap var(--iqha-duration) cubic-bezier(.2,.7,.25,1) var(--iqha-delay) both;
  }
  main #approach.approach .iqha-playing .iqha-module-blue {
    animation: iqha-blue-snap var(--iqha-duration) cubic-bezier(.2,.7,.25,1) var(--iqha-delay) both;
  }
  main #approach.approach .iqha-playing .iqha-tick {
    animation: iqha-tick-in var(--iqha-duration) ease var(--iqha-delay) both;
  }
  main #approach.approach .iqha-playing .iqha-tick-two { animation-name: iqha-tick-two; }
  main #approach.approach .iqha-playing .iqha-tick-three { animation-name: iqha-tick-three; }
  main #approach.approach .iqha-playing .iqha-check {
    animation: iqha-check-in var(--iqha-duration) cubic-bezier(.18,.7,.2,1) var(--iqha-delay) both;
  }
  @keyframes iqha-beauty { 0%, 76% { opacity: 0; } 92%, 100% { opacity: 1; } }
  @keyframes iqha-lens-scan {
    0% { opacity: 1; transform: translate(-3.5%, 1%) rotate(-3deg); }
    38% { opacity: 1; transform: translate(2.5%, -1.5%) rotate(1.2deg); }
    72%, 100% { opacity: 1; transform: none; }
  }
  @keyframes iqha-plan-snap {
    0%, 7% { opacity: 0; transform: translateY(6%) rotate(1deg); }
    28% { opacity: 1; transform: translateY(2%); }
    58%, 100% { opacity: 1; transform: none; }
  }
  @keyframes iqha-white-snap {
    0%, 6% { opacity: 0; transform: translate(-7%, -.5%) rotate(-1deg); }
    24% { opacity: 1; transform: translateX(-3%); }
    52%, 100% { opacity: 1; transform: none; }
  }
  @keyframes iqha-blue-snap {
    0%, 21% { opacity: 0; transform: translate(-9%, 1.5%) rotate(-1deg); }
    38% { opacity: 1; transform: translate(-4%, .5%); }
    68%, 100% { opacity: 1; transform: none; }
  }
  @keyframes iqha-tick-in { 0%, 10% { opacity: 0; } 23%, 100% { opacity: 1; } }
  @keyframes iqha-tick-two { 0%, 27% { opacity: 0; } 40%, 100% { opacity: 1; } }
  @keyframes iqha-tick-three { 0%, 44% { opacity: 0; } 57%, 100% { opacity: 1; } }
  @keyframes iqha-check-in {
    0%, 48% { opacity: 0; transform: translateY(3%) scale(.78); }
    70% { opacity: 1; transform: scale(1.025); }
    84%, 100% { opacity: 1; transform: none; }
  }