/* Shared phone/tablet layout � light & dark (uses theme tokens).
   Load AFTER page <style> blocks so these overrides win. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img,
video,
svg,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

/* ---- Tablet & below ---- */
@media (max-width: 968px) {
  .wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .nav-inner {
    padding: 14px 20px !important;
    gap: 12px;
  }

  .logo {
    font-size: 16px !important;
    gap: 8px !important;
    min-width: 0;
  }

  .logo-mark {
    width: 26px !important;
    height: 26px !important;
  }

  .nav-right {
    gap: 10px !important;
    align-items: center !important;
  }

  /* Hamburger: thick rounded bars, narrower, aligned with theme toggle */
  .theme-icon-btn,
  .menu-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .menu-toggle {
    position: relative !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary) !important;
  }

  .menu-toggle span,
  .menu-toggle::before,
  .menu-toggle::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    width: 16px !important;
    height: 2.5px !important;
    margin-left: -8px !important;
    border-radius: 999px !important;
    background: currentColor !important;
  }

  .menu-toggle span {
    top: 50% !important;
    margin-top: -1.25px !important;
  }

  .menu-toggle::before {
    top: calc(50% - 6px) !important;
    margin-top: -1.25px !important;
  }

  .menu-toggle::after {
    top: calc(50% + 6px) !important;
    margin-top: -1.25px !important;
  }

  .nav-links {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 40px !important;
  }

  .section-head p {
    max-width: 100% !important;
  }

  .case-content {
    padding: 28px 22px !important;
  }

  .case-content h3 {
    font-size: clamp(22px, 6vw, 28px) !important;
  }

  /* Metrics: stay content-sized in a row (max 3); wrap only when >3 */
  .case-stats {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 12px !important;
    align-items: stretch;
  }

  .case-stat {
    flex: 0 1 auto !important;
    width: max-content;
    max-width: calc((100% - 24px) / 3);
    min-width: 0;
    box-sizing: border-box;
  }

  .case-tags {
    gap: 8px !important;
    margin-bottom: 20px !important;
  }

  .work-page,
  .case-hero,
  .back-bar {
    padding-left: 0;
  }

  .back-bar {
    padding-top: 96px !important;
  }

  .work-page {
    padding-top: 120px !important;
  }

  .case-banner {
    height: min(240px, 42vw) !important;
    min-height: 180px;
  }

  .case-meta-item {
    max-width: 100% !important;
  }

  .two-col,
  .ms-grid,
  .kpi-grid,
  .impact-grid,
  .quote-grid,
  .challenge-duo,
  .explore-grid,
  .explore-grid--2,
  .explore-grid--3,
  .ba-compare-grid,
  .ba-flow-grid,
  .ba-checkout-layout,
  .explore-card-row,
  .explore-card-row--2,
  .explore-card-row--4 {
    grid-template-columns: 1fr !important;
  }

  .footer-statement {
    white-space: normal !important;
    font-size: clamp(24px, 7vw, 40px) !important;
  }

  .btn {
    white-space: normal;
    max-width: 100%;
  }

  .case-hero h1,
  .prose,
  .chapter-head,
  .eyebrow:not(.eyebrow-lg) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .quote-board .quote-card,
  .quote-board .quote-card--sm,
  .quote-board .quote-card--md,
  .quote-board .quote-card--lg {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  pre,
  code {
    max-width: 100%;
    overflow-x: auto;
  }

  footer {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
  }

  .footer-contact {
    gap: 10px !important;
  }

  /* Tablet+: CTAs keep intrinsic size (not full-bleed) */
  .footer-contact-btn,
  .hero-cta .btn,
  .btn,
  .case-link,
  .work-all-link {
    width: auto !important;
    max-width: max-content;
    flex: 0 0 auto !important;
  }

  .hero-cta {
    width: auto;
    align-items: flex-start;
  }

  .timeline-shell {
    margin-left: -20px !important;
    margin-right: -20px !important;
  }

  .timeline-scroll {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .t-item {
    flex: 0 0 min(280px, 78vw) !important;
    padding-right: 20px !important;
  }

  .resume-sheet {
    padding: 28px 18px !important;
    border-radius: 14px !important;
  }

  .util-bar {
    padding-top: 100px !important;
  }

  .r-role-head,
  .r-brief-head,
  .r-edu-head {
    flex-direction: column !important;
    gap: 4px !important;
  }

  /* Tablet hero: same structure as laptop � copy left, imagery right */
  .hero {
    min-height: 78vh !important;
    padding-top: 120px !important;
    padding-bottom: 64px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .hero .wrap {
    order: unset;
    gap: 28px !important;
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 2;
  }

  .hero-visual {
    position: absolute !important;
    left: auto !important;
    right: -2% !important;
    top: 52% !important;
    transform: translateY(-50%) !important;
    order: unset;
    width: min(46vw, 420px) !important;
    height: min(54vw, 500px) !important;
    aspect-ratio: auto;
    margin: 0 !important;
    opacity: 1;
    z-index: 1;
  }

  .hero-top {
    max-width: min(48%, 440px) !important;
  }

  .hero-copy .eyebrow.eyebrow-lg {
    white-space: nowrap !important;
    font-size: clamp(11px, 1.55vw, 14px) !important;
    letter-spacing: 0.08em !important;
    overflow: visible;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  .hero-manifest {
    font-size: clamp(22px, 3.2vw, 28px) !important;
    white-space: normal !important;
    flex-wrap: wrap !important;
    row-gap: 4px;
  }

  .hero-word-rotate {
    min-width: 0 !important;
    max-width: 100%;
  }

  .hero-name {
    font-size: clamp(30px, 4.5vw, 48px) !important;
  }

  .hero-sub,
  .hero-ai {
    font-size: 15px !important;
    max-width: 100% !important;
  }

  .hero-scope {
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 10px 0 !important;
    padding: 14px 16px !important;
    max-width: min(52%, 520px);
  }

  .hero-scope-item {
    flex: 1 1 100% !important;
    white-space: normal !important;
  }

  .hero-scope-sep {
    display: none !important;
  }

  .diagram {
    height: auto !important;
    min-height: 240px;
  }

  .expertise-card {
    padding: 24px 18px 28px !important;
  }

  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---- Phones ---- */
@media (max-width: 560px) {
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .nav-inner {
    padding: 12px 16px !important;
  }

  .case-content {
    padding: 22px 16px !important;
  }

  .case-stats {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .case-stat {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .case-stat .stat-num {
    font-size: 22px !important;
  }

  /* Phone hero: stack copy above imagery */
  .hero {
    min-height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: visible !important;
  }

  .hero .wrap {
    order: 1;
  }

  .hero-visual {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    order: 2;
    width: min(92vw, 300px) !important;
    height: auto !important;
    aspect-ratio: 480 / 560;
    margin: 12px auto 0 !important;
  }

  .hero-top,
  .hero-scope {
    max-width: 100% !important;
  }

  .hero-copy .eyebrow.eyebrow-lg {
    white-space: nowrap !important;
    font-size: clamp(10.5px, 2.7vw, 12.5px) !important;
    letter-spacing: 0.06em !important;
  }

  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .hero-cta .btn,
  .footer-contact-btn {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    justify-content: center;
    text-align: center;
  }

  .btn {
    min-height: 44px;
  }

  .lightbox-prev,
  .lightbox-next {
    width: 44px;
    height: 44px;
  }

  /* Career timeline: vertical stack on phone (light + dark) */
  .timeline-shell {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .timeline-shell::after {
    display: none !important;
  }

  .timeline-scroll {
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 0 !important;
  }

  .timeline {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    --timeline-axis: 0px;
    padding-left: 22px;
  }

  .timeline::before {
    left: 4px !important;
    right: auto !important;
    top: 6px !important;
    bottom: 6px !important;
    width: 1px !important;
    height: auto !important;
    background: var(--border-strong) !important;
  }

  .t-item,
  .t-item.is-peek,
  .t-item.is-ahead,
  .t-item.is-past,
  .t-item.in-view {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 28px 18px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .t-item:last-child {
    padding-bottom: 0 !important;
  }

  .t-item::before {
    left: -22px !important;
    top: 6px !important;
    transform: none !important;
    background: var(--bg) !important;
    border-color: var(--accent) !important;
  }

  .t-item.active::before {
    background: var(--accent) !important;
  }

  .t-item p {
    max-width: 100% !important;
  }
}

/* Touch: avoid hover-only transforms that feel sticky */
@media (hover: none) {
  .case-card:hover {
    transform: none;
  }

  .footer-contact-btn:hover {
    transform: none;
  }
}

/* Dark theme: ensure mobile menu/surfaces stay readable */
@media (max-width: 968px) {
  :root[data-theme="dark"] .nav-links {
    background: var(--bg-elevated) !important;
    border-bottom-color: var(--border) !important;
  }

  :root[data-theme="dark"] .case-stat {
    background: var(--surface-2);
    border-color: var(--border-strong);
  }

  :root[data-theme="dark"] .hero-scope {
    background: var(--accent-soft);
    border-color: var(--mint-soft);
  }
}