/* v64 responsive mobile rebuild — develop only */
@media (max-width:900px){

  :root{
    --m-pad:20px;
    --m-gap:18px;
    --m-radius:18px;
    --m-header:64px;
  }

  html{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
  }

  body{
    width:100%;
    max-width:100%;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    background:#07101c;
  }

  body *{
    min-width:0;
  }

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

  /* ---------- mobile header ---------- */
  .header{
    position:sticky!important;
    top:0!important;
    z-index:1000!important;
    width:100%!important;
    height:var(--m-header)!important;
    min-height:var(--m-header)!important;
    background:rgba(7,16,28,.92)!important;
    backdrop-filter:blur(18px) saturate(120%);
    -webkit-backdrop-filter:blur(18px) saturate(120%);
    border-bottom:1px solid rgba(126,146,255,.08)!important;
  }

  .header-inner{
    width:100%!important;
    max-width:none!important;
    height:var(--m-header)!important;
    min-height:var(--m-header)!important;
    padding:0 16px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }

  .brand{
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    min-width:0!important;
  }

  .brand-logo{
    flex:0 0 auto!important;
    font-size:29px!important;
    line-height:1!important;
  }

  .brand-rule{height:30px!important}

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

  .brand-copy b{
    display:block!important;
    font-size:12px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .brand-copy span{
    display:block!important;
    margin-top:3px!important;
    font-size:6.5px!important;
    letter-spacing:.14em!important;
    white-space:nowrap!important;
  }

  .header-link{display:none!important}

  .mobile-sections-btn{
    display:grid!important;
    place-items:center!important;
    flex:0 0 40px!important;
    width:40px!important;
    height:40px!important;
    padding:0!important;
    border-radius:12px!important;
    background:rgba(18,36,65,.82)!important;
  }

  .menu-lines{gap:4px!important}
  .menu-lines i{width:16px!important}

  /* ---------- kill desktop slideshow geometry ---------- */
  .desktop-sidebar,
  .mobile-side-rail,
  .mobile-section-indicator,
  .mobile-bottom-nav{
    display:none!important;
  }

  .workspace,
  .stage{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    transform:none!important;
  }

  .screen,
  #home,#systems,#expertise,#process,#about,#contact{
    display:block!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:64px var(--m-pad)!important;
    overflow:hidden!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  #home{padding-top:44px!important}

  .screen + .screen{
    border-top:1px solid rgba(126,146,255,.06)!important;
  }

  .screen-inner,
  .home-grid,
  .systems-layout,
  .project-workspace,
  .project-detail,
  .expertise-grid,
  .expertise-list,
  .expertise-detail,
  .process-track,
  .about-grid,
  .about-visual,
  .contact-grid,
  .contact-form{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin-left:0!important;
    margin-right:0!important;
    overflow:visible!important;
    transform:none!important;
  }

  .screen-inner{
    position:relative!important;
    z-index:2!important;
  }

  /* ---------- responsive type ---------- */
  .eyebrow,
  .section-kicker{
    margin:0 0 10px!important;
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:.16em!important;
  }

  .title,
  #home .title,
  .section-head .title,
  #systems .section-head .title,
  #expertise .section-head .title,
  #process .section-head .title,
  #about .section-head .title,
  #contact .section-head .title{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    font-size:clamp(36px,10vw,45px)!important;
    line-height:1.00!important;
    letter-spacing:-.035em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }

  .title *,
  .section-head .title *{
    white-space:normal!important;
  }

  .copy,
  .section-head p{
    width:100%!important;
    max-width:100%!important;
    font-size:15px!important;
    line-height:1.55!important;
  }

  .section-head{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 24px!important;
  }

  /* ---------- HOME ---------- */
  #home .home-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:24px!important;
  }

  #home .home-copy{
    width:100%!important;
    padding:0!important;
  }

  #home .home-stack{
    margin-top:14px!important;
    font-size:9px!important;
    line-height:1.45!important;
  }

  #home .btn-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:20px!important;
  }

  #home .btn{
    width:100%!important;
    min-height:48px!important;
    padding:13px 15px!important;
    font-size:10px!important;
    border-radius:13px!important;
  }

  #home .home-proof{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
  }

  #home .home-card{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  #home .windowbar{height:22px!important}

  #home .home-card img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
  }

  #home .home-open{
    display:none!important;
  }

  #home .home-caption{
    padding:14px 15px 16px!important;
  }

  #home .home-caption h3{
    margin:5px 0!important;
    font-size:18px!important;
    line-height:1.2!important;
  }

  #home .home-caption p{
    font-size:12px!important;
    line-height:1.45!important;
  }

  #home .home-caption span{
    font-size:7px!important;
  }

  /* Remove old swipe cue; mobile now scrolls naturally */
  #home .swipe-cue,
  #home [class*="swipe"]{
    display:none!important;
  }

  /* ---------- SYSTEMS ---------- */
  #systems .systems-layout,
  #systems .project-workspace,
  #systems .project-detail{
    display:block!important;
  }

  #systems .project-selector{
    width:calc(100% + 20px)!important;
    max-width:none!important;
    margin:0 -20px 18px 0!important;
    padding:2px 20px 10px 0!important;
    display:flex!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    touch-action:pan-x!important;
  }

  #systems .project-selector::-webkit-scrollbar,
  #systems .thumb-row::-webkit-scrollbar{display:none}

  #systems .project-select{
    flex:0 0 min(86%,340px)!important;
    width:auto!important;
    min-height:74px!important;
    padding:12px!important;
    display:grid!important;
    grid-template-columns:38px 1fr!important;
    align-items:center!important;
    gap:10px!important;
    border-radius:16px!important;
    scroll-snap-align:start!important;
  }

  #systems .project-select>span{
    width:38px!important;
    height:38px!important;
  }

  #systems .project-select b{
    font-size:12px!important;
    line-height:1.2!important;
    white-space:normal!important;
  }

  #systems .project-select small{
    font-size:7px!important;
    line-height:1.3!important;
  }

  #systems .selector-hint{display:none!important}

  #systems .project-visual{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 14px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  #systems .project-image-wrap{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/10!important;
    overflow:hidden!important;
    background:#f4f6fa!important;
  }

  #systems #projectImage{
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    object-fit:contain!important;
  }

  #systems .view-area{
    width:100%!important;
    padding:12px!important;
    overflow:hidden!important;
  }

  #systems .view-label{
    margin-bottom:8px!important;
    font-size:8px!important;
  }

  #systems .view-label small{display:none!important}

  #systems .thumb-row{
    display:flex!important;
    gap:8px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding-bottom:2px!important;
    touch-action:pan-x!important;
  }

  #systems .thumb{
    flex:0 0 auto!important;
    min-width:74px!important;
    padding:9px 12px!important;
    font-size:8px!important;
    border-radius:11px!important;
  }

  #systems .case-panel{
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:14px 0 0!important;
    padding:18px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  #systems .case-panel h3{
    margin:7px 0 12px!important;
    font-size:24px!important;
    line-height:1.12!important;
    overflow-wrap:anywhere!important;
  }

  #systems .case-block{
    padding:12px 0!important;
  }

  #systems .case-block p{
    margin:5px 0 0!important;
    font-size:13px!important;
    line-height:1.5!important;
    overflow-wrap:anywhere!important;
  }

  #systems .case-block span,
  #systems .case-kicker{
    font-size:8px!important;
    letter-spacing:.14em!important;
  }

  #systems .tag-row{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
  }

  #systems .tag-row span{
    font-size:7px!important;
    padding:5px 7px!important;
  }

  /* ---------- EXPERTISE ---------- */
  #expertise .expertise-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
  }

  #expertise .expertise-list{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:0!important;
  }

  #expertise .expertise-item{
    width:100%!important;
    min-height:102px!important;
    padding:14px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    gap:7px!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }

  #expertise .expertise-item i{display:none!important}

  #expertise .expertise-item .exp-icon{
    width:34px!important;
    height:34px!important;
  }

  #expertise .expertise-item b{
    font-size:11px!important;
    line-height:1.22!important;
    white-space:normal!important;
  }

  #expertise .expertise-item small{
    font-size:7px!important;
  }

  #expertise .expertise-detail{
    width:100%!important;
    padding:18px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }

  #expertise .expertise-detail h3{
    margin:7px 0 10px!important;
    font-size:25px!important;
    line-height:1.1!important;
  }

  #expertise .expertise-detail p{
    font-size:13px!important;
    line-height:1.5!important;
  }

  #expertise .expertise-outcomes{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:6px!important;
  }

  /* ---------- PROCESS ---------- */
  #process .process-track{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    margin:0!important;
  }

  #process .process-step{
    width:100%!important;
    min-height:0!important;
    padding:16px!important;
    display:grid!important;
    grid-template-columns:44px 1fr!important;
    grid-template-rows:auto auto!important;
    gap:5px 12px!important;
    align-items:start!important;
    text-align:left!important;
    border-radius:17px!important;
    background:rgba(12,26,47,.62)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.12)!important;
    overflow:hidden!important;
  }

  #process .process-num{
    grid-row:1/3!important;
    width:44px!important;
    height:44px!important;
    margin:0!important;
  }

  #process .process-step h3{
    margin:3px 0 0!important;
    font-size:16px!important;
    line-height:1.2!important;
  }

  #process .process-reveal{
    grid-column:2!important;
    width:100%!important;
    max-height:none!important;
    opacity:1!important;
    transform:none!important;
    overflow:visible!important;
  }

  #process .process-reveal p{
    margin:5px 0 0!important;
    font-size:12px!important;
    line-height:1.48!important;
  }

  #process .process-hint{display:none!important}

  /* ---------- ABOUT ---------- */
  #about .about-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:22px!important;
  }

  #about .about-grid>div:first-child{
    order:1!important;
    display:block!important;
  }

  #about .about-visual{
    order:2!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }

  #about .authority-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:18px!important;
  }

  #about .authority-row>div{
    width:100%!important;
    padding:12px 0!important;
  }

  #about .authority-row strong{
    font-size:11px!important;
  }

  #about .authority-row span{
    font-size:9px!important;
    line-height:1.45!important;
  }

  #about .about-flow{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:9px!important;
  }

  #about .about-flow>i{display:none!important}

  #about .about-flow>div{
    width:100%!important;
    min-height:0!important;
    padding:14px!important;
    border-radius:15px!important;
  }

  #about .quote{
    width:100%!important;
    margin:0!important;
    padding:18px!important;
    border-radius:18px!important;
  }

  #about .quote strong{
    font-size:27px!important;
    line-height:1.08!important;
  }

  #about .quote span{
    font-size:9px!important;
  }

  /* ---------- CONTACT ---------- */
  #contact .contact-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:22px!important;
  }

  #contact .contact-socials{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:18px!important;
  }

  #contact .upwork-outline,
  #contact .linkedin-subtle{
    width:100%!important;
    min-height:52px!important;
    border-radius:13px!important;
  }

  #contact .contact-form{
    width:100%!important;
    padding:18px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    border-radius:18px!important;
    background:
      radial-gradient(circle at 90% 0,rgba(102,83,255,.12),transparent 30%),
      linear-gradient(180deg,rgba(15,31,58,.96),rgba(10,22,42,.96))!important;
    overflow:hidden!important;
  }

  #contact .form-heading h3{
    margin:6px 0!important;
    font-size:24px!important;
    line-height:1.12!important;
  }

  #contact .form-heading p{
    font-size:12px!important;
    line-height:1.5!important;
  }

  #contact .form-row{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  #contact .contact-form label{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    gap:7px!important;
  }

  #contact .contact-form label>span{
    font-size:9px!important;
  }

  #contact .contact-form input,
  #contact .contact-form textarea{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    font-size:16px!important; /* prevents iOS zoom */
    border-radius:12px!important;
  }

  #contact .contact-form input{
    min-height:50px!important;
    padding:13px!important;
  }

  #contact .contact-form textarea{
    min-height:140px!important;
    padding:13px!important;
    line-height:1.45!important;
    resize:vertical!important;
  }

  #contact .form-submit{
    width:100%!important;
    min-height:52px!important;
    border-radius:12px!important;
    font-size:11px!important;
  }

  /* ---------- decorative layers stay behind content ---------- */
  #home::before,#systems::before,#expertise::before,#process::before,#about::before,#contact::before,
  #home::after,#systems::after,#expertise::after,#process::after,#about::after,#contact::after{
    pointer-events:none!important;
    z-index:0!important;
  }

  /* ---------- mobile drawer ---------- */
  .mobile-sections-sheet{
    position:fixed!important;
    inset:0!important;
    z-index:2000!important;
  }

  .mobile-sheet-panel{
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - 24px)!important;
    overflow:auto!important;
    padding:16px!important;
    border-radius:20px!important;
  }

  .mobile-sheet-list button{
    min-height:54px!important;
  }
}

