/* Follows DESIGN.md · tokens in main.css */
/* Ekspert na godziny: the two home sections between the hero and "Jak liczę".
   1) .en-sos-band  (template-parts/home-paths*.php): one band, two surfaces. Loden "Coś cieknie?" bleeds left,
      paper-2 "Masz listę drobnych spraw?" bleeds right. Stacked on phones (loden block, then paper-2 block).
   2) .en-trades    (template-parts/home-services*.php): tool wall split by a brass axis, two task sheets.
   Motion (assets/js/home-intro.js): server markup is the FINAL state. Start states exist only under .is-armed,
   which JS adds when IntersectionObserver exists and motion is allowed. transform / opacity / stroke only. */

.en-sos-band, .en-trades { --fs-note: 1rem; }

/* =========================================================== band */
.en-sos-band { position: relative; isolation: isolate; overflow: clip; background: var(--paper-2); }
.en-sos-grid { display: grid; }
.en-sos, .en-todo { position: relative; min-width: 0; padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem); }
.en-sos { background: var(--loden); }
.en-sos::before { content: ""; position: absolute; z-index: -1; inset: 0 -100vw; background: var(--loden); }
.en-sos-h, .en-todo-h { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem); margin-bottom: var(--s-3); }

/* ---------- SOS copy ---------- */
.en-sos-head { min-width: 0; }
.en-surface-loden .en-sos-sub { font-size: clamp(1.1rem, 1rem + .3vw, 1.25rem); color: var(--loden-ink-2); margin: 0; }
.en-sos-steps { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-1); min-width: 0; }
.en-sos-step {
	display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--s-3); align-items: start;
	margin-inline: -.75rem; padding: .6rem .75rem; border-radius: var(--r-2);
	color: var(--loden-ink-2); line-height: 1.5;
	transition: background-color .45s var(--ease);
}
.en-sos-step b { color: var(--loden-ink); }
.en-sos-n {
	display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-top: -.15rem; border-radius: 50%;
	background: var(--brass); color: var(--brass-ink);
	font-family: var(--font-display); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
	transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease);
}
.en-sos.is-armed .en-sos-step:not(.is-on, .is-done) .en-sos-n { background: transparent; color: var(--loden-ink); box-shadow: inset 0 0 0 2px var(--loden-ink-2); }
.en-sos-step.is-on { background: var(--loden-deep); }
.en-sos-step.is-on .en-sos-n { animation: en-sos-pop .55s var(--ease-out-expo); }
@keyframes en-sos-pop { from { transform: scale(.7); } }
.en-sos-act { display: grid; justify-items: start; gap: var(--s-4); margin-top: var(--s-6); min-width: 0; }

