/* ==========================================================================
   Stage

   The composition layer. The earlier build stacked left-aligned text blocks
   down a single column and left the right half of the page empty, which
   reads as unfinished rather than restrained. Three corrections:

   1. Sections claim the full grid. Structure spans the page instead of
      hugging the left edge.
   2. The page has one moment. The bridge from the wordmark is rendered as
      architecture at full scale, so the opening belongs to this organisation
      and does not depend on photography that does not exist yet.
   3. Tone alternates. Dark, light, dark gives the page rhythm.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Opening
   -------------------------------------------------------------------------- */

.bcrc-open {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--deep);
	color: #fff;
	isolation: isolate;
}

.bcrc-open__inner {
	position: relative;
	z-index: 2;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: clamp(3.5rem, 9vw, 8rem) var(--wp--preset--spacing--30) clamp(3.5rem, 8vw, 7rem);
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.25rem);
}

.bcrc-open__kicker {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
}

.bcrc-open__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.9rem, 8.2vw, 7rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.003em;
	color: #fff;
	max-width: 15ch;
	text-wrap: balance;
}
.bcrc-open__title em {
	font-style: normal;
	color: var(--wp--preset--color--brand);
}

.bcrc-open__say {
	margin: 0;
	max-width: 42ch;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.15rem, 1.85vw, 1.5rem);
	line-height: 1.45;
	color: rgba(255, 255, 255, .84);
}

.bcrc-open__do {
	margin: .5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.75rem;
}

/* The bridge is the mark from the wordmark, drawn at architectural scale and
   cropped by the section edge so it reads as structure rather than as a logo
   dropped into a corner. */
.bcrc-open__bridge {
	position: absolute;
	z-index: 1;
	right: -4%;
	bottom: -6%;
	width: clamp(28rem, 56vw, 55rem);
	height: auto;
	color: #17505F;
	pointer-events: none;
}
@media (max-width: 899px) {
	.bcrc-open__bridge { right: -22%; bottom: -8%; width: 40rem; opacity: .55; }
}

/* A single orange band across the foot of the opening: the one piece of flat
   colour on the page, and the join between the dark opening and the light
   body below it. */
.bcrc-open__band {
	position: relative;
	z-index: 3;
	height: 10px;
	margin-block: 0 !important;
	background: var(--wp--preset--color--brand);
}
/* The opening and its band are one unit: no block gap between them. */
.bcrc-open { margin-bottom: 0 !important; }
.bcrc-open + .wp-block-group { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   Journey directory: asymmetric split

   Full-width rows left the right half of the page empty once the hover
   preview went. The section is now composed instead: the heading holds the
   left column and stays put while you scroll, and the four journeys read
   down the right column at a proper measure. Width is used by composition,
   not by decoration.
   -------------------------------------------------------------------------- */

@media (min-width: 1020px) {
	.bcrc-directory {
		display: grid;
		grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr);
		gap: clamp(2.5rem, 6vw, 6.5rem);
		align-items: start;
	}
	.bcrc-directory__head {
		position: sticky;
		top: clamp(5rem, 12vh, 8rem);
		padding-bottom: 0;
	}
}

.bcrc-directory__head h2 {
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.12;
	max-width: 12ch;
	text-wrap: balance;
}

/* Rows: one column, everything belongs to the row. */
.bcrc-row__link {
	display: block;
	position: relative;
	padding-block: clamp(1.6rem, 2.8vw, 2.3rem);
	text-decoration: none;
	color: inherit;
}
.bcrc-row__head { display: flex; flex-direction: column-reverse; gap: .5rem; }
.bcrc-row__name {
	font-size: clamp(1.55rem, 2.4vw, 2.2rem);
	line-height: 1.12;
	letter-spacing: -.004em;
	max-width: 18ch;
	text-wrap: balance;
	transition: color .18s var(--bcrc-ease);
}
.bcrc-row__what {
	margin-top: .55rem;
	max-width: 52ch;
}
.bcrc-row__go {
	margin-top: .95rem;
	padding-top: 0;
	justify-self: start;
}

.bcrc-row__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--base-2);
	opacity: 0;
	z-index: -1;
	transition: opacity .18s var(--bcrc-ease);
}
.bcrc-row__link:hover::before { opacity: 1; }
.bcrc-row__link:hover .bcrc-row__name { color: var(--wp--preset--color--brand-ink); }

/* --------------------------------------------------------------------------
   Impact: the figure anchors the section instead of floating in a column
   -------------------------------------------------------------------------- */

.bcrc-impact {
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}
@media (min-width: 900px) {
	.bcrc-impact { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}
.bcrc-impact__figure {
	font-size: clamp(6rem, 17vw, 15rem);
	line-height: 1.0;
	letter-spacing: -.004em;
	display: block;
}
.bcrc-impact__means {
	max-width: 22ch;
	font-size: clamp(1.35rem, 2.5vw, 2rem);
	line-height: 1.32;
}

/* --------------------------------------------------------------------------
   Featured service: the photograph runs off the left edge of the page
   -------------------------------------------------------------------------- */

.bcrc-feature-bleed { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) {
	.bcrc-feature-bleed {
		grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
		align-items: stretch;
		gap: clamp(2rem, 5vw, 5rem);
	}
}
.bcrc-feature-bleed__media { position: relative; min-height: 300px; background: var(--wp--preset--color--base-2); }
.bcrc-feature-bleed__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) { .bcrc-feature-bleed__media { min-height: 58vw; max-height: 360px; } }

.bcrc-feature-bleed__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.15rem;
	padding-block: clamp(2rem, 5vw, 4rem);
	padding-inline: var(--wp--preset--spacing--30) var(--bcrc-gutter);
}
@media (max-width: 899px) { .bcrc-feature-bleed__body { padding-inline: var(--bcrc-gutter); } }

/* --------------------------------------------------------------------------
   Stories: the lead is given real size
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
	.bcrc-stories-lead { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
	.bcrc-story-lead { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 2.25rem; }
}
.bcrc-story-lead__quote p { font-size: clamp(1.45rem, 3vw, 2.35rem); line-height: 1.32; }

/* --------------------------------------------------------------------------
   Closing: a field, not a thin strip
   -------------------------------------------------------------------------- */

