/*
 * Albany Park visual refresh, 2026-10.
 * A design layer over Impreza theme options and WPBakery content: palette from the logo,
 * one type system, one button style, calmer sections. Copy and page layouts are untouched.
 * Rollback: remove the refresh enqueue from functions.php.
 */

:root {
	--ap-ink: #13212b;
	--ap-text: #3a4750;
	--ap-muted: #5f6d77;
	--ap-blue: #279bd5;
	--ap-blue-deep: #17648f;
	--ap-blue-deeper: #0f4a6b;
	--ap-mist: #eef4f7;
	--ap-line: #d5e1e8;
	--ap-serif: 'Newsreader', Georgia, serif;
	--ap-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--ap-radius: 6px;
	--ap-measure: 68ch;
}

/* ---------- Type ---------- */

html,
.l-header .widget,
.menu-item-object-us_page_block,
input, select, textarea, button {
	font-family: var(--ap-sans);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.65;
}
body,
.l-canvas {
	color: var(--ap-text);
}
.l-main p,
.l-main li {
	font-weight: 400;
}
.l-main p span[style*="font-weight: 400"] {
	font-weight: inherit !important;
}
strong, b {
	font-weight: 650;
	color: var(--ap-ink);
}

h1, h2, h3, h4, h5, h6,
.l-main .vc_custom_heading:is(h1, h2, h3, h4, h5, h6) {
	font-family: var(--ap-serif);
	font-optical-sizing: auto;
	color: var(--ap-ink);
	font-weight: 500;
	letter-spacing: -0.012em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.15; }
h3 { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.7rem); line-height: 1.25; }
h4 { font-size: 1.3rem; line-height: 1.3; }
h5, h6 { font-size: 1.1rem; line-height: 1.35; }
h1 span, h2 span, h3 span, h4 span {
	font-weight: inherit !important;
}

/* Body copy reads left to right; centred paragraphs are kept only inside the hero. */
.l-main .l-section:not(:first-child) :is(p, h1, h2, h3, h4, h5, h6, ul, ol)[style*="text-align: center"],
.l-main .l-section:not(:first-child) :is(p, h1, h2, h3, h4, h5, h6)[style*="text-align:center"],
.l-main .l-section:not(:first-child) .wpb_text_column :is(p, h2, h3) {
	text-align: left !important;
}
.l-main .wpb_text_column p,
.l-main .wpb_text_column li,
.l-main p.vc_custom_heading {
	max-width: var(--ap-measure);
}

a {
	color: var(--ap-blue-deep);
	text-underline-offset: 0.18em;
}
.l-main .wpb_text_column a:not(.w-btn) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
}
.no-touch a:hover {
	color: var(--ap-blue-deeper);
}

:focus-visible {
	outline: 3px solid var(--ap-blue);
	outline-offset: 2px;
}

/* ---------- Buttons ---------- */

.w-btn.us-btn-style_1,
.w-btn.us-btn-style_2,
.w-btn.us-btn-style_3,
button[type="submit"]:not(.w-btn),
input[type="submit"],
.gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_body .gform_page_footer .gform_next_button,
body .gform_wrapper .gform_page_footer .button {
	font-family: var(--ap-sans) !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border-radius: var(--ap-radius) !important;
	padding: 0.9em 1.5em !important;
	box-shadow: none !important;
}
.w-btn.us-btn-style_1,
.w-btn.us-btn-style_3,
button[type="submit"]:not(.w-btn),
input[type="submit"],
.gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_body .gform_page_footer .gform_next_button,
body .gform_wrapper .gform_page_footer .button {
	background: var(--ap-blue-deep) !important;
	color: #fff !important;
	border: 0 !important;
}
.no-touch .us-btn-style_1:after,
.no-touch .us-btn-style_3:after {
	background: var(--ap-blue-deeper);
}
.no-touch input[type="submit"]:hover,
.no-touch .gform_wrapper .gform_footer input.button:hover,
.no-touch .gform_wrapper .gform_page_footer .button:hover {
	background: var(--ap-blue-deeper) !important;
}
/* style_2 is the secondary action (usually "Call us"): outline on ink */
.w-btn.us-btn-style_2 {
	background: transparent !important;
	color: var(--ap-ink) !important;
	box-shadow: inset 0 0 0 2px var(--ap-ink) !important;
}
.no-touch .us-btn-style_2:after {
	background: var(--ap-ink);
}
.no-touch .w-btn.us-btn-style_2:hover {
	color: #fff !important;
}
.w-btn.us-btn-style_3 {
	font-size: 0.875rem !important;
	padding: 0.7em 1.15em !important;
}
.wpb_wrapper > .w-btn-wrapper + .w-btn-wrapper,
.w-btn-wrapper {
	margin: 0.35rem 0.6rem 0.35rem 0;
}

