/* =========================================================
   MARKANCE GRAPHICS
   MAIN STYLESHEET
========================================================= */


/* =========================================================
   1. GLOBAL DESIGN SYSTEM
========================================================= */

:root {
    --markance-blue: #08a8e5;
    --markance-orange: #f15a2b;
    --markance-white: #ffffff;

    --text-dark: #111111;
    --text-grey: #666666;

    --container: 1380px;
    --header-height: 92px;
}


/* =========================================================
   2. RESET
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--markance-white);
    color: var(--text-dark);

    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

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

button {
    cursor: pointer;
}


/* =========================================================
   3. HEADER
========================================================= */

.site-header {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: var(--header-height);

    z-index: 1000;

    background: transparent;

    transition:
        background 0.4s ease,
        height 0.4s ease,
        box-shadow 0.4s ease;
}

.header-container {
    width: min(94%, var(--container));
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 32px;
}


/* =========================================================
   4. LOGO
========================================================= */

.site-logo {
    width: 170px;
    flex-shrink: 0;

    margin-right: auto;
}

.site-logo img {
    width: 100%;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   5. MAIN NAVIGATION
========================================================= */

.main-navigation {
    display: flex;
    align-items: center;

    gap: 28px;
}

.main-navigation > a,
.dropdown-trigger {
    position: relative;

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

    color: var(--markance-white);

    font-size: 14px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        color 0.3s ease,
        opacity 0.3s ease;
}


/* Navigation underline */

.main-navigation > a::after,
.dropdown-trigger::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -7px;

    width: 0;
    height: 2px;

    background: var(--markance-orange);

    transition: width 0.3s ease;
}

.main-navigation > a:hover::after,
.dropdown-trigger:hover::after {
    width: 100%;
}


/* =========================================================
   6. SERVICES DROPDOWN
========================================================= */

.nav-dropdown {
    position: relative;
}

.dropdown-trigger {
    gap: 6px;
}

.dropdown-trigger span {
    font-size: 12px;

    transition: transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-trigger span {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;

    top: 35px;
    left: -25px;

    width: 255px;

    padding: 12px;

    background: var(--markance-white);

    border-radius: 8px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.15);

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.dropdown-menu a {
    display: block;

    padding: 11px 13px;

    color: var(--text-dark);

    font-size: 13px;
    font-weight: 500;

    border-radius: 5px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.dropdown-menu a:hover {
    color: var(--markance-blue);

    background: rgba(8, 168, 229, 0.06);

    transform: translateX(4px);
}


/* =========================================================
   7. REQUEST QUOTATION BUTTON
========================================================= */

.quote-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 11px 18px;

    background: var(--markance-orange);
    color: var(--markance-white);

    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.quote-button:hover {
    background: var(--markance-blue);

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.12);
}


/* =========================================================
   8. HEADER AFTER SCROLLING
========================================================= */

.site-header.scrolled {
    height: 78px;

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

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08);

    backdrop-filter: blur(10px);
}

.site-header.scrolled .main-navigation > a,
.site-header.scrolled .dropdown-trigger {
    color: var(--text-dark);
}


/* =========================================================
   9. HERO
========================================================= */

.hero {
    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 650px;

    overflow: hidden;

    background: #111;
}

.hero-slider {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* =========================================================
   10. HERO SLIDES
========================================================= */

.hero-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   11. HERO IMAGES
========================================================= */

.hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.07);

    transition: transform 7s ease;
}

.hero-slide.active .hero-image img {
    transform: scale(1);
}


/* =========================================================
   12. HERO OVERLAY
========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.48) 43%,
            rgba(0, 0, 0, 0.16) 100%
        );
}


/* =========================================================
   13. HERO CONTENT
========================================================= */

.hero-content {
    position: relative;

    z-index: 5;

    width: min(90%, var(--container));
    height: 100%;

    margin: 0 auto;

    padding-top: 70px;

    display: flex;
    flex-direction: column;

    align-items: flex-start;
    justify-content: center;

    color: var(--markance-white);
}


/* Slide number */

.hero-number {
    margin-bottom: 20px;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;

    color: rgba(255, 255, 255, 0.72);
}


/* Small heading */

.hero-eyebrow {
    margin-bottom: 17px;

    color: var(--markance-orange);

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 3px;
}


/* =========================================================
   14. HERO MAIN HEADINGS
========================================================= */

.hero-content h1,
.hero-content h2 {
    max-width: 800px;

    margin: 0;

    font-size: clamp(40px, 5vw, 72px);

    line-height: 1.02;

    letter-spacing: -2px;

    font-weight: 800;

    color: var(--markance-white);
}

.hero-content h1 span,
.hero-content h2 span {
    display: block;

    color: var(--markance-blue);
}


/* =========================================================
   15. HERO DESCRIPTION
========================================================= */

.hero-description {
    max-width: 510px;

    margin-top: 22px;

    color: rgba(255, 255, 255, 0.84);

    font-size: 16px;

    line-height: 1.65;
}


/* =========================================================
   16. HERO CTA BUTTON
========================================================= */

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 26px;

    padding: 11px 19px;

    background: var(--markance-white);
    color: var(--text-dark);

    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.hero-button:hover {
    background: var(--markance-orange);
    color: var(--markance-white);

    transform: translateY(-2px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   17. HERO TEXT ENTRANCE ANIMATION
========================================================= */

.hero-content > * {
    opacity: 0;

    transform: translateY(28px);
}

.hero-slide.active .hero-content > * {
    animation: heroReveal 0.75s ease forwards;
}

.hero-slide.active .hero-content > *:nth-child(1) {
    animation-delay: 0.12s;
}

.hero-slide.active .hero-content > *:nth-child(2) {
    animation-delay: 0.20s;
}

.hero-slide.active .hero-content > *:nth-child(3) {
    animation-delay: 0.28s;
}

.hero-slide.active .hero-content > *:nth-child(4) {
    animation-delay: 0.36s;
}

.hero-slide.active .hero-content > *:nth-child(5) {
    animation-delay: 0.44s;
}

@keyframes heroReveal {

    from {
        opacity: 0;

        transform: translateY(28px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   18. AUTOMATIC HERO SLIDE INDICATORS
========================================================= */

.hero-progress {
    position: absolute;

    z-index: 20;

    right: 5%;
    bottom: 35px;

    display: flex;
    align-items: center;

    gap: 7px;
}

.progress-item {
    display: block;

    width: 25px;
    height: 3px;

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

    border-radius: 20px;

    transition:
        width 0.4s ease,
        background 0.4s ease;
}

.progress-item.active {
    width: 45px;

    background: var(--markance-orange);
}


/* =========================================================
   19. MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {
    display: none;

    width: 32px;

    padding: 0;

    background: transparent;

    border: 0;
}

.mobile-menu-button span {
    display: block;

    width: 100%;
    height: 2px;

    margin: 6px 0;

    background: var(--markance-white);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.site-header.scrolled .mobile-menu-button span {
    background: var(--text-dark);
}


/* =========================================================
   20. TABLET
========================================================= */

@media (max-width: 1150px) {

    .main-navigation {
        gap: 20px;
    }

    .main-navigation > a,
    .dropdown-trigger {
        font-size: 13px;
    }

    .site-logo {
        width: 150px;
    }

    .quote-button {
        padding: 10px 15px;

        font-size: 12px;
    }

}


/* =========================================================
   21. MOBILE NAVIGATION BREAKPOINT
========================================================= */

@media (max-width: 1000px) {

    .main-navigation,
    .quote-button {
        display: none;
    }

    .mobile-menu-button {
        display: block;
    }

    .site-logo {
        width: 150px;
    }

}


/* =========================================================
   22. MOBILE HERO
========================================================= */

@media (max-width: 768px) {

    :root {
        --header-height: 75px;
    }


    .header-container {
        width: 90%;
    }


    .site-logo {
        width: 140px;
    }


    .hero {
        height: 100svh;

        min-height: 600px;
    }


    .hero-content {
        width: 88%;

        padding-top: 55px;
    }


    .hero-number {
        margin-bottom: 15px;

        font-size: 10px;
    }


    .hero-eyebrow {
        margin-bottom: 14px;

        font-size: 10px;

        letter-spacing: 2.5px;
    }


    .hero-content h1,
    .hero-content h2 {
        max-width: 95%;

        font-size: clamp(36px, 10vw, 52px);

        line-height: 1.04;

        letter-spacing: -1.5px;
    }


    .hero-description {
        max-width: 90%;

        margin-top: 18px;

        font-size: 14px;

        line-height: 1.6;
    }


    .hero-button {
        margin-top: 22px;

        padding: 10px 17px;

        border-radius: 7px;

        font-size: 12px;
    }


    .hero-progress {
        right: 6%;
        bottom: 24px;
    }


    .progress-item {
        width: 18px;
        height: 3px;
    }


    .progress-item.active {
        width: 32px;
    }


    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.74) 0%,
                rgba(0, 0, 0, 0.50) 65%,
                rgba(0, 0, 0, 0.30) 100%
            );
    }

}


/* =========================================================
   23. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .site-logo {
        width: 125px;
    }


    .hero-content {
        width: 88%;
    }


    .hero-content h1,
    .hero-content h2 {
        font-size: clamp(34px, 10vw, 46px);

        letter-spacing: -1px;
    }


    .hero-description {
        max-width: 100%;

        font-size: 13px;
    }


    .hero-button {
        padding: 10px 16px;
    }

}


/* =========================================================
   24. MARKANCE INTRODUCTION
========================================================= */

.markance-intro {
    background: var(--markance-white);

    /* Compact transition from hero */
    padding: 45px 0 55px;
}


/* Same 90% container used throughout the website */

.intro-container {
    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}


/* =========================================================
   INTRO LABEL
========================================================= */

.intro-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    color: var(--text-grey);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.intro-label span {
    width: 25px;
    height: 2px;

    flex-shrink: 0;

    background: var(--markance-orange);
}


/* =========================================================
   INTRO CONTENT
========================================================= */

.intro-content {
    display: flex;
    align-items: flex-end;

    width: 100%;

    gap: 45px;
}


/* =========================================================
   INTRO HEADING
========================================================= */

.intro-content h2 {
    width: 520px;
    max-width: 520px;

    flex: 0 0 520px;

    margin: 0;

    color: var(--text-dark);

    font-size: 46px;
    font-weight: 800;

    line-height: 1.08;
    letter-spacing: -1.5px;
}

.intro-content h2 span {
    display: block;

    color: var(--markance-blue);
}


/* =========================================================
   INTRO DESCRIPTION
========================================================= */

.intro-right {
    /*
     * Takes ALL remaining space after heading.
     * Because intro-container is centered at 90% width,
     * the right edge will line up with the website's
     * right margin.
     */
    flex: 1;

    min-width: 0;
    max-width: none;

    margin: 0;
    padding: 0;
}

.intro-right p {
    width: 100%;
    max-width: none;

    margin: 0;

    color: var(--text-grey);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   OUR STORY LINK
========================================================= */

.text-link {
    position: relative;

    display: inline-block;

    margin-top: 18px;
    padding-bottom: 5px;

    color: var(--text-dark);

    font-size: 13px;
    font-weight: 700;

    transition: color 0.3s ease;
}

.text-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: var(--markance-orange);

    transform-origin: left;

    transition: transform 0.3s ease;
}

.text-link:hover {
    color: var(--markance-blue);
}

.text-link:hover::after {
    transform: scaleX(0.55);
}


/* =========================================================
   25. SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;

    transform: translateY(0);
}


/* =========================================================
   26. INTRO TABLET
========================================================= */

@media (max-width: 900px) {

    .markance-intro {
        padding: 40px 0 48px;
    }

    .intro-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 22px;
    }

    .intro-content h2 {
        width: 100%;
        max-width: 600px;

        flex: none;

        font-size: 38px;
    }

    .intro-right {
        width: 100%;
        max-width: 600px;

        flex: none;
    }

}


/* =========================================================
   27. INTRO MOBILE
========================================================= */

@media (max-width: 600px) {

    .markance-intro {
        padding: 35px 0 42px;
    }

    .intro-container {
        width: 88%;
    }

    .intro-label {
        margin-bottom: 18px;
    }

    .intro-content {
        gap: 18px;
    }

    .intro-content h2 {
        font-size: 30px;

        line-height: 1.1;

        letter-spacing: -1px;
    }

    .intro-right p {
        font-size: 14px;

        line-height: 1.7;
    }

    .text-link {
        margin-top: 16px;
    }

}

/* =========================================================
   CREATIVE STATEMENT
========================================================= */

.creative-statement {
    position: relative;

    padding: 65px 0 70px;

    background: var(--markance-blue);

    overflow: hidden;
}


/* =========================================================
   BACKGROUND WORD
========================================================= */

.statement-background {
    position: absolute;

    top: 50%;
    left: -3%;

    transform: translateY(-50%);

    color: rgba(255, 255, 255, 0.055);

    font-size: clamp(120px, 18vw, 280px);
    font-weight: 900;

    line-height: 1;

    letter-spacing: -10px;

    white-space: nowrap;

    pointer-events: none;

    animation: statementMove 14s ease-in-out infinite alternate;
}


@keyframes statementMove {

    from {
        transform: translate(-1%, -50%);
    }

    to {
        transform: translate(4%, -50%);
    }

}


/* =========================================================
   CONTAINER
========================================================= */

.statement-container {
    position: relative;

    z-index: 2;

    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}


/* =========================================================
   LABEL
========================================================= */

.statement-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 28px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


.statement-label span {
    width: 25px;
    height: 2px;

    background: var(--markance-orange);
}


/* =========================================================
   STATEMENT
========================================================= */

.statement-content h2 {
    max-width: 1050px;

    margin: 0;

    font-size: clamp(34px, 4vw, 56px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -2px;

    text-transform: uppercase;
}


.statement-content h2 span {
    display: block;
}


.statement-line-dark {
    color: #111111;
}


.statement-line-light {
    color: var(--markance-white);

    margin-top: 5px;
}


/* =========================================================
   BOTTOM CONTENT
========================================================= */

.statement-bottom {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 50px;

    margin-top: 32px;
}


.statement-bottom p {
    max-width: 540px;

    margin: 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   PORTFOLIO LINK
========================================================= */

.statement-link {
    position: relative;

    display: inline-block;

    flex-shrink: 0;

    padding-bottom: 5px;

    color: var(--markance-white);

    font-size: 13px;
    font-weight: 700;

    transition: color 0.3s ease;
}


.statement-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: var(--markance-orange);

    transform-origin: left;

    transition: transform 0.3s ease;
}


.statement-link:hover {
    color: #111111;
}


.statement-link:hover::after {
    transform: scaleX(0.55);
}


/* =========================================================
   CREATIVE STATEMENT TABLET
========================================================= */

@media (max-width: 900px) {

    .creative-statement {
        padding: 55px 0;
    }

    .statement-content h2 {
        font-size: 42px;
    }

    .statement-bottom {
        align-items: flex-start;
        flex-direction: column;

        gap: 20px;

        margin-top: 26px;
    }

}


/* =========================================================
   CREATIVE STATEMENT MOBILE
========================================================= */

@media (max-width: 600px) {

    .creative-statement {
        padding: 45px 0;
    }

    .statement-container {
        width: 88%;
    }

    .statement-label {
        margin-bottom: 20px;
    }

    .statement-content h2 {
        font-size: 30px;

        line-height: 1.12;

        letter-spacing: -1px;
    }

    .statement-line-light {
        margin-top: 8px;
    }

    .statement-bottom {
        margin-top: 22px;
    }

    .statement-bottom p {
        font-size: 13px;
    }

    .statement-background {
        font-size: 150px;

        letter-spacing: -6px;
    }

}

/* =========================================================
   LATEST BLOGS
========================================================= */

.latest-blogs {
    padding: 65px 0 70px;

    background: var(--markance-white);
}

.blogs-container {
    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}


/* =========================================================
   BLOG HEADER
========================================================= */

.blogs-header {
    display: grid;

    grid-template-columns: 1fr 0.65fr;

    gap: 60px;

    align-items: end;

    margin-bottom: 38px;
}


.blogs-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--text-grey);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


.blogs-label span {
    width: 25px;
    height: 2px;

    background: var(--markance-orange);
}


.blogs-header h2 {
    max-width: 600px;

    margin: 0;

    color: var(--text-dark);

    font-size: clamp(32px, 3.3vw, 48px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.blogs-header h2 span {
    display: block;

    color: var(--markance-blue);
}


/* =========================================================
   BLOG HEADER RIGHT
========================================================= */

.blogs-header-right {
    max-width: 480px;
}


.blogs-header-right p {
    margin: 0;

    color: var(--text-grey);

    font-size: 14px;

    line-height: 1.7;
}


.blogs-all-link {
    position: relative;

    display: inline-block;

    margin-top: 18px;
    padding-bottom: 5px;

    color: var(--text-dark);

    font-size: 13px;
    font-weight: 700;

    transition: color 0.3s ease;
}


.blogs-all-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: var(--markance-orange);

    transform-origin: left;

    transition: transform 0.3s ease;
}


.blogs-all-link:hover {
    color: var(--markance-blue);
}


.blogs-all-link:hover::after {
    transform: scaleX(0.55);
}


/* =========================================================
   BLOG GRID
========================================================= */

.blogs-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   BLOG CARD
========================================================= */

.blog-card {
    min-width: 0;
}


/* Image */

.blog-image {
    position: relative;

    display: block;

    width: 100%;
    height: 245px;

    overflow: hidden;

    background: #eeeeee;
}


.blog-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;
}


.blog-card:hover .blog-image img {
    transform: scale(1.045);
}


/* Placeholder if article has no featured image */

.blog-image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #111111;

    overflow: hidden;
}