.bcrc-closing {
	background: var(--wp--preset--color--deep);
	color: #fff;
	padding-block: clamp(3rem, 7vw, 5.5rem);
}
.bcrc-closing__grid {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	display: grid;
	gap: clamp(1.5rem, 3vw, 3.5rem);
	align-items: end;
}
@media (min-width: 820px) { .bcrc-closing__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.bcrc-closing__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 5vw, 3.75rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.003em;
	color: #fff;
	max-width: 13ch;
	text-wrap: balance;
}
.bcrc-closing__say {
	margin: 0 0 1.5rem;
	max-width: 44ch;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	line-height: 1.45;
	color: rgba(255, 255, 255, .84);
}
.bcrc-closing__acts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.bcrc-closing .bcrc-textlink { color: #fff; border-bottom-color: var(--wp--preset--color--brand); }
.bcrc-closing .bcrc-textlink:hover { color: var(--wp--preset--color--brand); }

/* --------------------------------------------------------------------------
   Partner strip sits on the warm ground so the page has a quiet register
   -------------------------------------------------------------------------- */

.bcrc-strip { background: var(--wp--preset--color--base-2); }

/* --------------------------------------------------------------------------
   The foot of the page is one continuous dark mass

   Closing field, acknowledgement and footer sit directly on each other. A
   white gap between two dark blocks reads as a mistake, not as space.
   -------------------------------------------------------------------------- */

.bcrc-footer { margin-top: 0 !important; }
.bcrc-closing { margin-bottom: 0 !important; }
.bcrc-content--home > :last-child { margin-bottom: 0 !important; }
.bcrc-strip { margin-block: 0 !important; }
.bcrc-strip + .wp-block-group { margin-top: 0 !important; }

/* Impact: pull the supporting figures up so the section is not a wide
   band of empty ground under a short list. */
@media (min-width: 900px) {
	.bcrc-impact__rest { margin-top: .75rem; }
}

/* ==========================================================================
   Type-led voices and featured service

   Both sections are built so the composition holds with no photography at
   all. Where a real portrait exists it is added beside the quote; the layout
   does not change shape without one.
   ========================================================================== */

.bcrc-voices { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }

.bcrc-voice { margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 760px) {
	.bcrc-voice--withPortrait { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: 2.5rem; }
	.bcrc-voice--withPortrait .bcrc-voice__quote { grid-column: 2; }
	.bcrc-voice--withPortrait .bcrc-voice__cite  { grid-column: 2; }
	.bcrc-voice__portrait { grid-row: 1 / span 2; }
}
.bcrc-voice__portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--wp--preset--color--base-2); }
.bcrc-voice__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The quote is the section. Set large, on a wide measure, with the opening
   mark hung into the margin so the text edge stays true. */
.bcrc-voice__quote { margin: 0; }
.bcrc-voice__quote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.6rem, 3.6vw, 3rem);
	line-height: 1.3;
	letter-spacing: -.001em;
	max-width: 24ch;
	text-wrap: pretty;
	/* Hang exactly the width of the opening quote mark, no more. */
	text-indent: -.34em;
}
.bcrc-voice--withPortrait .bcrc-voice__quote p { max-width: 20ch; }

.bcrc-voice__cite {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .35rem 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
}
.bcrc-voice__cite b { font-weight: 700; }
.bcrc-voice__cite span { color: var(--wp--preset--color--contrast-2); font-weight: 400; }

.bcrc-voices__more {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0 clamp(2rem, 4vw, 3.5rem);
	border-top: 1px solid var(--wp--preset--color--line);
}
@media (min-width: 760px) { .bcrc-voices__more { grid-template-columns: 1fr 1fr; } }

.bcrc-voice-sm { padding: 1.75rem 0 0; }
.bcrc-voice-sm blockquote { margin: 0; }
.bcrc-voice-sm blockquote p {
	margin: 0;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.05rem, 1.6vw, 1.3rem);
	line-height: 1.42;
	max-width: 36ch;
	text-indent: -.33em;
}
.bcrc-voice-sm__cite {
	margin: .9rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .75rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
}
.bcrc-voice-sm__cite span { color: var(--wp--preset--color--contrast-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   Featured service: two doors, no photograph

   The interesting thing about this programme is that it serves two different
   people. That structure is the design: two routes side by side, divided by
   a rule rather than boxed into cards.
   -------------------------------------------------------------------------- */

.bcrc-doors__head { display: grid; gap: clamp(1rem, 2.5vw, 2.5rem); }
@media (min-width: 900px) {
	.bcrc-doors__head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
}
.bcrc-doors__title {
	margin: .55rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.1rem, 5.2vw, 4rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.003em;
	max-width: 13ch;
	text-wrap: balance;
}
.bcrc-doors__say {
	margin: 0;
	max-width: 44ch;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	line-height: 1.45;
	color: var(--wp--preset--color--contrast-2);
}

.bcrc-doors {
	list-style: none;
	margin: clamp(2rem, 4vw, 3.25rem) 0 0;
	padding: 0;
	display: grid;
	border-top: 2px solid var(--wp--preset--color--contrast);
}
@media (min-width: 820px) { .bcrc-doors { grid-template-columns: 1fr 1fr; } }

.bcrc-door { border-bottom: 1px solid var(--wp--preset--color--line); }
@media (min-width: 820px) {
	.bcrc-door { border-bottom: 0; padding-right: clamp(1.5rem, 3vw, 3rem); }
	.bcrc-door + .bcrc-door {
		border-left: 1px solid var(--wp--preset--color--line);
		padding-left: clamp(1.5rem, 3vw, 3rem);
		padding-right: 0;
	}
}

.bcrc-door a {
	display: grid;
	gap: .75rem;
	align-content: start;
	padding: clamp(1.5rem, 3vw, 2.25rem) 0;
	text-decoration: none;
	color: inherit;
	height: 100%;
	transition: color .18s var(--bcrc-ease);
}
.bcrc-door a:hover { color: var(--wp--preset--color--brand-ink); }
.bcrc-door a:focus-visible { outline: 3px solid var(--wp--preset--color--brand); outline-offset: -3px; }

.bcrc-door__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.35rem, 2.6vw, 1.95rem);
	font-weight: 700;
	line-height: 1.24;
	letter-spacing: -.002em;
	max-width: 16ch;
	text-wrap: balance;
}
.bcrc-door__what {
	margin: 0;
	max-width: 42ch;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
}
.bcrc-door__go {
	margin-top: .35rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	color: var(--wp--preset--color--brand-ink);
}
.bcrc-door__go::after { content: "\2192"; transition: transform .2s var(--bcrc-ease); }
.bcrc-door a:hover .bcrc-door__go::after { transform: translateX(4px); }

