@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/PlusJakartaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/PlusJakartaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/PlusJakartaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('../assets/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}


h1 {
    font-sze: 86px !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}


body{
font-family: "Instrument Sans", Helvetica, sans-serif;
}



.margin-10{
margin-top: 100px;
}

.sec-logo-styy{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.reach_footer_style{
  font-size: 15px;
    line-height: 1.7;
    color: rgba(245, 239, 228, 0.55);
}

.styl-gall-figcaotion{
color:black !important;
margin-bottom: 25px !important;
    margin-top: 8px !important;
}
.about-hero {
    position: relative;
    padding: clamp(150px, 18vh, 200px) 0 clamp(60px, 7vw, 90px);

    background:
    radial-gradient(
        90% 70% at 15% 5%,
        rgba(240,192,64,0.20) 0%,
        rgba(245,239,228,0) 55%
    ),
    radial-gradient(
        70% 60% at 95% 15%,
        rgba(224,16,32,0.10) 0%,
        rgba(245,239,228,0) 60%
    ),
    #F5EFE4;
}


.office-type-contact {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 39px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8A0E14;
    margin-bottom: 12px;
   
}

.product_img_box_sty{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 18px;
}

.home-product-sty{
    position: relative;
    pointer-events: none;
    padding: 26px 26px 108px;
}
.about-watermark {
    position:absolute;
    top:-30px;
    right:0px;
    font-family:'Instrument Serif', serif;
    font-size:clamp(260px,32vw,460px);
    line-height:1;
    color:rgba(138,14,20,0.05);
    pointer-events:none;
    user-select:none;
}


.container-xl {
    max-width:1280px;
    margin:0 auto;
    padding:0 clamp(20px,3vw,32px);
}




.about-hero-container {

    position:relative;

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(360px,1fr));

    gap:clamp(34px,4vw,68px);

    align-items:end;
}

.btn-primary:hover{
color:white !important
}

.section-badge {

    display:inline-flex;
    align-items:center;

    gap:10px;

    padding:9px 16px;

    border-radius:999px;

    background:rgba(255,255,255,0.5);

    backdrop-filter:blur(10px);

    border:1px solid rgba(22,17,12,0.1);

    margin-bottom:28px;

    animation:sss-rise .8s cubic-bezier(.22,1,.36,1) both;
}



.badge-dot {

    width:7px;
    height:7px;

    border-radius:50%;

    background:#E01020;

    animation:sss-pulse 2.4s ease-in-out infinite;
}



.badge-text {

    font-family:'IBM Plex Mono', monospace;

    font-size:11px;

    letter-spacing:.2em;

    text-transform:uppercase;

    color:rgba(22,17,12,.75);
}



.about-hero-title {

    font-family:'Instrument Serif', serif;

    font-weight:400;

    font-size:clamp(44px,5.6vw,82px);

    line-height:.99;

    letter-spacing:-.015em;

    margin:0 0 26px;

    text-wrap:balance;

    animation:sss-rise .9s cubic-bezier(.22,1,.36,1) 80ms both;
}



.about-hero-title em {

    font-style:italic;

    color:#E01020;
}



.about-hero-description {

    font-size:clamp(17px,1.4vw,20px);

    line-height:1.6;

    color:rgba(22,17,12,.68);

    max-width:560px;

    margin:0 0 14px;

    text-wrap:pretty;

    animation:sss-rise .9s cubic-bezier(.22,1,.36,1) 160ms both;
}



.about-hero-tagline {

    font-family:'IBM Plex Mono', monospace;

    font-size:12px;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#8A0E14;

    margin:0;

    animation:sss-rise .9s cubic-bezier(.22,1,.36,1) 240ms both;
}



.about-hero-image {

    position:relative;

    min-height:clamp(300px,40vh,440px);

    border-radius:24px 24px 0 24px;

    overflow:hidden;

    box-shadow:
    0 30px 80px rgba(22,17,12,.2);

    animation:sss-rise 1s cubic-bezier(.22,1,.36,1) 220ms both;
}


.about-hero-image img {

    width:100%;
    height:100%;

    object-fit:cover;

}

.who-section {

    background:#F5EFE4;

    padding:
    0 0 clamp(80px,10vw,120px);

}



.section-label {
    margin-top: -1px;
    font-family:'IBM Plex Mono', monospace;

    font-size:11.5px;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#E01020;

    margin-bottom:26px;

    font-weight:800;

}



.who-title {

    font-family:'Instrument Serif', serif;

    font-weight:400;

    font-size:clamp(32px,4.2vw,58px);

    line-height:1.08;

    letter-spacing:-.01em;

    margin:0 0 40px;

    max-width:900px;

    text-wrap:balance;

}



.who-title em {

    font-style:italic;

    color:#8A0E14;

}



.who-content-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:clamp(30px,4vw,60px);

}



.who-text {

    margin:0;

    text-wrap:pretty;

}



.who-text.primary {

    font-size:18.5px;

    line-height:1.65;
    color: black;

}



.who-text.secondary {

    font-size:16.5px;

    line-height:1.7;

    color:rgba(22,17,12,.66);

}




.pillar-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(240px,1fr));

    gap:0;

    margin-top:66px;

    border-top:
    1px solid rgba(22,17,12,.14);
font-family: "Instrument Sans", Helvetica, sans-serif;

}



.pillar-card {

    padding:30px 28px 8px 0;

    border-right:
    1px solid rgba(22,17,12,.1);

    text-align:center;

}



.pillar-number {

    font-family:'Instrument Serif', serif;

    font-style:italic;

    font-size:20px;

    color:#E01020;

    margin-bottom:12px;

    font-weight:800;

}



.pillar-title {

    font-weight:600;

    font-size:17px;

    margin-bottom:8px;

}



.pillar-description {

    font-size:14.5px;

    line-height:1.6;

    color:rgba(22,17,12,.6);

}



@media(max-width:768px){

.quote-button {
    align-self:flex-start;
    background:#F0C040;
    color:#16110C;
    padding:
    15px 28px;
    border-radius:999px;
    font-weight:600;
    font-size:13.5px;
    letter-spacing:.07em;
    text-transform:uppercase;
    transition:.3s ease;
    width:100%;
    text-:align-center;
}

    .pillar-card {

        border-right:none;

        border-bottom:
        1px solid rgba(22,17,12,.1);

        padding:25px 0;

    }


    .who-content-grid {

        gap:25px;

    }

}

.work-section {

    background:#16110C;

    color:#F5EFE4;

    padding:clamp(70px,9vw,110px) 0;

}


.work-header {

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:52px;

    flex-wrap:wrap;

}



.work-label {

    color:#F0C040;

    margin-bottom:24px;

}



.work-title {

    font-family:'Instrument Serif', serif;

    font-weight:400;

    font-size:clamp(30px,3.8vw,52px);

    line-height:1.06;

    margin:0;

    max-width:660px;

    text-wrap:balance;

}



.work-title em {

    font-style:italic;

    color:#F0C040;

}



.section-link {

    font-weight:600;

    font-size:13.5px;

    letter-spacing:.07em;

    text-transform:uppercase;

    color:#F0C040;

    border-bottom:1px solid #F0C040;

    padding-bottom:4px;

    transition:.3s ease;

}



.section-link:hover {

    color:#F5EFE4;

    border-color:#F5EFE4;

}



.steps-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(200px,1fr));

    gap:12px;

}



.step-card {

    border:1px solid rgba(245,239,228,.16);

    border-radius:16px;

    background:rgba(245,239,228,.04);

    padding:28px 24px 30px;

    text-align:center;

}



.step-number {

    font-family:'Instrument Serif', serif;

    font-size:40px;

    color:#F0C040;

    line-height:1;

    margin-bottom:16px;

}



.step-title {

    font-weight:600;

    font-size:17.5px;

    margin-bottom:9px;

}



