/* ==========================================================
   CITY MEDIA CSS
========================================================== */


/* ==========================================================
   MENU UNDERLINE
========================================================== */

.hfe-flyout-content .hfe-nav-menu > li > a {
    background-image: linear-gradient(#fff, #fff);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 0% 2px;
    transition: background-size 0.3s ease;
}

.hfe-flyout-content .hfe-nav-menu > li > a:hover {
    background-size: 50% 2px;
}

.hfe-flyout-content .hfe-nav-menu .sub-menu > li > .hfe-sub-menu-item {
    background-image: linear-gradient(#3E5DDF, #3E5DDF) !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 0% 2px !important;
    transition: background-size 0.3s ease !important;
}

.hfe-flyout-content .hfe-nav-menu .sub-menu > li > .hfe-sub-menu-item:hover {
    background-size: 50% 2px !important;
}


/* ==========================================================
   HOMEPAGE HERO
========================================================== */

.media-reveal {
    --accent: #1a56ff;
    --duration: 5.2s;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    position: relative;
    width: min(92vw, 1200px);
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
    transform-origin: center;
    will-change: transform;
}

.logo-reveal {
    position: relative;
    width: 100%;
    aspect-ratio: 640 / 400;
    z-index: 10;
}

.media-background {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.floating-element {
    position: absolute;
    will-change: transform;
}

.reveal-item {
    animation: reveal .7s var(--ease-out) both;
    animation-play-state: paused;
}

.media-background.is-in .reveal-item {
    animation-play-state: running;
}

@keyframes reveal {
    from { opacity: 0; transform: translateY(22px) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.floating-card {
    --card-x: 0px;
    --card-scale: 1;
    animation: float 6s ease-in-out infinite;
}

/* transform is animated here, so any responsive size/position change
   must go through --card-x / --card-scale instead of a static
   `transform:` rule, otherwise the animation overwrites it every frame */
@keyframes float {
    0%, 100% { transform: translateX(var(--card-x)) translateY(0) rotate(0) scale(var(--card-scale)); }
    50% { transform: translateX(var(--card-x)) translateY(-7px) rotate(.4deg) scale(var(--card-scale)); }
}

/* -- Laptop card -- */

.laptop-card {
    left: 3%;
    top: 17%;
    width: 150px;
}

.laptop-screen {
    width: 138px;
    height: 88px;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 8px 8px 4px 4px;
    background: linear-gradient(145deg, #f6f7fa, #d9dce3);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .1);
}

.browser-window {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    background: #f8f9fb;
    border: 1px solid rgba(0, 0, 0, .08);
}

.browser-bar {
    height: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 5px;
    background: #eceef2;
}

.browser-dot,
.browser-controls span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .18);
}

.browser-address,
.real-browser-url {
    flex: 1;
    margin-left: 4px;
    height: 8px;
    line-height: 8px;
    padding-left: 5px;
    border-radius: 5px;
    font-size: 4px;
    color: rgba(0, 0, 0, .35);
    background: rgba(255, 255, 255, .75);
}

.website-preview {
    height: calc(100% - 14px);
    padding: 6px;
}

.website-header,
.site-navigation {
    display: flex;
    align-items: center;
    gap: 5px;
}

.website-header span,
.site-navigation b {
    width: 22px;
    height: 4px;
    margin-right: auto;
    border-radius: 2px;
    background: rgba(26, 86, 255, .4);
}

.website-header i,
.site-navigation span {
    width: 12px;
    height: 3px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .1);
}

.website-hero {
    display: flex;
    gap: 7px;
    margin-top: 7px;
}

.website-copy {
    width: 52%;
}

.website-copy b,
.site-heading {
    display: block;
    width: 80%;
    height: 7px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .18);
}

.website-copy b {
    margin-bottom: 4px;
}

.website-copy span,
.site-line {
    display: block;
    width: 90%;
    height: 3px;
    margin-top: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .08);
}

.website-copy i,
.site-button {
    display: block;
    width: 30px;
    height: 8px;
    margin-top: 6px;
    border-radius: 3px;
    background: rgba(26, 86, 255, .28);
}

.website-image,
.mobile-image {
    flex: 1;
    height: 42px;
    border-radius: 3px;
    background: linear-gradient(135deg, rgba(26, 86, 255, .2), rgba(26, 86, 255, .04));
}

.website-cards {
    display: flex;
    gap: 4px;
    margin-top: 7px;
}

.website-cards i {
    flex: 1;
    height: 14px;
    border-radius: 3px;
    background: rgba(0, 0, 0, .055);
}

.laptop-base {
    position: relative;
    width: 155px;
    height: 8px;
    margin-left: -8px;
    border-radius: 2px 2px 8px 8px;
    background: linear-gradient(180deg, #d9dce2, #bfc3cb);
    box-shadow: 0 8px 12px rgba(0, 0, 0, .08);
}

.keyboard {
    position: absolute;
    left: 35px;
    top: 2px;
    width: 75px;
    height: 3px;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 3px, transparent 3px 5px);
}

.trackpad {
    position: absolute;
    left: 65px;
    top: 6px;
    width: 35px;
    height: 1px;
    background: rgba(0, 0, 0, .12);
}

/* -- SEO panel card -- */

.seo-panel {
    right: 4%;
    top: 12%;
    width: 155px;
    height: 112px;
    padding: 11px;
    box-sizing: border-box;
    border: 1px solid rgba(26, 86, 255, .1);
    border-radius: 10px;
    background: rgba(248, 250, 255, .7);
    backdrop-filter: blur(10px);
    box-shadow: 0 25px 55px rgba(26, 86, 255, .08);
}

.panel-header,
.analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.panel-title,
.analytics-header {
    font-size: 7px;
    letter-spacing: 1px;
    font-weight: 600;
    color: rgba(18, 20, 28, .5);
}

.panel-menu {
    font-size: 8px;
    color: rgba(18, 20, 28, .25);
}

.ranking {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 9px;
}

.ranking-number {
    font-size: 22px;
    font-weight: 700;
    color: rgba(26, 86, 255, .65);
}

.ranking-info {
    margin-left: 8px;
    font-size: 7px;
    line-height: 12px;
    color: rgba(18, 20, 28, .55);
}

.ranking-info span {
    display: block;
    color: rgba(26, 86, 255, .55);
}

.ranking-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 1px;
    background: rgba(26, 86, 255, .08);
}

.seo-chart {
    height: 42px;
    margin-top: 13px;
}

.seo-chart svg,
.analytics-chart svg {
    width: 100%;
    height: 100%;
}

.panel-footer {
    display: flex;
    gap: 5px;
}

.panel-footer span {
    height: 4px;
    border-radius: 3px;
    background: rgba(26, 86, 255, .1);
}

.panel-footer span:nth-child(1) { width: 35%; }
.panel-footer span:nth-child(2) { width: 20%; }
.panel-footer span:nth-child(3) { width: 28%; }

/* -- Phone card -- */

.phone-card {
    left: 20%;
    bottom: 12%;
    width: 57px;
}

.phone-frame {
    position: relative;
    width: 54px;
    height: 105px;
    padding: 4px;
    box-sizing: border-box;
    border-radius: 10px;
    background: linear-gradient(145deg, #dfe2e7, #b8bdc7);
    box-shadow: 0 20px 35px rgba(0, 0, 0, .1);
}

.phone-screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 7px;
    background: #fff;
}

.phone-speaker,
.phone-home {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px;
    background: rgba(0, 0, 0, .15);
}

.phone-speaker {
    top: 2px;
    width: 14px;
    height: 2px;
}

.phone-home {
    bottom: 3px;
    width: 9px;
    height: 2px;
}

.mobile-site {
    padding: 7px 5px;
}

.mobile-nav {
    height: 4px;
    border-radius: 2px;
    background: rgba(26, 86, 255, .2);
}

.mobile-hero {
    margin-top: 8px;
}

.mobile-hero span,
.mobile-hero i {
    display: block;
    border-radius: 2px;
}

.mobile-hero span {
    width: 80%;
    height: 5px;
    background: rgba(0, 0, 0, .18);
}

.mobile-hero i {
    width: 65%;
    height: 3px;
    margin-top: 4px;
    background: rgba(0, 0, 0, .08);
}

.mobile-hero b {
    display: block;
    width: 22px;
    height: 7px;
    margin-top: 5px;
    border-radius: 3px;
    background: rgba(26, 86, 255, .3);
}

.mobile-image {
    width: 100%;
    height: 30px;
    margin-top: 8px;
}

.mobile-content {
    margin-top: 7px;
}

