/*
  Split feature (.split): a full-height image on the left half and, on the right, a section heading, optional intro
  and an accordion pinned to the foot of the column. Figma: homepage "What we do" (147:387–403) and case-study
  "Questions worth asking" (147:82–100) share this exact geometry. The section grows when an accordion row opens.
  The right column holds an accordion (.acc) or an always-open list (.split__list).
  States (Figma "What we do" 190:1692 Default, 190:1670 Strategy, 190:1710 Design, 190:1802 Build): the media can hold
  one image per accordion row. Opening a row crossfades to its image and glyph; closing every row returns to the
  default. accordion.js switches them.
    <div class="split__media">
      <div class="split__state is-shown" data-for=""><img class="cover" src="…default.jpg" alt="…"></div>
      <div class="split__state" data-for="svc-1" aria-hidden="true"><img class="cover" src="…" alt="…"><img class="mark" src="/shared/marks/strategy.svg" alt="" style="--w:38rem"></div>
      …
    </div>
  data-for is the id of the accordion panel the state belongs to (aria-controls on its button); "" is the default.
  Don't lazy-load state images: a row can open before a lazy image has arrived, and it would fade in empty.
  Markup: <section class="split"><div class="split__media"><img class="cover" alt></div>
          <div class="split__body"><h2 class="cal h-section">…</h2>[<p class="body-lg">…</p>]<ul class="acc">…</ul></div></section>
  Call to action (.split--cta; Figma Approach "Start Anywhere" 486:229): a red heading 65px from the top (instead of
  113), and the intro at 26/34, 21px under it.
*/
.split{display:grid;grid-template-columns:72rem 72rem;min-height:var(--split-h,81.26rem)}   /* --split-h: Figma section height */
.split__media{position:relative;overflow:hidden;border-right:var(--rule) solid var(--fg)}
/* The incoming state fades in on top of the outgoing one, which holds until it's covered (so the crossfade never dips
   to black); the outgoing glyph leaves at once and the incoming one settles in from a slight zoom. */
.split__state{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .9s cubic-bezier(.16,1,.3,1) .9s}
.split__state.is-shown{z-index:1;opacity:1;transition-delay:0s}
.split__state .cover{scale:1.04;transition:scale 1.4s cubic-bezier(.16,1,.3,1)}
.split__state.is-shown .cover{scale:1}
.split__state .mark{opacity:0;scale:.9;transition:opacity .3s ease,scale .3s ease}
.split__state.is-shown .mark{opacity:1;scale:1;transition:opacity .7s ease .3s,scale 1s cubic-bezier(.16,1,.3,1) .3s}
@media (prefers-reduced-motion:reduce){.split__state,.split__state .cover,.split__state .mark{transition:none}}
.split__body{position:relative;display:flex;flex-direction:column}
/* The space above the heading: 113px, giving way down to 64px when an open accordion row needs the room, so the
   section keeps its Figma height and the heading rides up instead (Figma 190:1692, "What we do" with Strategy open) */
.split__body::before{content:"";flex:1 1 0;min-height:6.39rem;max-height:11.34rem}
.split__body h2{width:55.45rem;margin:0 0 0 8.26rem}
.split__body .body-lg{margin:1.13rem 0 4rem 8.37rem;width:55.24rem}
.split__body .acc{margin-top:auto}
.split--cta .split__body::before{max-height:6.48rem}
.split--cta .split__body h2{color:var(--red)}
.split--cta .split__body .body-lg{margin:2.12rem 0 3rem 8.37rem}   /* 30px under it, so every row opens without growing the section */
@media (min-width:768px){.split--cta .split__body .body-lg{line-height:3.4rem}}   /* phones keep the phone .body-lg */
/* List: always-open rows instead of an accordion (Figma Partnerships 172:504 "Here's where we fit in best"). Same
   row type as the Q&A accordion: Inter 600 21/40 labels, 14/22 grey text, hairline above each row.
   <dl class="split__list"><div><dt>Dev shops</dt><dd>…</dd></div>…</dl> */
.split__list{margin:auto 0 0}
.split__list > div{padding:1.71rem 3.96rem 3.1rem 8.35rem;border-top:var(--rule) solid var(--fg)}
.split__list dt{font-weight:600;font-size:2.1rem;line-height:4rem;letter-spacing:-.021rem}
.split__list dd{width:53rem;margin:.96rem 0 0;font-size:1.4rem;line-height:2.2rem;color:var(--grey);text-box:trim-both cap alphabetic}

@media (max-width:767px){
  .split{grid-template-columns:1fr;min-height:0}
  .split__list{margin-top:4rem}
  .split__list > div{padding:1.6rem 2rem 2.4rem}
  .split__list dt{font-size:1.8rem;line-height:3rem}
  .split__list dd{width:auto;margin-top:.6rem;line-height:2.1rem}
  .split__media{height:36rem;border-right:0;border-bottom:var(--rule) solid var(--fg)}
  .split__body{padding-top:4.4rem}
  .split__body::before{display:none}
  .split__body h2{width:auto;margin:0;padding:0 2rem}
  .split__body .body-lg,.split--cta .split__body .body-lg{width:auto;margin:2.4rem 0 4rem;padding:0 2rem}
}