/* ---------- Header ---------- */

.l-subheader.at_middle {
	background: #fff;
}
.l-subheader.at_bottom {
	background: #fff !important;
	border-top: 1px solid var(--ap-line);
	border-bottom: 1px solid var(--ap-line);
}
.header_hor .ush_menu_1.type_desktop .menu-item.level_1 > a:not(.w-btn) {
	font-family: var(--ap-sans);
	font-weight: 500;
	font-size: 16px;
	color: var(--ap-ink);
}
.header_hor .ush_menu_1.type_desktop .menu-item.level_1.current-menu-item > a,
.header_hor .ush_menu_1.type_desktop .menu-item.level_1.current-menu-ancestor > a,
.no-touch .header_hor .ush_menu_1.type_desktop .menu-item.level_1 > a:hover {
	color: var(--ap-blue-deep);
}
.l-header .w-text,
.l-header .w-text a {
	color: var(--ap-ink);
	font-size: 15px;
}
.l-header .w-socials-item-link-hover {
	background: var(--ap-blue-deep);
}

/* ---------- Sections ---------- */

.l-section.color_alternate,
.l-section.color_alternate .l-section-overlay:not([style]) {
	background-color: var(--ap-mist);
}
.l-section.height_medium:not(:first-child) {
	padding-top: clamp(3.5rem, 6vw, 5.5rem);
	padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
/* Full-width rows (blog, CTA bands) overflowed the viewport by their gutters: keep them on the content grid. */
.l-main .l-section.width_full:not(.with_img) > .l-section-h {
	max-width: 1240px;
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	margin: 0 auto;
}

/* WPBakery centred its intros with empty 3-column spacers either side; with left-aligned copy the
   spacer just pushes the block off the grid, so drop empty spacer columns on desktop. */
@media (min-width: 900px) {
	.l-main .g-cols > .vc_col-sm-3:has(> .vc_column-inner > .wpb_wrapper:empty),
	.l-main .g-cols > .vc_col-sm-2:has(> .vc_column-inner > .wpb_wrapper:empty) {
		display: none;
	}
}
/* The first content section after a hero should breathe, whatever height WPBakery gave it. */
.l-main > .l-section:first-child + .l-section:not(:has(.trustpilot-widget)) {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
}

/* Hero: left aligned, legible overlay, the headline does the work. */
.l-main > .l-section:first-child.with_img .l-section-overlay {
	background: linear-gradient(90deg, rgba(10, 22, 30, 0.82) 0%, rgba(10, 22, 30, 0.6) 45%, rgba(10, 22, 30, 0.2) 100%) !important;
}
.l-main > .l-section:first-child.with_img :is(h1, h2, p) {
	color: #fff !important;
	text-align: left !important;
}
.l-main > .l-section:first-child.with_img h1 {
	font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.4rem);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.02em;
	max-width: 16ch;
}
.l-main > .l-section:first-child.with_img p {
	font-size: 1.15rem;
	max-width: 52ch;
	opacity: 0.92;
}
.l-main > .l-section:first-child.with_img .w-btn-wrapper {
	text-align: left !important;
}
.l-main > .l-section:first-child.with_img .w-btn.us-btn-style_1,
.l-main > .l-section:first-child.with_img .w-btn.us-btn-style_3 {
	background: #fff !important;
	color: var(--ap-ink) !important;
	width: auto !important;
}
.no-touch .l-main > .l-section:first-child.with_img .w-btn:is(.us-btn-style_1, .us-btn-style_3):after {
	background: var(--ap-mist);
}
@media (min-width: 900px) {
	.l-main > .l-section:first-child.with_img .w-btn {
		white-space: nowrap;
	}
	.l-main > .l-section:first-child.with_img .w-btn br {
		display: none;
	}
}
.l-main > .l-section:first-child.with_img .w-btn.us-btn-style_2 {
	color: #fff !important;
	box-shadow: inset 0 0 0 2px #fff !important;
}

