/* Daly Hadjtaieb — warm editorial surfaces, orange details, a charcoal film room. */

/* Design tokens */
:root {
  --paper:#f5f2ee; --surface:#fffcf8; --ink:#211e1a; --muted:#6c655e; --line:#dcd6ce;
  --accent:#c34416; --accent-hover:#a8340c; --orange:#f27943;
  --dark:#20221f; --dark-surface:#2c2e2a; --dark-text:#f5f2ec; --dark-muted:#bbbcb2; --dark-line:#44473f;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --arabic:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;
  --container:1240px; --gutter:clamp(20px,4.5vw,72px); --section:clamp(76px,8.5vw,124px); --header-h:84px;
  --radius:10px; --ease:cubic-bezier(.22,1,.36,1); --fast:200ms; --motion:650ms;
}

/* Base and shared layout */
*,*::before,*::after {box-sizing:border-box}
html {background:var(--paper); color:var(--ink); scroll-padding-top:calc(var(--header-h) + 20px); -webkit-text-size-adjust:100%}
body {margin:0; font:16px/1.65 var(--sans); -webkit-font-smoothing:antialiased}
body.modal-open {overflow:hidden}
h1,h2,h3,p,figure,blockquote,dl,dd {margin:0}
h1,h2,h3 {font-weight:700; text-wrap:balance}
h2 {font-size:clamp(2.4rem,4.4vw,4rem); line-height:1.12; letter-spacing:-.055em}
h3 {font-size:1.15rem; line-height:1.35; letter-spacing:-.025em}
p {text-wrap:pretty}
a {color:inherit; text-decoration:none}
button {font:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer}
img,video,svg {display:block; max-width:100%}
ul,ol {list-style:none; padding:0; margin:0}
bdi {unicode-bidi:isolate; direction:ltr}
[hidden] {display:none!important}
::selection {background:var(--accent); color:white}
:focus-visible {outline:3px solid var(--accent); outline-offset:5px}
button:disabled {opacity:.45; cursor:not-allowed}
.container {width:min(100%,calc(var(--container) + 2 * var(--gutter))); padding-inline:var(--gutter); margin-inline:auto}
.section {padding-block:var(--section)}
.sr-only {position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link {position:fixed; top:12px; inset-inline-start:12px; z-index:100; padding:12px 20px; background:var(--ink); color:white; transform:translateY(-180%)}
.skip-link:focus {transform:none}
.accent {color:var(--accent); font-style:normal}
.eyebrow {display:flex; gap:14px; align-items:center; margin-block-end:24px; font-size:11px; line-height:1.5; font-weight:700; text-transform:uppercase; letter-spacing:.14em}
.section-number {color:var(--accent); font-variant-numeric:tabular-nums}
.section-number::after {content:"/"; color:var(--muted); margin-inline-start:14px}
.section-head {display:grid; grid-template-columns:1.35fr 1fr; gap:50px; align-items:end; margin-block-end:48px}
.section-intro {max-width:35ch; color:var(--muted); line-height:1.8}
.section-head > .section-intro {justify-self:end; padding-block-end:4px}
.text-link {position:relative}
.text-link::after {content:""; height:1px; position:absolute; inset-inline:0; bottom:0; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform 280ms var(--ease)}
.text-link:hover::after,.text-link:focus-visible::after {transform:scaleX(1)}
.btn {display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:48px; padding:14px 20px; border:1px solid transparent; border-radius:7px; font-size:13px; font-weight:700; line-height:1.5; transition:background var(--fast),border-color var(--fast),color var(--fast),transform var(--fast) var(--ease)}
.btn-lg {min-height:54px; padding:16px 22px}
.btn-xl {padding:19px 30px; font-size:15px}
.btn-primary {background:var(--accent); color:#fff}
.btn-primary:hover {background:var(--accent-hover); transform:translateY(-2px)}
.btn-ghost {border-color:var(--line)}
.btn-ghost:hover {border-color:var(--ink); background:var(--surface)}
.btn:active {transform:translateY(1px)}
.btn-arrow,.arrow {display:inline-block; font-size:20px; transition:transform 250ms var(--ease)}
a:hover .btn-arrow,a:hover .arrow {transform:translate(3px,-3px)}
.btn-ghost:hover .btn-arrow {transform:translateY(3px)}

/* Proof strip entrance: shorter lift than the page default. */
.can-reveal .hero-proof > div:not(.is-visible) {transform:translateY(12px)}

/* Navigation */
.site-header {position:sticky; top:0; z-index:30; background:var(--paper); border-bottom:1px solid transparent; transition:border-color var(--fast)}
.site-header.is-scrolled {border-color:var(--line)}
.header-inner {display:flex; gap:34px; align-items:center; min-height:var(--header-h)}
.brand {display:flex; gap:12px; align-items:center; margin-inline-end:auto}
.brand-mark {position:relative; display:grid; place-items:center; width:40px; height:40px; flex:none; background:var(--ink); border-radius:50%; color:var(--paper); font-size:20px; font-weight:800; letter-spacing:-.08em; direction:ltr}
.brand-mark::after {content:""; width:5px; height:5px; background:var(--orange); border-radius:50%; position:absolute; transform:translate(11px,9px)}
.brand-text {display:flex; flex-direction:column; line-height:1.5}
.brand-name {font-size:13px; font-weight:800}
.brand-role {font-size:10px; color:var(--muted)}
.main-nav {display:flex; align-items:center; gap:30px; font-size:12px; font-weight:600}
.main-nav a {padding-block:12px}
.nav-contact {display:inline-flex; gap:14px; align-items:center}
.nav-contact .arrow {color:var(--accent)}
.language-toggle {display:flex; align-items:center; gap:2px; padding-inline-start:20px; border-inline-start:1px solid var(--line); font-size:11px}
.language-toggle > span {color:var(--line)}
.language-toggle button {width:36px; min-height:44px; color:var(--muted); font-weight:700}
.language-toggle button[aria-pressed="true"] {color:var(--accent)}
.language-toggle button[lang="ar"] {font:600 16px var(--arabic)}

/* Online status — green dot with a soft pulse. */
.status-chip {display:inline-flex; align-items:center; gap:9px; margin:0; font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap}
.status-chip--header {padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.status-chip--hero {display:none}
.status-chip--contact {margin-block-end:18px; color:var(--dark-text)}
.live-dot {position:relative; width:8px; height:8px; flex:none; border-radius:50%; background:#22b35e; box-shadow:0 0 0 2px #22b35e2e}
.live-dot::after {content:""; position:absolute; inset:0; border-radius:50%; background:#22b35e; opacity:.55; animation:live-pulse 2.4s var(--ease) infinite}
@keyframes live-pulse {0% {transform:scale(1); opacity:.55} 70%,100% {transform:scale(2.6); opacity:0}}

/* Introduction */
.hero {padding-block-start:clamp(36px,5vw,72px)}
.hero-grid {display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(32px,4vw,64px); align-items:center}
.pill {display:flex; gap:9px; align-items:center; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.045em}
.pill-dot {width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none}
.hero-title {margin-block:24px; font-size:clamp(3rem,5.1vw,5rem); line-height:1.08; letter-spacing:-.065em; font-weight:800}
.hero-title > * {display:block}
.hero-lead {max-width:41ch; color:var(--muted); font-size:15px; line-height:1.8}
.hero-actions {display:flex; gap:12px; flex-wrap:wrap; margin-block-start:28px}
/* Proof strip: full container width under the hero, numbers carrying the section. */
.hero-proof {position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block-start:clamp(44px,5.5vw,76px); padding-block:clamp(34px,4vw,54px) clamp(30px,3.6vw,46px);
  border-top:1px solid var(--line)}
.hero-proof::before {content:""; position:absolute; top:-1px; inset-inline-start:0; width:56px; height:2px; background:var(--accent)}
.hero-proof > div {padding-inline:clamp(20px,3.4vw,52px); border-inline-start:1px solid var(--line)}
.hero-proof > div:first-child {padding-inline-start:0; border-inline-start:0}
.hero-proof dd {margin:0; color:var(--ink); font-size:clamp(46px,5.4vw,76px); font-weight:600; line-height:1;
  letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.hero-proof .plus {display:inline-block; font-size:.58em; font-weight:500; letter-spacing:0; transform:translateY(-.52em); margin-inline-start:.04em}
.hero-proof dt {margin-block-start:13px; color:var(--muted); font-size:15px; line-height:1.4; letter-spacing:.01em}
.hero-visual {min-width:0}
.visual-heading {display:flex; justify-content:space-between; margin-block-end:21px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em}
.visual-heading > :last-child {color:var(--accent)}
.hero-stack {display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:10px; align-items:center; direction:ltr}
.hero-clip {position:relative; width:100%; aspect-ratio:9/16; border-radius:9px; overflow:hidden; background:#d8d0c4; box-shadow:0 18px 30px -22px #211e1a88; transition:transform 400ms var(--ease),box-shadow 400ms var(--ease)}
.hero-clip--a {align-self:start; margin-block-start:30px}
.hero-clip--b {align-self:end; margin-block-end:28px}
.hero-clip img {height:100%; width:100%; object-fit:cover; transition:transform 600ms var(--ease)}
.hero-clip::after {content:""; position:absolute; inset:65% 0 0; background:linear-gradient(transparent,#000b); pointer-events:none}
.clip-label {position:absolute; z-index:1; inset-inline:10px; bottom:12px; display:flex; flex-wrap:wrap; align-items:center; gap:5px; color:white; font-size:8px}
.clip-brand {font-weight:700}
.clip-time {margin-inline-start:auto; font-size:8px}
.clip-tag {font-size:7px; padding:1px 4px; border:1px solid #ffffff99; border-radius:3px}
.clip-play,.play-btn {position:absolute; top:50%; left:50%; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fffef7ed; transform:translate(-50%,-50%); z-index:2; transition:background 220ms,transform 300ms var(--ease)}
.clip-play--lg {width:52px; height:52px}
.clip-play::after,.play-btn::after {content:""; margin-left:3px; width:0; height:0; border-block:5px solid transparent; border-left:8px solid var(--ink)}
.clip-play--lg::after {border-block-width:7px; border-left-width:11px}
.visual-note {display:flex; gap:10px; align-items:center; margin-block-start:26px; border-top:1px solid var(--line); padding-block-start:14px; color:var(--muted); font-size:10px}
.note-mark {color:var(--accent); font-size:20px}

/* VSL timeline: how a video sales letter is cut, read left to right like an editing timeline. */
.vsl {margin-block-start:24px}
.vsl-head {display:flex; justify-content:space-between; gap:12px; margin-block-end:11px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.1em}
.vsl-run {color:var(--accent); font-variant-numeric:tabular-nums; letter-spacing:.06em}
.vsl-track {position:relative; direction:ltr}
.vsl-segs {display:flex; gap:4px}
.vsl-seg {flex:var(--span,1) 1 0; min-inline-size:62px; display:grid; gap:5px; align-content:start}
.vsl-cue {color:var(--muted); font-size:8px; letter-spacing:.06em; font-variant-numeric:tabular-nums}
.vsl-cue::before {content:""; display:block; width:1px; height:5px; margin-block-end:4px; background:var(--accent); opacity:.55}
.vsl-bar {height:9px; border-radius:3px; background:var(--line); transition:transform 320ms var(--ease),filter 320ms var(--ease); transform-origin:bottom}
.vsl-seg--hook .vsl-bar {background:var(--accent)}
.vsl-seg--problem .vsl-bar {background:var(--orange)}
.vsl-seg--body .vsl-bar {background:repeating-linear-gradient(115deg,#a79c8f 0 5px,#c8bfb2 5px 10px)}
.vsl-seg--cta .vsl-bar {background:var(--ink)}
.vsl-name {font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.12em}
.vsl-note {color:var(--muted); font-size:9px; line-height:1.5}
.vsl-playhead {position:absolute; inset-block:14px 0; inline-size:1px; inset-inline-start:0; background:var(--accent); opacity:0; pointer-events:none}
.vsl-playhead::before {content:""; position:absolute; top:-3px; left:-2px; width:5px; height:5px; border-radius:50%; background:var(--accent)}
.logos {padding-block:54px 38px; --logo-gap:clamp(28px,4vw,56px); --logo-speed:28s}
.logos-title {font-size:9px; text-transform:uppercase; letter-spacing:.15em; text-align:center; color:var(--muted); margin-block-end:24px}
.marquee {overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-inner {display:flex; width:max-content; animation:logo-scroll var(--logo-speed) linear infinite; will-change:transform}
.marquee:hover .marquee-inner,.marquee:focus-within .marquee-inner {animation-play-state:paused}
/* Logos have no reading direction: keep the strip laid out left-to-right in every language,
   so the two tracks always start at the left edge. Arabic just scrolls the other way. */
[dir="rtl"] .marquee {direction:ltr}
[dir="rtl"] .marquee-inner {animation-direction:reverse}
@keyframes logo-scroll {to {transform:translateX(-50%)}}
.logo-row {display:flex; align-items:center; gap:var(--logo-gap); padding-inline-end:var(--logo-gap)}
.logo-row li {flex:none; height:56px; display:flex; align-items:center; justify-content:center; transition:transform var(--fast) var(--ease)}
.logo-row li:hover {transform:translateY(-3px)}
.logo-row img {max-height:calc(30px * var(--h,1)); width:auto; height:auto; object-fit:contain}
.logo-word {font-size:clamp(13px,1.2vw,17px); font-weight:800; letter-spacing:-.035em}

/* Selected work */
.work {background:var(--dark); color:var(--dark-text); padding-block:80px 48px}
.work .section-number,.work .eyebrow {color:var(--orange)}
.work .section-number::after {color:#6b6f62}
.work .section-intro {color:var(--dark-muted); font-size:14px}
.work :focus-visible {outline-color:var(--orange)}
.work-toolbar {display:flex; gap:20px; justify-content:space-between; align-items:center; padding-block:18px; border-block:1px solid var(--dark-line); margin-block-end:32px}
.filters {display:flex; flex-wrap:wrap; gap:4px}
.filters button {display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; border-radius:5px; padding:8px 13px; font-size:11px; color:var(--dark-muted); transition:color 180ms,background 180ms}
.filters button:hover {background:var(--dark-surface); color:white}
.filters button[aria-pressed="true"] {background:var(--dark-text); color:var(--dark)}
.count {font-size:9px; opacity:.7; font-variant-numeric:tabular-nums}
.work-total {color:var(--dark-muted); white-space:nowrap; font-size:10px}
.work-total > span:first-child {color:var(--dark-text)}
.work-grid {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 24px; align-items:start}
.work-card {min-width:0}
.video-card {display:block; border-radius:8px}
.media-wrap {position:relative; aspect-ratio:9/16; overflow:hidden; isolation:isolate; border-radius:8px; background:var(--dark-surface)}
.media-wrap > img,.media-wrap > video {width:100%; height:100%; object-fit:cover}
.media-wrap > img {transition:transform 650ms var(--ease)}
.media-wrap > video {position:absolute; inset:0; opacity:0; z-index:1; transition:opacity 180ms}
.is-previewing .media-wrap > video {opacity:1}
.media-top {display:flex; align-items:start; flex-wrap:wrap; gap:4px; position:absolute; z-index:2; inset:9px 9px auto; direction:ltr}
.tag,.duration {background:#1b1c19e8; color:white; border-radius:3px; font-size:10px; padding:4px 6px; line-height:1.4}
.tag-ai {background:#f5f2ee; color:#28251f}
.duration {margin-inline-start:auto}
.play-btn {width:40px; height:40px}
.is-previewing .play-btn {transform:translate(-50%,-50%) scale(.85); opacity:.25}
.card-caption {position:relative; padding-block:13px 6px; padding-inline-end:23px}
.card-caption h3 {color:var(--dark-text); font-size:13px; font-weight:600; letter-spacing:0}
.card-caption p {margin-block-start:4px; color:var(--dark-muted); font-size:12px; line-height:1.65}
.card-num {position:absolute; inset-inline-end:0; top:14px; color:#a4a999; font-size:9px}
.work-note {display:flex; gap:12px; justify-content:center; align-items:center; padding-block-start:34px; margin-block-start:25px; border-top:1px solid var(--dark-line); font-size:11px; color:var(--dark-muted)}
.work-note > span:first-child {font-size:22px; color:var(--orange)}

/* Experience */
/* Numbers on a real timeline. The card carries its own dark surface, ring and shadow,
   so it reads the same whether the section behind it is paper or charcoal. */
.stats-band {padding-block:clamp(56px,7vw,96px); background:var(--paper)}
.edit-frame {position:relative; isolation:isolate; margin:0; display:flex; flex-direction:column; justify-content:flex-end;
  min-height:clamp(400px,42vw,560px); padding:clamp(24px,3.4vw,52px); overflow:hidden;
  border-radius:clamp(18px,2.4vw,34px); background:var(--dark); color:var(--dark-text);
  box-shadow:0 2px 4px #211e1a14,0 40px 80px -44px #211e1a99,0 0 0 1px #211e1a14}
.edit-frame::after {content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit; box-shadow:inset 0 0 0 1px #ffffff1f}
.band-media {position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:50% 45%; filter:saturate(1.08) contrast(1.08) brightness(1.02)}
.band-scrim {position:absolute; inset:0; z-index:-1; background:
  linear-gradient(to bottom,#20221fa6 0%,#20221f1a 22%,#20221f99 56%,#20221fe6 82%,#20221ff2 100%),
  radial-gradient(95% 75% at 16% 95%,#20221fe6 0%,#20221f00 58%)}
.band-playhead {position:absolute; z-index:-1; inset-block:0; inset-inline-start:34%; width:1px; background:var(--orange); opacity:.65; box-shadow:0 0 18px 1px #f2794366}
.band-playhead::before {content:""; position:absolute; top:0; inset-inline-start:-3px; width:7px; height:7px; border-radius:0 0 2px 2px; background:var(--orange)}
/* Chrome strip: the card behaves like a viewer window, not a photo with text on it. */
.frame-chrome {position:absolute; z-index:2; inset-block-start:0; inset-inline:0; display:flex; align-items:center; gap:16px;
  padding:clamp(14px,1.6vw,20px) clamp(20px,3.4vw,52px); border-bottom:1px solid #ffffff14;
  background:linear-gradient(to bottom,#20221fbf,#20221f00); color:var(--dark-muted);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.chrome-rec {display:inline-flex; align-items:center; gap:7px; color:var(--dark-text)}
.rec-dot {width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 3px #f2794333}
.chrome-label {overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chrome-time {margin-inline-start:auto; font-variant-numeric:tabular-nums; letter-spacing:.08em}
.frame-body {position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr); gap:26px; align-items:end}
/* The card now carries one statement instead of repeating the hero numbers. */
.stats-title {max-width:14ch; font-size:clamp(34px,4.6vw,66px); letter-spacing:-.05em; line-height:1.05; text-shadow:0 2px 24px #20221f99}
.band-caption {grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-block-start:4px; padding-block-start:22px; border-top:1px solid #ffffff1f; color:var(--dark-muted); font-size:11px; letter-spacing:.02em}
.band-dot {width:5px; height:5px; flex:none; border-radius:50%; background:var(--orange)}

/* Client messages */
.testimonial-grid {display:grid; grid-template-columns:1fr 1fr; gap:20px}
.quote-card {padding:clamp(22px,3vw,40px); border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; min-width:0; background:var(--surface)}
.quote-meta {display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px; margin-block-end:26px}
.platform {display:flex; gap:8px; align-items:center}
.platform::before {content:""; width:5px; height:5px; background:var(--accent); border-radius:50%}
.quote-card blockquote {font-size:clamp(19px,2vw,26px); line-height:1.55; font-weight:500; letter-spacing:-.025em}
.quote-translation {color:var(--muted); font-size:13px; line-height:1.8; margin-block-start:14px}
/* French interface: the testimonials are already in French, so no translation line. */
html[lang="fr"] .quote-translation {display:none}
.receipt {margin-block:25px}
.receipt-label {display:block; font-size:9px; color:var(--muted); margin-block-end:8px}
.receipt img {width:auto; max-width:100%; height:auto; border-radius:3px; border:1px solid var(--line)}
.quote-card figcaption {margin-block-start:auto; padding-block-start:22px; display:flex; gap:12px; align-items:center; border-top:1px solid var(--line)}
.quote-avatar {display:grid; place-items:center; width:34px; height:34px; flex:none; font-size:10px; border:1px solid var(--line); border-radius:50%}
.quote-who {display:flex; flex-direction:column; gap:2px}
.quote-name {font-size:11px; font-weight:700}
.quote-role {color:var(--muted); font-size:11px}
.quote-cta {justify-content:center; background:#ebe5dc; border-color:#ebe5dc}
.quote-cta .cta-eyebrow {color:var(--accent)}
.cta-title {max-width:15ch; font-size:clamp(30px,3.5vw,45px); line-height:1.15; letter-spacing:-.05em}
.cta-body {color:var(--muted); font-size:13px; margin-block:20px 28px; max-width:38ch}
.quote-cta .btn {align-self:start}

/* Services — a service selector on the right, a preview of that craft on the left. */
.services {border-block:1px solid var(--line)}
.services-grid {display:grid; grid-template-columns:.95fr 1.15fr; gap:clamp(44px,6vw,92px); align-items:start}
.services-intro {position:sticky; top:calc(var(--header-h) + 32px)}
.services-intro .section-intro {margin-block-start:22px; font-size:14px; max-width:34ch}

/* Stage */
.stage {margin-block-start:34px; border:1px solid var(--line); border-radius:12px; background:var(--dark); color:var(--dark-text); overflow:hidden; box-shadow:0 2px 3px #211e1a0f,0 26px 50px -38px #211e1a8c}
.stage-bar {display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid #ffffff14; color:var(--dark-muted); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase}
.stage-dot {width:5px; height:5px; flex:none; border-radius:50%; background:var(--orange)}
.stage-name {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dark-text)}
.stage-tc {margin-inline-start:auto; font-variant-numeric:tabular-nums; letter-spacing:.08em}
.stage-body {position:relative; aspect-ratio:1/1; min-height:280px; max-height:420px}
.svc-panel {position:absolute; inset:0; padding:clamp(16px,2vw,24px); opacity:0; visibility:hidden;
  transform:translate3d(0,calc(var(--dir,1) * 14px),0); transition:opacity 420ms var(--ease),transform 460ms var(--ease),visibility 0s linear 460ms}
.svc-panel.is-active {opacity:1; visibility:visible; transform:none; transition-delay:0s,0s,0s}
.svc-panel:focus-visible {outline:3px solid var(--orange); outline-offset:-3px; border-radius:8px}
.pv {height:100%; display:grid; gap:14px}
.pv-kicker {color:var(--dark-muted); font-size:11px; line-height:1.6; letter-spacing:.01em}

/* Shared preview primitives */
.frame {position:relative; margin:0; height:100%; aspect-ratio:9/16; border-radius:8px; overflow:hidden; background:#1b1d1a; box-shadow:0 0 0 1px #ffffff1f,0 18px 34px -26px #000}
.frame img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.frame-cap {position:absolute; z-index:2; inset-inline:8px; bottom:9px; padding:6px 8px; border-radius:5px; background:#121411d9; backdrop-filter:blur(2px); color:#fff; font-size:10px; font-weight:700; line-height:1.35; text-align:center; text-wrap:balance}

/* 01 Hooks — a vertical frame and a three-second run-up */
.pv-hook {grid-template-columns:auto minmax(0,1fr); align-items:stretch; gap:18px}
.pv-side {display:flex; flex-direction:column; justify-content:flex-end; gap:12px; min-width:0}
.pv-kicker, .pv-side .pv-kicker {margin:0}
.pv-side .pv-kicker {color:var(--orange); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase}
.meter {display:flex; flex-direction:column; gap:7px}
.meter-bar {display:block; height:3px; border-radius:2px; background:#ffffff26; overflow:hidden}
.meter-bar i {display:block; width:100%; height:100%; transform-origin:left; background:var(--orange)}
[dir="rtl"] .meter-bar i {transform-origin:right}
.meter-nums {display:flex; justify-content:space-between; color:var(--dark-muted); font-size:9px; font-variant-numeric:tabular-nums; letter-spacing:.08em}

/* 02 UGC — framing guides, timed captions, two cuts */
.pv-ugc {grid-template-columns:auto minmax(0,1fr); align-items:stretch}
.shot {transition:none}
.shot-b {opacity:1}
.guides {position:absolute; z-index:1; inset:9px; pointer-events:none;
  background:linear-gradient(to right,#ffffff2e 1px,transparent 1px) 33.3% 0/33.3% 100%,
             linear-gradient(to bottom,#ffffff2e 1px,transparent 1px) 0 33.3%/100% 33.3%}
.guides::before,.guides::after {content:""; position:absolute; width:13px; height:13px; border:1.5px solid var(--orange)}
.guides::before {top:0; inset-inline-start:0; border-inline-end:0; border-block-end:0}
.guides::after {bottom:0; inset-inline-end:0; border-inline-start:0; border-block-start:0}
.cut-flash {position:absolute; z-index:3; inset:0; background:#fff; opacity:0; pointer-events:none}
.cap-stack {display:flex; flex-direction:column; justify-content:flex-end; gap:8px; min-width:0}
.cap {display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; background:#ffffff0f; border-inline-start:2px solid var(--orange); color:var(--dark-text); font-size:11px; font-weight:600}
.cap b {margin-inline-start:auto; color:var(--dark-muted); font-size:9px; font-weight:600; font-variant-numeric:tabular-nums}

/* 03 VSL — the shape of a long-form cut, beside the frame it belongs to */
.pv-vsl {grid-template-columns:auto minmax(0,1fr); gap:20px; align-items:center}
.pv-vsl .frame {height:88%}
.frame-play {position:absolute; z-index:2; top:50%; inset-inline-start:50%; width:34px; height:34px; transform:translate(-50%,-50%); display:grid; place-items:center; border-radius:50%; background:#ffffffeb}
.frame-play::after {content:""; width:0; height:0; margin-left:3px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:10px solid var(--dark)}
.vsl-col {display:flex; flex-direction:column; justify-content:center; gap:16px; min-width:0}
.vsl-steps {position:relative; display:flex; flex-direction:column; gap:10px; padding-inline-start:16px}
.steps-head {position:absolute; inset-block:0 auto; inset-inline-start:0; width:1px; height:100%; background:var(--orange); box-shadow:0 0 12px 1px #f2794373}
.steps-head::after {content:""; position:absolute; bottom:0; inset-inline-start:-3px; width:7px; height:7px; border-radius:2px; background:var(--orange)}
.seg {display:flex; flex-direction:column; gap:7px; padding:10px 12px; border-radius:6px; background:#ffffff1a; color:var(--dark-text); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.seg-bar {display:block; height:3px; border-radius:2px; background:#ffffff26; overflow:hidden}
.seg-bar i {display:block; height:100%; border-radius:2px; background:var(--orange); transform-origin:left}
[dir="rtl"] .seg-bar i {transform-origin:right}
.seg-1 .seg-bar i {width:32%}
.seg-2 .seg-bar i {width:74%}
.seg-3 .seg-bar i {width:100%}

/* 04 AI — fragments settling into one composition */
.pv-ai {grid-template-rows:minmax(0,1fr) auto; justify-items:center; gap:14px}
/* Each fragment carries its own slice of one frame, so they resolve into a single image. */
.mosaic {display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(3,1fr); gap:3px;
  height:100%; aspect-ratio:9/16; min-height:0; border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px #ffffff1f}
.mosaic i {background-image:url("posters/work-fr-04.jpg"); background-size:200% 300%; background-repeat:no-repeat}
.mosaic i:nth-child(1) {background-position:0 0}
.mosaic i:nth-child(2) {background-position:100% 0}
.mosaic i:nth-child(3) {background-position:0 50%}
.mosaic i:nth-child(4) {background-position:100% 50%}
.mosaic i:nth-child(5) {background-position:0 100%}
.mosaic i:nth-child(6) {background-position:100% 100%}

/* 05 Versions — one cut, subtitles swapping language */
.pv-subs {grid-template-columns:auto minmax(0,1fr); align-items:end}
.sub-line {position:absolute; z-index:2; inset-inline:8px; bottom:10px; height:34px}
.sub-line span {position:absolute; inset-inline:0; bottom:0; display:block; padding:5px 6px; border-radius:4px; background:#12141199; color:#fff; font-size:10.5px; font-weight:700; text-align:center; opacity:0}
.sub-line span:last-child {opacity:1}
.pv-subs .pv-kicker {align-self:end}

/* 06 Variations — one shoot, three cuts */
.pv-var {grid-template-rows:minmax(0,1fr) auto; gap:14px; align-content:center}
.variants {display:grid; grid-template-columns:repeat(3,1fr); gap:10px; min-height:0}
.variants li {display:grid; grid-template-rows:minmax(0,1fr) auto; grid-template-columns:auto minmax(0,1fr); gap:8px 7px; min-height:0}
.variants .frame {grid-column:1 / -1; height:100%; width:100%; aspect-ratio:auto}
.var-cut {position:absolute; z-index:2; inset-inline:7px; bottom:7px; height:3px; border-radius:2px; background:#ffffff40; overflow:hidden}
.var-cut i {display:block; width:var(--w,50%); height:100%; border-radius:2px; background:var(--orange); transform-origin:left}
[dir="rtl"] .var-cut i {transform-origin:right}
.var-key {display:grid; place-items:center; width:20px; height:20px; border-radius:5px; background:#ffffff1a; color:var(--dark-text); font-size:9px; font-weight:700}
.var-lab {align-self:center; color:var(--dark-muted); font-size:10px; font-weight:600; letter-spacing:.04em}

/* 07 Placements — the same frame, reframed */
.pv-ratio {grid-template-rows:minmax(0,1fr) auto auto; justify-items:center; align-items:center; gap:14px}
/* The box is sized against its own cell, so every ratio fits: wide frames by width, tall ones by height. */
.ratio-stage {container-type:size; width:100%; height:100%; min-height:0; display:grid; place-items:center}
.ratio-box {position:relative; width:min(100cqw, calc(100cqh * 16 / 9)); aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#ffffff14; box-shadow:inset 0 0 0 1px #ffffff2e}
.ratio-box img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 32%}
.ratio-safe {position:absolute; inset:10%; border:1px dashed #f27943cc; border-radius:3px; z-index:1}
.ratios {display:flex; gap:10px; color:var(--dark-muted); font-size:10px; font-weight:700; letter-spacing:.08em}
.ratios li {opacity:.35}
.ratios li:last-child {opacity:1}

/* Service selector */
.service-list {display:flex; flex-direction:column}
.svc-row {position:relative; padding-block:20px 22px; border-top:1px solid var(--line); transition:background-color 240ms var(--ease)}
.svc-row:last-child {border-bottom:1px solid var(--line)}
.svc-row::before {content:""; position:absolute; inset-block:-1px auto; inset-inline-start:0; width:2px; height:0; background:var(--accent); transition:height 260ms var(--ease)}
.svc-row.is-active {background:#ece5db8c}
.svc-row.is-active::before {height:calc(100% + 2px)}
.svc-tab {display:grid; grid-template-columns:34px minmax(0,1fr) 26px; align-items:center; gap:16px; width:100%; padding-inline:clamp(10px,1.4vw,18px); text-align:start; cursor:pointer}
.svc-tab::after {content:""; position:absolute; inset:0}
.svc-tab:focus-visible {outline:none}
.svc-tab:focus-visible::after {outline:3px solid var(--accent); outline-offset:-3px; border-radius:6px}
.svc-num {color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.06em; font-variant-numeric:tabular-nums; transition:color 220ms var(--ease)}
.svc-title {font-size:clamp(18px,1.5vw,21px); font-weight:700; line-height:1.3; letter-spacing:-.025em; transition:transform 260ms var(--ease)}
.svc-icon {color:var(--muted); transition:color 220ms var(--ease),transform 280ms var(--ease)}
.svc-icon svg {width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round}
.svc-desc {margin-block-start:8px; padding-inline:clamp(10px,1.4vw,18px); padding-inline-start:calc(clamp(10px,1.4vw,18px) + 50px); color:var(--muted); font-size:12px; line-height:1.7; max-width:46ch}
.svc-row:hover .svc-title,.svc-tab:focus-visible .svc-title {transform:translateX(4px)}
[dir="rtl"] .svc-row:hover .svc-title,[dir="rtl"] .svc-tab:focus-visible .svc-title {transform:translateX(-4px)}
.svc-row:hover .svc-icon,.svc-tab:focus-visible .svc-icon {color:var(--accent); transform:translateY(-2px) rotate(-6deg)}
.svc-row:hover .svc-num {color:var(--ink)}
.svc-row.is-active .svc-num {color:var(--accent)}
.svc-row.is-active .svc-icon {color:var(--accent)}

.terms {margin-block-start:26px; color:var(--muted); font-size:10px}
.terms li {padding-block:5px; display:flex; gap:10px}
.terms li::before {content:"↗"; color:var(--accent)}


/* Services motion — each preview plays once on selection, then holds its final frame.
   Gated on .is-playing so nothing animates off screen. */
.stage.is-playing .svc-panel.is-active .meter-bar i {animation:pv-fill 3s linear both}
.stage.is-playing .svc-panel.is-active .frame-cap {animation:pv-rise 420ms 180ms var(--ease) both}
.stage.is-playing .svc-panel.is-active .frame img {animation:pv-push 3.4s var(--ease) both}
@keyframes pv-fill {from {transform:scaleX(0)} to {transform:scaleX(1)}}
@keyframes pv-rise {from {opacity:0; transform:translateY(8px)} to {opacity:1; transform:none}}
@keyframes pv-push {from {transform:scale(1.07)} to {transform:scale(1)}}

.stage.is-playing .svc-panel.is-active .shot-b {animation:pv-cut 2.6s steps(1,end) both}
.stage.is-playing .svc-panel.is-active .cut-flash {animation:pv-flash 2.6s linear both}
.stage.is-playing .svc-panel.is-active .guides {animation:pv-fade 500ms 120ms var(--ease) both}
.stage.is-playing .svc-panel.is-active .cap {animation:pv-cap 420ms var(--ease) both}
.stage.is-playing .svc-panel.is-active .cap:nth-child(1) {animation-delay:260ms}
.stage.is-playing .svc-panel.is-active .cap:nth-child(2) {animation-delay:900ms}
.stage.is-playing .svc-panel.is-active .cap:nth-child(3) {animation-delay:1540ms}
@keyframes pv-cut {0%,54% {opacity:0} 55%,100% {opacity:1}}
@keyframes pv-flash {0%,52% {opacity:0} 55% {opacity:.5} 60%,100% {opacity:0}}
@keyframes pv-fade {from {opacity:0} to {opacity:1}}
@keyframes pv-cap {from {opacity:.15; transform:translateY(6px)} to {opacity:1; transform:none}}

.stage.is-playing .svc-panel.is-active .steps-head {animation:pv-head 2.6s var(--ease) both}
.stage.is-playing .svc-panel.is-active .seg {animation:pv-seg 380ms var(--ease) both}
.stage.is-playing .svc-panel.is-active .seg-1 {animation-delay:120ms}
.stage.is-playing .svc-panel.is-active .seg-2 {animation-delay:900ms}
.stage.is-playing .svc-panel.is-active .seg-3 {animation-delay:2100ms}
@keyframes pv-head {from {height:0} to {height:100%}}
@keyframes pv-seg {from {opacity:.2; transform:translateY(6px)} to {opacity:1; transform:none}}

.stage.is-playing .svc-panel.is-active .mosaic i {animation:pv-assemble 620ms var(--ease) both}
.stage.is-playing .svc-panel.is-active .mosaic i:nth-child(1) {animation-delay:60ms; --tx:-18px; --ty:-14px; --rot:-4deg}
.stage.is-playing .svc-panel.is-active .mosaic i:nth-child(2) {animation-delay:150ms; --tx:14px; --ty:18px; --rot:3deg}
.stage.is-playing .svc-panel.is-active .mosaic i:nth-child(3) {animation-delay:240ms; --tx:20px; --ty:-16px; --rot:5deg}
.stage.is-playing .svc-panel.is-active .mosaic i:nth-child(4) {animation-delay:330ms; --tx:-16px; --ty:16px; --rot:4deg}
.stage.is-playing .svc-panel.is-active .mosaic i:nth-child(5) {animation-delay:420ms; --tx:-12px; --ty:20px; --rot:-5deg}
.stage.is-playing .svc-panel.is-active .mosaic i:nth-child(6) {animation-delay:510ms; --tx:18px; --ty:14px; --rot:-3deg}
@keyframes pv-assemble {from {opacity:0; transform:translate(var(--tx,0),var(--ty,0)) rotate(var(--rot,0)) scale(.92)} to {opacity:1; transform:none}}

.stage.is-playing .svc-panel.is-active .sub-line span {animation:pv-sub 5.6s var(--ease) both}
.stage.is-playing .svc-panel.is-active .sub-line span:nth-child(1) {animation-delay:0ms}
.stage.is-playing .svc-panel.is-active .sub-line span:nth-child(2) {animation-delay:1.2s}
.stage.is-playing .svc-panel.is-active .sub-line span:nth-child(3) {animation-delay:2.4s}
.stage.is-playing .svc-panel.is-active .sub-line span:nth-child(4) {animation:pv-sub-last 1.1s 3.6s var(--ease) both}
@keyframes pv-sub {0% {opacity:0} 4%,18% {opacity:1} 24%,100% {opacity:0}}
@keyframes pv-sub-last {from {opacity:0; transform:translateY(5px)} to {opacity:1; transform:none}}

.stage.is-playing .svc-panel.is-active .seg-bar i {animation:pv-fill 620ms var(--ease) both}
.stage.is-playing .svc-panel.is-active .seg-1 .seg-bar i {animation-delay:240ms}
.stage.is-playing .svc-panel.is-active .seg-2 .seg-bar i {animation-delay:1s}
.stage.is-playing .svc-panel.is-active .seg-3 .seg-bar i {animation-delay:1.8s}
.stage.is-playing .svc-panel.is-active .var-cut i {animation:pv-fill 700ms var(--ease) both}
.stage.is-playing .svc-panel.is-active .variants li {animation:pv-cap 480ms var(--ease) both}
.stage.is-playing .svc-panel.is-active .variants li:nth-child(2) {animation-delay:90ms}
.stage.is-playing .svc-panel.is-active .variants li:nth-child(3) {animation-delay:180ms}
.stage.is-playing .svc-panel.is-active .variants li:nth-child(1) .var-cut i {animation-delay:320ms}
.stage.is-playing .svc-panel.is-active .variants li:nth-child(2) .var-cut i {animation-delay:440ms}
.stage.is-playing .svc-panel.is-active .variants li:nth-child(3) .var-cut i {animation-delay:560ms}

.stage.is-playing .svc-panel.is-active .ratio-box {animation:pv-reframe 3.4s var(--ease) both}
.stage.is-playing .svc-panel.is-active .ratios li {animation:pv-ratio 3.4s linear both}
.stage.is-playing .svc-panel.is-active .ratios li:nth-child(1) {--from:0%; --to:24%}
.stage.is-playing .svc-panel.is-active .ratios li:nth-child(2) {--from:25%; --to:49%}
.stage.is-playing .svc-panel.is-active .ratios li:nth-child(3) {--from:50%; --to:74%}
.stage.is-playing .svc-panel.is-active .ratios li:nth-child(4) {--from:75%; --to:100%}
@keyframes pv-reframe {
  0%,22% {aspect-ratio:9/16; width:min(100cqw, calc(100cqh * 9 / 16))}
  25%,47% {aspect-ratio:4/5; width:min(100cqw, calc(100cqh * 4 / 5))}
  50%,72% {aspect-ratio:1/1; width:min(100cqw, 100cqh)}
  75%,100% {aspect-ratio:16/9; width:min(100cqw, calc(100cqh * 16 / 9))}
}
@keyframes pv-ratio {0% {opacity:.35} 100% {opacity:.35}}
.stage.is-playing .svc-panel.is-active .ratios li:nth-child(1) {animation-name:pv-r1}
.stage.is-playing .svc-panel.is-active .ratios li:nth-child(2) {animation-name:pv-r2}
.stage.is-playing .svc-panel.is-active .ratios li:nth-child(3) {animation-name:pv-r3}
.stage.is-playing .svc-panel.is-active .ratios li:nth-child(4) {animation-name:pv-r4}
@keyframes pv-r1 {0%,22% {opacity:1} 25%,100% {opacity:.35}}
@keyframes pv-r2 {0%,22% {opacity:.35} 25%,47% {opacity:1} 50%,100% {opacity:.35}}
@keyframes pv-r3 {0%,47% {opacity:.35} 50%,72% {opacity:1} 75%,100% {opacity:.35}}
@keyframes pv-r4 {0%,72% {opacity:.35} 75%,100% {opacity:1}}

/* About — portrait as the focal point, copy on an asymmetric grid beside it. */
.about-grid {display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(44px,7vw,110px); align-items:center}

.portrait {position:relative; max-width:440px; margin:0}
/* Fine orange rule offset behind the frame: the section's signature. */
.portrait::before {content:""; position:absolute; z-index:-1; inset-block:26px -14px; inset-inline-start:-14px; width:1px; background:var(--accent); opacity:.55}
.portrait::after {content:""; position:absolute; z-index:-1; inset-inline:-14px 40%; bottom:-14px; height:1px; background:var(--accent); opacity:.55}
.portrait-frame {position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:8px; background:#262622}
.portrait-frame img {width:100%; height:100%; object-fit:cover; object-position:55% 42%}
.portrait figcaption {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:16px; margin-block-start:16px; padding-block-start:14px; border-top:1px solid var(--line)}
.portrait-name {font-size:12px; font-weight:700; letter-spacing:-.01em}
.portrait-place {color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase}

.about-copy > .eyebrow {margin-block-end:22px}
.about-copy h2 {font-size:clamp(2.6rem,5vw,4.4rem); line-height:1.02; letter-spacing:-.06em}
.about-lead {margin-block:26px 22px; max-width:24ch; font-size:clamp(20px,2.2vw,27px); font-weight:500; line-height:1.45; letter-spacing:-.035em; text-wrap:balance}
.lead-em {position:relative; white-space:nowrap}
.lead-em::after {content:""; position:absolute; inset-inline:0; bottom:-.12em; height:2px; background:var(--accent); transform:scaleX(1); transform-origin:left}
[dir="rtl"] .lead-em::after {transform-origin:right}
.about-body {max-width:56ch; color:var(--muted); font-size:14px; line-height:1.95}

/* Figures from the biography, set as type rather than cards. */
.proof-strip {display:flex; flex-wrap:wrap; margin-block-start:36px}
.proof-strip > div {padding-inline:clamp(18px,2.2vw,30px); border-inline-start:1px solid var(--line)}
.proof-strip > div:first-child {padding-inline-start:0; border-inline-start:0}
.proof-strip dd {margin:0; font-size:clamp(30px,3.4vw,44px); font-weight:500; line-height:1.1; letter-spacing:-.06em; font-variant-numeric:tabular-nums}
.proof-strip dt {margin-block-start:6px; color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase}

.facts {margin-block-start:38px; border-top:1px solid transparent}
.facts > li {position:relative; display:grid; grid-template-columns:96px minmax(0,1fr); gap:22px; padding-block:15px; font-size:12px}
.facts > li::before {content:""; position:absolute; inset-inline:0; top:0; height:1px; background:var(--line); transform:scaleX(1); transform-origin:left}
[dir="rtl"] .facts > li::before {transform-origin:right}
.fact-k {color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding-block-start:2px}
.fact-v {line-height:1.6}

.about-talk {display:inline-flex; align-items:center; gap:12px; margin-block-start:30px; padding-block:6px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent)}
.about-talk .arrow {font-size:16px; transition:transform 260ms var(--ease)}
.about-talk:hover .arrow,.about-talk:focus-visible .arrow {transform:translate(3px,-3px)}
[dir="rtl"] .about-talk .arrow {transform:scaleX(-1)}
[dir="rtl"] .about-talk:hover .arrow {transform:scaleX(-1) translate(3px,-3px)}

/* Entrance — portrait wipes up under a scaling image; rules and the underline draw in.
   Everything is visible by default, so content still shows if the observer never runs. */
.can-reveal .portrait {opacity:1; transform:none}
.can-reveal .portrait .portrait-frame {transition:clip-path 820ms var(--ease)}
.can-reveal .portrait .portrait-frame img {transition:transform 1100ms var(--ease)}
.can-reveal .portrait:not(.is-visible) .portrait-frame {clip-path:inset(100% 0 0 0)}
.can-reveal .portrait:not(.is-visible) .portrait-frame img {transform:scale(1.04)}
.can-reveal .portrait figcaption {transition:opacity 620ms 260ms var(--ease)}
.can-reveal .portrait:not(.is-visible) figcaption {opacity:0}
.can-reveal .about-lead .lead-em::after {transition:transform 620ms 340ms var(--ease)}
.can-reveal .about-lead:not(.is-visible) .lead-em::after {transform:scaleX(0)}
.can-reveal .facts > li::before {transition:transform 640ms var(--ease)}
.can-reveal .facts > li:nth-child(2)::before {transition-delay:90ms}
.can-reveal .facts > li:nth-child(3)::before {transition-delay:180ms}
.can-reveal .facts:not(.is-visible) > li::before {transform:scaleX(0)}

/* Closing invitation */
.contact {background:var(--dark); color:var(--dark-text); padding-block:84px 56px}
.contact-card {text-align:center}
.eyebrow-center {justify-content:center; color:var(--orange)}
.contact h2 {font-size:clamp(2.7rem,5.2vw,5rem)}
.contact h2 > * {display:block}
.contact .accent {color:var(--orange)}
.contact-intro {max-width:44ch; margin:25px auto 30px; color:var(--dark-muted); font-size:13px; line-height:1.9}
.contact :focus-visible {outline-color:var(--orange)}
.contact-or {font-size:10px; color:var(--dark-muted); margin-block:38px 18px}
.contact-links {display:flex; gap:48px; justify-content:center}
.contact-link {display:flex; gap:12px; align-items:baseline; padding-block:10px; font-size:12px}
.contact-link:hover bdi {text-decoration:underline; text-underline-offset:4px}
.cl-k {color:var(--dark-muted); font-size:10px}
.site-footer {background:var(--dark); color:var(--dark-muted); padding-block:25px; border-top:1px solid var(--dark-line)}
.footer-inner {display:flex; gap:15px; align-items:center; font-size:9px}
.footer-inner > :last-child {margin-inline-start:auto}
.brand-mark--sm {width:30px; height:30px; font-size:15px; background:var(--dark-text); color:var(--dark)}
.brand-mark--sm::after {width:4px; height:4px; transform:translate(8px,7px)}

/* Native video dialog */
.video-dialog {padding:0; border:1px solid var(--dark-line); border-radius:12px; width:min(660px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; background:var(--dark); color:var(--dark-text)}
.video-dialog::backdrop {background:#121410dc}
.video-dialog :focus-visible {outline-color:var(--orange)}
.player-header {padding:18px 22px; display:flex; gap:20px; justify-content:space-between; align-items:center}
.player-header h2 {font-size:18px; line-height:1.4; letter-spacing:-.02em}
.player-header p {color:var(--dark-muted); font-size:10px; margin-block-start:3px}
.close-player {display:flex; align-items:center; gap:12px; padding:8px 10px; min-height:44px; font-size:11px; border:1px solid var(--dark-line); border-radius:5px; white-space:nowrap}
.close-player > :last-child {font-size:23px; line-height:1}
.close-player:hover {background:var(--dark-surface)}
.player-stage {background:#11120f; display:flex; justify-content:center}
.player-stage video {width:100%; max-height:calc(100dvh - 215px); min-height:200px; object-fit:contain}
.player-footer {padding:15px 22px; display:flex; justify-content:space-between; gap:20px; font-size:10px; color:var(--dark-muted)}
.player-footer a {color:var(--dark-text); text-decoration:underline; text-underline-offset:4px; padding-block:6px}
.player-notice {color:var(--dark-text); font-size:12px; padding:14px 22px}

/* Motion enhancement: the default page remains visible without JavaScript. */
@media (prefers-reduced-motion:no-preference) {
  html {scroll-behavior:smooth}
  .hero-copy > * {animation:entrance 700ms var(--ease) backwards}
  .hero-copy > :nth-child(2) {animation-delay:60ms}
  .hero-copy > :nth-child(3) {animation-delay:120ms}
  .hero-copy > :nth-child(4) {animation-delay:180ms}
  .hero-copy > :nth-child(5) {animation-delay:240ms}
  .hero-clip {animation:entrance 850ms var(--ease) backwards}
  .hero-clip--a {animation-delay:150ms}
  .hero-clip--main {animation-delay:240ms}
  .hero-clip--b {animation-delay:330ms}
  .can-reveal :is(.reveal,[data-reveal]) {opacity:0; transform:translateY(20px); transition:opacity var(--motion) var(--ease),transform var(--motion) var(--ease); transition-delay:var(--reveal-delay,0ms)}
  .can-reveal :is(.reveal,[data-reveal]).is-visible {opacity:1; transform:none}
  .can-reveal .vsl.is-visible .vsl-playhead,
  html:not(.can-reveal) .vsl-playhead {animation:vsl-sweep 3.4s var(--ease) 500ms both}
  .video-dialog[open] {animation:dialog-in 220ms var(--ease)}
  .video-dialog[open]::backdrop {animation:backdrop-in 220ms ease}
}
@keyframes vsl-sweep {0% {inset-inline-start:0; opacity:0} 12% {opacity:1} 88% {opacity:1} 100% {inset-inline-start:100%; opacity:0}}
@keyframes entrance {from {opacity:.1; transform:translateY(18px)} to {opacity:1; transform:none}}
@keyframes dialog-in {from {opacity:0; transform:translateY(12px) scale(.985)} to {opacity:1; transform:none}}
@keyframes backdrop-in {from {opacity:0} to {opacity:1}}
@media (hover:hover) and (pointer:fine) {
  .hero-clip:hover {transform:translateY(-5px); box-shadow:0 24px 35px -20px #211e1a66}
  .hero-clip:hover img,.video-card:hover .media-wrap > img {transform:scale(1.035)}
  .hero-clip:hover .clip-play,.video-card:hover .play-btn {background:#fff; transform:translate(-50%,-50%) scale(1.08)}
  .vsl-seg:hover .vsl-bar {transform:scaleY(1.5)}
  .vsl-seg:hover .vsl-note {color:var(--ink)}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important; transition:none!important; scroll-behavior:auto!important}
  /* No auto-scroll: the strip becomes a swipeable row instead. */
  .marquee {overflow-x:auto; -webkit-mask-image:none; mask-image:none}
  .marquee-inner {width:auto}
  .logo-row[aria-hidden="true"] {display:none}
  .hero-clip:hover,.hero-clip:hover img,.video-card:hover .media-wrap > img {transform:none}
  .can-reveal :is(.reveal,[data-reveal]) {opacity:1; transform:none}
}

/* Arabic typography */
html[lang="ar"] body {font-family:var(--arabic)}
[dir="rtl"] :is(h1,h2,h3,.eyebrow,.pill,.visual-heading,.vsl-head,.vsl-name,.logos-title,.hero-proof dd) {letter-spacing:0}
[dir="rtl"] :is(.vsl-name,.vsl-note) {direction:rtl; text-align:right}
[dir="rtl"] .hero-title {font-size:clamp(2.9rem,4.8vw,4.5rem); line-height:1.3}
[dir="rtl"] h2 {line-height:1.4}
[dir="rtl"] .hero-lead {font-size:15px}
[dir="rtl"] .text-link::after {transform-origin:right}
[dir="rtl"] .hero-proof dt {font-size:15.5px}
[dir="rtl"] .section-intro {font-size:15px}
[dir="rtl"] .tag-ai {max-width:100%; font-size:9px}
[dir="rtl"] .quote-card blockquote {font-family:var(--sans); letter-spacing:-.02em}
[dir="rtl"] .card-caption p {font-size:11px}
[dir="rtl"] .btn {font-size:14px}

/* Responsive composition */
@media (min-width:1500px) {
  .hero-title {font-size:76px}
}
@media (max-width:1100px) {
  .header-inner {gap:24px}
  .status-chip--header {padding:6px 10px; font-size:10px}
  .main-nav {gap:22px}
  .hero-grid {gap:30px}
  .hero-title {font-size:clamp(2.8rem,5.2vw,3.6rem)}
  .hero-actions {gap:10px}
  .hero-actions .btn {padding-inline:15px; font-size:11px; gap:12px}
  .work-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
  .svc-tab {gap:12px}
}
@media (max-width:850px) {
  :root {--header-h:76px}
  .brand-role {display:none}
  .main-nav {gap:20px}
  .nav-contact {display:none}
  .hero-grid {grid-template-columns:1fr 1fr; gap:25px}
  .hero-title {font-size:clamp(2.25rem,5vw,3rem)}
  .hero-lead {font-size:14px}
  .hero-actions {flex-direction:column; align-items:start}
  .hero-actions .btn {min-height:44px}
  .hero-actions .btn-ghost {border-color:transparent; padding-inline-start:0}
  .hero-proof > div {padding-inline:24px}
  .visual-heading {font-size:8px}
  .hero-stack {grid-template-columns:.7fr 1.5fr .7fr; gap:7px}
  .hero-clip--side .clip-label {display:none}
  .hero-clip--side .clip-play {width:27px; height:27px}
  .visual-note {font-size:8px}
  .vsl {margin-block-start:20px}
  .vsl-head {font-size:8px}
  .vsl-seg {min-inline-size:52px}
  .vsl-note {font-size:8px}
  .logos {--logo-gap:36px; --logo-speed:24s}
  .logo-word {font-size:15px}
  .logos {padding-block-start:42px}
  .section-head {gap:35px}
  .section-intro {font-size:13px}
  .work-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .work-total {display:none}
  .frame-body {gap:22px}
  .services-grid {gap:34px; grid-template-columns:.95fr 1.1fr}
  .svc-title {font-size:18px}
  .stage-body {min-height:260px}
  .about-grid {gap:40px}
  .about-body {font-size:13px}
  .facts > li {grid-template-columns:78px minmax(0,1fr); gap:16px}
  .proof-strip > div {padding-inline:18px}
  [dir="rtl"] .hero-title {font-size:clamp(2.2rem,4.7vw,3rem)}
  [dir="rtl"] .hero-actions .btn {font-size:12px}
}
@media (max-width:620px) {
  :root {--gutter:22px; --header-h:72px}
  .header-inner {flex-wrap:wrap; gap:0 12px}
  .brand {gap:8px}
  .brand-name {font-size:11px}
  .brand-mark {width:34px; height:34px; font-size:17px}
  .main-nav {gap:16px; font-size:10px}
  .main-nav a:nth-child(2),.main-nav a:nth-child(3) {display:none}
  .language-toggle {padding-inline-start:10px}
  .language-toggle button {width:26px}
  .status-chip--header {display:none}
  .status-chip--hero {display:inline-flex; margin-block-start:14px; padding:6px 11px; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:10.5px}
  .hero {padding-block-start:28px}
  .hero-grid {grid-template-columns:1fr; gap:40px}
  .pill {font-size:9px}
  .hero-title {font-size:clamp(2.7rem,10.6vw,4.5rem); line-height:1.08; margin-block:20px}
  .hero-lead {font-size:14px; max-width:41ch}
  .hero-actions {flex-direction:row; align-items:center; gap:10px; margin-block-start:24px}
  .hero-actions .btn {font-size:12px; padding:13px 14px}
  .hero-actions .btn-ghost {padding-inline:10px}
  /* Phone: three full-width rows, label beside the number. */
  .hero-proof {grid-template-columns:minmax(0,1fr); margin-block-start:34px; padding-block:26px 8px}
  .hero-proof > div {display:grid; grid-template-columns:auto minmax(0,1fr); align-items:baseline; gap:14px;
    padding-inline:0; padding-block:18px; border-inline-start:0; border-top:1px solid var(--line)}
  .hero-proof > div:first-child {border-top:0}
  .hero-proof dd {font-size:clamp(40px,12vw,48px)}
  .hero-proof dt {margin-block-start:0; font-size:14px}
  .hero-visual {width:min(100%,460px); margin-inline:auto}
  .hero-stack {grid-template-columns:1fr 1.4fr 1fr; gap:9px}
  .visual-heading {font-size:9px; margin-block-end:17px}
  .hero-clip--a {margin-block-start:22px}
  .hero-clip--b {margin-block-end:22px}
  .hero-clip--side .clip-label {display:flex; inset-inline:7px}
  .clip-time {display:none}
  .clip-brand {font-size:8px}
  .clip-play--lg {width:44px; height:44px}
  .visual-note {margin-block-start:18px; font-size:9px}
  .vsl {margin-block-start:22px}
  .vsl-head {font-size:9px; margin-block-end:12px}
  .vsl-track {direction:inherit}
  .vsl-segs {flex-direction:column; gap:0}
  .vsl-seg {flex:none; min-inline-size:0; grid-template-columns:auto 4px 1fr; grid-template-areas:"cue bar name" ". bar note"; gap:2px 11px; padding-block-end:13px}
  .vsl-seg:last-child {padding-block-end:0}
  .vsl-cue {grid-area:cue; font-size:9px; padding-block-start:1px}
  .vsl-cue::before {display:none}
  .vsl-bar {grid-area:bar; height:auto; width:4px; border-radius:2px}
  .vsl-name {grid-area:name; font-size:10px}
  .vsl-note {grid-area:note; font-size:10px}
  .vsl-playhead {display:none}
  .logos {padding-block:40px; --logo-gap:26px; --logo-speed:18s}
  .logo-row li {height:46px}
  .logo-row img {max-height:calc(24px * var(--h,1))}
  .logo-word {font-size:13px}
  h2 {font-size:clamp(2.15rem,8vw,3rem)}
  .section-head {grid-template-columns:1fr; gap:20px; margin-block-end:30px}
  .section-head > .section-intro {justify-self:start; max-width:38ch}
  .eyebrow {margin-block-end:18px; font-size:10px}
  .work {padding-block:58px 35px}
  .work-toolbar {padding-block:12px; margin-block-end:24px}
  .filters {gap:3px}
  .filters button {font-size:10px; padding-inline:10px; gap:7px}
  .work-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px}
  .media-top {inset:7px 7px auto; gap:3px}
  .tag,.duration {font-size:10px; padding:3px 5px}
  .card-caption {padding-inline-end:18px}
  .card-caption h3 {font-size:12px}
  .card-caption p {font-size:11px}
  .play-btn {width:36px; height:36px}
  .work-note {font-size:9px; padding-block-start:22px}
  .stats-band {padding-block:44px}
  .edit-frame {min-height:0; padding:64px 20px 24px}
  .band-media {object-position:62% 45%}
  .frame-chrome {gap:10px; font-size:9px; letter-spacing:.1em}
  .chrome-label {display:none}
  .band-caption {font-size:10.5px; align-items:flex-start}
  .band-dot {margin-block-start:6px}
  .testimonial-grid {grid-template-columns:1fr; gap:15px}
  .quote-card {padding:24px}
  .quote-card blockquote {font-size:21px}
  .quote-cta {min-height:330px}
  .cta-title {font-size:34px}
  /* Phone: headline, then the preview, then the controls right under it. */
  .services-grid {grid-template-columns:1fr; gap:0}
  .services-intro {position:static; display:contents}
  .services-intro .eyebrow,.services-intro h2,.services-intro .section-intro {grid-column:1}
  .stage {margin-block:26px 28px; order:1}
  .stage-body {aspect-ratio:4/5; min-height:0; max-height:none}
  .service-list {order:2}
  .terms {order:3; margin-block-start:26px; font-size:11px}
  .svc-row {padding-block:18px 20px}
  .svc-tab {grid-template-columns:28px minmax(0,1fr) 22px; gap:12px; min-height:44px; padding-inline:8px}
  .svc-title {font-size:18px}
  .svc-desc {padding-inline:8px; padding-inline-start:48px; font-size:12px}
  .svc-icon svg {width:19px; height:19px}
  .about-grid {grid-template-columns:1fr; gap:38px}
  .portrait {width:100%; max-width:none}
  .portrait-frame {aspect-ratio:5/6}
  .portrait::before {inset-block:20px -10px; inset-inline-start:-10px}
  .portrait::after {inset-inline:-10px 55%; bottom:-10px}
  .about-copy h2 {font-size:clamp(2.4rem,11vw,3.2rem)}
  .about-lead {max-width:none; margin-block:20px 18px; font-size:21px}
  .about-body {font-size:13.5px; line-height:1.85}
  .proof-strip {margin-block-start:30px}
  .proof-strip > div {padding-inline:16px}
  .proof-strip dd {font-size:30px}
  .facts {margin-block-start:30px}
  .facts > li {grid-template-columns:84px minmax(0,1fr); gap:14px; padding-block:13px}
  .about-talk {margin-block-start:24px; min-height:44px}
  .contact {padding-block:65px 35px}
  .contact h2 {font-size:clamp(2.15rem,8vw,3rem)}
  .contact-intro {font-size:12px}
  .contact-links {flex-direction:column; align-items:center; gap:4px}
  .contact-or {margin-block-start:30px}
  .footer-inner {gap:10px; align-items:start}
  .footer-inner > :nth-child(2) {max-width:25ch; font-size:8px; line-height:1.8}
  .brand-mark--sm {width:26px; height:26px; font-size:13px}
  .player-header {padding:14px; gap:12px}
  .player-header p {font-size:9px}
  .player-footer {padding:10px 14px; font-size:9px}
  [dir="rtl"] .hero-title {font-size:clamp(2.65rem,10.3vw,4rem)}
  [dir="rtl"] .hero-actions {gap:5px}
  [dir="rtl"] .hero-actions .btn {font-size:11px; gap:10px}
  [dir="rtl"] .tag-ai {font-size:9px}
  [dir="rtl"] .contact h2 {font-size:2rem}
}
@media (max-width:360px) {
  :root {--gutter:16px}
  .main-nav {display:none}
  .hero-actions {gap:6px}
  .hero-actions .btn {padding-inline:11px}
}

/* French headline phrases run longer: size them so each still holds one line. */
html[lang="fr"] .hero-title {font-size:clamp(2.4rem,4.4vw,4.3rem)}
@media (max-width:620px) {
  html[lang="fr"] .hero-title {font-size:clamp(1.9rem,8.4vw,3.4rem)}
}