/* Section layouts. Logical properties only, so the Arabic (RTL) version mirrors itself.
   Type rule (after review 2026-09-29): width contrast stays moderate (think ~72-80%, manage ~110-118%),
   letter-spacing never below -0.01em, so no two letters ever touch. */
main > section { position: relative; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-block-end: 36px; }
.section-head__note { font-size: 15px; line-height: 1.55; color: var(--steel); max-width: 300px; text-align: end; }
@media (max-width: 767px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: 10px; margin-block-end: 24px; }
  .section-head__note { text-align: start; max-width: none; }
}

/* ---------- hero ---------- */
/* Review 2026-09-29: hero + numbers strip share the first screen (the strip is visible without scrolling).
   Review 2026-09-29 ("only the photo works"): one left edge for everything, the two voices set in a
   column of their own so BUSINESS and MARKETING start on the same line, pill buttons with icon wells,
   and a quiet row of the logos he led marketing for. */
.hero {
  min-height: calc(100svh - var(--strip-h)); padding-block: calc(var(--nav-h) + 8px) 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 4vw, 64px); align-items: center;
  --hero-h: calc(100svh - var(--nav-h) - var(--strip-h) - 44px); /* the height the copy and the photo share */
}
.hero::before {
  content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; pointer-events: none;
  background: radial-gradient(900px 620px at 88% 78%, var(--ember-22), transparent 70%), radial-gradient(700px 500px at 8% 0%, var(--steel-10), transparent 70%);
}
[dir="rtl"] .hero::before { transform: scaleX(-1); }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 10px; height: 34px; padding-inline: 12px 16px; border-radius: var(--r-pill);
  background: var(--bone-04); border: 1px solid var(--bone-10); font-size: 13px; font-weight: 500; color: var(--bone-80);
}
.hero__dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.hero__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--ember); animation: dot-ping 2.2s var(--ease-ui) infinite; }
@keyframes dot-ping { from { transform: scale(0.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* Lockup (review 2026-09-30, "one edge"): each voice sits right above its big word, so badge, voices,
   words, lead, buttons and logos all start on one edge. MARKETING is measured to the width of BUSINESS
   (fitLockup in ui.js); BUSINESS grows with the width but is capped by the height, so the numbers
   strip stays in the first screen. */
.lockup { margin-block-start: 18px; display: flex; flex-direction: column; gap: 12px; width: fit-content; max-width: 100%; font-family: var(--font-display); line-height: 0.9; }
.lockup__line { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lockup__voice { font-family: var(--font-display); font-weight: 500; font-size: clamp(0.95rem, 1.2vw, 1.15rem); line-height: 1; letter-spacing: 0.01em; font-stretch: 100%; color: var(--steel); white-space: nowrap; }
.lockup__big { display: block; width: fit-content; font-weight: 800; letter-spacing: -0.005em; white-space: nowrap; }
.lockup__line--think .lockup__big { font-size: clamp(3rem, min(9.6vw, 15svh), 9.5rem); font-stretch: 76%; }
.lockup__line--manage .lockup__big { font-size: clamp(1.8rem, min(5.76vw, 9svh), 5.7rem); font-stretch: 118%; } /* colour + sheen: base.css */
/* Arabic uses this same composition (voice in Kufi): arabic.css. */

.hero__sub { margin-block-start: 22px; max-width: 600px; text-wrap: balance; padding-inline-start: 16px; border-inline-start: 2px solid var(--ember); font-size: var(--fs-lead); line-height: 1.65; color: var(--bone-72); }
:lang(ar) .hero__sub { line-height: 1.85; }
.hero__ctas { margin-block-start: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__trust { margin-block-start: 30px; display: flex; flex-direction: column; gap: 14px; }
.hero__trust-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
:lang(ar) .hero__trust-label { font-family: var(--font-ar); font-size: 13px; text-transform: none; }
.hero__logos { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 30px; }
[dir="rtl"] .hero__logos { flex-direction: row-reverse; justify-content: flex-end; } /* physical: the list is dir=ltr, keep it flush with the Arabic edge */
.hero__logos img { height: 32px; width: auto; object-fit: contain; filter: var(--logo-filter); opacity: 0.65; transition: opacity 0.35s var(--ease-ui), filter 0.35s var(--ease-ui); }
.hero__logos .hero__logo--wide { height: 23px; }
.hero__logos .hero__logo--tall { height: 40px; }
.hero__logos .hero__logo--padded { height: 50px; margin-block: -9px; } /* the file carries wide transparent margins */
.hero__logos li:hover img { opacity: 1; filter: none; }

/* The photo fills the shared height and may widen up to 600px (cropped from below, face kept), so a
   short wide screen gets a wider photo instead of a dead gap between the copy and the photo. */
.hero__media { position: relative; align-self: center; justify-self: end; width: clamp(300px, calc(var(--hero-h) * 1.15), 600px); }
.hero__frame { position: absolute; inset: 28px 22px -22px -22px; /* offset toward the copy, so it never passes the content edge */ border-radius: 24px; border: 1px solid var(--ember-35); box-shadow: 0 0 60px var(--ember-16); }
[dir="rtl"] .hero__frame { inset: 28px -22px -22px 22px; } /* physical: mirrors the offset frame */
.hero__img { position: relative; width: 100%; height: min(var(--hero-h), 720px); object-fit: cover; object-position: 50% 20%; border-radius: var(--r-card); box-shadow: 0 30px 80px var(--shadow-deep); }

@media (max-width: 767px) {
  .hero { grid-template-columns: 1fr; padding-block: calc(var(--nav-h) + 4px) 28px; gap: 20px; min-height: auto; }
  .hero__media { order: -1; padding: 0; width: 100%; }
  .hero__frame { display: none; }
  .hero__img { height: auto; aspect-ratio: 350 / 300; object-position: 50% 18%; box-shadow: 0 0 0 1px var(--ember-40), 0 0 40px var(--ember-16); }
  .hero__badge { height: 30px; font-size: 12px; }
  .lockup { margin-block-start: 16px; gap: 8px; }
  .lockup__voice { font-size: 14px; }
  .lockup__line--think .lockup__big { font-size: clamp(2.6rem, 13.5vw, 3.8rem); }
  .lockup__line--manage .lockup__big { font-size: clamp(1.7rem, 7.6vw, 2.3rem); }
  .hero__sub { margin-block-start: 18px; font-size: 15px; }
  .hero__ctas { margin-block-start: 20px; width: 100%; }
  .hero__ctas .btn { flex: 1 1 100%; justify-content: space-between; }
  .hero__trust { margin-block-start: 28px; }
  .hero__logos { gap: 12px 22px; }
  .hero__logos img { height: 24px; }
  .hero__logos .hero__logo--wide { height: 16px; }
  .hero__logos .hero__logo--tall { height: 30px; }
  .hero__logos .hero__logo--padded { height: 36px; }
}

@media (min-width: 1024px) and (max-height: 780px) {
  .lockup { margin-block-start: 12px; gap: 8px; }
  .hero__sub { margin-block-start: 14px; font-size: 15px; line-height: 1.55; }
  .hero__ctas { margin-block-start: 16px; }
  .hero__trust { margin-block-start: 18px; gap: 10px; }
}

/* ---------- numbers ---------- */
/* Review 2026-09-29 ("traditional, too big"): one compact glass strip, small figures, and each figure
   carries a tiny drawing of itself. The drawings sit in their final state by default (no JS / reduced
   motion); with motion they build once when the strip enters (ui.js adds .is-in). */
.numbers { padding-block: 0 28px; }
.numbers__list {
  position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden;
  border-radius: var(--r-card); border: 1px solid var(--bone-08);
  background: linear-gradient(180deg, var(--graphite-2), var(--graphite)); box-shadow: 0 20px 60px var(--shadow-deep);
}
.numbers__list::before { content: ""; position: absolute; top: 0; inset-inline: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--bone-25), transparent); pointer-events: none; }
.numbers__item { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 16px 22px 18px; }
.numbers__item + .numbers__item { border-inline-start: 1px solid var(--bone-08); }
.numbers__item--accent { background: radial-gradient(260px 160px at 85% 0%, var(--ember-16), transparent 70%); }
.numbers__item--accent::before { content: ""; position: absolute; top: 0; inset-inline: 22px; height: 2px; background: var(--ember); box-shadow: 0 0 14px var(--ember); }
.numbers__item dd { min-height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.numbers__val { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1; font-stretch: 88%; letter-spacing: -0.005em; }
.numbers__val--word { font-size: clamp(1.4rem, 2vw, 1.85rem); font-stretch: 84%; }
.numbers__unit { color: var(--ember); margin-inline-start: 2px; }
.numbers__val--word .numbers__unit { margin-inline: 3px; }
.numbers__item--accent .numbers__val { color: var(--ember); text-shadow: var(--glow-text); }
.numbers__item dt { font-size: 13.5px; line-height: 1.45; color: var(--steel); }
:lang(ar) .numbers__item dt { font-size: 14px; line-height: 1.6; }

.viz { flex: none; display: flex; align-items: flex-end; }
.viz i { display: block; }
/* 5 years: rising bars */
.viz--bars { gap: 4px; height: 30px; }
.viz--bars i { width: 7px; border-radius: 2px; background: var(--ember); transform-origin: bottom; transition: transform 0.7s var(--ease-out); }
.viz--bars i:nth-child(1) { height: 28%; opacity: 0.3; } .viz--bars i:nth-child(2) { height: 44%; opacity: 0.45; }
.viz--bars i:nth-child(3) { height: 60%; opacity: 0.6; } .viz--bars i:nth-child(4) { height: 78%; opacity: 0.8; }
.viz--bars i:nth-child(5) { height: 100%; box-shadow: 0 0 10px var(--ember-50); }
/* 8 industries: a 4 x 2 grid of dots */
.viz--dots { display: grid; grid-template-columns: repeat(4, 7px); gap: 6px; }
.viz--dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--bone-25); transition: transform 0.5s var(--ease-out), background-color 0.5s; }
.viz--dots i:nth-child(3n + 1) { background: var(--ember); }
/* B2B + B2C: two overlapping rings */
.viz--venn { align-items: center; }
.viz--venn i { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--bone-25); transition: transform 0.7s var(--ease-out); }
.viz--venn i + i { margin-inline-start: -11px; border-color: var(--ember); background: var(--ember-12); }
/* 5 core areas: a ring in five parts */
.viz--ring {
  width: 34px; height: 34px; border-radius: 50%; transition: transform 0.9s var(--ease-out), opacity 0.6s;
  background: repeating-conic-gradient(from -90deg, var(--ember) 0 64deg, transparent 64deg 72deg);
  -webkit-mask: radial-gradient(closest-side, transparent 64%, black 66%); mask: radial-gradient(closest-side, transparent 64%, black 66%);
  filter: drop-shadow(0 0 6px var(--ember-50));
}
/* build-in, only with motion and only until the strip is seen */
html.motion .numbers:not(.is-in) .viz--bars i { transform: scaleY(0); }
html.motion .numbers:not(.is-in) .viz--dots i { transform: scale(0); }
html.motion .numbers:not(.is-in) .viz--venn i:first-child { transform: translateX(-10px); }
html.motion .numbers:not(.is-in) .viz--venn i + i { transform: translateX(10px); }
html.motion .numbers:not(.is-in) .viz--ring { transform: rotate(-120deg) scale(0.6); opacity: 0; }
.viz i:nth-child(2) { transition-delay: 0.06s; } .viz i:nth-child(3) { transition-delay: 0.12s; } .viz i:nth-child(4) { transition-delay: 0.18s; }
.viz i:nth-child(5) { transition-delay: 0.24s; } .viz i:nth-child(6) { transition-delay: 0.3s; } .viz i:nth-child(7) { transition-delay: 0.36s; } .viz i:nth-child(8) { transition-delay: 0.42s; }

@media (max-width: 1023px) {
  .numbers__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers__item:nth-child(3) { border-inline-start: 0; }
  .numbers__item:nth-child(n + 3) { border-block-start: 1px solid var(--bone-08); }
}
@media (max-width: 767px) {
  .numbers { padding-block: 4px 8px; }
  .numbers__item { padding: 16px 16px 18px; gap: 8px; }
  .numbers__item--accent::before { inset-inline: 16px; }
  .numbers__item dd { min-height: 38px; }
  .numbers__val { font-size: 1.9rem; }
  .numbers__val--word { font-size: 1.3rem; }
  .numbers__item dt { font-size: 12.5px; }
  :lang(ar) .numbers__item dt { font-size: 13px; }
  .viz--bars { height: 24px; gap: 3px; } .viz--bars i { width: 6px; }
  .viz--venn i { width: 24px; height: 24px; } .viz--ring { width: 28px; height: 28px; }
}

/* ---------- about ---------- */
.about { padding-block: 104px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.about__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-block-end: -12px; }
.about__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.about__manifesto { max-width: 1040px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.5vw, 2.3rem); line-height: 1.38; letter-spacing: -0.005em; font-stretch: 96%; text-wrap: balance; }
:lang(ar) .about__manifesto { font-family: var(--font-ar); font-weight: 700; line-height: 1.75; }
/* The two minds inside the sentence: reading is narrow and quiet, running is wide and underlined in ember.
   Arabic has no width axis, so the underline alone carries the difference there. */
