/* ══════════════════════════════════════════════════════
   ZEXCA — the About page's own layer
   ══════════════════════════════════════════════════════
   It sits on top of `landing.css`, which sits on top of `dashboard.css`. Almost
   nothing here is a new colour or a new radius — the tokens are the product's
   and they are not restated. What this file adds is a different RHYTHM: the
   landing page is dense because it is selling nine things, and this page is
   sparse because it is telling one story.

   ── THE TYPE IS THE DESIGN ──
   The brief asked for large editorial typography and generous negative space,
   and that is most of what is below. Headlines run to 84px, measures stay near
   sixty characters, and sections are separated by a great deal of nothing. A
   page that says "we are an engineering company" in cramped 15px type is not
   making its own argument.

   ── AND NOTHING HERE HIDES CONTENT ──
   `.ld-rev` from the landing layer is the only reveal, it is a fade and a small
   rise, and it fires on arrival. No section is held, pinned, or given extra
   height it does not need. That rule is written down because breaking it once
   turned a working page into screens of nothing.
   ══════════════════════════════════════════════════════ */

/* The page's own scale. Bigger than the landing page's at every step. */
body.ab{
  --ab-s1:14px;  --ab-s2:26px;  --ab-s3:48px;
  --ab-s4:clamp(64px,8vw,112px);
  --ab-s5:clamp(96px,13vw,190px);
}

/* ══ SHARED ═══════════════════════════════════════════ */

.ab-sec{position:relative;padding-block:var(--ab-s5);}
.ab-sec.tight{padding-block:var(--ab-s4);}

.ab-head{max-width:820px;margin-bottom:var(--ab-s4);}
.ab-head.center{margin-inline:auto;text-align:center;}

.ab-kicker{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--ab-s2);
}
html[lang="fa"] .ab-kicker,html[lang="ar"] .ab-kicker{
  letter-spacing:0;text-transform:none;font-family:var(--f-body);
}

.ab-h1{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(40px,7.2vw,88px);line-height:1.02;letter-spacing:-.032em;
  color:var(--fg);text-wrap:balance;margin-bottom:var(--ab-s2);
}
.ab-h1 em{font-style:normal;color:var(--gold);}

.ab-h2{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(28px,4.4vw,54px);line-height:1.08;letter-spacing:-.026em;
  color:var(--fg);text-wrap:balance;
}
.ab-h2.xl{font-size:clamp(38px,6.2vw,78px);letter-spacing:-.032em;}

.ab-lead{
  font-size:clamp(16px,1.5vw,20px);line-height:1.66;color:var(--fg-2);
  max-width:62ch;margin-top:var(--ab-s2);
}
.ab-lead.center{margin-inline:auto;}
.ab-note{font-size:15.5px;line-height:1.75;color:var(--fg-3);max-width:64ch;
  margin-top:var(--ab-s2);}

.ab-eyebrow{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--ab-s2);
}

/* ══ 01 · HERO ════════════════════════════════════════
   The room is a live WebGL scene and it sits BEHIND the type, so the type has
   to survive whatever the renderer does. A gradient scrim carries that rather
   than a flat overlay — a flat one would dim the picture everywhere, and the
   picture is only in the way on the left. */
.ab-hero{
  position:relative;min-height:clamp(620px,92vh,980px);
  display:flex;align-items:center;overflow:hidden;
  padding-block:calc(var(--ld-nav-h) + var(--ab-s4)) var(--ab-s4);
}
.ab-hero-room{
  position:absolute;inset:-8% -4%;width:108%;height:116%;
  z-index:0;pointer-events:none;
}
.ab-hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--bg-0) 2%,rgba(10,12,16,.82) 34%,rgba(10,12,16,0) 68%),
    linear-gradient(0deg,var(--bg-0) 1%,transparent 26%);
}
.ab-hero-in{position:relative;z-index:2;width:100%;}
.ab-hero .ab-lead{margin-bottom:var(--ab-s3);}

/* The one piece of ornament in the hero, and it earns its place by telling a
   first-time reader the page continues. */
.ab-scroll{
  position:absolute;z-index:2;inset-inline-start:50%;bottom:26px;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fg-3);
}
.ab-scroll i{
  display:block;width:1px;height:38px;
  background:linear-gradient(180deg,var(--gold),transparent);
}

