@charset "UTF-8";
/* ==========================================================================
   renovation911 — pages.css   (premium revision)

   Page-level composition: the home hero and its sections, the inner-page
   hero (full-bleed photograph), the action rail, the article + aside body,
   the hub grid, gallery, contact and 404.

   Cascade: tokens.css -> base.css -> layout.css -> chrome.css
            -> components.css -> PAGES.CSS
   ========================================================================== */


/* ==========================================================================
   1. HOME HERO
   Photograph, a directional navy wash, the headline column and a compact
   glass quote card. The trust strip floats over the hero's bottom edge.
   ========================================================================== */

.hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	background: var(--navy-deep);
	isolation: isolate;
}

.hero__media {
	grid-area: 1 / 1;
	position: relative;
	z-index: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--navy-soft);
}

.hero__media > picture {
	display: block;
	block-size: 100%;
}

.hero__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.hero__scrim {
	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
	background: var(--scrim-photo-band);
	pointer-events: none;
}

.hero__inner {
	grid-area: 2 / 1;
	position: relative;
	z-index: 2;
	padding-block: var(--sp-9) var(--sp-8);
}

.hero .trust {
	grid-area: 3 / 1;
	padding-block: 0 var(--sp-7);
}

.hero .trust .trust__list {
	margin-inline: auto;
}

.hero__copy > :first-child {
	margin-block-start: 0;
}

.hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: calc(var(--fs-3xl) * var(--h1-scale, 1));
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
	color: var(--surface);
	text-wrap: balance;
}

.hero__title[data-len="short"] { --h1-scale: var(--h1-scale-short); }
.hero__title[data-len="mid"]   { --h1-scale: var(--h1-scale-mid); }
.hero__title[data-len="long"]  { --h1-scale: var(--h1-scale-long); }

/* "We Provide" sits as a lighter line above the capitalised service list. */
.hero__title-lead {
	display: block;
	margin-block-end: .12em;
	font-weight: var(--fw-medium);
	font-size: .62em;
	letter-spacing: -0.01em;
	color: var(--on-navy);
}

.hero__title-main {
	display: block;
}

.hero__lead {
	margin: 0;
	max-inline-size: var(--measure-hero);
	font-size: var(--fs-md);
	line-height: var(--lh-lead);
	color: var(--on-navy);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-block-start: var(--sp-7);
}

.hero__panel {
	margin-block-start: var(--sp-8);
}

.hero__panel .quote-card {
	background: var(--glass);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border-color: rgba(255, 255, 255, .65);
	box-shadow: var(--sh-panel);
}

.hero__panel .quote-card .field {
	margin-block-end: var(--sp-3);
}

.hero__panel .quote-card__lead {
	margin-block-end: var(--sp-4);
}

@media (min-width: 900px) {

	.hero {
		grid-template-rows: 1fr auto;
		min-block-size: clamp(600px, 82vh, 860px);
	}

	.hero__media,
	.hero__scrim,
	.hero__inner {
		grid-area: 1 / 1;
	}

	.hero__media {
		aspect-ratio: auto;
		min-block-size: 0;
	}

	.hero .trust {
		grid-area: 2 / 1;
		margin-block-start: calc(-1 * var(--sp-9));
		padding-block: 0 0;
	}

	.hero__scrim {
		background-color: var(--scrim-flat);
		background-image: var(--scrim-angle);
	}

	.hero__inner {
		display: grid;
		grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
		gap: var(--grid-gap);
		align-items: center;
		padding-block: var(--sp-11) calc(var(--sp-11) + var(--sp-9));
	}

	.hero__copy {
		grid-column: 1 / 8;
		max-inline-size: 38rem;
	}

	.hero__panel {
		grid-column: 9 / -1;
		align-self: center;
		margin-block: 0;
	}
}

@media (min-width: 1200px) {

	.hero__copy {
		grid-column: 1 / 8;
	}

	.hero__panel {
		grid-column: 9 / -1;
	}
}

@media (min-width: 1500px) {

	.hero__inner {
		padding-block: var(--sp-12) calc(var(--sp-12) + var(--sp-9));
	}
}


