/* ============================================================
   Mobile responsiveness layer — loaded last.
   Goals: no dead vertical space, no broken scroll, no clipping.
   ============================================================ */

html,
body {
  max-width: 100%;
  /* clip (not hidden) so position:sticky keeps working inside the page */
  overflow-x: clip;
}
img,
video,
svg,
picture {
  max-width: 100%;
}

@media (max-width: 900px) {
  /* --- long pinned scroll stories become normal stacked sections --- */
  .story,
  .svc-story,
  .vs-cinema {
    height: auto !important;
    min-height: 0 !important;
  }
  .story-pin,
  .svc-story-pin,
  .vs-cinema-pin {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 64px 0 !important;
    display: block !important;
  }
  .story-pin > div,
  .svc-story-pin > .wrap {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 0 24px !important;
  }
  #storyWrap .img-frame,
  #svcImgFrame {
    max-width: 100% !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45) !important;
  }
  /* every service is readable without a scroll-driven reveal */
  .svc-list-item {
    opacity: 1 !important;
  }
  .svc-list-desc {
    max-height: none !important;
    margin: 8px 0 0 0 !important;
  }
  .story-progress {
    display: none !important;
  }

  /* --- header / nav --- */
  header {
    padding: 10px 14px !important;
  }
  .nav-cta {
    display: none !important;
  }
  .mobile-nav {
    max-height: 100svh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* --- hero copy tightened --- */
  .page-hero,
  .page-hero.home-hero {
    padding: 56px 20px !important;
    min-height: 0 !important;
    height: auto !important;
    text-align: left;
  }
  .page-hero-inner {
    padding: 0 !important;
    max-width: 100% !important;
  }
  .page-hero h1 {
    font-size: clamp(30px, 9.4vw, 46px) !important;
    line-height: 1.06 !important;
  }
  .hero-sub {
    font-size: 15px !important;
    margin-top: 18px !important;
  }
  .hero-ctas {
    margin-top: 24px !important;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .hero-ctas .btn {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  /* --- section rhythm: less empty space --- */
  .section {
    padding: 56px 20px !important;
  }
  .wrap {
    padding: 0 20px !important;
  }
  .section-head-split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .section-head h2,
  .foot-cta h2 {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.14 !important;
  }
  .section-head p {
    font-size: 14.5px !important;
  }

  /* --- media never crops or overflows --- */
  .home-banner-video {
    line-height: 0;
  }
  .home-banner-video video {
    height: 44svh !important;
    max-height: 44svh !important;
    object-fit: contain !important;
  }
  .page-hero.home-hero {
    padding-top: 34px !important;
  }
  .tdc-hero {
    grid-template-columns: 1fr !important;
  }

  .img-frame img {
    width: 100%;
    height: auto;
  }

  /* --- grids collapse cleanly --- */
  .case-grid,
  .pillars,
  .contact-grid,
  .office-list,
  .foot-grid {
    grid-template-columns: 1fr !important;
  }
  .stat-row,
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* --- marquee rails don't drag the page sideways --- */
  .rail,
  .rail-row {
    overflow: hidden !important;
  }

  /* --- floating whatsapp button clear of the CTA --- */
  .wa-float {
    right: 14px !important;
    bottom: 14px !important;
    width: 50px !important;
    height: 50px !important;
  }

  /* --- long words / emails never overflow their box --- */
  h1,
  h2,
  h3,
  h4,
  p,
  a,
  blockquote,
  span {
    overflow-wrap: break-word;
  }

  /* --- footer --- */
  footer {
    padding: 56px 20px !important;
  }
  .foot-bottom {
    display: grid !important;
    gap: 8px !important;
    text-align: left !important;
  }
}

@media (max-width: 560px) {
  .stat-row,
  .team-grid {
    grid-template-columns: 1fr !important;
  }
  .testi-card blockquote {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
  .section {
    padding: 48px 18px !important;
  }
}

/* pointer-based effects off on touch: they cause scroll jank */
@media (hover: none) {
  .cursor-dot,
  .cursor-ring,
  .grain {
    display: none !important;
  }
  .magnetic {
    transform: none !important;
  }
}

/* ============================================================
   Header clearance + hero crop fixes (mobile)
   ============================================================ */
@media (max-width: 900px) {
  /* home banner video: start below the fixed header so nothing is cut */
  .home-banner-video {
    height: calc(100svh - 78px) !important;
    min-height: calc(100svh - 78px) !important;
    background: #05050a;
    margin-top: 78px;
  }
  .home-banner-video video {
    height: 100% !important;
    width: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* inner-page heroes (services/about/portfolio/contact) clear the header */
  .page-hero:not(.home-hero) {
    padding-top: 96px !important;
  }
  .page-hero:has(.tdc-hero) {
    padding: 96px 0 48px !important;
  }
  .tdc-hero {
    padding: 0 20px !important;
    gap: 24px !important;
  }
  .tdc-hero-media {
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
  }
  .tdc-hero-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  .page-hero-bg img {
    object-fit: cover !important;
  }

  /* industry showcase marquee on every page */
  .showcase {
    padding: 56px 0 !important;
  }
  .showcase-grid {
    padding: 0 20px !important;
  }
  .showcase-copy h2 {
    font-size: clamp(30px, 9vw, 44px) !important;
  }
  .showcase-cta {
    padding: 15px 26px !important;
  }
}

/* ============================================================
   Full-screen banner + no header crop (all viewports)
   ============================================================ */
.home-banner-video {
  height: calc(100svh - var(--header-h, 78px)) !important;
  min-height: calc(100svh - var(--header-h, 78px)) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: #05050a;
  margin-top: var(--header-h, 78px);
}

/* ============================================================
   Mobile-only: ensure page banners are not hidden beneath header
   ============================================================ */
@media (max-width: 900px) {
  .page-banner {
    /* push the banner below the fixed header on phones */
    margin-top: var(--header-h-mobile, 70px) !important;
    box-sizing: border-box;
  }
  .page-banner-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-position: center center !important;
  }
}

/* Portfolio: avoid cropping portfolio tiles on small screens */
@media (max-width: 900px) {
  body[data-page="portfolio"] .case-card .img-frame {
    /* let the image define its height on small viewports */
    aspect-ratio: auto !important;
    height: auto !important;
  }
  body[data-page="portfolio"] .case-card .img-frame img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    background-color: #000; /* prevent white gaps */
    display: block !important;
  }
  /* also handle the showcase tiles */
  body[data-page="portfolio"] .showcase-card img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    display: block !important;
  }
}
.home-banner-video video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
}

