/* Six illustrated examples, backed by the supplied color fields. */
#approach .abilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

#approach .ability {
  grid-column: auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 9px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 12px 32px #36554f0b;
}

#approach .ability:hover {
  translate: none;
  box-shadow: 0 16px 36px #36554f15;
}

#approach .ability-visual {
  display: grid;
  place-items: center;
  width: 100%;
  height: clamp(155px, 14.6vw, 190px);
  isolation: isolate;
  border-radius: 17px;
  background-color: var(--stage-fallback);
  background-image: var(--stage-image);
  background-size: cover;
  background-position: var(--stage-position, center);
}

#approach .ability-visual::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  border-radius: inherit;
  background: linear-gradient(151deg, #ffffff60, #ffffff08 52%, #ffffff49);
  box-shadow: inset 0 1px 1px #fffd, inset 0 -1px 2px #fff6;
  -webkit-backdrop-filter: blur(5px) saturate(.94);
  backdrop-filter: blur(5px) saturate(.94);
  pointer-events: none;
}

#approach .bento-ai {
  --scene-delay: 0s;
  --stage-image: url("assets/strengths/agent.webp");
  --stage-fallback: #d2edff;
  --stage-position: 50% 67%;
}

#approach .bento-logic {
  --scene-delay: .35s;
  --stage-image: url("assets/strengths/logic.webp");
  --stage-fallback: #c9f3f2;
  --stage-position: 42% 55%;
}

#approach .bento-iteration {
  --scene-delay: .7s;
  --stage-image: url("assets/strengths/journey.webp");
  --stage-fallback: #ffdacf;
  --stage-position: 50% 34%;
}

#approach .bento-delivery {
  --scene-delay: .25s;
  --stage-image: url("assets/strengths/build.webp");
  --stage-fallback: #dce8ff;
}

#approach .bento-system {
  --scene-delay: .6s;
  --stage-image: url("assets/strengths/system.webp");
  --stage-fallback: #d3f8e9;
  --stage-position: 50% 62%;
}

#approach .bento-collab {
  --scene-delay: .85s;
  --stage-image: url("assets/strengths/collab.webp");
  --stage-fallback: #e7e4f9;
  --stage-position: 50% 45%;
}

#approach .ability-copy {
  padding: 17px 14px 16px;
}

#approach .ability-copy h3 {
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.42;
}

#approach .ability-copy p {
  margin-top: 7px;
  color: #66736c;
  font-size: 13px;
  line-height: 1.75;
}

.strength-paints {
  position: absolute;
  pointer-events: none;
}

.strength-scene {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: 370px;
  overflow: visible;
  font-variant-numeric: tabular-nums;
}