@media (max-width:420px){
  :root{--m-pad:17px}
  .title,
  #home .title,
  .section-head .title{
    font-size:clamp(34px,9.6vw,41px)!important;
  }

  #expertise .expertise-list{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:360px){
  :root{--m-pad:15px}
  .brand-copy b{font-size:11px!important}
  .brand-copy span{font-size:6px!important}
}


/* v65 mobile engagement / narrative continuity */
@media (max-width:900px){
  .screen{
    scroll-margin-top:72px;
  }

  .screen-inner > *{
    position:relative;
    z-index:2;
  }

  .mobile-continuation{
    margin-top:28px;
    padding:16px 0 2px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-top:1px solid rgba(126,146,255,.08);
  }

  .mobile-continuation-copy{
    min-width:0;
  }

  .mobile-continuation-kicker{
    display:block;
    margin-bottom:5px;
    color:#667b9f;
    font-size:7px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  .mobile-continuation-text{
    display:block;
    color:#b8c4d8;
    font-family:"Playfair Display",Georgia,serif;
    font-size:16px;
    line-height:1.18;
  }

  .mobile-continuation-btn{
    flex:0 0 42px;
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,rgba(91,79,240,.94),rgba(60,127,228,.94));
    color:#fff;
    font-size:18px;
    cursor:pointer;
    box-shadow:
      0 10px 26px rgba(0,0,0,.18),
      0 0 22px rgba(89,105,255,.14);
    animation:continuationFloat 3.6s ease-in-out infinite;
  }

  @keyframes continuationFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(3px)}
  }

  /* Reveal-on-scroll: subtle, no gimmicks */
  .mobile-reveal{
    opacity:0;
    transform:translateY(18px);
    transition:
      opacity .52s cubic-bezier(.2,.7,.2,1),
      transform .52s cubic-bezier(.2,.7,.2,1);
  }

  .mobile-reveal.is-visible{
    opacity:1;
    transform:none;
  }

  /* Give each section a slightly different atmosphere */
  #home{
    background:
      radial-gradient(circle at 88% 8%,rgba(116,92,255,.11),transparent 28%),
      transparent;
  }

  #systems{
    background:
      linear-gradient(180deg,rgba(9,20,36,.08),rgba(10,22,42,.34)),
      transparent;
  }

  #expertise{
    background:
      radial-gradient(circle at 8% 26%,rgba(79,119,255,.07),transparent 26%),
      transparent;
  }

  #process{
    background:
      linear-gradient(180deg,rgba(16,29,55,.18),rgba(7,16,28,0)),
      transparent;
  }

  #about{
    background:
      radial-gradient(circle at 92% 18%,rgba(137,93,255,.08),transparent 28%),
      transparent;
  }

  #contact{
    background:
      radial-gradient(circle at 50% 12%,rgba(87,121,255,.07),transparent 30%),
      transparent;
  }

  @media (prefers-reduced-motion: reduce){
    .mobile-continuation-btn{animation:none}
    .mobile-reveal{
      opacity:1;
      transform:none;
      transition:none;
    }
  }
}


