/* Home page, first half: 01 About (heading row, sticky stat cards, statement + photo), 02 Projects band and
   heading row, 03 Services (intro + horizontal accordion). Every rule is scoped to .sx-pg-home.
   Sizes measured on the Stux recording (v8916 f003-f040) at a 1280px-wide viewport. */

/* The About page's feature cards reuse the small "(01)" index. Zero specificity, so any About rule wins. */
:where(.sx-stat-i) { font-size: 12px; color: var(--sx-muted); }

/* ---------------------------------------------------------- 01 About: spacing and heading row
   192px of page from the hero to the label, the button about 36px under the heading's last baseline,
   185px of light page under the photo before the Projects band starts. */
.sx-pg-home .sx-about, .sx-pg-home.sx-about { padding-top: clamp(96px, 15vw, 220px); padding-bottom: clamp(96px, 14.5vw, 200px); }
.sx-pg-home .sx-about .sx-head-main, .sx-pg-home.sx-about .sx-head-main { gap: clamp(20px, 2.1vw, 30px); }

/* ---------------------------------------------------------- 01 About: stat cards
   Four full 1px boxes side by side (shared edges overlap). Number top left, two-line label and "(01)" at the bottom.
   Cards added or deleted in the editor: one row of 1 to 6 (--sx-st-n), or rows of four from 7 on. */
