/**
 * AGD Style Kit — motion, hero treatment, and the spacing scale.
 *
 * The hiding rules are all scoped under html.agd-anim, which only enhance.js
 * adds. If the script fails, nothing is hidden and the page renders in full —
 * a stylesheet that hides content and trusts JavaScript to bring it back is
 * how sites end up blank for the crawler and for anyone on a flaky connection.
 */

/* ==================================================================
 * Reveal on scroll
 *
 * Opacity and transform only. Both are composited, so neither triggers
 * layout or paint, and neither can shift anything else on the page —
 * which is what keeps Cumulative Layout Shift at zero.
 * ================================================================== */

html.agd-anim .agd-reveal {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity .55s cubic-bezier(.22, .61, .36, 1),
	            transform .55s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}

html.agd-anim .agd-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Once it has arrived, stop advertising it to the compositor — leaving
   will-change on hundreds of elements costs memory for no benefit. */
html.agd-anim .agd-reveal.is-in {
	will-change: auto;
}

/* ==================================================================
 * Hero banners
 *
 * Every inner page already had one; they were let down by the artwork and
 * by text sitting straight on top of it. A scrim fixes both at once — it
 * guarantees the text is readable whatever the image behind it, and it
 * pushes flat illustration back so it reads as a backdrop rather than as
 * the subject.
 *
 * The scrim is a gradient rather than a flat wash so the image still shows
 * through on the side away from the text.
 * ================================================================== */

.agd-sk .agd-hero {
	position: relative;
	isolation: isolate;
	background-size: cover !important;
	background-position: center !important;
}

.agd-sk .agd-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(11, 16, 23, .93) 0%,
		rgba(11, 16, 23, .82) 34%,
		rgba(11, 16, 23, .45) 62%,
		rgba(11, 16, 23, .25) 100%
	);
	pointer-events: none;
}

/* Text on a scrim, at a size that holds its own against a photograph. */
.agd-sk .agd-hero h1,
.agd-sk .agd-hero .elementor-heading-title {
	color: #FFFFFF !important;
	font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em;
	text-wrap: balance;
	max-width: 18ch;
}

.agd-sk .agd-hero p,
.agd-sk .agd-hero .elementor-widget-text-editor {
	color: #D3DCE6 !important;
	font-size: clamp(1rem, .95rem + .25vw, 1.1rem);
	max-width: 52ch;
}

.agd-sk .agd-hero .elementor-widget-text-editor p { max-width: 52ch; }

/* Consistent hero height across every page — the thing that makes a set of
   pages feel like one site rather than nineteen separate ones. */
.agd-sk .agd-hero {
	min-height: clamp(260px, 34vw, 420px);
	display: flex;
	align-items: center;
	padding-top: clamp(36px, 5vw, 68px) !important;
	padding-bottom: clamp(36px, 5vw, 68px) !important;
}

/* A photograph goes here once there is one. Set --agd-hero-image on the
   container in Elementor (Advanced → CSS) and it takes over from whatever the
   page is using now, with the scrim already sized to it. */
.agd-sk .agd-hero[style*="--agd-hero-image"] {
	background-image: var(--agd-hero-image) !important;
}

/* The breadcrumb sits on its own pale strip above the hero on inner pages,
   which reads as a leftover. Pulled onto the hero it becomes part of it. */
.agd-sk .agd-hero + *:empty { display: none; }

/* ==================================================================
 * Spacing scale
 *
 * The spacing complaints come from every band choosing its own padding, so
 * the gaps between sections vary down a page and collapse unevenly on a
 * phone. One clamp() ties the vertical rhythm to the viewport: tight on a
 * phone, generous on a desktop, and continuous in between rather than
 * jumping at a breakpoint.
 * ================================================================== */

.agd-sk .e-con.e-parent:not(.agd-hero) {
	padding-top: clamp(38px, 5.2vw, 76px);
	padding-bottom: clamp(38px, 5.2vw, 76px);
}

/* Side gutters that never let text touch the edge of a phone screen. */
.agd-sk .e-con.e-parent {
	padding-left: max(20px, env(safe-area-inset-left));
	padding-right: max(20px, env(safe-area-inset-right));
}

