/**
 * Styles for the custom Elementor widgets in inc/widgets/.
 *
 * Each widget exposes its colours through Elementor controls where it makes
 * sense, but the defaults all resolve to the tokens in theme.css so a site
 * built with zero styling decisions still looks like one brand.
 */

/* ==========================================================================
   Shared section header
   ========================================================================== */

.freys-sec-head {
	display: grid;
	gap: var(--freys-space-3);
	max-width: 720px;
	margin-bottom: var(--freys-space-7);
}

.freys-sec-head--center {
	justify-items: center;
	text-align: center;
	margin-inline: auto;
}

.freys-sec-head__title { margin: 0; }

.freys-sec-head__lead {
	margin: 0;
	font-size: var(--freys-t-lg);
	color: var(--freys-text-muted);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.freys-hero {
	position: relative;
	overflow: hidden;
	background: var(--freys-ink);
	color: rgba(255, 255, 255, 0.84);
	isolation: isolate;
}

.freys-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.freys-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Two-stop scrim: a hard left wash so headline text always clears WCAG AA
   over a photograph, plus a warm bottom edge that ties into the ember accent. */
.freys-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(10, 24, 38, 0.94) 0%, rgba(10, 24, 38, 0.82) 42%, rgba(10, 24, 38, 0.42) 78%, rgba(10, 24, 38, 0.3) 100%),
		radial-gradient(120% 80% at 8% 100%, rgba(255, 107, 44, 0.22) 0%, transparent 60%);
}

.freys-hero__inner {
	position: relative;
	display: grid;
	gap: var(--freys-space-7);
	padding-block: clamp(4rem, 9vw, 8rem);
	align-items: center;
}

@media (min-width: 1024px) {
	.freys-hero__inner--split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--freys-space-8); }
}

.freys-hero__body { max-width: 660px; display: grid; gap: var(--freys-space-5); }

.freys .freys-hero__title {
	margin: 0;
	color: var(--freys-white);
}

/* Highlighted run of words inside the headline. */
.freys-hero__title mark {
	background: none;
	color: var(--freys-ember);
}

.freys-hero__lead {
	margin: 0;
	max-width: 56ch;
	font-size: clamp(1.0625rem, 0.6vw + 1rem, 1.3125rem);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.8);
}

.freys-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--freys-space-3);
	margin-top: var(--freys-space-2);
}

.freys-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--freys-space-3) var(--freys-space-6);
	margin: var(--freys-space-4) 0 0;
	padding: var(--freys-space-5) 0 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	list-style: none;
}

.freys-hero__trust li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--freys-t-sm);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
}

.freys-hero__trust .freys-icon { color: var(--freys-ember); font-size: 1.1rem; }

/* Glass card that sits beside the headline — good spot for a quick-quote form
   or the emergency number. */
.freys-hero__card {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--freys-radius-lg);
	background: rgba(255, 255, 255, 0.07);
	backdrop-filter: blur(16px) saturate(140%);
	box-shadow: var(--freys-shadow-lg);
	display: grid;
	gap: var(--freys-space-4);
}

.freys .freys-hero__card-title {
	margin: 0;
	color: var(--freys-white);
	font-size: var(--freys-t-h4);
}

.freys-hero__card-phone {
	display: flex;
	align-items: center;
	gap: var(--freys-space-4);
	padding: var(--freys-space-4);
	border-radius: var(--freys-radius);
	background: rgba(255, 255, 255, 0.08);
	text-decoration: none;
	transition: background-color var(--freys-fast) var(--freys-ease);
}

.freys-hero__card-phone:hover { background: rgba(255, 255, 255, 0.14); }

.freys-hero__card-phone .freys-icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	padding: 11px;
	box-sizing: content-box;
	border-radius: var(--freys-radius-pill);
	background: var(--freys-ember);
	color: var(--freys-white);
	font-size: 1.4rem;
}

