/* =============================================================================
   Bakery Combinations — global stylesheet
   Design tokens transcribed verbatim from the Figma file variable set.
   Desktop source of truth: 1440px frame. Mobile source of truth: 430px frame.

   1. Fonts
   2. Design tokens
   3. Reset & base
   4. Typography tokens
   5. Layout primitives
   6. Components (tag, button)
   7. Site header / navigation
   8. Accessibility utilities
   9. WordPress core classes
============================================================================= */

/* 1. Fonts ---------------------------------------------------------------- */

@font-face {
	font-family: "Clash Grotesk";
	src: url("../fonts/ClashGrotesk-Variable.woff2") format("woff2-variations");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Variable-latin.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Variable-latin-ext.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Special Gothic Expanded One";
	src: url("../fonts/SpecialGothicExpandedOne-latin.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* 2. Design tokens -------------------------------------------------------- */

:root {
	/* Colours — Figma "Fixed/BCA *" variables, exact hex. */
	--bca-steel-blue: #28357c;
	--bca-powder: #f7f7f7;
	--bca-white: #ffffff;
	--bca-tangerine: #eb5126;
	--bca-midnight: #080624;
	--bca-cream: #fff6ef;

	/* Introduced by the Turnkey Solutions frames (51375:28134): the Artisan
	   variant swaps steel blue for this everywhere the accent appears. */
	--bca-chocolate: #3f1310;

	/* The dimmed tail of the two tone display paragraphs. */
	--bca-cream-40: rgba(255, 246, 239, 0.4);
	--bca-powder-40: rgba(247, 247, 247, 0.4);

	/* Hairline rules used across the design. Figma draws these as 0.25px
	   strokes; a 0.25px CSS border rounds up to a full-strength device pixel
	   and paints four times too bright, so every hairline is drawn instead as
	   a 1px line at a quarter of the stroke's alpha — the same ink over the
	   same area, on standard and retina screens alike. The colour variables
	   below already carry the quartered alpha. */
	--bca-rule-white: rgba(255, 255, 255, 0.15);
	--bca-rule-cream: rgba(255, 246, 239, 0.15);
	/* Once the quarter of a 0.2 stroke; the client's frames draw every rule on
	   the dark grounds at 0.6 (Sep 2026), so it now matches the cream rule. */
	--bca-rule-cream-20: rgba(255, 246, 239, 0.15);
	--bca-hairline: 1px;
	/* The same rule where it is drawn as a box rather than as a border. */
	--bca-rule: 1px;

	/* Families. */
	--font-display: "Clash Grotesk", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

	/* Layout — both design frames use a 40px gutter. */
	--gutter: 40px;

	/* Every corner-marked mount box — photo plates, the FAQ/product panels,
	   the enquiry and timeline cards — rules its border in this one ink, so
	   the hairline boxes read identically across the site. */
	--bca-mount-rule: rgba(40, 53, 124, 0.25);
	--frame-desktop: 1440px;

	/* Fluid ramps: exact at 430px and 1440px, linear between.
	   Derived as min + (max-min) * (100vw - 430px) / 1010px. */
	--hero-gap: clamp(48px, 30.97px + 3.9604vw, 88px);       /*  48 →  88 */
	--section-pad-y: clamp(64px, 47.03px + 3.9604vw, 104px); /*  64 → 104 */
	--section-64-88: clamp(64px, 53.78px + 2.3762vw, 88px);  /*  64 →  88 */
}

/* 3. Reset & base --------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--bca-midnight);
	color: var(--bca-white);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 400;
}

p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	color: inherit;
	text-decoration: none;
}

img, svg, video {
	display: block;
	max-width: 100%;
	/* Every cover-fitted photograph on the site crops from the bottom up:
	   a person's head sits at the top of a frame, so anchoring there is
	   what keeps faces whole in the cards, mounts and plates. */
	object-position: 50% 0;
}

/* Setting display on the elements above outranks the browser's own rule for
   the hidden attribute, so anything hidden that way has to be held down. */
[hidden] {
	display: none !important;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

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

/* 4. Typography tokens ---------------------------------------------------- */
/* Named to mirror the Figma text styles so designer↔dev references line up.
   Figma letterSpacing is a percentage; -2 → -0.02em, 8 → 0.08em. */

.t-h2 {
	font-family: var(--font-display);
	font-size: 88px;
	line-height: 0.9;
	letter-spacing: -0.02em;
}

.t-h4,
.t-48 {
	font-family: var(--font-display);
	font-size: 48px;
	line-height: 1;
	letter-spacing: 0;
}

.t-40 {
	font-family: var(--font-display);
	font-size: 40px;
	line-height: 1;
	letter-spacing: -0.02em;
}

.t-h5 {
	font-family: var(--font-display);
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.t-32 {
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.t-h6 {
	font-family: var(--font-display);
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.t-24 {
	font-family: var(--font-display);
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.t-18 {
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: -0.03em;
}

.t-body-16 {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: -0.02em;
}

.t-body-14 {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.02em;
}

.t-body-12 {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: -0.02em;
}

.t-tag {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* 5. Layout primitives ---------------------------------------------------- */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: clip;
}

/* Full-bleed row with the design's 40px gutter. */
.frame {
	width: 100%;
	padding-inline: var(--gutter);
}

/* 6. Components ----------------------------------------------------------- */

/* Tag — 11px tangerine square + 10px Inter caption, gap 8px. */
.tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tag__dot {
	width: 11px;
	height: 11px;
	flex: none;
	background-color: var(--bca-tangerine);
}

.tag__label {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bca-powder);
	opacity: 0.9;
	white-space: nowrap;
}

/* Button — Figma "Buttons" component.
   Desktop padding 16/12; mobile padding 24/16 (per the mobile frame). */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 24px;
	border-radius: 2px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.btn--primary {
	background-color: var(--bca-steel-blue);
	color: var(--bca-powder);
}

.btn--primary:hover {
	background-color: #1d2861;
}

/* The filled button in whichever colour the current view calls its accent.
   Steel blue unless a section sets --accent, which is what the Turnkey
   Solutions page does when the Artisan tab is showing. */
.btn--accent {
	background-color: var(--accent, var(--bca-steel-blue));
	color: var(--bca-powder);
}

.btn--accent:hover {
	background-color: var(--accent-hover, #1d2861);
}

.btn--light {
	background-color: var(--bca-powder);
	color: var(--bca-midnight);
}

.btn--light:hover {
	background-color: var(--bca-white);
}

/* Outlined variant. The rule is an inset shadow rather than a border so the
   button keeps the exact drawn box — Figma strokes it inside the 39px height,
   a real border would push it to 41. */
.btn--outline {
	box-shadow: inset 0 0 0 1px var(--bca-powder);
	color: var(--bca-powder);
}

.btn--outline:hover {
	background-color: var(--bca-powder);
	color: var(--bca-midnight);
}

@media (min-width: 1200px) {
	.btn {
		padding: 12px 16px;
	}
}

/* Scroll read display statements.

   The sections that use bakery_statement() draw the sentence in two tones, and
   both tones are the same colour at two alphas — 100% and 40%. The design's
   split falls mid-word, which is one frame of a reveal running along the
   sentence; main.js splits the paragraph into characters and walks that split
   point with the scroll. Sections supply the channels through --stmt-rgb (see
   sections.css).

   The class is added by JS, so without it — no JS, or reduced motion — the
   paragraph keeps its server rendered lead/tail split and none of this applies. */

.statement.is-split .statement__char {
	color: rgb(var(--stmt-rgb, 255 246 239) / 0.4);
}

.statement.is-split .statement__char.is-lit {
	color: rgb(var(--stmt-rgb, 255 246 239));
}

/* Keeps a word whole when the line wraps — the reveal runs through characters,
   but the text still breaks at spaces. */
.statement__word {
	display: inline-block;
	white-space: nowrap;
}

/* 7. Site header / navigation --------------------------------------------- */
/* The header overlays the hero: transparent with a hairline bottom rule. */

.site-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 20;
	width: 100%;
	border-bottom: var(--bca-hairline) solid rgba(247, 247, 247, 0.25);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px var(--gutter);
}

/* Lines stop at the bar (D6 feedback, ALL-2). The client file keeps the bar
   clear ground on every frame (53333:48209, 53333:27730): the lattice a hero
   lays behind itself starts at the bar's rule rather than showing through the
   bar. Each of those layers starts at the top of the page, under the header,
   so each is clipped by the bar's height — 24 + 64 + 24 and the rule below
   1200px, the 89px contact panel and the rule from there up. */
:root {
	--header-height: 113px;
}

@media (min-width: 1200px) {
	:root {
		--header-height: 90px;
	}
}

.page-glow,
.panel-hero::after,
.story-hero__grid {
	clip-path: inset(var(--header-height) 0 0);
}

/* Signed in, WordPress pushes the page down under its toolbar but the header,
   placed against the window, stayed at the top behind it — so the bar sat
   above the page it belongs to and the lines met no rule. It drops with the
   page by the toolbar's own height. */
.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

/* Logo lockup — the mark and wordmark keep the exact insets from the design. */
.site-logo {
	position: relative;
	display: block;
	width: 202.502px;
	height: 29.656px;
	flex: none;
}

.site-logo__mark {
	position: absolute;
	left: 0;
	top: 0.27%;
	width: 14.57%;
	height: 99.12%;
}

.site-logo__word {
	position: absolute;
	left: 16.89%;
	top: 0;
	width: 83.11%;
	height: 100%;
}

/* Desktop nav links — 12px Clash, uppercase, 24px gap. */
.primary-nav {
	display: none;
}

.primary-nav__list {
	display: flex;
	align-items: center;
	gap: 24px;
}

.primary-nav__item {
	position: relative;
}

.primary-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--bca-white);
	white-space: nowrap;
	transition: color 0.2s ease;
}

/* The page's own item used to sit in tangerine; the client asked for it to
   read like the rest (Sep 2026), so only hover carries the colour. */
.primary-nav__link:hover {
	color: var(--bca-tangerine);
}

/* A parent item is a link plus its own disclosure button, so the parent page
   stays reachable and the submenu is operable by keyboard and by touch. */
.primary-nav__row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.primary-nav__toggle,
.mobile-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.primary-nav__toggle {
	width: 12px;
	height: 12px;
}

/* Chevron for items with children. Figma draws it pointing down; it flips when
   the panel is open. */
.nav-chevron {
	width: 8px;
	height: 4px;
	flex: none;
	transition: transform 0.2s ease;
}

.primary-nav__toggle[aria-expanded="true"] .nav-chevron,
.mobile-nav__toggle[aria-expanded="true"] .nav-chevron {
	transform: rotate(180deg);
}

/* Dropdown panel — Figma "Drop Down" (51389:21910).

   A plain white card hung under the bar: 24px of padding, no border, no radius,
   no shadow. Its links are the bar's own 12px Clash caps in midnight, laid out
   as two columns with 23px between both the columns and the rows.

   It is pinned to the bottom of the 89px bar rather than to the bottom of the
   link, which is why the items below stretch to the bar's full height — that
   makes `top: 100%` land at 89px exactly, as drawn. */
.primary-nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: grid;
	grid-template-columns: auto;
	gap: 23px;
	width: max-content;
	padding: 24px;
	background-color: var(--bca-white);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	pointer-events: none;
}

/* Four links or more split into the two columns the frame draws; three or
   fewer stay in one so a short panel does not spread out half empty. */
.primary-nav__submenu--split {
	grid-template-columns: repeat(2, auto);
}

.primary-nav__item--parent:hover > .primary-nav__submenu,
.primary-nav__item--parent:focus-within > .primary-nav__submenu,
.primary-nav__submenu.is-open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.primary-nav__sublink {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--bca-midnight);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.primary-nav__sublink:hover {
	color: var(--bca-tangerine);
}

/* Contact block — 228 × 89 steel blue panel flush to the right edge. */
.header-cta {
	display: none;
	align-items: center;
	justify-content: center;
	width: 228px;
	height: 89px;
	padding: 16px;
	background-color: var(--bca-steel-blue);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--bca-white);
	transition: background-color 0.2s ease;
}

.header-cta:hover {
	background-color: #1d2861;
}

/* Mobile menu toggle — 64px tabler-icon-menu-2. */
.nav-toggle {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 64px;
	height: 64px;
	flex: none;
}

.nav-toggle svg {
	width: 100%;
	height: 100%;
}

.nav-toggle__bar {
	display: block;
	width: 26px;
	height: 1px;
	background-color: var(--bca-powder);
}

.nav-toggle__bars {
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: flex-end;
}

@media (min-width: 1200px) {
	.site-header__inner {
		padding: 0 0 0 var(--gutter);
	}

	.primary-nav,
	.header-cta {
		display: flex;
	}

	/* The bar is 89px tall — the height of the contact panel. Stretching the
	   nav and its items to that height means a dropdown hung at `top: 100%`
	   lands on the bar's bottom edge, which is where Figma draws it (y=89),
	   rather than on the bottom of a 13px line of text. */
	.primary-nav {
		align-self: stretch;
	}

	.primary-nav__list {
		align-items: stretch;
	}

	.primary-nav__item {
		display: flex;
		align-items: center;
	}

	.primary-nav__row {
		height: 100%;
	}

	.nav-toggle {
		display: none;
	}
}

/* Mobile menu — Figma 51389:20675, open submenus at 51389:20750 / 51389:23941.

   A white panel that slides in from the right and stops 40px short of the left
   edge, leaving a sliver of the page behind it. Everything inside is set in
   midnight and steel blue rather than the powder the header bar uses, because
   the panel is light. */
.mobile-nav {
	position: fixed;
	inset: 0 0 0 var(--gutter);
	z-index: 30;
	display: flex;
	flex-direction: column;
	background-color: var(--bca-white);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mobile-nav.is-open {
	transform: translateX(0);
}

/* Top bar: 16px above and below, the gutter either side, closed by a steel
   hairline. The 64px close target keeps the icon hard against the right. */
.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: none;
	padding: 16px var(--gutter);
	border-bottom: var(--bca-hairline) solid rgba(40, 53, 124, 0.25);
}

/* The 64px box is the tap target; the glyph is drawn in its right hand third,
   so the box sits flush inside the 40px padding exactly as the frame has it. */
.mobile-nav__close {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 64px;
	height: 64px;
	flex: none;
	color: var(--bca-steel-blue);
}

.mobile-nav__close .icon {
	width: 64px;
	height: 64px;
}

/* Body: 40px all round, 48px between the link list, the button and the foot. */
.mobile-nav__body {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding: var(--gutter);
}

.mobile-nav__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* The parent's link and its disclosure button share a row, the button pushed
   to the trailing edge so the whole width stays a comfortable target. */
.mobile-nav__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* 24px Clash at -3% — sentence case, as the frame sets it, not the bar's caps. */
.mobile-nav__link {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--bca-midnight);
	transition: color 0.2s ease;
}

