/* ===== SHARED COMPANY SCENE WRAPPER — .dc-company-scene / .dc-company-glow =====
   Generic centering wrapper + ambient glow shared by every Company hero
   visual, mirroring the .dc-host-scene / .dc-build-scene pattern used
   elsewhere. Cyan + navy only — no color beyond var(--accent-color) and
   white/navy tints. Company visuals use brand/story metaphors (timeline,
   compass, stepping-stones, badge, network, gallery) — deliberately not
   server/node iconography, since these are not infrastructure pages. */
.dc-company-scene {
    display: flex;
    justify-content: center;
    width: 100%;
}

.dc-company-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0, 229, 255, 0.14), transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}

/* ===== ABOUT HERO VISUAL — .dc-company-about-* =====
   A horizontal timeline: a "2024" milestone dot on the left, a growing
   progress line that draws itself out to the right, and a "Today" dot at
   the end that lights up once the line reaches it. A small marker dot
   travels once along the line after it draws, then the line just holds
   steady (founding-to-now story, not a busy/looping animation). */
.dc-company-about-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-about-stage {
    position: relative;
    width: 320px;
    height: 200px;
    display: flex;
    align-items: center;
}

.dc-company-about-track {
    position: relative;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
    overflow: hidden;
}

.dc-company-about-track-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--accent-color);
    border-radius: 4px;
    animation: dc-company-about-fill 2.2s ease-out 0.4s forwards;
}

