/**
 * ScaleCraft How We Work page - page-scoped layout
 * Version: 1.0 (draft) | 2026-09-01
 *
 * Depends on: bureau-tokens.css (tokens, .sc-* utilities, the shared
 * motion utilities: .sc-settle / .sc-draw-x / .sc-fieldmark).
 * Loaded site-wide, scoped to .sc-hw, inert elsewhere.
 *
 * Treatment: the same "blend" as About - a Pine field opener carrying
 * the mark motif, plus CSS-only scroll motion. No JavaScript.
 */

.sc-hw {
  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-hw * { box-sizing: border-box; }
.sc-hw :where(h1, h2, h3, h4, p, blockquote, figure, figcaption, ul, ol, li) { color: inherit; }
.sc-hw :where(h1, h2, h3, h4, p, blockquote, figure, ul, ol) { margin: 0; }

.sc-hw__inner { max-width: var(--sc-grid-max-width); margin: 0 auto; }
.sc-hw__linkrow { margin-top: var(--sc-space-4); }


/* ================================================================
   1 - OPENING FRAMING STATEMENT   (Pine field + mark motif)
   ================================================================ */

.sc-hw--framing {
  background-color: var(--sc-pine);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);
  padding-bottom: var(--sc-space-7);
  position: relative;
  overflow: hidden;
}
.sc-hw--framing .sc-hw__inner { position: relative; }

.sc-hw__fieldmark {
  position: absolute;
  top: -18%;
  right: -12%;
  width: min(58%, 620px);
}
@media (max-width: 760px) {
  .sc-hw__fieldmark { display: none; }
}

.sc-hw__framing-copy { position: relative; max-width: 58ch; }
.sc-hw__framing-lead { max-width: 30ch; margin-bottom: var(--sc-space-4); }
.sc-hw__framing-copy .sc-b2 { margin-top: var(--sc-space-3); color: var(--sc-chalk-68); }
.sc-hw__framing-copy .sc-b2:first-of-type { margin-top: 0; }
.sc-hw__framing-copy .sc-b2.sc-hw__framing-emphasis { color: var(--sc-chalk); }
.sc-hw__framing-copy .sc-hw__linkrow { margin-top: var(--sc-space-5); }


/* ================================================================
   2 - THREE SERVICE AREAS
   ================================================================ */

.sc-hw__section-head { margin-bottom: var(--sc-space-3); }
.sc-hw__section-head .sc-b1 { margin-top: var(--sc-space-3); max-width: 34ch; }

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

.sc-hw__card {
  border: var(--sc-border-card);
  padding: var(--sc-card-padding);       /* 34 */
  background-color: var(--sc-chalk);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
}

.sc-hw__card-title {
  font-weight: 500;                      /* Newsreader 500 - the dominant element */
}
.sc-hw__card-body .sc-b2 { margin-top: var(--sc-space-2); }
.sc-hw__card-body .sc-b2:first-child { margin-top: 0; }

.sc-hw__includes {
  margin-top: auto;
  padding-top: var(--sc-space-3);
  border-top: 1px solid var(--sc-graphite-14);
}
.sc-hw__includes-label {
  display: block;
  color: var(--sc-pine);
  margin-bottom: var(--sc-space-2);
}
.sc-hw__includes p {
  font-size: var(--sc-type-b3-size);
  line-height: var(--sc-type-b3-line-height);
  color: rgba(27, 31, 35, .62);
}

.sc-hw__cards-cta { margin-top: var(--sc-space-4); }

@media (max-width: 900px) {
  .sc-hw__cards { grid-template-columns: 1fr; }
  .sc-hw__includes { margin-top: var(--sc-space-2); }
}


/* ================================================================
   3 - THE ENGAGEMENT MODEL   (four-stage sequence, drawing rule)
   ================================================================ */

.sc-hw--model .sc-hw__section-head,
.sc-hw--audit .sc-hw__section-head { margin-bottom: var(--sc-space-5); }

