:root {
--red:#ff1f3d;
--ink:#111827;
--muted:#5e6571;
--line:#e8e9ed;
--soft:#f7f8fa
}
* {
	box-sizing: border-box
}
html {
	scroll-behavior: smooth
}
body {
	font-family: Inter, sans-serif;
	color: var(--ink);
	background: #fff;
	overflow-x: hidden
}
.shell {
	padding-left: 5.5vw;
	padding-right: 5.5vw
}
.topbar {
	background: #121d2b;
	color: #fff;
	font-size: 12px;
	padding: 9px 0
}
.topbar a, .topbar span {
	color: #fff;
	text-decoration: none
}
.topbar i {
	color: var(--red);
	margin-right: 6px
}
.site-header {
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 5px 24px rgba(16,24,40,.04)
}
.navbar {
	padding: 18px 0
}
.navbar-brand img, .offcanvas-header img {
	width: 168px;
	height: auto
}
.nav-link {
	font-weight: 600;
	color: #20242b!important;
	font-size: 14px;
	padding: 12px 14px!important
}
.nav-link.active {
	position: relative
}
.nav-link.active:after {
	
	color: var(--red);
}
.dropdown-menu {
	border: 0;
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(0,0,0,.12);
	padding: 12px
}
.dropdown-item {
	border-radius: 9px;
	padding: 10px 14px;
	font-size: 14px
}
.dropdown-item:hover {
	background: #fff0f2;
	color: var(--red)
}
.btn {
	font-weight: 700;
	font-size: 13px
}
.btn-red {
	background: var(--red);
	border: 1px solid var(--red);
	color: #fff;
	border-radius: 999px;
	padding: 13px 22px
}
.btn-red:hover {
	background: #111827;
	border-color: #111827;
	color: #fff
}
.hero {
	position: relative;
	min-height: 690px;
	overflow: hidden
}
.hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .18
}
.hero-wash {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 46%, rgba(255,255,255,.38) 100%), radial-gradient(circle at 75% 50%, rgba(255,31,61,.28), transparent 40%)
}
.hero-inner {
	position: relative;
	z-index: 2
}
.min-vh-75 {
	min-height: 690px
}
.eyebrow {
	text-transform: uppercase;
	letter-spacing: .24em;
	font-size: 11px;
	font-weight: 800;
	margin-bottom: 18px
}
.eyebrow.red {
	color: var(--red)
}
h1 {
	font-size: clamp(46px, 5vw, 76px);
	line-height: .98;
	letter-spacing: -.055em;
	font-weight: 800;
	margin-bottom: 24px
}
h1 span, h2 span {
	color: var(--red)
}
.hero-copy p {
	max-width: 620px;
	color: #4c5562;
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 28px
}
.stats {
	gap: 0;
	margin-top: 48px
}
.stats>div {
	padding-right: 38px;
	margin-right: 38px;
	border-right: 1px solid #dfe1e6
}
.stats>div:last-child {
	border: 0
}
.stats strong {
	font-size: 31px;
	display: block
}
.stats span {
	display: block;
	font-size: 11px;
	color: #59606a
}
.device-stage {
	position: relative;
	transform: perspective(900px) rotateY(-7deg) rotateX(2deg);
	filter: drop-shadow(0 35px 35px rgba(16,24,40,.18))
}
.device-stage img {
	width: 100%;
	height: 410px;
	object-fit: cover;
	border: 14px solid #17191d;
	border-radius: 22px
}
.play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 78px;
	height: 78px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	font-size: 30px
}
.section {
	padding: 90px 0
}
.section-head {
	margin-bottom: 42px
}
h2 {
	font-size: clamp(38px, 4vw, 60px);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.045em;
	margin: 0
}
.section p {
	color: var(--muted);
	line-height: 1.7
}
.service-card {
	height: 100%;
	border: 1px solid var(--line);
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(16,24,40,.05);
	transition: .35s
}
.service-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 50px rgba(16,24,40,.12)
}
.service-card img {
	width: 100%;
	height: 220px;
	object-fit: cover
}
.service-card .body {
	padding: 16px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 76px
}
.service-card .icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #fff0f2;
	color: var(--red);
	display: grid;
	place-items: center
}
.circle-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #d8dbe1
}
.circle-btn:hover {
	border-color: var(--red);
	color: var(--red)
}
.project-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 13px;
	overflow: hidden;
	box-shadow: 0 8px 28px rgba(16,24,40,.05)
}
.project-card img {
	width: 100%;
	height: 270px;
	object-fit: cover
}
.project-card .body {
	padding: 16px
}
.project-card h5 {
	font-weight: 800;
	margin: 0 0 4px
}
.project-card small {
	color: #747b86
}
.about {
	background: linear-gradient(180deg, #fff, #fbfbfc)
}
.about-image {
	position: relative
}
.about-image img {
	width: 100%;
	height: 430px;
	object-fit: cover;
	border-radius: 16px
}
.about-image span {
	position: absolute;
	top: 35px;
	left: 25px;
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	transform: rotate(-7deg)
}
.metric {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 0
}
.metric i {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	border: 1px solid #ffc5cd;
	color: var(--red);
	font-size: 22px
}
.metric strong {
	font-size: 31px;
	display: block
}
.metric span {
	font-size: 12px;
	color: #6d7480
}
.process-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 28px
}
.process-step {
	position: relative
}
.process-step:not(:last-child):after {
	content: "→";
	position: absolute;
	right: -18px;
	top: 18px;
	color: #7c838e
}
.process-step .picon {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #fff0f2;
	color: var(--red);
	display: grid;
	place-items: center;
	font-size: 20px
}
.process-step strong {
	display: block;
	font-size: 18px;
	margin-top: 12px
}
.process-step h5 {
	font-weight: 800
}
.process-step p {
	font-size: 12px
}
.testimonials {
	background: #fff
}
.testimonial-card {
	border: 1px solid #edf0f3;
	border-radius: 14px;
	padding: 26px;
	box-shadow: 0 14px 36px rgba(16,24,40,.06);
	height: 100%;
	position: relative
}
.testimonial-card .quote {
	font-size: 40px;
	color: #ff9aaa;
	line-height: 1
}
.stars {
	color: var(--red);
	letter-spacing: 2px
}
.person {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px
}
.person img {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover
}
.person strong {
	font-size: 13px;
	display: block
}
.person span {
	font-size: 11px;
	color: #777
}
.client-strip {
	padding: 36px 0;
	background: #fff8f9
}
.logos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap
}
.logos span {
	font-weight: 800;
	font-size: 17px;
	text-align: center;
	color: #171a20
}
.logos small {
	display: block;
	font-size: 9px
}
.cta {
	padding: 65px 0;
	color: #fff;
	background: linear-gradient(90deg, rgba(13,20,31,.94), rgba(13,20,31,.65)), url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=85') center/cover
}
.cta h2 {
	font-size: 60px
}
.cta p {
	color: #fff;
	opacity: .9
}
footer {
	padding: 60px 0 20px;
	background: #fff
}
.footer-logo {
	width: 170px;
	margin-bottom: 20px
}
footer p, footer a {
	font-size: 0.913rem;
	color: #6a717d;
	text-decoration: none;
	display: block;
	margin-bottom: 6px
}
footer h6 {
	font-weight: 800
}
.footer-menu{
	padding: 0;
	margin: 0;
}
.footer-menu li{
	list-style: none;
	display: flex;
}
.footer-menu li a{
	color: #000;
}
.social-btn {
	width: 34px;
	height: 34px;
	border: 1px solid #dfe1e6;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: #111!important
}
.footer-bottom {
	border-top: 1px solid #eceef1;
	margin-top: 40px;
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #888
}
#toTop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	z-index: 100;
	opacity: 0;
	transform: translateY(20px);
	transition: .3s
}
.offcanvas-body a {
	display: block;
	color: #111;
	text-decoration: none;
	font-size: 26px;
	font-weight: 800;
	padding: 10px 0
}
@media(max-width:991px) {
.shell {
	padding-left: 24px;
	padding-right: 24px
}
.topbar .gap-4 {
	gap: 10px!important
}
.hero, .min-vh-75 {
	min-height: auto
}
.hero-inner {
	padding-top: 70px;
	padding-bottom: 70px
}
.hero-art {
	margin-top: 50px
}
.stats {
	flex-wrap: wrap;
	gap: 20px
}
.stats>div {
	border: 0;
	margin: 0;
	padding-right: 18px
}
.process-row {
	grid-template-columns: 1fr 1fr
}
.process-step:after {
	display: none
}
.testimonial-head {
	align-items: flex-start!important;
	gap: 20px;
	flex-direction: column
}
.cta h2 {
	font-size: 46px
}
}
@media(max-width:575px) {
h1 {
	font-size: 43px
}
.device-stage img {
	height: 290px
}
.process-row {
	grid-template-columns: 1fr
}
.logos {
	justify-content: center
}
.footer-bottom {
	flex-direction: column;
	gap: 10px
}
.topbar span {
	display: none
}
}
/* 2026 refinement: light section rhythm, full video hero, premium process */
.hero {
	min-height: 720px;
	background: #f8fafc
}
.hero-video {
	opacity: 1;
	filter: saturate(.9) contrast(.96);
	transform: scale(1.015)
}
.hero-wash {
	background: linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 38%, rgba(255,255,255,.66) 62%, rgba(255,255,255,.18) 100%), linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05))
}
.hero-copy {
	padding: 42px 0
}
.hero-copy:before {
	content: "";
	position: absolute;
	left: -8vw;
	top: 10%;
	width: 48vw;
	height: 48vw;
	background: radial-gradient(circle, rgba(255,31,61,.12), transparent 66%);
	pointer-events: none
}
.hero-copy>* {
	position: relative
}
.hero .stats {
	background: rgba(255,255,255,.68);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,.85);
	border-radius: 18px;
	padding: 20px 24px;
	width: max-content;
	max-width: 100%;
	box-shadow: 0 16px 50px rgba(18,29,43,.08)
}
.services-section {
	background: #fff
}
.work-section {
	background: #f7f9fc;
	padding-top: 90px!important
}
.about {
	background: #fffdfd
}
.process-section {
	background: linear-gradient(135deg, #f7f9fc 0%, #fff7f8 55%, #fff 100%);
	position: relative;
	overflow: hidden
}
.process-section:before {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: rgba(255,31,61,.055);
	right: -140px;
	top: -180px
}
.process-row {
	gap: 18px;
	position: relative
}
.process-row:before {
	content: "";
	position: absolute;
	left: 7%;
	right: 7%;
	top: 42px;
	height: 1px;
	background: linear-gradient(90deg, transparent, #ff8a9a 12%, #ff8a9a 88%, transparent)
}
.process-step {
	background: rgba(255,255,255,.86);
	border: 1px solid rgba(255,255,255,.9);
	border-radius: 22px;
	padding: 28px 24px 25px;
	box-shadow: 0 16px 45px rgba(17,24,39,.07);
	min-height: 260px;
	transition: .35s;
	z-index: 1
}
.process-step:hover {
	transform: translateY(-10px);
	box-shadow: 0 25px 60px rgba(17,24,39,.12)
}
.process-step:not(:last-child):after {
	display: none
}
.process-step .picon {
	width: 64px;
	height: 64px;
	font-size: 24px;
	border: 7px solid #fff;
	box-shadow: 0 8px 22px rgba(255,31,61,.13);
	position: relative
}
.process-step strong {
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--red);
	margin-top: 24px
}
.process-step h5 {
	font-size: 22px;
	margin: 5px 0 12px
}
.process-step p {
	font-size: 13px;
	line-height: 1.6;
	margin: 0
}
.testimonials {
	background: #fff
}
.client-strip {
	background: #fff6f7;
	padding: 42px 0;
	overflow: hidden
}
.logoSwiper {
	overflow: visible
}
.logoSwiper .swiper-wrapper {
	transition-timing-function: linear!important;
	align-items: center
}
.logoSwiper .swiper-slide {
	width: auto!important;
	min-width: 190px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 193px;
	border-radius: 0.875rem;
	overflow: hidden;
}
.logoSwiper span {
	font-weight: 800;
	font-size: 18px;
	text-align: center;
	color: #171a20;
	white-space: nowrap
}
.logoSwiper small {
	display: block;
	font-size: 9px
}
.service-card .body strong {
	font-size: 14px;
	line-height: 1.25
}
.service-card .icon {
	flex: 0 0 36px
}
.section:nth-of-type(even) {
	border-top: 1px solid rgba(17,24,39,.025)
}
@media(max-width:991px) {
.hero-wash {
	background: rgba(255,255,255,.88)
}
.hero .stats {
	width: 100%
}
.process-row:before {
	display: none
}
.process-step {
	min-height: 230px
}
}
/* FINAL approved mockup alignment */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(255,255,255,.08);
	box-shadow: none;
	border-bottom: 1px solid rgba(255,255,255,.12);
	backdrop-filter: blur(9px)
}
.navbar {
	padding: 16px 0
}
.navbar-brand img {
	width: 154px
}
.site-header .nav-link {
	color: #fff!important;
	text-shadow: 0 1px 10px rgba(0,0,0,.22)
}
.site-header .nav-link.active:after {
	
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 18px
}
.header-phone {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #fff;
	text-decoration: none;
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap
}
.header-phone span {
	width: 31px;
	height: 31px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff;
	color: #172033;
	box-shadow: 0 8px 22px rgba(0,0,0,.12)
}
.dropdown-toggle::after {
	border: 0!important;
	width: 7px;
	height: 7px;
	border-right: 1.7px solid currentColor!important;
	border-bottom: 1.7px solid currentColor!important;
	transform: rotate(45deg) translateY(-2px);
	margin-left: 8px;
	vertical-align: 3px;
	transition: .25s
}
.dropdown-toggle.show::after {
	transform: rotate(225deg) translate(-2px, -1px)
}
.dropdown-menu {
	margin-top: 10px!important;
	border: 1px solid rgba(255,255,255,.7);
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(20px);
	min-width: 250px
}
.dropdown-item {
	display: flex;
	align-items: center;
	gap: 9px
}
.dropdown-item:before {
	content: '↗';
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff0f2;
	color: var(--red);
	font-size: 11px
}
.hero {
	min-height: 100vh;
}
.min-vh-75 {
	min-height: 100vh;
}
.hero-wash {
	background: linear-gradient(90deg, rgba(10,18,31,.78) 0%, rgba(10,18,31,.58) 45%, rgba(10,18,31,.22) 72%, rgba(10,18,31,.12) 100%)
}
.hero-copy {
	padding-top: 100px;
	color: #fff
}
.hero-copy p {
	color: rgba(255,255,255,.84)
}
.hero .eyebrow {
	color: #fff
}
.hero .btn-outline-dark {
	border-color: #fff;
	background: #fff;
	color: #172033
}
.hero .stats {
	background: rgba(255,255,255,.9);
	color: var(--ink);
	backdrop-filter: blur(16px)
}
.services-section {
	background: linear-gradient(135deg, #fff 0%, #fff7f8 100%)
}
.work-section {
	background: #fff
}
.about-premium {
	background: linear-gradient(135deg, #fff 0%, #fffafb 48%, #f7fbff 100%);
	overflow: hidden
}
.process-section {
	background: linear-gradient(135deg, #fff8f8, #fff 65%, #f7fbff)
}
.testimonials {
	background: linear-gradient(180deg, #fff, #fbfdff)
}
.about-premium h2 {
	font-size: clamp(42px, 4.2vw, 68px)
}
.about-premium h2 span {
	color: var(--red)
}
.about-lead {
	font-size: 14px;
	max-width: 580px
}
.about-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 28px 0 38px
}
.story-link {
	border: 0;
	background: transparent;
	font-weight: 800;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 10px
}
.story-link span {
	width: 48px;
	height: 48px;
	border: 1px solid #ffc1ca;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--red);
	font-size: 18px
}
.about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0
}
.about-stats>div {
	padding-right: 20px;
	margin-right: 20px;
	border-right: 1px solid #ddd
}
.about-stats>div:last-child {
	border: 0
}
.about-stats strong {
	font-size: 34px;
	display: block
}
.about-stats small {
	color: #69717d
}
.about-visual {
	height: 100%;
	min-height: 540px;
	position: relative;
	border-radius: 28px;
	overflow: visible
}
.about-visual>img {
	width: 100%;
	height: 100%;
	min-height: 540px;
	object-fit: cover;
	border-radius: 28px
}
.scribble {
	position: absolute;
	right: 8%;
	top: 7%;
	font-size: 25px;
	line-height: 1.1;
	font-style: italic;
	transform: rotate(-7deg);
	font-weight: 600
}
.scribble span {
	display: block;
	width: 110px;
	height: 5px;
	background: var(--red);
	border-radius: 50%;
	transform: rotate(-7deg);
	margin-top: 8px
}
.story-card {
	position: absolute;
	left: -10%;
	bottom: -4%;
	width: 310px;
	background: #fff;
	border-radius: 22px;
	padding: 12px;
	box-shadow: 0 24px 60px rgba(17,24,39,.16);
	display: grid;
	grid-template-columns: 115px 1fr 24px;
	gap: 12px;
	align-items: center;
	transform: rotate(-2deg)
}
.story-thumb {
	height: 92px;
	position: relative
}
.story-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px
}
.story-thumb button {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	color: #111
}
.story-card strong, .story-card small {
	display: block
}
.story-card small {
	font-size: 10px;
	color: #6c7480;
	margin-top: 4px
}
.partner-note {
	position: absolute;
	right: -1%;
	bottom: 4%;
	font-size: 22px;
	line-height: 1.1;
	color: var(--red);
	font-style: italic;
	transform: rotate(-8deg)
}
.about-values {
	display: flex;
	flex-direction: column;
	gap: 12px
}
.about-values article {
	background: rgba(255,255,255,.92);
	border: 1px solid #edf0f4;
	border-radius: 18px;
	padding: 18px;
	display: flex;
	gap: 14px;
	box-shadow: 0 12px 32px rgba(17,24,39,.06)
}
.about-values article>span {
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #fff0f2;
	color: var(--red);
	font-size: 19px
}
.about-values h5 {
	font-size: 14px;
	font-weight: 800;
	margin: 2px 0 4px
}
.about-values p {
	font-size: 11px;
	line-height: 1.45;
	margin: 0
}
.about-values .mini-review {
	display: block;
	padding: 20px
}
.mini-review .quote {
	font-size: 38px;
	color: #ffb0bb;
	line-height: .7
}
.mini-review .stars {
	margin: 10px 0 4px
}
.mini-review strong, .mini-review small {
	display: block;
	font-size: 11px
}
.process-row:before {
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--red) 10%, var(--red) 90%, transparent);
	top: 52px
}
.process-step {
	border-radius: 18px;
	background: rgba(255,255,255,.9)
}
@media(max-width:1199px) {
.site-header {
	background: rgba(12,20,32,.72)
}
.header-phone {
	display: none
}
.about-visual {
	margin-top: 10px
}
.story-card {
	left: 3%
}
.partner-note {
	right: 4%
}
}
@media(max-width:991px) {
.site-header {
	position: absolute
}
.navbar-toggler {
	background: #fff
}
.about-stats {
	margin-bottom: 30px
}
.about-visual {
	min-height: 460px
}
.about-visual>img {
	min-height: 460px
}
.story-card {
	position: relative;
	left: auto;
	bottom: auto;
	margin: -70px auto 0
}
.partner-note {
	display: none
}
}
@media(max-width:575px) {
.about-actions {
	align-items: flex-start;
	flex-direction: column
}
.about-stats strong {
	font-size: 26px
}
.about-stats>div {
	padding-right: 10px;
	margin-right: 10px
}
.story-card {
	width: 90%;
	grid-template-columns: 90px 1fr 20px
}
.scribble {
	font-size: 19px
}
.hero-copy {
	padding-top: 130px
}
}
/* Client-requested refinement */
.site-header {
	background: transparent!important;
	border-bottom: 0!important;
	backdrop-filter: none!important;
	box-shadow: none!important
}
.btn {
	font-size: 14px;
	padding: 15px 26px;
	min-height: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px
}
.btn-red {
	padding: 16px 29px;
	box-shadow: 0 10px 28px rgba(255,31,61,.22)
}
.circle-btn {
	width: 48px;
	height: 48px
}
.hero .stats {
	background: transparent!important;
	border: 0!important;
	box-shadow: none!important;
	backdrop-filter: none!important;
	padding: 0!important;
	border-radius: 0!important
}
.hero .stats>div {
	color: #fff;
	border-color: rgba(255,255,255,.3)
}
.hero .stats span {
	color: rgba(255,255,255,.75)
}
.section {
	position: relative;
	isolation: isolate;
	overflow: hidden
}
.section>.container-fluid {
	position: relative;
	z-index: 2
}
.services-section:before, .work-section:before, .about-premium:before, .process-section:after, .testimonials:before {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(.2px)
}
.services-section:before {
	width: 360px;
	height: 360px;
	left: -180px;
	top: 80px;
	background: radial-gradient(circle, rgba(255,31,61,.09), rgba(255,31,61,0) 70%)
}
.work-section:before {
	width: 420px;
	height: 420px;
	right: -220px;
	bottom: -150px;
	background: radial-gradient(circle, rgba(95,140,255,.09), rgba(95,140,255,0) 70%)
}
.about-premium:before {
	width: 460px;
	height: 460px;
	left: -240px;
	bottom: -160px;
	background: radial-gradient(circle, rgba(255,31,61,.075), rgba(255,31,61,0) 70%)
}
.process-section:after {
	width: 420px;
	height: 420px;
	left: -220px;
	bottom: -210px;
	background: radial-gradient(circle, rgba(255,168,183,.14), transparent 70%)
}
.testimonials:before {
	width: 380px;
	height: 380px;
	right: -180px;
	top: 20px;
	background: radial-gradient(circle, rgba(99,142,255,.075), transparent 70%)
}
.about-premium {
	background: transparent!important
}
.about-premium .row {
	align-items: center!important
}
.about-visual {
	min-height: 430px;
	height: 430px;
	max-width: 610px;
	margin-inline: auto
}
.about-visual>img {
	min-height: 430px;
	height: 430px
}
.story-card {
	width: 280px;
	grid-template-columns: 100px 1fr 22px
}
.story-thumb {
	height: 78px
}
.about-values article {
	background: rgba(255,255,255,.58);
	backdrop-filter: blur(8px)
}
.process-row {
	align-items: stretch
}
.process-step {
	opacity: 1!important;
	visibility: visible!important;
	transform: none;
	min-height: 245px
}
.process-step .picon {
	margin-top: -4px
}
.process-row:before {
	top: 48px
}
@media (min-width:992px) {
.navbar .dropdown:hover>.dropdown-menu {
	display: block
}
.navbar .dropdown-menu {
	margin-top: 0!important
}
.navbar .dropdown:hover>.nav-link:after {
	transform: rotate(225deg) translate(-2px, -1px)
}
.navbar .dropdown-toggle {
	pointer-events: auto
}
.site-header .dropdown-toggle.show+.dropdown-menu {
	display: block
}
}
.mobile-menu>a, .mobile-parent>button {
	width: 100%;
	display: flex!important;
	align-items: center;
	justify-content: space-between;
	color: #111!important;
	text-decoration: none;
	font-size: 24px!important;
	font-weight: 800!important;
	padding: 12px 0!important;
	border: 0;
	background: transparent;
	text-align: left
}
.mobile-parent>button i {
	font-size: 18px;
	transition: .25s
}
.mobile-parent>button[aria-expanded="true"] i {
	transform: rotate(45deg);
	color: var(--red)
}
.mobile-submenu {
	padding: 0 0 8px 14px
}
.mobile-submenu a {
	font-size: 15px!important;
	font-weight: 600!important;
	padding: 8px 0!important;
	color: #646b76!important
}
@media(max-width:1199px) {
.site-header {
	background: transparent!important
}
.about-visual {
	height: 410px;
	min-height: 410px
}
.about-visual>img {
	height: 410px;
	min-height: 410px
}
}
@media(max-width:991px) {
.site-header {
	background: transparent!important
}
.navbar-toggler {
	background: rgba(255,255,255,.94)
}
.hero .stats>div {
	color: #fff
}
.about-visual {
	height: 420px;
	min-height: 420px;
	max-width: 680px
}
.about-visual>img {
	height: 420px;
	min-height: 420px
}
.process-step {
	min-height: 220px
}
}
@media(max-width:575px) {
.btn {
	font-size: 13px;
	padding: 14px 21px;
	min-height: 46px
}
.about-visual {
	height: 340px;
	min-height: 340px
}
.about-visual>img {
	height: 340px;
	min-height: 340px
}
.hero .stats {
	gap: 12px
}
.hero .stats>div {
	padding-right: 14px!important
}
.hero .stats strong {
	font-size: 26px
}
}
/* V4 — Creative featured projects slider */
.work-section {
	background: linear-gradient(145deg, #fff 0%, #fff9fa 52%, #f7fbff 100%);
	padding: 105px 0 115px!important
}
.work-section:after {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border: 1px solid rgba(255,31,61,.08);
	border-radius: 50%;
	left: -280px;
	top: -210px;
	pointer-events: none
}
.project-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 42px
}
.project-heading>div:first-child {
	max-width: 760px
}
.project-heading h2 span {
	color: var(--red)
}
.project-heading p {
	max-width: 620px;
	margin: 18px 0 0;
	font-size: 15px
}
.project-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0
}
.project-all {
	height: 50px;
	padding: 0 22px;
	border: 1px solid #d9dce2;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--ink);
	text-decoration: none;
	font-size: 13px;
	font-weight: 800;
	transition: .3s;
	background: rgba(255,255,255,.65);
	backdrop-filter: blur(8px)
}
.project-all:hover {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
	transform: translateY(-2px)
}
.projectSwiper {
	overflow: visible!important;
	padding: 8px 0 24px
}
.projectSwiper .swiper-slide {
	height: auto
}
.project-card {
	display: block;
	height: 100%;
	text-decoration: none;
	color: #fff;
	border: 0!important;
	background: transparent!important;
	box-shadow: none!important;
	border-radius: 24px!important;
	overflow: visible!important
}
.project-media {
	position: relative;
	height: 500px;
	overflow: hidden;
	border-radius: 24px;
	background: #e9eaee;
	box-shadow: 0 18px 50px rgba(17,24,39,.10);
	isolation: isolate
}
.project-media img {
	width: 100%;
	height: 100%!important;
	object-fit: cover;
	transition: transform .85s cubic-bezier(.2, .7, .2, 1), filter .55s ease
}
.project-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9,13,21,.02) 25%, rgba(9,13,21,.82) 100%);
	z-index: 1;
	transition: .45s
}
.project-no {
	position: absolute;
	top: 22px;
	left: 22px;
	z-index: 3;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(255,255,255,.9);
	backdrop-filter: blur(10px);
	color: #111827;
	font-size: 12px;
	font-weight: 800
}
.project-copy {
	position: absolute;
	z-index: 3;
	left: 28px;
	right: 28px;
	bottom: 28px;
	transform: translateY(0);
	transition: .4s
}
.project-copy span {
	text-transform: uppercase;
	letter-spacing: .16em;
	font-size: 10px;
	font-weight: 800;
	color: rgba(255,255,255,.78)
}
.project-copy h3 {
	font-size: clamp(26px, 2.1vw, 38px);
	font-weight: 800;
	letter-spacing: -.04em;
	margin: 7px 0 0;
	color: #fff
}
.project-view {
	position: absolute;
	z-index: 4;
	right: 22px;
	top: 22px;
	padding: 12px 16px;
	border-radius: 999px;
	background: var(--red);
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	display: flex;
	align-items: center;
	gap: 8px;
	opacity: 0;
	transform: translateY(-8px);
	transition: .35s
}
.project-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #5f6671;
	padding: 16px 5px 0;
	font-size: 12px;
	font-weight: 700;
	opacity: .75;
	transition: .3s
}
.project-foot i {
	width: 42px;
	height: 42px;
	border: 1px solid #d9dce2;
	border-radius: 50%;
	display: grid;
	place-items: center;
	color: var(--ink);
	font-size: 17px;
	transition: .3s
}
.project-card:hover .project-media img {
	transform: scale(1.07);
	filter: saturate(1.08)
}
.project-card:hover .project-overlay {
	background: linear-gradient(180deg, rgba(255,31,61,.04) 15%, rgba(9,13,21,.88) 100%)
}
.project-card:hover .project-view {
	opacity: 1;
	transform: translateY(0)
}
.project-card:hover .project-copy {
	transform: translateY(-8px)
}
.project-card:hover .project-foot {
	opacity: 1;
	color: var(--ink)
}
.project-card:hover .project-foot i {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
	transform: rotate(45deg)
}
.project-progress {
	height: 2px;
	background: #e8e9ed;
	margin-top: 28px;
	position: relative;
	overflow: hidden;
	border-radius: 10px
}
.project-progress-bar {
	width: 8%;
	height: 100%;
	background: var(--red);
	border-radius: 10px;
	transition: width .6s cubic-bezier(.2, .7, .2, 1)
}
@media(max-width:1199px) {
.project-media {
	height: 440px
}
}
@media(max-width:767px) {
.work-section {
	padding: 75px 0 85px!important
}
.project-heading {
	align-items: flex-start;
	flex-direction: column;
	margin-bottom: 28px
}
.project-controls {
	width: 100%
}
.project-all {
	margin-right: auto
}
.project-media {
	height: 410px
}
.project-copy {
	left: 22px;
	right: 22px;
	bottom: 22px
}
.project-view {
	display: none
}
}
/* V5 interaction refinements */
.service-card {
	display: block;
	color: var(--ink);
	text-decoration: none;
	position: relative;
	isolation: isolate;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .4s
}
.service-media {
	position: relative;
	overflow: hidden
}
.service-card img {
	transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .45s
}
.service-hover-label {
	position: absolute;
	right: 14px;
	top: 14px;
	background: rgba(17,24,39,.88);
	backdrop-filter: blur(8px);
	color: #fff;
	border-radius: 999px;
	padding: 9px 12px;
	font-size: 11px;
	font-weight: 800;
	opacity: 0;
	transform: translateY(-8px);
	transition: .3s
}
.service-arrow {
	width: 38px;
	height: 38px;
	border: 1px solid #e2e5ea;
	border-radius: 50%;
	display: grid;
	place-items: center;
	transition: .35s
}
.service-card:hover {
	color: var(--ink);
	transform: translateY(-10px);
	border-color: rgba(255,31,61,.2);
	box-shadow: 0 24px 55px rgba(17,24,39,.13)
}
.service-card:hover img {
	transform: scale(1.075);
	filter: saturate(1.08)
}
.service-card:hover .service-hover-label {
	opacity: 1;
	transform: none
}
.service-card:hover .service-arrow {
	background: var(--red);
	border-color: var(--red);
	color: #fff;
	transform: rotate(-35deg)
}
.service-card:hover .icon {
	transform: scale(1.08)
}
.service-card .icon {
	transition: .3s
}
/* allow GSAP to own process entrance state */
.process-step {
	opacity: 1;
	visibility: visible
}
.process-row.is-animated .process-step {
	will-change: transform, opacity
}
.process-step:hover .picon {
	transform: rotate(-8deg) scale(1.08)
}
.process-step .picon {
	transition: .35s
}
.testimonialSwiper .swiper-wrapper {
	align-items: stretch
}
.testimonialSwiper .swiper-slide {
	height: auto;
	display: flex
}
.testimonial-card {
	width: 100%;
	min-height: 330px;
	display: flex;
	flex-direction: column
}
.testimonial-copy {
	max-height: 112px;
	overflow: hidden;
	transition: max-height .35s ease
}
.testimonial-card.is-expanded .testimonial-copy {
	max-height: 420px
}
.testimonial-more {
	align-self: flex-start;
	border: 0;
	background: transparent;
	color: var(--red);
	font-weight: 800;
	font-size: 12px;
	padding: 5px 0 10px
}
.testimonial-more i {
	margin-left: 4px
}
.testimonial-bottom {
	margin-top: auto
}
.testimonial-bottom .person {
	margin-top: 16px
}
.logoSwiper {
	touch-action: pan-y
}
.logoSwiper .swiper-slide {
	user-select: none
}
/* Premium CTA */
.cta {
	position: relative;
	overflow: hidden;
	padding: 92px 0;
	background: linear-gradient(100deg, rgba(9,15,27,.96), rgba(9,15,27,.66)), url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=1800&q=85') center/cover
}
.cta:before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border: 1px solid rgba(255,255,255,.13);
	border-radius: 50%;
	right: -100px;
	top: -260px;
	box-shadow: 0 0 0 65px rgba(255,31,61,.035), 0 0 0 130px rgba(255,255,255,.025)
}
.cta:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,31,61,.08) 50%, transparent 100%);
	transform: translateX(-110%);
	animation: ctaSweep 7s ease-in-out infinite
}
.cta .shell {
	position: relative;
	z-index: 2
}
.cta h2 {
	font-size: clamp(52px, 6vw, 92px);
	line-height: .9;
	letter-spacing: -.055em
}
.cta h2:after {
	content: "↗";
	display: inline-grid;
	place-items: center;
	margin-left: 20px;
	width: 70px;
	height: 70px;
	border: 1px solid rgba(255,255,255,.4);
	border-radius: 50%;
	font-size: 28px;
	vertical-align: middle;
	transition: .4s
}
.cta:hover h2:after {
	background: var(--red);
	border-color: var(--red);
	transform: rotate(45deg)
}
.cta p {
	font-size: 18px;
	max-width: 520px
}
.cta .btn-red {
	margin-top: 12px;
	box-shadow: 0 14px 40px rgba(255,31,61,.35)
}
@keyframes ctaSweep {
0%, 55% {
transform:translateX(-110%)
}
80%, 100% {
transform:translateX(110%)
}
}
@media(max-width:767px) {
.testimonial-card {
	min-height: 310px
}
.cta {
	padding: 72px 0
}
.cta h2:after {
	width: 54px;
	height: 54px;
	font-size: 22px
}
}
/* V6 — process connectors + testimonial shadow fix */
/* Remove the old continuous red rule: each stage now connects with its own directional arrow. */
.process-row:before {
	display: none!important
}
.process-step {
	overflow: visible!important
}
.process-step:not(:last-child):after {
	content: "→"!important;
	display: grid!important;
	place-items: center;
	position: absolute;
	z-index: 8;
	top: 50%;
	right: -31px;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(255,31,61,.28);
	color: var(--red);
	font-size: 21px;
	font-weight: 500;
	line-height: 1;
	box-shadow: 0 10px 28px rgba(17,24,39,.10), 0 0 0 7px rgba(255,31,61,.035);
	transition: transform .35s ease, background .35s ease, color .35s ease, box-shadow .35s ease;
}
.process-step:hover:not(:last-child):after {
	transform: translateX(5px);
	background: var(--red);
	color: #fff;
	box-shadow: 0 13px 32px rgba(255,31,61,.22), 0 0 0 7px rgba(255,31,61,.055);
}
/* Give testimonial shadows breathing room inside Swiper's clipped viewport. */
.testimonialSwiper {
	padding: 10px 6px 48px!important;
	margin: 0 -6px -32px!important
}
.testimonialSwiper .swiper-wrapper {
	align-items: stretch!important
}
.testimonialSwiper .swiper-slide {
	height: auto!important;
	padding-bottom: 2px
}
.testimonial-card {
	box-shadow: 0 16px 34px rgba(16,24,40,.09)!important
}
@media(max-width:991px) {
.process-step:not(:last-child):after {
	display: none!important
}
.testimonialSwiper {
	padding-bottom: 42px!important;
	margin-bottom: -28px!important
}
}

