/**
 * ScaleCraft Homepage - page-scoped layout
 * Version: 1.0 | 2026-09-01
 *
 * Depends on: bureau-tokens.css (Bureau tokens + utility classes)
 * Enqueued only on the front page (see functions.php).
 *
 * Every value here is a Bureau token. No interpolated spacing.
 * No border radius. No shadow. Type sizes only ever step along the
 * Bureau scale (D1 -> D2 -> D3 -> D4), never between.
 */

/* ================================================================
   SECTION SHELL
   ================================================================ */

.sc-hp {
  box-sizing: border-box;
  width: 100%;
  padding: var(--sc-space-6) var(--sc-grid-margin);   /* 89 / 88 */
  background-color: var(--sc-chalk);
  color: var(--sc-graphite);
}

.sc-hp * { box-sizing: border-box; }

/* Neutralise parent-theme heading/paragraph colour and margins.
   :where() keeps specificity at 0 so the Bureau utility classes and
   the intentional spacing rules below always win. */
.sc-hp :where(h1, h2, h3, p, blockquote, figure, figcaption, ul, li) { color: inherit; }
.sc-hp :where(h1, h2, h3, p, blockquote, figure) { margin: 0; }

.sc-hp__inner {
  max-width: var(--sc-grid-max-width);   /* 1440 */
  margin: 0 auto;
}

/* Body never runs full width */
.sc-hp__measure { max-width: 65ch; }

.sc-hp__linkrow { margin: var(--sc-space-4) 0 0; }   /* 34 */


/* ================================================================
   1 - HERO   (Chalk ground, type-led, 144 vertical)
   ================================================================ */

.sc-hp--hero {
  padding-top: var(--sc-space-7);        /* 144 */
  padding-bottom: var(--sc-space-7);
}

.sc-hp__hero-headline {
  margin: 0;
  max-width: 16ch;
}

.sc-hp__hero-subhead {
  margin: var(--sc-space-3) 0 0;         /* 21 */
  max-width: 44ch;
}

.sc-hp__hero-cta { margin-top: var(--sc-space-5); }   /* 55 */


/* ================================================================
   2 - THE GAP   (Chalk ground, flows from hero, no header)
   ================================================================ */

.sc-hp--gap .sc-b1 { margin: 0; }
.sc-hp--gap .sc-b2 { margin: var(--sc-space-3) 0 0; }


/* ================================================================
   3 - WHAT WE WORK ON   (Chalk ground, three cards)
   ================================================================ */

.sc-hp__section-head .sc-d2 { margin: 0; }
.sc-hp__section-head .sc-b1 { margin: var(--sc-space-3) 0 0; max-width: 34ch; }

.sc-hp__cards {
  margin-top: var(--sc-space-5);         /* 55 */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sc-grid-gutter);            /* 21 */
}

.sc-hp__card {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);                /* 13 */
  background-color: var(--sc-chalk);
}

.sc-hp__card-num { color: var(--sc-stone); }

.sc-hp__card-title {
  margin: 0;
  font-weight: 500;   /* Newsreader 500 - the heaviest the serif goes */
}

.sc-hp__card .sc-b2 { margin: 0; }

.sc-hp__cards-cta { margin-top: var(--sc-space-4); }   /* 34 */


/* ================================================================
   4 - PROOF   (Graphite full-bleed)
   ================================================================ */

.sc-hp--proof {
  background-color: var(--sc-graphite);
  color: var(--sc-chalk);
}

.sc-hp--proof .sc-hp__inner { max-width: 1024px; }

.sc-hp__quote { margin: 0; }

.sc-hp--proof .sc-pullquote {
  color: var(--sc-chalk);
  border-left: var(--sc-border-accent);   /* 2px Copper - the one signal on this screen */
  padding-left: var(--sc-space-4);         /* 34 */
}

.sc-hp__attr {
  margin: var(--sc-space-2) 0 0;
  padding-left: var(--sc-space-4);
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b3-size);
  line-height: var(--sc-type-b3-line-height);
  color: var(--sc-stone);
}

.sc-hp__quote-context {
  margin: var(--sc-space-4) 0 0;
  padding-left: var(--sc-space-4);
  max-width: 60ch;
  color: var(--sc-chalk-68);
}