/* ==========================================================================
   Two voices

   Literata (serif) is what the organisation and its people say: headings,
   introductions, quotes, the visitor's own questions.

   Public Sans is how you operate the site: navigation, buttons, labels,
   data, metadata. It is the civic register and it never editorialises.
   ========================================================================== */

.bcrc-label,
.bcrc-row__area,
.bcrc-eyebrow,
.bcrc-open__kicker,
.bcrc-row__go,
.bcrc-door__go,
.bcrc-textlink,
.bcrc-btn,
.wp-block-button__link,
.wp-block-navigation,
.bcrc-utility,
.bcrc-fact dt,
.bcrc-deets dt,
.bcrc-footer__h,
.bcrc-footer__list,
.bcrc-voice__cite,
.bcrc-voice-sm__cite,
.bcrc-story__who,
.bcrc-story-lead__cite,
.bcrc-person__role,
.bcrc-impact__n,
.bcrc-impact__note,
.bcrc-stat__value,
.bcrc-timeline__year,
.bcrc-next__list li::before,
.bcrc-directory__note,
.bcrc-sec--partners .bcrc-sec__title,
.bcrc-sec--stats .bcrc-sec__title,
.bcrc-utility__note,
.bcrc-header .wp-block-site-logo {
	font-family: var(--wp--preset--font-family--body);
}

/* The one display figure is set in the serif: it is a statement, not data. */
.bcrc-impact__figure { font-family: var(--wp--preset--font-family--display); font-weight: 700; }

/* Literata at 800 is heavier than Archivo was. Pull most headings back to
   700 and reserve the heaviest weight for the two display moments. */
.bcrc-row__name,
.bcrc-doors__title,
.bcrc-door__name,
.bcrc-svc-hero__title,
.bcrc-settle__title,
.bcrc-feature-split__title,
.bcrc-close__title,
.bcrc-sec__title,
.bcrc-card__title,
.bcrc-person__name,
.bcrc-directory__head h2 { font-weight: 700; }

.bcrc-open__title, .bcrc-closing__title { font-weight: 700; }

/* Quotes take the italic: it reads as a speaking voice rather than a heading. */
.bcrc-voice__quote p,
.bcrc-voice-sm blockquote p,
.bcrc-story__quote p { font-style: italic; }

/* Uppercase tracked labels need slightly more space in the sans. */
.bcrc-label, .bcrc-row__area { letter-spacing: .16em; }

/* ==========================================================================
   Laptop-first vertical sizing

   Measured on a 1512x982 MacBook viewport the opening ran 1077px tall, so
   the whole first screen never fit. Vertical scale is now capped against the
   viewport height as well as its width: the opening always resolves inside
   one laptop screen, and only grows on genuinely tall displays.
   ========================================================================== */

.bcrc-open__inner {
	padding-block: clamp(2.25rem, 5.5vh, 4.5rem);
	gap: clamp(1rem, 2.2vh, 1.9rem);
}
.bcrc-open__title {
	font-size: clamp(2.4rem, min(7.4vw, 8.6vh), 5.6rem);
	line-height: 1.2;
}
.bcrc-open__say {
	font-size: clamp(1.05rem, min(1.7vw, 2.1vh), 1.35rem);
	max-width: 46ch;
}
@media (min-width: 900px) {
	.bcrc-open { min-height: min(78vh, 44rem); display: grid; align-content: center; }
}

/* --------------------------------------------------------------------------
   Section rhythm is owned by the sections

   Every top-level section already carries its own padding, so WordPress'
   block gap and the band's own margin were stacking on top of it and adding
   arbitrary voids. Both are removed: spacing is now deliberate, not accrued.
   -------------------------------------------------------------------------- */

.bcrc-content--home > .wp-block-post-content > * { margin-block: 0 !important; }
.bcrc-content--home .bcrc-band { margin-block: 0 !important; }
.bcrc-content--home .bcrc-sec { margin-block: 0 !important; }

/* Service pages follow the same rule. */
.bcrc-content--service > .wp-block-post-content > *,
.bcrc-content > .wp-block-post-content > section { margin-block: 0 !important; }

/* --------------------------------------------------------------------------
   Alignment corrections found by measuring, not by eye
   -------------------------------------------------------------------------- */

/* The opening became a grid to centre its content vertically, which turned
   the inner block into a shrink-to-fit grid item and pulled the whole hero
   320px right of the page grid. It must still fill its column. */
.bcrc-open__inner { width: 100%; }

/* The settlement band had no gutter rule of its own and sat 24px off the
   page grid. It now carries the same bcrc-inset class as every other
   section, so there is a single source of truth for the page edge. */

/* The quotes carry a hanging opening mark so the text edge, not the
   punctuation, lines up with the rest of the page grid. Without the mark the
   negative indent simply pulled the quote out of alignment. */
.bcrc-voice__quote p::before,
.bcrc-voice-sm blockquote p::before { content: "\201C"; }
.bcrc-voice__quote p::after,
.bcrc-voice-sm blockquote p::after { content: "\201D"; }

/* --------------------------------------------------------------------------
   Top-level regions own their own spacing

   WordPress' flow layout puts `margin-block-start: 24px` on every child of
   .wp-site-blocks, which opened a gap between the header and the hero, and
   another between the closing field and the footer. Header, main and footer
   each carry their own padding, so the inherited gap is only ever a seam.
   -------------------------------------------------------------------------- */

.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* ==========================================================================
   Libre Baskerville and Jost

   Both are open licence (SIL OFL) and self-hosted from the theme, so there
   is no third-party font request and nothing to licence.

   Their metrics drive the tuning below: Baskerville carries a large x-height
   and needs almost no negative tracking, while Jost sits on a small x-height
   and reads smaller than a grotesque at the same pixel size, so running text
   steps up to compensate.
   ========================================================================== */

/* Jost's lowercase is small, so running text steps up and gets more air. */
body { font-size: var(--wp--preset--font-size--md); line-height: 1.65; }

/* Geometric capitals need noticeably more tracking than a grotesque did. */
.bcrc-label,
.bcrc-row__area,
.bcrc-eyebrow,
.bcrc-open__kicker,
.bcrc-footer__h,
.bcrc-fact dt,
.bcrc-deets dt,
.bcrc-voice-sm__cite,
.bcrc-timeline__year { letter-spacing: .16em; }

/* Baskerville is a delicate face at display sizes: the regular weight reads
   as confident there, and bold only starts to look heavy. The two largest
   moments therefore run at 400 with tight leading rather than at 700. */
