/* ---- 1) quote slider (Upsilon homepage pattern) ---- */
.r16q { position: relative; overflow: hidden; padding: 0 0 96px; background: var(--ground); }
.r16q p, .r16q blockquote, .r16q ul { margin: 0; }
.r16q-logos { overflow: hidden; padding: 30px 0; border-bottom: 1px solid var(--line-2); margin-bottom: 72px; }
.r16q-logos ul { display: flex; gap: 72px; width: max-content; padding: 0; list-style: none; animation: r16-marquee 48s linear infinite; }
.r16q-logos li { display: flex; align-items: center; gap: 12px; font: 600 26px/1 var(--sans); letter-spacing: -.02em; color: #8a8a84; white-space: nowrap; }
.r16q-logos img { filter: grayscale(1); opacity: .6; border-radius: 6px; }
@keyframes r16-marquee { to { transform: translateX(-50%); } }

.r16q-head { margin-bottom: 40px; }
.r16q-slides.js { display: grid; }
.r16q-slides.js .r16q-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s; }
.r16q-slides.js .r16q-slide.is-on { opacity: 1; visibility: visible; transition: opacity .35s var(--ease); }
.r16q-slides:not(.js) .r16q-slide + .r16q-slide { margin-top: 72px; }
.r16q-slide { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: center; }

