/**
 * Section layouts.
 *
 * Each section uses a different structural family on purpose: split hero,
 * hairline strip, bento, editorial grid, horizontal spine, overlap split,
 * masonry, full bleed panel, single quote, closing wash.
 */

/* ============================================================
   1. Hero
   ============================================================ */

.ci-hero {
	position: relative;
	min-height: min(100svh, 900px);
	display: flex;
	align-items: center;
	padding-block: calc(var(--header-h) + var(--sp-xl)) var(--sp-xl);
	overflow: hidden;
}

/* The ink wash. One of the four places the gradient is allowed. */
.ci-hero::before {
	content: "";
	position: absolute;
	top: -22%;
	right: -12%;
	width: min(1100px, 88vw);
	aspect-ratio: 1;
	background: var(--grad-ink);
	filter: blur(120px);
	opacity: 0.3;
	border-radius: 50%;
	pointer-events: none;
}

.ci-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 240px;
	background: linear-gradient(to top, var(--bg), transparent);
	pointer-events: none;
}

.ci-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
	align-items: center;
	gap: clamp(28px, 4vw, 60px);
	width: 100%;
}

.ci-hero__title {
	font-size: var(--fs-display);
	line-height: var(--lh-display);
	letter-spacing: -0.035em;
	max-width: 22ch;
}

.ci-hero__text {
	margin-top: var(--sp-md);
	max-width: 48ch;
	font-size: var(--fs-lead);
	color: var(--ink-muted);
}

.ci-hero__actions {
	margin-top: var(--sp-lg);
}

/* ---------- Hero composition ---------- */

.ci-stage {
	position: relative;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}

.ci-stage__disc {
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: radial-gradient(circle at 30% 25%, rgba(25, 212, 240, 0.14), transparent 62%);
}

.ci-stage__disc::after {
	content: "";
	position: absolute;
	inset: 14%;
	border-radius: 50%;
	border: 1px solid var(--border-soft);
}

.ci-float {
	position: absolute;
	/* A small mount, so a fitted image reads as a mounted print rather than a
	   picture that failed to fill its box. */
	padding: clamp(6px, 0.7vw, 12px);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	border: 1px solid rgba(236, 239, 251, 0.1);
	background: var(--surface);
	will-change: transform;
}

/* The images in a frame are stacked, and only the active one is shown. The
   first carries .is-active from PHP, so a frame still shows work when scripts
   never run and there is no flash before the script boots. */
.ci-float img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	/* contain, not cover: every piece of work is shown whole, never cropped to
	   fill the frame. */
	object-fit: contain;
	object-position: center;
	border-radius: var(--r-sm);
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 900ms var(--ease), transform 1600ms var(--ease);
}

.ci-float img.is-active {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ci-float img {
		transition: none;
		transform: none;
	}
}

.ci-float--card {
	width: 46%;
	aspect-ratio: 16 / 10;
	left: 4%;
	top: 30%;
	transform: rotate(-7deg);
	z-index: 3;
}

.ci-float--brochure {
	width: 40%;
	aspect-ratio: 3 / 4;
	right: 3%;
	top: 8%;
	transform: rotate(5deg);
	z-index: 2;
}

.ci-float--banner {
	width: 32%;
	aspect-ratio: 2 / 3;
	right: 16%;
	bottom: 0;
	transform: rotate(-3deg);
	z-index: 4;
}

/* A chip of the four process inks, the brand's own colour bar. */
.ci-inkbar {
	position: absolute;
	left: 12%;
	bottom: 12%;
	z-index: 5;
	display: flex;
	border-radius: var(--r-pill);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	border: 1px solid rgba(236, 239, 251, 0.12);
}

.ci-inkbar span {
	width: clamp(26px, 3vw, 40px);
	height: clamp(14px, 1.6vw, 20px);
}

/* The four process inks, in press order. */
.ci-inkbar span:nth-child(1) {
	background: var(--accent);
}

.ci-inkbar span:nth-child(2) {
	background: var(--magenta);
}

