@charset "utf-8";

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

body{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color:       #222;
    background:  #fff;
    overflow-x:  hidden;
    user-select: auto;
    }

/* Decorative Elements */
.black-line{
    width:      100%;
    height:     1px;
    background: #222;
    margin:     60px 0;
    }

.black-block{
    width:         20px;
    height:        20px;
    background:    #222;
    position:      absolute;
    border-radius: 3px;
    }

.vertical-line{
    width:      1px;
    height:     100px;
    background: #222;
    margin:     40px auto;
    }

/* Navigation */
nav{
    position:        fixed;
    top:             0;
    width:           100%;
    background:      rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    z-index:         1000;
    padding:         20px 0;
    border-bottom:   2px solid #222;
    transition:      all 0.3s ease;
    }

nav.scrolled{
    padding:    15px 0;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    }

.nav-container{
    max-width:       1200px;
    margin:          0 auto;
    padding:         0 20px;
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    }

.logo{
    font-size:       24px;
    font-weight:     700;
    letter-spacing:  -1px;
    position:        relative;
    color:           #222;
    text-decoration: none;
    }

/*
.logo::after{
    content:    '';
    position:   absolute;
    right:      -15px;
    top:        50%;
    transform:  translateY(-50%);
    width:      8px;
    height:     8px;
    background: #222;
    }
*/

/* Hamburger Menu */
.menu-toggle{
    display:         none;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    width:           30px;
    height:          30px;
    cursor:          pointer;
    z-index:         1001;
    }

.menu-toggle span{
    display:    block;
    width:      25px;
    height:     2px;
    background: #222;
    margin:     3px 0;
    transition: all 0.3s ease;
    }

.menu-toggle.active span:nth-child(1){
    transform: rotate(45deg) translate(5px, 5px);
    }

.menu-toggle.active span:nth-child(2){
    opacity: 0;
    }

.menu-toggle.active span:nth-child(3){
    transform: rotate(-45deg) translate(7px, -6px);
    }

.nav-links{
    display:    flex;
    gap:        40px;
    list-style: none;
    }

.nav-links a{
    text-transform:  lowercase;
    font-variant:    small-caps;
    color:           #222;
    text-decoration: none;
    font-size:       16px;
    font-weight:     300;
    letter-spacing:  1px;
    transition:      all 0.3s ease;
    position:        relative;
    }

.nav-links a::before{
    content:    '';
    position:   absolute;
    left:       -15px;
    top:        50%;
    transform:  translateY(-50%);
    width:      0;
    height:     1px;
    background: #222;
    transition: width 0.3s ease;
    }

.nav-links a:hover::before,
.nav-links a.active::before{
    width: 10px;
    }

.nav-links a.active{
    font-weight: 700;
    color:       #a00;
    }

/* Section 1: Hero */
.hero{
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         80px 20px;
    position:        relative;
    overflow:        hidden;
    }

.hero::before{
    content:    '';
    position:   absolute;
    top:        20%;
    left:       10%;
    width:      100px;
    height:     1px;
    background: #a00;
    animation:  slideRight 8s ease-in-out infinite;
    }

.hero::after{
    content:      '';
    position:     absolute;
    bottom:       20%;
    right:        10%;
    width:        150px;
    height:       4px;
    opacity:      .02;
    /* background:   #AA0000;*/
    border-color: #a00;
    border-style: dotted;
    animation:    slideLeft 8s ease-in-out infinite;
    }

.hero-decoration{
    position:      absolute;
    top:           30%;
    right:         15%;
    width:         40px;
    height:        40px;
    border:        2px solid #a00;
    border-radius: 10px;
    transform:     rotate(45deg);
    animation:     rotateSquare 10s linear infinite;
    }

/* Animated Objects (Reduced) */
.floating-objects{
    position:       absolute;
    width:          100%;
    height:         100%;
    top:            0;
    left:           0;
    pointer-events: none;
    z-index:        1;
    }

.floating-circle{
    position:      absolute;
    width:         80px;
    height:        80px;
    border:        2px solid #a00;
    border-radius: 24%;
    opacity:       0.2;
    animation:     floatUp 18s ease-in-out infinite;
    }

.floating-circle:nth-child(1){
    left:            10%;
    bottom:          -100px;
    animation-delay: 0s;
    width:           60px;
    height:          60px;
    }

