/* ==========================================================================
   WD ART AND DESIGN — responsive
   Breakpoints: 1200 · 1024 · 768 · 480
   ========================================================================== */

/* ≤ 1200 ------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hero__art { width: 60vw; right: -8vw; }
  .hero__label--1 { left: 4%; }
  .svc-row { grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr) 150px 52px; gap: 20px; }
  .svc-hero__badge { left: -24px; }
  .svc-hero--flip .svc-hero__badge { right: -24px; }
  .proc__body { grid-column: 5 / span 5; }
  .proc__side { grid-column: 10 / span 3; }
}

/* ≤ 1024 — tablet landscape: hamburger nav, simplified splits --------------- */
@media (max-width: 1024px) {
  :root { --nav-h: 76px; }
  .nav__links, .nav > .btn { display: none; }
  .nav__toggle { display: block; }

  .hero__copy { grid-column: 1 / span 9; }
  .hero__art { width: 68vw; right: -18vw; opacity: 0.8; }
  .hero__label--1 { display: none; }
  .hero__label--2 { left: 24%; }
  .hero__label--3 { right: 30%; top: 66%; }
  .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--bg) 20%, transparent 75%); pointer-events: none; }

  .section-head--split > :first-child { grid-column: 1 / -1; }
  .section-head--split > :last-child { grid-column: 1 / span 9; margin-top: 8px; }

  .intro__media { grid-column: 1 / span 6; }
  .intro__copy { grid-column: 7 / span 6; }

  .svc--feature, .svc--tall { grid-column: span 6; min-height: 480px; }
  .svc--mid { grid-column: span 6; min-height: 400px; }
  .svc-stack { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .svc--compact { min-height: 220px; }

  .why__head { grid-column: 1 / -1; position: static; margin-bottom: 48px; }
  .why__list { grid-column: 1 / -1; }

  .testimonials__head { grid-column: 1 / -1; margin-bottom: 44px; }
  .slider { grid-column: 1 / -1; }

  .faq-layout__head { grid-column: 1 / -1; position: static; margin-bottom: 44px; }
  .faq-layout__list { grid-column: 1 / -1; }

  .footer__grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }

  .svc-row { grid-template-columns: 48px minmax(0, 1fr) 130px 52px; }
  .svc-row > p { display: none; }

  .svc-hero__copy { grid-column: 1 / span 7; }
  .svc-hero__art { grid-column: 8 / span 5; }
  .svc-hero--flip .svc-hero__copy { grid-column: 6 / span 7; }
  .svc-hero--flip .svc-hero__art { grid-column: 1 / span 5; }
  .svc-hero__badge { display: none; }
  .svc-hero--wide .svc-hero__copy > :first-child, .svc-hero--wide .svc-hero__copy > :last-child { grid-column: 1 / -1; }
  .svc-hero--wide .svc-hero__copy > :last-child { margin-top: 24px; }
  .svc-intro__label { grid-column: 1 / -1; margin-bottom: 24px; }
  .svc-intro__body { grid-column: 1 / -1; }
  .offer { flex-basis: 45%; }
  .inquiry > :first-child, .inquiry > :last-child { grid-column: 1 / -1; }
  .inquiry > :last-child { margin-top: 36px; }

  .about-story__aside { grid-column: 1 / -1; margin-bottom: 24px; }
  .about-story__body { grid-column: 1 / -1; }

  .proc__num { grid-column: 1 / span 3; position: static; }
  .proc__body { grid-column: 4 / span 9; }
  .proc__side { grid-column: 4 / span 9; margin-top: 28px; }

  .contact__info { grid-column: 1 / -1; position: static; margin-bottom: 48px; }
  .contact__form { grid-column: 1 / -1; }

  .cursor { display: none; }
}

/* ≤ 900 — timeline goes vertical ------------------------------------------- */
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; gap: 44px; padding-top: 0; padding-left: 44px; }
  .timeline::before, .timeline::after { left: 7px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .timeline::after { transform: scaleY(0); transform-origin: 50% 0; }
  .timeline.is-in::after { transform: scaleY(1); }
  .step::before { left: -44px; top: 6px; }
}

