/* 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; }

/* His name and role as a broadcast lower-third on the photo (2026-10-05): dark glass in both themes
   (the photo is the same in both), an ember edge and the live dot. */
.hero__badge {
  position: absolute; z-index: 2; inset-inline-start: 18px; bottom: 18px; margin: 0;
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--night-ink) 58%, transparent); border: 1px solid var(--night-bone-14);
  border-inline-start: 3px solid var(--ember); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 14px 34px -14px var(--shadow-deep);
}
[dir="rtl"] .hero__badge { padding: 10px 14px 10px 18px; }
.hero__id { display: flex; flex-direction: column; gap: 3px; }
.hero__name { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.1; font-stretch: 92%; color: var(--night-bone); }
.hero__role { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember-hi); }
:lang(ar) .hero__name { font-family: var(--font-ar); font-size: 15px; line-height: 1.4; }
:lang(ar) .hero__role { font-family: var(--font-ar); font-size: 12px; letter-spacing: 0; text-transform: none; }
.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; align-self: stretch; max-width: 620px; }
.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; }
/* Eight brands (2026-10-04, "add more brands") no longer fit one calm row: a slow marquee. Two identical
   lists side by side, each sliding its own width, so the loop has no seam; it drifts toward the reading
   start (left in English, right in Arabic) and fades out at both edges. Hover or keyboard focus pauses it. */
.hero__marquee { --logo-gap: 34px; display: flex; overflow: hidden; padding-block: 2px; border-radius: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 28px, black calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 28px, black calc(100% - 72px), transparent 100%); }
[dir="rtl"] .hero__marquee {
  -webkit-mask-image: linear-gradient(270deg, transparent 0, black 28px, black calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0, black 28px, black calc(100% - 72px), transparent 100%); }