/* v66 sticky story navigator — replaces end-of-section hooks */
@media (max-width:900px){
  .mobile-continuation{
    display:none!important;
  }

  .mobile-story-nav{
    position:fixed;
    left:12px;
    right:12px;
    bottom:max(12px, env(safe-area-inset-bottom));
    z-index:1800;
    min-height:58px;
    padding:9px 10px 9px 13px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    border-radius:17px;
    background:rgba(8,18,33,.88);
    backdrop-filter:blur(20px) saturate(125%);
    -webkit-backdrop-filter:blur(20px) saturate(125%);
    box-shadow:
      0 16px 42px rgba(0,0,0,.28),
      inset 0 0 0 1px rgba(125,145,255,.07),
      0 0 28px rgba(82,99,255,.06);
  }

  .mobile-story-meta{
    min-width:0;
  }

  .mobile-story-current{
    display:block;
    color:#aebbd0;
    font-size:9px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mobile-story-progress{
    position:relative;
    width:100%;
    height:2px;
    margin-top:8px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(128,146,190,.13);
  }

  .mobile-story-progress i{
    display:block;
    width:16.66%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#9a6cff,#5aa6ff);
    box-shadow:0 0 12px rgba(105,118,255,.40);
    transition:width .32s ease;
  }

  .mobile-story-next{
    min-width:112px;
    min-height:42px;
    padding:7px 10px 7px 12px;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:8px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,rgba(88,77,237,.96),rgba(57,122,224,.96));
    color:#fff;
    text-align:left;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(53,72,190,.20);
  }

  .mobile-story-next span{
    grid-column:1;
    grid-row:1;
    font-size:6.5px;
    line-height:1;
    letter-spacing:.12em;
    text-transform:uppercase;
    opacity:.72;
  }

  .mobile-story-next b{
    grid-column:1;
    grid-row:2;
    margin-top:2px;
    font-size:10px;
    line-height:1.1;
  }

  .mobile-story-next i{
    grid-column:2;
    grid-row:1/3;
    font-style:normal;
    font-size:16px;
    line-height:1;
  }

  .mobile-story-next.is-final{
    background:rgba(28,45,72,.88);
    color:#93a6c3;
    cursor:default;
  }

  /* Make sure content never hides behind the sticky navigator */
  #contact{
    padding-bottom:118px!important;
  }

  .mobile-reveal{
    opacity:0;
    transform:translateY(16px);
    transition:
      opacity .48s cubic-bezier(.2,.7,.2,1),
      transform .48s cubic-bezier(.2,.7,.2,1);
  }

  .mobile-reveal.is-visible{
    opacity:1;
    transform:none;
  }

  @media (prefers-reduced-motion: reduce){
    .mobile-reveal{
      opacity:1;
      transform:none;
      transition:none;
    }
    .mobile-story-progress i{
      transition:none;
    }
  }
}


/* v67 — simple mobile navigation: sticky section tabs */
@media(max-width:900px){
  .mobile-story-nav,
  .mobile-continuation,
  .mobile-sections-btn,
  .mobile-sections-sheet,
  .mobile-bottom-nav,
  .mobile-side-rail,
  .mobile-section-indicator,
  .mobile-section-nav{
    display:none!important;
  }

  .mobile-tabs-nav{
    position:sticky;
    top:64px;
    z-index:950;
    width:100%;
    height:46px;
    display:flex;
    align-items:center;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:6px 14px;
    background:rgba(7,16,28,.94);
    backdrop-filter:blur(18px) saturate(120%);
    -webkit-backdrop-filter:blur(18px) saturate(120%);
    border-bottom:1px solid rgba(126,146,255,.08);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-tabs-nav::-webkit-scrollbar{display:none}

  .mobile-tabs-nav button{
    flex:0 0 auto;
    min-height:34px;
    padding:8px 12px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#7385a3;
    font-size:9px;
    font-weight:600;
    white-space:nowrap;
    cursor:pointer;
    transition:
      color .18s ease,
      background .18s ease,
      box-shadow .18s ease;
  }

  .mobile-tabs-nav button.active{
    color:#fff;
    background:linear-gradient(135deg,rgba(88,77,237,.86),rgba(57,122,224,.82));
    box-shadow:0 6px 18px rgba(65,83,210,.16);
  }

  .workspace{
    overflow:visible!important;
  }

  .stage{
    overflow:visible!important;
  }

  .screen,
  #home,#systems,#expertise,#process,#about,#contact{
    scroll-margin-top:118px!important;
  }

  /* Header becomes cleaner because the tabs are the navigation. */
  .header-inner{
    grid-template-columns:1fr!important;
  }

  .header-actions{
    display:none!important;
  }

  /* Remove extra bottom spacing left by the experimental bottom navigator. */
  #contact{
    padding-bottom:72px!important;
  }

  .mobile-reveal{
    opacity:0;
    transform:translateY(14px);
    transition:
      opacity .44s cubic-bezier(.2,.7,.2,1),
      transform .44s cubic-bezier(.2,.7,.2,1);
  }

  .mobile-reveal.is-visible{
    opacity:1;
    transform:none;
  }

  @media(prefers-reduced-motion:reduce){
    .mobile-reveal{
      opacity:1;
      transform:none;
      transition:none;
    }
  }
}