/* ══ THE STATEMENT ════════════════════════════════════ */
.ab-statement{padding-block:var(--ab-s4);}
.ab-say{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(22px,3.1vw,40px);line-height:1.34;letter-spacing:-.018em;
  color:var(--fg-2);max-width:20ch;text-wrap:balance;
  max-width:min(100%,24ch);
}
.ab-say em{font-style:normal;color:var(--fg);}

/* ══ 02 · THE TIMELINE ════════════════════════════════
   HORIZONTAL ON A WIDE SCREEN, VERTICAL ON A NARROW ONE — redesigned rather
   than compressed, which is what the brief asked for. The wide version scrolls
   with the pointer or a trackpad and never traps the page's own scroll.

   THE RULE RUNS THROUGH THE YEARS, not under the whole strip: it is a timeline
   and the line is the thing that makes it one. */
.ab-time-wrap{
  position:relative;margin-top:var(--ab-s4);
  /* Out of the wrap and to the page edge, because a timeline that stops at a
     content margin reads as a table. `--ld-max` is the wrap's own width, so
     this lines the first entry up with the heading above it and then lets the
     strip run past the right margin — which is what says there is more. */
  padding-inline:max(20px,calc((100vw - var(--ld-max)) / 2 + 20px));
}
.ab-time{
  display:grid;gap:var(--ab-s3);list-style:none;margin:0;padding:0;
}
.ab-t{position:relative;padding-top:38px;}
/* The line and the node. `::before` is the rule, `::after` the marker on it. */
.ab-t::before{
  content:'';position:absolute;inset-inline:0;top:9px;height:1px;
  background:var(--line);
}
.ab-t::after{
  content:'';position:absolute;inset-inline-start:0;top:5px;
  width:9px;height:9px;border-radius:50%;
  background:var(--bg-0);border:1px solid var(--line);
}
.ab-t.is-now::after{background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 5px rgba(232,182,71,.14);}
.ab-t.is-next::after{border-style:dashed;border-color:var(--gold-dk);}

.ab-t-year{
  display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  color:var(--gold);margin-bottom:10px;
}
.ab-t.is-next .ab-t-year{color:var(--fg-3);}
.ab-t-title{
  font-family:var(--f-display);font-weight:700;font-size:19px;
  letter-spacing:-.012em;color:var(--fg);margin-bottom:9px;
}
.ab-t-body{font-size:14px;line-height:1.66;color:var(--fg-3);max-width:38ch;}

@media(min-width:860px){
  .ab-time{
    grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);
    gap:0;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    padding-bottom:10px;
  }
  .ab-t{scroll-snap-align:start;padding-inline-end:var(--ab-s3);}
  /* The rule is continuous across the strip because each cell draws its own
     segment edge to edge. */
  .ab-t::before{inset-inline:0;}
  .ab-time::-webkit-scrollbar{height:2px;}
  .ab-time::-webkit-scrollbar-thumb{background:var(--line);}
}

/* ══ 03 · MILO ════════════════════════════════════════
   A core with four layers around it. The canvas draws the streams BETWEEN
   them; the layers themselves are real elements with real text, so the section
   is complete before the canvas paints a single pixel. */
.ab-milo{
  background:
    radial-gradient(90% 70% at 50% 40%,rgba(127,180,212,.07),transparent 62%);
}
.ab-core{
  position:relative;margin-top:var(--ab-s4);
  min-height:clamp(420px,52vw,620px);
  display:grid;place-items:center;
}
.ab-core canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.ab-core-mid{
  position:relative;z-index:2;display:grid;place-items:center;gap:4px;
  width:clamp(130px,17vw,186px);aspect-ratio:1/1;border-radius:50%;
  background:
    radial-gradient(circle at 50% 38%,rgba(232,182,71,.20),rgba(10,12,16,.92) 68%),
    var(--bg-1);
  border:1px solid rgba(232,182,71,.30);
  box-shadow:0 0 60px -12px rgba(232,182,71,.35),inset 0 1px 0 rgba(255,255,255,.07);
}
.ab-core-mid b{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(17px,2.2vw,25px);letter-spacing:.02em;color:var(--gold-lt);
}
.ab-core-sub{
  font-family:var(--f-mono);font-size:8.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-3);
}
/* One ring, turning slowly. It is the only moving thing in the middle. */
.ab-core-ring{
  position:absolute;inset:-13px;border-radius:50%;
  border:1px dashed rgba(232,182,71,.26);
  animation:abSpin 34s linear infinite;
}
@keyframes abSpin{to{transform:rotate(360deg);}}

