/* clarity-sessions.css — page-specific styling for The Clarity Sessions.
   The page is built on the shared sp-* editorial system (see styles.css).
   Everything here is scoped to .cs-page so the other subpages keep their
   own treatment; this page reads as one unified, divider-less column. */

/* ── Unify: drop the section dividing lines and set a single, consistent
   vertical rhythm so the page flows as one piece rather than stacked,
   bordered panels. ── */
.cs-page .sp-hero {
  border-bottom: 0;
  padding-bottom: clamp(18px, 2vw, 26px);
}
.cs-page .sp-section {
  border-bottom: 0;
  padding: clamp(12px, 1.5vw, 18px) 0;
}
/* Last section before the dark CTA — restore the larger section→CTA gap
   used on the vertical subpages; the page's tight internal rhythm leaves
   it too cramped against the dark band otherwise. */
.cs-page .cs-final {
  padding-bottom: clamp(56px, 7.5vw, 104px);
}
.cs-page .sp-section-eyebrow {
  margin-bottom: clamp(14px, 1.6vw, 20px);
}

/* Problem statement — the "why", set in the body sans at the same size as
   the steps. A full intro paragraph; the closing thesis line gets the
   accent italic + underline coda treatment. */
.cs-problem {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 60ch;
  margin: 0 0 clamp(28px, 3.4vw, 46px);
  text-wrap: pretty;
}
.cs-coda {
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* "Who They're For" sidebar — borrows the flagship-aside formatting,
   constrained to a sidebar width so it doesn't span the full column. */
/* Engagement layout — problem + steps on the left, the Who sidebar on
   the right, mirroring the flagship grid on the vertical subpages. */
.cs-engage {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.cs-who li em {
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
}
@media (max-width: 820px) {
  .cs-engage { grid-template-columns: 1fr; }
  /* Stacked on mobile, the "Who They're For" sidebar lands mid-text. Close
     it off with a rule beneath "Format · 3–5 sessions" to mirror the rule
     above the label, so the block reads as a self-contained insert rather
     than breaking the flow of body copy. */
  .cs-who {
    border-bottom: 1px solid var(--ink);
    padding-bottom: 18px;
  }
}

/* "Together we will:" — body sans, black bold, at the same size as the
   steps it introduces. */
.cs-together {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.3;
  color: var(--ink);
}

/* Hero — the session count: black (ink) italic, a touch smaller than the
   standfirst above it. */
.cs-format {
  margin: clamp(14px, 1.8vw, 22px) 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.2;
  color: var(--ink);
}

/* Short faint rule under the session count — runs roughly the length of
   the title (which scales at 8.5vw), so it reads as a deliberate divider
   tied to the masthead rather than a stray dash. */
.cs-rule {
  width: clamp(200px, 31vw, 470px);
  height: 1px;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  border: 0;
  background: var(--rule);
}

/* Between-section dividers — same short rule, but centred in the gap
   between two sections (the section paddings supply equal space above
   and below), so the three blocks are separated by matching hairlines. */
.cs-divide {
  margin: 0;
}

/* Who They're For — real italic via the display serif (Instrument Serif,
   the title/standfirst face) at body size, since the body sans has no
   true italic. Audience type accented. Distinct from the bulleted What
   We Do steps. */
.cs-audiences li {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink);
  padding: 7px 0;
}
.cs-audiences li em {
  font-style: italic;
  font-weight: 700;
  color: var(--ink);
}

/* What We Do — ✦ star bullets (the same glyph as the main services
   index) in accent, with the step text set in the body sans (the same
   face as What You Leave With) at regular weight. Flex + baseline keeps
   the small star aligned to the text and wrapped lines tidy. */
.cs-involves li {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  padding: 7px 0;
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink);
}
.cs-involves .cs-b {
  flex: none;
  color: var(--accent);
  font-size: 0.68em;
}

/* What You Leave With — the closing takeaway, set bold so it lands as
   the page's final statement. */
.cs-leave {
  font-weight: 700;
  color: var(--ink);
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  max-width: 58ch;
}