/* ==========================================================================
   HOMEPAGE — SECTION-HEAD SCALE
   --------------------------------------------------------------------------
   Loaded LAST, after index.html's inline <style>, the same way
   home-hero/hero.css wins over that file's accumulated .hero blocks. Every
   selector below is repeated exactly as the page already writes it, so the
   later origin settles it and nothing needs !important.

   PROBLEM  Measured on the live page, the section openers are the same size
            as the hero headline or bigger:

                              1440      1366      820       390
              hero h1          76        72        43        34
              #svc3  h1        88        88        58        43
              #ss1   h2        76        76        54        45
              #about5 h2       76        76        54        49
              #indwork h2      72        72        49        39
              #wcu8  h2        64        64        59        36
              #hp1   h2        64        64        46        45

            Six times down the page a section announces itself louder than
            the page's own headline. On a 390px phone "About Us." renders at
            49px against a 34px hero — the heading is the screen. Each opener
            also spends 250-330px of desktop height, and ~200px of a phone
            screen, before any content of that section appears.

   This is the same fault site/ds.css already fixed for every internal page
   on 2026-09-02, and its reasoning is quoted there: "a section head ... is
   within 13px of the hero H1 on every internal page, so nothing on the page
   was clearly the most important thing". The homepage never got that pass.

   FIX      One size for every section opener, a clear step below the hero at
            every width. Not the internal pages' 44px — the homepage is the
            shop window and keeps a larger voice — but never above the hero.

              --s9-h2: clamp(28px, 3.9vw, 62px)

                              1440      1366      820       390
              hero h1          76        72        43        34
              section head     56        53        32        28
              ratio           .74       .74       .74       .82

            At 820 and 390 it lands on 32/28 — exactly what --ds-h2 gives the
            internal pages, so the whole site speaks with one voice on tablets
            and phones, and the homepage keeps its larger desktop presence.

            One clamp replaces the hand-tuned 760px and 400px blocks: it is
            already correct at every width between them, so those overrides
            are restated here only to stop them winning by later origin.

   NOT TOUCHED  The hero (home-hero/hero.css is height-tuned and loads after
            this), #faq10's 38px block head, every eyebrow, sub, card and
            rail, and all six sections' markup, order and behaviour.
   ========================================================================== */

:root{
  --s9-h2: clamp(28px, 3.9vw, 62px);
  --s9-h2-lh: 1.03;
  --s9-h2-ls: -.045em;
}

/* --------------------------------------------------------------------------
   The six section openers. Each selector is the page's own, repeated at the
   same specificity; the media-query copies are repeated too because a narrow
   @media block does not outrank a later rule on its own.
   -------------------------------------------------------------------------- */
#svc3 .s3-head h1,
#ss1 .ss-mid h2,
#wcu8 h2,
#about5 .ab-head h2,
#hp1 .hp-head h2,
.iw2-h2{
  font-size: var(--s9-h2);
  line-height: var(--s9-h2-lh);
  letter-spacing: var(--s9-h2-ls);
}

@media (max-width: 760px){
  #svc3 .s3-head h1,
  #ss1 .ss-mid h2,
  #wcu8 h2,
  #about5 .ab-head h2,
  #hp1 .hp-head h2,
  .iw2-h2{ font-size: var(--s9-h2); line-height: 1.06; letter-spacing: -.038em; }
}

@media (max-width: 400px){
  #svc3 .s3-head h1,
  #ss1 .ss-mid h2,
  #wcu8 h2,
  #about5 .ab-head h2,
  #hp1 .hp-head h2,
  .iw2-h2{ font-size: var(--s9-h2); }
}