/* V7 — keep process arrows cleanly inside the gap between cards */
@media (min-width: 1200px) {
.process-row {
	gap: 64px!important;
}
.process-step:not(:last-child):after {
	width: 38px!important;
	height: 38px!important;
	margin-top: -19px!important;
	right: -51px!important;
	font-size: 19px!important;
	box-shadow: 0 8px 22px rgba(17,24,39,.08), 0 0 0 5px rgba(255,31,61,.03)!important;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
.process-row {
	gap: 44px!important
}
.process-step {
	padding-left: 18px!important;
	padding-right: 18px!important
}
.process-step:not(:last-child):after {
	width: 34px!important;
	height: 34px!important;
	margin-top: -17px!important;
	right: -39px!important;
	font-size: 17px!important;
}
}
/* V8 — fixed header + arrow-free cinematic process reveal */
.site-header {
	position: fixed!important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1050;
	background: transparent!important;
	border-bottom: 1px solid transparent!important;
	box-shadow: none!important;
	backdrop-filter: none!important;
	transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled {
	background: rgba(255,255,255,.92)!important;
	border-bottom-color: rgba(17,24,39,.07)!important;
	box-shadow: 0 10px 35px rgba(17,24,39,.08)!important;
	backdrop-filter: blur(18px)!important;
	-webkit-backdrop-filter: blur(18px)!important;
}
.site-header.is-scrolled .nav-link {
	color: var(--ink)!important;
	text-shadow: none!important
}
.site-header.is-scrolled .header-phone {
	color: var(--ink)!important
}
.site-header.is-scrolled .header-phone span {
	background: #fff0f2!important;
	color: var(--red)!important
}
.site-header.is-scrolled .navbar-brand img {
	filter: none!important
}
/* No connectors/arrows between process cards. */
.process-step:not(:last-child):after {
	display: none!important;
	content: none!important
}
.process-row {
	gap: 22px!important;
	perspective: 1200px
}
.process-section {
	isolation: isolate
}
.process-section .shell {
	position: relative;
	z-index: 2
}
.process-orb {
	position: absolute;
	z-index: 0;
	left: -10%;
	top: 48%;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,31,61,.13) 0%, rgba(255,31,61,.045) 42%, transparent 72%);
	filter: blur(4px);
	opacity: 0;
	pointer-events: none;
}
.process-step {
	transform-style: preserve-3d;
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s ease, border-color .4s ease!important;
}
.process-step:hover {
	transform: translateY(-12px) scale(1.018)!important;
	border-color: rgba(255,31,61,.14)!important
}
.process-step:hover .picon {
	transform: rotate(8deg) scale(1.12)!important;
	box-shadow: 0 12px 30px rgba(255,31,61,.2)!important
}
@media (min-width:1200px) {
.process-row {
	gap: 22px!important
}
}
@media (min-width:992px) and (max-width:1199.98px) {
.process-row {
	gap: 18px!important
}
}
@media(max-width:991px) {
.site-header {
	position: fixed!important;
	background: transparent!important
}
.site-header.is-scrolled {
	background: rgba(255,255,255,.95)!important
}
.process-orb {
	width: 300px;
	height: 300px
}
}
/* V9 — semantic mobile navigation: ul > li > a only */
.mobile-nav-list, .mobile-nav-list ul {
	list-style: none;
	margin: 0;
	padding: 0
}
.mobile-nav-list>li {
	border-bottom: 1px solid rgba(17,24,39,.08)
}
.mobile-nav-list>li>a {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #111827;
	text-decoration: none;
	font-size: 24px;
	font-weight: 800;
	padding: 15px 0;
	line-height: 1.2
}
.mobile-parent-link i {
	font-size: 18px;
	transition: transform .25s ease, color .25s ease
}
.mobile-parent-link[aria-expanded="true"] i {
	transform: rotate(45deg);
	color: var(--red)
}
.mobile-submenu {
	padding: 0 0 12px 16px!important
}
.mobile-submenu li {
	margin: 0;
	padding: 0
}
.mobile-submenu li a {
	display: block;
	color: #646b76!important;
	text-decoration: none;
	font-size: 15px!important;
	font-weight: 600!important;
	padding: 9px 0!important;
	transition: color .2s ease, transform .2s ease
}
.mobile-submenu li a:hover {
	color: var(--red)!important;
	transform: translateX(4px)
}
/* neutralise legacy mobile button rules */
.mobile-parent>button {
	display: none!important
}



