/* BITS - About Us page
   Loaded after style.css and technology.css; reuses .rules, .timeline, .mini, .cta-panel and the hero styles.
*/

/* ——— Story ——— */
.story-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

.story-copy {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
}

.story-copy p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.8);
}

.genesis-note {
  margin: 0;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  background:
    linear-gradient(160deg, rgba(219, 230, 76, 0.12) 0%, #0b1220 55%, #070b14 100%) padding-box,
    linear-gradient(140deg, rgba(219, 230, 76, 0.85), rgba(116, 196, 101, 0.4) 50%, rgba(59, 239, 255, 0.5)) border-box;
}

.genesis-note:hover { transform: none; }

.genesis-label {
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bits-lime) !important;
  margin-bottom: 1rem;
}

.genesis-note blockquote {
  margin: 0 0 1.25rem;
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  line-height: 1.45;
}

.genesis-note figcaption {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

@media (min-width: 960px) {
  .story-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
  }
}

/* ——— Mission & vision ——— */
.mission-grid {
  display: grid;
  gap: 1.25rem;
}

.mission {
  padding: clamp(1.75rem, 4vw, 2.5rem);
}

.mission:hover { transform: none; }

.mission h2 {
  font-size: clamp(1.35rem, 2.8vw, 1.9rem);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.mission p:last-child {
  font-size: 1.02rem;
}

.mission--hot .eyebrow { color: var(--bits-lime); }

@media (min-width: 860px) {
  .mission-grid { grid-template-columns: 1fr 1fr; }
}

/* ——— How we work ——— */
.work-grid {
  display: grid;
  gap: 1rem;
}

.work-grid .rule-icon { margin-bottom: 0.5rem; }

@media (min-width: 700px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .work-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ——— Products ——— */
.products {
  display: grid;
  gap: 1rem;
}

.product {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: 0.4rem 1rem;
  height: 100%;
  padding: 1.4rem 1.5rem;
}

.product .pill {
  grid-column: 1;
  justify-self: start;
  margin-bottom: 0.4rem;
}

.product strong {
  grid-column: 1;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.1rem;
}

.product > span:not(.pill) {
  grid-column: 1;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.product-go {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  color: var(--bits-lime);
  transition: transform 0.25s ease;
}

.product:hover .product-go { transform: translateX(4px); }

@media (min-width: 700px) {
  .products { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  .products { grid-template-columns: repeat(3, 1fr); }
}

/* ——— Get in touch ——— */
.about-social {
  margin: 2rem 0 0;
}