/* ==========================================================================
   Forte · contract v2 (docs/02-art-direction.md): bright, colorful, the logo as a puzzle.
   Palette and type from the brand book (docs/client/drive/ספר מותג.pdf).
   Radius is 0 everywhere. Loose pieces may tilt; assembled pieces are always straight.
   ========================================================================== */

/* Fonts ------------------------------------------------------------------ */
/* FbTubic Sans HebEng (Fontbit), the display face. Each weight ships as its own file. */
@font-face { font-family: "FbTubic"; src: url("../fonts/fbtubic-sans-extralight.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "FbTubic"; src: url("../fonts/fbtubic-sans-light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "FbTubic"; src: url("../fonts/fbtubic-sans-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "FbTubic"; src: url("../fonts/fbtubic-sans-medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "FbTubic"; src: url("../fonts/fbtubic-sans-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "FbTubic"; src: url("../fonts/fbtubic-sans-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "FbCoherenti"; src: url("../fonts/fbcoherentisansenheb-regularwebfont.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "FbCoherenti"; src: url("../fonts/fbcoherentisansenheb-mediumwebfont.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Tokens ----------------------------------------------------------------- */
:root {
	--black: #1C1A23;
	--white: #FFFFFF;
	--blue: #3F84FF;
	--green: #00FFAC;
	--pink: #FF3880;
	--yellow: #FFC200;
	--indigo: #230E5B;
	--tint-blue: #EEF4FF;
	--tint-pink: #FFF0F5;
	--tint-green: #E8FFF6;
	--tint-yellow: #FFF7DE;
	--grad-strategy: linear-gradient(45deg, var(--green), var(--blue));
	--grad-creative: linear-gradient(45deg, var(--pink), var(--yellow));

	--font-display: "FbTubic", system-ui, sans-serif;
	--font-body: "FbCoherenti", system-ui, sans-serif;
	--font-latin: "Poppins", system-ui, sans-serif;
	--fs-hero: clamp(60px, 9.4vw, 160px);
	--fs-stat: clamp(72px, 11vw, 190px);
	--fs-h2: clamp(42px, 6vw, 100px);
	--fs-h3: clamp(24px, 2.6vw, 40px);
	--fs-lead: clamp(19px, 1.5vw, 24px);
	--fs-body: 17px;
	--fs-small: 14px;
	--fs-btn: 18px;
	--fs-label: 12px;

	--s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px; --s-8: 64px;
	--s-12: 96px; --s-16: 128px; --s-20: 160px; --s-24: 192px;
	--border: 2px;
	--oh-x: 8px;
	--oh-y: 16px;

	--ease-snap: cubic-bezier(.22, 1, .36, 1);
	--ease-snap6: cubic-bezier(.34, 1.36, .64, 1);
	--ease-pop: cubic-bezier(.34, 1.36, .64, 1);
	--ease-out: cubic-bezier(.2, .8, .2, 1);
	--t-fast: 160ms;
	--t-base: 240ms;
	--t-slow: 400ms;

	--gutter: 16px;
	--header-h: 64px;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --header-h: 72px; } }

/* Base ------------------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-3)); background: var(--white); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html.menu-open { overflow: hidden; }
body {
	margin: 0;
	background: var(--white); color: var(--black);
	font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65;
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	--fg: var(--black); --bg: var(--white); --dot: var(--indigo); --accent: var(--pink); --muted: #5A5765;
	--line: rgba(28, 26, 35, .12); --line-strong: rgba(28, 26, 35, .3);
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .22em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0; }
input, select, textarea { font: inherit; color: inherit; border-radius: 0; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
::selection { background: var(--yellow); color: var(--black); }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; z-index: 100; top: var(--s-1); inset-inline-start: var(--s-1); padding: var(--s-1) var(--s-2); background: var(--pink); color: var(--black); font-weight: 500; text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.icon { display: block; }

/* Section themes ---------------------------------------------------------- */
.s-light, .s-tint-pink, .s-tint-blue, .s-tint-green, .s-tint-yellow { color: var(--black); --fg: var(--black); --dot: var(--indigo); --muted: #5A5765; --line: rgba(28, 26, 35, .12); --line-strong: rgba(28, 26, 35, .3); }
.s-light { background: var(--white); --bg: var(--white); }
.s-tint-pink { background: var(--tint-pink); --bg: var(--tint-pink); }
.s-tint-blue { background: var(--tint-blue); --bg: var(--tint-blue); }
.s-tint-green { background: var(--tint-green); --bg: var(--tint-green); }
.s-tint-yellow { background: var(--tint-yellow); --bg: var(--tint-yellow); }
.s-dark { background: var(--black); color: var(--white); --fg: var(--white); --bg: var(--black); --dot: var(--pink); --accent: var(--green); --muted: #BAB7C7; --line: rgba(255, 255, 255, .14); --line-strong: rgba(255, 255, 255, .32); }
.s-pink { background: var(--pink); color: var(--black); --fg: var(--black); --bg: var(--pink); --dot: var(--black); --accent: var(--black); --muted: var(--black); --line: rgba(28, 26, 35, .25); --line-strong: rgba(28, 26, 35, .45); }
.s-yellow { background: var(--yellow); color: var(--black); --fg: var(--black); --bg: var(--yellow); --dot: var(--black); --accent: var(--black); --muted: var(--black); --line: rgba(28, 26, 35, .2); --line-strong: rgba(28, 26, 35, .4); }

/* Type ------------------------------------------------------------------- */
.t-hero { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-hero); line-height: .92; letter-spacing: -.015em; text-wrap: balance; }
.t-h2 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h2); line-height: .96; letter-spacing: -.01em; text-wrap: balance; }
.t-h3 { font-family: var(--font-display); font-weight: 900; font-size: var(--fs-h3); line-height: 1.05; text-wrap: balance; }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; max-width: 40ch; }

/* The brand period: a square on the baseline, ~17% of the letter height. */
.dot { display: inline-block; width: .13em; height: .13em; margin-inline-start: .07em; background: var(--dot, var(--indigo)); vertical-align: baseline; }

/* Numbered section label: where am I. */
.eyebrow { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-3); font: 500 var(--fs-small)/1 var(--font-body); color: var(--muted); }
.eyebrow__n { padding: 5px 7px; background: var(--fg); color: var(--bg); font: 500 12px/1 var(--font-latin); letter-spacing: .04em; }
.s-dark .eyebrow__n { background: var(--green); color: var(--black); }

/* "Next: 03 · התהליך" at the end of a section: where am I going. */
.next { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-8); padding-block: var(--s-1); font: 500 15px/1 var(--font-body); color: var(--fg); text-decoration: none; }
.next__k { color: var(--muted); }
.next__n { padding: 4px 6px; border: 1.5px solid currentColor; font: 500 12px/1 var(--font-latin); }
.next .icon { width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease-out); }
@media (hover: hover) { .next:hover .icon { transform: translateY(4px); } .next:hover .next__l { text-decoration: underline; } }