/* ==========================================================
   WSS CREATIVE — PREMIUM ENQUIRY POPUP
========================================================== */

.wss-lead-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease,  visibility .35s ease;
}
.wss-lead-popup.is-active {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}
/* ==========================================================
   BACKDROP
========================================================== */

.wss-lead-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 6, 11, .80);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	cursor: default;
}
/* ==========================================================
   MAIN MODAL
========================================================== */

.wss-lead-popup__dialog {
	position: relative;
	z-index: 2;
	width: min(920px, 94vw);
	min-height: 525px;
	display: grid;
	grid-template-columns: 40% 60%;
	background: #fff;
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 0 45px 120px rgba(0, 0, 0, .48);
	opacity: 0;
	transform: translateY(30px)  scale(.965);
	transition: opacity .45s ease,  transform .55s cubic-bezier(.2, .8, .2, 1);
}
.wss-lead-popup.is-active .wss-lead-popup__dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
}
/* ==========================================================
   LEFT SIDE — WHITE
========================================================== */

.wss-lead-popup__info {
	position: relative;
	min-height: 525px;
	padding: 62px 42px 35px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	color: #111;
}
/* VERY SUBTLE GRID */

.wss-lead-popup__info::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(  rgba(12, 14, 20, .035) 1px,  transparent 1px  ),  linear-gradient(  90deg,  rgba(12, 14, 20, .035) 1px,  transparent 1px  );
	background-size: 34px 34px;
	-webkit-mask-image: linear-gradient(  to bottom,  transparent 10%,  #000 65%,  #000 100%  );
	mask-image: linear-gradient(  to bottom,  transparent 10%,  #000 65%,  #000 100%  );
	pointer-events: none;
}
/* SOFT RED GLOW AT BOTTOM */

.wss-lead-popup__info::after {
	content: "";
	position: absolute;
	width: 280px;
	height: 180px;
	left: -100px;
	bottom: -100px;
	background: rgba(255, 25, 55, .10);
	filter: blur(55px);
	border-radius: 50%;
	pointer-events: none;
}
/* ==========================================================
   LEFT TEXT
========================================================== */

.wss-popup-info-content {
	position: relative;
	z-index: 5;
}
.wss-popup-info-content h3 {
	margin: 0 0 8px;
	color: #0b0c0f;
	font-size: 31px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -0.04em;
}
.wss-popup-subtitle {
	margin: 0 0 34px;
	color: #656872;
	font-size: 16px;
	line-height: 1.5;
}
/* SMALL RED LINE */

.wss-popup-info-content::before {
	content: "";
	display: block;
	width: 36px;
	height: 3px;
	margin-bottom: 19px;
	background: #ff1738;
	border-radius: 20px;
}
/* ==========================================================
   CONTACT DETAILS
========================================================== */

.wss-popup-contact {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.wss-popup-contact a {
	display: flex;
	align-items: center;
	gap: 13px;
	color: #191b20;
	font-size: 15px;
	text-decoration: none;
	transition: color .25s ease,  transform .25s ease;
}
.wss-popup-contact a i {
	width: 26px;
	flex: 0 0 26px;
	color: #ff1738;
	font-size: 22px;
	transition: transform .25s ease;
}
.wss-popup-contact a:hover {
	color: #ff1738;
	transform: translateX(3px);
}
.wss-popup-contact a:hover i {
	transform: scale(1.08);
}
/* ==========================================================
   LEFT GRAPHIC
========================================================== */

.wss-popup-support-image {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 245px;
	overflow: hidden;
	pointer-events: none;
}
/* Hide previous image */

.wss-popup-support-image img {
	display: none !important;
}
/* LARGE CREATIVE @ */

.wss-popup-support-image::before {
	content: "@";
	position: absolute;
	right: -16px;
	bottom: -78px;
	font-family: "Manrope",  Arial,  sans-serif;
	font-size: 255px;
	line-height: 1;
	font-weight: 800;
	color: transparent;
	-webkit-text-stroke: 2px rgba(10, 12, 18, .07);
	transform: rotate(-9deg);
}
/* RED DIAGONAL GRAPHIC */

.wss-popup-support-image::after {
	content: "";
	position: absolute;
	width: 230px;
	height: 115px;
	left: -30px;
	bottom: -35px;
	border-top: 2px solid rgba(255, 23, 56, .8);
	border-right: 2px solid rgba(255, 23, 56, .8);
	transform: rotate(-27deg);
	box-shadow: 20px -15px 45px rgba(255, 23, 56, .07);
}
/* ==========================================================
   RIGHT PANEL — PREMIUM DARK WSS
========================================================== */

.wss-lead-popup__form {
	position: relative;
	min-height: 525px;
	padding: 38px 46px 42px;
	overflow: hidden;
	color: #fff;
	background: radial-gradient(  circle at 8% 5%,  rgba(255, 29, 59, .35) 0%,  rgba(255, 29, 59, 0) 34%  ),  radial-gradient(  circle at 100% 100%,  rgba(192, 25, 73, .20) 0%,  transparent 38%  ),  linear-gradient(  145deg,  #18191e 0%,  #0c0d11 47%,  #13141a 100%  );
}
/* RIGHT PANEL GRID */

.wss-lead-popup__form::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(  rgba(255,255,255,.035) 1px,  transparent 1px  ),  linear-gradient(  90deg,  rgba(255,255,255,.035) 1px,  transparent 1px  );
	background-size: 38px 38px;
	-webkit-mask-image: radial-gradient(  circle at center,  #000,  transparent 80%  );
	mask-image: radial-gradient(  circle at center,  #000,  transparent 80%  );
	pointer-events: none;
}
/* RED GLOW */

.wss-lead-popup__form::after {
	content: "";
	position: absolute;
	width: 330px;
	height: 330px;
	left: -180px;
	top: -180px;
	border-radius: 50%;
	background: #ff1738;
	opacity: .20;
	filter: blur(75px);
	pointer-events: none;
}
/* ==========================================================
   CLOSE X
========================================================== */

.wss-popup-close {
	position: absolute;
	top: 15px;
	right: 17px;
	z-index: 30;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.wss-popup-close span {
	position: absolute;
	top: 18px;
	left: 5px;
	width: 28px;
	height: 2px;
	background: rgba(255,255,255,.72);
	transition: background .25s ease,  transform .3s ease;
}
.wss-popup-close span:first-child {
	transform: rotate(45deg);
}
.wss-popup-close span:last-child {
	transform: rotate(-45deg);
}
.wss-popup-close:hover span:first-child {
	background: #ff1738;
	transform: rotate(45deg)  scale(1.13);
}
.wss-popup-close:hover span:last-child {
	background: #ff1738;
	transform: rotate(-45deg)  scale(1.13);
}
/* ==========================================================
   RIGHT HEADING
========================================================== */

.wss-popup-heading {
	position: relative;
	z-index: 5;
	margin-bottom: 25px;
	text-align: left;
}
.wss-popup-heading::before {
	content: "LET'S CREATE SOMETHING GREAT";
	display: block;
	margin-bottom: 10px;
	color: #ff2442;
	font-size: 10px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: .20em;
}
.wss-popup-heading h2 {
	max-width: 430px;
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(34px, 3vw, 44px);
	line-height: .98;
	font-weight: 800;
	letter-spacing: -0.045em;
	-webkit-text-stroke: 0;
	text-shadow: none;
}
.wss-popup-heading p {
	max-width: 410px;
	margin: 0;
	color: rgba(255,255,255,.62);
	font-size: 14px;
	line-height: 1.55;
}
/* ==========================================================
   FORM
========================================================== */

#wssPopupForm {
	position: relative;
	z-index: 5;
}
.wss-popup-form-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr)  minmax(0, 1fr);
	gap: 13px;
}
.wss-popup-field {
	position: relative;
	margin-bottom: 13px;
}
.wss-popup-field input, .wss-popup-field textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	outline: 0;
	border: 1px solid rgba(255,255,255,.11);
	border-radius: 4px;
	background: rgba(255,255,255,.075);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
	transition: background .25s ease,  border-color .25s ease,  box-shadow .25s ease;
}
.wss-popup-field input {
	height: 53px;
	padding: 0 17px;
}
.wss-popup-field textarea {
	min-height: 112px;
	padding: 16px 17px;
	resize: vertical;
}
 .wss-popup-field input::placeholder, .wss-popup-field textarea::placeholder {
 color: rgba(255,255,255,.45);
 opacity: 1;
}
.wss-popup-field input:focus, .wss-popup-field textarea:focus {
	background: rgba(255,255,255,.105);
	border-color: rgba(255, 36, 66, .75);
	box-shadow: 0 0 0 3px rgba(255, 23, 56, .08);
}
/* ==========================================================
   CTA BUTTON
========================================================== */

.wss-popup-submit {
	position: relative;
	width: 100%;
	min-height: 54px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 2px;
	padding: 0 20px;
	overflow: hidden;
	border: 0;
	border-radius: 4px;
	background: #ff1738;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	transition: transform .3s ease,  box-shadow .3s ease;
}
/* BUTTON MAGNETIC-LIKE FILL */

.wss-popup-submit::before {
	content: "";
	position: absolute;
	width: 180%;
	aspect-ratio: 1;
	left: -40%;
	top: 100%;
	border-radius: 50%;
	background: #fff;
	transition: transform .55s cubic-bezier(.7, 0, .2, 1);
	transform: scale(0);
}
.wss-popup-submit span, .wss-popup-submit i {
	position: relative;
	z-index: 2;
	transition: color .3s ease,  transform .3s ease;
}
.wss-popup-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 13px 35px rgba(255,23,56,.25);
}
.wss-popup-submit:hover::before {
	transform: scale(1);
}
.wss-popup-submit:hover span, .wss-popup-submit:hover i {
	color: #111;
}
.wss-popup-submit:hover i {
	transform: translate(4px, -4px);
}
/* ==========================================================
   BODY LOCK
========================================================== */