.ci-inkbar span:nth-child(3) {
	background: var(--yellow);
}

.ci-inkbar span:nth-child(4) {
	background: var(--surface-alt);
}

.js .ci-float {
	animation: ci-drift 9s var(--ease) infinite alternate;
}

.js .ci-float--brochure {
	animation-duration: 11s;
	animation-delay: -3s;
}

.js .ci-float--banner {
	animation-duration: 13s;
	animation-delay: -6s;
}

@keyframes ci-drift {
	from {
		transform: rotate(var(--rot, 0deg)) translate3d(0, 0, 0);
	}
	to {
		transform: rotate(var(--rot, 0deg)) translate3d(0, -14px, 0);
	}
}

.ci-float--card {
	--rot: -7deg;
}

.ci-float--brochure {
	--rot: 5deg;
}

.ci-float--banner {
	--rot: -3deg;
}

@media (prefers-reduced-motion: reduce) {
	.js .ci-float {
		animation: none;
	}
}

/* ============================================================
   2. Trust strip. Hairline dividers, not cards.
   ============================================================ */

.ci-trust {
	border-block: 1px solid var(--border-soft);
	background: var(--surface-alt);
}

.ci-trust__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.ci-trust__list li {
	padding: var(--sp-md) var(--sp-md) var(--sp-md) 0;
	font-family: var(--font-display);
	font-size: clamp(0.92rem, 0.85rem + 0.3vw, 1.05rem);
	font-weight: 700;
	color: var(--ink);
	border-left: 1px solid var(--border-soft);
	padding-left: var(--sp-md);
	display: flex;
	align-items: center;
	gap: 10px;
}

.ci-trust__list li:first-child {
	border-left: 0;
	padding-left: 0;
}

.ci-trust__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--accent);
}

/* ============================================================
   3. Services bento. Two tall, two wide, never four identical.
   ============================================================ */

.ci-bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-md);
}

.ci-bento > *:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

.ci-bento > *:nth-child(2) {
	grid-column: span 2;
}

.ci-bento > *:nth-child(3),
.ci-bento > *:nth-child(4) {
	grid-column: span 1;
}

.ci-bento > *:nth-child(2) {
	flex-direction: row;
	align-items: stretch;
}

.ci-bento > *:nth-child(2) .ci-card__media {
	flex: 0 0 42%;
	aspect-ratio: auto;
}

.ci-card--service.ci-card--lead .ci-card__body {
	padding: var(--sp-lg);
	gap: var(--sp-md);
}

.ci-card--lead .ci-card__title {
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

.ci-card--lead .ci-card__text {
	font-size: var(--fs-body);
	max-width: 44ch;
}

/* ============================================================
   4. Featured products. Editorial grid, mixed weights.
   ============================================================ */

.ci-products {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sp-md);
}

/* Media area on top, label beneath. The image used to be a faded backdrop
   with the text sitting over it, which only works when the image is cropped to
   fill the tile. Giving it its own area lets the product be shown whole. */
.ci-product {
	position: relative;
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	min-height: 260px;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface);
	text-decoration: none;
	color: var(--ink);
	border: 1px solid var(--border);
	transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

.ci-product:first-child,
.ci-product:nth-child(2) {
	grid-column: span 3;
	min-height: 340px;
}

.ci-product:hover {
	border-color: var(--accent);
	transform: translateY(-4px);
	color: var(--ink);
}

.ci-product__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 0;
	padding: var(--sp-md);
	background: var(--surface-alt);
}

.ci-product__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--r-sm);
	transition: transform var(--t-slow) var(--ease);
}

.ci-product:hover .ci-product__img {
	transform: scale(1.04);
}

.ci-product__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: var(--sp-md);
	border-top: 1px solid var(--border);
}

.ci-product__label {
	font-family: var(--font-display);
	font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ci-product__go {
	color: var(--accent);
	font-size: var(--fs-small);
	font-weight: 700;
}

.ci-product__media .ci-work__placeholder {
	border-radius: var(--r-sm);
}

/* ============================================================
   5. Process. A single ink spine, not four repeated circles.
   ============================================================ */

.ci-process {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-lg);
	padding-top: var(--sp-lg);
}