.mf { font-style: normal; white-space: nowrap; color: var(--bone); background-repeat: no-repeat; background-position: 0 92%; background-size: 100% 0.07em; padding-block-end: 0.04em; }
:lang(ar) .mf { background-position: 100% 96%; }
.mf--think { font-stretch: 76%; background-image: linear-gradient(var(--bone-25), var(--bone-25)); }
.mf--manage { font-stretch: 118%; font-weight: 700; background-image: linear-gradient(var(--ember), var(--ember)); }
.pill { position: relative; display: inline-block; width: 2.5em; height: 1.12em; margin-inline: 0.05em; object-fit: cover; border-radius: 999px; vertical-align: middle; box-shadow: 0 0 0 1px var(--bone-18); transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s; }
@media (hover: hover) {
  .pill:hover { z-index: 2; transform: scale(1.7); box-shadow: 0 0 0 1px var(--ember-70), 0 12px 32px var(--ember-22); }
}
.about__belief { display: flex; align-items: center; gap: 18px; max-width: 760px; font-size: 17px; line-height: 1.6; color: var(--bone-80); }
.about__lead { font-weight: 600; color: var(--bone); }
.about__rule { flex: 0 0 40px; height: 2px; background: var(--ember); box-shadow: 0 0 12px var(--ember); }
@media (max-width: 767px) {
  .about { padding-block: 64px; align-items: stretch; gap: 24px; }
  .about__eyebrow { margin-block-end: -8px; }
  .about__manifesto { text-align: start; }
  .about__belief { font-size: 15px; align-items: flex-start; }
  .about__rule { margin-block-start: 12px; flex-basis: 24px; }
}