body.wss-popup-open {
	overflow: hidden;
}


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

@media (max-width: 991.98px) {
.wss-lead-popup__dialog {
	width: min(790px, 95vw);
	grid-template-columns: 38% 62%;
}
.wss-lead-popup__info {
	padding: 55px 28px 30px;
}
.wss-popup-info-content h3 {
	font-size: 26px;
}
.wss-lead-popup__form {
	padding: 38px 31px 34px;
}
}


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

@media (max-width: 767.98px) {
.wss-lead-popup {
	padding: 12px;
	overflow-y: auto;
}
.wss-lead-popup__dialog {
	display: block;
	width: 100%;
	max-width: 500px;
	min-height: auto;
	max-height: calc(100vh - 24px);
	overflow-y: auto;
}
/* LEFT */

.wss-lead-popup__info {
	min-height: auto;
	padding: 24px 22px 22px;
}
.wss-popup-info-content::before {
	margin-bottom: 13px;
}
.wss-popup-info-content h3 {
	font-size: 23px;
}
.wss-popup-subtitle {
	margin-bottom: 15px;
	font-size: 14px;
}
.wss-popup-contact {
	gap: 8px;
}
.wss-popup-contact a {
	font-size: 13px;
}
.wss-popup-contact a i {
	font-size: 18px;
}
.wss-popup-support-image {
	display: none;
}
/* RIGHT */

.wss-lead-popup__form {
	min-height: auto;
	padding: 38px 20px 24px;
}
.wss-popup-heading {
	margin-bottom: 18px;
}
.wss-popup-heading::before {
	font-size: 8px;
}
.wss-popup-heading h2 {
	font-size: 30px;
}
.wss-popup-heading p {
	font-size: 13px;
}
.wss-popup-form-row {
	grid-template-columns: 1fr;
	gap: 0;
}
.wss-popup-field {
	margin-bottom: 10px;
}
.wss-popup-field input {
	height: 47px;
}
.wss-popup-field textarea {
	min-height: 82px;
}
.wss-popup-submit {
	min-height: 49px;
}
.wss-popup-close {
	top: 8px;
	right: 8px;
}
}


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

