/* ═══════════════════════════════════════════════════════════
   DIVISIONS HUB + INDIVIDUAL DIVISION PAGES
   Reuses tokens, .reveal, .pricing-card, .tier-card, .diff-item,
   .page-hero, .section-header, .contact, footer from shared.css /
   plans.css / home.css. Adds layout for the divisions hub grid,
   the "Two ways to work" split, the cross-sell block, and the
   page-hero eyebrow tag.
   ═══════════════════════════════════════════════════════════ */

/* Eyebrow above the H1 on division pages */
.division-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--copper);
    margin-bottom: 1rem;
    display: inline-block;
}

[data-theme="light"] .division-eyebrow {
    color: var(--copper-dark);
}

/* ═══════════════════════════════════════════════════════════
   HUB — 4-card division grid
   ═══════════════════════════════════════════════════════════ */
.divisions-hub {
    padding: 5rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.divisions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}

.division-card {
    background: linear-gradient(145deg, var(--navy-mid), var(--navy));
    border: 1px solid var(--white-faint);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.division-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--copper), var(--copper-light), var(--copper));
    opacity: 0;
    transition: opacity 0.4s ease;
}

.division-card:hover {
    transform: translateY(-6px);
    border-color: rgba(184, 115, 51, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.division-card:hover::before {
    opacity: 1;
}

.division-card .division-name {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0;
    color: var(--white);
}

.division-card .division-tagline {
    color: var(--white-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 300;
    margin: 0;
    flex: 1;
}

.division-card .division-cta {
    color: var(--copper-light);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.division-card:hover .division-cta {
    color: var(--copper);
}

/* Hub "Not sure which fits?" callout */
.divisions-callout {
    text-align: center;
    margin-top: 4rem;
    color: var(--white-dim);
    font-size: 1rem;
    font-weight: 300;
}

.divisions-callout a {
    color: var(--copper-light);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.divisions-callout a:hover {
    color: var(--copper);
}

/* ═══════════════════════════════════════════════════════════
   "TWO WAYS TO WORK" — MojoIT split
   ═══════════════════════════════════════════════════════════ */
.two-ways-section {
    padding: 5rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.two-ways-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.two-ways-card {
    background: linear-gradient(145deg, var(--navy-mid), var(--navy));
    border: 1px solid rgba(184, 115, 51, 0.2);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
}

.two-ways-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--copper), var(--copper-light), var(--copper));
}

.two-ways-card:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 115, 51, 0.4);
}

.two-ways-card .way-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--copper);
}

.two-ways-card h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
}

.two-ways-card p {
    color: var(--white-dim);
    font-size: 0.95rem;
    line-height: 1.7;
    font-weight: 300;
    margin: 0;
}

.two-ways-card .way-billing {
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════
   "WHO IT'S FOR" + "HOW WE WORK" — narrative blocks
   ═══════════════════════════════════════════════════════════ */
.who-its-for {
    padding: 5rem 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.who-its-for-content {
    background: linear-gradient(145deg, var(--navy-mid), var(--navy));
    border: 1px solid var(--white-faint);
    border-radius: 20px;
    padding: 3rem;
}

.who-its-for-content > p {
    color: var(--white-dim);
    font-size: 1.05rem;
    line-height: 1.75;
    font-weight: 300;
    margin-bottom: 1.5rem;
}

.who-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.who-list li {
    color: var(--white-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    font-weight: 300;
    padding: 0.6rem 0 0.6rem 1.75rem;
    position: relative;
    border-bottom: 1px solid var(--white-faint);
}

.who-list li:last-child {
    border-bottom: none;
}

.who-note {
    margin-top: 1.5rem !important;
    font-size: 0.9rem;
    color: var(--white-dim);
    line-height: 1.6;
}

.who-list li::before {
    content: '⟩';
    position: absolute;
    left: 0;
    top: 0.6rem;
    color: var(--copper);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   CROSS-SELL — link to other divisions
   ═══════════════════════════════════════════════════════════ */
.cross-sell {
    padding: 5rem 3rem;
    max-width: 1100px;
    margin: 0 auto;
}

.cross-sell-inner {
    background: linear-gradient(135deg, rgba(184, 115, 51, 0.08), rgba(184, 115, 51, 0.02));
    border: 1px solid rgba(184, 115, 51, 0.25);
    border-radius: 24px;
    padding: 3rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cross-sell-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--copper), var(--copper-light), var(--copper));
}

.cross-sell-inner h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.cross-sell-inner > p {
    color: var(--white-dim);
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cross-sell-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.cross-sell-link {
    background: rgba(13, 27, 42, 0.4);
    border: 1px solid var(--white-faint);
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-decoration: none;
    color: var(--white);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    text-align: center;
}

.cross-sell-link:hover {
    transform: translateY(-2px);
    border-color: rgba(184, 115, 51, 0.4);
    background: rgba(184, 115, 51, 0.08);
}

.cross-sell-link strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
}

.cross-sell-link span {
    font-size: 0.8rem;
    color: var(--white-dim);
    font-weight: 300;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — DIVISIONS SECTION (reused on home)
   ═══════════════════════════════════════════════════════════ */
.divisions-home {
    padding: 6rem 3rem 4rem;
    position: relative;
}

.divisions-home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--white-faint), transparent);
}

