/* Services archive and single service styles. */

.service-experience {
	position: relative;
	overflow: hidden;
	min-height: 70vh;
	margin: 0;
	background: #f8f9ff;
}

.service-experience::before,
.service-experience::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	filter: blur(2px);
	pointer-events: none;
}

.service-experience::before {
	width: min(50vw, 720px);
	height: min(50vw, 720px);
	top: -30%;
	right: -12%;
	background: rgba(117, 62, 255, 0.13);
}

.service-experience::after {
	width: min(36vw, 480px);
	height: min(36vw, 480px);
	bottom: -35%;
	left: -8%;
	background: rgba(0, 187, 215, 0.12);
}

.service-experience__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(430px, 1.18fr);
	align-items: center;
	gap: clamp(30px, 6vw, 100px);
	width: var(--aw-container);
	min-height: 70vh;
	margin: 0 auto;
	padding: clamp(44px, 6vw, 92px) 0;
}

.service-experience__copy {
	display: grid;
	justify-items: start;
	gap: 20px;
}

.service-experience__copy > span {
	color: #673cff;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.service-experience h1 {
	max-width: 650px;
	margin: 0;
	color: #080b15;
	font-family: var(--aw-font-heading);
	font-size: clamp(42px, 5.1vw, 78px);
	font-weight: 900;
	letter-spacing: -0.055em;
	line-height: 0.96;
}

.service-experience__copy p {
	max-width: 530px;
	margin: 0;
	color: #536077;
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 650;
	line-height: 1.65;
}

.service-experience__copy > a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 21px;
	border-radius: 999px;
	background: #17132d;
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	box-shadow: 0 18px 35px rgba(24, 19, 53, 0.18);
}

.service-phones,
.service-experience__visual {
	position: relative;
	min-height: min(52vw, 650px);
}

.service-phones > img,
.service-experience__visual img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.service-phones__glow {
	position: absolute;
	inset: 20% 9% 9% 16%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(210, 95, 255, 0.27), rgba(96, 90, 255, 0.12) 46%, transparent 71%);
	filter: blur(18px);
}

.service-phones__badge {
	position: absolute;
	z-index: 2;
	display: grid;
	place-items: center;
	width: clamp(42px, 4vw, 62px);
	height: clamp(42px, 4vw, 62px);
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.82);
	box-shadow: 0 18px 34px rgba(80, 50, 158, 0.2);
	backdrop-filter: blur(10px);
	animation: service-phone-float 4.8s ease-in-out infinite;
}

.service-phones__badge--heart { top: 27%; left: 9%; color: #f44e87; }
.service-phones__badge--comment { top: 13%; right: 10%; color: #743dff; animation-delay: -1.5s; }
.service-phones__badge--chart { right: 13%; bottom: 17%; color: #ff8d35; animation-delay: -2.8s; }

@keyframes service-phone-float {
	50% { transform: translateY(-13px) rotate(4deg); }
}

/* Web design service: code-led dark showcase. */
.web-code-hero {
	position: relative;
	width: 100%;
	min-height: 1000px;
	margin: 0;
	overflow: hidden;
	background: #07090f;
	color: #f7f9ff;
	isolation: isolate;
}

.web-code-hero::before,
.web-code-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(24px);
	pointer-events: none;
}

.web-code-hero::before {
	top: 12%;
	left: 50%;
	width: min(60vw, 860px);
	height: min(48vw, 620px);
	background: radial-gradient(circle, rgba(65, 76, 255, 0.26), transparent 68%);
	transform: translateX(-50%);
}

.web-code-hero::after {
	right: -12%;
	bottom: -24%;
	width: 48vw;
	height: 48vw;
	background: radial-gradient(circle, rgba(0, 209, 255, 0.14), transparent 68%);
}

.web-code-hero__grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(rgba(143, 163, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 163, 255, 0.08) 1px, transparent 1px);
	background-size: 62px 62px;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.86), transparent 94%);
}

.web-code-hero__inner {
	position: relative;
	width: min(100% - 36px, 1240px);
	margin: 0 auto;
	padding: clamp(76px, 9vw, 132px) 0 48px;
	text-align: center;
}

.web-code-hero__copy {
	position: relative;
	z-index: 3;
	display: grid;
	justify-items: center;
	gap: 18px;
	max-width: 750px;
	margin: 0 auto;
}

.web-code-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px;
	border: 1px solid rgba(123, 139, 255, 0.36);
	border-radius: 999px;
	background: rgba(17, 23, 42, 0.68);
	color: #b9c2ff;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}

.web-code-hero__eyebrow i { color: #6fe3ff; }

.web-code-hero h1 {
	margin: 0;
	color: #fff;
	font-family: var(--aw-font-heading);
	font-size: clamp(42px, 5.4vw, 78px);
	font-weight: 800;
	letter-spacing: -0.062em;
	line-height: 0.98;
}

.web-code-hero__copy p {
	max-width: 610px;
	margin: 0;
	color: rgba(232, 238, 255, 0.76);
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 600;
	line-height: 1.65;
}

.web-code-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 20px;
	border-radius: 999px;
	background: linear-gradient(100deg, #5f5bff, #00b6ef);
	color: #fff;
	font-family: var(--aw-font-heading);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 16px 38px rgba(72, 92, 255, 0.36);
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.web-code-hero__cta:hover,
.web-code-hero__cta:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 44px rgba(72, 92, 255, 0.48); }

.web-code-hero__editor {
	position: relative;
	z-index: 2;
	width: min(100%, 640px);
	margin: clamp(28px, 3vw, 44px) auto 0;
	overflow: hidden;
	border: 1px solid rgba(149, 164, 255, 0.26);
	border-radius: 16px;
	background: linear-gradient(145deg, rgba(19, 25, 47, 0.97), rgba(7, 10, 21, 0.97));
	box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48), 0 0 70px rgba(79, 91, 255, 0.18);
	text-align: left;
}