.bcrc-open__title,
.bcrc-impact__figure { font-weight: 400; }
.bcrc-open__title { line-height: 1.06; letter-spacing: -.005em; }
.bcrc-impact__figure { line-height: .92; letter-spacing: -.01em; }

/* Section and card headings keep the bold, where the face is still sturdy. */
.bcrc-row__name,
.bcrc-doors__title,
.bcrc-door__name,
.bcrc-svc-hero__title,
.bcrc-settle__title,
.bcrc-closing__title,
.bcrc-sec__title,
.bcrc-directory__head h2 { font-weight: 700; }

/* Buttons and navigation take a little tracking so they read as signage. */
.bcrc-btn, .wp-block-button__link, .bcrc-textlink,
.bcrc-row__go, .bcrc-door__go { letter-spacing: .04em; }
.wp-block-navigation .wp-block-navigation-item__content { letter-spacing: .015em; }

/* The serif italic still carries the speaking voice. */
.bcrc-voice__quote p,
.bcrc-voice-sm blockquote p { font-style: italic; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Masthead fitted to Futura's width

   Jost sets noticeably wider than the previous grotesque, so the navigation
   and the primary action both wrapped to two lines. The bar is retuned
   rather than the wording shortened: the labels come from the strategy.
   -------------------------------------------------------------------------- */

.bcrc-header .wp-block-navigation {
	font-size: .9375rem;
	column-gap: 0;
}
.bcrc-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-inline: .6rem;
	white-space: nowrap;
	letter-spacing: .005em;
}
.bcrc-header .wp-block-navigation .wp-block-navigation__submenu-icon { padding-inline: .1rem; }

.bcrc-header .bcrc-header__cta .wp-block-button__link {
	white-space: nowrap;
	padding-inline: 1.1rem;
	font-size: .875rem;
	letter-spacing: .03em;
}
.bcrc-header__right { gap: .6rem; }
.bcrc-header .wp-block-site-logo img { width: clamp(132px, 15vw, 168px); }

/* Below this the bar is genuinely out of room, so the overlay menu takes over
   earlier than it did with the narrower face. Above it, core hides the open
   button and shows the inline bar; these rules must never override that. */
@media (max-width: 1180px) {
	.bcrc-header .wp-block-navigation__responsive-container-open { display: inline-flex !important; }
	.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
}
@media (min-width: 1181px) {
	.bcrc-header .wp-block-navigation__responsive-container-open { display: none !important; }
}

/* --------------------------------------------------------------------------
   Footer joins the page grid

   The footer inner and base were adding their own 24px inline padding on top
   of the centring, so every column, the logo and the copyright sat 156px from
   the edge while the acknowledgement band above them and the whole page sat
   at 132px. They now take the same gutter as every other region.
   -------------------------------------------------------------------------- */

.bcrc-footer__inner,
.bcrc-footer__base,
.bcrc-footer__ack {
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--bcrc-gutter);
}

/* The base row is a two-column grid rather than a wrapping flex row: with
   flex it broke onto two lines even with room to spare, which read as a
   mistake. Grid states the intent, so it cannot drift. */
.bcrc-footer__base {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--40);
	row-gap: .75rem;
}
.bcrc-footer__base > * { margin: 0; }
.bcrc-footer__base > :last-child { text-align: right; }

@media (max-width: 700px) {
	.bcrc-footer__base { grid-template-columns: 1fr; }
	.bcrc-footer__base > :last-child { text-align: left; }
}

/* ==========================================================================
   Mobile navigation overlay

   Rebuilt as a plain accordion. Previously the overlay inherited the desktop
   dropdown treatment, so each submenu drew its own bordered box and, because
   the bar is laid out right-aligned, every group indented to a different
   offset. Sections were also all expanded at once, which is precisely the
   sitemap dump the strategy warns against.

   Now: one left edge, one indent step, sections closed until opened, and the
   two priority actions pinned at the top.
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	overflow-y: auto;
}

.is-menu-open .wp-block-navigation__responsive-container-content {
	display: block;
	width: 100%;
	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

/* The bar is right-aligned; the overlay must not inherit that. */
.is-menu-open .wp-block-navigation__container,
.is-menu-open .wp-block-navigation__submenu-container {
	display: block !important;
	width: 100% !important;
	gap: 0 !important;
	justify-content: flex-start !important;
	align-items: stretch !important;
	text-align: left !important;
}

/* Strip the dropdown chrome: inside the overlay these are rows, not panels. */
.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	min-width: 0 !important;
	padding: 0 0 .75rem !important;
	opacity: 1 !important;
	visibility: visible !important;
}

.is-menu-open .wp-block-navigation-item { display: block; width: 100%; position: relative; }

.is-menu-open > .wp-block-navigation__responsive-container-content
> .wp-block-navigation__container > .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Top-level row: the label link is the row; the toggle sits beside it. */
.is-menu-open .wp-block-navigation-item__content {
	display: block !important;
	width: 100%;
	padding: 1.1rem 3rem 1.1rem 0 !important;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	cursor: pointer;
}

/* In hover mode core keeps overlay submenus expanded and the toggle has no
   bound state, so it is hidden: with the flattened navigation the full list
   is 14 links and reads as a grouped index, which is the standard WordPress
   overlay pattern. */
.is-menu-open .wp-block-navigation-submenu__toggle { display: none; }

/* Children: one indent step, quieter, hairline separated. */
.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .85rem 0 .85rem 1.25rem !important;
	font-size: 1.0625rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
	border-top: 1px solid var(--wp--preset--color--line);
}
.is-menu-open .wp-block-navigation__submenu-container
> .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
	border-top: 0;
}

/* The two priority actions, pinned at the top of the overlay. */
.is-menu-open .bcrc-nav-action { border-bottom: 0 !important; margin-bottom: .65rem; }
.is-menu-open .bcrc-nav-action .wp-block-navigation-item__content {
	text-align: center;
	padding: 1rem 1.25rem !important;
	font-weight: 700;
	letter-spacing: .03em;
	border: 2px solid var(--wp--preset--color--deep);
	color: var(--wp--preset--color--deep);
}
.is-menu-open .bcrc-nav-action--primary { margin-top: var(--wp--preset--spacing--40); }
.is-menu-open .bcrc-nav-action--primary .wp-block-navigation-item__content {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
}

/* Desktop already carries the call to action in the bar. */
@media (min-width: 1181px) {
	.bcrc-header .bcrc-nav-action { display: none !important; }
}

.wp-block-navigation__responsive-container-close {
	top: 1.1rem;
	right: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast);
}