/* ≤ 768 — tablet portrait / large phone: recomposed layouts ----------------- */
@media (max-width: 768px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 80px; }

  /* Hero: artwork leads, copy follows */
  .hero { display: block; min-height: 0; padding-top: var(--nav-h); padding-bottom: 72px; }
  .hero::after { display: none; }
  .hero__art { position: relative; right: auto; bottom: auto; width: min(112%, 560px); margin: 0 auto -9%; left: 0; opacity: 1; }
  .hero__character { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%); mask-image: linear-gradient(180deg, #000 55%, transparent 96%); }
  .hero__label { padding: 9px 12px; font-size: 0.74rem; }
  .hero__label span { display: none; }
  .hero__label--1 { display: grid; left: 4%; top: 46%; }
  .hero__label--2 { left: 40%; top: 4%; }
  .hero__label--3 { right: 4%; top: 52%; }
  .hero__copy { grid-column: 1 / -1; gap: 20px; }
  .hero__title { font-size: clamp(2.3rem, 11.2vw, 5.4rem); }
  .hero__foot { display: none; }
  .hero__glow--a, .hero__glow--b, .hero__glow--c { width: 80vw; height: 80vw; top: 4%; }
  .hero__glow--a { right: 30vw; } .hero__glow--b { right: 6vw; } .hero__glow--c { right: -30vw; }

  .btn-row .btn { flex: 1 1 220px; }

  .intro__media { grid-column: 1 / -1; padding: 0 12% 12% 0; margin-bottom: 48px; }
  .intro__copy { grid-column: 1 / -1; }

  .services-grid { gap: 14px; }
  .svc--feature, .svc--tall { grid-column: 1 / -1; min-height: 420px; }
  .svc--mid { grid-column: span 6; min-height: 340px; }
  .svc-stack { grid-template-columns: 1fr; }
  .svc--compact { min-height: 190px; }
  .svc--mid .svc__body { padding-right: 0; }
  .svc--mid .svc__arrow { display: none; }

  .portfolio-grid { grid-auto-rows: clamp(170px, 42vw, 300px); }
  .portfolio-grid .work { grid-column: span 6; grid-row: span 1; }
  .portfolio-grid .work:nth-child(3n + 1) { grid-column: 1 / -1; grid-row: span 2; }
  .portfolio-grid .work:last-child:nth-child(3n + 2) { grid-column: 1 / -1; }
  .filters { flex-wrap: nowrap; overflow-x: auto; gap: 0 24px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { white-space: nowrap; }
  .work__plus { display: none; }

  .modal__inner { grid-template-columns: 1fr; overflow-y: auto; }
  .modal__media { min-height: 0; aspect-ratio: 4 / 3; }
  .modal__body { overflow: visible; }

  .why-item { grid-template-columns: 76px 1fr; }
  .why-item:hover { padding-left: 0; }

  .slide__flag { display: none; }

  .faq-a p { padding-right: 0; }

  .footer__grid { grid-template-columns: 1fr 1fr; }

  .triptych { grid-template-columns: 1fr; }
  .world { aspect-ratio: 4 / 3; }
  .world:nth-child(2), .world:nth-child(3) { margin-top: 0; }

  .svc-row { grid-template-columns: 34px minmax(0, 1fr) 96px; gap: 16px; }
  .svc-row .svc__arrow { display: none; }
  .svc-row:hover, .svc-row:focus-visible { padding-inline: 0; }

  .svc-hero__copy, .svc-hero--flip .svc-hero__copy { grid-column: 1 / -1; grid-row: auto; padding-bottom: 44px; }
  .svc-hero__art, .svc-hero--flip .svc-hero__art { grid-column: 2 / span 10; grid-row: auto; }
  .svc-hero--wide .svc-hero__art { grid-column: 1 / -1; }
  .svc-hero--wide .svc-hero__art .frame { aspect-ratio: 3 / 2; }

  .proc__num { grid-column: 1 / -1; margin-bottom: 20px; }
  .proc__body, .proc__side { grid-column: 1 / -1; }

  .form-grid { grid-template-columns: 1fr; }
  .form-foot .btn { width: 100%; }
}

/* ≤ 480 — phones ----------------------------------------------------------- */
@media (max-width: 480px) {
  .brand { font-size: 0.8rem; letter-spacing: 0.16em; gap: 10px; }
  .brand img { height: min(var(--logo-h, 34px), 34px); max-width: 150px; }

  .stats { grid-template-columns: 1fr 1fr 1fr; }
  .stat { padding: 20px 8px 0 0; }
  .stat + .stat { padding-left: 12px; }
  .stat__label { font-size: 0.68rem; letter-spacing: 0.1em; }

  .svc--mid { grid-column: 1 / -1; min-height: 300px; }
  .svc--compact { padding-right: 38%; }

  .why-item { grid-template-columns: 1fr; gap: 14px; }

  .offer { flex-basis: 100%; min-height: 0; }

  .mobile-menu__sub { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .footer__bottom { flex-direction: column; }

  .details div { grid-template-columns: 1fr; gap: 2px; }
  .svc-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .svc-row__num { display: none; }
  .svc-hero__art, .svc-hero--flip .svc-hero__art { grid-column: 1 / -1; }
  .svc-hero__art::before { display: none; }
  .contact__form { padding: 22px 18px; }
  .dropzone { flex-direction: column; align-items: flex-start; }
}