@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


html,
body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    /* Ensure body can grow with content */
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html,
body {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
} */

li {
    margin-bottom: 0;
    font-size: 18px;
}

p {
    margin-bottom: 0;
    font-size: 18px;
}

.biggerh1 {
    font-size: 130px;
    letter-spacing: -0.01em;
    font-weight: 600;
}

h1 {
    font-size: 58px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.03em;
}

h2 {
    font-size: 54px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.03em;
}

h3 {
    font-size: 42px;
    letter-spacing: -0.01em;
}

h4 {
    font-size: 30px;
    letter-spacing: -0.01em;
}

h5 {
    font-size: 24px;
    letter-spacing: -0.01em;
}

h6 {
    font-size: 16px;
}


.home_first_section_padding {
    padding: 90px 0;
}

.home_intro_header_text_area h1 {
    color: #010101;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
}

.home_intro_header_text_area {
    position: relative;
    max-width: fit-content;
    margin: 0 auto;
}

.home_intro_header_text_area .header_sticker {
    position: absolute;
    pointer-events: none;
    /* User wants to stop dragging, so we can disable pointer events */
    transition: transform 0.3s ease;
}

.home_intro_header_text_area .sticker_1 {
    width: 80px;
    right: 15px;
    top: -20px;
    z-index: 1;
}

.home_intro_header_text_area .sticker_2 {
    width: 28px;
    left: -15px;
    top: 55%;
    z-index: 1;
}

.home_intro_header_text_area .sticker_3 {
    width: 25px;
    left: 45%;
    bottom: -5px;
    z-index: 3;
}















.about_intro_header_text_area h1 {
    color: #010101;
    text-align: center;
    position: relative;
    z-index: 2;
    margin-bottom: 0;
}

.about_intro_header_text_area {
    position: relative;
    max-width: fit-content;
    margin: 0 auto;
}

.about_intro_header_text_area .header_sticker {
    position: absolute;
    pointer-events: none;
    /* User wants to stop dragging, so we can disable pointer events */
    transition: transform 0.3s ease;
}

.about_intro_header_text_area .sticker_1 {
    width: 40px;
    left: 85px;
    top: -25px;
    z-index: 1;
}

.about_intro_header_text_area .sticker_2 {
    width: 180px;
    right: -30px;
    top: 51%;
    z-index: 1;
}







.home_intro_header_video_btn a {
    display: flex;
    position: relative;
    gap: 12px;
    line-height: 100%;
    align-items: center;
    font-family: "Azeret Mono", monospace;
    font-size: 12px;
    font-weight: 400;
    color: #616161;
    justify-content: center;
}

.home_intro_header_video_btn a img {
    max-width: 30px;
}

.home_whiteboard_cards_area {
    padding: 40px 0 80px 0;
    display: block;
    position: relative;
    width: 100%;
    background-image: url(../upload/home/whiteboard.svg);
}

.whiteboard_card_area {
    display: block;
    position: relative;
}

.whiteboard_card_area img {
    max-width: 100%;
}

.firstcard_area {
    transform: rotate(-8deg);
    margin-top: 30px;
}

.thirdcard_area {
    transform: rotate(8deg);
    margin-top: 30px;
}

.home_whiteboard_cards_area .col-lg-4 {
    padding-left: 30px;
    padding-right: 30px;
}

.wireframe_whiteboard_under_icons {
    display: block;
    position: absolute;
    right: 45px;
    bottom: -30px;
}

.design_whiteboard_under_icons {
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

.coding_whiteboard_under_icons {
    display: block;
    position: absolute;
    bottom: 0;
    left: 45px;
    bottom: -30px;
}


.principle_main_card_area {
    position: relative;
    min-height: 730px;
}

.pl-250 {
    padding-left: 250px;
}

.principle_scrolling_cards_area {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 40px;
    border-radius: 20px;
}

.guesswork_card {
    background-color: white;
    z-index: 1;
}

.path_card {
    background-color: #8ED462;
    z-index: 2;
}

.reach_card {
    background-color: #FF705D;
    z-index: 3;
}

.principle_icon_area {
    display: block;
    position: relative;
    text-align: end;
}

.principle_icon_area img {
    max-width: 100%;
}

.principle_header_content_area {
    display: block;
    position: relative;
    padding: 90px 0 140px 0;
}

.principle_header_content_area h3 {
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    margin-bottom: 0;
}

.principle_scrolling_cards_area.guesswork_card h3 {
    color: #2BA0FF;
    font-weight: 500;
    display: flex;
    align-items: end;
    gap: 20px;
}

.principle_scrolling_cards_area.path_card h3 {
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: end;
    gap: 20px;
}

.principle_scrolling_cards_area.reach_card h3 {
    color: #fff;
    font-weight: 500;
    display: flex;
    align-items: end;
    gap: 20px;
}


.principle_header_content_area h3 span {}

.principle_header_content_area span img {
    max-width: 100%;
}



.principle_description_area {
    display: block;
    position: relative;
}

.guesswork_card .principle_description_area p {
    color: #2BA0FF;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.path_card .principle_description_area p {
    color: #ffffff;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.reach_card .principle_description_area p {
    color: #ffffff;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.principle_bg_area {
    background-color: #EBE9E4;
    padding-top: 80px;
    padding-left: 80px;
    padding-right: 80px;
    border-radius: 20px;
    overflow: hidden;
}

.home_second_principles_area {
    display: block;
    position: relative;
}

.home_second_principles_area h2 span.header_underline {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.home_second_principles_area h2 span.header_underline::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 15px;
    background-image: url('../upload/home/underline.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: -1;
}

.home_second_principles_area h2 {
    color: #010101;
    margin-bottom: 180px;
}

.home_second_principles_area p {
    color: rgba(1, 1, 1, 0.60);
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.pr-250 {
    padding-right: 250px;
}

.home_recent_project_showcase_area {
    display: block;
    position: relative;
}

.home_recent_project_showcase_area .header_small_sticker_area {
    display: block;
    position: absolute;
    background-color: #FF705D;
    display: inline-block;
    padding: 0 6px;
    transform: rotate(1deg);
    top: -20px; /* was -12px: sat over the cap height of the heading */
    box-shadow: 0 0 0 3px #121212; /* halo in the section colour: reads as a sticker, not a collision */
    left: 0;
    z-index: 2;
}

.home_recent_project_showcase_area .header_small_sticker_area h6 {
    margin-bottom: 0;
    font-family: "Azeret Mono";
    color: #010101;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 0;
}

.home_recent_project_showcase_area h2 {
    color: #F2F1F0;
    font-style: normal;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.work_showcase {
    position: relative;
    overflow: hidden;
}

.showcase_grid_container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 30px !important;
    position: relative;
}

.background_grid_lines_area {
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    display: flex;
    justify-content: space-between;
}

.showcase_grid_row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
    width: 100%;
}

.showcase_grid_col_4 {
    width: 33.333333%;
    padding: 0;
}

.showcase_grid_col_2 {
    width: 16.666667%;
    padding: 0;
}

.showcase_grid_col_6 {
    width: 50%;
    padding: 0;
}

.showcase_grid_col_10 {
    width: 83.33333333%;
    padding: 0;
}

@media (max-width: 991px) {

    .showcase_grid_col_4,
    .showcase_grid_col_2,
    .showcase_grid_col_6,
    .showcase_grid_col_10 {
        width: 100%;
    }
}

.grid_line {
    width: 1px;
    height: 100%;
    background-color: #2A2A2A;
}

.home_recent_project_showcase_area {
    display: block;
    position: relative;
    z-index: 1;
}

.project_showcase_container {
    padding-top: 100px;
}

.project_card_area {
    position: relative;
    margin-bottom: 80px;
    transition: transform 0.5s ease;
}

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

.project_card_image {
    width: 100%;
    border-radius: 0;
    /* Clean edges for grid fit */
    overflow: hidden;
    margin-bottom: 25px;
    position: relative;
}

.project_card_image img {
    width: 100%;
    height: auto;
    display: block;
}

.project_tags_area {
    position: absolute;
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    top: 20px;
    left: 20px;
}

.tag_item {
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    font-family: "Azeret Mono";
    font-size: 12px;
    color: #F2F1F0;
    text-transform: uppercase;
}

.tag_item.dark {
    border: 1px solid #94A48A;
    color: #010101;
}

.tag_item.brand_tag {
    background-color: #000;
    border-color: #000;
}

.tag_item.brand_tag span {
    color: #FF705D;
    margin-right: 5px;
}

.project_title_area h2 {
    font-size: 32px;
    color: #F2F1F0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

/* .staggered_column_right {
    padding-top: 150px;
} */

@media (max-width: 991px) {
    .staggered_column_right {
        padding-top: 0;
    }
}

.recent_work_padding {
    padding: 100px 0 80px 0;
}

.work_showcase_padding {
    border-bottom: 1px solid #2A2A2A;
}

.project_showcase_content {
    padding-top: 100px;
}

.mt-600 {
    margin-top: 600px;
}

.more_project_showcase_btn {
    text-align: center;
    z-index: 10;
    display: block;
    position: relative;
    padding-bottom: 120px;
    border-bottom: 1px solid #2A2A2A;
}

.more_project_showcase_btn a {
    color: #F2F1F0;
    font-size: 80px;
    font-style: normal;
    font-weight: 700;
    line-height: 110%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.more_project_showcase_btn a::after {
    content: "";
    position: absolute;
    bottom: -0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #888888;
}



.vertical-line {
    background-color: #C2C1C0;
    width: 1px;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0% auto auto 30px;
}

.vertical-line.right {
    background-color: #C2C1C0;
    inset: 0% 30px auto auto;
}

.extended_dark_bg_lines {
    height: 80px;
    position: relative;
    background-color: #F2F1F0;
    width: 100%;
}

.blog_insider_lines {
    height: 100%;
    position: relative;
    background-color: #F2F1F0;
    width: 100%;
}

.work_insider_lines {
    height: 100%;
    position: relative;
    background-color: #F2F1F0;
    width: 100%;
}

.news_blog_main_header_area {
    border-top: 1px solid #C2C1C0;
    padding: 80px 0;
}

.work_main_header_area {
    border-top: 1px solid #C2C1C0;
    padding: 80px 0;
}

.recent_news_area .row {
    padding: 0 30px;
    --bs-gutter-x: 0;
    border-top: 1px solid #C2C1C0;
}

.recent_news_area .row .col-lg-3 {
    border-right: 1px solid #C2C1C0;
}



.work_portfolio_area {
    border-top: 1px solid #C2C1C0;
}

.contact_form_area {
    border-top: 1px solid #C2C1C0;
}

.new_blog_header_area {
    display: block;
    position: relative;
}

.new_blog_header_area .header_small_sticker_area {
    display: block;
    position: absolute;
    background-color: #8ED462;
    display: inline-block;
    padding: 0 6px;
    transform: rotate(1deg);
    top: -20px; /* was -12px: sat over the cap height of the heading */
    box-shadow: 0 0 0 3px #F2F1F0; /* halo in the section colour: reads as a sticker, not a collision */
    left: 50%;
    transform: translate(-50%, -0%);
    z-index: 2;
    text-align: center;
    justify-self: anchor-center;
}

.new_blog_header_area .header_small_sticker_area h6 {
    margin-bottom: 0;
    font-family: "Azeret Mono";
    color: #010101;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 0;
}

.new_blog_header_area h2 {
    color: #010101;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    text-align: center;
}

.single_news_area {
    padding: 30px 30px 50px 30px;
}




.home-media_folder-wrapper {
    padding-left: 2.25em;
    padding-right: 2.25em;
    overflow: hidden;
}

.home-media_folder-block {
    perspective: 1000px;
    padding-top: 8em;
    position: relative;
}

.folder-back {
    width: 100%;
    padding-bottom: .875em;
}

.folder-paper {
    z-index: 1;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    inset: auto 0% -15%;
}

.folder-front {
    z-index: 2;
    transform-origin: 50% 100%;
    width: 100%;
    position: absolute;
    inset: auto 0% -1px;
    transform: perspective(1000px);
}

.folder-front,
.folder-paper {
    transition: transform 0.525s cubic-bezier(0.51, 0, 0.08, 1);
}


.single_news_area:hover .folder-paper {
    transform: translate(0px, -60%) rotate(-5deg);
    opacity: 1;
}

.single_news_area:hover .folder-front {
    transform: rotateX(-25deg);
}

.single_news_area_details {
    display: block;
    position: relative;
}

.single_news_area_details p {
    color: #101010;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0.04em;
    margin-bottom: 30px;
}

.single_news_area_details h3 {
    color: #494949;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    margin-bottom: 0;
    font-size: 26px;
}

.single_news_area_details h2 {
    color: #494949;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    margin-bottom: 0;
    font-size: 26px;
}

.single_news_area_details.news_type p {
    display: flex;
    align-items: center;
}

.single_news_area_details.news_type p::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #FF705D;
    /* Green */
    margin-right: 10px;
}

.single_news_area_details.blog_type p {
    display: flex;
    align-items: center;
}

.single_news_area_details.blog_type p::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #8ED462;
    /* Orange */
    margin-right: 10px;
}

/* Footer Marquee */
.marquee_footer {
    background-color: #010101;
    padding: 25px 0;
    overflow: hidden;
    border-top: 1px solid #2A2A2A;
}

.marquee_container {
    display: flex;
    width: 100%;
    overflow: hidden;
}

.marquee_content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: marquee-scroll 30s linear infinite;
    flex-shrink: 0;
}

.marquee_container.reverse .marquee_content {
    animation: marquee-scroll-reverse 30s linear infinite;
}

.marquee_item {
    font-size: 28px;
    font-weight: 500;
    color: #F2F1F0;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    padding: 0 20px;
}

.marquee_icon {
    width: 30px;
    height: 30px;
    opacity: 1;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes marquee-scroll-reverse {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .marquee_item {
        font-size: 32px;
        padding: 0 20px;
    }


}

.main_footer {
    padding: 80px 0;
}

.footer_top_area {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: end;
    padding-bottom: 80px;
    border-bottom: 1px solid #CCCCCC;
}

.footer_top_left_area {
    display: block;
    position: relative;
}

.footer_top_left_area h3 {
    color: #1E1C1B;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    margin-bottom: 50px;
}

.footer_top_left_area h3:last-child {
    margin-bottom: 0;
}

.footer_top_left_area a {
    color: #1E1C1B;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
}

.footer_contact_btn a {
    display: inline-flex;
    position: relative;
    color: #FA543C;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    border: 1px solid #fa543c;
    padding: 15px 24px;
    align-items: center;
}

.footer_contact_btn a:before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #FF705D;
    /* Orange */
    margin-right: 15px;

}

.footer_bottom_area {
    display: block;
    position: relative;
    padding-top: 50px;
}

.footer_bottom_social_links {
    display: block;
    position: relative;
}

.footer_bottom_social_links {
    display: block;
    position: relative;
}

/* The three footer column labels are <p> rather than headings: they label a
   list, they are not document structure, and as h4 they were the only headings
   in the footer. Selectors match both so the rendering is unchanged. */
.footer_bottom_social_links h4,
.footer_bottom_social_links p.h6-style {
    color: #101010;
    font-family: "Azeret Mono";
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    font-size: 16px;
}

.footer_bottom_social_links h4.footer_blue::before,
.footer_bottom_social_links p.footer_blue::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #2BA0FF;
    margin-right: 10px;
}

