/* ============================================================
   RESPONSIVE.CSS
   Mobile-first overrides for all pages
   Only affects screens ≤ 768px unless noted
   ============================================================ */
 
/* ============================================================
   NAV — MOBILE
   ============================================================ */
   @media (max-width: 768px) {
 
    :root {
      --nav-height: 72px;
    }
   
    body {
      padding-top: var(--nav-height);
    }
   
    .site-nav {
      padding: 0 20px;
      height: var(--nav-height);
    }
   
    .nav-logo img {
      height: 40px;
    }
   
    /* Show hamburger */
    .hamburger {
      display: flex;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      z-index: 2000;
      padding: 4px;
    }
   
    .hamburger span {
      width: 26px;
      height: 2px;
      background: var(--white);
      border-radius: 2px;
      transition: 0.3s;
    }
   
    /* Mobile menu — slides in from right */
    .nav-links {
      position: fixed;
      top: var(--nav-height);
      left: 0;
      width: 100%;
      height: calc(100vh - var(--nav-height));
      background: var(--berry);
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 32px;
      transform: translateX(100%);
      transition: transform 0.4s ease;
      z-index: 1500;
    }
   
    .nav-links.active {
      transform: translateX(0);
    }
   
    .nav-links a {
      font-size: 28px;
      color: var(--white);
    }
   
    /* ============================================================
       HERO — MOBILE
       ============================================================ */
    .hero {
      height: 100vh;
    }
   
    .hero-content {
      padding: 0 24px;
    }
   
    .hero-content h1 {
      font-size: clamp(40px, 8vw, 56px);
    }
   
    .hero-content p {
      font-size: 22px;
      letter-spacing: 0.06em;
    }
   
    /* ============================================================
       FEATURED WORK — MOBILE
       ============================================================ */
    .featured-work {
      padding: 40px 20px 48px;
    }
   
    .featured-work h2 {
      font-size: 28px;
      margin-bottom: 28px;
    }
   
    .carousel {
      gap: 16px;
      padding: 10px 0 20px;
    }
   
    /* One card visible at a time on mobile */
    .project-card {
      flex: 0 0 85%;
    }
   
    .card-image {
      height: auto;
    }
   
    /* Show dots on mobile */
    .carousel-dots {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      margin-top: 16px;
    }
   
    .carousel-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--blush);
      border: none;
      cursor: pointer;
      padding: 0;
      transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
    }
   
    .carousel-dot.active {
      background: var(--berry);
      width: 28px;
      border-radius: 999px;
    }

    /* AI concept art square grid — smaller on mobile */
    .img-grid-3.small {
      max-width: 100%;
      padding: 0 24px 20px;
    }

    .img-grid-3.small img {
      aspect-ratio: 1 / 1;
    }
   
    /* Logo row stacks on mobile */
    .logo-row {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 0 24px 40px;
    }

    /* Logomarks — 2x2 grid */
    .logomark-row {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 12px;
    }

    /* Full logo variations — stacked single column */
    .logo-variation-row {
      grid-template-columns: 1fr;
      gap: 10px;
      margin-top: 12px;
    }

    .logo-variation-row img {
      aspect-ratio: 16 / 9;
    }

      /* Iconography — 2 columns, last icon centered */
  .img-grid-7 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 24px 40px;
  }

  .img-grid-7 img:last-child {
    grid-column: 1 / -1;
    width: 50%;
    justify-self: center;
  }

    /* ============================================================
       ABOUT PREVIEW — MOBILE
       ============================================================ */
    .about-preview {
      padding: 40px 24px;
    }
   
    .about-grid {
      grid-template-columns: 1fr;
      gap: 28px;
      text-align: center;
    }
   
    .about-image {
      justify-content: center;
    }
   
    .about-image img {
      max-width: 240px;
    }
   
    .about-text h2 {
      font-size: 28px;
    }
   
    .about-text p {
      font-size: 16px;
    }

    
  /* ============================================================
     PREV / NEXT NAV — MOBILE
     ============================================================ */
     .project-nav {
       display: flex;
       flex-direction: row;
       justify-content: space-between;
       align-items: flex-start;
       padding: 24px 20px 40px;
     }
   
     .proj-nav-block {
       width: 100%;
       display: flex;
       flex-direction: column;
       gap: 4px;
     }
   
     .proj-nav-block.next {
       align-items: flex-end;
       text-align: right;
     }
   
     .proj-nav-label {
       font-size: 14px;
       letter-spacing: 0.02em;
       white-space: nowrap; /* prevents label from wrapping */
     }
   
     .proj-nav-title {
       font-size: 20px;
       line-height: 1.3;
     }

    /* ============================================================
       CTA — MOBILE
       ============================================================ */
    .cta {
      padding: 20px 24px 32px;
    }
   
    .cta h2 {
      font-size: 24px;
      padding: 0px 60px;
    }
   
    .cta p {
      font-size: 18px;
    }
   
    /* ============================================================
       FOOTER — MOBILE
       ============================================================ */
    .site-footer {
      padding: 0 24px 40px;
    }
   
    .footer-links {
      gap: 24px;
    }
   
    .footer-links .icon-img {
      width: 48px;
      height: 48px;
    }
   
    /* ============================================================
       PROJECTS PAGE — MOBILE
       ============================================================ */
    .page-header {
      padding: 40px 24px 28px;
    }
   
    .page-header h1 {
      font-size: 28px;
    }
   
    .page-header p {
      font-size: 16px;
    }
   
    .projects-nav {
      padding: 0 24px 32px;
      gap: 12px;
    }
   
    .project-filter {
      font-size: 15px;
      padding: 8px 20px;
    }
   
    .projects-container {
      padding: 0 24px 48px;
    }
   
    .projects-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
   
    .project-section h2 {
      font-size: 24px;
    }


    .project-section .project-card h3 {
      font-size: 20px;
    }
     
    .project-section .project-card p {
      font-size: 16px;
    }
    
   
    /* ============================================================
       CASE STUDIES PAGE — MOBILE
       ============================================================ */
    .case-studies-list {
      padding: 0 24px 48px;
      gap: 32px;
    }
   
    .case-card {
      grid-template-columns: 1fr;
      gap: 0;
    }
   
    .case-thumbnail {
      min-height: 220px;
    }
   
    .case-info {
      padding: 20px 0 0;
    }
   
    .case-info h2 {
      font-size: 22px;
    }
   
    .case-info p {
      font-size: 16px;
    }
   
    /* ============================================================
       BRANDING CAROUSEL — MOBILE
       ============================================================ */
    .branding-carousel {
      padding: 0 12px 40px;
    }
   
    .branding-track-wrapper {
      overflow: hidden;
      width: 100%;
    }
   
    .branding-slide {
      flex: 0 0 92vw;
      max-width: 92vw;
    }
   
    .branding-slide img {
      width: 100%;
      height: 70vh;
      object-fit: contain;
      border-radius: 18px;
    }
   
    .branding-slide.active {
      transform: scale(1.02);
    }
   
    /* ============================================================
      LOGO VARIATIONS — MOBILE FIX (CRIMSON)
    ============================================================ */

    .logo-variations {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      padding: 0 24px 20px;
    }

    /* FIX visibility + sizing */
    .logo-box {
      height: 160px;
      border-radius: 16px;
      overflow: hidden;

      display: flex;
      align-items: center;
      justify-content: center;

      background: var(--white); /* ensures logos are visible */
    }

    /* KEY FIX — don't crop logos */
    .logo-box img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    /* LAST (5th) LOGO CENTERED */
    .logo-box:nth-child(5) {
      grid-column: 1 / -1;
      width: 50%;
      justify-self: center;
    }
   
    /* ============================================================
       TINY HAVEN PROTOTYPE — MOBILE
       ============================================================ */
    .th-prototype {
      grid-template-columns: 1fr !important;
    }
   
    .th-prototype > div:nth-child(2) {
      order: -1;
    }
   
    /* ============================================================
       ABOUT PAGE — MOBILE
       ============================================================ */
    .about-hero {
      padding: 40px 20px;
    }
   
    .about-container {
      grid-template-columns: 1fr;
      gap: 28px;
      text-align: center;
    }
   
    .about-image {
      order: -1;
      display: flex;
      justify-content: center;
    }
   
    .about-image img {
      width: 100%;
      max-width: 240px;
      height: auto;
    }
   
    .about-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: left;
      padding: 0 16px;
    }
   
    .about-content h1 {
      font-size: 30px;
    }
   
    .about-role {
      font-size: 18px;
    }
   
    .about-content p {
      font-size: 16px;
      line-height: 1.6;
    }
   
    .about-buttons {
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }
   
    .skills-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
   
    .skill-item img {
      width: 140px;
      height: 140px;
    }
   
    .skill-item p {
      font-size: 15px;
    }
   
    .design-philosophy {
      margin: 40px 24px;
      text-align: left;
    }
   
  }

  










/* =========================
   TABLET (≤ 1024px)
========================= */
/* @media (max-width: 1024px) {

  .site-nav {
    padding: 0 40px;
  }

  .nav-links {
    gap: 24px;
  }

  .nav-links a {
    font-size: 18px;
  }

  .hero-content h1 {
    font-size: clamp(40px, 6vw, 72px);
  }

  .hero-content p {
    font-size: clamp(16px, 2.5vw, 24px);
  }

  .featured-work {
    padding: 40px 24px;
  }

  .project-card {
    flex: 0 0 50%;
  } */
  /* case study */
  /* .case-card {
    grid-template-columns: 1fr; 
    gap: 24px; */

  /* .case-info {
    padding: 0;
  }

  .case-thumbnail {
    min-height: 280px;
  } */