/* Buttons, measured clone of the Halston consultation button. Every value
   below is read from their authored CSS variables, not eyeballed:
   padding clamp(.5rem,.45rem+.25vw,.75rem) / clamp(.75rem,.7rem+.25vw,1rem),
   gap the same small clamp, font-size clamp(.8125rem,.8rem+.0625vw,.875rem),
   weight 500, letter-spacing -0.025rem, line-height 120%, uppercase,
   border 1px solid #2e2e2b (never changes on hover), radius 0, transparent
   background, justify-content space-between, 1rem icon at opacity 0.9.

   Hover mechanism, extracted from their live GSAP tweens (read via
   gsap.globalTimeline.getChildren() while dispatching pointer events, so
   these are the real authored values, not estimates):
   - Fill: TWO half-width panels behind the content, each starting at
     yPercent 101 below the button (clipped by overflow hidden), rising to
     0 on hover. duration 0.6s, ease expo.inOut, stagger 0.1s between the
     left panel and the right panel. Left rises first.
   - Text/icon swap: resting copy exits UP (y 0 to -1rem, opacity to 0,
     0.4s expo.inOut) while a cream duplicate enters FROM BELOW
     (y 1rem to 0, opacity 0 to 1, 0.4s expo.out), icon staggered 0.05s
     after text. Reproduced for the icon via ::before/::after on the same
     glyph; the label text uses a plain colour transition on the same
     clock, since duplicating the text node would mean editing every
     template that renders a button.
   expo.inOut = cubic-bezier(0.87, 0, 0.13, 1);
   expo.out   = cubic-bezier(0.16, 1, 0.3, 1). */
/* All button colours come from the palette tokens via four custom
   properties, so light and dark grounds flip one variables block instead
   of duplicating selector walls. Light grounds: INK border and text, INK
   hover fill with warm white text. Dark grounds flip to warm white. The
   hover MECHANISM (staggered two panel fill wipe, icon swap, timings) is
   unchanged. */
.button,
button,
input[type="submit"] {
	--btn-text: var(--color-ink);
	--btn-border: var(--color-ink);
	--btn-fill: var(--color-ink);
	--btn-fill-text: var(--color-warm-white);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
	padding: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem) clamp(0.75rem, 0.7rem + 0.25vw, 1rem);
	overflow: hidden;
	border: 1px solid var(--btn-border);
	border-radius: 0;
	background-color: transparent;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(0.8125rem, 0.8rem + 0.0625vw, 0.875rem);
	letter-spacing: -0.025rem;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--btn-text);
	cursor: pointer;
	isolation: isolate;
	transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.button,
.button--outline,
.button--secondary {
	background-color: transparent;
	border-color: var(--btn-border);
	color: var(--btn-text);
}

/* The fill in two panels: ::before is the left half, ::after the right half,
   both parked one full height below and sliding up on hover, right half
   0.1s behind the left, matching the measured stagger. z-index -1 inside
   the button's isolated stacking context so the fill paints beneath the
   button's raw text nodes (plain text cannot carry a z-index, so a fill
   at z-index 0 would paint over the label and hide it). */
.button::before,
button::before,
input[type="submit"]::before,
.button::after,
button::after,
input[type="submit"]::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 51%;
	z-index: -1;
	background-color: var(--btn-fill);
	transform: translateY(101%);
	transition: transform 0.6s cubic-bezier(0.87, 0, 0.13, 1);
}

.button::before,
button::before,
input[type="submit"]::before {
	left: 0;
}

.button::after,
button::after,
input[type="submit"]::after {
	right: 0;
	transition-delay: 0.1s;
}

.button > *,
button > *,
input[type="submit"] > * {
	position: relative;
	z-index: 1;
}

.button:hover,
.button:focus-visible,
.button--outline:hover,
.button--outline:focus-visible,
.button--secondary:hover,
.button--secondary:focus-visible {
	color: var(--btn-fill-text);
}

.button:hover::before,
.button:focus-visible::before,
.button:hover::after,
.button:focus-visible::after {
	transform: translateY(0%);
}