.step-description {

    font-size:14px;

    line-height:1.55;

    color:rgba(245,239,228,.66);

}



.stats-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(210px,1fr));

    margin-top:60px;

    border-top:1px solid rgba(245,239,228,.12);

    text-align:center;

}



.stat-card {

    padding:32px 28px 0 0;

    border-right:1px solid rgba(245,239,228,.1);

}



.stat-value {

    font-family:'Instrument Serif', serif;

    font-size:44px;

    line-height:1;

    margin-bottom:8px;

    color:#F0C040;

}



.stat-label {

    font-size:14px;

    color:rgba(245,239,228,.6);

    line-height:1.5;

}



/* Standards Section */

.standards-section {
    background:#F5EFE4;
    padding: clamp(80px, 10vw, 120px) 0;
    font-family: "Instrument Sans", Helvetica, sans-serif;
    
}



.standards-container {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(300px,1fr));

    gap:clamp(30px,4vw,64px);

    align-items:start;

}



.standards-title {

    font-family:'Instrument Serif', serif;

    font-weight:400;

    font-size:clamp(30px,3.4vw,46px);

    line-height:1.1;

    letter-spacing:-.01em;

    margin:0 0 18px;

    max-width:440px;

}



.standards-title em {

    font-style:italic;

    color:#8A0E14;

}



.standards-description {

    font-size:15.5px;

    line-height:1.68;

    color:rgba(22,17,12,.62);

    margin:0 0 26px;

    max-width:400px;

    text-wrap:pretty;

}



.red-link {

    color:#E01020;

    border-color:#E01020;

}



.red-link:hover {

    color:#8A0E14;

    border-color:#8A0E14;

}



.standards-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(200px,1fr));

    gap:1px;

    background:rgba(22,17,12,.12);

    border:1px solid rgba(22,17,12,.12);

    border-radius:18px;

    overflow:hidden;

}



.standard-card {

    background:#F5EFE4;

    padding:22px 22px 24px;

    transition:background .35s ease;

}



.standard-card:hover {

    background:#EFE7D8;

}



.standard-code {

    font-family:'Instrument Serif', serif;

    font-size:27px;

    line-height:1;

    letter-spacing:-.01em;

    margin-bottom:10px;

}



.standard-desc {

    font-size:13px;

    line-height:1.5;

    color:rgba(22,17,12,.58);

}



@media(max-width:768px){

    .work-header {

        margin-bottom:35px;

    }


    .stat-card {

        border-right:none;

        padding:25px 0;

    }


    .steps-grid {

        grid-template-columns:1fr;

    }

}

.office-section {

    background:#F5EFE4;

    padding:
    0 0 clamp(80px,10vw,120px);

}



.office-grid {
    border-top:
    1px solid rgba(22,17,12,.14);
    padding-top:
    clamp(40px,5vw,64px);
    display:grid;
    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));
    gap:16px;
   font-family: "Instrument Sans", Helvetica, sans-serif;
}



.office-card {
    border:
    1px solid rgba(22,17,12,.14);
    border-radius:18px;
    background:
    rgba(255,255,255,.45);
    padding:
    28px 30px 30px;
}



.office-type {

    font-family:'IBM Plex Mono', monospace;

    font-size:10px;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:#8A0E14;

    margin-bottom:12px;

}



.office-city {

    font-family:'Instrument Serif', serif;

    font-size:26px;

    margin-bottom:12px;

}



.office-address {

    font-size:15.5px;

    line-height:1.65;

    color:rgba(22,17,12,.68);

}



/* Engineer CTA Card */

.engineer-card {

    border-radius:18px;

    background:#16110C;

    color:#F5EFE4;

    padding:
    28px 30px 30px;


    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:22px;

}



.engineer-title {

    font-family:'Instrument Serif', serif;

    font-size:26px;

    margin-bottom:10px;

}



.engineer-description {

    font-size:15.5px;

    line-height:1.6;

    color:
    rgba(245,239,228,.65);

}



.quote-button {

    align-self:flex-start;

    background:#F0C040;

    color:#16110C;


    padding:
    15px 28px;


    border-radius:999px;


    font-weight:600;

    font-size:13.5px;


    letter-spacing:.07em;

    text-transform:uppercase;


    transition:.3s ease;

}



.quote-button:hover {

    background:#F5EFE4;

}



@media(max-width:768px){

    .office-grid {

        grid-template-columns:1fr;

    }


    .office-card,
    .engineer-card {

        padding:24px;

    }

}

.sml-icon{
            border: 1px solid rgba(245, 239, 228, 0.2); 
            border-radius: 999px; 
            padding: 7px 13px; 
            font-family: "IBM Plex Mono", monospace; 
            font-size: 10px; 
            letter-spacing: 0.1em; 
            text-transform: uppercase; 
            color: rgba(245, 239, 228, 0.72);
        }


