* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    :root {
        --brand: #3b82f6;
        --text: #1f2937;
        --surface: #ffffff;
        --border: #e5e7eb;
        --background: #f9fafb;
        
        /* Animation variables */
        --radius: 8px;
        --elev-shadow: 0 8px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
        --t-fast: .20s ease;
        --t-med: .25s ease;
        --label-size: 0.6rem;
    }

    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: var(--background);
        color: var(--text);
        line-height: 1.6;
    }

    /* ==========================================================
        Profile Section – following contact section structure
        ========================================================== */

    /* ───────── Outer wrapper (same rhythm as contact section) ───────── */
    .profile-row {
        padding: 5rem 0rem 5rem;
        color: var(--text);
    }

    /* ───────── Two-column container ───────── */
    .profile-container {
        display: flex;
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        border-radius: 12px;
        overflow: hidden;
        background: none;
        gap: 1rem;
    }

    /* LEFT • grid container (70%) */
    .grid-container {
        flex: 0 0 70%;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border-radius: 12px;
        position: relative;
    }

    /* RIGHT • metrics container (30%) */
    .metrics-container {
        flex: 1 1 30%;
        box-sizing: border-box;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 1.5rem;
    }

    /* ───────── Grid system (10 columns × 5 rows) ───────── */
    .profile-grid {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(5, 1fr);
        width: 100%;
        aspect-ratio: calc((10 * 1 + 9 * 8px) / (5 * 1 + 4 * 8px));
        gap: 8px;
        position: relative;
    }

    .grid-cell {
        border: 1px solid var(--border);
        aspect-ratio: 1;
        border-radius: 4px;
        opacity: 0.3;
    }

    /* SVG overlay for dynamic connection lines */
    .link-overlay {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }

    /* Items layer */
    .items-layer {
        position: absolute;
        inset: 0;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(5, 1fr);
        gap: 8px;
        z-index: 2;
        pointer-events: none;
    }

    .items-layer .adaptive-cell {
        pointer-events: auto;
    }

    /* Line style (SVG path) */
    .link-overlay .flow-line {
        stroke: url(#flowGrad);
        stroke-width: 2;
        stroke-linecap: round;
        fill: none;
    }

    /* Adaptive cell */
    .adaptive-cell {
        border: 1px solid rgba(0,0,0,.15);
        border-radius: var(--radius);
        background: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6%;
        box-sizing: border-box;
        gap: 0;
        transition:
            background-color var(--t-med),
            box-shadow var(--t-med),
            border-color var(--t-fast),
            transform var(--t-fast);
    }

    .adaptive-cell .icon-wrap {
        position: relative;
        width: 90%;
        height: 70%;
        display: block;
    }

    .adaptive-cell .icon {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        transition: opacity .18s ease;
    }

    .adaptive-cell .icon.stroke {
        opacity: 1;
    }

    .adaptive-cell .icon.fill {
        opacity: 0;
    }

    /* Label hidden by default; reveals on hover or .is-active */
    .adaptive-cell .adaptive-label {
        font-size: var(--label-size);
        margin: 0;
        padding: 0;
        line-height: 1;
        opacity: 0;
        transform: translateY(4px) scaleY(0.98);
        transform-origin: top;
        max-height: 0;
        overflow: hidden;
        pointer-events: none;
        transition: opacity var(--t-fast), transform var(--t-fast), max-height var(--t-fast);
    }

    .adaptive-cell:hover .adaptive-label,
    .adaptive-cell.is-active .adaptive-label {
        opacity: 1;
        transform: translateY(0) scaleY(1);
        max-height: 2rem;
        pointer-events: auto;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    /* Hover style & programmatic activation style unified */
    .adaptive-cell.hover-purple:hover,
    .adaptive-cell.hover-purple.is-active {
        background: #ffffff;
        border-color: transparent;
        box-shadow: var(--elev-shadow);
        transform: translateY(-2px);
    }

    .adaptive-cell.hover-purple:hover .icon.stroke,
    .adaptive-cell.hover-purple.is-active .icon.stroke {
        opacity: 0;
    }

    .adaptive-cell.hover-purple:hover .icon.fill,
    .adaptive-cell.hover-purple.is-active .icon.fill {
        opacity: 1;
    }

    /* ───────── Metrics placeholder ───────── */
    .metrics-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        color: #9ca3af;
        font-style: italic;
    }

    /* Node animations */
    @keyframes node-pop-in {
        0% { transform: scale(0.85); opacity: 0; }
        60% { transform: scale(1.04); }
        100% { transform: scale(1); opacity: 1; }
    }

    @keyframes node-shrink-out {
        0% { transform: scale(1); opacity: 1; }
        100% { transform: scale(.85); opacity: 0; }
    }

    .adaptive-cell.node-enter {
        animation: node-pop-in 280ms ease-out both;
    }

    .adaptive-cell.node-exit {
        animation: node-shrink-out 220ms ease-in both;
    }

    /* Register an animatable custom property for the gradient start angle */
    @property --spin {
        syntax: "<angle>";
        inherits: false;
        initial-value: 0deg;
    }

    /* Service node: stationary ring, moving gradient sweep */
    .adaptive-cell.is-service.is-active::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: calc(var(--radius) + 2px);
        padding: 2px;
        background: conic-gradient(
            from var(--spin),
            #7C4DFF 0%,
            #18FFFF 50%,
            #7C4DFF 100%
        );
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: sweep 2.8s linear infinite;
        pointer-events: none;
        z-index: 0;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
    }

    /* Root uses the same animated gradient outline as service when active */
    .adaptive-cell.is-root.is-active::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: calc(var(--radius) + 2px);
        padding: 2px;
        background: conic-gradient(
            from var(--spin),
            #7C4DFF 0%,
            #18FFFF 50%,
            #7C4DFF 100%
        );
        -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: sweep 2.8s linear infinite;
        pointer-events: none;
        z-index: 0;
        filter: drop-shadow(0 2px 6px rgba(0,0,0,.08));
    }

    @keyframes sweep {
        to { --spin: 360deg; }
    }

    /* ───────── Mobile layout ───────── */
    @media (max-width: 768px) {
        .profile-container {
            flex-direction: column;
        }
        
        .grid-container {
            flex: none;
        }
        
        .metrics-container {
            flex: none;
        }
        
        /* Change grid to 5 columns × 10 rows on mobile */
        .profile-grid {
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(10, 1fr);
            aspect-ratio: calc((5 * 1 + 4 * 8px) / (10 * 1 + 9 * 8px));
        }

        .items-layer {
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(10, 1fr);
        }

        :root {
            --label-size: 0.5rem;
        }
    }

    /* ───────── Small screen adjustments ───────── */
    @media (max-width: 480px) {
        .profile-row {
            padding: 1rem 0.5rem;
        }
        
        .grid-container,
        .metrics-container {
            padding: 1rem;
        }
    }

    /* Add horizontal padding to the grid container and ensure box-sizing includes padding */