/* v69 — lightweight sticky mobile navigation; no layout takeover */
@media(max-width:900px){
  .mobile-tabs-nav,
  .mobile-story-nav,
  .mobile-panel-nav,
  .mobile-continuation{
    display:none!important;
  }

  .mobile-lite-nav{
    position:sticky;
    top:64px;
    z-index:900;
    height:44px;
    display:flex;
    align-items:center;
    gap:5px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:5px 12px;
    background:rgba(7,16,28,.94);
    backdrop-filter:blur(16px) saturate(120%);
    -webkit-backdrop-filter:blur(16px) saturate(120%);
    border-bottom:1px solid rgba(126,146,255,.07);
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .mobile-lite-nav::-webkit-scrollbar{display:none}

  .mobile-lite-nav a{
    flex:0 0 auto;
    padding:7px 10px;
    border-radius:9px;
    color:#7183a1;
    font-size:8.5px;
    font-weight:600;
    white-space:nowrap;
    text-decoration:none;
  }

  .mobile-lite-nav a.active{
    color:#fff;
    background:rgba(91,86,229,.22);
    box-shadow:inset 0 0 0 1px rgba(126,146,255,.06);
  }

  .screen,
  #home,#systems,#expertise,#process,#about,#contact{
    scroll-margin-top:112px!important;
  }

  /* Keep the page itself responsible for scrolling. */
  html,body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  .workspace,
  .stage{
    overflow:visible!important;
  }
}


/* v70 — fixed mobile section bar, reliable on iOS */
@media(max-width:900px){
  .mobile-lite-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:64px!important;
    z-index:990!important;
    width:100%!important;
    height:44px!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:5px 12px!important;
    background:rgba(7,16,28,.96)!important;
    backdrop-filter:blur(16px) saturate(120%)!important;
    -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
    border-bottom:1px solid rgba(126,146,255,.08)!important;
    box-shadow:0 8px 22px rgba(0,0,0,.12)!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .mobile-lite-nav::-webkit-scrollbar{display:none!important}

  .mobile-lite-nav a{
    flex:0 0 auto!important;
    padding:7px 10px!important;
    border-radius:9px!important;
    color:#7183a1!important;
    font-size:8.5px!important;
    font-weight:600!important;
    white-space:nowrap!important;
    text-decoration:none!important;
  }

  .mobile-lite-nav a.active{
    color:#fff!important;
    background:linear-gradient(135deg,rgba(88,77,237,.82),rgba(57,122,224,.78))!important;
    box-shadow:0 5px 16px rgba(65,83,210,.12)!important;
  }

  /* Reserve room below the fixed nav so it doesn't cover Home. */
  #home{
    padding-top:108px!important;
  }

  .screen,
  #systems,#expertise,#process,#about,#contact{
    scroll-margin-top:112px!important;
  }
}


/* v71 — lock mobile header + section nav into one top navigation stack */
@media(max-width:900px){
  .header{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:0!important;
    z-index:1200!important;
    height:64px!important;
    min-height:64px!important;
    margin:0!important;
  }

  .mobile-lite-nav{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:64px!important;
    z-index:1190!important;
    height:44px!important;
    margin:0!important;
  }

  .workspace{
    padding-top:108px!important;
  }

  /* Home no longer needs its own extra top compensation */
  #home{
    padding-top:44px!important;
  }
}


/* v72 — mobile storytelling pass: Home + Systems only */
@media(max-width:900px){

  /* Keep the stable navigation mechanics untouched. */
  #home,
  #systems{
    position:relative!important;
  }

  /* ---------- HOME: strong first-screen moment ---------- */
  #home{
    min-height:calc(100dvh - 108px)!important;
    padding-top:34px!important;
    padding-bottom:54px!important;
    overflow:hidden!important;
  }

  #home .home-grid{
    display:flex!important;
    flex-direction:column!important;
    gap:20px!important;
    min-height:calc(100dvh - 196px)!important;
  }

  #home .home-copy{
    max-width:560px!important;
  }

  #home .eyebrow{
    margin-bottom:10px!important;
    color:#8da0c3!important;
    font-size:8px!important;
    letter-spacing:.18em!important;
  }

  #home .title{
    max-width:660px!important;
    margin:0!important;
    font-size:clamp(42px,11.6vw,58px)!important;
    line-height:.94!important;
    letter-spacing:-.045em!important;
  }

  #home .copy{
    max-width:520px!important;
    margin-top:16px!important;
    color:#a7b4c9!important;
    font-size:14px!important;
    line-height:1.52!important;
  }

  #home .home-stack{
    margin-top:12px!important;
    color:#7890b6!important;
    font-size:8px!important;
    letter-spacing:.06em!important;
  }

  #home .btn-row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    margin-top:19px!important;
  }

  #home .btn{
    min-height:46px!important;
    padding:11px 12px!important;
    font-size:9px!important;
    border-radius:13px!important;
  }

  #home .home-proof{
    position:relative!important;
    width:calc(100% + 20px)!important;
    margin-left:0!important;
    margin-right:-20px!important;
    margin-top:auto!important;
    align-self:stretch!important;
  }

  #home .home-proof:before{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    right:-40px;
    top:-34px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(112,95,255,.16),transparent 68%);
    filter:blur(18px);
    pointer-events:none;
    z-index:-1;
  }

  #home .home-card{
    border-radius:18px 0 0 18px!important;
    box-shadow:
      0 24px 54px rgba(0,0,0,.28),
      0 0 34px rgba(79,99,255,.09)!important;
  }

  #home .home-card img{
    aspect-ratio:16/9!important;
    object-fit:cover!important;
    object-position:top center!important;
  }

  #home .home-caption{
    padding:12px 14px 14px!important;
  }

  #home .home-caption span{
    font-size:6.5px!important;
    letter-spacing:.13em!important;
  }

  #home .home-caption h3{
    margin:5px 0 4px!important;
    font-size:16px!important;
  }

  #home .home-caption p{
    font-size:9px!important;
    line-height:1.42!important;
  }

  /* ---------- SYSTEMS: visual-first, one active story ---------- */
  #systems{
    padding-top:68px!important;
    padding-bottom:70px!important;
    background:
      radial-gradient(circle at 92% 4%,rgba(111,91,255,.09),transparent 26%),
      linear-gradient(180deg,rgba(10,22,42,.16),rgba(7,16,28,0))!important;
  }

  #systems .section-head{
    margin-bottom:18px!important;
  }

  #systems .eyebrow{
    margin-bottom:9px!important;
    font-size:8px!important;
    letter-spacing:.17em!important;
  }

  #systems .section-head .title{
    margin:0!important;
    font-size:clamp(36px,9.7vw,47px)!important;
    line-height:.96!important;
    letter-spacing:-.038em!important;
  }

  #systems .project-workspace{
    display:block!important;
    width:100%!important;
  }

  #systems .project-selector{
    width:calc(100% + 20px)!important;
    margin:0 -20px 16px 0!important;
    padding:2px 20px 8px 0!important;
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  #systems .project-selector::-webkit-scrollbar{display:none!important}
  #systems .selector-hint{display:none!important}

  #systems .project-select{
    flex:0 0 78%!important;
    min-height:68px!important;
    padding:11px 12px!important;
    display:grid!important;
    grid-template-columns:34px 1fr!important;
    gap:10px!important;
    align-items:center!important;
    border-radius:15px!important;
    scroll-snap-align:start!important;
    color:#8d9db8!important;
    background:rgba(13,29,52,.72)!important;
    box-shadow:
      inset 0 0 0 1px rgba(128,148,255,.04),
      0 10px 28px rgba(0,0,0,.11)!important;
  }

  #systems .project-select.active{
    color:#fff!important;
    background:
      radial-gradient(circle at 0 0,rgba(111,93,255,.18),transparent 52%),
      rgba(16,34,61,.92)!important;
    box-shadow:
      inset 0 0 0 1px rgba(135,151,255,.08),
      0 12px 30px rgba(0,0,0,.15),
      0 0 24px rgba(83,101,255,.07)!important;
  }

  #systems .project-select>span{
    width:34px!important;
    height:34px!important;
    border-radius:10px!important;
  }

  #systems .project-select b{
    font-size:10.5px!important;
    line-height:1.2!important;
  }

  #systems .project-select small{
    margin-top:3px!important;
    font-size:6.5px!important;
  }

  #systems .project-detail{
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }

  #systems .project-visual{
    order:1!important;
    margin:0!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:#f4f6fa!important;
    box-shadow:
      0 22px 50px rgba(0,0,0,.23),
      0 0 30px rgba(84,101,255,.07)!important;
  }

  #systems .project-image-wrap{
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/10!important;
    background:#f5f7fb!important;
  }

  #systems #projectImage{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    transition:opacity .22s ease, transform .22s ease!important;
  }

  #systems .view-area{
    padding:10px!important;
    background:linear-gradient(180deg,#0e1d35,#0b182e)!important;
  }

  #systems .view-label{
    margin-bottom:7px!important;
    font-size:6.5px!important;
  }

  #systems .view-label small{display:none!important}

  #systems .thumb-row{
    display:flex!important;
    gap:6px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }

  #systems .thumb{
    flex:0 0 auto!important;
    min-width:62px!important;
    padding:7px 9px!important;
    font-size:7px!important;
    border-radius:9px!important;
  }

  #systems .case-panel{
    order:2!important;
    padding:18px!important;
    border-radius:18px!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 100% 0,rgba(101,90,255,.10),transparent 32%),
      rgba(12,26,47,.82)!important;
    box-shadow:
      0 18px 40px rgba(0,0,0,.16),
      inset 0 0 0 1px rgba(126,146,255,.04)!important;
  }

  #systems .case-kicker{
    font-size:6.5px!important;
    letter-spacing:.14em!important;
  }

  #systems .case-panel h3{
    margin:6px 0 10px!important;
    font-size:22px!important;
    line-height:1.08!important;
  }

  #systems .case-block{
    padding:9px 0!important;
  }

  #systems .case-block span{
    font-size:6.5px!important;
    letter-spacing:.12em!important;
  }

  #systems .case-block p{
    margin-top:4px!important;
    font-size:10px!important;
    line-height:1.46!important;
  }

  #systems .tag-row{
    margin-top:10px!important;
    gap:5px!important;
  }

  #systems .tag-row span{
    padding:5px 7px!important;
    font-size:6.5px!important;
  }

  #systems .case-panel .btn{
    min-height:44px!important;
    margin-top:14px!important;
    font-size:8.5px!important;
  }

  /* ---------- subtle scroll reveal ---------- */
  .story-reveal{
    opacity:0;
    transform:translateY(14px);
    transition:
      opacity .48s cubic-bezier(.2,.7,.2,1),
      transform .48s cubic-bezier(.2,.7,.2,1);
  }

  .story-reveal.story-visible{
    opacity:1;
    transform:none;
  }

  #home .home-proof.story-reveal{transition-delay:.08s}
  #systems .project-selector.story-reveal{transition-delay:.04s}
  #systems .project-visual.story-reveal{transition-delay:.08s}
  #systems .case-panel.story-reveal{transition-delay:.12s}

  @media(max-width:390px){
    #home .title{
      font-size:clamp(39px,11.2vw,50px)!important;
    }

    #home .btn-row{
      grid-template-columns:1fr!important;
    }

    #systems .project-select{
      flex-basis:84%!important;
    }
  }

  @media(prefers-reduced-motion:reduce){
    .story-reveal{
      opacity:1;
      transform:none;
      transition:none;
    }
    #systems #projectImage{transition:none!important}
  }
}


