/* Mobile is treated as its own composition, not a scaled desktop layout. */
.intro-team { margin-top: 18px !important; padding-top: 18px; border-top: 1px solid rgba(8,11,16,.18); }

@media (max-width: 720px) {
  html { scroll-padding-top: 68px; }
  body { width: 100%; overflow-x: clip; }
  .cursor-glow { display: none; }
  .noise { opacity: .035; }

  .header { position: fixed; height: 68px; padding: 0 16px; background: linear-gradient(180deg,rgba(6,12,21,.82),rgba(6,12,21,0)); backdrop-filter: blur(2px); }
  .header .brand img { width: 48px !important; }
  .locale-switch { order: 2; margin: 0 10px 0 auto; min-width: 33px; min-height: 33px; background: rgba(6,14,24,.48); }
  .menu { order: 3; width: 42px; height: 42px; padding: 9px 7px; border: 1px solid currentColor; border-radius: 50%; }
  .menu span { width: 17px; margin: 5px auto; }

  .hero { height: 100svh; min-height: 680px; padding: 104px 16px 0; }
  .hero-top .eyebrow:first-child { font-size: 9px; }
  .hero-top .eyebrow:last-child { display: none; }
  .hero-copy { margin-top: clamp(72px,14vh,120px); }
  .hero-kicker { max-width: 205px; font-size: 10px; line-height: 1.45; }
  .hero h1 { max-width: 100%; font-size: 1px; line-height: .82; letter-spacing: -.095em; }
  .hero h1 br { display: none; }
  .hero h1 b,.hero h1 span { display: block; width: max-content; font-family: Syne,sans-serif; font-weight: 800; line-height: .82; }
  .hero h1 .hero-line-move { font-size: clamp(66px,20vw,82px); }
  .hero h1 span { margin-left: 7vw; font-size: clamp(70px,21.5vw,88px); }
  .hero h1 .hero-line-business { margin-top: 8px; font-size: clamp(42px,12.8vw,53px); }
  .orbital { width: 100vw; right: -54%; top: 21%; opacity: .78; }
  .hero-bottom { left: 16px; right: 16px; bottom: 77px; gap: 18px; }
  .hero-bottom p { max-width: 225px; font-size: 10.5px; line-height: 1.5; }
  .round-link { flex: 0 0 auto; width: 48px; height: 48px; background: rgba(40,96,173,.18); border: 1px solid #4c8bdd; backdrop-filter: blur(8px); }
  .round-link:hover { transform: none; }
  .marquee { height: 48px; }
  .marquee div { font-size: 10px; }

  .section-pad { padding: 72px 16px; }
  .section-label { font-size: 9px; letter-spacing: .05em; }
  .intro { padding-top: 82px; }
  .intro-content { margin: 38px 0 48px; }
  .intro h2 { font-size: clamp(43px,13.4vw,58px); line-height: .92; }
  .intro-story { margin-top: 38px; }
  .intro-content .intro-story > p { margin: 0; max-width: none; font-size: 13px; line-height: 1.7; }
  .intro-team { margin-top: 20px !important; padding: 20px 0 0 18px; border-top: 1px solid rgba(8,11,16,.18); border-left: 2px solid #2860ad; }
  .intro-assurance { display: block; margin-top: 24px; font-size: 8.5px; line-height: 1.55; }

  .metrics { display: flex; gap: 12px; margin: 0 -16px; padding: 1px 16px 20px; overflow-x: auto; scroll-snap-type: x mandatory; border: 0; scrollbar-width: none; }
  .metrics::-webkit-scrollbar { display: none; }
  .metrics div,.metrics div:not(:first-child) { flex: 0 0 78vw; min-height: 145px; padding: 22px; border: 1px solid rgba(8,11,16,.17); background: rgba(255,255,255,.56); scroll-snap-align: center; display: flex; flex-direction: column; justify-content: space-between; }
  .metrics strong { font-size: clamp(35px,10vw,46px); overflow-wrap: anywhere; }
  .metrics span { font-size: 9px; }
  .tech-stickers { margin-left: -16px; margin-right: -16px; }
  .sticker-set { min-width: 245vw; }

  .services { padding-top: 78px; }
  .services-head { margin-bottom: 36px; }
  .services h2 { margin-top: 35px; font-size: clamp(47px,14vw,62px); }
  .service { position: relative; grid-template-columns: 34px minmax(0,1fr) 42px; padding: 25px 0 27px; }
  .service:hover { padding-left: 0; background: transparent; }
  .service h3 { font-size: clamp(33px,10.5vw,45px); line-height: .9; }
  .service p { max-width: 92%; margin-top: 13px; font-size: 11px; line-height: 1.58; }
  .service i { align-self: start; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font-size: 18px; }
  .service:hover i { transform: none; }

  .method-head h2 { font-size: clamp(45px,13.5vw,60px); }
  .method-head > p { max-width: 290px !important; font-size: 12px !important; }
  .method-steps { display: flex; gap: 12px; margin: 0 -16px; padding: 0 16px 18px; overflow-x: auto; scroll-snap-type: x mandatory; border: 0; scrollbar-width: none; }
  .method-steps::-webkit-scrollbar { display: none; }
  .method-step,.method-step:not(:first-child) { flex: 0 0 78vw; min-height: 270px; padding: 22px; border: 1px solid rgba(8,11,16,.18); background: #eef1f5; scroll-snap-align: center; }
  .method-step h3 { margin-top: auto; font-size: 31px; }
  .method-step p { font-size: 12px; }

  .work-title { padding: 74px 16px 42px; }
  .work-title h2 { margin-top: 30px; font-size: clamp(52px,15vw,66px); }
  .project { margin-bottom: 1px; background: #0b111b; }
  .project-art,.project-showcase .showroom,.project-delivery .delivery-previews,
  .project-showcase .reservation-photo,.project-delivery .delivery-photo,
  .project-hr .hr-photo,.project-finance .finance-photo { height: min(92vw,390px); }
  .project-info,.project-delivery .project-info,.project-hr .project-info,.project-finance .project-info { min-height: 330px; padding: 30px 16px 36px; }
  .project-info h3,.project-showcase .project-info h3,.project-delivery .project-info h3,.project-hr .project-info h3,.project-finance .project-info h3 { margin: 44px 0 17px; font-size: clamp(49px,14.2vw,62px); line-height: .84; }
  .project-info p { max-width: 300px; font-size: 12px; line-height: 1.58; }
  .project-info a { margin-top: 10px; font-size: 10px; }
  .project-photo::after { background-size: 32px 32px; }
  .photo-tag { top: 14px; left: 14px; font-size: 8px; }

  .statement { min-height: 0; padding-top: 82px; padding-bottom: 78px; }
  .statement h2 { margin-top: 40px; font-size: clamp(45px,13.3vw,58px); }
  .statement-details { margin-top: 34px; }
  .statement-details span { max-width: 290px; padding-bottom: 12px; }
  .statement-foot { margin-top: 48px; font-size: 10px; line-height: 1.55; }

  footer { min-height: 100svh; padding: 76px 16px 26px; }
  footer h2 { margin: 48px 0 55px; font-size: clamp(60px,18vw,78px); line-height: .84; }
  .footer-mail { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; }
  .footer-socials { margin-top: 24px; }
  .footer-bottom { display: grid; grid-template-columns: 1fr auto; gap: 20px; margin-top: 110px; }
  .footer-bottom .brand { display: block; grid-column: 1 / -1; }
  .footer-bottom .brand img { width: 74px !important; }
  .footer-bottom p:last-child { display: block; text-align: right; }

  .menu-overlay { display: block; overflow: hidden; background: #0a1420; }
  .menu-art { display: none; }
  .menu-main { min-height: 100%; padding: 94px 18px 24px; background-image: linear-gradient(90deg,rgba(8,17,29,.92),rgba(8,17,29,.72)),url("assets/menu-equipe.jpg"); background-size: cover; background-position: 56% center; }
  .menu-main::before { opacity: .32; }
  .menu-overline { margin-bottom: 30px; font-size: 8px; }
  .menu-links { margin: 0; }
  .menu-link { width: max-content; max-width: 100%; font-size: clamp(43px,13.3vw,58px); line-height: 1.02; text-shadow: 0 4px 20px rgba(0,0,0,.45); }
  .menu-link::after { height: 3px; }
  .menu-bottom { position: absolute; left: 18px; right: 18px; bottom: 23px; min-height: 70px; }
  .menu-bottom p { font-size: 8px; }
  .menu-logo { left: auto; right: 0; top: 13px; width: 68px; transform: none; }

  @media (hover: none) {
    .service:active { background: rgba(12,55,112,.34); }
    .service:active i { transform: translate(3px,-3px); }
  }
}

@media (max-width: 380px) {
  .hero h1 .hero-line-move { font-size: 19vw; }
  .hero h1 span { font-size: 20.2vw; }
  .hero h1 .hero-line-business { font-size: 12.1vw; }
  .hero-bottom p { max-width: 200px; }
  .intro h2,.services h2,.method-head h2,.statement h2 { font-size: 12.8vw; }
  .project-info h3,.project-showcase .project-info h3,.project-delivery .project-info h3,.project-hr .project-info h3,.project-finance .project-info h3 { font-size: 13.6vw; }
  .menu-link { font-size: 12.2vw; }
}

@media (prefers-reduced-motion: reduce) {
  .sticker-track,.marquee div,.orbital { animation: none !important; }
}

/* Stability pass for real iOS/Android browsers. */
@media (max-width: 720px) {
  html,body { width: 100%; max-width: 100%; overflow-x: hidden !important; overscroll-behavior-x: none; }
  body { position: relative; }
  main,section,footer,.header,.work,.project,.project-art,.project-info { max-width: 100% !important; }
  main,section,footer { overflow-x: hidden !important; }
  section,footer { scroll-margin-top: 68px; }

  .header { left: 0; right: 0; width: 100%; background: rgba(7,15,25,.91); box-shadow: 0 1px 0 rgba(255,255,255,.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  body[data-ui-theme="light"] .header { background: rgba(243,245,248,.94); box-shadow: 0 1px 0 rgba(8,11,16,.1); }
  body[data-ui-theme="blue"] .header { background: rgba(34,87,161,.94); }

  .hero-copy { width: 100%; overflow: hidden; }
  .hero h1,.hero h1 b,.hero h1 span { max-width: 100%; }
  .hero h1 .hero-line-move { font-size: 17vw; white-space: nowrap; }
  .hero h1 span { margin-left: 5vw; font-size: 18vw; white-space: nowrap; }
  .hero h1 .hero-line-business { margin-top: 10px; font-size: 9.8vw; white-space: nowrap; letter-spacing: -.075em; }
  .orbital { right: -48%; }

  .intro-content,.service,.project,.statement h2,footer h2 { transform: none !important; }
  .intro-story,.intro-story p,.intro-assurance { width: 100%; max-width: 100%; overflow-wrap: break-word; }

  .metrics { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; margin: 0; padding: 0 0 20px; overflow: visible; scroll-snap-type: none; }
  .metrics div,.metrics div:not(:first-child) { width: 100%; min-width: 0; min-height: 118px; padding: 19px; }
  .metrics strong { max-width: 100%; font-size: clamp(31px,9.5vw,42px); overflow-wrap: normal; word-break: normal; }

  .tech-stickers { width: calc(100% + 32px); max-width: none; contain: paint; }

  .services,.service-list,.service { width: 100%; }
  .service { grid-template-columns: 30px minmax(0,1fr) 38px; column-gap: 8px; }
  .service > span { padding-left: 2px; }
  .service h3 { max-width: 100%; font-size: clamp(32px,9.7vw,42px); overflow-wrap: normal; }
  .service p { width: 100%; max-width: 100%; }
  .service i { justify-self: end; }

  .method-steps { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .method-step,.method-step:not(:first-child) { width: 100%; min-width: 0; min-height: 210px; padding: 20px; scroll-snap-align: none; }
  .method-step h3 { font-size: clamp(28px,8.4vw,36px); overflow-wrap: break-word; }

  .work { width: 100%; overflow: hidden !important; }
  .project { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 0 1px !important; overflow: hidden !important; transform: none !important; }
  .project-art,.project-showcase .showroom,.project-delivery .delivery-previews,
  .project-showcase .reservation-photo,.project-delivery .delivery-photo,
  .project-hr .hr-photo,.project-finance .finance-photo { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; display: block !important; flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; height: min(86vw,360px) !important; transform: none !important; }
  .project-info,.project-showcase .project-info,.project-delivery .project-info,
  .project-hr .project-info,.project-finance .project-info { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; order: 2 !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 315px !important; margin: 0 !important; padding: 28px 18px 34px !important; background: #111722 !important; color: var(--paper) !important; transform: none !important; }
  .project-info h3,.project-showcase .project-info h3,.project-delivery .project-info h3,
  .project-hr .project-info h3,.project-finance .project-info h3 { width: 100%; max-width: 100%; margin: 38px 0 18px !important; font-size: clamp(46px,12.8vw,56px) !important; line-height: .88; overflow-wrap: normal; word-break: normal; }
  .project-info p { width: 100%; max-width: 310px; margin: 0 0 24px; font-size: 12px; line-height: 1.58; }
  .project-info a { max-width: 100%; white-space: normal; }
  .project::before,.project::after { display: none !important; }

  .project.is-story-active .project-photo,.project:hover .project-photo { background-position: center center; }
  .project-showcase.is-story-active .phone,
  .project-showcase.is-story-active .showroom-card,
  .project-delivery.is-story-active .app-preview,
  .project-delivery.is-story-active .development-card { transform: none; }

  .statement,.statement-details,.statement-foot { width: 100%; max-width: 100%; }
  footer h2 { max-width: 100%; overflow-wrap: normal; }
  footer h2 { width: 100%; font-size: clamp(48px,15.2vw,62px); line-height: .88; letter-spacing: -.07em; }
}

@media (max-width: 390px) {
  .header { height: 64px; padding-left: 13px; padding-right: 13px; }
  .header .brand img { width: 43px !important; }
  .locale-switch { min-width: 31px; min-height: 31px; font-size: 9px; }
  .menu { width: 39px; height: 39px; }
  .hero { padding-left: 13px; padding-right: 13px; }
  .hero-bottom { left: 13px; right: 13px; }
  .section-pad { padding-left: 15px; padding-right: 15px; }
  .hero h1 .hero-line-move { font-size: 16.5vw; }
  .hero h1 span { font-size: 17.4vw; }
  .hero h1 .hero-line-business { font-size: 9.45vw; }
  footer h2 { font-size: 14.7vw; }
  .project-info h3,.project-showcase .project-info h3,.project-delivery .project-info h3,
  .project-hr .project-info h3,.project-finance .project-info h3 { font-size: 12.3vw !important; }
}

@media (max-width: 720px) {
  /* Never let mobile browsers replace link arrows with colorful emoji glyphs. */
  .service i,.project-info a i,.footer-mail i,.footer-socials a i {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    color: currentColor;
    font-size: 0 !important;
    line-height: 0;
    font-family: Arial,sans-serif;
    font-style: normal;
    background: none !important;
  }
  .service i { display: grid; width: 36px; height: 36px; }
  .service i::before,.project-info a i::before,.footer-mail i::before,.footer-socials a i::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translate(-28%,-72%);
  }
  .service i::after,.project-info a i::after,.footer-mail i::after,.footer-socials a i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.5px;
    background: currentColor;
    transform: translate(-58%,-50%) rotate(-45deg);
    transform-origin: center;
  }
  .footer-socials a { display: inline-flex; align-items: center; gap: 4px; }
  .footer-socials a i { width: 12px; height: 12px; }
}