/* Buttons and links ------------------------------------------------------ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s-1);
	min-height: 48px; padding: 12px var(--s-3);
	font: 500 var(--fs-btn)/1.1 var(--font-display);
	text-decoration: none;
	border: var(--border) solid transparent;
	transition: box-shadow var(--t-base) var(--ease-snap), transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.btn .icon { flex: none; width: 20px; height: 20px; }
.btn--pink { background: var(--pink); color: var(--black); box-shadow: 0 0 0 0 var(--blue); }
.btn--ink { background: var(--black); color: var(--white); box-shadow: 0 0 0 0 var(--yellow); }
.btn--line { border-color: currentColor; background: transparent; }
.btn--big { min-height: 56px; padding: var(--s-2) var(--s-4); font-size: 20px; }
.btn[disabled] { cursor: progress; }
.btn--pink:active, .btn--ink:active { transform: translate(var(--oh-x), var(--oh-y)); box-shadow: 0 0 0 0 transparent; }
@media (hover: hover) {
	.btn--pink:hover { box-shadow: var(--oh-x) var(--oh-y) 0 0 var(--blue); }
	.btn--ink:hover { box-shadow: var(--oh-x) var(--oh-y) 0 0 var(--yellow); }
	.btn--line:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
}

.link-arrow { display: inline-flex; align-items: center; gap: 6px; font: 500 17px/1.3 var(--font-display); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .28em; }
.link-arrow .icon { flex: none; width: 18px; height: 18px; transition: transform var(--t-fast) var(--ease-out); }
@media (hover: hover) { .link-arrow:hover .icon { transform: translateX(-6px); } }

.sq-btn { display: grid; place-items: center; width: 48px; height: 48px; border: var(--border) solid currentColor; transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.sq-btn .icon { width: 22px; height: 22px; }
.sq-btn:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .sq-btn:not(:disabled):hover { background: var(--fg); color: var(--bg); } }

.tag { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--font-body); }
.tag::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--c, var(--accent)); }
.tag--strategy { --c: var(--blue); }
.tag--creative { --c: var(--pink); }
.demo-tag { display: inline-block; padding: 3px 5px; border: 1.5px dashed currentColor; font: 500 10px/1 var(--font-latin); letter-spacing: .08em; vertical-align: middle; opacity: .75; }

.faq__item[open] .icon .i-v { display: none; }

/* Reveal on scroll: text rises out of a mask, once. ------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] { opacity: 0; transform: translateY(var(--s-2)); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
	.js [data-reveal].is-in { opacity: 1; transform: none; }
	.js .rv[data-reveal] { opacity: 1; transform: none; clip-path: inset(-.3em -.2em -.25em -.2em); }
	.js .rv[data-reveal] .rv__in { display: block; transform: translateY(135%); transition: transform var(--t-slow) var(--ease-out); }
	.js .rv[data-reveal].is-in .rv__in { transform: none; }
}

/* Header ----------------------------------------------------------------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h); background: var(--white); color: var(--black); box-shadow: 0 1px 0 var(--line); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header__inner { position: relative; height: 100%; display: flex; align-items: center; gap: var(--s-4); }
.brand { display: block; flex: none; height: 34px; line-height: 0; }
@media (min-width: 1024px) { .brand { height: 40px; } }
.brand__logo { width: auto; height: 100%; }
.logo__canvas { fill: var(--black); }
.logo__blue { fill: var(--blue); }
.logo__pink { fill: var(--pink); }
.logo__word { fill: var(--black); }
.logo__dot { fill: var(--indigo); }
/* Hover the header logo: the blocks loosen from the canvas and the period hops. */
.logo__blue, .logo__pink { transition: translate 460ms var(--ease-pop); }
@media (hover: hover) {
	.brand:hover .logo__blue { translate: 24px -24px; }
	.brand:hover .logo__pink { translate: 24px 24px; }
	.brand:hover .logo__dot { animation: dot-hop 560ms var(--ease-out); }
}
@keyframes dot-hop { 40% { translate: 0 -54px; } }

.nav { margin-inline-start: auto; }
.nav ul { display: flex; gap: var(--s-4); }
.nav a { display: block; padding-block: var(--s-1); font: 500 16px/1 var(--font-body); text-decoration: none; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 2px no-repeat; transition: background-size var(--t-base) var(--ease-snap); }
.nav a.is-current { background-size: 100% 2px; background-image: linear-gradient(var(--pink), var(--pink)); }
@media (hover: hover) { .nav a:hover { background-size: 100% 2px; } }
.header-cta { min-height: 40px; padding: 8px var(--s-2); font-size: 16px; }

.menu-btn { display: none; width: 44px; height: 44px; place-items: center; margin-inline-start: auto; }
.menu-btn__icon { width: 32px; height: 32px; }
.mi-canvas { fill: var(--black); }
.mi-blue { fill: var(--blue); }
.mi-pink { fill: var(--pink); }

.where { display: none; }
.progress { display: none; }

@media (max-width: 1023px) {
	.nav, .header-cta { display: none; }
	.menu-btn { display: grid; }
	.where { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 6px; font: 500 13px/1 var(--font-body); white-space: nowrap; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
	.where__n { padding: 3px 5px; background: var(--black); color: var(--white); font: 500 11px/1 var(--font-latin); }
	.where.is-on { opacity: 1; }
	.progress { position: absolute; inset: auto 0 0 0; display: flex; gap: 2px; height: 3px; }
	.progress i { flex: 1; background: var(--line); transition: background-color var(--t-fast) var(--ease-out); }
	.progress i.is-done { background: var(--black); }
	.progress i.is-current { background: var(--pink); }
}

/* Before the hero has assembled, the header has no logo and no CTA: the hero carries both. */
.fold-ready:not(.is-folded) .site-header { box-shadow: none; background: transparent; }
.fold-ready:not(.is-folded) .site-header .logo__mark { visibility: hidden; }
.fold-ready:not(.is-folded) .site-header .logo__word,
.fold-ready:not(.is-folded) .site-header .logo__dot { opacity: 0; }
.fold-ready:not(.is-folded) .header-cta,
.fold-ready:not(.is-folded) .rail { visibility: hidden; }
.fold-ready.is-folded .hero__mark { visibility: hidden; }

/* Wayfinding rail (desktop) ---------------------------------------------- */
.rail { position: fixed; left: var(--s-3); top: 50%; z-index: 45; transform: translateY(-50%); display: none; color: var(--black); }
@media (min-width: 1024px) { .rail { display: block; } }
.rail ol { display: grid; gap: 4px; }
.rail a { display: flex; align-items: center; gap: 10px; padding-block: 5px; direction: ltr; text-decoration: none; }
.rail__sq { flex: none; width: 10px; height: 10px; box-shadow: inset 0 0 0 1.5px currentColor; transition: width var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.rail__label { direction: rtl; padding: 4px 8px; background: var(--black); color: var(--white); font: 500 13px/1 var(--font-body); white-space: nowrap; visibility: hidden; }
.rail__n { font: 500 11px/1 var(--font-latin); opacity: .7; }
.rail a.is-active .rail__sq { width: 18px; background: var(--pink); box-shadow: none; }
.rail.show-label a.is-active .rail__label,
.rail a:hover .rail__label,
.rail a:focus-visible .rail__label { visibility: visible; }
.rail.on-dark { color: var(--white); }
.rail.on-dark .rail__label { background: var(--white); color: var(--black); }
.rail.on-color a.is-active .rail__sq { background: var(--black); }

/* Mobile menu: the mark pulled apart into three link blocks. -------------- */
.menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--s-4); background: var(--white); color: var(--black); }
.menu[hidden] { display: none; }
.menu__top { flex: none; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.menu__close { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; font: 500 16px/1 var(--font-body); }
.menu__close .icon { width: 24px; height: 24px; }
.menu__blocks { display: grid; gap: var(--s-2); padding-block: var(--s-3); align-content: start; }
.menu__block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); padding: var(--s-3); color: var(--black); }
.menu__block a { font: 900 clamp(28px, 8vw, 40px)/1.15 var(--font-display); text-decoration: none; }
.menu__block--canvas { background: var(--black); color: var(--white); margin-right: var(--s-3); }
.menu__block--blue { background: var(--blue); margin-left: 34%; }
.menu__block--pink { background: var(--pink); margin-left: 16%; }
.menu__contact { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; color: var(--muted); font-size: var(--fs-small); }
@media (prefers-reduced-motion: no-preference) {
	.menu.is-open .menu__block { animation: snap-in var(--t-base) var(--ease-snap) both; }
	.menu.is-open .menu__block--blue { animation-delay: 60ms; }
	.menu.is-open .menu__block--pink { animation-delay: 120ms; }
}
@keyframes snap-in { from { transform: translateX(var(--s-4)) rotate(-4deg); visibility: hidden; } to { transform: none; visibility: visible; } }

