/* 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 two-panel fill: ::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-deep);
	transition: color 260ms var(--ease-out-soft), transform 320ms var(--ease-out-soft);
}

.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);
	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.68rem;
	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;
	}
}