/* ==========================================================================
   Sections + motion (all motion is progressive: static first, enhanced when
   supported and when the visitor hasn't asked for reduced motion)
   ========================================================================== */

/* ---------- Hero (static layout – mobile, tablet, no scroll-timeline support) ---------- */
.hero__stage {
	max-width: var(--max);
	margin-inline: auto;
	padding: 8px var(--gutter) var(--space-s);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: center;
}
.hero__text { display: flex; flex-direction: column; justify-content: center; gap: clamp(18px, 2.4vh, 26px); }
.hero__title { font-size: clamp(48px, 5vw, 92px); }
.hero__line { display: block; overflow: hidden; padding-block-end: .04em; }
.hero__line > span { display: block; }
.hero__lead { font-size: var(--fs-lead); line-height: 1.6; max-width: 40ch; color: var(--text-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__media { position: relative; height: clamp(420px, 68vh, 680px); overflow: hidden; background: var(--board); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 64% 22%); }
.hero__dim, .hero__caption { display: none; }
@media (max-width: 899px) {
	.why__media { max-width: none; }
	.hero { margin-block-end: var(--space-s); }
	.hero__stage {
		display: flex;
		flex-direction: column;
		padding: 0 0 calc(8vw + 28px);
		background: var(--ink);
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), 0 100%);
	}
	.hero__media { order: -1; flex: none; align-self: stretch; width: 100%; height: 46svh; min-height: 300px; max-height: 560px; }
	.hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, var(--ink) 0%, rgba(46, 29, 19, .55) 18%, rgba(46, 29, 19, 0) 40%);
	}
	.hero__text {
		position: relative;
		z-index: 2;
		margin-block-start: -36px;
		gap: 14px;
		padding-inline: var(--gutter);
		color: var(--cream);
	}
	.hero__title { font-size: clamp(40px, 11vw, 64px); color: var(--cream); }
	.hero .grain { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--amber); -webkit-text-fill-color: var(--amber); }
	.hero__lead { font-size: 16px; line-height: 1.55; color: #E3D6C4; max-width: 36ch; }
	.hero__actions { align-items: center; gap: 6px 18px; }
	.hero__actions .btn--amber { flex: 1 1 100%; }
	.hero__actions .btn--ghost { min-height: 44px; padding: 0; box-shadow: none; color: var(--cream); font-weight: 500; text-decoration: underline; text-underline-offset: .3em; }
	.hero__actions .btn--ghost::before { display: none; }
	.hero :focus-visible { outline-color: var(--amber); }
}

/* ---------- Points (one quiet line) ---------- */
.points { padding-block: 0 var(--space-m); }
.points__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 0;
	padding-block: 18px;
	border-block: 1px solid var(--line);
	font-weight: 500;
}
.points__item { display: inline-flex; align-items: center; }
.points__item + .points__item::before {
	content: "";
	inline-size: 3px;
	block-size: 22px;
	margin-inline: clamp(14px, 2vw, 28px);
	background: var(--wood);
	border-radius: 1px;
}

/* ---------- Services: stacked boards ---------- */
.services { padding-block: var(--space-m) var(--space-l); }
.services__list { list-style: none; display: grid; gap: clamp(20px, 3vh, 32px); }
.panel { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + clamp(12px, 3vh, 32px) + var(--i, 0) * 12px); }
.panel__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(20px, 4vw, 64px);
	align-items: center;
	padding: clamp(12px, 1.6vw, 22px);
	background: var(--ground);
	border: 1px solid var(--line);
	border-radius: 3px;
	box-shadow: 0 -16px 40px -26px rgba(46, 29, 19, .4);
	transform-origin: 50% 0;
}
.panel:nth-child(even) .panel__media { order: 2; }
.panel__media { position: relative; overflow: hidden; height: clamp(300px, 58vh, 580px); border-radius: 2px; background: var(--board); }
.panel__img { width: 100%; height: 100%; object-fit: cover; }
.panel__text { display: flex; flex-direction: column; gap: 16px; padding: clamp(6px, 2vw, 28px); }
.panel__kicker { font-size: 17px; font-weight: 700; color: var(--wood-dark); }
.panel__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-l); line-height: var(--lh-display); max-width: 12ch; }
.panel__lead { font-size: var(--fs-lead); color: var(--text-2); max-width: 34ch; }
.panel .link-arrow { align-self: start; }
@media (max-width: 760px) {
	.panel { top: calc(var(--wp-admin--admin-bar--height, 0px) + 10px + var(--i, 0) * 8px); }
	.panel__card { grid-template-columns: 1fr; gap: 14px; padding: 10px; }
	.panel:nth-child(even) .panel__media { order: 0; }
	.panel__media { height: min(36svh, 300px); min-height: 200px; }
	.panel__text { gap: 10px; padding: 2px 6px 8px; }
	.panel__title { font-size: clamp(34px, 9vw, 44px); max-width: none; }
	.panel__lead { font-size: 17px; }
}

