/* ========================
   Careers Page Styles
   ======================== */

/* Shared page-side padding token — mirrors about.css --ab-pad so the
   careers page sits flush with the rest of the editorial layout. */
:root {
    --careers-pad: clamp(20px, 5vw, 56px);
}

/* Hero Section — product page background (soft mint radial on off-white)
   that fades into pure white at the bottom edge, so the section dissolves
   into the white positions list below. */
.careers-hero-section {
    position: relative;
    overflow: hidden;
    background-color: #F8F8F8;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, #FFFFFF 92%),
        radial-gradient(ellipse at 50% 38%, #E0EFE4 0%, #F8F8F8 62%);
    padding: 240px var(--careers-pad) 120px;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.careers-hero-container {
    position: relative;
    z-index: 1;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
}

.careers-hero-heading {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(30px, 3.8vw, 50px);
    font-weight: 700;
    color: #151515;
    line-height: 1.12;
    letter-spacing: -1.8px;
    margin: 0;
    max-width: 1300px;
}

.careers-green-word {
    color: inherit;
}

.careers-hero-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #383838;
    line-height: 1.6;
    opacity: 1;
    margin: 28px 0 0;
    max-width: 620px;
}

/* Responsive */
@media screen and (max-width: 991px) {
    .careers-hero-heading {
        font-size: 32px;
        letter-spacing: -1px;
    }

    .careers-hero-section {
        padding: 130px var(--careers-pad) 100px;
    }
}

/* Open Positions Section — pure white surface, with a soft bottom fade into the
   cream of benefits so the two sections blend rather than collide. */
.positions-section {
    background-color: #FFFFFF;
    background-image: linear-gradient(180deg, #FFFFFF 78%, #FAFAF6 100%);
    padding: clamp(96px, 11vw, 160px) var(--careers-pad) clamp(56px, 7vw, 96px);
}

.positions-container {
    max-width: 1300px;
    margin: 0 auto;
}

.positions-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 500;
    letter-spacing: -1px;
    margin: 0 0 16px 0;
    line-height: 1.15;
}

.positions-title-dark {
    color: #2D3136;
}

.positions-title-green {
    color: #39B15B;
}

.positions-desc {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #2D3136;
    opacity: 0.6;
    margin: 0 0 48px 0;
    line-height: 1.6;
}

/* Filter Buttons */
.positions-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.filter-btn {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #2D3136;
    background-color: transparent;
    border: 1px solid rgba(45, 49, 54, 0.25);
    border-radius: 40px;
    padding: 10px 24px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-btn:hover,
.filter-btn-active {
    background-color: #2D3136;
    color: #ffffff;
    border-color: #2D3136;
}

/* Positions List — floating cards matching the benefit-card vocabulary */
.positions-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.position-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    background-color: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 55, 38, 0.04), 0 6px 24px rgba(20, 55, 38, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.position-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(20, 55, 38, 0.06), 0 14px 36px rgba(20, 55, 38, 0.08);
}

.position-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.position-title {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #2D3136;
}

.position-row:hover .position-title {
    color: #39B15B;
}

.position-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.position-dept,
.position-loc {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #2D3136;
    opacity: 0.5;
    display: flex;
    align-items: center;
    gap: 4px;
}

.position-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.position-tag {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #2D3136;
    border: 1px solid rgba(45, 49, 54, 0.25);
    border-radius: 40px;
    padding: 6px 18px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.position-row:hover .position-tag {
    background-color: #2D3136;
    color: #ffffff;
    border-color: #2D3136;
}


/* Match textarea styling to the existing modal input pattern */
.input-group textarea {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: #222222;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid #EAEAEA;
    background: transparent;
    border-radius: 0;
    resize: vertical;
    min-height: 88px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.input-group textarea::placeholder {
    color: #CCCCCC;
}

.input-group textarea:focus {
    outline: none;
    border-bottom-color: var(--db-green, #39B15A);
}

/* Empty-state note under positions list */
.positions-empty-note {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--db-dark, #222);
    opacity: 1;
    margin: 28px 0 0;
    line-height: 1.6;
}

.positions-empty-note a {
    color: var(--db-green-dark, #257A3F);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 122, 63, 0.5);
    transition: border-color 0.2s ease;
}

.positions-empty-note a:hover {
    border-bottom-color: var(--db-green-dark, #257A3F);
}

/* Team Testimonials Section */
.testimonials-section {
    background-color: #f6f6f6;
    padding: 100px 5vw;
}

.testimonials-container {
    max-width: 1300px;
    margin: 0 auto;
}

.testimonials-heading {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 500;
    color: #2D3136;
    line-height: 1.15;
    margin: 0 0 80px 0;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 48px;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.testimonial-photo-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background-color: #e0e0e0;
}

.testimonial-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.testimonial-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.testimonial-name {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #2D3136;
    margin: 0;
}

.testimonial-role {
    color: #39B15B;
}

.testimonial-quote {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #2D3136;
    opacity: 0.65;
    line-height: 1.65;
    margin: 0;
}

@media screen and (max-width: 991px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* Benefits & Perks Section — cream editorial panel (homepage cream), white floating cards.
   Top edge eases in from white so the positions seam disappears.
   Symmetric vertical padding so the whole content block sits centered in the section. */
.benefits-section {
    background-color: #FAFAF6;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FAFAF6 22%);
    padding: clamp(96px, 10vw, 140px) var(--careers-pad);
}

.benefits-container {
    max-width: 1300px;
    margin: 0 auto;
}

.benefits-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 500;
    color: var(--db-dark, #222);
    letter-spacing: -1px;
    margin: 0 0 14px 0;
    line-height: 1.15;
}

.benefits-title-green {
    color: var(--db-green, #39B15A);
}

.benefits-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: var(--db-dark, #222);
    opacity: 0.72;
    margin: 0 0 64px 0;
    line-height: 1.6;
    max-width: 560px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1300px;
}

.benefit-card {
    border: none;
    background-color: #FFFFFF;
    border-radius: 14px;
    padding: 28px 32px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
    box-shadow: 0 1px 2px rgba(20, 55, 38, 0.04), 0 6px 24px rgba(20, 55, 38, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.benefit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(20, 55, 38, 0.06), 0 14px 36px rgba(20, 55, 38, 0.08);
}

.benefit-icon-wrap {
    width: 48px;
    height: 48px;
    background-color: var(--db-green-light, #94D1A7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.benefit-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.benefit-name {
    font-family: 'Manrope', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--db-dark, #222);
    margin: 0;
}

.benefit-copy {
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    color: var(--db-dark, #222);
    opacity: 0.72;
    line-height: 1.55;
    margin: 0;
}

@media screen and (max-width: 991px) {
    .benefits-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   CLOSING CTA  —  full-bleed misty-valley image as the section background,
   centered dark-forest card sitting on top with all text center-aligned.
   Matches the about.html (.ab-cta) design language so the company-page
   closing card and the careers-page closing card read as a pair.
   ===================================================================== */
.careers-cta {
    position: relative;
    padding: clamp(60px, 7vw, 108px) 0;
    overflow: hidden;
    isolation: isolate;
}

/* Green/lime radial wash behind the card — ported from homepage/product closing CTA */
.careers-cta::before {
    content: '';
    position: absolute;
    inset: 0 -5% 0 -5%;
    z-index: -2;
    background:
        radial-gradient(ellipse 62% 54% at 22% 42%, rgba(86, 178, 116, 0.20) 0%, transparent 76%),
        radial-gradient(ellipse 68% 54% at 80% 74%, rgba(190, 216, 138, 0.32) 0%, transparent 78%),
        radial-gradient(ellipse 30% 26% at 72% 30%, rgba(120, 195, 230, 0.16) 0%, transparent 72%),
        radial-gradient(ellipse 50% 40% at 50% 60%, rgba(255, 255, 255, 0.34) 0%, transparent 72%),
        linear-gradient(135deg, #ECF3E5 0%, #E5EEDC 100%);
}

/* Fade the gradient into the footer's gray so the seam disappears */
.careers-cta::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 360px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(248, 248, 248, 0) 0%,
        rgba(248, 248, 248, 0.6) 46%,
        #F8F8F8 78%,
        #F8F8F8 100%);
}

.careers-cta-container {
    width: 100%;
    max-width: 1300px;
    margin-inline: auto;
    padding-inline: var(--careers-pad);
    box-sizing: border-box;
}

.careers-cta-card {
    position: relative;
    background: #143726;
    border-radius: 8px;
    overflow: hidden;
    min-height: clamp(342px, 37.8vw, 468px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 40px 92px rgba(20, 48, 30, 0.26);
}

.careers-cta-card-body {
    padding: clamp(40px, 5vw, 76px);
    position: relative;
    z-index: 2;
    text-align: center;
}

.careers-cta-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(27px, 3.24vw, 47px);
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 auto 22px;
    max-width: 620px;
}

.careers-cta-accent {
    color: var(--db-green, #39B15A);
}

.careers-cta-text {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(17px, 1.4vw, 21px);
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
    max-width: 680px;
    margin: 0 auto 36px;
}

.careers-cta-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.careers-cta-primary {
    display: inline-flex;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
    border-radius: 999px;
    padding: 14px 26px;
    background: #39B15A;
    color: #FFFFFF;
    border: 1px solid #39B15A;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.careers-cta-primary:hover {
    background: #257A3F;
    border-color: #257A3F;
    color: #FFFFFF;
}

.careers-cta-secondary {
    display: inline-flex;
    align-items: center;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
    border-radius: 999px;
    padding: 14px 26px;
    background: transparent;
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.36);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.careers-cta-secondary:hover {
    color: var(--db-green, #39B15A);
    border-color: var(--db-green, #39B15A);
}

.careers-cta-photo {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 20%;
}

.careers-cta-photo-inner {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.careers-cta-photo-inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 100%;
    transform: scale(1.25);
    transform-origin: 50% 100%;
}

.careers-cta-photo-accent {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--db-green, #39B15A);
    z-index: 2;
}

@media (max-width: 860px) {
    .careers-cta-card {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .careers-cta-title,
    .careers-cta-text {
        max-width: 100%;
    }

    .careers-cta-photo {
        position: relative;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: 170px;
    }

    .careers-cta-photo-accent {
        left: 0;
        right: 0;
        top: -4px;
        bottom: auto;
        width: auto;
        height: 4px;
    }
}

@media screen and (max-width: 640px) {
    .careers-cta-card-body {
        padding: 44px 24px;
    }
}

/* =====================================================================
   CAREERS CONTACT MODAL  —  solid forest-green brand column, tighter
   corners on the whole sheet so it reads less SaaS-modal, more editorial.
   Scoped so the Request Demo modal (dark) stays unchanged.
   ===================================================================== */
#careersContactModal .demo-modal-content {
    border-radius: 6px;
}

#careersContactModal .modal-brand-col {
    background-color: var(--db-green-dark, #257A3F);
    background-image:
        radial-gradient(ellipse at 88% 92%, rgba(86, 178, 116, 0.55) 0%, transparent 58%),
        radial-gradient(ellipse at 10% 8%, rgba(20, 55, 38, 0.45) 0%, transparent 55%);
    color: #FFFFFF;
}

#careersContactModal .modal-logo-text {
    color: #FFFFFF;
}

#careersContactModal .modal-h2 {
    color: #FFFFFF;
    font-weight: 700;
}

#careersContactModal .modal-h2-accent {
    color: #FFFFFF;
}

#careersContactModal .modal-brand-rule {
    width: 80px;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    margin: 24px 0 22px;
}

#careersContactModal .modal-p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
}