.web-code-hero__editor-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 43px;
	padding: 0 14px;
	border-bottom: 1px solid rgba(149, 164, 255, 0.14);
	background: rgba(255, 255, 255, 0.025);
}

.web-code-hero__editor-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #fc6682; }
.web-code-hero__editor-bar > span:nth-child(2) { background: #ffce58; }
.web-code-hero__editor-bar > span:nth-child(3) { background: #54dc9c; }
.web-code-hero__editor-bar strong { margin-left: 7px; color: #aeb8db; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; font-weight: 600; }
.web-code-hero__editor-bar em { margin-left: auto; color: #61e7a6; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.04em; }

.web-code-hero__editor pre {
	margin: 0;
	padding: clamp(22px, 3vw, 32px);
	color: #dfe4ff;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: clamp(12px, 1.25vw, 15px);
	line-height: 1.75;
	white-space: pre-wrap;
}

.web-code-hero__line { display: block; overflow: hidden; white-space: nowrap; clip-path: inset(0 100% 0 0); animation: web-code-type 4.8s steps(38, end) infinite; }
.web-code-hero__line:nth-child(2) { animation-delay: 0.2s; }
.web-code-hero__line:nth-child(3) { animation-delay: 0.4s; }
.web-code-hero__line:nth-child(4) { animation-delay: 0.6s; }
.web-code-hero__line:nth-child(5) { animation-delay: 0.8s; }
.web-code-hero__line:nth-child(6) { animation-delay: 1s; }
.web-code-hero__line--indent { padding-left: 1.4em; }
.web-code-hero__line b { color: #88a2ff; font-weight: 700; }
.web-code-hero__line i { color: #7ee3b5; font-style: normal; }
.web-code-hero__cursor { display: inline-block; width: 7px; height: 1.1em; margin-left: 4px; vertical-align: -0.18em; background: #70e7ff; animation: web-code-cursor 850ms steps(1) infinite; }

.web-code-hero__mockups {
	position: absolute;
	z-index: 1;
	top: clamp(250px, 23vw, 330px);
	left: 50%;
	display: block;
	width: min(calc(100% + 180px), 1380px);
	height: 460px;
	gap: 0;
	align-items: end;
	margin: 0;
	pointer-events: none;
	transform: translateX(-50%);
}

.web-code-hero__mockup {
	--web-mockup-tilt: 0deg;
	position: absolute;
	width: clamp(130px, 14vw, 220px);
	margin: 0;
	overflow: hidden;
	border: 1px solid rgba(181, 194, 255, 0.24);
	border-radius: 14px;
	background: #dbe5ff;
	box-shadow: 0 22px 45px rgba(0, 0, 0, 0.35);
	transform-origin: bottom center;
	transform: translateY(0) rotate(var(--web-mockup-tilt));
	will-change: transform;
	animation: web-mockup-float 4.8s ease-in-out infinite;
}

.web-code-hero__mockup img { display: block; width: 100%; aspect-ratio: 1.48; object-fit: cover; object-position: 70% center; }
.web-code-hero__mockup--left-a { --web-mockup-tilt: -7deg; top: 0; left: 0; animation-delay: -1.7s; }
.web-code-hero__mockup--left-b { --web-mockup-tilt: 6deg; top: 250px; left: clamp(90px, 10vw, 200px); animation-delay: -3.2s; }
.web-code-hero__mockup--right-a { --web-mockup-tilt: 7deg; top: 0; right: 0; animation-delay: -0.4s; }
.web-code-hero__mockup--right-b { --web-mockup-tilt: -6deg; top: 250px; right: clamp(90px, 10vw, 200px); animation-delay: -2.4s; }

.web-code-hero__bubble {
	position: absolute;
	z-index: 2;
	padding: 10px 13px;
	border: 1px solid rgba(168, 181, 255, 0.25);
	border-radius: 12px;
	background: rgba(18, 24, 48, 0.72);
	backdrop-filter: blur(12px);
	color: #e5eaff;
	font-size: clamp(10px, 0.9vw, 12px);
	font-weight: 800;
	letter-spacing: 0.02em;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
	animation: web-bubble-float 4.6s ease-in-out infinite;
}

.web-code-hero__bubble--commerce { top: 22%; left: 8%; color: #93edff; }
.web-code-hero__bubble--corporate { top: 38%; right: 7%; animation-delay: -1.2s; }
.web-code-hero__bubble--seo { bottom: 25%; left: 11%; color: #a7ffcb; animation-delay: -2.3s; }
.web-code-hero__bubble--mobile { right: 13%; bottom: 18%; color: #d3b4ff; animation-delay: -3.4s; }

@keyframes web-code-type { 0%, 12% { clip-path: inset(0 100% 0 0); opacity: 0.24; } 32%, 86% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0.45; } }
@keyframes web-code-cursor { 50% { opacity: 0; } }
@keyframes web-mockup-float { 50% { transform: translateY(-13px) rotate(var(--web-mockup-tilt)); } }
@keyframes web-bubble-float { 50% { transform: translateY(-13px) rotate(1deg); } }

@media (max-width: 960px) {
	.web-code-hero { min-height: 0; }
	.web-code-hero__mockups { position: relative; top: auto; left: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; height: auto; gap: 14px; margin: 34px auto 0; transform: none; }
	.web-code-hero__mockup { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; }
	.web-code-hero__mockup--left-a { --web-mockup-tilt: -5deg; }
	.web-code-hero__mockup--left-b { --web-mockup-tilt: 4deg; }
	.web-code-hero__mockup--right-a { --web-mockup-tilt: 5deg; }
	.web-code-hero__mockup--right-b { --web-mockup-tilt: -4deg; }
}

@media (max-width: 760px) {
	.web-code-hero { min-height: 860px; }
	.web-code-hero__inner { width: min(100% - 28px, 1240px); padding-top: 74px; }
	.web-code-hero h1 { font-size: clamp(38px, 11vw, 54px); }
	.web-code-hero__bubble { display: none; }
	.web-code-hero__editor { margin-top: 30px; }
	.web-code-hero__editor pre { padding: 18px; font-size: 11px; }
	.web-code-hero__mockups { width: 100%; margin-left: 0; gap: 10px; }
	.web-code-hero__bubble--commerce { top: 16%; left: -5px; }
	.web-code-hero__bubble--corporate { top: 48%; right: -10px; }
	.web-code-hero__bubble--seo { display: none; }
	.web-code-hero__bubble--mobile { right: 4%; bottom: 9%; }
}

@media (prefers-reduced-motion: reduce) {
	.web-code-hero *, .web-code-hero *::before, .web-code-hero *::after { animation: none !important; }
}

/* SEO service: layered performance-report experience. */
.seo-data-hero {
	position: relative;
	min-height: 1000px;
	overflow: hidden;
	background: radial-gradient(circle at 18% 56%, rgba(15, 89, 213, 0.25), transparent 34%), radial-gradient(circle at 82% 23%, rgba(28, 126, 255, 0.16), transparent 27%), #05080f;
	color: #f7f9ff;
	isolation: isolate;
}

.seo-data-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(4, 8, 17, 0.05), rgba(4, 8, 17, 0.88));
	pointer-events: none;
}

.seo-data-hero__columns {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(90deg, rgba(55, 139, 255, 0.2) 1px, transparent 1px);
	background-size: min(11vw, 168px) 100%;
	mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.86) 12%, rgba(0, 0, 0, 0.88) 82%, transparent);
}

.seo-data-hero__inner {
	position: relative;
	width: min(100% - 48px, 1500px);
	min-height: 1000px;
	margin: 0 auto;
}

.seo-data-hero__copy {
	position: absolute;
	z-index: 4;
	top: clamp(130px, 16vw, 210px);
	right: clamp(0px, 2vw, 36px);
	width: min(34vw, 470px);
}

.seo-data-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 13px;
	border: 1px solid rgba(72, 150, 255, 0.36);
	border-radius: 999px;
	background: rgba(19, 40, 83, 0.56);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
	color: #9fd4ff;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.seo-data-hero__copy h1 {
	margin: 22px 0 16px;
	color: #fff;
	font-family: var(--aw-font-heading);
	font-size: clamp(42px, 4.7vw, 72px);
	font-weight: 850;
	letter-spacing: -0.06em;
	line-height: 0.97;
}

.seo-data-hero__copy p {
	margin: 0;
	color: rgba(222, 234, 255, 0.74);
	font-size: clamp(15px, 1.2vw, 18px);
	font-weight: 600;
	line-height: 1.65;
}

.seo-data-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	margin-top: 28px;
	padding: 0 20px;
	border-radius: 999px;
	background: #1c84ff;
	box-shadow: 0 16px 38px rgba(28, 132, 255, 0.34);
	color: #fff;
	font-size: 12px;
	font-weight: 850;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.seo-data-hero__cta:hover,
.seo-data-hero__cta:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 22px 42px rgba(28, 132, 255, 0.48); }

.seo-data-hero__scene {
	position: absolute;
	bottom: 120px;
	left: max(-84px, calc((100vw - 1500px) / -2));
	width: min(68vw, 1030px);
	aspect-ratio: 1.245;
}

.seo-data-hero__report,
.seo-data-hero__asset { position: absolute; margin: 0; }
.seo-data-hero__report { z-index: 1; inset: 6% 5% 0 0; filter: drop-shadow(0 34px 50px rgba(0, 0, 0, 0.42)); }
.seo-data-hero__report img { display: block; width: 100%; height: 100%; object-fit: contain; }
.seo-data-hero__asset { z-index: 2; display: block; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.35)); transform-origin: center; }
.seo-data-hero__asset--conversion { right: -6%; top: 43%; width: 49%; animation: seo-float-conversion 5.8s ease-in-out infinite; }
.seo-data-hero__asset--analytics { left: 9%; top: 21%; width: 17%; animation: seo-float-analytics 4.6s ease-in-out infinite; }
.seo-data-hero__asset--facebook { left: 46%; top: -1%; width: 13%; animation: seo-float-facebook 5.1s ease-in-out -1.8s infinite; }
.seo-data-hero__asset--semrush { left: 4%; bottom: 4%; width: 15%; animation: seo-float-semrush 5.4s ease-in-out -2.7s infinite; }
.seo-data-hero__asset--actions { right: -2%; top: 7%; width: 31%; animation: seo-float-actions 6.4s ease-in-out -1s infinite; }

@keyframes seo-float-conversion { 50% { transform: translateY(-18px) rotate(-1.5deg); } }
@keyframes seo-float-analytics { 50% { transform: translateY(12px) rotate(7deg) scale(1.04); } }
@keyframes seo-float-facebook { 50% { transform: translateY(-16px) rotate(-7deg) scale(0.96); } }
@keyframes seo-float-semrush { 50% { transform: translateY(-12px) rotate(8deg); } }
@keyframes seo-float-actions { 50% { transform: translateY(14px) rotate(1.5deg); } }

@media (max-width: 1080px) {
	.seo-data-hero { min-height: 1060px; }
	.seo-data-hero__inner { min-height: 1060px; }
	.seo-data-hero__copy { top: 92px; right: auto; left: 50%; width: min(100%, 620px); text-align: center; transform: translateX(-50%); }
	.seo-data-hero__scene { bottom: 80px; left: 50%; width: min(92vw, 900px); transform: translateX(-50%); }
}

@media (max-width: 640px) {
	.seo-data-hero { min-height: 0; }
	.seo-data-hero__inner { width: min(100% - 28px, 1500px); min-height: 0; padding: 56px 0 24px; }
	.seo-data-hero__copy { position: relative; top: auto; right: auto; left: auto; width: 100%; transform: none; }
	.seo-data-hero__copy h1 { margin-top: 16px; font-size: clamp(37px, 11vw, 52px); }
	.seo-data-hero__copy p { font-size: 14px; }
	.seo-data-hero__cta { margin-top: 20px; }
	.seo-data-hero__scene { position: relative; bottom: auto; left: auto; width: min(96vw, 560px); margin: 32px auto 0; transform: none; }
	.seo-data-hero__asset--actions { width: 34%; right: -5%; }
	.seo-data-hero__asset--conversion { width: 54%; right: -12%; }
}

@media (prefers-reduced-motion: reduce) {
	.seo-data-hero *, .seo-data-hero *::before, .seo-data-hero *::after { animation: none !important; }
}

/* Social media service: Showit-style floating phone wall. */
.service-experience--sosyal-medya-yonetimi {
	width: 100%;
	margin: 0 0 clamp(42px, 5vw, 76px);
	background: #1c1c1c;
}

.service-experience--sosyal-medya-yonetimi::before,
.service-experience--sosyal-medya-yonetimi::after {
	display: none;
}

.service-experience--sosyal-medya-yonetimi .service-experience__inner {
	display: block;
	width: 100%;
	padding: 0;
}

.service-experience--sosyal-medya-yonetimi .service-experience__copy {
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 50%;
	width: min(100% - 36px, 620px);
	justify-items: center;
	transform: translate(-50%, -50%);
	text-align: center;
}

.service-experience--sosyal-medya-yonetimi .service-experience__copy > span {
	display: none;
}

.service-experience--sosyal-medya-yonetimi .service-experience__copy h1 {
	max-width: 560px;
	color: #fff;
	font-size: clamp(43px, 5.2vw, 84px);
	letter-spacing: -0.065em;
}

.service-experience--sosyal-medya-yonetimi .service-experience__copy p {
	max-width: 490px;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(15px, 1.15vw, 18px);
}

.service-experience--sosyal-medya-yonetimi .service-experience__copy > a {
	background: #ff5a00;
	box-shadow: none;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

.service-experience--sosyal-medya-yonetimi .service-phones {
	position: relative;
	width: 100%;
	min-height: clamp(700px, 100vh, 1040px);
	overflow: hidden;
	background: #1c1c1c;
	isolation: isolate;
}

.service-detail--sosyal-medya-yonetimi {
	width: 100%;
	margin: 0;
	padding-top: 0;
}

.service-detail--sosyal-medya-yonetimi .service-detail__layout {
	width: var(--aw-container);
	margin: 0 auto;
	padding: clamp(28px, 3vw, 46px) 0 clamp(80px, 7vw, 120px);
}

.service-phones__background,
.service-phones__column {
	position: absolute;
	pointer-events: none;
	transition: opacity 180ms ease;
	will-change: transform;
	transform: translate3d(0, var(--service-parallax-y, 0), 0);
}

.service-phones--parallax-pending .service-phones__background,
.service-phones--parallax-pending .service-phones__column {
	opacity: 0;
}

.service-phones__background {
	inset: -10% -5%;
	z-index: 1;
	overflow: hidden;
	opacity: 0.98;
}

.service-phones__background::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 18, 18, 0.08) 0 15%, rgba(18, 18, 18, 0.26) 31% 69%, rgba(18, 18, 18, 0.08) 85% 100%);
}

