/* =====================================================
   MOBILE — SERVICES PAGE
   Created by Prompt 04. Depends on mobile-global.css.
   ===================================================== */

@media (max-width: 768px) {

  /* ── SECTION 1: HERO ── */
  .services-hero {
    height: 100vh;
    height: 100dvh;
    display: flex;
    align-items: flex-end;
    padding: 0;
    position: relative;
    overflow: hidden;
    background-image: url('/assets/images/mobile/mobile-bts-studio-crew.jpg');
    background-size: cover;
    background-position: center center;
  }

  .services-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(10, 6, 4, 0.3) 0%,
      rgba(10, 6, 4, 0.65) 60%,
      rgba(10, 6, 4, 0.95) 100%
    );
    z-index: 1;
  }

  .services-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 35%;
    opacity: 0.2;
    filter: saturate(0.5) brightness(0.4);
  }

  /* Hide line and subtitle phases */
  .services-hero__phase-line,
  .services-hero__phase-subtitle {
    display: none !important;
  }

  /* Show title phase with gradient */
  .services-hero__phase {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    opacity: 1 !important;
    padding: 0 20px 64px;
    width: 100%;
    background: linear-gradient(to top, rgba(10,6,4,0.9) 0%, rgba(10,6,4,0.5) 50%, transparent 100%);
  }

  .services-hero__phase-title {
    position: relative;
    inset: auto;
    display: block;
    opacity: 1 !important;
  }

  .services-hero__title {
    font-size: var(--mobile-hero-title);
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    margin-bottom: 8px;
  }

  .services-hero__tagline {
    font-size: 15px;
    color: var(--munk-sand);
    line-height: 1.6;
    text-align: left;
    opacity: 1 !important;
  }

  .services-hero__sub-tag {
    font-size: var(--mobile-micro);
    color: var(--munk-amber);
    opacity: 1 !important;
    margin-top: 8px;
  }

  .services-hero__scroll { display: none !important; }
  .services-hero__vignette { display: none; }
  .services-hero__line { display: none; }

  /* ── SECTION 2: IMPACT STATS ── */
  .services-impact {
    min-height: auto;
    height: auto !important;
    padding: 48px 16px;
    overflow: hidden;
  }

  .services-impact::before,
  .services-impact::after {
    display: none;
  }

  .impact__label {
    opacity: 1 !important;
    transform: none !important;
    padding: 0;
    margin-bottom: 24px;
  }

  .impact__grid {
    display: flex;
    gap: 16px;
    padding: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .impact__grid::-webkit-scrollbar {
    display: none;
  }

  .impact__col {
    flex: 0 0 180px;
    scroll-snap-align: start;
    text-align: center;
    padding: 28px 16px;
    background: rgba(26, 20, 16, 0.6);
    border: 1px solid rgba(82, 60, 31, 0.2);
    border-radius: var(--mobile-radius-md);
    opacity: 1 !important;
    transform: none !important;
  }

  .impact__number {
    font-size: 32px;
    color: var(--munk-amber);
    margin-bottom: 6px;
    opacity: 1 !important;
    transform: none !important;
  }

  .impact__caption {
    font-size: 11px;
    color: var(--munk-sand);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .impact__sweep {
    display: none;
  }

  /* ── SECTION 3: MANIFESTO ── */
  .services-manifesto {
    height: auto !important;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
  }

  .manifesto__vignette { display: none; }
  .manifesto__grain { display: none; }

  .manifesto__pin {
    text-align: center;
    padding: 0;
  }

  .manifesto__line-1,
  .manifesto__line-2 {
    font-size: clamp(1.6rem, 5vw, 32px);
  }

  .manifesto__word {
    opacity: 1 !important;
    transform: none !important;
  }

  .manifesto__divider {
    transform: scaleX(1) !important;
  }

  .manifesto__sub {
    font-size: 15px;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    line-height: 1.6;
  }

  /* ── SECTIONS 4-5, 7-8: SERVICE CARDS ── */
  .svc {
    min-height: auto;
    height: auto !important;
    padding: 0;
    margin-bottom: 24px;
  }

  .svc__watermark { display: none; }
  .svc__grain { display: none; }

  .svc__split {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    min-height: auto;
  }

  .svc__split--content-right .svc__content { order: 2; }
  .svc__split--content-right .svc__image-wrap { order: 1; }

  .svc__image-wrap {
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: 0;
  }

  .svc__image-wrap::after { display: none; }
  .svc__brackets { display: none; }
  .svc__img-ambient { display: none; }

  .svc__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: none !important;
    transform: none !important;
  }

  .svc__content {
    padding: 32px 20px 48px;
  }

  .svc__tag {
    font-size: var(--mobile-micro);
    color: var(--munk-amber);
    margin-bottom: 12px;
    opacity: 1 !important;
    transform: none !important;
  }

  .svc__title {
    font-size: 28px;
    margin-bottom: 12px;
    clip-path: none !important;
    opacity: 1 !important;
  }

  .svc__divider {
    transform: scaleX(1) !important;
  }

  .svc__desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--munk-sand);
    margin-bottom: 20px;
    max-width: 100%;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .svc__features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    list-style: none;
    margin-bottom: 20px;
  }

  .svc__features li {
    font-size: 14px;
    opacity: 1 !important;
    transform: none !important;
  }

  .svc__result {
    opacity: 1 !important;
  }

  .svc__cta {
    opacity: 1 !important;
    transform: none !important;
    width: 100%;
    justify-content: center;
    min-height: var(--mobile-touch-min);
    -webkit-tap-highlight-color: transparent;
  }

  /* ── SECTION 6: INTERLUDE ── */
  .svc-interlude {
    padding: 48px 24px;
    min-height: 40vh;
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .svc-interlude__grain { display: none; }

  .svc-interlude__mark {
    font-size: 120px;
    opacity: 1 !important;
  }

  .svc-interlude__quote p {
    font-size: clamp(20px, 5.5vw, 28px);
    line-height: 1.4;
    opacity: 1 !important;
    transform: none !important;
  }

  .svc-interlude__byline {
    opacity: 1 !important;
    font-size: 12px;
  }

  /* ── SECTION 9: CASES ── */
  .cases {
    height: auto !important;
    padding: 64px 0;
    overflow: hidden;
  }

  .cases__track {
    display: flex;
    gap: 16px;
    padding: 0 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    height: auto;
    will-change: auto;
    transform: none !important;
  }

  .cases__track::-webkit-scrollbar {
    display: none;
  }

  .cases__progress {
    display: none !important;
  }

  .cases__panel {
    flex: 0 0 300px;
    scroll-snap-align: start;
    height: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    border-radius: var(--mobile-radius-lg);
    overflow: hidden;
    background: rgba(26, 20, 16, 0.6);
    border: 1px solid rgba(82, 60, 31, 0.15);
    opacity: 1 !important;
    transform: none !important;
  }

  .cases__panel-image {
    height: 200px;
    width: 100%;
  }

  .cases__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.6) brightness(0.7);
  }

  .cases__img-vignette {
    display: none;
  }

  .cases__panel-content {
    padding: 20px;
  }

  .cases__chapter {
    font-size: 11px;
    margin-bottom: 12px;
    color: var(--munk-amber);
    opacity: 1 !important;
    transform: none !important;
  }

  .cases__brand {
    font-size: 12px;
    margin-bottom: 8px;
    opacity: 1 !important;
    transform: none !important;
  }

  .cases__headline {
    font-size: 18px;
    margin-bottom: 10px;
    opacity: 1 !important;
    transform: none !important;
  }

  .cases__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--munk-sand);
    margin-bottom: 16px;
    max-width: 100%;
    opacity: 1 !important;
    transform: none !important;
  }

  .cases__stats {
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 16px;
    opacity: 1 !important;
    transform: none !important;
  }

  .cases__stat-num {
    font-size: 22px;
    color: var(--munk-amber);
    opacity: 1 !important;
    transform: none !important;
  }

  .cases__stat-label {
    font-size: 11px;
    opacity: 1 !important;
  }

  /* ── SECTION 10: PROOF / TESTIMONIALS ── */
  .proof {
    height: auto !important;
    padding: 64px 20px;
  }

  .proof::before {
    display: none;
  }

  .proof__title {
    font-size: var(--mobile-section-title);
    text-align: center;
    margin-bottom: 32px;
    opacity: 1 !important;
    transform: none !important;
  }

  .proof__cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 48px;
  }

  .proof__card {
    padding: var(--mobile-card-pad);
    border-radius: var(--mobile-radius-md);
    background: rgba(26, 20, 16, 0.5);
    border: 1px solid rgba(82, 60, 31, 0.15);
    opacity: 1 !important;
    transform: none !important;
  }

  .proof__card p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 16px;
  }

  .proof__card cite strong {
    font-size: 14px;
  }

  .proof__card cite span {
    font-size: 12px;
    color: var(--munk-bark);
  }

  .proof__brands-row {
    gap: 20px;
    justify-content: center;
  }

  .proof__brand {
    font-size: 14px;
    padding: 8px 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .proof__brands-label {
    font-size: 11px;
    margin-bottom: 20px;
  }

  /* ── SECTION 11: FAQ ── */
  .services-faq {
    height: auto !important;
    padding: 64px 20px;
  }

  .services-faq::after {
    display: none;
  }

  .faq-header {
    margin-bottom: 32px;
  }

  .faq-title {
    font-size: var(--mobile-section-title);
    text-align: center;
    opacity: 1 !important;
  }

  .faq-subtitle {
    font-size: 15px;
    text-align: center;
    color: var(--munk-sand);
    opacity: 1 !important;
  }

  .faq-question {
    padding: 20px 32px 20px 0;
    font-size: 16px;
    min-height: var(--mobile-touch-min);
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }

  .faq-answer {
    padding: 0 0 20px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--munk-sand);
  }

  /* ── SECTION 12: CTA ── */
  .svc-cta {
    height: auto !important;
    min-height: auto;
    padding: 64px 20px;
    text-align: center;
  }

  .svc-cta__grain,
  .svc-cta__vignette {
    display: none;
  }

  .svc-cta__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.25);
  }

  .svc-cta__inner {
    position: relative;
    z-index: 2;
    padding: 0;
    max-width: 100%;
  }

  .svc-cta__title {
    font-size: var(--mobile-section-title);
    margin-bottom: 12px;
    opacity: 1 !important;
    transform: none !important;
  }

  .svc-cta__sub {
    font-size: 15px;
    color: var(--munk-sand);
    margin-bottom: 24px;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .svc-cta__buttons {
    flex-direction: column;
    gap: 12px;
  }

  .svc-cta__btn {
    width: 100%;
    justify-content: center;
    min-height: var(--mobile-touch-min);
    opacity: 1 !important;
    transform: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  .svc-cta__tag {
    opacity: 1 !important;
    margin-top: 32px;
    font-size: var(--mobile-micro);
  }

  /* ── 480px REFINEMENTS ── */
  @media (max-width: 480px) {
    .svc__image-wrap {
      height: 220px;
    }

    .svc__content {
      padding: 24px 16px 40px;
    }

    .cases__panel {
      flex: 0 0 260px;
    }

    .impact__col {
      flex: 0 0 160px;
    }

    .svc-interlude__mark {
      display: none;
    }

    .svc-cta__title {
      font-size: clamp(1.6rem, 7vw, 28px);
    }
  }

} /* end 768px */