.is-menu-open :is(a, button):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Footer joins the page grid

   The footer inner and base were adding their own 24px inline padding on top
   of the centring, so every column, the logo and the copyright sat 156px from
   the edge while the acknowledgement band above them and the whole page sat
   at 132px. They now take the same gutter as every other region.
   -------------------------------------------------------------------------- */

.bcrc-footer__inner,
.bcrc-footer__base,
.bcrc-footer__ack {
	max-width: none;
	margin-inline: 0;
	padding-inline: var(--bcrc-gutter);
}

/* The base row is a two-column grid rather than a wrapping flex row: with
   flex it broke onto two lines even with room to spare, which read as a
   mistake. Grid states the intent, so it cannot drift. */
.bcrc-footer__base {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: var(--wp--preset--spacing--40);
	row-gap: .75rem;
}
.bcrc-footer__base > * { margin: 0; }
.bcrc-footer__base > :last-child { text-align: right; }

@media (max-width: 700px) {
	.bcrc-footer__base { grid-template-columns: 1fr; }
	.bcrc-footer__base > :last-child { text-align: left; }
}

/* ==========================================================================
   Mobile navigation overlay

   The overlay was inheriting the desktop dropdown treatment, so each submenu
   drew its own bordered box, indented a further step, and every child of
   every section was expanded at once. Rebuilt as a plain accordion:

   - one left edge for the whole list, no nested boxes
   - parents are large, children are quieter and indented exactly once
   - sections stay closed until opened, which is the progressive disclosure
     the strategy asks for
   - the two priority actions sit at the top, where an anxious or hurried
     visitor finds them first
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	overflow-y: auto;
}

.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	display: block;
	width: 100%;
	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	display: block;
	width: 100%;
	gap: 0;
}

/* Kill the dropdown chrome. Inside the overlay these are list rows. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	min-width: 0 !important;
	padding: 0 0 .5rem 0 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	inset: auto !important;
}

/* Top-level rows */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: block;
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open
> .wp-block-navigation__responsive-container-content
> .wp-block-navigation__container
> .wp-block-navigation-item {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.05rem 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Children: indented once, set quieter, hairline separated */
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .8rem 0 .8rem 1.25rem;
	font-size: 1rem;
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
	border-top: 1px solid var(--wp--preset--color--hairline, rgba(0,0,0,.06));
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container .wp-block-navigation-item:first-child
.wp-block-navigation-item__content { border-top: 0; }

/* The toggle chevron */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	margin: 0;
	flex: none;
	color: var(--wp--preset--color--brand-ink);
	transition: transform .2s var(--bcrc-ease);
}
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item.has-child[data-wp-on--click] .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-submenu[aria-expanded="true"] .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

/* The two priority actions, top of the overlay */
.wp-block-navigation__responsive-container.is-menu-open .bcrc-nav-action {
	border-bottom: 0 !important;
	margin-bottom: .6rem;
}
.wp-block-navigation__responsive-container.is-menu-open .bcrc-nav-action .wp-block-navigation-item__content {
	justify-content: center;
	padding: .95rem 1.25rem;
	font-weight: 700;
	letter-spacing: .03em;
	border: 2px solid var(--wp--preset--color--deep);
	color: var(--wp--preset--color--deep);
}
.wp-block-navigation__responsive-container.is-menu-open
.bcrc-nav-action--primary { margin-top: var(--wp--preset--spacing--30); }
.wp-block-navigation__responsive-container.is-menu-open
.bcrc-nav-action--primary .wp-block-navigation-item__content {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
}

/* These two are only for the overlay: the desktop bar already has the CTA. */
@media (min-width: 1181px) {
	.bcrc-header .bcrc-nav-action { display: none !important; }
}

/* Close button sits on the page grid, not floating in the corner. */
.wp-block-navigation__responsive-container-close {
	top: 1.1rem;
	right: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--contrast);
}

/* Focus stays visible against the white overlay. */
.wp-block-navigation__responsive-container.is-menu-open :is(a, button):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: -3px;
}

/* With border-box the opening's max-width now includes its own padding, which
   pushed it 24px inside the page grid. It takes the shared gutter instead, so
   it is measured the same way as every other section. */
.bcrc-open__inner {
	max-width: none;
	margin-inline: 0;
	width: 100%;
	padding-inline: var(--bcrc-gutter);
}

/* The two action rows are buttons, so their labels centre. */
.is-menu-open .bcrc-nav-action .wp-block-navigation-item__content {
	text-align: center !important;
}

/* ==========================================================================
   Menu button

   A bare hamburger sitting beside a large filled CTA reads as decoration and
   loses every contest for attention. It is also the weakest affordance we
   could pick for this audience: an unlabelled icon assumes a convention that
   older visitors and people reading in a second language may not carry.

   So it becomes a real control: a bordered box the same height as the call
   to action, a heavier icon, and the word "Menu" beside it.
   ========================================================================== */

.wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 3rem;
	min-width: 3rem;
	padding: .7rem .9rem;
	border: 2px solid var(--wp--preset--color--deep);
	border-radius: var(--wp--custom--radius--md);
	background: transparent;
	color: var(--wp--preset--color--deep);
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	cursor: pointer;
	transition: background-color .16s var(--bcrc-ease), color .16s var(--bcrc-ease);
}
.wp-block-navigation__responsive-container-open::after {
	content: "Menu";
}
.wp-block-navigation__responsive-container-open svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.wp-block-navigation__responsive-container-open:hover {
	background: var(--wp--preset--color--deep);
	color: #fff;
}
.wp-block-navigation__responsive-container-open:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 3px;
}

/* Very narrow screens: the word is dropped before the control is, and the
   box keeps a 48px target either way. */
@media (max-width: 400px) {
	.wp-block-navigation__responsive-container-open::after { display: none; }
	.wp-block-navigation__responsive-container-open { padding: .7rem; }
}

/* The close control gets the same treatment so the pair reads as one thing. */
.is-menu-open .wp-block-navigation__responsive-container-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 3rem;
	padding: .7rem .9rem;
	border: 2px solid var(--wp--preset--color--deep);
	border-radius: var(--wp--custom--radius--md);
	background: transparent;
	color: var(--wp--preset--color--deep);
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
}
.is-menu-open .wp-block-navigation__responsive-container-close::after { content: "Close"; }
.is-menu-open .wp-block-navigation__responsive-container-close svg { width: 20px; height: 20px; fill: currentColor; }
.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	background: var(--wp--preset--color--deep);
	color: #fff;
}