.service-phones__background img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.service-phones__column {
	z-index: 3;
	top: 50%;
	width: clamp(72px, 10.5vw, 170px);
	transform: translate3d(0, calc(-50% + var(--service-parallax-y, 0)), 0);
}

.service-phones__column img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 12px 17px rgba(0, 0, 0, 0.19));
}

.service-phones__column--left {
	left: clamp(16px, 15.8vw, 300px);
	width: clamp(84px, 18.5vw, 350px);
}

.service-phones__column--right {
	right: clamp(16px, 15.8vw, 300px);
	width: clamp(84px, 18.5vw, 350px);
}

.service-phone {
	position: absolute;
	margin: 0;
	overflow: hidden;
	width: clamp(148px, 16vw, 266px);
	aspect-ratio: 0.49;
	border: clamp(5px, 0.45vw, 8px) solid #1a1a1a;
	border-radius: clamp(24px, 2vw, 36px);
	background: #111;
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.34);
	animation: service-phone-drift 8s ease-in-out infinite;
}

.service-phone::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 7px;
	left: 50%;
	width: 42%;
	height: 16px;
	border-radius: 0 0 12px 12px;
	background: #090909;
	transform: translateX(-50%);
}

.service-phone img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.6);
}

.service-phone--1 { top: -36%; left: -1%; transform: rotate(-4deg); }
.service-phone--2 { top: -26%; left: 17%; transform: rotate(3deg); animation-delay: -1.4s; }
.service-phone--3 { top: -34%; right: 9%; transform: rotate(-3deg); animation-delay: -2.6s; }
.service-phone--4 { top: 17%; left: -5%; transform: rotate(4deg); animation-delay: -3.8s; }
.service-phone--5 { bottom: -37%; left: 13%; transform: rotate(-3deg); animation-delay: -2s; }
.service-phone--6 { top: 14%; right: 9%; transform: rotate(3deg); animation-delay: -4.7s; }
.service-phone--7 { bottom: -28%; right: -2%; transform: rotate(-4deg); animation-delay: -3.1s; }
.service-phone--1 img { object-position: 75% center; }
.service-phone--2 img { object-position: 86% 30%; }
.service-phone--3 img { object-position: 87% 70%; }
.service-phone--4 img { object-position: 75% 68%; }
.service-phone--5 img { object-position: 81% 50%; }
.service-phone--6 img { object-position: 91% 52%; }
.service-phone--7 img { object-position: 83% 86%; }

