.section {
  width: 100%;
  padding: 70px 16px;
}

.section__inner {
  max-width: 1296px;
  margin: 0 auto;
}

/* Homepage section heading — weight/size verified against the real
   running old site (cloned Next.js app, installed and started locally,
   computed styles read directly from its live DOM). 700, 32/50/64px, the
   OLD two-stop blue->violet gradient (269.9deg, #3F7BF8 0.09% ->
   #B86BF8 50.02%) — confirmed identical across every one of these home
   sections' own heading (core-services/trusted-section/experience/
   skills/pricing/recent-projects.tsx all use the exact same gradient
   span). Font is Satoshi (explicit direction: one title font site-wide,
   matching the homepage hero's own title — was Space Grotesk before).
   ".home-services" is the one exception: its own h1 uses 70px (not
   64px) with line-height 1 (not 1.3) — see the modifier below. Confirmed
   these two classes are, in practice, only ever rendered by the six
   homepage section partials — safe to redesign directly rather than
   leave dead weight under a still-shared name. */
.home-section-heading {
  width: 100%;
  font-family: var(--font-satoshi);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .home-section-heading {
    font-size: 50px;
  }
}

@media (min-width: 1024px) {
  .home-section-heading {
    font-size: 64px;
  }
}

/* core-services.tsx's own h1 is the one section heading that's larger
   (70px) with a tighter line-height (1, not 1.3) — verified via the
   live old site's computed styles, not just its source classes. */
.home-section-heading--xl {
  line-height: 1;
}

@media (min-width: 1024px) {
  .home-section-heading--xl {
    font-size: 70px;
  }
}

/* pricing.tsx and recent-projects.tsx's own h1 both use leading-[1.2]
   instead of the 1.3 shared by trusted-section/experience/skills —
   confirmed via the live old site's own rendered className strings.
   Only matters visually once the heading wraps to 2 lines (e.g. "Une
   petite sélection de projets récents" on mobile), but it's a real,
   measured difference, not a guess. */
.home-section-heading--tight {
  line-height: 1.2;
}

.home-section-heading__gradient {
  background: linear-gradient(269.9deg, #3f7bf8 0.09%, #b86bf8 50.02%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-section-subtitle {
  margin: 20px auto 0;
  font-family: var(--font-satoshi);
  font-size: 18px;
  line-height: 1.5;
  color: #d4d4e0;
  text-align: center;
  max-width: 540px;
}

.home-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Left-aligned variants — used for a secondary (H2) section heading sitting
   inside a .page-split__content column, where the default centered
   treatment would look adrift next to the left-aligned intro column. */
.section-heading--left {
  text-align: left;
  margin: 0;
}

.section-description--left {
  text-align: left;
  margin: 12px 0 0;
  max-width: 60ch;
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}