/* Homepage "What you get" rows: a tight centered column with alternating
   deal-in entrances, a scroll spotlight on the row nearest screen center,
   faint numerals drifting behind each card, and an animated SVG vignette
   per row that plays while its row is lit.

   Scoped entirely under .wyg — .row-list/.row-item are shared with the
   about page and the service pages, and must not be restyled there. */

.wyg { overflow: hidden; }
.wyg-inner { max-width: 880px; margin: 0 auto; }
.wyg .section-head { text-align: center; margin-bottom: 44px; }
.wyg h2 { max-width: 520px; margin: 0 auto; }

/* Rows: text block left (takeaway heading above copy), vignette right */
.wyg .row-list { display: flex; flex-direction: column; gap: 12px; }
.wyg .row-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 12px 36px;
  align-items: center;
  padding: 28px 34px;
  border: 1px solid var(--charcoal-12);
  border-radius: var(--radius-card);
  background: var(--warm-cream);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease-out),
    border-color 0.45s var(--ease),
    box-shadow 0.45s var(--ease);
}
/* Entrance state (deal-in, alternating sides) only applies once JS
   confirms it's driving the reveal — with JS disabled, rows default
   to fully visible instead of stuck at opacity: 0. */
.wyg-js .row-item { opacity: 0; }
.wyg-js .row-item:nth-child(odd) { transform: translateX(-44px) rotate(-0.4deg); }
.wyg-js .row-item:nth-child(even) { transform: translateX(44px) rotate(0.4deg); }
.wyg .row-item.in { opacity: 0.55; transform: none; }

/* Scroll spotlight */
.wyg .row-item.in.lit {
  opacity: 1;
  transform: translateY(-4px);
  border-color: var(--pistachio);
  box-shadow: 0 14px 36px rgba(11, 29, 15, 0.10);
  background: #FFFFFF;
}
@media (hover: hover) {
  .wyg .row-item.in:hover { opacity: 1; border-color: var(--pistachio); }
}

.wyg .row-text { position: relative; z-index: 1; }
/* The key takeaway is the anchor: big, bold, underlined when lit */
.wyg .row-item h3 {
  display: inline-block;
  position: relative;
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
  transition: color 0.4s var(--ease);
}
.wyg .row-item h3::after {
  content: "";
  position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 3px;
  background: var(--pistachio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out) 0.1s;
}
.wyg .row-item.lit h3 { color: var(--green-deep); }
.wyg .row-item.lit h3::after { transform: scaleX(1); }
.wyg .row-item p { font-size: 15px; color: var(--charcoal-58); max-width: 460px; }

/* Ghost numerals: body font, faint, drifting. Kept inside the card
   bounds on the left so the lifted lit state never clips them.
   Selector needs both classes — a bare .ghost rule loses to the
   production .row-item p rule and collapses to body size. */
.wyg .row-item .ghost {
  position: absolute; left: 16px; top: 10px; z-index: 0;
  font-family: var(--font-body); font-weight: 700;
  font-size: 74px; line-height: 1;
  color: var(--pistachio-12);
  pointer-events: none; user-select: none;
  transform: translateY(calc(var(--par, 0) * 1px));
  transition: color 0.45s var(--ease);
}
.wyg .row-item.lit .ghost { color: var(--pistachio-30); }

/* Vignettes: 220x140, play while lit */
.wyg .vig { width: 220px; height: 140px; justify-self: end; position: relative; z-index: 1; }
.wyg .vig svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* 1 · Traffic: search ping, top result claims the highlight */
.wyg .vig .ping {
  fill: none; stroke: var(--pistachio); stroke-width: 1.5;
  opacity: 0; transform-box: fill-box; transform-origin: center;
}
.wyg .lit .vig .ping { animation: wyg-ping 2.2s var(--ease-out) infinite; }
@keyframes wyg-ping {
  0% { opacity: 0.9; transform: scale(0.3); }
  70%, 100% { opacity: 0; transform: scale(1.9); }
}
.wyg .vig .res-win {
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.1s;
}
.wyg .lit .vig .res-win { opacity: 1; }
.wyg .vig .res-line {
  transform-box: fill-box; transform-origin: left center;
  transform: scaleX(0.3);
  transition: transform 0.8s var(--ease-out) 0.25s;
}
.wyg .lit .vig .res-line { transform: scaleX(1); }

