/* All visual overrides are confined to the existing mobile breakpoint. */
@media (max-width: 860px) {
  html { scroll-padding-top: 96px; }
  body { overflow-x: clip; }
  body.mobile-menu-open { overflow: hidden; }
  .site-header { padding-inline: clamp(16px, 4.6vw, 24px); }
  .menu-toggle {
    position: relative;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(64, 144, 255, .3);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(18, 36, 65, .72), rgba(5, 14, 29, .76));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 5px 18px rgba(0, 0, 0, .14);
    touch-action: manipulation;
  }
  .menu-toggle span {
    position: absolute;
    left: 13px;
    top: 22px;
    width: 20px;
    height: 1.5px;
    border-radius: 2px;
    background: #d4e5ff;
    transition: transform .2s ease, opacity .15s ease;
  }
  .menu-toggle span:nth-child(1) { transform: translateY(-6px); }
  .menu-toggle span:nth-child(3) { transform: translateY(6px); }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.5); }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
  .site-header > .nav {
    position: fixed;
    top: calc(var(--header) + 10px);
    left: clamp(12px, 3.8vw, 24px);
    right: clamp(12px, 3.8vw, 24px);
    height: auto;
    max-height: calc(100svh - var(--header) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 18px 16px max(20px, env(safe-area-inset-bottom));
    border: 1px solid rgba(69, 126, 203, .2);
    border-radius: 22px;
    background: linear-gradient(150deg, rgba(10, 24, 45, .97), rgba(3, 10, 23, .96));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .04);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .site-header > .nav.open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); }
  .site-header > .nav > a:not(.mobile-nav-cta) {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    min-height: 53px;
    height: auto;
    padding: 12px 16px;
    border-radius: 11px;
    font-size: 17px;
    font-weight: 500;
    color: #cbd8eb;
    line-height: 1.4;
    -webkit-tap-highlight-color: rgba(22, 132, 255, .1);
  }
  .site-header > .nav > a:not(.mobile-nav-cta)::after { display: none; }
  .site-header > .nav > a.active { color: #439fff; background: rgba(22, 132, 255, .1); box-shadow: inset 2px 0 #1684ff; }
  .site-header > .nav > a:active { background: rgba(22, 132, 255, .14); }
  .site-header > .nav > .mobile-nav-cta {
    flex-shrink: 0;
    position: relative;
    min-height: 54px;
    margin: 22px 4px 0;
    width: auto;
    font-size: 11px;
    letter-spacing: .12em;
    color: #fff;
    border-radius: 13px;
  }
  .site-header > .nav > .mobile-nav-cta::before { content: ""; position: absolute; height: 1px; top: -14px; left: 0; right: 0; background: rgba(124, 157, 199, .13); }
  .site-header > .nav > .mobile-nav-cta::after { display: none; }
  .mobile-menu-backdrop { position: fixed; inset: 0; z-index: 49; background: rgba(0, 4, 12, .58); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility .18s; touch-action: none; }
  .mobile-menu-open .mobile-menu-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }

  main h1, main h2, main h3, .section-label, .s-label, .xp-label { overflow-wrap: anywhere; }
  main img, .portal-mockup, .project-media, .era-visual { max-width: 100%; }
  .hero, .section-shell, .xp-shell, .shell, .projects-intro, .projects-list, .projects-outro { padding-inline: clamp(18px, 4.8vw, 28px); }
  .hero { padding-top: 116px; padding-bottom: 44px; gap: 38px; }
  .hero .intro { line-height: 1.65; }
  .intro strong { margin-bottom: 14px; }
  .intro small { margin-top: 14px; line-height: 1.75; }
  .skills { margin-top: 28px; gap: 12px; }
  .skills article { min-height: 108px; padding: 14px 8px; }
  .skills article > a { min-height: 78px; }
  .skills span { font-size: 12px; line-height: 1.5; }
  .skills article:active { border-color: #328fff; background: rgba(22, 70, 126, .3); }
  .actions { margin-top: 28px; gap: 14px; }
  .availability { margin-top: 23px; gap: 8px; }
  .button, .header-cta { min-height: 54px; padding: 14px 20px; line-height: 1.5; text-align: center; touch-action: manipulation; }
  .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .button span { flex-shrink: 0; }
  .pillars { padding-block: 22px; }
  .pillars article { padding-block: 23px; }
  .about-hero, .xp-hero, .solutions-hero, .projects-intro { padding-top: 124px; padding-bottom: 64px; gap: 40px; }
  .journey, .process, .tools-profile, .crm-section, .ai-section, .products-section, .showcase, .showcase.reverse, .creative-section { padding-top: 72px; padding-bottom: 76px; }
  .section-heading, .section-head { margin-bottom: 36px; }
  .about-page .timeline-card { padding: 25px 22px; }
  .about-page .timeline-card h3 { margin: 16px 0; line-height: 1.45; }
  .about-page .timeline-item { padding-bottom: 38px; }
  .about-page .timeline-card p { line-height: 1.8; }
  .process-grid, .tools-profile { gap: 20px; }
  .career-timeline { padding-top: 24px; padding-bottom: 54px; }
  .era, .era-solo.current { padding-top: 48px; padding-bottom: 48px; gap: 32px; }
  .era-copy > p { line-height: 1.8; }
  .era h2 { margin-bottom: 24px; }
  .skill-tags { gap: 10px; margin-top: 26px; }
  .skill-tags span { max-width: 100%; line-height: 1.6; }
  .practice-transition { margin-block: 48px; }
  .project-actions { gap: 16px; margin-top: 30px; }
  .projects-list { padding-block: 48px; gap: 28px; }
  .featured-project, .black-project { padding: 25px 22px; gap: 36px; }
  .project-copy > p, .project-detail p { line-height: 1.8; }
  .project-copy .skill-tags { margin-block: 25px; }
  .projects-outro, .about-cta, .solutions-cta, .xp-closing { padding-top: 64px; padding-bottom: 72px; }
  .project-copy summary { min-height: 54px; }
  .crm-window, .crm-content, .crm-panel, .showcase-copy, .browser-mock, .landing-mock, .creative-copy, .ai-groups, .ai-groups > section { min-width: 0; max-width: 100%; }
  .crm-tabs { flex-wrap: wrap; gap: 7px; overflow: visible; }
  .crm-tabs button { min-height: 44px; padding: 11px 13px; font-size: 11px; }
  .crm-panel { overflow-x: auto; overscroll-behavior-x: contain; }
  .hero-message > .button { margin-top: 26px; }
  .feature-chips { gap: 10px; }
  .tool-card { padding: 24px; }
  .system-orbit, .portrait-stage { overflow: clip; }
  .float-card, .orbit-card { animation: none !important; will-change: auto; }
  .float-card { transform: none !important; }
  .float-card:hover, .skills article:hover, .era:hover .era-visual, .button:hover, .timeline-card:hover, .process-grid article:hover, .tool-card:hover, .product-grid article:hover { transform: none; }
  .signal-lines i, .dash-chart i { animation: none; }
  .reveal { transition-duration: .3s; transform: translateY(10px); }
  .reveal.visible { transform: none; }
}