/* ---------- services: the list + a map of the five as one system ---------- */
/* The list is the content (buttons + descriptions). The map is its picture: five points around the
   client business, all connected; the active one lights its lines and speaks from the centre. */
.services { padding-block: 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 56px; }
.services__head { display: flex; flex-direction: column; gap: 18px; }
.services__intro { max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--steel); }
.services__list { margin-block-start: 10px; }
.service { position: relative; border-block-start: 1px solid var(--bone-08); }
.service:last-child { border-block-end: 1px solid var(--bone-08); }
.service__head { width: 100%; display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding-block: 13px; text-align: start; cursor: pointer; }
.service__num { font-family: var(--font-mono); font-size: 11px; color: var(--steel); transition: color 0.4s; }
.service__title { font-family: var(--font-display); font-weight: 600; font-size: 17px; font-stretch: 100%; color: var(--bone-80); transition: color 0.4s var(--ease-ui), font-stretch 0.5s var(--ease-ui); }
:lang(ar) .service__title { font-family: var(--font-ar); font-weight: 600; }
/* A short ember rail marks the active row (its line on the map is lit at the same time). */
.service::before { content: ''; position: absolute; inset-inline-start: 0; top: -1px; width: 0; height: 1px; background: var(--ember); box-shadow: 0 0 10px var(--ember); transition: width 0.6s var(--ease-ui); }
.service.is-open::before { width: 100%; }
.service.is-open .service__num, .service.is-open .service__title { color: var(--ember); }
.service.is-open .service__title { font-stretch: 112%; font-weight: 700; }
.service__icon { justify-self: end; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--bone-25); transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s; }
.service.is-open .service__icon { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 10px var(--ember); }
/* Without JS every description is readable under its title. With JS the centre of the map speaks for
   the active one, so the list copies step out of sight (still read by screen readers). */
.service__body > p { padding-inline-start: 48px; padding-block-end: 14px; max-width: 520px; font-size: 15px; line-height: 1.6; color: var(--bone-80); }
html.js .service__body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.svc-map { position: relative; width: 100%; max-width: 500px; aspect-ratio: 1; justify-self: center; }
.svc-map__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.svc-map__lines line, .svc-map__ring { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1; transition: stroke 0.5s var(--ease-ui), stroke-width 0.5s var(--ease-ui); }
.svc-map__ring { stroke: var(--bone-08); stroke-dasharray: 2 5; }
.svc-map__edge { stroke: var(--bone-14); }
.svc-map__diag { stroke: var(--bone-06); }
.svc-map__spoke { stroke: var(--bone-06); stroke-dasharray: 3 4; }
.svc-map__edge.is-lit, .svc-map__diag.is-lit { stroke: var(--ember-40); }
.svc-map__spoke.is-lit { stroke: var(--ember); stroke-dasharray: none; stroke-width: 1.5; }
.svc-map__pulse { fill: var(--ember); filter: drop-shadow(0 0 1.5px var(--ember)); transition: transform 0.8s var(--ease-ui); }
html:not(.js) .svc-map__pulse { display: none; }

.svc-map__core {
  position: absolute; left: 50%; top: 50%; width: 50%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 11%; border-radius: 50%; text-align: center;
  background: radial-gradient(circle at 50% 30%, var(--graphite-2), var(--graphite) 70%); border: 1px solid var(--bone-10); box-shadow: var(--glow-rest);
}
.svc-map__badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
:lang(ar) .svc-map__badge { font-family: var(--font-ar); font-size: 12px; letter-spacing: 0; text-transform: none; }
.svc-map__live { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.svc-map__live.is-in > * { animation: svc-in 0.6s var(--ease-ui) both; }
.svc-map__live.is-in > :nth-child(2) { animation-delay: 0.06s; }
.svc-map__live.is-in > :nth-child(3) { animation-delay: 0.12s; }
@keyframes svc-in { from { opacity: 0; transform: translateY(6px); } }
.svc-map__num { font-family: var(--font-mono); font-size: 11px; color: var(--ember); }
.svc-map__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.15; font-stretch: 108%; color: var(--bone); }
:lang(ar) .svc-map__title { font-family: var(--font-ar); font-size: 16px; line-height: 1.4; }
.svc-map__body { font-size: 13px; line-height: 1.5; color: var(--bone-80); }

.svc-map__node { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; cursor: pointer; }
.svc-map__node i { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 1px solid var(--bone-25); transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.5s var(--ease-ui); }
/* Labels sit under their point (the top one above it) so nothing reaches past the map edges. */
.svc-map__node b { position: absolute; top: calc(100% + 8px); font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: var(--steel); transition: color 0.4s; }
:lang(ar) .svc-map__node b { font-family: var(--font-ar); font-size: 13px; letter-spacing: 0; text-transform: none; }
.svc-map__node--1 { left: 50%; top: 14%; }
.svc-map__node--1 b { top: auto; bottom: calc(100% + 8px); }
.svc-map__node--2 { left: 84.24%; top: 38.88%; }
.svc-map__node--3 { left: 71.16%; top: 79.12%; }
.svc-map__node--4 { left: 28.84%; top: 79.12%; }
.svc-map__node--5 { left: 15.76%; top: 38.88%; }
.svc-map__node:hover i { border-color: var(--ember-70); }
.svc-map__node.is-active i { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 0 6px var(--ember-16), 0 0 18px var(--ember); transform: scale(1.15); }
.svc-map__node.is-active b { color: var(--bone); }