/* ==========================================================================
   2. HOME — INTRO, SERVICES, VALUE + REVIEW
   ========================================================================== */

/* The intro band sits directly under the floating trust strip. */
.site-main--home .hero + .quote-band--light {
	padding-block-start: var(--sp-10);
}

.home-value__inner {
	display: grid;
	gap: var(--grid-gap);
	align-items: center;
}

.home-value__text p {
	margin: 0;
	max-inline-size: var(--measure-lead);
	font-size: var(--fs-md);
	line-height: var(--lh-lead);
	color: var(--ink);
}

.home-value__text p::first-letter {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: 1.15em;
	color: var(--navy);
}

.home-value__aside {
	display: flex;
}

@media (min-width: 900px) {

	.home-value__inner {
		grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
	}

	.home-value__text  { grid-column: 1 / 8; }
	.home-value__aside { grid-column: 9 / -1; }
}


/* ==========================================================================
   3. HOME — GALLERY TEASER
   ========================================================================== */

.gallery-teaser .gallery--teaser {
	columns: auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
}

.gallery-teaser .gallery__item {
	margin: 0;
}

.gallery-teaser .gallery__figure {
	aspect-ratio: 4 / 3;
}

.gallery-teaser .gallery__figure > picture,
.gallery-teaser .gallery__img {
	block-size: 100%;
}

.gallery-teaser .gallery__img {
	object-fit: cover;
}

@media (min-width: 900px) {

	.gallery-teaser .gallery--teaser {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--sp-5);
	}

	/* Two editorial moments: the first and sixth tiles span two columns. */
	.gallery-teaser .gallery__item:nth-child(1),
	.gallery-teaser .gallery__item:nth-child(6) {
		grid-column: span 2;
	}

	.gallery-teaser .gallery__item:nth-child(1) .gallery__figure,
	.gallery-teaser .gallery__item:nth-child(6) .gallery__figure {
		aspect-ratio: 8 / 3;
	}
}


/* ==========================================================================
   4. INNER PAGE HERO
   A navy band. When the page carries a photograph the aside becomes the
   right half of the band, fading into the navy behind the headline. When
   it carries a form or a contact card the aside is a card on the right.
   ========================================================================== */

.page-hero {
	position: relative;
	overflow: hidden;
	background: var(--grad-navy);
	color: var(--on-navy);
	padding-block: var(--sp-7) var(--sp-9);
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: auto auto -40% -10%;
	inline-size: 420px;
	block-size: 420px;
	border-radius: 50%;
	background: radial-gradient(circle at center, rgba(36, 99, 209, .28) 0%, rgba(36, 99, 209, 0) 64%);
	pointer-events: none;
}

.page-hero__inner {
	position: relative;
	z-index: 2;
}

.page-hero__grid {
	display: grid;
	gap: var(--sp-7);
}

.page-hero__copy > :first-child {
	margin-block-start: 0;
}

.page-hero .eyebrow {
	color: var(--accent-bright);
}

.page-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: calc(var(--fs-2xl) * var(--h1-scale, 1));
	line-height: var(--lh-h1-page);
	letter-spacing: var(--ls-h1);
	color: var(--surface);
	text-wrap: balance;
}

.page-hero__title[data-len="short"] { --h1-scale: var(--h1-scale-short); }
.page-hero__title[data-len="mid"]   { --h1-scale: var(--h1-scale-mid); }
.page-hero__title[data-len="long"]  { --h1-scale: var(--h1-scale-long); }

.page-hero__lead {
	margin: 0;
	max-inline-size: var(--measure-hero);
	font-size: var(--fs-md);
	line-height: var(--lh-lead);
	color: var(--on-navy);
}

.page-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-block-start: var(--sp-7);
}

/* Buttons inside the navy hero take the on-dark treatment automatically. */
.page-hero .btn--call {
	background: var(--surface);
	color: var(--navy);
	box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
}

.page-hero .btn--call:hover,
.page-hero .btn--call:focus-visible {
	background: var(--accent-bright);
	color: var(--navy-deep);
}