.footer_bottom_social_links h4.footer_orange::before,
.footer_bottom_social_links p.footer_orange::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #FF705D;
    margin-right: 10px;
}

.footer_social_links {
    display: block;
    position: relative;
}

.footer_social_links ul {
    padding: 0;
    margin: 0;
}

.footer_social_links ul li {
    margin-bottom: 12px;
}

.footer_social_links ul li:last-child {
    margin-bottom: 0;
}

.footer_social_links ul li a {
    display: flex;
    position: relative;
    gap: 10px;
    color: #494949;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -0.01em;
}

.subscribe_letter_area {
    display: block;
    position: relative;
}

.subscribe_letter_area h4,
.subscribe_letter_area p.h6-style {
    color: #101010;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.subscribe_letter_area h4.footer_green::before,
.subscribe_letter_area p.footer_green::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    background-color: #2BA0FF;
    margin-right: 10px;
}

.footer_form {
    position: relative;
    width: 100%;
    display: inline;
}

.footer_form input {
    border: none;
    border-bottom: 1px solid #ccc;
    width: 100%;
    padding-right: 50px;
    box-sizing: border-box;
    padding-left: 10px;
    margin: 0;


    color: #101010;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 110%;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
}

.submit_btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #333;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-size: 18px;
}

.footer_form input::placeholder {
    color: #6f6d69 !important;   /* 4.7:1 on the footer ground, was ~2.8:1 */
    letter-spacing: 0.04em;
    font-weight: 300;
    font-family: "Azeret Mono", monospace;
    font-size: 16px;
}

.pt-50 {
    padding-top: 50px;
}

.footer_logo_last {
    display: block;
    position: relative;
}

.footer_logo_last img {
    width: 100%;
    padding: 0 300px;
}

.subpage_main_big_header_area {
    display: block;
    position: relative;
}

.subpage_main_big_header_area h1,
.subpage_main_big_header_area h2.biggerh1 {
    color: #010101;
    text-align: center;
    font-style: normal;
    font-weight: 500;
    line-height: 80%;
    text-transform: uppercase;
    margin-bottom: 0;
}

/* The sticker used to sit at the exact centre of the headline block, which on
   phones put it on top of the middle line ("WORK [WE] BUILD"). The block is now a
   one-column grid that hugs the widest line of the headline, and the sticker is a
   grid item pinned to that block's top-right corner, hanging slightly outward. */
.subpage_main_big_header_area,
.main_scroll_animated_content_area {
    display: grid;
    grid-template-columns: fit-content(100%);
    justify-content: center;
    padding-top: 52px;   /* room for the centred sticker above the headline */
}

.subpage_main_big_header_area > h1,
.subpage_main_big_header_area > h2.biggerh1,
.main_scroll_animated_content_area > h1,
.main_scroll_animated_content_area > h2.biggerh1 {
    grid-area: 1 / 1;
    min-width: 0;
}

.subpage_bigheader_sticker_area {
    grid-area: 1 / 1;
    position: relative;
    justify-self: center;          /* centred over the headline block */
    align-self: start;
    z-index: 2;
    padding: 8px 24px;
    background: #FF705D;
    border-radius: 50px;
    /* Sits just above the cap line rather than across it, so it never covers a
       word. The container reserves the matching space with padding-top. */
    transform: translateY(-128%) rotate(6deg);
}


.subpage_bigheader_sticker_area span {
    background: #FFF;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-align: center;

    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    text-transform: uppercase;
}

.recent_news_area .row .col-lg-3 {
    border-bottom: 1px solid #C2C1C0;
}

.news_details_main_header_area {
    border-top: 1px solid #C2C1C0;
    padding: 0 30px;
    display: flex;
    position: relative;
    border-bottom: 1px solid #C2C1C0;
}

.news_details_header_left {
    display: block;
    position: relative;
    width: 50%;
    border-right: 1px solid #C2C1C0;
}

.news_details_header_right {
    display: block;
    position: relative;
    width: 50%;
}

.news_details_date_area {
    display: block;
    position: relative;
    padding: 40px;
    border-bottom: 1px solid #C2C1C0;
}

.news_details_date_area p {
    color: #101010;
    font-family: "Azeret Mono";
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: 0.04em;
}

.news_content_title_area {
    padding: 40px;
}

.news_content_title {
    display: block;
    position: relative;
}

.news_content_title h1 {
    color: #010101;

    font-size: 48px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.01em;
    margin-bottom: 120px;
}

.news_type_area span {
    color: #101010;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0.04em;
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.news_type_area span.green::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #039855;
    margin-right: 10px;
}

.news_type_area span.red::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #FA543C;
    margin-right: 10px;
}

.blog_details_image_area {
    display: block;
    position: relative;
    padding: 0 30px;
}

.blog_details_image_area img {
    max-width: 100%;
    width: 100%;
}

.blog_leftside_info_panel {
    position: sticky;
    top: 50px;
    align-self: flex-start;
}

.table_of_content_area {
    display: block;
    border: 1px solid #C2C1C0;
}

.table_of_content_header {
    padding: 24px 40px;
    border-bottom: 1px solid #C2C1C0;
}

.table_of_content_header span {
    margin-bottom: 0;
    color: #101010;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.table_of_content_points_area {
    display: block;
    position: relative;
    padding: 20px 30px;
}

.table_of_content_points_area ul {
    padding: 0;
    margin: 0;
}

.table_of_content_points_area ul li {

    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.01em;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.table_of_content_points_area ul li:before {
    content: "";
    width: 4px;
    height: 4px;
    /* background-color: #FF705D; */
    margin-top: 6px;
    flex-shrink: 0;
}

.table_of_content_points_area ul li.red::before {
    background-color: #FF705D;
}

.table_of_content_points_area ul li.green::before {
    background-color: #8ED462;
}

.table_of_content_points_area ul li:last-child {
    margin-bottom: 0px;
}

.table_of_content_points_area ul li a {
    color: #494949;
}

.share_link_social_area {
    margin-top: 20px;
    border: 1px solid #C2C1C0;
}

.share_link_social_header {
    display: block;
    position: relative;
    padding: 24px 40px;
    border-bottom: 1px solid #C2C1C0;
}

.share_link_social_header span {
    margin-bottom: 0;
    color: #101010;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 120%;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.share-wrap ul {
    padding: 0;
    margin: 0;
}

.share-wrap {
    padding: 24px 40px;
}

.share-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 5px;
}

.share-item {
    flex: 1 1 0;
    gap: 5px;
}

.share-btn {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1.4 / 1;
    color: #000;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease;
}

.share-btn.x {
    background-color: #000000;
    color: #fff;
}

.share-btn.facebook {
    background-color: #1877F2;
    color: #fff;
}

.share-btn.linkedin {
    background-color: #0A66C2;
    color: #fff;
}

.share-btn.linkedin {
    background-color: #0A66C2;
    color: #fff;
}

.share-btn.link {
    background-color: #FFC700;
    color: #000;
}

.share-btn i {
    font-size: 20px;
    line-height: 100%;
}



















.blog_pl_details {
    padding-left: 80px;
}


.blog_insider_details_area h2 {
    color: #212121;
    font-style: normal;
    font-weight: 600;
    line-height: 105%;
    letter-spacing: -0.03em;
    margin-bottom: 60px;
    margin-bottom: 30px;
    margin-top: 50px;
    font-size: 44px;
}

.blog_insider_details_area h3 {
    color: #212121;
    font-style: normal;
    font-weight: 500;
    line-height: 105%;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    margin-top: 40px;
    font-size: 38px;
}

.blog_insider_details_area h4 {
    color: #212121;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.03em;
    margin-bottom: 15px;
    margin-top: 30px;
    font-size: 28px;
}

.blog_insider_details_area h5 {
    color: #212121;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.03em;
    font-size: 24px;
}





.blog_insider_details_area h6 {
    color: #212121;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.03em;
    font-size: 18px;
}

.blog_insider_details_area p {
    color: #4D4D4D;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 0;
    margin-bottom: 0;
    font-size: 18px;
}

.blog_insider_details_area ul {
    margin-bottom: 0;
}

.blog_insider_details_area ul li {
    color: #4D4D4D;
    font-style: normal;
    font-weight: 400;
    line-height: 180%;
    letter-spacing: 0;
    margin-bottom: 0;
    font-size: 18px;
    list-style-type: disc;
}

.blog_insider_details_area table {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: "Azeret Mono", monospace;
    font-size: 15px;
    border-radius: 12px;
    border: 1px solid #EAEAEA;
    background-color: #fff;
    margin: 40px 0;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); /* Subtle premium shadow */
}