.freys-hero__card-phone span { display: grid; line-height: 1.2; }
.freys-hero__card-phone small {
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
.freys-hero__card-phone strong {
	font-family: var(--freys-font-heading);
	font-size: 1.375rem;
	color: var(--freys-white);
}

/* ==========================================================================
   Service grid
   ========================================================================== */

.freys-services {
	display: grid;
	gap: var(--freys-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.freys-service {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--freys-space-3);
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border: 1px solid var(--freys-border);
	border-radius: var(--freys-radius-lg);
	background: var(--freys-white);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition:
		transform var(--freys-base) var(--freys-ease),
		box-shadow var(--freys-base) var(--freys-ease),
		border-color var(--freys-base) var(--freys-ease);
}

/* Accent rule that wipes in on hover. */
.freys-service::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--freys-blue), var(--freys-ember));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--freys-base) var(--freys-ease);
}

.freys-service:hover {
	transform: translateY(-5px);
	border-color: transparent;
	box-shadow: var(--freys-shadow-lg);
}

.freys-service:hover::after { transform: scaleX(1); }

.freys-service__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: var(--freys-space-2);
	border-radius: 16px;
	background: var(--freys-blue-tint);
	color: var(--freys-blue-deep);
	font-size: 1.6rem;
	transition: background-color var(--freys-base) var(--freys-ease), color var(--freys-base) var(--freys-ease);
}

.freys-service:hover .freys-service__icon {
	background: var(--freys-blue);
	color: var(--freys-white);
}

.freys-service--heat .freys-service__icon { background: var(--freys-ember-tint); color: var(--freys-ember-deep); }
.freys-service--heat:hover .freys-service__icon { background: var(--freys-ember); color: var(--freys-white); }

.freys-service__title {
	margin: 0;
	font-size: var(--freys-t-h5);
}

.freys-service__text {
	margin: 0;
	font-size: var(--freys-t-sm);
	color: var(--freys-text-muted);
}

.freys-service__list {
	margin: var(--freys-space-2) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--freys-space-2);
	font-size: var(--freys-t-sm);
	color: var(--freys-slate);
}

.freys-service__list li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: var(--freys-space-2);
	align-items: start;
}

.freys-service__list .freys-icon { margin-top: 0.3em; color: var(--freys-blue); }

.freys-service__more {
	margin-top: auto;
	padding-top: var(--freys-space-4);
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--freys-font-heading);
	font-size: var(--freys-t-sm);
	font-weight: 600;
	color: var(--freys-blue-deep);
}

.freys-service__more .freys-icon { transition: transform var(--freys-fast) var(--freys-ease); }
.freys-service:hover .freys-service__more .freys-icon { transform: translateX(4px); }

/* ==========================================================================
   Stats
   ========================================================================== */