@media (max-width: 1023px) {
  .services { grid-template-columns: 1fr; gap: 32px; padding-block: 64px; }
  .svc-map { max-width: 440px; }
}
@media (max-width: 767px) {
  .services { gap: 24px; }
  /* The disc is too small for a sentence on a phone: it keeps the number and title, and the
     description opens under the active row instead. Order: title, intro, map, list. */
  .services__head { display: contents; }
  .services .h2 { order: 1; }
  .services__intro { order: 2; }
  .svc-map { order: 3; max-width: 340px; }
  .services__list { order: 4; margin-block-start: 0; }
  .svc-map__body { display: none; }
  .svc-map__title { font-size: 15px; }
  .svc-map__core { gap: 4px; padding: 10%; }
  .service__body > p { padding-inline-start: 0; }
  html.js .service.is-open .service__body { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-map__live.is-in > * { animation: none; }
  .svc-map__pulse { transition: none; }
}

/* ---------- selected work: one Marketing Manager, five brand voices ---------- */
/* Picking a client dresses the section in that client's colour (glow, rail, frame edge; never text)
   and shows its live site in a browser frame. --brand is registered in tokens.css so it fades. */
.work { position: relative; isolation: isolate; padding-block: 72px 56px; --brand: var(--brand-reefna); transition: --brand 0.9s var(--ease-ui); }
.work[data-brand="najah"] { --brand: var(--brand-najah); }
.work[data-brand="akma"] { --brand: var(--brand-akma); }
.work[data-brand="sellsza"] { --brand: var(--brand-sellsza); }
.work[data-brand="ntflow"] { --brand: var(--brand-ntflow); }
.work::before { content: ''; position: absolute; inset-block: 12% 0; inset-inline: 38% 0; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent); }
.work__stage { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: center; gap: 48px; }

.work__card { position: relative; border-block-start: 1px solid var(--bone-08); }
.work__card:last-child { border-block-end: 1px solid var(--bone-08); }
.work__card::before { content: ''; position: absolute; inset-inline-start: 0; top: -1px; width: 0; height: 1px; background: var(--brand); box-shadow: 0 0 12px var(--brand); transition: width 0.6s var(--ease-ui); }
.work__card.is-open::before { width: 100%; }
.work__pick { width: 100%; display: grid; grid-template-columns: 28px 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-block: 16px; text-align: start; cursor: pointer; }
.work__num { font-family: var(--font-mono); font-size: 11px; color: var(--steel); transition: color 0.4s; }
.work__logo-box { width: 44px; height: 28px; display: grid; place-items: center; }
.work__logo { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: var(--logo-filter); opacity: 0.45; transition: opacity 0.4s; }
.work__name { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; font-stretch: 82%; color: var(--bone-72); transition: color 0.4s var(--ease-ui), font-stretch 0.5s var(--ease-ui); }
[dir="rtl"] .work__name { text-align: right; }
.work__meta { font-family: var(--font-mono); font-size: 11px; color: var(--steel); text-align: end; white-space: nowrap; }
:lang(ar) .work__meta { font-family: var(--font-ar); font-size: 13px; }
.work__card.is-open .work__num { color: var(--ember); }
.work__card.is-open .work__logo { opacity: 1; }
.work__card.is-open .work__name { color: var(--bone); font-stretch: 100%; }
.work__pick:hover .work__logo { opacity: 0.8; }
/* Result line: every one readable without JS; with JS only the active client's opens. */
.work__more { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.5s var(--ease-ui); }
html.js .work__card:not(.is-open) .work__more { grid-template-rows: 0fr; }
.work__more > p { min-height: 0; overflow: hidden; padding-inline-start: 114px; font-size: 14px; line-height: 1.5; color: var(--bone-72); }
html:not(.js) .work__more > p, .work__card.is-open .work__more > p { padding-block-end: 16px; }

.work__screen { margin: 0; border-radius: 18px; overflow: hidden; background: var(--graphite); border: 1px solid color-mix(in srgb, var(--brand) 50%, transparent); box-shadow: 0 40px 90px -30px color-mix(in srgb, var(--brand) 55%, transparent), 0 20px 50px var(--shadow-deep); }
.work__bar { display: flex; align-items: center; gap: 12px; height: 38px; padding-inline: 14px; background: var(--graphite-2); border-block-end: 1px solid var(--bone-08); }
.work__dots { display: flex; gap: 6px; }
.work__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--bone-14); }
.work__dots i:first-child { background: var(--brand); }
.work__url { flex: 0 1 280px; margin-inline: auto; display: flex; align-items: center; justify-content: center; gap: 7px; height: 24px; padding-inline: 12px; border-radius: var(--r-pill); background: var(--bone-06); font-family: var(--font-mono); font-size: 11px; color: var(--steel); }
.work__shots { position: relative; aspect-ratio: 16 / 10; background: var(--ink); }
.work__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; }
.work__shot.is-prev { opacity: 1; z-index: 1; }
/* The new site wipes in over the previous one, from the reading side. */
.work__shot.is-active { opacity: 1; z-index: 2; animation: work-wipe 0.9s var(--ease-ui) both; }
[dir="rtl"] .work__shot.is-active { animation-name: work-wipe-rtl; }
@keyframes work-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes work-wipe-rtl { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

@media (max-width: 1023px) {
  .work__stage { grid-template-columns: 1fr; gap: 28px; }
  .work__screen { order: -1; width: 100%; max-width: 640px; justify-self: center; }
  .work::before { inset-inline: 0; inset-block: 8% 50%; }
}
@media (max-width: 767px) {
  .work__pick { grid-template-columns: 22px 34px minmax(0, 1fr); gap: 4px 12px; padding-block: 14px; }
  .work__logo-box { width: 34px; height: 24px; }
  .work__name { font-size: 21px; }
  .work__meta { grid-column: 3; text-align: start; }
  .work__more > p { padding-inline-start: 68px; }
  .work__bar { height: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .work { transition: none; }
  .work__shot.is-active { animation: none; }
}

/* ---------- on stage + reel ---------- */
/* The header spans both columns, so the photos and the reel start on the same line. */
.stage { padding-block: 72px 56px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
.stage__head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-block-end: 12px; }
.stage__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
/* ON AIR lamp: a studio sign, the dot breathing like a live light. */
.on-air { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding-inline: 12px 16px; border-radius: var(--r-pill); border: 1px solid var(--ember-40); background: var(--ember-12); box-shadow: 0 0 24px var(--ember-16); font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember); }
:lang(ar) .on-air { font-family: var(--font-ar); font-weight: 700; font-size: 14px; letter-spacing: 0; text-transform: none; }
.on-air__lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); animation: on-air 2.4s ease-in-out infinite; }
@keyframes on-air { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 var(--ember-50), 0 0 10px var(--ember); } 50% { opacity: 0.55; box-shadow: 0 0 0 6px transparent, 0 0 4px var(--ember); } }
.stage__lede { max-width: 800px; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.25; font-stretch: 96%; color: var(--bone); }
:lang(ar) .stage__lede { font-family: var(--font-ar); font-weight: 700; line-height: 1.6; }
.stage__roles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stage__roles li { height: 30px; display: inline-flex; align-items: center; padding-inline: 12px; border-radius: var(--r-pill); border: 1px solid var(--bone-14); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }
:lang(ar) .stage__roles li { font-family: var(--font-ar); font-size: 13px; letter-spacing: 0; text-transform: none; }