/* ---------- SOS drawing ---------- */
.en-sos-art { margin: var(--s-6) 0 var(--s-2); min-width: 0; }
.en-sos-svg { display: block; width: 100%; max-width: 40rem; height: auto; overflow: visible; }
/* line work keeps its 2px weight at any drawing size (pipes scale on purpose) */
.en-sos-svg :is(.k-fill, .k-deep, .k-line, .k-thin, .k-cap, .en-sos-room, .en-sos-hatch, .en-sos-off, .en-sos-ring, .en-sos-bolt, .en-sos-wave, .en-sos-rays, .en-sos-caught) { vector-effect: non-scaling-stroke; }
.en-sos-svg .k-fill { fill: var(--loden); stroke: var(--loden-ink-2); stroke-width: 2; }
.en-sos-svg .k-deep { fill: var(--loden-deep); stroke: var(--loden-ink-2); stroke-width: 2; stroke-linejoin: round; }
.en-sos-svg .k-line { fill: none; stroke: var(--loden-ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.en-sos-svg .k-thin { stroke: var(--loden-ink-2); stroke-width: 1.5; }
.en-sos-svg .k-none { fill: none; }
.en-sos-svg .k-brass { fill: var(--brass); }
.en-sos-svg .k-cap { fill: var(--loden-deep); stroke: var(--brass-ink); stroke-width: 2; }
.en-sos-svg .k-tog, .en-sos-svg .k-towel { fill: var(--loden-ink-2); }
.en-sos-svg .k-stripe { fill: none; stroke: var(--loden); stroke-width: 2.5; }
.en-sos-room { fill: none; stroke: var(--loden-line); stroke-width: 2; }
.en-sos-hatch { fill: none; stroke: var(--loden-line); stroke-width: 1.5; stroke-linecap: round; }
.en-sos-pipe-o { fill: none; stroke: var(--loden-ink-2); stroke-width: 16; stroke-linejoin: round; }
.en-sos-pipe-i { fill: none; stroke: var(--loden); stroke-width: 12; stroke-linejoin: round; }
.en-sos-flow { fill: none; stroke: var(--brass); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 9 13; opacity: 0; transition: opacity .5s var(--ease) .35s; }
.en-sos-drop, .en-sos-shot, .en-sos-led { fill: var(--brass); }
.en-sos-bolt, .en-sos-wave, .en-sos-rays, .en-sos-caught { fill: none; stroke: var(--brass); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.en-sos-burst { fill: var(--paper); opacity: 0; }
.en-sos-led { opacity: .22; }
.en-sos-puddle { fill: var(--brass); opacity: 0; }
.en-sos-drips { opacity: 0; }
.en-sos-off { fill: var(--loden-deep); stroke: var(--loden-ink-2); stroke-width: 2; }
.en-sos-off + .en-sos-bn { fill: var(--loden-ink); }
.en-sos-on circle { fill: var(--brass); }
.en-sos-on .en-sos-bn { fill: var(--brass-ink); }
.en-sos-bn { font-family: var(--font-display); font-size: 14px; font-weight: 800; }
.en-sos-ring { fill: none; stroke: var(--brass); stroke-width: 2; opacity: 0; }

/* final state (server output): valve across the pipe, breaker down, towel + bowl in, photo taken */
.en-sos-lever { transform-box: view-box; transform-origin: 170px 80px; transform: rotate(-90deg); transition: transform .9s var(--ease-out-expo); }
.en-sos-brk { transform: translateY(17px); transition: transform .45s var(--ease-out-expo); }
.en-sos-led { transition: opacity .3s var(--ease) .15s; }
.en-sos-towel { transform-box: fill-box; transform-origin: 0 100%; transition: transform .8s var(--ease-out-expo), opacity .25s var(--ease); }
.en-sos-bowl { transition: transform .8s var(--ease-out-expo) .3s, opacity .4s var(--ease) .3s; }
.en-sos-puddle { transform-box: fill-box; transform-origin: 40% 50%; transition: opacity .6s var(--ease) .4s, transform .9s var(--ease-out-expo) .3s; }
.en-sos-phone-in { transition: transform .7s var(--ease-out-expo), opacity .4s var(--ease); }
.en-sos-shot { transition: opacity .3s var(--ease) .75s; }
.en-sos-rays { transition: opacity .3s var(--ease) .45s; }
.en-sos-wave { transition: opacity .45s var(--ease) 1.1s; }
.en-sos-on, .en-sos-ring { transform-box: fill-box; transform-origin: 50% 50%; }
.en-sos-on { transition: opacity .3s var(--ease), transform .55s var(--ease-out-expo); }
.en-sos-drop { transform-box: fill-box; transform-origin: 50% 0; }

/* start state (JS, motion allowed): water running, everything else waits for its step */
/* order (2026-10-21, safety first): step 1 = breaker off, step 2 = valve closed (the water stops), 3 = bowl + towel, 4 = phone */
.en-sos.is-armed:not(.s2) .en-sos-flow { opacity: .95; animation: en-sos-flow 1.6s linear 3; /* capped: stops by itself, and at step 2 at the latest */ }
.en-sos.is-armed:not(.s2) .en-sos-drips { opacity: 1; }
.en-sos.is-armed:not(.s2) .en-sos-drop { animation: en-sos-drip 1.5s var(--ease-drip) 3; }
.en-sos.is-armed:not(.s2) .en-sos-drop--b { animation-delay: -.75s; }
.en-sos.is-armed:not(.s2) .en-sos-lever { transform: none; }
.en-sos.is-armed .en-sos-drips { transition: opacity .45s var(--ease) .55s; }
.en-sos.is-armed:not(.s1) .en-sos-brk { transform: none; }
.en-sos.is-armed:not(.s1) .en-sos-led { opacity: 1; }
.en-sos.is-armed:not(.s3) .en-sos-puddle { opacity: .5; transform: none; }
.en-sos.is-armed .en-sos-puddle { transform: scale(.25, .6); }
.en-sos.is-armed:not(.s3) .en-sos-towel { transform: scaleX(0); opacity: 0; }
.en-sos.is-armed:not(.s3) .en-sos-bowl { transform: translateX(46px); opacity: 0; }
.en-sos.is-armed:not(.s4) .en-sos-phone-in { transform: translateY(22px); opacity: 0; }
.en-sos.is-armed:not(.s4) :is(.en-sos-shot, .en-sos-rays, .en-sos-wave) { opacity: 0; }
/* off screen (home-intro.js toggles .is-off): the start-state loops hold still */
.en-sos.is-armed.is-off:not(.s2) :is(.en-sos-flow, .en-sos-drop) { animation-play-state: paused; }
.en-sos.is-armed.s4 .en-sos-burst { animation: en-sos-flash .8s var(--ease) .4s both; }
.en-sos.is-armed:not(.s1) .en-sos-badge--1 .en-sos-on,
.en-sos.is-armed:not(.s2) .en-sos-badge--2 .en-sos-on,
.en-sos.is-armed:not(.s3) .en-sos-badge--3 .en-sos-on,
.en-sos.is-armed:not(.s4) .en-sos-badge--4 .en-sos-on { opacity: 0; transform: scale(.55); }
.en-sos.is-armed.s1 .en-sos-badge--1 .en-sos-ring,
.en-sos.is-armed.s2 .en-sos-badge--2 .en-sos-ring,
.en-sos.is-armed.s3 .en-sos-badge--3 .en-sos-ring,
.en-sos.is-armed.s4 .en-sos-badge--4 .en-sos-ring { animation: en-sos-ring 1.1s var(--ease) .1s both; }
@keyframes en-sos-flow { to { stroke-dashoffset: -44; } }
@keyframes en-sos-drip {
	0% { transform: translateY(0) scale(.35); opacity: 0; }
	30% { transform: translateY(0) scale(1); opacity: 1; }
	88% { transform: translateY(82px) scale(1); opacity: 1; }
	100% { transform: translateY(86px) scale(1.25, .4); opacity: 0; }
}
@keyframes en-sos-flash { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes en-sos-ring { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(1.6); } }
.en-sos-burst { transform-box: fill-box; transform-origin: 50% 50%; }

/* ---------- To-do note ---------- */
.en-todo-sub { font-size: clamp(1.1rem, 1rem + .3vw, 1.25rem); color: var(--ink-2); }
.en-todo-note {
	--sq: 1.25rem;
	position: relative; max-width: 29rem; margin: var(--s-6) 0 var(--s-6);
	padding: 2.1rem clamp(1rem, .7rem + 1vw, 1.5rem) 1.25rem 3.5rem;
	background-color: var(--paper);
	background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: var(--sq) var(--sq);
	background-position: -1px -1px;
	border-radius: 2px;
	transform: rotate(-1.1deg);
	box-shadow: 0 1px 1px var(--shadow-ink-08), 0 22px 30px -22px var(--shadow-ink-45);
}
/* margin rule of a squared notebook page (brass, not red: red is reserved for form errors) */
.en-todo-note::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2.75rem; width: 2px; background: var(--margin-rule); }
.en-todo-tape {
	position: absolute; top: -.8rem; width: 5.5rem; height: 1.6rem;
	background: var(--tape);
	box-shadow: 0 1px 2px var(--shadow-ink-12);
	clip-path: polygon(3% 8%, 97% 0, 100% 30%, 98% 70%, 100% 100%, 2% 94%, 0 60%, 2% 30%);
}
.en-todo-tape--l { left: 1rem; transform: rotate(-7deg); }
.en-todo-tape--r { right: 1.25rem; transform: rotate(5deg); }
.en-todo-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--ink); margin: 0 0 var(--s-3); }
.en-todo-list { list-style: none; margin: 0; padding: 0; }
.en-todo-item { position: relative; display: flex; align-items: baseline; gap: var(--s-3); padding-block: .5rem; color: var(--ink); line-height: 1.4; }
.en-todo-label { flex: 1; min-width: 0; }
.en-todo-time { position: relative; font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--fs-note); font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.en-todo-tick {
	position: absolute; left: -3rem; top: .3rem; width: 28px; height: 24px; overflow: visible;
	fill: none; stroke: var(--loden); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.en-todo-tick path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--ease-out-expo); }
