/* ==========================================================================
ConstructCo — page components

Shared UI for the restructured pages: the service group bar and pill nav that
replaced the old left-hand rail, card grids for hubs and case studies, and the
editorial content measure.

Uses the theme's own tokens throughout:
--primary-color   #2e2e22   --secondary-color  #9F8A38
--title-font-color #354e33  --body-font-color  #596a5a
========================================================================== */

/* ------------------------------------------------------- Outline button fix */

/*
* `.btn-line` was authored for dark sections: style.css gives it
* `background: none` with a `rgba(255,255,255,.35)` border, and coloring.css then
* fills it gold on :hover. On the site's light sections that combination renders
* an invisible button that only appears when hovered — which is what made the
* "View Details" buttons on /engineering-service/, /core-services/ and
* /specialties/ look missing.
*
* Light sections now get a real outline; dark contexts keep the light-on-dark
* treatment below. components.css loads after style.css and coloring.css, so
* equal-specificity rules here win.
*/
a.btn-line,
a.btn-line:visited,
a.btn-main.btn-line,
a.btn-main.btn-line:visited {
	background: transparent;
	color: var(--title-font-color);
	border: 1px solid var(--cc-border-strong);
}

a.btn-line:hover,
a.btn-line:focus,
a.btn-main.btn-line:hover,
a.btn-main.btn-line:focus {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--cc-on-accent);
}

#mainmenu .mega-menu .mega-col__title{
	font-size: 17px;
}

/* Dark surfaces: header, footer, dark sections and the closing CTA band. */
header a.btn-line,
footer a.btn-line,
.dark-scheme a.btn-line,
.section-dark a.btn-line,
.bg-dark-1 a.btn-line,
.bg-dark-2 a.btn-line,
.closing a.btn-line,
.text-light a.btn-line {
	color: var(--cc-on-accent);
	border-color: rgba(255, 255, 255, .45);
}

header a.btn-line:hover,
footer a.btn-line:hover,
.dark-scheme a.btn-line:hover,
.section-dark a.btn-line:hover,
.bg-dark-1 a.btn-line:hover,
.bg-dark-2 a.btn-line:hover,
.closing a.btn-line:hover,
.text-light a.btn-line:hover {
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--cc-on-accent);
}

/* ==========================================================================
Type scale — one source of truth for heading sizes

The theme shipped h2 at 52px globally and then overrode it to 36px inline on
contact, care, compliance and service pages, so the same element rendered at
two different sizes depending on the template. Components added to the site
then invented their own (30px, 32px, 25px, 24px). Six sizes for one element.

Every heading now resolves from the variables below. Change a value here and
it changes everywhere; do not set font-size on a heading in component CSS.
========================================================================== */

:root {
	/* --cc-h2 / --cc-h3 moved to css/cc-system.css :root, where they are one
	   clamped scale instead of a flat size plus two breakpoint overrides.
	   Redefining them here reintroduced the drift this block set out to fix. */
	--cc-title-sm: var(--cc-h4);   /* compact UI labels: card titles, rail headings */

	--cc-text: var(--cc-lede);   /* lead and intro copy inside components */
	--cc-text-sm: var(--cc-small); /* list items, card body */
	--cc-text-xs: var(--cc-small); /* nav pills, secondary labels */
	--cc-eyebrow: var(--cc-micro); /* uppercase eyebrows */

	/* --------------------------------------------------------------------------
	Spacing scale

	Measured before it was written: section padding was running at 100px, 120px,
	88.62px, 48px and 0; card padding at 20px 15px, 24px 24px 26px, 26px 34px,
	30px and 0 28px; grid gaps at 14px, 18px, 20px, 24px, 32px and 44px. None of
	it was a system, so nothing lined up between one section and the next.

	Six steps, 8px-based. Use these rather than typing a pixel value; if a value
	you need is not here, the answer is almost always the nearest step, not a new
	token.
	-------------------------------------------------------------------------- */

	--sp-1: 8px;
	--sp-2: 16px;
	--sp-3: 24px;
	--sp-4: 32px;
	--sp-5: 48px;
	--sp-6: 64px;

	/* Section rhythm. One value drives the space between every band on the site,
	   so changing the page's breathing room is a one-line edit. */
	--section-y:       clamp(56px, 6.5vw, 96px);   /* standard band */
	--section-y-tight: clamp(36px, 4vw, 56px);     /* a band that continues the one above it */

	/* Component interiors. Cards, panels and banners all draw from these. */
	--card-pad-y: var(--sp-3);
	--card-pad-x: 26px;
	--grid-gap:   var(--sp-3);
	--grid-gap-lg: var(--sp-4);

	/* The measure body copy is allowed to reach before it gets hard to read. */
	--measure: 68ch;

	/* The header is position:absolute over the page, so anything that starts at
	   the top of the document has to clear it deliberately. Measured at 120px
	   (43px topbar + nav); the extra step is breathing room, not guesswork. */
	--header-clearance: 120px;

	/* --------------------------------------------------------------------------
	Surface and line tokens

	The theme ships a full palette (--bg-light, --bg-color-odd, --bg-grey,
	--primary-color, --secondary-color) but no border or tint value, so component
	CSS had been generating its own: seventeen different rgba alphas across two
	hues for what are really four jobs. These four tokens cover them, and are
	derived from the theme's own colours rather than picked by eye.

	Gold for the selected state is the theme's existing convention, not a new
	choice — the original tab styling sets .nav .nav-link.active to
	background: var(--secondary-color). See pages.css.
	-------------------------------------------------------------------------- */

	--cc-surface:       var(--bg-light);                        /* #ffffff  cards, panels, pills */
	--cc-surface-sunk:  var(--bg-color-odd);                    /* #F4F4F4  subtle wells */
	--cc-border:        rgba(var(--primary-color-rgb), .14);    /* the one hairline */
	--cc-border-strong: rgba(var(--primary-color-rgb), .38);    /* outline buttons, emphasis */
	--cc-accent-tint:   rgba(var(--secondary-color-rgb), .10);  /* the one gold wash */
	--cc-accent-line:   rgba(var(--secondary-color-rgb), .45);  /* gold hairline */
	--cc-shadow:        0 16px 32px rgba(var(--primary-color-rgb), .12);
	--cc-on-accent:     #ffffff;                                /* text on gold or dark */

}

/* The two breakpoint steps are gone: the clamp() in cc-system.css interpolates
   between the same endpoints continuously, so there is nothing to switch. */

/* Applies to content headings and component headings alike. The theme's
specialised variants (h2.big, h2.name, h2.style-2 …) carry a class and so
still outrank this. */
h2 { font-size: var(--cc-h2); }
h3 { font-size: var(--cc-h3); }

/* ---------------------------------------------------- Service group context */

/*
* Two-column service page: a sticky rail of sibling services on the left, content
* on the right.
*
* The pills were originally placed above the article, which meant a reader had to
* scroll back to the top to switch pages. In the rail they stay reachable for the
* whole article. The rail is a fixed 300px so every pill is the same width, and
* each pill is locked to a single line — long service names ellipsis rather than
* wrapping, so the stack keeps one consistent rhythm. Full titles are preserved in
* the title attribute and read out by screen readers via aria-label.
*/
.svc-layout {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 52px;
	align-items: start;
}

@media (max-width: 1199px) {
	.svc-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 991px) {
	.svc-layout { grid-template-columns: 1fr; gap: 28px; }
}

/* header.smaller becomes position:fixed at ~60px tall once the page scrolls, so
the rail has to clear it. */
.svc-rail__inner {
	position: sticky;
	top: 86px;
}

@media (max-width: 991px) {
	.svc-rail__inner { position: static; top: auto; }
}

.svc-rail__label {
	font-family: var(--body-font);
	font-size: var(--cc-eyebrow);

	text-transform: capitalize;
	color: var(--body-font-color);

	margin-bottom: 15px;
}

.svc-rail__group {
	display: block;
	font-family: var(--title-font);
	font-weight: 500;
	font-size: 24px;
	line-height: 1.3;
	color: var(--title-font-color);
	margin-bottom: 8px;
}

.svc-rail__group:hover { color: var(--secondary-color); }

.svc-rail__flag {
	display: inline-block;
	font-family: var(--body-font);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--secondary-color);
	border: 1px solid var(--cc-accent-line);
	border-radius: 100px;
	padding: 3px 10px;
	margin-bottom: 16px;
}

/* --------------------------------------------------------------- The rails */

/*
* One rule set drives BOTH sidebar rails — the service-page rail (.svc-pill) and
* the About-page tab rail (.about-rail .nav-link). They are styled together
* deliberately: styling them separately is how they drifted apart before.
*
* Gold marks the selected state, which is the theme's own convention
* (.nav .nav-link.active uses var(--secondary-color) in the original tab CSS).
* Each pill is locked to one line so the stack keeps an even rhythm; long titles
* ellipsis and carry the full text in title/aria-label.
*/
.svc-pills,
.about-rail {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 14px 0 0;
	padding: 16px 0 0;
	border: 0;
	border-top: 1px solid var(--cc-border);
	list-style: none;
}

.about-rail .nav-item { width: 100%; }

.svc-pill,
.about-rail .nav-link {
	display: block;
	width: 100%;
	box-sizing: border-box;

	/* One line, always. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	font-family: var(--title-font);
	font-size: var(--cc-text-xs);
	font-weight: 500;
	line-height: 1.25;
	text-align: left;
	text-transform: none;
	color: var(--title-font-color);
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: 100px;
	padding: 11px 16px;
	margin: 0;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.svc-pill:hover,
.svc-pill:focus,
.about-rail .nav-link:hover,
.about-rail .nav-link:focus {
	color: var(--title-font-color);
	border-color: var(--secondary-color);
	background: var(--cc-accent-tint);
}

.svc-pill.is-active,
.svc-pill.is-active:hover,
.svc-pill.is-active:focus,
.about-rail .nav-link.active,
.about-rail .nav-link.active:hover,
.about-rail .nav-link.active:focus {
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--cc-on-accent);
	font-weight: 600;
}

/*
* Supporting trades read as subordinate through weight and colour only — same
* surface and border as every other pill, so the stack stays uniform.
*
* :not(.is-active) matters. Without it this rule sits after .is-active in the
* cascade at equal specificity and wins, so whenever the page you are ON is a
* trade page the selected pill kept the muted grey text on the gold fill and
* became unreadable. The selected state must always win.
*/
.svc-pill.is-trade:not(.is-active) {
	font-weight: 400;
	color: var(--body-font-color);
}

.svc-pill.is-trade:not(.is-active):hover { color: var(--title-font-color); }

/* Horizontal scroller on small screens, where a sticky rail makes no sense. */
@media (max-width: 991px) {
	.svc-pills {
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 6px;
		-webkit-overflow-scrolling: touch;
	}
	.svc-pill { width: auto; flex: 0 0 auto; }
}


/* ------------------------------------------------------------ Content measure */

/*
* Body copy fills its container, like every other block on the site.
*
* This previously capped at 860px and centred itself. On a wide viewport that
* left a large indent on the left and a short line that did not line up with the
* section below it — the container is already the site's measure, and a second
* narrower one inside it just reads as a mistake. The class now carries only
* typography; width comes from whatever column it sits in.
*/
.copy-measure {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.copy-measure h2 {
	margin-top: 42px;
	margin-bottom: 14px;
}

.copy-measure h3 {
	margin-top: 30px;
	margin-bottom: 10px;
	font-size: 20px;
}

.copy-measure > h2:first-child,
.copy-measure > h3:first-child { margin-top: 0; }

.copy-measure p { margin-bottom: 16px; }

.copy-measure ul,
.copy-measure ol {
	margin: 0 0 20px;
	padding-left: 20px;
}

.copy-measure li { margin-bottom: 8px; }

.copy-measure img {
	max-width: 100%;
	width:100%;
	height: auto;
	border-radius: 10px;
	margin: 8px 0 24px;
}


/* Editorial callout for constraints, notes and verification gates. */
.copy-note {
/* 	border-left: 3px solid var(--secondary-color); */
	background: var(--cc-accent-tint);
	padding: 16px 20px;
	margin: 0 0 24px;
	border-radius: 0 8px 8px 0;
}

.copy-note p:last-child { margin-bottom: 0; }

/* Anything still awaiting copy stays obvious in review. */
.copy-pending {
	border: 1px dashed var(--cc-border-strong);
	background: var(--cc-surface-sunk);
	color: var(--body-font-color);
	padding: 12px 16px;
	border-radius: 8px;
	font-size: var(--cc-text-sm);
}

/* ------------------------------------------------------------------- Cards */

.cc-cardgrid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cc-cardgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 991px) {
	.cc-cardgrid,
	.cc-cardgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
	.cc-cardgrid,
	.cc-cardgrid--2 { grid-template-columns: 1fr; }
}

.cc-card {
	display: flex;
	flex-direction: column;
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: 12px;
	overflow: hidden;
	height: 100%;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.cc-card:hover {
	border-color: var(--cc-accent-line);
	box-shadow: 0 16px 32px var(--cc-border);
	transform: translateY(-3px);
}

.cc-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cc-surface-sunk);
}

.cc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cc-card__body {
	padding: 22px 24px 24px;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.cc-card__eyebrow {
	font-family: var(--body-font);
	font-size: var(--cc-eyebrow);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--secondary-color);
	margin-bottom: 8px;
}

.svc-content .copy-measure h2{
	
}

.cc-card__title {
	font-family: var(--title-font);
	font-weight: 600;
	font-size: var(--cc-h3);
	line-height: 1.35;
	color: var(--title-font-color);
	margin: 0 0 10px;
}

.cc-card__title a { color: inherit; }
.cc-card__title a:hover { color: var(--secondary-color); }

.cc-card__text {
	font-size: 16px;
	line-height: 1.6;
	color: var(--body-font-color);
	margin-bottom: 16px;
}

.cc-card__list {
	list-style: none;
	padding: 0;
	margin: 0 0 16px;
}

.cc-card__list li {
	position: relative;
	padding-left: 16px;
	font-size: var(--cc-text-sm);
	line-height: 1.5;
	margin-bottom: 7px;
	color: var(--body-font-color);
}

.cc-card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--secondary-color);
}

.cc-card__list a { color: inherit; }
.cc-card__list a:hover { color: var(--secondary-color); }

.cc-card__link {
	margin-top: auto;
	font-family: var(--title-font);
	font-weight: 600;
	font-size: var(--cc-text-sm);
	color: var(--title-font-color);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.cc-card__link:hover { color: var(--secondary-color); }

/* ----------------------------------------------------------- Process / steps */

.cc-steps {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	counter-reset: cc-step;
	list-style: none;
	padding: 0;
	margin: 0;
}

@media (max-width: 991px) { .cc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .cc-steps { grid-template-columns: 1fr; } }

.cc-steps li {
	counter-increment: cc-step;
	border-top: 2px solid var(--secondary-color);
	padding-top: 14px;
}

.cc-steps li::before {
	content: "0" counter(cc-step);
	display: block;
	font-family: var(--title-font);
	font-size: var(--cc-eyebrow);
	letter-spacing: .1em;
	color: var(--secondary-color);
	margin-bottom: 6px;
}

.cc-steps strong {
	display: block;
	font-family: var(--title-font);
	font-weight: 600;
	font-size: var(--cc-text);
	line-height: 1.35;
	color: var(--title-font-color);
	margin-bottom: 6px;
}

.cc-steps span {
	font-size: var(--cc-text-xs);
	line-height: 1.55;
	color: var(--body-font-color);
}

/* --------------------------------------------------------------- Fact strip */

.cc-facts {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	background: var(--cc-border);
	border-radius: 12px;
	overflow: hidden;
}

@media (max-width: 767px) { .cc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cc-facts > div {
	background: var(--cc-surface);
	padding: 20px 22px;
}

.cc-facts dt {
	font-family: var(--body-font);
	font-size: var(--cc-eyebrow);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--secondary-color);
	margin-bottom: 6px;
	font-weight: 400;
}

.cc-facts dd {
	font-family: var(--title-font);
	font-weight: 600;
	font-size: var(--cc-title-sm);
	line-height: 1.35;
	color: var(--title-font-color);
	margin: 0;
}

/* --------------------------------------------------------------- Section head */

.cc-sechead { margin-bottom: 26px; }

.cc-sechead__eyebrow {
	font-family: var(--body-font);
	font-size: var(--cc-eyebrow);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--secondary-color);
	margin-bottom: 8px;
}

.cc-sechead p {
	color: var(--body-font-color);
	max-width: 760px;
	margin-bottom: 0;
}


/* ==========================================================================
Relocated out of inline <style> blocks in the templates below. Behaviour is
unchanged; these were global selectors already, so moving them to a
stylesheet only removes the duplicated inline payload from every response.
========================================================================== */

/* from footer.php */
/* Footer keeps its own darker tone, deliberately deeper than --bg-dark-1. */
footer { background: #202017; }

/* from footer.php */
.modal-content { padding-bottom:30px; }
.modal-body { max-height:500px; overflow-y: scroll; padding:30px; }

button.close,button.close:hover, button.close:focus{
	border: 0;
	background: none;
	font-size: 48px;
	color: var(--secondary-color);
}
header { max-height: 120px ;}
header.smaller { max-height: 60px ;}

header.header-mobile { max-height:100%; top:62px; }

#mobiletopbar {
	background:var(--primary-color);
	width: 100%;
	height: 65px;
	display: none;
}
#mobiletopbar.scrolled { display:none; }
#mainheader.scrolled { top:0; }
#mobiletopbar .container { height:65px; background:var(--primary-color); }
@media only screen and (max-width: 767px) {
	#mobiletopbar { display:block; }
	.mobilebanner { display:block !important; }
	.mobilebanner a.btn-main { margin-top:15px !important;  }
}

/* from single-services.php */
section#subheader:before {
	content: '';
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
#aboutTabDropdown {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: var(--secondary-color);
	color: var(--cc-on-accent);
	padding: 0.8rem 1rem;
	border-radius: 0.25rem;
	font-weight:600;
	border: none;
	width: 100%;
	font-size: 1.2rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='white' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.6rem auto;
}
#aboutTabDropdown {
	appearance: none;
	-webkit-appearance: none;
}
#aboutTabDropdown {
	white-space: normal !important;
	height: auto !important;
	line-height: 1.4;
}

#aboutTabDropdown option {
	white-space: normal !important;
}

/* from single-services.php */
.closing h3, .closing p { color: var(--cc-on-accent); }

/* -------------------------------------------------------- Insights articles */

.cc-pagination {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 34px;
}

.cc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-family: var(--title-font);
	font-size: 14px;
	color: var(--title-font-color);
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: 100px;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.cc-pagination .page-numbers:hover { border-color: var(--secondary-color); color: var(--secondary-color); }