/* 00 Hero: the pieces start scattered and assemble on scroll. -------------- */
.hero { position: relative; background: var(--white); color: var(--black); }
.hero__pin { position: relative; height: 100svh; min-height: 640px; }
/* Size container on a non-sticky child: containment on the sticky element itself stops Chromium from painting it. */
.hero__box { position: absolute; inset: 0; container-type: size; }
.hero--scrub { height: calc(max(100vh, 640px) + 75vh); }
.hero--scrub .hero__pin { position: sticky; top: 0; height: 100vh; }

.hero__copy {
	position: absolute; z-index: 2;
	right: var(--gutter); top: 50%;
	width: min(56%, 820px);
	transform: translateY(-44%);
	display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
}
.hero__meta { display: flex; align-items: center; gap: var(--s-1); font: 500 var(--fs-small)/1.4 var(--font-body); color: var(--muted); }
.hero__meta::before { content: ""; width: var(--s-1); height: var(--s-1); background: var(--pink); }
.hero__title { font: 900 var(--fs-hero)/.92 var(--font-display); letter-spacing: -.015em; --dot: var(--indigo); }
.hero__title .line { display: block; clip-path: inset(-.45em -.2em -.28em -.2em); }
.hero__title .line__in { display: block; }
.hero__slogan { font: 300 clamp(18px, 1.6vw, 26px)/1.2 var(--font-latin); letter-spacing: .01em; }
.hero__lead { max-width: 38ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }

.hero__stage { position: absolute; z-index: 1; left: var(--gutter); top: var(--header-h); bottom: 0; width: 40%; display: grid; place-items: center; pointer-events: none; --hv: min(44cqh, 30cqw, 400px); }
.hero__slot { position: relative; }
.hero__mark { position: relative; width: calc(var(--hv) * .9438); height: calc(var(--hv) * 1.2323); direction: ltr; }
.hp { position: absolute; display: block; will-change: transform; }
.hp--canvas { left: 0; top: 0; width: calc(var(--hv) * .8289); height: var(--hv); background: var(--black); }
.hp--blue { left: calc(var(--hv) * .5454); top: calc(var(--hv) * .2116); width: calc(var(--hv) * .3984); height: calc(var(--hv) * .3232); background: var(--blue); }
.hp--pink { left: calc(var(--hv) * .4141); top: calc(var(--hv) * .7071); width: calc(var(--hv) * .5297); height: calc(var(--hv) * .5252); background: var(--pink); }
.hp--green { left: calc(var(--hv) * -.34); top: calc(var(--hv) * -.08); width: calc(var(--hv) * .2); height: calc(var(--hv) * .2); background: var(--green); }
.hp--yellow { left: calc(var(--hv) * .96); top: calc(var(--hv) * 1.06); width: calc(var(--hv) * .24); height: calc(var(--hv) * .24); background: var(--yellow); }
.hero__ghost { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hero__ghost i { position: absolute; display: block; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.hero__ghost .g-canvas { left: 0; top: 0; width: calc(var(--hv) * .8289); height: var(--hv); }
.hero__ghost .g-blue { left: calc(var(--hv) * .5454); top: calc(var(--hv) * .2116); width: calc(var(--hv) * .3984); height: calc(var(--hv) * .3232); }
.hero__ghost .g-pink { left: calc(var(--hv) * .4141); top: calc(var(--hv) * .7071); width: calc(var(--hv) * .5297); height: calc(var(--hv) * .5252); }
.hero__ghost-note { position: absolute; top: calc(100% + var(--s-2)); left: 0; right: 0; text-align: center; direction: rtl; font: 500 var(--fs-small)/1.3 var(--font-body); color: var(--muted); }
.hero__hint { position: absolute; bottom: var(--s-4); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; font: 500 var(--fs-small)/1 var(--font-body); color: var(--muted); white-space: nowrap; }
.hero__hint .icon { width: 16px; height: 16px; }
.js:not(.fold-ready) .hero__hint { display: none; }

@container (orientation: portrait) {
	.hero__copy { top: calc(var(--header-h) + var(--s-3)); left: var(--gutter); right: var(--gutter); width: auto; transform: none; gap: 12px; }
	.hero__ctas .btn--line { display: none; }
	.hero__stage { top: auto; left: 0; right: 0; width: auto; height: 42%; --hv: min(27cqh, 46cqw, 260px); }
	.hero__hint { bottom: var(--s-2); }
}

/* Intro, once per session: the pieces tumble in and land (as in the brand's logo animation). */
@media (prefers-reduced-motion: no-preference) {
	.intro .hp { animation: hp-in 720ms var(--ease-out) both; }
	.intro .hp--blue { animation-delay: 90ms; }
	.intro .hp--pink { animation-delay: 170ms; }
	.intro .hp--green { animation-delay: 250ms; }
	.intro .hp--yellow { animation-delay: 300ms; }
	.intro .hero__title .line__in { animation: in-line var(--t-slow) var(--ease-out) 300ms both; }
	.intro .hero__title .line + .line .line__in { animation-delay: 420ms; }
	.intro .hero__title .dot--title { animation: in-dot 180ms var(--ease-out) 820ms both; }
	.intro .hero__slogan, .intro .hero__lead, .intro .hero__ctas, .intro .hero__meta { animation: in-fade var(--t-base) var(--ease-out) 640ms both; }
}
@keyframes hp-in { from { translate: 0 -70vh; rotate: -160deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes in-line { from { transform: translateY(140%); } to { transform: none; } }
@keyframes in-dot { from { transform: translateY(-200%); visibility: hidden; } to { transform: none; visibility: visible; } }
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }

/* The puzzle stage, shared by the story playground and the work fingerprints. */
.pz { position: relative; direction: ltr; }
.pz > span { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); }
.pz__canvas { background: var(--black); }
.pz__blue { background: var(--blue); }
.pz__pink { background: var(--pink); }


/* Scenes: a piece grows into the next section's background, then the title arrives line by line. */
.scene { position: relative; height: 175vh; background: var(--white); }
.scene__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; align-items: center; }
.scene__fill { position: absolute; left: calc(var(--fx) * 100%); top: calc(var(--fy) * 100%); width: 16vmin; height: 16vmin; background: var(--scene-c); transform: translate(-50%, -50%) rotate(var(--fr)); will-change: transform; }
.scene--pink { --scene-c: var(--pink); color: var(--black); --dot: var(--black); }
.scene--black { --scene-c: var(--black); color: var(--white); --dot: var(--pink); }
.scene--yellow { --scene-c: var(--yellow); color: var(--black); --dot: var(--black); }
.scene__inner { position: relative; z-index: 1; }
.scene__eyebrow { margin-bottom: var(--s-3); color: inherit; }
.scene__eyebrow .scene__in { display: inline-flex; align-items: center; gap: var(--s-1); }
.scene--black .eyebrow__n { background: var(--green); color: var(--black); }
.scene--pink .eyebrow__n, .scene--yellow .eyebrow__n { background: var(--black); color: var(--white); }
.scene__title { font: 900 clamp(64px, 12.5vw, 230px)/.9 var(--font-display); letter-spacing: -.02em; }
.scene__line { display: block; clip-path: inset(-.4em -.3em -.12em -.3em); }
.scene__in { display: block; transform: translateY(160%); transition: transform 620ms cubic-bezier(.22, 1, .36, 1); }
.scene__line.is-in .scene__in { transform: none; }
.scene.is-static, html:not(.js) .scene { height: auto; }
.scene.is-static .scene__pin, html:not(.js) .scene__pin { position: relative; height: auto; min-height: 56vh; padding-block: var(--s-12); background: var(--scene-c); }
.scene.is-static .scene__fill, html:not(.js) .scene__fill { display: none; }
.scene.is-static .scene__in, html:not(.js) .scene__in { transform: none; }
@media (max-width: 767px) { .scene { height: 150vh; } .scene__title { font-size: clamp(58px, 17vw, 96px); } }

/* Headings that are not all alike. */
.h-mix { font-family: var(--font-display); text-wrap: balance; }
.h-mix__small { display: block; margin-bottom: .1em; font: 300 clamp(30px, 3.6vw, 58px)/1.05 var(--font-display); }
.h-mix__big { display: block; font: 900 var(--fs-h2)/.95 var(--font-display); letter-spacing: -.01em; }
.mark-piece { display: inline-block; padding: 0 .14em .04em; background: var(--yellow); box-shadow: .06em .1em 0 var(--black); transform: rotate(-2.5deg); }
.sqdots { display: inline-flex; gap: .08em; margin-inline: .05em .12em; vertical-align: baseline; }
.sqdots i { width: .16em; height: .16em; background: var(--blue); }
.sqdots i + i { background: var(--pink); }
.faq__title-row { display: flex; align-items: flex-end; gap: var(--s-3); }
.qpix { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: clamp(64px, 6vw, 96px); direction: ltr; }
.qpix i { aspect-ratio: 1; }
.qpix i.on { background: var(--pink); }
.qpix i:nth-child(33) { background: var(--blue); }

/* Department panels snap onto the canvas, like the blocks onto the logo. */
@media (prefers-reduced-motion: no-preference) {
	.js .dept[data-reveal] { opacity: 1; transform: translateX(14%) rotate(5deg); transition: transform 900ms var(--ease-pop); }
	.js .dept--creative[data-reveal] { transform: translateX(18%) rotate(-6deg); }
	.js .dept[data-reveal].is-in { transform: none; }
}

/* 01 Story -------------------------------------------------------------- */
.story__body { padding-block: var(--s-8) clamp(56px, 6vw, 80px); }
.story__grid { display: grid; gap: var(--s-8); align-items: center; }
.story__lead { margin-bottom: var(--s-2); }
.story__p { max-width: 52ch; color: var(--muted); }
.story__quote { margin-top: var(--s-6); padding-inline-start: var(--s-3); border-inline-start: 4px solid var(--black); }
.story__quote blockquote { font: 500 clamp(20px, 1.8vw, 26px)/1.4 var(--font-display); }
.story__quote figcaption { margin-top: var(--s-1); font-size: var(--fs-small); color: var(--muted); }
.story__play { padding: var(--s-4); background: var(--white); box-shadow: var(--oh-x) var(--oh-y) 0 0 var(--black); margin-right: var(--oh-x); }
.pz--story { aspect-ratio: 1; width: 100%; }
.pz--story > span { transition: left var(--t-slow) var(--ease-snap6), top var(--t-slow) var(--ease-snap6), width var(--t-slow) var(--ease-snap6), height var(--t-slow) var(--ease-snap6); }
.story__legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: var(--s-3); font-size: var(--fs-small); }
.lg { display: flex; align-items: center; gap: 6px; }
.lg::before { content: ""; width: 12px; height: 12px; background: var(--c); }
.lg--canvas { --c: var(--black); }
.lg--blue { --c: var(--blue); }
.lg--pink { --c: var(--pink); }
.story__ctrl { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--border) solid var(--line); }
.story__case strong { display: block; font: 900 22px/1.2 var(--font-display); }
.story__case span { font-size: 15px; color: var(--muted); }
@media (min-width: 1024px) {
	.story__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-3); }
	.story__text { grid-column: 1 / span 6; }
	.story__play { grid-column: 8 / span 5; }
}

/* 02 Departments: the logo as a layout ----------------------------------- */
.depts { padding-block: clamp(80px, 9vw, 128px) clamp(64px, 7vw, 96px); }
.depts__head { margin-bottom: var(--s-8); }
.depts__head .t-h2 { max-width: 14ch; }
.depts__lead { margin-top: var(--s-3); color: var(--muted); }
.depts__grid { display: grid; gap: var(--s-3); }
.dept { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-4); color: var(--black); }
.dept--strategy { background: var(--blue); --c2: var(--green); }
.dept--creative { background: var(--pink); --c2: var(--yellow); }
.dept__brand { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--white); color: var(--black); }
.dmark { flex: none; width: 24px; height: auto; }
.dmark__canvas { fill: var(--black); }
.dmark--strategy .dmark__top { fill: var(--green); }
.dmark--strategy .dmark__bottom { fill: var(--blue); }
.dmark--creative .dmark__top { fill: var(--yellow); }
.dmark--creative .dmark__bottom { fill: var(--pink); }
.dept__word { font: 600 17px/1 var(--font-latin); letter-spacing: .01em; }
.dept--strategy .dept__word { background: var(--grad-strategy); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dept--creative .dept__word { background: var(--grad-creative); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dept__slogan { font: 300 13px/1 var(--font-latin); letter-spacing: .12em; color: #5A5765; }
.dept__name { font: 900 clamp(32px, 3.4vw, 54px)/1 var(--font-display); }
.dept__tag { font: 500 clamp(18px, 1.5vw, 22px)/1.3 var(--font-display); }
.dept__list { display: grid; gap: var(--s-2); width: 100%; }
.dept__list li { display: grid; gap: 2px; padding-inline-start: var(--s-3); position: relative; }
.dept__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .5em; width: 10px; height: 10px; background: var(--c2); box-shadow: 2px 2px 0 var(--black); }
.dept__list strong { font: 500 18px/1.3 var(--font-display); }
.dept__list span { font-size: 15px; line-height: 1.5; }
.dept-canvas { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); padding: var(--s-4); background: var(--black); color: var(--white); overflow: hidden; --dot: var(--pink); }
.dept-canvas__title { font: 900 var(--fs-h3)/1.05 var(--font-display); }
.dept-canvas p { max-width: 38ch; }
.dept-canvas__honest { color: var(--yellow); font-weight: 500; }
.dept-canvas::after { content: "FORTE."; position: absolute; left: var(--s-2); bottom: var(--s-3); writing-mode: vertical-rl; direction: ltr; unicode-bidi: isolate; transform: rotate(180deg); font: 600 clamp(64px, 8vw, 140px)/1 var(--font-latin); color: rgba(255, 255, 255, .07); pointer-events: none; }
@media (min-width: 768px) { .dept__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-4); } }
@media (min-width: 1024px) {
	.depts__grid { grid-template-columns: repeat(12, 1fr); column-gap: 0; row-gap: var(--s-3); }
	.dept--strategy { grid-column: 2 / span 6; grid-row: 1; z-index: 2; margin-top: var(--s-6); }
	.dept--creative { grid-column: 1 / span 7; grid-row: 2; z-index: 2; margin-bottom: calc(var(--s-8) * -1); }
	.dept-canvas { grid-column: 6 / span 7; grid-row: 1 / span 2; z-index: 1; padding-inline-start: calc(200% / 7 + var(--s-4)); justify-content: flex-start; }
}