/* Dark grounds (DEEP and INK bands): warm white rest border and text,
   warm white hover fill with INK text. Same mechanism. */
.section--closing-cta .button,
.section--office-cta .button,
.section--furniture-statement .button,
.section--process-steps .button,
.section--office-statement .button,
.about-band .button,
.section--furniture-proof-forest .button,
.site-footer .button,
.section--closing-cta .button--outline,
.section--office-cta .button--outline,
.section--furniture-statement .button--outline,
.section--process-steps .button--outline,
.section--office-statement .button--outline,
.about-band .button--outline,
.section--furniture-proof-forest .button--outline,
.site-footer .button--outline {
	--btn-text: var(--color-warm-white);
	--btn-border: rgba(255, 254, 250, 0.5);
	--btn-fill: var(--color-warm-white);
	--btn-fill-text: var(--color-ink);
}

/* Compact sizing for the header nav CTA: same style, smaller footprint. */
.main-navigation .button {
	padding: 8px 14px;
	font-size: 12px;
	gap: 8px;
}

.main-navigation .button .button__plus {
	width: 13px;
	height: 13px;
	font-size: 13px;
}

/* Plus icon: measured 16px square. Halston's own icon is two stacked
   copies that crossfade with a vertical rise on hover (rest copy exits
   upward and fades out, a second copy arrives from above and fades in).
   Reproduced here with ::before/::after on the same glyph rather than
   duplicating markup: the real "+" text node is hidden (font-size: 0)
   and both pseudo-elements render content: "+" in its place. */
.button__plus {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	flex: none;
	font-size: 0;
	line-height: 1;
	overflow: hidden;
}

/* Measured tweens: exit 0.4s expo.inOut, enter 0.4s expo.out from 1rem
   BELOW, both delayed 0.05s behind the text swap (their icon stagger).
   The entering copy is an ARROW, not a second plus: Halston's two icon
   layers are different glyphs, confirmed in their hover end state. */
.button__plus::before,
.button__plus::after {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
}

.button__plus::before {
	content: "+";
}

.button__plus::after {
	content: "\2192";
	font-size: 14px;
}

.button__plus::before {
	transform: translateY(0);
	opacity: 0.9;
	transition: transform 0.4s cubic-bezier(0.87, 0, 0.13, 1) 0.05s, opacity 0.4s cubic-bezier(0.87, 0, 0.13, 1) 0.05s;
}

.button__plus::after {
	transform: translateY(1rem);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s, opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

.button:hover .button__plus::before,
.button:focus-visible .button__plus::before,
.button--outline:hover .button__plus::before,
.button--outline:focus-visible .button__plus::before,
.button--secondary:hover .button__plus::before,
.button--secondary:focus-visible .button__plus::before {
	transform: translateY(-1rem);
	opacity: 0;
}

.button:hover .button__plus::after,
.button:focus-visible .button__plus::after,
.button--outline:hover .button__plus::after,
.button--outline:focus-visible .button__plus::after,
.button--secondary:hover .button__plus::after,
.button--secondary:focus-visible .button__plus::after {
	transform: translateY(0);
	opacity: 1;
}

.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
.text-link:focus-visible,
.main-navigation a:focus-visible {
	outline: 2px solid rgba(162, 151, 130, 0.6);
	outline-offset: 4px;
}

.text-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-accent-text);
	transition: color 260ms var(--ease-out-soft), transform 320ms var(--ease-out-soft);
}

/* On the dark footer the deep tone falls to 3.24 to 1; the base
   accent itself reads at 5.25 there, so the link wears it. */
.site-footer .text-link {
	color: var(--color-accent);
}

.text-link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.18rem;
	height: 1px;
	background: currentColor;
	opacity: 0.34;
	transform: scaleX(0.36);
	transform-origin: left;
	transition: opacity 260ms ease, transform 420ms var(--ease-out-soft);
}

.text-link:hover,
.text-link:focus-visible {
	transform: translateX(0.18rem);
}

.text-link:hover::after,
.text-link:focus-visible::after {
	opacity: 0.72;
	transform: scaleX(1);
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding-block: 0;
	background: var(--color-bg);
	transition: box-shadow 260ms ease;
}

