body {
    background-color: #212121;
    color: white;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    width: 100%;
  max-width: 100%;
  overflow-x: hidden; 
  }
  /* keep this so layout is smooth; opacity is set inline by JS now */
 
  
  
/* Shared fixes (mobile; you can use globally too) */
.ticker-wrapper { overflow: hidden; }

.img-ticker {
  display: flex;
  width: max-content;         /* track = natural width of its children */
  will-change: transform;
  margin-left: 0;             /* kill any negative margins */
  margin-right: 0;
  animation: ticker-loop 20s linear infinite;
}


@keyframes ticker-loop {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); } /* move by one copy’s width */
}
.tech-ticker {
  display: flex;
  width: max-content;         /* track = natural width of its children */
  will-change: transform;
  margin-left: 0;             /* kill any negative margins */
  margin-right: 0;
  animation: ticker-loop 20s linear infinite;
}

@keyframes ticker-loop {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); } /* move by one copy’s width */
}
.tickerlogo { flex: none; display: block; }    /* no flex-shrink; no baseline gaps */

  .section {
    padding: 40px 20px;
    text-align: center;
  }
  
  .divider-line {
    width: 100%;
    height: 1px;
    background-image: linear-gradient(
      to right,
      white 0%,
      white 1px,
      transparent 1px,
      transparent 6px
    );
    background-repeat: repeat-x;
    background-size: 6px 1px;
    border: none;
  }

  .screen-blur {
    position: fixed;
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    z-index: 999;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
  }
  
  .blur-top {
    top: 0;
    mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
  }
  
  .blur-bottom {
    bottom: 0;
    mask-image: linear-gradient(to top, black 0%, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to top, black 0%, black 40%, transparent 100%);
  }
  
  
 
    .navbar-wrapper {
      position: fixed;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 30px;
      z-index: 99;
    }
  
    .profile-image {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        filter: grayscale(100%);
        transition: filter 0.6s ease;
      }
      
      .profile-image:hover {
        filter: grayscale(0%);
      }
  
    .navbar {
      display: flex;
      align-items: center;
      gap: 25px;
      background: #0e0e10f2;
      backdrop-filter: blur(10px);
      padding: 18px 28px;
      border-radius: 26px;
      box-shadow: inset 0 4px 4px rgba(0, 0, 0, 0.25);
    }
  
    .status {
      display: flex;
      align-items: center;
      gap: 12px;
      color: white;
      font-size: 14px;
      font-weight: 400;
      font-family: 'Poppins', sans-serif;
    }
  
    .status-dot::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        background-color: rgba(93, 59, 227, 0.9);
        border-radius: 50%;
        transform: translate(-50%, -50%) scale(1);
        animation: pulse-ring 2s infinite;
        z-index: -1;
      }
      
      .status-dot {
        position: relative; /* Required for ::after positioning */
        width: 10px;
        height: 10px;
        background-color: #5d3be3;
        border-radius: 50%;
      }
        
      @keyframes pulse-ring {
        0% {
          transform: translate(-50%, -50%) scale(1);
          opacity: 0.7;
        }
        100% {
          transform: translate(-50%, -50%) scale(2.8);
          opacity: 0;
        }
      }
  
    .divider {
      width: 1px;
      height: 40px;
      background-color: white;
      
    }
  
    .hero-button,
    .work-button {
      display: inline-flex;
      width: fit-content;
      max-width: 100%;
      padding: 9px 30.5px;
      font-size: 14px;
      font-weight: 500;
      border-radius: 60px;
      background: transparent;
      color: white;
      cursor: pointer;
      white-space: nowrap;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      font-family: 'Poppins', sans-serif;
    }
  
    .hero-button {
      border: 0.5px solid white;
      background-image: url("https://i.postimg.cc/pd5c0F80/Water-Fill-1.png");
      background-repeat: repeat-x;
      background-position: 0 -100%;
      transition: background-position 1.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
  
    .hero-button:hover {
      background-position: center;
      border-color: transparent;
      box-shadow: 0px 13px 16px -4px rgba(138, 43, 226, 0.3);
    }
  
    .work-button {
      background: linear-gradient(135deg, #5e3ce8, #5e3ce8, #352282, #6c3483, #8e44ad);
      background-size: 400% 400%;
      border: 1px solid transparent;
      animation: spectrum-shift 20s linear infinite;
      
      transition: background-position 1.2s ease, box-shadow 0.3s ease;
    }
  
    .work-button:hover {
      
      box-shadow: 0px 13px 16px -4px rgba(138, 43, 226, 0.3);
    }
  
    @keyframes spectrum-shift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 100%;
      }
      100% {
        background-position: 0% 50%;
      }
    }
  
 .button-arrow {
  width: 10px;
  height: 10px;
  object-fit: contain;
  padding: 0;
  margin-left: 6px;
  
}
      .hero-button .button-arrow {
        animation: none;
      }
      
      .hero-button:hover .button-arrow,