.stage__mosaic { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(180px, 1fr)); gap: 14px; }
/* Photos fill their cell instead of sizing it, so the reel (sized to the viewport) sets the row height. */
.stage__p { position: relative; display: block; overflow: hidden; border-radius: var(--r-card); }
.stage__p--tall { grid-row: span 2; }
.stage__p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.stage__p:hover img { transform: scale(1.04); }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: 24px; overflow: hidden; border: 1px solid var(--ember-50); box-shadow: 0 0 60px var(--ember-22); background: var(--graphite); }
.reel__video { width: 100%; height: 100%; object-fit: cover; }
.reel__shade { position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink-92) 0%, var(--ink-00) 40%); pointer-events: none; }
.reel__bars { position: absolute; top: 16px; inset-inline: 16px; display: flex; gap: 6px; }
.reel__bars span { flex: 1; height: 3px; border-radius: 3px; background: var(--bone-25); overflow: hidden; }
.reel__bars span::after { content: ""; display: block; height: 100%; background: var(--ember); transform: scaleX(var(--seg, 0)); transform-origin: left center; }
[dir="rtl"] .reel__bars span::after { transform-origin: right center; }
/* Caption and a round play/pause share the bottom line (the full-width bar is gone). */
.reel__cap { position: absolute; inset-inline: 20px 76px; bottom: 20px; display: flex; flex-direction: column; gap: 6px; }
.reel__count { font-family: var(--font-mono); font-size: 11px; color: var(--ember); direction: ltr; unicode-bidi: isolate; } /* "1 / 3", not "3 / 1", in Arabic */
.reel__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.1; font-stretch: 90%; }
:lang(ar) .reel__title { font-family: var(--font-ar); font-size: 17px; line-height: 1.4; }
.reel__toggle { position: absolute; inset-inline-end: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--bone-25); background: var(--ink-92); color: var(--bone); cursor: pointer; transition: border-color 0.3s, color 0.3s, box-shadow 0.3s; }
.reel__toggle:hover { border-color: var(--ember); color: var(--ember); box-shadow: 0 0 20px var(--ember-35); }
.reel__icon { grid-area: 1 / 1; }
.reel__toggle .reel__icon--pause, .reel__toggle[data-state="paused"] .reel__icon--pause { display: none; }
.reel__toggle[data-state="playing"] .reel__icon--pause { display: block; }
.reel__toggle[data-state="playing"] .reel__icon--play { display: none; }
/* Desktop: the whole section fits one screen. The media height follows the viewport (nav offset 70 +
   top padding 48 + header ~95 + gap 20 + breathing 17), and the reel width follows its 9:16 ratio. */
@media (min-width: 1024px) {
  .stage { padding-block-start: 48px; grid-template-columns: minmax(0, 1fr) auto; }
  .reel { height: clamp(380px, calc(100svh - 250px), 533px); width: auto; }
}
@media (max-width: 1023px) {
  .stage { grid-template-columns: 1fr; padding-block: 64px 44px; }
  .stage__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-block-end: 4px; }
  .stage__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 150px; }
  .stage__p--tall { grid-row: auto; grid-column: span 2; }
  .reel { max-width: 380px; width: 100%; justify-self: center; }
}
@media (max-width: 767px) {
  .reel { max-width: 300px; } /* a phone-height reel inside a phone screen was taller than the viewport */
}
@media (prefers-reduced-motion: reduce) {
  .on-air__lamp { animation: none; }
}

/* ---------- expertise: the five areas as his real route ---------- */
/* Base (phones, and no JS anywhere): a vertical route, every stop readable. With JS on wider screens it
   becomes a horizontal line; the active stop speaks in one panel under it, the areas below fill up. */
.expertise { padding-block: 72px; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.expertise__head { display: flex; flex-direction: column; gap: 14px; }
.expertise__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 2.6vw, 2.4rem); line-height: 1.02; font-stretch: 78%; text-wrap: balance; }
:lang(ar) .expertise__title { font-family: var(--font-ar); font-weight: 900; line-height: 1.45; font-stretch: normal; }
.expertise__intro { font-size: 15px; line-height: 1.6; color: var(--steel); }

.route { --p: 1; }
.route__stops { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; border-inline-start: 1px solid var(--bone-14); }
.route__stop { position: relative; padding-inline-start: 22px; }
.route__pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding-block: 12px 6px; text-align: start; cursor: pointer; }
.route__year { order: 2; font-family: var(--font-mono); font-size: 11px; color: var(--steel); direction: ltr; unicode-bidi: isolate; } /* "2024–26" must not flip to "26–2024" in Arabic */
:lang(ar) .route__year { font-family: var(--font-ar); font-size: 13px; }
.route__dot { position: absolute; inset-inline-start: -7px; top: 17px; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); border: 1px solid var(--bone-25); transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s, transform 0.4s var(--ease-ui); }
.route__org { order: 1; font-family: var(--font-display); font-weight: 700; font-size: 17px; font-stretch: 96%; color: var(--bone-72); transition: color 0.4s; }
:lang(ar) .route__org { font-family: var(--font-ar); }
.route__stop.is-past .route__dot { background: var(--ember-40); border-color: var(--ember-50); }
.route__stop.is-open .route__dot { background: var(--ember); border-color: var(--ember); box-shadow: 0 0 0 5px var(--ember-16), 0 0 14px var(--ember); transform: scale(1.1); }
.route__stop.is-open .route__org { color: var(--bone); }
.route__card { padding-block: 0 12px; display: flex; flex-direction: column; gap: 4px; }
html.js .route__stop:not(.is-open) .route__card { display: none; }
.route__role { font-size: 14px; font-weight: 600; color: var(--bone); }
.route__what { font-size: 14px; line-height: 1.55; color: var(--bone-80); max-width: 560px; }
.route__adds { margin-block-start: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }
.route__adds b { font-weight: 500; color: var(--ember); }
:lang(ar) .route__adds { font-family: var(--font-ar); font-size: 13px; letter-spacing: 0; text-transform: none; }

