/* Mobile-first finishing layer shared by every public LSRR page. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 82px;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

a,
button,
input,
select,
textarea,
[role="button"] {
    touch-action: manipulation;
}

:where(a, button, input, select, textarea, [role="button"]):focus-visible {
    outline: 3px solid rgba(230, 83, 95, .35);
    outline-offset: 3px;
}

@media (max-width: 768px) {
    html { scroll-padding-top: 74px; }
    body.menu-open { overflow: hidden !important; }
    body.menu-open::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(24, 20, 17, .42);
    }

    .container {
        width: min(100% - 32px, 1380px) !important;
        max-width: 100% !important;
    }

    .top-promise-bar { min-height: 32px; }
    .top-promise-inner {
        min-height: 32px !important;
        justify-content: center !important;
        text-align: center;
    }
    .top-promise-inner p { display: none !important; }
    .top-promise-inner a {
        display: inline-flex;
        min-height: 32px;
        align-items: center;
        font-size: .72rem;
    }

    .header,
    .header.scrolled {
        position: sticky !important;
        top: 0 !important;
        padding: 0 16px !important;
    }
    .navbar {
        width: 100%;
        height: 68px !important;
        min-height: 68px;
        justify-content: flex-start !important;
        gap: 12px;
    }
    .nav-logo {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        min-width: 0;
        max-width: calc(100% - 120px);
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #20201f !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: -.04em !important;
    }
    .nav-logo img {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px;
    }
    .nav-logo span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-align: center;
    }
    .hamburger {
        position: relative !important;
        inset: auto !important;
        z-index: 1002;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 !important;
        border: 1px solid rgba(32, 32, 31, .1) !important;
        border-radius: 10px !important;
        background: #fff !important;
        cursor: pointer;
        order: -1;
        margin: 0 !important;
    }
    .hamburger .bar { margin: 0 !important; }
    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        left: 0 !important;
        bottom: auto !important;
        z-index: 1001 !important;
        width: min(86vw, 340px) !important;
        height: 100dvh !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        gap: 2px !important;
        padding: 24px 18px calc(22px + env(safe-area-inset-bottom)) !important;
        overflow-y: auto;
        background: #fff !important;
        border-right: 1px solid rgba(32, 32, 31, .1);
        box-shadow: 22px 0 65px rgba(24, 20, 17, .2) !important;
        opacity: 0;
        visibility: hidden;
        transform: translate3d(-104%, 0, 0) !important;
        transition: transform .28s cubic-bezier(.22, .75, .2, 1), opacity .2s ease, visibility .2s ease !important;
        overscroll-behavior: contain;
    }
    .nav-menu::before {
        content: 'Menu';
        display: flex;
        min-height: 58px;
        align-items: center;
        margin: -4px 2px 18px;
        padding: 0 0 16px 54px;
        border-bottom: 1px solid rgba(32, 32, 31, .11);
        color: #20201f;
        font-size: 1.18rem;
        font-weight: 800;
        letter-spacing: -.035em;
    }
    .nav-menu::after {
        content: 'Interior design · Visualization · Documentation';
        display: block;
        margin-top: 16px;
        padding: 16px 12px 0;
        border-top: 1px solid rgba(32, 32, 31, .09);
        color: #8a847d;
        font-size: .58rem;
        font-weight: 700;
        line-height: 1.55;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .nav-menu.active {
        left: 0 !important;
        right: auto !important;
        opacity: 1;
        visibility: visible;
        transform: translate3d(0, 0, 0) !important;
    }
    .nav-menu .nav-item { width: 100%; }
    .nav-menu .nav-link {
        width: 100%;
        min-height: 50px;
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        padding: 12px 14px !important;
        border: 0 !important;
        border-radius: 10px;
        background: transparent !important;
        color: #4c4843 !important;
        font-size: .88rem !important;
        font-weight: 700 !important;
    }
    .nav-menu .nav-link::after { display: none !important; }
    .nav-menu .nav-link.active {
        background: rgba(230, 83, 95, .08) !important;
        color: #d74652 !important;
        box-shadow: inset 3px 0 0 #e6535f;
    }
    .nav-menu .nav-link:hover { background: #f7f4ef !important; }
    .nav-menu .nav-item:has(.nav-login-link) {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(32, 32, 31, .09);
    }
    .nav-menu .nav-login-link { color: #69635d !important; }
    .nav-menu .nav-item:last-child { margin-top: auto; }
    .nav-menu .nav-action-link {
        min-height: 50px;
        justify-content: center !important;
        margin-top: 18px;
        border-radius: 999px !important;
        background: #e6535f !important;
        color: #fff !important;
        box-shadow: 0 14px 30px rgba(230, 83, 95, .24) !important;
        text-align: center;
    }
    .nav-menu .nav-action-link:hover { background: #ca3f4b !important; }

    /* One non-overridable mobile header contract for every public page. */
    body #main-page-wrapper > .header .navbar {
        position: relative !important;
        width: 100% !important;
        height: 68px !important;
        min-height: 68px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 0 !important;
    }
    body #main-page-wrapper > .header .nav-logo {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: calc(100% - 128px) !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        color: #20201f !important;
        font-size: 1rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: -.04em !important;
    }
    body #main-page-wrapper > .header .hamburger {
        position: relative !important;
        inset: auto !important;
        order: -1 !important;
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
    }
    body #main-page-wrapper > .header .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        left: 0 !important;
        bottom: auto !important;
        width: min(86vw, 340px) !important;
        max-width: 340px !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
    }

    main h1 {
        font-size: clamp(2.15rem, 9.4vw, 3.2rem) !important;
        line-height: 1.01 !important;
        text-wrap: balance;
    }
    main h2 {
        font-size: clamp(1.72rem, 7.5vw, 2.5rem) !important;
        line-height: 1.07 !important;
        text-wrap: balance;
    }
    main h3 { font-size: clamp(1.08rem, 5vw, 1.35rem) !important; }
    main p { font-size: .92rem; line-height: 1.62; }
    .subheading,
    .portfolio-eyebrow,
    .about-eyebrow,
    .contact-eyebrow {
        font-size: .62rem !important;
        letter-spacing: .13em !important;
    }
    .section-padding { padding: 54px 0 !important; }
    .section-header,
    .section-header-split,
    .portfolio-section-heading,
    .contact-section-heading {
        margin-bottom: 28px !important;
    }

    .btn,
    button,
    [role="button"] { min-height: 44px; }
    .btn {
        min-height: 48px;
        font-size: .78rem !important;
        padding: .78rem 1.05rem !important;
    }

    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        max-width: 100%;
        font-size: 16px !important;
    }
    input:not([type="checkbox"]):not([type="radio"]),
    select { min-height: 50px; }
    textarea { min-height: 128px; }

    /* Home */
    .turnkey-hero { min-height: 0 !important; }
    .hero-layout {
        min-height: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 30px !important;
        padding-top: 38px !important;
        padding-bottom: 50px !important;
    }
    .hero-content { min-width: 0; }
    .hero-content p { font-size: .98rem !important; }
    .hero-deliverables { row-gap: 8px !important; }
    .hero-visual {
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 4 / 4.6;
    }
    .hero-media-shell { inset: 0 0 0 12px !important; }
    .turnkey-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .proof-item {
        min-height: 92px !important;
        padding: 14px !important;
        justify-content: flex-start !important;
    }
    .proof-item:last-child { grid-column: 1 / -1; }
    .home-value-grid { grid-template-columns: 1fr !important; }
    .value-intro,
    .value-point { min-height: 0 !important; padding: 24px 20px !important; }
    #services-showcase .services-showcase-grid,
    #services-showcase .services-showcase-grid[data-layout="bento"] {
        grid-template-columns: 1fr !important;
    }
    #services-showcase .service-showcase-card,
    #services-showcase .services-showcase-grid[data-layout="bento"] .service-showcase-card:first-child,
    #services-showcase .services-showcase-grid[data-layout="bento"] .service-showcase-card:not(:first-child) {
        min-height: 0 !important;
    }
    #services-showcase .service-image { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 10; }
    .execution-story-grid { gap: 42px !important; }
    .story-visual {
        width: calc(100% - 12px) !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 4.8;
    }
    .execution-process-grid { grid-template-columns: 1fr !important; }
    .process-step { min-height: 0 !important; padding: 24px !important; }
    .portfolio-strip-card {
        flex-basis: 84vw !important;
        height: auto !important;
        aspect-ratio: 4 / 3;
    }
    .turnkey-lead-form { grid-template-columns: 1fr !important; }
    .lead-field,
    .lead-form-heading { grid-column: 1 / -1 !important; }

    /* Portfolio */
    .portfolio-hero-v2 {
        min-height: 640px !important;
        height: auto !important;
    }
    .portfolio-hero-layout {
        min-height: 640px;
        padding-top: 56px !important;
        padding-bottom: 38px !important;
        gap: 26px !important;
    }
    .portfolio-hero-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .portfolio-hero-stats > div {
        min-width: 0;
        padding: 14px 10px !important;
        border-right: 1px solid rgba(255,255,255,.14) !important;
        border-bottom: 0 !important;
    }
    .portfolio-hero-stats > div:last-child { border-right: 0 !important; }
    .portfolio-hero-stats strong { font-size: .82rem !important; overflow-wrap: anywhere; }
    .portfolio-hero-stats span { font-size: .58rem !important; }
    #portfolio-filters,
    .filter-buttons {
        top: 68px !important;
        display: flex;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-inline: -16px;
        padding: 12px 16px !important;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }
    .filter-buttons::-webkit-scrollbar { display: none; }
    .filter-btn {
        flex: 0 0 auto;
        min-height: 44px;
        white-space: nowrap;
    }
    .portfolio-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
    .portfolio-item,
    .portfolio-item:nth-child(n),
    .portfolio-grid[data-layout] .portfolio-item {
        grid-column: 1 !important;
        min-height: 0 !important;
        aspect-ratio: 4 / 4.35;
    }
    .portfolio-overlay { opacity: 1 !important; }
    .portfolio-category-card { min-height: 320px !important; }
    .portfolio-story-grid { gap: 26px !important; }
    .portfolio-cta { padding: 64px 0 !important; }

    /* About */
    .about-hero-v2 { min-height: 610px !important; height: auto !important; }
    .about-hero-layout { min-height: 610px !important; padding-top: 52px !important; padding-bottom: 42px !important; }
    .about-studio-rail { overflow: hidden; }
    .about-rail-grid { gap: 0 !important; }
    .story-grid,
    .founder-grid,
    .about-approach-grid { min-width: 0; }
    .team-tree-scroll {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }
    .team-member-modal-content {
        width: calc(100% - 24px) !important;
        max-height: calc(100dvh - 24px);
        overflow-y: auto;
    }
    .team-member-modal-close {
        width: 44px !important;
        height: 44px !important;
    }

    /* Contact */
    .contact-hero-v2 {
        min-height: 650px !important;
        height: auto !important;
    }
    .contact-hero-layout {
        min-height: 650px;
        padding-top: 48px !important;
        padding-bottom: 38px !important;
        gap: 24px !important;
    }
    .contact-hero-note { max-width: 100%; }
    .contact-grid,
    .map-layout,
    .contact-seo-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .contact-info-wrapper { min-height: 0 !important; }
    .contact-form-wrapper,
    .contact-info-wrapper { padding: 22px !important; }
    #contact-form { grid-template-columns: 1fr !important; }
    .form-group-full,
    #contact-submit-button,
    .contact-form-status { grid-column: 1 !important; }
    .map-visual {
        width: calc(100% - 12px) !important;
        min-height: 340px !important;
    }
    .contact-service-list ul { grid-template-columns: 1fr !important; }

    /* Shared lower-page elements */
    .footer {
        padding-top: 48px !important;
        padding-bottom: calc(22px + env(safe-area-inset-bottom)) !important;
        font-size: .82rem;
    }
    .footer-grid { grid-template-columns: 1fr !important; gap: 30px !important; }
    .footer-brand,
    .footer-bottom,
    .footer #global-footer-text { grid-column: 1 !important; }
    .footer-links a,
    .footer-contact-row a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .consult-fab-wrap {
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    }
    .consult-fab-wrap a,
    .consult-fab-wrap button { min-height: 48px; }
}

