/* ============================================================
   DASTAGIR MACHINES — MOBILE.CSS
   Purpose-built mobile experience. Active on <= 1024px only.
   ============================================================ */

/* ============================================================
   1. MOBILE TOKENS
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --header-h:           56px;
    --mob-bottom-nav-h:   64px;
    --mob-pad:            16px;
    --mob-card-gap:       12px;
    --mob-card-radius:    2px;
    --mob-section-pad:    40px;
    --mob-section-gap:    32px;
  }
}

/* ============================================================
   2. BASE — prevent horizontal overflow
   ============================================================ */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  body {
    padding-bottom: calc(var(--mob-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
  }
  * { max-width: 100%; }
  img, video { max-width: 100%; height: auto; }
}

/* ============================================================
   3. HEADER
   ============================================================ */
@media (max-width: 1024px) {
  .c-header { height: var(--header-h); }
  .c-header__inner { padding-inline: var(--mob-pad); gap: 12px; }
  .c-nav           { display: none !important; }
  .c-header__link  { display: none !important; }
  .c-header__actions .btn { display: none !important; }
  .c-header__search-btn   { display: flex !important; }
  .c-header__mobile-toggle { display: none !important; }
  /* Center logo — position header as relative, logo absolutely centered */
  .c-header__inner {
    position: relative;
    justify-content: center;
  }
  .c-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  /* Search icon stays right */
  .c-header__actions { position: relative; z-index: 2; margin-left: auto; display: flex; align-items: center; gap: 4px; }
  .c-logo__img { height: 28px; width: auto; }
}

/* ============================================================
   4. CONTAINER
   ============================================================ */
@media (max-width: 1024px) {
  .container, .container--wide, .container--central {
    width: 100%;
    padding-inline: var(--mob-pad);
    max-width: 100%;
    margin-inline: 0;
  }
}

/* ============================================================
   5. HERO
   ============================================================ */
@media (max-width: 1024px) {
  .s-hero { min-height: 100svh; padding-top: var(--header-h); display: flex; align-items: flex-end; }
  .s-hero__inner { grid-template-columns: 1fr; padding-bottom: 56px; }
  .s-hero__content { max-width: 100%; text-align: center; }
  /* Eyebrow centered */
  .s-hero .t-eyebrow { display: block; text-align: center; }
  /* Headline centered */
  .s-hero__headline { font-size: clamp(2.6rem, 9vw, 4.2rem); line-height: 1.05; letter-spacing: -0.03em; margin-block: 16px; text-align: center; }
  /* Body — left-aligned for readability, full width, centered container */
  .s-hero__body { font-size: 0.9375rem; line-height: 1.65; max-width: 100%; color: rgba(255,255,255,0.7); text-align: left; }
  .s-hero__actions { flex-direction: column; gap: 12px; margin-top: 28px; align-items: stretch; }
  .s-hero__actions .btn { width: 100%; justify-content: center; height: 52px; font-size: 0.9375rem; }
  .s-hero__scroll { display: none; }
}

/* ============================================================
   6. DISCOVERY TILES
   ============================================================ */
@media (max-width: 1024px) {
  .s-discovery { padding-block: var(--mob-section-pad); }
  .s-discovery__heading { font-size: clamp(1.4rem, 5vw, 2rem); margin-bottom: 20px; }
  .s-discovery__grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .s-discovery__tile { padding: 20px 16px; min-height: 120px; }
  .s-discovery__tile-num { font-size: 0.6875rem; margin-bottom: 8px; }
  .s-discovery__tile-title { font-size: 0.9375rem; margin-bottom: 6px; }
  .s-discovery__tile-desc { font-size: 0.8125rem; line-height: 1.5; }
  .s-discovery__tile-arrow { font-size: 0.75rem; margin-top: 12px; }
}
@media (max-width: 375px) {
  .s-discovery__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   7. MACHINES — homepage horizontal carousel
   ============================================================ */
@media (max-width: 1024px) {
  .s-machines { padding-block: var(--mob-section-pad); overflow: hidden; }
  .s-machines__header { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 20px; padding-inline: var(--mob-pad); }
  .s-machines__header-title { font-size: clamp(1.4rem, 5vw, 2rem); }
  .s-machines__grid {
    display: flex; flex-direction: row;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    gap: var(--mob-card-gap);
    padding-inline: var(--mob-pad);
    padding-bottom: 12px;
    padding-right: calc(var(--mob-pad) + 40px);
  }
  .s-machines__grid::-webkit-scrollbar { display: none; }
  .c-machine-card {
    flex-shrink: 0; width: 72vw; min-width: 260px; max-width: 320px;
    aspect-ratio: 3/4; scroll-snap-align: start; border-radius: var(--mob-card-radius);
  }
  .c-machine-card__name { font-size: 1.25rem; }
  .c-machine-card__spec { font-size: 0.8125rem; }
  .c-machine-card__category { font-size: 0.6875rem; }
}

/* ============================================================
   8. MACHINE LISTING ITEMS
   ============================================================ */
@media (max-width: 1024px) {
  .c-machine-listing { display: block; margin-bottom: 2px; }
  .c-machine-listing-item { display: grid; grid-template-columns: 1fr; min-height: auto; }
  .c-machine-listing-item__media { aspect-ratio: 16/9; min-height: auto; position: relative; }
  .c-machine-listing-item__media.u-img-placeholder::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .c-machine-listing-item__body { padding: 20px 16px; }
  .c-machine-listing-item__name { font-size: clamp(1.3rem, 5vw, 1.75rem); }
  .c-machine-listing-item__desc { font-size: 0.875rem; margin-top: 8px; line-height: 1.6; }
  .c-machine-listing-item__specs { margin-top: 16px; }
  .c-machine-listing-item__spec { padding: 8px 0; }
  .c-machine-listing-item__cta { margin-top: 20px; display: flex; gap: 10px; }
  .c-machine-listing-item__cta .btn { flex: 1; justify-content: center; height: 48px; }
}

/* ============================================================
   9. PAGE HERO (inner pages)
   ============================================================ */
@media (max-width: 1024px) {
  .s-page-hero {
    min-height: 260px;
    padding-top: calc(var(--header-h) + var(--mob-pad));
    padding-bottom: var(--mob-section-pad);
    align-items: flex-end;
  }
  .s-page-hero__heading { font-size: clamp(2rem, 8vw, 3rem); margin-bottom: 12px; }
  .s-page-hero__sub { font-size: 0.9375rem; max-width: 100%; }
  .s-page-hero__inner { max-width: 100%; }
}

/* ============================================================
   10. MACHINE DETAIL HERO
   ============================================================ */
@media (max-width: 1024px) {
  .s-machine-detail-hero {
    display: flex; flex-direction: column;
    min-height: auto; padding-top: var(--header-h);
  }
  .s-machine-detail-hero__media {
    width: 100%; height: 60vw; min-height: 220px; max-height: 360px; position: relative;
  }
  .s-machine-detail-hero__media.u-img-placeholder::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .s-machine-detail-hero__media-overlay {
    background: linear-gradient(0deg, var(--c-n100) 0%, transparent 50%);
  }
  .s-machine-detail-hero__content {
    flex: 1; padding: 24px var(--mob-pad) 32px;
    background: var(--c-n100); color: var(--c-n0);
  }
  .s-machine-detail-hero__category {
    font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--c-primary); font-weight: 600; margin-bottom: 8px;
  }
  .s-machine-detail-hero__name {
    font-size: clamp(2.4rem, 10vw, 3.5rem); font-weight: 700;
    letter-spacing: -0.03em; line-height: 1; margin-bottom: 16px;
  }
  .s-machine-detail-hero__body {
    font-size: 0.9375rem; line-height: 1.65; color: rgba(255,255,255,0.65); margin-bottom: 24px;
  }
  .s-machine-detail-hero__actions { display: flex; flex-direction: column; gap: 10px; }
  .s-machine-detail-hero__actions .btn { width: 100%; justify-content: center; height: 52px; }
}

/* ============================================================
   11. MACHINE OVERVIEW + SPECS TABLE
   ============================================================ */
@media (max-width: 1024px) {
  .s-machine-overview { padding-block: var(--mob-section-pad); }
  .s-machine-overview__inner { grid-template-columns: 1fr; gap: var(--mob-section-gap); }
  .s-machine-overview__body p { font-size: 0.9375rem; line-height: 1.7; }

  .c-specs-table { border: 1px solid var(--c-n40); background: var(--c-n0); }
  .c-specs-table__row {
    flex-direction: column; gap: 2px; padding: 14px 16px;
    border-bottom: 1px solid var(--c-n40);
  }
  .c-specs-table__row:last-child { border-bottom: none; }
  .c-specs-table__label {
    font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--c-n70); font-weight: 600;
  }
  .c-specs-table__value { font-size: 0.9375rem; font-weight: 600; color: var(--c-n100); margin-top: 2px; }
}