/* ---------- Panels (formerly the cyan, green and grey filled columns) ---------- */

.l-main .has-fill > .vc_column-inner {
	background: #fff !important;
	color: var(--ap-text) !important;
	border: 1px solid var(--ap-line);
	border-top: 3px solid var(--ap-blue);
	border-radius: var(--ap-radius);
	box-shadow: none !important;
	text-align: left;
}
.l-main .has-fill > .vc_column-inner *:not(.w-btn):not(.w-btn *) {
	color: inherit !important;
	text-align: left !important;
}
.l-main .has-fill > .vc_column-inner :is(h1, h2, h3, h4, h5, h6, .w-iconbox-title) {
	color: var(--ap-ink) !important;
	font-family: var(--ap-serif);
	font-size: 1.45rem !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
}
.l-main .has-fill > .vc_column-inner .w-iconbox-icon,
.l-main .has-fill > .vc_column-inner .w-iconbox-icon i {
	color: var(--ap-blue) !important;
	background: transparent !important;
}
.l-main .has-fill > .vc_column-inner .w-iconbox {
	text-align: left;
}
.l-main .has-fill > .vc_column-inner .w-iconbox.iconpos_top .w-iconbox-icon {
	margin-left: 0;
}
.l-main .has-fill > .vc_column-inner .w-btn-wrapper {
	text-align: left !important;
}

/* Action boxes ("Simple mortgage advice you can trust", CTA bands) */
.l-main .w-actionbox {
	margin: 1.25rem 0;
	background: var(--ap-mist) !important;
	border-left: 3px solid var(--ap-blue);
	border-radius: var(--ap-radius);
	text-align: left !important;
	padding: clamp(1.75rem, 3vw, 2.75rem) !important;
}
.l-section.color_alternate .w-actionbox {
	background: #fff !important;
}
.l-main .w-actionbox :is(h2, h3, h4, p, .w-actionbox-text) {
	text-align: left !important;
	color: var(--ap-text);
}
.l-main .w-actionbox :is(h2, h3, h4) {
	color: var(--ap-ink);
}
.l-main .w-actionbox .w-actionbox-controls {
	text-align: left !important;
}
.l-main .w-actionbox.controls_bottom .w-actionbox-controls {
	justify-content: flex-start;
}

/* Trustpilot's data endpoint answers 400 for this business unit (checked 2026-10-23), so every TrustBox renders blank.
   Hide those sections until the Trustpilot account is fixed, then delete this rule. */
.l-main .l-section:has(.trustpilot-widget) {
	display: none !important;
}

/* ---------- Forms (Gravity Forms) ---------- */

.gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.gform_wrapper select,
.gform_wrapper textarea {
	font-family: var(--ap-sans);
	font-size: 17px !important;
	color: var(--ap-ink);
	background: #fff !important;
	border: 1px solid #b9c8d2 !important;
	border-radius: 4px !important;
	padding: 11px 13px !important;
	min-height: 48px;
}
.gform_wrapper :is(input, select, textarea):focus {
	border-color: var(--ap-blue-deep) !important;
	outline: 3px solid rgba(39, 155, 213, 0.35);
	outline-offset: 0;
}
.gform_wrapper .gfield_label {
	font-family: var(--ap-sans);
	font-weight: 600 !important;
	font-size: 15px !important;
	color: var(--ap-ink);
}
.gform_wrapper .gfield_description,
.gform_wrapper .instruction {
	font-size: 14px !important;
	color: var(--ap-muted);
}
.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
	font-size: 16px !important;
	color: var(--ap-text);
}
/* The reCAPTCHA widget explains itself; the bare "CAPTCHA" label is noise. */
.gform_wrapper .gfield:has(.ginput_recaptcha) > .gfield_label {
	display: none !important;
}
.gform_wrapper .gf_progressbar {
	background: var(--ap-line) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}
