/* Let's: landing page styles
   One continuous colour field that changes tone section by section, like the deck. */

:root {
  --coral: #DB4B50;
  --oxblood: #4F1606;
  --bone: #DFDDCE;
  --cocoa: #775547;
  --mustard: #D1B561;
  --lilac: #E2C9FB;
  --white: #FFFDFA;
  --night: #1C0702;

  --f-display: "Tinos", "Times New Roman", Times, serif;
  --f-body: "Barlow", "DIN Next", "Helvetica Neue", Arial, sans-serif;
  --f-hand: "Shantell Sans", "Comic Sans MS", cursive;
  --f-key: "Barlow", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --nav-h: 4.5rem;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --tone-speed: .7s;
  --dir: 1;
}

:root[dir="rtl"] { --dir: -1; }

:root[lang="ar"] {
  --f-display: "Amiri", "Times New Roman", serif;
  --f-body: "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --f-hand: "Marhey", "Geeza Pro", sans-serif;
  --f-key: "IBM Plex Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
}

/* ---------- Tones ----------
   With JS: the tone lives on <html> and the whole page shares it.
   Without JS: every section carries its own tone. */
:root,
html.js[data-tone="coral"],
html:not(.js) [data-tone="coral"] {
  --bg: var(--coral); --fg: var(--white); --accent: var(--oxblood); --mark: var(--oxblood);
  --btn-bg: var(--oxblood); --btn-fg: var(--white);
}
html.js[data-tone="oxblood"],
html:not(.js) [data-tone="oxblood"] {
  --bg: var(--oxblood); --fg: var(--white); --accent: var(--coral); --mark: var(--coral);
  --btn-bg: var(--bone); --btn-fg: var(--oxblood);
}
html.js[data-tone="bone"],
html:not(.js) [data-tone="bone"] {
  --bg: var(--bone); --fg: var(--oxblood); --accent: var(--coral); --mark: var(--coral);
  --btn-bg: var(--oxblood); --btn-fg: var(--white);
}
html.js[data-tone="cocoa"],
html:not(.js) [data-tone="cocoa"] {
  --bg: var(--cocoa); --fg: var(--white); --accent: var(--bone); --mark: var(--bone);
  --btn-bg: var(--bone); --btn-fg: var(--oxblood);
}
html.js[data-tone="lilac"],
html:not(.js) [data-tone="lilac"] {
  --bg: var(--lilac); --fg: var(--oxblood); --accent: var(--coral); --mark: var(--coral);
  --btn-bg: var(--oxblood); --btn-fg: var(--white);
}
html.js[data-tone="mustard"],
html:not(.js) [data-tone="mustard"] {
  --bg: var(--mustard); --fg: var(--oxblood); --accent: var(--white); --mark: var(--oxblood);
  --btn-bg: var(--oxblood); --btn-fg: var(--white);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-body);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color var(--tone-speed) var(--ease), color var(--tone-speed) var(--ease);
}

html:not(.js) .section { background: var(--bg); color: var(--fg); }

a { color: inherit; }
img, svg { display: block; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

::selection { background: var(--fg); color: var(--bg); }

:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; inset-block-start: .75rem; inset-inline-start: .75rem; z-index: 30;
  padding: .6em 1em; background: var(--fg); color: var(--bg); font-weight: 700;
  transform: translateY(-200%); transition: transform .2s;
}
.skip:focus { transform: none; }

.mark { fill: currentColor; color: var(--mark); transition: color var(--tone-speed) var(--ease); }

.wrap { width: 100%; max-width: 1400px; margin-inline: auto; }

.section {
  position: relative;
  min-height: 86svh;
  display: grid;
  align-content: center;
  padding: clamp(5.5rem, 13vh, 9rem) var(--gutter);
}

/* ---------- Type ---------- */
.statement {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.1rem, 1.25rem + 3.3vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  max-width: 21ch;
  padding-block-end: .1em;
  text-wrap: pretty;
}
.statement--long { font-size: clamp(1.9rem, 1.15rem + 2.6vw, 3.7rem); max-width: 27ch; }

