/* === Tablet & below: 991px === */
@media (max-width: 991px) {
  /* Nav: show hamburger, hide desktop links */
  .site-nav { display: none; }
  .menu-toggle { display: flex; }

  /* When menu is open, expand header to full viewport */
  .site-header:has(.site-nav.is-open) {
    height: 100vh;
    height: 100dvh;
    align-items: flex-start;
    background-color: var(--surface-95);
  }

  /* Mobile menu overlay */
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--space-40) var(--space-32);
    gap: var(--space-8);
    overflow-y: auto;
  }

  .site-nav.is-open .site-nav__link {
    font-size: var(--text-xl);
    padding: var(--space-16) 0;
    border-bottom: var(--border-subtle);
    border-radius: 0;
    background: none;
  }

  .site-nav.is-open .site-nav__link--cta {
    margin-top: var(--space-16);
    text-align: center;
    padding: var(--space-16);
    border-radius: var(--radius-full);
    background: var(--primary-100);
    color: var(--surface-95);
    border-bottom: none;
  }

  /* Hide search icon on mobile, show search text link */
  .site-nav__search { display: none; }
  .site-nav.is-open .site-nav__link--mobile-only { display: block; }

  /* Hero Video: tablet adjustments */
  .hero-vid {
    padding-bottom: var(--space-80);
  }
  .hero-vid__video-wrap video {
    width: 100%;
    opacity: 0.2;
  }
  .hero-vid__overlay {
    background:
      linear-gradient(
        to top,
        var(--surface-95) 0%,
        rgba(13, 13, 26, 0.9) 8%,
        transparent 25%
      ),
      linear-gradient(
        to right,
        var(--surface-95) 0%,
        rgba(13, 13, 26, 0.8) 40%,
        rgba(13, 13, 26, 0.5) 100%
      ),
      linear-gradient(
        to bottom,
        var(--surface-95) 0%,
        rgba(13, 13, 26, 0.9) 60px,
        transparent 180px
      );
  }

  /* Hero Device (archived): stacks on tablet */
  .hero-device__grid {
    grid-template-columns: 1fr;
    gap: var(--space-40);
  }
  .hero-device__visual {
    order: -1;
  }
  .phone-mockup {
    width: 200px;
  }

  /* Grid collapses */
  .grid--3 { grid-template-columns: 1fr 1fr; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .work-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .grid--5-7, .grid--7-5 { grid-template-columns: 1fr; }

  .about__image-wrap { max-width: 400px; }

  /* Web Design page: tablet */
  .web-hero__featured { margin-bottom: -80px; }
  .web-hero + .section { padding-top: calc(80px + var(--space-80)); }
  .web-hero__featured-row .browser-mockup--side { width: 300px; height: 340px; }
  .web-hero__featured-row .browser-mockup--center { width: 420px; height: 440px; margin-left: -40px; margin-right: -40px; }
  .web-carousel__track { padding: 0 var(--space-40); }
  .web-carousel__card { flex: 0 0 400px; height: 380px; }
  .web-carousel__btn { display: none; }
  .web-carousel::before,
  .web-carousel::after { width: 140px; }
  .web-cta { grid-template-columns: 1fr; }
  .web-cta__actions { flex-direction: row; }
  .about-grid--compact { grid-template-columns: 1fr; }

  /* About collage: smaller photos, narrower on tablet */
  .about-collage {
    grid-template-columns: 0.8fr 1.2fr;
    gap: var(--space-32);
  }
  .about-collage__photos { height: 480px; }
  .about-collage__photo--1 { width: 60%; height: 240px; }
  .about-collage__photo--2 { width: 45%; height: 180px; top: 40px; }
  .about-collage__photo--3 { width: 42%; height: 170px; top: 220px; }
  .about-collage__photo--forbes { width: 55%; }

  /* Contact stacks */
  .contact__text { padding-top: 0; }

  /* Section spacing reduces */
  .section {
    padding-top: var(--space-80);
    padding-bottom: var(--space-80);
  }

  .hero-device {
    padding-top: calc(var(--nav-height) + var(--space-80));
    padding-bottom: var(--space-80);
  }

  /* Typography scale-down */
  .display-xl { font-size: var(--text-7xl); }
  .display-lg { font-size: var(--text-5xl); }
  .display-md { font-size: var(--text-4xl); }
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }
  h3 { font-size: var(--text-3xl); }

  /* Text alignment: left-align everything on tablet/mobile */
  .center { text-align: left; }
  .section__header.center { text-align: left; }

  /* Ebook: tablet */
  .ebook-hero__image img { max-width: 300px; }
  .ebook-checklist { grid-template-columns: 1fr; }

  /* Blog: tablet */
  .post-grid { grid-template-columns: repeat(2, 1fr); }

  /* Gallery: tablet */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-featured { grid-template-columns: 1fr; }
  .gallery-featured__body { padding: var(--space-32); }
  .gallery-stats { gap: var(--space-24); }
  .blog-featured { grid-template-columns: 1fr; }

  /* Longform: tablet — hide sidebar, show mobile TOC button */
  .longform__sidebar { display: none; }
  .longform__grid { grid-template-columns: 1fr; }
  .longform__content { max-width: none; }
  .longform__toc-btn { display: flex; }

  /* About page: tablet */
  .about-hero__photos { height: 360px; }
  .about-hero__grid { gap: var(--space-40); }
  .media-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }

  /* Case study: tablet */
  .cs-hero { padding-top: calc(var(--nav-height) + var(--space-64)); }
  .cs-meta { grid-template-columns: repeat(2, 1fr); gap: var(--space-24); }
  .cs-section { padding: var(--space-40) 0; }
  .cs-gallery__grid { gap: var(--space-16); }

  /* Footer */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* === Mobile: 767px === */
