/*
Theme Name: Arsal Services Custom
Theme URI: https://www.arsalservices.com
Author: Arsal Services
Author URI: https://www.arsalservices.com
Description: A fully custom-coded, lightweight WordPress theme for Arsal Services — dark design with gold headings and buttons, white text and black-and-gold scheme. Plain CSS only: no frameworks, no jQuery, one modern sans (Poppins) for headings and body, built to run soft and smooth.
Version: 2.50
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arsal-services
Tags: custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root {
	--bg: #0a0a0a;
	--surface: #111111;
	--surface-2: #161616;
	--border: #2a2a2a;
	--gold: #f5b81e;
	--gold-dark: #d99e06;
	--text: #ffffff;
	--text-muted: #c9c9c9;
	--teal: #14b8a6;
	--whatsapp: #25d366;
	--radius: 14px;
	--container: 1200px;
	--header-h: 76px;
	/* FONT CONTROL (v2.2): the whole site's font is declared here
	   and at --font-display in the luxury block's :root below —
	   both tokens point at Poppins (loaded in functions.php).
	   To change the site font, edit these two tokens and the
	   Google Fonts URL in functions.php; nothing else. */
	--font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   Base
   ============================================================ */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--teal);
	text-decoration: none;
}

a:hover,
a:focus {
	text-decoration: underline;
}

:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
	color: var(--gold);
	line-height: 1.2;
	margin: 0 0 0.5em;
	font-weight: 800;
	letter-spacing: 0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--gold);
	color: #111;
	padding: 10px 16px;
	z-index: 200;
	font-weight: 700;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

.section {
	padding: 72px 0;
}

.section-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 42px;
}