.hero__marquee:focus-visible { -webkit-mask-image: none; mask-image: none; }
.hero__logos { flex: none; display: flex; align-items: center; gap: var(--logo-gap); padding-inline-end: var(--logo-gap); animation: marquee 36s linear infinite; }
.hero__marquee:hover .hero__logos, .hero__marquee:focus-visible .hero__logos { animation-play-state: paused; }
[dir="rtl"] .hero__logos { animation-direction: reverse; } /* the track is dir=ltr: reversed, it drifts right */
.hero__logos img { display: block; 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 .hero__logo--mono { height: 30px; }   /* Smart Hub One: a solid monogram reads heavier than a wordmark */
.hero__logos .hero__logo--script { height: 28px; } /* Sapaq: Arabic script with a deep descender */
/* Soccer One Sports: the file is a ball over a two-line name; at strip size the name was a smudge under
   the ball, so the window shows the name alone (its box in the 260px file: x 4-257, y 182-230). */
.hero__crop { --h: 22px; position: relative; display: block; height: var(--h); width: calc(var(--h) * 253 / 48); overflow: hidden; }
.hero__logos .hero__crop img { position: absolute; max-width: none; height: calc(var(--h) * 260 / 48); top: calc(var(--h) * -182 / 48); left: calc(var(--h) * -4 / 48); }
.hero__logos li:hover img { opacity: 1; filter: none; }
@media (prefers-reduced-motion: reduce) {
  /* Still: the list alone, wrapped, flush with the reading edge. */
  .hero__marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .hero__logos { flex: 1 1 auto; flex-wrap: wrap; row-gap: 12px; padding-inline-end: 0; animation: none; }
  .hero__logos[aria-hidden="true"] { display: none; }
  [dir="rtl"] .hero__logos { flex-direction: row-reverse; }
}

/* 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.3), 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); }
  .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__marquee { --logo-gap: 24px; }
  .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; }
  .hero__logos .hero__logo--mono { height: 23px; }
  .hero__logos .hero__logo--script { height: 21px; }
  .hero__crop { --h: 19px; }
}

@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; }
}

@media (min-width: 1024px) and (max-height: 680px) {
  .hero { padding-block-start: calc(var(--nav-h) - 6px); }
  .lockup { margin-block-start: 8px; gap: 6px; }
  .hero__sub { margin-block-start: 10px; }
  .hero__ctas { margin-block-start: 12px; }
  .hero__trust { margin-block-start: 12px; gap: 8px; }
  .hero__logos img { height: 26px; }
  .hero__logos .hero__logo--wide { height: 19px; }
  .hero__logos .hero__logo--tall { height: 32px; }
  .hero__logos .hero__logo--padded { height: 40px; margin-block: -7px; }
  .hero__logos .hero__logo--mono { height: 25px; }
  .hero__logos .hero__logo--script { height: 23px; }
  .hero__crop { --h: 20px; }
}

/* ---------- 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__unit { color: var(--ember); margin-inline-start: 2px; }
/* The accent figure is ember, without a glow: lit, it read bigger than the other three (owner 2026-10-05). */
.numbers__item--accent .numbers__val { color: var(--ember); }
.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); }
/* $1M+ revenue: a rising line that ends on a lit point (a chart reads left to right in both languages) */
.viz--spark { width: 48px; height: 30px; overflow: visible; filter: drop-shadow(0 0 6px var(--ember-50)); }
.viz--spark polyline { fill: none; stroke: var(--ember); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 64; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-out); }
.viz--spark circle { fill: var(--ember); transition: transform 0.5s var(--ease-out) 0.8s; transform-origin: 45px 4px; }
/* 20+ brands: a fan of brand cards */
.viz--tiles { position: relative; width: 40px; height: 30px; }
.viz--tiles i { position: absolute; inset-block-end: 0; inset-inline-start: 9px; width: 20px; height: 26px; border-radius: 5px; border: 1.5px solid var(--bone-25); background: var(--graphite-2); transition: transform 0.7s var(--ease-out); }
.viz--tiles i:nth-child(1) { transform: rotate(-16deg) translateX(-7px); }
.viz--tiles i:nth-child(2) { transform: rotate(0deg); }
.viz--tiles i:nth-child(3) { transform: rotate(16deg) translateX(7px); border-color: var(--ember); background: var(--ember-16); }
/* 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--spark polyline { stroke-dashoffset: 64; }
html.motion .numbers:not(.is-in) .viz--spark circle { transform: scale(0); }
html.motion .numbers:not(.is-in) .viz--tiles i { transform: none; }
.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__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--spark { width: 42px; height: 26px; } .viz--tiles { transform: scale(0.88); transform-origin: right bottom; }
}

/* ---------- 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; }
.mf-tie { white-space: nowrap; } /* the comma rides with its phrase: alone it opened a line (2026-10-05) */
/* 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, seven brand stories ---------- */
/* Each row leads with its result, the number a business owner reads first (ember, the wide "managing"
   cut). Opening a row tells its story in four beats, dresses the section in that client's colour
   (glow, rail, frame edge, beat markers; 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="smarthub"] { --brand: var(--brand-smarthub); }
.work[data-brand="soccerone"] { --brand: var(--brand-soccerone); }
.work[data-brand="najah"] { --brand: var(--brand-najah); }
.work[data-brand="sellsza"] { --brand: var(--brand-sellsza); }
.work[data-brand="akma"] { --brand: var(--brand-akma); }
.work[data-brand="ntflow"] { --brand: var(--brand-ntflow); }
.work::before { content: ''; position: absolute; inset-block: 12% 0; inset-inline: 45% 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, 1.12fr) minmax(0, 0.88fr); align-items: center; gap: 44px; }

.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: 22px 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-block: 14px; 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: 40px; 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__id { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.work__name { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.1; font-stretch: 82%; color: var(--bone-72); white-space: nowrap; transition: color 0.4s var(--ease-ui), font-stretch 0.5s var(--ease-ui); }
.work__meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--steel); white-space: nowrap; }
:lang(ar) .work__meta { font-family: var(--font-ar); font-size: 12px; }
/* The result: numbers in ember and wide; the "built it" results in bone, narrower, so they never outshout a number. */
.work__kpi { display: flex; align-items: baseline; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.work__fig { font-family: var(--font-display); font-weight: 800; font-size: 16px; line-height: 1.1; font-stretch: 92%; color: var(--bone-72); transition: color 0.4s var(--ease-ui); }
.work__fig--num { font-size: 25px; line-height: 1; font-stretch: 112%; letter-spacing: -0.01em; color: var(--ember-display); }
:lang(ar) .work__fig { font-family: var(--font-ar); font-weight: 800; font-size: 15px; line-height: 1.5; }
:lang(ar) .work__fig--num { font-size: 21px; line-height: 1.3; }
:lang(ar) .work__fig--num[dir="ltr"] { font-family: var(--font-display); font-size: 25px; line-height: 1; }
.work__note { font-family: var(--font-mono); font-size: 10.5px; color: var(--steel); white-space: nowrap; }
:lang(ar) .work__note:not([dir="ltr"]) { font-family: var(--font-ar); font-size: 12px; }
.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__card.is-open .work__fig { color: var(--bone); }
.work__card.is-open .work__fig--num { color: var(--ember-display); text-shadow: var(--glow-text); }
.work__pick:hover .work__logo { opacity: 0.8; }
/* The story: four short beats under the row (two by two on desktop). Every story is 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__story { min-height: 0; overflow: hidden; }
.work__beats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; padding-inline-start: 76px; padding-block: 0 18px; }
.work__beat { min-width: 0; }
.work__beat dt { display: flex; align-items: center; gap: 8px; margin-block-end: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel); }
.work__beat dt::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 2px; background: var(--brand); box-shadow: 0 0 8px var(--brand); }
.work__beat dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--bone-80); text-wrap: pretty; }
.work__beat--result dt { color: var(--ember); }
.work__beat--result dd { color: var(--bone); }
:lang(ar) .work__beat dt { font-family: var(--font-ar); font-weight: 700; font-size: 12px; letter-spacing: 0; text-transform: none; }
:lang(ar) .work__beat dd { font-size: 13.5px; line-height: 1.75; }

.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); } }

/* ---------- master-detail: tablet and desktop (2026-10-05) ---------- */
/* "Crowded, all on top of each other": the list stays a calm list that never opens, and one panel tells
   the picked client's story - its site, its result, four beats with room to breathe. A thin rail in the
   client's colour separates the two, with a dot level with the picked row. The panel's copies come from
   ui.js (.is-detail); phones and a page without JS keep the stories in the rows (rules above). */
.work__detail { display: contents; }
.work__lead, .work__slot { display: none; }
@media (min-width: 768px) {
  .work__detail { display: block; position: relative; min-width: 0; }
  .work.is-detail .work__card .work__more { display: none; }

  /* the list: number, logo, name + meta, result; the picked row gets an ember edge, a wash of its
     client's colour toward the panel and an arrow pointing at it */
  .work.is-detail .work__card::before { top: 10px; bottom: 10px; height: auto; width: 3px; border-radius: 3px; background: var(--ember-fill); box-shadow: 0 0 12px var(--ember-50); transform: scaleY(0); transition: transform 0.45s var(--ease-ui); }
  .work.is-detail .work__card.is-open::before { width: 3px; transform: scaleY(1); }
  .work.is-detail .work__list .work__card { transition: background-color 0.3s; }
/* The list names the brands; the result lives in the panel (owner 2026-10-12: "brand names only"). */
.work.is-detail .work__list .work__kpi { display: none; }
  .work.is-detail .work__list .work__card.is-open { background: linear-gradient(to right, transparent, color-mix(in srgb, var(--brand) 13%, transparent)); }
  [dir="rtl"] .work.is-detail .work__list .work__card.is-open { background: linear-gradient(to left, transparent, color-mix(in srgb, var(--brand) 13%, transparent)); }
  .work.is-detail .work__card:not(.is-open):hover { background: var(--bone-04); }
  .work.is-detail .work__pick { grid-template-columns: 22px 40px minmax(0, 1fr) auto 10px; padding-inline: 18px 14px; }
  .work.is-detail .work__pick::after { content: ''; width: 7px; height: 7px; border-block-start: 2px solid var(--ember); border-inline-end: 2px solid var(--ember); transform: rotate(45deg); opacity: 0; transition: opacity 0.3s, translate 0.4s var(--ease-ui); translate: -4px 0; }
  [dir="rtl"] .work.is-detail .work__pick::after { transform: rotate(-45deg); translate: 4px 0; }
  .work.is-detail .work__card.is-open .work__pick::after { opacity: 1; translate: 0 0; }
  .work.is-detail .work__id { flex-direction: column; align-items: flex-start; gap: 3px; }
  .work.is-detail .work__kpi { flex-wrap: wrap; justify-content: flex-end; gap: 0 8px; max-width: 15em; white-space: normal; text-align: end; }

  /* the panel: site + result side by side, the four beats under them */
  .work.is-detail .work__detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); grid-template-areas: "screen lead" "slot slot"; align-items: center; gap: 22px 28px; }
  .work.is-detail .work__screen { grid-area: screen; border-radius: 14px; }
  .work.is-detail .work__bar { height: 30px; }
  .work.is-detail .work__shots { aspect-ratio: 16 / 9; }
  .work.is-detail .work__url { height: 20px; font-size: 10px; }
  .work.is-detail .work__lead { grid-area: lead; display: grid; }
  .work.is-detail .work__slot { grid-area: slot; display: grid; align-self: start; }
  /* every headline and every story sits in one cell, so the panel keeps the longest one's height and
     the swap is a crossfade */
  .work__headline, .work__tale { grid-area: 1 / 1; min-width: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; }
  .work__headline.is-shown, .work__tale.is-shown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.45s var(--ease-ui) 0.12s, transform 0.55s var(--ease-ui) 0.12s, visibility 0s; }
  .work__tale.is-shown { transition-delay: 0.18s; }

  .work__headline { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .work__hl-id { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-block-end: 8px; }
  .work__hl-logo { width: auto; height: 22px; max-width: 64px; object-fit: contain; filter: var(--logo-filter); }
  .work__hl-name { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.1; color: var(--bone); white-space: nowrap; }
  .work__hl-meta { flex-basis: 100%; font-family: var(--font-mono); font-size: 10.5px; color: var(--steel); }
  .work__hl-fig { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2vw, 30px); line-height: 1.08; font-stretch: 96%; color: var(--bone); text-wrap: balance; }
  .work__hl-fig--num { font-size: clamp(34px, 3.5vw, 54px); line-height: 0.95; font-stretch: 112%; letter-spacing: -0.015em; color: var(--ember-display); text-shadow: var(--glow-text); }
  .work__hl-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--steel); }
  :lang(ar) .work__hl-meta { font-family: var(--font-ar); font-size: 12px; }
  :lang(ar) .work__hl-fig { font-family: var(--font-ar); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.45; }
  :lang(ar) .work__hl-fig--num { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.3; }
  :lang(ar) .work__hl-fig--num[dir="ltr"] { font-family: var(--font-display); font-size: clamp(34px, 3.5vw, 54px); line-height: 0.95; }
  :lang(ar) .work__hl-note:not([dir="ltr"]) { font-family: var(--font-ar); font-size: 13px; letter-spacing: 0; }

  /* the four beats: one line of a path each (Situation -> Result), label beside its sentence */
  .work__steps { margin: 0; display: grid; --pad: 9px; --row: 23px; }
  :lang(ar) .work__steps { --row: 26px; --pad: 7px; }
  .work__step { position: relative; display: grid; grid-template-columns: 7.2em minmax(0, 1fr); column-gap: 16px; padding-block: var(--pad); }
  .work__step:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: 3.5px; top: calc(var(--pad) + var(--row) / 2); height: 100%; width: 1px; background: color-mix(in srgb, var(--brand) 55%, var(--bone-14)); }
  .work__step dt { display: flex; align-items: center; gap: 10px; height: var(--row); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel); }
  .work__step dt::before { content: ''; position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--ink), 0 0 10px var(--brand); }
  .work__step dd { margin: 0; font-size: 15px; line-height: var(--row); color: var(--bone-80); text-wrap: pretty; }
  .work__step--result dt { color: var(--ember); }
  .work__step--result dt::before { background: var(--ember-fill); box-shadow: 0 0 0 3px var(--ink), 0 0 12px var(--ember-50); }
  .work__step--result dd { font-size: 16px; font-weight: 600; color: var(--bone); }
  :lang(ar) .work__step dt { font-family: var(--font-ar); font-weight: 700; font-size: 12.5px; letter-spacing: 0; }
  :lang(ar) .work__step dd { font-size: 15px; }
  :lang(ar) .work__step--result dd { font-size: 16px; }
}
/* Side by side: the panel takes the reading side's far column behind a rail in the client's colour. */
@media (min-width: 1024px) {
  .work__stage { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start; gap: 0; }
  .work__detail { margin-inline-start: clamp(22px, 2.4vw, 40px); padding-inline-start: clamp(24px, 2.6vw, 44px); border-inline-start: 1px solid color-mix(in srgb, var(--brand) 45%, var(--bone-08)); }
  .work.is-detail .work__detail::before { content: ''; position: absolute; inset-inline-start: -5px; top: var(--mark, 30px); width: 9px; height: 9px; margin-block-start: -4.5px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--ink), 0 0 14px var(--brand); transition: top 0.5s var(--ease-ui); }
}
@media (min-width: 1024px) and (min-height: 941px) {
  .work.is-detail .work__detail { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}
/* His laptop (1509x658) and every short desktop: head, all seven rows and the whole panel in one screen
   after the nav jump. The headline follows the height, like the launch section's. */
@media (min-width: 1024px) and (max-height: 940px) {
  .work { padding-block: 20px 32px; }
  #work .section-head { margin-block-end: 14px; }
  #work .h2 { font-size: clamp(2.25rem, 7.6svh, 3.6rem); }
  :lang(ar) #work .h2 { line-height: 1.1; }
  .work__pick { padding-block: 10px; }
  .work.is-detail .work__detail { grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.85fr); gap: 16px 26px; }
  .work__steps { --pad: 7px; }
  :lang(ar) .work__steps { --pad: 5px; }
}