.sc-hp__second,
.sc-hp__brands {
  margin-top: var(--sc-space-5);          /* 55 */
  padding-top: var(--sc-space-5);
  border-top: 1px solid rgba(245, 245, 242, .14);
  max-width: 64ch;
}

.sc-hp__second-quote { margin: 0; }
.sc-hp__second .sc-hp__attr { padding-left: 0; }

.sc-hp__brands .sc-b2 { margin: 0; color: var(--sc-chalk); }
.sc-hp__brands-note { margin: var(--sc-space-2) 0 0; color: var(--sc-stone); }


/* ================================================================
   5 - WHO'S BEHIND THIS   (Chalk ground, portrait + copy)
   ================================================================ */

.sc-hp__about-grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: var(--sc-space-6);                 /* 89 */
  align-items: start;
}

.sc-hp__portrait {
  margin: 0;
  background-color: var(--sc-stone);      /* shows only while the image loads / if it 404s */
  min-height: 12rem;
}

.sc-hp__portrait img {
  display: block;
  width: 100%;
  height: auto;                           /* respect the file's own aspect ratio, no crop */
  filter: grayscale(1);                   /* B&W per the Bureau portrait treatment */
}

.sc-hp__about-copy .sc-d2 { margin: 0 0 var(--sc-space-3); }
.sc-hp__about-copy .sc-b2 { margin: var(--sc-space-3) 0 0; max-width: 62ch; }
.sc-hp__about-copy .sc-b2:first-of-type { margin-top: 0; }


/* ================================================================
   6 - FINAL CTA   (Graphite full-bleed, 144 vertical)
   ================================================================ */

.sc-hp--final {
  background-color: var(--sc-graphite);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);         /* 144 */
  padding-bottom: var(--sc-space-7);
}

/* px/rem measure, not ch: this wrapper's font-size is body (17px), so a
   ch cap here would collapse the big D2 headline into a narrow column. */
.sc-hp__final { max-width: 42rem; }
.sc-hp__final .sc-d2 { margin: 0; color: var(--sc-chalk); }

.sc-hp__final-support {
  margin: var(--sc-space-3) 0 0;
  max-width: 34rem;
  color: var(--sc-chalk-68);
}

.sc-hp__final-cta { margin-top: var(--sc-space-5); }   /* 55 */

/* .sc-btn-on-dark now lives in bureau-tokens.css (button component) */


/* ================================================================
   RESPONSIVE - display type steps down the Bureau scale only
   ================================================================ */

@media (max-width: 1024px) {
  .sc-hp {
    padding-left: var(--sc-space-5);      /* 55 */
    padding-right: var(--sc-space-5);
  }
  .sc-hp .sc-d1 {
    font-size: var(--sc-type-d2-size);
    line-height: var(--sc-type-d2-line-height);
  }
  .sc-hp .sc-d2 {
    font-size: var(--sc-type-d3-size);
    line-height: var(--sc-type-d3-line-height);
  }
  .sc-hp__cards { grid-template-columns: 1fr; }
  .sc-hp__about-grid {
    grid-template-columns: 1fr;
    gap: var(--sc-space-5);
  }
}

@media (max-width: 600px) {
  .sc-hp {
    padding-top: var(--sc-space-5);       /* 55 */
    padding-bottom: var(--sc-space-5);
    padding-left: var(--sc-space-3);      /* 21 */
    padding-right: var(--sc-space-3);
  }
  .sc-hp--hero,
  .sc-hp--final {
    padding-top: var(--sc-space-6);       /* 89 */
    padding-bottom: var(--sc-space-6);
  }
  .sc-hp .sc-d1 { font-size: var(--sc-type-d3-size); }
  .sc-hp .sc-d2 {
    font-size: var(--sc-type-d4-size);
    line-height: var(--sc-type-d4-line-height);
  }
  .sc-hp .sc-pullquote {
    font-size: var(--sc-type-d4-size);
    line-height: var(--sc-type-d4-line-height);
  }
}


/* ================================================================
   SCROLL REVEAL - intentionally not used on this page.
   bureau-tokens.css sets .sc-reveal { opacity: 0 } globally; this
   makes sure that if the class is ever added to homepage markup it
   still shows without depending on any script.
   ================================================================ */

.sc-hp .sc-reveal {
  opacity: 1;
  transform: none;
}