@keyframes service-phone-drift {
	50% { margin-top: -18px; }
}

.service-sidebar-card__service-name {
	margin: 0;
	color: var(--aw-blue);
	font-family: var(--aw-font-heading);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.services-archive {
	width: var(--aw-container);
	margin: 0 auto;
	padding: clamp(28px, 3.4vw, 48px) 0 clamp(70px, 7vw, 110px);
}

.services-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(320px, 0.8fr) minmax(620px, 1.2fr);
	gap: clamp(22px, 2.5vw, 36px);
	align-items: stretch;
	min-height: 460px;
}

.services-hero__content,
.services-hero__showcase {
	position: relative;
	z-index: 1;
}

.services-hero__content {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: 18px;
	padding: clamp(14px, 1.4vw, 22px) 0;
}

.services-hero__content > span {
	color: #6a39ff;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.services-hero h1 {
	max-width: 620px;
	margin: 0;
	color: #05070d;
	font-family: var(--aw-font-heading);
	font-size: clamp(32px, 3.35vw, 52px);
	font-weight: 700;
	line-height: 1.05;
}

.services-hero h1 em {
	display: block;
	font-style: normal;
	overflow-wrap: anywhere;
	background: linear-gradient(90deg, #00bbd7 0%, #7935ff 42%, #f02d86 82%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.services-hero p {
	max-width: 500px;
	margin: 0;
	color: #5f6f86;
	font-size: clamp(14px, 1vw, 16px);
	font-weight: 700;
	line-height: 1.65;
}

.services-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.services-hero__primary,
.services-hero__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 46px;
	padding: 0 20px;
	border-radius: 999px;
	font-family: var(--aw-font-heading);
	font-size: 13px;
	font-weight: 900;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.services-hero__primary {
	background: linear-gradient(90deg, #00bbd7, #6f2dff);
	color: #fff;
	box-shadow: 0 16px 34px rgba(0, 187, 215, 0.24);
}

.services-hero__secondary {
	border: 1px solid #e0e7f2;
	background: #fff;
	color: #252f3f;
}

.services-hero__primary:hover,
.services-hero__primary:focus,
.services-hero__secondary:hover,
.services-hero__secondary:focus {
	transform: translateY(-1px);
}

.services-hero__proof {
	display: flex;
	align-items: center;
	gap: 18px;
}

.services-hero__avatars {
	display: inline-flex;
	align-items: center;
}

.services-hero__avatars span {
	width: 34px;
	height: 34px;
	margin-left: -10px;
	border: 3px solid #fff;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 30%, #ffe3c7 0 18%, transparent 19%),
		linear-gradient(135deg, #00bbd7, #f02d86);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
}

.services-hero__avatars span:first-child {
	margin-left: 0;
}

.services-hero__avatars span:nth-child(2) {
	background:
		radial-gradient(circle at 50% 30%, #ffd8b5 0 18%, transparent 19%),
		linear-gradient(135deg, #12b886, #00bbd7);
}

.services-hero__avatars span:nth-child(3) {
	background:
		radial-gradient(circle at 50% 30%, #ffdfc6 0 18%, transparent 19%),
		linear-gradient(135deg, #7c3aed, #00bbd7);
}

.services-hero__avatars span:nth-child(4) {
	background:
		radial-gradient(circle at 50% 30%, #ffd1a8 0 18%, transparent 19%),
		linear-gradient(135deg, #ff6a00, #f02d86);
}

.services-hero__proof > div:last-child {
	display: grid;
	gap: 2px;
}

.services-hero__stars {
	color: #ffc400;
	font-size: 14px;
	letter-spacing: 0;
}

.services-hero__proof strong {
	color: #475467;
	font-size: 14px;
	font-weight: 900;
}

.services-hero__showcase {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.95fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 16px;
	min-width: 0;
}

.services-hero-card {
	position: relative;
	overflow: hidden;
	border: 1px solid #e3ebf6;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
}

.services-hero-card--featured {
	grid-row: 1 / span 2;
	min-height: 460px;
}

.services-hero-featured__slides,
.services-hero-featured__slide {
	position: absolute;
	inset: 0;
}

.services-hero-featured__slide {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 360ms ease, visibility 360ms ease;
}

.services-hero-featured__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.services-hero-featured__nav {
	position: absolute;
	z-index: 4;
	left: 30px;
	bottom: 28px;
	display: inline-flex;
	gap: 10px;
}

.services-hero-featured__nav button {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #111827;
	box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
	backdrop-filter: blur(12px);
	cursor: pointer;
	transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.services-hero-featured__nav button:hover,
.services-hero-featured__nav button:focus {
	background: #fff;
	box-shadow: 0 18px 36px rgba(15, 23, 42, 0.22);
	transform: translateY(-1px);
}

.services-hero-card--compact {
	min-height: 222px;
}

.services-hero-card img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.services-hero-featured__slide::after,
.services-hero-card--compact::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.96) 0%,
		rgba(255, 255, 255, 0.82) 30%,
		rgba(255, 255, 255, 0.28) 58%,
		rgba(255, 255, 255, 0) 78%
	);
	content: "";
	pointer-events: none;
}

.services-hero-card__content {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: start;
	gap: 12px;
	max-width: 250px;
	padding: 30px;
}

.services-hero-card--compact .services-hero-card__content {
	max-width: 220px;
	padding: 24px;
}

.services-hero-card__content span {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, #6c42ff, #4f2ce8);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 8px 18px rgba(89, 52, 238, 0.24);
}

.services-hero-card__content h2 {
	margin: 0;
	color: #080b12;
	font-family: var(--aw-font-heading);
	font-size: clamp(21px, 1.65vw, 29px);
	font-weight: 800;
	line-height: 1.16;
}

.services-hero-card--compact h2 {
	font-size: clamp(16px, 1.12vw, 21px);
	font-weight: 800;
}

.services-hero-card__content p {
	max-width: 280px;
	font-size: 13px;
	line-height: 1.55;
}

.services-hero-card__content a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 40px;
	padding: 0 17px;
	border: 1px solid #e1e9f3;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #111827;
	font-size: 12px;
	font-weight: 900;
	box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
	backdrop-filter: blur(10px);
}

.services-hero-card--compact .services-hero-card__content a {
	width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	font-size: 15px;
}

.services-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 60px 0 24px;
}

.services-filter a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid #dfe7f1;
	border-radius: 999px;
	background: #fff;
	color: #344054;
	font-size: 13px;
	font-weight: 800;
	transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}

.services-filter a:hover,
.services-filter a:focus,
.services-filter a.is-active {
	border-color: rgba(0, 187, 215, 0.24);
	background: #edf5ff;
	color: var(--aw-blue);
}

.services-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
	margin-top: 60px;
}

.service-list-card {
	display: block;
	overflow: hidden;
	border: 1px solid #dfe7f1;
	border-radius: 12px;
	background: #fff;
	--service-image-x: 0px;
	--service-image-y: 0px;
	contain: layout paint;
	box-shadow: 0 16px 36px rgba(15, 23, 42, 0.055);
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.service-list-card:hover,
.service-list-card:focus-within {
	border-color: rgba(0, 187, 215, 0.26);
	box-shadow: 0 24px 52px rgba(15, 23, 42, 0.09);
	transform: translateY(-3px);
}

.service-list-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	height: auto;
	overflow: hidden;
	background: #f3f7fc;
}

.service-list-card__media img,
.service-list-card__placeholder {
	width: 100%;
	height: 100%;
}

.service-list-card__media img {
	object-fit: cover;
	transform: translate3d(0, 0, 0) scale(1.04);
	backface-visibility: hidden;
	transition: transform 220ms ease-out;
	will-change: transform;
}

.service-list-card__media::after {
	position: absolute;
	inset: auto 0 0;
	height: 48%;
	content: "";
	background: linear-gradient(180deg, rgba(5, 7, 13, 0) 0%, rgba(5, 7, 13, 0.72) 100%);
	pointer-events: none;
}

.service-list-card__media > span {
	position: absolute;
	z-index: 2;
	bottom: 18px;
	left: 18px;
	max-width: calc(100% - 36px);
	color: #fff;
	font-family: var(--aw-font-heading);
	font-size: clamp(18px, 1.4vw, 24px);
	font-weight: 900;
	line-height: 1.16;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
}

.service-list-card:hover .service-list-card__media img {
	transform: translate3d(var(--service-image-x), var(--service-image-y), 0) scale(1.11);
}

.service-list-card__placeholder {
	display: grid;
	place-items: center;
	color: var(--aw-blue);
	font-size: 38px;
	background:
		radial-gradient(circle at 50% 50%, rgba(0, 187, 215, 0.18), transparent 42%),
		linear-gradient(135deg, #f7fbff, #eaf4ff);
}

.services-list__empty {
	grid-column: 1 / -1;
	padding: 44px;
	border: 1px dashed #cdd8e8;
	border-radius: 14px;
	background: #f8fbff;
	text-align: center;
}

.services-list__empty h2 {
	margin: 0 0 8px;
	font-family: var(--aw-font-heading);
}

.services-list__empty p {
	margin: 0;
	color: #667085;
	font-weight: 700;
}

.services-archive .navigation.pagination {
	margin-top: 34px;
}

.services-archive .nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.services-archive .page-numbers {
	display: grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #dfe7f1;
	border-radius: 999px;
	color: #344054;
	font-weight: 800;
}

.services-archive .page-numbers.current,
.services-archive .page-numbers:hover,
.services-archive .page-numbers:focus {
	border-color: var(--aw-blue);
	background: var(--aw-blue);
	color: #fff;
}

.service-detail {
	width: var(--aw-container);
	margin: 0 auto;
	padding: clamp(28px, 3vw, 46px) 0 clamp(80px, 7vw, 120px);
}

/* Let the white service content layer softly overlap the dark web showcase. */
.web-code-hero + .service-detail {
	position: relative;
	z-index: 5;
	width: 100%;
	margin: -76px 0 0;
	padding: clamp(54px, 6vw, 88px) 0 clamp(80px, 7vw, 120px);
	border-radius: 34px 34px 0 0;
	background: #fff;
	box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.14);
}

.web-code-hero + .service-detail .service-detail__layout {
	width: var(--aw-container);
	margin: 0 auto;
}

.service-detail__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
	gap: clamp(28px, 3vw, 44px);
	align-items: start;
}

.service-detail__main {
	min-width: 0;
}

.service-detail__intro {
	display: grid;
	gap: 12px;
	padding: 0 0 4px;
}

.service-detail__eyebrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	color: var(--aw-blue);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.service-detail__eyebrow small {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 10px;
	border: 1px solid #dfe7f1;
	border-radius: 999px;
	background: #f7fbff;
	color: #526274;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: 0;
	text-transform: none;
}

.service-detail__intro h1 {
	margin: 0;
	color: #05070d;
	font-family: var(--aw-font-heading);
	font-size: clamp(24px, 2vw, 32px);
	font-weight: 900;
	line-height: 1.1;
}

.service-detail__intro p {
	margin: 0;
	color: #5f6f86;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.65;
}

.service-detail__media {
	overflow: hidden;
	margin: 0 0 34px;
	border: 1px solid #dfe7f1;
	border-radius: 16px;
	background: #f4f8fd;
	box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
}

.service-detail__media img {
	display: block;
	width: 100%;
	max-height: 520px;
	object-fit: cover;
}

.service-detail__content {
	max-width: none;
	color: #344054;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.82;
}

.service-detail__content > *:first-child {
	margin-top: 0;
}

.service-detail__content p {
	margin: 0 0 22px;
}

.service-detail__content h2,
.service-detail__content h3,
.service-detail__content h4 {
	margin: 42px 0 16px;
	color: #05070d;
	font-family: var(--aw-font-heading);
	font-weight: 900;
	line-height: 1.18;
}

.service-detail__content h2 {
	font-size: clamp(25px, 2vw, 34px);
}

.service-detail__content h3 {
	font-size: clamp(22px, 1.65vw, 28px);
}

.service-detail__content h4 {
	font-size: clamp(19px, 1.3vw, 23px);
}

.service-detail__content ul,
.service-detail__content ol {
	display: grid;
	gap: 10px;
	margin: 0 0 26px;
	padding-left: 22px;
}

.service-detail__content li::marker {
	color: var(--aw-blue);
}

.service-detail__sidebar {
	position: sticky;
	top: 150px;
	display: grid;
	gap: 18px;
}

.service-sidebar-card {
	overflow: hidden;
	border: 1px solid #dfe7f1;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 16px 38px rgba(15, 23, 42, 0.055);
}

.service-sidebar-card--cta {
	display: grid;
	gap: 16px;
	padding: 24px;
	background: #fff;
}

.service-sidebar-card--cta > h1,
.service-sidebar-card__head span {
	margin: 0;
	color: var(--aw-blue);
	font-family: var(--aw-font-heading);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.service-sidebar-card--cta h2 {
	margin: 0;
	color: #05070d;
	font-family: var(--aw-font-heading);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
}

.service-sidebar-card--cta > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: fit-content;
	min-height: 42px;
	padding: 0 18px;
	border-radius: 10px;
	background: var(--aw-blue);
	color: #fff;
	font-size: 13px;
	font-weight: 900;
	box-shadow: 0 14px 28px rgba(0, 187, 215, 0.2);
}

.service-sidebar-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 20px 20px 14px;
	border-bottom: 1px solid #edf1f6;
}

.service-sidebar-card__head a {
	color: #667085;
	font-size: 12px;
	font-weight: 850;
}

.service-sidebar-list {
	display: grid;
	padding: 8px;
}

.service-sidebar-list a {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: 10px;
	color: #344054;
	font-size: 13px;
	font-weight: 850;
	line-height: 1.25;
	transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.service-sidebar-list a:hover,
.service-sidebar-list a:focus {
	background: #edf5ff;
	color: var(--aw-blue);
	transform: translateX(2px);
}

.service-sidebar-list i {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: #f3f7ff;
	color: var(--aw-blue);
	font-size: 11px;
}

.service-related-works {
	margin-top: clamp(48px, 5vw, 76px);
}

.service-related-works__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 22px;
}

.service-related-works__head span {
	color: var(--aw-blue);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.service-related-works__head h2 {
	margin: 8px 0 0;
	color: #05070d;
	font-family: var(--aw-font-heading);
	font-size: clamp(26px, 2.4vw, 38px);
	font-weight: 900;
	line-height: 1.1;
}

.service-related-works__head > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 0 0 auto;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid #dfe7f1;
	border-radius: 999px;
	background: #fff;
	color: #111827;
	font-size: 13px;
	font-weight: 850;
	box-shadow: 0 14px 32px rgba(15, 23, 42, 0.055);
	transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.service-related-works__head > a:hover,
.service-related-works__head > a:focus {
	border-color: rgba(0, 187, 215, 0.34);
	color: var(--aw-blue);
	transform: translateY(-1px);
}

.service-related-works__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.service-related-work-card {
	position: relative;
	isolation: isolate;
	display: block;
	overflow: hidden;
	min-height: clamp(240px, 19vw, 330px);
	border: 1px solid #dfe7f1;
	border-radius: 14px;
	background: #eef4fb;
	box-shadow: 0 18px 46px rgba(15, 23, 42, 0.07);
	transform: translateZ(0);
	transition: border-color 180ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.service-related-work-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, transparent 42%, rgba(5, 7, 13, 0.78) 100%);
	pointer-events: none;
}

.service-related-work-card img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	object-fit: cover;
	transition: transform 420ms ease;
}

