/*
 * Valor Impact Group, brand layer
 * ================================
 *
 * Restyles the purchased template to match the brand marks. No copy changes,
 * no structural changes.
 *
 * The gold values here were sampled from the logo artwork itself rather than
 * invented, so the interface and the shield finally agree with each other.
 *
 * Specificity note: rules are scoped with `body.valor-brand` so they sit just
 * above Elementor's kit defaults (`.elementor-kit-197 ...`) but below its
 * per-widget rules. Anything a designer set on an individual widget still wins.
 */

/* ------------------------------------------------------------------ *
 * 1. Tokens
 * ------------------------------------------------------------------ */

body.valor-brand {
	/* Sampled from the logo lockup and the shield artwork. */
	--v-gold: #d4a017;
	--v-gold-lt: #efc75e;
	--v-gold-dk: #a87a0c;
	--v-gold-soft: rgba(212, 160, 23, 0.12);

	/* Existing kit colours, kept so nothing clashes. */
	--v-ink: #1d0806;
	--v-ink-2: #2a120e;
	--v-crimson: #962b1e;
	--v-crimson-dk: #6e1610;
	--v-cream: #fdf1eb;

	--v-text: #4a4a4a;
	--v-text-soft: #6b6b6b;
	--v-line: rgba(29, 8, 6, 0.1);

	--v-shadow-sm: 0 1px 2px rgba(29, 8, 6, 0.06), 0 2px 8px rgba(29, 8, 6, 0.04);
	--v-shadow-md: 0 4px 12px rgba(29, 8, 6, 0.08), 0 12px 32px rgba(29, 8, 6, 0.07);
	--v-shadow-lg: 0 8px 20px rgba(29, 8, 6, 0.1), 0 24px 56px rgba(29, 8, 6, 0.1);

	--v-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--v-radius: 14px;
}

/* ------------------------------------------------------------------ *
 * 2. Base typography
 *
 * The kit sets body text at 14px, which is small for the amount of
 * reading this site asks for. 16px with a more generous line-height is
 * easier to read and is what the rest of the scale assumes.
 * ------------------------------------------------------------------ */

/*
 * Size and rhythm only. Colour is deliberately NOT set here: several sections
 * put body copy on a dark background and rely on inheriting a light colour
 * from their container. Declaring a colour at this level overrides that
 * inheritance and quietly destroys the contrast on every dark section.
 */
body.valor-brand,
body.valor-brand .elementor-widget-text-editor,
body.valor-brand .elementor-widget-text-editor p {
	font-size: 16px;
	line-height: 1.75;
}

body.valor-brand .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Headings get slightly tighter tracking, which stops Epilogue's wide
   default from looking loose at display sizes. */
body.valor-brand h1,
body.valor-brand h2,
body.valor-brand h3,
body.valor-brand .elementor-heading-title {
	letter-spacing: -0.015em;
}

body.valor-brand h1,
body.valor-brand h1.elementor-heading-title {
	line-height: 1.12;
}

/* Cap measure on body copy sitting in wide containers, so lines do not
   run past a comfortable reading length. */
body.valor-brand .elementor-widget-text-editor > .elementor-widget-container > p {
	max-width: 68ch;
}

/* ------------------------------------------------------------------ *
 * 3. Eyebrow labels
 *
 * The small labels above section headings ("WHY CLIENTS CHOOSE US",
 * "OUR SERVICES") are heading widgets rendered as <span>. In the template
 * they were dull maroon, which on the dark sections failed contrast
 * outright. Gold fixes both the contrast and the brand.
 * ------------------------------------------------------------------ */

body.valor-brand .elementor-widget-heading span.elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	color: var(--v-gold);
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.valor-brand .elementor-widget-heading span.elementor-heading-title::before {
	content: "";
	width: 2.2em;
	height: 2px;
	flex: none;
	background: linear-gradient(90deg, var(--v-gold), rgba(212, 160, 23, 0.15));
}

/* The numbered step markers ("01", "02") are also span headings but read
   as figures, not labels, so they keep their size and lose the rule. */