.ci-process::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--grad-ink);
	border-radius: 2px;
}

.ci-step {
	position: relative;
	padding-top: var(--sp-md);
}

.ci-step::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bg);
	border: 2px solid var(--accent);
}

.ci-step__n {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1px var(--border);
	margin-bottom: var(--sp-sm);
}

.ci-step__title {
	font-size: var(--fs-h3);
	margin-bottom: 8px;
}

.ci-step__text {
	color: var(--ink-muted);
	font-size: var(--fs-small);
	max-width: 32ch;
}

/* ============================================================
   6. Why. Overlap split with an oversized statement.
   ============================================================ */

.ci-why {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.ci-why__title {
	font-size: clamp(2rem, 1.4rem + 2.6vw, 3.3rem);
	max-width: 18ch;
}

.ci-why__text {
	margin-top: var(--sp-md);
	color: var(--ink-muted);
	max-width: var(--measure);
}

.ci-why__list {
	margin-top: var(--sp-lg);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-md) var(--sp-lg);
	list-style: none;
	padding: 0;
}

.ci-why__list li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-weight: 600;
	padding-top: var(--sp-sm);
	border-top: 1px solid var(--border-soft);
}

.ci-why__list svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	color: var(--accent);
}

.ci-why__media {
	position: relative;
}

.ci-why__media img {
	width: 100%;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
}

/* The floating stat overlaps the image and the section edge. */
.ci-stat {
	position: absolute;
	left: -6%;
	bottom: -8%;
	padding: var(--sp-md) var(--sp-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-lg);
	max-width: 260px;
}

.ci-stat__big {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.6rem + 1.4vw, 2.7rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--accent);
}

.ci-stat__label {
	display: block;
	margin-top: 6px;
	font-size: var(--fs-small);
	color: var(--ink-muted);
}

/* ============================================================
   7. Work. Editorial masonry.
   ============================================================ */

.ci-grid-work {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sp-md);
}

.ci-grid-work > * {
	grid-column: span 2;
}

.ci-grid-work > *:nth-child(6n + 1) {
	grid-column: span 4;
}

.ci-grid-work > *:nth-child(6n + 4) {
	grid-column: span 4;
}

/* ============================================================
   8. Digital. Full bleed panel with a device stack.
   ============================================================ */