.mobile-content i {
    display: block;
    width: 90%;
    height: 3px;
    margin-bottom: 4px;
    border-radius: 2px;
    background: rgba(0, 0, 0, .08);
}

.mobile-button {
    width: 25px;
    height: 7px;
    margin-top: 6px;
    border-radius: 3px;
    background: rgba(26, 86, 255, .25);
}

/* -- Code card -- */

.code-card {
    left: 37%;
    top: 5%;
    width: 145px;
    height: 92px;
    overflow: hidden;
    border-radius: 7px;
    background: rgba(20, 23, 30, .78);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
    backdrop-filter: blur(7px);
}

.code-header {
    height: 18px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
    background: rgba(255, 255, 255, .06);
}

.code-header span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.code-header b {
    margin-left: 7px;
    font-size: 6px;
    font-weight: 500;
    color: rgba(255, 255, 255, .35);
}

.code-lines {
    padding: 8px;
    font-family: monospace;
}

.code-lines div {
    height: 11px;
    font-size: 6px;
    white-space: nowrap;
}

.code-lines em {
    display: inline-block;
    width: 18px;
    color: rgba(255, 255, 255, .18);
    font-style: normal;
}

.code-lines span { color: rgba(120, 180, 255, .65); }
.code-lines strong { color: rgba(255, 255, 255, .42); }
.code-lines i { color: rgba(120, 210, 170, .55); font-style: normal; }

/* -- Analytics card -- */

.analytics-card {
    left: 7%;
    bottom: 8%;
    width: 175px;
    height: 95px;
    padding: 11px;
    box-sizing: border-box;
    border: 1px solid rgba(26, 86, 255, .08);
    border-radius: 9px;
    background: rgba(255, 255, 255, .45);
    backdrop-filter: blur(8px);
    box-shadow: 0 20px 50px rgba(26, 86, 255, .06);
}

.analytics-header {
    font-size: 6px;
    letter-spacing: .8px;
    color: rgba(18, 20, 28, .42);
}

.analytics-header b {
    font-size: 5px;
    font-weight: 500;
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(26, 86, 255, .06);
}

.analytics-number {
    margin-top: 7px;
    font-size: 18px;
    font-weight: 700;
    color: rgba(18, 20, 28, .62);
}

.analytics-number small {
    font-size: 6px;
    font-weight: 400;
    color: rgba(18, 20, 28, .3);
}

.analytics-chart {
    height: 40px;
    margin-top: 3px;
}

/* -- Browser card -- */

.browser-card {
    right: 20%;
    bottom: 8%;
    width: 145px;
    height: 88px;
    overflow: hidden;
    border-radius: 7px;
    background: rgba(245, 247, 250, .65);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 25px 50px rgba(0, 0, 0, .08);
    backdrop-filter: blur(8px);
}

.real-browser-bar {
    height: 17px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    background: rgba(0, 0, 0, .035);
}

.browser-controls {
    display: flex;
    gap: 3px;
}

.real-browser-url {
    margin-left: 7px;
}

.real-browser-content {
    padding: 7px;
}

.site-content {
    margin-top: 12px;
}

.site-heading {
    width: 75%;
}

.site-line {
    width: 90%;
    margin-top: 6px;
}

.site-line.short {
    width: 62%;
    margin-top: 4px;
}

.site-button {
    width: 28px;
    margin-top: 9px;
}

/* -- Speed card -- */

.speed-card {
    left: 29%;
    bottom: 9%;
    padding: 9px 11px;
    box-sizing: border-box;
    border-radius: 7px;
    background: rgba(255, 255, 255, .48);
    border: 1px solid rgba(26, 86, 255, .08);
    backdrop-filter: blur(8px);
    box-shadow: 0 15px 35px rgba(26, 86, 255, .05);
}

.speed-card span {
    display: block;
    font-size: 5px;
    letter-spacing: 1px;
    color: rgba(18, 20, 28, .35);
}

.speed-card strong {
    display: inline-block;
    margin-top: 4px;
    font-size: 14px;
    color: rgba(26, 86, 255, .55);
}

.speed-card small {
    font-size: 5px;
    color: rgba(18, 20, 28, .3);
}

/* -- Background dots -- */

.background-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(26, 86, 255, .18);
    opacity: .3;
    animation: dot-float 4.5s ease-in-out infinite;
}

@keyframes dot-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.dot-one { left: 18%; top: 31%; }
.dot-two { left: 30%; top: 72%; }
.dot-three { left: 73%; top: 34%; }
.dot-four { left: 84%; top: 65%; }
.dot-five { left: 48%; top: 15%; }
.dot-six { left: 60%; top: 80%; }

/* -- Logo reveal animation -- */

.logo-reveal .logo-icon,
.logo-reveal .logo-name,
.logo-reveal .logo-services {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    max-width: none;
    height: auto;
    opacity: 0;
    transform: translate(-50%, -50%);
    will-change: opacity, top, width, transform;
    pointer-events: none;
    user-select: none;
    animation-play-state: paused;
    z-index: 20;
}

.logo-reveal.is-playing .logo-icon,
.logo-reveal.is-playing .logo-name,
.logo-reveal.is-playing .logo-services {
    animation-play-state: running;
}

.logo-icon { animation: logo-icon var(--duration) var(--ease-out) both; }
.logo-name { animation: logo-name var(--duration) var(--ease-out) both; }
.logo-services { animation: logo-services var(--duration) var(--ease-out) both; }

@keyframes logo-icon {
    0% { opacity: 0; top: 50%; width: 28%; transform: translate(-50%, -50%) scale(.85); }
    4% { opacity: 1; top: 50%; width: 40%; transform: translate(-50%, -50%) scale(1.05); }
    8%, 19% { opacity: 1; top: 50%; width: 40%; transform: translate(-50%, -50%) scale(1); }
    31% { opacity: 0; top: 40%; width: 18%; transform: translate(-50%, -50%) scale(1); }
    56% { opacity: 0; top: 40%; width: 16%; transform: translate(-50%, -50%) scale(.8); }
    69%, 100% { opacity: 1; top: 40%; width: 18%; transform: translate(-50%, -50%) scale(1); }
}

@keyframes logo-name {
    0%, 19% { opacity: 0; top: 50%; width: 64%; transform: translate(-50%, -50%) scale(.9); }
    24% { opacity: 1; top: 50%; width: 72%; transform: translate(-50%, -50%) scale(1.03); }
    28%, 36% { opacity: 1; top: 50%; width: 70%; transform: translate(-50%, -50%) scale(1); }
    44% { opacity: 0; top: 50%; width: 72%; transform: translate(-50%, -50%) scale(1.03); }
    56% { opacity: 0; top: 57%; width: 47%; transform: translate(-50%, -50%) scale(.9); }
    69%, 100% { opacity: 1; top: 57%; width: 47%; transform: translate(-50%, -50%) scale(1); }
}

@keyframes logo-services {
    0%, 44% { opacity: 0; top: 50%; width: 48%; transform: translate(-50%, -50%) scale(.92); }
    49% { opacity: 1; top: 50%; width: 54%; transform: translate(-50%, -50%) scale(1.02); }
    53%, 57% { opacity: 1; top: 50%; width: 54%; transform: translate(-50%, -50%) scale(1); }
    69%, 100% { opacity: 1; top: 67%; width: 47%; transform: translate(-50%, -50%) scale(1); }
}

/* -- Homepage hero: small tablet / narrow -- */

@media (max-width: 600px) {
    .laptop-card { left: -7%; }
    .seo-panel { right: -8%; }
    .phone-card { left: 13%; bottom: 8%; }
    .code-card { left: 34%; top: 2%; }
    .analytics-card { left: -7%; bottom: 3%; }
    .browser-card { right: -7%; bottom: 5%; }
}

/* -- Homepage hero: reduced motion -- */

@media (prefers-reduced-motion: reduce) {
    .media-reveal { transform: none !important; }
    .floating-element { transform: none !important; }
    .reveal-item,
    .floating-card,
    .background-dot { animation: none !important; }
    .reveal-item { opacity: 1 !important; }
    .logo-reveal .logo-icon,
    .logo-reveal .logo-name,
    .logo-reveal .logo-services { animation: none !important; opacity: 1 !important; }
    .logo-icon { top: 40%; width: 18%; }
    .logo-name { top: 57%; width: 47%; }
    .logo-services { top: 67%; width: 47%; }
}

/* -- Homepage hero: tablet -- */

