/* Final responsive pass: loaded after the concept and process overrides. */
html,body{max-width:100%;overflow-x:hidden}

@media(max-width:940px){
  section{padding:76px 0}
  .container,.bp-flow-inner{width:calc(100% - 44px);max-width:100%}
  .container>*,.section-head>*,.split>*,.about>*,.contact-grid>*,.concept-services-shell>*,.process>*{min-width:0}

  .section-head{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:26px!important;margin-bottom:46px!important}
  .section-head .left,.section-head .right{width:100%!important;max-width:none!important;grid-column:1!important}
  .section-head .right{padding-top:18px!important;overflow-wrap:anywhere}
  .section-head h2{font-size:clamp(2.65rem,8.5vw,4.2rem)!important;overflow-wrap:anywhere}
  #problems .section-head{margin-bottom:34px!important}

  .concept-services-shell{grid-template-columns:minmax(0,1fr)!important;gap:34px!important}
  .concept-live-stage{width:100%;max-width:100%;box-shadow:12px 14px 0 rgba(49,92,255,.06)}
  .concept-xray{grid-template-columns:minmax(0,1fr)!important;gap:32px}
  .concept-xray .chain{transform:none!important;box-shadow:12px 14px 0 rgba(49,92,255,.06)}

  #process .process{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .concept-process-stage,.process-screen{width:100%;max-width:100%}
  .process-source-pane{max-width:100%;overflow:auto!important;overflow-wrap:normal}

  #about .about,.contact-grid{grid-template-columns:minmax(0,1fr)!important;gap:34px!important}
  #about .about::after{left:8%;right:-2%}
  #about .about>div:first-child{border-width:1px!important}

  .concept-project-archive .portfolio-card,.concept-project-archive .portfolio-card:nth-child(even){
    grid-template-columns:minmax(0,1fr)!important;
    gap:20px!important;
    width:100%!important;
    padding:38px 0 24px!important;
  }
  .concept-project-archive .portfolio-card>*{min-width:0}
  .concept-project-archive .portfolio-card .mock,
  .concept-project-archive .portfolio-card:nth-child(even) .mock,
  .concept-project-archive .portfolio-card .num,
  .concept-project-archive .portfolio-card:nth-child(even)>.num,
  .concept-project-archive .portfolio-card h3,
  .concept-project-archive .portfolio-card footer{
    grid-column:1!important;grid-row:auto!important
  }

  #faq .faq{margin-top:70px}
  #faq .faq-q{overflow-wrap:anywhere}
  #contact .form{min-width:0}
  #contact .channels a{overflow-wrap:anywhere}
}

