/* ==========================================================================
   Anthēs — Case Study / Sophie
   Figma page "04 Case Study — Sophie", frame 591:7557 (1280 × 9586)
   The whole frame sits on black, so the page body and nav are dark.
   ========================================================================== */

.on-black { background: #000; }

/* Most frames on this page are fixed-height in Figma with their content
   vertically centred, so the heights are set explicitly at 1280 and released
   below that breakpoint. */
.cshero     { height: 685px; }
.startpoint { height: 795px; }
.found      { height: 972px; }
.process    { height: 1119px; }
.reveal     { height: 759px; }
.csweb      { height: 805px; }
.ecosystem  { height: 899px; }
.sixmonths  { height: 604px; }

.cshero, .startpoint, .found, .process,
.reveal, .csweb, .ecosystem, .sixmonths {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* Shared eyebrow / heading for this page's dark and light bands */
.cs-eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--marigold);
}
.cs-eyebrow--crimson { color: var(--crimson); }
.cs-eyebrow--coral   { color: var(--coral-pink); }
.cs-eyebrow--sky     { color: var(--sky); }
.cs-eyebrow--sun     { color: var(--sun-yellow); }

.cs-title {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 61px;
  letter-spacing: -0.62px;
  color: #fff;
}
.cs-title strong { font-weight: var(--w-bold); }
.is-sky { color: var(--sky); }

/* --------------------------------------------------------------------------
   Back nav — Figma 591:7559
   -------------------------------------------------------------------------- */
