 :root {--color-primary: #792CA2;--color-secondary: #5A2178;}.nav-full-width .side-navbar-inner, .nav-full-width .side-widgets {max-height: calc(100vh - 160px);overflow-y: auto;}.testimonial-heading h2.text-large-gradient {font-size: clamp(32px, 10vw, 56px);}.testimonial-three-quote h2 {font-size: 22px;height: 80px;width: 80px;line-height: 76px;margin-right: 12px;}.testimonial-three-quote span {font-size: 13px;margin-top: 4px;}.testimonial-three-quote .ratings i {font-size: 12px;}.testimonial-style-three-carousel-custom .testimonial-style-three-item {padding: 26px;height: 100%;}.testimonial-style-three-carousel-custom .swiper-slide {height: auto;}.testimonial-style-three-carousel-custom .testimonial-style-three-item p {font-size: 14px;line-height: 1.7;}.testimonial-style-three-carousel-custom .tes-rating {font-size: 14px;margin-bottom: 16px;}.testimonial-style-three-carousel-custom .tes-rating i {font-size: 11px;}.testimonial-style-three-carousel-custom .tm-provider {margin-top: 20px;}.testimonial-style-three-carousel-custom .tm-provider img {height: 44px;width: 44px;margin-right: 12px;}.testimonial-style-three-carousel-custom .tm-provider h4 {font-size: 15px;margin-bottom: 2px;}.testimonial-style-three-carousel-custom .tm-provider span {font-size: 12px;}.text-accent-purple {color: var(--color-primary);}@media (min-width: 1024px) {nav.navbar.validnavs.navbar-fixed.nav-full-width .navbar-header {padding-top: 18px;padding-bottom: 18px;}nav.navbar.validnavs.navbar-fixed.nav-full-width .navbar-brand > img {width: 95px;height: auto;max-width: none;max-height: none;}}.panel .choose-us-style-one .title {margin-top: 0;padding-top: 12px;}ul.service-list li:first-child a, ul.service-list li a:hover, .card-style-one .bottom a, ul.contact-list li i, .home-blog-one .date {color: #ffffff !important;}.navbar .header-cta-group {display: flex;align-items: center;}.navbar .header-cta-list {display: flex;align-items: center;gap: 15px;margin: 0;padding: 0;list-style: none;}.navbar .header-cta-list li.header-cta {margin: 0 !important;}.navbar .header-cta-list li.header-cta a {padding: 12px 26px !important;border-radius: 30px;font-size: 15px;font-weight: 600;display: inline-flex;align-items: center;gap: 8px;transition: all 0.3s ease-in-out;}.navbar .header-cta-list li.header-cta a i {font-size: 16px;line-height: 1;}.navbar .header-cta-list li.header-cta.filled a {background: var(--color-primary) !important;border: 2px solid var(--color-primary) !important;color: #ffffff !important;}.navbar .header-cta-list li.header-cta.filled a:hover {background: var(--color-secondary) !important;border-color: var(--color-secondary) !important;color: #ffffff !important;}.navbar .header-cta-list li.header-cta.outline a {background: transparent !important;border: 2px solid var(--color-primary) !important;color: var(--color-primary) !important;}.bg-dark .navbar .header-cta-list li.header-cta.outline a {border-color: #ffffff !important;color: #ffffff !important;}.navbar .header-cta-list li.header-cta.outline a:hover {background: var(--color-primary) !important;border-color: var(--color-primary) !important;color: #ffffff !important;}.navbar .header-cta-list li.header-cta.outline.ai-marketing-cta a {background: #ffffff !important;border: 2px solid var(--color-primary) !important;color: var(--color-primary) !important;}.navbar .header-cta-list li.header-cta.outline.ai-marketing-cta a:hover {background: #ffffff !important;border-color: var(--color-primary) !important;color: var(--color-primary) !important;}nav.navbar.validnavs.sticked .header-cta-list li.header-cta.outline.ai-marketing-cta a {background: #ffffff !important;border: 2px solid var(--color-primary) !important;color: var(--color-primary) !important;}nav.navbar.validnavs.sticked .header-cta-list li.header-cta.outline.ai-marketing-cta a:hover {background: var(--color-primary) !important;border-color: var(--color-primary) !important;color: #ffffff !important;}nav.navbar.validnavs.sticked .header-cta-list li.header-cta.filled a {background: var(--color-primary) !important;border: 2px solid var(--color-primary) !important;color: #ffffff !important;}nav.navbar.validnavs.sticked .header-cta-list li.header-cta.filled a:hover {background: var(--color-secondary) !important;border-color: var(--color-secondary) !important;color: #ffffff !important;}@media (max-width: 1023px) {.navbar .header-cta-group {display: none !important;}}.glitch-text {position: relative;}.glitch-text::before, .glitch-text::after {content: attr(data-text);position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: transparent;}.glitch-text::before {color: #00fff9;animation: glitchBefore 1.1s linear 1 both;}.glitch-text::after {color: #ff00c1;animation: glitchAfter 1.1s linear 1 both;}@keyframes glitchBefore {0% {opacity: 0;clip-path: inset(0 0 0 0);transform: translate(0, 0);}4% {opacity: 1;clip-path: inset(10% 0 70% 0);transform: translate(-6px, -2px);}8% {clip-path: inset(60% 0 5% 0);transform: translate(6px, 1px);}12% {clip-path: inset(30% 0 40% 0);transform: translate(-4px, 2px);}16% {clip-path: inset(80% 0 2% 0);transform: translate(5px, -1px);}20% {opacity: 1;clip-path: inset(15% 0 55% 0);transform: translate(-3px, 0);}24% {opacity: 0;transform: translate(0, 0);}100% {opacity: 0;transform: translate(0, 0);}}@keyframes glitchAfter {0% {opacity: 0;clip-path: inset(0 0 0 0);transform: translate(0, 0);}4% {opacity: 1;clip-path: inset(70% 0 8% 0);transform: translate(6px, 2px);}8% {clip-path: inset(5% 0 60% 0);transform: translate(-6px, -1px);}12% {clip-path: inset(45% 0 25% 0);transform: translate(5px, -2px);}16% {clip-path: inset(2% 0 85% 0);transform: translate(-5px, 1px);}20% {opacity: 1;clip-path: inset(55% 0 12% 0);transform: translate(3px, 0);}24% {opacity: 0;transform: translate(0, 0);}100% {opacity: 0;transform: translate(0, 0);}}.services-style-one-carousel {padding: 10px 2px 40px;}.services-style-one-carousel .swiper-wrapper {align-items: stretch;}.services-style-one-carousel .swiper-slide {height: auto;}.services-style-one-carousel .services-style-one-item {height: 100%;}.services-carousel-nav {display: flex;justify-content: flex-start;gap: 20px;margin-top: 20px;}@media (min-width: 992px) {.services-carousel-nav {justify-content: flex-end;margin-top: 0;}}.services-carousel-button-prev, .services-carousel-button-next {display: flex;align-items: center;justify-content: center;height: 55px;width: 55px;border-radius: 50%;border: 2px solid var(--color-primary);color: var(--color-primary);cursor: pointer;transition: all 0.3s ease-in-out;}.services-carousel-button-prev:hover, .services-carousel-button-next:hover {background: var(--color-primary);color: #ffffff;}.services-carousel-button-prev.swiper-button-disabled, .services-carousel-button-next.swiper-button-disabled {opacity: 0.35;cursor: default;}.testimonial-style-three-carousel-custom {padding-bottom: 20px;}.testimonial-style-three-carousel-custom .testimonial-control {height: 46px;position: relative;margin-top: 10px;}.testimonial-style-three-carousel-custom .swiper-button-prev, .testimonial-style-three-carousel-custom .swiper-button-next {height: 46px;width: 46px;margin-top: 0;top: 0;background: var(--white);border: 1px solid #e7e7e7;border-radius: 8px;box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);transition: all 0.3s ease-in-out;}.testimonial-style-three-carousel-custom .swiper-button-prev {left: 0;}.testimonial-style-three-carousel-custom .swiper-button-next {right: 0;}.testimonial-style-three-carousel-custom .swiper-button-prev::after, .testimonial-style-three-carousel-custom .swiper-button-next::after {color: var(--color-heading);font-size: 16px;}.testimonial-style-three-carousel-custom .swiper-button-prev:hover, .testimonial-style-three-carousel-custom .swiper-button-next:hover {background: var(--color-primary);border-color: var(--color-primary);}.testimonial-style-three-carousel-custom .swiper-button-prev:hover::after, .testimonial-style-three-carousel-custom .swiper-button-next:hover::after {color: #ffffff;}.testimonial-style-three-carousel-custom .swiper-button-prev.swiper-button-disabled, .testimonial-style-three-carousel-custom .swiper-button-next.swiper-button-disabled {opacity: 0.35;}.testimonial-style-three-carousel-custom .swiper-pagination {position: absolute;left: 60px;right: 60px;bottom: auto;top: 50%;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;gap: 8px;}.testimonial-style-three-carousel-custom .swiper-pagination-bullet {height: 8px;width: 8px;margin: 0;background: #dcdcdc;opacity: 1;transition: all 0.3s ease-in-out;}.testimonial-style-three-carousel-custom .swiper-pagination-bullet-active {width: 22px;border-radius: 4px;background: var(--bg-gradient);}.client-style-one-item.clients-view-all-wrap {border: none;min-height: auto;padding: 0;text-align: left;}.client-style-one-item.clients-view-all-wrap a {position: static;transform: none;display: inline-block;}.client-marquee-wrap {display: flex;flex-direction: column;height: 100%;border-top: 1px solid #d8d8d8;}.client-marquee-row {display: flex;align-items: center;flex: 1 1 0;border-bottom: 1px solid #d8d8d8;overflow: hidden;}.client-marquee-track-outer {flex: 1 1 auto;overflow: hidden;display: flex;align-items: center;}.client-marquee-track {display: flex;align-items: center;width: max-content;will-change: transform;}.client-marquee-track-inner {display: flex;align-items: center;flex-shrink: 0;}.client-marquee-track-inner img {height: 42px;width: auto;max-width: 150px;object-fit: contain;margin: 0 40px;opacity: 0.85;transition: opacity 0.3s ease;}.client-marquee-row:hover .client-marquee-track-inner img {opacity: 1;}.client-marquee-track.marquee-right {animation: clientMarqueeRight 26s linear infinite;}.client-marquee-track.marquee-left {animation: clientMarqueeLeft 26s linear infinite;}.client-marquee-row:hover .client-marquee-track {animation-play-state: paused;}@keyframes clientMarqueeLeft {from {transform: translateX(0);}to {transform: translateX(-50%);}}@keyframes clientMarqueeRight {from {transform: translateX(-50%);}to {transform: translateX(0);}}@media (max-width: 767px) {.client-marquee-track-inner img {height: 30px;max-width: 110px;margin: 0 24px;}}.cteative-service-item img {filter: brightness(0);opacity: 0.85;}.cteative-service-item p {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}.cteative-view-more {position: relative;z-index: 2;display: inline-flex;align-items: center;gap: 10px;margin-top: 24px;padding: 10px 22px;border-radius: 30px;border: 2px solid var(--color-primary);background: #ffffff;color: var(--color-primary);font-size: 14px;font-weight: 600;transition: all 0.3s ease-in-out;}.cteative-view-more i {font-size: 12px;transition: transform 0.3s ease-in-out;}.cteative-view-more:hover {background: var(--color-primary);color: #ffffff;}.cteative-view-more:hover i {transform: translateX(4px);}.banner-style-eight-area.banner-plain {background-color: #ffffff;}.banner-style-eight-area.banner-plain::before {content: '';position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;right: 0;background-image: linear-gradient(rgba(14, 15, 17, 0.06) 1px, transparent 1px), linear-gradient(to right, rgba(14, 15, 17, 0.06) 1px, transparent 1px);background-size: 100% 51px, 51px 100%;-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 280px), transparent 100%);mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 280px), transparent 100%);}.banner-plain .banner-style-eight-heading {overflow: visible;margin-right: 0;}.banner-plain .banner-eight-scene {position: absolute;top: 50%;right: 0;bottom: auto;transform: translateY(-50%);width: 50%;max-width: none;aspect-ratio: 1 / 1;z-index: 0;pointer-events: none;overflow: visible;perspective: 900px;-webkit-mask-image: none;mask-image: none;}.banner-plain .banner-eight-scene img {width: 100%;height: 100%;object-fit: contain;display: block;}.banner-plain .banner-eight-scene.is-3d img {display: none;}.globe-3d {position: absolute;inset: 0;transform-style: preserve-3d;animation: globeSpin 30s linear infinite;will-change: transform;}@keyframes globeSpin {from {transform: rotateX(-16deg) rotateY(0deg);}to {transform: rotateX(-16deg) rotateY(360deg);}}.globe-3d .gd {position: absolute;left: 50%;top: 50%;width: var(--globe-d, 7px);height: var(--globe-d, 7px);margin-left: calc(var(--globe-d, 7px) / -2);margin-top: calc(var(--globe-d, 7px) / -2);border-radius: 50%;opacity: .92;backface-visibility: hidden;}.globe-3d .gr {position: absolute;left: 50%;top: 50%;width: calc(var(--globe-r, 200px) * 2.16);height: calc(var(--globe-r, 200px) * 2.16);margin-left: calc(var(--globe-r, 200px) * -1.08);margin-top: calc(var(--globe-r, 200px) * -1.08);border: 1.5px solid rgba(192, 133, 224, 0.38);border-radius: 50%;transform: rotateX(72deg);}.globe-3d .gr.gr2 {border-color: rgba(121, 44, 162, 0.26);transform: rotateX(64deg) rotateZ(56deg);}.banner-plain .banner-style-eight-heading, .banner-plain .d-grid, .banner-plain .card-style-one {position: relative;z-index: 2;}.banner-plain .banner-style-eight-heading h2 {color: var(--color-heading);}.banner-plain .banner-style-eight-heading h2.hero-liquid-title {position: relative;display: inline-block;}.banner-plain .banner-style-eight-heading h2.hero-liquid-title strong {position: absolute;inset: 0;color: var(--color-primary);font: inherit;letter-spacing: inherit;text-transform: inherit;pointer-events: none;animation: text-animation 4s ease-in-out infinite;will-change: clip-path;}.banner-plain .banner-style-eight-heading h2.title-right {float: none;text-align: left;display: block;white-space: nowrap;min-height: 1.15em;font-size: clamp(30px, 4.2vw, 80px);color: var(--color-primary);}@keyframes heroLineIn {from {opacity: 0;transform: translateX(-70px);}to {opacity: 1;transform: translateX(0);}}@keyframes heroGlobeIn {from {opacity: 0;transform: translateY(-50%) scale(.94);}to {opacity: 1;transform: translateY(-50%) scale(1);}}.js-anim .banner-plain .hero-line {opacity: 0;transform: translateX(-70px);will-change: transform, opacity;}.js-anim .banner-plain .banner-eight-scene {opacity: 0;}.js-anim .banner-plain.hero-play .hero-line {animation: heroLineIn .85s cubic-bezier(.22, .8, .3, 1) forwards;}.js-anim .banner-plain.hero-play .hero-line.hero-eyebrow {animation-delay: 0s;}.js-anim .banner-plain.hero-play .hero-line.title-left {animation-delay: .20s;}.js-anim .banner-plain.hero-play .hero-line.title-right {animation-delay: .45s;}.js-anim .banner-plain.hero-play .banner-eight-scene {animation: heroGlobeIn 1.1s cubic-bezier(.22, .8, .3, 1) .45s forwards;}@media (prefers-reduced-motion: reduce) {.js-anim .banner-plain .hero-line, .js-anim .banner-plain.hero-play .hero-line, .js-anim .banner-plain .banner-eight-scene, .js-anim .banner-plain.hero-play .banner-eight-scene {animation: none;opacity: 1;transform: none;}.js-anim .banner-plain .banner-eight-scene, .js-anim .banner-plain.hero-play .banner-eight-scene {transform: translateY(-50%);}.globe-3d {animation: none;transform: rotateX(-16deg) rotateY(-25deg);}.banner-plain .banner-style-eight-heading h2.hero-liquid-title strong {animation: none;clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);}}.banner-plain .card-style-one {background: rgba(255, 255, 255, 0.55);border: 1px solid rgba(121, 44, 162, 0.22);box-shadow: 0 18px 44px rgba(37, 14, 50, 0.12);-webkit-backdrop-filter: blur(14px) saturate(150%);backdrop-filter: blur(14px) saturate(150%);}.banner-plain .card-style-one .bottom {color: var(--color-heading);}.banner-plain .d-grid .right {border-top: 2px solid rgba(4, 0, 11, 0.18);}.banner-plain .d-grid h4 {color: var(--color-heading);}@media only screen and (max-width: 1199px) {.banner-plain .banner-eight-scene {width: 52%;opacity: .4;}.js-anim .banner-plain.hero-play .banner-eight-scene {animation-name: heroGlobeInSoft;}@keyframes heroGlobeInSoft {from {opacity: 0;transform: translateY(-50%) scale(.94);}to {opacity: .4;transform: translateY(-50%) scale(1);}}}@media only screen and (max-width: 991px) {.banner-plain .banner-eight-scene {width: 86%;right: -14%;opacity: .26;}.js-anim .banner-plain.hero-play .banner-eight-scene {animation-name: heroGlobeInFaded;}@keyframes heroGlobeInFaded {from {opacity: 0;transform: translateY(-50%) scale(.94);}to {opacity: .26;transform: translateY(-50%) scale(1);}}.banner-plain .banner-style-eight-heading h2.title-right {white-space: normal;}}@media only screen and (max-width: 767px) {.banner-plain .d-grid h4 {display: block;margin-bottom: 16px;}}.counter-style-one-area {padding-top: 0px;padding-bottom: 0px;}.counter-style-one-left-info {border-right: 1px solid rgba(17, 17, 17, 0.12);padding: 20px 40px 20px 0;}.bg-dark .counter-style-one-left-info {border-color: rgba(255, 255, 255, 0.15);}.counter-style-one-left-info .site-heading {margin-bottom: 25px;}.counter-style-one-left-info .title {font-size: 32px !important;margin-top: 0;line-height: 1.3;}.counter-style-one-item {position: relative;text-align: left;padding: 20px 20px;transition: transform 0.4s ease;}.counter-style-one-item:hover {transform: translateY(-6px);}.counter-style-one-item::after {content: "";position: absolute;right: 0;top: 8%;height: 84%;width: 1px;background: rgba(17, 17, 17, 0.12);}.bg-dark .counter-style-one-item::after {background: rgba(255, 255, 255, 0.15);}.counter-style-one-item:last-child::after {display: none;}.counter-style-one-item .icon img {height: 44px;margin: 0 0 18px;transition: transform 0.4s ease;}.counter-style-one-item:hover .icon img {transform: scale(1.1);}.counter-style-one-item .fun-fact .counter {justify-content: flex-start;font-size: 64px;margin-bottom: 10px;color: var(--color-heading);}.bg-dark .counter-style-one-item .fun-fact .counter {color: var(--white);}.counter-style-one-item .fun-fact .counter .operator {color: var(--color-primary);}.counter-style-one-item span.medium {display: block;font-size: 19px;font-weight: 500;}.bg-dark .counter-style-one-item span.medium {color: var(--white);opacity: 0.85;}@media only screen and (max-width: 991px) {.counter-style-one-left-info {border-right: none;padding: 0 0 40px;margin-bottom: 50px;text-align: center;}.counter-style-one-items .row {row-gap: 40px;}}@media only screen and (max-width: 767px) {.counter-style-one-item::after {display: none;}.counter-style-one-item .fun-fact .counter {font-size: 52px;}}.breadcrumb-item {padding: 60px 0;padding-top: 160px;}@media only screen and (min-width: 768px) and (max-width: 1023px) {.breadcrumb-item {padding: 50px 0;padding-top: 140px;}}@media only screen and (max-width: 767px) {.breadcrumb-item {padding-top: 120px;padding-bottom: 40px;}}.banner-style-four-area {--banner-four-offset: 200px;position: relative;z-index: 1;height: 100vh;box-sizing: content-box;padding-top: var(--banner-four-offset);background-color: var(--white);}@media only screen and (max-width: 1023px) {.banner-style-four-area {--banner-four-offset: 140px;}}.swiper-slide.swiper-slide-active .swiper-bullet-item h2 strong {-webkit-text-stroke: 1px var(--color-primary);}.home-contact-area {position: relative;overflow: hidden;background: var(--white);}.home-contact-area::before {position: absolute;content: "";width: 520px;height: 520px;left: -260px;bottom: -300px;border-radius: 50%;background: rgba(121, 44, 162, 0.12);filter: blur(90px);pointer-events: none;}.home-contact-wrap {position: relative;z-index: 1;}.home-contact-info {padding-right: 35px;}.home-contact-info .title {font-size: clamp(42px, 4.2vw, 68px);line-height: 1.05;margin: 0 0 50px;}.home-contact-details {margin: 0;padding: 0;list-style: none;border-top: 1px solid rgba(4, 0, 11, 0.12);}.home-contact-details li {display: grid;grid-template-columns: 58px minmax(0, 1fr);align-items: center;gap: 18px;padding: 22px 0;border-bottom: 1px solid rgba(4, 0, 11, 0.12);}.home-contact-details .icon {display: inline-flex;align-items: center;justify-content: center;width: 54px;height: 54px;border-radius: 50%;background: rgba(121, 44, 162, 0.1);color: var(--color-primary);font-size: 20px;}.home-contact-details .content span {display: block;margin-bottom: 3px;color: var(--color-paragraph);font-size: 13px;font-weight: 700;letter-spacing: 0.08em;text-transform: uppercase;}.home-contact-details .content a, .home-contact-details .content address {display: inline-block;margin: 0;color: var(--color-heading);font-size: 18px;font-style: normal;font-weight: 600;line-height: 1.5;}.home-contact-details .content a:hover {color: var(--color-primary);}.home-contact-form-card {padding: 55px;border: 1px solid rgba(121, 44, 162, 0.12);border-radius: 18px;background: var(--bg-gray);box-shadow: 0 30px 70px rgba(33, 20, 51, 0.1);}.home-contact-form-card h3 {font-size: 38px;margin-bottom: 35px;}.home-contact-form label {display: block;margin-bottom: 6px;color: var(--color-heading);font-size: 13px;font-weight: 700;letter-spacing: 0.06em;text-transform: uppercase;}.home-contact-form .form-group {margin-bottom: 24px;}.home-contact-form .form-group input, .home-contact-form .form-group textarea {border-bottom-color: rgba(4, 0, 11, 0.22);padding: 9px 0 14px;}.home-contact-form .form-group input:focus, .home-contact-form .form-group textarea:focus {border-bottom-color: var(--color-primary);}.home-contact-form .form-group textarea {height: 125px;margin-top: 0;resize: vertical;}.home-contact-form .btn.btn-theme {margin-top: 5px;color: var(--white);border-radius: 999px;padding: 16px 30px;}@media only screen and (max-width: 991px) {.home-contact-info {padding-right: 0;margin-bottom: 55px;}}@media only screen and (max-width: 767px) {.home-contact-info .title {font-size: 40px;margin-bottom: 35px;}.home-contact-form-card {padding: 35px 25px;}.home-contact-form-card h3 {font-size: 30px;}.home-contact-details .content a, .home-contact-details .content address {font-size: 16px;}}@media (min-width: 1024px) {body.inner-page nav.navbar.validnavs.navbar-fixed {background: var(--white);}}.event-page-heading {padding-top: 160px;padding-bottom: 40px;background-color: var(--white);}@media only screen and (min-width: 768px) and (max-width: 1023px) {.event-page-heading {padding-top: 140px;}}@media only screen and (max-width: 767px) {.event-page-heading {padding-top: 120px;padding-bottom: 20px;}}@media (min-width: 1024px) {body.page-events .banner-style-three-area {padding-top: 0;}}body.service-single-page .breadcrumb-item {padding: 0;}body.service-single-page .breadcrumb-area .breadcrumb {margin: 0;padding: 110px 0 10px;text-align: left;}body.service-single-page .breadcrumb-area .breadcrumb, body.service-single-page .breadcrumb-area .breadcrumb li, body.service-single-page .breadcrumb-area .breadcrumb a {font-size: 14px;}body.service-single-page .breadcrumb-area .breadcrumb a {color: var(--color-paragraph);}body.service-single-page .breadcrumb-area .breadcrumb a:hover {color: var(--color-heading);}body.service-single-page .breadcrumb-area .breadcrumb li.active {color: var(--color-heading);}body.service-single-page .breadcrumb-sticky-spacer {display: none;}body.service-single-page .breadcrumb-sticky-spacer.is-active {display: block;}@media (min-width: 1024px) {body.service-single-page .breadcrumb-area.is-sticky {position: fixed;left: 0;width: 100%;z-index: 998;background-color: rgba(255, 255, 255, 0.85);background-image: none !important;box-shadow: 0px 1px 3px 0px rgba(18, 20, 32, 0.14);-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}body.service-single-page .breadcrumb-area.is-sticky .light-banner-active {display: none;}body.service-single-page .breadcrumb-area.is-sticky .breadcrumb {padding: 14px 0;}}@media only screen and (min-width: 768px) and (max-width: 1023px) {body.service-single-page .breadcrumb-area .breadcrumb {padding: 90px 0 10px;}}@media only screen and (max-width: 767px) {body.service-single-page .breadcrumb-area .breadcrumb {padding: 90px 0 10px;}}body.service-single-page .service-why-choose-us {padding-top: 140px;}@media only screen and (max-width: 767px) {body.service-single-page .service-why-choose-us {padding-top: 110px;}}body.service-single-page .award-items-carousel {margin-top: 50px;position: relative;z-index: 1;}body.service-single-page .award-items-carousel .swiper-slide {height: auto;}body.service-single-page .award-items-carousel .award-item {height: 100%;}body.service-single-page .award-item img {display: block;height: 50px;width: auto;margin-bottom: 15px;}@media (min-width: 1200px) {body.service-single-page .award-items-carousel {margin-left: -100px;}}@media only screen and (min-width: 768px) {.default-padding {padding-top: 80px;padding-bottom: 80px;}.default-padding-big {padding: 150px 0;}.default-padding-top {padding-top: 80px;}.default-padding-bottom {padding-bottom: 80px;}.default-padding.bottom-less {padding-top: 80px;padding-bottom: 60px;}}.thecontainer {width: 900%;}@media (min-width: 1024px) {.panel {align-items: flex-start;padding-top: 100px;padding-bottom: 60px;}}.quick-contact-items-compact h2 {font-size: 48px;margin-top: 0;margin-bottom: 16px;}.quick-contact-items-compact p {font-size: 16px;line-height: 1.8;max-width: 520px;}.quick-contact-area .btn-large-border {margin-left: 0;}.quick-contact-area .btn-large-border a {height: 90px;width: 90px;min-width: 90px;padding: 0 10px;font-size: 13px;}.quick-contact-area .btn-large-border a i {font-size: 22px;margin-bottom: 6px;}.quick-contact-area {background-image: url("../img/banner/cta-bg.jpg");background-size: cover;background-position: center;background-repeat: no-repeat;}.quick-contact-items-compact h2 {color: #ffffff;}.quick-contact-items-compact h2 strong {-webkit-text-stroke: 1px #ffffff;}.quick-contact-items-compact p {color: rgba(255, 255, 255, 0.85);}.quick-contact-area .btn-large-border a {border-color: rgba(255, 255, 255, 0.5);color: #ffffff;}.quick-contact-area .btn-large-border a i {color: #ffffff;}.quick-contact-area .btn-large-border a:hover {border-color: transparent;color: #ffffff;}.quick-contact-area .btn-large-border a:hover i {color: #ffffff;}@media (min-width: 1024px) {.partner-style-two-area {padding-top: 160px;}}.partner-two-item {display: flex;align-items: center;justify-content: center;min-height: 145px;}.partner-two-item img {margin-bottom: 0;}.swiper-bullet-item img {width: 90px;height: 90px;object-fit: cover;border-radius: 50%;}.services-style-two-area .service-hover-content .left, .services-style-two-area .service-hover-content .item-title, .services-style-two-area .service-hover-content .details {justify-content: flex-start;}.services-style-two-area .service-hover-content .item-title {gap: 10px;}.services-style-two-area .service-hover-content .details {gap: 20px;}.hover-glow {position: absolute;inset: 0;pointer-events: none;display: block;}.services-style-two-area .service-hover-item::after {content: none;}.services-style-two-area .service-hover-content h2, .services-style-two-area .service-hover-content p, .services-style-two-area .service-hover-content ul li, .services-style-two-area .service-hover-content .item-title span {color: var(--color-heading);}.services-style-two-area .service-hover-content .item-title span {color: var(--color-paragraph);}.services-style-two-area .service-hover-content .arrow .btn-arrow-xl {color: var(--color-heading);border-color: #e7e7e7;background: transparent;}body.gallery-page .gallery-masonry {columns: 3;column-gap: 30px;margin-top: 50px;}body.gallery-page .gallery-masonry-item {display: block;break-inside: avoid;margin-bottom: 30px;border-radius: 10px;overflow: hidden;position: relative;background: var(--white);box-shadow: 0px 2px 60px 0px rgba(0, 0, 0, 0.08);transition: transform 0.4s ease, box-shadow 0.4s ease;}body.gallery-page .gallery-masonry-item img {display: block;width: 100%;height: auto;transition: transform 0.6s ease;}body.gallery-page .gallery-masonry-item:hover {transform: translateY(-6px);box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.14);}body.gallery-page .gallery-masonry-item:hover img {transform: scale(1.05);}body.gallery-page .gallery-empty {margin-top: 40px;padding: 60px 30px;background: var(--white);border-radius: 10px;}body.gallery-page .gallery-empty p {margin: 0;}@media only screen and (min-width: 768px) and (max-width: 1199px) {body.gallery-page .gallery-masonry {columns: 2;column-gap: 24px;}body.gallery-page .gallery-masonry-item {margin-bottom: 24px;}}@media only screen and (max-width: 767px) {body.gallery-page .gallery-masonry {columns: 1;}body.gallery-page .gallery-masonry-item {margin-bottom: 20px;}}body.legal-page .legal-content h2 {font-size: 26px;margin-top: 40px;margin-bottom: 14px;}body.legal-page .legal-content h2:first-of-type {margin-top: 0;}body.legal-page .legal-content p {margin-bottom: 16px;}body.legal-page .legal-updated {font-size: 14px;color: var(--color-paragraph);margin-bottom: 30px;}body.legal-page .legal-intro {font-size: 18px;margin-bottom: 40px;}body.legal-page .legal-content a {color: var(--color-primary);text-decoration: underline;}body.thanks-page .thanks-icon, body.error-page .error-code {margin-bottom: 24px;}body.thanks-page .thanks-icon i {display: inline-flex;align-items: center;justify-content: center;height: 90px;width: 90px;border-radius: 50%;background: var(--color-primary);color: var(--white);font-size: 34px;}body.error-page .error-code {font-size: 140px;line-height: 1;font-weight: 700;color: var(--color-primary);}body.error-page .error-actions {display: flex;flex-wrap: wrap;gap: 20px;justify-content: center;}@media only screen and (max-width: 767px) {body.error-page .error-code {font-size: 90px;}body.legal-page .legal-content h2 {font-size: 22px;}}body.team-page .team-grid-item {margin-bottom: 30px;}body.team-page .team-style-one-item .thumb img {width: 100%;height: 320px;object-fit: cover;}.service-cta-area {padding-bottom: 80px;}.service-cta-inner {background-image: url("../img/banner/cta-2bg.jpg");background-size: cover;background-position: center;background-repeat: no-repeat;border-radius: 16px;padding: 60px;overflow: hidden;border: 1px solid #c99cfd;}.service-cta-area .quick-contact-items-compact h2 {color: var(--color-heading);margin-bottom: 16px;}.service-cta-area .quick-contact-items-compact h2 strong {color: transparent;-webkit-text-stroke: 1px var(--color-heading);}.service-cta-area .quick-contact-items-compact p {color: var(--color-paragraph);}.service-cta-area .btn-large-border {margin-left: 0;}.service-cta-area .btn-large-border a {height: 110px;width: 110px;min-width: 110px;padding: 0 12px;font-size: 13px;border-color: rgba(4, 0, 11, 0.2);color: var(--color-heading);background: rgba(255, 255, 255, 0.55);}.service-cta-area .btn-large-border a i {font-size: 22px;margin-bottom: 6px;color: var(--color-primary);}.service-cta-area .btn-large-border a:hover {color: var(--white);border-color: var(--color-primary);background: var(--color-primary);}.service-cta-area .btn-large-border a:hover i {color: var(--white);}@media only screen and (min-width: 768px) and (max-width: 991px) {.service-cta-inner {padding: 45px;}}@media only screen and (max-width: 767px) {.service-cta-inner {padding: 35px 25px;text-align: center;}.service-cta-area .quick-contact-items-compact p {margin-left: auto;margin-right: auto;}.service-cta-area .col-lg-4 {text-align: center !important;}}body.service-single-page .service-style-six-items .details p {display: -webkit-box;-webkit-line-clamp: 4;line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;}.blurry-shape-left::after, .blurry-shape-right::after, .blurry-shape-top::after {will-change: transform;transform: translateZ(0);backface-visibility: hidden;}

/* ==============================================================
   Site-wide promo / lead-capture modal (includes/promo-modal.php).
   Opens ~2.5s after load, once per browser session.

   Layout: headline top-left over the cta-bg.jpg artwork, form in a
   frosted white panel on the right. Sized to fit a 768px-tall
   viewport without the dialog scrolling.
================================================================== */
.n2b-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	visibility: hidden;
	opacity: 0;
	transition: opacity .35s ease, visibility 0s linear .35s;
}

