/* ==========================================================================
   APEX MOTORWORKS — responsive layer
   Desktop-first: ≤1280 compact desktop · ≤1024 tablet · ≤767 mobile · ≤420 small
   Interaction model switches on (hover: none) rather than width.
   ========================================================================== */

/* ---------------------------------------------------------- wide screens */
@media (min-width: 1921px) {
  :root { --maxw: 1840px; }
}

/* ------------------------------------------------------- compact desktop */
@media (max-width: 1280px) {
  .svc__link { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 26ch) 88px 22px; }
  .trust__value { font-size: clamp(2.1rem, 4.4vw, 4.4rem); }
  .method__head { grid-column: 1 / span 4; }
  .method__num { grid-column: 5 / span 3; font-size: clamp(8rem, 18vw, 20rem); }
  .case { flex-basis: min(84vw, 1100px); }
  .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1024px) {
  :root { --sec-pad: clamp(84px, 12vw, 140px); }

  .site-nav, .header-phone { display: none; }
  .menu-toggle { display: block; }

  .hero { height: calc(100svh + 55vh); }
  .hero__notes { display: none; }
  .hero__content { bottom: clamp(96px, 14vh, 150px); }

  .trust { margin-top: -16vh; padding-top: calc(16vh + 24px); background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0, var(--c-black) 16vh); }
  .trust__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .trust__item:nth-child(4) { border-left: 0; padding-left: 0; }

  /* The machine: unpinned editorial stack. */
  .machine { height: auto; }
  .machine__pin { position: relative; min-height: 0; padding-block: var(--sec-pad); }
  .machine__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .machine__head, .machine__figure, .machine__copy { grid-column: 1 / -1; grid-row: auto; }
  .machine__head { pointer-events: auto; }
  .machine__title .line { transform: none !important; }
  .machine__copy { max-width: 640px; }

  .sec-head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .compare__tabs { justify-self: start; }

  .systems__stage { grid-template-columns: minmax(0, 1fr); }
  .systems__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .systems__tabs [role="tab"] { padding-left: 14px; border-left: 1px solid var(--c-line); }
  .systems__tabs [role="tab"]:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .systems__panel { min-height: 0; }

  .diagnose__grid { grid-template-columns: minmax(0, 1fr); }
  .console { min-height: 0; }

  .film { height: 180vh; }

  /* Method: unpinned, each step a full editorial block. */
  .method { height: auto; }
  .method__pin { position: relative; height: auto; padding-block: var(--sec-pad); }
  .method__grid { grid-template-columns: minmax(0, 1fr); }
  .method__head { grid-column: 1 / -1; margin-bottom: 48px; }
  .method__nav, .method__bar, .method__num { display: none; }
  .method__steps { grid-column: 1 / -1; min-height: 0; display: grid; gap: 72px; }
  .step, .step.is-past { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; }

  /* Work: native swipe carousel. */
  .work { height: auto; }
  .work__pin { position: relative; height: auto; padding-block: var(--sec-pad); }
  .work__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .work__viewport::-webkit-scrollbar { display: none; }
  .work__track { padding-inline: var(--gutter); }
  .case { flex-basis: min(78vw, 760px); grid-template-columns: minmax(0, 1fr); scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .work__hint { display: block; }

  .creds__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred { min-height: 250px; }

  .marques__head { grid-template-columns: minmax(0, 1fr); }

  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__head { position: static; }

  .book-start__grid { grid-template-columns: minmax(0, 1fr); }
  .location__grid { grid-template-columns: minmax(0, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }

  /* Sub-pages */
  .page-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .svc-detail__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-detail:nth-child(even) .svc-detail__media { order: 0; }
  .svc-detail__media { position: relative; top: auto; aspect-ratio: 16 / 10; }
  .case-file { grid-template-columns: minmax(0, 1fr); }
  .case-file__body { position: static; }
  .story__grid { grid-template-columns: minmax(0, 1fr); }
  .timeline__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
  .principle { grid-template-columns: 56px minmax(0, 1fr); }
  .principle p { grid-column: 2; }
  .booking__grid { grid-template-columns: minmax(0, 1fr); }
  .booking__aside { position: static; }
  .booking__steps, .booking__assure { display: none; }
  .booking__summary { display: none; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
  :root { --header-h: 64px; --gutter: 20px; }
  html { scroll-padding-bottom: 96px; } /* keep focused controls clear of the dock */
  .film__pin { height: 100svh; }

  body { font-size: 1rem; }
  .brand__sub { display: none; }
  .site-header__actions { gap: 8px; }
  .site-header__actions .btn { display: none; }

  .hero { height: calc(100svh + 40vh); }
  .hero__video { object-position: 50% 50%; }
  .hero__shade {
    background:
      linear-gradient(180deg, rgba(10, 10, 11, 0.5) 0%, rgba(10, 10, 11, 0) 30%),
      linear-gradient(0deg, rgba(10, 10, 11, 0.9) 0%, rgba(10, 10, 11, 0.2) 45%, rgba(10, 10, 11, 0) 60%);
  }
  .hero__content { top: calc(var(--header-h) + 28px); bottom: auto; }
  .hero__title { font-size: 12.4vw; margin: 0.3em 0 0.4em; }
  .hero__lede { font-size: 1.05rem; max-width: 30ch; }
  .hero__ctas { margin-top: 26px; }
  .hero__ctas .btn { flex: 1 1 auto; }
  .hero__readout, .hero__coords { display: none; }
  .hero__foot { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  .hero__intro-diag { gap: 14px; font-size: 0.625rem; }
  .hero__intro-label { letter-spacing: 0.3em; }

  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .trust__item { border-left: 0; padding: 20px 0 0; border-top: 1px solid var(--c-line); }
  .trust__item:nth-child(4) { padding-left: 0; }
  .trust__item:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--c-line); }
  .trust__item:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .trust__value { font-size: 2.6rem; }

  .sec-title { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .machine__title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .mnote__text { font-size: 0.75rem; padding: 6px 9px; }
  .mnote:nth-child(odd) .mnote__text { left: auto; right: 22px; border-left: 0; border-right: 1px solid var(--c-amber); text-align: right; }

  .systems__drawing { padding: 12px; }
  .systems__hotspots { inset: 12px; }
  .hotspot { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 0.5625rem; }
  .systems__plate { display: none; }
  .systems__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .systems__tabs [role="tab"], .systems__tabs [role="tab"]:nth-child(3n + 1) { padding-left: 0; border-left: 0; }
  .systems__tabs [role="tab"]:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--c-line); }

  .svc__link { grid-template-columns: 30px minmax(0, 1fr) 72px; gap: 8px 14px; align-items: start; }
  .svc__idx { padding-top: 0.6em; }
  .svc__name { font-size: clamp(1.45rem, 7.4vw, 2.2rem); }
  .svc__desc { grid-column: 2; grid-row: 2; opacity: 1; transform: none; }
  .svc__meta { grid-column: 2; grid-row: 3; text-align: left; line-height: 1.4; }
  .svc__meta br { display: none; }
  .svc__arrow { display: none; }

  .symptom { min-height: 56px; font-size: 0.9375rem; gap: 10px; }
  .console__scope { height: 140px; }
  .console__body { padding: 20px 16px 24px; }

  .film { height: 150vh; }
  .film__line { font-size: 13.5vw; }
  .film__meta { flex-direction: column; gap: 4px; bottom: calc(96px + env(safe-area-inset-bottom)); }

  .step__visual { padding: 14px; }
  .viz__grid { gap: 4px; }

  .compare__tabs { width: 100%; }
  .compare__tabs [role="tab"] { flex: 1; justify-content: center; padding: 0 10px; font-size: 0.875rem; }
  .ba__stage { aspect-ratio: 4 / 3.4; }
  .ba__label { top: 12px; padding: 7px 9px; }
  .ba__label--before { left: 12px; }
  .ba__label--after { right: 12px; }
  .ba__label span { display: none; }
  .ba__knob { width: 52px; height: 52px; left: -26px; margin-top: -26px; }

  .work__head { flex-direction: column; align-items: flex-start; }
  .work__meta { width: 100%; justify-content: space-between; }
  .case { flex-basis: 86vw; }
  .case__facts > div { grid-template-columns: 76px minmax(0, 1fr); }

  .voices { min-height: 0; }
  .voices__stage { min-height: 360px; }
  .voice blockquote p { font-size: clamp(2rem, 9.4vw, 2.8rem); }
  .voices__source { margin-left: 0; width: 100%; }

  .creds__grid { grid-template-columns: minmax(0, 1fr); }
  .cred { min-height: 0; }
  .marques__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marque, .marque:nth-child(5n + 1) { padding: 24px 14px 26px; min-height: 0; }
  .marque:nth-child(odd) { padding-left: 0; }
  .marque:nth-child(5n) { border-right: 1px solid var(--c-line); }
  .marque:nth-child(even) { border-right: 0; }

  /* Pricing becomes a stacked spec list — no horizontal scroll. */
  .estimate__table { min-width: 0; }
  .estimate__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .estimate__table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
  .estimate__table tbody th, .estimate__table td { width: auto; padding: 0; border: 0; }
  .estimate__table tbody th { grid-column: 1 / -1; font-size: 1.2rem; }
  .estimate__table td:nth-of-type(1) { grid-column: 1 / -1; font-size: 0.875rem; }
  .estimate__table .price { font-size: 1.4rem; }
  .estimate__table td:last-child { align-self: end; text-align: right; }

  .faq__item summary { grid-template-columns: 30px minmax(0, 1fr) 16px; gap: 12px; font-size: 1.05rem; min-height: 64px; }
  .faq__a p { padding: 0 0 24px 42px; }

  .book-start__preview { margin-top: 28px; }
  .form { padding: 22px 18px; }

  .emergency { min-height: 88vh; }
  .emergency__title { font-size: clamp(2.6rem, 12.4vw, 4rem); }
  .emergency__ctas .btn { flex: 1 1 100%; }

  .location__facts > div { grid-template-columns: 96px minmax(0, 1fr); }
  .location__map { aspect-ratio: 4 / 4.2; }
  .map__label text { font-size: 14px; }

  .footer__word { font-size: 13.2vw; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__base { flex-direction: column; }
  .site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

  /* Sticky call / book dock. */
  .dock {
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 50;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    border: 1px solid var(--c-line-2);
    background: rgba(15, 16, 18, 0.9);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transform: translate3d(0, 150%, 0);
    transition: transform 0.6s var(--ease-out);
  }
  .dock.is-visible { transform: none; }
  .menu-open .dock { transform: translate3d(0, 150%, 0); }
  .dock a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 58px;
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .dock__call { background: var(--c-bone); color: var(--c-black); }
  .dock__call .led { margin-right: 4px; }

  /* Sub-pages */
  .page-hero__media { aspect-ratio: 4 / 3; }
  .svc-jump ul { padding-inline: 0; }
  .svc-detail__cols { grid-template-columns: minmax(0, 1fr); }
  .svc-detail__spec { grid-template-columns: minmax(0, 1fr); }
  .svc-detail__spec > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); }
  .case-file__stats { grid-template-columns: minmax(0, 1fr); }
  .case-file__stats > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--c-line); padding-top: 12px; }
  .timeline__list { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1px solid var(--c-line); row-gap: 36px; }
  .timeline__item { padding: 0 0 0 24px; }
  .timeline__item::before { left: -5px; top: 10px; }
  .team__grid { grid-template-columns: minmax(0, 1fr); }
  .tech { min-height: 0; }
  .principle { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .principle p { grid-column: 1; }
  .config__fields, .form__grid { grid-template-columns: minmax(0, 1fr); }
  .choice-grid { grid-template-columns: minmax(0, 1fr); }
  .choice:nth-child(even) { padding-left: 0; border-left: 0; }
  .calendar__grid { gap: 4px; }
  .day { font-size: 0.9375rem; min-height: 40px; }
  .day small { font-size: 0.5rem; }
  .review > div { grid-template-columns: minmax(0, 1fr) auto; }
  .review dt { grid-column: 1 / -1; }
  .config__nav .btn { flex: 1; }
  .config__bar { flex-wrap: wrap; }
  .config__progress { order: 3; flex-basis: 100%; max-width: none; }
  .channel { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ------------------------------------------------------------ small phones */
@media (max-width: 420px) {
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; }
  .symptoms__grid { grid-template-columns: minmax(0, 1fr); }
  .symptom:nth-child(even) { padding-left: 0; border-left: 0; }
  .viz__caption span:last-child { display: none; }
  .compare__tabs [role="tab"] .mono { display: none; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------- touch-first devices */
@media (hover: none) {
  .svc__thumb { display: block; grid-column: 3; grid-row: 1 / span 3; width: 72px; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-ink); }
  .svc__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .svc__desc { opacity: 1; transform: none; }
  .marque__name { color: rgba(236, 232, 225, 0.7); }
  .marque__info { opacity: 1; transform: none; }
  .svc-preview { display: none; }
  .cred::before { display: none; }
}
@media (hover: none) and (min-width: 768px) {
  .svc__link { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 24ch) 88px; }
  .svc__thumb { display: none; }
  .svc__arrow { display: none; }
}

/* ----------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; }
  .machine, .method, .film { height: auto; }
  .machine__pin, .method__pin, .film__pin { position: relative; }
  .film__pin { height: 80vh; }
  .film__frame { transform: none; }
  .method__nav, .method__bar, .method__num { display: none; }
  .method__grid { grid-template-columns: minmax(0, 1fr); }
  .method__head, .method__steps { grid-column: 1 / -1; }
  .method__steps { min-height: 0; display: grid; gap: 64px; }
  .step, .step.is-past { position: relative; opacity: 1; visibility: visible; transform: none; }
  .work { height: auto; }
  .work__pin { position: relative; height: auto; padding-block: var(--sec-pad); }
  .work__viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
  .case { scroll-snap-align: start; }
  .trust { margin-top: 0; padding-top: clamp(64px, 8vw, 120px); background: var(--c-black); }
}