/* Page CSS scoped to :where(.wst-s-home) (build/scope_css_apply.py): content rules apply only inside this
   page's template or its blocks, so blocks from different pages can share a page. :where() keeps specificity unchanged.
   Chrome rules stay global. */
/* Home — design <helmet> CSS verbatim (html/body background moved to site.css). */
    html,body{margin:0;}
    *{box-sizing:border-box;}
    a{color:#c7361d;text-decoration:none;}
    a:hover{color:#e44125;}
    @keyframes wstDraw{to{stroke-dashoffset:0;}}
    @keyframes wstLogoPulse{0%{opacity:0;}10%{opacity:1;}33.3%{opacity:1;}43.3%{opacity:0;}100%{opacity:0;}}
    @media (prefers-reduced-motion: reduce){:where(.wst-s-home) [style*="wstLogoPulse"]{animation:none !important;opacity:1 !important;}}
    @keyframes wstFooterFlow{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
    @media (prefers-reduced-motion: reduce){footer{animation:none !important;}}
    @media (prefers-reduced-motion: reduce){:where(.wst-s-home) .wst-draw{animation:none !important;stroke-dashoffset:0 !important;}}
    [data-m="burger"]{display:none;}
    [data-m="burger"] summary{list-style:none;}
    [data-m="burger"] summary::-webkit-details-marker{display:none;}
    @media (max-width:1224px){:where(.wst-s-home) [data-p="band"]{justify-content:center !important;}}
    @media (min-width:821px) and (max-width:1084px){
      :where(.wst-s-home) [data-m="hero-space"]{height:calc(min(520px, calc((95vw - 403px) * 1.1547)) - 283px) !important;}
      :where(.wst-s-home) [data-m="hero-mark"]{top:auto !important;bottom:0 !important;height:min(520px, calc((95vw - 403px) * 1.1547)) !important;width:100% !important;}
    }
    @media (max-width:820px){
      [data-m="nav"]{display:none !important;}
      [data-m="burger"]{display:block;}
      :where(.wst-s-home) [data-m="toc"]{display:none !important;}
      :where(.wst-s-home) [data-m="clients"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 24px !important;}
      :where(.wst-s-home) [data-m="clients"] img{max-width:100% !important;max-height:56px !important;}
      :where(.wst-s-home) [data-m="hero-space"]{height:280px !important;}
      :where(.wst-s-home) [data-m="hero-mark"]{top:auto !important;bottom:0 !important;height:360px !important;width:100% !important;}
      :where(.wst-s-home) [data-m="hero-p"]{width:auto !important;}
    }
    @media (max-width:820px){
      :where(.wst-s-home) [data-p="sec"]{padding-top:56px !important;padding-bottom:56px !important;}
      :where(.wst-s-home) [data-p="hero"]{padding-top:56px !important;padding-bottom:48px !important;}
      :where(.wst-s-home) [data-p="band"]{padding-top:32px !important;padding-bottom:32px !important;}
      :where(.wst-s-home) [data-p="card"]{padding:20px !important;}
      [data-p="footer"]{padding-top:56px !important;padding-bottom:32px !important;}
    }
    @media (max-width:820px){:where(.wst-s-home) [data-m="give"]{gap:32px !important;padding-bottom:40px !important;}:where(.wst-s-home) [data-m="pulse"]{height:200px !important;}}
    @media (max-width:480px){
      :where(.wst-s-home) [data-m="hero-space"]{height:220px !important;}
      :where(.wst-s-home) [data-m="hero-mark"]{height:300px !important;}
    }
    @media (max-width:640px){[data-t="label"]{letter-spacing:.12em !important;}}
    @media (hover:none){:where(.wst-s-home) [data-m="clients"] img{opacity:1 !important;}}

    /* ---- converted style-hover / dynamic states ---- */
    :where(.wst-s-home) .wst-client:hover{opacity:1 !important;}
    :where(.wst-s-home) .wst-ucard:hover{transform:translateY(-6px) !important;border-color:rgba(228,65,37,.45) !important;box-shadow:0 26px 50px -28px rgba(15,18,22,.4) !important;}
    /* Slider: cards per view (design: <=640 → 1, <=1024 → 2, else 3). JS sets --idx. */
    :where(.wst-s-home) .wst-track{--pv:3;}
    @media (max-width:1024px){:where(.wst-s-home) .wst-track{--pv:2;}}
    @media (max-width:640px){:where(.wst-s-home) .wst-track{--pv:1;}}

    /* ---- hero mark under the text (≤1084px), per client request 2026-10-22 ----
       Centred under the text (24px gap, as on phones) and cropped: 15% of the mark hangs below the
       section's bottom edge (section overflow:hidden), and the spacer fits the visible 85% (client chose 15% over 25%).
       spacer = 0.85·mark − 32px − bottom padding   (24px gap − 56px grid row-gap). Desktop (>1084px) unchanged. */
    @media (max-width:1084px){
      :where(.wst-s-home) [data-m="hero-mark"] svg{width:auto !important;max-width:100%;aspect-ratio:173.56/200.41;margin:0 auto;}
    }
    @media (min-width:821px) and (max-width:1084px){
      :where(.wst-s-home) [data-m="hero-mark"]{top:auto !important;bottom:calc(-0.15 * min(520px, calc((95vw - 403px) * 1.1547))) !important;}
      :where(.wst-s-home) [data-m="hero-space"]{height:calc(0.85 * min(520px, calc((95vw - 403px) * 1.1547)) - 32px - 84px) !important;}
    }
    @media (max-width:820px){
      :where(.wst-s-home) [data-m="hero-mark"]{bottom:-54px !important;}
      :where(.wst-s-home) [data-m="hero-space"]{height:226px !important;}
    }
    @media (max-width:480px){
      :where(.wst-s-home) [data-m="hero-mark"]{bottom:-45px !important;}
      :where(.wst-s-home) [data-m="hero-space"]{height:175px !important;}
    }

    /* ---- client logo grid, 821–854px (fix 2026-10-22): four max-content columns + 48px gaps are wider than the
       content box there, so the page scrolled sideways by up to 32px. Let the columns shrink (logos scale down
       a little) instead; from ~855px the logos fit at full size and render exactly as before, and ≤820px keeps the
       design's two-column rule. */
    @media (min-width:821px){
      :where(.wst-s-home) [data-m="clients"]{grid-template-columns:repeat(4,minmax(0,max-content)) !important;}
      :where(.wst-s-home) [data-m="clients"] img{max-width:min(200px,100%) !important;}
    }

    /* ---- Home hero text centred when the mark sits under it (≤1084px), client request 2026-10-22:
       heading, intro (keeps its 620px max width) and the button row (wrapped rows centred too). */
    @media (max-width:1084px){
      :where(.wst-s-home) [data-p="hero"] > :first-child{align-items:center;text-align:center;}
      :where(.wst-s-home) [data-p="hero"] > :first-child > div:last-child{justify-content:center;}
    }