.cc-pagination .page-numbers.current {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: var(--cc-on-accent);
}

/*
* .post-meta and .post-hero are gone. The published date is no longer printed on
* articles or cards — evergreen guidance should not carry a visible age — and the
* featured image is now the hero background rather than a second copy of itself
* directly below the header. The date is still emitted in Article schema and the
* sitemap, which is where search engines want it.
*/

/* Standfirst, moved out of the hero. It was four lines of small type over a
   photograph; as the opening line of the article it is actually read. */
.post-lead {
	font-size: 19px;
	line-height: 1.65;
	color: var(--title-font-color);
	margin: 0 0 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--cc-border);
}

@media (max-width: 767px) {
	.post-lead { font-size: 17px; margin-bottom: 22px; padding-bottom: 18px; }
}

.post-cta {
	margin-top: 40px;
	padding: 22px 24px;
	background: var(--cc-surface-sunk);
	border-left: 3px solid var(--secondary-color);
	border-radius: 0 10px 10px 0;
}

.post-cta p { margin: 0; }
.post-cta a { color: var(--secondary-color); font-weight: 600; }

/* ==========================================================================
Services hub — service line rows

The five service lines carry 8, 2, 1, 6 and 2 sub-pages. In an equal card grid
those heights can never balance, and there is no room for a description. Full
width alternating rows give every line the same weight regardless of how many
pages sit under it, room for imagery and a sentence, and keep all 23 sub-page
links visible on the page rather than hidden behind a hover menu.
========================================================================== */

/* Anchor nav — jump straight to a line without scrolling the whole page. */
.svcnav {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 34px;
	padding-top: 26px;
	border-top: 1px solid var(--cc-border);
}

.svcnav__item {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--title-font);
	font-size: var(--cc-text-xs);
	font-weight: 500;
	color: var(--title-font-color);
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: 100px;
	padding: 9px 16px;
	transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.svcnav__item:hover,
.svcnav__item:focus {
	border-color: var(--secondary-color);
	background: var(--cc-accent-tint);
	color: var(--title-font-color);
}

.svcnav__num {
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--secondary-color);
}

/* ------------------------------------------------------------------- Rows */

.svcline {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: 50px;
	
	align-items: center;
	padding: 50px 0;
	border-top: 1px solid var(--cc-border);
	/* Clears the fixed header when jumped to via the anchor nav. */
	scroll-margin-top: 92px;
}

.svcline:first-of-type { border-top: 0; padding-top: 0px; }
.cc-detail .mk-constraints{
	    margin-top: 30px;
}
/* Alternate the image side so the page does not read as a single column. */
.svcline--flip .svcline__media { order: 2; }

@media (max-width: 991px) {
	.svcline {
		grid-template-columns: 1fr;
		gap: 26px;
		padding: 40px 0;
	}
	.svcline--flip .svcline__media { order: 0; }
	.svcline__media { aspect-ratio: 16 / 9; }
}

.svcline__media {
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--cc-surface-sunk);
}

.svcline__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.svcline:hover .svcline__media img { transform: scale(1.03); }

.svcline__num {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--secondary-color);
	color: var(--cc-on-accent);
	font-family: var(--title-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	padding: 10px 16px;
	border-bottom-right-radius: 12px;
}

.svcline__body {
	align-self: center;
}

.svcline__flag {
	display: inline-block;
	font-family: var(--body-font);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--secondary-color);
	border: 1px solid var(--cc-accent-line);
	border-radius: 100px;
	padding: 4px 12px;
	margin-bottom: 12px;
}

.svcline__title {
	font-family: var(--title-font);
	font-weight: 600;
	line-height: 1.2;
	color: var(--title-font-color);
	margin: 0 0 12px;
}

.svcline__title a { color: inherit; }
.svcline__title a:hover { color: var(--secondary-color); }


.svcline__blurb {
	color: var(--body-font-color);
	font-size: var(--cc-text);
	line-height: 1.65;
	margin: 0 0 22px;
	max-width: 56ch;
}

/* Sub-page links in two columns: 8 items read as four tidy rows, 1 item still
looks deliberate. */
.svcline__links {
	display: block;

	gap: 0 15px;
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}

@media (max-width: 575px) { .svcline__links { grid-template-columns: 1fr; } }

.svcline__links li { margin: 0; }

.svcline__link {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-size: var(--cc-text-sm);
	line-height: 1.45;
	color: var(--body-font-color);
	padding: 9px 0;
	border-bottom: 1px solid var(--cc-border);
	transition: color .18s ease;
}

.svcline__link i {
	font-size: 10px;
	color: var(--secondary-color);
	flex: 0 0 auto;
}

.svcline__link:hover { color: var(--secondary-color); }

/*
* Supporting trades read as subordinate without being hidden (spec 2.3) — but
* through colour alone. They were also dropped to 13.5px against 15.5px, and two
* type sizes inside the same list read as a rendering fault rather than as
* hierarchy: the second row simply looked less legible than the first.
*/
.svcline__link--trade { color: var(--body-font-color); font-size: var(--cc-text-sm); }

.svcline__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}


/* ==========================================================================
About page — tab rail

The About page used the same stacked full-width blocks the service pages had:
a tall dark rail that competed with the content. It now uses the sticky rail
and pill treatment from the service pages. Bootstrap's tab JS keys off
#aboutTab .nav-link and .tab-pane, so those hooks are untouched and only the
presentation changed.
========================================================================== */

/* The select takes over below the rail's breakpoint, so hide the duplicate. */
@media (max-width: 767px) {
	.about-rail { display: none; }
}

.about-select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 100%;
	padding: 12px 16px;
	font-family: var(--title-font);
	font-size: 14px;
	font-weight: 600;
	color: var(--cc-on-accent);
	background-color: var(--primary-color);
	border: none;
	border-radius: 8px;
	line-height: 1.4;
	white-space: normal;
	height: auto;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='white' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: .6rem auto;
}

.about-select option { white-space: normal; }

/* Relocated from the page's inline <style>, now scoped so it cannot affect other
templates that share the #subheader markup. */
.about-page section#subheader::before {
	content: '';
	background: rgba(0, 0, 0, .5);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}


/* ==========================================================================
Homepage — two delivery panels

Previously two bare columns with no container, mismatched button treatments
and plain-text lists. Now two panels on the site's card surface, with the list
items linking into the actual service pages.
========================================================================== */

.duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

@media (max-width: 991px) { .duo { grid-template-columns: 1fr; gap: 20px; } }

.duo__panel {
	/* 	display: flex;
	flex-direction: column; */
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: 16px;
	padding: 40px 38px 34px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

@media (max-width: 575px) { .duo__panel { padding: 15px; } }

.duo__panel:hover {
	border-color: var(--cc-accent-line);
	box-shadow: 0 18px 40px var(--cc-border);
}

.duo__eyebrow {
	font-family: var(--body-font);
	font-size: var(--cc-eyebrow);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--secondary-color);
	margin-bottom: 12px;
}

.duo__title {
	font-family: var(--title-font);
	font-weight: 500;
	line-height: 1.15;
	color: var(--title-font-color);
	margin: 0 0 15px;
}

.location-testimonial .owl-prev, .location-testimonial .owl-next, .location-testimonial .d-nav-left, .location-testimonial .d-nav-right{
	display:none;
}


.duo__accent {
	display: block;
	color: var(--secondary-color);
}

.duo__lead {
	color: var(--body-font-color);
	font-size: var(--cc-text);
	line-height: 1.65;
	margin: 0 0 22px;
}

.duo__list {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.duo__list li { margin: 0; }

.duo__list a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: var(--cc-text-sm);
	line-height: 1.45;
	color: var(--body-font-color);
	padding: 10px 0;
	border-bottom: 1px solid var(--cc-border);
	transition: color .18s ease;
}

.duo__list li:last-child a { border-bottom: 0; }

.duo__list a i {
	font-size: 10px;
	color: var(--secondary-color);
	flex: 0 0 auto;
}

.duo__list a:hover { color: var(--secondary-color); }

/* Pinned to the bottom so both panels' buttons sit on the same line. */
.duo__foot { margin-top: auto; }

/* --------------------------------------------------------------- Utilities */
/* Replacements for one-off inline style attributes. */
.u-wrap  { white-space: normal !important; }
.u-pr-10 { padding-right: 10px; }
.u-py-10 { padding-top: 10px; padding-bottom: 10px; }






















































/* ==========================================================================
ConstructCo — About page (Who We Are template)

Premium restyle of the .svc-layout tab section. CSS only: no markup, PHP or
JS changes.

Load AFTER components.css.

Scope
-----
Everything is namespaced under .about-page (the class already on #content in
page-who-we-are.php). The service-page rail (.svc-pill) is untouched, so the
two rails deliberately fork here — see the note at §3.

Tokens
------
No new colours are invented. Everything resolves from the theme:
--primary-color    #2e2e22  ink
--secondary-color  #9F8A38  brass
--title-font-color #354e33  headings
--body-font-color  #596a5a  body
--cc-surface / --cc-border / --cc-accent-tint / --cc-accent-line
--cc-h2 / --cc-h3 / --cc-text / --cc-text-sm / --cc-text-xs / --cc-eyebrow
========================================================================== */


/* --------------------------------------------------------------------------
1. LOCAL TOKENS
-------------------------------------------------------------------------- */

.about-page .svc-layout {
	--ab-ink:     var(--primary-color);
	--ab-brass:   var(--secondary-color);

	/* Brass at #9F8A38 sits too close to #2e2e22 to read on the active plate.
	This is the same hue lifted for on-dark use only. */
	--ab-brass-lift: #C4AC55;

	--ab-mono: "Plus Jakarta Sans", ui-monospace, "SFMono-Regular", Menlo, monospace;
}


/* --------------------------------------------------------------------------
2. LAYOUT
The theme's grid already gives 320px + 1fr at 52px. Only the gutter widens,
so the white plate has room to breathe against the rail.
-------------------------------------------------------------------------- */

@media (min-width: 992px) {
	.about-page .svc-layout {
		grid-template-columns: 300px minmax(0, 1fr);
		gap: 64px;
	}
}

/* .svc-rail__inner is already position:sticky; top:86px in components.css.
Left as-is — the same rule drives the service pages. */


/* --------------------------------------------------------------------------
3. RAIL — the specification index

components.css styles .svc-pill and .about-rail .nav-link together, on
purpose, to stop them drifting. This file forks the About rail away from
that shared rule. If the service rail should follow later, move §3 into
components.css and add .svc-pill to each selector.

Pills become a numbered document index: division number, hairline rules,
an ink plate on the active entry, brass keyline sliding down the edge.
-------------------------------------------------------------------------- */

.about-page .svc-rail__label {
	font-family: var(--ab-mono);
	font-size: var(--cc-eyebrow);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--body-font-color);
	opacity: 1;
	margin-bottom: 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--ab-ink);
}

.about-page .about-rail {
	display: block;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
	counter-reset: ab-div;
}

.about-page .about-rail .nav-item {
	counter-increment: ab-div;
	display: block;
	width: 100%;
	margin: 0;
	border-bottom: 1px solid var(--cc-border);
}

/* Every pill property from components.css is reset explicitly here, so this
block is the single source of truth for the About rail. */
.about-page .about-rail .nav-link {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	align-items: start;
	gap: 12px;
	width: 100%;
	margin: 0;
	padding: 16px 14px 16px 16px;
	border: 0;
	border-radius: 0;
	background: transparent;

	/* components.css locks each pill to one line and ellipsises the overflow,
	which is what truncates "Leadership & Organizational Commitm…". */
	white-space: normal;
	overflow: visible;
	text-overflow: clip;

	font-family: var(--title-font);
	font-size: var(--cc-text-xs);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .09em;
	text-align: left;
	text-transform: uppercase;
	color: var(--title-font-color);
	transition: background-color .28s ease, color .28s ease, padding-left .28s ease;
}

/* Division number */
.about-page .about-rail .nav-link::before {
	content: counter(ab-div, decimal-leading-zero);
	font-family: var(--ab-mono);
	font-size: 11px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	line-height: 1.7;
	color: var(--ab-brass);
	transition: color .28s ease;
}

/* Brass keyline on the leading edge */
.about-page .about-rail .nav-link::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--ab-brass);
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

.about-page .about-rail .nav-link:hover,
.about-page .about-rail .nav-link:focus {
	background: var(--cc-accent-tint);
	border-color: transparent;
	color: var(--title-font-color);
	padding-left: 22px;
}

.about-page .about-rail .nav-link:focus-visible {
	outline: 2px solid var(--ab-brass);
	outline-offset: -2px;
}

.about-page .about-rail .nav-link:hover::after,
.about-page .about-rail .nav-link:focus::after {
	transform: scaleY(1);
}

/* Selected state. Listed with :hover and :focus for the same reason the
.is-trade rule in components.css uses :not(.is-active) — the selected entry
must win over hover, not lose to it. */
.about-page .about-rail .nav-link.active,
.about-page .about-rail .nav-link.active:hover,
.about-page .about-rail .nav-link.active:focus {
	background: var(--ab-ink);
	border-color: transparent;
	color: var(--cc-on-accent);
	font-weight: 500;
	padding-left: 22px;
}

.about-page .about-rail .nav-link.active::before,
.about-page .about-rail .nav-link.active:hover::before {
	color: var(--ab-brass-lift);
}

.about-page .about-rail .nav-link.active::after {
	transform: scaleY(1);
	background: var(--ab-brass-lift);
}


/* --------------------------------------------------------------------------
4. MOBILE SELECT

#aboutTabDropdown (id, 1-0-0) outranks .about-select, and the page's inline
JS also writes background-color and color directly onto the element, so the
fill needs !important to land. Everything else resolves normally.
-------------------------------------------------------------------------- */

.about-page #aboutTabDropdown {
	padding: 15px 44px 15px 18px;
	border: 1px solid var(--ab-ink);
	border-radius: 0;
	background-color: var(--ab-ink) !important;
	color: var(--cc-on-accent) !important;
	font-family: var(--title-font);
	font-size: var(--cc-text-xs);
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23C4AC55' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.15rem center;
	background-size: .6rem auto;
}

.about-page #aboutTabDropdown:focus-visible {
	outline: 2px solid var(--ab-brass);
	outline-offset: 2px;
}


/* --------------------------------------------------------------------------
5. CONTENT PLATE + SHEET HEADER
The panel lifts off the cream as a white document plate with an ink cap.
Each panel opens with a title block: sheet reference, hairline, heading.
-------------------------------------------------------------------------- */

.about-page .svc-content {
	min-width: 0;
}

.about-page .svc-content,
.svc-content{
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);

	padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 60px) clamp(32px, 4vw, 52px);
	box-shadow: var(--cc-shadow);
}

.about-page .tab-pane {
	color: var(--body-font-color);
	font-size: 16px;
	line-height: 1.75;
}

.about-page .tab-pane.active {
	animation: ab-panel-in .45s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes ab-panel-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

/* --- Panel heading ------------------------------------------------------- */

/* Size comes from --cc-h2, per the type-scale note in components.css: no
component sets a heading size of its own. */
.about-page .tab-pane > h2 {
	position: relative;
	margin: 0 0 clamp(26px, 3.5vw, 40px);
	padding-top: 44px;
	padding-bottom: clamp(20px, 2.5vw, 26px);
	font-size: var(--cc-h2);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: .01em;
	color: var(--title-font-color);
	border-bottom: 1px solid var(--cc-border);
}

/* Sheet reference, above the title */
.about-page .tab-pane > h2::before {
	position: absolute;
	top: 0;
	left: 0;
	font-family: var(--ab-mono);
	font-size: var(--cc-eyebrow);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	letter-spacing: .18em;
	color: var(--ab-brass);
}

/* Hairline running from the reference to the right edge */
/* .about-page .tab-pane > h2::after {
content: "";
position: absolute;
top: 8px;
left: 76px;
right: 0;
height: 1px;
background: var(--cc-border);
} */

/* Static numbers, not a CSS counter. Inactive .tab-pane siblings are
display:none via Bootstrap, and display:none elements generate no boxes, so
a counter would resolve to 1 on every panel.
Adding an eighth ACF row means adding a line here and updating "/ 07". */
/* .about-page .tab-pane:nth-of-type(1) > h2::before { content: "01 / 07"; }
.about-page .tab-pane:nth-of-type(2) > h2::before { content: "02 / 07"; }
.about-page .tab-pane:nth-of-type(3) > h2::before { content: "03 / 07"; }
.about-page .tab-pane:nth-of-type(4) > h2::before { content: "04 / 07"; }
.about-page .tab-pane:nth-of-type(5) > h2::before { content: "05 / 07"; }
.about-page .tab-pane:nth-of-type(6) > h2::before { content: "06 / 07"; }
.about-page .tab-pane:nth-of-type(7) > h2::before { content: "07 / 07"; } */


/* --------------------------------------------------------------------------
6. BODY TYPOGRAPHY

Each h3 opens a clause of the document: hairline above, a short brass tick,
sentence-weight type. Turns a flat h3+p stack into a structured record.

.copy-measure h3 hardcodes 20px, which is one of the off-scale sizes the
type-scale block in components.css was written to eliminate. Restored to
--cc-h3 here.
-------------------------------------------------------------------------- */

.about-page .tab-pane p {
	margin: 0 0 1.1rem;
	color: var(--body-font-color);
	max-width: none;   /* body copy runs the full content column */
}

.about-page .tab-pane > p:first-of-type {
	font-size: 17px;
	line-height: 1.72;
	color: var(--title-font-color);
}

.about-page .tab-pane h3 {
	position: relative;
	margin: clamp(36px, 4vw, 52px) 0 1rem;
	padding-top: 22px;
	font-size: var(--cc-h3);
	font-weight: 500;
	line-height: 1.3;
	color: var(--title-font-color);
	border-top: 1px solid var(--cc-border);
}

.about-page .tab-pane h3::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 40px;
	height: 3px;
	background: var(--ab-brass);
}

.about-page .tab-pane > h3:first-of-type {
	margin-top: 0;
}

/* "How we build" uses h4 for its four lifecycle phases. */
.about-page .tab-pane h4 {
	margin: clamp(28px, 3vw, 38px) 0 .85rem;
	padding-left: 16px;
	border-left: 3px solid var(--ab-brass);
	border-radius: 0;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--title-font-color);
}

.about-page .tab-pane h4 strong {
	font-weight: 500;
	color: inherit;
}


/* --------------------------------------------------------------------------
7. LISTS — requirement schedules

Grid rather than a single column: a seven-item schedule fills the measure
instead of stranding a thin strip down the left. Long items simply wrap and
the grid re-flows, so the mixed lengths in Leadership Philosophy are safe.
-------------------------------------------------------------------------- */

.about-page .tab-pane ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cc-accent-tint);
}