.freys-stats {
	display: grid;
	gap: var(--freys-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.freys-stat {
	display: grid;
	gap: var(--freys-space-1);
	padding: var(--freys-space-5);
	border-radius: var(--freys-radius);
	text-align: center;
}

.freys-stats--boxed .freys-stat {
	background: var(--freys-white);
	border: 1px solid var(--freys-border);
	box-shadow: var(--freys-shadow-sm);
}

.freys-stat__value {
	font-family: var(--freys-font-heading);
	font-size: clamp(2.25rem, 3.5vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--freys-blue);
	font-variant-numeric: tabular-nums;
}

.freys-stat--ember .freys-stat__value { color: var(--freys-ember); }

.freys-stat__label {
	font-size: var(--freys-t-sm);
	font-weight: 500;
	color: var(--freys-text-muted);
}

.freys-section--ink .freys-stat__label { color: rgba(255, 255, 255, 0.66); }
.freys-section--ink .freys-stat__value { color: var(--freys-white); }

/* ==========================================================================
   Process steps
   ========================================================================== */

.freys-steps {
	display: grid;
	gap: var(--freys-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	counter-reset: freys-step;
}

.freys-step {
	position: relative;
	display: grid;
	gap: var(--freys-space-3);
	counter-increment: freys-step;
}

/* Connector line between steps on wide screens. */
@media (min-width: 900px) {
	.freys-steps--connected .freys-step::before {
		content: "";
		position: absolute;
		top: 26px;
		left: calc(52px + var(--freys-space-4));
		right: calc(-1 * var(--freys-space-6));
		height: 2px;
		background: repeating-linear-gradient(90deg, var(--freys-border) 0 8px, transparent 8px 16px);
	}

	.freys-steps--connected .freys-step:last-child::before { display: none; }
}

.freys-step__num {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: var(--freys-radius-pill);
	background: var(--freys-ink);
	color: var(--freys-white);
	font-family: var(--freys-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
}

.freys-step__num::before { content: counter(freys-step, decimal-leading-zero); }

.freys-step__title { margin: 0; font-size: var(--freys-t-h5); }
.freys-step__text { margin: 0; font-size: var(--freys-t-sm); color: var(--freys-text-muted); }

/* ==========================================================================
   Testimonials
   ========================================================================== */

.freys-quotes {
	display: grid;
	gap: var(--freys-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.freys-quote {
	display: flex;
	flex-direction: column;
	gap: var(--freys-space-4);
	padding: clamp(1.5rem, 2.5vw, 2rem);
	border: 1px solid var(--freys-border);
	border-radius: var(--freys-radius-lg);
	background: var(--freys-white);
	box-shadow: var(--freys-shadow-sm);
}

.freys-quote__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--freys-ember);
	font-size: 1.05rem;
}

.freys-quote__text {
	margin: 0;
	flex: 1;
	font-size: var(--freys-t-lg);
	line-height: 1.6;
	color: var(--freys-slate);
}

.freys-quote__text::before { content: "\201C"; }
.freys-quote__text::after { content: "\201D"; }

.freys-quote__author {
	display: flex;
	align-items: center;
	gap: var(--freys-space-3);
	padding-top: var(--freys-space-4);
	border-top: 1px solid var(--freys-border);
}

.freys-quote__avatar {
	width: 44px;
	height: 44px;
	border-radius: var(--freys-radius-pill);
	object-fit: cover;
	flex: 0 0 auto;
}

.freys-quote__avatar--initial {
	display: grid;
	place-items: center;
	background: var(--freys-blue-tint);
	color: var(--freys-blue-deep);
	font-family: var(--freys-font-heading);
	font-weight: 700;
}

.freys-quote__name {
	display: grid;
	line-height: 1.25;
}

.freys-quote__name strong { font-family: var(--freys-font-heading); font-size: var(--freys-t-base); }
.freys-quote__name small { font-size: var(--freys-t-xs); color: var(--freys-text-muted); }

/* ==========================================================================
   Service areas
   ========================================================================== */

.freys-areas {
	display: grid;
	gap: var(--freys-space-7);
	align-items: center;
}

@media (min-width: 900px) {
	.freys-areas--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--freys-space-8); }
}

.freys-areas__list {
	display: grid;
	gap: var(--freys-space-2) var(--freys-space-4);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.freys-areas__list li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: var(--freys-space-2);
	align-items: center;
	padding: var(--freys-space-2) 0;
	font-size: var(--freys-t-sm);
	font-weight: 500;
	border-bottom: 1px solid var(--freys-border);
}

.freys-areas__list .freys-icon { color: var(--freys-blue); }

.freys-areas__map {
	overflow: hidden;
	border-radius: var(--freys-radius-lg);
	border: 1px solid var(--freys-border);
	box-shadow: var(--freys-shadow);
	background: var(--freys-mist);
	aspect-ratio: 4 / 3;
}

.freys-areas__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.freys-faq {
	display: grid;
	gap: var(--freys-space-3);
	max-width: 820px;
}

.freys-faq--center { margin-inline: auto; }

.freys-faq__item {
	border: 1px solid var(--freys-border);
	border-radius: var(--freys-radius);
	background: var(--freys-white);
	overflow: hidden;
	transition: border-color var(--freys-fast) var(--freys-ease), box-shadow var(--freys-fast) var(--freys-ease);
}

.freys-faq__item[open] {
	border-color: var(--freys-blue);
	box-shadow: var(--freys-shadow-sm);
}

.freys-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--freys-space-4);
	padding: var(--freys-space-5);
	cursor: pointer;
	list-style: none;
	font-family: var(--freys-font-heading);
	font-size: var(--freys-t-h6);
	font-weight: 600;
	color: var(--freys-ink);
}

.freys-faq__q::-webkit-details-marker { display: none; }