.floating-circle:nth-child(2){
    right:           15%;
    bottom:          -100px;
    animation-delay: 8s;
    width:           100px;
    height:          100px;
    }

.floating-square{
    position:      absolute;
    width:         30px;
    height:        30px;
    background:    #a00;
    opacity:       0.2;
    animation:     floatDiagonal 25s linear infinite;
    top:           40%;
    left:          -50px;
    border-radius: 8px;
    transform:     rotate(-45deg);
    }

.floating-line{
    position:         absolute;
    height:           2px;
    background:       #a00;
    opacity:          0.2;
    animation:        expandContract 10s ease-in-out infinite;
    width:            150px;
    top:              65%;
    right:            10%;
    transform-origin: center;
    }

.hero-content{
    text-align: center;
    max-width:  800px;
    animation:  fadeInUp 1s ease;
    position:   relative;
    z-index:    2;
    }

/* Animations */
@keyframes floatUp{
    0%, 100%{
        transform: translateY(0) scale(1);
        opacity:   0;
        }
    10%{
        opacity: 0.2;
        }
    50%{
        transform: translateY(-600px) scale(1.1);
        opacity:   0.05;
        }
    90%{
        opacity: 0;
        }
    }

@keyframes floatDiagonal{
    0%{
        transform: translate(0, 0) rotate(0deg);
        }
    100%{
        transform: translate(1400px, -300px) rotate(360deg);
        }
    }

@keyframes expandContract{
    0%, 100%{
        transform: scaleX(0.5) rotate(0deg);
        }
    50%{
        transform: scaleX(1.2) rotate(180deg);
        }
    }

@keyframes rotateSquare{
    0%{
        transform: rotate(45deg) scale(1);
        }
    25%{
        transform: rotate(135deg) scale(1.1);
        }
    50%{
        transform: rotate(225deg) scale(1);
        }
    75%{
        transform: rotate(315deg) scale(0.9);
        }
    100%{
        transform: rotate(405deg) scale(1);
        }
    }

@keyframes slideRight{
    0%, 100%{
        transform: translateX(0);
        opacity:   0.5;
        }
    50%{
        transform: translateX(50px);
        opacity:   1;
        }
    }

@keyframes slideLeft{
    0%, 100%{
        transform: translateX(0);
        opacity:   0.5;
        }
    50%{
        transform: translateX(-50px);
        opacity:   1;
        }
    }

.hero h1{
    font-size:      clamp(48px, 8vw, 88px);
    font-weight:    100;
    letter-spacing: -3px;
    margin-bottom:  30px;
    line-height:    0.9;
    position:       relative;
    }

.hero h1::after{
    content:    '';
    position:   absolute;
    bottom:     -15px;
    left:       50%;
    transform:  translateX(-50%);
    width:      60px;
    height:     2px;
    background: #222;
    }

.hero .subtitle{
    font-size:      16px;
    color:          #222;
    font-weight:    400;
    margin-bottom:  50px;
    letter-spacing: 2px;
    text-transform: uppercase;
    }

.cta-button{
    display:         inline-block;
    padding:         18px 50px;
    background:      #222;
    color:           #fff;
    text-decoration: none;
    font-variant:    small-caps;
    font-size:       12px;
    letter-spacing:  2px;
    transition:      all 0.3s ease;
    border:          2px solid #222;
    border-radius:   3px;
    position:        relative;
    }

.cta-button::before{
    content:       '';
    position:      absolute;
    top:           -10px;
    right:         -10px;
    width:         20px;
    height:        20px;
    border-top:    2px solid #222;
    border-right:  2px solid #222;
    border-radius: 3px;
    }

.cta-button:hover{
    background: #d40000;
    transform:  translate(-5px, -5px);
    }

/* Section 2: About - Mixed Layouts */
.about{
    padding:    120px 20px;
    background: #fff;
    position:   relative;
    }

.about::before{
    content:    '';
    position:   absolute;
    top:        50px;
    left:       0;
    width:      100%;
    height:     1px;
    background: #222;
    opacity:    .5;
    }

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

/* Quote Block */
.about-intro{
    margin-bottom: 80px;
    }

.quote-block{
    max-width:  900px;
    margin:     0 auto;
    text-align: center;
    position:   relative;
    }

