/* ==========================================================================
   S-09 THE THREE, Financial X-Ray rebuild (2026-09-13)
   Three columns across the whole screen (Quinten: left 1, middle 2, right 3),
   each a picture drawn from its own copy, then the heading and the paragraph.
   01 is set a shade grayer than the page (the gray area) with the key phrase
   popping; 02 wires the CPA and attorney tiles to the mark; 03 is the real
   Downey grid with the office pinned. White ground after the navy band.
   Text never sits over the art. Tokens only.
   ========================================================================== */
.lp-why {
  position: relative; z-index: 0;
  background: var(--c-white); color: var(--arbor-text);
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
  padding-inline: clamp(21px, 2vw + 7px, 42px);
  margin-block: 0; border-top: 0;
  font-family: var(--font-body);
  text-align: left;
}
.lp-why div, .lp-why article { border-top: 0; margin-block: 0; padding-top: 0; }
.lp-why p, .lp-why h2 { margin-block: 0; }

/* the whole screen: three equal tracks edge to edge, capped on ultra-wide */
/* three rounded cards, the white ground between them is the divider (Quinten
   2026-09-13: "visibly shown, rounded corners, no divider lines") */
.lp-why .lp-why__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1vw + 7px, 21px); max-width: 1680px; margin-inline: auto;
}
.lp-why__col {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(21px, 1.5vw + 14px, 42px);
  background: var(--paper); border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--arbor-border) 70%, transparent);
}
/* 01: the gray area, literally a shade grayer, its copy dimmed, the phrase pops */
.lp-why__col--gray { background: color-mix(in srgb, var(--arbor-border) 38%, var(--c-white)); }
.lp-why__col--gray .lp-why__p { color: var(--arbor-text-light); }
/* "gray area" pops: navy on a GRAY marker that sweeps in, the literal gray
   area (the first build faded the words out; Quinten: "don't have that fade") */
.lp-why__col--gray .lp-why__h span {
  color: var(--lp-navy);
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--arbor-text-light) 34%, transparent),
    color-mix(in srgb, var(--arbor-text-light) 34%, transparent)) no-repeat 0 50% / 0% 100%;
  padding-block: 0.04em; padding-inline: 0.1em; margin-inline: -0.1em; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size 0.9s ease-out 0.3s;
  /* the phrase never splits: WebKit set "We work in the gray / area" at every
     phone width (measured 2026-09-14, Quinten: "put gray beside it") */
  white-space: nowrap;
}
.lp-why__grid.in-view .lp-why__col--gray .lp-why__h span { background-size: 100% 100%; }

/* the picture: a 4:3 box the column's full width, art fills it, nothing over it */
.lp-why .lp-why__art {   /* .lp-why div zeroes margins; this wins on specificity */
  width: 100%; aspect-ratio: 4 / 3; max-width: 100%;
  margin-top: 0; margin-bottom: clamp(14px, 1vw + 7px, 21px);
  border-radius: 14px; overflow: hidden;
  background: transparent;   /* no inner plate: the art sits on the card itself (Quinten 2026-09-13) */
  display: grid; place-items: center;
}
.lp-why__svg { width: 100%; height: 100%; display: block; }

.lp-why__h {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.375rem, 1.05rem + 1.2vw, 1.875rem);
  line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance;
  color: var(--lp-navy); max-width: 18ch;
}
.lp-why__p {
  margin-top: 9px;
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem); line-height: 1.6;
  color: var(--arbor-text); text-wrap: pretty; max-width: 42ch;
}
.lp-why b { font-weight: 700; color: var(--lp-navy); }
/* the marker, as the gap has it: whole word height, sweeps in on reveal */
.lp-why mark {
  color: var(--lp-navy); font-weight: 700;
  background: linear-gradient(0deg,
    color-mix(in srgb, var(--lp-gold) 42%, transparent),
    color-mix(in srgb, var(--lp-gold) 42%, transparent)) no-repeat 0 50% / 0% 100%;
  padding-block: 0.06em; padding-inline: 0.12em; margin-inline: -0.12em;
  border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  transition: background-size 0.9s ease-out 0.6s;
}
.lp-why__grid.in-view mark { background-size: 100% 100%; }

/* ---- 01 the Venn: the circles slide together, the lens (the gray) fills,
   then they BREATHE, apart and together, so the gray area grows and shrinks
   (cx is a CSS geometry property; the lens circle shares the class, so the
   clip tracks it exactly). 9s, and the labels ride their circles. */