/* ============================================================
   12. CAPABILITIES GRID
   ============================================================ */
@media (max-width: 1024px) {
  .c-capabilities-grid { grid-template-columns: 1fr 1fr !important; gap: 1px; }
  .c-capability-item { padding: 16px 14px; }
  .c-capability-item__title { font-size: 0.9375rem; }
  .c-capability-item__desc { font-size: 0.8125rem; }
}
@media (max-width: 480px) {
  .c-capabilities-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   13. SOLUTIONS
   ============================================================ */
@media (max-width: 1024px) {
  .s-solutions { padding-block: var(--mob-section-pad); }
  .s-solutions__inner { grid-template-columns: 1fr; gap: var(--mob-section-gap); }
  .s-solutions__media { aspect-ratio: 16/9; max-height: 260px; }
  .c-solution-row { grid-template-columns: 1fr; min-height: auto; }
  .c-solution-row__media { min-height: 200px; }
  .c-solution-row__body { padding: 24px var(--mob-pad); }
  .c-solution-row--reversed .c-solution-row__media { order: 0; }
  .c-solution-row--reversed .c-solution-row__body { order: 1; }
  .c-solution-row__title { font-size: clamp(1.3rem, 5vw, 1.8rem); }
}

/* ============================================================
   14. SERVICES
   ============================================================ */
@media (max-width: 1024px) {
  .s-services-hp__inner { grid-template-columns: 1fr; }
  .s-services-hp__left { position: static; }
  .s-services-hp__grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .c-service-row { grid-template-columns: 1fr; }
  .c-service-row__media { min-height: 180px; }
  .c-service-row__body { border-left: none; border-top: 1px solid var(--c-n40); padding: 20px var(--mob-pad); }
}
@media (max-width: 480px) {
  .s-services-hp__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   15. SPARE PARTS
   ============================================================ */
@media (max-width: 1024px) {
  .c-parts-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .c-part-card { padding: 16px; }
  .c-part-card__name { font-size: 0.9375rem; }
  .c-part-card__desc { font-size: 0.8125rem; }
}
@media (max-width: 480px) {
  .c-parts-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   16. EVENTS
   ============================================================ */
@media (max-width: 1024px) {
  .c-events-year__grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .c-event-past-card__body { padding: 16px; }
  .c-event-past-card__name { font-size: 1rem; }
  .c-event-upcoming-card { grid-template-columns: 1fr; }
  .c-event-upcoming-card__actions {
    align-items: flex-start; padding: 16px;
    flex-direction: row; border-top: 1px solid var(--c-n40);
  }
}
@media (max-width: 480px) {
  .c-events-year__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   17. CONTACT
   ============================================================ */
@media (max-width: 1024px) {
  .s-contact-main__inner { grid-template-columns: 1fr; }
  .c-contact-info { position: static; padding: 24px var(--mob-pad); }
  .c-contact-form { padding: 24px var(--mob-pad); }
  .c-form-grid { grid-template-columns: 1fr; }
  .c-form-group--full { grid-column: 1; }
}

/* ============================================================
   18. COMPANY
   ============================================================ */
@media (max-width: 1024px) {
  .s-company-hp__inner { grid-template-columns: 1fr; }
  .s-company-hp__media { max-height: 260px; aspect-ratio: 16/9; }
  .s-company-intro__inner { grid-template-columns: 1fr; }
}

/* ============================================================
   19. STATS GRID
   ============================================================ */
@media (max-width: 1024px) {
  .c-stats-grid { grid-template-columns: 1fr 1fr; gap: 1px; }
  .c-stat-item { padding: 24px 16px; }
  .c-stat-item__num { font-size: clamp(2rem, 8vw, 3rem); }
}
@media (max-width: 375px) {
  .c-stats-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   20. SECTIONS
   ============================================================ */
@media (max-width: 1024px) {
  .s-section, .s-section--light, .s-section--dark, .s-section--bg {
    padding-block: var(--mob-section-pad);
  }
  .s-section--lg { padding-block: calc(var(--mob-section-pad) * 1.5); }
  .s-header { margin-bottom: var(--mob-section-gap); }
  .s-header__body { font-size: 0.9375rem; }
  .t-h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .t-h3 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  .t-eyebrow { font-size: 0.6875rem; }
}

/* ============================================================
   21. CTA BAND
   ============================================================ */
@media (max-width: 1024px) {
  .s-cta-band { padding-block: var(--mob-section-pad); }
  .s-cta-band__inner { flex-direction: column; gap: 20px; align-items: flex-start; }
  .s-cta-band__heading { font-size: clamp(1.4rem, 5.5vw, 2rem); line-height: 1.2; }
  .s-cta-band__actions { width: 100%; flex-direction: column; gap: 10px; }
  .s-cta-band__actions .btn { width: 100%; justify-content: center; height: 52px; }
}

/* ============================================================
   22. FOOTER
   ============================================================ */
@media (max-width: 1024px) {
  .c-footer { padding-block: var(--mob-section-pad); }
  .c-footer__main { grid-template-columns: 1fr; gap: 32px; }
  .c-footer__col-title { font-size: 0.75rem; }
  .c-footer__nav { gap: 10px; }
  .c-footer__nav a { font-size: 0.875rem; }
  .c-footer__bottom {
    flex-direction: column; align-items: flex-start; gap: 12px;
    margin-top: 24px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .c-footer__legal { font-size: 0.75rem; }
  .c-footer__tagline { font-size: 0.875rem; }
}

/* ============================================================
   23. BOTTOM NAVIGATION BAR — hidden on desktop
   ============================================================ */
.c-mob-nav { display: none; }

@media (max-width: 1024px) {
  .c-mob-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 900;
    height: calc(var(--mob-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--c-n0);
    border-top: 1px solid var(--c-n40);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
    align-items: stretch;
  }

  .c-mob-nav__item {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    padding: 8px 4px 4px;
    text-decoration: none;
    color: var(--c-n70);
    font-size: 0.625rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    cursor: pointer; background: none; border: none;
    font-family: var(--f-body);
    transition: color var(--tr-fast);
    -webkit-tap-highlight-color: transparent;
    min-height: 44px; position: relative;
  }
  .c-mob-nav__item:hover,
  .c-mob-nav__item.is-active { color: var(--c-primary); }
  .c-mob-nav__item.is-active::before {
    content: ''; position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px; background: var(--c-primary);
    border-radius: 0 0 2px 2px;
  }

  .c-mob-nav__icon {
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .c-mob-nav__icon svg {
    width: 22px; height: 22px;
    stroke: currentColor; fill: none;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke var(--tr-fast);
  }
  .c-mob-nav__label { line-height: 1; }
}

/* ============================================================
   24. BOTTOM MENU SHEET — hidden on desktop
   ============================================================ */
.c-mob-sheet { display: none; }

@media (max-width: 1024px) {
  .c-mob-sheet-backdrop {
    position: fixed; inset: 0; z-index: 950;
    background: rgba(0,0,0,0.55);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(2px);
  }
  .c-mob-sheet-backdrop.is-visible { opacity: 1; pointer-events: all; }

  .c-mob-sheet {
    display: flex; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 960;
    max-height: 92svh;
    background: var(--c-n0);
    transform: translateY(100%);
    transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }
  .c-mob-sheet.is-open { transform: translateY(0); }

  .c-mob-sheet__handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: var(--c-n60); margin: 12px auto 0; flex-shrink: 0;
  }

  .c-mob-sheet__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--c-n40); flex-shrink: 0;
  }
  .c-mob-sheet__title {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--c-n70);
  }
  .c-mob-sheet__close {
    width: 36px; height: 36px; display: flex;
    align-items: center; justify-content: center;
    border: none; background: var(--c-n40); border-radius: 50%;
    cursor: pointer; color: var(--c-n100);
    -webkit-tap-highlight-color: transparent;
  }

  .c-mob-sheet__body {
    overflow-y: auto; flex: 1;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }

  .c-mob-sheet__cat {
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--c-n70);
    padding: 20px 20px 8px; display: block;
  }

  .c-mob-sheet__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 20px; font-size: 1rem; font-weight: 500;
    color: var(--c-n100); text-decoration: none;
    border-bottom: 1px solid var(--c-n40);
    -webkit-tap-highlight-color: transparent;
    transition: background var(--tr-fast), color var(--tr-fast);
    min-height: 52px;
  }
  .c-mob-sheet__link:hover, .c-mob-sheet__link:focus {
    background: var(--c-n20); color: var(--c-primary);
  }
  .c-mob-sheet__link--sub {
    font-size: 0.9375rem; font-weight: 400; padding-left: 32px;
    color: var(--c-n80); background: var(--c-n20); min-height: 48px;
  }
  .c-mob-sheet__link svg { flex-shrink: 0; opacity: 0.35; }
  .c-mob-sheet__link--accent { color: var(--c-primary); font-weight: 600; }

  .c-mob-sheet__divider {
    height: 8px; background: var(--c-n20); margin: 0;
    border-top: 1px solid var(--c-n40); border-bottom: 1px solid var(--c-n40);
  }

  .c-mob-sheet__actions {
    padding: 16px 20px; display: flex; flex-direction: column;
    gap: 10px; flex-shrink: 0;
    border-top: 1px solid var(--c-n40); background: var(--c-n0);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .c-mob-sheet__actions .btn { width: 100%; justify-content: center; height: 52px; }
}

/* ============================================================
   25. HIDE LEGACY MOBILE MENU (replaced by sheet)
   ============================================================ */
@media (max-width: 1024px) {
  .c-mobile-menu { display: none !important; }
  .c-header__mobile-toggle { display: none !important; }
}

/* ============================================================
   26. LIGHTBOX — mobile
   ============================================================ */
@media (max-width: 1024px) {
  .c-lightbox__stage { padding: 0 48px; }
  .c-lightbox__nav { width: 40px; height: 40px; }
  .c-lightbox__nav--prev { left: 4px; }
  .c-lightbox__nav--next { right: 4px; }
  .c-lightbox__thumb { width: 56px; height: 42px; }
  .c-lightbox__header { padding: 12px 16px; }
  .c-lightbox__title { font-size: 0.9375rem; }
}

/* ============================================================
   27. RTL (Arabic)
   ============================================================ */
[dir="rtl"] .c-mob-nav { flex-direction: row-reverse; }
[dir="rtl"] .c-mob-sheet__link { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .c-mob-sheet__link--sub { padding-left: 20px; padding-right: 32px; }
[dir="rtl"] .c-mob-sheet__cat { text-align: right; }

/* ============================================================
   28. MISC OVERRIDES
   ============================================================ */
@media (max-width: 1024px) {
  .s-page-hero__breadcrumb { flex-wrap: wrap; }
  .c-search-overlay__inner { padding: 24px var(--mob-pad); width: 100%; }
  .c-search-overlay__input { font-size: 1.25rem; }
  .c-events-nav { flex-wrap: wrap; gap: 4px; }
  .c-events-nav__btn { font-size: 0.8125rem; padding: 8px 14px; }
}

/* ============================================================
   29. HOMEPAGE — Stats 4-column → 2×2 on mobile
   ============================================================ */
@media (max-width: 1024px) {
  .c-stats-grid--4 {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 375px) {
  .c-stats-grid--4 {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   30. HOMEPAGE — "Our Story" CTA centered on mobile
   ============================================================ */
@media (max-width: 1024px) {
  .s-company-hp__cta {
    justify-content: flex-start; /* stays left-aligned on mobile like body text */
  }
}

/* ============================================================
   31. FOOTER TAGLINE — centered, comfortable width
   ============================================================ */
@media (max-width: 1024px) {
  .c-footer__tagline {
    max-width: 100%;
    text-align: left;
    padding-right: 0;
  }
  .c-footer__brand {
    text-align: left;
  }
}

/* ============================================================
   32. MACHINES PAGE — wider text container
   ============================================================ */
@media (max-width: 1024px) {
  .s-page-hero__sub {
    max-width: 100%;
    font-size: 0.9375rem;
    line-height: 1.7;
    padding-right: 0;
  }
  .s-machines-listing {
    padding-block: var(--mob-section-pad);
  }
  .c-machine-listing-item__body {
    padding: 24px var(--mob-pad) 28px;
  }
  .c-machine-listing-item__name {
    font-size: clamp(1.5rem, 6vw, 2rem);
    margin-bottom: 12px;
  }
  .c-machine-listing-item__desc {
    font-size: 0.9375rem;
    line-height: 1.7;
    max-width: 100%;
  }
}

/* ============================================================
   33. SOLUTIONS — 04 Bespoke mobile
   ============================================================ */
@media (max-width: 1024px) {
  .c-bespoke__media {
    aspect-ratio: 16/9 !important;
    margin-bottom: var(--mob-section-gap) !important;
  }
  .c-bespoke__text {
    max-width: 100%;
  }
}

/* ============================================================
   34. CONTACT — What to Expect horizontal scroll on mobile
   ============================================================ */
@media (max-width: 1024px) {
  /* Override grid → horizontal flex scroll */
  .c-expect-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    background: var(--c-n40);
    /* show peek of next card */
    padding-right: 40px;
  }
  .c-expect-grid::-webkit-scrollbar { display: none; }
  .c-expect-card {
    flex-shrink: 0;
    width: 78vw;
    min-width: 260px;
    max-width: 320px;
    scroll-snap-align: start;
    /* reset gap for scroll */
    gap: 0;
  }
  .c-expect-card__num { margin-bottom: 8px; }
}

/* ============================================================
   35. SPARE PARTS — mobile card optimization
   ============================================================ */
@media (max-width: 1024px) {
  .s-spare-parts {
    padding-block: var(--mob-section-pad);
  }

  /* Search + filter bar */
  .c-filters-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .c-search-input-wrap {
    max-width: 100% !important;
    width: 100%;
  }
  .c-search-input {
    width: 100%;
    height: 48px;
    font-size: 0.9375rem;
  }
  /* Filter buttons row: horizontal scroll instead of wrapping */
  .c-filters-bar-btns {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .c-filters-bar-btns::-webkit-scrollbar { display: none; }
  .c-filter-btn {
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    font-size: 0.8125rem;
    white-space: nowrap;
  }

  /* Parts grid → single column */
  .c-parts-grid {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  /* Part card — full-width mobile card */
  .c-part-card {
    flex-direction: column;
    border: none;
    border-bottom: 1px solid var(--c-n40);
    border-radius: 0;
  }
  .c-part-card:last-child { border-bottom: none; }
  .c-part-card:hover { box-shadow: none; border-color: var(--c-n40); }

  /* Consistent image area */
  .c-part-card__media {
    aspect-ratio: 16/9;
    width: 100%;
    background: var(--c-n20);
  }

  /* Body with comfortable padding */
  .c-part-card__body {
    padding: 16px var(--mob-pad);
    gap: 6px;
  }

  .c-part-card__compat {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
  }
  .c-part-card__name {
    font-size: 1.125rem;
    margin-bottom: 4px;
  }
  .c-part-card__desc {
    font-size: 0.875rem;
    line-height: 1.55;
    /* cap long descriptions on mobile */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .c-part-card__footer {
    padding: 12px var(--mob-pad) 16px;
    border-top: 1px solid var(--c-n40);
  }
  .c-part-card__footer .btn-link {
    font-size: 0.9375rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    min-height: 44px; /* touch target */
  }
}


/* Spare parts quality band inline grid override on mobile */
@media (max-width: 1024px) {
  .s-section--dark [style*="grid-template-columns:1fr 1fr"],
  .s-section--dark [style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mob-section-gap) !important;
  }
}

/* Applications / 2-col content sections — collapse to single column on mobile */
@media (max-width: 1024px) {
  .c-section-2col {
    grid-template-columns: 1fr !important;
    gap: var(--mob-section-gap) !important;
  }
}

/* ============================================================
   COMPANY PAGE — MOBILE OPTIMISATION
   ============================================================ */

/* Intro section: stack vertically */
@media (max-width: 1024px) {
  .s-company-intro__inner {
    grid-template-columns: 1fr !important;
    gap: var(--mob-section-gap) !important;
  }
}

/* Stats grid: 4-col → 2x2 on mobile */
@media (max-width: 1024px) {
  .c-company-stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .c-company-stats > div {
    padding: var(--sp-xl) var(--sp-md) !important;
  }
}

/* Capabilities grid: 4-col → 2x2 on mobile */
@media (max-width: 1024px) {
  .c-company-caps {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  .c-company-caps {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   TIMELINE — STORYTELLING ANIMATION (mobile)
   ============================================================ */
@media (max-width: 1024px) {

  /* Timeline container: single vertical column */
  .c-timeline {
    position: relative;
    padding-left: 0;
  }

  /* Vertical connecting line */
  .c-timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, var(--c-primary) 0%, rgba(0,0,0,0.08) 100%);
  }

  /* Each chapter card */
  .c-timeline__item {
    position: relative;
    padding: var(--sp-lg) var(--sp-lg) var(--sp-lg) 52px;
    margin-bottom: var(--sp-sm);
    background: var(--c-n0);
    border: 1px solid var(--c-n30);
    border-left: 3px solid var(--c-primary);
    border-radius: 2px;

    /* Storytelling slide-in from left */
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* When js-reveal triggers (IntersectionObserver adds .is-visible) */
  .c-timeline__item.is-visible {
    opacity: 1;
    transform: translateX(0);
  }

  /* Stagger each chapter's reveal */
  .c-timeline__item:nth-child(2) { transition-delay: 0.1s; }
  .c-timeline__item:nth-child(3) { transition-delay: 0.2s; }
  .c-timeline__item:nth-child(4) { transition-delay: 0.3s; }
  .c-timeline__item:nth-child(5) { transition-delay: 0.4s; }

  /* Dot repositioned to sit on the left line */
  .c-timeline__dot {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c-primary);
    border: 2px solid var(--c-n0);
    box-shadow: 0 0 0 2px var(--c-primary);
    z-index: 1;
  }

  /* Year — bold, prominent chapter marker */
  .c-timeline__year {
    font-size: var(--t-base);
    font-weight: 700;
    color: var(--c-primary);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1;
  }

  /* Title */
  .c-timeline__title {
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--c-n100);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
    line-height: 1.3;
  }

  /* Description */
  .c-timeline__desc {
    font-size: var(--t-sm);
    color: var(--c-n70);
    line-height: 1.6;
    margin: 0;
  }

  /* Facility image: full-width on mobile */
  .s-section--bg .c-section-2col > div[style*="aspect-ratio"] {
    aspect-ratio: 16/9 !important;
  }
}