.ci-digital {
	position: relative;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
	background: var(--surface-alt);
	overflow: hidden;
	padding: clamp(32px, 5vw, 72px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

.ci-digital::before {
	content: "";
	position: absolute;
	left: -10%;
	bottom: -40%;
	width: 60%;
	aspect-ratio: 1;
	background: var(--grad-ink);
	filter: blur(110px);
	opacity: 0.26;
	border-radius: 50%;
	pointer-events: none;
}

.ci-digital > * {
	position: relative;
	z-index: 2;
}

.ci-digital__title {
	font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
	max-width: 14ch;
}

.ci-digital__text {
	margin-top: var(--sp-md);
	color: var(--ink-muted);
	max-width: 46ch;
}

.ci-devices {
	position: relative;
	aspect-ratio: 4 / 3;
}

.ci-device {
	position: absolute;
	border-radius: var(--r-md);
	border: 1px solid var(--border);
	background: var(--bg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.ci-device--desktop {
	inset: 6% 8% 22% 0;
}

.ci-device--mobile {
	width: 26%;
	aspect-ratio: 9 / 19;
	right: 4%;
	bottom: 0;
	border-radius: var(--r-md);
}

.ci-device img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.ci-device__bar {
	display: flex;
	gap: 5px;
	padding: 9px 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.ci-device__bar i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--border);
}

/* ============================================================
   9. Testimonials. One large quote, not a row of cards.
   ============================================================ */

.ci-quotes {
	max-width: 62ch;
}

.ci-quote {
	display: none;
}

.ci-quote.is-active {
	display: block;
}

.ci-quote__text {
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.15rem);
	font-weight: 500;
	line-height: 1.28;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.ci-quote__who {
	display: flex;
	align-items: center;
	gap: var(--sp-sm);
	margin-top: var(--sp-lg);
}

.ci-quote__avatar {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--border);
}

.ci-quote__name {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink);
}

.ci-quote__meta {
	font-size: var(--fs-small);
	color: var(--ink-muted);
}

.ci-quotes__nav {
	display: flex;
	gap: 10px;
	margin-top: var(--sp-lg);
}

.ci-quotes__dot {
	width: 34px;
	height: 24px;
	/* The bar reads as 4px; the rest is transparent hit area so the control
	   still meets the minimum touch target. */
	padding: 10px 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ci-quotes__dot::before {
	content: "";
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--border);
	transition: background var(--t-fast) var(--ease);
}

.ci-quotes__dot[aria-selected="true"]::before {
	background: var(--accent);
}

/* ============================================================
   10. Closing call to action. Full bleed ink wash.
   ============================================================ */

.ci-cta {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
	background: var(--surface);
	padding: clamp(40px, 6vw, 88px);
	text-align: center;
}

.ci-cta::before {
	content: "";
	position: absolute;
	inset: -60% -10% auto -10%;
	height: 160%;
	background: var(--grad-ink);
	filter: blur(120px);
	opacity: 0.24;
	pointer-events: none;
}

.ci-cta > * {
	position: relative;
	z-index: 2;
}

.ci-cta__title {
	font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem);
	max-width: 18ch;
	margin-inline: auto;
}

.ci-cta__text {
	margin-top: var(--sp-md);
	margin-inline: auto;
	max-width: 52ch;
	color: var(--ink-muted);
	font-size: var(--fs-lead);
}

.ci-cta .ci-actions {
	margin-top: var(--sp-lg);
	justify-content: center;
}

/* ============================================================
   Inner page hero
   ============================================================ */

/* The header is fixed, so its height is added to the top padding rather than
   being spacing in its own right. The clamp on top of it is the actual gap the
   reader sees between the header and the page title. */
.ci-page-hero {
	position: relative;
	padding-block: calc(var(--header-h) + clamp(36px, 4vw, 64px)) clamp(32px, 4vw, 64px);
	overflow: hidden;
}

.ci-page-hero::before {
	content: "";
	position: absolute;
	top: -50%;
	left: 40%;
	width: 70%;
	aspect-ratio: 1;
	background: var(--grad-ink);
	filter: blur(130px);
	opacity: 0.22;
	border-radius: 50%;
	pointer-events: none;
}

.ci-page-hero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: end;
}

.ci-page-hero__title {
	max-width: 16ch;
}

.ci-page-hero__text {
	color: var(--ink-muted);
	font-size: var(--fs-lead);
	max-width: 52ch;
}

/* ============================================================
   Service page
   ============================================================ */

.ci-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

.ci-split--reverse > *:first-child {
	order: 2;
}

.ci-split__media img {
	width: 100%;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
}

.ci-featurelist {
	display: grid;
	gap: var(--sp-sm);
	list-style: none;
	padding: 0;
	margin-top: var(--sp-lg);
}

.ci-featurelist li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--ink-muted);
}

.ci-featurelist svg {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 3px;
	color: var(--accent);
}

.ci-specs {
	display: grid;
	gap: 0;
	margin-top: var(--sp-lg);
	border-top: 1px solid var(--border-soft);
}

.ci-specs div {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-md);
	padding: 13px 0;
	border-bottom: 1px solid var(--border-soft);
	font-size: var(--fs-small);
}

.ci-specs dt {
	color: var(--ink-muted);
	margin: 0;
}

.ci-specs dd {
	margin: 0;
	color: var(--ink);
	font-weight: 700;
	text-align: right;
}

/* Stock tiers and product children: alternating rows, not a card grid. */
.ci-tiers {
	display: grid;
	gap: var(--sp-xl);
}