.grid-container {
    padding: 0 2rem;
    box-sizing: border-box;
    position: relative; /* ensures .items-layer aligns correctly */
}

/* Ensure the grid itself stretches and its cells align content fully */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(5, 1fr);
    width: 100%;
    aspect-ratio: calc((10 * 1 + 9 * 8px) / (5 * 1 + 4 * 8px));
    gap: 8px;
    position: relative;
    justify-items: stretch;
    align-items: stretch;
    box-sizing: border-box;
}

/* Items layer must mirror grid and padding to align nodes */
.items-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 2rem;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
    z-index: 2;
    pointer-events: none;
    justify-items: stretch;
    align-items: stretch;
}

.items-layer .adaptive-cell {
    pointer-events: auto;
}

/* Ensure nodes (.adaptive-cell) fill their grid cells and maintain internal padding */
.adaptive-cell {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 6%;
}

/* Maintain behavior on mobile with consistent padding */
@media (max-width: 768px) {
    .grid-container {
        padding: 0 2rem;
    }
    .profile-grid {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(10, 1fr);
    }
    .items-layer {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(10, 1fr);
        justify-items: stretch;
        align-items: stretch;
        padding: 0 2rem;
    }
    .adaptive-cell {
        padding: 4%;
    }
}
/* stop clipping */
.profile-container {
  overflow: visible;          /* was: hidden */
  position: relative;         /* create a stacking context */
}

/* make sure the grid side sits above the metrics side */
.grid-container    { position: relative; z-index: 2; }
.metrics-container { position: relative; z-index: 1; }

/* let items rise above siblings when hovered/active */
.adaptive-cell { position: relative; z-index: 0; }
.adaptive-cell:hover,
.adaptive-cell.is-active { z-index: 50; }   /* lift over lines/metrics */
/* ===== Pillars header (scoped to #profile only) ===== */
#profile .pillars-head{
  /* keep it out of the grid stacking context */
  position: relative;
  isolation: isolate;
  margin-block-end: 1.25rem;    /* spacing below the header */
}

#profile .pillars-head .pillars-inner{
  max-width: 1200px;            /* matches .profile-container */
  margin-inline: auto;
  text-align: center;
  padding-inline: 2rem;         /* aligns with .grid-container padding */
}

#profile .pillars-head .pillars-title{
  margin: 0 0 .25rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase; /* remove if you want normal case */
  line-height: 1.1;
  font-size: clamp(1.4rem, 2.8vw + 0.4rem, 2.25rem); /* smaller than before */
  color: var(--text);
}

#profile .pillars-head .pillars-title .blk{ color: var(--text); }

/* force purple accent regardless of global brand color */
#profile .pillars-head{
  --accent-1: #8338ec;
  --accent-2: #a855f7;
  --tb-muted: #6b7280;
}

#profile .pillars-head .pillars-title .accent{
  color: var(--accent-1);
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#profile .pillars-head .tb-deck{
  font-size: 16px;
  line-height: 1.5;
  color: var(--tb-muted);
  margin: 0;
}

/* small-screen spacing tweak only for the header block */
@media (max-width: 768px){
  #profile .pillars-head{ margin-block-end: 1rem; }
}