.ab-layer{
  position:relative;z-index:2;
  background:rgba(17,21,28,.86);
  border:1px solid var(--line);border-radius:var(--r3);
  padding:13px 15px;max-width:250px;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.ab-layer:hover{border-color:rgba(232,182,71,.4);transform:translateY(-3px);}
.ab-layer-k{
  display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:6px;
}
.ab-layer p{font-size:12.5px;line-height:1.6;color:var(--fg-3);}

/* Stacked under the core on a narrow screen, placed around it on a wide one. */
.ab-core{grid-template-columns:1fr;gap:var(--ab-s2);}
.ab-core .ab-core-mid{order:-1;margin-bottom:var(--ab-s2);}
@media(min-width:900px){
  .ab-core{
    grid-template-columns:1fr auto 1fr;
    grid-template-rows:1fr 1fr;
    gap:var(--ab-s3) var(--ab-s4);
    align-items:center;
  }
  .ab-core .ab-core-mid{order:0;grid-column:2;grid-row:1 / span 2;margin:0;}
  .ab-layer.l1{grid-column:1;grid-row:1;justify-self:end;}
  .ab-layer.l2{grid-column:3;grid-row:1;justify-self:start;}
  .ab-layer.l3{grid-column:1;grid-row:2;justify-self:end;}
  .ab-layer.l4{grid-column:3;grid-row:2;justify-self:start;}
}

.ab-milo-say{
  max-width:66ch;margin:var(--ab-s4) auto 0;text-align:center;
}
.ab-milo-say p{font-size:15.5px;line-height:1.78;color:var(--fg-3);}
.ab-milo-line{margin-top:var(--ab-s2);font-size:17px !important;color:var(--fg-2) !important;}
.ab-milo-line em{font-style:normal;color:var(--fg);display:block;margin-top:6px;}

/* ══ 03b · THE MILO STORY ═════════════════════════════
   The copy for this section was written with a deliberate rhythm — one- and
   two-word sentences stacked, a pivot, then two rejection/claim pairs — and
   most of what follows exists to keep that rhythm visible. Set as ordinary
   paragraphs the whole thing flattens into a press release.

   EVERY BEAT IS ONE COLUMN, CENTRED, AT A READING MEASURE. A story is read in
   a line, not scanned in a grid, so nothing here is two columns. The width is
   held near 60 characters and the spacing between beats does the pacing. */
.ab-m-ask,.ab-m-beat,.ab-m-close{
  max-width:64ch;margin-inline:auto;
  margin-block:var(--ab-s4);
}
.ab-m-intro{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:var(--ab-s2);
}
/* The opening question. A quotation because it IS one — the question the
   company was started to answer. The rule beside it is the only quotation mark
   this page uses; a glyph would have been decoration. */
.ab-m-q{
  margin:0;padding-inline-start:clamp(18px,2.6vw,34px);
  border-inline-start:2px solid var(--gold);
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(21px,2.9vw,36px);line-height:1.34;letter-spacing:-.018em;
  color:var(--fg);text-wrap:balance;
}

.ab-m-lead{
  font-size:clamp(17px,1.9vw,23px);line-height:1.56;color:var(--fg);
  margin-bottom:var(--ab-s2);
}
.ab-m-lead em{font-style:normal;color:var(--gold);}
.ab-m-body{font-size:15.5px;line-height:1.8;color:var(--fg-3);}
.ab-m-body.center{text-align:center;}
.ab-m-body + .ab-m-claim{margin-top:var(--ab-s3);}

/* ── THE STACCATO LIST ──
   "Mathematical models. Algorithms. Probability. Behavioral patterns." Four
   sentences, each on its own line, each with its own rule. The rules are what
   make it read as an inventory of parts rather than as a sentence someone
   broke up for effect. */
.ab-m-list{list-style:none;margin:0 0 var(--ab-s3);padding:0;display:grid;}
.ab-m-list li{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(18px,2.3vw,28px);line-height:1.2;letter-spacing:-.016em;
  color:var(--fg-2);
  padding-block:14px;border-bottom:1px solid var(--line-2);
}
.ab-m-list li:first-child{border-top:1px solid var(--line-2);}

/* ── THE THREE STEPS ──
   Identical in shape, escalating in meaning. The counter is drawn rather than
   left to the list marker, because `display:grid` does not remove one and a
   browser's own numeral would sit in the gutter at the wrong size. */
.ab-m-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:mstep;}
.ab-m-steps li{
  counter-increment:mstep;position:relative;
  padding:16px 0 16px clamp(38px,4.4vw,58px);
  border-top:1px solid var(--line-2);
  font-size:clamp(16px,1.9vw,22px);line-height:1.3;color:var(--fg-3);
}
.ab-m-steps li:last-child{border-bottom:1px solid var(--line-2);}
.ab-m-steps li::before{
  content:counter(mstep,decimal-leading-zero);
  position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--gold-dk);
}
.ab-m-steps span{color:var(--fg);font-weight:600;}