@media (max-width: 991px) {
    .blog_insider_details_area table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.blog_insider_details_area table th,
.blog_insider_details_area table td {
    padding: 18px 20px;
    border-bottom: 1px solid #EAEAEA;
    color: #4D4D4D;
    text-align: left;
    min-width: 180px;
    vertical-align: top;
}

.blog_insider_details_area table th:not(:last-child),
.blog_insider_details_area table td:not(:last-child) {
    border-right: 1px solid #EAEAEA;
}

.blog_insider_details_area table tr:last-child th,
.blog_insider_details_area table tr:last-child td {
    border-bottom: none;
}

.blog_insider_details_area table thead tr,
.blog_insider_details_area table tr:first-child {
    background-color: #F9F9F9;
}

.blog_insider_details_area table tr:first-child td {
    border-bottom: 1px solid #DDDDDD;
}

.blog_insider_details_area table tbody tr:not(:first-child) {
    transition: background-color 0.25s ease;
}

.blog_insider_details_area table tbody tr:not(:first-child):hover {
    background-color: #F8F8F8;
}

.blog_insider_details_area table tr:first-child p strong,
.blog_insider_details_area table th strong {
    color: #010101;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 0.04em;
}

.blog_insider_details_area table p {
    margin-bottom: 0;
    font-size: inherit;
    color: inherit;
    line-height: 160%;
}

.blog_insider_details_area table::-webkit-scrollbar {
    height: 6px;
}

.blog_insider_details_area table::-webkit-scrollbar-track {
    background: transparent;
    border-top: 1px solid #EAEAEA;
    border-radius: 0 0 12px 12px;
}

.blog_insider_details_area table::-webkit-scrollbar-thumb {
    background-color: #D1D1D1;
    border-radius: 10px;
}

.blog_insider_details_area table::-webkit-scrollbar-thumb:hover {
    background-color: #A8A8A8;
}

.about_top_bg {
    background-image: url('../upload/about/asket-studio-about-header-background.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    top: -100px;
    width: 100%;
}

/* Phones get the 1024px and 640px renditions of the same image (finding 29). */
@media screen and (max-width: 991px) {
    .about_top_bg { background-image: url('../upload/about/asket-studio-about-header-background-w1024.webp'); }
}
@media screen and (max-width: 640px) {
    .about_top_bg { background-image: url('../upload/about/asket-studio-about-header-background-w640.webp'); }
}

.about_first_section_padding {
    padding: 190px 0 0 0;
}

.about_intro_tab_image {
    display: block;
    position: relative;
    transform: translateY(80px);
}

.about_intro_tab_image img {
    max-width: 100%;
}

.main_scroll_animated_content_area {
    display: grid; /* was block; the sticker grid rule above needs this to win */
    grid-template-columns: fit-content(100%);
    justify-content: center;
    position: relative;
}

.main_scroll_animated_content_area h1,
.main_scroll_animated_content_area h2.biggerh1 {
    color: #010101;
    text-align: center;
    margin-bottom: 40px;
    font-style: normal;
    line-height: 80%;
    text-transform: uppercase;
}

.insta_story_container {
    display: grid;
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
}

.main_scroll_animated_insta_story_update {
    display: block;
    position: relative;
    justify-content: flex-end;
    align-items: center;
    border-radius: 20px;
    overflow: hidden;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
}

.story-template1 {
    opacity: 1;
    visibility: visible;
}

.story-template1 {
    background-color: #ADA999;
}

.story-template2 {
    background-color: #B1BDC4;
}

.story-template3 {
    background-color: #BDC0B1;
}

.story-template4 {
    background-color: #BDB6CD;
}

.top-story {
    z-index: 4;
    width: 100%;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
    inset: 0% 0% auto;
}

.loaders {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    width: 100%;
    display: flex;
}

.empty-load {
    background-color: #ffffff80;
    border-radius: 30px;
    width: 100%;
    height: 3px;
    position: relative;
    overflow: hidden;
}

.empty-load.on-top {
    background-color: #fff;
    width: 0%;
    position: absolute;
}

.profile-informations {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    margin-top: 25px;
    display: flex;
    align-items: center;
}

.profile-pic img {
    width: 42px;
}

.profile-name p {
    color: #FFF;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: -0.04em;
}

.mid_story {
    display: block;
    position: relative;
    margin-top: 50px;
}

.first_icon_image {
    display: block;
    position: relative;
    left: -6%;
}

.second_icon_image {
    display: block;
    position: relative;
    left: 50%;
    top: -25px;
}

.mid_story img {
    max-width: 100px;
}



.bottom_story {
    width: 100%;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 40px;
    position: relative;
}

.bottom_story span {
    color: #101010;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0.04em;
}

.bottom_story h2 {
    color: #010101;

    font-style: normal;
    font-weight: 600;
    line-height: 80%;
    text-transform: uppercase;
    margin-top: 30px;
    margin-bottom: 150px;
}

.bottom_story p {
    color: rgba(1, 1, 1, 0.80);

    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}

.main_scroll_animated_short_desc {
    display: block;
    position: relative;
    text-align: center;
}

.main_scroll_animated_short_desc span {
    color: rgba(16, 16, 16, 0.50);
    font-family: "Azeret Mono";
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: 40px;
    text-align: center;
}

.dark_bg {
    background-color: #121212;
}

.drag_and_drop_widget_element_area {
    height: 100vh;
}

.drag_drop_elements_header_area {
    display: block;
    position: relative;
    text-align: center;
}

.drag_drop_elements_header_area .header_small_sticker_area {
    display: block;
    position: absolute;
    background-color: #FF8301;
    display: inline-block;
    padding: 0 6px;
    transform: rotate(1deg);
    top: -20px; /* was -12px: sat over the cap height of the heading */
    box-shadow: 0 0 0 3px #121212; /* halo in the section colour: reads as a sticker, not a collision */
    left: 50%;
    transform: translate(-50%, -0%);
    z-index: 2;
}

.drag_drop_elements_header_area .header_small_sticker_area h6 {
    margin-bottom: 0;
    font-family: "Azeret Mono";
    color: #010101;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 0;
}

.drag_drop_elements_header_area h2 {
    color: #F2F1F0;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

.drag_drop_elements_header_area p {
    color: #BBB;
    text-align: center;

    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.01em;
}

/* Physics Drag and Drop Area */
.drag_and_drop_widget_element_area {
    position: relative;
    overflow: hidden;
}

.drag_and_drop_widgets_area {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.drag_and_drop_widget_element_area .container {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

.drag_and_drop_widget_element_area .container * {
    pointer-events: auto;
}

.asket_difference_area {
    text-align: center;
    display: block;
    position: relative;
}

.asket_difference_area .header_small_sticker_area {
    display: block;
    position: absolute;
    background-color: #8ED462;
    display: inline-block;
    padding: 0 6px;
    transform: rotate(1deg);
    top: -20px; /* was -12px: sat over the cap height of the heading */
    box-shadow: 0 0 0 3px #F2F1F0; /* halo in the section colour: reads as a sticker, not a collision */
    left: 50%;
    transform: translate(-50%, -0%);
    z-index: 2;
}

.asket_difference_area .header_small_sticker_area h6 {
    margin-bottom: 0;
    font-family: "Azeret Mono";
    color: #010101;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 0;
}

.asket_difference_area h2 {
    color: #010101;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.pt-80 {
    padding-top: 80px;
}

.pb-80 {
    padding-bottom: 80px;
}

.the_difference_part_area {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.difference_white_bg {
    background-color: #fff;
}

.the_difference_part_header_area {
    padding: 26px 0;
    position: relative;
}

.the_difference_part_header_area::before,
.the_difference_part_header_area::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.the_difference_part_header_area::before {
    left: 40px;
}

.the_difference_part_header_area::after {
    right: 40px;
}

.the_difference_part_header_area.with_asket::before,
.the_difference_part_header_area.with_asket::after {
    background-color: #FFFFFF;
}

.the_difference_part_header_area.without_asket::before,
.the_difference_part_header_area.without_asket::after {
    background-color: #DDDDDD;
}

.the_difference_part_header_area.with_asket {
    background-color: #8ED462;
}

.without_asket {
    border-bottom: 1px solid #CCCCCC;
}

.difference_border_all_the_side {
    border: 1px solid #CCCCCC;
}

.the_difference_part_header_area h3 {
    margin-bottom: 0;
    color: #010101;
    text-align: center;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    font-size: 30px;
}

.the_difference_part_content_area {
    display: block;
    position: relative;
    padding: 40px;
}

.the_difference_part_content_area ul {
    padding: 0;
    margin: 0;
}

.the_difference_part_content_area ul li img {
    width: 22px;
}

.the_difference_part_content_area ul li {
    color: #010101;

    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    gap: 20px;
    display: flex;
    margin-bottom: 20px;
}

.the_difference_part_content_area ul li:last-child {
    margin-bottom: 0;
}

.pt-60 {
    padding-top: 60px;
}

.portfolio_filter_tab_area {
    text-align: center;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.portfolio_filter_tab_area a {
    color: #010101;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 0.04em;
    padding: 10px 15px;
    border: 1px solid rgba(1, 1, 1, 0.3);
}

.portfolio_filter_tab_area a.active {
    background-color: #8ED462;
    border: 1px solid rgba(52, 68, 41, 0.3);
}

.work_portfolio_single_project_area {
    display: block;
    position: relative;
}

.work_portfolio_single_image_area {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.work_portfolio_single_image_area img {
    max-width: 100%;
}

.work_portfolio_more_details_area {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: flex-start;
    /* A long project name used to squeeze the chip row until each chip's text
       wrapped to two lines, so chip heights differed across the row. The row
       now wraps under the name instead. */
    flex-wrap: wrap;
    gap: 12px 16px;
    padding: 20px 20px 0 20px;
}

.work_portfolio_company_name_data {
    display: flex;
    position: relative;
    align-items: center;
    gap: 14px;
}

.work_portfolio_company_name_data img {
    max-width: 46px;
}

.work_portfolio_company_name_data h2 {
    color: #010101;

    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    margin-bottom: 0;
    font-size: 24px;
}

.work_portfolio_more_tags_area {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.work_portfolio_single_tag {
    font-family: "Azeret Mono";
    padding: 10px 15px;
    border: 1px solid rgba(1, 1, 1, 0.3);
    align-self: center;
    white-space: nowrap;   /* a chip is one line, always */
}

.work_portfolio_single_tag p {
    color: #010101;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 100%;
}

.mt-80 {
    margin-top: 80px;
}

.visit_website_url_btn {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.visit_website_url_btn a {
    display: flex;
    position: relative;
    align-items: center;
    gap: 20px;
    color: #5B5954;   /* was #616161, ~3:1; now 6.1:1 on the page ground */
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.visit_website_url_btn a img {
    width: 30px;
}

.workdetails_main_header_image {
    display: block;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.workdetails_main_header_image img {
    max-width: 100%;
}

.workdetails_shorten_description_area {
    display: block;
    position: relative;
}



.used_element_section {
    border-top: 1px dashed #ccc;
}

.details_tags_area {
    border-top: 1px dashed #ccc;
}

.used_elements_header_area {
    text-align: center;
    display: block;
    position: relative;
}

.used_elements_header_area .header_small_sticker_area {
    display: block;
    position: absolute;
    background-color: #8ED462;
    display: inline-block;
    padding: 0 6px;
    transform: rotate(1deg);
    top: -20px; /* was -12px: sat over the cap height of the heading */
    box-shadow: 0 0 0 3px #F2F1F0; /* halo in the section colour: reads as a sticker, not a collision */
    left: 50%;
    transform: translate(-50%, -0%);
    z-index: 2;
}

.used_elements_header_area .header_small_sticker_area h6 {
    margin-bottom: 0;
    font-family: "Azeret Mono";
    color: #010101;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 0;
}

.used_elements_header_area h2 {
    color: #010101;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.workdetails_more_images_area {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.workdetails_more_images_area img {
    max-width: 100%;
}

.mt-30 {
    margin-top: 30px;
}

.workdetails_tab_area {
    display: block;
    position: relative;
}

.workdetails_tab_area h3 {
    color: #222;

    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    margin-bottom: 0;
    text-align: center;
    font-size: 24px;
}

/* Work Details Tags Area */
.workdetails_full_tags_area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.details_tag_circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    /* background: linear-gradient(180deg, #10B981 0%, #059669 100%); */
    /* Placeholder gradient */
    display: inline-block;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.details_tag_item {
    padding: 12px 30px;
    border-radius: 50px;
    color: #333;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
    display: inline-block;
    border: 1px solid #DDDDDD;
    white-space: nowrap;
}

/* Responsive adjustment for tags */
@media (max-width: 768px) {
    .workdetails_full_tags_area {
        gap: 8px;
    }

    .details_tag_item {
        padding: 8px 16px;
        font-size: 16px;
    }

    .details_tag_circle {
        width: 36px;
        height: 36px;
    }
}



















.contact_tabs_wrapper {
    position: relative;
    z-index: 2;
    display: block;   /* was a flex row of three columns (finding 25) */
    width: 100%;
}

.contact_form_area {
    position: relative;
    z-index: 1;
}

.contact_form_area::before {
    content: '';
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #C2C1C0;
    z-index: 0;
}

.contact_column {
    position: relative;
    flex: 1;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    border-right: 1px solid #C2C1C0;
    overflow: hidden;
    background-color: transparent;
}

.contact_column:last-child {
    border-right: none;
}

.contact_column.active {
    flex: 2;
}

.contact_tab_header {
    cursor: pointer;
    height: 80px;
    padding: 0 40px;
    border-bottom: none;
    display: flex;
    align-items: center;
    text-align: left;
    white-space: nowrap;
    position: relative;
    z-index: 2;
}

.contact_tab_header h2 {
    color: #5B5954;
    font-weight: 500;
    margin: 0;
    transition: color 0.3s ease;
    text-transform: lowercase;
    font-size: 30px;
}

.contact_tab_header h2.active-text {
    color: #FA543C;
}

.contact_column.active .contact_tab_header {
    background-color: #F2F1F0;
}

.contact_tab_body {
    width: 100%;
    height: 100%;
}

.form-wrapper {
    padding: 60px 40px 120px 40px;
    background-color: transparent;
    min-width: 0;
    max-width: 720px;
}

.form-wrapper h3,
.form-wrapper .heading-as-h3 {
    font-weight: 500;
    margin-bottom: 30px;
    color: #010101;
    font-size: 30px;
}

/* Finding 33: the three panel headings are h2 elements now (they followed the
   page h1 directly, so h3 skipped a level). The base h2 rule uses -0.03em and
   110%, so restate the h3 metrics here to keep the rendering byte-identical:
   measured on live before the change, 30px/36px/-0.3px at 1440 and
   22px/26.4px/-0.22px at 390, i.e. 120% and -0.01em at both widths. */
.form-wrapper .heading-as-h3 {
    line-height: 120%;
    letter-spacing: -0.01em;
    font-style: normal;
}


.contact_form_details_area p {
    display: flex;
    font-size: 20px;
    color: #616161;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    gap: 12px;
}

.contact_form_details_area p:last-child {
    margin-bottom: 50px;
}

.contact-info a {
    color: #ff5e4d;
    text-decoration: none;
    border-bottom: 1px solid #ff5e4d;
}

/* Custom Input Fields */
.custom-input {
    margin-bottom: 30px;
}

.custom-input label {
    font-size: 11px;
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    color: #5B5954;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.custom-input label img {
    width: 12px;
    vertical-align: middle;
    color: #ccc;
}

.custom-input.required label i.icon-req {
    color: #ff5e4d;
}

.custom-input input,
.custom-input textarea,
.custom-input select {
    width: 100%;
    padding: 12px 30px;
    border: 1px solid #e0e0e0;
    background-color: #fafafa;
    font-size: 22px;
    color: #333;
    transition: all 0.3s ease;
    letter-spacing: -0.01em;
}

/* The coral left bar marks a REQUIRED field. It used to be on every field,
   which made it meaningless. */
.custom-input.required input,
.custom-input.required textarea,
.custom-input.required select {
    border-left: 3px solid #ff5e4d;
}

.custom-input input:focus,
.custom-input textarea:focus,
.custom-input select:focus {
    border-color: #ff5e4d;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(255, 94, 77, 0.05);
}

.custom-input input::placeholder,
.custom-input textarea::placeholder,
.custom-input select::placeholder {
    font-size: 22px;
    color: #6f6d69;   /* 4.9:1 on the #fafafa field, was 1.6:1 */
}

.custom-input textarea {
    height: 140px;
    resize: vertical;
}

.custom-input select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 14px;
    padding-right: 40px;
    cursor: pointer;
}

/* ========================================= */
/* MOBILE HEADER REFACTOR (< 992px) */
/* ========================================= */
.mobile-header-bar {
    padding: 15px 12px;
    /* Force internal padding to prevent logo/icons from hitting edges */
    position: relative;
    z-index: 1055;
    /* Higher than collapse background */
    background-color: transparent;
    width: 100%;
}

.custom_nav_container {
    position: relative;
    z-index: 1050;
    width: 100%;
    /* Keep background color behavior stable */
}

.mobile-logo-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1056;
}

.mobile-logo-center img {
    height: 24px;
    /* Control logo size on mobile */
    width: auto;
    transition: filter 0.3s ease;
}

.mobile-email-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    z-index: 1056;
    position: relative;
    transition: filter 0.3s ease;
}

.navbar-toggler {
    z-index: 1056;
    position: relative;
}

.menu-icon {
    width: 20px;
    height: 14px;
    position: relative;
    cursor: pointer;
}

.menu-icon span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    background: #010101;
    /* Current color */
    border-radius: 2px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
}

/* Base lines positioning */
.menu-icon span:nth-child(1) {
    top: 0px;
}

.menu-icon span:nth-child(2) {
    top: 7px;
}

.menu-icon span:nth-child(3) {
    top: 14px;
}

/* Expanded state (animating into an X) - Minimal */
.navbar-toggler[aria-expanded="true"] .menu-icon span:nth-child(1) {
    top: 9px;
    transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .menu-icon span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .menu-icon span:nth-child(3) {
    top: 9px;
    transform: rotate(-45deg);
}

/* Mobile Menu Full Screen Overlay Animation */
@media (max-width: 991px) {

    /* Prevent body scroll when menu is open */
    body.noscroll {
        overflow: hidden !important;
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #121212 !important;
        /* Dark menu background */
        z-index: 1045;
        /* MUST sit below mobile-header-bar (1055) */
        opacity: 0;
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        /* Push content below header so it doesn't overlap logo */
        padding-top: 80px;
    }

    .navbar-collapse.show {
        opacity: 1;
        visibility: visible;
        clip-path: inset(0 0 0% 0);
    }

    .navbar-collapse .navbar-nav {
        margin: 0 !important;
        padding: 0;
        width: 100%;
        align-items: center;
    }

    .navbar-nav .nav-item {
        margin-bottom: 25px;
        overflow: hidden;
        /* Important for SplitType chars to emerge from nowhere */
    }

    .navbar-nav .nav-link {
        padding: 0 !important;
    }

    .navbar-nav .nav-link span {
        font-size: 50px;
        font-weight: 500;
        color: #fff !important;
        /* Force white text */
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    /* Target the state when menu is open: 
       invert logo, email icon, and 'X' so they show on dark bg */
    body.noscroll .mobile-logo-center img,
    body.noscroll .mobile-email-icon img {
        filter: brightness(0) invert(1) !important;
    }

    /* Turn toggle X white when menu is open */
    .navbar-toggler[aria-expanded="true"] .menu-icon span {
        background-color: #fff !important;
    }
}

.custom-input input::placeholder,
.custom-input textarea::placeholder {
    color: #6f6d69;   /* duplicate of the rule above; both set for clarity */
    font-weight: 300;
}

/* File Upload UI */
.custom-file-upload .file-upload-box {
    position: relative;
    width: 100%;
}

.custom-file-upload .file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.custom-file-upload .file-label-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 30px;
    border: 1px solid #e0e0e0;
    border-left: 3px solid #ff5e4d;
    background-color: #fafafa;
    font-size: 22px;
    color: #ccc;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-file-upload .file-label-box:hover,
.custom-file-upload .file-input-hidden:focus+.file-label-box {
    border-color: #ff5e4d;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(255, 94, 77, 0.05);
}

.custom-file-upload #file-chosen-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
    font-weight: inherit;
    text-transform: none;

}

.custom-file-upload .file-browse-btn {
    background-color: transparent;
    color: #ff5e4d;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    padding-left: 15px;
}

.btn-run {
    width: 100%;
    background-color: #ff5e4d;
    color: #fff;
    border: none;
    padding: 18px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: 500;
    text-align: center;
}

.btn-run:hover {
    background-color: #e04a3a;
}

.btn-run i {
    font-size: 10px;
    margin-left: 8px;
    vertical-align: middle;
}

@media (max-width: 991px) {
    .contact_form_area::before {
        display: none;
    }

    .contact_tabs_wrapper {
        flex-direction: column;
        border-top: none;
    }

    .contact_column {
        width: 100%;
        flex: none !important;
        border-right: none;
        border-bottom: 1px solid #C2C1C0;
    }

    .contact_tab_header {
        height: auto;
        padding: 20px;
        text-align: center;
        border-bottom: none !important;
    }

    .contact_column.active .contact_tab_header {
        border-bottom: 1px solid #C2C1C0 !important;
    }

    .form-wrapper {
        padding: 20px;
        min-width: 0;
    }
}

.workdetails_shorten_description_area h2 {
    color: #666666;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin-bottom: 0;
    font-size: 30px;
}



.blog_insider_details_area p img {
    width: 100%;
    max-width: 100%;
    margin: 50px 0;
}

.blog_insider_details_area p iframe {
    margin: 50px 0;
}




/* contact form massage box css */
/* contactMessageBox Styling */
#contactMessageBox {
    display: none;
    margin-top: 25px;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
}

#contactMessageBox.success-msg {
    background-color: #f1faed;
    color: #344429;
    border: 1px solid #8ED462;
    border-left: 4px solid #8ED462;
}

#contactMessageBox.error-msg {
    background-color: #fff0ef;
    color: #ff5e4d;
    border: 1px solid #ff5e4d;
    border-left: 4px solid #ff5e4d;
}

/* projectMessageBox Styling */
#projectMessageBox {
    display: none;
    margin-top: 25px;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
}

#projectMessageBox.success-msg {
    background-color: #f1faed;
    color: #344429;
    border: 1px solid #8ED462;
    border-left: 4px solid #8ED462;
}

#projectMessageBox.error-msg {
    background-color: #fff0ef;
    color: #ff5e4d;
    border: 1px solid #ff5e4d;
    border-left: 4px solid #ff5e4d;
}

/* careerMessageBox Styling */
#careerMessageBox {
    display: none;
    margin-top: 25px;
    padding: 16px 20px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    transition: all 0.3s ease;
}

#careerMessageBox.success-msg {
    background-color: #f1faed;
    color: #344429;
    border: 1px solid #8ED462;
    border-left: 4px solid #8ED462;
}

#careerMessageBox.error-msg {
    background-color: #fff0ef;
    color: #ff5e4d;
    border: 1px solid #ff5e4d;
    border-left: 4px solid #ff5e4d;
}

