/* Juris Digital, redesign concept, versions 2 and 3: "Why choose us?" (#why), set as "Reputation, then results".
   Every rule is scoped to .wo2. Chosen 26 Oct 2026 from three layouts reviewed. */

/* Their heading is the layout. One board, split down the middle: "Come for our reputation," heads a paper half
   holding the three reasons that build a reputation (good enough is not good enough, trailblazing leadership,
   proven SEO expertise); "stay for our results." heads a deep-teal half holding the two that pay off for the firm
   (your goals over everything, the ROI guarantee) and the lede. The heading stays one h2: subgrid places its two
   halves into the two panes, and each list is labelled by its own half (aria-labelledby), so no words are added.
   From 900px the halves share every edge: the same top and bottom, the same padding, the heading on one baseline
   across the seam, and three shared rows (lists on a subgrid), so each reason sits level with its neighbour.
   The results half has two reasons, so the lede fills its third row, closing that half. Below 900px the halves
   stack, paper over teal, and run to the screen edges on phones.
   Icons: each reason's glyph (gem, flag, lens, bullseye, rising line; 24 grid, 2 stroke) sits in a small Juris
   shield. On the reputation half the shield is outlined in counsel teal; on the results half it is solid lime, as is
   the rule over each result (the user asked for no gradient on the lines and icons, 26 Oct 2026). Only
   "stay for our results." keeps the gradient. The lede that closes the results half is set larger.
   The stagger (user's pick, 26 Oct 2026): from 900px the results half drops by --drop and runs that much past the
   reputation half's foot; the heading keeps one baseline across the seam.
   The one motion: when the results half comes into view, the gradient sweeps across "stay for our results.", then
   draws the two rules (why.js adds .wo2--armed, then .wo2--on). Nothing moves position. Without JS, with
   ?static or reduced motion it is complete at rest. Without subgrid the section is a plain stack on ground. */

.wo2 {
  --pane: clamp(24px, 4vw, 56px);
  --r: 24px;
  --gap: clamp(28px, 2.6vw, 36px);
  --res: var(--brief);
  --drop: clamp(32px, 3.4vw, 48px);
  position: relative;
  padding: clamp(48px, 6vw, 80px) 0;
}
.wo2__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- type (and the fallback stack) ---------- */
.wo2__title { font-size: clamp(2rem, 3.4vw, 3.125rem); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 20px; }
.wo2__come, .wo2__stay { display: block; }
.wo2__stay { color: var(--counsel-ink); }
.wo2__lede { margin-bottom: var(--gap); font-size: clamp(1.25rem, 1.9vw, 1.75rem); line-height: 1.45; letter-spacing: -.01em; }
.wo2__list { display: grid; gap: var(--gap); }
.wo2__list + .wo2__list { margin-top: var(--gap); }
.wo2__item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-content: start; padding-top: 22px; border-top: 1px solid var(--rule); }
/* top-aligned: the shield's flat top sits on the heading's cap height */
.wo2__icon { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 44px; height: 44px; margin-top: 3px; overflow: visible; --bf: rgba(8, 124, 128, .07); --bs: var(--counsel-ink); --gs: var(--counsel-ink); }
.wo2__item h3 { grid-column: 2; grid-row: 1; align-self: start; font-family: var(--serif); font-size: clamp(1.25rem, 1.6vw, 1.4375rem); font-weight: 400; line-height: 1.22; letter-spacing: -.015em; text-wrap: balance; }
.wo2__item p { grid-column: 2; grid-row: 2; max-width: 58ch; margin-top: 10px; font-size: 1rem; line-height: 1.62; color: var(--ink-2); text-wrap: pretty; }
.wo2__pane { display: none; }
@media (max-width: 359px) { .wo2__item p { grid-column: 1 / -1; } }

