/* Brand faces embedded as data URIs, the Artifact CSP blocks font CDNs,
     so a linked webfont would silently fall back to Helvetica. Both are
     SIL Open Font License. Montserrat's file is variable and covers 400+700. */
  @font-face {
    font-family: "BH Sans";
    src: url(assets/bh-sans.woff2) format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "BH Serif";
    src: url(assets/bh-serif.woff2) format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "BH Serif";
    src: url(assets/bh-serif-italic.woff2) format("woff2");
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
  }

  /* Palette lifted from Wispr Flow: warm ivory ground, near-black ink,
     saturated accents used as flat blocks rather than gradients.
     Deliberately single-theme, this is a brand identity, not a UI, so it
     reads the same cream regardless of the viewer's OS setting. */
  :root,
  :root[data-theme="dark"],
  :root[data-theme="light"] {
    --ivory: #ffffeb;
    --ink: #1a1a1a;
    --ink-60: rgba(26, 26, 26, 0.62);
    --ink-40: rgba(26, 26, 26, 0.4);
    --ink-12: rgba(26, 26, 26, 0.12);
    --violet: #7c4dff;
    --red: #f4260c;
    --green: #034f46;
    --lilac: #f0d7ff;
    --card: #fbfbe4;
    --on-lilac: #1a1a1a;
    --radius: 18px;
  }

  html { background: #ffffeb; color-scheme: light; }
  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font-family: "BH Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
  }

  .shell { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }

  em.s {
    font-family: "BH Serif", Georgia, serif;
    font-style: italic;
    font-weight: 400;
  }

  /* ── Nav ───────────────────────────────────────────────── */
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    flex-wrap: wrap;
  }

  /* Brand lockup, the supplied logo artwork, unmodified. */
  .brand { display: inline-flex; align-items: center; text-decoration: none; }
  .brand__logo { display: block; width: auto; height: 52px; }
  .brand__logo--foot { height: 32px; }
  .brand:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; border-radius: 6px; }


  .pill {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--ivory);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.18s ease;
  }

  .pill:hover { background: var(--lilac); color: var(--on-lilac); }
  .pill:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
  .pill--accent { background: var(--lilac); color: var(--on-lilac); }
  .pill--accent:hover { background: var(--ink); color: var(--ivory); }

  /* Outlined twin, same size as its pair so neither reads as the afterthought. */
  .pill--ghost {
    background: transparent;
    color: var(--ink);
    box-shadow: inset 0 0 0 2px var(--ink);
  }

  .pill--ghost:hover { background: var(--ink); color: var(--ivory); box-shadow: none; }

  /* ── Hero ──────────────────────────────────────────────── */
  .hero { padding: clamp(52px, 8vw, 104px) 0 clamp(32px, 5vw, 56px); }

  .hero h1 {
    margin: 0;
    font-size: clamp(31px, 4.2vw, 48px);
    line-height: 1.07;
    letter-spacing: -0.03em;
    font-weight: 700;
    max-width: 23ch;
    text-wrap: balance;
  }

  /* Closer to the headline in size than it was, a 60/19 gap left the
     subline looking like a footnote. */
  .hero p {
    margin: 26px 0 0;
    max-width: 50ch;
    font-size: clamp(17px, 1.9vw, 22px);
    line-height: 1.5;
    color: var(--ink-60);
  }

  /* Stacked CTAs, each with a curve arcing out to its own annotation, same drawn-line language as the journey further down the page. */
  .hero__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    margin-top: 34px;
  }

  .cta-row { display: flex; align-items: flex-end; gap: 2px; }

  .cta-row .pill { flex: 0 0 auto; }

  .cta-curve {
    width: 62px;
    height: 38px;
    flex: 0 0 auto;
    margin-bottom: 6px;
    fill: none;
    stroke: var(--ink-40);
    stroke-width: 2;
    stroke-linecap: round;
  }

  .cta-note {
    font-family: "BH Serif", Georgia, serif;
    font-style: italic;
    font-size: 17px;
    line-height: 1.35;
    color: var(--ink-60);
    max-width: 42ch;
    padding-bottom: 2px;
    text-wrap: balance;
  }

  @media (max-width: 620px) {
    .cta-row { flex-direction: column; align-items: flex-start; gap: 8px; }
    .cta-curve { display: none; }
    .cta-note { padding-bottom: 0; }
  }


  /* ── Numbers bar ───────────────────────────────────────── */




  /* ── Section scaffolding ───────────────────────────────── */
  .sec { padding: clamp(52px, 7.5vw, 96px) 0; }

  .sec__label {
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-60);
    margin-bottom: 16px;
  }

  .sec h2 {
    margin: 0;
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.032em;
    font-weight: 700;
    max-width: 20ch;
    text-wrap: balance;
  }

  .sec > p.lede {
    margin: 20px 0 0;
    max-width: 56ch;
    font-size: 17px;
    color: var(--ink-60);
  }

  /* Fully centred section, header and the content under it. */
  /* Balancing splits this one after "of", orphaning "one" onto the italic
     line, the two halves are a pair, so break between them explicitly. */
  .h2--split em { display: block; }

  .sec--center .sec__label { text-align: center; }
  .sec--center h2 { margin-inline: auto; text-align: center; }
  .sec--center > p.lede { margin-inline: auto; text-align: center; }
  .sec--center .team { margin-inline: auto; }
  .sec--center .person { align-items: center; text-align: center; }

  /* ── The journey ───────────────────────────────────────────
     A single hand-drawn-feeling path snakes down the section and
     draws itself as you scroll; the points sit on the curve and
     light as the line reaches them. Path geometry is computed in
     JS from the real node positions, so it stays true at any width.
     ──────────────────────────────────────────────────────── */
  .journey {
    position: relative;
    list-style: none;
    margin: clamp(44px, 6vw, 76px) 0 0;
    padding: 0;
  }

  .journey__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
  }

  .journey__track,
  .journey__draw,
  .journey__arrow {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .journey__track { stroke: var(--ink-12); }
  .journey__draw { stroke: var(--ink); }

  /* The line runs on past the last point and arrows down into the result
     below, so the process visibly hands off to the proof. */
  .journey__arrow {
    stroke: var(--ink);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .journey.is-done .journey__arrow { opacity: 1; }

  .journey__step {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* A deliberately wide centre corridor, this is the space the curve
       travels through, so the swing has somewhere to go. */
    column-gap: clamp(40px, 20vw, 300px);
    padding: clamp(30px, 5vw, 68px) 0;
  }

  /* Mirrored on purpose: the dot always sits on the inner edge, so the curve
     travels down the centre corridor and never crosses any text. */
  .journey__card { grid-column: 1; position: relative; padding-right: 52px; text-align: right; }
  .journey__card > .journey__text > h3,
  .journey__card > .journey__text > p { margin-left: auto; }

  .journey__step--r .journey__card {
    grid-column: 2;
    padding-right: 0;
    padding-left: 52px;
    text-align: left;
  }

  .journey__step--r .journey__card > .journey__text > h3,
  .journey__step--r .journey__card > .journey__text > p { margin-left: 0; }

  .journey__dot {
    position: absolute;
    right: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ivory);
    border: 2.5px solid var(--ink-12);
    transition: background-color 0.45s ease, border-color 0.45s ease, transform 0.45s ease;
  }

  .journey__step--r .journey__dot { right: auto; left: 0; }

  .journey__step.is-in .journey__dot {
    background: var(--ink);
    border-color: var(--ink);
    transform: scale(1.18);
  }

  .journey__text {
    opacity: 0.28;
    transform: translateY(10px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .journey__step.is-in .journey__text { opacity: 1; transform: none; }

  .journey__n {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--ink-40);
    font-variant-numeric: tabular-nums;
    margin-bottom: 14px;
  }

  .journey__step h3 {
    margin: 0;
    font-size: clamp(24px, 2.7vw, 31px);
    line-height: 1.08;
    letter-spacing: -0.032em;
    font-weight: 700;
    max-width: 15ch;
    text-wrap: balance;
  }

  .journey__step p {
    margin: 12px 0 0;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.5;
    color: var(--ink-60);
    max-width: 34ch;
  }

  @media (max-width: 760px) {
    .journey__step { grid-template-columns: minmax(0, 1fr); }
    .journey__card,
    .journey__step--r .journey__card {
      grid-column: 1;
      padding-right: 0;
      padding-left: 46px;
      text-align: left;
    }
    .journey__card > .journey__text > h3,
    .journey__card > .journey__text > p { margin-left: 0; }
    .journey__dot,
    .journey__step--r .journey__dot { right: auto; left: 0; }
  }

  /* Reduced motion: the path is already drawn and every point is lit, so the
     journey reads as a finished diagram rather than something waiting to move. */
  @media (prefers-reduced-motion: reduce) {
    .journey__text { opacity: 1; transform: none; }
    .journey__dot { background: var(--ink); border-color: var(--ink); }
  }

  /* ── Case study ────────────────────────────────────────── */
  .case {
    background: var(--card);
    border: 1px solid var(--ink-12);
    border-radius: clamp(18px, 2.5vw, 26px);
    padding: clamp(28px, 4vw, 48px);
    margin-top: 20px;
  }

  .case__tag {
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink-40);
  }

  .case h3 {
    margin: 12px 0 0;
    font-size: clamp(24px, 2.7vw, 31px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 22ch;
    text-wrap: balance;
  }

  .case p { margin: 16px 0 0; max-width: 60ch; color: var(--ink-60); font-size: 15px; }

  .stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--ink-12);
    border: 1px solid var(--ink-12);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 28px;
  }

  .stat { background: var(--ivory); padding: 20px 18px; }
  .stat__k { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-40); }
  .stat__v {
    margin-top: 8px;
    font-size: clamp(20px, 2.6vw, 27px);
    letter-spacing: -0.03em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .stat__d { font-size: 12px; color: var(--green); margin-top: 4px; font-weight: 600; }

  .hero-figure {
    font-family: "BH Serif", Georgia, serif;
    font-size: clamp(52px, 9vw, 104px);
    line-height: 1;
    letter-spacing: -0.03em;
    font-weight: 700;
    margin: 22px 0 0;
    font-variant-numeric: tabular-nums;
  }

  /* ── Dark band ─────────────────────────────────────────── */
  .band {
    background: #1a1a1a;
    color: #ffffeb;
    border-radius: clamp(18px, 2.5vw, 28px);
    padding: clamp(36px, 5.5vw, 68px) clamp(26px, 5vw, 60px);
    margin: clamp(18px, 3vw, 32px) 0;
  }

  .band h2 {
    margin: 0;
    font-size: clamp(26px, 4vw, 44px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    max-width: 20ch;
    text-wrap: balance;
  }

  .band p { margin: 18px 0 0; max-width: 54ch; color: rgba(255, 255, 235, 0.7); font-size: 16px; }

  .band .stats { background: rgba(255, 255, 235, 0.16); border-color: rgba(255, 255, 235, 0.16); }
  .band .stat { background: #1a1a1a; }
  .band .stat__k { color: rgba(255, 255, 235, 0.5); }
  .band .stat__d { color: #9fe0c0; }

  /* ── Team ──────────────────────────────────────────────── */
  /* The artist sits on their own row above the three of us, the section is
     about what gets added underneath them, so the stacking is the argument. */
  .lineup {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(36px, 5vw, 52px);
  }

  /* Branch lines are measured from the rendered nodes, so the diagram holds
     together at any width instead of being hand-placed for one breakpoint. */

  .lineup__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
  }

  .lineup__svg path {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: 0.34;
  }

  .lineup__svg circle { fill: var(--ink); opacity: 0.34; }

  .lineup .person { position: relative; z-index: 1; }

  .team {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(26px, 3vw, 40px);
    margin-top: clamp(76px, 9vw, 118px);
    width: 100%;
    max-width: 700px;
  }

  @media (max-width: 620px) {
    .team { gap: 18px; margin-top: 76px; }
  }

  .person { margin: 0; display: flex; flex-direction: column; gap: 18px; }

  /* Wrapper exists so the founder badge can hang off the circle. */
  .person__pic { position: relative; width: 100%; max-width: 180px; align-self: center; }

  .person img {
    display: block;
    width: 100%;
    /* height:auto is load-bearing, the height="360" attribute is a
       presentational hint that would otherwise win over aspect-ratio. */
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
  }

  /* The artist's own place in the line-up. Filled, not dashed, a dashed ring
     reads as a missing upload rather than a person. */
  .person--you { width: 100%; max-width: 210px; }

  .person__seat {
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ink);
    display: grid;
    place-items: center;
    font-family: 'BH Serif', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(32px, 4vw, 42px);
    color: var(--ivory);
    line-height: 1;
  }

  .person__badge {
    position: absolute;
    left: 50%;
    bottom: -9px;
    transform: translateX(-50%);
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--lilac);
    color: var(--on-lilac);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Ring in the page colour so the pill sits on the photo, not in it. */
    box-shadow: 0 0 0 4px var(--ivory);
  }

  .person b {
    display: block;
    font-size: clamp(17px, 1.9vw, 20px);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  .person span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-60); }

  /* .person span outranks .person__badge on specificity, so the badge never
     got its own colour. Restate it with equal reach. */
  .person .person__badge { display: inline; margin-top: 0; font-size: 10px; color: var(--on-lilac); }

  .person .person__job {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-40);
  }

  /* ── Founder's note ────────────────────────────────────────
     Three beats: the reader's own worry, the reframe at headline
     scale, then Bobby explaining in messages. The size lands on the
     question; the intimacy lands on the reply.
     ──────────────────────────────────────────────────────── */
  .dm { max-width: 900px; }

  .dm__bubble {
    position: relative;
    margin: 0;
    background: #f4f1dd;
    border: 1px solid rgba(26, 26, 26, 0.08);
    border-radius: 22px;
    padding: 18px 26px;
    font-size: clamp(16px, 1.85vw, 20px);
    line-height: 1.5;
    letter-spacing: -0.008em;
    box-shadow: 0 2px 12px rgba(26, 26, 26, 0.05);
  }

  /* beat 1, the reader's thought, right-aligned like their own message */
  .dm__youk {
    display: block;
    text-align: right;
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-40);
  }

  .dm__you { display: flex; justify-content: flex-end; }

  .dm__you .dm__bubble {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ivory);
    max-width: 30ch;
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.38;
  }

  .dm__you .dm__bubble::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 19px;
    width: 14px;
    height: 14px;
    background: var(--ink);
    transform: rotate(26deg) skew(8deg, 8deg);
    border-bottom-right-radius: 3px;
  }

  /* The reframe opens the section, set against the right edge so it shares an
     axis with the thought it's answering. */
  .dm__q {
    margin: 0 0 clamp(38px, 5vw, 64px) auto;
    text-align: right;
    font-size: clamp(30px, 3.6vw, 42px);
    line-height: 1.03;
    letter-spacing: -0.038em;
    font-weight: 700;
    max-width: 17ch;
    text-wrap: balance;
  }

  .dm__q em { display: block; }

  /* beat 3, Bobby, in messages */
  .dm__me { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; }

  .dm__avatar {
    width: 60px;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    grid-row: 1 / span 2;
  }

  .dm__who { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
  .dm__who b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
  .dm__who span { font-size: 14px; color: var(--ink-40); }

  .dm__thread { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .dm__thread .dm__bubble { max-width: 48ch; }

  .dm__thread .dm__bubble:first-child::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 19px;
    width: 14px;
    height: 14px;
    background: #f4f1dd;
    border-left: 1px solid rgba(26, 26, 26, 0.08);
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    transform: rotate(26deg) skew(-8deg, -8deg);
    border-bottom-left-radius: 3px;
  }

  .dm__bubble b { font-weight: 700; }

  /* ── The conversation continues ────────────────────────────
     The proof is delivered the way it actually happens: they ask,
     we answer, and the screenshots arrive as attachments.
     ──────────────────────────────────────────────────────── */
  /* Same measure as .dm, the two blocks are one conversation, so they have
     to share a right edge or the thread visibly steps outward halfway. */
  .chat { display: flex; flex-direction: column; max-width: 900px; gap: clamp(26px, 3.4vw, 44px); margin-top: clamp(30px, 4vw, 52px); }

  .chat__them { display: flex; justify-content: flex-end; }

  .chat__them .dm__bubble {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ivory);
    max-width: 32ch;
    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.38;
  }

  .chat__them .dm__bubble::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 19px;
    width: 14px;
    height: 14px;
    background: var(--ink);
    transform: rotate(26deg) skew(8deg, 8deg);
    border-bottom-right-radius: 3px;
  }

  .chat__me { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 18px; }
  .chat__me > .dm__avatar { grid-row: 1; align-self: start; }

  .chat__stack { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
  .chat__stack > .dm__bubble { max-width: 46ch; }

  .chat__stack > .dm__bubble:first-child::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 19px;
    width: 14px;
    height: 14px;
    background: #f4f1dd;
    border-left: 1px solid rgba(26, 26, 26, 0.08);
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    transform: rotate(26deg) skew(-8deg, -8deg);
    border-bottom-left-radius: 3px;
  }

  /* screenshots arrive as attachments, sized like something you'd send */
  .chat__shot { margin: 2px 0 0; max-width: 430px; width: 100%; }

  .chat__shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    border: 1px solid var(--ink-12);
  }

  .chat__row {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .chat__row.is-in { opacity: 1; transform: none; }

  @media (max-width: 560px) {
    .chat__me { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .chat__row { opacity: 1; transform: none; }
  }

  /* the three beats arrive in order */
  .dm__beat {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .dm__beat--2 { transition-delay: 0.22s; }
  .dm__beat--3 { transition-delay: 0.44s; }
  .dm.is-in .dm__beat { opacity: 1; transform: none; }

  @media (max-width: 560px) {
    .dm__me { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
    .dm__avatar { width: 44px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dm__beat { opacity: 1; transform: none; }
  }

  /* ── Simple three-up ───────────────────────────────────── */

  /* ── FAQ ───────────────────────────────────────────────────
     Native <details>/<summary>, so it's keyboard-operable and works
     with no JS at all.
     ──────────────────────────────────────────────────────── */
  .faq { max-width: 800px; margin-top: clamp(34px, 4.5vw, 52px); border-top: 1px solid var(--ink-12); }

  .faq details { border-bottom: 1px solid var(--ink-12); }

  .faq summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-size: clamp(17px, 1.95vw, 21px);
    font-weight: 700;
    letter-spacing: -0.022em;
  }

  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--violet); }
  .faq summary:focus-visible { outline: 2px solid var(--violet); outline-offset: 4px; border-radius: 4px; }

  /* plus that becomes a minus */
  .faq summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    color: var(--ink-40);
    transform: translateY(2px);
  }

  .faq details[open] summary::after { content: "\2013"; }

  .faq p {
    margin: 0 0 24px;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-60);
  }


  /* ── Essay ─────────────────────────────────────────────── */
  /* Prose, not cards, the page has enough grids. Heading holds the left
     column so the argument runs as one uninterrupted read on the right. */
  .essay {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(28px, 4.2vw, 64px);
    align-items: start;
  }

  .essay__head h2 { max-width: 24ch; font-size: clamp(26px, 2.9vw, 34px); }

  .essay__body { display: flex; flex-direction: column; gap: 22px; max-width: 60ch; }
  .essay__body p { margin: 0; font-size: 16px; line-height: 1.68; color: var(--ink-60); }
  .essay__lead { font-size: 19px !important; line-height: 1.56 !important; color: var(--ink) !important; }

  /* The four questions are the substance, so they get their own rhythm. */
  .essay__qs {
    list-style: none;
    margin: 4px 0;
    padding: 0 0 0 22px;
    border-left: 2px solid var(--ink-12);
    display: flex;
    flex-direction: column;
    gap: 13px;
  }

  .essay__qs li { font-size: 16px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }

  .essay__close {
    font-family: 'BH Serif', Georgia, serif;
    font-style: italic;
    font-size: clamp(21px, 2.6vw, 27px) !important;
    line-height: 1.3 !important;
    color: var(--ink) !important;
    letter-spacing: -0.015em;
    margin-top: 6px !important;
  }

  @media (max-width: 780px) {
    .essay { grid-template-columns: 1fr; }
    .essay__head h2 { max-width: 20ch; }
  }

  /* ── Interruption ──────────────────────────────────────
     Sits on the page's own ground; the bubble carries the contrast. */
  .interrupt { max-width: 620px; margin-inline: auto; }

  .interrupt__who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
  }

  .interrupt__face {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
  }

  .interrupt__who span { font-size: 14px; color: var(--ink-40); }
  .interrupt__who b { color: var(--ink); font-weight: 600; margin-right: 7px; }

  .interrupt__bubble {
    position: relative;
    margin: 0 0 0 58px;
    padding: 20px 26px;
    border-radius: 22px;
    background: var(--ink);
    color: var(--ivory);
    font-size: clamp(16px, 1.9vw, 19px);
    line-height: 1.5;
  }

  .interrupt__bubble::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 20px;
    width: 14px;
    height: 14px;
    background: var(--ink);
    transform: rotate(26deg) skew(8deg, 8deg);
    border-bottom-left-radius: 3px;
  }

  @media (max-width: 560px) {
    .interrupt__bubble { margin-left: 0; }
  }

  /* Five stats in an auto-fit grid leave a hole on a phone, and because the
     grid's own background shows through the gaps, the hole renders as a solid
     block. Pin two columns and let the odd one out span the row. */
  @media (max-width: 900px) {
    .stats { grid-template-columns: 1fr 1fr; }
    .stat:last-child { grid-column: 1 / -1; }
  }

  /* At three-up on a phone each cell is ~102px, and the badge was 109px, wide enough to sit over its neighbour. */
  @media (max-width: 620px) {
    .person__badge { font-size: 9px; padding: 4px 8px; letter-spacing: 0.08em; }
    .person__job { letter-spacing: 0.05em; font-size: 11px; }
  }

  /* ── Touch targets ─────────────────────────────────────
     Anything tappable gets to 44px on a phone. Scoped to mobile so the
     desktop spacing stays exactly as designed. */
  @media (max-width: 620px) {
    .reel__link,
    .brand {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }
  }

  /* ── Sticky CTA ────────────────────────────────────────── */
  /* Duplicates the nav link, so it's hidden from assistive tech and the tab
     order, it appears once the hero is gone and gets out of the way whenever
     a form is actually on screen. */
  .jump {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 40;
    padding: 14px 24px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--ivory);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 26px rgba(26, 26, 26, .22);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .26s ease, transform .26s ease, background .18s ease, color .18s ease;
  }

  .jump.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .jump:hover { background: var(--lilac); color: var(--on-lilac); }

  @media (max-width: 560px) {
    .jump { left: 16px; right: 16px; bottom: 16px; text-align: center; }
  }

  @media (prefers-reduced-motion: reduce) {
    .jump { transition: opacity .01ms; transform: none; }
  }

  /* ── Testimonials ──────────────────────────────────────── */
  /* Two hand-packed columns rather than a 3-up grid: the quotes are wildly
     different lengths and nobody's words get trimmed to fit a box. */
  .quotes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 18px;
    margin-top: 44px;
  }

  .quotes__col { display: flex; flex-direction: column; gap: 18px; }

  .quote {
    background: var(--card);
    border: 1px solid var(--ink-12);
    border-radius: var(--radius);
    padding: 30px 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  .quote__body { display: flex; flex-direction: column; gap: 13px; }
  .quote__body p { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink-60); }

  /* The strongest sentence, pulled out so the section can be skimmed. */
  .quote__lead {
    font-size: 18px !important;
    line-height: 1.42 !important;
    font-weight: 600;
    color: var(--ink) !important;
    letter-spacing: -0.012em;
    text-wrap: pretty;
  }

  .quote__by {
    margin-top: auto;
    padding-top: 2px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .quote__name { font-weight: 600; font-size: 15px; }

  .quote__org {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-40);
  }

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

  /* ── Close ─────────────────────────────────────────────── */
  .close {
    background: var(--card);
    border: 1px solid var(--ink-12);
    border-radius: clamp(20px, 3vw, 30px);
    padding: clamp(44px, 6vw, 82px) clamp(26px, 5vw, 64px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .close h2 {
    margin: 0;
    max-width: 16ch;
    font-size: clamp(32px, 3.8vw, 44px);
    line-height: 1.02;
    letter-spacing: -0.038em;
    font-weight: 700;
    text-wrap: balance;
  }

  .close p { margin: 0; max-width: 46ch; color: var(--ink-60); font-size: 16px; }
  .close__lead {
    font-size: 18px !important;
    color: var(--ink) !important;
    max-width: 38ch !important;
    text-wrap: balance;
  }

  /* The form is the whole offer, so it gets to be the quiet centre of the
     section: no box around it, just fields on rules. */
  .fit {
    width: min(100%, 460px);
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    text-align: left;
  }

  .fit__field { display: flex; flex-direction: column; gap: 7px; }

  .fit__field label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-40);
  }

  .fit__field input {
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ink-12);
    border-radius: 0;
    padding: 8px 2px 11px;
    transition: border-color .18s ease;
  }

  .fit__field input::placeholder { color: rgba(26, 26, 26, .28); }
  .fit__field input:hover { border-bottom-color: var(--ink-40); }

  .fit__field input:focus {
    outline: none;
    border-bottom-color: var(--violet);
    box-shadow: 0 1px 0 0 var(--violet);
  }

  .fit__hp { position: absolute; left: -9999px; }

  .fit button {
    font: inherit;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    border: 0;
    margin-top: 4px;
    padding: 15px 26px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--ivory);
    transition: background .18s ease, color .18s ease;
  }

  .fit button:hover { background: var(--lilac); color: var(--on-lilac); }
  .fit button:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

  .fit__note {
    margin: 0;
    text-align: center;
    font-size: 13px;
    color: var(--ink-40);
  }


  /* ── Screenshots ───────────────────────────────────────── */
  .shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 22px;
    margin-top: 42px;
    align-items: start;
  }

  /* Two-up variant keeps the wider screenshots from stretching across
     three columns and going soft. */
  .shots--two {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 860px;
  }

  .shot { margin: 0; display: flex; flex-direction: column; gap: 15px; }

  .shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--ink-12);
  }

  .shot figcaption { font-size: 14px; line-height: 1.5; color: var(--ink-60); }

  .shot figcaption b {
    display: block;
    color: var(--ink);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.015em;
    margin-bottom: 3px;
  }

  /* ── Reel ──────────────────────────────────────────────── */
  .reel {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: clamp(26px, 5vw, 60px);
    align-items: center;
    margin-top: 42px;
  }

  .reel__player {
    position: relative;
    display: block;
    /* A <video> carries an intrinsic width from its file, so without this it
       overflows the grid column. A linked <img> never did. */
    width: 100%;
    height: auto;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--ink-12);
    background: #1a1a1a;
    aspect-ratio: 9 / 16;
    text-decoration: none;
  }

  .reel__player img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* It is a <video> now rather than a linked poster, so it needs the same
     object-fit treatment and its own controls sit on top. */
  video.reel__player { object-fit: cover; }

  .reel__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
  }

  /* Opaque and oversized on purpose, the poster frame Instagram generates has
     their own play triangle burned in, so a smaller translucent button reads as
     a double ring. Swap the poster for a clean video frame and this can shrink. */
  .reel__play span {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #ffffeb;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.34);
    transition: transform 0.18s ease;
  }

  .reel__player:hover .reel__play span { transform: scale(1.06); }
  .reel__player:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }

  .reel__play svg { width: 28px; height: 28px; margin-left: 4px; fill: #1a1a1a; }

  .reel__body h3 {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    max-width: 18ch;
    text-wrap: balance;
  }

  .reel__body p { margin: 18px 0 0; color: var(--ink-60); font-size: 16px; max-width: 46ch; }

  .reel__facts {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 44ch;
  }

  .reel__facts li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.45;
  }

  .reel__facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink);
  }

  .reel__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .reel__link:hover { color: var(--violet); }

  @media (max-width: 720px) {
    .reel { grid-template-columns: 1fr; }
    .reel__player { max-width: 300px; }
  }

  /* ── Award ─────────────────────────────────────────────── */
  .award {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    background: var(--card);
    border: 1px solid var(--ink-12);
    border-radius: clamp(18px, 2.5vw, 26px);
    padding: clamp(26px, 3.5vw, 44px);
    margin-top: 40px;
  }

  .award__body h3 {
    margin: 14px 0 0;
    font-family: "BH Serif", Georgia, serif;
    font-weight: 400;
    font-size: clamp(28px, 2.9vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .award__body p { margin: 18px 0 0; color: var(--ink-60); font-size: 15px; max-width: 46ch; }

  .award__badge {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--lilac);
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .award__shot {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--ink-12);
  }

  .award__cap { margin-top: 10px; font-size: 12px; color: var(--ink-40); }

  @media (max-width: 780px) {
    .award { grid-template-columns: 1fr; }
  }

  .foot {
    display: flex; justify-content: space-between; gap: 20px;
    padding: 44px 0 64px; font-size: 13px; color: var(--ink-60); flex-wrap: wrap;
  }

  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
  }
  /* Three faces as a signature, not a team section, the line underneath
     claims a little team, and this is the proof of it. */
  /* Inline, so the faces sit inside the sentence and read as its subject, as a separate row above it they could just as easily have been the
     artists the same sentence mentions. */
  .hero__faces {
    display: inline-flex;
    vertical-align: -13px;
    margin-right: 12px;
  }

  .hero__faces img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 0 0 3px var(--ivory);
  }

  .hero__faces img + img { margin-left: -13px; }

  @media (max-width: 620px) {
    .hero__faces { vertical-align: -11px; margin-right: 10px; }
    .hero__faces img { width: 38px; height: 38px; }
    .hero__faces img + img { margin-left: -11px; }
  }

  /* An aside on the label, in the one red the site uses. Lower case and
     untracked so it reads as a remark rather than part of the label. */

  .stat__note {
    display: block;
    margin-top: 5px;
    color: var(--red);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
  }

  /* ── Footer right ──────────────────────────────────────── */
  .foot__right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
  .foot__right > a { color: inherit; text-decoration: none; }
  .foot__right > a:hover { color: var(--violet); }

  .foot__ig {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-weight: 600;
  }

  .foot__ig svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }

  @media (max-width: 620px) {
    .foot__right { align-items: flex-start; }
  }

  /* ── Case study headline figure ─────────────────────────
     One number carrying the section, with the period called out beneath it.
     The red appears exactly once on the whole site, which is what keeps it
     working as an accent. */
  .case__story { margin: 18px 0 0; max-width: 52ch; }
  .case__story b { color: var(--ink); font-weight: 600; }

  .case__big { margin-top: clamp(26px, 3.4vw, 40px); }

  .case__num {
    font-size: clamp(50px, 8.4vw, 96px);
    line-height: .92;
    font-weight: 700;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
  }

  .case__period {
    margin-top: 10px;
    color: var(--red);
    font-weight: 700;
    font-size: clamp(21px, 2.9vw, 32px);
    letter-spacing: -0.02em;
  }

  /* ── Chat sides on a phone ─────────────────────────────
     Both voices were running the full width, so the thread read as one
     column rather than two people. Bobby starts hard left and stops short
     of the right edge; the artist starts well right and hugs it. */
  @media (max-width: 620px) {
    /* The avatar was taking a grid column, so Bobby's bubbles started 68px in
       and never reached the left edge while the artist's hugged the right, both floating in the same middle band. Drop the avatar onto its own row
       so each voice touches its own edge, the way a real thread does. */
    .chat__me,
    .dm__me { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }

    .chat__me > .dm__avatar,
    .dm__me > .dm__avatar { width: 34px; height: 34px; grid-row: 1; grid-column: 1; }

    .chat__stack { grid-column: 1 / -1; grid-row: 2; }
    .dm__thread { grid-column: 1 / -1; }

    /* Bobby hugs the left, the artist hugs the right, and neither reaches
       the far side, that gap is the whole signal. */
    .chat__stack > .dm__bubble,
    .dm__thread > .dm__bubble { max-width: 82%; }

    .chat__them .dm__bubble,
    .dm__you .dm__bubble { max-width: 78%; }

    .dm__you { display: flex; justify-content: flex-end; }

    /* Room to breathe: a clear beat between turns, a smaller one within. */
    .chat { gap: 44px; }
    .chat__stack { gap: 18px; }
    .dm__thread { gap: 18px; }

    /* The avatar row sat hard against the first bubble. */
    .chat__me,
    .dm__me { gap: 16px; }

    /* Nothing separated the artist's opening line from Bobby's reply, they
       were touching at zero. */
    .dm__me { margin-top: 40px; }

    /* Screenshots are the heaviest thing in the thread, so they get more
       clearance than bubbles do. */
    .chat__shot { margin-block: 6px; }

    .chat__stack > .dm__bubble,
    .dm__thread > .dm__bubble,
    .chat__them .dm__bubble,
    .dm__you .dm__bubble { padding: 14px 18px; }
  }

  /* ── Phone scale ───────────────────────────────────────
     Every clamp() minimum was picked on its own, so at 390px they all landed
     within a few px of each other and the hierarchy flattened, the closing
     h2 was actually larger than the hero h1. This re-separates the steps. */
  @media (max-width: 620px) {
    .hero h1 { font-size: 30px; }
    .sec h2 { font-size: 25px; }
    .close h2 { font-size: 27px; }
    .essay__head h2 { font-size: 25px; }
    .case h3 { font-size: 21px; }
    .journey__text h3 { font-size: 20px; }
    .essay__close { font-size: 19px !important; }
    .sec > p.lede, .close__lead { font-size: 16px !important; }

    /* The zigzag collapses to a single column on a phone, so the curve the
       dots were sized against isn't there any more. */
    .journey__step { padding: 20px 0; }
    .journey__dot { width: 12px; height: 12px; border-width: 2px; top: 6px; }
    .journey__card,
    .journey__step--r .journey__card { padding-left: 32px; }

    /* 180px was 46% of the screen, against 102px avatars below it. */
    .person--you { max-width: 132px; }
    .person__seat { font-size: 26px; }
  }