/* ── Scroll-in: initial hidden state ── */
.outcome_boxes_section .outcome_box {
  opacity: 0;
  -webkit-transform: translateY(24px);
  transform: translateY(24px);
  /* Include hover-animated properties so transitions are smooth in both directions */
  -webkit-transition: opacity        0.5s  ease,
              -webkit-transform      0.4s  cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow     0.35s ease,
              border-color   0.35s ease,
              background     0.35s ease;
  transition: opacity        0.5s  ease,
              transform      0.4s  cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow     0.35s ease,
              border-color   0.35s ease,
              background     0.35s ease;
}

/* ── Scroll-in: revealed state (class added by JS) ── */
.outcome_boxes_section .outcome_box.outcome-card-visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }

/* ── Hover: card lift + indigo glow shadow ── */
.outcome_boxes_section .outcome_box.outcome-card-visible:hover { -webkit-transform: translateY(-8px); transform: translateY(-8px); box-shadow: 0 20px 48px rgba(79, 70, 229, 0.15), 0  6px 16px rgba(79, 70, 229, 0.08); border-color: rgba(79, 70, 229, 0.35); }

/* ── Icon: start hidden; pop keyframe takes over when class is added ── */
.outcome_boxes_section .outcome_box .approach_icon img { opacity: 0; -webkit-transform: scale(0.5); transform: scale(0.5); }

.outcome_boxes_section .outcome_box.outcome-card-visible .approach_icon img { -webkit-transition: -webkit-transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Hover: icon scale + playful tilt ── */
.outcome_boxes_section .outcome_box.outcome-card-visible:hover .approach_icon img { -webkit-transform: scale(1.22) rotate(-10deg); transform: scale(1.22) rotate(-10deg); }

/* ── Hover: icon wrapper glow ring ── */
.outcome_boxes_section .outcome_box.outcome-card-visible .approach_icon { -webkit-transition: box-shadow 0.35s ease, background 0.35s ease; transition: box-shadow 0.35s ease, background 0.35s ease; }
.outcome_boxes_section .outcome_box.outcome-card-visible:hover .approach_icon { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.10); border-radius: 50%; }

/* ── Hover: heading colour shift to indigo ── */
.outcome_boxes_section .outcome_box .outcomebox_title h4 { -webkit-transition: color 0.3s ease; transition: color 0.3s ease; }
.outcome_boxes_section .outcome_box.outcome-card-visible:hover .outcomebox_title h4 { color: #4F46E5; }

/* ── Icon pop keyframe ── */
@-webkit-keyframes outcome-icon-pop { 0% { -webkit-transform: scale(0.5); opacity: 0; } 65%  { -webkit-transform: scale(1.15); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } }
@keyframes outcome-icon-pop { 0%   { transform: scale(0.5); opacity: 0; } 65%  { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.outcome-icon-animated { -webkit-animation: outcome-icon-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; animation: outcome-icon-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; }


/* Cards: start hidden, slide up */
.executive_box { opacity: 0; -webkit-transform: translateY(28px); transform: translateY(28px); -webkit-transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); position: relative; -webkit-isolation: isolate; isolation: isolate; }
.executive_box.exec-visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }

/* Line connector: start hidden, fade in on scroll */
.executive-line-dots { opacity: 0; -webkit-transition: opacity 0.45s ease; transition: opacity 0.45s ease; }
.executive-line-dots.exec-visible { opacity: 1; }


@property --exec-beam-angle {
  syntax:        '<angle>';
  initial-value: 0deg;
  inherits:      false;
}

@keyframes exec-border-spin { to { --exec-beam-angle: 360deg; } }

/* ── Layer 1 : Crisp 1.5 px traveling beam ── */
.executive_box::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient( from var(--exec-beam-angle), transparent 0%, transparent 56%,   rgba( 99, 102, 241, 0.45) 67%,   rgba(139,  92, 246, 1.00) 75%,    rgba(196, 181, 253, 1.00) 80%,    rgba(139,  92, 246, 1.00) 85%,    rgba( 99, 102, 241, 0.45) 93%,   transparent 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; z-index: -1; pointer-events: none; opacity: 0; -webkit-transition: opacity 0.5s ease 0.35s; transition: opacity 0.5s ease 0.35s; }

/* ── Layer 2 : Soft outer glow (blurred duplicate) ── */
.executive_box::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  padding: 6px;

  background: conic-gradient(
    from var(--exec-beam-angle),
    transparent 0%,
    transparent 56%,
    rgba( 99, 102, 241, 0.08) 67%,
    rgba(139,  92, 246, 0.38) 75%,
    rgba(196, 181, 253, 0.50) 80%,
    rgba(139,  92, 246, 0.38) 85%,
    rgba( 99, 102, 241, 0.08) 93%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-filter: blur(7px);
  filter: blur(7px);
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease 0.35s;
  transition: opacity 0.5s ease 0.35s;
}

/* ── Activate both layers once card is revealed by scroll ── */
.executive_box.exec-visible::before { opacity: 1; -webkit-animation: exec-border-spin 4s linear infinite; animation: exec-border-spin 4s linear infinite; }
.executive_box.exec-visible::after { opacity: 1; -webkit-animation: exec-border-spin 4s linear infinite; animation: exec-border-spin 4s linear infinite; }


/* ── Keyframes ── */

@-webkit-keyframes pf-fade-up { from { opacity: 0; -webkit-transform: translateY(36px); transform: translateY(36px); } to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0);    } }
@keyframes pf-fade-up { from { opacity: 0; transform: translateY(36px); } to   { opacity: 1; transform: translateY(0); } }

