/* responsive.css */
@media (max-width: 1280px) {
    .headline {
        font-size: 7vw;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: flex-start;
    }

    .primary-cta,
    .secondary-cta {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 1024px) {
    body {
        overflow: auto;
    }
    
    .hero, .capabilities {
        height: auto;
        min-height: calc(100vh - 72px);
    }

    .hero-content,
    .trans-top,
    .impact-section {
        flex-direction: column;
    }

    .hero-left,
    .trans-left,
    .impact-left {
        border-right: none;
        border-bottom: var(--border-thickness) solid var(--color-border);
        width: 100%;
        max-width: 100%;
    }

    .hero-right,
    .trans-right {
        padding: 48px var(--container-padding);
        width: 100%;
        min-height: auto;
    }

    .impact-grid {
        width: 100%;
        flex-wrap: wrap;
    }

    .impact-card {
        flex: 0 0 50%;
        border-bottom: var(--border-thickness) solid var(--color-border);
    }

    .impact-card:nth-child(2n) {
        border-right: none;
    }

    .cap-main {
        flex-direction: column;
    }

    .cap-main-left,
    .cap-main-right {
        width: 100%;
        border-right: none;
        padding: 48px var(--container-padding);
    }

    .cap-main-left {
        border-bottom: var(--border-thickness) solid var(--color-border);
    }

    .features-row {
        flex-wrap: wrap;
        padding: 24px var(--container-padding);
    }

    .feature-item {
        flex: 0 0 50%;
        padding: 24px;
        border-right: none;
        border-bottom: var(--border-thickness) solid var(--color-border);
    }

    .work-header {
        flex-direction: column;
    }

    .work-header-left,
    .work-header-stats {
        width: 100%;
        border-right: none;
    }

    .work-header-left {
        border-bottom: var(--border-thickness) solid var(--color-border);
    }

    .work-card {
        flex-direction: column;
    }

    .work-card-left,
    .work-card-right {
        width: 100%;
        border-right: none;
    }

    .work-card-left {
        border-bottom: var(--border-thickness) solid var(--color-border);
    }

    .process-header {
        flex-direction: column;
    }

    .process-header-left,
    .process-header-mid,
    .process-header-right {
        width: 100%;
        border-right: none;
        padding: 48px var(--container-padding);
        border-bottom: var(--border-thickness) solid var(--color-border);
    }

    .process-header-right {
        border-bottom: none;
    }

    .process-header-right p {
        text-align: left;
    }

    .process-grid {
        flex-direction: column;
    }

    .process-col {
        border-right: none;
        border-bottom: var(--border-thickness) solid var(--color-border);
    }

    .process-col:last-child {
        border-bottom: none;
    }

    .p-line {
        display: none;
    }

    .process-footer {
        flex-direction: column;
    }

    .p-footer-left,
    .p-footer-mid,
    .p-footer-right {
        border-right: none;
        border-bottom: var(--border-thickness) solid var(--color-border);
        width: 100%;
    }

    .p-footer-right {
        border-bottom: none;
    }

    .faq-header {
        flex-direction: column;
    }

    .faq-header-left {
        width: 100%;
        padding: 48px var(--container-padding);
    }

    .faq-header-right {
        display: none;
    }

    .faq-content {
        flex-direction: column;
        gap: 32px;
    }

    .faq-left,
    .faq-right {
        width: 100%;
    }

    .faq-contact-box {
        padding: 32px 24px;
    }

    .contact-grid {
        flex-direction: column;
    }

    .contact-left {
        width: 100%;
        margin-bottom: 32px;
    }

    .global-footer-cta {
        flex-direction: column;
        gap: 32px;
    }

    .dec-arrow,
    .dec-label,
    .dec-crosshair-1,
    .dec-crosshair-2,
    .dec-grid-dots {
        display: none;
    }

    .cap-header {
        display: none;
    }

    .desktop-nav {
        display: none;
    }

    .hamburger-btn {
        display: flex;
    }

    .header-cta {
        display: none;
    }
}

@media (max-width: 768px) {
    :root {
        --container-padding: 24px;
    }

    .headline {
        font-size: clamp(3rem, 13vw, 7rem);
        margin-bottom: 24px;
    }

    .hero-paragraph {
        font-size: 1rem;
        margin-bottom: 32px;
    }

    .desktop-break {
        display: none;
    }

    .hero-ctas {
        width: 100%;
    }

    .primary-cta,
    .secondary-cta {
        width: 100%;
        max-width: none;
    }

    .capability-bar {
        flex-direction: column;
    }

    .cap-items {
        flex-direction: column;
    }

    .cap-item {
        border-right: none;
        border-bottom: var(--border-thickness) solid var(--color-border);
        padding: 24px var(--container-padding);
        flex-direction: row;
        align-items: center;
        margin-bottom: 0;
    }

    .cap-top {
        margin-bottom: 0;
        margin-right: 24px;
        align-items: center;
    }

    .cap-plus {
        display: none;
    }

    .cap-action {
        width: 100%;
        padding: 16px;
        border-top: none;
    }

    .impact-card {
        flex: 0 0 100%;
        padding: 32px 24px;
        border-right: none !important;
    }

    .cta-banner,
    .work-cta {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
        gap: 24px;
    }

    .cta-banner-left,
    .work-cta-left {
        flex-direction: column;
        gap: 16px;
    }

    .trans-diagram-headers {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .diag-arrow {
        transform: rotate(90deg);
    }

    .feature-item {
        flex: 0 0 100%;
        padding: 16px 0 !important;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .feature-item:last-child {
        border-bottom: none;
    }

    .work-header-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        padding: 32px var(--container-padding);
    }

    .work-impacts {
        flex-direction: column;
        gap: 16px;
    }

    .faq-bottom-cta {
        flex-direction: column;
        text-align: center;
        padding: 32px 24px;
        gap: 24px;
    }

    .faq-bcta-left {
        flex-direction: column;
        gap: 16px;
    }

    .faq-item-header {
        padding: 16px;
    }

    .faq-item-body,
    .faq-item.active .faq-item-body {
        padding-left: 24px;
        padding-right: 24px;
    }

    .contact-features {
        flex-direction: column;
    }

    .cf-divider {
        width: 100%;
        height: 1px;
    }

    .cf-item {
        flex-direction: row;
        align-items: center;
    }

    .wa-card {
        padding: 32px 24px;
    }

    .global-footer-cta {
        padding: 32px 24px;
    }

    .gfcta-left {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .gfcta-right {
        flex-direction: column;
        gap: 32px;
    }

    .handwritten-wrapper {
        margin-right: 0;
        margin-bottom: -16px;
    }

    /* Reset min(vh) bounds on mobile so fonts aren't tiny */
    .section-headline {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .cap-num {
        font-size: 2rem;
    }

    .cap-list-text h3 {
        font-size: 1rem;
    }

    .cap-list-text p {
        font-size: 0.875rem;
    }

    .cap-list-item {
        padding: 16px;
    }

    .cap-main-left,
    .cap-main-right {
        padding: 32px var(--container-padding);
    }

    .cap-main-right {
        padding: 32px 16px;
    }
}