/*
 * Service Page Stylesheet (Income Tax, Gallery, Internal Audit, and future
 * inner pages)
 *
 * Extends the main brand system (main.css tokens: colors, spacing, typography).
 * The .svc-hero component is the shared dark inner-page hero used by these
 * pages. The .it-* classes below are the shared two-column main content
 * layout (intro + card lists/grids + featured image), reused as-is by the
 * Internal Audit page for visual consistency; the closing CTA reuses the
 * home page's .contact-cta component.
 *
 * Table of contents:
 *  1.  Inner Hero
 *  2.  Section variants
 *  3.  Income Tax — main content layout
 *  4.  Income Tax — specialized services list (left column)
 *  5.  Income Tax — "Why Choose" card grid (left column)
 *  6.  Income Tax — featured image (right column)
 *  7.  Income Tax — highlight cards (right column)
 *  8.  Income Tax — experts banner (right column)
 *  9.  Income Tax — related services list (right column)
 * 10.  Internal Audit — framework sections + "How We Add Value" card list (left column)
 * 11.  Responsive
 */


/* ============================================================================
   1. Inner Hero
   ============================================================================ */

.site-main--svc {
	padding-block: 0;
}

.svc-hero {
	position: relative;
	min-height: 320px;
	display: flex;
	align-items: center;
	background-color: var(--color-brand-dark);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.svc-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(5, 48, 72, 0.82) 0%, rgba(7, 70, 98, 0.68) 28%, rgba(8, 92, 125, 0.48) 55%, rgba(10, 110, 145, 0.28) 100%);
}

.svc-hero > .container {
	position: relative;
	z-index: 2;
	padding-block: var(--space-16);
	width: 100%;
}

.svc-hero__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-5);
	font-size: var(--font-size-sm);
}

.svc-hero__breadcrumb a {
	color: rgba(255, 255, 255, 0.80);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.svc-hero__breadcrumb a:hover {
	color: var(--color-accent);
}

.svc-hero__breadcrumb-sep {
	color: rgba(255, 255, 255, 0.35);
}

/* Non-clickable crumbs (e.g. Services, Taxation) — no page exists for these yet. */
.svc-hero__breadcrumb-text {
	color: rgba(255, 255, 255, 0.72);
}

.svc-hero__breadcrumb-current {
	color: var(--color-accent);
	font-weight: var(--font-weight-medium);
}

.svc-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-white);
	background: rgba(85, 201, 154, 0.18);
	border: 1px solid rgba(85, 201, 154, 0.40);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-bold);
	letter-spacing: 0.12em;
	padding: 6px 16px;
	border-radius: var(--radius-full);
	margin-bottom: var(--space-4);
}

.svc-hero__badge::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--color-accent);
}

.svc-hero__category {
	color: rgba(255, 255, 255, 0.75);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
	margin-bottom: var(--space-2);
}

.svc-hero__title {
	font-size: clamp(2rem, 5vw, var(--font-size-4xl));
	font-weight: 700;
	color: var(--color-white);
	line-height: 1.1;
	margin-bottom: var(--space-3);
}

.svc-hero__intro {
	color: rgba(255, 255, 255, 0.80);
	font-size: var(--font-size-lg);
	max-width: 700px;
	margin-bottom: 0;
}


/* ============================================================================
   2. Section variants
   ============================================================================ */

/* White background variant of the home page's .services-section, used to
   visually separate two consecutive reused sections on service pages. */
.services-section--white {
	background-color: var(--color-white);
}

/* Income Tax CTA — white / outline pill buttons per the Figma reference.
   Scoped under .contact-cta--it so the home page's CTA (green button) is
   completely unaffected. */
.contact-cta--it .contact-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-4);
	margin-top: var(--space-3);
}

.contact-cta--it .contact-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	margin-top: 0;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	border: 2px solid transparent;
}

.contact-cta--it .contact-cta__btn--solid {
	background-color: var(--color-white);
	color: var(--color-brand-dark);
	border-color: var(--color-white);
}

.contact-cta--it .contact-cta__btn--solid:hover,
.contact-cta--it .contact-cta__btn--solid:focus-visible {
	background-color: rgba(255, 255, 255, 0.90);
	color: var(--color-brand-dark);
}

.contact-cta--it .contact-cta__btn--outline {
	background-color: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.55);
}

.contact-cta--it .contact-cta__btn--outline:hover,
.contact-cta--it .contact-cta__btn--outline:focus-visible {
	border-color: var(--color-white);
	background-color: rgba(255, 255, 255, 0.10);
	color: var(--color-white);
}

.contact-cta--it .contact-cta__btn--outline svg {
	transition: transform var(--transition-base);
}

.contact-cta--it .contact-cta__btn--outline:hover svg,
.contact-cta--it .contact-cta__btn--outline:focus-visible svg {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.contact-cta--it .contact-cta__btn--outline svg {
		transition: none;
	}

	.contact-cta--it .contact-cta__btn--outline:hover svg,
	.contact-cta--it .contact-cta__btn--outline:focus-visible svg {
		transform: none;
	}
}