/* v75 — Systems mobile: true accordion with images inside active item */
@media(max-width:900px){
  #systems{
    background:
      radial-gradient(circle at 86% 6%,rgba(103,92,255,.055),transparent 26%),
      transparent!important;
  }

  #systems .project-workspace{
    display:block!important;
  }

  #systems .project-selector{
    width:100%!important;
    margin:0!important;
    padding:8px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    background:rgba(10,23,42,.50)!important;
    border-radius:16px!important;
    box-shadow:
      inset 0 0 0 1px rgba(126,146,255,.04),
      0 12px 28px rgba(0,0,0,.10)!important;
  }

  #systems .mobile-systems-guide{
    padding:2px 3px 6px!important;
  }

  #systems .mobile-systems-guide span{
    display:block;
    color:#7285a6;
    font-size:6px;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

  #systems .mobile-systems-guide b{
    display:block;
    margin-top:3px;
    color:#a5b2c6;
    font-size:8.5px;
    font-weight:500;
  }

  #systems .mobile-system-item{
    width:100%;
    overflow:hidden;
    border-radius:13px;
    background:rgba(15,31,55,.62);
    box-shadow:inset 0 0 0 1px rgba(126,146,255,.03);
  }

  #systems .mobile-system-item.open{
    background:
      radial-gradient(circle at 0 0,rgba(106,92,255,.13),transparent 55%),
      rgba(17,34,61,.88);
    box-shadow:
      inset 0 0 0 1px rgba(134,151,255,.07),
      0 10px 24px rgba(0,0,0,.12);
  }

  #systems .project-select{
    position:relative!important;
    width:100%!important;
    min-height:54px!important;
    padding:9px 38px 9px 10px!important;
    display:grid!important;
    grid-template-columns:32px 1fr!important;
    align-items:center!important;
    gap:9px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#8b9bb5!important;
    text-align:left!important;
    box-shadow:none!important;
  }

  #systems .project-select:after{
    content:"+"!important;
    position:absolute!important;
    right:13px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    color:#6d809f!important;
    font-size:18px!important;
    line-height:1!important;
  }

  #systems .mobile-system-item.open .project-select{
    color:#fff!important;
  }

  #systems .mobile-system-item.open .project-select:after{
    content:"−"!important;
    color:#9cafff!important;
  }

  #systems .project-select>span{
    width:32px!important;
    height:32px!important;
    border-radius:9px!important;
  }

  #systems .project-select b{
    font-size:10px!important;
    line-height:1.18!important;
  }

  #systems .project-select small{
    margin-top:2px!important;
    font-size:6px!important;
  }

  #systems .mobile-system-body{
    display:none;
    padding:0 10px 10px;
  }

  #systems .mobile-system-item.open .mobile-system-body{
    display:block;
  }

  #systems .mobile-system-summary{
    padding:8px 2px 9px;
    border-top:1px solid rgba(126,146,255,.07);
  }

  #systems .mobile-project-line + .mobile-project-line{
    margin-top:7px!important;
  }

  #systems .mobile-project-line span{
    display:block;
    margin-bottom:2px;
    color:#7689ad;
    font-size:5.8px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  #systems .mobile-project-line p{
    margin:0!important;
    color:#a6b4c9;
    font-size:8.5px!important;
    line-height:1.38!important;
  }

  #systems .mobile-system-visual-slot{
    margin-top:2px;
  }

  #systems .project-detail{
    display:block!important;
  }

  #systems .project-visual{
    width:100%!important;
    margin:0!important;
    border-radius:12px!important;
    overflow:hidden!important;
    box-shadow:0 14px 30px rgba(0,0,0,.16)!important;
  }

  #systems .project-image-wrap{
    aspect-ratio:16/10!important;
  }

  #systems #projectImage{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }

  #systems .view-area{
    padding:7px 8px!important;
  }

  #systems .view-label{
    display:flex!important;
    margin-bottom:5px!important;
    font-size:6px!important;
  }

  #systems .view-label>span,
  #systems .view-label small,
  #systems .thumb-hint,
  #systems .image-hint{
    display:none!important;
  }

  #systems .thumb-row{
    gap:5px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }

  #systems .thumb{
    min-width:54px!important;
    padding:6px 8px!important;
    font-size:6.5px!important;
  }

  #systems .mobile-case-source{
    display:none!important;
  }

  /* Remove old detached visual/case layout spacing. */
  #systems .project-detail > .case-panel{
    display:none!important;
  }

  /* Avoid scroll jank inside Systems on iOS. */
  #systems .story-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }

  #systems .project-selector,
  #systems .mobile-system-item,
  #systems .project-select,
  #systems .mobile-system-body{
    touch-action:manipulation!important;
  }
}


