/* ============================================================================
   Home — hero, capabilities, principles, statement, contact.
   ============================================================================ */

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding-block: clamp(84px, 11vw, 148px) clamp(56px, 7vw, 92px);
  border-top: 0;
  /* self-contained, so the body's own wash does not paint underneath and
     double up */
  background-color: var(--paper);
  background-image: var(--grain), var(--wash-strong);
}

.hero__title {
  /* em-based so the measure scales with the type: wide enough for
     "Enterprise intelligence," and too narrow for the next word, which puts
     the break on the comma at every size */
  max-width: 11em;
  margin-top: var(--s5);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--w-reg);
  letter-spacing: var(--track-display);
}

.hero__lede {
  max-width: 52ch;
  margin-top: var(--s5);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s7);
}

.hero .eyebrow { animation: rise .5s var(--ease) .04s both; }
.hero__title   { animation: rise .6s var(--ease) .10s both; }
.hero__lede    { animation: rise .6s var(--ease) .18s both; }
.hero__actions { animation: rise .6s var(--ease) .26s both; }

/* --- Capabilities -------------------------------------------------------- */

.eyebrow + .h2,
.eyebrow + .lede {
  margin-top: var(--s5);
}

/* the Principles block opens a new movement inside the same section */
.grid-3 + .eyebrow {
  margin-top: clamp(64px, 8vw, 104px);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s7);
  margin-top: var(--s8);
}

.feature {
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-strong);
}

.feature h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-reg);
  letter-spacing: var(--track-h3);
}

.feature p {
  margin-top: var(--s3);
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --- Principles ---------------------------------------------------------- */

.principles {
  margin-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.principle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s7);
  padding-block: var(--s5);
  border-bottom: 1px solid var(--rule);
}

.principle dt {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  font-weight: var(--w-reg);
  letter-spacing: var(--track-h3);
}

.principle dd {
  grid-column: 2 / -1;
  color: var(--ink-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* --- Statement ----------------------------------------------------------- */

.statement blockquote {
  margin-top: var(--s5);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--w-reg);
  letter-spacing: var(--track-h2);
}

.statement__accent {
  color: var(--brand-on-ink);
}

/* --- Contact ------------------------------------------------------------- */

.contact__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--s8);
  align-items: start;
}

.contact__right p {
  color: var(--ink-2);
}

.contact__email {
  display: inline-block;
  margin-top: var(--s4);
  color: var(--link);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  letter-spacing: var(--track-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color var(--fast) var(--ease);
}

.contact__email:hover {
  color: var(--ink-2);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .grid-3 {
    grid-template-columns: 1fr;
    gap: var(--s6);
  }

  .contact__grid {
    grid-template-columns: 1fr;
    gap: var(--s6);
    align-items: start;
  }
}

@media (max-width: 720px) {
  .hero__title {
    line-height: 44px;
  }

  .statement blockquote {
    line-height: 32px;
  }

  .principle {
    grid-template-columns: 1fr;
    gap: var(--s2);
  }

  .principle dd {
    grid-column: 1;
  }
}

.careers-teaser { margin-top: var(--s5); }

/* Enterprise RSI — long-form research narrative using the existing type scale. */
.hero__title { max-width: 14em; }
.hero__lede { max-width: 64ch; }
.rsi-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: var(--s8); align-items: start; }
.rsi-heading .h2 { margin-top: var(--s5); max-width: 18ch; text-wrap: pretty; }
.rsi-copy { min-width: 0; }
.rsi-copy p { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--ink-2); text-wrap: pretty; }
.rsi-copy p + p { margin-top: var(--s5); }
.section--dark .rsi-copy p { color: var(--on-ink); }
.improvement-loop { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-block: var(--s7); }
.improvement-loop li { border-top: 1px solid var(--rule-strong); padding-top: var(--s3); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.improvement-loop .eyebrow { margin-bottom: var(--s2); }
@media (max-width: 900px) {
 .rsi-grid { grid-template-columns: 1fr; gap: var(--s6); }
 .rsi-heading .h2 { max-width: 26ch; }
}
@media (max-width: 400px) {
 .improvement-loop { grid-template-columns: repeat(2, 1fr); }
}

.data-overview__intro { margin-top: var(--s5); }

/* Enterprise-first opening: value proposition alongside the improvement loop. */
.enterprise-hero { padding-block: clamp(48px, 6vw, 88px); }
.enterprise-hero .wrap { max-width: 1480px; }
.enterprise-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s6); align-items: center; }
.enterprise-hero .hero__title { font-size: clamp(40px, 4.5vw, 68px); line-height: 1.08; max-width: 16ch; }
.enterprise-hero .hero__lede { max-width: 54ch; }
.enterprise-hero__diagram { width: 100%; height: auto; }
.hero-benefits { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; margin-top: var(--s7); gap: var(--s4); }
.hero-benefits li { padding-right: var(--s3); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.hero-benefits li + li { border-left: 1px solid var(--rule); padding-left: var(--s4); }
.hero-benefits span { color: var(--ink-3); }
.enterprise-hero .hero__actions { margin-top: var(--s6); }
@media (max-width: 900px) {
 .enterprise-hero__grid { grid-template-columns: 1fr; }
 .enterprise-hero .hero__title { max-width: 22ch; }
 .enterprise-hero__diagram { max-width: 620px; margin-inline: auto; }
}
@media (max-width: 480px) {
 .hero-benefits { gap: var(--s2); }
 .hero-benefits li { font-size: var(--fs-body); line-height: var(--lh-body); padding-right: 0; }
 .hero-benefits li + li { padding-left: var(--s2); }
}