/* DWEBMEDIA V41 — final mobile homepage polish */

@media (max-width:760px){

  /* Header: keep the logo / language / menu on one calm line. */
  .header-layout{
    min-height:72px;
    gap:10px;
  }

  .header-layout .brand{
    width:clamp(148px,39vw,170px);
  }

  .header-actions{
    gap:5px;
  }

  .mobile-menu-toggle{
    width:44px;
    height:44px;
  }

  /* Hero: tighter editorial rhythm on a phone. */
  .hero{
    padding-top:30px;
  }

  .hero-left{
    padding:0;
  }

  .hero-kicker{
    margin-bottom:24px;
  }

  .hero h1{
    max-width:100%;
    font-size:clamp(47px,12.2vw,64px);
    line-height:.99;
    letter-spacing:-.072em;
  }

  .hero-lead{
    max-width:100%;
    margin-top:26px;
    font-size:15px;
    line-height:1.58;
  }

  .hero-links{
    margin-top:27px;
    gap:18px;
  }

  .button-black{
    min-height:48px;
    padding:13px 19px;
  }

  /*
   * The small developer-photo card works on desktop, but on mobile it
   * interrupts the main story between intro and selected work.
   * Hide only on phones; tablet/desktop keep it.
   */
  .hero-sidekick{
    display:none;
  }

  /* Selected-project visual comes directly after the CTA row. */
  .hero-right{
    margin-top:38px;
  }

  .hero-image{
    aspect-ratio:1.08;
    border-radius:30px!important;
  }

  .hero-project-tag{
    top:15px!important;
    right:14px!important;
    padding:9px 11px!important;
    font-size:8px!important;
  }

  .scene-meta{
    top:10%;
    left:12%;
  }

  .web-browser-window{
    left:9%;
    top:24%;
    width:86%;
    height:58%;
  }

  .web-mobile-window{
    right:4%;
    bottom:9%;
    width:27%;
    height:38%;
  }

  .hero-under-image{
    min-height:24px;
    margin-top:12px;
    padding:0 2px;
    align-items:center;
  }

  .hero-visual-caption b{
    font-size:10px;
    letter-spacing:.01em;
  }

  .hero-indicators{
    margin-left:auto;
  }

  /* Bring the next section up now that the decorative mini-card is gone. */
  .brand-statement{
    margin-top:52px;
  }

  /* Mini browser project cards: compact chrome on phones. */
  .card-thumb.dweb-browser-card{
    aspect-ratio:1.32;
    border-radius:14px!important;
  }

  .dweb-browser-bar,
  .dweb-archive .dweb-browser-bar{
    min-height:36px;
    flex-basis:36px;
    padding-inline:12px;
    font-size:9px;
  }

  .dweb-browser-dots i{
    width:6px;
    height:6px;
  }

  .dweb-browser-label{
    opacity:.82;
  }

  .card-info{
    min-height:0;
    padding-top:14px;
  }

  .card-info strong{
    font-size:21px;
  }

  .card-info small{
    margin-top:5px;
    font-size:12px;
    line-height:1.45;
  }
}

@media (max-width:390px){
  .wrap{
    width:calc(100% - 28px);
  }

  .header-layout .brand{
    width:142px;
  }

  .language{
    gap:5px;
  }

  .hero h1{
    font-size:clamp(44px,12vw,52px);
  }

  .hero-lead{
    font-size:14px;
  }

  .hero-links{
    gap:14px;
  }

  .button-black{
    padding-inline:17px;
  }

  .hero-link-subtle{
    font-size:12px;
  }

  .hero-right{
    margin-top:32px;
  }

  .hero-image{
    aspect-ratio:1.02;
    border-radius:26px!important;
  }

  .hero-project-tag{
    top:12px!important;
    right:11px!important;
  }

  .brand-statement{
    margin-top:44px;
  }
}