/* Landing page styles */

:root {
        --black: #050505;
        --ink: #121820;
        --muted: #697584;
        --orange: #f57935;
        --blue: #dee1e4;
        --blue-deep: #0e2843;
        --line: #dce1e6;
        --soft: #e9ebec;
        --max: 1220px;
        --hh: 84px;
        --dark-blue: #273f44;
    }

    * {
        box-sizing: border-box
    }

    html {
        scroll-behavior: smooth;
        scroll-padding-top: var(--hh)
    }

    body {
        margin: 0;
        font: 15px/1.65 "DM Sans", sans-serif;
        color: var(--ink);
        background: #fff
    }

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

    :focus-visible {
        outline: 2px solid var(--orange);
        outline-offset: 3px
    }

    .x {
        margin: auto;
    }

    h1,
    h2,
    h3,
    h4,
    p {
        margin-top: 0
    }

    h1,
    h2,
    h3 {
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: -.03em
    }

    .ey {
        display: flex;
        gap: 0.75rem;
        align-items: center;
        font: 700 11px Manrope;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--blue-deep);
        animation: fadeUp 0.8s var(--ease) 0.2s forwards;
    }

    .ey:before {
        content: "";
        width: 26px;
        height: 2px;
        background: var(--orange)
    }

    .hero .ey,
    .dark .ey,
    .cta .ey {
        color: var(--blue)
    }

    .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 20px;
        transition: .2s;
    }
	.orange {
		border: 1px solid;
	}

    .orange:hover {
        transform: translateY(-2px)
    }

    .white {
        border: 1px solid #fff8;
        color: #fff
    }

    .white:hover {
        background: #fff;
        color: #000
    }

    .lnk {
        font-weight: 700;
        color: var(--blue-deep)
    }

    .lnk:hover {
        color: var(--orange)
    }

    /* ---------- HEADER ---------- */
    .header {
        position: sticky;
        top: 0;
        z-index: 20;
        background: #1b2d30;
        border-bottom: 1px solid #ffffff22
    }

    .bar {
        height: var(--hh);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px
    }

    .logo {
        display: block;
        width: 195px;
        height: 80px;
        overflow: hidden;
        position: relative;
    }

    .logo img {
        width: 190px;
        max-width: none;
        position: absolute;
    }

    .nav {
        display: flex;
        align-items: center;
        gap: 27px
    }

    .nav>a,
    .drop button {
        background: none;
        border: 0;
        color: #ccc;
        font: 600 14px "DM Sans";
        cursor: pointer
    }

    .nav>a:hover,
    .drop button:hover {
        color: #fff
    }

    .contact {
        background: #fff !important;
        color: #000 !important;
        padding: 9px 15px;
        border-radius: 99px
    }

    .drop {
        position: relative
    }

    .mega {
        position: absolute;
        top: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        opacity: 0;
        visibility: hidden;
        width: 650px;
        background: #fff;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 14px;
        box-shadow: 0 20px 50px #000a;
        transition: .2s
    }

    .drop:hover .mega,
    .drop:focus-within .mega {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%)
    }

    .mega a {
        padding: 11px
    }

    .mega a:hover {
        background: #eff6ff
    }

    .mega strong {
        display: block;
        font: 700 13px Manrope
    }

    .mega span {
        font-size: 12px;
        color: var(--muted)
    }

    .hamburger,
    .mobile {
        display: none
    }

    /* Latest Code for flip flop card section 2
    /* =========================================================
   IMAGE FLIP CARD
   ========================================================= */

    .intro-flip-card {
        width: 100%;
        height: 300px;
        perspective: 1200px;
    }

    .intro-flip-inner {
        position: relative;
        width: 100%;
        height: 100%;

        transform-style: preserve-3d;

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

    .intro-flip-card:hover .intro-flip-inner {
        transform: rotateY(180deg);
    }


    /* =========================================================
   FRONT + BACK
   ========================================================= */

    .intro-flip-front,
    .intro-flip-back {
        position: absolute;
        inset: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;

        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;

        box-sizing: border-box;
    }


    /* =========================================================
   FRONT IMAGE
   ========================================================= */

    .intro-flip-front {
        background: #111;
        border-radius: 0;
    }

    .flip-card-image {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;

        object-fit: cover;

        display: block;

        transition: transform .8s ease;
    }


    /* Slight image zoom */

    .intro-flip-card:hover .flip-card-image {
        transform: scale(1.04);
    }


    /* Dark overlay */

    .flip-card-overlay {
        position: absolute;

        inset: 0;

        background:
            linear-gradient(180deg,
                rgba(0, 0, 0, .15) 0%,
                rgba(0, 0, 0, .25) 40%,
                rgba(0, 0, 0, .82) 100%);
    }


    /* =========================================================
   FRONT CONTENT
   ========================================================= */

    .flip-card-content {
        position: absolute;

        left: 35px;
        right: 35px;
        bottom: 35px;

        color: #fff;
    }

    .flip-card-tag {
        display: inline-block;

        margin-bottom: 14px;

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

        letter-spacing: 2px;

        color: #ff8a4c;
    }

    .flip-card-content h2 {
        max-width: 600px;

        margin: 0;

        font-family: "Fraunces", Georgia, serif;

        font-size: clamp(38px, 4vw, 62px);

        line-height: .98;

        font-weight: 500;

        letter-spacing: -2px;
    }

    .flip-card-content h2 span {
        display: block;
    }

    .flip-card-content p {
        margin: 20px 0 0;

        max-width: 450px;

        font-size: 17px;

        line-height: 1.5;

        color: rgba(255, 255, 255, .85);
    }


    /* =========================================================
   BACK
   ========================================================= */

    .intro-flip-back {
        transform: rotateY(180deg);

        display: flex;

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

        background: #282f30;

        border: 1px solid #253f43;
    }

    /* =========================================================
   BUTTON
   ========================================================= */
    .flip-consultation-btn {
        display: inline-flex;

        align-items: center;
        justify-content: space-between;
        gap: 35px;
        min-width: 240px;
        padding: 17px 18px 17px 25px;
        color: #fff;
        text-decoration: none;

        font-size: 16px;

        font-weight: 700;

        transition:
            transform .3s ease,
            background .3s ease;
    }

    .flip-consultation-btn span {
        display: flex;

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

        width: 38px;
        height: 38px;

        background: rgba(255, 255, 255, .18);

        font-size: 20px;

        transition: transform .3s ease;
    }

    .flip-consultation-btn:hover span {
        transform: translateX(5px);
    }


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

    @media (max-width: 800px) {

        .intro-flip-card {
            height: 400px;
        }

        .flip-card-content {
            left: 25px;
            right: 25px;
            bottom: 25px;
        }

        .flip-card-content h2 {
            font-size: 40px;
        }

        .flip-card-content p {
            font-size: 15px;
        }

    }

    /* ---------- FIXED VIDEO BACKGROUND ---------- */
    .bg {
        position: fixed;
        inset: 0;
        z-index: -1;
        background: #000;
        overflow: hidden
    }

    .bg video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: zoom 18s ease-in-out infinite alternate
    }

    .bg:after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, #000c 0%, #0007 42%, #0001 100%), linear-gradient(0deg, #0008, transparent 45%)
    }

    .hero {
        position: relative;
        min-height: calc(105vh - var(--hh));
        color: #fff
    }

    .fade {
        opacity: calc(1 - var(--p, 0));
        transform: translateY(calc(var(--p, 0) * -34px));
        will-change: opacity, transform
    }

    .hero .x {
        min-height: calc(100vh - var(--hh));
        min-height: calc(100svh - var(--hh));
        display: flex;
        align-items: center;
        padding-bottom: 60px
    }

    .hero h1 {
        font-size: clamp(46px, 6vw, 84px);
        margin: 20px 0 24px;
        animation: up .8s .12s both
    }

    .hero h1 em {
        display: block;
        font-style: italic;
        color: #ffd3bd
    }

    .hero p {
        max-width: 600px;
        color: #f0f1f2;
        font-size: 19px;
        animation: up .8s .24s both
    }

    .actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 28px;
        animation: up .8s .36s both
    }

    .caption {
        border-left: 2px solid var(--orange);
        padding-left: 17px;
        color: #e7e7e7;
        font-size: 13px;
        animation: up .8s .48s both;
    }

    .caption b {
        display: block;
        color: #fff;
        font: 600 15px Manrope;
        margin-bottom: 4px
    }

    @keyframes zoom {
        from {
            transform: scale(1.065)
        }

        to {
            transform: scale(1)
        }
    }

    @keyframes up {
        from {
            opacity: 0;
            transform: translateY(26px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    /* ---------- SHEET: everything below slides over the video ---------- */
    .sheet {
        position: relative;
        z-index: 1;
        background: #fff;
        margin-top: -28px;
        box-shadow: 0 -24px 60px #0007;
        overflow: hidden
    }

    .flow {
        background: black;
    }

    .flow .x {
        display: flex;
        gap: 35px;
        align-items: center;
        padding: 14px;
        text-align: center;
    }

    .flow label {
        font-size: 18px;
        filter: contrast(0.5);
        color: #d9dadc;
    }

    .steps {
        display: flex;
        justify-content: space-between;
        flex: 1;
        font-weight: 700;
        color: #435161
    }

    .steps span:not(:last-child):after {
        content: "\2192";
        color: var(--orange);
        margin-left: 24px
    }

    section {
        padding: 20px;
    }

    .two {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 48px
    }

    .two h2,
    .heading h2 {
        font-size: 30px;
        margin: 16px 0
    }

    .copy {
        font-size: 16px;
        color: var(--muted)
    }

    .copy p:last-child {
        margin-bottom: 0
    }

    .copy strong {
        color: var(--ink)
    }

    .light {
        background: var(--soft);
        border-block: 1px solid var(--line)
    }

    .heading {
		display: flex;
		align-items: center;
		gap: 0;
		margin-bottom: 0;
	}

    .heading p {
        max-width: 390px;
        color: var(--muted);
        margin-bottom: 0
    }

    /* markets row */
    .markets {
        padding: 14px;
        border: 1px solid var(--line)
    }

    .markets .x {
        display: grid;
        grid-template-columns: 100px repeat(5, 1fr);
        align-items: stretch
    }

    .markets label {
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--muted);
        align-self: center
    }

    .markets span {
        font: 400 clamp(20px, 2.1vw, 28px) Fraunces, serif;
        letter-spacing: -.02em;
        padding:14px;
        border-left: 1px solid var(--line);
        transition: .2s
    }

    .markets span:hover {
        background: var(--soft);
        color: var(--orange)
    }

    /* services: tabbed list */
    .svc {
        display: grid;
        grid-template-columns: .82fr 1.18fr;
        border: 1px solid var(--line);
        background: #fff
    }

    .tabs {
        border-right: 1px solid var(--line);
        background: var(--soft)
    }

    .tab {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        text-align: left;
        padding: 14px;
        background: none;
        border: 0;
        border-bottom: 1px solid var(--line);
        font: 700 18px Manrope;
        color: var(--ink);
        cursor: pointer;
        transition: .2s
    }

    .tab:last-child {
        border-bottom: 0
    }

    .tab .num {
        color: var(--orange);
        font: 700 11px Manrope;
        letter-spacing: .12em;
        min-width: 22px
    }

    .tab:after {
        content: "\2192";
        margin-left: auto;
        color: var(--orange);
        opacity: 0;
        transform: translateX(-6px);
        transition: .2s
    }

    .tab:hover {
        background: #fff
    }

    .tab[aria-selected="true"] {
        background: var(--dark-blue);
        color: #fff
    }

    .tab[aria-selected="true"]:after {
        opacity: 1;
        transform: none
    }

    .pane {
        padding: 14px
    }

    .pane[hidden] {
        display: none
    }

    .pane h3 {
        font-size: 30px;
        margin-bottom: 14px
    }

    .pane p {
        color: var(--muted);
        font-size: 16px;
        line-height: 20px;
    }

    .pane h4 {
        font: 700 12px Manrope;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--ink);
        margin: 22px 0 12px
    }

    .checks {
        list-style: none;
        padding: 0;
        margin: 0 0 4px;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .checks li:before {
        content: "\2713";
        color: var(--orange);
        font-weight: bold;
        margin-right: 9px
    }

    .chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 18px 0 0
    }

    .chips span {
        border: 1px solid var(--line);
        padding: 5px;
        font-size: 14px;
        font-weight: 700;
        background: #fff
    }

    .journey {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 0;
        margin: 4px 0 8px;
        font-weight: 700;
        color: #435161
    }

    .journey span:not(:last-child):after {
        content: "\2192";
        color: var(--orange);
        margin: 0 12px
    }

    .pane-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 24px;
        align-items: center;
        margin-top: 26px
    }

    /* approach list */
    .principles {
        border-top: 1px solid var(--line)
    }

    .principles div {
        padding: 15px 0;
        border-bottom: 1px solid var(--line);
        font-weight: 600
    }

    .principles b {
        color: var(--orange);
        font: 700 12px Manrope;
        margin-right: 15px
    }

    .dark {
        background: #070a0e;
        color: #fff
    }

    .dark p {
        color: #cad3dc
    }

    .tech {
		display: flex;
		gap: 15px;
		flex-wrap: wrap-reverse;
		align-content: stretch;
		justify-content: center;
	}

    .tech span {
        border: 1px solid #4b5968;
        padding: 9px 14px;
        font-size: 13px;
        font-weight: bold
    }

    .agency {
        background: var(--soft)
    }

    .agency .tagline {
        font: italic 400 24px/1.3 Fraunces, serif;
        color: var(--ink);
        margin: 4px 0 18px
    }

    /* ================= AGENCY AUTO TICKER ================= */

    .agency-news {
        background: #fff;
        border-top: 4px solid var(--orange);
        padding: 14px;
        overflow: hidden;
    }

    .agency-news h3 {
        font: 700 22px Manrope, sans-serif;
        color: var(--ink);
    }

    .agency-ticker {
        height: 235px;
        overflow: hidden;
        position: relative;
    }

    /* IMPORTANT */
    .agency-ticker-track {
        display: flex;
        flex-direction: column;
        animation: agencyAutoScroll 12s linear infinite;
        will-change: transform;
    }

    .agency-ticker-item {
        flex: 0 0 58px;
        height: 58px;

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

        padding: 10px 0;

        border-bottom: 1px solid var(--line);

        color: #4e5b67;
        font-size: 16px;
    }

    .agency-ticker-item::before {
        content: "\2022";
        color: var(--orange);
        font-size: 22px;
        line-height: 1;
    }

    .agency-ticker-item strong {
        color: var(--ink);
        font-weight: 700;
    }

    .footer-logo {
        width: 180px;
        height: auto;
        display: block;
        margin-bottom: 15px;
    }

    /* CONTINUOUS AUTO SCROLL */
    @keyframes agencyAutoScroll {

        0% {
            transform: translateY(0);
        }

        100% {
            transform: translateY(-580px);
        }

    }

    .cta {
        background: #000000e0;
        color: #fff;
    }

    .cta .x {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px
    }

    .cta h2 {
        font-size: clamp(34px, 4vw, 52px);
        margin: 14px 0
    }

    .cta p {
        color: #c7ced5;
        max-width: 580px;
        margin-bottom: 0
    }

    /* footer */
    .footer {
        background: #1b2d30;
        color: #9eabb8;
        font-size: 14px
    }

    .foot {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1fr;
        gap: 40px;
        padding: 25px 0px 25px;
        border-bottom: 1px solid #ffffff1c
    }

    .footer strong {
        color: #fff
    }

    .footer h4 {
        font: 700 12px Manrope;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #fff;
        margin-bottom: 14px
    }

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

    .footer li {
        margin-bottom: 9px
    }

    .footer a:hover {
        color: var(--orange)
    }

    .foot p {
        max-width: 330px;
        margin: 12px 0 0
    }

    .foot-bottom {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 20px 32px;
        font-size: 13px
    }

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

        *,
        .bg video {
            animation: none !important;
            transition: none !important
        }
    }

    @media(max-width:980px) {
        .markets .x {
            grid-template-columns: repeat(3, 1fr)
        }

        .markets label {
            grid-column: 1/-1;
            padding: 20px 0 4px
        }

        .markets span {
            padding: 16px 14px;
            border-top: 1px solid var(--line)
        }

        .markets span:nth-of-type(3n+1) {
            border-left: 0;
            padding-left: 0
        }
    }

    @media(max-width:800px) {
        :root {
            --hh: 72px
        }

        .x {
            padding-inline: 21px
        }

        .nav {
            display: none
        }

        .hamburger {
            display: block;
            background: none;
            color: #fff;
            border: 1px solid #fff6;
            padding: 8px 14px;
            border-radius: 99px;
            font: 600 14px "DM Sans"
        }

        .mobile.show {
            display: block;
            padding: 8px 21px 20px;
            background: #111
        }

        .mobile a {
            display: block;
            color: #eee;
            padding: 11px 0;
            border-bottom: 1px solid #fff2
        }

        .logo {
            width: 150px;
            height: 40px
        }

        .logo img {
            width: 100px;
        }

        .caption {
            display: none
        }

        .sheet {
            border-radius: 20px 20px 0 0;
            margin-top: -20px
        }

        .two {
            grid-template-columns: 1fr;
            gap: 26px
        }

        .heading {
            display: block
        }

        .heading p {
            margin-top: 12px
        }

        .flow .x {
            display: block
        }

        .steps {
            overflow: auto;
            gap: 15px;
            white-space: nowrap;
            margin-top: 9px
        }

        .steps span:not(:last-child):after {
            margin-left: 12px
        }

        section {
            padding: 48px 0
        }

        .svc {
            grid-template-columns: 1fr
        }

        .tabs {
            display: flex;
            overflow-x: auto;
            border-right: 0;
            border-bottom: 1px solid var(--line)
        }

        .tab {
            flex: 0 0 auto;
            width: auto;
            white-space: nowrap;
            border-bottom: 0;
            border-right: 1px solid var(--line);
            padding: 16px 18px;
            font-size: 15px
        }

        .tab:after {
            display: none
        }

        .pane {
            padding: 26px 21px
        }

        .checks {
            grid-template-columns: 1fr
        }

        .cta {
            padding: 48px 0
        }

        .cta .x {
            display: block
        }

        .cta .btn {
            margin-top: 18px
        }

        .foot {
            grid-template-columns: 1fr 1fr;
            padding: 40px 21px 28px
        }

        .foot>div:first-child {
            grid-column: 1/-1
        }

        .foot-bottom {
            display: block;
            padding: 18px 21px
        }

        .foot-bottom span {
            display: block;
            margin-top: 6px
        }
    }

    /* ---------- NEW: images + motion added for content/SEO pass ---------- */

    /* scroll-reveal — applied only to imagery/decorative blocks, never to
       headings or copy, so text is always present for search engines and
       for visitors without JavaScript */
    .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity .7s ease, transform .7s ease;
    }

    .reveal.in {
        opacity: 1;
        transform: none;
    }

    /* country flags in the markets row */
    .markets span {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .markets span img {
        width: 24px;
        height: 18px;
        object-fit: cover;
        border: 1px solid var(--line);
        flex: none;
    }

    /* service-pane header image */
    .pane-media {
        overflow: hidden;
        margin-bottom: 22px;
        border: 1px solid var(--line);
    }

    .pane-media img {
        width: 100%;
        height: 240px;
        object-fit: cover;
        display: block;
        transition: transform .5s ease;
    }

    .pane-media:hover img {
        transform: scale(1.03);
    }

    /* re-run a short entrance on whichever pane becomes visible when a
       tab is clicked — this responds to the person's own action, so it's
       welcome even though scroll-triggered fades elsewhere are avoided */
    .pane:not([hidden]) {
        animation: paneIn .45s ease both;
    }

    @keyframes paneIn {
        from {
            opacity: 0;
            transform: translateY(10px)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    /* approach section supporting image */
    .approach-media {
        margin-bottom: 18px;
        overflow: hidden;
        border: 1px solid var(--line);
    }

    .approach-media img {
        width: 100%;
        height: 295px;
        object-fit: cover;
        display: block;
    }

    /* technology chips get a small logo mark */
    .tech span {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .tech span img {
        width: 16px;
        height: 16px;
        flex: none;
        filter: brightness(0) invert(1);
    }

    /* agency section supporting image */
    .agency-media {
        margin: 18px 0 22px;
        overflow: hidden;
        border: 1px solid var(--line);
    }

    .agency-media img {
        width: 100%;
        height: 210px;
        object-fit: cover;
        display: block;
    }

    @media(prefers-reduced-motion:reduce) {
        .reveal {
            opacity: 1;
            transform: none;
        }
    }