/* v76 — polish Systems accordion header: remove textbox look */
@media(max-width:900px){
  #systems .mobile-system-item{
    border-radius:14px!important;
    overflow:hidden!important;
  }

  #systems .project-select,
  #systems .project-select.active{
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    outline:0!important;
  }

  #systems .project-select > div{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    outline:0!important;
    padding:0!important;
    border-radius:0!important;
  }

  #systems .project-select:focus,
  #systems .project-select:focus-visible{
    outline:0!important;
    box-shadow:none!important;
  }

  #systems .mobile-system-item.open .project-select{
    border-bottom:1px solid rgba(126,146,255,.07)!important;
  }

  #systems .mobile-system-summary{
    border-top:0!important;
    padding-top:10px!important;
  }
}


/* v77 — remove inherited active overlay from Systems project headers */
@media(max-width:900px){
  #systems .project-select:after,
  #systems .project-select.active:after{
    inset:auto!important;
    left:auto!important;
    bottom:auto!important;
    right:13px!important;
    top:50%!important;
    width:auto!important;
    height:auto!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
    pointer-events:none!important;
  }

  #systems .project-select:after{
    content:"+"!important;
    transform:translateY(-50%)!important;
  }

  #systems .project-select.active:after{
    content:"−"!important;
    transform:translateY(-50%)!important;
  }
}


/* v78 — mobile tap-to-reveal system across Expertise, Process, About, Contact */
@media(max-width:900px){

  /* Shared language */
  #expertise .mobile-exp-item,
  #process .process-step,
  #about .mobile-about-item,
  #contact .mobile-contact-toggle{
    border-radius:14px!important;
    background:rgba(13,29,52,.62)!important;
    box-shadow:inset 0 0 0 1px rgba(126,146,255,.035)!important;
  }

  /* EXPERTISE */
  #expertise .expertise-grid{
    display:block!important;
  }

  #expertise .expertise-list{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    margin-top:16px!important;
  }

  #expertise .mobile-exp-item{
    overflow:hidden!important;
  }

  #expertise .mobile-exp-item.open{
    background:
      radial-gradient(circle at 0 0,rgba(103,92,255,.12),transparent 55%),
      rgba(17,34,61,.88)!important;
  }

  #expertise .expertise-item{
    width:100%!important;
    min-height:54px!important;
    padding:9px 38px 9px 10px!important;
    grid-template-columns:30px 1fr!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  #expertise .expertise-item:after{
    content:"+"!important;
    position:absolute!important;
    right:13px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    color:#6d809f!important;
    font-size:18px!important;
  }

  #expertise .mobile-exp-item.open .expertise-item:after{
    content:"−"!important;
    color:#9cafff!important;
  }

  #expertise .expertise-item i{display:none!important}

  #expertise .mobile-exp-body{
    display:none!important;
    padding:0 10px 10px!important;
  }

  #expertise .mobile-exp-item.open .mobile-exp-body{
    display:block!important;
  }

  #expertise .expertise-detail{
    margin:0!important;
    padding:12px!important;
    border-radius:11px!important;
    background:rgba(8,20,38,.38)!important;
    box-shadow:none!important;
  }

  #expertise .expertise-detail h3{
    font-size:22px!important;
  }

  #expertise .expertise-detail p{
    font-size:9.5px!important;
    line-height:1.42!important;
  }

  #expertise .expertise-outcomes{
    gap:5px!important;
    margin-top:10px!important;
  }

  #expertise .expertise-outcomes span{
    font-size:6.5px!important;
    padding:5px 7px!important;
  }

  #expertise .techline{
    margin-top:10px!important;
    padding-top:9px!important;
    font-size:6.5px!important;
    line-height:1.45!important;
  }

  #expertise .expertise-detail .btn{
    display:none!important;
  }

  /* PROCESS */
  #process .process-track{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    margin-top:18px!important;
  }

  #process .process-track:before,
  #process .process-track:after{
    display:none!important;
  }

  #process .process-step{
    position:relative!important;
    padding:10px 38px 10px 10px!important;
    display:grid!important;
    grid-template-columns:38px 1fr!important;
    gap:9px!important;
    text-align:left!important;
  }

  #process .process-step:after{
    content:"+"!important;
    position:absolute!important;
    right:13px!important;
    top:17px!important;
    color:#6d809f!important;
    font-size:18px!important;
  }

  #process .process-step.active:after{
    content:"−"!important;
    color:#9cafff!important;
  }

  #process .process-num{
    width:36px!important;
    height:36px!important;
    margin:0!important;
  }

  #process .process-step h3{
    margin:8px 0 0!important;
    font-size:13px!important;
  }

  #process .process-reveal{
    grid-column:2!important;
    display:none!important;
  }

  #process .process-step.active .process-reveal{
    display:block!important;
  }

  #process .process-reveal p{
    margin:4px 0 0!important;
    font-size:9px!important;
    line-height:1.42!important;
  }

  #process .process-micro{
    margin-top:5px!important;
    font-size:6px!important;
  }

  #process .process-hint{
    display:none!important;
  }

  /* ABOUT */
  #about .about-grid{
    display:block!important;
  }

  #about .about-grid>div:first-child{
    display:block!important;
  }

  #about .about-grid>div:first-child>.copy,
  #about .about-grid>div:first-child>.authority-row{
    display:none!important;
  }

  #about .mobile-about-accordion{
    display:grid!important;
    gap:7px!important;
    margin-top:18px!important;
  }

  #about .mobile-about-item{
    overflow:hidden!important;
  }

  #about .mobile-about-item.open{
    background:
      radial-gradient(circle at 0 0,rgba(103,92,255,.11),transparent 55%),
      rgba(17,34,61,.86)!important;
  }

  #about .mobile-about-trigger{
    width:100%!important;
    min-height:58px!important;
    padding:9px 10px!important;
    display:grid!important;
    grid-template-columns:34px 1fr 20px!important;
    gap:9px!important;
    align-items:center!important;
    border:0!important;
    background:transparent!important;
    color:#fff!important;
    text-align:left!important;
  }

  #about .mobile-about-trigger>span{
    width:34px!important;
    height:34px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:10px!important;
    background:rgba(36,54,94,.72)!important;
    color:#9fb0ce!important;
    font-size:7px!important;
  }

  #about .mobile-about-trigger b{
    display:block!important;
    font-size:10px!important;
  }

  #about .mobile-about-trigger small{
    display:block!important;
    margin-top:2px!important;
    color:#7f91af!important;
    font-size:6.5px!important;
  }

  #about .mobile-about-trigger i{
    font-style:normal!important;
    color:#8397b8!important;
    font-size:18px!important;
    text-align:center!important;
  }

  #about .mobile-about-body{
    display:none!important;
    padding:0 10px 10px!important;
  }

  #about .mobile-about-item.open .mobile-about-body{
    display:block!important;
  }

  #about .mobile-about-body .copy{
    display:block!important;
    margin:0!important;
    padding:12px!important;
    border-radius:11px!important;
    background:rgba(8,20,38,.34)!important;
    font-size:9.5px!important;
    line-height:1.42!important;
  }

  #about .mobile-about-body .authority-row{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:6px!important;
    margin-top:8px!important;
  }

  #about .mobile-about-body .authority-row strong{
    font-size:8px!important;
  }

  #about .mobile-about-body .authority-row span{
    font-size:5.8px!important;
  }

  #about .mobile-about-body .about-flow{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:6px!important;
  }

  #about .mobile-about-body .about-flow>i{
    display:none!important;
  }

  #about .mobile-about-body .about-flow>div{
    min-height:74px!important;
    padding:9px!important;
  }

  #about .mobile-about-body .quote{
    margin:0!important;
    padding:16px!important;
  }

  #about .mobile-about-body .quote strong{
    font-size:24px!important;
    line-height:1.05!important;
  }

  /* CONTACT */
  #contact .contact-grid{
    display:block!important;
  }

  #contact .contact-socials{
    margin-bottom:12px!important;
  }

  #contact .mobile-contact-toggle{
    width:100%!important;
    min-height:58px!important;
    margin-top:12px!important;
    padding:10px 14px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    border:0!important;
    color:#fff!important;
    text-align:left!important;
  }

  #contact .mobile-contact-toggle span{
    color:#7689aa!important;
    font-size:6.5px!important;
    letter-spacing:.13em!important;
    text-transform:uppercase!important;
  }

  #contact .mobile-contact-toggle b{
    font-size:10px!important;
    font-weight:600!important;
  }

  #contact .contact-form.mobile-contact-collapsed{
    display:none!important;
  }

  #contact .contact-form.mobile-contact-collapsed.mobile-contact-open{
    display:grid!important;
    margin-top:8px!important;
  }

  /* Keep all of these sections visually coherent */
  #expertise,
  #process,
  #about,
  #contact{
    padding-top:64px!important;
    padding-bottom:64px!important;
    background:transparent!important;
  }

  #expertise .story-reveal,
  #process .story-reveal,
  #about .story-reveal,
  #contact .story-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* v79 — collapsed defaults, clean accordion headers, compact contact CTA row */
