/* ==========================================================================
   Humber River Restoration - build stylesheet
   Everything here is additive. No parent theme file is edited and no Brickz
   rule is fought with !important unless the comment says why.
   Tokens mirror the Elementor kit exactly, so a value is never typed twice.
   ========================================================================== */

:root {
	--hre-gold: #ECC607;
	--hre-gold-dark: #C9A806;
	--hre-green: #4A7832;
	--hre-green-deep: #2F5220;
	--hre-blue: #0D6AB0;
	--hre-slate: #24303C;
	--hre-slate-deep: #1B2530;
	--hre-slate-mid: #5A6673;
	--hre-line: #E2E6EA;
	--hre-surface: #F6F8F9;
	--hre-white: #FFFFFF;

	--hre-blue-deep: #0A5A96;
	--hre-sec-y: 96px;
	--hre-hdr-h: 80px;
	--hre-gap: 24px;
	--hre-radius-card: 8px;
	--hre-radius-btn: 6px;
	--hre-radius-input: 4px;
	/* width system, Phase 4. One box for the header, every section, the footer and the
	   copyright bar: 1400 max, otherwise 95% of the viewport (2.5vw gutters, never under
	   20px on a phone). Same numbers as flatroofstoronto.ca at 1600 and 1920. */
	--hre-max: 1400px;
	--hre-gutter: max(20px, 2.5vw);
}

@media (max-width: 1024px) { :root { --hre-sec-y: 64px; } }
@media (max-width: 767px)  { :root { --hre-sec-y: 48px; --hre-gap: 16px; --hre-hdr-h: 64px; } }

/* ------------------------------------------------------------ foundations */

.hre-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: var(--hre-slate); color: #fff; padding: 12px 20px;
	border-radius: 0 0 var(--hre-radius-btn) 0; font: 600 15px/1 'Inter', sans-serif;
}
.hre-skip:focus { left: 0; }

body.hre :where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--hre-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

body.hre img { max-width: 100%; height: auto; }

/* Every boxed container reads the width system, so the header edge and the section edge are
   the same pixel at every breakpoint. !important because Elementor writes these custom
   properties per element with a heavier selector, and the kit's 1240 container_width is
   superseded here rather than in the kit. Full width wrappers that only hold a box (footer
   band, header band) drop their own gutter so it is not counted twice. */
body.hre .e-con-boxed {
	--container-max-width: var(--hre-max) !important;
	--padding-left: var(--hre-gutter) !important;
	--padding-right: var(--hre-gutter) !important;
}
body.hre .e-con-boxed > .e-con-inner { max-width: var(--hre-max); }
body.hre .e-con-full:has(> .e-con-boxed) { --padding-left: 0 !important; --padding-right: 0 !important; }

/* nothing on this site may push the viewport sideways */
body.hre { overflow-x: clip; }

/* ------------------------------------------------------------ section shell */

.hre-sec { padding-block: var(--hre-sec-y) !important; }
.hre-sec--tight { padding-block: calc(var(--hre-sec-y) * 0.62) !important; }
.hre-sec--surface { background-color: var(--hre-surface); }
.hre-sec--dark { background-color: var(--hre-slate); }
.hre-sec--green { background-color: var(--hre-green-deep); }

.hre-sec--dark :where(h1,h2,h3,h4,h5,h6,p,li,span,div),
.hre-sec--green :where(h1,h2,h3,h4,h5,h6,p,li,span,div) { color: #fff; }
.hre-sec--dark p, .hre-sec--green p { color: rgba(255,255,255,.82); }

.hre-eyebrow {
	font: 600 13px/18px 'Inter', sans-serif;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--hre-green); margin-bottom: 12px;
}
.hre-sec--dark .hre-eyebrow, .hre-sec--green .hre-eyebrow, .hre-hero .hre-eyebrow { color: var(--hre-gold); }

.hre-lede p { font-size: 18px; line-height: 1.65; }
@media (max-width: 767px) { .hre-lede p { font-size: 17px; } }

/* eyebrow, heading, lede: one block, 12px apart, 68ch wide. Section intros are centred,
   the head inside a split or a prose block is left. */
body.hre .hre-sechead { max-width: 760px; width: 100%; }
body.hre .hre-sechead.is-centred { margin-inline: auto; text-align: center; }
body.hre .hre-sechead.is-centred .hre-eyebrow .elementor-heading-title,
body.hre .hre-sechead.is-centred h2 { text-align: center; }
body.hre .hre-sechead .hre-lede { max-width: 68ch; }
body.hre .hre-sechead .hre-lede p { margin-top: 4px; }
body.hre .hre-sechead > .elementor-widget { width: 100%; }

/* body copy never runs past 68ch */
body.hre .hre-prose .elementor-widget-text-editor,
body.hre .hre-prose .hre-bullets,
body.hre .hre-split__body .elementor-widget-text-editor,
body.hre .hre-split__body .hre-bullets,
body.hre .hre-hero__inner .hre-lede { max-width: 68ch; }

/* a rule under a section heading, gold, never gold type */
.hre-rule { width: 56px; height: 3px; background: var(--hre-gold); border-radius: 2px; }

/* ------------------------------------------------------------ buttons, CTA pair */

