.teamup-bg {
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    padding: 48px 0;
    padding-bottom: 140px;
    width: 100%;
  }

  /* ── TeamUp Base styles ── */
.tu-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 80px;
    width: 100%;
}

.tu-title {
    font-family: 'Syne', sans-serif;
    font-size: clamp(28px, 3.2vw, 56px);
    font-weight: 800;
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
}

.acc { color: #4648D4; }

.tu-hero-meta {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: right;
    padding-bottom: 10px;
}

/* ── Meta labels ── */
.tu-meta-label {
    font-family: 'Syne', sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: #c8b99a;
    margin-bottom: 4px;
}

.tu-meta-value {
    font-family: 'Syne', sans-serif;
    font-size: 14px;
    color: #fff;
}

/* --- adaptive --- */
@media (max-width: 1440px) {
    .tu-hero { gap: 20px; }
    .tu-title { font-size: 44px; }
}

@media (max-width: 768px) {
    .tu-hero {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .tu-title {
        font-size: 32px;
        line-height: 1;
        width: 100%;
    }

    .tu-hero-meta {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        text-align: left;
        width: 100%;
    }

    .tu-meta-item {
        flex: 1 1 40%;
        min-width: 120px;
    }

    .tu-title {
        font-size: 32px;
        width: 100%;
    }
}

  .bento-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    transition: all 0.4s ease;
  }
  .bento-card:hover {
    border: 1px solid #c8b99a;
    background: rgba(255, 255, 255, 0.05);
  }
  .hover-gold-glow {
    background: linear-gradient(145deg, #2D2D44, #1E1E2E);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    transition: all 0.4s ease;
    overflow: hidden;
    padding: 5px;
  }
  .hover-gold-glow:hover {
    border-color: #c8b99a;
    box-shadow: 0 0 20px rgba(200, 185, 154, 0.3);
  }
 .project-wrapper {
    border: 1px solid rgba(200, 185, 154, 0.2);
    padding: 40px;
    border-radius: 32px;
    transition: all 0.5s ease;

    /* Default value (for large screens / 2440px+) */
    margin-bottom: 80px;
}
/* For laptop screens (1440px and below) */
@media (max-width: 1440px) {
    .project-wrapper {
        margin-bottom: 60px; /* Reduced gap for laptops */
    }
}

/* For tablets (1024px and below) */
@media (max-width: 1024px) {
    .project-wrapper {
        margin-bottom: 50px;
        padding: 30px; /* Also slightly reduced padding for mobile-friendly view */
    }
}

/* For mobile phones (768px and below) */
@media (max-width: 768px) {
    .project-wrapper {
        margin-bottom: 40px; /* Compact gap for mobile */
        padding: 20px;
        border-radius: 20px; /* Smaller corner radius for mobile */
    }
}
  .project-wrapper:hover {
    border: 1px solid #c8b99a;
    box-shadow: 0 0 30px rgba(200, 185, 154, 0.15);
  }

  /* Main grid container for the 9 screens */
  .screens-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    padding: 20px !important;
    border-radius: 24px;
    margin-bottom: 80px;
  }

  /* Each screen card with fixed proportions */
  .screen-item {
    aspect-ratio: 1440 / 1024; /* Maintains uniform preview window shape */
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s;
  }
  .project-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
    display: block;
}
  .screen-item:hover { border-color: #c8b99a !important; }

  /* Image styling inside the card */
  .screen-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top !important;
    transition: 0.3s;
  }
  .screen-item:hover img {
    transform: scale(1.05); /* Smooth zoom effect on hover */
  }
  /* Responsive grid for different screen sizes */
  @media (max-width: 1200px) { .screens-grid { grid-template-columns: repeat(2, 1fr) !important; } }
  @media (max-width: 768px) { .screens-grid { grid-template-columns: 1fr !important; } }

.screens-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    padding: 0px !important;
    margin: 0px !important;
    border-radius: 0px !important;
}
      /* Special grid for different screen sizes */
/* base) */
.spacer-40 {
    height: 40px;
    width: 100%;
}
/*  1440px notebook */
@media (max-width: 1440px) {
    .spacer-40 {
        height: 30px;
    }
}
/* (768px mobile) */
@media (max-width: 768px) {
    .spacer-40 {
        height: 20px;
    }
}

  /* FIX 1: Project Overview responsive grid */
  .tu-overview-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
  }
  .tu-overview-grid > div:first-child { min-width: 0; }

  @media (max-width: 900px) {
    .tu-overview-grid { grid-template-columns: 1fr; gap: 32px; }
  }
  /* FIX: photo grid responsive */
  @media (max-width: 768px) {
    .project-wrapper { padding: 16px !important; }
    [style*="grid-template-columns: 1fr 2fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
    [style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }
  }
.contact-reveal{max-height:0;overflow:hidden;transition:max-height 1.2s var(--ease),opacity .8s;opacity:0;}
.contact-reveal.open{max-height:500px;opacity:1;}
.contact-inner{padding-top:36px;border-top:1px solid var(--line);margin-top:28px;}
.contact-inner h3{font-family:'Syne',sans-serif;font-size:17px;font-weight:700;margin-bottom:20px;}
.cform{display:flex;flex-direction:column;gap:10px;max-width:380px;}
.cform input,.cform textarea{background:transparent;border:1px solid var(--line);padding:11px 14px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:300;color:var(--white);outline:none;transition:border-color .2s;resize:none;}
.cform input::placeholder,.cform textarea::placeholder{color:var(--dim);}
.cform input:focus,.cform textarea:focus{border-color:var(--accent);}
.send-btn{display:inline-flex;align-items:center;font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bg);background:var(--white);border:none;padding:11px 22px;cursor:none;transition:background .2s;align-self:flex-start;margin-top:4px;}
.send-btn:hover{background:var(--accent);}
.clinks{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px;}
.clink{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s;}
.clink:hover{color:var(--accent);border-color:var(--accent);}


/* 2440px  */
@media (min-width: 1920px) {
    .tu-title {
        font-size: 72px;
    }
}

@media (min-width: 2440px) {
    .tu-title {
        font-size: 88px;
    }
}