/*
 * Approach page correction
 *
 * This file is intentionally loaded by approach.html only. It resolves the
 * competing card rules from the shared experience and portfolio layers while
 * retaining the useful, tactile process-card interaction.
 */

.company-page {
  --approach-ink: #030405;
  --approach-paper: #f8f6ef;
  --approach-signal: #8bea4d;
  --approach-muted: #c8d2c4;
}

.co-approach-hero {
  background-color: var(--approach-ink) !important;
  color: var(--approach-paper);
}

.co-approach-hero .co-kicker,
.co-approach-hero h1 em,
.co-process-section .co-kicker,
.co-process-section h2 em,
.co-process-section .co-process-number,
.co-process-section .co-process-name > span,
.co-process-section .co-process-output small {
  color: var(--approach-signal) !important;
}

.co-approach-hero .co-button,
.co-approach-hero .co-button:hover {
  background: var(--approach-signal);
  border-color: var(--approach-signal);
  color: var(--approach-ink);
}

.co-approach-hero .co-button-secondary,
.co-approach-hero .co-button-secondary:hover {
  background: rgba(248, 246, 239, .04);
  border-color: rgba(248, 246, 239, .48);
  color: var(--approach-paper);
}

/* Make the three stages read as a deliberate sequence. Their old vertical
   positions overlapped the second card's final line on common desktop widths. */
.co-approach-hero .co-process-art {
  width: min(100%, 620px);
  min-height: clamp(600px, 45vw, 650px);
  margin-left: auto;
}

.co-approach-grid > div,
.co-process-section .co-section-heading > * {
  min-width: 0;
}

.co-approach-hero .co-lead,
.co-process-section .co-section-heading > p {
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

.co-approach-hero .co-plan-card {
  box-sizing: border-box;
  width: 66%;
  min-height: 176px;
  padding: 25px 27px;
  border-color: rgba(248, 246, 239, .48) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .48) !important;
  color: var(--approach-paper);
  transition:
    transform .34s cubic-bezier(.16, 1, .3, 1),
    box-shadow .34s ease,
    border-color .34s ease !important;
}

.co-approach-hero .co-plan-first {
  --approach-rotate: -2deg !important;
  top: 2%;
  left: 0;
  background: var(--approach-paper) !important;
  border-color: var(--approach-paper) !important;
  color: var(--approach-ink) !important;
}

.co-approach-hero .co-plan-second {
  --approach-rotate: 2deg !important;
  top: 31%;
  right: 0;
  background: #101510 !important;
  border-color: rgba(139, 234, 77, .82) !important;
  color: var(--approach-paper) !important;
}

.co-approach-hero .co-plan-second small {
  color: #d3ddce;
}

.co-approach-hero .co-plan-third {
  --approach-rotate: -1deg !important;
  bottom: 2%;
  left: 7%;
  width: 66%;
  min-height: 178px;
  background: var(--approach-signal) !important;
  border-color: var(--approach-signal) !important;
  color: var(--approach-ink) !important;
}

.co-approach-hero .co-plan-third b {
  color: var(--approach-ink);
}

.co-approach-hero .co-plan-sketch i:nth-child(2) {
  background: rgba(139, 234, 77, .18);
}

.co-approach-hero .co-plan-sketch i:nth-child(3) {
  background: var(--approach-signal);
}

/* A single entrance is enough. It uses the independent `translate` property
   so it remains compatible with the cards' resting rotations and hover lift. */
@keyframes approach-card-settle {
  from {
    opacity: 0;
    translate: 0 30px;
    filter: blur(3px);
  }

  to {
    opacity: 1;
    translate: 0;
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.approach-art-enter .co-approach-hero .co-process-art .co-plan-card {
    animation: approach-card-settle .68s cubic-bezier(.16, 1, .3, 1) both !important;
  }

  html.approach-art-enter .co-approach-hero .co-process-art .co-plan-second {
    animation-delay: .12s !important;
  }

  html.approach-art-enter .co-approach-hero .co-process-art .co-plan-third {
    animation-delay: .24s !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .co-approach-hero .co-plan-card:hover {
    z-index: 4;
    border-color: var(--approach-signal) !important;
    box-shadow: 0 26px 54px rgba(0, 0, 0, .62) !important;
    transform: translateY(-7px) rotate(var(--approach-rotate)) !important;
  }

  .co-process-list > li:hover {
    background: rgba(139, 234, 77, .055);
    box-shadow: inset 3px 0 0 var(--approach-signal);
  }
}

.co-process-section::before {
  border-color: rgba(139, 234, 77, .28);
  box-shadow: 0 0 0 46px rgba(139, 234, 77, .025);
}

.co-process-number {
  border-color: rgba(139, 234, 77, .68);
}

.co-process-output {
  border-color: rgba(139, 234, 77, .3);
}

.co-working::after {
  background: var(--approach-signal);
}

@media (max-width: 900px) {
  .co-approach-hero .co-process-art {
    width: min(100%, 560px);
    min-height: 620px;
    margin-inline: auto;
  }

  .co-approach-hero .co-plan-card {
    width: 68%;
  }

  .co-approach-hero .co-plan-second {
    top: 31%;
  }

  .co-approach-hero .co-plan-third {
    left: 5%;
    width: 68%;
  }
}

@media (max-width: 640px) {
  .co-approach-hero .co-approach-grid {
    min-width: 0;
  }

  .co-approach-hero h1 {
    max-width: 100%;
    font-size: clamp(42px, 11vw, 50px);
    letter-spacing: -.065em;
  }

  .co-process-section h2 {
    max-width: 100%;
    font-size: clamp(35px, 9.3vw, 39px);
    letter-spacing: -.06em;
  }

  .co-approach-hero .co-process-art {
    min-height: 590px;
  }

  .co-approach-hero .co-plan-card {
    width: 78%;
    min-height: 154px;
    padding: 20px;
  }

  .co-approach-hero .co-plan-first {
    top: 2%;
    left: 1%;
  }

  .co-approach-hero .co-plan-second {
    top: 33%;
    right: 0;
  }

  .co-approach-hero .co-plan-third {
    bottom: 1%;
    left: 4%;
    width: 78%;
    min-height: 172px;
  }

  .co-approach-hero .co-plan-card strong {
    font-size: clamp(25px, 7vw, 31px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .co-approach-hero .co-plan-card,
  .co-process-list > li {
    transition: none !important;
  }
}