.hre-ctapair { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hre-ctapair.is-centred { justify-content: center; }

/* rs-button already reads the kit globals, so only the shape is set here */
.hre-btn .rs-button-area a,
.hre-btn a.rs-button,
.hre-btn .rs-btn {
	border-radius: var(--hre-radius-btn);
	min-height: 48px;
}

/* ------------------------------------------------------------ split, equal height */

.hre-split { display: grid !important; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch !important; }
.hre-split > * { min-width: 0; height: 100%; align-self: stretch !important; }
.hre-split--rev .hre-split__media { order: 2; }
.hre-split--rev .hre-split__body { order: 1; }

.hre-split__body { display: flex !important; flex-direction: column; justify-content: center; }

.hre-split__media { position: relative; border-radius: var(--hre-radius-card); overflow: hidden; }
.hre-split__media { display: flex !important; flex-direction: column; }
.hre-split__media > .elementor-widget,
.hre-split__media > .elementor-widget-image { flex: 1 1 auto; min-height: 0; display: flex; }
.hre-split__media .elementor-widget-container,
.hre-split__media figure,
.hre-split__media .elementor-image { flex: 1 1 auto; min-height: 0; display: flex; width: 100%; margin: 0; }
.hre-split__media img {
	flex: 1 1 auto; min-height: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
}

@media (max-width: 1024px) { .hre-split { gap: 32px; } }
@media (max-width: 767px) {
	.hre-split { grid-template-columns: 1fr; gap: 24px; }
	.hre-split > * { height: auto; }
	.hre-split--rev .hre-split__media, .hre-split--rev .hre-split__body { order: initial; }
	.hre-split__media { min-height: 240px; }
}

.hre-bullets ul { list-style: none; margin: 8px 0 0; padding: 0; }
.hre-bullets li { position: relative; padding-left: 28px; margin-bottom: 10px; line-height: 1.6; }
.hre-bullets li::before {
	content: ""; position: absolute; left: 0; top: .55em;
	width: 10px; height: 10px; border-radius: 2px; background: var(--hre-gold);
}

/* ------------------------------------------------------------ card grids, equal height */

.hre-grid { display: grid !important; gap: var(--hre-gap); align-items: stretch !important; }
.hre-grid > * { min-width: 0; height: 100%; align-self: stretch !important; }

.hre-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hre-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hre-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* five cards: 3 + 2 on a twelve track grid, never a lone card under a row of four */
.hre-grid--5 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hre-grid--5 > * { grid-column: span 4; }
.hre-grid--5 > :nth-child(n+4) { grid-column: span 6; }
/* ten cards: never five narrow columns. 4 + 3 + 3 on a twelve track grid. */
.hre-grid--10 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hre-grid--10 > * { grid-column: span 3; }
.hre-grid--10 > :nth-child(n+5) { grid-column: span 4; }

@media (max-width: 1024px) {
	.hre-grid--3, .hre-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hre-grid--10 > *, .hre-grid--10 > :nth-child(n+5) { grid-column: span 6; }
	.hre-grid--5 > *, .hre-grid--5 > :nth-child(n+4) { grid-column: span 6; }
	.hre-grid--5 > :last-child { grid-column: span 12; }
}
@media (max-width: 767px) {
	.hre-grid--2, .hre-grid--3, .hre-grid--4, .hre-grid--5, .hre-grid--10 { grid-template-columns: minmax(0, 1fr); }
	.hre-grid--10 > *, .hre-grid--10 > :nth-child(n+5),
	.hre-grid--5 > *, .hre-grid--5 > :nth-child(n+4), .hre-grid--5 > :last-child { grid-column: auto; }
	.hre-grid > * { height: auto; }
}

.hre-card {
	display: flex !important;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--hre-line);
	border-radius: var(--hre-radius-card);
	padding: 28px !important;
	height: 100%;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hre-sec--surface .hre-card { background: #fff; }
.hre-sec--dark .hre-card, .hre-sec--green .hre-card {
	background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14);
}
.hre-card:hover, .hre-card:focus-within {
	border-color: var(--hre-gold);
	box-shadow: 0 10px 28px rgba(36,48,60,.09);
	transform: translateY(-2px);
}
/* the link is inside a widget, and the widget is the flex child, so the widget is what
   gets pinned to the foot of the card. The link itself never wraps. */
.hre-card > .hre-card__foot,
.hre-card > .elementor-widget:has(> .elementor-widget-container > .hre-card__cta) { margin-top: auto !important; }
.hre-card__cta { padding-top: 18px; }
.hre-card__cta a {
	font: 600 15px/1.2 'Inter', sans-serif; color: var(--hre-slate);
	display: inline-flex; align-items: center; gap: 8px; min-height: 24px;
	white-space: nowrap;
}
.hre-card__cta a .hre-ico { flex: 0 0 auto; transition: transform .18s ease; }
.hre-card__cta a:hover { color: var(--hre-blue); }
.hre-card__cta a:hover .hre-ico { transform: translateX(3px); }
.hre-card .elementor-widget-text-editor p { font-size: 16px; line-height: 1.6; }
.hre-sec--dark .hre-card__cta a, .hre-sec--green .hre-card__cta a { color: var(--hre-gold); }

.hre-card .elementor-widget:not(:last-child) { margin-bottom: 10px; }

.hre-card__media {
	margin: -28px -28px 20px !important;
	padding: 0 !important;
	border-radius: var(--hre-radius-card) var(--hre-radius-card) 0 0;
	overflow: hidden;
	width: auto !important;
}
.hre-card__media > .elementor-widget,
.hre-card__media .elementor-widget-container,
.hre-card__media figure,
.hre-card__media .elementor-image { width: 100% !important; margin: 0 !important; line-height: 0; }
.hre-card__media img {
	width: 100% !important; height: auto;
	aspect-ratio: 4 / 3; object-fit: cover; display: block;
}

/* numbered method steps */
.hre-step { counter-increment: hre-step; }
.hre-steps { counter-reset: hre-step; }
.hre-step .hre-step__n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--hre-gold); color: var(--hre-slate);
	font: 700 17px/1 'Inter Tight', sans-serif; margin-bottom: 16px;
}