/* Every row keeps its image in the same column and both columns share one
   height, so the list reads as a consistent table rather than a zigzag. */
.ci-tier {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: stretch;
}

/* A fixed frame rather than a bare image. The source shots range from wide
   desk photos to tall pull-up banners, so the frame owns the height and the
   image is fitted inside it whole. */
.ci-tier__media {
	position: relative;
	height: 100%;
	min-height: clamp(260px, 28vw, 400px);
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	overflow: hidden;
}

/* The image is taken out of the height calculation on purpose. Left in flow it
   would set the row height from its own aspect ratio, and one tall pull-up
   banner shot stretched its row to nearly three times the others. Pinned to
   the frame instead, the row height comes from the text column and the floor
   above, and object-fit fits the whole image inside whatever that height is. */
.ci-tier__media > img,
.ci-tier__media > .ci-work__placeholder {
	position: absolute;
	top: var(--sp-md);
	left: var(--sp-md);
	/* An absolutely positioned replaced element ignores its insets when width
	   and height are auto, so the box is stated explicitly instead. */
	width: calc(100% - var(--sp-md) * 2);
	height: calc(100% - var(--sp-md) * 2);
	/* contain: fitted whole inside the frame, nothing cropped. */
	object-fit: contain;
	object-position: center;
	border: 0;
	border-radius: var(--r-sm);
}

.ci-tier__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.ci-tier__title {
	font-size: clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
}

.ci-tier__text {
	margin-top: var(--sp-sm);
	color: var(--ink-muted);
}

/* ============================================================
   About and contact
   ============================================================ */

/* Two bands, not two columns. The portrait sits beside the short intro only,
   which is roughly its own height, so nothing is left stranded under it. The
   longer story runs full width below at a readable measure. */
.ci-founder {
	display: grid;
	grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}

.ci-founder__media {
	position: relative;
	/* Own stacking context, so the offset frame below stays behind the photo
	   instead of dropping behind the section itself. */
	z-index: 0;
	margin: 0;
}

.ci-founder__media img {
	display: block;
	width: 100%;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
}

.ci-founder__media::after {
	content: "";
	position: absolute;
	inset: auto -14px -14px auto;
	width: 62%;
	height: 62%;
	border: 1px solid var(--accent);
	border-radius: var(--r-lg);
	opacity: 0.35;
	z-index: -1;
}

.ci-founder__name {
	font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.4rem);
	margin-top: 2px;
}

.ci-founder__role {
	margin-top: 6px;
	color: var(--ink-muted);
	font-size: var(--fs-small);
}

.ci-founder__lead {
	margin-top: var(--sp-md);
	padding-top: var(--sp-md);
	border-top: 1px solid var(--border-soft);
}

.ci-founder__lead > *:first-child {
	margin-top: 0;
}

/* The story band. A little wider than the default measure because it is the
   only column on the row, but still short enough to read comfortably. */
.ci-about__story {
	max-width: 72ch;
}

.ci-about__story > *:first-child {
	margin-top: 0;
}

.ci-about__story h2 {
	margin-top: var(--sp-xl);
}

.ci-about__story h2:first-child {
	margin-top: 0;
}

.ci-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
}

.ci-contact__panel {
	display: grid;
	gap: var(--sp-md);
	padding: var(--sp-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}

.ci-contact__item {
	display: grid;
	gap: 4px;
	padding-bottom: var(--sp-md);
	border-bottom: 1px solid var(--border-soft);
}

.ci-contact__item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ci-contact__label {
	font-size: var(--fs-kicker);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-family: var(--font-display);
	font-weight: 700;
}

.ci-contact__value {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
}

a.ci-contact__value:hover {
	color: var(--accent);
}

.ci-map {
	margin-top: var(--sp-lg);
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	filter: saturate(0.65) contrast(1.05);
}

.ci-map iframe {
	width: 100%;
	height: 340px;
	border: 0;
	display: block;
}

/* ============================================================
   Empty state
   ============================================================ */

.ci-empty {
	padding: var(--sp-xl) var(--sp-lg);
	border: 1px dashed var(--border);
	border-radius: var(--r-lg);
	text-align: center;
	color: var(--ink-muted);
}

.ci-empty h3 {
	color: var(--ink);
	margin-bottom: var(--sp-xs);
}

/* ============================================================
   Pagination
   ============================================================ */

.ci-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: var(--sp-xl);
}

