@media (max-width: 768px) {
    html { font-size: 14.5px !important; }
    body { font-size: 0.9rem !important; }
}
@media (max-width: 480px) {
    html { font-size: 14.5px !important; }
}

/* ══════════════════════════════════════════════════════════
   2. GLOBAL INLINE FONT OVERRIDES
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    [style*="font-size:0.625rem"],
    [style*="font-size: 0.625rem"] {
        font-size: 0.83rem !important;
    }

    [style*="font-size:0.75rem"],
    [style*="font-size: 0.75rem"] {
        font-size: 0.83rem !important;
    }

    [style*="font-size:0.8125rem"],
    [style*="font-size: 0.8125rem"] {
        font-size: 0.875rem !important;
    }

    [style*="font-size:0.875rem"],
    [style*="font-size: 0.875rem"] {
        font-size: 0.9rem !important;
    }

    [style*="font-size:0.9375rem"],
    [style*="font-size: 0.9375rem"] {
        font-size: 0.9rem !important;
    }

    [style*="font-size:0.9rem"],
    [style*="font-size: 0.9rem"] {
        font-size: 0.9rem !important;
    }
}

/* ══════════════════════════════════════════════════════════
   3. SECTION CONTAINERS & SPACING
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .section-inner,
    .container,
    .container-eyedea {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .section-header,
    .section-header--centered {
        margin-bottom: 36px !important;
    }

    .section-title {
        font-size: 1.45rem !important;
        line-height: 1.1 !important;
        letter-spacing: -0.02em !important;
    }

    .eyebrow {
        font-size: 0.83rem !important;
        margin-bottom: 8px !important;
    }

    .section-subtitle,
    .section-description {
        font-size: 0.9rem !important;
        line-height: 1.65 !important;
    }

    p {
        font-size: 0.95rem !important;
    }
}

/* ══════════════════════════════════════════════════════════
   4. NAV
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .nav-inner {
        grid-template-columns: 1fr auto !important;
        padding: 0 16px !important;
    }
    .nav-left, .nav-right { display: none !important; }
    .nav-mobile-btn { display: flex !important; }
    .logo-img { height: 44px !important; }
}

/* ══════════════════════════════════════════════════════════
   5. HERO
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .hero {
        padding-top: calc(var(--nav-h) + 16px) !important;
        padding-bottom: 0 !important;
    }

    .hero-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
        padding: 0 10px 20px !important;
        align-items: start !important;
    }

    .hero-headline {
        font-size: 1.65rem !important;
        line-height: 1.05 !important;
        letter-spacing: -0.025em !important;
        margin-bottom: 20px !important;
    }

    .hero-sub {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
    }

    .hero-proof-line {
        font-size: 0.83rem !important;
        margin-bottom: 20px !important;
    }

    .hero-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   6. PAGE HERO (inner pages)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .page-hero {
        padding-top: calc(var(--nav-h) + 32px) !important;
        padding-bottom: 40px !important;
    }
    .page-hero h1 {
        font-size: 1.75rem !important;
        line-height: 1.1 !important;
    }
    .page-hero p {
        font-size: 0.9rem !important;
    }
}

/* ══════════════════════════════════════════════════════════
   7. SERVICES / CORE CAPABILITIES
   2-col grid — ALL cards visible, no hiding
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .services-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        border: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Show ALL cards — nothing hidden */
    .services-grid .service-card:nth-child(3),
    .services-grid .service-card:nth-child(4),
    .services-grid .service-card:nth-child(5),
    .services-grid .service-card:nth-child(6) {
        display: flex !important;
    }

    .service-card,
    .service-block {
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        padding: 18px !important;
        margin: 0 !important;
        background: var(--bg-alt) !important;
    }

    /* Dark section service cards */
    .section--dark .service-card {
        border-color: rgba(255,255,255,0.1) !important;
        background: rgba(255,255,255,0.02) !important;
    }

    .service-card-num {
        font-size: 0.83rem !important;
        margin-bottom: 8px !important;
    }

    .service-card-body h3 {
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
    }

    /* Full text — no line-clamp, no overflow hidden */
    .service-card-body p {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
        margin-bottom: 10px !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .card-link {
        font-size: 0.83rem !important;
        gap: 4px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   8. METHODOLOGY / ENGINEERING STANDARD
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .methodology-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        border: none !important;
        overflow: visible !important;
    }

    .methodology-item {
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: var(--radius-md) !important;
        padding: 18px !important;
    }

    .methodology-num {
        font-size: 0.83rem !important;
        margin-bottom: 8px !important;
    }

    .methodology-item h3 {
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
    }

    .methodology-item p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }
}