.about-page .tab-pane ul li {
	position: relative;
	margin: 0;
	padding: 11px 18px 11px 22px;
	border-bottom: 1px solid var(--cc-accent-tint);
	font-size: var(--cc-text-sm);
	line-height: 1.6;
	color: var(--body-font-color);
	list-style: none;
}

.about-page .tab-pane ul li::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 0;
	width: 6px;
	height: 6px;
	background: var(--ab-brass);
}


/* --------------------------------------------------------------------------
8. CLOSING LINE + CTA

The "Next: …" line is the paragraph immediately before the CTA, so :has()
reaches it without touching the markup. Browsers without :has() render it as
ordinary body copy — no breakage, just no treatment.
-------------------------------------------------------------------------- */

.about-page .tab-pane p:has(+ p > a),
.about-page .tab-pane p:has(+ p > a.btn-main) {
	margin-top: clamp(34px, 4vw, 48px);
	padding-top: 22px;
	border-top: 1px solid var(--cc-border);
	font-family: var(--ab-mono);
	font-size: 14px;
	color: var(--body-font-color);
}

.about-page .tab-pane a.btn-main,
.about-page .tab-pane a.btn-main:active,
.about-page .tab-pane a.btn-main:focus,
.about-page .tab-pane a.btn-main:visited,
.about-page .tab-pane p > a:only-child {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 4px;
	padding: 15px 30px;
	width: auto;
	border: 1px solid var(--ab-ink);
	border-radius: 0;
	background: var(--ab-ink);
	color: var(--cc-on-accent);
	font-family: var(--title-font);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .13em;
	line-height: 1;
	text-align: left;
	text-transform: uppercase;
	box-shadow: none;
	transition: background-color .3s ease, border-color .3s ease, gap .3s ease;
}



.about-page .tab-pane a.btn-main:hover,
.about-page .tab-pane p > a:only-child:hover {
	background: var(--ab-brass);
	border-color: var(--ab-brass);
	color: var(--cc-on-accent);
	gap: 20px;
	box-shadow: none;
}

.about-page .tab-pane a.btn-main:hover::after,
.about-page .tab-pane p > a:only-child:hover::after {
	color: var(--cc-on-accent);
}

.about-page .tab-pane a.btn-main:focus-visible,
.about-page .tab-pane p > a:only-child:focus-visible {
	outline: 2px solid var(--ab-ink);
	outline-offset: 3px;
}

/* Inline links inside body copy stay understated. */
.about-page .tab-pane p > a:not(:only-child):not(.btn-main) {
	color: var(--ab-brass);
	text-decoration: underline;
	text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
9. RESPONSIVE

components.css hides .about-rail below 768px and hands over to the select.
Section 3 raises the rail's specificity, so that rule has to be restated
here or the rail would reappear on phones alongside the dropdown.
-------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.about-page .svc-rail__inner {
		position: static;
	}
}

@media (max-width: 767px) {
	/* 	.about-page .about-rail,
	.about-page .svc-rail__label {
	display: none;
}
	*/
	/* 	.about-page .tab-content {
	padding: 26px 20px 30px;
} */
	.market-detail .mk-band,
	.cc-detail .mk-constraints{
		margin-top:60px;
	}
	.about-page .tab-pane > h2 {
		padding-top: 36px;
	}

	.about-page .tab-pane > h2::after {
		left: 70px;
	}

	.about-page .tab-pane ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.about-page .tab-pane a.btn-main,
	.about-page .tab-pane p > a:only-child {
		width: 100%;
		justify-content: space-between;
	}
}


/* --------------------------------------------------------------------------
10. MOTION + PRINT
-------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.about-page .tab-pane.active {
		animation: none;
	}

	.about-page .about-rail .nav-link,
	.about-page .about-rail .nav-link::before,
	.about-page .about-rail .nav-link::after,
	.about-page .tab-pane a.btn-main,
	.about-page .tab-pane p > a:only-child {
		transition: none;
	}
}

@media print {
	.about-page .svc-rail {
		display: none;
	}

	.about-page .tab-content {
		border: 0;
		box-shadow: none;
		padding: 0;
	}
}


/* ==========================================================================
ConstructCo — Services hub (page-services-hub.php)

Structural pass over the existing hub. CSS only: no markup, PHP or JS
changes. Load AFTER components.css.

NOT touched: .btn-main and .btn-line in any form — fill, border, radius,
type, padding and hover all remain exactly as the theme defines them. Only
the spacing around the closing pair changes.

Rebuilt in this revision: the jump nav (§1), the sub-page lists (§4) and the
delivery sequence (§6).

Everything resolves from theme tokens:
--primary-color / --secondary-color / --title-font-color / --body-font-color
--cc-surface / --cc-border / --cc-border-strong / --cc-accent-tint
--cc-accent-line / --cc-shadow / --rounded-1
--cc-h2 / --cc-text / --cc-text-sm / --cc-text-xs / --cc-eyebrow
========================================================================== */


/* --------------------------------------------------------------------------
1. JUMP NAV — five equal cards

Three problems in the current strip: the pills size to their labels, so five
items run 21 to 45 characters and wrap 4 + 1 with an orphan; the chevron
reads as a dropdown caret rather than a jump link; and nothing marks the set
as an index rather than a filter bar.

A five-column grid fixes all three. Equal cells, one row, labels wrap inside
their own cell instead of stretching it, and a double-chevron reads as
"further down this page". Corners keep the theme's --rounded-1.
-------------------------------------------------------------------------- */

.svcnav {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px;
	margin-top: 36px;
	padding-top: 30px;
	border-top: 1px solid var(--cc-border);
}

.svcnav__item {
	position: relative;
	display: block;
	padding: 18px 40px 18px 18px;
	border: 1px solid var(--cc-border);
	border-radius: var(--rounded-1);
	background: var(--cc-surface);
	font-family: var(--title-font);
	font-size: var(--cc-text-sm);
	font-weight: 500;
	line-height: 1.35;
	color: var(--title-font-color);
	transition: border-color .22s ease, background-color .22s ease;
}

.svcnav__num {
	display: block;
	margin-bottom: 9px;
	font-size: var(--cc-eyebrow);
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
	color: var(--secondary-color);
}


.svcnav__item:hover,
.svcnav__item:focus {
	background: var(--cc-accent-tint);
	border-color: var(--cc-accent-line);
	color: var(--title-font-color);
}

.svcnav__item:hover::after {
	transform: translateY(3px);
	opacity: 1;
}


/* --------------------------------------------------------------------------
2. ROW RHYTHM AND SEPARATION

Five rows at a 1px hairline with 54px of padding blur into one another when
scrolled. The divider gains weight and the rhythm opens up.
-------------------------------------------------------------------------- */

.svcline {
	padding: clamp(48px, 5.5vw, 72px) 0;
	border-top: 1px solid var(--cc-border-strong);

	/* Anchor landing position. header.smaller is fixed at 60px, so the
	original 92px left almost no clearance above the heading. Worth checking
	on mobile, where the top bar adds another 65px. */
	scroll-margin-top: 120px;
}

.svcline:first-of-type {
	padding-top: 0px;
}


/* --------------------------------------------------------------------------
3. READING ORDER INSIDE THE ROW

Flag, title, blurb, schedule, action currently sit at near-uniform spacing,
so nothing leads. This groups them.
-------------------------------------------------------------------------- */

.svcline__flag {
	margin-bottom: 14px;
}

.svcline__title {
	margin-bottom: 12px;
	line-height: 1.18;
}

.svcline__blurb {
	margin-bottom: 24px;
	font-size: var(--cc-text);
	line-height: 1.7;
}


/* --------------------------------------------------------------------------
4. SUB-PAGE SCHEDULE

The two columns currently share one uninterrupted field — a 36px gap with no
divider, so eight links read as one block of text and the eye has no lane to
follow. This makes it an actual two-column schedule: a rule between the
columns, each row a full-width hit area that fills on hover, and the chevron
sized to sit as a marker rather than a stray glyph.

The icons stay in place; only their size and colour behaviour change.
-------------------------------------------------------------------------- */

.svcline__links {
	gap: 0;
	margin-bottom: 28px;
	border-top: 1px solid var(--cc-border);
}

.svcline__link {
	align-items: baseline;
	gap: 12px;
	min-height: 46px;
	padding: 13px 14px;
	border-bottom: 1px solid var(--cc-border);
	line-height: 1.55;
	transition: background-color .22s ease, color .22s ease;
}



.svcline__link i {
	position: relative;
	top: -1px;
	font-size: 10px;
	color: var(--secondary-color);
	transition: color .22s ease;
}

.svcline__link:hover {
	background: var(--cc-accent-tint);
	color: var(--title-font-color);
}

.svcline__link:hover i {
	color: var(--primary-color);
}

/* Supporting trades already read as subordinate through weight and colour,
which is the rule components.css sets. Only the marker steps back. */
.svcline__link--trade i {
	opacity: .55;
}


/* --------------------------------------------------------------------------
5. ACTION

Separated from the schedule so the button does not read as a ninth row.
The button itself is untouched.
-------------------------------------------------------------------------- */

.svcline__foot {
	margin-top: 2px;
}


/* --------------------------------------------------------------------------
6. DELIVERY SEQUENCE

Three problems in the current block: the five brass rules sit above their
numbers with a wide gap, so they float free of the content they cap; the
gaps between them break what is genuinely one continuous sequence into five
unrelated columns; and the whole section — head, steps and closing pair —
floats on flat cream with nothing holding it together.

One continuous hairline with a brass tick per step reads as a sequence. The
block sits on a white plate, which is the same containment used for the
About page panels, so the two pages match.
-------------------------------------------------------------------------- */

.container:has(> .cc-steps) {
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: var(--rounded-1);
	padding: clamp(30px, 4vw, 56px);
	box-shadow: var(--cc-shadow);
}

.cc-sechead {
	margin-bottom: clamp(28px, 3.5vw, 40px);
}

.cc-sechead__eyebrow {
	margin-bottom: 10px;
}

.cc-sechead h2 {
	margin-bottom: 14px;
}

.cc-sechead p {
	margin-bottom: 0;
}

/* --- Steps --------------------------------------------------------------- */

.cc-steps {
	gap: 0;
	border-top: 1px solid var(--cc-border);
}

.cc-steps li {
	position: relative;
	padding: 20px 26px 0 0;
	border-top: 0;
}

/* Brass tick, flush to the continuous rule above. */
.cc-steps li::after {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 30px;
	height: 3px;
	background: var(--secondary-color);
}

/* components.css sets `content: "0" counter(cc-step)`, which renders "010" at
a tenth step. Same output for the five today, correct if the list grows. */
.cc-steps li::before {
	content: counter(cc-step, decimal-leading-zero);
	font-variant-numeric: tabular-nums;
	margin-bottom: 10px;
}

.cc-steps strong {
	line-height: 1.35;
	margin-bottom: 8px;
}

.cc-steps span {
	line-height: 1.6;
}

/* --- Closing pair -------------------------------------------------------- */

/*
* .mt-5 is a Bootstrap utility and carries !important, so the override needs
* to match. Only the spacing and the rule above the pair change here — the
* buttons themselves inherit the theme entirely.
*/
.container:has(> .cc-steps) .row {
	margin-top: clamp(34px, 4vw, 46px) !important;
	padding-top: clamp(28px, 3vw, 36px);
	border-top: 1px solid var(--cc-border);
}


/* --------------------------------------------------------------------------
7. VISIBLE FOCUS

The theme's global transition block sets `outline: none` broadly, which
leaves keyboard users with no indication of position.
-------------------------------------------------------------------------- */

.svcnav__item:focus-visible,
.svcline__title a:focus-visible,
.svcline__link:focus-visible {
	outline: 2px solid var(--secondary-color);
	outline-offset: 3px;
}


/* --------------------------------------------------------------------------
8. RESPONSIVE
-------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.svcnav {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.svcnav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 28px;
		padding-top: 24px;
	}

	.svcline {
		padding: 36px 0;
		scroll-margin-top: 100px;
	}

	/* Below 991px every row stacks image-then-text, so a reader passes five
	full-width images before reaching the fifth line. */
	.svcline__media {
		aspect-ratio: 2 / 1;
	}
}

@media (max-width: 767px) {
	.svcnav {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	.svcnav__item {
		padding: 15px 40px 15px 16px;
		display: flex;
	}

	.svcnav__num {
		display: inline-block;
		margin: 0 10px 0 0;
	}

	.svcnav__item::after {
		top: 50%;
		transform: translateY(-50%);
	}

	.svcnav__item:hover::after {
		transform: translateY(-50%);
	}

	/* Single column, so the divider has nothing to divide. */
	.svcline__links li:nth-child(even) .svcline__link {
		border-left: 0;
	}

	.svcline__link {
		padding-left: 0;
		padding-right: 0;
	}

	.svcline__link:hover {
		background: transparent;
	}

	/* Stack the closing pair without touching either button's own styling. */
	.container:has(> .cc-steps) .row .col-lg-12 {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.container:has(> .cc-steps) .row .btn-main.ms-2 {
		margin-left: 0 !important;
	}
}

@media (max-width: 575px) {
	.svcline__media {
		aspect-ratio: 16 / 9;
	}
}


/* --------------------------------------------------------------------------
9. MOTION
-------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.svcnav__item,
	.svcnav__item::after,
	.svcline__link,
	.svcline__link i {
		transition: none;
	}

	.svcnav__item:hover::after {
		transform: none;
	}

	.svcline:hover .svcline__media img {
		transform: none;
	}
}

/* ==========================================================================
ConstructCo — Service detail pages (single-services.php)

Append to the existing stylesheet, after the Services hub block.
CSS only: no markup, PHP or JS changes.

Brings the detail pages onto the treatment already live on /about/ and
/services/ — index rail, clause headings, schedule lists.

NOT touched: .btn-main and .btn-line. One rule names .btn-main and it sets
margin-top only, to align the six related-card actions. Nothing else.

Tokens resolve from the theme. The one literal is the on-dark brass, since
#9F8A38 on #2e2e22 is roughly 2.4:1 and unreadable on the active plate.
========================================================================== */


/* --------------------------------------------------------------------------
1. SIBLING RAIL

The same index treatment as the About rail: hairline rows, an ink plate on
the current page, a brass keyline on the leading edge.

components.css styles .svc-pill and .about-rail .nav-link together and says
in a comment that this is deliberate so the two cannot drift. The About file
forked away from that rule; this brings the service rail across, which
closes the fork.

Two differences from the About rail, both deliberate:

- No numbering. The About panels chain "Next: …", so their order carries
information. Eight sibling services do not, and numbering them would
assert a sequence that is not there.
- No uppercase. The About labels are stored uppercase in ACF. These are
Title Case service names up to 45 characters, and uppercasing them would
push most rows to three lines.
-------------------------------------------------------------------------- */

.svc-rail__label {
	font-size: var(--cc-eyebrow);
	font-weight: 500;

	color: var(--body-font-color);
	opacity: 1;
	margin-bottom: 15px;
}

.svc-rail__group {
	font-size: var(--cc-h3);
	line-height: 1.25;
	margin-bottom: 16px;
}

.svc-pills {
	display: block;
	gap: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--primary-color);
	list-style: none;
}

.svc-pills > * {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	border: 0;
}

/*
* The row separator sits on the LINK, not on a wrapping <li>. components.css
* declares .about-rail .nav-item for the About rail but has no equivalent for
* .svc-pills, which means these anchors are direct children of the list.
* Bordering the link works either way; an `li` selector would silently match
* nothing and leave the rail with no separators at all.
*/
.svc-pill {
	position: relative;
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 16px 14px 16px 16px;
	border: 0;
	border-bottom: 1px solid var(--cc-border);
	border-radius: 0;
	background: transparent;

	/* components.css locks each pill to one line and ellipsises the overflow,
	which is what truncates "Preconstruction, Permitting & Project Contr…".
	The titles are already shortened server-side, so wrapping costs nothing
	and removes the truncation entirely. */
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: break-word;

	font-family: var(--title-font);
	font-size: var(--cc-text-xs);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .03em;
	text-align: left;
	color: var(--title-font-color);
	transition: background-color .26s ease, color .26s ease, padding-left .26s ease;
}

.svc-pill::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--secondary-color);
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.svc-pill:hover,
.svc-pill:focus {
	background: var(--cc-accent-tint);
	color: var(--title-font-color);
	padding-left: 22px;
}

.svc-pill:hover::after,
.svc-pill:focus::after {
	transform: scaleY(1);
}

/* Current page. Listed with :hover and :focus for the same reason the
.is-trade rule in components.css uses :not(.is-active) — the selected row
has to win over hover, not lose to it. */
.svc-pill.is-active,
.svc-pill.is-active:hover,
.svc-pill.is-active:focus {
	background: var(--primary-color);
	border-bottom-color: transparent;
	color: var(--cc-on-accent);
	font-weight: 500;
	padding-left: 22px;
}

.svc-pill.is-active::after {
	transform: scaleY(1);
	background: #C4AC55;
}

.svc-pill.is-trade:not(.is-active) {
	letter-spacing: .01em;
}

.svc-pill:focus-visible {
	outline: 2px solid var(--secondary-color);
	outline-offset: -2px;
}


/* --------------------------------------------------------------------------
2. ARTICLE BODY

The page runs six sections of one shape: heading, a one-line lead, a
capability list, then a closing line stating what the list achieves. All
four render at the same weight today, so the structure that is genuinely
there is invisible and the page reads as one long column.

`h2 + p` and `ul + p` pick out the lead and the closing line with no markup
change, which is what makes the shape legible.

Every rule is prefixed .svc-content on purpose. .copy-measure is also used
on the Services hub and other templates, and these must not reach them.
-------------------------------------------------------------------------- */

.svc-content {
	min-width: 0;
}

.svc-content .copy-measure > p {
	max-width: none;   /* body copy runs the full content column */
	line-height: 1.75;
}

.svc-content .copy-measure > p:first-child {
	font-size: 17px;
	color: var(--title-font-color);
}

/* --- Clause heading ------------------------------------------------------ */

/* The same treatment the About panels give h3: hairline above, short brass
tick. Both are the same level of the document, whatever tag was used.
Size comes from --cc-h2, per the type-scale note in components.css. */
.svc-content .copy-measure h2 {
	position: relative;
	/* 	margin-top: clamp(40px, 5vw, 62px); */
	margin-bottom: 0;
	padding-top: 15px;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--title-font-color);
	border-top: 1px solid var(--cc-border);
}

.svc-content .copy-measure h2::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 40px;
	height: 3px;
	background: var(--secondary-color);
}

.svc-content .copy-measure > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.svc-content .copy-measure > h2:first-child::before {
	display: none;
}

