/*
 * ═══════════════════════════════════════════════════
 *  DEKADA DIGITAL — Mobile CSS
 *  mobile.css — loaded after dekada-global.css
 *  Clean, surgical overrides based on actual HTML structure
 * ═══════════════════════════════════════════════════
 */

/* ════════════════════════════════════════
   TABLET + MOBILE  (≤ 860px)
   ════════════════════════════════════════ */
@media (max-width: 860px) {

  /* ── Global padding ── */
  .inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ══════════════════════════════════════
     HEADER
     ══════════════════════════════════════ */
  header {
    background: #151515 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  .hdr-inner { padding: 0 20px !important; }
  .hdr-nav   { display: none !important; }
  .hdr-cta   { display: none !important; }
  .hdr-menu-btn, #menu-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ══════════════════════════════════════
     INDEX — HERO  (.snap.dark#hero)
     ══════════════════════════════════════ */
  #hero {
    height: auto !important;
    min-height: 0 !important;
  }
  .inner.hero-c,
  .hero-c {
    padding-top: 96px !important;
    padding-bottom: 48px !important;
  }
  .hero-ring   { display: none !important; }
  .hero-btns   {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .hero-desc   { font-size: 15px !important; }
  .hl--big     { font-size: clamp(38px,10vw,62px) !important; }

  /* ══════════════════════════════════════
     INDEX — VALUES  (#values)
     ══════════════════════════════════════ */
  #values { padding-top: 48px !important; padding-bottom: 48px !important; }
  .vals   { grid-template-columns: 1fr !important; gap: 20px !important; }
  .val    { padding: 24px 20px !important; }

  /* ══════════════════════════════════════
     CLIENTS LOGO TICKER
     ══════════════════════════════════════ */
  .logo-ticker-outer { padding: 24px 0 !important; }
  .logo-item img     { height: 36px !important; }

  /* ══════════════════════════════════════
     INDEX — SERVICES  (#services)
     ══════════════════════════════════════ */
  #services { padding-top: 48px !important; padding-bottom: 48px !important; }
  .srv-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .sc       { padding: 28px 22px !important; }
  .srv-hd   { flex-direction: column !important; gap: 10px !important; }

  /* ══════════════════════════════════════
     INDEX — ABOUT TEASER  (#about)
     ══════════════════════════════════════ */
  #about { padding-top: 48px !important; padding-bottom: 48px !important; }
  .about { grid-template-columns: 1fr !important; gap: 32px !important; }
  .about-vis { min-height: 220px !important; }
  .cmpd-new-layout { flex-direction: column !important; }
  .cmpd-left-col, .cmpd-right-col { width: 100% !important; }

  /* ══════════════════════════════════════
     INDEX — WORK CARDS  (#work)
     ══════════════════════════════════════ */
  #work { padding-top: 48px !important; padding-bottom: 48px !important; }
  .work-hd-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .work-cards-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 12px !important;
    padding: 0 20px 16px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .work-cards-grid::-webkit-scrollbar { display: none !important; }
  .wk-card {
    flex: 0 0 90% !important;
    scroll-snap-align: start !important;
    max-width: none !important;
    min-width: 0 !important;
  }
  .wk-nav { display: none !important; }

  /* ══════════════════════════════════════
     INDEX — PROCESS  (#process)
     ══════════════════════════════════════ */
  #process { padding-top: 48px !important; padding-bottom: 48px !important; }
  .proc-top {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
  }
  .proc-rows { gap: 0 !important; }

  .proc-row {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto !important;
    gap: 0 14px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    align-items: start !important;
  }
  /* Hide the left text column (week labels) */
  .proc-left { display: none !important; }

  /* Show proc-mid (has circle + CTA) in column 1 */
  .proc-mid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    padding-top: 2px !important;
  }
  /* Hide the vertical connector lines, keep circle + CTA */
  .proc-line { display: none !important; }
  .proc-circle {
    display: flex !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
  }

  /* CTA button — keep visible below circle */
  .proc-letstalk, #proc-letstalk {
    display: inline-flex !important;
    margin-top: 12px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    min-width: auto !important;
    width: auto !important;
  }

  /* Right column: process content */
  .proc-right {
    grid-column: 2 !important;
    grid-row: 1 !important;
    padding-left: 0 !important;
    padding-top: 0 !important;
  }
  .proc-name {
    font-size: clamp(16px, 4.5vw, 22px) !important;
    margin-bottom: 6px !important;
  }
  .proc-right p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    color: rgba(255,255,255,.55) !important;
  }

  /* ══════════════════════════════════════
     TESTIMONIALS  (#testi, .pk-testi)
     ══════════════════════════════════════ */
  #testi, .pk-testi {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .grow-top     { padding: 0 !important; }
  .grow-headline { font-size: clamp(26px,7vw,44px) !important; }
  .gq-slider-outer { overflow: hidden !important; }
  .gq-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 8px 20px 16px !important;
    gap: 14px !important;
  }
  .gq-slider .gq,
  .gq-slider .gq--mid {
    flex: 0 0 82vw !important;
    width: 82vw !important;
  }
  .gq-nav { padding: 12px 0 32px !important; }

  /* ══════════════════════════════════════
     CONTACT  (.contact-sec)
     ══════════════════════════════════════ */
  .contact-sec {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .contact-wrap {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .cf-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .contact-intro { font-size: 15px !important; }

  /* ══════════════════════════════════════
     FOOTER  (#footer)
     ══════════════════════════════════════ */
  .sft-inner-row { padding: 32px 20px !important; }
  .sft-email {
    font-size: clamp(24px, 7vw, 44px) !important;
    white-space: normal !important;
    word-break: break-word !important;
    letter-spacing: -1px !important;
  }
  .sft-brand { font-size: 10px !important; }
  .fqi  { padding: 32px 20px 24px !important; }
  .fci  { padding: 24px 20px !important; grid-template-columns: 1fr 1fr !important; }
  .fbot {
    padding: 12px 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 12px !important;
  }

  /* ══════════════════════════════════════
     ABOUT PAGE  (.ab-hero, .ab-sec)
     ══════════════════════════════════════ */
  .ab-hero {
    min-height: 0 !important;
    padding: 100px 0 44px !important;
  }
  .ab-hero .inner { position: relative !important; z-index: 2 !important; }
  .ab-hero-sub {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ab-hero-stats {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .ab-sec { padding-top: 48px !important; padding-bottom: 48px !important; }
  .ab-cols { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ab-team-grid { grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
  .ab-mission-wrap { grid-template-columns: 1fr !important; gap: 24px !important; }
  .ab-val { padding: 20px !important; }

  /* ══════════════════════════════════════
     WORK PAGE  (.pk-hero, .pk-section)
     ══════════════════════════════════════ */
  .pk-hero {
    min-height: 0 !important;
    padding: 100px 0 44px !important;
  }
  .pk-hero-inner { padding: 0 !important; }
  .pk-hero-hl {
    font-size: clamp(34px, 9vw, 58px) !important;
    line-height: 1.05 !important;
  }
  .pk-section { padding: 48px 0 !important; }
  .pk-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .pk-filter {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
  .pk-filter-btn { padding: 7px 14px !important; font-size: 13px !important; }

  /* ══════════════════════════════════════
     SERVICE PAGES  (.pg-hero, .pg-sec)
     ══════════════════════════════════════ */
  .pg-hero {
    min-height: 0 !important;
    flex-direction: column !important;
    padding: 0 !important;
  }
  .pg-hero .inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 88px !important;
    padding-bottom: 32px !important;
  }
  .pg-hero .hero-img-col {
    position: relative !important;
    width: 100% !important;
    height: 200px !important;
    top: auto !important; right: auto !important; bottom: auto !important;
  }
  .pg-hero .hero-img-col::before {
    background: linear-gradient(to bottom, var(--dark) 0%, transparent 60%) !important;
  }
  .pg-sec { padding-top: 48px !important; padding-bottom: 48px !important; }
  .pg-white { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Service inner grids */
  .srv-scope-grid, .scope-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .srv-works-grid, .srv-work-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }

  /* FAQ */
  .lfaq-wrap { max-width: 100% !important; }
  .lfaq-q { padding: 16px 0 !important; font-size: 15px !important; }
  .lfaq-body { font-size: 14px !important; }

  /* Section headings */
  .hl {
    font-size: clamp(28px, 7vw, 44px) !important;
    letter-spacing: -1px !important;
  }
}

/* ════════════════════════════════════════
   SMALL PHONES  (≤ 480px)
   ════════════════════════════════════════ */
@media (max-width: 480px) {
  .inner { padding-left: 16px !important; padding-right: 16px !important; }
  .hdr-inner { padding: 0 16px !important; }

  .hero-c { padding-top: 88px !important; padding-bottom: 40px !important; }
  .ab-hero { padding: 88px 0 36px !important; }
  .pk-hero { padding: 88px 0 36px !important; }
  .pg-hero .inner { padding-top: 80px !important; padding-bottom: 24px !important; }
  .pg-hero .hero-img-col { height: 170px !important; }

  .wk-card { flex: 0 0 92% !important; }
  .gq-slider .gq,
  .gq-slider .gq--mid { flex: 0 0 86vw !important; width: 86vw !important; }

  .ab-team-grid { grid-template-columns: 1fr !important; }
  .srv-works-grid, .srv-work-grid { grid-template-columns: 1fr !important; }
  .fci { grid-template-columns: 1fr !important; gap: 16px !important; }
  .sft-email { font-size: clamp(20px, 8vw, 36px) !important; }

  .proc-row { grid-template-columns: 38px 1fr !important; gap: 0 10px !important; }
  .proc-circle { width: 32px !important; height: 32px !important; font-size: 11px !important; }
  .proc-letstalk, #proc-letstalk {
    padding: 9px 14px !important;
    font-size: 12px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   SCROLL FIX — eliminates double-scroll and empty spaces
   Must be last in file to override all previous rules
   ════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

  /* Disable the snap-scroll container — becomes normal page flow */
  #sc {
    height: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
  }

  /* Remove snap behaviour and min-height from every snap section */
  .snap {
    min-height: 0 !important;
    height: auto !important;
    scroll-snap-align: none !important;
    scroll-snap-stop: unset !important;
  }

  /* Body / html must not have extra overflow constraints on mobile */
  html, body {
    overflow-x: hidden !important;
    /* Do NOT set overflow-y — let it scroll naturally */
  }

  /* Remove any fixed heights that cause empty space */
  .snap.dark,
  .snap.white,
  .snap#hero,
  .snap#values,
  .snap#clients,
  .snap#services,
  .snap#about,
  .snap#work,
  .snap#process,
  .snap#testi,
  .snap#contact,
  .snap#footer {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Sections — compact, no forced heights */
  .snap:not(#hero):not(#footer) {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  /* Footer snap section */
  #footer {
    min-height: 0 !important;
    height: auto !important;
  }

  /* page-wrap on non-index pages */
  #page-wrap {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  /* Prevent horizontal overflow everywhere */
  section, .ab-sec, .pg-sec, .pg-white {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
}