/* ==========================================================================
   Celia Noire — Single Service
   Own namespace (cn-service-single__*), independent from Selected Work's
   single template — that file and its stylesheet are never edited from
   here. The lightbox rules below are intentionally a copy of the ones in
   work-single.css: the two stylesheets never load on the same page (a post
   is either cn_work or cn_service), so the duplication carries no risk of
   conflicting rules, and it keeps this file self-contained.
   ========================================================================== */

/* No page-level bottom padding — every section below (video, details, final
   CTA) already carries its own vertical rhythm, so whichever one ends up
   last closes the page on its own without stacking a second, redundant
   block of empty space on top before the footer. */

/* --------------------------------------------------------------------------
   Hero — cover image, then title/subtitle/description below it
   -------------------------------------------------------------------------- */

.cn-service-single__hero-media {
	--cn-focal-d: center center;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: clamp(2.5rem, 6vw, 4rem);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}

.cn-service-single__hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--cn-focal-d);
}

.cn-service-single__intro {
	max-width: 46rem;
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.cn-service-single__title {
	margin: 0 0 0.75rem;
	font-family: var(--cn-font-display);
	font-weight: 400;
	font-size: clamp(2rem, 2.2vw + 1.3rem, 3.25rem);
	line-height: 1.1;
	color: var(--cn-fg-strong);
}

.cn-service-single__subtitle {
	max-width: 40rem;
	margin: 0 0 1rem;
	font-family: var(--cn-font-body);
	font-size: 1.1875em;
	font-weight: 500;
	line-height: 1.6;
	/* Dark neutral, not the accent gold — gold/champagne stays reserved for
	   eyebrows and small labels, per the brand palette rules. */
	color: var(--cn-fg);
}

.cn-service-single__lede {
	max-width: 40rem;
	margin: 0;
	font-size: var(--cn-text-sm);
	line-height: 1.7;
	color: var(--cn-fg);
}

.cn-service-single__hero-eyebrow {
	margin-bottom: 0.9rem;
}

.cn-service-single__hero-cta {
	margin-top: clamp(1.5rem, 3vw, 2rem);
}

/* Luxury Advertising Videos only (post ID 22) — a slightly larger, tighter
   lede for this one service's description. Scoped to the post's own body
   class rather than touching --cn-text-sm, so every other service page's
   description stays exactly as it was. */
.postid-22 .cn-service-single__lede {
	font-size: 0.875rem;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   Reference → Campaign — the transformation story: a quiet 2x2 grid of the
   raw input material, a thin arrow, then one large result photo. No card:
   no border, no shadow, no radius, no background box of its own — it sits
   directly on the page's own ivory surface, the same as every other block
   in this template. The reference grid shares the campaign gallery's own
   lightbox (click to view larger), but stays plainly secondary next to the
   large result image through scale alone.
   -------------------------------------------------------------------------- */

.cn-service-single__reference-wrap {
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* Scoped to this section only — .cn-section-head/.cn-lede stay left-aligned
   everywhere else on the site (Services, Packages, About, and this template's
   own gallery/film heads below). */
.cn-service-single__reference-wrap .cn-section-head {
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.cn-service-single__reference-wrap .cn-section-head .cn-lede {
	max-width: 625px;
	margin-inline: auto;
}

.cn-service-single__transform {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 2.5rem);
}

.cn-service-single__reference-grid {
	display: grid;
	/* ~12% larger than the previous 130–240px tiles — a stronger, more
	   balanced left block, while the result image still reads as dominant
	   because it's one undivided photo against four smaller ones. */
	grid-template-columns: repeat(2, minmax(145px, 270px));
	gap: clamp(1.375rem, 3vw, 2rem);
}

.cn-service-single__reference-item {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cn-service-single__reference-trigger {
	display: block;
	width: 100%;
	cursor: zoom-in;
}

.cn-service-single__reference-image {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__reference-trigger:hover .cn-service-single__reference-image,
.cn-service-single__reference-trigger:focus-visible .cn-service-single__reference-image {
	opacity: 0.88;
}

.cn-service-single__reference-caption {
	font-family: var(--cn-font-body);
	font-size: var(--cn-text-xs);
	letter-spacing: var(--cn-tracking-wide);
	text-transform: uppercase;
	color: var(--cn-warm-gray);
}

/* Thin champagne/gold arrow — a mark, not an illustration. Rotates to point
   down when the layout stacks below 900px. */
.cn-service-single__transform-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--cn-gold-deep);
	opacity: 0.8;
	/* Points down while the grid/arrow/result stack vertically; the 900px
	   breakpoint below turns it back to pointing right once they sit
	   side by side. */
	transform: rotate(90deg);
}

.cn-service-single__transform-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	width: 100%;
	max-width: 26rem;
}

.cn-service-single__transform-result-media {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
	cursor: zoom-in;
}

.cn-service-single__transform-result-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__transform-result-media:hover .cn-service-single__transform-result-image,
.cn-service-single__transform-result-media:focus-visible .cn-service-single__transform-result-image {
	opacity: 0.9;
}

.cn-service-single__transform-result-label {
	/* .cn-eyebrow already supplies the small, uppercase, letter-spaced,
	   accent-coloured treatment used for every label like this on the site —
	   this only trims its margin for a tight caption directly under a photo. */
	margin: 0;
}

@media (min-width: 900px) {
	.cn-service-single__transform {
		flex-direction: row;
		/* Centres the shorter reference grid against the taller result
		   image, instead of pinning both to the same top edge — the pairing
		   reads as one balanced row rather than two mismatched columns. */
		align-items: center;
		justify-content: center;
		gap: clamp(2rem, 4vw, 3.5rem);
	}

	.cn-service-single__transform-arrow {
		transform: none;
	}

	.cn-service-single__transform-result {
		max-width: 34rem;
	}
}

/* --------------------------------------------------------------------------
   Gallery — masonry columns, each photo keeps its own ratio
   -------------------------------------------------------------------------- */

.cn-service-single__gallery-wrap {
	/* Generous top space so the shift from the smaller reference grid to the
	   full campaign gallery reads as a deliberate beat, not a jump. */
	padding-top: clamp(2rem, 5vw, 3.5rem);
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.cn-service-single__gallery {
	columns: 1;
	column-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.cn-service-single__gallery-item {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	break-inside: avoid;
}

.cn-service-single__gallery-trigger {
	display: block;
	width: 100%;
	cursor: zoom-in;
}

.cn-service-single__gallery-image {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__gallery-trigger:hover .cn-service-single__gallery-image,
.cn-service-single__gallery-trigger:focus-visible .cn-service-single__gallery-image {
	opacity: 0.88;
}

@media (min-width: 768px) {
	.cn-service-single__gallery {
		columns: 2;
	}
}

/* --------------------------------------------------------------------------
   Campaign film — fixed 16:9, poster first, plays only once the visitor
   presses Play. Unlike Selected Work's case-study video, there's no
   portrait variant here — the brief is a fixed 16:9 frame.
   -------------------------------------------------------------------------- */

.cn-service-single__video-wrap {
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.cn-service-single__video {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--cn-noir);
}

.cn-service-single__video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.cn-service-single__video-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cn-service-single__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(10, 10, 10, 0.2);
	transition: background-color var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__play:hover,
.cn-service-single__play:focus-visible {
	background: rgba(10, 10, 10, 0.34);
}

.cn-service-single__play[hidden] {
	display: none;
}

.cn-service-single__play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding-left: 3px; /* optical centring for the play triangle */
	color: var(--cn-ivory);
	border: 1px solid rgba(250, 246, 241, 0.75);
	border-radius: 50%;
	transition: border-color var(--cn-dur-hover) var(--cn-ease),
	            transform var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__play:hover .cn-service-single__play-icon,
.cn-service-single__play:focus-visible .cn-service-single__play-icon {
	border-color: var(--cn-gold);
	transform: scale(1.06);
}

.cn-service-single__controls {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 0.9rem 1.1rem;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0));
}

/* The [hidden] attribute needs the extra specificity here — a bare class
   selector alone ties with the UA stylesheet's [hidden] rule and, on
   cascade order, would otherwise lose to this file's own display:flex. */
.cn-service-single__controls[hidden] {
	display: none;
}

.cn-service-single__control {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--cn-ivory);
	transition: color var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__control:hover,
.cn-service-single__control:focus-visible {
	color: var(--cn-gold);
}

/* --------------------------------------------------------------------------
   Second Creative Direction — an optional, wholly separate reinterpretation
   of the same product, on its own noir surface for a deliberate visual
   break from the ivory campaign above and below it (never adjacent to
   another dark section — Campaign Film and Details/Final CTA on either
   side both stay ivory). Text/eyebrow colours come for free from
   .cn-surface--noir's own custom properties, nothing new to set here.

   Gallery and video are intentionally their own namespace, duplicating the
   main gallery/film rules above rather than sharing their classes — same
   reasoning as Selected Work vs. this template's own video player: each
   block stays independently tunable without the other moving underneath it.
   -------------------------------------------------------------------------- */

/* No trailing margin-bottom on either wrap — whichever of gallery/video ends
   up last, .cn-section's own generous padding-bottom on the parent
   <section> already closes the block, so a static trailing margin here
   would just double up on top of it (gallery-only and video-only are both
   valid, independent states — either can be the true last child). The gap
   between them, when both exist, comes from the adjacent-sibling rule
   below instead. */
.cn-service-single__second-direction-gallery-wrap + .cn-service-single__second-direction-video-wrap {
	margin-top: clamp(3rem, 6vw, 5rem);
}

.cn-service-single__second-direction-gallery {
	columns: 1;
	column-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.cn-service-single__second-direction-gallery-item {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	break-inside: avoid;
}

.cn-service-single__second-direction-gallery-trigger {
	display: block;
	width: 100%;
	cursor: zoom-in;
}

.cn-service-single__second-direction-gallery-image {
	display: block;
	width: 100%;
	height: auto;
	transition: opacity var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__second-direction-gallery-trigger:hover .cn-service-single__second-direction-gallery-image,
.cn-service-single__second-direction-gallery-trigger:focus-visible .cn-service-single__second-direction-gallery-image {
	opacity: 0.88;
}

@media (min-width: 768px) {
	.cn-service-single__second-direction-gallery {
		columns: 2;
	}
}

.cn-service-single__second-direction-video {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--cn-noir);
}

.cn-service-single__second-direction-video-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.cn-service-single__second-direction-video-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cn-service-single__second-direction-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(10, 10, 10, 0.2);
	transition: background-color var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__second-direction-play:hover,
.cn-service-single__second-direction-play:focus-visible {
	background: rgba(10, 10, 10, 0.34);
}

.cn-service-single__second-direction-play[hidden] {
	display: none;
}

.cn-service-single__second-direction-play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding-left: 3px; /* optical centring for the play triangle */
	color: var(--cn-ivory);
	border: 1px solid rgba(250, 246, 241, 0.75);
	border-radius: 50%;
	transition: border-color var(--cn-dur-hover) var(--cn-ease),
	            transform var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__second-direction-play:hover .cn-service-single__second-direction-play-icon,
.cn-service-single__second-direction-play:focus-visible .cn-service-single__second-direction-play-icon {
	border-color: var(--cn-gold);
	transform: scale(1.06);
}

.cn-service-single__second-direction-controls {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 0.9rem 1.1rem;
	background: linear-gradient(to top, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0));
}

.cn-service-single__second-direction-controls[hidden] {
	display: none;
}

.cn-service-single__second-direction-control {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--cn-ivory);
	transition: color var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__second-direction-control:hover,
.cn-service-single__second-direction-control:focus-visible {
	color: var(--cn-gold);
}

/* --------------------------------------------------------------------------
   Details — deliverables / related packages / CTA, only the pieces that
   actually have content. Own optional surface colour (Raspored → service_bg).
   -------------------------------------------------------------------------- */

.cn-service-single__details {
	padding-block: var(--cn-section-y);
}

.cn-service-single__details-inner {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 5vw, 3rem);
}

.cn-service-single__details-lists {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 768px) {
	.cn-service-single__details-lists--split {
		grid-template-columns: 1fr 1fr;
	}
}

.cn-service-single__deliverables .cn-eyebrow,
.cn-service-single__packages .cn-eyebrow {
	margin-bottom: 1rem;
}

.cn-service-single__list {
	display: flex;
	flex-direction: column;
}

.cn-service-single__list li {
	padding-block: 0.7rem;
	border-top: 1px solid var(--cn-rule);
	font-size: var(--cn-text-sm);
	line-height: 1.6;
	color: var(--cn-fg);
}

.cn-service-single__list li:last-child {
	border-bottom: 1px solid var(--cn-rule);
}

.cn-service-single__list--packages li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.cn-service-single__package-name {
	color: var(--cn-fg-strong);
}

.cn-service-single__package-price {
	flex-shrink: 0;
	color: var(--cn-accent);
	white-space: nowrap;
}

.cn-service-single__cta {
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Intro — short optional editorial block right under the hero header, before
   any of the media sections below it.
   -------------------------------------------------------------------------- */

.cn-service-single__intro-body-wrap {
	margin-bottom: clamp(3rem, 6vw, 5rem);
}

.cn-service-single__intro-body {
	max-width: 46rem;
}

.cn-service-single__intro-body h2 {
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   What We Create — short feature list. Deliberately text-only: no icons, no
   coloured tiles, per the brand's own "no generic agency-style icons / no
   colourful template graphics" rule. Separation comes from a thin rule and
   generous whitespace, the same restrained device used across the site.
   -------------------------------------------------------------------------- */

.cn-service-single__features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}

.cn-service-single__feature {
	padding-top: 1.5rem;
	border-top: 1px solid var(--cn-rule);
}

.cn-service-single__feature-title {
	margin-bottom: 0.6rem;
	font-family: var(--cn-font-display);
	font-weight: 400;
	font-size: var(--cn-text-h3);
	color: var(--cn-fg-strong);
}

.cn-service-single__feature-text {
	font-size: var(--cn-text-sm);
	line-height: 1.7;
	color: var(--cn-fg);
}

@media (max-width: 899px) {
	.cn-service-single__features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.cn-service-single__features-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Selected Identity Work — portfolio grid, built to grow. Each card can
   carry its own supporting gallery (logo, type, palette, applications),
   shown as a row of small thumbnails opening in the shared lightbox.
   -------------------------------------------------------------------------- */

.cn-service-single__identity-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
}

.cn-service-single__identity-card-media {
	margin-bottom: 1.25rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.06);
}

.cn-service-single__identity-card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cn-service-single__identity-card-tag {
	display: inline-block;
	margin-bottom: 0.6rem;
}

.cn-service-single__identity-card-title {
	margin-bottom: 0.3rem;
	font-family: var(--cn-font-display);
	font-weight: 400;
	font-size: var(--cn-text-h3);
	color: var(--cn-fg-strong);
}

.cn-service-single__identity-card-category {
	display: block;
	margin-bottom: 0.75rem;
	font-size: var(--cn-text-xs);
	letter-spacing: var(--cn-tracking-wide);
	text-transform: uppercase;
	color: var(--cn-warm-gray);
}

.cn-service-single__identity-card-text {
	max-width: 40ch;
	font-size: var(--cn-text-sm);
	line-height: 1.7;
	color: var(--cn-fg);
}

.cn-service-single__identity-card-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.1rem;
}

.cn-service-single__identity-card-gallery-item {
	width: 64px;
	height: 64px;
}

.cn-service-single__identity-card-gallery-trigger {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	cursor: pointer;
}

.cn-service-single__identity-card-gallery-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--cn-dur-hover) var(--cn-ease);
}

