/* ================================================================
   V48 — MOBILE EXPERIENCE
   Services + Projects get purpose-built mobile interactions.
   The same original logo asset/treatment is used everywhere.
   ================================================================ */

:root{
  --m48-ink:#0c0f0c;
  --m48-ink2:#151914;
  --m48-paper:#e6ded2;
  --m48-paper2:#d9cfbf;
  --m48-brass:#c9b17f;
  --m48-brass2:#9e875d;
  --m48-line:rgba(255,255,255,.11);
  --m48-muted:#aaa59d;
}

/* New mobile experiences are mobile only. */
.m48-services,
.m48-projects{display:none}

/* Logo consistency — same transparent mark on the same stone field. */
.dc-loader-logo-wrap,
.dc-footer-signature a{
  background:var(--m48-paper)!important;
  border:1px solid rgba(17,20,16,.12)!important;
  box-shadow:none!important;
}
.dc-loader-logo-wrap img,
.dc-footer-signature img,
.v42-brand img,
.v48-menu-logo img{
  filter:none!important;
  background:transparent!important;
  object-fit:contain!important;
}
.dc-footer-signature a{
  padding:12px 14px!important;
}

/* Mobile menu uses the actual logo instead of a text substitute. */
.v48-menu-logo{
  width:154px;
  padding:7px 9px;
  background:var(--m48-paper);
  border:1px solid rgba(255,255,255,.08);
}
.v48-menu-logo img{
  display:block;
  width:100%;
  height:auto;
}

/* ------------------------------------------------
   MOBILE ONLY
   ------------------------------------------------ */
