/* Tech404 ABOUT page (about.html). Spec: Figma "Tech404 · 1.0 Chosen" / 05 · ABOUT
   desktop 707:38745 (1600, 1vw = 16px), tablet 711:59412 (1024), phone 711:60542 (390).
   Colours: #131313 page, #181818 cards, #242424 raised, #FAFAFA (+ opacities), #70E844. */

/* ---------- header: nav hover glow (Home does it with IX2) ---------- */
.ab-page .hs1c4 { transition: opacity .4s ease; }
.ab-page .hs1c3:hover .hs1c4 { opacity: 1; }

/* ---------- hero ---------- */
.ab-hero {
  height: auto;
  justify-content: flex-start;
  padding-bottom: 0;
}
.ab-hero-c {
  align-self: stretch;
  display: flex;
  justify-content: center;
  padding-top: 11.15vw;
}
.ab-h1 { white-space: nowrap; }
.ab-l { display: block; }
.ab-li {
  display: block;
  animation: ab-up 1.1s cubic-bezier(.25, .46, .45, .94) both;
}
.ab-l + .ab-l .ab-li { animation-delay: .14s; }
@keyframes ab-up {
  from { opacity: 0; transform: translate3d(0, 30%, 0); }
  to { opacity: 1; transform: none; }
}

/* marquee: Home's IX2 loop "a-11" = translateX 0 -> -50 %, 10 s, linear, infinite */
.ab-marquee {
  width: max-content;                      /* rows sized by their logos, so -50 % = one row: seamless at any width */
  margin-top: 9.85vw;
  flex: none;
  animation: ab-marquee 10s linear infinite;
}
.ab-marquee .hs2c1 {
  flex: none;
  width: auto;
  padding-right: 2.5vw;                    /* = the gap between logos */
}
@keyframes ab-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ---------- road ---------- */
.ab-roads { padding-top: 6vw; }           /* 96px under the marquee */
.ab-road {
  position: relative;
  width: 81.25vw;                          /* 1300 / 1600 */
  margin-left: 9.375vw;                    /* 150 / 1600 */
}
.ab-road .rd-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.ab-road--phone { display: none; }

.ab-st {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 35.385%;                          /* 460 / 1300 */
  transform: translateX(-50%);
}
.ab-story {
  margin: 0;
  color: #fafafa80;
  font-family: Poppins, sans-serif;
  font-size: 1.2vw;
  font-weight: 300;
  line-height: 1;
  text-align: center;
}
.ab-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* scroll-draw states (only once page-about.js has initialised the road) */
.rd-anim .rd-item {
  opacity: 0;
  transform: scale(.55);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .35s ease, transform .55s cubic-bezier(.34, 1.56, .64, 1);
}
.rd-anim .rd-item.is-on {
  opacity: 1;
  transform: none;
}
.rd-anim .rd-head,
.rd-anim .ab-st,
.rd-anim .ab-ms {
  opacity: 0;
  transition: opacity .8s cubic-bezier(.25, .46, .45, .94), transform .8s cubic-bezier(.25, .46, .45, .94);
}
.rd-anim .rd-head { transform: translateY(28px); }
.rd-anim .ab-st { transform: translate(-50%, 24px); }
.rd-anim .ab-ms { transform: translateY(24px); }
.rd-anim .rd-head.is-in,
.rd-anim .ab-ms.is-in { opacity: 1; transform: none; }
.rd-anim .ab-st.is-in { opacity: 1; transform: translateX(-50%); }

/* phone road (exported from Figma 711:60568) */
.rd-year {
  fill: #131313;
  font-family: Poppins, sans-serif;
  font-size: 13.8px;
  font-weight: 700;
}
.rd-sticker {
  fill: #131313;
  font-family: Badrock, Arial, sans-serif;
  font-size: 22.6px;
}
.ab-ms {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 55.9%;                            /* 218 / 390 */
}
.ab-ms-h {
  margin: 0;
  color: #fafafa;
  font-family: Badrock, Arial, sans-serif;
  font-size: 12.95vw;
  font-weight: 400;
  line-height: .84;
  text-transform: uppercase;
  white-space: nowrap;
}
.ab-ms .ab-story {
  width: 89%;                              /* 194 / 218 */
  margin-top: 2vw;
  font-size: 4.923vw;
  line-height: 1.2;
  text-align: left;
}

