@charset "utf-8";

/* ==========================================================================
   CamTalk - the three chapters between the ring and the closing scene.

   Everything here is inside a desktop-only media query, and the legacy
   blocks it replaces are hidden by the same query. Below 1001px not one
   declaration applies, so the existing mobile page is untouched.

   The composition is deliberately asymmetric: the counter escorts this whole
   stretch docked at the bottom centre, so headings, links and store buttons
   are kept out of that corridor and the wide, quiet half of each row is what
   passes underneath it.
   ========================================================================== */

.ctc-chapters {
	display: none;
}

/* ==========================================================================
   Shared by both profiles.

   These are the rules that decide what a card IS rather than how big it
   looks, so they belong to neither breakpoint. Leaving the aspect ratio and
   the media positioning inside the desktop query was a real bug: on a phone
   the frames had no ratio at all and every card sized itself to its own clip,
   giving a rail of 723, 1283, 783 and 783px tall cards.
   ========================================================================== */

@media screen {

	/* The project has no global border-box reset, so a container with
	   `width: 100%` and side padding ends up 44px wider than its parent and
	   the last store button is clipped off the right edge. Scoped to these
	   chapters, so nothing else on the site changes. */
	.ctc-chapters,
	.ctc-chapters *,
	.ctc-chapters *::before,
	.ctc-chapters *::after {
		box-sizing: border-box;
	}

	.ctc-card__frame {
		position: relative;
		aspect-ratio: 9 / 16;
		overflow: hidden;
		/* A <video> is composited on its own layer and Chromium does not
		   always apply an ancestor's overflow to it; clip-path is applied to
		   the layer itself, so a cropped entry cannot paint over the corner. */
		clip-path: inset(0 round 20px);
		contain: paint;
		isolation: isolate;
		background: #f2f2f5;
	}

	/* absolutely positioned so a cropped entry can be larger than the frame
	   and still be clipped by it - see applyCrop() in js/camtalk-chapters.js */
	.ctc-card__media {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}

@media screen and (min-width: 1001px) {

	/* the six blocks these chapters replace */
	.ct-legacy {
		display: none;
	}

	.ctc-chapters {
		display: block;
		position: relative;
		background-color: #fff;
		color: #1b1b20;
		overflow: hidden;   /* the ribbon runs wider than the page */

		--ctc-max: 1320px;
		--ctc-gutter: 4vw;
		--ctc-red: #cc0c0c;
		--ctc-pink: #ff3d76;
		--ctc-ink: #1b1b20;
		--ctc-muted: #6c6c78;
		--ctc-line: #ececf0;
		/* The bottom band the docked counter and its caption occupy.
		   The counter is now permanently in the three chapters rather than a
		   visitor that steps aside for them, so every chapter ends above this
		   band rather than only the last one. It is the counter's own
		   footprint - its gap from the bottom edge, its housing, the caption
		   standing over it and the bloom around all of it - not slack:
		   nothing empty is added, the counter is what fills it.

		   Measured on the running page rather than guessed: the block reaches
		   187px above the bottom edge at 1918x908 and 151px at 1440x900, so
		   the band is the taller of the two with a little air over it. */
		--ctc-counter-safe: 196px;
	}

	@media screen and (max-width: 1500px) {
		.ctc-chapters {
			--ctc-max: 1200px;
			--ctc-gutter: 3.4vw;
		}
	}

	.ctc-shell {
		position: relative;
		width: min(var(--ctc-max), calc(100% - var(--ctc-gutter) * 2));
		margin: 0 auto;
	}

	/* Korean breaks by word.
	 *
	 * css/common.css sets `li, menu { word-break: break-all }` globally, and
	 * the two points of chapter 2 are list items - which is why 영상통화 was
	 * being split across lines mid-word. `keep-all` is the convention the
	 * project already uses for Korean copy elsewhere; `overflow-wrap` keeps a
	 * genuinely unbreakable string (a URL, a long English word) from pushing
	 * the column wider than its container. */
	.ctc-chapters :is(h1, h2, h3, h4, p, li, a, span, div) {
		word-break: keep-all;
		overflow-wrap: break-word;
	}

	/* --- shared type ------------------------------------------------------ */

	.ctc-eyebrow {
		margin: 0 0 18px;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.16em;
		color: var(--ctc-red);
	}

	.ctc-title {
		margin: 0;
		/* the box hugs the text rather than filling its column: a heading
		   whose empty half reached into the counter's corridor would be
		   reported - and treated - as an overlap it never actually has */
		width: fit-content;
		max-width: 100%;
		font-size: clamp(40px, 3.45vw, 62px);
		font-weight: 800;
		line-height: 1.18;
		letter-spacing: -0.025em;
		color: var(--ctc-ink);
	}

	.ctc-title b {
		font-weight: 800;
		color: var(--ctc-red);
	}

	.ctc-lead {
		margin: 0;
		font-size: clamp(18px, 1.15vw, 21px);
		font-weight: 500;
		line-height: 1.65;
		color: var(--ctc-muted);
	}

	/* a link that reads as an action without being a heavy button */
	.ctc-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 12px 4px;
		font-size: 17px;
		font-weight: 700;
		color: var(--ctc-ink);
		text-decoration: none;
	}

	.ctc-link::after {
		content: '';
		position: absolute;
		left: 4px;
		right: 4px;
		bottom: 6px;
		height: 2px;
		background: var(--ctc-red);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.ctc-link:hover::after,
	.ctc-link:focus-visible::after {
		transform: scaleX(1);
	}

	.ctc-link .material-symbols-rounded {
		font-size: 22px;
		color: var(--ctc-red);
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.ctc-link:hover .material-symbols-rounded {
		transform: translateX(3px);
	}

	.ctc-link:focus-visible {
		outline: 2px solid var(--ctc-red);
		outline-offset: 4px;
		border-radius: 6px;
	}

	/* --- arrival ---------------------------------------------------------- */

	[data-ct-reveal] {
		opacity: 0;
		transform: translateY(22px);
		transition: opacity 0.62s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.62s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	[data-ct-reveal].is-in {
		opacity: 1;
		transform: none;
	}

	[data-ct-reveal][data-ct-delay="1"] { transition-delay: 0.08s; }
	[data-ct-reveal][data-ct-delay="2"] { transition-delay: 0.16s; }

	/* ======================================================================
	   CHAPTER 1 - meet a CamTalker
	   ====================================================================== */

	.ctc-ch--meet {
		position: relative;
		padding: 132px 0 var(--ctc-counter-safe);
	}

	/* the heading sits left, the lead and the two links sit right: the
	   bottom centre, where the counter rides, stays clear of both */
	.ctc-meet__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
		align-items: end;
		gap: 40px;
		padding-bottom: 54px;
	}

	.ctc-meet__aside {
		padding-bottom: 6px;
	}

	.ctc-meet__links {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 26px;
		margin: 18px 0 0;
	}

	/* --- the ribbon ------------------------------------------------------- */

	.ctc-ribbon {
		position: relative;
		/* wider than the page on purpose: the outer cards are meant to run
		   past the edges, and the vertical room lets a lifted card grow
		   without anything clipping it */
		width: 100%;
		padding: 26px 0 30px;
		overflow: hidden;
	}

	/* The edges fade into the page with two plain gradients rather than a
	   mask. A mask would put the whole ribbon - all twelve videos - on one
	   composited layer, which costs more and, worse, stops Chromium applying
	   each card's own overflow clip to the video inside it. The page behind
	   is white, so painting white over the edges is identical to masking. */
	.ctc-ribbon::before,
	.ctc-ribbon::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: 8%;
		z-index: 2;
		pointer-events: none;
	}

	.ctc-ribbon::before {
		left: 0;
		background: linear-gradient(90deg, #fff 8%, rgba(255, 255, 255, 0) 100%);
	}

	.ctc-ribbon::after {
		right: 0;
		background: linear-gradient(270deg, #fff 8%, rgba(255, 255, 255, 0) 100%);
	}

	.ctc-ribbon__track {
		display: flex;
		align-items: center;
		gap: 24px;
		width: max-content;
		padding-left: 24px;
		will-change: transform;
	}

	/* runs only while the block is on screen */
	.ctc-ribbon.is-running .ctc-ribbon__track {
		animation: ctc-ribbon-run var(--ctc-ribbon-time, 30s) linear infinite;
	}

	/* Paused under the pointer, and paused whenever keyboard focus is
	   anywhere in this chapter. The cards themselves are decorative and
	   aria-hidden, so they are deliberately not focusable - but a reader
	   tabbing to the two links beside them should not have to read against a
	   moving band. */
	.ctc-ribbon:hover .ctc-ribbon__track,
	.ctc-ribbon:focus-within .ctc-ribbon__track,
	.ctc-ch--meet:focus-within .ctc-ribbon__track {
		animation-play-state: paused;
	}

	@keyframes ctc-ribbon-run {
		from { transform: translate3d(0, 0, 0); }
		to   { transform: translate3d(calc(-1 * var(--ctc-ribbon-shift, 33.333%)), 0, 0); }
	}

	.ctc-card {
		flex: 0 0 auto;
		width: clamp(220px, 14.2vw, 272px);
		transform: translateY(var(--ctc-card-shift, 0));
		transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.ctc-card__frame {
		position: relative;
		aspect-ratio: 9 / 16;
		overflow: hidden;
		/* A <video> is composited on its own layer, and inside the masked
		   ribbon Chromium does not always apply an ancestor's overflow to it -
		   an oversized clip then paints straight over the card's top edge.
		   clip-path is applied to the layer itself, so it holds. */
		clip-path: inset(0 round 28px);
		border-radius: 28px;
		background: #f2f2f5;
		box-shadow:
			0 2px 6px rgba(24, 8, 20, 0.05),
			0 14px 34px rgba(24, 8, 20, 0.10);
		transition: box-shadow 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	/* absolutely positioned so a cropped entry can be larger than the frame
	   and still be clipped by it - see applyCrop() */
	.ctc-card__media {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.ctc-ribbon:hover .ctc-card:hover,
	.ctc-card:focus-within {
		transform: translateY(calc(var(--ctc-card-shift, 0px) - 10px)) scale(1.035);
	}

	.ctc-ribbon:hover .ctc-card:hover .ctc-card__frame,
	.ctc-card:focus-within .ctc-card__frame {
		box-shadow:
			0 3px 8px rgba(204, 12, 12, 0.10),
			0 22px 48px rgba(24, 8, 20, 0.17);
	}

	/* ======================================================================
	   CHAPTER 2 - from video to conversation
	   ====================================================================== */

	/* The tail used to be a full counter band, because a third chapter
	   followed and the counter really did come to rest over whatever ended
	   this one. It does not any more: this is the last chapter, and the
	   counter is on its way out of the dock across exactly this stretch. What
	   is left is the ordinary gap before the closing scene. */
	.ctc-ch--flow {
		position: relative;
		padding: 40px 0 40px;
	}

	/* Two things this profile does not take from the phone's composition:
	   the chip row, whose words are all in the points below anyway, and the
	   pictures and numbers that turn those points into cards. Wrapping the
	   text in .ctc-step__body is what lets the phone build a card out of it;
	   `display: contents` hands the same children back to this grid, so the
	   list is laid out exactly as it was before the wrapper existed. */
	.ctc-chips,
	.ctc-step__thumb,
	.ctc-step__num {
		display: none;
	}

	.ctc-step__body {
		display: contents;
	}

	/* A step that is not the current one is grey here, and a red word inside
	   grey type reads as a mistake. The red belongs to the phone's cards. */
	.ctc-step__title b {
		font-weight: inherit;
		color: inherit;
	}

	/* Three flat children, placed explicitly: the intro and the points stack
	   in the left column, the visual spans both rows on the right. The text
	   column is deliberately narrow and hard left, so its headings and links
	   never sit in the counter's corridor. */
	.ctc-flow {
		display: grid;
		grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
		grid-template-rows: auto auto;
		align-items: center;
		column-gap: clamp(48px, 5vw, 92px);
		row-gap: 0;
	}

	.ctc-flow__intro {
		grid-column: 1;
		grid-row: 1;
	}

	.ctc-flow .ctc-steps {
		grid-column: 1;
		grid-row: 2;
	}

	.ctc-flow__visual {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.ctc-flow__lead {
		margin: 22px 0 0;
		max-width: 30em;
	}

	.ctc-steps {
		list-style: none;
		margin: 44px 0 0;
		padding: 0;
	}

	.ctc-step {
		position: relative;
		padding: 22px 0 22px 26px;
		border-top: 1px solid var(--ctc-line);
	}

	.ctc-step:last-child {
		border-bottom: 1px solid var(--ctc-line);
	}

	/* the rail that marks the current point */
	.ctc-step::before {
		content: '';
		position: absolute;
		left: 0;
		top: 22px;
		bottom: 22px;
		width: 3px;
		border-radius: 3px;
		background: var(--ctc-red);
		transform: scaleY(0);
		transform-origin: top;
		transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.ctc-step.is-current::before {
		transform: scaleY(1);
	}

	.ctc-step__title {
		margin: 0;
		font-size: 22px;
		font-weight: 800;
		letter-spacing: -0.015em;
		color: var(--ctc-muted);
		transition: color 0.36s ease;
	}

	.ctc-step.is-current .ctc-step__title {
		color: var(--ctc-ink);
	}

	.ctc-step__text {
		margin: 10px 0 0;
		font-size: 17px;
		line-height: 1.66;
		color: var(--ctc-muted);
	}

	.ctc-step .ctc-link {
		margin-top: 6px;
		font-size: 16px;
	}

	/* --- the visual, two states -------------------------------------------- */

	.ctc-flow__visual {
		position: relative;
		aspect-ratio: 4 / 3;
		border-radius: 32px;
		overflow: hidden;
		contain: paint;
		isolation: isolate;
		background: #f4f4f7;
		box-shadow:
			0 2px 8px rgba(24, 8, 20, 0.05),
			0 22px 54px rgba(24, 8, 20, 0.12);
	}

	.ctc-pane {
		position: absolute;
		inset: 0;
		opacity: 0;
		transform: scale(1.035);
		transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.ctc-pane.is-current {
		opacity: 1;
		transform: none;
	}

	.ctc-pane__media {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* --- partnership: deliberately the quieter card ----------------------- */

	/* Narrow, and with its action under the text rather than off to the
	   right: a right-hand CTA on a 660px card lands at x~930, which is
	   exactly where the docked counter rides. Everything actionable here now
	   sits in the left third of the page. */
	.ctc-partner {
		display: grid;
		grid-template-columns: 118px minmax(0, 1fr);
		align-items: center;
		gap: 22px;
		width: min(520px, 100%);
		margin: 66px 0 0;
		padding: 16px 22px 16px 16px;
		border: 1px solid var(--ctc-line);
		border-radius: 22px;
		background: #fcfcfd;
		transition: border-color 0.3s ease, box-shadow 0.3s ease;
	}

	.ctc-partner:hover {
		border-color: #e0e0e8;
		box-shadow: 0 8px 22px rgba(24, 8, 20, 0.07);
	}

	.ctc-partner__thumb {
		aspect-ratio: 4 / 3;
		border-radius: 14px;
		overflow: hidden;
		background: #f1f1f4;
	}

	.ctc-partner__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.ctc-partner__title {
		margin: 0;
		font-size: 19px;
		font-weight: 800;
		letter-spacing: -0.015em;
		color: var(--ctc-ink);
	}

	.ctc-partner__text {
		margin: 5px 0 0;
		font-size: 15px;
		color: var(--ctc-muted);
	}

	.ctc-partner .ctc-link {
		margin-top: 2px;
		font-size: 16px;
		white-space: nowrap;
	}

	/* ======================================================================
	   Reduced motion: everything present, nothing moving.
	   ====================================================================== */

	@media (prefers-reduced-motion: reduce) {

		[data-ct-reveal] {
			opacity: 1;
			transform: none;
			transition: none;
		}

		.ctc-ribbon.is-running .ctc-ribbon__track,
		.ctc-ribbon__track {
			animation: none !important;
		}

		.ctc-ribbon {
			overflow-x: auto;          /* still reachable, just not moving */
			scrollbar-width: thin;
		}

		.ctc-card,
		.ctc-card__frame,
		.ctc-pane,
		.ctc-link::after,
		.ctc-step::before {
			transition: none !important;
		}

		.ctc-ribbon:hover .ctc-card:hover,
		.ctc-card:focus-within {
			transform: translateY(var(--ctc-card-shift, 0));
		}
	}
}

/* ==========================================================================
   MOBILE PROFILE

   The same three chapters, the same copy, the same MEDIA - restacked for a
   narrow screen. Not a scaled-down desktop: every column becomes a row, the
   travelling ribbon becomes a rail you swipe, and the type is sized for the
   phone rather than shrunk from 1918px.
   ========================================================================== */

@media screen and (max-width: 1000px) {

	/* the chapters replace the original blocks here too now */
	.ctc-chapters {
		display: block;
		position: relative;
		background-color: #fff;
		color: #1b1b20;
		overflow: hidden;

		/* --- the blank run before THE CAMTALKER -------------------------
		   The 3D section's stage is sticky in a track one viewport taller
		   than its own scroll distance, so the last screenful of that track
		   is the stage sliding away. By then the ring has climbed out of
		   frame and the background has already been faded to white, so that
		   screenful carries nothing at all - and neither does the tail of
		   the ring's own track, which runs on for a quarter of a screen
		   after the ring is gone.

		   The chapter is pulled up over BOTH of those runs rather than the
		   track being cut, because the track's length is structural: it IS
		   the ring leaving, and shortening it would shorten the story
		   instead. Both blocks are white, and this one is later in the tree
		   and positioned, so it paints over the stage's exit with nothing
		   to blend.

		   -560px -> the whole stage, less a hair. 560 was 284px short of the
		   screenful the stage spends sliding away, and those 284px were
		   spent on nothing: measured at 390x844, the ring's last pixel left
		   the frame at y=7792 and the chapter's heading was still 604px down
		   the screen. The pull is now said in the stage's own unit - the
		   stage is 100svh (css/camtalk-scroll3d.css), so this puts the
		   chapter's top edge exactly where the ring's track ends, 64px past
		   it.

		   64px, and not zero, is the clearance that keeps this block's own
		   white edge off the ring. The binding moment is the START of the
		   exit, not the end of it: the ring leaves at about twice the page's
		   speed, so the two are closest when it sets off. Measured by
		   projecting the ring's own pixels, the lowest it ever sits relative
		   to the end of its track is 51px above it at 360x800, 27px above at
		   390x844 and 14px BELOW it at 430x932, all at p = 0.925..0.935 - so
		   64px leaves 48px of clear stage under the ring on the tightest
		   phone and 115px on the widest one. Nothing is cropped and the two
		   never touch.

		   What the reader gets back is 220px of empty scroll at 390x844: the
		   heading is 349px down the screen at the frame the ring clears it,
		   rather than 604, and it rises into place over the quarter-screen
		   the ring's track still has to run. */
		margin-top: calc(-100vh + 64px);
		margin-top: calc(-100svh + 64px);

		--ctc-gutter: 22px;
		--ctc-red: #cc0c0c;
		--ctc-pink: #ff3d76;
		--ctc-ink: #1b1b20;
		--ctc-muted: #6c6c78;
		--ctc-line: #ececf0;
		/* The counter's own footprint on a phone: its dock gap is wider here
		   (it clears the assistant's launcher), so the band is too. Every
		   chapter ends above it, which is what keeps a heading, a link or a
		   store button from coming to rest underneath the counter now that
		   the counter no longer leaves.

		   Measured, again: 195px at 360x800, 203px at 390x844 and 208px at
		   412x850 - the widest phone needs the most, because the counter is
		   sized from the screen. The band takes the largest of the three. */
		--ctc-counter-safe: 216px;
	}

	.ct-legacy {
		display: none;
	}

	/* ...but only over a stage that actually slides away. Under reduced
	   motion, or with no WebGL, the 3D section falls back to a static block
	   whose track is `height: auto` (css/camtalk-scroll3d.css) - there is no
	   screenful of exit to pull the chapter over, so the pull above would
	   simply lift it onto the still picture. */
	.ct3d--static ~ .ctc-chapters {
		margin-top: 0;
	}

	.ctc-shell {
		position: relative;
		width: 100%;
		padding: 0 var(--ctc-gutter);
	}

	/* Korean breaks by word here too - css/common.css sets break-all on every
	   list item, and chapter 2's points are list items */
	.ctc-chapters :is(h1, h2, h3, h4, p, li, a, span, div) {
		word-break: keep-all;
		overflow-wrap: break-word;
	}

	/* --- type ------------------------------------------------------------- */

	.ctc-eyebrow {
		margin: 0 0 12px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.14em;
		color: var(--ctc-red);
	}

	.ctc-title {
		margin: 0;
		width: auto;
		max-width: none;
		font-size: clamp(29px, 8.4vw, 36px);
		font-weight: 800;
		line-height: 1.26;
		letter-spacing: -0.022em;
		color: var(--ctc-ink);
	}

	.ctc-title b {
		font-weight: 800;
		color: var(--ctc-red);
	}

	.ctc-lead {
		margin: 14px 0 0;
		font-size: clamp(15px, 4.2vw, 17px);
		font-weight: 500;
		line-height: 1.66;
		color: var(--ctc-muted);
	}

	/* a comfortable tap target, not a desktop text link */
	.ctc-link {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		min-height: 44px;
		padding: 10px 2px;
		font-size: 16px;
		font-weight: 700;
		color: var(--ctc-ink);
		text-decoration: none;
	}

	.ctc-link::after {
		content: '';
		position: absolute;
		left: 2px;
		right: 2px;
		bottom: 8px;
		height: 2px;
		background: var(--ctc-red);
		transform: scaleX(1);
		transform-origin: left;
		opacity: 0.22;
		transition: none;
	}

	.ctc-link .material-symbols-rounded {
		font-size: 20px;
		color: var(--ctc-red);
		transition: none;
	}

	[data-ct-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	[data-ct-reveal].is-in {
		opacity: 1;
		transform: none;
	}

	/* ======================================================================
	   1 - meet a CamTalker
	   ====================================================================== */

	/* The head is short because the chapter now arrives while the stage above
	   is still leaving - see the negative margin on .ctc-chapters.

	   The tail is the brief's picture 8. It was a counter band (216px), then
	   most of one (150px), and the reader still sees a hole: measured at
	   390x844, the rail's last card ended 190px above CAMTALK SERVICE &
	   TECHNOLOGY, which is a fifth of the screen with nothing in it.

	   The band was reserved for a counter that is FIXED TO THE WINDOW, and a
	   fixed number of pixels at the end of a section only lines up with it at
	   one scroll position - at every other one the counter is over something
	   else anyway, and it is meant to be: it rides over the rail by design.
	   So what is left here is an ordinary section break, 84px, and the two
	   chapters now read as two chapters rather than as one with a gap in it.
	   Nothing is pulled up over anything: this is the block's own padding,
	   not a compensation on top of one. */
	.ctc-ch--meet {
		position: relative;
		padding: 26px 0 84px;
	}

	.ctc-meet__head {
		display: block;
		padding-bottom: 22px;
	}

	.ctc-meet__aside {
		padding: 0;
	}

	.ctc-meet__links {
		display: flex;
		flex-wrap: wrap;
		gap: 0 22px;
		margin: 8px 0 0;
	}

	/* --- the rail ---------------------------------------------------------
	   A real scroller, not an animation: a phone has to be able to swipe it,
	   and a track that travels on its own would fight the thumb and snap back
	   the moment it was let go. Scroll-snap gives it the detents instead.
	   ---------------------------------------------------------------------- */

	.ctc-ribbon {
		position: relative;
		width: 100%;
		padding: 4px 0 8px;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--ctc-gutter);
		scrollbar-width: none;
		/* horizontal pans belong to the rail, vertical and diagonal ones go
		   straight through to the page */
		touch-action: pan-x pan-y pinch-zoom;
		overscroll-behavior-x: contain;
	}

	.ctc-ribbon::-webkit-scrollbar {
		display: none;
	}

	/* the desktop edge fades would scroll away with the content */
	.ctc-ribbon::before,
	.ctc-ribbon::after {
		display: none;
	}

	.ctc-ribbon__track {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		width: max-content;
		padding: 0 var(--ctc-gutter);
		/* never animated on a phone, whatever the desktop rule said */
		animation: none !important;
		will-change: auto;
	}

	.ctc-card {
		flex: 0 0 auto;
		/* one card reads in full, the next shows its edge */
		width: 62vw;
		max-width: 300px;
		transform: none;
		scroll-snap-align: start;
		transition: none;
	}

	.ctc-card__frame {
		border-radius: 20px;
		clip-path: inset(0 round 20px);
		box-shadow:
			0 2px 6px rgba(24, 8, 20, 0.06),
			0 10px 24px rgba(24, 8, 20, 0.10);
		transition: none;
	}

	/* no lift on touch - there is no hover to leave */
	.ctc-ribbon .ctc-card:hover,
	.ctc-ribbon:hover .ctc-card:hover,
	.ctc-card:focus-within {
		transform: none;
	}

	/* ======================================================================
	   2 - from video to conversation
	   ====================================================================== */

	/* The tail was a counter band for a chapter 3 that is no longer here: the
	   closing scene starts below this one now, and the counter leaves the dock
	   while the partnership card is still on screen. */
	/* The tail is the seam with the closing scene: what follows it is that
	   scene's own entrance, so the space between the partnership card and the
	   first thing the scene shows is paid for twice if this padding is
	   generous. 28px is a block ending, and the scene's light now opens into
	   it - see `glowInFrom` in js/camtalk-final.js. */
	.ctc-ch--flow {
		position: relative;
		padding: 24px 0 28px;
	}

	/* One column, in document order: heading and intro, the visual, then the
	   two points right under the picture they change. */
	.ctc-flow {
		display: block;
	}

	/* --- the three words, as one row ---------------------------------------
	   Compact labels rather than buttons: they name what the section is about
	   and nothing here is tappable, which is why they are out of the
	   accessibility tree in the markup.
	   ---------------------------------------------------------------------- */

	.ctc-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 20px 0 0;
		padding: 0;
		list-style: none;
	}

	.ctc-chip {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 9px 15px 9px 11px;
		border: 1px solid var(--ctc-line);
		border-radius: 999px;
		background: #fff;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: -0.01em;
		color: var(--ctc-ink);
		box-shadow: 0 1px 4px rgba(24, 8, 20, 0.04);
	}

	.ctc-chip .material-symbols-rounded {
		font-size: 19px;
		color: var(--ctc-ink);
	}

	.ctc-flow__intro,
	.ctc-flow__visual,
	.ctc-flow .ctc-steps {
		grid-column: auto;
		grid-row: auto;
	}

	.ctc-flow__lead {
		max-width: none;
	}

	.ctc-flow__visual {
		position: relative;
		aspect-ratio: 4 / 3;
		margin: 26px 0 0;
		border-radius: 20px;
		overflow: hidden;
		contain: paint;
		isolation: isolate;
		background: #f4f4f7;
		box-shadow:
			0 2px 6px rgba(24, 8, 20, 0.05),
			0 14px 32px rgba(24, 8, 20, 0.11);
	}

	/* --- the two points, as cards -----------------------------------------
	   A picture on the left and the words on the right, which is the shape
	   the brief's reference uses. They are still the same two points: tapping
	   one still swaps the big visual above, and the current one is still the
	   one with the red rule - it has simply moved from a hairline at the left
	   edge of a list row to the border of a card.
	   ---------------------------------------------------------------------- */

	.ctc-steps {
		list-style: none;
		display: grid;
		gap: 12px;
		margin: 24px 0 0;
		padding: 0;
	}

	/* tappable: choosing a point swaps the picture above it */
	.ctc-step {
		position: relative;
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		align-items: stretch;
		gap: 12px;
		padding: 10px 13px 10px 10px;
		border: 1px solid var(--ctc-line);
		border-radius: 18px;
		background: #fff;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: border-color 0.3s ease, box-shadow 0.3s ease;
	}

	/* The three cards carry ONE edge. The red frame used to travel between
	   the two points to say which of them the picture above belonged to, and
	   next to a third card with a grey edge it read as two different kinds of
	   object rather than as one set. The state is still there - a slightly
	   deeper ground and a soft lift - but it is neutral, so the row is one
	   row. */
	.ctc-step.is-current {
		border-color: var(--ctc-line);
		background: #fbfbfc;
		box-shadow: 0 2px 10px rgba(20, 20, 28, 0.05);
	}

	.ctc-step__thumb {
		display: block;
		align-self: stretch;
		min-height: 112px;
		border-radius: 13px;
		overflow: hidden;
		background: #f1f1f4;
	}

	.ctc-step__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* The words start at the top of the text area and the link is pushed to
	   its bottom edge, so the links of all three cards land on one line
	   whatever the copy above them is. `margin-top: auto` on the link rather
	   than `space-between` on the column: with only three children the latter
	   spreads the description into the middle of the card, which on the
	   shortest of the three reads as a gap rather than as a paragraph. */
	.ctc-step__body {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 4px 0;
	}


	/* Equal boxes. The height is written by js/camtalk-chapters.js, which
	   measures the tallest of the three at this width and in this language
	   and gives all three that height - so a longer translation lifts the
	   whole set instead of stretching one card. */
	.ctc-step,
	.ctc-partner {
		min-height: var(--ctc-card-min, 0px);
	}

	.ctc-step__num {
		display: block;
		font-size: 13px;
		font-weight: 800;
		letter-spacing: 0.06em;
		color: var(--ctc-red);
	}

	/* Not greyed out any more: on a card the words are the card, and a grey
	   card next to a black one reads as disabled rather than as unselected.
	   The red edge above is what says which one is current. */
	.ctc-step__title {
		margin: 4px 0 0;
		font-size: 17px;
		font-weight: 800;
		line-height: 1.32;
		letter-spacing: -0.014em;
		color: var(--ctc-ink);
	}

	/* The copy is authored with a red word inside each heading; on a card that
	   red is one accent too many next to the number and the arrow, and the
	   third card has no such word at all - so the three headings read as
	   three designs. The mark-up and the wording are untouched; only the
	   colour and the weight come back to the heading's own. */
	.ctc-step__title b,
	.ctc-partner__title b {
		font-weight: inherit;
		color: inherit;
	}

	.ctc-step__text {
		margin: 7px 0 0;
		font-size: 13.5px;
		line-height: 1.56;
		color: var(--ctc-muted);
	}

	/* The copy is authored with the reference's own line break in it. That
	   break is right for the width it was drawn at and wrong for a 185px
	   column, where it turns two lines into four ragged ones - so on a phone
	   the text flows and the break is only honoured where it fits. */
	.ctc-step__text br {
		display: none;
	}

	/* `auto`, so the link is pushed to the bottom of the text area: with all
	   three cards the same height, that puts all three links on one line. */
	.ctc-step .ctc-link {
		margin-top: auto;
		min-height: 36px;
		padding-bottom: 4px;
		font-size: 14px;
	}

	.ctc-step .ctc-link::after {
		bottom: 4px;
	}

	/* 360px: the thumb gives way before the words do */
	@media screen and (max-width: 374px) {
		.ctc-step,
		.ctc-partner {
			grid-template-columns: 98px minmax(0, 1fr);
			gap: 11px;
		}

		.ctc-step__thumb,
		.ctc-partner__thumb {
			min-height: 100px;
		}
	}

	.ctc-pane {
		position: absolute;
		inset: 0;
		opacity: 0;
		transform: none;      /* the block must not change height or jump */
		transition: opacity 0.42s cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	.ctc-pane.is-current {
		opacity: 1;
	}

	.ctc-pane__media {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	/* --- partnership: still the quieter one ------------------------------- */

	/* The same card as the two points above it.

	   It was a card of its own shape: a 92px landscape thumb, wider padding,
	   a different background and its own vertical rhythm - so on a phone,
	   where 01 and 02 ARE cards, the third one read as something from another
	   block. Every number here is now theirs: the 112px column, the 10/13
	   padding, the 13px thumb radius, the white ground and the same
	   `--ctc-line` edge a point has when it is not the current one.

	   What it does not copy is the red edge and the number: those say "this
	   is the point you are looking at", and this card is not one of the two
	   points. */
	.ctc-partner {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
		align-items: stretch;
		gap: 12px;
		width: 100%;
		margin: 40px 0 0;
		padding: 10px 13px 10px 10px;
		border: 1px solid var(--ctc-line);
		border-radius: 18px;
		background: #fff;
	}

	.ctc-partner__thumb {
		display: block;
		align-self: stretch;
		aspect-ratio: auto;
		min-height: 112px;
		border-radius: 13px;
		overflow: hidden;
		background: #f1f1f4;
	}

	/* the words sit the way a point's words sit, and the link with them */
	.ctc-partner > div:last-child {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		padding: 4px 0;
	}

	.ctc-partner__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

	.ctc-partner__title {
		margin: 0;
		font-size: 17px;
		font-weight: 800;
		line-height: 1.32;
		letter-spacing: -0.014em;
		color: var(--ctc-ink);
	}

	.ctc-partner__text {
		margin: 7px 0 0;
		font-size: 13.5px;
		line-height: 1.56;
		color: var(--ctc-muted);
	}

	.ctc-partner .ctc-link {
		margin-top: auto;
		min-height: 36px;
		padding-bottom: 4px;
		font-size: 14px;
	}

	.ctc-partner .ctc-link::after {
		bottom: 4px;
	}

	/* --- reduced motion: present, still ----------------------------------- */

	@media (prefers-reduced-motion: reduce) {

		[data-ct-reveal] {
			opacity: 1;
			transform: none;
			transition: none;
		}

		.ctc-pane,
		.ctc-step::before,
		.ctc-step__title {
			transition: none !important;
		}

		/* the rail is still swipeable, it simply never moves on its own */
		.ctc-ribbon {
			scroll-behavior: auto;
		}
	}

	/* 360px, once more and last: the partnership card is defined further up
	   than the narrow-width block, so its own column wins there unless it is
	   said again here. All three cards keep one grid at every width. */
	@media screen and (max-width: 374px) {
		.ctc-partner {
			grid-template-columns: 98px minmax(0, 1fr);
			gap: 11px;
		}

		.ctc-partner__thumb {
			min-height: 100px;
		}
	}
}