.n2b-modal.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity .35s ease, visibility 0s linear 0s;
}

.n2b-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 4, 24, .72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.n2b-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 940px;
	max-height: calc(100vh - 40px);
	overflow: hidden;                       /* no inner scrollbar */
	border-radius: 16px;
	background-color: #1b1030;
	background-image: url("../img/banner/cta-bg.jpg");
	background-size: cover;
	background-position: center;
	box-shadow: 0 30px 90px rgba(0, 0, 0, .45);
	transform: translateY(20px) scale(.97);
	opacity: 0;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .4s ease;
}

.n2b-modal.is-open .n2b-modal__dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* ---- close button -------------------------------------------------
   The theme has global rules for <button> (button i {height:100px},
   button.btn {padding:17px 50px !important}) that stretch anything
   button-shaped, which is what turned this into a wide oval. Pin
   every box dimension explicitly and cancel the inherited pseudo. */
.n2b-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px;
	max-width: 36px;
	padding: 0 !important;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #1b1030;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	transition: background .25s ease, transform .25s ease;
}

.n2b-modal__close::after,
.n2b-modal__close::before { content: none !important; }

.n2b-modal__close:hover {
	background: #ffffff;
	transform: rotate(90deg);
}

/* ---- grid ---------------------------------------------------------- */
.n2b-modal__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 30px;
	padding: 38px 38px 34px;
	align-items: start;
}