.en-todo.is-armed .en-todo-item:not(.is-ticked) .en-todo-tick path { stroke-dashoffset: 1; }
.en-todo-time::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -.2rem; height: 3px; border-radius: 2px; background: var(--brass);
	transform-origin: 0 50%; transition: transform .5s var(--ease-out-expo);
}
.en-todo.is-armed .en-todo-item:not(.is-ticked) .en-todo-time::after { transform: scaleX(0); }
.en-todo-total { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 2px solid var(--ink); display: grid; gap: var(--s-2); }
.en-todo-row { position: relative; display: flex; align-items: center; gap: var(--s-3); margin: 0; color: var(--ink); font-weight: 700; max-width: none; }
.en-todo-row > span { flex: 1; min-width: 0; }
.en-todo-v { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
/* the running total changes length while it counts ("0 min" .. "2 h 40 min"): reserve the width, grow to the left */
.en-todo-row:not(.en-todo-row--bill) .en-todo-v { min-width: 8.5ch; text-align: right; }
.en-todo-row--bill > span { color: var(--ink-2); font-weight: 600; font-size: var(--fs-note); }
.en-todo-row--bill .en-todo-v { background: var(--brass); color: var(--brass-ink); padding: .1em .5em; border-radius: var(--r-1); transition: opacity .4s var(--ease), transform .55s var(--ease-out-expo); }
.en-todo.is-armed:not(.is-billed) .en-todo-row--bill .en-todo-v { opacity: 0; transform: translateY(6px); }
/* the clock sits in the margin column, under the ticks */
.en-todo-clock { position: absolute; left: -3.4rem; top: 50%; width: 40px; height: 40px; margin-top: -20px; overflow: visible; }
.en-todo-dial { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.en-todo-fill { fill: none; stroke: var(--brass); stroke-width: 18; stroke-dasharray: 100; stroke-dashoffset: var(--en-fill, 100); transition: stroke-dashoffset .8s var(--ease-out-expo); }
.en-todo-ticks { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.en-todo-hh, .en-todo-mh { fill: none; stroke: var(--ink); stroke-linecap: round; transform-box: view-box; transform-origin: 22px 22px; transition: transform .8s var(--ease-out-expo); }
.en-todo-hh { stroke-width: 3; transform: rotate(var(--en-hh, 0deg)); }
.en-todo-mh { stroke-width: 2; transform: rotate(var(--en-mh, 0deg)); }
.en-todo-pin { fill: var(--ink); }
.en-todo-go { min-width: 0; }

/* ---------- band layout ---------- */
@media (min-width: 941px) {
	.en-sos-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.en-sos { padding-right: clamp(2.5rem, 1rem + 3.5vw, 4.5rem); }
	.en-sos::before { inset: 0 0 0 -100vw; }
	/* the list half is shorter: it sits on the band's optical centre instead of hanging from the top */
	.en-todo { padding-left: clamp(2.5rem, 1rem + 3.5vw, 4.5rem); align-self: center; }
}
@media (max-width: 599px) {
	.en-sos-art { margin-inline: calc(-.5 * var(--gutter)); }
	.en-sos-act .en-call { width: 100%; justify-content: center; }
}

/* =========================================================== trades */
.en-trades-head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
.en-trades-head h2 { margin: 0; }
/* phones + tablets: hydraulika panel, its sheet, the axis lying flat, elektryka sheet, its panel (point-symmetric, as on desktop) */
.en-trades-wall { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); grid-template-areas: "hp" "hs" "ax" "es" "ep"; }
.en-trades-panel { min-width: 0; width: 100%; max-width: 30rem; }
.en-trades-panel--e { justify-self: end; }
.en-trades-panel--h { grid-area: hp; }
.en-trades-panel--e { grid-area: ep; }
.en-trades-sheet--h { grid-area: hs; }
.en-trades-sheet--e { grid-area: es; }
.en-trades-axis { grid-area: ax; display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-2); }
.en-trades-rule { flex: 1 1 0; min-width: .75rem; height: 2px; background: var(--brass-deep); border-radius: 1px; transform-origin: 100% 50%; transition: transform 1.1s var(--ease-out-expo); }
.en-trades-rule:last-child { transform-origin: 0 50%; }
.en-trades-mark {
	flex: none; display: grid; place-items: center;
	width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--loden);
	box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--brass-deep);
}
.en-trades-mark svg { width: 70%; height: 70%; fill: none; stroke: var(--brass); stroke-width: 2.6; stroke-linecap: round; }
.en-trades-hand { transform-box: view-box; transform-origin: 20px 20px; transition: transform 1.4s var(--ease-out-expo) .2s; }