.mobile-nav__link:hover {
	color: var(--bca-tangerine);
}

.mobile-nav__toggle {
	width: 24px;
	height: 24px;
	flex: none;
	color: var(--bca-steel-blue);
}

.mobile-nav__toggle .icon {
	width: 24px;
	height: 24px;
}

/* An open submenu is part of the list's own 24px rhythm — it is not indented
   or ruled off, it simply continues under its parent. */
.mobile-nav__submenu {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: 24px;
}

.mobile-nav__submenu[hidden] {
	display: none;
}

/* 16px Clash caps at +2%. */
.mobile-nav__sublink {
	display: block;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--bca-midnight);
	transition: color 0.2s ease;
}

.mobile-nav__sublink:hover {
	color: var(--bca-tangerine);
}

/* Full width steel blue button, 24px of padding all round, 16px caps. */
.mobile-nav__cta {
	width: 100%;
	padding: 24px;
	font-size: 16px;
}

.mobile-nav__foot {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.mobile-nav__social {
	display: flex;
	align-items: center;
	gap: 16px;
}

.mobile-nav__social-item,
.mobile-nav__social-item > a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bca-steel-blue);
	transition: color 0.2s ease;
}

/* Figma draws the Instagram mark in tangerine and the other two in steel. */
.mobile-nav__social-item--instagram {
	color: var(--bca-tangerine);
}