/* ---------- the two halves ---------- */
@supports (grid-template-rows: subgrid) {
  /* phones and tablets, in reading order: kicker; "Come for our reputation," and its three reasons; then "stay
     for our results.", the lede and its two */
  .wo2__split { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(6, auto); }
  .wo2__pane { display: block; grid-column: 1; }
  .wo2__pane--rep { grid-row: 2 / 4; border-radius: var(--r) var(--r) 0 0; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule-soft); }
  .wo2__pane--res { grid-row: 4 / 7; border-radius: 0 0 var(--r) var(--r); background: var(--res); }
  .wo2__kicker { grid-row: 1; grid-column: 1 / -1; }
  .wo2__title { grid-row: 2 / 5; grid-column: 1; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; margin: 0; }
  .wo2__come { grid-row: 1; padding: var(--pane) var(--pane) var(--gap); color: var(--ink); }
  .wo2__stay { grid-row: 3; padding: var(--pane) var(--pane) 20px; }
  .wo2__lede { grid-row: 5; grid-column: 1; max-width: none; margin: 0; padding: 0 var(--pane) var(--gap); color: var(--on-dark); }
  .wo2__list { grid-column: 1; align-content: start; padding: 0 var(--pane) var(--pane); }
  .wo2__list--rep { grid-row: 3; }
  .wo2__list.wo2__list--res { grid-row: 6; margin: 0; }

  /* the results half: on teal, and the gradient is theirs */
  .wo2__yours {
    color: transparent;
    background: var(--shield-h) 0 0 / 100% 100% no-repeat, linear-gradient(var(--on-dark), var(--on-dark));
    -webkit-background-clip: text; background-clip: text;
    -webkit-box-decoration-break: slice; box-decoration-break: slice;
  }
  .wo2__list--res .wo2__item { border-top: 0; }
  .wo2__list--res .wo2__item::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 2px; background: var(--retain); transform-origin: 0 50%; }
  .wo2__list--res .wo2__icon { --bf: var(--retain); --bs: none; --gs: var(--docket); }
  .wo2__list--res h3 { color: #fff; }
  .wo2__list--res p { color: var(--on-dark-2); }

  /* desktop: one board, two equal halves sharing every edge and three rows */
  @media (min-width: 900px) {
    .wo2__split { container-type: inline-size; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); }
    .wo2__pane--rep { grid-column: 1; grid-row: 2 / 6; border-radius: var(--r) var(--r) 0 var(--r); }
    /* the stagger: the results half sits --drop lower and runs --drop past the foot; the corners that show are round, the two that meet the other half square */
    .wo2__pane--res { grid-column: 2; grid-row: 2 / 6; margin: var(--drop) 0 calc(var(--drop) * -1); border-radius: 0 var(--r) var(--r) var(--r); }
    .wo2__split { margin-bottom: var(--drop); }
    /* sized to the board (cqi) so "Come for our reputation," keeps to one line in its half */
    .wo2__title { grid-column: 1 / -1; grid-row: 2; grid-template-columns: subgrid; grid-template-rows: auto; font-size: clamp(1.75rem, 3.55cqi, 3.125rem); }
    /* both halves bottom-aligned, so they sit on one baseline even if the left one wraps */
    .wo2__come, .wo2__stay { grid-row: 1; align-self: end; padding: max(calc(var(--pane) + var(--drop)), calc(var(--pane) + 44px)) var(--pane) var(--gap); }
    /* the kicker fills the reputation half's head room (the stagger's extra top), level with the results half's top */
    .wo2__kicker { grid-column: 1; grid-row: 2; align-self: start; z-index: 1; margin: 0; padding: var(--pane) var(--pane) 0; }
    .wo2__come { grid-column: 1; }
    .wo2__stay { grid-column: 2; }
    .wo2__list { grid-row: 3 / 6; grid-template-rows: subgrid; gap: 0; padding: 0 var(--pane); }
    .wo2__list.wo2__list--res { grid-row: 3 / 6; }
    .wo2__list--rep { grid-column: 1; }
    .wo2__list--res { grid-column: 2; }
    .wo2__item { padding-bottom: var(--gap); }
    .wo2__list--rep .wo2__item:last-child { padding-bottom: var(--pane); }
    /* the lede closes the results half, level with the third reputation */
    .wo2__lede { grid-column: 2; grid-row: 5; align-self: start; margin: 0 var(--pane); padding: 22px 0 var(--pane); border-top: 1px solid var(--rule-dark); }
  }

  /* phones: the halves run to the screen edges */
  @media (max-width: 599px) {
    .wo2 { --pane: max(20px, var(--gutter)); padding-bottom: 0; }
    .wo2__split { margin-inline: calc(var(--gutter) * -1); }
    .wo2__kicker { padding-inline: var(--gutter); }
    .wo2__pane { border-radius: 0; box-shadow: none; }
  }

  /* the one motion: the gradient arrives on the results half */
  .wo2--armed .wo2__yours { background-size: 0% 100%, 100% 100%; }
  .wo2--armed .wo2__list--res .wo2__item::before { transform: scaleX(0); }
  .wo2--on .wo2__yours { background-size: 100% 100%, 100% 100%; transition: background-size 1s var(--ease-in-out); }
  .wo2--on .wo2__list--res .wo2__item::before { transform: none; transition: transform .8s var(--ease-out) .5s; }
  .wo2--on .wo2__list--res .wo2__item + .wo2__item::before { transition-delay: .68s; }
  :root.reduce .wo2 * { transition: none !important; }
}