/*
 * Amaan Service Detail Pages — Visual System
 * Concept: Premium Protection — calm, organized, practical, trustworthy.
 *
 * Loaded only on pages using template-service-detail.php.
 * All content is editor-driven — CSS classes applied manually in post_content.
 *
 * Brand palette ONLY:
 *   #0E1F4D  #1B2F6E  #244A86  #F07D00  #F6F2EB  #EBF0F8  #FFFFFF  #25D366
 *
 * Table of contents:
 *   0.  Reset & base scope
 *   1.  Tokens
 *   2.  Container & layout utilities
 *   3.  Buttons
 *   4.  Hero
 *   5.  Section shells (soft / navy backgrounds)
 *   6.  Card grid (When do we need a lift? / Related services)
 *   7.  Checklist (Assessment / Estimate)
 *   8.  Steps / timeline
 *   9.  Areas served
 *   10. Estimate panel
 *   11. FAQ accordion
 *   12. Final CTA
 *   13. Responsive — tablet <= 1024px
 *   14. Responsive — mobile <= 640px
 *   15. Reduced motion
 */


/* ============================================================
   0. RESET & BASE SCOPE
   ============================================================ */

.amaan-service-detail *,
.amaan-service-detail *::before,
.amaan-service-detail *::after {
	box-sizing: border-box;
}

.amaan-service-detail {
	direction: rtl;
	font-family: inherit;
	color: #0E1F4D;
	overflow-x: hidden;
}

.amaan-service-detail img {
	max-width: 100%;
	height: auto;
	display: block;
}

.amaan-service-detail ul,
.amaan-service-detail ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

.amaan-service-detail a {
	text-decoration: none;
}

/* wpautop sometimes leaves an empty <p> between block-level elements */
.amaan-service-hero__content > p:empty,
.amaan-service-hero__panel > p:empty,
.amaan-service-card > p:empty,
.amaan-service-step > p:empty,
.amaan-service-estimate__panel > p:empty,
.amaan-service-final__content > p:empty {
	display: none;
}


/* ============================================================
   1. TOKENS
   ============================================================ */

.amaan-service-detail {
	--navy-deep  : #0E1F4D;
	--navy       : #1B2F6E;
	--royal-blue : #244A86;
	--orange     : #F07D00;
	--ivory      : #F6F2EB;
	--blue-gray  : #EBF0F8;
	--white      : #FFFFFF;
	--whatsapp   : #25D366;

	--text-on-dark    : rgba(255,255,255,0.90);
	--text-muted-dark : rgba(255,255,255,0.58);
	--text-body       : #1B2F6E;
	--text-muted      : rgba(27,47,110,0.60);
	--border-light    : rgba(27,47,110,0.09);
	--border-dark     : rgba(255,255,255,0.12);

	--sp-1 : 0.5rem;
	--sp-2 : 1rem;
	--sp-3 : 1.5rem;
	--sp-4 : 2rem;
	--sp-5 : 3rem;
	--sp-6 : 4.5rem;
	--sp-7 : 6rem;

	--r-sm   : 6px;
	--r-md   : 12px;
	--r-lg   : 20px;
	--r-xl   : 28px;
	--r-pill : 9999px;

	--sh-sm  : 0 2px 10px rgba(14,31,77,0.07);
	--sh-md  : 0 4px 24px rgba(14,31,77,0.12);
	--sh-lg  : 0 10px 48px rgba(14,31,77,0.20);

	--ease   : cubic-bezier(0.22, 1, 0.36, 1);
	--t-fast : 160ms;
	--t-base : 260ms;
}


/* ============================================================
   2. CONTAINER & LAYOUT UTILITIES
   ============================================================ */

.amaan-service-wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--sp-3);
}

.amaan-service-wrap--narrow {
	max-width: 860px;
}

.amaan-service-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.10em;
	color: var(--orange);
	margin-bottom: var(--sp-2);
	margin-top: 0;
}

.amaan-service-eyebrow::before {
	content: '';
	display: block;
	width: 18px;
	height: 2px;
	background-color: var(--orange);
}