.mobile-nav__social-item > a:hover {
	color: var(--bca-tangerine);
}

.mobile-nav__contact {
	display: flex;
	flex-direction: column;
	gap: 21px;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--bca-midnight);
}

.mobile-nav__contact a {
	align-self: flex-start;
	transition: color 0.2s ease;
}

.mobile-nav__contact a:hover {
	color: var(--bca-tangerine);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 1200px) {
	.mobile-nav {
		display: none;
	}
}

body.nav-open {
	overflow: hidden;
}

/* 8. Accessibility utilities ---------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	z-index: 100000;
	top: 16px;
	left: 16px;
	width: auto;
	height: auto;
	padding: 12px 20px;
	clip: auto !important;
	clip-path: none;
	background: var(--bca-powder);
	color: var(--bca-midnight);
	font-size: 14px;
}

/* 9. WordPress core classes ----------------------------------------------- */

.alignleft {
	float: left;
	margin: 0 24px 24px 0;
}

.alignright {
	float: right;
	margin: 0 0 24px 24px;
}

.aligncenter {
	margin-inline: auto;
}

.wp-caption-text,
.wp-block-image figcaption {
	font-size: 12px;
	opacity: 0.7;
}

/* 10. Site footer ---------------------------------------------------------- */
/* Desktop 51375:16486 / mobile 51375:29771. Steel blue panel, 40px padding,
   40px gap between the wordmark, body and legal rows. */