@media(max-width:560px){
  section{padding:62px 0}
  .container,.bp-flow-inner{width:calc(100% - 36px)}
  .section-head{gap:20px!important;margin-bottom:36px!important}
  .section-head h2{font-size:clamp(2.3rem,11vw,3rem)!important;line-height:1!important}
  .section-head .right{font-size:.94rem;line-height:1.6}

  .hero{padding-top:42px}
  .hero h1{font-size:clamp(2.7rem,13vw,3.15rem)!important}
  .visual,.bp-asset-stack{max-width:100%;overflow:hidden}
  .bp-architecture-sheet{width:70%;right:0;transform:rotate(-5deg)}
  .bp-site-sheet{width:88%;right:0}
  .bp-site-services{display:none!important}
  .bp-site-body{grid-template-columns:.8fr 1.2fr!important;gap:8px!important;padding:10px 10px 8px!important}
  .bp-site-copy{width:auto!important;padding-top:1px!important}
  .bp-site-copy small{font-size:.36rem!important;line-height:1.25!important}
  .bp-site-copy h3{font-size:.72rem!important;line-height:.96!important;margin:6px 0!important}
  .bp-site-copy button{font-size:.42rem!important;padding:5px 6px!important}

  .bp-flow-item{padding:24px 8px 20px 4px;min-height:0}
  .bp-flow-item p{font-size:.82rem}
  .bp-diagram-captions{grid-template-columns:1fr;gap:10px;margin-top:12px}
  .bp-stage-labels{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px;text-align:left}
  .bp-layer-labels{left:4%;right:4%;font-size:.46rem}
  #problems::before{opacity:.3!important;background-position:center 150px!important;background-size:auto 720px!important}
  #problems::after{background:linear-gradient(180deg,var(--bp-paper) 0,rgba(238,233,221,.96) 19%,rgba(238,233,221,.8) 48%,rgba(238,233,221,.92) 100%)!important}
  #problems .section-head .left::before,#problems .section-head .right::before{inset:-10px!important;background:rgba(238,233,221,.94)!important;filter:none!important}
  #problems .grid4{position:relative;z-index:3;background:transparent!important;backdrop-filter:none!important}
  #problems .card{background:rgba(247,244,237,.96)!important;backdrop-filter:none!important}
  .bp-problem-visual{height:72px!important}
  .bp-outcomes{display:none!important}

  .concept-services-shell .service{grid-template-columns:1fr!important;padding:22px 14px!important}
  .concept-services-shell .service .num,
  .concept-services-shell .service h3,
  .concept-services-shell .service p{grid-column:1!important}
  .concept-services-shell .service h3{font-size:1.45rem}
  .concept-live-stage{min-height:620px}
  .concept-stage-grid{grid-template-rows:minmax(0,1fr)!important}
  .concept-browser-view{margin:12px!important;min-width:0;overflow:hidden}
  .concept-service-frame{width:100%!important;min-height:540px!important}
  .concept-live-stage[data-mode="new-build"]{min-height:520px!important}
  .concept-live-stage[data-mode="new-build"] .concept-service-frame{min-height:440px!important}
  .concept-stage-bar,.concept-stage-meta{font-size:.48rem;padding-inline:10px}
  .concept-stage-meta span:nth-child(2){display:none}

  #process .process{grid-template-columns:minmax(0,1fr)!important}
  .concept-process-shell .step,.concept-process-shell .step:not(:first-child){min-height:0!important;padding:24px 0!important}
  .process-screen{height:760px!important}
  .process-screen[data-step="1"]{height:900px!important}
  .process-screen[data-step="1"] .process-live-frame{top:44px!important;width:100%!important;height:48%!important}
  .process-screen[data-step="1"] .process-real-map{left:0!important;right:0!important;top:calc(44px + 48%)!important;bottom:0!important;height:auto!important;padding:18px!important;overflow:auto!important;grid-template-columns:1fr 1fr!important}
  .process-screen[data-step="1"] .process-real-map{background:#eeeade!important;color:#315cff!important;border-left:0!important;border-top:1px solid #bdb7aa!important}
  .process-screen[data-step="1"] .process-real-map b,.process-screen[data-step="1"] .process-real-map span{background:#f5f1e8!important;border-color:#aaa59a!important;color:#243c96!important}
  .process-screen[data-step="1"] .process-real-map small{color:#666b73!important}
  .process-screen[data-step="1"] .process-real-map [data-audit].active{border:2px solid #ff765f!important;background:#fff4eb!important;color:#9d3f30!important;box-shadow:inset 0 0 0 1px rgba(255,118,95,.18)!important}
  .process-screen[data-step="2"]{height:840px!important}
  .process-screen[data-step="2"] .process-live-frame{left:0!important;top:44px!important;width:100%!important;height:48%!important}
  .process-screen[data-step="2"] .process-scope-pane{left:0!important;right:0!important;top:calc(44px + 48%)!important;bottom:0!important;height:auto!important;padding:20px!important;overflow:auto!important}
  .process-screen[data-step="3"] .process-source-pane{
    inset:44px 0 auto 0!important;height:36%!important;padding:15px!important;
    border-right:0!important;border-bottom:1px solid #35436b!important;
    font-size:.5rem!important;line-height:1.45!important;overflow:auto!important
  }
  .process-screen[data-step="3"] .process-live-frame{
    left:0!important;top:calc(44px + 36%)!important;bottom:auto!important;width:100%!important;height:calc(64% - 44px)!important
  }
  .process-screen[data-step="3"] .process-wireframe-label{display:none!important}

  #about .about>div:first-child{padding:20px!important;background:rgba(247,244,237,.94)!important}
  #about .section-head{margin-bottom:100px!important}
  #about .about::after{display:none!important}
  #about .about::before{top:-48px!important;width:154px!important;padding-top:8px!important;border-top:1px solid var(--bp-blue)!important;text-align:left!important}
  #about .portrait{height:430px!important;aspect-ratio:auto!important;border-width:5px;transform:none!important}
  #about .portrait img{object-position:center 18%!important}

  .concept-project-archive .portfolio-card{margin-bottom:44px!important}
  #portfolio .concept-project-archive .portfolio-card,
  #portfolio .concept-project-archive .portfolio-card:nth-child(even){display:flex!important;flex-direction:column!important;grid-template-columns:none!important}
  #portfolio .concept-project-archive .portfolio-card .mock,
  #portfolio .concept-project-archive .portfolio-card:nth-child(even) .mock{grid-column:1!important;width:100%!important;min-height:254px!important}
  #portfolio .concept-project-archive .portfolio-card>.num{display:block!important;width:100%!important;text-align:center!important;margin:0!important}
  #portfolio .concept-project-archive .portfolio-card>.num::before{width:100%!important;text-align:center!important}
  #portfolio .concept-project-archive .portfolio-card>h3{width:100%!important;text-align:center!important;margin-inline:0!important}
  .concept-project-archive .portfolio-card h3{font-size:2rem!important}
  .concept-project-archive .portfolio-card .mock{width:100%!important;aspect-ratio:4/3!important}

  #faq .faq-item{grid-template-columns:34px minmax(0,1fr)!important}
  #faq .faq-item::before{padding-top:25px}
  #faq .faq-q{padding-right:34px;font-size:1rem}
  #faq .answer{padding-right:0}

  #contact .form{padding:58px 18px 20px!important}
  #contact .form::before{left:18px;right:18px}
  .contact-grid{gap:28px!important}
  .channels{padding-left:14px!important}
  .reveal{transition:none!important}
  .project-hover,.preview-modal{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

@media(max-width:380px){
  .section-head h2{font-size:2.18rem!important}
  .hero h1{font-size:2.55rem!important}
  .bp-logo-name{font-size:.76rem!important}
  .bp-logo-name small{font-size:.7rem!important}
}