/* Shared responsive enhancements across the portfolio */
:root {
  --mobile-nav-offset: 84px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.nav-toggle:hover,
.nav-toggle:focus,
.nav-toggle:focus-visible {
  transform: scale(1.05);
  outline: none !important;
  box-shadow: none;
}

.hamburger-icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  transition: transform 0.2s ease;
}

body.nav-open .hamburger-icon {
  transform: rotate(90deg);
  opacity: 0.7;
}

@media (max-width: 1200px) {

  nav,
  .page-header,
  .intro,
  .cta-section,
  .open-to,
  .markets,
  .work-wrap,
  .certs-section,
  .skills-wrap,
  .about-wrap,
  .cases-wrap,
  .recommendations,
  .contact-hero,
  .contact-card,
  .contact-side,
  .section-copy,
  .section-header,
  .origin,
  .philosophy,
  .timeline,
  .summary,
  .verticals,
  .markets-wrap,
  .diff-wrap,
  .tools-wrap,
  .categories,
  .cta-strip,
  .edu-wrap,
  .footer,
  footer {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  .intro,
  .contact-hero,
  .cs-header,
  .origin,
  .diff-inner {
    gap: 40px !important;
  }

  .stats-strip,
  .summary-row,
  .results-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .markets-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .work-grid,
  .verticals-grid,
  .open-grid,
  .categories-grid,
  .tools-grid,
  .proficiency-grid,
  .method-grid,
  .cert-grid,
  .edu-grid,
  .philosophy-grid,
  .markets-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 860px) {

  html,
  body {
    overflow-x: hidden;
  }

  body {
    cursor: auto !important;
  }

  .cursor,
  .cursor-ring {
    display: none !important;
  }

  nav {
    padding: 18px 20px !important;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
  }

  .nav-logo img {
    height: 38px !important;
  }

  .nav-logo-name,
  .nav-logo-name span:first-child,
  .nav-logo>span span:first-child {
    font-size: 15px !important;
  }

  .nav-logo-tag,
  .nav-logo>span span:last-child {
    font-size: 8px !important;
    letter-spacing: 0.16em !important;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
  }

  .nav-tagline {
    display: none !important;
  }

  .nav-links {
    display: none !important;
    width: 100%;
    order: 3;
    flex-direction: column;
    gap: 0 !important;
    list-style: none;
    margin: 0;
    padding: 12px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  body.nav-open .nav-links {
    display: flex !important;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 14px 0;
    font-size: 12px !important;
  }

  /* Hide Let's Talk on mobile - Contact link is in menu */
  .nav-cta {
    display: none !important;
  }

  /* Compact Resume button next to hamburger */
  .nav-resume {
    order: 1;
    margin-right: 8px !important;
    padding: 8px 12px !important;
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
  }

  .nav-resume i {
    font-size: 10px !important;
  }

  .hero,
  .page-header,
  .intro,
  .cta-section,
  .open-to,
  .markets,
  .markets-row,
  .work-wrap,
  .work-section,
  .certs-section,
  .skills-wrap,
  .about-wrap,
  .cases-wrap,
  .recommendations,
  .contact-hero,
  .section-copy,
  .section-header,
  .origin,
  .summary,
  .verticals,
  .markets-wrap,
  .diff-wrap,
  .tools-wrap,
  .categories,
  .cta-strip,
  .edu-wrap,
  .timeline-section,
  .philosophy,
  .education,
  .differentiator,
  .proficiency,
  .tools-section,
  .filters,
  .insights-section,
  .homepage-proof,
  .footer,
  footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .insights-grid,
  .proof-quotes {
    grid-template-columns: 1fr !important;
  }

  .hero,
  .contact-hero {
    min-height: auto !important;
    padding-top: calc(var(--mobile-nav-offset) + 24px) !important;
    padding-bottom: 32px !important;
  }

  .page-header {
    padding-top: calc(var(--mobile-nav-offset) + 28px) !important;
  }

  .hero-name,
  .hero-title,
  .page-title {
    font-size: clamp(40px, 12vw, 64px) !important;
    line-height: 0.98 !important;
  }

  .intro,
  .cs-header,
  .origin,
  .origin-layout,
  .diff-inner,
  .cta-strip {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .origin-photo {
    position: static !important;
    display: flex;
    justify-content: center;
  }

  .headshot {
    width: 240px !important;
    height: 240px !important;
  }

  .hero-ctas,
  .case-ctas,
  .cta-actions,
  .cta-strip-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .stats-strip,
  .summary-row,
  .results-strip,
  .markets-grid,
  .intro-right,
  .work-grid,
  .verticals-grid,
  .open-grid,
  .categories-grid,
  .tools-grid,
  .proficiency-grid,
  .method-grid,
  .cert-grid,
  .edu-grid,
  .philosophy-grid,
  .markets-inner,
  .form-row {
    grid-template-columns: 1fr !important;
  }

  /* =============================================
     TIMELINE SECTION - MOBILE FIX
     ============================================= */
  .timeline::before {
    left: 6px !important;
  }

  .timeline-item {
    grid-template-columns: 1fr !important;
    padding-left: 36px !important;
  }

  .timeline-item::after {
    left: 0 !important;
    top: 8px !important;
  }

  .timeline-date {
    text-align: left !important;
    padding-right: 0 !important;
    padding-bottom: 12px !important;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .timeline-year {
    font-size: 20px !important;
  }

  .timeline-period {
    margin-top: 0 !important;
  }

  .timeline-content {
    padding-left: 0 !important;
  }

  .timeline-role {
    font-size: 18px !important;
  }

  /* =============================================
     CASE STUDY BODY - MOBILE FIX
     ============================================= */
  .cs-body {
    grid-template-columns: 1fr !important;
  }

  .cs-col {
    padding: 28px 20px !important;
  }

  .cs-header {
    padding: 40px 20px 0 !important;
  }

  .cs-badge-group {
    align-items: flex-start !important;
    padding-top: 0 !important;
  }

  .cs-title {
    font-size: clamp(24px, 8vw, 40px) !important;
  }

  .cs-screenshots {
    margin-top: 24px !important;
    padding: 20px !important;
  }

  .cs-screenshots-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  .cs-screenshots-grid.cs-screenshots-3col {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .cs-screenshot-caption {
    font-size: 9px !important;
    padding: 8px !important;
  }

  /* =============================================
     CERTIFICATIONS - MOBILE FIX
     ============================================= */
  .cert-card {
    padding: 28px 20px !important;
  }

  .cert-card.featured {
    grid-column: auto !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .cert-name {
    font-size: 20px !important;
    word-wrap: break-word !important;
  }

  .cert-header {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .cert-id-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .cert-id-num {
    word-break: break-all !important;
  }

  /* =============================================
     CONTACT PAGE - MOBILE FIX
     ============================================= */
  .contact-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .hero-left {
    padding-top: 0 !important;
  }

  .contact-hero .hero-title {
    font-size: clamp(36px, 10vw, 52px) !important;
  }

  .contact-details {
    grid-template-columns: 1fr !important;
  }

  .detail-card {
    min-height: auto !important;
    padding: 16px 20px !important;
  }

  .form-card {
    padding: 24px 20px !important;
  }

  .form-title {
    font-size: 26px !important;
  }

  /* =============================================
     WORK PAGE MARKETS/VERTICALS - MOBILE FIX
     ============================================= */
  .markets-row {
    padding: 60px 20px !important;
  }

  .markets-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .verticals-grid {
    grid-template-columns: 1fr !important;
  }

  .vertical-item {
    padding: 20px !important;
  }

  .vertical-icon {
    flex-shrink: 0 !important;
  }

  .markets-headline {
    font-size: clamp(24px, 7vw, 36px) !important;
  }

  /* =============================================
     ORIGIN SECTION - MOBILE FIX
     ============================================= */
  .origin {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .origin-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .origin-photo {
    position: static !important;
    display: flex;
    justify-content: center;
  }

  .headshot {
    width: 200px !important;
    height: 200px !important;
  }

  .origin-label {
    position: static !important;
  }

  .origin-label::before {
    font-size: 36px !important;
  }

  .accent-block {
    padding: 20px !important;
    margin: 24px 0 !important;
  }

  /* =============================================
     PHILOSOPHY & EDUCATION - MOBILE FIX
     ============================================= */
  .philosophy-card,
  .edu-card {
    padding: 28px 20px !important;
  }

  .philosophy-title {
    font-size: 20px !important;
  }

  .edu-degree {
    font-size: 18px !important;
  }

  /* =============================================
     ASSESSMENT SECTION - MOBILE FIX
     ============================================= */
  .assessment {
    padding: 60px 20px !important;
  }

  .assessment-container {
    display: block !important;
  }

  .assessment-radar {
    max-width: 100% !important;
    margin-bottom: 32px !important;
    padding: 20px !important;
  }

  .radar-chart {
    max-width: 280px !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .insight-row {
    display: block !important;
  }

  .insight-card {
    margin-bottom: 12px !important;
    padding: 16px !important;
  }

  .insight-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 18px !important;
  }

  .insight-value {
    font-size: 14px !important;
  }

  .insight-desc {
    font-size: 11px !important;
  }

  .trait-tags {
    justify-content: flex-start !important;
  }

  .trait-tag {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  .assessment-download {
    display: flex !important;
    width: 100% !important;
    padding: 16px 20px !important;
    font-size: 13px !important;
    text-align: center !important;
  }

  /* =============================================
     GENERAL CARD RESETS
     ============================================= */
  [style*="grid-column:span 2"],
  [style*="grid-column: span 2"],
  .featured,
  .full,
  .category-card.full {
    grid-column: auto !important;
  }

  .stats-strip {
    position: static !important;
    margin-top: 24px;
  }

  .scroll-hint,
  .marquee-wrap,
  .hero-visual,
  .hero-pattern,
  .hero-bg,
  .hero-overlay {
    display: none !important;
  }

  .card,
  .contact-card,
  .contact-side,
  .cert-card,
  .market-item,
  .tool-item,
  .category-card,
  .work-card,
  .vertical-card,
  .open-card,
  .timeline-item,
  .edu-card,
  .philosophy-card,
  .result-card {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  nav {
    padding: 14px 16px !important;
  }

  .hero,
  .page-header,
  .intro,
  .cta-section,
  .open-to,
  .markets,
  .markets-row,
  .work-wrap,
  .work-section,
  .certs-section,
  .skills-wrap,
  .about-wrap,
  .cases-wrap,
  .recommendations,
  .contact-hero,
  .section-copy,
  .section-header,
  .origin,
  .summary,
  .verticals,
  .markets-wrap,
  .diff-wrap,
  .tools-wrap,
  .categories,
  .cta-strip,
  .edu-wrap,
  .timeline-section,
  .philosophy,
  .education,
  .differentiator,
  .proficiency,
  .tools-section,
  .case-study,
  .cs-header,
  .cs-body,
  .filters,
  .footer,
  footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-name,
  .page-title {
    font-size: clamp(34px, 11vw, 48px) !important;
  }

  .contact-hero .hero-title {
    font-size: clamp(28px, 9vw, 40px) !important;
  }

  .hero-desc,
  .hero-sub,
  .page-subtitle,
  .intro-body,
  p,
  li,
  .stat-label,
  .card-role {
    font-size: 15px !important;
  }

  .btn-primary,
  .btn-secondary,
  .nav-cta,
  button,
  input,
  textarea,
  select {
    width: 100%;
  }

  /* Timeline extra small */
  .timeline-item {
    padding-left: 28px !important;
  }

  .timeline-year {
    font-size: 18px !important;
  }

  .timeline-role {
    font-size: 16px !important;
  }

  .timeline-desc {
    font-size: 15px !important;
  }

  /* Case study extra small */
  .cs-col {
    padding: 20px 16px !important;
  }

  .cs-title {
    font-size: clamp(22px, 7vw, 32px) !important;
  }

  .result-metric {
    font-size: 20px !important;
  }

  /* Certifications extra small */
  .cert-name {
    font-size: 18px !important;
  }

  .cert-icon {
    width: 48px !important;
    height: 48px !important;
  }

  /* Contact extra small */
  .form-card {
    padding: 20px 16px !important;
  }

  .form-title {
    font-size: 22px !important;
  }

  .detail-card {
    padding: 14px 16px !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .detail-icon {
    width: 36px !important;
    height: 36px !important;
  }

  /* Results strip extra small */
  .results-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  .result-item {
    padding: 20px !important;
  }

  .result-value {
    font-size: 28px !important;
  }

  /* Filters mobile */
  .filters {
    padding: 20px 16px !important;
    position: relative !important;
    top: 0 !important;
  }

  .filter-btn {
    padding: 6px 12px !important;
    font-size: 9px !important;
  }

  /* Section headers */
  .section-headline {
    font-size: clamp(24px, 7vw, 36px) !important;
  }

  .cta-strip-headline {
    font-size: clamp(26px, 8vw, 40px) !important;
  }

  /* Philosophy and education cards */
  .philosophy-title {
    font-size: 18px !important;
  }

  .edu-degree {
    font-size: 16px !important;
  }

  /* Tools grid - 2 columns on small screens */
  .tools-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  .tool-card {
    padding: 20px 12px !important;
  }

  .icon-circle {
    width: 44px !important;
    height: 44px !important;
  }

  .tool-name {
    font-size: 11px !important;
  }
}

@media (hover: none),
(pointer: coarse) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cursor,
  .cursor-ring,
  .scroll-hint,
  .marquee-wrap {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}