/* ---------- Why ---------- */
.why {
	padding-block: var(--space-m);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.why__media { height: clamp(420px, 70vh, 720px); max-width: 560px; overflow: hidden; background: var(--board); }
.why__img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.why__text { display: flex; flex-direction: column; gap: 26px; }
.why__text .section-title { max-width: 13ch; }
.why__lead { font-size: var(--fs-lead); color: var(--text-2); max-width: 42ch; }
.why__list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.why__list li { display: flex; align-items: baseline; gap: 14px; font-size: 19px; }
.why__list li::before { content: ""; flex: none; inline-size: 10px; block-size: 10px; background: var(--wood); transform: translateY(-2px); }

/* ---------- Process (static: list + full rings) ---------- */
.process {
	background: var(--ink);
	color: var(--ground);
	clip-path: polygon(0 var(--cut), 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.process__stage {
	max-width: var(--max);
	margin-inline: auto;
	padding: calc(var(--space-m) + var(--cut)) var(--gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(24px, 5vw, 80px);
	align-items: center;
}
.process__title { font-size: var(--fs-xl); margin-block-end: 32px; }
.process__steps { list-style: none; display: flex; flex-direction: column; gap: 40px; }
.process__step { display: block; }
.process__num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1; color: var(--amber); }
.process__num span { color: #8B7A6A; }
.process__step-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 5vw, 80px); line-height: .95; margin-block: 10px 14px; }
.process__step-text { display: block; font-size: 19px; color: var(--on-dark-2); max-width: 30ch; }
.process__disc { position: relative; width: min(100%, 540px); aspect-ratio: 1; justify-self: center; }
.process__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.process__heart {
	position: absolute;
	inset: 22.5%;
	border-radius: 50%;
	overflow: hidden;
	background: #6E5E48;
	box-shadow: 0 0 0 6px var(--ink), 0 0 0 8px var(--wood);
}
.process__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.process__img:last-child { opacity: 1; }

/* ---------- Marquee (body font, calm) ---------- */
.marquee { overflow: hidden; padding-block: 26px; border-block-end: 1px solid var(--line); }
.marquee__rail { display: flex; width: max-content; }
.marquee__track { display: flex; flex: none; }
.marquee__item {
	display: inline-flex;
	align-items: center;
	gap: clamp(24px, 3vw, 44px);
	padding-inline-end: clamp(24px, 3vw, 44px);
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(20px, 2.2vw, 30px);
	line-height: 1.3;
	letter-spacing: -0.2px;
	color: var(--ink);
	white-space: nowrap;
}
.marquee__slat { inline-size: 6px; block-size: 1.1em; background: var(--wood); border-radius: 1px; transform: skewX(-8deg); }

/* ---------- Featured projects ---------- */
.featured { padding-block: var(--space-l) var(--space-s); }
.featured .section-title { max-width: 16ch; }
.featured__grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: auto auto;
	gap: 24px;
}
.featured__grid .card--big { grid-row: span 2; }
.featured__grid .card--big .card__media { aspect-ratio: auto; height: clamp(360px, 62vh, 640px); }
.featured__grid .card--small:first-of-type { margin-block-start: 0; }
.featured__grid .card--small:nth-child(2) { margin-block-start: 72px; }
@media (max-width: 760px) {
	.featured__grid { grid-template-columns: 1fr; }
	.featured__grid .card--big { grid-row: auto; }
	.featured__grid .card--big .card__media { height: auto; aspect-ratio: 4 / 3; }
	.featured__grid .card--small:nth-child(2) { margin-block-start: 0; }
}
.featured__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-block-start: 32px; }
.featured__note { color: var(--muted); }