.amaan-service-heading {
	font-size: clamp(1.35rem, 3vw, 2rem);
	font-weight: 800;
	color: var(--navy-deep);
	line-height: 1.35;
	margin: 0 0 var(--sp-2);
}

.amaan-service-heading--light {
	color: var(--white);
}

.amaan-service-lead {
	font-size: clamp(0.95rem, 1.6vw, 1.05rem);
	line-height: 1.85;
	color: var(--text-muted);
	max-width: 62ch;
	margin: 0 0 var(--sp-4);
}

.amaan-service-lead--light {
	color: var(--text-muted-dark);
}


/* ============================================================
   3. BUTTONS
   ============================================================ */

.amaan-service-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 2rem;
	border-radius: var(--r-sm);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
	border: 2px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--t-fast) var(--ease),
		border-color     var(--t-fast) var(--ease),
		box-shadow       var(--t-fast) var(--ease),
		transform        var(--t-fast) var(--ease),
		color            var(--t-fast) var(--ease);
	white-space: nowrap;
}

.amaan-service-btn:hover  { transform: translateY(-2px); }
.amaan-service-btn:active { transform: translateY(0); }
.amaan-service-btn:focus-visible {
	outline: 3px solid var(--orange);
	outline-offset: 3px;
	transform: none;
}

.amaan-service-btn--whatsapp {
	background-color: var(--whatsapp);
	color: var(--white);
	box-shadow: 0 4px 20px rgba(37,211,102,0.28);
}
.amaan-service-btn--whatsapp:hover {
	background-color: #1fba58;
	color: var(--white);
}

.amaan-service-btn--outline-dark {
	background-color: transparent;
	color: var(--navy-deep);
	border-color: rgba(14,31,77,0.30);
}
.amaan-service-btn--outline-dark:hover {
	background-color: rgba(14,31,77,0.05);
	border-color: var(--navy-deep);
	color: var(--navy-deep);
}

.amaan-service-btn--outline-light {
	background-color: transparent;
	color: var(--white);
	border-color: rgba(255,255,255,0.40);
}
.amaan-service-btn--outline-light:hover {
	background-color: rgba(255,255,255,0.08);
	border-color: var(--white);
	color: var(--white);
}


/* ============================================================
   4. HERO
   Two-column split on desktop: content (right, natural reading
   order) + visual column (left) — matches the site's existing
   area-page hero convention. The visual column holds the featured
   image and the decision panel together, stacked, as one connected
   unit (Service Hero Integrated Visual Pass — see
   template-service-detail.php for how the image is placed inside
   .amaan-service-hero__visual at render time). Stacks to a single
   column on mobile: breadcrumb, content, image, panel — matching
   DOM order, no explicit reordering needed.
   ============================================================ */

.amaan-service-hero {
	background-color: var(--navy-deep);
	background-image: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, var(--royal-blue) 100%);
	padding-block: var(--sp-6);
	position: relative;
	overflow: hidden;
}

.amaan-service-hero::before {
	content: '';
	position: absolute;
	inset-inline-end: -80px;
	top: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	border: 1px solid rgba(240,125,0,0.14);
	pointer-events: none;
}

.amaan-service-hero__shell {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: var(--sp-5);
	align-items: center;
	position: relative;
	z-index: 1;
}

/* Breadcrumb: theme-authored nav baked into each page's own content
   (template-service-detail.php calls no Rank Math breadcrumb function
   — Rank Math's breadcrumb schema/output is unrelated to this markup).
   Styled as a soft pill/bar that reads clearly against the navy hero
   without looking like default plugin output. */
.amaan-service-hero__breadcrumb {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin-bottom: var(--sp-4);
	padding: 0.45rem 0.9rem;
	background-color: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: var(--r-pill);
	font-size: 0.78rem;
	max-width: 100%;
}

.amaan-service-hero__breadcrumb a {
	color: var(--text-muted-dark);
	transition: color var(--t-fast) var(--ease);
}
.amaan-service-hero__breadcrumb a:hover { color: var(--orange); }

/* Current page label: present but deliberately quieter than a link
   hover state — not full white, so it doesn't outrank the H1. */