.header_small_sticker_area span {
    margin-bottom: 0;
    font-family: "Azeret Mono";
    color: #010101;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 100%;
    letter-spacing: 0;
}



























/* new design for comment post area */
.blog_comment_post_area {
    padding-top: 50px;
    padding-bottom: 50px;
}

.blog_comment_post_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog_comment_post_header_left h6,
.blog_comment_post_header_left .heading-as-h6 {
    font-family: 'Azeret Mono', monospace;
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #101010;
}

.user-badge {
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 6px 18px 6px 8px;
    border-radius: 50px;
    border: 1px solid #f0f0f0;
    cursor: default;
}

.user-badge:hover {
    transform: translateY(-2px);
}

.avatar-wrap {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-wrap p {
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #FFFFFF;
}

.user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}


.user-meta span {
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-size: 15px;
    font-weight: 500;
    color: #000;
}

.user-meta a {
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-size: 12px;
    color: #FF0000;
    font-weight: 700;
    text-decoration: none;
    text-transform: capitalize;
    letter-spacing: 0.8px;
    margin-top: 2px;
    text-align: right;
}

.blog_comment_post_write_area {
    display: block;
    position: relative;
}

.blog_comment_review_box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border-radius: 12px;
    margin: 30px auto;
}

.blog_comment_review_avatar {
    width: 48px;
    height: 48px;
    /* background: #8aa0a9; */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog_comment_review_avatar span {
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #FFFFFF;
}

.blog_comment_review_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #ffffff;
    border-radius: 12px;
}

.blog_comment_review_input {
    width: 100%;
    min-height: 90px;
    border: none;
    resize: none;
    background: transparent;
    font-size: 16px;
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-weight: 500;
    color: #555;
}

.blog_comment_review_input::placeholder {
    color: #B6B6B9;
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0;
}

.blog_comment_review_actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.blog_comment_review_actions .blog_comment_review_actions_clear {
    background: none;
    border: none;
    color: #494949;
    cursor: pointer;
    font-family: "Azeret Mono";
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-style: capitalize;
    line-height: 24px;
    letter-spacing: 0%;
}

.blog_comment_review_actions .blog_comment_review_actions_post {
    background: #2BA0FF;
    color: #FFFFFF;
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 17px;
    font-family: "Azeret Mono";
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    font-style: capitalize;
    line-height: 24px;
    letter-spacing: 0%;
}

.blog_comment_review_actions .blog_comment_review_actions_post:hover {
    background: #1f6fd1;
}

.blog_comment_review_actions i {
    font-size: 12px;
}


.comments_list_area {
    display: block;
    position: relative;
}

.comments_header {
    padding-bottom: 50px;
}

.comments_header h6,
.comments_header .heading-as-h6 {
    font-family: 'Azeret Mono';
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #101010;
    margin-bottom: 0;
}

.comment_user_avatar_box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    border-radius: 12px;
    margin-bottom: 50px;
}

.comment_user_avatar {
    width: 100%;
    max-width: 48px;
    height: 48px;
    background: #8aa0a9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment_user_avatar span {
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #FFFFFF;
}

.comment_user_content {
    display: block;
    position: relative;
    background-color: transparent;
}

.comment_user_nam {
    /* margin-top: 10px; */
    margin-bottom: 20px;
}

.comment_user_nam h6,
.comment_user_nam .heading-as-h6 {
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-weight: 500;
    text-transform: lowercase;
    color: #000000;
    font-size: 20px;
    line-height: 130%;
    letter-spacing: 0%;
}

.comment_user_text p {
    font-family: "NewBlackTypeface";
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 140%;
    letter-spacing: 0%;
    color: #494949;
}

.comment_user_post_meta {
    display: flex;
    justify-content: flex-start;
    gap: 30px;
    align-items: center;
    font-size: 14px;
    margin-top: 20px;
}

.comment_date span {
    font-family: "NewBlackTypeface";
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #5B5954;
}

.comment_likes span,
.comment_reply span {
    font-family: "NewBlackTypeface";
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #5B5954;
}

.comment_likes i,
.comment_reply i {
    font-size: 18px;
    color: #5B5954;
    margin-right: 10px;
}

.comments-actions {
    display: block;
    position: relative;
    margin-top: 80px;
}

.comments-actions a {
    font-family: "Azeret Mono";
    font-weight: 300;
    font-style: normal;
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 4%;
    text-transform: uppercase;
    color: #101010;
}
















/* login form css */
.comment-section-wrapper {
    padding: 100px 0;
    background: #fbfbfb;
    position: relative;
    overflow: hidden;
}

/* Background Decorations */
.comment-section-wrapper::before,
.comment-section-wrapper::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    filter: blur(150px);
    z-index: 1;
    border-radius: 50%;
    opacity: 0.15;
    pointer-events: none;
}

.comment-section-wrapper::after {
    background: #111;
    bottom: -200px;
    right: -200px;
}

.comment-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    padding: 50px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 2;
}

.google-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    background: #fff;
    color: #444;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-bottom: 30px;
    cursor: pointer;
}

.google-login-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #ccc;
}

.user-logged-in {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 16px;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.user-info {
    flex-grow: 1;
}

.welcome-text {
    font-size: 12px;
    color: #888;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.user-name {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 0;
}

.logout-link {
    font-size: 13px;
    color: #888;
    text-decoration: underline;
    transition: color 0.3s;
}

.logout-link:hover {
    color: #f39c12;
}

.google-btn-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 25px 0;
    color: #999;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #eee;
}

.divider span {
    padding: 0 15px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
    font-size: 15px;
}

.form-control {
    width: 100%;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1.5px solid #eee;
    background: #fdfdfd;
    font-size: 16px;
    transition: all 0.3s ease;
    color: #333;
}

.form-control:focus:not(:focus-visible) {
    border-color: #111;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.03);
    outline: none;
    background: #fff;
}

textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.submit-btn {
    background: #111;
    color: #fff;
    border: none;
    width: 100%;
    padding: 18px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.submit-btn:hover {
    background: #333;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.rules-card {
    background: #0a0a0a;
    color: #fff;
    border-radius: 24px;
    padding: 40px;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.rules-card::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: #f39c12;
    filter: blur(80px);
    border-radius: 50%;
    opacity: 0.4;
}

.rules-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #fff;
    position: relative;
}

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