.scene-paper,
.scene-paper-secondary,
.scene-paper-accent,
.scene-paper-terminal {
  filter: drop-shadow(0 8px 10px #19425333);
  stroke: url(#strength-glass-edge);
  stroke-width: 1.85;
}

.scene-paper { fill: url(#strength-glass); }
.scene-paper-secondary { fill: url(#strength-glass-secondary); }
.scene-paper-accent { fill: url(#strength-glass-mint); }
.scene-paper-terminal { fill: url(#strength-glass-terminal); }

.scene-title {
  fill: #263d4b;
  font-size: 12px;
  font-weight: 700;
}

.scene-overline {
  fill: #567389;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
}

.scene-label {
  fill: #617581;
  font-size: 8.5px;
  font-weight: 550;
}

.scene-table {
  fill: #3a5362;
  font-size: 9.5px;
  font-weight: 600;
}

.scene-mono {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 9.5px;
}

.scene-divider {
  fill: none;
  stroke: #dbe7ea;
}

.scene-check,
.scene-muted-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene-check {
  stroke: #39785e;
  stroke-width: 1.55;
}

.scene-muted-line {
  stroke: #a7bac8;
  stroke-width: 1.6;
}

.scene-route,
.scene-route-signal {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene-route {
  stroke: #effffcdb;
  stroke-width: 2.2;
}

.scene-route-signal {
  stroke: #e8ff9f;
  stroke-width: 4;
  stroke-dasharray: 8 100;
  stroke-dashoffset: 8;
  filter: drop-shadow(0 0 3px #38996870);
  opacity: 0;
}

.scene-journey-progress {
  stroke-dasharray: 100;
  stroke-width: 3.1;
}

.scene-build-progress,
.scene-review-progress {
  transform-box: fill-box;
  transform-origin: left;
}

.scene-review-ready,
.scene-journey-stop,
.scene-report-light {
  transform-box: fill-box;
  transform-origin: center;
}

.work-style h2 .style-ink {
  position: relative;
  display: inline-block;
  isolation: isolate;
  background: none;
  white-space: nowrap;
}

.style-ink::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  bottom: .09em;
  height: .29em;
  background: #c1ee91;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .work-style h2.is-visible .style-ink::after {
    animation: strength-underline .86s cubic-bezier(.2, .8, .25, 1) both;
  }

  #approach .ability.is-visible .scene-route-signal {
    animation: strength-route 4.8s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-agent-chip {
    animation: strength-agent 4.8s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-report {
    animation: strength-report 4.8s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-report-light {
    animation: strength-report-light 4.8s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-rule-focus {
    animation: strength-rules 4.9s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-rule-sheet {
    animation: strength-sheet 4.9s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-journey-progress {
    animation: strength-journey 5.3s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-journey-login {
    animation: strength-journey-stop 5.3s calc(var(--scene-delay) + .75s) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-journey-end {
    animation: strength-journey-stop 5.3s calc(var(--scene-delay) + 1.65s) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-journey-resume {
    animation: strength-resume 5.3s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-terminal-caret {
    animation: strength-caret 5.2s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-build-progress {
    animation: strength-build 5.2s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-preview-lift {
    animation: strength-preview 5.2s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-token-selection {
    animation: strength-state 5.6s var(--scene-delay) cubic-bezier(.22, .8, .35, 1) infinite both;
  }

  #approach .ability.is-visible .scene-component-sample {
    animation: strength-component 5.6s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-review-check {
    stroke-dasharray: 1;
    animation: strength-review 5.8s calc(var(--scene-delay) + var(--check-delay)) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-review-ready {
    animation: strength-ready 5.8s var(--scene-delay) ease-in-out infinite both;
  }

  #approach .ability.is-visible .scene-review-progress {
    animation: strength-review-progress 5.8s var(--scene-delay) ease-in-out infinite both;
  }

  @keyframes strength-underline {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0); }
  }

  @keyframes strength-route {
    0%, 8% { stroke-dashoffset: 8; opacity: 0; }
    15% { opacity: 1; }
    58% { stroke-dashoffset: -88; opacity: 1; }
    65%, 100% { stroke-dashoffset: -101; opacity: 0; }
  }

  @keyframes strength-agent {
    0%, 20%, 66%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
  }

  @keyframes strength-report {
    0%, 43%, 88%, 100% { transform: translateY(0); }
    61%, 70% { transform: translateY(-7px); }
  }

  @keyframes strength-report-light {
    0%, 49%, 83%, 100% { transform: scale(1); }
    60% { transform: scale(1.42); }
  }

  @keyframes strength-rules {
    0%, 19%, 86%, 100% { transform: translateY(0); }
    32%, 69% { transform: translateY(24px); }
  }

  @keyframes strength-sheet {
    0%, 18%, 82%, 100% { transform: translateX(0); }
    36%, 62% { transform: translate(-10px, -3px); }
  }

  @keyframes strength-journey {
    0%, 9% { stroke-dashoffset: 100; }
    28%, 35% { stroke-dashoffset: 50; }
    54%, 93% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 100; }
  }

  @keyframes strength-journey-stop {
    0%, 11%, 84%, 100% { fill: #fff5ee; transform: scale(1); }
    22% { fill: #c77e68; transform: scale(1.36); }
    34%, 71% { fill: #c77e68; transform: scale(1); }
  }

  @keyframes strength-resume {
    0%, 43%, 87%, 100% { transform: translateY(0); opacity: .85; }
    59%, 73% { transform: translateY(-5px); opacity: 1; }
  }

  @keyframes strength-caret {
    0%, 22%, 44%, 100% { opacity: .95; }
    11%, 33% { opacity: .22; }
  }

  @keyframes strength-build {
    0%, 14% { transform: scaleX(.16); }
    52%, 92% { transform: scaleX(1); }
    100% { transform: scaleX(.16); }
  }

  @keyframes strength-preview {
    0%, 30%, 88%, 100% { transform: translateY(0); }
    50%, 67% { transform: translate(3px, -9px); }
  }

  @keyframes strength-state {
    0%, 13%, 87%, 100% { transform: translateX(0); }
    24%, 42% { transform: translateX(45px); }
    53%, 74% { transform: translateX(90px); }
  }

  @keyframes strength-component {
    0%, 13%, 87%, 100% { fill: #254e48; }
    24%, 42% { fill: #427665; }
    53%, 74% { fill: #647e73; }
  }

  @keyframes strength-review {
    0%, 13% { stroke-dashoffset: 1; }
    25%, 96% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 1; }
  }

  @keyframes strength-ready {
    0%, 37%, 89%, 100% { transform: scale(1); opacity: .75; }
    50% { transform: scale(1.12); opacity: 1; }
    60%, 80% { transform: scale(1); opacity: 1; }
  }

  @keyframes strength-review-progress {
    0%, 9% { transform: scaleX(.13); }
    19%, 24% { transform: scaleX(.35); }
    32%, 37% { transform: scaleX(.67); }
    48%, 94% { transform: scaleX(1); }
    100% { transform: scaleX(.13); }
  }
}

@media (max-width: 990px) {
  #approach .abilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (max-width: 610px) {
  #approach .abilities {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #approach .ability-visual {
    height: clamp(154px, 44vw, 180px);
  }

  #approach .ability-copy {
    padding: 15px 13px 16px;
  }
}

@media (max-width: 360px) {
  #approach .section-heading h2 {
    font-size: 28px;
    letter-spacing: -.025em;
  }
}