.amaan-service-hero__breadcrumb span[aria-current] {
	color: rgba(255,255,255,0.72);
	font-weight: 600;
}

.amaan-service-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background-color: rgba(240,125,0,0.14);
	border: 1px solid rgba(240,125,0,0.35);
	color: #FFC98A;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.4rem 0.9rem;
	border-radius: var(--r-pill);
	margin-bottom: var(--sp-3);
}

.amaan-service-hero__title {
	font-size: clamp(1.75rem, 4.2vw, 2.75rem);
	font-weight: 800;
	color: var(--white);
	line-height: 1.28;
	margin: 0 0 var(--sp-3);
}

.amaan-service-hero__lead {
	font-size: clamp(0.95rem, 1.7vw, 1.1rem);
	line-height: 1.9;
	color: var(--text-muted-dark);
	max-width: 56ch;
	margin: 0 0 var(--sp-4);
}

.amaan-service-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

/* ── Decision panel ── */
.amaan-service-hero__panel {
	background-color: var(--ivory);
	border-radius: var(--r-xl);
	padding: var(--sp-4);
	box-shadow: var(--sh-lg);
	position: relative;
}

.amaan-service-hero__panel-eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--orange);
	letter-spacing: 0.08em;
	margin: 0 0 0.25rem;
}

.amaan-service-hero__panel-title {
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--navy-deep);
	margin: 0 0 var(--sp-3);
}

.amaan-service-hero__check-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-2);
}

.amaan-service-hero__check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background-color: var(--white);
	border: 1px solid var(--border-light);
	border-radius: var(--r-md);
	padding: 0.7rem 0.85rem;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--navy-deep);
}

.amaan-service-hero__check-icon {
	flex-shrink: 0;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background-color: rgba(240,125,0,0.12);
	color: var(--orange);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8rem;
}

/* ── Hero visual column: image + decision panel together ──
   (Service Hero Integrated Visual Pass — supersedes the earlier
   after-hero .amaan-service-hero-media band). Only present when the
   page has a featured image set — has_post_thumbnail() guard in
   template-service-detail.php means the panel simply renders on its
   own, un-wrapped, wherever there's no image. */
.amaan-service-hero__visual {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	position: relative;
}

.amaan-service-hero__figure {
	margin: 0;
	position: relative;
}

/* Small accent layer — pure CSS, no extra image. Sits behind the
   image card, offset toward one corner. Lives on the (unclipped)
   <figure>, not the image itself, so it isn't cut off by the
   image's own rounded corners. */
.amaan-service-hero__figure::before {
	content: '';
	position: absolute;
	inset-inline-start: -10px;
	inset-block-end: -10px;
	width: 65%;
	height: 65%;
	border-radius: var(--r-xl);
	background: linear-gradient(135deg, rgba(240,125,0,0.45), rgba(240,125,0,0));
	z-index: -1;
	pointer-events: none;
}

img.amaan-service-hero__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: var(--r-xl);
	box-shadow: var(--sh-lg);
	position: relative;
	z-index: 1;
}


/* ============================================================
   5. SECTION SHELLS
   ============================================================ */

.amaan-service-section {
	padding-block: var(--sp-6);
}

.amaan-service-section--soft {
	background-color: var(--blue-gray);
}

.amaan-service-section--ivory {
	background-color: var(--ivory);
}

.amaan-service-section--navy {
	background-color: var(--navy-deep);
}

.amaan-service-section--navy .amaan-service-heading,
.amaan-service-section--navy .amaan-service-lead {
	color: var(--white);
}
.amaan-service-section--navy .amaan-service-lead {
	color: var(--text-muted-dark);
}


/* ============================================================
   6. CARD GRID — "When do we need a lift?" / Related services
   ============================================================ */

.amaan-service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

.amaan-service-card {
	background-color: var(--white);
	border: 1px solid var(--border-light);
	border-radius: var(--r-lg);
	padding: var(--sp-3);
	box-shadow: var(--sh-sm);
	transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
	display: flex;
	flex-direction: column;
}

.amaan-service-card:hover {
	box-shadow: var(--sh-md);
	transform: translateY(-3px);
}