/* Lead line under the heading. */
.svc-content .copy-measure h2 + p {
	margin-top: 14px;
	margin-bottom: 22px;
	font-size: var(--cc-text);
	color: var(--title-font-color);
}

/* --- Capability schedule -------------------------------------------------- */

/* Same schedule as the About panel lists. Five to seven items in one indented
column of discs strands a thin strip down the left of a wide measure; a grid
fills it and hairline rows give each capability its own lane. */
.svc-content .copy-measure ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
	gap: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cc-accent-tint);
}

.svc-content .copy-measure ul li {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 11px 18px 11px 22px;
	border-bottom: 1px solid var(--cc-accent-tint);
	font-size: var(--cc-text-sm);
	line-height: 1.6;
	color: var(--body-font-color);
	list-style: none;
}

.svc-content .copy-measure ul li::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 0;
	width: 6px;
	height: 6px;
	background: var(--secondary-color);
}

/* Closing line after each list — what the capabilities above deliver. */
.svc-content .copy-measure ul + p {
	margin-bottom: 0;
	padding-left: 18px;
	/* 	border-left: 2px solid var(--cc-accent-line); */
	font-size: var(--cc-text-sm);
	line-height: 1.5;
	color: var(--title-font-color);
}


/* --------------------------------------------------------------------------
3. RELATED SERVICES GRID

Excerpts trim to 18 words, so they run one to three lines and "View service"
lands at a different height in every card.
-------------------------------------------------------------------------- */

.cc-card:hover {
	border-color: var(--cc-accent-line);
	box-shadow: var(--cc-shadow);
	transform: translateY(-4px);
}

.cc-card__media {
	aspect-ratio: 3 / 2;
}

.cc-card__body {
	padding: 24px 24px 26px;
}

.cc-card__eyebrow {
	letter-spacing: .14em;
	margin-bottom: 10px;
}

.cc-card__title {
	line-height: 1.35;
	margin-bottom: 10px;
}

.cc-card__text {
	margin-bottom: 20px;
}

/*
* Positions a button, does not restyle it. margin-top:auto pushes the action
* to the bottom of the flex column so all six align regardless of excerpt
* length. This is the only rule in the file that names a button.
*/
.cc-card__body > .btn-main {
	align-self: flex-start;
	margin-top: auto;
}


/* --------------------------------------------------------------------------
4. FOCUS
-------------------------------------------------------------------------- */

.svc-rail__group:focus-visible,
.svc-content .copy-measure a:focus-visible,
.cc-card__title a:focus-visible,
.cc-card__media:focus-visible {
	outline: 2px solid var(--secondary-color);
	outline-offset: 3px;
}


/* --------------------------------------------------------------------------
5. RESPONSIVE
-------------------------------------------------------------------------- */

@media (max-width: 991px) {
	/*
	* components.css turns .svc-pills into a nowrap horizontal scroller here.
	* That is the right instinct for pills and the wrong one for an index —
	* eight rows in a hidden side-scroll means a reader sees two of them. Two
	* columns fits all eight on screen with no scrolling.
	*/
	.svc-pills {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow-x: visible;
	}

	.svc-pill {
		width: auto;
		flex: none;
	}
	#mainmenu {
		display: block!important;
	}

	.svc-pills > *:nth-child(even) {
		border-left: 1px solid var(--cc-border);
	}

	.svc-content .copy-measure h2 {
		margin-top: 25px;
	}
}

@media (max-width: 767px) {
	.svc-pills {
		grid-template-columns: minmax(0, 1fr);
	}

	.svc-pills > *:nth-child(even) {
		border-left: 0;
	}

	.svc-content .copy-measure ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.cc-card__body {
		padding: 20px 20px 22px;
	}
}

.de__pcard{
	border-radius:12px;
}


/* --------------------------------------------------------------------------
6. MOTION
-------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.svc-pill,
	.svc-pill::after,
	.cc-card {
		transition: none;
	}

	.cc-card:hover {
		transform: none;
	}
}


















/* ==========================================================================
ConstructCo — Location pages (page-single-locations.php)

Append after the service detail block in your stylesheet.
CSS only: no markup, PHP or JS changes. The carousel, the equal-height
script, the FAQ accordion script and the contact form all keep working
exactly as they do now.

Scoped throughout to .p-location, the class already on #content.

NOT touched: .btn-main and .btn-line.

TWO STRUCTURAL BREAKS ARE FIXED HERE — §8 and §12. Everything else is
spacing, hierarchy and surface.
========================================================================== */


/* --------------------------------------------------------------------------
1. PAGE RHYTHM
-------------------------------------------------------------------------- */

.p-location > section {
	padding: clamp(56px, 7vw, 104px) 0;
}

.p-location > section + section:not(.pt-0):not(.pt-lg-0):not(.no-top):not(.bg-color):not(.principles):not(.faq-section) {
	border-top: 1px solid var(--cc-border);
}

.p-location > section.no-top { padding-top: 0; }
.p-location > section.no-bottom { padding-bottom: 0; }


/* --------------------------------------------------------------------------
2. HERO
-------------------------------------------------------------------------- */


.p-location #subheader .crumb { margin-bottom: 18px; }

.p-location #subheader h1 {
	letter-spacing: .01em;
	margin-bottom: 16px;
}

.p-location #subheader p {
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 0;
}

.ab-quote .ab-quote__text{
	font-weight: 600;
}

/* --------------------------------------------------------------------------
3. CLAUSE HEADINGS
-------------------------------------------------------------------------- */

.p-location section h2 {
	position: relative;
	margin-bottom: 15px;
}


/* Centred contexts: tick only, no rule. */
.p-location .text-center h2,
.p-location .principles h2 {

	border-top: 0;
}

.p-location .text-center h2::before,
.p-location .principles h2::before {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* The half-fluid blocks and the FAQ are left-aligned — see §8 and §12. */
.p-location .about .px-5 h2,
.p-location .faq-section h2 {

	border-top: 0;
}

.p-location .about .px-5 h2::before,
.p-location .faq-section h2::before {
	top: 0;
	left: 0;
	transform: none;
}

/* The template prints the highlight span whether or not the field is filled,
leaving a dead line under the heading. */
.p-location h2 .d-block:empty,
.p-location h2 .id-color-2:empty {
	display: none;
}

.p-location .subtitle { margin-bottom: 18px; }


/* --------------------------------------------------------------------------
4. EDITORIAL COPY BLOCK
-------------------------------------------------------------------------- */

.p-location .copy .copy-measure {
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: var(--rounded-1);
	padding: clamp(26px, 4vw, 56px) clamp(20px, 4vw, 60px);
	box-shadow: var(--cc-shadow);
}

.p-location .copy .copy-measure > p {
	max-width: none;   /* body copy runs the full content column */
	line-height: 1.75;
}

.p-location .copy .copy-measure > p:first-child {
	font-size: 17px;
	color: var(--title-font-color);
}

.p-location .copy .copy-measure h2 {
	margin-top: clamp(38px, 5vw, 58px);
	margin-bottom: 0;
	padding-top: 22px;
	font-weight: 500;
	line-height: 1.25;
}

.p-location .copy .copy-measure > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.p-location .copy .copy-measure > h2:first-child::before { display: none; }

.p-location .copy .copy-measure h2 + p {
	margin-top: 14px;
	margin-bottom: 22px;
	color: var(--title-font-color);
}

.p-location .copy .copy-measure ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
	gap: 0;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--cc-accent-tint);
}

.p-location .copy .copy-measure ul li {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: 11px 18px 11px 22px;
	border-bottom: 1px solid var(--cc-accent-tint);
	line-height: 1.6;
	color: var(--body-font-color);
	list-style: none;
}

.p-location .copy .copy-measure ul li::before {
	content: "";
	position: absolute;
	top: 18px;
	left: 0;
	width: 6px;
	height: 6px;
	background: var(--secondary-color);
}

.p-location .copy .copy-measure ul li a {
	display: block;
	color: var(--title-font-color);
	font-weight: 500;
	transition: color .2s ease;
}

.p-location .copy .copy-measure ul li a:hover { color: var(--secondary-color); }


/* --------------------------------------------------------------------------
5. CENTRED INTRO
-------------------------------------------------------------------------- */

/*
* Full width. The 820px cap with `margin: 0 auto` was centring this block inside
* the section, which is what left the region intro indented against the
* left-aligned content around it.
*/
.p-location #who-we-are + section .col-lg-12 > div {
/* 	max-width: 100%; */
	margin: 0 auto;
}

.p-location #who-we-are + section p {
	font-size: var(--cc-text);
	line-height: 1.8;
	margin-bottom: 28px;
}

.locations-area p{
	    max-width: 85ch;
}

/* --------------------------------------------------------------------------
6. IMAGE PAIRS

.mb-min-50 pulls the inset image 50px below the pair with no clearance
reserved, so it overhangs the next section in three places. The wrapper
reserves it. The inset also gets a white mat so it reads as deliberate
rather than as one image accidentally covering another.
-------------------------------------------------------------------------- */

.p-location .relative:has(> .mb-min-50) { padding-bottom: 58px; }

.p-location .rounded-1.bg-body {
	border-radius: var(--rounded-1) !important;
	overflow: hidden;
}

.p-location .rounded-1.bg-body img { display: block; }

.p-location .rounded-1.bg-body.w-90 { border: 1px solid var(--cc-border); }

.p-location .rounded-1.bg-body.w-50.abs {
	padding: 7px;
	background: var(--cc-surface);
	box-shadow: 0 18px 36px rgba(var(--primary-color-rgb), .16) !important;
}

.p-location .rounded-1.bg-body.w-50.abs img { border-radius: 4px; }


/* --------------------------------------------------------------------------
7. TWO-COLUMN TEXT
-------------------------------------------------------------------------- */

.p-location .ps-lg-3 p,
.p-location .col-md-6 > p {
	max-width: none;   /* body copy runs the full content column */
	line-height: 1.8;
}


/* ==========================================================================
8. STRUCTURAL FIX — the half-fluid sections

Inspection Control and Regional Coverage both use:

<div class="col-lg-6 position-lg-absolute right-half h-100 offset-lg-6">

`position-lg-absolute` does not exist. Bootstrap 5 ships .position-absolute
but has no responsive variants of it, so the class does nothing and the
column never leaves the flow. Meanwhile .half-fluid .right-half in
style.css is `left:50%; margin-left:-50vw; width:100vw` — a 100vw block
still in the flow — and .offset-lg-6 pushes it 50% further right on top of
that. The result is a 100vw element offset half a screen, which is what
blows the layout open and forces the horizontal scroll.

Rather than lean on those rules, both sections become a plain two-column
grid. The .image div keeps its data-bgimage hook and its height; the
spacer divs are removed because padding on the grid cell is predictable
and four stacked spacers are not.
-------------------------------------------------------------------------- */

.p-location .about .half-fluid,
.p-location .about .half-fluid > .container-fluid {
	position: static;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.p-location .about .half-fluid .row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	align-items: center;
}

/* Neutralise the 100vw / absolute / offset rules on the columns. */
.p-location .about .half-fluid .row > [class*="col-"] {
	position: static !important;
	left: auto;
	right: auto;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	flex: none;
}

.p-location .about .half-fluid .image {
	min-height: 100%;
	height: 600px;
	background-size: cover;
	background-position: center;
}

/* Four stacked spacer divs are how the text column was being centred. */
.p-location .about .spacer-single,
.p-location .about .spacer-double {
	display: none;
}

.p-location .about .px-5 {
	max-width: 820px;
	margin: 0 auto;
	padding: clamp(30px, 6vw, 60px) clamp(24px, 4vw, 30px) !important;
	text-align: center;
}

.p-location .about .px-5 p {
	line-height: 1.8;
	margin-bottom: 18px;
}

.p-location .about .px-5 > *:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
9. DARK BANDS
-------------------------------------------------------------------------- */

.p-location .principles,
.p-location > section.bg-color,
.p-location .faq-section {
	position: relative;
	border-top: 1px solid rgba(var(--secondary-color-rgb), .45);
}

.p-location .principles .container,
.p-location .faq-section .container {
	position: relative;
	z-index: 2;
}


/* --------------------------------------------------------------------------
10. SERVICE CARDS

.de__pcard has no padding, so the image sits flush to the border and the
copy flush to the image. The equal-height script writes an inline height
onto the card, so all spacing has to be internal.
-------------------------------------------------------------------------- */

.p-location .principles .de__pcard {

	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: var(--rounded-1);
	text-align: left;

	transition: border-color .22s ease, transform .22s ease;
}

.p-location .principles .item:hover .de__pcard {
	border-color: var(--cc-accent-line);
	transform: translateY(-4px);
}

.p-location .principles .de__pcard > img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-bottom: 0 !important;
}

.p-location .principles .de__pcard h3 {
	font-size: var(--cc-title-sm);
	font-weight: 600;
	line-height: 1.35;
	color: var(--title-font-color);
	padding-top:15px;
}

.svc-rail__flag{
	display: none;
}

.location-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
	justify-content: space-between;
}

.location-area .btn-main {
	margin-top: auto;
}

.p-location .principles .de__pcard p {
	font-size: 16px;
	line-height: 1.5;
	color: var(--body-font-color);

}

.p-location .principles .de__pcard {
	display: flex;
	flex-direction: column;

}

.p-location .principles .de__pcard p {
	margin-bottom: 0;
}

.p-location .principles .de__pcard .de__pcard-btn,
.p-location .principles .de__pcard a {
	margin-top: auto;
}

.p-location .principles .owl-carousel { margin-bottom: 0; }


/* --------------------------------------------------------------------------
11. COVERAGE TAGS

.badge-pill is a Bootstrap 4 class; Bootstrap 5 renamed it .rounded-pill,
so these currently render as a bare .badge with no shape at all.
-------------------------------------------------------------------------- */

.p-location .tags {
	margin-top: 30px;
	padding-top: 26px;
	border-top: 1px solid var(--cc-border);
}

.p-location .loction-desk {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	justify-content:center;
}

.tags a { display: inline-block; }

.p-location .tags .badge {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--cc-border);
	border-radius: 100px;
	margin-bottom:1px;
	background: var(--cc-surface);
	font-family: var(--title-font);
	font-size: var(--cc-text-xs);
	font-weight: 500;
	line-height: 1.3;
	color: var(--title-font-color);
	white-space: normal;
	transition: background-color .2s ease, border-color .2s ease;
}

.p-location .tags a:hover .badge {
	
	border-color: var(--secondary-color);
}

.hero-bottom-area{
	    max-width: 800px;
    margin: 0 auto 0 0!important;
    text-align: left;
}

.hero-bottom-area p{
	max-width:100%;
}


/* ==========================================================================
12. FAQ — rebuilt

Was: full-width rows on a dark band, heading centred above them, questions
running the entire 1400px container. At that width the eye loses the line
between question and answer, and there is nothing to show an item is
interactive until you hover it.

Now: a two-column layout. The heading holds the left column and stays put
while you read; the questions become separate cards in a narrower right
column, so each one is an obvious, self-contained target.

The grid is built on .container itself — .row (the heading) is pinned to
column one and every .faq-item is placed in column two. No markup change.

The accordion script is untouched: it writes max-height inline when
opening and clears it when closing, so only the closed state and the
transition are set here.
========================================================================== */

@media (min-width: 992px) {
	.p-location .faq-section .container {
		display: grid;
		grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
		column-gap: clamp(48px, 6vw, 96px);
		align-items: start;
	}

	.p-location .faq-section .row {
		grid-column: 1;
		grid-row: 1 / -1;
		position: sticky;
		top: 110px;
		display: block;
		margin: 0;
	}

	.p-location .faq-section .faq-item {
		grid-column: 2;
	}

}

.p-location .faq-section .container {
	counter-reset: cc-faq;
}

.p-location .faq-section .row > [class*="col-"] {

	padding: 0;
	margin: 0 !important;
	text-align: left !important;
}

.p-location .faq-section h2 {
	margin-bottom: 0;
}

/* --- The cards ------------------------------------------------------------ */

.p-location .faq-section .faq-item {
	counter-increment: cc-faq;
	position: relative;
	margin-bottom: 12px;
	padding: 0 clamp(18px, 2.5vw, 28px);
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 14px;
	background: rgba(255, 255, 255, .05);
	transition: background-color .25s ease, border-color .25s ease;
}

.p-location .faq-section .faq-item:hover {
	border-color: rgba(255, 255, 255, .3);
}

.p-location .faq-section .faq-item.active {
	background: rgba(255, 255, 255, .09);
	border-color: rgba(var(--secondary-color-rgb), .6);
}

.p-location .faq-section .faq-item:last-of-type {
	margin-bottom: 0;
}

/* --- The question --------------------------------------------------------- */

.p-location .faq-section .faq-question {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 22px 0;
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
}

/* Numbered by counter, so adding a row renumbers itself. */
.p-location .faq-section .faq-question::before {
	content: counter(cc-faq, decimal-leading-zero);
	flex: 0 0 auto;
	font-family: var(--title-font);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .12em;
	line-height: 1;
	color: #C4AC55;
}

.p-location .faq-section .faq-question h3 {
	flex: 1 1 auto;
	margin: 0;
	font-size: var(--cc-h4);
	font-weight: 500;
	line-height: 1.45;
	color: #ffffff;
	transition: color .22s ease;
}

.p-location .faq-section .faq-item.active .faq-question h3,
.p-location .faq-section .faq-question:hover h3 {
	color: #9F8A38;
}

/* --- The control ---------------------------------------------------------- */

.p-location .faq-section .faq-question .icon {
	position: relative;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 100px;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.p-location .faq-section .faq-question:hover .icon {
	border-color: #C4AC55;
}

.p-location .faq-section .faq-item.active .faq-question .icon {
	background: #9F8A38;
	border-color: #9F8A38;
	transform: rotate(180deg);
}

.p-location .faq-section .faq-question .icon::before,
.p-location .faq-section .faq-question .icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: #C4AC55;
	transform: translate(-50%, -50%);
	transition: opacity .25s ease, background-color .25s ease;
}

.p-location .faq-section .faq-question .icon::before { width: 13px; height: 2px; }
.p-location .faq-section .faq-question .icon::after  { width: 2px;  height: 13px; }

.p-location .faq-section .faq-item.active .faq-question .icon::before {
	background: var(--primary-color);
}

.p-location .faq-section .faq-item.active .faq-question .icon::after {
	opacity: 0;
}

/* --- The answer ----------------------------------------------------------- */

.p-location .faq-section .faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height .35s ease;
}

.p-location .faq-section .faq-answer p {
	max-width: none;   /* body copy runs the full content column */
	padding: 0 0 24px 34px;
	margin: 0;
	font-size: var(--cc-body);
	line-height: 1.8;
	color: var(--cc-on-dark);
}