@-webkit-keyframes pf-kpi-pulse { 0%,  100% { box-shadow: 0 0  0   0  rgba( 99, 102, 241, 0.00); -webkit-transform: scale(1.00); transform: scale(1.00); } 50%        { box-shadow: 0 0 14px 5px rgba( 99, 102, 241, 0.22); -webkit-transform: scale(1.05); transform: scale(1.05); } }
@keyframes pf-kpi-pulse { 0%,  100% { box-shadow: 0 0  0   0  rgba( 99, 102, 241, 0.00); transform: scale(1.00); } 50% { box-shadow: 0 0 14px 5px rgba( 99, 102, 241, 0.22); transform: scale(1.05); } }

@-webkit-keyframes pf-arrow-bounce { 0%,  100% { -webkit-transform: translateX(0px); transform: translateX(0px); } 50% { -webkit-transform: translateX(5px); transform: translateX(5px); } }
@keyframes pf-arrow-bounce { 0%,  100% { transform: translateX(0px); } 50% { transform: translateX(5px); } }

/* Glass light band travels diagonally across the image surface */
@-webkit-keyframes pf-glass-sweep { from { -webkit-transform: translateX(-160%) skewX(-18deg); transform: translateX(-160%) skewX(-18deg); } to   { -webkit-transform: translateX( 260%) skewX(-18deg); transform: translateX( 260%) skewX(-18deg); } }
@keyframes pf-glass-sweep { from { transform: translateX(-160%) skewX(-18deg); } to   { transform: translateX( 260%) skewX(-18deg); } }

/* ── Scroll-reveal (CSS Scroll-Driven, Chrome 115+; visible on older browsers) ── */

@supports (animation-timeline: view()) {
  .portfolio_item { opacity: 0; -webkit-animation: pf-fade-up 0.72s cubic-bezier(0.16, 1, 0.3, 1) both; animation: pf-fade-up 0.72s cubic-bezier(0.16, 1, 0.3, 1) both; animation-timeline: view(); animation-range: entry 0% entry 28%; }
}

/* ── Card hover lift ── */

.portfolio_card { -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.portfolio_card:hover { -webkit-transform: translateY(-7px); transform: translateY(-7px); }

.portfolio_img { position: relative; overflow: hidden; border-radius: inherit; -webkit-transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1); }