/* 03 Process: take apart, find, assemble, run ---------------------------- */
.process__body { padding-block: var(--s-6) clamp(56px, 6vw, 80px); }
.process__grid { display: grid; gap: var(--s-6); }
.process__head { margin-bottom: var(--s-6); }
.process__head .t-lead { margin-top: var(--s-3); color: var(--muted); }
.psteps { display: grid; gap: var(--s-6); }
.pstep { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: var(--border) solid var(--line); }
.pstep__index { font: 500 13px/1 var(--font-latin); color: var(--green); }
.pstep__title { font: 900 var(--fs-h3)/1.05 var(--font-display); }
.pstep__body { max-width: 46ch; color: var(--muted); }
.process__stage { display: none; }

.pstage { position: relative; }
.pstage__box { --hv: min(40vh, 24vw, 340px); position: relative; width: calc(var(--hv) * 1.1166); height: calc(var(--hv) * 1.2323); direction: ltr; }
.ps { position: absolute; display: block; transition: transform var(--t-slow) var(--ease-snap6), opacity var(--t-base) var(--ease-out), outline-color var(--t-fast) var(--ease-out); outline: 3px solid transparent; outline-offset: 6px; }
.ps--canvas { left: 0; top: 0; width: calc(var(--hv) * .8289); height: var(--hv); background: var(--blue); }
.ps--blue { left: calc(var(--hv) * .5454); top: calc(var(--hv) * .2116); width: calc(var(--hv) * .3984); height: calc(var(--hv) * .3232); background: var(--white); }
.ps--pink { left: calc(var(--hv) * .4141); top: calc(var(--hv) * .7071); width: calc(var(--hv) * .5297); height: calc(var(--hv) * .5252); background: var(--pink); }
.ps--dot { left: var(--hv); top: calc(var(--hv) * .8834); width: calc(var(--hv) * .1166); height: calc(var(--hv) * .1166); background: var(--green); }
.ps-ring { display: none; }
/* s1 take apart: pieces separated and tilted */
.pstage.s1 .ps--canvas, .pstage.s2 .ps--canvas { transform: translate(-10%, 8%) rotate(-7deg); }
.pstage.s1 .ps--blue, .pstage.s2 .ps--blue { transform: translate(70%, -70%) rotate(16deg); }
.pstage.s1 .ps--pink, .pstage.s2 .ps--pink { transform: translate(34%, 46%) rotate(-13deg); }
.pstage.s1 .ps--dot, .pstage.s2 .ps--dot, .pstage.s3 .ps--dot { transform: translateY(-260%); opacity: 0; }
/* s2 find the forte: one piece lights up, the rest step back */
.pstage.s2 .ps--canvas, .pstage.s2 .ps--blue { background: transparent; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4); }
.pstage.s2 .ps--pink { outline-color: var(--green); }
/* s3 assemble, s4 run: straight and together; the period lands */
.pstage__caption { margin-top: var(--s-4); font: 500 15px/1 var(--font-body); color: var(--muted); text-align: center; }
.pstage__caption span:first-child { font-family: var(--font-latin); color: var(--green); }
.pstage--mini .pstage__box { --hv: 92px; margin-bottom: var(--s-4); }
.pstage--mini .ps { transition: none; }

@media (min-width: 1024px) {
	.process__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-3); }
	.process__col { grid-column: 1 / span 6; }
	.process__stage { display: block; grid-column: 8 / span 5; }
	.process__stage .pstage { position: sticky; top: calc(var(--header-h) + var(--s-4)); height: calc(100vh - var(--header-h) - var(--s-8)); display: grid; place-content: center; justify-items: center; }
	.pstage--mini { display: none; }
	.psteps { gap: 0; }
	.pstep { min-height: 60vh; align-content: center; padding: 0; border-top: 0; opacity: .3; transition: opacity var(--t-base) var(--ease-out); }
	.pstep.is-active { opacity: 1; }
}

/* 04 Works: strip on a baseline ---------------------------------------- */
.works { padding-block: clamp(80px, 9vw, 128px) clamp(56px, 6vw, 80px); }
.works__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.works__lead { margin-top: var(--s-3); color: var(--muted); }
.works__nav { flex: none; display: flex; gap: var(--s-1); }
@media (max-width: 767px) { .works__nav { display: none; } }
.works__track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-inline: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); scroll-padding-inline: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); }
.works__track::-webkit-scrollbar { display: none; }
.works__list { --strip-h: 300px; display: flex; gap: var(--s-4); width: max-content; padding-bottom: var(--s-2); background: linear-gradient(var(--black), var(--black)) 0 var(--strip-h) / 100% 2px no-repeat; }
@media (min-width: 1024px) { .works__list { --strip-h: 440px; gap: var(--s-6); } }
.work { flex: none; scroll-snap-align: start; }
.work--45 { width: calc(var(--strip-h) * .8); }
.work--11 { width: calc(var(--strip-h) * .76); }
.work--54 { width: calc(var(--strip-h) * 1.02); }
.work__frame { height: var(--strip-h); display: flex; align-items: flex-end; }
.work__media { position: relative; width: 100%; overflow: hidden; background: var(--tint); box-shadow: var(--oh-x) var(--oh-y) 0 0 var(--c); }
.work--strategy { --tint: var(--tint-blue); --c: var(--blue); }
.work--creative { --tint: var(--tint-pink); --c: var(--pink); }
.work__media img { width: 100%; height: 100%; object-fit: cover; }
.work--45 .work__media { aspect-ratio: 4 / 5; }
.work--11 .work__media { aspect-ratio: 1; }
.work--54 .work__media { aspect-ratio: 5 / 4; }
.pz--work { position: absolute; inset: 0; margin: auto; height: 72%; aspect-ratio: 1; }
/* Hover: the project's own arrangement settles into the logo ("found its forte"). Values = the story's "פורטה" preset. */
.pz--work > span { transition: left 520ms var(--ease-pop), top 520ms var(--ease-pop), width 520ms var(--ease-pop), height 520ms var(--ease-pop); }
.pz--work > .pz__blue { transition-delay: 50ms; }
.pz--work > .pz__pink { transition-delay: 100ms; }
@media (hover: hover) {
	.work:hover .pz--work .pz__canvas { --x: 19.8% !important; --y: 10.6% !important; --w: 53% !important; --h: 64% !important; }
	.work:hover .pz--work .pz__blue { --x: 54.7% !important; --y: 24.1% !important; --w: 25.5% !important; --h: 20.7% !important; }
	.work:hover .pz--work .pz__pink { --x: 46.3% !important; --y: 55.9% !important; --w: 33.9% !important; --h: 33.6% !important; }
}
.work__meta { padding-top: var(--s-4); }
.work__metric { font: 900 clamp(40px, 4vw, 64px)/1 var(--font-display); letter-spacing: -.01em; }
.work__metric-label { margin-bottom: var(--s-2); font: 500 var(--fs-small)/1.4 var(--font-body); }
.work__client { font: 900 20px/1.2 var(--font-display); }
.work__line { max-width: 32ch; font-size: 15px; line-height: 1.5; color: var(--muted); }
.work__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin-top: var(--s-2); }