.route__areas { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.route__areas li { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding-inline: 12px; border-radius: var(--r-pill); border: 1px solid var(--ember-40); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); transition: color 0.4s, border-color 0.4s, background-color 0.4s; }
:lang(ar) .route__areas li { font-family: var(--font-ar); font-size: 13px; letter-spacing: 0; text-transform: none; }
.route__areas li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--ember); transition: background-color 0.4s, box-shadow 0.4s; }
/* With JS the chips are earned as the route goes on (all five are earned without JS). */
html.js .route__areas li:not(.is-earned) { color: var(--steel); border-color: var(--bone-10); border-style: dashed; }
html.js .route__areas li:not(.is-earned)::before { background: var(--bone-18); box-shadow: none; }

@media (min-width: 900px) {
  html.js .route__stops { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 0; padding-block-end: 124px; }
  /* The line runs dot to dot; the ember part fills up to the active stop. */
  html.js .route__stops::before, html.js .route__stops::after { content: ''; position: absolute; top: 36px; height: 2px; border-radius: 2px; inset-inline-start: calc(100% / 12); }
  html.js .route__stops::before { width: calc(100% - 100% / 6); background: var(--bone-10); }
  html.js .route__stops::after { width: calc((100% - 100% / 6) * var(--p)); background: var(--ember); box-shadow: 0 0 10px var(--ember); transition: width 0.7s var(--ease-ui); }
  html.js .route__stop { position: static; padding: 0; }
  html.js .route__pick { position: relative; flex-direction: column; align-items: center; gap: 12px; padding: 0; text-align: center; }
  html.js .route__year { order: 0; height: 18px; }
  html.js .route__dot { position: relative; z-index: 1; inset: auto; order: 1; }
  html.js .route__org { order: 2; font-size: 15px; }
  html.js .route__card { position: absolute; inset-inline: 0; bottom: 0; height: 104px; padding: 16px 20px; justify-content: center; border-radius: var(--r-card); background: var(--graphite); border: 1px solid var(--bone-10); animation: route-in 0.5s var(--ease-ui) both; }
  @keyframes route-in { from { opacity: 0; transform: translateY(6px); } }
}
@media (max-width: 1023px) {
  .expertise { grid-template-columns: 1fr; gap: 28px; padding-block: 56px; }
}

/* ---------- insights: the series + its formula, working ---------- */
.insights { padding-block: 64px 32px; }
.insights .link-accent { display: inline-flex; align-items: center; gap: 6px; }
.insights__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 32px; align-items: start; }
.ccc { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.ccc__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ccc__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; font-stretch: 96%; }
:lang(ar) .ccc__title { font-family: var(--font-ar); }
.ccc__formula { font-family: var(--font-mono); font-size: 12px; color: var(--steel); }
.ccc__inputs { display: flex; flex-direction: column; gap: 12px; }
.ccc__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.3fr) 40px; align-items: center; gap: 12px; }
.ccc__name { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--bone); }
.ccc__hint { font-size: 13px; color: var(--steel); }
.ccc__val { font-family: var(--font-mono); font-size: 14px; color: var(--bone); text-align: end; }
.ccc input[type="range"] { --fill: 50%; width: 100%; height: 22px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.ccc input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(var(--ember), var(--ember)) 0 / var(--fill) 100% no-repeat, var(--bone-10); }
.ccc input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: linear-gradient(var(--ember), var(--ember)) 0 / var(--fill) 100% no-repeat, var(--bone-10); }
.ccc input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--bone); border: 3px solid var(--ember); box-shadow: 0 0 10px var(--ember-35); }
.ccc input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--bone); border: 3px solid var(--ember); box-shadow: 0 0 10px var(--ember-35); }
.ccc input[type="range"]:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; border-radius: 4px; }
/* Stock + collection on top, supplier credit below; the lit gap under the top bar is the CCC. */
.ccc__bars { display: grid; gap: 6px; --dio: 50%; --dso: 33%; --dpo: 11%; --gap: 72%; }
.ccc__bar { display: flex; height: 12px; border-radius: 4px; background: var(--bone-04); overflow: hidden; }
.ccc__seg { display: block; height: 100%; transition: width 0.6s var(--ease-ui); }
.ccc__seg--dio { width: var(--dio); background: var(--ember-40); }
.ccc__seg--dso { width: var(--dso); background: var(--ember-22); }
.ccc__seg--dpo { width: var(--dpo); background: var(--bone-18); }
.ccc__seg--gap { width: var(--gap); background: var(--ember); box-shadow: 0 0 12px var(--ember); }
.ccc__result { display: flex; flex-direction: column; gap: 4px; }
.ccc__big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--bone-80); }
.ccc__days { font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 1; font-stretch: 82%; color: var(--ember); }
.ccc__freed { font-size: 14px; color: var(--bone-80); }
.ccc__freed b { color: var(--ember); font-weight: 700; }
.ccc__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ccc__note { margin-inline-start: auto; font-size: 12px; color: var(--steel); }