.service-related-work-card:hover,
.service-related-work-card:focus {
	border-color: rgba(0, 187, 215, 0.35);
	box-shadow: 0 22px 56px rgba(15, 23, 42, 0.11);
	transform: translateY(-3px);
}

.service-related-work-card:hover img,
.service-related-work-card:focus img {
	transform: scale(1.05);
}

.service-related-work-card span {
	position: absolute;
	right: 18px;
	bottom: 18px;
	left: 18px;
	z-index: 2;
	display: grid;
	gap: 6px;
	color: #fff;
}

.service-related-work-card small {
	color: rgba(255, 255, 255, 0.78);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.service-related-work-card strong {
	font-family: var(--aw-font-heading);
	font-size: clamp(18px, 1.25vw, 23px);
	font-weight: 900;
	line-height: 1.05;
}

@media (max-width: 1180px) {
	.services-hero {
			grid-template-columns: 1fr;
			min-height: 0;
		}

	.services-hero__showcase {
			grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
		}

	.services-hero-card--featured {
			min-height: 420px;
		}

	.services-hero-card--compact {
			min-height: 202px;
		}

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

	.service-detail__layout {
			grid-template-columns: 1fr;
		}

	.service-detail__sidebar {
			position: static;
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

	.service-related-works__grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
}

@media (max-width: 768px) {
	.services-archive {
			padding-top: 34px;
		}

	.services-hero {
			gap: 28px;
		}

	.services-hero__actions,
		.services-hero__proof {
			align-items: flex-start;
		}

	.services-hero__showcase,
		.services-list {
			grid-template-columns: 1fr;
		}

	.services-hero-card--featured,
		.services-hero-card--compact {
			min-height: 300px;
		}

	.home-services-hero .services-hero-card--compact {
			display: none;
		}

	.services-hero-card__content,
		.services-hero-card--compact .services-hero-card__content {
			max-width: 290px;
			padding: 28px;
		}

	.service-detail {
		padding-top: 28px;
	}

	.service-detail__intro h1 {
			font-size: 26px;
		}

	.service-detail__sidebar {
			grid-template-columns: 1fr;
		}

	.service-related-works__head {
			align-items: flex-start;
			flex-direction: column;
		}

	.service-related-works__grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px;
		}

	.service-related-work-card {
		min-height: 230px;
		border-radius: 12px;
	}
}

@media (max-width: 960px) {
	.web-code-hero + .service-detail {
		margin-top: -48px;
		padding-top: 58px;
		border-radius: 28px 28px 0 0;
	}
}

@media (max-width: 760px) {
	.web-code-hero + .service-detail {
		margin-top: 0;
		padding-top: 42px;
	}

	.service-detail {
		width: 100%;
		overflow-x: clip;
	}

	.service-detail__layout {
		width: var(--aw-container);
		grid-template-columns: minmax(0, 1fr);
		margin: 0 auto;
	}

	.service-detail__main,
	.service-detail__sidebar {
		min-width: 0;
	}

	.service-detail__sidebar {
		grid-template-columns: 1fr;
	}

	.service-detail__content {
		overflow-wrap: anywhere;
	}
}