/* About page (/about). Layout follows the Qubesys About page Shakir chose; the words come from Framenox's own blog and pages.
   Motion only when the head script set html.ab-anim (reduced motion and no-JS see the finished page). */
html.subpage-html body.subpage-body { overflow-y: visible !important; overflow-x: clip !important; }

.ab-hero { padding-bottom: clamp(28px, 4vh, 56px); }
.ab-pill { display: inline-block; font-size: .85rem; font-weight: 500; background: #fff; border: 1px solid #e3e3e3; color: #111; padding: 6px 14px; border-radius: 9999px; margin-bottom: 28px; }
.ab-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 48px; flex-wrap: wrap; }
.ab-title { margin: 0; font-family: 'Outfit', 'Inter', sans-serif; font-weight: 800; letter-spacing: -.055em; line-height: .96; color: #000; font-size: clamp(3rem, 10vw, 9.4rem); }
.ab-lede { margin: 0; max-width: 28em; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.55; color: #666; }
.ab-ln { display: block; overflow: hidden; padding-bottom: .08em; }
.ab-ln > span { display: block; }

/* facts strip, endless and quiet */
.ab-strip { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow: hidden; margin-top: clamp(28px, 4vw, 56px); padding: clamp(12px, 1.4vw, 18px) 0; font-size: clamp(.9rem, 1.15vw, 1.05rem); color: #555; }
.ab-track { display: flex; width: max-content; animation: ab-marq 46s linear infinite; }
.ab-strip:hover .ab-track { animation-play-state: paused; }
.ab-set { display: flex; align-items: center; flex: none; white-space: nowrap; }
.ab-set span { padding: 0 clamp(14px, 1.6vw, 24px); }
.ab-set b { color: #000; font-weight: 600; }
.ab-set i { font-style: normal; color: #c4c4c4; }
@keyframes ab-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* the one big line (where a team photo would go later) */
.ab-quote { margin: clamp(56px, 9vw, 130px) 0 0; font-family: 'Outfit', 'Inter', sans-serif; font-weight: 800; letter-spacing: -.05em; line-height: 1; color: #000; font-size: clamp(2.4rem, 7.2vw, 7rem); max-width: 14ch; text-wrap: balance; }
.ab-quote .ab-w { display: inline-block; margin-right: .22em; }

.ab-sec { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: 12px; margin-top: clamp(64px, 9vw, 130px); align-items: start; }
.ab-sec .lb { font-size: .95rem; font-weight: 500; color: #000; }
.ab-sec .nn { text-align: right; font-size: .9rem; color: #999; }
.ab-sec h2 { margin: 14px 0 0; max-width: 20ch; font-family: 'Outfit', 'Inter', sans-serif; font-weight: 500; font-size: clamp(1.8rem, 4.2vw, 3.6rem); line-height: 1.08; letter-spacing: -.04em; color: #000; text-wrap: balance; }
.ab-sec p { margin: 16px 0 0; max-width: 46ch; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.55; color: #666; }

.ab-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin: clamp(22px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.ab-steps li { background: #f1f1f1; border-radius: clamp(16px, 2vw, 28px); padding: clamp(20px, 2.4vw, 34px); }
.ab-steps em { display: block; font-style: normal; font-size: .85rem; color: #999; }
.ab-steps h3 { margin: 10px 0 8px; font-family: 'Outfit', 'Inter', sans-serif; font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 700; letter-spacing: -.03em; color: #000; }
.ab-steps p { margin: 0; font-size: .98rem; line-height: 1.5; color: #666; }

.ab-rules { margin: clamp(22px, 3vw, 40px) 0 0; padding: 0; list-style: none; border-top: 1px solid #e6e6e6; }
.ab-rules li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px clamp(16px, 2.4vw, 40px); padding: clamp(18px, 2.2vw, 30px) 0; border-bottom: 1px solid #e6e6e6; align-items: baseline; }
.ab-rules em { font-style: normal; font-size: .9rem; color: #999; }
.ab-rules h3 { margin: 0; font-family: 'Outfit', 'Inter', sans-serif; font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 700; letter-spacing: -.035em; color: #000; }
.ab-rules p { margin: 0; font-size: 1rem; line-height: 1.5; color: #666; }

/* client grid */
.ab-clients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(6px, .8vw, 12px); background: #f1f1f1; border-radius: clamp(18px, 2.4vw, 34px); padding: clamp(6px, .8vw, 12px); margin: clamp(22px, 3vw, 40px) 0 0; list-style: none; }
.ab-clients li { display: flex; min-width: 0; }
.ab-cell { flex: 1; min-width: 0; position: relative; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; min-height: clamp(150px, 15vw, 230px); padding: clamp(12px, 1.4vw, 20px); background: #fff; border-radius: clamp(12px, 1.6vw, 24px); color: #777; font-size: .85rem; text-decoration: none; transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s ease; }
.ab-cell img { align-self: center; height: clamp(34px, 3.6vw, 54px); width: auto; max-width: 76%; object-fit: contain; }
.ab-cell .ab-see { font-size: .8rem; color: #000; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
.ab-cell .sp { height: 1.2em; }
a.ab-cell:hover, a.ab-cell:focus-visible { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0, 0, 0, .12); }
a.ab-cell:hover .ab-see, a.ab-cell:focus-visible .ab-see { opacity: 1; transform: none; }
.ab-cell:focus-visible { outline: 2px solid #2b6cff; outline-offset: 2px; }
.ab-cell.you { background: #000; color: #fff; align-content: center; text-align: center; font-weight: 600; font-size: clamp(.95rem, 1.3vw, 1.2rem); grid-template-rows: 1fr; align-items: center; }
.ab-cell.you:hover { transform: translateY(-5px); }

.ab-where { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 4vw, 60px); margin-top: clamp(56px, 8vw, 110px); }
.ab-where h3 { margin: 0 0 10px; font-family: 'Outfit', 'Inter', sans-serif; font-size: clamp(1.3rem, 2.2vw, 2rem); font-weight: 700; letter-spacing: -.03em; color: #000; }
.ab-where p { margin: 0; font-size: 1.02rem; line-height: 1.6; color: #555; }
.ab-where a { color: #000; text-underline-offset: 3px; }

.ab-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: clamp(28px, 3.6vw, 56px); margin: clamp(56px, 8vw, 110px) 0 clamp(72px, 10vw, 140px); background: #1b1b1b; color: #fff; border-radius: clamp(22px, 2.4vw, 36px); }
.ab-cta h2 { margin: 0 0 14px; font-family: 'Outfit', 'Inter', sans-serif; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-size: clamp(2.2rem, 4.6vw, 4.4rem); }
.ab-cta p { margin: 0; max-width: 44ch; color: #b8b8b8; font-size: 1.02rem; line-height: 1.55; }
.ab-cta a { display: inline-flex; align-items: center; gap: 10px; padding: 15px 30px; border-radius: 9999px; background: #fff; color: #000; font-weight: 600; font-size: 1rem; text-decoration: none; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.ab-cta a:hover { transform: translateY(-2px); }

/* motion */
@keyframes ab-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes ab-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ab-ink { from { color: #c8c8c8; } to { color: #000; } }
@keyframes ab-pop { 0% { opacity: 0; transform: translateY(14px) scale(.94); } 100% { opacity: 1; transform: none; } }
html.ab-anim .ab-ln > span { animation: ab-rise 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .1s; }
html.ab-anim .ab-lede { animation: ab-fade .8s ease both; animation-delay: .6s; }
html.ab-anim .ab-quote:not(.ab-on) .ab-w { color: #c8c8c8; }
html.ab-anim .ab-quote.ab-on .ab-w { animation: ab-ink .7s ease both; animation-delay: calc(var(--i) * 90ms); }
html.ab-anim .ab-clients:not(.ab-on) .ab-cell { opacity: 0; transform: translateY(14px) scale(.94); }
html.ab-anim .ab-clients.ab-on .ab-cell { animation: ab-pop .6s cubic-bezier(.34, 1.4, .64, 1) both; animation-delay: calc(var(--i) * 55ms); }

@media (max-width: 900px) {
  .ab-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ab-sec { grid-template-columns: minmax(0, 1fr); }
  .ab-sec .nn { display: none; }
  .ab-steps, .ab-where { grid-template-columns: minmax(0, 1fr); }
  .ab-rules li { grid-template-columns: minmax(0, 1fr); }
  .ab-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-title { font-size: clamp(3rem, 17vw, 5.4rem); }
  .ab-cta a { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-track { animation: none; }
  .ab-strip { overflow-x: auto; }
  .ab-cell { transition: none; }
}