/* ═════════════════════════════════════════════════════════
   ABOUT PAGE — FLAT STRUCTURE ILLUSTRATIONS v2
   Full-width SVGs, tab layout, subtle interactivity
   ═════════════════════════════════════════════════════════ */

/* ─── Tab container (reuses .ig-tabs styles) ─────────────── */
.about-tabs {
    margin-top: 0;
}

.about-tabs .ig-tabs-nav {
    justify-content: center;
    margin-bottom: 28px;
}

/* ─── Full-width illustration card ───────────────────────── */
.about-illustration-wide {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--card-border);
    padding: 32px 24px 28px;
    border-radius: 4px;
}

/* Remove the 900px cap so SVGs fill container width */
.about-illustration-wide svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;        /* full width */
    margin: 0;
}

/* Caption stays readable — constrained */
.about-illustration-wide .about-illustration-caption {
    max-width: 780px;
    margin: 20px auto 0;
    text-align: center;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.7;
}

.about-illustration-wide .about-illustration-label {
    font-family: 'Fira Code', monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--teal);
    opacity: 0.85;
    margin-bottom: 18px;
    text-align: center;
}

/* ─────────────────────────────────────────────────────────
   INTERACTIVITY — ILLUSTRATION 1 (Group level)
   ───────────────────────────────────────────────────────── */

/* Core breathing — always-on subtle pulse */
.about-core-pulse {
    transform-origin: 450px 275px;
    animation: aboutCoreBreath 4.5s ease-in-out infinite;
}

@keyframes aboutCoreBreath {
    0%, 100% {
        transform: scale(1);
        stroke-opacity: 0.18;
    }
    50% {
        transform: scale(1.04);
        stroke-opacity: 0.32;
    }
}

.about-core-glow {
    animation: aboutCoreGlow 4.5s ease-in-out infinite;
}

@keyframes aboutCoreGlow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Subtle rotating dashed spokes — shows "flow" inward */
.about-svg-group .about-spokes line {
    stroke-dashoffset: 0;
    animation: aboutSpokeFlow 6s linear infinite;
}

@keyframes aboutSpokeFlow {
    to { stroke-dashoffset: -32; }
}

/* Practice node hover — highlight its spoke */
.about-node {
    cursor: default;
    transition: transform 0.3s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.about-node:hover {
    transform: scale(1.05);
}

.about-node:hover rect {
    filter: drop-shadow(0 0 8px rgba(0, 201, 167, 0.35));
}

/* When a node is hovered, dim all non-matching spokes */
.about-svg-group:has(.about-node[data-id="p-global"]:hover)   .about-spoke:not([data-target="p-global"])   { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-enterprise"]:hover) .about-spoke:not([data-target="p-enterprise"]) { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-public"]:hover)   .about-spoke:not([data-target="p-public"])   { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-software-eng"]:hover) .about-spoke:not([data-target="p-software-eng"]) { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-hardware"]:hover) .about-spoke:not([data-target="p-hardware"]) { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-software-int"]:hover) .about-spoke:not([data-target="p-software-int"]) { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-data"]:hover)     .about-spoke:not([data-target="p-data"])     { stroke-opacity: 0.1; }
.about-svg-group:has(.about-node[data-id="p-iot"]:hover)      .about-spoke:not([data-target="p-iot"])      { stroke-opacity: 0.1; }

/* And the matching spoke gets brighter */
.about-svg-group:has(.about-node[data-id="p-global"]:hover)     .about-spoke[data-target="p-global"],
.about-svg-group:has(.about-node[data-id="p-enterprise"]:hover) .about-spoke[data-target="p-enterprise"],
.about-svg-group:has(.about-node[data-id="p-public"]:hover)     .about-spoke[data-target="p-public"] {
    stroke: #58c4dd;
    stroke-opacity: 0.9;
    stroke-width: 2;
}

.about-svg-group:has(.about-node[data-id="p-software-eng"]:hover) .about-spoke[data-target="p-software-eng"],
.about-svg-group:has(.about-node[data-id="p-hardware"]:hover)     .about-spoke[data-target="p-hardware"],
.about-svg-group:has(.about-node[data-id="p-software-int"]:hover) .about-spoke[data-target="p-software-int"],
.about-svg-group:has(.about-node[data-id="p-data"]:hover)         .about-spoke[data-target="p-data"],
.about-svg-group:has(.about-node[data-id="p-iot"]:hover)          .about-spoke[data-target="p-iot"] {
    stroke: #00c9a7;
    stroke-opacity: 0.9;
    stroke-width: 2;
}