@media (max-width: 420px) {
.wss-lead-popup {
	padding: 7px;
}
.wss-lead-popup__dialog {
	max-height: calc(100vh - 14px);
}
.wss-lead-popup__info {
	padding: 19px 17px 17px;
}
.wss-lead-popup__form {
	padding: 36px 16px 19px;
}
.wss-popup-heading h2 {
	font-size: 27px;
}
}

/* =========================================================
   MOBILE MENU SUBMENU - CUSTOM TOGGLE
   Added: no Bootstrap collapse IDs required
========================================================= */

.mobile-nav-list .mobile-parent-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.mobile-nav-list .mobile-parent-link i {
	flex: 0 0 auto;
	font-size: 16px;
	transition: transform .35s cubic-bezier(.4, 0, .2, 1),  color .3s ease;
}
/* SUBMENU */

.mobile-nav-list .mobile-submenu {
	display: none;
	max-height: 0;
	overflow: hidden;
	margin: 0;
	padding: 0;
	opacity: 0;
	list-style: none;
	transition: max-height .45s cubic-bezier(.4, 0, .2, 1),  opacity .3s ease,  padding .4s ease;
}
/* OPEN SUBMENU */

.mobile-nav-list .mobile-parent.is-open > .mobile-submenu {
	max-height: 600px;
	padding-top: 12px;
	padding-bottom: 14px;
	opacity: 1;
	display: block;
}
/* PLUS ROTATION */