/* ── THE PIVOT ──
   The one framed object on the page. Everything above it is engineering and
   everything below it is consequence, so it is given an edge, a warmer ground
   and more air than anything around it. */
.ab-m-pivot{
  position:relative;max-width:72ch;margin:var(--ab-s5) auto;
  padding:clamp(28px,4vw,54px) clamp(22px,4vw,58px);
  border:1px solid rgba(232,182,71,.26);border-radius:calc(var(--r3) + 4px);
  background:
    radial-gradient(120% 100% at 50% 0%,rgba(232,182,71,.10),transparent 62%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
  box-shadow:0 40px 90px -50px rgba(232,182,71,.4);
  text-align:center;
}
.ab-m-pivot-k{
  display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--ab-s2);
}
.ab-m-pivot-t{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(24px,3.6vw,46px);line-height:1.14;letter-spacing:-.026em;
  color:var(--fg);text-wrap:balance;margin-bottom:var(--ab-s2);
}
.ab-m-pivot-b{
  font-size:15px;line-height:1.78;color:var(--fg-3);
  max-width:56ch;margin-inline:auto;
}
.ab-m-pivot-b.dim{color:var(--fg-3);opacity:.72;margin-top:14px;}
/* The line the whole section turns on. */
.ab-m-pivot-say{
  margin-top:var(--ab-s3);padding-top:var(--ab-s2);
  border-top:1px solid rgba(232,182,71,.2);
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(17px,2.1vw,26px);line-height:1.34;letter-spacing:-.016em;
  color:var(--gold-lt);text-wrap:balance;
}

/* A claim set apart from the paragraph that earned it. */
.ab-m-claim{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(18px,2.3vw,28px);line-height:1.36;letter-spacing:-.018em;
  color:var(--fg-3);text-wrap:balance;
}
.ab-m-claim em{font-style:normal;color:var(--fg);}

/* ── THE PAIRS ──
   A rejection and a claim. The rejection is dimmed and carries a rule THROUGH
   it rather than a line-through on the text — a strikethrough would say the
   sentence is wrong, and it is not wrong, it is simply not what we are. The
   claim sits under it in full contrast. */
.ab-m-pairs{display:grid;gap:var(--ab-s3);margin-top:var(--ab-s4);}
.ab-m-pair{display:grid;gap:10px;}
.ab-m-no{
  position:relative;font-size:15.5px;line-height:1.5;color:var(--fg-3);
  opacity:.6;padding-inline-start:22px;
}
.ab-m-no::before{
  content:'';position:absolute;inset-inline-start:0;top:.62em;
  width:12px;height:1px;background:var(--fg-3);
}
.ab-m-yes{
  position:relative;padding-inline-start:22px;
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(18px,2.2vw,27px);line-height:1.3;letter-spacing:-.018em;
  color:var(--fg);text-wrap:balance;
}
.ab-m-yes::before{
  content:'';position:absolute;inset-inline-start:0;top:.56em;
  width:12px;height:2px;background:var(--gold);
}