/* 2 · Revenue: bars rise, trend draws, marker pops */
.wyg .vig .bar {
  transform-box: fill-box; transform-origin: bottom center;
  transform: scaleY(0.15);
  transition: transform 0.7s var(--ease-out);
}
.wyg .lit .vig .bar { transform: scaleY(1); }
.wyg .lit .vig .b2 { transition-delay: 0.08s; }
.wyg .lit .vig .b3 { transition-delay: 0.16s; }
.wyg .lit .vig .b4 { transition-delay: 0.24s; }
.wyg .lit .vig .b5 { transition-delay: 0.32s; }
.wyg .vig .tick {
  fill: none; stroke: var(--green-deep); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 240; stroke-dashoffset: 240;
  transition: stroke-dashoffset 1s var(--ease-out) 0.35s;
}
.wyg .lit .vig .tick { stroke-dashoffset: 0; }
.wyg .vig .peak {
  opacity: 0; transform-box: fill-box; transform-origin: center bottom;
  transform: scale(0.4) translateY(8px);
  transition: opacity 0.4s var(--ease) 1s, transform 0.5s var(--ease-out) 1s;
}
.wyg .lit .vig .peak { opacity: 1; transform: none; }

/* 3 · Return: the customer walks back to the brand along the return
   path; the brand core pulses a welcome */
.wyg .vig .loop {
  fill: none; stroke: var(--pistachio); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 170; stroke-dashoffset: 170;
  transition: stroke-dashoffset 1s var(--ease-out) 0.2s;
}
.wyg .lit .vig .loop { stroke-dashoffset: 0; }
.wyg .vig .away {
  fill: none; stroke: var(--charcoal-25); stroke-width: 1.5;
  stroke-dasharray: 4 6; stroke-linecap: round;
}
.wyg .vig .person {
  transform-box: fill-box; transform-origin: center;
  transition: transform 0.9s var(--ease-out) 0.3s;
}
.wyg .lit .vig .person { transform: translateX(12px); }
.wyg .vig .p2 { opacity: 0.35; }
.wyg .vig .p3 { opacity: 0.16; }
.wyg .vig .core-pulse {
  transform-box: fill-box; transform-origin: center;
}
.wyg .lit .vig .core-pulse { animation: wyg-welcome 1.8s var(--ease) infinite 1s; }
@keyframes wyg-welcome {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.18); }
}

/* 4 · Edge: your pill rises past the field, crown pops, gap line shows */
.wyg .vig .rival, .wyg .vig .you {
  transform-box: fill-box; transform-origin: bottom center;
  transition: transform 0.7s var(--ease-out), opacity 0.5s var(--ease);
}
.wyg .lit .vig .rival { opacity: 0.4; }
.wyg .lit .vig .you { transform: translateY(-26px); }
.wyg .vig .crown {
  opacity: 0; transform-box: fill-box; transform-origin: center bottom;
  transform: translateY(10px) scale(0.4);
  transition: opacity 0.4s var(--ease) 0.55s, transform 0.5s var(--ease-out) 0.55s;
}
.wyg .lit .vig .crown { opacity: 1; transform: translateY(-26px) scale(1); }
.wyg .vig .gap-line {
  stroke: var(--charcoal-25); stroke-width: 1; stroke-dasharray: 3 4;
  opacity: 0; transition: opacity 0.4s var(--ease) 0.7s;
}
.wyg .lit .vig .gap-line { opacity: 1; }

/* Phone: single centered column, vignette large beneath the copy */
@media (max-width: 768px) {
  .wyg .section-head { margin-bottom: 32px; }
  .wyg .row-item {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 6px;
    padding: 26px 22px 20px;
  }
  .wyg .row-item p { max-width: 340px; }
  .wyg .vig { justify-self: center; width: min(240px, 80vw); height: 130px; margin-top: 10px; }
  .wyg .row-item .ghost { left: 12px; top: 8px; font-size: 54px; }
}

/* Reduced motion: everything visible and in end state */
@media (prefers-reduced-motion: reduce) {
  .wyg .row-item, .wyg .row-item:nth-child(odd), .wyg .row-item:nth-child(even) {
    opacity: 1; transform: none; transition: none;
  }
  .wyg .row-item.in { opacity: 1; }
  .wyg .row-item .ghost { transform: none; transition: none; }
  .wyg .row-item h3::after { transform: scaleX(1); transition: none; }
  .wyg .vig * { animation: none !important; transition: none !important; }
  .wyg .vig .res-win { opacity: 1; }
  .wyg .vig .res-line { transform: none; }
  .wyg .vig .bar { transform: none; }
  .wyg .vig .tick { stroke-dashoffset: 0; }
  .wyg .vig .peak { opacity: 1; transform: none; }
  .wyg .vig .loop { stroke-dashoffset: 0; }
  .wyg .vig .person { transform: translateX(12px); }
  .wyg .vig .you { transform: translateY(-26px); }
  .wyg .vig .crown { opacity: 1; transform: translateY(-26px) scale(1); }
  .wyg .vig .gap-line { opacity: 1; }
}