/* ══════════════════════════════════════════════════════════
   9. PROCESS STEPS
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .process-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        border-top: none !important;
    }

    .process-step {
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: var(--radius-md) !important;
        padding: 18px !important;
    }

    .process-num {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }

    .process-body h3 {
        font-size: 0.9rem !important;
        margin-bottom: 6px !important;
    }

    .process-body p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
}

/* ══════════════════════════════════════════════════════════
   10. TECH STACK — pill tag layout
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .stack-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        border: none !important;
        background: none !important;
        overflow: visible !important;
    }

    .stack-category {
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden !important;
        background: var(--bg-alt) !important;
    }

    .stack-cat-header {
        padding: 10px 16px !important;
        border-bottom: 1px solid var(--border) !important;
        background: var(--bg) !important;
    }

    .stack-cat-label {
        font-size: 0.75rem !important;
        letter-spacing: 0.1em !important;
    }

    .stack-items {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 12px 14px !important;
        border: none !important;
    }

    .stack-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 5px 12px !important;
        border: 1px solid var(--border) !important;
        border-radius: 100px !important;
        background: var(--bg) !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    .stack-item span {
        font-size: 0.83rem !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        color: var(--text-secondary) !important;
    }

    .stack-item-dot {
        width: 4px !important;
        height: 4px !important;
        flex-shrink: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════
   11. PORTFOLIO & PRODUCT GRIDS — always 2-col
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .portfolio-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .portfolio-card, .work-card {
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        min-width: 0 !important;
    }

    .portfolio-meta { padding: 12px !important; }

    .portfolio-cat {
        font-size: 0.75rem !important;
        margin-bottom: 6px !important;
    }

    .portfolio-meta h3 {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
    }

    /* Full description text — no clamp */
    .portfolio-meta p {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .product-block {
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        min-width: 0 !important;
    }

    .product-block h3 { font-size: 0.9rem !important; }
    .product-block p {
        font-size: 0.83rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .product-block .browser-bar { padding: 5px 8px !important; }
    .product-block .browser-dot { width: 5px !important; height: 5px !important; }
    .product-block .browser-url span { font-size: 0.83rem !important; }
    .product-block > div[style*="padding"] { padding: 10px !important; }
}

/* ══════════════════════════════════════════════════════════
   12. ABOUT GRID — 2-col layout, full text on all cards
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .about-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
        align-items: start !important;
    }

    .about-text h2 {
        font-size: 1.3rem !important;
        margin-bottom: 20px !important;
    }

    .about-text p {
        font-size: 0.95rem !important;
        line-height: 1.75 !important;
        margin-bottom: 20px !important;
    }

    /* About pillars: 2×2 grid, full text */
    .about-pillars {
        display: grid !important;
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 0 !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden !important;
    }

    .pillar {
        padding: 20px !important;
        border-right: 1px solid var(--border) !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .pillar:nth-child(2n) { border-right: none !important; }
    .pillar:nth-child(3), .pillar:nth-child(4) { border-bottom: none !important; }

    .pillar h4 { font-size: 0.95rem !important; }

    /* Full text — no clamp on commitment/pillar descriptions */
    .pillar p {
        font-size: 0.9rem !important;
        line-height: 1.55 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    /* Inline commitment card paragraphs — no truncation */
    .about-grid p,
    .about-grid div > p {
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
        white-space: normal !important;
    }
}

/* ══════════════════════════════════════════════════════════
   13. FOUNDER GRID — 2-col
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .founder-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0 !important;
        border: 1px solid var(--border) !important;
        border-radius: var(--radius-md) !important;
        overflow: hidden !important;
    }

    .founder-image-col {
        min-height: 260px !important;
        padding: 28px !important;
    }

    .founder-image-overlay h3 { font-size: 1rem !important; }
    .founder-image-overlay p { font-size: 0.83rem !important; }

    .founder-content-col {
        padding: 28px 20px !important;
    }

    .founder-content-col blockquote {
        font-size: 0.95rem !important;
        padding-left: 14px !important;
        margin-bottom: 20px !important;
    }

    .founder-content-col p {
        font-size: 0.9rem !important;
        line-height: 1.7 !important;
    }
}

/* ══════════════════════════════════════════════════════════
   14. CONTACT & BOOKING GRID
   Trust items: full text wrap, no clipping
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .contact-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
        align-items: start !important;
    }

    .contact-form-wrap {
        padding: 28px 20px !important;
    }

    .booking-col {
        padding: 24px 20px !important;
    }

    .contact-info-item {
        padding: 20px 20px !important;
    }

    .contact-info-item h4 { font-size: 0.75rem !important; }
    .contact-info-item a,
    .contact-info-item p { font-size: 0.9rem !important; }

    /* Trust row items — allow text to wrap fully, never clip */
    .trust-row {
        flex-wrap: wrap !important;
        gap: 0 !important;
        margin-top: 20px !important;
    }

    .trust-row .trust-item {
        flex: 1 1 calc(33.333% - 2px) !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        height: auto !important;
        border-bottom: none !important;
    }

    .trust-item i {
        font-size: 0.9rem !important;
        margin-bottom: 5px !important;
    }

    /* Full label text — no clamp */
    .trust-item p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
        white-space: normal !important;
    }
}