/* Elevation highlight on hover — same language as Outcome cards */
.portfolio_img:hover { box-shadow: 0 20px 48px rgba(79, 70, 229, 0.15), 0  6px 16px rgba(79, 70, 229, 0.08); }

.portfolio_img::after {
  content: '';
  position: absolute;
  top: -20%;
  left: 0;
  width: 42%;
  height: 140%;
  background: linear-gradient(
    to right,
    transparent                     0%,
    rgba(255, 255, 255, 0.03)      18%,
    rgba(255, 255, 255, 0.09)      40%,
    rgba(255, 255, 255, 0.13)      50%,
    rgba(255, 255, 255, 0.09)      60%,
    rgba(255, 255, 255, 0.03)      82%,
    transparent                   100%
  );
  -webkit-transform: translateX(-160%) skewX(-18deg);
  transform: translateX(-160%) skewX(-18deg);
  pointer-events: none;
  z-index: 2;
  will-change: transform;
}

/* Fire one sweep pass the moment the cursor enters the image area */
.portfolio_img:hover::after {
  -webkit-animation: pf-glass-sweep 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation: pf-glass-sweep 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ── KPI icons — staggered glow pulse + hover wiggle ── */

.kpi_icon {
  -webkit-animation: pf-kpi-pulse 3.2s ease-in-out infinite;
  animation: pf-kpi-pulse 3.2s ease-in-out infinite;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.portfolio_kpi:nth-child(1) .kpi_icon { animation-delay: 0.00s; }
.portfolio_kpi:nth-child(2) .kpi_icon { animation-delay: 1.07s; }
.portfolio_kpi:nth-child(3) .kpi_icon { animation-delay: 2.13s; }

.kpi_icon img {
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.portfolio_kpi:hover .kpi_icon      { -webkit-transform: scale(1.12); transform: scale(1.12); }
.portfolio_kpi:hover .kpi_icon img  { -webkit-transform: scale(1.20) rotate(-8deg); transform: scale(1.20) rotate(-8deg); }

.kpi_info h4 { -webkit-transition: color 0.3s ease; transition: color 0.3s ease; }
.portfolio_kpi:hover .kpi_info h4   { color: #6366F1; }

/* ── Text micro-interactions ── */

.portfolio_category { -webkit-transition: letter-spacing 0.35s ease, color 0.3s ease; transition: letter-spacing 0.35s ease, color 0.3s ease; }
.portfolio_card:hover .portfolio_category { letter-spacing: 0.07em; color: #6366F1; }

.portfolio_desc { opacity: 0.82; -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; }
.portfolio_card:hover .portfolio_desc { opacity: 1; }

/* ── CTA arrow slide-right ── */

.view_portfolio_detail { display: -webkit-inline-flex; display: inline-flex; -webkit-align-items: center; align-items: center; gap: 8px; }
.view_portfolio_detail img { -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.view_portfolio_detail:hover img { -webkit-transform: translateX(7px); transform: translateX(7px); }

.cta_btn img { -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.cta_btn:hover img { -webkit-transform: translateX(7px); transform: translateX(7px); }

.project_cta_box .cta_btn:not(:hover) img { -webkit-animation: pf-arrow-bounce 2s ease-in-out infinite; animation: pf-arrow-bounce 2s ease-in-out infinite; }

/* ── Reduced-motion safety net ── */

@media (prefers-reduced-motion: reduce) {
  .kpi_icon, .portfolio_img::after, .project_cta_box .cta_btn img { -webkit-animation: none !important; animation: none !important; }
  .portfolio_card, .portfolio_img, .kpi_icon img, .kpi_info h4, .view_portfolio_detail img, .cta_btn img, .portfolio_category, .portfolio_desc { -webkit-transition: none !important; transition: none !important; }
}

@media (min-width: 992px) {
  html.w-mod-js:not(.w-mod-ix) [data-w-id="1e0f74e5-a275-b8c1-cfd9-c19ac600c294"] { -webkit-transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -moz-transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -ms-transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transform: translate3d(0, 0, 0) scale3d(0, 0, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); -webkit-filter: blur(10px); filter: blur(10px); }

}