.divisions-home .divisions-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1200px;
    gap: 1.5rem;
}

.divisions-home .division-card {
    padding: 2rem 1.5rem;
}

.divisions-home .division-card .division-name {
    font-size: 1.2rem;
}

.divisions-home .division-card .division-tagline {
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .divisions-grid,
    .two-ways-grid,
    .cross-sell-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .divisions-home .divisions-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 800px;
    }
}

@media (max-width: 768px) {
    .divisions-hub,
    .two-ways-section,
    .who-its-for,
    .cross-sell,
    .divisions-home {
        padding: 3.5rem 1.5rem;
    }

    .divisions-grid,
    .two-ways-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .cross-sell-grid {
        grid-template-columns: 1fr;
    }

    .divisions-home .divisions-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }

    .who-its-for-content,
    .cross-sell-inner {
        padding: 2rem 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════ */
[data-theme="light"] .division-card,
[data-theme="light"] .two-ways-card,
[data-theme="light"] .who-its-for-content {
    background: #FFFFFF;
    border-color: rgba(13, 27, 42, 0.08);
    box-shadow: 0 2px 20px rgba(13, 27, 42, 0.06);
}

[data-theme="light"] .division-card:hover,
[data-theme="light"] .two-ways-card:hover {
    border-color: rgba(184, 115, 51, 0.3);
    box-shadow: 0 20px 60px rgba(13, 27, 42, 0.12);
}

[data-theme="light"] .division-card .division-name {
    color: #0D1B2A;
}

[data-theme="light"] .division-card .division-tagline,
[data-theme="light"] .two-ways-card p,
[data-theme="light"] .who-its-for-content > p,
[data-theme="light"] .who-list li {
    color: rgba(13, 27, 42, 0.72);
}

[data-theme="light"] .two-ways-card h3 {
    color: #0D1B2A;
}

[data-theme="light"] .two-ways-card .way-billing {
    color: #0D1B2A;
}

[data-theme="light"] .who-list li {
    border-bottom-color: rgba(13, 27, 42, 0.08);
}

[data-theme="light"] .who-list li::before {
    color: var(--copper-dark);
}

[data-theme="light"] .division-card .division-cta,
[data-theme="light"] .two-ways-card .way-label {
    color: var(--copper-dark);
}

[data-theme="light"] .cross-sell-inner {
    background: linear-gradient(135deg, rgba(184, 115, 51, 0.06), rgba(184, 115, 51, 0.02));
    border-color: rgba(184, 115, 51, 0.3);
}

[data-theme="light"] .cross-sell-inner h2 {
    color: #0D1B2A;
}

[data-theme="light"] .cross-sell-inner > p,
[data-theme="light"] .divisions-callout {
    color: rgba(13, 27, 42, 0.72);
}

[data-theme="light"] .cross-sell-link {
    background: #FFFFFF;
    border-color: rgba(13, 27, 42, 0.08);
}

[data-theme="light"] .cross-sell-link:hover {
    border-color: rgba(184, 115, 51, 0.4);
    background: rgba(184, 115, 51, 0.04);
}

[data-theme="light"] .cross-sell-link strong {
    color: #0D1B2A;
}

[data-theme="light"] .cross-sell-link span {
    color: rgba(13, 27, 42, 0.65);
}

[data-theme="light"] .divisions-home::before {
    background: linear-gradient(90deg, transparent, rgba(13, 27, 42, 0.1), transparent);
}

[data-theme="light"] .divisions-callout a {
    color: var(--copper-dark);
}