.about-svg-group .about-spoke {
    transition: stroke-opacity 0.3s ease, stroke-width 0.3s ease, stroke 0.3s ease;
}

/* ─────────────────────────────────────────────────────────
   INTERACTIVITY — ILLUSTRATION 2 (Member firm)
   ───────────────────────────────────────────────────────── */

/* External arrows — slow pulse to show "exchange" */
.about-ext-arrow {
    stroke-dasharray: 4, 4;
    animation: aboutExtFlow 4s linear infinite;
}

@keyframes aboutExtFlow {
    to { stroke-dashoffset: -16; }
}

/* Peer person icons — hover lifts */
.about-peer {
    cursor: default;
    transition: transform 0.25s ease;
    transform-box: fill-box;
    transform-origin: center;
}

.about-peer:hover {
    transform: scale(1.18);
}

.about-peer:hover circle,
.about-peer:hover path {
    stroke: #58c4dd;
    stroke-width: 2;
}

/* Show MD→lead path when hovering a peer whose lead is commercial/financial/delivery */
.about-svg-firm:has(.about-peer[data-lead="commercial"]:hover) .about-path-md-commercial,
.about-svg-firm:has(.about-peer[data-lead="financial"]:hover)  .about-path-md-financial,
.about-svg-firm:has(.about-peer[data-lead="delivery"]:hover)   .about-path-md-delivery {
    opacity: 0.85;
    animation: aboutPathPulse 1.2s ease-in-out infinite;
}

/* Show lead→peer path */
.about-svg-firm:has(.about-peer[data-peer="0"]:hover) .path-commercial-peer-0,
.about-svg-firm:has(.about-peer[data-peer="1"]:hover) .path-commercial-peer-1,
.about-svg-firm:has(.about-peer[data-peer="2"]:hover) .path-commercial-peer-2,
.about-svg-firm:has(.about-peer[data-peer="3"]:hover) .path-financial-peer-3,
.about-svg-firm:has(.about-peer[data-peer="4"]:hover) .path-financial-peer-4,
.about-svg-firm:has(.about-peer[data-peer="5"]:hover) .path-delivery-peer-5,
.about-svg-firm:has(.about-peer[data-peer="6"]:hover) .path-delivery-peer-6,
.about-svg-firm:has(.about-peer[data-peer="7"]:hover) .path-delivery-peer-7 {
    opacity: 0.85;
    animation: aboutPathPulse 1.2s ease-in-out infinite;
}

@keyframes aboutPathPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* Also highlight the relevant lead box when peer is hovered */
.about-svg-firm:has(.about-peer[data-lead="commercial"]:hover) .about-lead[data-lead="commercial"] rect,
.about-svg-firm:has(.about-peer[data-lead="financial"]:hover)  .about-lead[data-lead="financial"] rect,
.about-svg-firm:has(.about-peer[data-lead="delivery"]:hover)   .about-lead[data-lead="delivery"] rect {
    stroke: #58c4dd;
    stroke-width: 1.5;
    filter: drop-shadow(0 0 6px rgba(88, 196, 221, 0.4));
}

/* Also highlight MD when any peer is hovered */
.about-svg-firm:has(.about-peer:hover) .about-md rect {
    stroke: #58c4dd;
    stroke-width: 1.5;
}

.about-lead rect,
.about-md rect {
    transition: stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .about-illustration-wide {
        padding: 20px 12px 18px;
    }
    .about-illustration-wide .about-illustration-label {
        font-size: 10px;
        margin-bottom: 14px;
    }
    .about-illustration-wide .about-illustration-caption {
        font-size: 12.5px;
        margin-top: 14px;
    }
    .about-tabs .ig-tabs-nav {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* ─── Reduced motion — respect user preference ────────────── */
@media (prefers-reduced-motion: reduce) {
    .about-core-pulse,
    .about-core-glow,
    .about-svg-group .about-spokes line,
    .about-ext-arrow,
    .about-path-lines line,
    .about-path-lead-peer line {
        animation: none !important;
    }
}