/**
 * ScaleCraft About page - page-scoped layout
 * Version: 1.0 | 2026-09-01
 *
 * Depends on: bureau-tokens.css. Loaded site-wide, fully scoped to
 * .sc-ab, so it is inert on every other page.
 *
 * Treatment: the "blend" direction chosen from the About Page
 * Treatments comparison - Bureau's own tokens used with more graphic
 * weight (a Pine field opener carrying the mark motif, a Pine-toned
 * portrait) plus restrained CSS-only motion (blocks settle on scroll,
 * a Copper rule draws itself in). No JavaScript. Nothing is hidden
 * unless the browser supports the animation and honors motion; the
 * base state of every element is visible and in place.
 *
 * Not yet in BUREAU_DESIGN_SYSTEM.md - this is the About-only
 * experiment. Fold into the spec only after it is approved live.
 */

.sc-ab {
  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-ab * { box-sizing: border-box; }

.sc-ab :where(h1, h2, h3, p, blockquote, figure, figcaption, ul, li) { color: inherit; }
.sc-ab :where(h1, h2, h3, p, blockquote, figure, ul) { margin: 0; }

.sc-ab__inner { max-width: var(--sc-grid-max-width); margin: 0 auto; }

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


/* ================================================================
   MOTION - scroll settle (CSS scroll-driven, no script)
   Base state is visible + in place. The animation only applies where
   animation-timeline is supported AND motion is allowed.
   ================================================================ */

.sc-ab .sc-settle { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sc-ab .sc-settle {
      animation: sc-ab-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 25%;
    }
  }
}

/* Never animate inside the Elementor editor - keep every section
   visible and in place while editing. */
.elementor-editor-active .sc-ab .sc-settle,
.elementor-editor-active .sc-ab__mark path,
.elementor-editor-active .sc-ab__quote-rule {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@keyframes sc-ab-settle {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   1 - THE THROUGH-LINE   (Pine field, mark motif)
   ================================================================ */

.sc-ab--intro {
  background-color: var(--sc-pine);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);       /* 144 */
  padding-bottom: var(--sc-space-7);
  position: relative;
  overflow: hidden;
}

.sc-ab--intro .sc-ab__inner { position: relative; }

.sc-ab__mark {
  position: absolute;
  top: -16%;
  right: -11%;
  width: min(60%, 640px);
  color: var(--sc-chalk);
  opacity: .12;
  pointer-events: none;
}
@media (max-width: 760px) {
  .sc-ab__mark { display: none; }   /* the Pine field carries the weight on small screens */
}

/* One-time draw on load. Default (and reduced-motion) state: fully drawn. */
.sc-ab__mark path {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .sc-ab__mark path { animation: sc-ab-draw-mark 550ms cubic-bezier(.2, .7, .1, 1) both; }
  .sc-ab__mark path:nth-child(1) { animation-delay: 60ms; }
  .sc-ab__mark path:nth-child(2) { animation-delay: 190ms; }
  .sc-ab__mark path:nth-child(3) { animation-delay: 320ms; }
  .sc-ab__mark path:nth-child(4) { animation-delay: 450ms; }
}
@keyframes sc-ab-draw-mark {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

.sc-ab__intro-copy { position: relative; max-width: 60ch; }

.sc-ab__intro-headline { margin-bottom: var(--sc-space-4); max-width: 20ch; }

.sc-ab--intro .sc-b2 { color: var(--sc-chalk-68); margin-top: var(--sc-space-3); }
.sc-ab--intro .sc-b2:first-of-type { margin-top: 0; }

.sc-ab__intro-kicker {
  color: var(--sc-chalk);
  margin-top: var(--sc-space-4);
  max-width: 24ch;
}


/* ================================================================
   2 - SELECTED CAREER PROOF POINTS
   ================================================================ */

.sc-ab--proof .sc-ab__section-head { margin-bottom: var(--sc-space-5); }

.sc-ab__proof-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;                              /* hairline grid: Stone shows through */
  background-color: var(--sc-stone);
  border: 1px solid var(--sc-stone);
}

.sc-ab__proof {
  background-color: var(--sc-chalk);
  padding: var(--sc-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
}

.sc-ab__proof-org { color: var(--sc-pine); }

.sc-ab__proof-note {
  max-width: 72ch;
  margin-top: var(--sc-space-4);
  color: rgba(27, 31, 35, .6);
}

@media (max-width: 760px) {
  .sc-ab__proof-list { grid-template-columns: 1fr; }
}


/* ================================================================
   3 - WORKING PHILOSOPHY
   ================================================================ */

.sc-ab--philosophy .sc-ab__section-head { margin-bottom: var(--sc-space-5); }

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


/* ================================================================
   4 - TESTIMONIAL   (Pine-toned portrait, Copper rule draws in)
   ================================================================ */

.sc-ab__testimonial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sc-space-6);
  align-items: start;
}

.sc-ab__portrait {
  margin: 0;
  position: relative;
  background-color: var(--sc-stone);     /* shows only while the image loads */
  min-height: 12rem;
}
.sc-ab__portrait img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.04);
}
.sc-ab__portrait::after {                 /* Pine duotone tone */
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--sc-pine);
  mix-blend-mode: color;
  opacity: .3;
  pointer-events: none;
}

.sc-ab__quote {
  margin: 0;
  position: relative;
  padding-left: var(--sc-space-4);
}
.sc-ab__quote-rule {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--sc-copper);
  transform-origin: top;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sc-ab__quote-rule {
      animation: sc-ab-draw-rule linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}
@keyframes sc-ab-draw-rule {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

.sc-ab__quote-text {
  font-family: var(--sc-font-body);
  font-weight: 400;
  font-size: var(--sc-type-b1-size);     /* 20 - a long reference quote, read for content */
  line-height: 1.6;
}
.sc-ab__quote-attr {
  font-family: var(--sc-font-body);
  font-size: var(--sc-type-b3-size);
  color: rgba(27, 31, 35, .6);
  margin-top: var(--sc-space-3);
}
.sc-ab__testimonial-context {
  max-width: 62ch;
  margin-top: var(--sc-space-5);
  color: rgba(27, 31, 35, .6);
}

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


/* ================================================================
   5 - CTA   (Graphite full-bleed, matches homepage / How We Work)
   ================================================================ */

.sc-ab--cta {
  background-color: var(--sc-graphite);
  color: var(--sc-chalk);
  padding-top: var(--sc-space-7);
  padding-bottom: var(--sc-space-7);
}
.sc-ab__cta { max-width: 42rem; }
.sc-ab__cta .sc-d2 { margin: 0; color: var(--sc-chalk); }
.sc-ab__cta-btn { margin-top: var(--sc-space-5); }


/* ================================================================
   RESPONSIVE - section padding (display type is handled globally
   in bureau-tokens.css)
   ================================================================ */

@media (max-width: 1024px) {
  .sc-ab {
    padding-left: var(--sc-space-5);
    padding-right: var(--sc-space-5);
  }
}

@media (max-width: 600px) {
  .sc-ab {
    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-ab--intro,
  .sc-ab--cta {
    padding-top: var(--sc-space-6);
    padding-bottom: var(--sc-space-6);
  }
}