.dc-company-about-milestone {
    position: absolute;
    top: 50%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    background: rgba(0, 34, 68, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.dc-company-about-milestone-start {
    left: 0;
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.dc-company-about-milestone-end {
    left: 100%;
    animation: dc-company-about-milestone-light 0.5s ease-out 2.4s forwards;
}

.dc-company-about-marker {
    position: absolute;
    top: 50%;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 2px var(--accent-color);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: dc-company-about-marker-travel 2.2s ease-out 0.4s forwards;
}

.dc-company-about-label {
    position: absolute;
    top: calc(50% + 34px);
    transform: translateX(-50%);
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

.dc-company-about-label-start { left: 0; }
.dc-company-about-label-end { left: 100%; }

@keyframes dc-company-about-fill {
    to { width: 100%; }
}

@keyframes dc-company-about-marker-travel {
    0% { left: 0%; opacity: 1; }
    95% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes dc-company-about-milestone-light {
    to {
        border-color: var(--accent-color);
        color: var(--accent-color);
        box-shadow: 0 0 16px 2px rgba(0, 229, 255, 0.35);
    }
}

@media (max-width: 900px) {
    .dc-company-about-stage-wrap { height: 260px; }
    .dc-company-about-stage { width: 260px; height: 170px; }
}

@media (max-width: 480px) {
    .dc-company-about-stage-wrap { height: 220px; }
    .dc-company-about-stage { width: 220px; height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-about-track-fill,
    .dc-company-about-milestone-end,
    .dc-company-about-marker {
        animation: none;
    }
    .dc-company-about-track-fill { width: 100%; }
    .dc-company-about-milestone-end {
        border-color: var(--accent-color);
        color: var(--accent-color);
    }
    .dc-company-about-marker { opacity: 0; }
}

/* ===== VISION & MISSION HERO VISUAL — .dc-company-vision-* =====
   A compass needle at center rotates once to settle pointing up at a star,
   which then lights up. Distinct from About's linear timeline — this is a
   single rotating element settling into a fixed "true north" state, not a
   left-to-right progress story. */
.dc-company-vision-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-vision-stage {
    position: relative;
    width: 220px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-company-vision-star {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.3);
    animation: dc-company-vision-star-light 0.6s ease-out 1.6s forwards;
}

.dc-company-vision-compass {
    position: relative;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-company-vision-needle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 58px;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.25), var(--accent-color));
    border-radius: 4px;
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(35deg);
    animation: dc-company-vision-settle 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.dc-company-vision-center-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-color);
}

@keyframes dc-company-vision-settle {
    0% { transform: translate(-50%, -100%) rotate(35deg); }
    60% { transform: translate(-50%, -100%) rotate(-8deg); }
    100% { transform: translate(-50%, -100%) rotate(0deg); }
}

@keyframes dc-company-vision-star-light {
    to { color: var(--accent-color); text-shadow: 0 0 12px rgba(0, 229, 255, 0.5); }
}

@media (max-width: 900px) {
    .dc-company-vision-stage-wrap { height: 260px; }
    .dc-company-vision-stage { width: 180px; height: 220px; }
    .dc-company-vision-compass { width: 120px; height: 120px; }
    .dc-company-vision-needle { height: 48px; }
}

@media (max-width: 480px) {
    .dc-company-vision-stage-wrap { height: 220px; }
    .dc-company-vision-stage { width: 160px; height: 190px; }
    .dc-company-vision-compass { width: 100px; height: 100px; }
    .dc-company-vision-needle { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-vision-needle,
    .dc-company-vision-star {
        animation: none;
    }
    .dc-company-vision-needle { transform: translate(-50%, -100%) rotate(0deg); }
    .dc-company-vision-star { color: var(--accent-color); text-shadow: 0 0 12px rgba(0, 229, 255, 0.5); }
}

/* ===== HOW WE WORK HERO VISUAL — .dc-company-hww-* =====
   Three labeled stepping-stones (Teach / Build / Scale) in a row, each
   sitting at a slightly different height. A single dot travels once
   across all three in sequence, lighting each stone as it lands on it,
   then rests lit on the third. Distinct from Vision's single rotating
   needle and About's simple 2-point timeline — this is a 3-stage sequential
   hop across labeled, uneven-height stones. */
.dc-company-hww-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-hww-stage {
    position: relative;
    width: 300px;
    height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.dc-company-hww-stone {
    position: relative;
    width: 78px;
    height: 60px;
    border-radius: 12px;
    background: rgba(0, 34, 68, 0.85);
    border: 2px solid rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}

.dc-company-hww-stone-1 { height: 60px; animation: dc-company-hww-light-1 0.4s ease-out 0.6s forwards; }
.dc-company-hww-stone-2 { height: 92px; animation: dc-company-hww-light-2 0.4s ease-out 1.3s forwards; }
.dc-company-hww-stone-3 { height: 124px; animation: dc-company-hww-light-3 0.4s ease-out 2.0s forwards; }

.dc-company-hww-dot {
    position: absolute;
    bottom: 100%;
    left: 39px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 2px var(--accent-color);
    margin-bottom: 8px;
    animation: dc-company-hww-hop 2.1s cubic-bezier(0.45, 0, 0.55, 1) 0.5s forwards;
}

@keyframes dc-company-hww-hop {
    0% { left: 39px; bottom: 160%; }
    30% { left: 39px; bottom: 100%; }
    35% { left: 149px; bottom: 100%; }
    65% { left: 149px; bottom: 100%; }
    70% { left: 261px; bottom: 100%; }
    100% { left: 261px; bottom: 100%; }
}

@keyframes dc-company-hww-light-1 {
    to { border-color: var(--accent-color); color: var(--accent-color); }
}
@keyframes dc-company-hww-light-2 {
    to { border-color: var(--accent-color); color: var(--accent-color); }
}
@keyframes dc-company-hww-light-3 {
    to { border-color: var(--accent-color); color: var(--accent-color); box-shadow: 0 0 16px 2px rgba(0, 229, 255, 0.3); }
}

@media (max-width: 900px) {
    .dc-company-hww-stage-wrap { height: 260px; }
    .dc-company-hww-stage { width: 260px; height: 150px; }
    .dc-company-hww-stone { width: 66px; }
}

@media (max-width: 480px) {
    .dc-company-hww-stage-wrap { height: 230px; }
    .dc-company-hww-stage { width: 220px; height: 130px; }
    .dc-company-hww-stone { width: 56px; font-size: 0.62rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-hww-stone-1,
    .dc-company-hww-stone-2,
    .dc-company-hww-stone-3,
    .dc-company-hww-dot {
        animation: none;
    }
    .dc-company-hww-stone-1, .dc-company-hww-stone-2, .dc-company-hww-stone-3 {
        border-color: var(--accent-color);
        color: var(--accent-color);
    }
    .dc-company-hww-dot { left: 261px; bottom: 100%; }
}

/* ===== WHY CHOOSE US HERO VISUAL — .dc-company-why-* =====
   A central badge/ribbon with a checkmark scales in once, then four small
   trait chips arranged around it fade in one at a time in sequence.
   Distinct from How We Work's hopping dot — this is a static central badge
   with orbiting chips lighting up, not a traveling marker. */
.dc-company-why-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-why-stage {
    position: relative;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-company-why-badge {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(0, 34, 68, 0.9);
    border: 2px solid var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: var(--accent-color);
    transform: scale(0);
    animation: dc-company-why-badge-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

.dc-company-why-chip {
    position: absolute;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(0, 34, 68, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    opacity: 0;
    transform: translateY(6px);
}

.dc-company-why-chip-1 { top: 0; left: 10px; animation: dc-company-why-chip-in 0.4s ease-out 0.9s forwards; }
.dc-company-why-chip-2 { top: 20px; right: 0; animation: dc-company-why-chip-in 0.4s ease-out 1.3s forwards; }
.dc-company-why-chip-3 { bottom: 20px; left: 0; animation: dc-company-why-chip-in 0.4s ease-out 1.7s forwards; }
.dc-company-why-chip-4 { bottom: 0; right: 10px; animation: dc-company-why-chip-in 0.4s ease-out 2.1s forwards; }

@keyframes dc-company-why-badge-in {
    to { transform: scale(1); }
}

@keyframes dc-company-why-chip-in {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .dc-company-why-stage-wrap { height: 260px; }
    .dc-company-why-stage { width: 220px; height: 220px; }
    .dc-company-why-badge { width: 74px; height: 74px; font-size: 1.6rem; }
    .dc-company-why-chip { font-size: 0.6rem; padding: 5px 10px; }
}

@media (max-width: 480px) {
    .dc-company-why-stage-wrap { height: 230px; }
    .dc-company-why-stage { width: 190px; height: 190px; }
    .dc-company-why-badge { width: 64px; height: 64px; font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-why-badge,
    .dc-company-why-chip-1,
    .dc-company-why-chip-2,
    .dc-company-why-chip-3,
    .dc-company-why-chip-4 {
        animation: none;
    }
    .dc-company-why-badge { transform: scale(1); }
    .dc-company-why-chip-1, .dc-company-why-chip-2, .dc-company-why-chip-3, .dc-company-why-chip-4 {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== TEAM & MENTORS HERO VISUAL — .dc-company-team-* =====
   A single named founder card sits at center; small unlabeled network dots
   orbit around it at fixed points and pulse gently, one at a time, forever
   — representing the wider trusted network without inventing named people.
   Distinct from Why Choose Us's one-shot chip reveal — this loop is
   continuous and ambient, and nothing here ever "completes". */
.dc-company-team-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-team-stage {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-company-team-card {
    position: relative;
    width: 120px;
    height: 130px;
    border-radius: 14px;
    background: rgba(0, 34, 68, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 2;
}

.dc-company-team-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #002244;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}

.dc-company-team-name {
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
}

.dc-company-team-role {
    font-size: 0.58rem;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    padding: 0 6px;
}

.dc-company-team-node {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
}

.dc-company-team-node-1 { top: 6px; left: 30px; animation: dc-company-team-pulse 3s ease-in-out 0.2s infinite; }
.dc-company-team-node-2 { top: 20px; right: 10px; animation: dc-company-team-pulse 3s ease-in-out 0.9s infinite; }
.dc-company-team-node-3 { bottom: 14px; left: 6px; animation: dc-company-team-pulse 3s ease-in-out 1.6s infinite; }
.dc-company-team-node-4 { bottom: 4px; right: 26px; animation: dc-company-team-pulse 3s ease-in-out 2.3s infinite; }

@keyframes dc-company-team-pulse {
    0%, 100% { background: rgba(255, 255, 255, 0.3); transform: scale(1); }
    50% { background: var(--accent-color); transform: scale(1.3); }
}

@media (max-width: 900px) {
    .dc-company-team-stage-wrap { height: 260px; }
    .dc-company-team-stage { width: 200px; height: 200px; }
    .dc-company-team-card { width: 104px; height: 114px; }
}

@media (max-width: 480px) {
    .dc-company-team-stage-wrap { height: 230px; }
    .dc-company-team-stage { width: 180px; height: 180px; }
    .dc-company-team-card { width: 92px; height: 100px; }
    .dc-company-team-avatar { width: 34px; height: 34px; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-team-node-1,
    .dc-company-team-node-2,
    .dc-company-team-node-3,
    .dc-company-team-node-4 {
        animation: none;
    }
}

/* ===== CASE STUDIES HERO VISUAL — .dc-company-cases-* =====
   A stack of 3 project frames fanned out like a gallery; the front frame
   periodically slides back and the next one rises to the front, cycling
   forever through the stack. Distinct from Team's ambient orbit — this is
   a stacked-card cycling reveal, the only visual in Company using a
   card-swap mechanic. */
.dc-company-cases-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-cases-stage {
    position: relative;
    width: 200px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-company-cases-frame {
    position: absolute;
    width: 150px;
    height: 190px;
    border-radius: 12px;
    background: rgba(0, 34, 68, 0.92);
    border: 2px solid rgba(255, 255, 255, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
}

.dc-company-cases-frame-icon {
    font-size: 1.5rem;
    color: var(--accent-color);
}

.dc-company-cases-frame-1 { animation: dc-company-cases-cycle-1 6s ease-in-out infinite; }
.dc-company-cases-frame-2 { animation: dc-company-cases-cycle-2 6s ease-in-out infinite; }
.dc-company-cases-frame-3 { animation: dc-company-cases-cycle-3 6s ease-in-out infinite; }

@keyframes dc-company-cases-cycle-1 {
    0%, 8% { transform: translateY(0) scale(1); z-index: 3; border-color: var(--accent-color); }
    33%, 41% { transform: translateY(14px) scale(0.92); z-index: 2; border-color: rgba(255, 255, 255, 0.16); }
    66%, 74% { transform: translateY(24px) scale(0.86); z-index: 1; border-color: rgba(255, 255, 255, 0.16); }
    100% { transform: translateY(0) scale(1); z-index: 3; border-color: var(--accent-color); }
}

@keyframes dc-company-cases-cycle-2 {
    0%, 8% { transform: translateY(24px) scale(0.86); z-index: 1; border-color: rgba(255, 255, 255, 0.16); }
    33%, 41% { transform: translateY(0) scale(1); z-index: 3; border-color: var(--accent-color); }
    66%, 74% { transform: translateY(14px) scale(0.92); z-index: 2; border-color: rgba(255, 255, 255, 0.16); }
    100% { transform: translateY(24px) scale(0.86); z-index: 1; border-color: rgba(255, 255, 255, 0.16); }
}

@keyframes dc-company-cases-cycle-3 {
    0%, 8% { transform: translateY(14px) scale(0.92); z-index: 2; border-color: rgba(255, 255, 255, 0.16); }
    33%, 41% { transform: translateY(24px) scale(0.86); z-index: 1; border-color: rgba(255, 255, 255, 0.16); }
    66%, 74% { transform: translateY(0) scale(1); z-index: 3; border-color: var(--accent-color); }
    100% { transform: translateY(14px) scale(0.92); z-index: 2; border-color: rgba(255, 255, 255, 0.16); }
}

@media (max-width: 900px) {
    .dc-company-cases-stage-wrap { height: 260px; }
    .dc-company-cases-stage { width: 170px; height: 210px; }
    .dc-company-cases-frame { width: 128px; height: 164px; }
}

@media (max-width: 480px) {
    .dc-company-cases-stage-wrap { height: 230px; }
    .dc-company-cases-stage { width: 150px; height: 190px; }
    .dc-company-cases-frame { width: 112px; height: 144px; font-size: 0.62rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-cases-frame-1,
    .dc-company-cases-frame-2,
    .dc-company-cases-frame-3 {
        animation: none;
    }
    .dc-company-cases-frame-1 { transform: translateY(0) scale(1); z-index: 3; border-color: var(--accent-color); }
    .dc-company-cases-frame-2 { transform: translateY(14px) scale(0.92); z-index: 2; }
    .dc-company-cases-frame-3 { transform: translateY(24px) scale(0.86); z-index: 1; }
}

/* ===== CONTACT US HERO VISUAL — .dc-company-contact-* =====
   An envelope icon sends a paper-plane dot across a dashed path to a
   reply-bubble, which then lights up once the dot arrives — a single
   one-shot "message sent, reply received" story. Distinct from every
   other Company visual — this is the only one built around a message
   travelling between two fixed endpoints. */
.dc-company-contact-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-contact-stage {
    position: relative;
    width: 280px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dc-company-contact-node {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(0, 34, 68, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.55);
    z-index: 2;
}

.dc-company-contact-node-reply {
    animation: dc-company-contact-reply-light 0.5s ease-out 1.9s forwards;
}

.dc-company-contact-path {
    position: absolute;
    top: 50%;
    left: 64px;
    right: 64px;
    height: 2px;
    border-top: 2px dashed rgba(255, 255, 255, 0.22);
    transform: translateY(-50%);
}

.dc-company-contact-dot {
    position: absolute;
    top: 50%;
    left: 64px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 2px var(--accent-color);
    transform: translate(-50%, -50%);
    animation: dc-company-contact-send 1.6s cubic-bezier(0.45, 0, 0.55, 1) 0.3s forwards;
}

@keyframes dc-company-contact-send {
    0% { left: 64px; opacity: 1; }
    90% { opacity: 1; }
    100% { left: calc(100% - 64px); opacity: 0; }
}

@keyframes dc-company-contact-reply-light {
    to { border-color: var(--accent-color); color: var(--accent-color); box-shadow: 0 0 16px 2px rgba(0, 229, 255, 0.3); }
}

@media (max-width: 900px) {
    .dc-company-contact-stage-wrap { height: 260px; }
    .dc-company-contact-stage { width: 240px; height: 120px; }
    .dc-company-contact-node { width: 54px; height: 54px; font-size: 1.2rem; }
}

@media (max-width: 480px) {
    .dc-company-contact-stage-wrap { height: 220px; }
    .dc-company-contact-stage { width: 210px; height: 100px; }
    .dc-company-contact-node { width: 46px; height: 46px; font-size: 1.05rem; border-radius: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-contact-dot,
    .dc-company-contact-node-reply {
        animation: none;
    }
    .dc-company-contact-dot { opacity: 0; }
    .dc-company-contact-node-reply { border-color: var(--accent-color); color: var(--accent-color); }
}

/* ===== BOOK FREE CONSULTATION HERO VISUAL — .dc-company-book-* =====
   A small calendar grid; one date cell gets "picked" — it scales up and
   lights, a clock badge pops onto it, then a confirmation check appears.
   Distinct from Contact's point-to-point travel — this is a grid where a
   single cell is selected in place. */
.dc-company-book-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-book-stage {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-company-book-calendar {
    position: relative;
    width: 180px;
    height: 160px;
    border-radius: 14px;
    background: rgba(0, 34, 68, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.16);
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.dc-company-book-cell {
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
}

.dc-company-book-cell-picked {
    position: relative;
    transform: scale(1);
    animation: dc-company-book-pick 0.5s ease-out 1.1s forwards;
}

.dc-company-book-badge {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #002244;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    opacity: 0;
    transform: scale(0.4);
    animation: dc-company-book-badge-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s forwards;
}

@keyframes dc-company-book-pick {
    to { transform: scale(1.18); background: rgba(0, 229, 255, 0.28); box-shadow: 0 0 0 2px var(--accent-color); }
}

@keyframes dc-company-book-badge-in {
    to { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
    .dc-company-book-stage-wrap { height: 260px; }
    .dc-company-book-stage { width: 170px; height: 170px; }
    .dc-company-book-calendar { width: 150px; height: 134px; padding: 11px; gap: 6px; }
}

@media (max-width: 480px) {
    .dc-company-book-stage-wrap { height: 230px; }
    .dc-company-book-stage { width: 150px; height: 150px; }
    .dc-company-book-calendar { width: 132px; height: 118px; padding: 9px; gap: 5px; }
    .dc-company-book-badge { width: 28px; height: 28px; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-book-cell-picked,
    .dc-company-book-badge {
        animation: none;
    }
    .dc-company-book-cell-picked { transform: scale(1.18); background: rgba(0, 229, 255, 0.28); box-shadow: 0 0 0 2px var(--accent-color); }
    .dc-company-book-badge { opacity: 1; transform: scale(1); }
}

/* ===== TESTIMONIALS & REVIEWS HERO VISUAL — .dc-company-testimonials-* =====
   Five stars fill in one at a time, left to right, then a quote bubble
   fades in below once all five are lit. Distinct from every other Company
   visual — this is the only one built around a sequential star-fill. */
.dc-company-testimonials-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-testimonials-stage {
    position: relative;
    width: 240px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.dc-company-testimonials-stars {
    display: flex;
    gap: 8px;
    font-size: 1.5rem;
}

.dc-company-testimonials-star {
    color: rgba(255, 255, 255, 0.2);
}

.dc-company-testimonials-star-1 { animation: dc-company-testimonials-star-fill 0.3s ease-out 0.4s forwards; }
.dc-company-testimonials-star-2 { animation: dc-company-testimonials-star-fill 0.3s ease-out 0.7s forwards; }
.dc-company-testimonials-star-3 { animation: dc-company-testimonials-star-fill 0.3s ease-out 1.0s forwards; }
.dc-company-testimonials-star-4 { animation: dc-company-testimonials-star-fill 0.3s ease-out 1.3s forwards; }
.dc-company-testimonials-star-5 { animation: dc-company-testimonials-star-fill 0.3s ease-out 1.6s forwards; }

.dc-company-testimonials-quote {
    max-width: 220px;
    padding: 10px 16px;
    border-radius: 12px;
    background: rgba(0, 34, 68, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    opacity: 0;
    transform: translateY(6px);
    animation: dc-company-testimonials-quote-in 0.5s ease-out 2.0s forwards;
}

@keyframes dc-company-testimonials-star-fill {
    to { color: var(--accent-color); text-shadow: 0 0 8px rgba(0, 229, 255, 0.4); }
}

@keyframes dc-company-testimonials-quote-in {
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
    .dc-company-testimonials-stage-wrap { height: 260px; }
    .dc-company-testimonials-stage { width: 210px; height: 160px; gap: 14px; }
    .dc-company-testimonials-stars { font-size: 1.3rem; }
}

@media (max-width: 480px) {
    .dc-company-testimonials-stage-wrap { height: 230px; }
    .dc-company-testimonials-stage { width: 190px; height: 150px; gap: 12px; }
    .dc-company-testimonials-stars { font-size: 1.1rem; }
    .dc-company-testimonials-quote { font-size: 0.6rem; max-width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-testimonials-star-1,
    .dc-company-testimonials-star-2,
    .dc-company-testimonials-star-3,
    .dc-company-testimonials-star-4,
    .dc-company-testimonials-star-5,
    .dc-company-testimonials-quote {
        animation: none;
    }
    .dc-company-testimonials-star-1, .dc-company-testimonials-star-2, .dc-company-testimonials-star-3,
    .dc-company-testimonials-star-4, .dc-company-testimonials-star-5 { color: var(--accent-color); }
    .dc-company-testimonials-quote { opacity: 1; transform: translateY(0); }
}

/* ===== SUPPORT CENTER HERO VISUAL — .dc-company-support-* =====
   A headset icon sits inside a slowly, continuously pulsing ring
   ("always here"); beside it a question-mark badge morphs once into a
   checkmark ("resolved"), then loops back after a pause. Distinct from
   Testimonials' one-shot star fill — this loop never fully stops. */
.dc-company-support-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-support-stage {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-company-support-ring {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 2px solid rgba(0, 229, 255, 0.35);
    animation: dc-company-support-pulse 2.6s ease-out infinite;
}

.dc-company-support-core {
    position: relative;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(0, 34, 68, 0.92);
    border: 2px solid var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--accent-color);
}

.dc-company-support-ticket {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #002244;
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
}

.dc-company-support-ticket-q,
.dc-company-support-ticket-check {
    grid-area: 1 / 1;
}

.dc-company-support-ticket-q {
    animation: dc-company-support-q-cycle 4s ease-in-out infinite;
}

.dc-company-support-ticket-check {
    opacity: 0;
    animation: dc-company-support-check-cycle 4s ease-in-out infinite;
}

@keyframes dc-company-support-pulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    100% { transform: scale(1.25); opacity: 0; }
}

@keyframes dc-company-support-q-cycle {
    0%, 40% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes dc-company-support-check-cycle {
    0%, 40% { opacity: 0; }
    50%, 90% { opacity: 1; }
    100% { opacity: 0; }
}

@media (max-width: 900px) {
    .dc-company-support-stage-wrap { height: 260px; }
    .dc-company-support-stage { width: 190px; height: 190px; }
    .dc-company-support-ring { width: 112px; height: 112px; }
    .dc-company-support-core { width: 78px; height: 78px; font-size: 1.55rem; }
}

@media (max-width: 480px) {
    .dc-company-support-stage-wrap { height: 230px; }
    .dc-company-support-stage { width: 170px; height: 170px; }
    .dc-company-support-ring { width: 100px; height: 100px; }
    .dc-company-support-core { width: 68px; height: 68px; font-size: 1.35rem; }
    .dc-company-support-ticket { width: 26px; height: 26px; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-support-ring,
    .dc-company-support-ticket-q,
    .dc-company-support-ticket-check {
        animation: none;
    }
    .dc-company-support-ring { opacity: 0.4; transform: scale(1); }
    .dc-company-support-ticket-q { opacity: 0; }
    .dc-company-support-ticket-check { opacity: 1; }
}

/* ===== JOIN COMMUNITY HERO VISUAL — .dc-company-join-* =====
   Four real social-channel badges (LinkedIn, Instagram, YouTube, Facebook)
   arranged around a central hub, each lighting up in sequence with a
   connecting line drawing in from the hub. Distinct from Team & Mentors'
   ambient unlabeled dots — these four are specifically labeled real
   channels, and each connector draws in once rather than looping. */
.dc-company-join-stage-wrap {
    width: 100%;
    max-width: 400px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dc-company-join-stage {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dc-company-join-hub {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 34, 68, 0.92);
    border: 2px solid var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--accent-color);
    z-index: 2;
}

.dc-company-join-badge {
    position: absolute;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 34, 68, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
    opacity: 0;
    transform: scale(0.5);
}

.dc-company-join-badge-1 { top: 0; left: 20px; animation: dc-company-join-badge-in 0.4s ease-out 0.5s forwards; }
.dc-company-join-badge-2 { top: 20px; right: 0; animation: dc-company-join-badge-in 0.4s ease-out 1.0s forwards; }
.dc-company-join-badge-3 { bottom: 20px; right: 0; animation: dc-company-join-badge-in 0.4s ease-out 1.5s forwards; }
.dc-company-join-badge-4 { bottom: 0; left: 20px; animation: dc-company-join-badge-in 0.4s ease-out 2.0s forwards; }

@keyframes dc-company-join-badge-in {
    to { opacity: 1; transform: scale(1); border-color: var(--accent-color); color: var(--accent-color); }
}

@media (max-width: 900px) {
    .dc-company-join-stage-wrap { height: 260px; }
    .dc-company-join-stage { width: 200px; height: 200px; }
    .dc-company-join-hub { width: 54px; height: 54px; font-size: 1.1rem; }
    .dc-company-join-badge { width: 36px; height: 36px; font-size: 0.85rem; }
}

@media (max-width: 480px) {
    .dc-company-join-stage-wrap { height: 230px; }
    .dc-company-join-stage { width: 180px; height: 180px; }
    .dc-company-join-hub { width: 46px; height: 46px; font-size: 0.95rem; }
    .dc-company-join-badge { width: 32px; height: 32px; font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-company-join-badge-1,
    .dc-company-join-badge-2,
    .dc-company-join-badge-3,
    .dc-company-join-badge-4 {
        animation: none;
    }
    .dc-company-join-badge-1, .dc-company-join-badge-2, .dc-company-join-badge-3, .dc-company-join-badge-4 {
        opacity: 1;
        transform: scale(1);
        border-color: var(--accent-color);
        color: var(--accent-color);
    }
}