.amaan-service-card__icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--r-md);
	background-color: rgba(240,125,0,0.10);
	color: var(--orange);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.15rem;
	margin-bottom: var(--sp-2);
}

.amaan-service-card__title {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--navy-deep);
	margin: 0 0 0.5rem;
}

.amaan-service-card__text {
	font-size: 0.9rem;
	line-height: 1.75;
	color: var(--text-muted);
	margin: 0;
}

/* Related-services variant: smaller footprint, ends in a link — must
   read as a lightweight nav card, not a final CTA. */
.amaan-service-related-card {
	background-color: var(--white);
	border: 1px solid var(--border-light);
	border-radius: var(--r-lg);
	padding: var(--sp-3);
	box-shadow: var(--sh-sm);
	transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
	display: flex;
	flex-direction: column;
}

.amaan-service-related-card:hover {
	box-shadow: var(--sh-md);
	transform: translateY(-3px);
}

.amaan-service-related-card .amaan-service-card__icon {
	background-color: var(--blue-gray);
	color: var(--royal-blue);
}

.amaan-service-related-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--sp-2);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--royal-blue);
	transition: color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}

.amaan-service-related-card__link:hover {
	color: var(--orange);
	gap: 0.6rem;
}


/* ============================================================
   7. CHECKLIST — Assessment / Estimate
   ============================================================ */

.amaan-service-assessment {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: var(--sp-5);
	align-items: start;
	margin-top: var(--sp-4);
}

.amaan-service-checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-2) var(--sp-3);
}

.amaan-service-checklist__item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--navy-deep);
	line-height: 1.5;
	background-color: var(--white);
	border: 1px solid var(--border-light);
	border-radius: var(--r-md);
	padding: 0.75rem 1rem;
}

.amaan-service-checklist__item::before {
	content: '';
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
	border-radius: var(--r-sm);
	background-color: var(--white);
	border: 2px solid rgba(240,125,0,0.40);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l4 4L11 1' stroke='%23F07D00' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 62%;
}


/* ============================================================
   8. STEPS / TIMELINE
   ============================================================ */

.amaan-service-steps {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: var(--sp-4);
	max-width: 720px;
	margin-inline: auto;
}

.amaan-service-step {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding-block: var(--sp-2);
	position: relative;
}

.amaan-service-step:not(:last-child)::after {
	content: '';
	position: absolute;
	inset-inline-start: 1.35rem;
	top: 3rem;
	bottom: -0.5rem;
	width: 2px;
	background-color: var(--border-light);
}

.amaan-service-step__number {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: var(--navy-deep);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	font-weight: 800;
	position: relative;
	z-index: 1;
}

.amaan-service-step__body {
	flex: 1;
	background-color: var(--white);
	border: 1px solid var(--border-light);
	border-radius: var(--r-md);
	padding: 0.85rem 1.1rem;
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--navy-deep);
	line-height: 1.7;
}


/* ============================================================
   9. AREAS SERVED
   ============================================================ */

.amaan-service-areas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
	margin-top: var(--sp-4);
}

.amaan-service-area-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-align: center;
	background-color: var(--white);
	border: 1px solid var(--border-light);
	border-radius: var(--r-lg);
	padding: var(--sp-4) var(--sp-2);
	font-weight: 700;
	color: var(--navy-deep);
	box-shadow: var(--sh-sm);
	transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.amaan-service-area-card:hover {
	box-shadow: var(--sh-md);
	transform: translateY(-3px);
	border-color: rgba(240,125,0,0.35);
}

.amaan-service-area-card__icon {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background-color: rgba(36,74,134,0.10);
	color: var(--royal-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}


/* ============================================================
   10. ESTIMATE PANEL
   ============================================================ */

.amaan-service-estimate {
	padding-block: var(--sp-6);
}

.amaan-service-estimate__panel {
	background-color: var(--blue-gray);
	border-radius: var(--r-xl);
	border: 1px solid var(--border-light);
	padding: var(--sp-5);
	box-shadow: var(--sh-sm);
}

.amaan-service-estimate__list {
	margin-block: var(--sp-3) var(--sp-4);
}

.amaan-service-estimate__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sp-2);
}


/* ============================================================
   11. FAQ ACCORDION
   ============================================================ */

.amaan-service-faq {
	padding-block: var(--sp-6);
}

.amaan-service-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-top: var(--sp-4);
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--border-light);
	box-shadow: var(--sh-sm);
}

.amaan-service-faq__item {
	background-color: var(--white);
	border-bottom: 1px solid var(--border-light);
}

.amaan-service-faq__item:last-child {
	border-bottom: none;
}

.amaan-service-faq__question {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	cursor: pointer;
	font-size: 0.9688rem;
	font-weight: 700;
	color: var(--navy-deep);
	background-color: transparent;
	border-inline-start: 3px solid transparent;
	transition:
		color             var(--t-fast) var(--ease),
		border-color      var(--t-fast) var(--ease),
		background-color  var(--t-fast) var(--ease);
	-webkit-user-select: none;
	user-select: none;
}

.amaan-service-faq__question::-webkit-details-marker { display: none; }
.amaan-service-faq__question::marker { display: none; }

.amaan-service-faq__question:hover {
	color: var(--orange);
	border-inline-start-color: var(--orange);
	background-color: rgba(240,125,0,0.03);
}

details[open] > .amaan-service-faq__question {
	color: var(--orange);
	border-inline-start-color: var(--orange);
	background-color: rgba(240,125,0,0.04);
}

.amaan-service-faq__question-icon {
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-inline-end: 2.5px solid currentColor;
	border-bottom: 2.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--t-base) var(--ease);
	opacity: 0.65;
}

details[open] > .amaan-service-faq__question .amaan-service-faq__question-icon {
	transform: rotate(-135deg) translateY(-2px);
}

.amaan-service-faq__answer {
	padding: 0 var(--sp-4) var(--sp-3);
	border-inline-start: 3px solid var(--orange);
	background-color: rgba(240,125,0,0.025);
}

.amaan-service-faq__answer p {
	font-size: 0.9375rem;
	line-height: 1.85;
	color: var(--text-muted);
	margin: 0;
}


/* ============================================================
   12. FINAL CTA
   Solid navy background + CSS-only decorative pattern (animated
   drifting lines + orange corner arcs) — no image dependency.
   ============================================================ */

.amaan-service-final {
	position: relative;
	overflow: hidden;
	padding-block: var(--sp-7);
	background-color: var(--navy-deep);
	background-image: linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 60%, var(--royal-blue) 100%);
}

.amaan-service-final::before {
	content: '';
	position: absolute;
	inset: -100px;
	background-image:
		repeating-linear-gradient(
			-55deg,
			transparent,
			transparent 40px,
			rgba(255,255,255,0.022) 40px,
			rgba(255,255,255,0.022) 41px
		);
	background-size: 82px 82px;
	animation: amaan-service-final-drift 14s linear infinite;
	will-change: transform;
	pointer-events: none;
}

@keyframes amaan-service-final-drift {
	from { transform: translate(0, 0); }
	to   { transform: translate(82px, 82px); }
}

.amaan-service-final::after {
	content: '';
	position: absolute;
	inset-inline-start: -70px;
	bottom: -70px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	border: 1px solid rgba(240,125,0,0.14);
	pointer-events: none;
}

.amaan-service-final__inner {
	position: relative;
	z-index: 1;
}

.amaan-service-final__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

.amaan-service-final__content .amaan-service-eyebrow {
	justify-content: center;
}

.amaan-service-final__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin-top: var(--sp-3);
}

.amaan-service-final__tel {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--text-on-dark);
	font-weight: 700;
	padding: 0.875rem 1.5rem;
	border: 2px solid var(--border-dark);
	border-radius: var(--r-sm);
	transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.amaan-service-final__tel:hover {
	border-color: var(--orange);
	color: var(--orange);
}

.amaan-service-final__note {
	margin-top: var(--sp-3);
	font-size: 0.8rem;
	color: var(--text-muted-dark);
}


/* ============================================================
   13. RESPONSIVE — TABLET <= 1024px
   ============================================================ */

