/*
  Final responsive layer. It intentionally contains only viewport and input
  adaptations so the established desktop art direction remains untouched.
*/
:root {
    --mobile-gutter: clamp(1rem, 5vw, 1.5rem);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; overflow-x: clip; }
main, section, .navbar, .hero-container, .about-container, .services-container,
.skills-container, .portfolio-container, .contact-container, .footer-container,
.modal-body, .project-card, .service-card, .skill-box { min-width: 0; }

img { max-width: 100%; height: auto; }
.logo img, .about-card img, .footer-logo img { object-fit: contain; }
.project-image { aspect-ratio: 16 / 10; height: auto; background: rgba(255,255,255,.04); }
.project-image img { object-fit: contain; }

button, .hire-btn, .home-button, .primary-btn, .secondary-btn, .resume-btn,
.filter-btn, .submit-btn, .modal-close, .back-to-top, .floating-mail {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

@media (max-width: 900px) {
    header { padding: calc(12px + var(--safe-top)) var(--mobile-gutter) 12px; }
    header.scrolled { padding: calc(8px + var(--safe-top)) var(--mobile-gutter) 8px; }
    .navbar { width: 100%; padding: 11px 14px; border-radius: 18px; gap: 12px; }
    .logo { min-width: 0; gap: 9px; }
    .logo img { width: 44px; height: 44px; }
    .menu-btn { display: inline-flex; width: 46px; height: 46px; flex: 0 0 46px; }
    .nav-btn { display: none; }
    .nav-links {
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        width: min(82vw, 22rem);
        height: 100dvh;
        min-height: 100svh;
        margin: 0;
        padding: calc(86px + var(--safe-top)) max(24px, var(--mobile-gutter)) calc(28px + var(--safe-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 5px;
        background: rgba(8, 16, 29, .98);
        border-left: 1px solid rgba(255,255,255,.1);
        box-shadow: -20px 0 60px rgba(0,0,0,.32);
        transform: translateX(105%);
        transition: transform .3s ease;
    }
    .nav-links.active { right: 0; transform: translateX(0); }
    .nav-links li { width: 100%; }
    .nav-links a { display: flex; align-items: center; min-height: 48px; padding: 8px 0; font-size: 1rem; }
    .nav-links a::after { bottom: 5px; }
    body.menu-open { overflow: hidden; }

    .hero { min-height: 100svh; min-height: 100dvh; padding: calc(96px + var(--safe-top)) var(--mobile-gutter) clamp(38px, 9vw, 72px) !important; }
    .hero-container.home-redesign { width: 100%; max-width: 38rem; gap: clamp(28px, 7vw, 48px) !important; }
    .hero-left.home-copy, .hero-right.home-showcase { width: 100%; max-width: 100%; min-width: 0; }
    .hero-left.home-copy #homeName { font-size: clamp(2.65rem, 12vw, 4.3rem) !important; line-height: 1.04 !important; overflow-wrap: anywhere; }
    .home-title { font-size: clamp(1.55rem, 7vw, 2.35rem); }
    .home-description { max-width: 38rem; font-size: clamp(.9rem, 2.7vw, 1.02rem); }
    .home-actions { align-items: stretch; flex-wrap: wrap; gap: 10px; }
    .home-button { min-height: 46px; justify-content: center; }
    .home-showcase { padding: clamp(12px, 3vw, 18px); }
    .window-canvas { min-height: clamp(210px, 58vw, 300px); }
    .canvas-mark { font-size: clamp(5rem, 19vw, 8rem); }

    section { padding-inline: var(--mobile-gutter); scroll-margin-top: calc(76px + var(--safe-top)); }
    #contact { width: 100%; max-width: 100%; }
    .section-title { margin-bottom: clamp(38px, 8vw, 60px); }
    .section-title h2 { font-size: clamp(2rem, 8vw, 3rem); line-height: 1.14; overflow-wrap: anywhere; }
    .about-container, .contact-container { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 8vw, 52px); }
    .about-card { width: min(100%, 330px); height: auto; aspect-ratio: 1; }
    .about-card img { width: min(58%, 190px); height: auto; }
    .about-content h3 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
    .about-content p { font-size: 1rem; line-height: 1.75; }
    .about-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
    .info-box { min-width: 0; padding: 18px; overflow-wrap: anywhere; }

    .services-container, .skills-container, .portfolio-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 3vw, 24px); }
    .service-card, .skill-box, .project-card, .testimonial-card, .timeline-content { min-width: 0; padding: clamp(20px, 4vw, 28px); }
    .service-card h3, .project-content h3 { overflow-wrap: anywhere; }
    .portfolio-filter { justify-content: flex-start; margin-bottom: 32px; gap: 9px; }
    .filter-btn { min-height: 44px; padding: 9px 14px; font-size: .78rem; }

    .process-container, .stats-container, .testimonial-container { gap: 16px; }
    .timeline { padding-left: 0; }
    .timeline-item { padding-left: 42px; }
    .timeline-content { overflow-wrap: anywhere; }
    /* Contact: replace the legacy fixed desktop track and intrinsic flex sizing. */
    .contact-container {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(24px, 7vw, 40px);
    }
    .contact-info, .contact-form, .contact-box, .contact-cta, .cta-button,
    .form-group { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
    .contact-info { padding: clamp(18px, 5vw, 28px); }
    .contact-box {
        display: flex;
        align-items: flex-start;
        gap: clamp(10px, 3vw, 14px);
        padding: clamp(14px, 4vw, 20px);
        overflow: hidden;
        transform: none;
    }
    .contact-box > div { flex: 1 1 0; min-width: 0; }
    .contact-box h4, .contact-box span {
        display: block;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .contact-box i { width: 44px; height: 44px; flex: 0 0 44px; }
    .contact-cta { margin-top: clamp(14px, 4vw, 20px); }
    .cta-button {
        display: flex;
        justify-content: center;
        gap: 9px;
        min-height: 48px;
        padding: 12px clamp(12px, 4vw, 20px);
        text-align: center;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .contact-form { gap: 16px; }
    .contact-form input, .contact-form textarea { min-height: 48px; padding: 14px 16px; font-size: 16px; }
    .contact-form textarea { min-height: 150px; }
    .contact-form button { width: 100%; min-height: 48px; }
    footer { margin-top: 72px; padding: 48px var(--mobile-gutter) calc(24px + var(--safe-bottom)); }
    .footer-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; text-align: left; }
    .footer-logo { grid-column: 1 / -1; }
    .footer-social { align-items: flex-start; }

    .portfolio-modal { padding: max(12px, var(--safe-top)) 12px max(12px, var(--safe-bottom)); }
    .modal-content { width: 100%; max-height: calc(100dvh - 24px - var(--safe-top) - var(--safe-bottom)); border-radius: 18px; }
    .modal-body { grid-template-columns: minmax(0, 1fr); padding: 66px 18px 20px; }
    .modal-close { top: 12px; right: 12px; width: 48px; height: 48px; }
    .modal-image img { width: 100%; height: auto; object-fit: contain; }
    .modal-metrics, .modal-links { grid-template-columns: minmax(0, 1fr); }
    .back-to-top, .floating-mail { right: max(16px, var(--safe-right)); width: 48px; height: 48px; }
    .floating-mail { bottom: calc(16px + var(--safe-bottom)); }
    .back-to-top { bottom: calc(76px + var(--safe-bottom)); }
    /* Fixed actions should not obscure form fields or contact details. */
    body.contact-in-view .back-to-top, body.contact-in-view .floating-mail {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(12px);
    }
}

@media (max-width: 640px) {
    .services-container, .skills-container, .portfolio-container, .about-info,
    .footer-container { grid-template-columns: minmax(0, 1fr); }
    .service-card, .skill-box, .project-card { width: 100%; }
    .hero-notes, .home-footnote { flex-wrap: wrap; gap: 9px 14px; }
    .home-actions > * { flex: 1 1 100%; }
    .home-button { width: 100%; }
    .showcase-topline, .showcase-bottom { gap: 8px; }
    .showcase-bottom > div { min-width: 0; }
    .canvas-caption { font-size: .52rem; }
    .timeline-item { padding-left: 34px; }
    .faq-question { min-height: 50px; padding: 16px 42px 16px 0; text-align: left; }
    .copyright { margin-top: 32px; font-size: .8rem; }
}

@media (max-width: 360px) {
    .navbar { padding-inline: 10px; }
    .logo img { width: 38px; height: 38px; }
    .menu-btn { width: 44px; height: 44px; flex-basis: 44px; }
    .hero { padding-inline: 14px !important; }
    section { padding-inline: 14px; }
    .home-eyebrow { font-size: .5rem; letter-spacing: .07em; }
    .home-title { font-size: 1.42rem; }
    .home-description { font-size: .84rem; }
    .about-card { width: min(100%, 260px); }
}

@media (max-height: 520px) and (orientation: landscape) {
    .hero { min-height: auto; padding-top: calc(84px + var(--safe-top)) !important; }
    .hero-right.home-showcase { display: none !important; }
    .nav-links { padding-top: calc(70px + var(--safe-top)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}