/* =============================================================================
   Case study — Web Development / App Development layout
   template-parts/case-study/layout-build.php

   Builds on the SEO layout's cs-* styles in sections.css (hero, overview +
   info card, feature cards, process deck, results card). Everything here is
   what that layout does not have: the project facts in the hero, the mockup
   stack, the solution block, tech stack, outcome checklist, client quote and
   the next-project footer. Loaded only on single case studies.
   ========================================================================== */

/* ---------- 0. Header logo over the dark hero -------------------------- */
/* header.php prints both logos on case studies. While the header floats over
   the hero it shows the white one; once it fixes (light frosted bar) it goes
   back to the default. Same mechanism as the About page. */
.single-case_study .logo--light { display: none; }
.single-case_study .site-header:not(.is-fixed) .logo--default { display: none; }
.single-case_study .site-header:not(.is-fixed) .logo--light { display: inline-flex; }

/* ---------- 1. Hero ------------------------------------------------------- */
/* Overrides the SEO hero (sections.css) for this layout only: no image
   wallpaper and no flat overlay — a dark stage with brand glows, the copy in
   two columns, and the hero image as a framed showcase that tilts back in
   perspective, flattens as the page scrolls, and overlaps the section below. */
.cs--build { --hero-overlap: clamp(64px, 11vw, 190px); }

.cs-hero--build {
	display: block; min-height: 0; overflow: visible;
	padding: calc(var(--header-top) + var(--header-h) + clamp(2.5rem, 5vw, 5rem)) 0 0;
	background: none;
}
.cs-hero--build::after { content: none; }