.freys-faq__q::after {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-right: 2px solid var(--freys-blue);
	border-bottom: 2px solid var(--freys-blue);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--freys-base) var(--freys-ease);
}

.freys-faq__item[open] .freys-faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }

.freys-faq__a {
	padding: 0 var(--freys-space-5) var(--freys-space-5);
	color: var(--freys-text-muted);
}

.freys-faq__a > :last-child { margin-bottom: 0; }

/* ==========================================================================
   Maintenance plan cards
   ========================================================================== */

.freys-plans {
	display: grid;
	gap: var(--freys-space-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	align-items: stretch;
}

.freys-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--freys-space-4);
	padding: clamp(1.75rem, 3vw, 2.25rem);
	border: 1px solid var(--freys-border);
	border-radius: var(--freys-radius-lg);
	background: var(--freys-white);
	transition: transform var(--freys-base) var(--freys-ease), box-shadow var(--freys-base) var(--freys-ease);
}

.freys-plan:hover { transform: translateY(-4px); box-shadow: var(--freys-shadow); }

.freys-plan--featured {
	border-color: transparent;
	background: var(--freys-ink);
	color: rgba(255, 255, 255, 0.8);
	box-shadow: var(--freys-shadow-lg);
}

@media (min-width: 900px) {
	.freys-plan--featured { transform: scale(1.03); }
	.freys-plan--featured:hover { transform: scale(1.03) translateY(-4px); }
}

.freys-plan--featured .freys-plan__name,
.freys-plan--featured .freys-plan__price { color: var(--freys-white); }

.freys-plan__flag {
	position: absolute;
	top: var(--freys-space-5);
	right: var(--freys-space-5);
	padding: 0.3rem 0.75rem;
	border-radius: var(--freys-radius-pill);
	background: var(--freys-ember);
	color: var(--freys-white);
	font-family: var(--freys-font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.freys-plan__name { margin: 0; font-size: var(--freys-t-h5); }

.freys-plan__price {
	display: flex;
	align-items: baseline;
	gap: 0.25rem;
	font-family: var(--freys-font-heading);
	font-size: clamp(2.25rem, 3vw, 2.875rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--freys-ink);
}

.freys-plan__period {
	font-size: var(--freys-t-sm);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--freys-text-muted);
}

.freys-plan--featured .freys-plan__period { color: rgba(255, 255, 255, 0.6); }

.freys-plan__desc { margin: 0; font-size: var(--freys-t-sm); color: var(--freys-text-muted); }
.freys-plan--featured .freys-plan__desc { color: rgba(255, 255, 255, 0.7); }

.freys-plan__features {
	margin: 0;
	padding: var(--freys-space-4) 0 0;
	border-top: 1px solid var(--freys-border);
	list-style: none;
	display: grid;
	gap: var(--freys-space-3);
	font-size: var(--freys-t-sm);
	flex: 1;
}

.freys-plan--featured .freys-plan__features { border-top-color: rgba(255, 255, 255, 0.14); }

.freys-plan__features li {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: var(--freys-space-3);
	align-items: start;
}

.freys-plan__features .freys-icon { margin-top: 0.28em; color: var(--freys-blue); }
.freys-plan--featured .freys-plan__features .freys-icon { color: var(--freys-ember); }

.freys-plan__cta { margin-top: var(--freys-space-2); }

/* ==========================================================================
   CTA band
   ========================================================================== */

.freys-cta {
	position: relative;
	overflow: hidden;
	padding: clamp(2.5rem, 5vw, 4rem);
	border-radius: var(--freys-radius-lg);
	background:
		radial-gradient(110% 130% at 100% 0%, rgba(255, 107, 44, 0.4) 0%, transparent 55%),
		linear-gradient(120deg, var(--freys-blue-deep) 0%, var(--freys-ink) 62%);
	color: rgba(255, 255, 255, 0.84);
	box-shadow: var(--freys-shadow-lg);
}

.freys-cta--flat { border-radius: 0; box-shadow: none; }

.freys-cta__inner {
	position: relative;
	display: grid;
	gap: var(--freys-space-5);
	align-items: center;
}

@media (min-width: 900px) {
	.freys-cta__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--freys-space-7); }
}