@media (min-width: 768px) and (max-width: 1100px) {

    .media-reveal {
        width: 100vw;
        max-width: 100%;
    }

    .logo-reveal {
        width: 100%;
        aspect-ratio: 640 / 460;
    }

    /* smaller floating elements */
    .laptop-card { left: -5%; top: 14%; --card-scale: .58; }
    .seo-panel { right: -5%; top: 10%; --card-scale: .58; }
    .code-card { left: 50%; top: -2%; --card-x: -50%; --card-scale: .54; }
    .phone-card { left: 7%; bottom: 4%; --card-scale: .60; }
    .analytics-card { left: -5%; bottom: 1%; --card-scale: .57; }
    .browser-card { right: -5%; bottom: 1%; --card-scale: .57; }
    .speed-card { left: 50%; bottom: 2%; --card-x: -50%; --card-scale: .58; }

    /* bigger central logo */
    .logo-reveal .logo-icon { width: 55%; }
    .logo-reveal .logo-name { width: 92%; }
    .logo-reveal .logo-services { width: 68%; }
}

/* -- Homepage hero: mobile -- */

@media (max-width: 767px) {

    .media-reveal {
        width: 100vw;
        max-width: none;
        overflow: hidden;
    }

    .logo-reveal {
        width: 100%;
        aspect-ratio: 640 / 500;
    }

    /* much smaller floating elements */
    .laptop-card { left: -27%; top: 18%; --card-scale: .24; }
    .seo-panel { right: -27%; top: 13%; --card-scale: .24; }
    .code-card { left: 50%; top: -1%; --card-x: -50%; --card-scale: .22; }
    .phone-card { left: -5%; bottom: 4%; --card-scale: .28; }
    .analytics-card { left: -27%; bottom: 1%; --card-scale: .24; }
    .browser-card { right: -27%; bottom: 1%; --card-scale: .24; }
    .speed-card { left: 50%; bottom: 2%; --card-x: -50%; --card-scale: .26; }

    /* big central logo */
    .logo-reveal .logo-icon { width: 76%; }
    .logo-reveal .logo-name { width: 108%; }
    .logo-reveal .logo-services { width: 86%; }

    /* dots */
    .dot-one { left: 7%; top: 28%; }
    .dot-two { left: 14%; top: 78%; }
    .dot-three { left: 91%; top: 29%; }
    .dot-four { left: 95%; top: 72%; }
    .dot-five { left: 50%; top: 8%; }
    .dot-six { left: 81%; top: 84%; }
}

/* -- Homepage hero: small mobile -- */

@media (max-width: 480px) {

    .logo-reveal {
        aspect-ratio: 640 / 720 !important;
        margin-bottom:60px;
    }

    .logo-reveal::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: rgba(255, 255, 255, .5);
    }

    /* tiny floating elements */
    .laptop-card { left: 2% !important; top: 2% !important; --card-scale: .20; }
    .seo-panel { right: 2% !important; top: 4% !important; --card-scale: .20; }
    .code-card { display:none; }
    .phone-card { display:none; }
    .analytics-card { left: 2% !important; bottom: 10% !important; --card-scale: .20; }
    .browser-card { right: 2% !important; bottom: 0; --card-scale: .20; }
    .speed-card { left: 50%; bottom: 1%; --card-x: -50%; --card-scale: .22; }

    /* extra large central logo */
    .logo-reveal .logo-icon { width: 82%; }
    .logo-reveal .logo-name { width: 112%; }
    .logo-reveal .logo-services { width: 92%; }
}

/* -- Homepage hero: mobile logo override -- */

@media (max-width: 767px) {
    .logo-reveal .logo-icon {
        width: 22% !important;
    }
    .logo-reveal .logo-name {
        width: 72% !important;
    }
    .logo-reveal .logo-services {
        width: 92% !important;
        margin-top: 20px;
    }
}


/* ==========================================================
   SERVICES 3D SECTION
========================================================== */

#services3D {
    --blue: #3B5CD4;
    --dark: #0D1E3D;
    width: 100%;
    padding: 80px 0;
    box-sizing: border-box;
    overflow-x: clip;
    perspective: 1600px; /* establishes the 3D space for all children */
}

#services3D,
#services3D * {
    box-sizing: border-box;
}

#services3D .services-3d-inner {
    display: flex;
    flex-direction: column;
    gap: 100px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 6vw;
}

/* -- Item entrance (3D rotate-in) -- */

#services3D .service-3d-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4vw;
    opacity: 0;
    transform-style: preserve-3d;
    transition:
        opacity 1s cubic-bezier(.16, .8, .3, 1),
        transform 1s cubic-bezier(.16, .8, .3, 1);
}

#services3D .service-3d-item[data-direction="left"] {
    transform:
        translateX(-120px)
        rotateY(28deg)
        rotateZ(-2deg)
        scale(.92);
}

#services3D .service-3d-item[data-direction="right"] {
    flex-direction: row-reverse;
    transform:
        translateX(120px)
        rotateY(-28deg)
        rotateZ(2deg)
        scale(.92);
}

#services3D .service-3d-item.is-visible {
    opacity: 1;
    transform: translateX(0) rotateY(0) rotateZ(0) scale(1);
}

/* -- Image: wider, layered, tiltable -- */

#services3D .service-3d-image {
    position: relative;
    flex: 0 0 58%;
    width: 58%;
    height: 52vh;
    min-height: 340px;
    overflow: hidden;
    transform-style: preserve-3d;
    transform: rotateY(0) rotateX(0);
    transition: transform .25s ease-out, box-shadow .25s ease-out;
    clip-path: polygon(
        3% 0,
        97% 0,
        100% 5%,
        100% 95%,
        97% 100%,
        3% 100%,
        0 95%,
        0 5%
    );
    box-shadow:
        0 20px 40px rgba(13, 30, 61, .15),
        0 8px 16px rgba(13, 30, 61, .1);
}

#services3D .service-3d-item.is-visible .service-3d-image {
    box-shadow:
        0 30px 60px rgba(13, 30, 61, .2),
        0 10px 20px rgba(13, 30, 61, .12);
}

#services3D .service-3d-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.08); /* slight overscan so tilt never shows edges */
}

/* subtle moving highlight, mouse-driven via JS custom props */
#services3D .service-3d-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 255, 255, .35),
        rgba(255, 255, 255, 0) 45%
    );
    opacity: 0;
}

/* -- Text -- */

#services3D .service-3d-text {
    position: relative;
    flex: 1;
    /* Was translateZ(40px). It had no visible effect but broke Chrome's hit-testing,
       so the top of every arrow (and most of the drone arrow) wasn't clickable on desktop. */
    transform: none;
}

#services3D .service-3d-index {
    display: block;
    margin-bottom: 10px;
    color: rgba(62, 73, 233, .35);
    font-family: "Sofia Sans", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3em;
}

#services3D .service-3d-text h2 {
    margin: 0 0 15px;
    color: #3E49E9;
    font-size: 64px;
    font-family: "Sofia Sans", sans-serif;
    line-height: .86;
    font-weight: 800;
    letter-spacing: -.05em;
}

#services3D .service-3d-text p {
    display: inline-block; /* was `inline` — max-width has no effect on inline elements,
                               so the paragraph ran full-width and its line box crept
                               up over the arrow below it, eating clicks on its top half */
    max-width: 380px;
    margin: 0;
    padding: 0;
    font-family: "DM Sans", sans-serif;
    color: #000;
    font-size: 17px;
    line-height: 1.5;
}

/* -- Arrow -- */

#services3D .service-3d-arrow {
    margin-top: 12px; /* guaranteed clearance from the paragraph above, regardless of text length */
    margin-left: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    background: #fff;
    color: #3E49E9;
    border-radius: 50%;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(13, 30, 61, .18);
    transition: transform .25s ease, box-shadow .25s ease;
}

#services3D .service-3d-arrow span {
    display: block;
    font-size: 28px;
    line-height: 1;
    transition: transform .2s ease;
}

#services3D .service-3d-arrow:hover {
    transform: scale(1.1) translateZ(10px);
    box-shadow: 0 12px 26px rgba(13, 30, 61, .26);
}

#services3D .service-3d-arrow:hover span {
    transform: translateX(3px);
}

/* -- Drone video card -- */

#services3D .drone-service-image {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#services3D .drone-image-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 5;
}

#services3D .drone-service-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

#services3D .drone-service-item .service-3d-text {
    position: relative;
    z-index: 999;
}

#services3D .drone-service-item .drone-service-arrow {
    position: relative;
    z-index: 1000 !important;
    display: inline-flex;
    pointer-events: auto !important;
    cursor: pointer;
}