@media (max-width: 560px) {
  .hero .skills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .skills article:last-child { grid-column: 1 / -1; }
  .process-grid { grid-template-columns: 1fr; }
  .projects-page .projects-intro h1, .about-page .about-intro h1, .solutions-page .hero-message h1, .experience-page .xp-hero h1 { font-size: clamp(37px, 10.6vw, 52px); line-height: 1.08; }
  .about-page h2, .solutions-page h2, .experience-page .era h2, .project-copy h2 { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.12; }
  .projects-intro .xp-label, .xp-hero .xp-label, .s-label, .section-label { line-height: 1.8; font-size: 9px; letter-spacing: .15em; }
  .xp-label i, .s-label i, .section-label i { flex-shrink: 0; width: 24px; }
  .about-visual { min-height: min(430px, 108vw); }
  .portrait-stage { min-height: 360px; height: 110vw; max-height: 440px; }
  .era, .era-solo.current { padding-left: 30px; }
  .era-visual, .era:nth-of-type(even) .era-visual { min-width: 0; }
  .social-studio { grid-template-columns: minmax(0, 1fr) 68px; padding: 12px; gap: 8px; }
  .social-studio aside { padding: 15px 7px; }
  .social-studio aside span { padding: 7px 3px; font-size: 6px; }
  .social-studio aside b { font-size: 8px; }
  .stories { gap: 9px; }
  .stories i { flex-shrink: 0; width: 34px; height: 34px; }
  .commerce-board { padding: 16px; }
  .product-stage { gap: 12px; padding: 14px 0; }
  .product-stage > i { width: 60px; flex-shrink: 0; height: 100px; }
  .product-stage b { font-size: 14px; }
  .browser-hero { grid-template-columns: minmax(0, 1fr) 64px; gap: 8px; padding: 10px 0; }
  .browser-hero strong { font-size: 13px; }
  .product-ring { width: 60px; height: 60px; }
  .browser-content nav { flex-wrap: wrap; gap: 8px; }
  .portal-nav { padding: 12px 10px; gap: 10px; }
  .portal-nav > span { max-width: 52%; line-height: 1.8; text-align: right; }
  .portal-hero b, .project-media .portal-hero b { font-size: clamp(20px, 6vw, 28px); }
  .black-preview { padding: 24px 18px; }
  .black-preview > small { line-height: 1.9; overflow-wrap: anywhere; }
  .featured-project, .black-project { padding: 24px 18px; }
  .school-visual { padding: 10px; min-height: 230px; }
  .project-actions { flex-direction: column; align-items: stretch; }
  .project-actions .text-link { justify-content: center; }
  .solutions-page .hero-message > .button { font-size: 13px; gap: 12px; }
  .creative-tools, .ai-groups .ai-workflow, .ai-groups .dev-group .ai-workflow { grid-template-columns: minmax(0, 1fr); }
  .activity-card li { gap: 8px; }
  .activity-card time { font-size: 7px; }
  .metric-grid { gap: 10px; }
  .metric-grid article { padding: 17px 12px; min-width: 0; }
  .metric-grid strong { font-size: 23px; }
  .crm-panel { padding: 22px 12px; }
  .lp-main { grid-template-columns: minmax(0, 1fr) 70px; padding: 22px 15px; gap: 10px; }
  .book { width: 70px; height: 130px; padding: 12px 8px; }
  .desktop-lp { min-width: 0; }
  .video-copy > div { flex-wrap: wrap; gap: 10px; }
  .creative-hero button, .lp-actions button { min-height: 44px; padding-block: 10px; }
}

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .menu-toggle span, .site-header > .nav, .mobile-menu-backdrop, .reveal { transition: none; }
}