.freys .freys-cta__title { margin: 0 0 var(--freys-space-2); color: var(--freys-white); }
.freys-cta__text { margin: 0; max-width: 60ch; color: rgba(255, 255, 255, 0.78); }

.freys-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--freys-space-3);
}

/* ==========================================================================
   Contact card
   ========================================================================== */

.freys-contact {
	display: grid;
	gap: var(--freys-space-4);
	padding: clamp(1.5rem, 3vw, 2.25rem);
	border: 1px solid var(--freys-border);
	border-radius: var(--freys-radius-lg);
	background: var(--freys-white);
	box-shadow: var(--freys-shadow-sm);
}

.freys-contact--ink {
	background: var(--freys-ink);
	border-color: transparent;
	color: rgba(255, 255, 255, 0.78);
}

.freys-contact__row {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: var(--freys-space-4);
	align-items: center;
	padding-bottom: var(--freys-space-4);
	border-bottom: 1px solid var(--freys-border);
	text-decoration: none;
	color: inherit;
}

.freys-contact--ink .freys-contact__row { border-bottom-color: rgba(255, 255, 255, 0.12); }
.freys-contact__row:last-child { padding-bottom: 0; border-bottom: 0; }

.freys-contact__row .freys-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--freys-radius-pill);
	background: var(--freys-blue-tint);
	color: var(--freys-blue-deep);
	font-size: 1.15rem;
	padding: 11px;
	box-sizing: border-box;
}

.freys-contact--ink .freys-contact__row .freys-icon {
	background: rgba(255, 255, 255, 0.08);
	color: var(--freys-ember);
}

.freys-contact__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--freys-text-muted);
}

.freys-contact--ink .freys-contact__label { color: rgba(255, 255, 255, 0.5); }

.freys-contact__value {
	display: block;
	font-family: var(--freys-font-heading);
	font-size: var(--freys-t-lg);
	font-weight: 600;
	color: var(--freys-ink);
}

.freys-contact--ink .freys-contact__value { color: var(--freys-white); }

a.freys-contact__row:hover .freys-contact__value { color: var(--freys-blue-deep); }
.freys-contact--ink a.freys-contact__row:hover .freys-contact__value { color: var(--freys-ember); }

/* ==========================================================================
   Editor affordances
   ========================================================================== */

/* Elementor renders widgets with no content as an empty box, which is easy to
   lose in the editor. Give the placeholders enough presence to be clickable. */
.elementor-editor-active .freys-services:empty,
.elementor-editor-active .freys-plans:empty,
.elementor-editor-active .freys-quotes:empty,
.elementor-editor-active .freys-faq:empty {
	min-height: 120px;
	border: 2px dashed var(--freys-border);
	border-radius: var(--freys-radius);
}

/* ==========================================================================
   Elementor icon interop
   ==========================================================================
   Elementor renders Font Awesome picks as inline <svg class="e-font-icon-svg">
   carrying no fill and no intrinsic size. Left alone it paints black and grows
   to fill whatever box it lands in — a 56px black glyph in a 56px card slot.
   Constrain the ones that appear inside this theme's own blocks, and leave
   Elementor's own widgets untouched. */

.freys-hero__trust .e-font-icon-svg,
.freys-service__icon .e-font-icon-svg,
.freys-service__list .e-font-icon-svg,
.freys-plan__features .e-font-icon-svg,
.freys-areas__list .e-font-icon-svg,
.freys-step__num .e-font-icon-svg,
.freys-btn .e-font-icon-svg {
	fill: currentColor;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
}

/* Same containers, for sites serving Font Awesome as a webfont <i> instead. */
.freys-hero__trust i,
.freys-service__icon i,
.freys-service__list i,
.freys-plan__features i,
.freys-areas__list i,
.freys-btn i {
	font-size: 1em;
	line-height: 1;
}

.freys-hero__trust .e-font-icon-svg { color: var(--freys-ember); font-size: 1.1rem; }

/* Eyebrow pills sit inside grid containers, where the default justify-items
   stretches them to the full column width. Pin them to their content. */
.freys-eyebrow { justify-self: start; }
.freys-sec-head--center .freys-eyebrow { justify-self: center; }