/* 05 Numbers: a full yellow field --------------------------------------- */
.numbers__body { padding-block: var(--s-6) clamp(56px, 6vw, 80px); }
.numbers__title { margin-bottom: clamp(48px, 6vw, 96px); }
.numbers__grid { display: grid; gap: var(--s-8); }
.stat__value { font: 900 var(--fs-stat)/.85 var(--font-display); letter-spacing: -.02em; }
.stat__label { max-width: 26ch; margin-top: var(--s-2); font: 500 var(--fs-lead)/1.35 var(--font-body); }
.stat__label .demo-tag { margin-inline-start: 6px; }
.waffle { display: grid; grid-template-columns: repeat(10, 12px); gap: 4px; margin-top: var(--s-3); }
.waffle i { width: 12px; height: 12px; background: var(--black); }
.waffle i:nth-child(7n) { background: var(--pink); }
.stat__unit { margin-top: var(--s-1); font: 500 var(--fs-small)/1.3 var(--font-body); }
@media (min-width: 1024px) {
	.numbers__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-3); row-gap: var(--s-6); }
	.stat:nth-child(1) { grid-column: 1 / span 6; }
	.stat:nth-child(2) { grid-column: 8 / span 5; margin-top: var(--s-16); }
	.stat:nth-child(3) { grid-column: 3 / span 6; }
}
@media (prefers-reduced-motion: no-preference) {
	.js .waffle[data-reveal] { opacity: 1; transform: none; }
	.js .waffle i { visibility: hidden; transition: visibility 0s calc(var(--i) * 14ms); }
	.js .waffle.is-in i { visibility: visible; }
}

/* 06 Testimonials ------------------------------------------------------- */
.testimonials { padding-block: clamp(80px, 9vw, 128px) clamp(56px, 6vw, 80px); }
.testimonials__head { margin-bottom: var(--s-8); }
.tst-grid { display: grid; gap: var(--s-6) var(--s-4); }
.tst { padding: var(--s-4); background: var(--white); color: var(--black); box-shadow: var(--oh-x) var(--oh-y) 0 0 var(--c); margin-right: var(--oh-x); }
.tst--strategy { --c: var(--blue); --c2: var(--green); }
.tst--creative { --c: var(--pink); --c2: var(--yellow); }
.tst__mark { display: flex; gap: 6px; margin-bottom: var(--s-3); }
.tst__mark i { width: 12px; height: 12px; background: var(--c); }
.tst__mark i + i { background: var(--c2); }
.tst__quote { font: 500 20px/1.5 var(--font-body); }
.tst--lead .tst__quote { font: 900 var(--fs-h3)/1.2 var(--font-display); }
.tst__by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-1); margin-top: var(--s-3); font-size: var(--fs-small); color: var(--muted); }
.tst__by strong { font-weight: 500; color: var(--black); }
@media (min-width: 768px) { .tst-grid { grid-template-columns: repeat(2, 1fr); } .tst--lead { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
	.tst-grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-3); row-gap: var(--s-6); align-items: start; }
	.tst:nth-child(1) { grid-column: 1 / span 7; }
	.tst:nth-child(2) { grid-column: 9 / span 4; margin-top: var(--s-12); }
	.tst:nth-child(3) { grid-column: 2 / span 4; }
	.tst:nth-child(4) { grid-column: 7 / span 5; margin-top: var(--s-8); }
	.tst:nth-child(5) { grid-column: 4 / span 5; }
}

/* 07 FAQ ----------------------------------------------------------------- */
.faq { padding-block: clamp(72px, 7vw, 96px); }
.faq__grid { display: grid; gap: var(--s-6); }
.faq__head .t-lead { margin-top: var(--s-3); color: var(--muted); }
.faq__cta { margin-top: var(--s-4); }
.faq__item { border-top: var(--border) solid var(--line); }
.faq__item:last-of-type { border-bottom: var(--border) solid var(--line); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-3); cursor: pointer; list-style: none; font: 500 clamp(19px, 1.6vw, 22px)/1.35 var(--font-display); }
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: var(--border) solid currentColor; }
.faq__icon .icon { width: 20px; height: 20px; }
.faq__item[open] .faq__icon { background: var(--pink); border-color: var(--pink); }
.faq__a { max-width: 60ch; padding-bottom: var(--s-3); color: var(--muted); }
.faq__a p + p { margin-top: var(--s-1); }
@media (min-width: 1024px) {
	.faq__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-3); }
	.faq__head { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-4)); align-self: start; }
	.faq__list { grid-column: 6 / span 7; }
}

/* 08 Brief: one sentence to complete (contract 2.2). An empty slot is a tint with a bar in its color,
   an answer fills it with that color, and the period lands once the sentence is complete. ---------- */