@media (max-width: 900px) {
  .home-banner-video {
    height: calc(100svh - var(--header-h-mobile, 70px)) !important;
    min-height: calc(100svh - var(--header-h-mobile, 70px)) !important;
    margin-top: var(--header-h-mobile, 70px) !important;
  }
  /* inner-page heroes never sit under the fixed header */
  .page-hero:not(.home-hero) {
    margin-top: var(--header-h-mobile, 70px) !important;
    padding-top: 34px !important;
  }
  .page-hero:has(.tdc-hero) {
    padding: 34px 0 48px !important;
  }
}

/* ============================================================
   Scroll-driven cinema band — mobile static variant
   ============================================================ */
@media (max-width: 900px) {
  .vs-cinema.vs-static {
    height: 74svh !important;
    min-height: 74svh !important;
    display: block !important;
  }
  .vs-cinema.vs-static .vs-cinema-pin {
    position: relative !important;
    height: 74svh !important;
    min-height: 74svh !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }
  .vs-cinema.vs-static .vs-cinema-media {
    position: absolute !important;
    inset: 0 !important;
    clip-path: none !important;
  }
  .vs-cinema.vs-static .vs-cinema-media video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }
  .vs-cinema.vs-static .vs-cinema-copy {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    padding: 0 24px !important;
  }
  .vs-cinema.vs-static .vs-meter,
  .vs-cinema.vs-static .vs-frame-no {
    display: none !important;
  }
}

/* ============================================================
   Services — "How we work" process steps on mobile
   ============================================================ */
@media (max-width: 900px) {
  #process .wrap > div > div:first-child {
    display: none !important;
  }
  #processSteps {
    grid-template-columns: 1fr !important;
    row-gap: 24px !important;
    gap: 24px !important;
  }
  #processSteps .process-step {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 14px !important;
    border-left: 1px solid var(--line);
    padding-left: 0;
  }
  #processSteps .process-step > div:first-child {
    margin-bottom: 0 !important;
    margin-top: 4px !important;
    margin-left: -8px !important;
  }
  #processSteps .process-step h3 {
    grid-column: 2 !important;
    margin-bottom: 4px !important;
  }
  #processSteps .process-step p {
    grid-column: 2 !important;
  }
}

/* ============================================================
   HOTFIX — full-screen hero, mobile scroll sections, smaller
   industry showcase cards
   ============================================================ */

/* 1. Hero banner: true full screen, never letterboxed / cut */
.home-banner-video {
  height: calc(100svh - var(--header-h, 78px)) !important;
  min-height: calc(100svh - var(--header-h, 78px)) !important;
  max-height: calc(100svh - var(--header-h, 78px)) !important;
  margin-top: var(--header-h, 78px) !important;
  padding: 0 !important;
  background: #000;
}
.home-banner-video video {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}
@media (max-width: 900px) {
  .home-banner-video {
    height: calc(100svh - var(--header-h-mobile, 70px)) !important;
    min-height: calc(100svh - var(--header-h-mobile, 70px)) !important;
    max-height: calc(100svh - var(--header-h-mobile, 70px)) !important;
    margin-top: var(--header-h-mobile, 70px) !important;
  }
  .home-banner-video video {
    height: 100% !important;
    object-fit: contain !important;
  }
}