.products-hero {
        position: relative;
        padding: clamp(150px, 18vh, 200px) 0 clamp(56px, 6vw, 84px);
        background: radial-gradient(90% 70% at 15% 5%,
                rgba(240, 192, 64, .20) 0%,
                rgba(245, 239, 228, 0) 55%),
            radial-gradient(70% 60% at 95% 15%,
                rgba(224, 16, 32, .10) 0%,
                rgba(245, 239, 228, 0) 60%), #F5EFE4;
        overflow: hidden;
    }


    .products-hero-watermark {
        position: absolute;
        top: -30px;
        right: -50px;
        font-family: 'Instrument Serif', serif;
        font-size: clamp(260px, 32vw, 460px);
        line-height: 1;
        color: rgba(138, 14, 20, .05);
        pointer-events: none;
        user-select: none;
    }

    .products-hero-container {
        position: relative;
    }

    .products-badge {
        margin-bottom: 28px;
        animation: sss-rise .8s cubic-bezier(.22, 1, .36, 1) both;

    }

    .badge-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #E01020;
        animation: sss-pulse 2.4s ease-in-out infinite;

    }

    .products-hero-title {
        font-family: 'Instrument Serif', serif;
        font-weight: 400;
        font-size: clamp(44px, 5.6vw, 82px);
        line-height: .99;
        letter-spacing: -.015em;
        margin: 0 0 26px;
        max-width: 940px;
        text-wrap: balance;
        animation: sss-rise .9s cubic-bezier(.22, 1, .36, 1) 80ms both;

    }

    .products-hero-title em {
        font-style: italic;
        color: #E01020;
    }

    .products-hero-description {
        font-size: clamp(17px, 1.4vw, 20px);
        line-height: 1.6;
        color: rgba(22, 17, 12, .68);
        max-width: 620px;
        margin: 0 0 30px;
        text-wrap: pretty;
        animation: sss-rise .9s cubic-bezier(.22, 1, .36, 1) 160ms both;
    }

    .products-hero-buttons {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        animation: sss-rise .9s cubic-bezier(.22, 1, .36, 1) 240ms both;
font-family: "Instrument Sans", Helvetica, sans-serif;
    }

    .btn-primary,
    .btn-secondary {
        padding: 16px 30px;
        border-radius: 999px;
        font-weight: 600;
        font-size: 13.5px;
        letter-spacing: .07em;
        text-transform: uppercase;
        transition: .3s ease;
    }

    .btn-primary {
        background: #16110C;
        color: #F5EFE4;
    }



    .btn-primary:hover {
        background: #8A0E14;
    }

    .btn-secondary {
        border: 1px solid rgba(22, 17, 12, .28);
        color: #16110C;
    }

    .btn-secondary:hover {
        border-color: #E01020;
        color: #E01020;
    }

    @media(max-width:768px) {
        .products-hero {
            padding-top: 120px;
        }

        .products-hero-title {
            font-size: 42px;
        }

        .products-hero-buttons {
            flex-direction: column;
            align-items: flex-start;
        }

        .btn-primary,
        .btn-secondary {
            width: 100%;
            text-align: center;
        }
    }

    .products-section {
        background: #16110C;
        color: #F5EFE4;
        padding: clamp(70px, 9vw, 110px) 0 clamp(80px, 10vw, 120px);
        position: relative;
        overflow: hidden;
    }

    .products-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(70% 50% at 85% 0%,
                rgba(224, 16, 32, 0.12) 0%,
                rgba(22, 17, 12, 0) 55%);
        pointer-events: none;
    }

    .products-container {
        position: relative;
        max-width: 1280px;
        margin: auto;
        padding: 0 clamp(20px, 3vw, 32px);
    }

    .section-label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11.5px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: #F0C040;
        margin-bottom: 24px;
        font-weight: 800;
    }

    .products-title {
        font-family: 'Instrument Serif', serif;
        font-weight: 400;
        font-size: clamp(30px, 3.8vw, 52px);
        line-height: 1.06;
        margin: 0 0 52px;
        max-width: 680px;
    }

    .products-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
        gap: 18px;
    }

    .product-card {
        border-radius: 20px;
        border: 1px solid rgba(245, 239, 228, .13);
        background: rgba(245, 239, 228, .03);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: .4s ease;
    }

    .product-card:hover {
        transform: translateY(-5px);
        border-color: rgba(240, 192, 64, .45);
    }

    .product-image {
        aspect-ratio: 16/10;
        border-bottom: 1px solid rgba(245, 239, 228, .12);
        overflow: hidden;
    }

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .product-content {
        padding: 26px 26px 28px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        flex: 1;
    }

    .product-number {
        font-family: 'Instrument Serif', serif;
        font-style: italic;
        font-size: 18px;
        color: rgba(240, 192, 64, .85);
    }

    .product-card h3 {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -.01em;
        margin: 0;
    }

    .product-card p {
        font-size: 15px;
        line-height: 1.6;
        color: rgba(245, 239, 228, .65);
        margin: 0;
    }

    .product-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: auto;
        padding-top: 8px;
    }

    .product-tags span {
        border: 1px solid rgba(245, 239, 228, .15);
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 12px;
        color: #F5EFE4;
    }

    @media(max-width:600px) {

        .products-grid {
            grid-template-columns: 1fr;
        }

        .product-content {
            padding: 22px;
        }

        .products-title {
            margin-bottom: 35px;
        }

    }

    .standards-section {
        background: #F5EFE4;
        padding: clamp(80px, 10vw, 120px) 0;
    }


    .standards-container {
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 clamp(20px, 3vw, 32px);
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: clamp(30px, 4vw, 64px);
        align-items: start;
    }


    .standards-label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11.5px;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: #E01020;
        margin-bottom: 26px;
        font-weight: 800;
    }


    .standards-title {
        font-family: 'Instrument Serif', serif;
        font-weight: 400;
        font-size: clamp(30px, 3.4vw, 46px);
        line-height: 1.1;
        letter-spacing: -.01em;
        margin: 0 0 18px;
        max-width: 440px;
    }


    .standards-title em {
        font-style: italic;
        color: #8A0E14;
    }


    .standards-desc {
        font-size: 15.5px;
        line-height: 1.68;
        color: rgba(22, 17, 12, .62);
        margin: 0 0 26px;
        max-width: 400px;
    }


    .standards-link {
        font-weight: 600;
        font-size: 13.5px;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: #E01020;
        border-bottom: 1px solid #E01020;
        padding-bottom: 4px;
        transition: .3s ease;
    }


    .standards-link:hover {
        color: #8A0E14;
        border-color: #8A0E14;
    }



    .standards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1px;
        background: rgba(22, 17, 12, .12);
        border: 1px solid rgba(22, 17, 12, .12);
        border-radius: 18px;
        overflow: hidden;
    }



    .standard-card {
        background: #F5EFE4;
        padding: 22px 22px 24px;
        transition: .35s ease;
    }


    .standard-card:hover {
        background: #EFE7D8;
    }



    .standard-code {
        font-family: 'Instrument Serif', serif;
        font-size: 27px;
        line-height: 1;
        letter-spacing: -.01em;
        margin-bottom: 10px;
    }

    .standard-text {
        font-size: 13px;
        line-height: 1.5;
        color: rgba(22, 17, 12, .58);

    }

    @media(max-width:768px) {
        .standards-container {
            grid-template-columns: 1fr;
        }

        .standards-title {
            max-width: 100%;
        }

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

    @media(max-width:480px) {
        .standards-grid {
            grid-template-columns: 1fr;
        }
    }
    .quote-cta-section {
    background:#F5EFE4;
    padding:0 0 clamp(80px,10vw,120px);
}

.quote-cta-container {
    max-width:1280px;
    margin:0 auto;
    padding:0 clamp(20px,3vw,32px);
}

.quote-box {
    border-radius:20px;
    background:#16110C;
    color:#F5EFE4;
    padding:34px 36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    flex-wrap:wrap;
}



.quote-title {
    font-family:'Instrument Serif', serif;
    font-size:29px;
    line-height:1.2;
    margin-bottom:8px;
}

.quote-text {
    font-size:15.5px;
    line-height:1.6;
    color:rgba(245,239,228,.65);
    max-width:620px;
}

.quote-btn {
    background:#F0C040;
    color:#16110C;
    padding:16px 30px;
    border-radius:999px;
    font-weight:600;
    font-size:13.5px;
    letter-spacing:.07em;
    text-transform:uppercase;
    white-space:nowrap;
    transition:.3s ease;
}

.quote-btn:hover {
    background:#F5EFE4;
color:white;
}

@media(max-width:768px){
    .quote-box{
        padding:28px 24px;
        align-items:flex-start;
    }

    .quote-title{
        font-size:25px;
    }

    .quote-btn{
        width:100%;
        text-align:center;
    }
}

.services-hero{
    position:relative;
    overflow:hidden;
    padding:clamp(150px,18vh,200px) 0 clamp(56px,6vw,84px);
    background:
        radial-gradient(90% 70% at 15% 5%,
        rgba(240,192,64,.20) 0%,
        rgba(245,239,228,0) 55%),

        radial-gradient(70% 60% at 95% 15%,
        rgba(224,16,32,.10) 0%,
        rgba(245,239,228,0) 60%),

        #F5EFE4;
}

.services-hero__letter{
    position:absolute;
    top:-30px;
    right:-50px;
    font-family:"Instrument Serif",serif;
    font-size:clamp(260px,32vw,460px);
    line-height:1;
    color:rgba(138,14,20,.05);
    pointer-events:none;
    user-select:none;
}

.services-hero__grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:clamp(34px,4vw,68px);
    align-items:end;
}

.services-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 16px;
    margin-bottom:28px;
    border-radius:999px;
    background:rgba(255,255,255,.5);
    border:1px solid rgba(22,17,12,.1);
    backdrop-filter:blur(10px);
    animation:sss-rise .8s cubic-bezier(.22,1,.36,1) both;
}

.services-badge__dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#E01020;
    animation:sss-pulse 2.4s ease-in-out infinite;
}

.services-badge span:last-child{
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(22,17,12,.75);
}

.services-hero__title{
    margin:0 0 26px;
    font-family:"Instrument Serif",serif;
    font-weight:400;
    font-size:clamp(44px,5.6vw,82px);
    line-height:.99;
    letter-spacing:-.015em;
    text-wrap:balance;
    animation:sss-rise .9s cubic-bezier(.22,1,.36,1) .08s both;
   max-width: 900px;
}

.services-hero__title em{
    font-style:italic;
    color:#E01020;
}

.services-hero__text{
    max-width:560px;
    margin:0;
    font-size:clamp(17px,1.4vw,20px);
    line-height:1.6;
    color:rgba(22,17,12,.68);
    text-wrap:pretty;
    animation:sss-rise .9s cubic-bezier(.22,1,.36,1) .16s both;
}

