@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }

    body.home-page {
        overflow-x: hidden;
    }

    .scroll-progress {
        display: none;
    }

    .header-note {
        display: none !important;
    }

    .container {
        width: calc(100% - 24px);
    }

    .page-shell {
        padding-top: 82px;
    }

    .header-shell {
        min-height: 78px;
    }

    .brand-logo {
        width: 44px;
        height: 44px;
    }

    .brand-name {
        font-size: 1rem;
    }

    .top-nav {
        gap: 6px;
    }

    .top-nav a {
        padding: 10px 12px;
        font-size: 0.88rem;
    }

    .home-page .site-backdrop {
        transform: none;
    }

    .home-page .hero-section {
        padding-top: 36px;
    }

    .home-page .hero-grid {
        min-height: auto;
    }

    .hero-grid,
    .public-page .hero-grid,
    .split-panel,
    .contact-layout,
    .request-layout,
    .footer-shell,
    .simple-photo-story,
    .public-page .simple-photo-story,
    .public-page .simple-icon-row,
    .admin-layout {
        grid-template-columns: 1fr !important;
    }

    .hero-grid,
    .split-panel,
    .contact-layout,
    .request-layout,
    .admin-layout,
    .footer-shell,
    .portfolio-grid,
    .card-grid,
    .hero-metrics,
    .form-grid,
    .analytics-grid,
    .admin-stats-grid {
        gap: 16px;
    }

    .portfolio-grid,
    .portfolio-grid-full,
    .card-grid-3,
    .hero-metrics,
    .form-grid,
    .analytics-grid,
    .admin-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .home-section::before {
        display: none;
    }

    .hero-copy h1,
    .page-hero-shell h1 {
        font-size: clamp(2rem, 9vw, 3rem);
        max-width: 100%;
    }

    .section-heading h2,
    .cta-banner h2 {
        font-size: clamp(1.7rem, 8vw, 2.4rem);
        max-width: 100%;
    }

    .hero-text {
        font-size: 1rem;
    }

    .hero-actions,
    .button-row,
    .section-footer,
    .portfolio-admin-actions,
    .portfolio-form-actions,
    .detail-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .btn,
    .view-btn,
    .admin-edit-btn,
    .admin-delete-btn,
    .detail-btn {
        width: 100%;
    }

    .home-page [data-reveal],
    .home-page [data-parallax],
    .home-page .portfolio-card,
    .home-page .surface-card,
    .home-page .showcase-card,
    .home-page .metric-card,
    .home-page .cta-banner {
        opacity: 1;
        transform: none;
        transition: none;
        will-change: auto;
    }

    .home-page .portfolio-card:hover,
    .home-page .surface-card:hover,
    .home-page .showcase-card:hover,
    .home-page .metric-card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
        border-color: var(--surface-border);
    }

    .showcase-card,
    .surface-card,
    .metric-card,
    .cta-banner {
        backdrop-filter: none;
    }

    .surface-card,
    .showcase-card,
    .portfolio-copy,
    .metric-card,
    .cta-banner,
    .request-entry,
    .admin-panel,
    .contact-card,
    .request-card {
        padding: 20px;
    }

    .hero-photo-board {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-photo-small {
        margin-top: 0;
        min-height: 180px;
    }

    .photo-story-visual {
        min-height: auto;
    }

    .photo-story-main,
    .photo-story-side {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
    }

    .photo-story-side {
        margin-top: 16px;
    }

    .floating-badge {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        margin-top: 12px;
        width: fit-content;
    }

    .portfolio-visual {
        aspect-ratio: 16 / 11;
    }

    .portfolio-gallery-btn {
        min-width: 38px;
        min-height: 38px;
    }

    .request-entry-head,
    .portfolio-admin-top,
    .admin-panel-head,
    .section-heading-inline {
        flex-direction: column;
        align-items: flex-start;
    }

    .request-entry-time {
        justify-items: start;
        text-align: left;
    }

    .request-entry-grid {
        grid-template-columns: 1fr;
    }

    .phone-row {
        grid-template-columns: 1fr;
    }

    .image-picker-preview-grid {
        grid-template-columns: 1fr;
    }

    textarea {
        min-height: 120px;
    }

    .detail-modal-inner {
        padding: 20px;
        width: calc(100% - 16px);
        border-radius: 20px;
    }

    .public-page .top-nav {
        background: rgba(6, 12, 22, 0.98);
        border-color: rgba(102, 216, 255, 0.14);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
    }

    .public-page .nav-toggle {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

    .public-page .hero-visual-shell {
        grid-template-columns: 1fr;
    }

    .public-page .page-hero,
    .public-page .hero-section,
    .public-page .section-block {
        padding-top: 26px;
    }

    .public-page .footer-badges {
        gap: 8px;
    }

    .public-page .marquee-shell span {
        min-height: 56px;
    }
}