/* Local additions on top of the Default design.
   Four things only: the two-column intro, the companies strip, brand marks
   beside technology names, and the smaller name. Nothing here changes the
   design's palette — that is a token change in design.css. */

/* ---------- 1. Intro: name left, copy right ---------- */
.intro {
  padding-top: clamp(84px, 10vh, 124px);
  padding-bottom: clamp(36px, 5vw, 72px);
}
/* The knot used to sit beside empty space; it is now behind copy, so it
   stays decorative rather than competing with the text. */
.intro .knot { opacity: 0.24; }

.intro-name {
  font-size: clamp(50px, 7vw, 116px);
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
}

.hero-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(28px, 4.4vw, 64px);
  align-items: stretch;
  margin-top: clamp(10px, 1.6vw, 22px);
}
.hero-left {
  display: flex;
  flex-direction: column;
}
.hero-left,
.hero-right { min-width: 0; }
.headline {
  margin: clamp(10px, 1.2vw, 16px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  max-width: none;
}
.headline li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.headline li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: var(--acc-ink);
}
.hero-left .facts { margin-top: clamp(16px, 2vw, 22px); }
.nowrap { white-space: nowrap; }
.hero-right .lede { margin-top: 0; }
.hero-right .lede + .lede { margin-top: 16px; }
.hero-right .cta { margin-top: 28px; }

.results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(36px, 4.5vw, 60px);
}

@media (max-width: 900px) {
  .hero-pair { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .results { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 2. Technology marks ---------- */
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tech-i {
  flex: none;
  width: 17px;
  height: 17px;
  padding: 1px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(17, 18, 22, 0.14);
  object-fit: contain;
}
.tech-inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.tech-inline .tech-i {
  width: 15px;
  height: 15px;
}

/* ---------- 3. Company marks inside the intro ---------- */
.intro-logos {
  display: block;
  margin-top: auto;
  padding-top: clamp(22px, 3vw, 36px);
}
.intro-logos-label {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 240, 234, 0.55);
  white-space: nowrap;
}
.intro-logos-row {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px clamp(16px, 2.2vw, 28px);
}

.intro-logos-row img {
  display: block;
  width: auto;
  height: auto;
  max-height: 30px;
  max-width: 132px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: 0.7;
}
/* The Millennium wordmark is much wider than the emblems beside it. */
.intro-logos-row img.intro-logo-full {
  max-height: 28px;
  max-width: 210px;
}

@media (max-width: 900px) {
  .intro-logos { margin-top: 22px; padding-top: 0; }
  .intro-logos-row img { max-height: 24px; }
}

/* ---------- 4. Flatter section rhythm ---------- */
/* The oversized ghost word behind each section title reads as a shadow;
   the headings stand on their own without it. */
.fade-word { display: none; }

/* Tighter sections, with the heading block carrying the separation. */
.sec {
  padding-top: clamp(52px, 5.6vw, 76px);
  padding-bottom: clamp(28px, 3.4vw, 40px);
}
.sec-last { padding-bottom: clamp(48px, 6vw, 80px); }
.sec-head { margin-bottom: clamp(18px, 2.2vw, 28px); }

/* The intro's own tail padding was tuned before the sections tightened. */
.intro { padding-bottom: clamp(28px, 3.6vw, 48px); }