.insights__list { margin: 0; padding: 0; list-style: none; }
.insights__list li { border-block-start: 1px solid var(--bone-08); }
.insights__list li:last-child { border-block-end: 1px solid var(--bone-08); }
.insight { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-block: 18px; }
.insight__num { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; font-stretch: 78%; color: var(--steel); transition: color 0.3s; }
.insight__text { display: flex; flex-direction: column; gap: 6px; }
.insight__title { font-family: var(--font-display); font-weight: 700; font-size: 17px; line-height: 1.3; font-stretch: 96%; transition: color 0.3s; }
:lang(ar) .insight__title { font-family: var(--font-ar); line-height: 1.6; }
.insight__sub { font-size: 14px; line-height: 1.55; color: var(--steel); }
.insight:hover .insight__num, .insight:hover .insight__title { color: var(--ember); }
@media (max-width: 1023px) {
  .insights__body { grid-template-columns: 1fr; }
  .insights .section-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 599px) {
  .ccc { padding: 18px; }
  .ccc__row { grid-template-columns: 40px minmax(0, 1fr) 36px; grid-template-areas: "name range val" "hint hint hint"; row-gap: 2px; }
  .ccc__name { grid-area: name; }
  .ccc__row input { grid-area: range; }
  .ccc__val { grid-area: val; }
  .ccc__hint { grid-area: hint; padding-inline-start: 52px; font-size: 12px; }
  .ccc__note { margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ccc__seg, .route__stops::after { transition: none; }
  html.js .route__card { animation: none; }
}

/* ---------- voices (only rendered once consent is recorded) ---------- */
.voices { padding-block: 56px; }
.voices__title { font-size: clamp(1.6rem, 2.4vw, 2.25rem); margin-block-end: 22px; }
.voices__track { display: flex; overflow: hidden; margin-inline: calc(var(--gutter) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 160px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 60px, black calc(100% - 160px), transparent 100%); }
.voices__list { display: flex; gap: 14px; padding-inline-end: 14px; flex-shrink: 0; animation: marquee 28s linear infinite; }
.voices__track:hover .voices__list, .voices__track:focus-within .voices__list { animation-play-state: paused; }
[dir="rtl"] .voices__list { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-100%); } }
.voice { width: 420px; padding: 24px; border-radius: var(--r-card); background: var(--graphite); display: flex; flex-direction: column; gap: 16px; }
.voice blockquote { font-size: 17px; line-height: 1.55; }
.voice figcaption { font-size: 13px; color: var(--steel); display: flex; flex-direction: column; gap: 2px; }
.voice figcaption strong { color: var(--bone); font-weight: 600; }
@media (max-width: 767px) { .voice { width: 290px; } }

/* ---------- contact: launch a campaign, audience of one ---------- */
/* Decision 31 (2026-09-30, concept 03): the visitor sets up a campaign in a console (audience, objective,
   market) and the ad is the WhatsApp message, shown live in a chat bubble. One space with the footer.
   A step counts as set once the visitor picks in it (or it has one option); until then its default is a
   suggestion (ember outline), so the message is always a whole sentence and Launch always works. */
.contact { padding-block: 64px 28px; }
.contact::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw) -160px; z-index: -1; pointer-events: none; background: radial-gradient(900px 520px at 80% 72%, var(--ember-12), transparent 70%); }
[dir="rtl"] .contact::before { transform: scaleX(-1); }
.launch__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.launch__eyebrow { display: flex; align-items: center; gap: 14px; margin-block-end: 14px; font-size: 11px; }
.launch__rule { width: 28px; height: 1px; background: var(--ember); }
.launch__lede { max-width: 430px; padding-block-end: 6px; font-size: 16px; line-height: 1.55; color: var(--bone-72); }
.launch__lede b { font-weight: 600; color: var(--bone); }

/* the console: a campaign manager's window */
.console { margin-block-start: 26px; border: 1px solid var(--bone-10); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, var(--graphite), color-mix(in srgb, var(--graphite) 45%, var(--ink)));
  box-shadow: inset 0 1px 0 var(--rim), 0 40px 90px var(--shadow-deep); }
.console__bar {
  display: flex; align-items: center; gap: 20px; padding: 14px 20px; border-block-end: 1px solid var(--bone-10);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel);
}
.console__dots { display: flex; gap: 6px; }
.console__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--bone-10); }
.console__name { color: var(--bone); letter-spacing: 0.06em; white-space: nowrap; }
.console__status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--r-pill); background: var(--bone-06); color: var(--bone-72); white-space: nowrap; }
.console__status i { width: 6px; height: 6px; border-radius: 50%; background: var(--signal-draft); transition: background-color 0.4s, box-shadow 0.4s; }
.console__status.is-ready i { background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.console__prog { flex: 1 1 40px; max-width: 260px; height: 3px; border-radius: 3px; background: var(--bone-10); overflow: hidden; }
.console__prog span { display: block; height: 100%; width: calc(var(--done, 0) / 3 * 100%); border-radius: inherit; background: var(--ember); box-shadow: 0 0 12px var(--ember); transition: width 0.6s var(--ease-out); }
.console__budget { margin-inline-start: auto; white-space: nowrap; }
.console__budget b { font-weight: 500; color: var(--ember-hi); }

.console__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 430px); }
.console__setup { display: grid; align-content: start; gap: 6px; padding: 12px 12px 18px; border-inline-end: 1px solid var(--bone-10); }
/* Every step keeps the same frame, so marking the current one never moves the layout. */
.step { padding: 12px; border: 1px dashed transparent; border-radius: 16px; transition: border-color 0.4s var(--ease-ui), background-color 0.4s var(--ease-ui); }
.step.is-current { border-color: var(--ember-50); background: var(--ember-04); }
.step__lab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-block-end: 10px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.step__n { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--bone-18); font-size: 9.5px; letter-spacing: 0; color: var(--steel); transition: background-color 0.35s, border-color 0.35s, color 0.35s; }
.step__ok { display: none; }
.step.is-current .step__n { border-color: var(--ember); color: var(--ember); }
.step.is-set .step__n { background: var(--ember); border-color: var(--ember); color: var(--ink); }
.step.is-set .step__num { display: none; }
.step.is-set .step__ok { display: block; }
.step__q { quotes: none; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--bone); }

/* The radios are real and cover their option (clicks, arrows, Space, screen readers all native);
   only their look is drawn by the label. */
.console label { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.console input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.console label:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 2px; }

.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--bone-10); background: var(--bone-04); }
.seg__opt { display: grid; place-items: center; min-height: 46px; padding: 8px 10px; border-radius: 10px; text-align: center; font-size: 13.5px; font-weight: 500; line-height: 1.25; color: var(--bone-72); transition: background-color 0.35s var(--ease-ui), color 0.35s var(--ease-ui), box-shadow 0.35s var(--ease-ui); }
.seg__opt:hover { color: var(--bone); background: var(--bone-06); }
.seg__opt:has(:checked) { font-weight: 600; color: var(--ink); background: var(--bone); box-shadow: 0 6px 18px -8px var(--shadow-deep); }
.step:not(.is-set) .seg__opt:has(:checked) { color: var(--bone); background: var(--ember-12); box-shadow: inset 0 0 0 1px var(--ember-50); }

.obj { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.obj[data-one] { grid-template-columns: minmax(0, 1fr); }
.obj__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 12px 16px; border: 1px solid var(--bone-10); border-radius: 14px; background: var(--bone-04); transition: border-color 0.35s var(--ease-ui), background-color 0.35s var(--ease-ui), box-shadow 0.35s var(--ease-ui); }
.obj__card:hover { border-color: var(--bone-18); background: var(--bone-06); }
.obj__k { grid-column: 1; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }
.obj__t { grid-column: 1; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--bone); }
.obj__d { grid-column: 1; font-size: 12.5px; line-height: 1.45; color: var(--steel); }
.obj__r { grid-column: 2; grid-row: 1 / 4; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--bone-25); transition: border-width 0.3s var(--ease-ui), border-color 0.3s; }
.obj__card:has(:checked) { border-color: var(--ember-70); background: linear-gradient(135deg, var(--ember-12), var(--ember-04)); box-shadow: 0 0 30px var(--ember-16); }
.obj__card:has(:checked) .obj__k { color: var(--ember-hi); }
.obj__card:has(:checked) .obj__r { border: 5px solid var(--ember); }
.step:not(.is-set) .obj__card:has(:checked) { border-style: dashed; box-shadow: none; }