.site-header.is-scrolled {
	background: var(--color-bg);
	box-shadow: 0 14px 34px rgba(17, 22, 19, 0.06);
}

.site-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1rem, 2.4vw, 2.6rem);
	min-height: 4.55rem;
	padding-block: 0.5rem;
	border-bottom: 0;
	transition: min-height 260ms cubic-bezier(0.16, 1, 0.3, 1), padding 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-scrolled .site-header__inner {
	min-height: 4.02rem;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-width: 0;
}

.site-branding__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 4px;
	background: var(--color-dark);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.site-logo,
.site-logo a {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	line-height: 0;
}

.site-logo img,
.custom-logo {
	display: block;
	width: auto;
	max-width: clamp(10.25rem, 13vw, 12.75rem);
	max-height: 2.65rem;
	height: auto;
	object-fit: contain;
}

.site-branding:has(.site-logo) .site-branding__mark {
	display: none;
}

.site-branding:has(.site-logo) .site-branding__text {
	display: none;
}

.site-kicker {
	margin-bottom: 0.15rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.site-title {
	display: inline-block;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0;
}

.site-tagline {
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.main-navigation .menu {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: clamp(0.75rem, 1.25vw, 1.35rem);
	padding: 0;
	margin: 0;
	list-style: none;
	white-space: nowrap;
}

.main-navigation .menu-item {
	position: relative;
}

/* :not(.button) so the nav CTA link falls through entirely to the shared
   button styles below instead of fighting them property by property. */
.main-navigation a:not(.button) {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 2.4rem;
	font-family: var(--font-heading);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-text);
	transition: color var(--transition), transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* :not(.button) throughout: the nav CTA's ::after is one of the button
   fill panels, and this underline rule's higher specificity
   (.main-navigation a::after) would otherwise hijack it. */
.main-navigation a:not(.button)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.15rem;
	height: 1px;
	background: currentColor;
	opacity: 0;
	transform: scaleX(0);
	transform-origin: right;
	transition: opacity 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.main-navigation a:not(.button):hover::after,
.main-navigation a:not(.button):focus-visible::after {
	opacity: 0.45;
	transform: scaleX(1);
	transform-origin: left;
}

.main-navigation a:not(.button):hover,
.main-navigation a:not(.button):focus-visible {
	transform: translateY(-1px);
}

.main-navigation .sub-menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 0.55rem);
	left: 50%;
	display: grid;
	gap: 0;
	min-width: 17rem;
	padding: 0.5rem;
	margin: 0;
	list-style: none;
	background: var(--color-bg);
	border: 1px solid rgba(23, 26, 24, 0.12);
	box-shadow: 0 24px 54px rgba(17, 22, 19, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 0.45rem);
	transition:
		opacity 220ms var(--ease-out-soft),
		visibility 0ms linear 220ms,
		transform 260ms var(--ease-out-soft);
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition-delay: 0ms;
}

.main-navigation .sub-menu a {
	justify-content: flex-start;
	width: 100%;
	min-height: 2.55rem;
	padding: 0.55rem 0.65rem;
	color: rgba(23, 26, 24, 0.82);
}

