/* =======================================================
   GLOBAL VARIABLES & LUXURY COLOR PALETTE
   ======================================================= */
:root {
    /* --- The Master Black Palette --- */
    --black: #000000;
    --soft-black: #0A0A0A;
    --dark-charcoal: #111111;
    --premium-navy: #0A1120;

    /* --- Aesthetic UI Elements --- */
    --card-bg: rgba(20, 20, 20, 0.4);
    /* High transparency for glass effect */
    --hover-dark: rgba(30, 30, 30, 0.6);
    --border-thin: rgba(255, 255, 255, 0.03);
    /* Whisper-thin elegant borders */

    /* --- Text & Accents --- */
    --text-grey: #cfcfcf;
    /* Slightly softer grey for highly aesthetic contrast */
    --luxury-gold: #D4AF37;
    --white: #FFFFFF;

    /* --- Typography --- */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Work Sans', sans-serif;

    /* --- Aesthetic Easing --- */
    --smooth-ease: cubic-bezier(0.16, 1, 0.3, 1);
    /* Apple-style buttery transition */
}

body {
    background-color: var(--black);
    color: var(--white);
    font-family: var(--font-body);
    overflow-x: hidden;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.4s var(--smooth-ease);
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

.gold-text {
    color: var(--luxury-gold);
}

.accent-text {
    color: var(--luxury-gold);
    font-style: italic;
    font-weight: 300;
}

/* =======================================================
   BUTTERY SMOOTH ANIMATIONS
   ======================================================= */
.fade-in {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s var(--smooth-ease);
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 1.2s var(--smooth-ease);
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 1.2s var(--smooth-ease);
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.anim-slide-down {
    opacity: 0;
    transform: translateY(-40px);
    transition: all 1.2s var(--smooth-ease);
}

.anim-fade-up,
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 1.2s var(--smooth-ease);
}

.anim-zoom-in {
    opacity: 0;
    transform: scale(0.92);
    transition: all 1.5s var(--smooth-ease);
}

.anim-slide-down.visible,
.anim-fade-up.visible,
.reveal.visible,
.anim-zoom-in.visible {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

/* =======================================================
   STRICT TYPOGRAPHY & PADDING ENFORCEMENT (DESKTOP)
   ======================================================= */
.vision-section,
.founders-section,
.careers-premium-section,
.invest-dubai-section,
.projects-section,
.invest-sticky-section,
.legacy-section {
    padding: 120px 10px !important;
}

/* STRICT DESKTOP HEADINGS: 50px */
.vision-title,
.awards-heading,
.careers-title,
.invest-title,
.projects-header,
.invest-sticky-left h2,
.future-title,
.legacy-title {
    font-family: var(--font-heading) !important;
    font-size: 50px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
}

/* STRICT DESKTOP PARAGRAPHS: 18px */
.vision-quote,
.careers-desc,
.invest-text p,
.project-text p,
.invest-card-text p,
.invest-list li,
.legacy-text-block p {
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    line-height: 1.8 !important;
    font-weight: 300 !important;
}

/* =======================================================
   1. PARALLAX HERO (Fades to Soft Black)
   ======================================================= */
.about-hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--black);
}

.hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
    filter: contrast(1.1);
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--soft-black) 0%, transparent 60%);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
}

/* =======================================================
   ABOUT HERO TYPOGRAPHY & NEW ANIMATION
   ======================================================= */

/* 1. The NEW "Luxury Focus" Animation */
@keyframes luxuryFocus {
    0% { 
        opacity: 0; 
        transform: scale(1.1) translateY(15px); /* Starts 10% larger and slightly lower */
        filter: blur(12px); /* Starts heavily blurred */
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0); /* Snaps perfectly into place */
        filter: blur(0); 
    }
}

/* 2. The Subtitle (Fades in first) */
.hero-subtitle {
    font-size: 1.2rem;
    letter-spacing: 5px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: var(--rent-gold, #D4AF37);
    font-weight: 300;
    
    /* Crisp dark shadow for readability */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
    
    /* NEW Animation: Slower (1.2s), starts almost immediately */
    opacity: 0;
    animation: luxuryFocus 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* 3. The Main Title (Fades in second) */
.hero-title {
    font-family: var(--font-heading, 'Playfair Display', serif);
    font-size: 7vw;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 8px;
    color: var(--rent-white, #ffffff);
    margin: 0;
    font-weight: 300;
    
    /* Premium Layered Text Shadow */
    text-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.9), 
        0px 10px 30px rgba(0, 0, 0, 0.7);
    
    /* NEW Animation: Even slower (1.5s), starts after the subtitle (0.6s) */
    opacity: 0;
    animation: luxuryFocus 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

/* =======================================================
   RESPONSIVE TYPOGRAPHY
   ======================================================= */
@media (max-width: 768px) {
    .hero-title {
        font-size: 48px; 
        letter-spacing: 5px;
    }
    .hero-subtitle {
        font-size: 1rem;
        letter-spacing: 4px;
    }
}

/* --- STRICT MOBILE VIEW --- */
@media (max-width: 425px) {
    .hero-title {
        font-size: 36px !important; 
        letter-spacing: 3px;
    }
    .hero-subtitle {
        font-size: 14px;
        letter-spacing: 3px;
    }
}
/* =======================================================
   2. VISION SECTION (Minimal Soft Black)
   ======================================================= */
.vision-section {
    background: var(--dark-charcoal);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.vision-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.03) 0%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.vision-header {
    margin-bottom: 50px;
    position: relative;
    z-index: 2;
}

.vision-label {
    display: block;
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--luxury-gold);
    margin-bottom: 20px;
    opacity: 0;
}

.vision-divider {
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom, transparent, rgba(212, 175, 55, 0.5), transparent);
    margin: 20px auto 40px;
    opacity: 0;
    position: relative;
    transition: height 1.5s var(--smooth-ease) 0.4s, opacity 1s ease 0.4s;
}

.fade-in.visible .vision-divider {
    height: 50px;
    opacity: 1;
}

.vision-quote {
    max-width: 1500px;
    margin: 0 auto;
    color: var(--text-grey);
    position: relative;
    z-index: 2;
    opacity: 0;
}

.gold-highlight {
    color: var(--white);
    font-style: italic;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 2px;
    transition: 0.4s;
}

.gold-highlight:hover {
    border-color: var(--luxury-gold);
    color: var(--luxury-gold);
}

@keyframes slideUpText {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in.visible .vision-label {
    animation: slideUpText 1s var(--smooth-ease) forwards 0.1s;
}

.fade-in.visible .vision-title {
    animation: slideUpText 1s var(--smooth-ease) forwards 0.3s;
}

.fade-in.visible .vision-quote {
    animation: slideUpText 1s var(--smooth-ease) forwards 0.6s;
}

/* =======================================================
   3. FOUNDERS GRID (Dark Charcoal)
   ======================================================= */
.founders-section {
    background: var(--dark-charcoal);
}

.section-label {
    color: var(--luxury-gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 12px;
    margin-bottom: 30px;
    display: block;
    font-weight: 300;
}

.founders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    max-width: 1400px;
    margin: 0 auto;
}

.founder-card {
    position: relative;
    height: 650px;
    overflow: hidden;
    border-radius: 8px;
}

.founder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.5s var(--smooth-ease), filter 1s ease;
    filter: grayscale(100%) brightness(0.7);
}

.founder-card:hover .founder-img {
    filter: grayscale(20%) brightness(1.1);
    transform: scale(1.03);
}

.founder-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 50px;
    opacity: 1;
    transition: 0.8s var(--smooth-ease);
}

.founder-role {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--luxury-gold);
    margin-bottom: 10px;
    transform: translateY(20px);
    opacity: 0;
    transition: 0.6s var(--smooth-ease) 0.1s;
}

.founder-name {
    font-family: var(--font-heading);
    font-size: 40px;
    color: var(--white);
    margin: 0;
    transform: translateY(20px);
    transition: 0.6s var(--smooth-ease);
    font-weight: 300;
}

.founder-card:hover .founder-role,
.founder-card:hover .founder-name {
    opacity: 1;
    transform: translateY(0);
}

/* =======================================================
   4. AWARDS & RECOGNITIONS (Cinematic Scale)
   ======================================================= */
.awards-recognition-section {
    display: none !important;
    position: relative;
    padding: 180px 10px !important;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--black);
}

.awards-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.8;
}

.awards-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle, rgba(10, 10, 10, 0.7) 0%, rgba(0, 0, 0, 0.95) 100%);
}

.awards-container {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    width: 100%;
}

.awards-heading {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0 0 80px 0;
    color: var(--white);
}

.awards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 60px 100px;
}

.award-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s var(--smooth-ease), filter 0.6s ease;
    opacity: 0.7;
}

.award-logo-item:hover {
    transform: scale(1.08);
    opacity: 1;
}

.award-logo-item img {
    max-height: 70px;
    width: auto;
    filter: brightness(0) invert(1);
}

/* =======================================================
   5. CAREERS SECTION (Frosted Glass Aesthetic)
   ======================================================= */
.careers-premium-section {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--black);
}

.careers-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat fixed;
    filter: grayscale(50%);
}

.careers-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

.careers-glass-card {
    position: relative;
    z-index: 2;
    background: var(--card-bg);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid var(--border-thin);
    padding: 80px 60px;
    text-align: center;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8);
    width: 60%;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(50px) scale(0.98);
    transition: all 1.2s var(--smooth-ease);
}

.careers-premium-section.is-visible .careers-glass-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.careers-label {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--luxury-gold);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 300;
}

.careers-desc {
    color: var(--text-grey);
    margin: 0 auto 45px auto;
    max-width: 800px;
}

.btn-luxury-apply {
    display: inline-block;
    padding: 18px 45px;
    background: transparent;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    transition: all 0.6s var(--smooth-ease);
    z-index: 1;
    border-radius: 4px;
}

.btn-luxury-apply::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--white);
    z-index: -1;
    transition: width 0.6s var(--smooth-ease);
}

.btn-luxury-apply:hover {
    color: var(--black);
    border-color: var(--white);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

.btn-luxury-apply:hover::before {
    width: 100%;
}

/* =======================================================
   6. DUBAI INVESTMENT (Premium Navy Black)
   ======================================================= */
.invest-dubai-section {
    background-color: var(--black);
    overflow: hidden;
}

.invest-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}

.invest-image-wrapper {
    width: 100%;
    height: 700px;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: translateX(-40px);
    border-radius: 8px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    transition: all 1.5s var(--smooth-ease);
}

.invest-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    transform: scale(1.1);
    transition: transform 2s var(--smooth-ease);
}

.invest-content {
    padding-right: 40px;
}

.invest-anim {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s var(--smooth-ease);
}

.invest-subtitle {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: var(--luxury-gold);
    margin-bottom: 25px;
}

.invest-title {
    color: var(--white);
    margin: 0 0 40px 0;
    letter-spacing: 2px;
}

.invest-text p {
    color: var(--text-grey);
    margin-bottom: 30px;
}

.invest-dubai-section.is-visible .invest-image-wrapper {
    opacity: 1;
    transform: translateX(0);
}

