/* ==========================================================================
   service-web.css — Web Development service page (page-web-development.php).
   Figma: Service Page, "Section 22" column, 1728 wide.
   ========================================================================== */

.sv { --sv-card-top: calc(var(--header-h) + 2.25rem); }

/* ---------- 1. Hero ---------- */
.sv-hero {
	position: relative; overflow: hidden; background: var(--c-white);
	padding: calc(var(--header-top) + var(--header-h) + clamp(2rem, 4.4vw, 76px)) 0 0;
}
/* Faint engineering grid behind the headline, fading out before the fan. */
.sv-hero__grid {
	position: absolute; inset: 0 0 38% 0; pointer-events: none;
	background:
		repeating-linear-gradient(90deg, rgba(47,47,47,.055) 0 1px, transparent 1px 148px),
		repeating-linear-gradient(0deg, rgba(47,47,47,.055) 0 1px, transparent 1px 148px);
	-webkit-mask-image: radial-gradient(130% 90% at 50% 20%, #000 35%, transparent 78%);
	mask-image: radial-gradient(130% 90% at 50% 20%, #000 35%, transparent 78%);
}
.sv-hero__inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sv-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--f-display); font-weight: 500; font-size: clamp(.95rem, 1.05vw, 1.125rem); color: var(--c-ink);
}
.sv-hero__spark { display: block; width: 1.1em; height: 1.1em; color: var(--c-brand); }
.sv-hero__spark svg { width: 100%; height: 100%; display: block; }

.sv-hero__title {
	margin-top: clamp(.5rem, 1vw, 1rem);
	font-family: var(--f-display); font-weight: 600; font-size: clamp(2.75rem, 5.3vw, 5.75rem);
	line-height: 1.04; letter-spacing: -.02em;
}
.sv-hero__title .hl { color: var(--c-brand); }
.sv-hero__lead { margin-top: clamp(.75rem, 1.2vw, 1.25rem); max-width: 56ch; font-size: var(--fs-body-l); line-height: 1.5; }
.sv-hero__lead b { font-weight: 700; }
.sv-hero__btn { margin-top: clamp(1.25rem, 2.1vw, 2.25rem); }

/* The fan of project screenshots. Each card is rotated a little and pulled in
   towards its neighbour, so the row reads as a spread deck rather than a grid. */
.sv-fan {
	--fan-overlap: clamp(1.5rem, 4.4vw, 76px);
	list-style: none; margin: clamp(2rem, 3.5vw, 60px) 0 0; padding: 0 0 clamp(2rem, 4vw, 70px);
	display: flex; justify-content: center; align-items: flex-end;
	perspective: 1600px;
}
.sv-fan__item {
	flex: 0 0 clamp(160px, 19vw, 330px);
	margin-inline: calc(-.5 * var(--fan-overlap));
	/* fans from -5deg on the left to +5deg on the right */
	--t: calc((var(--i) / (var(--n) - 1)) * 2 - 1);
	transform: rotate(calc(var(--t) * 5deg)) translateY(calc(abs(var(--t)) * 14px));
	z-index: calc(10 - var(--i));
	transition: transform var(--dur) var(--ease-out), z-index 0s;
}
.sv-fan__card {
	position: relative; display: block; border-radius: clamp(8px, .9vw, 16px); overflow: hidden;
	background: var(--c-white); border: 1px solid var(--c-line);
	box-shadow: 0 18px 40px -24px rgba(20, 20, 20, .45);
	transition: box-shadow var(--dur) var(--ease-out), filter var(--dur) ease;
}
.sv-fan__card img, .sv-fan__card .wz-ph { display: block; width: 100%; height: auto; aspect-ratio: 330 / 215; object-fit: cover; }
.sv-fan__card .wz-ph { min-height: 0; }
.sv-fan__label {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 1.75rem .75rem .6rem;
	background: linear-gradient(transparent, rgba(0, 0, 0, .72));
	color: #fff; font-family: var(--f-display); font-weight: 500; font-size: .85rem; text-align: center;
	opacity: 0; transition: opacity var(--dur-fast) ease;
}