/* Stage: deep ink, two soft brand glows and a faint grid that fades out. */
.cs-hero--build .cs-hero__bg { z-index: -2; overflow: hidden; background: #0D0B14; }
.cs-hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); }
.cs-hero__glow--a { width: 62vw; height: 62vw; max-width: 980px; max-height: 980px; right: -14vw; top: -30vw; background: radial-gradient(closest-side, rgba(116, 88, 215, .62), rgba(116, 88, 215, 0)); }
.cs-hero__glow--b { width: 44vw; height: 44vw; max-width: 700px; max-height: 700px; left: -16vw; bottom: -18vw; background: radial-gradient(closest-side, rgba(95, 68, 194, .38), rgba(95, 68, 194, 0)); }
.cs-hero__grid {
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 96px),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 96px);
	-webkit-mask-image: radial-gradient(90% 70% at 50% 0%, #000 20%, transparent 75%);
	mask-image: radial-gradient(90% 70% at 50% 0%, #000 20%, transparent 75%);
}

/* Copy: headline left, intro + facts + button right, bottoms aligned. */
.cs-hero__top {
	display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(1.75rem, 4vw, 4.5rem); align-items: end;
}
.cs-hero--build .cs-hero__eyebrow {
	display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 clamp(1rem, 1.6vw, 1.5rem);
	padding: .4rem .95rem .4rem .45rem; border-radius: var(--r-pill);
	border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06);
	font-size: .95rem; color: rgba(255, 255, 255, .88); backdrop-filter: blur(8px);
}
.cs-hero__eyebrow-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-brand); }
.cs-hero--build .cs-hero__eyebrow-icon { width: 15px; height: 15px; color: #fff; }

.cs-hero--build .cs-hero__title {
	margin: 0; max-width: 18ch; text-transform: none;
	font-family: var(--f-display); font-weight: 600; letter-spacing: -.02em;
	font-size: clamp(2.5rem, 5vw, 5.25rem); line-height: 1.02; color: #fff;
}
.cs-hero--build .cs-hero__title--long { font-size: clamp(2.15rem, 3.9vw, 4.1rem); max-width: 20ch; }
.cs-hero--build .cs-hero__title--xlong { font-size: clamp(1.9rem, 3.1vw, 3.3rem); max-width: 24ch; }
.cs-hero--build .cs-hero__title .hl {
	background: linear-gradient(95deg, #C9B9FF 0%, #9B84F2 45%, #7458D7 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

.cs-hero__side { display: grid; gap: 1.35rem; justify-items: start; }
.cs-hero--build .cs-hero__intro { margin: 0; max-width: 46ch; font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.6; color: rgba(255, 255, 255, .72); }

/* Facts as one glass panel with hairline dividers. */
.cs-hero--build .cs-facts {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0;
	width: 100%; margin: 0; padding: .35rem;
	border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .045);
	backdrop-filter: blur(10px);
}
.cs-hero--build .cs-fact { padding: .7rem .9rem; border-left: 1px solid rgba(255, 255, 255, .08); }
.cs-hero--build .cs-fact:first-child { border-left: 0; }
.cs-hero--build .cs-fact dt { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.cs-hero--build .cs-fact dd { margin: .35rem 0 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(.92rem, 1vw, 1.05rem); line-height: 1.3; color: #fff; }
.cs-hero--build .cs-hero__live .icon { width: 1.1rem; height: 1.1rem; }

/* Showcase. --p (0 → 1) is written by main.js as the image scrolls up: tilted
   back 10° at 0, flat at 1. With no JS (or reduced motion) it simply sits flat. */
.cs-hero__shot {
	position: relative; z-index: 2;
	margin: clamp(2.5rem, 5vw, 4.5rem) 0 calc(-1 * var(--hero-overlap));
	perspective: 1800px;
}
.cs-hero__frame {
	position: relative; overflow: hidden;
	border-radius: clamp(14px, 1.6vw, 26px);
	border: 1px solid rgba(255, 255, 255, .14);
	background: #15121F;
	box-shadow: 0 50px 100px -45px rgba(0, 0, 0, .75), 0 0 0 6px rgba(255, 255, 255, .03);
	transform-origin: 50% 100%;
	transform: rotateX(calc((1 - var(--p, 1)) * 10deg)) scale(calc(.94 + var(--p, 1) * .06));
}
.cs-hero__frame img { display: block; width: 100%; height: auto; }
.cs-hero__halo {
	position: absolute; left: 8%; right: 8%; top: 10%; bottom: -4%; z-index: -1;
	border-radius: 50%; background: radial-gradient(closest-side, rgba(116, 88, 215, .55), rgba(116, 88, 215, 0));
	filter: blur(50px);
}
/* The section below starts under the overlapping showcase. */
.cs-hero--build + .cs-overview { padding-top: calc(var(--hero-overlap) + var(--section-pad)); }

@media (max-width: 1024px) {
	.cs-hero__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 640px) {
	.cs--build { --hero-overlap: 48px; }
	.cs-hero--build .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cs-hero--build .cs-fact:nth-child(3) { border-left: 0; }
	.cs-hero--build .cs-fact:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, .08); }
}

/* The overview's second block (The Challenge) under the overview copy. */
.cs-block { margin-top: var(--s-6); }

/* ---------- 2. Mockup showcase ------------------------------------------ */
/* A sticky deck: every shot pins at the same offset and the next one rides up
   over it. The deck's run-out lives on ::after, because a sticky child is
   bounded by its parent's CONTENT box — padding would add no travel. */
.cs-shots-wrap { background: var(--c-surface); padding: var(--section-pad) 0 0; overflow: clip; }
.cs-shots__head { display: grid; gap: .5rem; margin-bottom: clamp(2rem, 3.4vw, 3.5rem); }
.cs-shots {
	--shot-top: calc(var(--header-h) + 1.5rem);
	--shot-step: clamp(12px, 1.3vw, 22px);
	position: relative;
}
.cs-shots::after { content: ""; display: block; height: clamp(140px, 24vh, 300px); }
.cs-shot {
	position: sticky; top: calc(var(--shot-top) + var(--i, 0) * var(--shot-step));
	z-index: calc(var(--i, 0) + 1);
	margin: 0; overflow: hidden;
	border-radius: clamp(16px, 1.5vw, 26px);
	background: #141317;
	box-shadow: 0 -10px 34px -18px rgba(20, 10, 60, .45), 0 30px 60px -30px rgba(20, 10, 60, .6);
	transform-origin: 50% 0;
}
.cs-shot + .cs-shot { margin-top: clamp(1.25rem, 2.2vw, 36px); }
/* Capped to the viewport so a pinned shot is always fully on screen — the
   overlap only reads when the visitor can see the whole card beneath. */
/* width: 100% matters: with an auto width, the max-height is transferred
   through the aspect ratio into a max-width, so on screens where the cap
   bites the screenshot shrank to ~96% of the card and left a black strip
   down the right. A definite width keeps it edge to edge; only its height
   is capped, and the image crops a sliver top/bottom instead. */
.cs-shot__screen { position: relative; width: 100%; aspect-ratio: 16 / 9.4; max-height: calc(100svh - var(--shot-top) - 4rem); }
.cs-shot__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cs-shot__cap {
	position: absolute; left: clamp(.9rem, 1.4vw, 1.4rem); bottom: clamp(.9rem, 1.4vw, 1.4rem); z-index: 2;
	display: inline-flex; align-items: center; gap: .6rem;
	padding: .45rem .85rem .45rem .6rem; border-radius: var(--r-pill);
	background: rgba(12, 10, 20, .62); color: #fff; backdrop-filter: blur(8px);
	font-size: .85rem;
}
.cs-shot__num { font-family: var(--f-display); font-weight: 600; color: var(--c-yellow); }
.cs-shot__label { color: rgba(255, 255, 255, .9); }

/* "none" — a composed landscape mockup fills the card edge to edge.
   "panel" — the upload sits whole on a soft gradient panel, for transparent
   PNGs or odd aspect ratios that should never be cropped. */
.cs-shots--panel .cs-shot { background: linear-gradient(135deg, #EFE9FC 0%, #E3DBF8 100%); }
.cs-shots--panel .cs-shot__screen { display: grid; place-items: center; padding: clamp(1rem, 2.4vw, 2.5rem); }
.cs-shots--panel .cs-shot__screen img { width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; border-radius: clamp(8px, .8vw, 14px); }

/* "browser" — a window chrome above a top-aligned screenshot, so a long page
   capture reads as the real site. */
.cs-shot__bar {
	display: flex; align-items: center; gap: .45rem; height: 40px; padding: 0 1rem;
	background: #1E1C25; border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.cs-shot__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.cs-shot__bar i:nth-child(1) { background: #FF5F57; }
.cs-shot__bar i:nth-child(2) { background: #FEBC2E; }
.cs-shot__bar i:nth-child(3) { background: #28C840; }
.cs-shot__bar b {
	margin-left: .9rem; flex: 1 1 auto; max-width: 420px; padding: .3rem .8rem;
	border-radius: 7px; background: rgba(255, 255, 255, .08);
	font-family: var(--f-body); font-weight: 400; font-size: .78rem; color: rgba(255, 255, 255, .65);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-shots--browser .cs-shot__screen { aspect-ratio: 16 / 9; }

/* "phone" — a tall screen inside a rounded device on a brand gradient. */
.cs-shots--phone .cs-shot { background: linear-gradient(135deg, #9079E4 0%, #7458D7 46%, #5F44C2 100%); }
.cs-shots--phone .cs-shot__screen { aspect-ratio: 16 / 9.4; display: grid; place-items: center; padding: clamp(1.25rem, 2.6vw, 2.75rem) 0; }
.cs-shots--phone .cs-shot__screen img {
	width: auto; height: 100%; max-height: 100%; max-width: 100%; object-fit: contain;
	border-radius: clamp(18px, 2vw, 34px); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .6);
	border: 6px solid #141317; background: #141317;
}

/* Depth, written by main.js per frame as --cover (how far the next shot has
   covered this one) and --rise (this shot's own approach). Standalone
   translate/scale rather than transform, so nothing else can wipe it. */
.cs-shots.is-depth .cs-shot {
	translate: 0 calc(var(--cover, 0) * -26px + (1 - var(--rise, 1)) * 30px);
	scale: calc((1 - var(--cover, 0) * .07) * (.972 + var(--rise, 1) * .028));
	/* No will-change and no filter here, on purpose. will-change: scale makes
	   Chrome rasterise the card once — at whatever scale it had when it was
	   promoted, which is .97 while it is still rising — and then stretch that
	   bitmap rather than redraw it, so every pinned mockup sat ~3% soft. A
	   filter forces the same kind of cached layer. The dimming is done by the
	   ::after veil below instead, which costs nothing in sharpness. */
}
.cs-shots.is-depth .cs-shot::after {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
	background: linear-gradient(180deg, rgba(10, 4, 34, .22), rgba(10, 4, 34, .5));
	opacity: var(--cover, 0);
}

/* ---------- 3. Solution + features -------------------------------------- */
.cs-solution { padding: var(--section-pad) 0 var(--s-6); }
.cs-solution__grid {
	display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(1.5rem, 4vw, 5rem); align-items: start;
}
.cs-solution__head { display: grid; gap: .5rem; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.cs-prose--lg { margin-top: 0; max-width: none; font-size: var(--fs-body-l); line-height: 1.65; }
/* base.css resets list styling site-wide; prose lists get their bullets back. */
.cs-prose ul, .cs-prose ol { margin: 1.1rem 0; padding-left: 1.35rem; list-style: disc; }
.cs-prose ol { list-style: decimal; }
.cs-prose li { display: list-item; }
.cs-prose li + li { margin-top: .45rem; }
.cs-prose li::marker { color: var(--c-brand); }
.cs-features { margin-top: clamp(2.5rem, 4vw, 4rem); }

/* ---------- 3b. Process deck ------------------------------------------- */
/* sections.css gives the deck's list a 100vh + 15vh-per-step run-out so the
   finished stack holds on screen for a while. These steps are short (often a
   title alone), so that run-out reads as a screen of empty space. The list's
   natural height is exactly the travel the last card needs to land, so it is
   all the deck gets here. */
.cs--build .cs-process__steps.is-deck .cs-process__list { min-height: 0; }

/* ---------- 4. Tech stack ------------------------------------------------ */
.cs-tech { padding: var(--s-6) 0; background: var(--c-surface); }
.cs-tech__inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: center; }
.cs-tech__head { display: grid; gap: .5rem; }
.cs-tech__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.cs-tech__item {
	display: inline-flex; align-items: center; gap: .65rem;
	padding: .6rem 1.1rem .6rem .7rem; border-radius: var(--r-pill);
	background: var(--c-white); border: 1px solid var(--c-line);
	font-family: var(--f-display); font-weight: 500; font-size: .95rem; color: var(--c-ink);
}
.cs-tech__item:has(.cs-tech__logo):not(:has(.cs-tech__name)) { padding-right: .7rem; }
.cs-tech__logo { display: grid; place-items: center; width: 32px; height: 32px; }
.cs-tech__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* ---------- 5. Results: outcome checklist ------------------------------- */
.cs-results__grid + .cs-points { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.cs-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 2.5rem; }
.cs-point { display: flex; gap: .75rem; align-items: flex-start; font-size: 1.0625rem; line-height: 1.5; }
.cs-point .icon { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .1rem; color: var(--c-yellow); }

/* ---------- 6. Client quote -------------------------------------------- */
.cs-quote { padding: 0 0 var(--section-pad); }
.cs-quote__card {
	position: relative; margin: 0; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 4rem);
	border-radius: 24px; background: #EFE9FC;
}
.cs-quote__mark { width: clamp(28px, 2.6vw, 40px); height: auto; color: var(--c-brand); }
.cs-quote__text {
	margin: 1.25rem 0 0; max-width: 60ch;
	font-family: var(--f-display); font-weight: 500; font-size: clamp(1.25rem, 1.9vw, 2rem); line-height: 1.3; color: var(--c-ink);
}
.cs-quote__who { display: flex; align-items: center; gap: .9rem; margin-top: 1.75rem; }
.cs-quote__face img { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.cs-quote__who strong { display: block; font-family: var(--f-display); font-weight: 600; }
.cs-quote__who em { display: block; font-style: normal; font-size: .9rem; color: var(--c-muted); }

/* ---------- 6b. Video testimonial --------------------------------------- */
/* With a written quote the card splits: words left, the portrait video right.
   Video only: the video sits centred on the lilac card on its own. */
.cs-quote__card.has-video {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.cs-quote__card.is-video-only { display: flex; justify-content: center; }
.cs-quote__body { margin: 0; }

.cs-vt {
	position: relative; isolation: isolate; overflow: hidden;
	width: clamp(220px, 17vw, 280px); aspect-ratio: 9 / 16;
	border-radius: 20px; background: #16141C; cursor: pointer;
	box-shadow: 0 34px 60px -28px rgba(30, 16, 80, .55), 0 10px 22px -12px rgba(30, 16, 80, .35);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.cs-vt:hover, .cs-vt.is-playing { transform: translateY(-6px) scale(1.02); box-shadow: 0 46px 80px -30px rgba(30, 16, 80, .6), 0 14px 28px -14px rgba(30, 16, 80, .4); }
.cs-vt__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-vt__shade {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(0deg, rgba(10, 8, 16, .82) 0%, rgba(10, 8, 16, .35) 26%, rgba(10, 8, 16, 0) 46%);
}

/* Controls: frosted circles, top corners. */
.cs-vt__play, .cs-vt__sound {
	position: absolute; top: .85rem; z-index: 2;
	display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
	color: #fff; cursor: pointer;
	background: rgba(30, 28, 36, .42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) ease;
}
.cs-vt__play { left: .85rem; width: 38px; height: 38px; }
.cs-vt__sound { right: .85rem; width: 32px; height: 32px; opacity: .8; }
.cs-vt__play svg { width: 18px; height: 18px; }
.cs-vt__sound svg { width: 16px; height: 16px; }
.cs-vt__play:hover, .cs-vt__sound:hover { background: rgba(116, 88, 215, .85); transform: scale(1.06); opacity: 1; }
.cs-vt__play:focus-visible, .cs-vt__sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Icon swaps driven by the state classes main.js sets on .cs-vt. */
.cs-vt__i-pause, .cs-vt__i-on { display: none; }
.cs-vt.is-playing .cs-vt__i-play { display: none; }
.cs-vt.is-playing .cs-vt__i-pause { display: block; }
.cs-vt:not(.is-muted) .cs-vt__i-off { display: none; }
.cs-vt:not(.is-muted) .cs-vt__i-on { display: block; }
/* Playing but muted (the browser held the sound back): nudge the speaker. */
.cs-vt.is-playing.is-muted .cs-vt__sound { opacity: 1; animation: cs-vt-nudge 1.6s var(--ease-out) 2; }
@keyframes cs-vt-nudge { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); background: rgba(116, 88, 215, .85); } }

.cs-vt__meta {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
	display: grid; gap: .3rem; padding: 1rem 1.1rem 1.1rem; color: #fff; pointer-events: none;
}
.cs-vt__name { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 1.25vw, 1.35rem); line-height: 1.15; }
.cs-vt__co { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }

@media (max-width: 900px) {
	.cs-quote__card.has-video { grid-template-columns: minmax(0, 1fr); justify-items: center; }
	.cs-quote__card.has-video .cs-quote__body { justify-self: stretch; }
	.cs-vt { width: min(280px, 72vw); }
}
@media (prefers-reduced-motion: reduce) {
	.cs-vt, .cs-vt__play, .cs-vt__sound { transition: none; }
	.cs-vt:hover, .cs-vt.is-playing { transform: none; }
	.cs-vt.is-playing.is-muted .cs-vt__sound { animation: none; }
}

/* ---------- 7. Next project -------------------------------------------- */
.cs-next { border-top: 1px solid var(--c-line); padding: clamp(2rem, 3.5vw, 3.5rem) 0; }
.cs-next__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cs-next__all { display: inline-flex; align-items: center; gap: .5rem; color: var(--c-muted); text-decoration: none; }
.cs-next__all .icon { width: 1.1rem; height: 1.1rem; rotate: 180deg; }
.cs-next__all:hover { color: var(--c-ink); }
.cs-next__link {
	position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 1.5rem; align-items: center;
	text-decoration: none; color: var(--c-ink); text-align: right;
}
.cs-next__kicker { grid-column: 1; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--c-muted); }
.cs-next__title { grid-column: 1; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 2rem); line-height: 1.15; }
.cs-next__go {
	grid-column: 2; grid-row: 1 / 3; display: grid; place-items: center;
	width: clamp(48px, 4vw, 64px); aspect-ratio: 1; border-radius: 50%;
	background: var(--c-brand); color: #fff; transition: transform var(--dur-fast) var(--ease-out);
}
.cs-next__go .icon { width: 1.4rem; height: 1.4rem; }
.cs-next__link:hover .cs-next__go { transform: translate(3px, -3px); }

/* ---------- 8. Responsive ---------------------------------------------- */
@media (max-width: 1024px) {
	.cs-solution__grid, .cs-tech__inner { grid-template-columns: minmax(0, 1fr); }
	.cs-solution__head { position: static; }
	.cs-points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.cs-shots { --shot-step: 8px; }
	.cs-shot__screen, .cs-shots--panel .cs-shot__screen, .cs-shots--phone .cs-shot__screen, .cs-shots--browser .cs-shot__screen { aspect-ratio: 4 / 3; }
	.cs-shot__bar b { display: none; }
	.cs-next__link { grid-template-columns: 1fr; text-align: left; }
	.cs-next__go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .5rem; }
}