/* With the menu button now carrying weight, the call to action steps back a
   little on small screens so the two are not shouting at each other. */
@media (max-width: 620px) {
	.bcrc-header .bcrc-header__cta .wp-block-button__link {
		font-size: .8125rem;
		padding: .8rem .95rem;
		min-height: 3rem;
	}
}

/* ==========================================================================
   Photography

   One photo set, one treatment. Photos are full-bleed or structural, never
   pasted into rounded containers, and every band carries a civic caption:
   a small tracked label plus one plain sentence.
   ========================================================================== */

.bcrc-photo-band { position: relative; margin: 0; }
/* The band is a block group, so core flow layout hands its second child a
   24px margin-block-start. The caption must sit directly on the image. */
.bcrc-photo-band > *,
.bcrc-svc-photo > * { margin-block: 0 !important; }
.bcrc-photo-band img {
	display: block;
	width: 100%;
	height: clamp(320px, 55vh, 560px);
	object-fit: cover;
}
.bcrc-photo-band__caption {
	display: block;
	padding: .8rem var(--bcrc-gutter) .85rem;
	background: var(--wp--preset--color--base-2);
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-family: var(--wp--preset--font-family--body);
	font-size: .9375rem;
	color: var(--wp--preset--color--contrast-2);
}
.bcrc-photo-band__caption .bcrc-label { margin-right: .9rem; color: var(--wp--preset--color--brand-ink); }

/* Featured split: photo left, doors right. Falls back to stacked on mobile
   and to type-only if the photo is ever removed. */
.bcrc-doors-split { display: grid; gap: clamp(1.75rem, 4vw, 4rem); }
@media (min-width: 960px) {
	.bcrc-doors-split { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); align-items: stretch; }
}
.bcrc-doors-split__media { position: relative; min-height: 300px; background: var(--wp--preset--color--base-2); }
.bcrc-doors-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bcrc-doors-split__media:empty { display: none; }
@media (max-width: 959px) {
	.bcrc-doors-split__media { min-height: 0; }
	.bcrc-doors-split__media img { position: static; height: auto; aspect-ratio: 4 / 3; }
}
.bcrc-doors-split__body .bcrc-doors__head { grid-template-columns: 1fr; }
.bcrc-doors-split__body .bcrc-doors { grid-template-columns: 1fr; border-top-width: 1px; }
.bcrc-doors-split__body .bcrc-door + .bcrc-door { border-left: 0; border-top: 1px solid var(--wp--preset--color--line); padding-left: 0; }
.bcrc-doors-split__body .bcrc-door { padding-right: 0; }

/* Journey page image band: photo under the opener, shallower than home. */
.bcrc-svc-photo { position: relative; margin: 0; }
.bcrc-svc-photo img {
	display: block;
	width: 100%;
	height: clamp(260px, 42vh, 440px);
	object-fit: cover;
}

/* Prose blocks from the content build. */
.bcrc-prose { max-width: 62ch; }
.bcrc-prose p {
	margin: 0 0 1.1rem;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.68;
}
.bcrc-prose p:last-child { margin-bottom: 0; }

/* Program cards regain their photos with the square treatment. */
.bcrc-card__media { aspect-ratio: 3 / 2; }


/* The two hero sentences breathe: the orange clause starts its own line
   block with a measured gap, instead of running on with only a colour
   change to separate it. */
.bcrc-open__title em {
	display: block;
	margin-top: .28em;
}
.bcrc-closing__title em { display: block; margin-top: .25em; }

/* ==========================================================================
   Civic pass: patterns drawn from GOV.UK, the Australian Government Design
   System and Service NSW, executed in the existing palette and type.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Opening: dark civic panel beside photography

   The type-only opening read austere. The panel keeps the civic register;
   the photograph carries the warmth. Below 940px the photo drops under the
   panel at a fixed ratio.
   -------------------------------------------------------------------------- */

.bcrc-open__split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 940px) {
	.bcrc-open__split {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
		min-height: min(72vh, 42rem);
	}
}

.bcrc-open__panel { position: relative; overflow: hidden; display: grid; align-content: center; }
.bcrc-open { min-height: 0; display: block; }

.bcrc-open__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(2.5rem, 6vh, 4.5rem);
	padding-inline: var(--bcrc-gutter) clamp(1.5rem, 4vw, 4rem);
	max-width: none;
	display: grid;
	gap: clamp(1rem, 2.2vh, 1.7rem);
}
.bcrc-open__title { font-size: clamp(2.2rem, min(4.6vw, 7vh), 4rem); }
.bcrc-open__say { max-width: 44ch; }

.bcrc-open__bridge {
	right: -18%;
	bottom: -10%;
	width: clamp(24rem, 42vw, 40rem);
	opacity: .55;
}

.bcrc-open__media { position: relative; min-height: 0; background: var(--wp--preset--color--deep-2); }
.bcrc-open__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
@media (max-width: 939px) {
	.bcrc-open__media { aspect-ratio: 3 / 2; }
	.bcrc-open__media img { position: static; height: 100%; }
}

/* Popular tasks: the Service NSW pattern. Small, sans, immediately tappable. */
.bcrc-open__popular {
	margin: .4rem 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem 1.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .9375rem;
}
.bcrc-open__popular .bcrc-label { color: rgba(255, 255, 255, .62); margin-right: .2rem; }
.bcrc-open__popular a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .38);
	padding-bottom: 2px;
	transition: border-color .16s var(--bcrc-ease), color .16s var(--bcrc-ease);
}
.bcrc-open__popular a:hover { color: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.bcrc-crumbs {
	padding: .8rem var(--bcrc-gutter);
	border-bottom: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--base);
}
.bcrc-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem .55rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	color: var(--wp--preset--color--contrast-2);
}
.bcrc-crumbs li { display: flex; align-items: baseline; gap: .55rem; }
.bcrc-crumbs li + li::before { content: "/"; color: var(--wp--preset--color--line); }
.bcrc-crumbs a { color: var(--wp--preset--color--contrast-2); text-decoration: underline; text-underline-offset: 2px; }
.bcrc-crumbs a:hover { color: var(--wp--preset--color--brand-ink); }
.bcrc-crumbs [aria-current="page"] { color: var(--wp--preset--color--contrast); font-weight: 600; }

/* --------------------------------------------------------------------------
   Cards take the design-system keyline
   -------------------------------------------------------------------------- */

.bcrc-card {
	border-top: 3px solid var(--wp--preset--color--deep);
	transition: border-color .18s var(--bcrc-ease);
}
.bcrc-card:hover { border-top-color: var(--wp--preset--color--brand); }