.brief { position: relative; overflow: hidden; padding-block: clamp(96px, 10vw, 152px) clamp(88px, 9vw, 136px); }
.brief__wrap { position: relative; z-index: 1; }
.brief__head { margin-bottom: clamp(32px, 4vw, 56px); }
.brief__lead { margin-top: var(--s-2); color: var(--muted); }
.brief__alert { max-width: 60ch; margin-bottom: var(--s-4); padding: var(--s-2) var(--s-3); border: var(--border) solid var(--pink); background: var(--white); font-weight: 500; }
.brief__form { max-width: 1180px; }
/* Honeypot: hidden without a far offset (in RTL a -9999px offset becomes scrollable overflow and zooms mobile out). */
.hpot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sentence { position: relative; font: 700 clamp(26px, 2.8vw, 44px)/1.8 var(--font-display); letter-spacing: -.005em; }
.s-line { display: block; }
.s-glue { white-space: nowrap; }
/* A prefix (מ, ל־) and a closing period sit right against their slot. */
.s-glue > .slot, .s-glue > .pick { margin-inline: .04em; }
.slot {
	--c: var(--blue); --tint: var(--tint-blue);
	display: inline-block; vertical-align: baseline; max-width: 100%; height: 1.34em;
	margin-inline: .1em; padding: 0 .3em; border: 0;
	background-color: var(--tint); color: var(--black); font: inherit; line-height: 1.34em;
	box-shadow: inset 0 -.08em 0 var(--c);
	transition: background-color var(--t-base) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), color var(--t-base) var(--ease-out);
}
.slot--biz { --c: var(--yellow); --tint: var(--tint-yellow); }
.slot--budget { --c: var(--green); --tint: var(--tint-green); }
.slot--phone { --c: var(--black); --tint: #F1F0F4; }
/* Widths before the script sizes each slot to its text. */
.slot--name { width: 5.4em; }
.slot--biz { width: 6.2em; }
.slot--phone { width: 6.6em; }
input.slot::placeholder { color: var(--muted); opacity: 1; font-weight: 400; }
input.slot:not(:placeholder-shown) { background-color: var(--c); box-shadow: none; }
input.slot--phone:not(:placeholder-shown) { color: var(--white); }
.slot:focus { outline: none; box-shadow: inset 0 -.08em 0 var(--c), .1em .2em 0 var(--black); }
input.slot:not(:placeholder-shown):focus { box-shadow: .1em .2em 0 var(--black); }
.slot[aria-invalid="true"] { --c: var(--pink); --tint: var(--tint-pink); color: var(--black); }

.slot--select {
	appearance: none; -webkit-appearance: none; width: auto; padding-inline-end: 1.1em; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5l4.5 4.5 4.5-4.5' fill='none' stroke='%231C1A23' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: left .34em center; background-size: .42em auto;
}
.slot--select:has(option[value=""]:checked) { color: var(--muted); font-weight: 400; }
.slot--select:not(:has(option[value=""]:checked)) { background-color: var(--c); box-shadow: none; }
.slot--select:not(:has(option[value=""]:checked)):focus { box-shadow: .1em .2em 0 var(--black); }
.slot--select option { font: 400 17px/1.4 var(--font-body); color: var(--black); background: var(--white); }

.picks { display: inline; }
.pick { position: relative; display: inline-block; vertical-align: baseline; margin-inline: .1em; cursor: pointer; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span { display: inline-block; height: 1.34em; padding: 0 .3em; line-height: 1.34em; box-shadow: inset 0 0 0 .06em var(--line-strong); transition: opacity var(--t-base) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.pick--strategy { --pick: var(--grad-strategy); }
.pick--creative { --pick: var(--grad-creative); }
.pick--both { --pick: var(--black); --pick-fg: var(--white); }
.pick input:checked + span { background: var(--pick); color: var(--pick-fg, var(--black)); box-shadow: none; }
.pick input:focus-visible + span { box-shadow: inset 0 0 0 .06em var(--black), .1em .2em 0 var(--black); }
.pick input:checked:focus-visible + span { box-shadow: .1em .2em 0 var(--black); }
.picks:has(input:checked) .pick:not(:has(input:checked)) span { opacity: .4; }
@media (hover: hover) {
	.pick:hover span { box-shadow: inset 0 0 0 .06em var(--black); }
	.picks:has(input:checked) .pick:hover span { opacity: 1; }
}

/* The sentence's period: lands when name and phone are in. */
.s-dot { display: inline-block; width: .17em; height: .17em; margin-inline-start: .06em; background: var(--pink); vertical-align: baseline; transform: translateY(-1.4em) scale(0); transition: transform 520ms var(--ease-pop); }
.brief__form.is-complete .s-dot, html:not(.js) .s-dot { transform: none; }

/* A piece lands: every answer pops in straight, the way loose pieces settle into the logo. */
@media (prefers-reduced-motion: no-preference) {
	input.slot:not(:placeholder-shown),
	.slot--select:not(:has(option[value=""]:checked)),
	.pick input:checked + span { animation: slot-pop 460ms var(--ease-pop); }
}
@keyframes slot-pop { from { transform: scale(.88) rotate(-3deg); } }

/* Measures typed text so a slot can grow with it. */
.slot-sizer { position: absolute; top: 0; right: 0; visibility: hidden; white-space: pre; padding: 0 .3em; pointer-events: none; }
.slot-sizer.is-ph { font-weight: 400; }
.slot-sizer.is-select { padding-inline-end: 1.1em; }

.brief__errs { display: grid; gap: 6px; margin-top: var(--s-2); }
.brief__errs .field__err { font-size: 16px; }
.brief__foot { display: grid; justify-items: start; gap: var(--s-3); margin-top: clamp(32px, 4vw, 48px); }
.brief__submit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.brief__after { font-size: var(--fs-small); color: var(--muted); }
.brief__alt { font-size: 16px; color: var(--muted); }
.brief__alt .link-arrow { color: var(--black); }
.brief__privacy { font-size: var(--fs-small); color: var(--muted); }
@media (max-width: 767px) { .brief__submit .btn { width: 100%; } }

/* Sending: the arrow gives way to three hopping squares. */
.sq-load { display: none; gap: 4px; }
.sq-load i { width: 6px; height: 6px; background: currentColor; }
.is-sending .btn .icon { display: none; }
.is-sending .sq-load { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
	.is-sending .sq-load i { animation: sq-hop 560ms var(--ease-out) infinite alternate; }
	.is-sending .sq-load i:nth-child(2) { animation-delay: 110ms; }
	.is-sending .sq-load i:nth-child(3) { animation-delay: 220ms; }
}
@keyframes sq-hop { to { transform: translateY(-5px); } }

/* The brand's post templates: tilted blocks cut by the edges and a vertical FORTE. They lean with the cursor. */
.brief__decor { position: absolute; inset: 0; pointer-events: none; }
.bd, .brief__word { position: absolute; display: block; }
.bd--yellow { left: -56px; top: -64px; width: clamp(140px, 15vw, 230px); aspect-ratio: 3 / 2; background: var(--yellow); transform: rotate(-16deg); }
.bd--blue { right: calc(clamp(110px, 11vw, 170px) / -2); bottom: calc(clamp(110px, 11vw, 170px) / -3); width: clamp(110px, 11vw, 170px); aspect-ratio: 1; background: var(--blue); transform: rotate(45deg); }
.bd--black { left: 24%; bottom: -118px; width: clamp(150px, 15vw, 230px); aspect-ratio: 3 / 2; background: var(--black); transform: rotate(28deg); }
.brief__word { left: clamp(72px, 8vw, 128px); bottom: -.06em; writing-mode: vertical-rl; direction: ltr; unicode-bidi: isolate; transform: rotate(180deg); font: 600 clamp(110px, 12vw, 200px)/.78 var(--font-latin); letter-spacing: -.02em; color: #F1F0F5; user-select: none; }
@media (max-width: 1023px) { .brief__word { display: none; } .bd--yellow, .bd--black, .bd--blue { width: 110px; } }
.field__err { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-small); font-weight: 500; }
.field__err::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--pink); }
.field__err[hidden] { display: none; }
.check { display: flex; align-items: flex-start; gap: var(--s-1); cursor: pointer; font-size: 15px; }
.check input { flex: none; appearance: none; width: 22px; height: 22px; margin: 2px 0 0; border: var(--border) solid var(--black); background: var(--white); cursor: pointer; }
.check input:checked { background: var(--black); box-shadow: inset 0 0 0 4px var(--white); }

/* Footer: the mark as contact channels (dark version from the brand book) */
.site-footer { padding-block: clamp(72px, 7vw, 96px) var(--s-4); }
.footer__grid { display: grid; gap: var(--s-8); }
.fmark { --hv: min(calc((100vw - 2 * var(--gutter)) / 1.1166 - 8px), 400px); position: relative; width: calc(var(--hv) * 1.1166); height: calc(var(--hv) * 1.2323); }
.fmark > * { position: absolute; color: var(--black); text-decoration: none; }
.fmark__canvas { left: 0; top: 0; width: calc(var(--hv) * .8289); height: var(--hv); padding: calc(var(--hv) * .04); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--blue); }
.fmark__brief { display: inline-flex; align-items: center; gap: 6px; font: 900 calc(var(--hv) * .06)/1.1 var(--font-display); text-decoration: none; }
.fmark__brief .icon { width: 1em; height: 1em; }
.fmark__mail { font: 500 max(13px, calc(var(--hv) * .036))/1.3 var(--font-body); }
.fmark__top { left: calc(var(--hv) * .5454); top: calc(var(--hv) * .2116); width: calc(var(--hv) * .3984); height: calc(var(--hv) * .3232); background: var(--white); }
.fmark__bottom { left: calc(var(--hv) * .4141); top: calc(var(--hv) * .7071); width: calc(var(--hv) * .5297); height: calc(var(--hv) * .5252); background: var(--pink); }
.fmark__top, .fmark__bottom { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 2px; padding: calc(var(--hv) * .035); transition: transform var(--t-fast) var(--ease-out); }
.fmark__big { font: 900 calc(var(--hv) * .058)/1 var(--font-display); }
.fmark__small { font: 500 max(12px, calc(var(--hv) * .034))/1.3 var(--font-body); }
.fmark__dot { left: var(--hv); top: calc(var(--hv) * .8834); width: calc(var(--hv) * .1166); height: calc(var(--hv) * .1166); background: var(--green); transition: transform var(--t-fast) var(--ease-out); }
.fmark__dot::after { content: ""; position: absolute; inset: -8px; }
@media (hover: hover) { .fmark__top:hover, .fmark__bottom:hover, .fmark__dot:hover { transform: translate(var(--s-1), var(--s-1)); } }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
@media (min-width: 768px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }
.footer__title { margin-bottom: var(--s-2); font: 500 var(--fs-small)/1 var(--font-body); color: var(--muted); }
.footer__col ul { display: grid; gap: 6px; }
.footer__col a { text-decoration: none; }
.footer__col p { max-width: 26ch; color: var(--muted); }
@media (hover: hover) { .footer__col a:hover { text-decoration: underline; } }
.footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-8); padding-top: var(--s-3); border-top: var(--border) solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.footer__signoff { margin-inline-end: auto; font: 900 20px/1 var(--font-display); color: var(--white); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.footer__bottom a { text-decoration: none; }
@media (hover: hover) { .footer__bottom a:hover { text-decoration: underline; } }
@media (min-width: 1024px) {
	.footer__grid { grid-template-columns: repeat(12, 1fr); column-gap: var(--s-3); align-items: end; }
	.fmark { --hv: clamp(300px, 26vw, 400px); grid-column: 1 / span 5; }
	.footer__cols { grid-column: 7 / span 6; }
}

/* WhatsApp square (mobile, after the fold) ------------------------------- */
.wa-float { position: fixed; left: var(--s-2); bottom: var(--s-2); z-index: 40; display: grid; place-items: center; width: 56px; height: 56px; background: var(--pink); color: var(--black); box-shadow: 4px 8px 0 var(--black); visibility: hidden; transform: translateY(var(--s-3)); transition: transform var(--t-base) var(--ease-snap), visibility 0s linear var(--t-base); }
.wa-float .icon { width: 28px; height: 28px; }
.is-folded .wa-float { visibility: visible; transform: none; transition-delay: 0s; }
@media (min-width: 1024px) { .wa-float { display: none; } }

/* 404 -------------------------------------------------------------------- */
.nf { min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--header-h) + var(--s-6)) var(--s-8); }
.nf__grid { display: grid; gap: var(--s-6); align-items: center; }
.nf__text .t-lead { margin-top: var(--s-3); color: var(--muted); }
.nf__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.nf__done { margin-top: var(--s-3); font: 900 22px/1.2 var(--font-display); }
.nf__done a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.nf__done .icon { width: 20px; height: 20px; }
.nf__play { display: grid; place-items: center; min-height: 380px; touch-action: none; user-select: none; }
.nf__mark { --hv: min(38vh, 52vw, 300px); position: relative; width: calc(var(--hv) * 1.1166); height: calc(var(--hv) * 1.2323); direction: ltr; }
.nf__mark > * { position: absolute; display: block; }
.nf__canvas { left: 0; top: 0; width: calc(var(--hv) * .8289); height: var(--hv); background: var(--blue); }
.nf__slot { z-index: 1; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.nf__blue, .nf__slot--blue { left: calc(var(--hv) * .5454); top: calc(var(--hv) * .2116); width: calc(var(--hv) * .3984); height: calc(var(--hv) * .3232); }
.nf__pink, .nf__slot--pink { left: calc(var(--hv) * .4141); top: calc(var(--hv) * .7071); width: calc(var(--hv) * .5297); height: calc(var(--hv) * .5252); }
.nf__dot, .nf__slot--dot { left: var(--hv); top: calc(var(--hv) * .8834); width: calc(var(--hv) * .1166); height: calc(var(--hv) * .1166); }
.nf__piece { z-index: 2; cursor: grab; transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)); touch-action: none; }
.nf__blue { background: var(--white); }
.nf__pink { background: var(--pink); }
.nf__dot { background: var(--green); }
.nf__piece.is-dragging { z-index: 3; cursor: grabbing; }
.nf__piece.is-placed { cursor: default; }
.nf__mark.is-snapping .nf__piece { transition: transform var(--t-base) var(--ease-snap); }
@media (min-width: 1024px) { .nf__grid { grid-template-columns: 1fr 1fr; } }

/* Thank-you -------------------------------------------------------------- */
.thanks { min-height: 100svh; padding-block: calc(var(--header-h) + var(--s-12)) var(--s-12); }
.thanks__grid { display: grid; gap: var(--s-6); }
.thanks__title { margin-bottom: var(--s-3); }
.thanks__steps { display: grid; gap: var(--s-2); max-width: 640px; }
.thanks__steps li { display: flex; align-items: baseline; gap: var(--s-2); padding-top: var(--s-2); border-top: var(--border) solid var(--line); font-size: var(--fs-lead); }
.thanks__n { flex: none; font: 600 22px/1 var(--font-latin); color: var(--pink); }
.thanks__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Generic page ---------------------------------------------------------- */
.page { min-height: 70vh; padding-block: calc(var(--header-h) + var(--s-8)) var(--s-12); }
.page__wrap { max-width: calc(72ch + 2 * var(--gutter)); }
.page__title { margin-bottom: var(--s-4); }
.page__body > * + * { margin-top: var(--s-2); }
.page__body h2 { margin-top: var(--s-6); font: 900 var(--fs-h3)/1.1 var(--font-display); }
.page__item + .page__item { margin-top: var(--s-4); }

/* Reduced motion: no intro, no assembly, instant state changes. ----------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}