/* Keep the existing desktop grid and artwork unchanged. */
.menu-toggle { display: none; }
.mockup-gallery { display: contents; }
.mockup-gallery .p1 { order: 1; }
.showcase > .case-story { order: 2; }
.mockup-gallery .p2 { order: 3; }

@media (max-width: 760px) {
  .shell { width: calc(100% - 36px); }
  main { scroll-margin-top: 5rem; }
  section[id] { scroll-margin-top: 5rem; }

  .nav {
    height: 3.75rem;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .625rem;
  }
  .monogram { justify-self: start; }
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: transparent;
    color: var(--ink);
    font: 600 .875rem 'DM Sans', sans-serif;
    cursor: pointer;
  }
  .menu-toggle[aria-expanded="true"] { background: var(--surface); }
  .lang { min-height: 2.75rem; align-items: center; }
  .lang span { font-size: .8125rem; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    gap: .375rem;
    padding: .5rem 1.125rem .75rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    box-shadow: 0 .75rem 1.5rem #24242612;
  }
  .nav-links.is-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: .5rem .25rem;
    font-size: .875rem;
    border-radius: .375rem;
  }
  .nav-links a:hover { background: var(--surface); }

  .hero-topline { gap: .625rem; padding-block: 1rem; }
  .hero-name { font-size: 1.375rem; line-height: 1.2; letter-spacing: -.035em; }
  .hero-name > span { display: block; margin: .375rem 0 0; letter-spacing: 0; }
  .hero-topline .eyebrow { gap: .625rem; line-height: 1.4; }
  .eyebrow i { flex: 0 0 .5rem; }
  .duality-band { background: none; }
  .duality { width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .portrait-stage {
    position: relative;
    height: auto;
    background: linear-gradient(90deg, var(--charcoal) 50%, var(--ivory) 50%);
  }
  .portrait-stage img {
    width: min(100%, 20rem);
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .portrait-labels {
    position: absolute;
    bottom: .75rem;
    display: flex;
    justify-content: space-between;
    width: min(100%, 20rem);
    padding-inline: .75rem;
    pointer-events: none;
  }
  .portrait-labels span {
    padding: .5rem .75rem;
    border-radius: .25rem;
    font: 800 .875rem/1 'Manrope', sans-serif;
    letter-spacing: .08em;
  }
  .portrait-dev { background: var(--charcoal); color: #faf8f4; border: 1px solid #777; }
  .portrait-cto { background: var(--ivory); color: #252426; border: 1px solid #bcb4aa; }
  .identity-side {
    align-self: stretch;
    padding: 1rem max(1.125rem, calc((100vw - 34rem) / 2));
  }
  .geek-side { background: var(--charcoal); padding-right: .875rem; }
  .cto-side { background: var(--ivory); padding-left: .875rem; }
  .side-kicker { margin: 0 0 .5rem; font-size: .875rem; letter-spacing: .015em; }
  .identity-side h2 {
    min-height: 4.75rem;
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    line-height: 1.08;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
  }
  .role-detail { margin-top: .375rem; line-height: 1.45; font-size: .875rem; }
  .tech-orbit { display: none; }
  .hero-bottom { padding-block: .875rem; }
  .hero-bottom .hero-actions { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .625rem; }
  .hero-bottom .btn { min-height: 3.125rem; padding: .75rem; font-size: .9375rem; }

  .proof { flex-direction: column; align-items: stretch; gap: .625rem; padding-block: 1.125rem; }
  .proof > span { font-size: .75rem; letter-spacing: .08em; }
  .proof div { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; }
  .proof b { font-size: .875rem; }

  .case, .experience, .contact { padding-block: 3.5rem; }
  .section-head .index, .index { margin-bottom: 1rem; font-size: .8125rem; letter-spacing: .08em; }
  .section-head h2 { font-size: clamp(2.75rem, 12vw, 4rem); }
  .section-head > p { margin-top: 1.25rem; font-size: 1rem; line-height: 1.65; }
  .section-head.compact h2, .contact h2 {
    font-size: clamp(2rem, 8.5vw, 3rem);
    line-height: 1.12;
    letter-spacing: -.045em;
    overflow-wrap: anywhere;
  }
  .case-meta { margin-top: 1.75rem; }
  .case-meta div { padding: 1rem 0; min-width: 0; }
  .case-meta div:last-child { border-bottom: 0; }
  .case-meta small { font-size: .8125rem; letter-spacing: .06em; margin-bottom: .375rem; }
  .case-meta b { font-size: .9375rem; line-height: 1.6; }

  .showcase { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; margin-top: 2rem; }
  .mockup-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 1;
    gap: 1.5rem;
    width: 100%;
    min-width: 0;
    padding: 0;
  }
  .mockup-gallery .phone {
    flex: none;
    width: min(100%, 20rem);
    min-width: 0;
    border: 4px solid #494744;
    border-radius: 1.25rem;
    transform: none;
    box-shadow: none;
  }
  .mockup-gallery .phone img { width: 100%; height: auto; object-fit: contain; }
  .case-story { padding: 0; min-width: 0; }
  .tag { font-size: .8125rem; letter-spacing: .08em; }
  .case-story h3 { font-size: clamp(1.875rem, 7.5vw, 2.5rem); line-height: 1.15; margin: 1rem 0; }
  .case-story > p { font-size: 1rem; line-height: 1.65; }
  .case-story ul { margin-top: 1.5rem; }
  .case-story li { gap: .875rem; padding-block: 1rem; }
  .case-story li > b { font-size: .875rem; }
  .case-story li > span { min-width: 0; }
  .case-story small { font-size: .875rem; line-height: 1.5; }
  .dashboard-shot { margin-top: 2.5rem; padding: .5rem; border-radius: 1rem; }
  .dashboard-shot img { height: auto; max-height: none; border-radius: .625rem; object-fit: contain; }
  .shot-caption { display: block; padding: .875rem .5rem .5rem; }
  .shot-caption span { font-size: .75rem; letter-spacing: .06em; }
  .shot-caption b { display: block; margin-top: .375rem; text-align: left; font-size: .9375rem; line-height: 1.5; }
  .confidential { font-size: .8125rem; text-align: left; line-height: 1.6; margin-top: 1rem; }

  .timeline { margin-top: 2rem; }
  .timeline article { grid-template-columns: 1fr; gap: .5rem; padding-block: 1.25rem; }
  .timeline article:hover { padding-inline: 0; background: transparent; }
  .timeline time { font-size: .875rem; }
  .timeline h3 { font-size: 1.1875rem; }
  .timeline p { font-size: 1rem; }
  .timeline article > span { display: block; text-align: left; font-size: .875rem; line-height: 1.5; }
  .contact p { margin-block: 1.25rem; font-size: 1rem; line-height: 1.65; }
  .contact a { gap: .75rem; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
  .contact a b { flex-shrink: 0; font-size: 1.5rem; }
  footer { flex-wrap: wrap; gap: .5rem 1rem; padding-block: 1.25rem; font-size: .875rem; }
}

@media (max-width: 360px) {
  .identity-side { padding-inline: .875rem; }
  .side-kicker { font-size: .8125rem; }
  .hero-topline .eyebrow { font-size: .8125rem; }
  .hero-bottom .btn { font-size: .875rem; }
}