/* ============================================================================
   3. Income Tax — main content layout
   ============================================================================ */

.it-content {
	padding-block: var(--space-16);
	background-color: var(--color-white);
}

.it-content__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--space-12);
	align-items: start;
}

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

/* Blocks that intentionally break out of the two-column grid to span the
   full container width (e.g. "Why Choose" once the sidebar content above
   it has run out, avoiding an empty gap next to a constrained-width block). */
.it-block--full {
	margin-top: var(--space-12);
}

.it-content__main {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	min-width: 0;
}

.it-intro {
	color: var(--color-text-muted);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-base);
}

.it-heading {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-left: var(--space-4);
	margin-bottom: var(--space-6);
	font-size: var(--font-size-2xl);
}

.it-heading:has(+ .it-block__content) {
	margin-bottom: var(--space-3);
}

.it-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 4px;
	border-radius: var(--radius-full);
	background-color: var(--color-accent);
}

.it-heading__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--color-bg-alt);
	border: 1.5px solid rgba(85, 201, 154, 0.35);
}

.it-heading__icon img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.it-block__content {
	color: var(--color-text-muted);
	font-size: var(--font-size-base);
	line-height: 1.7;
	margin-bottom: var(--space-6);
}

.it-content__aside {
	position: sticky;
	top: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}


/* ============================================================================
   4. Income Tax — specialized services list
   ============================================================================ */

.it-services-list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.it-service-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.it-service-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
	padding-top: var(--space-2);
}

.it-service-card:hover,
.it-service-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-accent);
}

.it-service-card__icon {
	width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(85, 201, 154, 0.06);
    transition: transform 0.30s ease, background-color 0.30s ease;
}

.it-service-card__icon img {
	width: auto;
	height: auto;
	object-fit: contain;
}

.it-service-card:hover .it-service-card__icon,
.it-service-card:focus-within .it-service-card__icon {
	background-color: rgba(85, 201, 154, 0.12);
	box-shadow: 0 0 0 6px rgba(85, 201, 154, 0.15);
}

.it-service-card__title {
	color: var(--color-heading);
	font-size: 1.2rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	margin-bottom: 0;
}

.it-service-card__desc {
	color: var(--color-text-muted);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 0;
}


/* ============================================================================
   5. Income Tax — "Why Choose" card grid (left column)
   ============================================================================ */

.it-why-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: stretch;
}

.it-why-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	height: 100%;
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.it-why-card:hover,
.it-why-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-accent);
}

/* Figma treatment: solid dark circle with a white icon glyph, not the
   theme's usual light-circle multi-tone icon illustrations. */
.it-why-card__icon {
	display: flex;
	width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom:0.5rem;
    flex-shrink: 0;
    background: #55C99A;
    transition: transform 0.30s ease, background-color 0.30s ease;
}

.it-why-card__icon img {
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Internal Audit "Value We Deliver" uses a dark navy icon circle per its
   Figma reference, instead of the Income Tax "Why Choose" green default. */
.it-why-card--dark .it-why-card__icon {
	background: #55C99A;
    border-color: #55C99A;
}

.it-why-card:hover .it-why-card__icon,
.it-why-card:focus-within .it-why-card__icon {
	box-shadow: 0 0 0 6px rgba(85, 201, 154, 0.20);
}

.it-why-card__title {
	font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    margin-bottom: var(--space-4);
    transition: color var(--transition-base);
	line-height: 1.3;
	margin-bottom: 0;
}

.it-why-card__desc {
	color: var(--color-text-muted);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
   
	margin-bottom: 0;
}


/* ============================================================================
   6. Income Tax — featured image (right column)
   ============================================================================ */

.it-featured-image {
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	aspect-ratio: 4 / 3;
}

.it-featured-image__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-slow);
}

.it-featured-image:hover .it-featured-image__img {
	transform: scale(1.04);
}


/* ============================================================================
   7. Income Tax — highlight cards (right column)
   ============================================================================ */

.it-highlight-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap:24px
}

.it-highlight-card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	box-shadow: var(--shadow-sm);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.it-highlight-card:hover,
.it-highlight-card:focus-within {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-accent);
}

.it-highlight-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--color-bg-alt);
	border: 2px solid #55C99A;
	transition: box-shadow var(--transition-base), background-color var(--transition-base);
}

.it-highlight-card__icon img {
	width: auto;
	height: auto;
	object-fit: contain;
}

.it-highlight-card:hover .it-highlight-card__icon,
.it-highlight-card:focus-within .it-highlight-card__icon {
	background-color: rgba(85, 201, 154, 0.12);
	box-shadow: 0 0 0 5px rgba(85, 201, 154, 0.15);
}

.it-highlight-card__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.it-highlight-card__title {
	color: var(--color-heading);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: 1.3;
}

.it-highlight-card__text {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	line-height: 1.4;
}