.site-footer {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	padding: var(--gutter);
	background-color: var(--bca-steel-blue);
	color: var(--bca-white);
}

.site-footer__wordmark {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-bottom: 40px;
	border-bottom: var(--bca-hairline) solid var(--bca-rule-cream);
}

/* Mobile sets the lockup as live two line type. */
.site-footer__wordmark-img {
	display: none;
}

.site-footer__wordmark-text {
	width: 100%;
	font-family: "Special Gothic Expanded One", var(--font-display);
	font-weight: 400;
	font-size: 36px;
	line-height: 1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.site-footer__wordmark-text span {
	display: block;
}

.site-footer__body {
	display: flex;
	flex-direction: column;
	gap: 48px;
	width: 100%;
}

.site-footer__intro {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	width: 100%;
}

.site-footer__headline {
	font-family: var(--font-display);
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.site-footer__blurb {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.02em;
}

.site-footer__nav {
	display: flex;
	align-items: flex-start;
	gap: 40px;
	width: 100%;
}

/* Mobile stacks the first two groups into one 154px column; desktop promotes
   them to siblings so the row reads as three columns. */
.site-footer__merge {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 154px;
	flex: none;
}

.site-footer__group {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: var(--group-width, auto);
	flex: none;
}

.site-footer__merge .site-footer__group {
	width: 100%;
}

.site-footer__cluster {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* The Figma frame mixes both states into one drawing: the dim 14px items are
   every link at rest, the big white ones are those same links on hover. The
   line box is fixed at the hover height so the growing type never shifts the
   rest of the column. */
/* Every top level item is set in the display face at full strength; only the
   submenu links beneath one — Our Story under About Us, the industries, the
   resource pages — keep the quiet dim body face. The client file (53314:17387)
   reads the two styles as hierarchy, not as rest and hover states of the same
   link, which is how an earlier frame had been read. */
.site-footer__link {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--bca-white);
	transition: opacity 0.2s ease;
}

.site-footer__link:hover {
	opacity: 0.7;
}

.site-footer__sublink {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--bca-white);
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

.site-footer__sublink:hover {
	opacity: 1;
}

.site-footer__address {
	display: flex;
	flex-direction: column;
	gap: 21px;
	width: 258px;
	max-width: 100%;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: -0.02em;
}

a.site-footer__address-block {
	transition: opacity 0.2s ease;
}

a.site-footer__address-block:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 24px;
	width: 100%;
	padding-top: 40px;
	border-top: var(--bca-hairline) solid var(--bca-rule-cream);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: -0.02em;
}

.site-footer__legal-links {
	display: flex;
	gap: 24px;
}

.site-footer__legal a {
	color: var(--bca-white);
	transition: opacity 0.2s ease;
}

.site-footer__legal a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 1200px) {

	.site-footer__wordmark-img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1359.680908203125 / 70.56000518798828;
	}

	.site-footer__wordmark-text {
		display: none;
	}

	/* Desktop lays the intro, link groups and address out as one row. */
	.site-footer__body {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 40px;
	}

	.site-footer__intro {
		width: 312px;
		flex: none;
	}

	.site-footer__nav {
		width: auto;
		gap: 64px;
	}

	.site-footer__merge {
		display: contents;
	}

	.site-footer__merge .site-footer__group {
		width: var(--group-width, auto);
	}

	.site-footer__legal {
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	/* Equal thirds put the legal links dead centre between the copyright
	   and the studio credit. */
	.site-footer__legal > * {
		flex: 1;
	}

	.site-footer__legal-links {
		justify-content: center;
	}

	.site-footer__legal > p:last-of-type {
		text-align: right;
	}
}