/* ==========================================================================
   The arch

   The bridge glyph's arch is a low segmental curve, and that exact profile
   becomes the crop for inset portrait photography: people seen through the
   bridge. Applied only to portrait-format insets. Full-bleed bands and
   keyline cards stay rectangular; the arch means "a person", not "an image".
   ========================================================================== */

.bcrc-voice__portrait,
.bcrc-person__photo,
.bcrc-doors-split__media {
	border-radius: 50% 50% 0 0 / 14% 14% 0 0;
	overflow: hidden;
}

/* The doors media is a stretched column, so its arch sits on the image
   itself rather than the full-height container. */
@media (min-width: 960px) {
	.bcrc-doors-split__media { border-radius: 50% 50% 0 0 / 9% 9% 0 0; }
}

/* Person placeholder initials keep the arch too. */
.bcrc-person__photo--none { border-radius: 50% 50% 0 0 / 14% 14% 0 0; }

/* --------------------------------------------------------------------------
   The lockup echo: rule, bridge, rule

   The wordmark closes with the bridge centred between two rules. The footer
   closes the page the same way, above the copyright line.
   -------------------------------------------------------------------------- */

.bcrc-lockup {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 0 var(--bcrc-gutter);
	margin-top: var(--wp--preset--spacing--50);
}
.bcrc-lockup::before,
.bcrc-lockup::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, .22);
}
.bcrc-lockup__glyph {
	width: 60px;
	height: auto;
	flex: none;
	/* Inline svg: colour comes from the tone, not from filters. */
	color: currentColor;
}

.bcrc-lockup--dark { color: rgba(255, 255, 255, .55); }
.bcrc-lockup--dark::before,
.bcrc-lockup--dark::after { background: rgba(255, 255, 255, .22); }

.bcrc-lockup--light { color: var(--wp--preset--color--contrast-2); opacity: .6; margin-bottom: 2rem; padding: 0; }
.bcrc-lockup--light::before,
.bcrc-lockup--light::after { background: var(--wp--preset--color--line); }

/* --------------------------------------------------------------------------
   Contact page: form beside the practical details and map
   -------------------------------------------------------------------------- */

.bcrc-contact-grid { display: grid; gap: clamp(2rem, 4.5vw, 4.5rem); }
@media (min-width: 960px) {
	.bcrc-contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
}

.bcrc-form { display: grid; gap: 1.15rem; max-width: 36rem; }
.bcrc-form__row { margin: 0; display: grid; gap: .35rem; }
.bcrc-form__row label {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1rem;
}
.bcrc-form__req { font-weight: 400; color: var(--wp--preset--color--contrast-2); }
.bcrc-form__help {
	font-size: .9375rem;
	color: var(--wp--preset--color--contrast-2);
	font-family: var(--wp--preset--font-family--body);
}
.bcrc-form input[type="text"],
.bcrc-form select,
.bcrc-form textarea {
	width: 100%;
	padding: .8rem .9rem;
	border: 2px solid var(--wp--preset--color--contrast-2);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast);
}
.bcrc-form input:focus-visible,
.bcrc-form select:focus-visible,
.bcrc-form textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--contrast);
}
.bcrc-form__hp { position: absolute !important; left: -9999px !important; }
.bcrc-form__actions { margin: .35rem 0 0; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.bcrc-form__aside { font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--contrast-2); }

.bcrc-form-done {
	border: 1px solid var(--wp--preset--color--line);
	border-left: 4px solid var(--wp--preset--color--ok, #2C7A5B);
	background: var(--wp--preset--color--base-2);
	padding: var(--wp--preset--spacing--30);
	max-width: 36rem;
}
.bcrc-form-done h3 { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--xl); }
.bcrc-form-done p { margin: 0; }

.bcrc-map {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 50% 50% 0 0 / 7% 7% 0 0;
	overflow: hidden;
}
.bcrc-map iframe { display: block; width: 100%; height: 320px; border: 0; }
.bcrc-map__link {
	display: block;
	padding: .7rem .9rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .9375rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.bcrc-contact-aside { display: grid; gap: 1.5rem; align-content: start; }
.bcrc-contact-aside h2 { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--xl); }
.bcrc-contact-aside p { margin: 0 0 .35rem; }

/* The arch reads as intentional, not as a rendering accident. */
.bcrc-voice__portrait,
.bcrc-person__photo,
.bcrc-person__photo--none { border-radius: 50% 50% 0 0 / 22% 22% 0 0; }

/* --------------------------------------------------------------------------
   Contact Form 7 wears the house style

   Field pattern follows GOV.UK: bold label, grey hint beneath, then a
   full-width control. CF7 injects <br> tags between those pieces; they are
   neutralised so spacing is ours, and every box gets an explicit width
   because the label does not reliably stretch inside CF7's paragraph markup.
   -------------------------------------------------------------------------- */

.wpcf7 form {
	display: block;
	max-width: 36rem;
}
.wpcf7 form > p { margin: 0 0 1.4rem; width: 100%; }
.wpcf7 form label {
	display: block;
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.4;
}
.wpcf7 form label br { display: none; }

.bcrc-form__req {
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
	font-size: 1rem;
}
.bcrc-form__help {
	display: block;
	margin-top: .2rem;
	font-weight: 400;
	font-size: .9375rem;
	color: var(--wp--preset--color--contrast-2);
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
	margin-top: .5rem;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
	display: block;
	width: 100%;
	padding: .8rem .9rem;
	border: 2px solid var(--wp--preset--color--contrast-2);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast);
}
.wpcf7 select { height: 3.1rem; }
.wpcf7 :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--contrast);
}

.wpcf7 input[type="submit"] {
	display: inline-flex;
	min-height: 3rem;
	padding: .8rem 1.5rem;
	border: 2px solid var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background-color .16s var(--bcrc-ease), color .16s var(--bcrc-ease);
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--brand-ink); border-color: var(--wp--preset--color--brand-ink); color: #fff; }
.wpcf7 input[type="submit"]:focus-visible { outline: 3px solid var(--wp--preset--color--deep); outline-offset: 3px; }

.wpcf7 .bcrc-form__actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.bcrc-form__aside { font-family: var(--wp--preset--font-family--body); color: var(--wp--preset--color--contrast-2); }