.cn-service-single__identity-card-gallery-trigger:hover .cn-service-single__identity-card-gallery-image,
.cn-service-single__identity-card-gallery-trigger:focus-visible .cn-service-single__identity-card-gallery-image {
	transform: scale(1.06);
}

@media (max-width: 699px) {
	.cn-service-single__identity-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Process — numbered steps. Number is generated in the template (loop
   index), never stored, so it can never drift out of sync with the list.
   -------------------------------------------------------------------------- */

.cn-service-single__process-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(2rem, 4vw, 2.5rem);
}

.cn-service-single__process-number {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--cn-font-display);
	font-style: italic;
	font-size: clamp(1.5rem, 2vw, 2rem);
	color: var(--cn-accent);
}

.cn-service-single__process-title {
	margin-bottom: 0.5rem;
	font-family: var(--cn-font-display);
	font-weight: 400;
	font-size: var(--cn-text-h3);
	color: var(--cn-fg-strong);
}

.cn-service-single__process-text {
	font-size: var(--cn-text-sm);
	line-height: 1.7;
	color: var(--cn-fg);
}

@media (max-width: 899px) {
	.cn-service-single__process-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.cn-service-single__process-list {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

/* --------------------------------------------------------------------------
   Final CTA — the closing block above the footer. Centred and narrow, same
   treatment as the homepage's own closing CTA (Newsletter), which is the
   site's established pattern for a quiet, editorial sign-off rather than a
   boxed marketing banner.
   -------------------------------------------------------------------------- */

.cn-service-single__final-cta-inner {
	max-width: 36rem;
	margin-inline: auto;
	text-align: center;
}

/* When Second Creative Direction is empty, Final CTA lands right after the
   Campaign Film video-wrap — its own bottom margin then stacks with this
   section's full --cn-section-y top padding into a bare ivory gap. Trim just
   that top padding for this one adjacency so the two blocks read as one
   balanced transition instead of doubling up. */
.cn-service-single__video-wrap + .cn-service-single__final-cta {
	padding-top: clamp(2.5rem, 5vw, 4rem);
}

.cn-service-single__final-cta-inner .cn-section-head {
	align-items: center;
	margin-bottom: 0;
	margin-inline: auto;
}

.cn-service-single__final-cta-inner .cn-lede {
	max-width: 32ch;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.cn-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cn-noir);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--cn-dur-bg) var(--cn-ease),
	            visibility var(--cn-dur-bg) var(--cn-ease);
}

