/* ==========================================================================
   Ctrl Z — Section classes (homepage V2)
   --------------------------------------------------------------------------
   One class per structural piece, applied to Bricks elements. Content stays in
   Bricks; these rules only carry the layout ratios, dividers and treatments
   that would be fragile if rebuilt by hand in the builder UI.

   Section order is fixed by the handoff:
   01 hero · client tape · 02 positioning · 03 proof · 04 full management ·
   05 selected work · 06 studio · 07 process · 08 team · 09 social proof ·
   10 qualification · final CTA + footer
   ========================================================================== */

/* ==========================================================================
   Shared section shell
   ========================================================================== */

.cz-section {
	padding-block: var(--cz-section-y, 10vw);
	padding-inline: var(--cz-pad, 3.4vw);
	position: relative;
}

.cz-section--light {
	background: var(--cz-white, #f2efe7);
	color: var(--cz-ink, #101010);
}

.cz-section--surface { background: var(--cz-surface, #111111); }
.cz-section--surface-2 { background: var(--cz-surface-2, #171717); }

.cz-section--red {
	background: var(--cz-red, #ff2929);
	color: #090909;
}

.cz-section--tall { min-block-size: 100svh; }

/* Display headings shared by every section (H2).
   Weight stays at the browser's bold (700), exactly as the approved prototype:
   at 900 Windows resolves Arial to Arial Black, which is wider and re-flows the
   approved line breaks. Copy is typed in caps in Bricks rather than transformed
   in CSS, so the Arabic build is not force-uppercased. */
.cz-h2 {
	margin: 0;
	font-family: var(--cz-font-display);
	font-size: var(--cz-h2, clamp(54px, 8vw, 120px));
	font-weight: 700;
	line-height: 0.87;
	letter-spacing: var(--cz-tight, -0.075em);
}

.cz-h2 span,
.cz-accent { color: var(--cz-red, #ff2929); }

/* ==========================================================================
   Navbar
   ========================================================================== */

.cz-nav {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 20;
	block-size: var(--cz-nav-h, 88px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: var(--cz-pad, 3.4vw);
	border-block-end: 1px solid var(--cz-line);
}

.cz-brand {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -1px;
}

.cz-navlinks {
	display: flex;
	gap: 34px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.cz-navlinks a {
	opacity: 0.68;
	transition: opacity 0.2s;
}

.cz-navlinks a:hover,
.cz-navlinks a:focus-visible { opacity: 1; }

.cz-nav__actions {
	display: flex;
	align-items: center;
	gap: 22px;
}

.cz-lang {
	font-size: 11px;
	color: var(--cz-grey);
}

/* ==========================================================================
   01 · Hero
   ========================================================================== */

.cz-hero {
	position: relative;
	min-block-size: 100svh;
	display: grid;
	grid-template-rows: 1fr auto;
	padding: 142px var(--cz-pad, 3.4vw) 38px;
	overflow: hidden;
}

.cz-hero__grid {
	display: grid;
	grid-template-columns: 9fr 3fr;
	gap: 30px;
	align-items: center;
}

.cz-headline {
	margin: 0;
	max-inline-size: 1100px;
	font-family: var(--cz-font-display);
	font-size: var(--cz-h1, clamp(66px, 9.7vw, 150px));
	font-weight: 900;
	line-height: 0.82;
	letter-spacing: var(--cz-tighter, -0.085em);
	text-transform: uppercase;
}

/* Each line is its own block so the line breaks stay deliberate. */
.cz-headline__line {
	display: block;
	position: relative;
	inline-size: max-content;
	max-inline-size: 100%;
}

/* The undo swap: .cz-hero holds the state, JS only toggles .is-undone. */
.cz-headline__answer {
	display: none;
	color: var(--cz-red, #ff2929);
}

.cz-hero.is-undone .cz-headline__question { display: none; }

.cz-hero.is-undone .cz-headline__answer {
	display: block;
	animation: cz-arrive 0.55s var(--cz-ease, cubic-bezier(0.2, 0.8, 0.2, 1));
}

@keyframes cz-arrive {
	from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
	to { opacity: 1; transform: none; filter: none; }
}

.cz-hero__side {
	align-self: end;
	padding-block-end: 6vh;
}

.cz-hero__side p {
	margin: 0 0 26px;
	max-inline-size: 300px;
	color: #c9c5bb;
	font-size: 18px;
	line-height: 1.45;
}

.cz-hero__side strong { color: var(--cz-white); }

.cz-cta-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.cz-hero__foot {
	display: flex;
	justify-content: space-between;
	align-items: end;
	padding-block-start: 24px;
}

.cz-scroll-cue {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.14em;
	color: var(--cz-grey);
}

.cz-counter {
	font: 700 11px/1 var(--cz-font-mono);
	color: var(--cz-grey);
}

/* Restrained red graphic accent — decorative only. */
.cz-red-slice {
	position: absolute;
	inset-inline-end: -8vw;
	inset-block-start: 18%;
	inline-size: 27vw;
	block-size: 62%;
	background: var(--cz-red, #ff2929);
	clip-path: polygon(58% 0, 100% 0, 42% 100%, 0 100%);
	opacity: 0.06;
	pointer-events: none;
}

/* ==========================================================================
   Client tape (continuous ticker)
   ========================================================================== */

.cz-tape {
	block-size: 74px;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-block: 1px solid var(--cz-line);
}

/* The track is duplicated in markup (two identical halves) so -50% loops seamlessly. */
.cz-tape__track {
	display: flex;
	gap: 55px;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.05em;
	animation: cz-tape 22s linear infinite;
}

.cz-tape__track span { opacity: 0.52; }
.cz-tape__track b { color: var(--cz-red, #ff2929); }

@keyframes cz-tape {
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   02 · Positioning
   ========================================================================== */

.cz-system {
	margin-block-start: 10vw;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-block-start: 1px solid var(--cz-line-dark);
}

.cz-system__item {
	padding-block: 24px;
	border-inline-end: 1px solid var(--cz-line-dark);
	font-size: 13px;
	font-weight: 800;
}

.cz-system__item:not(:first-child) { padding-inline-start: 22px; }

.cz-idea-copy {
	display: flex;
	justify-content: flex-end;
	margin-block-start: 7vw;
}

.cz-idea-copy p {
	margin: 0;
	max-inline-size: 570px;
	font-size: 27px;
	line-height: 1.16;
	letter-spacing: -0.035em;
}

.cz-idea-copy b { color: var(--cz-red, #ff2929); }

/* ==========================================================================
   03 · Proof / results
   ========================================================================== */

.cz-proof__layout {
	margin-block-start: 8vw;
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 6vw;
	align-items: end;
}

.cz-case-tag {
	font: 700 11px/1.5 var(--cz-font-mono);
	letter-spacing: 0.06em;
	color: var(--cz-grey);
}

.cz-case-tag strong {
	display: block;
	margin-block-end: 12px;
	color: var(--cz-white);
	font: 900 25px/1 var(--cz-font-display);
	letter-spacing: -0.03em;
}

.cz-metrics { border-block-start: 1px solid var(--cz-line); }

.cz-metric {
	display: grid;
	grid-template-columns: 1fr 190px;
	align-items: end;
	padding-block: 22px;
	border-block-end: 1px solid var(--cz-line);
}

/* The number is real text in Bricks — it must be readable without JS. */
.cz-metric__number {
	font-family: var(--cz-font-display);
	font-size: var(--cz-metric, clamp(52px, 7vw, 108px));
	font-weight: 900;
	line-height: 0.8;
	letter-spacing: var(--cz-tight, -0.075em);
}

.cz-metric__label {
	padding-block-end: 8px;
	font: 700 11px/1.5 var(--cz-font-mono);
	letter-spacing: 0.08em;
	color: var(--cz-grey);
}

.cz-proof__note {
	position: absolute;
	inset-inline-end: var(--cz-pad, 3.4vw);
	inset-block-start: 11vw;
	writing-mode: vertical-rl;
	color: #3d3b38;
	font: 700 10px/1.4 var(--cz-font-mono);
}

/* ==========================================================================
   04 · Full marketing management (service switcher)
   ========================================================================== */

.cz-mgmt__head {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 6vw;
	align-items: end;
}

.cz-mgmt__head p {
	margin: 0 0 8px;
	color: #aaa69d;
	font-size: 19px;
	line-height: 1.45;
}

.cz-mgmt__ui {
	margin-block-start: 9vw;
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 4vw;
	align-items: stretch;
}

.cz-services { border-block-start: 1px solid var(--cz-line); }

/* Real <button> elements: keyboard-operable, announced as controls. */
.cz-service {
	inline-size: 100%;
	display: grid;
	grid-template-columns: 60px 1fr 26px;
	align-items: center;
	padding-block: 22px;
	border: 0;
	border-block-end: 1px solid var(--cz-line);
	background: none;
	color: var(--cz-white);
	text-align: start;
	cursor: pointer;
}

.cz-service__num {
	font: 700 10px var(--cz-font-mono);
	color: #666;
}

.cz-service__name {
	font-family: var(--cz-font-display);
	font-size: clamp(23px, 3vw, 44px);
	font-weight: 900;
	letter-spacing: -0.04em;
	transition: color 0.2s ease;
}

.cz-service__plus {
	color: var(--cz-red, #ff2929);
	font-size: 24px;
}

.cz-service:hover .cz-service__name,
.cz-service:focus-visible .cz-service__name,
.cz-service.is-active .cz-service__name { color: var(--cz-red, #ff2929); }

.cz-service-info {
	position: relative;
	min-block-size: 420px;
	padding: 36px;
	border: 1px solid var(--cz-line);
	display: flex;
    flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
}

/* Oversized watermark Z — decorative, so it stays in CSS, not in markup. */
.cz-service-info::after {
	content: "Z";
	position: absolute;
	inset-inline-end: -3%;
	inset-block-end: -22%;
	font-family: var(--cz-font-display);
	font-size: 330px;
	font-weight: 900;
	line-height: 1;
	color: rgba(255, 41, 41, 0.08);
}

.cz-service-info__label {
	font: 700 10px/1 var(--cz-font-mono);
	letter-spacing: 0.12em;
	color: var(--cz-red, #ff2929);
}

.cz-service-info p {
	position: relative;
	z-index: 1;
	margin: 0;
	max-inline-size: 460px;
	font-size: clamp(24px, 3vw, 43px);
	line-height: 1.05;
	letter-spacing: -0.04em;
}

.cz-service-info small {
	position: relative;
	z-index: 1;
	font: 700 11px/1.5 var(--cz-font-mono);
	color: #6f6c66;
}

/* ==========================================================================
   05 · Selected work
   ========================================================================== */

.cz-work__head {
	margin-block-end: 9vw;
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 30px;
}

.cz-work__head p {
	margin: 0;
	inline-size: 310px;
	color: var(--cz-grey-light, #6e6b65);
	font-size: 16px;
	line-height: 1.5;
}

.cz-project { margin-block-end: 13vw; }
.cz-project:last-child { margin-block-end: 0; }

.cz-project__meta {
	margin-block-end: 20px;
	display: flex;
	justify-content: space-between;
	align-items: end;
}

.cz-project__index {
	font: 700 10px var(--cz-font-mono);
	color: #888;
}

.cz-project__name {
	font-family: var(--cz-font-display);
	font-size: clamp(28px, 4vw, 60px);
	font-weight: 900;
	letter-spacing: -0.055em;
}

.cz-project__tags {
	font: 700 10px/1.5 var(--cz-font-mono);
	color: #777;
	text-align: end;
}

.cz-project__media {
	position: relative;
	block-size: min(68vw, 760px);
	background: #dedbd2;
	overflow: hidden;
}

.cz-project__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
}

.cz-project:hover .cz-project__media img { transform: scale(1.025); }

/* Campaign creatives (XCrepe, Tala): supplied at 639×798, shown on a dark
   stage rather than stretched. Do not scale these beyond 100%. */
.cz-project__media--creative {
	background: #111;
	display: flex;
	justify-content: flex-end;
}

.cz-project__media--creative::before {
	content: "CTRL Z / SELECTED WORK";
	position: absolute;
	inset-block-start: 34px;
	inset-inline-start: 35px;
	z-index: 1;
	color: #7d7971;
	font: 800 10px/1 var(--cz-font-mono);
	letter-spacing: 0.13em;
}

.cz-project__media--creative img {
	inline-size: 58%;
	object-fit: cover;
	object-position: center;
}

.cz-project__media--tala { background: #b4ac9d; }
.cz-project__media--tala::before { color: #332f29; }

/* Wide photography crop (Healthy & Tasty). */
.cz-project__media--photo img {
	inline-size: 125%;
	block-size: 125%;
	max-inline-size: none;
	transform: translate(-11%, -11%);
}

.cz-project:hover .cz-project__media--photo img { transform: translate(-11%, -11%) scale(1.02); }

.cz-project__overlay {
	position: absolute;
	inset: 0;
	padding: 35px;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	color: var(--cz-white);
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.46) 36%, transparent 70%),
		linear-gradient(transparent 65%, rgba(0, 0, 0, 0.64));
}

.cz-project__overlay strong {
	font-family: var(--cz-font-display);
	font-size: clamp(28px, 5vw, 76px);
	line-height: 0.9;
	letter-spacing: -0.06em;
}

.cz-project__overlay a {
	padding-block-end: 8px;
	border-block-end: 1px solid;
	font: 800 10px/1 var(--cz-font-mono);
	letter-spacing: 0.1em;
}

/* Honest labelling of assets that are not final. Keep until originals land. */
.cz-project--placeholder .cz-project__media::before {
	content: "CURRENT PORTFOLIO ASSET";
	position: absolute;
	inset-block-start: 18px;
	inset-inline-start: 18px;
	z-index: 2;
	padding: 8px 10px;
	background: var(--cz-red, #ff2929);
	color: #090909;
	font: 900 9px var(--cz-font-mono);
	letter-spacing: 0.08em;
}

/* ==========================================================================
   06 · Ctrl Z Studio
   ========================================================================== */

.cz-studio {
	position: relative;
	min-block-size: 100svh;
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 5vw;
	align-items: center;
	padding: 9vw var(--cz-pad, 3.4vw);
	overflow: hidden;
}

.cz-studio > .cz-section-id {
	position: absolute;
	inset-block-start: 5vw;
	inset-inline-start: var(--cz-pad, 3.4vw);
}

.cz-studio .cz-h2 {
	font-size: var(--cz-h2-lg, clamp(60px, 8.5vw, 130px));
	max-inline-size: 830px;
}

.cz-studio__copy p {
	max-inline-size: 590px;
	font-size: 21px;
	line-height: 1.35;
}

.cz-studio__tags {
	margin-block: 34px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cz-studio__tags span {
	padding: 10px 13px;
	border: 1px solid rgba(0, 0, 0, 0.35);
	font: 900 10px var(--cz-font-mono);
	letter-spacing: 0.07em;
}

.cz-studio__visual {
	position: relative;
	block-size: 68vh;
	min-block-size: 510px;
	border: 8px solid #090909;
	background: #071019;
	transform: rotate(1.5deg);
	overflow: hidden;
}

.cz-studio__visual video {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: saturate(0.9) contrast(1.05);
}

.cz-studio__visual::before {
	content: "REAL STUDIO REEL · 00:32";
	position: absolute;
	inset-block-start: 20px;
	inset-inline-start: 20px;
	z-index: 2;
	padding: 9px 11px;
	background: var(--cz-red, #ff2929);
	color: #090909;
	font: 900 9px/1 var(--cz-font-mono);
	letter-spacing: 0.09em;
}

.cz-studio__visual::after {
	content: "CTRL Z STUDIO";
	position: absolute;
	inset-block-end: 22px;
	inset-inline-start: 24px;
	z-index: 2;
	color: #fff;
	font-family: var(--cz-font-display);
	font-size: clamp(28px, 4vw, 60px);
	font-weight: 900;
	letter-spacing: -0.06em;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   07 · Process
   ========================================================================== */

.cz-process__intro {
	margin-block-end: 8vw;
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 6vw;
}

.cz-process__intro .cz-h2 {
	font-size: clamp(55px, 7vw, 105px);
	line-height: 0.86;
	letter-spacing: -0.07em;
}

.cz-process__intro p {
	margin: 0;
	align-self: end;
	color: #aaa69d;
	font-size: 21px;
	line-height: 1.4;
}

.cz-steps { border-block-start: 1px solid var(--cz-line); }

.cz-step {
	display: grid;
	grid-template-columns: 90px 4fr 5fr 30px;
	gap: 20px;
	align-items: center;
	padding-block: 26px;
	border-block-end: 1px solid var(--cz-line);
}

.cz-step__num {
	font: 700 11px var(--cz-font-mono);
	color: #64615c;
}

.cz-step h3 {
	margin: 0;
	font-family: var(--cz-font-display);
	font-size: var(--cz-h3, clamp(26px, 3.5vw, 50px));
	letter-spacing: -0.04em;
}

.cz-step p {
	margin: 0;
	color: #8b8881;
	font-size: 15px;
	line-height: 1.45;
}

.cz-step__arrow { color: #555; }

/* Step 06 is the Ctrl Z step — the loop closes in red. */
.cz-step--loop h3,
.cz-step--loop .cz-step__num,
.cz-step--loop .cz-step__arrow { color: var(--cz-red, #ff2929); }

/* ==========================================================================
   08 · Team
   ========================================================================== */

.cz-team__head {
	display: grid;
	grid-template-columns: 8fr 4fr;
	gap: 4vw;
	align-items: end;
}

.cz-team__head p {
	margin: 0;
	color: #aaa69d;
	font-size: 17px;
	line-height: 1.5;
}

.cz-roles {
	margin-block-start: 9vw;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-block-start: 1px solid var(--cz-line);
	border-inline-start: 1px solid var(--cz-line);
}

.cz-role {
	position: relative;
	aspect-ratio: 1 / 1.08;
	padding: 24px;
	border-inline-end: 1px solid var(--cz-line);
	border-block-end: 1px solid var(--cz-line);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	transition: background 0.3s, color 0.3s;
}

.cz-role:hover {
	background: var(--cz-red, #ff2929);
	color: var(--cz-black, #080808);
}

.cz-role small {
	font: 700 10px var(--cz-font-mono);
	color: #666;
}

.cz-role strong {
	font-family: var(--cz-font-display);
	font-size: clamp(18px, 2vw, 30px);
	letter-spacing: -0.04em;
}

.cz-role__slash {
	align-self: flex-end;
	color: var(--cz-red, #ff2929);
	font-size: 70px;
	line-height: 0.5;
}

.cz-role:hover .cz-role__slash { color: var(--cz-black, #080808); }

.cz-note {
	margin-block-start: 18px;
	color: #5f5c56;
	font: 700 9px/1.4 var(--cz-font-mono);
	letter-spacing: 0.06em;
}

/* ==========================================================================
   09 · Social proof
   ========================================================================== */

.cz-logos {
	margin-block-start: 9vw;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-block-start: 1px solid #ccc8bf;
	border-inline-start: 1px solid #ccc8bf;
}

/* Text lockups until real client logos (SVG) are supplied. */
.cz-logo {
	block-size: 140px;
	border-inline-end: 1px solid #ccc8bf;
	border-block-end: 1px solid #ccc8bf;
	display: grid;
	place-items: center;
	text-align: center;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -0.03em;
}

.cz-testimonial {
	margin-block-start: 10vw;
	padding-block-start: 40px;
	display: grid;
	grid-template-columns: 3fr 9fr;
	gap: 5vw;
	border-block-start: 1px solid #ccc8bf;
}

.cz-testimonial label {
	font: 700 10px var(--cz-font-mono);
	color: #7c7972;
}

.cz-testimonial blockquote {
	margin: 0;
	font-size: var(--cz-quote, clamp(34px, 5.3vw, 76px));
	line-height: 1.02;
	letter-spacing: -0.055em;
}

.cz-testimonial cite {
	display: block;
	margin-block-start: 30px;
	font: 700 10px/1.5 var(--cz-font-mono);
	font-style: normal;
	color: #7a7770;
}

/* ==========================================================================
   10 · Qualification
   ========================================================================== */

.cz-qualify__grid {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 7vw;
	align-items: start;
}

.cz-qualify__side p {
	font-size: 20px;
	line-height: 1.45;
}

.cz-fits {
	margin-block-start: 10px;
	border-block-start: 1px solid var(--cz-line-dark-strong);
}

.cz-fit {
	padding-block: 22px;
	border-block-end: 1px solid var(--cz-line-dark-strong);
	display: grid;
	grid-template-columns: 34px 1fr;
	font-size: 18px;
	font-weight: 800;
}

.cz-fit span:first-child { font-weight: 400; }

/* ==========================================================================
   Final CTA + footer
   ========================================================================== */

.cz-final {
	position: relative;
	min-block-size: 92svh;
	padding: 11vw var(--cz-pad, 3.4vw) 50px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.cz-final small {
	font: 700 11px var(--cz-font-mono);
	color: var(--cz-grey);
}

.cz-final .cz-h2 {
	font-size: var(--cz-display-final, clamp(92px, 16vw, 245px));
	line-height: 0.75;
	color: var(--cz-red, #ff2929);
}

.cz-final__bottom {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 40px;
}

.cz-final__bottom p {
	margin: 0;
	font-size: clamp(22px, 3vw, 42px);
	letter-spacing: -0.04em;
}

.cz-footer {
	padding: 28px var(--cz-pad, 3.4vw);
	border-block-start: 1px solid var(--cz-line);
	display: flex;
	justify-content: space-between;
	gap: 30px;
	font: 700 10px/1.6 var(--cz-font-mono);
	color: var(--cz-grey-dim, #77736d);
}

/* Mobile-only sticky booking CTA (revealed past the hero by JS). */
.cz-mobile-book { display: none; }

/* ==========================================================================
   Responsive — reference widths: 1440px desktop, 390px mobile
   ========================================================================== */

@media (max-width: 900px) {
	.cz-navlinks { display: none; }

	.cz-hero__grid,
	.cz-mgmt__head,
	.cz-mgmt__ui,
	.cz-studio,
	.cz-process__intro,
	.cz-team__head,
	.cz-qualify__grid,
	.cz-proof__layout { grid-template-columns: 1fr; }

	.cz-hero__side { padding-block: 35px 0; }
	.cz-mgmt__head p,
	.cz-team__head p { max-inline-size: 520px; }
	.cz-service-info { min-block-size: 340px; }

	.cz-studio { padding-block-start: 150px; }
	.cz-studio > .cz-section-id { inset-block-start: 70px; }
	.cz-studio__visual { block-size: 56vh; }

	.cz-roles { grid-template-columns: repeat(2, 1fr); }
	.cz-case-tag { margin-block-end: 30px; }
	.cz-proof__note { display: none; }
}

@media (max-width: 600px) {
	:root { --cz-pad: 18px; --cz-nav-h: 72px; }

	.cz-nav { block-size: 72px; }
	.cz-lang { display: none; }
	.cz-nav .cz-btn { padding: 12px; font-size: 9px; }
	.cz-brand { font-size: 17px; }
	.cz-mark { inline-size: 24px; block-size: 24px; border-width: 6px; }

	.cz-hero { padding: 110px var(--cz-pad) 24px; }
	.cz-hero__grid { align-content: center; }
	.cz-kicker { font-size: 9px; }
	.cz-headline { font-size: clamp(34px, 10vw, 43px); line-height: 0.88; letter-spacing: -0.065em; }
	.cz-hero__side { padding: 24px 0 0; }
	.cz-hero__side p { font-size: 15px; }
	.cz-hero__side .cz-btn { flex: none; inline-size: 100%; padding: 14px 10px; }
	.cz-keyhint { display: none; }
	.cz-hero__foot { padding-block-start: 28px; }
	.cz-red-slice { inline-size: 52vw; inset-inline-end: -20vw; }

	.cz-tape { block-size: 62px; }
	.cz-tape__track { gap: 38px; font-size: 11px; }

	.cz-section { padding: 105px var(--cz-pad); }
	.cz-section-id { margin-block-end: 70px; }
	.cz-h2 { font-size: clamp(48px, 14.2vw, 67px); }

	.cz-system { margin-block-start: 80px; grid-template-columns: 1fr 1fr; }
	.cz-system__item { padding-block: 17px; border-block-end: 1px solid var(--cz-line-dark); font-size: 11px; }
	.cz-system__item:not(:first-child) { padding-inline-start: 12px; }
	.cz-idea-copy { margin-block-start: 65px; }
	.cz-idea-copy p { font-size: 21px; }

	.cz-proof__layout { margin-block-start: 80px; }
	.cz-metric { grid-template-columns: 1fr 100px; }
	.cz-metric__number { font-size: 55px; }
	.cz-metric__label { font-size: 9px; }

	.cz-service { grid-template-columns: 40px 1fr 24px; padding-block: 18px; }
	.cz-service__name { font-size: 25px; }
	.cz-service-info { padding: 24px; min-block-size: 310px; }
	.cz-service-info p { font-size: 30px; }

	.cz-work__head { display: block; }
	.cz-work__head p { margin-block-start: 26px; }
	.cz-project { margin-block-end: 110px; }
	.cz-project__meta { display: block; }
	.cz-project__tags { text-align: start; margin-block-start: 10px; }
	.cz-project__media { block-size: 118vw; max-block-size: 530px; }
	.cz-project__media--photo img { inline-size: 180%; block-size: 135%; transform: translate(-39%, -9%); }
	.cz-project:hover .cz-project__media--photo img { transform: translate(-39%, -9%) scale(1.02); }
	.cz-project__media--creative img { inline-size: 100%; }
	.cz-project__media--creative::before {
		inset-block-start: 16px;
		inset-inline-start: 18px;
		color: var(--cz-white);
		text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
	}
	.cz-project__overlay { padding: 18px; background: linear-gradient(transparent 47%, rgba(0, 0, 0, 0.82)); }
	.cz-project__overlay a { display: none; }
	.cz-project__overlay strong { font-size: 38px; }

	.cz-studio { padding: 130px var(--cz-pad) 100px; }
	.cz-studio .cz-h2 { font-size: 60px; }
	.cz-studio__copy p { font-size: 18px; }
	.cz-studio__visual { min-block-size: 490px; block-size: 72vh; border-width: 6px; }

	.cz-step { grid-template-columns: 42px 1fr 20px; padding-block: 20px; }
	.cz-step p { display: none; }
	.cz-process__intro p { font-size: 17px; }

	.cz-roles { margin-block-start: 80px; }
	.cz-role { padding: 16px; }
	.cz-role__slash { font-size: 48px; }
	.cz-note { font-size: 8px; }

	.cz-logos { grid-template-columns: 1fr 1fr; }
	.cz-logo { block-size: 100px; font-size: 14px; }
	.cz-testimonial { grid-template-columns: 1fr; }
	.cz-testimonial blockquote { font-size: 38px; }

	.cz-fit { font-size: 15px; }

	.cz-final { padding: 130px var(--cz-pad) 35px; min-block-size: 82svh; }
	.cz-final .cz-h2 { font-size: 26vw; }
	.cz-final__bottom { display: block; }
	.cz-final__bottom .cz-btn { margin-block-start: 30px; inline-size: 100%; }

	.cz-footer { display: block; padding-block-end: 92px; }
	.cz-footer > div + div { margin-block-start: 14px; }

	.cz-mobile-book {
		display: flex;
		position: fixed;
		inset-block-end: 14px;
		inset-inline: 14px;
		z-index: 40;
		opacity: 0;
		pointer-events: none;
		transform: translateY(18px);
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	body.cz-scrolled .cz-mobile-book {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cz-tape__track,
	.cz-hero.is-undone .cz-headline__answer { animation: none; }

	.cz-project__media img,
	.cz-project:hover .cz-project__media img,
	.cz-role,
	.cz-mobile-book { transition: none; }
}