/* ---------- Statement (olive, diagonal top) ---------- */
.statement { background: var(--olive); color: var(--cream); }
.cut-top { clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%); }
.statement__inner {
	max-width: var(--max);
	margin-inline: auto;
	padding: calc(var(--space-m) + var(--cut)) var(--gutter) var(--space-m);
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 28px 48px;
}
.statement__text { font-size: var(--fs-xl); max-width: 16ch; }
.statement__text span { display: block; }
.statement__text span:not(:last-child) { opacity: .78; font-size: .62em; line-height: 1.12; }
.statement__text span:last-child { margin-block-start: .18em; }

/* ---------- Contact ---------- */
.contact {
	padding-block: var(--space-l) var(--space-m);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
.contact__text { display: flex; flex-direction: column; gap: 24px; }
.contact__text .section-title { max-width: 13ch; }
.contact__lead { font-size: var(--fs-lead); color: var(--text-2); max-width: var(--measure); }
.contact__facts { display: grid; gap: 10px; margin: 0; font-size: 16px; }
.contact__facts div { display: flex; gap: 16px; }
.contact__facts dt { color: var(--muted); min-width: 7em; }
.contact__facts dd { margin: 0; }

/* ---------- Inner pages ---------- */
.svc-body {
	padding-block: 0 var(--space-m);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.svc-body__title { font-family: var(--font-display); font-size: var(--fs-m); line-height: 1; margin-block-end: 20px; }
.svc-faq, .faq-page { padding-block: var(--space-m); max-width: 980px; }
.about-story { padding-block: 0 var(--space-m); }
.values { padding-block: var(--space-m); }
.values__list { list-style: none; counter-reset: v; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 6px; margin-block-start: var(--space-s); }
.values__item { counter-increment: v; background: var(--board); padding: 28px; border-radius: var(--radius); }
.values__item::before { content: counter(v); display: block; font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; color: var(--wood); margin-block-end: 8px; }
.values__title { font-size: 21px; margin-block-end: 6px; }
.legal, .article { padding-block: var(--space-s) var(--space-m); max-width: 900px; }
.legal__head, .article__head { margin-block-end: var(--space-s); }
.legal__date, .article__meta { margin-block-start: 12px; color: var(--muted); font-size: var(--fs-small); }
.legal__media, .article__media { margin-block-end: var(--space-s); }
.article__media img { width: 100%; border-radius: var(--radius); }

.guides { padding-block: var(--space-m); }
.guides .section-head { margin-block-end: 20px; }
.guides__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); column-gap: clamp(24px, 4vw, 56px); border-block-start: 1px solid var(--line); }
.guides__list li { border-block-end: 1px solid var(--line); }
.guide-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding-block: 16px; text-decoration: none; color: var(--ink); }
.guide-row__thumb { inline-size: 76px; block-size: 76px; border-radius: 2px; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(46, 29, 19, .09) 0 6px, transparent 6px 19px), var(--board); }
.guide-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.guide-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.guide-row__title { font-size: 18px; font-weight: 700; line-height: 1.35; }
.guide-row__excerpt { font-size: 15px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.guide-row__arrow { font-size: 20px; color: var(--wood); transition: transform var(--dur-micro) var(--ease); }
@media (hover: hover) and (pointer: fine) {
	.guide-row:hover .guide-row__title { text-decoration: underline; text-decoration-color: var(--wood); text-underline-offset: .2em; }
	.guide-row:hover .guide-row__arrow { transform: translateX(-4px); }
}
.guides__foot { margin-block-start: 24px; }
@media (max-width: 760px) {
	.guide-row { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
	.guide-row__thumb { inline-size: 64px; block-size: 64px; }
	.guide-row__arrow { display: none; }
}
.posts { padding-block: 0 var(--space-m); }
.posts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 40px 24px; }
.post-card__link { display: block; text-decoration: none; }
.post-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--board); border-radius: 2px; }
.post-card__media img { transition: transform 600ms var(--ease); }
.post-card__placeholder { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(90deg, rgba(46, 29, 19, .07) 0 10px, transparent 10px 46px), var(--board); }
.post-card__more { display: inline-flex; align-items: center; gap: 8px; margin-block-start: 10px; font-weight: 700; color: var(--wood-dark); border-block-end: 2px solid var(--wood); }
.post-card__more::after { content: "←"; }
@media (hover: hover) { .post-card__link:hover .post-card__media img { transform: scale(1.04); } .post-card__link:hover .post-card__title { text-decoration: underline; text-decoration-color: var(--wood); } }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding-block-start: 14px; }
.post-card__title { font-size: 22px; line-height: 1.3; margin-block: 0 6px; }
.post-card__excerpt { color: var(--text-2); }