.gform_wrapper .gf_progressbar_percentage {
	background: var(--ap-blue-deep) !important;
	border-radius: 999px !important;
}
.gform_wrapper .gf_progressbar_title {
	font-size: 14px !important;
	color: var(--ap-muted) !important;
}
.banneroverform_wrapper {
	border-radius: var(--ap-radius) !important;
	box-shadow: 0 24px 48px -24px rgba(10, 22, 30, 0.55) !important;
	padding: 1.75rem 1.75rem 1.5rem !important;
	text-align: left !important;
}
.banneroverform_wrapper h3.gform_title,
.banneroverform_wrapper .gform_description {
	color: var(--ap-ink) !important;
	text-align: left !important;
}
.banneroverform_wrapper .gform_footer input.button {
	left: auto !important;
	transform: none !important;
	width: 100%;
}

/* ---------- Footer ---------- */

.l-footer .l-section.color_footer-top {
	background: var(--ap-ink) !important;
	color: #c4d0d8;
}
.l-footer .l-section.color_footer-bottom {
	background: #0c161d !important;
	color: #9fb0bb;
}
.l-footer :is(h1, h2, h3, h4, h5, h6) {
	color: #fff !important;
	font-size: 1.25rem;
}
.l-footer a {
	color: #dbe5eb;
}
.no-touch .l-footer a:hover {
	color: #fff;
}
.l-footer .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.l-footer .gform_wrapper textarea {
	background: rgba(255, 255, 255, 0.06) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	color: #fff;
}
.l-footer .gform_wrapper input::placeholder,
.l-footer .gform_wrapper textarea::placeholder {
	color: #9fb0bb;
}
.l-footer .gform_wrapper .gform_footer input.button {
	background: var(--ap-blue) !important;
	color: var(--ap-ink) !important;
}

/* ---------- Details ---------- */

.l-main .w-image img,
.l-main .w-grid-item img {
	border-radius: var(--ap-radius);
}
.w-grid-item .post_title,
.w-grid-item .w-post-elm.post_title a {
	font-family: var(--ap-serif);
	font-weight: 500;
	color: var(--ap-ink);
}
.w-toplink {
	background: var(--ap-ink) !important;
	border-radius: var(--ap-radius);
}

@media (max-width: 599px) {
	html { font-size: 17px; }
	.l-main .l-section.width_full:not(.with_img) > .l-section-h {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}
	.l-main > .l-section:first-child.with_img .l-section-overlay {
		background: rgba(10, 22, 30, 0.72) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.us-btn-style_1:after, .us-btn-style_2:after, .us-btn-style_3:after { transition: none !important; }
}

/* WPBakery paints most "alternate" rows with an inline #f5f5f5 overlay rather than color_alternate;
   map it onto the same mist so every tinted band on the site is one colour. */
.l-main .l-section-overlay[style*="#f5f5f5"] {
	background: var(--ap-mist) !important;
}
/* The contact page form sits in a grey 15px-radius blob; bring it in line with the other panels. */
.l-main .us_custom_6a3878e8 {
	background: #fff !important;
	border: 1px solid var(--ap-line);
	border-top: 3px solid var(--ap-blue);
	border-radius: var(--ap-radius) !important;
}
/* On phones the two hero buttons stack; give them one width so they read as a pair. */
@media (max-width: 599px) {
	.l-main > .l-section:first-child.with_img .w-btn-wrapper {
		display: block;
		margin: 0 0 .75rem !important;
	}
	.l-main > .l-section:first-child.with_img .w-btn {
		display: flex;
		justify-content: center;
		width: 100% !important;
	}
}