/* ---- left: headline, top-aligned, theme type ---------------------- */
.n2b-modal__intro {
	text-align: left;
	color: #ffffff;
	padding-top: 6px;
}

.n2b-modal__headline {
	font-family: var(--font-heading, 'Barlow', sans-serif);
	font-size: 64px;
	line-height: 1.04;
	font-weight: 700;
	letter-spacing: -1px;
	color: #ffffff;
	margin: 0 0 20px;
}

/* Outlined words, same treatment as the site's "LET'S CONNECT." CTA
   heading (.quick-contact-items h2 strong): transparent fill with a
   1px stroke, so it reads as an outline against the artwork. */
.n2b-modal__accent {
	color: transparent;
	-webkit-text-stroke: 1px #ffffff;
	text-stroke: 1px #ffffff;
}

/* Paragraph fill, same idea as the theme's .text-scroll-animation .text:
   the copy sits at low opacity and a solid-white gradient is clipped to
   the glyphs, then wiped in by growing background-size 0% -> 100%.
   The theme drives that with a ScrollTrigger; a modal never scrolls, so
   it is keyed off .is-open instead and plays once on open. */
.n2b-modal__tagline {
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
	color: rgba(255, 255, 255, .28);
	background: linear-gradient(to right, #ffffff, #ffffff) no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	background-size: 0%;
	transition: background-size cubic-bezier(.1, .5, .5, 1) 1.1s .45s;
}

.n2b-modal.is-open .n2b-modal__tagline {
	background-size: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.n2b-modal__tagline { transition: none; background-size: 100%; }
}

/* ---- right: frosted form panel ------------------------------------ */
.n2b-modal__formwrap {
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 12px;
	padding: 24px 26px 22px;
	box-shadow: 0 10px 40px rgba(21, 7, 28, .18);
}

.n2b-modal__formtitle {
	font-family: var(--font-heading, 'Barlow', sans-serif);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: var(--color-heading);
	margin: 0 0 16px;
}

.n2b-modal__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.n2b-modal__field { margin-bottom: 14px; }

.n2b-modal__field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .2px;
	color: var(--color-paragraph);
	margin-bottom: 2px;
}

