/* ==========================================================================
   WHOLESALE & DISTRIBUTION — COCKROACH EDITORIAL DESIGN SYSTEM
   High-Contrast Ink Typography & Brand Orange Accents
   ========================================================================== */

#content {
    background-color: var(--stock, #E4E7DC) !important;
    color: var(--ink, #1B2A2C) !important;
}

/* ==========================================================================
   1. HERO SECTION
   ========================================================================== */
.wholesale-hero-modern {
    background-color: var(--stock, #E4E7DC) !important;
    color: var(--ink, #1B2A2C) !important;
    padding: 80px 0 70px !important;
    border-bottom: 2px solid var(--ink, #1B2A2C) !important;
    position: relative;
}

.wholesale-hero-modern .container {
    position: relative;
    z-index: 2;
}

.code-badge,
.hero-badge,
.company-overview-badge,
.what-we-do-badge,
.why-work-with-us-badge,
.section-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: var(--ink, #1B2A2C) !important;
    color: var(--stock, #E4E7DC) !important;
    border: 1.5px solid var(--ink, #1B2A2C) !important;
    padding: 6px 14px !important;
    font-family: var(--font-mono, "Courier Prime", monospace) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    margin: 0 auto 16px auto !important;
    box-shadow: 2.5px 2.5px 0 var(--vermilion, #E2660A) !important;
}

.code-badge i,
.hero-badge i,
.company-overview-badge i,
.what-we-do-badge i,
.why-work-with-us-badge i,
.section-badge i,
.badge-icon i {
    color: var(--vermilion, #E2660A) !important;
    font-size: 11px !important;
}

.hero-title,
.wholesale-hero-modern h1 {
    font-family: var(--font-display, "Archivo Black", sans-serif) !important;
    font-size: clamp(34px, 5vw, 58px) !important;
    font-weight: 900 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink, #1B2A2C) !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    margin: 0 0 20px 0 !important;
}

.hero-subtitle,
.wholesale-hero-modern p {
    font-family: var(--font-serif, "Newsreader", serif) !important;
    font-size: clamp(17px, 1.8vw, 21px) !important;
    line-height: 1.62 !important;
    color: var(--ink, #1B2A2C) !important;
    max-width: 900px;
    margin: 0 auto 32px !important;
}

.hero-cta-section {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.btn-modern-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--vermilion, #E2660A) !important;
    color: #FFFFFF !important;
    font-family: var(--font-mono, "Courier Prime", monospace) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    border: 1.5px solid var(--ink, #1B2A2C) !important;
    box-shadow: 4px 4px 0 var(--ink, #1B2A2C) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.btn-modern-primary:hover {
    background: var(--ink, #1B2A2C) !important;
    color: var(--stock, #E4E7DC) !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink, #1B2A2C) !important;
}

.btn-modern-secondary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--stock-card, #F2F3EC) !important;
    color: var(--ink, #1B2A2C) !important;
    font-family: var(--font-mono, "Courier Prime", monospace) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    border: 1.5px solid var(--ink, #1B2A2C) !important;
    box-shadow: 4px 4px 0 var(--ink, #1B2A2C) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.btn-modern-secondary:hover {
    background: var(--ink, #1B2A2C) !important;
    color: var(--stock, #E4E7DC) !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--ink, #1B2A2C) !important;
}

/* ==========================================================================
   2. SECTION SHARED STYLING & HEADINGS
   ========================================================================== */
.wholesale-section-modern {
    padding: 80px 0 !important;
    background-color: var(--stock, #E4E7DC) !important;
    border-top: 1px solid var(--rule, rgba(27,42,44,0.2)) !important;
    position: relative;
}

.wholesale-section-modern.alt-bg {
    background-color: var(--stock-2, #D6DACD) !important;
}

.company-overview-title,
.what-we-do-title,
.why-work-with-us-title,
.contact-title,
.section-title {
    font-family: var(--font-display, "Archivo Black", sans-serif) !important;
    font-size: clamp(28px, 3.8vw, 42px) !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    color: var(--ink, #1B2A2C) !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    margin: 0 0 10px 0 !important;
}

.text-vermilion,
.gradient-text,
span.gradient-text {
    color: var(--vermilion, #E2660A) !important;
    background: none !important;
    -webkit-text-fill-color: var(--vermilion, #E2660A) !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

.space-border {
    width: 60px;
    height: 3px;
    background-color: var(--vermilion, #E2660A);
    margin: 14px auto 24px;
}

/* ==========================================================================
   3. COMPANY OVERVIEW SECTION
   ========================================================================== */
.overview-card {
    background: var(--stock-card, #F2F3EC) !important;
    border: 2px solid var(--ink, #1B2A2C) !important;
    box-shadow: 6px 6px 0 var(--ink, #1B2A2C) !important;
    padding: 36px 40px !important;
}

.overview-card p {
    font-family: var(--font-serif, "Newsreader", serif) !important;
    font-size: 17.5px !important;
    line-height: 1.65 !important;
    color: var(--ink, #1B2A2C) !important;
    margin: 0 0 16px 0 !important;
}

.overview-card p:last-child {
    margin-bottom: 0 !important;
}

/* ==========================================================================
   4. WHAT WE DO CARDS (.service-card-modern)
   ========================================================================== */
.service-card-modern {
    background: var(--stock-card, #F2F3EC) !important;
    border: 1.5px solid var(--ink, #1B2A2C) !important;
    box-shadow: 4px 4px 0 rgba(27, 42, 44, 0.14) !important;
    padding: 28px 24px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.service-card-modern:hover {
    transform: translateY(-3px) !important;
    box-shadow: 7px 7px 0 var(--ink, #1B2A2C) !important;
    background: #FFFFFF !important;
}

.service-icon-wrapper {
    margin-bottom: 16px;
}

.service-icon {
    width: 48px;
    height: 48px;
    background: var(--ink, #1B2A2C) !important;
    color: var(--vermilion, #E2660A) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid var(--ink, #1B2A2C);
}

.service-title {
    font-family: var(--font-display, "Archivo Black", sans-serif) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    color: var(--ink, #1B2A2C) !important;
    margin: 0 0 10px 0 !important;
}

.service-description {
    font-family: var(--font-serif, "Newsreader", serif) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--ink-muted, rgba(27,42,44,0.78)) !important;
    margin: 0 !important;
}

/* ==========================================================================
   5. WHY WORK WITH US (.benefit-card)
   ========================================================================== */
.benefit-card {
    background: var(--stock-card, #F2F3EC) !important;
    border: 1.5px solid var(--ink, #1B2A2C) !important;
    box-shadow: 4px 4px 0 rgba(27, 42, 44, 0.14) !important;
    padding: 24px 28px !important;
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start !important;
    height: 100% !important;
    border-radius: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.benefit-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 7px 7px 0 var(--ink, #1B2A2C) !important;
    background: #FFFFFF !important;
}

.benefit-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: var(--ink, #1B2A2C) !important;
    color: var(--vermilion, #E2660A) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid var(--ink, #1B2A2C);
}

.benefit-content {
    flex: 1;
}

.benefit-title {
    font-family: var(--font-display, "Archivo Black", sans-serif) !important;
    font-size: 17.5px !important;
    font-weight: 900 !important;
    color: var(--ink, #1B2A2C) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.25 !important;
}

.benefit-description {
    font-family: var(--font-serif, "Newsreader", serif) !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
    color: var(--ink-muted, rgba(27,42,44,0.78)) !important;
    margin: 0 !important;
}

/* ==========================================================================
   6. CONTACT INFORMATION SECTION (.contact-card-modern)
   ========================================================================== */
.contact-card-modern {
    background: var(--stock-card, #F2F3EC) !important;
    border: 2px solid var(--ink, #1B2A2C) !important;
    box-shadow: 6px 6px 0 var(--ink, #1B2A2C) !important;
    padding: 40px !important;
    border-radius: 0 !important;
}

.contact-subtitle {
    font-family: var(--font-serif, "Newsreader", serif) !important;
    font-size: 16.5px !important;
    color: var(--ink-muted, rgba(27,42,44,0.8)) !important;
    margin-bottom: 0 !important;
}

.contact-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 28px 0 !important;
}

.contact-card-modern .contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    background: var(--stock, #E4E7DC) !important;
    border: 1.5px solid var(--ink, #1B2A2C) !important;
    padding: 18px !important;
    box-shadow: 3px 3px 0 var(--ink, #1B2A2C) !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

.contact-card-modern .contact-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--ink, #1B2A2C) !important;
    color: var(--vermilion, #E2660A) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid var(--ink, #1B2A2C);
}

.contact-card-modern .contact-info h5 {
    font-family: var(--font-display, "Archivo Black", sans-serif) !important;
    font-size: 16px !important;
    color: var(--ink, #1B2A2C) !important;
    margin: 0 0 4px 0 !important;
}

.contact-card-modern .contact-info p {
    font-family: var(--font-mono, "Courier Prime", monospace) !important;
    font-size: 13px !important;
    color: var(--ink, #1B2A2C) !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.contact-card-modern .contact-info a {
    color: var(--vermilion, #E2660A) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.contact-card-modern .contact-info a:hover {
    text-decoration: underline !important;
}

.contact-cta {
    text-align: center;
    margin-top: 24px;
}