.ci-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: 12px;
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	color: var(--ink-muted);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--fs-small);
}

.ci-pagination .page-numbers:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.ci-pagination .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-ink);
}

/* ============================================================
   Responsive. Every multi column layout declares its collapse.
   ============================================================ */

/* Between tablet and full desktop the hero keeps its split, so the display
   size has to come down or the headline runs past two lines in a narrower
   column. */
@media (max-width: 1200px) {
	:root {
		--fs-display: clamp(2.2rem, 0.6rem + 3.4vw, 3rem);
	}
}

@media (max-width: 1100px) {
	.ci-bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ci-bento > *:nth-child(1) {
		grid-column: span 2;
		grid-row: auto;
	}

	.ci-bento > *:nth-child(2) {
		grid-column: span 2;
	}

	.ci-bento > *:nth-child(3),
	.ci-bento > *:nth-child(4) {
		grid-column: span 1;
	}

	.ci-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-lg) var(--sp-md);
	}

	.ci-process::before {
		display: none;
	}

	.ci-step {
		border-top: 2px solid var(--border);
		padding-top: var(--sp-md);
	}

	.ci-step::before {
		top: -7px;
	}
}

@media (max-width: 980px) {
	.ci-hero {
		min-height: 0;
		padding-block: calc(var(--header-h) + var(--sp-lg)) var(--sp-xl);
	}

	.ci-hero__inner {
		grid-template-columns: 1fr;
		gap: var(--sp-xl);
	}

	.ci-hero__title {
		max-width: 18ch;
	}

	.ci-stage {
		max-width: 520px;
		margin-inline: auto;
		width: 100%;
	}

	.ci-page-hero__inner,
	.ci-split,
	.ci-tier,
	.ci-why,
	.ci-digital,
	.ci-founder,
	.ci-contact {
		grid-template-columns: 1fr;
	}

	.ci-split--reverse > *:first-child {
		order: 0;
	}

	.ci-tier__media {
		min-height: clamp(220px, 52vw, 320px);
	}

	.ci-why__media {
		max-width: 560px;
	}

	.ci-founder__media {
		max-width: 420px;
	}

	.ci-stat {
		left: auto;
		right: 0;
		bottom: -6%;
	}

	.ci-trust__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ci-trust__list li:nth-child(4) {
		border-left: 0;
		padding-left: 0;
	}
}

/* Two up rather than three: below this width a third of the row leaves the
   product label and its image too cramped to read as premium. */
@media (max-width: 900px) {
	.ci-products,
	.ci-grid-work {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ci-products > *,
	.ci-grid-work > * {
		grid-column: span 1 !important;
	}

	.ci-product:first-child,
	.ci-product:nth-child(2) {
		min-height: 260px;
	}
}

@media (max-width: 760px) {
	.ci-bento {
		grid-template-columns: 1fr;
	}

	.ci-bento > * {
		grid-column: span 1 !important;
	}

	.ci-bento > *:nth-child(2) {
		flex-direction: column;
	}

	.ci-bento > *:nth-child(2) .ci-card__media {
		flex: none;
		aspect-ratio: 16 / 9;
	}

	.ci-why__list {
		grid-template-columns: 1fr;
	}

	.ci-stat {
		position: static;
		margin-top: var(--sp-md);
		max-width: none;
	}
}

@media (max-width: 520px) {
	.ci-trust__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ci-trust__list li {
		border-left: 0;
		padding-left: 0;
	}

	.ci-process {
		grid-template-columns: 1fr;
	}

	.ci-products,
	.ci-grid-work {
		grid-template-columns: 1fr;
	}

	.ci-actions .ci-btn {
		width: 100%;
		justify-content: center;
	}
}

/* Product name chips under a service pillar. */
.ci-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: var(--sp-md);
	padding: 0;
	list-style: none;
}