/* Steel outlined variant — the light panel's secondary action. */
.btn--outline-steel {
	box-shadow: inset 0 0 0 1px var(--bca-steel-blue);
	color: var(--bca-steel-blue);
}

.btn--outline-steel:hover {
	background-color: var(--bca-steel-blue);
	color: var(--bca-powder);
}

/* 11. Inner page views ----------------------------------------------------- */
/* Pages, posts, archives, search and 404 — every destination the navigation
   leads to away from the homepage. Figma does not draw these, so they are
   assembled entirely from the tokens and type scale the homepage established:
   the 40px gutter, the 1360px content width, Clash for headings, Inter for
   prose, tangerine for links. */

.container {
	width: 100%;
	max-width: calc(1360px + (var(--gutter) * 2));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* The header is absolutely positioned so it can overlay the hero. Away from
   the homepage there is no hero to overlay, so the content clears it by hand:
   24 + 64 icon + 24 on mobile, the 89px contact panel on desktop. */
.site-main.container {
	padding-top: calc(112px + var(--section-64-88));
	padding-bottom: var(--section-pad-y);
	flex: 1 0 auto;
}

@media (min-width: 1200px) {
	.site-main.container {
		padding-top: calc(89px + var(--section-pad-y));
	}
}

.page-header {
	margin-bottom: var(--section-64-88);
	padding-bottom: 24px;
	border-bottom: var(--bca-hairline) solid var(--bca-rule-cream);
}

.page-title,
.entry__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(32px, 21.78px + 2.3762vw, 56px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--bca-cream);
}

