/* ============================================================================
   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;
  }
}