body.valor-brand .elementor-widget-heading span.elementor-heading-title:not([class*=" "]) {
	letter-spacing: 0.16em;
}

/* ------------------------------------------------------------------ *
 * 4. Buttons
 *
 * Gold is the brand's action colour. Kit default was maroon on maroon
 * sections, which gave the primary call to action almost no presence.
 * ------------------------------------------------------------------ */

/*
 * Two visually different buttons share identical markup here: the solid calls
 * to action, and the "Learn More" text links. The only thing separating them
 * is the background their per-widget rule resolves to, one solid and one fully
 * transparent. No class distinguishes them, so CSS alone cannot tell them
 * apart.
 *
 * Base colour is therefore handled with the custom-property technique, which
 * respects whatever each button already resolves: solid buttons take the gold,
 * transparent ones stay transparent and are left alone.
 *
 * The richer treatment (gradient, shadow, lift) needs to apply only to the
 * solid ones, so a small script tags each button with .v-btn-solid or
 * .v-btn-ghost by reading its computed background. Without that script the
 * buttons are still correctly coloured, just flatter.
 */
body.valor-brand .elementor-button,
body.valor-brand button,
body.valor-brand input[type="submit"] {
	--e-global-color-secondary: var(--v-gold);
	font-weight: 600;
	letter-spacing: 0.04em;
	transition: transform 0.22s var(--v-ease), box-shadow 0.22s var(--v-ease),
		background-color 0.22s var(--v-ease), color 0.22s var(--v-ease);
}

/* Solid calls to action. */
body.valor-brand .elementor-button.v-btn-solid,
body.valor-brand button.v-btn-solid,
body.valor-brand input[type="submit"].v-btn-solid {
	background-image: linear-gradient(180deg, var(--v-gold-lt) -30%, var(--v-gold) 55%, var(--v-gold-dk) 160%);
	color: var(--v-ink);
	border: 0;
	box-shadow: 0 1px 2px rgba(29, 8, 6, 0.16), 0 6px 18px rgba(168, 122, 12, 0.28);
}

body.valor-brand .elementor-button.v-btn-solid:hover,
body.valor-brand .elementor-button.v-btn-solid:focus-visible,
body.valor-brand button.v-btn-solid:hover,
body.valor-brand input[type="submit"].v-btn-solid:hover {
	background-image: linear-gradient(180deg, #f7d780 -20%, var(--v-gold-lt) 60%, var(--v-gold) 150%);
	color: var(--v-ink);
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(29, 8, 6, 0.18), 0 12px 28px rgba(168, 122, 12, 0.38);
}

body.valor-brand .elementor-button.v-btn-solid:active {
	transform: translateY(0);
}

/*
 * Text-style links. These keep no background at all; they get weight, a gold
 * hover, and a rule that draws itself in under the label.
 */
body.valor-brand .elementor-button.v-btn-ghost {
	background-image: none;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
	position: relative;
}

body.valor-brand .elementor-button.v-btn-ghost .elementor-button-text {
	position: relative;
}

body.valor-brand .elementor-button.v-btn-ghost .elementor-button-text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.32em;
	height: 2px;
	background: var(--v-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.26s var(--v-ease);
}

body.valor-brand .elementor-button.v-btn-ghost:hover,
body.valor-brand .elementor-button.v-btn-ghost:focus-visible {
	background-image: none;
	color: var(--v-gold-dk);
	transform: none;
	box-shadow: none;
}

body.valor-brand .elementor-button.v-btn-ghost:hover .elementor-button-text::after,
body.valor-brand .elementor-button.v-btn-ghost:focus-visible .elementor-button-text::after {
	transform: scaleX(1);
}

/* The arrow that sits inside several buttons should travel on hover. */
body.valor-brand .elementor-button .elementor-button-icon {
	transition: transform 0.22s var(--v-ease);
}

body.valor-brand .elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}

/* ------------------------------------------------------------------ *
 * 5. Cards (icon boxes)
 *
 * The six service cards were flat white rectangles. Giving them a border,
 * a resting shadow and a hover lift makes the grid read as a set of
 * objects rather than as blocks of text.
 * ------------------------------------------------------------------ */