/* ══════════════════════════════════════════════════════════
   15. ABOUT PAGE: Commitments block (inline-styled)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .about-grid div[style*="flex-direction:column"] > div[style*="padding:20px 32px"],
    .about-grid div[style*="flex-direction: column"] > div[style*="padding: 20px 32px"] {
        padding: 14px 16px !important;
        gap: 10px !important;
    }

    .about-grid div[style*="padding:20px"] p[style*="font-size:0.875rem"],
    .about-grid div[style*="padding: 20px"] p[style*="font-size:0.875rem"] {
        font-size: 0.9rem !important;
    }

    .about-grid div[style*="padding:20px"] p[style*="font-size:0.8125rem"],
    .about-grid div[style*="padding: 20px"] p[style*="font-size:0.8125rem"] {
        font-size: 0.83rem !important;
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
    }
}

/* ══════════════════════════════════════════════════════════
   16. TESTIMONIALS — 1-col stacked
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    [style*="padding:36px"][style*="border:1px solid var(--border)"],
    [style*="padding: 36px"][style*="border: 1px solid var(--border)"] {
        padding: 20px !important;
    }

    [style*="font-size:0.9375rem"][style*="line-height:1.75"] {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 20px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   17. OUTCOMES & TRUST STRIPS
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .outcomes-strip-inner {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        height: auto !important;
        padding: 0 16px !important;
    }

    .outcome-item { padding: 24px 16px !important; }
    .outcome-item:nth-child(2n) { border-right: none !important; }
    .outcome-item:nth-child(1),
    .outcome-item:nth-child(2) { border-bottom: 1px solid var(--border) !important; }

    .outcome-value { font-size: 1.5rem !important; }
    .outcome-label { font-size: 0.9rem !important; }

    .trust-strip-inner {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        height: auto !important;
        padding: 8px 16px !important;
    }

    .trust-strip-item {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .trust-strip-item span { font-size: 0.9rem !important; }
}

/* ══════════════════════════════════════════════════════════
   18. WORK LIST
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .work-item {
        grid-template-columns: 1fr 32px !important;
        gap: 12px !important;
        padding: 18px 0 !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .work-item-meta { display: none !important; }
    .work-item-thumb { display: none !important; }
    .work-item-content h3 { font-size: 0.95rem !important; margin-bottom: 3px !important; }
    .work-item-content p { font-size: 0.9rem !important; }
    .work-item-arrow { width: 32px !important; height: 32px !important; }
}

/* ══════════════════════════════════════════════════════════
   19. CTA BLOCK
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cta-block {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        padding: 24px 16px !important;
        gap: 16px !important;
        align-items: center !important;
    }

    .cta-text h2 { font-size: 1.25rem !important; }
    .cta-text p { font-size: 0.875rem !important; }

    .cta-buttons, .cta-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
    }
}

/* ══════════════════════════════════════════════════════════
   20. BUTTONS
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .btn,
    .btn-primary,
    .btn-outline,
    .btn-ghost,
    .btn-outline--light {
        padding: 10px 16px !important;
        font-size: 0.875rem !important;
        min-height: 36px !important;
    }

    .btn-sm {
        padding: 7px 12px !important;
        font-size: 0.83rem !important;
        min-height: 30px !important;
    }

    .btn-text-link { font-size: 0.875rem !important; }
    .nav-cta { padding: 8px 14px !important; font-size: 0.83rem !important; }
}

/* ══════════════════════════════════════════════════════════
   21. STATUS CARD (hero aside)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .status-label { font-size: 0.75rem !important; }
    .status-live { font-size: 0.75rem !important; }
    .status-row { padding: 5px 10px !important; }
    .status-row-name { font-size: 0.74rem !important; }
    .status-row-val { font-size: 0.74rem !important; }
    .status-footer { font-size: 0.875rem !important; }
}

/* ══════════════════════════════════════════════════════════
   22. FOOTER
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .footer-inner { padding: 40px 16px 24px !important; }

    .footer-top {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 24px !important;
        padding-bottom: 24px !important;
    }

    .footer-logo { height: 44px !important; }
    .footer-tagline { font-size: 0.9rem !important; }
    .footer-nav-group h4,
    .footer-contact-col h4 { font-size: 0.75rem !important; }
    .footer-nav-group ul a,
    .footer-contact-col address a,
    .footer-contact-col address span { font-size: 0.9rem !important; }
    .footer-bottom p { font-size: 0.875rem !important; }
    .footer-bottom {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
    }
}

/* ══════════════════════════════════════════════════════════
   23. FORM ELEMENTS
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
    .form-label { font-size: 0.875rem !important; }
    .form-input,
    .form-select,
    .form-textarea { font-size: 0.9rem !important; padding: 10px 12px !important; }
    .form-hint { font-size: 0.83rem !important; }
}