.quote-mark{
    font-size:   120px;
    line-height: 1;
    font-weight: 100;
    position:    absolute;
    top:         -40px;
    left:        -60px;
    opacity:     0.1;
    }

.quote-block h3{
    font-size:      32px;
    font-weight:    300;
    line-height:    1.4;
    letter-spacing: -1px;
    margin-bottom:  30px;
    }

.quote-author{
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             20px;
    }

.author-line{
    width:      50px;
    height:     1px;
    background: #222;
    }

.quote-author p{
    font-size:      14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight:    500;
    }

/* Stats Grid */
.stats-grid{
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap:                   2px;
    background:            #222;
    padding:               2px;
    margin-bottom:         100px;
    }

.stat-item{
    background: #fff;
    padding:    60px 20px;
    text-align: center;
    position:   relative;
    }

.stat-item:hover{
    color:      #a00;
    background: rgba(255, 255, 255, 0.9);
    }

.stat-item:hover .stat-decoration{
    background: #f00;
    border:     none;
    }

.stat-number{
    font-size:      48px;
    font-weight:    100;
    letter-spacing: -2px;
    margin-bottom:  10px;
    }

.stat-label{
    font-size:      12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight:    500;
    }

.stat-decoration{
    position:      absolute;
    top:           20px;
    right:         20px;
    width:         20px;
    height:        20px;
    border:        1px solid #222;
    border-radius: 5px;
    transform:     rotate(45deg);
    }

/*
    Philosophy Section
*/
.philosophy-section{
    display:               grid;
    grid-template-columns: 300px 1fr;
    gap:                   80px;
    margin-bottom:         100px;
    align-items:           start;
    }

.philosophy-header{
    position: relative;
    }

.philosophy-header h2{
    font-size:        64px;
    font-weight:      100;
    letter-spacing:   -2px;
    writing-mode:     vertical-lr;
    text-orientation: mixed;
    transform:        rotate(180deg);
    padding-bottom:   30px;
    }

.header-decoration{
    position:      absolute;
    bottom:        0;
    right:         -20px;
    width:         40px;
    height:        40px;
    border-radius: 9px;
    background:    #a00;
    transform:     rotate(-45deg);
    }

.red{
    color: #a00;
    }

.philosophy-content{
    padding-top: 40px;
    }

.lead-text{
    font-size:     24px;
    line-height:   1.6;
    margin-bottom: 60px;
    font-weight:   300;
    }

.philosophy-points{
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   40px;
    }

.point-item{
    position:     relative;
    padding-left: 20px;
    }

.point-number{
    position:    absolute;
    left:        0;
    top:         0;
    font-size:   10px;
    font-weight: 700;
    }

.point-item h4{
    font-size:      16px;
    font-weight:    500;
    margin-bottom:  8px;
    letter-spacing: 0.5px;
    }

.point-item p{
    font-size:   14px;
    color:       #666;
    line-height: 1.6;
    }

/* Process Timeline */
.process-timeline{
    margin-bottom: 100px;
    }

.section-subtitle{
    font-size:      48px;
    font-weight:    100;
    text-align:     center;
    margin-bottom:  60px;
    letter-spacing: -1px;
    }

.timeline-container{
    position:        relative;
    display:         flex;
    justify-content: space-between;
    max-width:       900px;
    margin:          0 auto;
    }

.timeline-line{
    position:   absolute;
    top:        20px;
    left:       0;
    right:      0;
    height:     2px;
    background: #222;
    z-index:    0;
    }

.timeline-item{
    position:   relative;
    text-align: center;
    flex:       1;
    }

.timeline-dot{
    width:         40px;
    height:        40px;
    background:    #fff;
    border:        2px solid #222;
    margin:        0 auto 30px;
    position:      relative;
    z-index:       1;
    transition:    all 0.3s ease;

    border-radius: 9px;
    /* background:    #AA0000; */
    transform:     rotate(-45deg);
    }

.timeline-item:hover .timeline-dot{
    background: #f00;
    transform:  rotate(45deg);
    }

.timeline-content h4{
    font-variant:   small-caps;
    font-size:      18px;
    font-weight:    500;
    margin-bottom:  8px;
    letter-spacing: 0.5px;
    }