.sx-pg-home .sx-stats { --sx-st-n: 4; display: grid; grid-template-columns: repeat(var(--sx-st-n), minmax(0, 1fr)); }
.sx-pg-home .sx-stats:not(:has(> .sx-stat:nth-child(4))) { --sx-st-n: 3; }
.sx-pg-home .sx-stats:not(:has(> .sx-stat:nth-child(3))) { --sx-st-n: 2; }
.sx-pg-home .sx-stats:not(:has(> .sx-stat:nth-child(2))) { --sx-st-n: 1; }
.sx-pg-home .sx-stats:has(> .sx-stat:nth-child(5)) { --sx-st-n: 5; }
.sx-pg-home .sx-stats:has(> .sx-stat:nth-child(6)) { --sx-st-n: 6; }
.sx-pg-home .sx-stats:has(> .sx-stat:nth-child(7)) { --sx-st-n: 4; }
.sx-pg-home .sx-stat { display: flex; flex-direction: column; box-sizing: border-box; min-height: clamp(260px, 40vw, 640px); padding: 23px 25px 26px; border: 1px solid #dcdcdc; }
.sx-pg-home .sx-stat > * { margin: 0 !important; }
.sx-pg-home .sx-stat .sx-stat-n { font-size: clamp(28px, calc(20vw / var(--sx-st-n, 4)), 76px) !important; line-height: 1; font-weight: 400; font-stretch: 125%; letter-spacing: -.02em; color: #222; white-space: nowrap; }
.sx-pg-home .sx-stat .sx-stat-l { margin-top: auto !important; font-size: clamp(16px, 1.65vw, 22px); line-height: 1.25; font-weight: 400; font-stretch: 100%; letter-spacing: -.01em; color: #333; max-width: 10em; }
.sx-pg-home .sx-stat .sx-stat-i { margin-top: 23px !important; font-size: 11px; line-height: 1.4; font-stretch: 100%; color: #555; }
@media (min-width: 861px) {
	.sx-pg-home .sx-stat + .sx-stat { margin-left: -1px; }
}
/* Sticky staircase (wide screens, motion allowed): card 1 pins under the header, the next cards scroll up one after
   another (70vh of scroll apart) and lock beside it, then the row leaves together. The row is exactly as tall as
   the last card's offset plus a card, so all cards release at the moment the last one lines up. Pure CSS. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
	.sx-pg-home .sx-stats {
		--sx-st-h: min(40vw, calc(100vh - var(--sx-header-h) - 64px)); /* card height (512px at 1280) */
		--sx-st-step: 70vh;
		align-items: start; height: calc(var(--sx-st-h) + (var(--sx-st-n) - 1) * var(--sx-st-step));
	}
	.sx-pg-home .sx-stat { position: sticky; top: calc(var(--sx-header-h) + 44px); height: var(--sx-st-h); min-height: 0; }
	.sx-pg-home .sx-stat:nth-child(2) { margin-top: var(--sx-st-step); }
	.sx-pg-home .sx-stat:nth-child(3) { margin-top: calc(2 * var(--sx-st-step)); }
	.sx-pg-home .sx-stat:nth-child(4) { margin-top: calc(3 * var(--sx-st-step)); }
	.sx-pg-home .sx-stat:nth-child(5) { margin-top: calc(4 * var(--sx-st-step)); }
	.sx-pg-home .sx-stat:nth-child(6) { margin-top: calc(5 * var(--sx-st-step)); }
	body.admin-bar .sx-pg-home .sx-stat { top: calc(var(--sx-header-h) + 76px); }
	/* 7 cards or more: rows of four, no staircase */
	.sx-pg-home .sx-stats:has(> .sx-stat:nth-child(7)) { height: auto; }
	.sx-pg-home .sx-stats:has(> .sx-stat:nth-child(7)) > .sx-stat { position: static; margin-top: 0; }
}
@media (min-width: 861px) {
	.sx-pg-home .sx-stats:has(> .sx-stat:nth-child(7)) > .sx-stat:nth-child(4n+1) { margin-left: 0; }
	.sx-pg-home .sx-stats:has(> .sx-stat:nth-child(7)) > .sx-stat:nth-child(n+5) { margin-top: -1px; }
}
@media (max-width: 860px) {
	.sx-pg-home .sx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sx-pg-home .sx-stat { min-height: clamp(220px, 58vw, 360px); padding: 18px 16px 18px; }
	.sx-pg-home .sx-stat:nth-child(2n) { margin-left: -1px; }
	.sx-pg-home .sx-stat:nth-child(n+3) { margin-top: -1px; }
	.sx-pg-home .sx-stat .sx-stat-n { font-size: clamp(30px, 8.6vw, 52px) !important; }
	.sx-pg-home .sx-stat .sx-stat-l { font-size: 16px; }
}

/* ---------------------------------------------------------- 01 About: statement + photo
   The photo runs from the middle of the page to the right gutter (aspect 1.26). The statement sits at the
   bottom of the left half: 4 lines of semi-bold uppercase at the widest Archivo width (125%), about 425px wide. */
.sx-pg-home .sx-about-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; align-items: end; margin-top: clamp(96px, 14vw, 200px); }
.sx-pg-home .sx-about-text { padding-right: 24px; }
.sx-pg-home .sx-about-text > * { margin: 0 !important; }
.sx-pg-home .sx-about .sx-strong, .sx-pg-home.sx-about .sx-strong { font-size: clamp(16px, 1.6vw, 22px) !important; line-height: 1.3; font-weight: 600; font-stretch: 125%; letter-spacing: -.03em; text-transform: uppercase; color: #2b2b2b; max-width: 21.5em; }
.sx-pg-home .sx-about .sx-nowrap, .sx-pg-home.sx-about .sx-nowrap { white-space: nowrap; }
.sx-pg-home .sx-about .sx-strong:not(:last-child), .sx-pg-home.sx-about .sx-strong:not(:last-child) { margin-bottom: 68px !important; }
/* clients row (only when the owner has entered a client count) */
.sx-pg-home .sx-clients { display: flex; align-items: center; gap: 14px; font-size: 14px; line-height: 1.3; color: #777; }
.sx-pg-home .sx-clients strong { display: inline-block; margin-bottom: 2px; color: #2b2b2b; font-size: 18px; font-weight: 400; }
.sx-pg-home .sx-avatars { display: inline-flex; }
.sx-pg-home .sx-avatars span { box-sizing: border-box; width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; background: #d8d8d8; border: 2px solid #fff; font-size: 14px; font-weight: 700; color: var(--sx-ink); }
.sx-pg-home .sx-avatars span + span { margin-left: -6px; }
.sx-pg-home .sx-avatars span:nth-child(3) { background: var(--sx-yellow); }
.sx-pg-home .sx-about-img { margin: 0 !important; }
.sx-pg-home .sx-about-img img { display: block; width: 100%; height: auto; aspect-ratio: 1.26; object-fit: cover; border-radius: 0; }
@media (max-width: 760px) {
	.sx-pg-home .sx-about-row { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.sx-pg-home .sx-about-text { padding-right: 0; }
	/* 17px from 390 up; scales down a touch below that so the 125%-wide letters keep the 4-line shape at 360-375 */
	.sx-pg-home .sx-about .sx-strong, .sx-pg-home.sx-about .sx-strong { font-size: min(17px, calc(4.8vw - 1.7px)) !important; }
}

/* ---------------------------------------------------------- 02 Projects: darker full-bleed band
   About 4% darker than the page (the theme's "surface" colour). 211px from the band edge to the label,
   172px of band under the last card. Heading row: label on top, heading at the gutter, ALL PROJECTS at the right
   (the sx-head-wide variant from stux.css). The cards are the shared component in cards.css. */
.sx-pg-home .sx-projects, .sx-pg-home.sx-projects { background: var(--wp--preset--color--surface, #e4e4e4); padding-top: clamp(96px, 16.5vw, 240px); padding-bottom: clamp(80px, 13.5vw, 190px); }
.sx-pg-home .sx-projects .sx-head.sx-head-wide, .sx-pg-home.sx-projects .sx-head.sx-head-wide { row-gap: clamp(22px, 2.7vw, 40px); }

/* ---------------------------------------------------------- 03 Services: intro */
.sx-pg-home .sx-services, .sx-pg-home.sx-services { padding-top: clamp(96px, 15vw, 230px); }
.sx-pg-home .sx-services .sx-head, .sx-pg-home.sx-services .sx-head { margin-bottom: clamp(44px, 5.6vw, 84px) !important; }

/* ---------------------------------------------------------- 03 Services: horizontal accordion
   Four columns between five hairlines; the open one is 4x a closed one and the width change eases over .6s.
   Numbers (top) read bottom to top, titles (bottom) read top to bottom; both are centred in a closed column and
   move to the left of the open one. The open column's text and photo keep a fixed width (no reflow) and are
   clipped by the column while it grows; they show at once, and a closing column empties at once. */
.sx-pg-home .sx-accordion {
	--sx-acc-in: clamp(56px, 8.4vw, 130px);   /* open column: text and photo start this far from its left line */
	--sx-acc-out: clamp(24px, 3.9vw, 60px);   /* ... and the photo ends this far from its right line */
	--sx-acc-ease: cubic-bezier(.44, 0, .56, 1);
	container-type: inline-size;
	display: flex; height: clamp(520px, 51vw, 790px); border-right: 1px solid #dcdcdc;
	--sx-acc-n: 4; /* number of columns (the owner can add or delete them) */
}
.sx-pg-home .sx-accordion:not(:has(> .sx-acc:nth-child(4))) { --sx-acc-n: 3; }
.sx-pg-home .sx-accordion:not(:has(> .sx-acc:nth-child(3))) { --sx-acc-n: 2; }
.sx-pg-home .sx-accordion:not(:has(> .sx-acc:nth-child(2))) { --sx-acc-n: 1; }
.sx-pg-home .sx-accordion:has(> .sx-acc:nth-child(5)) { --sx-acc-n: 5; }
.sx-pg-home .sx-accordion:has(> .sx-acc:nth-child(6)) { --sx-acc-n: 6; }
.sx-pg-home .sx-accordion:has(> .sx-acc:nth-child(7)) { --sx-acc-n: 7; }
.sx-pg-home .sx-accordion:has(> .sx-acc:nth-child(8)) { --sx-acc-n: 8; }
.sx-pg-home .sx-acc { position: relative; flex: 1 1 0; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 16px; border-left: 1px solid #dcdcdc; overflow: hidden; cursor: pointer; transition: flex-grow .6s var(--sx-acc-ease); }
.sx-pg-home .sx-acc.is-open { flex-grow: 4; }
.sx-pg-home .sx-acc > * { margin: 0 !important; }
.sx-pg-home .sx-acc .sx-acc-n,
.sx-pg-home .sx-acc .sx-acc-t {
	position: absolute; left: 50%; translate: -50% 0; writing-mode: vertical-rl; white-space: nowrap;
	font-size: clamp(14px, 1.4vw, 21px) !important; line-height: 1 !important; font-weight: 400 !important; color: #2b2b2b;
	transition: left .6s var(--sx-acc-ease), translate .6s var(--sx-acc-ease);
}
.sx-pg-home .sx-acc .sx-acc-n { top: 0; rotate: 180deg; font-stretch: 100%; letter-spacing: 0; }
.sx-pg-home .sx-acc .sx-acc-t { bottom: 16px; font-stretch: 108%; letter-spacing: .01em; text-transform: uppercase; }
.sx-pg-home .sx-acc.is-open .sx-acc-n { left: clamp(36px, 4.2vw, 64px); translate: 0 0; }
.sx-pg-home .sx-acc.is-open .sx-acc-t { left: clamp(20px, 2.2vw, 34px); translate: 0 0; }
.sx-pg-home .sx-acc-btn { appearance: none; -webkit-appearance: none; display: block; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; writing-mode: inherit; text-align: inherit; cursor: pointer; }
.sx-pg-home .sx-acc-body {
	flex: none; box-sizing: border-box; margin: 0 0 0 var(--sx-acc-in) !important; visibility: hidden; opacity: 0;
	width: calc((100vw - 2 * var(--sx-pad)) * 4 / (var(--sx-acc-n) + 3) - var(--sx-acc-in) - var(--sx-acc-out));
	width: calc(100cqw * 4 / (var(--sx-acc-n) + 3) - var(--sx-acc-in) - var(--sx-acc-out));
}
.sx-pg-home .sx-acc.is-open .sx-acc-body { visibility: visible; opacity: 1; transition: opacity .2s linear; }
.sx-pg-home .sx-acc-body > * { margin: 0 !important; }
.sx-pg-home .sx-acc-body p { font-size: clamp(15px, 1.3vw, 19px); line-height: 1.35; font-weight: 400; font-stretch: 100%; letter-spacing: -.005em; color: #3a3a3a; max-width: 18em; margin-bottom: clamp(20px, 2.5vw, 38px) !important; }
.sx-pg-home .sx-acc-img img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9.2; object-fit: cover; border-radius: 0; }
@media (max-width: 760px) {
	.sx-pg-home .sx-accordion { display: block; height: auto; border-right: 0; border-bottom: 1px solid #dcdcdc; }
	.sx-pg-home .sx-acc { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 18px 0; border-left: 0; border-top: 1px solid #dcdcdc; overflow: visible; transition: none; }
	.sx-pg-home .sx-acc .sx-acc-n,
.sx-pg-home .sx-acc .sx-acc-t,
.sx-pg-home .sx-acc.is-open .sx-acc-n,
.sx-pg-home .sx-acc.is-open .sx-acc-t { position: static; left: auto; translate: none; rotate: none; writing-mode: horizontal-tb; transition: none; }
	.sx-pg-home .sx-acc .sx-acc-n { font-size: 13px !important; }
	.sx-pg-home .sx-acc .sx-acc-t { font-size: 18px !important; }
	.sx-pg-home .sx-acc-btn { width: 100%; text-align: left; }
	.sx-pg-home .sx-acc-body { grid-column: 1 / -1; width: auto; margin: 16px 0 0 !important; display: none; }
	.sx-pg-home .sx-acc.is-open .sx-acc-body { display: block; }
	.sx-pg-home .sx-acc-body p { font-size: 15px; max-width: 30em; }
}
@media (prefers-reduced-motion: reduce) {
	.sx-pg-home .sx-acc, .sx-pg-home .sx-acc .sx-acc-n, .sx-pg-home .sx-acc .sx-acc-t, .sx-pg-home .sx-acc-body { transition: none !important; }
}