.en-trades-svg { display: block; width: 100%; height: auto; overflow: visible; --acc: var(--loden); --sil: var(--sil-loden); }
.en-trades-panel--e .en-trades-svg { --acc: var(--brass); --sil: var(--sil-brass); }
.en-trades-board { fill: var(--paper-3); stroke: var(--line); }
.en-trades-svg pattern circle { fill: var(--peg); }
.en-trades-screw { fill: none; stroke: var(--brass-deep); stroke-width: 7; stroke-linecap: round; }
.en-trades-peg { fill: none; stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.en-trades-t :is(.b, .h, .o) { stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.en-trades-t .b { fill: var(--paper); }
.en-trades-t .h { fill: var(--acc); }
.en-trades-t .o { fill: var(--paper-3); }
.en-trades-t .l { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.en-trades-t .p { fill: none; stroke: var(--ink); stroke-width: 16; stroke-linecap: butt; }
.en-trades-t .pi { fill: none; stroke: var(--paper); stroke-width: 12; }
.en-trades-t .pi--braid { stroke-dasharray: 5 2.5; }
.en-trades-sil * { fill: var(--sil); stroke: var(--sil); stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.en-trades-sil :is(.p, .pi) { fill: none; stroke-width: 25; stroke-dasharray: none; }
.en-trades-tag rect { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.5; }
.en-trades-tag text { font-family: var(--font-display); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; fill: var(--ink); }
.en-trades-t { transform-box: fill-box; transform-origin: 50% 0; transition: transform var(--dur-state) var(--ease-out-expo), opacity var(--dur-state) var(--ease); }
/* tags keep their SVG transform attribute: only opacity is animated on them */
.en-trades-tag { transition: opacity .3s var(--ease); }

/* hover a task (or a trade link): its tool lifts off the peg, the others step back */
.en-trades-tool.is-hot .en-trades-t { transform: translateY(-7px); }
.en-trades-tool.is-hot .en-trades-tag rect { fill: var(--brass); stroke: var(--brass-ink); }
.en-trades-tool.is-hot .en-trades-tag text { fill: var(--brass-ink); }
.en-trades-wall.is-dim .en-trades-tool:not(.is-hot) .en-trades-t { opacity: .3; }

.en-trades-sheet {
	position: relative; min-width: 0; display: flex; flex-direction: column;
	background-color: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-2);
	padding: var(--s-5) clamp(1.1rem, .8rem + 1vw, 1.8rem) var(--s-2);
}
.en-trades-top { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); }
.en-trades-top h3 { margin: 0; font-size: clamp(1.4rem, 1.2rem + .9vw, 1.9rem); }
.en-trades-badge { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; flex: none; background: var(--loden); color: var(--loden-ink); }
.en-trades-sheet--e .en-trades-badge { background: var(--brass); color: var(--brass-ink); }
.en-trades-list { margin-top: var(--s-2); }
.en-trades-list > li { margin-inline: -.5rem; padding-inline: .5rem; border-radius: var(--r-1); transition: background-color var(--dur-state) var(--ease); }
.en-trades-list > li.is-hot { background-color: var(--paper); }
.en-trades-time { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: var(--fs-note); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
/* Quote jobs: two words instead of a time; may break onto two short lines, right-aligned like the times. */
.en-trades-time--q { white-space: normal; text-align: right; max-width: 7.5rem; line-height: 1.3; }
.en-trades-more { margin: auto 0 0; padding-top: var(--s-2); font-family: var(--font-display); font-weight: 700; }
.en-trades-more a { display: inline-flex; align-items: center; gap: .45em; min-height: 48px; }
.en-trades-more .en-ico { transition: transform var(--dur-open) var(--ease); }
@media (hover: hover) and (pointer: fine) { .en-trades-more a:hover .en-ico { transform: translateX(3px); } }

@media (max-width: 759px) {
	.en-trades { --section: 3.25rem; }
	.en-trades-head { margin-bottom: var(--s-6); }
	.en-trades-tag { display: none; }
}
/* 320-359px: tighter axis spacing (rule · mark · rule). */
@media (max-width: 359px) {
	.en-trades-axis { gap: var(--s-2); }
	.en-trades-rule { min-width: .5rem; }
}
@media (min-width: 941px) {
	.en-trades-head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: var(--s-7); margin-bottom: var(--s-8); }
	.en-trades-wall {
		grid-template-columns: minmax(0, 1fr) 10.5rem minmax(0, 1fr); column-gap: var(--s-5); row-gap: var(--s-5);
		grid-template-areas: "hp ax es" "hs ax es" "hs ax ep";
	}
	.en-trades-panel--h { align-self: start; }
	.en-trades-panel--e { align-self: end; }
	.en-trades-panel { max-width: none; }
	.en-trades-axis { flex-direction: column; gap: var(--s-4); padding-block: 0; }
	.en-trades-rule { width: 2px; min-width: 0; height: auto; min-height: 2rem; transform-origin: 50% 100%; }
	.en-trades-rule:last-child { transform-origin: 50% 0; }
	.en-trades-mark { width: 4.5rem; height: 4.5rem; box-shadow: 0 0 0 6px var(--paper), 0 0 0 7.5px var(--brass-deep); }
}

/* entrance (JS + motion only): the painted outlines are there first, then each tool drops onto its peg */
.en-trades-wall.is-armed:not(.is-settled) .en-trades-t { transition: transform .45s var(--ease-out-expo), opacity .3s var(--ease); transition-delay: calc(var(--i, 0) * 85ms + 120ms); }
.en-trades-wall.is-armed:not(.is-in) .en-trades-t { opacity: 0; transform: translateY(-14px); }
.en-trades-wall.is-armed:not(.is-in) .en-trades-tag { opacity: 0; }
.en-trades-wall.is-armed:not(.is-settled) .en-trades-tag { transition-delay: .9s; }
.en-trades-wall.is-armed:not(.is-in) .en-trades-rule { transform: scaleX(0); }
@media (min-width: 941px) { .en-trades-wall.is-armed:not(.is-in) .en-trades-rule { transform: scaleY(0); } }
.en-trades-wall.is-armed:not(.is-in) .en-trades-hand { transform: rotate(-150deg); }
.en-trades-wall.is-armed .en-trades-sheet { transition: opacity .6s var(--ease), transform .7s var(--ease-out-expo); }
.en-trades-wall.is-armed .en-trades-sheet--e { transition-delay: .18s; }
.en-trades-wall.is-armed:not(.is-in) .en-trades-sheet { opacity: 0; transform: translateY(16px); }