/*
 * The visible white card is the Elementor container that wraps the icon-box
 * widget, not the widget itself. Lifting the widget would slide the contents
 * around inside a card that stayed put, so the hover belongs on the parent.
 *
 * `:has(> ...)` restricts this to the container that directly holds a card.
 * Without it, every ancestor section containing an icon box would match and
 * the whole page would lift. Browsers without :has() simply get no lift, which
 * is a fine place to land.
 */
body.valor-brand .e-con.e-child:has(> .elementor-widget-icon-box) {
	transition: transform 0.3s var(--v-ease), box-shadow 0.3s var(--v-ease);
}

body.valor-brand .e-con.e-child:has(> .elementor-widget-icon-box):hover {
	transform: translateY(-6px);
	box-shadow: var(--v-shadow-lg);
}

body.valor-brand .elementor-widget-icon-box .elementor-icon-box-wrapper {
	position: relative;
}

body.valor-brand .elementor-icon-box-title,
body.valor-brand .elementor-icon-box-title a {
	letter-spacing: -0.01em;
	transition: color 0.22s var(--v-ease);
}

body.valor-brand .elementor-widget-icon-box:hover .elementor-icon-box-title,
body.valor-brand .elementor-widget-icon-box:hover .elementor-icon-box-title a {
	color: var(--v-crimson);
}

/* Line-height only, for the same reason as the base rule above: some icon
   boxes sit on dark panels and inherit a light colour. */
body.valor-brand .elementor-icon-box-description {
	line-height: 1.7;
}

/* The rounded icon chip at the top of each card. */
body.valor-brand .elementor-widget-icon-box .elementor-icon,
body.valor-brand .elementor-widget-icon .elementor-icon {
	transition: transform 0.28s var(--v-ease), background-color 0.28s var(--v-ease),
		color 0.28s var(--v-ease), box-shadow 0.28s var(--v-ease);
}

body.valor-brand .elementor-widget-icon-box:hover .elementor-icon,
body.valor-brand .elementor-widget-icon:hover .elementor-icon {
	transform: translateY(-2px) scale(1.06);
	box-shadow: 0 8px 20px rgba(168, 122, 12, 0.26);
}

/*
 * Stacked icons pick up the gold chip treatment.
 *
 * These are styled by per-widget Elementor rules whose selectors are far more
 * specific than anything sane written here, so trying to out-specify them
 * would mean !important on every declaration. Instead, note that those rules
 * do not hardcode colours, they resolve CSS custom properties:
 *
 *   background-color: var( --e-global-color-accent );
 *   color:            var( --e-global-color-secondary );
 *
 * A custom property resolves against the element the declaration lands on. So
 * redefining the property on that same element changes the outcome without
 * touching specificity at all, and without !important anywhere.
 *
 * This is scoped tightly on purpose. `--e-global-color-secondary` is the
 * template maroon and is also used for whole section backgrounds, so it must
 * never be redefined globally.
 */
body.valor-brand .elementor-view-stacked .elementor-icon {
	--e-global-color-accent: var(--v-gold-soft);
	--e-global-color-secondary: var(--v-gold-dk);
}

body.valor-brand .elementor-view-framed .elementor-icon {
	--e-global-color-secondary: var(--v-gold-dk);
	--e-global-color-accent: var(--v-gold-soft);
}

/* ------------------------------------------------------------------ *
 * 6. Icon lists
 *
 * The tick marks beside the benefit lists were maroon and easy to miss.
 * ------------------------------------------------------------------ */

/* Same custom-property technique as the icon chips above: the per-widget rule
   sets `color: var( --e-global-color-secondary )` on these, so redefining that
   property on the element is what changes them. */
body.valor-brand .elementor-icon-list-icon,
body.valor-brand .elementor-icon-list-icon svg,
body.valor-brand .elementor-icon-list-icon i {
	--e-global-color-secondary: var(--v-gold-dk);
	transition: transform 0.2s var(--v-ease);
}