.section-head p {
	color: var(--text-muted);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
	display: inline-block;
	padding: 14px 30px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	border: 2px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn:hover,
.btn:focus {
	text-decoration: none;
}

.btn-gold {
	background: var(--gold);
	color: #0b0b0b;
}

.btn-gold:hover,
.btn-gold:focus {
	background: var(--gold-dark);
	color: #0b0b0b;
}

.btn-whatsapp {
	background: var(--whatsapp);
	color: #ffffff;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
	background: #1eb856;
	color: #ffffff;
}

.btn-outline {
	background: transparent;
	border-color: var(--gold);
	color: var(--gold);
}

.btn-outline:hover,
.btn-outline:focus {
	background: var(--gold);
	color: #111111;
}

.btn-sm {
	padding: 9px 20px;
	font-size: 0.9rem;
}

/* ============================================================
   Header
   ============================================================ */
.site-header {
	background-color: #0b0b0b;
	color: #ffffff;
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 100;
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: var(--header-h);
	position: relative;
}

.site-branding {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.site-branding .custom-logo {
	max-height: 54px;
	width: auto;
}

.site-title {
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0;
}

.site-title a {
	color: var(--gold);
}

.site-title a:hover,
.site-title a:focus {
	text-decoration: none;
}

.primary-nav .menu {
	display: flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav .menu li {
	margin: 0;
}

.primary-nav .menu a {
	display: block;
	padding: 10px 13px;
	color: var(--text);
	font-weight: 600;
	font-size: 0.98rem;
	border-radius: 8px;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.primary-nav .menu a:hover,
.primary-nav .menu a:focus,
.primary-nav .menu .current-menu-item > a,
.primary-nav .menu .current_page_item > a {
	color: var(--teal);
	text-decoration: none;
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 9px;
	background: transparent;
	border: 2px solid var(--gold);
	color: var(--gold);
	border-radius: 10px;
	padding: 9px 14px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.nav-toggle .nav-toggle-bars {
	display: inline-block;
	width: 20px;
}

.nav-toggle .nav-toggle-bars span {
	display: block;
	height: 2px;
	background: var(--gold);
	margin: 4px 0;
}

/* Mobile navigation */
@media (max-width: 900px) {
	.nav-toggle {
		display: inline-flex;
	}

	.primary-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--border);
		padding: 10px 20px 18px;
	}

	.primary-nav.is-open {
		display: block;
	}

	.primary-nav .menu {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}

	.primary-nav .menu a {
		padding: 11px 8px;
	}
}

/* ============================================================
   Hero (front page)
   ============================================================ */
.hero {
	padding: 92px 0 80px;
	text-align: center;
	background: radial-gradient(ellipse at top, #1a1a1a 0%, var(--bg) 65%);
}

.hero h1 {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.hero-sub {
	color: #f5b81e;
	font-size: clamp(1.05rem, 2.5vw, 1.5rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 18px;
}

.hero-text {
	color: var(--text);
	font-size: clamp(1rem, 2vw, 1.2rem);
	max-width: 780px;
	margin: 0 auto 34px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

/* Platform strip — deliberately white: the brand logos are dark */
.platform-strip {
	background: #ffffff;
	padding: 22px 0;
}

.platform-strip .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 44px;
}

.platform-strip span {
	color: #222222;
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: 0.02em;
}

/* ============================================================
   Services grid
   ============================================================ */
.services-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

@media (max-width: 1024px) {
	.services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.services-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.service-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-top: 3px solid var(--teal);
	border-radius: var(--radius);
	padding: 30px 22px 26px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.service-card:hover {
	transform: translateY(-3px);
	border-color: var(--gold);
}

.service-icon {
	width: 46px;
	height: 46px;
	color: var(--gold);
	margin-bottom: 14px;
	flex-shrink: 0;
}

.service-label {
	color: var(--gold);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin: 0 0 6px;
}

.service-name {
	color: var(--text);
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 18px;
}

.service-card .btn {
	margin-top: auto;
}

/* ============================================================
   Generic dark panels (Why Choose / AI / CTA)
   ============================================================ */
.panel {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 40px 34px;
}

.panel-center {
	text-align: center;
}

.panel p {
	color: var(--text-muted);
}

.value-labels {
	color: var(--gold);
	font-weight: 700;
	letter-spacing: 0.03em;
	margin-top: 18px;
}

.cta-final {
	text-align: center;
}

.cta-final p {
	color: var(--text-muted);
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================
   Pricing
   ============================================================ */
.pricing-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	max-width: 860px;
	margin: 0 auto 26px;
}

@media (max-width: 640px) {
	.pricing-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.price-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 34px 26px;
	text-align: center;
}

.price-card .price-name {
	color: var(--text);
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 8px;
}

.price-card .price-value {
	color: var(--gold);
	font-size: 1.9rem;
	font-weight: 800;
	margin: 0;
}

.price-card .price-note {
	color: var(--text-muted);
	font-size: 0.95rem;
	margin: 6px 0 0;
}

.pricing-area {
	text-align: center;
	color: var(--text-muted);
	margin: 0 0 22px;
}

.pricing-action {
	text-align: center;
}

/* ============================================================
   Testimonials
   ============================================================ */
.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

@media (max-width: 1024px) {
	.testimonials-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.testimonials-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.testimonial-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px 22px;
	text-align: center;
}

.testimonial-stars {
	color: var(--gold);
	font-size: 1.05rem;
	letter-spacing: 0.2em;
	margin: 0 0 10px;
}

.testimonial-name {
	color: var(--text);
	font-weight: 700;
	margin: 0;
}

.testimonial-text {
	color: var(--text-muted);
	font-size: 0.96rem;
	margin: 0 0 12px;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	background: var(--bg);
	border-top: 1px solid var(--border);
	margin-top: 0;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px;
	padding: 58px 0 42px;
}

@media (max-width: 1024px) {
	.footer-columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.footer-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

.footer-col h3 {
	font-size: 1rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.footer-col p,
.footer-col li {
	color: var(--text-muted);
	font-size: 0.96rem;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-col li {
	margin-bottom: 9px;
}

.footer-col a {
	color: var(--text-muted);
	transition: color 0.2s ease;
}

.footer-col a:hover,
.footer-col a:focus {
	color: var(--teal);
	text-decoration: none;
}

.copyright-bar {
	border-top: 1px solid var(--border);
	padding: 18px 0;
	text-align: center;
}

.copyright-bar p {
	margin: 0;
	color: var(--text-muted);
	font-size: 0.92rem;
}

/* ============================================================
   Inner pages / posts (generic content rendering)
   ============================================================ */
.site-main {
	padding: 56px 0 72px;
}

.entry-header {
	margin-bottom: 22px;
}

.entry-title {
	margin-bottom: 8px;
}

.entry-meta {
	color: var(--text-muted);
	font-size: 0.92rem;
	margin-bottom: 14px;
}

.entry-content {
	color: var(--text);
	max-width: 820px;
}

.entry-content p,
.entry-content li {
	color: var(--text-muted);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
	margin-top: 1.4em;
}

.entry-content a {
	color: var(--teal);
	text-decoration: underline;
}

.entry-content img {
	border-radius: 10px;
}

.entry-content table {
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 1.2em;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--border);
	padding: 9px 12px;
	text-align: left;
}

.post-list .post-item {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px 24px;
	margin-bottom: 22px;
}

.post-item .entry-title {
	font-size: 1.5rem;
}

.post-item .entry-title a {
	color: var(--gold);
}

.post-item .entry-title a:hover,
.post-item .entry-title a:focus {
	text-decoration: underline;
}

.post-thumbnail {
	margin-bottom: 18px;
}

.post-thumbnail img {
	border-radius: 10px;
	width: 100%;
}

.posts-navigation,
.post-navigation {
	margin-top: 30px;
}

.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.page-numbers {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	margin-right: 6px;
}

.page-numbers.current {
	background: var(--gold);
	color: #111111;
	border-color: var(--gold);
	font-weight: 700;
}

/* Forms (generic — plugin forms keep their own styles too) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 9px;
	color: var(--text);
	padding: 12px 14px;
	font: inherit;
}

input[type="submit"],
button[type="submit"] {
	background: var(--gold);
	color: #111111;
	border: 0;
	border-radius: 999px;
	padding: 13px 28px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* WordPress alignment helpers */
.alignleft {
	float: left;
	margin: 0.4em 1.2em 1em 0;
}

.alignright {
	float: right;
	margin: 0.4em 0 1em 1.2em;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	color: var(--text-muted);
	font-size: 0.9rem;
	text-align: center;
}

/* ============================================================
   Reduced motion: keep everything calm
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}

	.service-card:hover {
		transform: none;
	}
}

/* ============================================================
   Dark-surface hardening (v1.1)

   Why this block exists: in the v1.0 preview, heading colours and
   section backgrounds hung on a single low-specificity global rule
   (h1, h2, h3 { color: var(--gold) }) and on CSS variables, while
   several front-page sections set no background at all. Stylesheets
   that stay loaded alongside this theme (the previous theme's core
   plugin CSS and Elementor's global "kit" typography/colours) use
   class-level selectors, load later, and won the cascade — dark
   grey headings, a white header, and our light muted text landing
   on white sections. The rules below pin the design-critical
   surfaces with explicit hex values on scoped, higher-specificity
   selectors, and .section-dark gives every front-page section its
   own explicit dark background (only .platform-strip stays white).
   ============================================================ */
.section-dark {
	background-color: #0b0b0b;
	color: #ffffff;
}

body .site-header {
	background-color: #0b0b0b;
}

body .site-header .site-title a {
	color: #f5b81e;
}

body .site-header .primary-nav .menu a {
	color: #ffffff;
}

body .site-header .primary-nav .menu a:hover,
body .site-header .primary-nav .menu a:focus,
body .site-header .primary-nav .menu .current-menu-item > a,
body .site-header .primary-nav .menu .current_page_item > a {
	color: #f5b81e;
}

body .hero {
	background-color: #0b0b0b;
}

/* v1.3: the hero H1's main text is ivory — gold is reserved for the
   .gold-i accent phrase inside it (see the luxury block below). In
   v1.1/v1.2 this pin coloured the WHOLE H1 gold. */
body .hero h1 {
	color: #f5f1e8;
}

body .section-head h2,
body .panel h2,
body .cta-final h2 {
	color: #f5b81e;
}

body .service-card .service-name {
	color: #f5b81e;
}

body .section-head p,
body .panel p,
body .cta-final p,
body .pricing-area {
	color: #d1d5db;
}

body .btn-gold {
	background-color: #f5b81e;
	color: #0b0b0b;
}

body .btn-whatsapp {
	background-color: #25d366;
	color: #ffffff;
}

/* ============================================================
   Luxury refinements (v1.2)

   A premium black-and-gold layer built ON TOP of the v1.1
   dark-surface hardening above — nothing up there is removed or
   weakened; the body-scoped rules below simply re-pin the same
   surfaces with the refined palette (#0A0A0A / #111111 / gold
   gradient / hairline gold borders) later in the cascade.
   Poppins (loaded in functions.php) carries every display
   heading and the body text — one modern sans site-wide since
   the v2.2 font change (owner's decision).
   All motion stays inside the reduced-motion guard above,
   which kills transitions and animations with !important.
   ============================================================ */
:root {
	--font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--gold-grad: linear-gradient(135deg, #f6c453, #f5b81e 45%, #c99612);
	--ivory: #edeae2;
	--hairline: rgba(245, 184, 30, 0.35);
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: 0.015em;
}

.section {
	padding: 88px 0;
}

/* Eyebrow labels — small gold caps with a thin rule either side */
.eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin: 0 0 20px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	text-align: center;
}

body .section-head p.eyebrow,
body .panel p.eyebrow,
body .hero p.eyebrow {
	color: #f5b81e;
}

.eyebrow::before,
.eyebrow::after {
	content: "";
	width: 40px;
	height: 1px;
	flex: 0 0 auto;
}

.eyebrow::before {
	background: linear-gradient(90deg, transparent, #f5b81e);
}

.eyebrow::after {
	background: linear-gradient(90deg, #f5b81e, transparent);
}

/* Gold italic accent word (hero H1) */
.gold-i {
	font-style: italic;
	background-image: var(--gold-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

body .hero h1 .gold-i {
	background-image: linear-gradient(135deg, #f6c453, #f5b81e 45%, #c99612);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Hero — oversized display heading, soft gold glow, generous air */
body .hero {
	background-color: #0a0a0a;
	background-image:
		radial-gradient(ellipse 55% 42% at 50% -5%, rgba(245, 184, 30, 0.16), rgba(245, 184, 30, 0) 70%),
		radial-gradient(ellipse at top, #1a1a1a 0%, #0a0a0a 65%);
	padding: 128px 0 104px;
}

body .hero h1 {
	color: #f5f1e8;
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: 0.01em;
	max-width: 1020px;
}

.hero-sub {
	letter-spacing: 0.22em;
	margin-bottom: 16px;
}

.gold-rule-double {
	width: 150px;
	height: 5px;
	margin: 0 auto 28px;
	border-top: 1px solid rgba(245, 184, 30, 0.75);
	border-bottom: 1px solid rgba(245, 184, 30, 0.75);
}

.hero-text {
	color: var(--ivory);
}

/* Gentle fade-up on hero elements only (guard above disables it
   entirely under prefers-reduced-motion) */
@keyframes arsal-fade-up {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero .container > * {
	animation: arsal-fade-up 0.85s ease-out both;
}

.hero .container > *:nth-child(2) { animation-delay: 0.08s; }
.hero .container > *:nth-child(3) { animation-delay: 0.16s; }
.hero .container > *:nth-child(4) { animation-delay: 0.24s; }
.hero .container > *:nth-child(5) { animation-delay: 0.32s; }
.hero .container > *:nth-child(6) { animation-delay: 0.40s; }
.hero .container > *:nth-child(7) { animation-delay: 0.48s; }

/* Hero stats row — real claims only (50+ projects, markets, $350) */
.hero-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px 56px;
	margin-top: 58px;
	padding-top: 36px;
	border-top: 1px solid rgba(245, 184, 30, 0.22);
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	min-width: 150px;
	text-align: center;
}

.stat-value {
	font-family: var(--font-display);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--gold);
}

.stat-value-markets {
	font-size: 1.12rem;
	letter-spacing: 0.06em;
	padding-top: 12px;
	white-space: nowrap;
}

.stat-label {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Buttons — gold gradient with a sheen shift on hover;
   WhatsApp becomes an elegant green outline on the dark hero */
.btn {
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-size: 0.9rem;
	transition: background-color 0.35s ease, background-position 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

/* v1.3: the full gradient now spans the button (background-size
   100%). In v1.2 the gradient was sized 180% and positioned at
   0% 50%, so only its brightest left slice ever showed and the
   button read as flat bright gold. The v1.1 hardening rule above
   sets background-color only, which sits UNDER this image and
   never flattened it — the crop was the real cause. */
body .btn-gold {
	background-color: #f5b81e;
	background-image: linear-gradient(135deg, #f8ce6b 0%, #f5b81e 48%, #ce9410 100%);
	background-size: 100% 100%;
	background-position: 0% 0%;
	color: #0b0b0b;
	box-shadow: 0 10px 30px rgba(245, 184, 30, 0.18);
}

body .btn-gold:hover,
body .btn-gold:focus {
	background-color: #f5b81e;
	background-image: linear-gradient(135deg, #f5b81e 0%, #edb51a 48%, #b9820c 100%);
	color: #0b0b0b;
}

body .btn-whatsapp {
	background-color: transparent;
	background-image: none;
	border-color: #25d366;
	color: #25d366;
	box-shadow: none;
}

body .btn-whatsapp:hover,
body .btn-whatsapp:focus {
	background-color: #25d366;
	color: #0a0a0a;
}

/* Dark sections re-pinned to the refined near-black */
body .section-dark {
	background-color: #0a0a0a;
}

/* Service cards — #111, hairline gold border, display-font number */
.service-card {
	position: relative;
	background-color: #111111;
	border: 1px solid rgba(245, 184, 30, 0.35);
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.service-card:hover {
	transform: translateY(-4px);
	border-color: rgba(245, 184, 30, 0.9);
	box-shadow: 0 20px 44px rgba(245, 184, 30, 0.13);
}

.service-num {
	position: absolute;
	top: 12px;
	right: 16px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1;
	color: rgba(245, 184, 30, 0.5);
}

.service-card .service-name {
	font-family: var(--font-display);
	font-size: 1.22rem;
	letter-spacing: 0.01em;
}

/* Panels, pricing and testimonial cards — hairline gold on #111 */
.panel,
.price-card,
.testimonial-card {
	background-color: #111111;
	border: 1px solid rgba(245, 184, 30, 0.35);
}

.price-card .price-value {
	font-family: var(--font-display);
	font-size: 2.3rem;
}

/* Premium tier: the $500 Ecommerce card gets a gold gradient border
   (visual emphasis only — no "popular/best" claim anywhere) */
.price-card-premium {
	border: 1px solid transparent;
	background:
		linear-gradient(#161616, #161616) padding-box,
		linear-gradient(135deg, #f6c453, #f5b81e 45%, #c99612) border-box;
	box-shadow: 0 18px 44px rgba(245, 184, 30, 0.12);
}

/* Testimonials — big display-font quote glyph, ivory quote text */
.quote-glyph {
	display: block;
	font-family: var(--font-display);
	font-size: 3.2rem;
	line-height: 0.8;
	color: var(--gold);
	margin-bottom: 10px;
}

.testimonial-text {
	color: var(--ivory);
	font-size: 1rem;
}

/* Header — display-font name, spaced uppercase menu, gold hairline */
body .site-header {
	background-color: #0a0a0a;
	border-bottom: 1px solid rgba(245, 184, 30, 0.35);
}

body .site-header .site-title {
	font-family: var(--font-display);
	letter-spacing: 0.03em;
}

body .site-header .primary-nav .menu a {
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Footer — display-font gold headings, hairline dividers */
.site-footer {
	background-color: #0a0a0a;
	border-top: 1px solid rgba(245, 184, 30, 0.35);
}

.footer-col h3 {
	font-family: var(--font-display);
	border-bottom: 1px solid rgba(245, 184, 30, 0.22);
	padding-bottom: 10px;
}

.copyright-bar {
	border-top: 1px solid rgba(245, 184, 30, 0.18);
}

/* Mobile luxury scaling — clamp handles the hero type; the stats
   row wraps and nothing runs sideways */
@media (max-width: 560px) {
	body .hero {
		padding: 84px 0 72px;
	}

	.eyebrow {
		letter-spacing: 0.25em;
		gap: 10px;
	}

	.eyebrow::before,
	.eyebrow::after {
		width: 24px;
	}

	.hero-stats {
		gap: 20px 28px;
		margin-top: 44px;
	}

	.stat-item {
		min-width: 120px;
	}

	.stat-value-markets {
		white-space: normal;
	}
}

/* ============================================================
   v1.3 — serif section headings + inner-page light sheet

   1) Section headings: v1.2 set the display font through one
   low-specificity element rule (h1, h2, h3, h4 { font-family }),
   which Elementor's global kit typography beat for the section
   H2s — they rendered bold sans while class-styled text (card
   titles, prices) kept the display font. The pins below use class-level
   body-scoped selectors so the front-page section headings stay
   on the display font.

   2) Inner pages: the site's inner pages are Elementor-built and
   their content area is WHITE, while this theme's global text
   colours are light (body text #FFFFFF, entry text muted
   #C9C9C9) — pale grey on white, barely readable, and page.php
   also printed a second H1 above the pages' own H1. v1.3 did
   NOT force those pages dark: the non-front-page templates
   wrapped their content in .site-main.light-main — a light
   content sheet (white background, dark text) framed by the
   theme's dark luxury header and footer — so unstyled/inherited
   text stayed dark and readable while Elementor widgets kept
   their own colours.

   v2.4 SUPERSEDES the light sheet (owner's orders 2026-11-05:
   "All pages ki color scheme same rakho" / "Har page ko unique
   luxury design kro", with his phone screenshot of an inner
   page rendered unreadable — dark-grey body text invisible on
   a black Elementor panel, black-and-gold scheme on white). The
   .light-main class name is kept (templates unchanged) but the
   sheet is now the SAME dark luxury scheme as the homepage:
   #0A0A0A page background, Elementor section/column/wrapper
   backgrounds forced transparent, and text colours pinned with
   !important so Elementor widget colours lose and every page
   stays readable. The full pin list + risk notes live in the
   v2.4 section of README.md.
   ============================================================ */
body .section-head h2,
body .panel h2,
body .cta-final h2 {
	font-family: var(--font-display);
}

/* v2.4: the sheet is DARK — same luxury scheme as the homepage
   (owner's order; see the history note above and README v2.4).
   The class name stays .light-main so templates are unchanged.
   Padding is untouched: it lives on .site-main (56px 0 72px). */
.light-main {
	background-color: #0a0a0a;
	color: #d1d5db;
}

/* Headings — ivory, forced: Elementor heading-widget colours
   (near-black, teal) must lose on the dark sheet. */
.light-main h1,
.light-main h2,
.light-main h3,
.light-main h4,
.light-main h5,
.light-main h6 {
	color: #f5f1e8 !important;
	font-family: var(--font-display);
}

/* Elementor headings whose tag is a div/span carry this class
   instead of a real h1–h6. */
.light-main .elementor-heading-title {
	color: #f5f1e8 !important;
}

/* Content links — gold, underline on hover. Buttons are
   excluded (they keep their own .btn / .btn-gold / Elementor
   button styling), and so are pagination numbers, which have
   their own rules below. */
.light-main a:not(.btn):not(.elementor-button):not(.page-numbers):not([style*="background"]):not(.wp-block-button__link) {
	color: #f5b81e !important;
}

.light-main a:not(.btn):not(.elementor-button):not(.page-numbers):not([style*="background"]):not(.wp-block-button__link):hover,
.light-main a:not(.btn):not(.elementor-button):not(.page-numbers):not([style*="background"]):not(.wp-block-button__link):focus {
	color: #f5b81e !important;
	text-decoration: underline;
}

/* Body text — forced light grey: covers theme-rendered content
   (.entry-content), Elementor text-editor widgets and bare
   paragraphs/lists, so dark-grey or teal widget text can never
   sit unreadably on the black sheet again. */
.light-main .entry-content {
	color: #d1d5db;
	max-width: none;
}

.light-main p,
.light-main li,
.light-main .entry-content p,
.light-main .entry-content li,
.light-main .elementor-widget-text-editor {
	color: #d1d5db !important;
}

/* The common text-bearing Elementor widgets on the service
   pages: box titles read as headings (ivory), descriptions and
   icon lists as body text. */
.light-main .elementor-icon-box-title,
.light-main .elementor-image-box-title {
	color: #f5f1e8 !important;
}

.light-main .elementor-icon-box-description,
.light-main .elementor-image-box-description,
.light-main .elementor-icon-list-text {
	color: #d1d5db !important;
}

.light-main .entry-meta {
	color: #9ca3af !important;
}

.light-main .wp-caption-text {
	color: #9ca3af !important;
}

/* Elementor structure — section / column / wrapper background
   COLOURS are forced transparent so the sheet's #0A0A0A shows
   through instead of white or coloured bands. Background
   IMAGES are background-image, not background-color, and are
   deliberately left alone. */
.light-main .elementor-section,
.light-main .elementor-column,
.light-main .elementor-widget-wrap,
.light-main .elementor-widget-container {
	background-color: transparent !important;
}

/* Tables on the dark sheet: light text, gold hairline row
   borders, header row gold-on-panel. */
.light-main th,
.light-main td {
	color: #d1d5db;
	border-color: rgba(245, 184, 30, 0.18);
}

.light-main th {
	background-color: #111111;
	color: #f5b81e;
}

/* Listing cards + pagination on the dark sheet */
.light-main .post-list .post-item {
	background-color: #111111;
	border-color: rgba(245, 184, 30, 0.25);
}

.light-main .post-item .entry-title a {
	color: #f5f1e8 !important;
}

.light-main .post-item .entry-title a:hover,
.light-main .post-item .entry-title a:focus {
	color: #f5b81e !important;
}

.light-main .page-numbers {
	color: #edeae2;
	border-color: rgba(245, 184, 30, 0.35);
}

.light-main .page-numbers.current {
	background-color: #f5b81e;
	border-color: #f5b81e;
	color: #111111;
}

/* Forms on the dark sheet (WPForms + native): ivory labels,
   dark fields with a gold hairline border and ivory text.
   Submit buttons are NOT pinned — they keep plugin styling.
   The pins use !important so the WPForms stylesheet cannot
   repaint the fields white. */
.light-main label {
	color: #edeae2 !important;
}

.light-main input[type="text"],
.light-main input[type="email"],
.light-main input[type="tel"],
.light-main input[type="url"],
.light-main input[type="search"],
.light-main input[type="number"],
.light-main input[type="password"],
.light-main textarea,
.light-main select {
	background-color: #111111 !important;
	border-color: rgba(245, 184, 30, 0.35) !important;
	color: #f5f1e8 !important;
}

.light-main ::placeholder {
	color: #9ca3af;
}

/* ============================================================
   v2 coded popup (Phase 1 — feature-flagged markup)

   Styles for the hand-coded lead popup printed by inc/popup.php.
   The markup only exists while the ARSAL_CODED_POPUP flag is on
   (default OFF), so on the live v1.4 build none of these rules
   match anything. Everything is scoped under .arsal-modal so it
   cannot disturb the v1.1–v1.3 rules above. The layout mirrors
   the owner-approved live popup: left dark navy gradient panel
   (#0A1F44 → #16365F, radius 16px) + form on a clean light sheet.

   Behaviour contract (enforced in nav.js): the dialog can only
   be opened by a click — no class here can show it on its own —
   and it scrolls internally (max-height: calc(100vh - 32px))
   so SEND stays reachable on small screens.
   ============================================================ */
.arsal-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.arsal-modal[hidden] {
	display: none !important;
}

.arsal-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(3, 6, 12, 0.78);
}

.arsal-modal__dialog {
	position: relative;
	display: grid;
	grid-template-columns: 45% 55%;
	width: min(920px, 100%);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

.arsal-modal__close {
	position: absolute;
	top: 10px;
	right: 12px;
	z-index: 2;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(10, 10, 10, 0.06);
	color: #111111;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.arsal-modal__close:hover,
.arsal-modal__close:focus {
	background: #f5b81e;
	color: #0b0b0b;
}

/* Left panel — the approved navy gradient look */
.arsal-modal__panel {
	background: linear-gradient(160deg, #0a1f44 0%, #16365f 100%);
	color: #ffffff;
	padding: 38px 32px;
	display: flex;
	flex-direction: column;
	border-radius: 16px 0 0 16px;
}

.arsal-modal__panel-title {
	font-family: var(--font-display);
	color: #ffffff;
	font-size: 2rem;
	margin: 0 0 14px;
}

.arsal-modal__panel-text {
	color: rgba(255, 255, 255, 0.86);
	margin: 0 0 24px;
}

.arsal-modal__points {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
}

.arsal-modal__points li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 14px;
	color: #ffffff;
}

.arsal-modal__points li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 1px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: rgba(245, 184, 30, 0.16);
	color: #f5b81e;
	font-size: 0.8rem;
	font-weight: 800;
	line-height: 21px;
	text-align: center;
}

.arsal-modal__whatsapp {
	margin-top: auto;
	display: inline-block;
	text-align: center;
	background: #25d366;
	color: #ffffff;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.88rem;
	padding: 13px 24px;
	border-radius: 999px;
}

.arsal-modal__whatsapp:hover,
.arsal-modal__whatsapp:focus {
	background: #1eb856;
	color: #ffffff;
	text-decoration: none;
}

/* Right side — the form on a light sheet */
.arsal-modal__body {
	padding: 34px 32px 30px;
	color: #111111;
}

.arsal-lead-form .arsal-field {
	margin: 0 0 16px;
}

.arsal-lead-form label {
	display: block;
	font-weight: 700;
	font-size: 0.92rem;
	color: #111111;
	margin-bottom: 6px;
}

.arsal-lead-form input[type="text"],
.arsal-lead-form input[type="email"],
.arsal-lead-form input[type="tel"],
.arsal-lead-form textarea {
	width: 100%;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 9px;
	color: #1f2937;
	padding: 12px 14px;
	font: inherit;
}

.arsal-lead-form input:focus,
.arsal-lead-form textarea:focus {
	border-color: #f5b81e;
	outline: 2px solid rgba(245, 184, 30, 0.45);
	outline-offset: 0;
}

.arsal-lead-form .arsal-lead-submit {
	width: 100%;
	margin-top: 4px;
}

.arsal-lead-form .arsal-lead-submit[disabled] {
	opacity: 0.65;
	cursor: wait;
}

/* Honeypot: off-screen, never display:none (bots look for that) */
.arsal-hp {
	position: absolute;
	left: -9999px;
	top: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.arsal-form-status {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: #991b1b;
	border-radius: 9px;
	padding: 11px 14px;
	font-size: 0.94rem;
	margin: 0 0 16px;
}

/* Success state (replaces the form in place, no page reload) */
.arsal-modal__success {
	text-align: center;
	padding: 30px 6px 10px;
}

.arsal-success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(245, 184, 30, 0.15);
	border: 1px solid rgba(245, 184, 30, 0.5);
	color: #b9820c;
	font-size: 1.9rem;
	font-weight: 800;
	margin-bottom: 16px;
}

.arsal-success-text {
	font-size: 1.12rem;
	font-weight: 600;
	color: #111111;
	margin: 0 0 22px;
}

/* Body scroll lock while the popup is open */
body.arsal-modal-open {
	overflow: hidden;
}

/* Small screens: one column, compact panel, dialog keeps its
   internal scroll so SEND stays reachable */
@media (max-width: 767px) {
	.arsal-modal__dialog {
		grid-template-columns: minmax(0, 1fr);
	}

	.arsal-modal__panel {
		border-radius: 16px 16px 0 0;
		padding: 24px 22px 20px;
	}

	.arsal-modal__panel-title {
		font-size: 1.55rem;
	}

	.arsal-modal__points {
		margin-bottom: 18px;
	}

	.arsal-modal__points li {
		margin-bottom: 9px;
	}

	.arsal-modal__body {
		padding: 24px 20px 22px;
	}
}

/* ============================================================
   Free website audit tool (v2 Phase 2 — page-audit.php)

   Styles for the audit page rendered by page-audit.php and the
   report filled in by assets/js/audit.js. Everything is scoped
   under .audit- so it cannot disturb the sections above. The
   form sits on a dark panel (unlike the popup's light sheet):
   dark inputs on --surface-2, gold focus ring like the lead
   form. Check statuses reuse the site palette — pass = teal,
   warn = gold, fail = a clear red — each with a glyph icon
   (✓ / ! / ✕) printed by the JS, so colour is never the only
   signal.
   ============================================================ */
.audit-panel {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.audit-form .audit-field {
	margin: 0 0 16px;
}

.audit-form label {
	display: block;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--text);
	margin-bottom: 6px;
}

.audit-form input[type="text"],
.audit-form input[type="email"] {
	width: 100%;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 9px;
	color: #ffffff;
	padding: 12px 14px;
	font: inherit;
}

.audit-form input:focus {
	border-color: #f5b81e;
	outline: 2px solid rgba(245, 184, 30, 0.45);
	outline-offset: 0;
}

.audit-form .audit-submit {
	width: 100%;
	margin-top: 4px;
}

.audit-form .audit-submit[disabled] {
	opacity: 0.65;
	cursor: wait;
}

.audit-note {
	margin: 14px 0 0;
	font-size: 0.88rem;
	color: var(--text-muted);
	text-align: center;
}

/* Loading state (the server-side fetch takes a few seconds) */
.audit-loading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 22px 0 0;
	color: var(--text-muted);
	font-size: 0.95rem;
}

.audit-loading[hidden] {
	display: none;
}

.audit-spinner {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid rgba(245, 184, 30, 0.25);
	border-top-color: #f5b81e;
	animation: audit-spin 0.8s linear infinite;
}

@keyframes audit-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.audit-spinner {
		animation: none;
	}
}

/* Results — score ring + verdict */
.audit-results {
	max-width: 860px;
	margin: 44px auto 0;
}

.audit-results[hidden] {
	display: none;
}

.audit-score-wrap {
	display: flex;
	align-items: center;
	gap: 34px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 30px 34px;
}

.audit-ring {
	position: relative;
	flex: 0 0 auto;
	width: 150px;
	height: 150px;
}

.audit-ring__svg {
	width: 150px;
	height: 150px;
	transform: rotate(-90deg);
}

.audit-ring__bg {
	fill: none;
	stroke: #2a2a2a;
	stroke-width: 10;
}

.audit-ring__fg {
	fill: none;
	stroke: var(--gold);
	stroke-width: 10;
	stroke-linecap: round;
	transition: stroke-dashoffset 0.8s ease;
}

.audit-ring--good .audit-ring__fg {
	stroke: var(--teal);
}

.audit-ring--warn .audit-ring__fg {
	stroke: var(--gold);
}

.audit-ring--bad .audit-ring__fg {
	stroke: #e5484d;
}

.audit-score-num {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	padding-top: 48px;
	font-family: var(--font-display);
	font-size: 2.9rem;
	font-weight: 700;
	line-height: 1;
	color: #ffffff;
}

.audit-score-num small {
	font-size: 1.05rem;
	color: var(--text-muted);
	margin-left: 3px;
}

.audit-score-side h2 {
	margin-top: 0;
}

.audit-verdict {
	font-size: 1.12rem;
	color: var(--text);
	margin: 0 0 10px;
}

.audit-for {
	margin: 0;
	font-size: 0.92rem;
	color: var(--text-muted);
	word-break: break-all;
}

/* Results — per-check list */
.audit-checks {
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.audit-check {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 4px solid var(--border);
	border-radius: var(--radius);
	padding: 16px 18px;
}

.audit-check--pass {
	border-left-color: var(--teal);
}

.audit-check--warn {
	border-left-color: var(--gold);
}

.audit-check--fail {
	border-left-color: #e5484d;
}

.audit-check__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 0.85rem;
	font-weight: 800;
	line-height: 1;
	margin-top: 2px;
}

.audit-check--pass .audit-check__icon {
	background: rgba(20, 184, 166, 0.16);
	color: var(--teal);
}

.audit-check--warn .audit-check__icon {
	background: rgba(245, 184, 30, 0.16);
	color: var(--gold);
}

.audit-check--fail .audit-check__icon {
	background: rgba(229, 72, 77, 0.16);
	color: #ff8589;
}

.audit-check__body {
	display: block;
}

.audit-check__label {
	display: block;
	font-size: 1rem;
	color: #ffffff;
}

.audit-check__detail {
	display: block;
	margin-top: 3px;
	font-size: 0.94rem;
	color: var(--text-muted);
}

/* Results — consultation CTA under the report */
.audit-cta {
	margin-top: 30px;
}

/* Small screens: stack the score block */
@media (max-width: 767px) {
	.audit-score-wrap {
		flex-direction: column;
		text-align: center;
		padding: 26px 20px;
		gap: 22px;
	}

	.audit-for {
		word-break: break-word;
	}
}

/* ============================================================
   v2.2 — topbar marquee, luxury mobile menu button, sub-menus

   1) Topbar: the owner's services headline scrolling above the
   header (header.php prints the line twice; the track animates
   translateX 0 → -50% so the loop is seamless). Pure CSS — no
   JS. Pauses on hover; static under prefers-reduced-motion.

   2) Mobile menu button: the owner's phone showed the toggle as
   a big TEAL pill (~64px) — that styling is NOT in this theme
   (the base rule is a slim gold outline); leftover plugin/kit
   styles loaded alongside the theme restyle the <button>. The
   body-scoped pin below re-asserts the luxury look with
   explicit values, the same hardening pattern as v1.1–v1.3.

   3) Sub-menus: header.php now renders the primary menu at
   depth 2, so SERVICES' children exist as .sub-menu. Desktop
   gets a hover dropdown; mobile gets a chevron accordion
   (toggle buttons added by nav.js, .is-sub-open shows the
   panel). Before v2.2 there were no .sub-menu styles at all
   and depth 1 suppressed the items entirely.
   ============================================================ */

/* --- 1) Topbar scrolling headline --- */
.topbar {
	background-color: #050505;
	border-bottom: 1px solid rgba(245, 184, 30, 0.25);
	height: 36px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.topbar-track {
	display: flex;
	flex-shrink: 0;
	white-space: nowrap;
	animation: arsal-topbar-scroll 30s linear infinite;
	will-change: transform;
}

.topbar-line {
	color: #f5b81e;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1;
	padding-right: 12px;
}

@keyframes arsal-topbar-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

.topbar:hover .topbar-track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.topbar-track {
		animation: none;
	}
}

/* --- 2) Mobile menu button — luxury pin (no teal, ~46px) ---
   v2.4: !important added to background / border / colour — the
   plain pin won on the homepage but the teal pill still won on
   some inner pages (owner's phone screenshots), so the paint
   declarations are now forced, same pattern as the v2.3.1
   .btn-gold label pin. */
body .site-header .nav-toggle {
	background-color: #0b0b0b !important;
	background-image: none !important;
	border: 1px solid rgba(245, 184, 30, 0.55) !important;
	border-radius: 999px;
	color: #f5b81e !important;
	height: 46px;
	min-height: 46px;
	padding: 0 18px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

body .site-header .nav-toggle .nav-toggle-bars span {
	background-color: #f5b81e !important;
}

/* --- 3a) Sub-menus on desktop — hover dropdown --- */
.sub-menu-toggle {
	display: none;
}

@media (min-width: 901px) {
	.primary-nav .menu > li {
		position: relative;
	}

	.primary-nav .sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 250px;
		margin: 0;
		padding: 8px;
		list-style: none;
		background-color: #111111;
		border: 1px solid rgba(245, 184, 30, 0.35);
		border-radius: 10px;
		box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
		z-index: 120;
	}

	.primary-nav .menu > li:hover > .sub-menu,
	.primary-nav .menu > li:focus-within > .sub-menu {
		display: block;
	}

	.primary-nav .sub-menu a {
		padding: 10px 12px;
		white-space: nowrap;
		border-radius: 6px;
	}

	body .site-header .primary-nav .menu .sub-menu a:hover,
	body .site-header .primary-nav .menu .sub-menu a:focus {
		color: #f5b81e;
	}
}

/* --- 3b) Sub-menus on mobile — chevron accordion --- */
@media (max-width: 900px) {
	.primary-nav .menu > li.menu-item-has-children {
		position: relative;
	}

	.primary-nav .menu > li.menu-item-has-children > a {
		padding-right: 52px;
	}

	.sub-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 2px;
		right: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.sub-menu-chevron {
		display: block;
		width: 10px;
		height: 10px;
		border-right: 2px solid #f5b81e;
		border-bottom: 2px solid #f5b81e;
		transform: rotate(45deg);
		transition: transform 0.25s ease;
	}

	.primary-nav .menu > li.is-sub-open > .sub-menu-toggle .sub-menu-chevron {
		transform: rotate(225deg);
	}

	.primary-nav .sub-menu {
		display: none;
		list-style: none;
		margin: 2px 0 8px;
		padding: 4px 0 4px 16px;
		border-left: 1px solid rgba(245, 184, 30, 0.35);
	}

	.primary-nav .menu > li.is-sub-open > .sub-menu {
		display: block;
	}

	body .site-header .primary-nav .menu .sub-menu a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 10px 8px;
		font-size: 0.94rem;
		font-weight: 500;
		color: #edeae2;
		text-transform: none;
		letter-spacing: 0.02em;
	}
}

/* ============================================================
   v2.3 — homepage services slider

   The owner's order: a services slider running on the homepage
   too (front-page.php prints it right after the hero, before
   the platform strip). The same 12 services as the grid below
   it, rendered as link-cards and printed TWICE in the track;
   the track animates translateX 0 → -50% so the loop is
   seamless. 40s per loop — slower than the 30s topbar, because
   these are big cards, not a text line. Pure CSS, no JS.
   Pauses on hover/focus; under prefers-reduced-motion the
   animation stops and the viewport scrolls horizontally so the
   cards can be swiped through by hand. The section clips its
   own overflow, so the page can never scroll sideways.
   ============================================================ */

.services-slider {
	background-color: #0a0a0a;
	border-top: 1px solid rgba(245, 184, 30, 0.25);
	border-bottom: 1px solid rgba(245, 184, 30, 0.25);
	padding: 38px 0 42px;
	overflow: hidden;
}

.services-slider .eyebrow {
	color: #f5b81e;
	margin-bottom: 28px;
}

.services-slider-viewport {
	overflow: hidden;
}

.services-slider-track {
	display: flex;
	width: max-content;
	animation: arsal-services-scroll 40s linear infinite;
	will-change: transform;
}

.services-slider:hover .services-slider-track,
.services-slider:focus-within .services-slider-track {
	animation-play-state: paused;
}

.services-slider-set {
	display: flex;
	gap: 22px;
	padding-right: 22px;
	flex-shrink: 0;
}

.services-slider-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 260px;
	flex-shrink: 0;
	background-color: #111111;
	border: 1px solid rgba(245, 184, 30, 0.35);
	border-radius: var(--radius);
	padding: 30px 22px 26px;
	text-decoration: none;
	transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.services-slider-card:hover,
.services-slider-card:focus-visible {
	transform: translateY(-4px);
	border-color: rgba(245, 184, 30, 0.9);
	box-shadow: 0 20px 44px rgba(245, 184, 30, 0.13);
}

/* Same corner number as the grid cards (.service-num) */
.services-slider-num {
	position: absolute;
	top: 12px;
	right: 16px;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1;
	color: rgba(245, 184, 30, 0.5);
}

/* Same gold Poppins title as the grid cards (.service-name) */
.services-slider-name {
	font-family: var(--font-display);
	font-size: 1.22rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.35;
	color: #f5b81e;
}

@keyframes arsal-services-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.services-slider-track {
		animation: none;
	}

	.services-slider-viewport {
		overflow-x: auto;
	}
}

/* ============================================================
   v2.3 responsive hardening
   Defensive guards only (max-width / min-width / overflow /
   box-sizing) — no colour, font or layout-value changes.
   Stops sideways scrolling when inner-page (.light-main)
   Elementor content renders wider than a phone viewport.
   ============================================================ */
@supports not (overflow-x: clip) {
	html,
	body {
		overflow-x: hidden;
	}
}

html,
body {
	overflow-x: clip;
}

.light-main {
	max-width: 100%;
	box-sizing: border-box;
}

.light-main *,
.light-main *::before,
.light-main *::after {
	box-sizing: border-box;
}

.light-main img,
.light-main video,
.light-main iframe,
.light-main embed {
	max-width: 100%;
	height: auto;
}

.light-main pre,
.light-main code {
	max-width: 100%;
	overflow-x: auto;
}

.light-main p,
.light-main li,
.light-main h1,
.light-main h2,
.light-main h3,
.light-main h4,
.light-main h5,
.light-main h6,
.light-main td,
.light-main th {
	overflow-wrap: break-word;
}

.light-main input,
.light-main select,
.light-main textarea {
	max-width: 100%;
}

.light-main .elementor,
.light-main .elementor-section,
.light-main .elementor-container,
.light-main .elementor-column,
.light-main .elementor-widget-wrap {
	max-width: 100%;
	min-width: 0;
}

.light-main .elementor {
	overflow-x: clip;
}

@media (max-width: 700px) {
	.light-main table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}

/* Popup + audit form: same guards where they were missing.
   (.arsal-modal__dialog was already width-capped via
   width: min(920px, 100%) and .audit-panel already had
   max-width: 760px, so only the missing pieces are added.) */
.arsal-modal,
.arsal-modal__dialog {
	max-width: 100%;
	box-sizing: border-box;
}

.audit-form input,
.audit-form select,
.audit-form textarea {
	max-width: 100%;
	box-sizing: border-box;
}

/* ==========================================================================
   v2.3.1 — gold button label: WHITE + BOLD (owner's order 2026-11-05).
   Leftover kit styles were painting .btn-gold labels teal; this final pin
   sits last in the file and uses !important on the colour only, so no
   outside stylesheet can recolour the label. Applies to every gold button
   site-wide (hero CTA, service-card "Read me", pricing, AI section).
   ========================================================================== */
body a.btn-gold,
body .btn-gold {
	color: #ffffff !important;
	font-weight: 700;
}

body a.btn-gold:hover,
body a.btn-gold:focus,
body .btn-gold:hover,
body .btn-gold:focus {
	color: #ffffff !important;
}

/* ==========================================================================
   v2.3.3 — testimonials ARROW SLIDER (owner's order 2026-11-05:
   "Reviews ko bi arrow slide kr DU"). The four verbatim reviews in
   front-page.php are no longer stacked cards: they sit in a
   scroll-snap carousel (.testi-viewport) with gold arrow buttons and
   dots. The card itself is NOT redesigned — the existing
   .testimonial-card / .quote-glyph / .testimonial-stars /
   .testimonial-text / .testimonial-name rules above still style it;
   this section only adds the slider mechanics around it. The old
   .testimonials-grid rules are unused now and left in place.

   Arrow placement (chosen approach): the slider is a CSS grid capped
   at 920px and centred, so on desktop (>= 901px) the arrows flank
   the viewport in the grid's side columns, vertically centred on
   the card and hugging it (never overlapping — they live in their
   own 46px columns), with the dots in a row underneath. On mobile
   (<= 900px) the viewport takes the full row and the arrows drop
   into a single controls row under the card: prev left, dots
   centre, next right. Behaviour (smooth wrap-around arrows, dots,
   5.5s auto-advance that pauses on interaction, nothing automatic
   under prefers-reduced-motion) lives in the v2.3.3 block of
   assets/js/nav.js.
   ========================================================================== */
.testi-slider {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) 46px;
	grid-template-areas:
		"prev view next"
		"dots dots dots";
	align-items: center;
	gap: 18px 14px;
	max-width: 920px;
	margin: 0 auto;
}

.testi-viewport {
	grid-area: view;
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.testi-viewport::-webkit-scrollbar {
	display: none;
}

.testi-slide {
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: center;
	display: flex;
}

/* The card fills its slide (equal heights across reviews) and is
   capped at 760px, centred — on wide screens the quote never
   stretches wall-to-wall. Margin is zeroed: <figure> carries a UA
   default margin and this theme has no figure reset. */
.testi-slide .testimonial-card {
	margin: 0 auto;
	width: 100%;
	max-width: 760px;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.testi-arrow {
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	background-color: #0b0b0b;
	border: 1px solid rgba(245, 184, 30, 0.55);
	color: var(--gold);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.testi-prev {
	grid-area: prev;
}

.testi-next {
	grid-area: next;
}

.testi-arrow:hover,
.testi-arrow:focus-visible {
	border-color: rgba(245, 184, 30, 0.9);
	box-shadow: 0 10px 26px rgba(245, 184, 30, 0.16);
	color: #f6c453;
}

.testi-arrow:focus-visible,
.testi-dot:focus-visible {
	outline: 2px solid rgba(245, 184, 30, 0.7);
	outline-offset: 2px;
}

.testi-dots {
	grid-area: dots;
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.testi-dot {
	width: 11px;
	height: 11px;
	padding: 0;
	border-radius: 50%;
	background-color: rgba(245, 184, 30, 0.35);
	border: 1px solid rgba(245, 184, 30, 0.35);
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.testi-dot:hover {
	background-color: rgba(245, 184, 30, 0.7);
	border-color: rgba(245, 184, 30, 0.7);
}

.testi-dot.is-active {
	background-color: #f5b81e;
	border-color: #f5b81e;
}

/* Mobile: viewport full width; arrows + dots share one row under
   the card (prev left, dots centre, next right). */
@media (max-width: 900px) {
	.testi-slider {
		grid-template-areas:
			"view view view"
			"prev dots next";
		gap: 16px 10px;
	}

	.testi-prev {
		justify-self: start;
	}

	.testi-next {
		justify-self: end;
	}
}

@media (prefers-reduced-motion: reduce) {
	.testi-arrow,
	.testi-dot {
		transition: none;
	}
}

/* ==========================================================================
   v2.4 — golden sub-menu arrow (this section) + one luxury scheme
   on every page (owner's orders 2026-11-05: "Yaha golden arrow
   down laga do" / "All pages ki color scheme same rakho" /
   "Har page ko unique luxury design kro").

   The every-page dark conversion itself lives in the v1.3 block
   above, where the old .light-main light-sheet rules were
   rewritten in place (dark #0A0A0A sheet, forced-readable text,
   transparent Elementor structure, dark forms/tables/cards).
   This section carries the one piece that had to be appended
   last to win the cascade: the mobile sub-menu toggle pin.
   The v2.2 .nav-toggle pin was also strengthened in place with
   !important (see its comment in the v2.2 block).
   ========================================================================== */

/* --- Mobile sub-menu toggle — hardening pin + GOLDEN DOWN ARROW ---
   On the owner's phone the v2.2 toggle rendered as a big TEAL
   pill with a tiny mark: leftover kit styles paint the button
   (its own rule in the v2.2 block only sets background:
   transparent / border: 0, which the kit beats). This pin sits
   last in the file, is body-scoped, and forces the paint with
   !important — dark pill, gold hairline border — while the
   chevron is enlarged into a clear gold down arrow (~20px
   visual: a 15px box with 3px strokes). The 44px tap target
   and the rotate-on-.is-sub-open rule from v2.2 are untouched
   and keep working (this pin sets no transform). */
@media (max-width: 900px) {
	body .site-header .primary-nav .sub-menu-toggle {
		background-color: #0b0b0b !important;
		background-image: none !important;
		border: 1px solid rgba(245, 184, 30, 0.55) !important;
		border-radius: 999px;
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}

	body .site-header .primary-nav .sub-menu-toggle .sub-menu-chevron {
		width: 15px;
		height: 15px;
		border-right: 3px solid #f5b81e !important;
		border-bottom: 3px solid #f5b81e !important;
	}
}

/* ==========================================================================
   v2.5 — ANIMATIONS (owner's order 2026-11-05: "Landing page me
   aur Baki pages me animation bi rakho" — landing page AND every
   other page; standing rule: soft and smooth).

   A tasteful, lightweight luxury motion layer, appended last and
   fully self-contained:

   1. SCROLL REVEAL — elements fade in and rise ~18px as they
      enter the viewport (opacity/transform only, ~0.7s soft
      ease), with a small capped stagger for grid children. The
      targets are marked by the v2.5 module in nav.js with
      [data-reveal]; the stagger delay rides on --reveal-delay.
      Homepage: section heads, service cards, pricing cards, the
      panels, the services-slider band, the reviews slider, the
      final CTA. Inner pages: each Elementor section inside
      .light-main. Blog listings: post cards.
   2. HERO ENTRANCE — hero children animate in sequence on page
      load (CSS animation, gated on html.anim-on so it can only
      run once JS is alive; the hero is never left waiting).
   3. HOVER POLISH — a soft sheen sweep across gold buttons and
      a lift+glow for pricing cards (service cards already had
      theirs since v1.2 — not duplicated here).

   SAFETY — progressive enhancement, non-negotiable:
   - Pre-reveal (hidden) states exist ONLY under html.anim-on,
     a class the JS adds before it marks a single target. With
     JS off, blocked or failed, no rule in this section can hide
     anything and the page renders exactly as v2.4 did.
   - The IO-less fallback (reveal everything at once) lives in
     the JS module.
   - prefers-reduced-motion: every rule that hides or moves
     anything sits inside the no-preference media query below,
     AND the explicit reduce block at the end of this section
     pins the targets visible and still. The global reduced-
     motion guard near the top of this file also keeps killing
     transitions/animations site-wide.
   - The existing keyframe animations (topbar marquee, services
     marquee, audit spinner, popup fade) are NOT touched; the
     one keyframe below is new and used only by this section.
   ========================================================================== */

@keyframes arsal-hero-in {
	from {
		opacity: 0;
		transform: translateY(16px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: no-preference) {

	/* --- Scroll reveal ------------------------------------------
	   Hidden state only while JS has claimed the page
	   (html.anim-on) and the observer has not yet revealed the
	   element. The transition lives on the base [data-reveal]
	   rule so the change of state is what animates. */
	html.anim-on [data-reveal] {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 0.7s ease,
			transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
		transition-delay: var(--reveal-delay, 0s);
		will-change: opacity, transform;
	}

	html.anim-on [data-reveal].is-revealed {
		opacity: 1;
		transform: translateY(0);
		will-change: auto;
	}

	/* Revealed service cards get their own v1.2 hover timing
	   back (the reveal transition above would otherwise also
	   time the hover lift). */
	html.anim-on .service-card.is-revealed {
		transition:
			transform 0.35s ease,
			border-color 0.35s ease,
			box-shadow 0.35s ease;
	}

	/* --- Hero entrance ------------------------------------------
	   Runs the moment JS adds html.anim-on (the script is
	   deferred, so this is effectively page load). fill-mode
	   backwards holds the from-state during each child's short
	   delay; nothing here can strand the hero invisible —
	   without the class there is no animation at all and the
	   hero simply renders. */
	html.anim-on .hero .container > * {
		animation: arsal-hero-in 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	html.anim-on .hero .container > *:nth-child(2) {
		animation-delay: 0.07s;
	}

	html.anim-on .hero .container > *:nth-child(3) {
		animation-delay: 0.14s;
	}

	html.anim-on .hero .container > *:nth-child(4) {
		animation-delay: 0.21s;
	}

	html.anim-on .hero .container > *:nth-child(5) {
		animation-delay: 0.28s;
	}

	html.anim-on .hero .container > *:nth-child(6) {
		animation-delay: 0.35s;
	}

	html.anim-on .hero .container > *:nth-child(n + 7) {
		animation-delay: 0.42s;
	}

	/* --- Gold button sheen --------------------------------------
	   A soft gloss sweeps across gold buttons on hover/focus.
	   The button clips it (overflow: hidden) and the sweep
	   itself never intercepts clicks. */
	.btn-gold {
		position: relative;
		overflow: hidden;
	}

	.btn-gold::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: -80%;
		width: 55%;
		background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 100%);
		transform: skewX(-18deg);
		transition: left 0.6s ease;
		pointer-events: none;
	}

	.btn-gold:hover::after,
	.btn-gold:focus-visible::after {
		left: 130%;
	}
}

/* --- Pricing card hover polish ----------------------------------
   Same lift+glow language as the service cards (v1.2). The
   premium card keeps its gradient border (it is background-
   based), so the border-colour change skips it. Under reduced
   motion the site-wide guard kills the transition, so the lift
   applies instantly with no travel. */
.price-card {
	transition:
		transform 0.35s ease,
		border-color 0.35s ease,
		box-shadow 0.35s ease;
}

.price-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(245, 184, 30, 0.13);
}

.price-card:not(.price-card-premium):hover {
	border-color: rgba(245, 184, 30, 0.9);
}

/* --- Reduced motion: nothing hidden, nothing moves -------------
   Belt and braces: the animated rules above already sit inside
   the no-preference query, and this block pins every reveal
   target fully visible and still if anything ever slipped
   through. */
@media (prefers-reduced-motion: reduce) {
	html.anim-on [data-reveal],
	html.anim-on [data-reveal].is-revealed {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}

	html.anim-on .hero .container > * {
		animation: none !important;
	}

	.btn-gold::after {
		display: none;
	}

	.price-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   v2.5.1 — inner-page tables: never break numbers, scroll inside the table.
   Found in the v2.3 live check: the money page's 3-column pricing table
   overflowed at ~375px and prices broke mid-number ("$2,50 0") because the
   v2.3 hardening let table cells word-break. Fix: cells keep whole words/
   numbers (overflow-wrap normal), and at mobile widths the table keeps a
   readable minimum width and scrolls INSIDE its own block (page guards
   already stop the page itself from scrolling sideways).
   ========================================================================== */
.light-main td,
.light-main th {
	overflow-wrap: normal;
	word-break: normal;
}

@media (max-width: 700px) {
	.light-main table {
		min-width: 560px;
	}
}

/* ==========================================================================
   v2.5.2 — footer scheme + Elementor CTA usool + floating-button clearance
   (owner QA 2026-11-05: "Color scheme and alignment ka boht dhiyan rakhna")
   1) Footer headings were dark grey on black (global rules never pinned
      them) → GOLD. Footer text was --text-muted (too dim) → #D1D5DB.
      Footer links → GOLD (hover ivory); teal lives only in the logo icon.
   2) Inner-page Elementor CTA buttons (e.g. "Get My Video Made") must
      follow the site button usool: GOLD background, WHITE + BOLD label,
      no underline — same values as .btn-gold.
   3) Mobile: extra bottom space in the copyright bar so the fixed
      WhatsApp/chat buttons never cover the footer's last links.
   ========================================================================== */
body .site-footer .footer-col h3 {
	color: #f5b81e;
}

body .site-footer .footer-col p,
body .site-footer .footer-col li {
	color: #d1d5db;
}

body .site-footer .footer-col a,
body .site-footer .footer-menu a {
	color: #f5b81e;
	text-decoration: none;
}

body .site-footer .footer-col a:hover,
body .site-footer .footer-col a:focus,
body .site-footer .footer-menu a:hover,
body .site-footer .footer-menu a:focus {
	color: #f5f1e8;
	text-decoration: underline;
}

.light-main .elementor-button {
	background: linear-gradient(135deg, #f8ce6b, #f5b81e 48%, #ce9410);
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none !important;
	border: none;
	margin: 8px 0;
}

.light-main .elementor-button:hover,
.light-main .elementor-button:focus {
	color: #ffffff !important;
	text-decoration: none !important;
}

@media (max-width: 900px) {
	.site-footer .copyright-bar {
		/* v2.44: was 96px — the owner saw it as a big empty void below the
		   footer on his phone (screenshot 2026-11-06). The copyright line is
		   centred, so the corner floating buttons never cover it; 20px
		   clearance is enough. */
		padding-bottom: 20px;
	}

	/* The final CTA sits right above the footer; at the page's end scroll
	   position its heading could rest under the fixed WhatsApp/chat
	   buttons (owner screenshot: the "R" of "Ready To Grow…" covered).
	   Extra bottom space lets it scroll fully clear of both buttons. */
	.cta-final {
		padding-bottom: 120px;
	}
}

/* ==========================================================================
   v2.6 — CONTACT PAGE (owner's order 2026-11-05: "Contact us page bi
   beautiful banao").

   Styles for the dedicated Contact template (page-contact.php):
   a centred luxury hero, three dark info cards (Office /
   Call-WhatsApp / Email) and the coded lead form in a dark panel.
   The template renders inside .light-main, so the v2.4 pins
   already supply the dark sheet, ivory headings, gold content
   links, ivory form labels and dark fields with a gold hairline
   border — this section only adds the contact layout and the
   few colour pins those generic rules cannot express (the gold
   eyebrow / markets line must beat the .light-main paragraph
   pin; the popup form's light-theme leftovers — the pink status
   box and the dark success text — are re-tinted for the dark
   panel). Reveal animation: the blocks carry .contact-reveal,
   added to the v2.5 module's target list in nav.js — the reveal
   CSS itself is the generic [data-reveal] rules in the v2.5
   block, unchanged.
   ========================================================================== */

/* --- Hero ---------------------------------------------------- */
.contact-hero {
	text-align: center;
	padding: 10px 0 6px;
}

/* The generic eyebrow colour pin only names .section-head /
   .panel / .hero parents; pin the gold inside the contact hero
   with the same body-scoped weight (!important beats the v2.4
   paragraph pin). */
body .light-main .contact-hero .eyebrow {
	color: #f5b81e !important;
}

.contact-hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.12;
	margin: 0 0 18px;
}

.contact-hero .gold-rule-double {
	margin-bottom: 22px;
}

.contact-intro {
	max-width: 640px;
	margin: 0 auto 14px;
	font-size: 1.06rem;
}

/* Small gold markets line under the intro. */
.light-main p.contact-markets {
	color: #f5b81e !important;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin: 0;
}

/* --- Info cards ----------------------------------------------- */
.contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 46px 0 30px;
}

.contact-card {
	background: var(--surface);
	border: 1px solid rgba(245, 184, 30, 0.28);
	border-radius: var(--radius);
	padding: 34px 26px 30px;
	text-align: center;
}

.contact-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 1px solid rgba(245, 184, 30, 0.45);
	background: rgba(245, 184, 30, 0.1);
	color: #f5b81e;
	margin-bottom: 18px;
}

.contact-card-icon svg {
	width: 27px;
	height: 27px;
}

.contact-card h2 {
	font-size: 1.28rem;
	margin: 0 0 12px;
}

.contact-card p {
	margin: 0 0 10px;
	overflow-wrap: break-word;
}

.contact-card-note {
	font-size: 0.94rem;
}

.contact-whatsapp {
	margin-top: 10px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.88rem;
}

/* --- Form panel ------------------------------------------------ */
.contact-panel {
	position: relative;
	background: var(--surface);
	border: 1px solid rgba(245, 184, 30, 0.28);
	border-radius: var(--radius);
	padding: 42px 38px 34px;
	max-width: 760px;
	margin: 0 auto;
}

.contact-panel-title {
	text-align: center;
	font-size: 1.9rem;
	margin: 0 0 10px;
}

.contact-panel-text {
	text-align: center;
	max-width: 520px;
	margin: 0 auto 28px;
}

/* Brighter gold focus ring on the dark panel (the v2.4 pin keeps
   the border gold at rest; this makes the focus state unmistakable). */
.contact-panel .arsal-lead-form input:focus,
.contact-panel .arsal-lead-form textarea:focus {
	border-color: #f5b81e !important;
	outline: 2px solid rgba(245, 184, 30, 0.45);
	outline-offset: 0;
}

/* The popup status box is a light pink panel (built for the
   modal's white sheet); re-tint it for the dark panel. */
.contact-panel .arsal-form-status {
	background: rgba(220, 38, 38, 0.12);
	border-color: rgba(248, 113, 113, 0.45);
	color: #fca5a5;
}

/* Success state — mirrors .arsal-modal__success, dark-native:
   the shared .arsal-success-icon already works on black; only
   the text colour needs flipping from the modal's dark grey. */
.contact-success {
	text-align: center;
	padding: 22px 6px 8px;
}

.contact-success .arsal-success-text {
	color: #f5f1e8;
}

.contact-form-off {
	text-align: center;
	margin: 0 0 6px;
}

.contact-form-off + .contact-whatsapp {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

/* Hours line — once, small, under the form. */
.contact-hours {
	text-align: center;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	margin: 26px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(245, 184, 30, 0.18);
}

@media (max-width: 900px) {
	.contact-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.contact-panel {
		padding: 32px 22px 28px;
	}

	.contact-panel-title {
		font-size: 1.6rem;
	}
}

/* ==========================================================================
   v2.6.1 — live-QA hardening (from the v2.5.1 verification report):
   leftover kit styles beat several theme rules on the live site. These
   final pins use !important on colour/background only.
   1) Reviews slider controls rendered as TEAL pills → dark/gold, and the
      chevron SVG forced gold.
   2) SERVICES toggle mark read as a "/" slash → a real gold ▾ glyph.
   3) Mobile menu links (HOME seen teal) → ivory, hover/current gold.
   4) Money-page table on mobile: force the scrollable-block behaviour
      with !important (the v2.3/v2.5.1 rules were beaten).
   5) Coded popup: panel heading dark on navy, close × a teal pill, form
      inputs with teal outlines → scheme colours.
   6) WhatsApp buttons (hero + popup): label WHITE (teal text was seen).
   ========================================================================== */
body .testi-arrow {
	background: #0b0b0b !important;
	border: 1px solid rgba(245, 184, 30, 0.55) !important;
	color: #f5b81e !important;
}

body .testi-arrow svg,
body .testi-arrow svg * {
	stroke: #f5b81e !important;
}

body .testi-dot {
	background: rgba(245, 184, 30, 0.35) !important;
	border: none !important;
}

body .testi-dot.is-active {
	background: #f5b81e !important;
}

body .site-header .primary-nav .sub-menu-toggle .sub-menu-chevron {
	border: none !important;
	background: transparent !important;
	width: auto !important;
	height: auto !important;
	transform: none;
}

body .site-header .primary-nav .sub-menu-toggle .sub-menu-chevron::before {
	content: "▾";
	color: #f5b81e;
	font-size: 19px;
	line-height: 1;
}

body .site-header .primary-nav .menu li.is-sub-open > .sub-menu-toggle .sub-menu-chevron {
	transform: rotate(180deg);
}

body .site-header .primary-nav .menu li a {
	color: #edeae2 !important;
}

body .site-header .primary-nav .menu li a:hover,
body .site-header .primary-nav .menu li a:focus,
body .site-header .primary-nav .menu li.current-menu-item > a,
body .site-header .primary-nav .menu li.current-menu-parent > a {
	color: #f5b81e !important;
}

@media (max-width: 700px) {
	.light-main table {
		display: block !important;
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		min-width: 560px !important;
	}
}

body .arsal-modal .arsal-modal__panel-title,
body .arsal-modal__panel h2,
body .arsal-modal__panel h3 {
	color: #f5f1e8 !important;
}

body .arsal-modal__close {
	background: #0b0b0b !important;
	border: 1px solid rgba(245, 184, 30, 0.55) !important;
	color: #f5b81e !important;
}

body .arsal-modal .arsal-lead-form input,
body .arsal-modal .arsal-lead-form textarea,
body .arsal-modal .arsal-lead-form select {
	border-color: rgba(245, 184, 30, 0.45) !important;
}

body .btn-whatsapp {
	color: #ffffff !important;
}

/* ==========================================================================
   v2.6.2 — second live-QA round (from the v2.6.1 verification report):
   1) Reviews controls: colours were fixed but the kit's global button
      padding/shape still won — arrows/dots rendered as ~70x30 ovals and
      the SVG chevron did not show. Pin the BOX (size, padding, radius)
      and draw the chevron as a gold text glyph; the SVG is hidden so
      exactly one glyph ever renders.
   2) Popup WhatsApp link (.arsal-modal__whatsapp — a different class
      than .btn-whatsapp, which is why the v2.6.1 pin missed it): the
      label stayed teal → white + bold on its green.
   3) Contact-page WhatsApp buttons (.contact-whatsapp) rendered as a
      dark outline button → solid WhatsApp green, white bold label.
   4) Inner-page Elementor CTA buttons: the v2.5.2 pin was scoped to
      .light-main, but pages on the "Elementor Full Width" template
      render outside it. The gold-button usool now applies to EVERY
      .elementor-button site-wide.
   ========================================================================== */
body .testi-arrow {
	width: 46px !important;
	height: 46px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 26px !important;
	line-height: 1 !important;
}

body .testi-arrow svg {
	display: none !important;
}

body .testi-prev::before {
	content: "‹";
	color: #f5b81e;
}

body .testi-next::before {
	content: "›";
	color: #f5b81e;
}

body .testi-dot {
	width: 11px !important;
	height: 11px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 50% !important;
}

body .arsal-modal__whatsapp {
	color: #ffffff !important;
	font-weight: 700;
}

body .contact-whatsapp {
	background: #25d366 !important;
	color: #ffffff !important;
	border: none !important;
	font-weight: 700;
}

body .elementor-button {
	background: linear-gradient(135deg, #f8ce6b, #f5b81e 48%, #ce9410);
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none !important;
	border: none;
}

body .elementor-button:hover,
body .elementor-button:focus {
	color: #ffffff !important;
	text-decoration: none !important;
}

body .elementor-button .elementor-button-text {
	color: #ffffff !important;
}

/* ==========================================================================
   v2.7 — ABOUT PAGE (owner's order 2026-11-05: "About us page bi
   beautiful banao").

   Styles for the dedicated About template (page-about.php): a
   centred mission hero, a two-column story (text + the page's
   dot-smoke image in a gold-hairline frame), team cards with
   initial medallions, the four homepage testimonials as simple
   quote cards, and a .cta-final band. The template renders
   inside .light-main, so the v2.4 pins already supply the dark
   sheet, ivory headings and light body text — this section adds
   the about layout plus the few gold pins those generic rules
   cannot express (eyebrows, the gold story sub-heading, team
   roles and the reviews line must beat the .light-main
   paragraph/heading pins). Reveal animation: blocks carry
   .about-reveal, added to the v2.5 module's target list in
   nav.js — the reveal CSS itself is the generic [data-reveal]
   rules in the v2.5 block, unchanged; the CTA band reveals via
   its .cta-final class, already a target.
   ========================================================================== */

/* --- Hero ---------------------------------------------------- */
.about-hero {
	text-align: center;
	padding: 10px 0 6px;
}

/* One pin for every eyebrow on this template (the generic
   eyebrow colour rules do not cover these parents, and the
   v2.4 paragraph pin would otherwise grey them). */
body .light-main .about-eyebrow {
	color: #f5b81e !important;
}

.about-hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.12;
	margin: 0 0 18px;
}

.about-hero .gold-rule-double {
	margin-bottom: 22px;
}

.about-mission {
	max-width: 720px;
	margin: 0 auto;
	font-size: 1.12rem;
}

/* --- Story --------------------------------------------------- */
.about-story {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 36px;
	align-items: center;
	margin: 56px 0 0;
}

/* Gold sub-heading — must beat the v2.4 ivory heading pin. */
body .light-main .about-subhead {
	color: #f5b81e !important;
	font-size: 1.55rem;
	margin: 0 0 16px;
}

.about-story-text p {
	margin: 0;
	font-size: 1.03rem;
}

/* The page's dot-smoke image in a dark panel with a gold
   hairline frame (same panel treatment as the contact cards). */
.about-story-media {
	margin: 0;
	background: var(--surface);
	border: 1px solid rgba(245, 184, 30, 0.28);
	border-radius: var(--radius);
	padding: 16px;
}

.about-story-media img {
	width: 100%;
	border-radius: 8px;
}

/* --- Team ---------------------------------------------------- */
.about-team {
	margin: 62px 0 0;
}

.about-team-head {
	text-align: center;
}

.about-team-head h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.3rem);
	margin: 0 0 10px;
}

.about-team-line {
	margin: 0;
}

.about-team-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	max-width: 780px;
	margin: 36px auto 0;
}

.about-team-card {
	background: var(--surface);
	border: 1px solid rgba(245, 184, 30, 0.28);
	border-radius: var(--radius);
	padding: 36px 26px 30px;
	text-align: center;
}

/* Initial medallion — no team photos exist in what we have, so
   the card shows the member's initials in a gold ring on a
   dark circle instead of an invented photo. */
.about-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 86px;
	border-radius: 50%;
	border: 2px solid #f5b81e;
	background: #0b0b0b;
	box-shadow: 0 0 0 6px rgba(245, 184, 30, 0.12);
	color: #f5b81e;
	font-family: var(--font-display);
	font-size: 1.65rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	margin-bottom: 18px;
}

.about-team-card h3 {
	font-size: 1.25rem;
	margin: 0 0 8px;
}

body .light-main p.about-team-role {
	color: #f5b81e !important;
	font-weight: 600;
	margin: 0;
}

/* --- Reviews ------------------------------------------------- */
.about-reviews {
	margin: 62px 0 0;
}

.about-reviews-head {
	text-align: center;
}

.about-reviews-head h2 {
	font-size: clamp(1.7rem, 3.6vw, 2.3rem);
	margin: 0 0 12px;
}

/* Small gold label line under the heading (mirrors the contact
   page's markets line). */
.light-main p.about-reviews-line {
	color: #f5b81e !important;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	margin: 0;
}

/* The cards are the homepage .testimonial-card, reused as-is;
   only the figure's default margin needs pinning in this grid
   (grid stretch already equalises row heights). */
.about-reviews-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
	margin: 36px 0 0;
}

.about-reviews-grid .testimonial-card {
	margin: 0;
}

/* --- CTA band -------------------------------------------------- */
.about-cta {
	margin: 64px 0 0;
}

.about-cta .eyebrow {
	margin-bottom: 14px;
}

.about-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 28px;
}

@media (max-width: 900px) {
	.about-story,
	.about-reviews-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-team-grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
	}
}

/* ==========================================================================
   v2.7.1 — CTA truth round + short-page footer clearance.
   CTA root causes (inspected live 2026-11-05): the AI page's CTAs are
   class-less inline-style links whose text colour the v2.4 gold link pin
   was overriding (gold-on-gold) — the link pin now excludes anchors that
   carry their own background, and the catch-all below gives every such
   inline "button link" the site usool (gold gradient + white bold;
   wa.me links get WhatsApp green + white). The money/SEO pages' CTAs
   are Gutenberg block buttons (.wp-block-button__link) — pinned too.
   Footer clearance: on SHORT pages (e.g. /write-for-us/) the footer
   rests inside the floating buttons' zone and the WhatsApp button
   covered the footer email lines on the owner's real phone. Extra
   bottom space inside the footer + a min-height on the main area let
   the whole footer scroll clear of both buttons at the end position.
   ========================================================================== */
body .light-main .wp-block-button__link {
	background: linear-gradient(135deg, #f8ce6b, #f5b81e 48%, #ce9410) !important;
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none !important;
	border: none !important;
}

.light-main a[style*="background"] {
	background: linear-gradient(135deg, #f8ce6b, #f5b81e 48%, #ce9410) !important;
	color: #ffffff !important;
	font-weight: 700;
	text-decoration: none !important;
}

.light-main a[href*="wa.me"][style*="background"] {
	background: #25d366 !important;
	color: #ffffff !important;
}

.site-main {
	min-height: 55vh;
}

@media (max-width: 900px) {
	.site-footer {
		/* v2.8.2: was 150px — the owner saw it as a big empty void under
		   the footer and ordered it removed ("Neche footer ke empty
		   area delete kr DU"). Trimmed to a slim margin; together with
		   the copyright bar's own bottom padding there is still just
		   enough room for the last line to sit above the floating
		   buttons at the end position, without a screen of black. */
		padding-bottom: 12px;
	}
}

/* ==========================================================================
   v2.7.2 — Footer "Our Services" list as luxury boxes (owner's order
   2026-11-05): each of the 12 services sits in its own dark panel box
   with a hairline gold border and gold text; the whole box is the link
   (same names, same hrefs as the plain list it replaces). Hover/focus
   brightens the border with a soft gold glow; text stays gold and
   readable. Single column inside the footer column so the long names
   ("Local SEO & Google Business Profile", "Meta & Google Ads
   Management") never clip — mobile keeps the same full-width boxes.
   ========================================================================== */
body .site-footer .footer-service-boxes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

body .site-footer .footer-service-boxes li {
	margin: 0;
}

body .site-footer .footer-service-boxes a {
	display: block;
	background: #111111;
	border: 1px solid rgba(245, 184, 30, .35);
	border-radius: 10px;
	padding: 10px 13px;
	color: #f5b81e;
	font-size: .92rem;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

body .site-footer .footer-service-boxes a:hover,
body .site-footer .footer-service-boxes a:focus {
	color: #f6c453;
	border-color: rgba(245, 184, 30, .85);
	background: #161616;
	box-shadow: 0 0 14px rgba(245, 184, 30, .22);
	text-decoration: none;
}

/* ==========================================================================
   v2.8.2 — Footer "Quick Access" menu as boxes too (owner's order
   2026-11-05, from his phone screenshot of the About page footer):
   the Quick Access links get the exact same treatment as the Our
   Services boxes — dark panel, hairline gold border, gold text, the
   whole box is the link. Long titles (the Contribute/Write-for-Us
   item) wrap inside their box. The "Secure Website & Payments" text
   column stays plain text — boxes are for links.
   ========================================================================== */
body .site-footer ul.footer-menu {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

body .site-footer ul.footer-menu li {
	margin: 0;
}

body .site-footer ul.footer-menu a {
	display: block;
	background: #111111;
	border: 1px solid rgba(245, 184, 30, .35);
	border-radius: 10px;
	padding: 10px 13px;
	color: #f5b81e;
	font-size: .95rem;
	line-height: 1.35;
	text-decoration: none;
	transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

body .site-footer ul.footer-menu a:hover,
body .site-footer ul.footer-menu a:focus {
	color: #f6c453;
	border-color: rgba(245, 184, 30, .85);
	background: #161616;
	box-shadow: 0 0 14px rgba(245, 184, 30, .22);
	text-decoration: none;
}

/* ==========================================================================
   v2.8.2 — Old-theme background picture removal (owner's order
   2026-11-05: "Website ki background per Wohi purae theme wali
   picture ati ha wo remove kr DU"). The inner pages are still
   Elementor-built and their sections (and the Elementor kit's global
   body style) can carry background IMAGES from the old design, which
   show through behind the dark conversion. Kill background images at
   body level and on Elementor section/container layers inside the
   page content, so every page sits on the clean black luxury
   background. Content <img> elements are untouched.
   ========================================================================== */
body {
	background-image: none !important;
}

.light-main .elementor-section,
.light-main .elementor-container,
.light-main .e-con,
.light-main .e-con-inner {
	background-image: none !important;
}

/* ==========================================================================
   v2.8.2 — Pricing comparison table: mobile CARDS, no sideways slide
   (owner's order 2026-11-05, from his phone screenshot of the money
   page: "Ye confusing style ha logo ko slide kr samj hi nahi Ani tm
   is ka style change kro ta ke easy to read ho"). The old fix made
   the table scroll inside itself — readable for us, confusing for
   visitors. Now at ≤700px every row becomes a stacked card: the
   feature name as the card heading, then labelled lines
   "Arsal Services — …" and "Typical US Agency — …". No horizontal
   scrolling, nothing clipped, full values visible. Content and
   prices are untouched — presentation only. Desktop keeps the
   normal table. This block sits after (and overrides) the v2.6.1
   scroll rule above.
   ========================================================================== */
@media (max-width: 700px) {
	.light-main table {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		overflow-x: visible !important;
		border: none !important;
		background: transparent !important;
	}

	.light-main table thead {
		display: none !important;
	}

	.light-main table tbody {
		display: block !important;
	}

	.light-main table tr {
		display: block !important;
		background: #101010;
		border: 1px solid rgba(245, 184, 30, .30) !important;
		border-radius: 14px;
		padding: 14px 16px;
		margin: 0 0 12px;
	}

	.light-main table th,
	.light-main table td {
		display: block !important;
		border: none !important;
		padding: 3px 0 !important;
		text-align: left !important;
		white-space: normal !important;
		word-break: normal !important;
	}

	.light-main table tr > :first-child {
		color: #f5b81e;
		font-weight: 700;
		font-size: 1.02rem;
		padding-bottom: 7px !important;
	}

	.light-main table td:nth-child(2)::before,
	.light-main table th:nth-child(2)::before {
		content: "Arsal Services — ";
		color: #f5b81e;
		font-weight: 700;
	}

	.light-main table td:nth-child(3)::before,
	.light-main table th:nth-child(3)::before {
		content: "Typical US Agency — ";
		color: #9ca3af;
		font-weight: 700;
	}
}

/* ==========================================================================
   v2.8.3 — About template correction support: spacing for the
   "Let's See" link under the About reviews heading (the Team block
   was removed from page-about.php in this version — the live page
   has no Team section; its .about-team-* styles above are unused).
   ========================================================================== */
.about-reviews-more {
	margin-top: 18px;
}

/* ==========================================================================
   v2.8 — WRITE FOR US PAGE (guest post template, page-write-for-us.php).

   Recon proved the live /write-for-us/ page (ID 1304,
   Elementor-built) had NO form at all — the widget container
   under its "Guest Post Form:" heading was empty at source, so
   the page promised submissions it could not take. The template
   renders the verbatim guidelines as tight dark cards (the old
   page's fault was a giant empty gap; the rhythm here is a
   steady 18px between cards) and the coded guest post form in a
   dark panel. The template renders inside .light-main, so the
   v2.4 pins already supply the dark sheet, ivory headings, gold
   content links, ivory form labels and dark fields with a gold
   hairline border — this section only adds the write-for-us
   layout and the few colour pins those generic rules cannot
   express (gold hero eyebrow, gold guideline headings, the
   popup form's light-theme leftovers re-tinted for the dark
   panel — same fixes as the v2.6 contact panel). The form
   itself reuses the shared .arsal-lead-form styles wholesale;
   its fields are the standard text/email/textarea types, so no
   new field CSS is needed. Reveal animation: the blocks carry
   .writeforus-reveal, added to the v2.5 module's target list
   in nav.js — the reveal CSS itself is the generic
   [data-reveal] rules in the v2.5 block, unchanged.
   ========================================================================== */

/* --- Hero ---------------------------------------------------- */
.guest-hero {
	text-align: center;
	padding: 10px 0 6px;
}

/* Same body-scoped gold eyebrow pin as the contact hero
   (!important beats the v2.4 paragraph pin). */
body .light-main .guest-hero .eyebrow {
	color: #f5b81e !important;
}

.guest-hero h1 {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 800;
	line-height: 1.12;
	margin: 0 0 18px;
}

.guest-hero .gold-rule-double {
	margin-bottom: 22px;
}

.guest-intro {
	max-width: 720px;
	margin: 0 auto 12px;
	font-size: 1.02rem;
	line-height: 1.65;
}

.guest-intro:last-child {
	margin-bottom: 0;
}

/* --- Guidelines ---------------------------------------------- */
.guest-guide {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	max-width: 860px;
	margin: 42px auto 0;
}

.guest-guide-item {
	background: var(--surface);
	border: 1px solid rgba(245, 184, 30, 0.28);
	border-radius: var(--radius);
	padding: 26px 28px 22px;
}

/* Guideline headings are gold (the v2.4 pin makes .light-main
   headings ivory; gold over it needs !important, the same
   pattern as the about page's gold story sub-heading). */
.light-main .guest-guide-item h2 {
	color: #f5b81e !important;
	font-size: 1.25rem;
	margin: 0 0 10px;
}

.guest-guide-item p {
	font-size: 1rem;
	line-height: 1.65;
	margin: 0;
}

/* The verbatim closing line — centred, after the last
   guideline card and before the form. */
.guest-thanks {
	text-align: center;
	max-width: 720px;
	margin: 12px auto 0;
	font-size: 1.02rem;
	line-height: 1.65;
}

/* --- Form panel ---------------------------------------------- */
.guest-panel {
	position: relative;
	background: var(--surface);
	border: 1px solid rgba(245, 184, 30, 0.28);
	border-radius: var(--radius);
	padding: 42px 38px 34px;
	max-width: 760px;
	margin: 44px auto 0;
}

.guest-panel-title {
	text-align: center;
	font-size: 1.9rem;
	margin: 0 0 24px;
}

/* Brighter gold focus ring on the dark panel — mirrors the
   contact panel (the v2.4 pin keeps the border gold at rest;
   this makes the focus state unmistakable). */
.guest-panel .arsal-lead-form input:focus,
.guest-panel .arsal-lead-form textarea:focus {
	border-color: #f5b81e !important;
	outline: 2px solid rgba(245, 184, 30, 0.45);
	outline-offset: 0;
}

/* The popup status box is a light pink panel (built for the
   modal's white sheet); re-tint it for the dark panel — the
   same re-tint as the contact panel. */
.guest-panel .arsal-form-status {
	background: rgba(220, 38, 38, 0.12);
	border-color: rgba(248, 113, 113, 0.45);
	color: #fca5a5;
}

/* Success state — mirrors .contact-success, dark-native: the
   shared .arsal-success-icon already works on black; only the
   text colour needs flipping from the modal's dark grey. */
.guest-success {
	text-align: center;
	padding: 22px 6px 8px;
}

.guest-success .arsal-success-text {
	color: #f5f1e8;
}

.guest-form-off {
	text-align: center;
	margin: 0 0 6px;
}

.guest-form-off + .guest-whatsapp {
	display: table;
	margin-left: auto;
	margin-right: auto;
}

@media (max-width: 640px) {
	.guest-guide-item {
		padding: 22px 20px 18px;
	}

	.guest-panel {
		padding: 32px 22px 28px;
	}

	.guest-panel-title {
		font-size: 1.6rem;
	}
}

/* ==========================================================================
   v2.9 — FAQ SECTIONS (inc/faqs.php: homepage + every covered
   service page). Owner's order: "FAQs section bi dalo landing
   page me aur har services page me on ke According".

   The section is FULLY self-contained on purpose: on the
   homepage it sits inside the theme's own flow, but on the
   service pages it is appended after Elementor content, where
   no .container and no .light-main sheet surrounds it — so the
   section carries its own dark background (#070707), its own
   centred measure (~880px), its own padding and a hairline
   gold top border to separate it from whatever sits above.
   Black/gold luxury, no teal.

   Behaviour: the answer panel is display:none until the item
   carries .is-open (toggled by the v2.9 module in nav.js,
   which also closes the other items in the same section).
   Opening animates a gentle max-height/opacity settle where
   transitions are allowed; the reduced-motion query at the
   end of this block turns the motion off.
   ========================================================================== */
.arsal-faq {
	background: #070707;
	border-top: 1px solid rgba(245, 184, 30, .35);
	padding: 64px 20px 72px;
}

.arsal-faq-title {
	max-width: 880px;
	margin: 0 auto 30px;
	text-align: center;
	color: #f5b81e;
	font-size: 1.9rem;
	line-height: 1.25;
}

.arsal-faq-item {
	max-width: 880px;
	margin: 0 auto 12px;
	background: #101010;
	border: 1px solid rgba(245, 184, 30, .25);
	border-radius: 14px;
	overflow: hidden;
}

.arsal-faq-item:last-child {
	margin-bottom: 0;
}

.arsal-faq-q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	margin: 0;
	padding: 18px 20px;
	background: transparent;
	border: none;
	border-radius: 0;
	color: #f5f1e8;
	font: inherit;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.45;
	text-align: left;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.arsal-faq-q:hover,
.arsal-faq-q:focus {
	color: #f5b81e;
	outline: none;
}

/* The + / − icon: two gold bars; open state drops the vertical
   bar (opacity 0) so the plus morphs into a minus. */
.arsal-faq-icon {
	position: relative;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.arsal-faq-icon::before,
.arsal-faq-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: #f5b81e;
	transition: transform .25s ease, opacity .25s ease;
}

.arsal-faq-icon::before {
	width: 16px;
	height: 2px;
	transform: translate(-50%, -50%);
}

.arsal-faq-icon::after {
	width: 2px;
	height: 16px;
	transform: translate(-50%, -50%);
}

.arsal-faq-item.is-open .arsal-faq-icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(90deg);
}

.arsal-faq-a {
	display: none;
}

.arsal-faq-item.is-open .arsal-faq-a {
	display: block;
	padding: 0 20px 18px;
	animation: arsal-faq-settle .3s ease;
}

.arsal-faq-a p {
	margin: 0;
	color: #d8d5cc;
	font-size: .96rem;
	line-height: 1.65;
}

@keyframes arsal-faq-settle {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 640px) {
	.arsal-faq {
		padding: 46px 16px 54px;
	}

	.arsal-faq-title {
		font-size: 1.55rem;
		margin-bottom: 24px;
	}

	.arsal-faq-q {
		padding: 16px 16px;
		font-size: .96rem;
	}

	.arsal-faq-item.is-open .arsal-faq-a {
		padding: 0 16px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.arsal-faq-icon::before,
	.arsal-faq-icon::after {
		transition: none;
	}

	.arsal-faq-item.is-open .arsal-faq-a {
		animation: none;
	}
}

/* ==========================================================================
   v2.9.1 — Compact popup (owner's order 2026-11-05: "Ye popup form
   ko bi chota kr DU just form aye"). The two-column 920px dialog
   becomes a single-column card no wider than 460px: the navy panel
   is now just a slim header band carrying the title (its tagline,
   checkmark points and WhatsApp button were removed from the
   markup in inc/popup.php), and the form follows immediately with
   tightened padding. The popup still opens ONLY on button click.
   ========================================================================== */
.arsal-modal__dialog {
	grid-template-columns: minmax(0, 1fr);
	width: min(460px, 100%);
}

.arsal-modal__panel {
	padding: 18px 24px;
}

.arsal-modal__panel-title {
	font-size: 1.35rem;
}

.arsal-modal__body {
	padding: 22px 24px 24px;
}

/* ==========================================================================
   v2.9.2 — About story image removed (owner's order 2026-11-05, from
   his phone screenshot: "Ye remove kro ya phir yaha per pictures
   add kro"). The old design's dot-smoke graphic rendered as a panel
   of meaningless white dots on the black background, so the framed
   image is GONE from page-about.php and the story text now takes
   the full width. Real pictures belong with the Portfolio work —
   no generated or stock imagery is substituted here.
   ========================================================================== */
.about-story {
	grid-template-columns: minmax(0, 1fr);
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;
}

/* v2.9.2 — outline buttons keep the gold scheme everywhere
   (the About page's Contact Us / Let's See outline buttons picked
   up a teal outline from leftover styles): gold hairline border,
   ivory text, gold wash on hover. */
body .btn-outline {
	border-color: rgba(245, 184, 30, .65) !important;
	color: #f5f1e8 !important;
}

body .btn-outline:hover,
body .btn-outline:focus {
	border-color: #f5b81e !important;
	color: #f5b81e !important;
}

/* ==========================================================================
   v2.10 — Portfolio page (page-portfolio.php; owner's Phase-3
   order). Hero, category filter bar, work grid and tile art —
   all self-contained in this block. The three published
   website concepts render as image cards (Media-Library
   screenshots with a gold-ring initial fallback tile); the
   other concepts and service tiles are pure CSS art. Every
   concept carries the "Concept Design" pill badge over its
   media — concepts are never presented as client work. The
   active filter pill follows the site button usool: gold
   gradient background, WHITE bold text, no underline. No teal
   anywhere (teal stays the logo-icon accent only).
   ========================================================================== */
.portfolio-hero {
	text-align: center;
	padding: 10px 0 6px;
}

body .light-main .portfolio-eyebrow {
	color: #f5b81e !important;
}

.portfolio-intro {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	color: #d8d5cc;
	line-height: 1.7;
}

.portfolio-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 34px 0 30px;
}

.portfolio-filter {
	background: #101010;
	border: 1px solid rgba(245, 184, 30, .35);
	border-radius: 999px;
	padding: 10px 20px;
	color: #edeae2;
	font: inherit;
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.portfolio-filter:hover,
.portfolio-filter:focus {
	border-color: rgba(245, 184, 30, .85);
	box-shadow: 0 0 14px rgba(245, 184, 30, .22);
}

.portfolio-filter.is-active {
	background: linear-gradient(135deg, #f8ce6b, #f5b81e 48%, #ce9410);
	border-color: transparent;
	color: #ffffff;
	font-weight: 700;
}

.portfolio-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}

@media (min-width: 641px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.portfolio-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.portfolio-item {
	background: #101010;
	border: 1px solid rgba(245, 184, 30, .25);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.portfolio-item:hover {
	border-color: rgba(245, 184, 30, .8);
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(0, 0, 0, .45);
}

.portfolio-item.is-hidden {
	display: none;
}

.portfolio-media {
	position: relative;
}

.portfolio-media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.portfolio-tile-art {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background: radial-gradient(120% 130% at 50% 0%, #1d1d1d 0%, #111111 55%, #0a0a0a 100%);
	padding: 20px;
}

.portfolio-tile-word {
	color: #f5b81e;
	font-size: clamp(1.7rem, 4.5vw, 2.6rem);
	font-weight: 700;
	letter-spacing: .38em;
	text-indent: .38em;
	text-transform: uppercase;
	text-align: center;
}

.portfolio-fallback-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 92px;
	height: 92px;
	border: 2px solid #f5b81e;
	border-radius: 50%;
	background: #0b0b0b;
	color: #f5b81e;
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: .06em;
	box-shadow: 0 0 24px rgba(245, 184, 30, .25);
}

.portfolio-monograms {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: center;
}

.portfolio-monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 2px solid #f5b81e;
	border-radius: 50%;
	background: #0b0b0b;
	color: #f5b81e;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.portfolio-swatches {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.portfolio-swatch {
	width: 38px;
	height: 54px;
	border-radius: 8px;
	border: 1px solid rgba(245, 184, 30, .35);
}

.portfolio-swatch--black {
	background: #0b0b0b;
}

.portfolio-swatch--gold {
	background: #f5b81e;
}

.portfolio-swatch--ivory {
	background: #f5f1e8;
}

.portfolio-swatch--bronze {
	background: #b0762a;
}

.portfolio-swatch--blue {
	background: #16365f;
}

.portfolio-swatch--orange {
	background: #e8641e;
}

.portfolio-play {
	position: relative;
	display: block;
	width: 84px;
	height: 84px;
	border: 2px solid #f5b81e;
	border-radius: 50%;
	background: rgba(11, 11, 11, .85);
	box-shadow: 0 0 28px rgba(245, 184, 30, .28);
}

.portfolio-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent #f5b81e;
}

.portfolio-postcards {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
}

.portfolio-postcard {
	position: relative;
	width: 62px;
	height: 80px;
	border: 1px solid rgba(245, 184, 30, .45);
	border-radius: 10px;
	background: #141414;
}

.portfolio-postcard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 16px;
	border-radius: 10px 10px 0 0;
	background: linear-gradient(135deg, #f8ce6b, #f5b81e 55%, #ce9410);
}

.portfolio-postcard::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	top: 30px;
	height: 5px;
	border-radius: 3px;
	background: rgba(245, 241, 232, .35);
	box-shadow: 0 12px 0 rgba(245, 241, 232, .22), 0 24px 0 rgba(245, 241, 232, .14);
}

.portfolio-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: rgba(7, 7, 7, .88);
	border: 1px solid rgba(245, 184, 30, .7);
	border-radius: 999px;
	padding: 5px 12px;
	color: #f5b81e;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.portfolio-body {
	padding: 18px 20px 20px;
}

.portfolio-cat {
	margin: 0 0 8px;
	color: #f5b81e;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
}

.portfolio-title {
	margin: 0 0 10px;
	color: #f5f1e8;
	font-size: 1.18rem;
	line-height: 1.35;
}

.portfolio-text {
	margin: 0 0 14px;
	color: #d8d5cc;
	line-height: 1.65;
}

.portfolio-link {
	color: #f5b81e;
	font-weight: 700;
	text-decoration: none;
}

.portfolio-link:hover,
.portfolio-link:focus {
	color: #f6c453;
	text-decoration: underline;
}

.portfolio-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 28px;
}

@media (prefers-reduced-motion: reduce) {
	.portfolio-item {
		transition: none;
	}

	.portfolio-item:hover {
		transform: none;
	}
}

/* ============================================================
   v2.10.1 — FAQ colour authority pins (owner order, 2026-11-05)
   ------------------------------------------------------------
   The owner viewed the live FAQ section on his phone: the
   "Frequently Asked Questions" heading rendered dark grey on
   black (nearly invisible) and the accordion bars rendered
   SOLID TEAL — the old builder's global kit styles (heading
   colours + filled button background) outrank the v2.9 FAQ
   rules. Brand rule: teal appears ONLY in the logo accent;
   the FAQ must be black + gold like the rest of the site.
   These rules repeat the intended scheme at winning strength:
   heading gold, bars = dark cards (#161616) with a thin gold
   border, question text white, GOLD when open (+ a gold edge
   line), the + icon gold, answer text near-white. Teal: none.
   ============================================================ */
body .arsal-faq .arsal-faq-title {
	color: #f5b81e !important;
}
body .arsal-faq .arsal-faq-sub {
	color: #edeae2 !important;
}
body .arsal-faq .arsal-faq-item {
	background: #161616 !important;
	border-color: rgba(245, 184, 30, .35) !important;
}
body .arsal-faq .arsal-faq-q {
	background: transparent !important;
	color: #f5f1e8 !important;
}
body .arsal-faq .arsal-faq-item.is-open {
	border-color: rgba(245, 184, 30, .8) !important;
	box-shadow: inset 3px 0 0 #f5b81e;
}
body .arsal-faq .arsal-faq-item.is-open .arsal-faq-q {
	color: #f5b81e !important;
}
body .arsal-faq .arsal-faq-icon::before,
body .arsal-faq .arsal-faq-icon::after {
	background: #f5b81e !important;
}
body .arsal-faq .arsal-faq-a p {
	color: #f5f1e8 !important;
}

/* ============================================================
   v2.10.2 — Background picture removal, COMPLETE coverage
   (owner's SECOND complaint 2026-11-05: "Background image bi
   nahi remove ki waise hi ha" — the picture still shows on his
   phone). The v2.8.2 pins covered body + section/container
   backgrounds and passed desktop-preview checks, but Elementor
   can ALSO carry a backdrop picture on layers those pins never
   touched: the section's background OVERLAY element, ::before /
   ::after overlays, columns and widget wraps, background
   slideshows and background videos. All of those carriers are
   pinned here. Content <img> elements and embedded content
   videos are untouched — only backdrop layers are killed, so
   every page sits on the clean black (#0B0B0B) background.
   ============================================================ */
body::before,
body::after {
	background-image: none !important;
}

.light-main .elementor-background-overlay,
.light-main .elementor-section .elementor-background-overlay,
.light-main .elementor-section::before,
.light-main .elementor-section::after,
.light-main .e-con::before,
.light-main .e-con::after,
.light-main .elementor-column,
.light-main .elementor-column::before,
.light-main .elementor-column::after,
.light-main .elementor-widget-wrap,
.light-main .elementor-widget-wrap::before,
.light-main .elementor-widget-container::before {
	background-image: none !important;
}

.light-main .elementor-background-slideshow,
.light-main .elementor-background-video-container {
	display: none !important;
}

/* v2.10.2 (addendum) — FAQ bar edge: the kit's global button
   border can draw a thin TEAL outline around the question
   button inside the card (seen in the v2.10.1 mobile check).
   The button itself must carry no border, outline or shadow —
   the only edge is the card's thin gold border. */
body .arsal-faq .arsal-faq-q {
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ============================================================
   v2.10.3 — /blogs/ hero banner: kill the blue→teal gradient
   (owner's background complaint, final carrier found
   2026-11-05). The blog index hero (.arsal-blog-hero, rendered
   by the blog archive shortcode inside page 406) carries a
   blue-to-teal CSS gradient from the old design — not a photo,
   but a big off-brand coloured backdrop, and NOT in style.css,
   so no earlier background pin touched it. Re-pinned to the
   brand: near-black card, soft gold glow, thin gold border.
   ============================================================ */
body .arsal-blog-hero {
	background-color: #0d0d0d !important;
	background-image: radial-gradient(ellipse 60% 90% at 50% 0%, rgba(245, 184, 30, .14), rgba(245, 184, 30, 0) 70%) !important;
	border: 1px solid rgba(245, 184, 30, .35) !important;
}

/* ============================================================
   v2.10.4 — Old-design TEAL BUTTONS inside inner pages
   (owner's phone screenshot 2026-11-05, social media page):
   big "CHAT NOW" / "ORDER NOW" buttons rendered as solid teal
   gradient blocks — Elementor button widgets carrying the old
   kit/widget colours, a button type the v2.8 CTA passes never
   sampled (they covered Gutenberg block buttons + inline-style
   links). This is the most visible old-theme remnant on the
   inner pages. Pinned to the site-wide button usool: gold
   gradient + WHITE BOLD text; a button that links to WhatsApp
   (wa.me) follows the WhatsApp usool instead — green + white
   bold. The .elementor-button-text span inherits the colour.
   ============================================================ */
body .light-main a.elementor-button,
body .light-main .elementor-button {
	background: linear-gradient(180deg, #ffd34d, #f5b81e) !important;
	background-color: #f5b81e !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	text-decoration: none !important;
	border: none !important;
	box-shadow: none !important;
}
body .light-main a.elementor-button .elementor-button-text,
body .light-main .elementor-button .elementor-button-text {
	color: #ffffff !important;
}
body .light-main a.elementor-button[href*="wa.me"],
body .light-main a.elementor-button[href*="whatsapp"] {
	background: #25d366 !important;
	background-color: #25d366 !important;
	color: #ffffff !important;
}

/* v2.10.4 (addendum) — Popup close button BIGGER (owner's
   order from his phone screenshot 2026-11-05: "Cross ko bara
   kro") + kill the thin teal edge the kit draws around the
   popup's SEND button (visible in the same screenshot). The
   close button becomes a 52px circle with a 32px gold ×,
   centred by grid so the kit's button padding cannot stretch
   it into a pill again; the SEND button keeps its gold fill
   and glow but carries no border or outline. */
body .arsal-modal__close {
	width: 52px !important;
	height: 52px !important;
	min-width: 52px !important;
	min-height: 52px !important;
	padding: 0 !important;
	display: grid !important;
	place-items: center !important;
	font-size: 2rem !important;
	line-height: 1 !important;
	border: 2px solid rgba(245, 184, 30, .8) !important;
	top: 8px !important;
	right: 10px !important;
}
body .arsal-lead-submit {
	border: none !important;
	outline: none !important;
}

/* v2.10.4 (addendum 2) — Popup header band: BLUE → BLACK
   (owner's order 2026-11-05: "Blue ke jagah black kr DU",
   from his phone screenshot of the popup). The slim header
   band (.arsal-modal__panel) still carried the old navy
   gradient (#0a1f44 → #16365f). It becomes plain black like
   the rest of the site; the white title and the gold close
   button are untouched. */
body .arsal-modal__panel {
	background: #0b0b0b !important;
	background-image: none !important;
}

/* v2.10.4 (addendum 3) — Teal-button OVERLAP on mobile
   (recon 2026-11-05, social media page): the CHAT NOW /
   ORDER NOW pairs sit as two button widgets in one flex row
   that never wraps, so at ~360px ORDER NOW slides over
   CHAT NOW and hides it. Any flex container that directly
   holds button widgets now wraps, each widget gets a flexible
   basis, and the buttons themselves go full-width — the pair
   stacks cleanly, one under the other. */
@media (max-width: 700px) {
	body .light-main .e-con:has(> .elementor-widget-button) {
		flex-wrap: wrap !important;
		row-gap: 12px !important;
	}
	body .light-main .elementor-widget-button {
		flex: 1 1 200px !important;
		min-width: 0 !important;
	}
	body .light-main .elementor-button {
		width: 100% !important;
	}
}

/* ============================================================
   v2.11 — Portfolio expansion helpers (page-portfolio.php now
   holds ten showcases per category). Only three additions:
   the own-brand wordmark tile art, a larger single-monogram
   ring for the seven logo-concept tiles (mirrors the fallback
   initial's size), and the social tile-art variant stacking
   the gold play glyph over the platform word for the TikTok
   cards. Everything else reuses the v2.10 portfolio classes.
   No teal.
   ============================================================ */
.portfolio-wordmark {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}

.portfolio-wordmark-top {
	color: #f5f1e8;
	font-size: clamp(1.9rem, 4.5vw, 2.7rem);
	font-weight: 700;
	letter-spacing: .3em;
	text-indent: .3em;
	line-height: 1.1;
}

.portfolio-wordmark-bottom {
	color: #f5b81e;
	font-size: clamp(.95rem, 2.2vw, 1.2rem);
	font-weight: 700;
	letter-spacing: .68em;
	text-indent: .68em;
	line-height: 1.2;
}

.portfolio-monogram--single {
	width: 92px;
	height: 92px;
	font-size: 1.7rem;
	box-shadow: 0 0 24px rgba(245, 184, 30, .25);
}

.portfolio-tile-art--social {
	flex-direction: column;
	gap: 16px;
}

.portfolio-tile-platform {
	color: #f5f1e8;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-indent: .3em;
}

/* ================================================================
   v2.13 — nested (3rd-level) sub-menus.
   SERVICES > E Commerce > Ebay / Store listing exist in the menu
   structure but could never open: no desktop hover rule and no
   mobile accordion reveal existed below the first .sub-menu
   level (Phase 0 recon, 2026-11-05). Desktop gets a right-hand
   flyout; mobile gets the same chevron accordion at any depth.
   ================================================================ */
@media (min-width: 901px) {
	.primary-nav .sub-menu > li {
		position: relative;
	}

	.primary-nav .sub-menu .sub-menu {
		top: 0;
		left: 100%;
		margin-left: 6px;
	}

	.primary-nav .sub-menu > li:hover > .sub-menu,
	.primary-nav .sub-menu > li:focus-within > .sub-menu {
		display: block;
	}
}

@media (max-width: 900px) {
	.primary-nav .sub-menu > li.menu-item-has-children {
		position: relative;
	}

	.primary-nav .sub-menu > li.menu-item-has-children > a {
		padding-right: 52px;
	}

	.primary-nav .sub-menu > li.is-sub-open > .sub-menu {
		display: block;
	}

	.primary-nav .sub-menu > li.is-sub-open > .sub-menu-toggle .sub-menu-chevron {
		transform: rotate(225deg);
	}
}

/* ================================================================
   v2.14 — bug-sweep fixes (from the 2026-11-05 audit):
   1) Teal divider lines inside migrated content (verified on
      /ai-services/ under each price line) go gold.
   2) The homepage hero H1 clipped at the right edge on ~360px
      screens — smaller fluid size + wrapping on small screens.
   3) Scroll clearance under the fixed WhatsApp/chat buttons on
      mobile: the footer gains bottom room so the last lines of
      a page can always be scrolled clear of the buttons.
   ================================================================ */
body .light-main .elementor-widget-divider .elementor-divider-separator {
	border-top-color: #f5b81e !important;
}

body .light-main hr {
	border-color: rgba(245, 184, 30, 0.5) !important;
}

@media (max-width: 700px) {
	body .hero h1 {
		font-size: clamp(1.8rem, 8.6vw, 2.35rem);
		overflow-wrap: break-word;
	}

	body .site-footer {
		/* v2.45: was 96px. This v2.14 clearance rule silently defeated the
		   v2.8.2 trim (higher specificity: body + max-width 700px), so the
		   phone footer void survived the 2026-11-05 fix AND v2.44 — live
		   measurement after v2.44 still showed ~120px of empty space below
		   the copyright line. The copyright line is centred (corner buttons
		   never cover it) and the footer columns end well above the buttons
		   at the end position, so 12px — the v2.8.2 intent — is enough. */
		padding-bottom: 12px;
	}
}

/* ================================================================
   v2.15 — mobile menu panel scroll + black-text guard.
   1) The open mobile nav panel had no height limit: with SERVICES
      expanded it ran past the viewport and the page behind it
      scrolled instead (audit 2026-11-05). The panel now scrolls
      internally and contains its overscroll.
   2) Pre-migration content sometimes paints text pure black via
      inline styles (verified on /ebay-services/: an intro span
      with color:#000000 on the black section = invisible). Any
      element inside .light-main whose inline style forces #000000
      text is lifted to the theme's near-white.
   ================================================================ */
@media (max-width: 900px) {
	body .site-header .primary-nav.is-open {
		max-height: calc(100dvh - 72px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

body .light-main span[style*="color: #000000"],
body .light-main p[style*="color: #000000"],
body .light-main div[style*="color: #000000"],
body .light-main h1[style*="color: #000000"],
body .light-main h2[style*="color: #000000"],
body .light-main h3[style*="color: #000000"],
body .light-main h4[style*="color: #000000"],
body .light-main h5[style*="color: #000000"],
body .light-main h6[style*="color: #000000"],
body .light-main li[style*="color: #000000"],
body .light-main a[style*="color: #000000"] {
	color: #edeae2 !important;
}

/* ================================================================
   Blogs archive — coded template (page-blogs.php, v2.17).
   Replaces the Arsal Blog Archive plugin's shortcode render with
   the same verified layout: dark hero, card grid, right sidebar.
   ================================================================ */
.ablog-hero {
	background: radial-gradient(ellipse at top, rgba(245, 184, 30, 0.10), rgba(0, 0, 0, 0) 60%), #0d0d0f;
	border: 1px solid rgba(245, 184, 30, 0.35);
	border-radius: 16px;
	padding: 44px 28px;
	text-align: center;
	margin: 28px 0 30px;
}

.ablog-hero h1 {
	margin: 0 0 10px;
}

.ablog-hero p {
	margin: 0 auto;
	max-width: 720px;
	color: #cfcaba;
}

.ablog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 26px;
	align-items: start;
	padding-bottom: 40px;
}

.ablog-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.ablog-card {
	background: #141416;
	border: 1px solid rgba(245, 184, 30, 0.22);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ablog-card-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: #0d0d0f;
}

.ablog-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ablog-chip {
	position: absolute;
	left: 12px;
	bottom: 12px;
	background: #f5b81e;
	color: #111111;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
}

.ablog-card-body {
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.ablog-meta {
	margin: 0;
	font-size: 0.8rem;
	color: #b9b2a0;
}

.ablog-card-title {
	margin: 0;
	font-size: 1.12rem;
	line-height: 1.35;
}

.ablog-excerpt {
	margin: 0;
	color: #cfcaba;
	font-size: 0.94rem;
	flex: 1;
}

.ablog-more {
	color: #f5b81e;
	font-weight: 600;
	text-decoration: none;
}

.ablog-pagination {
	margin-top: 26px;
}

.ablog-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0;
	padding: 0;
}

.ablog-pagination .page-numbers {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid rgba(245, 184, 30, 0.4);
	border-radius: 8px;
	color: #edeae2;
	text-decoration: none;
}

.ablog-pagination .page-numbers.current {
	background: #f5b81e;
	color: #111111;
	font-weight: 700;
}

.ablog-side {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ablog-widget {
	background: #141416;
	border: 1px solid rgba(245, 184, 30, 0.22);
	border-radius: 14px;
	padding: 20px;
}

.ablog-widget h2 {
	margin: 0 0 14px;
	font-size: 1.05rem;
	color: #f5b81e;
}

.ablog-search {
	display: flex;
	gap: 8px;
}

.ablog-search input {
	flex: 1;
	min-width: 0;
	background: #0d0d0f;
	border: 1px solid rgba(245, 184, 30, 0.35);
	border-radius: 8px;
	color: #edeae2;
	padding: 10px 12px;
}

.ablog-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.ablog-cats li {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.ablog-cats span {
	color: #b9b2a0;
}

.ablog-recent {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ablog-recent a {
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 12px;
	align-items: center;
	text-decoration: none;
}

.ablog-recent img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	grid-row: span 2;
}

.ablog-recent-date {
	color: #b9b2a0;
	font-size: 0.8rem;
}

.ablog-cta p {
	color: #cfcaba;
	margin: 0 0 14px;
}

@media (max-width: 900px) {
	.ablog-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.ablog-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ================================================================
   Floating widgets — coded (v2.18): WhatsApp button (inc/whatsapp.php)
   and the chat widget (inc/chat.php). Both render ONLY while their
   plugin predecessors are inactive, so nothing ever doubles.
   ================================================================ */
.arsal-wa {
	position: fixed;
	left: 22px;
	bottom: 22px;
	z-index: 120;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #f5b81e;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 5px rgba(245, 184, 30, 0.22), 0 10px 26px rgba(0, 0, 0, 0.45);
	text-decoration: none;
}

.arsal-wa-tip {
	position: absolute;
	left: 72px;
	top: 50%;
	transform: translateY(-50%);
	background: #161616;
	color: #edeae2;
	border: 1px solid rgba(245, 184, 30, 0.4);
	padding: 7px 12px;
	border-radius: 8px;
	font-size: 0.85rem;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.arsal-wa:hover .arsal-wa-tip,
.arsal-wa:focus-visible .arsal-wa-tip {
	opacity: 1;
}

.achat-btn {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 120;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 0;
	background: #f5b81e;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 0 0 5px rgba(245, 184, 30, 0.22), 0 10px 26px rgba(0, 0, 0, 0.45);
}

.achat-panel {
	position: fixed;
	right: 22px;
	bottom: 94px;
	z-index: 130;
	width: min(380px, calc(100vw - 32px));
	height: min(520px, calc(100dvh - 130px));
	background: #111113;
	border: 1px solid rgba(245, 184, 30, 0.45);
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.achat-panel[hidden] {
	display: none;
}

.achat-head {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #0b0b0b;
	padding: 12px 14px;
	border-bottom: 1px solid rgba(245, 184, 30, 0.3);
}

.achat-avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #f5b81e;
	color: #111111;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.achat-head-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.achat-head-text strong {
	color: #ffffff;
}

.achat-head-text small {
	color: #b9b2a0;
}

.achat-close {
	background: transparent;
	border: 0;
	color: #f5b81e;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 6px;
}

.achat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.achat-msg {
	max-width: 85%;
	padding: 10px 13px;
	border-radius: 12px;
	font-size: 0.92rem;
	line-height: 1.45;
	white-space: pre-wrap;
}

.achat-msg-bot {
	background: #1c1c1f;
	color: #edeae2;
	align-self: flex-start;
}

.achat-msg-user {
	background: #f5b81e;
	color: #111111;
	align-self: flex-end;
}

.achat-form {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid rgba(245, 184, 30, 0.3);
	background: #0b0b0b;
}

.achat-form input {
	flex: 1;
	min-width: 0;
	background: #161616;
	border: 1px solid rgba(245, 184, 30, 0.35);
	border-radius: 9px;
	color: #edeae2;
	padding: 10px 12px;
}

.achat-send {
	background: #f5b81e;
	color: #111111;
	border: 0;
	border-radius: 9px;
	font-weight: 700;
	padding: 10px 16px;
	cursor: pointer;
}

/* ==========================================================================
   v2.20 — Affordable Website Design (coded) template (.svc-*)
   The money page (/affordable-website-design/) as a theme template
   (page-affordable.php): hero, package/industry/why card grids with
   gold check markers, the honest-pricing table (stacked cards on
   small screens), numbered steps, the UK band and the final CTA.
   Uses the shared tokens and components (.btn, .section-head,
   .cta-final, .testimonial-card, .arsal-faq) wherever possible;
   everything below is additive — no earlier rule is changed.
   ========================================================================== */

/* WhatsApp button alias: page-affordable.php carries both the
   theme's .btn-whatsapp and the shorter .btn-wa hook; keep the
   alias painted even if it is ever used on its own. */
.btn-wa {
	background: var(--whatsapp);
	color: #ffffff;
}

.btn-wa:hover,
.btn-wa:focus {
	background: #1eb856;
	color: #ffffff;
}

.svc-hero {
	text-align: center;
	padding: 76px 0 8px;
}

.svc-hero .gold-rule-double {
	margin-left: auto;
	margin-right: auto;
}

.svc-lead {
	max-width: 860px;
	margin: 22px auto 0;
	color: var(--text);
	font-size: 1.18rem;
	line-height: 1.65;
}

.svc-sub {
	max-width: 760px;
	margin: 14px auto 0;
	color: var(--text-muted);
	line-height: 1.65;
}

.svc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 28px;
}

.svc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

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

@media (max-width: 1024px) {
	.svc-grid,
	.svc-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.svc-grid,
	.svc-grid-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.svc-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px 22px;
}

.svc-card h3 {
	color: var(--text);
	font-size: 1.08rem;
	margin: 0 0 8px;
}

.svc-card p {
	color: var(--text-muted);
	font-size: 0.97rem;
	line-height: 1.6;
	margin: 0;
}

/* Gold check marker on the package + industry cards only. */
.svc-included .svc-card h3::before,
.svc-industries .svc-card h3::before {
	content: "✓";
	color: var(--gold);
	font-weight: 800;
	margin-right: 9px;
}

.svc-note,
.svc-table-note,
.svc-closing {
	max-width: 860px;
	margin: 28px auto 0;
	text-align: center;
	color: var(--text-muted);
	line-height: 1.65;
}

.svc-closing {
	color: var(--text);
	font-weight: 700;
	font-size: 1.08rem;
}

/* ---- Honest-pricing table ---- */
.svc-table-wrap {
	max-width: 960px;
	margin: 0 auto;
	overflow-x: auto;
}

.svc-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}

.svc-table th,
.svc-table td {
	padding: 15px 18px;
	text-align: left;
	border-bottom: 1px solid var(--border);
	line-height: 1.5;
}

.svc-table thead th {
	background: #0b0b0b;
	color: var(--gold);
	font-size: 1rem;
}

.svc-table tbody th {
	color: var(--text);
	font-weight: 600;
}

.svc-table tbody td {
	color: var(--text-muted);
}

.svc-table tbody td:first-of-type {
	color: var(--gold);
	font-weight: 700;
}

.svc-table tbody tr:last-child th,
.svc-table tbody tr:last-child td {
	border-bottom: none;
}

/* Small screens: the table becomes stacked cards, one per row —
   feature as the card title, the two prices labelled beneath. */
@media (max-width: 700px) {
	.svc-table-wrap {
		overflow-x: visible;
	}

	.svc-table,
	.svc-table tbody,
	.svc-table tr,
	.svc-table th,
	.svc-table td {
		display: block;
	}

	.svc-table {
		background: transparent;
		border: none;
	}

	.svc-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.svc-table tbody tr {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		padding: 16px 18px;
		margin-bottom: 14px;
	}

	.svc-table tbody th {
		padding: 0 0 8px;
		border-bottom: none;
		font-size: 1.02rem;
	}

	.svc-table tbody td {
		padding: 3px 0;
		border-bottom: none;
	}

	.svc-table tbody td::before {
		content: attr(data-label) ": ";
		color: var(--text-muted);
		font-weight: 600;
	}

	.svc-table tbody td:first-of-type::before {
		color: var(--gold);
	}
}

/* ---- Steps ---- */
.svc-steps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	max-width: 960px;
	margin: 0 auto;
}

@media (max-width: 700px) {
	.svc-steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

.svc-step {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px 24px 24px 78px;
}

.svc-step-num {
	position: absolute;
	left: 22px;
	top: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--gold);
	color: #0b0b0b;
	font-weight: 800;
	font-size: 1.15rem;
}

.svc-step h3 {
	color: var(--text);
	font-size: 1.08rem;
	margin: 4px 0 8px;
}

.svc-step p {
	color: var(--text-muted);
	line-height: 1.6;
	margin: 0;
}

/* ---- Industry examples ---- */
.svc-examples {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 26px;
}

@media (max-width: 700px) {
	.svc-examples {
		grid-template-columns: minmax(0, 1fr);
	}
}

.svc-examples img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid rgba(245, 184, 30, .35);
	border-radius: var(--radius);
}

/* ---- UK band ---- */
.svc-band {
	background: var(--surface-2);
	border: 1px solid rgba(245, 184, 30, .35);
	border-radius: var(--radius);
	padding: 38px 34px;
	text-align: center;
	margin: 8px 0 72px;
}

.svc-band h2 {
	margin-top: 0;
}

.svc-band p {
	max-width: 820px;
	margin: 0 auto;
	color: var(--text-muted);
	line-height: 1.7;
}

/* ---- Testimonials: 3 across (the shared grid is 4) ---- */
.svc-quotes {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
	.svc-quotes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.svc-quotes {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* The FAQ section keeps its own full-bleed look from the v2.9
   block; inside this template's container it sits as a panel. */
.svc-hero + .section {
	padding-top: 56px;
}

/* ---- Final CTA ---- */
.svc-final {
	padding: 8px 0 76px;
}

.svc-contact-line {
	color: var(--text);
	font-weight: 600;
}

/* ==========================================================
   v2.21 — Chat button hardening.
   The theme chat button reuses the old plugin's #arsal-chat-btn
   id, so the legacy Additional CSS restyle (black background,
   written for the plugin) can outrank the theme's own .achat-btn
   rules and leave the button an empty black circle with its
   white icon washed out (seen live 2026-11-06, intermittently,
   worst on /ebay-services/). Pin the intended look — gold circle,
   white speech bubble, matching the WhatsApp button — at ID+class
   specificity with !important so no legacy rule can mute it.
   ========================================================== */
body #arsal-chat-btn.achat-btn {
	background-color: #f5b81e !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 3C6.5 3 2 6.9 2 11.8c0 2.8 1.5 5.3 3.9 6.9-.1 1-.5 2.3-1.2 3.3 0 0 2.9-.1 4.9-1.4.8.2 1.6.3 2.4.3 5.5 0 10-3.9 10-8.8S17.5 3 12 3z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 28px 28px !important;
	border: 0 !important;
	box-shadow: 0 0 0 5px rgba(245, 184, 30, 0.22), 0 10px 26px rgba(0, 0, 0, 0.45) !important;
}
body #arsal-chat-btn.achat-btn svg {
	display: block !important;
	width: 28px !important;
	height: 28px !important;
}
body #arsal-chat-btn.achat-btn svg path {
	fill: #ffffff !important;
}

/* ==========================================================================
   v2.23 — SEO Services (coded) template additions (page-seo.php).
   The page reuses the whole v2.20 .svc-* system; the only new
   piece is a two-column variant of the card grid for the page's
   two four-card sections (Custom Quote factors, trust blocks),
   so they sit 2 x 2 instead of 3 + 1. Appended only — no
   earlier rule is changed. (The base .svc-grid rules and their
   breakpoints live in the v2.20 block above; the <=620px rule
   below must stay after them so the single column still wins
   on small screens.)
   ========================================================================== */
.svc-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 620px) {
	.svc-grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   v2.24 — Social Media Marketing (coded) template additions
   (page-social.php). The page reuses the whole v2.20 .svc-*
   system; the only new pieces are the eyebrow kicker used by
   its two text blocks and the samples gallery grid. Appended
   only — no earlier rule is changed.
   ========================================================================== */
.svc-kicker {
	margin: 0 0 10px;
	color: var(--gold);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.svc-intro {
	text-align: center;
}

.svc-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.svc-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

@media (max-width: 800px) {
	.svc-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.svc-gallery {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================
   v2.34 — Graphic Design (coded) template article prose
   (page-graphic.php). The page is a long article; its prose
   paragraphs sit as direct children of .svc-article sections
   and get a comfortable reading measure. Card paragraphs
   inside .svc-grid are not direct children of the section,
   so the .svc-card rules above stay untouched, and no
   existing rule is changed.
   ============================================================ */
.svc-article > p {
	max-width: 860px;
	margin: 0 auto 22px;
	line-height: 1.75;
}

.svc-article > p:last-child {
	margin-bottom: 0;
}

.svc-article > h3 {
	max-width: 860px;
	margin: 30px auto 14px;
}

/* ============================================================
   v2.39 — AI Services (coded) template (page-aiservices.php).
   The six priced service sections carry a gold tagline under
   each H2, a "You get:" check list and a gold price line;
   the bundle band carries one centred line. All NEW classes
   scoped to this template — no existing rule is changed.
   ============================================================ */
.section-head p.svc-tagline {
	color: var(--gold);
	font-size: 1.15rem;
	font-weight: 600;
}

.svc-service .section-head {
	margin-bottom: 26px;
}

.svc-service-body {
	max-width: 860px;
	margin: 0 auto;
}

.svc-service-body > p {
	line-height: 1.7;
	margin: 0 0 18px;
}

.svc-list-label {
	color: var(--text);
	font-weight: 700;
}

.svc-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.svc-list li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 10px;
	line-height: 1.6;
	color: var(--text);
}

.svc-list li::before {
	content: "✓";
	color: var(--gold);
	font-weight: 800;
	position: absolute;
	left: 0;
}

.svc-service-body > p.svc-price {
	color: var(--gold);
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: 0;
}

.svc-bundle-line {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
	font-size: 1.12rem;
	line-height: 1.65;
	color: var(--text);
}

/* ============================================================
   v2.41 — Location pages (page-location.php, swapped in by
   inc/locations.php). The stored classic-editor content sits
   inside a div.svc-article; the v2.34 block above gives its
   direct-child paragraphs the 860px reading measure, so give
   the other common block children — the demoted H2s, lists
   and tables — the same measure, so the prose column reads
   as one column. Content images need no rule here: the
   global img rule already caps them at max-width: 100% with
   height: auto. New rules only; no existing rule is changed.
   (page-graphic.php's .svc-article sections keep their H2s
   inside .section-head wrappers, so they are untouched.)
   ============================================================ */
.svc-article > h2,
.svc-article > ul,
.svc-article > ol,
.svc-article > table {
	max-width: 860px;
	margin-left: auto;
	margin-right: auto;
}

.svc-article > h2 {
	margin-top: 34px;
	margin-bottom: 14px;
}

.svc-article > ul,
.svc-article > ol {
	margin-bottom: 22px;
	line-height: 1.75;
}

/* ============================================================
   v2.42 — Cookie consent bar (inc/consent.php +
   assets/js/consent.js) and the App Download page
   (page-app.php). NEW classes only; no existing rule is
   changed.

   Cookie bar layering: the theme's fixed layers are the
   quote modal (.arsal-modal, z-index 1000), the chat panel
   (.achat-panel, 130) and the floating WhatsApp / chat
   buttons (.arsal-wa / .achat-btn, 120). The bar takes 110 —
   under the modal AND under the floats — so while it is up
   both corner buttons stay visible and clickable above it,
   and the bar itself slides away the moment a choice is
   made. It starts translated fully below the viewport, so
   there is no flash before consent.js runs; the script is
   also the only thing that can reveal it (and only when no
   `arsal_cookie_consent` cookie is stored).
   ============================================================ */
.arsal-cookie-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 110;
	background: #0b0b0b;
	border-top: 1px solid rgba(245, 184, 30, 0.55);
	color: var(--text);
	box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.45);
	transform: translateY(110%);
	transition: transform 0.45s ease;
}

.arsal-cookie-bar.is-visible {
	transform: translateY(0);
}

.arsal-cookie-inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 14px 100px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px 22px;
}

.arsal-cookie-text {
	margin: 0;
	flex: 1 1 420px;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--text);
}

.arsal-cookie-text a {
	color: var(--gold);
}

.arsal-cookie-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.arsal-cookie-btn {
	padding: 10px 24px;
	font-size: 0.95rem;
}

.arsal-cookie-decline {
	display: inline-block;
	border-radius: 999px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-align: center;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.45);
	color: var(--text);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.arsal-cookie-decline:hover,
.arsal-cookie-decline:focus {
	border-color: var(--gold);
	color: var(--gold);
}

@media (max-width: 700px) {
	.arsal-cookie-inner {
		padding: 14px 16px 90px;
		flex-direction: column;
		align-items: stretch;
	}

	.arsal-cookie-text {
		flex: none;
	}

	.arsal-cookie-actions {
		justify-content: center;
	}
}

/* ---- App Download page (page-app.php) ---- */
.svc-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 620px) {
	.svc-grid-2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.svc-card h2 {
	color: var(--text);
	font-size: 1.3rem;
	margin: 0 0 10px;
}

.app-steps {
	margin: 0 0 6px;
	padding-left: 22px;
	color: var(--text-muted);
	line-height: 1.65;
}

.app-steps li {
	margin-bottom: 8px;
}

.app-steps li::marker {
	color: var(--gold);
	font-weight: 700;
}

.app-card-actions {
	justify-content: flex-start;
	margin-top: 18px;
}

/* ==========================================================================
   v2.46 — SERVICE PACKAGES (.pkg-*)
   The owner-approved PACKAGES-PLAN.md on every coded service page
   (inc/packages.php): a "How to Order" strip, a 3-tier package grid
   (gold Buy Now → Remitly; green "Confirm Order on WhatsApp" with the
   tier's pre-filled message) and the "How to Pay" block (Remitly +
   UK bank transfer). New classes only — no earlier rule is changed.
   Buttons reuse .btn-gold and .btn-whatsapp/.btn-wa exactly as the
   page heroes do.
   ========================================================================== */
.pkg-wrap {
	scroll-margin-top: 90px;
}

/* ---- How to Order strip ---- */
.pkg-strip {
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 4px solid var(--gold);
	border-radius: var(--radius);
	padding: 22px 24px;
	margin: 24px 0 26px;
}

.pkg-strip h3 {
	color: var(--gold);
	font-size: 1.12rem;
	margin: 0 0 8px;
}

.pkg-strip p {
	color: var(--text-muted);
	line-height: 1.65;
	margin: 0;
}

.pkg-strip strong {
	color: var(--text);
}

/* ---- Package grid + cards ---- */
.pkg-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	align-items: stretch;
}

@media (max-width: 900px) {
	.pkg-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.pkg-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.pkg-card--featured {
	background: var(--surface-2);
	border-color: rgba(245, 184, 30, 0.65);
}

.pkg-badge {
	position: absolute;
	top: -11px;
	left: 22px;
	background: var(--gold);
	color: #141414;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 4px 11px;
	border-radius: 999px;
}

.pkg-card h3 {
	color: var(--text);
	font-size: 1.15rem;
	margin: 0 0 10px;
}

.pkg-price-line {
	margin: 0 0 16px;
	line-height: 1.2;
}

.pkg-price {
	color: var(--gold);
	font-size: 1.85rem;
	font-weight: 800;
}

.pkg-note {
	color: var(--text-muted);
	font-size: 0.95rem;
	font-weight: 600;
}

.pkg-features {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.pkg-features li {
	color: var(--text-muted);
	line-height: 1.55;
	margin-bottom: 9px;
	padding-left: 26px;
	position: relative;
}

.pkg-features li::before {
	content: "✓";
	color: var(--gold);
	font-weight: 800;
	position: absolute;
	left: 0;
}

/* ---- Card / pack buttons (stacked, full width) ---- */
.pkg-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}

.pkg-actions .btn {
	width: 100%;
	justify-content: center;
	text-align: center;
}

/* The same button pair under the AI Services packs + bundle,
   where there is no card to stretch them. */
.svc-service-body .pkg-actions,
.svc-bundle .pkg-actions {
	max-width: 430px;
	margin-top: 18px;
}

/* ---- How to Pay block ---- */
.pkg-pay {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 30px 26px;
	margin-top: 28px;
	text-align: center;
}

.pkg-pay h3 {
	color: var(--text);
	font-size: 1.3rem;
	margin: 0 0 12px;
}

.pkg-pay h4 {
	color: var(--gold);
	font-size: 1.05rem;
	margin: 28px 0 6px;
}

.pkg-pay p {
	color: var(--text-muted);
	line-height: 1.65;
	max-width: 720px;
	margin: 0 auto 12px;
}

.pkg-pay .pkg-pay-action {
	margin: 16px auto 18px;
}

.pkg-bank {
	list-style: none;
	max-width: 600px;
	margin: 12px auto 18px;
	padding: 0;
	text-align: left;
}

.pkg-bank li {
	color: var(--text-muted);
	line-height: 1.55;
	padding: 7px 2px;
	border-bottom: 1px solid var(--border);
}

.pkg-bank li:last-child {
	border-bottom: none;
}

.pkg-bank li strong {
	color: var(--text);
	font-weight: 600;
}

/* ---- Homepage Best Deals cards (v2.46): component rows,
   total-value line and the gold saving line. ---- */
.pkg-parts {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.pkg-parts li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	color: var(--text-muted);
	line-height: 1.5;
	padding: 7px 0;
	border-bottom: 1px solid var(--border);
}

.pkg-part-price {
	color: var(--text);
	font-weight: 600;
	white-space: nowrap;
}

.pkg-value {
	color: var(--text-muted);
	font-size: 0.92rem;
	margin: 0 0 4px;
}

.pkg-save {
	color: var(--gold);
	font-weight: 700;
	margin: -8px 0 20px;
}

.pkg-deals-note {
	text-align: center;
	color: var(--text-muted);
	line-height: 1.65;
	max-width: 720px;
	margin: 18px auto 0;
}

/* ============================================================
   PAY / CHECKOUT PAGE (v2.48 — page-pay.php + inc/orders.php)
   The order page behind every Buy Now button: the package
   summary card + buyer form (the fields reuse the
   .audit-field styles — this block only adds the textarea
   twin, the centring and the page's own pieces), the
   success panel with the gold invoice number, and the
   package chooser shown when /pay/ is opened without a
   package key. Appended only — no existing rule changed.
   ============================================================ */
.pay-panel {
	max-width: 820px;
	margin: 0 auto;
}

.pay-summary {
	margin-bottom: 30px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--border);
}

.pay-summary-label {
	color: var(--gold);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.pay-summary h2 {
	margin: 0 0 6px;
}

.pay-form textarea {
	width: 100%;
	box-sizing: border-box;
	background: var(--dark);
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--text);
	font: inherit;
	padding: 12px 14px;
	resize: vertical;
}

.pay-form textarea:focus {
	border-color: var(--gold);
	outline: none;
	box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.pay-success {
	text-align: center;
}

.pay-success h2 {
	margin: 0 0 8px;
}

.pay-success-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 50%;
	background: var(--gold);
	color: #fff;
	font-size: 38px;
	font-weight: 700;
	line-height: 72px;
}

.pay-success-package {
	color: var(--text-muted);
	margin: 0 0 18px;
}

.pay-invoice-label {
	color: var(--text-muted);
	font-size: 0.85rem;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0;
}

.pay-invoice-no {
	color: var(--gold);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 1px;
	margin: 4px 0 18px;
}

.pay-success-actions {
	justify-content: center;
	margin-top: 22px;
}

.pay-success .pkg-pay {
	text-align: left;
}

.pay-chooser-alert {
	background: rgba(212, 175, 55, 0.1);
	border: 1px solid var(--gold);
	border-radius: 8px;
	color: var(--text);
	padding: 12px 16px;
}

.pay-chooser-group {
	margin: 26px 0 6px;
}

.pay-chooser-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pay-chooser-list li {
	border-bottom: 1px solid var(--border);
}

.pay-chooser-list a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 11px 4px;
	color: var(--text);
	font-weight: 600;
	text-decoration: none;
}

.pay-chooser-list a:hover {
	color: var(--gold);
}

.pay-chooser-price {
	color: var(--gold);
	font-weight: 700;
	white-space: nowrap;
}