.archive-description {
	margin-top: 16px;
	max-width: 60ch;
	font-size: 16px;
	color: var(--bca-cream);
	opacity: 0.7;
}

/* Listings reuse the three-up rhythm the insight cards set on the homepage. */
.post-grid {
	display: grid;
	gap: 48px 24px;
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.post-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	.post-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.entry {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.entry--page,
.entry--single {
	gap: 32px;
	max-width: 75ch;
}

.entry__thumbnail {
	display: block;
	overflow: hidden;
}

.entry__thumbnail img {
	width: 100%;
	height: auto;
	object-fit: cover;
	transition: transform 0.4s ease;
}

a.entry__thumbnail:hover img {
	transform: scale(1.03);
}

.entry__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.entry__header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.entry__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.entry__excerpt {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: -0.02em;
	color: var(--bca-cream);
	opacity: 0.7;
}

.entry__excerpt p {
	margin: 0;
}

.entry__more {
	align-self: flex-start;
	font-family: var(--font-display);
	font-size: 14px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--bca-tangerine);
	transition: opacity 0.2s ease;
}

.entry__more:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.entry__date,
.posted-on,
.byline,
.cat-links,
.tags-links {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bca-powder);
	opacity: 0.6;
}

.entry .entry__title {
	font-size: 28px;
	letter-spacing: -0.03em;
}

.entry--page .entry__title,
.entry--single .entry__title {
	font-size: clamp(32px, 21.78px + 2.3762vw, 56px);
}

.entry__title a {
	transition: color 0.2s ease;
}

.entry__title a:hover {
	color: var(--bca-tangerine);
}

.entry__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 8px;
}

/* Prose. The editor writes into this, so it covers the block markup WordPress
   can emit rather than only what the theme prints. */
.entry__content {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: -0.02em;
	color: var(--bca-cream);
}

.entry__content > * + * {
	margin-top: 24px;
}

.entry__content h2,
.entry__content h3,
.entry__content h4 {
	margin-top: 48px;
	color: var(--bca-cream);
}

