/*
  Page intro (.page-intro; Figma Work page 158:1167–1168, Approach 184:714–749): a small page name at 40/188 and a large Cal Sans
  statement below it. On black.

  Markup:
    <header class="page-intro">
      <h1 class="page-intro__name">Work</h1>
      <p class="page-intro__lede">Every project here went out the door…</p>
      [<p class="page-intro__body">It usually starts with getting a room full of stakeholders…</p>]
      [<div class="page-intro__actions"><a class="btn-box" href="mailto:hello@ekko.studio"><span>Let’s Talk</span><img src="/home-assets/arrow-skip.svg" alt=""></a></div>]
    </header>
  The intro holds the first 681px of the page, so whatever follows starts on the same line from page to page. With
  actions (Figma Partnerships 172:458), the buttons sit 85px under the statement and the intro ends 137px below them.
  The statement can run to more than one paragraph (make it a <div> of <p>s, 24px apart: Approach "…get stuff done." /
  "Minus the b.s."). An optional body paragraph (Figma Approach 184:749) follows it in Inter 18/30. A page whose next
  block starts higher sets its own height: style="--intro-h:64.16rem" (Approach 486:2, the Align row at y 641.59).
*/
.page-intro{min-height:var(--intro-h,68.16rem);padding:18.78rem 4rem 4rem}
.page-intro__name{font-weight:500;font-size:2.4rem;line-height:2.6rem;letter-spacing:.0014rem}
/* The statement's cap line sits at y 288.67: trimmed to its cap height and baseline, as in Figma */
.page-intro__lede{width:104rem;margin-top:7.49rem;font-family:"Cal Sans",Inter,sans-serif;font-size:6rem;line-height:6.4rem;text-box:trim-both cap alphabetic}
.page-intro__lede p + p{margin-top:2.4rem}
.page-intro__body{width:95.5rem;margin-top:5rem;font-size:1.8rem;line-height:3rem;letter-spacing:-.036rem;text-box:trim-both cap alphabetic}
.page-intro__actions{display:flex;gap:1.2rem;margin-top:8.48rem}
.page-intro:has(.page-intro__actions){padding-bottom:13.73rem}

@media (max-width:767px){
  .page-intro{min-height:0;padding:10.6rem 2rem 4.8rem}
  .page-intro__name{font-size:2rem;line-height:2.2rem}
  .page-intro__lede{width:auto;margin-top:4rem;font-size:3.4rem;line-height:3.8rem}
  .page-intro__lede p + p{margin-top:1.6rem}
  .page-intro__body{width:auto;margin-top:2.4rem;font-size:1.6rem;line-height:2.4rem;letter-spacing:0}
  .page-intro__actions{margin-top:3.2rem}
  .page-intro:has(.page-intro__actions){padding-bottom:4.8rem}
}