.invest-dubai-section.is-visible .invest-image {
    transform: scale(1);
}

.invest-dubai-section.is-visible .invest-anim {
    opacity: 1;
    transform: translateY(0);
}

/* =======================================================
   7. FUTURE PROJECTS (Dark Charcoal Overlay)
   ======================================================= */
.projects-section {
    position: relative !important;
    background-color: var(--dark-charcoal);
    overflow: hidden;
}

.projects-section .hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.projects-section .hero-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}

.projects-section .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(17, 17, 17, 0.95) 0%, rgba(17, 17, 17, 0.7) 100%);
}

.projects-section .dubai-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
}

.future-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px;
    background: var(--card-bg);
    border: 1px solid var(--border-thin);
    border-radius: 12px;
}

.future-sub {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 6px;
    color: var(--luxury-gold);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.future-title {
    color: var(--white);
    letter-spacing: 6px;
    margin: 0;
}

.future-post {
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 5px;
    color: var(--text-grey);
    text-transform: uppercase;
    margin-top: 20px;
}

.projects-header {
    color: var(--white);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 300;
}

.projects-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 50px;
    position: relative;
}

.projects-divider::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 1px;
    background: var(--luxury-gold);
}

.projects-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.project-item {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    transition: transform 0.6s var(--smooth-ease);
    cursor: pointer;
}

.project-item:hover {
    transform: translateX(15px);
}

.project-icon {
    font-size: 24px;
    color: var(--luxury-gold);
    min-width: 40px;
    text-align: center;
    margin-top: 5px;
    font-weight: 300;
}

.project-text h4 {
    font-family: var(--font-body);
    font-size: 20px;
    color: var(--white);
    margin-bottom: 10px;
    font-weight: 400;
    letter-spacing: 1px;
}

.project-text p {
    color: var(--text-grey);
    margin: 0;
    font-size: 15px !important;
}

/* =======================================================
   8. UNIQUE STICKY-SCROLL JOURNEY (Soft Black)
   ======================================================= */
.invest-sticky-section {
    position: relative;
    z-index: 2;
    background: var(--soft-black);
}

.invest-sticky-container {
    display: flex;
    gap: 100px;
    max-width: 1400px;
    margin: 0 auto;
    align-items: flex-start;
}

.invest-sticky-left {
    width: 40%;
    position: sticky;
    top: 15vh;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.invest-pre {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: var(--luxury-gold);
    margin-bottom: 20px;
}

.invest-sticky-left h2 {
    color: var(--white);
}

.invest-sticky-image {
    margin-top: 40px;
    flex-grow: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-thin);
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.invest-sticky-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    transition: transform 2s ease;
}

.invest-sticky-left:hover .invest-sticky-image img {
    transform: scale(1.05);
}

.invest-sticky-right {
    width: 60%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding-bottom: 15vh;
}

.invest-glass-card {
    background: var(--card-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-thin);
    border-left: 2px solid var(--luxury-gold);
    padding: 60px 50px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.8s var(--smooth-ease);
}

.invest-glass-card:hover {
    transform: translateY(-10px);
    background: var(--hover-dark);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    border-left-color: var(--luxury-gold);
}

.card-watermark {
    position: absolute;
    right: -10px;
    bottom: -30px;
    font-family: var(--font-heading);
    font-size: 160px;
    color: rgba(255, 255, 255, 0.02);
    line-height: 1;
    pointer-events: none;
    transition: 0.8s var(--smooth-ease);
}

.invest-glass-card:hover .card-watermark {
    color: rgba(212, 175, 55, 0.04);
    transform: scale(1.05);
}

.invest-card-header {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-bottom: 25px;
    position: relative;
    z-index: 2;
}

.invest-card-icon {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--luxury-gold);
    font-size: 18px;
    transition: 0.6s ease;
}

.invest-glass-card:hover .invest-card-icon {
    background: var(--luxury-gold);
    color: var(--black);
}

.invest-card-title {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--white);
    margin: 0;
    font-weight: 300;
}

.invest-card-text {
    position: relative;
    z-index: 2;
}

.invest-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.invest-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
}

.invest-list li::before {
    content: '—';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--luxury-gold);
    font-size: 14px;
    font-weight: bold;
}

/* =======================================================
   9. LEGACY OF ARTISTRY SECTION (Editorial Split)
   ======================================================= */
.legacy-section {
    background-color: var(--black);
    position: relative;
    overflow: hidden;
}

/* Faint Luxury Geometric Background Pattern */
.legacy-pattern-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.8;
    z-index: 0;
    pointer-events: none;
}

.legacy-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Left Image Box */
.legacy-image-wrapper {
    width: 100%;
    height: 850px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-thin);
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.9);
    position: relative;
}

.legacy-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.9) contrast(1.1);
    transition: transform 2s var(--smooth-ease);
}

.legacy-image-wrapper:hover .legacy-img {
    transform: scale(1.04);
}

/* Right Content Box */
.legacy-content {
    text-align: center;
}

.legacy-title {
    margin: 0 0 50px 0;
}

.legacy-text-block p {
    margin: 0 0 25px 0;
    text-align: justify;
    text-align-last: center;
}

.legacy-signature {
    max-width: 250px;
    margin-top: 40px;
    filter: brightness(0) invert(1);
    display: inline-block;
    opacity: 0.8;
    transition: 0.6s ease;
}

.legacy-signature:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* =======================================================
   10. RESPONSIVE LAYOUTS (LAPTOP, TABLET, MOBILE)
   ======================================================= */