@media(max-width:900px){

  /* All accordions closed by default */
  #systems .mobile-system-item:not(.open) .mobile-system-body,
  #expertise .mobile-exp-item:not(.open) .mobile-exp-body,
  #process .process-step:not(.active) .process-reveal,
  #about .mobile-about-item:not(.open) .mobile-about-body{
    display:none!important;
  }

  /* EXPERTISE: remove inherited textbox/overlay look */
  #expertise .expertise-item,
  #expertise .expertise-item.active{
    background:transparent!important;
    box-shadow:none!important;
    border:0!important;
    outline:0!important;
  }

  #expertise .expertise-item > div{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    outline:0!important;
    padding:0!important;
    border-radius:0!important;
  }

  #expertise .expertise-item:before,
  #expertise .expertise-item.active:before{
    display:none!important;
    content:none!important;
  }

  #expertise .expertise-item:after,
  #expertise .expertise-item.active:after{
    inset:auto!important;
    left:auto!important;
    bottom:auto!important;
    right:13px!important;
    top:50%!important;
    width:auto!important;
    height:auto!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
    transform:translateY(-50%)!important;
  }

  /* ABOUT/Experience: no inner text card */
  #about .mobile-about-body .copy{
    margin:0!important;
    padding:4px 0 8px!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    border-radius:0!important;
  }

  #about .mobile-about-body .authority-row{
    margin-top:4px!important;
  }

  #about .mobile-about-body .quote{
    background:transparent!important;
    box-shadow:none!important;
    border-radius:0!important;
    padding:6px 0!important;
  }

  /* CONTACT */
  #contact .mobile-contact-actions{
    margin-top:18px!important;
  }

  #contact .mobile-contact-label{
    margin-bottom:9px!important;
    color:#8799b8!important;
    font-size:8px!important;
    font-weight:600!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
  }

  #contact .mobile-contact-row{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
  }

  #contact .mobile-contact-row > a,
  #contact .mobile-contact-option-btn{
    min-width:0!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 10px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    border:0!important;
    border-radius:12px!important;
    background:rgba(13,29,52,.66)!important;
    color:#a9b8d0!important;
    box-shadow:
      inset 0 0 0 1px rgba(126,146,255,.04),
      0 8px 22px rgba(0,0,0,.10)!important;
    text-decoration:none!important;
  }

  #contact .mobile-contact-row > a:hover,
  #contact .mobile-contact-option-btn.active{
    color:#fff!important;
    background:
      linear-gradient(135deg,rgba(88,77,237,.84),rgba(57,122,224,.80))!important;
  }

  #contact .mobile-contact-option,
  #contact .mobile-contact-option-btn{
    font-size:9.5px!important;
    font-weight:600!important;
  }

  #contact .mobile-contact-row .upwork-wordmark,
  #contact .mobile-contact-row .upwork-action,
  #contact .mobile-contact-row .linkedin-in,
  #contact .mobile-contact-row .linkedin-label{
    display:none!important;
  }

  #contact .contact-form.mobile-contact-collapsed{
    display:none!important;
  }

  #contact .contact-form.mobile-contact-collapsed.mobile-contact-open{
    display:grid!important;
    margin-top:10px!important;
  }
}


