/* Photon Nodes mobile redesign — loaded only on screens up to 820px. */
@media (max-width: 820px) {
  :root {
    --pn-bg: #09060d;
    --pn-panel: #120c1a;
    --pn-panel-2: #181021;
    --pn-line: #30213f;
    --pn-text: #f8f5fc;
    --pn-muted: #b7adbf;
    --pn-purple: #9b6cff;
    --pn-purple-strong: #7137df;
  }

  html { background: var(--pn-bg) !important; color-scheme: dark; overflow-x: hidden; }
  body { background: var(--pn-bg) !important; color: var(--pn-text) !important; overflow-x: hidden; }
  body::before { display: none !important; }

  body > header,
  .site-header,
  .topbar {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 !important;
    background: rgba(9, 6, 13, .98) !important;
    border-bottom: 1px solid var(--pn-line) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    backdrop-filter: blur(12px);
  }

  .header-inner,
  body > header > .container,
  body > header > .inner,
  .site-header > .container {
    width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 18px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .brand,
  .logo,
  .site-brand {
    min-width: 0 !important;
    margin-right: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: var(--pn-text) !important;
    text-decoration: none !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .brand img,
  .logo img,
  .site-brand img,
  body > header img {
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
    image-rendering: auto !important;
    filter: none !important;
  }

  .portal-link,
  .photon-portal-original { display: none !important; }

  .menu-button,
  .photon-global-menu {
    display: block !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    padding: 10px !important;
    margin: 0 0 0 auto !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #fff !important;
    cursor: pointer !important;
  }

  .menu-button span,
  .photon-global-menu span {
    display: block !important;
    width: 25px !important;
    height: 2px !important;
    margin: 5px auto !important;
    border-radius: 3px !important;
    background: currentColor !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }

  .menu-button.open span:nth-child(1),
  .photon-global-menu.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .menu-button.open span:nth-child(2),
  .photon-global-menu.open span:nth-child(2) { opacity: 0 !important; }
  .menu-button.open span:nth-child(3),
  .photon-global-menu.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

  #mainNav,
  #photonGlobalNav {
    display: none !important;
    position: absolute !important;
    inset: 72px 12px auto !important;
    width: auto !important;
    max-height: calc(100dvh - 88px) !important;
    padding: 10px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    border: 1px solid var(--pn-line) !important;
    border-radius: 12px !important;
    background: #100a17 !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6) !important;
    z-index: 10000 !important;
  }

  #mainNav.open,
  #photonGlobalNav.photon-mobile-open { display: flex !important; }

  #mainNav a,
  #photonGlobalNav a {
    display: block !important;
    width: 100% !important;
    padding: 13px 14px !important;
    border-radius: 7px !important;
    color: #d8cfdf !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
  }

  #mainNav a:hover,
  #mainNav a.active,
  #photonGlobalNav a:hover,
  #photonGlobalNav a.active { background: #21152e !important; color: #fff !important; }
  #mainNav .photon-mobile-portal,
  #photonGlobalNav .photon-mobile-portal { display: block !important; margin-top: 6px !important; background: var(--pn-purple-strong) !important; color: #fff !important; }

  main { width: 100% !important; max-width: none !important; background: var(--pn-bg) !important; color: var(--pn-text) !important; }
  main > section,
  .service-overview,
  .work-section,
  .process-section,
  .support-section,
  section[class*="hero"] {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 64px 22px !important;
    background: var(--pn-bg) !important;
    color: var(--pn-text) !important;
    border-radius: 0 !important;
  }

  main > section + section { border-top: 1px solid var(--pn-line) !important; }
  main > section:nth-child(even) { background: #0e0914 !important; }

  .hero,
  .section-intro,
  .service-list,
  .process-section,
  .work-section,
  .hero-grid,
  .grid,
  .grid-2,
  .two-column,
  .split,
  .form-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }

  main h1 {
    max-width: 100% !important;
    margin: 0 !important;
    color: var(--pn-text) !important;
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: 1.01 !important;
    letter-spacing: -.05em !important;
    overflow-wrap: anywhere;
  }

  main h2 {
    max-width: 100% !important;
    color: var(--pn-text) !important;
    font-size: clamp(33px, 9.5vw, 44px) !important;
    line-height: 1.06 !important;
    letter-spacing: -.04em !important;
  }

  main h3 { color: var(--pn-text) !important; font-size: 23px !important; line-height: 1.2 !important; }
  main p,
  main li,
  .hero-description,
  .section-intro > p:last-child,
  .work-copy > p:not(.section-label) {
    max-width: 680px !important;
    color: var(--pn-muted) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
  }

  .section-label { color: #b88aff !important; font-size: 12px !important; letter-spacing: .16em !important; }
  .hero-description { margin-top: 22px !important; }
  .hero-actions,
  .work-actions,
  .support-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; width: 100% !important; }
  .button,
  .hero-actions a,
  .work-actions a,
  .support-actions a { width: 100% !important; min-height: 50px !important; text-align: center !important; }

  .brand-panel,
  .service-list article,
  .work-card,
  .card,
  article {
    background: var(--pn-panel) !important;
    color: var(--pn-text) !important;
    border: 1px solid var(--pn-line) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
  }

  .service-list { border: 0 !important; }
  .service-list article { padding: 26px 22px !important; }
  .service-list article > span { color: #b88aff !important; }
  .service-list a,
  .text-link { color: #b88aff !important; }
  .process-section ol { border-color: var(--pn-line) !important; }
  .process-section li { grid-template-columns: 1fr !important; gap: 8px !important; border-color: var(--pn-line) !important; }
  .work-preview { min-height: 280px !important; padding: 28px !important; }
  .work-preview strong { font-size: 34px !important; }
  .browser-bar { background: #21172c !important; }
  .browser-bar span { color: #b7adbf !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  .support-section { background: #35126f !important; }

  img,
  video,
  iframe { max-width: 100% !important; height: auto; }
  input,
  select,
  textarea,
  button { max-width: 100%; font-size: 16px !important; }
  table { display: block; max-width: 100%; overflow-x: auto; }

  footer {
    width: 100% !important;
    margin: 0 !important;
    padding: 42px 22px 54px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    background: #07050a !important;
    color: var(--pn-text) !important;
    border-top: 1px solid var(--pn-line) !important;
  }
  footer > div { display: flex !important; flex-wrap: wrap !important; gap: 12px 20px !important; }
  footer a { color: #c9bfd1 !important; }
  footer p { color: #847a8c !important; }
}

@media (max-width: 430px) {
  .brand span,
  .site-brand span { font-size: 16px !important; }
  main > section,
  .service-overview,
  .work-section,
  .process-section,
  .support-section,
  section[class*="hero"] { padding: 54px 18px !important; }
  main h1 { font-size: clamp(40px, 11.5vw, 49px) !important; }
  main h2 { font-size: clamp(31px, 9vw, 39px) !important; }
}