/* Corporate line icons — polished UI geometry + subtle motion */
.icon {
  --icon-size: 2rem;
  --icon-stroke: 1;
  /* Structure = brand blue · details = teal */
  --icon-color: var(--color-accent);
  --icon-color-alt: var(--color-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
  color: var(--icon-color);
}

.icon svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}

.icon__stroke {
  fill: none;
  stroke: var(--icon-color);
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon__stroke.icon__fill {
  fill: color-mix(in srgb, var(--icon-color) 14%, transparent);
}

.icon__stroke.icon__accent {
  stroke: var(--icon-color-alt);
}

.icon__stroke.icon__accent.icon__fill {
  fill: color-mix(in srgb, var(--icon-color-alt) 22%, transparent);
}

.icon__fill:not(.icon__stroke) {
  fill: var(--icon-color);
  opacity: 0.1;
  stroke: none;
}

.icon__fill.icon__accent:not(.icon__stroke) {
  fill: var(--icon-color-alt);
  opacity: 0.22;
  stroke: none;
}

.icon--lg {
  --icon-size: 2.5rem;
}

.icon--sm {
  --icon-size: 1.35rem;
}

.icon--on-dark {
  --icon-color: rgba(255, 255, 255, 0.95);
  --icon-color-alt: rgba(255, 255, 255, 0.95);
}

.cta-band .icon--on-dark .icon__stroke,
.cta-band .icon--on-dark .icon__stroke.icon__accent {
  stroke: #fff;
}

/* Service cards — keep dual-tone crisp on hover */
.card-link .icon,
.pillar .icon {
  --icon-color: var(--color-accent);
  --icon-color-alt: var(--color-primary);
}

/* Why-us / pillar icons — slightly larger */
.pillar .icon-wrap {
  width: 3.5rem;
  height: 3.5rem;
}

.pillar .icon {
  --icon-size: 2.35rem;
}

.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.section--surface .icon-wrap,
.card-link .icon-wrap {
  background: var(--color-white);
}

.section--ink .icon-wrap,
.cta-band .icon-wrap {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
}

.card-link:hover .icon-wrap,
.pillar:hover .icon-wrap,
.contact-item:hover .icon-wrap {
  border-color: color-mix(
    in srgb,
    var(--color-accent) 30%,
    color-mix(in srgb, var(--color-primary) 35%, var(--color-border))
  );
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--color-accent) 5%, var(--color-white)),
      color-mix(in srgb, var(--color-primary) 7%, var(--color-white))
    );
  box-shadow: 0 8px 20px rgba(4, 107, 210, 0.1);
}

/* Draw accent — always solid; brief redraw on hover only */
.icon__draw {
  stroke-dasharray: 240;
  stroke-dashoffset: 0;
}

.card-link:hover .icon__draw,
.pillar:hover .icon__draw,
.contact-item:hover .icon__draw,
.benefit:hover .icon__draw,
.icon-wrap:hover .icon__draw {
  animation: iconDrawOnce 0.55s var(--ease);
}