.ci-taglist a {
	display: block;
	padding: 8px 15px;
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	color: var(--ink-muted);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}

.ci-taglist a:hover {
	border-color: var(--accent);
	background: var(--accent-soft);
	color: var(--accent);
}

/* Project detail */
.ci-project__hero {
	margin: 0 0 var(--sp-xl);
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--border);
}

.ci-project__hero img {
	width: 100%;
}

.ci-project__body {
	align-items: start;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
}

@media (max-width: 980px) {
	.ci-project__body {
		grid-template-columns: 1fr;
	}
}

.ci-formwrap {
	margin-top: var(--sp-lg);
	padding: var(--sp-lg);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
}

.ci-why__list--wide {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 0;
}

@media (max-width: 900px) {
	.ci-why__list--wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.ci-why__list--wide {
		grid-template-columns: 1fr;
	}

	.ci-formwrap {
		padding: var(--sp-md);
	}
}

/* ============================================================
   Editor owned pages
   ============================================================ */

/* When Elementor or the block editor supplies the page body, it arrives with
   its own container and spacing. The theme only provides the room under the
   fixed header and lets that content run at whatever width it was built to. */
.ci-editor-page {
	padding-top: var(--header-h);
}

.ci-editor-page > .elementor {
	width: 100%;
}

/* ============================================================
   Elementor built pages
   ------------------------------------------------------------
   Structure and content stay editable in Elementor. These rules
   only supply what the Elementor panel cannot express: the
   floating hero composition, the fitted image boxes and the
   process spine. Add the matching CSS class to a container or
   widget in Elementor and it picks the treatment up.
   ============================================================ */

/* ---------- Hero stage: three frames floating over the wash ---------- */

.ci-el-stage {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
}

.ci-el-stage::before {
	content: "";
	position: absolute;
	inset: 8%;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: radial-gradient(circle at 30% 25%, rgba(25, 212, 240, 0.14), transparent 62%);
}

.ci-el-stage > .elementor-element {
	position: absolute;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid rgba(236, 239, 251, 0.1);
	box-shadow: var(--shadow-lg);
	padding: clamp(6px, 0.7vw, 12px);
}

.ci-el-stage > .elementor-element img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: var(--r-sm);
}

/* A frame holding several shots: they stack, and one is shown at a time. The
   first carries .is-active from the markup, so a frame still shows work when
   scripts never run. */
/* Elementor sets its own transition on every element, and it wins the cascade
   here, so the cross fade has to be forced or the shots swap instantly. */
.ci-el-stage .ci-el-frame > .elementor-element {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 900ms var(--ease), transform 1600ms var(--ease) !important;
}

.ci-el-stage .ci-el-frame > .elementor-element.is-active {
	opacity: 1;
	transform: none;
}

.ci-el-frame > .elementor-element,
.ci-el-frame > .elementor-element .elementor-widget-container,
.ci-el-frame > .elementor-element figure {
	height: 100%;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ci-el-stage .ci-el-frame > .elementor-element {
		transition: none !important;
		transform: none;
	}
}

.ci-el-stage > .elementor-element:nth-child(1) {
	width: 40%;
	aspect-ratio: 3 / 4;
	right: 3%;
	top: 8%;
	transform: rotate(5deg);
	z-index: 2;
}

.ci-el-stage > .elementor-element:nth-child(2) {
	width: 46%;
	aspect-ratio: 16 / 10;
	left: 4%;
	top: 30%;
	transform: rotate(-7deg);
	z-index: 3;
}

.ci-el-stage > .elementor-element:nth-child(3) {
	width: 32%;
	aspect-ratio: 2 / 3;
	right: 16%;
	bottom: 0;
	transform: rotate(-3deg);
	z-index: 4;
}