/* underline-only inputs */
.n2b-modal__field input,
.n2b-modal__field textarea {
	width: 100%;
	padding: 6px 2px;
	font-family: inherit;
	font-size: 14px;
	color: var(--color-heading);
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(4, 0, 11, .22);
	border-radius: 0;
	outline: none;
	box-shadow: none;
	transition: border-color .25s ease;
}

.n2b-modal__field textarea {
	resize: none;
	min-height: 52px;
	line-height: 1.5;
}

.n2b-modal__field input:focus,
.n2b-modal__field textarea:focus {
	border-bottom-color: var(--color-primary);
	box-shadow: none;
}

.n2b-modal__submit {
	display: inline-block;
	width: auto !important;
	padding: 10px 30px !important;
	margin-top: 2px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	background: var(--color-primary);
	border: none;
	border-radius: 30px;
	cursor: pointer;
	transition: background .25s ease, transform .25s ease;
}

.n2b-modal__submit::after,
.n2b-modal__submit::before { content: none !important; }

.n2b-modal__submit:hover {
	background: var(--color-secondary);
	color: #ffffff;
	transform: translateY(-2px);
}

.n2b-modal__privacy {
	margin: 10px 0 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--color-paragraph);
}

body.n2b-modal-open { overflow: hidden; }

/* ---- responsive ---------------------------------------------------- */
@media only screen and (max-width: 991px) {
	.n2b-modal__dialog { max-height: calc(100vh - 24px); overflow-y: auto; }
	.n2b-modal__grid { grid-template-columns: 1fr; gap: 20px; padding: 34px 22px 26px; }
	.n2b-modal__headline { font-size: 42px; }
	.n2b-modal__formtitle { font-size: 21px; }
}

@media only screen and (max-width: 575px) {
	.n2b-modal { padding: 10px; }
	.n2b-modal__row { grid-template-columns: 1fr; gap: 0; }
	.n2b-modal__grid { padding: 32px 16px 22px; }
	.n2b-modal__headline { font-size: 34px; }
	.n2b-modal__formwrap { padding: 18px 16px 16px; }
}

/* Shorter viewports: tighten so the dialog still fits. */
@media only screen and (max-height: 720px) and (min-width: 992px) {
	.n2b-modal__grid { padding: 28px 32px 26px; gap: 24px; }
	.n2b-modal__headline { font-size: 64px; }
	.n2b-modal__field { margin-bottom: 10px; }
	.n2b-modal__formtitle { font-size: 21px; margin-bottom: 12px; }
	.n2b-modal__field textarea { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.n2b-modal,
	.n2b-modal__dialog { transition: none; }
}

/* ==============================================================
   Floating action rail (includes/floating-actions.php).
   Fixed to the right edge on every page: the purple enquire tab,
   then white call / mail / back-to-top squares with purple icons,
   stacked flush as one column.

   z-index sits under the promo modal (10000) so the modal covers
   them, and over the sticky breadcrumb (998).
================================================================== */
.n2b-fab {
	position: fixed;
	right: 0;
	bottom: 60px;
	z-index: 9000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 45px;
}

/* ---- vertical enquire button, flush to the screen edge ---- */
.n2b-fab__enquire {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 0;                       /* padding lives on the children */
	overflow: hidden;
	background: var(--color-primary);
	color: #ffffff !important;
	box-shadow: 0 6px 22px rgba(121, 44, 162, .38);
	text-decoration: none;
	transition: background .25s ease;
}

.n2b-fab__enquire:hover {
	background: var(--color-secondary);
	color: #ffffff !important;
}

/* black icon block at the top of the button */
.n2b-fab__enquire-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 0;
	background: #000000;
	font-size: 18px;
	line-height: 1;
}

.n2b-fab__enquire-text {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	padding: 18px 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .7px;
	white-space: nowrap;
	line-height: 1;
}

/* ---- white call / mail / top squares under the enquire tab ---- */
.n2b-fab__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 45px;
	min-height: 0;
	padding: 0;
	margin: 0;
	background: #ffffff;
	color: var(--color-primary) !important;
	font-size: 17px;
	line-height: 1;
	border: 0;
	border-top: 1px solid rgba(121, 44, 162, .14);
	border-radius: 0;
	box-shadow: 0 6px 18px rgba(60, 22, 80, .16);
	text-decoration: none;
	cursor: pointer;
	transition: background .25s ease, color .25s ease;
}

.n2b-fab__btn:hover,
.n2b-fab__btn:focus-visible {
	background: var(--color-primary);
	color: #ffffff !important;
}

/* Back to top: hidden until ~30% down the page. It keeps its slot while
   hidden so the rail above it never shifts when it appears. */