/* Hover: the card lifts straight, scales up and comes to the front; the rest fall back. */
@media (hover: hover) {
	.sv-fan:hover .sv-fan__item { transform: rotate(calc(var(--t) * 5deg)) translateY(calc(abs(var(--t)) * 14px)) scale(.97); }
	.sv-fan:hover .sv-fan__card { filter: saturate(.75) brightness(.94); }
	.sv-fan__item:hover { transform: rotate(0deg) translateY(-26px) scale(1.14) !important; z-index: 20; }
	.sv-fan__item:hover .sv-fan__card { filter: none !important; box-shadow: 0 34px 60px -26px rgba(20, 20, 20, .55); }
	.sv-fan__item:hover .sv-fan__label { opacity: 1; }
}
.sv-fan__card:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; }
.sv-fan__item:focus-within { transform: rotate(0deg) translateY(-26px) scale(1.12); z-index: 20; }

/* ---------- 2. What We Love Doing — the stacking cards ---------- */
.sv-offers { padding: clamp(3rem, 5.8vw, 100px) 0 clamp(4rem, 7vw, 120px); background: var(--c-surface); }
.sv-offers .sec-head { margin-bottom: clamp(2rem, 3.4vw, 58px); }
.sv-offers .sec-title { font-size: var(--fs-h3); }
.sv-offers .sec-lead { flex-basis: 480px; font-size: var(--fs-body-l); font-weight: 400; line-height: 1.35; }

/* Each card pins just under the header, one notch lower than the last, so the
   next card slides up and settles on top of it. No JS needed. */
.sv-stack { position: relative; }
/* A sticky child is bounded by its parent's CONTENT box, so the run-out has to be
   a block child — padding on .sv-stack would add no sticky range at all.
   Without it the last card never reaches its pin before the stack ends. */
.sv-stack::after { content: ""; display: block; height: clamp(160px, 26vh, 320px); }
.sv-card {
	position: sticky; top: calc(var(--sv-card-top) + var(--i, 0) * clamp(14px, 1.4vw, 24px));
	z-index: calc(var(--i, 0) + 1);
	display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 27vw, 468px); gap: clamp(1.5rem, 3vw, 52px); align-items: center;
	padding: clamp(1.5rem, 2.4vw, 42px);
	border-radius: clamp(18px, 1.6vw, 28px);
	background: linear-gradient(135deg, #9079E4 0%, #7458D7 46%, #6246C6 100%);
	color: #fff;
	box-shadow: 0 -10px 34px -18px rgba(40, 20, 100, .5), 0 24px 50px -32px rgba(40, 20, 100, .6);
}
.sv-card + .sv-card { margin-top: clamp(1.25rem, 2vw, 34px); }
/* Flipped: the narrow visual column moves to the left, body stays wide. */
.sv-card--flip { grid-template-columns: clamp(240px, 27vw, 468px) minmax(0, 1fr); }
.sv-card--flip .sv-card__body { order: 2; }
.sv-card--flip .sv-card__visual { order: 1; }

.sv-card__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.45rem, 2.05vw, 2.2rem); line-height: 1.18; }
.sv-card__num { color: #fff; }
.sv-card__text { margin-top: clamp(.75rem, 1.1vw, 1.1rem); max-width: 62ch; }
.sv-card__text p { font-size: clamp(1rem, 1.14vw, 1.25rem); line-height: 1.58; color: rgba(255, 255, 255, .92); }
.sv-card__text p + p { margin-top: .7rem; }
.sv-card__text b { font-weight: 700; color: #fff; }

.sv-card__best { margin-top: clamp(1rem, 1.5vw, 1.5rem); font-family: var(--f-display); font-weight: 500; font-size: clamp(1rem, 1.15vw, 1.25rem); }
.sv-card__tags { list-style: none; margin: .7rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.sv-card__tags li {
	padding: .4rem .9rem; border-radius: var(--r-pill);
	border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .12);
	font-size: .92rem; line-height: 1.25;
}
.sv-card__btn {
	display: inline-flex; align-items: center; gap: .5rem; margin-top: clamp(1rem, 1.5vw, 1.5rem);
	padding: .7rem 1.4rem; border-radius: var(--r-pill); background: var(--c-white); color: var(--c-ink);
	font-family: var(--f-display); font-weight: 500; font-size: .95rem;
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.sv-card__btn .icon { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease-out); }
.sv-card__btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .45); }
.sv-card__btn:hover .icon { transform: translateX(3px); }

