/* Cohesive page-level themes for Google Ads and Web Design.
   Loaded after theme.css and service-hero-refresh.css. */

/* Shared structural rhythm: cards keep their native grids but use one size,
   radius, border depth and shadow language per service. */
.service-detail-page--ads,
.service-detail-page--web-design {
	--service-card-radius: 1.25rem;
}

.service-detail-page--ads [data-ai-section] article,
.service-detail-page--ads [data-ai-section] div[class*="rounded-[2"],
.service-detail-page--ads [data-ai-section] div.rounded-2xl,
.service-detail-page--ads [data-ai-section] div.rounded-3xl,
.service-detail-page--web-design [data-ai-section] article,
.service-detail-page--web-design [data-ai-section] div[class*="rounded-[2"],
.service-detail-page--web-design [data-ai-section] div.rounded-2xl,
.service-detail-page--web-design [data-ai-section] div.rounded-3xl {
	border-radius: var(--service-card-radius) !important;
}

/* --------------------------------------------------------------------------
   Google Ads — navy performance console from the supplied reference images.
   -------------------------------------------------------------------------- */
.service-detail-page--ads {
	--ads-navy-950: #0e1a31;
	--ads-navy-900: #142744;
	--ads-navy-850: #1a3155;
	--ads-line: rgba(122, 163, 255, 0.27);
	--ads-copy: rgba(235, 241, 255, 0.76);
	--ads-blue: #72a5ff;
	--ads-cyan: #55d6c7;
	--ads-orange: #f1a155;
}

.service-detail-page--ads .id-service-hero--ads {
	border-color: var(--ads-line) !important;
	border-radius: 2rem !important;
	background:
		linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px),
		radial-gradient(circle at 86% 10%, rgba(85,214,199,.14), transparent 34%),
		linear-gradient(145deg, var(--ads-navy-950), var(--ads-navy-850)) !important;
	background-size: 1.5rem 1.5rem, 1.5rem 1.5rem, auto, auto !important;
	box-shadow: inset 0 4px 0 var(--ads-blue), 0 34px 76px -48px rgba(7,18,39,.9) !important;
}

.service-detail-page--ads .id-service-hero--ads > .absolute.inset-0 {
	background: radial-gradient(circle at 82% 18%, rgba(85,214,199,.16), transparent 38%), radial-gradient(circle at 12% 88%, rgba(241,161,85,.12), transparent 44%) !important;
}

.service-detail-page--ads .id-service-hero--ads :is(.public-inner-hero-title, h1) {
	color: #fff !important;
}

.service-detail-page--ads .id-service-hero--ads .public-inner-hero-description {
	color: var(--ads-copy) !important;
	-webkit-text-fill-color: var(--ads-copy) !important;
}

.service-detail-page--ads .id-service-hero--ads nav ol {
	border-color: rgba(122,163,255,.24) !important;
	background: rgba(9,20,42,.58) !important;
	color: rgba(235,241,255,.74) !important;
}

.service-detail-page--ads .id-service-hero--ads .public-inner-hero-visual {
	opacity: .2 !important;
}

.service-detail-page--ads [data-ai-section] article,
.service-detail-page--ads [data-ai-section] div[class*="rounded-[2"],
.service-detail-page--ads [data-ai-section] div.rounded-2xl,
.service-detail-page--ads [data-ai-section] div.rounded-3xl {
	border-color: var(--ads-line) !important;
	background:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(145deg, var(--ads-navy-900), var(--ads-navy-850)) !important;
	background-size: 1.5rem 1.5rem, 1.5rem 1.5rem, auto !important;
	box-shadow: inset 0 3px 0 var(--ads-card-accent, var(--ads-blue)), 0 28px 58px -42px rgba(7,18,39,.88) !important;
	color: #f8fbff !important;
}

.service-detail-page--ads [data-ai-section] article:nth-of-type(3n+2),
.service-detail-page--ads [data-ai-section] div.rounded-2xl:nth-child(3n+2),
.service-detail-page--ads [data-ai-section] div.rounded-3xl:nth-child(3n+2) {
	--ads-card-accent: var(--ads-cyan);
}

.service-detail-page--ads [data-ai-section] article:nth-of-type(3n),
.service-detail-page--ads [data-ai-section] div.rounded-2xl:nth-child(3n),
.service-detail-page--ads [data-ai-section] div.rounded-3xl:nth-child(3n) {
	--ads-card-accent: var(--ads-orange);
}