.blog-image-placeholder span {
    color: rgba(255, 255, 255, 0.09);

    font-size: clamp(32px, 4vw, 55px);
    font-weight: 900;

    letter-spacing: -2px;
}


/* =========================================================
   BLOG CONTENT
========================================================= */

.blog-content {
    padding-top: 18px;
}


.blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;

    margin-bottom: 10px;

    color: #888888;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;
}


.blog-category {
    color: var(--markance-orange);
}


.blog-content h3 {
    margin: 0;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.4px;
}


.blog-content h3 a {
    transition: color 0.3s ease;
}


.blog-content h3 a:hover {
    color: var(--markance-blue);
}


.blog-content p {
    margin: 12px 0 0;

    color: var(--text-grey);

    font-size: 13px;

    line-height: 1.65;
}


/* =========================================================
   READ ARTICLE
========================================================= */

.blog-read-more {
    position: relative;

    display: inline-block;

    margin-top: 15px;
    padding-bottom: 4px;

    color: var(--text-dark);

    font-size: 12px;
    font-weight: 700;

    transition: color 0.3s ease;
}


.blog-read-more::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 22px;
    height: 2px;

    background: var(--markance-orange);

    transition: width 0.3s ease;
}


.blog-read-more:hover {
    color: var(--markance-blue);
}


.blog-read-more:hover::after {
    width: 100%;
}


/* =========================================================
   NO POSTS
========================================================= */

.no-posts {
    grid-column: 1 / -1;

    padding: 35px 0;

    color: var(--text-grey);

    font-size: 14px;
}


/* =========================================================
   BLOG TABLET
========================================================= */

@media (max-width: 900px) {

    .latest-blogs {
        padding: 55px 0;
    }

    .blogs-header {
        grid-template-columns: 1fr;

        gap: 20px;

        margin-bottom: 30px;
    }

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

}


/* =========================================================
   BLOG MOBILE
========================================================= */

@media (max-width: 600px) {

    .latest-blogs {
        padding: 45px 0;
    }

    .blogs-container {
        width: 88%;
    }

    .blogs-header h2 {
        font-size: 30px;
    }

    .blogs-header-right p {
        font-size: 13px;
    }

    .blogs-grid {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .blog-image {
        height: 230px;
    }

    .blog-content h3 {
        font-size: 20px;
    }

}
/* =========================================================
   OUR CLIENTS
========================================================= */

.clients-section {
    padding: 55px 0 60px;

    background: #f7f7f7;

    overflow: hidden;
}


/* =========================================================
   CLIENTS HEADER
========================================================= */

.clients-header {
    width: 90%;
    max-width: var(--container);

    margin: 0 auto 35px;
}


.clients-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--text-grey);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


.clients-label span {
    width: 25px;
    height: 2px;

    background: var(--markance-orange);
}


.clients-header h2 {
    max-width: 650px;

    margin: 0;

    color: var(--text-dark);

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.clients-header h2 span {
    display: block;

    color: var(--markance-blue);
}


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

.clients-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;
}


/*
 * Soft fades at the edges so logos enter and leave
 * the screen naturally.
 */

.clients-marquee::before,
.clients-marquee::after {
    content: "";

    position: absolute;

    z-index: 5;

    top: 0;

    width: 8%;
    height: 100%;

    pointer-events: none;
}


.clients-marquee::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #f7f7f7 0%,
            rgba(247, 247, 247, 0) 100%
        );
}


.clients-marquee::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            #f7f7f7 0%,
            rgba(247, 247, 247, 0) 100%
        );
}


/* =========================================================
   MOVING TRACK
========================================================= */

.clients-track {
    display: flex;

    width: max-content;

    animation: clientsScroll 30s linear infinite;

    will-change: transform;
}


.clients-group {
    display: flex;
    align-items: center;

    flex-shrink: 0;
}


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

.client-logo {
    width: 190px;
    height: 100px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 25px;

    padding: 18px;
}


.client-logo img {
    max-width: 145px;
    max-height: 65px;

    width: auto;
    height: auto;

    object-fit: contain;

    filter: grayscale(100%);

    opacity: 0.58;

    transition:
        filter 0.35s ease,
        opacity 0.35s ease,
        transform 0.35s ease;
}


.client-logo:hover img {
    filter: grayscale(0%);

    opacity: 1;

    transform: scale(1.05);
}


/* Pause while visitor is inspecting a logo */

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


/* =========================================================
   MARQUEE ANIMATION
========================================================= */

@keyframes clientsScroll {

    from {
        transform: translateX(0);
    }

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

}


/* =========================================================
   CLIENTS MOBILE
========================================================= */

@media (max-width: 600px) {

    .clients-section {
        padding: 42px 0 48px;
    }

    .clients-header {
        width: 88%;

        margin-bottom: 25px;
    }

    .clients-header h2 {
        font-size: 30px;
    }

    .client-logo {
        width: 145px;
        height: 80px;

        margin: 0 15px;

        padding: 14px;
    }

    .client-logo img {
        max-width: 115px;
        max-height: 52px;
    }

    .clients-track {
        animation-duration: 24s;
    }

}

/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {
    position: relative;

    padding: 75px 0;

    background: #111111;

    overflow: hidden;
}


/* Decorative background */

.final-cta::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -150px;
    top: -190px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}


.final-cta::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -70px;
    bottom: -150px;

    border: 1px solid rgba(8, 168, 229, 0.25);

    border-radius: 50%;
}


/* =========================================================
   CTA CONTAINER
========================================================= */

.final-cta-container {
    position: relative;

    z-index: 2;

    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}


.final-cta-content {
    max-width: 900px;
}


/* =========================================================
   CTA LABEL
========================================================= */

.final-cta-label {
    margin-bottom: 18px;

    color: var(--markance-orange);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


/* =========================================================
   CTA HEADING
========================================================= */

.final-cta h2 {
    margin: 0;

    color: var(--markance-white);

    font-size: clamp(34px, 4vw, 54px);
    font-weight: 800;

    line-height: 1.06;

    letter-spacing: -2px;
}


.final-cta h2 span {
    display: block;

    color: var(--markance-blue);
}


/* =========================================================
   CTA DESCRIPTION
========================================================= */

.final-cta p {
    max-width: 520px;

    margin: 22px 0 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;

    line-height: 1.7;
}


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

.final-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 25px;

    padding: 12px 21px;

    background: var(--markance-orange);

    color: var(--markance-white);

    border-radius: 8px;

    font-size: 13px;
    font-weight: 700;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.final-cta-button:hover {
    background: var(--markance-blue);

    transform: translateY(-2px);

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}


/* =========================================================
   FINAL CTA MOBILE
========================================================= */

@media (max-width: 600px) {

    .final-cta {
        padding: 55px 0;
    }

    .final-cta-container {
        width: 88%;
    }

    .final-cta h2 {
        font-size: 32px;

        letter-spacing: -1px;
    }

    .final-cta p {
        margin-top: 18px;

        font-size: 13px;
    }

    .final-cta-button {
        margin-top: 22px;
    }

}
/* =========================================================
   MARKANCE FOOTER
========================================================= */

.site-footer {
    position: relative;
    overflow: hidden;

    padding: 60px 0 22px;

    /*
     * Deep navy rather than black.
     * Multiple gradients create the artwork without
     * requiring another image file.
     */
    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(241, 90, 43, 0.22) 0,
            rgba(241, 90, 43, 0.08) 16%,
            transparent 34%
        ),
        radial-gradient(
            circle at 93% 78%,
            rgba(8, 168, 229, 0.25) 0,
            rgba(8, 168, 229, 0.08) 22%,
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #061725 0%,
            #07243a 48%,
            #041321 100%
        );

    color: var(--markance-white);
}


/* =========================================================
   LARGE DECORATIVE M
========================================================= */

.site-footer::before {
    content: "M";

    position: absolute;

    right: 2%;
    top: 50%;

    transform: translateY(-54%);

    color: rgba(8, 168, 229, 0.055);

    font-size: clamp(260px, 31vw, 520px);
    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -35px;

    pointer-events: none;
}


/* =========================================================
   ORANGE ARTWORK
========================================================= */

.site-footer::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -300px;
    left: -120px;

    border-radius: 50%;

    border: 2px solid rgba(241, 90, 43, 0.55);

    box-shadow:
        0 0 0 35px rgba(241, 90, 43, 0.035),
        0 0 0 75px rgba(241, 90, 43, 0.025);

    pointer-events: none;
}


/* =========================================================
   FOOTER CONTAINER
========================================================= */

.footer-container {
    position: relative;
    z-index: 3;

    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}


/* =========================================================
   FOOTER MAIN
========================================================= */

.footer-main {
    display: grid;

    grid-template-columns:
        1.3fr
        0.8fr
        1fr
        1.1fr;

    gap: 55px;

    padding-bottom: 45px;
}


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

.footer-brand {
    position: relative;

    display: flex;
    align-items: flex-start;
}


.footer-logo {
    display: inline-block;

    width: 190px;
}


.footer-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* Decorative orange line below logo */

.footer-brand::after {
    content: "";

    position: absolute;

    left: 0;
    top: 82px;

    width: 45px;
    height: 3px;

    background: var(--markance-orange);
}


/* =========================================================
   COLUMN TITLES
========================================================= */

.footer-column h3 {
    position: relative;

    margin: 0 0 24px;

    padding-bottom: 11px;

    color: var(--markance-white);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2.2px;

    text-transform: uppercase;
}


.footer-column h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 32px;
    height: 2px;

    background: var(--markance-orange);
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-links {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 11px;
}


.footer-links a,
.footer-contact > a,
.footer-contact > span {
    color: rgba(255, 255, 255, 0.68);

    font-size: 13px;

    line-height: 1.5;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.footer-links a:hover,
.footer-contact > a:hover {
    color: var(--markance-blue);

    transform: translateX(4px);
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact {
    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


.footer-contact > a,
.footer-contact > span {
    margin-bottom: 10px;
}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.footer-socials {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 15px;
}


.footer-socials a {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 50%;

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

    color: var(--markance-white);

    backdrop-filter: blur(4px);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.footer-socials svg {
    width: 15px;
    height: 15px;

    fill: currentColor;
}


.footer-socials a:hover {
    background: var(--markance-orange);

    border-color: var(--markance-orange);

    transform: translateY(-4px);
}


/* =========================================================
   BLUE DECORATIVE LINE
========================================================= */

.footer-main::after {
    content: "";

    position: absolute;

    right: -8%;

    bottom: 62px;

    width: 300px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(8, 168, 229, 0.7),
        transparent
    );

    transform: rotate(-16deg);

    pointer-events: none;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    position: relative;

    padding-top: 20px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}


.footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.45);

    font-size: 11px;
}


/* Orange accent at bottom */

.footer-bottom::after {
    content: "";

    position: absolute;

    right: 0;
    top: -1px;

    width: 80px;
    height: 2px;

    background: var(--markance-orange);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .site-footer {
        padding-top: 50px;
    }

    .footer-main {
        grid-template-columns: repeat(2, 1fr);

        gap: 40px;
    }

    .site-footer::before {
        right: -10%;

        font-size: 380px;
    }

}


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

@media (max-width: 600px) {

    .site-footer {
        padding: 45px 0 20px;
    }

    .footer-container {
        width: 88%;
    }

    .footer-main {
        grid-template-columns: 1fr;

        gap: 32px;

        padding-bottom: 35px;
    }

    .footer-logo {
        width: 165px;
    }

    .footer-brand::after {
        top: 72px;
    }

    .site-footer::before {
        right: -35%;
        top: 60%;

        font-size: 330px;
    }

    .site-footer::after {
        width: 280px;
        height: 280px;

        top: -220px;
        left: -120px;
    }

    .footer-main::after {
        display: none;
    }

}

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

.mobile-navigation {
    position: fixed;
    inset: 0;

    z-index: 990;

    width: 100%;
    height: 100vh;
    height: 100dvh;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(8, 168, 229, 0.18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #061725,
            #07243a
        );

    opacity: 0;
    visibility: hidden;

    transform: translateY(-15px);

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease;
}


.mobile-navigation.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


.mobile-nav-inner {
    width: 88%;
    height: 100%;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 90px 0 35px;
}


/* MAIN LINKS */

.mobile-nav > a {
    display: grid;

    grid-template-columns: 30px 1fr;

    align-items: center;

    gap: 15px;

    padding: 14px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);

    color: var(--markance-white);

    font-size: 24px;
    font-weight: 700;

    line-height: 1.1;
}