.sv-card__visual { margin: 0; border-radius: clamp(12px, 1.1vw, 20px); overflow: hidden; background: rgba(255, 255, 255, .14); }
.sv-card__visual img { display: block; width: 100%; height: auto; }
.sv-card__visual .wz-ph { display: block; width: 100%; height: auto; aspect-ratio: 468 / 404; object-fit: cover; }
.sv-card__visual .wz-ph { min-height: 0; background: rgba(255, 255, 255, .16); color: #fff; }

/* ---------- 3. Tech Stack ---------- */
.sv-tech { padding: clamp(3rem, 5vw, 86px) 0; background: var(--c-surface); }
.sv-tech .sec-head { margin-bottom: clamp(1.75rem, 2.8vw, 48px); }
.sv-tech .sec-title { font-size: var(--fs-h3); }
.sv-tech .sec-lead { flex-basis: 420px; font-size: var(--fs-body); font-weight: 400; line-height: 1.4; }
/* Marquee. Two identical rows sit in one flex track with the same gap, so a
   shift of exactly half the track plus half a gap lands the clone where the
   original started — no visible seam. */
.sv-tech__marquee { --gap: clamp(.75rem, 1.5vw, 26px); position: relative; overflow: hidden; }
.sv-tech__marquee::before,
.sv-tech__marquee::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 6vw, 110px); z-index: 2; pointer-events: none;
}
.sv-tech__marquee::before { left: 0; background: linear-gradient(90deg, var(--c-surface), rgba(243, 243, 243, 0)); }
.sv-tech__marquee::after { right: 0; background: linear-gradient(270deg, var(--c-surface), rgba(243, 243, 243, 0)); }
.sv-tech__track {
	display: flex; width: max-content;
	animation: sv-tech-run calc(var(--count, 5) * 4.2s) linear infinite;
	will-change: transform;
}
.sv-tech__marquee:hover .sv-tech__track,
.sv-tech__marquee:focus-within .sv-tech__track { animation-play-state: paused; }
/* Each copy carries its own trailing gap, so one copy is exactly 100% / --k of
   the track and the loop point is seamless at any number of copies. */
@keyframes sv-tech-run {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-100% / var(--k, 2)), 0, 0); }
}
.sv-tech__row { list-style: none; margin: 0 var(--gap) 0 0; padding: 0; display: flex; gap: var(--gap); }
.sv-tech__tile {
	flex: 0 0 auto; width: clamp(170px, 17vw, 262px);
	display: grid; place-items: center; gap: .5rem; aspect-ratio: 262 / 120;
	background: var(--c-white); border: 1px solid var(--c-line); border-radius: clamp(10px, 1vw, 18px);
	transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.sv-tech__tile:hover { transform: translateY(-4px); border-color: var(--c-ink); box-shadow: 0 18px 34px -22px rgba(20, 20, 20, .5); }
.sv-tech__tile img { max-width: 46%; max-height: 52%; width: auto; height: auto; object-fit: contain; }
.sv-tech__name { font-family: var(--f-display); font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.4rem); color: var(--c-brand); }
.sv-tech__caption { font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); }

/* ---------- 4. How We Can Help You ---------- */
.sv-help { padding: clamp(3rem, 5.5vw, 96px) 0 clamp(4rem, 7vw, 120px); background: var(--c-white); }
.sv-help .sec-head { margin-bottom: clamp(1.25rem, 2.2vw, 36px); }
.sv-help__title { font-size: var(--fs-h3); }

