/* =============================================================
   About: company page
   A timeline from the first PSCAD courses to today, three reasons we
   started, how we work, the company details. The second half is paper.
   ============================================================= */
.ab-page { --ab-g: #5dd2a6; --ab-b: #8ec5ff; }
.ab-h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; max-width: 15em; }
.ab-h2 em { font-style: normal; color: var(--copper-hi); }
.ab-c-head { text-align: center; }
.ab-c-head .section-label { justify-content: center; }
.ab-c-head .ab-h2 { margin: 0 auto; }

/* ---------- Hero + timeline ---------- */
.ab-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 5vw, 64px) 0 clamp(64px, 8vw, 110px);
  background: radial-gradient(70% 60% at 50% 0%, rgba(201,123,61,0.10), transparent 60%), var(--ink); border-bottom: 1px solid var(--line); }
.ab-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: calc(100% / 12) 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.ab-hc { text-align: center; max-width: 1000px; margin: clamp(30px, 4vw, 56px) auto 0; }
.ab-hc .section-label { justify-content: center; }
.ab-hc h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(36px, 4.8vw, 68px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.ab-hc h1 em { font-style: normal; color: var(--copper-hi); }
.ab-sub { margin: 22px auto 0; max-width: 33em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text-mute); }

.ab-tl { list-style: none; position: relative; margin-top: clamp(56px, 7vw, 90px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.ab-tl::before, .ab-tl::after { content: ''; position: absolute; top: 58px; left: 0; right: 0; height: 2px; border-radius: 2px; }
.ab-tl::before { background: rgba(255,255,255,0.1); }
.ab-tl::after { background: linear-gradient(90deg, var(--copper), var(--copper-hi) 60%, var(--ab-g)); transform-origin: left; }
html[dir="rtl"] .ab-tl::after { transform-origin: right; background: linear-gradient(270deg, var(--copper), var(--copper-hi) 60%, var(--ab-g)); }
.ab-tl.reveal:not(.in)::after { transform: scaleX(0); }
.ab-tl.reveal.in::after { animation: abFill 1.8s var(--ease) .2s both; }
.ab-tl li { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ab-tl .yr { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.2vw, 46px); line-height: 1; letter-spacing: -0.03em; color: var(--text); height: 46px; }
.ab-tl li:last-child .yr { color: var(--ab-g); }
.ab-tl .dot { position: relative; z-index: 1; width: 16px; height: 16px; margin: 4px 0 8px; border-radius: 50%; background: var(--ink); border: 2px solid var(--copper-hi); }
.ab-tl li:last-child .dot { border-color: var(--ab-g); box-shadow: 0 0 0 0 rgba(93,210,166,0.5); animation: abPulse 2.4s ease-out infinite; }
.ab-tl .card { flex: 1; display: flex; flex-direction: column; gap: 10px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 18px; }
.ab-tl .card svg { width: 40px; height: 40px; padding: 8px; border-radius: 10px; color: var(--copper-hi); background: rgba(201,123,61,0.12); }
.ab-tl li:last-child .card svg { color: var(--ab-g); background: rgba(93,210,166,0.12); }
.ab-tl .tl-h { font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.ab-tl p:not(.tl-h) { font-size: 14.5px; line-height: 1.5; color: var(--text-mute); }
.ab-tl.reveal:not(.in) li { opacity: 0; transform: translateY(10px); }
.ab-tl.reveal.in li { animation: abIn .6s var(--ease-out) both; animation-delay: calc(0.3s + var(--i) * 0.28s); }

/* ---------- Why we started ---------- */
.ab-why { padding: clamp(80px, 10vw, 130px) 0; background: var(--ink); }
.ab-why-g { list-style: none; margin-top: clamp(40px, 5vw, 60px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.ab-why-g li { border-top: 1px solid rgba(255,255,255,0.14); padding-top: 22px; }
.ab-why-g b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; color: var(--copper-hi); margin-bottom: 14px; }
.ab-why-g p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--text); }
.ab-why-g p span { color: var(--text-mute); }

/* ---------- Paper: how we work, company details, call ---------- */
.ab-close .cta-c { background: transparent; border-top: 1px solid var(--tp-line); padding: clamp(70px, 8vw, 110px) 0; }
.ab-work { padding: clamp(80px, 10vw, 130px) 0 clamp(60px, 8vw, 100px); }
.ab-work .ab-h2, .ab-facts-s .ab-h2 { color: var(--tp-ink); }
.ab-work .ab-h2 em, .ab-facts-s .ab-h2 em { color: var(--tp-acc); }
.ab-pr { margin-top: clamp(40px, 5vw, 60px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ab-pr > div { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 20px; align-items: start; background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 16px; padding: clamp(20px, 2.4vw, 30px); }
.ab-pr .n { grid-row: 1 / 3; font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 4vw, 56px); line-height: 0.9; letter-spacing: -0.04em; color: var(--tp-acc); opacity: 0.85; }
.ab-pr h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.2; color: var(--tp-ink); }
.ab-pr p { font-size: 15.5px; line-height: 1.55; color: var(--tp-mute); }
.ab-facts-s { padding: clamp(40px, 5vw, 70px) 0 clamp(70px, 8vw, 110px); }
.ab-facts { margin-top: clamp(30px, 4vw, 48px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--tp-line); }
.ab-facts > div { padding: 22px 20px 4px 0; border-inline-end: 1px solid var(--tp-line); padding-inline-start: 20px; }
.ab-facts > div:first-child { padding-inline-start: 0; }
.ab-facts > div:last-child { border-inline-end: 0; }
.ab-facts dt { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tp-acc); margin-bottom: 10px; }
.ab-facts dd { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 1.35; color: var(--tp-ink); }
.ab-note { margin: 18px auto 0; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--tp-mute); }

@keyframes abFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes abIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes abPulse { 0% { box-shadow: 0 0 0 0 rgba(93,210,166,0.5); } 70% { box-shadow: 0 0 0 10px rgba(93,210,166,0); } 100% { box-shadow: 0 0 0 0 rgba(93,210,166,0); } }
@media (prefers-reduced-motion: reduce) { .ab-tl li:last-child .dot { animation: none; } }

/* ---------- Arabic ---------- */
html[dir="rtl"] :is(.ab-why-g b, .ab-facts dt) { letter-spacing: 0; font-size: 12.5px; }
html[dir="rtl"] .ab-hc h1 { line-height: 1.3; }
html[dir="rtl"] .ab-h2 { line-height: 1.35; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .ab-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  .ab-tl::before, .ab-tl::after { display: none; }
  .ab-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-facts > div:nth-child(2) { border-inline-end: 0; }
  .ab-facts > div:nth-child(3) { padding-inline-start: 0; }
  .ab-facts > div:nth-child(n+3) { border-top: 1px solid var(--tp-line); }
}
@media (max-width: 760px) {
  .ab-why-g, .ab-pr { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ab-tl { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .ab-tl li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 0 14px; }
  .ab-tl .yr { font-size: 26px; height: auto; grid-column: 1; grid-row: 1; padding-top: 16px; }
  .ab-tl .dot { display: none; }
  .ab-tl .card { grid-column: 2; grid-row: 1; padding: 14px; }
  .ab-facts { grid-template-columns: minmax(0, 1fr); }
  .ab-facts > div { border-inline-end: 0; padding-inline-start: 0; border-top: 1px solid var(--tp-line); }
  .ab-facts > div:first-child { border-top: 0; }
}