.lp-why__ring { fill: none; stroke-width: 1.5; }
.lp-why__ring--p { stroke: var(--lp-navy); fill: color-mix(in srgb, var(--lp-navy) 4%, transparent); }
.lp-why__ring--b { stroke: var(--lp-gold-dark); fill: color-mix(in srgb, var(--lp-gold) 8%, transparent); }
.lp-why__lens { fill: color-mix(in srgb, var(--arbor-text-light) 34%, transparent); }
.lp-why__lbl {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.04em;
  fill: var(--lp-navy); text-transform: uppercase; text-anchor: middle;
}
.lp-why__lbl--c { text-anchor: middle; font-size: 15px; letter-spacing: 0.12em; fill: var(--arbor-text-light); }
.lp-why__cl { cx: 108px; transition: cx 0.9s ease-out 0.3s; }
.lp-why__cr { cx: 292px; transition: cx 0.9s ease-out 0.3s; }
.lp-why__tl { transform: translateX(-42px); transition: transform 0.9s ease-out 0.3s; }
.lp-why__tr { transform: translateX(42px); transition: transform 0.9s ease-out 0.3s; }
.lp-why__venn-lens { opacity: 0; transition: opacity 0.6s ease-out 1.05s; }
.lp-why__grid.in-view .lp-why__cl { cx: 150px; animation: lp-venn-l 9s ease-in-out 1.4s infinite; }
.lp-why__grid.in-view .lp-why__cr { cx: 250px; animation: lp-venn-r 9s ease-in-out 1.4s infinite; }
.lp-why__grid.in-view .lp-why__tl { transform: translateX(0); animation: lp-venn-tl 9s ease-in-out 1.4s infinite; }
.lp-why__grid.in-view .lp-why__tr { transform: translateX(0); animation: lp-venn-tr 9s ease-in-out 1.4s infinite; }
.lp-why__grid.in-view .lp-why__venn-lens { opacity: 1; }
@keyframes lp-venn-l  { 0%, 100% { cx: 150px; } 50% { cx: 136px; } }
@keyframes lp-venn-r  { 0%, 100% { cx: 250px; } 50% { cx: 264px; } }
@keyframes lp-venn-tl { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-14px); } }
@keyframes lp-venn-tr { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14px); } }

/* ---- 02 the wiring: the lines draw in, then a pulse travels each wire INTO
   the hub every 2.1s, the hub pings as they land, the tiles float ---------- */