.services-hero__image{
    min-height:clamp(280px,36vh,400px);
    overflow:hidden;
    border-radius:24px 24px 0 24px;
    box-shadow:0 30px 80px rgba(22,17,12,.20);
    animation:sss-rise 1s cubic-bezier(.22,1,.36,1) .22s both;
}

.services-hero__image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/*==============================
Responsive
==============================*/

@media (max-width:768px){

    .services-hero{
        padding:120px 0 60px;
    }

    .services-hero__grid{
        grid-template-columns:1fr;
    }

    .services-hero__letter{
        font-size:180px;
        right:-20px;
        top:10px;
    }

    .services-hero__image{
        min-height:260px;
    }
}

/*==================================================
    SERVICES SCOPE
==================================================*/

.services-scope{
    padding:clamp(40px,5vw,60px) 0 clamp(80px,10vw,120px);
    background:#F5EFE4;
}

/* Heading */

.section-label{
    margin-bottom:24px;
    font-family:"IBM Plex Mono",monospace;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:#E01020;
}

.section-title{
    max-width:700px;
    margin:0 0 48px;
    font-family:"Instrument Serif",serif;
    font-size:clamp(30px,3.8vw,52px);
    font-weight:400;
    line-height:1.06;
    letter-spacing:-.01em;
    text-wrap:balance;
}

/* Grid */

.scope-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:16px;
}

/* Card */

.scope-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:30px;
    border:1px solid rgba(22,17,12,.14);
    border-radius:20px;
    background:rgba(255,255,255,.45);
    transition:.4s cubic-bezier(.22,1,.36,1);
}

.scope-card:hover{
    transform:translateY(-4px);
    border-color:rgba(224,16,32,.40);
}

/* Header */

.scope-card__header{
    display:flex;
    align-items:baseline;
    gap:14px;
}

.scope-number{
    font-family:"Instrument Serif",serif;
    font-size:19px;
    font-style:italic;
    color:#E01020;
}

.scope-title{
    margin:0;
    font-size:20px;
    font-weight:600;
    letter-spacing:-.01em;
}

/* Description */

.scope-description{
    margin:0;
    font-size:15.5px;
    line-height:1.6;
    color:rgba(22,17,12,.66);
    text-wrap:pretty;
}

/* Deliverables */

.scope-deliverables{
    display:flex;
    flex-direction:column;
    gap:9px;
    padding-top:14px;
    border-top:1px solid rgba(22,17,12,.12);
}

.deliverables-title{
    font-family:"IBM Plex Mono",monospace;
    font-size:9.5px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#8A0E14;
}

.deliverable-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:14.5px;
    line-height:1.5;
    color:rgba(22,17,12,.70);
}

.deliverable-icon{
    flex:none;
    font-size:13px;
    line-height:1.6;
    color:#F0C040;
}

/* Responsive */

@media (max-width:768px){

    .scope-grid{
        grid-template-columns:1fr;
    }

    .scope-card{
        padding:24px;
    }

    .section-title{
        margin-bottom:36px;
    }

}

/*==================================================
WORKFLOW
==================================================*/

.workflow{
    padding:clamp(70px,9vw,110px) 0;
    background:linear-gradient(160deg,#8A0E14 0%,#6E0A10 100%);
    color:#F5EFE4;
    overflow:hidden;
}

.workflow-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:40px;
    flex-wrap:wrap;
    margin-bottom:50px;
}

.workflow-title{
    max-width:640px;
    margin:0;
    font-family:"Instrument Serif",serif;
    font-size:clamp(30px,3.8vw,52px);
    font-weight:400;
    line-height:1.06;
}

.workflow-title em{
    color:#F0C040;
    font-style:italic;
}

.workflow-label{
    font-family:"IBM Plex Mono",monospace;
    font-size:11.5px;
    font-weight:800;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(245,239,228,.70);
}

.workflow-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:10px;
}

.workflow-card{
    padding:28px 24px 30px;
    background:rgba(110,10,16,.88);
    border:1px solid rgba(245,239,228,.22);
    border-radius:16px;
    transition:.35s;
}

.workflow-card:hover{
    transform:translateY(-5px);
    border-color:#F0C040;
}

.workflow-number{
    margin-bottom:16px;
    font-family:"Instrument Serif",serif;
    font-size:40px;
    line-height:1;
    color:#F0C040;
}

.workflow-card-title{
    margin:0 0 10px;
    font-size:17.5px;
    font-weight:600;
}

.workflow-card-text{
    margin:0;
    font-size:14px;
    line-height:1.55;
    color:rgba(245,239,228,.72);
}


/*==================================================
DOCUMENTATION
==================================================*/

.documentation{
    padding:clamp(80px,10vw,120px) 0;
    background:#F5EFE4;
}

.documentation-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:clamp(30px,4vw,60px);
    align-items:center;
}

.documentation-title{
    max-width:460px;
    margin:0 0 18px;
    font-family:"Instrument Serif",serif;
    font-size:clamp(28px,3.2vw,44px);
    font-weight:400;
    line-height:1.1;
}

.documentation-text{
    max-width:460px;
    margin:0 0 24px;
    font-size:16.5px;
    line-height:1.68;
    color:rgba(22,17,12,.66);
}

.documentation-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.documentation-image{
    min-height:clamp(280px,34vh,380px);
    overflow:hidden;
    border-radius:20px;
    border:1px solid rgba(22,17,12,.12);
    box-shadow:0 24px 60px rgba(22,17,12,.14);
}

.documentation-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

/*==================================================
BUTTONS
==================================================*/

.btn-dark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 30px;
    border-radius:999px;
    background:#16110C;
    color:#F5EFE4;
    text-decoration:none;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:.07em;
    text-transform:uppercase;
    transition:.35s;
}

.btn-dark:hover{
    background:#8A0E14;
}

.btn-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 30px;
    border-radius:999px;
    border:1px solid rgba(22,17,12,.28);
    color:#16110C;
    text-decoration:none;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:.07em;
    text-transform:uppercase;
    transition:.35s;
}

.btn-outline:hover{
    border-color:#E01020;
    color:#E01020;
}

/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:768px){

    .workflow-header{
        margin-bottom:35px;
    }

    .workflow-grid{
        grid-template-columns:1fr;
    }

    .documentation-grid{
        grid-template-columns:1fr;
    }

    .documentation-image{
        min-height:260px;
    }

}

  .deliverables-pts{
 display: flex; 
 gap: 10px; 
 align-items: flex-start; 
 font-size: 14.5px; 
 line-height: 1.5; 
 color: rgba(22, 17, 12, 0.7);
 }

 .deliverables-pts .cross-icon{
 color: rgb(240, 192, 64); 
 flex: 0 0 auto; 
 font-size: 13px; 
 line-height: 1.6;
 }