/* --------------------------------------------------------------------------
13. SUBMIT PROJECT
-------------------------------------------------------------------------- */

.p-location .bg-light.rounded-1 {
	border: 1px solid var(--cc-border);
	box-shadow: none;
}

.p-location .bg-light .p-30 a {
	color: var(--title-font-color);
	font-weight: 500;
}

.p-location .bg-light .p-30 a:hover { color: var(--secondary-color); }

.p-location .rounded-10px:has(#contact_form) {
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: var(--rounded-1);
	padding: clamp(24px, 3vw, 38px) !important;
	box-shadow: var(--cc-shadow);
}

.p-location #contact_form .field-set { margin-bottom: 4px; }

.p-location #contact_form .form-control:focus,
.p-location #contact_form .form-select:focus {
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 3px var(--cc-accent-tint);
}


/* --------------------------------------------------------------------------
14. FOCUS

The theme's global transition block sets `outline: none` broadly, leaving
keyboard users with no position indicator.
-------------------------------------------------------------------------- */

.p-location .copy .copy-measure a:focus-visible,
.p-location .tags a:focus-visible,
.p-location .faq-section .faq-question:focus-visible,
.p-location .principles .de__pcard a:focus-visible {
	outline: 2px solid var(--secondary-color);
	outline-offset: 3px;
}


/* --------------------------------------------------------------------------
15. RESPONSIVE
-------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.p-location .relative:has(> .mb-min-50) { padding-bottom: 46px; }

	/* Half-fluid stacks: image first, then copy. */
	.p-location .about .half-fluid .row {
		grid-template-columns: minmax(0, 1fr);
	}
		.p-location .tags .badge{
		    padding: 6px 12px;
		font-size:14px;
			        margin-bottom: 0px;
	}

	.p-location .about .half-fluid .image {
	        height: 300px!important;
        margin-top: 50px;
	}

	.p-location .about .px-5 {
		max-width: none;
		padding: clamp(40px, 8vw, 64px) 24px !important;
	}

	.p-location .faq-section h2 {
		margin-bottom: 28px;
	}
}

@media (max-width: 767px) {
	.p-location .copy .copy-measure ul {
		grid-template-columns: minmax(0, 1fr);
	}

	.p-location .faq-section .faq-item {
		padding: 0 18px;
		border-radius: 12px;
	}

	.p-location .faq-section .faq-question {
		gap: 12px;
		padding: 18px 0;
	}

	/* Size comes from --cc-h4, which already steps down here. */

	.p-location .faq-section .faq-question .icon {
		width: 30px;
		height: 30px;
	}

	.p-location .faq-section .faq-answer p {
		padding-left: 0;
		padding-bottom: 20px;
	}

	/* components.css makes .btn-main full width below 767px. */
	.p-location .principles .de__pcard .btn-main { align-self: stretch; }

	.p-location .principles .item:hover .de__pcard { transform: none; }
}


/* --------------------------------------------------------------------------
16. MOTION
-------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.p-location .principles .de__pcard,
	.p-location .tags .badge,
	.p-location .faq-section .faq-item,
	.p-location .faq-section .faq-question h3,
	.p-location .faq-section .faq-question .icon,
	.p-location .faq-section .faq-question .icon::before,
	.p-location .faq-section .faq-question .icon::after,
	.p-location .faq-section .faq-answer,
	.p-location .copy .copy-measure ul li a {
		transition: none;
	}

	.p-location .principles .item:hover .de__pcard { transform: none; }
	.p-location .faq-section .faq-item.active .faq-question .icon { transform: none; }
}

.owl-prev, .owl-next, .d-nav-left, .d-nav-right{
	top: 45%;
}

.p-location .principles .owl-carousel {
	margin-bottom: 0;
}

.p-location .principles .owl-theme .owl-nav.disabled + .owl-dots,
.p-location .principles .owl-dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: clamp(28px, 3vw, 40px);
}

.p-location .principles .owl-dot {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 100px;
	background: rgba(255, 255, 255, .3);
	transition: width .28s cubic-bezier(.22, .61, .36, 1), background-color .28s ease;
}

.p-location .principles .owl-dot:hover {
	background: rgba(255, 255, 255, .55);
}

/* The active dot stretches into a short bar rather than just changing
colour — position is readable at a glance, not only on close inspection. */
.p-location .principles .owl-dot.active {
	width: 28px;
	background: #C4AC55;
}

.p-location .principles .owl-dot:focus-visible {
	outline: 2px solid #C4AC55;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.p-location .principles .owl-dot {
		transition: none;
	}
}















/* ==========================================================================
ConstructCo — Market detail pages (/markets/{slug}/)

Append after the markets hub block. Pairs with page-market-detail.php.

NOT touched: .btn-main and .btn-line. Two rules position a card link;
neither restyles a button.

Everything resolves from theme tokens, so a brand change flows through.
========================================================================== */


/* --------------------------------------------------------------------------
1. OPENING
-------------------------------------------------------------------------- */

.market-detail .mk-lead {
	font-size: var(--cc-h4);
	line-height: 1.55;
	font-weight: 500;
	color: var(--title-font-color);
	margin-bottom: 20px;

}

/* .mb-min-50 pulls the inset image 50px below the pair with no clearance
reserved, so it overhangs the section beneath. Same fix as the locations. */
.market-detail .relative:has(> .mb-min-50) {
	padding-bottom: 58px;
}

.market-detail .rounded-1.bg-body.w-90 {
	border: 1px solid var(--cc-border);
}

.market-detail .rounded-1.bg-body.w-50.abs {
	padding: 7px;
	background: var(--cc-surface);
}

.market-detail .rounded-1.bg-body.w-50.abs img {
	border-radius: 4px;
}


/* ==========================================================================
2. IMAGE BAND

Full-bleed photograph with one line over it. The page needs a point where
the work is shown rather than described — and it breaks the run of cream
sections, which is what stops a long page reading as one undifferentiated
scroll.
========================================================================== */

.market-detail .mk-band {
	padding: clamp(90px, 12vw, 190px) 0;
	background: var(--primary-color);
	overflow: hidden;
}

.market-detail .mk-band .jarallax-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Dark enough for text, light enough that the photograph still reads. */
.market-detail .mk-band .de-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(var(--primary-color-rgb), .92) 0%,
		rgba(var(--primary-color-rgb), .78) 45%,
		rgba(var(--primary-color-rgb), .45) 100%
	);
}

.market-detail .mk-band__statement {
	margin: 0;
	font-family: var(--title-font);
	font-size: var(--cc-h2);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -.005em;
	color: #ffffff;
}

/* A brass rule above the statement, the same mark used to open a section
everywhere else on the site. */
.market-detail .mk-band__statement::before {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-bottom: 30px;
	background: #C4AC55;
}


/* ==========================================================================
3. THE REGISTER

Seven bullet points give a section no scale. Numbered rows with a large
numeral do — the number carries the weight, the type stays quiet, and the
list reads as a schedule rather than as filler.
========================================================================== */

.market-detail .mk-register {
	counter-reset: mk-item;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 4vw, 72px);
	margin: 0;
	padding: 0;
	list-style: none;

}

.market-detail .mk-register > li {
	counter-increment: mk-item;
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
	padding: 22px 0;
	border-bottom: 1px solid var(--cc-border);
	list-style: none;
}

.market-detail .mk-register > li::before {
	content: counter(mk-item, decimal-leading-zero);
	flex: 0 0 auto;
	width: 56px;
	font-family: var(--title-font);
	font-size: var(--cc-h2);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--cc-accent-line);
}

.market-detail .mk-register > li > span {
	font-size: var(--cc-text);
	line-height: 1.6;
	color: var(--body-font-color);
}


/* ==========================================================================
4. CONSTRAINTS — dark band

Was: five runs of loose text under a hairline, with a tick above each and
nothing holding them. At that scale on a dark ground the items read as
fragments floating in the band rather than as five distinct conditions —
and the band was padded for far more content than it carries, leaving a
deep empty strip beneath.

Now each condition is an object: a tinted panel, a large index numeral, and
real internal padding. The numerals give the section the weight it was
missing, the panels give the eye edges to land on, and the band is padded
to the content instead of to a full-height section.
========================================================================== */

.market-detail .mk-constraints {
	padding-top: clamp(60px, 7vw, 96px);
	padding-bottom: clamp(60px, 7vw, 96px);
	border-top: 1px solid rgba(var(--secondary-color-rgb), .45);
}

.market-detail .mk-constraints .cc-sechead {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.market-detail .mk-constraints .cc-sechead__eyebrow {
	color: #C4AC55;
}

.market-detail .mk-cols {
	counter-reset: mk-col;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.market-detail .mk-cols > li {
	counter-increment: mk-col;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: 26px 22px 30px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--rounded-1);
	list-style: none;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.market-detail .mk-cols > li:hover {
	background: rgba(255, 255, 255, .085);
	border-color: rgba(var(--secondary-color-rgb), .55);
	transform: translateY(-3px);
}

/* The numeral carries the weight so the copy can stay quiet. */
.market-detail .mk-cols > li::before {
	content: counter(mk-col, decimal-leading-zero);
	font-family: var(--title-font);
	font-size: var(--cc-h2);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: rgba(255, 255, 255, .24);
	transition: color .25s ease;
}

.market-detail .mk-cols > li:hover::before {
	color: #C4AC55;
}

.market-detail .mk-cols > li > span {
	display: block;
	font-size: var(--cc-text-sm);
	line-height: 1.65;
	color: var(--cc-on-dark);
}


/* --- On-dark accent -------------------------------------------------------
.id-color-2 resolves to #9F8A38, which is about 2.4:1 on #2e2e22 — the
second heading line reads as dimmed rather than accented. Same hue lifted,
inside dark bands only.
-------------------------------------------------------------------------- */

.market-detail .bg-color .id-color-2,
.market-detail .text-white .id-color-2 {
	color: #C4AC55;
}


/* ==========================================================================
5. CARDS

Thumbnails on every card. Text-only cards on flat cream were the single
biggest reason the page read as plain, whatever the type was doing.
========================================================================== */

.market-detail .cc-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.market-detail .cc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.market-detail .cc-card:hover .cc-card__media img {
	transform: scale(1.05);
}

.market-detail .cc-card:hover {
	border-color: var(--cc-accent-line);
	box-shadow: var(--cc-shadow);
	transform: translateY(-4px);
}

.market-detail .cc-card__body {
	display: flex;
	flex-direction: column;

	padding: clamp(24px, 2.6vw, 32px);
}

.market-detail .cc-card__eyebrow {
	letter-spacing: .14em;
	margin-bottom: 10px;
}

.market-detail .cc-card__title {
	line-height: 1.5;
	margin-bottom: 15px;
}

.market-detail .cc-card__text {
	line-height: 1.65;
	margin-bottom: 22px;
}

/* Positions the link, does not restyle it. The four excerpts differ in
length and the project cards have none, so without this the actions land
at four different heights. */
.market-detail .cc-card__link {
	margin-top: auto;
	align-self: flex-start;
}

.market-detail .cc-card__link i {
	position: relative;
	left: 0;
	transition: left .25s ease;
}

.market-detail .cc-card:hover .cc-card__link i {
	left: 5px;
}

/* Two project cards on a wide grid — a taller crop stops them reading as
letterboxes. */
.market-detail .mk-proof .cc-card__media {
	aspect-ratio: 3 / 2;
}


/* --------------------------------------------------------------------------
6. SECTION HEADS AND CLOSING BAND
-------------------------------------------------------------------------- */

.market-detail .cc-sechead {
	margin-bottom: clamp(28px, 3.5vw, 44px);
}

.market-detail .closing {
	border-top: 1px solid rgba(var(--secondary-color-rgb), .45);
}

.market-detail .closing h2 {
	margin-bottom: 14px;
}

.market-detail .closing p {
	max-width: 62ch;
	margin-bottom: 0;
	line-height: 1.8;
}


/* --------------------------------------------------------------------------
7. FOCUS

The theme's global transition block sets `outline: none` broadly.
-------------------------------------------------------------------------- */

.market-detail .cc-card__title a:focus-visible,
.market-detail .cc-card__link:focus-visible,
.market-detail .cc-card__media:focus-visible {
	outline: 2px solid var(--secondary-color);
	outline-offset: 3px;
}


/* --------------------------------------------------------------------------
8. RESPONSIVE
-------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.market-detail .mk-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.market-detail .mk-band,
	.cc-detail .mk-constraints{
		margin-top:60px;
	}
}

@media (max-width: 991px) {
	.market-detail .pe-lg-5 {
		padding-right: 0 !important;
	}
	.market-detail .cc-card__eyebrow{
		margin-bottom:0;
	}
	.market-detail .mk-band,
	.cc-detail .mk-constraints{
		margin-top:60px;
	}

	.market-detail .relative:has(> .mb-min-50) {
		padding-bottom: 46px;
	}

	.market-detail .mk-register {
		grid-template-columns: minmax(0, 1fr);
	}

	.market-detail .mk-band .de-overlay {
		background: rgba(var(--primary-color-rgb), .82);
	}
}

@media (max-width: 767px) {
	.market-detail .mk-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.market-detail .mk-cols > li {
		gap: 14px;
		padding: 22px 20px 24px;
	}

	.market-detail .mk-cols > li:hover {
		transform: none;
	}

	.market-detail .mk-register > li {
		gap: 14px;
		padding: 18px 0;
	}

	.market-detail .mk-register > li::before {
		width: 40px;
	}

	.market-detail .closing .text-lg-end {
		text-align: left !important;
	}

	.market-detail .cc-card:hover {
		transform: none;
	}
}


@media (max-width: 479px) {
	.market-detail .mk-cols {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* --------------------------------------------------------------------------
9. MOTION
-------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.market-detail .cc-card,
	.market-detail .cc-card__media img,
	.market-detail .cc-card__link i,
	.market-detail .mk-cols > li,
	.market-detail .mk-cols > li::before {
		transition: none;
	}

	.market-detail .mk-cols > li:hover {
		transform: none;
	}

	.market-detail .cc-card:hover,
	.market-detail .cc-card:hover .cc-card__media img {
		transform: none;
	}
}










/* ==========================================================================
ConstructCo — Detail pages
Market detail (/markets/{slug}/) and project detail (/projects/{slug}/)

Append after the markets hub block. Pairs with page-market-detail.php and
page-project-detail.php.

Both templates carry `cc-detail` on #content plus their own modifier,
`cc-detail--market` or `cc-detail--project`. The two pages are the same
kind of document — an opening, a numbered register, a dark band of
conditions, a card grid and a close — so they share one set of components
rather than drifting into two.

NOT touched: .btn-main and .btn-line. Two rules position a card link;
neither restyles a button.

Everything resolves from theme tokens, so a brand change flows through.
========================================================================== */


/* --------------------------------------------------------------------------
1. OPENING
-------------------------------------------------------------------------- */

.cc-detail .mk-lead {
	font-size: var(--cc-h3);
	line-height: 1.55;
	font-weight: 500;
	color: var(--title-font-color);
	margin-bottom: 20px;
	max-width: 26ch;
}

/* .mb-min-50 pulls the inset image 50px below the pair with no clearance
reserved, so it overhangs the section beneath. Same fix as the locations. */
.cc-detail .relative:has(> .mb-min-50) {
	padding-bottom: 58px;
}

.cc-detail .rounded-1.bg-body.w-90 {
	border: 1px solid var(--cc-border);
}

.cc-detail .rounded-1.bg-body.w-50.abs {
	padding: 7px;
	background: var(--cc-surface);
}

.cc-detail .rounded-1.bg-body.w-50.abs img {
	border-radius: 4px;
}


/* ==========================================================================
2. IMAGE BAND

Full-bleed photograph with one line over it. The page needs a point where
the work is shown rather than described — and it breaks the run of cream
sections, which is what stops a long page reading as one undifferentiated
scroll.
========================================================================== */

.cc-detail .mk-band {
	padding: clamp(90px, 12vw, 190px) 0;
	background: var(--primary-color);
	overflow: hidden;
}

.cc-detail .mk-band .jarallax-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Dark enough for text, light enough that the photograph still reads. */
.cc-detail .mk-band .de-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(var(--primary-color-rgb), .92) 0%,
		rgba(var(--primary-color-rgb), .78) 45%,
		rgba(var(--primary-color-rgb), .45) 100%
	);
}

.cc-detail .mk-band__statement {
	margin: 0;
	font-family: var(--title-font);
	font-size: var(--cc-h2);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -.005em;
	color: #ffffff;
}

.cc-detail .mk-band__eyebrow {
	margin-bottom: 18px;
	font-family: var(--body-font);
	font-size: var(--cc-eyebrow);
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #C4AC55;
}

/* When an eyebrow is present it carries the opening mark instead. */
.cc-detail .mk-band__eyebrow + .mk-band__statement::before {
	display: none;
}

/* A brass rule above the statement, the same mark used to open a section
everywhere else on the site. */
.cc-detail .mk-band__statement::before {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-bottom: 30px;
	background: #C4AC55;
}


/* ==========================================================================
3. THE REGISTER

Seven bullet points give a section no scale. Numbered rows with a large
numeral do — the number carries the weight, the type stays quiet, and the
list reads as a schedule rather than as filler.
========================================================================== */

.cc-detail .mk-register {
	counter-reset: mk-item;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 4vw, 72px);
	margin: 0;
	padding: 0;
	list-style: none;

}

.cc-detail .mk-register > li {
	counter-increment: mk-item;
	display: flex;
	align-items: baseline;
	gap: 20px;
	min-width: 0;
	padding: 22px 0;
	border-bottom: 1px solid var(--cc-border);
	list-style: none;
}

.cc-detail .mk-register > li::before {
	content: counter(mk-item, decimal-leading-zero);
	flex: 0 0 auto;
	width: 56px;
	font-family: var(--title-font);
	font-size: var(--cc-h2);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--cc-accent-line);
}

.cc-detail .mk-register > li > span {
	font-size: var(--cc-text);
	line-height: 1.6;
	color: var(--body-font-color);
}


/* ==========================================================================
4. CONSTRAINTS — dark band

Was: five runs of loose text under a hairline, with a tick above each and
nothing holding them. At that scale on a dark ground the items read as
fragments floating in the band rather than as five distinct conditions —
and the band was padded for far more content than it carries, leaving a
deep empty strip beneath.

Now each condition is an object: a tinted panel, a large index numeral, and
real internal padding. The numerals give the section the weight it was
missing, the panels give the eye edges to land on, and the band is padded
to the content instead of to a full-height section.
========================================================================== */

.cc-detail .mk-constraints {
	padding-top: clamp(60px, 7vw, 96px);
	padding-bottom: clamp(60px, 7vw, 96px);
	border-top: 1px solid rgba(var(--secondary-color-rgb), .45);
}

