/* =========================================
   VARIABLES & ROOT SETUP
   ========================================= */
:root {
    --teal: #37AAA7; 
    --teal-hover: #2d8c89;
    --teal-glow: rgba(55, 170, 167, 0.15);
    --bg-base: #000000;
    --bg-card: #0a0a0a;
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --border-color: #222222;
    --main-font: 'Manrope', sans-serif;
    --container-max: 120rem;
    --section-pad-y: clamp(6rem, 8vw, 10rem);
    --section-pad-x: clamp(2rem, 5vw, 4rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { max-width: 100%; overflow-x: hidden; }

html { 
    font-size: 0.520833vw; 
    -webkit-font-smoothing: antialiased; 
    scroll-behavior: smooth;
    scroll-padding-top: 15rem; 
}

@media (min-width: 1921px) { html { font-size: 62.5%; } }
@media (max-width: 1024px) { html { font-size: 62.5%; } }

body { 
    font-family: var(--main-font); 
    font-size: 1.6rem; 
    font-weight: 400;
    color: var(--text-main); 
    line-height: 1.6; 
    background: var(--bg-base); 
}

/* =========================================
   1. HEADER & NAVIGATION
   ========================================= */
header {
    position: fixed; top: 0; left: 0; right: 0; 
    height: 15rem; background: #000000; 
    display: flex; align-items: center; justify-content: space-between; 
    padding: 0 var(--section-pad-x); z-index: 1000;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease;
}

header.scrolled {
    height: 9rem; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px);
}

.nav-links { 
    display: flex; gap: 6.5rem; flex: 1; 
    font-size: 2rem; font-weight: 600; color: var(--text-main); 
    align-items: center; 
}
.nav-links a { text-decoration: none; color: inherit; transition: color 0.2s; }
.nav-links a.active, .nav-links a:hover { color: var(--teal); }

.logo-container {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center; display: flex; align-items: center; text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
header.scrolled .logo-container { transform: translate(-50%, -50%) scale(0.75); }
.logo-container img { width: 16.812rem; height: 10.425rem; object-fit: contain; }

.nav-right { flex: 1; display: flex; justify-content: flex-end; align-items: center; }

.whatsapp-btn {
    background: transparent; color: var(--text-main); text-decoration: none; font-size: 2rem; 
    font-weight: 600; display: flex; align-items: center; gap: 0.8rem; transition: color 0.2s;
}
.whatsapp-btn:hover { color: var(--teal); }
.whatsapp-btn svg { width: 2.2rem; height: 2.2rem; fill: currentColor; }

/* =========================================
   2. HERO SECTION
   ========================================= */
.hero {
    position: relative; width: 100%; background: var(--bg-base); margin-top: 15rem; 
    display: flex; justify-content: center; isolation: isolate; 
}

.hero-video { 
    display: block; width: 100%; height: auto; margin: 0 auto; position: relative;
    z-index: 2; mix-blend-mode: screen; 
}

.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 3; 
}

.hero-inner { 
    position: absolute; z-index: 10; width: 100%; top: 40%; left: 50%; 
    transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; text-align: center;
}

.hero h1 { font-size: 4.32rem; font-weight: 700; margin-bottom: 2.9rem; line-height: 1.1; letter-spacing: -0.1rem; }
.hero p { font-size: 2.4rem; color: var(--text-main); margin-bottom: 3.5rem; font-weight: 400; }

.btn-main {
    display: flex; align-items: center; justify-content: center; background: var(--teal); color: #000; 
    width: 17.2rem; height: 5rem; border-radius: 0.96rem; text-decoration: none; 
    font-weight: 700; font-size: 1.92rem; transition: background 0.2s, transform 0.2s; cursor: pointer; border: none;
}
.btn-main:hover { background: var(--teal-hover); transform: translateY(-2px); }

/* HERO FLOOR (Dimmed gradient background below the line) */
.hero::before {
    content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 24%; 
    background: linear-gradient(180deg, #111111 0%, #000000 100%); z-index: 0; pointer-events: none;
}

/* HERO FLOOR LINE (Dimmed transparency) */
.hero::after {
    content: ''; position: absolute; bottom: 24%; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 15%, rgba(255,255,255,0.15) 85%, rgba(255,255,255,0) 100%);
    z-index: 1; pointer-events: none;
}

/* =========================================
   3. REUSABLE SECTIONS
   ========================================= */
.section-wrapper { padding: var(--section-pad-y) var(--section-pad-x); text-align: center; }
.section-title { font-size: clamp(3.2rem, 5vw, 4.4rem); font-weight: 700; margin-bottom: 2.88rem; color: var(--teal); line-height: 1.2; letter-spacing: -0.05rem; }
.section-title.white { color: var(--text-main); }
.section-subtitle { font-size: 1.92rem; color: var(--text-muted); margin-bottom: clamp(3rem, 5vw, 5rem); font-weight: 400; }

/* STORY SECTION (Diagnosis Before Decisions) */
.story-section { padding-top: calc(var(--section-pad-y) / 2) !important; padding-bottom: calc(var(--section-pad-y) / 2) !important; }
.story-section .section-title { font-size: clamp(3.2rem, 5vw, 4.4rem); }
.story-section .story-content { max-width: 110rem; width: 100%; margin: 0 auto; font-size: 1.92rem; color: var(--text-muted); line-height: 1.8; font-weight: 400; }

/* =========================================
   CAREERS FORM
   ========================================= */
.form-container { max-width: 80rem; margin: 5rem auto 10rem; text-align: left; background: var(--bg-card); padding: 5rem; border-radius: 1.2rem; border: 1px solid var(--border-color); }
.form-group { margin-bottom: 2.5rem; display: flex; flex-direction: column; }
.form-group label { font-size: 1.6rem; font-weight: 600; margin-bottom: 0.8rem; color: var(--text-main); }
.form-group input, .form-group select { width: 100%; padding: 1.5rem; background: #111; border: 1px solid var(--border-color); border-radius: 0.8rem; color: #fff; font-family: var(--main-font); font-size: 1.6rem; transition: border-color 0.3s ease; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: var(--teal); }
.form-group input[type="file"] { padding: 1rem; background: transparent; border: 1px dashed var(--teal); cursor: pointer; }
.submit-btn { width: 100%; margin-top: 2rem; border: none; }

/* =========================================
   SUCCESS MODAL
   ========================================= */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(5px); display: none; justify-content: center; align-items: center; z-index: 9999; padding: 2rem; }
.modal-content { background: var(--bg-card); border: 1px solid var(--teal); padding: 5rem 4rem; border-radius: 1.2rem; max-width: 50rem; width: 100%; text-align: center; box-shadow: 0 10px 40px var(--teal-glow); animation: modalFadeIn 0.4s ease forwards; }
.modal-content h2 { font-size: 3.2rem; color: var(--text-main); margin-bottom: 1.5rem; }
.modal-content p { font-size: 1.8rem; color: var(--text-muted); }
.modal-icon { width: 8rem; height: 8rem; margin: 0 auto 2rem; display: block; }

@keyframes modalFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================
   4. SERVICES GRID
   ========================================= */
.grid-6 { display: grid; grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); gap: 2.5rem; max-width: var(--container-max); margin: 0 auto; }
.service-card { background: linear-gradient(180deg, #111111 0%, #050505 100%); padding: 5rem 3rem; border-radius: 1.2rem; border: 1px solid rgba(55, 170, 167, 0.2); transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; text-align: center; }
.service-card:hover { transform: translateY(-0.5rem); border-color: rgba(55, 170, 167, 0.5); box-shadow: 0 10px 40px var(--teal-glow); }
.service-icon { width: 12.12rem; height: 12.12rem; margin-bottom: 1.5rem; filter: brightness(0) invert(1); opacity: 1; }
.solid-bg-icon { filter: invert(1); mix-blend-mode: screen; opacity: 1; }
.service-card h3 { font-size: 2rem; margin-bottom: 1.5rem; font-weight: 600; color: var(--text-main); }
.service-card p { font-size: 1.4rem; color: var(--text-muted); line-height: 1.6; }

/* =========================================
   5. TEAM GRID
   ========================================= */
.team-section { padding-left: 0; padding-right: 0; }
.team-section .section-title, .team-section .section-subtitle { padding-left: var(--section-pad-x); padding-right: var(--section-pad-x); }
.team-grid { display: flex; flex-wrap: nowrap; gap: 2.5rem; width: 100%; padding: 0 var(--section-pad-x); overflow-x: auto; cursor: grab; -ms-overflow-style: none; scrollbar-width: none; }
.team-grid::-webkit-scrollbar { display: none; }
.team-grid.active { cursor: grabbing; }
.team-card { width: 26.6rem; flex: 0 0 auto; border-radius: 1.2rem; overflow: hidden; background: linear-gradient(to bottom, #222222, #0a0a0a); border: 1px solid var(--border-color); display: flex; flex-direction: column; aspect-ratio: 3/4; position: relative; user-select: none; transition: all 0.3s ease; }
.team-card:hover { transform: translateY(-0.5rem); border-color: rgba(55, 170, 167, 0.5); box-shadow: 0 10px 40px var(--teal-glow); }
.team-photo-area { flex: 1; width: 100%; position: relative; pointer-events: none; }
.team-photo-area img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-info { padding: 3rem 2rem 2rem; text-align: center; background: linear-gradient(to top, rgba(0,0,0,1) 40%, transparent); position: absolute; bottom: 0; width: 100%; pointer-events: none; }
.team-name { font-size: 1.8rem; font-weight: 600; color: var(--text-main); margin-bottom: 0.3rem; }
.team-role { font-size: 1.3rem; color: #969696; font-weight: 400; line-height: 1.3; }

/* =========================================
   6. MANIFESTO & PROCESS
   ========================================= */
.manifesto-section { padding: clamp(10rem, 15vw, 15rem) var(--section-pad-x); text-align: center; }
.manifesto-text { font-size: clamp(3.2rem, 5vw, 4.4rem); font-weight: 700; line-height: 1.3; max-width: 100rem; margin: 0 auto; letter-spacing: -0.05rem; }
.manifesto-text .teal { color: var(--teal); display: block; margin-bottom: 0.5rem;}
.manifesto-text .muted { color: var(--text-muted); display: block; font-size: 1.92rem; font-weight: 400; margin-top: 1.5rem;} 
.manifesto-text u { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.process-section { background: #141414; }
.process-main-img { display: block; width: 100%; max-width: 100%; margin: 0 auto 4rem; height: auto; object-fit: contain; }
.process-conclusion { font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 700; color: var(--text-main); }
.process-conclusion span { color: var(--teal); }

/* =========================================
   8. FOOTER
   ========================================= */
footer { padding: 8rem var(--section-pad-x); border-top: 1px solid var(--border-color); }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4rem; max-width: var(--container-max); margin: 0 auto; }
.footer-logo { display: flex; flex-direction: column; align-items: flex-start; justify-self: start; }
.footer-logo img { width: 17.7rem; height: 13.9rem; object-fit: contain; }
.footer-contact { display: flex; flex-direction: column; align-items: center; text-align: center; justify-self: center; gap: 0.8rem; }
.footer-contact a { color: var(--text-muted); text-decoration: none; font-size: 1.92rem; font-weight: 400; transition: color 0.2s;} 
.footer-contact a:hover { color: var(--teal); }
.footer-socials { display: flex; gap: 2rem; margin-top: 1rem; justify-content: center; }
.footer-socials a { color: var(--text-main); font-size: 2rem; transition: color 0.2s; }
.footer-socials a:hover { color: var(--teal); }
.footer-socials svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }
.btn-footer { display: inline-flex; align-items: center; gap: 1rem; background: var(--teal); color: #000; padding: 1.6rem 3rem; border-radius: 0.6rem; text-decoration: none; font-weight: 600; font-size: 1.92rem; transition: background 0.2s; justify-self: end; }
.btn-footer:hover { background: var(--teal-hover); }

/* =========================================
   EXACT DESKTOP MEASUREMENTS (1080p Layout)
   ========================================= */
@media (min-width: 1025px) {
    header { padding: 0 7.2rem; }
    .section-wrapper { padding-top: 0; padding-bottom: 0; }
    .hero { height: 68.29rem; margin-bottom: 7.2rem; }
    .hero-video { width: 100%; height: 68.29rem; object-fit: cover; }
    .section-title, .manifesto-text, .process-conclusion { font-size: 3.84rem; }
    #services .section-title { margin-bottom: 2.88rem; }
    #services .section-subtitle { margin-bottom: 7.2rem; }
    #services { height: 47.26rem; margin-bottom: 7.2rem; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .grid-6 { grid-template-columns: repeat(6, 23.88rem); gap: 1.5rem; justify-content: center; width: 100%; }
    .service-card { width: 23.88rem; height: 29.3rem; padding: 2rem 1.5rem; box-shadow: 0.84rem 0.84rem 5.52rem rgba(55, 170, 167, 0.32); }
    .service-card h3 { font-size: 2.4rem; } .service-card p { font-size: 1.68rem; }
    #team { height: 68.5rem; margin-bottom: 7.2rem; display: flex; flex-direction: column; justify-content: center; }
    .team-card { width: 23.88rem; height: 38.62rem; aspect-ratio: auto; }
    .team-info { height: 14rem; padding: 5rem 1.5rem 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.95) 70%, transparent); }
    .team-name { font-size: 2.4rem; margin-bottom: 0.5rem; } .team-role { font-size: 1.68rem; } 
    .manifesto-section { height: 29.3rem; margin-bottom: 7.2rem; padding-top: 0; padding-bottom: 0; display: flex; flex-direction: column; justify-content: center; }
    #process { height: 69.82rem; margin-bottom: 7.2rem; display: flex; flex-direction: column; justify-content: center; }
    .process-main-img { margin: 0 auto 7.2rem; width: 172.8rem; height: 42.12rem; max-width: none; object-fit: contain; }
    .story-section { margin-bottom: 7.2rem; display: flex; flex-direction: column; justify-content: center; }
    .story-section .section-title { font-size: 3.84rem; }
    footer { height: 23.979rem; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; }
    .footer-inner { width: 100%; }
}

/* =========================================
   TABLET BREAKPOINTS
   ========================================= */
@media (max-width: 1024px) {
    .footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 5rem; }
    .footer-logo { align-items: center; justify-self: center; }
    .btn-footer { justify-self: center; }
    .hero { min-height: 50vh; } 
    
    /* Responsive Text sizing for Tablets */
    .hero h1 { font-size: 3.6rem; }
    .hero p { font-size: 2rem; }
}

/* =========================================
   MOBILE BREAKPOINTS
   ========================================= */
@media (max-width: 768px) {
    header { height: calc(8rem + 30px); padding-top: 15px; padding-bottom: 15px; }
    .logo-container img { height: 7rem; width: auto; }
    .logo-container { top: 50%; transform: translate(-50%, -50%) scale(1.05); }
    header.scrolled { height: calc(8rem + 10px); padding-top: 5px; padding-bottom: 5px; }
    header.scrolled .logo-container { top: 50%; transform: translate(-50%, -50%) scale(1); }
    
    .nav-links { display: none; }
    .whatsapp-btn span { display: none; } 
    .manifesto-text { font-size: 3.2rem; }
    .story-section .story-content { font-size: 1.6rem; }
    .form-container { padding: 3rem 2rem; margin: 3rem auto 6rem; }
    .team-card { width: calc(50vw - 3.25rem); max-width: none; aspect-ratio: 3/4; }
    .team-info { padding: 2rem 1rem 1.5rem; }
    .team-name { font-size: 1.4rem; margin-bottom: 0.2rem; }
    .team-role { font-size: 1.1rem; }
    
    .hero { margin-top: calc(8rem + 60px); display: flex; flex-direction: column; align-items: center; min-height: auto; padding-top: 2rem; overflow: hidden; }
    .hero-overlay { display: none; }
    .hero-inner { position: relative; top: 0; left: 0; transform: none; order: 1; padding: 0 2rem; margin-bottom: 4rem; }
    .hero h1 { font-size: clamp(2.8rem, 8vw, 3.6rem); margin-bottom: 1.5rem; }
    .hero p { font-size: clamp(1.6rem, 4vw, 2rem); margin-bottom: 2.5rem; }
    .btn-main { width: auto; font-size: 1.6rem; height: auto; padding: 1.2rem 2.4rem; }
    .hero-video { position: relative; order: 2; width: 100%; height: 65vh; object-fit: cover; object-position: right center; }
    
    /* Hides the floor shadow and line on Mobile screens */
    .hero::before,
    .hero::after { display: none; }
}