.r16q-marks { display: block; width: 58px; height: 36px; margin-bottom: 22px; }
.r16q-marks path { fill: var(--butter); stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.r16q-quote { font: 400 clamp(26px, 2.4vw, 34px)/1.35 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.r16q-by { display: flex; align-items: center; gap: 16px; margin-top: 34px; }
.r16q-ava { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--butter); box-shadow: 0 0 0 1.5px var(--ink); background: #fff; font: 700 24px/1 var(--sans); color: var(--ink); }
.r16q-by p { display: grid; gap: 4px; }
.r16q-by b { font: 700 18px/1.2 var(--sans); color: var(--ink); }
.r16q-by span { font: 400 16px/1.4 var(--sans); color: var(--ink-2); }

.r16q-art { position: relative; padding: 18px 18px 18px 0; }
.r16q-art::before { content: ''; position: absolute; inset: 0 0 34px 22px; border: 2px dashed #6f6f6f; border-radius: 22px; }
.r16q-card { position: relative; display: grid; align-content: center; justify-items: start; gap: 18px; min-height: 340px; padding: 44px 40px; border: 2px solid var(--ink); border-radius: 24px; transform: rotate(-3deg); background-color: var(--butter);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M-20 40 60 -10 110 120 170 60 250 230 120 150 60 260 Z M260 -20 340 30 300 110 420 80 410 200 330 160 Z' fill='%231d1d1b'/%3E%3C/svg%3E");
  background-size: 100% 100%; box-shadow: 0 24px 40px -26px rgba(0,0,0,.45); }
.r16q-card-ben { transform: rotate(2.5deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M-10 180 90 120 70 220 190 170 150 320 -10 320 Z M200 -20 300 -20 250 70 380 40 330 140 420 160 420 -20 Z' fill='%231d1d1b'/%3E%3C/svg%3E"); }
.r16q-card-janis { transform: rotate(-1.5deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='none'%3E%3Cpath d='M-20 -20 140 -20 80 60 180 50 40 170 70 90 -20 120 Z M240 320 300 200 260 210 340 90 330 180 420 170 420 320 Z' fill='%231d1d1b'/%3E%3C/svg%3E"); }
.r16q-bub { max-width: 100%; padding: 18px 24px 20px; background: #fff; border: 2px solid var(--ink); border-radius: 6px 22px 22px 22px; box-shadow: 4px 4px 0 var(--ink); }
.r16q-from { display: flex; align-items: center; gap: 8px; margin-bottom: 8px !important; font: 400 12px/1 var(--mono); color: var(--muted); }
.r16q-from img { border-radius: 5px; }
.r16q-msg { font: 600 clamp(24px, 2.2vw, 32px)/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.r16q-msg .rtick { display: inline-block; width: 20px; height: 11px; margin-left: 10px; color: #3d8bfd; vertical-align: 2px; }
.r16q-cap { padding: 6px 12px; background: var(--ink); border-radius: 999px; font: 400 12px/1.3 var(--mono); color: #fff; }

.r16q-nav { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 44px; }
.r16q-count { margin-right: auto !important; font: 400 14px/1 var(--mono); color: var(--muted); }
.r16q-count b { color: var(--ink); }
.r16q-arrow { display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background .15s var(--ease); }
.r16q-arrow:hover { background: var(--butter); }
.r16q-arrow svg { width: 26px; height: 12px; }

/* ---- 2) "Which way will you go?" (Upsilon discovery-phase pattern) ---- */
.ww { position: relative; overflow: hidden; padding: 110px 0 104px; background: #1d1d1b; color: var(--dark-text); }
.ww::before, .ww::after { content: '?'; position: absolute; top: -60px; font: 700 980px/1 var(--sans); color: rgba(255,255,255,.028); pointer-events: none; }
.ww::before { left: -120px; } .ww::after { right: -140px; transform: scaleX(-1); }
.ww .wrap { position: relative; }
.ww p, .ww h3 { margin: 0; }
.ww-head { text-align: center; }
.ww-head .kicker { color: var(--butter); } .ww-head h2 { color: #fff; }
.ww-intro { display: flex; align-items: center; justify-content: center; gap: 36px; margin: 44px auto 48px; max-width: 900px; }
.ww-pill { flex: none; display: grid; gap: 8px; padding: 18px 26px; background: var(--butter); border-radius: 999px; }
.ww-pill .ui-in { display: block; padding: 7px 12px; background: #fff; border: 1.5px solid var(--ink); border-radius: 8px; font: 400 13px/1.2 var(--mono); color: var(--ink); white-space: nowrap; }
.ww-goal h3 { font: 600 22px/1.25 var(--sans); color: #fff; }
.ww-goal p { margin-top: 8px; font: 400 17px/1.5 var(--sans); color: #c9c9c0; max-width: 380px; }

.ww-box { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto repeat(4, auto); border: 1px solid #6f6f6f; border-radius: 18px; overflow: hidden; }
.ww-col { grid-row: 1 / span 5; display: grid; grid-template-rows: subgrid; padding: 30px 40px 40px; }
.ww-dark { background: #1d1d1b; }
.ww-light { background: #fff; color: var(--ink); }
.ww-panel { grid-row: 2 / span 4; display: grid; grid-template-rows: subgrid; }
.ww-panel[hidden] { display: none; }
.ww-tabs { display: flex; flex-wrap: wrap; gap: 8px; align-self: start; margin-bottom: 10px; }
.ww-tab { min-height: 38px; padding: 0 14px; border: 1px solid #5a5a55; border-radius: 999px; background: transparent; font: 500 14.5px/1 var(--sans); color: #c9c9c0; cursor: pointer; }
.ww-tab:hover { border-color: #9a9a92; color: #fff; }
.ww-tab[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.ww-us { display: inline-flex; align-items: center; gap: 10px; align-self: start; justify-self: start; min-height: 38px; padding: 0 16px 0 8px; background: var(--butter); border: 1px solid var(--ink); border-radius: 999px; font: 600 14.5px/1 var(--sans); margin-bottom: 10px !important; }
.ww-us img { border-radius: 5px; }
.ww-step { padding: 22px 0 6px; }
.ww-n { font: 700 34px/1 var(--sans); letter-spacing: -.02em; margin-bottom: 12px !important; }
.ww-dark .ww-n { color: #fff; }
.ww-step p + p { font: 400 17px/1.55 var(--sans); max-width: 470px; }
.ww-dark .ww-step p + p { color: #d6d6ce; }
.ww-light .ww-step p + p { color: var(--ink-2); }
.ww-res { margin-top: 14px; padding-top: 26px; border-top: 1px solid #3a3a37; }
.ww-light .ww-res { border-top-color: var(--line); }
.ww-res .ww-n { font-size: 38px; }
.ww-dark .ww-res b { color: #fff; } .ww-light .ww-res b { color: var(--ink); }
.ww-end { display: grid; justify-items: center; gap: 22px; margin-top: 56px; text-align: center; }
.ww-end p { font: 600 22px/1.4 var(--sans); color: #fff; max-width: 620px; }

@media (max-width: 960px) {
  .r16q { padding-bottom: 72px; }
  .r16q-logos { margin-bottom: 52px; padding: 22px 0; }
  .r16q-logos li { font-size: 20px; } .r16q-logos ul { gap: 48px; }
  .r16q-slide { grid-template-columns: 1fr; gap: 40px; }
  .r16q-card { min-height: 240px; padding: 32px 24px; }
  .r16q-art { padding: 14px 10px 14px 0; } .r16q-art::before { inset: 0 0 28px 14px; }
  .r16q-ava { width: 54px; height: 54px; font-size: 20px; }
  .ww { padding: 76px 0 80px; }
  .ww-intro { flex-direction: column; gap: 22px; margin: 32px auto 36px; text-align: center; }
  .ww-pill { border-radius: 28px; padding: 16px 18px; max-width: 100%; }
  .ww-pill .ui-in { white-space: normal; overflow-wrap: anywhere; }
  .ww-goal p { margin-left: auto; margin-right: auto; }
  .ww-box { grid-template-columns: 1fr; grid-template-rows: none; }
  .ww-col { grid-row: auto; display: block; padding: 24px 20px 30px; }
  .ww-panel { display: block; }
  .ww-n { font-size: 28px; } .ww-res .ww-n { font-size: 30px; }
  .ww-step p + p { font-size: 16px; }
  .ww-end p { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .r16q-logos ul { animation: none; } .r16q-slides.js .r16q-slide { transition: none; } }