/* ── THE CLOSE ── */
.ab-m-close{text-align:center;margin-top:var(--ab-s5);}
.ab-m-you{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(30px,5.4vw,68px);line-height:1.06;letter-spacing:-.032em;
  margin-top:var(--ab-s2);
  background:linear-gradient(180deg,var(--gold-lt),var(--gold-dp));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
/* The signature. Spaced wide because it is a mark, not a sentence. */
.ab-m-tag{
  margin-top:var(--ab-s4);padding-top:var(--ab-s3);
  border-top:1px solid var(--line-2);
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(17px,2.4vw,30px);letter-spacing:.01em;
  color:var(--fg-3);
}
.ab-m-tag em{font-style:normal;color:var(--fg);}

/* ══ 04 · HOW WE THINK ════════════════════════════════
   Four principles, given the room of an editorial spread. The number is a
   structural device and it is honest here: these ARE ordered, most fundamental
   first. */
.ab-principles{display:grid;gap:0;}
.ab-pr{
  position:relative;padding-block:var(--ab-s3);
  border-top:1px solid var(--line-2);
  display:grid;gap:10px;
}
.ab-pr:last-child{border-bottom:1px solid var(--line-2);}
.ab-pr-n{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;
  color:var(--gold-dk);
}
.ab-pr h3{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(21px,2.7vw,34px);line-height:1.14;letter-spacing:-.02em;
  color:var(--fg);text-wrap:balance;
}
.ab-pr p{font-size:15px;line-height:1.72;color:var(--fg-3);max-width:56ch;}
@media(min-width:820px){
  .ab-pr{grid-template-columns:64px 1.1fr 1fr;gap:var(--ab-s2);align-items:start;}
  .ab-pr p{margin-top:5px;}
}

/* ══ 05 · THE STACK ═══════════════════════════════════
   Drawn bottom to top, because that is the direction the data travels. Each
   layer is inset a little more than the one under it, so the whole reads as a
   structure standing rather than as six bars in a list. */
.ab-stack{display:grid;gap:9px;max-width:820px;margin-inline:auto;}
.ab-sl{
  position:relative;display:grid;
  grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;
  padding:16px clamp(16px,2.4vw,26px);
  border:1px solid var(--line);border-radius:var(--r3);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-0));
  transition:border-color .45s var(--ease),background .45s var(--ease),
             box-shadow .45s var(--ease);
}
.ab-sl-i{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--fg-3);grid-row:1 / span 2;
}
.ab-sl b{
  font-family:var(--f-display);font-weight:700;font-size:clamp(15px,1.8vw,20px);
  letter-spacing:-.012em;color:var(--fg);
}
.ab-sl-d{font-size:12.5px;color:var(--fg-3);}
/* The inset. `s1` is the widest because it is the foundation. */
.ab-sl.s1{margin-inline:0;}
.ab-sl.s2{margin-inline:clamp(0px,1.4vw,16px);}
.ab-sl.s3{margin-inline:clamp(0px,2.8vw,32px);}
.ab-sl.s4{margin-inline:clamp(0px,4.2vw,48px);}
.ab-sl.s5{margin-inline:clamp(0px,5.6vw,64px);}
.ab-sl.s6{margin-inline:clamp(0px,7vw,80px);}
/* Lit as the reader arrives. The class is added by `about.js`; without it the
   layer is still perfectly readable, just unlit. */
.ab-sl.lit{
  border-color:rgba(232,182,71,.34);
  background:linear-gradient(180deg,rgba(232,182,71,.07),var(--bg-0));
  box-shadow:0 0 40px -18px rgba(232,182,71,.5);
}
.ab-sl.lit b{color:var(--gold-lt);}
/* Milo is the layer the page is about, so it stays lit. */
.ab-sl.s5{border-color:rgba(232,182,71,.22);}

/* ══ 06 · THE FUTURE ══════════════════════════════════ */
.ab-future{
  position:relative;overflow:hidden;
  min-height:clamp(520px,68vh,760px);
  display:grid;place-items:center;text-align:center;
}
.ab-net{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.ab-future-in{position:relative;z-index:1;}
.ab-future .ab-lead{margin-inline:auto;}
.ab-future::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 52% at 50% 50%,rgba(10,12,16,.86),transparent 72%);
}

/* ══ 07 · FINAL ═══════════════════════════════════════ */
.ab-end{text-align:center;padding-block:var(--ab-s5);}
.ab-end-say{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(24px,4vw,50px);line-height:1.16;letter-spacing:-.026em;
  color:var(--fg);max-width:22ch;margin-inline:auto;text-wrap:balance;
}
.ab-end-mark{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(44px,10vw,140px);line-height:1;letter-spacing:.06em;
  margin:var(--ab-s3) 0 var(--ab-s4);
  /* The one place on the page the wordmark is set large. `background-clip` and
     `-webkit-text-stroke` disagree about the background on the same element, so
     this uses the clip alone. */
  background:linear-gradient(180deg,var(--gold-lt),var(--gold-dp));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.ab-end .ld-cta-row{justify-content:center;}

/* ══ MOTION OFF ═══════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .ab-core-ring{animation:none;}
  .ab-layer:hover{transform:none;}
  .ab-sl{transition:none;}
  .ab-scroll i{background:var(--gold-dk);}
}
body.no-motion .ab-core-ring{animation:none;}