.main-navigation .sub-menu a::after {
	display: none;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus-visible {
	background: rgba(138, 106, 54, 0.08);
	color: var(--color-dark);
	transform: none;
}

/* Nav CTA is a standard primary button: shares .button exactly (every
   .main-navigation link rule above is scoped :not(.button)), no
   duplicated styling here, so it can never drift out of sync again. */

/* Small desktop (981 to 1279): the link row plus the CTA needs about
   600px, more than half the container at these widths, so the midpoint
   pin below would overflow the viewport. Keep the centred layout here. */
@media (min-width: 981px) and (max-width: 1279px) {
	.main-navigation .menu > .menu-item:first-child {
		margin-left: auto;
	}

	.main-navigation .menu-item--cta {
		margin-left: auto;
	}
}

/* Full desktop: the nav link group is pinned so HOME's left edge sits
   exactly on the hero band's midpoint column line, where the right zone
   and the heavier rule begin: 50% of the container plus half the band's
   column gap, the same clamp used by the band. The logo stays left in
   normal flow and the Book a site visit CTA stays pinned to the
   container's right edge. The header inner IS the .container, so
   left: calc(50% ...) here and the band's column line resolve to the
   same x. */
@media (min-width: 1280px) {
	/* The container's gutter is padding, so absolute children anchor to the
	   full padding box: inset by the gutter on the right to sit on the
	   content edge. 50% of the padding box equals the content midpoint
	   because the padding is symmetric. */
	.main-navigation {
		position: absolute;
		top: 0;
		bottom: 0;
		right: var(--gutter);
		left: calc(50% + clamp(0.375rem, 0.35rem + 0.125vw, 0.5rem));
		display: flex;
		align-items: center;
	}

	.main-navigation .menu {
		width: 100%;
		justify-content: flex-start;
	}

	.main-navigation .menu-item--cta {
		margin-left: auto;
	}
}

.nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0.72rem 0.9rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	background: var(--color-surface);
	color: var(--color-text);
	transition: color 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
	color: var(--color-accent-deep);
	border-color: var(--color-accent-deep);
}

.site-header__cta {
	justify-self: end;
}

.site-footer {
	padding-top: clamp(5.25rem, 7vw, 8rem);
	padding-bottom: var(--space-6);
	color: rgba(255, 254, 250, 0.82);
	background: var(--color-ink);
}

.site-footer__wordmark {
	margin: 0 auto clamp(2.4rem, 4vw, 3.6rem);
	font-family: var(--font-heading);
	font-size: clamp(2.4rem, 6vw, 5.2rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
	text-transform: uppercase;
	color: #fff;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.28fr) minmax(12rem, 0.58fr) minmax(18rem, 1fr);
	gap: clamp(1.8rem, 3.2vw, 3.2rem);
	padding-block: clamp(1.8rem, 3.2vw, 2.75rem) var(--space-7);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__grid h2,
.site-footer__grid h3:not(.eyebrow) {
	color: #fff;
}

.site-footer__grid h3.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-accent-text);
	font-family: var(--font-mono);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
	margin-bottom: var(--space-3);
}

.site-footer__grid h3.eyebrow::before {
	content: "";
	width: 0.34rem;
	height: 0.34rem;
	flex: none;
	transform: rotate(45deg);
	background: var(--color-accent);
}

.site-footer__brand h2 {
	max-width: 17ch;
	font-size: clamp(1.7rem, 2.4vw, 2.5rem);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.site-footer .menu {
	padding: 0;
	margin: 0;
	list-style: none;
}

.site-footer .menu li + li {
	margin-top: 0.6rem;
}

.site-footer .menu a {
	position: relative;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.95rem;
	transition: color 260ms var(--ease-out-soft);
}

.site-footer .menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.16rem;
	height: 1px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms var(--ease-out-soft);
}

.site-footer .menu a:hover,
.site-footer .menu a:focus-visible {
	color: #fff;
}

.site-footer .menu a:hover::after,
.site-footer .menu a:focus-visible::after {
	transform: scaleX(1);
}

.site-footer__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
}

.site-footer__tags span {
	padding: 0;
	border: 0;
	background: transparent;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.site-footer__contact {
	padding: 0 0 0 clamp(1.5rem, 3vw, 3rem);
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
	background: transparent;
}

.site-footer__nav {
	padding-left: clamp(1.5rem, 3vw, 3rem);
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer__note {
	font-size: 0.92rem;
	color: rgba(255, 255, 255, 0.6);
}

.site-footer__meta {
	display: flex;
	justify-content: space-between;
	gap: var(--space-3);
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.footer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

.page-header--split {
	display: grid;
	grid-template-columns: 1fr minmax(18rem, 28rem);
	gap: var(--space-5);
	align-items: end;
}

.page-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
	gap: var(--space-5);
	align-items: start;
}

.page-hero__content {
	padding: clamp(2rem, 3.4vw, 3.2rem);
	border-radius: var(--radius-lg);
	background:
		linear-gradient(145deg, rgba(17, 22, 19, 0.97), rgba(26, 33, 28, 0.96)),
		var(--color-dark);
	color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 22px 54px rgba(17, 22, 19, 0.16);
}

.page-hero__content .eyebrow,
.page-hero__content .lead {
	color: rgba(255, 255, 255, 0.72);
}

.page-hero__panel,
.archive-note,
.project-summary-card {
	padding: var(--space-5);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: linear-gradient(180deg, #f6f0e7 0%, #efe7da 100%);
	box-shadow: var(--shadow-soft);
}

.page-hero__panel {
	position: relative;
	overflow: hidden;
}

.page-hero__panel::before {
	content: "";
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 0.35rem;
	background: linear-gradient(90deg, var(--color-accent), rgba(133, 100, 44, 0.12));
}

.page-hero__points {
	display: grid;
	gap: 0.9rem;
	padding-top: 0.8rem;
}

.page-hero__points div {
	display: grid;
	grid-template-columns: 2.6rem 1fr;
	gap: 0.85rem;
	align-items: start;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(23, 26, 24, 0.08);
}

.page-hero__points span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: rgba(17, 22, 19, 0.08);
	font-size: 0.82rem;
	font-weight: 800;
}

.page-hero__note {
	padding-top: 1rem;
	border-top: 1px solid rgba(23, 26, 24, 0.08);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--color-dark-soft);
}

.content-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 19rem;
	gap: var(--space-5);
	align-items: start;
}

.content-layout__main > * + * {
	margin-top: var(--space-4);
}

.sidebar-card {
	padding: var(--space-5);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
}

.post-list {
	display: grid;
	gap: var(--space-4);
}

.entry-card,
.project-card {
	border: 1px solid var(--color-line);
	border-radius: 8px;
	background: var(--color-surface);
	box-shadow: 0 1px 0 rgba(17, 22, 19, 0.06);
}

.project-card {
	overflow: hidden;
}

.entry-card__meta {
	font-size: 0.88rem;
	color: var(--color-muted);
}

.project-card__body {
	display: grid;
	gap: var(--space-3);
	padding: 1.4rem;
}

.project-card__meta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.8rem;
	align-items: center;
}

.project-card__meta-tag {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-dark-soft);
}

.project-card__signal {
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent-deep);
}

.project-card__summary {
	max-width: 46rem;
	font-size: 0.98rem;
	line-height: 1.62;
	color: var(--color-muted);
}

.project-card__evidence {
	max-width: 44rem;
	padding-top: 0.9rem;
	border-top: 1px solid rgba(23, 26, 24, 0.08);
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-accent-deep);
}

.project-card__details {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(23, 26, 24, 0.1);
}

.project-card__detail {
	display: grid;
	gap: 0.35rem;
	align-content: start;
}

.project-card__detail strong {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.project-card__detail span {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--color-text);
}

.project-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
}

.project-card__image--placeholder {
	background:
		linear-gradient(145deg, rgba(17, 22, 19, 0.34), rgba(17, 22, 19, 0.06)),
		linear-gradient(180deg, #d9cfbf 0%, #cdbda4 100%);
}

.entry-content > * + * {
	margin-top: var(--space-4);
}

.archive-note-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

.info-grid,
.process-grid,
.route-grid,
.route-detail__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
}

.info-card,
.process-card,
.case-study-meta,
.route-detail__panel {
	padding: var(--space-5);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
}

.info-card h3 {
	margin-bottom: 0.85rem;
}

.process-card__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.6rem;
	height: 2.6rem;
	margin-bottom: 1rem;
	border-radius: var(--radius-sm);
	background: var(--color-dark);
	color: #fff;
	font-weight: 700;
}

.cta-panel {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-5);
	padding: var(--space-6);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, #f6f0e7 0%, #ece3d5 100%);
}

.cta-panel--split {
	align-items: start;
}

.cta-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 16rem;
}

.case-study-meta-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.case-study-meta p {
	margin-top: 0.6rem;
	font-weight: 600;
}

.case-study-body {
	display: grid;
	gap: var(--space-5);
}

.case-study-section {
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-line);
}

.case-study-section:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.route-detail {
	padding: var(--space-5);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-surface);
	box-shadow: var(--shadow-soft);
}

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