/* --- LAPTOP VIEW (Max 1024px) --- */
@media (max-width: 1024px) {

    /* Grids & Containers */
    .founders-grid {
        gap: 40px;
    }

    .invest-container {
        gap: 50px;
    }

    .legacy-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .legacy-image-wrapper {
        height: 600px;
    }

    /* Sticky Section becomes stacked */
    .invest-sticky-container {
        flex-direction: column;
        gap: 50px;
    }

    .invest-sticky-left {
        width: 100%;
        position: relative;
        top: 0;
        height: auto;
        text-align: start;
    }

    .invest-sticky-image {
        height: 450px;
        margin-top: 30px;
    }

    .invest-sticky-right {
        width: 100%;
        padding-bottom: 0;
    }

    .invest-glass-card:hover {
        transform: translateY(-5px);
    }
}

/* --- TABLET VIEW (Max 768px) --- */
@media (max-width: 768px) {

    /* 1 Column conversions */
    .founders-grid {
        grid-template-columns: 1fr;
    }

    .invest-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Layout tweaks */
    .awards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 30px;
        justify-items: center;
    }

    .award-logo-item:last-child {
        grid-column: span 2;
    }

    .careers-bg {
        background-attachment: scroll;
    }

    .careers-glass-card {
        width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        padding: 60px 40px;
    }

    .invest-content {
        padding-right: 0;
    }

    .invest-image-wrapper {
        height: 400px;
    }
}

/* --- MOBILE VIEW (Max 425px) --- */
/* =======================================================
   STRICT MOBILE VIEW (Max 425px) - CLEAN & LEFT-ALIGNED
   ======================================================= */
@media (max-width: 425px) {

    /* 1. STRICT 20PX PADDING ON ALL SECTIONS */
    .vision-section,
    .careers-premium-section,
    .invest-dubai-section,
    .projects-section,
    .invest-sticky-section,
    .legacy-section,
    .has-bg,
    .projects-section,
    .luxury-faq-section,
    .projects-section {
        padding: 20px 20px !important;
    }

    .founders-section {
        padding: 10px 20px !important;
    }

    .awards-recognition-section {
        padding: 60px 20px !important;
        min-height: auto;
    }

    /* 2. STRICT LEFT ALIGNMENT FOR ALL TEXT & HEADINGS */
    .vision-title,
    .awards-heading,
    .careers-title,
    .invest-title,
    .projects-header,
    .invest-sticky-left h2,
    .future-title,
    .legacy-title,
    .faq-title,
    .heading-strict,
    .properties-header,
    .vision-label,
    .section-label,
    .invest-subtitle,
    .invest-pre,
    .faq-header,
    .hero-title,
    .hero-subtitle,
    .hero-location,
    .hero-brand {
        text-align: left !important;
    }

    /* 3. STRICT MOBILE TYPOGRAPHY SIZING */
    .vision-title,
    .awards-heading,
    .careers-title,
    .invest-title,
    .projects-header,
    .invest-sticky-left h2,
    .future-title,
    .legacy-title,
    .faq-title,
    .heading-strict {
        font-size: 32px !important;
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
    }

    .vision-quote,
    .careers-desc,
    .invest-text p,
    .project-text p,
    .invest-card-text p,
    .invest-list li,
    .legacy-text-block p,
    .para-strict,
    .info-list li,
    .faq-answer-inner p {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
        text-align: left !important;
        text-align-last: left !important;
        color: var(--text-grey);
    }

    /* 4. FIX CENTERED DIVIDERS & LINES TO SNAP LEFT */
    .vision-divider,
    .faq-divider,
    .projects-divider {
        margin: 20px 0 !important;
    }

    .heading-line::after {
        margin: 15px 0 0 !important;
    }

    /* 5. HERO SLIDER MOBILE CLEANUP */
    .luxury-hero-slider,
    .rent-hero,
    .about-hero {
        height: 100vh;
        min-height: 600px;
    }

    .hero-content-wrapper {
        padding: 0 20px !important;
        text-align: left !important;
        justify-content: center;
    }

    .hero-text-col {
        align-items: flex-start !important;
    }

    .hero-title {
        font-size: 40px !important;
        letter-spacing: 2px;
    }

    .hero-location {
        margin-bottom: 30px;
        font-size: 13px;
    }

    .btn-glass {
        padding: 14px 25px;
    }

    /* Hide the floating image on mobile to make it clean, just keep text & arrows */
    .hero-preview-card {
        display: none;
    }

    .hero-preview-col {
        justify-content: flex-start;
        gap: 20px;
        margin-top: 30px;
    }

    .hero-nav-arrow {
        font-size: 28px;
        padding: 10px 15px 10px 0;
    }

    /* 6. COMPONENT ADJUSTMENTS (Cards & Images) */
    .founder-card {
        height: 400px;
        border-radius: 4px;
    }

    .founder-overlay {
        padding: 30px 20px;
        align-items: flex-start;
        text-align: left;
    }

    .founder-name {
        font-size: 28px;
    }

    .awards-grid {
        gap: 30px 20px;
        justify-items: flex-start;
        justify-content: flex-start;
    }

    .award-logo-item img {
        max-height: 40px;
    }

    .careers-glass-card {
        padding: 40px 20px;
        text-align: left !important;
        border-radius: 8px;
    }

    .invest-image-wrapper,
    .invest-sticky-image {
        height: 250px;
        border-radius: 8px;
    }

    .invest-content {
        padding: 30px 0px 0px 0px;
    }

    /* Fix future projects card centering */
    .future-card {
        height: auto;
        padding: 30px 20px;
        border: none;
        border-radius: 8px;
        align-items: flex-start;
        /* Snaps content inside to left */
        text-align: left !important;
    }

    .invest-glass-card {
        padding: 30px 20px;
        border-radius: 8px;
    }

    .invest-card-title {
        font-size: 22px;
    }

    .card-watermark {
        font-size: 80px;
        right: 0px;
        bottom: -10px;
    }

    .legacy-image-wrapper {
        height: 350px;
        border-radius: 8px;
    }

    .legacy-content {
        text-align: left !important;
        padding: 20px 0 0 0;
    }

    .legacy-signature {
        max-width: 150px;
        margin-top: 20px;
        float: left;
    }

    /* 7. FAQ MOBILE FIXES */
    .faq-question {
        padding: 20px;
    }

    .faq-question h3 {
        font-size: 16px !important;
    }

    .faq-answer-inner {
        padding: 0 20px 20px 20px;
    }

    .faq-item {
        border-radius: 8px;
    }

    /* 8. GRID & TESTIMONIAL CARDS */
    .card-img-wrap {
        height: 220px;
    }

    .card-content {
        padding: 20px;
        text-align: left;
    }

    .test-card {
        padding: 30px 20px;
        text-align: left;
    }

    .info-image {
        height: 250px;
    }
}