/* Stacked (tablets, phones). Tablets: the list (two columns) above the panel. Phones: with JS the
   screen moves under the open story (ui.js), so the site a visitor picks shows where they are reading;
   without JS it stays above the list. */
@media (max-width: 1023px) {
  .work__stage { grid-template-columns: 1fr; gap: 28px; }
  .work::before { inset-inline: 0; inset-block: 8% 50%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .work.is-detail .work__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .work.is-detail .work__card:nth-last-child(2) { border-block-end: 1px solid var(--bone-08); }
  .work.is-detail .work__pick { grid-template-columns: 22px 40px minmax(0, 1fr); grid-template-areas: "num logo id" ". . kpi"; gap: 4px 12px; }
  .work.is-detail .work__pick::after { display: none; }
  .work.is-detail .work__num { grid-area: num; }
  .work.is-detail .work__logo-box { grid-area: logo; }
  .work.is-detail .work__id { grid-area: id; }
  .work.is-detail .work__kpi { grid-area: kpi; justify-content: flex-start; max-width: none; text-align: start; }
  .work.is-detail .work__fig { font-size: 14px; }
  .work.is-detail .work__fig--num, :lang(ar) .work.is-detail .work__fig--num[dir="ltr"] { font-size: 20px; }
  :lang(ar) .work.is-detail .work__fig--num { font-size: 17px; }
  .work.is-detail .work__detail { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); }
  .work.is-detail .work__detail { padding-block-start: 26px; border-block-start: 1px solid color-mix(in srgb, var(--brand) 45%, var(--bone-08)); }
}
@media (max-width: 767px) {
  .work__screen { order: -1; width: 100%; max-width: 640px; justify-self: center; }
  .work__story > .work__screen { margin-block: 2px 22px; }
}
@media (max-width: 767px) {
  .work__pick { grid-template-columns: 20px 34px minmax(0, 1fr); grid-template-areas: "num logo id" ". . kpi"; gap: 6px 12px; padding-block: 14px; }
  .work__num { grid-area: num; }
  .work__logo-box { grid-area: logo; width: 34px; height: 24px; }
  .work__id { grid-area: id; gap: 2px 10px; }
  .work__kpi { grid-area: kpi; justify-content: flex-start; flex-wrap: wrap; gap: 2px 8px; white-space: normal; }
  .work__name { font-size: 20px; }
  .work__fig--num { font-size: 22px; }
  :lang(ar) .work__fig--num[dir="ltr"] { font-size: 22px; }
  .work__beats { grid-template-columns: 1fr; gap: 12px; padding-inline-start: 66px; padding-block-end: 20px; }
  .work__beat dd { font-size: 14px; }
  .work__story > .work__screen { margin-inline-start: 0; }
  .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); }