@media(max-width:900px){
  /* Hide every older mobile service/project experiment. */
  .svc-mobile-showcase,
  .svc-mobile-v34,
  .svc-mobile-deck,
  .svc-mobile-experience,
  .svc-mobile-v33,
  .projects-mobile-v34,
  .projects-mobile-v33,
  .project-hero-v29,
  .project-gallery-section-v29,
  .svc-exploded,
  .svc-desktop-scope{
    display:none!important;
  }

  /* Services gets a completely separate mobile page experience. */
  body[data-current="services"] .svc-hero{
    display:none!important;
  }

  .m48-services,
  .m48-projects{
    display:block!important;
    position:relative;
    overflow:hidden;
    background:var(--m48-ink);
    color:#f4efe7;
    min-height:calc(100svh - 74px);
  }

  .m48-services{
    padding:102px 0 46px;
  }

  .m48-projects{
    padding:102px 0 52px;
  }

  .m48-services::before,
  .m48-projects::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
    background-size:62px 62px;
    pointer-events:none;
  }

  .m48-services::after,
  .m48-projects::after{
    content:"";
    position:absolute;
    width:440px;
    height:440px;
    border:1px solid rgba(201,177,127,.14);
    border-radius:50%;
    right:-240px;
    top:120px;
    pointer-events:none;
  }

  .m48-shell{
    position:relative;
    z-index:2;
    width:calc(100% - 28px);
    margin:0 auto;
  }

  .m48-kicker{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    font:600 9px/1 var(--mono);
    letter-spacing:.15em;
    color:var(--m48-brass);
    text-transform:uppercase;
  }

  .m48-kicker i{
    width:34px;
    height:1px;
    background:currentColor;
    opacity:.65;
  }

  .m48-title{
    margin:0;
    font:600 clamp(38px,11vw,52px)/.91 var(--display);
    letter-spacing:-.06em;
    color:#f4efe7;
  }

  .m48-title em{
    display:block;
    color:var(--m48-brass);
    font-style:normal;
  }

  .m48-lead{
    max-width:34rem;
    margin:18px 0 0;
    color:var(--m48-muted);
    font-size:14px;
    line-height:1.72;
  }

  /* ---------------- Mobile Services ---------------- */
  .m48-service-selector{
    display:flex;
    gap:8px;
    overflow-x:auto;
    margin:26px -14px 0;
    padding:0 14px 6px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }

  .m48-service-selector::-webkit-scrollbar{display:none}

  .m48-service-selector button{
    flex:0 0 auto;
    display:grid;
    grid-template-columns:24px auto;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:0 13px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    background:rgba(255,255,255,.025);
    color:#bcb7af;
    font:600 11px/1 var(--display);
    scroll-snap-align:start;
    transition:.24s ease;
  }

  .m48-service-selector button span{
    font:600 8px/1 var(--mono);
    color:#767169;
  }

  .m48-service-selector button.active{
    background:var(--m48-brass);
    border-color:var(--m48-brass);
    color:var(--m48-ink);
  }

  .m48-service-selector button.active span{
    color:#554a37;
  }

  .m48-service-orbit{
    position:relative;
    margin-top:22px;
    min-height:548px;
    border:1px solid rgba(255,255,255,.11);
    background:
      radial-gradient(circle at 50% 38%,rgba(201,177,127,.08),transparent 44%),
      rgba(255,255,255,.018);
    overflow:hidden;
  }

  .m48-service-orbit::before,
  .m48-service-orbit::after{
    content:"";
    position:absolute;
    left:50%;
    top:215px;
    border:1px solid rgba(201,177,127,.16);
    border-radius:50%;
    transform:translate(-50%,-50%);
    pointer-events:none;
  }

  .m48-service-orbit::before{
    width:310px;
    height:310px;
  }

  .m48-service-orbit::after{
    width:220px;
    height:220px;
    border-color:rgba(255,255,255,.07);
  }

  .m48-service-core{
    position:absolute;
    z-index:8;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:132px;
    height:58px;
    display:grid;
    place-content:center;
    text-align:center;
    background:var(--m48-ink);
    border:1px solid rgba(201,177,127,.28);
    box-shadow:0 16px 32px rgba(0,0,0,.28);
    font:600 8px/1.28 var(--mono);
    letter-spacing:.14em;
    color:#d6c299;
  }

  .m48-service-stack{
    position:relative;
    height:345px;
    perspective:900px;
    touch-action:pan-y;
  }

  .m48-service-card{
    position:absolute;
    left:50%;
    top:96px;
    width:min(78vw,310px);
    aspect-ratio:1.32/1;
    margin-left:calc(min(78vw,310px) / -2);
    border:1px solid rgba(255,255,255,.17);
    background:#171a16;
    overflow:hidden;
    box-shadow:0 24px 54px rgba(0,0,0,.34);
    transition:
      transform .48s cubic-bezier(.22,.8,.24,1),
      opacity .35s ease,
      filter .35s ease;
    will-change:transform;
  }

  .m48-service-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.8) contrast(1.02);
  }

  .m48-service-card::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 42%,rgba(7,9,7,.72));
    pointer-events:none;
  }

  .m48-service-card[data-pos="0"]{
    z-index:6;
    opacity:1;
    transform:translate3d(0,0,55px) rotate(-2deg) scale(1);
    filter:none;
  }

  .m48-service-card[data-pos="1"]{
    z-index:5;
    opacity:.56;
    transform:translate3d(44px,25px,-25px) rotate(6deg) scale(.91);
    filter:brightness(.68);
  }

  .m48-service-card[data-pos="2"]{
    z-index:4;
    opacity:.27;
    transform:translate3d(4px,48px,-60px) rotate(-5deg) scale(.84);
    filter:brightness(.48);
  }

  .m48-service-card[data-pos="3"]{
    z-index:3;
    opacity:.42;
    transform:translate3d(-44px,30px,-35px) rotate(-8deg) scale(.88);
    filter:brightness(.58);
  }

  .m48-card-tag{
    position:absolute;
    z-index:3;
    left:12px;
    bottom:12px;
    display:flex;
    align-items:center;
    gap:8px;
    color:#f6f0e6;
  }

  .m48-card-tag span{
    font:600 8px/1 var(--mono);
    letter-spacing:.14em;
    color:var(--m48-brass);
  }

  .m48-card-tag strong{
    font:600 17px/.95 var(--display);
    letter-spacing:-.035em;
  }

  .m48-service-info{
    position:relative;
    z-index:10;
    margin:-4px 14px 14px;
    padding:18px;
    background:#111410;
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 18px 40px rgba(0,0,0,.24);
  }

  .m48-service-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:10px;
    color:var(--m48-brass);
    font:600 8px/1 var(--mono);
    letter-spacing:.14em;
  }

  .m48-service-info h2{
    margin:0 0 10px;
    font:600 31px/.95 var(--display);
    letter-spacing:-.055em;
    color:#f4efe7;
  }

  .m48-service-info p{
    margin:0;
    color:#aaa59d;
    font-size:14px;
    line-height:1.68;
  }

  .m48-service-chips{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:14px 0 16px;
  }

  .m48-service-chips span{
    padding:7px 9px;
    border:1px solid rgba(255,255,255,.10);
    color:#c9c4bb;
    font:600 9px/1 var(--mono);
    letter-spacing:.07em;
  }

  .m48-service-action{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:50px;
    padding:0 14px;
    background:var(--m48-brass);
    color:var(--m48-ink);
    font-size:12px;
    font-weight:700;
  }

  .m48-service-controls{
    display:grid;
    grid-template-columns:62px 1fr 62px;
    align-items:center;
    gap:10px;
    margin-top:12px;
  }

  .m48-service-controls button{
    min-height:42px;
    border:1px solid rgba(255,255,255,.12);
    background:transparent;
    color:#e8e2d9;
    font:600 10px/1 var(--display);
  }

  .m48-service-controls span{
    text-align:center;
    color:#77736b;
    font:600 9px/1 var(--mono);
    letter-spacing:.12em;
  }

  /* ---------------- Mobile Projects ---------------- */
  .m48-project-browser{
    margin-top:28px;
  }

  .m48-project-rail{
    display:grid;
    border-top:1px solid rgba(255,255,255,.12);
  }

  .m48-project-rail button{
    width:100%;
    min-height:70px;
    display:grid;
    grid-template-columns:35px 1fr 18px;
    align-items:center;
    gap:10px;
    padding:0 4px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.10);
    background:transparent;
    color:#b7b2aa;
    text-align:left;
    transition:.25s ease;
  }

  .m48-project-rail button>span{
    color:#77736b;
    font:600 8px/1 var(--mono);
  }

  .m48-project-rail button strong{
    display:block;
    font:600 24px/.96 var(--display);
    letter-spacing:-.045em;
    color:#e7e1d8;
  }

  .m48-project-rail button small{
    display:block;
    margin-top:4px;
    color:#8e897f;
    font:600 8px/1 var(--mono);
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .m48-project-rail button.active{
    padding-left:12px;
    padding-right:10px;
    background:rgba(201,177,127,.10);
  }

  .m48-project-rail button.active strong{
    color:var(--m48-brass);
  }

  .m48-project-rail button b{
    width:12px;
    height:12px;
    border-top:1px solid currentColor;
    border-right:1px solid currentColor;
    transform:rotate(45deg);
    opacity:.55;
  }

  .m48-project-preview{
    position:relative;
    margin-top:18px;
    border:1px solid rgba(201,177,127,.25);
    background:#151814;
    overflow:hidden;
  }

  .m48-project-preview-media{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
  }

  .m48-project-preview-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:opacity .18s ease,transform .38s ease;
  }

  .m48-project-preview-media.is-changing img{
    opacity:.22;
    transform:scale(1.035);
  }

  .m48-project-preview-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 52%,rgba(8,10,8,.58));
    pointer-events:none;
  }

  .m48-project-frame{
    position:absolute;
    inset:12px;
    border:1px solid rgba(255,255,255,.28);
    pointer-events:none;
    z-index:3;
  }

  .m48-project-index{
    position:absolute;
    top:14px;
    right:14px;
    z-index:4;
    padding:6px 8px;
    background:rgba(10,12,10,.82);
    color:var(--m48-brass);
    font:600 8px/1 var(--mono);
    letter-spacing:.12em;
  }

  .m48-project-preview-copy{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    padding:16px;
    border-top:1px solid rgba(255,255,255,.09);
  }

  .m48-project-preview-copy span{
    display:block;
    margin-bottom:6px;
    color:#77736b;
    font:600 8px/1 var(--mono);
    letter-spacing:.13em;
  }

  .m48-project-preview-copy h2{
    margin:0;
    font:600 28px/.96 var(--display);
    letter-spacing:-.05em;
    color:#f4efe7;
  }

  .m48-project-browse{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border:1px solid rgba(201,177,127,.32);
    background:var(--m48-brass);
    color:var(--m48-ink);
    position:relative;
  }

  .m48-project-browse::before{
    content:"";
    position:absolute;
    width:13px;
    height:1.5px;
    background:currentColor;
    transform:rotate(-45deg);
    left:14px;
    top:22px;
  }

  .m48-project-browse::after{
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border-top:1.5px solid currentColor;
    border-right:1.5px solid currentColor;
    right:10px;
    top:10px;
  }

  .m48-project-reel{
    margin-top:28px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.11);
  }

  .m48-reel-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
  }

  .m48-reel-head span{
    color:#77736b;
    font:600 8px/1 var(--mono);
    letter-spacing:.13em;
  }

  .m48-reel-head strong{
    max-width:70%;
    text-align:right;
    color:#d9d4cc;
    font:600 13px/1.2 var(--display);
  }

  .m48-reel-track{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:82%;
    gap:10px;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }

  .m48-reel-track::-webkit-scrollbar{display:none}

  .m48-project-card{
    scroll-snap-align:start;
    display:grid;
    gap:8px;
  }

  .m48-project-card figure{
    margin:0;
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
  }

  .m48-project-card img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .m48-project-card figure span{
    position:absolute;
    left:10px;
    top:10px;
    padding:5px 7px;
    background:rgba(10,12,10,.80);
    color:var(--m48-brass);
    font:600 7px/1 var(--mono);
    letter-spacing:.11em;
  }

  .m48-project-card b{
    color:#f0ebe3;
    font:600 16px/1.08 var(--display);
    letter-spacing:-.035em;
  }

  .m48-project-card small{
    color:#77736b;
    font:500 8px/1.4 var(--mono);
    letter-spacing:.08em;
  }

  /* Keep the bottom dock from covering interactions. */
  body[data-current="services"],
  body[data-current="projects"]{
    padding-bottom:78px!important;
  }

  /* Consistent mobile logo treatment everywhere. */
  .v42-brand{
    background:var(--m48-paper)!important;
  }

  .v42-mobile-top{
    align-items:center!important;
  }

  .v42-mobile-top>span{
    display:none!important;
  }

  .dc-loader-logo-wrap{
    width:min(260px,72vw)!important;
    padding:12px 14px!important;
    background:var(--m48-paper)!important;
  }

  .dc-footer-signature a{
    width:min(245px,74vw)!important;
    background:var(--m48-paper)!important;
  }
}