.n2b-fab__top {
	margin-top: 10px;
	border-top: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateX(100%);
	transition: opacity .3s ease, transform .3s ease, visibility .3s, background .25s ease, color .25s ease;
}

.n2b-fab__top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* ---- responsive ---- */
@media only screen and (max-width: 991px) {
	.n2b-fab { bottom: 34px; width: 46px; }
	.n2b-fab__enquire-icon { padding: 12px 0; font-size: 16px; }
	.n2b-fab__enquire-text { padding: 15px 0; font-size: 13px; }
	.n2b-fab__btn { height: 44px; font-size: 16px; }
}

/* Phones: the vertical label is ~120px tall and crowds a short
   screen, so the enquire button collapses to its icon block. */
@media only screen and (max-width: 575px) {
	.n2b-fab { bottom: 20px; width: 42px; }
	.n2b-fab__enquire-text { display: none; }
	.n2b-fab__enquire-icon { padding: 12px 0; font-size: 15px; }
	.n2b-fab__btn { height: 42px; font-size: 15px; }
}

/* Landscape phones: almost no vertical room. */
@media only screen and (max-height: 460px) {
	.n2b-fab { bottom: 14px; }
	.n2b-fab__enquire-text { display: none; }
	.n2b-fab__enquire-icon { padding: 11px 0; }
	.n2b-fab__btn { height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
	.n2b-fab__enquire,
	.n2b-fab__btn { transition: none; }
}

/* Portfolio section: oversized scroll-panned title. The .js-anim variant is
   the marquee; the base rules are the no-JS fallback and must stay readable. */
.portfolio-marquee-title {width: 100%;margin-bottom: 60px;padding-left: max(15px, calc((100% - 1320px) / 2));}
.portfolio-marquee-title .pmt-text {margin: 0;line-height: 1.02;letter-spacing: -0.02em;color: var(--color-heading);font-size: clamp(34px, 5.5vw, 68px);padding-right: max(15px, calc((100% - 1320px) / 2));}
.bg-dark .portfolio-marquee-title .pmt-text {color: var(--white);}
.js-anim .portfolio-marquee-title {overflow: hidden;}
.js-anim .portfolio-marquee-title .pmt-text {display: inline-block;white-space: nowrap;font-size: clamp(64px, 15vw, 280px);will-change: transform;}
@media only screen and (min-width: 992px) {.js-anim .portfolio-marquee-title {min-height: 52vh;display: flex;align-items: center;}}
@media only screen and (max-width: 991px) {.portfolio-marquee-title {margin-bottom: 40px;}}
@media (prefers-reduced-motion: reduce) {.js-anim .portfolio-marquee-title {overflow: visible;min-height: 0;display: block;}
.js-anim .portfolio-marquee-title .pmt-text {display: block;white-space: normal;font-size: clamp(34px, 5.5vw, 68px);will-change: auto;transform: none;}}

/* Portfolio stack ---------------------------------------------------------
   Cards pile up on the right, overlapping all but --pstack-step of each other,
   so a covered card shows only a thin band. That band is too shallow to carry
   a readable tab, which is why the list on the left is pinned as one block on
   its own rhythm rather than stacked in lockstep; the highlight is what ties a
   row to its card.

   Square corners are deliberate - at this overlap a radius reads as a stack of
   cut-off tabs. The 1px edge and the shadow are what separate the layers, so
   they carry the stack and should not be dropped with the radius.

   Pinning is GSAP's, not position:sticky: ScrollSmoother transforms the scroll
   container, leaving sticky nothing to stick to. Below 992px, and under
   reduced motion, nothing pins and this is a plain stacked column. */
.pstack {--pstack-top: 120px;--pstack-step: 28px;}
.pstack-tabs {border-top: 1px solid rgba(17, 17, 17, 0.16);}
.bg-dark .pstack-tabs {border-top-color: rgba(255, 255, 255, 0.2);}
.pstack-tab {display: grid;grid-template-columns: auto 1fr;gap: 2px 14px;padding: 20px 0;border-bottom: 1px solid rgba(17, 17, 17, 0.16);}
.bg-dark .pstack-tab {border-bottom-color: rgba(255, 255, 255, 0.2);}
.pstack-tab__num {grid-row: span 2;align-self: center;font-size: 13px;font-weight: 600;letter-spacing: 0.08em;color: var(--color-primary);}
.pstack-tab__name {font-size: 21px;font-weight: 600;line-height: 1.2;text-transform: capitalize;color: var(--color-heading);}
.bg-dark .pstack-tab__name {color: var(--white);}
.pstack-tab__cat {font-size: 13px;opacity: 0.7;}

.pstack-card {--card-bg: var(--white);--card-ink: var(--color-heading);--card-ink-soft: rgba(4, 0, 11, 0.72);--card-accent: var(--color-primary);--card-border: rgba(121, 44, 162, 0.18);--thumb-pad: 22px;display: grid;grid-template-columns: minmax(0, 1fr) 40%;align-items: stretch;background: var(--card-bg);border: 1px solid var(--card-border);box-shadow: 0 -2px 34px rgba(21, 7, 28, 0.22);margin-bottom: 60px;}
.pstack-card__text {display: flex;flex-direction: column;align-items: flex-start;justify-content: center;padding: 40px 42px;}
.pstack-card__cat {font-size: 12px;letter-spacing: 0.12em;text-transform: uppercase;color: var(--card-accent);margin-bottom: 14px;}
.pstack-card__name {margin: 0 0 16px;font-size: 30px;line-height: 1.15;text-transform: capitalize;}
.pstack-card .pstack-card__name a {color: var(--card-ink);}
.pstack-card .pstack-card__name a:hover {color: var(--card-accent);}
.pstack-card .pstack-card__desc {margin: 0;font-size: 16px;line-height: 1.65;color: var(--card-ink-soft);}
.pstack-card .pstack-card__cta {margin-top: 26px;display: inline-flex;align-items: center;gap: 10px;font-weight: 600;color: var(--card-accent);}
.pstack-card__cta i {transition: transform 0.35s ease;}
.pstack-card__cta:hover i {transform: translateX(5px);}
/* A solid tile behind the image, so a slow or missing file leaves the card's
   geometry intact instead of collapsing the grid. */
.pstack-card__thumb {position: relative;min-height: 260px;overflow: hidden;}
.pstack-card__thumb img {position: absolute;top: var(--thumb-pad);left: var(--thumb-pad);width: calc(100% - var(--thumb-pad) * 2);height: calc(100% - var(--thumb-pad) * 2);object-fit: cover;display: block;background: rgba(0, 0, 0, 0.08);}
.pstack-more {margin-top: 50px;}

@media only screen and (min-width: 992px) {
.pstack {padding-bottom: 200px;}
.pstack-tab {opacity: 0.4;transition: opacity 0.45s ease, padding-left 0.45s ease;}
.pstack-tab.is-active {opacity: 1;padding-left: 12px;}
.pstack-card {min-height: clamp(300px, 38vh, 380px);}
}
@media only screen and (max-width: 991px) {
.pstack-tabs {margin-bottom: 45px;}
.pstack-card {grid-template-columns: 1fr;margin-bottom: 34px;}
.pstack-card__thumb {order: -1;min-height: 230px;}
.pstack-card {--thumb-pad: 16px;}
.pstack-card__text {padding: 28px 26px;}
.pstack-card__name {font-size: 24px;}
}
@media (prefers-reduced-motion: reduce) {
.pstack {padding-bottom: 0;}
.pstack-tab, .pstack-tab.is-active {opacity: 1;padding-left: 0;}
}

/* --- Portfolio section dark phase ----------------------------------------
   The script adds .bg-dark to this section once the title has finished its
   pan and strips it again as the section bottom arrives. .bg-dark is the
   theme's own dark mode, so its rules already cover headings, links and the
   View All button; what follows is only the parts it has never heard of - the
   stack - plus the transitions that turn the switch into a fade. The section
   carries an explicit white so the fade runs white -> dark rather than out of
   transparent, which would wash through grey. */
.project-style-one-area {background-color: var(--white);transition: background-color 0.7s ease;}
.project-style-one-area .pmt-text,
.project-style-one-area .pstack-tab__name,
.project-style-one-area .pstack-tab__cat,
.project-style-one-area .pstack-tabs,
.project-style-one-area .pstack-tab,
.project-style-one-area .pstack-card,
.project-style-one-area .pstack-card__name a,
.project-style-one-area .pstack-card__desc,
.project-style-one-area .pstack-card__cat,
.project-style-one-area .pstack-card__cta,
.project-style-one-area .pstack-card__thumb {transition: background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease;}

/* The brand purple sits too close to the background at this size once the
   section is dark, so the small accent text steps up a few stops. */

/* --- Service card dot field ----------------------------------------------
   A field of small purple squares across the top of each service card, with a
   different number of dots in every column so the bottom edge is ragged
   rather than a straight line, and with each row a little fainter than the
   one above so the whole thing dissolves into the card.

   The tile is generated, not hand-written; service-dots.svg carries the
   parameters and the rule for regenerating it in a comment at its head.
   repeat-x tiles it horizontally; it
   never repeats vertically, so the SVG's own height is what sets how far the
   field reaches down the card.

   A gradient couldn't do this - repeating gradients are uniform by
   definition, and per-column heights would need one mask layer per column.

   z-index: -1 keeps it under the card's own text. The card already sets
   position: relative with z-index: 1, so that negative layer is trapped
   inside the card's stacking context and cannot slide under the section.
   overflow: hidden on the card is what clips it to the rounded top corners. */
.cteative-service-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background-image: url("/assets/img/n2b/service-dots.svg");
    background-repeat: repeat-x;
    background-position: left top;
    opacity: 0.34;
}
.bg-dark .cteative-service-item::before {opacity: 0.5;filter: brightness(1.7);}

/* --- Portfolio card palette ----------------------------------------------
   One colour per project, keyed off the index in the markup rather than
   :nth-child, because GSAP wraps each pinned card in its own .pin-spacer and
   the cards stop being siblings the moment the stack initialises.

   Each card sets its own ink, so a card is legible on its own background
   whatever the section is doing behind it - that is why the dark-phase card
   overrides are gone. Palette runs cream, purple, cream, charcoal: the
   third card repeats the first, and the last takes the charcoal. */