/* 2. Mobile: story sections become static, natural-scrolling blocks */
@media (max-width: 900px) {
  #story,
  #svcStory {
    height: auto !important;
    min-height: 0 !important;
  }
  .story-pin,
  .svc-story-pin {
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: block !important;
    padding: 56px 0 !important;
  }
  #storyWrap,
  .svc-story-pin .wrap {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 20px !important;
  }
  #storyWrap h2 {
    font-size: clamp(22px, 6.6vw, 30px) !important;
    margin-bottom: 14px !important;
    max-width: none !important;
  }
  .story-tag {
    margin-bottom: 12px !important;
  }
  .story-industry {
    font-size: clamp(26px, 8vw, 36px) !important;
    margin-bottom: 12px !important;
  }
  .story-tags {
    min-height: 0 !important;
  }
  .story-progress {
    margin-top: 22px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  #storyImgFrame,
  #svcImgFrame {
    max-width: 260px !important;
    margin: 0 auto !important;
  }
  .svc-list-item {
    padding: 10px 0 !important;
  }
  .svc-list-name {
    font-size: 20px !important;
  }
}

/* 3. Industry showcase cards — larger on laptop/desktop, small on mobile */
.showcase-card {
  width: clamp(150px, 13vw, 210px) !important;
  border-radius: 20px !important;
}
.showcase-card figcaption {
  padding: 18px 11px 10px !important;
  font-size: 11px !important;
}
@media (max-width: 900px) {
  .showcase-card {
    width: 104px !important;
    border-radius: 14px !important;
  }
  .showcase-card figcaption {
    padding: 14px 8px 7px !important;
    font-size: 9.5px !important;
  }
}

/* showcase images stay square and small */
.showcase-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}
.showcase-rails {
  gap: 12px !important;
}
.showcase-track {
  gap: 12px !important;
}

/* ============================================================
   Mobile tap-driven story + services (no pinned scroll on phones)
   ============================================================ */
@media (max-width: 900px) {
  /* --- industry picker chips --- */
  .story-picker {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 4px 0 10px;
    margin: 0 0 6px;
    scrollbar-width: none;
  }
  .story-picker::-webkit-scrollbar {
    display: none;
  }
  .story-picker button {
    flex: 0 0 auto;
    scroll-snap-align: center;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.62);
    font: inherit;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .story-picker button.active {
    color: #0d0d0d;
    background: var(--orange, #fd9b15);
    border-color: var(--orange, #fd9b15);
    font-weight: 600;
  }
  .story-steps {
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
  }
  .story-steps button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }
  .story-steps span {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.55);
  }

  /* --- services list becomes a tap accordion --- */
  .svc-list-item {
    opacity: 0.5 !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: opacity 0.3s ease;
  }
  .svc-list-item.active {
    opacity: 1 !important;
  }
  .svc-list-desc {
    max-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.35s ease, margin 0.35s ease !important;
  }
  .svc-list-item.active .svc-list-desc {
    max-height: 140px !important;
    margin-top: 8px !important;
  }
  .svc-list-item .svc-list-row::after {
    content: "+";
    margin-left: auto;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.4);
  }
  .svc-list-item.active .svc-list-row::after {
    content: "–";
    color: var(--orange, #fd9b15);
  }
  .svc-list-row {
    align-items: center !important;
  }
  #svcImgFrame {
    max-width: 320px !important;
  }
  #storyImgFrame {
    max-width: 320px !important;
  }
}

/* ============================================================
   4. Mobile: restore the laptop-style pinned scroll stories
   (scroll drives the industry / service progression on phones too)
   ============================================================ */
@media (max-width: 900px) {
  #story {
    height: 660vh !important;
  }
  #svcStory {
    height: 480vh !important;
  }
  .story-pin,
  .svc-story-pin {
    position: sticky !important;
    top: 0 !important;
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
  }
  #storyWrap,
  .svc-story-pin .wrap {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding: 0 20px !important;
  }
  /* scroll now drives these — the tap helpers are no longer needed */
  .story-picker,
  .story-steps {
    display: none !important;
  }
  .story-tag {
    margin-bottom: 8px !important;
    font-size: 11px !important;
  }
  #storyWrap h2 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }
  .story-industry {
    font-size: 26px !important;
    margin-bottom: 8px !important;
  }
  .story-tags {
    min-height: 0 !important;
    gap: 7px !important;
  }
  .story-tags span {
    font-size: 11.5px !important;
    padding: 6px 12px !important;
  }
  .story-progress {
    display: flex !important;
    margin-top: 14px !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }
  #storyImgFrame,
  #svcImgFrame {
    max-width: 190px !important;
    margin: 0 auto !important;
  }
  .svc-list-item {
    padding: 7px 0 !important;
  }
  .svc-list-name {
    font-size: 17px !important;
  }
  .svc-list-item .svc-list-row::after {
    content: none !important;
  }
  .svc-list-item.active .svc-list-desc {
    max-height: 60px !important;
  }
  .svc-list-desc {
    font-size: 12.5px !important;
  }
}