.cc-detail .mk-constraints .cc-sechead {
	margin-bottom: clamp(28px, 3vw, 40px);
}

.cc-detail .mk-constraints .cc-sechead__eyebrow {
	color: #C4AC55;
}

.cc-detail .mk-cols {
	counter-reset: mk-col;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-detail .mk-cols > li {
	counter-increment: mk-col;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: 26px 22px 30px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--rounded-1);
	list-style: none;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.cc-detail .mk-cols > li:hover {
	background: rgba(255, 255, 255, .085);
	border-color: rgba(var(--secondary-color-rgb), .55);
	transform: translateY(-3px);
}

/* The numeral carries the weight so the copy can stay quiet. */
.cc-detail .mk-cols > li::before {
	content: counter(mk-col, decimal-leading-zero);
	font-family: var(--title-font);
	font-size: var(--cc-h2);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: rgba(255, 255, 255, .24);
	transition: color .25s ease;
}

.cc-detail .mk-cols > li:hover::before {
	color: #C4AC55;
}

/* The project page carries four conditions, the market page five. */
.cc-detail .mk-cols--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cc-detail .mk-cols > li > span {
	display: block;
	font-size: var(--cc-text-sm);
	line-height: 1.65;
	color: var(--cc-on-dark);
}


/* --- On-dark accent -------------------------------------------------------
.id-color-2 resolves to #9F8A38, which is about 2.4:1 on #2e2e22 — the
second heading line reads as dimmed rather than accented. Same hue lifted,
inside dark bands only.
-------------------------------------------------------------------------- */

.cc-detail .bg-color .id-color-2,
.cc-detail .text-white .id-color-2 {
	color: #C4AC55;
}


/* ==========================================================================
5. CARDS

Thumbnails on every card. Text-only cards on flat cream were the single
biggest reason the page read as plain, whatever the type was doing.
========================================================================== */

.cc-detail .cc-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.cc-detail .cc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

.cc-detail .cc-card:hover .cc-card__media img {
	transform: scale(1.05);
}

.cc-detail .cc-card:hover {
	border-color: var(--cc-accent-line);
	box-shadow: var(--cc-shadow);
	transform: translateY(-4px);
}

.cc-detail .cc-card__body {
	display: flex;
	flex-direction: column;

	padding: clamp(24px, 2.6vw, 30px);
}

.cc-detail .cc-card__eyebrow {
	letter-spacing: .14em;
	margin-bottom: 10px;
}

.cc-detail .cc-card__title {
	line-height: 1.35;
	margin-bottom: 12px;
}

.cc-detail .cc-card__text {
	line-height: 1.65;
	margin-bottom: 22px;
}

/* Positions the link, does not restyle it. The four excerpts differ in
length and the project cards have none, so without this the actions land
at four different heights. */
.cc-detail .cc-card__link {
	margin-top: auto;
	align-self: flex-start;
}

.cc-detail .cc-card__link i {
	position: relative;
	left: 0;
	transition: left .25s ease;
}

.cc-detail .cc-card:hover .cc-card__link i {
	left: 5px;
}

/* Two project cards on a wide grid — a taller crop stops them reading as
letterboxes. */
.cc-detail .mk-proof .cc-card__media {
	aspect-ratio: 3 / 2;
}


/* --------------------------------------------------------------------------
6. SECTION HEADS AND CLOSING BAND
-------------------------------------------------------------------------- */

.cc-detail .cc-sechead {
	margin-bottom: clamp(15px, 3.5vw, 30px);
}

.cc-detail .closing {
	border-top: 1px solid rgba(var(--secondary-color-rgb), .45);
}

.cc-detail .closing h2 {
	margin-bottom: 15px;
}

.cc-detail .closing p {
	max-width: 62ch;
	margin-bottom: 0;
	line-height: 1.8;
}


/* ==========================================================================
6b. PROJECT DETAIL

The case-study image sits at 2000x800. Framed at container width it is the
one place on the page where the work is actually visible, so it is given
the full measure rather than being dropped into the copy column.
========================================================================== */

.cc-detail--project .mk-figure {
	margin: clamp(34px, 4vw, 52px) 0 0;
}

.cc-detail--project .mk-figure img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--cc-border);
	border-radius: var(--rounded-1);
}

/* The opening statement of a case study carries the problem, so it runs at
lead size rather than body size. */
.cc-detail--project .mk-problem {
	font-size: var(--cc-body);
	line-height: 1.5;
	color: var(--title-font-color);
	max-width: 68ch;
	margin-bottom: 0;
}


/* --------------------------------------------------------------------------
7. FOCUS

The theme's global transition block sets `outline: none` broadly.
-------------------------------------------------------------------------- */

.cc-detail .cc-card__title a:focus-visible,
.cc-detail .cc-card__link:focus-visible,
.cc-detail .cc-card__media:focus-visible {
	outline: 2px solid var(--secondary-color);
	outline-offset: 3px;
}
#line-rapid-response{
	padding-bottom:0!important;
}

/* --------------------------------------------------------------------------
8. RESPONSIVE
-------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.cc-detail .mk-cols,
	.cc-detail .mk-cols--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	#topbar{
		margin-bottom:15px;
	}
	.p-home .video video {
		width: 100%;
		height: 80vh!important;
	}
	.duo__title{
		font-size: 28px;
	}
	a.btn-main{
		margin-bottom: 10px;
	}
	section,
	footer{
		padding: 60px 0 60px 0;
	}
	.spacer-double {
		width: 100%;
		height: 30px;
	}
	.subfooter {
		margin-top: 20px;
	}

	
	.p-location .principles .de__pcard {
		padding: 15px;
	}
}

@media (max-width: 991px) {
	.cc-detail .pe-lg-5 {
		padding-right: 0 !important;
	}

	.p-home .video video {
		height: 75vh!important;
	}
	.loction-desk .owl-prev, .loction-desk .owl-next, .loction-desk .d-nav-left, .loction-desk .d-nav-right {
		top: 3%;
	}

	a.btn-main {
		margin-bottom: 8px;
		padding: 5px 15px 5px 15px!important;
		font-size:13px!important;
	}

	.p-home .main-heading {
		bottom: 25rem !important;
		width: 65% !important; 
	}




	.subfooter{
		margin-top: 30px;
	}


	footer{
		padding: 60px 0 0 0;
	}
	#mobiletopbar{
		display:block;
	}
	.cc-detail .relative:has(> .mb-min-50) {
		padding-bottom: 46px;
	}

	.cc-detail .mk-register {
		grid-template-columns: minmax(0, 1fr);
	}

	.cc-detail .mk-band .de-overlay {
		background: rgba(var(--primary-color-rgb), .82);
	}
}

@media (max-width: 767px) {
	.cc-detail .mk-cols,
	.cc-detail .mk-cols--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}


	.cc-detail .mk-cols > li {
		gap: 14px;
		padding: 22px 20px 24px;
	}

	.cc-detail .mk-cols > li:hover {
		transform: none;
	}

	.cc-detail .mk-register > li {
		gap: 14px;
		padding: 18px 0;
	}

	.cc-detail .mk-register > li::before {
		width: 40px;
	}

	.cc-detail .closing .text-lg-end {
		text-align: left !important;
	}

	.cc-detail .cc-card:hover {
		transform: none;
	}
}


@media (max-width: 479px) {
	.cc-detail .mk-cols,
	.cc-detail .mk-cols--4 {
		grid-template-columns: minmax(0, 1fr);
	}
}


/* --------------------------------------------------------------------------
9. MOTION
-------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cc-detail .cc-card,
	.cc-detail .cc-card__media img,
	.cc-detail .cc-card__link i,
	.cc-detail .mk-cols > li,
	.cc-detail .mk-cols > li::before {
		transition: none;
	}

	.cc-detail .mk-cols > li:hover {
		transform: none;
	}

	.cc-detail .cc-card:hover,
	.cc-detail .cc-card:hover .cc-card__media img {
		transform: none;
	}
}

.header-mobile #mainmenu li a{
	padding-top:10px!important;
	padding-bottom:10px!important;
	padding-left:0!important;
}

.p-contact {
	/* Scale tokens come from :root. The 42px h2 and 15.5px body this block used
	   to set were the contact page reading one step off every other page. */

	/* #9F8A38 is roughly 2.4:1 on the ink plate. Same hue, lifted, on dark. */
	--ct-brass-lift: #C4AC55;
	--ct-ink: var(--primary-color);
}


/* --------------------------------------------------------------------------
2. RHYTHM
-------------------------------------------------------------------------- */

.p-contact > section {
	padding: clamp(56px, 7vw, 100px) 0;
}



.p-contact .ct-panel {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);

	border-radius: var(--rounded-1);
	overflow: hidden;
}


/* --- ink half ------------------------------------------------------------ */

.p-contact .ct-panel__aside {
	display: flex;
	flex-direction: column;
	padding: clamp(34px, 4.5vw, 64px);
	background: var(--ct-ink);
}

.p-contact .ct-panel__title {
	position: relative;
	margin: 0 0 22px;

	font-size: var(--cc-h2);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: #ffffff;
}


.p-contact .ct-accent {
	display: block;
	color: var(--ct-brass-lift);
}

.p-contact .ct-panel__lead {
	max-width: 38ch;
	margin: 0 0 auto;
	font-size: var(--cc-lede);
	line-height: 1.8;
	color: var(--cc-on-dark);
}


/* --- contact rows on the ink ------------------------------------------- */

.p-contact .ct-details {
	margin-top: clamp(34px, 4vw, 56px);
	border-top: 1px solid rgba(255, 255, 255, .2);
}

.p-contact .ct-detail {
	display: block;
	padding: 20px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .13);
	transition: padding-left .25s ease;
}

.p-contact .ct-detail:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.p-contact .ct-detail:hover {
	padding-left: 10px;
}

.p-contact .ct-detail__label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--body-font);
	font-size: var(--cc-eyebrow);
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--ct-brass-lift);
}

.p-contact .ct-detail__label i {
	margin-right: 7px;
}

.p-contact .ct-detail__value {
	display: block;
	font-family: var(--title-font);
	font-size: var(--cc-h3);
	font-weight: 600;
	line-height: 1.3;
	word-break: break-word;
	color: #ffffff;
	transition: color .25s ease;
}

.p-contact .ct-detail:hover .ct-detail__value {
	color: var(--ct-brass-lift);
}


/* --- white half --------------------------------------------------------- */

.p-contact .ct-panel__form {
	padding: clamp(20px, 4.5vw, 64px);
	background: var(--cc-surface);
}

.p-contact .ct-form__title {
	margin: 0 0 clamp(22px, 2.6vw, 30px);
	padding-bottom: 18px;
	font-size: var(--cc-h3);
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--title-font-color);
}
#contact_form .ct-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 18px;
}

@media (max-width: 767px) {
    #contact_form .ct-form__row {
        grid-template-columns: 1fr;
        gap: 18px 0;
    }
}

#contact_form .field-set {
	margin-bottom: 6px;
}

#contact_form .form-control,
#contact_form .form-select {
	border-radius: var(--rounded-1) !important;
	border: 1px solid var(--cc-border);
	/* background-color, NOT background — see the note on the arrow below. */
	background-color: var(--cc-surface-sunk);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

#contact_form .form-control:focus,
#contact_form .form-select:focus {
	background-color: var(--cc-surface);
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 3px var(--cc-accent-tint);
}

/* --- Service dropdown arrow ------------------------------------------------

The arrow was missing for two reasons, and both had to be fixed.

1. style.css sets `#contact_form select { background: none; }`. An id
selector outranks Bootstrap's .form-select, and `background` is
shorthand — so it reset background-image to none and took the arrow with
it. That was true before this redesign.

2. My own rule above then did the same thing again with
`background: var(--cc-surface-sunk)`. Changed to background-color, which
leaves background-image alone.

The arrow is drawn here as an inline SVG in the brass accent rather than
relying on Bootstrap's grey default, so it matches the rest of the form.
appearance:none removes the browser's native arrow, which would otherwise
sit alongside this one.
-------------------------------------------------------------------------- */

#contact_form select.form-select,
#contact_form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 44px;
	background-color: var(--cc-surface-sunk);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%239F8A38' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 11px auto;
}

#contact_form select.form-select:focus,
#contact_form select:focus {
	background-color: var(--cc-surface);
}

#contact_form textarea.form-control {
	min-height: 150px;
}

#contact_form #submit {
	margin-top: 24px;
	padding-top: 24px;
}


/* ==========================================================================
4. OFFICES — cards

Back to bordered cards on the white surface, each opening with the brass
tick used to open a section elsewhere. The list markup is unchanged; only
these rules differ from the borderless version.
========================================================================== */

.p-contact .ct-office-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.p-contact .ct-office {
	position: relative;
	min-width: 0;
	margin: 0;
	padding: clamp(26px, 3vw, 38px);
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: var(--rounded-1);
	list-style: none;
	transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.p-contact .ct-office:hover {
	border-color: var(--cc-accent-line);
	box-shadow: var(--cc-shadow);
	transform: translateY(-4px);
}

.p-contact .ct-office__region {
	position: relative;
	padding-top: 22px;
	margin-bottom: 14px;
	font-family: var(--title-font);
	font-size: var(--cc-h3);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.005em;
	color: var(--title-font-color);
	border-top: 1px solid var(--cc-border);
}

.p-contact .ct-office__region::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 34px;
	height: 3px;
	background: var(--secondary-color);
}

.p-contact .ct-office__address {
	margin: 0;
	font-style: normal;
	font-size: var(--cc-text-sm);
	line-height: 1.8;
	color: var(--body-font-color);
}


/* --------------------------------------------------------------------------
5. FOCUS

The theme's global transition block sets `outline: none` broadly.
-------------------------------------------------------------------------- */

.p-contact a:focus-visible {
	outline: 2px solid var(--secondary-color);
	outline-offset: 3px;
}

.p-contact .ct-detail:focus-visible {
	outline-color: var(--ct-brass-lift);
	outline-offset: -3px;
}


/* --------------------------------------------------------------------------
6. RESPONSIVE
-------------------------------------------------------------------------- */

@media (max-width: 1199px) {
	.p-contact .ct-panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.padding40 {
    padding: 25px;
}
}

@media (max-width: 991px) {
	.p-contact .ct-panel {
		grid-template-columns: minmax(0, 1fr);
		
	}

	.p-contact .ct-panel__lead {
		max-width: none;
	}

	.p-contact .ct-office-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.p-contact .ct-panel {
		margin-top: 0;
	}

	.p-contact .ct-form__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.p-contact .ct-office-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.p-contact .ct-office:hover {
		transform: none;
	}

	.p-contact .ct-detail:hover {
		padding-left: 0;
	}

	/* Matches the theme's own full-width button behaviour at this breakpoint. */
	.p-contact #send_message {
		width: 100%;
	}
}


/* --------------------------------------------------------------------------
7. MOTION
-------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.p-contact .ct-detail,
	.p-contact .ct-detail__value,
	.p-contact .ct-office,
	.p-contact .form-control,
	.p-contact .form-select {
		transition: none;
	}

	.p-contact .ct-detail:hover {
		padding-left: 0;
	}

	.p-contact .ct-office:hover {
		transform: none;
	}
}

/* ------------------------------------------------- About capability cards */

/*
* The About tabs arrive as heading + bullet list, repeated. Rendered raw they
* stack into identical grids that read as a spreadsheet: no grouping, and no
* signal that some of those groups are a sequence.
*
* inc/about-sections.php pairs each heading with its lead-in line, list and
* closing note into a .cc-cap card. The lists themselves are deliberately NOT
* restyled here — .svc-content .copy-measure ul already gives them the hairline
* row treatment used across the site, and a second bullet style competing with
* it is what made the first attempt look wrong. This file adds grouping only.
*/

.cc-caps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 20px;
	margin: 26px 0 30px;
}

.cc-cap {
	position: relative;
	min-width: 0;
	padding: 14px 24px 6px;
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: 10px;
}

.cc-cap__title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.cc-cap__lead p,
.cc-cap__note p {
	margin: 0;
	font-size: var(--cc-text-sm);
	line-height: 1.55;
}

.cc-cap__lead { margin-bottom: 4px; }

/* A card carrying more than one lead+list pair (Leadership) needs air between
   the groups, but not above the first one. */
.cc-cap__list + .cc-cap__lead { margin-top: 14px; }

.cc-cap__note {
	margin-top: 4px;
	padding: 12px 0 10px;
	border-top: 1px solid var(--cc-border);
}

/* Colour, not opacity: opacity fades every child, so any link or button that
   ended up inside a note was dimmed along with the text. */
.cc-cap__note p { color: rgba(var(--primary-color-rgb), .72); }

/* Last list in a card sits flush to the padding rather than carrying the
   1.5rem the shared list rule adds for body copy. */
.svc-content .copy-measure .cc-cap__list:last-child { margin-bottom: 4px; }

/* ---------------------------------------------- Numbered process variant */

/*
* Stages are one per row and carry no card chrome — the spine and the index are
* what communicate sequence, and boxing each stage as well just adds noise. The
* spine is drawn on the grid, not per card, so it stays continuous across rows.
*/
.cc-caps--process {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin-left: 15px;
	padding-left: 34px;
	border-left: 1px solid var(--cc-accent-line);
}

.cc-caps--process .cc-cap {
	padding: 26px 0 6px;
	background: transparent;
	border: 0;
	border-radius: 0;
}

.cc-caps--process .cc-cap:first-child { padding-top: 2px; }

.cc-caps--process .cc-cap__title {
	margin-bottom: 12px;
	font-size: 19px;
	font-weight: 700;
}

/* The index sits on the spine, centred over the border. */
.cc-cap__step {
	position: absolute;
	top: 24px;
	left: -34px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--secondary-color);
	color: var(--cc-on-accent);
	font-family: var(--deco-font);
	font-size: 12px;
	letter-spacing: .04em;
}

.cc-caps--process .cc-cap:first-child .cc-cap__step { top: 0; }

@media only screen and (max-width: 992px) {
	.cc-caps { grid-template-columns: minmax(0, 1fr); }
	.cc-caps--process { margin-left: 13px; padding-left: 26px; }
	.cc-cap__step { left: -26px; width: 26px; height: 26px; font-size: 11px; }
}


/* ------------------------------------------- Nav at 992-1199px (spec 2.1) */

/*
* #mainmenu used to be display:none from 1199px down, which left 992-1199px with
* no navigation at all: the desktop menu was off, while #menu-btn and the
* .d-lg-none mobile items only appear at <=991px and designesia.js only arms the
* mobile toggle below 993px. The gap was masked by #btn-extra's slide-out panel,
* which was that band's only way into the site until the toggle was removed.
*
* The menu was hidden because it wrapped to two lines and collided with the logo.
* That is a spacing problem, not a width problem: the seven items measure 550px
* of content in a 658px column, but li carries margin-right:30px, so the margins
* alone (210px) push it over. Tightening the gutter in this band keeps the real
* nav on one line rather than trading it for no nav.
*/
/* 993px, not 992: style.css's mobile rules use max-width:992 and designesia.js
   arms the mobile toggle below 993, so the band starts where they stop. */