@media (max-width: 767px) {
  .container { padding-left: 6%; padding-right: 6%; }
  .container .container { padding-left: 0; padding-right: 0; }
  .section {
    padding-top: var(--space-64);
    padding-bottom: var(--space-64);
  }

  .hero-device {
    padding-top: calc(var(--nav-height) + var(--space-64));
    padding-bottom: var(--space-64);
  }

  /* Bump hero text so it differentiates from body */
  .display-xl { font-size: var(--text-6xl); }
  .display-lg { font-size: var(--text-4xl); }
  .display-md { font-size: var(--text-3xl); }
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }

  /* Hero Video: mobile adjustments */
  .hero-vid {
    padding-bottom: var(--space-64);
  }
  .hero-vid__video-wrap video {
    opacity: 0.15;
  }
  .hero-vid__overlay {
    background: rgba(13, 13, 26, 0.75);
  }

  /* Hero Device (archived): hide phone mockup on small screens */
  .hero-device__visual { display: none; }

  /* Grids to single column on phone */
  .grid--3,
  .metrics-grid,
  .service-grid { grid-template-columns: 1fr; }

  /* Web Design page: mobile */
  .web-hero { padding-top: calc(var(--nav-height) + var(--space-64)); }
  .web-hero__featured { margin-bottom: -40px; }
  .web-hero + .section { padding-top: calc(40px + var(--space-64)); }
  .web-hero__featured-row {
    position: relative;
    height: 320px;
    justify-content: center;
  }
  .web-hero__featured-row .browser-mockup {
    position: absolute;
    width: 85% !important;
    height: 300px !important;
    margin: 0 !important;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                z-index 0s 0.05s;
  }
  .web-hero__featured-row .browser-mockup.stack-front {
    transform: translateX(0) scale(1) rotate(0deg);
    z-index: 3;
    opacity: 1;
  }
  .web-hero__featured-row .browser-mockup.stack-mid {
    transform: translateX(14px) scale(0.94) rotate(1.5deg);
    z-index: 2;
    opacity: 0.55;
  }
  .web-hero__featured-row .browser-mockup.stack-back {
    transform: translateX(28px) scale(0.88) rotate(3deg);
    z-index: 1;
    opacity: 0.25;
  }
  .web-hero__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-top: var(--space-16);
  }
  .web-carousel__track { padding: 0 var(--space-24); }
  .web-carousel__card { flex: 0 0 300px; height: 340px; }
  .web-carousel::before,
  .web-carousel::after { width: 60px; }
  /* Show card info always on mobile — no hover available */
  .web-carousel__info {
    transform: translateY(0);
    opacity: 1;
  }
  .web-cta__actions { flex-direction: column; }

  /* About collage: stacked on mobile — show Forbes + 1 photo only */
  .about-collage {
    grid-template-columns: 1fr;
    gap: var(--space-32);
  }
  .about-collage__photos {
    position: relative;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
  }
  /* Show only Forbes on mobile — landscape, fills width */
  .about-collage__photo--1,
  .about-collage__photo--2,
  .about-collage__photo--3 { display: none; }
  .about-collage__photo--forbes {
    position: relative;
    width: 100%;
    height: auto;
    bottom: auto;
    right: auto;
    transform: none;
  }
  .about-collage__photo--forbes img {
    height: auto;
    object-fit: contain;
  }
  .about-collage__photo--forbes[data-reveal] { transform: translateY(20px); }
  .about-collage__photo--forbes[data-reveal].is-visible { transform: translateY(0); }

  /* Footer stacks */
  .site-footer__grid {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .site-footer__bio { max-width: none; }

  .site-footer__social {
    justify-content: flex-start;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: var(--space-12);
    text-align: left;
  }

  .site-footer__legal {
    justify-content: flex-start;
  }

  /* Section header */
  .section__header { margin-bottom: var(--space-40); }

  /* About actions stack on mobile */
  .about__actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .about__links {
    justify-content: center;
    width: 100%;
  }

  /* Ebook: mobile */
  .ebook-hero__grid { gap: var(--space-40); }
  .ebook-hero__image img { max-width: 260px; }
  .ebook-hero__image { order: -1; }
  .ebook-testimonials { grid-template-columns: 1fr; }
  .ebook-cta .ebook-hero__image { order: -1; }

  /* Blog: mobile */
  .post-grid { grid-template-columns: 1fr; }
  .post-ebook-cta { flex-direction: column; text-align: center; }
  .post-ebook-cta__image { width: 100px; }

  /* Gallery: mobile */
  .gallery-grid { grid-template-columns: 1fr; gap: var(--space-16); }
  .gallery-stats { flex-direction: column; gap: var(--space-16); }

  /* Case study: mobile */
  .cs-hero { padding-top: calc(var(--nav-height) + var(--space-40)); }
  .cs-hero__tagline { font-size: var(--text-lg); }
  .cs-hero-image { padding-bottom: var(--space-40); }
  .cs-meta { grid-template-columns: 1fr; gap: var(--space-20); padding: var(--space-24); }
  .cs-section { padding: var(--space-32) 0; }
  .cs-section__heading { font-size: var(--text-2xl); }
  .cs-gallery { padding: var(--space-32) 0; }
  .cs-gallery__grid { grid-template-columns: 1fr; }

  /* About page: mobile */
  .about-hero { padding-top: calc(var(--nav-height) + var(--space-40)); }
  .about-hero__photos {
    height: auto;
    max-width: 320px;
    margin: 0 auto;
  }
  .about-hero__photos .about-collage__photo--1 {
    position: relative;
    width: 100%;
    height: 200px;
    margin-bottom: var(--space-16);
  }
  .about-hero__photos .about-collage__photo--forbes {
    position: relative;
    width: 80%;
    margin-left: auto;
  }
  .media-grid { grid-template-columns: 1fr; }
  .media-card { padding: var(--space-24); }
}

/* === Small mobile: 479px === */
@media (max-width: 479px) {
  .display-xl { font-size: var(--text-4xl); }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .btn-row,
  .hero__actions {
    flex-direction: column;
  }

  .section__cta {
    flex-direction: column;
    align-items: center;
  }

  .cs-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-16);
  }
  .cs-pagination__center {
    order: -1;
    flex-basis: 100%;
  }
  .cs-pagination__center .btn-row {
    flex-direction: row;
  }
}