.cn-lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.cn-lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	max-width: 100%;
	max-height: 100%;
	padding: clamp(1.5rem, 6vw, 4rem);
	transform: scale(0.97);
	transition: transform var(--cn-dur-bg) var(--cn-ease);
}

.cn-lightbox.is-open .cn-lightbox__stage {
	transform: scale(1);
}

.cn-lightbox__image {
	display: block;
	width: auto;
	height: auto;
	max-width: calc(100vw - 6rem);
	max-height: calc(100vh - 6rem);
	object-fit: contain;
	opacity: 0;
	transition: opacity var(--cn-dur-hover) var(--cn-ease);
}

.cn-lightbox__image.is-visible {
	opacity: 1;
}

.cn-lightbox__close,
.cn-lightbox__nav {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--cn-ivory);
	transition: color var(--cn-dur-hover) var(--cn-ease);
}

.cn-lightbox__close:hover,
.cn-lightbox__close:focus-visible,
.cn-lightbox__nav:hover,
.cn-lightbox__nav:focus-visible {
	color: var(--cn-gold);
}

.cn-lightbox__close {
	top: clamp(0.75rem, 3vw, 1.75rem);
	right: clamp(0.75rem, 3vw, 1.75rem);
}

.cn-lightbox__nav--prev {
	left: clamp(0.5rem, 2vw, 1.5rem);
}

