/* Mobile and touch-device refinements. Desktop presentation remains unchanged. */

body { overflow-x: clip; }

@media (hover: none) {
  .button:hover,
  .work-card:hover {
    transform: none;
  }

  .work-card:hover {
    box-shadow: none;
    border-color: var(--line);
  }

  .role:hover {
    padding-left: 0;
  }
}

@media (max-width: 780px) {
  h2 {
    font-size: clamp(2.35rem, 10vw, 3.5rem);
    line-height: 1.04;
  }

  .hero {
    padding: 78px 0 80px;
  }

  .hero h1 {
    font-size: clamp(3rem, 13vw, 4.8rem);
    line-height: .98;
  }

  .hero-intro {
    margin-top: 24px;
    font-size: 1.03rem;
    line-height: 1.62;
  }

  .hero-actions {
    margin-top: 32px;
  }

  .work-card,
  .work-card--feature {
    min-height: auto;
    padding: 26px;
  }

  .work-content {
    padding-top: 28px;
  }

  .evidence-list {
    margin-top: 28px;
  }

  .principle {
    min-height: auto;
  }

  .principle h3 {
    margin-top: 40px;
  }

  .contact-section {
    padding: 82px 0;
  }

  .contact-layout {
    gap: 48px;
  }

  .contact-email {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .contact-email span {
    flex: 0 0 auto;
  }
}

@media (max-width: 680px) {
  .hero-proof {
    width: 100%;
    max-width: none;
    padding-top: 0;
  }

  .hero-proof::before {
    width: min(100%, 340px);
    margin: 0 auto 30px;
    background-position: 50% 30%;
  }

  .hero-proof::after {
    display: none;
  }
}

@media (max-width: 520px) {
  .container {
    width: min(calc(100% - 28px), var(--container));
  }

  .section {
    padding: 70px 0;
  }

  .nav {
    min-height: 64px;
    gap: 12px;
  }

  .brand {
    min-width: 0;
    gap: 9px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    font-size: .76rem;
  }

  .brand-copy {
    min-width: 0;
  }

  .brand-copy strong {
    white-space: nowrap;
    font-size: .75rem;
  }

  .nav-links {
    flex: 0 0 auto;
    gap: 0;
  }

  .nav-cv {
    padding: 8px 11px;
    font-size: .72rem !important;
  }

  .hero {
    padding: 68px 0 72px;
  }

  .hero-kicker {
    margin-bottom: 24px;
    font-size: .62rem;
    line-height: 1.5;
    letter-spacing: .08em;
  }

  .status-dot {
    flex: 0 0 7px;
  }

  .hero-name {
    margin-bottom: 16px;
    font-size: .86rem;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 12.5vw, 3.3rem);
    line-height: .98;
  }

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

  .hero-actions {
    gap: 18px;
  }

  .impact-item {
    padding: 26px 24px;
  }

  .work-card,
  .work-card--feature {
    padding: 24px;
  }

  .work-topline {
    align-items: flex-start;
  }

  .principle {
    padding: 24px;
  }

  .principle h3 {
    margin-top: 34px;
  }

  .role {
    gap: 8px 14px;
  }

  .contact-section {
    padding: 70px 0;
  }

  .contact-layout {
    gap: 38px;
  }

  .contact-email {
    gap: 10px;
    font-size: 1.02rem;
  }

  .contact-secondary {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}

@media (max-width: 360px) {
  .brand-mark {
    display: none;
  }

  .brand-copy strong {
    font-size: .72rem;
  }

  .hero h1 {
    font-size: 2.7rem;
  }
}