.client-card {
                    border: 1px solid rgba(22, 17, 12, 0.12);
                    border-radius: 14px;
                    background: rgba(255, 255, 255, 0.5);
                    /*width: 198px;*/
                    /*height: 175px;*/
                    display: flex;
                    flex-direction: column;
                    gap: 10px;
                    padding: 14px;
                }

                .client-image {
                    flex: 1;
                    min-height: 56px;
                    border-radius: 8px;
                    overflow: hidden;
                    background: rgba(22, 17, 12, 0.03);
                }

                .client-name {
                    font-weight: 600;
                    font-size: 12.5px;
                    letter-spacing: 0.02em;
                    color: rgba(22, 17, 12, 0.55);
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
font-family: "Instrument Sans", Helvetica, sans-serif;
                }


 .img-style {
          width: 100%;
        }

        .sup-images {
          position: absolute;
          aspect-ratio: auto;
          transition: opacity .45s cubic-bezier(.22, 1, .36, 1);
          left: 14px;
          bottom: 10px;
          top: auto;
          width: calc(100% - 28px);
         /* height: 153px;*/
          opacity: 1.6;
        }
        .applications-images {
                    display: block;
                    position: relative;
                    font: 13px / 1.3 system-ui, -apple-system, sans-serif;
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 3 / 2;
                }

                .applications-text {
                    position: absolute;
                    left: 12px;
                    bottom: 12px;
                    pointer-events: none;
                    padding: 8px 14px;
                    border-radius: 999px;
                    background: rgba(22, 17, 12, 0.55);
                    backdrop-filter: blur(12px);
                    border: 1px solid rgba(245, 239, 228, 0.18);
                    font-family: 'IBM Plex Mono', monospace;
                    font-size: 10.5px;
                    letter-spacing: 0.12em;
                    text-transform: uppercase;
                    color: rgba(245, 239, 228, 0.85)
                }

                .application-box {
                    position: relative;
                    height: 280px;
                    border-radius: 18px;
                    overflow: hidden;
                    border: 1px solid rgba(245, 239, 228, 0.12)
                }
                .logo-images {
                    display: block;
                    position: relative;
                    font: 13px / 1.3 system-ui, -apple-system, sans-serif;
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 3 / 2;
                }

                

                .marquee-container {
                    display: flex;
                    gap: 12px;
                    width: max-content;
                    animation: sss-marquee 30s linear infinite; /* Increased timing */
                }

                .marquee-container:hover {
                    animation-play-state: paused;
                }

                            @keyframes sss-marquee {
                    from {
                        transform: translateX(0);
                    }

                    to {
                        transform: translateX(-50%);
                    }
                }


 html {
          scroll-padding-top: 96px;
        }

        html,
        body {
          margin: 0;
          padding: 0;
          background: #16110C;
        }

        * {
          box-sizing: border-box;
        }

        a {
          color: #E01020;
          line-height :25px;
          text-decoration: none;
        }

        a:hover {
          color: #8A0E14;
        }

        ::selection {
          background: #F0C040;
          color: #16110C;
        }

        input,
        textarea,
        select,
        button {
          font-family: inherit;
        }

        @keyframes sss-marquee {
          from {
            transform: translateX(0);
          }

          to {
            transform: translateX(-50%);
          }
        }

        @keyframes sss-fadeA {
          from {
            opacity: 0;
            transform: translateY(14px);
          }

          to {
            opacity: 1;
            transform: none;
          }
        }

        @keyframes sss-fadeB {
          from {
            opacity: 0;
            transform: translateY(14px);
          }

          to {
            opacity: 1;
            transform: none;
          }
        }

        @keyframes sss-pulse {

          0%,
          100% {
            opacity: 1;
          }

          50% {
            opacity: 0.35;
          }
        }

        @keyframes sss-sheen {
          from {
            transform: translateX(-120%) skewX(-18deg);
          }

          to {
            transform: translateX(240%) skewX(-18deg);
          }
        }

        image-slot[data-bgfill] {
          position: absolute;
          aspect-ratio: auto;
          transition: opacity .45s cubic-bezier(.22, 1, .36, 1);
        }

        image-slot[data-bgfill]:not([data-filled]) {
          left: 14px;
          bottom: 14px;
          top: auto;
          width: calc(100% - 28px);
          height: 80px;
          opacity: .6;
        }

        image-slot[data-bgfill][data-filled] {
          inset: 0;
          width: auto;
          height: auto;
          opacity: .26;
        }

        [data-pcard]:hover image-slot[data-bgfill]:not([data-filled]) {
          opacity: 1;
        }

        [data-pcard]:hover image-slot[data-bgfill][data-filled] {
          opacity: .46;
        }

.blog-main-box{
 border-top: 1px solid rgba(22, 17, 12, 0.14);
 padding-top: clamp(36px, 4vw, 56px); 
 display: grid; 
 grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
 gap: clamp(28px, 3.5vw, 56px); 
 align-items: center;
 }
.blog-main-box  .sup-images{
 position: relative;
 min-height: clamp(280px, 34vh, 380px); 
 border-radius: 20px; overflow: hidden;
 border: 1px solid rgba(22, 17, 12, 0.12); 
 box-shadow: rgba(22, 17, 12, 0.14) 0px 24px 60px;
 }
 
 .blog-feature{
 display: flex; 
 align-items: center; 
 gap: 12px; margin-bottom: 18px; 
 font-family: "IBM Plex Mono", monospace; 
 font-size: 10.5px; 
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: rgb(138, 14, 20);
 }
 .blog-feature .dark-span{
 background: rgb(240, 192, 64);
 color: rgb(22, 17, 12);
 padding: 6px 12px; 
 border-radius: 999px;
 letter-spacing: 0.14em;
 }
  .blog-main-box .text-underline{
 display: inline-flex; 
 align-items: center; 
 gap: 10px; font-weight: 600; 
 font-size: 14px;
 letter-spacing: 0.07em; 
 text-transform: uppercase;
 color: rgb(224, 16, 32);
 border-bottom: 1px solid rgb(224, 16, 32);
 padding-bottom: 5px;
padding-top : 26px;
 }


.services-hero-section{
    position:relative;
    padding:clamp(150px,18vh,200px) 0 clamp(56px,6vw,84px);
    background:
        radial-gradient(90% 70% at 15% 5%, rgba(240,192,64,.20) 0%, rgba(245,239,228,0) 55%),
        radial-gradient(70% 60% at 95% 15%, rgba(224,16,32,.10) 0%, rgba(245,239,228,0) 60%),
        #F5EFE4;
}

.services-watermark{
    position:absolute;
    top:-30px;
    right: 0px;
    font-family:'Instrument Serif', serif;
    font-size:clamp(260px,32vw,460px);
    line-height:1;
    color:rgba(138,14,20,.05);
    pointer-events:none;
    user-select:none;
}

.services-wrapper{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    padding:0 clamp(20px,3vw,32px);
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:clamp(34px,4vw,68px);
    align-items:end;
}

.services-content{
    position:relative;
padding: 0px 0px 57px 0px;
}

.services-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.5);
    backdrop-filter:blur(10px);
    border:1px solid rgba(22,17,12,.1);
    margin-bottom:28px;
    animation:sss-rise .8s cubic-bezier(.22,1,.36,1) both;
}

.services-badge-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#E01020;
    animation:sss-pulse 2.4s ease-in-out infinite;
}

.services-badge-text{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(22,17,12,.75);
}

.services-title{
    font-family:'Instrument Serif', serif;
    font-weight:400;
    font-size:clamp(44px,5.6vw,82px);
    line-height:.99;
    letter-spacing:-.015em;
    margin:0 0 26px;
    text-wrap:balance;
    animation:sss-rise .9s cubic-bezier(.22,1,.36,1) 80ms both;
}

.services-title em{
    font-style:italic;
    color:#E01020;
}

.services-description{
    max-width:560px;
    margin:0;
    font-size:clamp(17px,1.4vw,20px);
    line-height:1.6;
    color:rgba(22,17,12,.68);
    text-wrap:pretty;
    animation:sss-rise .9s cubic-bezier(.22,1,.36,1) 160ms both;
}

.services-image-box{
    position:relative;
    min-height:clamp(280px,36vh,400px);
    border-radius:24px 24px 0 24px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(22,17,12,.2);
    animation:sss-rise 1s cubic-bezier(.22,1,.36,1) 220ms both;
}

.services-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}
.blog-title{
    font-family: "Instrument Serif", serif;
    font-weight: 400;
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0px 0px 18px;
}

p {
  line-height: 32px;
    font-family: "Instrument Sans", Helvetica, sans-s;
    color: rgba(22, 17, 12, 0.68);
    font-size: clamp(15px, 1.4vw, 20px);

}

