/* ---------------------------------------------------------------------------
 * Design layer. Handles what Elementor's per-widget controls cannot do cleanly:
 * uniform card image crops, equal-height cards, and mobile rhythm.
 * Source images are a mix of portrait and landscape, so every card image is
 * force-cropped to one ratio -- this is the main thing that makes the grids
 * read as designed rather than assembled.
 * ------------------------------------------------------------------------- */

:root {
	--gr-navy: #0B2545;
	--gr-red: #C8102E;
	--gr-text: #33475B;
	--gr-line: #D9E2EC;
	--gr-bg: #F4F7FA;
}

/* --- Uniform card imagery ------------------------------------------------ */
.gr-card .elementor-image-box-img,
.gr-card .elementor-image-box-img a {
	display: block;
	width: 100% !important;
	margin: 0 !important;
}

.gr-card .elementor-image-box-img img,
.gr-case__img img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: 12px 12px 0 0;
}

.gr-card .elementor-image-box-wrapper { display: flex; flex-direction: column; height: 100%; }
.gr-card .elementor-image-box-content { flex: 1; }

/* Cards in a row should end level with each other */
.gr-grid > .e-con,
.gr-grid > .elementor-widget { display: flex; }
.gr-grid .elementor-widget-image-box,
.gr-grid .elementor-widget-testimonial { width: 100%; }
.gr-card { overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.gr-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(11, 37, 69, .12); }

/* --- Hero ---------------------------------------------------------------- */
.gr-hero { position: relative; }
.gr-hero__inner { position: relative; z-index: 2; }

/* --- Case study cards ---------------------------------------------------- */
.gr-case { overflow: hidden; display: flex; flex-direction: column; }
.gr-case__img img { border-radius: 0; height: 190px; }
.gr-case .elementor-widget-image { line-height: 0; }

/* --- Story image --------------------------------------------------------- */
.gr-story__img img {
	width: 100%;
	height: 460px;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 14px;
}

/* --- Placeholder labelling ---------------------------------------------- */
.grls-placeholder figcaption,
.grls-placeholder .widget-image-caption {
	font-size: 13px !important;
	color: #8296AB !important;
	font-style: italic;
	letter-spacing: .02em;
}

/* --- Trust / citation row ------------------------------------------------ */
.gr-trustrow .elementor-icon-list-item {
	background: #fff;
	border: 1px solid var(--gr-line);
	border-radius: 999px;
	padding: 10px 18px !important;
	margin: 0 !important;
}

/* --- Accordion polish ---------------------------------------------------- */
.elementor-accordion .elementor-accordion-item {
	border-radius: 10px;
	margin-bottom: 10px;
	overflow: hidden;
	border: 1px solid var(--gr-line) !important;
}
.elementor-accordion .elementor-tab-title { transition: background .12s ease; }
.elementor-accordion .elementor-tab-title:hover { background: var(--gr-bg) !important; }

