@@ -1,8 +1,12 @@
 import { Box } from "@codeday/topo/Atom";
-import { Band, Section } from "@codeday/topo/Molecule";
+import { Band, SECTION_IMAGE_ANCHOR, Section } from "@codeday/topo/Molecule";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import React from "react";
 
+const INK_IMAGE = `data:image/svg+xml,${encodeURIComponent(
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 90"><rect width="160" height="90" fill="#fff"/><g fill="none" stroke="#000" stroke-width="3"><circle cx="80" cy="45" r="30"/><path d="M0 80 L160 10 M20 0 L140 90"/></g></svg>',
+)}`;
+
 const meta: Meta<typeof Section> = {
   title: "Molecule/Section",
   component: Section,
@@ -41,3 +45,36 @@ export const InsideTintedBand: Story = {
     </Box>
   ),
 };
+
+export const WithImage: Story = {
+  name: "Background image — blended into the section's own background",
+  render: () => (
+    <Box maxWidth="8xl" marginX="auto">
+      <Section ramp="hibiscus" backgroundColor="hibiscus.50" imgSrc={INK_IMAGE}>
+        <Box as="h2" fontSize="3xl" fontWeight="700" margin="0">
+          Covering image
+        </Box>
+      </Section>
+      <Section
+        ramp="figjam"
+        backgroundColor="figjam.50"
+        imgSrc={{ base: null, md: INK_IMAGE }}
+        imgSide="right"
+        imgPosition="left"
+        imgSize="contain"
+        imgMask="linear-gradient(to right, transparent, black {sizes.32})"
+      >
+        <Box
+          as="h2"
+          fontSize="3xl"
+          fontWeight="700"
+          margin="0"
+          maxWidth="md"
+          anchorName={SECTION_IMAGE_ANCHOR}
+        >
+          Beside the heading, overlapping and fading into it, hidden on mobile
+        </Box>
+      </Section>
+    </Box>
+  ),
+};
@@ -1,6 +1,13 @@
 import * as m from "@codeday/i18n/messages";
 import { Box, Grid, Text, Heading } from "@codeday/topo/Atom";
-import { ActionLink, AnnouncementPill, Band, Content, Section, Wash } from "@codeday/topo/Molecule";
+import {
+  ActionLink,
+  AnnouncementPill,
+  Band,
+  Content,
+  SECTION_IMAGE_ANCHOR,
+  Section,
+} from "@codeday/topo/Molecule";
 import { FormatCards, RowList, StatementBlock } from "@codeday/topo/Organism";
 import { apiFetch } from "@codeday/topo/utils";
 import { Broadcast } from "@codeday/topocons";
