/* Mobile presentation overrides. Desktop styles and CMS content stay unchanged. */
.mobile-workspace { display: none; }

@media (max-width: 760px) {
  html { scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { font-size: 14px; }
  .container { width: calc(100% - 40px); }
  .header-inner { min-height: 68px; gap: 12px; }
  .brand { min-width: 0; gap: 10px; }
  .brand-wordmark { font-size: 17px; line-height: 1.35; }
  .brand-wordmark small { font-size: 10px; letter-spacing: .4px; margin-top: 3px; }
  .menu-toggle { width: 44px; height: 44px; flex-shrink: 0; border-radius: 8px; }
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px 20px 20px; background: var(--paper);
    border-bottom: 1px solid var(--line); box-shadow: 0 16px 22px #17283b0a;
    max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain;
  }
  .site-nav > a:not(.nav-contact) { font-size: 15px; min-height: 48px; padding: 12px 0; }
  .site-nav .nav-contact { min-height: 48px; font-size: 14px; border-radius: 6px; }
  html:not(.js) .site-nav { position: static; max-height: none; box-shadow: none; padding-inline: 0; }

  .hero-grid { gap: 28px; padding-block: 30px 24px; }
  .hero-copy > .eyebrow { font-size: 11px; letter-spacing: .3px; margin-bottom: 18px; }
  .hero h1 { font-size: clamp(29px, 8.4vw, 38px); line-height: 1.3; letter-spacing: -1px; font-weight: 750; }
  .hero-description { font-size: 14px; line-height: 1.85; margin-top: 18px; }
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
  .hero-actions .button { min-width: 0; width: 100%; min-height: 48px; justify-content: center; gap: 8px; padding: 11px 9px; font-size: 14px; border-radius: 6px; overflow-wrap: anywhere; }
  .hero-actions .button-text { border: 1px solid #cbd1d6; }
  .hero-actions .icon { width: 18px; height: 18px; }
  .hero-signature, .hero-visual > .visual-label, .hero-visual > .workbench, .hero-visual > .visual-note { display: none; }
  .hero-visual { max-width: none; }
  .hero-visual::before { display: none; }
  .mobile-workspace { display: block; padding: 18px; border: 1px solid #dce1e6; border-radius: 12px; background: #fff; box-shadow: 0 12px 28px -20px #17283b55; }
  .mobile-workspace-heading { display: flex; align-items: center; gap: 12px; }
  .mobile-workspace-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: var(--blue-light); color: var(--blue); font-size: 18px; font-weight: 750; flex-shrink: 0; }
  .mobile-workspace-heading > div { flex: 1; min-width: 0; }
  .mobile-workspace-heading p { font-size: 11px; color: var(--muted); }
  .mobile-workspace-heading h2 { font-size: 19px; line-height: 1.5; letter-spacing: -.5px; }
  .mobile-workspace-heading > .icon { width: 18px; height: 18px; color: #8693a0; }
  .mobile-workspace-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 16px; }
  .mobile-workspace-steps > span { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 38px; border: 1px solid #e7ebf1; border-radius: 6px; background: #f8f9fc; font-size: 12px; white-space: nowrap; }
  .mobile-workspace-steps .icon { width: 14px; height: 14px; color: var(--blue); }
  .mobile-workspace-note { display: flex; align-items: center; gap: 7px; font-size: 11px; line-height: 1.7; color: var(--muted); margin-top: 13px; }
  .mobile-workspace-note .tiny-dot { width: 5px; height: 5px; }
  .hero-bottom { font-size: 11px; gap: 12px; padding-bottom: 24px; }
  .hero-bottom > span { max-width: 68%; }
  .hero-bottom > a { min-height: 44px; flex-shrink: 0; }
  .custom-visual img { height: auto; max-height: 320px; object-fit: contain; }
  .custom-visual figcaption { font-size: 11px; }

  .service-strip > .container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding-block: 10px; }
  .service-strip i { display: none; }
  .service-strip span { font-size: 13px; letter-spacing: .5px; min-height: 38px; display: flex; align-items: center; justify-content: center; padding: 5px 8px; text-align: center; overflow-wrap: anywhere; }
  .service-strip span:nth-of-type(odd) { border-right: 1px solid #ffffff24; }
  .service-strip span:nth-of-type(-n+2) { border-bottom: 1px solid #ffffff24; }

  .section { padding-block: 52px; }
  .section-heading { margin-bottom: 28px; }
  .section-heading h2, .faq-heading h2, .contact-section h2 { font-size: clamp(24px, 6.9vw, 31px); line-height: 1.45; letter-spacing: -.6px; }
  .section-heading .eyebrow, .faq-heading .eyebrow { font-size: 11px; letter-spacing: .7px; margin-bottom: 12px; }
  .section-intro { font-size: 14px; line-height: 1.85; margin-top: 16px; }
  .capability-row { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-block: 24px; }
  .capability-index { gap: 12px; }
  .capability-index > span { font-size: 11px; }
  .capability-index .icon { width: 23px; height: 23px; }
  .capability-copy h3 { font-size: 21px; }
  .capability-copy p { font-size: 14px; line-height: 1.85; }
  .capability-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; font-size: 12px; }
  .capability-items li { max-width: 100%; padding: 5px 8px; background: #f7f9fc; border: 1px solid #e7ebf1; border-radius: 5px; line-height: 1.6; }
  .capability-items .icon { width: 12px; height: 12px; }

  .showcase-toolbar { gap: 12px; }
  .case-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .filter-button { justify-content: center; min-height: 44px; padding: 10px; font-size: 13px; border: 1px solid #dce0e0; border-radius: 6px; }
  .filter-button > span { font-size: 11px; }
  .filter-status { font-size: 12px; }
  .showcase-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .case-image { aspect-ratio: 1.6; }
  .case-browser-bar { height: 28px; padding-inline: 12px; }
  .case-image-overlay { inset-block-start: 28px; opacity: 1; background: transparent; padding: 10px; pointer-events: none; }
  .case-image-overlay > span { font-size: 12px; gap: 8px; padding: 7px 10px; transform: none; border: 1px solid #e2e6eb; border-radius: 5px; }
  .case-meta { gap: 12px; margin-top: 15px; align-items: center; }
  .case-meta > div { min-width: 0; }
  .case-category { font-size: 11px; }
  .case-meta h3 { font-size: 19px; line-height: 1.55; overflow-wrap: anywhere; }
  .case-preview-button { width: 44px; height: 44px; flex-shrink: 0; }
  .case-demo-link, .case-demo-unavailable { font-size: 12px; line-height: 1.8; margin-top: 8px; }
  .case-demo-link { display: inline-flex; align-items: center; min-height: 44px; }
  .showcase-footnote { font-size: 12px; line-height: 1.85; margin-top: 24px; }

  .delivery-grid, .delivery-grid--5 { grid-template-columns: minmax(0, 1fr) !important; gap: 0; }
  .delivery-step { position: relative; border-top: 0; border-left: 1px solid #536278; margin-left: 17px; padding: 0 0 30px 28px; }
  .delivery-grid--5 .delivery-step:last-child { grid-column: auto; }
  .delivery-step:last-child { padding-bottom: 0; border-color: transparent; }
  .step-top { position: absolute; top: 0; left: -18px; margin: 0; }
  .step-top > span { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid #536278; border-radius: 50%; background: var(--ink); color: var(--orange); font-size: 12px; }
  .step-top > .icon { display: none; }
  .delivery-step h3 { font-size: 20px; min-height: 35px; display: flex; align-items: center; }
  .delivery-step > p { font-size: 14px; min-height: 0; line-height: 1.85; margin-top: 9px; }
  .delivery-step ul { flex-direction: row; flex-wrap: wrap; gap: 7px 14px; border: 0; padding-top: 0; margin-top: 12px; font-size: 12px; }

  .faq-grid { gap: 24px; }
  .faq-heading > p:not(.eyebrow) { font-size: 14px; line-height: 1.85; }
  .faq-heading > .text-link { font-size: 14px; min-height: 44px; margin-top: 15px; }
  .faq-item > summary { min-height: 68px; gap: 12px; padding: 18px 0; }
  .faq-number { font-size: 11px; min-width: 15px; }
  .faq-item h3 { font-size: 15px; min-width: 0; }
  .detail-toggle, .job-item .detail-toggle { width: 36px; height: 36px; flex-shrink: 0; }
  .faq-answer { font-size: 14px; line-height: 1.9; padding: 0 0 22px 27px; }
  .job-item > summary { min-height: 80px; gap: 12px; padding-block: 20px; }
  .job-heading { min-width: 0; }
  .job-heading h3 { font-size: 20px; overflow-wrap: anywhere; }
  .job-label { font-size: 10px; letter-spacing: .5px; }
  .job-location { font-size: 12px; max-width: 64px; }
  .job-summary, .job-details ul { font-size: 14px; line-height: 1.85; }
  .job-details { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .job-details h4 { font-size: 15px; }
  .job-body .button { min-height: 44px; font-size: 14px; }

  .contact-section { padding-block: 52px; }
  .contact-grid { gap: 28px; }
  .contact-section .eyebrow { font-size: 11px; letter-spacing: .7px; margin-bottom: 14px; }
  .contact-description { font-size: 14px; line-height: 1.85; margin-top: 16px; }
  .contact-link { gap: 12px; padding-block: 20px; }
  .contact-icon { width: 36px; height: 36px; }
  .contact-icon > .icon { width: 19px; height: 19px; }
  .contact-arrow { width: 18px; height: 18px; }
  .contact-link-copy small { font-size: 11px; letter-spacing: .7px; }
  .contact-link-copy strong { font-size: 19px; letter-spacing: 0; }
  .contact-link[href^="mailto:"] .contact-link-copy strong { font-size: 16px; line-height: 1.6; }
  .contact-extra { font-size: 13px; overflow-wrap: anywhere; }
  .footer-top { padding-block: 26px; gap: 14px; }
  .footer-brand .brand-wordmark { font-size: 15px; }
  .footer-brand .brand-wordmark small { font-size: 9px; }
  .footer-top-link { font-size: 12px; min-height: 44px; gap: 6px; }
  .footer-bottom { font-size: 12px; line-height: 1.8; gap: 12px; }
  .footer-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .back-to-top { width: 44px; height: 44px; right: max(14px, env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); }

  .case-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; }
  .dialog-heading { position: sticky; top: 0; z-index: 2; background: #fff; padding: 14px; gap: 10px; }
  .dialog-heading h2 { font-size: 18px; overflow-wrap: anywhere; }
  .dialog-heading .eyebrow { font-size: 10px; letter-spacing: .3px; }
  .dialog-close { width: 44px; height: 44px; }
  .dialog-image-wrap { padding: 8px; }
  .dialog-footer { padding: 16px; }
  .dialog-footer p { font-size: 13px; line-height: 1.8; }
  .dialog-footer small { font-size: 11px; }
}

@media (max-width: 360px) {
  .container { width: calc(100% - 32px); }
  .mobile-workspace { padding: 14px; }
  .mobile-workspace-steps > span { font-size: 11px; gap: 4px; }
  .mobile-workspace-steps .icon { width: 12px; height: 12px; }
  .contact-link { gap: 9px; }
  .contact-link[href^="mailto:"] .contact-link-copy strong { font-size: 14px; }
  .footer-brand .brand-wordmark small { font-size: 8px; }
}