/* v80 — mobile polish after full accordion pass */
@media(max-width:900px){

  /* Remove obsolete "Swipe to choose" cue permanently */
  #systems .project-selector:after{
    content:none!important;
    display:none!important;
  }

  /* Larger readable accordion typography across the site */
  #systems .project-select b{
    font-size:12px!important;
    line-height:1.22!important;
  }
  #systems .project-select small{
    font-size:7.5px!important;
  }
  #systems .mobile-project-line span{
    font-size:6.8px!important;
  }
  #systems .mobile-project-line p{
    font-size:11.5px!important;
    line-height:1.46!important;
  }

  #process .process-step h3{
    margin-top:7px!important;
    font-size:15px!important;
    line-height:1.2!important;
  }
  #process .process-reveal p{
    font-size:11.5px!important;
    line-height:1.46!important;
  }
  #process .process-micro{
    font-size:7px!important;
  }

  #about .mobile-about-trigger b{
    font-size:12px!important;
    line-height:1.2!important;
  }
  #about .mobile-about-trigger small{
    font-size:7.5px!important;
    line-height:1.35!important;
  }
  #about .mobile-about-body .copy{
    font-size:11.5px!important;
    line-height:1.5!important;
  }
  #about .mobile-about-body .authority-row strong{
    font-size:10px!important;
  }
  #about .mobile-about-body .authority-row span{
    font-size:7px!important;
    line-height:1.35!important;
  }
  #about .mobile-about-body .about-flow>div b{
    font-size:10px!important;
  }
  #about .mobile-about-body .about-flow>div small{
    font-size:7px!important;
    line-height:1.35!important;
  }

  /* Expertise: no icon and absolutely no inherited textbox overlay */
  #expertise .expertise-item .exp-icon{
    display:none!important;
  }

  #expertise .expertise-item{
    position:relative!important;
    grid-template-columns:1fr!important;
    min-height:58px!important;
    padding:10px 42px 10px 13px!important;
    text-align:left!important;
  }

  #expertise .expertise-item:before,
  #expertise .expertise-item:after,
  #expertise .expertise-item.active:before,
  #expertise .expertise-item.active:after{
    content:none!important;
    display:none!important;
    box-shadow:none!important;
    border:0!important;
    background:none!important;
  }

  #expertise .expertise-item > div{
    display:grid!important;
    grid-template-columns:30px 1fr!important;
    align-items:center!important;
    gap:9px!important;
    width:100%!important;
  }

  #expertise .expertise-item small{
    width:30px!important;
    height:30px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:9px!important;
    background:rgba(36,54,94,.72)!important;
    color:#9fb0ce!important;
    font-size:7px!important;
  }

  #expertise .expertise-item b{
    margin:0!important;
    font-size:12px!important;
    line-height:1.22!important;
  }

  #expertise .mobile-exp-item{
    position:relative!important;
  }

  #expertise .mobile-exp-item:after{
    content:"+"!important;
    position:absolute!important;
    right:14px!important;
    top:19px!important;
    color:#6d809f!important;
    font-size:18px!important;
    line-height:1!important;
    pointer-events:none!important;
  }

  #expertise .mobile-exp-item.open:after{
    content:"−"!important;
    color:#9cafff!important;
  }

  #expertise .detail-kicker{
    font-size:7px!important;
  }

  #expertise .expertise-detail h3{
    font-size:25px!important;
    line-height:1.06!important;
  }

  #expertise .expertise-detail p{
    font-size:11.5px!important;
    line-height:1.48!important;
  }

  #expertise .expertise-outcomes span{
    font-size:7.5px!important;
    padding:6px 8px!important;
  }

  #expertise .techline{
    font-size:7.5px!important;
    line-height:1.5!important;
  }

  /* Contact: stronger but coherent background and cleaner CTA hierarchy */
  #contact{
    position:relative!important;
    background:
      radial-gradient(circle at 88% 18%,rgba(111,92,255,.12),transparent 30%),
      radial-gradient(circle at 12% 72%,rgba(74,146,255,.075),transparent 28%),
      linear-gradient(180deg,rgba(10,22,42,.10),rgba(13,28,52,.30),rgba(7,16,28,.12))!important;
  }

  #contact:before{
    opacity:.42!important;
  }

  #contact .mobile-contact-actions{
    margin-top:24px!important;
    padding:15px!important;
    border-radius:17px!important;
    background:rgba(10,23,42,.52)!important;
    box-shadow:
      inset 0 0 0 1px rgba(126,146,255,.045),
      0 14px 34px rgba(0,0,0,.12)!important;
  }

  #contact .mobile-contact-label{
    margin:0 0 10px!important;
    color:#9aabd0!important;
    font-size:9px!important;
    letter-spacing:.15em!important;
  }

  #contact .mobile-contact-row{
    grid-template-columns:1fr 1.15fr 1fr!important;
  }

  #contact .mobile-contact-row > a,
  #contact .mobile-contact-option-btn{
    min-height:50px!important;
    font-size:9px!important;
  }

  #contact .mobile-contact-option,
  #contact .mobile-contact-option-btn{
    font-size:9px!important;
    white-space:nowrap!important;
  }
}


/* v81 — Contact cleanup + reliable native Home CTAs */
@media(max-width:900px){
  /* Remove the visual split/vertical panel effect in Start a project */
  #contact::before,
  #contact::after{
    content:none!important;
    display:none!important;
  }

  #contact{
    background:
      radial-gradient(circle at 84% 18%,rgba(111,92,255,.10),transparent 34%),
      radial-gradient(circle at 16% 78%,rgba(74,146,255,.055),transparent 30%),
      linear-gradient(180deg,rgba(9,20,37,.18),rgba(10,24,44,.24),rgba(7,16,28,.08))!important;
  }

  /* Contact me should not sit inside another card */
  #contact .mobile-contact-actions{
    margin-top:22px!important;
    padding:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  #contact .mobile-contact-label{
    margin-bottom:10px!important;
  }

  #contact .mobile-contact-row{
    gap:8px!important;
  }

  /* Native anchors in Home should look identical to previous buttons */
  #home a.btn{
    text-decoration:none!important;
  }
}


/* v83 — modernize the MC wordmark without turning it into an icon */
.brand-logo{
  font-family:"Inter","SF Pro Display","Segoe UI",Arial,sans-serif!important;
  font-weight:600!important;
  font-style:normal!important;
  letter-spacing:-.075em!important;
  line-height:1!important;
  background:linear-gradient(110deg,#b28cff 0%,#7d7fff 46%,#5aa6ff 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  text-shadow:0 0 10px rgba(111,105,255,.10)!important;
}

@media(max-width:900px){
  .brand-logo{
    font-size:31px!important;
    letter-spacing:-.08em!important;
    text-shadow:0 0 8px rgba(111,105,255,.08)!important;
  }
}


/* v84 — cleaner About → Contact transition */
@media(max-width:900px){
  #about{
    padding-bottom:92px!important;
  }

  #contact{
    margin-top:0!important;
    padding-top:88px!important;
    border-top:1px solid rgba(126,146,255,.10)!important;
    background:
      radial-gradient(circle at 82% 14%,rgba(111,92,255,.085),transparent 34%),
      radial-gradient(circle at 14% 74%,rgba(74,146,255,.045),transparent 30%),
      linear-gradient(180deg,rgba(11,24,43,.30),rgba(7,16,28,.08))!important;
  }

  #contact .screen-inner{
    position:relative!important;
  }

  #contact .screen-inner:before{
    content:"";
    position:absolute;
    left:0;
    top:-34px;
    width:52px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg,#9a6cff,#5aa6ff);
    opacity:.72;
  }
}


/* v85 — clearer About/Contact separation */
@media(max-width:900px){
  #about{
    padding-bottom:56px!important;
  }

  #contact{
    padding-top:104px!important;
    border-top:0!important;
    background:
      linear-gradient(180deg,rgba(14,31,56,.62) 0%,rgba(9,22,41,.82) 18%,rgba(7,16,28,.98) 100%)!important;
    box-shadow:inset 0 1px 0 rgba(126,146,255,.08)!important;
  }

  #contact .screen-inner:before{
    top:-46px!important;
    width:64px!important;
    height:2px!important;
    opacity:.9!important;
  }

  #contact .eyebrow{
    margin-bottom:18px!important;
  }
}