/* Plot box: markers and curve share one percentage grid. */
.sv-help__plot { position: relative; height: clamp(400px, 33vw, 520px); }
.sv-help__curve { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sv-help__steps { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; }
.sv-help__step {
	position: absolute; left: var(--x); top: var(--y);
	width: min(27ch, 26%);
	transform: translate(calc(-1 * clamp(22px, 1.8vw, 28px)), calc(-1 * clamp(22px, 1.8vw, 28px)));
	isolation: isolate;
}

.sv-help__mark {
	position: relative; z-index: 2; display: grid; place-items: center;
	width: clamp(44px, 3.6vw, 56px); aspect-ratio: 1;
	border-radius: clamp(12px, 1vw, 16px); background: var(--c-ink);
}
.sv-help__dot { width: 32%; aspect-ratio: 1; border-radius: 50%; background: #D9D9DE; }
/* Mascot perches on the chip's top-right corner. */
.sv-help__spider { position: absolute; left: 58%; bottom: 52%; width: clamp(32px, 2.9vw, 46px); height: auto; pointer-events: none; }

.sv-help__ghost {
	position: absolute; left: 56%; top: 42%; z-index: 0;
	font-family: var(--f-display); font-weight: 700; line-height: .78;
	font-size: clamp(5rem, 9.5vw, 11.5rem); color: #E6E6E6; pointer-events: none;
}
.sv-help__name {
	position: relative; z-index: 2;
	margin-top: clamp(.85rem, 1.25vw, 1.15rem);
	font-family: var(--f-display); font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.3rem); line-height: 1.2;
}
.sv-help__text { position: relative; z-index: 2; margin-top: .5rem; font-size: clamp(.86rem, .95vw, 1rem); line-height: 1.55; color: #4a4a4a; }

@media (max-width: 900px) {
	.sv-help__plot { height: auto; }
	.sv-help__curve { display: none; }
	.sv-help__steps { position: static; display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
	.sv-help__step { position: static; width: auto; max-width: 34ch; transform: none; }
	.sv-help__ghost { left: auto; right: 0; top: 30%; font-size: clamp(4rem, 16vw, 7rem); }
}

/* ---------- 5. Service Breakdown ---------- */
.sv-parts { position: relative; padding: clamp(3rem, 5.5vw, 95px) 0 clamp(4rem, 6.5vw, 112px); background: var(--c-surface); overflow: hidden; }
.sv-parts .sec-head { margin-bottom: clamp(2.5rem, 4.4vw, 76px); }
.sv-parts__title { font-size: var(--fs-h3); }
.sv-parts__web {
	position: absolute; left: 50%; top: 56%; width: min(560px, 42vw); aspect-ratio: 1; transform: translate(-50%, -50%);
	pointer-events: none; opacity: .75;
	background:
		repeating-radial-gradient(circle, transparent 0 34px, rgba(47,47,47,.16) 34px 35px),
		conic-gradient(from 0deg, rgba(47,47,47,.16) 0 .35deg, transparent .35deg 30deg,
			rgba(47,47,47,.16) 30deg 30.35deg, transparent 30.35deg 60deg,
			rgba(47,47,47,.16) 60deg 60.35deg, transparent 60.35deg 90deg,
			rgba(47,47,47,.16) 90deg 90.35deg, transparent 90.35deg 120deg,
			rgba(47,47,47,.16) 120deg 120.35deg, transparent 120.35deg 150deg,
			rgba(47,47,47,.16) 150deg 150.35deg, transparent 150.35deg 180deg,
			rgba(47,47,47,.16) 180deg 180.35deg, transparent 180.35deg 210deg,
			rgba(47,47,47,.16) 210deg 210.35deg, transparent 210.35deg 240deg,
			rgba(47,47,47,.16) 240deg 240.35deg, transparent 240.35deg 270deg,
			rgba(47,47,47,.16) 270deg 270.35deg, transparent 270.35deg 300deg,
			rgba(47,47,47,.16) 300deg 300.35deg, transparent 300.35deg 330deg,
			rgba(47,47,47,.16) 330deg 330.35deg, transparent 330.35deg 360deg);
	-webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%);
	mask-image: radial-gradient(circle, #000 52%, transparent 70%);
}
.sv-parts__grid {
	position: relative; list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 5vw, 86px) clamp(2rem, 8vw, 150px);
}
.sv-part { max-width: 32ch; }
.sv-part:nth-child(even) { justify-self: end; }

.sv-part__piece {
	position: relative; display: grid; place-items: center;
	width: clamp(120px, 11vw, 190px); aspect-ratio: 1; margin-bottom: clamp(1rem, 1.6vw, 1.75rem);
	transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(0deg);
	transition: transform 1.05s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}
/* Apart = resting position. The grid gets .is-apart once it scrolls into view;
   before that every piece is translated onto the centre so they read as one
   assembled puzzle. */
.sv-parts__grid.is-apart .sv-part__piece { transform: translate(0, 0) rotate(var(--rot, 0deg)); }
/* Three masked layers: hard offset shadow, ink outline, colour face. A border or
   box-shadow would be clipped by the mask, so each one is its own layer. */
.sv-part__shadow,
.sv-part__piece::before,
.sv-part__piece::after {
	content: ""; position: absolute;
	-webkit-mask-image: var(--piece-mask); mask-image: var(--piece-mask);
	-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.sv-part__shadow { inset: 0; transform: translate(9px, 9px); background: var(--c-ink); z-index: 0; }
.sv-part__piece::before { inset: -3px; background: var(--c-ink); z-index: 1; }
.sv-part__piece::after { inset: 0; background: var(--piece, var(--c-pink)); z-index: 2; }
/* An uploaded SVG/PNG stands in for the whole drawn piece. Its own tilt and
   shadow are already baked into the artwork, so no extra rotation is applied. */
.sv-part__piece--art { overflow: visible; }
.sv-parts__grid.is-apart .sv-part__piece--art { transform: translate(0, 0) rotate(0deg); }
.sv-part__art { display: block; width: 100%; height: 100%; object-fit: contain; }
.sv-part__icon { position: relative; z-index: 3; display: grid; place-items: center; color: var(--c-ink); }
.sv-part__icon .icon { width: clamp(1.9rem, 2.3vw, 2.9rem); height: clamp(1.9rem, 2.3vw, 2.9rem); stroke-width: 1.5; }
.sv-part--pink   { --piece: #F1B1E0; }
.sv-part--yellow { --piece: #F4DE78; }
.sv-part--blue   { --piece: #BCC9EB; }
.sv-part--green  { --piece: #D3E1A9; }
.sv-part__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.05rem, 1.25vw, 1.35rem); }
.sv-part__text { margin-top: .5rem; font-size: clamp(.86rem, .92vw, .97rem); line-height: 1.5; color: #4a4a4a; }

.sv-parts__grid .sv-part:nth-child(1) .sv-part__piece { --piece-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22144%22%20height=%22144%22%20viewBox=%22-12%20-12%20144%20144%22%3E%3Cpath%20d=%22M10%2010%20L47%2010%20L110%2010%20L110%2047%20C130%2047%20130%2073%20110%2073%20L110%20110%20L73%20110%20C73%20130%2047%20130%2047%20110%20L10%20110%20L10%2073%20Z%22%20fill=%22%23000%22/%3E%3C/svg%3E"); --rot: -5deg; }
.sv-parts__grid .sv-part:nth-child(2) .sv-part__piece { --piece-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22144%22%20height=%22144%22%20viewBox=%22-12%20-12%20144%20144%22%3E%3Cpath%20d=%22M10%2010%20L47%2010%20L110%2010%20L110%2047%20L110%20110%20L73%20110%20C73%20130%2047%20130%2047%20110%20L10%20110%20L10%2073%20C30%2073%2030%2047%2010%2047%20Z%22%20fill=%22%23000%22/%3E%3C/svg%3E"); --rot: 4deg; }
.sv-parts__grid .sv-part:nth-child(3) .sv-part__piece { --piece-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22144%22%20height=%22144%22%20viewBox=%22-12%20-12%20144%20144%22%3E%3Cpath%20d=%22M10%2010%20L47%2010%20C47%2030%2073%2030%2073%2010%20L110%2010%20L110%2047%20C130%2047%20130%2073%20110%2073%20L110%20110%20L73%20110%20L10%20110%20L10%2073%20Z%22%20fill=%22%23000%22/%3E%3C/svg%3E"); --rot: -3deg; }
.sv-parts__grid .sv-part:nth-child(4) .sv-part__piece { --piece-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22144%22%20height=%22144%22%20viewBox=%22-12%20-12%20144%20144%22%3E%3Cpath%20d=%22M10%2010%20L47%2010%20C47%2030%2073%2030%2073%2010%20L110%2010%20L110%2047%20L110%20110%20L73%20110%20L10%20110%20L10%2073%20C30%2073%2030%2047%2010%2047%20Z%22%20fill=%22%23000%22/%3E%3C/svg%3E"); --rot: 5deg; }

/* ---------- 6. Closing CTA ---------- */
.sv-cta { padding: 0 0 clamp(3rem, 5vw, 86px); background: var(--c-surface); }
.sv-cta__inner {
	display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 26vw, 450px); gap: clamp(1.5rem, 4vw, 70px); align-items: center;
	background: var(--c-forest); color: #fff; border-radius: 0;
	padding: clamp(1.75rem, 3.2vw, 56px) clamp(1.5rem, 3.2vw, 56px);
}
.sv-cta__title { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.75rem, 2.8vw, 3rem); line-height: 1.12; white-space: pre-line; }
.sv-cta__text { margin-top: .9rem; max-width: 52ch; font-size: var(--fs-body); line-height: 1.5; color: rgba(255, 255, 255, .82); }
.sv-cta .btn { margin-top: clamp(1rem, 1.8vw, 1.75rem); }
.sv-cta__visual { margin: 0; border-radius: 0; overflow: hidden; }
.sv-cta__visual img, .sv-cta__visual .wz-ph { display: block; width: 100%; height: auto; aspect-ratio: 450 / 300; object-fit: cover; }
.sv-cta__visual .wz-ph { min-height: 0; background: rgba(255, 255, 255, .12); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.sv-card { grid-template-columns: 1fr; }
	.sv-card--flip .sv-card__body { order: 0; }
	.sv-card--flip .sv-card__visual { order: 0; }
	.sv-help__steps { grid-template-columns: 1fr; gap: 2rem; min-height: 0; align-items: start; }
	.sv-help__step { padding-bottom: 0; max-width: none; }
	.sv-help__ghost { bottom: auto; top: -.25rem; }
	.sv-help__curve { display: none; }
	.sv-cta__inner { grid-template-columns: 1fr; }
	.sv-cta__visual { max-width: 450px; }
}
@media (max-width: 860px) {
.sv-parts__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.sv-part:nth-child(even) { justify-self: start; }
	.sv-part { max-width: none; }
	.sv-parts__web { display: none; }
	/* Too little room to stack: the cards just run one after another. */
	.sv-card { position: static; }
}
@media (max-width: 640px) {
	.sv-fan { --fan-overlap: clamp(.75rem, 6vw, 2rem); }
	.sv-fan__item { flex-basis: 38vw; }
}
@media (prefers-reduced-motion: reduce) {
	.sv-card { position: static; }
	.sv-fan__item, .sv-fan__card, .sv-part__piece, .sv-tech__tile { transition: none; }
	.sv-tech__track { animation: none; }
	.sv-tech__marquee { overflow-x: auto; }
	.sv-tech__marquee .sv-tech__row[aria-hidden="true"] { display: none; }
}


/* ---------- Stacking-card depth -------------------------------------------
   main.js adds .is-depth and writes --cover / --rise per card; everything the
   effect looks like is decided here, so with JS off (or reduced motion, or a
   phone) the deck falls back to the plain sticky stack with no dead styles.
   Standalone translate: / scale: rather than transform: on purpose - reveals.css
   is the last sheet in the cascade and its .reveal.is-in { transform: none }
   would out-specify a transform written here and wipe the whole effect. */
.sv-stack.is-depth .sv-card {
	transform-origin: 50% 0;
	translate: 0 calc(var(--cover, 0) * -30px + (1 - var(--rise, 1)) * 28px);
	scale: calc((1 - var(--cover, 0) * .075) * (.974 + var(--rise, 1) * .026));
	filter: brightness(calc(1 - var(--cover, 0) * .09));
	box-shadow:
		0 -10px 34px -18px rgba(40, 20, 100, calc(.5 - var(--cover, 0) * .42)),
		0 calc(24px + var(--cover, 0) * 30px) calc(50px + var(--cover, 0) * 46px) -32px rgba(40, 20, 100, calc(.6 - var(--cover, 0) * .2));
	will-change: translate, scale, filter;
}
/* The veil the card above casts. Absolutely positioned, so it is out of flow
   and never becomes a grid item of the card. */
.sv-stack.is-depth .sv-card::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 4, 34, .12), rgba(10, 4, 34, .34));
	opacity: var(--cover, 0);
}
/* Contents drift back a touch against the card's travel, so it reads as a slab
   with depth instead of a flat rectangle being scaled. */
.sv-stack.is-depth .sv-card__visual { translate: 0 calc(var(--cover, 0) * 18px); scale: calc(1 - var(--cover, 0) * .02); }
.sv-stack.is-depth .sv-card__body { translate: 0 calc(var(--cover, 0) * 11px); opacity: calc(1 - var(--cover, 0) * .4); }