/* ============================================================================
   8. Income Tax — experts banner (right column)
   ============================================================================ */

.it-experts-banner {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	background-color: rgba(85, 201, 154, 0.08);
	border: 1px solid rgba(85, 201, 154, 0.30);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-6);
}

.it-experts-banner__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--color-brand-dark);
}

.it-experts-banner__icon img {
	width: 24px;
	height: 24px;
	object-fit: contain;
}

.it-experts-banner__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.it-experts-banner__heading {
	color: var(--color-heading);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-bold);
	line-height: 1.3;
}

.it-experts-banner__text {
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: 1.4;
}


/* ============================================================================
   9. Income Tax — related services list (right column)
   ============================================================================ */

.it-related-list {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-sm);
}

.it-related-list__heading {
	font-size: var(--font-size-lg);
	color: var(--color-heading);
	margin-bottom: var(--space-3);
}

.it-related-list__items {
	display: flex;
	flex-direction: column;
}

.it-related-list__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-heading);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	transition: color var(--transition-base);
}

.it-related-list__item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.it-related-list__item:hover,
.it-related-list__item:focus-visible {
	color: var(--color-accent-dark);
}

.it-related-list__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background-color: var(--color-bg-alt);
	border: 1.5px solid rgba(85, 201, 154, 0.35);
}

.it-related-list__icon img {
	width: 18px;
	height: 18px;
	object-fit: contain;
}

.it-related-list__label {
	flex: 1;
	min-width: 0;
}

.it-related-list__arrow {
	flex-shrink: 0;
	color: var(--color-accent);
	transition: transform var(--transition-base);
}

.it-related-list__item:hover .it-related-list__arrow,
.it-related-list__item:focus-visible .it-related-list__arrow {
	transform: translate(2px, -2px);
}


/* ============================================================================
   10. Internal Audit — framework sections + "How We Add Value" card list
   ============================================================================ */



.ia-framework-item:last-child {
	margin-bottom: 0;
}

.ia-framework-item .it-service-card {
	margin-top: var(--space-1);
}

.ia-addvalue-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.ia-addvalue-card {
	background-color: var(--color-bg-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-6);
	transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.ia-addvalue-card:hover,
.ia-addvalue-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--color-accent);
}

.ia-addvalue-card__icon {
	margin-bottom: var(--space-3);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(85, 201, 154, 0.06);
    transition: transform 0.30s ease, background-color 0.30s ease;
}

.ia-addvalue-card:hover .ia-addvalue-card__icon,
.ia-addvalue-card:focus-within .ia-addvalue-card__icon {
	box-shadow: 0 0 0 6px rgba(85, 201, 154, 0.20);
}

.ia-addvalue-card__icon img {
	width: auto;
	height: auto;
	object-fit: contain;
}

.ia-addvalue-card__title {
	color: var(--color-heading);
	font-size: 1.1rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	margin-bottom: var(--space-2);
}

.ia-addvalue-card__desc {
	color: var(--color-text-muted);
	font-size: var(--font-size-base);
	line-height: 1.7;
	margin-bottom: 0;
}


/* ============================================================================
   11. Responsive
   ============================================================================ */

@media screen and (max-width: 1023px) {
	.it-content__grid {
		grid-template-columns: 1fr;
	}

	.it-content__aside {
		position: static;
		max-width: 480px;
	}
}

@media screen and (max-width: 767px) {
	.svc-hero {
		min-height: 240px;
	}

	.svc-hero > .container {
		padding-block: var(--space-10);
	}

	.svc-hero__title {
		font-size: var(--font-size-2xl);
	}

	.it-content {
		padding-block: var(--space-12);
	}

	.it-content__grid {
		gap: var(--space-10);
	}

	.it-content__main {
		gap: var(--space-10);
	}

	.it-block--full {
		margin-top: var(--space-10);
	}

	.it-service-card {
		padding: var(--space-4) var(--space-5);
	}

	.it-why-grid {
		grid-template-columns: 1fr;
	}

	.it-highlight-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.svc-hero__breadcrumb a,
	.it-service-card,
	.it-service-card__icon,
	.it-why-card,
	.it-why-card__icon,
	.it-highlight-card,
	.it-highlight-card__icon,
	.it-related-list__item,
	.it-related-list__arrow,
	.it-featured-image__img,
	.ia-addvalue-card,
	.ia-addvalue-card__icon {
		transition: none;
	}

	.it-service-card:hover,
	.it-service-card:focus-within,
	.it-why-card:hover,
	.it-why-card:focus-within,
	.it-highlight-card:hover,
	.it-highlight-card:focus-within,
	.ia-addvalue-card:hover,
	.ia-addvalue-card:focus-within {
		transform: none;
	}

	.it-related-list__item:hover .it-related-list__arrow,
	.it-related-list__item:focus-visible .it-related-list__arrow {
		transform: none;
	}

	.it-featured-image:hover .it-featured-image__img {
		transform: none;
	}
}