.route-detail__list {
	padding-left: 1.1rem;
	margin: 0;
	display: grid;
	gap: 0.7rem;
}

/* Navigation clarity consolidation. */
.main-navigation .menu {
	gap: clamp(0.7rem, 1.08vw, 1.15rem);
}

.main-navigation .menu-item-has-children > a {
	gap: 0.38rem;
}

.main-navigation .menu-item-has-children > a::before {
	content: "";
	order: 2;
	width: 0.28rem;
	height: 0.28rem;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	opacity: 0.58;
	transform: translateY(-0.08rem) rotate(45deg);
}

.main-navigation .sub-menu {
	left: 0;
	min-width: 18.5rem;
	padding: 0.7rem;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent),
		rgba(246, 243, 237, 0.985);
	transform: translate(0, 0.45rem);
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu {
	transform: translate(0, 0);
}

.main-navigation .sub-menu a {
	min-height: 2.7rem;
	padding: 0.65rem 0.75rem;
	font-size: 0.72rem;
	letter-spacing: 0.09em;
}


@media (max-width: 980px) {
	.site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.site-logo img,
	.custom-logo {
		max-width: min(12rem, 54vw);
		max-height: 2.45rem;
	}

	.main-navigation {
		display: none;
		grid-column: 1 / -1;
		padding-bottom: 1rem;
	}

	.main-navigation.is-open {
		display: block;
	}

	.main-navigation .menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.2rem;
	}

	.main-navigation .sub-menu {
		position: static;
		min-width: 0;
		padding: 0.25rem 0 0.5rem 1rem;
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.main-navigation .menu-item-has-children > a::before {
		display: none;
	}

	.main-navigation .sub-menu a {
		min-height: 2.1rem;
		padding: 0.25rem 0;
		font-size: 0.7rem;
		color: rgba(23, 26, 24, 0.68);
	}

	.main-navigation .sub-menu a:hover,
	.main-navigation .sub-menu a:focus-visible {
		background: transparent;
	}

	.nav-toggle {
		display: inline-flex;
	}

	.main-navigation .menu-item--cta > a {
		margin-top: 0.35rem;
	}

	.site-footer__grid,
	.page-header--split,
	.content-layout,
	.page-hero__grid,
	.archive-note-grid,
	.info-grid,
	.process-grid,
	.route-grid,
	.route-detail__grid,
	.case-study-meta-grid,
	.cta-panel {
		grid-template-columns: 1fr;
	}

	.cta-panel {
		display: grid;
	}

	.site-footer__contact {
		padding-left: 0;
		padding-top: var(--space-4);
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
	}
}

@media (max-width: 640px) {
	.site-header {
		padding-top: 0.5rem;
	}

	.site-header__inner {
		min-height: 3.65rem;
		padding-block: 0.42rem;
	}

	.site-logo img,
	.custom-logo {
		max-width: min(10rem, 52vw);
		max-height: 2.25rem;
	}

	.site-footer__meta {
		flex-direction: column;
	}
}


/* --------------------------------------------------------------------------
   The two path quote chooser: plain words, no form. Furniture leads to
   the storefront, fit out to the consultation form.
   -------------------------------------------------------------------------- */

.quote-chooser[hidden] {
	display: none;
}

.quote-chooser {
	position: fixed;
	inset: 0;
	z-index: 320;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4, 1.25rem);
}

.quote-chooser__scrim {
	position: absolute;
	inset: 0;
	background: rgba(17, 22, 19, 0.45);
}