@media (min-width: 768px) {
	.agd-sk .e-con.e-parent {
		padding-left: 32px;
		padding-right: 32px;
	}
}

/* Two bands of the same colour meeting each other end up with double the
   padding between them and look like a gap. Halve it where that happens. */
.agd-sk .e-con.e-parent + .e-con.e-parent {
	padding-top: clamp(30px, 4.2vw, 60px);
}

/* ==================================================================
 * Tablet
 *
 * The awkward width. Four-across becomes cramped well before the layout
 * actually breaks, so the card rows drop to two-across through the middle
 * range rather than holding four until they are 150px wide.
 * ================================================================== */

@media (min-width: 641px) and (max-width: 1023px) {
	.agd-sk .agd-trust {
		grid-template-columns: repeat(2, 1fr);
		gap: 26px 18px;
	}
	.agd-sk .agd-hero h1,
	.agd-sk .agd-hero .elementor-heading-title { max-width: 22ch; }
}

/* The header pair are compact so they fit beside the menu, and on a desktop
   that is fine because a mouse is precise. On a touchscreen it left them 38px
   tall, under the 44px that a thumb reliably hits — and one of them is the
   phone number, which is the single most valuable thing to press on a garage
   door website. Height only: the horizontal padding stays tight so the header
   does not outgrow a 390px screen. */
@media (max-width: 1299px) {
	.agd-sk .site-header .elementor-button,
	.agd-sk .site-header .btn,
	.agd-sk .site-header .header-cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}
}

/* ------------------------------------------------------------------
 * The header at phone widths
 *
 * Measured at 390px: logo 150 + phone button + quote button + hamburger came
 * to 418px of content in 346px of space, so the whole page scrolled sideways
 * by 97px. Horizontal scroll on a phone is the most noticeable spacing fault
 * there is — every section looks misaligned because the viewport is offset.
 *
 * Fixed by tightening first and only dropping something when tightening is
 * not enough.
 * ---------------------------------------------------------------- */

@media (max-width: 600px) {
	.agd-sk .site-header__inner {
		gap: 8px;
		padding-left: 16px;
		padding-right: 16px;
	}
	.agd-sk .site-header__actions { gap: 8px; }
	.agd-sk .custom-logo { width: 120px !important; max-width: 120px; }
	.agd-sk .site-header .elementor-button {
		padding: 8px 12px !important;
		font-size: 12.5px !important;
	}
}

@media (max-width: 440px) {
	/* Below this there is genuinely not room for both calls to action, so the
	   second one goes. The phone number stays, because on a phone, for a trade
	   business, tapping to call is worth more than tapping through to a form —
	   and "Get a Free Quote" is still the first button in the hero directly
	   underneath, plus it sits in the menu. */
	.agd-sk .site-header__actions a.elementor-button + a.elementor-button {
		display: none;
	}
}

@media (max-width: 640px) {
	.agd-sk .agd-hero {
		min-height: 0;
		text-align: left;
	}
	.agd-sk .agd-hero h1,
	.agd-sk .agd-hero .elementor-heading-title { max-width: 100%; }

	/* Full-width buttons on a phone, because a 44px-tall button floating in
	   the middle of a 390px screen is harder to hit than it should be. */
	.agd-sk .agd-hero .elementor-widget-button,
	.agd-sk .agd-hero .elementor-button { width: 100%; }
	.agd-sk .agd-hero .elementor-button { text-align: center; }
}

/* ==================================================================
 * Hover, for pointers only
 *
 * A hover lift on a touchscreen sticks after a tap and looks like a bug,
 * so it is gated on the device actually having a pointer.
 * ================================================================== */

@media (hover: hover) and (pointer: fine) {
	.agd-sk .elementor-widget-image img {
		transition: transform .45s cubic-bezier(.22, .61, .36, 1);
	}
	.agd-sk .elementor-widget-image:hover img {
		transform: scale(1.025);
	}
}

/* ==================================================================
 * The one rule that outranks all of the above
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
	html.agd-anim .agd-reveal,
	html.agd-anim .agd-reveal.is-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.agd-sk .elementor-widget-image img,
	.agd-sk .elementor-widget-image:hover img {
		transition: none !important;
		transform: none !important;
	}
}