:root {
    --bg-soft: #f9fafb;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(17, 24, 39, .08);
    --max: 1180px;
}

/* Base */
h1.tight { margin-top: .2rem; }
.kicker { display: inline-block; color: var(--brand); font: 700 13px/1 system-ui; letter-spacing: .04em; margin-bottom: 10px; }

/* Reveal Animation */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
.reveal.show { opacity: 1; transform: translateY(0); }

/* Screen 1 */
.screen1 { background: var(--bg-soft); padding: 80px 0; text-align: center; }
.lead { max-width: 800px; }
.lead h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); letter-spacing: -0.02em; }
.lead p { font-size: 1.1rem; max-width: 65ch; margin: 1rem auto 0; color: var(--muted); }

/* Screen 2 - New Image Layout */
.screen2 { padding: 80px 0; background: #fff; overflow: hidden; }
.s2-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.s2-images { position: relative; min-height: 450px; }
.imgA, .imgB {
    position: absolute;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.imgA {
    width: 65%;
    top: 0;
    left: 0;
    z-index: 1;
    transform: translateX(-100%);
    opacity: 0;
}
.imgB {
    width: 60%;
    bottom: 0;
    right: 0;
    z-index: 2;
    transform: translateX(100%);
    opacity: 0;
}
.reveal.show .imgA, .reveal.show .imgB {
    transform: translateX(0);
    opacity: 1;
}
.reveal.show .imgB { transition-delay: .2s; }
.imgA img, .imgB img { width: 100%; height: 100%; object-fit: cover; }
.s2-content h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.s2-content p { font-size: 1.05rem; color: var(--muted); }

/* Screen 3 */
.screen3 { background: var(--brand); color: #fff; padding: 60px 0; }
.s3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
.s3-card { transition: transform 0.3s ease; }
.s3-card:hover { transform: translateY(-8px); }
.s3-card h3 { margin: 0 0 .5rem; font-size: 1.5rem; color: #fff; }
.s3-card p { color: #ffe5cf; margin: 0; }

/* Team Section */
.team-section { padding: 80px 0; background: var(--bg-soft); }
.section-title { font-size: 2.5rem; text-align: center; margin-bottom: 10px; color: var(--ink); }
.section-intro { text-align: center; color: var(--muted); max-width: 60ch; margin: 0 auto 50px auto; }
.team-list { display: grid; gap: 20px; grid-template-columns: 1fr; max-width: 900px; margin: auto; }

.member-card {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 25px;
    align-items: center;
    background: #fff;
    padding: 25px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    transform-style: preserve-3d;
}
.member-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    font-size: 1.8rem;
}
.member-info h3 { margin: 0; font-size: 1.3rem; color: var(--ink); }
.member-info .role { font-weight: 600; color: var(--brand); margin: 0.2em 0 0.5em; }
.member-info p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.contact-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 0.75em;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}
.contact-list li { display: flex; align-items: center; gap: 8px; }
.contact-list strong { font-weight: 600; color: var(--ink); }
.contact-list a { color: var(--muted); text-decoration: none; font-weight: 500; }
.contact-list a:hover { color: var(--brand); text-decoration: underline; }

/* Responsive Adjustments */
@media (max-width: 900px) {
    .s2-grid { grid-template-columns: 1fr; }
    .s2-images { order: -1; margin-bottom: 40px; min-height: 350px; }
    .s3-grid { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 600px) {
    .member-card { grid-template-columns: 1fr; text-align: center; }
    .member-avatar { margin: 0 auto 15px auto; }
    .contact-list { align-items: center; }
}