/* Eagle Cove brand polish
 * Navy #0D1741 | Blue #1E6FE0 | Orange #F05A28
 *
 * Elementor's Button widget exposes background as a plain colour control, not a
 * background group, so a gradient cannot be set from the widget. These classes
 * are applied to elements in the Elementor data and styled here instead.
 */

/* ---------------------------------------------------------------- buttons --
 * Subtle vertical deepening on the orange. background-image layers over the
 * widget's own background-color, so no !important is needed on the normal
 * state; the hover gradient has to be declared too or the image would sit on
 * top of the navy hover colour and hide it.
 */
.ec-btn-orange .elementor-button,
.ec-btn-orange.elementor-button {
	/* starts AT the brand orange and only darkens downward, so the white label
	   is never on anything lighter than the flat colour was (3.39:1 -> 4.29:1) */
	background-image: linear-gradient(180deg, #F05A28 0%, #D9481C 100%);
	transition: background-image .25s ease, box-shadow .25s ease, transform .2s ease;
}
.ec-btn-orange .elementor-button:hover,
.ec-btn-orange .elementor-button:focus,
.ec-btn-orange.elementor-button:hover,
.ec-btn-orange.elementor-button:focus {
	background-image: linear-gradient(180deg, #24357F 0%, #0D1741 100%);
}

/* ------------------------------------------------------------ pillar cards --
 * The four "Strategy / Consulting / Branding / Analytics" columns were flat
 * white with no edge. Give them a card, a lift, and an orange tell on hover.
 */
.ec-pillar {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: 0 10px 30px rgba(13, 23, 65, .08);
	transition: transform .28s ease, box-shadow .28s ease;
}
.ec-pillar::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: #F05A28;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s ease;
}
.ec-pillar:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(13, 23, 65, .16);
}
.ec-pillar:hover::after { transform: scaleX(1); }

/* icon shifts blue -> orange on hover; Elementor writes a per-element colour
   rule, so this needs to outrank it */
.ec-pillar .elementor-icon,
.ec-pillar .elementor-icon svg {
	transition: color .28s ease, fill .28s ease;
}
.ec-pillar:hover .elementor-icon { color: #F05A28 !important; }
.ec-pillar:hover .elementor-icon svg { fill: #F05A28 !important; }

@media (max-width: 767px) {
	.ec-pillar:hover { transform: none; }
}

/* ------------------------------------------------------- step number badge --
 * Was a wide blue "Step 1" pill floating above each How It Works card. Now a
 * small navy disc holding just the numeral, so the card's own icon carries the
 * meaning and the badge only carries the sequence.
 */
.ec-step-num > .elementor-widget-container {
	width: 46px;
	height: 46px;
	padding: 0 !important;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 16px rgba(13, 23, 65, .28);
}
.ec-step-num .elementor-heading-title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	color: #FFFFFF;
}