.work-button:hover .button-arrow {
  animation: arrow-pop 0.6s ease;
}

      
      
      @keyframes arrow-pop {
        0% {
          transform: translate(0, 0);
          opacity: 1;
        }
        50% {
          transform: translate(8px, -8px);
          opacity: 0;
        }
        51% {
          transform: translate(-8px, 8px);
          opacity: 0;
        }
        100% {
          transform: translate(0, 0);
          opacity: 1;
        }
      }

  
  
  
  
  

  /* section 1*/
  .hero {
    text-align: left;
    padding-top: 195px;
  }
  
  .hero-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  
  .hero-logo {
    width: 115px;
    height: 90px;
  }
  
  .hero-content {
    max-width: 520px;
    display: flex;
    flex-direction: column;
  }
  
  .hero-title {
    font-size: 35px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.01em;
    margin: 0;
    margin-bottom: 6px; /* tighter spacing under H1 */
  }
  
  .hero-subtitle {
    font-size: 15px;
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 300;
    line-height: 1.6;
    margin: 0;
    margin-bottom: 20px; /* gives breathing room before button */
  }
  
  .hero-button {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    padding: 9px 30.5px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 60px;
    border: 0.5px solid white;
    background: transparent;
    color: white;
    cursor: pointer;
    background-image: url("https://i.postimg.cc/pd5c0F80/Water-Fill-1.png");
    background-repeat: repeat-x;
    background-position: 0 -100%;
    transition: 1.2s ease;
    white-space: nowrap; /* Prevents text from wrapping */
  }
  
  
  .hero-button:hover {
    background-position: center;
    border-color: transparent;
    box-shadow: 0px 13px 16px -4px rgba(138, 43, 226, 0.30); /* Lighter purple shadow on hover */
  }
  
  .button-arrow {
    width: 10px;
    height: 10px;
    margin-left: -3px;
    object-fit: contain;
    align-self: center; /* ✅ vertically centers it in the button */
  }
  .hero-button .button-arrow {
    animation: none;
  }
  
  .hero-button:hover .button-arrow {
    animation: arrow-pop 0.6s ease;
  }
  
  
  @keyframes arrow-pop {
    0% {
      transform: translate(0, 0);
      opacity: 1;
    }
    50% {
      transform: translate(8px, -8px);
      opacity: 0;
    }
    51% {
      transform: translate(-8px, 8px);
      opacity: 0;
    }
    100% {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  
  /* project section */

  /* Outer container: centers the heading + cards together */
.projects-section-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Row with 🚀 label + heading in one line */
  .projects-row {
    display: flex;
    gap: 54px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 40px;
  }
  
  .projects-label {
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  
  .projects-heading {
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 33px;
    font-family: 'Poppins', sans-serif;
    margin: 0;
  }
  
  /* Grid that holds all the cards */
  .projects-grid {
    display: flex;
    flex-direction: column; /* stack for now — can change to row or grid later */
    gap: 30px;
  }
  
  /* Individual card */
  .project-card {
    width: 625px;
    height: 400px;
    border: 0.5px solid #ffffff;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(to bottom, #18191C, #141414);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
    cursor: pointer;
  }
  
  /* White media preview block */
  .project-preview {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .project-preview img {
    max-width: 101%;
    max-height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
  }
  
  .project-preview img.hovered {
    filter: grayscale(0%);
  }
  .project-card:hover .project-arrow {
    animation: arrow-pop 0.6s ease;
  }
  
  /* Footer of card */
  .project-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* ✅ adds 10px padding left & right */
  }
  
  .project-title {
    font-size: 18px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    color: white;
    text-decoration: none;
  }
  
  .project-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.6s ease, opacity 0.6s ease;
    position: relative;
  }
  
  .see-all-button {
    align-self: center; /* ✅ centers it in the flex column */
  }
  

  /* career section */

  .careers-section-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
  }
  
  .careers-aligned {
    max-width: 660px; /* same as your card width */
    width: 100%;
    margin: 0 auto;
  }
  
  .careers-row {
    display: flex;
    gap: 54px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 40px;
  }
  
  .careers-label {
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  
  .careers-heading {
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 33px;
    font-family: 'Poppins', sans-serif;
    margin: 0;
  }

  /* timeline cards */

  .career-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center; /* ⬅️ centers all .career-item blocks */
  }
  
  .career-item {
    display: flex;
    align-items: center;
    padding: 25px 26px;
    background-color: #2a2b2f;
    border-radius: 16px;
    font-family: 'IBM Plex Mono', monospace;
    color: white;
    font-size: 15px;
    font-weight: 300;
    width: 625px;
  }
  
  .career-role,
  .career-company,
  .career-dates {
    text-align: left;
    white-space: nowrap;
  }
  
  .career-role {
    min-width: 260px; /* moved in slightly */
    margin-right: 32px; /* slightly less space */
  }
  
  .career-company {
    min-width: 220px; /* moved in slightly */
    
  }
  
  .career-dates {
    min-width: 90px; /* slightly reduced width */
    text-align: right;
    margin-left: auto;
    padding-right: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .see-all-button {
    margin-top: 30px;
    align-self: center;
  }
  
  
  /* brands section */

  .brands-wrapper {
    max-width: 660px;
    margin: 0 auto;
  }
  
  .brands-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 54px;
    color: #fff;
    font-family: Poppins;
  }
  
  .brands-label {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  
  .brands-heading {
    font-size: 25px; /* updated per your note */
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  
  .italic-slash {
    font-style: italic;
  }
  
  

  /* ticker */
  @keyframes ticker-kf {
    0% { transform: translateX(0); }
    100% { transform: translateX(-96rem); }
  }

  .ticker-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 40px 0;
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.1s ease;
  }
.ticker-wrapper:hover {
    filter:grayscale(0%)
}
  .img-ticker {
    display: flex;
    margin-left: -1rem;
    margin-right: -1rem;
    animation: ticker-kf 18s linear infinite;
    animation-play-state: running;
  }

  

  .tickerlogo {
    width: 12rem;               /* Was 8rem */
    flex: none;
    margin: 0 2rem;             /* Keeps 2rem total spacing */
    align-self: center;
    max-width: 100%;
    height: auto;
    
    transform-style: preserve-3d;
    will-change: transform;
  }


  .fade-left,
  .fade-right {
    position: absolute;
    top: 0;
    width: 6rem;
    height: 100%;
    z-index: 10;
    pointer-events: none;
  }

  .fade-left {
    left: 0;
    background: linear-gradient(to right, #212121 0%, transparent 100%);
  }

  .fade-right {
    right: 0;
    background: linear-gradient(to left, #212121 0%, transparent 100%);
  }
  
  
  
  /* tech stack */
  .tech-stack-wrapper {
    max-width: 650px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .tech-stack-row {
    display: flex;
    gap: 54px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 40px;
  }
  
  .tech-stack-label {
    font-size: 15px;
    font-weight: 500;
    color: white;
  }
  
  .tech-stack-heading {
    font-size: 25px;
    font-weight: 600;
    color: white;
  }
  
  /* Container with glowing box and fades */
  .tech-stack-icons {
    width: 1214px; /* fixed width */
    display: flex;
    padding: 30px;
    
    background-color: #282A2E;
    border-radius: 20px;
    margin: 0 auto;
    position: relative;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.06);
    overflow: hidden;
    
  }
  
  
  /* The actual scrolling ticker row */
  
  
  .tech-icon {
  width: 6rem;
  height: 6rem;
  margin: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background-color: white;
  border-radius: 20%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15); /* base shadow */
  
}

/* On hover: glow and grayscale off */
.tech-icon:hover {
  
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.25), 0px 0px 30px rgba(138, 43, 226, 0.3); /* subtle glow */
  transform: scale(1.03); /* slight zoom */
}

/* On click: 3D pressed look */
.tech-icon:active {
  transform: scale(0.95);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
}
  
  .tech-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .tech-ticker .tech-icon img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
  }
  
  .tech-ticker:hover .tech-icon img {
    filter: grayscale(0%);
  }
  /* Fades */
  .tech-fade-left,
  .tech-fade-right {
    position: absolute;
    top: 0;
    width: 6rem;
    height: 100%;
    z-index: 5;
    pointer-events: none;
  }
  
  .tech-fade-left {
    left: 0;
    background: linear-gradient(to right, #282A2E 0%, transparent 100%);
  }
  
  .tech-fade-right {
    right: 0;
    background: linear-gradient(to left, #282A2E 0%, transparent 100%);
  }
  
  
  
  

  /* mobile */

/* ============ MOBILE ONLY (phones) ============ */
@media (max-width: 480px) {
  /* Global 13px gutters */
  .section { padding: 13px 13px; }

  /* Common inner wrappers use the same 13px gutters */
  .projects-section-content,
  .careers-section-content,
  .brands-wrapper,
  .tech-stack-wrapper {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* -------- Bottom navbar: buttons only -------- */
  .profile-image,
  .status,   /* hides "Available for work" + pulsing dot */
  .divider { /* hides the vertical bar */
    display: none !important;
  }

  /* Pin navbar to 13px gutters and remove center transform */
  .navbar-wrapper {
    bottom: 20px;
    left: 13px;
    right: 13px;
    transform: none;
    gap: 0;
    z-index: 2000;
    bottom: calc(20px + constant(safe-area-inset-bottom)); /* iOS 11.0–11.2 */
    bottom: calc(20px + env(safe-area-inset-bottom));    
  }

  .navbar {
    width: 90%;
    justify-content: center;
    gap: 12px;
    padding: 20px 20px;
    border-radius: 18px;
    
  }

  .hero-button,
  .work-button {
    padding: 10px 30.5px;
    font-size: 14px;
    white-space: nowrap;
  }

  .button-arrow { width: 10px; height: 10px; margin-left: 6px; }

  /* -------- HERO -------- */
  .hero { padding-top: 120px; text-align: left; }
  .hero-container {
    padding: 0 13px;         /* match your 13px mobile gutter */
    justify-content: flex-start;
  }
  .hero-logo { width: 76px; height: auto; }
  .hero-content { max-width: 100%; }
  .hero-title { font-size: 28px; margin-bottom: 6px; }
  .hero-subtitle { font-size: 14px; line-height: 1.55; margin-bottom: 16px; }

  /* -------- PROJECTS -------- */
  .projects-section-content { max-width: 100%; }
  .projects-row { flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 22px; }
  .projects-label { font-size: 14px; }
  .projects-heading { font-size: 20px; line-height: 1.3; }

  .projects-grid { gap: 16px; align-items: flex-start; }
  .project-card {
    width: 100%;
   
    height: auto;
    padding: 16px;
    gap: 12px;
    border-radius: 16px;
  }
  .project-preview {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
  }
  .project-preview img { width: 100%; height: 100%; object-fit: cover; }
  .project-footer { padding: 0; }
  .project-title { font-size: 16px; }
  .project-arrow { width: 14px; height: 14px; }
  .see-all-button {
  width: auto;
  justify-content: center;
  align-self: center;          /* center on mobile */
  margin-left: auto;
  margin-right: auto;
}

  /* -------- CAREERS -------- */
  .careers-section-content { padding: 0 13px; }
  .careers-row { flex-direction: column; gap: 8px; align-items: flex-start; margin-bottom: 20px; }
  .careers-label { font-size: 14px; }
  .careers-heading { font-size: 20px; line-height: 1.3; }
  .career-list { align-items: flex-start; gap: 14px; }
  .career-item {
    width: 100%;
   
    padding: 16px;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .career-role, .career-company, .career-dates { min-width: 0; margin: 0; padding: 0; text-align: left; }

  /* -------- BRANDS -------- */
  .brands-wrapper { max-width: 100%; }
  .brands-row { flex-direction: column; gap: 8px; align-items: flex-start; }
  .brands-heading { font-size: 20px; line-height: 1.3; }
  .ticker-wrapper { padding: 24px 0; }
  .tickerlogo { width: 9rem; margin: 0 1rem; }
  /* --- Seamless brand ticker on mobile --- */
.ticker-wrapper { overflow: hidden; }

.img-ticker {
  /* Make the track auto-size to its content and slide smoothly */
  width: max-content;
  will-change: transform;
  animation: ticker-mobile 20s linear infinite;
  margin-left: 0;  /* avoid extra width that can cause wiggle */
  margin-right: 0;
}

@keyframes ticker-mobile {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); } /* move by one copy’s width */
}

/* keep logos fixed-size on mobile if you like */
.tickerlogo { flex: none; display: block; }


  /* -------- TECH STACK -------- */
  .tech-stack-wrapper { max-width: 100%; }
  .tech-stack-row { flex-direction: column; gap: 8px; align-items: flex-start; }
  .tech-stack-heading { font-size: 20px; }
  .tech-stack-icons {
    width: 100%;
    padding: 20px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.06);
  }
  .tech-icon { width: 4rem; height: 4rem; margin: 0 1rem; }

  /* -------- FOOTER -------- */
  #footer h2 { font-size: 20px; }

  /* --- Left-align Projects section (label + heading) on mobile --- */
  .projects-section-content { align-items: flex-start; }
  .projects-row { align-items: flex-start; }
  .projects-label, .projects-heading { text-align: left; }

  /* Non-navbar buttons shrink to content */
  .section .hero-button,
  .section .work-button,
  .section button,
  .section a.hero-button,
  .section a.work-button {
    display: inline-flex;
    width: auto;
    align-self: center;         /* center by default */
    margin-left: auto;          /* center in flex column */
    margin-right: auto;
  }

  /* Keep ONLY the hero's primary CTA left-aligned */
  .hero .hero-button {
    align-self: flex-start;
    margin-left: 0;
    margin-right: 0;
  }
}


/* ============ TABLET (portrait & small landscape) ============ */
@media (min-width: 481px) and (max-width: 1024px) {
  /* Slightly larger gutters on tablet */
  .section { padding: 28px 24px; }

  .projects-section-content,
  .careers-section-content,
  .brands-wrapper,
  .tech-stack-wrapper,
  .hero-container {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Bottom navbar sits within tablet gutters */
  .navbar-wrapper {
    left: 24px;
    right: 24px;
    transform: none;
    gap: 16px;
    z-index: 2000;
    bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .navbar {
    width: auto;              /* don’t cap at 90% on tablet */
    padding: 18px 24px;
    border-radius: 22px;
    gap: 16px;
  }

  /* HERO */
  .hero { padding-top: 150px; text-align: left; }
  .hero-content { max-width: 640px; }
  .hero-title   { font-size: 32px; }
  .hero-subtitle{ font-size: 15px; }

  /* PROJECTS: switch to a 2-col grid, fluid cards */
  .projects-grid {
    display: grid;                       /* override flex */
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 24px;
    justify-items: stretch;
    align-items: stretch;
    width: 100%;
  }

  .project-card {
    width: 100%;                         /* fluid inside grid cell */
    max-width: none;                     /* override any desktop caps */
    height: auto;                        /* no fixed 400px on tablet */
    padding: 18px;
  }

  .project-preview { aspect-ratio: 16 / 10; }

  /* PROJECTS heading row can stay stacked or be side-by-side if you prefer */
  .projects-row { 
    flex-direction: row; 
    justify-content: flex-start; 
    gap: 32px; 
    margin-bottom: 28px; 
  }
  .projects-heading { font-size: 22px; line-height: 1.35; }

  /* CAREERS: also 2-col grid, fluid cards */
  .career-list {
    display: grid;                       /* override flex column */
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
    align-items: stretch;
  }

  .career-item {
    width: 100%;
    max-width: none;
    padding: 18px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .career-role, .career-company, .career-dates {
    min-width: 0; margin: 0; padding: 0; text-align: left;
  }

  /* BRANDS: keep smooth; tweak logo size a touch if needed */
  .tickerlogo { width: 10rem; margin: 0 1.25rem; }

  /* TECH STACK: don’t force a wide box on tablet */
  .tech-stack-icons {
    width: 100%;
    max-width: 100%;
    padding: 24px;
    border-radius: 18px;
  }
  .tech-icon { width: 5rem; height: 5rem; }

  /* Buttons */
  .section .hero-button,
  .section .work-button { font-size: 14px; padding: 10px 28px; }
}