.mobile-nav-list .mobile-parent.is-open > .mobile-parent-link i {
	transform: rotate(45deg);
	color: var(--wss-red, #ff1738);
}
/* SUBMENU LINKS */

.mobile-nav-list .mobile-submenu > li > a {
	display: block;
	padding: 8px 0 8px 16px;
	font-size: 14px;
	font-weight: 500;
	opacity: .65;
	transition: opacity .3s ease,  color .3s ease,  transform .3s ease;
}
.mobile-nav-list .mobile-submenu > li > a:hover {
	opacity: 1;
	color: var(--wss-red, #ff1738);
	transform: translateX(4px);
}
.offcanvas{
	z-index: 1050;
}


/* ==========================================================
   INNER PAGES — ADDED AFTER HOMEPAGE STYLES. DO NOT MERGE ABOVE.
========================================================== */
.inner-hero {
	position: relative;
	min-height: 610px;
	display: flex;
	align-items: end;
	padding: 120px 0 78px;
	background: #0b1018;
	color: #fff;
	overflow: hidden
}
.inner-hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8,12,18,.94) 0%, rgba(8,12,18,.75) 45%, rgba(8,12,18,.25) 100%), var(--inner-bg) center/cover no-repeat;
	transform: scale(1.03)
}
.inner-hero:after {
	content: "";
	position: absolute;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(255,31,61,.28);
	border-radius: 50%;
	right: -120px;
	bottom: -180px;
	box-shadow: 0 0 0 80px rgba(255,31,61,.035), 0 0 0 160px rgba(255,31,61,.02)
}
.inner-hero .shell {
	position: relative;
	z-index: 2
}
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #ff5269;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .18em;
	text-transform: uppercase
}
.eyebrow:before {
	content: "";
	width: 32px;
	height: 2px;
	background: var(--red)
}
.inner-hero h1 {
	font-size: clamp(52px, 7vw, 96px);
	line-height: .94;
	letter-spacing: -.065em;
	max-width: 900px;
	margin: 18px 0 24px;
	font-weight: 800
}
.inner-hero p {
	font-size: 18px;
	line-height: 1.7;
	color: rgba(255,255,255,.7);
	max-width: 680px
}
.inner-hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 30px
}
.inner-btn-outline {
	border: 1px solid rgba(255,255,255,.35);
	color: #fff;
	border-radius: 999px;
	padding: 14px 22px;
	text-decoration: none;
	font-weight: 700
}
.inner-section {
	padding: 110px 0
}
.inner-section.soft {
	background: var(--soft)
}
.inner-kicker {
	color: var(--red);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: 12px
}
.inner-title {
	font-size: clamp(38px, 5vw, 66px);
	line-height: 1;
	letter-spacing: -.055em;
	font-weight: 800;
	margin: 14px 0 24px
}
.inner-copy {
	font-size: 17px;
	line-height: 1.85;
	color: var(--muted)
}
.inner-copy p {
	margin-bottom: 18px
}
.feature-media {
	min-height: 520px;
	border-radius: 28px;
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center;
	box-shadow: 0 30px 80px rgba(17,24,39,.12)
}
.feature-media:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.5))
}
.feature-badge {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	background: #fff;
	border-radius: 18px;
	padding: 18px 20px;
	box-shadow: 0 16px 50px rgba(0,0,0,.15);
	max-width: 230px
}
.feature-badge i {
	color: var(--red);
	font-size: 26px
}
.feature-badge strong {
	display: block;
	margin-top: 7px;
	color: #000;
}
.feature-badge span{
	color: #000;
} 
.inner-content-row {
	align-items: center
}
.inner-content-row:nth-child(even) .content-order {
	order: 2
}
.inner-content-row:nth-child(even) .media-order {
	order: 1
}
.service-index {
	font-size: 12px;
	color: var(--red);
	font-weight: 800;
	letter-spacing: .15em
}
.benefit-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 38px
}
.benefit-card {
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 20px;
	background: #fff;
	transition: .35s
}
.benefit-card:hover {
	transform: translateY(-7px);
	box-shadow: 0 22px 55px rgba(17,24,39,.08)
}
.benefit-card i {
	font-size: 25px;
	color: var(--red)
}
.benefit-card h5 {
	font-weight: 800;
	margin: 20px 0 10px
}
.inner-cta {
	margin: 90px 5.5vw 90px;
	padding: 70px;
	border-radius: 30px;
	background: #101722;
	color: #fff;
	position: relative;
	overflow: hidden
}
.inner-cta:after {
	content: "";
	position: absolute;
	width: 400px;
	height: 400px;
	background: var(--red);
	filter: blur(110px);
	opacity: .2;
	right: -180px;
	top: -180px
}
.inner-cta>* {
	position: relative;
	z-index: 2
}
.inner-cta h2 {
	font-size: clamp(38px, 5vw, 64px);
	font-weight: 800;
	letter-spacing: -.05em;
	max-width: 700px
}
.services-listing {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px
}
.listing-card {
	display: block;
	text-decoration: none;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	transition: .35s
}
.listing-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 25px 60px rgba(17,24,39,.1);
	color: var(--ink)
}
.listing-card .pic {
	height: 230px;
	background-size: cover;
	background-position: center;
	overflow: hidden
}
.listing-card .body {
	padding: 26px
}
.listing-card .body i {
	color: var(--red);
	font-size: 24px
}
.listing-card h3 {
	font-size: 22px;
	font-weight: 800;
	margin: 16px 0 8px
}
.case-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px
}
.case-card {
	position: relative;
	display: block;
	min-height: 520px;
	border-radius: 28px;
	overflow: hidden;
	color: #fff;
	text-decoration: none;
	background-size: cover;
	background-position: center
}
.case-card:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 30%, rgba(7,10,15,.88))
}
.case-card .case-copy {
	position: absolute;
	z-index: 2;
	left: 32px;
	right: 32px;
	bottom: 30px
}
.case-card h3 {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -.04em
}
.contact-panel {
	background: #101722;
	color: #fff;
	border-radius: 28px;
	padding: 42px
}
.contact-panel a {
	color: #fff;
	text-decoration: none
}
.contact-form .form-control {
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 15px 16px;
	box-shadow: none
}
.contact-form .form-control:focus {
	border-color: var(--red)
}
@media(max-width:991px) {
.benefit-grid, .services-listing {
	grid-template-columns: repeat(2, 1fr)
}
.inner-hero {
	min-height: 520px
}
.inner-content-row:nth-child(even) .content-order, .inner-content-row:nth-child(even) .media-order {
	order: initial
}
.feature-media {
	min-height: 420px
}
}
@media(max-width:767px) {
.inner-section {
	padding: 75px 0
}
.benefit-grid, .services-listing, .case-grid {
	grid-template-columns: 1fr
}
.inner-hero {
	padding: 90px 0 55px;
	min-height: 500px
}
.inner-hero h1 {
	font-size: 50px
}
.feature-media {
	min-height: 340px
}
.inner-cta {
	padding: 40px 25px;
	margin-bottom: 60px
}
.case-card {
	min-height: 420px
}
}
/* ==========================================================
   INNER PAGES V2 — CREATIVE SECTION SYSTEM
   Added after original inner-page styles. Homepage CSS untouched.
========================================================== */
.section-graphic-light, .section-graphic-soft, .section-graphic-dark, .section-graphic-red {
	position: relative;
	overflow: hidden
}
.section-graphic-light {
	background: #fff
}
.section-graphic-soft {
	background: #f5f6f8
}
.section-graphic-dark {
	background: #101722;
	color: #fff
}
.section-graphic-red {
	background: linear-gradient(135deg, #e90e31 0%, #b9082a 100%);
	color: #fff
}
.section-graphic-light:before, .section-graphic-soft:before, .section-graphic-dark:before, .section-graphic-red:before {
	content: "";
	position: absolute;
	width: 520px;
	height: 520px;
	border: 1px solid rgba(255,31,61,.12);
	border-radius: 50%;
	right: -260px;
	top: -260px;
	box-shadow: 0 0 0 80px rgba(255,31,61,.025), 0 0 0 160px rgba(255,31,61,.018);
	pointer-events: none
}
.section-graphic-dark:before, .section-graphic-red:before {
	border-color: rgba(255,255,255,.12);
	box-shadow: 0 0 0 80px rgba(255,255,255,.025), 0 0 0 160px rgba(255,255,255,.018)
}
.section-graphic-light>.shell, .section-graphic-soft>.shell, .section-graphic-dark>.shell, .section-graphic-red>.shell {
	position: relative;
	z-index: 2
}
.light-copy {
	color: rgba(255,255,255,.68)
}
.light-kicker {
	color: #fff
}
.inner-cta-graphic {
	background: linear-gradient(120deg, #101722 0%, #101722 65%, #26121b 100%)
}
.inner-cta-graphic:before {
	content: "WSS";
	position: absolute;
	right: 3%;
	bottom: -35%;
	font-size: 250px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.08em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,.06);
	transform: rotate(-8deg)
}
.inner-cta-graphic:after {
	width: 520px;
	height: 520px;
	right: -180px;
	top: -250px;
	opacity: .18
}
.inner-cta-graphic p {
	max-width: 560px;
	color: rgba(255,255,255,.6);
	font-size: 17px
}
/* About */
.about-collage {
	position: relative;
	min-height: 570px
}
.about-photo {
	position: absolute;
	background-size: cover;
	background-position: center;
	border-radius: 26px
}
.about-photo-main {
	inset: 0 70px 55px 0
}
.about-photo-small {
	width: 230px;
	height: 260px;
	right: 0;
	bottom: 0;
	border: 8px solid #fff
}
.about-orbit {
	position: absolute;
	right: 14px;
	top: 18px;
	width: 125px;
	height: 125px;
	border-radius: 50%;
	background: #ff1f3d;
	color: #fff;
	display: grid;
	place-content: center;
	text-align: center;
	font-size: 26px;
	font-weight: 800;
	box-shadow: 0 20px 50px rgba(255,31,61,.25);
	animation: wssFloat 4s ease-in-out infinite
}
.about-orbit span {
	display: block;
	font-size: 9px;
	letter-spacing: .22em
}
.about-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: transparent;
	margin-top: 70px;
	border: none;
	border-radius: 22px;
	overflow: hidden
}
.about-stats div {
	background: transparent;
	padding: 15px
}
.about-stats strong {
	display: block;
	font-size: 48px;
	letter-spacing: -.06em
}
.about-stats span {
	color: var(--muted);
	font-size: 13px
}
.process-visual {
	height: 420px;
	position: relative;
	display: grid;
	place-items: center
}
.process-visual>span {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 180px;
	font-weight: 800;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,.08)
}
.process-visual i {
	font-size: 70px;
	color: #ff1f3d;
	z-index: 2
}
.process-ring {
	position: absolute;
	width: 280px;
	height: 280px;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 50%;
	box-shadow: 0 0 0 50px rgba(255,255,255,.025), 0 0 0 100px rgba(255,255,255,.015);
	animation: wssSpin 18s linear infinite
}
.process-ring:before {
	content: "";
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff1f3d;
	top: 22px;
	left: 45px;
	box-shadow: 0 0 30px #ff1f3d
}
.about-service-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid rgba(255,255,255,.2);
	border-left: 1px solid rgba(255,255,255,.2)
}
.about-service-grid a {
	min-height: 180px;
	padding: 28px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid rgba(255,255,255,.2);
	border-bottom: 1px solid rgba(255,255,255,.2);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	transition: .3s
}
.about-service-grid a:hover {
	background: #fff;
	color: #111;
	transform: translateY(-4px)
}
.about-service-grid i {
	font-size: 32px
}
.about-service-grid span {
	font-weight: 800;
	font-size: 18px
}
.about-quote-card {
	position: relative;
	background: #101722;
	color: #fff;
	border-radius: 28px;
	padding: 50px;
	overflow: hidden
}
.about-quote-card>span {
	position: absolute;
	right: 20px;
	top: -30px;
	font-size: 180px;
	color: #ff1f3d;
	opacity: .16;
	font-family: Georgia
}
.about-quote-card h3 {
	font-size: 42px;
	line-height: 1.05;
	letter-spacing: -.04em;
	position: relative
}
.about-quote-card em {
	font-style: normal;
	color: #ff1f3d
}
.about-quote-card p {
	color: rgba(255,255,255,.6);
	margin: 25px 0
}
.about-quote-card a {
	color: #fff;
	text-decoration: none;
	font-weight: 800
}
/* Contact */
.contact-info-creative {
	height: 100%;
	background: #101722;
	color: #fff;
	border-radius: 28px;
	padding: 44px;
	position: relative;
	overflow: hidden
}
.contact-info-creative:after {
	content: "@";
	position: absolute;
	right: -35px;
	bottom: -80px;
	font-size: 260px;
	font-weight: 800;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,.07);
	transform: rotate(-12deg)
}
.contact-info-creative h2 {
	font-size: 46px;
	letter-spacing: -.05em;
	margin: 12px 0 18px
}
.contact-info-creative>p {
	color: rgba(255,255,255,.62);
	line-height: 1.75
}
.contact-link-stack {
	display: grid;
	gap: 12px;
	margin: 30px 0
}
.contact-link-stack a {
	display: flex;
	align-items: center;
	gap: 14px;
	color: #fff;
	text-decoration: none;
	padding: 16px;
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 14px;
	position: relative;
	z-index: 2
}
.contact-link-stack i {
	color: #ff1f3d;
	font-size: 22px
}
.contact-link-stack small {
	display: block;
	color: rgba(255,255,255,.45);
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .12em
}
.contact-offices {
	position: relative;
	z-index: 2;
	border-top: 1px solid rgba(255,255,255,.12);
	padding-top: 22px
}
.contact-offices>div {
	display: flex;
	gap: 14px
}
.contact-offices>div>span {
	color: #ff1f3d;
	font-size: 11px;
	font-weight: 800
}
.contact-offices p {
	font-size: 0.913rem;
	color: rgba(255,255,255,.85)
}
.contact-form-shell {
	height: 100%;
	background: linear-gradient(145deg, #f7f7f8, #fff);
	border: 1px solid var(--line);
	border-radius: 28px;
	padding: 44px;
	box-shadow: 0 30px 80px rgba(17,24,39,.08);
	position: relative;
	overflow: hidden
}
.contact-form-shell:before {
	content: "";
	position: absolute;
	width: 220px;
	height: 220px;
	background: #ff1f3d;
	border-radius: 50%;
	filter: blur(100px);
	opacity: .08;
	right: -80px;
	top: -80px
}
.contact-form-shell h2 {
	font-size: 42px;
	letter-spacing: -.05em;
	margin: 12px 0 28px
}
.form-number {
	color: #ff1f3d;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em
}
.contact-form label {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 7px
}
.contact-form .form-control {
	background: #fff;
	border: 1px solid #dfe2e7;
	border-radius: 12px;
	padding: 16px
}
.contact-form textarea.form-control {
	min-height: 150px
}
.contact-map-section {
	padding: 100px 0;
	background: #eceff2;
	position: relative;
	overflow: hidden
}
.map-heading {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 30px;
	margin-bottom: 35px
}
.map-heading p {
	color: var(--muted)
}
.map-wrap {
	height: 520px;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(17,24,39,.12)
}
.map-wrap iframe {
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(1) contrast(.92)
}
/* Case listing */
.case-list-intro {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 40px;
	margin-bottom: 45px
}
.case-list-intro>p {
	max-width: 480px;
	color: var(--muted)
}
.case-grid-3 {
	grid-template-columns: repeat(3, 1fr);
	gap: 22px
}
.case-card-v2 {
	min-height: 0;
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
	border-radius: 22px;
	transition: .35s
}
.case-card-v2:before {
	display: none
}
.case-card-v2:hover {
	color: var(--ink);
	transform: translateY(-8px);
	box-shadow: 0 25px 65px rgba(17,24,39,.1)
}
.case-card-v2 .case-image {
	height: 300px;
	background-size: cover;
	background-position: center;
	transition: .55s
}
.case-card-v2:hover .case-image {
	transform: scale(1.035)
}
.case-card-v2 .case-card-body {
	padding: 24px;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px
}
.case-card-v2 h3 {
	font-size: 25px;
	margin: 7px 0 0
}
.case-type {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #ff1f3d;
	font-weight: 800
}
.case-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #101722;
	color: #fff;
	flex: 0 0 auto;
	transition: .3s
}
.case-card-v2:hover .case-arrow {
	background: #ff1f3d;
	transform: rotate(45deg)
}
/* Case detail */
.case-detail-image {
	height: 600px;
	border-radius: 28px;
	background-size: cover;
	background-position: center;
	margin: 45px 0
}
.case-detail-copy-block {
	max-width: 720px
}
.case-detail-copy-block h3 {
	font-size: 40px;
	letter-spacing: -.04em
}
.case-meta-card {
	position: sticky;
	top: 120px;
	background: #101722;
	color: #fff;
	border-radius: 24px;
	padding: 34px;
	overflow: hidden
}
.case-meta-card:after {
	content: "";
	position: absolute;
	width: 160px;
	height: 160px;
	background: #ff1f3d;
	border-radius: 50%;
	filter: blur(80px);
	opacity: .18;
	right: -70px;
	bottom: -70px
}
.case-meta-label {
	color: #ff5269;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .14em
}
.case-meta-card h3 {
	font-size: 30px;
	margin: 12px 0 25px
}
.case-meta-card dl {
	position: relative;
	z-index: 2
}
.case-meta-card dl div {
	padding: 14px 0;
	border-top: 1px solid rgba(255,255,255,.1)
}
.case-meta-card dt {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: rgba(255,255,255,.4)
}
.case-meta-card dd {
	margin: 5px 0 0
}
.case-site-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ff1f3d;
	color: #fff;
	text-decoration: none;
	padding: 15px 17px;
	border-radius: 12px;
	font-weight: 800;
	position: relative;
	z-index: 2
}
.dark-benefit {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.1);
	color: #fff
}
.dark-benefit p {
	color: rgba(255,255,255,.55)
}
.related-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	margin-bottom: 35px
}
.related-nav {
	display: flex;
	gap: 8px
}
.related-nav button {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--line);
	background: #fff
}
.related-case {
	color: var(--ink);
	text-decoration: none;
	display: block
}
.related-img {
	height: 330px;
	border-radius: 22px;
	background-size: cover;
	background-position: center;
	margin-bottom: 18px
}
.related-case span {
	font-size: 11px;
	color: #ff1f3d;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-weight: 800
}
.related-case h3 {
	font-size: 25px;
	font-weight: 800;
	margin-top: 6px
}
/* Service/info page alternating content sections */
.service-content-sections {
	background: #f4f5f7;
	padding: 80px 0
}
.service-content-sections .inner-content-row {
	position: relative;
	background: #fff;
	border-radius: 28px;
	padding: 42px;
	margin: 0 0 34px!important;
	overflow: hidden;
	box-shadow: 0 18px 55px rgba(17,24,39,.05)
}
.service-content-sections .inner-content-row:nth-child(even) {
	background: #101722;
	color: #fff
}
.service-content-sections .inner-content-row:nth-child(even) .inner-copy {
	color: rgba(255,255,255,.62)
}
.service-content-sections .inner-content-row:nth-child(even):after {
	content: "";
	position: absolute;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: #ff1f3d;
	filter: blur(110px);
	opacity: .12;
	right: -80px;
	top: -80px
}
.service-content-sections .inner-content-row>* {
	position: relative;
	z-index: 2
}
@keyframes wssFloat {
50% {
transform:translateY(-10px)
}
}
@keyframes wssSpin {
to {
transform:rotate(360deg)
}
}
@media(max-width:991px) {
.about-service-grid {
	grid-template-columns: repeat(2, 1fr)
}
.case-grid-3 {
	grid-template-columns: repeat(2, 1fr)
}
.about-collage {
	min-height: 480px
}
.case-meta-card {
	position: relative;
	top: auto
}
.service-content-sections .inner-content-row {
	padding: 28px
}
.map-heading, .case-list-intro {
	align-items: flex-start;
	flex-direction: column
}
}
@media(max-width:767px) {
.about-stats, .about-service-grid, .case-grid-3 {
	grid-template-columns: 1fr
}
.about-stats {
	gap: 0
}
.about-collage {
	min-height: 390px
}
.about-photo-main {
	inset: 0 35px 40px 0
}
.about-photo-small {
	width: 160px;
	height: 180px
}
.about-orbit {
	width: 90px;
	height: 90px;
	font-size: 19px
}
.process-visual {
	height: 300px
}
.contact-info-creative, .contact-form-shell {
	padding: 28px
}
.contact-info-creative h2, .contact-form-shell h2 {
	font-size: 34px
}
.map-wrap {
	height: 400px
}
.case-card-v2 .case-image {
	height: 260px
}
.case-detail-image {
	height: 380px
}
.inner-cta-graphic:before {
	font-size: 150px
}
.service-content-sections {
	padding: 55px 0
}
.service-content-sections .inner-content-row {
	padding: 20px 8px 28px
}
}

