/* Phone layouts: keep the live controls and the connected dashboard readable. */
.experience-controls { margin-block: 12px 16px; }
button, a, summary { touch-action: manipulation; }
.field input, .field select, .field textarea { scroll-margin-block: 110px 24px; }

@media (max-width: 880px) {
  .rail { transform: none; }
  .nav-toggle { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
  .motion-toggle { min-width: 58px; min-height: 44px; justify-content: center; font-size: 10px; }
  .nav-inner, .nav.scrolled .nav-inner, html[lang=ar] .nav-inner { padding-block: 12px; gap: 12px; }
  .nav-links {
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links > a { flex-shrink: 0; min-height: 44px; }
  .nav-links .nl { display: flex; align-items: center; }
  .experience-tabs button { min-height: 44px; }
  .experience-play { min-width: 44px; }
  .garage-logo-toggle, .garage-play, .project-link, .text-link { min-height: 44px; }
  .footer-col a { display: flex; align-items: center; min-height: 44px; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; }
  .product-hero .hero-description, html[lang=ar] .product-hero .hero-description { font-size: 15px; line-height: 1.85; }
  .product-hero .hero-kicker { font-size: 8px; line-height: 1.8; }
  .hero-capabilities { gap: 9px 16px; }
  .hero-capabilities > span { font-size: 11px; }
  .product-hero .hero-actions .btn { font-size: 12px; min-height: 48px; }
  .product-hero .text-link { font-size: 12px; }
  .hero-build-note, html[lang=ar] .hero-build-note { font-size: 11px; line-height: 1.8; }
  .experience-overline, html[lang=ar] .experience-overline { font-size: 8px; line-height: 1.6; flex-wrap: wrap; }
  .experience-overline > span:last-child, html[lang=ar] .experience-overline > span:last-child { display: inline; font-size: 7px; }
  .experience-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; }
  .experience-tabs button, html[lang=ar] .experience-tabs button { font-size: 12px; gap: 7px; padding: 10px 7px; }
  .experience-tabs button > span { font-size: 8px; }
  .experience-controls { gap: 8px; }
  .experience-play { font-size: 17px; }
  .experience-stage { height: auto; margin-inline: 0; perspective: 1400px; }
  .experience-rig { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 22px 6px 10px; }
  .experience-wires { display: none; }
  .experience-site { top: 14px; left: 0; width: 190px; opacity: .4; pointer-events: none; }
  .experience-phone, html[lang=ar] .experience-phone {
    position: relative; order: 1; top: auto; right: auto; width: 252px; max-width: calc(100% - 12px); height: 532px;
    flex-shrink: 0; padding: 7px; transform: translateZ(12px) rotateY(-5deg) rotateZ(2deg);
  }
  .exp-phone-status { height: 34px; font-size: 9px; }
  .experience-screen { padding: 10px 14px 20px; display: flex; flex-direction: column; }
  .experience-screen > * { flex-shrink: 0; }
  .exp-app-title, html[lang=ar] .exp-app-title { font-size: 25px; }
  .exp-app-sub { font-size: 10px; margin: 5px 0 13px; }
  .exp-wallet-card { padding: 16px 12px 12px; }
  .exp-wallet-brand b { font-size: 18px; }
  .exp-wallet-brand small { font-size: 7px; letter-spacing: .08em; }
  .exp-wallet-brand img { width: 30px; height: 30px; }
  .exp-stamps { gap: 6px; margin: 18px 0 14px; }
  .exp-stamps > i { width: 29px; height: 29px; }
  .exp-wallet-count { font-size: 10px; }
  .exp-wallet-count > b { font-size: 13px; }
  .exp-barcode { height: 25px; }
  .exp-wallet-id { font-size: 5px; }
  .exp-phone-hint { font-size: 10px; margin: 14px 0 10px; }
  .experience-action { min-height: 46px; margin-top: auto; font-size: 11px; padding: 11px 10px; line-height: 1.5; }
  .experience-action > span { font-size: 15px; }
  .demo-brand-line { font-size: 12px; }
  .demo-web-hero { padding-top: 16px; }
  .demo-web-hero > small { font-size: 7px; }
  .demo-web-hero > h3, html[lang=ar] .demo-web-hero > h3 { font-size: 28px; }
  .demo-web-hero > p { font-size: 11px; }
  .demo-web-visual { height: 95px; margin-block: 14px; }
  .demo-web-caption { font-size: 9px; margin-bottom: 14px; }
  .demo-booking-service b { font-size: 12px; }
  .demo-booking-service small { font-size: 9px; }
  .demo-booking-month { font-size: 11px; }
  .demo-dates > span { font-size: 9px; padding-block: 9px; }
  .demo-dates b { font-size: 16px; }
  .demo-slot-label, .demo-booking-note { font-size: 9px; }
  .demo-slots span { font-size: 10px; padding-block: 8px; }
  .demo-product-image { height: 104px; }
  .demo-product h4 { font-size: 11px; line-height: 1.5; }
  .demo-product > span, .demo-cart-total { font-size: 10px; }
  .demo-cart-note { font-size: 11px; line-height: 1.8; margin-block: 14px; }
  .experience-dashboard {
    position: relative; order: 2; top: auto; left: auto; width: 100%; min-height: 0; padding: 16px;
    transform: translateZ(0) rotateY(3deg) rotateZ(-1deg);
  }
  .exp-dashboard-top { font-size: 12px; }
  .exp-dashboard-top b { display: inline; font-size: 8px; }
  .dash-demo-tag { font-size: 7px; }
  .exp-dashboard-heading { font-size: 10px; }
  .exp-online { font-size: 8px; }
  .experience-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .exp-main-metric > span { font-size: 10px; }
  .exp-main-metric > strong { font-size: 36px; }
  .exp-mini-metrics { flex-direction: column; gap: 8px; margin-top: 0; }
  .exp-mini-metrics > div { flex-direction: row; align-items: baseline; gap: 8px; }
  .exp-mini-metrics b { font-size: 14px; }
  .exp-mini-metrics span { font-size: 9px; }
  .experience-chart { height: 30px; }
  .exp-dashboard-foot { font-size: 8px; }
  .experience-sync { position: relative; order: 3; left: auto; bottom: auto; min-width: 0; width: 100%; max-width: none; padding: 14px; transform: translateZ(0); }
  .experience-sync small { font-size: 8px; }
  .experience-sync strong { font-size: 14px; }
  .experience-sync > div > span { font-size: 10px; line-height: 1.6; }
  .experience-chapter { font-size: 9px; }
  .experience-explanation h2, html[lang=ar] .experience-explanation h2 { font-size: 18px; }
  .experience-explanation p, html[lang=ar] .experience-explanation p { font-size: 13px; line-height: 1.85; }
  .experience-disclaimer, html[lang=ar] .experience-disclaimer { font-size: 10px; }
  .product-hero .hero-bottom p { font-size: 10px; }
  .build-item { min-height: 294px; }
  .build-item > span.build-title { font-size: 15px; max-width: none; }
  .build-item > span.build-description, html[lang=ar] .build-item > span.build-description { font-size: 11px; line-height: 1.8; max-width: none; padding-inline-end: 6px; }
  .web p, .project-bottom p, .ind-desc { font-size: 13px; }
  .project-meta { flex-wrap: wrap; }
  .project-link { font-size: 12px; }
  .link-disc { width: 40px; height: 40px; }
  .project-tags span { font-size: 9px; }
  .garage-hero-frame figcaption { flex-wrap: wrap; }
  .garage-hero-frame figcaption > span { max-width: none; font-size: 11px; flex: 1 1 130px; }
  .garage-logo-toggle { font-size: 11px; padding-inline: 12px; }
  .garage-play { min-height: 48px; }
  .garage-heading > p, html[lang=ar] .garage-heading > p { font-size: 13px; }
  .garage-video-heading { font-size: 9px; }
  .garage-stations { flex-wrap: wrap; gap: 8px 12px; }
  .garage-stations > span { font-size: 10px; }
  .pick { min-height: 76px; padding: 13px 11px; }
  .pick-copy > b { font-size: 13px; }
  .pick-copy > span { font-size: 11px; line-height: 1.7; }
  .pick svg { width: 20px; height: 20px; flex-shrink: 0; }
  .field label { font-size: 11px; }
  .field input, .field select { min-height: 48px; }
  .form-card .btn { min-height: 48px; }
  .footer-col a { font-size: 12px; overflow-wrap: anywhere; }
  .footer-col h4 { font-size: 9px; }
  .page-hero .display { overflow-wrap: break-word; }
}

@media (max-width: 360px) {
  :root { --gutter: 16px; }
  .nav .brand { font-size: 23px; }
  .nav-inner, .nav.scrolled .nav-inner, html[lang=ar] .nav-inner { gap: 8px; }
  .web-grid { grid-template-columns: 1fr; gap: 32px; }
  .semantic-web-frame .meaning-model { transform: scale(.95); }
  .build-item { padding-inline: 10px; }
}

@media (pointer: coarse) {
  .nav-links, .experience-dashboard, .experience-sync, .garage-play { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* The project picker uses the same objects and GSAP loops as the capability grid. */
.pick {
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  min-height: 124px;
  gap: 10px;
  padding: 19px 12px 15px;
  background: radial-gradient(ellipse at 18% 50%, #1F4E4C38, transparent 75%), #0E1314;
}
.pick-art { position: relative; display: block; width: 78px; height: 84px; pointer-events: none; }
.pick-art .meaning-model {
  position: absolute; top: 50%; left: 50%; width: 220px; height: 188px;
  transform: translate(-50%, -50%) scale(.35); transform-origin: center; margin: 0;
}
.pick-art .model-object { inset: 6px 5px 20px; }
.pick-art .model-shadow { bottom: 7px; }
.pick-copy { min-width: 0; margin: 0; }
.pick-copy > b { font-size: 12px; line-height: 1.5; padding-inline-end: 8px; }
.pick-copy > span { font-size: 10px; line-height: 1.65; margin-top: 5px; }
.pick-more { grid-column: auto; }
.pick[aria-pressed=true] { border-color: #D9911F; background: radial-gradient(ellipse at 18% 50%, #D9911F25, transparent 80%), #182122; }
.form-card .form-title { line-height: 1.5; padding-block: 4px; }
@media (min-width: 881px) and (max-width: 1150px) {
  .pick { grid-template-columns: 1fr; gap: 5px; }
  .pick-art { justify-self: center; }
}
@media (max-width: 620px) {
  .pick { grid-template-columns: 86px minmax(0, 1fr); gap: 12px; min-height: 126px; padding: 17px 12px; }
  .pick-art { width: 86px; height: 88px; }
  .pick-art .meaning-model { transform: translate(-50%, -50%) scale(.39); }
  .pick-copy > b { font-size: 13px; }
  .pick-copy > span { font-size: 11px; }
}
@media (max-width: 360px) {
  .pick { grid-template-columns: 64px minmax(0, 1fr); gap: 9px; padding-inline: 10px; }
  .pick-art { width: 64px; }
  .pick-art .meaning-model { transform: translate(-50%, -50%) scale(.3); }
}

/* Keep the decorative rail within the document at desktop widths too. */
.rail { transform: none; }
/* Service details use concise icon cards; full 3D models retain their own layout. */
.service-page .build-item:not([data-model]) { min-height: 150px; justify-content: center; gap: 16px; }
.service-page .build-item:not([data-model]) > svg { display: block; flex: 0 0 26px; width: 26px; height: 26px; }
.service-page .build-item:not([data-model]) > span { font-size: 14px; line-height: 1.65; padding-inline-end: 8px; }