/* Validation and response messaging in the civic notice voice. */
.wpcf7 .wpcf7-not-valid { border-color: var(--wp--preset--color--brand-ink); }
.wpcf7 .wpcf7-not-valid-tip {
	display: block;
	margin-top: .3rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: .9375rem;
	color: var(--wp--preset--color--brand-ink);
}
.wpcf7 .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--preset--color--line) !important;
	border-left: 4px solid var(--wp--preset--color--deep) !important;
	background: var(--wp--preset--color--deep-wash);
	font-family: var(--wp--preset--font-family--body);
}
.wpcf7 form.sent .wpcf7-response-output { border-left-color: #2C7A5B !important; background: #EDF6F2; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: var(--wp--preset--color--brand-ink) !important; background: var(--wp--preset--color--brand-wash); }
.wpcf7 .screen-reader-response { position: absolute; clip-path: inset(50%); }

/* --------------------------------------------------------------------------
   Acknowledgement artwork slot

   When a commissioned piece exists it takes a real panel at full opacity
   with the artist's credit beneath the text. Cultural artwork is shown as
   artwork, never faded into a background texture. Until then the band keeps
   the theme's own arch motif, which belongs to the BCRC brand and imitates
   nothing.
   -------------------------------------------------------------------------- */

.bcrc-ack-band--withArt { background-image: none; }

@media (min-width: 900px) {
	.bcrc-ack-band--withArt .bcrc-ack-band__inner {
		grid-template-columns: minmax(9rem, 13rem) minmax(11rem, 15rem) minmax(0, 1fr) auto;
	}
}
.bcrc-ack-band__art {
	align-self: stretch;
	min-height: 7rem;
	overflow: hidden;
	border-radius: 50% 50% 0 0 / 12% 12% 0 0;
}
.bcrc-ack-band__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 899px) {
	.bcrc-ack-band__art { max-height: 12rem; }
}

.bcrc-ack-band__credit {
	margin: .6rem 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .68);
}

/* --------------------------------------------------------------------------
   Desktop navigation: the item is the hover target

   The hover pill previously sat on the link while the chevron is the link's
   sibling, so the pill collided with the chevron and items had no breathing
   room between one item's chevron and the next label. The pill now wraps the
   whole item, label and chevron together, and items get real gaps.
   -------------------------------------------------------------------------- */

.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container {
	gap: .35rem;
}

.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item {
	display: flex;
	align-items: center;
	padding: .5rem .7rem;
	border-radius: var(--wp--custom--radius--md);
	transition: background-color .16s var(--bcrc-ease);
}
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:hover {
	background: var(--wp--preset--color--base-2);
}
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--brand-ink);
}

/* The link and toggle stop carrying their own pill. */
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	padding: 0;
	background: transparent !important;
	border-radius: 0;
}

/* The chevron: always visible, always the item's colour, spaced off the label. */
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon {
	margin-left: .35rem;
	padding: 0;
	color: inherit;
	flex: none;
}
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon svg {
	display: block;
	stroke: currentColor;
}
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item:hover .wp-block-navigation__submenu-icon {
	color: var(--wp--preset--color--brand-ink);
}

/* Current-page marker moves to the item so it underlines label and chevron. */
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content {
	box-shadow: none;
}
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content > .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item {
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--brand);
	border-radius: var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 0;
}

/* Dropdown panels anchor to the padded item cleanly. */
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	margin-top: .5rem;
}


/* --------------------------------------------------------------------------
   Desktop toggle button: reset browser chrome, keep it in the pill
   -------------------------------------------------------------------------- */

.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-submenu__toggle {
	border: 0;
	background: transparent;
	padding: 0;
	cursor: pointer;
	line-height: 0;
}

/* The dropdown anchors to its parent item, opening from the item's left
   edge just below the pill. */
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child {
	position: relative;
}
.bcrc-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	left: 0 !important;
	right: auto !important;
	top: calc(100% + .25rem) !important;
	margin-top: 0;
}

/* Each overlay row anchors its own toggle. Without this the absolutely
   positioned plus/minus buttons escape their rows and become invisible. */
.is-menu-open .wp-block-navigation-item { position: relative; }


/* --------------------------------------------------------------------------
   The bridge marks endings and confirmations

   Every dark closing field carries the silhouette, echoing the opening: the
   page begins and ends at the bridge. CSS mask, so it costs one rule and no
   markup edits across pages.
   -------------------------------------------------------------------------- */

.bcrc-closing { position: relative; overflow: hidden; isolation: isolate; }
.bcrc-closing::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -3%;
	bottom: -14%;
	width: clamp(16rem, 30vw, 26rem);
	aspect-ratio: 148.69 / 60.52;
	background: #17505F;
	-webkit-mask: url("../images/bridge.svg") no-repeat center / contain;
	mask: url("../images/bridge.svg") no-repeat center / contain;
	pointer-events: none;
}

/* A message safely sent is an arrival: the form's success notice carries
   the mark. */
.wpcf7 form.sent .wpcf7-response-output {
	position: relative;
	padding-left: calc(var(--wp--preset--spacing--30) + 64px);
}
.wpcf7 form.sent .wpcf7-response-output::before {
	content: "";
	position: absolute;
	left: var(--wp--preset--spacing--30);
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	aspect-ratio: 148.69 / 60.52;
	background: var(--wp--preset--color--deep);
	-webkit-mask: url("../images/bridge.svg") no-repeat center / contain;
	mask: url("../images/bridge.svg") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   Document list: the civic record, one row per file
   -------------------------------------------------------------------------- */

.bcrc-doclist { list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 44rem; border-top: 1px solid var(--wp--preset--color--line); }
.bcrc-doc { border-bottom: 1px solid var(--wp--preset--color--line); }
.bcrc-doc a {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	gap: 1.25rem;
	align-items: baseline;
	padding: 1rem 0;
	text-decoration: none;
	color: inherit;
	transition: color .16s var(--bcrc-ease);
}
.bcrc-doc a:hover { color: var(--wp--preset--color--brand-ink); }
.bcrc-doc__year {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--deep);
}
.bcrc-doc__name { font-family: var(--wp--preset--font-family--body); font-weight: 600; }
.bcrc-doc__meta {
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	color: var(--wp--preset--color--contrast-2);
	white-space: nowrap;
}

/* The mission line: the organisation speaking, so it takes the serif voice. */
.bcrc-mission {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: clamp(1.15rem, 1.9vw, 1.45rem);
	line-height: 1.4;
	color: var(--wp--preset--color--deep);
	border-left: 3px solid var(--wp--preset--color--brand);
	padding-left: 1.25rem;
	margin-bottom: 1.5rem !important;
}