.timeline-content p{
    font-size: 14px;
    color:     #666;
    }

/* Values Grid */
.values-section{
    text-align: center;
    }

.values-header{
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             30px;
    margin-bottom:   60px;
    }

.values-header h2{
    font-size:      48px;
    font-weight:    100;
    letter-spacing: -1px;
    }

.black-square{
    width:         15px;
    height:        15px;
    border-radius: 4px;
    background:    #a00;
    transform:     rotate(-45deg);
    }

.values-grid{
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0;
    }

.value-card{
    padding:    60px 20px;
    border:     1px solid #222;
    transition: all 0.3s ease;
    }

.value-card.black{
    background: #222;
    color:      #fff;
    }

.value-icon{
    font-size:     48px;
    font-weight:   100;
    margin-bottom: 20px;
    }

.value-card h4{
    font-size:      14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight:    500;
    }

.value-card:hover{
    transform: translateY(-10px);
    }

.split-layout{
    display:               grid;
    grid-template-columns: 1fr 2px 1fr;
    gap:                   60px;
    align-items:           center;
    margin-top:            80px;
    }

.split-divider{
    width:        2px;
    height:       300px;
    background:   #222;
    justify-self: center;
    }

.split-left{
    text-align:    right;
    padding-right: 20px;
    }

.split-left h2{
    font-size:      64px;
    font-weight:    100;
    letter-spacing: -2px;
    margin-bottom:  30px;
    position:       relative;
    }

.split-left h2::before{
    content:    '';
    position:   absolute;
    left:       -40px;
    top:        50%;
    width:      30px;
    height:     30px;
    background: #222;
    transform:  translateY(-50%);
    }

.split-right{
    padding-left: 20px;
    }

.split-right p{
    font-size:     18px;
    line-height:   2;
    margin-bottom: 30px;
    }

.accent-box{
    display:        inline-block;
    padding:        10px 20px;
    border:         1px solid #222;
    font-size:      12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    position:       relative;
    }

.accent-box::after{
    content:    '';
    position:   absolute;
    bottom:     -5px;
    right:      -5px;
    width:      100%;
    height:     100%;
    background: #222;
    z-index:    -1;
    }

/* Section 3: Services - Asymmetric Grid */
.services{
    padding:    120px 20px;
    background: #fafafa;
    position:   relative;
    }

.services::before,
.services::after{
    content:  '';
    position: absolute;
    width:    50px;
    height:   50px;
    border:   2px solid #222;
    }

.services::before{
    top:       80px;
    left:      5%;
    animation: rotateSlowly 20s linear infinite;
    }

.services::after{
    bottom:    80px;
    right:     5%;
    transform: rotate(45deg);
    animation: rotateSlowly 20s linear infinite reverse;
    }

@keyframes rotateSlowly{
    from{ transform: rotate(0deg); }
    to{ transform: rotate(360deg); }
    }

.services-header{
    text-align:    center;
    margin-bottom: 80px;
    position:      relative;
    }

.services-header h2{
    font-size:      56px;
    font-weight:    100;
    letter-spacing: -1px;
    margin-bottom:  20px;
    position:       relative;
    display:        inline-block;
    }

.services-header h2::before,
.services-header h2::after{
    content:    '';
    position:   absolute;
    width:      30px;
    height:     1px;
    background: #222;
    top:        50%;
    transform:  translateY(-50%);
    }

.services-header h2::before{
    left: -50px;
    }

.services-header h2::after{
    right: -50px;
    }

