/* Full-bleed covers (home hero, inner-page heroes, featured, CTA band) and the inner-page title. Loads after stux.css.
   Measured on the Stux recordings at a 1280px-wide viewport: every cover is edge to edge with square corners at all
   times (no inset, rounding or zoom on scroll). Titles are bold capitals at normal width, flat white (no shadow). */

/* ---------------------------------------------------------- full-bleed photo with a centred title */
.sx-cover {
	--sx-cover-inset: clamp(16px, 2.2vw, 32px); /* pills and tags sit closer to the edge than the page gutter */
	position: relative; overflow: hidden; color: #fff; background: #24282d;
	min-height: clamp(480px, 80vh, 820px); display: grid; place-items: center; text-align: center;
	padding: 110px var(--sx-pad) 100px;
}
.sx-cover > * { margin: 0 !important; }
.sx-cover-img { position: absolute !important; inset: 0; z-index: 0; margin: 0 !important; }
.sx-cover-img img { width: 100%; height: 100% !important; object-fit: cover; display: block; border-radius: 0 !important; }
.sx-cover::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,0) 38%, rgba(0,0,0,.26)); }
.sx-cover-copy, .sx-cover-pills, .sx-cover-top { position: relative; z-index: 1; }
.sx-cover-title {
	font-size: clamp(40px, 7.3vw, 128px) !important; line-height: .92 !important; font-weight: 700 !important; font-stretch: 100%;
	letter-spacing: 0; text-transform: uppercase; margin: 0 !important; color: #fff;
}
.sx-cover-sub { font-size: 16px; font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.5; margin-top: 20px !important; text-shadow: 0 1px 3px rgba(0,0,0,.35); }

/* category pills, bottom corners */
.sx-cover-pills { position: absolute !important; left: var(--sx-cover-inset); right: var(--sx-cover-inset); bottom: 24px; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.sx-pill { margin: 0; padding: 9px 18px; border: 1.5px solid rgba(255,255,255,.75); border-radius: 999px; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); font-size: 11px !important; font-weight: 700; font-stretch: 125%; text-transform: uppercase; color: #fff; } /* shared with the project cards (cards.css) */
.sx-cover .sx-pill {
	display: inline-flex; align-items: center; box-sizing: border-box; height: 34px; padding: 0 17px;
	border: 2px solid rgba(255,255,255,.85); background: rgba(70,70,70,.42);
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 2px 8px rgba(0,0,0,.3);
	font-size: 12px !important; font-stretch: 100%; line-height: 1; letter-spacing: .01em;
	text-shadow: 0 1px 2px rgba(0,0,0,.45); white-space: nowrap;
}
.sx-pill:empty { visibility: hidden; }

/* tag row along the top edge (featured: "FEATURED ... 2025") */
.sx-cover-top { position: absolute !important; top: 20px; left: var(--sx-cover-inset); right: var(--sx-cover-inset); display: flex; justify-content: space-between; align-items: baseline; }
.sx-cover-tag { margin: 0; font-size: clamp(12px, 1.1vw, 16px); font-weight: 400; font-stretch: 112%; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.sx-cover-tag:last-child { font-weight: 600; color: #fff; }

/* ---------------------------------------------------------- home hero: one viewport tall, copy in the lower part */
.sx-hero:not(.sx-hero-page) {
	height: 100vh; height: 100svh; min-height: 520px; align-content: end;
	padding: 0 var(--sx-pad) calc(17vh - 7px); padding-bottom: calc(17svh - 7px);
}
.sx-hero:not(.sx-hero-page) .sx-cover-title { font-size: clamp(54px, 7.8vw, 150px) !important; line-height: .84 !important; }
.sx-hero:not(.sx-hero-page) .sx-cover-sub { margin-top: clamp(14px, 1.65vw, 28px) !important; }
.sx-hero-page { min-height: clamp(460px, 78vh, 760px); }

/* ---------------------------------------------------------- home hero walk-in (sx_hero(), walk.js)
   A stage (first frame as a photo + the frame canvas) and a front layer (title, place line, pills). Static, it is one
   screen like any hero. With motion, walk.js adds .is-walk: the section becomes a scroll track, the stage stays pinned
   while the frames play (--sx-walk of scrolling), and the front layer scrolls away with the page as it fades (--wk). */
.sx-cover.sx-hero.sx-walk { display: block; place-items: normal; align-content: normal; height: auto; min-height: 0; padding: 0; overflow: visible; background: #1d1f22; }
.sx-cover.sx-walk::after { content: none; }
/* the film block deleted or moved: the hero stays one screen tall (the front layer is absolute) */
.sx-cover.sx-hero.sx-walk:not(:has(> .sx-walk-stage)) { min-height: 520px; min-height: max(100vh, 520px); min-height: max(100svh, 520px); }
.sx-walk-stage { position: relative; z-index: 0; height: 100vh; height: 100svh; min-height: 520px; overflow: hidden; background: #24282d; }
.sx-walk-stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,0) 38%, rgba(0,0,0,.26)); }
.sx-walk-canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.sx-walk.is-drawn .sx-walk-canvas { opacity: 1; }
.sx-cover .sx-walk-front {
	position: absolute !important; top: 0; left: 0; right: 0; z-index: 2; box-sizing: border-box;
	height: 100vh; height: 100svh; min-height: 520px; display: grid; place-items: center; align-content: end;
	padding: 0 var(--sx-pad) calc(17vh - 7px); padding-bottom: calc(17svh - 7px);
}
.sx-cover.sx-hero.sx-walk.is-walk { --sx-walk: 220vh; height: calc(max(100vh, 520px) + var(--sx-walk)); height: calc(max(100svh, 520px) + var(--sx-walk)); }
.sx-walk.is-walk .sx-walk-stage { position: sticky; top: 0; }
.sx-walk.is-walk .sx-walk-front { opacity: calc(1 - var(--wk, 0) * 2.6); }
@media (max-width: 600px) {
	.sx-cover .sx-walk-front { padding-bottom: 150px; }
	.sx-cover.sx-hero.sx-walk.is-walk { --sx-walk: 170vh; }
}

/* ---------------------------------------------------------- featured project: half as tall as wide, copy low */
.sx-featured {
	margin-top: var(--sx-gap) !important; min-height: clamp(500px, 50vw, 900px); align-content: end;
	padding: 110px var(--sx-pad) max(90px, calc(7.6vw - 7px));
}
.sx-featured .sx-cover-title { font-size: clamp(40px, 7.3vw, 124px) !important; line-height: .93 !important; }
.sx-featured .sx-cover-sub { margin-top: clamp(14px, 1.85vw, 30px) !important; }

/* ---------------------------------------------------------- closing CTA band (same on every page) */
.sx-cta {
	min-height: clamp(440px, 42.4vw, 780px); padding: 80px var(--sx-pad);
	margin-top: clamp(90px, 14vw, 210px) !important; margin-bottom: -1px !important; /* the footer covers the half-pixel seam */
}
.sx-cta::after { background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04) 50%, rgba(0,0,0,.14)); }
.sx-cta .sx-cover-title { font-size: clamp(34px, 7.1vw, 124px) !important; line-height: .9 !important; }
.sx-cta .wp-block-buttons { justify-content: center; margin-top: 34px !important; }