#services3D .drone-service-image .service-3d-shine {
    pointer-events: none !important;
}

/* -- Services 3D: tablet -- */

@media (max-width: 1100px) {

    #services3D .services-3d-inner {
        gap: 130px;
    }

    #services3D .service-3d-item,
    #services3D .service-3d-item[data-direction="right"] {
        flex-direction: column;
        align-items: flex-start;
        gap: 35px;
    }

    #services3D .service-3d-image {
        width: 100%;
        flex: none;
        height: 48vh;
    }

    #services3D .service-3d-text {
        transform: none;
    }
}

/* -- Services 3D: mobile -- */

@media (max-width: 767px) {

    #services3D {
        padding: 0px 0;
    }

    #services3D .services-3d-inner {
        gap: 60px !important;
        padding: 0 7vw;
    }

    #services3D .service-3d-item[data-direction="left"] {
        transform: translateX(-50px) rotateY(0) scale(.95);
    }

    #services3D .service-3d-item[data-direction="right"] {
        transform: translateX(50px) rotateY(0) scale(.95);
    }

    #services3D .service-3d-image {
        height: 34vh;
        min-height: 230px;
    }

    #services3D .service-3d-text h2 {
        font-size: 40px;
    }

    #services3D .service-3d-text p {
        font-size: 15px;
    }

    #services3D .drone-service-video {
        object-fit: cover;
    }

    #services3D .service-3d-item,
    #services3D .service-3d-item[data-direction="right"] {
        align-items: center;
        text-align: center;
    }

    #services3D .service-3d-text {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #services3D .service-3d-text p {
        font-size: 16px;
        max-width: 100%;
    }
}

/* =========================================================
   SERVICES 3D — MOBILE
========================================================= */

@media (max-width: 767px) {

    /* Main section */
    #services3D {
        padding: 40px 0 !important;
    }

    .services-3d {
        width: 100%;
        padding: 0;
        overflow: hidden;
    }

    .services-3d-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 50px;
        padding: 0 20px;
    }

    /* Individual service */
    .service-3d-item {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 25px;

        /* Remove desktop positioning/3D behaviour */
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative;
    }

    /* Image */
    .service-3d-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 0.72;
        overflow: hidden;
        position: relative;

        transform: none !important;
        border-radius: 0;
    }

    .service-3d-image a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .service-3d-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;

        transform: none !important;
    }

    /* Shine */
    .service-3d-shine {
        pointer-events: none;
    }

    /* Text */
    .service-3d-text {
        width: 100%;
        padding: 0;
    }

    .service-3d-text h2 {
        margin: 0 0 15px;
        font-size: 35px;
        line-height: 0.9;
        letter-spacing: -0.04em;
    }

    .service-3d-text p {
        margin: 0;
        max-width: 100%;
        font-size: 17px;
        line-height: 1.6;
    }

    /* Remove the <br> spacing from desktop */
    .service-3d-text br {
        display: none;
    }

    /* Arrow */
    .service-3d-arrow {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 52px;
        height: 52px;

        margin-top: 22px;

        text-decoration: none;
    }

    .service-3d-arrow span {
        font-size: 30px;
        line-height: 1;
    }


    /* =====================================================
       DRONE VIDEO
    ===================================================== */

    .drone-service-image {
        aspect-ratio: 1 / 0.72;
    }

    .drone-service-video {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .drone-image-link {
        display: block;
        width: 100%;
        height: 100%;
    }


    /* =====================================================
       ALTERNATING LAYOUT — DISABLE ON MOBILE
    ===================================================== */

    .service-3d-item[data-direction="left"],
    .service-3d-item[data-direction="right"] {
        transform: none !important;
        left: auto !important;
        right: auto !important;
    }


    /* =====================================================
       REMOVE DESKTOP 3D EFFECTS
    ===================================================== */

    .service-3d-image {
        perspective: none !important;
    }

    .service-3d-image:hover {
        transform: none !important;
    }

    .service-3d-image img:hover {
        transform: scale(1.02) !important;
    }


    /* =====================================================
       LAST ITEM
    ===================================================== */

    .service-3d-item:last-child {
        margin-bottom: 10px;
    }

}


/* -- Services 3D: reduced motion -- */

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

    #services3D .service-3d-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    #services3D .service-3d-image {
        transition: none !important;
    }
}


/* ==========================================================
   HOMEPAGE SLIDING BANNER
========================================================== */

.hybrid-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(120deg, #1683FF 0%, #0064E8 45%, #003BB8 100%);
    padding: 45px 0;
}

.hybrid-marquee::before {
    content: "";
    position: absolute;
    top: -300px;
    right: -150px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 205, 255, .25) 0%, rgba(50, 150, 255, .12) 35%, rgba(0, 59, 184, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.hybrid-marquee::after {
    content: "";
    position: absolute;
    bottom: -300px;
    left: -200px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.hybrid-marquee-track {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    width: max-content;
    gap: 55px;
    white-space: nowrap;
    will-change: transform;
}

.hybrid-marquee-word {
    flex: 0 0 auto;
    font-family: 'Sofia Sans', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.06em;
    color: #ffffff;
    text-decoration: none;
    transition: text-shadow 0.2s ease, transform 0.2s ease;
}

.hybrid-marquee-word:hover,
.hybrid-marquee-word:focus,
.hybrid-marquee-word:active,
.hybrid-marquee-word:visited {
    color: #ffffff;
    text-decoration: none;
}

.hybrid-marquee-word:hover {
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.hybrid-marquee-icon {
    flex: 0 0 auto;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hybrid-marquee-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

@media (max-width: 767px) {
    .hybrid-marquee { padding: 35px 0; }
    .hybrid-marquee-track { gap: 25px; }
    .hybrid-marquee-icon { width: 45px; height: 45px; }
    .hybrid-marquee-word { font-size: 35px !important; }
}


/* ==========================================================
   START YOUR PROJECT
========================================================== */

#cmStartProjectMarquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 45px 0;
}

/* -- Subtle blue glow -- */

#cmStartProjectMarquee::before {
    content: "";
    position: absolute;
    top: -300px;
    right: -150px;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    pointer-events: none;
}

#cmStartProjectMarquee::after {
    content: "";
    position: absolute;
    bottom: -300px;
    left: -200px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    pointer-events: none;
}

/* -- Track -- */

#cmStartProjectMarquee .cm-marquee-track {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    will-change: transform;
    animation: cmMarqueeFallback 24s linear infinite;
}

/* -- Each repeated set -- */

#cmStartProjectMarquee .cm-marquee-set {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 55px;
    padding-right: 55px;
}

/* -- Text -- */

#cmStartProjectMarquee .cm-marquee-word {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    font-family: 'Sofia Sans', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: .9;
    letter-spacing: -.06em;
    color: #024DE3;
}

/* -- Triangle icon -- */

#cmStartProjectMarquee .cm-marquee-icon {
    flex: 0 0 auto;
    width: 75px;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#cmStartProjectMarquee .cm-marquee-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(3451%) hue-rotate(210deg) brightness(91%) contrast(106%);
}

/* -- CSS fallback animation -- */

@keyframes cmMarqueeFallback {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-33.333333%, 0, 0); }
}

/* -- Mobile -- */

@media (max-width: 767px) {
    #cmStartProjectMarquee { padding: 35px 0; }
    #cmStartProjectMarquee .cm-marquee-set { gap: 25px; padding-right: 25px; }
    #cmStartProjectMarquee .cm-marquee-icon { width: 45px; height: 45px; }
    #cmStartProjectMarquee .cm-marquee-word { font-size: 35px; }
}


/* ==========================================================
   FEATURED PROJECT
========================================================== */

.cm-project-preview {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: #111;
}

.cm-project-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.cm-project-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-width: none;
    display: block;
    transform: translateY(0);
    transition: transform 16s cubic-bezier(0.16, 1, 0.3, 1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cm-project-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0) 65%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.cm-project-preview:hover .cm-project-overlay {
    opacity: 1;
}

.cm-project-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.cm-project-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    background: #5F8FF1;
    color: #fff;
    font-family: 'Sofia Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cm-project-button:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

@media (max-width: 767px) {
    .cm-project-preview { height: 450px; }
    .cm-project-overlay { opacity: 1; padding: 20px; }
    .cm-project-buttons { gap: 6px; }
    .cm-project-button { padding: 11px 15px; font-size: 9px; letter-spacing: 1px; }
    .cm-project-image img { transition-duration: 12s; }
}


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

.logo-slider {
    overflow: hidden;
    background: #fff;
    padding: 20px 0;
}

.logo-track {
    display: flex;
    width: max-content;
    animation: scroll 25s linear infinite;
}

.logo-track img {
    height: 60px;
    margin: 0 60px;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* pause animation on hover */
.logo-slider:hover .logo-track {
    animation-play-state: paused;
}

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


/* ==========================================================
   HOW WE WORK
========================================================== */

.hww__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
}

.hww__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 26px;
    background: #3B5CD4;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 6px;
    color: #fff;
    transition: background .25s ease, transform .25s ease;
}

.hww__card:hover {
    background: #3B5CD4;
    transform: translateY(-4px);
}

.hww__num {
    font-family: 'Sofia Sans', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #c9d6ff;
    line-height: 1;
}

.hww__label {
    margin: 0;
    font-family: 'Sofia Sans', sans-serif;
    color: #fff !important;
    font-size: 23px;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.hww__copy {
    margin: 0;
    font-size: 18px;
    line-height: 1.75;
    color: #fff;
    text-wrap: pretty;
}

@media (max-width: 900px) {
    .hww__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 520px) {
    .hww__grid { grid-template-columns: 1fr; }
}


/* ==========================================================
   WHY CHOOSE US
========================================================== */

#cmWhy {
    --cm-blue: #5283F0;
    --cm-dark: #111827;
    --cm-grey: #697386;
    --cm-border: #E5E7EB;
    width: 100%;
    padding: 30px 0px 10px;
    box-sizing: border-box;
    font-family: 'Sofia Sans', sans-serif;
}

/* -- Cards container -- */

#cmWhy .cm-why-cards {
    position: relative;
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}

/* -- Card -- */

#cmWhy .cm-why-card {
    position: sticky;
    top: 50px;
    width: 100%;
    min-height: 650px;
    margin-bottom: 60px;
    background: #fff;
    border: 1px solid var(--cm-border);
    border-radius: 18px;
    overflow: hidden;
    box-sizing: border-box;
    transform-origin: center top;
    will-change: transform;
    box-shadow: 0 20px 70px rgba(17, 24, 39, .06);
}

/* -- Card inner -- */

#cmWhy .cm-why-card-inner {
    min-height: 650px;
    padding: 55px 70px 70px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* -- Main content, centred -- */

#cmWhy .cm-why-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 70px 0 20px;
}

/* -- Large heading -- */

#cmWhy .cm-why-main h3 {
    margin: 0 0 55px;
    color: var(--cm-dark);
    font-size: 70px;
    line-height: .92;
    letter-spacing: -.065em;
    font-weight: 700;
    text-align: center;
}

#cmWhy .cm-why-main h3 span {
    color: var(--cm-blue);
}

/* -- Copy -- */

#cmWhy .cm-why-copy {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#cmWhy .cm-why-copy p {
    margin: 0;
    color: #111827;
    font-family: 'DM Sans', sans-serif;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 400;
    text-align: center;
}

/* -- Blue line -- */

#cmWhy .cm-why-line {
    width: 60px;
    height: 3px;
    margin-top: 30px;
    background: var(--cm-blue);
}

/* -- Stack order -- */

#cmWhy .cm-why-card:nth-child(1) { z-index: 1; }
#cmWhy .cm-why-card:nth-child(2) { z-index: 2; }
#cmWhy .cm-why-card:nth-child(3) { z-index: 3; }
#cmWhy .cm-why-card:nth-child(4) { z-index: 4; }

/* -- Why choose us: tablet -- */

@media (max-width: 1100px) {

    #cmWhy {
        padding: 100px 25px 130px;
    }

    #cmWhy .cm-why-card-inner {
        padding: 50px 55px 60px;
    }

    #cmWhy .cm-why-main h3 {
        font-size: clamp(65px, 9vw, 105px);
    }
}

/* -- Why choose us: mobile -- */

@media (max-width: 800px) {

    #cmWhy {
        padding: 80px 15px 100px;
    }

    #cmWhy .cm-why-card {
        top: 20px;
        min-height: 560px;
        margin-bottom: 30px;
        border-radius: 12px;
    }

    #cmWhy .cm-why-card-inner {
        min-height: 560px;
        padding: 35px 30px 45px;
    }

    #cmWhy .cm-why-main {
        padding-top: 50px;
    }

    #cmWhy .cm-why-main h3 {
        font-size: 50px;
        margin-bottom: 40px;
    }

    #cmWhy .cm-why-copy p {
        font-size: 17px;
    }
}

/* -- Why choose us: small mobile -- */

@media (max-width: 500px) {

    #cmWhy {
        padding: 60px 12px 80px;
    }

    #cmWhy .cm-why-card {
        min-height: 510px;
    }

    #cmWhy .cm-why-card-inner {
        min-height: 510px;
        padding: 30px 25px 40px;
    }

    #cmWhy .cm-why-main h3 {
        font-size: 51px;
    }

    #cmWhy .cm-why-copy p {
        font-size: 16px;
    }
}

/* =========================
   WORK CARDS
   ========================= */

#city-media-work {
  width: 100%;
  overflow: hidden;
  color: #fff;
}

#city-media-work * {
  box-sizing: border-box;
}


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

.cm-work-top {
  width: min(1400px, calc(100% - 80px));
  margin: 0 auto 70px;
}

#city-media-work .cm-work-top h2 {
  margin: 0;
  font-family: "Sofia Sans", sans-serif;
  font-size: clamp(70px, 8vw, 125px);
  font-weight: 700;
  line-height: .78;
  letter-spacing: -.06em;
  color: #ffffff !important;
}


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

.cm-projects {
  width: min(1400px, calc(100% - 80px));
  margin: 0 auto;

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

  gap: 30px;

  /* Room for the right-hand card stagger (translateY 60px)
     so the last card isn't clipped by overflow: hidden */
  padding-bottom: 60px;
}


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

.cm-project {
  position: relative;

  display: block;

  width: 100%;
  height: 650px;

  overflow: hidden;

  background: #222;

  text-decoration: none;

  isolation: isolate;

  border-radius: 24px;

  box-shadow: 0 20px 50px rgba(0,0,0,.98);

  opacity: 0;

  transition:
    opacity .8s ease,
    transform 1s cubic-bezier(.16,1,.3,1);
}


/* =========================
   LEFT / RIGHT ANIMATION
   ========================= */

/* LEFT CARDS */

.cm-project:nth-child(odd) {
  transform: translateX(-120px);
}


/* RIGHT CARDS */

.cm-project:nth-child(even) {
  transform: translateX(120px) translateY(60px);
}


/* WHEN VISIBLE */

.cm-project.cm-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
}


/* Keep right-hand stagger after animation */

.cm-project:nth-child(even).cm-visible {
  transform: translateY(60px);
}


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

.cm-project-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100% !important;

  object-fit: cover;

  transform: scale(1);

  transition:
    transform 1.1s cubic-bezier(.16,1,.3,1);

  z-index: -4;
}

.cm-project:hover .cm-project-image {
  transform: scale(1.06);
}


/* =========================
   DARK OVERLAY
   ========================= */

.cm-project::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0) 30%,
      rgba(0,0,0,.04) 50%,
      rgba(0,0,0,.2) 100%
    );

  z-index: -3;
}


/* =========================
   BLUE SHAPE
   ========================= */

.cm-project-shape {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;

  /* Increased so all wording sits inside */
  height: 33%;

  z-index: 1;

  pointer-events: none;

  opacity: 1;

  transition: opacity .5s ease;

  background:
    linear-gradient(
      135deg,
      #3E49E9 0%,
      #3E49E9 65%,
      #ffffff 200%
    );

  clip-path:
    polygon(
      0% 0%,
      100% 58%,
      100% 100%,
      0% 100%
    );
}

.cm-project:hover .cm-project-shape {
  opacity: 0;
}


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

.cm-project-content {
  position: absolute;

  left: 32px;
  right: 100px;
  bottom: 32px;

  z-index: 4;

  max-width: calc(100% - 132px);

  opacity: 1;

  transition:
    opacity .5s ease;
}

.cm-project:hover .cm-project-content {
  opacity: 0;
}


/* =========================
   CATEGORY
   ========================= */

#city-media-work .cm-project-category {
  display: block;

  margin-bottom: 9px;

  font-family: "DM Sans", sans-serif;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: .13em;

  text-transform: uppercase;

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


/* =========================
   TITLE
   ========================= */

#city-media-work .cm-project-title {
  margin: 0 0 9px;

  font-family: "Sofia Sans", sans-serif;

  font-size: 35px;

  font-weight: 700;

  line-height: .9;

  letter-spacing: -.045em;

  color: #fff;
}


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

