/*
  Accordion (.acc). Used by the homepage "What we do" services, the Approach "Start Anywhere" rows and the case-study
  "Questions worth asking".
  Markup: <ul class="acc [acc--qa]"> of <li [class="open"]> each holding
    <h3 class="acc__head"><button class="acc__btn" type="button" aria-expanded aria-controls>
      <span class="acc__label">…</span><span class="acc__sign" aria-hidden="true"></span></button></h3>
    <div class="acc__panel" id><div><div class="acc__inner"> …content… </div></div></div>
  Each button sits in a heading (one level under the section's h2), so screen readers can list and jump between rows.
  One row is open at a time; clicking the open row closes it (/shared/accordion.js). The panel animates its height
  through grid rows and the plus turns into a minus. Default content (the homepage services) is a title, a grey summary and a link:
    <h4 class="acc__title">Define the Opportunity</h4><p>…</p>
    <a class="acc__link" href="/approach/#strategy">View Our Approach<span class="visually-hidden">: Strategy</span>
      <img src="/home-assets/arrow-red.svg" alt=""></a>
  in white Inter 20 under Cal Sans row labels, as in Figma 190:1692 (phone: labels 24, text 16–18). The link's hidden suffix names its
  practice, so three "View Our Approach" links still read differently. The link is optional: Approach's "Start
  Anywhere" panels are a title and a paragraph. The --qa variant is a single answer paragraph
  under a sentence-case question.
*/
.acc{--t:.65s;--ease:cubic-bezier(.16,1,.3,1)}
.acc li{border-top:var(--rule) solid var(--fg)}
.acc__head{font-size:inherit;line-height:inherit}
.acc__btn{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:1.38rem 3.96rem 1.38rem 8.37rem;
  text-align:left;
}
/* Row labels (Figma 190:1702–1704): Cal Sans 28/40, as written ("Strategy") */
.acc__label{font-family:"Cal Sans",Inter,sans-serif;font-size:2.8rem;line-height:4rem;letter-spacing:-.028rem}
/* plus / minus built from two bars so it can animate */
.acc__sign{position:relative;flex:none;width:1.1rem;height:1.1rem;margin-left:2rem}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;background:var(--fg);transition:transform var(--t) var(--ease)}
.acc__sign::before{left:0;top:calc(50% - .085rem);width:1.1rem;height:.17rem}
.acc__sign::after{top:0;left:calc(50% - .085rem);width:.17rem;height:1.1rem}
.acc li.open .acc__sign::after{transform:scaleY(0)}
/* panels animate height via grid rows */
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t) var(--ease)}
.acc li.open .acc__panel{grid-template-rows:1fr}
.acc__panel > div{min-height:0;overflow:hidden}
/* A closed answer is hidden from screen readers too, not just squeezed to no height: visibility flips once the panel
   has finished closing (and at once when it opens) */
.acc li:not(.open) .acc__panel > div{visibility:hidden;transition:visibility 0s var(--t)}
.acc__inner{padding:0 0 3.3rem 8.37rem;opacity:0;transform:translateY(-.6rem);transition:opacity .4s ease,transform var(--t) var(--ease)}
.acc li.open .acc__inner{opacity:1;transform:none;transition-delay:.1s}
/* Panel (Figma 343:2, 343:22): title and list in white Inter 20 (title on a 34 line, list 20/23), then the link */
.acc__title{margin-top:.8rem;font-size:2rem;line-height:3.4rem}
.acc__inner p{max-width:53.73rem;font-size:2rem;line-height:2.3rem}
.acc__link{display:inline-flex;align-items:center;gap:.9rem;margin-top:2.6rem;font-size:2rem;line-height:2.9rem;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4rem;transition:text-decoration-color .25s ease}
.acc__link img{width:1.4rem;height:1.4rem;transition:translate .35s cubic-bezier(.16,1,.3,1)}
.acc__link:hover{text-decoration-color:var(--red)}
.acc__link:hover img{translate:.3rem -.3rem}


/* Q&A variant (case studies, Figma 147:89–99): sentence-case questions, one grey answer paragraph */
.acc--qa .acc__label{font-family:inherit;font-weight:600;font-size:2.1rem;letter-spacing:-.021rem}
.acc--qa .acc__inner{padding:0 3.96rem 3.2rem 8.37rem}
.acc--qa .acc__inner p{margin:0;width:50.92rem;font-size:1.4rem;line-height:2.2rem;color:var(--grey)}

@media (max-width:767px){
  .acc__btn{padding:1.3rem 2rem}
  .acc__label{font-size:2.4rem;line-height:3.2rem}
  .acc__inner{padding:0 2rem 2.2rem}
  .acc__title{font-size:1.8rem;line-height:2.8rem}
  .acc__inner p{max-width:none;font-size:1.6rem;line-height:2.2rem}
  .acc__link{margin-top:2rem;font-size:1.6rem;line-height:2.2rem}
  .acc--qa .acc__label{font-size:1.6rem;line-height:2.8rem}
  .acc--qa .acc__inner{padding:0 2rem 2.4rem}
  .acc--qa .acc__inner p{width:auto;font-size:1.4rem;line-height:2.1rem}
}