.mobile-nav > a > span {
    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* SERVICES */

.mobile-services {
    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}


.mobile-services-toggle {
    width: 100%;

    display: grid;

    grid-template-columns: 30px 1fr 30px;

    align-items: center;

    gap: 15px;

    padding: 14px 0;

    border: 0;

    background: transparent;

    color: var(--markance-white);

    cursor: pointer;

    text-align: left;
}


.mobile-number {
    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 700;
}


.mobile-link-title {
    font-size: 24px;
    font-weight: 700;
}


.mobile-plus {
    justify-self: end;

    color: var(--markance-blue);

    font-size: 24px;

    transition: transform 0.3s ease;
}


.mobile-services.open .mobile-plus {
    transform: rotate(45deg);
}


/* SERVICES DROPDOWN */

.mobile-services-menu {
    max-height: 0;

    overflow: hidden;

    padding-left: 45px;

    transition:
        max-height 0.4s ease,
        padding-bottom 0.4s ease;
}


.mobile-services.open .mobile-services-menu {
    max-height: 280px;

    padding-bottom: 15px;
}


.mobile-services-menu a {
    display: block;

    padding: 7px 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 13px;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.mobile-services-menu a:hover {
    color: var(--markance-blue);

    transform: translateX(4px);
}


/* QUOTATION CTA */

.mobile-quote {
    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 24px;

    padding: 13px 20px;

    background: var(--markance-orange);

    border-radius: 7px;

    color: var(--markance-white);

    font-size: 13px;
    font-weight: 700;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.mobile-quote:hover {
    background: var(--markance-blue);

    transform: translateY(-2px);
}


/* =========================================================
   HAMBURGER ANIMATION
========================================================= */

.mobile-menu-button {
    position: relative;

    z-index: 1001;
}


.mobile-menu-button span {
    transition:
        transform 0.3s ease,
        opacity 0.3s ease,
        background 0.3s ease;
}


.mobile-menu-button.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}


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


.mobile-menu-button.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


.mobile-menu-button.active span {
    background: var(--markance-white);
}


body.mobile-menu-open {
    overflow: hidden;
}


/* Hide mobile navigation on desktop */

@media (min-width: 1001px) {

    .mobile-navigation {
        display: none;
    }

}


@media (max-width: 600px) {

    .mobile-nav > a,
    .mobile-link-title {
        font-size: 21px;
    }

    .mobile-nav-inner {
        padding-top: 80px;
    }

}

/* =========================================================
   INNER PAGE HERO
========================================================= */

.inner-hero {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: center;

    padding: 140px 0 75px;

    background:
        linear-gradient(
            135deg,
            #061725 0%,
            #07243a 55%,
            #04131f 100%
        );

    overflow: hidden;

    color: var(--markance-white);
}


.inner-hero-container {
    position: relative;
    z-index: 3;

    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}


.inner-hero-content {
    max-width: 850px;
}


.inner-hero-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


.inner-hero-label span {
    width: 25px;
    height: 2px;

    background: var(--markance-orange);
}


.inner-hero h1 {
    margin: 0;

    color: var(--markance-white);

    font-size: clamp(38px, 4.5vw, 62px);
    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -2px;
}


.inner-hero h1 span {
    display: block;

    color: var(--markance-blue);
}


.inner-hero-content > p {
    max-width: 590px;

    margin: 24px 0 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 14px;

    line-height: 1.75;
}


/* =========================================================
   HERO ARTWORK
========================================================= */

.inner-hero-art {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.story-art-word {
    position: absolute;

    right: -3%;
    bottom: -10px;

    color: rgba(255, 255, 255, 0.035);

    font-size: clamp(130px, 20vw, 310px);
    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -12px;
}


.story-art-circle {
    position: absolute;

    width: 440px;
    height: 440px;

    right: -140px;
    top: -190px;

    border:

        1px solid
        rgba(8, 168, 229, 0.3);

    border-radius: 50%;

    box-shadow:

        0 0 0 45px
        rgba(8, 168, 229, 0.025),

        0 0 0 95px
        rgba(8, 168, 229, 0.015);
}


.story-art-line {
    position: absolute;

    width: 300px;
    height: 2px;

    right: 8%;
    bottom: 20%;

    background:

        linear-gradient(
            90deg,
            transparent,
            var(--markance-orange)
        );

    transform: rotate(-25deg);
}



/* =========================================================
   SHARED STORY CONTAINER
========================================================= */

.story-container {
    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}


.story-section-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--text-grey);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


.story-section-label span {
    width: 25px;
    height: 2px;

    background: var(--markance-orange);
}



/* =========================================================
   STORY INTRO
========================================================= */

.story-intro {
    padding: 65px 0;
}


.story-intro .story-container {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 80px;

    align-items: end;
}


.story-intro-heading h2 {
    max-width: 600px;

    margin: 0;

    color: var(--text-dark);

    font-size: clamp(32px, 3.3vw, 48px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.story-intro-heading h2 span {
    display: block;

    color: var(--markance-blue);
}


.story-intro-content {
    max-width: 540px;
}


.story-intro-content p {
    margin: 0;

    color: var(--text-grey);

    font-size: 14px;

    line-height: 1.75;
}


.story-intro-content p + p {
    margin-top: 14px;
}


.story-intro-content .story-lead {
    color: var(--text-dark);

    font-size: 17px;
    font-weight: 600;

    line-height: 1.5;
}



/* =========================================================
   STORY NARRATIVE
========================================================= */

.story-narrative {
    padding: 70px 0;

    background: #071d2c;

    color: var(--markance-white);
}


.story-narrative-grid {
    display: grid;

    grid-template-columns: 0.9fr 1fr;

    gap: 80px;

    align-items: center;
}


.story-narrative-visual {
    position: relative;

    min-height: 390px;
}


.story-visual-main {
    position: absolute;

    left: 0;
    top: 0;

    width: 78%;
    height: 310px;

    display: flex;
    align-items: flex-end;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            var(--markance-blue),
            #0577a5
        );

    overflow: hidden;
}


.story-visual-main::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -100px;
    top: -100px;

    border:

        1px solid
        rgba(255, 255, 255, 0.25);

    border-radius: 50%;
}


.story-visual-main span {
    position: relative;

    color: rgba(255, 255, 255, 0.2);

    font-size: clamp(45px, 6vw, 80px);
    font-weight: 900;

    letter-spacing: -5px;
}


.story-visual-accent {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 58%;

    padding: 28px;

    background: var(--markance-orange);

    color: var(--markance-white);
}


.story-visual-accent span {
    display: block;

    margin-bottom: 5px;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}


.story-visual-accent strong {
    font-size: 20px;

    line-height: 1.1;
}


.story-label-light {
    color: rgba(255, 255, 255, 0.55);
}


.story-narrative-content h2 {
    max-width: 590px;

    margin: 0 0 25px;

    font-size: clamp(30px, 3vw, 44px);
    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -1.4px;
}


.story-narrative-content p {
    max-width: 580px;

    margin: 0 0 14px;

    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;

    line-height: 1.75;
}



/* =========================================================
   PRINCIPLES
========================================================= */

.story-principles {
    padding: 65px 0 70px;
}


.story-principles-header {
    margin-bottom: 38px;
}


.story-principles-header h2 {
    margin: 0;

    color: var(--text-dark);

    font-size: clamp(32px, 3.3vw, 48px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.story-principles-header h2 span {
    display: block;

    color: var(--markance-blue);
}


.principles-list {
    border-top: 1px solid #dedede;
}


.principle-item {
    display: grid;

    grid-template-columns:
        60px
        minmax(220px, 0.7fr)
        1fr;

    gap: 35px;

    align-items: center;

    padding: 25px 0;

    border-bottom: 1px solid #dedede;
}


.principle-number {
    color: var(--markance-orange);

    font-size: 11px;
    font-weight: 700;
}


.principle-item h3 {
    margin: 0;

    color: var(--text-dark);

    font-size: 24px;
    font-weight: 700;

    letter-spacing: -0.5px;
}


.principle-item p {
    max-width: 520px;

    margin: 0;

    color: var(--text-grey);

    font-size: 13px;

    line-height: 1.7;
}



/* =========================================================
   CREATIVE DISCIPLINES
========================================================= */

.story-disciplines {
    position: relative;

    padding: 60px 0 65px;

    background: var(--markance-orange);

    overflow: hidden;
}


.story-disciplines-heading p {
    margin: 0 0 4px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 2px;
}


.story-disciplines-heading h2 {
    margin: 0;

    color: var(--markance-white);

    font-size: clamp(32px, 3.3vw, 48px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.story-disciplines-heading h2 span {
    color: #111111;
}


.discipline-words {
    display: flex;

    flex-wrap: wrap;

    gap: 10px 24px;

    margin-top: 35px;
}


.discipline-words span {
    color: rgba(255, 255, 255, 0.22);

    font-size: clamp(26px, 4vw, 52px);
    font-weight: 900;

    line-height: 1;

    letter-spacing: -2px;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.discipline-words span:hover {
    color: var(--markance-white);

    transform: translateY(-3px);
}



/* =========================================================
   STORY TABLET
========================================================= */

@media (max-width: 900px) {

    .inner-hero {
        min-height: 470px;

        padding-top: 125px;
    }


    .story-intro .story-container,
    .story-narrative-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .story-intro-content {
        max-width: 650px;
    }


    .story-narrative-visual {
        max-width: 600px;

        min-height: 370px;
    }


    .principle-item {
        grid-template-columns:
            45px
            minmax(200px, 0.7fr)
            1fr;

        gap: 20px;
    }

}



/* =========================================================
   STORY MOBILE
========================================================= */

@media (max-width: 600px) {

    .inner-hero {
        min-height: 430px;

        padding: 115px 0 55px;
    }


    .inner-hero-container,
    .story-container {
        width: 88%;
    }


    .inner-hero h1 {
        font-size: 38px;

        letter-spacing: -1.5px;
    }


    .inner-hero-content > p {
        font-size: 13px;
    }


    .story-intro,
    .story-principles {
        padding: 45px 0;
    }


    .story-intro-heading h2,
    .story-principles-header h2,
    .story-disciplines-heading h2 {
        font-size: 30px;
    }


    .story-narrative {
        padding: 50px 0;
    }


    .story-narrative-visual {
        min-height: 300px;
    }


    .story-visual-main {
        height: 245px;
    }


    .story-visual-accent {
        width: 68%;

        padding: 20px;
    }


    .story-narrative-content h2 {
        font-size: 30px;
    }


    .principle-item {
        grid-template-columns: 32px 1fr;

        gap: 10px 15px;

        padding: 22px 0;
    }


    .principle-item h3 {
        font-size: 21px;
    }


    .principle-item p {
        grid-column: 2;

        font-size: 13px;
    }


    .story-disciplines {
        padding: 45px 0;
    }


    .discipline-words {
        gap: 10px 16px;

        margin-top: 28px;
    }


    .discipline-words span {
        font-size: 28px;
    }

}

/* =========================================================
   SERVICES PAGE
========================================================= */

.services-page-container {
    width: 90%;
    max-width: var(--container);
    margin: 0 auto;
}


/* HERO ART */

.services-page-hero {
    position: relative;
}

.services-hero-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.services-hero-word {
    position: absolute;
    right: -2%;
    bottom: -8%;

    color: rgba(255,255,255,.035);

    font-size: clamp(140px, 20vw, 300px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -12px;
}

.services-hero-circle {
    position: absolute;

    width: 420px;
    height: 420px;

    right: -120px;
    top: -180px;

    border: 1px solid rgba(241,90,43,.35);
    border-radius: 50%;

    box-shadow:
        0 0 0 45px rgba(241,90,43,.025),
        0 0 0 90px rgba(241,90,43,.015);
}


/* =========================================================
   INTRO
========================================================= */

.services-page-intro {
    padding: 65px 0;
    background: var(--markance-white);
}

.services-page-intro .services-page-container {
    display: grid;
    grid-template-columns: 1fr .75fr;

    gap: 70px;

    align-items: end;
}

.services-page-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: var(--text-grey);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.services-page-label span {
    width: 25px;
    height: 2px;

    background: var(--markance-orange);
}

.services-page-intro h2 {
    max-width: 620px;

    margin: 0;

    color: var(--text-dark);

    font-size: clamp(32px, 3.3vw, 48px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.services-page-intro h2 span {
    display: block;
    color: var(--markance-blue);
}

.services-page-intro-copy {
    max-width: 520px;
}

.services-page-intro-copy p {
    margin: 0;

    color: var(--text-grey);

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   SERVICE EXPLORER
========================================================= */

.services-explorer {
    padding: 10px 0 70px;

    background: var(--markance-white);
}

.services-explorer-item {
    position: relative;

    display: grid;

    grid-template-columns:
        55px
        minmax(260px, .9fr)
        minmax(300px, 1fr)
        45px;

    gap: 30px;

    align-items: center;

    min-height: 145px;

    padding: 25px 5px;

    border-top: 1px solid #dddddd;

    color: var(--text-dark);

    overflow: hidden;

    transition:
        padding .35s ease,
        background .35s ease;
}

.services-explorer-item:last-child {
    border-bottom: 1px solid #dddddd;
}

.services-explorer-item::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background: var(--markance-orange);

    transition: width .45s ease;
}

.services-explorer-item:hover::before {
    width: 100%;
}

.services-explorer-number {
    color: var(--markance-orange);

    font-size: 11px;
    font-weight: 700;
}

.services-small-label {
    display: block;

    margin-bottom: 7px;

    color: #999999;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.services-explorer-title h2 {
    margin: 0;

    font-size: clamp(23px, 2.3vw, 32px);
    font-weight: 750;

    line-height: 1.05;

    letter-spacing: -.8px;

    transition:
        color .3s ease,
        transform .35s ease;
}

.services-explorer-title h2 span {
    display: block;
}

.services-explorer-item > p {
    max-width: 500px;

    margin: 0;

    color: var(--text-grey);

    font-size: 13px;
    line-height: 1.7;
}

.services-explorer-action {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    justify-self: end;

    border: 1px solid #cccccc;
    border-radius: 50%;

    font-size: 19px;
    font-weight: 300;

    transition:
        background .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .35s ease;
}

.services-explorer-item:hover {
    padding-left: 15px;
    padding-right: 15px;

    background: #fafafa;
}

.services-explorer-item:hover h2 {
    color: var(--markance-blue);

    transform: translateX(5px);
}

.services-explorer-item:hover
.services-explorer-action {

    background: var(--markance-orange);
    border-color: var(--markance-orange);

    color: var(--markance-white);

    transform: rotate(90deg);
}


/* =========================================================
   CONNECTED CREATIVITY
========================================================= */

.connected-creativity {
    position: relative;

    padding: 70px 0;

    background: var(--markance-blue);

    overflow: hidden;
}

.connected-creativity::after {
    content: "CREATE";

    position: absolute;

    right: -3%;
    bottom: -12%;

    color: rgba(255,255,255,.06);

    font-size: clamp(120px, 18vw, 260px);
    font-weight: 900;

    line-height: .8;

    letter-spacing: -10px;
}

.connected-creativity-content {
    position: relative;
    z-index: 2;

    max-width: 950px;
}

.connected-small {
    display: block;

    margin-bottom: 20px;

    color: rgba(255,255,255,.7);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.connected-creativity h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(30px, 3.3vw, 48px);
    font-weight: 800;

    line-height: 1.1;

    letter-spacing: -1.5px;
}

.connected-creativity h2 span {
    display: block;

    color: var(--markance-white);
}

.connected-creativity p {
    max-width: 560px;

    margin: 25px 0 0;

    color: rgba(255,255,255,.8);

    font-size: 14px;
    line-height: 1.7;
}


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

@media (max-width: 900px) {

    .services-page-intro
    .services-page-container {

        grid-template-columns: 1fr;

        gap: 22px;
    }

    .services-explorer-item {

        grid-template-columns:
            40px
            1fr
            40px;

        gap: 18px;
    }

    .services-explorer-item > p {
        grid-column: 2 / 3;
    }

    .services-explorer-action {
        grid-column: 3;
        grid-row: 1 / 3;
    }
}


@media (max-width: 600px) {

    .services-page-container {
        width: 88%;
    }

    .services-page-intro {
        padding: 45px 0;
    }

    .services-page-intro h2 {
        font-size: 30px;
    }

    .services-explorer {
        padding-bottom: 50px;
    }

    .services-explorer-item {
        grid-template-columns:
            28px
            1fr
            34px;

        gap: 12px;

        min-height: auto;

        padding: 22px 0;
    }

    .services-explorer-title h2 {
        font-size: 22px;
    }

    .services-explorer-item > p {
        font-size: 12px;
    }

    .services-explorer-action {
        width: 32px;
        height: 32px;
    }

    .services-explorer-item:hover {
        padding-left: 0;
        padding-right: 0;
    }

    .connected-creativity {
        padding: 50px 0;
    }

    .connected-creativity h2 {
        font-size: 30px;
    }
}

/* =========================================================
   PORTFOLIO PAGE
========================================================= */

.portfolio-container {
    width: 90%;
    max-width: var(--container);
    margin: 0 auto;
}


/* HERO ART */

.portfolio-page-hero {
    position: relative;
}

.portfolio-hero-art {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.portfolio-hero-word {
    position: absolute;

    right: -2%;
    bottom: -8%;

    color: rgba(255, 255, 255, 0.035);

    font-size: clamp(150px, 22vw, 330px);
    font-weight: 900;

    line-height: 0.8;
    letter-spacing: -14px;
}

.portfolio-hero-circle {
    position: absolute;

    width: 420px;
    height: 420px;

    right: -130px;
    top: -180px;

    border: 1px solid rgba(8, 168, 229, 0.3);
    border-radius: 50%;

    box-shadow:
        0 0 0 45px rgba(8, 168, 229, 0.025),
        0 0 0 90px rgba(8, 168, 229, 0.015);
}

.portfolio-hero-line {
    position: absolute;

    right: 8%;
    bottom: 18%;

    width: 270px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--markance-orange)
        );

    transform: rotate(-24deg);
}


/* =========================================================
   PORTFOLIO AREA
========================================================= */

.portfolio-page {
    padding: 55px 0 75px;

    background: var(--markance-white);
}


/* FILTERS */

.portfolio-filters {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 38px;

    padding-bottom: 18px;

    border-bottom: 1px solid #e3e3e3;
}

.portfolio-filter {
    padding: 9px 15px;

    border: 1px solid #dddddd;
    border-radius: 50px;

    background: transparent;

    color: var(--text-grey);

    font-family: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.portfolio-filter:hover {
    color: var(--markance-blue);

    border-color: var(--markance-blue);
}

.portfolio-filter.active {
    background: var(--markance-orange);

    border-color: var(--markance-orange);

    color: var(--markance-white);
}


/* GRID */

.portfolio-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 42px 28px;
}


/* PROJECT */

.portfolio-project {
    min-width: 0;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.portfolio-project.filtered-out {
    display: none;
}

.portfolio-project-link {
    display: block;

    color: inherit;
}

.portfolio-project-image {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #eeeeee;
}

.portfolio-project-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.65s cubic-bezier(.2,.7,.2,1);
}

.portfolio-project-link:hover
.portfolio-project-image img {

    transform: scale(1.045);
}


/* OVERLAY */

.portfolio-project-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 22px;

    background:
        linear-gradient(
            to top,
            rgba(4, 19, 31, 0.72),
            rgba(4, 19, 31, 0.05) 55%,
            transparent
        );

    opacity: 0;

    transition: opacity 0.35s ease;
}

.portfolio-project-link:hover
.portfolio-project-overlay {

    opacity: 1;
}

.portfolio-view {
    color: var(--markance-white);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* PROJECT INFO */

.portfolio-project-info {
    display: flex;
    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding-top: 15px;
}

.portfolio-project-category {
    display: block;

    margin-bottom: 5px;

    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.portfolio-project-info h2 {
    margin: 0;

    color: var(--text-dark);

    font-size: 20px;
    font-weight: 700;

    line-height: 1.2;

    transition: color 0.3s ease;
}

.portfolio-project-link:hover
.portfolio-project-info h2 {

    color: var(--markance-blue);
}

.portfolio-project-arrow {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #d4d4d4;
    border-radius: 50%;

    color: var(--text-dark);

    font-size: 17px;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.portfolio-project-link:hover
.portfolio-project-arrow {

    background: var(--markance-blue);

    border-color: var(--markance-blue);

    color: var(--markance-white);

    transform: translateY(-3px);
}


/* PLACEHOLDER */

.portfolio-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #061725,
            #073451
        );
}

.portfolio-placeholder span {
    color: rgba(255, 255, 255, 0.08);

    font-size: clamp(45px, 7vw, 95px);
    font-weight: 900;

    letter-spacing: -4px;
}


/* EMPTY */

.portfolio-empty {
    grid-column: 1 / -1;

    padding: 50px 0;

    color: var(--text-grey);

    font-size: 14px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .portfolio-grid {
        gap: 35px 20px;
    }

}


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

@media (max-width: 600px) {

    .portfolio-container {
        width: 88%;
    }

    .portfolio-page {
        padding: 40px 0 55px;
    }

    .portfolio-filters {
        gap: 7px;

        margin-bottom: 28px;
    }

    .portfolio-filter {
        padding: 8px 12px;

        font-size: 10px;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;

        gap: 32px;
    }

    .portfolio-project-info h2 {
        font-size: 18px;
    }

}

/* =========================================================
   SINGLE PORTFOLIO PROJECT
========================================================= */

.project-container {
    width: 90%;
    max-width: var(--container);
    margin: 0 auto;
}


/* HERO */

.project-hero {
    position: relative;

    padding: 145px 0 70px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(8, 168, 229, 0.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #061725,
            #07243a
        );

    color: var(--markance-white);

    overflow: hidden;
}

.project-hero-art {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.project-hero-art span {
    position: absolute;

    right: -2%;
    bottom: -18%;

    color: rgba(255, 255, 255, 0.035);

    font-size: clamp(150px, 22vw, 330px);
    font-weight: 900;

    line-height: 0.8;
    letter-spacing: -14px;
}

.project-hero .project-container {
    position: relative;
    z-index: 2;
}

.project-back {
    display: inline-block;

    margin-bottom: 40px;

    color: rgba(255, 255, 255, 0.6);

    font-size: 11px;
    font-weight: 600;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.project-back:hover {
    color: var(--markance-orange);

    transform: translateX(-4px);
}

.project-category {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: rgba(255, 255, 255, 0.6);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.project-category span {
    width: 25px;
    height: 2px;

    background: var(--markance-orange);
}

.project-hero h1 {
    max-width: 900px;

    margin: 0;

    color: var(--markance-white);

    font-size: clamp(38px, 5vw, 64px);
    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -2px;
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.project-featured {
    padding: 55px 0 0;

    background: var(--markance-white);
}

.project-featured-container {
    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}

.project-featured img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 760px;

    object-fit: cover;
}


/* =========================================================
   PROJECT CONTENT
========================================================= */

.project-content-section {
    padding: 55px 0 70px;

    background: var(--markance-white);
}

.project-content-container {
    width: 90%;
    max-width: 1050px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        180px
        minmax(0, 1fr);

    gap: 55px;
}

.project-content-label {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    color: var(--text-grey);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}

.project-content-label span {
    width: 22px;
    height: 2px;

    margin-top: 5px;

    flex-shrink: 0;

    background: var(--markance-orange);
}

.project-editor-content {
    color: var(--text-grey);

    font-size: 14px;
    line-height: 1.8;
}

.project-editor-content > *:first-child {
    margin-top: 0;
}

.project-editor-content h2,
.project-editor-content h3 {
    color: var(--text-dark);

    line-height: 1.15;
}

.project-editor-content h2 {
    font-size: 30px;
}

.project-editor-content h3 {
    font-size: 23px;
}

.project-editor-content img {
    max-width: 100%;
    height: auto;

    margin: 20px 0;
}


/* Gutenberg gallery support */

.project-editor-content
.wp-block-gallery {

    margin: 28px 0;
}


/* =========================================================
   RELATED WORK
========================================================= */

.related-projects {
    padding: 60px 0 70px;

    background: #f5f5f5;
}

.related-projects-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;
}

.related-projects-header h2 {
    margin: 0;

    color: var(--text-dark);

    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1px;
}

.related-projects-header h2 span {
    color: var(--markance-blue);
}

.related-projects-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.related-project-image {
    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #e5e5e5;
}

.related-project-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.related-project a:hover
.related-project-image img {

    transform: scale(1.045);
}

.related-project-info {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding-top: 12px;
}

.related-project-info h3 {
    margin: 0;

    color: var(--text-dark);

    font-size: 16px;
    font-weight: 700;

    transition: color 0.3s ease;
}

.related-project-info > span {
    color: var(--markance-orange);

    font-size: 18px;
}

.related-project a:hover
.related-project-info h3 {

    color: var(--markance-blue);
}


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

@media (max-width: 900px) {

    .project-content-container {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .related-projects-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .project-container,
    .project-featured-container,
    .project-content-container {
        width: 88%;
    }

    .project-hero {
        padding: 120px 0 50px;
    }

    .project-back {
        margin-bottom: 30px;
    }

    .project-hero h1 {
        font-size: 38px;
    }

    .project-featured {
        padding-top: 35px;
    }

    .project-content-section {
        padding: 40px 0 50px;
    }

    .project-editor-content h2 {
        font-size: 26px;
    }

    .related-projects {
        padding: 45px 0 50px;
    }

    .related-projects-header {
        display: block;
    }

    .related-projects-header h2 {
        margin-top: 15px;

        font-size: 29px;
    }

    .related-projects-grid {
        grid-template-columns: 1fr;

        gap: 28px;
    }

}
/* =========================================================
   SERVICE DETAIL PAGES
========================================================= */

.service-detail-container {
    width: 90%;
    max-width: var(--container);
    margin: 0 auto;
}


/* HERO */

.service-detail-hero {
    position: relative;

    min-height: 580px;

    display: flex;
    align-items: center;

    padding: 140px 0 75px;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(8, 168, 229, 0.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #061725,
            #07243a
        );

    overflow: hidden;

    color: var(--markance-white);
}

.service-detail-hero-content {
    position: relative;
    z-index: 3;

    max-width: 850px;
}

.service-detail-hero h1 {
    margin: 0;

    color: var(--markance-white);

    font-size: clamp(40px, 5vw, 64px);
    font-weight: 800;

    line-height: 1.04;
    letter-spacing: -2px;
}

.service-detail-hero h1 span {
    display: block;
    color: var(--markance-blue);
}

.service-detail-hero-content > p {
    max-width: 590px;

    margin: 23px 0 0;

    color: rgba(255, 255, 255, 0.68);

    font-size: 14px;
    line-height: 1.75;
}

.service-hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 28px;

    padding: 12px 22px;

    background: var(--markance-orange);

    border-radius: 5px;

    color: var(--markance-white);

    font-size: 12px;
    font-weight: 700;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.service-hero-button:hover {
    background: var(--markance-blue);
    transform: translateY(-3px);
}


/* HERO ART */

.service-detail-art {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.service-art-word {
    position: absolute;

    right: -3%;
    bottom: -8%;

    color: rgba(255, 255, 255, 0.035);

    font-size: clamp(140px, 20vw, 310px);
    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -13px;
}

.service-art-circle {
    position: absolute;

    width: 410px;
    height: 410px;

    right: -100px;
    top: -170px;

    border:
        1px solid
        rgba(8, 168, 229, 0.3);

    border-radius: 50%;

    box-shadow:
        0 0 0 45px
        rgba(8, 168, 229, 0.025);
}

.service-art-square {
    position: absolute;

    right: 13%;
    bottom: 18%;

    width: 85px;
    height: 85px;

    border:
        2px solid
        rgba(241, 90, 43, 0.55);

    transform: rotate(24deg);
}


/* =========================================================
   INTRO
========================================================= */

.service-detail-intro {
    padding: 65px 0;
}

.service-intro-grid {
    display: grid;

    grid-template-columns: 1fr 0.8fr;

    gap: 75px;

    align-items: end;
}

.service-detail-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--text-grey);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.3px;
}

.service-detail-label > span {
    width: 25px;
    height: 2px;

    flex-shrink: 0;

    background: var(--markance-orange);
}

.service-intro-heading h2,
.service-work-header h2 {
    margin: 0;

    color: var(--text-dark);

    font-size: clamp(31px, 3.2vw, 46px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.4px;
}

.service-intro-heading h2 span,
.service-work-header h2 span {
    display: block;

    color: var(--markance-blue);
}

.service-intro-copy {
    max-width: 520px;
}

.service-intro-copy p {
    margin: 0;

    color: var(--text-grey);

    font-size: 14px;
    line-height: 1.75;
}

.service-intro-copy p + p {
    margin-top: 14px;
}

.service-intro-copy .service-intro-lead {
    color: var(--text-dark);

    font-size: 17px;
    font-weight: 600;

    line-height: 1.5;
}


/* =========================================================
   CAPABILITIES
========================================================= */

.service-capabilities {
    padding: 60px 0 65px;

    background: #071d2c;

    color: var(--markance-white);
}

.light-label {
    color: rgba(255, 255, 255, 0.55);
}

.service-capabilities-heading {
    max-width: 750px;

    margin-bottom: 35px;
}

.service-capabilities-heading h2 {
    margin: 0;

    color: var(--markance-white);

    font-size: clamp(31px, 3.2vw, 46px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.4px;
}

.service-capabilities-heading h2 span {
    color: var(--markance-blue);
}

.capabilities-list {
    border-top:
        1px solid
        rgba(255, 255, 255, 0.14);
}

.capability-item {
    display: grid;

    grid-template-columns:
        55px
        minmax(230px, 0.8fr)
        1fr;

    gap: 30px;

    align-items: center;

    padding: 23px 0;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.14);

    transition: padding 0.3s ease;
}

.capability-item > span {
    color: var(--markance-orange);

    font-size: 10px;
    font-weight: 700;
}

.capability-item h3 {
    margin: 0;

    color: var(--markance-white);

    font-size: 21px;
    font-weight: 700;

    transition: color 0.3s ease;
}

.capability-item p {
    max-width: 520px;

    margin: 0;

    color: rgba(255, 255, 255, 0.6);

    font-size: 13px;
    line-height: 1.7;
}

.capability-item:hover {
    padding-left: 8px;
}

.capability-item:hover h3 {
    color: var(--markance-blue);
}


/* =========================================================
   DESIGN STATEMENT
========================================================= */

.service-design-statement {
    position: relative;

    padding: 65px 0;

    background: var(--markance-orange);

    overflow: hidden;
}

.service-design-statement::after {
    content: "MOVE";

    position: absolute;

    right: -2%;
    bottom: -20%;

    color: rgba(255, 255, 255, 0.07);

    font-size: clamp(130px, 19vw, 280px);
    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -10px;
}

.service-design-statement-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.service-statement-small {
    display: block;

    margin-bottom: 17px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.service-design-statement h2 {
    margin: 0;

    color: #111111;

    font-size: clamp(31px, 3.3vw, 48px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.service-design-statement h2 span {
    display: block;

    color: var(--markance-white);
}

.service-design-statement p {
    max-width: 530px;

    margin: 22px 0 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   SERVICE PORTFOLIO
========================================================= */

.service-work {
    padding: 65px 0 70px;

    background: var(--markance-white);
}

.service-work-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 32px;
}

.service-work-all {
    position: relative;

    padding-bottom: 5px;

    color: var(--text-dark);

    font-size: 12px;
    font-weight: 700;
}

.service-work-all::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background: var(--markance-orange);

    transform-origin: left;

    transition: transform 0.3s ease;
}

.service-work-all:hover {
    color: var(--markance-blue);
}

.service-work-all:hover::after {
    transform: scaleX(0.55);
}

.service-work-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 38px 25px;
}

.service-work-image {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #eeeeee;
}

.service-work-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.55s ease;
}

.service-work-project a:hover
.service-work-image img {

    transform: scale(1.045);
}

.service-work-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 20px;

    background:
        linear-gradient(
            to top,
            rgba(4, 19, 31, 0.72),
            transparent 60%
        );

    opacity: 0;

    transition: opacity 0.3s ease;
}

.service-work-project a:hover
.service-work-overlay {

    opacity: 1;
}

.service-work-overlay span {
    color: var(--markance-white);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.service-work-info {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 13px;
}

.service-work-info h3 {
    margin: 0;

    color: var(--text-dark);

    font-size: 19px;
    font-weight: 700;

    transition: color 0.3s ease;
}

.service-work-info > span {
    color: var(--markance-orange);

    font-size: 19px;
}

.service-work-project a:hover
.service-work-info h3 {

    color: var(--markance-blue);
}

.service-work-empty {
    padding: 35px 0;

    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;

    color: var(--text-grey);

    font-size: 13px;
}


/* =========================================================
   OTHER SERVICES
========================================================= */

.other-services {
    padding: 60px 0 65px;

    background: #f5f5f5;
}

.other-services-heading {
    margin-bottom: 30px;
}

.other-services-heading > span {
    display: block;

    margin-bottom: 10px;

    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}

.other-services-heading h2 {
    max-width: 600px;

    margin: 0;

    color: var(--text-dark);

    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1px;
}

.other-services-heading h2 strong {
    color: var(--markance-blue);
}

.other-services-links {
    border-top: 1px solid #d8d8d8;
}

.other-service {
    display: grid;

    grid-template-columns:
        50px
        1fr
        35px;

    gap: 20px;

    align-items: center;

    padding: 20px 0;

    border-bottom: 1px solid #d8d8d8;

    color: var(--text-dark);
}

.other-service > span {
    color: var(--markance-orange);

    font-size: 10px;
    font-weight: 700;
}

.other-service h3 {
    margin: 0;

    font-size: 19px;
    font-weight: 700;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.other-service strong {
    justify-self: end;

    color: var(--markance-blue);

    font-size: 19px;
}

.other-service:hover h3 {
    color: var(--markance-blue);

    transform: translateX(5px);
}


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

@media (max-width: 900px) {

    .service-intro-grid {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .capability-item {
        grid-template-columns:
            40px
            minmax(190px, 0.7fr)
            1fr;

        gap: 20px;
    }

}


@media (max-width: 600px) {

    .service-detail-container {
        width: 88%;
    }

    .service-detail-hero {
        min-height: 520px;

        padding: 120px 0 55px;
    }

    .service-detail-hero h1 {
        font-size: 38px;
    }

    .service-detail-intro,
    .service-capabilities,
    .service-work,
    .other-services {
        padding: 45px 0;
    }

    .service-intro-heading h2,
    .service-capabilities-heading h2,
    .service-work-header h2 {
        font-size: 30px;
    }

    .capability-item {
        grid-template-columns: 28px 1fr;

        gap: 8px 15px;

        padding: 20px 0;
    }

    .capability-item p {
        grid-column: 2;
    }

    .service-design-statement {
        padding: 48px 0;
    }

    .service-design-statement h2 {
        font-size: 30px;
    }

    .service-work-header {
        display: block;
    }

    .service-work-all {
        display: inline-block;

        margin-top: 18px;
    }

    .service-work-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

}
/* =========================================================
   WEBSITE DESIGN SERVICE
========================================================= */

.website-service-hero {
    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(8, 168, 229, 0.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #061725,
            #07243a
        );
}


/* ABSTRACT BROWSER */

.website-browser-art {
    position: absolute;

    right: 8%;
    top: 48%;

    width: 330px;
    height: 205px;

    border:
        1px solid
        rgba(255, 255, 255, 0.12);

    border-radius: 8px;

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

    transform:
        translateY(-50%)
        rotate(-5deg);
}

.website-browser-art::before {
    content: "";

    position: absolute;

    left: 0;
    top: 28px;

    width: 100%;
    height: 1px;

    background:
        rgba(255, 255, 255, 0.1);
}

.website-browser-art::after {
    content: "";

    position: absolute;

    left: 28px;
    top: 65px;

    width: 58%;
    height: 10px;

    background:
        rgba(8, 168, 229, 0.28);

    box-shadow:
        0 27px 0
        rgba(255, 255, 255, 0.06),

        0 54px 0
        rgba(255, 255, 255, 0.06),

        0 81px 0
        rgba(241, 90, 43, 0.18);
}

.website-browser-art i {
    position: absolute;

    top: 11px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--markance-orange);
}

.website-browser-art i:nth-child(1) {
    left: 12px;
}

.website-browser-art i:nth-child(2) {
    left: 24px;

    background: var(--markance-blue);
}

.website-browser-art i:nth-child(3) {
    left: 36px;

    background: rgba(255, 255, 255, 0.4);
}


/* =========================================================
   WEBSITE PROCESS
========================================================= */

.website-process {
    padding: 65px 0 70px;

    background: #f5f5f5;
}

.website-process-header {
    max-width: 700px;

    margin-bottom: 35px;
}

.website-process-header h2 {
    margin: 0;

    color: var(--text-dark);

    font-size:
        clamp(31px, 3.2vw, 46px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.4px;
}

.website-process-header h2 span {
    display: block;

    color: var(--markance-blue);
}

.website-process-grid {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    border-top:
        1px solid #d8d8d8;

    border-bottom:
        1px solid #d8d8d8;
}

.website-process-item {
    position: relative;

    padding: 25px 20px;

    border-right:
        1px solid #d8d8d8;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.website-process-item:first-child {
    padding-left: 0;
}

.website-process-item:last-child {
    border-right: 0;
}

.website-process-item > span {
    display: block;

    margin-bottom: 35px;

    color: var(--markance-orange);

    font-size: 10px;
    font-weight: 700;
}

.website-process-item h3 {
    margin: 0 0 10px;

    color: var(--text-dark);

    font-size: 19px;
    font-weight: 700;

    transition: color 0.3s ease;
}

.website-process-item p {
    margin: 0;

    color: var(--text-grey);

    font-size: 12px;

    line-height: 1.65;
}

.website-process-item:hover {
    background: var(--markance-white);

    transform: translateY(-4px);
}

.website-process-item:hover h3 {
    color: var(--markance-blue);
}


/* WEBSITE SCREENSHOTS */

.website-work-image {
    background: #e9e9e9;
}


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

@media (max-width: 1000px) {

    .website-browser-art {
        right: -70px;

        opacity: 0.45;
    }

    .website-process-grid {
        grid-template-columns:
            repeat(2, 1fr);

        border-bottom: 0;
    }

    .website-process-item {
        border-bottom:
            1px solid #d8d8d8;
    }

    .website-process-item:first-child {
        padding-left: 20px;
    }

}


@media (max-width: 600px) {

    .website-browser-art {
        width: 240px;
        height: 150px;

        right: -110px;

        opacity: 0.28;
    }

    .website-process {
        padding: 45px 0 50px;
    }

    .website-process-header h2 {
        font-size: 30px;
    }

    .website-process-grid {
        grid-template-columns: 1fr;
    }

    .website-process-item {
        padding: 22px 0;

        border-right: 0;
    }

    .website-process-item:first-child {
        padding-left: 0;
    }

    .website-process-item > span {
        margin-bottom: 12px;
    }

}
/* =========================================================
   DIGITAL MARKETING SERVICE
========================================================= */

.marketing-service-hero {
    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(241, 90, 43, 0.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #061725,
            #07243a
        );
}


/* HERO GRAPHIC */

.marketing-hero-graphic {
    position: absolute;

    width: 360px;
    height: 260px;

    right: 7%;
    top: 50%;

    transform: translateY(-45%);
}

.marketing-line {
    position: absolute;

    left: 0;

    height: 2px;

    transform-origin: left;

    background:
        linear-gradient(
            90deg,
            rgba(8, 168, 229, 0.15),
            var(--markance-blue)
        );
}

.line-one {
    width: 250px;

    top: 180px;

    transform: rotate(-23deg);
}

.line-two {
    width: 190px;

    top: 150px;
    left: 105px;

    background:
        linear-gradient(
            90deg,
            rgba(241, 90, 43, 0.15),
            var(--markance-orange)
        );

    transform: rotate(-38deg);
}

.line-three {
    width: 145px;

    top: 105px;
    left: 195px;

    transform: rotate(-56deg);
}

.marketing-dot {
    position: absolute;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--markance-blue);

    box-shadow:
        0 0 0 8px
        rgba(8, 168, 229, 0.08);
}

.dot-one {
    left: 0;
    top: 174px;
}

.dot-two {
    left: 190px;
    top: 94px;

    background: var(--markance-orange);

    box-shadow:
        0 0 0 8px
        rgba(241, 90, 43, 0.08);
}

.dot-three {
    right: 10px;
    top: 25px;
}


/* =========================================================
   MARKETING FRAMEWORK
========================================================= */

.marketing-framework {
    padding: 65px 0 70px;

    background: #f5f5f5;
}

.marketing-framework-header {
    max-width: 700px;

    margin-bottom: 38px;
}

.marketing-framework-header h2 {
    margin: 0;

    color: var(--text-dark);

    font-size:
        clamp(31px, 3.2vw, 46px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.4px;
}

.marketing-framework-header h2 span {
    display: block;

    color: var(--markance-blue);
}


.marketing-framework-flow {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top: 1px solid #d8d8d8;
    border-left: 1px solid #d8d8d8;
}


.marketing-stage {
    position: relative;

    min-height: 210px;

    padding: 24px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;

    background: transparent;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.marketing-stage-number {
    color: var(--markance-orange);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;
}


.marketing-stage h3 {
    margin: 0 0 8px;

    color: var(--text-dark);

    font-size: 21px;
    font-weight: 700;

    transition: color 0.3s ease;
}


.marketing-stage p {
    max-width: 300px;

    margin: 0;

    color: var(--text-grey);

    font-size: 12px;

    line-height: 1.65;
}


.marketing-stage:hover {
    position: relative;
    z-index: 2;

    background: var(--markance-white);

    transform: translateY(-4px);
}


.marketing-stage:hover h3 {
    color: var(--markance-blue);
}


/* =========================================================
   MARKETING STATEMENT
========================================================= */

.marketing-statement {
    position: relative;

    padding: 65px 0;

    background: var(--markance-blue);

    overflow: hidden;
}


.marketing-statement::after {
    content: "DATA";

    position: absolute;

    right: -2%;
    bottom: -22%;

    color: rgba(255, 255, 255, 0.07);

    font-size: clamp(130px, 20vw, 290px);
    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -12px;
}


.marketing-statement-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}


.marketing-statement-content > span {
    display: block;

    margin-bottom: 17px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}


.marketing-statement h2 {
    margin: 0;

    color: #111111;

    font-size:
        clamp(31px, 3.3vw, 48px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}


.marketing-statement h2 strong {
    display: block;

    color: var(--markance-white);
}


.marketing-statement p {
    max-width: 540px;

    margin: 22px 0 0;

    color: rgba(255, 255, 255, 0.82);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   DIGITAL MARKETING RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .marketing-hero-graphic {
        right: -100px;

        opacity: 0.35;
    }

    .marketing-framework-flow {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .marketing-hero-graphic {
        width: 280px;

        right: -160px;

        opacity: 0.25;
    }

    .marketing-framework {
        padding: 45px 0 50px;
    }

    .marketing-framework-header h2 {
        font-size: 30px;
    }

    .marketing-framework-flow {
        grid-template-columns: 1fr;
    }

    .marketing-stage {
        min-height: 170px;

        padding: 20px;
    }

    .marketing-statement {
        padding: 48px 0;
    }

    .marketing-statement h2 {
        font-size: 30px;
    }

}
/* =========================================================
   PHOTOGRAPHY SERVICE
========================================================= */

.photography-service-hero {
    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(8, 168, 229, 0.15),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #061725,
            #07243a
        );
}


/* HERO CAMERA / FOCUS ART */

.photography-focus-art {
    position: absolute;

    right: 9%;
    top: 50%;

    width: 280px;
    height: 280px;

    transform: translateY(-50%);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}

.photography-focus-art span {
    position: absolute;

    width: 50px;
    height: 50px;
}

.photography-focus-art span:nth-child(1) {
    top: -1px;
    left: -1px;

    border-top:
        2px solid var(--markance-orange);

    border-left:
        2px solid var(--markance-orange);
}

.photography-focus-art span:nth-child(2) {
    top: -1px;
    right: -1px;

    border-top:
        2px solid var(--markance-blue);

    border-right:
        2px solid var(--markance-blue);
}

.photography-focus-art span:nth-child(3) {
    bottom: -1px;
    left: -1px;

    border-bottom:
        2px solid var(--markance-blue);

    border-left:
        2px solid var(--markance-blue);
}

.photography-focus-art span:nth-child(4) {
    right: -1px;
    bottom: -1px;

    border-right:
        2px solid var(--markance-orange);

    border-bottom:
        2px solid var(--markance-orange);
}

.photography-lens-art {
    position: absolute;

    right: calc(9% + 75px);
    top: 50%;

    width: 130px;
    height: 130px;

    transform: translateY(-50%);

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius: 50%;

    box-shadow:
        0 0 0 25px
        rgba(8, 168, 229, 0.025),

        0 0 0 50px
        rgba(255, 255, 255, 0.015);
}


/* =========================================================
   PHOTOGRAPHY STATEMENT
========================================================= */

.photography-statement {
    position: relative;

    padding: 65px 0;

    background: var(--markance-blue);

    overflow: hidden;
}

.photography-statement::after {
    content: "FRAME";

    position: absolute;

    right: -2%;
    bottom: -20%;

    color:
        rgba(255, 255, 255, 0.07);

    font-size:
        clamp(120px, 18vw, 270px);

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -10px;
}

.photography-statement-content {
    position: relative;

    z-index: 2;

    max-width: 900px;
}

.photography-statement-content > span {
    display: block;

    margin-bottom: 17px;

    color:
        rgba(255, 255, 255, 0.72);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.photography-statement h2 {
    margin: 0;

    color: #111111;

    font-size:
        clamp(31px, 3.3vw, 48px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.photography-statement h2 strong {
    display: block;

    color: var(--markance-white);
}

.photography-statement p {
    max-width: 540px;

    margin: 22px 0 0;

    color:
        rgba(255, 255, 255, 0.82);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   PHOTOGRAPHY GRID
========================================================= */

.photography-project-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


/* Different image proportions give this page
   more of an editorial photography feel. */

.photography-project-image {
    position: relative;

    width: 100%;

    height: 100%;

    min-height: 390px;

    overflow: hidden;

    background: #eeeeee;
}

.photography-project.photo-1
.photography-project-image,

.photography-project.photo-4
.photography-project-image {

    min-height: 540px;
}

.photography-project-image img {
    display: block;

    width: 100%;
    height: 100%;

    position: absolute;
    inset: 0;

    object-fit: cover;

    transition:
        transform 0.7s
        cubic-bezier(.2,.7,.2,1);
}

.photography-project:hover
.photography-project-image img {

    transform: scale(1.04);
}


/* OVERLAY */

.photography-project-overlay {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;

    padding: 22px;

    background:
        linear-gradient(
            to top,
            rgba(3, 18, 29, 0.8),
            rgba(3, 18, 29, 0.05) 58%,
            transparent
        );

    opacity: 0;

    transition:
        opacity 0.35s ease;
}

.photography-project:hover
.photography-project-overlay {

    opacity: 1;
}

.photography-project-overlay span {
    display: block;

    margin-bottom: 5px;

    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.photography-project-overlay h3 {
    margin: 0;

    color: var(--markance-white);

    font-size: 19px;
    font-weight: 700;
}

.photography-project-overlay strong {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    flex-shrink: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.45);

    border-radius: 50%;

    color: var(--markance-white);

    font-size: 18px;
}


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

@media (max-width: 900px) {

    .photography-focus-art {
        right: -60px;

        opacity: 0.35;
    }

    .photography-lens-art {
        right: 15px;

        opacity: 0.35;
    }

}


@media (max-width: 600px) {

    .photography-focus-art {
        width: 220px;
        height: 220px;

        right: -120px;

        opacity: 0.22;
    }

    .photography-lens-art {
        right: -40px;

        width: 100px;
        height: 100px;

        opacity: 0.25;
    }

    .photography-statement {
        padding: 48px 0;
    }

    .photography-statement h2 {
        font-size: 30px;
    }

    .photography-project-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .photography-project-image,
    .photography-project.photo-1
    .photography-project-image,
    .photography-project.photo-4
    .photography-project-image {

        min-height: 380px;
    }

    /* Keep information visible on touch devices */

    .photography-project-overlay {
        opacity: 1;

        padding: 18px;
    }

}
/* =========================================================
   VIDEOGRAPHY SERVICE
========================================================= */

.videography-service-hero {
    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(241, 90, 43, 0.14),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #061725,
            #07243a
        );
}


/* HERO VIDEO ART */

.video-frame-art {
    position: absolute;

    right: 8%;
    top: 50%;

    width: 320px;
    height: 205px;

    transform:
        translateY(-50%)
        rotate(-4deg);

    border:
        1px solid
        rgba(255, 255, 255, 0.13);
}

.video-frame-art::before,
.video-frame-art::after {
    content: "";

    position: absolute;

    width: 35px;
    height: 35px;
}

.video-frame-art::before {
    top: -1px;
    left: -1px;

    border-top:
        2px solid var(--markance-orange);

    border-left:
        2px solid var(--markance-orange);
}

.video-frame-art::after {
    right: -1px;
    bottom: -1px;

    border-right:
        2px solid var(--markance-blue);

    border-bottom:
        2px solid var(--markance-blue);
}

.video-play-shape {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 64px;
    height: 64px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(255, 255, 255, 0.4);

    border-radius: 50%;
}

.video-play-shape::after {
    content: "";

    position: absolute;

    left: 26px;
    top: 21px;

    width: 0;
    height: 0;

    border-top:
        10px solid transparent;

    border-bottom:
        10px solid transparent;

    border-left:
        15px solid var(--markance-orange);
}

.video-frame-line {
    position: absolute;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.12);
}

.video-frame-line.line-a {
    width: 100px;

    left: -50px;
    bottom: 35px;
}

.video-frame-line.line-b {
    width: 75px;

    right: -35px;
    top: 40px;

    background:
        rgba(8, 168, 229, 0.45);
}


/* =========================================================
   VIDEO STATEMENT
========================================================= */

.videography-statement {
    position: relative;

    padding: 65px 0;

    background: var(--markance-orange);

    overflow: hidden;
}

.videography-statement::after {
    content: "PLAY";

    position: absolute;

    right: -2%;
    bottom: -22%;

    color:
        rgba(255, 255, 255, 0.08);

    font-size:
        clamp(140px, 20vw, 290px);

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -12px;
}

.videography-statement-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.videography-statement-content > span {
    display: block;

    margin-bottom: 17px;

    color:
        rgba(255, 255, 255, 0.75);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.videography-statement h2 {
    margin: 0;

    color: #111111;

    font-size:
        clamp(31px, 3.3vw, 48px);

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -1.5px;
}

.videography-statement h2 strong {
    display: block;

    color: var(--markance-white);
}

.videography-statement p {
    max-width: 540px;

    margin: 22px 0 0;

    color:
        rgba(255, 255, 255, 0.85);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   VIDEO PROJECT GRID
========================================================= */

.videography-project-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 25px;
}

.videography-project-image {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #071d2c;
}

.videography-project-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.65s ease,
        filter 0.4s ease;
}

.videography-project:hover
.videography-project-image img {

    transform: scale(1.045);
}


/* PLAY BUTTON */

.video-play-button {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    transform:
        translate(-50%, -50%);

    border:
        1px solid
        rgba(255, 255, 255, 0.75);

    border-radius: 50%;

    background:
        rgba(5, 22, 34, 0.38);

    backdrop-filter: blur(4px);

    z-index: 3;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.video-play-button span {
    width: 0;
    height: 0;

    margin-left: 4px;

    border-top:
        7px solid transparent;

    border-bottom:
        7px solid transparent;

    border-left:
        11px solid var(--markance-white);
}

.videography-project:hover
.video-play-button {

    background: var(--markance-orange);

    transform:
        translate(-50%, -50%)
        scale(1.08);
}


/* PROJECT OVERLAY */

.videography-project-overlay {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;

    padding: 20px;

    background:
        linear-gradient(
            to top,
            rgba(3, 18, 29, 0.82),
            transparent 58%
        );

    z-index: 2;
}

.videography-project-overlay span {
    display: block;

    margin-bottom: 5px;

    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-transform: uppercase;
}

.videography-project-overlay h3 {
    margin: 0;

    color: var(--markance-white);

    font-size: 19px;
    font-weight: 700;
}


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

@media (max-width: 900px) {

    .video-frame-art {
        right: -80px;

        opacity: 0.35;
    }

}


@media (max-width: 600px) {

    .video-frame-art {
        width: 250px;
        height: 160px;

        right: -140px;

        opacity: 0.25;
    }

    .videography-statement {
        padding: 48px 0;
    }

    .videography-statement h2 {
        font-size: 30px;
    }

    .videography-project-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .video-play-button {
        width: 50px;
        height: 50px;
    }
/* =========================================================
   PORTFOLIO VIDEO PLAYER
========================================================= */

.project-video-section {
    padding: 55px 0 0;

    background: var(--markance-white);
}

.project-video-container {
    position: relative;

    width: 90%;
    max-width: var(--container);

    margin: 0 auto;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #061725;
}


/* YOUTUBE / VIMEO EMBEDS */

.project-video-container iframe,
.project-video-container video {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* FALLBACK LINK */

.project-video-fallback {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(8, 168, 229, 0.16),
            transparent 35%
        ),
        #061725;

    color: var(--markance-white);

    font-size: 14px;
    font-weight: 700;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.project-video-fallback:hover {
    color: var(--markance-orange);
}


@media (max-width: 600px) {

    .project-video-section {
        padding-top: 35px;
    }

    .project-video-container {
        width: 88%;
    }

}

/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-container,
.inner-hero-container {
    width: 90%;
    max-width: var(--container);
    margin: 0 auto;
}


/* =========================================================
   CONTACT HERO - IMAGE BACKGROUND
========================================================= */

.contact-hero {
    position: relative;
    min-height: 520px;

    display: flex;
    align-items: center;

    padding: 135px 0 70px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(4, 20, 31, 0.94) 0%,
            rgba(4, 20, 31, 0.78) 45%,
            rgba(4, 20, 31, 0.30) 100%
        ),
        url("../images/contact-hero.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* subtle orange accent */

.contact-hero::after {
    content: "";

    position: absolute;

    right: 8%;
    bottom: 0;

    width: 2px;
    height: 120px;

    background: var(--markance-orange);

    opacity: 0.8;
}


.contact-hero .inner-hero-container {
    position: relative;
    z-index: 3;
}


.contact-hero .inner-hero-content {
    max-width: 720px;
}


.contact-hero .inner-hero-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--markance-white);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.4px;
}


.contact-hero .inner-hero-label span {
    width: 30px;
    height: 2px;

    background: var(--markance-orange);
}


.contact-hero h1 {
    margin: 0;

    max-width: 760px;

    color: var(--markance-white);

    font-size: clamp(42px, 5vw, 68px);
    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -2.5px;
}


.contact-hero h1 span {
    display: block;

    color: var(--markance-blue);
}


.contact-hero p {
    max-width: 540px;

    margin: 22px 0 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 15px;

    line-height: 1.7;
}


/* Hide previous decorative hero artwork */

.contact-hero-art {
    display: none;
}


/* =========================================================
   CONTACT BODY
========================================================= */

.contact-section {
    position: relative;

    padding: 70px 0 80px;

    background: #ffffff;
}


.contact-section .contact-container {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap: 75px;

    align-items: start;
}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-information {
    position: relative;
}


.contact-information .service-detail-label {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}


.contact-information .service-detail-label span {
    width: 26px;
    height: 2px;

    background: var(--markance-blue);
}


.contact-information h2 {
    margin: 0;

    max-width: 480px;

    color: #111111;

    font-size: clamp(31px, 3.2vw, 46px);
    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -1.5px;
}


.contact-information h2 span {
    display: block;

    color: var(--markance-blue);
}


.contact-intro {
    max-width: 430px;

    margin: 18px 0 30px;

    color: #666666;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details {
    width: 100%;

    border-top: 1px solid #dddddd;
}


.contact-detail {
    display: grid;

    grid-template-columns: 35px 1fr;

    gap: 15px;

    padding: 18px 0;

    border-bottom: 1px solid #dddddd;
}


.contact-detail-number {
    padding-top: 3px;

    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


.contact-detail small {
    display: block;

    margin-bottom: 5px;

    color: #8a8a8a;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.contact-detail a,
.contact-detail p {
    display: inline-block;

    margin: 0;

    color: #111111;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.5;

    text-decoration: none;
}


.contact-detail a {
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.contact-detail a:hover {
    color: var(--markance-blue);
}


/* =========================================================
   QUOTATION LINK
========================================================= */

.contact-quote-link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;

    margin-top: 25px;

    padding: 17px 19px;

    background: #071d2c;

    color: var(--markance-white);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.contact-quote-link span {
    color: var(--markance-orange);

    font-weight: 700;
}


.contact-quote-link:hover {
    background: var(--markance-blue);

    transform: translateY(-2px);
}


.contact-quote-link:hover span {
    color: var(--markance-white);
}


/* =========================================================
   CONTACT FORM CARD
========================================================= */

.contact-form-area {
    position: relative;

    padding: 38px 40px;

    background: #f5f6f7;

    border-top: 4px solid var(--markance-blue);

    box-shadow:
        0 18px 45px
        rgba(7, 29, 44, 0.08);
}


/* orange detail */

.contact-form-area::before {
    content: "";

    position: absolute;

    top: -4px;
    right: 0;

    width: 90px;
    height: 4px;

    background: var(--markance-orange);
}


.markance-contact-form {
    width: 100%;
}


/* =========================================================
   FORM ROWS
========================================================= */

.form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;
}


.form-field {
    width: 100%;

    margin-bottom: 23px;
}


.form-field label {
    display: block;

    margin-bottom: 8px;

    color: #222222;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.5px;
}


/* =========================================================
   INPUTS
========================================================= */

.form-field input,
.form-field textarea {
    display: block;

    width: 100%;

    padding: 12px 0;

    border: 0;

    border-bottom:
        1px solid #c9cdd0;

    border-radius: 0;

    outline: none;

    background: transparent;

    color: #111111;

    font-family: inherit;
    font-size: 14px;

    box-sizing: border-box;

    transition:
        border-color 0.25s ease;
}


.form-field input:focus,
.form-field textarea:focus {
    border-bottom-color:
        var(--markance-blue);
}


.form-field textarea {
    min-height: 135px;

    resize: vertical;
}


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

.contact-submit {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 150px;

    padding: 14px 24px;

    border: 0;

    border-radius: 5px;

    background:
        var(--markance-orange);

    color:
        var(--markance-white);

    font-family: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.contact-submit:hover {
    background:
        var(--markance-blue);

    transform:
        translateY(-2px);
}


/* =========================================================
   FORM STATUS
========================================================= */

.form-message {
    margin-bottom: 25px;

    padding: 16px 18px;

    background: #ffffff;

    border-left: 3px solid;
}


.form-message.success {
    border-color:
        var(--markance-blue);
}


.form-message.error {
    border-color:
        var(--markance-orange);
}


.form-message strong {
    display: block;

    margin-bottom: 5px;

    color: #111111;

    font-size: 13px;
}


.form-message p {
    margin: 0;

    color: #666666;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    .contact-hero {
        min-height: 480px;

        background-position: 62% center;
    }


    .contact-section .contact-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .contact-information {
        max-width: 650px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 600px) {

    .contact-container,
    .inner-hero-container {
        width: 88%;
    }


    .contact-hero {
        min-height: 440px;

        padding: 115px 0 55px;

        background:
            linear-gradient(
                90deg,
                rgba(4, 20, 31, 0.94),
                rgba(4, 20, 31, 0.67)
            ),
            url("../images/contact-hero.jpg");

        background-size: cover;

        background-position: center;
    }


    .contact-hero h1 {
        font-size: 39px;

        letter-spacing: -1.7px;
    }


    .contact-hero p {
        font-size: 13px;
    }


    .contact-section {
        padding: 48px 0 55px;
    }


    .contact-information h2 {
        font-size: 30px;
    }


    .contact-section .contact-container {
        gap: 35px;
    }


    .contact-form-area {
        padding: 28px 22px;
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .contact-detail {
        grid-template-columns:
            30px 1fr;
    }


    .contact-quote-link {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }

}
}

/* =========================================================
   28. REDUCED MOTION ACCESSIBILITY
========================================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}
/* =========================================================
   SERVICES SECTION
========================================================= */

.services-section {
    padding: 65px 0 70px;

    background: #111111;

    color: var(--markance-white);
}

.services-container {
    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}


/* =========================================================
   SERVICES HEADER
========================================================= */

.services-header {
    margin-bottom: 45px;
}

.section-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.5px;
}

.section-label span {
    width: 25px;
    height: 2px;

    background: var(--markance-orange);
}


.services-heading {
    display: grid;

    grid-template-columns: 1fr 0.65fr;

    gap: 60px;

    align-items: end;
}


.services-heading h2 {
    max-width: 600px;

    margin: 0;

    font-size: clamp(32px, 3.3vw, 48px);

    line-height: 1.08;

    letter-spacing: -1.5px;

    font-weight: 800;
}

.services-heading h2 span {
    display: block;

    color: var(--markance-blue);
}


.services-heading p {
    max-width: 480px;

    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   SERVICES LIST
========================================================= */

.services-list {
    width: 100%;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}


.service-item {
    position: relative;

    display: grid;

    grid-template-columns:
        55px
        minmax(280px, 0.9fr)
        minmax(320px, 1fr)
        45px;

    gap: 25px;

    align-items: center;

    min-height: 105px;

    padding: 20px 5px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.18);

    color: var(--markance-white);

    overflow: hidden;

    transition:
        padding 0.35s ease,
        background 0.35s ease;
}


/* Orange hover line */

.service-item::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background: var(--markance-orange);

    transition: width 0.45s ease;
}

.service-item:hover::before {
    width: 100%;
}


/* Number */

.service-number {
    color: var(--markance-orange);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* Service title */

.service-item h3 {
    margin: 0;

    font-size: clamp(21px, 2vw, 29px);

    line-height: 1.1;

    letter-spacing: -0.6px;

    font-weight: 700;

    transition:
        color 0.3s ease,
        transform 0.35s ease;
}


/* Description */

.service-item p {
    max-width: 500px;

    margin: 0;

    color: rgba(255, 255, 255, 0.55);

    font-size: 13px;

    line-height: 1.65;

    transition: color 0.3s ease;
}


/* Action circle */

.service-action {
    width: 35px;
    height: 35px;

    display: flex;
    align-items: center;
    justify-content: center;

    justify-self: end;

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    font-size: 18px;
    font-weight: 300;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.35s ease;
}


/* =========================================================
   SERVICES HOVER
========================================================= */

.service-item:hover {
    padding-left: 15px;
    padding-right: 15px;

    background: rgba(255, 255, 255, 0.025);
}

.service-item:hover h3 {
    color: var(--markance-blue);

    transform: translateX(5px);
}

.service-item:hover p {
    color: rgba(255, 255, 255, 0.82);
}

.service-item:hover .service-action {
    background: var(--markance-orange);

    border-color: var(--markance-orange);

    color: var(--markance-white);

    transform: rotate(90deg);
}


/* =========================================================
   SERVICES TABLET
========================================================= */

@media (max-width: 900px) {

    .services-section {
        padding: 55px 0;
    }

    .services-heading {
        grid-template-columns: 1fr;

        gap: 20px;
    }

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

    .service-item {
        grid-template-columns:
            40px
            1fr
            40px;

        gap: 18px;
    }

    .service-item p {
        grid-column: 2 / 3;

        margin-top: -8px;
    }

    .service-action {
        grid-column: 3;
        grid-row: 1 / 3;
    }

}


/* =========================================================
   SERVICES MOBILE
========================================================= */

@media (max-width: 600px) {

    .services-section {
        padding: 45px 0;
    }

    .services-container {
        width: 88%;
    }

    .services-heading h2 {
        font-size: 30px;
    }

    .services-heading p {
        font-size: 13px;
    }

    .service-item {
        grid-template-columns: 30px 1fr 34px;

        min-height: auto;

        padding: 22px 0;

        gap: 12px;
    }

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

    .service-item h3 {
        font-size: 21px;
    }

    .service-item p {
        font-size: 12px;
    }

    .service-action {
        width: 32px;
        height: 32px;

        font-size: 16px;
    }

    .service-item:hover {
        padding-left: 0;
        padding-right: 0;
    }

}
/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.floating-whatsapp {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 950;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #25D366;

    border-radius: 50%;

    color: #ffffff;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.floating-whatsapp svg {
    width: 28px;
    height: 28px;

    fill: currentColor;
}


.floating-whatsapp:hover {
    transform: translateY(-4px) scale(1.04);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28);
}


/* Small pulse ring */

.floating-whatsapp::before {
    content: "";

    position: absolute;

    inset: -5px;

    border: 1px solid rgba(37, 211, 102, 0.45);

    border-radius: 50%;

    animation: whatsappPulse 2.4s ease-out infinite;
}


@keyframes whatsappPulse {

    0% {
        transform: scale(0.9);
        opacity: 0.8;
    }

    70%,
    100% {
        transform: scale(1.25);
        opacity: 0;
    }

}


@media (max-width: 600px) {

    .floating-whatsapp {
        right: 16px;
        bottom: 16px;

        width: 50px;
        height: 50px;
    }

    .floating-whatsapp svg {
        width: 26px;
        height: 26px;
    }

}

/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-container,
.inner-hero-container {
    width: 90%;
    max-width: var(--container);
    margin: 0 auto;
}


/* =========================================================
   CONTACT HERO - IMAGE BACKGROUND
========================================================= */

.contact-hero {
    position: relative;
    min-height: 520px;

    display: flex;
    align-items: center;

    padding: 135px 0 70px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            rgba(4, 20, 31, 0.94) 0%,
            rgba(4, 20, 31, 0.78) 45%,
            rgba(4, 20, 31, 0.30) 100%
        ),
        url("../images/contact-hero.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* subtle orange accent */

.contact-hero::after {
    content: "";

    position: absolute;

    right: 8%;
    bottom: 0;

    width: 2px;
    height: 120px;

    background: var(--markance-orange);

    opacity: 0.8;
}


.contact-hero .inner-hero-container {
    position: relative;
    z-index: 3;
}


.contact-hero .inner-hero-content {
    max-width: 720px;
}


.contact-hero .inner-hero-label {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: var(--markance-white);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2.4px;
}


.contact-hero .inner-hero-label span {
    width: 30px;
    height: 2px;

    background: var(--markance-orange);
}


.contact-hero h1 {
    margin: 0;

    max-width: 760px;

    color: var(--markance-white);

    font-size: clamp(42px, 5vw, 68px);
    font-weight: 800;

    line-height: 0.98;

    letter-spacing: -2.5px;
}


.contact-hero h1 span {
    display: block;

    color: var(--markance-blue);
}


.contact-hero p {
    max-width: 540px;

    margin: 22px 0 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 15px;

    line-height: 1.7;
}


/* Hide previous decorative hero artwork */

.contact-hero-art {
    display: none;
}


/* =========================================================
   CONTACT BODY
========================================================= */

.contact-section {
    position: relative;

    padding: 70px 0 80px;

    background: #f3f5f6;
}


.contact-section .contact-container {
    display: grid;

    grid-template-columns:
        minmax(0, 0.8fr)
        minmax(0, 1.2fr);

    gap: 75px;

    align-items: start;
}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-information {
    position: relative;
}


.contact-information .service-detail-label {
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}


.contact-information .service-detail-label span {
    width: 26px;
    height: 2px;

    background: var(--markance-blue);
}


.contact-information h2 {
    margin: 0;

    max-width: 480px;

    color: #111111;

    font-size: clamp(31px, 3.2vw, 46px);
    font-weight: 800;

    line-height: 1.05;

    letter-spacing: -1.5px;
}


.contact-information h2 span {
    display: block;

    color: var(--markance-blue);
}


.contact-intro {
    max-width: 430px;

    margin: 18px 0 30px;

    color: #666666;

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   CONTACT DETAILS
========================================================= */

.contact-details {
    width: 100%;

    border-top: 1px solid #dddddd;
}


.contact-detail {
    display: grid;

    grid-template-columns: 35px 1fr;

    gap: 15px;

    padding: 18px 0;

    border-bottom: 1px solid #dddddd;
}


.contact-detail-number {
    padding-top: 3px;

    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


.contact-detail small {
    display: block;

    margin-bottom: 5px;

    color: #8a8a8a;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.contact-detail a,
.contact-detail p {
    display: inline-block;

    margin: 0;

    color: #111111;

    font-size: 14px;
    font-weight: 600;

    line-height: 1.5;

    text-decoration: none;
}


.contact-detail a {
    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.contact-detail a:hover {
    color: var(--markance-blue);
}


/* =========================================================
   QUOTATION LINK
========================================================= */

.contact-quote-link {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;

    margin-top: 25px;

    padding: 17px 19px;

    background: #071d2c;

    color: var(--markance-white);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.contact-quote-link span {
    color: var(--markance-orange);

    font-weight: 700;
}


.contact-quote-link:hover {
    background: var(--markance-blue);

    transform: translateY(-2px);
}


.contact-quote-link:hover span {
    color: var(--markance-white);
}


/* =========================================================
   CONTACT FORM CARD
========================================================= */

.contact-form-area {
    position: relative;

    padding: 38px 40px;

    background: #f5f6f7;

    border-top: 4px solid var(--markance-blue);

    box-shadow:
        0 18px 45px
        rgba(7, 29, 44, 0.08);
}


/* orange detail */

.contact-form-area::before {
    content: "";

    position: absolute;

    top: -4px;
    right: 0;

    width: 90px;
    height: 4px;

    background: var(--markance-orange);
}


.markance-contact-form {
    width: 100%;
}


/* =========================================================
   FORM ROWS
========================================================= */

.form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;
}


.form-field {
    width: 100%;

    margin-bottom: 23px;
}


.form-field label {
    display: block;

    margin-bottom: 8px;

    color: #222222;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.5px;
}


/* =========================================================
   INPUTS
========================================================= */

.form-field input,
.form-field textarea {
    display: block;

    width: 100%;

    padding: 12px 0;

    border: 0;

    border-bottom:
        1px solid #c9cdd0;

    border-radius: 0;

    outline: none;

    background: transparent;

    color: #111111;

    font-family: inherit;
    font-size: 14px;

    box-sizing: border-box;

    transition:
        border-color 0.25s ease;
}


.form-field input:focus,
.form-field textarea:focus {
    border-bottom-color:
        var(--markance-blue);
}


.form-field textarea {
    min-height: 135px;

    resize: vertical;
}


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

.contact-submit {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 150px;

    padding: 14px 24px;

    border: 0;

    border-radius: 5px;

    background:
        var(--markance-orange);

    color:
        var(--markance-white);

    font-family: inherit;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.contact-submit:hover {
    background:
        var(--markance-blue);

    transform:
        translateY(-2px);
}


/* =========================================================
   FORM STATUS
========================================================= */

.form-message {
    margin-bottom: 25px;

    padding: 16px 18px;

    background: #ffffff;

    border-left: 3px solid;
}


.form-message.success {
    border-color:
        var(--markance-blue);
}


.form-message.error {
    border-color:
        var(--markance-orange);
}


.form-message strong {
    display: block;

    margin-bottom: 5px;

    color: #111111;

    font-size: 13px;
}


.form-message p {
    margin: 0;

    color: #666666;

    font-size: 12px;

    line-height: 1.6;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 900px) {

    .contact-hero {
        min-height: 480px;

        background-position: 62% center;
    }


    .contact-section .contact-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .contact-information {
        max-width: 650px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 600px) {

    .contact-container,
    .inner-hero-container {
        width: 88%;
    }


    .contact-hero {
        min-height: 440px;

        padding: 115px 0 55px;

        background:
            linear-gradient(
                90deg,
                rgba(4, 20, 31, 0.94),
                rgba(4, 20, 31, 0.67)
            ),
            url("../images/contact-hero.jpg");

        background-size: cover;

        background-position: center;
    }


    .contact-hero h1 {
        font-size: 39px;

        letter-spacing: -1.7px;
    }


    .contact-hero p {
        font-size: 13px;
    }


    .contact-section {
        padding: 48px 0 55px;
    }


    .contact-information h2 {
        font-size: 30px;
    }


    .contact-section .contact-container {
        gap: 35px;
    }


    .contact-form-area {
        padding: 28px 22px;
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .contact-detail {
        grid-template-columns:
            30px 1fr;
    }


    .contact-quote-link {
        flex-direction: column;

        align-items: flex-start;

        gap: 5px;
    }

}

/* =========================================================
   REQUEST QUOTATION PAGE
========================================================= */

.quote-hero {
    position: relative;

    min-height: 520px;

    display: flex;
    align-items: center;

    padding: 135px 0 70px;

    background:
        linear-gradient(
            90deg,
            rgba(4, 20, 31, 0.95) 0%,
            rgba(4, 20, 31, 0.78) 48%,
            rgba(4, 20, 31, 0.28) 100%
        ),
        url("../images/quotation-hero.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}

.quote-hero-container {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}

.quote-hero-content {
    max-width: 750px;
}

.quote-hero-content h1 {
    max-width: 700px;

    margin: 18px 0 20px;

    color: var(--markance-white);

    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.02;
    letter-spacing: -2px;
}

.quote-hero-content h1 span {
    color: var(--markance-blue);
}

.quote-hero-content p {
    max-width: 570px;

    color: rgba(255, 255, 255, 0.82);

    font-size: 16px;
    line-height: 1.7;
}


/* MAIN SECTION */

.quotation-section {
    padding: 70px 0 80px;

    background: #f3f5f6;
}

.quotation-container {
    width: 90%;
    max-width: var(--container);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    gap: 75px;

    align-items: start;
}


/* LEFT CONTENT */

.quotation-intro {
    padding-top: 10px;
}

.quotation-intro h2 {
    max-width: 480px;

    margin: 16px 0 18px;

    color: var(--text-dark);

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.quotation-intro h2 span {
    color: var(--markance-blue);
}

.quotation-intro > p {
    max-width: 520px;

    color: var(--text-grey);

    font-size: 15px;
    line-height: 1.75;
}


/* PROCESS */

.quotation-process {
    display: grid;

    gap: 8px;

    margin-top: 35px;
}

.quotation-step {
    display: grid;

    grid-template-columns: 45px 1fr;

    gap: 17px;

    padding: 19px 18px;

    background: var(--markance-white);

    border-bottom: 1px solid #e3e6e8;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.quotation-step:hover {
    transform: translateX(4px);

    box-shadow:
        0 8px 25px rgba(7, 29, 44, 0.07);
}

.quotation-step > span {
    color: var(--markance-orange);

    font-size: 12px;
    font-weight: 800;
}

.quotation-step strong {
    display: block;

    margin-bottom: 5px;

    color: var(--text-dark);

    font-size: 15px;
}

.quotation-step p {
    color: var(--text-grey);

    font-size: 13px;
    line-height: 1.6;
}


/* FORM CARD */

.quotation-form-area {
    position: relative;

    padding: 38px 40px;

    background: var(--markance-white);

    border-top: 4px solid var(--markance-blue);

    border-radius: 0 0 8px 8px;

    box-shadow:
        0 16px 45px rgba(7, 29, 44, 0.10);
}

.markance-quotation-form {
    display: grid;

    gap: 20px;
}

.markance-quotation-form .form-row {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.markance-quotation-form .form-field {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.markance-quotation-form label {
    color: var(--text-dark);

    font-size: 12px;
    font-weight: 700;
}

.markance-quotation-form input,
.markance-quotation-form select,
.markance-quotation-form textarea {
    width: 100%;

    padding: 13px 14px;

    border: 1px solid #d9dee1;

    border-radius: 4px;

    outline: none;

    background: #fafafa;

    color: var(--text-dark);

    font-size: 14px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.markance-quotation-form textarea {
    resize: vertical;

    min-height: 150px;
}

.markance-quotation-form input:focus,
.markance-quotation-form select:focus,
.markance-quotation-form textarea:focus {
    border-color: var(--markance-blue);

    background: var(--markance-white);

    box-shadow:
        0 0 0 3px rgba(8, 168, 229, 0.08);
}


/* HONEYPOT */

.quote-honeypot {
    position: absolute !important;

    left: -9999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}


/* RESPONSIVE */

@media (max-width: 950px) {

    .quotation-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .quotation-intro {
        max-width: 700px;
    }

}


@media (max-width: 600px) {

    .quote-hero {
        min-height: 470px;

        padding:
            120px 0
            55px;
    }

    .quote-hero-container,
    .quotation-container {
        width: 88%;
    }

    .quote-hero-content h1 {
        font-size: 40px;

        letter-spacing: -1.3px;
    }

    .quotation-section {
        padding:
            50px 0
            60px;
    }

    .quotation-form-area {
        padding:
            28px 20px;
    }

    .markance-quotation-form .form-row {
        grid-template-columns: 1fr;

        gap: 20px;
    }

}
/* =========================================================
   BLOG ARCHIVE
========================================================= */

.blog-hero {
    position: relative;
}

.blog-hero-art {
    position: absolute;
    right: 5%;
    bottom: 0;

    width: 360px;
    height: 300px;

    pointer-events: none;
}

.blog-art-line {
    position: absolute;

    display: block;

    background: var(--markance-blue);
}

.blog-art-line.line-one {
    right: 50px;
    bottom: 30px;

    width: 5px;
    height: 210px;

    transform: rotate(25deg);
}

.blog-art-line.line-two {
    right: 145px;
    bottom: 15px;

    width: 5px;
    height: 155px;

    background: var(--markance-orange);

    transform: rotate(-32deg);
}

.blog-art-circle {
    position: absolute;

    right: 5px;
    top: 15px;

    width: 120px;
    height: 120px;

    border: 2px solid rgba(255,255,255,.18);
    border-radius: 50%;
}


/* BLOG BODY */

.blog-archive {
    padding: 65px 0 80px;

    background: #f3f5f6;
}

.blog-archive-container {
    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}


/* HEADING */

.blog-archive-heading {
    margin-bottom: 35px;
}

.blog-archive-heading h2 {
    margin: 14px 0 0;

    color: var(--text-dark);

    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.05;
    letter-spacing: -1.5px;
}

.blog-archive-heading h2 span {
    color: var(--markance-blue);
}


/* BLOG GRID */

.blog-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* CARD */

.blog-card {
    overflow: hidden;

    background: var(--markance-white);

    border-bottom: 3px solid transparent;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);

    border-color: var(--markance-blue);

    box-shadow:
        0 18px 45px rgba(7,29,44,.10);
}


/* IMAGE */

.blog-card-image {
    position: relative;

    display: block;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #071d2c;
}

.blog-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.045);
}

.blog-image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #071d2c,
            #0c3047
        );
}

.blog-image-placeholder span {
    color: rgba(255,255,255,.18);

    font-size: 20px;
    font-weight: 800;

    letter-spacing: 4px;
}


/* CONTENT */

.blog-card-content {
    padding: 23px 23px 26px;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 14px;

    color: #81878b;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: .7px;
}

.blog-card-meta span {
    color: var(--markance-orange);
}

.blog-card-content h2 {
    margin: 0 0 12px;

    font-size: 21px;
    line-height: 1.25;
    letter-spacing: -.4px;
}

.blog-card-content h2 a {
    color: var(--text-dark);

    transition: color .25s ease;
}

.blog-card-content h2 a:hover {
    color: var(--markance-blue);
}

.blog-card-content p {
    margin: 0 0 20px;

    color: var(--text-grey);

    font-size: 14px;
    line-height: 1.7;
}


/* READ MORE */

.blog-read-more {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--text-dark);

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .6px;
}

.blog-read-more span {
    color: var(--markance-blue);

    transition: transform .25s ease;
}

.blog-read-more:hover {
    color: var(--markance-blue);
}

.blog-read-more:hover span {
    transform: translateX(4px);
}


/* PAGINATION */

.blog-pagination {
    margin-top: 50px;
}

.blog-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.blog-pagination .page-numbers {
    min-width: 40px;
    height: 40px;

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

    padding: 0 13px;

    background: var(--markance-white);

    color: var(--text-dark);

    font-size: 12px;
    font-weight: 700;

    transition:
        background .25s ease,
        color .25s ease;
}

.blog-pagination .page-numbers:hover,
.blog-pagination .page-numbers.current {
    background: var(--markance-blue);

    color: var(--markance-white);
}


/* EMPTY */

.blog-empty {
    padding: 45px;

    background: var(--markance-white);
}

.blog-empty h3 {
    margin-bottom: 8px;

    font-size: 24px;
}

.blog-empty p {
    color: var(--text-grey);
}


/* RESPONSIVE */

@media (max-width: 1000px) {

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

    .blog-hero-art {
        opacity: .45;
    }

}


@media (max-width: 650px) {

    .blog-archive {
        padding: 50px 0 60px;
    }

    .blog-archive-container {
        width: 88%;
    }

    .blog-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .blog-card-content {
        padding: 20px;
    }

    .blog-card-content h2 {
        font-size: 20px;
    }

    .blog-hero-art {
        display: none;
    }

}
/* =========================================================
   SINGLE BLOG ARTICLE
========================================================= */

.single-blog-hero {
    position: relative;

    padding: 155px 0 70px;

    background:
        radial-gradient(
            circle at 85% 25%,
            rgba(8, 168, 229, .15),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #04141f,
            #082536
        );
}

.single-blog-hero-container {
    width: 90%;
    max-width: 1050px;

    margin: 0 auto;
}

.single-blog-back {
    margin-bottom: 38px;
}

.single-blog-back a {
    color: rgba(255, 255, 255, .65);

    font-size: 12px;
    font-weight: 700;

    transition: color .25s ease;
}

.single-blog-back a:hover {
    color: var(--markance-blue);
}


/* META */

.single-blog-meta {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 18px;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: .8px;
}

.single-blog-category {
    color: var(--markance-orange);
}

.single-blog-date {
    color: rgba(255, 255, 255, .55);
}


/* TITLE */

.single-blog-hero h1 {
    max-width: 950px;

    margin: 0;

    color: var(--markance-white);

    font-size: clamp(38px, 5vw, 62px);
    line-height: 1.05;

    letter-spacing: -2px;
}

.single-blog-excerpt {
    max-width: 720px;

    margin: 22px 0 0;

    color: rgba(255, 255, 255, .72);

    font-size: 17px;
    line-height: 1.7;
}


/* FEATURED IMAGE */

.single-blog-featured {
    padding: 55px 0 0;

    background: var(--markance-white);
}

.single-blog-featured-container {
    width: 90%;
    max-width: 1180px;

    margin: 0 auto;
}

.single-blog-featured img {
    display: block;

    width: 100%;
    max-height: 620px;

    object-fit: cover;
}


/* ARTICLE BODY */

.single-blog-content-section {
    padding: 65px 0 80px;

    background: var(--markance-white);
}

.single-blog-layout {
    width: 90%;
    max-width: 1180px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        270px;

    gap: 80px;

    align-items: start;
}


/* TYPOGRAPHY */

.single-blog-content {
    max-width: 760px;

    color: #333333;

    font-size: 16px;
    line-height: 1.85;
}

.single-blog-content > *:first-child {
    margin-top: 0;
}

.single-blog-content p {
    margin: 0 0 24px;
}

.single-blog-content h2 {
    margin: 45px 0 17px;

    color: var(--text-dark);

    font-size: 30px;
    line-height: 1.15;

    letter-spacing: -.8px;
}

.single-blog-content h3 {
    margin: 35px 0 14px;

    color: var(--text-dark);

    font-size: 23px;
    line-height: 1.25;
}

.single-blog-content h4 {
    margin: 30px 0 12px;

    color: var(--text-dark);

    font-size: 19px;
}

.single-blog-content a {
    color: var(--markance-blue);

    text-decoration: underline;

    text-underline-offset: 3px;
}

.single-blog-content ul,
.single-blog-content ol {
    margin: 0 0 25px;

    padding-left: 23px;
}

.single-blog-content li {
    margin-bottom: 8px;
}

.single-blog-content blockquote {
    margin: 35px 0;

    padding: 8px 0 8px 25px;

    border-left:
        4px solid var(--markance-orange);

    color: #555555;

    font-size: 19px;
    line-height: 1.6;
}

.single-blog-content img {
    max-width: 100%;
    height: auto;

    margin: 15px 0;
}


/* SIDEBAR */

.single-blog-sidebar {
    position: sticky;

    top: 120px;

    display: grid;

    gap: 18px;
}

.article-sidebar-block {
    padding: 25px;

    background: #f3f5f6;
}

.article-sidebar-label {
    display: block;

    margin-bottom: 22px;

    color: var(--markance-blue);

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.article-sidebar-details {
    display: grid;

    gap: 18px;
}

.article-sidebar-details div {
    padding-bottom: 17px;

    border-bottom:
        1px solid #dde1e3;
}

.article-sidebar-details div:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.article-sidebar-details span {
    display: block;

    margin-bottom: 5px;

    color: #8a8f92;

    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: .7px;
}

.article-sidebar-details strong {
    color: var(--text-dark);

    font-size: 13px;
}


/* SIDEBAR CTA */

.article-sidebar-cta {
    padding: 27px 25px;

    background: #061d2c;

    color: var(--markance-white);
}

.article-sidebar-cta > span {
    display: block;

    margin-bottom: 12px;

    color: var(--markance-orange);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;
}

.article-sidebar-cta h3 {
    margin: 0 0 20px;

    color: var(--markance-white);

    font-size: 20px;
    line-height: 1.25;
}

.article-sidebar-cta a {
    display: inline-flex;

    padding-bottom: 4px;

    border-bottom:
        1px solid var(--markance-blue);

    color: var(--markance-white);

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;

    transition: color .25s ease;
}

.article-sidebar-cta a:hover {
    color: var(--markance-blue);
}


/* =========================================================
   MORE ARTICLES
========================================================= */

.more-articles {
    padding: 65px 0 75px;

    background: #f3f5f6;
}

.more-articles-container {
    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}

.more-articles-heading {
    margin-bottom: 30px;
}

.more-articles-heading h2 {
    margin: 14px 0 0;

    color: var(--text-dark);

    font-size: clamp(30px, 4vw, 44px);

    line-height: 1.05;

    letter-spacing: -1.4px;
}

.more-articles-heading h2 span {
    color: var(--markance-blue);
}

.more-articles-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}

.more-article-card {
    background: var(--markance-white);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.more-article-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 15px 40px rgba(7, 29, 44, .09);
}

.more-article-image {
    display: block;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #061d2c;
}

.more-article-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}

.more-article-card:hover
.more-article-image img {
    transform: scale(1.04);
}

.more-article-content {
    padding: 20px 21px 23px;
}

.more-article-content > span {
    display: block;

    margin-bottom: 9px;

    color: var(--markance-orange);

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;
}

.more-article-content h3 {
    margin: 0 0 18px;

    font-size: 19px;
    line-height: 1.3;
}

.more-article-content h3 a {
    color: var(--text-dark);
}

.more-article-content h3 a:hover {
    color: var(--markance-blue);
}


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

@media (max-width: 900px) {

    .single-blog-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .single-blog-content {
        max-width: none;
    }

    .single-blog-sidebar {
        position: static;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .more-articles-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .single-blog-hero {
        padding:
            125px 0
            55px;
    }

    .single-blog-hero-container,
    .single-blog-featured-container,
    .single-blog-layout,
    .more-articles-container {
        width: 88%;
    }

    .single-blog-back {
        margin-bottom: 28px;
    }

    .single-blog-hero h1 {
        font-size: 38px;

        letter-spacing: -1.2px;
    }

    .single-blog-excerpt {
        font-size: 15px;
    }

    .single-blog-featured {
        padding-top: 35px;
    }

    .single-blog-content-section {
        padding:
            45px 0
            55px;
    }

    .single-blog-content {
        font-size: 15px;
    }

    .single-blog-content h2 {
        margin-top: 38px;

        font-size: 26px;
    }

    .single-blog-sidebar {
        grid-template-columns: 1fr;
    }

    .more-articles {
        padding:
            50px 0
            60px;
    }

    .more-articles-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   MARKANCE GRAPHICS
   FINAL RESPONSIVE SYSTEM
========================================================= */

/* Prevent horizontal overflow */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    :root {
        --header-height: 78px;
    }

    /* Hide desktop navigation */

    .main-navigation,
    .quote-button {
        display: none;
    }

    .mobile-menu-button {
        display: flex;
    }


    /* GENERAL CONTAINERS */

    .inner-hero-container,
    .service-detail-container,
    .portfolio-container,
    .blog-archive-container,
    .single-blog-hero-container,
    .single-blog-featured-container,
    .single-blog-layout,
    .more-articles-container,
    .contact-container,
    .quotation-container {
        width: 90%;
    }


    /* HERO SECTIONS */

    .inner-hero,
    .service-detail-hero,
    .contact-hero,
    .quote-hero {
        min-height: 500px;

        padding:
            125px 0
            65px;
    }


    /* TWO COLUMN SECTIONS */

    .contact-container,
    .quotation-container,
    .single-blog-layout {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    /* BLOG */

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

    .more-articles-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    /* SIDEBAR */

    .single-blog-sidebar {
        position: static;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 650px) {

    :root {
        --header-height: 72px;
    }


    /* CONTAINERS */

    .inner-hero-container,
    .service-detail-container,
    .portfolio-container,
    .blog-archive-container,
    .single-blog-hero-container,
    .single-blog-featured-container,
    .single-blog-layout,
    .more-articles-container,
    .contact-container,
    .quotation-container {
        width: 88%;
    }


    /* =====================================================
       HERO SECTIONS
    ====================================================== */

    .inner-hero,
    .service-detail-hero,
    .contact-hero,
    .quote-hero {
        min-height: 450px;

        padding:
            115px 0
            50px;
    }

    .inner-hero h1,
    .service-detail-hero h1,
    .quote-hero-content h1 {
        font-size: 38px;

        line-height: 1.05;

        letter-spacing: -1.2px;
    }

    .inner-hero p,
    .service-detail-hero p,
    .quote-hero-content p {
        font-size: 15px;

        line-height: 1.65;
    }


    /* =====================================================
       SECTION SPACING
    ====================================================== */

    .contact-section,
    .quotation-section,
    .blog-archive,
    .single-blog-content-section,
    .more-articles {
        padding-top: 48px;
        padding-bottom: 55px;
    }


    /* =====================================================
       HEADINGS
    ====================================================== */

    .contact-information h2,
    .quotation-intro h2,
    .blog-archive-heading h2,
    .more-articles-heading h2 {
        font-size: 30px;

        line-height: 1.08;

        letter-spacing: -1px;
    }


    /* =====================================================
       CONTACT
    ====================================================== */

    .contact-container {
        gap: 38px;
    }

    .contact-information > p {
        font-size: 14px;

        line-height: 1.7;
    }

    .contact-detail {
        grid-template-columns:
            32px 1fr;

        gap: 12px;

        padding:
            16px 14px;
    }

    .contact-form-area {
        padding:
            27px 20px;
    }


    /* =====================================================
       QUOTATION
    ====================================================== */

    .quotation-container {
        gap: 38px;
    }

    .quotation-step {
        grid-template-columns:
            38px 1fr;

        gap: 13px;

        padding:
            17px 14px;
    }

    .quotation-form-area {
        padding:
            27px 20px;
    }

    .markance-quotation-form .form-row {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    /* =====================================================
       FORM CONTROLS
    ====================================================== */

    .markance-contact-form input,
    .markance-contact-form select,
    .markance-contact-form textarea,
    .markance-quotation-form input,
    .markance-quotation-form select,
    .markance-quotation-form textarea {
        font-size: 16px;
    }

    .contact-submit {
        width: 100%;

        justify-content: center;
    }


    /* =====================================================
       BLOG ARCHIVE
    ====================================================== */

    .blog-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .blog-card-content {
        padding:
            20px 19px
            23px;
    }

    .blog-card-content h2 {
        font-size: 20px;
    }

    .blog-card-meta {
        align-items: flex-start;

        flex-direction: column;

        gap: 5px;
    }


    /* =====================================================
       SINGLE ARTICLE
    ====================================================== */

    .single-blog-hero {
        padding:
            120px 0
            50px;
    }

    .single-blog-hero h1 {
        font-size: 36px;

        line-height: 1.08;

        letter-spacing: -1.2px;
    }

    .single-blog-excerpt {
        font-size: 15px;
    }

    .single-blog-featured {
        padding-top: 30px;
    }

    .single-blog-content {
        font-size: 15px;

        line-height: 1.8;
    }

    .single-blog-content h2 {
        margin-top: 36px;

        font-size: 26px;
    }

    .single-blog-content h3 {
        font-size: 21px;
    }

    .single-blog-content blockquote {
        margin:
            28px 0;

        padding-left: 18px;

        font-size: 17px;
    }

    .single-blog-sidebar {
        grid-template-columns: 1fr;
    }

    .more-articles-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       FINAL CTA
    ====================================================== */

    .final-cta {
        padding:
            55px 0;
    }

    .final-cta-container {
        width: 88%;
    }

    .final-cta-content h2 {
        font-size: 32px;

        line-height: 1.08;
    }

    .final-cta-content p {
        font-size: 14px;
    }


    /* =====================================================
       FOOTER
    ====================================================== */

    .footer-container {
        width: 88%;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    .inner-hero h1,
    .service-detail-hero h1,
    .quote-hero-content h1 {
        font-size: 34px;
    }

    .single-blog-hero h1 {
        font-size: 33px;
    }

    .contact-information h2,
    .quotation-intro h2,
    .blog-archive-heading h2,
    .more-articles-heading h2 {
        font-size: 28px;
    }

    .contact-form-area,
    .quotation-form-area {
        padding:
            24px 17px;
    }

}
/* =========================================================
   404 PAGE
========================================================= */

.error-404 {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    padding:
        135px 0
        75px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 30%,
            rgba(8, 168, 229, .14),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #04141f,
            #07283b
        );
}

.error-404-container {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: var(--container);

    margin: 0 auto;
}

.error-404-content {
    max-width: 720px;
}


/* 404 NUMBER */

.error-number {
    margin:
        18px 0
        5px;

    color: transparent;

    font-size: clamp(100px, 16vw, 210px);
    font-weight: 900;
    line-height: .85;

    letter-spacing: -10px;

    -webkit-text-stroke:
        2px rgba(255, 255, 255, .16);
}


/* HEADING */

.error-404 h1 {
    max-width: 650px;

    margin:
        25px 0
        18px;

    color: var(--markance-white);

    font-size: clamp(36px, 5vw, 58px);
    line-height: 1.05;

    letter-spacing: -1.8px;
}

.error-404 h1 span {
    display: block;

    color: var(--markance-blue);
}


/* TEXT */

.error-404 p {
    max-width: 530px;

    margin: 0;

    color: rgba(255, 255, 255, .70);

    font-size: 15px;
    line-height: 1.7;
}


/* BUTTONS */

.error-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}

.error-primary-button,
.error-secondary-button {
    min-height: 48px;

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

    padding:
        0 24px;

    font-size: 12px;
    font-weight: 800;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.error-primary-button {
    background: var(--markance-blue);

    border:
        1px solid var(--markance-blue);

    color: var(--markance-white);
}

.error-primary-button:hover {
    background: var(--markance-orange);

    border-color: var(--markance-orange);

    transform: translateY(-2px);
}

.error-secondary-button {
    background: transparent;

    border:
        1px solid rgba(255,255,255,.35);

    color: var(--markance-white);
}

.error-secondary-button:hover {
    border-color: var(--markance-white);

    background: var(--markance-white);

    color: #061d2c;

    transform: translateY(-2px);
}


/* DECORATIVE ART */

.error-404-art {
    position: absolute;

    right: 5%;
    top: 50%;

    width: 420px;
    height: 420px;

    transform:
        translateY(-45%);

    pointer-events: none;
}

.error-circle {
    position: absolute;

    right: 0;
    top: 20px;

    width: 270px;
    height: 270px;

    border:
        2px solid rgba(255,255,255,.08);

    border-radius: 50%;
}

.error-line {
    position: absolute;

    display: block;

    width: 5px;

    transform-origin: center;
}

.error-line-one {
    right: 115px;
    bottom: 20px;

    height: 300px;

    background: var(--markance-blue);

    transform: rotate(38deg);
}

.error-line-two {
    right: 230px;
    bottom: 55px;

    height: 210px;

    background: var(--markance-orange);

    transform: rotate(-27deg);
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .error-404-art {
        opacity: .35;

        right: -100px;
    }

}


@media (max-width: 600px) {

    .error-404 {
        min-height: 100svh;

        padding:
            115px 0
            60px;
    }

    .error-404-container {
        width: 88%;
    }

    .error-number {
        font-size: 115px;

        letter-spacing: -6px;
    }

    .error-404 h1 {
        font-size: 36px;
    }

    .error-404-art {
        display: none;
    }

    .error-actions {
        flex-direction: column;

        align-items: flex-start;
    }

}