.cn-lightbox__nav--next {
	right: clamp(0.5rem, 2vw, 1.5rem);
}

.cn-lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: clamp(1rem, 3vw, 1.75rem);
	transform: translateX(-50%);
	margin: 0;
	font-size: var(--cn-text-xs);
	letter-spacing: var(--cn-tracking-wide);
	color: rgba(250, 246, 241, 0.7);
}

@media (max-width: 599px) {
	.cn-lightbox__nav {
		width: 40px;
		height: 40px;
	}

	.cn-lightbox__nav--prev {
		left: 0.25rem;
	}

	.cn-lightbox__nav--next {
		right: 0.25rem;
	}
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

/* Small, restrained readability bumps at mobile widths only — desktop and
   tablet sizing above is untouched. Each selector is scoped to its own
   specific instance (not the shared .cn-lede/.cn-btn classes those elements
   also carry), so nothing else that reuses those same classes elsewhere on
   the site is affected. */
@media (max-width: 599px) {
	.cn-service-single__subtitle {
		font-size: 1.3em;
		line-height: 1.65;
	}

	.cn-service-single__lede {
		font-size: 1.0625em;
		line-height: 1.75;
	}

	.cn-service-single__reference-wrap .cn-section-head .cn-lede,
	.cn-service-single__second-direction-intro .cn-lede {
		font-size: 1.0625em;
		line-height: 1.75;
	}

	.cn-service-single__reference-caption {
		font-size: 0.75rem;
	}

	.cn-service-single__final-cta-inner .cn-btn {
		padding-block: 1.3em;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cn-lightbox,
	.cn-lightbox__stage,
	.cn-lightbox__image,
	.cn-service-single__play,
	.cn-service-single__play-icon,
	.cn-service-single__control,
	.cn-service-single__second-direction-play,
	.cn-service-single__second-direction-play-icon,
	.cn-service-single__second-direction-control {
		transition: none;
	}
}