/* ------------------------------------------------------------------
   JF Capability Card — one card of the "What We Do" grid plus its
   expanded panel. Colours, type and spacing come from the site's Webflow
   variables (custom properties cross the Shadow DOM boundary); fallbacks
   are only for the local harness.

   Sizes and layout mirror the current Webflow classes:
   .practice-area_square / _card / _slide_out / _wrapper / _description /
   _right / _subject / _nav and .capabilities-panel_text /
   .practice-area-callout_text.
   ------------------------------------------------------------------ */

:host {
  display: block;
  height: 100%;
}

.xWipgzKCNRRx1gTF9ppn,
.xWipgzKCNRRx1gTF9ppn *,
.xWipgzKCNRRx1gTF9ppn *::before,
.xWipgzKCNRRx1gTF9ppn *::after {
  box-sizing: border-box;
}

.xWipgzKCNRRx1gTF9ppn {
  --cap-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --cap-card-h: 25rem;
  --cap-card-pad: 1.25rem;
  --cap-radius: var(--radius--global-radius, 0px);
  --cap-bg: var(--background--secondary, #f3f3f3);
  --cap-bg-hover: var(--primitives-01--jf-10, #e6e6e6);
  --cap-surface: var(--background--primary, #fff);
  --cap-text: var(--text--primary, #181818);
  --cap-text-secondary: var(--text--invert-secondary, #8b8b8b);
  --cap-stroke: var(--stroke--primary, #181818);
  --cap-stroke-soft: var(--icon--tertiary, #d1d1d1);
  --cap-font-title: var(--typography--title, "Helvetica Neue", Helvetica, Arial, sans-serif);
  --cap-font-body: var(--typography--body, "Helvetica Neue", Helvetica, Arial, sans-serif);
  position: static;
  height: 100%;
  font-family: var(--cap-font-body);
  color: var(--cap-text);
  line-height: 1.3;
}

/* ---------- Collapsed card ---------- */

.ouzPXOohFD1IePYXNcRt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: var(--cap-card-h);
  margin: 0;
  padding: var(--cap-card-pad);
  border: 0;
  border-radius: var(--cap-radius);
  background-color: var(--cap-bg);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.3s var(--cap-ease);
}
.ouzPXOohFD1IePYXNcRt:hover,
.ouzPXOohFD1IePYXNcRt:focus-visible {
  background-color: var(--cap-bg-hover);
}
.ouzPXOohFD1IePYXNcRt:focus-visible {
  outline: 2px solid var(--cap-stroke);
  outline-offset: 2px;
}
.WqYXSSvBP_SfJmgriOLL {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: 100%;
}
/* = .what-we-do-title on an h3 (h3 → --typography--title) */
.tT9HNZnnOHM4tIUWfhzq {
  margin: 0;
  font-family: var(--cap-font-title);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
  text-transform: none;
}
.k_TEgXTgpfasQpLVBv26 {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  color: currentColor;
  transition: transform 0.35s var(--cap-ease);
}
.ouzPXOohFD1IePYXNcRt:hover .k_TEgXTgpfasQpLVBv26 {
  transform: rotate(90deg);
}

/* ---------- Expanded panel: fixed, fills the viewport on every breakpoint ---------- */

.EiqOftgQejfoGiA48061 {
  position: fixed;
  inset: 0;
  /* Above the fixed site navigation (JF Navigation is 1003). */
  z-index: 1004;
  display: none;
  flex-direction: column;
  width: 100%;
  /* Height comes from top/bottom: 0, which tracks the visible viewport as
     mobile browser bars show/hide (100svh/100vh would leave a gap). */
  height: auto;
  /* Sides match the section margin. */
  padding: var(--_responsive-numbers---margin-main, 2rem) var(--_responsive-numbers---margin-main, 2rem) 1.5rem;
  border-radius: 0;
  background-color: var(--cap-surface);
  color: var(--cap-text);
  cursor: default;
  /* No overflow:hidden here — clip-path does the clipping while animating, and
     the arrows may nudge past the right edge on hover. */
  will-change: clip-path;
}
/* Insurance for iOS Safari: paint white below the panel while the bottom bar
   is collapsing, so page content can never show through. Clipped by the
   panel's clip-path while it animates. */
.EiqOftgQejfoGiA48061::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 50vh;
  background-color: inherit;
  pointer-events: none;
}
.xWipgzKCNRRx1gTF9ppn[data-state="open"] .EiqOftgQejfoGiA48061,
.xWipgzKCNRRx1gTF9ppn[data-state="opening"] .EiqOftgQejfoGiA48061,
.xWipgzKCNRRx1gTF9ppn[data-state="closing"] .EiqOftgQejfoGiA48061 {
  display: flex;
}
.EiqOftgQejfoGiA48061:focus {
  outline: none;
}
/* Content area above the arrows; stretches so the arrows sit at the bottom. */
.lIAm_VFRIgEhfhQLKHyA {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Title row: matches .practice-area-title-wrapper + .heading-style-h3 */
.pIkI_S7tIG9EXxU05BWg {
  position: relative;
  flex: none;
  padding-top: 0.75rem;
  border-top: var(--stroke-weight--secondary, 1.5px) solid var(--cap-stroke);
}
/* = .heading-style-h3 */
.RXy9EganvhuAfuznKD8W {
  margin: 0;
  padding-right: 3rem;
  font-family: var(--cap-font-title);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15em;
}
.e6bLtTcSkEALpck7iqQq {
  position: absolute;
  top: 0.75rem;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--icon--primary, #181818);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.35s var(--cap-ease), color 0.2s;
}
.e6bLtTcSkEALpck7iqQq:hover {
  transform: rotate(90deg);
}
.e6bLtTcSkEALpck7iqQq:focus-visible {
  outline: 2px solid var(--cap-stroke);
  outline-offset: 2px;
}
.e6bLtTcSkEALpck7iqQq svg {
  width: 100%;
  height: 100%;
}

/* Body: description column + expertise column (.practice-area_wrapper) */
.O_xoLTmj5fAWsBftmM0z {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: minmax(0, 6fr) minmax(300px, 3fr);
  gap: 0 1rem;
  width: 100%;
  padding-top: 1.5rem;
}
.jUXZseQ5auggKbVu3cJK {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.5rem;
  min-height: 0;
  padding-right: 1.5rem;
  overflow: auto;
  scrollbar-width: none;
}
.jUXZseQ5auggKbVu3cJK::-webkit-scrollbar {
  display: none;
}
/* margin-top:auto = sits at the bottom when it fits (like the original
   justify-content:flex-end), but starts at the top and scrolls when it does
   not — flex-end would push the overflow above the scrollable area. */
.HJfoyDu2hIccGNBg3FkM {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 5rem;
  margin-top: auto;
}
/* = .capabilities-panel_text */
.geHzauPcRJYQkw5H3BFg {
  margin: 0;
  font-family: var(--cap-font-title);
  font-size: clamp(1.5rem, 2.5vw - 0.5rem, 1.75rem);
  font-weight: 500;
  line-height: 1.2em;
}
.ekfj5QkYFdO5caOKC6Zk {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 40rem;
}
/* = .practice-area-callout_text (sub line adds .text-color-invert-secondary) */
.PSe2x0J_hzYyum8egWmC {
  font-family: var(--cap-font-title);
  font-size: clamp(2.38rem, 6.25vw - 2.62rem, 3rem);
  font-weight: 400;
  line-height: 1em;
  letter-spacing: normal;
  text-transform: uppercase;
  text-wrap: balance;
}
.N8EnfwHuPspCEadD3eug {
  color: var(--cap-text-secondary);
}

/* Expertise column (.practice-area_right): title hugs the top, list sits at the bottom */
.cUt7WwXfmcTCsW3LM74w {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 0;
  height: 100%;
  padding: 1rem;
  background-color: var(--cap-bg);
  color: var(--cap-text);
}
/* = .text-size-large.text-weight-bold (body font, weight 500) */
.XIiwtHcY4rZ37fPqUk1V {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.372em;
}
.jhfestlViBwDgHp37bLY {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.jhfestlViBwDgHp37bLY::-webkit-scrollbar {
  display: none;
}
/* = .practice-area_subject (body font) */
.eSpzZ5XlID4EDa4DK1Y8 {
  padding-top: 0.25rem;
  padding-bottom: 1rem;
  border-top: 1px solid var(--cap-stroke-soft);
  font-size: clamp(1rem, 1.75vw - 0.4rem, 1.18rem);
  font-weight: 400;
  line-height: 146.875%;
}
.eSpzZ5XlID4EDa4DK1Y8 p {
  margin: 0;
}

/* Prev / next (.practice-area_nav.desktop) */
.N0ncHjf75jW2eWF6yzM0 {
  display: flex;
  flex: none;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  padding-top: 1.5rem;
}
.oCIaNt5cW3cJNGJQMYsV {
  flex: none;
  width: 3.25rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--icon--primary, #181818);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.3s var(--cap-ease), color 0.2s;
}
.oCIaNt5cW3cJNGJQMYsV svg {
  display: block;
  width: 100%;
  height: 100%;
}
.oCIaNt5cW3cJNGJQMYsV:hover {
  color: var(--cap-text-secondary);
}
.oCIaNt5cW3cJNGJQMYsV.yBQJym36XG0SivjiAfUI:hover {
  transform: translateX(-0.35rem);
}
.oCIaNt5cW3cJNGJQMYsV.V7mk1esQQZuJUld816Cw:hover {
  transform: translateX(0.35rem);
}
.oCIaNt5cW3cJNGJQMYsV:focus-visible {
  outline: 2px solid var(--cap-stroke);
  outline-offset: 2px;
}
.oCIaNt5cW3cJNGJQMYsV:disabled {
  color: var(--icon--tertiary, #d1d1d1);
  cursor: default;
  transform: none;
}

/* ---------- "Flat" transition style: no icon motion on hover ---------- */
.xWipgzKCNRRx1gTF9ppn[data-flat] .ouzPXOohFD1IePYXNcRt:hover .k_TEgXTgpfasQpLVBv26,
.xWipgzKCNRRx1gTF9ppn[data-flat] .e6bLtTcSkEALpck7iqQq:hover,
.xWipgzKCNRRx1gTF9ppn[data-flat] .oCIaNt5cW3cJNGJQMYsV.yBQJym36XG0SivjiAfUI:hover,
.xWipgzKCNRRx1gTF9ppn[data-flat] .oCIaNt5cW3cJNGJQMYsV.V7mk1esQQZuJUld816Cw:hover {
  transform: none;
}

/* Everything that animates on open/close/switch */
.DmJcfShiiQHmubASMbmA {
  will-change: transform, opacity;
}

/* ---------- Tablet & phone: fixed, full-viewport panel ---------- */

@media (max-width: 991px) {
  .xWipgzKCNRRx1gTF9ppn {
    --cap-card-h: 12rem;
    --cap-card-pad: 1rem;
  }
  .EiqOftgQejfoGiA48061 {
    width: 100vw;
    padding: 2rem 0 0;
  }
  .lIAm_VFRIgEhfhQLKHyA {
    display: block;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Title row on white: black rule, black title, black close (no image). */
  .pIkI_S7tIG9EXxU05BWg {
    margin: 0 1rem;
    padding-top: 0.75rem;
    background-color: var(--cap-surface);
  }
  .RXy9EganvhuAfuznKD8W {
    padding-right: 2.5rem;
    font-size: 1.5rem;
  }
  .e6bLtTcSkEALpck7iqQq {
    top: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
  }
  .O_xoLTmj5fAWsBftmM0z {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    padding-top: 0;
  }
  .jUXZseQ5auggKbVu3cJK {
    justify-content: flex-start;
    padding: 2.5rem 1rem 3rem;
    overflow: visible;
  }
  .HJfoyDu2hIccGNBg3FkM {
    gap: 3rem;
  }
  .geHzauPcRJYQkw5H3BFg {
    font-size: 1.5rem;
  }
  .PSe2x0J_hzYyum8egWmC {
    font-size: 2.375rem;
  }
  .cUt7WwXfmcTCsW3LM74w {
    height: auto;
    margin: 0 1rem 1rem;
  }
  .jhfestlViBwDgHp37bLY {
    overflow: visible;
  }
  .XIiwtHcY4rZ37fPqUk1V {
    font-size: 1rem;
    line-height: 1.3em;
  }
  .eSpzZ5XlID4EDa4DK1Y8 {
    flex: none;
    font-size: 1rem;
  }
  .N0ncHjf75jW2eWF6yzM0 {
    position: sticky;
    bottom: 0;
    justify-content: space-between;
    padding: 1rem;
    border-top: 1px solid var(--cap-stroke);
    background-color: var(--cap-surface);
  }
  .oCIaNt5cW3cJNGJQMYsV.yBQJym36XG0SivjiAfUI:hover,
  .oCIaNt5cW3cJNGJQMYsV.V7mk1esQQZuJUld816Cw:hover {
    transform: none;
  }
}

@media (max-width: 767px) {
  .geHzauPcRJYQkw5H3BFg {
    font-size: 1.125rem;
  }
  .PSe2x0J_hzYyum8egWmC {
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ouzPXOohFD1IePYXNcRt,
  .k_TEgXTgpfasQpLVBv26,
  .e6bLtTcSkEALpck7iqQq,
  .oCIaNt5cW3cJNGJQMYsV {
    transition: none;
  }
}