/* =====================================================================
   Codeator — About page (/ar/about/ and /about/). Prefix: .abt-
   Logical properties only, so the English twin reuses this file as is.
   ===================================================================== */

/* ---------- hero art: 2009 → 2026, loose blocks assemble into the mark ---------- */
.abt-hero-svg { aspect-ratio: 500 / 420; }
.abt-hero-svg .f-top { fill: #fbfcff; }
.abt-hero-svg .f-left { fill: #d3dbf0; }
.abt-hero-svg .f-right { fill: #a9b7df; }
.abt-hero-svg .a-blk {
  transform-box: view-box; transform-origin: 0 0;
  transition: transform 1.5s var(--ease); transition-delay: var(--dl, 0ms);
}
.abt-hero-svg .a-lift { transition: transform .45s var(--ease); }
.abt-hero-svg.is-built .a-blk:hover .a-lift { transform: translateY(-10px); }
.abt-hero-svg .a-ghost { animation: bob-s var(--bt, 5s) ease-in-out infinite alternate; }
.abt-hero-svg .a-ghost polygon {
  fill: rgba(201,211,242,.05); stroke: rgba(201,211,242,.5); stroke-width: 1.4; stroke-linejoin: round;
  stroke-dasharray: 3 3; vector-effect: non-scaling-stroke;
}
.abt-hero-svg .a-trail {
  fill: none; stroke: rgba(247,226,173,.3); stroke-width: 1.2; stroke-linecap: round;
  stroke-dasharray: 2 9; animation: flow-orbit 7s linear infinite;
}
.abt-hero-svg .a-shadow { fill: rgba(4,9,36,.34); opacity: 0; transition: opacity 1s ease 1.2s; }
.abt-hero-svg.is-built .a-shadow { opacity: 1; }
.abt-hero-svg .a-base { fill: none; stroke: rgba(201,211,242,.32); stroke-width: 1.5; }
.abt-hero-svg .a-flow {
  fill: none; stroke: var(--gold-soft); stroke-opacity: .85; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 2 9; animation: flow-orbit 5s linear infinite;
}
.abt-hero-svg .a-tick { stroke: rgba(201,211,242,.45); stroke-width: 1.2; }
.abt-hero-svg .a-plumb { fill: none; stroke: rgba(247,226,173,.55); stroke-width: 1.2; stroke-dasharray: 3 4; }
.abt-hero-svg .a-node { fill: var(--gold); }
.abt-hero-svg text { font-family: var(--f-ui); text-anchor: middle; }
.abt-hero-svg .a-year { font-size: 27px; font-weight: 700; fill: #fff; }
.abt-hero-svg .a-cap { font-size: 15.5px; font-weight: 400; fill: #c9d3f2; }
.abt-hero-svg .a-rings circle { fill: none; stroke: var(--lapis-400); stroke-width: .11; stroke-linecap: round; }
.abt-hero-svg .a-rings .ring-c { stroke-dasharray: 76 24; animation: draw-c 1.4s var(--ease) 2.5s both; }
.abt-hero-svg .a-rings .ring-o { stroke-dasharray: 100 0; animation: draw-o 1.4s var(--ease) 2.75s both; }

/* ---------- story ---------- */
.abt-gap { margin-top: 16px; }
.abt-chron { list-style: none; position: relative; display: grid; gap: clamp(28px, 3.4vw, 44px); padding-inline-start: 40px; }
.abt-chron::before {
  content: ""; position: absolute; inset-block: 14px 30px; inset-inline-start: 8px; width: 2px;
  background: repeating-linear-gradient(to bottom, var(--lapis-300) 0 8px, transparent 8px 14px);
}
.abt-chron li { position: relative; }
.abt-chron li::before {
  content: ""; position: absolute; top: 12px; inset-inline-start: -38px; width: 14px; height: 14px;
  background: var(--lapis-500); transform: rotate(45deg); box-shadow: 0 0 0 5px var(--stone);
  transition: background-color .3s, transform .5s var(--ease);
}
.abt-chron li.now::before { background: var(--gold); }
.abt-chron li:hover::before { transform: rotate(225deg) scale(1.15); }
.abt-story.in-view .abt-chron li::before { animation: abt-stamp .7s var(--ease) both; animation-delay: calc(var(--i) * 260ms + 200ms); }
.abt-chron-year { display: block; font-family: var(--f-ui); font-weight: 700; font-size: clamp(34px, 3.4vw, 46px); line-height: 1.1; color: var(--lapis-900); }
.abt-chron li.now .abt-chron-year { color: var(--gold-deep); }
.abt-chron h3 { font-size: 21px; color: var(--lapis-700); margin-block: 8px 2px; }
.abt-chron p { font-size: 17px; line-height: 1.8; color: var(--ink-2); max-width: 26em; }

/* ---------- logo story: the 2009 original beside the redrawn mark ---------- */
.abt-pair { display: grid; grid-template-columns: minmax(0, 1fr) clamp(54px, 7vw, 96px) minmax(0, 1fr); align-items: start; }
.abt-fig { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.abt-fig img, .abt-mark-tile {
  display: block; width: 100%; height: auto; aspect-ratio: 384 / 367; border-radius: 10px;
  box-shadow: 0 22px 34px -18px rgba(14,27,82,.6);
  transition: transform .6s var(--ease);
}
.abt-fig-old img { object-fit: cover; transform: rotate(-3deg); }
.abt-fig-old:hover img { transform: rotate(0) scale(1.02); }
.abt-mark-tile {
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(to bottom, transparent 0 28px, rgba(9,18,58,.5) 28px 30px),
    linear-gradient(160deg, var(--lapis-700), var(--lapis-950));
  --mk-top: #ffffff; --mk-left: #d3dbf0; --mk-right: #a9b7df; --mk-ring: var(--lapis-400);
}
.abt-mark-tile svg { width: 74%; height: auto; display: block; filter: drop-shadow(0 16px 18px rgba(0,0,0,.35)); }
.abt-logo.in-view .abt-mark-tile svg { animation: pop 1s var(--ease) .5s both; }
.abt-fig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-family: var(--f-ui); font-size: 15.5px; color: var(--ink-2); line-height: 1.5; }
.abt-fig figcaption b { font-weight: 700; font-size: 26px; color: var(--lapis-900); line-height: 1; }
.abt-pair-link { position: relative; align-self: stretch; }
.abt-pair-link::before {
  content: ""; position: absolute; inset-inline: 6px; top: calc((100% - 58px) / 2); height: 2px;
  background: repeating-linear-gradient(to right, var(--lapis-300) 0 8px, transparent 8px 14px);
}
.abt-pair-link span {
  position: absolute; top: calc((100% - 58px) / 2); left: 50%; transform: translate(-50%, -50%);
  padding: 3px 10px; border-radius: 3px; white-space: nowrap;
  background: var(--paper); font-family: var(--f-ui); font-size: 14px; line-height: 1.6; color: var(--lapis-700);
  box-shadow: inset 0 0 0 1px var(--line);
}
.abt-kept-title { font-size: var(--t-lg); color: var(--lapis-900); margin-top: clamp(48px, 6vw, 80px); }
.abt-kept { margin-top: 20px; }
/* pointing at what stayed lights it up in the redrawn mark */
.abt-logo:has(.abt-kept > div:nth-child(1):hover) .abt-mark-tile { --mk-top: #fff6dc; --mk-left: var(--gold-soft); --mk-right: var(--gold); }
.abt-logo:has(.abt-kept > div:nth-child(2):hover) .abt-mark-tile { --mk-ring: var(--gold); }
.abt-logo:has(.abt-kept > div:nth-child(3):hover) .abt-mark-tile { --mk-top: #fff6dc; --mk-left: var(--gold-soft); --mk-right: var(--gold); --mk-ring: #ffffff; }

/* ---------- why holding companies ---------- */
.abt-why-caps { margin-top: 0; }
.abt-why-close {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px;
  margin-top: clamp(36px, 4.5vw, 60px); padding-top: clamp(28px, 3.5vw, 44px); border-top: 2px solid var(--lapis-300);
}

/* ---------- how we work: commitments on the glazed wall ---------- */
.abt-principles::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(9,18,58,.62); }
.abt-pledges { list-style: none; counter-reset: pl; border-top: 1px solid rgba(201,211,242,.24); }
.abt-pledges li {
  counter-increment: pl; position: relative;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.3fr); gap: 6px clamp(20px, 3vw, 48px); align-items: baseline;
  padding-block: 26px; border-bottom: 1px solid rgba(201,211,242,.24);
}
.abt-pledges li::before {
  content: counter(pl); font-family: var(--f-ui); font-weight: 300; font-size: 44px; line-height: 1; color: var(--gold-soft);
  transition: color .3s, transform .45s var(--ease);
}
.abt-pledges li::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; height: 2px; width: 0; background: var(--gold);
  transition: width .6s var(--ease);
}
.abt-pledges li:hover::before { color: var(--gold); transform: translateY(-3px); }
.abt-pledges li:hover::after { width: 100%; }
.abt-pledges h3 { font-size: clamp(20px, 1.9vw, 24px); color: #fff; line-height: 1.5; }
.abt-pledges p { font-size: 17.5px; line-height: 1.85; color: #d5dcf5; }

/* ---------- network ---------- */
.abt-sub { font-size: var(--t-lg); color: var(--lapis-900); margin-top: 34px; }
.abt-network .rings-list { margin-top: 18px; }
.abt-out { margin-top: 28px; font-family: var(--f-ui); font-weight: 500; font-size: 16px; }
.abt-out a { display: inline-flex; gap: .5em; align-items: center; text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: 2px; }
.abt-out a span { transition: transform .3s var(--ease); }
[dir="rtl"] .abt-out a:hover span { transform: translateX(-4px); }
[dir="ltr"] .abt-out a:hover span { transform: translateX(4px); }
.abt-net { display: flex; flex-direction: column; gap: 14px; }
.abt-net figcaption { font-size: 15.5px; line-height: 1.8; color: var(--ink-3); max-width: 32em; padding-inline-start: 16px; border-inline-start: 2px solid var(--gold); }
.abt-net-svg { display: block; width: 100%; height: auto; aspect-ratio: 540 / 430; overflow: visible; }
.abt-net-svg polygon { stroke: rgba(14,27,82,.16); stroke-width: .8; stroke-linejoin: round; }
.abt-net-svg .f-top { fill: #e6ecf8; }
.abt-net-svg .f-left { fill: #c5d1e8; }
.abt-net-svg .f-right { fill: #a6b6d8; }
.abt-net-svg .me .f-top { fill: #ffffff; }
.abt-net-svg .me .f-left { fill: #d3dbf0; }
.abt-net-svg .me .f-right { fill: #a9b7df; }
.abt-net-svg .n-lift { transition: transform .45s var(--ease); }
.abt-net-svg .n-node:hover .n-lift { transform: translateY(-8px); }
.abt-net-svg .n-bob { animation: bob-s var(--bt, 5s) ease-in-out infinite alternate; }
.abt-net-svg .me .n-bob { animation: none; }
.abt-net-svg .n-rings circle { fill: none; stroke: var(--lapis-500); stroke-width: .12; stroke-linecap: round; }
.abt-net-svg .n-rings .ring-c { stroke-dasharray: 76 24; }
.abt-net-svg .n-link { fill: none; stroke: var(--lapis-300); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 8; animation: flow-orbit 9s linear infinite; }
.abt-net-svg .n-link.chord { stroke-opacity: .6; stroke-width: 1.5; }
.abt-net-svg .n-chain circle { fill: none; stroke-width: 3.2; }
.abt-net-svg .n-chain .gold { stroke: var(--gold); }
.abt-net-svg .n-chain .lapis { stroke: var(--lapis-500); }
.abt-net-svg .n-chain { transform-box: fill-box; transform-origin: center; animation: abt-breathe 4.2s ease-in-out infinite alternate; }
.abt-net-svg .n-mover { fill: var(--gold-deep); }
.abt-net-svg .n-shadow { fill: rgba(14,27,82,.09); }
.abt-net-svg .n-halo-fill { fill: rgba(227,168,43,.16); stroke: var(--gold); stroke-width: 1.6; }
.abt-net-svg .n-halo { fill: none; stroke: var(--gold); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; animation: halo 3.2s ease-out infinite; }
.abt-net-svg text { font-family: var(--f-ui); text-anchor: middle; }
.abt-net-svg .n-name { font-size: 23px; font-weight: 700; fill: var(--lapis-900); }
.abt-net-svg .n-place { font-size: 16px; font-weight: 400; fill: var(--ink-2); }

/* ---------- heritage ---------- */
.abt-heritage-grid { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.abt-heritage h2 { font-size: var(--t-xl); margin-bottom: 18px; }
.abt-heritage .body-lg { max-width: 40em; }
.abt-tablet .tablet-svg { transition: transform .6s var(--ease); transform: rotate(-2deg); }
.abt-tablet:hover .tablet-svg { transform: rotate(0); }
.abt-heritage.in-view .tablet-svg .mark { animation: press .5s var(--ease) both; animation-delay: calc(var(--k) * 45ms + 300ms); }

@keyframes abt-stamp { 0% { transform: rotate(45deg) scale(2.2); opacity: .2; } 100% { transform: rotate(45deg) scale(1); opacity: 1; } }
@keyframes abt-breathe { from { transform: scale(.92); } to { transform: scale(1.08); } }

/* ---------- responsive ---------- */
@media (min-width: 921px) {
  .abt-logo .split-visual { order: -1; }
}
@media (max-width: 920px) {
  .abt-hero-svg .a-year { font-size: 31px; }
  .abt-hero-svg .a-cap { font-size: 18.5px; }
  .abt-net-svg .n-name { font-size: 27px; }
  .abt-net-svg .n-place { font-size: 19px; }
  .abt-pledges li { grid-template-columns: 52px minmax(0, 1fr); }
  .abt-pledges li::before { grid-row: span 2; font-size: 38px; }
  .abt-pledges p { grid-column: 2; }
  .abt-net-svg { max-width: 560px; margin-inline: auto; }
  .abt-pair { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .abt-heritage-grid { grid-template-columns: minmax(0, 1fr); }
  .abt-tablet .tablet-svg { max-width: 240px; }
  .abt-pair { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); }
  .abt-pair-link span { font-size: 12px; padding: 2px 6px; }
  .abt-fig figcaption { font-size: 14px; }
  .abt-fig figcaption b { font-size: 22px; }
  .abt-pledges li { grid-template-columns: 40px minmax(0, 1fr); padding-block: 22px; }
  .abt-pledges li::before { font-size: 32px; }
  .abt-why-close .btn { white-space: normal; }
}