body.valor-brand .elementor-icon-list-item:hover .elementor-icon-list-icon svg,
body.valor-brand .elementor-icon-list-item:hover .elementor-icon-list-icon i {
	transform: scale(1.15);
}

body.valor-brand .elementor-icon-list-text {
	line-height: 1.55;
}

/* On dark sections the ticks need the brighter gold to stay visible. */
body.valor-brand .elementor-element[class*="e-con"] .elementor-icon-list-icon svg {
	filter: none;
}

/* ------------------------------------------------------------------ *
 * 7. Counters and progress bars
 * ------------------------------------------------------------------ */

body.valor-brand .elementor-counter .elementor-counter-number-wrapper {
	--e-global-color-secondary: var(--v-gold);
	font-weight: 700;
	letter-spacing: -0.02em;
}

body.valor-brand .elementor-counter .elementor-counter-title {
	color: inherit;
	opacity: 0.85;
	letter-spacing: 0.04em;
}

body.valor-brand .ekit-progressbar-container .ekit-progressbar,
body.valor-brand .elementskit-progressbar .progressbar-wrapper .progress-bar {
	background: linear-gradient(90deg, var(--v-gold-dk), var(--v-gold), var(--v-gold-lt));
	border-radius: 999px;
}

body.valor-brand .elementskit-progressbar .progressbar-wrapper {
	background: rgba(29, 8, 6, 0.08);
	border-radius: 999px;
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * 8. Accordion (the FAQ page)
 * ------------------------------------------------------------------ */

body.valor-brand .elementskit-card {
	border: 1px solid var(--v-line);
	border-radius: var(--v-radius);
	margin-bottom: 12px;
	overflow: hidden;
	transition: border-color 0.22s var(--v-ease), box-shadow 0.22s var(--v-ease);
}

body.valor-brand .elementskit-card:hover {
	border-color: rgba(212, 160, 23, 0.5);
	box-shadow: var(--v-shadow-sm);
}

body.valor-brand .elementskit-card .elementskit-card-header {
	transition: background-color 0.22s var(--v-ease), color 0.22s var(--v-ease);
}

body.valor-brand .elementskit-card .elementskit-card-header a {
	font-weight: 600;
}

body.valor-brand .elementskit-card .elementskit-card-header:hover {
	background-color: var(--v-gold-soft);
}

body.valor-brand .elementskit-card .ekit_accordion_normal_icon,
body.valor-brand .elementskit-card .ekit_accordion_active_icon {
	color: var(--v-gold-dk);
}

/* ------------------------------------------------------------------ *
 * 9. Navigation
 *
 * The active item was dark red on a near-black header, which was close to
 * unreadable. Gold, plus a rule that grows under the hovered item.
 * ------------------------------------------------------------------ */

body.valor-brand .ekit-menu-nav-link {
	position: relative;
	transition: color 0.22s var(--v-ease);
}

body.valor-brand .ekit-menu-nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.35em;
	height: 2px;
	background: var(--v-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.26s var(--v-ease);
}

body.valor-brand .ekit-menu-nav-link:hover,
body.valor-brand .elementskit-navbar-nav > li > a:hover,
body.valor-brand .elementskit-navbar-nav > li.current-menu-item > a,
body.valor-brand .elementskit-navbar-nav > li.current_page_item > a {
	color: var(--v-gold);
}

body.valor-brand .ekit-menu-nav-link:hover::after,
body.valor-brand .elementskit-navbar-nav > li.current-menu-item > a::after,
body.valor-brand .elementskit-navbar-nav > li.current_page_item > a::after {
	transform: scaleX(1);
}

/* The topmost contact strip. */
body.valor-brand .elementor-icon-list-item a:hover .elementor-icon-list-text {
	color: var(--v-gold-dk);
}

/* ------------------------------------------------------------------ *
 * 10. Links and dividers
 * ------------------------------------------------------------------ */

body.valor-brand .elementor-widget-text-editor a {
	color: var(--v-crimson);
	text-decoration-color: rgba(150, 43, 30, 0.35);
	text-underline-offset: 0.18em;
	transition: color 0.2s var(--v-ease), text-decoration-color 0.2s var(--v-ease);
}

body.valor-brand .elementor-widget-text-editor a:hover {
	color: var(--v-gold-dk);
	text-decoration-color: var(--v-gold);
}

body.valor-brand .elementor-widget-divider .elementor-divider-separator {
	border-top-color: rgba(212, 160, 23, 0.45);
}

/* ------------------------------------------------------------------ *
 * 11. Forms
 * ------------------------------------------------------------------ */

body.valor-brand .mf-input,
body.valor-brand input[type="text"],
body.valor-brand input[type="email"],
body.valor-brand input[type="tel"],
body.valor-brand textarea,
body.valor-brand select {
	border-radius: 10px;
	border: 1px solid var(--v-line);
	transition: border-color 0.2s var(--v-ease), box-shadow 0.2s var(--v-ease);
}

body.valor-brand .mf-input:focus,
body.valor-brand input[type="text"]:focus,
body.valor-brand input[type="email"]:focus,
body.valor-brand input[type="tel"]:focus,
body.valor-brand textarea:focus,
body.valor-brand select:focus {
	outline: none;
	border-color: var(--v-gold);
	box-shadow: 0 0 0 3px var(--v-gold-soft);
}

/* ------------------------------------------------------------------ *
 * 12. Focus visibility
 *
 * The template shipped with no visible keyboard focus anywhere, which is
 * an accessibility failure as much as a design one.
 * ------------------------------------------------------------------ */

body.valor-brand a:focus-visible,
body.valor-brand button:focus-visible,
body.valor-brand .elementor-button:focus-visible,
body.valor-brand [tabindex]:focus-visible {
	outline: 3px solid var(--v-gold);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * 13. Scroll reveal
 *
 * Progressive enhancement only. The hidden state is applied by script, so
 * if JavaScript never runs the content is simply visible, never trapped.
 * ------------------------------------------------------------------ */

body.valor-brand .v-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--v-ease), transform 0.7s var(--v-ease);
	will-change: opacity, transform;
}