/* the event's name on the big photo, in the reel's caption voice */
.stage__p--speaker img { object-position: 52% 30%; } /* IMG_9816 (owner 2026-10-12): his face and the mic */
.stage__p--tall img { object-position: 28% 50%; } /* IMG_7130: he stands left of centre, the room fills the right */
.stage__p--tall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ink-92) 0%, var(--ink-00) 38%); pointer-events: none; }
.stage__cap { position: absolute; z-index: 1; inset-inline: 20px; bottom: 18px; margin: 0; display: flex; flex-direction: column; gap: 6px; color: var(--night-bone); pointer-events: none; }
.stage__cap-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ember); }
.stage__cap-t { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.1; font-stretch: 90%; }
:lang(ar) .stage__cap-k { font-family: var(--font-ar); font-size: 12px; letter-spacing: 0; }
:lang(ar) .stage__cap-t { font-family: var(--font-ar); font-size: 17px; line-height: 1.4; }
.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; }
}

/* ---------- insights: three articles from the series ---------- */
.insights { padding-block: 64px 32px; }
.insights .link-accent { display: inline-flex; align-items: center; gap: 6px; }
.insights__body { display: block; }
.insights__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.insights__list li { min-width: 0; }
.insight { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 232px; padding: 24px; overflow: hidden; border: 1px solid var(--bone-10); border-radius: var(--r-card); background: var(--graphite); transition: border-color 0.35s var(--ease-ui), transform 0.35s var(--ease-ui), box-shadow 0.35s var(--ease-ui); }
.insight::before { content: ''; position: absolute; inset-inline: 0; top: -1px; height: 2px; background: var(--ember); }
.insight:hover, .insight:focus-visible { border-color: var(--ember-50); transform: translateY(-4px); box-shadow: 0 14px 32px -24px var(--ember-50); }
.insight__meta { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember); }
.insight__meta b { font-weight: 500; direction: ltr; unicode-bidi: isolate; }
.insight__text { display: flex; flex-direction: column; gap: 9px; margin-block-start: 24px; }
.insight__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.55vw, 1.4rem); line-height: 1.18; 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__read { display: inline-flex; align-items: center; gap: 6px; margin-block-start: auto; padding-block-start: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember); }
.insight__read svg { flex: none; }
:lang(ar) .insight__meta, :lang(ar) .insight__read { font-family: var(--font-ar); font-size: 13px; letter-spacing: 0; text-transform: none; }
@media (max-width: 1023px) {
  .insights .section-head { flex-direction: column; align-items: flex-start; }
  .insights__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .insight { transition: 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__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); }
}

/* ---------- 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); }

/* The two headline lines never touch: the descenders of "campaign" sat on the caps of "Audience". */
.launch__title { line-height: 1.06; }
.launch__title .h2__manage { display: inline-block; margin-block-start: 0.04em; }

/* Short desktop screens (his own screen is 1509x658: a 1920x1080 laptop at 125% minus the browser's
   bars): the whole section - eyebrow to footer line - 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: 940px) {
  .contact { padding-block: 8px 4px; }
  .launch__title { font-size: clamp(1.9rem, 5.4svh, 2.6rem); }
  .launch__lede { font-size: 14.5px; line-height: 1.5; }
  .obj { gap: 6px; }
  .launch__send { gap: 6px; }
  .footer { padding-block: 8px 10px; }
  .launch__eyebrow { margin-block-end: 8px; }
  .console { margin-block-start: 14px; }
  .console__setup { gap: 2px; padding: 8px 10px 10px; }
  .step { padding: 6px 10px; }
  .step__lab { margin-block-end: 4px; }
  .seg__opt { min-height: 40px; padding-block: 6px; }
  .obj__card { padding: 7px 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; }
}