@@ -269,18 +276,25 @@ export default function Home({ query, seed, now }: HomeProps) {
           </Content>
         </Box>
 
-        <Wash ramp="hibiscus" shape="tint">
-          <Section ramp="hotsauce">
+        <Section
+          ramp="hotsauce"
+          backgroundColor="hibiscus.50"
+          imgSrc={{ base: null, md: "/images/cliff-ink.png" }}
+          imgSide="right"
+          imgPosition="left"
+          imgSize="contain"
+          imgMask="linear-gradient(to right, transparent, black {sizes.32})"
+        >
+          <Box maxWidth="container.lg" marginX="auto" display="flex">
             <StatementBlock
               size="section"
               ramp="hotsauce"
-              maxWidth="container.lg"
-              marginX="auto"
+              anchorName={SECTION_IMAGE_ANCHOR}
               heading={m.www_home_whymatters_heading()}
               body={[<Message key="body" message={m.www_home_whymatters_body} />]}
             />
-          </Section>
-        </Wash>
+          </Box>
+        </Section>
 
         <Section ramp="chilioil">
           <Box maxWidth="container.lg" marginX="auto">
@@ -336,11 +350,21 @@ export default function Home({ query, seed, now }: HomeProps) {
       </Band>
 
       <Band tone="tinted">
-        <Section ramp="chilioil">
-          <Box maxWidth="container.lg" marginX="auto">
+        <Section
+          ramp="chilioil"
+          backgroundColor="hibiscus.50"
+          imgSrc={{ base: null, md: "/images/study-classroom.png" }}
+          imgSide="left"
+          imgOverlap="{spacing.4}"
+          imgPosition="right"
+          imgSize="contain"
+          imgMask="linear-gradient(to left, transparent, black {sizes.32})"
+        >
+          <Box maxWidth="container.lg" marginX="auto" display="flex" justifyContent="flex-end">
             <StatementBlock
               size="section"
               ramp="chilioil"
+              anchorName={SECTION_IMAGE_ANCHOR}
               heading={m.www_home_evidence_heading()}
               body={[<Message key="body1" message={m.www_home_evidence_body1} />]}
               actions={[{ label: m.www_home_evidence_action(), href: "/research" }]}
 
@@ -176,8 +176,8 @@ const TRAITS: Trait[] = [
 const STEPS: Step[] = [
   { id: "bar", title: m.www_talent_how_bar_title, body: m.www_talent_how_bar_body },
   { id: "meet", title: m.www_talent_how_meet_title, body: m.www_talent_how_meet_body },
-  { id: "train", title: m.www_talent_how_train_title, body: m.www_talent_how_train_body },
   { id: "hire", title: m.www_talent_how_hire_title, body: m.www_talent_how_hire_body },
+  { id: "train", title: m.www_talent_how_train_title, body: m.www_talent_how_train_body },
 ];
 
 interface TalentProps {
 
@@ -161,7 +161,7 @@
   "www_home_history_compare_appstore": "iPhone App Store",
   "www_home_history_compare_cloud": "Cloud computing",
   "www_home_history_compare_chatgpt": "ChatGPT",
-  "www_home_whymatters_heading": "Entry-level jobs now ask for senior-level thinking.",
+  "www_home_whymatters_heading": "Entry-level jobs now ask for senior-level thinking. Today's graduates aren't prepared.",
   "www_home_whymatters_body": "{#p}AI does most entry-level work now. The bar for today's graduates is far higher. Jobs where graduates can expect detailed, clear assignments and hand-holding are going away.{/p}{#p}Today's graduates must find what is worth building, learn new fields, decide what context is relevant, and review results. CodeDay has been producing these students since 2009.{/p}{#p}If that becomes normal instead of lucky, the ordinary twenty-two-year-old is capable of what only the exceptional one is today.{/p}",
   "www_home_stats_heading": "Backed by peer-reviewed research:",
   "www_home_stats_link": "Read the research",
@@ -173,7 +173,7 @@
   "www_home_stats_econvalue_label": "Lifetime earnings gain for students who were otherwise unlikely to get a tech job",
   "www_home_stats_econvalue_provenance": "Or {otherNonprofits} if we counted the full salary of every participant, as most nonprofits do",
   "www_home_evidence_heading": "We publish peer-reviewed research on how our approach works, why it works, and how well it works.",
-  "www_home_evidence_body1": "{#p}We rigorously study what we run in-house and commission independent evaluations. Then we publish the findings where other researchers can check the work. Our programs evolve in response to what the evidence says, even when it's hard.{/p}{#p}While our vision has stayed the same since 2009, the design has changed many times, which is why our programs are so effective.{/p}",
+  "www_home_evidence_body1": "{#p}We study our programs ourselves, and we commission independent evaluations. Then we publish the findings where other researchers can check the work.{/p}{#p}While our vision has stayed the same since 2009, the design constantly evolves based on what the evidence shows, which is why our programs are so effective.{/p}",
   "www_home_evidence_action": "Read the research",
   "www_home_waysin_colleges_lead": "Colleges",
   "www_home_waysin_colleges_body": "Colleges work with CodeDay to help students learn the higher-order skills they need to get a job today. Our programs integrate into a class or capstone, or can be extra-curricular.",
@@ -488,8 +488,8 @@
   "www_talent_traits_curiosity_description": "Learns how things work without being told to.",
   "www_talent_traits_curiosity_proof": "Finding and reporting new bugs while working on something else.",
   "www_talent_traits_source": "From our peer-reviewed paper, \"The Open Source Resume\"",
-  "www_talent_profile_heading": "Read the evidence before the first interview.",
-  "www_talent_profile_body": "Every introduction comes as a profile like this one. Your hiring managers can see code shipped in open source software they recognize + evaluations written by senior engineers who worked with the candidate. In addition to top students, we filter by graduation date/years of exerience, availability, location, and work authorization up front so there's no need for a phone screen.",
+  "www_talent_profile_heading": "See evidence of significant experience before the first interview.",
+  "www_talent_profile_body": "Candidates come with a profile like this one. Your hiring managers can see code shipped in open source software they recognize + evaluations written by senior engineers who worked with the candidate. In addition to top students, we filter by graduation date/years of exerience, availability, location, work authorization, and interest in your company up front, so you'll only meet highly qualified candidates who are likely to convert.",
   "www_talent_profile_label": "Sample candidate profile",
   "www_talent_profile_initials": "MR",
   "www_talent_profile_name": "Maya R.",
@@ -513,15 +513,15 @@
   "www_talent_how_heading": "We work with your hiring managers to learn what a strong entry-level hire looks like.",
   "www_talent_how_body": "Most recruiting services can only search for candidates who already fit. We also train them. Our engineers work with your hiring managers to identify and/or prepare CodeDay students to meet your specific bar.",
   "www_talent_how_bar_title": "Agree on a high bar",
-  "www_talent_how_bar_body": "On a 20-minute call and a follow-up with your hiring managers, we write a hiring manager agreement that lists the traits a strong hire on your team needs and the work that would prove each one. If we can't meet the bar, we'll tell you.",
-  "www_talent_how_meet_title": "Meet engineers who already clear it",
+  "www_talent_how_bar_body": "On a 20-minute call and a follow-up with your hiring managers, we write a hiring manager document that lists the traits a strong hire on your team needs and the work that would prove each one.",
+  "www_talent_how_meet_title": "Meet engineers who clear the bar",
   "www_talent_how_meet_body": "We introduce alumni who already meet the agreement, each with a full profile.",
-  "www_talent_how_train_title": "Train more to it",
-  "www_talent_how_train_body": "If you need more candidates, we match current CodeDay Labs students with projects and senior engineer mentors that build the skills you asked for.",
+  "www_talent_how_train_title": "Train more students to exceed the bar",
+  "www_talent_how_train_body": "If you need more candidates, we match current CodeDay Labs students with projects and senior engineer mentors that build the skills your hiring managers asked for.",
   "www_talent_how_hire_title": "Interview and hire",
-  "www_talent_how_hire_body": "Every candidate has read your agreement and asked to meet you. We schedule interviews if you want.",
+  "www_talent_how_hire_body": "Every candidate meets your hiring managers' requirements and is interested in working at your company.",
   "www_talent_cta_heading": "Tell us about your next early-career hire.",
-  "www_talent_cta_body": "In 20 minutes we'll learn the role and tell you whether we have the candidates for it. If we do, we'll start on your first shortlist.",
+  "www_talent_cta_body": "In 20 minutes we'll learn the roles you want to fill, and determine next steps with you or your hiring managers to define what an amazing candidate looks like. Then we'll start sending you introductions.",
   "www_talent_cta_book": "Book a 20-minute call",
   "www_talent_cta_email": "Email talent@codeday.org"
 }
@@ -14,13 +14,62 @@ const SPACING: Record<SectionSpacing, BoxProps["paddingBlock"]> = {
 
 export const CONTENT_INSET: BoxProps["paddingInline"] = { base: "5", md: "12", xl: "32" };
 
+type Responsive<T> = T | Array<T> | Partial<Record<string, T>>;
+
+export type SectionImgSrc = Responsive<string | null>;
+
+export const SECTION_IMAGE_ANCHOR = "--section-image-anchor";
+
 export interface SectionProps extends BoxProps {
   ramp: GradientName;
   spacing?: SectionSpacing;
+  imgSrc?: SectionImgSrc;
+  imgOpacity?: BoxProps["opacity"];
+  imgBlendMode?: BoxProps["mixBlendMode"];
+  imgPosition?: BoxProps["backgroundPosition"];
+  imgSize?: BoxProps["backgroundSize"];
+  imgFilter?: BoxProps["filter"];
+  imgMask?: BoxProps["maskImage"];
+  imgSide?: "left" | "right";
+  imgOverlap?: string;
+}
+
+function toUrl(src: string | null | undefined): string {
+  return src ? `url("${src}")` : "none";
+}
+
+function imgSrcToBackground(src: SectionImgSrc): BoxProps["backgroundImage"] {
+  if (Array.isArray(src)) return src.map(toUrl);
+  if (src && typeof src === "object") {
+    return Object.fromEntries(
+      Object.entries(src as Partial<Record<string, string | null>>).map(([bp, v]) => [
+        bp,
+        toUrl(v),
+      ]),
+    );
+  }
+  return toUrl(src as string | null);
 }
 
 export const Section = React.forwardRef<HTMLElement, SectionProps>(
-  ({ ramp, spacing, children, ...props }, ref) => {
+  (
+    {
+      ramp,
+      spacing,
+      imgSrc,
+      imgOpacity = 0.9,
+      imgBlendMode = "multiply",
+      imgPosition = "center",
+      imgSize = "cover",
+      imgFilter = "grayscale(1) brightness(1.15) contrast(1.4)",
+      imgMask,
+      imgSide,
+      imgOverlap = "{spacing.8}",
+      children,
+      ...props
+    },
+    ref,
+  ) => {
     const contextSpacing = useContext(SectionSpacingContext);
     const resolvedSpacing = spacing ?? contextSpacing ?? "default";
 
@@ -31,9 +80,37 @@ export const Section = React.forwardRef<HTMLElement, SectionProps>(
         colorPalette={ramp}
         paddingBlock={SPACING[resolvedSpacing]}
         paddingInline={CONTENT_INSET}
+        {...(imgSrc && { position: "relative", isolation: "isolate", overflow: "hidden" })}
         {...props}
       >
         {children}
+        {imgSrc && (
+          <Box
+            aria-hidden
+            position="absolute"
+            insetBlock="0"
+            left={
+              imgSide === "right"
+                ? `calc(anchor(${SECTION_IMAGE_ANCHOR} right) - ${imgOverlap})`
+                : "0"
+            }
+            right={
+              imgSide === "left"
+                ? `calc(anchor(${SECTION_IMAGE_ANCHOR} left) - ${imgOverlap})`
+                : "0"
+            }
+            zIndex={-1}
+            backgroundImage={imgSrcToBackground(imgSrc)}
+            backgroundSize={imgSize}
+            backgroundPosition={imgPosition}
+            backgroundRepeat="no-repeat"
+            mixBlendMode={imgBlendMode}
+            filter={imgFilter}
+            maskImage={imgMask}
+            opacity={imgOpacity}
+            pointerEvents="none"
+          />
+        )}
       </Box>
     );
   },