.service-detail-page--ads [data-ai-section] :is(article, div[class*="rounded-[2"], div.rounded-2xl, div.rounded-3xl) :is(h2,h3,h4,strong) {
	color: #fff !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] :is(article, div[class*="rounded-[2"], div.rounded-2xl, div.rounded-3xl) p,
.service-detail-page--ads [data-ai-section] :is(article, div[class*="rounded-[2"], div.rounded-2xl, div.rounded-3xl) :is(li,small) {
	color: var(--ads-copy) !important;
	-webkit-text-fill-color: var(--ads-copy) !important;
}

.service-detail-page--ads [data-ai-section] [data-editorial-metric],
.service-detail-page--ads [data-ai-section] .text-primary {
	color: var(--ads-cyan) !important;
	-webkit-text-fill-color: var(--ads-cyan) !important;
}

/* Keep actual campaign imagery warm and readable inside the dark consoles. */
.service-detail-page--ads [data-ai-section] figure,
.service-detail-page--ads [data-ai-section] figure > div {
	border-color: rgba(122,163,255,.24) !important;
	background-color: #f8efe5 !important;
}

.service-detail-page--ads .id-service-priority--ads,
.service-detail-page--ads section[data-ai-section="service:ads::5"],
.service-detail-page--ads section[data-ai-section="service:ads::7"] {
	background: transparent !important;
}

.service-detail-page--ads .id-service-priority--ads > div:first-of-type > div:first-child,
.service-detail-page--ads .id-ads-search-stack__shell {
	border: 1px solid var(--ads-line) !important;
	border-radius: 2rem !important;
	background:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(145deg, var(--ads-navy-950), var(--ads-navy-850)) !important;
	background-size: 1.5rem 1.5rem, 1.5rem 1.5rem, auto !important;
	box-shadow: inset 0 3px 0 var(--ads-cyan), 0 36px 78px -48px rgba(7,18,39,.9) !important;
}

.service-detail-page--ads .id-service-signals[data-service-signals="ads"] .id-service-signal {
	min-height: 5.25rem;
	border-color: var(--ads-line) !important;
	border-radius: 1rem !important;
	background: rgba(122,163,255,.08) !important;
	box-shadow: inset 0 3px 0 var(--ads-cyan) !important;
	color: #fff !important;
}

.service-detail-page--ads [data-ai-section] article:hover {
	border-color: rgba(85,214,199,.5) !important;
	box-shadow: inset 0 3px 0 var(--ads-orange), 0 34px 68px -42px rgba(7,18,39,.94) !important;
}

/* --------------------------------------------------------------------------
   Web Design — strong green brand palette across hero and content cards.
   -------------------------------------------------------------------------- */
.service-detail-page--web-design {
	--web-green-950: #07351b;
	--web-green-900: #0b4b26;
	--web-green-850: #0f5d2e;
	--web-line: rgba(86, 196, 118, 0.3);
	--web-copy: rgba(239, 250, 241, 0.78);
	--web-mint: #55cf84;
	--web-gold: #d7a258;
}

.service-detail-page--web-design .id-service-hero--web-design {
	border-color: var(--web-line) !important;
	border-radius: 2rem !important;
	background:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
		radial-gradient(circle at 84% 14%, rgba(85,207,132,.16), transparent 34%),
		linear-gradient(145deg, var(--web-green-950), var(--web-green-850)) !important;
	background-size: 1.5rem 1.5rem, 1.5rem 1.5rem, auto, auto !important;
	box-shadow: inset 0 4px 0 var(--web-mint), 0 34px 76px -48px rgba(4,37,17,.9) !important;
}

.service-detail-page--web-design .id-service-hero--web-design > .absolute.inset-0 {
	background: radial-gradient(circle at 82% 18%, rgba(85,207,132,.18), transparent 38%), radial-gradient(circle at 12% 88%, rgba(215,162,88,.13), transparent 44%) !important;
}

.service-detail-page--web-design .id-service-hero--web-design :is(.public-inner-hero-title,h1) {
	color: #fff !important;
}

.service-detail-page--web-design .id-service-hero--web-design .public-inner-hero-description {
	color: var(--web-copy) !important;
	-webkit-text-fill-color: var(--web-copy) !important;
}

.service-detail-page--web-design .id-service-hero--web-design nav ol {
	border-color: rgba(86,196,118,.26) !important;
	background: rgba(3,35,16,.58) !important;
	color: rgba(239,250,241,.76) !important;
}

.service-detail-page--web-design .id-service-hero--web-design .public-inner-hero-visual {
	opacity: .2 !important;
}

.service-detail-page--web-design [data-ai-section] article,
.service-detail-page--web-design [data-ai-section] div[class*="rounded-[2"],
.service-detail-page--web-design [data-ai-section] div.rounded-2xl,
.service-detail-page--web-design [data-ai-section] div.rounded-3xl {
	border-color: var(--web-line) !important;
	background:
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(145deg, var(--web-green-900), var(--web-green-850)) !important;
	background-size: 1.5rem 1.5rem, 1.5rem 1.5rem, auto !important;
	box-shadow: inset 0 3px 0 var(--web-card-accent, var(--web-mint)), 0 28px 58px -42px rgba(4,37,17,.88) !important;
	color: #f8fff9 !important;
}

.service-detail-page--web-design [data-ai-section] article:nth-of-type(2n),
.service-detail-page--web-design [data-ai-section] div.rounded-2xl:nth-child(2n),
.service-detail-page--web-design [data-ai-section] div.rounded-3xl:nth-child(2n) {
	--web-card-accent: var(--web-gold);
}

.service-detail-page--web-design [data-ai-section] :is(article, div[class*="rounded-[2"], div.rounded-2xl, div.rounded-3xl) :is(h2,h3,h4,strong) {
	color: #fff !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] :is(article, div[class*="rounded-[2"], div.rounded-2xl, div.rounded-3xl) p,
.service-detail-page--web-design [data-ai-section] :is(article, div[class*="rounded-[2"], div.rounded-2xl, div.rounded-3xl) :is(li,small) {
	color: var(--web-copy) !important;
	-webkit-text-fill-color: var(--web-copy) !important;
}

.service-detail-page--web-design [data-ai-section] [data-editorial-metric],
.service-detail-page--web-design [data-ai-section] .text-primary {
	color: #7ee2a1 !important;
	-webkit-text-fill-color: #7ee2a1 !important;
}

.service-detail-page--web-design [data-ai-section] figure,
.service-detail-page--web-design [data-ai-section] figure > div {
	border-color: rgba(86,196,118,.24) !important;
}

.service-detail-page--web-design .id-service-priority--web-design {
	background: transparent !important;
}

.service-detail-page--web-design .id-service-signals[data-service-signals="web-design"] .id-service-signal {
	min-height: 5.25rem;
	border-color: var(--web-line) !important;
	border-radius: 1rem !important;
	background: rgba(85,207,132,.09) !important;
	box-shadow: inset 0 3px 0 var(--web-mint) !important;
	color: #fff !important;
}

.service-detail-page--web-design [data-ai-section] article:hover {
	border-color: rgba(126,226,161,.52) !important;
	box-shadow: inset 0 3px 0 var(--web-gold), 0 34px 68px -42px rgba(4,37,17,.94) !important;
}

@media (max-width: 767px) {
	.service-detail-page--ads,
	.service-detail-page--web-design {
		--service-card-radius: 1rem;
	}

	.service-detail-page--ads .id-service-hero--ads,
	.service-detail-page--web-design .id-service-hero--web-design,
	.service-detail-page--ads .id-service-priority--ads > div:first-of-type > div:first-child,
	.service-detail-page--ads .id-ads-search-stack__shell {
		border-radius: 1.25rem !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.service-detail-page--ads [data-ai-section] article,
	.service-detail-page--web-design [data-ai-section] article {
		transition: none !important;
	}
}

/* Explicit background longhands: legacy service rules set individual
   background sub-properties with !important, so the final theme layer must
   win those sub-properties directly rather than relying on a shorthand. */
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-service-hero--ads,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] article,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] div[class*="rounded-[2"],
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] div.rounded-2xl,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] div.rounded-3xl,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-service-priority--ads > div:first-of-type > div:first-child,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-ads-search-stack__shell {
	background-color: #142744 !important;
	background-image:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
		radial-gradient(circle at 86% 10%, rgba(85,214,199,.12), transparent 34%),
		linear-gradient(145deg, #0e1a31, #1a3155) !important;
	background-size: 1.5rem 1.5rem, 1.5rem 1.5rem, auto, auto !important;
	background-position: 0 0, 0 0, center, center !important;
	background-repeat: repeat, repeat, no-repeat, no-repeat !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design .id-service-hero--web-design,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] article,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] div[class*="rounded-[2"],