/* =======================================================
   CINEMATIC HORIZONTAL SLIDER (Why Invest In Dubai)
   ======================================================= */
.dubai-horizontal-section {
    position: relative;
    padding: 120px 0 !important;
    /* Top/Bottom padding. L/R handled inside */
    background-color: var(--black, #000);
    overflow: hidden;
    z-index: 2;
}

/* Ambient glow to separate from pure black */
.horizontal-bg-glow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

.horizontal-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
}

/* --- Header & Controls Layout --- */
.horizontal-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 40px;
    /* Aligns with max-width container */
    margin-bottom: 60px;
}

.header-text-col {
    text-align: left;
}

.horizontal-pre {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--luxury-gold);
    margin-bottom: 15px;
}

.horizontal-title {
    font-family: var(--font-heading) !important;
    font-size: 50px !important;
    color: var(--white);
    line-height: 1.2 !important;
    font-weight: 400 !important;
    margin: 0 0 20px 0;
}

.horizontal-divider {
    width: 80px;
    height: 1px;
    background: var(--luxury-gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

/* --- Slider Controls (Desktop) --- */
.slider-controls {
    display: flex;
    gap: 15px;
}

.slide-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s var(--smooth-ease);
}

.slide-btn:hover {
    background: var(--white);
    color: var(--black);
    transform: scale(1.1);
}

/* --- The Horizontal Track --- */
.horizontal-track-wrapper {
    width: 100%;
    position: relative;
}

/* --- The Continuous Horizontal Track --- */
.horizontal-track {
    display: flex;
    gap: 30px;
    padding: 20px 40px 60px 40px;
    overflow-x: auto;
    /* REMOVED scroll-snap so it glides smoothly */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.horizontal-track::-webkit-scrollbar {
    display: none;
}

/* --- The Glass Cards --- */
/* --- The Glass Cards --- */
.h-card {
    flex: 0 0 400px;
    min-height: 420px;
    /* REMOVED scroll-snap-align */
    background: rgba(15, 15, 15, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.h-card:hover {
    transform: translateY(-10px);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    background: rgba(25, 25, 25, 0.8);
}

.feature-h-card {
    border-bottom: 3px solid var(--luxury-gold);
}

/* Faint Background Numbers */
.h-card .card-watermark {
    position: absolute;
    right: -10px;
    bottom: -20px;
    font-family: var(--font-heading);
    font-size: 150px;
    color: rgba(255, 255, 255, 0.02);
    line-height: 1;
    pointer-events: none;
    transition: all 0.5s ease;
}

.h-card:hover .card-watermark {
    color: rgba(212, 175, 55, 0.04);
    transform: scale(1.05);
}

/* Card Typography */
.h-card-icon {
    font-size: 32px;
    color: var(--luxury-gold);
    margin-bottom: 30px;
    display: block;
}

.h-card h3 {
    font-family: var(--font-heading);
    font-size: 26px;
    color: var(--white);
    margin: 0 0 15px 0;
    font-weight: 300;
    position: relative;
    z-index: 2;
}

.h-card p {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text-grey);
    line-height: 1.8;
    margin: 0;
    font-weight: 300;
    position: relative;
    z-index: 2;
}


/* =======================================================
   RESPONSIVE LAYOUTS (TABLET & MOBILE)
   ======================================================= */
@media (max-width: 1024px) {
    .h-card {
        flex: 0 0 350px;
        padding: 40px 30px;
        min-height: 380px;
    }
}

@media (max-width: 768px) {
    .horizontal-header-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .slider-controls {
        display: none;
    }

    /* Hide buttons on tablet/mobile, rely on native swipe */
    .h-card {
        flex: 0 0 320px;
    }
}

/* --- STRICT MOBILE VIEW (Max 425px) --- */
@media (max-width: 425px) {

    /* 1. Global Section Spacing */
    .dubai-horizontal-section {
        padding: 60px 0 !important;
        /* Top/bottom 60px. Sides 0 to allow full bleed swipe */
    }

    /* 2. STRICT 20PX PADDING L/R AND LEFT ALIGNMENT FOR HEADER */
    .horizontal-header-top {
        padding: 0 20px !important;
        margin-bottom: 40px;
    }

    .header-text-col {
        text-align: left !important;
        width: 100%;
    }

    .horizontal-pre {
        text-align: left !important;
        font-size: 12px;
        margin-bottom: 10px;
    }

    .horizontal-title {
        text-align: left !important;
        font-size: 36px !important;
        margin-bottom: 15px !important;
    }

    .horizontal-divider {
        margin: 0 !important;
        /* Snaps line strictly to left */
    }

    /* 3. MOBILE SLIDER TRACK */
    .horizontal-track {
        padding: 10px 20px 40px 20px;
        /* Creates exactly 20px padding on left start */
        gap: 15px;
        /* Tighter gap for mobile */
    }

    /* 4. MOBILE CARDS (Allows next card to "peek" in) */
    .h-card {
        flex: 0 0 85vw;
        /* Takes up 85% of screen, showing part of the next card */
        min-height: auto;
        padding: 30px 20px;
        text-align: left !important;
        border-radius: 8px;
    }

    .h-card-icon {
        font-size: 26px;
        margin-bottom: 20px;
    }

    .h-card h3 {
        font-size: 22px !important;
        margin-bottom: 10px;
        text-align: left !important;
    }

    .h-card p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        text-align: left !important;
        text-align-last: left !important;
    }

    .h-card .card-watermark {
        font-size: 100px;
        right: -5px;
        bottom: -10px;
    }
}

/* =======================================================
   HORIZONTAL SCROLL TIMELINE (A Globally Awarded Visionary)
   ======================================================= */

/* Make the section very tall. 
   300vh means the user has to scroll down 3 screen heights 
   to get past this section. This gives us room to animate horizontally.
*/
.story-scroll-section {
    position: relative;
    height: 300vh;
    /* Increase this to 400vh if you add a 4th slide */
    background-color: var(--black, #000);
    z-index: 2;
}

/* The sticky container locks to the screen while scrolling through the 300vh */
.story-sticky-container {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* The track that actually moves horizontally */
.story-track {
    display: flex;
    height: 100%;
    width: 300vw;
    /* 100vw for each slide. Change to 400vw if you have 4 slides */
    will-change: transform;
}

/* Individual Slide Layout */
.story-slide {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-shrink: 0;
}

/* --- LEFT SIDE: Content --- */
.story-left {
    width: 50%;
    height: 100%;
    background-color: var(--black, #000);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10%;
}

.story-content {
    position: relative;
    z-index: 2;
    transform: translateY(-50px);
    /* Lifts text up slightly so year fits below */
}

.story-subtitle {
    display: block;
    font-family: var(--font-body);
    font-size: 16px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text-grey, #9A9A9A);
    margin-bottom: 5px;
    font-weight: 300;
}

.story-title {
    font-family: var(--font-heading) !important;
    font-size: 50px !important; /* STRICT DESKTOP: 50px */
    color: var(--white);
    line-height: 1.2 !important;
    font-weight: 400 !important;
    margin: 0 0 30px 0;
    letter-spacing: 2px;
}

.story-desc {
    font-family: var(--font-body) !important;
    font-size: 18px !important; /* STRICT DESKTOP: 18px */
    color: var(--text-grey);
    line-height: 1.8 !important;
    max-width: 500px;
    margin: 0;
    font-weight: 300;
}

/* The Massive Outline Year Effect */
.story-year {
    position: absolute;
    bottom: 50px;
    left: 10%;
    font-family: var(--font-heading);
    font-size: 250px;
    line-height: 1;
    color: transparent;
    /* Makes the inside of the text invisible */
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4);
    /* Creates the glass/metallic outline */
    z-index: 1;
    user-select: none;
}

/* --- RIGHT SIDE: Video --- */
.story-right {
    width: 50%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.story-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.85);
    /* Slightly dims video to match dark aesthetic */
}

/* =======================================================
   RESPONSIVE LAYOUTS & STRICT TYPOGRAPHY 
   (TABLET: 724px & MOBILE: 424px)
   ======================================================= */

/* --- TABLET VIEW (Max 724px) --- */
@media (max-width: 724px) {
    
    /* 1. STRICT HEADINGS (36px) - Applies to all sections */
    .hero-title,
    .vision-title,
    .awards-heading,
    .careers-title,
    .invest-title,
    .projects-header,
    .future-title,
    .invest-sticky-left h2,
    .legacy-title,
    .horizontal-title,
    .story-title,
    .team-hero-content .rent-pg-section-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }

    /* 2. STRICT PARAGRAPHS & LISTS (16px) - Applies to all sections */
    .vision-quote,
    .careers-desc,
    .invest-text p,
    .project-text p,
    .invest-card-text p,
    .invest-list li,
    .legacy-text-block p,
    .story-desc,
    .h-card p,
    .team-hero-content .rent-pg-description {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Keep Card Titles Proportional */
    .founder-name { font-size: 28px !important; }
    .invest-card-title, .h-card h3 { font-size: 22px !important; }

    /* Layout Fixes */
    .founders-grid, .invest-container, .legacy-container, .invest-sticky-container {
        grid-template-columns: 1fr; flex-direction: column; gap: 50px;
    }
    .awards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }

    /* Section Spacing */
    .vision-section, .founders-section, .careers-premium-section, 
    .invest-dubai-section, .projects-section, .invest-sticky-section, 
    .legacy-section, .team-hero-section {
        padding: 80px 5% !important;
    }

    /* Image Sizing */
    .about-hero { height: 60vh; min-height: 400px; }
    .hero-bg video { object-position: 60% center !important; }
    .invest-image-wrapper, .invest-sticky-image, .legacy-image-wrapper { height: 400px; }
    .invest-sticky-left { position: relative; top: 0; width: 100%; height: auto; }
    .invest-sticky-right { width: 100%; padding-bottom: 0; }
    
    /* Horizontal Slider Fixes */
    .horizontal-header-top { flex-direction: column; align-items: flex-start; gap: 20px; }
    .slider-controls { display: none; }
    .h-card { flex: 0 0 320px; }
}
/* --- STRICT MOBILE VIEW (Max 425px) --- */
@media (max-width: 425px) {
    
    /* Global Section Padding on Mobile */
    .vision-section {
        padding: 50px 20px !important;
    }

    /* STRICT MOBILE TYPOGRAPHY (36px/16px) */
    .story-title {
        font-size: 36px !important;
        margin-bottom: 20px !important;
        line-height: 1.2 !important;
        text-align: left !important;
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9), 0px 10px 30px rgba(0, 0, 0, 0.7);
    }

    .story-desc {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 0 !important; /* Removed bottom margin so it doesn't push empty space */
        text-align: left !important;
    }

    /* =======================================================
       VISIONARY SECTION (STORY SCROLL) MOBILE FIX 
       ======================================================= */
    
    /* 1. Stack the text on top of the video and fill the WHOLE screen */
    .story-slide { 
        flex-direction: column !important; 
        width: 100vw !important; 
        height: 100vh !important; /* THE FIX: Must be 100vh to fill the screen! */
        height: 100svh !important; /* Mobile browser bar fix */
        display: flex !important;
    }

    /* 2. Text Container (Takes only the space it needs) */
    .story-left { 
        flex: 0 0 auto !important; /* Adapts to text height */
        width: 100% !important; 
        height: auto !important; 
        background-color: var(--black, #000) !important; 
        padding: 100px 20px 30px 20px !important; /* Extra top padding clears your logo */
        justify-content: center !important; 
        align-items: flex-start !important; 
        text-align: left !important;
        z-index: 2 !important;
    }

    .story-content {
        transform: translateY(0) !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 5 !important;
    }

    /* 3. Image Container (Stretches to destroy the black gap) */
    .story-right { 
        flex: 1 !important; /* THE FIX: This forces the image to fill the rest of the screen */
        width: 100% !important; 
        height: auto !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* 4. Make the image fill its stretched container */
    .story-video {
        position: absolute !important;
        top: 0 !important; 
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        opacity: 0.8 !important; 
        filter: contrast(1.1) !important;
    }

    /* 5. Tucks the year watermark safely into the top right corner */
    .story-year { 
        font-size: 80px !important;
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        bottom: auto !important;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.2) !important;
        z-index: 1 !important;
    }
}
/* =======================================================
   OUR TEAM HERO SECTION (GROUP PHOTO STYLE)
   ======================================================= */
.team-hero-section {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    /* Centers vertically */
    justify-content: center;
    /* CHANGED: Centers the box horizontally perfectly */
    overflow: hidden;
    background-color: var(--rent-dark);
    padding: 120px 5%;
}

/* --- Background Image & Animation --- */
.team-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.team-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: brightness(0.7) contrast(1.1);
    transition: transform 8s cubic-bezier(0.25, 1, 0.5, 1);
}

.team-hero-section:hover .team-hero-bg img {
    transform: scale(1.05);
}

/* --- The Glass Content Box --- */
.team-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

.team-hero-content {
    background: rgba(15, 15, 15, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 70px 60px;
    max-width: 900px;
    margin: 0 auto;
    /* CHANGED: Locks the box in the center */
    border-radius: 4px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* CHANGED: Centers the button */
}

/* Typography Overrides for inside the box */
.team-hero-content .rent-pg-section-title {
    color: var(--rent-white);
    margin-bottom: 25px;
    text-align: center !important;
    /* CHANGED: Matches your image */
}

.team-hero-content .rent-pg-description {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 40px;
    text-align: center !important;
    /* CHANGED: Matches your image */
    text-align-last: center !important;
}

/* --- The White Button --- */
.team-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* CHANGED: Centers text inside button */
    gap: 20px;
    background: var(--white);
    color: var(--black);
    padding: 20px 40px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 260px;
    border-radius: 2px;
}

.team-hero-btn i {
    color: var(--rent-gold, #D4AF37);
    font-size: 18px;
    transition: transform 0.4s ease;
}

.team-hero-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.team-hero-btn:hover i {
    transform: translateX(8px);
}

/* =======================================================
   RESPONSIVE LAYOUTS (TABLET & MOBILE)
   ======================================================= */
@media (max-width: 1024px) {
    .team-hero-content {
        padding: 50px 40px;
        max-width: 650px;
    }
}

@media (max-width: 768px) {
    .team-hero-section {
        align-items: center;
        padding: 80px 5%;
        min-height: 80vh;
    }

    .team-hero-content {
        max-width: 100%;
    }


    .about-hero {
        /* THIS IS THE MAGIC FIX: 
           By making the hero box shorter on mobile (60vh instead of 100vh), 
           the video stretches wider, meaning far less of the sides get cut off! */
        height: 60vh; 
        min-height: 400px; /* Ensures it doesn't get too small on tiny phones */
    }
    
    /* If the most important part of your video is on the left or right, 
       you can force the phone to focus on that side instead of the center!
       Change this to "left center" or "right center" if needed. */
    .hero-bg video {
object-position: 60% center !important;    }
}

/* --- STRICT MOBILE VIEW (Max 425px) --- */
@media (max-width: 425px) {

    .team-hero-section {
        padding: 60px 20px !important;
        min-height: auto;
    }

    .team-hero-content {
        padding: 40px 25px !important;
        border-radius: 8px;
        background: rgba(10, 10, 10, 0.85);
    }

    /* Strict Mobile Centered Typography */
    .team-hero-content .rent-pg-section-title {
        font-size: 36px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .team-hero-content .rent-pg-description {
        font-size: 16px !important;
        line-height: 1.6 !important;
        margin-bottom: 30px !important;
        text-align: center !important;
        text-align-last: center !important;
    }

    .team-hero-btn {
        width: 100%;
        padding: 18px 25px;
        justify-content: space-between;
        /* Pushes text to left and arrow to right on mobile button */
    }
}

/* =======================================================
   RESPONSIVE LAYOUTS & STRICT TYPOGRAPHY 
   (TABLET: 724px & MOBILE: 424px)
   ======================================================= */

/* --- TABLET VIEW (Max 724px) --- */
@media (max-width: 724px) {
    
    /* 1. STRICT HEADINGS (36px) - Applies to all sections */
    .hero-title,
    .vision-title,
    .awards-heading,
    .careers-title,
    .invest-title,
    .projects-header,
    .future-title,
    .invest-sticky-left h2,
    .legacy-title,
    .horizontal-title,
    .story-title,
    .team-hero-content .rent-pg-section-title {
        font-size: 36px !important;
        line-height: 1.2 !important;
        margin-bottom: 20px !important;
    }

    /* 2. STRICT PARAGRAPHS & LISTS (16px) - Applies to all sections */
    .vision-quote,
    .careers-desc,
    .invest-text p,
    .project-text p,
    .invest-card-text p,
    .invest-list li,
    .legacy-text-block p,
    .story-desc,
    .h-card p,
    .team-hero-content .rent-pg-description {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Keep Card Titles Proportional (Don't force to 36px) */
    .founder-name { font-size: 28px !important; }
    .invest-card-title, .h-card h3 { font-size: 22px !important; }

    /* 3. LAYOUT FIXES FOR TABLET (1 Column Stacking) */
    .founders-grid,
    .invest-container,
    .legacy-container,
    .invest-sticky-container {
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 50px;
    }

    .awards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 20px;
    }

    /* Section Spacing */
    .vision-section, .founders-section, .careers-premium-section, 
    .invest-dubai-section, .projects-section, .invest-sticky-section, 
    .legacy-section, .team-hero-section {
        padding: 80px 5% !important;
    }

    /* Image & Video Sizing */
    .about-hero { height: 60vh; min-height: 400px; }
    .hero-bg video { object-position: 60% center !important; }
    .invest-image-wrapper, .invest-sticky-image, .legacy-image-wrapper { height: 400px; }
    .invest-sticky-left { position: relative; top: 0; width: 100%; height: auto; }
    .invest-sticky-right { width: 100%; padding-bottom: 0; }
    
    /* Horizontal Slider Fixes */
    .horizontal-header-top { flex-direction: column; align-items: flex-start; gap: 20px; }
    .slider-controls { display: none; }
    .h-card { flex: 0 0 320px; }
    
    /* Story Scroll Fixes */
    .story-slide { flex-wrap: nowrap; }
    .story-left { flex: 0 0 50vw; padding: 0 5%; }
    .story-right { flex: 0 0 50vw; }
    .story-year { font-size: 120px; bottom: 10px; left: 10px; }
}

/* --- STRICT MOBILE VIEW (Max 424px) --- */
@media (max-width: 424px) {
    
    /* 1. STRICT PADDING FOR MOBILE */
    .vision-section, .founders-section, .careers-premium-section, 
    .invest-dubai-section, .projects-section, .invest-sticky-section, 
    .legacy-section, .team-hero-section, .dubai-horizontal-section {
        padding: 60px 20px !important;
    }

    /* 2. ALIGNMENT CONTROL (Center vs Left) */
    
    /* CENTER ALIGNED (Main section titles & hero text) */
    .about-hero .hero-content,
    .vision-section,
    .awards-heading,
    .careers-glass-card,
    .future-card,
    .horizontal-header-top,
    .team-hero-content {
        text-align: center !important;
    }
    .vision-divider, .horizontal-divider { margin: 20px auto !important; }

    /* LEFT ALIGNED (Reading text, descriptions, cards, lists) */
    .invest-content,
    .invest-title,
    .invest-text,
    .invest-sticky-left h2,
    .invest-glass-card,
    .legacy-content,
    .legacy-title,
    .legacy-text-block p,
    .project-item,
    .h-card,
    .story-content {
        text-align: left !important;
    }
    .invest-list, .legacy-text-block { text-align: left !important; display: block; }
    
    /* 3. MOBILE SPECIFIC LAYOUT ADJUSTMENTS */
    
    /* Images */
    .invest-image-wrapper, .invest-sticky-image, .legacy-image-wrapper { height: 250px; }
    .founder-card { height: 400px; }
    .legacy-signature { float: left; margin-top: 20px; }
    
    /* Horizontal Slider Swipe Adjustments */
    .horizontal-track { padding: 10px 20px 40px 20px; gap: 15px; }
    .h-card { flex: 0 0 85vw; padding: 30px 20px; min-height: auto; }
    .h-card .card-watermark { font-size: 100px; right: -5px; bottom: -10px; }
    
    /* Awards Grid */
    .awards-grid { grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 30px 20px; }
    .award-logo-item img { max-height: 40px; }
    
    /* Glass Cards */
    .careers-glass-card { width: 100%; border: none; border-radius: 8px; padding: 40px 20px; }
    .invest-glass-card { padding: 30px 20px; }
    .future-card { padding: 30px 20px; text-align: left !important; align-items: flex-start; border: none; }
    .team-hero-content { padding: 40px 25px !important; width: 100%; }
    
    /* Story Scroll Fixes (Converts to stacked for tiny screens) */
    .story-slide { flex-direction: column; }
    .story-left { flex: 0 0 auto; width: 100%; height: 50vh; padding: 40px 20px; align-items: flex-start; }
    .story-right { flex: 0 0 auto; width: 100%; height: 50vh; }
    .story-year { font-size: 80px; bottom: 0; }
}