.rules-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #ccc;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.5s ease;
}

.rules-item.visible {
    opacity: 1;
    transform: translateX(0);
}

.rules-number {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.page-header-minimal {
    padding: 80px 0 40px;
    text-align: center;
    background: #fff;
}

.page-header-minimal h1 {
    font-size: 42px;
    font-weight: 800;
    color: #111;
    margin-bottom: 10px;
}

.page-header-minimal p {
    color: #666;
    font-size: 18px;
}

.design-notes-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    margin-top: 50px;
    border: 1px dashed #ddd;
}

.design-notes-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
    display: flex;
    align-items: center;
    gap: 10px;
}

.design-notes-content {
    color: #666;
    font-size: 14px;
    line-height: 1.8;
}

.design-notes-content ul {
    padding-left: 20px;
}

.success-accent {
    color: #f39c12;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeInDown 0.8s ease forwards;
}

@media (max-width: 991px) {
    .comment-card {
        padding: 30px;
    }

    .page-header-minimal h1 {
        font-size: 32px;
    }
}

/* Premium Comment Form Styles (Same as Image) */
.premium-comment-area {
    background: #fff;
    padding: 1rem;
    border-radius: 24px;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.comment-input-wrapper {
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0);
    margin-bottom: 25px;
    padding-bottom: 15px;
}

.premium-textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #000;
    font-size: 18px;
    min-height: 80px;
    max-height: 400px;
    resize: none;
    line-height: 1.6;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

.premium-textarea::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

.char-counter {
    position: absolute;
    bottom: 5px;
    right: 0;
    font-size: 12px;
    color: rgba(0, 0, 0);
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
}

.comment-form-footer {
    display: flex;
    justify-content: flex-end;
}

.premium-submit-btn {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 12px 35px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

.premium-submit-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

.premium-submit-btn:active {
    transform: scale(0.98);
}

.premium-submit-btn:disabled {
    background: #444;
    color: #888;
    cursor: not-allowed;
    transform: none;
}





/* comment model  */
#replyModal .modal-content {
    background: #fff;
    color: #000;
    border: none;
    border-radius: 16px;
    overflow: visible;
}

#replyModal .modal-body {
    padding: 0;
    display: flex;
    flex-direction: row;
    height: 700px;
}

.modal-left-panel {
    flex: 1;
    background: #ffffff;
    padding: 24px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
    position: relative;
}

.modal-right-panel {
    flex: 1.35;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.replies-scroll-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 24px;
    scrollbar-width: none;
    scrollbar-color: #726f6f #bab9b9;
}

.replies-scroll-area::-webkit-scrollbar {
    width: 4px;
}

.replies-scroll-area::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 10px;
}

.reply-form-area {
    border-top: 1px solid #CCCCCC;
    padding: 20px 30px;
    background: #ffffff;
}

.modal-user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
}

.modal-parent-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-parent-avatar p {
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #FFFFFF;
}

.modal-user-details {
    flex-grow: 1;
}

.modal-user-details h6 {
    margin: 0;
    color: #000000;
    font-family: "NewBlackTypeface";
    font-weight: 500;
    font-style: normal;
    font-size: 22px;
    line-height: 130%;
    letter-spacing: 0%;
}

.modal-user-details span {
    font-family: "NewBlackTypeface";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #5B5954;
}

.modal-comment-text p {
    font-family: "NewBlackTypeface";
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
    color: #494949;
    margin-top: 5px;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 140%;
    letter-spacing: 0%;
}

.modal-category-tag {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 900;
    text-transform: capitalize;
    box-shadow: 0 4px 10px rgba(252, 196, 25, 0.2);
    margin-left: auto;
}

.news_color {
    background: #FF705D;
    color: #fff;
}

.blog_color {
    background: #8ED462;
    color: #000;
}

.modal-reply-item {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
}

.reply-item-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #585858;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.reply-item-avatar p {
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #FFFFFF;
}

.reply-item-content {
    flex-grow: 1;
    padding-right: 30px;
}

.reply-item-content h6,
.reply-item-content .heading-as-h6 {
    margin: 0;
    font-family: "NewBlackTypeface";
    font-weight: 500;
    font-style: normal;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #111;
}

.reply-item-text {
    color: #494949;
    margin: 6px 0 10px 0;
    font-family: "NewBlackTypeface";
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
}

.reply-item-meta {
    font-size: 13px;
    color: #71767b;
    display: flex;
    align-items: center;
    gap: 30px;
}

.reply-date {
    font-family: "NewBlackTypeface";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #5B5954;
}

.reply-item-meta .reply-link {
    color: #5B5954;
    font-family: "NewBlackTypeface";
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0%;
    cursor: pointer;
}

.reply-item-like {
    color: #5B5954;
    cursor: pointer;
    font-family: "NewBlackTypeface";
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    line-height: 130%;
    letter-spacing: 0%;
}

.reply-item-like i {
    font-size: 14px;
}

.reply-item-like.liked i {
    color: #FF0000;
}

.reply-item-like.liked span {
    color: #5B5954;
}

.reply-item-like:hover i {
    color: #FF0000;
}

.sub-replies-list {
    display: none;
    margin-top: 30px;
}

.parent-reply-btn {
    font-family: "NewBlackTypeface";
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    line-height: 130%;
    letter-spacing: 0%;
    cursor: pointer;
}

.parent-reply-btn i {
    font-size: 18px;
}













/* Modal Stats Row */
.reply-form-area .text-muted {
    transition: color 0.2s;
}

.reply-form-area .text-muted:hover {
    color: #111 !important;
}

.reply-input-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    padding: 12px 0;
}


.current-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.current-user-avatar p {
    font-family: 'NewBlackTypeface';
    font-style: normal;
    font-weight: 500;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #FFFFFF;
}


.reply-input-inner {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #ffffff;
}

.reply-input-inner textarea {
    background: transparent;
    border: none;
    color: #000000;
    flex-grow: 1;
    font-size: 16px;
    resize: none;
    height: 24px;
    padding: 0;
    line-height: 24px;
}

.reply-input-inner textarea::placeholder {
    color: #71767b;
}

.reply-input-inner textarea:focus:not(:focus-visible) {
    outline: none;
}

.reply-post-btn {
    font-family: "NewBlackTypeface";
    background: none;
    border: none;
    color: #000000;
    padding: 0;
    opacity: 0.5;
    transition: opacity 0.3s;
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0%;
    text-align: right;
}

.reply-post-btn:not(:disabled) {
    opacity: 1;
    cursor: pointer;
}

.modal-close-btn {
    position: absolute;
    top: -45px;
    right: 0;
    background: transparent;
    border: none;
    color: #ffffff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    transition: all 0.3s ease;
    cursor: pointer;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    transform: rotate(90deg);
}

.modal-close-btn i {
    font-size: 24px;
}

.tldr-box {
    margin-top: auto;
    color: #71767b;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
    padding-top: 20px;
    border-top: 1px solid #2f3336;
}

.tldr-box strong {
    color: #e7e9ea;
    margin-right: 8px;
}

@media (max-width: 992px) {
    #replyModal .modal-dialog {
        margin: 15px;
        max-width: calc(100% - 30px);
    }

    #replyModal .modal-content {
        border-radius: 12px;
        overflow: hidden;
    }

    #replyModal .modal-body {
        flex-direction: column;
        height: auto;
        max-height: 90vh;
    }

    .modal-left-panel {
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid #eee;
        background: #fdfdfd;
        flex: none;
    }

    .modal-right-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 450px;
    }

    .replies-scroll-area {
        height: 350px;
        padding: 20px;
    }

    .reply-form-area {
        padding: 15px 20px;
        border-top: 1px solid #eee;
    }

    .modal-close-btn {
        top: 10px;
        right: 10px;
        color: #333;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        width: 35px;
        height: 35px;
    }
}

/* Comment Area & Modal Mobile Refinements */
@media (max-width: 768px) {

    .blog_comment_review_box,
    .comment_user_avatar_box {
        gap: 12px;
    }

    .comment_user_nam h6,
.comment_user_nam .heading-as-h6 {
        font-size: 18px;
    }

    .comment_user_text p {
        font-size: 16px;
    }

    .comment_user_post_meta {
        gap: 20px;
    }

    .blog_leftside_info_panel {
        display: none;
    }
}

@media (max-width: 576px) {
    .blog_comment_post_area {
        padding: 30px 0;
    }

    .blog_comment_post_header {
        display: grid;
        align-items: left;
        text-align: center;
        gap: 2px;
    }

    .blog_comment_review_box {
        margin: 20px auto;
        gap: 10px;
    }

    .blog_comment_review_avatar,
    .comment_user_avatar {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .blog_comment_review_content {
        padding: 15px;
    }

    .comment_user_avatar_box {
        margin-bottom: 30px;
        gap: 12px;
    }

    .comment_user_nam h6,
.comment_user_nam .heading-as-h6 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .comment_user_text p {
        font-size: 15px;
    }

    .comment_user_post_meta {
        gap: 15px;
        flex-wrap: wrap;
        margin-top: 15px;
    }

    .comment_date span,
    .comment_likes span,
    .comment_reply span {
        font-size: 13px;
    }

    /* Modal Small Screen Refinement */
    #replyModal .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }

    .modal-left-panel {
        padding: 15px;
    }

    .modal-user-info {
        gap: 10px;
    }

    .modal-user-details h6 {
        font-size: 18px;
    }

    .modal-comment-text p {
        font-size: 16px;
    }

    .replies-scroll-area {
        height: 280px;
        padding: 12px;
    }

    .reply-item-avatar {
        width: 32px;
        height: 32px;
    }

    .reply-item-content h6,
.reply-item-content .heading-as-h6 {
        font-size: 14px;
    }

    .reply-item-text {
        font-size: 14px;
    }

    .reply-input-box {
        padding: 8px 10px;
        gap: 8px;
    }

    .current-user-avatar {
        width: 32px;
        height: 32px;
    }

    .reply-input-inner textarea {
        font-size: 14px;
    }

    .comments-actions {
        margin-top: 40px;
        text-align: center;
    }
}



/* NEW REPLY STYLES */
.reply-to-tag {
    color: #1d9bf0;
    font-weight: 600;
    margin-right: 4px;
}

.view-more-replies,
.hide-replies {
    display: flex;
    align-items: center;
    gap: 16px;
    /* padding-left: 12px; */
    margin-top: 15px;
    cursor: pointer;
    color: #71767b;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s;
    position: relative;
    z-index: 2;
}

.view-more-replies:hover,
.hide-replies:hover {
    color: #1d9bf0;
}

.view-more-replies::before,
.hide-replies::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 1px;
    background: #000;
}

.modal-reply-item {
    position: relative;
}

.reply-item-avatar {
    z-index: 1;
}

/* Footer Message Styles */
.footer_massage p {
    margin-top: 15px;
    font-size: 13px;
    font-family: 'Inter', sans-serif;
    line-height: 1.4;
    margin-bottom: 0;
}

.footer_massage.success p {
    color: #28a745;
}

.footer_massage.error p {
    color: #dc3545;
}

.footer_massage.warning p {
    color: #ffc107;
}

.footer_massage.sending p {
    color: #8a8a8a;
}

/* While the request is in flight the arrow turns and dims, so the disabled
   button reads as "working" rather than "broken". */
.footer_form .submit_btn.is_sending {
    opacity: .45;
    cursor: progress;
}

.footer_form .submit_btn.is_sending img {
    animation: footer_submit_spin 900ms linear infinite;
}

@keyframes footer_submit_spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .footer_form .submit_btn.is_sending img {
        animation: none;
    }
}

.blog_name_area {
    display: flex;
    gap: 40px;
    padding-bottom: 48px;
    margin-bottom: 50px;
    border-bottom: 1px solid #DDDDDD;
}

.blog_show_btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog_show_btn a {
    color: #000000;
    font-size: 20px;
}

.blog_show_title h1,
.blog_show_title h4 {
    font-family: "NewBlackTypeface";
    font-weight: 500;
    font-style: normal;
    font-size: 32px;
    line-height: 130%;
    letter-spacing: 0%;
    color: #111;
}

.comment_filter {
    display: block;
    position: relative;
}

.comment_filter i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
}