.pstack-card[data-pstack-card="0"],
.pstack-card[data-pstack-card="2"] {--card-bg: #f5f0e8;--card-border: rgba(0, 0, 0, 0.10);}
.pstack-card[data-pstack-card="1"] {--card-bg: #792CA2;--card-ink: #ffffff;--card-ink-soft: rgba(255, 255, 255, 0.84);--card-accent: #ffffff;--card-border: rgba(255, 255, 255, 0.20);}
.pstack-card[data-pstack-card="3"] {--card-bg: #17161f;--card-ink: #ffffff;--card-ink-soft: #cccccc;--card-accent: #C085E0;--card-border: rgba(255, 255, 255, 0.14);}

/* === Hero variant: mosaic (/home2) =======================================
   A field of rounded tiles that assembles itself from the centre outward on
   load. Cells are built by JS because the count depends on the measured box;
   everything about how a cell LOOKS lives here.

   --cell is the one number that matters: the script reads it back, so the
   grid re-tunes per breakpoint from this file alone. Each tile's shade comes
   from --tint, written per cell by the script.

   The mask is what stops it reading as a rectangle of wallpaper - the field
   dissolves outward and downward into the page instead of ending on an edge. */
.banner-style-eight-area.hero-mosaic-area {--cell: 74px;position: relative;overflow: hidden;}
.banner-style-eight-area.hero-mosaic-area::before {content: none;}
.hero-mosaic {position: absolute;inset: 0;z-index: 0;pointer-events: none;display: grid;grid-auto-rows: var(--cell);grid-template-columns: repeat(auto-fill, minmax(var(--cell), 1fr));gap: 0;-webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);}
.hero-mosaic-veil {position: absolute;inset: 0;z-index: 1;pointer-events: none;background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.88) 9%, rgba(255, 255, 255, 0) 30%), linear-gradient(to right, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.84) 26%, rgba(255, 255, 255, 0.42) 54%, rgba(255, 255, 255, 0) 78%);}
.hero-mosaic i {display: block;margin: 5px;border-radius: 10px;background: var(--color-primary);opacity: var(--tint, 0.2);transform-origin: 50% 50%;}
/* The header overlays the hero, so the veil has to sit under the content but
   over the tiles - hence z-index 1 on the veil and 2 on .container. */
/* The hero's own content has to clear the tiles. */
.hero-mosaic-area .container {position: relative;z-index: 2;}
.hero-mosaic-area .card-style-one {background: rgba(255, 255, 255, 0.72);-webkit-backdrop-filter: blur(16px) saturate(150%);backdrop-filter: blur(16px) saturate(150%);}
@media only screen and (max-width: 991px) {.banner-style-eight-area.hero-mosaic-area {--cell: 52px;}
.hero-mosaic i {margin: 4px;border-radius: 8px;}}
@media only screen and (max-width: 575px) {.banner-style-eight-area.hero-mosaic-area {--cell: 42px;}
.hero-mosaic i {margin: 3px;border-radius: 6px;}}

/* === Hero variant: rising bars (/home3) ==================================
   Columns of the brand gradient - deep purple at the top through to the brand
   teal at the floor - that grow out of the bottom edge on load and then drift.

   The section is its own dark island: the page around it and the header are
   untouched, so only the hero's own text needs relighting.

   Bars are scaled from the bottom rather than animated on height, so the
   growth is a compositor transform and the gradient inside does not resample
   on every frame. --h is each bar's resting height, written by the script. */