body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] div.rounded-2xl,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] div.rounded-3xl {
	background-color: #0b4b26 !important;
	background-image:
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
		radial-gradient(circle at 84% 14%, rgba(85,207,132,.14), transparent 34%),
		linear-gradient(145deg, #07351b, #0f5d2e) !important;
	background-size: 1.5rem 1.5rem, 1.5rem 1.5rem, auto, auto !important;
	background-position: 0 0, 0 0, center, center !important;
	background-repeat: repeat, repeat, no-repeat, no-repeat !important;
}

/* Images remain warm/light islands inside the dark service systems. */
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] figure > div,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] figure > div {
	background-image: none !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] figure > div {
	background-color: #f8efe5 !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] figure > div {
	background-color: #f4f7f1 !important;
}

/* --------------------------------------------------------------------------
   July refinement — follow the Digital Marketing gradient language.
   The service identities stay blue/teal and green/gold, but no card or hero
   reads as one flat dark colour.
   -------------------------------------------------------------------------- */

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads {
	--ads-ink: #18375f;
	--ads-copy: #52677f;
	--ads-blue: #5583d5;
	--ads-cyan: #3eb8ac;
	--ads-orange: #d99850;
	--ads-line: rgba( 71, 116, 190, 0.2 );
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design {
	--web-ink: #174b2d;
	--web-copy: #536b5b;
	--web-mint: #43a96e;
	--web-teal: #3f9c8d;
	--web-gold: #c79a52;
	--web-line: rgba( 48, 132, 78, 0.2 );
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-service-hero--ads {
	border-color: rgba( 71, 116, 190, 0.22 ) !important;
	border-radius: 0.9rem 3rem !important;
	background-color: rgba( 255, 255, 255, 0.58 ) !important;
	background-image:
		radial-gradient( circle at 84% 12%, rgba( 85, 131, 213, 0.15 ), transparent 34% ),
		radial-gradient( circle at 12% 88%, rgba( 62, 184, 172, 0.11 ), transparent 40% ),
		linear-gradient( 135deg, rgba( 255, 253, 250, 0.94 ) 0%, rgba( 232, 240, 252, 0.84 ) 55%, rgba( 255, 255, 255, 0.9 ) 100% ) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.82 ), 0 34px 76px -58px rgba( 31, 72, 137, 0.62 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design .id-service-hero--web-design {
	border-color: rgba( 48, 132, 78, 0.22 ) !important;
	border-radius: 0.9rem 3rem !important;
	background-color: rgba( 255, 255, 255, 0.58 ) !important;
	background-image:
		radial-gradient( circle at 84% 12%, rgba( 67, 169, 110, 0.15 ), transparent 34% ),
		radial-gradient( circle at 12% 88%, rgba( 199, 154, 82, 0.11 ), transparent 40% ),
		linear-gradient( 135deg, rgba( 255, 254, 249, 0.94 ) 0%, rgba( 230, 243, 232, 0.84 ) 55%, rgba( 255, 255, 255, 0.9 ) 100% ) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.82 ), 0 34px 76px -58px rgba( 29, 105, 59, 0.58 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-service-hero--ads > .absolute.inset-0 {
	background: radial-gradient( circle at 82% 18%, rgba( 85, 131, 213, 0.16 ), transparent 38% ), radial-gradient( circle at 12% 88%, rgba( 62, 184, 172, 0.14 ), transparent 44% ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design .id-service-hero--web-design > .absolute.inset-0 {
	background: radial-gradient( circle at 82% 18%, rgba( 67, 169, 110, 0.16 ), transparent 38% ), radial-gradient( circle at 12% 88%, rgba( 199, 154, 82, 0.14 ), transparent 44% ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-service-hero--ads :is( .public-inner-hero-title, h1 ) {
	color: var( --ads-ink ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design .id-service-hero--web-design :is( .public-inner-hero-title, h1 ) {
	color: var( --web-ink ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-service-hero--ads .public-inner-hero-description {
	color: var( --ads-copy ) !important;
	-webkit-text-fill-color: var( --ads-copy ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design .id-service-hero--web-design .public-inner-hero-description {
	color: var( --web-copy ) !important;
	-webkit-text-fill-color: var( --web-copy ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-service-hero--ads nav ol,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design .id-service-hero--web-design nav ol {
	border-color: rgba( 79, 103, 89, 0.16 ) !important;
	background: rgba( 255, 255, 255, 0.74 ) !important;
	color: #526255 !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-service-hero--ads .public-inner-hero-visual,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design .id-service-hero--web-design .public-inner-hero-visual {
	opacity: 0.37 !important;
}

/* These service titles use the same clean, icon-free hero composition. */
body.single-ir_service.irandesigner-exact-ui :is(
	.service-detail-page--web-design .id-service-hero--web-design,
	.service-detail-page--branding .id-service-hero--branding,
	.service-detail-page--travel-website-design .id-service-hero--travel-website-design,
	.service-detail-page--medical-website-design .id-service-hero--medical-website-design
) .mb-5.flex.gap-4 > span.inline-flex {
	display: none !important;
}

body.single-ir_service.irandesigner-exact-ui :is(
	.service-detail-page--web-design .id-service-hero--web-design,
	.service-detail-page--branding .id-service-hero--branding,
	.service-detail-page--travel-website-design .id-service-hero--travel-website-design,
	.service-detail-page--medical-website-design .id-service-hero--medical-website-design
) .mb-5.flex.gap-4 {
	gap: 0 !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] :is(
	article,
	div[class*="rounded-[2"],
	div.rounded-2xl,
	div.rounded-3xl
) {
	border-color: rgba( 71, 116, 190, 0.2 ) !important;
	border-radius: 0.8rem 2rem !important;
	background-color: rgba( 255, 255, 255, 0.58 ) !important;
	background-image: linear-gradient( 135deg, rgba( 253, 254, 255, 0.98 ), rgba( 229, 237, 252, 0.93 ) ) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
	box-shadow: inset -4px 0 0 var( --ads-blue ), 0 24px 52px -40px rgba( 39, 79, 143, 0.58 ) !important;
	color: var( --ads-ink ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] :is(
	article,
	div[class*="rounded-[2"],
	div.rounded-2xl,
	div.rounded-3xl
):nth-child( 3n + 2 ) {
	border-color: rgba( 45, 145, 136, 0.2 ) !important;
	border-radius: 2rem 0.8rem !important;
	background-color: rgba( 255, 255, 255, 0.56 ) !important;
	background-image: linear-gradient( 135deg, rgba( 252, 255, 255, 0.98 ), rgba( 220, 244, 240, 0.93 ) ) !important;
	box-shadow: inset -4px 0 0 var( --ads-cyan ), 0 24px 52px -40px rgba( 37, 117, 109, 0.54 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] :is(
	article,
	div[class*="rounded-[2"],
	div.rounded-2xl,
	div.rounded-3xl
):nth-child( 3n ) {
	border-color: rgba( 190, 126, 63, 0.2 ) !important;
	background-color: rgba( 255, 252, 248, 0.58 ) !important;
	background-image: linear-gradient( 135deg, rgba( 255, 254, 251, 0.98 ), rgba( 249, 232, 214, 0.93 ) ) !important;
	box-shadow: inset -4px 0 0 var( --ads-orange ), 0 24px 52px -40px rgba( 153, 91, 38, 0.5 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] :is(
	article,
	div[class*="rounded-[2"],
	div.rounded-2xl,
	div.rounded-3xl
) {
	border-color: rgba( 48, 132, 78, 0.2 ) !important;
	border-radius: 0.8rem 2rem !important;
	background-color: rgba( 255, 255, 255, 0.58 ) !important;
	background-image: linear-gradient( 135deg, rgba( 253, 255, 251, 0.98 ), rgba( 224, 242, 228, 0.93 ) ) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
	box-shadow: inset -4px 0 0 var( --web-mint ), 0 24px 52px -40px rgba( 31, 105, 57, 0.56 ) !important;
	color: var( --web-ink ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] :is(
	article,
	div[class*="rounded-[2"],
	div.rounded-2xl,
	div.rounded-3xl
):nth-child( 3n + 2 ) {
	border-color: rgba( 53, 137, 124, 0.2 ) !important;
	border-radius: 2rem 0.8rem !important;
	background-color: rgba( 255, 255, 255, 0.56 ) !important;
	background-image: linear-gradient( 135deg, rgba( 252, 255, 253, 0.98 ), rgba( 218, 241, 235, 0.93 ) ) !important;
	box-shadow: inset -4px 0 0 var( --web-teal ), 0 24px 52px -40px rgba( 36, 112, 101, 0.52 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] :is(
	article,
	div[class*="rounded-[2"],
	div.rounded-2xl,
	div.rounded-3xl
):nth-child( 3n ) {
	border-color: rgba( 176, 134, 67, 0.2 ) !important;
	background-color: rgba( 255, 254, 248, 0.58 ) !important;
	background-image: linear-gradient( 135deg, rgba( 255, 255, 251, 0.98 ), rgba( 240, 238, 213, 0.93 ) ) !important;
	box-shadow: inset -4px 0 0 var( --web-gold ), 0 24px 52px -40px rgba( 133, 101, 43, 0.48 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] :is( article, div[class*="rounded-[2"], div.rounded-2xl, div.rounded-3xl ) :is( h2, h3, h4, strong ) {
	color: var( --ads-ink ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] :is( article, div[class*="rounded-[2"], div.rounded-2xl, div.rounded-3xl ) :is( h2, h3, h4, strong ) {
	color: var( --web-ink ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] :is( article, div[class*="rounded-[2"], div.rounded-2xl, div.rounded-3xl ) :is( p, li, small ) {
	color: var( --ads-copy ) !important;
	-webkit-text-fill-color: var( --ads-copy ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] :is( article, div[class*="rounded-[2"], div.rounded-2xl, div.rounded-3xl ) :is( p, li, small ) {
	color: var( --web-copy ) !important;
	-webkit-text-fill-color: var( --web-copy ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] :is( [data-editorial-metric], .text-primary ) {
	color: #2f8f88 !important;
	-webkit-text-fill-color: #2f8f88 !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] :is( [data-editorial-metric], .text-primary ) {
	color: #2f8a52 !important;
	-webkit-text-fill-color: #2f8a52 !important;
}

/* The broad card selector must not turn the primary project CTA into a pale card. */
body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design a.bg-primary.text-white {
	border-color: rgba( 36, 126, 76, 0.38 ) !important;
	background-color: #2f8a52 !important;
	background-image: linear-gradient( 135deg, #2f8a52, #3f9c8d ) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff !important;
	box-shadow: 0 14px 30px -18px rgba( 30, 111, 70, 0.72 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-service-priority--ads > div:first-of-type > div:first-child,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-ads-search-stack__shell {
	border-color: rgba( 71, 116, 190, 0.2 ) !important;
	background-color: rgba( 255, 255, 255, 0.58 ) !important;
	background-image: linear-gradient( 135deg, rgba( 253, 254, 255, 0.94 ), rgba( 228, 237, 252, 0.86 ), rgba( 224, 246, 241, 0.9 ) ) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
	box-shadow: inset -4px 0 0 var( --ads-cyan ), 0 30px 70px -52px rgba( 39, 79, 143, 0.58 ) !important;
}

/* The campaign artwork uses the same light glass frame as the surrounding card. */
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads
	.id-service-priority--ads > div:first-of-type > div:first-child > div:first-child > figure {
	border-color: rgba( 71, 116, 190, 0.2 ) !important;
	background-color: rgba( 255, 255, 255, 0.62 ) !important;
	background-image: linear-gradient( 135deg, rgba( 253, 254, 255, 0.94 ), rgba( 228, 237, 252, 0.86 ), rgba( 224, 246, 241, 0.9 ) ) !important;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.88 ), 0 26px 58px -44px rgba( 39, 79, 143, 0.42 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads
	.id-service-priority--ads > div:first-of-type > div:first-child > div:first-child > figure > div {
	height: 100% !important;
	min-height: 100% !important;
	aspect-ratio: auto !important;
	background-color: #f8efe5 !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-service-signals[data-service-signals="ads"] .id-service-signal {
	border-color: rgba( 71, 116, 190, 0.18 ) !important;
	background: linear-gradient( 135deg, rgba( 255, 255, 255, 0.98 ), rgba( 228, 238, 253, 0.9 ) ) !important;
	box-shadow: inset -3px 0 0 var( --ads-cyan ) !important;
	color: var( --ads-ink ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design .id-service-signals[data-service-signals="web-design"] .id-service-signal {
	border-color: rgba( 48, 132, 78, 0.18 ) !important;
	background: linear-gradient( 135deg, rgba( 255, 255, 252, 0.98 ), rgba( 224, 243, 229, 0.9 ) ) !important;
	box-shadow: inset -3px 0 0 var( --web-mint ) !important;
	color: var( --web-ink ) !important;
}

/* Images stay neutral so campaign and interface artwork keeps its colours. */
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads [data-ai-section] figure > div {
	background-color: #f8efe5 !important;
	background-image: none !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--web-design [data-ai-section] figure > div {
	background-color: #f4f7f1 !important;
	background-image: none !important;
}

/* --------------------------------------------------------------------------
	Contrast repair after the light glass refresh.
	Only formerly dark modules that now sit on light surfaces are rethemed;
	dark workspaces and primary actions keep their original light typography.
	-------------------------------------------------------------------------- */

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads
	.id-service-priority--ads > div:first-of-type > div:first-child > div:first-child > div :is( h2, h3 ) {
	color: var( --ads-ink ) !important;
	-webkit-text-fill-color: var( --ads-ink ) !important;
}

/*
	The copy panel used to inherit the dark console's tiled background sizing and
	white foreground. Keep this surface opaque enough to hide the page grid and
	set its copy colour explicitly so it remains readable at every breakpoint.
*/
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads
	.id-service-priority--ads > div:first-of-type > div:first-child > div:first-child > div {
	border-color: rgba( 71, 116, 190, 0.18 ) !important;
	background-color: #f5fafb !important;
	background-image: linear-gradient( 145deg, #fcfeff 0%, #eef7f6 54%, #edf3fb 100% ) !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: auto !important;
	color: var( --ads-ink ) !important;
	-webkit-text-fill-color: var( --ads-ink ) !important;
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.96 ), 0 22px 54px -44px rgba( 39, 79, 143, 0.42 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads
	.id-service-priority--ads > div:first-of-type > div:first-child > div:first-child > div p {
	color: #3b506b !important;
	-webkit-text-fill-color: #3b506b !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-ads-search-stack__eyebrow,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-ads-search-stack__channel {
	color: #3e6fb4 !important;
	-webkit-text-fill-color: #3e6fb4 !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads :is(
	.id-ads-search-stack__header h2,
	.id-ads-search-stack__track h3,
	.id-ads-search-stack__footer strong
) {
	color: var( --ads-ink ) !important;
	-webkit-text-fill-color: var( --ads-ink ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads :is(
	.id-ads-search-stack__lead,
	.id-ads-search-stack__track p,
	.id-ads-search-stack__footer p
) {
	color: var( --ads-copy ) !important;
	-webkit-text-fill-color: var( --ads-copy ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-ads-search-stack__track small {
	color: #60778f !important;
	-webkit-text-fill-color: #60778f !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-ads-search-stack__number {
	color: rgba( 24, 55, 95, 0.13 ) !important;
	-webkit-text-fill-color: rgba( 24, 55, 95, 0.13 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-ads-search-stack__track,
body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-ads-search-stack__track:last-child {
	border-color: rgba( 71, 116, 190, 0.16 ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-ads-search-stack__footer {
	border-color: rgba( 71, 116, 190, 0.18 ) !important;
	background: linear-gradient( 135deg, rgba( 85, 131, 213, 0.09 ), rgba( 62, 184, 172, 0.1 ) ) !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--ads .id-ads-search-stack__footer a {
	border-color: rgba( 47, 130, 125, 0.2 ) !important;
	background: rgba( 255, 255, 255, 0.72 ) !important;
	color: #2f827d !important;
	-webkit-text-fill-color: #2f827d !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--seo .id-service-feature--seo :is( h2, h3, strong ) {
	color: #173f38 !important;
	-webkit-text-fill-color: #173f38 !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--seo .id-service-feature--seo p {
	color: #536d66 !important;
	-webkit-text-fill-color: #536d66 !important;
}

body.single-ir_service.irandesigner-exact-ui .service-detail-page--seo .id-service-feature--seo p.text-primary {
	color: #237d6b !important;
	-webkit-text-fill-color: #237d6b !important;
}

/* --------------------------------------------------------------------------
	About, Contact and Portfolio use the Blog hero as the single source of
   truth: shell, shadow, spacing, centred copy and title rhythm all match.
   -------------------------------------------------------------------------- */

body.irandesigner-exact-ui :is(
	.id-inner-hero--about,
	.id-inner-hero--contact,
	.id-inner-hero--portfolio
) {
	border-color: rgba( 221, 209, 188, 0.78 ) !important;
	border-radius: 2rem !important;
	background: linear-gradient( 135deg, rgba( 255, 252, 248, 0.94 ) 0%, rgba( 248, 239, 226, 0.84 ) 55%, rgba( 255, 255, 255, 0.9 ) 100% ) !important;
	box-shadow: 0 24px 72px -48px rgba( 45, 39, 51, 0.34 ) !important;
	padding: 2.25rem 1.5rem !important;
}

body.irandesigner-exact-ui :is(
	.id-inner-hero--about,
	.id-inner-hero--contact,
	.id-inner-hero--portfolio
) > .relative.z-10 {
	display: block !important;
	width: 100% !important;
	max-width: 58rem !important;
	margin-right: 0 !important;
	margin-left: auto !important;
	text-align: right !important;
}

body.irandesigner-exact-ui :is(
	.id-inner-hero--about,
	.id-inner-hero--contact,
	.id-inner-hero--portfolio
) > .relative.z-10 > nav {
	justify-content: flex-start !important;
}

body.irandesigner-exact-ui :is(
	.id-inner-hero--about,
	.id-inner-hero--contact,
	.id-inner-hero--portfolio
) > .relative.z-10 > .mb-5.flex {
	width: 100% !important;
	margin-right: 0 !important;
	margin-left: auto !important;
	justify-content: flex-start !important;
}

body.irandesigner-exact-ui :is(
	.id-inner-hero--about,
	.id-inner-hero--contact,
	.id-inner-hero--portfolio
) .public-inner-hero-title {
	margin-top: 0 !important;
	text-align: right !important;
}

body.irandesigner-exact-ui :is(
	.id-inner-hero--about,
	.id-inner-hero--contact,
	.id-inner-hero--portfolio
) .public-inner-hero-description {
	max-width: 42rem !important;
	margin-right: 0 !important;
	margin-left: auto !important;
	text-align: right !important;
}

@media ( min-width: 640px ) {
	body.irandesigner-exact-ui :is(
		.id-inner-hero--about,
		.id-inner-hero--contact,
		.id-inner-hero--portfolio
	) {
		padding-inline: 2rem !important;
	}
}

@media ( min-width: 768px ) {
	body.irandesigner-exact-ui :is(
		.id-inner-hero--about,
		.id-inner-hero--contact,
		.id-inner-hero--portfolio
	) {
		padding: 2.5rem !important;
	}
}

@media ( min-width: 1024px ) {
	body.irandesigner-exact-ui :is(
		.id-inner-hero--about,
		.id-inner-hero--contact,
		.id-inner-hero--portfolio
	) {
		padding: 2.75rem 3rem !important;
	}
}

/* --------------------------------------------------------------------------
	SEO final CTA — one compact mobile action rail instead of two stacked cards.
	The project request stays dominant; the related-articles action is secondary.
	-------------------------------------------------------------------------- */
@media ( max-width: 639px ) {
	body.single-ir_service.irandesigner-exact-ui .service-detail-page--seo
		.id-service-final-action div:has( > a[title="ارسال درخواست پروژه"] ):has( > a[title="مقالات سئو و بهینه‌سازی"] ) {
		display: grid !important;
		grid-template-columns: minmax( 0, 1.28fr ) minmax( 7.75rem, 0.72fr ) !important;
		align-items: stretch !important;
		gap: 0.35rem !important;
		width: 100%;
		padding: 0.35rem;
		border: 1px solid rgba( 48, 132, 117, 0.16 );
		border-radius: 1.25rem;
		background: rgba( 255, 255, 255, 0.58 );
		box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.92 ), 0 16px 34px -30px rgba( 46, 103, 91, 0.48 );
	}

	body.single-ir_service.irandesigner-exact-ui .service-detail-page--seo
		.id-service-final-action div:has( > a[title="ارسال درخواست پروژه"] ) > a {
		display: flex !important;
		min-width: 0;
	}

	body.single-ir_service.irandesigner-exact-ui .service-detail-page--seo
		.id-service-final-action a[title="ارسال درخواست پروژه"] > button,
	body.single-ir_service.irandesigner-exact-ui .service-detail-page--seo
		.id-service-final-action a[title="مقالات سئو و بهینه‌سازی"] > button {
		width: 100% !important;
		height: auto !important;
		min-height: 3.45rem;
		padding: 0.62rem 0.7rem !important;
		border-radius: 0.95rem !important;
		font-size: 0.79rem !important;
		line-height: 1.55 !important;
		white-space: normal !important;
		text-align: center;
	}

	body.single-ir_service.irandesigner-exact-ui .service-detail-page--seo
		.id-service-final-action a[title="ارسال درخواست پروژه"] > button {
		box-shadow: 0 14px 26px -18px rgba( 165, 73, 47, 0.72 ) !important;
	}

	body.single-ir_service.irandesigner-exact-ui .service-detail-page--seo
		.id-service-final-action a[title="مقالات سئو و بهینه‌سازی"] > button {
		border-color: transparent !important;
		background: transparent !important;
		color: #2f756d !important;
		-webkit-text-fill-color: #2f756d !important;
		box-shadow: none !important;
	}
}