@media (max-width: 480px) {
    .container { width: min(100% - 28px, 1380px) !important; }
    main h1 { font-size: clamp(2.02rem, 9.2vw, 2.6rem) !important; }
    main h2 { font-size: clamp(1.62rem, 7.4vw, 2.15rem) !important; }
    main p { font-size: .88rem; }
    .section-padding { padding: 50px 0 !important; }
    .hero-buttons,
    .portfolio-hero-actions,
    .about-hero-actions,
    .contact-hero-actions {
        width: 100%;
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
    }
    .hero-buttons .btn,
    .portfolio-hero-actions .btn,
    .about-hero-actions .btn,
    .contact-hero-actions .btn { width: 100%; }
    .hero-visual { aspect-ratio: 4 / 4.75; }
    .hero-floating-card-bottom { max-width: calc(100% - 20px); }
    .portfolio-hero-v2,
    .portfolio-hero-layout { min-height: 610px !important; }
    .contact-hero-v2,
    .contact-hero-layout { min-height: 620px !important; }
    .portfolio-item,
    .portfolio-item:nth-child(n),
    .portfolio-grid[data-layout] .portfolio-item { aspect-ratio: 4 / 4.5; }
    .contact-form-wrapper,
    .contact-info-wrapper { padding: 18px !important; }
}

@media (max-width: 360px) {
    .container { width: min(100% - 24px, 1380px) !important; }
    .nav-logo { font-size: 1rem !important; }
    .portfolio-hero-stats span { display: none; }
    .proof-item { min-height: 84px !important; padding: 12px !important; }
}

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