#city-media-work .cm-project-description {
  max-width: 450px;

  margin: 0;

  font-family: "DM Sans", sans-serif;

  font-size: 13px;

  line-height: 1.45;

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


/* =========================
   ARROW
   ========================= */

.cm-project-arrow {
  position: absolute;

  right: 25px;
  bottom: 25px;

  width: 52px;
  height: 52px;

  display: flex;

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

  border-radius: 50%;

  background: #151515;

  color: #fff;

  z-index: 5;

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

.cm-project-arrow svg {
  width: 19px;
  height: 19px;
}

.cm-project:hover .cm-project-arrow {
  background: #fff;
  color: #151515;
}


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

@media (max-width: 900px) {

  #city-media-work {
    padding: 90px 0 100px;
  }

  .cm-work-top {
    width: calc(100% - 50px);
    margin-bottom: 50px;
  }

  .cm-work-top h2 {
    font-size: 85px;
  }

  .cm-projects {
    width: calc(100% - 40px);
    gap: 20px;
    padding-bottom: 40px;
  }

  .cm-project {
    height: 560px;
    border-radius: 20px;
  }


  /* LEFT */

  .cm-project:nth-child(odd) {
    transform: translateX(-80px);
  }


  /* RIGHT */

  .cm-project:nth-child(even) {
    transform: translateX(80px) translateY(40px);
  }


  /* VISIBLE */

  .cm-project.cm-visible {
    opacity: 1;
    transform: translateX(0);
  }

  .cm-project:nth-child(even).cm-visible {
    transform: translateY(40px);
  }


  /* BLUE SHAPE */

  .cm-project-shape {
    height: 47%;

    clip-path:
      polygon(
        0% 0%,
        100% 56%,
        100% 100%,
        0% 100%
      );
  }


  /* CONTENT */

  .cm-project-content {
    left: 25px;
    right: 75px;
    bottom: 25px;

    max-width: calc(100% - 100px);
  }

  #city-media-work .cm-project-title {
    font-size: 38px;
  }

  #city-media-work .cm-project-description {
    font-size: 12px;
    line-height: 1.4;
  }

  .cm-project-arrow {
    right: 18px;
    bottom: 18px;

    width: 48px;
    height: 48px;
  }
}


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

@media (max-width: 650px) {

  #city-media-work {
    padding: 40px 0 60px;
  }


  /* HEADER */

  .cm-work-top {
    width: calc(100% - 40px);
    margin-bottom: 25px;
  }

  .cm-work-top h2 {
    font-size: 64px;
  }


  /* GRID */

  .cm-projects {
    width: calc(100% - 24px);

    grid-template-columns: 1fr;

    gap: 20px;

    /* No stagger on mobile */
    padding-bottom: 0;
  }


  /* CARD */

  .cm-project {
    height: 520px;
    border-radius: 18px;
  }


  /* ODD CARDS - LEFT (any number of cards) */
  .cm-project:nth-child(odd) {
    transform: translateX(-60px);
  }

  /* EVEN CARDS - RIGHT */
  .cm-project:nth-child(even) {
    transform: translateX(60px);
  }


  /* =========================
     VISIBLE
     IMPORTANT:
     This explicitly overrides
     the desktop even-card
     translateY rule.
     ========================= */

  .cm-project.cm-visible,
  .cm-project:nth-child(even).cm-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }

  /* BLUE SHAPE */

  .cm-project-shape {
    height: 40%;

    clip-path:
      polygon(
        0% 0%,
        100% 52%,
        100% 100%,
        0% 100%
      );
  }


  /* CONTENT */

  .cm-project-content {
    left: 24px;
    right: 65px;
    bottom: 25px;

    max-width: calc(100% - 89px);
  }


  /* CATEGORY */

  #city-media-work .cm-project-category {
    font-size: 9px;
    margin-bottom: 8px;
  }


  /* TITLE */

  #city-media-work .cm-project-title {
    font-size: 36px;
    line-height: .9;
    margin-bottom: 8px;
  }


  /* DESCRIPTION */

  #city-media-work .cm-project-description {
    max-width: 100%;

    font-size: 12px;

    line-height: 1.4;
  }


  /* ARROW */

  .cm-project-arrow {
    right: 18px;
    bottom: 18px;

    width: 48px;
    height: 48px;
  }
}

/* =========================
   WEBSITE MOCKUP FORM
   (Fluent Form 3 — "Your Website Reimagined")
   ========================= */

form.fluent_form_3 .ff-t-container {
  display: flex;
  align-items: center;
  gap: 14px;

  max-width: 1060px;
  margin: 0 auto;
  padding: 12px;

  background: #fff;
  border: 1px solid #E4E6F2;
  border-radius: 999px;
  box-shadow: 0 20px 60px rgba(62, 73, 233, .10);
}

form.fluent_form_3 .ff-t-cell {
  padding: 0 !important;
  margin: 0;
}

form.fluent_form_3 .ff-t-column-1,
form.fluent_form_3 .ff-t-column-2 {
  flex: 1 1 0 !important;
  min-width: 0;
}

/* Fluent sets every cell to width: 100%, which made the button cell take the
   whole row and squash the inputs */
form.fluent_form_3 .ff-t-column-3 {
  flex: 0 0 auto !important;
  width: auto !important;
}

form.fluent_form_3 .ff-el-group,
form.fluent_form_3 .ff_submit_btn_wrapper {
  margin-bottom: 0;
  align-items: center !important;
}

form.fluent_form_3 .ff-el-input--content {
  position: relative;
}

form.fluent_form_3.frm-fluent-form .ff-el-input--content input.ff-el-form-control {
  height: 64px;
  padding: 0 28px;

  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #0C1E3C;

  text-transform: none;
  letter-spacing: normal;

  background: #F4F5FA;
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: none;

  transition: border-color .2s ease, background .2s ease;
}

form.fluent_form_3.frm-fluent-form .ff-el-input--content input.ff-el-form-control::placeholder {
  color: #8A90A6;
  opacity: 1;
  text-transform: none;
}

form.fluent_form_3.frm-fluent-form .ff-el-input--content input.ff-el-form-control:focus {
  background: #fff;
  border-color: #3E49E9;
  outline: none;
}

/* "https://" prefix inside the website box */
form.fluent_form_3 .ff-t-column-1 .ff-el-input--content::before {
  content: "https://";

  position: absolute;
  left: 26px;
  top: 32px;
  transform: translateY(-50%);

  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  color: #8A90A6;

  pointer-events: none;
  z-index: 1;
}

form.fluent_form_3.frm-fluent-form .ff-t-column-1 .ff-el-input--content input.ff-el-form-control {
  padding-left: 92px;
}

/* The Fluent Forms widget's own style settings set the button colours with
   !important, so these need it too (and a more specific selector) */
.fluentform-widget-wrapper form.fluent_form_3 .ff_submit_btn_wrapper .ff-btn-submit.wpf_has_custom_css.ff-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 64px;
  min-width: 0 !important;
  margin: 0 !important; /* Fluent adds a 20px bottom margin, which lifted the button above the inputs */
  padding: 0 46px;
  line-height: 1;

  font-family: "Sofia Sans", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;

  color: #fff !important;
  background: #3E49E9 !important;
  border: 1px solid #3E49E9 !important;
  border-radius: 999px !important;

  transition: background .25s ease, color .25s ease, transform .25s ease;
}

.fluentform-widget-wrapper form.fluent_form_3 .ff_submit_btn_wrapper .ff-btn-submit.wpf_has_custom_css.ff-btn:hover {
  color: #3E49E9 !important;
  background: #fff !important;
  transform: translateY(-1px);
}

/* Field errors sit under the pill rather than pushing it out of shape */
form.fluent_form_3 .cmu-w3f-error {
  position: absolute;
  left: 28px;
  top: calc(100% + 18px);
  font-size: 13px;
}

/* Success message matches the pill */
.fluentform_wrapper_3 .ff-message-success {
  max-width: 1060px;
  margin: 0 auto;
  padding: 22px 32px;

  font-family: "DM Sans", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
  color: #0C1E3C;

  background: #fff;
  border: 1px solid #E4E6F2;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(62, 73, 233, .10);
}