.gell-head-sec{
position:relative;
padding:clamp(150px, 18vh, 200px) 0 clamp(50px, 6vw, 76px);
background:radial-gradient(80% 60% at 12% 0%, rgba(138,14,20,0.35) 0%, rgba(22,17,12,0) 60%), radial-gradient(60% 50% at 92% 10%, rgba(240,192,64,0.10) 0%, rgba(22,17,12,0) 60%), #16110C
}
.div-sty-g{
    position:absolute;
    top:-30px;
    right:0px;
    font-family:'Instrument Serif', serif;
    font-size:clamp(260px, 32vw, 460px);
    line-height:1;
    color:rgba(245,239,228,0.035); 
    pointer-events:none;
    user-select:none
}
.ma-div-gll{
   position:relative;
   max-width:1280px; 
   margin:0 auto; 
   padding:0 clamp(20px, 3vw, 32px) 
}
.ma1-div-gall-st{
display:inline-flex;
 align-items:center;
  gap:10px; 
  padding:9px 16px; 
  border-radius:999px; 
  background:rgba(245,239,228,0.06); 
  backdrop-filter:blur(10px); 
  border:1px solid rgba(245,239,228,0.16); 
  margin-bottom:28px; 
  animation:sss-rise .8s cubic-bezier(.22,1,.36,1) both
}
.span-sty-gall{
width:7px;
 height:7px; 
 border-radius:50%; 
 background:#E01020; 
 animation:sss-pulse 2.4s ease-in-out infinite
}
.span2-sty-gall{
font-family:'IBM Plex Mono', monospace; 
font-size:11px; 
letter-spacing:0.2em;
 text-transform:uppercase; 
 color:rgba(245,239,228,0.75)
}

.gall-mn-hed-sty{
font-family:'Instrument Serif', serif;
 font-weight:400; 
 font-size:clamp(44px, 5.6vw, 82px);
  line-height:0.99;
   letter-spacing:-0.015em;
    margin:0 0 26px; 
    max-width:900px;
    text-wrap:balance; 
    animation:sss-rise .9s cubic-bezier(.22,1,.36,1) 80ms both;
color:white;
}
.em-gall{
font-style:italic;
 color:#F0C040
}
.gall-mn-p-sty{
font-size:clamp(17px, 1.4vw, 20px); 
line-height:1.6; 
color:rgba(245,239,228,0.65); 
max-width:620px; 
margin:0; 
text-wrap:pretty; 
animation:sss-rise .9s cubic-bezier(.22,1,.36,1) 160ms both
}

.gall_video_sty{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: clamp(18px, 2vw, 28px);
}
/*==============================
HEADER
==============================*/

.header{
    position: fixed;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 60;
    pointer-events: none;
   font-family : "Instrument Sans", Helvetica, sans-serif;
}

.header-container{
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(16px,2.5vw,32px);
}

.header-inner{
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: clamp(14px,2vw,32px);
    min-height: 66px;
    padding: 9px clamp(14px,1.6vw,24px);
    border-radius: 999px;
    background: rgba(245,239,228,.62);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 12px 40px rgba(22,17,12,.14);

}

/*==============================
LOGO
==============================*/

.logo{

    display:flex;
    align-items:center;
    gap:11px;

    flex:0 0 auto;

    text-decoration:none;

}

.logo img{

    height:38px;
    width:auto;
    display:block;

}

.logo-text{

    display:flex;
    flex-direction:column;
    line-height:1.05;

}

.logo-title{

    font-size:13.5px;
    font-weight:600;
    letter-spacing:.13em;
    color:#16110C;

}

.logo-subtitle{

    font-size:10px;
    font-weight:500;
    letter-spacing:.32em;
    color:#8A0E14;

}

/*==============================
NAVIGATION
==============================*/

.main-nav{

    display:flex;

    flex:1 1 auto;

    justify-content:flex-end;

    flex-wrap:wrap;

    gap:clamp(10px,1.4vw,22px);

    row-gap:4px;

    margin-left:auto;

    min-width:0;

    white-space:nowrap;

    font-size:13px;

    font-weight:500;

    letter-spacing:.05em;

    text-transform:uppercase;

}

.main-nav a{
  
    padding:6px 2px;

    color:rgba(22,17,12,.72);

    text-decoration:none;

    transition:.3s;

}

.main-nav a:hover{

    color:#E01020;

}

.quick-link{

    color:#8A0E14 !important;
    font-weight:600;

}

.quick-link:hover{

    color:#E01020 !important;

}

/*==============================
BUTTON
==============================*/

.quote-btn{

    position:relative;

    overflow:hidden;

    flex:0 0 auto;

    padding:12px clamp(14px,1.6vw,24px);

    border-radius:999px;

    background:#E01020;

    color:#fff;

    text-decoration:none;

    white-space:nowrap;

    font-size:13px;

    font-weight:600;

    letter-spacing:.07em;

    text-transform:uppercase;

    box-shadow:0 6px 18px rgba(224,16,32,.35);

    transition:.3s;

}

.quote-btn:hover{

    background:#8A0E14;

}

.btn-sheen{

    position:absolute;

    top:0;
    bottom:0;

    width:40%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    pointer-events:none;

    animation:sss-sheen 3.6s ease-in-out infinite;

}

@keyframes sss-sheen{

    0%{
        left:-50%;
    }

    100%{
        left:130%;
    }

}

/*-------------------*/
/*==============================
MOBILE BUTTON
==============================*/

.mobile-toggle{

    display:none;
    width:46px;
    height:46px;
    border:none;
    background:#fff;
    border-radius:50%;
    cursor:pointer;
    padding:0;
    position:relative;
    flex-shrink:0;

}

.mobile-toggle span{
    position:absolute;
    left:13px;
    width:20px;
    height:2px;
    background:#16110C;
    transition:.35s;

}

.mobile-toggle span:nth-child(1){
    top:15px;
}

.mobile-toggle span:nth-child(2){
    top:22px;
}

.mobile-toggle span:nth-child(3){
    top:29px;
}

.mobile-toggle.active span:nth-child(1){
    transform:rotate(45deg);
    top:22px;
}

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

.mobile-toggle.active span:nth-child(3){
    transform:rotate(-45deg);
    top:22px;
}

/*==============================
MOBILE MENU
==============================*/

.mobile-menu{
    font-family : "Instrument Sans", Helvetica, sans-serif;
    position:fixed;
    top:90px;
    left:15px;
    right:15px;
    background:#F5EFE4;
    border-radius:20px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
    display:none;
    overflow:hidden;
    z-index:999;
}

.mobile-menu.active{
    display:block;
    animation:fadeMenu .35s;
}

.mobile-menu a{
    display:block;
    padding:16px 22px !important;
    color:#16110C !important;
    border-bottom:1px solid rgba(0,0,0,.08);
    text-decoration:none;
    text-transform:uppercase;
    font-size:14px;
}

.mobile-menu a:hover{
    background:#fff;
}

.mobile-btn{
    margin:18px auto;
    width : 50%;
    border-radius:40px;
    background:#E01020;
    color:#fff !important;
    text-align:center;
    border:none !important;
}
@media(max-width: 425px){
.mobile-btn{
	width : 90%;
}
}

@keyframes fadeMenu{
    from{
        opacity:0;
        transform:translateY(-15px);
    }
    to{
        opacity:1;
        transform:none;
    }
}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:991px){
.main-nav{
    display:none;
}
.quote-btn{
    display:none;
}

.mobile-toggle{
    display:block;
}

.header-inner{
    justify-content:space-between;
}

.logo img{
    height:32px;
}

.logo-title{
    font-size:12px;
}

.logo-subtitle{
    font-size:9px;
}
}