.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 15px; border-radius: var(--r-pill); border: 1px solid var(--bone-18); background: var(--bone-04); font-size: 13.5px; font-weight: 500; line-height: 1.2; color: var(--bone); transition: border-color 0.35s var(--ease-ui), background-color 0.35s var(--ease-ui), color 0.35s, box-shadow 0.35s; }
.chip:hover { border-color: var(--bone-25); background: var(--bone-06); }
.chip:has(:checked) { border-color: var(--ember); color: var(--ember-hi); background: var(--ember-16); box-shadow: 0 0 0 3px var(--ember-16); }
.step:not(.is-set) .chip:has(:checked) { background: var(--bone-04); box-shadow: 0 0 0 3px var(--ember-12); }

/* the ad preview: the exact message, in a WhatsApp-like thread */
.console__preview { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 18px; background: radial-gradient(80% 60% at 50% 30%, var(--ember-04), transparent 70%); }
.preview__lab { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
.preview__lab b { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; color: var(--ember-hi); }
.preview__lab i { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--ember); animation: live-blink 2s ease-in-out infinite; }
@keyframes live-blink { 50% { opacity: 0.3; } }
.chat { flex: 1; display: flex; flex-direction: column; min-height: 236px; border: 1px solid var(--bone-10); border-radius: 18px; overflow: hidden; background: var(--ink); }
.chat__who { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-block-end: 1px solid var(--bone-06); background: var(--bone-04); }
.chat__who img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.chat__who b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--bone); }
.chat__who small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--steel); }
.chat__thread { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 14px; background-image: radial-gradient(var(--bone-06) 1px, transparent 1px); background-size: 14px 14px; }
/* Always a dark bubble (it is the message, not a surface), so its text uses the night tokens in both themes. */
.bubble { align-self: flex-end; max-width: 90%; padding: 11px 13px 7px; border: 1px solid var(--ember-35); border-radius: 16px; border-end-end-radius: 4px; background: linear-gradient(180deg, var(--bubble-top), var(--bubble-bottom)); color: var(--night-bone); font-size: 14.5px; line-height: 1.5; box-shadow: 0 14px 30px -18px var(--shadow-deep); }
.bubble__slot { border-radius: 4px; transition: background-color 0.4s var(--ease-ui); }
/* A suggestion the visitor hasn't picked yet: readable words on a slow ember shimmer. */
.bubble__slot.is-pending { background: linear-gradient(90deg, var(--ember-16), var(--ember-35), var(--ember-16)) 0 0 / 200% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: slot-shimmer 2.6s linear infinite; }
@keyframes slot-shimmer { to { background-position: -200% 0; } }
.bubble__slot.is-new { animation: slot-new 0.9s var(--ease-ui); }
@keyframes slot-new { from { background-color: var(--ember-35); } to { background-color: transparent; } }
.bubble__meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-block-start: 3px; font-size: 10.5px; color: var(--night-steel); }

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile { padding: 10px 12px; border: 1px solid var(--bone-10); border-radius: 12px; background: var(--bone-04); }
.tile dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel); }
.tile dd { margin: 0; }
.tile b { display: block; margin-block: 3px 1px; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.15; font-stretch: 116%; color: var(--bone); white-space: nowrap; }
.tile .tile__accent { color: var(--ember); }
.tile dd span { font-size: 11.5px; color: var(--steel); }

.launch__send { display: flex; flex-direction: column; gap: 10px; }
.btn.launch__go { width: 100%; height: 58px; justify-content: space-between; }
.launch__go.is-ready { animation: cta-pulse 2.4s ease-in-out infinite; }
.launch__label { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; }
.launch__go:hover .roll { transform: translateY(calc(var(--roll) * -1)); }
.launch__left { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.launch__note { font-size: 12px; line-height: 1.5; text-align: center; color: var(--steel); }
.launch__mail { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.launch__mail:hover { color: var(--ember); }

@media (max-width: 1023px) {
  .launch__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .console__body { grid-template-columns: minmax(0, 1fr); }
  .console__setup { border-inline-end: 0; border-block-end: 1px solid var(--bone-10); }
  .console__budget, .console__dots { display: none; }
  .console__prog { max-width: none; }
}

/* ---------- footer: one line under the console ---------- */
.footer { width: min(100% - 2 * var(--gutter), var(--max) - 2 * var(--gutter)); margin-inline: auto; padding-block: 20px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-block-start: 1px solid var(--bone-10); color: var(--steel); }
.footer__sign { font-family: var(--font-display); font-size: 22px; line-height: 1.2; color: var(--bone); }
.footer__think { font-weight: 600; font-stretch: 78%; }
.footer__manage { font-weight: 700; font-stretch: 114%; }
.footer__manage b { font-weight: inherit; color: var(--ember); }
.footer__copy { font-family: var(--font-mono); font-size: 11px; }
@media (max-width: 767px) {
  .footer { flex-direction: column; justify-content: center; gap: 8px; text-align: center; padding-block-start: 22px; }
  .footer__sign { font-size: 19px; }
}

/* ---------- motion hooks (only when JS runs; content is visible without JS) ---------- */
html.js.motion [data-reveal] { opacity: 0; transform: translateY(24px); }

/* Short desktop screens (his own 1536x705): the whole launch console fits one screen after the nav jump.
   Tighter rhythm, a smaller headline, the KPI one-liners and the three tiles step aside (the KPI label,
   the choices and the live message stay); tall screens keep the full console. */
@media (min-width: 1024px) and (max-height: 780px) {
  .contact { padding-block-start: 24px; }
  .launch__title { font-size: clamp(2rem, 7.2svh, 3.1rem); }
  .launch__eyebrow { margin-block-end: 8px; }
  .console { margin-block-start: 14px; }
  .console__setup { gap: 2px; padding: 8px 10px 10px; }
  .step { padding: 8px 10px; }
  .step__lab { margin-block-end: 6px; }
  .seg__opt { min-height: 40px; padding-block: 6px; }
  .obj__card { padding: 8px 14px; }
  .obj__d { display: none; }
  .chip { min-height: 36px; padding-block: 6px; }
  .console__preview { gap: 10px; padding: 14px 18px; }
  .chat { min-height: 170px; }
  .tiles { display: none; }
}