/* Typography, hierarchy and emphasis. Loads last so it can settle sizes the
   earlier sheets set; it only ever reads variables from tokens.css. */

/* ---------- keyword emphasis ---------- */

/* Marked up as <em>/<strong> so the emphasis is real to a screen reader, but
   rendered with weight + full white instead of italics: neither display face
   ships an italic cut, so the browser would synthesise a skew. Weight also
   survives the .p2/.quote__text muting that a colour change would fight. */
.hl {
  font-style: normal;
  font-weight: var(--w-semibold);
  color: var(--white);
}

/* ---------- section header ---------- */

/* Every section opens the same way: a small index label, then a real visible
   <h2>. The pattern is emitted by section_head() in partials/format.php — the
   markup shape is fixed there so no section can drift out of the system. */
.section-head {
  margin-bottom: clamp(24px, 3vw, 48px);
}

/* Overrides the 20px .services__intro carries as a standalone block. */
.section-head__label {
  margin-bottom: clamp(12px, 1.4vw, 18px);
}

/* Deliberately below .eyebrow's --h6: this line is a locator, not a title,
   and uppercase + tracking already buys it more presence per point size. */
.section-head__index {
  font-size: clamp(11px, .6rem + .3vw, 14px);
  letter-spacing: .14em;
  color: var(--text-muted);
}

.section-head__name { color: var(--white-800); }

.section-head__title {
  font-size: var(--h2);
  line-height: 1.04;
}

/* .mask clips overflow for the reveal, which also clips descenders once the
   heading is at rest. The padding gives them room without unmasking the
   translated start position. */
.section-head .mask { padding-bottom: .08em; }

.section-head--center { text-align: center; }
.section-head--center .section-head__label { justify-content: center; }

/* ---------- hero ---------- */

/* The four blocks were within a few points of each other, so nothing read as
   the headline. The order of importance is now wordmark > philosophy line >
   service list > badge, and each step is a visible jump in size or weight. */

.hero .hero__top {
  gap: clamp(32px, 5vw, 88px);
  align-items: end;
}

.hero .hero__badge { margin-bottom: clamp(18px, 2.2vw, 30px); }

/* The slogan. --h4 bottomed out at 14px, i.e. smaller than the service list
   it was meant to outrank; this makes it the second-loudest thing on screen
   after the wordmark and lets it hold its own line breaks. */
.hero .hero__claim {
  max-width: 16ch;
  font-size: clamp(28px, 1.2rem + 3.4vw, 68px);
  font-weight: var(--w-semibold);
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--white);
}

.hero .hero__services { gap: 14px; }

/* Names the block, so four nouns stacked in a corner stop reading as a
   continuation of the sentence opposite them. */
/* Two classes deep on purpose: layout.css styles `.hero__services p` at --p2,
   which would otherwise out-specify a single class and flatten the label back
   into the list it is meant to introduce. */
.hero .hero__services-label {
  font-family: var(--font-body);
  font-size: clamp(11px, .6rem + .3vw, 13px);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--white-100);
}

.hero__services-list { display: grid; gap: 8px; }

.hero__services-list li {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  font-size: var(--p2);
  line-height: var(--lh-l);
  color: var(--white-800);
}

.hero__services-num {
  font-family: var(--font-body);
  font-size: clamp(10px, .55rem + .2vw, 12px);
  color: var(--primary-text);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 991px) {
  .hero .hero__top { align-items: start; }
}

@media (max-width: 767px) {
  /* One column: the list is left-aligned by layout.css, so the rows and the
     rule under the label have to follow it. */
  .hero .hero__claim { max-width: 18ch; }
  .hero__services-list li { justify-content: flex-start; }
  .hero .hero__services-label { display: inline-block; }
}