.services-header::after{
    content:    '';
    position:   absolute;
    bottom:     -30px;
    left:       50%;
    transform:  translateX(-50%);
    width:      200px;
    height:     1px;
    background: linear-gradient(to right, transparent, #222 20%, #222 80%, transparent);
    }

.asymmetric-grid{
    display:               grid;
    grid-template-columns: 2fr 1fr;
    gap:                   40px;
    margin-bottom:         40px;
    position:              relative;
    }

.asymmetric-grid.reverse{
    grid-template-columns: 1fr 2fr;
    }

.service-large *{
    position: relative;
    z-index:  1;
    }

.service-large{
    background: #fff;
    padding:    40px 60px;
    /* border-left: 4px solid #222; */
    position:   relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow:   hidden;
    }

.service-large::before{
    content:        '';
    position:       absolute;
    top:            0;
    left:           -100%;
    width:          100%;
    height:         100%;
    border-radius:  25%;
    transform:      rotate(-45deg);
    background:     rgba(0, 0, 0, 0.02);
    transition:     left 0.6s ease;
    pointer-events: none;
    }

.service-large:hover::before{
    left: 0;
    }

.service-large::after{
    content:        '';
    position:       absolute;
    top:            40px;
    right:          40px;
    width:          15px;
    height:         15px;
    background:     #222;
    transition:     all 0.3s ease;
    pointer-events: none;
    border-radius:  25%;
    z-index:        0;
    }

.service-large:hover::after{
    transform:  scale(1.5) rotate(45deg);
    background: #a00;
    }

.service-large:hover{
    transform:         translateX(10px);
    border-left-width: 8px;
    }

.asymmetric-grid.reverse .service-large{
    border-left: none;
    /* border-right: 4px solid #222; */
    }

.asymmetric-grid.reverse .service-large::after{
    right: auto;
    left:  40px;
    }

.asymmetric-grid.reverse .service-large:hover{
    transform:          translateX(-10px);
    border-right-width: 8px;
    }

.service-small{
    /* background:      rgba(122, 122, 122, 0.47); */
    color:           #fff;
    padding:         40px;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    position:        relative;
    overflow:        hidden;
    transition:      all 0.4s ease;
    }

.service-small::before{
    content:        '';
    position:       absolute;
    top:            50%;
    left:           50%;
    transform:      translate(-50%, -50%);
    width:          0;
    height:         0;
    background:     rgba(255, 255, 255, 0.1);
    border:         2px solid rgba(255, 255, 255, 0.2);
    border-radius:  50%;
    transition:     all 0.6s ease;
    pointer-events: none;
    }

.service-small:hover::before{
    width:  200px;
    height: 200px;
    }

.service-small img{
    margin:     0 auto;
    min-width:  90%;
    width:      90%;
    transition: all 0.6s ease;
    height:     auto;
    }

.service-small:hover img{
    min-width: 99%;
    width:     99%;

    }

.service-number{
    font-size:     88px;
    font-weight:   100;
    line-height:   1;
    margin-bottom: 20px;
    transition:    all 0.3s ease;
    position:      relative;
    }

.service-small:hover .service-number{
    transform: scale(1.1);
    }

.service-large h3,
.service-large p{
    position:    relative;
    z-index:     1;
    user-select: text;
    }

.service-large h3{
    font-size:      36px;
    font-weight:    300;
    margin-bottom:  20px;
    letter-spacing: -1px;
    display:        inline-block;
    }

.service-large h3::after{
    content:    '';
    position:   absolute;
    bottom:     -10px;
    left:       0;
    width:      0;
    height:     1px;
    background: #222;
    transition: width 0.3s ease;
    }

.service-large:hover h3::after{
    width: 100%;
    }

.service-large p{
    color:               #666;
    line-height:         1.8;
    font-size:           16px;
    margin-bottom:       30px;
    user-select:         text;
    -webkit-user-select: text;
    -moz-user-select:    text;
    -ms-user-select:     text;
    }

.service-tag{
    display:         inline-block;
    padding:         8px 16px;
    border:          1px solid #222;
    font-size:       11px;
    letter-spacing:  1px;
    text-transform:  uppercase;
    margin-top:      20px;
    transition:      all 0.3s ease;
    cursor:          pointer;
    position:        relative;
    z-index:         1;
    text-decoration: none;
    color:           #222;
    border-radius:   3px;
    }

.service-tag:hover{
    background: #a00;
    color:      #fff;
    transform:  translateY(-2px);
    }

.service-small h4{
    font-size:      14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight:    400;
    opacity:        0.9;
    transition:     all 0.3s ease;
    }

.service-small:hover h4{
    opacity:        1;
    letter-spacing: 3px;
    }

/* Section 4: Contact - Minimal Form */
.contact{
    padding:    120px 20px;
    background: #fff;
    position:   relative;
    }

.contact-grid{
    display:               grid;
    grid-template-columns: 1fr 1px 1fr;
    gap:                   80px;
    max-width:             1000px;
    margin:                80px auto 0;
    }

.contact-divider{
    background: #222;
    width:      1px;
    height:     100%;
    }

.contact-info{
    padding-right: 40px;
    }

.contact-info h2{
    font-size:     48px;
    font-weight:   100;
    margin-bottom: 40px;
    position:      relative;
    }

.contact-info h2::after{
    content:    '';
    position:   absolute;
    bottom:     -20px;
    left:       0;
    width:      40px;
    height:     2px;
    background: #222;
    }

.info-item{
    margin-bottom: 30px;
    padding-left:  30px;
    position:      relative;
    }

.info-item::before{
    content:    '';
    position:   absolute;
    left:       0;
    top:        8px;
    width:      10px;
    height:     10px;
    background: #222;
    transform:  rotate(45deg);
    }

.info-item h4{
    font-size:      12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom:  8px;
    font-weight:    500;
    }

.info-item p{
    font-size:   18px;
    font-weight: 300;
    }

.contact-form{
    padding-left: 40px;
    }

.form-group{
    margin-bottom: 40px;
    position:      relative;
    }

.form-group input,
.form-group textarea{
    width:         100%;
    padding:       15px 0;
    border:        none;
    border-bottom: 2px solid #222;
    background:    transparent;
    font-size:     16px;
    font-family:   inherit;
    transition:    all 0.3s ease;
    }

.form-group input:focus,
.form-group textarea:focus{
    outline:      none;
    padding-left: 20px;
    }

.form-group label{
    position:       absolute;
    left:           0;
    top:            15px;
    font-size:      14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition:     all 0.3s ease;
    pointer-events: none;
    }

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label{
    top:         -20px;
    font-size:   11px;
    font-weight: 500;
    }

.submit-btn{
    padding:        18px 60px;
    background:     #222;
    color:          #fff;
    border:         2px solid #222;
    font-size:      12px;
    letter-spacing: 2px;
    cursor:         pointer;
    transition:     all 0.3s ease;
    text-transform: uppercase;
    position:       relative;
    border-radius:  3px;
    }

.submit-btn:hover{
    background-color: #a00;
    transform:        translate(3px, 3px);
    }

/* Footer */
footer{
    padding:    60px 20px;
    text-align: center;
    border-top: 3px solid #222;
    background: #fff;
    position:   relative;
    }

footer::before,
footer::after{
    content:    '';
    position:   absolute;
    top:        50%;
    transform:  translateY(-50%);
    width:      50px;
    height:     1px;
    background: #222;
    }

footer::before{
    left: 20%;
    }

footer::after{
    right: 20%;
    }

footer p{
    color:          #222;
    font-size:      12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight:    500;
    }

/* Animations */
@keyframes fadeInUp{
    from{
        opacity:   0;
        transform: translateY(30px);
        }
    to{
        opacity:   1;
        transform: translateY(0);
        }
    }

.fade-in{
    opacity:    0;
    transform:  translateY(30px);
    transition: all 0.8s ease;
    }

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

@media screen and (min-width: 1025px){
    /* estilos solo para escritorio */
    .altona-ico{
        display: none;
        }
    }

.asymmetric-grid.verse .service-large{
    border-top-left-radius:    15px;
    border-bottom-left-radius: 15px;
    }

.asymmetric-grid.reverse .service-large{
    border-top-right-radius:    15px;
    border-bottom-right-radius: 15px;
    }

/* Mobile responsive */
@media (max-width: 1000px){
    footer::before,
    footer::after{
        display: none;
        }

    }

@media (max-width: 768px){
    h2{
        font-size: 40px;
        }

    h3{
        font-size: 36px;
        }

    .header-decoration{
        display: none;
        }

    .altona-ico{
        display:        inline-block;
        max-width:      40px;
        width:          40px;
        height:         auto;
        float:          right;
        margin:         0 5px;
        vertical-align: middle;
        }

    .menu-toggle{
        display: flex;
        }

    .nav-links{
        display:         none;
        position:        fixed;
        top:             0;
        right:           0;
        width:           100%;
        height:          100vh;
        background:      rgba(255, 255, 255, 0.98);
        flex-direction:  column;
        justify-content: center;
        align-items:     center;
        gap:             30px;
        z-index:         1000;
        }

    .nav-links.active{
        display: flex;
        }

    .nav-links a{
        font-size:      18px;
        letter-spacing: 2px;
        }

    .nav-links a::before{
        display: none;
        }

    .nav-links a.active{
        position: relative;
        }

    .nav-links a.active::after{
        content:    '';
        position:   absolute;
        bottom:     -10px;
        left:       50%;
        transform:  translateX(-50%);
        width:      30px;
        height:     2px;
        background: #222;
        }

    /* About section mobile */
    .quote-mark{
        font-size: 80px;
        left:      -30px;
        top:       -20px;
        }

    .quote-block h3{
        font-size: 24px;
        }

    .stats-grid{
        grid-template-columns: repeat(2, 1fr);
        }

    .philosophy-section{
        grid-template-columns: 1fr;
        gap:                   40px;
        }

    .philosophy-header h2{
        writing-mode:   horizontal-tb;
        font-size:      48px;
        transform:      none;
        padding-bottom: 4px;
        }

    .service-small{
        display: none;
        }

    .header-decoration{
        position:   static;
        width:      60px;
        height:     2px;
        margin-top: 20px;
        background: #a00;
        transform:  rotate(-45deg);
        }

    .philosophy-points{
        grid-template-columns: 1fr;
        gap:                   30px;
        }

    .timeline-container{
        flex-direction: column;
        gap:            40px;
        }

    .timeline-line{
        width:  2px;
        height: 100%;
        top:    0;
        left:   20px;
        right:  auto;
        }

    .timeline-item{
        display:     flex;
        align-items: center;
        gap:         30px;
        text-align:  left;
        }

    .timeline-dot{
        margin:      0;
        flex-shrink: 0;
        }

    .values-grid{
        grid-template-columns: repeat(2, 1fr);
        }

    .values-header h2{
        font-size: 36px;
        }

    .split-layout{
        grid-template-columns: 1fr;
        gap:                   40px;
        }

    .split-divider{
        width:  100px;
        height: 2px;
        }

    .split-left{
        text-align:    left;
        padding-right: 0;
        }

    .split-left h2::before{
        display: none;
        }

    .asymmetric-grid,
    .asymmetric-grid.reverse{
        grid-template-columns: 1fr;
        }

    .asymmetric-grid.reverse .service-large{
        border-right: none;
        border-left:  4px solid #ccc;
        }

    .asymmetric-grid.reverse .service-large::after{
        left:  auto;
        right: 20px;
        }

    .asymmetric-grid.reverse .service-large:hover{
        transform:          translateX(10px);
        border-left-width:  8px;
        border-right-width: 4px;
        }

    .contact-grid{
        grid-template-columns: 1fr;
        gap:                   60px;
        }

    .contact-divider{
        width:  100px;
        height: 2px;
        margin: 0 auto;
        }

    .contact-info,
    .contact-form{
        padding: 0;
        }

    .hero h1{
        font-size: 48px;
        }

    .services-header h2,
    .split-left h2{
        font-size: 36px;
        }

    .services-header h2::before,
    .services-header h2::after{
        display: none;
        }

    .service-large{
        padding: 20px 40px;
        }

    .service-large::after{
        top:   20px;
        right: 20px;
        }

    .service-tag{
        padding:   6px 12px;
        font-size: 10px;
        }

    .service-number{
        font-size: 60px;
        }

    .hero-decoration{
        display: none;
        }

    .hero::before,
    .hero::after{
        width: 50px;
        }

    /* Hide some animated objects on mobile for performance */
    .floating-objects{
        opacity: 0.5;
        }

    .floating-circle:nth-child(2){
        display: none;
        }

    .services::before,
    .services::after{
        width:  30px;
        height: 30px;
        }

    footer::before,
    footer::after{
        display: none;
        }
    }

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce){
    *{
        animation:  none !important;
        transition: none !important;
        }
    }

.asymmetric-grid.reverse .service-small{
    border-top-left-radius:    15px;
    border-bottom-left-radius: 15px;
    }

.asymmetric-grid .service-small:last-child{
    border-top-right-radius:    15px;
    border-bottom-right-radius: 15px;
    }

input::placeholder, textarea::placeholder{
    color: #fff;
    }

input:focus::placeholder, textarea:focus::placeholder{
    color: #ccc;
    }