.lp-why__tilering { fill: none; stroke: var(--lp-gold); stroke-width: 2; }
.lp-why__hub { fill: var(--lp-navy); }
.lp-why__hubmark path { fill: var(--lp-gold); }
.lp-why__wire {
  fill: none; stroke: var(--lp-gold-dark); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  transition: stroke-dashoffset 0.6s ease-out 0.6s;
}
.lp-why__grid.in-view .lp-why__wire { stroke-dashoffset: 0; }
.lp-why__pulse {
  fill: none; stroke: var(--lp-gold-light); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 8 60; stroke-dashoffset: 68; opacity: 0;
}
.lp-why__grid.in-view .lp-why__pulse { opacity: 1; animation: lp-pulse 2.1s ease-in 1.4s infinite; }
@keyframes lp-pulse { 0% { stroke-dashoffset: 68; } 70%, 100% { stroke-dashoffset: 24; } }
.lp-why__hubring { fill: none; stroke: var(--lp-gold); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lp-why__grid.in-view .lp-why__hubring { animation: lp-hubping 2.1s ease-out 2.87s infinite; }
@keyframes lp-hubping { 0% { transform: scale(1); opacity: 0.7; } 60%, 100% { transform: scale(1.6); opacity: 0; } }
.lp-why__tile { transform-box: fill-box; transform-origin: center; }
.lp-why__grid.in-view .lp-why__tile--1 { animation: lp-float 6s ease-in-out infinite; }
.lp-why__grid.in-view .lp-why__tile--2 { animation: lp-float 6s ease-in-out 3s infinite; }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---- 03 the map: the grid in ink weights, a paper vignette, the pin ------ */
.lp-why__map { background: transparent; }
.lp-why__r { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lp-why__r--d, .lp-map__r--d { stroke: color-mix(in srgb, var(--lp-navy) 16%, transparent); stroke-width: 1.2; }
.lp-map__r--c { stroke: color-mix(in srgb, var(--lp-navy) 30%, transparent); stroke-width: 1.8; }
.lp-map__r--b { stroke: color-mix(in srgb, var(--lp-navy) 48%, transparent); stroke-width: 2.6; }
.lp-map__r--a { stroke: color-mix(in srgb, var(--lp-navy) 70%, transparent); stroke-width: 3.6; }
.lp-map__r--rail { stroke: color-mix(in srgb, var(--lp-navy) 40%, transparent); stroke-width: 1.5; stroke-dasharray: 6 4; }
.lp-map__r { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lp-map__t {
  font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; fill: color-mix(in srgb, var(--lp-navy) 62%, transparent); text-anchor: middle;
}
.lp-why__city {
  font-family: var(--font-display); font-weight: 600; font-size: 44px; letter-spacing: -0.01em;
  fill: var(--lp-navy);
}
.lp-why__attr { font-family: var(--font-body); font-size: 18px; fill: var(--arbor-text-light); text-anchor: end; }
.lp-map__marker { fill: var(--lp-gold); stroke: var(--lp-navy); stroke-width: 1.5; }
.lp-map__dot { fill: var(--lp-navy); }
/* the ping is hard and quick (Quinten: "pinging more abruptly"): the ring
   bursts out in a third of its 2.1s beat, the marker hops with it, and the
   whole grid zooms slowly in and out around the pin (12.6s) */
.lp-map__ring { fill: none; stroke: var(--lp-gold-dark); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lp-why__grid.in-view .lp-map__ring { animation: lp-map-ping 2.1s cubic-bezier(0.1, 0.8, 0.3, 1) 1.4s infinite; }
.lp-why__grid.in-view .lp-map__ring--2 { animation-delay: 1.75s; }
@keyframes lp-map-ping {
  0%   { transform: scale(0.3); opacity: 0.9; }
  34%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
.lp-map__marker, .lp-map__dot { transform-box: fill-box; transform-origin: 50% 100%; }
.lp-why__grid.in-view .lp-map__marker, .lp-why__grid.in-view .lp-map__dot { animation: lp-map-hop 2.1s ease-out 1.4s infinite; }
@keyframes lp-map-hop { 0% { transform: translateY(0); } 6% { transform: translateY(-7px); } 16%, 100% { transform: translateY(0); } }
.lp-map__world { transform-box: view-box; transform-origin: 50% 50%; }
.lp-why__grid.in-view .lp-map__world { animation: lp-map-zoom 12.6s ease-in-out infinite; }
@keyframes lp-map-zoom { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.lp-map__pin { opacity: 0; transform: translateY(-14px); transition: opacity 0.3s ease-out 1.05s, transform 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.3) 1.05s; transform-box: fill-box; }
.lp-why__grid.in-view .lp-map__pin { opacity: 1; transform: translateY(0); }
.lp-why__chip rect { fill: var(--c-white); stroke: var(--lp-gold); stroke-width: 1.5; }
.lp-why__chip text { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: var(--lp-navy); }
.lp-why__chip { opacity: 0; transition: opacity 0.6s ease-out 1.4s; }
.lp-why__grid.in-view .lp-why__chip { opacity: 1; }

@media (max-width: 1200px) {
  .lp-why__col { padding: clamp(21px, 1.5vw + 10px, 28px); }
}
@media (max-width: 900px) {
  .lp-why { text-align: center; }
  .lp-why .lp-why__grid { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .lp-why__col { align-items: center; }
  .lp-why__h, .lp-why__p { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-why mark { transition: none; background-size: 100% 100%; }
  .lp-why__col--gray .lp-why__h span { transition: none; background-size: 100% 100%; }
  .lp-why__cl { transition: none; cx: 150px; animation: none; }
  .lp-why__cr { transition: none; cx: 250px; animation: none; }
  .lp-why__tl, .lp-why__tr { transition: none; transform: none; animation: none; }
  .lp-why__venn-lens { transition: none; opacity: 1; }
  .lp-why__wire { transition: none; stroke-dashoffset: 0; }
  .lp-why__grid.in-view .lp-why__pulse, .lp-why__grid.in-view .lp-why__hubring, .lp-why__grid.in-view .lp-why__tile { animation: none; }
  .lp-map__pin, .lp-why__chip { transition: none; opacity: 1; transform: none; }
  .lp-why__grid.in-view .lp-map__ring, .lp-why__grid.in-view .lp-map__marker, .lp-why__grid.in-view .lp-map__dot, .lp-why__grid.in-view .lp-map__world { animation: none; }
}

/* hover (Quinten 2026-09-13): the card lifts with light all around, its
   outline turns gold, and the picture inside eases larger; the same family
   as the review cards' hover, so the page has one hover language */
.lp-why .lp-why__col { transition: translate 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out; }
.lp-why .lp-why__art { transition: transform 0.6s ease-out; }
.lp-why .lp-why__svg { transition: transform 0.6s ease-out; }
@media (hover: hover) {
  .lp-why .lp-why__col:hover {
    translate: 0 -6px; border-color: var(--lp-gold);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--lp-gold) 40%, transparent),
      0 0 42px color-mix(in srgb, var(--lp-navy) 14%, transparent),
      0 21px 42px color-mix(in srgb, var(--lp-navy) 12%, transparent);
  }
  .lp-why .lp-why__col:hover .lp-why__svg { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-why .lp-why__col, .lp-why .lp-why__art, .lp-why .lp-why__svg { transition: none; }
}

/* between 601 and 900: two cards side by side and the third centred under
   them, an upside-down pyramid (Quinten 2026-09-14); one column at 600 and under */
@media (max-width: 900px) and (min-width: 601px) {
  .lp-why .lp-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px; }
  .lp-why__col:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10.5px); }
}