/* ==========================================================================
   ART CENTRRAL — Elementor container layout system
   ==========================================================================
   Every container this site generates is a Full Width container, so children
   are direct descendants and there is no .e-con-inner to reach through.

   These classes set the same CSS custom properties Elementor's own container
   stylesheet consumes (--padding-top, --width, --gap …). That keeps the builder
   authoritative: anything the client sets in the UI is written as an inline
   style on .elementor-element-<id>, which outranks everything here.
   ========================================================================== */

:root {
	--ac-sec-y: clamp(64px, 4.4vw + 40px, 128px);
	--ac-gap:   clamp(20px, 2vw, 34px);
	--ac-wrap:  1240px;
}

/* ==========================================================================
   SECTION RHYTHM
   ========================================================================== */

.e-con.ac-section {
	--padding-top: var(--ac-sec-y);
	--padding-bottom: var(--ac-sec-y);
	--padding-left: 0px;
	--padding-right: 0px;
}
.e-con.ac-section--tight {
	--padding-top: clamp(48px, 3.6vw + 30px, 88px);
	--padding-bottom: clamp(48px, 3.6vw + 30px, 88px);
}
.e-con.ac-section--top-only { --padding-bottom: 0px; }
.e-con.ac-section--bottom-only { --padding-top: 0px; }
.e-con.ac-section--flush { --padding-top: 0px; --padding-bottom: 0px; }

/* Two bands that need less than the rhythm gives them, both for the same
   reason: whatever sits directly below already supplies the air, so the
   section's own padding was being counted twice.

   The promise strip is white and is followed by a white section — 82px under
   the tiles plus 103px over the next heading read as one long empty band
   rather than as two sections. The footer's copyright bar carries 26px of its
   own padding under the text, and another 82px beneath that left a dark
   runway at the end of every page. */
.e-con.ac-section.ac-promise-band { --padding-bottom: clamp(20px, 1.6vw + 8px, 34px); }
.e-con.ac-section.ac-footer-band  { --padding-bottom: clamp(20px, 1.4vw + 8px, 30px); }

/* The homepage hero opens the page, so it keeps a measure of air under the
   sticky header rather than starting hard against it. Written after the
   modifiers above because it deliberately overrides --bottom-only's zero. */
.e-con.ac-hero { --padding-top: clamp(40px, 4vw, 76px); }