:root[lang="ar"] .statement {
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0;
  font-size: clamp(2rem, 1.3rem + 2.9vw, 4.1rem);
}
:root[lang="ar"] .statement--long { font-size: clamp(1.8rem, 1.2rem + 2.3vw, 3.4rem); }

.ast {
  display: inline-block;
  font-family: "Tinos", "Times New Roman", serif;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
  transition: color var(--tone-speed) var(--ease);
}
.statement .ast, .manifesto__text .ast, .brief__l .ast {
  font-size: .85em;
  vertical-align: .2em;
  line-height: 0;
  margin-inline-start: .03em;
}

.note {
  font-weight: 500;
  font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem);
  line-height: 1.45;
  max-width: 46ch;
  margin-block-start: clamp(1.5rem, 4vh, 2.5rem);
}
.note .ast { margin-inline-end: .35em; font-size: 1.15em; }
/* white on coral only passes AA as bold text */
.hero .note, .manifesto .note, .close .note { font-weight: 700; }

.hand {
  font-family: var(--f-hand);
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 1.7vw, 2.6rem);
  line-height: 1.02;
  font-variation-settings: "INFM" 100, "BNCE" 30;
  display: inline-block;
  rotate: -6deg;
}
:root[lang="ar"] .hand { font-weight: 700; line-height: 1.5; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .72em 1.25em .78em;
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 1.1875rem; /* 19px bold: AA "large text" on every tone */
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .15s;
}
.btn:hover { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn__arrow { transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(calc(.25em * var(--dir))); }
:root[dir="rtl"] .btn__arrow { scale: -1 1; }

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  height: var(--nav-h);
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  color: var(--fg);
  transition: background-color var(--tone-speed) var(--ease), color var(--tone-speed) var(--ease);
}
.nav__logo { display: block; width: 6.2rem; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.nav__logo .mark { width: 100%; height: auto; color: var(--fg); }
html.js .nav:not(.is-scrolled) .nav__logo { opacity: 0; transform: translateY(-.4rem); pointer-events: none; }
.nav__right { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.nav__lang {
  font-weight: 600;
  font-size: 1.1875rem;
  text-decoration: none;
  padding: .3em .1em;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 2px;
  transition: background-size .35s var(--ease);
}
.nav__lang:hover { background-size: 100% 2px; }
.nav__lang:lang(ar) { font-family: "IBM Plex Sans Arabic", "Geeza Pro", sans-serif; }
.nav__lang:lang(en) { font-family: "Barlow", Arial, sans-serif; }
.nav .btn { font-size: 1.1875rem; padding: .55em 1em .6em; }

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  align-content: end;
  padding-block: calc(var(--nav-h) + 2rem) clamp(2rem, 6vh, 4rem);
  overflow: clip;
}
.hero__inner { display: grid; gap: clamp(1rem, 3vh, 2rem); }
:root[dir="rtl"] .hero__hand {
  inset-inline-start: auto;
  inset-inline-end: calc(100% - var(--markw) - 1.5rem);
  inset-block-start: 54%;
  rotate: 6deg;
}
.hero__title { display: grid; gap: clamp(.5rem, 2vh, 1.25rem); font-weight: 700; }
.hero__markwrap { position: relative; }
.hero { --markw: min(84vw, calc(48svh * 2.6586), 1240px); }
.hero__mark {
  width: var(--markw);
  height: auto;
  margin-inline-start: calc(-1 * var(--gutter) - .5vw);
}
:root[dir="rtl"] .hero__mark { margin-inline-start: 0; margin-inline-end: auto; translate: calc(var(--gutter) + .5vw) 0; }
.hero__hand {
  position: absolute;
  inset-block-start: 58%;
  inset-inline-start: calc(var(--markw) * .79);
  color: var(--fg);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  rotate: -8deg;
}
.cycle {
  display: grid;
  overflow: hidden;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.1rem, 1rem + 4.3vw, 5.25rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  padding-block-end: .12em;
}
:root[lang="ar"] .cycle { font-style: normal; line-height: 1.55; letter-spacing: 0; font-size: clamp(2rem, 1rem + 3.9vw, 4.7rem); }
.cycle__item { grid-area: 1 / 1; align-self: end; }
html.js .cycle__item {
  opacity: 0;
  transform: translateY(100%);
  transition: transform .8s var(--ease), opacity .5s var(--ease);
}
html.js .cycle__item.is-on { opacity: 1; transform: none; }
html.js .cycle__item.is-off { opacity: 0; transform: translateY(-100%); }
html:not(.js) .cycle__item:not(.is-on) { display: none; }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block-start: clamp(.75rem, 2vh, 1.5rem);
  border-block-start: 2px solid color-mix(in srgb, var(--fg) 45%, transparent);
}
.hero__sub { font-weight: 700; font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem); margin: 0; }

/* ---------- Who we are ---------- */
.who { align-content: center; gap: clamp(3rem, 9vh, 6rem); padding-inline: 0; }
.who .wrap { padding-inline: var(--gutter); }

.brands {
  overflow: hidden;
  border-block: 2px solid color-mix(in srgb, var(--fg) 25%, transparent);
  padding-block: clamp(1rem, 2.5vh, 1.6rem);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.brands__track { display: flex; width: max-content; }
.brands__set { display: flex; align-items: center; flex-shrink: 0; }
.brands__set li {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-inline-end: clamp(1.25rem, 3vw, 2.5rem);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  line-height: 1.2;
  white-space: nowrap;
}
:root[lang="ar"] .brands__set li { font-style: normal; }
.brands__set li::after { content: "*"; font-family: "Tinos", serif; font-style: normal; color: var(--accent); transition: color var(--tone-speed); }

/* ---------- Arabic-first ---------- */
.first__grid { display: grid; gap: 0; }
.first__lines { max-width: none; display: grid; }
.first__lines .line { display: block; }
.first__lines .lead { color: var(--accent); transition: color var(--tone-speed) var(--ease); }
.first__hand {
  justify-self: end;
  color: var(--accent);
  font-family: "Marhey", "Geeza Pro", sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 5rem);
  line-height: 1.4;
  rotate: -7deg;
  margin-block: -1.5em .25em;
  margin-inline-end: clamp(0rem, 6vw, 8rem);
}
:root[lang="ar"] .first__hand { font-family: var(--f-hand); rotate: 6deg; margin-block: .1em 0; }

/* ---------- Teams ---------- */
.teams__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr);
  align-items: end;
  gap: clamp(2rem, 6vw, 6rem);
}
.teams__grid .statement { grid-column: 2; grid-row: 1; max-width: 24ch; }
.teams__grid .note { grid-column: 1; grid-row: 1; margin: 0; max-width: 24ch; }

/* ---------- Manifesto ---------- */
.manifesto { padding-block: clamp(6rem, 16vh, 11rem); }
.manifesto__text {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.1rem, 1rem + 4vw, 5.1rem);
  line-height: 1.14;
  letter-spacing: -.012em;
  padding-block-end: .1em;
}
:root[lang="ar"] .manifesto__text { font-style: normal; line-height: 1.6; letter-spacing: 0; font-size: clamp(2rem, 1rem + 3.4vw, 4.4rem); }
.manifesto__text .sep { color: var(--accent); font-style: normal; padding-inline: .12em; transition: color var(--tone-speed); }

/* ---------- Goal ---------- */
.goal__grid { display: grid; gap: clamp(2.5rem, 7vh, 4.5rem); }
.goal__grid .statement { max-width: 22ch; }
.goal__hand {
  justify-self: end;
  max-width: 17ch;
  text-align: start;
  font-size: clamp(1.9rem, 1rem + 2.8vw, 3.6rem);
  rotate: -4deg;
  margin-inline-end: clamp(0rem, 4vw, 5rem);
}
.goal__hand .ast { font-family: var(--f-hand); color: var(--accent); margin-inline-end: .15em; }

/* ---------- Services ---------- */
.services { gap: clamp(3rem, 9vh, 6rem); align-content: start; }
.services__intro .statement { max-width: 22ch; }
.svc {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}
.svc__index { display: grid; justify-items: start; }
.svc__tab {
  appearance: none;
  background: none;
  border: 0;
  padding: 0 0 .08em;
  margin: 0;
  cursor: pointer;
  color: var(--fg);
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.2rem, 1.2rem + 3.1vw, 4.4rem);
  line-height: 1.12;
  letter-spacing: -.012em;
  text-align: start;
  display: inline-flex;
  align-items: baseline;
  opacity: .3;
  transition: opacity .35s var(--ease), color var(--tone-speed) var(--ease);
}
:root[lang="ar"] .svc__tab { font-style: normal; line-height: 1.55; letter-spacing: 0; font-size: clamp(2rem, 1.1rem + 2.8vw, 3.9rem); }
.svc__tab:hover { opacity: .65; }
.svc__tab[aria-selected="true"] { opacity: 1; }
.svc__tab .ast {
  width: .6em;
  flex: none;
  font-size: .8em;
  opacity: 0;
  rotate: -120deg;
  transition: opacity .3s var(--ease), rotate .6s var(--ease), color var(--tone-speed);
}
.svc__tab[aria-selected="true"] .ast { opacity: 1; rotate: 0deg; }
.svc__hint {
  color: var(--accent);
  rotate: -6deg;
  font-size: clamp(1.4rem, 1rem + 1vw, 2rem);
  margin-block-end: .35em;
  margin-inline-start: 1.6em;
  transition: color var(--tone-speed);
  pointer-events: none;
}
.svc__panels { padding-block-start: clamp(3.2rem, 7vh, 4.4rem); }
.svc__ph { display: none; }
.svc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.svc__panel li {
  padding-block: .55em;
  font-weight: 500;
  font-size: clamp(1.15rem, .95rem + .6vw, 1.6rem);
  line-height: 1.3;
}
.svc__panel li::before {
  content: "*";
  font-family: "Tinos", serif;
  font-weight: 700;
  color: var(--accent);
  margin-inline-end: .4em;
  transition: color var(--tone-speed);
}
html.js .svc__panel[hidden] { display: none; }
html.js .svc__panel li { opacity: 0; transform: translateY(.6em); transition: opacity .45s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 35ms); }
html.js .svc__panel.is-in li { opacity: 1; transform: none; }
html:not(.js) .svc__index, html:not(.js) .svc__hint { display: none; }
html:not(.js) .svc { grid-template-columns: 1fr; }
html:not(.js) .svc__ph { display: block; font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 2rem; margin-block: 1.5rem .5rem; }

/* ---------- Brief in. Campaign out. ---------- */
.brief { overflow: clip; min-height: 78svh; padding-inline: 0; gap: clamp(1rem, 4vh, 2.5rem); grid-template-columns: minmax(0, 1fr); }
.brief__title { display: grid; gap: 0; }
.brief__l {
  display: block;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(3.4rem, .8rem + 10.5vw, 12.5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  white-space: nowrap;
  padding-block-end: .08em;
}
:root[lang="ar"] .brief__l { font-style: normal; line-height: 1.45; letter-spacing: 0; font-size: clamp(3.2rem, .8rem + 9.5vw, 11rem); }
.brief__in { padding-inline-start: var(--gutter); }
.brief__out { padding-inline-start: calc(var(--gutter) + 12vw); color: var(--accent); transition: color var(--tone-speed); }
.brief__out .ast { color: var(--fg); }
.brief .note { padding-inline-start: calc(var(--gutter) + 12vw); margin: 0; }

/* ---------- AI ---------- */
.ai__grid { display: grid; gap: clamp(2.5rem, 7vh, 4.5rem); }
.ai__head { position: relative; }
.ai__head .statement { max-width: 22ch; }
.ai__hand { position: absolute; inset-block-start: 38%; inset-inline-end: 2%; color: var(--fg); rotate: -6deg; text-align: center; }
.ai__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
.ai__facts li {
  border-block-start: 2px solid var(--fg);
  padding-block-start: 1.1rem;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1.45rem, 1rem + 1.4vw, 2.3rem);
  line-height: 1.18;
  padding-block-end: .1em;
}
:root[lang="ar"] .ai__facts li { font-style: normal; line-height: 1.6; }
.ai__facts .was { position: relative; white-space: nowrap; }
.ai__facts .was::after {
  content: "";
  position: absolute;
  inset-inline: -.05em;
  inset-block-start: 55%;
  height: .09em;
  background: var(--accent);
  transform: scaleX(var(--strike, 1));
  transform-origin: left center;
  transition: transform .9s .5s var(--ease), background-color var(--tone-speed);
}
:root[dir="rtl"] .ai__facts .was::after { transform-origin: right center; }
html.js .ai__facts:not(.in) .was::after { --strike: 0; }

/* ---------- Close ---------- */
.close { min-height: 100svh; align-content: space-between; padding-block-end: 1.5rem; gap: 4rem; }
.close__main { display: grid; gap: clamp(2rem, 6vh, 3.5rem); align-content: center; flex: 1; padding-block-start: clamp(2rem, 8vh, 6rem); }
.keys { display: flex; flex-wrap: wrap; gap: clamp(.6rem, 1.4vw, 1.25rem); text-decoration: none; width: fit-content; }
.key {
  --tilt: 0deg;
  display: grid;
  place-items: center;
  min-height: 1.75em;
  padding: .32em .55em .4em;
  font-family: var(--f-key);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.2rem, 1rem + 5vw, 6.2rem);
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--night);
  color: var(--white);
  rotate: var(--tilt);
  box-shadow: 0 .14em 0 color-mix(in srgb, var(--night) 55%, var(--coral));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), rotate .4s var(--ease);
}
:root[lang="ar"] .key { font-style: normal; font-weight: 700; line-height: 1.2; letter-spacing: 0; }
.key--lets { background: var(--oxblood); padding-inline: .45em; }
.key--lets .mark { width: 2.6em; height: auto; color: var(--coral); }
.key--bone { background: var(--bone); color: var(--oxblood); }
.key--word { color: var(--coral); }
.key:nth-child(1) { --tilt: -5deg; }
.key:nth-child(2) { --tilt: 3deg; }
.key:nth-child(3) { --tilt: -2deg; }
.key:nth-child(4) { --tilt: 4deg; }
.keys:hover .key { rotate: 0deg; }
.keys:hover .key:hover, .keys:focus-visible .key { transform: translateY(.08em); box-shadow: 0 .06em 0 color-mix(in srgb, var(--night) 55%, var(--coral)); }
.close__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.close__contact { display: grid; gap: .35rem; }
.close__email { font-weight: 700; font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem); text-underline-offset: .2em; text-decoration-thickness: 2px; }
.close__email:hover { text-decoration-thickness: 4px; }

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-block-start: 1.25rem;
  border-block-start: 2px solid color-mix(in srgb, var(--fg) 45%, transparent);
  font-weight: 600;
  font-size: 1rem;
}
.foot .mark { width: 4.2rem; height: auto; color: var(--fg); }
.foot__links { display: flex; gap: 1.5rem; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Reveal ---------- */
html.js .reveal .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.45em);
  transition: opacity .6s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 18ms);
}
html.js .reveal.in .w { opacity: 1; transform: none; }
html.js .reveal .ast { opacity: 0; transition: opacity .4s var(--ease), rotate .9s var(--ease), color var(--tone-speed); transition-delay: .35s; }
html.js .reveal.in .ast { opacity: 1; rotate: 360deg; }
html.js .fade { opacity: 0; transform: translateY(1rem); transition: opacity .8s var(--ease) .25s, transform .9s var(--ease) .25s; }
html.js .fade.in { opacity: 1; transform: none; }

/* Hero entrance */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__mark { animation: rise 1.1s var(--ease) both; }
  html.js .hero__hand { animation: pop .7s .75s var(--ease) both; }
  html.js .hero__foot { animation: fadeUp .9s .35s var(--ease) both; }
}
@keyframes rise { from { clip-path: inset(100% 0 0 0); transform: translateY(12%); } to { clip-path: inset(-10% -10% -10% -10%); transform: none; } }
@keyframes pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }

/* Brand strip */
@media (prefers-reduced-motion: no-preference) {
  .brands__track { animation: strip 48s linear infinite; }
  .brands:hover .brands__track { animation-play-state: paused; }
}
@keyframes strip { to { transform: translateX(calc(-50% * var(--dir))); } }

/* Scroll-linked motion, where the browser supports it */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__markwrap { animation: drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .manifesto__text .m { animation: lit linear both; animation-timeline: view(); animation-range: entry 100% cover 52%; }
    .brief__in { animation: slideIn linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .brief__out { animation: slideOut linear both; animation-timeline: view(); animation-range: cover 45% exit 100%; }
  }
}
@keyframes drift { to { transform: translateY(22%); } }
@keyframes lit { from { opacity: .28; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(calc(-32vw * var(--dir))); } to { transform: none; } }
@keyframes slideOut { from { transform: none; } to { transform: translateX(calc(34vw * var(--dir))); } }

@media (prefers-reduced-motion: reduce) {
  :root { --tone-speed: 0s; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  html.js .reveal .w, html.js .reveal .ast, html.js .fade { opacity: 1; transform: none; rotate: 0deg; }
  .brands__set:last-child { display: none; }
  .brands__track { width: auto; flex-wrap: wrap; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .svc__cols { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  :root { --nav-h: 4rem; }
  .nav__logo { width: 5rem; }
  .nav .btn { font-size: 1.1875rem; padding: .45em .8em .5em; }
  .hero { min-height: 80svh; }
  .hero__inner, .hero__title, .cycle { min-width: 0; }
  .hero__mark { width: calc(100% + var(--gutter) + 1vw); margin-inline-start: calc(-1 * var(--gutter) - 1vw); }
  :root[dir="rtl"] .hero__mark { margin-inline-start: 0; margin-inline-end: calc(-1 * var(--gutter) - 1vw); translate: none; }
  .hero__hand { position: static; justify-self: end; margin-block-start: -.6em; font-size: 1.45rem; }
  .hero__foot { flex-direction: column; align-items: flex-start; }
  .teams__grid { grid-template-columns: 1fr; }
  .teams__grid .statement, .teams__grid .note { grid-column: 1; grid-row: auto; }
  .teams__grid .note { order: 2; }
  .first__hand { margin-block: .25em 0; }
  .svc { grid-template-columns: 1fr; gap: 1.5rem; }
  .svc__tab { font-size: 2.1rem; }
  :root[lang="ar"] .svc__tab { font-size: 1.9rem; }
  .svc__panels { padding-block-start: 1rem; border-block-start: 2px solid color-mix(in srgb, var(--fg) 30%, transparent); }
  .brief__l { font-size: 2.75rem; }
  :root[lang="ar"] .brief__l { font-size: 2.9rem; }
  .brief__out, .brief .note { padding-inline-start: calc(var(--gutter) + 4vw); }
  .ai__facts { grid-template-columns: 1fr; }
  .ai__hand { position: static; display: block; justify-self: end; margin-block-start: 1rem; width: fit-content; margin-inline-start: auto; }
  .goal__hand { justify-self: start; }
  .close__cta { flex-direction: column; align-items: flex-start; }
  .foot { flex-direction: column; align-items: flex-start; }
}