/* ---------- why it matters ---------- */
.ab-why {
  padding: 5.65vw 4vw 0;
}
.ab-why-h {
  margin: 0;
  color: #fafafa;
  font-family: Badrock, Arial, sans-serif;
  font-size: 6vw;
  font-weight: 400;
  line-height: .84;
  text-transform: uppercase;
}
.ab-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2vw;
  margin-top: 3.225vw;
}
.ab-card {
  min-height: 22.5vw;
  padding: 3.5vw;
  background-color: #181818;
  border-radius: 2vw;
}
.ab-card-k {
  color: #70e844;
  font-family: Poppins, sans-serif;
  font-size: .8vw;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.ab-card-t {
  max-width: 38vw;
  margin: 1.5vw 0 0;
  color: #fafafa;
  font-family: Poppins, sans-serif;
  font-size: 1.875vw;
  font-weight: 500;
  line-height: 1.35;
}
.ab-cta {
  min-height: 22.5vw;
  margin-top: 7.5vw;
  padding: 4.5vw 4vw;
  background-color: #fafafa;
  border-radius: 2vw;
}
.ab-cta-h {
  max-width: 50vw;
  margin: 0;
  color: #181818;
  font-family: Poppins, sans-serif;
  font-size: 3vw;
  font-weight: 500;
  line-height: 1.5;
}
.ab-cta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2vw;
  margin-top: 4.5vw;
}
.ab-cta-p {
  max-width: 35vw;
  margin: 0;
  padding-top: .25vw;
  color: #181818;
  font-family: Poppins, sans-serif;
  font-size: 1.2vw;
  font-weight: 400;
  line-height: 1;
}
.ab-btn {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1.25vw;
  height: 4.5vw;
  padding: 0 .5vw 0 2vw;
  background-color: #fafafa;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .4s ease;
}
.ab-btn-t {
  position: relative;
  top: .15vw;
  color: #181818;
  font-family: Badrock, Arial, sans-serif;
  font-size: 2.5vw;
  font-weight: 400;
  line-height: .84;
  text-transform: uppercase;
  white-space: nowrap;
}
.ab-btn-c {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.5vw;
  height: 3.5vw;
  background-color: #181818;
  border-radius: 100%;
  transition: background-color .4s ease;
}
.ab-btn-i { width: 1.75vw; }
.ab-btn:hover { transform: translateY(-.25vw); }
.ab-btn:hover .ab-btn-c { background-color: #70e844; }
.ab-btn:focus-visible { outline: 1px solid #70e844; outline-offset: 4px; }

.ab-page .hs8 { margin-top: 7.5vw; }      /* 120px after the CTA */

/* ---------- 1920+ (Home switches to smaller vw sizes there) ---------- */
@media screen and (min-width: 1920px) {
  .ab-hero-c { padding-top: 6vw; }
  .ab-marquee { margin-top: 5vw; }
  .ab-roads { padding-top: 4vw; }
  .ab-road { width: 62vw; margin-left: 19vw; }   /* keep the road a readable size on big screens */
  .ab-story { font-size: .916vw; }
}

/* ---------- tablet 991-768 (spec 1024: 1px = .0977vw) ---------- */
@media screen and (max-width: 991px) {
  .ab-hero-c { padding-top: 7.76vw; }
  .ab-h1 { font-size: 14.0625vw; }
  .ab-marquee { height: 4.6875vw; margin-top: 11.64vw; }
  .ab-marquee .hs2c1 { grid-column-gap: 2.93vw; grid-row-gap: 2.93vw; padding-right: 2.93vw; }
  .ab-roads { padding-top: 7.34vw; }
  .ab-road { width: 93.75vw; margin-left: 3.125vw; }  /* 960 / 1024 */
  .ab-st { width: 39.583%; }                            /* 380 / 960 */
  .ab-story { font-size: 1.5625vw; line-height: 1.2; }

  .ab-why { padding: 6.2vw 3.125vw 0; }
  .ab-why-h { font-size: 7.47vw; }
  .ab-cards { gap: 2.344vw; margin-top: 3.4vw; }
  .ab-card { min-height: 26.17vw; padding: 5.47vw 2.344vw 5.47vw 5.47vw; border-radius: 3.125vw; }
  .ab-card-k { font-size: 1.25vw; }
  .ab-card-t { max-width: none; margin-top: 2.344vw; font-size: 2.344vw; line-height: 1.3; }
  .ab-cta { min-height: 30.47vw; margin-top: 4.56vw; padding: 5.47vw 4.6875vw; border-radius: 3.125vw; }
  .ab-cta-h { max-width: 60.5vw; font-size: 3.906vw; }
  .ab-cta-row { margin-top: 1.6vw; align-items: center; }
  .ab-cta-p { max-width: 48.8vw; padding-top: 0; font-size: 1.66vw; font-weight: 300; line-height: 1.5; }
  .ab-btn { height: 7.03vw; padding: 0 .78vw 0 3.125vw; gap: 1.95vw; }
  .ab-btn-t { font-size: 3.906vw; top: .2vw; }
  .ab-btn-c { width: 5.47vw; height: 5.47vw; }
  .ab-btn-i { width: 2.73vw; }
  .ab-page .hs8 { margin-top: 6.16vw; }
}

/* ---------- phone <= 767 (spec 390: 1px = .2564vw) ---------- */
@media screen and (max-width: 767px) {
  .ab-hero-c { padding-top: 15.4vw; }
  .ab-h1 { font-size: 26.5vw; }
  .ab-marquee { height: 8.205vw; margin-top: 8vw; }
  .ab-marquee .hs2c1 { grid-column-gap: 5.128vw; grid-row-gap: 5.128vw; padding-right: 5.128vw; }
  .ab-roads { padding-top: 4vw; }
  .ab-road--wide { display: none; }
  .ab-road--phone { display: block; width: 100%; margin-left: 0; }

  .ab-why { padding: 4.1vw 4.103vw 0; }
  .ab-why-h { font-size: 15.1vw; }
  .ab-cards { grid-template-columns: 1fr; gap: 4.103vw; margin-top: 6.15vw; }
  .ab-card { min-height: 60.5vw; padding: 14.36vw 6.15vw 10vw 14.36vw; border-radius: 6.15vw; }
  .ab-card-k { font-size: 3.282vw; }
  .ab-card-t { margin-top: 6.15vw; font-size: 4.923vw; font-weight: 400; line-height: 1.2; }
  .ab-cta { min-height: 0; margin-top: 12.3vw; padding: 8.2vw 6.15vw; border-radius: 6.15vw; }
  .ab-cta-h { max-width: none; font-size: 7.69vw; }
  .ab-cta-row { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 4.1vw; }
  .ab-cta-p { max-width: none; font-size: 4.923vw; font-weight: 300; line-height: 1.2; }
  .ab-btn { height: 18.46vw; padding: 0 2.05vw 0 8.2vw; gap: 5.128vw; background-color: transparent; }
  .ab-btn-t { font-size: 10.256vw; top: .6vw; }
  .ab-btn-c { width: 14.36vw; height: 14.36vw; }
  .ab-btn-i { width: 7.18vw; }
  .ab-page .hs8 { margin-top: 10vw; }
}

/* ---------- reduced motion: everything visible, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .ab-li, .ab-marquee { animation: none; }
  .ab-btn, .ab-btn:hover { transition: none; transform: none; }
}