.page-hero .btn--secondary {
	border-color: var(--border-on-dark);
	color: var(--surface);
}

.page-hero .btn--secondary:hover,
.page-hero .btn--secondary:focus-visible {
	background: rgba(255, 255, 255, .1);
	border-color: var(--surface);
	color: var(--surface);
}

.page-hero .breadcrumb__item,
.page-hero .breadcrumb__current {
	color: var(--on-navy);
}

.page-hero .breadcrumb__link {
	color: var(--surface);
}

.page-hero .breadcrumb__link:hover,
.page-hero .breadcrumb__link:focus-visible {
	color: var(--accent-bright);
}

.page-hero .breadcrumb__item + .breadcrumb__item::before {
	background: var(--accent-bright);
}

/* --- the aside: photograph ------------------------------------------------ */

.page-hero__aside {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.page-hero__aside .frame {
	border-radius: var(--r-3);
	box-shadow: var(--sh-panel);
}

.page-hero__aside .frame > picture,
.page-hero__aside .frame__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.page-hero__aside .frame {
	aspect-ratio: 16 / 10;
}

@media (min-width: 900px) {

	.page-hero {
		padding-block: var(--sp-8) var(--sp-11);
	}

	.page-hero__grid {
		grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
		gap: var(--grid-gap);
		align-items: center;
	}

	.page-hero__copy {
		grid-column: 1 / 7;
		padding-block: var(--sp-6);
	}

	.page-hero__aside {
		grid-column: 8 / -1;
	}

	/* 900–1199px: the photograph stays a framed card inside the grid. It only
	   bleeds to the band edge at 1200px and up, where there is room for the
	   copy column to clear it (below that the two collide — measured). */
	.page-hero__aside > .frame {
		aspect-ratio: 4 / 3;
	}
}

@media (min-width: 1200px) {

	/* A photograph bleeds to the band's right edge and fades into the navy.
	   The aside is positioned against .page-hero, not the padded inner
	   wrapper, so the photograph fills the band's full height instead of
	   stopping short of its padding. */
	.page-hero:has(.page-hero__aside > .frame) .page-hero__inner {
		position: static;
	}

	.page-hero:has(.page-hero__aside > .frame) .breadcrumb,
	.page-hero:has(.page-hero__aside > .frame) .page-hero__copy {
		position: relative;
		z-index: 2;
	}

	.page-hero__aside:has(> .frame) {
		position: absolute;
		inset: 0 0 0 auto;
		inline-size: 52%;
		z-index: 0;
	}

	.page-hero__aside:has(> .frame) .frame {
		block-size: 100%;
		aspect-ratio: auto;
		border-radius: 0;
		box-shadow: none;
		background: transparent;
	}

	.page-hero__aside:has(> .frame)::after {
		content: "";
		position: absolute;
		inset: 0;
		background:
			linear-gradient(90deg, #0C2A4D 0%, #0C2A4D 22%, rgba(12, 42, 77, .70) 46%, rgba(12, 42, 77, .18) 78%, rgba(12, 42, 77, .05) 100%),
			linear-gradient(180deg, rgba(7, 27, 53, .05) 0%, rgba(7, 27, 53, .35) 100%);
		pointer-events: none;
	}

	.page-hero:has(.page-hero__aside > .frame) {
		min-block-size: 500px;
	}

	/* The copy column stops short of the photograph's solid edge, so a long
	   sub-line can never run underneath it. */
	.page-hero:has(.page-hero__aside > .frame) .page-hero__copy {
		grid-column: 1 / 7;
		max-inline-size: 34rem;
	}
}

/* Below 900px the photograph becomes a framed band under the copy. */
@media (max-width: 899.98px) {

	.page-hero__aside:has(> .frame) {
		order: -1;
	}
}


/* ==========================================================================
   5. ACTION RAIL — the slim promise line under the inner hero
   ========================================================================== */

.action-rail {
	position: relative;
	z-index: 3;
	background: var(--surface);
	border-block-end: 1px solid var(--line);
}

.action-rail__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3) var(--sp-6);
	min-block-size: 72px;
	padding-block: var(--sp-3);
}