.site-header .nav-link.active{
	color: var(--red) !important;
}






/* ==========================================================
   WSS CREATIVE - PROFESSIONAL DIGITAL SERVICES SECTION
   New homepage section - isolated styles
========================================================== */

.wss-intro-section {
    position: relative;
    isolation: isolate;
    padding: 115px 0 95px;
    background: #10151f;
    color: #fff;
    overflow: hidden;
}

/* Ambient glows */

.wss-intro-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(90px);
}

.wss-intro-glow-one {
    width: 450px;
    height: 450px;
    top: -200px;
    right: -160px;
    background: rgba(255, 27, 66, .12);
}

.wss-intro-glow-two {
    width: 380px;
    height: 380px;
    bottom: -170px;
    left: -150px;
    background: rgba(168, 39, 126, .12);
}

/* Subtle grid */

.wss-intro-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);

    background-size: 65px 65px;

    mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 30%,
        #000 75%,
        transparent
    );
}

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

.wss-intro-heading {
    margin-bottom: 65px;
}

.wss-intro-eyebrow {
    display: inline-block;
    margin-bottom: 19px;

    color: #ff2346;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.wss-intro-heading h2 {
    max-width: 880px;
    margin: 0 auto 20px;

    color: #fff;

    font-size: clamp(38px, 4.5vw, 68px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.055em;
}

.wss-intro-heading h2 span {
    display: block;
    color: #ff2346;
}

.wss-intro-heading > p {
    margin: 0;
    color: rgba(255,255,255,.58);
    font-size: 17px;
    line-height: 1.6;
}

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

.wss-intro-content {
    position: relative;
    z-index: 2;
}

.wss-intro-text {
    height: 100%;
}

.wss-intro-text p {
    margin: 0 0 24px;

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

    font-size: 15px;
    font-weight: 400;
    line-height: 1.95;
}

.wss-intro-text p:last-child {
    margin-bottom: 0;
}

/* Links inside content */

.wss-intro-text p a {
    color: #fff;
    font-weight: 650;
    text-decoration: none;

    border-bottom: 1px solid rgba(255, 35, 70, .65);
    transition:
        color .3s ease,
        border-color .3s ease;
}

.wss-intro-text p a:hover {
    color: #ff2346;
    border-color: #ff2346;
}

/* ==========================================================
   SOCIAL LINKS
========================================================== */

.wss-intro-social {
    margin-top: 34px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.10);
}