@media (max-width: 767px) {

  form.fluent_form_3 .ff-t-container {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    border-radius: 32px;
  }

  form.fluent_form_3 .ff-t-cell,
  form.fluent_form_3 .ff-t-column-3 {
    width: 100% !important;
  }

  form.fluent_form_3.frm-fluent-form .ff-el-input--content input.ff-el-form-control,
  .fluentform-widget-wrapper form.fluent_form_3 .ff_submit_btn_wrapper .ff-btn-submit.wpf_has_custom_css.ff-btn {
    height: 56px;
    width: 100%;
  }

  form.fluent_form_3 .ff-t-column-1 .ff-el-input--content::before {
    top: 28px;
  }

  form.fluent_form_3 .cmu-w3f-error {
    position: static;
    padding: 6px 0 0 20px;
  }

  .fluentform_wrapper_3 .ff-message-success {
    padding: 20px 22px;
    font-size: 16px;
  }
}


/* =========================
   MOCKUP STEPS (01 / 02 / 03)
   Elementor containers: .cm-steps > .cm-step > (.cm-step-num, .cm-step-body)
   ========================= */

.cm-steps {
  gap: 40px;
}

.cm-step {
  position: relative;
  overflow: hidden;

  background: #EAEAEA;
  border-radius: 24px;
}

.cm-step .cm-step-num .elementor-heading-title {
  margin: 0;
  padding: 36px 44px 0;

  font-family: "Sofia Sans", sans-serif;
  font-size: 88px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  color: #D2D2D2;
}