/* ---------- Cards: fitted image box above the copy ---------- */

.ci-el-card {
	transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.ci-el-card:hover {
	transform: translateY(-4px);
	border-color: var(--accent) !important;
}

.ci-el-card > .elementor-widget-image {
	background: var(--surface-alt);
	border-radius: var(--r-sm);
	padding: var(--sp-sm);
	overflow: hidden;
}

.ci-el-card > .elementor-widget-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	/* Fitted, never cropped, never enlarged past its own size. */
	object-fit: contain;
	object-position: center;
}

.ci-el-card--lead > .elementor-widget-image img {
	aspect-ratio: 16 / 11;
}

/* ---------- Trust strip: hairline dividers, not boxes ---------- */

.ci-el-trust > .elementor-element {
	border-left: 1px solid var(--border-soft);
	padding-left: var(--sp-md);
}

.ci-el-trust > .elementor-element:first-child {
	border-left: 0;
	padding-left: 0;
}

/* ---------- Process: one ink spine across the top ---------- */

.ci-el-steps {
	position: relative;
	padding-top: var(--sp-lg);
}

.ci-el-steps::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--grad-ink);
}

.ci-el-steps > .elementor-element {
	position: relative;
}

.ci-el-steps > .elementor-element::before {
	content: "";
	position: absolute;
	top: calc(var(--sp-lg) * -1 - 5px);
	left: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bg);
	border: 2px solid var(--accent);
}

/* Outlined step numeral, matching the coded design. */
.ci-el-stepnum .elementor-heading-title {
	color: transparent !important;
	-webkit-text-stroke: 1px var(--border);
}

@media (max-width: 900px) {
	.ci-el-trust > .elementor-element {
		border-left: 0;
		padding-left: 0;
	}

	.ci-el-steps::before {
		display: none;
	}

	.ci-el-steps > .elementor-element::before {
		display: none;
	}
}

/* Portrait with the offset accent frame, as the coded About page had. */
.ci-el-portrait {
	position: relative;
	z-index: 0;
}

.ci-el-portrait::after {
	content: "";
	position: absolute;
	inset: auto -14px -14px auto;
	width: 62%;
	height: 62%;
	border: 1px solid var(--accent);
	border-radius: var(--r-lg);
	opacity: 0.35;
	z-index: -1;
}

/* Long form copy inside an Elementor page keeps a readable measure. */
.ci-el-prose .elementor-widget-container {
	max-width: 72ch;
}

.ci-el-prose h2 {
	color: var(--ink);
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 1.4rem + 1.6vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: var(--sp-xl) 0 var(--sp-sm);
}

.ci-el-prose h2:first-child {
	margin-top: 0;
}

.ci-el-prose ul {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--sp-xs);
}

.ci-el-prose li {
	position: relative;
	padding-left: 1.6rem;
}

.ci-el-prose li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.66em;
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--accent);
}

/* The enquiry form sits in its own panel, as it did in the coded contact page. */
.ci-el-formwrap {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--sp-lg);
}

@media (max-width: 620px) {
	.ci-el-formwrap {
		padding: var(--sp-md);
	}
}

/* Map frame */
.ci-el-map iframe {
	width: 100%;
	height: 320px;
	border: 0;
	display: block;
	border-radius: var(--r-lg);
}

.ci-el-map {
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid var(--border);
	filter: saturate(0.65) contrast(1.05);
}

/* ---------- Standalone shot on a single: a frame, so a small file still
     reads as a deliberate picture instead of drifting in open space ---------- */

.ci-el-shot {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	padding: var(--sp-md);
	overflow: hidden;
}

.ci-el-shot img {
	display: block;
	width: 100%;
	/* Landscape: these are product and job shots, and a squarer frame just
	   banks empty surface above and below a wide photo. */
	aspect-ratio: 16 / 10;
	/* Fitted, never cropped. */
	object-fit: contain;
	object-position: center;
}

@media (max-width: 640px) {
	.ci-el-shot {
		padding: var(--sp-sm);
	}
}