.entry__content h2 { font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.entry__content h3 { font-size: 28px; line-height: 1.1; letter-spacing: -0.03em; }
.entry__content h4 { font-size: 24px; line-height: 1.1; letter-spacing: -0.03em; }

.entry__content a {
	color: var(--bca-tangerine);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.entry__content ul,
.entry__content ol {
	padding-left: 24px;
	list-style: disc;
}

.entry__content ol {
	list-style: decimal;
}

.entry__content li + li {
	margin-top: 8px;
}

.entry__content blockquote {
	margin: 0;
	padding-left: 24px;
	border-left: 2px solid var(--bca-tangerine);
	font-size: 20px;
}

.entry__content img {
	height: auto;
}

.entry__content code,
.entry__content pre {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
}

.entry__content pre {
	padding: 24px;
	overflow-x: auto;
	background-color: rgba(255, 255, 255, 0.05);
}

.entry__content table {
	width: 100%;
	border-collapse: collapse;
}

.entry__content th,
.entry__content td {
	padding: 12px;
	text-align: left;
	border-bottom: var(--bca-hairline) solid var(--bca-rule-cream);
}

/* Pagination and post-to-post navigation. */
.pagination,
.post-navigation,
.posts-navigation {
	margin-top: var(--section-64-88);
	padding-top: 40px;
	border-top: var(--bca-hairline) solid var(--bca-rule-cream);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding-inline: 12px;
	font-family: var(--font-display);
	font-size: 14px;
	text-transform: uppercase;
	color: var(--bca-powder);
	box-shadow: inset 0 0 0 var(--bca-hairline) var(--bca-rule-cream);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.page-numbers:hover,
.page-numbers.current {
	background-color: var(--bca-steel-blue);
	color: var(--bca-white);
}

.post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 24px;
}

.post-navigation .nav-subtitle {
	display: block;
	font-family: var(--font-body);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.6;
}

.post-navigation .nav-title {
	font-family: var(--font-display);
	font-size: 18px;
	line-height: 1.1;
	letter-spacing: -0.03em;
	transition: color 0.2s ease;
}

.post-navigation a:hover .nav-title {
	color: var(--bca-tangerine);
}

/* Search form and the empty / 404 states. */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}

.search-form__field {
	flex: 1 1 220px;
	min-width: 0;
	padding: 12px 16px;
	background-color: transparent;
	border: var(--bca-hairline) solid var(--bca-rule-cream);
	font: inherit;
	font-size: 14px;
	color: var(--bca-cream);
}

.search-form__field::placeholder {
	color: var(--bca-cream);
	opacity: 0.5;
}

.search-form__submit {
	padding: 12px 24px;
	background-color: var(--bca-steel-blue);
	font-family: var(--font-display);
	font-size: 14px;
	text-transform: uppercase;
	color: var(--bca-powder);
	transition: background-color 0.2s ease;
}

.search-form__submit:hover {
	background-color: #1d2861;
}

.error-404,
.no-results {
	max-width: 60ch;
}

.page-content {
	margin-top: 24px;
	font-size: 16px;
	color: var(--bca-cream);
}

.widget-area {
	padding-block: var(--section-64-88);
}

.comments-area {
	margin-top: var(--section-64-88);
	padding-top: 40px;
	border-top: var(--bca-hairline) solid var(--bca-rule-cream);
}

/* Contact Form 7's response line inherits the surrounding ink, and the dark
   sections hand it white — invisible on the white form cards it always sits
   inside. Set in midnight everywhere so validation and confirmation messages
   always read. */
.wpcf7-response-output {
	color: var(--bca-midnight);
}

/* -----------------------------------------------------------------------------
   Headings rise out of frosted glass as they scroll into view (main.js).
   js-glass is only ever set by the script — never on reduced motion, and
   never on a heading the reader can already see — so without it every
   heading simply stands as drawn. The transition lives on the lifted state
   alone: the step down is applied before the heading has ever been seen,
   and must not animate.
-------------------------------------------------------------------------- */

.js-glass {
	opacity: 0;
	transform: translateY(32px);
	filter: blur(14px);
	will-change: opacity, transform, filter;
}

.js-glass.is-glassed {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
	transition:
		opacity 0.7s ease,
		filter 0.7s ease,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Page headers instead rise word by word on arrival (main.js): the same
   lift, without the glass, each word a beat behind the one before — the
   beat is set inline when the header is split. js-rise and the rise-word
   spans are only ever set by the script, a frame before is-risen lands, so
   without them the header stands as drawn. */
.js-rise .rise-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(0.55em);
	will-change: opacity, transform;
}

.js-rise.is-risen .rise-word {
	opacity: 1;
	transform: translateY(0);
	transition:
		opacity 0.55s ease,
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Past the frame's width the footer's rows hold the 1360 content column —
   wordmark, columns and legal line together — while the steel blue ground
   bleeds on. */
.site-footer__wordmark,
.site-footer__body,
.site-footer__legal {
	width: 100%;
	max-width: 1360px;
	margin-inline: auto;
}