.banner-style-eight-area.hero-bars-area {--bar: 132px;position: relative;overflow: hidden;background-color: #0b0c10;}
.banner-style-eight-area.hero-bars-area::before {content: none;}
.hero-bars {position: absolute;inset: 0;z-index: 0;pointer-events: none;display: flex;align-items: flex-end;-webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 26%, #000 100%);mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 26%, #000 100%);}
.hero-bars i {display: block;flex: 1 0 auto;width: var(--bar);height: var(--h, 50%);transform-origin: 50% 100%;background: linear-gradient(to bottom, rgba(90, 33, 120, 0) 0%, #5A2178 34%, #792CA2 58%, #0bcda9 100%);}
.hero-bars-area .container {position: relative;z-index: 2;}
.hero-bars-area .banner-style-eight-heading h2 {color: var(--white);}
.hero-bars-area .banner-style-eight-heading h2.title-right {color: #CA92E8;}
.hero-bars-area .hero-liquid-title strong {color: #0bcda9;}
.hero-bars-area .d-grid h4 {color: var(--white);}
.hero-bars-area .d-grid .right {border-top-color: rgba(255, 255, 255, 0.24);}
.hero-bars-area .d-grid p {color: rgba(255, 255, 255, 0.78);}
.hero-bars-area .btn-animation {color: var(--white);}
.hero-bars-area .btn-animation i {background: var(--white);color: var(--color-heading);}
.hero-bars-area .btn-animation::after {border-color: rgba(255, 255, 255, 0.45);}
.hero-bars-area .card-style-one {background: rgba(255, 255, 255, 0.08);border: 1px solid rgba(255, 255, 255, 0.18);-webkit-backdrop-filter: blur(14px);backdrop-filter: blur(14px);box-shadow: none;}
.hero-bars-area .card-style-one .counter, .hero-bars-area .card-style-one .medium {color: var(--white);}
.hero-bars-area .card-style-one a {color: var(--white);}
@media only screen and (max-width: 991px) {.banner-style-eight-area.hero-bars-area {--bar: 86px;}}
@media only screen and (max-width: 575px) {.banner-style-eight-area.hero-bars-area {--bar: 58px;}}

/* Both variants: with motion turned down the backdrops are built but never
   animated, so they render as a still field rather than not at all. */
@media (prefers-reduced-motion: reduce) {
.hero-mosaic i, .hero-bars i {transition: none !important;animation: none !important;}
}

/* /home3 only: the header keeps a solid white bar over the dark hero instead
   of floating transparent on it. Scrolled, validnavs supplies its own
   near-white background, so this only has to cover the resting state. Nothing
   inside the bar needs recolouring - on white, the header's stock dark label
   and logo are already right. */
.hero-on-dark nav.navbar:not(.sticked) {background-color: #ffffff;}

/* --- Footer pixel scene --------------------------------------------------
   Full-bleed across the footer, but still hung off the footer's container so
   it ends where the container does - just above .footer-bottom, which keeps
   the social row and copyright line clean. Anchoring to <footer> instead
   would need the bottom bar's height as a magic number; this gets the same
   vertical bounds from the layout itself.

   The 50%/50vw pair is what breaks it out of the container's max-width. The
   container is centred, so pulling each side out by half the difference
   between the viewport and the container spans the full window; <footer>
   carries overflow: hidden to clip the bleed rather than letting it widen the
   page.

   background-size: 100% auto then stretches the scene across the whole width,
   so the water line runs the full footer. The image is taller than the strip
   at that width and is anchored bottom, so the top is cropped - which costs
   nothing, as the mask has already faded that part to almost nothing.

   Raise --footer-art to bring it up. */
footer.footer-pixel {--footer-art: 0.16;overflow: hidden;}
footer.footer-pixel > .container {position: relative;}
footer.footer-pixel > .container::after {
    content: "";
    position: absolute;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    bottom: 0;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background: url("/assets/img/banner/footer-pixel.png") left bottom / 100% auto no-repeat;
    opacity: var(--footer-art);
    -webkit-mask-image: linear-gradient(to top, #000 0%, #000 34%, rgba(0, 0, 0, 0.3) 62%, rgba(0, 0, 0, 0) 90%);
    mask-image: linear-gradient(to top, #000 0%, #000 34%, rgba(0, 0, 0, 0.3) 62%, rgba(0, 0, 0, 0) 90%);
}
/* Footer content has to clear the artwork. */
footer.footer-pixel > .container > * {position: relative;z-index: 1;}
@media only screen and (max-width: 767px) {
footer.footer-pixel {--footer-art: 0.12;}
}

/* --- Testimonials: arrows beside the heading ------------------------------
   The dots and the arrow strip under the cards are gone; these replace the
   "70+ Happy Clients" badge in the heading row. Scoped to the -custom
   carousel so the other testimonial layouts in the theme keep their own. */
.testimonial-nav {display: inline-flex;gap: 12px;}
.testimonial-nav button {height: 52px;width: 52px;display: inline-flex;align-items: center;justify-content: center;padding: 0;border-radius: 10px;border: 2px solid rgba(17, 17, 17, 0.16);background: transparent;color: var(--color-heading);font-size: 15px;cursor: pointer;transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;}
.testimonial-nav button:hover {background: var(--color-primary);border-color: var(--color-primary);color: var(--white);}
/* The subset font has no fa-arrow-left, so the prev button borrows the right
   arrow and mirrors it - one transform instead of another glyph in the file. */
.testimonial-nav .testi-nav-prev i {transform: scaleX(-1);}
.bg-dark .testimonial-nav button {border-color: rgba(255, 255, 255, 0.24);color: var(--white);}
/* loop: true means Swiper never disables these, but style it in case the
   carousel is ever switched to a finite run. */
.testimonial-nav button.swiper-button-disabled {opacity: 0.35;cursor: default;}
.testimonial-style-three-carousel-custom .testimonial-style-three-item {border-radius: 12px;}
@media only screen and (max-width: 991px) {
.testimonial-heading .col-lg-4.text-end {text-align: left !important;margin-top: 22px;}
.testimonial-nav button {height: 46px;width: 46px;}
}

/* --- About: growth figures in the floating cards --------------------------
   Card shell, offset and purple first card all come from ul.service-list as
   before; only the contents changed. On the purple card the line-art icon
   would disappear, so it is knocked out to white there and on hover. */
.about-style-six-info ul.about-stat-list li a {padding: 34px 20px;}
.about-stat-list a .sl-icon {height: 32px;width: auto;display: block;margin-bottom: 18px;transition: filter 0.35s ease-in-out;}
.about-stat-list a .sl-num {display: block;font-size: 32px;line-height: 1;font-weight: 700;margin-bottom: 6px;color: var(--color-heading);transition: color 0.35s ease-in-out;}
/* ul.service-list styles ANY span inside a card as the old circular step
   badge - absolutely positioned, dark, 45px, and deliberately hidden on the
   first card and on hover. The count-up needs a span, so that badge styling
   is undone here; without this the figure renders as a dark disc that clips
   "200" to "20", and vanishes entirely on the purple card. */
.about-stat-list a .sl-num span {position: static;display: inline;height: auto;width: auto;line-height: inherit;text-align: left;background: none;border-radius: 0;margin: 0;font-weight: inherit;font-size: inherit;color: inherit;opacity: 1;visibility: visible;}
.about-stat-list li:first-child a .sl-icon, .about-stat-list li a:hover .sl-icon {filter: brightness(0) invert(1);}
.about-stat-list li:first-child a .sl-num span, .about-stat-list li a:hover .sl-num span {top: auto;opacity: 1;visibility: visible;}
.about-stat-list li:first-child a, .about-stat-list li a:hover {color: var(--white);}
.about-stat-list li:first-child a .sl-num, .about-stat-list li a:hover .sl-num {color: var(--white);}
@media only screen and (max-width: 991px) {
.about-stat-list a .sl-num {font-size: 32px;}
.about-stat-list a .sl-icon {height: 32px;margin-bottom: 18px;}
}

/* --- Lead banner ----------------------------------------------------------
   Full-bleed band: the tint and its hairlines sit on the section itself, so
   it runs edge to edge with square corners, and the container only holds the
   grid. Heavier above than below, so it reads as the opening of the block
   rather than a floating card.

   Right column is three columns wide, which puts the six fields on two rows
   on their own. The button is pinned to column 3 so it falls to a third row
   and sits under the last field rather than leading an empty one. */
.lead-banner-area {position: relative;overflow: hidden;padding: 42px 0 42px;border-top: 1px solid rgba(121, 44, 162, 0.14);border-bottom: 1px solid rgba(121, 44, 162, 0.14);}
/* Pixel-art scenery behind the form. The file is transparent through the
   middle, so its detail sits at the far left and right edges, clear of the
   form fields. Dropped to low opacity with a slight blur so the hard pixel
   edges soften into texture; overflow: hidden on the section trims the blur
   halo at the edges. Content is lifted above it by the container rule. */
.lead-banner-area::before {content: "";position: absolute;inset: -6px;z-index: 0;pointer-events: none;background: url("/assets/img/banner/myart.png") center bottom / cover no-repeat;opacity: 0.5;filter: blur(1.5px);}
/* The file's cliff and waterfall land right behind the heading and intro
   copy, which is light grey - so a white wash fades the art back under the
   text column only, and it reads through again beneath the form. */
.lead-banner-area::after {content: "";position: absolute;inset: 0;z-index: 0;pointer-events: none;background: linear-gradient(90deg, rgba(255, 255, 255, 0.86) 0%, rgba(255, 255, 255, 0.72) 26%, rgba(255, 255, 255, 0) 44%);}
.lead-banner-area > .container {position: relative;z-index: 1;}
/* Hairline centred in the empty column: col-3 ends at 25%, col-8 starts at
   33.33%, so 29.17% is the middle of the gap between them. */
.lead-banner {position: relative;}
.lead-banner::before {content: "";position: absolute;left: 29.17%;top: 4px;bottom: 4px;width: 1px;background: rgba(17, 17, 17, 0.12);}
.lead-banner__head h2 {margin: 0 0 12px;font-size: 44px;line-height: 1.1;}
/* Outlined word: hollow letters stroked in the brand purple. */
.lead-banner__head h2 .lb-outline {color: transparent;-webkit-text-stroke: 1.5px var(--color-primary);}
.lead-banner__head p {margin: 0;font-size: 15px;line-height: 1.7;opacity: 0.75;}
/* The form is a frosted card: a faint white fill with a slight backdrop blur,
   so the art stays visible through it but the fields read clearly. */
.lead-banner__form {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 18px 22px;padding: 26px 28px 24px;background: rgba(255, 255, 255, 0.5);-webkit-backdrop-filter: blur(6px);backdrop-filter: blur(6px);border: 1px solid rgba(255, 255, 255, 0.7);box-shadow: 0 18px 40px -24px rgba(60, 22, 80, 0.35);}
.lb-field {display: flex;flex-direction: column;gap: 5px;margin: 0;min-width: 0;}
.lb-label {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
/* Underline-only fields: no fill, no corners, just a bottom rule. */
.lb-field input, .lb-field select {width: 100%;height: 40px;min-height: 40px;padding: 0 2px;font-size: 14px;color: var(--color-heading);background-color: transparent;border: 0;border-bottom: 1.5px solid rgba(17, 17, 17, 0.38);border-radius: 0;box-shadow: none;outline: none;transition: border-color 0.25s ease;}
.lb-field select {cursor: pointer;}
.lb-field input:focus, .lb-field select:focus {border-bottom-color: var(--color-primary);box-shadow: none;}
.lb-field input::placeholder {color: rgba(17, 17, 17, 0.5);}
.lb-submit {grid-column: 3;justify-self: end;height: 40px;padding: 0 24px;white-space: nowrap;font-size: 13.5px;font-weight: 600;color: var(--white);background: var(--color-primary);border: 1px solid var(--color-primary);border-radius: 8px;cursor: pointer;transition: background-color 0.3s ease, border-color 0.3s ease;}
.lb-submit:hover {background: var(--color-secondary);border-color: var(--color-secondary);}
@media only screen and (max-width: 991px) {
.lead-banner-area {padding: 64px 0 36px;}
.lead-banner-area::before {background-position: left bottom;}
/* No empty column to draw it in once the halves stack. */
.lead-banner::before {display: none;}
.lead-banner__head {margin-bottom: 26px;}
.lead-banner__head h2 {font-size: 34px;}
}
@media only screen and (max-width: 575px) {
.lead-banner__form {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px 16px;padding: 18px 16px 16px;}
.lb-submit {grid-column: 1 / -1;justify-self: stretch;}
}
/* /home3's hero runs dark and ends hard against this band, so it gets more
   room above than the light heroes need. */
.hero-on-dark .lead-banner-area {padding-top: 120px;}

/* --- Mobile overflow fixes -------------------------------------------------
   The theme defines .offset-lg-e as margin-left: 5% with no breakpoint, so on
   a phone it shoves the full-width client-logo column 5% past the right edge
   and the whole page scrolls sideways. Its name says large screens only;
   this makes that true. */
@media only screen and (max-width: 991px) {
.offset-lg-e {margin-left: 0;}
.rtl .offset-lg-e {margin-right: 0;}

/* Client logos. On desktop the marquee stretches to match the text column
   beside it (height: 100% plus flex: 1 1 0 rows). Once the columns stack
   there is no height to share, every row collapsed to 1px, and all the logos
   vanished. Give each row its own height here instead. */
.client-marquee-wrap {height: auto;margin-top: 10px;}
.client-marquee-row {flex: none;height: 88px;}

/* The heading centres on small screens (theme rule), so the arrows follow. */
.testimonial-heading .col-lg-4.text-end {text-align: center !important;}

/* The CTA art is centred, which on a narrow screen puts its bright orb right
   behind the white headline and copy. A brand-purple scrim restores contrast
   without hiding the art. */
.quick-contact-area {background-image: linear-gradient(180deg, rgba(90, 33, 120, 0.62) 0%, rgba(90, 33, 120, 0.42) 100%), url("../img/banner/cta-bg.jpg");}
}

@media only screen and (max-width: 767px) {
/* About figures: one full-width card each was ~220px tall, so three of them
   took most of a screen. Lay each card out on one line - icon, figure, label -
   so the set reads as a compact list. */
.about-style-six-info ul.about-stat-list {gap: 12px;}
.about-style-six-info ul.about-stat-list li a {display: grid;grid-template-columns: auto auto 1fr;align-items: center;column-gap: 16px;padding: 18px 20px;}
.about-stat-list a .sl-icon {height: 30px;margin: 0;}
.about-stat-list a .sl-num {margin: 0;font-size: 30px;}
}

/* CTA copy sits on a purple image, but carries the theme's scroll-reveal
   (.text-scroll-animation .text), which fills it in near-black on desktop and
   forces it to paragraph grey below 1024px - dark text on purple either way.
   Recolour the reveal to white, the way the theme's own .bg-dark variant does.
   Only background-image is set, so the animated background-size still runs. */
@media screen and (min-width: 1024px) {
.quick-contact-items-compact.text-scroll-animation .text {color: rgba(255, 255, 255, 0.4);background-image: linear-gradient(to right, #ffffff, #ffffff);}
}
@media screen and (max-width: 1023px) {
.quick-contact-items-compact.text-scroll-animation p.text {color: rgba(255, 255, 255, 0.92) !important;}
}

/* --- Enquiry popup on phones ----------------------------------------------
   The content needed ~850px on a phone, so on anything shorter the form ran
   off the bottom - Message and Send were out of reach. Tightened for a 568px
   screen (iPhone SE), the shortest in common use.

   Height: 100vh on mobile browsers includes the strip behind the address
   bar, so a dialog capped at 100vh can still run past the visible screen.
   dvh is the height actually on show; the vh line is the fallback for older
   browsers that do not understand it. */
.n2b-modal__dialog {max-height: calc(100vh - 40px);max-height: calc(100dvh - 40px);}
@media only screen and (max-width: 991px) {
.n2b-modal__dialog {max-height: calc(100vh - 20px);max-height: calc(100dvh - 20px);}
}
@media only screen and (max-width: 575px) {
.n2b-modal {padding: 10px;}
.n2b-modal__grid {padding: 20px 14px 14px;gap: 12px;}
.n2b-modal__close {top: 10px;right: 10px;width: 32px !important;height: 32px !important;}
/* One line instead of two, and clear of the close button. */
.n2b-modal__intro {padding-top: 0;padding-right: 44px;}
.n2b-modal__headline {font-size: 26px;letter-spacing: -0.5px;margin-bottom: 6px;}
.n2b-modal__headline br {display: none;}
.n2b-modal__tagline {font-size: 13px;line-height: 1.45;margin: 0;}
.n2b-modal__formwrap {padding: 14px 14px 12px;}
.n2b-modal__formtitle {font-size: 18px;margin-bottom: 8px;}
.n2b-modal__field {margin-bottom: 8px;}
.n2b-modal__field label {font-size: 11px;margin-bottom: 0;}
/* The theme gives every input min-height: 50px, which is most of why each
   field was so tall - it has to be overridden by name, height alone loses.
   Type stays at 16px: below that iOS zooms the page in on focus. */
.n2b-modal__field input {height: 32px;min-height: 32px;padding: 2px;font-size: 16px;}
.n2b-modal__field textarea {height: 36px;min-height: 36px;padding: 4px 2px;font-size: 16px;}
.n2b-modal__submit {width: 100% !important;padding: 9px 20px !important;}
.n2b-modal__privacy {font-size: 10.5px;line-height: 1.45;margin-top: 8px;}
}
/* Very short screens (iPhone SE and the like): stacking all five fields one
   per row still overran 568px by ~60px, so the paired fields go back side by
   side here - the only change that buys that much height without shrinking
   anything below a comfortable tap size. */
@media only screen and (max-width: 575px) and (max-height: 620px) {
.n2b-modal__row {grid-template-columns: 1fr 1fr;gap: 12px;}
}

/* --- Reel zoom (index.php, after Let's Connect) ----------------------------
   A wall of tall 9:16 reel tiles on a near-black stage. The stage is exactly
   one viewport tall; on scroll it pins and the grid scales up around its
   centre tile until that reel stands at full screen height (script at the
   foot of index.php). The gutters are the grid's own dark background, so
   they thicken as it zooms, like the reference.

   Tile height is a share of the viewport rather than of the width, so the
   centre row always fits and the zoom factor is similar on every screen.
   The grid is centred on its centre tile, which is what the zoom anchors on
   - 11 columns and 3 rows, both odd, keep that true. */
.reel-zoom-area {position: relative;padding-top: 110px;}
.reel-zoom-area .site-heading {margin-bottom: 50px;}
.reel-zoom {--reel-h: 42vh;--reel-gap: 12px;position: relative;height: 100vh;overflow: hidden;background: #0e0f11;}
.reel-zoom__grid {position: absolute;left: 50%;top: 50%;display: grid;grid-template-columns: repeat(var(--reel-cols), calc(var(--reel-h) * 9 / 16));grid-auto-rows: var(--reel-h);gap: var(--reel-gap);transform: translate(-50%, -50%);transform-origin: 50% 50%;will-change: transform;}
.reel-zoom__tile {position: relative;overflow: hidden;background: #1b1c20;}
.reel-zoom__tile img, .reel-zoom__tile video {display: block;width: 100%;height: 100%;object-fit: cover;}
/* Stills sit back a little so the playing reels in the middle row lead. */
.reel-zoom__tile img {opacity: 0.55;transition: opacity 0.4s ease;}
@media only screen and (max-width: 991px) {
.reel-zoom-area {padding-top: 70px;}
.reel-zoom-area .site-heading {margin-bottom: 36px;}
.reel-zoom {--reel-gap: 8px;height: 100svh;}
}
@media only screen and (max-width: 575px) {
.reel-zoom {--reel-h: 38vh;--reel-gap: 6px;}
}
/* The About image carries width/height attributes so its space is reserved
   before it lazy-loads (otherwise the page grows under the scroll pins below
   it); height: auto keeps the attribute from fixing it at 826px tall. */
.thumb-style-four img {height: auto;}

/* --- Footer: company blurb + three link menus -------------------------- */
.footer-pixel .footer-about-text {margin: 26px 0 0;max-width: 380px;font-size: 16px;line-height: 1.75;color: var(--color-paragraph);}
.footer-menus .widget-title {margin-bottom: 22px;}
.footer-links {margin: 0;padding: 0;list-style: none;}
.footer-links li {padding: 5px 0;font-size: 17px;line-height: 1.4;}
.footer-links li a {color: var(--color-paragraph);transition: color 0.25s ease;}
.footer-links li a:hover {color: var(--color-primary);}
@media only screen and (max-width: 991px) {
.footer-menus {margin-top: 10px;}
.footer-menus > div {margin-top: 30px;}
}
/* Service pages, "Why Choose N2B Agency": equal-height reason cards. */
.services-more .row > [class*="col-"] {display: flex;}
.services-more .row > [class*="col-"] > .item {flex: 1;}

/* /services: Streamline Core Line icons, inlined as SVG in place of the old
   PNG icons. Same 70px footprint and spacing as the images they replace;
   the set is drawn on a 14px grid, so the stroke is thinned to keep a fine
   line at this size. */
.service-hover-content .icon .svc-icon {display: block;width: 70px;height: 70px;margin-bottom: 30px;color: var(--color-primary);stroke-width: 0.8;overflow: visible;}
/* Service pages: Streamline line icons in place of the old PNG icons, at the
   PNGs' sizes. "Why Choose" icons are brand purple; the numbered detail
   cards keep black. Stroke thinned for the 14px-grid set at this scale. */
.services-more .item .why-icon {display: block;width: 60px;height: 60px;margin-bottom: 30px;color: var(--color-primary);stroke-width: 0.8;overflow: visible;}
.service-style-six-items ul li .icon .detail-icon {display: block;width: 80px;height: 80px;color: var(--color-heading);stroke-width: 0.8;overflow: visible;}

/* --- Split page headers: title + breadcrumb on the left, a short summary of
   the page on the right (services, portfolio, contact, FAQ, team, legal). */
.breadcrumb-split {text-align: left;}
.breadcrumb-split .breadcrumb-item .row {align-items: center;}
.breadcrumb-split .breadcrumb {justify-content: flex-start;text-align: left;}
.breadcrumb-split .breadcrumb-intro {position: relative;margin: 0;padding-left: 28px;border-left: 2px solid var(--color-primary);font-size: 18px;line-height: 1.7;color: var(--color-paragraph);}
@media only screen and (max-width: 991px) {
.breadcrumb-split .breadcrumb-intro {margin-top: 26px;padding-left: 18px;font-size: 16px;}
}

/* --- /portfolio masonry: three columns of cards at their images' natural
   heights. The theme's -50px/50px margin pair spaced the old row layout;
   the columns use a flex gap instead. */
.portfolio-masonry {display: flex;align-items: flex-start;gap: 30px;margin-top: 50px;}
.portfolio-masonry__col {flex: 1 1 0;min-width: 0;display: flex;flex-direction: column;gap: 30px;}
.portfolio-masonry .portfolio-style-six-item {margin-top: 0;}
.portfolio-masonry .portfolio-style-six h2 {font-size: 24px;}
@media only screen and (max-width: 767px) {
.portfolio-masonry {flex-direction: column;align-items: stretch;}
.portfolio-masonry__col {width: 100%;}
}

/* --- Floating rail on phones: sit at ~60% of the screen height rather than
   pinned to the bottom, where it crowded the page's own content. */
@media only screen and (max-width: 767px) {
.n2b-fab {top: 60%;bottom: auto;}
}

/* --- Service pages, phones and tablets: the header is ~102px tall below
   1024px, but the breadcrumb only cleared 90px, so its first line tucked
   under the header. Clear it properly and let a long trail wrap evenly. */
@media only screen and (max-width: 1023px) {
body.service-single-page .breadcrumb-area .breadcrumb {padding: 118px 0 14px;line-height: 1.6;}
}

/* --- Homepage Streamline icons (about stats + service cards), in place of
   the old PNGs at the same sizes. Colour comes from `color`, so the purple
   first stat card and hover states just switch it to white. */
.about-stat-list a svg.sl-icon {width: 32px;height: 32px;color: var(--color-heading);stroke-width: 0.9;filter: none;transition: color 0.35s ease-in-out;}
.about-stat-list li:first-child a svg.sl-icon, .about-stat-list li a:hover svg.sl-icon {color: var(--white);filter: none;}
.cteative-service-item svg.cs-icon {flex: none;width: 70px;height: 70px;margin-left: 25px;color: var(--color-heading);stroke-width: 0.6;opacity: 0.85;overflow: visible;}
.bg-dark .cteative-service-item svg.cs-icon {color: var(--white);}
@media only screen and (max-width: 767px) {
.about-stat-list a svg.sl-icon {width: 30px;height: 30px;}
.cteative-service-item svg.cs-icon {margin: 30px 0 0;}
}

/* --- Service pages, "Why Choose N2B Agency": tighter cards, with a smaller
   icon sitting on the same line as the title and the text left-aligned
   beneath (the theme centred the text on phones while the icon stayed
   left, so the two never lined up). */
.services-more .item {display: grid;grid-template-columns: auto 1fr;align-items: center;align-content: start;column-gap: 16px;row-gap: 14px;padding: 32px 30px;text-align: left;}
.services-more .item .why-icon {width: 40px;height: 40px;margin: 0;stroke-width: 0.9;}
.services-more .item h4 {margin: 0;font-size: 21px;line-height: 1.3;}
.services-more .item p {grid-column: 1 / -1;}
@media only screen and (max-width: 767px) {
.services-more .item {padding: 24px 22px;}
.services-more .item .why-icon {width: 36px;height: 36px;}
.services-more .item h4 {font-size: 19px;}
}

/* --- Clients: ruled logo grid --------------------------------------------
   Four logos a row, separated by faint rules. The lines are drawn as cell
   borders on the right and bottom, with the outer edges trimmed, so there
   is no frame around the block - only the dividers inside it, as in the
   reference sketch. */
.client-grid-head {margin-bottom: 46px;}
.client-grid-head__text {margin: 0;font-size: 17px;line-height: 1.75;}
.client-grid {display: grid;grid-template-columns: repeat(var(--client-cols, 4), minmax(0, 1fr));}
.client-grid__cell {position: relative;display: flex;align-items: center;justify-content: center;min-height: 150px;padding: 26px 30px;border-right: 1px solid rgba(17, 17, 17, 0.09);border-bottom: 1px solid rgba(17, 17, 17, 0.09);}
/* Small square on each interior crossing of the rules: drawn on a cell's
   bottom-right corner, so the cells in the last column and last row - whose
   corners sit on the outer edge - leave theirs off. */
.client-grid__cell::after {content: "";position: absolute;right: -4px;bottom: -4px;width: 7px;height: 7px;background: rgba(17, 17, 17, 0.18);}
.client-grid__cell:nth-child(4n)::after, .client-grid__cell:nth-last-child(-n + 4)::after {display: none;}
.client-grid__cell:nth-child(4n) {border-right: 0;}
.client-grid__cell img {max-height: 58px;width: auto;max-width: 100%;object-fit: contain;transition: transform 0.3s ease;}
.client-grid__cell:hover img {transform: scale(1.05);}
/* Last row sits on the section's own space, so it needs no rule under it. */
.client-grid__cell:nth-last-child(-n + 4) {border-bottom: 0;}
@media only screen and (max-width: 991px) {
.client-grid-head {margin-bottom: 32px;}
.client-grid__cell {min-height: 120px;padding: 20px 18px;}
.client-grid__cell img {max-height: 46px;}
}
@media only screen and (max-width: 575px) {
.client-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
.client-grid__cell:nth-child(4n) {border-right: 1px solid rgba(17, 17, 17, 0.09);}
.client-grid__cell:nth-child(2n) {border-right: 0;}
.client-grid__cell:nth-last-child(-n + 4) {border-bottom: 1px solid rgba(17, 17, 17, 0.09);}
.client-grid__cell:nth-last-child(-n + 2) {border-bottom: 0;}
.client-grid__cell:nth-child(4n)::after, .client-grid__cell:nth-last-child(-n + 4)::after {display: block;}
.client-grid__cell:nth-child(2n)::after, .client-grid__cell:nth-last-child(-n + 2)::after {display: none;}
.client-grid__cell {min-height: 96px;padding: 16px 14px;}
.client-grid__cell img {max-height: 38px;}
}