@media (max-width: 1024px) {
	.amaan-service-hero__shell {
		grid-template-columns: 1fr;
	}

	.amaan-service-hero__visual {
		max-width: 480px;
		margin-inline: auto;
		width: 100%;
	}

	.amaan-service-hero__panel {
		max-width: 480px;
		margin-inline: auto;
	}

	.amaan-service-grid,
	.amaan-service-areas {
		grid-template-columns: repeat(2, 1fr);
	}

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


/* ============================================================
   14. RESPONSIVE — MOBILE <= 640px
   ============================================================ */

@media (max-width: 640px) {
	.amaan-service-section,
	.amaan-service-hero,
	.amaan-service-estimate,
	.amaan-service-faq {
		padding-block: var(--sp-5);
	}

	.amaan-service-final {
		padding-block: var(--sp-6);
	}

	.amaan-service-hero__visual {
		max-width: 100%;
	}

	img.amaan-service-hero__image {
		border-radius: var(--r-lg);
	}

	.amaan-service-hero__actions,
	.amaan-service-final__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.amaan-service-hero__actions .amaan-service-btn,
	.amaan-service-final__actions .amaan-service-btn,
	.amaan-service-final__actions .amaan-service-final__tel {
		width: 100%;
	}

	.amaan-service-hero__check-list {
		grid-template-columns: 1fr 1fr;
	}

	.amaan-service-grid,
	.amaan-service-areas {
		grid-template-columns: 1fr;
	}

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

	.amaan-service-estimate__panel {
		padding: var(--sp-3);
	}

	.amaan-service-step:not(:last-child)::after {
		inset-inline-start: 1.35rem;
	}
}


/* ============================================================
   15. STICKY MOBILE CTA — hero- and final-CTA-aware visibility
   (service detail pages only)

   .amaan-sticky-cta (template-parts/components/sticky-mobile-cta.php)
   is fixed to the viewport bottom on mobile, site-wide, and can
   overlap .amaan-service-hero__actions or .amaan-service-final__actions
   on short/narrow viewports (confirmed: final CTA overlaps 56px on
   390px and 360px; hero CTA overlaps ~40px at 360px specifically —
   Service Sticky CTA Overlap Fix Pass). Same two-layer approach
   already proven for area pages (amaan-area-pages-v4.css §13),
   reimplemented here scoped to this template instead of copied/
   edited in place, so the area-page fix is untouched.

   1. CSS-only safety net (always on, no JS required): reserve the
      sticky bar's height + a gap under the hero actions row, and as
      bottom padding on the Final CTA section, at the same ≤767.98px
      breakpoint the bar itself uses (amaan-homepage.css). Scoped via
      .amaan-service-detail (the template's own wrapper on <main>) —
      safe because both target elements are its descendants.
   2. JS enhancement (amaan-area-sticky-cta.js, now shared with area
      pages — see that file's own doc comment): fades the bar out
      while either action row is on screen. The bar itself lives in
      footer.php, outside <main>, so it is NOT a descendant of
      .amaan-service-detail — these two rules use body-class scoping
      instead, same technique the area-page fix already relies on.
   ============================================================ */

@media (max-width: 767.98px) {
	.amaan-service-detail .amaan-service-hero__actions {
		margin-bottom: 72px; /* 56px bar height + 16px gap */
	}

	.amaan-service-detail .amaan-service-final {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}

	body.page-template-template-service-detail-php .amaan-sticky-cta {
		transition: opacity 0.2s ease, visibility 0s linear 0s;
	}

	body.page-template-template-service-detail-php .amaan-sticky-cta--hidden {
		opacity: 0;
		pointer-events: none;
		visibility: hidden;
		transition: opacity 0.2s ease, visibility 0s linear 0.2s;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.page-template-template-service-detail-php .amaan-sticky-cta {
		transition: none;
	}
}


/* ============================================================
   16. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.amaan-service-final::before {
		animation: none;
	}

	.amaan-service-card,
	.amaan-service-related-card,
	.amaan-service-area-card,
	.amaan-service-btn {
		transition: none;
	}
}