.sort_filter {
    border: 1px solid #eaeaea;
    padding: 10px 10px 10px 40px;
    border-radius: 4px;
    background: #fff;
    font-family: "NewBlackTypeface";
    font-weight: 400;
    font-size: 16px;
    font-style: normal;
    color: #494949;
    cursor: pointer;
    appearance: auto;
    line-height: 140%;
    letter-spacing: 0%;
    /* Remove dropdown arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
}

/* ==========================================================================
   Keyboard focus (WCAG 2.4.7). Only focus the browser flags as keyboard-driven
   gets the ring, so mouse and touch behave exactly as before. ":root" gives
   the rule enough weight to beat Bootstrap's own "outline: 0" on :focus.
   ========================================================================== */
:root :focus-visible {
    outline: 2px solid #2B8FFF;
    outline-offset: 3px;
}

:root input:focus-visible,
:root textarea:focus-visible,
:root select:focus-visible {
    outline-offset: 0;
}

/* Menu links live inside overflow-hidden wrappers (the letter-reveal animation),
   so the ring is drawn just inside their box instead of outside it. */
:root .navbar-nav .nav-link:focus-visible {
    outline-offset: -3px;
}

/* Sign-in button in the comments-list header (All comments page). */
.comments_header_login { margin-left: auto; }
@media screen and (max-width: 768px) {
    .comments_header { flex-wrap: wrap; gap: 12px; }
    .comments_header_login { margin-left: 0; width: 100%; }
}

/* Images that carry intrinsic width/height attributes must still scale by CSS width. */
:where(img[width][height]) { height: auto; }


/* ---------------------------------------------------------------------------
   Form error messaging (finding 26). The message is real text under the field,
   announced by role="alert" and tied to the control with aria-describedby,
   instead of a placeholder that vanishes on focus.
--------------------------------------------------------------------------- */
.custom-input .field-error {
    display: none;
    margin: 6px 0 0;
    font-family: "Azeret Mono", monospace;
    font-size: 12px;
    line-height: 1.45;
    color: #C0392B;          /* 4.8:1 on the page background */
}
.custom-input .field-error:not(:empty) {
    display: block;
}
.custom-input input[aria-invalid="true"],
.custom-input textarea[aria-invalid="true"],
.custom-input select[aria-invalid="true"] {
    border-color: #C0392B;
}

/* Honeypot: off-screen for people, still fillable by a bot. Not display:none,
   which many bots skip. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* The error used to BE the placeholder, so .input-error turned the placeholder
   red. The message is now its own element underneath, so keep the placeholder
   readable and let the border carry the error state. */
.custom-input .input-error::placeholder {
    color: #6f6d69;
}
.custom-input .input-error {
    color: #333;
}


/* ---------------------------------------------------------------------------
   Portfolio card: show that it is clickable (finding 21). Hovering anywhere on
   the card lifts the image and underlines the name; keyboard focus on either
   link does the same, so the two are never out of step.
--------------------------------------------------------------------------- */
.work_portfolio_single_image_area img {
    transition: transform .45s cubic-bezier(.22, .61, .36, 1);
    will-change: transform;
}
/* GSAP leaves an inline transform on the image after its reveal, so the hover
   needs !important to win over it. */
.work_portfolio_single_project_area:hover .work_portfolio_single_image_area img,
.work_portfolio_single_project_area:focus-within .work_portfolio_single_image_area img {
    transform: scale(1.02) !important;
}

.work_portfolio_name_link {
    color: inherit;
    text-decoration: none;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}
.work_portfolio_single_project_area:hover .work_portfolio_name_link,
.work_portfolio_single_project_area:focus-within .work_portfolio_name_link {
    text-decoration: underline;
}

/* The active filter, announced with aria-current and shown visually. */
.portfolio_filter_tab_area a[aria-current="true"] {
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
    .work_portfolio_single_image_area img { transition: none; }
    .work_portfolio_single_project_area:hover .work_portfolio_single_image_area img,
    .work_portfolio_single_project_area:focus-within .work_portfolio_single_image_area img { transform: none !important; }
}


/* ---------------------------------------------------------------------------
   Article header and body (finding 23).
--------------------------------------------------------------------------- */
/* The cell under the date was an empty 270px box. */
.news_details_meta_area {
    display: block;
    position: relative;
    padding: 40px;
    border-bottom: 1px solid #C2C1C0;
}
.news_details_meta_area p {
    color: #5B5954;
    font-family: "Azeret Mono";
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
}
.news_details_meta_area p:first-child {
    color: #101010;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

/* The editorial headline, kept under the h1 when it differs from the one the
   listing card shows, so a reader recognises the page they clicked through to.
   The h1 carries a 120px bottom margin in this layout; when a deck is present
   that space moves below the deck so the two read as one block. */
.news_content_title.has_deck h1 {
    margin-bottom: 16px;
}
.news_content_title.has_deck .news_content_deck {
    margin-bottom: 104px;
}
.news_content_deck {
    margin: 14px 0 0;
    font-family: "Azeret Mono";
    font-size: 15px;
    line-height: 155%;
    color: #5B5954;
    max-width: 60ch;
}

@media screen and (max-width: 992px) {
    .news_details_meta_area { padding: 20px 24px; }
    .news_details_meta_area p { font-size: 13px; }
    .news_content_deck { font-size: 14px; margin-top: 10px; }
}


/* ---------------------------------------------------------------------------
   Case study closing block (finding 22): a case study used to end at the tag
   chips, leaving a prospect to find the navigation again.
--------------------------------------------------------------------------- */
.case_study_next_area {
    border-top: 1px solid #C2C1C0;
    padding: 64px 0 84px;
}
.case_study_next_inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.case_study_next_link {
    display: block;
    text-decoration: none;
    color: #010101;
}
.case_study_next_label {
    display: block;
    font-family: "Azeret Mono";
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5B5954;
    margin-bottom: 10px;
}
.case_study_next_name {
    display: block;
    font-family: "NewBlackTypeface", sans-serif;
    font-weight: 500;
    font-size: 34px;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.case_study_next_link:hover .case_study_next_name,
.case_study_next_link:focus-visible .case_study_next_name {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 2px;
}
.case_study_next_actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.case_study_cta,
.case_study_back {
    display: inline-flex;
    align-items: center;
    font-family: "Azeret Mono";
    font-size: 15px;
    line-height: 1;
    padding: 16px 24px;
    text-decoration: none;
    border: 1px solid #FA543C;
    transition: background-color .2s ease, color .2s ease;
}
.case_study_cta { background: #FA543C; color: #fff; }
.case_study_cta:hover, .case_study_cta:focus-visible { background: #010101; border-color: #010101; color: #fff; }
.case_study_back { color: #FA543C; background: transparent; }
.case_study_back:hover, .case_study_back:focus-visible { background: #FA543C; color: #fff; }

@media screen and (max-width: 768px) {
    .case_study_next_area { padding: 44px 0 56px; }
    .case_study_next_inner { flex-direction: column; align-items: stretch; gap: 28px; }
    .case_study_next_name { font-size: 26px; }
    .case_study_cta, .case_study_back { justify-content: center; flex: 1; }
}


/* ---------------------------------------------------------------------------
   Contact tabs (finding 25). Three labels in one full-width bar with a single
   panel below, instead of three columns where two stood empty and, on a phone,
   pushed "start a project" below the whole contact form.
--------------------------------------------------------------------------- */
.contact_tab_list {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    border-bottom: 1px solid #C2C1C0;
}
.contact_tab_btn {
    appearance: none;
    background: none;
    border: 0;
    border-right: 1px solid #C2C1C0;
    height: 80px;
    padding: 0 40px;
    font-family: "NewBlackTypeface", sans-serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    text-transform: lowercase;
    color: #5B5954;
    cursor: pointer;
    position: relative;
    transition: color .25s ease;
}
.contact_tab_btn:last-child { border-right: 0; }
.contact_tab_btn:hover { color: #010101; }
.contact_tab_btn.active { color: #010101; }
.contact_tab_btn.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: #FA543C;
}
.contact_tab_btn:focus-visible {
    outline: 2px solid #2B8FFF;
    outline-offset: -4px;
}
.contact_tab_panels {
    position: relative;
    width: 100%;
}

@media screen and (max-width: 991px) {
    .contact_tab_list {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .contact_tab_list::-webkit-scrollbar { display: none; }
    .contact_tab_btn {
        height: 62px;
        padding: 0 20px;
        font-size: 20px;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    .form-wrapper { padding: 36px 20px 72px; max-width: none; }
}

/* On a small phone all three labels must be visible at once: a clipped third
   tab is the same problem as a hidden one. */
@media screen and (max-width: 480px) {
    .contact_tab_btn {
        height: 56px;
        padding: 0 12px;
        font-size: 16px;
        flex: 1 1 auto;
    }
}


/* reCAPTCHA tickbox under the forms. The widget is a fixed-size Google iframe;
   this only gives it room and lets it shrink on narrow phones. */
.recaptcha-group {
    margin-bottom: 25px;
}
.recaptcha-group .g-recaptcha {
    display: inline-block;
    min-height: 78px;
}
.recaptcha-group .field-error {
    margin-top: 8px;
}
@media screen and (max-width: 360px) {
    /* 304px is the widget's fixed width; scale it rather than let it overflow. */
    .recaptcha-group .g-recaptcha {
        transform: scale(0.92);
        transform-origin: 0 0;
    }
}


/* Heading levels were corrected for screen readers (findings 32 and 33).
   .heading-as-h6 keeps the original h6 appearance on the new tag so nothing
   moves visually. */
.heading-as-h6 {
    font-family: 'Azeret Mono', monospace;
    font-weight: 300;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0.04em;
    margin: 0;
    color: inherit;
}


/* Finding 37: #86868B measured 3.2:1 on the page ground, under the 4.5:1
   minimum for body text. Replaced with ink-soft #5B5954 (6.2:1). Same family,
   same role, just readable. */


/* ---------------------------------------------------------------------------
   Finding 35: touch targets below 24x24 (WCAG 2.5.8). The hit area is grown
   with an absolutely positioned pseudo-element, so nothing moves and nothing
   looks different: only the region that responds to a tap gets bigger.
--------------------------------------------------------------------------- */
.footer_social_links ul li a,
.blog_comment_all_btn a,
.show_all_comment a {
    position: relative;
}
/* .footer_form .submit_btn is deliberately NOT in the list above: it already
   carries position:absolute with right:10px to sit at the end of the field, and
   this rule was overriding that and dropping the arrow into the flow, below and
   left of the input. Being absolute, it is already a containing block for its
   own ::after, so the hit area below works without any change here. */
.footer_social_links ul li a::after,
.blog_comment_all_btn a::after,
.show_all_comment a::after,
.footer_form .submit_btn::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    min-height: 24px;
    min-width: 24px;
    /* purely a hit area */
    background: transparent;
    pointer-events: auto;
}
/* The newsletter arrow button is only 13px wide; widen its hit area sideways
   from the centre so the icon stays exactly where it is. */
.footer_form .submit_btn::after {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 28px;
}


/* =====================================================================
   Service pages (services.php + service.php), added 3 Sep 2026.
   Every section reuses a component that already exists on Home, About,
   Portfolio or a case study. The rules here do two things only:
   (a) widen a few existing selectors to the heading levels these pages
       need (an h3 inside a story card, an h2 inside a principle card), and
   (b) add the handful of new classes the pages introduce.
   Nothing here changes how any existing page renders.
   ===================================================================== */

/* (a) heading-level widening: same metrics as the rules they extend */
.bottom_story .story_title {
    color: #010101;
    font-size: 54px;              /* the h2 size this replaces */
    font-style: normal;
    font-weight: 600;
    line-height: 80%;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin-top: 30px;
    margin-bottom: 150px;
}

.services_grid .principle_title {
    font-size: 38px;              /* fits "Web & App Design" on one line in the
                                     48% column; the Home cards' 42px did not */
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}

.work_portfolio_company_name_data .proof_project_name {
    color: #010101;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    margin-bottom: 0;
    font-size: 24px;
    letter-spacing: -0.03em;
}

/* (b) hero: the mono line under the big header */
.service_hero_deck {
    padding-top: 28px;
}

/* (b) intro panel: Home's principles panel used as a static two-column block */
.service_intro .principle_bg_area {
    padding-bottom: 80px;
}

.service_intro .home_second_principles_area h2 {
    margin-bottom: 40px;
}

.service_intro .home_second_principles_area p {
    margin-bottom: 20px;
    max-width: 60ch;
}

.service_intro .home_second_principles_area p:last-child {
    margin-bottom: 0;
}

/* (b) hub lede under the centred header */
.service_lede p {
    color: #666666;
    font-size: 30px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.01em;
    text-align: center;
    margin: 40px auto 0;
    max-width: 900px;
}

/* (b) hub grid: the Home principle cards laid out side by side.
   On Home they are absolutely stacked and scrubbed; here each is a link in
   its own column, so they sit in flow and stretch to the row height. */
.services_grid .col-lg-6,
.services_grid .col-lg-4 {
    display: flex;
    margin-bottom: 30px;
}

.services_grid .principle_scrolling_cards_area {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
    text-decoration: none;
    transition: transform 0.5s ease;
}

.services_grid .principle_scrolling_cards_area:hover,
.services_grid .principle_scrolling_cards_area:focus-visible {
    transform: translateY(-10px);
}

.services_grid .principle_header_content_area {
    padding: 60px 0 32px 0;
}

.services_grid .principle_description_area {
    flex: 1 1 auto;
}

.service_card_num {
    display: block;
    font-family: "Azeret Mono";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

.service_card_arrow {
    width: 28px;
    transition: transform 0.35s ease;
}

.services_grid .principle_scrolling_cards_area:hover .service_card_arrow,
.services_grid .principle_scrolling_cards_area:focus-visible .service_card_arrow {
    transform: translate(4px, -4px);
}

.service_card_chips {
    margin-top: 32px;
}

/* two more card colours for the fourth and fifth service; the first three
   reuse Home's white / green / coral cards exactly */
.sky_card {
    background-color: #2BA0FF;
}

.ink_card {
    background-color: #121212;
}

/* per-card ink: white on the coloured cards, blue on the white card,
   paper on the ink card. Mirrors the Home rules for the three it reuses. */
.services_grid .guesswork_card .principle_title,
.services_grid .guesswork_card .service_card_num {
    color: #2BA0FF;
}

.services_grid .path_card .principle_title,
.services_grid .path_card .service_card_num,
.services_grid .reach_card .principle_title,
.services_grid .reach_card .service_card_num,
.services_grid .sky_card .principle_title,
.services_grid .sky_card .service_card_num {
    color: #ffffff;
}

.services_grid .ink_card .principle_title,
.services_grid .ink_card .service_card_num {
    color: #F2F1F0;
}

.sky_card .principle_description_area p {
    color: #ffffff;
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.ink_card .principle_description_area p {
    color: rgba(242, 241, 240, 0.85);
    font-style: normal;
    font-weight: 300;
    line-height: 130%;
    letter-spacing: -0.01em;
}

.services_grid .path_card .service_card_arrow,
.services_grid .reach_card .service_card_arrow,
.services_grid .sky_card .service_card_arrow,
.services_grid .ink_card .service_card_arrow {
    filter: brightness(0) invert(1);
}

.services_grid .guesswork_card .service_card_arrow {
    filter: brightness(0) saturate(100%) invert(52%) sepia(85%) saturate(2400%) hue-rotate(190deg) brightness(101%) contrast(101%);
}

/* chips inside the cards: Portfolio's tag, recoloured to the card */
.services_grid .service_card .work_portfolio_single_tag {
    border-color: rgba(255, 255, 255, 0.45);
}

.services_grid .service_card .work_portfolio_single_tag p {
    color: #ffffff;
}

.services_grid .guesswork_card .work_portfolio_single_tag {
    border-color: rgba(43, 160, 255, 0.45);
}

.services_grid .guesswork_card .work_portfolio_single_tag p {
    color: #2BA0FF;
}

.services_grid .ink_card .work_portfolio_single_tag {
    border-color: rgba(242, 241, 240, 0.35);
}

.services_grid .ink_card .work_portfolio_single_tag p {
    color: #F2F1F0;
}

/* (b) proof: Portfolio's cards under Home's centred header */
.service_proof_grid {
    padding-top: 80px;
}

.service_proof_grid .col-lg-6 {
    margin-bottom: 40px;
}

.service_proof_actions {
    display: flex;
    justify-content: center;
    padding: 20px 0 40px;
}

.service_proof_actions .case_study_next_actions {
    justify-content: center;
}

/* (b) questions: an accordion in the site's own type */
.service_faq_header {
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 60px;
}

.service_faq_header .header_small_sticker_area {
    display: inline-block;
    position: absolute;
    background-color: #8ED462;
    padding: 0 6px;
    top: -20px;
    box-shadow: 0 0 0 3px #F2F1F0;
    left: 50%;
    transform: translate(-50%, 0) rotate(1deg);
    z-index: 2;
}

.service_faq_header h2 {
    color: #010101;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.service_faq_item {
    border-top: 1px solid #C2C1C0;
}

.service_faq_item:last-child {
    border-bottom: 1px solid #C2C1C0;
}

.service_faq_item h3 {
    margin: 0;
}

.service_faq_q {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px 0;
    font-family: "NewBlackTypeface", sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: #010101;
    cursor: pointer;
    transition: color 0.25s ease;
}

.service_faq_q:hover {
    color: #FA543C;
}

.service_faq_q:focus-visible {
    outline: 2px solid #2B8FFF;
    outline-offset: -2px;
}

.service_faq_plus {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

.service_faq_plus::before,
.service_faq_plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.service_faq_plus::before {
    width: 18px;
    height: 2px;
}

.service_faq_plus::after {
    width: 2px;
    height: 18px;
}

.service_faq_q[aria-expanded="true"] .service_faq_plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.service_faq_a {
    overflow: hidden;
}

.service_faq_a[hidden] {
    display: none;
}

.service_faq_a p {
    color: #5B5954;
    font-size: 18px;
    line-height: 150%;
    max-width: 68ch;
    margin: 0;
    padding: 0 0 32px 0;
}


/* ---------------------------------------------------------------------------
   Desktop nav with five items (Services added 3 Sep 2026). The links carried
   75px of padding on each side, sized for two items per side of the logo;
   with three on the left the group ran under the centred logo at every
   desktop width. Same rhythm, tighter: 40px, and 22px on small desktops.
   Mobile (<= 992px) is the full-screen menu and is untouched.
--------------------------------------------------------------------------- */
@media screen and (min-width: 993px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 40px;
        padding-right: 40px;
    }

    .navbar .navbar-nav.me-auto {
        padding-right: 40px;
    }

    .navbar .navbar-nav.ms-auto {
        padding-left: 40px;
    }
}

@media screen and (min-width: 993px) and (max-width: 1199px) {
    .navbar .navbar-nav .nav-link {
        padding-left: 14px;
        padding-right: 14px;
    }

    .custom_nav_container {
        padding: 0 60px;
    }

    .desktop-logo-center .logo-img {
        width: 200px;
    }
}


/* =====================================================================
   Service pages, second pass (3 Sep 2026): the illustrated sections.
   Home's headline stickers and whiteboard cards, drawn as inline SVG;
   the Contact tab bar with a drawing per panel; the About playground with
   deliverables as pills; the footer marquee mid-page. New classes only.
   ===================================================================== */

/* hero: the amber pill sticker is wider than Home's sticker_1 */
.home_intro_header_text_area .art_sticker {
    width: 118px;
    right: -72px;
    top: -44px;
    overflow: visible;
}

.service_hero_deck {
    text-align: center;
    margin-top: -6px;
    position: relative;
    z-index: 2;
}

.service_hero_deck span {
    font-family: "Azeret Mono", monospace;
    font-size: 12px;
    font-weight: 400;
    color: #616161;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 160%;
}

/* whiteboard cards: the drawing fills the polaroid, with the Home drop shadow */
.service_board .art_board {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.13));
}

.art_label {
    display: inline-block;
    font-family: "Azeret Mono", monospace;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
    background-color: var(--c, #3CB371);
    padding: 8px 14px 9px;
    letter-spacing: 0.02em;
    transform: rotate(-4deg);
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
    white-space: nowrap;
}

.design_whiteboard_under_icons .art_label {
    transform: rotate(2deg);
}

.coding_whiteboard_under_icons .art_label {
    transform: rotate(5deg);
}

/* centred section header: sticker + uppercase h2 (the About "difference" header, reusable) */
.service_section_header {
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 60px;
}

.service_section_header .header_small_sticker_area {
    display: inline-block;
    position: absolute;
    background-color: #8ED462;
    padding: 0 6px;
    top: -20px;
    box-shadow: 0 0 0 3px #F2F1F0;
    left: 50%;
    transform: translate(-50%, 0) rotate(1deg);
    z-index: 2;
}

.service_section_header h2 {
    color: #010101;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

/* tabs: the Contact bar, centred, with copy on the left and a tilted drawing on the right */
.service_tabs {
    margin-top: 0;
}

.service_tabs .contact_tab_list {
    justify-content: center;
    border-top: 1px solid #C2C1C0;
}

.service_tab_panel {
    padding: 64px 0 0 0;
}

.service_tab_copy h3 {
    color: #010101;
    font-size: 30px;
    font-weight: 500;
    line-height: 120%;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
}

.service_tab_copy p {
    color: #5B5954;
    font-size: 18px;
    line-height: 150%;
    max-width: 56ch;
    margin-bottom: 26px;
}

.service_tab_list {
    padding: 0;
    margin: 0;
}

.service_tab_list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: #010101;
    font-size: 17px;
    line-height: 130%;
    margin-bottom: 14px;
}

.service_tab_list li:last-child {
    margin-bottom: 0;
}

.service_tab_list li img {
    width: 20px;
    flex: 0 0 20px;
    margin-top: 2px;
}

.service_tab_art .art_board {
    display: block;
    width: 100%;
    height: auto;
    transform: rotate(3deg);
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.14));
}

/* playground: About's dark section, plus a button to drop the pills again */
.service_playground_section .drag_drop_elements_header_area p {
    max-width: 46ch;
    margin: 0 auto 26px;
}

.service_shake_btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #F2F1F0;
    color: #F2F1F0;
    font-family: "Azeret Mono", monospace;
    font-size: 14px;
    line-height: 1;
    padding: 14px 22px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.service_shake_btn:hover,
.service_shake_btn:focus-visible {
    background-color: #F2F1F0;
    color: #121212;
}

.service_playground canvas {
    display: block;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* tools marquee mid-page: the footer band, framed top and bottom */
.service_marquee .marquee_footer {
    border-top: 1px solid #C2C1C0;
    border-bottom: 1px solid #2A2A2A;
}


/* The hub uses the inner-page header (Work / Newsroom / Contact), so its mono
   deck line sits under the headline block rather than tucked up against a
   Home-style hero. Detail pages keep the negative margin above. */
.service_hero_deck_sub {
    margin-top: 0;
    padding-top: 26px;
}


/* ---------------------------------------------------------------------------
   Hub cards: each carries a small drawing of its service, pinned into the
   bottom-right corner like a polaroid and bleeding off the edge. It is the
   same illustration that opens that service's own page.
--------------------------------------------------------------------------- */
.services_grid .service_card {
    overflow: hidden;                 /* the thumbnail bleeds past the corner */
    padding-bottom: 200px;            /* room reserved so chips never collide */
}

.service_card_art {
    position: absolute;
    right: -34px;
    bottom: -46px;
    width: 264px;
    max-width: 76%;
    pointer-events: none;
    transform: rotate(-5deg);
    transform-origin: center bottom;
    transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);
}

.service_card_art .art_board {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.18));
}

/* the polaroid frame is white, so on the white SEO card it needs an edge */
.service_card_art .art_board > rect {
    stroke: rgba(1, 1, 1, 0.10);
    stroke-width: 2;
}

.services_grid .service_card:hover .service_card_art,
.services_grid .service_card:focus-visible .service_card_art {
    transform: rotate(-1.5deg) translateY(-10px) scale(1.04);
}


/* ---------------------------------------------------------------------------
   Hub cards, balance pass. Three changes:
   1. the number and the arrow share one top bar, so the card opens on a line
      rather than on a lone arrow with dead space beneath it;
   2. the text measure is capped, so a 630px card does not run 90 characters
      wide while a 410px one wraps to four lines;
   3. above 1200px the two wide cards put their text and their drawing side by
      side, which fills the corner the stacked version left empty.
--------------------------------------------------------------------------- */
.services_grid .principle_icon_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    text-align: left;
}

.service_card_num {
    margin-bottom: 0;
    opacity: 0.75;                    /* the title leads, the number follows */
}

.services_grid .principle_header_content_area {
    padding: 30px 0 16px 0;
}

.services_grid .principle_title {
    text-wrap: balance;
}

.services_grid .principle_description_area p {
    max-width: 42ch;
}

.service_card_chips {
    margin-top: 30px;
}

/* Wide cards (the first two) at desktop: text left, drawing right */
@media screen and (min-width: 1200px) {
    .services_grid .col-lg-6 .service_card {
        padding-bottom: 44px;
        min-height: 400px;
    }

    /* 48%, not 54%: the drawing is tilted, so its bounding box reaches ~10px
       further left than its width suggests, and at 1280 a 54% column met it. */
    .services_grid .col-lg-6 .principle_header_content_area,
    .services_grid .col-lg-6 .principle_description_area,
    .services_grid .col-lg-6 .service_card_chips {
        max-width: 52%;
    }

    .services_grid .col-lg-6 .service_card_art {
        width: 262px;
        right: -30px;
        bottom: -38px;
    }
}


/* Closes the hub's header block with the same hairline Work and Newsroom use
   under theirs, so the two vertical rules meet a line instead of stopping in
   mid-air. Same 1px #C2C1C0 as .work_portfolio_area. */
.service_hub_intro {
    border-top: 1px solid #C2C1C0;
}


/* ---------------------------------------------------------------------------
   Before / after slider. The detail pages' own interaction: the hub keeps the
   physics playground, and here you drag between the state a client arrives
   with and the one they leave with.
--------------------------------------------------------------------------- */
.compare_widget {
    position: relative;
    width: 100%;
    aspect-ratio: 480 / 400;          /* the board's own proportion */
    border-radius: 14px;
    overflow: hidden;
    margin: 20px auto 0;
    cursor: ew-resize;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
    touch-action: pan-y;              /* a vertical swipe still scrolls */
    user-select: none;
}

.compare_pane {
    position: absolute;
    inset: 0;
}

.compare_pane .art_board {
    display: block;
    width: 100%;
    height: 100%;
}

.compare_before {
    clip-path: inset(0 50% 0 0);
}

.compare_tag {
    position: absolute;
    bottom: 18px;
    font-family: "Azeret Mono", monospace;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.02em;
    padding: 9px 14px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.compare_tag_before {
    left: 18px;
    background: #121212;
    color: #F2F1F0;
}

.compare_tag_after {
    right: 18px;
    background: #8ED462;
    color: #101010;
}

.compare_handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 48px;                      /* a generous grab strip, 24px min target */
    margin-left: -24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ew-resize;
    touch-action: none;               /* this element alone owns the drag */
    background: none;
    border: 0;
}

.compare_handle::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background: #F2F1F0;
}

.compare_grip {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #F2F1F0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.25s ease;
}

.compare_grip::before,
.compare_grip::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-top: -6px;
}

.compare_grip::before {
    left: 12px;
    border-right: 7px solid #121212;
}

.compare_grip::after {
    right: 12px;
    border-left: 7px solid #121212;
}

.compare_widget:hover .compare_grip,
.compare_widget.is-dragging .compare_grip {
    transform: scale(1.08);
}

.compare_handle:focus-visible {
    outline: none;
}

.compare_handle:focus-visible .compare_grip {
    outline: 3px solid #2B8FFF;
    outline-offset: 3px;
}

/* the deliverables, as chips under the slider */
.compare_deliverables {
    text-align: center;
    padding-top: 54px;
}

.compare_deliverables_label {
    font-family: "Azeret Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #BBB;
    margin-bottom: 22px;
}

.compare_chips {
    justify-content: center;
}

.compare_chips .work_portfolio_single_tag {
    border-color: rgba(242, 241, 240, 0.28);
}

.compare_chips .work_portfolio_single_tag p {
    color: #F2F1F0;
}

.service_compare_section .drag_drop_elements_header_area p {
    max-width: 56ch;
    margin: 0 auto;
}


/* The compare widget follows the board's 480:400 proportion, so on a wide
   container it would grow past a metre tall. Cap it and centre it. */
.compare_widget {
    max-width: 880px;
}

/* The playground is a shorter box than the About one: 30 bodies settle into a
   single layer at the floor, and a full 100vh left a lake of empty black
   between the button and the pile. */
.service_playground_section {
    height: 76vh;
    min-height: 620px;
}


/* ---------------------------------------------------------------------------
   Responsive UX pass, 3 Sep 2026.
   The mobile menu button draws a 20x14 icon, which is well under the 24x24
   minimum (WCAG 2.5.8) and awkward to hit on a phone. Same treatment as
   finding 35: an invisible 44px hit area, the icon does not move.
--------------------------------------------------------------------------- */
.navbar-toggler::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    background: transparent;
}


/* =====================================================================
   Case study pages, richer pass (3 Sep 2026): a facts strip, a gallery
   that opens full size, a sticky project bar, a next-project preview and
   a "more work" grid. New classes only; the existing sections are untouched.
   ===================================================================== */

/* --- at a glance ------------------------------------------------------ */
.case_facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 26px 32px;
    margin: 0 0 56px;
    padding: 26px 0;
    border-top: 1px solid #C2C1C0;
    border-bottom: 1px solid #C2C1C0;
}

.case_fact dt {
    font-family: "Azeret Mono", monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5B5954;
    margin-bottom: 10px;
}

.case_fact dd {
    margin: 0;
    font-size: 17px;
    line-height: 1.35;
    color: #010101;
    letter-spacing: -0.01em;
}

.case_fact dd a {
    color: #010101;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: #C2C1C0;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.case_fact dd a:hover,
.case_fact dd a:focus-visible {
    color: #FA543C;
    text-decoration-color: #FA543C;
}

.case_fact_sep {
    color: #C2C1C0;
}

.case_fact_dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 9px;
    vertical-align: 1px;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

/* --- gallery: each screen opens full size ----------------------------- */
.case_gallery_btn {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.case_gallery_btn img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s cubic-bezier(.22, .61, .36, 1);
}

.case_gallery_btn:hover img,
.case_gallery_btn:focus-visible img {
    transform: scale(1.03);
}

.case_gallery_cue {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 22px;
    background: rgba(18, 18, 18, 0.86);
    color: #F2F1F0;
    font-family: "Azeret Mono", monospace;
    font-size: 12px;
    line-height: 1;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.case_gallery_btn:hover .case_gallery_cue,
.case_gallery_btn:focus-visible .case_gallery_cue {
    opacity: 1;
    transform: translateY(0);
}

/* --- lightbox --------------------------------------------------------- */
.case_lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 10, 10, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 24px 96px;
    opacity: 0;
}

.case_lightbox[hidden] {
    display: none;
}

.case_lb_figure {
    margin: 0;
    max-width: 1180px;
    width: 100%;
    text-align: center;
}

.case_lb_img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 190px);
    width: auto;
    margin: 0 auto;
    border-radius: 10px;
}