/* checklist grid. The badge is a slate circle with a gold tick drawn as an inline SVG
   background. Phase 2 masked the circle with the tick, which left only a 13px sliver of
   green and read as a broken glyph. No icon font is involved anywhere in this build. */
.hre-check { position: relative; padding-left: 44px; }
.hre-check::before {
	content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px;
	border-radius: 50%; background-color: var(--hre-slate);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ECC607' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
}
.hre-checklist--stack { gap: 18px; }
.hre-checklist--stack > * { height: auto; }

/* ------------------------------------------------------------ hero */

.hre-hero { position: relative; }
.hre-hero::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(27,37,48,.86) 0%, rgba(27,37,48,.62) 42%, rgba(27,37,48,.88) 100%);
	pointer-events: none;
}
.hre-hero > * { position: relative; z-index: 1; }
.hre-hero :where(h1,h2,p,span,div,li) { color: #fff; }
.hre-hero p { color: rgba(255,255,255,.88); }

/* the hero fills the first screen on every page, header transparent over it, content
   centred in what is left under the bar */
body.hre .hre-hero { min-height: 100vh !important; min-height: 100svh !important; }
body.hre .hre-hero > .e-con-inner { justify-content: center; }

.hre-crumbs { font: 500 14px/1.5 'Inter', sans-serif; color: rgba(255,255,255,.75); }
.hre-crumbs a { color: rgba(255,255,255,.75); }
.hre-crumbs a:hover { color: var(--hre-gold); }
.hre-crumbs .hre-crumbs__sep { margin: 0 8px; opacity: .5; }

/* ------------------------------------------------------------ header */

.rstb-header .rstb-transparent { background: transparent; }
.rstb-header .rstb-sticky, .rstb-header .rstb-sticky-up {
	background: #fff;
	box-shadow: 0 1px 0 var(--hre-line), 0 8px 24px rgba(36,48,60,.07);
}
.hre-hdr-phone a { font: 600 15px/1 'Inter', sans-serif; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.hre-hdr--light .hre-hdr-phone a { color: #fff; }
.hre-hdr--light .hre-hdr-phone a:hover { color: var(--hre-gold); }
.hre-hdr--solid .hre-hdr-phone a { color: var(--hre-slate); }
.hre-hdr--solid .hre-hdr-phone a:hover { color: var(--hre-blue); }

/* the drawer toggle has to be a real 44px target */
.rstb-header .rstb-offcanvas-toggle,
.rstb-header .mobile-toggle-btn { min-width: 44px; min-height: 44px; }

/* ------------------------------------------------------------ footer */

/* river blue, deep variant: white on #0A5A96 is 7.4:1, gold on it is 5.2:1 */
.hre-footer { background: var(--hre-blue-deep); }
.hre-footer :where(h1,h2,h3,h4,h5,h6) { color: #fff; }
.hre-footer p, .hre-footer li, .hre-footer a { color: rgba(255,255,255,.86); }
.hre-footer a:hover { color: var(--hre-gold); }
.hre-footer ul { list-style: none; margin: 0; padding: 0; }
.hre-footer li { margin-bottom: 10px; line-height: 1.5; }
.hre-footer li a { display: inline-block; min-height: 24px; }
/* the rule sits on the content box, not on the full width band */
.hre-footer__bar > .e-con-inner { border-top: 1px solid rgba(255,255,255,.18); padding-inline: 10px; }
.hre-footer__bar a { color: rgba(255,255,255,.75); }
.hre-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 20px; }

/* four columns at desktop, two at tablet, one on a phone. Grid, so every column is
   the height of the tallest one, measured. */
body.hre .hre-footer__top > .e-con-inner {
	display: grid !important;
	grid-template-columns: 1.35fr 0.85fr 1.35fr 1fr;
	gap: 40px;
	align-items: stretch;
}
body.hre .hre-footer__col { min-width: 0; height: 100%; align-self: stretch; }
body.hre .hre-footer__col h3 { font-size: 15px; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; color: var(--hre-gold); }
body.hre .hre-footer__brand p { font-size: 15px; line-height: 1.6; max-width: 34ch; }
body.hre .hre-footer__brand img { height: 48px !important; width: auto !important; }
body.hre .hre-footer__nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
body.hre .hre-footer__nav li { margin: 0; }
body.hre .hre-footer__nav a { font: 600 15px/1.5 'Inter', sans-serif; color: #fff; }
body.hre .hre-footer__hub {
	display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px;
	font: 600 14px/1.4 'Inter', sans-serif; color: var(--hre-gold); white-space: nowrap;
}
body.hre .hre-footer__hub:hover { color: #fff; }
body.hre .hre-footer__hub .hre-ico { width: 16px; height: 16px; }
body.hre .hre-footer__col > .elementor-widget:last-child:has(.hre-footer__hub) { margin-top: auto; }
body.hre .hre-footer__contact li { font-size: 16px; }
body.hre .hre-footer__contact a { color: #fff; }
body.hre .hre-footer__area { font-size: 14px; color: rgba(255,255,255,.7); margin: 6px 0 0; }
body.hre .hre-footer__legal a { font-size: 14px; }
body.hre .hre-footer .rstb-copyright, body.hre .hre-footer .rstb-copyright * { color: rgba(255,255,255,.75) !important; }
@media (max-width: 1024px) {
	body.hre .hre-footer__top > .e-con-inner { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 40px 32px; }
}
@media (max-width: 767px) {
	body.hre .hre-footer__top > .e-con-inner { grid-template-columns: minmax(0,1fr); gap: 36px; }
	body.hre .hre-footer__col { height: auto; }
}
@media (max-width: 380px) { .hre-footer__links { grid-template-columns: minmax(0,1fr); } }

/* before and after pair under the method steps */
body.hre .hre-pair { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--hre-gap); }
body.hre .hre-pair__fig { position: relative; border-radius: var(--hre-radius-card); overflow: hidden; padding: 0 !important; }
body.hre .hre-pair__fig .elementor-widget-image, body.hre .hre-pair__fig .elementor-widget-container, body.hre .hre-pair__fig figure { width: 100% !important; margin: 0 !important; line-height: 0; }
body.hre .hre-pair__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
body.hre .hre-pair__fig .elementor-widget-html { position: absolute; left: 16px; top: 16px; width: auto !important; margin: 0 !important; }
body.hre .hre-pair__label {
	display: inline-block; font: 600 13px/1 'Inter', sans-serif; letter-spacing: .08em; text-transform: uppercase;
	background: var(--hre-slate); color: var(--hre-gold); border-radius: 100px; padding: 8px 14px;
}
body.hre .hre-pair__caption p { font-size: 15px; color: var(--hre-slate-mid); text-align: center; }
body.hre .hre-pair__caption { max-width: 68ch; margin-inline: auto; }
@media (max-width: 600px) { body.hre .hre-pair { grid-template-columns: minmax(0,1fr); } }

/* ------------------------------------------------------------ projects and reviews */

.hre-proj { overflow: hidden; }
.hre-proj__meta {
	display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.hre-proj__tag {
	font: 600 13px/1 'Inter', sans-serif; letter-spacing: .06em; text-transform: uppercase;
	background: var(--hre-surface); color: var(--hre-slate);
	border: 1px solid var(--hre-line); border-radius: 100px; padding: 7px 12px;
}
.hre-proj dl { margin: 0; }
.hre-proj dt {
	font: 600 13px/1 'Inter', sans-serif; letter-spacing: .07em; text-transform: uppercase;
	color: var(--hre-green); margin-top: 14px;
}
.hre-proj dd { margin: 6px 0 0; line-height: 1.6; color: var(--hre-slate-mid); }

.hre-review { position: relative; }
.hre-review__quote { font-size: 17px; line-height: 1.65; color: var(--hre-slate); }
.hre-review__label { font: 600 14px/1.4 'Inter', sans-serif; color: var(--hre-slate); }
.hre-review__service { font-size: 13px; color: var(--hre-slate-mid); }
.hre-review::before {
	content: "\201C"; font: 700 64px/1 'Inter Tight', serif; color: var(--hre-gold);
	display: block; height: 34px; margin-bottom: 4px;
}
/* Brickz styles every blockquote::before with a remixicon glyph; ours is a typographic mark */
body.hre .hre-review__quote::before, body.hre .hre-review blockquote::before { content: none !important; }

/* credential strip */
.hre-creds .rs-logo-item img, .hre-creds img {
	filter: grayscale(1); opacity: .62; transition: filter .2s ease, opacity .2s ease;
	max-height: 68px; width: auto;
}
.hre-creds .rs-logo-item:hover img, .hre-creds img:hover { filter: none; opacity: 1; }

/* ------------------------------------------------------------ FAQ */

.hre-faq .rs-accordion-item, .hre-faq .accordion-item {
	border: 1px solid var(--hre-line) !important;
	border-radius: var(--hre-radius-card) !important;
	background: #fff;
	margin-bottom: 12px;
}
.hre-faq .rs-accordion-title, .hre-faq .accordion-title { font-family: 'Inter Tight', sans-serif; }

/* ------------------------------------------------------------ forms, CF7 */

.hre-form .wpcf7 { color: inherit; }
.hre-form .wpcf7-form p { margin: 0 0 16px; }
.hre-form label { display: block; font: 600 14px/1.4 'Inter', sans-serif; color: var(--hre-slate); margin-bottom: 6px; }
.hre-sec--dark .hre-form label, .hre-sec--green .hre-form label { color: #fff; }
.hre-form .hre-field { margin-bottom: 16px; }
.hre-form .hre-fields-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 16px; }
@media (max-width: 600px) { .hre-form .hre-fields-2 { grid-template-columns: minmax(0,1fr); } }

.hre-form input[type=text], .hre-form input[type=email], .hre-form input[type=tel],
.hre-form select, .hre-form textarea {
	width: 100%; box-sizing: border-box;
	background: #fff; color: var(--hre-slate);
	border: 1px solid var(--hre-line); border-radius: var(--hre-radius-input);
	padding: 13px 14px; min-height: 48px;
	font: 400 16px/1.4 'Inter', sans-serif;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.hre-form textarea { min-height: 140px; resize: vertical; }
.hre-form :where(input, select, textarea):focus {
	border-color: var(--hre-blue); box-shadow: 0 0 0 3px rgba(13,106,176,.14); outline: none;
}
.hre-form ::placeholder { color: #94a0ac; }

.hre-form input[type=submit], .hre-form .wpcf7-submit {
	background: var(--hre-gold); color: var(--hre-slate);
	border: 0; border-radius: var(--hre-radius-btn);
	font: 600 16px/1 'Inter', sans-serif;
	padding: 16px 32px; min-height: 48px; cursor: pointer;
	transition: background .15s ease;
}
.hre-form input[type=submit]:hover, .hre-form .wpcf7-submit:hover { background: var(--hre-gold-dark); }
.hre-form .wpcf7-spinner { margin-left: 10px; }
.hre-form .wpcf7-not-valid-tip { color: #B3261E; font-size: 13px; margin-top: 4px; }
.hre-form .wpcf7-response-output {
	border-radius: var(--hre-radius-input); border-width: 1px; margin: 16px 0 0; padding: 12px 14px; font-size: 15px;
}
.hre-form .hre-consent { font-size: 14px; line-height: 1.5; color: var(--hre-slate-mid); }
.hre-sec--dark .hre-form .hre-consent, .hre-sec--green .hre-form .hre-consent { color: rgba(255,255,255,.75); }
.hre-form .hre-consent .wpcf7-list-item { margin: 0; }

.hre-formcard {
	background: #fff; border: 1px solid var(--hre-line);
	border-radius: var(--hre-radius-card); padding: 32px !important;
}
@media (max-width: 767px) { .hre-formcard { padding: 22px !important; } }

/* contact details block sits beside the form and matches its height */
.hre-contact-card {
	background: var(--hre-slate); color: #fff;
	border-radius: var(--hre-radius-card); padding: 32px !important;
	display: flex !important; flex-direction: column; gap: 22px; height: 100%;
}
.hre-contact-card :where(h2,h3,h4,p,a,div,span) { color: #fff; }
.hre-contact-card a:hover { color: var(--hre-gold); }
.hre-contact-item__label {
	font: 600 13px/1 'Inter', sans-serif; letter-spacing: .07em; text-transform: uppercase;
	color: var(--hre-gold); margin-bottom: 6px;
}
.hre-contact-item__value { font-size: 17px; line-height: 1.5; }
.hre-map { border-radius: var(--hre-radius-card); overflow: hidden; line-height: 0; }
.hre-map iframe { width: 100%; height: 420px; border: 0; display: block; }
@media (max-width: 767px) { .hre-map iframe { height: 300px; } }

/* ------------------------------------------------------------ CTA band */

.hre-ctaband { background: var(--hre-slate); }
.hre-ctaband--gold { background: var(--hre-gold); }
.hre-ctaband--gold :where(h2,h3,p) { color: var(--hre-slate) !important; }

/* ------------------------------------------------------------ styleguide only */

.hre-sg-swatch { border-radius: var(--hre-radius-card); overflow: hidden; border: 1px solid var(--hre-line); }
.hre-sg-chip { height: 88px; }
.hre-sg-meta { padding: 12px 14px; font: 500 13px/1.5 'Inter', sans-serif; background: #fff; color: var(--hre-slate); }
.hre-sg-meta b { display: block; font-weight: 600; }
.hre-sg-row { border-top: 1px solid var(--hre-line); padding-top: 20px; margin-top: 20px; }
.hre-sg-note { font: 400 14px/1.6 'Inter', sans-serif; color: var(--hre-slate-mid); }

/* ------------------------------------------------------------ 404 */

.hre-404__code { font: 700 clamp(88px, 18vw, 180px)/0.9 'Inter Tight', sans-serif; color: var(--hre-gold); }

/* ------------------------------------------------------------ buttons, the one rule */

/* The base rule carries border-style and border-width only. It must NOT use the `border`
   shorthand: the shorthand would reset border-color after the variant rules set it, and
   with a second `a.elementor-button` selector in the group it would also outrank them on
   specificity. That combination is what made the outline and ghost buttons render as bare
   text. Width is 2px because Chromium snaps a 1.5px border down to 1px at DPR 1. */
body.hre .hre-btn .elementor-button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 13px 28px;
	border-radius: var(--hre-radius-btn);
	border-style: solid !important;
	border-width: 2px !important;
	border-color: transparent !important;
	font: 600 16px/1.2 'Inter', sans-serif;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
body.hre .hre-btn--primary .elementor-button {
	background-color: var(--hre-gold) !important; border-color: var(--hre-gold) !important; color: var(--hre-slate) !important;
}
body.hre .hre-btn--primary .elementor-button:hover,
body.hre .hre-btn--primary .elementor-button:focus {
	background-color: var(--hre-gold-dark) !important; border-color: var(--hre-gold-dark) !important;
}
body.hre .hre-btn--outline .elementor-button {
	background-color: transparent !important; border-color: var(--hre-slate) !important; color: var(--hre-slate) !important;
}
body.hre .hre-btn--outline .elementor-button:hover,
body.hre .hre-btn--outline .elementor-button:focus {
	background-color: var(--hre-slate) !important; border-color: var(--hre-slate) !important; color: #fff !important;
}
body.hre .hre-btn--ghost .elementor-button {
	background-color: transparent !important; border-color: rgba(255,255,255,.7) !important; color: #fff !important;
}
body.hre .hre-btn--ghost .elementor-button:hover,
body.hre .hre-btn--ghost .elementor-button:focus {
	background-color: #fff !important; border-color: #fff !important; color: var(--hre-slate) !important;
}
body.hre .hre-btn .elementor-button-wrapper { line-height: 0; }
@media (max-width: 400px) {
	body.hre .hre-ctapair { width: 100%; }
	body.hre .hre-ctapair > .elementor-widget { width: 100%; }
	body.hre .hre-ctapair .elementor-button { width: 100%; }
}

/* Brickz rs-button, shown on the styleguide, wearing the same shape */
body.hre .hre-btn-rs a, body.hre .hre-btn-rs .rs-button { border-radius: var(--hre-radius-btn); min-height: 48px; }

/* headings keep the kit's letter spacing even where a Brickz widget resets it */
body.hre :where(h1, h2, h3, h4, h5, h6) { letter-spacing: -0.015em; }
body.hre .hre-sec > .e-con-inner > .elementor-widget-heading h2 { margin-top: 0; }

/* the eyebrow is a div, so it needs its own reset */
body.hre .hre-eyebrow .elementor-heading-title {
	font: 600 13px/18px 'Inter', sans-serif;
	letter-spacing: .08em; text-transform: uppercase; color: var(--hre-green);
}
body.hre .hre-sec--dark .hre-eyebrow .elementor-heading-title,
body.hre .hre-sec--green .hre-eyebrow .elementor-heading-title,
body.hre .hre-hero .hre-eyebrow .elementor-heading-title { color: var(--hre-gold); }

/* text-editor rhythm */
body.hre .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
body.hre .elementor-widget-text-editor p { margin-bottom: 1em; }

/* ------------------------------------------------------------ header layout */

body.hre .hre-hdr { flex-wrap: nowrap !important; min-height: var(--hre-hdr-h); }
body.hre .hre-hdr > .e-con-inner { min-height: var(--hre-hdr-h); align-items: center; flex-wrap: nowrap; }
/* Elementor gives every container 10px of vertical padding by default; in an 80px bar that is 20px of nothing */
body.hre .hre-hdr__logo, body.hre .hre-hdr__nav, body.hre .hre-hdr__actions { min-height: var(--hre-hdr-h); height: var(--hre-hdr-h); padding-top: 0 !important; padding-bottom: 0 !important; }
/* the logo and nav cells are column flex containers, so vertical centring is justify-content */
body.hre .hre-hdr__logo, body.hre .hre-hdr__nav { justify-content: center !important; }
body.hre .rstb-header .rstb-transparent, body.hre .rstb-header .rstb-sticky { padding-block: 0 !important; }
/* the menu items used to carry 20px of vertical padding each, which is what made the bar 121px */
body.hre .hre-nav .primary-menu > li, body.hre .hre-nav .primary-menu > li > a,
body.hre .hre-nav .primary-menu > li > .menu-item-link { padding-top: 0 !important; padding-bottom: 0 !important; }
body.hre .hre-nav .primary-menu > li > a, body.hre .hre-nav .primary-menu > li > .menu-item-link { min-height: var(--hre-hdr-h); display: inline-flex; align-items: center; }
body.hre .hre-nav, body.hre .hre-nav .elementor-widget-container, body.hre .hre-nav .rstb-nav-menu-wrapper, body.hre .hre-nav .primary-menu { min-height: var(--hre-hdr-h); }
body.hre .hre-nav .primary-menu { align-items: center; }
body.hre .hre-hdr__logo { flex: 0 0 auto !important; width: auto !important; }
body.hre .hre-hdr__nav { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
body.hre .hre-hdr__actions { flex: 0 0 auto !important; width: auto !important; flex-wrap: nowrap !important; }
body.hre .hre-hdr-phone { white-space: nowrap; }
body.hre .hre-hdr-cta .elementor-button { padding: 11px 20px; min-height: 44px; font-size: 15px; white-space: nowrap; }
body.hre .hre-nav .primary-menu > li > a { white-space: nowrap; }
@media (max-width: 1024px) {
	body.hre .hre-hdr-phone { display: none; }
}
@media (max-width: 600px) {
	body.hre .hre-hdr-cta { display: none; }
}

/* the hero has to clear the transparent header, then centre what is left */
body.hre .hre-hero { padding-top: calc(var(--hre-hdr-h) + 40px) !important; padding-bottom: 64px !important; }
@media (max-width: 767px)  { body.hre .hre-hero { padding-top: calc(var(--hre-hdr-h) + 24px) !important; padding-bottom: 40px !important; } }
body.hre .hre-hero__inner { max-width: 760px; }
body.hre .hre-hero--home .hre-hero__inner { max-width: 820px; }

/* brand panel, the fallback when a photo has not landed yet */
body.hre .hre-brandpanel {
	display: flex; align-items: center; justify-content: center;
	height: 100%; min-height: 320px;
	background: linear-gradient(140deg, var(--hre-slate) 0%, var(--hre-slate-deep) 60%, var(--hre-green-deep) 100%);
	border-radius: var(--hre-radius-card);
}
body.hre .hre-brandpanel img { width: 120px; height: auto; opacity: .92; }

/* the mobile drawer */
body.hre .hre-drawer-nav ul { list-style: none; margin: 0; padding: 0; }
body.hre .hre-drawer-nav li { border-bottom: 1px solid var(--hre-line); }
body.hre .hre-drawer-nav a {
	display: block; padding: 13px 2px; min-height: 44px; box-sizing: border-box;
	font: 500 16px/1.4 'Inter', sans-serif; color: var(--hre-slate);
}
body.hre .hre-drawer-nav a:hover { color: var(--hre-blue); }
body.hre .hre-drawer-contact { display: flex; flex-direction: column; gap: 6px; }
body.hre .hre-drawer-contact a { font: 600 16px/1.5 'Inter', sans-serif; color: var(--hre-slate); min-height: 28px; }
body.hre .hre-drawer-contact p { font-size: 15px; color: var(--hre-slate-mid); margin: 4px 0 0; }
body.hre .hre-drawer .elementor-button { width: 100%; }

/* the primary menu must never wrap onto a second line */
body.hre .hre-nav .primary-menu {
	flex-wrap: nowrap !important;
	justify-content: flex-end;
}
body.hre .hre-nav .primary-menu > li > .menu-item-link { white-space: nowrap; }
body.hre .hre-hdr__nav { justify-content: flex-end !important; }
body.hre .hre-hdr__logo img { height: 44px !important; width: auto !important; max-width: none; }
@media (max-width: 1366px) {
	body.hre .hre-nav .primary-menu > li > .menu-item-link { font-size: 14px; }
	body.hre .hre-nav .primary-menu > li { margin: 0 !important; }
	body.hre .hre-nav .primary-menu > li > a { margin: 0 9px !important; }
	body.hre .hre-hdr-cta .elementor-button { padding: 10px 16px; font-size: 14px; }
}
@media (max-width: 1280px) {
	body.hre .hre-hdr-phone { display: none; }
}
/* the drawer toggle is a real target and sits square next to the CTA */
body.hre .hre-drawer-toggle .rstb-offcanvas-toggle,
body.hre .hre-drawer-toggle button { min-width: 46px; min-height: 46px; }

/* the header sits over the top of the hero, so that band has to stay dark enough for
   white type and the reversed logo no matter what the photograph is doing up there */
body.hre .hre-hero::after {
	background: linear-gradient(180deg,
		rgba(20,28,37,.92) 0%,
		rgba(22,31,41,.74) 18%,
		rgba(27,37,48,.60) 46%,
		rgba(20,28,37,.88) 100%);
}

/* the header is boxed to the same --hre-max / --hre-gutter box as every section (see the
   width system at the top of this file), so its edges are the section edges. */
@media (max-width: 1366px) { body.hre .hre-hdr__logo img { height: 40px !important; } }
@media (max-width: 767px)  { body.hre .hre-hdr__logo img { height: 36px !important; } }
body.hre .hre-nav .primary-menu > li > .menu-item-link { padding-inline: 0 !important; }

/* ------------------------------------------------------------ touch targets */

/* On a phone every link that is a navigation choice rather than a word inside a
   sentence gets a 44px target. Inline links inside body copy keep their line height,
   because padding them out would break the paragraph. */
@media (max-width: 767px) {
	body.hre .hre-card__cta a,
	body.hre .hre-footer li a,
	body.hre .hre-footer__legal a,
	body.hre .hre-contact-item__value a,
	body.hre .hre-drawer-contact a,
	body.hre .hre-crumbs a,
	body.hre .hre-crumbs span[aria-current] {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	body.hre .hre-footer li { margin-bottom: 0; }
	body.hre .hre-footer__links ul { margin-bottom: 0; }
	body.hre .hre-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
	body.hre .hre-crumbs li { display: inline-flex; align-items: center; }
	/* a paragraph link still needs to be comfortably tappable */
	body.hre .hre-consent a, body.hre .hre-prose p a, body.hre .elementor-widget-text-editor p a {
		padding-block: 6px;
	}
}

/* breadcrumbs are a list, so make them one on every width */
body.hre .hre-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
body.hre .hre-crumbs li { display: inline-flex; align-items: center; }

/* the focus ring has to win against the theme's own :focus rules */
body.hre a:focus-visible,
body.hre button:focus-visible,
body.hre input:focus-visible,
body.hre select:focus-visible,
body.hre textarea:focus-visible,
body.hre [tabindex]:focus-visible,
body.hre .elementor-button:focus-visible {
	outline: 2px solid var(--hre-blue) !important;
	outline-offset: 2px !important;
	border-radius: 3px;
}
body.hre .hre-sec--dark a:focus-visible,
body.hre .hre-sec--green a:focus-visible,
body.hre .hre-hero a:focus-visible,
body.hre .rstb-transparent a:focus-visible,
body.hre .hre-footer a:focus-visible {
	outline-color: var(--hre-gold) !important;
}

/* the consent checkbox line carries a link to the privacy policy, and it has to be tappable */
body.hre .hre-consent a { display: inline-block; padding-block: 11px; }
body.hre .hre-footer__area { font-size: 15px; color: rgba(255,255,255,.7); margin: 10px 0 0; }

/* ------------------------------------------------------------ links in copy */

/* Brickz leaves anchors at the theme's inherited colour, which is white on some surfaces.
   A link inside a sentence has to be visible and has to look like a link. */
body.hre .elementor-widget-text-editor a,
body.hre .hre-prose a,
body.hre .hre-consent a,
body.hre .hre-bullets a {
	color: var(--hre-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.hre .elementor-widget-text-editor a:hover,
body.hre .hre-prose a:hover,
body.hre .hre-consent a:hover { color: var(--hre-slate); }
body.hre .hre-sec--dark .elementor-widget-text-editor a,
body.hre .hre-sec--green .elementor-widget-text-editor a,
body.hre .hre-hero .elementor-widget-text-editor a { color: var(--hre-gold); }

/* the consent line is a checkbox and a sentence, so it has to sit on one baseline */
body.hre .hre-consent .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; }
body.hre .hre-consent input[type=checkbox] { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--hre-green); }
body.hre .hre-consent .wpcf7-list-item-label { line-height: 1.5; }
body.hre .hre-consent a { padding-block: 0; }

/* the details card keeps its note at the foot so the column does not read as half empty */
body.hre .hre-contact-card .hre-contact-note { margin-top: auto !important; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
body.hre .hre-contact-card > .elementor-widget:nth-last-child(1) { margin-top: auto; }

/* the call button, phones only. The number in full needs room; the icon never does. */
body.hre .hre-hdr-call {
	display: none;
	align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 6px;
	border: 1.5px solid transparent;
}
body.hre .hre-hdr--light .hre-hdr-call { border-color: rgba(255,255,255,.4); color: #fff; }
body.hre .hre-hdr--solid .hre-hdr-call { border-color: var(--hre-line); color: var(--hre-slate); }
body.hre .hre-hdr-call:hover { border-color: var(--hre-gold); color: var(--hre-gold); }
@media (max-width: 600px) {
	body.hre .hre-hdr-call { display: inline-flex; }
}

/* ------------------------------------------------------------ gallery, Phase 5
   One HTML widget per gallery: filter chips, a 4:3 tile grid and a caption line. Uniform
   tiles, so equal height is a property of the aspect ratio rather than a measurement to
   chase. Filtering and the lightbox are in hre.js, no library. Never more than four across,
   the same rule as the card grids. */
.hre-gal { width: 100%; }
.hre-gal__filters {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 32px;
}
.hre-gal__chip {
	min-height: 44px; padding: 10px 18px; border-radius: 100px;
	border: 2px solid var(--hre-line); background: #fff; color: var(--hre-slate);
	font: 600 14px/1 'Inter', sans-serif; letter-spacing: .04em; text-transform: uppercase;
	cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.hre-gal__chip:hover { border-color: var(--hre-slate); }
.hre-gal__chip:focus-visible { outline: 2px solid var(--hre-blue); outline-offset: 2px; }
.hre-gal__chip[aria-pressed="true"] { background: var(--hre-slate); border-color: var(--hre-slate); color: #fff; }
.hre-gal__grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--hre-gap);
	align-items: stretch;
}
.hre-sec--gallery .hre-gal--3 .hre-gal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hre-gal__tile {
	margin: 0; min-width: 0; display: flex; flex-direction: column;
	background: #fff; border: 1px solid var(--hre-line); border-radius: var(--hre-radius-card);
	overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hre-gal__tile[hidden] { display: none; }
.hre-gal__tile:hover, .hre-gal__tile:focus-within {
	border-color: var(--hre-gold); box-shadow: 0 10px 28px rgba(36,48,60,.09); transform: translateY(-2px);
}
.hre-gal__link { display: block; line-height: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--hre-surface); }
.hre-gal__link:focus-visible { outline: 2px solid var(--hre-blue); outline-offset: -2px; }
.hre-gal__link img {
	width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
	transition: transform .25s ease;
}
.hre-gal__tile:hover img { transform: scale(1.03); }
.hre-gal__cap {
	font: 500 14px/1.3 'Inter', sans-serif; color: var(--hre-slate);
	padding: 12px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hre-gal__empty { text-align: center; color: var(--hre-slate-mid); margin: 24px 0 0; }
.hre-gal__empty[hidden] { display: none; }
@media (max-width: 1024px) {
	.hre-gal__grid, .hre-sec--gallery .hre-gal--3 .hre-gal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.hre-gal__grid, .hre-sec--gallery .hre-gal--3 .hre-gal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.hre-gal__cap { font-size: 13px; padding: 10px 12px; }
	.hre-gal__filters { gap: 8px; margin-bottom: 24px; }
	.hre-gal__chip { padding: 10px 14px; font-size: 13px; }
}

/* lightbox: a native dialog, opened by hre.js from any gallery tile */
.hre-lb { border: 0; padding: 0; margin: auto; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.hre-lb::backdrop { background: rgba(27, 37, 48, .94); }
.hre-lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hre-lb__img {
	display: block; max-width: min(92vw, 1400px); max-height: 82vh; width: auto; height: auto;
	object-fit: contain; border-radius: var(--hre-radius-card); background: #000;
}
.hre-lb__cap { color: #fff; font: 500 15px/1.4 'Inter', sans-serif; text-align: center; margin: 0; padding: 0 64px; }
.hre-lb__btn {
	position: fixed; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.14); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; padding: 0;
	transition: background-color .16s ease, color .16s ease;
}
.hre-lb__btn:hover, .hre-lb__btn:focus-visible { background: var(--hre-gold); color: var(--hre-slate); outline: none; }
.hre-lb__prev { left: 16px; }
.hre-lb__next { right: 16px; }
.hre-lb__close { top: 16px; right: 16px; transform: none; }
body.hre-lb-open { overflow: hidden; }
@media (max-width: 767px) {
	.hre-lb__img { max-width: 100vw; max-height: 70vh; border-radius: 0; }
	.hre-lb__cap { padding: 0 16px; font-size: 14px; }
	.hre-lb__btn { width: 44px; height: 44px; top: auto; bottom: 20px; transform: none; }
	.hre-lb__close { top: 12px; bottom: auto; right: 12px; }
	.hre-lb__prev { left: calc(50% - 60px); }
	.hre-lb__next { right: calc(50% - 60px); }
}