/* ==========================================================================
   HOMEPAGE (2026 system). Source of truth: Figma "Homepage | Hero 1 |
   Desktop 1440 | Classic" (EQ5vs6l8ARkiiJ1YLCnUkV, node 372:9689).
   Measurements below are the frame's own: 1440 wide, 120 margins, 1200
   content on 12 columns with 32px gutters. Shared pieces (nav, cards, tiles,
   text links, footer, modal) live in system.css.
   ========================================================================== */

/* ---- Hero: H1 then the meta line (rule, 12+ years / Washington, DC) ------- */
.home-hero { position: relative; padding-top: 112px; }
.home-hero__title {
  max-width: 1116px;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--sys-hero-size);
  line-height: 1.13;
  letter-spacing: -0.035em;
  color: var(--sys-hero);
}
.home-hero__em { color: var(--sys-emphasis); }
/* the reveal words are toggle buttons; they read exactly as the sentence */
.home-reveal-word { display: inline; font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; cursor: default; }
.home-reveal-word:focus-visible { outline-offset: 4px; border-radius: 4px; }
.home-hero__meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
  padding-top: 16px;
  border-top: 1px solid var(--sys-rule-strong);
}

/* ---- Featured Work: 2 x 2, 32px gutter, 64px between rows ------------------ */
.home-featured { padding-block: var(--sys-section-y); }
.home-featured__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px var(--grid-gutter); }

/* ---- About: a callout between rules (above + below) ---------------------------- */
.home-about__callout {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: center;
  padding-block: 40px;
  border-top: 1px solid var(--sys-rule-strong);
  border-bottom: 1px solid var(--sys-rule-strong);
}
.home-about__lead { grid-column: 1 / span 6; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.home-about__statement {
  font-weight: var(--weight-semibold);
  font-size: calc(var(--sys-statement-size) * 0.9);   /* 90% of the statement size (41.4px at 1400+), a 2-3 line headline */
  line-height: 1.15;
  color: var(--sys-hero);
}
.home-about__statement .home-hero__em { color: var(--sys-emphasis); }
/* the reveal words are toggle buttons; they read exactly as the sentence */
.home-reveal-word { display: inline; font: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; cursor: default; }
.home-reveal-word:focus-visible { outline-offset: 4px; border-radius: 4px; }
.home-about__body { font-size: 18px; font-weight: var(--weight-light); line-height: 1.6; color: var(--sys-supporting); }
.home-about__body p + p { margin-top: 12px; }
.home-about__principles { grid-column: 8 / span 5; }
.home-about__principle {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  padding-block: 32px;
}
.home-about__principle + .home-about__principle { border-top: 1px solid var(--sys-rule); }
.home-about__num { font: var(--sys-detail); color: var(--sys-secondary); }
.home-about__ptitle { display: block; font-size: 24px; font-weight: var(--weight-regular); line-height: 1.25; letter-spacing: -0.015em; color: var(--sys-ink); }
.home-about__pdesc { display: block; margin-top: 6px; font-size: 16px; font-weight: var(--weight-light); line-height: 1.5; color: var(--sys-supporting); }

/* ---- More Work: 3 columns, 32px gutter, 44px between rows ------------------- */
.home-more { padding-block: var(--sys-section-y); }
.home-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px var(--grid-gutter); }

/* ---- Selected Brands: one wrapping run, slashes between ------------------------ */
.home-brands__list {
  display: flex;
  flex-wrap: wrap;
  max-width: 1080px;
  font-size: 24px;
  font-weight: var(--weight-regular);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--sys-ink);
}
.home-brands__list li { white-space: nowrap; }
.home-brands__list li:not(:last-child)::after { content: "/"; color: var(--sys-slash); padding-inline: 0.75em; }

/* ---- Credits: 120px above, then the footer --------------------------------------- */
.home-credits { padding-top: 120px; }

/* ---- Tablet (840-1199) --------------------------------------------------------------- */
@media (max-width: 1199px) {
  .home-hero { padding-top: 96px; }
  .home-about__lead { grid-column: 1 / span 6; }
  .home-about__principles { grid-column: 8 / span 5; }
  .home-about__principle { padding-block: 24px; }
  .home-about__ptitle { font-size: 21px; }
}
/* ---- Phones (below 840) ---------------------------------------------------------------- */
@media (max-width: 839px) {
  .home-hero { padding-top: 48px; }
  .home-hero__meta { margin-top: 40px; }
  .home-featured__grid { grid-template-columns: 1fr; gap: 40px; }
  .home-about__callout { grid-template-columns: 1fr; padding-block: 32px 8px; }
  .home-about__lead, .home-about__principles { grid-column: 1; }
  .home-about__lead { gap: 24px; }
  .home-about__principles { margin-top: 24px; }
  .home-about__principle { grid-template-columns: 40px minmax(0, 1fr); padding-block: 20px; }
  .home-about__principle:first-child { border-top: 1px solid var(--sys-rule); }
  .home-about__ptitle { font-size: 20px; }
  .home-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .home-brands__list { font-size: 18px; }
  .home-credits { padding-top: 96px; }
}