.case_lb_caption {
    margin-top: 20px;
    font-family: "Azeret Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #B9B6B0;
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
}

.case_lb_count {
    color: #F2F1F0;
}

.case_lb_close,
.case_lb_prev,
.case_lb_next {
    position: absolute;
    appearance: none;
    background: rgba(242, 241, 240, 0.1);
    border: 1px solid rgba(242, 241, 240, 0.28);
    color: #F2F1F0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.case_lb_close:hover,
.case_lb_prev:hover,
.case_lb_next:hover,
.case_lb_close:focus-visible,
.case_lb_prev:focus-visible,
.case_lb_next:focus-visible {
    background: #F2F1F0;
    border-color: #F2F1F0;
    color: #121212;
}

.case_lb_close {
    top: 22px;
    right: 22px;
    font-size: 30px;
}

.case_lb_prev {
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
}

.case_lb_next {
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
}

/* --- sticky project bar ---------------------------------------------- */
.case_sticky_bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1040;
    background: rgba(242, 241, 240, 0.94);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid #C2C1C0;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(.22, .61, .36, 1), opacity 0.25s ease;
}

.case_sticky_bar.is-shown {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.case_sticky_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 14px;
    padding-bottom: 14px;
}

.case_sticky_name {
    font-family: "NewBlackTypeface", sans-serif;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #010101;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case_sticky_cta {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-family: "Azeret Mono", monospace;
    font-size: 13px;
    line-height: 1;
    padding: 12px 20px;
    text-decoration: none;
    color: #FA543C;
    border: 1px solid #FA543C;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.case_sticky_cta:hover,
.case_sticky_cta:focus-visible {
    background: #FA543C;
    color: #fff;
}

/* --- next project preview -------------------------------------------- */
.case_study_next_link.has_preview {
    position: relative;
}

.case_next_preview {
    position: absolute;
    left: calc(100% + 26px);
    top: 50%;
    width: 210px;
    transform: translateY(-50%) scale(0.94) rotate(-3deg);
    opacity: 0;
    pointer-events: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(.22, .61, .36, 1);
}

.case_next_preview img {
    display: block;
    width: 100%;
    height: auto;
}

.case_study_next_link.has_preview:hover .case_next_preview,
.case_study_next_link.has_preview:focus-visible .case_next_preview {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
}

/* --- more work grid --------------------------------------------------- */
.case_more_grid {
    padding-top: 20px;
}

.case_more_grid .col-lg-4 {
    margin-bottom: 40px;
}

.case_more_area .work_portfolio_more_details_area {
    padding-top: 16px;
}


/* --- the case study story: brief, build, detail ----------------------- */
.case_story_section {
    padding: 20px 0 90px;
}

.case_story {
    list-style: none;
    counter-reset: none;
    margin: 0;
    padding: 0;
}

.case_story_block {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 0 24px;
    padding: 44px 0;
    border-top: 1px solid #C2C1C0;
    margin: 0;
}

.case_story_block:first-child {
    border-top: 0;
    padding-top: 0;
}

.case_story_num {
    font-family: "Azeret Mono", monospace;
    font-size: 26px;
    font-weight: 300;
    line-height: 1;
    color: #FA543C;
    padding-top: 6px;
}

.case_story_h {
    color: #010101;
    font-size: 32px;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
}

.case_story_body p {
    color: #3F3D39;
    font-size: 19px;
    line-height: 158%;
    letter-spacing: -0.01em;
    max-width: 66ch;
    margin: 0 0 18px;
}

.case_story_body p:last-child {
    margin-bottom: 0;
}

/* --- what it does ----------------------------------------------------- */
.case_highlights {
    margin-top: 54px;
    padding: 36px 40px 40px;
    background: #EBE9E4;
    border-radius: 16px;
}

.case_highlights_label {
    font-family: "Azeret Mono", monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5B5954;
    margin: 0 0 22px;
}

.case_highlights ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 40px;
    padding: 0;
    margin: 0;
}