.sc_interp{
color:#fff}




.sec-gall-1 {
            background: #F5EFE4;
            padding: clamp(90px, 11vw, 130px) 0;
        }

        .dv-gall-1 {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 26px
        }

        .gall-style-1 {
            display:flex;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            /*border: 1px solid rgba(22, 17, 12, 0.12);*/
            border-radius: 22px;
            overflow: hidden;
            /*background: rgba(255, 255, 255, 0.35);*/
            backdrop-filter: blur(10px);
            animation: 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0s 1 normal none running sss-fadeA;
        }

        .tab-content-1 {
            display: none;
        }

        .tab-content-1.active {
            display: block;
        }

        .tab-btn-1 {
            cursor: pointer;
            border-radius: 999px;
            padding: 12px 22px;
            font-family: "Instrument Sans", sans-serif;
            font-weight: 600;
            font-size: 14.5px;
            transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            border: 1px solid rgba(22, 17, 12, .15);
            background: #fff;
            color: #16110C;
            margin-right: 10px;
        }

        .tab-btn-1:hover {
            background: #16110C;
            color: #F5EFE4;
        }

        .tab-btn-1.active {
            background: #16110C;
            color: #F5EFE4;
            border-color: #16110C;
            box-shadow: 0 10px 24px rgba(22, 17, 12, .22);
        }

        .img-style-1 {
            width: 100%;
            object-fit: cover;
            height: 100%;
        }

        .gall-fig-sty-1 {
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 5px
        }

        .gall-figimg-1 {
            position: relative;
            aspect-ratio: 4/3;
            border-radius: 18px;
            overflow: hidden;
            border: 1px solid rgba(245, 239, 228, 0.13)
        }

        .fig-class-1 {
            position: absolute;
            left: 12px;
            top: 12px;
            pointer-events: none;
            padding: 7px 13px;
            border-radius: 999px;
            background: rgba(22, 17, 12, 0.6);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(245, 239, 228, 0.18);
            font-family: 'IBM Plex Mono', monospace;
            font-size: 10px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(245, 239, 228, 0.85)
        }

        .styl-gall-figcaotion-1 {
            font-size: 15px;
            line-height: 1.5;
            color: rgba(245, 239, 228, 0.72)
        }

        .fig-max-wid-1 {
            max-width: 1280px;
            margin: 0px auto;
            padding: 0px clamp(20px, 3vw, 32px);
        }

.reach_footor_style{
    font-size: 15px;
    line-height: 1.7;
    color: #F5EFE48C;
    width: 273px;
    height: 235px;
}

.main_block_style{
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 32px);
    display: grid;
    grid-template-columns: 
repeat(auto-fit, minmax(420px, 1fr));
    gap: clamp(36px, 4vw, 72px);
    align-items: end;
}

.services2-hero{
    position:relative;
    padding:clamp(150px,18vh,200px) 0 clamp(50px,6vw,76px);
    background:
        radial-gradient(90% 70% at 15% 5%, rgba(240,192,64,0.20) 0%, rgba(245,239,228,0) 55%),
        radial-gradient(70% 60% at 95% 15%, rgba(224,16,32,0.10) 0%, rgba(245,239,228,0) 60%),
        #F5EFE4;
}

.services2-bg-letter{
    position:absolute;
    top:-30px;
    right:0px;
    font-family:'Instrument Serif',serif;
    font-size:clamp(260px,32vw,460px);
    line-height:1;
    color:rgba(138,14,20,0.05);
    pointer-events:none;
    user-select:none;
}

.services2-container{
    position:relative;
    max-width:1280px;
    margin:0 auto;
    padding:0 clamp(20px,3vw,32px);
}

.services2-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:9px 16px;
    border-radius:999px;
    background:rgba(255,255,255,0.5);
    backdrop-filter:blur(10px);
    border:1px solid rgba(22,17,12,0.1);
    margin-bottom:28px;
    animation:sss-rise .8s cubic-bezier(.22,1,.36,1) both;
}

.services2-badge-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#E01020;
    animation:sss-pulse 2.4s ease-in-out infinite;
}

.services2-badge-text{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:rgba(22,17,12,.75);
}

.services2-title{
    font-family:'Instrument Serif',serif;
    font-weight:400;
    font-size:clamp(44px,5.6vw,82px);
    line-height:.99;
    letter-spacing:-.015em;
    margin:0 0 26px;
    max-width:900px;
    text-wrap:balance;
    animation:sss-rise .9s cubic-bezier(.22,1,.36,1) 80ms both;
}

.services2-title em{
    font-style:italic;
    color:#E01020;
}

.services2-description{
    font-size:clamp(17px,1.4vw,20px);
    line-height:1.6;
    color:rgba(22,17,12,.68);
    max-width:640px;
    margin:0;
    text-wrap:pretty;
    animation:sss-rise .9s cubic-bezier(.22,1,.36,1) 160ms both;
}

.who-we-sec-sty{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: clamp(32px, 4vw, 64px);
    margin-top: 44px;
}

@media(max-width:991px){
.main_block_style , .who-we-sec-sty{
    position: relative;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 32px);
    display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); 
   gap: 0px;
    align-items: end;
}
.gall-style-1{
flex-direction: column;
margin-bottom : 20px;
}
.gall-image{
min-height : 100% !important;
}

.product_img_box_sty{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
    gap: 18px;
}
.main_button_sty{
background: #16110C;
    color: #F5EFE4;
    padding: 17px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
    width: 100%;
    text-align: center;
}

.gall_video_sty{
display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); 
    gap: clamp(18px, 2vw, 28px);
}

.main_button2_sty{
border: 1px solid rgba(22, 17, 12, 0.28);
    color: #16110C;
    padding: 17px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: border-color .3s, color .3s;
    width: 100%;
    text-align: center;
}

.tab-btn-1.active{
    background: #16110C;
    color: #F5EFE4;
    border-color: #16110C;
    box-shadow: 0 10px 24px rgba(22, 17, 12, .22);
    width: 100%;
text-align: center;
}

 .tab-btn-1 {
            cursor: pointer;
            border-radius: 999px;
            padding: 12px 22px;
            font-family: "Instrument Sans", sans-serif;
            font-weight: 600;
            font-size: 14.5px;
            transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
            border: 1px solid rgba(22, 17, 12, .15);
            background: #fff;
            color: #16110C;
            margin-right: 10px;
 width: 100%;
text-align: center;
        }

#standards > div:first-child, .services-wrapper, .scope-of-work, .service_documentation, .sector_pro_sty, .blog_img_sty {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)) !important;
}

.about-hero-container {
    position: relative;
    display: grid;
     grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); 
    gap: clamp(34px, 4vw, 68px);
    align-items: end;
}
.service_documentation > div:nth-child(2){
min-height : 100% !important;
}
}
.scope-of-work{
display:grid; 
grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
 gap:16px;
font-family: "Instrument Sans", Helvetica, sans-serif;
}
@media (max-width : 923px) and (min-width : 613px){
.home-product-sty {
       position: relative;
    pointer-events: none;
    padding: 26px 27px 111px;
    margin-bottom: 14vw;
}
}
@media (max-width : 576px){
.gall-style, .blog-main-box {
 grid-template-columns: repeat(auto-fit, minmax(100%, 1fr))  !important; 
}
.blog-main-box .sup-images, .about-hero-image, .services-image-box{
min-height: 100%;
}
.services-content{
padding : 0px;
}
.services-hero-section, .about-hero, .services2-hero{
padding: clamp(100px,18vh,200px) 0 clamp(0px,6vw,84px);
}
.pillar-grid{
margin-top: 20px;
}
.who-section, .office-section{
padding : 0 0 clamp(40px,10vw,120px);
}
.work-section{
padding: clamp(40px,9vw,110px) 0;
}
.standards-section{
padding: clamp(40px, 10vw, 120px) 0;
}
.sec-gall{
padding: clamp(40px, 11vw, 40px) 0 !important;
}
.services-hero{
padding: 100px 0 40px;
}
#top{
padding : clamp(100px, 16vh, 190px) 0 0 !important;
}
.main_block_style > div:first-child {
    padding-bottom: clamp(0px, 6vh, 84px)  !important;
}
#products, #services, #sectors, #gallery,  #enquiry, #videos{
    padding: clamp(40px, 11vw, 130px) 0 !important;
}
#standards{
    padding: 0 0 clamp(40px, 11vw, 130px) !important;
}
#about{
    padding: clamp(40px, 11vw, 61px) 0 !important;
}
.services-hero ~ section, .services-hero-section ~ section, .services2-hero ~ section, .gell-head-sec ~ section{
padding: clamp(50px, 6vw, 80px) 0 clamp(40px, 10vw, 120px) !important;
}
footer{
padding: 40px 0 40px !important;
}
footer > div:last-child{
    margin: 0 auto 0 !important;
}
.who-we-sec-sty + div{
 margin-top: 20px !important;
}
.who-we-sec-sty + div > div, .main_block_style + div > div > div{
padding: 15px !important;
border-right: none !important;
}
.services-hero + section{
padding : clamp(50px, 6vw, 80px) 0 clamp(40px, 10vw, 120px);
}
.row {
    gap: 20px !important;
}
.applications-images{
object-fit : cover;
}
}
@media (max-width : 613px) and (min-width : 390px){
.home-product-sty {
       position: relative;
    pointer-events: none;
    padding: 26px 27px 111px;
    margin-bottom: 33vw;
}
}