.ac-section--light { background-color: var(--ac-light); }
.ac-section--dark { background-color: var(--ac-dark); color: rgba(255, 255, 255, .72); }
.ac-section--accent { background-color: var(--ac-primary); color: #fff; }

.ac-section--dark h1, .ac-section--dark h2, .ac-section--dark h3, .ac-section--dark h4,
.ac-section--dark .elementor-heading-title { color: #fff; }
.ac-section--accent h1, .ac-section--accent h2, .ac-section--accent h3,
.ac-section--accent .elementor-heading-title { color: #fff; }
.ac-section--dark p, .ac-section--dark .elementor-widget-text-editor { color: rgba(255, 255, 255, .66); }
.ac-section--accent p, .ac-section--accent .elementor-widget-text-editor { color: rgba(255, 255, 255, .88); }

/* ==========================================================================
   THE ONE CONTENT MEASURE
   ========================================================================== */

.e-con.ac-wrap {
	--width: min(100%, var(--ac-wrap));
	--padding-left: 20px;
	--padding-right: 20px;
	margin-inline: auto;
}
@media (min-width: 768px) {
	.e-con.ac-wrap { --padding-left: 32px; --padding-right: 32px; }
}

/* ==========================================================================
   GRIDS
   ========================================================================== */

.e-con.ac-grid { display: grid; gap: var(--ac-gap); }
.e-con.ac-grid-2,
.e-con.ac-grid-3,
.e-con.ac-grid-4 { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 620px) {
	.e-con.ac-grid-2,
	.e-con.ac-grid-3,
	.e-con.ac-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.e-con.ac-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.e-con.ac-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- process steps ------------------------------------------------------
   Same idea as the hairline grid: a 1px gap over a coloured background draws
   the rules between steps, and a rule across the top closes the row off. The
   class was being written into the markup with no styles behind it, so the
   four steps floated with nothing separating them.
   ------------------------------------------------------------------------ */
.e-con.ac-steps {
	--row-gap: 1px;
	--column-gap: 1px;
	gap: 1px;
	background: var(--ac-border);
	border-top: 1px solid var(--ac-border);
	/* Elementor's default 10px container padding would sit outside the cells
	   and paint a grey frame right round the block. */
	--padding-top: 0px; --padding-bottom: 0px;
	--padding-left: 0px; --padding-right: 0px;
}
/* A step must NOT carry ac-bare. Its padding is what holds the text off the
   1px rule beside it, and ac-bare zeroes container padding at a specificity
   this selector cannot reach — with it on, every heading ran into the rule. */
.ac-steps > .e-con {
	background: var(--ac-light);
	--padding-top: 34px;
	--padding-bottom: 30px;
	--padding-left: 0px;
	--padding-right: 0px;
}
@media (min-width: 760px) {
	.ac-steps > .e-con {
		--padding-left: 26px;
		--padding-right: 26px;
	}
	/* The first column keeps its left edge flush with the content measure. */
	.ac-steps > .e-con:first-child { --padding-left: 0px; }
}
.ac-steps p { max-width: 32ch; }

/* On a white section the steps sit on white, not the light surface. */
.ac-section:not(.ac-section--light) .ac-steps > .e-con { background: #fff; }

/* Tight grid where the 1px gap *is* the rule between tiles. */
.e-con.ac-grid-hairline {
	display: grid;
	--row-gap: 1px;
	--column-gap: 1px;
	gap: 1px;
	background: var(--ac-border);
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	overflow: hidden;
	grid-template-columns: minmax(0, 1fr);
	--padding-top: 0px; --padding-bottom: 0px;
	--padding-left: 0px; --padding-right: 0px;
}
@media (min-width: 640px) { .e-con.ac-grid-hairline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .e-con.ac-grid-hairline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ac-grid-hairline > .e-con { background: #fff; }
.ac-section--dark .ac-grid-hairline { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .12); }
.ac-section--dark .ac-grid-hairline > .e-con { background: var(--ac-dark); }

/* ==========================================================================
   ASYMMETRIC SPLITS
   ========================================================================== */

.e-con.ac-split {
	display: grid;
	--row-gap: clamp(32px, 4vw, 66px);
	--column-gap: clamp(32px, 4vw, 66px);
	gap: clamp(32px, 4vw, 66px);
	grid-template-columns: minmax(0, 1fr);
	--align-items: center;
}
@media (min-width: 960px) {
	.e-con.ac-split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
	.e-con.ac-split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.e-con.ac-split--wide-left { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
	.e-con.ac-split--sidebar { grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); align-items: start; }
	.e-con.ac-split--why { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
}
@media (min-width: 1024px) {
	.e-con.ac-split--hero { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }
}

/* ==========================================================================
   SECTION HEADINGS
   ========================================================================== */

.e-con.ac-sec-head {
	display: grid;
	--row-gap: var(--ac-gap);
	--column-gap: var(--ac-gap);
	gap: var(--ac-gap);
	align-items: end;
	grid-template-columns: minmax(0, 1fr);
	--padding-top: 0px;
	--padding-bottom: 40px;
	--padding-left: 0px;
	--padding-right: 0px;
	margin-bottom: clamp(34px, 3.6vw, 58px);
	border-bottom: 1px solid var(--ac-border);
}
@media (min-width: 901px) {
	.e-con.ac-sec-head { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); }
}
.e-con.ac-sec-head--center {
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	text-align: center;
	border-bottom: 0;
	--padding-bottom: 0px;
	max-width: 62ch;
	margin-inline: auto;
}
.ac-section--dark .ac-sec-head { border-bottom-color: rgba(255, 255, 255, .14); }

/* ==========================================================================
   CARDS AND TILES
   ========================================================================== */

.e-con.ac-card {
	background: #fff;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	--padding-top: 0px; --padding-bottom: 0px;
	--padding-left: 0px; --padding-right: 0px;
	--row-gap: 0;
	--column-gap: 0;
	gap: 0;
	height: 100%;
}
.e-con.ac-card-body {
	--padding-top: clamp(22px, 2vw, 30px);
	--padding-bottom: clamp(22px, 2vw, 30px);
	--padding-left: clamp(22px, 2vw, 30px);
	--padding-right: clamp(22px, 2vw, 30px);
	--row-gap: 10px;
	--column-gap: 10px;
	gap: 10px;
	flex: 1;
	--align-items: flex-start;
}

/* The "Learn more" link is pushed to the foot of the card so that all eight
   line up, whatever length the description above it runs to. */
.ac-card-body > .ac-link { margin-top: auto; }
.e-con.ac-tile {
	background: #fff;
	--padding-top: clamp(26px, 2.4vw, 38px);
	--padding-bottom: clamp(26px, 2.4vw, 38px);
	--padding-left: clamp(26px, 2.4vw, 38px);
	--padding-right: clamp(26px, 2.4vw, 38px);
	--row-gap: 8px;
	--column-gap: 8px;
	gap: 8px;
	--align-items: flex-start;
}

/* ==========================================================================
   STACKS AND ROWS
   ========================================================================== */

.e-con.ac-stack { --row-gap: 18px; --column-gap: 18px; gap: 18px; }
.e-con.ac-stack-sm { --row-gap: 10px; --column-gap: 10px; gap: 10px; }
.e-con.ac-stack-lg { --row-gap: 28px; --column-gap: 28px; gap: 28px; }

.e-con.ac-row {
	--flex-direction: row;
	--flex-wrap: wrap;
	--row-gap: 12px;
	--column-gap: 12px;
	gap: 12px;
	--padding-top: 0px; --padding-bottom: 0px;
	--padding-left: 0px; --padding-right: 0px;
	--width: auto;
	width: auto;
	--align-items: center;
}
.e-con.ac-row--between { --justify-content: space-between; }
.e-con.ac-row--center { --justify-content: center; }
.e-con.ac-row--end { --justify-content: flex-end; }

/* Grouping containers add no padding of their own — but a container that is
   also a section band or the content gutter keeps the padding those give it. */
.e-con.ac-bare:not(.ac-section):not(.ac-wrap) {
	--padding-top: 0px; --padding-bottom: 0px;
	--padding-left: 0px; --padding-right: 0px;
}
.e-con.ac-wrap.ac-bare {
	--padding-top: 0px; --padding-bottom: 0px;
}

/* ==========================================================================
   MEDIA
   ========================================================================== */

.ac-media img {
	border-radius: var(--ac-radius-lg);
	width: 100%;
	display: block;
}
.ac-media--shadow img { box-shadow: var(--ac-shadow-md); }
.ac-card .ac-media img { border-radius: 0; }

/* ---- portfolio grid ----------------------------------------------------
   Three columns with the first and sixth tile running double width. The
   uneven rhythm is what stops a portfolio reading as a contact sheet, and it
   gives the two strongest pieces of work room to be looked at.
   ------------------------------------------------------------------------ */
.e-con.ac-work-grid {
	--row-gap: clamp(14px, 1.4vw, 22px);
	--column-gap: clamp(14px, 1.4vw, 22px);
	gap: clamp(14px, 1.4vw, 22px);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) {
	.e-con.ac-work-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		/* The row height is stated rather than left to the tiles. A tile that
		   sizes itself from a 1:1 ratio would make the double-width feature
		   twice as tall as its neighbours and wreck the row. */
		grid-auto-rows: clamp(230px, 25vw, 380px);
	}
	/* nth-of-type, not nth-child: the filter hides tiles with a class rather
	   than removing them, so the feature positions stay put while filtering. */
	.ac-work-grid > .ac-work-item:nth-of-type(1),
	.ac-work-grid > .ac-work-item:nth-of-type(6) { grid-column: span 2; }

	/* Fill the row, whatever ratio the visual would otherwise hold. */
	.ac-work-grid .ac-shot { aspect-ratio: auto; }
}

/* Portfolio tile — caption plate riding over the image. */
.e-con.ac-work-item {
	position: relative;
	overflow: hidden;
	border-radius: var(--ac-radius-lg);
	--padding-top: 0px; --padding-bottom: 0px;
	--padding-left: 0px; --padding-right: 0px;
	--row-gap: 0;
	--column-gap: 0;
	gap: 0;
}
.e-con.ac-work-meta {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 5;
	background: linear-gradient(transparent, rgba(10, 10, 12, .88));
	--padding-top: 56px; --padding-bottom: 20px;
	--padding-left: 22px; --padding-right: 22px;
	--row-gap: 4px;
	--column-gap: 4px;
	gap: 4px;
	--align-items: flex-start;
}
.ac-work-meta .elementor-heading-title { color: #fff; font-size: 1.02rem; }
.ac-work-item img { border-radius: 0; transition: transform .55s var(--ac-ease); }
.ac-work-item:hover img { transform: scale(1.06); }

/* ==========================================================================
   REVIEWS
   ==========================================================================
   These were centred placeholder slots waiting for real reviews. Now that the
   reviews are real they are read rather than glanced at, so the card is
   left-aligned, the quote gets the room, and the name sits at the foot where a
   signature goes. The cards stretch to a common height so three reviews of
   different lengths still line up as a row. */

.e-con.ac-review {
	--padding-top: 28px; --padding-bottom: 26px;
	--padding-left: 26px; --padding-right: 26px;
	--row-gap: 14px;
	--column-gap: 14px;
	gap: 14px;
	--align-items: flex-start;
	--justify-content: flex-start;
	background: #fff;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	text-align: left;
	height: 100%;
}

.ac-review__stars {
	color: var(--ac-primary);
	font-size: 1rem;
	letter-spacing: .16em;
	line-height: 1;
}

.ac-review blockquote {
	margin: 0;
	padding: 0;
	border: 0;
}
.ac-review blockquote p {
	font-size: .93rem;
	line-height: 1.62;
	color: var(--ac-dark, #101112);
	margin: 0;
}

/* Pushed to the foot so the names line up across the row whatever the quotes
   above them do. */
.ac-review__by {
	margin-top: auto;
	padding-top: 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.ac-review__name {
	font-weight: 600;
	font-size: .92rem;
	color: var(--ac-dark, #101112);
}
.ac-review__meta {
	font-size: .78rem;
	color: var(--ac-muted);
}

/* ---- the carousel -------------------------------------------------------
   An ordinary overflow container with scroll-snap, driven by its own buttons.
   It moves itself and nothing else — the work rail that was taken out of this
   site drove the page's own scroll position, which is what made it stutter.

   Everything below assumes the arrows and dots may not exist: they are added
   by ac-site.js at runtime, so with no JavaScript this stays a swipeable strip
   with all seven reviews reachable, which is a fair fallback rather than a
   broken one.
   ------------------------------------------------------------------------ */

.ac-carousel { position: relative; }

.ac-carousel__track {
	display: flex;
	gap: clamp(14px, 1.4vw, 20px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	/* Room for the card's own shadow and focus ring, taken back with a
	   negative margin so the first card still lines up with the measure. */
	padding: 4px 4px 6px;
	margin: -4px -4px -6px;
}
.ac-carousel__track::-webkit-scrollbar { display: none; }
.ac-carousel__track:focus-visible {
	outline: 2px solid var(--ac-primary);
	outline-offset: 4px;
}

.ac-carousel__track > .ac-review {
	scroll-snap-align: start;
	flex: 0 0 auto;
	/* One card on a phone, two on a tablet, three from desktop up. The gap is
	   subtracted so three cards and two gaps fill the measure exactly. */
	width: 100%;
}
@media (min-width: 620px) {
	.ac-carousel__track > .ac-review { width: calc((100% - clamp(14px, 1.4vw, 20px)) / 2); }
}
@media (min-width: 1024px) {
	.ac-carousel__track > .ac-review { width: calc((100% - 2 * clamp(14px, 1.4vw, 20px)) / 3); }
}

/* Cards are articles here, not Elementor containers, so they need the box the
   .e-con rule above gives its version. */
article.ac-review {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px 26px;
	background: #fff;
	border: 1px solid var(--ac-border);
	border-radius: var(--ac-radius-lg);
	text-align: left;
}
article.ac-review blockquote { flex: 1 1 auto; }

.ac-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: clamp(22px, 2.4vw, 34px);
}

/* Every selector below is scoped to .ac-carousel, and that is not tidiness.
   The Elementor kit paints `.elementor-kit-5 button` — every button on the
   site — with the primary orange, 15px/28px padding and a 4px radius. That is
   (0,1,1); an unscoped .ac-carousel__btn is (0,1,0) and loses, which turned
   the arrows and all three dots into identical orange slabs. Scoping takes
   these to (0,2,0). Padding, font-size and radius have to be stated too, not
   just the colour, because the kit sets those in the same rule. */

.ac-carousel .ac-carousel__btn {
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(16, 17, 18, .22);
	border-radius: 50%;
	background-color: transparent;
	color: var(--ac-dark, #101112);
	font-size: 0;
	cursor: pointer;
	transition: background-color .25s var(--ac-ease), border-color .25s var(--ac-ease), opacity .25s var(--ac-ease);
}
.ac-carousel .ac-carousel__btn:hover:not(:disabled),
.ac-carousel .ac-carousel__btn:focus-visible {
	background-color: rgba(16, 17, 18, .05);
	border-color: rgba(16, 17, 18, .42);
}
/* Disabled rather than hidden at the ends, so the control does not jump about
   and the row keeps its width. */
.ac-carousel .ac-carousel__btn:disabled { opacity: .3; cursor: default; }
.ac-carousel .ac-carousel__btn svg { width: 15px; height: 15px; fill: currentColor; }

.ac-carousel .ac-carousel__dots { display: flex; align-items: center; gap: 8px; }
.ac-carousel .ac-carousel__dot {
	width: 7px;
	height: 7px;
	min-width: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(16, 17, 18, .2);
	font-size: 0;
	cursor: pointer;
	transition: background-color .25s var(--ac-ease), width .25s var(--ac-ease);
}
.ac-carousel .ac-carousel__dot[aria-current="true"] {
	width: 22px;
	border-radius: 4px;
	background-color: var(--ac-primary);
}
.ac-carousel .ac-carousel__dot:hover { background-color: rgba(16, 17, 18, .42); }
.ac-carousel .ac-carousel__dot[aria-current="true"]:hover { background-color: var(--ac-primary); }

@media (prefers-reduced-motion: reduce) {
	.ac-carousel__track { scroll-behavior: auto; }
	.ac-carousel__dot { transition: none; }
}

/* ==========================================================================
   HEADER
   ========================================================================== */

/* The header band itself sticks; the bar inside it lays out the three groups. */
.e-con.ac-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Painted here rather than in the Elementor template, so the cine-hero
	   pages can make it transparent without an !important fight against
	   Elementor's per-element CSS. */
	background: #fff;
	--padding-top: 0px; --padding-bottom: 0px;
	--padding-left: 0px; --padding-right: 0px;
}

.e-con.ac-header-bar {
	--flex-direction: row;
	--align-items: center;
	--flex-wrap: nowrap;
	--row-gap: 22px;
	--column-gap: 22px;
	gap: 22px;
	--padding-top: 0px; --padding-bottom: 0px;
	min-height: 78px;
}
/* The client's lockup stacks ART over CENTRRAL, so it needs more height than a
   single-line wordmark before the name is comfortably readable. */
.ac-header-bar .ac-logo img { max-height: 54px; width: auto; }
@media (max-width: 1023px) {
	.ac-header-bar .ac-logo img { max-height: 46px; }
}

/* Logo and CTA group keep their size; only the nav column flexes. */
.ac-header-bar > .elementor-widget-image,
.ac-header-bar > .e-con { flex: 0 0 auto; --width: auto; }
.ac-header-push { margin-left: auto; }
.e-con.ac-header-desktop-only { --flex-wrap: nowrap; }

/* ---- header actions -----------------------------------------------------
   Call and Get a Quote have to read as one control group, and they did not.

   Elementor wraps each button in its own widget div and writes per-widget CSS
   for it, so the two boxes were arrived at by different arithmetic: the
   outline button's 1px border made it 2px taller than the solid one, its
   wrapper measured 47px against the other's 53px, and centring two unequal
   wrappers in the row left the boxes about 3px out of line. Small enough to
   look like a mistake rather than a decision, which is the worst size for it
   to be.

   So the box is stated here instead of derived: an explicit height, a border
   on both (transparent on the solid one) so border-box arithmetic matches,
   and one radius. Nothing is left to padding plus line-height.

   !important where Elementor writes the same property per widget — padding,
   radius and font size — because .elementor-element-xxxx .elementor-button
   outranks anything a class selector here can say.
   ------------------------------------------------------------------------ */
.e-con.ac-header-desktop-only { --align-items: center; align-items: center; }
.ac-header-desktop-only > .elementor-widget { display: flex; align-items: center; }

.ac-header-desktop-only .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 18px !important;
	border: 1px solid transparent;
	border-radius: 7px !important;
	font-size: .875rem !important;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .005em;
	white-space: nowrap;
	transition: background-color .25s var(--ac-ease), border-color .25s var(--ac-ease), color .25s var(--ac-ease);
}
.ac-header-desktop-only .elementor-button .elementor-button-content-wrapper {
	align-items: center;
	gap: 8px;
}

/* The icon is an inline SVG and Elementor sets its fill from the button's text
   colour at build time. Over the dark header the label is repainted white and
   the fill is not, so the phone sat there as a dark glyph on a dark box —
   present in the markup, invisible on screen. currentColor makes it follow
   whatever the label is doing, in either state. */
.ac-header-desktop-only .elementor-button svg {
	width: 15px;
	height: 15px;
	fill: currentColor !important;
}

/* Same for the mobile menu toggle, which HFE also renders as an SVG with a
   hard-coded fill. On the solid header that fill happens to be right; the
   over-hero state is corrected in ac-premium.css. Stating currentColor here
   means neither state depends on what HFE decided to bake in. */
.ac-header-bar .hfe-nav-menu__toggle svg { fill: currentColor; }

/* On the solid header the outline button is an outline, not a white fill on
   white. Elementor was given a white background because that is what it
   needed over the hero before the theme took that state over. */
.ac-header-desktop-only .ac-btn-outline .elementor-button {
	background-color: transparent !important;
	border-color: rgba(16, 17, 18, .22) !important;
	color: var(--ac-dark, #101112) !important;
}
.ac-header-desktop-only .ac-btn-outline .elementor-button:hover {
	background-color: rgba(16, 17, 18, .05) !important;
	border-color: rgba(16, 17, 18, .42) !important;
}

/* ---- desktop navigation -------------------------------------------------
   HFE ships its own menu styling and its stylesheet loads after the theme's,
   so these are written specifically enough to win without !important. The
   sizing matters as much as the look: at the inherited 16px the seven items
   overflowed the middle column and wrapped "Contact" onto a second row,
   which is most of what made the header look broken.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
	.ac-header-bar .hfe-nav-menu ul.hfe-nav-menu {
		flex-wrap: nowrap;
		gap: 30px;
	}
	.ac-header-bar .hfe-nav-menu .menu-item { white-space: nowrap; }

	.ac-header-bar .hfe-nav-menu a.hfe-menu-item {
		position: relative;
		padding: 6px 0;
		font-family: var(--ac-font-body, "Inter", sans-serif);
		font-size: .9rem;
		font-weight: 500;
		line-height: 1.4;
		color: var(--ac-ink, #24262A);
		background: none;
		transition: color .2s var(--ac-ease, cubic-bezier(.22,.61,.36,1));
	}

	/* The hairline draws in from the left rather than fading, matching the
	   underline treatments used elsewhere on the page. */
	.ac-header-bar .hfe-nav-menu a.hfe-menu-item::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 0;
		height: 1.5px;
		background: var(--ac-primary, #E4572E);
		transition: width .28s var(--ac-ease, cubic-bezier(.22,.61,.36,1));
	}
	.ac-header-bar .hfe-nav-menu a.hfe-menu-item:hover { color: var(--ac-dark, #101112); }
	.ac-header-bar .hfe-nav-menu a.hfe-menu-item:hover::after { width: 100%; }

	/* Current page reads as already underlined. */
	.ac-header-bar .hfe-nav-menu .current-menu-item > a.hfe-menu-item { color: var(--ac-dark, #101112); }
	.ac-header-bar .hfe-nav-menu .current-menu-item > a.hfe-menu-item::after { width: 100%; }
}

/* The desktop header appears at 1024, but this menu carries seven items where
   the approved design had five. At that width logo + nav + both CTAs ran about
   60px past the viewport, so everything closes up until there is room. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.e-con.ac-header-bar {
		--row-gap: 14px;
		--column-gap: 14px;
		gap: 14px;
	}
	.ac-header-bar .hfe-nav-menu ul.hfe-nav-menu { gap: 17px; }
	.ac-header-bar .hfe-nav-menu a.hfe-menu-item { font-size: .84rem; }
	.ac-header-desktop-only .elementor-button {
		padding: 0 14px !important;
		font-size: .82rem !important;
	}
}

@media (max-width: 1023px) {
	.e-con.ac-header-bar { min-height: 66px; }
	.ac-header-desktop-only { display: none !important; }

	/* HFE renders the collapsed menu inline, which overflows the viewport. It
	   does toggle "menu-is-active" on the nav, so the panel is styled against
	   that state class and anchored to the sticky header band. */
	/* HFE positions its own wrappers; make the sticky header band the anchor so
	   the panel can span the full width instead of the toggle's box. */
	.ac-header-push,
	.ac-header-bar .elementor-widget-navigation-menu,
	.ac-header-bar .elementor-widget-container,
	.ac-header-bar .hfe-nav-menu { position: static; }

	/* HFE's own stylesheet loads after the theme's and sets the panel geometry,
	   so these few properties are forced. */
	.ac-header-bar .hfe-nav-menu__layout-horizontal.hfe-dropdown {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		display: none !important;
		max-height: calc(100dvh - 66px);
		overflow-y: auto;
		padding: 6px 20px 20px;
		background: #fff;
		border-top: 1px solid var(--ac-border);
		box-shadow: 0 18px 44px rgba(16, 17, 18, .12);
	}
	.ac-header-bar .hfe-nav-menu__layout-horizontal.hfe-dropdown.menu-is-active {
		display: block !important;
	}
	.ac-header-bar .hfe-dropdown ul.hfe-nav-menu {
		flex-direction: column;
		width: 100%;
	}
	.ac-header-bar .hfe-dropdown .menu-item { width: 100%; }
	.ac-header-bar .hfe-dropdown .menu-item a.hfe-menu-item {
		display: block;
		width: 100%;
		padding: 15px 0;
		font-family: var(--e-global-typography-primary-font-family, "Manrope"), sans-serif;
		font-size: 1.15rem;
		font-weight: 700;
		color: var(--ac-dark, #101112);
		border-bottom: 1px solid var(--ac-border);
		transition: color .2s, padding-left .25s var(--ac-ease);
	}
	.ac-header-bar .hfe-dropdown .menu-item a.hfe-menu-item:hover,
	.ac-header-bar .hfe-dropdown .menu-item.current-menu-item a.hfe-menu-item {
		color: var(--ac-primary);
		padding-left: 8px;
	}
	.ac-header-bar .hfe-nav-menu__toggle { margin-left: auto; }
}
@media (min-width: 1024px) {
	.ac-header-mobile-only { display: none !important; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.e-con.ac-footer-grid {
	display: grid;
	--row-gap: 36px;
	--column-gap: 36px;
	gap: 36px;
	grid-template-columns: minmax(0, 1fr);
	--padding-top: 0px; --padding-bottom: 50px;
	--padding-left: 0px; --padding-right: 0px;
}
@media (min-width: 700px) { .e-con.ac-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .e-con.ac-footer-grid { grid-template-columns: 1.5fr .8fr .8fr 1.1fr; gap: 44px; } }

.e-con.ac-footer-bar {
	border-top: 1px solid rgba(255, 255, 255, .1);
	--padding-top: 24px; --padding-bottom: 26px;
	--padding-left: 0px; --padding-right: 0px;
	--flex-direction: row;
	--flex-wrap: wrap;
	--justify-content: space-between;
	--align-items: center;
	--row-gap: 10px;
	--column-gap: 10px;
	gap: 10px;
}
.ac-footer-bar p, .ac-footer-bar .elementor-widget-text-editor {
	font-size: .8rem;
	color: rgba(255, 255, 255, .45);
}
.ac-footer-col .elementor-widget-heading .elementor-heading-title {
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}
.ac-footer-links a { color: rgba(255, 255, 255, .6); font-size: .88rem; }
.ac-footer-links a:hover { color: #fff; }

/* ==========================================================================
   THE MOBILE MENU
   ==========================================================================
   A sheet that drops out of the header, not a list that appears under it.

   What was wrong with the old one, beyond the white-on-white text fixed in
   ac-premium.css: two separators drew on every row, one from the theme on the
   link and one from Elementor's per-widget CSS on the list item, so every line
   was doubled and the heavier of the two was #c4c4c4. And a visitor on a phone
   had no call to action in the header at all — the Call and Get a Quote
   buttons are display:none below 1024, and nothing replaced them.
   ========================================================================== */

/* The menu sheet's own call to action is cloned into the panel by
   ac-site.js on every load, whatever the viewport. Above 1023 the real
   buttons are in the header bar where they belong, so the copies have to
   be hidden or the header shows Call and Get a Quote twice each — which
   is exactly what it did for one build. */
.ac-mobile-cta,
.ac-mobile-meta { display: none; }

@media (max-width: 1023px) {

	/* ---- the sheet ---- */
	.ac-header-bar .hfe-nav-menu__layout-horizontal.hfe-dropdown {
		padding: 4px 20px 22px;
		border-top: 1px solid var(--ac-border);
		border-radius: 0 0 18px 18px;
		box-shadow: 0 26px 60px rgba(16, 17, 18, .22);
	}

	/* ---- one separator, ours ----
	   Elementor writes the li border keyed to the widget id, which no theme
	   selector can outrank honestly, so that one is turned off and the link
	   keeps its own hairline. */
	.ac-header-bar nav.hfe-dropdown li.menu-item:not(:last-child) {
		border-bottom-width: 0 !important;
	}
	.ac-header-bar .hfe-dropdown .menu-item:last-child a.hfe-menu-item {
		border-bottom: 0;
	}

	/* ---- the rows ---- */
	.ac-header-bar .hfe-dropdown .menu-item a.hfe-menu-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16px 2px;
		font-size: 1.08rem;
		letter-spacing: -.01em;
		border-bottom: 1px solid var(--ac-border);
		transition: color .2s var(--ac-ease), padding-left .25s var(--ac-ease);
	}

	/* A chevron, as a background image rather than a pseudo-element.

	   ::after was the obvious way and it does not work here: Header Footer
	   Elementor builds its hover pointers out of ::before and ::after on this
	   same link and holds them at opacity 0, which a chevron of ours inherits
	   the moment it borrows the slot. A background image has no such argument
	   to lose, and it is one request fewer than an icon font the header would
	   otherwise have no reason to load. */
	.ac-header-bar .hfe-dropdown .menu-item a.hfe-menu-item {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5L6.5 6.5L1.5 11.5' fill='none' stroke='%23101112' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.3'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 2px center;
		background-size: 8px 13px;
		padding-right: 24px;
	}

	/* The page you are on, marked rather than merely coloured. */
	.ac-header-bar .hfe-dropdown .menu-item.current-menu-item a.hfe-menu-item {
		color: var(--ac-primary);
		padding-left: 12px;
		position: relative;
	}
	.ac-header-bar .hfe-dropdown .menu-item.current-menu-item a.hfe-menu-item::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 3px;
		height: 18px;
		margin-top: -9px;
		border-radius: 2px;
		background: var(--ac-primary);
	}

	/* ---- the rows arrive one after another ----
	   Six items appearing at once is a flash; a 40ms stagger reads as the
	   sheet unrolling. Nothing moves more than 10px. */
	.ac-header-bar .hfe-dropdown.menu-is-active .menu-item {
		animation: ac-menu-item-in .34s var(--ac-ease, cubic-bezier(.22, 1, .36, 1)) both;
	}
	.ac-header-bar .hfe-dropdown.menu-is-active .menu-item:nth-child(1) { animation-delay: .02s; }
	.ac-header-bar .hfe-dropdown.menu-is-active .menu-item:nth-child(2) { animation-delay: .06s; }
	.ac-header-bar .hfe-dropdown.menu-is-active .menu-item:nth-child(3) { animation-delay: .10s; }
	.ac-header-bar .hfe-dropdown.menu-is-active .menu-item:nth-child(4) { animation-delay: .14s; }
	.ac-header-bar .hfe-dropdown.menu-is-active .menu-item:nth-child(5) { animation-delay: .18s; }
	.ac-header-bar .hfe-dropdown.menu-is-active .menu-item:nth-child(6) { animation-delay: .22s; }
	@keyframes ac-menu-item-in { from { opacity: 0; transform: translateY(-10px); } }

	/* ---- the call to action, cloned in by ac-site.js ---- */
	.ac-mobile-cta {
		display: grid;
		gap: 10px;
		margin-top: 20px;
		animation: ac-menu-item-in .34s var(--ac-ease, cubic-bezier(.22, 1, .36, 1)) .26s both;
	}
	.ac-mobile-cta .elementor-widget-button,
	.ac-mobile-cta .elementor-button-wrapper { display: block; width: 100%; }
	.ac-mobile-cta .elementor-button {
		display: flex;
		width: 100%;
		justify-content: center;
		padding: 14px 18px !important;
		font-size: .95rem !important;
		border-radius: var(--ac-radius);
	}

	/* The phone number in full, under the buttons. The Call button says
	   "Call"; somebody who wants to save the number wants to read it. */
	.ac-mobile-meta {
		display: block;
		margin: 16px 0 0;
		font-size: .82rem;
		line-height: 1.6;
		color: var(--ac-muted);
		text-align: center;
		animation: ac-menu-item-in .34s var(--ac-ease, cubic-bezier(.22, 1, .36, 1)) .3s both;
	}
	.ac-header-bar .ac-mobile-meta a { color: var(--ac-dark, #101112); font-weight: 600; }

	/* ---- the page behind ----
	   The sheet needs something under it or it reads as part of the page it is
	   covering. The header is z-index 100 and this sits just below it. */
	body.ac-menu-open::before {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 90;
		background: rgba(16, 17, 18, .48);
		animation: ac-menu-scrim-in .25s var(--ac-ease, ease);
	}
	@keyframes ac-menu-scrim-in { from { opacity: 0; } }
	body.ac-menu-open { overflow: hidden; }

	/* Over a dark hero the header is transparent, but once the sheet is open
	   the bar above it is the sheet's lid and has to be solid, or the logo and
	   the close button sit on whatever photograph happens to be behind.

	   Every selector here carries .e-con it does not need, to buy the one
	   point of specificity that beats the transparent-header rules in
	   ac-premium.css — which are written at (0,3,1) to (0,5,1) and load after
	   this file. The alternative was !important on eight declarations. */
	body.ac-cine.ac-menu-open .e-con.ac-header {
		background: #fff;
		border-bottom-color: var(--ac-border);
	}
	body.ac-cine.ac-menu-open .e-con.ac-header::before { opacity: 0; }
	body.ac-cine.ac-menu-open .e-con.ac-header .ac-logo-lockup { display: block; }
	body.ac-cine.ac-menu-open .e-con.ac-header .ac-logo-badge { display: none; }
	body.ac-cine.ac-menu-open .e-con.ac-header .hfe-nav-menu__toggle,
	body.ac-cine.ac-menu-open .e-con.ac-header .hfe-nav-menu-icon { color: var(--ac-dark, #101112); }
	body.ac-cine.ac-menu-open .e-con.ac-header .hfe-nav-menu__toggle svg { fill: currentColor !important; }

	/* The cloned Call button is inside the header too, so the transparent
	   header rules paint it white on white: an invisible button sitting above
	   a visible one, which is what the gap in the sheet was.

	   !important here only because those rules use it — they have to, because
	   Elementor writes this button's colours per widget id. Matching a rule
	   that is already !important is the one case where adding another is not
	   an escalation. The specificity is a class higher regardless. */
	body.ac-menu-open .e-con.ac-header .ac-mobile-cta .ac-btn-outline .elementor-button {
		background-color: #fff !important;
		color: var(--ac-dark, #101112) !important;
		border-color: var(--ac-border) !important;
	}
	body.ac-menu-open .e-con.ac-header .ac-mobile-cta .ac-btn-outline .elementor-button:hover {
		background-color: var(--ac-light-2, #EFEFEA) !important;
		border-color: var(--ac-dark, #101112) !important;
	}
	body.ac-menu-open .e-con.ac-header .ac-mobile-cta .ac-btn-outline .elementor-button svg,
	body.ac-menu-open .e-con.ac-header .ac-mobile-cta .ac-btn-outline .elementor-button i {
		color: var(--ac-dark, #101112) !important;
		fill: var(--ac-dark, #101112) !important;
	}
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
	.ac-header-bar .hfe-dropdown.menu-is-active .menu-item,
	.ac-mobile-cta,
	.ac-mobile-meta,
	body.ac-menu-open::before { animation: none; }
}