@media (min-width: 993px) and (max-width: 1199px) {
	#mainmenu > li { margin-right: 10px; }
	#mainmenu > li:last-child { margin-right: 0; }
	#mainmenu > li > a.menu-item { font-size: 13px; }
	/* Without this the first item sits ~8px off the wordmark and reads as part
	   of the logo. */
	.header-col-mid { padding-left: 22px; }
}

/* ------------------------------------------------------------ Insights index */

/*
* One lead paragraph, set at a readable measure, then straight into the grid.
* The index previously repeated its own title as an h2 and listed the topics it
* covers directly above the articles covering them.
*/
.insights-intro {
	max-width: none;
	margin: 0 0 42px;
}

.insights-intro p {
	font-size: 17px;
	line-height: 1.7;
	margin: 0;
}

.insights-intro p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	.insights-intro { margin-bottom: 30px; }
	.insights-intro p { font-size: 16px; }
}

/* ------------------------------------------------------ Region page (p-location) */

/*
* The region template read as a stack of stripes: four dark bands including the
* hero, three different overlapping image collages at three different offsets,
* and section headings whose spacing depended on whether an eyebrow happened to
* be filled in. The copy is unchanged — this is rhythm and consistency only.
*/

/* One framed image per section, always the same crop, replacing the collages. */
.p-location .loc-media {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--cc-surface-sunk);
	box-shadow: var(--cc-shadow);
}

.p-location .loc-media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/*
* Light "sunk" band. Two sections that were solid dark now sit a step back from
* the page instead, so the one remaining dark band (core services) reads as the
* feature rather than as one stripe among four.
*/
.p-location .loc-sunk {
	border-top: 1px solid var(--cc-border);
	border-bottom: 1px solid var(--cc-border);
}

/* Uniform heading rhythm. Previously each section set its own margins and the
   eyebrow was present on some and not others, so the gap above every h2 varied. */
.p-location section > .container > .row h2,
.p-location .locations h2 {
	margin-bottom: 18px;
}

.p-location .subtitle {
	margin-bottom: 10px;
}

.p-location section p:last-child { margin-bottom: 0; }

/*
* Region chips. Written for the location pages, now shared: the identical
* markup (.tags > .loction-desk > a > span.badge) also renders in the homepage
* Service Region block, where it was still picking up the theme defaults and
* looking like a different component.
*/
.tags {
	display: flex;
	flex-wrap: wrap;
	/* Left, with the rest of the site. */
	justify-content: flex-start;
	gap: 8px;
	margin-top: 22px;
}

.tags .loction-desk,
.tags .loction-mob {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 8px;
	width: 100%;
}

/*
* Each link wraps a <span class="badge">, which already carries its own pill
* background and padding. Putting the pill on the anchor as well produced two
* nested, offset pills per link. The badge is the pill; the anchor is only the
* hit area.
*/
.p-location .tags a {
	display: inline-block;
	line-height: 1;
}

.tags a .badge {
	display: inline-block;
	padding: 8px 15px;
	border: 1px solid var(--cc-border-strong);
	border-radius: 100px;
	background: transparent;
	font-family: var(--body-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	color: var(--body-font-color);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.tags a:hover .badge,
.tags a:focus .badge {
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--cc-on-accent);
}

/*
* The FAQ band stays dark. Its cards are built for a dark surface — white rules,
* gold counters, translucent fills — and it now sits far enough from the core
* services band to read as the second deliberate feature rather than one more
* stripe. Four dark bands became two.
*/

/* ------------------------------------------- About: process stage readability */

/*
* The stage lists inherited the shared auto-fill grid (minmax(245px, 1fr)), which
* gave three columns inside a card that is not wide enough for them: seven items
* became 3 + 3 + 1, the hairline row separators broke into fragments across the
* columns, and every stage ended with a half-empty row. Two columns fills evenly,
* keeps the separators continuous, and gives each phrase room to sit on one line.
*/
.svc-content .copy-measure .cc-caps--process .cc-cap__list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 32px;
}

/* Stages were separated by more space than the rows inside them, so the list
   read as scattered rather than sequential. */
.cc-caps--process .cc-cap {
	padding: 18px 0 2px;
}

.cc-caps--process .cc-cap:first-child { padding-top: 0; }

.cc-caps--process .cc-cap__step { top: 16px; }
.cc-caps--process .cc-cap:first-child .cc-cap__step { top: 0; }

/* Row height for every list in the tab panes, process variant included. */
.svc-content .copy-measure ul li,
.svc-content .copy-measure .cc-caps--process .cc-cap__list li {
	padding-top: 6px;
	padding-bottom: 6px;
}

@media (max-width: 767px) {
	.svc-content .copy-measure .cc-caps--process .cc-cap__list {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------- Markets archive intro */

/*
* The intro ran the full container width — around 180 characters a line on a
* desktop viewport, well past the point where the eye loses its place returning
* to the next line — as three stacked headings, two long paragraphs, a run-on
* sentence listing ten job titles, and a default bullet list.
*
* Now: prose at a readable measure with the buyer roles as a panel beside it,
* then the client problems as a two-column card grid.
*/

.mk-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.mk-intro__lead h2 { margin-top: 0; }

.mk-intro__lead p {
	max-width: none;   /* body copy runs the full content column */
	margin-bottom: 16px;
}

.mk-intro__who {
	padding: 26px 28px;
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	border-radius: 12px;
}

.mk-intro__who h3 {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cc-border);
}

.mk-intro__who ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-intro__who li {
	position: relative;
	margin: 0;
	padding: 6px 0 6px 16px;
	font-size: var(--cc-text-sm);
	line-height: 1.45;
}

.mk-intro__who li:before {
	content: '';
	position: absolute;
	top: 14px;
	left: 0;
	width: 5px;
	height: 5px;
	background: var(--secondary-color);
}

.mk-solving {
	margin-top: 48px;
}

.mk-solving h2 { margin-bottom: 20px; }

.mk-solving__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 20px;
}

.mk-solving__item {
	padding: 16px 20px;
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
/* 	border-left: 3px solid var(--cc-accent-line); */
	border-radius: 0 10px 10px 0;
	font-size: 16px;
	line-height: 1.55;
}

@media (max-width: 991px) {
	.mk-intro { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.mk-solving__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ About: intro split */

/*
* The two named sections below the positioning copy used to continue the same
* single column, six paragraphs deep. Side by side they read as two distinct
* points instead of more of the same paragraph run, and they use the width the
* image column leaves free below itself.
*/
.ab-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px 44px;
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--cc-border);
}

.ab-split__col h3 {
	margin: 0 0 14px;
	font-size: var(--cc-h3);
}

.ab-split__col p {
	max-width: none;   /* body copy runs the full content column */
	margin-bottom: 14px;
}

.ab-split__col p:last-child { margin-bottom: 0; }

@media (max-width: 991px) {
	.ab-split {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
		margin-top: 40px;
		padding-top: 30px;
	}
}

/* -------------------------------------------------------- About: commitment quote */

.ab-quote {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	margin: 0;
	padding: 40px 40px 34px;
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
	
	border-radius: 4px 4px 12px 12px;

}

.ab-quote__label {
	position: relative;
	margin-bottom: 16px;
	font-family: var(--body-font);
	font-size: var(--cc-eyebrow);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--secondary-color);
}

.ab-quote__text {
	position: relative;
	margin: 0 0 22px;
	max-width: none;
	font-family: var(--title-font);
	font-size: var(--cc-h3);
	font-weight: 400;
	line-height: 1.55;
	color: var(--title-font-color);
}

.ab-quote__attrib {
	position: relative;
	padding-top: 18px;
	border-top: 1px solid var(--cc-border);
	font-family: var(--body-font);
	font-size: 12.5px;
	letter-spacing: .04em;
	color: var(--body-font-color);
}

.copy-measure p{
	max-width:100%!important;
}

@media (max-width: 991px) {
	.ab-quote { padding: 32px 28px 26px; }
}

/* --------------------------------------------------- Homepage service CTA tile */

/*
* Sixth cell of the five-group grid. Deliberately not a white card — it is the
* one tile that is not a service, and it closes the row that used to end in
* empty space.
*/
.cc-card--cta {
	background: var(--bg-dark-1);
	border-color: var(--bg-dark-1);
}

.cc-card--cta .cc-card__eyebrow { color: var(--secondary-color); }

.cc-card--cta .cc-card__title,
.cc-card--cta .cc-card__title a { color: #ffffff; }

.cc-card--cta .cc-card__text {
	color: var(--cc-on-dark-mut);
}

.cc-card--cta .cc-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}



.cc-card--cta:hover {
	border-color: var(--secondary-color);
	transform: translateY(-3px);
}

/* ============================================================ Square corners ==
 *
 * Site-wide: no rounded corners on anything.
 *
 * Done as one blanket rule rather than by unpicking radii from the dozens of
 * places they are set across style.css, plugins.css, Bootstrap and this file —
 * that way it is a single line to revert, and nothing new can reintroduce a
 * radius without being noticed.
 *
 * Note this also squares shapes that were circles rather than rounded
 * rectangles: the process step numbers, the FAQ open/close controls and the
 * region chips. That is the instruction taken literally; if any of those should
 * stay round, they need an explicit exception below.
 * ========================================================================== */

*,
*::before,
*::after,
/*
 * Bootstrap's radius utilities (.rounded, .rounded-1 … .rounded-pill) declare
 * their own !important at class specificity, which beats the universal selector
 * above even though that is !important too. They have to be named to be beaten.
 */
[class*="rounded"] {
	border-radius: 0 !important;
}

/* ------------------------------------------------------------- Form field fill */

/*
* Inputs and textareas were rendering transparent (a `background: none` rule in
* style.css) while selects kept --cc-surface-sunk from the contact-page styles,
* so half the form was grey and half was white. All white, and background-color
* only so the select keeps its arrow image.
*
* Scoped to #contact_form rather than .p-contact: the same form part now renders
* on the region pages too, which do not carry that body class.
*/
#contact_form .form-control,
#contact_form .form-select,
#contact_form input:not([type="submit"]):not([type="button"]),
#contact_form select,
#contact_form textarea {
	background-color: #ffffff !important;
}



/* The region you are already viewing, so the set reads as a position rather than
   a flat list of links. */
.tags a[aria-current="page"] .badge,
.tags a.is-current .badge {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #ffffff;
}


/* `.about-page .tab-pane h4` sets weight 500 at a higher specificity than
   .cc-cap__title, so the bold card titles need to say so at that level. */
.about-page .tab-pane h4.cc-cap__title,
.cc-caps .cc-cap h4.cc-cap__title {
	font-weight: 700;
}

/* ------------------------------------------------- Homepage A-to-Z delivery band */

/*
* Lifted from .market-detail .mk-band, which is the treatment this was asked to
* match: photograph behind, a left-to-right green wash over it so the type stays
* legible while the image still reads, and a brass rule opening the heading.
*
* Kept as its own block rather than shared with .mk-band — that one wraps a
* single statement of copy, this one wraps a heading plus a five-card carousel,
* so the two need different padding and heading scales.
*/

.hm-band {
	position: relative;
	overflow: hidden;
	background: var(--primary-color);
}

.hm-band .jarallax-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Dark enough for text, light enough that the photograph still reads. */
.hm-band .de-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(var(--primary-color-rgb), .93) 0%,
		rgba(var(--primary-color-rgb), .80) 45%,
		rgba(var(--primary-color-rgb), .50) 100%
	);
}

.hm-band .container {
	position: relative;
	z-index: 2;
}

/* Left aligned, against the centred heading it had before. */
.hm-band__head {
	text-align: left;

	margin-bottom: 8px;
}

.hm-band__head h2 {
	margin: 0;
}

/* The brass rule used to open a section everywhere else on the site. */
.hm-band__head h2::before {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-bottom: 26px;
	background: #C4AC55;
}

/* The stage cards keep their own centred layout inside the carousel. */
.hm-band .owl-carousel { text-align: center; }

/* The prev/next arrows (40px) sit over the outer cards' edges; the side padding
   keeps the copy clear of them. */
#content .hm-band .de__pcard {
	padding: 32px 56px;
}

@media (max-width: 767px) {
	#content .hm-band .de__pcard { padding: 28px 48px; }
}

@media (max-width: 767px) {
	.hm-band__head h2::before { margin-bottom: 18px; }
}

/*
* pages.css loads after this file and sets `.p-home .de-overlay` to a flat black
* wash, which ties on specificity and wins on source order. The band's gradient
* has to be stated at .p-home level to survive.
*/
.p-home .hm-band .de-overlay,
.p-location .hm-band .de-overlay,
#content .hm-band .de-overlay {
	background: linear-gradient(
		90deg,
		rgba(var(--primary-color-rgb), .93) 0%,
		rgba(var(--primary-color-rgb), .80) 45%,
		rgba(var(--primary-color-rgb), .50) 100%
	);
}

/* ------------------------------------------------------- Header + footer ground */

/*
* Header, the strips above it and the footer all sit on #0f0f0c.
*
* Set on the elements rather than by changing --bg-dark-1: that token is also the
* fill for the homepage service CTA tile and other dark surfaces, which should
* stay on the lighter value.
*/
/*
* Sticky header only. The header in its resting state keeps --bg-dark-1, as do
* the strips above it; it is the scrolled/cloned bar that sits on #0f0f0c so it
* reads as a distinct layer over the page rather than as part of it.
*/
/*
* Keyed on .smaller, not .clone. The theme adds `clone` when it builds the fixed
* bar and never removes it, so styling .clone kept the dark fill after scrolling
* back to the top. `smaller` is the class that actually tracks the stuck state —
* it is added on scroll and removed at the top.
*/
#mainheader.smaller,
header.smaller {
	background: #0f0f0c;
}

body footer {
	background: #0f0f0c;
}

/* ==========================================================================
SPACING SYSTEM — applied

The tokens are defined at the top of this file. This block is where they are
put to work. Three rules to keep it maintainable:

  1. Sections own their vertical space. Do not add margin-top to the first
     element inside a section to fake a gap.
  2. Components own their interior padding, from --card-pad-*. Do not set
     padding on a card in page-specific CSS.
  3. Grids use --grid-gap. A one-off gap is a smell; use --grid-gap-lg if a
     block genuinely needs more air.
========================================================================== */

/* --- 1. Section rhythm ---------------------------------------------------- */

/*
* Every content band gets the same vertical padding. .no-top / .no-bottom /
* .pt-0 remain the escape hatches the theme already uses, and hero sections
* (#subheader, .main-sec) set their own.
*/
#content > section,
.p-location > section,
.market-detail > section,
.cc-detail > section {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

#content > section.no-top,
#content > section.pt-0,
.p-location > section.no-top,
.p-location > section.pt-0 { padding-top: 0; }

#content > section.no-bottom,
#content > section.pb-0,
.p-location > section.no-bottom,
.p-location > section.pb-0 { padding-bottom: 0; }

/*
* Adjacent bands share ONE gap, not two.
*
* With every section owning padding on both sides, the space between two of them
* came to 2 x --section-y while the space above the first came to 1 x, so a
* module always had more air under it than over it. The following section drops
* its top padding and inherits the gap from the one above.
*
* A section that introduces its own ground — a dark band, the CTA, a sunk panel —
* keeps its top padding, because there the padding is interior space, not a gap.
*/
#content > section + section,
.p-location > section + section { padding-top: 0; }

/*
* A section following a hero keeps its top padding. The hero's own bottom padding
* sits inside it, over the image, so it supplies no gap to the content below —
* without this the first block of every inner page started flush against the
* hero's bottom edge.
*/
#content > section#subheader + section,
#content > section.main-sec + section,
.p-location > section#subheader + section {
	padding-top: var(--section-y);
}

#content > section + section.cc-cta,
#content > section + section.principles,
#content > section + section.hm-band,
#content > section + section.mk-band,
#content > section + section.loc-sunk,
#content > section + section.faq-section,
#content > section + section.integrated-sec,
#content > section + section[class*="bg-color"],
.p-location > section + section.principles,
.p-location > section + section.loc-sunk,
.p-location > section + section.faq-section,
.p-location > section + section[class*="bg-color"],
.market-detail > section + section,
.cc-detail > section + section {
	padding-top: var(--section-y);
}

/*
* The mirror of the hero rule: a section that FOLLOWS a band with its own ground
* also has to keep its top padding. That band's padding is interior space over
* its own background, so it supplies no gap to whatever comes next — without
* this, every section after a dark or full-bleed band started flush against it.
*/
#content > section.mk-band + section,
#content > section.hm-band + section,
#content > section.principles + section,
#content > section.cc-cta + section,
#content > section.loc-sunk + section,
#content > section.faq-section + section,
#content > section.integrated-sec + section,
#content > section[class*="bg-color"] + section,
.p-location > section.principles + section,
.p-location > section.faq-section + section,
.p-location > section[class*="bg-color"] + section {
	padding-top: var(--section-y);
}

/*
* The statement band is full-bleed with its own ground, so its padding is
* interior space rather than a gap between sections — it needs the same value on
* both edges or the brass rule above the quote sits flush against the top edge.
*/
.mk-band,
#content > section.mk-band {
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

/* The homepage hero sets its own height (full-viewport video). */
#content > section.main-sec { padding-top: revert; padding-bottom: revert; }

/*
* The page hero has to clear the header rather than start underneath it. It was
* running 48px of container padding against a 120px header, so the breadcrumb
* rendered behind the nav on every inner page.
*/
#subheader {
	padding-top: calc(var(--header-clearance) + var(--sp-4));
	padding-bottom: var(--section-y);
}

#subheader > .container { padding-top: 0; padding-bottom: 0; }