.sc-hw__steps-wrap { position: relative; margin-bottom: var(--sc-space-5); }
.sc-hw__steps-rule {
  height: 1px;
  background-color: var(--sc-stone);
  transform-origin: left;
}
.sc-hw__steps {
  list-style: none;
  margin: 0;
  padding: var(--sc-space-3) 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sc-space-3);
}
.sc-hw__step { display: flex; flex-direction: column; gap: var(--sc-space-1); }
.sc-hw__step-num { color: var(--sc-stone); }
.sc-hw__step-name {
  font-family: var(--sc-font-display);
  font-size: var(--sc-type-d4-size);
  line-height: var(--sc-type-d4-line-height);
  letter-spacing: var(--sc-type-d4-tracking);
}

.sc-hw__model-copy { max-width: 62ch; }
.sc-hw__model-copy .sc-b2 { margin-top: var(--sc-space-3); }
.sc-hw__model-copy .sc-b2:first-child { margin-top: 0; }

@media (max-width: 720px) {
  .sc-hw__steps { grid-template-columns: 1fr 1fr; gap: var(--sc-space-3) var(--sc-space-4); }
}


/* ================================================================
   4 - ENTRY OFFER BLOCK   (contained card on Chalk)
   ================================================================ */

.sc-hw__offer {
  border: 1px solid var(--sc-stone);
  background-color: var(--sc-chalk);
  padding: var(--sc-space-5);            /* 55 - Bureau card padding */
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--sc-space-5);
  align-items: start;
}

.sc-hw__offer-head .sc-l1 { display: block; color: var(--sc-pine); margin-bottom: var(--sc-space-2); }
.sc-hw__offer-name { margin-bottom: var(--sc-space-3); }
.sc-hw__offer-body .sc-b2 { margin-top: var(--sc-space-3); }
.sc-hw__offer-body .sc-b2:first-child { margin-top: 0; }

.sc-hw__offer-aside {
  border-left: 1px solid var(--sc-stone);
  padding-left: var(--sc-space-5);
}
.sc-hw__offer-price {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: var(--sc-type-d3-size);     /* 42 - large display, Copper is legal here */
  line-height: 1;
  letter-spacing: var(--sc-type-d3-tracking);
  color: var(--sc-copper);
}
.sc-hw__offer-terms {
  font-size: var(--sc-type-b3-size);
  line-height: var(--sc-type-b3-line-height);
  color: rgba(27, 31, 35, .62);
  margin-top: var(--sc-space-2);
  max-width: 26ch;
}
.sc-hw__offer-cta { margin-top: var(--sc-space-4); }
.sc-hw__offer-subtext {
  font-size: var(--sc-type-b3-size);
  color: rgba(27, 31, 35, .62);
  margin-top: var(--sc-space-3);
}
.sc-hw__offer-subtext a { color: var(--sc-pine); }

@media (max-width: 860px) {
  .sc-hw__offer {
    grid-template-columns: 1fr;
    gap: var(--sc-space-4);
    padding: var(--sc-space-4);
  }
  .sc-hw__offer-aside {
    border-left: none;
    border-top: 1px solid var(--sc-stone);
    padding-left: 0;
    padding-top: var(--sc-space-4);
  }
}


/* ================================================================
   5 - FINAL CTA   (Graphite full-bleed, matches homepage / About)
   ================================================================ */

.sc-hw--cta {
  background-color: var(--sc-graphite);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);
  padding-bottom: var(--sc-space-7);
}
.sc-hw__cta { max-width: 44rem; }
.sc-hw__cta .sc-d2 { margin: 0; color: var(--sc-chalk); }
.sc-hw__cta-support {
  margin-top: var(--sc-space-3);
  max-width: 40rem;
  color: var(--sc-chalk-68);
}
.sc-hw__cta-btn { margin-top: var(--sc-space-5); }


/* ================================================================
   RESPONSIVE - section padding
   ================================================================ */

@media (max-width: 1024px) {
  .sc-hw { padding-left: var(--sc-space-5); padding-right: var(--sc-space-5); }
}
@media (max-width: 600px) {
  .sc-hw {
    padding-top: var(--sc-space-5);
    padding-bottom: var(--sc-space-5);
    padding-left: var(--sc-space-3);
    padding-right: var(--sc-space-3);
  }
  .sc-hw--framing,
  .sc-hw--cta {
    padding-top: var(--sc-space-6);
    padding-bottom: var(--sc-space-6);
  }
}