.wss-intro-social > span {
    display: block;
    margin-bottom: 16px;

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

    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.wss-intro-social-links {
    display: flex;
    align-items: center;
    gap: 11px;
}

.wss-intro-social-links a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 43px;
    height: 43px;

    color: #fff;
    font-size: 17px;
    text-decoration: none;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;

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

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

.wss-intro-social-links a:hover {
    background: #ff2346;
    border-color: #ff2346;
    transform: translateY(-4px);
}

/* ==========================================================
   BOTTOM CTA
========================================================== */

.wss-intro-bottom {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    margin-top: 70px;
    padding: 32px 38px;

    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 18px;

    backdrop-filter: blur(12px);
}

.wss-intro-bottom-text > span {
    display: block;
    margin-bottom: 9px;

    color: #ff2346;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
}

.wss-intro-bottom-text h3 {
    margin: 0;
    color: #fff;

    font-size: clamp(22px, 2.2vw, 31px);
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.035em;
}

/* Magnetic-style fill button */

.wss-intro-btn {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    flex: 0 0 auto;

    min-height: 54px;
    padding: 0 27px;

    overflow: hidden;

    background: #ff1738;
    border: 1px solid #ff1738;
    border-radius: 50px;

    color: #fff;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;

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

.wss-intro-btn::before {
    content: "";
    position: absolute;

    width: 220%;
    aspect-ratio: 1;

    top: 100%;
    left: -60%;

    background: #fff;
    border-radius: 50%;

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

.wss-intro-btn span,
.wss-intro-btn i {
    position: relative;
    z-index: 2;
    transition:
        color .3s ease,
        transform .3s ease;
}

.wss-intro-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(255,23,56,.22);
}

.wss-intro-btn:hover::before {
    transform: scale(1);
}

.wss-intro-btn:hover span,
.wss-intro-btn:hover i {
    color: #111;
}

.wss-intro-btn:hover i {
    transform: translate(4px, -4px);
}

/* ==========================================================
   OUTLINED BACKGROUND TYPOGRAPHY
========================================================== */

.wss-intro-outline-text {
    position: absolute;
    bottom: -55px;
    left: 50%;
    z-index: 0;

    width: 100%;

    transform: translateX(-50%);

    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.045);

    font-size: clamp(90px, 15vw, 240px);
    font-weight: 900;
    line-height: 1;

    letter-spacing: -.075em;
    text-align: center;
    white-space: nowrap;

    pointer-events: none;
    user-select: none;
}

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

@media (max-width: 991.98px) {
    .wss-intro-section {
        padding: 85px 0 75px;
    }

    .wss-intro-heading {
        margin-bottom: 45px;
    }

    .wss-intro-text p {
        font-size: 15px;
        line-height: 1.85;
    }

    .wss-intro-bottom {
        margin-top: 45px;
    }
}

@media (max-width: 767.98px) {
    .wss-intro-section {
        padding: 65px 0 55px;
    }

    .wss-intro-heading {
        margin-bottom: 35px;
    }

    .wss-intro-heading h2 {
        font-size: clamp(32px, 8vw, 43px);
    }

    .wss-intro-heading > p {
        font-size: 15px;
    }

    .wss-intro-text p {
        margin-bottom: 18px;
        font-size: 14px;
        line-height: 1.85;
    }

    .wss-intro-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 23px;

        margin-top: 40px;
        padding: 25px;
        border-radius: 14px;
    }

    .wss-intro-btn {
        width: 100%;
    }

    .wss-intro-outline-text {
        bottom: -20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wss-intro-btn,
    .wss-intro-btn::before,
    .wss-intro-btn i,
    .wss-intro-social-links a {
        transition: none;
    }
}





/* ==========================================================
   TESTIMONIALS PAGE — equal-height responsive review grid
   Added for testimonials.html; existing homepage slider untouched.
========================================================== */
.wss-testimonial-grid-section{background:#fff}
.wss-testimonial-grid-heading{max-width:780px;margin-bottom:46px}
.wss-testimonial-grid-heading p{font-size:17px;color:var(--muted);line-height:1.75}
.wss-testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.wss-testimonial-grid-item{min-width:0;display:flex}
.wss-testimonial-grid-item .testimonial-card{width:100%;height:100%;min-height:330px;display:flex;flex-direction:column}
.wss-testimonial-grid-item .testimonial-copy{max-height:112px;overflow:hidden;transition:max-height .35s ease}
.wss-testimonial-grid-item .testimonial-card.is-expanded .testimonial-copy{max-height:none}
.wss-testimonial-grid-item .testimonial-more[hidden]{display:none!important}
.wss-testimonial-grid-item .testimonial-more{cursor:pointer}
.wss-testimonial-grid-item .testimonial-bottom{margin-top:auto}
@media(max-width:991px){.wss-testimonial-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575px){.wss-testimonial-grid{grid-template-columns:1fr;gap:18px}.wss-testimonial-grid-heading{margin-bottom:30px}}



.feature-media iframe{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.inner-copy p a,
.inner-copy p a:hover{
	color: #ff1f3d;
}
.feature-media.for-video{
	background: transparent;
	box-shadow: none !important;
}
.feature-media.for-video:after{
	display: none !important;
}
.wss-testimonial-grid-heading p a,
.wss-testimonial-grid-heading p a:hover{
	color: #ff1f3d;
}

.blog-related{
	background: transparent !important;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.case-meta-card.blog-related h2{
	font-weight: 700;
	font-size: 35px;
	color: #000;
}
.case-meta-card.blog-related h3{
	font-size: 1.25rem;
	margin-bottom: 10px;
}
.case-meta-card.blog-related .case-card-v2 .case-image{
	height: 220px;
}




@media only screen and (min-width: 1200px) and (max-width: 1549px) {
.header-actions .btn{
	display: none !important;
}
.ph-text{
	display: none !important;
}
.site-header .navbar-nav{
	gap: 0rem !important;
}

}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
.navbar-expand-lg .navbar-collapse {
   display: none !important;
}
.navbar-toggler {
	background: rgba(255,255,255,.94)
}
.navbar-expand-lg .navbar-toggler {
   display: block;
}
.about-top-section{
	text-align: center;
}
.about-lead{
	max-width: 100%;
}
.about-actions{
	justify-content: center;
}
.hero {
  min-height: inherit;
}
.min-vh-75 {
  min-height: auto;
}

}

@media only screen and (min-width: 768px) and (max-width: 991px) {
}

@media only screen and (max-width: 991px) {

.section {
  padding: 50px 0;
}	
.hero-copy{
	padding-top: 30px;
	text-align: center;
	padding-bottom: 0;
}
.eyebrow:before{
	display: none;
}
.hero-copy > *{
	justify-content: center;
}
.hero-wash {
  background: rgba(0,0,0,.50);
}
.section-head{
	text-align: center;
}
.work-section {
    padding: 50px 0 !important;
 }
 .about-premium{
 	text-align: center;
 }
 .about-lead {
  max-width: 100%;
  margin-top: 15px;
}
.about-actions{
	align-items: center;
	justify-content: center;
}
.about-stats{
	grid-template-columns: repeat(3, 1fr);
	margin-top: 45px;
}
.about-stats strong {
  font-size: 2rem;
}
.about-values{
	margin-top: 45px;
}
.about-values article{
	text-align: left;
}
.process-section{
	text-align: center;
}
.process-step .picon{
	margin-left: auto;
	margin-right: auto;
}
.story-card{
	text-align: left;
}
.testimonial-head{
	text-align: center;
	align-items: center !important;
}
.client-strip{
	text-align: center;
}
.cta{
	padding: 50px 0;
}
footer{
	text-align: center;
	padding: 50px 0 20px;
}
.footer-box-left-align{
	text-align: left;
}
.hero-copy p{
	max-width: 100%;
}
.hero {
  min-height: inherit;
}
.min-vh-75 {
  min-height: auto;
}
.footer-box-last-left-align{
	text-align: left;
}
.inner-hero{
	text-align: center;
}
.inner-hero-actions{
	justify-content: center;
}
.inner-section{
	padding: 50px 0;
}
.inner-section.soft{
	text-align: center;
}
.inner-hero h1, .inner-hero p{
	max-width: 100%;
}
.inner-cta{
	text-align: center;
	margin: 50px 5.5vw 50px;
}
.about-intro, .about-meeting, .about-services, .about-startups{
	text-align: center;
}
.case-list-intro{
	text-align: center;
	gap: 0px;
	align-items: center;
}
.case-detail-overview, .case-outcomes{
	text-align: center;
}
.social-icons-box{
	justify-content: center;
}
.wss-intro-section {
    padding: 50px 0;
    text-align: center;
}
.wss-clients-section{
	text-align: center;
}
.feature-media iframe{
	position: relative;
	height: auto;
}
.feature-media.for-video{
	min-height: inherit;
	border-radius: 0;
}
.blog-related .case-card-v2 .case-card-body{
	text-align: left;
}

}

@media only screen and (max-width: 767px) {

.project-heading > div:first-child {
  max-width: 100%;
  text-align: center;
}
.wss-lead-popup__info{
	display: none !important;
}
.project-heading{
	align-items: center;
}
.footer-box-last-left-align{
	text-align: center;
}
.feature-badge{
	left: 0;
	right: 0;
	margin-right: auto;
	margin-left: auto;
}
.service-content-sections .inner-content-row{
	text-align: center;
}
.inner-cta{
	text-align: center;
	margin: 50px 5.5vw 50px;
}
.about-service-grid {
    grid-template-columns: repeat(2, 1fr);
}
.blog-related{
	padding: 0;
	margin-top: 2rem;
}

}