body#contact {
    background: #F9F9F9;
    padding-top: 100px;
}

.contact-hero {
    max-width: 1547px;
    margin: 100px auto 0;
    padding: 0 120px;
    display: flex;
    align-items: center;
    gap: 80px;
}

.contact-hero__left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: -78px;
}

.contact-hero__eyebrow {
    font-size: 18px;
    font-weight: 600;
    color: #767676;
    margin: 0;
    margin-bottom: 48px;
}

.contact-hero__left h2 {
    font-size: 37px;
    font-weight: 600;
    color: #1F1F1F;
    line-height: 1.3;
    margin: 0;
}

.contact-hero__body {
    font-size: 18px;
    font-weight: 500;
    color: #1F1F1F;
    line-height: 1.7;
    margin: 0;
}

.contact-hero__media {
    margin-top: 30px;
    margin-left: -105px;
}

.contact-hero__video {
    width: 100%;
    max-width: 520px;
    height: 320px;
    border-radius: 24px;
    object-fit: cover;
    display: block;
}

.contact-hero__right {
    flex: 0 0 660px;
    display: flex;
    justify-content: center;
}

@media (max-width: 837px) {
    /* Mobile container-style layout for contact hero */
    .contact-hero {
        margin: 0 0 0 0 !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 145px !important; /* slightly smaller gap below fixed navbar on mobile */
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        max-width: 100% !important;
        overflow-x: visible !important;
    }

    /* Eyebrow to heading gap on mobile (slightly tightened) */
    .contact-hero__eyebrow {
        margin-bottom: 20px !important;
    }

    /* Reduce gap between heading and body text on mobile */
    .contact-hero__left {
        gap: 20px !important;
    }

    /* Heading: fixed frame 323x62, two lines on mobile */
    .contact-hero__left h2 {
        width: 323px !important;
        max-width: 323px !important;
        height: 62px !important;
        margin: 0 !important;
        font-size: clamp(20px, 5.2vw, 24px) !important;
        font-weight: 700 !important; /* slightly bolder on mobile */
        line-height: 1.3 !important;
        display: flex !important;
        align-items: center !important;
        white-space: normal !important;
    }

    /* Body text under heading: fixed 337x40, forced to 2 rows on mobile */
    .contact-hero__body {
        width: 337px !important;
        max-width: 337px !important;
        height: 40px !important;
        margin: 0 !important;
        font-size: clamp(12px, 3.8vw, 13px) !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        white-space: normal !important;
    }

    .contact-hero__left {
        width: 100% !important;
    }

    /* Remove padding constraints from contact-hero__right to allow form to extend outside */
    .contact-hero__right {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .contact-hero__media {
        margin-left: 0 !important;
    }

    .contact-hero__video {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Contact form: Extends outside container to be 8px from screen edge on both sides (same as index.html) */
    .contact-hero .workflow-right {
        max-width: none !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
    }

    /* Mobile board section: sit outside main container for maximum FAQ width, with tight gap below form
       and comfortable spacing above footer */
    .section.board {
        margin-top: -100px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 80px !important;  /* extra gap before footer on contact page */
    }

    .board01,
    .board-inner {
        max-width: 100% !important;
    }

    /* Widen FAQ/Q&A/Notice area on mobile (override global board01 padding) */
    #contact .board01 {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Board title spacing on mobile (align with container system) */
    .board-title {
        margin: 24px 0 12px !important;
        font-size: 20px !important;
    }

    /* Tabs row (FAQ / Q&A / Notice) - mobile layout with text + dividers */
    .board-tab-container {
        justify-content: center !important;
        margin: 8px 0 16px !important;
    }

    .board-tab-button-wrap {
        gap: 48px !important;
    }

    .board-tab-button {
        padding: 0 !important;
        font-size: 14px !important;
        background-color: transparent !important;
        border: none !important;
    }

    .board-tab-button.active {
        font-weight: 600 !important;
        color: #111111 !important;
    }

    /* Remove outer board frame for contact mobile (keep only individual FAQ cards) */
    #contact .board-inner {
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Allow overflow for FAQ tab to extend outside */
    #notice.board-tab-content {
        overflow-x: visible !important;
    }

    .board-inner:has(#notice) {
        overflow-x: visible !important;
    }

    /* Remove board01 padding for FAQ tab to allow extension */
    #contact .board01:has(#notice.board-tab-content) {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow-x: visible !important;
    }

    /* ==================== Mobile FAQ cards (Contact page only) ==================== */

    /* Container: behave like a simple list, light vertical rhythm */
    #contact .faq-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 12px 0 20px !important;
        padding: 0 !important;
        gap: 12px !important;
    }

    /* FAQ container: Extends outside container to be 8px from screen edge on both sides (mobile only) */
    #contact #notice .faq-container {
        max-width: none !important;
        margin-left: -7px !important;
        margin-right: -7px !important;
        width: calc(100% + 14px) !important;
    }

    /* Card: full-width list item with slight side padding (no extra frame) */
    #contact .faq-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 20px 8px !important;  /* extra height and slightly wider text area */
        border-radius: 20px !important;
        background: #F3F3F3 !important; /* keep light card look */
        border: none !important;
    }

    /* Question row: mobile-optimized text; allow long questions to wrap to 2 rows */
    #contact .faq-question {
        font-size: 13px !important;
        line-height: 1.5 !important;
        white-space: normal !important;  /* allow wrapping for long questions */
        overflow: visible !important;
        padding-right: 0 !important;
        align-items: flex-start !important;
        width: 100% !important;
    }

    #contact .faq-question span:first-child {
        min-width: 20px !important;
        margin-left: 4px !important; /* Slight increase in left space */
        margin-right: 8px !important;
        flex-shrink: 0 !important; /* Keep Q on same row, prevent shrinking */
    }

    /* Ensure question text itself uses full available width and can wrap */
    #contact .faq-question span:nth-child(2) {
        display: inline-block !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* Answer: slightly smaller text, properly aligned for mobile (no negative offset) */
    #contact .faq-answer {
        font-size: 13px !important;
        line-height: 1.6 !important;
        padding: 8px 12px 0 32px !important;
        margin-left: 0 !important;      /* override desktop -100px */
        width: 100% !important;
    }

    /* ==================== Mobile Q&A / Notice tables (Contact page only) ==================== */

    /* Table container: tighter top margin and full-width */
    #contact .qa-table {
        margin-top: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Turn each row into a stacked card for mobile */
    #contact .qa-table__header {
        display: none !important;  /* hide desktop header on small screens */
    }

    #contact .qa-table__row {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        padding: 12px 12px !important;
        margin-bottom: 8px !important;
        border-radius: 14px !important;
        background: #F3F3F3 !important;
        border-bottom: none !important;
    }

    /* First span = No. + Title group row */
    #contact .qa-table__row span:nth-child(2) {
        font-weight: 600 !important;
        font-size: 13px !important;
        margin-left: 0 !important;       /* cancel desktop negative margin */
    }

    /* Meta info line (No, Author, Date, Views) */
    #contact .qa-table__row span:nth-child(1),
    #contact .qa-table__row span:nth-child(3),
    #contact .qa-table__row span:nth-child(4),
    #contact .qa-table__row span:nth-child(5) {
        font-size: 11px !important;
        color: #6F6F6F !important;
    }

    /* Pagination: center and space for mobile */
    #contact .qa-footer {
        margin-top: 16px !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    #contact .qa-pagination {
        margin-left: 0 !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    #contact .qa-pagination__page {
        width: 32px !important;
        height: 32px !important;
        border-radius: 16px !important;
        font-size: 12px !important;
    }

    #contact .qa-pagination__arrow {
        font-size: 12px !important;
    }
}