/* Home page, second half (Stux v8916 f061-f091): pinned quote with photos passing behind it, sticky process cards,
   testimonials and the client logos strip. Sizes measured on Stux at a 1280px-wide viewport.
   Every rule is scoped to .sx-pg-home or to a class only these sections use. */

/* ---------------------------------------------------------- quote (f061-f069)
   The section is 520vh tall. Its quote sits in a 100vh sticky stage, so it stays in the middle of the screen
   while six photos (absolutely placed, scrolling at page speed) pass behind it, one every 63vh, alternating
   right and left. The last one has left under the header when the quote starts scrolling again. */
.sx-pg-home .sx-quote-sec, .sx-pg-home.sx-quote-sec { position: relative; height: 520vh; padding: 0 !important; }
.sx-pg-home .sx-floats { position: absolute; inset: 0; z-index: 0; overflow: clip; pointer-events: none; }
.sx-pg-home .sx-float { position: absolute !important; margin: 0 !important; }
.sx-pg-home .sx-float img { display: block; width: 100%; height: auto !important; aspect-ratio: 1.4; object-fit: cover; border-radius: 0; }
.sx-pg-home .sx-f1 { top: 100vh; right: 3vw; width: 26vw; }
.sx-pg-home .sx-f2 { top: 163vh; left: 1.5vw; width: 28vw; }
.sx-pg-home .sx-f3 { top: 226vh; right: 13vw; width: 13vw; }
.sx-pg-home .sx-f4 { top: 289vh; left: 11.5vw; width: 17vw; }
.sx-pg-home .sx-f4 img { aspect-ratio: 1.33; }
.sx-pg-home .sx-f5 { top: 352vh; right: 2.8vw; width: 26vw; }
.sx-pg-home .sx-f6 { top: 415vh; left: 2vw; width: 27.5vw; }
.sx-pg-home .sx-quote-stick { position: sticky; top: 0; z-index: 1; height: 100vh; height: 100svh; box-sizing: border-box; display: grid; place-items: center; padding: 28px var(--sx-pad) 0; pointer-events: none; }
.sx-pg-home .sx-quote-mid { text-align: center; pointer-events: auto; }
/* charcoal 58px circle with a solid "66" mark, 24px above the first cap line */
.sx-pg-home .sx-qmark { width: 58px; height: 58px; border-radius: 50%; background: #262626; color: #fff; display: grid; place-items: center; margin: 0 auto 13px !important; padding: 0; line-height: 0; }
.sx-pg-home .sx-qmark svg { width: 24px; height: 19px; display: block; }
/* 3 lines, Archivo 800 at normal width: "WHERE PRECISION ENGINEERING MEETS" measures 717px at 1280, as in Stux */
.sx-pg-home .sx-quote { font-size: clamp(22px, 2.69vw, 46px) !important; font-weight: 800; font-stretch: 100%; letter-spacing: -.02em; line-height: 1.2; text-transform: uppercase; color: #262626; max-width: 20.8em; margin: 0 auto !important; }
.sx-pg-home .sx-quote-by { font-size: clamp(15px, 1.33vw, 20px) !important; font-weight: 400; font-stretch: 100%; line-height: 1.3; color: #555; margin: 22px 0 0 !important; }
@media (max-width: 760px) {
	.sx-pg-home .sx-quote-sec, .sx-pg-home.sx-quote-sec { height: auto; padding: var(--sx-gap) var(--sx-pad) !important; }
	.sx-pg-home .sx-floats { display: none; }
	.sx-pg-home .sx-quote-stick { position: static; height: auto; padding: 0; }
	.sx-pg-home .sx-quote { font-size: clamp(20px, 6.2vw, 26px) !important; max-width: none; }
	.sx-pg-home .sx-qmark { width: 50px; height: 50px; }
}

/* ---------------------------------------------------------- process (f070-f082)
   A slightly darker band whose cards reach closer to the window edge than other sections. Each black card
   sticks 4.5vh under the header and ends 4vh above the bottom of the window; the next one slides up over it. After the third lands, the stack leaves together. */
.sx-pg-home .sx-process, .sx-pg-home.sx-process { background: var(--wp--preset--color--surface, #e4e4e4); padding-left: max(10px, calc(var(--sx-pad) - 1.1vw)); padding-right: max(10px, calc(var(--sx-pad) - 1.1vw)); padding-bottom: clamp(120px, 16vw, 240px); }
.sx-pg-home .sx-steps { display: block; }
.sx-pg-home .sx-step { position: sticky; top: calc(var(--sx-header-h) + 4.5vh); display: grid; grid-template-columns: minmax(0, 46.4fr) minmax(0, 53.6fr); height: min(820px, calc(100vh - var(--sx-header-h) - 8.5vh)); min-height: 260px; box-sizing: border-box; background: #000; color: #fff; margin: 0 0 9px !important; }
.sx-pg-home .sx-step:last-child { margin-bottom: 0 !important; }
/* logged in: the fixed header sits 32px lower under the admin bar */
@media (min-width: 783px) { body.admin-bar .sx-pg-home .sx-step { top: calc(var(--sx-header-h) + 32px + 4.5vh); height: min(820px, calc(100vh - var(--sx-header-h) - 32px - 8.5vh)); } }
.sx-pg-home .sx-step-panel { display: flex; flex-direction: column; min-width: 0; padding: 13px 14px 10px; }
.sx-pg-home .sx-step-panel > * { margin: 0 !important; }
/* "/01": yellow, medium weight, extended and tight, cap top about 20px under the card top */
.sx-pg-home .sx-step-n { font-size: clamp(36px, 4vw, 60px) !important; font-weight: 500; font-stretch: 125%; letter-spacing: -.035em; line-height: 1; color: var(--sx-yellow); margin-left: -1px !important; }
.sx-pg-home .sx-step-panel > .sx-step-copy { margin-top: auto !important; }
.sx-pg-home .sx-step-text { font-size: clamp(16px, 1.64vw, 23px) !important; font-weight: 600; font-stretch: 100%; letter-spacing: -.02em; line-height: 1.22; max-width: 13.6em; color: #fff; }
/* step name pinned to the card bottom, ~69px baseline to baseline under the description */
.sx-pg-home .sx-step-name { margin-top: 52px !important; font-size: 10px !important; font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.2; text-transform: uppercase; color: rgba(255, 255, 255, .8); }
/* photo with a 10px black frame on top, right and bottom; flush with the text panel on the left */
.sx-pg-home .sx-step-img { position: relative; min-width: 0; margin: 10px 10px 10px 0 !important; overflow: hidden; }
.sx-pg-home .sx-step-img img { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; border-radius: 0; }
@media (max-width: 760px) {
	.sx-pg-home .sx-step { top: calc(var(--sx-header-h) + 12px); grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
	.sx-pg-home .sx-step-panel { min-height: 214px; padding: 12px 12px 10px; }
	.sx-pg-home .sx-step-name { margin-top: 32px !important; }
	.sx-pg-home .sx-step-img { margin: 0 10px 10px !important; aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------- testimonials (f083-f088)
   Rows between #dcdcdc hairlines: square photo (0-29.7%), name on the heading column, quote from 48.6%,
   index "(01)" under the quote at the photo's bottom, yellow "66" square flush right. */
.sx-pg-home .sx-testimonials .sx-head, .sx-pg-home.sx-testimonials .sx-head { margin-bottom: clamp(36px, 4.1vw, 60px) !important; }
.sx-pg-home .sx-tlist { display: grid; border-bottom: 1px solid #dcdcdc; }
.sx-pg-home .sx-t { display: grid; grid-template-columns: 29.7% calc(3.633% - var(--sx-pad) / 3) calc(15.267% + var(--sx-pad) / 3) minmax(0, 29.5%) minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); align-items: start; padding: 44px 0 40px; border-top: 1px solid #dcdcdc; }
.sx-pg-home .sx-t > * { margin: 0 !important; }
.sx-pg-home .sx-t-photo { grid-column: 1; grid-row: 1 / 3; aspect-ratio: 1; overflow: hidden; background: var(--wp--preset--color--surface, #e4e4e4); }
.sx-pg-home .sx-t-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.sx-pg-home .sx-t-initial { display: grid; place-items: center; font-size: clamp(56px, 8vw, 128px); font-weight: 500; font-stretch: 110%; line-height: 1; color: #b5b5b5; }
.sx-pg-home .sx-t-who { grid-column: 3; grid-row: 1; padding-right: 16px; }
.sx-pg-home .sx-t-name { font-size: clamp(15px, 1.33vw, 18px) !important; font-weight: 400; line-height: 1.25; color: #2b2b2b; }
.sx-pg-home .sx-t-place { font-size: 11.5px !important; line-height: 1.3; color: #8d8d8d; margin-top: 3px !important; }
.sx-pg-home .sx-t-quote { grid-column: 4; grid-row: 1; font-size: clamp(17px, 1.72vw, 24px) !important; font-weight: 400; font-stretch: 106%; letter-spacing: -.01em; line-height: 1.25; color: #2b2b2b; }
.sx-pg-home .sx-t-i { grid-column: 4; grid-row: 2; align-self: end; font-size: 11.5px !important; line-height: 1; color: #222; }
.sx-pg-home .sx-t-mark { grid-column: 6; grid-row: 1; width: 46px; height: 46px; display: grid; place-items: center; background: var(--sx-yellow); color: #111; line-height: 0; }
.sx-pg-home .sx-t-mark svg { width: 20px; height: 16px; display: block; }
@media (max-width: 760px) {
	.sx-pg-home .sx-t { grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 16px; padding: 28px 0 24px; }
	.sx-pg-home .sx-t-photo { grid-column: 1; grid-row: 1; }
	.sx-pg-home .sx-t-initial { font-size: 40px; }
	.sx-pg-home .sx-t-who { grid-column: 2; grid-row: 1; align-self: center; padding-right: 0; }
	.sx-pg-home .sx-t-mark { grid-column: 3; grid-row: 1; width: 38px; height: 38px; }
	.sx-pg-home .sx-t-quote { grid-column: 1 / -1; grid-row: 2; margin-top: 20px !important; }
	.sx-pg-home .sx-t-i { grid-column: 1 / -1; grid-row: 3; margin-top: 16px !important; }
}

/* ---------------------------------------------------------- client logos (f089-f090)
   Centred "150+ ASSOCIATED CLIENTS" line (only when the owner set the number), then 2:1 grey tiles, four
   per row with 10px gaps; a short last row is centred. Logos are shown in grey, as in Stux. */
.sx-pg-home .sx-logos-sec, .sx-pg-home.sx-logos-sec { padding-top: clamp(96px, 12vw, 160px); }
.sx-pg-home .sx-logos-only, .sx-pg-home.sx-logos-only { padding-top: var(--sx-gap); }
.sx-pg-home .sx-logos-n { text-align: center; font-size: 14px !important; font-weight: 700; font-stretch: 125%; letter-spacing: -.02em; line-height: 1.2; text-transform: uppercase; color: #2b2b2b; margin: 0 0 44px !important; }
.sx-pg-home .sx-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sx-pg-home .sx-logos > .sx-logo-tile { flex: 0 0 calc((100% - 30px) / 4); margin: 0 !important; }
.sx-pg-home .sx-logo-tile { position: relative; aspect-ratio: 2 / 1; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0 12px; background: var(--wp--preset--color--surface, #e4e4e4); color: #555; text-decoration: none; overflow: hidden; }
.sx-pg-home .sx-logo-tile img { display: block; width: 36%; height: 40%; object-fit: contain; filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; opacity: .78; transition: opacity .3s; }
.sx-pg-home a.sx-logo-tile:hover img { opacity: 1; }
.sx-pg-home .sx-logo-name { font-size: clamp(13px, 1.3vw, 18px); font-weight: 700; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.15; text-align: center; text-transform: uppercase; color: #555; }
@media (max-width: 760px) {
	.sx-pg-home .sx-logos-n { margin-bottom: 28px !important; }
	.sx-pg-home .sx-logos > .sx-logo-tile { flex-basis: calc((100% - 10px) / 2); }
}