/* Synthminds About page (Baseline 11).
   Page-scoped supplements only. Reuses B09 BaseLayout tokens and the
   home-methodology media-layer architecture; no global styles introduced.
   NOTE: this stylesheet loads BEFORE BaseLayout.css, so every override of a
   BaseLayout rule uses a compound selector to win the cascade. */

/* Hero framing: keep the table and screen visible on the right while the
   left half stays quiet for the copy. */
.hero-media.about-hero-media{object-position:58% center}

/* How it thinks: full-section media layer behind the section. The deployed
   asset is /assets/about/about-how-it-thinks-*.webp, derived from the
   supplied slowthenfaster.png source image. 58% horizontal keeps the horse
   readable while the darker left/centre zone carries the text. */
.home-methodology.about-how-it-thinks .home-methodology-media img{object-position:58% center}

/* How it thinks layout (B11): the lede sits directly under the H2; the main
   grid places the narrative left and the People/AI cards right; the closing
   statement sits below a fine full-width divider in two columns. */
.home-methodology.about-how-it-thinks .hero-lede{margin-top:20px}
.about-how-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:clamp(28px,4vw,56px);align-items:start}
.statement-copy .about-syne-emphasis{font-family:Syne,Arial,sans-serif;font-weight:700;font-size:clamp(20px,2vw,25px);line-height:1.16;letter-spacing:-.01em;color:var(--white)}
.about-how-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.about-role-card{border:1px solid var(--line);background:#080807c7;backdrop-filter:blur(8px);padding:clamp(24px,2.6vw,32px);min-width:0}
.about-role-label{font-family:Syne,Arial,sans-serif;font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin:0 0 14px}
.about-role-title{font-family:Syne,Arial,sans-serif;font-weight:700;font-size:clamp(20px,2vw,25px);line-height:1.18;color:var(--white);margin:0}
.about-role-copy{font-size:16px;color:var(--muted);line-height:1.5;margin:12px 0 0}
.about-how-lower{border-top:1px solid var(--line);margin-top:clamp(36px,5vw,56px);padding-top:clamp(30px,4vw,38px);display:grid;grid-template-columns:minmax(220px,.45fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.about-lower-title{font-family:Syne,Arial,sans-serif;font-weight:700;font-size:clamp(20px,2vw,25px);line-height:1.18;color:var(--orange);margin:0;max-width:24ch}
.statement-copy.about-lower-copy p{font-size:16px;line-height:1.6}

/* Where this began: the founder appears as a presence inside the section
   (alpha-composited cutout on the right, facing inward toward the text,
   fading into shadow). Gradient is solid behind the text zone and opens up
   toward the right edge so she reads at her natural subdued luminosity. */
.home-methodology.about-where-this-began:after{background:linear-gradient(90deg,#080807fa 0%,#080807e9 40%,#08080796 68%,#08080738 88%,#0808071f 100%),linear-gradient(#0000 58%,#08080799)}
.home-methodology.about-where-this-began .home-methodology-media img{object-position:right center}
.about-began-copy{max-width:64ch}

/* Where it works: full-section media layer (light grey working-table image).
   Gradient strongest on the left and centre-left where the text sits; the
   right side stays visible to retain the tablet and working table. */
.home-methodology.about-where-it-works:after{background:linear-gradient(90deg,#080807fa 0%,#080807e6 44%,#0808078c 72%,#0808074d 100%),linear-gradient(#0000 46%,#0808079e)}
.home-methodology.about-where-it-works .home-methodology-media img{object-position:center}
.about-where-copy{display:grid;gap:22px;max-width:68ch}
.about-where-copy p{font-size:clamp(17px,1.55vw,19px)}
.about-where-copy p{margin:0}

/* Responsive behaviour. Mobile keeps stronger vertical dark overlays,
   consistent with the B09 mobile hero behaviour, so copy stays readable
   over all three media sections. */
@media (width<=940px){
  .home-methodology.about-how-it-thinks:after{background:linear-gradient(#0808073d 0%,#080807bd 38%,#080807fa 100%)}
  .home-methodology.about-where-it-works:after{background:linear-gradient(#08080759 0%,#080807c7 38%,#080807fa 100%)}
  .home-methodology.about-where-this-began:after{background:linear-gradient(#08080773 0%,#080807d6 42%,#080807fa 100%)}
  .home-methodology.about-where-this-began .home-methodology-media img{object-position:85% 22%}
  .about-how-grid{grid-template-columns:1fr}
}
@media (width<=700px){
  .about-how-cards{grid-template-columns:1fr}
  .about-how-lower{grid-template-columns:1fr}
}