.project { padding-block: var(--space-s) 0; }
.project__head { max-width: 980px; padding-block-end: var(--space-s); }
.project__cover { height: clamp(320px, 70vh, 760px); background: var(--board); }
.project__cover-img { width: 100%; height: 100%; object-fit: cover; }
.project__story { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px; padding-block: var(--space-m) 0; }
.project__challenge h2 { font-family: var(--font-display); font-size: var(--fs-m); line-height: 1; margin-block-end: 12px; }
.project__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: var(--space-m) 0; }

.notfound { padding-block: var(--space-l); text-align: center; display: grid; justify-items: center; gap: 20px; }
.notfound__saw { width: 160px; }
.notfound .hero__actions { justify-content: center; }

/* ---------- Loader (saw cuts a plank → slats open) ---------- */
.loader { position: fixed; inset: 0; z-index: 90; display: flex; pointer-events: none; }
.loader > i { flex: 1; background: var(--ground); box-shadow: inset 3px 0 0 var(--board); transform-origin: left center; }
.loader__inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.loader__stage { position: relative; width: 300px; height: 150px; }
.loader__plank { position: absolute; inset-inline: 0; bottom: 0; height: 34px; border-radius: 3px; background: repeating-linear-gradient(0deg, rgba(46, 29, 19, .10) 0 1px, transparent 1px 6px), linear-gradient(0deg, #9A6438, #B07745); }
.loader__kerf { position: absolute; right: 0; bottom: 31px; width: 100%; height: 3px; background: var(--ink); transform-origin: right center; }
.loader__run { position: absolute; left: 50%; bottom: 34px; width: 0; height: 0; }
.loader__blade { position: absolute; left: -62px; top: -62px; width: 124px; height: 124px; clip-path: inset(-8% -8% 50% -8%); }
.loader__blade .saw { width: 100%; height: 100%; overflow: visible; }
.loader__dust { position: absolute; left: -2px; top: -3px; width: 5px; height: 5px; border-radius: 50%; background: #C9A97E; opacity: 0; }
.loader__name { width: 220px; height: auto; }
.no-loader .loader { display: none; }

/* ==========================================================================
   Motion
   ========================================================================== */
@keyframes sawturn { to { transform: rotate(360deg); } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes shut-open { to { transform: scaleX(0); } }
@keyframes grainflow { from { background-position: 160% 0, 0 0; } to { background-position: -160% 0, -180px 0; } }

@media (prefers-reduced-motion: no-preference) {

	/* Logo saw: slow constant spin */
	.site-logo__spin { animation: sawturn 6s linear infinite; }

	/* Hero headline rises; grain flows */
	.hero__line > span { animation: rise 800ms var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms + var(--load-delay, 0ms)); }
	.hero__line:nth-child(2) > span { --d: 90; }
	.hero__line:nth-child(3) > span { --d: 180; }
	.hero .grain { animation: rise 800ms var(--ease) both, grainflow 9s linear 1.2s infinite; animation-delay: var(--load-delay, 0ms), calc(var(--load-delay, 0ms) + 900ms); }

	/* Loader timeline (~2.4s) */
	body:has(.loader) { --load-delay: 1900ms; }
	.no-loader body { --load-delay: 0ms; }
	.loader { animation: gone 1ms linear 2600ms both; }
	@keyframes gone { to { visibility: hidden; } }
	.loader > i { animation: shut-open 700ms var(--ease) both; animation-delay: calc(1450ms + var(--i) * 50ms); }
	.loader__inner { animation: loadout 260ms ease-out 1350ms both; }
	@keyframes loadout { to { opacity: 0; transform: scale(.98); } }
	.loader__kerf { animation: kerf 1100ms cubic-bezier(.65, 0, .35, 1) 150ms both; }
	@keyframes kerf { from { transform: scaleX(0); } }
	.loader__run { animation: run 1100ms cubic-bezier(.65, 0, .35, 1) 150ms both; }
	@keyframes run { from { transform: translateX(150px); } to { transform: translateX(-150px); } }
	.loader__blade .saw { animation: sawturn 380ms linear infinite reverse; }
	.loader__dust { animation: dust 520ms ease-out infinite; }
	@keyframes dust { 0% { transform: none; opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
	.loader__name { animation: namein 500ms var(--ease) 100ms both; }
	@keyframes namein { from { opacity: 0; transform: translateY(8px); } }

	/* Inner page heroes: slats open on load */
	.shutters--load .shutters__slats i { transform: none; animation: shut-open 700ms var(--ease) both; animation-delay: calc(200ms + var(--s) * 60ms); }

	/* Marquee */
	.marquee__rail { animation: marq 60s linear infinite; }
	@keyframes marq { to { transform: translateX(50%); } }
	@media (hover: hover) { .marquee:hover .marquee__rail { animation-play-state: paused; } }
}

/* ---------- Scroll-driven (Chrome/Edge, Safari 26+) ---------- */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		/* Logo saw also turns with the scroll */
		.site-logo__saw { animation: sawturn linear both; animation-timeline: scroll(root); animation-range: 0 900px; }

		/* Section titles rise out of a mask */
		.reveal-title { animation: titlerise linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
		@keyframes titlerise { from { clip-path: inset(0 0 100% 0); transform: translateY(.35em); } to { clip-path: inset(-.1em 0 -.2em 0); transform: none; } }

		/* Images wipe in */
		.reveal-img { animation: wipe linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
		@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

		/* Services – boards stack: each card settles in, the one beneath steps back */
		.services__list { view-timeline-name: --svc; }
		.panel { view-timeline-name: --card; }
		.panel:not(:last-child) .panel__card { animation: stackback linear both; animation-timeline: --svc; animation-range: exit-crossing calc(var(--i) / var(--n) * 100%) exit-crossing calc((var(--i) + 1) / var(--n) * 100%); }
		@keyframes stackback { to { transform: scale(.94); } }
		.panel:not(:last-child) .panel__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: 0; pointer-events: none; animation: stackdim linear both; animation-timeline: --svc; animation-range: exit-crossing calc(var(--i) / var(--n) * 100%) exit-crossing calc((var(--i) + 1) / var(--n) * 100%); }
		@keyframes stackdim { to { opacity: .2; } }
		.panel__media { animation: boardin linear both; animation-timeline: --card; animation-range: entry 0% entry 100%; }
		@keyframes boardin { from { clip-path: inset(9% 6% 9% 6% round 2px); } to { clip-path: inset(0 round 2px); } }
		.panel__img { animation: imgsettle linear both; animation-timeline: --card; animation-range: entry 0% entry 100%; }
		@keyframes imgsettle { from { transform: scale(1.14); } to { transform: none; } }
		.panel__text > * { animation: textup linear both; animation-timeline: --card; animation-range: entry calc(35% + var(--d, 0) * 10%) entry calc(85% + var(--d, 0) * 5%); }
		.panel__text > :nth-child(2) { --d: 1; }
		.panel__text > :nth-child(3) { --d: 2; }
		.panel__text > :nth-child(4) { --d: 3; }
		@keyframes textup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

		/* Hero – "the space opens" (desktop with enough height) */
		@media (min-width: 900px) and (min-height: 700px) {
			.hero {
				--edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
				--txt-w: min(40vw, 600px);
				--gap: clamp(40px, 4vw, 72px);
				--top: calc(var(--header-h) + 8px);
				height: 200vh;
				margin-block-start: calc(-1 * var(--header-h));
				view-timeline-name: --hero;
			}
			.hero__stage { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); display: block; padding: 0; max-width: none; overflow: hidden; }
			.hero__text { position: absolute; inset-inline-start: var(--edge); inset-block: var(--header-h) 0; width: var(--txt-w); padding-block-end: 4vh; z-index: 2; animation: herotext linear both; animation-timeline: --hero; animation-range: contain 0% contain 40%; }
			@keyframes herotext { to { opacity: 0; transform: translateY(-70px); } }
			.hero__media { position: absolute; inset: 0; height: auto; animation: heroopen linear both; animation-timeline: --hero; animation-range: contain 4% contain 70%; }
			@keyframes heroopen {
				from { inset-block: var(--top) 5vh; inset-inline-start: calc(var(--edge) + var(--txt-w) + var(--gap)); inset-inline-end: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 7vh) 100%, 0 100%); }
				to { inset-block: 0 0; inset-inline-start: 0; inset-inline-end: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
			}
			.hero__img { transform-origin: var(--focus, 64% 22%); animation: herozoom linear both; animation-timeline: --hero; animation-range: contain 0% contain 100%; }
			@keyframes herozoom { from { transform: scale(1.12); } to { transform: scale(1); } }
			.hero__dim { display: block; position: absolute; inset: 0; background: rgba(46, 29, 19, .38); animation: fadein linear both; animation-timeline: --hero; animation-range: contain 62% contain 85%; }
			.hero__caption { display: block; position: absolute; inset-inline: 16px; bottom: 12vh; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(48px, 7vw, 112px); line-height: 1; color: var(--cream); animation: capin linear both; animation-timeline: --hero; animation-range: contain 68% contain 92%; }
			@keyframes capin { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
		}

		/* Process – sticky rings story */
		.process { height: calc(var(--steps, 4) * 105vh); view-timeline-name: --proc; }
		.process__stage { position: sticky; top: 0; min-height: 100vh; align-content: center; }
		.process__steps { display: grid; }
		.process__step { grid-area: 1 / 1; animation: step linear both; animation-timeline: --proc; }
		.process__step.is-first { animation-name: step-first; }
		.process__step.is-last { animation-name: step-last; }
		.process__step.is-first.is-last { animation: none; }
		@keyframes step { 0% { opacity: 0; transform: translateY(36px); } 22%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-36px); } }
		@keyframes step-first { 0%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-36px); } }
		@keyframes step-last { 0% { opacity: 0; transform: translateY(36px); } 22%, 100% { opacity: 1; transform: none; } }
		.ring path { stroke-dasharray: 1 1; animation: ringdraw linear both; animation-timeline: --proc; animation-range: inherit; }
		@keyframes ringdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
		.process__turn { transform-origin: 0 0; animation: turn linear both; animation-timeline: --proc; animation-range: contain 0% contain 100%; }
		@keyframes turn { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }
		.process__img { animation: fadein linear both; animation-timeline: --proc; }
		.process__img:first-child { opacity: 1; animation: none; }
	}
}

/* ---------- Reduced motion: everything static, content complete ---------- */
@media (prefers-reduced-motion: reduce) {
	.loader { display: none; }
	*, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
	.process__stage { padding-block: calc(36px + var(--cut)); gap: 20px; }
	.process__title { font-size: 44px; margin-block-end: 16px; }
	.process__steps { gap: 28px; }
	.process__num { font-size: 30px; }
	.process__step-title { font-size: clamp(34px, 9.5vw, 44px); margin-block: 6px 8px; }
	.process__step-text { font-size: 17px; }
	.process__disc { width: min(80vw, 340px); }
	.marquee { padding-block: 18px; }
	.why__media { height: min(60svh, 460px); }
	.featured { padding-block: var(--space-m) var(--space-s); }
	.statement__text { font-size: clamp(40px, 10.5vw, 56px); }
	.contact { padding-block: var(--space-m); }
	.project__cover { height: min(56svh, 460px); }
	.page-hero__media { height: min(46svh, 380px); }
	.points__list { flex-direction: column; gap: 8px; }
	.points__item + .points__item::before { display: none; }
	.points__item::before { content: ""; inline-size: 3px; block-size: 18px; margin-inline-end: 12px; background: var(--wood); }
}