.quote-chooser__panel {
	position: relative;
	width: min(26rem, 100%);
	background: var(--color-base, #efece6);
	padding: clamp(1.4rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	box-shadow: 0 24px 60px -30px rgba(17, 22, 19, 0.5);
}

.quote-chooser__path {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 1.1rem;
	border: 1px solid var(--color-line);
	background: var(--color-warm-white, #fffefa);
	text-decoration: none;
	transition: border-color 180ms ease, transform 180ms ease;
}

.quote-chooser__path:hover,
.quote-chooser__path:focus-visible {
	border-color: var(--color-accent-deep);
	transform: translateY(-1px);
	outline: none;
}

.quote-chooser__path-title {
	font-family: var(--font-heading);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--color-ink);
}

.quote-chooser__path-copy {
	font-size: 0.86rem;
	color: var(--color-muted);
}

.quote-chooser__close {
	position: absolute;
	top: 0.5rem;
	right: 0.7rem;
	background: none;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--color-muted);
	cursor: pointer;
}

.enquiry-form__bridge {
	margin-top: 0.8rem;
	font-size: 0.88rem;
	color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   The spec it for me path. A quiet text link under the options that
   opens a three field mini brief. Never a competing button: the
   configure path stays the hero, this stays small print until opened.
   -------------------------------------------------------------------------- */

.spec-brief {
	margin-top: var(--space-4);
	max-width: 34rem;
}

/* A proper section, not a reveal: a quiet card with a heading, one
   sentence, and the same fields as every other form on the site. */
.spec-brief__card {
	padding: var(--space-3);
	border: 1px solid var(--color-line);
	background: var(--color-surface, #fff);
}

.spec-brief__heading {
	margin: 0;
	font-size: 1.15rem;
	line-height: 1.3;
}

.spec-brief__copy {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	color: var(--color-muted);
}

.spec-brief__form {
	margin-top: var(--space-3);
	display: grid;
	gap: 0.8rem;
}

.spec-brief__upload {
	font-size: 0.85rem;
}

.spec-brief__upload-link {
	cursor: pointer;
	list-style: none;
	color: var(--color-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.spec-brief__upload-link::-webkit-details-marker {
	display: none;
}

.spec-brief__upload .spec-brief__field {
	margin-top: 0.6rem;
}

.spec-brief__footer {
	margin: 0.2rem 0 0;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}

.spec-brief__promise {
	font-size: 0.82rem;
	color: var(--color-muted);
}

.spec-brief__thanks {
	font-size: 0.92rem;
	color: var(--color-accent-deep);
}

/* ==========================================================================
   The furniture trust strip: three facts in one line, small caps, the
   quiet text colour on the paper colour, a hairline rule above and
   below, no icons, no fill. Identical on the furniture landing, the
   family pages and the product singles; never on fit out pages, the
   home page or the quote desk. Wraps at fact boundaries only, the
   separator riding the line end, and stacks to three ruled lines on a
   phone. Minimum font size 11 px throughout.
   ========================================================================== */
.trust-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: 0.4rem;
	margin: clamp(1rem, 1.8vw, 1.5rem) 0 0;
	padding: 0.7rem 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.trust-strip__fact {
	color: inherit;
	white-space: nowrap;
}

a.trust-strip__fact {
	text-decoration: none;
	border-bottom: 1px solid var(--color-accent);
	transition: color 200ms ease;
}

a.trust-strip__fact:hover,
a.trust-strip__fact:focus-visible {
	color: var(--color-accent-deep);
}

.trust-strip__fact:not(:last-child)::after {
	content: "\00B7";
	margin: 0 0.7rem;
	color: var(--color-accent);
}

@media (max-width: 900px) {
	.trust-strip {
		font-size: 0.7rem;
	}
}

@media (max-width: 640px) {
	.trust-strip {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0.5rem;
		/* Three short lines exactly: 11.2px with tighter tracking keeps
		   the longest fact on one line at 390. */
		font-size: 0.7rem;
		letter-spacing: 0.05em;
	}

	.trust-strip__fact {
		white-space: normal;
	}

	.trust-strip__fact:not(:last-child)::after {
		content: none;
	}
}

/* Consent bar: one quiet question, nothing pre ticked. */
.consent-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2, 12px) var(--space-4, 24px);
	padding: 14px clamp(16px, 4vw, 40px);
	background: var(--color-ink, #191919);
	color: var(--color-warm-white, #fffefa);
}

.consent-bar__text {
	margin: 0;
	font-size: 0.9rem;
}

.consent-bar__text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.consent-bar__actions {
	display: flex;
	gap: 10px;
}

.consent-bar .button--small {
	padding: 8px 18px;
	font-size: 0.85rem;
}

.consent-bar .button--outline {
	border-color: currentColor;
	color: inherit;
	background: transparent;
}

/* On the dark bar the buttons invert: the Allow button must never read
   as a dark box on a dark ground. */
.consent-bar .button {
	background: var(--color-warm-white, #fffefa);
	color: var(--color-ink, #262626);
	border: 1px solid var(--color-warm-white, #fffefa);
	white-space: nowrap;
}

.consent-bar .button:hover {
	background: transparent;
	color: var(--color-warm-white, #fffefa);
}

.consent-bar .button--outline {
	background: transparent;
	color: var(--color-warm-white, #fffefa);
	border-color: currentColor;
}

.consent-bar__actions {
	flex-wrap: nowrap;
}

/* The honeypot on every enquiry form: a field a person cannot see, cannot
   reach with the keyboard and has no reason to fill, so anything in it came
   from something that reads markup rather than a page. This rule lived in
   the contact page stylesheet, which loads on the contact page and nowhere
   else, so on the quote page and on every product page the field was being
   drawn into the layout. It belongs here, where every page loads it.

   Hidden by clip rather than by display none or visibility hidden, because a
   field a browser considers hidden is a field the better bots skip. */
.enquiry-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* The challenge draws nothing until Cloudflare decides it needs to. */
.cf-turnstile:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
   The same build, small, wherever the line is listed rather than configured:
   the quote drawer, the quote page and the confirmation. It sits under the
   line's own words and moves nothing else: the quantity, the edit and remove
   links, the totals and the button all stay where they were.

   One row that scrolls sideways rather than wrapping, because wrapping is what
   pushes the Request quote button off a phone screen.
   --------------------------------------------------------------------------- */
.build-tiles {
	display: flex;
	gap: 0.35rem;
	margin: 0.5rem 0 0;
	padding: 0 0 0.2rem;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: thin;
	scrollbar-color: var(--color-line) transparent;
	-webkit-overflow-scrolling: touch;
}

.build-tiles::-webkit-scrollbar {
	height: 3px;
}

.build-tiles::-webkit-scrollbar-thumb {
	background: var(--color-line);
}

.build-tiles__tile {
	flex: 0 0 auto;
	width: 3.5rem;
}

.build-tiles__face {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	overflow: hidden;
	/* --color-hairline was never a token. tokens.css defines --color-line and
	   nothing else, so this border, and the scrollbar above it, resolved to
	   nothing and the 56 px face had no edge at all: a white swatch showed as
	   blank space with a label under it. */
	border: 1px solid var(--color-line);
	background: #fff;
}

/* The 56 px face is square and the picture is 104 to 72, so filling it would
   take a third off the sides. It is fitted instead, on the white the face
   already has, so the same picture is whole here as on the product page. */
.build-tiles__face img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.build-tiles__face--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
}

.build-tiles__half {
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

/* A choice with no picture in the source says its words in the frame, on
   the same footprint, and never borrows a picture from something else. */
.build-tiles__face--words {
	padding: 0.2rem 0.15rem;
	font-family: var(--font-mono);
	font-size: 0.56rem;
	line-height: 1.25;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--color-muted);
	overflow: hidden;
	overflow-wrap: anywhere;
}

.build-tiles__name {
	display: -webkit-box;
	padding: 0.2rem 0.05rem 0;
	font-family: var(--font-mono);
	font-size: 0.6rem;
	line-height: 1.3;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--color-muted);
	overflow: hidden;
	/* A single long word, Rectangular, is wider than the tile and would be
	   sliced through rather than wrapped. It breaks and takes the second
	   line instead. */
	overflow-wrap: anywhere;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* The one picture on the site that is a render rather than a photograph says
   so under itself here as well, a step quieter than the name. */
.build-tiles__note {
	display: block;
	padding: 0.1rem 0.05rem 0;
	font-family: var(--font-mono);
	font-size: 0.52rem;
	line-height: 1.25;
	letter-spacing: 0.06em;
	text-align: center;
	color: var(--color-muted);
}

.build-tiles__tile--more .build-tiles__face--words {
	font-size: 0.62rem;
	letter-spacing: 0.04em;
}