/* --- Fluent Forms, restyled to match the design system ------------------- */
.gr-lead-form .ff-el-form-control {
	font-family: Roboto, system-ui, sans-serif !important;
	font-size: 17px !important;
	padding: 12px 14px !important;
	border: 1px solid var(--gr-line) !important;
	border-radius: 8px !important;
	color: var(--gr-navy) !important;
	background: #fff !important;
	width: 100%;
}
.gr-lead-form .ff-el-form-control:focus {
	border-color: var(--gr-red) !important;
	box-shadow: 0 0 0 3px rgba(200, 16, 46, .12) !important;
	outline: none !important;
}
.gr-lead-form .ff-el-input--label label {
	font-family: Roboto, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	color: var(--gr-navy) !important;
}
.gr-lead-form .ff-el-input--content .ff-btn-submit {
	background: var(--gr-red) !important;
	color: #fff !important;
	font-family: Roboto, sans-serif !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	padding: 16px 30px !important;
	border-radius: 8px !important;
	border: 0 !important;
	width: 100%;
	min-height: 56px;
	cursor: pointer;
	transition: background .12s ease;
}
.gr-lead-form .ff-el-input--content .ff-btn-submit:hover { background: #A50D26 !important; }
.gr-lead-form .ff-el-help-message { font-size: 14px !important; color: #7A8FA6 !important; }

/* --- Sticky mobile call bar --------------------------------------------- */
.gr-mobile-call {
	display: none;
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9999;
	background: var(--gr-red);
	box-shadow: 0 -3px 16px rgba(0, 0, 0, .2);
}
.gr-mobile-call a {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	color: #fff !important; text-decoration: none;
	font-family: Roboto, sans-serif; font-size: 19px; font-weight: 700;
	padding: 16px 12px; min-height: 60px;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
	.gr-story__img img { height: 380px; }
}

@media (max-width: 767px) {
	.gr-card .elementor-image-box-img img { height: 190px; }
	.gr-story__img img { height: 280px; }
	.gr-case__img img { height: 170px; }

	/* Give the fixed mobile call bar somewhere to sit */
	body { padding-bottom: 62px; }
	.gr-mobile-call { display: block; }

	/* Full-width CTAs on small screens */
	.gr-hero .elementor-button { width: 100%; justify-content: center; }

	/* Wide tables scroll rather than breaking the page */
	.grls-answer table { font-size: 15px; }
}

@media (max-width: 480px) {
	.gr-card .elementor-image-box-img img { height: 170px; }
}


/* ---------------------------------------------------------------------------
 * GeneratePress 'one-container' wraps everything in .site.grid-container
 * (max-width:1180px), which boxes Elementor sections and stops the navy/grey
 * bands reaching the screen edge. Release the wrapper on full-width pages only;
 * the inner containers keep their own 1180px boxed width.
 * ------------------------------------------------------------------------- */
.elementor-template-full-width .site.grid-container,
.elementor-template-full-width #page.container {
	max-width: 100%;
	padding: 0;
	margin: 0;
	background: transparent;
}
.elementor-template-full-width .site-content {
	padding: 0;
	margin: 0;
	display: block;
}
.elementor-template-full-width .content-area,
.elementor-template-full-width #primary { width: 100%; max-width: 100%; margin: 0; padding: 0; }

/* Fluent Forms renders its own button class; scope directly rather than relying
   on the form wrapper class, which does not always apply. */
.ff-btn.ff-btn-submit,
.frm-fluent-form .ff-btn-submit {
	background: var(--gr-red) !important;
	color: #fff !important;
	font-family: Roboto, sans-serif !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	border: 0 !important;
	min-height: 56px !important;
	padding: 16px 30px !important;
	width: 100%;
	cursor: pointer;
}
.ff-btn.ff-btn-submit:hover { background: #A50D26 !important; }


/* ---------------------------------------------------------------------------
 * Footer. Built in PHP (no Theme Builder on free Elementor) but styled from the
 * same tokens as the page so it reads as one system.
 * ------------------------------------------------------------------------- */
.site-footer,
.site-info {
	background: var(--gr-navy) !important;
	color: #9FB3C8;
	font-family: Roboto, system-ui, sans-serif;
}
.site-info .inside-site-info { max-width: 100% !important; padding: 0 !important; }

.grls-foot {
	max-width: 1180px;
	margin: 0 auto;
	padding: 56px 24px 28px;
}
.grls-foot__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
	gap: 40px;
}
.grls-foot__brand {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 12px;
	line-height: 1.3;
}
.grls-foot__h {
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin: 0 0 16px;
}
.grls-foot__blurb {
	font-size: 16px;
	line-height: 1.65;
	color: #9FB3C8;
	margin: 0 0 18px;
	max-width: 42ch;
}
.grls-foot__nap,
.grls-foot__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.grls-foot__nap li { font-size: 16px; line-height: 1.6; color: #C2D2E2; margin-bottom: 9px; }
.grls-foot__nap a { color: #fff; font-weight: 700; text-decoration: none; }
.grls-foot__nap a:hover { color: var(--gr-red); }

.grls-foot__links li { margin-bottom: 9px; }
.grls-foot__links a {
	font-size: 16px;
	color: #C2D2E2;
	text-decoration: none;
	transition: color .12s ease;
}
.grls-foot__links a:hover { color: #fff; }
.grls-foot__links--plain li { font-size: 16px; color: #C2D2E2; }

/* Footer map: same embed as the homepage widget, sized down */
.grls-foot__map {
	position: relative;
	width: 100%;
	height: 190px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #23405F;
	background: #12304F;
}
.grls-foot__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	filter: saturate(60%);
}
.grls-foot__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	background: var(--gr-red);
	color: #fff !important;
	font-size: 17px;
	font-weight: 700;
	text-decoration: none;
	padding: 12px 22px;
	border-radius: 8px;
	min-height: 48px;
	width: 100%;
	transition: background .12s ease;
}
.grls-foot__cta:hover { background: #A50D26; }

/* Bottom credit bar */
.site-info .copyright-bar {
	max-width: 1180px;
	margin: 0 auto;
	padding: 20px 24px 28px !important;
	border-top: 1px solid #1E3A5C;
	font-size: 15px;
	color: #7A93AC;
	text-align: left;
}
.site-info .copyright-bar .copyright { color: #9FB3C8; }
.grls-foot__legal { display: block; margin-top: 6px; font-size: 13px; color: #5F7A96; }

@media (max-width: 1024px) {
	.grls-foot__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.grls-foot__col--map { grid-column: 1 / -1; }
	.grls-foot__map { height: 220px; }
	.grls-foot__cta { width: auto; }
}

@media (max-width: 767px) {
	.grls-foot { padding: 40px 18px 20px; }
	.grls-foot__grid { grid-template-columns: 1fr; gap: 30px; }
	.grls-foot__cta { width: 100%; }
	.site-info .copyright-bar { text-align: center; padding: 18px 18px 24px !important; }
	/* the sticky call bar already reserves space via body padding */
}

/* ---------------------------------------------------------------------------
 * grls-foot-overrides
 * Two things fight the footer and both load after this file:
 *  1. The Elementor kit sets `.elementor-kit-7 h2/h3 { color:#0B2545 }` -- navy
 *     headings on a navy footer render invisible. Beaten on specificity.
 *  2. GeneratePress makes .inside-site-info a flex row, which pushed the credit
 *     bar alongside the footer grid instead of below it.
 * ------------------------------------------------------------------------- */
.site-info .inside-site-info {
	display: block !important;
	max-width: 100% !important;
	padding: 0 !important;
}
.site-footer .site-info,
.site-info { text-align: left; }

/* Footer sits slightly darker than the navy contact section above it, so the two read as separate bands */
.site-info { background: #081B33 !important; }

.grls-foot .grls-foot__brand,
.grls-foot .grls-foot__h,
.site-info .grls-foot h2,
.site-info .grls-foot h3 {
	color: #FFFFFF !important;
}
.grls-foot .grls-foot__brand { font-size: 22px !important; margin: 0 0 12px !important; }
.grls-foot .grls-foot__h { font-size: 15px !important; margin: 0 0 16px !important; letter-spacing: .06em; }

/* GP centres footer text by default */
.grls-foot, .grls-foot__col { text-align: left; }

/* ---------------------------------------------------------------------------
 * grls-polish
 * ------------------------------------------------------------------------- */

/* Red accent rule under centred section headings. Cheap, but it gives the page
   a repeating structural signal instead of a wall of centred text. */
.elementor-widget-heading .elementor-heading-title { position: relative; }
#services .elementor-widget-heading:first-of-type .elementor-heading-title::after,
#the-work .elementor-widget-heading:first-of-type .elementor-heading-title::after,
#data .elementor-widget-heading:first-of-type .elementor-heading-title::after,
#case-studies .elementor-widget-heading:first-of-type .elementor-heading-title::after,
#reviews .elementor-widget-heading:first-of-type .elementor-heading-title::after,
#faq .elementor-widget-heading:first-of-type .elementor-heading-title::after,
#cost-calculator .elementor-widget-heading:first-of-type .elementor-heading-title::after,
#contact .elementor-widget-heading:first-of-type .elementor-heading-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	background: var(--gr-red);
	border-radius: 2px;
	margin: 16px auto 0;
}

/* Body copy inside cards reads badly centred. Left-align it, keep titles centred-ish. */
.gr-card .elementor-image-box-description,
.elementor-widget-icon-box .elementor-icon-box-description {
	text-align: left;
}
.gr-card .elementor-image-box-title,
.elementor-widget-icon-box .elementor-icon-box-title { text-align: left; }
.elementor-widget-icon-box .elementor-icon-box-icon { margin-left: 0 !important; }
.elementor-widget-icon-box .elementor-icon-box-wrapper { text-align: left; }

/* USP icon: give it a tinted plate so it reads as a deliberate mark */
.elementor-widget-icon-box .elementor-icon {
	background: #FDECEF;
	border-radius: 10px;
	width: 54px;
	height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Card hover: lift + warm the border */
.gr-card { border-color: var(--gr-line); }
.gr-card:hover { border-color: #F3C3CC; }

/* --- Carousel ------------------------------------------------------------ */
.gr-carousel .swiper-slide img,
.gr-carousel .elementor-image-carousel-wrapper img {
	height: 260px;
	object-fit: cover;
	border-radius: 12px;
	display: block;
	width: 100%;
}
.gr-carousel .elementor-swiper-button {
	background: rgba(11, 37, 69, .72);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.gr-carousel .elementor-swiper-button:hover { background: var(--gr-red); }
.gr-carousel .swiper-pagination-bullet { opacity: .3; }
.gr-carousel .swiper-pagination-bullet-active { opacity: 1; }

/* --- Call band ----------------------------------------------------------- */
.gr-callband { position: relative; overflow: hidden !important; }
.gr-callband::after {
	content: "";
	position: absolute;
	right: -60px; top: -80px;
	width: 260px; height: 260px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	pointer-events: none;
}
.gr-callband .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.gr-callband .elementor-button { transition: transform .12s ease, box-shadow .12s ease; }

/* --- Reveal (plugin-rendered blocks; Elementor animates its own widgets) -- */
.grls-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.grls-reveal.is-in { opacity: 1; transform: none; }

/* --- Buttons: consistent motion ----------------------------------------- */
.elementor-button { transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease; }
#hero-call-cta:hover, #band-call-cta:hover { transform: translateY(-2px); }

@media (max-width: 767px) {
	.gr-carousel .swiper-slide img,
	.gr-carousel .elementor-image-carousel-wrapper img { height: 220px; }
	#services .elementor-widget-heading:first-of-type .elementor-heading-title::after,
	#faq .elementor-widget-heading:first-of-type .elementor-heading-title::after { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.grls-reveal { opacity: 1; transform: none; transition: none; }
	.gr-card:hover, .elementor-button:hover, .gr-callband .elementor-button:hover { transform: none; }
	.elementor-invisible { opacity: 1 !important; }
}

/* ---------------------------------------------------------------------------
 * grls-carousel-clip
 * Swiper lays its slides out in a long horizontal track and relies on the
 * container clipping them. Here the track was not being clipped, so the
 * duplicate (loop) slides pushed the document 60px wider than the viewport and
 * created a horizontal scrollbar on every page. Clip at the wrapper.
 * ------------------------------------------------------------------------- */
.gr-carousel .elementor-image-carousel-wrapper,
.gr-carousel .swiper,
.gr-carousel .swiper-container {
	overflow: hidden !important;
	position: relative;
	width: 100%;
}
/* Belt and braces: never let a carousel widen the document */
.elementor-widget-image-carousel { max-width: 100%; overflow: hidden; }
/* grls-callband-clip: Elementor container overflow beats a bare class selector. */
.e-con.gr-callband, .elementor .gr-callband { overflow: hidden !important; }

/* grls-anchor-offset: the header is sticky, so anchor targets must clear it. */
#services, #cost-calculator, #data, #our-story, #case-studies, #reviews,
#service-area, #the-work, #faq, #contact,
#book, #symptoms, #cost, #repair-or-replace, #process {
	scroll-margin-top: 110px;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ---------------------------------------------------------------------------
 * grls-legal-styles
 * ------------------------------------------------------------------------- */
.grls-foot__legalnav {
	display: block;
	margin-top: 8px;
	font-size: 14px;
}
.grls-foot__legalnav a { color: #9FB3C8; text-decoration: none; }
.grls-foot__legalnav a:hover { color: #fff; text-decoration: underline; }
.grls-foot__legalnav i { color: #3E5A78; font-style: normal; margin: 0 4px; }

/* Legal pages: built to be read. Narrow measure, loose leading, obvious placeholders. */
.gr-legal .elementor-widget-text-editor p { margin-bottom: 14px; }
.gr-legal .elementor-widget-heading { margin-top: 14px; }
.gr-legal a { color: #C8102E; }

/* Make [PLACEHOLDER] text impossible to miss so nothing ships half-finished */
.gr-legal .elementor-widget-text-editor { --ph: #B7791F; }

@media (max-width: 767px) {
	.grls-foot__legalnav { line-height: 2; }
}
/* Breadcrumbs (Rank Math), below sticky header on interior pages */
.grls-crumbs { background:#F4F7FA; border-bottom:1px solid #E1E8F0; }
.grls-crumbs__inner { max-width:1180px; margin:0 auto; padding:11px 24px; font-family:Roboto,system-ui,sans-serif; font-size:14px; color:#62778C; line-height:1.4; }
.grls-crumbs a { color:#0B2545; text-decoration:none; font-weight:500; }
.grls-crumbs a:hover { color:#C8102E; text-decoration:underline; }
.grls-crumbs .separator { margin:0 8px; color:#B7C4D2; }
.grls-crumbs .last, .grls-crumbs strong { color:#62778C; font-weight:400; }
@media (max-width:767px){ .grls-crumbs__inner{ padding:9px 18px; font-size:13px; } }