@media (max-width : 1225px) and (min-width : 1100px){
.home-product-sty{
margin-bottom: 100px;
}
}
.service_documentation{
max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 32px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(30px, 4vw, 60px);
    align-items: center;
}

.sector_pro_sty{
    border-top: 1px solid rgba(22, 17, 12, 0.14);
    padding-top: clamp(28px, 3.5vw, 48px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(26px, 3.5vw, 56px);
    align-items: start;
}

.blog_img_sty{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 18px;
}

.main_button_sty{
background: #16110C;
    color: #F5EFE4;
    padding: 17px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s;
    text-align: center;
   width: fit-content;
}

.main_button2_sty {
    border: 1px solid rgba(22, 17, 12, 0.28);
    color: #16110C;
    padding: 17px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: border-color .3s, color .3s;
    width: fit-content;
    text-align: center;
}
@media (max-width : 1200px) and (min-width : 992px) {
#top .main_block_style > div:nth-child(2) > div > div {
height : auto !important;
}

}

@media (max-width : 425px){
#top .main_block_style > div:nth-child(2) > div > div {
height : auto !important;
}
}




.who-we-sec-firp-sty{
    font-size: 19px;
    line-height: 1.65;
    margin: 0;
    text-wrap: pretty;
   color: rgb(57 52 46);
}

.who-we-sec-secp-sty{
font-size: 16.5px;
    line-height: 1.7;
    color: rgba(22, 17, 12, 0.66);
    margin: 0;
    text-wrap: pretty;
}

.who-we-are-count{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0;
    margin-top: 64px;
    border-top: 1px solid rgba(22, 17, 12, 0.14);
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.who-we-are-count-dec{
font-size: 14.5px;
    line-height: 1.6;
    color: rgba(22, 17, 12, 0.6);
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.approval_detail{
    font-size: 13px;
    line-height: 1.5;
    color: rgba(22, 17, 12, 0.58);
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.home-supply-con{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.button-font{
display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.button-right-head{
    font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(138, 14, 20);
    margin-bottom: 6px;
}

.home_count_desc{
font-size: 14px;
    color: rgba(245, 239, 228, 0.6);
    line-height: 1.5;
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.site-main-div{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1px;
    background: rgba(22, 17, 12, 0.12);
    border: 1px solid rgba(22, 17, 12, 0.12);
    border-radius: 20px;
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.howwe-main-div{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.main_form_div{
font-family: "Instrument Sans", Helvetica, sans-serif;
}

.main_block_two{
font-family: "Instrument Sans", Helvetica, sans-serif;
}

.main_footer_div{
    background: #16110C;
    color: #F5EFE4;
    padding: 76px 0 40px;
    border-top: 1px solid rgba(245, 239, 228, 0.1);
    font-family: "Instrument Sans", Helvetica, sans-serif;
}


.on-site-sty{
font-family: "IBM Plex Mono", monospace;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(138, 14, 20);
    margin-bottom: 6px;
}

.on-site-sty-dec{
font-size: 14.5px;
    line-height: 1.45;
    color: rgba(22, 17, 12, 0.85);
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.work-section{
font-family: "Instrument Sans", Helvetica, sans-serif;
}

.product_new_div{
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 32px);
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.standard_main_div{
    background: #F5EFE4;
    padding: clamp(80px, 10vw, 120px) 0;
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.product_enquiry_block{
    background: #F5EFE4;
    padding: 0 0 clamp(80px, 10vw, 120px);
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.survey_main_block{
    position: relative;
    background: linear-gradient(160deg, #8A0E14 0%, #6E0A10 100%);
    color: #F5EFE4;
    padding: clamp(70px, 9vw, 110px) 0;
    overflow: hidden;
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.survey_contact_block{
background: #F5EFE4;
    padding: clamp(80px, 10vw, 120px) 0;
    font-family: "Instrument Sans", Helvetica, sans-serif;
}

.text-center{
text-align:center;
}


.gall-style {
    background: transparent !important;
border: none !important;
}
.scp0:hover {
    color: rgb(224, 16, 32) !important;
}


@media (min-width: 1081px) and (max-width: 1316px) {
    .services-content {
        padding: 0 0 160px;
    }
}

.cert_home{
position: relative;
    /*aspect-ratio: 3 / 4; */
    border-bottom: 1px solid rgba(245, 239, 228, 0.12);
}

.cert_home_pad{
padding: 53px 20px 24px;
}

section[data-screen-label="Process"]{
    position:relative;
    overflow:hidden;
}

.bubble-bg{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
}

  .bubble-bg span{
      position:absolute;
      bottom:-40px;
      border-radius:50%;
      background:rgba(240,192,64,.18);
      box-shadow:0 0 10px rgba(240,192,64,.15);
      animation:floatBubble linear infinite;
      background: radial-gradient(circle,
      rgba(240,192,64,.95) 0%,
      rgba(240,192,64,.45) 55%,
      transparent 100%);
  filter: blur(.5px);
  box-shadow:
      0 0 6px rgba(240,192,64,.5),
      0 0 12px rgba(240,192,64,.25);
  }

/* Different sizes */
.bubble-bg span:nth-child(1){left:5%;width:4px;height:4px;animation-duration:11s;animation-delay:-1s;}
.bubble-bg span:nth-child(2){left:12%;width:7px;height:7px;animation-duration:16s;}
.bubble-bg span:nth-child(3){left:20%;width:5px;height:5px;animation-duration:14s;animation-delay:-4s;}
.bubble-bg span:nth-child(4){left:30%;width:3px;height:3px;animation-duration:10s;}
.bubble-bg span:nth-child(5){left:40%;width:6px;height:6px;animation-duration:18s;}
.bubble-bg span:nth-child(6){left:52%;width:5px;height:5px;animation-duration:13s;animation-delay:-6s;}
.bubble-bg span:nth-child(7){left:60%;width:4px;height:4px;animation-duration:15s;}
.bubble-bg span:nth-child(8){left:70%;width:8px;height:8px;animation-duration:19s;}
.bubble-bg span:nth-child(9){left:78%;width:5px;height:5px;animation-duration:12s;}
.bubble-bg span:nth-child(10){left:86%;width:4px;height:4px;animation-duration:17s;}
.bubble-bg span:nth-child(11){left:92%;width:6px;height:6px;animation-duration:14s;}
.bubble-bg span:nth-child(12){left:97%;width:3px;height:3px;animation-duration:11s;}

@keyframes floatBubble{
    0%{
        transform:translateY(0) translateX(0) scale(.8);
        opacity:0;
    }

    10%{
        opacity:.35;
    }

    50%{
        transform:translateY(-55vh) translateX(15px) scale(1);
    }

    100%{
        transform:translateY(-115vh) translateX(-15px) scale(1.2);
        opacity:0;
    }
}