.backnav { background: #000; padding: 23px 0 14px; }
.backnav a {
  display: block;
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  font-size: 13px;
  line-height: 17px;   /* Figma pins the line box, not the body 1.6 */
  font-weight: var(--w-bold);
  color: var(--ink-70);
}
.backnav a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Hero — Figma 591:7562
   -------------------------------------------------------------------------- */
.cshero { padding: 24px 0; }

.cshero__inner {
  width: min(1160px, 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 47px;
}

.cshero__copy {
  flex: 0 1 547px;
  width: 547px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.cshero__eyebrow {
  font-size: 12px;
  font-weight: var(--w-bold);
  letter-spacing: 1.68px;
  text-transform: uppercase;
  color: var(--marigold);
}

.cshero__title {
  font-size: 60.43px;
  font-weight: var(--w-regular);
  line-height: 68.53px;
  letter-spacing: -1.1422px;
  color: #fff;
}
.cshero__title strong { font-weight: var(--w-bold); color: var(--marigold); }

.cshero__lede { font-size: 19.94px; line-height: 28.89px; color: #fff; }

.cshero__meta { margin: 0; padding-top: 8px; display: flex; gap: 53px; flex-wrap: wrap; }
.cshero__meta > div { display: flex; flex-direction: column; gap: 4px; max-width: 190px; }
.cshero__meta dt {
  font-size: 11px;
  font-weight: var(--w-bold);
  letter-spacing: 1.54px;
  text-transform: uppercase;
  color: var(--ink-70);
}
.cshero__meta dd { margin: 0; font-size: 13px; line-height: 20px; color: #fff; }

.cshero__photo { flex: 1 1 0; min-width: 0; }
.cshero__photo img {
  width: 100%;
  height: 598px;
  object-fit: cover;
  border-radius: 20px;
  background: #d9d9d9;
}

/* --------------------------------------------------------------------------
   The starting point — Figma 591:7578
   -------------------------------------------------------------------------- */
.startpoint { padding: 84px 0; }

.startpoint__inner {
  width: min(1160px, 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 57px;
}

.startpoint__photo {
  flex: 0 0 auto;
  width: 410px;
  height: 513px;
  object-fit: cover;
  border-radius: 20px;
}

.startpoint__copy {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.startpoint__copy > p { font-size: 17px; line-height: 29px; color: #fff; }
.startpoint__verdict { font-weight: var(--w-bold); }
.startpoint__ask { font-weight: 600; color: var(--crimson); }

/* --------------------------------------------------------------------------
   What we found — Figma 591:7591
   -------------------------------------------------------------------------- */
.found { background: #000; padding: 64px 0; }

.found__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.found__row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  padding-top: 40px;
}

.found__copy { flex: 1 1 0; min-width: 0; padding: 24px; }
.found__h {
  font-size: 52px;
  font-weight: var(--w-regular);
  line-height: 61px;
  letter-spacing: -0.62px;
  color: #fff;
  margin-bottom: 12px;
}
.found__copy p { font-size: 15.5px; line-height: 25px; color: #fff; }
.found__copy strong { font-weight: var(--w-bold); }
.is-sun { color: var(--sun-yellow); }

.found__art { flex: 0 0 auto; width: 532px; height: auto; }

/* --------------------------------------------------------------------------
   The process — Figma 608:4041
   -------------------------------------------------------------------------- */
.process { background: var(--paper); padding: 75px 0; }

.process__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.process .cs-eyebrow { color: var(--marigold); }
.process .section-title { max-width: 900px; }

.phases { width: 100%; margin: 0; padding: 0; }

.phase {
  display: flex;
  align-items: center;
  gap: 115px;
  padding-block: 45px;
  border-bottom: 1px solid #ededed;
}
.phase--last { border-bottom: 0; align-items: flex-start; gap: 68px; }

.phase__head { flex: 0 0 210px; width: 210px; display: flex; flex-direction: column; gap: 6px; }
.phase--last .phase__head { flex: 0 0 256px; width: 256px; }

.phase__num {
  font-size: 14px;
  font-weight: var(--w-bold);
  text-transform: uppercase;
  color: #000;
}
.phase__name {
  font-size: 45px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--phase);
}

.phase__list { flex: 1 1 0; min-width: 0; list-style: disc; padding-left: 24px; }
.phase__list li {
  list-style: disc;
  font-size: 16.3px;
  line-height: 23.9px;
  letter-spacing: -0.163px;
  color: #000;
  margin-bottom: 9.78px;
}
.phase__list li:last-child { margin-bottom: 0; }
.phase__list strong { font-weight: var(--w-bold); }

/* --------------------------------------------------------------------------
   Clarity session reveal — Figma 591:7640
   -------------------------------------------------------------------------- */
.reveal { background: var(--paper); padding: 75px 0; }

.reveal__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 62px;
}

.reveal__photo { flex: 0 0 auto; width: 485px; height: 586px; object-fit: cover; }

.reveal__copy {
  flex: 0 1 563px;
  width: 563px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.reveal__lead {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.12px;
  color: var(--ink);
}
.reveal__lead strong { font-weight: var(--w-bold); color: var(--coral-pink); }
.reveal__body { font-size: 17px; line-height: 29px; color: var(--ink); }

/* --------------------------------------------------------------------------
   The website — Figma 591:7660
   -------------------------------------------------------------------------- */
.csweb { background: #000; padding: 64px 0 44px; }

.csweb__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 52px;
}

.csweb__copy {
  flex: 0 1 560px;
  width: 560px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.csweb__body { font-size: 17px; line-height: 29px; color: #fff; }

.csweb__art { flex: 1 1 0; min-width: 0; height: auto; }

/* --------------------------------------------------------------------------
   Statement — Figma 591:7666
   The drawn background is a vertical bloom-to-black gradient.
   -------------------------------------------------------------------------- */
.csstatement {
  padding: 96px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
  overflow: hidden;
  background:
    linear-gradient(
      0deg,
      #e8d52b 1.53%,
      #f4a31f 10.78%,
      #e47b46 20.95%,
      #a22757 34.45%,
      #2e2567 57.5%,
      #000000 95.48%
    );
}

.csstatement__copy {
  width: min(960px, 100% - (2 * var(--gutter)));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.csstatement__lead {
  font-size: 40px;
  line-height: 50px;
  letter-spacing: -0.48px;
  color: #fff;
  max-width: 900px;
}

.csstatement__mosaic { width: 100%; max-width: 1280px; height: auto; }

/* --------------------------------------------------------------------------
   Content ecosystem — Figma 591:7669
   -------------------------------------------------------------------------- */
.ecosystem { padding: 64px 0; }

.ecosystem__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 78px;
}

.ecosystem__copy {
  flex: 0 1 567px;
  width: 567px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.ecosystem__body { font-size: 17px; line-height: 29px; color: #fff; }
.is-coral { color: var(--coral-pink); }

.ecosystem__art { flex: 0 0 auto; width: 474px; height: auto; }

/* --------------------------------------------------------------------------
   Six months later — Figma 591:7689
   -------------------------------------------------------------------------- */
.sixmonths { background: #000; padding: 96px 0; }

.sixmonths__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.results {
  width: 100%;
  padding: 24px 0 15px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.results__figure {
  font-size: 56px;
  font-weight: var(--w-bold);
  line-height: 62px;
  letter-spacing: -1.1px;
  color: var(--fig);
  font-variant-numeric: tabular-nums;
}
.results__label {
  font-size: 15px;
  font-weight: var(--w-bold);
  line-height: 22px;
  color: #fff;
  margin-top: 8px;
}
.results__note {
  font-size: 13.5px;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 8px;
}

.sixmonths__note { display: flex; align-items: center; gap: 16px; font-size: 19px; line-height: 28px; color: #fff; }
.sixmonths__note img { flex: 0 0 32px; width: 32px; height: 32px; }

/* --------------------------------------------------------------------------
   More from the archive — Figma 591:7710
   -------------------------------------------------------------------------- */
.morearchive { padding: 128px 0; }

.morearchive__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Reuses the archive card, which is light — it sits on black here */
.morearchive__grid { width: 100%; margin-top: 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   Responsive — derived; the Figma has no artboards below 1280
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  /* Figma's fixed heights only hold at 1280 */
  .cshero, .startpoint, .found, .process,
  .reveal, .csweb, .ecosystem, .sixmonths { height: auto; }

  .cshero__inner,
  .startpoint__inner,
  .reveal__inner,
  .csweb__inner,
  .ecosystem__inner { gap: clamp(28px, 4vw, 62px); }

  .cshero__copy { flex: 1 1 420px; width: auto; }
  .cshero__title { font-size: clamp(38px, 4.8vw, 60.43px); line-height: 1.12; }
  .cshero__photo img { height: clamp(380px, 46vw, 598px); }

  .startpoint__photo { width: clamp(260px, 32vw, 410px); height: auto; aspect-ratio: 410 / 513; }
  .reveal__photo { width: clamp(280px, 34vw, 485px); height: auto; aspect-ratio: 485 / 586; }
  .reveal__copy,
  .csweb__copy,
  .ecosystem__copy { flex: 1 1 380px; width: auto; }

  .cs-title,
  .found__h,
  .process .section-title { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.17; }

  .found__art { width: clamp(280px, 40vw, 532px); }
  .ecosystem__art { width: clamp(260px, 34vw, 474px); }

  .phase,
  .phase--last { gap: clamp(32px, 7vw, 115px); }
  .phase__head,
  .phase--last .phase__head { flex: 0 0 180px; width: 180px; }
  .phase__name { font-size: clamp(30px, 3.6vw, 45px); }

  .csstatement__lead { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.26; }

  .results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .results__figure { font-size: clamp(38px, 4.4vw, 56px); line-height: 1.12; }

  .morearchive { padding: 96px 0; }
}

@media (max-width: 900px) {
  .cshero__inner,
  .startpoint__inner,
  .reveal__inner,
  .csweb__inner,
  .ecosystem__inner,
  .found__row,
  .found__row--flip { flex-direction: column; align-items: flex-start; }

  .cshero__photo,
  .found__copy,
  .csweb__copy,
  .ecosystem__copy,
  .reveal__copy,
  .startpoint__copy { flex: 1 1 auto; width: 100%; }

  .startpoint__photo,
  .reveal__photo,
  .found__art,
  .csweb__art,
  .ecosystem__art { width: 100%; max-width: 532px; align-self: center; }

  .found__copy { padding: 0; }
  .phase, .phase--last { flex-direction: column; align-items: flex-start; gap: 20px; }
  .phase__head, .phase--last .phase__head { flex: 1 1 auto; width: auto; }

  .morearchive__grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}

@media (max-width: 640px) {
  .cshero__meta { gap: 24px; }
  .results { grid-template-columns: minmax(0, 1fr); }
  .csstatement { padding: 64px 0; gap: 40px; }
  .morearchive { padding: 72px 0; }
  .morearchive__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Real-data case studies (first: Piscine Évolution)
   Same components as Sophie. Their copy and result blocks differ in length,
   so the Figma heights become minimums instead of fixed heights — sections
   grow rather than clip. Scoped to body.cs-flow; the Sophie page is untouched.
   ========================================================================== */

/* Only from 1280 up, where Sophie holds its Figma heights. Below 1280 Sophie
   releases them (height: auto) and so does this page — no min-height there,
   or the sections keep their desktop height and open white gaps. */
@media (min-width: 1280px) {
  .cs-flow .cshero     { height: auto; min-height: 685px; }
  .cs-flow .startpoint { height: auto; min-height: 795px; }
  .cs-flow .found      { height: auto; min-height: 972px; padding: 84px 0; }  /* 84px keeps Sophie at its drawn 972 */
  .cs-flow .process    { height: auto; min-height: 1119px; }
  .cs-flow .reveal     { height: auto; min-height: 759px; }
  .cs-flow .ecosystem  { height: auto; min-height: 899px; }
  .cs-flow .sixmonths  { height: auto; min-height: 604px; }
}

/* Two result blocks: without ads, then the Paid Ads add-on */
.results__group {
  margin-top: 24px;
  font-size: 13px;
  font-weight: var(--w-bold);
  line-height: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.results__group + .results { padding-top: 12px; }
.results__group--second {
  width: 100%;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Visible marker for figures still waiting on client confirmation.
   Nothing marked .cs-pending ships. */
.cs-pending {
  display: inline-block;
  padding: 2px 10px;
  border: 1px dashed var(--sun-yellow);
  border-radius: 6px;
  color: var(--sun-yellow);
}

/* Channel sections (newsletter, social posts) — the Website component,
   shorter. Images alternate: Website right, Newsletter left (flipped),
   Social right. */
/* Website, Newsletter and Social Posts run back to back on black: content
   height only (no Figma minimum, whose centred content left ~400px of empty
   black between them), and one even 64px gap between the three. */
.cs-flow .csweb     { height: auto; min-height: 0; padding: 112px 0 32px; }
.cs-flow .cschannel { min-height: 0; padding: 32px 0; }
.cs-flow .cschannel--last { padding-bottom: 112px; }
.cs-eyebrow--sage { color: var(--sage-green); }
.cs-eyebrow--iris { color: var(--iris-purple); }
@media (min-width: 901px) {
  .csweb--flip .csweb__inner { flex-direction: row-reverse; }
}
.cs-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 36px;
  margin-top: 8px;
}
.cs-stats__fig {
  font-size: 32px;
  font-weight: var(--w-bold);
  line-height: 38px;
  color: var(--fig);
  font-variant-numeric: tabular-nums;
}
.cs-stats__label {
  max-width: 150px;
  font-size: 13.5px;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   Escarpins et Vilebrequins additions
   ========================================================================== */

/* The Seasons — follows the Newsletter on black, closes the channel run
   (same 112px bottom as .cschannel--last). The row scrolls sideways:
   nine homepages, oldest first. */
.csseasons { background: #000; padding: 32px 0 112px; }

.csseasons__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.csseasons__copy { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }

.seasons {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
.seasons:focus-visible { outline: 2px solid var(--sun-yellow); outline-offset: 6px; border-radius: 4px; }

.season { scroll-snap-align: start; }
.season img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  background: #1a1a1a;
}
.season__name {
  margin-top: 12px;
  font-size: 14px;
  font-weight: var(--w-bold);
  line-height: 20px;
  color: #fff;
}

@media (max-width: 640px) {
  .seasons { grid-auto-columns: 168px; gap: 14px; }
}

/* Results as a journey (Escarpins): the total, then four chapters along a
   line, each with its own dot in its figure colour. */
.journey__total {
  max-width: 760px;
  margin-top: 8px;
  font-size: 19px;
  line-height: 29px;
  color: #fff;
}
.journey__sum {
  display: block;
  font-size: 56px;
  font-weight: var(--w-bold);
  line-height: 62px;
  letter-spacing: -1.1px;
  color: var(--marigold);
  font-variant-numeric: tabular-nums;
}

.journey {
  list-style: none;
  width: 100%;
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.journey li {
  position: relative;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.journey li::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--fig);
}
.journey .results__figure { margin-top: 10px; }
.journey__note { max-width: 760px; margin-top: 32px; font-size: 15px; line-height: 24px; }
.journey__when {
  font-size: 13px;
  font-weight: var(--w-bold);
  line-height: 18px;
  letter-spacing: 0.08em;
  color: var(--fig);
}
.journey__name {
  margin-top: 4px;
  font-size: 17px;
  font-weight: var(--w-bold);
  line-height: 24px;
  color: #fff;
}

@media (max-width: 1279px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .journey__sum { font-size: clamp(38px, 4.4vw, 56px); line-height: 1.12; }
}
@media (max-width: 640px) {
  .journey { grid-template-columns: minmax(0, 1fr); }
}

/* Client testimonial in the results section — the site's outlined .quote
   card, laid out for a longer quote with its attribution. */
.cs-testimonial {
  width: 100%;
  max-width: 860px;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: start;
  gap: 4px 18px;
}
.cs-testimonial blockquote { margin: 0; }
.cs-testimonial blockquote p { padding-inline: 0; font-size: 19px; line-height: 30px; }
.cs-testimonial figcaption {
  grid-column: 2;
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.75);
}
.cs-testimonial figcaption strong { font-weight: var(--w-bold); color: #fff; }
.cs-testimonial figcaption span { color: rgba(255, 255, 255, 0.5); }

@media (max-width: 640px) {
  .cs-testimonial { grid-template-columns: minmax(0, 1fr); padding: 28px 22px; }
  .cs-testimonial figcaption { grid-column: 1; }
}

/* Sector landing pages (tools/landing/build.py): under a channel section, the
   line that says the screen shown is a real client's work, not the composite's. */
.lp-example {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.6);
}

/* Stacked layouts (phone and tablet, ≤900px), every case study and landing
   page (David, 2026-10-13):
   - only the first picture: the hero photo and the starting-point photo
     would otherwise sit back to back, so the second one is hidden;
   - "What we found / The real opportunity" read text, image, text, image:
     the flipped row puts its copy back above its image. */
@media (max-width: 900px) {
  .startpoint__photo { display: none; }
  .found__row--flip .found__copy { order: -1; }
}

/* Hero photo when stacked (phone and tablet): the photo spans the full width,
   so a fixed height turned it into a wide strip cut through the middle —
   faces lost their top. A 4:3 frame (square on phones) anchored near the top
   keeps the face in, on every case study and landing page. */
@media (max-width: 900px) {
  .cshero__photo img { height: auto; aspect-ratio: 4 / 3; object-position: 50% 22%; }
}
@media (max-width: 640px) {
  .cshero__photo img { aspect-ratio: 1 / 1; }
}

/* --------------------------------------------------------------------------
   Sector landing pages: questions owners in that sector ask (pre-launch SEO,
   2026-10-14). The FAQ page's accordion, scoped here so landing pages don't
   load faq.css. <details>/<summary>: keyboard-operable, works without JS.
   -------------------------------------------------------------------------- */
.sfaq { padding: 96px 0; }
.sfaq__inner {
  width: min(var(--content), 100% - (2 * var(--gutter)));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.sfaq__list { width: 100%; padding-top: 24px; }
.sfaq__item { border-top: 1px solid rgba(219, 218, 218, 0.25); padding-block: 28px; }
.sfaq__item:last-child { border-bottom: 1px solid rgba(219, 218, 218, 0.25); }
.sfaq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
}
.sfaq__item summary::-webkit-details-marker { display: none; }
.sfaq__item summary:hover { color: var(--marigold); }
.sfaq__item summary::after {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background: url("../img/faq-chevron.svg") center / 22px 22px no-repeat;
  transition: transform 220ms var(--ease-out);
}
.sfaq__item[open] summary::after { transform: rotate(180deg); }
.sfaq__answer { padding-top: 14px; max-width: 900px; font-size: 18px; line-height: 29px; color: rgba(255, 255, 255, 0.64); }
.sfaq__answer a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.sfaq__answer a:hover { color: var(--marigold); }

/* The sector name is the page's main heading for search engines; it keeps
   the small label look, and the big line under it stays the headline. */
h1.cshero__eyebrow { margin: 0; }

@media (max-width: 640px) {
  .sfaq { padding: 64px 0; }
  .sfaq__item summary { font-size: 20px; gap: 16px; }
  .sfaq__answer { font-size: 17px; line-height: 27px; }
}