/* ==========================================================================
   Homepage components only. Everything shared lives in site.css.
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------
   Near even split with the photo column slightly the wider of the two, so the
   image carries real weight. The frame still starts lower than the headline,
   which keeps the composition asymmetric without a size mismatch. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: clamp(2rem, 3.5vw, 3rem);
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.25rem, 2vw, 1.75rem);
}
/* The h1 line breaks are authored as .h1-line spans so each one reveals as a
   single line, so no character based max width here. */
.hero h1 { max-width: none; }
.hero .lede { max-width: 44ch; }
.hero__actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.hero__media { margin-top: clamp(1rem, 4vw, 3.5rem); }
.hero__media img { object-position: 62% 40%; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  /* Photo first on small screens, then the text block. */
  .hero__media { order: -1; margin-top: 0; }
  .hero .lede { max-width: 22ch; }
  .hero .lede { max-width: 46ch; }
}
@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
}
/* At the narrowest supported width the first headline line needs 3px it does
   not have, so the type steps down rather than breaking mid line. */
@media (max-width: 380px) {
  .hero h1 { font-size: 2.25rem; }
}

/* --- Recognition strip ---------------------------------------------------
   A quiet credibility line under the hero: one label, four names, hairline
   above and below. No logos, no dots, no marquee. */
.creds-sec { padding-block: clamp(3rem, 6vw, 5rem); }
/* A photograph carries the left third at desktop and the four names sit
   two by two beside it, each over its own teal rule. */
.creds { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 1024px) {
  .creds {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
  }
}
.creds__label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--ink-2);
  max-width: none;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.creds__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.creds__item {
  padding-top: 0.75rem;
  border-top: 2px solid var(--teal);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--navy);
}
@media (max-width: 600px) {
  .creds__list { grid-template-columns: minmax(0, 1fr); }
}

/* --- The number ----------------------------------------------------------
   One statement, set large and solid, beside the photograph it is about. The
   picture sits on the left so the section does not echo the hero, which runs
   the other way round. No gradient fill on the figure. */
.stat-split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
@media (min-width: 1024px) {
  .stat-split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
@media (max-width: 1023px) {
  .stat-split__media { order: 2; max-width: 320px; }
  .stat-split__copy { order: 1; }
}
.stat { max-width: none; }
.stat__num {
  display: block;
  font-weight: 700;
  font-size: clamp(3rem, 5.6vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat__cap {
  display: block;
  margin-top: 0.75rem;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 24ch;
}
.stat__body {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 58ch;
  color: var(--ink-2);
}

/* --- How it works: three cell bento -------------------------------------
   Cell A holds the product render and spans both rows; B is paper with a
   hairline, C is a deeper mist. Three items, three cells, no filler tile. */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: clamp(1rem, 2vw, 1.5rem);
}
.bento__cell {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius);
}
.bento__cell p { color: var(--ink-2); max-width: 42ch; }
.bento__a {
  grid-row: 1 / 3;
  background: var(--mist);
  gap: clamp(1.5rem, 3vw, 2rem);
  /* Deliberately the default object-fit: cover, not .frame--contain: the
     brace render is a grey studio shot, not a transparent cutout. */
}
.bento__b {
  background: var(--paper);
  border: 1px solid var(--rule);
  gap: clamp(1rem, 2vw, 1.5rem);
}
.bento__c { background: var(--mist-2); gap: clamp(1rem, 2vw, 1.5rem); }
.bento__text { display: flex; flex-direction: column; gap: 0.75rem; }

/* Affordance: the cells lift and their picture pushes in a little. */
@media (hover: hover) {
  .bento__cell { transition: translate 320ms var(--ease), box-shadow 320ms var(--ease); }
  .bento__cell:hover { translate: 0 -4px; box-shadow: var(--shadow); }
  .js .bento__cell:hover .frame img { scale: 1.03; transition-duration: 320ms; }
}

@media (max-width: 800px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__a { grid-row: auto; }
}

/* --- Who it is for: statement rows ---------------------------------------
   Thumbnail, audience, one line. The grid and the hairline come from the
   shared .thumb-row in site.css. */
.who__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.who__body { color: var(--ink-2); max-width: 46ch; }

/* --- Awards: compact list ------------------------------------------------
   Program, recognition, year. Tighter type than the statement rows above so
   the two row sections do not read as the same block. */
/* The list keeps the left seven columns; the brand spark fills the right at
   desktop, at watermark strength so it never competes with the rows. */
.awards-grid { position: relative; display: grid; }
.awards__art { display: none; }
@media (min-width: 1024px) {
  .awards-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .awards__art { display: block; position: relative; }
  .awards__art .spark {
    top: 50%;
    left: 10%;
    translate: 0 -50%;
    width: min(88%, 340px);
  }
}

.awards__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
  gap: 0.25rem clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding-block: 1.5rem;
}
.awards__row + .awards__row { border-top: 1px solid var(--rule); }
.awards__program {
  position: relative;
  padding-left: 1.125rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
}
/* The single gold mark on the homepage: the one competition NeuroCore won.
   It sits in the gutter so every program title keeps the same left edge. */
.awards__mark {
  position: absolute;
  left: -2px;
  top: 0.34em;
}
.awards__note { color: var(--ink-2); font-size: 1rem; }
.awards__year {
  justify-self: end;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--ink-2);
}
@media (max-width: 800px) {
  .awards__row { grid-template-columns: minmax(0, 1fr) auto; gap: 0.375rem 1rem; }
  .awards__note { grid-column: 1 / -1; }
}

/* --- Closing CTA ---------------------------------------------------------
   Mist callout, vertical stack, one button. */
.cta { --flow: 1rem; }
.cta p { max-width: 46ch; color: var(--ink-2); }
.cta .btn { margin-top: 0.5rem; }
/* The callout keeps its own stacking order above the spark watermark. */
.cta > :not(.spark) { position: relative; z-index: 1; }