@media (max-width: 991px) {
	#subheader { padding-top: calc(var(--header-clearance) + var(--sp-2)); }
		.hero-bottom-area .cc-intro__grid,
	.location-area-home .cc-region__grid,
	#content .icd__row{
		display:flex!important;
		    flex-direction: column-reverse;
		text-align: left;
	}
	.hero-bottom-area .cc-intro__frame{
		    aspect-ratio: auto;
	}
	#content.about-page .ab-quote__text{
		    font-size: 18px!important;
	}
	header.header-mobile.menu-open #mainmenu li.cc-menu-cred{
		padding:10px 0;
		    position: fixed;
          bottom: 15px;
    left: 15px;
    right: 0;
    width: 90%;
	}
	.mkt-plate:not(:last-of-type){
    margin-bottom: 30px;
}
	#content.markets-hub .cc-cardgrid{
		gap:30px!important;
	}
	.header-col-mid #mainmenu{
		        top: 60px;
	}
	#content .icd__row:not(:last-of-type) {
    margin-bottom: 15px;
		    padding-bottom: 60px;
		    border-bottom: 1px solid var(--cc-hairline);
}

	
		#mainmenu{
			        height: 85%!important;
		}
	#content.services-hub .svcline:nth-child(odd) {
   	display:flex;
		    flex-direction: column-reverse;
		text-align: left;
}
	.svcline__body{
		align-self:start;
	}
	#content.services-hub .svcline__frame img{
		    width: 745px!important;
	}
	#content.services-hub .svcline__media{
		aspect-ratio: auto;
	}
		.cc-steps li::after{
		    top: 10px;
    left: 0px;
	}
.hero-bottom-area {
	max-width: 600px;
	text-align:left;
}
}

/* --- 2. Component interiors ---------------------------------------------- */

.cc-card__body { padding: var(--card-pad-y) var(--card-pad-x) calc(var(--card-pad-y) + 2px); }
.cc-cap        { padding: calc(var(--card-pad-y) - 10px) var(--card-pad-x) var(--sp-1); }
.mk-solving__item { padding: var(--sp-2) var(--sp-3); }
.mk-intro__who { padding: var(--card-pad-y) var(--card-pad-x); }
.ab-quote      { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
.insights-intro { margin-bottom: var(--sp-5); }

/* --- 3. Grid gaps -------------------------------------------------------- */

.cc-cardgrid       { gap: var(--grid-gap); }
.mk-solving__grid  { gap: var(--sp-2) var(--sp-3); }
.ab-split          { gap: var(--sp-4) var(--grid-gap-lg); }
.mk-intro          { gap: var(--grid-gap-lg); }
.cc-caps           { gap: 16px; }

/* --- 4. Heading rhythm ---------------------------------------------------- */

/*
* h3 was rendering at 17, 18, 19 and 22px depending on which component it landed
* in. Component headings resolve from --cc-title-sm, content headings from
* --cc-h3.
*/
/* .cc-card__title,
.cc-cap__title,
.mk-intro__who h3,
.ab-split__col h3 { font-size: var(--cc-title-sm); } */

.cc-sechead { margin-bottom: var(--sp-3); }

/* Space under a section heading, so copy never sits tight against it. */
#content > section h2 { margin-bottom: var(--sp-2); }

/* --- 5. Body measure ------------------------------------------------------ */

.mk-intro__lead p,
.ab-split__col p,
.insights-intro p { max-width: none; }


/* ==========================================================================
CLOSING CTA BANNER

One banner, from parts/cta-banner.php. Replaces eight hand-rolled variants
that differed in alignment, button count, heading treatment and padding.
========================================================================== */

.cc-cta {
	background: var(--bg-dark-1);
	color: var(--cc-on-accent);
	padding-top: var(--section-y);
	padding-bottom: var(--section-y);
}

/*
* The closing banner is the one module that stays centred — it is the page's
* final call to action and centring is what makes it read as a break from the
* left-aligned content above rather than more of it.
*/
.cc-cta__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.cc-cta__inner p{
	max-width:100%;
}

.cc-cta__inner .cc-cta__text { margin-left: auto; margin-right: auto; }
.cc-cta__actions { justify-content: center; }
.cc-cta__note { text-align: center; }

.cc-cta__eyebrow {
	margin-bottom: var(--sp-1);
	font-family: var(--body-font);
	font-size: var(--cc-eyebrow);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--secondary-color);
}

.cc-cta__heading {
	margin: 0 0 var(--sp-2);
	font-size: var(--cc-h2);
	line-height: 1.2;
	color: #ffffff;
}

.cc-cta__accent { color: var(--secondary-color); }

.cc-cta__text {
	margin: 0 0 var(--sp-3);
	max-width: 62ch;
	font-size: var(--cc-text);
	line-height: 1.65;
	color: var(--cc-on-dark);
}

.cc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-1) 12px;
}


/* The homepage's confidentiality note — the one piece of content that only one
   banner carries, so it is optional rather than a second banner variant. */
.cc-cta__note {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid rgba(255, 255, 255, .16);
}

.cc-cta__note-title {
	margin: 0 0 var(--sp-1);
	font-size: var(--cc-title-sm);
	letter-spacing: .04em;
	/* No transform — this is a heading, and headings across the site now show
	   the capitalisation they were written in. */
	color: #ffffff;
}

.cc-cta__note p {
	margin: 0;
	font-size: var(--cc-text-sm);
	line-height: 1.6;
	color: var(--cc-on-dark-mut);
}

@media (max-width: 767px) {
	.cc-cta__actions a.btn-main { width: 100%; justify-content: center; }
	.hero-bottom-area .cc-intro__grid,
	.location-area-home .cc-region__grid{
		display:flex;
		    flex-direction: column-reverse;
		text-align: left;
	}
	.hero-bottom-area .cc-intro__frame{
		    aspect-ratio: auto;
	}
	#content.about-page .ab-quote__text{
		    font-size: 18px!important;
	}
	header.header-mobile #mainmenu li.cc-menu-cred{
		padding:10px 0;
		margin-bottom:0!important;
	}
	#content.services-hub .svcline:nth-child(odd) {
   	display:flex;
		    flex-direction: column-reverse;
		text-align: left;
}
	#content.services-hub .svcline__media{
		aspect-ratio: auto;
	}
		.cc-steps li{
		    border: 1px solid;
    padding: 15px;
    margin-bottom: 15px;
	}
	.cc-steps li::after{
		    top: 10px;
    left: 8px;
	}
	    #content.services-hub .svcline__frame img {
        width: 100%!important;
    }
	
}

/* ------------------------------------------------------- Offices on a narrow column */

/*
* The region pages' left column held only a phone number and an email, so it ran
* about a third the height of the form beside it. The offices fill it, and the
* stack variant lays them out one per row rather than in the three-up grid the
* contact page uses.
*/
.loc-offices {
	margin-top: var(--sp-4);
}

.loc-offices__label {
	margin-bottom: var(--sp-2);
	font-family: var(--body-font);
	font-size: var(--cc-eyebrow);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--secondary-color);
}

.ct-office-grid--stack {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ct-office-grid--stack .ct-office {
	padding: var(--sp-2) var(--sp-3);
	background: var(--cc-surface);
	border: 1px solid var(--cc-border);
}

.ct-office-grid--stack .ct-office__region {
	font-family: var(--title-font);
	font-weight: 600;
	font-size: var(--cc-text-sm);
	color: var(--title-font-color);
	margin-bottom: 2px;
}

.ct-office-grid--stack .ct-office__address {
	margin: 0;
	font-size: var(--cc-text-sm);
	line-height: 1.5;
	font-style: normal;
	color: var(--body-font-color);
}

/* ============================================================ Left alignment ==
 *
 * The site reads from the left. Section heads, intros and the closing banner
 * were a mix of centred and left-aligned depending on which template they came
 * from, so the eye had no consistent starting edge.
 *
 * !important is required, not preferred: .text-center is a Bootstrap utility and
 * ships with its own !important, so specificity alone never wins.
 * ========================================================================== */

#content .text-center:not(.de__pcard):not(.cc-cta__inner),
#content section.text-center:not(.cc-cta),
#content .cc-sechead,
#content .owl-item,
#content .item {
	text-align: left !important;
}

/* The closing banner opts out — see the note on .cc-cta__inner. */
#content .cc-cta,
#content .cc-cta__inner,
#content .cc-cta * { text-align: center !important; }

/* Buttons and pagination keep their own internal centring. */
#content .btn-main,
#content a.btn-main,
#content input[type="submit"],
#content .cc-pagination { text-align: center !important; }

/* ---------------------------------------------------- Process cards (centred) */

/*
* The one deliberate exception: the delivery-stage cards stay centred. They were
* also top-aligned in equal-height cells, so a card with two lines of copy left a
* gap under it while its neighbours filled. Flex centres them on both axes.
*/
#content .de__pcard {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	text-align: center !important;
}

#content .de__pcard img { margin-left: auto; margin-right: auto; }

/* The carousel cell has to stretch before the card inside it can fill. */
#content .owl-carousel .owl-stage { display: flex; align-items: stretch; }
#content .owl-carousel .owl-item { display: flex; }
#content .owl-carousel .owl-item > .item { display: flex; width: 100%; }


/* ========================================================== Motion, unified ==
 *
 * Entrance animations were a mix of fadeInUp, zoomIn, scaleIn and flipper, with
 * some blocks carrying none at all, so scrolling the page produced four
 * different behaviours. One fade, everywhere.
 *
 * WOW.js writes animation-name as an inline style, so overriding it needs
 * !important — this is the one place the theme's own JS has to be outranked.
 * ========================================================================== */

/*
* The fade is pure CSS and owes nothing to JavaScript.
*
* The theme ships `.wow { visibility: hidden }` and depends on WOW.js to set it
* back as elements scroll into view. That was measurably failing: elements
* sitting inside the viewport computed visibility:hidden, and WOW's own
* animations were stuck at currentTime 0 — so a third of the homepage was
* invisible on an ordinary load. Anything above a restored scroll position never
* revealed at all.
*
* The entrance animation is therefore OFF: .wow elements are simply visible.
* Correctness first — a scroll effect is not worth a page where a third of the
* copy can fail to appear. Re-enabling it is a two-line change here, but it
* should be verified in a real browser rather than an automated one, which does
* not run CSS animations reliably.
*/
#content .wow,
#content .animated {
	visibility: visible !important;
	opacity: 1 !important;
	animation: none !important;
}

/*
* Buttons are excluded. A dark button fading up from transparent over a light
* card reads as grey for the duration, which is what made the tab CTAs look like
* a different colour from every other button on the site.
*/
#content .btn-main.wow,
#content a.btn-main.wow,
#content .btn-main.animated,
#content a.btn-main.animated {
	animation: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
	#content .wow,
	#content .animated { animation: none !important; }
}


/* =========================================================== Hover, unified ==
 *
 * Cards variously lifted on hover, lifted and shadowed, shadowed only, or did
 * nothing. Now: a shadow, no movement, and only on cards that actually lead
 * somewhere.
 * ========================================================================== */

#content .cc-card,
#content .de__pcard,
#content .ct-office,
#content .mk-solving__item {
	transform: none !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

#content .cc-card:hover,
#content .cc-card:focus-within {
	border-color: var(--cc-accent-line);
	box-shadow: var(--cc-shadow);
}

/* Cards that are not links get no hover state at all — there is nothing to
   click, so a response would be misleading. */
#content .cc-cap:hover,
#content .mk-solving__item:hover,
#content .ct-office:hover,
#content .ab-quote:hover {
	box-shadow: none;
	border-color: var(--cc-border);
}

/* ==================================================== About tabs — rules & marks
 *
 * The tab panes carried four different horizontal hairlines: under the pane's
 * h2, above every h3, above the last paragraph (a divider inserted before the
 * CTA by a :has() rule), and under the final row of every bullet list. Stacked
 * up they read as a form, not an article.
 *
 * The brass mark stays — it is the accent used to open a section everywhere on
 * the site — but it sits above the heading rather than beside it, so every
 * heading in the pane opens the same way.
 * ========================================================================== */

/* 1. No rule under the pane heading. */
.about-page .tab-pane > h2 { border-bottom: 0; }

/* 2. No rule above the sub-headings; keep the brass mark. */
.about-page .tab-pane h3 { border-top: 0; }

/* 3. The divider before the CTA was attaching itself to the last paragraph, so
      "Purpose" sat apart from its own copy instead of reading like Mission and
      Vision above it. */
.about-page .tab-pane p:has(+ p > a),
.about-page .tab-pane p:has(+ p > a.btn-main) {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* 4. No trailing rule under the last row of a list. */
.svc-content .copy-measure ul li:last-child,
.about-page .tab-pane ul li:last-child { border-bottom: 0; }

/* 5. Card titles carry the brass in the type itself — bold, in the accent colour,
      with no rule or bar attached. Inside a bordered card the extra mark was one
      decoration too many; the colour alone separates the heading from the copy. */
.about-page .tab-pane h4.cc-cap__title,
.cc-caps .cc-cap h4.cc-cap__title {
	position: relative;
	/* No top margin: the theme's h4 rule adds ~38px, which pushed the title below
	   the step number sitting beside it on the spine. */
	margin-top: 0;
	padding-left: 0;
	/* 6px lines the title's cap-height up with the centre of the step number
	   rather than its box edge. */
	padding-top: 6px;
	border-left: 0;
	font-size: var(--cc-title-sm);
	font-weight: 700;
	color: var(--secondary-color);
}

.about-page .tab-pane h4.cc-cap__title::before,
.cc-caps .cc-cap h4.cc-cap__title::before { content: none; }

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

/*
* Buttons ran 30px of padding on the left and 50px on the right. The extra 20px
* was reserved for an arrow positioned absolutely against the right edge, so on
* every button where the arrow did not render the label sat visibly off-centre.
*
* The arrow is now an inline child with a gap, which means the padding can be
* symmetric and the button sizes itself around whatever it contains.
*/
#content .btn-main,
#content a.btn-main,
.cc-cta a.btn-main {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	/* !important on both sides: style.css and pages.css both set button padding
	   later in the cascade, so declaring only one side left the label off-centre
	   again — the exact problem this rule exists to fix. */
	padding-left: 30px !important;
	padding-right: 30px !important;
}

#content a.btn-main i,
#content .btn-main i,
.cc-cta a.btn-main i {
	position: static;
	inset: auto;
	margin: 0;
	font-size: 1em;
	line-height: 1;
	transform: none;
}

/* .a-ico wraps its arrow in a positioned span; it no longer needs to reserve
   space now that the icon sits in the flow. */
#content a.btn-main .icon,
#content .btn-main .icon {
	position: static;
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	margin: 0;
	background: none;
}

/*
* The two half-fluid modules on region pages (permitting/compliance and regional
* coverage) were centred by `.p-location .about .px-5`, which carries no
* .text-center class and so was never caught by the site-wide left-alignment
* rule. Named explicitly.
*/
.p-location .about .px-5,
.p-location .about .px-5 .locations,
#content .p-location .about .px-5 {
	text-align: left;
}

/*
* `.p-location .principles h2::before` centres the brass mark with
* translateX(-50%), from when that band was a centred layout. It outranks
* .hm-band__head h2::before, and although `left` has no effect on a static
* pseudo-element the transform still applies — pulling the 56px bar half its
* width to the left of the heading it is supposed to sit above.
*/
.p-location .hm-band .hm-band__head h2::before,
.p-location .principles.hm-band h2::before {
	position: static;
	left: auto;
	transform: none;
}



/* ==============================================================================
BUTTONS — two fills, no exceptions

Before this block there were five different button treatments rendering on a
single page: #2e2e22 with a white border, #2e2e22 with its own border, #354e33,
#9F8A38 with a white border, and #9F8A38 with its own. Each had been added for
one context and none knew about the others.

There are exactly two fills, and every button on the site resolves to one:

    DARK   #2e2e22  (--primary-color)    the default action
    GOLD   #9F8A38  (--secondary-color)  the emphasised action

Plus one outline variant, which borrows those same two values and adds none of
its own. Hover swaps a fill to the other value — it never introduces a third.

Do not add a background-color to a button in page or component CSS. If a button
needs emphasis, give it .bg-color-2; if it needs to recede, give it .btn-line.
============================================================================== */

/* --- Dark: the default -------------------------------------------------- */

#content .btn-main,
#content a.btn-main,
#content input[type="submit"],
.cc-cta a.btn-main.btn-line,
#mainheader .btn-main {
	background: var(--primary-color);
	border: 1px solid var(--secondary-color);
	color: #ffffff;
}

#content .btn-main:hover,
#content .btn-main:focus,
#content a.btn-main:hover,
#content a.btn-main:focus,
#content input[type="submit"]:hover,
#content input[type="submit"]:focus,
.cc-cta a.btn-main.btn-line:hover,
.cc-cta a.btn-main.btn-line:focus,
#mainheader .btn-main:hover,
#mainheader .btn-main:focus {
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	color: #ffffff;
}

/* --- Gold: the emphasised action ---------------------------------------- */

#content a.btn-main.bg-color-2,
#content .btn-main.bg-color-2,
#content .cc-card--cta a.btn-main:not(.btn-line),
#content .cc-cta a.btn-main:not(.btn-line),
.cc-cta a.btn-main:not(.btn-line),
#mainheader a.btn-main.header-cta,
.header-cta {
	background: var(--secondary-color);
	border: 1px solid var(--secondary-color);
	color: #ffffff;
}

#content a.btn-main.bg-color-2:hover,
#content .btn-main.bg-color-2:hover,
#content .cc-card--cta a.btn-main:not(.btn-line):hover,
#content .cc-cta a.btn-main:not(.btn-line):hover,
.cc-cta a.btn-main:not(.btn-line):hover,
#mainheader a.btn-main.header-cta:hover,
.header-cta:hover {
	background: var(--primary-color);
/* 	border-color: var(--primary-color); */
	color: #ffffff;
}

/* --- Outline: same two values, no fill ---------------------------------- */

#content a.btn-main.btn-line,
#content .btn-main.btn-line {
	background: transparent;
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
}

#content a.btn-main.btn-line:hover,
#content a.btn-main.btn-line:focus,
#content .btn-main.btn-line:hover,
#content .btn-main.btn-line:focus {
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #ffffff;
}

/*
* On a dark ground the outline inverts — still no new colour, just white against
* the two fills. Covers the hero panel, the homepage CTA tile and the closing
* banner.
*/
#content .banner-bottom a.btn-main.btn-line,
#content .cc-card--cta a.btn-main.btn-line,
#content .cc-cta a.btn-main.btn-line,
#content .hm-band a.btn-main.btn-line,
.cc-cta a.btn-main.btn-line {
	background: transparent;
	border-color: rgba(255, 255, 255, .55);
	color: #ffffff;
}

#content .banner-bottom a.btn-main.btn-line:hover,
#content .banner-bottom a.btn-main.btn-line:focus,
#content .cc-card--cta a.btn-main.btn-line:hover,
#content .cc-cta a.btn-main.btn-line:hover,
#content .hm-band a.btn-main.btn-line:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--primary-color);
}


/* ---------------------------------------------------------------- Hero heading */

/*
* The headline is capped rather than filling the container. Past about 1200px the
* line runs long enough that the heading wraps unevenly and stops reading as a
* single statement — on a 2560px display it stretched the full column width and
* the banner lost its shape.
*
* Set here rather than inline on the element so it stays with the rest of the
* hero's styling.
*/
.main-heading {
	max-width: 1200px;
}