@media(max-width:420px){
  .m48-service-card{
    width:min(80vw,292px);
    margin-left:calc(min(80vw,292px) / -2);
  }

  .m48-project-reel-track{
    grid-auto-columns:88%;
  }

  .m48-service-info h2{
    font-size:28px;
  }
}


/* ================================================================
   V49 — MOBILE FIXES FROM DEVICE REVIEW
   Menu cleanup, services overflow fix, process redesign.
   ================================================================ */

@media(max-width:900px){

  /* ------------------------------------------------
     MOBILE MENU — no duplicate logo card
     ------------------------------------------------ */
  .v48-menu-logo{display:none!important}

  .v42-mobile-menu{
    padding:18px 18px calc(28px + env(safe-area-inset-bottom))!important;
    background:
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
      #0b0e0b!important;
    background-size:68px 68px,68px 68px,auto!important;
  }

  .v42-mobile-top{
    min-height:58px!important;
    padding:0 0 14px!important;
    align-items:flex-end!important;
  }

  .v49-menu-heading{
    display:grid!important;
    gap:6px!important;
  }

  .v49-menu-heading span{
    color:var(--m48-brass)!important;
    font:600 9px/1 var(--mono)!important;
    letter-spacing:.17em!important;
  }

  .v49-menu-heading small{
    color:#f0ebe3!important;
    font:600 16px/1 var(--display)!important;
    letter-spacing:-.03em!important;
  }

  .v42-mobile-top button{
    width:38px!important;
    height:38px!important;
    border:1px solid rgba(255,255,255,.14)!important;
  }

  .v42-mobile-links{
    margin-top:8px!important;
  }

  .v42-mobile-links>a{
    min-height:58px!important;
    font-size:24px!important;
    color:#ded8cf!important;
  }

  .v42-mobile-links>a.active{
    color:var(--m48-brass)!important;
  }

  .v42-mobile-consult{
    margin-top:16px!important;
    min-height:54px!important;
    border-radius:0!important;
  }

  .v42-mobile-contact{
    margin-top:18px!important;
    padding-top:16px!important;
  }

  /* ------------------------------------------------
     HOME PROCESS — turn the oversized vertical stack
     into a compact horizontal mobile timeline.
     ------------------------------------------------ */
  .dc-process{
    overflow:hidden!important;
  }

  .dc-process .dc-shell{
    width:calc(100% - 28px)!important;
  }

  .dc-process-lead{
    margin:0 0 22px!important;
    max-width:100%!important;
    font-size:14px!important;
    line-height:1.65!important;
  }

  .dc-process-grid{
    display:grid!important;
    grid-auto-flow:column!important;
    grid-auto-columns:82%!important;
    grid-template-columns:none!important;
    gap:12px!important;
    overflow-x:auto!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    padding:0 0 10px!important;
    border-top:0!important;
    scrollbar-width:none!important;
  }

  .dc-process-grid::-webkit-scrollbar{display:none!important}

  .dc-process-grid article,
  .dc-process-grid article:first-child,
  .dc-process-grid article:last-child{
    scroll-snap-align:start!important;
    min-height:245px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    grid-template-rows:auto 1fr auto!important;
    gap:0!important;
    padding:18px!important;
    border:1px solid rgba(17,20,16,.13)!important;
    border-radius:18px!important;
    background:#f5f0e8!important;
    box-shadow:0 12px 28px rgba(17,20,16,.07)!important;
  }

  .dc-process-grid article>span{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
    padding:0!important;
    font:600 9px/1 var(--mono)!important;
    letter-spacing:.13em!important;
    color:#8b7651!important;
  }

  .step-icon{
    grid-column:2!important;
    grid-row:1!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    border:1px solid rgba(17,20,16,.18)!important;
    color:#786546!important;
    background:rgba(255,255,255,.35)!important;
  }

  .dc-process-grid h3{
    grid-column:1/-1!important;
    grid-row:2!important;
    align-self:end!important;
    margin:28px 0 10px!important;
    font:600 25px/.98 var(--display)!important;
    letter-spacing:-.05em!important;
  }

  .dc-process-grid p{
    grid-column:1/-1!important;
    grid-row:3!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.58!important;
    color:#77736d!important;
  }

  /* ------------------------------------------------
     SERVICES — stop the viewport clipping/overflow.
     Everything now stays within the phone width.
     ------------------------------------------------ */
  body[data-current="services"]{
    overflow-x:hidden!important;
  }

  .m48-services{
    width:100%!important;
    max-width:100vw!important;
    overflow:hidden!important;
    padding:96px 0 42px!important;
  }

  .m48-shell{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin:0 auto!important;
  }

  .m48-service-selector{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    overflow:visible!important;
    margin:22px 0 0!important;
    padding:0!important;
  }

  .m48-service-selector button{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:8px 10px!important;
    border-radius:12px!important;
    grid-template-columns:22px minmax(0,1fr)!important;
    text-align:left!important;
    white-space:normal!important;
    line-height:1.15!important;
  }

  .m48-service-selector button span{
    font-size:8px!important;
  }

  .m48-service-orbit{
    width:100%!important;
    min-height:0!important;
    margin-top:16px!important;
    overflow:hidden!important;
    border-radius:18px!important;
  }

  .m48-service-orbit::before{
    width:270px!important;
    height:270px!important;
    top:202px!important;
  }

  .m48-service-orbit::after{
    width:190px!important;
    height:190px!important;
    top:202px!important;
  }

  .m48-service-core{
    top:14px!important;
    width:124px!important;
    height:54px!important;
  }

  .m48-service-stack{
    height:320px!important;
    width:100%!important;
    overflow:hidden!important;
  }

  .m48-service-card{
    left:24px!important;
    top:84px!important;
    width:calc(100% - 48px)!important;
    max-width:none!important;
    margin-left:0!important;
    transform-origin:center!important;
  }

  .m48-service-card[data-pos="0"]{
    transform:translate3d(0,0,45px) rotate(-1.5deg) scale(1)!important;
  }

  .m48-service-card[data-pos="1"]{
    transform:translate3d(18px,22px,-20px) rotate(4deg) scale(.92)!important;
  }

  .m48-service-card[data-pos="2"]{
    transform:translate3d(0,40px,-52px) rotate(-3deg) scale(.85)!important;
  }

  .m48-service-card[data-pos="3"]{
    transform:translate3d(-18px,25px,-30px) rotate(-4deg) scale(.89)!important;
  }

  .m48-card-tag{
    left:12px!important;
    right:12px!important;
    bottom:11px!important;
    align-items:flex-end!important;
  }

  .m48-card-tag strong{
    max-width:80%!important;
    font-size:16px!important;
  }

  .m48-service-info{
    width:auto!important;
    margin:0 12px 12px!important;
    padding:16px!important;
    border-radius:14px!important;
  }

  .m48-service-info h2{
    font-size:28px!important;
    overflow-wrap:anywhere!important;
  }

  .m48-service-info p{
    font-size:13px!important;
    line-height:1.62!important;
  }

  .m48-service-chips{
    gap:6px!important;
    margin:13px 0 15px!important;
  }

  .m48-service-chips span{
    padding:7px 8px!important;
    font-size:8px!important;
  }

  .m48-service-action{
    width:100%!important;
    min-height:50px!important;
  }

  .m48-service-controls{
    width:100%!important;
    grid-template-columns:64px 1fr 64px!important;
    padding:0!important;
  }

  /* Keep bottom dock in the viewport without hiding content. */
  body[data-current="services"] .dc-mobile-dock,
  body[data-current="projects"] .dc-mobile-dock{
    left:0!important;
    right:0!important;
    width:100%!important;
  }
}

@media(max-width:390px){
  .dc-process-grid{
    grid-auto-columns:87%!important;
  }

  .m48-service-selector{
    grid-template-columns:1fr!important;
  }

  .m48-service-stack{
    height:300px!important;
  }

  .m48-service-card{
    left:18px!important;
    width:calc(100% - 36px)!important;
  }

  .m48-service-info h2{
    font-size:26px!important;
  }
}