body.valor-brand .v-reveal.v-revealed {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------------ *
 * 14. Respect the reader
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	body.valor-brand *,
	body.valor-brand *::before,
	body.valor-brand *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	body.valor-brand .v-reveal {
		opacity: 1;
		transform: none;
	}
}

@media print {
	body.valor-brand .v-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ------------------------------------------------------------------ *
 * 15. Homepage hero copy panel
 *
 * The hero lays its copy on a translucent white card. At the 65% white it
 * shipped with, the shield in the background image reads straight through the
 * card and competes with the text.
 *
 * Firming it up and giving it a real frosted treatment keeps the layered look
 * the design was going for while making the copy unambiguous.
 *
 * This is the one element-specific rule in the file. The colour is hardcoded
 * in the per-widget CSS rather than coming from a custom property, so the
 * variable technique used elsewhere does not apply and this needs the override
 * to be explicit.
 * ------------------------------------------------------------------ */

body.valor-brand .elementor-element-205702fc {
	background-color: rgba(255, 255, 255, 0.9) !important;
	-webkit-backdrop-filter: blur(14px) saturate(115%);
	backdrop-filter: blur(14px) saturate(115%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 18px 50px rgba(29, 8, 6, 0.28);
}

/* Where backdrop-filter is unavailable, lean on opacity alone so the copy is
   never left sitting on a busy image. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	body.valor-brand .elementor-element-205702fc {
		background-color: rgba(255, 255, 255, 0.95) !important;
	}
}

/* ------------------------------------------------------------------ *
 * 16. Small screens
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	body.valor-brand .elementor-widget-heading span.elementor-heading-title {
		font-size: 0.76rem;
		letter-spacing: 0.13em;
	}

	body.valor-brand .elementor-widget-icon-box:hover {
		transform: none;
	}

	body.valor-brand,
	body.valor-brand .elementor-widget-text-editor,
	body.valor-brand .elementor-widget-text-editor p {
		font-size: 16px;
		line-height: 1.7;
	}
}