.case_highlights li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: #010101;
    font-size: 17px;
    line-height: 140%;
    margin: 0;
}

.case_tick {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    background: #8ED462;
    position: relative;
}

.case_tick::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 8px;
    height: 4px;
    border-left: 2px solid #101010;
    border-bottom: 2px solid #101010;
    transform: rotate(-45deg);
}


/* ---------------------------------------------------------------------------
   Work grid at fifteen projects (3 Sep 2026). The cards carried only a logo
   and a name, which stopped scanning once the grid got long, and the type
   filter barely divided anything because nearly every site was both design
   and development. Sector divides it, and the meta line says what each is.
--------------------------------------------------------------------------- */
.work_portfolio_name_wrap {
    display: block;
    min-width: 0;
}

.work_card_meta {
    font-family: "Azeret Mono", monospace;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #5B5954;
    margin: 6px 0 0;
}

.work_card_dot {
    color: #C2C1C0;
    padding: 0 4px;
}

.filter_count {
    font-size: 12px;
    opacity: 0.55;
    margin-left: 4px;
}

/* the filter row now holds six items; let it wrap rather than overflow */
.portfolio_filter_tab_area {
    flex-wrap: wrap;
    row-gap: 10px;
}


/* The responsive showcase (three phones) takes the full gallery row and gets a
   label, so it reads as proof of the mobile build rather than another screen. */
.case_gallery_wide {
    margin-top: 8px;
}

.case_gallery_wide .case_gallery_btn::before {
    content: "Responsive build";
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 2;
    font-family: "Azeret Mono", monospace;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #F2F1F0;
    background: rgba(18, 18, 18, 0.82);
    padding: 9px 14px;
    border-radius: 20px;
}


/* ---------------------------------------------------------------------------
   Comments, restyled into the site's own language (3 Sep 2026).

   The block arrived looking like a different product: a #2BA0FF Post button,
   Google's stock avatar palette, and rounded white cards, none of which appear
   anywhere else on asketstudio.in. Everything below moves it onto the same
   off-white ground, square edges, mono labels and #FA543C accent the case
   studies and service pages use.
   --------------------------------------------------------------------------- */

/* --- signed-out: an invitation, not a form that throws the text away ------- */
.comment_signin_prompt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin: 28px 0 0;
    padding: 28px 30px;
    background: #fff;
    border: 1px solid #DDDDDD;
}

.comment_signin_copy {
    margin: 0;
    max-width: 56ch;
    color: #5B5954;
    font-size: 16px;
    line-height: 155%;
}

/* --- the box ------------------------------------------------------------- */
.blog_comment_review_content {
    border: 1px solid #DDDDDD;
    border-radius: 0;
}

.blog_comment_review_input {
    min-height: 84px;
    color: #101010;
}

.blog_comment_review_actions {
    gap: 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #EFEFEF;
}

/* Counter sits first and pushes the buttons right. */
.comment_counter {
    margin-right: auto;
    font-family: "Azeret Mono", monospace;
    font-size: 13px;
    letter-spacing: .02em;
    color: #8A8A8A;
    font-variant-numeric: tabular-nums;
}

.comment_counter.is_near_limit {
    color: #FA543C;
}

.blog_comment_review_actions .blog_comment_review_actions_clear {
    padding: 8px 4px;
    font-size: 15px;
    text-transform: none;
}

.blog_comment_review_actions .blog_comment_review_actions_clear:hover {
    color: #010101;
    text-decoration: underline;
}

/* The Post button now matches .case_study_cta rather than a stock blue. */
.blog_comment_review_actions .blog_comment_review_actions_post {
    background: #FA543C;
    border: 1px solid #FA543C;
    border-radius: 0;
    padding: 14px 22px;
    gap: 10px;
    font-size: 15px;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.blog_comment_review_actions .blog_comment_review_actions_post:hover:not(:disabled),
.blog_comment_review_actions .blog_comment_review_actions_post:focus-visible:not(:disabled) {
    background: #010101;
    border-color: #010101;
}

.blog_comment_review_actions .blog_comment_review_actions_post:disabled {
    background: #E4E3E1;
    border-color: #E4E3E1;
    color: #9A9A9A;
    cursor: not-allowed;
}

.comment_form_status {
    margin: 12px 0 0;
    min-height: 1em;
    font-family: "Azeret Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #5B5954;
}

.comment_form_status.is_error {
    color: #C6402A;
}

.comment_form_status.is_ok {
    color: #3F7D3B;
}

/* --- the list ------------------------------------------------------------- */
.comments_empty {
    margin: 0;
    padding: 34px 0 6px;
    color: #8A8A8A;
    font-size: 17px;
    line-height: 150%;
}

.comment_date time {
    font-family: "Azeret Mono", monospace;
    font-size: 14px;
    color: #8A8A8A;
    cursor: help;
}

/* Liked state was set with inline styles from JS; the class carries it now so
   the two cannot disagree after a failed request. */
.comment_likes,
.comment_reply {
    border-radius: 0;
    transition: color .2s ease;
}

.comment_likes:hover,
.comment_reply:hover {
    color: #010101;
}

.comment_likes.is_liked i,
.comment_likes.is_liked span {
    color: #FA543C;
}

.comments-actions a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #C2C1C0;
    text-decoration: none;
    text-transform: uppercase;
    transition: border-color .2s ease, color .2s ease;
}

.comments-actions a:hover,
.comments-actions a:focus-visible {
    color: #FA543C;
    border-color: #FA543C;
}

@media screen and (max-width: 768px) {

    .comment_signin_prompt {
        padding: 22px 20px;
        gap: 16px;
    }

    .blog_comment_review_actions {
        flex-wrap: wrap;
        gap: 12px;
    }

    .comment_counter {
        width: 100%;
        margin-right: 0;
        order: -1;
    }

    .blog_comment_review_actions .blog_comment_review_actions_post {
        padding: 13px 18px;
    }
}