/* Blue lower half with the angled top edge, like the work cards */
.cm-step .cm-step-body {
  flex-grow: 1;
  margin-top: -6px;
  padding: 78px 44px 44px;

  background: linear-gradient(135deg, #3E49E9 0%, #3E49E9 55%, #6A79F2 140%);
  clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
}

.cm-step .cm-step-title .elementor-heading-title {
  margin: 0 0 10px;

  font-family: "Sofia Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #fff;
}

.cm-step .cm-step-text,
.cm-step .cm-step-text p {
  margin: 0;

  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

@media (max-width: 1024px) {

  .cm-steps {
    gap: 20px;
  }

  .cm-step .cm-step-num .elementor-heading-title {
    padding: 28px 30px 0;
    font-size: 70px;
  }

  .cm-step .cm-step-body {
    padding: 64px 30px 32px;
  }

  .cm-step .cm-step-title .elementor-heading-title {
    font-size: 26px;
  }

  .cm-step .cm-step-text,
  .cm-step .cm-step-text p {
    font-size: 16px;
  }
}

@media (max-width: 767px) {

  .cm-step .cm-step-body {
    clip-path: polygon(0 36px, 100% 0, 100% 100%, 0 100%);
    padding-top: 56px;
  }
}

.cm-steps > .cm-step {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 767px) {
  .cm-steps > .cm-step {
    flex: 1 1 auto;
    width: 100%;
  }
}

/* Keep the mockup form and step cards off the screen edges once the
   1220px section is wider than the screen */
@media (max-width: 1260px) {
  form.fluent_form_3 .ff-t-container,
  .fluentform_wrapper_3 .ff-message-success {
    width: auto !important; /* Fluent's width: 100% plus these margins overflowed the screen */
    margin-left: 24px;
    margin-right: 24px;
  }

  .cm-steps {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

@media (max-width: 767px) {
  form.fluent_form_3 .ff-t-container,
  .fluentform_wrapper_3 .ff-message-success {
    margin-left: 16px;
    margin-right: 16px;
  }

  .cm-steps {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}


/* =========================
   HEADER — "OUR GROUP" LOGOS
   (City HR, City Print — between the logo and the menu)
   ========================= */

/* Sits inside the menu container, just left of the menu button. Positioned
   absolutely so it takes no space and the logo/menu layout is unchanged. */
.elementor-element-b2f2778 {
  position: relative;
}

.cm-group {
  position: absolute !important;
  top: 50%;
  right: 76px;
  transform: translateY(-50%);

  width: auto !important;
  padding-left: 26px !important;
  border-left: 1px solid #E4E6F2;
}

.cm-group .cm-group-label .elementor-heading-title {
  font-family: "DM Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #8A90A6;
}

.cm-group .cm-group-logo {
  width: auto !important;
}

.cm-group .cm-group-logo img {
  display: block;
  width: auto !important;
  height: 36px !important;
  max-width: none;
  opacity: .85;
  transition: opacity .25s ease, transform .25s ease;
}

.cm-group .cm-group-logo a:hover img,
.cm-group .cm-group-logo a:focus-visible img {
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 1024px) {
  .cm-group {
    right: 62px;
    padding-left: 18px !important;
    gap: 16px !important;
  }

  .cm-group .cm-group-label {
    display: none;
  }

  .cm-group .cm-group-logo img {
    height: 30px !important;
  }
}

/* Label and logos share one centre line */
.cm-group > .elementor-widget {
  display: flex;
  align-items: center;
  margin: 0 !important;
}

.cm-group .cm-group-label .elementor-heading-title {
  display: block;
  margin: 0;
  line-height: 1;
}

.cm-group .cm-group-logo a {
  display: block;
  line-height: 0;
}

/* Phones: its own row under the logo and menu button */
@media (max-width: 767px) {
  .cm-group {
    position: static !important;
    transform: none;
    order: 2;

    width: 100% !important;
    justify-content: center;
    gap: 18px !important;

    margin-top: -22px;
    padding: 10px 0 0 !important;
    border-left: 0;
    border-top: 1px solid #E4E6F2;
  }

  .cm-group .cm-group-label {
    display: flex;
  }

  .cm-group .cm-group-label .elementor-heading-title {
    font-size: 11px;
  }

  .cm-group .cm-group-logo img {
    height: 30px !important;
  }

  /* City Print's wordmark is small within its logo, so it gets a little more height */
  .cm-group .cm-group-logo a[href*="cityprint"] img {
    height: 38px !important;
  }
}

/* Narrow phones: tighter spacing so the group row stays inside the margins */
@media (max-width: 380px) {
  .cm-group {
    gap: 12px !important;
  }
}


/* =========================
   BUTTONS (match the site's Elementor buttons:
   Sofia Sans 18px bold uppercase, #306BED, 30px radius)
   ========================= */

.cm-btn,
.cm-btn:hover,
.cm-btn:focus,
.cm-btn:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 15px 30px 14px;

  font-family: "Sofia Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  color: #fff;
  background: #306BED;
  border: 0;
  border-radius: 30px;

  transition: .3s;
}

/* White version (as used on the site), with a soft shadow so it reads on light
   backgrounds. Extra specificity: Elementor's ".elementor a" removes box-shadows. */
.cm-btn--light,
.cm-btn--light:hover,
.cm-btn--light:focus,
.cm-btn--light:visited {
  color: #306BED;
  background: #fff;
}

.elementor a.cm-btn.cm-btn--light {
  box-shadow: 0 8px 24px rgba(13, 30, 61, .14);
}

.cm-btn:focus-visible {
  outline: 2px solid #306BED;
  outline-offset: 3px;
}


/* =========================
   HOMEPAGE HERO — BUTTONS UNDER THE LOGO
   Visible from the start, while the logo animates above them.
   ========================= */

/* Lift the whole logo animation (icon, name, strapline) and the buttons a little */
.logo-reveal {
  --logo-lift: -20px;
}

.logo-reveal .logo-icon,
.logo-reveal .logo-name,
.logo-reveal .logo-services {
  margin-top: var(--logo-lift);
}

.logo-reveal .logo-cta {
  position: absolute;
  left: 50%;
  top: 81%;
  z-index: 25;
  margin-top: var(--logo-lift);

  display: flex;
  gap: 14px;

  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .logo-reveal {
    --logo-lift: -12px;
  }

  /* the strapline already sits 20px lower on phones */
  .logo-reveal .logo-services {
    margin-top: calc(20px + var(--logo-lift));
  }

  .logo-reveal .logo-cta {
    top: 86%;
    gap: 10px;
  }

  .logo-reveal .logo-cta .cm-btn {
    padding: 13px 20px 12px;
    font-size: 15px;
    line-height: 15px;
  }
}

/* Land the "Free Website Redesign" link exactly at the bottom of the sticky header
   (a couple of px under it, so none of the blue banner above peeks through) */
#websiteredesign {
  scroll-margin-top: 101px;
}

@media (max-width: 767px) {
  #websiteredesign {
    scroll-margin-top: 132px;
  }
}

html {
  scroll-behavior: smooth;
}


/* =========================
   HOMEPAGE HERO — keep the floating cards clear of the buttons
   ========================= */

/* Desktop */
@media (min-width: 1101px) {
  .speed-card   { left: 50%; bottom: 2%; --card-x: -50%; }
  .browser-card { right: 8%; bottom: 6%; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1100px) {
  .speed-card     { bottom: 0; }
  .analytics-card { left: -9%; bottom: -3%; }
  .browser-card   { right: -9%; bottom: -3%; }
  .phone-card     { left: 2%; bottom: 10%; }
}

/* Phones */
@media (max-width: 767px) {
  .analytics-card { bottom: 1% !important; }
  .browser-card   { bottom: 0 !important; }
  .speed-card     { display: none; }
}

/* Phones: centre the logo + buttons in the hero and shrink the floating cards a little */
@media (max-width: 767px) {
  .logo-reveal {
    --logo-lift: -28px;
  }
}

/* Set on .floating-card itself: it declares its own --card-scale: 1, which is why
   scale values set on the outer .laptop-card etc. never took effect */
@media (max-width: 480px) {
  .laptop-card .floating-card,
  .seo-panel .floating-card,
  .analytics-card .floating-card,
  .browser-card .floating-card {
    --card-scale: .8;
  }
}

@media (max-width: 480px) {
  .laptop-card { top: -2% !important; }
  .seo-panel   { top: -3% !important; right: -3% !important; }

  .laptop-card .floating-card,
  .seo-panel .floating-card {
    --card-scale: .72;
  }
}

/* Phones with three group logos: label on its own line, logos in a row underneath */
@media (max-width: 767px) {
  .cm-group {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    column-gap: 16px !important;
  }

  .cm-group .cm-group-label {
    flex: 0 0 100%;
    justify-content: center;
  }

  .cm-group .cm-group-logo img {
    height: 27px !important;
  }

  .cm-group .cm-group-logo a[href*="cityprint"] img {
    height: 33px !important;
  }
}

@media (max-width: 380px) {
  .cm-group {
    column-gap: 12px !important;
  }

  .cm-group .cm-group-logo img {
    height: 25px !important;
  }

  .cm-group .cm-group-logo a[href*="cityprint"] img {
    height: 31px !important;
  }
}

/* Phones: same space above "Our group" as below the logos */
@media (max-width: 767px) {
  .cm-group {
    padding-top: 19px !important;
  }
}

/* Narrow tablets: slightly smaller group logos so they stay clear of the main logo */
@media (min-width: 768px) and (max-width: 900px) {
  .cm-group {
    gap: 12px !important;
    padding-left: 14px !important;
  }

  .cm-group .cm-group-logo img {
    height: 25px !important;
  }
}

/* Mockup form on phones: smaller placeholder text. Typed text stays at 16px,
   the minimum that stops iPhones zooming in when the field is tapped. */
@media (max-width: 767px) {
  form.fluent_form_3.frm-fluent-form .ff-el-input--content input.ff-el-form-control {
    font-size: 16px;
  }

  form.fluent_form_3.frm-fluent-form .ff-el-input--content input.ff-el-form-control::placeholder {
    font-size: 15px;
  }

  form.fluent_form_3 .ff-t-column-1 .ff-el-input--content::before {
    font-size: 15px;
  }

  form.fluent_form_3.frm-fluent-form .ff-t-column-1 .ff-el-input--content input.ff-el-form-control {
    padding-left: 84px;
  }
}


/* =========================
   IN-TEXT LINKS (body copy only — not buttons or menus)
   The theme default was pink (#CC3366). Links take the colour of the text
   around them with an underline, so they read on white and blue sections alike.
   ========================= */

.elementor-widget-text-editor a:not(.elementor-button):not(.cm-btn),
.elementor-widget-html p a:not(.cm-btn) {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}

.elementor-widget-text-editor a:not(.elementor-button):not(.cm-btn):hover,
.elementor-widget-html p a:not(.cm-btn):hover {
  color: inherit;
  opacity: .75;
}

/* Hero buttons on phones: three buttons don't fit on one line, so
   "Free Website Redesign" sits on its own row with the other two below.
   The block grows downwards from where the single row used to start. */
@media (max-width: 767px) {
  .logo-reveal .logo-cta {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 10px;
    top: calc(86% - 20px);
    transform: translate(-50%, 0);
  }

  .logo-reveal .logo-cta .cm-btn:first-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
}

/* Keep the floating cards clear of the wider button row */
@media (min-width: 1101px) {
  .phone-card { left: 14%; }
}

@media (max-width: 480px) {
  .analytics-card .floating-card,
  .browser-card .floating-card {
    --card-scale: .62;
  }

  .analytics-card { bottom: -2% !important; }
  .browser-card   { bottom: -3% !important; }
}


/* =========================
   FLOATING WHATSAPP BUTTON (bottom right, every page)
   Above page content, below the sticky header and menu (z-index 100).
   ========================= */

.cm-whatsapp,
.cm-whatsapp:hover,
.cm-whatsapp:focus,
.cm-whatsapp:visited {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;

  color: #fff;
  background: #25D366; /* WhatsApp green */
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(13, 30, 61, .25), 0 2px 6px rgba(13, 30, 61, .15);
  text-decoration: none;

  transition: transform .25s ease, box-shadow .25s ease;
}

.cm-whatsapp svg {
  width: 38px;
  height: 38px;
}

.cm-whatsapp:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 34px rgba(13, 30, 61, .3), 0 3px 8px rgba(13, 30, 61, .18);
}

.cm-whatsapp:focus-visible {
  outline: 3px solid #306BED;
  outline-offset: 3px;
}

/* "Chat on WhatsApp" label slides out on hover (desktop) */
.cm-whatsapp-label {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translate(8px, -50%);

  padding: 9px 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #0C1E3C;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(13, 30, 61, .15);

  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.cm-whatsapp:hover .cm-whatsapp-label,
.cm-whatsapp:focus-visible .cm-whatsapp-label {
  opacity: 1;
  transform: translate(0, -50%);
}

@media (max-width: 767px) {
  .cm-whatsapp,
  .cm-whatsapp:hover,
  .cm-whatsapp:focus,
  .cm-whatsapp:visited {
    right: 16px;
    bottom: 16px;
    width: 62px;
    height: 62px;
  }

  .cm-whatsapp svg {
    width: 34px;
    height: 34px;
  }

  .cm-whatsapp-label {
    display: none;
  }
}

@media print {
  .cm-whatsapp { display: none; }
}

/* Work cards: long categories (e.g. "Branding / Website Design / SEO / 3D Design")
   wrap onto two lines on tablets and phones. Keep the lines close together and give
   the blue shape a little more height there so both lines sit inside it. */
#city-media-work .cm-project-category {
  line-height: 1.55;
}

@media (max-width: 900px) {
  .cm-project-shape {
    height: 52%;
  }
}

@media (max-width: 650px) {
  .cm-project-shape {
    height: 48%;
  }
}


/* =========================
   COOKIE CONSENT BANNER (every page, until the visitor chooses)
   Bottom left on desktop, clear of the WhatsApp button; full width on phones.
   Accept and Reject are the same size, as UK guidance expects.
   ========================= */

.cm-cookies {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 95;

  width: 420px;
  max-width: calc(100% - 48px);
  padding: 24px;

  font-family: "DM Sans", sans-serif;
  color: #0C1E3C;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(13, 30, 61, .22), 0 2px 8px rgba(13, 30, 61, .12);

  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease;
}

.cm-cookies[hidden] {
  display: none;
}

.cm-cookies.is-visible {
  opacity: 1;
  transform: none;
}

.cm-cookies-text {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
}

.cm-cookies-text a,
.cm-cookies-text a:visited {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.cm-cookies-text a:hover {
  color: #306BED;
}

.cm-cookies-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Buttons use .cm-btn; these reset the theme's default <button> styles */
.cm-cookies button.cm-btn,
.cm-cookies button.cm-btn:hover,
.cm-cookies button.cm-btn:focus {
  width: 100%;
  padding: 14px 20px 13px;
  font-family: "Sofia Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 16px;
  text-transform: uppercase;
  border-radius: 30px;
  color: #fff;
  background: #306BED;
  border: 2px solid #306BED;
  cursor: pointer;
}

.cm-cookies button.cm-btn.cm-btn--light,
.cm-cookies button.cm-btn.cm-btn--light:hover,
.cm-cookies button.cm-btn.cm-btn--light:focus {
  color: #306BED;
  background: #fff;
}

.cm-cookies button.cm-btn:hover {
  transform: translateY(-2px);
}

@media (max-width: 767px) {
  .cm-cookies {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
    padding: 20px;
  }

  .cm-cookies-text {
    font-size: 14px;
  }
}

@media print {
  .cm-cookies { display: none !important; }
}