@keyframes iconDrawOnce {
  from {
    stroke-dashoffset: 240;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Unique ambient motions — restrained */
.icon--speed .icon__hand {
  transform-origin: 12px 12px;
  animation: iconSweep 7s var(--ease) infinite;
}

.icon--globe .icon__orbit {
  transform-origin: 12px 12px;
  animation: iconSpin 18s linear infinite;
}

.icon--results .icon__pulse {
  transform-origin: 12px 12px;
  animation: iconPulse 3.6s var(--ease) infinite;
}

.icon--advisory .icon__node {
  animation: iconNode 2.8s var(--ease) infinite;
}

.icon--advisory .icon__node:nth-child(2) {
  animation-delay: 0.4s;
}

.icon--advisory .icon__node:nth-child(3) {
  animation-delay: 0.8s;
}

.icon--deal .icon__arrow-a {
  animation: iconDealA 3.2s var(--ease) infinite;
}

.icon--deal .icon__arrow-b {
  animation: iconDealB 3.2s var(--ease) infinite;
}

.icon--flex .icon__arm {
  transform-origin: 12px 12px;
  transition: transform 0.35s var(--ease);
}

.card-link:hover .icon--flex .icon__arm,
.pillar:hover .icon--flex .icon__arm {
  transform: scale(1.08);
}

.icon--audit .icon__check {
  stroke-dasharray: 40;
  stroke-dashoffset: 0;
}

.card-link:hover .icon--audit .icon__check,
.pillar:hover .icon--audit .icon__check {
  animation: iconDrawOnce 0.45s var(--ease);
}

.icon--mail .icon__flap {
  transform-origin: 12px 8px;
  transition: transform 0.35s var(--ease);
}

.contact-item:hover .icon--mail .icon__flap {
  transform: translateY(-1px);
}

.icon--phone .icon__wave {
  opacity: 0.35;
  transform-origin: 16px 8px;
  animation: iconWave 2.4s var(--ease) infinite;
}

.icon--pin .icon__dot {
  animation: iconBounceSoft 2.8s var(--ease) infinite;
}

.icon--insight .icon__line {
  stroke-dasharray: 12;
  animation: iconScan 3.2s linear infinite;
}

.icon--growth .icon__bar {
  transform-box: fill-box;
  transform-origin: bottom;
  animation: iconGrow 3.5s var(--ease) infinite;
}

.icon--growth .icon__bar:nth-of-type(2) {
  animation-delay: 0.12s;
}

.icon--growth .icon__bar:nth-of-type(3) {
  animation-delay: 0.24s;
}

.icon--career .icon__handle {
  transform-origin: 12px 9px;
  animation: iconCareer 3.2s var(--ease) infinite;
}

.card-link:hover .icon--career .icon__handle,
.pillar:hover .icon--career .icon__handle {
  animation-duration: 1.4s;
}

@keyframes iconSweep {
  0%,
  100% {
    transform: rotate(-18deg);
  }
  50% {
    transform: rotate(28deg);
  }
}

@keyframes iconSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes iconPulse {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.55;
    transform: scale(1);
  }
}

@keyframes iconNode {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@keyframes iconDealA {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1.5px);
  }
}

@keyframes iconDealB {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-1.5px);
  }
}

@keyframes iconWave {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

@keyframes iconBounceSoft {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1px);
  }
}

@keyframes iconScan {
  to {
    stroke-dashoffset: -24;
  }
}

@keyframes iconGrow {
  0%,
  100% {
    transform: scaleY(0.7);
    opacity: 0.55;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes iconCareer {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon__draw,
  .icon--audit .icon__check,
  .icon--flex .icon__arm,
  .icon--mail .icon__flap {
    transition: none !important;
    animation: none !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }

  .icon--speed .icon__hand,
  .icon--globe .icon__orbit,
  .icon--results .icon__pulse,
  .icon--advisory .icon__node,
  .icon--deal .icon__arrow-a,
  .icon--deal .icon__arrow-b,
  .icon--career .icon__handle,
  .icon--phone .icon__wave,
  .icon--pin .icon__dot,
  .icon--insight .icon__line,
  .icon--growth .icon__bar {
    animation: none !important;
  }
}

/* Contact rows */
.contact-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) 0;
}

.contact-item + .contact-item {
  border-top: 1px solid var(--color-border);
}

.contact-item .icon-wrap {
  margin-bottom: 0;
}

.contact-item__label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

.contact-item__value {
  color: var(--color-ink);
  font-weight: 600;
  font-size: var(--fs-sm);
}

.contact-item__value a {
  color: inherit;
}

.contact-item__value a:hover {
  color: var(--color-primary);
}

.benefit .icon-wrap {
  margin-bottom: var(--space-3);
}

.cta-band__icon {
  margin-bottom: var(--space-4);
}