.action-rail__promise {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--ink-muted);
}

.action-rail__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-5);
}

.action-rail__phone {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-base);
	color: var(--navy);
	text-decoration: none;
}

.action-rail__phone:hover,
.action-rail__phone:focus-visible {
	color: var(--blue);
}


/* ==========================================================================
   6. ARTICLE + ASIDE — inner page body
   ========================================================================== */

.article {
	position: relative;
	background: var(--surface);
}

.article__inner {
	display: grid;
	gap: var(--sp-8);
	padding-block: var(--section-y);
}

.article__body {
	min-width: 0;
}

.article__aside {
	min-width: 0;
}

@media (min-width: 900px) {

	.article__inner {
		grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
		gap: var(--grid-gap);
		align-items: start;
	}

	.article__body {
		grid-column: 1 / span 8;
		padding-inline-end: var(--sp-6);
	}

	.article__aside {
		grid-column: 9 / -1;
	}

	.article__aside > * {
		position: sticky;
		top: calc(var(--header-h) + var(--sp-6));
	}

	.article__body:only-child {
		grid-column: 1 / -1;
		max-width: var(--measure);
		padding-inline-end: 0;
	}
}

@media (min-width: 1200px) {

	.article__body {
		grid-column: 1 / span 8;
		padding-inline-end: var(--sp-9);
	}

	.article__aside {
		grid-column: 9 / -1;
	}
}

.article--thin .article__inner {
	padding-block: var(--section-y) var(--sp-9);
}

@media (min-width: 900px) {

	/* Un-stuck on thin pages, but still a positioned box: the card's absolute
	   gold top bar must stay inside the card, not escape to .article. */
	.article--thin .article__aside > * {
		position: relative;
		top: auto;
	}

	.article--thin .article__body:only-child {
		grid-column: 1 / -1;
		width: var(--container-prose);
		max-width: 100%;
		margin-inline: auto;
	}
}

/* Long-form (area landings): a slightly narrower measure, larger leading. */
.article--longform .article__body {
	font-size: var(--fs-base);
}

/* The hub's centred body. */
.article .container--prose .article__body {
	max-width: none;
}

.article .container--prose .article__body p {
	font-size: var(--fs-md);
	line-height: var(--lh-lead);
	color: var(--ink-muted);
	max-inline-size: none;
	text-align: center;
}


/* ==========================================================================
   7. SERVICE HUB GRID + RELATED
   ========================================================================== */

.related__grid,
.card-grid {
	inline-size: 100%;
}

.related .section-head {
	max-width: var(--measure-lead);
}

.related__all {
	margin-block-start: var(--sp-8);
}


/* ==========================================================================
   8. GALLERY PAGE
   ========================================================================== */

.gallery__status {
	margin: 0;
}


/* ==========================================================================
   9. CONTACT PAGE
   ========================================================================== */

.contact {
	background: var(--surface);
}

.contact__grid {
	display: grid;
	gap: var(--sp-8);
	padding-block: var(--section-y);
}

.contact__form,
.contact__details {
	min-width: 0;
}

@media (min-width: 900px) {

	.contact__grid {
		grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
		gap: var(--grid-gap);
		align-items: start;
	}

	.contact__form {
		grid-column: 1 / span 6;
	}

	.contact__details {
		grid-column: 8 / -1;
	}
}


/* ==========================================================================
   10. 404
   ========================================================================== */

.error-404 .article__body {
	text-align: center;
}


/* ==========================================================================
   11. SECTION BANDS — soft tints and the deep band
   ========================================================================== */

.section--soft {
	background: var(--navy-soft);
}

.section--alt {
	background: var(--surface-alt);
}

.section--deep {
	background: var(--grad-navy);
}

/* Section heads on the home page are centred and generous. */
.site-main--home .section--center .section-head {
	max-width: 46rem;
}

/* --- premium pass addenda ---------------------------------------------- */

.contact__grid {
	padding-block: var(--sp-10) var(--section-y);
}

/* The hub lead line ("Click on service to find out more.") */
.article .article__body > p:first-child:only-of-type {
	text-align: center;
}