@media (max-width: 600px) {
	.sx-hero .sx-cover-pills { bottom: 84px; } /* clear the floating assistant button on first view */
	.sx-hero:not(.sx-hero-page) { padding-bottom: 150px; }
	.sx-cover .sx-pill { height: 32px; padding: 0 14px; font-size: 11px !important; }
}

/* ---------------------------------------------------------- inner page title (Projects, Contact, Blog) */
.sx-page-title { position: relative; text-align: center; padding: clamp(48px, 11vw, 176px) var(--sx-pad) clamp(48px, 7.2vw, 110px); }
.sx-page-title-rule { padding-bottom: clamp(64px, 11.8vw, 180px); }
.sx-page-title-rule::after { content: ""; position: absolute; left: var(--sx-pad); right: var(--sx-pad); bottom: 0; height: 1px; background: #dcdcdc; }
.sx-page-title > * { margin: 0 auto !important; }
.sx-page-h1 { font-size: clamp(50px, 7.6vw, 140px) !important; font-weight: 800 !important; font-stretch: 105%; letter-spacing: 0; line-height: .9 !important; text-transform: uppercase; color: var(--sx-ink); }
.sx-page-sub { font-size: clamp(14px, 1.17vw, 19px); font-weight: 400; font-stretch: 112%; letter-spacing: 0; line-height: 1.6; color: #2e2e2e; margin-top: clamp(14px, 1.5vw, 24px) !important; max-width: none; }

/* ---------------------------------------------------------- motion (only with body.sx-fx) */
/* hero: the photo trails the page at 85% speed (parallax); title, place line and pills scroll 1:1 */
.sx-fx .sx-hero .sx-cover-img img { transform: translate3d(0, calc(var(--hp, 0) * 15vh), 0); animation: sx-zoom 2.4s cubic-bezier(.2,.75,.1,1) both; will-change: transform; }
@keyframes sx-zoom { from { scale: 1.18; } to { scale: 1; } }
.sx-fx .sx-hero .sx-cover-pills { animation: sx-fade 1.2s .6s both; }
/* walk-in hero: the stage is pinned, so no parallax; the frame canvas gets the same opening zoom as the photo under it */
.sx-fx .sx-walk .sx-cover-img img { transform: none; will-change: auto; }
.sx-fx .sx-walk .sx-walk-canvas { animation: sx-zoom 2.4s cubic-bezier(.2,.75,.1,1) both; }
@keyframes sx-fade { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }