/* ==========================================================================
   Section compositions
   Each band has its own shape on purpose — the page never repeats one card
   grid from top to bottom.
   ========================================================================== */

/* ------------------------------------------------------------------ hero */

/* The hero and the statistics are one scene: a single background, a single
   scrim, and a column that pushes the figures to the foot of the frame. */
.hero {
  position: relative;
  min-block-size: min(100svh, 900px);
  display: flex;
  flex-direction: column;
  padding-block: calc(var(--masthead-h) + 3rem) 0;
  overflow: hidden;
  isolation: isolate;
}

.hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__plate {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1600ms var(--ease);
}

.hero__plate.is-active { opacity: 1; }
.hero__plate:first-child { opacity: 1; }

.hero__plate picture,
.hero__plate img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* A very slow drift keeps the frame alive without ever reading as movement. */
.hero__plate img {
  animation: kenburns 34s var(--ease) infinite alternate;
  will-change: transform;
}

@keyframes kenburns {
  from { transform: scale(1.04); }
  to { transform: scale(1.12); }
}

/* The bottom of this scrim is deliberately lighter than the shared one: the
   statistics sit inside the hero, and the photograph has to stay visible
   behind them so the two never read as separate sections. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(8, 8, 8, 0.78) 0%, rgba(8, 8, 8, 0.7) 16%, rgba(8, 8, 8, 0.4) 44%, rgba(8, 8, 8, 0.08) 74%, rgba(8, 8, 8, 0) 100%),
    var(--scrim-side),
    linear-gradient(to bottom, rgba(8, 8, 8, 0.62) 0%, rgba(8, 8, 8, 0.1) 26%, rgba(8, 8, 8, 0) 45%);
}

.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 3px 3px;
}

.hero__body {
  position: relative;
  z-index: 3;
  inline-size: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero__inner { max-inline-size: 56rem; }

.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-block-end: 1.1rem;
}

html[lang='ar'] .hero__kicker { text-transform: none; letter-spacing: 0.04em; font-size: 0.85rem; }

.hero__kicker::before {
  content: '';
  inline-size: 2.25rem;
  block-size: 1px;
  background: var(--brand-accent);
}

.hero__title {
  font-size: var(--fs-hero-title);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.032em;
  margin-block-end: 1.1rem;
}

html[lang='ar'] .hero__title { line-height: 1.16; letter-spacing: -0.01em; font-weight: 700; }

/* The second language sits under the first as a quieter companion — present,
   but never competing with the primary lockup. */
.hero__title em {
  font-style: normal;
  color: var(--ink-2);
  font-weight: 300;
  display: block;
  font-size: var(--fs-hero-alt);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-block-start: 0.35rem;
}

html[lang='ar'] .hero__title em { line-height: 1.3; margin-block-start: 0.15rem; }

.hero__lead {
  max-inline-size: 48ch;
  font-size: var(--fs-hero-lead);
  color: var(--ink-2);
  font-weight: 300;
  line-height: 1.85;
  margin-block-end: 1.85rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

/* Scroll cue and slider indicators sit between the copy and the figures, so
   neither can collide with the statistics strip. */
.hero__foot {
  position: relative;
  z-index: 3;
  margin-block-start: clamp(1.6rem, 4vh, 2.75rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block-end: clamp(1.1rem, 2.4vh, 1.75rem);
}

.hero__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease);
}

html[lang='ar'] .hero__hint { text-transform: none; letter-spacing: 0.03em; }

.hero__hint:hover { color: var(--ink); }
.hero__hint .icon { inline-size: 16px; block-size: 16px; animation: nudge 2.8s var(--ease) infinite; }

@keyframes nudge {
  0%, 72%, 100% { transform: translateY(0); opacity: 0.7; }
  84% { transform: translateY(5px); opacity: 1; }
}

.hero__dots { display: flex; gap: 0.4rem; align-items: center; }

/* The indicator reads as a 2px rule but is padded out to a comfortable touch
   target; the fill is clipped to the content box so only the rule is painted. */
.hero__dot {
  box-sizing: content-box;
  inline-size: 24px;
  block-size: 2px;
  padding-block: 16px;
  background: var(--line-2);
  background-clip: content-box;
  border: 0;
  cursor: pointer;
  transition: background var(--t-mid) var(--ease);
}

/* background-color only — the shorthand would reset background-clip and paint
   the whole padded hit area instead of the rule. */
.hero__dot.is-active { background-color: var(--brand-accent); }
.hero__dot:hover { background-color: var(--line-strong); }

/* ------------------------------------------------ statistics in the hero */

/* The same markup as the standalone band, laid at the foot of the hero. No
   second image, no panel, no card — just a hairline and a soft darkening so
   the figures stay legible over whichever frame is showing. */
.hero__stats {
  position: relative;
  z-index: 3;
  flex: none;
  border-block-start: 1px solid var(--line-2);
  background: linear-gradient(to bottom, rgba(8, 8, 8, 0.04), rgba(8, 8, 8, 0.34));
  padding-block: clamp(1.1rem, 2.3vw, 1.9rem);
}

.hero__stats .statband__row { align-items: start; }

/* The leading figure lines up with the headline above it. */
.hero__stats .statband__cell:first-child { padding-inline-start: 0; }

.hero__stats .statband__value {
  font-size: clamp(1.4rem, 0.62rem + 3.35vw, 4.1rem);
  line-height: 1;
}

.hero__stats .statband__label {
  margin-block-start: 0.55rem;
  font-size: clamp(0.7rem, 0.62rem + 0.28vw, 0.9rem);
  line-height: 1.45;
}

/* ------------------------------------------------------------- stat band */

.statband {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 6vw, 6rem);
  overflow: hidden;
}

.statband .backdrop img { filter: grayscale(0.55) contrast(1.05); }

.statband__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8, 8, 8, 0.95), rgba(8, 8, 8, 0.82) 45%, rgba(8, 8, 8, 0.95));
}

.statband__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
}

.statband__cell { padding-inline: clamp(0.5rem, 2.5vw, 2.5rem); }

.statband__cell + .statband__cell { border-inline-start: 1px solid var(--line); }

.statband__value {
  font-family: var(--font-num);
  font-size: var(--fs-stat);
  font-weight: 200;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--ink);
  display: block;
}

.statband__label {
  display: block;
  margin-block-start: 0.9rem;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  font-weight: 400;
  line-height: 1.5;
}

.statband__cell:nth-child(2) .statband__value { color: #efefef; }

/* --------------------------------------------------------- editorial split */

.editorial {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.editorial--flip { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.editorial--flip .editorial__media { order: 2; }

.editorial__media { position: relative; }

.editorial__media .frame { border-radius: var(--r-sm); }

/* a thin colour edge lifted from the logo's hexagon */
.editorial__media::after {
  content: '';
  position: absolute;
  inset-block: 8%;
  inset-inline-start: -1px;
  inline-size: 2px;
  background: linear-gradient(to bottom, var(--brand-secondary), var(--logo-azure) 35%, var(--logo-violet) 70%, transparent);
  opacity: 0.75;
}

.editorial__body { max-inline-size: 40rem; }

.editorial__lead {
  font-size: clamp(1.15rem, 1rem + 0.72vw, 1.55rem);
  line-height: 1.62;
  font-weight: 300;
  color: var(--ink);
  margin-block-end: 1.35rem;
}

html[lang='ar'] .editorial__lead { line-height: 1.85; }

.editorial__text { color: var(--ink-2); margin-block-end: 2rem; }

.editorial__aside {
  margin-block-start: 2.5rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--line);
}

/* --------------------------------------------------------------- section head */

.shead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 2.5rem;
  align-items: end;
  margin-block-end: clamp(2.25rem, 4vw, 3.5rem);
}

.shead__title { font-size: var(--fs-h2); font-weight: 650; max-inline-size: 20ch; }
.shead__note { color: var(--ink-2); max-inline-size: 46ch; font-size: var(--fs-sm); }
.shead--stack { grid-template-columns: minmax(0, 1fr); }

/* -------------------------------------------------------------- rail */

.rail { position: relative; }

.rail__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
}

.rail__nav { display: flex; gap: 0.5rem; flex: none; }

.rail__btn {
  inline-size: 44px;
  block-size: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.rail__btn:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.05);
}

.rail__btn:disabled { opacity: 0.3; cursor: default; }

/* The track spans the full width of the band. Its inline padding lines the
   first tile up with the shell's text column, so the row reads as continuing
   past the edge of the viewport instead of stopping inside a container. */
.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(230px, 24vw, 310px);
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block-end: 0.5rem;
  padding-inline: max(var(--shell-pad), calc((100% - var(--shell)) / 2 + var(--shell-pad)));
}

.rail__track::-webkit-scrollbar { display: none; }
.rail__track.is-dragging { scroll-snap-type: none; cursor: grabbing; scroll-behavior: auto; }
.rail__track.is-dragging a { pointer-events: none; }

.tile {
  position: relative;
  display: block;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--surface);
  aspect-ratio: 3 / 4;
  isolation: isolate;
}

.tile picture,
.step__media picture,
.splitband__media picture,
.hero__plate picture {
  position: absolute;
  inset: 0;
}

.tile img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(0.35) contrast(1.04) brightness(0.85);
  transition: transform 900ms var(--ease-out), filter var(--t-slow) var(--ease);
}

.tile:hover img,
.tile:focus-visible img {
  transform: scale(1.055);
  filter: grayscale(0) contrast(1.02) brightness(0.96);
}

.tile__scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim-tile);
  transition: opacity var(--t-mid) var(--ease);
}

.tile__edge {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 2px;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: var(--to-end);
  transition: transform 520ms var(--ease-out);
}

.tile:hover .tile__edge,
.tile:focus-visible .tile__edge { transform: scaleX(1); }

.tile__body {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  gap: 0.55rem;
}

.tile__index {
  font-family: var(--font-num);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-3);
}

.tile__name {
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.16rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.tile__go {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.tile__go .icon { inline-size: 14px; block-size: 14px; }

.tile:hover .tile__go,
.tile:focus-visible .tile__go { opacity: 1; transform: translateY(0); }

.rail__progress {
  block-size: 2px;
  background: var(--line);
  margin-block-start: 1.5rem;
  position: relative;
  overflow: hidden;
}

.rail__progress span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  background: var(--brand-accent);
  inline-size: 25%;
  transition: transform 120ms linear;
}

/* --------------------------------------------------------------- journey */

.journey { display: grid; gap: 0; }

.journey__intro {
  max-inline-size: 58ch;
  color: var(--ink-2);
  font-size: var(--fs-lead);
  font-weight: 300;
  margin-block-end: clamp(2.5rem, 4vw, 3.75rem);
}

.jstep {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  border-block-start: 1px solid var(--line);
  position: relative;
}

.jstep:last-child { border-block-end: 1px solid var(--line); }

.jstep__num {
  font-family: var(--font-num);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  font-weight: 200;
  line-height: 1;
  color: var(--ink-4);
  letter-spacing: -0.05em;
  transition: color var(--t-slow) var(--ease);
}

.jstep.is-visible .jstep__num { color: var(--ink-2); }

.jstep__text {
  font-size: clamp(1.02rem, 0.96rem + 0.36vw, 1.2rem);
  color: var(--ink);
  font-weight: 350;
  line-height: 1.68;
  max-inline-size: 56ch;
}

html[lang='ar'] .jstep__text { line-height: 1.9; }

.jstep__media { justify-self: end; inline-size: 100%; max-inline-size: 22rem; }

.jstep__media .frame { border-radius: var(--r-sm); }
.jstep__media img { filter: grayscale(0.3) brightness(0.88); transition: filter var(--t-slow) var(--ease); }
.jstep:hover .jstep__media img { filter: grayscale(0) brightness(1); }

.jstep--plain .jstep__text { grid-column: 2 / -1; max-inline-size: 74ch; }

/* highlight row: the fee statement carries its own weight */
.jstep--accent .jstep__text { color: var(--ink); font-weight: 450; }
.jstep--accent .jstep__num { color: var(--brand-accent); }

/* ------------------------------------------------------------- split band */

.splitband {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  min-block-size: 34rem;
  background: var(--bg-2);
}

.splitband__media { position: relative; overflow: hidden; }

.splitband__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* The scrim darkens the edge that meets the text column, so the two halves
   join without a hard seam and the open side of the photograph stays bright. */
.splitband__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to var(--to-end), rgba(8, 8, 8, 0) 38%, rgba(8, 8, 8, 0.55) 78%, rgba(8, 8, 8, 0.94) 100%);
}

.splitband__body {
  padding: clamp(2.5rem, 5vw, 5.5rem) clamp(1.5rem, 4vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-inline-size: 46rem;
}

.splitband--reverse .splitband__media { order: 2; }
.splitband--reverse .splitband__media::after {
  background: linear-gradient(to var(--to-end), rgba(8, 8, 8, 0.72) 8%, rgba(8, 8, 8, 0) 58%);
}

.splitband__quote {
  margin-block: 1.75rem 0;
  padding-inline-start: 1.25rem;
  border-inline-start: 2px solid var(--brand-accent);
  font-size: clamp(1.05rem, 0.98rem + 0.42vw, 1.28rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  max-inline-size: 48ch;
}

html[lang='ar'] .splitband__quote { line-height: 1.9; }

/* ----------------------------------------------------------------- steps */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  counter-reset: step;
}

.step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.1rem;
}

/* staggered baseline so the three beats never read as three equal cards */
.step:nth-child(2) { margin-block-start: clamp(1.5rem, 4vw, 4rem); }
.step:nth-child(3) { margin-block-start: clamp(3rem, 8vw, 8rem); }

.step__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  aspect-ratio: 4 / 3;
}

.step__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(0.4) brightness(0.8);
  transition: transform 900ms var(--ease-out), filter var(--t-slow) var(--ease);
}

.step:hover .step__media img { transform: scale(1.05); filter: grayscale(0) brightness(0.95); }

.step__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.72), rgba(8, 8, 8, 0.08));
}

.step__num {
  position: absolute;
  inset-block-end: 0.85rem;
  inset-inline-start: 1.1rem;
  z-index: 1;
  font-family: var(--font-num);
  font-size: clamp(2.75rem, 2rem + 2.5vw, 4rem);
  font-weight: 200;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.9);
}

.step__num::after {
  content: '';
  display: block;
  inline-size: 1.75rem;
  block-size: 2px;
  background: var(--brand-accent);
  margin-block-start: 0.55rem;
}

.step__title { font-size: var(--fs-h4); font-weight: 600; }
.step__text { color: var(--ink-2); font-size: var(--fs-sm); max-inline-size: 40ch; }

/* ---------------------------------------------------------------- portal */

/* Deliberately more structured than the job-seeker bands: rules, columns and
   a cooler accent give the B2B section a different temperature. */
.portal {
  position: relative;
  background: #0b0b0b;
  border-block: 1px solid var(--line);
  overflow: hidden;
}

.portal::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: clamp(70px, 8vw, 116px) clamp(70px, 8vw, 116px);
  opacity: 0.4;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 10%, transparent 78%);
}

.portal__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: start;
}

.portal__intro {
  font-size: var(--fs-lead);
  color: var(--ink-2);
  font-weight: 300;
  max-inline-size: 54ch;
  margin-block-end: 2.5rem;
}

.portal__subhead {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--brand-secondary);
  margin-block-end: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

html[lang='ar'] .portal__subhead { text-transform: none; letter-spacing: 0.04em; font-size: 0.88rem; }

.portal__subhead .icon { inline-size: 17px; block-size: 17px; }

.portal__aside { position: relative; }

.portal__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

.portal__media img { filter: grayscale(0.5) contrast(1.06) brightness(0.72); }

.portal__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 8, 0.85), rgba(11, 11, 11, 0.25));
}

.portal__steps {
  margin-block-start: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(23, 23, 23, 0.72);
  padding: clamp(1.25rem, 2.5vw, 1.85rem);
}

.pstep {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.95rem;
  padding-block: 1.05rem;
}

.pstep + .pstep { border-block-start: 1px solid var(--line); }

.pstep__num {
  font-family: var(--font-num);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-secondary);
  padding-block-start: 0.35em;
  letter-spacing: 0.08em;
}

.pstep__title { font-size: 0.98rem; font-weight: 600; margin-block-end: 0.3rem; }
.pstep__text { font-size: var(--fs-sm); color: var(--ink-2); }

/* ------------------------------------------------------------------ why */

.why { position: relative; isolation: isolate; overflow: hidden; }

.why .backdrop img { filter: grayscale(0.45) brightness(0.78); }

.why__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to var(--to-end), rgba(8, 8, 8, 0.35) 10%, rgba(8, 8, 8, 0.86) 62%),
    linear-gradient(to bottom, rgba(8, 8, 8, 0.72), rgba(8, 8, 8, 0.3) 45%, rgba(8, 8, 8, 0.82));
}

.why__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.why__title { font-size: var(--fs-h2); font-weight: 650; max-inline-size: 14ch; }

.why__list { display: grid; }

.why__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
  padding-block: clamp(1.15rem, 2vw, 1.6rem);
  border-block-start: 1px solid var(--line-2);
}

.why__item:last-child { border-block-end: 1px solid var(--line-2); }

.why__mark {
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--ink-2);
  transition: color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}

.why__item:hover .why__mark { color: var(--brand-accent); border-color: var(--brand-accent); }
.why__mark .icon { inline-size: 18px; block-size: 18px; }

.why__text { color: var(--ink); font-weight: 350; max-inline-size: 56ch; }

/* --------------------------------------------------------------- vision */

.vision { text-align: center; }

.vision__statement {
  font-size: clamp(1.4rem, 1rem + 2.1vw, 2.6rem);
  font-weight: 300;
  line-height: 1.42;
  letter-spacing: -0.02em;
  max-inline-size: 26ch;
  margin-inline: auto;
  color: var(--ink);
}

html[lang='ar'] .vision__statement { line-height: 1.7; max-inline-size: 24ch; }

.vision__mark {
  inline-size: 72px;
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  opacity: 0.9;
}

.values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-block-start: clamp(3rem, 6vw, 5rem);
  text-align: start;
  border-block-start: 1px solid var(--line);
}

.value {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2.5vw, 2.25rem);
  position: relative;
}

.value + .value { border-inline-start: 1px solid var(--line); }

.value::before {
  content: '';
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 1px;
  background: var(--brand-accent);
  transition: inline-size 620ms var(--ease-out);
}

.value.is-visible::before { inline-size: 100%; }

.value__icon { color: var(--ink-3); margin-block-end: 1.1rem; }
.value__icon .icon { inline-size: 26px; block-size: 26px; }
.value__text { color: var(--ink-2); font-size: var(--fs-sm); }

.value__text strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-h4);
  font-weight: 600;
  margin-block-end: 0.55rem;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------ final cta */

.finale {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4.5rem, 9vw, 8.5rem);
}

.finale .backdrop img { filter: brightness(0.6) grayscale(0.25); }

.finale__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(8, 8, 8, 0.92), rgba(8, 8, 8, 0.68) 45%, rgba(8, 8, 8, 0.96)),
    radial-gradient(90% 70% at 50% 50%, rgba(8, 8, 8, 0.2), rgba(8, 8, 8, 0.85));
}

.finale__body { position: relative; z-index: 1; text-align: center; }

.finale__title {
  font-size: var(--fs-h2);
  font-weight: 650;
  max-inline-size: 22ch;
  margin-inline: auto;
}

.finale__paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-inline-size: 58rem;
  margin: clamp(2.5rem, 5vw, 3.75rem) auto 0;
  text-align: start;
}

.path {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(12, 12, 12, 0.72);
  backdrop-filter: blur(6px);
  transition: border-color var(--t-mid) var(--ease), background var(--t-mid) var(--ease),
    transform var(--t-mid) var(--ease);
}

.path:hover {
  border-color: var(--line-strong);
  background: rgba(20, 20, 20, 0.86);
  transform: translateY(-3px);
}

.path__icon { color: var(--brand-accent); }
.path--b2b .path__icon { color: var(--brand-secondary); }
.path__icon .icon { inline-size: 26px; block-size: 26px; }
.path__title { font-size: var(--fs-h4); font-weight: 600; }
.path__text { color: var(--ink-2); font-size: var(--fs-sm); }
.path .btn { margin-block-start: 0.35rem; justify-self: start; }

/* ------------------------------------------------------- inner page head */

.pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--masthead-h) + clamp(3.5rem, 7vw, 6.5rem)) clamp(3rem, 6vw, 5.5rem);
  border-block-end: 1px solid var(--line);
}

.pagehead .backdrop img { filter: brightness(0.62) grayscale(0.3); }

.pagehead__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to var(--to-end), rgba(8, 8, 8, 0.95) 22%, rgba(8, 8, 8, 0.68) 62%, rgba(8, 8, 8, 0.5)),
    linear-gradient(to bottom, rgba(8, 8, 8, 0.9), rgba(8, 8, 8, 0.45) 45%, rgba(8, 8, 8, 0.92));
}

.pagehead__body { position: relative; z-index: 1; }

.pagehead__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: -0.028em;
  margin-block: 1.35rem 1.25rem;
  max-inline-size: 18ch;
}

html[lang='ar'] .pagehead__title { letter-spacing: -0.008em; line-height: 1.28; }

.pagehead__lead { max-inline-size: 56ch; color: var(--ink-2); font-size: var(--fs-lead); font-weight: 300; }

/* ---------------------------------------------------------------- mosaic */

/* Nine sectors laid on a six-column, fixed-row grid. Cells span whole rows and
   columns rather than carrying their own aspect ratio, so every row closes
   exactly and the wall never leaves a hole. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: clamp(180px, 17vw, 250px);
  gap: clamp(0.6rem, 1.2vw, 1rem);
}

.mosaic__cell { grid-column: span 2; grid-row: span 1; }
.mosaic__cell--lead { grid-column: span 4; grid-row: span 2; }
.mosaic__cell--tall { grid-row: span 2; }
.mosaic__cell--full { grid-column: span 6; }

.mosaic .tile {
  aspect-ratio: auto;
  block-size: 100%;
}

/* --------------------------------------------------------------- content */

.prose { max-inline-size: var(--measure); color: var(--ink-2); }
.prose > * + * { margin-block-start: 1.15em; }
.prose h2 { color: var(--ink); font-size: var(--fs-h3); margin-block-start: 2.25em; }
.prose h3 { color: var(--ink); font-size: var(--fs-h4); margin-block-start: 1.75em; }
.prose strong { color: var(--ink); font-weight: 600; }

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.duo--offset > :nth-child(2) { padding-block-start: clamp(0, 3vw, 3rem); }

/* ----------------------------------------------------------- form pages */

.formpage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.formcard {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.5rem, 3.5vw, 3rem);
}

.formaside { position: sticky; top: calc(var(--masthead-h) + 1.5rem); display: grid; gap: 1.75rem; }

.formaside__media { border-radius: var(--r-sm); overflow: hidden; }
.formaside__media img { filter: grayscale(0.35) brightness(0.8); }

.formaside__panel {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 1.5rem;
  background: var(--surface);
}

.formaside__title { font-size: 0.98rem; font-weight: 600; margin-block-end: 1rem; }

.success {
  border: 1px solid rgba(53, 156, 134, 0.4);
  background: linear-gradient(to bottom, rgba(53, 156, 134, 0.1), rgba(53, 156, 134, 0.02));
  border-radius: var(--r-md);
  padding: clamp(2rem, 4vw, 3.25rem);
  text-align: center;
  max-inline-size: 44rem;
  margin-inline: auto;
}

.success__icon { color: var(--brand-secondary); margin-inline: auto; margin-block-end: 1.25rem; }
.success__icon .icon { inline-size: 48px; block-size: 48px; }
.success__title { font-size: var(--fs-h3); font-weight: 650; margin-block-end: 0.85rem; }
.success__text { color: var(--ink-2); max-inline-size: 52ch; margin-inline: auto; }

.success__ref {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-block-start: 1.75rem;
  padding: 0.7rem 1.15rem;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

.success__ref b { font-family: var(--font-num); color: var(--ink); letter-spacing: 0.06em; }

/* ------------------------------------------------------------ empty state */

.empty {
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  background: rgba(23, 23, 23, 0.5);
}

.empty__icon { color: var(--ink-4); margin-inline: auto; margin-block-end: 1.25rem; }
.empty__icon .icon { inline-size: 40px; block-size: 40px; }
.empty__title { font-size: var(--fs-h3); font-weight: 600; margin-block-end: 0.75rem; }
.empty__text { color: var(--ink-2); max-inline-size: 52ch; margin-inline: auto; margin-block-end: 1.85rem; }

/* --------------------------------------------------------------- legal */

/* Long-form text: a quiet index beside a single readable column. No cards —
   legal copy is read in sequence, not scanned as tiles. */
.legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.legal__toc {
  position: sticky;
  top: calc(var(--masthead-h) + 1.5rem);
  border-inline-start: 1px solid var(--line);
  padding-inline-start: 1.25rem;
}

.legal__toc-title {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-4);
  margin-block-end: 1.1rem;
}

html[lang='ar'] .legal__toc-title { text-transform: none; letter-spacing: 0.05em; font-size: 0.86rem; }

.legal__toc ol {
  display: grid;
  gap: 0.6rem;
  counter-reset: toc;
}

.legal__toc a {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.55;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease);
}

.legal__toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero) '  ';
  font-family: var(--font-num);
  color: var(--ink-4);
}

.legal__toc a:hover { color: var(--ink); }

.legal__body { max-inline-size: 68ch; }

.legal__updated {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-block-end: clamp(2rem, 4vw, 3rem);
}

.legal__updated .icon { inline-size: 15px; block-size: 15px; }

.legal__section { scroll-margin-top: calc(var(--masthead-h) + 2rem); }
.legal__section + .legal__section { margin-block-start: clamp(2.25rem, 4vw, 3.25rem); }

.legal__heading {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink);
  margin-block-end: 0.9rem;
  padding-block-end: 0.7rem;
  border-block-end: 1px solid var(--line);
}

.legal__section p {
  color: var(--ink-2);
  line-height: 1.9;
}

html[lang='ar'] .legal__section p { line-height: 2.05; }

.legal__section p + p { margin-block-start: 0.95rem; }

.legal__section a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brand-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--t-fast) var(--ease);
}

.legal__section a:hover { color: var(--brand-accent); }

.legal__actions {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--line);
}

/* --------------------------------------------------- hero entrance (1/2) */

/* The hero lockup arrives in sequence on load. Elements are only pre-hidden
   when JavaScript is running and motion is welcome, so nothing can ever be
   left invisible; buttons stay clickable throughout because only opacity and
   transform are animated. */
.js .hero__enter > * {
  opacity: 0;
  transform: translateY(20px);
}

.js .hero.is-entered .hero__enter > * {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}

.js .hero.is-entered .hero__enter > :nth-child(1) { transition-delay: 60ms; }
.js .hero.is-entered .hero__enter > :nth-child(2) { transition-delay: 150ms; }
.js .hero.is-entered .hero__enter > :nth-child(3) { transition-delay: 250ms; }
.js .hero.is-entered .hero__enter > :nth-child(4) { transition-delay: 350ms; }
.js .hero.is-entered .hero__enter > :nth-child(5) { transition-delay: 440ms; }

/* The companion language sits inside the headline, so it takes its own beat
   just after it rather than arriving with it. */
.js .hero__enter .hero__title em {
  opacity: 0;
  transform: translateY(16px);
}

.js .hero.is-entered .hero__enter .hero__title em {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out) 230ms, transform 620ms var(--ease-out) 230ms;
}

/* --------------------------------------------- statistics entrance (2/2) */

.js .hero__stats {
  opacity: 0;
  transform: translateY(14px);
}

.js .hero__stats.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__enter > *,
  .js .hero__enter .hero__title em,
  .js .hero__stats {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------- reveal fx */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 780ms var(--ease-out), transform 780ms var(--ease-out);
}

.reveal.is-visible { opacity: 1; transform: none; }

.js .reveal-group > * { opacity: 0; transform: translateY(14px); }

.js .reveal-group.is-visible > * {
  opacity: 1;
  transform: none;
  transition: opacity 680ms var(--ease-out), transform 680ms var(--ease-out);
}

.js .reveal-group.is-visible > :nth-child(1) { transition-delay: 0ms; }
.js .reveal-group.is-visible > :nth-child(2) { transition-delay: 70ms; }
.js .reveal-group.is-visible > :nth-child(3) { transition-delay: 140ms; }
.js .reveal-group.is-visible > :nth-child(4) { transition-delay: 210ms; }
.js .reveal-group.is-visible > :nth-child(5) { transition-delay: 280ms; }
.js .reveal-group.is-visible > :nth-child(6) { transition-delay: 350ms; }

/* Without JavaScript nothing may stay hidden. */
.no-js .reveal,
.no-js .reveal-group > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .js .reveal-group > * { opacity: 1 !important; transform: none !important; }
  .hero__plate img { animation: none; transform: scale(1.04); }
  .hero__hint .icon { animation: none; }
}