/* Shared mobile layout — loaded last on both language versions. */
html,
body {
  max-width:100%;
  overflow-x:clip;
}

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

@media (max-width:768px) {
  :root { --mobile-gutter:clamp(1rem,5vw,1.5rem); }

  body { width:100%; }
  section { max-width:100%; }

  .premium-navbar {
    left:var(--mobile-gutter) !important;
    right:var(--mobile-gutter) !important;
    width:auto !important;
    max-width:none !important;
  }
  .nav-links,
  .nav-cta,
  .lang-switch { display:none !important; }
  .nav-brand img { max-width:118px !important; }
  .menu-toggle { display:flex !important; }
  .mobile-menu { width:100% !important; max-width:100% !important; }

  /* The desktop route becomes a clean vertical mobile timeline. */
  .story-intro { min-height:100svh !important; }
  .story-topline {
    inset:1.25rem var(--mobile-gutter) auto !important;
    align-items:center !important;
  }
  .story-topline img { width:108px !important; }
  .story-topline span:last-child { font-size:.48rem !important; }
  .story-opening {
    top:47% !important;
    width:calc(100% - 2 * var(--mobile-gutter)) !important;
  }
  .story-opening h1 {
    font-size:clamp(2.45rem,12vw,3.35rem) !important;
    line-height:1.02 !important;
    letter-spacing:-.05em !important;
  }
  html[dir="rtl"] .story-opening h1 {
    font-size:clamp(2.35rem,11vw,3.15rem) !important;
    line-height:1.12 !important;
    letter-spacing:-.025em !important;
  }
  .story-line { display:none !important; }
  .story-sequence::before {
    content:"";
    position:absolute;
    z-index:0;
    left:2rem;
    top:18%;
    bottom:13%;
    width:2px;
    border-radius:2px;
    background:linear-gradient(to bottom,#16bebb,rgba(22,190,187,.28));
  }
  .story-node,
  .story-node--one,
  .story-node--two,
  .story-node--three,
  .story-node--four {
    right:auto !important;
    left:4.35rem !important;
    width:calc(100% - 5.35rem) !important;
    max-width:none !important;
  }
  .story-node--one { top:17% !important; }
  .story-node--two { top:36% !important; }
  .story-node--three { top:55% !important; }
  .story-node--four { top:74% !important; }
  .story-node::before {
    position:absolute !important;
    top:.15rem !important;
    left:-2.75rem !important;
    width:11px !important;
    height:11px !important;
    margin:0 !important;
    background:#fff !important;
  }
  .story-node h2 {
    margin-top:.2rem !important;
    font-size:clamp(1.8rem,9vw,2.65rem) !important;
    line-height:1 !important;
  }
  .story-node p {
    display:block !important;
    max-width:90% !important;
    margin-top:.4rem !important;
    font-size:.7rem !important;
    line-height:1.45 !important;
  }
  html[dir="rtl"] .story-sequence::before {
    right:2rem;
    left:auto;
  }
  html[dir="rtl"] .story-node,
  html[dir="rtl"] .story-node--one,
  html[dir="rtl"] .story-node--two,
  html[dir="rtl"] .story-node--three,
  html[dir="rtl"] .story-node--four {
    right:4.35rem !important;
    left:auto !important;
    width:calc(100% - 5.35rem) !important;
  }
  html[dir="rtl"] .story-node::before {
    right:-2.75rem !important;
    left:auto !important;
  }
  html[dir="rtl"] .story-node > span,
  html[dir="rtl"] .story-node > h2,
  html[dir="rtl"] .story-node > p { left:auto !important; }

  .about-section,
  .services-section,
  .service-details-section,
  .work-section,
  .statement-video-section,
  .reach-section,
  .process-section,
  .contact-section,
  .booking-section {
    width:100% !important;
    max-width:100% !important;
    padding-left:var(--mobile-gutter) !important;
    padding-right:var(--mobile-gutter) !important;
  }

  .about-content,
  .about-cards,
  .services-content,
  .service-details-grid,
  .reach-content,
  .process-grid,
  .contact-content,
  .footer-main {
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important;
    max-width:100% !important;
  }

  /* About: mobile uses normal document flow; desktop-only pinning is disabled in JS. */
  .about-section {
    position:relative !important;
    inset:auto !important;
    min-height:0 !important;
    height:auto !important;
    padding-top:clamp(5.5rem,20vw,7rem) !important;
    padding-bottom:clamp(5rem,18vw,7rem) !important;
    overflow:hidden !important;
  }
  .about-title {
    position:relative !important;
    inset:auto !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    width:100% !important;
    margin:0 0 2.25rem !important;
    transform:none !important;
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
    gap:.12em !important;
    font-size:clamp(2.65rem,14vw,4.25rem) !important;
    line-height:.92 !important;
    letter-spacing:-.055em !important;
    text-align:start !important;
  }
  .about-title span {
    position:relative !important;
    transform:none;
    clip-path:none;
    filter:none;
  }
  html[dir="rtl"] .about-title {
    direction:rtl !important;
    letter-spacing:0 !important;
    line-height:1.08 !important;
  }
  .about-content {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    opacity:1 !important;
    transform:none !important;
  }
  .about-description {
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    font-size:clamp(1rem,4.4vw,1.15rem) !important;
    line-height:1.65 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    letter-spacing:normal !important;
  }
  .about-cards {
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:1rem !important;
    margin-top:2rem !important;
  }
  .about-card {
    position:relative !important;
    inset:auto !important;
    min-width:0 !important;
    width:100% !important;
    opacity:1 !important;
    transform:none !important;
  }

  .about-title,
  .services-header h2,
  .work-header-text h2,
  .statement-video-text h2,
  .reach-text h2,
  .process-heading h2,
  .contact-heading,
  .booking-title {
    max-width:100% !important;
    overflow-wrap:anywhere;
  }

  .premium-work-slider,
  .project-panel,
  .project-info,
  .statement-content,
  .reach-text,
  .reach-globe-wrap,
  .terminal-wrapper,
  .terminal-box {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .project-panel { grid-template-columns:1fr !important; }
  .project-info { padding-inline:0 !important; }
  .project-tags { flex-wrap:wrap !important; }
  .slider-controls { gap:.75rem !important; }

  .contact-links {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:.65rem !important;
  }
  .contact-links a {
    min-width:0 !important;
    padding:.8rem 1rem !important;
    font-size:.85rem !important;
  }

  .footer {
    width:calc(100% + 2 * var(--mobile-gutter)) !important;
    margin-left:calc(-1 * var(--mobile-gutter)) !important;
    margin-right:calc(-1 * var(--mobile-gutter)) !important;
    padding-left:var(--mobile-gutter) !important;
    padding-right:var(--mobile-gutter) !important;
  }
  .footer-main,
  .footer-bottom { gap:1.5rem !important; }
  .footer-credential {
    width:100% !important;
    max-width:100% !important;
  }
  .footer-bottom {
    flex-wrap:wrap !important;
    align-items:flex-start !important;
  }

  .style-modal-content,
  .concierge-box {
    width:calc(100% - 2rem) !important;
    max-width:none !important;
    max-height:calc(100svh - 2rem) !important;
    overflow:auto !important;
  }
  .style-modal-grid { grid-template-columns:1fr !important; }
  .digiface-concierge { left:.75rem !important; bottom:.75rem !important; }
  html[dir="rtl"] .digiface-concierge { right:.75rem !important; left:auto !important; }
  .back-to-top {
    right:.75rem !important;
    bottom:.75rem !important;
    width:52px !important;
    height:52px !important;
  }
  /* RTL still uses the physical right edge for this universal navigation control. */
  html[dir="rtl"] .back-to-top { right:.75rem !important; left:auto !important; }
}

@media (max-width:420px) {
  .story-topline span:last-child { display:none !important; }
  .story-node h2 { font-size:clamp(1.65rem,8.5vw,2.2rem) !important; }
  .story-node p { font-size:.66rem !important; }
  .footer-credential { align-items:flex-start !important; }
  .footer-credential > img { width:70px !important; height:auto !important; }
}